Make inplace checkout

[pepoospina]

When a user checkout another perspective of a block of the editor, that block should be rendered in place, instead of at the top of the editor.

[pepoospina]

As discussed on the call, we can try to implement this as follows:

• Add a coord property to the DocNode type which will store the coordinate, in the tree, of that node. A coordinate is an array of integers with variable length. For example, the coordinate of the root element (doc node) is [0], that of its first child is [0 0], that of its second child is [0 1], that of the second child of the second child is [0 1 1]. You can keep the coordinate upto date in the loadNodeRec() method, sending the parent coordinate to the children, and appending the indexInParent of the children to a clone of the array.

• Create a local variable as a map in the document editor component that keeps track of which nodes coordinates have another perspective checkedout. As key, use JSON.stringify(node.coord) and as value, the uref of the other perspective that is checkedout.

• Add an attribute to the <document-editor> component that is the root-level. Then add a property to the DocNode type that is the level of the node. The level of the node is the root-level plus the level inside the tree (also the length of the coord property - 1). Now use this level inside the documents-text-node-editor component, and replace the current nodeLevel function with node.level. This is replce level=${nodeLevel(node)} with level=${node.level + 1}. This will make the prosemirror editor use h1 for level = 0, or h5 if level = 4.

• Set the color attribute of the internal document-editor to the value returned by the eveeColor() function.