Major Releases up to v48 - Plate

#4281 by @zbeyens –

PlateElement, PlateLeaf and PlateText HTML attributes are moved from top-level props to attributes prop, except className, style and as. Migration:

// From
<PlateElement
  {...props}
  ref={ref}
  contentEditable={false}
>
  {children}
</PlateElement>
 
// To
<PlateElement
  {...props}
  ref={ref}
  attributes={{
    ...props.attributes,
    contentEditable: false,
  }}
>
  {children}
</PlateElement>

// From
<PlateElement
  {...props}
  ref={ref}
  contentEditable={false}
>
  {children}
</PlateElement>
 
// To
<PlateElement
  {...props}
  ref={ref}
  attributes={{
    ...props.attributes,
    contentEditable: false,
  }}
>
  {children}
</PlateElement>

Remove nodeProps prop from PlateElement, PlateLeaf, PlateText. It has been merged into attributes prop.
Plugin node.props should return the props directly instead of inside nodeProps object. Migration:

// From
node: {
  props: ({ element }) => ({
    nodeProps: {
      colSpan: element?.attributes?.colspan,
      rowSpan: element?.attributes?.rowspan,
    },
  });
}
 
// To
node: {
  props: ({ element }) => ({
    colSpan: element?.attributes?.colspan,
    rowSpan: element?.attributes?.rowspan,
  });
}

Remove asChild prop from PlateElement, PlateLeaf, PlateText. Use as prop instead.
Remove elementToAttributes, leafToAttributes, textToAttributes props from PlateElement, PlateLeaf, PlateText.
Remove DefaultElement, DefaultLeaf, DefaultText. Use PlateElement, PlateLeaf, PlateText instead.
Types: remove PlateRenderElementProps, PlateRenderLeafProps, PlateRenderTextProps. Use PlateElementProps, PlateLeafProps, PlateTextProps instead.

#4225 by @bbyiringiro –

Add multi-provider support for improved collaboration: now supports both Hocuspocus and WebRTC simultaneously using a shared Y.Doc.
- Migration: Replace hocuspocusProviderOptions with the new providers array. See examples below.

Before:

YjsPlugin.configure({
  options: {
    cursorOptions: {
      /* ... */
    },
    hocuspocusProviderOptions: {
      url: 'wss://hocuspocus.example.com',
      name: 'document-1',
      // ... other Hocuspocus options
    },
  },
});

YjsPlugin.configure({
  options: {
    cursorOptions: {
      /* ... */
    },
    hocuspocusProviderOptions: {
      url: 'wss://hocuspocus.example.com',
      name: 'document-1',
      // ... other Hocuspocus options
    },
  },
});

After (Hocuspocus only):

YjsPlugin.configure({
  options: {
    cursors: {
      /* ... */
    },
    providers: [
      {
        type: 'hocuspocus',
        options: {
          url: 'wss://hocuspocus.example.com',
          name: 'document-1',
          // ... other Hocuspocus options
        },
      },
    ],
  },
});

