@udecode/plate-core

What is @udecode/plate-core?

@udecode/plate-core is a core package for the Plate rich text editor framework. It provides a set of tools and utilities to build customizable and extensible rich text editors in React. The package offers a modular architecture, allowing developers to add or remove features as needed.

What are @udecode/plate-core's main functionalities?

Customizable Editor

This feature allows you to create a customizable editor by using the `createPlateUI` function. You can define your own components and pass them to the `Plate` component.

import { createPlateUI, Plate } from '@udecode/plate-core';

const MyEditor = () => {
  const components = createPlateUI();
  return <Plate components={components} />;
};

Plugins

This feature allows you to add plugins to the editor. In this example, the `createBoldPlugin` is used to add bold text functionality to the editor.

import { createPlateUI, Plate } from '@udecode/plate-core';
import { createBoldPlugin } from '@udecode/plate-basic-marks';

const MyEditor = () => {
  const components = createPlateUI();
  const plugins = [createBoldPlugin()];
  return <Plate components={components} plugins={plugins} />;
};

Serialization

This feature allows you to serialize the editor content to HTML. The `serializeHtml` function takes the editor nodes and converts them to an HTML string.

import { serializeHtml } from '@udecode/plate-core';

const html = serializeHtml({
  nodes: [
    { type: 'paragraph', children: [{ text: 'Hello, world!' }] }
  ]
});
console.log(html);

Other packages similar to @udecode/plate-core

slate

Slate is a completely customizable framework for building rich text editors. It provides a set of tools to create complex editors with a focus on extensibility and customization. Compared to @udecode/plate-core, Slate offers a lower-level API, giving developers more control but requiring more setup.

draft-js

Draft.js is a framework for building rich text editors in React, developed by Facebook. It provides a set of tools to create editors with a focus on inline and block-level content. Compared to @udecode/plate-core, Draft.js is more opinionated and less modular, but it is widely used and well-documented.

prosemirror

ProseMirror is a toolkit for building rich text editors with a focus on performance and flexibility. It provides a set of tools to create highly customizable editors. Compared to @udecode/plate-core, ProseMirror offers a more complex API and requires a deeper understanding of its architecture.

README

Plate core architecture

This package implements the Plate core architecture: a plugin system which glues everything together.

Documentation

Check out:

• Basic Editor
• Plate and the following guides.

API

See the API documentation.

License

MIT