The Grid Ed: Overlay widgets

Show
1

Moved this to not hijack the proseMirror-widget project thread.

We’re working on a related challenge from a different angle: widgets overlaid with PM editable content, outside of the editable flow.

Demo, with a CodeMirror widget in an iframe overlay: http://the-grid.github.io/ed/

There is only one extension to the schema: divs that act as placeholders for the overlays to stay in sync with. There is a little trickiness to keep the positions synchronized, but it seems to work.

TODO: making cut and paste work, making arrow ↑ ↓ caret navigation work as expected.

2

This is interesting. I only saw it just now due to overeager spam filtering by my mail client. The widgets appear to be inline in the editor’s DOM. Can you go into a little more detail on how they are implemented?

3

It is a bit hacky, but working surprisingly well (I’ve been trying this in a few permutations over the past year).

  1. Ed parses a Grid API post array into a PM Doc. HTML type blocks belong to PM, all others PM just renders as DIVs to make room in the contenteditable flow.
  2. Ed listens for PM’s draw signal, and looks for and measures the placeholder DIVs.
  3. Ed mounts the widgets and positions them with placeholders. Some types are iframes (like CodeMirror), others are React components.
  4. When a widget’s inner height changes, it tells PM to update the placeholder height attribute. (GOTO 2)
4

@marijn Maybe all of this overlay hackery wouldn’t be needed if PM had examples with contenteditable=false divs in the flow. Is anything like that in the works?

5

Is there anything about this that is causing you confusion? Nodes without content are automatically set to contenteditable=false when rendered. So it seems like the right thing just happens, as seen in the most basic form in the horizontal_rule node, but you can create a node like that that renders its content in a more complicated way. (Just be aware that ProseMirror might occasionally decide to redraw the node when its surroundings change.)

6

Is there a canonical way to listen for these nodes getting redrawn, if their content is cleared at that point? (Or just listen for draw then loop through DOM?)

7

Listening to "draw" sounds like it’d work with little extra complexity.

8

To update this show & tell, the Grid’s Ed v2 has hit master, updated for PM 0.17.x. Widgets are no longer overlaid & synced. Now there is an inline representation that is rendered as a NodeView and and editor representation that is rendered as a modal.

9

That is looking really nice. The drag and drop improvements make a big difference.