[lexical] Feature: customElements judgment when destroyNode

[yaojiu19]

Description

I define customElement, it include multiple elements，like:

class FTable extends HTMLElement {
  sectionEle: HTMLDivElement
  tableEle: HTMLTableElement
  tableBodyEle: HTMLTableSectionElement
  constructor() {
    super()
    this.sectionEle = document.createElement('div')
    this.sectionEle.className = 'c-editor-doc-table-section'
    this.tableEle = document.createElement('table')
    this.tableEle.className = 'c-editor-doc-table'
    this.tableBodyEle = document.createElement('tbody')
    this.tableEle.append(this.tableBodyEle)
    this.sectionEle.append(this.tableEle)
  }
  connectedCallback() {
    this.append(this.sectionEle)
  }
  appendChild<T extends Node>(node: T): T {
    this.tableBodyEle.appendChild(node)
    return node
  }
  insertBefore<T extends Node>(node: T, child: Node | null): T {
    this.tableBodyEle.insertBefore(node, child === this.sectionEle ? this.tableBodyEle.childNodes[0] : child)
    return node
  }
  removeChild<T extends Node>(child: T): T {
    this.tableBodyEle.removeChild(child)
    return child
  }
  get children() {
    return this.tableBodyEle.children
  }
}

window.customElements.define('f-table', FTable)

create node, like:

class TableNode extends ElementNode {
  ...
  createDOM(config: EditorConfig): HTMLElement {
    const element = document.createElement('f-table')
    return element
  }
  ...
}

now, cant destroyNode TableNode's children Element. because TableNode's children Element's parentNode not equal to the customElement

if (dom.parentNode === parentDOM) {
  parentDOM.removeChild(dom);
}

Test plan

Before

if (dom.parentNode === parentDOM) { parentDOM.removeChild(dom); }

After

modification the customElement's children and add isCustomElementChild judgment

if (dom.parentNode === parentDOM || isCustomElementChild(dom, parentDOM)) {
  parentDOM.removeChild(dom);
}

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 3, 2024 6:45am
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 3, 2024 6:45am

[github-actions[bot]]

size-limit report 📦

Path	Size
lexical - cjs	29.38 KB (0%)
lexical - esm	29.22 KB (0%)
@lexical/rich-text - cjs	37.87 KB (0%)
@lexical/rich-text - esm	31.08 KB (0%)
@lexical/plain-text - cjs	36.45 KB (0%)
@lexical/plain-text - esm	28.44 KB (0%)
@lexical/react - cjs	39.64 KB (0%)
@lexical/react - esm	32.52 KB (0%)

[etrepum]

It's not supported to have DOM nodes in the editor that are unmanaged by Lexical except in a DecoratorNode. If this feature were to be considered it would need tests and documentation, it's likely that this has other problems that you haven't noticed yet.

[yaojiu19]

In my project, By controlling the node importDOM and customElement event rewrite, can ensure correct parsing and rendering

[yaojiu19]

if the node DOM not's customElement, dom.parentNode === parentDOM and isCustomElementChild(dom, parentDOM) will have the same effect. it will not affect the original logic