el-text-editor 0.0.88 → 0.0.90
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.
|
@@ -1312,7 +1312,8 @@ class ElTextEditorComponent {
|
|
|
1312
1312
|
cell.style.wordBreak = "break-all";
|
|
1313
1313
|
cell.style.whiteSpace = "normal";
|
|
1314
1314
|
cell.style.minWidth = `${minWidth}px`;
|
|
1315
|
-
cell.style.borderBottom =
|
|
1315
|
+
cell.style.borderBottom = "1px solid #d3d3d3";
|
|
1316
|
+
// cell.style.borderBottom = `2px solid ${this.themeModeClrVerticalLineColorForTable()}`;
|
|
1316
1317
|
// If it's the first row, make it a header cell
|
|
1317
1318
|
if (i === 0) {
|
|
1318
1319
|
cell.classList.add("header-cell");
|
|
@@ -1330,9 +1331,14 @@ class ElTextEditorComponent {
|
|
|
1330
1331
|
}
|
|
1331
1332
|
}
|
|
1332
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
|
+
// }
|
|
1333
1338
|
for (let i = 0; i < this.selectedTable.rows.length; i++) {
|
|
1334
|
-
this.selectedTable.rows[i].
|
|
1335
|
-
this.
|
|
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
|
+
}
|
|
1336
1342
|
}
|
|
1337
1343
|
}
|
|
1338
1344
|
}
|
|
@@ -1470,13 +1476,91 @@ class ElTextEditorComponent {
|
|
|
1470
1476
|
// }
|
|
1471
1477
|
// }
|
|
1472
1478
|
// }
|
|
1479
|
+
// setTextColor(event: any) {
|
|
1480
|
+
// console.log("Clicked setTextColor");
|
|
1481
|
+
// if (!this.savedSelection) {
|
|
1482
|
+
// console.warn("No saved selection available!");
|
|
1483
|
+
// return;
|
|
1484
|
+
// }
|
|
1485
|
+
// const color = event.target.value;
|
|
1486
|
+
// this.selectedTextColor = color;
|
|
1487
|
+
// const selection = window.getSelection();
|
|
1488
|
+
// if (!selection || selection.rangeCount === 0) {
|
|
1489
|
+
// console.error("No valid selection found!");
|
|
1490
|
+
// return;
|
|
1491
|
+
// }
|
|
1492
|
+
// selection.removeAllRanges();
|
|
1493
|
+
// selection.addRange(this.savedSelection);
|
|
1494
|
+
// const range = this.savedSelection;
|
|
1495
|
+
// const getTableCell = (node: Node | null): HTMLElement | null => {
|
|
1496
|
+
// let currentNode = node;
|
|
1497
|
+
// if (currentNode && currentNode.nodeType === Node.TEXT_NODE) {
|
|
1498
|
+
// currentNode = currentNode.parentNode;
|
|
1499
|
+
// }
|
|
1500
|
+
// while (currentNode && currentNode instanceof HTMLElement) {
|
|
1501
|
+
// if (currentNode.tagName === "TD" || currentNode.tagName === "TH") {
|
|
1502
|
+
// return currentNode;
|
|
1503
|
+
// }
|
|
1504
|
+
// currentNode = currentNode.parentElement;
|
|
1505
|
+
// }
|
|
1506
|
+
// return null;
|
|
1507
|
+
// };
|
|
1508
|
+
// const tableCell =
|
|
1509
|
+
// getTableCell(range.commonAncestorContainer) ||
|
|
1510
|
+
// getTableCell(range.startContainer) ||
|
|
1511
|
+
// getTableCell(range.endContainer);
|
|
1512
|
+
// if (tableCell) {
|
|
1513
|
+
// console.log(`Processing ${tableCell.tagName} element`);
|
|
1514
|
+
// const selectedText = selection.toString();
|
|
1515
|
+
// if (selectedText) {
|
|
1516
|
+
// console.log(`Selected text in ${tableCell.tagName}:`, selectedText);
|
|
1517
|
+
// const textNodes: Text[] = [];
|
|
1518
|
+
// const walker = document.createTreeWalker(
|
|
1519
|
+
// tableCell,
|
|
1520
|
+
// NodeFilter.SHOW_TEXT,
|
|
1521
|
+
// null
|
|
1522
|
+
// );
|
|
1523
|
+
// let node: Text | null;
|
|
1524
|
+
// while ((node = walker.nextNode() as Text | null)) {
|
|
1525
|
+
// textNodes.push(node);
|
|
1526
|
+
// }
|
|
1527
|
+
// for (const textNode of textNodes) {
|
|
1528
|
+
// const text = textNode.textContent || "";
|
|
1529
|
+
// const index = text.indexOf(selectedText);
|
|
1530
|
+
// if (index !== -1) {
|
|
1531
|
+
// console.log(
|
|
1532
|
+
// `Found selected text in ${tableCell.tagName} text node`
|
|
1533
|
+
// );
|
|
1534
|
+
// const span = document.createElement("span");
|
|
1535
|
+
// span.style.color = color;
|
|
1536
|
+
// span.textContent = selectedText;
|
|
1537
|
+
// const beforeText = text.slice(0, index);
|
|
1538
|
+
// const afterText = text.slice(index + selectedText.length);
|
|
1539
|
+
// const fragment = document.createDocumentFragment();
|
|
1540
|
+
// if (beforeText)
|
|
1541
|
+
// fragment.appendChild(document.createTextNode(beforeText));
|
|
1542
|
+
// fragment.appendChild(span);
|
|
1543
|
+
// if (afterText)
|
|
1544
|
+
// fragment.appendChild(document.createTextNode(afterText));
|
|
1545
|
+
// textNode.replaceWith(fragment);
|
|
1546
|
+
// break; // Apply only once per selection
|
|
1547
|
+
// }
|
|
1548
|
+
// }
|
|
1549
|
+
// }
|
|
1550
|
+
// } else {
|
|
1551
|
+
// console.log("No TH or TD element found in selection");
|
|
1552
|
+
// return;
|
|
1553
|
+
// }
|
|
1554
|
+
// this.savedSelection = null;
|
|
1555
|
+
// }
|
|
1473
1556
|
setTextColor(event) {
|
|
1474
|
-
console.log("
|
|
1557
|
+
console.log("clicked");
|
|
1475
1558
|
if (!this.savedSelection) {
|
|
1476
1559
|
console.warn("No saved selection available!");
|
|
1477
1560
|
return;
|
|
1478
1561
|
}
|
|
1479
1562
|
const color = event.target.value;
|
|
1563
|
+
console.log("color", color);
|
|
1480
1564
|
this.selectedTextColor = color;
|
|
1481
1565
|
const selection = window.getSelection();
|
|
1482
1566
|
if (!selection || selection.rangeCount === 0) {
|
|
@@ -1486,59 +1570,57 @@ class ElTextEditorComponent {
|
|
|
1486
1570
|
selection.removeAllRanges();
|
|
1487
1571
|
selection.addRange(this.savedSelection);
|
|
1488
1572
|
const range = this.savedSelection;
|
|
1489
|
-
const
|
|
1573
|
+
const getParentElement = (node) => {
|
|
1490
1574
|
let currentNode = node;
|
|
1491
1575
|
if (currentNode && currentNode.nodeType === Node.TEXT_NODE) {
|
|
1492
1576
|
currentNode = currentNode.parentNode;
|
|
1493
1577
|
}
|
|
1494
1578
|
while (currentNode && currentNode instanceof HTMLElement) {
|
|
1495
|
-
|
|
1496
|
-
return currentNode;
|
|
1497
|
-
}
|
|
1498
|
-
currentNode = currentNode.parentElement;
|
|
1579
|
+
return currentNode;
|
|
1499
1580
|
}
|
|
1500
1581
|
return null;
|
|
1501
1582
|
};
|
|
1502
|
-
const
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
if (
|
|
1506
|
-
console.
|
|
1507
|
-
|
|
1508
|
-
if (selectedText) {
|
|
1509
|
-
console.log(`Selected text in ${tableCell.tagName}:`, selectedText);
|
|
1510
|
-
const textNodes = [];
|
|
1511
|
-
const walker = document.createTreeWalker(tableCell, NodeFilter.SHOW_TEXT, null);
|
|
1512
|
-
let node;
|
|
1513
|
-
while ((node = walker.nextNode())) {
|
|
1514
|
-
textNodes.push(node);
|
|
1515
|
-
}
|
|
1516
|
-
for (const textNode of textNodes) {
|
|
1517
|
-
const text = textNode.textContent || "";
|
|
1518
|
-
const index = text.indexOf(selectedText);
|
|
1519
|
-
if (index !== -1) {
|
|
1520
|
-
console.log(`Found selected text in ${tableCell.tagName} text node`);
|
|
1521
|
-
const span = document.createElement("span");
|
|
1522
|
-
span.style.color = color;
|
|
1523
|
-
span.textContent = selectedText;
|
|
1524
|
-
const beforeText = text.slice(0, index);
|
|
1525
|
-
const afterText = text.slice(index + selectedText.length);
|
|
1526
|
-
const fragment = document.createDocumentFragment();
|
|
1527
|
-
if (beforeText)
|
|
1528
|
-
fragment.appendChild(document.createTextNode(beforeText));
|
|
1529
|
-
fragment.appendChild(span);
|
|
1530
|
-
if (afterText)
|
|
1531
|
-
fragment.appendChild(document.createTextNode(afterText));
|
|
1532
|
-
textNode.replaceWith(fragment);
|
|
1533
|
-
break; // Apply only once per selection
|
|
1534
|
-
}
|
|
1535
|
-
}
|
|
1536
|
-
}
|
|
1583
|
+
const parentElement = getParentElement(range.commonAncestorContainer) ||
|
|
1584
|
+
getParentElement(range.startContainer) ||
|
|
1585
|
+
getParentElement(range.endContainer);
|
|
1586
|
+
if (!parentElement) {
|
|
1587
|
+
console.error("No valid parent element found!");
|
|
1588
|
+
return;
|
|
1537
1589
|
}
|
|
1538
|
-
|
|
1539
|
-
|
|
1590
|
+
// **Handle Table Cell Case**
|
|
1591
|
+
if (parentElement.tagName === "TD") {
|
|
1592
|
+
parentElement.style.color = color; // Apply color directly to cell
|
|
1540
1593
|
return;
|
|
1541
1594
|
}
|
|
1595
|
+
// **Handle Normal Text Case**
|
|
1596
|
+
const selectedText = selection.toString();
|
|
1597
|
+
if (selectedText) {
|
|
1598
|
+
const textNodes = [];
|
|
1599
|
+
const walker = document.createTreeWalker(parentElement, NodeFilter.SHOW_TEXT, null);
|
|
1600
|
+
let node;
|
|
1601
|
+
while ((node = walker.nextNode())) {
|
|
1602
|
+
textNodes.push(node);
|
|
1603
|
+
}
|
|
1604
|
+
for (const textNode of textNodes) {
|
|
1605
|
+
const text = textNode.textContent || "";
|
|
1606
|
+
const index = text.indexOf(selectedText);
|
|
1607
|
+
if (index !== -1) {
|
|
1608
|
+
const span = document.createElement("span");
|
|
1609
|
+
span.style.color = color;
|
|
1610
|
+
span.textContent = selectedText;
|
|
1611
|
+
const beforeText = text.slice(0, index);
|
|
1612
|
+
const afterText = text.slice(index + selectedText.length);
|
|
1613
|
+
const fragment = document.createDocumentFragment();
|
|
1614
|
+
if (beforeText)
|
|
1615
|
+
fragment.appendChild(document.createTextNode(beforeText));
|
|
1616
|
+
fragment.appendChild(span);
|
|
1617
|
+
if (afterText)
|
|
1618
|
+
fragment.appendChild(document.createTextNode(afterText));
|
|
1619
|
+
textNode.replaceWith(fragment);
|
|
1620
|
+
break; // Apply only once per selection
|
|
1621
|
+
}
|
|
1622
|
+
}
|
|
1623
|
+
}
|
|
1542
1624
|
this.savedSelection = null;
|
|
1543
1625
|
}
|
|
1544
1626
|
setBackgroundColor(event) {
|