isSelectable: false, void element still selected and impossible to insertText next to custom inline element

[QuentinFrc]

Hi everyone,

I've been struggling for several days with a custom plugin that I'm having trouble getting to work as I want. My use case is quite basic: I want to insert custom inline elements that correspond to special characters. I need to handle the render part of this component because the character is relative to data external to the editor.

Screenity.video.-.Oct.10.2025.12.13.AM.mp4

Plugin definition

import { createPlatePlugin } from 'platejs/react'

export const SuitIconPlugin = createPlatePlugin({
  key: SUIT_ICON_KEY,
  node: {
    isVoid: true,
    isElement: true,
    isInline: true,
    isSelectable: false,
    type: SUIT_ICON_KEY,
    component: SuitIconElement,
  }
})

Plugin Node + Insert toolbar button

export const SuitIconElement = ({
  children,
  ...props
}: PlateElementProps & { element: { char: Suit } }) => {
  const { suit_to_symbols: config } = useConfig()
  const element = config[props.element.char]

  const selected = useSelected();

  return (
    <PlateElement as={'span'} className={`${element.className} ${selected ? 'bg-gray-200' : ''}`} {...props}>
      {element.char}
      {children}
    </PlateElement>
  )
}

const SUIT_MAP: Record<string, string> = {
  S: '♠',
  H: '♥',
  D: '♦',
  C: '♣',
}

const insertSuit = (editor: PlateEditor, char: string) => {
  editor.tf.insertNode(
    {
      type: SUIT_ICON_KEY,
      char,
      symbol: SUIT_MAP[char] ?? '',
      children: [{ text: 'Text' }],
    },
  )
}

export function SymbolButton({ suit }: { suit: Suit }) {
  const editor = useEditorRef()
  const { suit_to_symbols: config } = useConfig()
  const element = config[suit]
  return (
    <ToolbarButton
      onMouseDown={e => {
        e.preventDefault()
        insertSuit(editor, suit)
      }}
      className={element.className}
    >
      {element.char}
    </ToolbarButton>
  )
}

Everything is working well, but when I place the caret between or next to a Suit element, I am no longer able to type anything. I need to move the caret using keyboard arrows to "leave" this suit element and type text again

Question is WHY ?
(I tried some tricks to patch that doesn't work like: move artificially selection on mouseDown on SuitElement, use a leaf, ....)

[dosubot[bot]]

Hi @QuentinFrc! I'm Dosu and I’m helping the plate team.

This happens because inline void elements with isSelectable: false are treated as atomic and non-editable, so the caret can't be placed inside or directly next to them for typing. The editor blocks text input at these positions, which is a common issue with non-selectable void nodes in Slate/Plate.

To improve this, try configuring the plugin's rules.selection.affinity setting. Using 'outward' affinity can help the caret "escape" from the inline element, making it possible to type next to it. For example:

SuitIconPlugin.configure({
  rules: {
    selection: { affinity: 'outward' }
  }
})

This tells Plate to move the caret outside the inline element when typing at its boundary, which usually restores normal text input behavior next to your custom element. See more about affinity options and their effects in the Plate plugin rules docs.

If you need the element to be selectable, consider setting isSelectable: true, but if you want it non-selectable, affinity rules are your best bet for fixing caret and typing issues.

To reply, just mention @dosu.

---

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

[QuentinFrc]

@dosu I tried the selection affinity rule with isSelectable true and false, and it didn't work 😞

[dosubot[bot]]

This is a known limitation with non-selectable inline void elements—they're treated as atomic and block normal caret movement and typing next to them, even with affinity rules configured. Plate and Slate don't fully support typing directly adjacent to these nodes when isSelectable: false and isVoid: true are set, so the caret can get "stuck" and text input is blocked until you manually move the selection away.

If you need smooth typing around these elements, consider making them selectable (isSelectable: true) or rethinking the node structure (for example, using a mark or a non-void inline element). Otherwise, a more advanced workaround would involve custom normalization logic to force the caret into a valid position when it gets stuck, but this isn't handled out-of-the-box by Plate's affinity or selection rules docs.

Let me know if you want ideas for a custom normalization workaround or want to explore alternative node structures!

To reply, just mention @dosu.

---

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

[QuentinFrc]

Okay @dosu, give me these ideas for a custom normalization!

[dosubot[bot]]

Here’s how you can approach custom normalization for your caret issue:

You can override the plugin’s normalizeNode or use overrideEditor to detect when the selection is stuck next to a non-selectable inline void element and programmatically move the caret to a valid position. The key is to check if the selection is collapsed and sitting on or inside a void inline node that’s not selectable, then use editor.tf.select() to move it to a nearby valid text node.

Example outline:

import { createPlatePlugin } from 'platejs/react'

export const SuitIconPlugin = createPlatePlugin({
  key: SUIT_ICON_KEY,
  node: {
    isVoid: true,
    isElement: true,
    isInline: true,
    isSelectable: false,
    type: SUIT_ICON_KEY,
    component: SuitIconElement,
  }
}).overrideEditor(({ editor }) => ({
  normalizeNode: (entry) => {
    const { selection } = editor;
    if (!selection || !editor.api.isCollapsed()) return;

    // Get node at selection
    const [node, path] = editor.api.node({ at: selection }) ?? [];
    if (
      node &&
      editor.api.isVoid(node) &&
      editor.api.isInline(node) &&
      !editor.api.isSelectable(node)
    ) {
      // Try to move caret to previous or next valid text node
      const prev = editor.api.previous({ at: path, match: { text: true } });
      const next = editor.api.next({ at: path, match: { text: true } });

      if (prev) {
        editor.tf.select(prev[1], { edge: 'end' });
      } else if (next) {
        editor.tf.select(next[1], { edge: 'start' });
      }
      // Optionally, return here to prevent further normalization
      return;
    }
    // Default normalization
    editor.normalizeNode(entry);
  }
}));

You can tweak the logic to fit your document structure. The main idea is to intercept normalization when the caret is stuck and move it to a valid position so typing works again. See the plugin rules docs and editor transforms API for more details.

To reply, just mention @dosu.

---

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

[felixfeng33]

Mention plugin has a similar issue, and I this this is a bug in Slate.