Re-attaching the web component to DOM breaks editor.

Open
#5 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript
Domain
frontend

Research direction

Start with the linked CodePen reproduction and repeat the remove-and-append steps in the browser. Trace the web component lifecycle around DOM removal and reattachment, then verify that formatted content is preserved and remains editable after the element is reattached.

Written by the indexing model from the issue text.

Description

Steps to reproduce:

  1. Go to https://codepen.io/tinymce/pen/oNLbGwP
  2. Type some text and apply formatting
  3. Select tinymce-editor in the element inspector
  4. Store it in global variable, then remove and add back:
const ed = $0;
document.body.removeChild($0);
document.body.appendChild(ed);

Now the editor is back but the content is not editable and old content is lost.

Dominant language
TypeScript
Stars
21
Forks
8
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from tinymce/tinymce-webcomponent

All issues in tinymce/tinymce-webcomponent

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.