Loading and Exporting .docx Files in a Collaborative Plate.js Editor

[swethamain]

Hi Plate.js community,

I’m working on a collaborative editor project using Next.js with Plate.js and several Plate plugins. My goal is to load a .docx file as the initial value in the editor when the page loads.

Users should be able to:
Make edits to the content.
Collaborate in real-time with multiple users using Yjs and @udecode/plate-yjs.
Export the edited document in .docx format, preserving tables, alignment, and other formatting (like headings and lists).

Tools and Packages in Use:
@udecode/plate-docx and Mammoth: to convert DOCX to HTML and set it as the initial editor value.
Yjs and @udecode/plate-yjs: for real-time collaboration.
docx package: to support DOCX file manipulation for downloading.
Tech Details:
Next.js version: ^14.1.0
Plate.js and plugins: ^39.0.0 series
Yjs version: ^13.6.20

Current Approach:
I’ve tried using Mammoth.js to convert the DOCX file to HTML. Here’s a simplified version of my code that demonstrates the key functionality:

// Load DOCX and Convert to HTML
async function loadDocx(file) {
const mammoth = require('mammoth');
const arrayBuffer = await file.arrayBuffer();
const result = await mammoth.convertToHtml({ arrayBuffer });
return result.value;
}

// Save as DOCX with Tables & Formatting
const saveDocx = async (editor) => {
const doc = new Document();
const content = editor.children;

const sections = content.map(node => {
if (node.type === 'p') {
return new Paragraph({ children: formatText(node.children) });
} else if (node.type === 'table') {
return formatTable(node);
}
}).filter(Boolean);

doc.addSection({ children: sections });
const blob = await Packer.toBlob(doc);
saveAs(new File([blob], 'editor-document.docx'));
};

function PlateEditor() {
const editor = useMyEditor();

return (

<Input type="file" accept=".docx" onChange={(e) => loadDocx(e.target.files[0])} />
<Button onClick={() => saveDocx(editor)}>Download as DOCX

);
}

Questions:
Is this the correct approach for using Mammoth with Plate.js to set the initial editor value?
How can I ensure the content loaded from the DOCX file is compatible with Yjs for collaboration?
Are there any best practices for maintaining table alignment and formatting in the exported document?

Any insights on handling these requirements or suggestions for existing approaches I can adapt would be greatly appreciated!

Thank you!

[zbeyens]

We'd also use mammoth for that. It should not interfere with yjs. Note we currently support copy/pasting from docx.

[swethamain]

Hi, Thank you for your response! I've set up the YjsPlugin using Hocuspocus for real-time collaboration. However, I'm facing an issue where the initial value set by my DOCX file upload is overridden by the Yjs state, resulting in an empty document when the editor loads with the plugin enabled. The DOCX content renders correctly if I remove the YjsPlugin, so I’m trying to determine what may be causing this override. It would be great if you could provide your thoughts on this. My Yjs Integration snippet is such : export const useMyEditor = (contentValue) => { const editor = createPlateEditor({ value: contentValue || [], plugins: [ ... // collaboration YjsPlugin.configure({ options: { hocuspocusProviderOptions: { url: 'http://127.0.0.1:8080', name: 'test', }, }, }), .... ], return editor; }; And I have followed the backend of hocuspocus and set up a simple server in node js : import { Hocuspocus } from ***@***.***/server"; const server = new Hocuspocus({ port: 8080, }); server.listen(); Could you advise on why Yjs might be resetting the initial value? Are there specific configurations or timing considerations to ensure Yjs properly syncs with the preloaded DOCX content? Thank you!