Reset Node

Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

  • Enables quick reset of text block formatting to default on key events (e.g. Enter).
  • To test, press Enter in an empty or at the end of a block quote, or Backspace at the start of a block quote.

Installation

npm install @udecode/plate-reset-node

Usage

// ...
import {
  isBlockAboveEmpty,
  isSelectionAtBlockStart,
} from '@udecode/plate';
import { ResetNodePlugin } from '@udecode/plate-reset-node/react';
 
const resetBlockTypesCommonRule = {
  types: [BlockquotePlugin.key, TodoListPlugin.key],
  defaultType: ParagraphPlugin.key,
};
 
const resetBlockTypesCodeBlockRule = {
  types: [CodeBlockPlugin.key],
  defaultType: ParagraphPlugin.key,
  onReset: unwrapCodeBlock,
};
 
const plugins = [
  // ...otherPlugins,
  ResetNodePlugin.configure({
    options: {
      rules: [
        {
          ...resetBlockTypesCommonRule,
          hotkey: 'Enter',
          predicate: isBlockAboveEmpty,
        },
        {
          ...resetBlockTypesCommonRule,
          hotkey: 'Backspace',
          predicate: isSelectionAtBlockStart,
        },
        {
          ...resetBlockTypesCodeBlockRule,
          hotkey: 'Enter',
          predicate: isCodeBlockEmpty,
        },
        {
          ...resetBlockTypesCodeBlockRule,
          hotkey: 'Backspace',
          predicate: isSelectionAtCodeBlockStart,
        },
      ],
    },
  }),
];

Plugins

ResetNodePlugin

Plugin for resetting node types based on rules.

Optionsrules

Collapse all

    Hotkey(s) that trigger the rule.

    Default type to reset node to.

    Node types where rule applies.

    Additional condition for rule.

    Callback when reset occurs.

    Disable reset for first block in editor.

    Disable reset for entire editor.