Initializing ydoc with monaco editor and react

1

so im using web containers by stackblitz and im reading file like we read it in a normal nodejs app so im getting the content in Uint8Array then im creating a doc and a provider but i had this problem if a user is connecting to ther same provider the content will get duplicated when i use the insert so i switched to y.aplyupdate but it throwing this error :

TypeError: contentRefs[(info & BITS5)] is not a function
at readItemContent (chunk-IFCYBQMJ.js?v=895920fb:8685:67)
at readClientsStructRefs (chunk-IFCYBQMJ.js?v=895920fb:2339:13)
at chunk-IFCYBQMJ.js?v=895920fb:2475:14
at transact (chunk-IFCYBQMJ.js?v=895920fb:3386:14)
at readUpdateV2 (chunk-IFCYBQMJ.js?v=895920fb:2470:104)
at applyUpdateV2 (chunk-IFCYBQMJ.js?v=895920fb:2522:3)
at Module.applyUpdate (chunk-IFCYBQMJ.js?v=895920fb:2524:56)
at fetchFileContents (CodeEditor.tsx:59:17)

so here is my code if anyone can help thank you

useEffect(() => {
const fetchFileContents = async () => {
try {
const contents = await Readfile(path.path, props.fs);
if (!!monacoRef.current && !!monacoRef.current.editor) {
const found = monacoRef.current.editor.getModels().find((model) => {
return model.uri.path === path.path;
});
if (!found) {
const ydoc = new Y.Doc();
const provider = new WebsocketProvider(
“ws://localhost:1234”,
path.path,
ydoc
);
console.log(provider);
const ytext = ydoc.getText(“monaco”);
if (!provider.wsconnected) {
Y.applyUpdate(ydoc, contents);
}

        const editor = monacoRef.current.editor.createModel(
          "",
          undefined,
          monaco.Uri.file(path.path)
        );
        if (editorRef.current) {
          const monacoBinding = new MonacoBinding(
            ytext,
            editor,
            new Set([editorRef.current]),
            provider.awareness
          );
        }
      }

      setCurrentModel(monaco.Uri.file(path.path));
    }
  } catch (error) {
    console.error("Error fetching file contents:", error);
  }
};

fetchFileContents();

}, [path, props.fs]);

2

Yjs is something like a git repository. Every change is a new “git patch”.

Y.applyUpdate accepts well-formed Yjs updates (i.e. git patches).

Inserting the content of a text file doesn’t work because it’s not a well-formed Yjs update. You need to manipulate the Yjs document directly using ytext.insert(..) method.

3

Hello , and thankx for replying well i tried the insert with y-indexed but the problem that i want this insert to work only when im initiating the doc so as if its the default data but it doesnt seem to work is there anyway i can initiate an empty db then when i get the data for the first time i push a doc in it only one time i now you have mentionned this topic alot of time but i still dont get it honestly … so here is my code for now useEffect(() => {
const fetchFileContents = async () => {
try {
const contents = await Readfile(path.path, props.fs);

    if (!!monacoRef.current && !!monacoRef.current.editor) {
      const found = monacoRef.current.editor.getModels().find((model) => {
        return model.uri.path === path.path;
      });
      if (!found) {
         const ydoc = new Y.Doc();

        const provider = new WebsocketProvider(
          "ws://localhost:1234",
          path.path,
          ydoc
        );
  

        if (editorRef.current) {
          const ytext = ydoc.getText("monaco");
          ytext.insertEmbed(0, contents);
          const monacoBinding = new MonacoBinding(
            ytext,
            editor,
            new Set([editorRef.current]),
            provider.awareness
          );
        }  
      }
      const editor = monacoRef.current.editor.createModel(
        contents,
        undefined,
        monaco.Uri.file(path.path)
      );
      setCurrentModel(monaco.Uri.file(path.path));
    }
  } catch (error) {
    console.error("Error fetching file contents:", error);
  }
};

fetchFileContents();

}, [path, props.fs]); but when i refresh or a user connects it get duplicated i tried to integrate indexed db but i failed for more context i have many tabs in monaco

4

Now, every time a user opens a document, you insert content. See your code here:

const ytext = ydoc.getText("monaco");
  ytext.insertEmbed(0, contents);
  const monacoBinding = new MonacoBinding(
  ytext,
  editor,
  new Set([editorRef.current]),
  provider.awareness
);

Wouldn’t it make sense to insert the content only once, when the document is created?

5

Thanks for your reply … ive changed the code again what im doing is when path changes the user will connect to the provider and on sync he will get the doc thats already created from provider.doc if it exist and then bind it to the indexed db and the editor otherwise he create a new doc with the content … i dont know if its efficient but its working . Just a question if user 1 connects to the provider 1 and create a doc and modify it and user 2 join the same provider does he get the same doc ?

const ydoc = new Y.Doc();
const provider = new SocketIOProvider(
“http://localhost:3333”,
${props.data.id}:${normalizedPath},
ydoc,
{}
);
provider.on(“sync”, () => {
const indexeddbProvider = new IndexeddbPersistence(
${props.data.id}:${normalizedPath},
provider.doc
);
const editor = monacoRef?.current?.editor.createModel(
contents,
undefined,
monaco.Uri.file(normalizedPath)
);
const ytext = ydoc.getText(“monaco”);
indexeddbProvider.whenSynced.then(() => {
if (ytext.length === 0) {
ytext.insert(0, contents);
}
if (editor) {
new MonacoBinding(
ytext,
editor,
new Set([editorRef.current!]),
provider.awareness
);
}
});