Blockquote: Resetting the block should split lines into paragraphs

[12joan]

Description

When resetting a blockquote containing multiple lines (separated by \n, as is normal for blockquotes), it turns into a single paragraph with all the lines inside it, rather than one paragraph for each line.

Steps

1. Go to the sandbox
2. Create a blockquote with multiple lines
3. Place cursor at start of blockquote
4. Press backspace to reset the blockquote to a paragraph

Sandbox

https://codesandbox.io/s/sandpack-project-forked-dysl1n

Expectation

A new paragraph is created for each line of the blockquote.

Environment

• slate: 0.88.1
• slate-react: 0.82.1
• browser: Firefox

_P-190

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[zbeyens]

I'm not sure what's the standard around this. Notion keeps the new lines in a single paragraph. For this issue, let's add an option to enable this behavior for now.

[zbeyens]

@dosu This is now possible to override resetBlock for this. Can you give an example using overrideEditor? See https://platejs.org/docs/plugin-methods

[dosubot[bot]]

Here’s how you can use overrideEditor to customize resetBlock for blockquotes, so each line becomes its own paragraph when resetting:

import { BlockquotePlugin } from '@udecode/plate-block-quote';

export const blockquotePlugin = BlockquotePlugin.overrideEditor(
  ({ editor, tf: { resetBlock } }) => ({
    transforms: {
      resetBlock(options) {
        const block = editor.api.block({ at: options?.at });
        if (
          block?.type === editor.getType(BlockquotePlugin.key) &&
          Array.isArray(block.children)
        ) {
          // Gather all text from blockquote children
          const text = block.children.map((n: any) => n.text).join('\n');
          const lines = text.split('\n');

          // Build new paragraph nodes
          const newNodes = lines.map(line => ({
            type: editor.getType('p'),
            children: [{ text: line }],
          }));

          // Remove the blockquote and insert paragraphs
          editor.apply({
            type: 'remove_node',
            path: options?.at,
            node: block,
          });
          newNodes.forEach((node, i) => {
            editor.apply({
              type: 'insert_node',
              path: [...options.at.slice(0, -1), options.at[options.at.length - 1] + i],
              node,
            });
          });
          return true;
        }
        return resetBlock(options);
      },
    },
  })
);

This follows the pattern from the docs: you override resetBlock, check for blockquote, and insert a paragraph for each line. For more on overrideEditor, see the plugin methods docs and migration guide.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[zbeyens]

@dosu Almost that, but you can't use editor.apply. See Plate editor transforms, including editor.tf.withoutNormalizing

[dosubot[bot]]

Here's how you can override resetBlock for blockquotes using Plate transforms and editor.tf.withoutNormalizing, without using editor.apply:

import { BlockquotePlugin } from '@udecode/plate-block-quote';

export const blockquotePlugin = BlockquotePlugin.overrideEditor(
  ({ editor, tf: { resetBlock } }) => ({
    transforms: {
      resetBlock(options) {
        const block = editor.api.block({ at: options?.at });
        if (
          block?.type === editor.getType(BlockquotePlugin.key) &&
          Array.isArray(block.children)
        ) {
          const text = block.children.map((n: any) => n.text).join('\n');
          const lines = text.split('\n');
          const paragraphType = editor.getType('p');

          editor.tf.withoutNormalizing(() => {
            // Remove the blockquote node
            editor.tf.removeNodes({ at: options.at });

            // Insert a paragraph for each line
            lines.forEach((line, i) => {
              editor.tf.insertNodes(
                { type: paragraphType, children: [{ text: line }] },
                { at: [...options.at.slice(0, -1), options.at[options.at.length - 1] + i] }
              );
            });
          });

          return true;
        }
        return resetBlock(options);
      },
    },
  })
);

The key is wrapping your mutations in editor.tf.withoutNormalizing, then using editor.tf.removeNodes and editor.tf.insertNodes for all changes. This ensures all operations happen atomically and avoids normalization issues between steps. This pattern matches how Plate handles advanced transforms internally.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}