mikaelmayer / editor Goto Github PK

When I type a long text, it sometimes removes the text I already typed.

Current state of element selection.

Elements can be selected in two ways. Either by clicking directly, or moving the selection around. Currently, moving the selection around is done using this:

The icon on the left selects the parent, the next icon the previous sibling, the next icon the next sibling, and the last icon the first child.
The tag name of the selected element is below, and can be modified. The preview of the

Problems with the current selection:

• Based on user feedback, previous (resp. next) sibling selection should be a arrow (resp right) arrow, and parent selection should be an up arrow.
• Because there is not always a child or a sibling, these icons appear and disappear, making it very difficult to navigate smoothly. For example, the arrow for the previous sibling turns into an arrow for the next sibling when the first child is reached.

Better solution

A 2-state interface to display a node with its children. depending on the context, the selected node can be either display as a child (if it does not have any children) or as the parent (if it has children)
Something like this:

------------------------------------
|     Parent Node tag/id/class     |
|----------------------------------|
| child(n-1) [T] child(n) [T] child(n+1)   |
|__________________________________|

If there is some non-space text between these children elements, there should be some selectable by a T icon indicating this between children that, if clicked, selects the trimmed text.

Interface number 1 (by default for elements having child nodes)

• The surrounding box is in selected color (e.g. orange gray), all children are grey
• If click on the outside box, the interface changes to interface number 2
• If click on a child, this child becomes selected and the interface stays in number 1 mode unless the child does not have child nodes.

Interface number 2 (by default for elements without child nodes, like text nodes or title)

• The surrounding box is in unselected colod, the child(n) is in selected color, all other children are gray
• If we click on the selected child(n) and it has children, the selection stays the same but the interfaces switches to number 1
• If we click on another child, even if it has children, it should stay in number 2.

Animations are not needed for now.

When I copy a title, it is inserted in source code as <h3>bla</h3> instead of ### bla.

Similar to the link edition, it would be useful to have a menu that can be activated by right-clicking any element, so that:

• It highlights the element (add an attribute ghost-under-menu=true)
• it displays a small graph showing the element's tag, the parent element, the previous element sibling (and text sibling if there is one), the next element sibling, and the first and last children. Each element should be clickable to make navigation easy.
• It displays a (searchable) list of attributes and their values (+ special handling for styles and classes?), and ways to add/remove/modify them
• Actions: Unwrap element

when some text is selected

• Actions: Wrap elements in a div
• Action: Add child element

Later:

• On demand, it displays all the CSS attributes that were applied to it, with their provenance, and a way to add, modify and remove them.

Related to #7
Sometimes we add a plug-in which adds tons of boxes and attributes.
We would like to be able, from the Editor's interface to specify which elements should be saved and which should not, and which should always not.

Interface

• In the settings icon (gears), all changes to be saved should be displayed. It should be possible to know the previous value and restore it if necessary.
• It should be also possible to specify that a change should be ignored for saving purposes, just for this session or always.

Implementation

• It should be different from the Undo/Redo feature as it should present a summary of what differences are going to be saved. We should reuse sns.objEnv.string.evaluate({a: domNodeToNative(...), b: (original one obtained after first execution of script or after a save)})("diff a b") to obtain an expected list of differences (the diff language might change in the distant future)
• This list of changes follows the document order.
• For each change, three possible actions:
  • Dismiss the change. It should revert the element to its previous state.
  • Ignore the change. It should ignore the change for this session. For attributes, with the newest Editor's API, one can do: elem.editor.ignoredAttrs["name"] = default value. For inserted nodes, just setting .isghost = true should be sufficient. For deleted nodes, we should figure out something else.
  • Always ignore the change. It should ignore the change as in the previous bullet point. To do so, it suggests a way to recognize the change and save it to the file .editorignore as following:
    • .editorignore has the following shape:

    {
       ghostNodes= [list of node selectors which should be ignored for this file]
       ghostAttrs:= [pairs of node selectors and list of attributes that should be marked as ghost]
       ignoredAttrs = [pairs of node selectors and list of attributes that should be marked as ignored]
    }
    

According to HTML tests, a blockquote inside a paragraph automatically stops it

Therefore, the following example is not updated consistently (create a file test.leo with the following content and open it with Editor)

<html><head></head><body>
<p>Hello world
<blockquote>this is a quote</blockquote>
and this is in the paragraph
</p>
</body></html>

After update, it will return:

<html><head></head><body>
<p>Hello world
</p><blockquote>this is a quote</blockquote>
and this is still in the paragraph
<p></p>
</body></html>

which can lead to unexpected results. Editor should either disable the integration of blockquote directly under

or parse it as the above.

When I paste something, by default it keeps the CSS style, which is usually not what a markdown writer wants

We need a way to specify some attributes that might exist from the beginning but whose changes should not be saved or trigger the save button to activate.
These attributes are different from ghosts attributes because ghost attributes are added, whereas ignored attributes already have a value.

Interface (local and global)

• The special attribute editor-ignore-attribute contains a space-separated list of attribute names whose value is unchanged from the Editor's point of view.
• The special rule (typeof setIgnoreAttributeOnChanged !== "undefined" || []).push({node, attribute} => /*PREDICATE */)

Implementation

• When the attribute named k should be ignored, if not already done, we add to the node's properties the field .editorIgnore.attributes.k = mutationEvent.oldValue. The old value can be recovered from .oldValue from the mutation event.
• When transforming the DOM to a value, if the property editorIgnore.attributes.k exists, we take this value instead of the attribute's value of the DOM.
• Ignored attributes should be marked in gray in the user's interface.