el-text-editor 0.0.78 → 0.0.80

package/fesm2020/el-text-editor.mjs

@@ -1013,13 +1013,25 @@ class ElTextEditorComponent {
     addRow() {
         if (this.selectedTable) {
             let row = this.selectedTable.insertRow();
-            row.style.borderBottom = this.themeModeClrVerticalLineForTable(); // Add bottom border to the row
+            // Loop through the columns of the first row to determine the number of cells
             for (let i = 0; i < this.selectedTable.rows[0].cells.length; i++) {
                 let cell = row.insertCell(i);
                 cell.innerHTML = '&nbsp;';
+                // Apply bottom border explicitly
+                cell.style.borderBottom = `2px solid ${this.themeModeClrVerticalLineColorForTable()}`; // You can replace 'black' with your theme color
             }
         }
     }
+    //   addRow() {
+    //   if (this.selectedTable) {
+    //     let row = this.selectedTable.insertRow();
+    //     row.style.borderBottom = this.themeModeClrVerticalLineForTable(); // Add bottom border to the row
+    //     for (let i = 0; i < this.selectedTable.rows[0].cells.length; i++) {
+    //       let cell = row.insertCell(i);
+    //       cell.innerHTML = '&nbsp;';
+    //     }
+    //   }
+    // }
     // deleteRow() {
     //   if (this.selectedTable) {
     //     this.selectedTable.deleteRow(-1);
@@ -1099,6 +1111,7 @@ class ElTextEditorComponent {
                 cell.style.wordBreak = 'break-all';
                 cell.style.whiteSpace = 'normal';
                 cell.style.minWidth = `${minWidth}px`;
+                cell.style.borderBottom = `2px solid ${this.themeModeClrVerticalLineColorForTable()}`;
             }
             // Update existing rows' bottom border
             for (let i = 0; i < this.selectedTable.rows.length; i++) {
@@ -1131,6 +1144,15 @@ class ElTextEditorComponent {
             return '2px solid #5F5F5F !important';
         }
     }
+    themeModeClrVerticalLineColorForTable() {
+        const clrMode = document.body.getAttribute('data-layout-color');
+        if (clrMode == 'dark') {
+            return '#414141';
+        }
+        else {
+            return '#5F5F5F';
+        }
+    }
     adjustTableWidth(event) {
         if (this.selectedTable) {
             this.selectedTable.style.width = event.target.value + 'px';
@@ -1175,24 +1197,58 @@ class ElTextEditorComponent {
             inputElement.click();
         }
     }
+    // setTextColor(event: any) {
+    //   if (this.savedSelection) {
+    //     const color = event.target.value;
+    //     this.selectedTextColor = color;
+    //     // Restore the saved selection
+    //     const selection = window.getSelection();
+    //     if (selection) {
+    //       selection.removeAllRanges();
+    //       selection.addRange(this.savedSelection);
+    //       // Apply the color using a span
+    //       const range = this.savedSelection;
+    //       const span = document.createElement('span');
+    //       span.style.color = color;
+    //       span.textContent = range.toString();
+    //       // Replace the selected text with the styled span
+    //       range.deleteContents();
+    //       range.insertNode(span);
+    //       // Clear the saved selection
+    //       this.savedSelection = null;
+    //     }
+    //   }
+    // }
     setTextColor(event) {
         if (this.savedSelection) {
             const color = event.target.value;
             this.selectedTextColor = color;
             // Restore the saved selection
             const selection = window.getSelection();
-            if (selection) {
-                selection.removeAllRanges();
-                selection.addRange(this.savedSelection);
-                // Apply the color using a span
+            if (selection && selection.rangeCount > 0) {
                 const range = this.savedSelection;
-                const span = document.createElement('span');
-                span.style.color = color;
-                span.textContent = range.toString();
-                // Replace the selected text with the styled span
+                selection.removeAllRanges();
+                selection.addRange(range);
+                // Get selected elements
+                const selectedContent = range.cloneContents();
+                const elements = Array.from(selectedContent.querySelectorAll("*")); // ✅ Explicitly cast to HTMLElement[]
+                // Apply color to each element without modifying structure
+                elements.forEach((el) => {
+                    el.style.color = color;
+                });
+                // Apply color to the top-level text nodes (without wrapping them)
+                Array.from(selectedContent.childNodes).forEach((node) => {
+                    if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== "") {
+                        const parent = range.commonAncestorContainer.parentElement;
+                        if (parent) {
+                            parent.style.color = color;
+                        }
+                    }
+                });
+                // Replace selected content
                 range.deleteContents();
-                range.insertNode(span);
-                // Clear the saved selection
+                range.insertNode(selectedContent);
+                // Clear saved selection
                 this.savedSelection = null;
             }
         }