slate-yjs icon indicating copy to clipboard operation
slate-yjs copied to clipboard

Expose Yjs -> Slate / Slate -> Yjs function transformations

Open stedabee opened this issue 2 years ago • 2 comments

Hello @BitPhinix ,

First of all, I just want to say thank you for the work you've done. It saves most of us a lot of time and effort trying to translate and sync data between slate and yjs. I find myself in a position where I have to do some extra data manipulation on the yjs side, to translate some events and extract some data from them. I couldn't find a way to obtain the slate translated events from YjsEditor, so I am wondering if it's possible to expose some of the core functions related to translation from slate -> yjs and yjs -> slate. If this is fine with you, I can hapily help with a PR.

Thanks and looking forward to help if needed! Daniel

stedabee avatar Aug 18 '23 06:08 stedabee

we have this in our webhook code:

import { yTextToSlateElement, slateNodesToInsertDelta } from '@slate-yjs/core'

//...

      transformer: {
        fromYdoc: (doc: Y.Doc) =>
          yTextToSlateElement(
            doc.get('content', Y.XmlText) as unknown as Y.XmlText,
          ),
        toYdoc: (document: Element) => {
          const doc = new Y.Doc()
          const content = doc.get('content', Y.XmlText) as unknown as Y.XmlText
          content.applyDelta(slateNodesToInsertDelta(document.children))
          return doc
        },
      },

dpnova avatar Nov 27 '24 02:11 dpnova

I'm not sure if this helps anyone, but I couldn't get the example above to work. I'm using this to get the json from yjs:

const getSlateJson = (data: Y.Doc) => {
    const yFragment = data.get("content", Y.XmlFragment);
    const arrayData = yFragment.toArray();
    return arrayData.filter((item) => item instanceof Y.XmlText).map((item) => {
        return yTextToSlateElement(item);
    });
}

wvanooijen92 avatar Sep 11 '25 11:09 wvanooijen92