How to remove all nodes of a given type from editor

[chalecki]

Hey. I'm working on a custom plugin that allows adding references and abbreviations to the text editor. Each ref and abbr node has a unique ID and attribute data-lexical-[reference/abbreviation

I already created nodes, components, and toolbar buttons for that. Everything works great but I've stuck with custom behavior I have to add.

The abbreviations and references list have to be stored outside the editor, in the database. They can be reused in all editors I have across the app. They can be updated via a custom listing page with action buttons. Each time I edit or delete a node it must be reflected in the editor. I already covered that part but I have no clue how I can approach removing all nodes of a given type.

From the screenshot above, imagine you want to remove all usages of abbr 1 (AbbreviationNode + uuid). You click the three dots button and from there you click "Remove". And here are my questions:

• how to get all nodes of a given type that are currently displayed in the editor
• once I have the list, is it possible to remove them at once, or it should be done via for/forEach loop, selecting one by one by NodeKey and then the .remove() method?

Any ideas?

Cheers 🍻

[trueadm]

I’d look into using a Lexical mutation listener. That should let you store all the node keys for all
The instances of your custom node. You can then do a Lexical update when you want to remove them using $getNodeByKey for each key in you’re store.

[chalecki]

Thanks, @trueadm for a quick response! I'll try your suggestion 🍺

[chalecki]

It won't work I think. The removing part is happening outside of the editor so I need to notify the editor the collection has changed so it should remove all nodes with a given type but also uuid 🤔 The listener won't fire up since nothing has changed inside the editorState, right?

[chalecki]

I've ended up with this solution but I'm not sure if it's correct or optimal performance-wise 🤔

const deleteAbbreviation = () => {
  setDeleteModalOpen(false);
  editor.update(() => {
    const nodes = $nodesOfType(AbbreviationNode); // get all AbbreviationNode nodes
    for (const node of nodes) {
      if ((node as AbbreviationNode).__id === reference.id) {
        node.remove();
      }
    }
  });
}

[trueadm]

That’s fine. I’d use getKey() rather than __key too