lexical icon indicating copy to clipboard operation
lexical copied to clipboard

[lexical] Feature: customElements judgment when destroyNode

Open yaojiu19 opened this issue 6 months ago • 5 comments

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);
}

yaojiu19 avatar Sep 03 '24 06:09 yaojiu19