el-text-editor 0.0.92 → 0.0.94

package/fesm2020/el-text-editor.mjs

@@ -1734,13 +1734,11 @@ class ElTextEditorComponent {
     //   this.savedSelection = null;
     // }
     setTextColor(event) {
-        console.log("clicked");
         if (!this.savedSelection) {
             console.warn("No saved selection available!");
             return;
         }
         const color = event.target.value;
-        console.log("color", color);
         this.selectedTextColor = color;
         const selection = window.getSelection();
         if (!selection || selection.rangeCount === 0) {
@@ -1749,60 +1747,102 @@ class ElTextEditorComponent {
         }
         selection.removeAllRanges();
         selection.addRange(this.savedSelection);
-        const range = this.savedSelection;
-        const getParentElement = (node) => {
-            let currentNode = node;
-            if (currentNode && currentNode.nodeType === Node.TEXT_NODE) {
-                currentNode = currentNode.parentNode;
+        const range = this.savedSelection.cloneRange();
+        const wrapTextNode = (textNode, start, end) => {
+            const span = document.createElement("span");
+            span.style.color = color;
+            const selectedText = textNode.textContent.slice(start, end);
+            span.textContent = selectedText;
+            const beforeText = textNode.textContent.slice(0, start);
+            const afterText = textNode.textContent.slice(end);
+            const fragment = document.createDocumentFragment();
+            if (beforeText)
+                fragment.appendChild(document.createTextNode(beforeText));
+            fragment.appendChild(span);
+            if (afterText)
+                fragment.appendChild(document.createTextNode(afterText));
+            textNode.replaceWith(fragment);
+        };
+        const processNode = (node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                wrapTextNode(node, 0, (node.textContent || "").length);
             }
-            while (currentNode && currentNode instanceof HTMLElement) {
-                return currentNode;
+            else if (node.nodeType === Node.ELEMENT_NODE) {
+                const element = node;
+                if (["LI", "P", "DIV", "TABLE", "TD", "TH"].includes(element.tagName)) {
+                    element.style.color = color; // Apply directly for block and table elements
+                }
             }
-            return null;
         };
-        const parentElement = getParentElement(range.commonAncestorContainer) ||
-            getParentElement(range.startContainer) ||
-            getParentElement(range.endContainer);
-        if (!parentElement) {
-            console.error("No valid parent element found!");
-            return;
-        }
-        // **Handle Table Cell Case**
-        if (parentElement.tagName === "TD") {
-            parentElement.style.color = color; // Apply color directly to cell
-            return;
+        const startContainer = range.startContainer;
+        const endContainer = range.endContainer;
+        if (startContainer === endContainer &&
+            startContainer.nodeType === Node.TEXT_NODE) {
+            wrapTextNode(startContainer, range.startOffset, range.endOffset);
         }
-        // **Handle Normal Text Case**
-        const selectedText = selection.toString();
-        if (selectedText) {
+        else {
+            const treeWalker = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_TEXT, {
+                acceptNode: (node) => {
+                    return range.intersectsNode(node)
+                        ? NodeFilter.FILTER_ACCEPT
+                        : NodeFilter.FILTER_REJECT;
+                },
+            });
             const textNodes = [];
-            const walker = document.createTreeWalker(parentElement, NodeFilter.SHOW_TEXT, null);
             let node;
-            while ((node = walker.nextNode())) {
+            while ((node = treeWalker.nextNode())) {
                 textNodes.push(node);
             }
             for (const textNode of textNodes) {
-                const text = textNode.textContent || "";
-                const index = text.indexOf(selectedText);
-                if (index !== -1) {
-                    const span = document.createElement("span");
-                    span.style.color = color;
-                    span.textContent = selectedText;
-                    const beforeText = text.slice(0, index);
-                    const afterText = text.slice(index + selectedText.length);
-                    const fragment = document.createDocumentFragment();
-                    if (beforeText)
-                        fragment.appendChild(document.createTextNode(beforeText));
-                    fragment.appendChild(span);
-                    if (afterText)
-                        fragment.appendChild(document.createTextNode(afterText));
-                    textNode.replaceWith(fragment);
-                    break; // Apply only once per selection
+                if (textNode === startContainer) {
+                    wrapTextNode(textNode, range.startOffset, textNode.textContent.length);
+                }
+                else if (textNode === endContainer) {
+                    wrapTextNode(textNode, 0, range.endOffset);
+                }
+                else {
+                    wrapTextNode(textNode, 0, textNode.textContent.length);
                 }
             }
         }
         this.savedSelection = null;
     }
+    // Helper method to recursively apply color to all text nodes in a fragment
+    applyColorToContents(node, color) {
+        if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+            const span = document.createElement("span");
+            span.style.color = color;
+            span.textContent = node.textContent;
+            if (node.parentNode) {
+                node.parentNode.replaceChild(span, node);
+            }
+            return;
+        }
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            if (node instanceof HTMLLIElement) {
+                const childNodes = Array.from(node.childNodes);
+                childNodes.forEach((child) => {
+                    if (child.nodeType === Node.TEXT_NODE && child.textContent?.trim()) {
+                        const span = document.createElement("span");
+                        span.style.color = color;
+                        span.textContent = child.textContent;
+                        child.replaceWith(span);
+                    }
+                    else if (child.nodeType === Node.ELEMENT_NODE) {
+                        this.applyColorToContents(child, color);
+                    }
+                });
+            }
+            else {
+                const childNodes = Array.from(node.childNodes);
+                childNodes.forEach((child) => this.applyColorToContents(child, color));
+            }
+        }
+        if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+            const childNodes = Array.from(node.childNodes);
+            childNodes.forEach((child) => this.applyColorToContents(child, color));
+        }
+    }
     setBackgroundColor(event) {
         if (this.savedSelection) {
             const color = event.target.value;