el-text-editor 0.0.87 → 0.0.88

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/esm2020/lib/el-text-editor.component.mjs +125 -10
  2. package/fesm2015/el-text-editor.mjs +124 -9
  3. package/fesm2015/el-text-editor.mjs.map +1 -1
  4. package/fesm2020/el-text-editor.mjs +124 -9
  5. package/fesm2020/el-text-editor.mjs.map +1 -1
  6. package/package.json +1 -1
package/fesm2020/el-text-editor.mjs CHANGED
@@ -980,13 +980,84 @@ class ElTextEditorComponent {
980
980
  // this.tableAdded = true;
981
981
  // this.checkTableSelection();
982
982
  // }
983
+ // addTable() {
984
+ // const tableWidth = 825;
985
+ // const cols = 3;
986
+ // const cellMinWidth = tableWidth / cols;
987
+ // let table = `<br /><table id="customTable" style="width: ${tableWidth}px; border-collapse: collapse;">`;
988
+ // table += `<tbody>`;
989
+ // table += `<tr id="tableHeaderRow" style="border-bottom: ${this.themeModeClrVerticalLineForTable()};" (click)="checkTableSelection()">`;
990
+ // for (let j = 0; j < cols; j++) {
991
+ // table += `<td class="header-cell"
992
+ // style="border-top: 2px solid black;
993
+ // font-weight: bold;
994
+ // text-align: start;
995
+ // word-wrap: break-word;
996
+ // word-break: break-all;
997
+ // white-space: normal;
998
+ // min-width: ${cellMinWidth}px;
999
+ // background-color: inherit !important;
1000
+ // // pointer-events: none !important;
1001
+ // display: table-cell !important;
1002
+ // position: static !important;
1003
+ // height:28px;"></td>`;
1004
+ // }
1005
+ // table += `</tr>`;
1006
+ // for (let i = 0; i < 3; i++) {
1007
+ // table += `<tr style="border-bottom: ${this.themeModeClrVerticalLineForTable()}">`;
1008
+ // for (let j = 0; j < cols; j++) {
1009
+ // table += `<td style="word-wrap: break-word;
1010
+ // word-break: break-all;
1011
+ // white-space: normal;
1012
+ // min-width: ${cellMinWidth}px;
1013
+ // display: table-cell !important;
1014
+ // position: static !important;">&nbsp;</td>`;
1015
+ // }
1016
+ // table += "</tr>";
1017
+ // }
1018
+ // table += `</tbody></table><br/>`;
1019
+ // const editor = document.getElementById("editor");
1020
+ // if (editor) {
1021
+ // editor.focus();
1022
+ // document.execCommand("insertHTML", false, table);
1023
+ // }
1024
+ // this.tableAdded = true;
1025
+ // this.checkTableSelection();
1026
+ // // Add styles to prevent table structure breaking
1027
+ // const style = document.createElement("style");
1028
+ // style.innerHTML = `
1029
+ // #customTable {
1030
+ // table-layout: fixed !important;
1031
+ // border-collapse: collapse !important;
1032
+ // }
1033
+ // #customTable tr {
1034
+ // display: table-row !important;
1035
+ // }
1036
+ // #customTable td {
1037
+ // display: table-cell !important;
1038
+ // position: static !important;
1039
+ // }
1040
+ // #customTable .header-cell {
1041
+ // position: static !important;
1042
+ // }
1043
+ // #customTable .header-cell > span {
1044
+ // display: inline !important;
1045
+ // position: static !important;
1046
+ // }
1047
+ // #customTable .header-cell:hover {
1048
+ // cursor: default !important;
1049
+ // }
1050
+ // `;
1051
+ // document.head.appendChild(style);
1052
+ // }
983
1053
  addTable() {
984
1054
  const tableWidth = 825;
985
1055
  const cols = 3;
986
1056
  const cellMinWidth = tableWidth / cols;
987
1057
  let table = `<br /><table id="customTable" style="width: ${tableWidth}px; border-collapse: collapse;">`;
988
1058
  table += `<tbody>`;
989
- table += `<tr id="tableHeaderRow" style="border-bottom: ${this.themeModeClrVerticalLineForTable()};" (click)="checkTableSelection()">`;
1059
+ // Table Header Row
1060
+ table += `<tr id="tableHeaderRow" style="border-bottom: ${this.themeModeClrVerticalLineForTable()};" onclick="checkTableSelection()">`;
990
1061
  for (let j = 0; j < cols; j++) {
991
1062
  table += `<td class="header-cell"
992
1063
  style="border-top: 2px solid black;
@@ -997,12 +1068,13 @@ class ElTextEditorComponent {
997
1068
  white-space: normal;
998
1069
  min-width: ${cellMinWidth}px;
999
1070
  background-color: inherit !important;
1000
- // pointer-events: none !important;
1001
1071
  display: table-cell !important;
1002
1072
  position: static !important;
1003
- height:28px;"></td>`;
1073
+ height:28px;"></td>`;
1004
1074
  }
1075
+ // Properly closing the header row
1005
1076
  table += `</tr>`;
1077
+ // Data Rows
1006
1078
  for (let i = 0; i < 3; i++) {
1007
1079
  table += `<tr style="border-bottom: ${this.themeModeClrVerticalLineForTable()}">`;
1008
1080
  for (let j = 0; j < cols; j++) {
@@ -1013,9 +1085,10 @@ height:28px;"></td>`;
1013
1085
  display: table-cell !important;
1014
1086
  position: static !important;">&nbsp;</td>`;
1015
1087
  }
1016
- table += "</tr>";
1088
+ table += `</tr>`;
1017
1089
  }
1018
1090
  table += `</tbody></table><br/>`;
1091
+ // Inserting into the editor
1019
1092
  const editor = document.getElementById("editor");
1020
1093
  if (editor) {
1021
1094
  editor.focus();
@@ -1201,23 +1274,65 @@ height:28px;"></td>`;
1201
1274
  // }
1202
1275
  // }
1203
1276
  // }
1277
+ // addColumn() {
1278
+ // if (this.selectedTable) {
1279
+ // const columnCount = this.selectedTable.rows[0].cells.length + 1; // New column count
1280
+ // const tableWidth = this.selectedTable.offsetWidth;
1281
+ // const minWidth = tableWidth / columnCount;
1282
+ // for (let i = 0; i < this.selectedTable.rows.length; i++) {
1283
+ // let cell = this.selectedTable.rows[i].insertCell(-1);
1284
+ // cell.innerHTML = '&nbsp;';
1285
+ // cell.style.wordWrap = 'break-word';
1286
+ // cell.style.wordBreak = 'break-all';
1287
+ // cell.style.whiteSpace = 'normal';
1288
+ // cell.style.minWidth = `${minWidth}px`;
1289
+ // cell.style.borderBottom = `2px solid ${this.themeModeClrVerticalLineColorForTable()}`
1290
+ // }
1291
+ // // Update existing rows' bottom border
1292
+ // for (let i = 0; i < this.selectedTable.rows.length; i++) {
1293
+ // this.selectedTable.rows[i].style.borderBottom = this.themeModeClrVerticalLineForTable();
1294
+ // }
1295
+ // }
1296
+ // }
1204
1297
  addColumn() {
1205
1298
  if (this.selectedTable) {
1206
1299
  const columnCount = this.selectedTable.rows[0].cells.length + 1; // New column count
1207
1300
  const tableWidth = this.selectedTable.offsetWidth;
1208
1301
  const minWidth = tableWidth / columnCount;
1302
+ // Get the current header background color if any
1303
+ const firstHeaderCell = this.selectedTable.rows[0]
1304
+ .cells[0];
1305
+ const headerBgColor = firstHeaderCell
1306
+ ? firstHeaderCell.style.backgroundColor
1307
+ : "";
1209
1308
  for (let i = 0; i < this.selectedTable.rows.length; i++) {
1210
1309
  let cell = this.selectedTable.rows[i].insertCell(-1);
1211
- cell.innerHTML = '&nbsp;';
1212
- cell.style.wordWrap = 'break-word';
1213
- cell.style.wordBreak = 'break-all';
1214
- cell.style.whiteSpace = 'normal';
1310
+ cell.innerHTML = "&nbsp;";
1311
+ cell.style.wordWrap = "break-word";
1312
+ cell.style.wordBreak = "break-all";
1313
+ cell.style.whiteSpace = "normal";
1215
1314
  cell.style.minWidth = `${minWidth}px`;
1216
1315
  cell.style.borderBottom = `2px solid ${this.themeModeClrVerticalLineColorForTable()}`;
1316
+ // If it's the first row, make it a header cell
1317
+ if (i === 0) {
1318
+ cell.classList.add("header-cell");
1319
+ cell.style.fontWeight = "bold";
1320
+ cell.style.textAlign = "start";
1321
+ cell.style.pointerEvents = "none";
1322
+ cell.style.display = "table-cell";
1323
+ cell.style.position = "static";
1324
+ cell.style.borderTop = "2px solid black";
1325
+ // cell.innerText = `Header ${columnCount}`;
1326
+ // Apply the same background color as existing headers
1327
+ if (headerBgColor) {
1328
+ cell.style.backgroundColor = headerBgColor;
1329
+ }
1330
+ }
1217
1331
  }
1218
1332
  // Update existing rows' bottom border
1219
1333
  for (let i = 0; i < this.selectedTable.rows.length; i++) {
1220
- this.selectedTable.rows[i].style.borderBottom = this.themeModeClrVerticalLineForTable();
1334
+ this.selectedTable.rows[i].style.borderBottom =
1335
+ this.themeModeClrVerticalLineForTable();
1221
1336
  }
1222
1337
  }
1223
1338
  }