Skip to content

[lexical] Feature: customElements judgment when destroyNode#6587

Closed
yaojiu19 wants to merge 1 commit intofacebook:mainfrom
yaojiu19:feature/destroy-customElements-child
Closed

[lexical] Feature: customElements judgment when destroyNode#6587
yaojiu19 wants to merge 1 commit intofacebook:mainfrom
yaojiu19:feature/destroy-customElements-child

Conversation

@yaojiu19
Copy link
Copy Markdown

@yaojiu19 yaojiu19 commented Sep 3, 2024

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
Copy link
Copy Markdown

vercel bot commented Sep 3, 2024

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

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Sep 3, 2024
@github-actions
Copy link
Copy Markdown

github-actions bot commented Sep 3, 2024

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
Copy link
Copy Markdown
Collaborator

etrepum commented Sep 3, 2024

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
Copy link
Copy Markdown
Author

yaojiu19 commented Sep 4, 2024

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

@yaojiu19
Copy link
Copy Markdown
Author

yaojiu19 commented Sep 4, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants