Prosemirror serializer

tommoor · October 8, 2020, 4:46pm

I’m working with yjs and prosemirror, as part of this I needed a way to save Y.Doc back into a prosemirror parsable json structure. This seems to be something that has been requested several times in the issues and forums.

Would you be open to a PR to contribute this utility method to the y-prosemirror codebase?

dmonad · October 12, 2020, 9:55pm

Sure, that would be a great addition!

Ideally it would be a simple function that transforms a Y.XmlFragment (and the schema?) to a ProseMirror JSON.

tommoor · October 12, 2020, 9:58pm

Okay, it’s already written internally – I’ll contribute once it’s better tested.

In a similar vein I feel like I’ve gotten my head around the majority of the ecosystem at this point but one thing is eluding me. We have a lot of existing prosemirror documents that need to be made collaborative, but it isn’t clear to me how to do this, it feels like we need a way to init the Y.Doc from a prosemirror JSON when there isn’t any binary state available. But I can’t find any exposed API’s to enable this

Any pointers?

dmonad · October 12, 2020, 10:13pm

My current recommendation is to create a new editor instance with y-prosemirror and then write the initial content to the editor. The binding will pick it up and sync the content to Yjs.

Not ideal and probably hard to implement on the server side (because PM probably relies on the DOM).

tommoor · October 12, 2020, 10:49pm

prosemirror-view does rely on running in the browser context – so to use the y-prosemirror binding on the server you’d have to run inside Phantom or something similar, clearly this is far from ideal.

It seems like maybe the updateYFragment method could be adjusted/exported to allow passing a prosemirror doc and getting a Y.Doc back though? This wouldn’t rely on the view layer at all.

github.com

yjs/y-prosemirror/blob/master/src/plugins/sync-plugin.js#L689


  return pattrs
}

/**
 * @private
 * @param {Y.Doc} y
 * @param {Y.XmlFragment} yDomFragment
 * @param {any} pNode
 * @param {ProsemirrorMapping} mapping
 */
const updateYFragment = (y, yDomFragment, pNode, mapping) => {
  if (yDomFragment instanceof Y.XmlElement && yDomFragment.nodeName !== pNode.type.name) {
    throw new Error('node name mismatch!')
  }
  mapping.set(yDomFragment, pNode)
  // update attributes
  if (yDomFragment instanceof Y.XmlElement) {
    const yDomAttrs = yDomFragment.getAttributes()
    const pAttrs = pNode.attrs
    for (const key in pAttrs) {
      if (pAttrs[key] !== null) {

dmonad · October 12, 2020, 11:35pm

You can shim the Dom using jsdom. I use it to test y-prosemirror in nodejs. It should be possible to do it without prosemirror-view. That would be the ideal solution. But you probably want PMs schema validation. So it should be passed through the PM packages.

tommoor · October 13, 2020, 7:46pm

Great, I have something working – you do need the schema still to be able to create a valid PMNode to pass into updateYFragment – but it can be done without the binding or the view layer

dmonad · October 14, 2020, 7:25pm

Nice, saw the PR, will go through it tomorrow!