4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:T2529,--- title: DOCX Import/Export description: Import DOCX files and export Plate content to Word documents. --- ## Features - **Import DOCX files** to Plate format with full content and comment extraction - **Export to DOCX** with support for all common formatting, tables, lists, and images - Support for headers, footers, page orientation, and margins - Configurable CSS styles and fonts for export Looking for paste from Word support? See [DOCX Paste](/docs/docx). ## Installation ```bash npm install @platejs/docx-io ``` ## Import DOCX ### Import DOCX File Use `importDocx` to convert a DOCX file to Plate nodes: ```tsx import { importDocx } from '@platejs/docx-io'; const handleFileUpload = async (file: File) => { const arrayBuffer = await file.arrayBuffer(); const result = await importDocx(editor, arrayBuffer); // Insert nodes into editor editor.tf.insertNodes(result.nodes); // Handle comments if needed for (const comment of result.comments) { console.log(`Comment ${comment.id}: ${comment.text}`); } // Check for conversion warnings if (result.warnings.length > 0) { console.warn('Conversion warnings:', result.warnings); } }; ``` ## Export DOCX ### Basic Export Use `exportToDocx` to convert Plate content to a DOCX file: ```tsx import { exportToDocx, downloadDocx } from '@platejs/docx-io'; const handleExport = async () => { const blob = await exportToDocx(editor.children, { orientation: 'portrait', margins: { top: 1440, bottom: 1440, left: 1440, right: 1440 }, fontFamily: 'Calibri', }); downloadDocx(blob, 'document.docx'); }; ``` Or use the combined function: ```tsx import { exportEditorToDocx } from '@platejs/docx-io'; await exportEditorToDocx(editor.children, 'document', { orientation: 'portrait', }); ``` ### With Editor Plugins For accurate serialization, provide your editor plugins: ```tsx import { exportToDocx } from '@platejs/docx-io'; import { BaseEditorKit } from '@/components/editor/editor-base-kit'; import { DocxExportKit } from '@/components/editor/plugins/docx-export-kit'; const blob = await exportToDocx(editor.children, { editorPlugins: [...BaseEditorKit, ...DocxExportKit], }); ``` ### Custom Styles Customize the export styles: ```tsx import { exportToDocx, DOCX_EXPORT_STYLES } from '@platejs/docx-io'; const blob = await exportToDocx(editor.children, { customStyles: ` .custom-highlight { background-color: #ffeb3b; } h1 { color: #1a1a1a; } `, fontFamily: 'Times New Roman', }); ``` ### Using DocxExportPlugin For plugin-based API access: ```tsx import { DocxExportPlugin } from '@platejs/docx-io'; import { createPlateEditor } from 'platejs/react'; const editor = createPlateEditor({ plugins: [ // ...otherPlugins, DocxExportPlugin.configure({ options: { editorPlugins: myPlugins, editorStaticComponent: MyEditorStatic, }, }), ], }); // Export using plugin API const blob = await editor.api.docxExport.exportToBlob({ orientation: 'landscape', }); editor.api.docxExport.download(blob, 'document'); // Or use transform for export + download await editor.tf.docxExport.exportAndDownload('document', { orientation: 'portrait', }); ``` ## DOCX Export Kit The `DocxExportKit` provides DOCX-optimized static components for elements that require special handling: Components included: - **Code blocks**: Inline syntax highlighting with line breaks - **Columns**: Table layout instead of flexbox - **Equations**: Inline font styling (KaTeX doesn't work in DOCX) - **Callouts**: Table layout for icon + content - **TOC**: Anchor links with proper paragraph breaks ## Plugins ### DocxExportPlugin Plugin providing DOCX export functionality with typed API methods. Plugins to use for HTML serialization. If not provided, uses the editor's current plugins. React component to use for static rendering. ## API ### `importDocx` Import a DOCX file and convert it to Plate nodes. The Plate editor instance. The DOCX file as ArrayBuffer. Import options. RTF data for image extraction. Deserialized editor nodes. Comments extracted from the DOCX file. Warnings from mammoth conversion. ### `exportToDocx` Convert Plate content to a DOCX blob. The Plate editor value (array of nodes). Export options. Page orientation. - **Default:** `'portrait'` Page margins in twentieths of a point (1 inch = 1440). - **Default:** `{ top: 1440, bottom: 1440, left: 1440, right: 1440, header: 720, footer: 720, gutter: 0 }` Font family for the document body. Overrides default Calibri font. Additional CSS styles to include. Appended after default DOCX_EXPORT_STYLES. Document title for metadata. Plugins for HTML serialization. Component for static rendering. A Blob containing the DOCX file. ### `downloadDocx` Download a DOCX blob as a file. The DOCX blob to download. The filename (with or without .docx extension). ### `exportEditorToDocx` Export and download editor content as a DOCX file in one call. The Plate editor value. The filename for download. Export options (same as `exportToDocx`). ### api.docxExport.exportToBlob Convert editor content to a DOCX blob using the plugin API. Page orientation. Page margins. Font family. Additional CSS styles. Document title. A Blob containing the DOCX file. ### api.docxExport.download Download a DOCX blob as a file. The DOCX blob. The filename. ## Transforms ### tf.docxExport.exportAndDownload Export and download editor content as a DOCX file. The filename for download. Export options. ## Types ### DocxComment ```ts type DocxComment = { id: string; text: string; }; ``` ### DocxExportMargins ```ts type DocxExportMargins = { top?: number; bottom?: number; left?: number; right?: number; header?: number; footer?: number; gutter?: number; }; ``` ## Constants ### DOCX_EXPORT_STYLES Default CSS styles optimized for Microsoft Word HTML rendering: - Calibri font (Microsoft Office default) - 11pt font size with 1.5 line height - Heading hierarchy (24pt to 10pt) - Table styles with borders - Code block styling with Courier New - Blockquote styling with left border ## Known Limitations - **Mobile browsers**: Export may not work reliably on mobile browsers due to limitations with blob handling and downloads. - **Complex layouts**: Some complex CSS layouts (flexbox, grid) are converted to table-based layouts for Word compatibility. - **Custom fonts**: Only system fonts available in Word will render correctly. 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"../../content/docs/(plugins)/(serializing)/docx-io.mdx","content":"$4f","type":"registry:file","target":"content/docs/plate/(plugins)/(serializing)/docx-io.mdx"}],"className":"h-[70svh] min-h-80"}]]}]