Insert a custom node by replacing current selection ?

[aaronzomback]

I have implemented a new node class HighlightNode which extends ElementNode -

With the click of a button in the toolbar I dispatch the INSERT_HIGHLIGHT_COMMAND, I would like to replace whatever text content is currently selected with this new HighlightNode class, which wraps the selected TextNode inside itself.

This new HighlightNode class, sets the new css font-color and backgroundColor styles for the textContent.

❗️The problem is that currently when I select a piece of text, it replaces the entire editor with this Highlight node as the direct descendant of the root, with no regard for the currently selected text.

Is it possible to change the selection logic below in the registerCommand to only replace the text that is currently selected ?

Do i need to select specifically for the content between the focus and anchor nodes somehow?

  editor.registerCommand(
    INSERT_HIGHLIGHT_COMMAND,
    (name: string) => {
      const selection = $getSelection()
      if ($isRangeSelection(selection)) {
        $setBlocksType(selection, () => $createHighlightNode(name))
      }
      return true
    },
    COMMAND_PRIORITY_LOW,
  )

[moy2010]

You could add a check for the selection where you check if its collapsed. If it's not, then handle the creation of your HighlightNode:

const selection = $getSelection();
if ($isRangeSelection(selection)) {
  if (selection.isCollapsed()) {
    $setBlocksType(selection, () => $createHighlightNode(name));
  } else {
    const textContent = selection.getTextContent();
    const highlightNode = $createHighlightNode(name);
    selection.insertNodes([highlightNode]);
    // Do something else if you need to
  }
}

[H-Weisner]

I had it highlighting to different degrees of success with the above solutions but the critical failure was clearing the element node.

I was implementing a redaction element where I wanted it to wrap all text nodes and maintain the styling underneath. I got around doing this by just formatting with highlight. Which isn't ideal, as it'd be nice to have highlight on the lowest level text node, and redactions a level higher.

I've not seen any examples of adding an element node that don't change the whole line, I'm not sure how possible this is, I'm certain there's a hacky solution but after many hours and a deadline approaching I'm having to give up. I may continue in my spare time if I get somewhere I'll lyk. I'm not a fan of the lexical docs.

If you're storing lexical JSON on your backend and don't have access to things like lexical API's hasFormat, you can use the binary operations on the format number to extract if it's highlighted. This thread has a function that can help with that..

[sep2]

You might want to look at the @lexical/mark package I have had some success with it.