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}
  />
);

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

Installation

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

1. Install the required packages:

npm

npm install @udecode/plate @udecode/plate-juice

# or

npm install @udecode/plate-serializer-docx @udecode/plate-juice

Yarn

yarn add @udecode/plate @udecode/plate-juice

# or

yarn add @udecode/plate-serializer-docx @udecode/plate-juice

2. 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

• Plugin
• Variables