Need an example for testing addition of text data in editor for yjs websocket backend

[sbavoma]

Hi, I have an application using slate editor with slate-yjs bindings in frontend and a yjs websocket backend service.

The data from frontend( slate editor) is sent as an array buffer Slate yjs does the job of converting the data from JSON to Yjs format and send it over the network as Uint8 Arraybuffer The data is stored in content sharedType array and updates are applied on it.

I want to know if there is a good example to know how to send doc updates to backend service from using slate yjs

Here is a code snippet for reference,

import {WebSocket} from 'ws';
import * as Y from 'yjs';
import { WebsocketProvider } from './y-websocket.js';

const run = async () => {
  const doc1 = new Y.Doc();
  const doc2 = new Y.Doc();

  const wsp1 = new WebsocketProvider(wsUrl, id, doc1, {
    connect: false,
    params: {
      docId: id,
      token,
      name,
      isStaging: false
    }
  });

  const wsp2 = new WebsocketProvider(wsUrl, id, doc2, {
    connect: false,
    params: {
      docId: id,
      token,
      name,
      isStaging: false
    }
  });

  wsp1.connect();
  await wait(1);

  wsp2.connect();
  await wait(1);

  doc1.on('update', u => {
    Y.applyUpdate(doc2, u)
  });

  wsp1.awareness.setLocalStateField('foo', 1);
  await wait(0.3);

  let y = doc1.getArray('content');

  const text2 = {
    text: "hi there"
  };

  await wait(5);
}

run();

On server side, I am not able to reflect these updates due to an error in toSlateDoc function (it wants data as object but received a json instead)

[{"children":[{"text":"hi there"}],"type":"paragraph","data":{"block_created":"2023-05-15T01:27:43+05:30","block_updated":"2023-05-15T01:27:55+05:30"}},{"children":[{"text":"Participants","object":"text"}],"object":"block","type":"header-2","data":{"block_key":"cb8hm","highlight_notes_title":true,"machine_title":true}},{"children":[{"children":[{"children":[{"text":"Shivam","object":"text"}],"object":"block","type":"paragraph"}],"object":"block","type":"list-item","data":{}}],"object":"block","type":"unordered-list","data":{}},{"children":[{"text":"","type":"text"}],"type":"paragraph"},{"children":[{"children":[{"children":[{"text":"Hi"}],"type":"paragraph","data":{"block_updated":"2023-05-12T02:39:08+05:30"}}],"type":"list-item"}],"type":"unordered-list"}]
2023-05-15 13:39:46 /code/node_modules/slate-yjs/dist/main/model/index.js:27
2023-05-15 13:39:46         return element === null || element === void 0 ? void 0 : element.get('text');
2023-05-15 13:39:46                                                                          ^
2023-05-15 13:39:46 
2023-05-15 13:39:46 TypeError: element.get is not a function
2023-05-15 13:39:46     at Object.getText (/code/node_modules/slate-yjs/dist/main/model/index.js:27:74)
2023-05-15 13:39:46     at toSlateNode (/code/node_modules/slate-yjs/dist/main/utils/convert.js:32:38)
2023-05-15 13:39:46     at /code/node_modules/yjs/dist/yjs.cjs:5149:17
2023-05-15 13:39:46     at typeListForEach (/code/node_modules/yjs/dist/yjs.cjs:5127:9)
2023-05-15 13:39:46     at typeListMap (/code/node_modules/yjs/dist/yjs.cjs:5148:3)
2023-05-15 13:39:46     at YArray.map (/code/node_modules/yjs/dist/yjs.cjs:5767:12)
2023-05-15 13:39:46     at toSlateDoc (/code/node_modules/slate-yjs/dist/main/utils/convert.js:54:16)
2023-05-15 13:39:46     at Function.set (/code/src/controllers/storage.js:53:38)
2023-05-15 13:39:46     at /code/src/libs/y_websocket/utils.js:86:36
2023-05-15 13:39:46     at invokeFunc (/code/node_modules/lodash/debounce.js:95:19)
2023-05-15 13:39:46 [nodemon] app crashed - waiting for file changes before starting...

[sbavoma]

@BitPhinix

[BitPhinix]

I don't fully understand your question but https://docs.slate-yjs.dev/walkthroughs/collaboration-hocuspocus or https://liveblocks.io/docs/get-started/yjs-slate-react might be a good place to start?