Node deleted by Inline Element plug-in: what am I doing wrong?

[jelling]

Edit to clarify question:

Attempting to mark a selection as an inline element causes the below error.

Sandbox: https://codesandbox.io/s/sandpack-project-forked-hpilkc?file=/App.tsx

Plugin config:

const createCutPlugin = createPluginFactory({
  key: ELEMENT_CUT,
  isElement: true,
  isInline: true,
  // isVoid: true, // tried with and without this
  options: {
    hotkey: ["mod+shift+l"]
    // hotkey: ["mod+shift+c"] // this is opening dev tools in sandbox
  },
  handlers: {
    onKeyDown: onKeyDownToggleElement
  }
});

[12joan]

Can you edit your question with more details about what you're trying to achieve with your cut plugin and what exactly is going wrong? If you can make a code sandbox with just the cut plugin and any other code necessary to reproduce your issue, that would be the fastest way of getting help. Here's a code sandbox with the code you posted to get you started.

[jelling]

@12joan all I'm trying to do is select one or more nodes and have them wrapped inside a new parent element node with the type set to the key ELEMENT_CUT.

I can create a sandbox if really needed, but I'm not certain this is a bug. More likely that my expectations are off for what it takes to create an inline element - it was super simple to do this as an element or mark - or I'm doing something wrong.

[jelling]

One question: can you confirm that creating an inline plugin should work the way I'm trying to do it? It's not clear from the documentation.

[12joan]

If you're asking whether your createPluginFactory is correctly setting your element as inline, yes. Here's an example of an inline element from the Plate source code.

[jelling]

What I'm asking is "is the Plate inline plugin type designed to make it super easy to wrap and unwrap a selection inside an inline element?"

If so, it seems like either there should be an easy example somewhere that shows this working OR I'm doing something very wrong even in this simplified example.

When I followed your suggestion of calling Slate directly via a toolbar button like this:

export const insertCut = <V extends Value>(editor: PlateEditor<V>) => {
  withoutNormalizing(editor, () => {
    if (
      !someNode(editor, {
        match: { type: getPluginType(editor, ELEMENT_CUT) },
      })
    ) {
      insertNodes<any>(editor, {
        type: getPluginType(editor, ELEMENT_CUT),
        // TODO: insert selection words as children
        children: [{ text: "" }],
      });
    }
  });
};

export const ToolbarButtons = () => {
  const editor = usePlateEditorState();

  return (
    <>
      <div className="inputsWrapper">
        <div>
          <button onClick={() => insertCut(editor)}>Insert Cut</button>
        </div>
      </div>
    </>
  );
};

And this works in that it sets the node's type to "cut", and as I didn't write code to wrap and unwrap the selection, the children are just deleted.

That sounds a lot like the error Plate is reporting in that there no children for the modified node:

[jelling]

Using Plate's toggleWrapeNodes directly via a button also works:

export const insertCut = <V extends Value>(editor: PlateEditor<V>) => {
  withoutNormalizing(editor, () => {
    toggleWrapNodes(editor, getPluginType(editor, ELEMENT_CUT));
  });
};

So to summarize, should I expect the inlineEditor: true to be calling togleWrapNodes() without any further config?

And either way, when using createPlugin how can I tell it to use my insertCut function? Do I override the handlers: { onKeyDown: or do I do something with withOverrides?

[jelling]

Continuing to document as I go so hopefully this helps someone else...

To override the default key down behavior for an inline element, specify a custom onKeyDown handler like this:

export const createCutPlugin = createPluginFactory<CutPlugin>({
  key: ELEMENT_CUT,
  isElement: true,
  isInline: true,
  component: Cut,
  handlers: {
    onKeyDown: onKeyDownToggleCut,
  },

[jelling]

Here's what finally worked for me:

The plugin:

import { createPluginFactory } from "@udecode/plate";
import Cut from "./Cut";
import { onKeyDownToggleWrapNodes } from "../../../common/plate/inlineWrap/onKeyDownToggleInline";

export const ELEMENT_CUT = "cut";

export interface CutPlugin {}

export const createCutPlugin = createPluginFactory<CutPlugin>({
  key: ELEMENT_CUT,
  isElement: true,
  isInline: true,
  component: Cut,
  handlers: {
    onKeyDown: onKeyDownToggleWrapNodes, // custom key down handler i had to write
  },
  options: {
    hotkey: ["mod+shift+q"],
  },
});

The custom key down handler:

import {
  Value,
  PlateEditor,
  KeyboardHandlerReturnType,
  getPluginType,
  toggleWrapNodes,
  WithPlatePlugin,
  HotkeyPlugin,
} from "@udecode/plate";
import isHotkey from "is-hotkey";

export const onKeyDownToggleWrapNodes =
  <V extends Value = Value, E extends PlateEditor<V> = PlateEditor<V>>(
    editor: E,
    { type, options: { hotkey } }: WithPlatePlugin<HotkeyPlugin, V, E>
  ): KeyboardHandlerReturnType =>
  (e) => {
    if (!hotkey) return;

    if (!isHotkey(hotkey[0], e as any)) return;

    e.preventDefault();
    toggleWrapNodes(editor, getPluginType(editor, type));
    return;
  };

And a button for wrapping elements via the selection toolbar:

import {
  isMarkActive,
  useEventPlateId,
  usePlateEditorState,
  Value,
} from "@udecode/plate-core";
import {
  getPluginType,
  MarkToolbarButtonProps,
  toggleWrapNodes,
  ToolbarButton,
} from "@udecode/plate";

export const InlineWrapButton = <V extends Value>({
  id,
  type,
  clear,
  ...props
}: MarkToolbarButtonProps<V>) => {
  const editor = usePlateEditorState(useEventPlateId(id));

  return (
    <ToolbarButton
      // aria-label="Toggle Inline Element"
      active={!!editor?.selection && isMarkActive(editor, type!)}
      onClick={(e) => {
        e.preventDefault();
        toggleWrapNodes(editor, getPluginType(editor, type));
      }}
      {...props}
    />
  );
};