fix: bold italic type of tags break inside live preview and leaks internal attributes

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -1520,6 +1520,7 @@ function RemoteFunctions(config) {
 
         // Save the original content for potential cancellation
         element._originalContent = element.innerHTML;
+        element._originalTextContent = element.textContent;
 
         // Add event listeners for editing
         function onBlur() {
@@ -1549,6 +1550,53 @@ function RemoteFunctions(config) {
         };
     }
 
+    // this function is to remove the properties from elements before getting the innerHTML
+    // then add all the properties back to the elements
+    function cleanupElementProperties(element) {
+        // a temporary container to hold a clean copy
+        const tempContainer = document.createElement('div');
+        tempContainer.innerHTML = element.innerHTML;
+
+        // get all elements in the temporary container
+        const allElements = tempContainer.querySelectorAll('*');
+
+        // Store original attributes for later restoration
+        const originalAttributes = new Map();
+        const elementsInOriginal = element.querySelectorAll('*');
+
+        // Save original attributes
+        elementsInOriginal.forEach((el, index) => {
+            const attrs = {};
+            for (let i = 0; i < el.attributes.length; i++) {
+                const attr = el.attributes[i];
+                attrs[attr.name] = attr.value;
+            }
+            originalAttributes.set(index, attrs);
+        });
+
+        // Remove all attributes from elements in the temp container
+        allElements.forEach(el => {
+            while (el.attributes.length > 0) {
+                el.removeAttribute(el.attributes[0].name);
+            }
+        });
+
+        // Get the clean HTML content
+        const cleanContent = tempContainer.innerHTML;
+
+        // Restore original attributes to the actual elements
+        elementsInOriginal.forEach((el, index) => {
+            if (originalAttributes.has(index)) {
+                const attrs = originalAttributes.get(index);
+                for (const [name, value] of Object.entries(attrs)) {
+                    el.setAttribute(name, value);
+                }
+            }
+        });
+
+        return cleanContent;
+    }
+
     // Function to finish editing and apply changes
     function finishEditing(element) {
         if (!element || !element.hasAttribute("contenteditable")) {
@@ -1565,8 +1613,8 @@ function RemoteFunctions(config) {
             delete element._editListeners;
         }
 
-        // Get the new content
-        const newContent = element.innerHTML;
+        // Get the new content after cleaning up unwanted properties
+        const newContent = cleanupElementProperties(element);
 
         // If content has changed, send the edit to the editor
         if (newContent !== element._originalContent && element.hasAttribute("data-brackets-id")) {
@@ -1575,6 +1623,7 @@ function RemoteFunctions(config) {
                 livePreviewEditEnabled: true,
                 element: element,
                 oldContent: element._originalContent,
+                oldTextContent: element._originalTextContent,
                 newContent: newContent,
                 tagId: Number(tagId),
                 livePreviewTextEdit: true
@@ -1583,6 +1632,7 @@ function RemoteFunctions(config) {
 
         // Clean up
         delete element._originalContent;
+        delete element._originalTextContent;
     }
 
     // init

src/LiveDevelopment/livePreviewEdit.js

@@ -32,14 +32,21 @@ define(function (require, exports, module) {
 
         // this is the actual source code for the element that we need to duplicate
         const text = editor.getTextBetween(range.from, range.to);
+        // remove the <b>, <i> and <u> tags from the text,
+        // this is done because we split the text using the textContent and not the innerHTML
+        // and textContent doesn't have all these tags
+        const cleanedText = text.replace(/<\/?(b|i|u)>/gi, "");
+
         // split the text as we want to remove the old content from the source code
         // for ex: if we have <h1>hello</h1> then splitting from hello will give us [<h1>, </h1>]
-        const splittedText = text.split(message.oldContent);
-
-        // so now we just merge the whole thing back replacing the old content with the new one
-        const finalText = splittedText[0] + message.newContent + splittedText[1];
+        const splittedText = cleanedText.split(message.oldTextContent);
 
-        editor.replaceRange(finalText, range.from, range.to);
+        // make sure that the split was successful
+        if (splittedText.length === 2) {
+            // so now we just merge the whole thing back replacing the old text content with the new one
+            const finalText = splittedText[0] + message.newContent + splittedText[1];
+            editor.replaceRange(finalText, range.from, range.to);
+        }
     }
 
     /**