Prevent a node from being destroyed

[cameronk]

I have a CustomTextNode. How do I prevent it from being destroyed?

Options I've considered:

1. Listening to commands like KEY_DELETE_COMMAND and skipping if CustomTextNode is within the range. Attempted this but it's fragile as there doesn't seem to be a single way to cover all "delete" events (ex. someone can select a region and type a letter which triggers CONTROLLED_TEXT_INSERTION_COMMAND)
2. Using a mutation listener. These seem to be pure listeners and thus cannot block a particular state transition as far as I can tell. I considered maintaining my own mapping of all CustomNodes that were created and then recreating them upon deletion, but this also feels fragile & inefficient.
3. Using a node transform. When deleting the last text character in the node, the node transform doesn't seem to fire. (Even if the remove function is overridden`)
4. Overriding the remove() method. This does prevent the node from being destroyed, however I get some strange behavior, for example if I try to update the text of the node after preventing deletion, it becomes deletable again.

class CustomTextNode extends TextNode {
  // ...
  remove() : void {
    return; // don't propagate to super.remove()
  }
}

5. Use registerLexicalTextEntity to perform a replacement of empty text with a placeholder node. The matcher doesn't seem to be called when the node is being removed.

[cameronk]

My use case (in case someone knows what the right pattern would be here):

I want to make an editable transcript. I have word-level timestamps for words in a transcript, so I want to create one text node per word with a meta property containing the start and end timestamp for the spoken word. Let's call this WordNode.

I want the user to be able to edit the text for a WordNode. If the user tries to delete a WordNode, the node is either updated or replaced with a placeholder element. If the user clicks the placeholder, the original word is restored.

So far, I've:

• Created a WordNode which extends TextNode
• Added a meta property
• Attempted to change the type (from TextNode) to token to represent a placeholder item in the transcript when the node is deleted

[hastebrot]

It looks like you have to listen for WordNode changes and restore these nodes when they are deleted.

I'll try to reproduce this problem, since I'm working on a very similar problem (token/word nodes associated to audio start and end position which are highlighted when the audio reaches the word; for language learning).

[hastebrot]

The basic idea is to revert the state back to the previous state. This is what the code below does. It has to be extended to properly detect when a state change has to be reverted, and to properly handle selection changes.

I hope I understood your use-case correctly. I'm not deep enough into lexical right now to understand the if this is the right approach. Will try to come up with a full example when I have some more time.

// reference to LexicalEditor acquired using useLexicalComposerContext().
const editorRef = useRef<LexicalEditor>(null);

useEffect(() => {
  const editor = editorRef.current;
  if (editor) {
    return mergeRegister(
      editor.registerUpdateListener((event) => {
        const TAG_REVERT_STATE = "revert-state";
        if (!event.tags.has(TAG_REVERT_STATE)) {
          const state = event.prevEditorState.clone();
          state._selection = event.editorState._selection;
          editor.setEditorState(state, { tag: TAG_REVERT_STATE });
        }
      })
    );
  }
}, [editorRef]);

[notjustinshaw]

I think this is a very common use-case. A lot of people want "sticky" nodes that don't get deleted but turn into placeholders when their contents is removed.

Workaround 🚀

Here is the workaround I came up with, which prevents a node from being removed or replaced if it is the first child of the root node (I wanted the the first h1 to turn into a title placeholder when it was deleted). This works by subclassing the node class you'd like to make a template (in my case HeadingNode) and overriding the remove and replace functions.

import { HeadingNode } from "@lexical/rich-text";
import { $getRoot, LexicalNode } from "lexical";

export class SectionHeadingNode extends HeadingNode {
	static getType() {
		return "sticky-heading";
	}

	static clone(node: any) {
		return new SectionHeadingNode(node.getTag());
	}

	// do not remove node if it is the first child of root
	remove(preserveEmptyParent?: boolean | undefined): void {
		if ($getRoot().getFirstChild()?.getKey() !== this.getKey()) {
			super.remove(preserveEmptyParent);
		}
	}

	// do not replace node if it is the first child of root
	replace<N extends LexicalNode>(
		replaceWith: N,
		includeChildren?: boolean | undefined
	): N {
		if ($getRoot().getFirstChild()?.getKey() !== this.getKey()) {
			return super.replace(replaceWith, includeChildren);
		}
		return this as unknown as N;
	}
}

and then you need to replace the HeadingNode's with SectionHeadingNode's in the config

... {
  namespace: "rewrite",
  editorState: isCollab ? null : loadContent,
  theme: {},
  onError(error: any) throw error,
  nodes: [
    ...,
    SectionHeadingNode,
    {
      replace: HeadingNode,
      with: (node: HeadingNode) => new SectionHeadingNode(node.getTag()),
    },
  ]
};

[theprashant-one]

Is this working?

[notjustinshaw]

yes, you can see it in use here: https://wikigora.vercel.app/

[cmmartin]

breaks copy/cut/paste though

[vnugent]

@notjustinshaw how do you detect empty text and display separate placeholder for the header and non-header?

[notjustinshaw]

The lexical internals take care of that. You just create a new class and override the methods that delete and remove the element from the dom tree to just have them no-op instead. This gets you an element that can’t be removed when empty. The placeholder is just what happens when it’s empty and we inherit that from the old header.

…

On Sep 12, 2023 at 16:39 -0700, Viet Nguyen ***@***.***>, wrote: @notjustinshaw how do you detect empty text and display separate placeholder for the header and non-header? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[ivailop7]

If it's just to display empty text placeholder, you can achieve this via CSS with the 'empty': https://developer.mozilla.org/en-US/docs/Web/CSS/:empty