YjsPlugin.configure({

After (Hocuspocus + WebRTC):

YjsPlugin.configure({
  options: {
    cursors: {
      /* ... */
    },
    providers: [
      {
        type: 'hocuspocus',
        options: {
          url: 'wss://hocuspocus.example.com',
          name: 'document-1',
        },
      },
      {
        type: 'webrtc',
        options: {
          roomName: 'document-1',
          // signaling: ['wss://signaling.example.com'], // Optional
        },
      },
    ],
  },
});

Introduces UnifiedProvider interface that enables custom provider implementations (e.g., IndexedDB for offline persistence).
Renamed cursorOptions to cursors.
Merged yjsOptions into options.
- Migration: Move options previously under yjsOptions directly into the main options object.
Removed YjsAboveEditable. You should now call init and destroy manually:

React.useEffect(() => {
  if (!mounted) return;
 
  // Initialize Yjs connection and sync
  editor.getPluginApi(YjsPlugin).yjs.init({
    id: roomName, // Or your document identifier
    value: INITIAL_VALUE, // Your initial editor content
  });
 
  // Destroy connection on component unmount
  return () => {
    editor.getPluginApi(YjsPlugin).yjs.destroy();
  };
}, [editor, mounted, roomName]); // Add relevant dependencies

#4174 by @felixfeng33 – #### New Features
- Added support for math type deserialization
- Added default underline mark serialization as <u>underline</u>
- Improved serialization process:
  - Now uses a two-step process: slate nodes => MDAST nodes => markdown string
  - Previously: direct conversion from Plite nodes to markdown string
  - Results in more reliable and robust serialization
- New node filtering options:
  - allowedNodes: Whitelist specific nodes
  - disallowedNodes: Blacklist specific nodes
  - allowNode: Custom function to filter nodes
- New rules option for customizing serialization and deserialization rules, including custom mdx support
- New remarkPlugins option to use remark plugins
Breaking Changes

Plugin Options

Removed options:
- elementRules use rules instead
- textRules use rules instead
- indentList now automatically detects if the IndentList plugin is used
- splitLineBreaks deserialize only
Deserialization
- Removed elementRules and textRules options
  - Use rules.key.deserialize instead
  - See nodes documentation
Example migration:
```
export const markdownPlugin = MarkdownPlugin.configure({
  options: {
    disallowedNodes: [SuggestionPlugin.key],
    rules: {
      // For textRules
      [BoldPlugin.key]: {
        mark: true,
        deserialize: (mdastNode) => ({
          bold: true,
          text: node.value || '',
        }),
      },
      // For elementRules
      [EquationPlugin.key]: {
        deserialize: (mdastNode, options) => ({
          children: [{ text: '' }],
          texExpression: node.value,
          type: EquationPlugin.key,
```
- Removed processor in editor.api.markdown.deserialize
  - Use remarkPlugins instead
Serialization
- Removed serializeMdNodes
  - Use editor.markdown.serialize({ value: nodes }) instead
- Removed SerializeMdOptions due to new serialization process
  - Previous process: slate nodes => md
  - New process: slate nodes => md-ast => md
- Removed options:
  - nodes
  - breakTag
  - customNodes
  - ignoreParagraphNewline
  - listDepth
  - markFormats
  - ulListStyleTypes
  - ignoreSuggestionType
Migration example for SerializeMdOptions.customNodes and SerializeMdOptions.nodes:
```
export const markdownPlugin = MarkdownPlugin.configure({
  options: {
    rules: {
      // Ignore all `insert` type suggestions
      [SuggestionPlugin.key]: {
        mark: true,
        serialize: (slateNode: TSuggestionText, options): mdast.Text => {
          const suggestionData = options.editor
            .getPluginApi(SuggestionPlugin)
            .suggestion.suggestionData(node);
 
          return suggestionData?.type === 'insert'
            ? { type: 'text', value: '' }
            : { type: 'text'
```

#4122 by @zbeyens – Migrated from prismjs to highlight.js + lowlight for syntax highlighting.
- Fix highlighting multi-lines tokens. Before, line tokens were computed line by line. Now, it's computed once for the whole block.
- Bundle size much lower.
- CodeBlockPlugin: remove prism option. Use lowlight option instead:
```
import { all, createLowlight } from 'lowlight';
 
const lowlight = createLowlight(all);
 
CodeBlockPlugin.configure({
  options: {
    lowlight,
  },
});
```
```
import { all, createLowlight } from 'lowlight';
 
const lowlight = createLowlight(all);
 
CodeBlockPlugin.configure({
  options: {
    lowlight,
  },
});
```
- New option: defaultLanguage
- Remove syntax option. Just omit lowlight option to disable syntax highlighting.
- Remove syntaxPopularFirst option. Control this behavior in your own components.
- Fix pasting code inside code blocks.
- Remove useCodeBlockCombobox, useCodeBlockElement, useCodeSyntaxLeaf, useToggleCodeBlockButton. The logic has been moved to the components.

#4048 by @zbeyens –
- Support React 19
- Upgraded to zustand-x@6
  - eventEditorSelectors -> EventEditorStore.get
  - eventEditorActions -> EventEditorStore.set
  - useEventEditorSelectors -> useEventEditorValue(key)
- Upgraded to jotai-x@2
  - usePlateEditorStore -> usePlateStore
  - usePlateActions -> usePlateSet
  - Remove editor.setPlateState, use usePlateSet instead
  - usePlateSelectors -> usePlateValue
  - usePlateStates -> usePlateState
- Moving plugin options hooks into standalone hooks to be compatible with React Compiler
  - editor.useOption, ctx.useOption -> usePluginOption(plugin, key, ...args)
  - editor.useOptions, ctx.useOptions -> usePluginOption(plugin, 'state')
  - New hook usePluginOptions(plugin, selector) to select plugin options (Zustand way).
- We were supporting adding selectors to plugins using extendOptions. Those were mixed up with the options state, leading to potential conflicts and confusion.
  - The plugin method is renamed to extendSelectors
  - Selectors are now internally stored in plugin.selectors instead of plugin.options, but this does not change how you access those: using editor.plugin(plugin).getOption('selectorName'), ctx.getOption('selectorName') or above hooks.
  - Selector types are no longer in the 2nd generic type of PluginConfig, we're adding a 5th generic type for it.
```
// Before:
export type BlockSelectionConfig = PluginConfig<
  'blockSelection',
  { selectedIds?: Set<string>; } & BlockSelectionSelectors,
>;
 
// After:
export type BlockSelectionConfig = PluginConfig<
  'blockSelection',
  { selectedIds?: Set<string>; },
  {}, // API
  {}, // Tx
  BlockSelectionSelectors, // Selectors
>;
```

#3920 by @zbeyens –
- Plugin normalizeInitialValue now returns void instead of Value. When mutating nodes, keep their references (e.g., use Object.assign instead of spread).
- Editor methods have moved to editor.tf and editor.api. They still exist at the top level for slate backward compatibility, but are no longer redundantly typed. If you truly need the top-level method types, extend your editor type with LegacyEditorMethods (e.g. editor as Editor & LegacyEditorMethods). Since these methods can be overridden by extendEditor, with..., or slate plugins, consider migrating to the following approaches:
```
// For overriding existing methods only:
overrideEditor(({ editor, tf: { deleteForward }, api: { isInline } }) => ({
  transforms: {
    deleteForward(options) {
      // ...conditional override
      deleteForward(options);
    },
  },
  api: {
    isInline(element) {
      // ...conditional override
      return isInline(element);
    },
  },
}));
```
This was previously done in extendEditor using top-level methods, which still works but now throws a type error due to the move to editor.tf/editor.api. A workaround is to extend your editor with LegacyEditorMethods.

Why? Having all methods at the top-level (next to children, marks, etc.) would clutter the editor interface. Plite splits transforms in three places (editor, Editor, and Transforms), which is also confusing. Plate keeps editor reads/services under api and replayable document mutations under transaction groups.

Migration example:
```
// From:
export const withInlineVoid: ExtendEditor = ({ editor }) => {
  const { isInline, isSelectable, isVoid, markableVoid } = editor;
 
  const voidTypes: string[] = [];
  const inlineTypes: string[] = [];
 
  editor.pluginList.forEach((plugin) => {
    if (plugin.node.isInline) {
      inlineTypes.push(plugin.node.type);
    }
    if (plugin.node.isVoid) {
      voidTypes.push(plugin.node.type);
```
- Move editor.redecorate to editor.api.redecorate
Types:
- Rename TRenderElementProps to RenderElementProps
- Rename TRenderLeafProps to RenderLeafProps
- Rename TEditableProps to EditableProps

#3920 by @zbeyens – This package is now the new common package, so all plugin packages are being removed. Migration:

Add the following dependencies:

"@udecode/plate-alignment": "42.0.0",
"@udecode/plate-autoformat": "42.0.0",
"@udecode/plate-basic-elements": "42.0.0",
"@udecode/plate-basic-marks": "42.0.0",
"@udecode/plate-block-quote": "42.0.0",
"@udecode/plate-break": "42.0.0",
"@udecode/plate-code-block": "42.0.0",
"@udecode/plate-combobox": "42.0.0",
"@udecode/plate-comments": "42.0.0",
"@udecode/plate-csv": "42.0.0",
"@udecode/plate-diff": "42.0.0",
"@udecode/plate-docx": "42.0.0",
"@udecode/plate-find-replace": "42.0.0",
"@udecode/plate-floating": "42.0.0",
"@udecode/plate-font": "42.0.0",
"@udecode/plate-heading": "42.0.0",
"@udecode/plate-highlight": "42.0.0",
"@udecode/plate-horizontal-rule": "42.0.0",
"@udecode/plate-indent": "42.0.0",
"@udecode/plate-indent-list": "42.0.0",
"@udecode/plate-kbd": "42.0.0",
"@udecode/plate-layout": "42.0.0",
"@udecode/plate-line-height": "42.0.0",
"@udecode/plate-link": "42.0.0",
"@udecode/plate-list": "42.0.0",
"@udecode/plate-markdown": "42.0.0",
"@udecode/plate-media": "42.0.0",
"@udecode/plate-mention": "42.0.0",
"@udecode/plate-node-id": "42.0.0",
"@udecode/plate-normalizers": "42.0.0",
"@udecode/plate-reset-node": "42.0.0",
"@udecode/plate-resizable": "42.0.0",
"@udecode/plate-select": "42.0.0",
"@udecode/plate-selection": "42.0.0",
"@udecode/plate-slash-command": "42.0.0",
"@udecode/plate-suggestion": "42.0.0",
"@udecode/plate-tabbable": "42.0.0",
"@udecode/plate-table": "42.0.0",
"@udecode/plate-toggle": "42.0.0",
"@udecode/plate-trailing-block": "42.0.0"

"@udecode/plate-alignment": "42.0.0",
"@udecode/plate-autoformat": "42.0.0",
"@udecode/plate-basic-elements": "42.0.0",
"@udecode/plate-basic-marks": "42.0.0",
"@udecode/plate-block-quote": "42.0.0",
"@udecode/plate-break": "42.0.0",
"@udecode/plate-code-block": "42.0.0",
"@udecode/plate-combobox": "42.0.0",
"@udecode/plate-comments": "42.0.0",
"@udecode/plate-csv": "42.0.0",
"@udecode/plate-diff": "42.0.0",
"@udecode/plate-docx": "42.0.0",
"@udecode/plate-find-replace": "42.0.0",
"@udecode/plate-floating"

Either replace all @udecode/plate imports with the individual package imports, or export the following in a new file (e.g. src/plate.ts):

export * from '@udecode/plate-alignment';
export * from '@udecode/plate-autoformat';
export * from '@udecode/plate-basic-elements';
export * from '@udecode/plate-basic-marks';
export * from '@udecode/plate-block-quote';
export * from '@udecode/plate-break';
export * from '@udecode/plate-code-block';
export * from '@udecode/plate-combobox';
export * from '@udecode/plate-comments';
export * from '@udecode/plate-diff';
export * from '@udecode/plate-find-replace';

Replace all '@udecode/plate' and '@udecode/plate/react' with '@/plate' in your codebase.

#3506 by @zbeyens –

Change plugin.options merging behavior from deep merge to shallow merge.
This affects .extend(), .configure(), and other methods that modify plugin options.
This update addresses a performance regression introduced in v37 that affected editor creation.

Before:

const plugin = createBasePlugin({
  key: 'test',
  options: { nested: { a: 1 } },
}).extend({
  options: { nested: { b: 1 } },
});
 
// Result: { nested: { a: 1, b: 1 } }

const plugin = createBasePlugin({
  key: 'test',
  options: { nested: { a: 1 } },
}).extend({
  options: { nested: { b: 1 } },
});
 
// Result: { nested: { a: 1, b: 1 } }

After:

const plugin = createBasePlugin({
  key: 'test',
  options: { nested: { a: 1 } },
}).extend(({ getOptions }) => ({
  options: {
    ...getOptions(),
    nested: { ...getOptions().nested, b: 1 },
  },
}));
 
// Result: { nested: { a: 1, b: 1 } }

const plugin = createBasePlugin({

Migration:

If you're using nested options and want to preserve the previous behavior, you need to manually spread both the top-level options and the nested objects.
If you're not using nested options, no changes are required.

Rename all base plugins that have a React plugin counterpart to be prefixed with Base. This change improves clarity and distinguishes base implementations from potential React extensions. Use base plugins only for server-side environments or to extend your own DOM layer.
Import the following plugins from /react entry: AlignPlugin, CalloutPlugin, EquationPlugin, FontBackgroundColorPlugin, FontColorPlugin, FontFamilyPlugin, FontSizePlugin, FontWeightPlugin, InlineEquationPlugin, LineHeightPlugin, TextIndentPlugin, TocPlugin

#3420 by @zbeyens – Plugin System:

Decoupling React in all packages:
- Split build into @udecode/plate-core and @udecode/plate-core/react
- NEW BasePlugin as the foundation for all plugins
- PlatePlugin extends BasePlugin with React-specific plugin features
Plugin Creation:
- Remove createPluginFactory
- NEW createBasePlugin: vanilla
- NEW createBasePlugin: vanilla explicitly typed
- NEW createPlatePlugin: React
- NEW createPlatePlugin: React explicitly typed
- NEW toPlatePlugin: extend a vanilla plugin into a React plugin
- NEW toPlatePlugin: extend a vanilla plugin into a React plugin explicitly typed
- Rename all plugins starting with createNamePlugin() to NamePlugin
Before:
```
const MyPluginFactory = createPluginFactory({
  key: 'myPlugin',
  isElement: true,
  component: MyComponent,
});
const plugin = MyPluginFactory();
```
```
const MyPluginFactory = createPluginFactory({
  key: 'myPlugin',
  isElement: true,
  component: MyComponent,
});
const plugin = MyPluginFactory();
```
After:
```
const plugin = createBasePlugin({
  key: 'myPlugin',
  node: {
    isElement: true,
    component: MyComponent,
  },
});
const reactPlugin = toPlatePlugin(plugin);
```
```
const plugin = createBasePlugin({
  key: 'myPlugin',
  node: {
    isElement: true,
    component: MyComponent,
  },
});
```
Plugin Configuration:
- Remove all NamePlugin option types, use NameConfig instead.
- NameConfig as the new naming convention for plugin configurations.
Before:
```
createPluginFactory<HotkeyPlugin>({
  handlers: {
    onKeyDown: onKeyDownToggleElement,
  },
  options: {
    hotkey: ['mod+opt+0', 'mod+shift+0'],
  },
});
```
```
createPluginFactory<HotkeyPlugin>({
  handlers: {
    onKeyDown: onKeyDownToggleElement,
  },
  options: {
    hotkey: ['mod+opt+0', 'mod+shift+0'],
  },
});
```
After:
```
export const ParagraphPlugin = createPlatePlugin({
  key: 'p',
  node: { isElement: true },
}).extend({ editor, type }) => ({
  shortcuts: {
    toggleParagraph: {
      handler: () => {
        editor.tf.toggle.block({ type });
      },
      keys: [
        [Key.Mod, Key.Alt, '0'],
        [Key.Mod, Key.Shift, '0'],
      ],
      preventDefault: true,
    },
  },
})
```
- toggleParagraph is now a shortcut for editor.tf.toggle.block({ type: 'p' }) for the given keys
- Multiple shortcuts can be defined per plugin, and any shortcut can be disabled by setting shortcuts.toggleParagraph = null
- Note the typing support using Key
Plugin Properties:

Rename BasePlugin / PlatePlugin properties:
- type -> node.type
- isElement -> node.isElement
- isLeaf -> node.isLeaf
- isInline -> node.isInline
- isMarkableVoid -> node.isMarkableVoid
- isVoid -> node.isVoid
- component -> render.node
- props -> node.props
- overrideByKey -> override.plugins
- renderAboveEditable -> render.aboveEditable
- renderAboveSlate ->
NEW BasePlugin properties:
- api: API methods provided by this plugin
- dependencies: An array of plugin keys that this plugin depends on
- node: Node-specific configuration for this plugin
- parsers: Now accept string keys to add custom parsers
- priority: Plugin priority for registration and execution order
- shortcuts: Plugin-specific hotkeys
- inject.targetPluginToInject: Function to inject plugin config into other plugins specified by inject.targetPlugins
Before:
```
export const createAlignPlugin = createPluginFactory({
  key: KEY_ALIGN,
  inject: {
    props: {
      defaultNodeValue: 'start',
      nodeKey: KEY_ALIGN,
      styleKey: 'textAlign',
      validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
      validTypes: ['p'],
    },
  },
  then: (_, plugin) =>
    mapInjectPropsToPlugin(editor, plugin, {
      deserializeHtml: {
        getNode: (el, node
```
After:
```
export const AlignPlugin = createBasePlugin({
  inject: {
    nodeProps: {
      defaultNodeValue: 'start',
      nodeKey: 'align',
      styleKey: 'textAlign',
      validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
    },
    targetPluginToInject: ({ editor, plugin }) => ({
      parsers: {
        html: {
          deserializer: {
            parse: ({ element, node }) => {
              if (element.style.textAlign) {
```
Plugin Shortcuts:
- NEW shortcuts to add custom hotkeys to a plugin.
- Remove hotkey option from all plugins
Before:
```
type LinkPlugin = {
  hotkey?: string;
};
```
```
type LinkPlugin = {
  hotkey?: string;
};
```
After:
```
type LinkConfig = PluginConfig<
  // key
  'p',
  // options
  { defaultLinkAttributes?: any },
  // api
  { link: { getAttributes: (editor: PlateEditor) => LinkAttributes } },
  // tx
  { floatingLink: { hide: () => void } }
>;
```
Shortcuts API:
- handler is called with the editor, event, and event details.
- keys is an array of keys to trigger the shortcut.
- priority is the priority of the shortcut over other shortcuts.
- ...HotkeysOptions from @udecode/react-hotkeys
Plugin Types:
- Update BasePlugin, PlatePlugin generics. P, V, E -> C extends AnyPluginConfig = PluginConfig
- Remove PluginOptions
- Remove PlatePluginName
- Remove HotkeyPlugin, ToggleMarkPlugin in favor of plugin.shortcuts
- WithPlatePlugin -> BasePlugin, EditorPlatePlugin
- PlatePluginComponent -> NodeComponent
- InjectComponent* -> NodeWrapperComponent*
- PlatePluginInsertData -> Parser
- PlatePluginProps -> NodeProps
- ->
Plugin Store:
- NEW each plugin has its own store, accessible via plugin.optionsStore and plugin.useOptionsStore
- editor has many methods to get, set and subscribe to plugin options
Plugin Methods:
- All plugin methods return a new plugin instance with the extended types.
- Remove then, use extend instead
- NEW extend method to deep merge a plugin configuration
  - If you pass an object, it will be directly merged with the plugin config.
  - If you pass a function, it will be called with the plugin config once the editor is resolved and should return the new plugin config.
  - Object extensions always have the priority over function extensions.
  - Extend multiple times to derive from the result of the previous extension.
- NEW configure method to configure the properties of existing plugins. The difference with extend is that configure with not add new properties to the plugin, it will only modify existing ones.
- NEW extendPlugin method to extend a nested plugin configuration.
- NEW configurePlugin method to configure the properties of a nested plugin.
- extendApi extends the plugin API. The API is merged into the plugin's editor.api namespace.
- Transaction groups own replayable document mutations.
- Editor overrides wrap existing editor behavior.
- NEW extendOptions method to extend the plugin options with selectors. Use to subscribe to an (extended) option.
Plugin Context

Each plugin method receives its plugin context as the callback parameter:
- api
- editor
- getOption
- getOptions
- plugin
- setOption
- setOptions
- tf
- type
- useOption
Core Plugins:
- NEW ParagraphPlugin is now part of core
- NEW DebugPlugin is now part of core
  - NEW api.debug.log, api.debug.info, api.debug.warn, api.debug.error methods
  - options.isProduction to control logging in production environments
  - options.logLevel to set the minimum log level
  - options.logger to customize logging behavior
  - options.throwErrors to control error throwing behavior, by default a PlateError will be thrown on api.debug.error
- NEW - You can now override a core plugin by adding it to editor.plugins. Last plugin wins.
- createDeserializeHtmlPlugin -> HtmlPlugin
  - NEW
Editor Creation:

NEW withPlite:
- Extends an editor into a vanilla Plate editor
- NEW rootPlugin option for configuring the root plugin
NEW withPlate:
- Extends an editor into a React Plate editor
- Now extends withPlite with React-specific enhancements
- NEW useOptions and useOption methods to the editor
NEW createPliteEditor:
- Create a vanilla Plate editor with server-side support
createPlateEditor:
- Plugin replacement mechanism: using plugins, any plugin with the same key that a previous plugin will replace it. That means you can now override core plugins that way, like ReactPlugin
- root plugin is now created from createPlateEditor option as a quicker way to configure the editor than passing plugins. Since plugins can have nested plugins (think as a recursive tree), plugins option will be passed to root plugin plugins option.
- Centralized editor resolution. Before, both createPlateEditor and Plate component were resolving the editor. Now, only createPlateEditor takes care of that. That means id, value, and other options are now controlled by createPlateEditor.
- Remove createPlugins, pass plugins directly:
  - components ->
createPlateEditor options:
- Rename normalizeInitialValue option to shouldNormalizeEditor
- Move components to override.components to override components by key
- Move overrideByKey to override.plugins to override plugins by key
- Remove disableCorePlugins, use override.enabled instead
- NEW value to set the initial value of the editor.
- NEW autoSelect?: 'end' | 'start' | boolean to auto select the start of end of the editor. This is decoupled from autoFocus.
- NEW selection to control the initial selection.
- NEW override.enabled to disable plugins by key
- NEW rootPlugin?: (plugin: AnyPlatePlugin) => AnyPlatePlugin to configure the root plugin. From here, you can for example call configurePlugin to configure any plugin.
- NEW api, decorate, extendEditor, , , , , , , , , , . These options will be passed to the very first .
NEW usePlateEditor() hook to create a PlateEditor in a React component:
- Uses createPlateEditor and useMemo to avoid re-creating the editor on every render.
- Dependencies can be added to the hook to re-create the editor on demand. id option is always used as dependency.
Editor Methods:

editor: PlateEditor:
- Move redecorate to editor.api.redecorate
- Move reset to editor.tf.reset
- Move plate.set to editor.setPlateState
- Move blockFactory to editor.api.create.block
- Move childrenFactory to editor.api.create.value
- Rename plugins to pluginList
- Rename pluginsByKey to plugins
- Plugin APIs live under editor.api.
- Replayable document mutations live under transaction groups.
- Use editor.plugin(plugin).plugin to read the compiled descriptor
- Use editor.plugin(pluginName).type to resolve a dynamic plugin name
- Read compiled injection data from editor.plugin(plugin).plugin.inject.nodeProps
Editor Types:

The new generic types are:
- V extends Value = Value, P extends AnyPluginConfig = PlateCorePlugin
- That means this function will infer all plugin configurations from the options passed to it:
  - key
  - options
  - api
  - transforms
- Can't infer for some reason? Use createPlateEditor for explicit typing.
```
const editor = createPlateEditor({ plugins: [TablePlugin] });
editor.api.htmlReact.serialize(); // core plugin is automatically inferred
editor.tf.insert.tableRow(); // table plugin is automatically inferred
```
```
const editor = createPlateEditor({ plugins: [TablePlugin] });
editor.api.htmlReact.serialize(); // core plugin is automatically inferred
editor.tf.insert.tableRow(); // table plugin is automatically inferred
```
Plate Component

PlateProps:
- editor is now required. If null, Plate will not render anything. As before, Plate remounts on id change.
- Remove id, plugins, maxLength, pass these to createPlateEditor instead
- Remove initialValue, value, pass value to createPlateEditor instead
- Remove editorRef
- Remove disableCorePlugins, override plugins in createPlateEditor instead
Utils:
- Remove useReplaceEditor since editor is now always controlled
- NEW useEditorPlugin to get the editor and the plugin context.
Types:
- PlateRenderElementProps, PlateRenderLeafProps generics: V, N -> N, C
Plate Store:
- Remove plugins and rawPlugins, use useEditorRef().plugins instead, or listen to plugin changes with editor.useOption(plugin, <optionKey>)
- Remove value, use useEditorValue() instead
- Remove editorRef, use useEditorRef() instead
Miscellaneous Changes
- slate >=0.103.0 peer dependency
- plite-react >=0.108.0 peer dependency
- New dependency @udecode/react-hotkeys
- Remove ELEMENT_, MARK_ and KEY_ constants. Use NamePlugin.key instead.
- Replace ELEMENT_DEFAULT with ParagraphPlugin.key.
- Remove getTEditor
- Rename withTReact to withPlateReact
- Rename withTHistory to withPlateHistory
- Rename usePlateId to useEditorId
- Remove usePlateSelectors().id(), usePlateSelectors().value(), usePlateSelectors().plugins(), use instead useEditorRef().<key>
Types:
- Move TEditableProps, TRenderElementProps to @udecode/slate-react
- Remove <V extends Value> generic in all functions where not used
- Remove PlatePluginName
- Remove OverrideByKey
- Remove PlateId

#3282 by @12joan – Make the dependency on prismjs optional

New usage:

// Import Prism with your supported languages
import Prism from 'prismjs';
 
import 'prismjs/components/prism-antlr4.js';
import 'prismjs/components/prism-bash.js';
import 'prismjs/components/prism-c.js';
// ...
 
const plugins = createPlugins([
  createCodeBlockPlugin({
    options: {
      prism: Prism,
    },
  }),
]);

// Import Prism with your supported languages
import Prism from 'prismjs';
 
import 'prismjs/components/prism-antlr4.js';
import 'prismjs/components/prism-bash.js';
import 'prismjs/components/prism-c.js';
// ...
 
const plugins = createPlugins([
  createCodeBlockPlugin({
    options: {
      prism: Prism,
    },
  }),
]);

#2629 by @zbeyens –
- [Breaking] Rename Plate to PlateContent.
- [Breaking] Rename PlateProvider to Plate.
- [Breaking] Rendering PlateContent is now required in Plate. This allows you to choose where to render the editor next to other components like toolbar. Example:
```
// Before
<Plate />
// or
<PlateProvider>
  <Plate />
</PlateProvider>
 
// After
<Plate>
  <PlateContent />
</Plate>
```
```
// Before
<Plate />
// or
<PlateProvider>
  <Plate />
</PlateProvider>
 
// After
<Plate>
  <PlateContent />
</Plate>
```
- [Breaking] Remove provider props such as plugins from PlateContent. These props should be passed to Plate.
- [Breaking] Remove editableProps prop from PlateContent. Move these asPlateContent props.
- [Breaking] Remove children prop from PlateContent. Render instead these components after PlateContent.
- [Breaking] Remove firstChildren prop from PlateContent. Render instead these components before PlateContent.
- [Breaking] Remove editableRef prop from PlateContent. Use ref instead.
- [Breaking] Remove withPlateProvider.
- [Breaking] Rename usePlateEditorRef to useEditorRef.
- [] Rename to .

#2537 by @haydencarlson – MediaEmbedElement is now more headless with a smaller bundle size. Update the following components:
- npx shadcn@canary add media-embed-element
  - now uses react-lite-youtube-embed for YouTube videos.
  - now uses react-tweet for Twitter tweets.
- npx shadcn@canary add image-element
Breaking changes:
- Moved Resizable to @udecode/plate-resizable
- Moved Caption, CaptionTextarea to @udecode/plate-caption
- Removed useMediaEmbed, MediaEmbedVideo, MediaEmbedTweet, Tweet, parseMediaUrl, mediaStore
- Removed @udecode/resizable, scriptjs, react-textarea-autosize dependencies
- MediaPlugin
  - removed rules. Use parsers option instead.
  - removed disableCaption. Use createCaptionPlugin instead.
- Caption is now a separate plugin. Install @udecode/plate-caption and add it to your plugins:
```
import { ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED } from '@udecode/plate-media';
 
createCaptionPlugin({
  options: { pluginNames: [ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED] },
});
```
```
import { ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED } from '@udecode/plate-media';
 
createCaptionPlugin({
  options: { pluginNames: [ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED] },
});
```

#2237 by @tmorane – Unstyled logic has been moved to @udecode/plate-dnd

// before
import { createDndPlugin } from '@udecode/plate-ui-dnd';
 
// after
import { createDndPlugin } from '@udecode/plate-dnd';

// before
import { createDndPlugin } from '@udecode/plate-ui-dnd';
 
// after
import { createDndPlugin } from '@udecode/plate-dnd';

Only withPlateDraggable, withPlateDraggables and PlateDraggable are left in @udecode/plate-ui-dnd. Renamed:

withDraggables -> withPlateDraggables. In the second parameter, draggable props options have been moved under draggableProps:

// before
{
  onRenderDragHandle: () => {}
  styles,
}
 
// after
{
  draggableProps: {
    onRenderDragHandle: () => {}
    styles,
  },
}

// before
{
  onRenderDragHandle: () => {}
  styles,
}
 
// after
{
  draggableProps

#2097 by @zbeyens –

upgrade deps, including typescript support for the new editor methods:

// from
"slate": "0.78.0",
"plite-history": "0.66.0",
"plite-react": "0.79.0"
// to
"slate": "0.87.0",
"plite-history": "0.86.0",
"plite-react": "0.88.0"

// from
"slate": "0.78.0",
"plite-history": "0.66.0",
"plite-react": "0.79.0"
// to
"slate": "0.87.0",
"plite-history": "0.86.0",
"plite-react": "0.88.0"

#2097 by @zbeyens –

due to esm issues, dnd plugin is not part of plate package anymore. To use it, install @udecode/plate-ui-dnd

// before
import { createDndPlugin } from '@udecode/plate';
// after
import { createDndPlugin } from '@udecode/plate-ui-dnd';

// before
import { createDndPlugin } from '@udecode/plate';
// after
import { createDndPlugin } from '@udecode/plate-ui-dnd';

upgrade peerDeps:

// from
"slate": ">=0.78.0",
"plite-history": ">=0.66.0",
"plite-react": ">=0.79.0"
// to
"slate": ">=0.87.0",
"plite-history": ">=0.86.0",
"plite-react": ">=0.88.0"

// from
"slate": ">=0.78.0",
"plite-history": ">=0.66.0",
"plite-react": ">=0.79.0"
// to
"slate"

#1871 by @zbeyens –
- usePlateStore:
  - Plate no longer has a global store containing all the editor states (zustand). Each editor store is now defined in a React context tree (jotai). If you need to access all the editor states at once (as you could do before), you'll need to build that layer yourself.
  - Plate store is now accessible only below PlateProvider or Plate (provider-less mode). It means it's no longer accessible outside of a Plate React tree. If you have such use-case, you'll need to build your own layer to share the state between your components.
  - You can nest many PlateProvider with different scopes (id prop). Default scope is PLATE_SCOPE
  - Hook usage:
    - const value = usePlateSelectors(id).value()
    - const setValue = usePlateActions(id).value()
    - const [value, setValue] = usePlateStates(id).value()
  - removed from the store:
    - editableProps, use the props instead
    - enabled, use conditional rendering instead
    - isReady, no point anymore as it's now directly ready
  - useEventPlateId is still used to get the last focused editor id.
  - Functions are stored in an object { fn: <here> }
    - const setOnChange = usePlateActions(id).onChange()
    - setOnChange({ fn: newOnChange })
- Plate
  - if rendered below PlateProvider, it will render Plite > PlateEditable
  - if rendered without PlateProvider, it will render PlateProvider > Plite > PlateEditable
  - default id is no longer main, it's now PLATE_SCOPE
- PlateProvider
  - Each provider has an optional scope, so you can have multiple providers in the same React tree and use the plate hooks with the corresponding scope.
  - Plate effects are now run in PlateProvider
    - initialValue, value, editor, normalizeInitialValue, normalizeEditor are no longer defined in an effect (SSR support)
  - Props:
    - now extends the previous Plate props
    - if using PlateProvider, set the provider props on it instead of Plate. Plate would only need editableProps and PlateEditableExtendedProps
    - if not using it, set the provider props on Plate
```
// Before
<PlateProvider>
  <Toolbar>
    <AlignToolbarButtons />
  </Toolbar>
 
  <Plate<MyValue> editableProps={editableProps} <MyValue> initialValue={alignValue} plugins={plugins} />
</PlateProvider>
 
// After
<PlateProvider<MyValue> initialValue={alignValue} plugins={plugins}>
  <Toolbar>
    <AlignToolbarButtons />
  </Toolbar>
 
  <Plate
```
- types:
  - store editor is no longer nullable
  - store value is no longer nullable
  - id type is now PlateId
- renamed:
  - SCOPE_PLATE to PLATE_SCOPE
  - getEventEditorId to getEventPlateId
  - getPlateActions().resetEditor to useResetPlateEditor()
- removed:
  - plateIdAtom
  - usePlateId for usePlateSelectors().id()
  - EditablePlugins for PlateEditable
  - SlateChildren
  - PlateEventProvider for

#1585 by @zbeyens – Removed @udecode/plate-juice from @udecode/plate. Install it if using @udecode/plate-serializer-docx:
```
pnpm install @udecode/plate-juice
```
```
pnpm install @udecode/plate-juice
```

#1585 by @zbeyens – Moved react-dnd react-dnd-html5-backend deps to peer-dependencies. Install these if using @udecode/plate-ui-dnd:
```
pnpm install react-dnd react-dnd-html5-backend
```
```
pnpm install react-dnd react-dnd-html5-backend
```

// before
(
  dragItem: DragItemBlock,
  monitor: DropTargetMonitor,
  ref: any,
  hoverId: string
)
// after
{
  dragItem,
  id,
  monitor,
  nodeRef,
}: GetHoverDirectionOptions

// before
(
  dragItem: DragItemBlock,
  monitor: DropTargetMonitor,
  ref: any,
  hoverId: string
)
// after
{
  dragItem,
  id,
  monitor,
  nodeRef,
}: GetHoverDirectionOptions

<T = {}> could be used to extend the editor type. It is now replaced by <E extends PlateEditor<V> = PlateEditor<V>> to customize the whole editor type.
When the plugin type is customizable, these generics are used: <P = PluginOptions, V extends Value = Value, E extends PlateEditor<V> = PlateEditor<V>>, where P is the plugin options type.
Editor functions are using <V extends Value> generic, where V can be a custom editor value type used in PlateEditor<V>.
Editor functions returning a node are using <N extends ENode<V>, V extends Value = Value> generics, where N can be a custom returned node type.
Editor callbacks (e.g. a plugin option) are using <V extends Value = Value, E extends PlateEditor<V> = PlateEditor<V>> generics, where E can be a custom editor type.
Node functions returning a node are using <N extends Node, R extends Node = Node> generics.
These generics are used by <V extends Value, K extends keyof EMarks<V>>: getMarks, isMarkActive, removeMark, setMarks, ToggleMarkPlugin, addMark, removeEditorMark

WithOverride is a special type case as it can return a new editor type:

// before
export type WithOverride<T = {}, P = {}> = (
  editor: PlateEditor<T>,
  plugin: WithPlatePlugin<T, P>
) => PlateEditor<T>;
 
// after - where E is the Editor type (input), and EE is the Extended Editor type (output)
export type WithOverride<
  P = PluginOptions,
  V extends Value = Value,
  E extends PlateEditor<

type Editor<V extends Value>
type PlateEditor<V extends Value>

<T extends Node>(
  obj: T,
  path: Path,
  predicate?: Predicate<T>
)

// From (0 row count and col count, previously it was 2)
getEmptyTableNode(editor);
// To
getEmptyTableNode(editor, { rowCount: 2, colCount: 2 });

// From (0 row count and col count, previously it was 2)
getEmptyTableNode(editor);
// To
getEmptyTableNode(editor, { rowCount: 2, colCount: 2 });

#1234 by @zbeyens – Breaking changes:

`Plate`

removed components prop:

// Before
<Plate plugins={plugins} components={components} />;
 
// After
// option 1: use the plugin factory
let plugins = [
  createParagraphPlugin({
    component: ParagraphElement,
  }),
];
 
// option 2: use createPlugins
plugins = createPlugins(plugins, {
  components: {
    [ELEMENT_PARAGRAPH]: ParagraphElement,
  },
});
 
<Plate plugins={plugins} />;

// Before
<Plate plugins={plugins} components={components} />;
 
// After
// option 1: use the plugin factory
let plugins = [
  createParagraphPlugin({
    component: ParagraphElement,
  }),
];
 
// option 2: use createPlugins
plugins = createPlugins(plugins, {
  components: {
    [ELEMENT_PARAGRAPH]: ParagraphElement,
  },
});
 
<Plate plugins={plugins} />;

removed options prop:

// Before
<Plate plugins={plugins} options={options} />;
 
// After
// option 1: use the plugin factory
let plugins = [
  createParagraphPlugin({
    type: 'paragraph',
  }),
];
 
// option 2: use createPlugins
plugins = createPlugins(plugins, {
  overrideByKey: {
    [ELEMENT_PARAGRAPH]: {
      type: 'paragraph',
    },
  },
});
 
<Plate plugins={plugins} />;

`PlatePlugin`

key
- replacing pluginName
- is now required: each plugin needs a key to be retrieved by key.
all handlers have plugin as a second parameter:

// Before
export type X<T = {}> = (editor: PlateEditor<T>) => Y;
 
// After
export type X<T = {}, P = {}> = (
  editor: PlateEditor<T>,
  plugin: WithPlatePlugin<T, P>
) => Y;

serialize no longer has element and leaf properties:

type SerializeHtml = RenderFunction<
  PlateRenderElementProps | PlateRenderLeafProps
>;

type SerializeHtml = RenderFunction<
  PlateRenderElementProps | PlateRenderLeafProps
>;

Renamed:

injectParentComponent to inject.aboveComponent
injectChildComponent to inject.belowComponent
overrideProps to inject.props
- transformClassName, transformNodeValue, transformStyle first parameter is no longer editor as it's provided by then if needed.
- the previously getOverrideProps is now the core behavior if inject.props is defined.
serialize to serializeHtml
deserialize to deserializeHtml
- can be an array
- the old deserializer options are merged to deserializeHtml

type DeserializeHtml = {
  /** List of HTML attribute names to store their values in `node.attributes`. */
  attributeNames?: string[];
 
  /**
   * Deserialize an element. Use this instead of plugin.isElement if you don't
   * want the plugin to renderElement.
   *
   * @default plugin.isElement
   */
  isElement?: boolean;
 
  /**
   * Deserialize a leaf. Use this instead of plugin.isLeaf if you don't want the
   * plugin to renderLeaf.
   *
   * @default plugin.isLeaf
   */
  isLeaf?: boolean;
 
  /** Deserialize html element to slate node. */
  getNode?: (element: HTMLElement

handlers starting by on... are moved to handlers property.

// Before
onDrop: handler;
 
// After
handlers: {
  onDrop: handler;
}

// Before
onDrop: handler;
 
// After
handlers: {
  onDrop: handler;
}

Removed:

renderElement is favor of:
- isElement is a boolean that enables element rendering.
- the previously getRenderElement is now the core behavior.
renderLeaf is favor of:
- isLeaf is a boolean that enables leaf rendering.
- the previously getRenderLeaf is now the core behavior.
inlineTypes and voidTypes for:
- isInline is a boolean that enables inline rendering.
- isVoid is a boolean that enables void rendering.

General

the following plugins are now part of the core plugins, so you need to remove these from your plugins prop:

const corePlugins = [
  createReactPlugin(),
  createHistoryPlugin(),
  createEventEditorPlugin(),
  createInlineVoidPlugin(),
  createInsertDataPlugin(),
  createDeserializeAstPlugin(),
  createDeserializeHtmlPlugin(),
];

const corePlugins = [
  createReactPlugin(),
  createHistoryPlugin(),
  createEventEditorPlugin(),
  createInlineVoidPlugin(),
  createInsertDataPlugin

plugins is not a parameter anymore as it can be retrieved in editor.plugins
withInlineVoid is now using plugins isInline and isVoid plugin properties.

Renamed:

getEditorOptions to getPlugins
getPlatePluginOptions to getPlugin
pipeOverrideProps to pipeInjectProps
getOverrideProps to pluginInjectProps
serializeHTMLFromNodes to serializeHtml
- getLeaf to leafToHtml
- getNode to elementToHtml
xDeserializerId to KEY_DESERIALIZE_X
deserializeHTMLToText to htmlTextNodeToString
deserializeHTMLToMarks to htmlElementToLeaf and

Removed:

usePlateKeys, getPlateKeys
usePlateOptions for getPlugin
getPlateSelection for getPlateEditorRef().selection
flatMapByKey
getEditableRenderElement and getRenderElement for pipeRenderElement and pluginRenderElement
getEditableRenderLeaf and getRenderLeaf for pipeRenderLeaf and pluginRenderLeaf
getInlineTypes
getVoidTypes
getPlatePluginTypes
getPlatePluginWithOverrides
mapPlatePluginNamesToOptions

Changed types:

PlateEditor:
- removed options for pluginsByKey
WithOverride is not returning an extended editor anymore (input and output editors are assumed to be the same types for simplicity).
PlateState
- renamed keyChange to keyEditor
- removed plugins for editor.plugins
- removed pluginNames
- removed selection for editor.selection
- actions:
  - removed setSelection, setPlugins, setPluginNames
  - removed incrementKeyChange for

Renamed types:

XHTMLY to XHtmlY
Deserialize to DeseralizeHtml

Removed types:

PlatePluginOptions:
- type to PlatePlugin.type
- component to PlatePlugin.component
- deserialize to PlatePlugin.deserializeHtml
- getNodeProps to PlatePlugin.props.nodeProps
- hotkey to HotkeyPlugin
- clear to ToggleMarkPlugin
- defaultType is hardcoded to p.type
OverrideProps for PlatePlugin.inject.props
Serialize for PlatePlugin.serializeHtml
NodeProps for

export interface ComboboxItemData {
  /** Unique key. */
  key: string;
  /** Item text. */
  text: any;
  /**
   * Whether the item is disabled.
   *
   * @default false
   */
  disabled?: boolean;
  /** Data available to `onRenderItem`. */
  data?: unknown;
}

export interface ComboboxItemData {
  /** Unique key. */
  key: string;
  /** Item text. */
  text: any;
  /**
   * Whether the item is disabled.
   *
   * @default false
   */
  disabled?: boolean;
  /** Data available to `onRenderItem`. */
  data?: unknown;
}

// Before
(
  editor: Editor,
  type: string,
  at: Location,
  options: Pick<AutoformatRule, 'preFormat' | 'format'>
)

// Before
(
  editor: Editor,
  type: string,
  at: Location,
  options: Pick<AutoformatRule, 'preFormat' | 'format'>
)

// Before
(
  editor: Editor,
  options: Pick<AutoformatRule, 'type' | 'between' | 'markup' | 'ignoreTrim'>
)

// Before
(
  editor: Editor,
  options: Pick<AutoformatRule, 'type' | 'between' | 'markup' | 'ignoreTrim'>
)

YjsPlugin.configure({
  options: {
    cursors: {
      /* ... */
    },
    providers: [
      {
        type: 'hocuspocus',
        options: {
          url: 'wss://hocuspocus.example.com',
          name: 'document-1',
        },
      },
      {
        type: 'webrtc',
        options: {
          roomName: 'document-1',
          // signaling: ['wss://signaling.example.com'], // Optional
        },
      },
    ],
  },
});

React.useEffect(() => {
  if (!mounted) return;
 
  // Initialize Yjs connection and sync
  editor.getPluginApi(YjsPlugin).yjs.init({
    id: roomName, // Or your document identifier
    value: INITIAL_VALUE, // Your initial editor content
  });
 
  // Destroy connection on component unmount
  return () => {
    editor.getPluginApi(YjsPlugin).yjs.destroy();
  };
}, [editor, mounted, roomName]); // Add relevant dependencies

export const markdownPlugin = MarkdownPlugin.configure({
  options: {
    disallowedNodes: [SuggestionPlugin.key],
    rules: {
      // For textRules
      [BoldPlugin.key]: {
        mark: true,
        deserialize: (mdastNode) => ({
          bold: true,
          text: node.value || '',
        }),
      },
      // For elementRules
      [EquationPlugin.key]: {
        deserialize: (mdastNode, options) => ({
          children: [{ text: '' }],
          texExpression: node.value,
          type: EquationPlugin.key,
        }),
      },
    },
    remarkPlugins: [remarkMath, remarkGfm],
  },
});

export const markdownPlugin = MarkdownPlugin.configure({
  options: {
    rules: {
      // Ignore all `insert` type suggestions
      [SuggestionPlugin.key]: {
        mark: true,
        serialize: (slateNode: TSuggestionText, options): mdast.Text => {
          const suggestionData = options.editor
            .getPluginApi(SuggestionPlugin)
            .suggestion.suggestionData(node);
 
          return suggestionData?.type === 'insert'
            ? { type: 'text', value: '' }
            : { type: 'text', value: node.text };
        },
      },
      // For elementRules
      [EquationPlugin.key]: {
        serialize: (slateNode) => ({
          type: 'math',
          value: node.texExpression,
        }),
      },
    },
    remarkPlugins: [remarkMath, remarkGfm],
  },
});

// Before:
export type BlockSelectionConfig = PluginConfig<
  'blockSelection',
  { selectedIds?: Set<string>; } & BlockSelectionSelectors,
>;
 
// After:
export type BlockSelectionConfig = PluginConfig<
  'blockSelection',
  { selectedIds?: Set<string>; },
  {}, // API
  {}, // Tx
  BlockSelectionSelectors, // Selectors
>;

// For overriding existing methods only:
overrideEditor(({ editor, tf: { deleteForward }, api: { isInline } }) => ({
  transforms: {
    deleteForward(options) {
      // ...conditional override
      deleteForward(options);
    },
  },
  api: {
    isInline(element) {
      // ...conditional override
      return isInline(element);
    },
  },
}));

// From:
export const withInlineVoid: ExtendEditor = ({ editor }) => {
  const { isInline, isSelectable, isVoid, markableVoid } = editor;
 
  const voidTypes: string[] = [];
  const inlineTypes: string[] = [];
 
  editor.pluginList.forEach((plugin) => {
    if (plugin.node.isInline) {
      inlineTypes.push(plugin.node.type);
    }
    if (plugin.node.isVoid) {
      voidTypes.push(plugin.node.type);
    }
  });
 
  editor.isInline = (element) => {
    return inlineTypes.includes(element.type as any)
      ? true
      : isInline(element);
  };
 
  editor.isVoid = (element) => {
    return voidTypes.includes(element.type as any) ? true : isVoid(element);
  };
 
  return editor;
};
 
export const InlineVoidPlugin = createBasePlugin({
  key: 'inlineVoid',
  extendEditor: withInlineVoid,
});
 
// After (using overrideEditor since we're only overriding existing methods):
export const withInlineVoid: OverrideEditor = ({
  api: { isInline, isSelectable, isVoid, markableVoid },
  editor,
}) => {
  const voidTypes: string[] = [];
  const inlineTypes: string[] = [];
 
  editor.pluginList.forEach((plugin) => {
    if (plugin.node.isInline) {
      inlineTypes.push(plugin.node.type);
    }
    if (plugin.node.isVoid) {
      voidTypes.push(plugin.node.type);
    }
  });
 
  return {
    api: {
      isInline(element) {
        return inlineTypes.includes(element.type as any)
          ? true
          : isInline(element);
      },
      isVoid(element) {
        return voidTypes.includes(element.type as any)
          ? true
          : isVoid(element);
      },
    },
  };
};
 
export const InlineVoidPlugin = createBasePlugin({
  key: 'inlineVoid',
}).overrideEditor(withInlineVoid);

export * from '@udecode/plate-alignment';
export * from '@udecode/plate-autoformat';
export * from '@udecode/plate-basic-elements';
export * from '@udecode/plate-basic-marks';
export * from '@udecode/plate-block-quote';
export * from '@udecode/plate-break';
export * from '@udecode/plate-code-block';
export * from '@udecode/plate-combobox';
export * from '@udecode/plate-comments';
export * from '@udecode/plate-diff';
export * from '@udecode/plate-find-replace';
export * from '@udecode/plate-font';
export * from '@udecode/plate-heading';
export * from '@udecode/plate-highlight';
export * from '@udecode/plate-horizontal-rule';
export * from '@udecode/plate-indent';
export * from '@udecode/plate-indent-list';
export * from '@udecode/plate-kbd';
export * from '@udecode/plate-layout';
export * from '@udecode/plate-line-height';
export * from '@udecode/plate-link';
export * from '@udecode/plate-list';
export * from '@udecode/plate-media';
export * from '@udecode/plate-mention';
export * from '@udecode/plate-node-id';
export * from '@udecode/plate-normalizers';
export * from '@udecode/plate-reset-node';
export * from '@udecode/plate-select';
export * from '@udecode/plate-csv';
export * from '@udecode/plate-docx';
export * from '@udecode/plate-markdown';
export * from '@udecode/plate-slash-command';
export * from '@udecode/plate-suggestion';
export * from '@udecode/plate-tabbable';
export * from '@udecode/plate-table';
export * from '@udecode/plate-toggle';
export * from '@udecode/plate-trailing-block';
export * from '@udecode/plate-alignment/react';
export * from '@udecode/plate-autoformat/react';
export * from '@udecode/plate-basic-elements/react';
export * from '@udecode/plate-basic-marks/react';
export * from '@udecode/plate-block-quote/react';
export * from '@udecode/plate-break/react';
export * from '@udecode/plate-code-block/react';
export * from '@udecode/plate-combobox/react';
export * from '@udecode/plate-comments/react';
export * from '@udecode/plate-floating';
export * from '@udecode/plate-font/react';
export * from '@udecode/plate-heading/react';
export * from '@udecode/plate-highlight/react';
export * from '@udecode/plate-layout/react';
export * from '@udecode/plate-slash-command/react';
export * from '@udecode/plate-indent/react';
export * from '@udecode/plate-indent-list/react';
export * from '@udecode/plate-kbd/react';
export * from '@udecode/plate-line-height/react';
export * from '@udecode/plate-link/react';
export * from '@udecode/plate-list/react';
export * from '@udecode/plate-media/react';
export * from '@udecode/plate-reset-node/react';
export * from '@udecode/plate-selection';
export * from '@udecode/plate-suggestion/react';
export * from '@udecode/plate-tabbable/react';
export * from '@udecode/plate-table/react';
export * from '@udecode/plate-toggle/react';
export * from '@udecode/plate-resizable';

editor.hasTarget

Moved editor functions:

addMark -> editor.tf.addMark
addRangeMarks -> editor.tf.setNodes(props, { at, marks: true })
blurEditor -> editor.tf.blur
collapseSelection -> editor.tf.collapse
createDocumentNode -> editor.api.create.value (core)
createNode -> editor.api.create.block
createPathRef -> editor.api.pathRef
createPointRef -> editor.api.pointRef
createRangeRef -> editor.api.rangeRef
deleteBackward({ unit }) -> editor.tf.deleteBackward(unit)
deleteForward({ unit }) -> editor.tf.deleteForward(unit)
deleteFragment -> editor.tf.deleteFragment
deleteText -> editor.tf.delete
deselect -> editor.tf.deselect
deselectEditor -> editor.tf.deselectDOM
duplicateBlocks -> editor.tf.duplicateNodes({ nodes })
findDescendant -> editor.api.descendant
findEditorDocumentOrShadowRoot -> editor.api.findDocumentOrShadowRoot
findEventRange -> editor.api.findEventRange
findNode(options) -> editor.api.node(options)
findNodeKey -> editor.api.findKey
findNodePath -> editor.api.findPath
findPath -> editor.api.findPath
focusEditor -> editor.tf.focus({ at })
focusEditorEdge -> editor.tf.focus({ at, edge: 'startEditor' | 'endEditor' })
getAboveNode -> editor.api.above
getAncestorNode -> editor.api.block({ highest: true })
getBlockAbove -> editor.api.block({ at, above: true }) or editor.api.block() if at is not a path
getBlocks -> editor.api.blocks
getEdgeBlocksAbove -> editor.api.edgeBlocks
getEdgePoints -> editor.api.edges
getEditorString -> editor.api.string
getEditorWindow -> editor.api.getWindow
getEndPoint -> editor.api.end
getFirstNode -> editor.api.first
getFragment -> editor.api.fragment
getFragmentProp(fragment, options) -> editor.api.prop({ nodes, ...options})
getLastNode -> editor.api.last
getLastNodeByLevel(level) -> editor.api.last([], { level })
getLeafNode -> editor.api.leaf
getLevels -> editor.api.levels
getMark -> editor.api.mark
getMarks -> editor.api.marks
getNextNode -> editor.api.next
getNextNodeStartPoint -> editor.api.start(at, { next: true })
getNodeEntries -> editor.api.nodes
getNodeEntry -> editor.api.node(at, options)
getNodesRange -> editor.api.nodesRange
getParentNode -> editor.api.parent
getPath -> editor.api.path
getPathRefs -> editor.api.pathRefs
getPoint -> editor.api.point
getPointAfter -> editor.api.after
getPointBefore -> editor.api.before
getPointBeforeLocation -> editor.api.before
getPointRefs -> editor.api.pointRefs
getPositions -> editor.api.positions
getPreviousBlockById -> editor.api.previous({ id, block: true })
getPreviousNode -> editor.api.previous
getPreviousNodeEndPoint -> editor.api.end({ previous: true })
getPreviousSiblingNode -> editor.api.previous({ at, sibling: true })
getRange -> editor.api.range
getRangeBefore -> editor.api.range('before', to, { before })
getRangeFromBlockStart -> editor.api.range('start', to)
getRangeRefs -> editor.api.rangeRefs
getSelectionFragment -> editor.api.fragment(editor.selection, { structuralTypes })
getSelectionText -> editor.api.string()
getStartPoint -> editor.api.start
getVoidNode -> editor.api.void
hasBlocks -> editor.api.hasBlocks
hasEditorDOMNode -> editor.api.hasDOMNode
hasEditorEditableTarget -> editor.api.hasEditableTarget
hasEditorSelectableTarget -> editor.api.hasSelectableTarget
hasEditorTarget -> editor.api.hasTarget
hasInlines -> editor.api.hasInlines
hasTexts -> editor.api.hasTexts
insertBreak -> editor.tf.insertBreak
insertData -> editor.tf.insertData
insertElements -> editor.tf.insertNodes
insertEmptyElement -> editor.tf.insertNodes(editor.api.create.block({ type }))
insertFragment -> editor.tf.insertFragment
insertNode -> editor.tf.insertNode
insertNodes -> editor.tf.insertNodes
insertText -> editor.tf.insertText({ at }) or editor.tf.insertText({ marks: false }) without at
isAncestorEmpty -> editor.api.isEmpty
isBlock -> editor.api.isBlock
isBlockAboveEmpty -> editor.api.isEmpty(editor.selection, { block: true })
isBlockTextEmptyAfterSelection -> editor.api.isEmpty(editor.selection, { after: true })
isCollapsed(editor.selection) -> editor.api.isCollapsed()
isComposing -> editor.api.isComposing
isDocumentEnd -> editor.api.isEditorEnd
isEdgePoint -> editor.api.isEdge
isEditorEmpty -> editor.api.isEmpty()
isEditorFocused -> editor.api.isFocused
isEditorNormalizing -> editor.api.isNormalizing
isEditorReadOnly -> editor.api.isReadOnly
isElementEmpty -> editor.api.isEmpty
isElementReadOnly -> editor.api.elementReadOnly
isEndPoint -> editor.api.isEnd
isExpanded(editor.selection) -> editor.api.isCollapsed()
isInline -> editor.api.isInline
isMarkableVoid -> editor.api.markableVoid
isMarkActive -> editor.api.hasMark(key)
isPointAtWordEnd -> editor.api.isAt({ at, word: true, end: true })
isRangeAcrossBlocks -> editor.api.isAt({ at, blocks: true })
isRangeInSameBlock -> editor.api.isAt({ at, block: true })
isRangeInSingleText -> editor.api.isAt({ at, text: true })
isSelectionAtBlockEnd -> editor.api.isAt({ end: true })
isSelectionAtBlockStart -> editor.api.isAt({ start: true })
isSelectionCoverBlock -> editor.api.isAt({ block: true, start: true, end: true })
isSelectionExpanded -> editor.api.isExpanded()
isStartPoint -> editor.api.isStart
isTargetinsideNonReadonlyVoidEditor -> editor.api.isTargetInsideNonReadonlyVoid
isTextByPath -> editor.api.isText(at)
isVoid -> editor.api.isVoid
liftNodes -> editor.tf.liftNodes
mergeNodes -> editor.tf.mergeNodes
moveChildren -> editor.tf.moveNodes({ at, to, children: true, fromIndex, match: (node, path) => boolean })
moveNodes -> editor.tf.moveNodes
moveSelection -> editor.tf.move
normalizeEditor -> editor.tf.normalize
removeEditorMark -> editor.tf.removeMark
removeEditorText -> editor.tf.removeNodes({ text: true, empty: false })
removeEmptyPreviousBlock -> editor.tf.removeNodes({ previousEmptyBlock: true })
removeMark(options) -> editor.tf.removeMarks(keys, options)
removeNodeChildren -> editor.tf.removeNodes({ at, children: true })
removeNodes -> editor.tf.removeNodes
removeSelectionMark -> editor.tf.removeMarks()
replaceNode(editor, { nodes, insertOptions, removeOptions }) -> editor.tf.replaceNodes(nodes, { removeNodes, ...insertOptions })
select -> editor.tf.select
selectEndOfBlockAboveSelection -> editor.tf.select(editor.selection, { edge: 'end' })
selectNodes -> editor.tf.select(editor.api.nodesRange(nodes))
setFragmentData -> editor.tf.setFragmentData
setMarks(marks, clear) -> editor.tf.addMarks(marks, { remove: string | string[] })
setNodes -> editor.tf.setNodes
setPoint -> editor.tf.setPoint
setSelection -> editor.tf.setSelection
someNode -> editor.api.some(options)
splitNodes -> editor.tf.splitNodes
toDOMNode -> editor.api.toDOMNode
toDOMPoint -> editor.api.toDOMPoint
toDOMRange -> editor.api.toDOMRange
toggleWrapNodes -> editor.tf.toggleBlock(type, { wrap: true })
toPliteNode -> editor.api.toPliteNode
toPlitePoint -> editor.api.toPlitePoint
toPliteRange -> editor.api.toPliteRange
unhangCharacterRange -> editor.api.unhangRange(range, { character: true })
unhangRange -> editor.api.unhangRange
unsetNodes -> editor.tf.unsetNodes
unwrapNodes -> editor.tf.unwrapNodes
withoutNormalizing(editor, fn) -> editor.update((tx) => { /* use tx.* */ })
wrapNodeChildren -> editor.tf.wrapNodes(element, { children: true })
wrapNodes -> editor.tf.wrapNodes
replaceNodeChildren -> editor.tf.replaceNodes({ at, children: true })
resetEditor -> editor.tf.reset
resetEditorChildren -> editor.tf.reset({ children: true })
selectEditor -> editor.tf.select([], { focus, edge })
selectSiblingNodePoint -> editor.tf.select(at, { next, previous })

export const ParagraphPlugin = createPlatePlugin({
  key: 'p',
  node: { isElement: true },
}).extend({ editor, type }) => ({
  shortcuts: {
    toggleParagraph: {
      handler: () => {
        editor.tf.toggle.block({ type });
      },
      keys: [
        [Key.Mod, Key.Alt, '0'],
        [Key.Mod, Key.Shift, '0'],
      ],
      preventDefault: true,
    },
  },
})

render.abovePlite

export const createAlignPlugin = createPluginFactory({
  key: KEY_ALIGN,
  inject: {
    props: {
      defaultNodeValue: 'start',
      nodeKey: KEY_ALIGN,
      styleKey: 'textAlign',
      validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
      validTypes: ['p'],
    },
  },
  then: (_, plugin) =>
    mapInjectPropsToPlugin(editor, plugin, {
      deserializeHtml: {
        getNode: (el, node) => {
          if (el.style.textAlign) {
            node[plugin.key] = el.style.textAlign;
          }
        },
      },
    }),
});

export const AlignPlugin = createBasePlugin({
  inject: {
    nodeProps: {
      defaultNodeValue: 'start',
      nodeKey: 'align',
      styleKey: 'textAlign',
      validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
    },
    targetPluginToInject: ({ editor, plugin }) => ({
      parsers: {
        html: {
          deserializer: {
            parse: ({ element, node }) => {
              if (element.style.textAlign) {
                node[editor.plugin(plugin).type] = element.style.textAlign;
              }
            },
          },
        },
      },
    }),
    targetPlugins: [ParagraphPlugin.key],
  },
  key: 'align',
});

RenderAfterEditable

EditableSiblingComponent

editor.useOption(plugin, 'optionKey')

api.html.deserialize

override.components

handlers

inject

normalizeInitialValue

options

override

priority

render

shortcuts

transforms

useHooks

rootPlugin

usePlateEditorState

useEditorState

// Before
<PlateProvider>
  <Toolbar>
    <AlignToolbarButtons />
  </Toolbar>
 
  <Plate<MyValue> editableProps={editableProps} <MyValue> initialValue={alignValue} plugins={plugins} />
</PlateProvider>
 
// After
<PlateProvider<MyValue> initialValue={alignValue} plugins={plugins}>
  <Toolbar>
    <AlignToolbarButtons />
  </Toolbar>
 
  <Plate<MyValue> editableProps={editableProps} />
</PlateProvider>
 
// After (provider-less mode)
<Plate<MyValue> editableProps={editableProps} initialValue={alignValue} plugins={plugins} />

PlateProvider

// before
export type WithOverride<T = {}, P = {}> = (
  editor: PlateEditor<T>,
  plugin: WithPlatePlugin<T, P>
) => PlateEditor<T>;
 
// after - where E is the Editor type (input), and EE is the Extended Editor type (output)
export type WithOverride<
  P = PluginOptions,
  V extends Value = Value,
  E extends PlateEditor<V> = PlateEditor<V>,
  EE extends E = E,
> = (editor: E, plugin: WithPlatePlugin<P, V, E>) => EE;

// Before
<Plate plugins={plugins} options={options} />;
 
// After
// option 1: use the plugin factory
let plugins = [
  createParagraphPlugin({
    type: 'paragraph',
  }),
];
 
// option 2: use createPlugins
plugins = createPlugins(plugins, {
  overrideByKey: {
    [ELEMENT_PARAGRAPH]: {
      type: 'paragraph',
    },
  },
});
 
<Plate plugins={plugins} />;

type DeserializeHtml = {
  /** List of HTML attribute names to store their values in `node.attributes`. */
  attributeNames?: string[];
 
  /**
   * Deserialize an element. Use this instead of plugin.isElement if you don't
   * want the plugin to renderElement.
   *
   * @default plugin.isElement
   */
  isElement?: boolean;
 
  /**
   * Deserialize a leaf. Use this instead of plugin.isLeaf if you don't want the
   * plugin to renderLeaf.
   *
   * @default plugin.isLeaf
   */
  isLeaf?: boolean;
 
  /** Deserialize html element to slate node. */
  getNode?: (element: HTMLElement) => AnyObject | undefined;
 
  query?: (element: HTMLElement) => boolean;
 
  /**
   * Deserialize an element:
   *
   * - If this option (string) is in the element attribute names.
   * - If this option (object) values match the element attributes.
   */
  validAttribute?: string | { [key: string]: string | string[] };
 
  /** Valid element `className`. */
  validClassName?: string;
 
  /** Valid element `nodeName`. Set '*' to allow any node name. */
  validNodeName?: string | string[];
 
  /**
   * Valid element style values. Can be a list of string (only one match is
   * needed).
   */
  validStyle?: Partial<
    Record<keyof CSSStyleDeclaration, string | string[] | undefined>
  >;
 
  /** Whether or not to include deserialized children on this node */
  withoutChildren?: boolean;
};

pipeDeserializeHtmlLeaf

AnyObject