Update rich text docs

[alexjg]

Update the rich text docs to match the simplified plugin API. This is a sketch, I still need to check the example code functions.

[c4lliope]

This already is much more reliable! I can see the synchronization from one tab to another, and there are no more issues around the handle.whenReady() signal.

The one remaining issue I see: I can apply changes to a document, and then open the URL in a new tab and I see a blank page. The new editor does nothing to catch up on the change log.

From then on, any new synchronization occurs like normal, so the handle is solid. There is simply a missing phase: how to load the document from the docHandle into ProseMirror once the editor is rendered on screen.

I'll explore more once plugged in again.

[c4lliope]

huh, do you think this could be an issue in the init() call?
I added some debugging assignments to the code, and came up with:

      const { doc, schema, plugin } = init(handle!, ["page"])
      window.doc = doc
      window.schema = schema
      window.plugin = plugin

browser console:

> doc
undefined

> schema
Object { linebreakReplacement: null, cached: {…}, spec: {…}, nodes: {…}, marks: {…}, nodeFromJSON: BoundFunctionObject, markFromJSON: BoundFunctionObject, topNodeType: {…} }

> plugin
Object { spec: {…}, props: {}, key: "automerge-sync$" }

[c4lliope]

Meanwhile, window.handle.doc().then(console.log) seems to be populated like normal:

> handle.doc().then(console.log)
Object { page: "aaaaaabcdaabbaaaaaaBlank page.", … }

( I use page rather than text. Same idea; the doc is present in the repo and missing in the prosemirror callback.)

[c4lliope]

Yep! A simple change in name; the guide should change doc to pmDoc in the init() return assignment:

  useEffect(() => {
    if (editorRoot.current != null && loaded) {
      const { pmDoc, schema, plugin } = init(handle!, ["text"])
      const plugins = exampleSetup({schema})
      plugins.push(plugin)

      setView(new EditorView(
        editorRoot.current,
        { state: EditorState.create({ schema, plugins, doc: pmDoc, }), }
      ))
    }
    return () => { if (view) { view.destroy(); setView(null) } }
  }, [editorRoot, loaded])

[c4lliope]

You also have my 👍 to change the return signature to conform to prosemirror, seems sensible in this case.

[c4lliope]

Also see!
automerge/automerge-prosemirror#27