The toggleNodeType method should have a matching mechanism, otherwise it may cause the nodeType of the element to be incorrectly changed

[tomdyqin]

1、The toggleNodeType method should have a matching mechanism, otherwise it may cause the nodeType of the element to be incorrectly changed。

the test example

const input = (
  <editor>
    <p>test</p>
     <img />
  </editor>
) as any as PlateEditor;

const output = (
  <editor>
    <h1>test</h1>
     <img src="test"/>
  </editor>
) as any;

const errorOutput = (
  <editor>
    <h1>test</h1>
     <h1 src="test"/>
  </editor>
) as any;

it('should be', () => {
  toggleNodeType(input, { activeType: 'h1' });

  expect(input.children).toEqual(output.children);
});

2、Why block changes here？

 if (isActive && activeType === inactiveType) return;

the test example

const input = (
  <editor>
    <p>test</p>
     <h1>test h1</h1>
  </editor>
) as any as PlateEditor;

const output = (
  <editor>
    <h1>test</h1>
    <h1>test h1</h1>
  </editor>
) as any;

const errorOutput = (
  <editor>
    <p>test</p>
     <h1>test h1</h1>
  </editor>
) as any;

it('should be', () => {
  toggleNodeType(input, { activeType: 'h1' });

  expect(input.children).toEqual(output.children);
});

This is the toggleNodeType method I am currently using

const toggleNodeType = <V extends Value>(
  editor: PlateEditor<V>,
  options: ToggleNodeTypeOptions,
  editorNodesOptions?: GetNodeEntriesOptions<V>
) => {
  const { activeType, inactiveType = getPluginType(editor, ELEMENT_DEFAULT) } = options;
  if (!activeType || !editor.selection) return;

  const isActive = someNode(editor, {
    ...editorNodesOptions,
    match: {
      type: activeType,
    },
  });

  setElements<Value>(editor, {
    type: isActive ? inactiveType : activeType,
  }, {
    match: (n, p) => (editorNodesOptions?.match ? editorNodesOptions?.match(n, p) :  isBlock(editor, n)),
  });
};

// when i want to toggle nodeType to h1
 const validTypes = [
    ELEMENT_PARAGRAPH,
    ELEMENT_H1,
    ELEMENT_H2,
    ELEMENT_H3,
    ELEMENT_H4,
    ELEMENT_TODO_LI,
  ];
  toggleNodeType(editor, options, {
    match: n => validTypes.includes(n.type as string),
  });

Funding

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