Initializing ydoc with monaco editor and react

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]);

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.

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