lexical
lexical copied to clipboard
[lexical] Feature: customElements judgment when destroyNode
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);
}