el-text-editor 0.0.87 → 0.0.89
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.
|
@@ -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;"> </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
|
-
|
|
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;"> </td>`;
|
|
1015
1087
|
}
|
|
1016
|
-
table +=
|
|
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,71 @@ 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 = ' ';
|
|
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 =
|
|
1212
|
-
cell.style.wordWrap =
|
|
1213
|
-
cell.style.wordBreak =
|
|
1214
|
-
cell.style.whiteSpace =
|
|
1310
|
+
cell.innerHTML = " ";
|
|
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
|
-
cell.style.borderBottom =
|
|
1315
|
+
cell.style.borderBottom = "1px solid #d3d3d3";
|
|
1316
|
+
// cell.style.borderBottom = `2px solid ${this.themeModeClrVerticalLineColorForTable()}`;
|
|
1317
|
+
// If it's the first row, make it a header cell
|
|
1318
|
+
if (i === 0) {
|
|
1319
|
+
cell.classList.add("header-cell");
|
|
1320
|
+
cell.style.fontWeight = "bold";
|
|
1321
|
+
cell.style.textAlign = "start";
|
|
1322
|
+
cell.style.pointerEvents = "none";
|
|
1323
|
+
cell.style.display = "table-cell";
|
|
1324
|
+
cell.style.position = "static";
|
|
1325
|
+
cell.style.borderTop = "2px solid black";
|
|
1326
|
+
// cell.innerText = `Header ${columnCount}`;
|
|
1327
|
+
// Apply the same background color as existing headers
|
|
1328
|
+
if (headerBgColor) {
|
|
1329
|
+
cell.style.backgroundColor = headerBgColor;
|
|
1330
|
+
}
|
|
1331
|
+
}
|
|
1217
1332
|
}
|
|
1218
1333
|
// Update existing rows' bottom border
|
|
1334
|
+
// for (let i = 0; i < this.selectedTable.rows.length; i++) {
|
|
1335
|
+
// this.selectedTable.rows[i].style.borderBottom =
|
|
1336
|
+
// this.themeModeClrVerticalLineForTable();
|
|
1337
|
+
// }
|
|
1219
1338
|
for (let i = 0; i < this.selectedTable.rows.length; i++) {
|
|
1220
|
-
this.selectedTable.rows[i].
|
|
1339
|
+
for (let j = 0; j < this.selectedTable.rows[i].cells.length; j++) {
|
|
1340
|
+
this.selectedTable.rows[i].cells[j].style.borderBottom = "1px solid #d3d3d3";
|
|
1341
|
+
}
|
|
1221
1342
|
}
|
|
1222
1343
|
}
|
|
1223
1344
|
}
|