Node plugins get re-initialized and forget their state when editing another piece of text?

[dominictobias]

I have an issue where if I have multiple TextNode plugins inserted and I have changed the text of these with this.setTextContent, if I try and insert a new one it re-initializes one or more of them and resets the text content?

Here's a demo:

Screen.Recording.2024-11-05.at.5.34.03.PM.mov

As you can see when I insert a new one, the old is re-initialized and loses it's state.

FileAttachmentNode.ts

import { EditorConfig, NodeKey, SerializedTextNode, Spread, TextNode } from 'lexical'
import { spotlight } from '@mantine/spotlight'
import { setLastBtnFileId } from '@/state/selectedChatBtn'
import styles from './FileAttachmentNode.module.css'

export type SerializedFileAttachmentNode = Spread<
  {
    unifiedID: string
  },
  SerializedTextNode
>

export class FileAttachmentNode extends TextNode {
  __unifiedID: string

  static getType(): string {
    return 'fileattachment'
  }

  static clone(node: FileAttachmentNode): FileAttachmentNode {
    return new FileAttachmentNode(node.__unifiedID, node.__key)
  }

  constructor(unifiedID: string, key?: NodeKey) {
    console.log('Contructor', key)
    // Initialize with some placeholder text for the button
    super('Select a file', key)
    this.__unifiedID = unifiedID.toLowerCase()
  }

  createDOM(_config: EditorConfig): HTMLElement {
    const btn = document.createElement('button')
    btn.type = 'button'
    btn.className = styles.fileBtn
    btn.innerText = 'Select a file'
    btn.setAttribute('data-node-key', this.getKey())
    btn.onclick = () => {
      setLastBtnFileId(this.getKey())
      spotlight.open()
    }
    return btn
  }

  setButtonLabel(newLabel: string) {
    this.setTextContent(newLabel)
  }

  static importJSON(serializedNode: SerializedFileAttachmentNode): FileAttachmentNode {
    return $createFileAttachmentNode(serializedNode.unifiedID)
  }

  exportJSON(): SerializedFileAttachmentNode {
    return {
      ...super.exportJSON(),
      type: 'fileattachment',
      unifiedID: this.__unifiedID,
    }
  }
}

export function $createFileAttachmentNode(unifiedID: string): FileAttachmentNode {
  const node = new FileAttachmentNode(unifiedID).setMode('token')

  return node
}

FileAttachmentPlugin.ts

import { useEffect } from 'react'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { TextNode } from 'lexical'
import { spotlight } from '@mantine/spotlight'
import { setLastBtnFileId } from '@/state/selectedChatBtn'
import { $createFileAttachmentNode } from './FileAttachmentNode'

function FileAttachmentPlugin() {
  const [editor] = useLexicalComposerContext()

  useEffect(() => {
    const $textNodeTransform = (node: TextNode) => {
      if (!node.isSimpleText() || node.hasFormat('code')) {
        return
      }

      const text = node.getTextContent()
      const attachmentIndex = text.lastIndexOf('{{')
      if (attachmentIndex === -1) {
        return
      }

      let targetNode
      if (attachmentIndex === 0) {
        ;[targetNode] = node.splitText(attachmentIndex + 2) // Length of '{{'
      } else {
        ;[, targetNode] = node.splitText(attachmentIndex, attachmentIndex + 2)
      }

      // Create a new FileAttachmentNode (button)
      const buttonNode = $createFileAttachmentNode('button') // Use 'button' as a placeholder ID
      targetNode.replace(buttonNode)

      // Open file selection spotlight
      setLastBtnFileId(buttonNode.getKey())
      spotlight.open()

      // Insert a space after the button node
      const spaceNode = new TextNode(' ')
      buttonNode.insertAfter(spaceNode)
    }

    const unregisterTransform = editor.registerNodeTransform(TextNode, $textNodeTransform)

    return () => {
      unregisterTransform()
    }
  }, [editor])

  return null
}

export default FileAttachmentPlugin

[dominictobias]

Good old ChatGPT educated me about the need to serialize the label:

import { EditorConfig, NodeKey, SerializedTextNode, Spread, TextNode } from 'lexical'
import { spotlight } from '@mantine/spotlight'
import { setLastBtnFileId } from '@/state/selectedChatBtn'
import styles from './FileAttachmentNode.module.css'

export type SerializedFileAttachmentNode = Spread<
  {
    unifiedID: string
    label: string
  },
  SerializedTextNode
>

export class FileAttachmentNode extends TextNode {
  __unifiedID: string
  __label: string

  static getType(): string {
    return 'fileattachment'
  }

  static clone(node: FileAttachmentNode): FileAttachmentNode {
    return new FileAttachmentNode(node.__unifiedID, node.__label, node.__key)
  }

  constructor(unifiedID: string, label = 'Select a file', key?: NodeKey) {
    super(label, key)
    this.__unifiedID = unifiedID.toLowerCase()
    this.__label = label
  }

  createDOM(_config: EditorConfig): HTMLElement {
    const btn = document.createElement('button')
    btn.type = 'button'
    btn.className = styles.fileBtn
    btn.innerText = this.__label
    btn.setAttribute('data-node-key', this.getKey())
    btn.onclick = () => {
      setLastBtnFileId(this.getKey())
      spotlight.open()
    }
    return btn
  }

  updateDOM(prevNode: FileAttachmentNode, dom: HTMLElement): boolean {
    if (prevNode.__label !== this.__label) {
      dom.innerText = this.__label
      return true
    }
    return false
  }

  setButtonLabel(newLabel: string) {
    this.getWritable().__label = newLabel
    this.setTextContent(newLabel)
  }

  static importJSON(serializedNode: SerializedFileAttachmentNode): FileAttachmentNode {
    return $createFileAttachmentNode(serializedNode.unifiedID)
  }

  exportJSON(): SerializedFileAttachmentNode {
    return {
      ...super.exportJSON(),
      type: 'fileattachment',
      unifiedID: this.__unifiedID,
      label: this.__label,
    }
  }
}

export function $createFileAttachmentNode(
  unifiedID: string,
  label: string = 'Select a file'
): FileAttachmentNode {
  const node = new FileAttachmentNode(unifiedID, label).setMode('token')

  return node
}