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