Prevent cursor or selection over child element

[lefan-tan]

Hi folks, I'm implementing a modified version of the playground's collapsible node.
This version uses a button to toggle the <detail> state. However, I find that i'm able to move the cursor over the element, which is an odd behavior. How do I prevent this?

export class CollapsibleTitleNode extends ElementNode {
  static clone(node: CollapsibleTitleNode): CollapsibleTitleNode {
    return new CollapsibleTitleNode(node.__key)
  }

  constructor(key?: string) {
    super(key)
  }

  createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement {
    const element = document.createElement('summary')
    element.className = config.theme.collapsible.title

    const toggleBtn = document.createElement('button')
    toggleBtn.tabIndex = -1
    toggleBtn.className = config.theme.collapsible.toggleBtn

    element.append(toggleBtn)

    return element
  }

CleanShot.2025-01-28.at.22.54.57.mp4

[etrepum]

There isn’t anything to make this easy, similar nodes use plug-ins to detect changes to the selection and modify it before they are reconciled to the DOM

[ivailop7]

If it's specifically the arrow only, the way it's done in the playground using pseudo classes (before, after) in CSS is a pretty good approach that doesn't add a keyboard navigable element and then add eventListeners in the createDOM.

[lefan-tan]

Yup that makes sense, seems to be the easiest approach, thanks

[lefan-tan]

Hmm, you can't really add event listener targeting pseudo elements specifically.