Skip to main content

Docx

The Deserialize Docx plugin allows you to copy and paste content from Microsoft Word documents directly into your Plate editor.

This functionality makes it easy to integrate formatted text and other content from Word documents into your editor without losing formatting or structure.

Demo#

To see the Deserialize Docx plugin in action, simply copy content from a Microsoft Word document and paste it into your Plate editor.

The plugin will automatically preserve the formatting and structure of the pasted content.

import React from 'react';
import {
  createAlignPlugin,
  createDeserializeDocxPlugin,
  createFontBackgroundColorPlugin,
  createFontColorPlugin,
  createFontFamilyPlugin,
  createFontSizePlugin,
  createFontWeightPlugin,
  createHorizontalRulePlugin,
  createImagePlugin,
  createIndentListPlugin,
  createIndentPlugin,
  createLineHeightPlugin,
  createTablePlugin,
  createTextIndentPlugin,
  Plate,
} from '@udecode/plate';
import { createJuicePlugin } from '@udecode/plate-juice';
import { alignPlugin } from './align/alignPlugin';
import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins';
import { editableProps } from './common/editableProps';
import { plateUI } from './common/plateUI';
import { indentPlugin } from './indent/indentPlugin';
import { lineHeightPlugin } from './line-height/lineHeightPlugin';
import { deserializeDocxValue } from './serializing-docx/deserializeDocxValue';
import { createMyPlugins, MyValue } from './typescript/plateTypes';

const plugins = createMyPlugins(
  [
    ...basicNodesPlugins,
    createImagePlugin(),
    createHorizontalRulePlugin(),
    createLineHeightPlugin(lineHeightPlugin),
    // createLinkPlugin(),
    createTablePlugin(),
    createAlignPlugin(alignPlugin),
    createFontBackgroundColorPlugin(),
    createFontFamilyPlugin(),
    createFontColorPlugin(),
    createFontSizePlugin(),
    createFontWeightPlugin(),
    createIndentListPlugin(),
    createIndentPlugin(indentPlugin),
    createTextIndentPlugin(),
    createDeserializeDocxPlugin(),
    createJuicePlugin(),
  ],
  {
    components: plateUI,
  }
);

export default () => (
  <Plate<MyValue>
    editableProps={editableProps}
    plugins={plugins}
    initialValue={deserializeDocxValue}
  />
);

Installation#

Follow these steps to integrate the deserialize Docx plugin into your Plate editor:

  1. Install the required packages:
npm install @udecode/plate @udecode/plate-juice
# or
npm install @udecode/plate-serializer-docx @udecode/plate-juice
  1. Import the plugin and add it to your plugin list:
import React from 'react';
import {
createImagePlugin,
createHorizontalRulePlugin,
createLineHeightPlugin,
createTablePlugin,
createAlignPlugin,
createFontBackgroundColorPlugin,
createFontFamilyPlugin,
createFontColorPlugin,
createFontSizePlugin,
createFontWeightPlugin,
createIndentListPlugin,
createIndentPlugin,
createTextIndentPlugin,
createDeserializeDocxPlugin,
} from '@udecode/plate';
import { createJuicePlugin } from '@udecode/plate-juice';
const plugins = createPlugins([
// ...otherPlugins,
createImagePlugin(),
createHorizontalRulePlugin(),
createLineHeightPlugin(),
createTablePlugin(),
createAlignPlugin(),
createFontBackgroundColorPlugin(),
createFontFamilyPlugin(),
createFontColorPlugin(),
createFontSizePlugin(),
createFontWeightPlugin(),
createIndentListPlugin(),
createIndentPlugin(),
createTextIndentPlugin(),
createDeserializeDocxPlugin(),
createJuicePlugin(),
], {
components: createPlateUI(),
});

Given pasted HTML, @udecode/plate-juice is used to inline CSS properties into the style attribute.

Source Code#