Loading and Exporting .docx Files with Initial Yjs State in a Collaborative Plate.js Editor

[swethamain]

Hii,

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?
What is the best way to initialize the Yjs state with the loaded DOCX content so that users can make changes and download it afterward?
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!