║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Serializing Docx

<ComponentPreview name="docx-demo" /> <PackageInfo>

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

<Callout className="my-4" type="note"> Converting a Plate value to DOCX is not yet supported. </Callout> </PackageInfo>

Kit Usage

<Steps>

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.

<ComponentSource name="docx-kit" />

Add Kit

import { createPlateEditor } from 'platejs/react';
import { DocxKit } from '@/components/editor/plugins/docx-kit';

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...DocxKit,
  ],
});

</Steps>

Manual Usage

<Steps>

Installation

npm install @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

</Steps>

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.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║