el-text-editor 0.0.30 → 0.0.32

package/fesm2015/el-text-editor.mjs

@@ -774,20 +774,41 @@ class ElTextEditorComponent {
             reader.readAsDataURL(file);
         }
     }
+    // addTable() {
+    //   const tableWidth = 825; // Table width in pixels
+    //   const cols = 3; // Number of columns
+    //   const cellMinWidth = tableWidth / cols; // Calculate minimum width for each cell
+    //   let table = `<br /><table style="width: ${tableWidth}px;">`;
+    //   for (let i = 0; i < 3; i++) { // Number of rows
+    //     table += '<tr >';
+    //     for (let j = 0; j < cols; j++) {
+    //       table += `<td style=" word-wrap: break-word; word-break: break-all; white-space: normal; min-width: ${cellMinWidth}px;">&nbsp;</td>`;
+    //     }
+    //     table += '</tr>';
+    //   }
+    //     table += '</table><br/ >';
+    //     // document.execCommand('insertHTML', false, table);
+    //     const editor = document.getElementById('editor');
+    //   if (editor) {
+    //     editor.focus();
+    //     document.execCommand('insertHTML', false, table);
+    //   }
+    //   this.tableAdded = true;
+    //   this.checkTableSelection();
+    // }
     addTable() {
         const tableWidth = 825; // Table width in pixels
         const cols = 3; // Number of columns
         const cellMinWidth = tableWidth / cols; // Calculate minimum width for each cell
         let table = `<br /><table style="width: ${tableWidth}px;">`;
         for (let i = 0; i < 3; i++) { // Number of rows
-            table += '<tr class="table-border-bottom table-border-top vertical-align-middle">';
+            table += `<tr style="border-bottom: ${this.themeModeClrVerticalLineForTable()}">`; // Add border-bottom to the row
             for (let j = 0; j < cols; j++) {
-                table += `<td class=" table-border-bottom" style=" word-wrap: break-word; word-break: break-all; white-space: normal; min-width: ${cellMinWidth}px;">&nbsp;</td>`;
+                table += `<td style="word-wrap: break-word; word-break: break-all; white-space: normal; min-width: ${cellMinWidth}px;">&nbsp;</td>`;
             }
             table += '</tr>';
         }
-        table += '</table><br/ >';
-        // document.execCommand('insertHTML', false, table);
+        table += '</table><br/>';
         const editor = document.getElementById('editor');
         if (editor) {
             editor.focus();
@@ -835,13 +856,23 @@ class ElTextEditorComponent {
     onBlur() {
         this.checkPlaceholder();
     }
+    // addRow() {
+    //   if (this.selectedTable) {
+    //     let row = this.selectedTable.insertRow();
+    //     for (let i = 0; i < this.selectedTable.rows[0].cells.length; i++) {
+    //       let cell = row.insertCell(i);
+    //       cell.innerHTML = '&nbsp;';
+    //       cell.style.border = '1px solid black';
+    //     }
+    //   }
+    // }
     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;';
-                cell.style.border = '1px solid black';
             }
         }
     }
@@ -891,6 +922,28 @@ class ElTextEditorComponent {
     //     }
     //   }
     // }
+    //   addColumn() {
+    //   if (this.selectedTable) {
+    //     const columnCount = this.selectedTable.rows[0].cells.length + 1; // New column count
+    //     const tableWidth = this.selectedTable.offsetWidth;
+    //     const minWidth = tableWidth / columnCount;
+    //     for (let i = 0; i < this.selectedTable.rows.length; i++) {
+    //       let cell = this.selectedTable.rows[i].insertCell(-1);
+    //       cell.innerHTML = '&nbsp;';
+    //       cell.style.border = '1px solid black';
+    //       cell.style.minWidth = `${minWidth}px`;
+    //       cell.style.wordWrap = 'break-word';
+    //       cell.style.wordBreak = 'break-all';
+    //       cell.style.whiteSpace = 'normal';
+    //     }
+    //     // Update existing cells' minWidth
+    //     for (let i = 0; i < this.selectedTable.rows.length; i++) {
+    //       for (let j = 0; j < this.selectedTable.rows[i].cells.length; j++) {
+    //         this.selectedTable.rows[i].cells[j].style.minWidth = `${minWidth}px`;
+    //       }
+    //     }
+    //   }
+    // }
     addColumn() {
         if (this.selectedTable) {
             const columnCount = this.selectedTable.rows[0].cells.length + 1; // New column count
@@ -899,17 +952,14 @@ class ElTextEditorComponent {
             for (let i = 0; i < this.selectedTable.rows.length; i++) {
                 let cell = this.selectedTable.rows[i].insertCell(-1);
                 cell.innerHTML = '&nbsp;';
-                cell.style.border = '1px solid black';
-                cell.style.minWidth = `${minWidth}px`;
                 cell.style.wordWrap = 'break-word';
                 cell.style.wordBreak = 'break-all';
                 cell.style.whiteSpace = 'normal';
+                cell.style.minWidth = `${minWidth}px`;
             }
-            // Update existing cells' minWidth
+            // Update existing rows' bottom border
             for (let i = 0; i < this.selectedTable.rows.length; i++) {
-                for (let j = 0; j < this.selectedTable.rows[i].cells.length; j++) {
-                    this.selectedTable.rows[i].cells[j].style.minWidth = `${minWidth}px`;
-                }
+                this.selectedTable.rows[i].style.borderBottom = this.themeModeClrVerticalLineForTable();
             }
         }
     }
@@ -930,6 +980,15 @@ class ElTextEditorComponent {
             }
         }
     }
+    themeModeClrVerticalLineForTable() {
+        const clrMode = document.body.getAttribute('data-layout-color');
+        if (clrMode == 'dark') {
+            return '2px solid #414141 !important';
+        }
+        else {
+            return '2px solid #5F5F5F !important';
+        }
+    }
     adjustTableWidth(event) {
         if (this.selectedTable) {
             this.selectedTable.style.width = event.target.value + 'px';