HTML/WYSIWYG Mode Toggle Doesn't Render HTML Correctly After Switching Back from HTML Mode

[prathmeshyelne]

I'm using Quill.js for a rich text editor, and I have implemented a feature to toggle between HTML Mode (view and edit raw HTML) and WYSIWYG Mode (rendered view). While switching to HTML Mode, the raw HTML is displayed correctly, but when switching back to WYSIWYG Mode, the content does not render correctly and is shown as raw HTML.

Expected Behavior:

When switching from HTML Mode back to WYSIWYG Mode, the raw HTML should be rendered as formatted content, and the editor should display the formatted version (as it would normally in WYSIWYG mode).

Current Behavior:

When switching back to WYSIWYG Mode, the raw HTML is not rendered properly. It stays as raw HTML text.
I am using dangerouslyPasteHTML() to insert the HTML content back into the editor, but it doesn't seem to render the content correctly.

Screen.Recording.1946-09-24.at.2.05.52.PM.mov

Steps to Reproduce:

Switch to HTML Mode by clicking the "HTML" button in the toolbar.
Edit the HTML content directly.
Switch back to WYSIWYG Mode.
The content should render as formatted HTML but instead remains as raw HTML.

Code Example:

Here’s a simplified version of the code I’m using to toggle between modes:

htmlButton.addEventListener('click', function () {
    isHtmlMode = !isHtmlMode;

    if (isHtmlMode) {
        // Switch to HTML mode
        const rawHtml = quillEditor2.root.innerHTML;
        quillEditor2.root.textContent = rawHtml; // Set raw HTML as plain text
        quillEditor2.root.classList.add('html-mode', 'language-markup');
        quillEditor2.root.setAttribute("data-lang", "html");
        htmlButton.classList.add('ql-active');
    } else {
        // Switch back to WYSIWYG mode
        const rawHtml = quillEditor2.root.textContent;
        quillEditor2.clipboard.dangerouslyPasteHTML(0, rawHtml); // Insert HTML
        quillEditor2.root.classList.remove('html-mode', 'language-markup');
        quillEditor2.root.removeAttribute("data-lang");
        htmlButton.classList.remove('ql-active');
    }
});

Environment:

Quill Version: Latest
Browser: Chrome
Operating System: macOS

Additional Information:
I've also tried using setContents with Delta conversion, but it didn’t resolve the issue either.
It appears that Quill is not rendering the HTML correctly when switching back from raw text to formatted view.