Serializing Docx

PreviousNext
Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

  • Convert pasted DOCX content to Plate format
  • Clean and normalize DOCX HTML content for Plate compatibility
  • Support for list styles and nested indentation from Word documents

Converting a Plate value to DOCX is not yet supported.

Kit Usage

Installation

The fastest way to add DOCX import functionality is with the DocxKit, which includes pre-configured DocxPlugin and JuicePlugin for handling DOCX content and CSS processing.

'use client';
 
import { DocxPlugin } from '@platejs/docx';
import { JuicePlugin } from '@platejs/juice';
 
export const DocxKit = [DocxPlugin, JuicePlugin];

Add Kit

import { createPlateEditor } from 'platejs/react';
import { DocxKit } from '@/components/editor/plugins/docx-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...DocxKit,
  ],
});

Manual Usage

Installation

pnpm add @platejs/docx @platejs/juice

Add Plugins

import { DocxPlugin } from '@platejs/docx';
import { JuicePlugin } from '@platejs/juice';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    DocxPlugin,
    JuicePlugin,
  ],
});

Configure Plugins

import { DocxPlugin } from '@platejs/docx';
import { JuicePlugin } from '@platejs/juice';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    DocxPlugin, // Handles DOCX content transformation
    JuicePlugin, // Inlines CSS properties into style attributes
  ],
});
  • DocxPlugin: Processes pasted DOCX content and converts it to Plate format
  • JuicePlugin: Inlines CSS properties into the style attribute for better compatibility

Usage

DOCX to Plate

When users paste content from Microsoft Word, the DOCX plugin automatically:

  1. Detects DOCX content in the clipboard
  2. Cleans and normalizes the HTML structure
  3. Preserves indentation and list formatting
  4. Converts DOCX-specific elements to Plate format

The plugin works seamlessly with the paste functionality - no additional code is needed once installed.

Plugins

DocxPlugin

Plugin for processing DOCX content during paste operations.

JuicePlugin

Plugin for inlining CSS properties into HTML elements. Converts external CSS styles to inline style attributes. This is essential for DOCX processing as it ensures styling information is preserved when content is pasted from Word documents.

CSVHTML