el-text-editor 0.0.89 → 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.
|
@@ -1480,13 +1480,91 @@ class ElTextEditorComponent {
|
|
|
1480
1480
|
// }
|
|
1481
1481
|
// }
|
|
1482
1482
|
// }
|
|
1483
|
+
// setTextColor(event: any) {
|
|
1484
|
+
// console.log("Clicked setTextColor");
|
|
1485
|
+
// if (!this.savedSelection) {
|
|
1486
|
+
// console.warn("No saved selection available!");
|
|
1487
|
+
// return;
|
|
1488
|
+
// }
|
|
1489
|
+
// const color = event.target.value;
|
|
1490
|
+
// this.selectedTextColor = color;
|
|
1491
|
+
// const selection = window.getSelection();
|
|
1492
|
+
// if (!selection || selection.rangeCount === 0) {
|
|
1493
|
+
// console.error("No valid selection found!");
|
|
1494
|
+
// return;
|
|
1495
|
+
// }
|
|
1496
|
+
// selection.removeAllRanges();
|
|
1497
|
+
// selection.addRange(this.savedSelection);
|
|
1498
|
+
// const range = this.savedSelection;
|
|
1499
|
+
// const getTableCell = (node: Node | null): HTMLElement | null => {
|
|
1500
|
+
// let currentNode = node;
|
|
1501
|
+
// if (currentNode && currentNode.nodeType === Node.TEXT_NODE) {
|
|
1502
|
+
// currentNode = currentNode.parentNode;
|
|
1503
|
+
// }
|
|
1504
|
+
// while (currentNode && currentNode instanceof HTMLElement) {
|
|
1505
|
+
// if (currentNode.tagName === "TD" || currentNode.tagName === "TH") {
|
|
1506
|
+
// return currentNode;
|
|
1507
|
+
// }
|
|
1508
|
+
// currentNode = currentNode.parentElement;
|
|
1509
|
+
// }
|
|
1510
|
+
// return null;
|
|
1511
|
+
// };
|
|
1512
|
+
// const tableCell =
|
|
1513
|
+
// getTableCell(range.commonAncestorContainer) ||
|
|
1514
|
+
// getTableCell(range.startContainer) ||
|
|
1515
|
+
// getTableCell(range.endContainer);
|
|
1516
|
+
// if (tableCell) {
|
|
1517
|
+
// console.log(`Processing ${tableCell.tagName} element`);
|
|
1518
|
+
// const selectedText = selection.toString();
|
|
1519
|
+
// if (selectedText) {
|
|
1520
|
+
// console.log(`Selected text in ${tableCell.tagName}:`, selectedText);
|
|
1521
|
+
// const textNodes: Text[] = [];
|
|
1522
|
+
// const walker = document.createTreeWalker(
|
|
1523
|
+
// tableCell,
|
|
1524
|
+
// NodeFilter.SHOW_TEXT,
|
|
1525
|
+
// null
|
|
1526
|
+
// );
|
|
1527
|
+
// let node: Text | null;
|
|
1528
|
+
// while ((node = walker.nextNode() as Text | null)) {
|
|
1529
|
+
// textNodes.push(node);
|
|
1530
|
+
// }
|
|
1531
|
+
// for (const textNode of textNodes) {
|
|
1532
|
+
// const text = textNode.textContent || "";
|
|
1533
|
+
// const index = text.indexOf(selectedText);
|
|
1534
|
+
// if (index !== -1) {
|
|
1535
|
+
// console.log(
|
|
1536
|
+
// `Found selected text in ${tableCell.tagName} text node`
|
|
1537
|
+
// );
|
|
1538
|
+
// const span = document.createElement("span");
|
|
1539
|
+
// span.style.color = color;
|
|
1540
|
+
// span.textContent = selectedText;
|
|
1541
|
+
// const beforeText = text.slice(0, index);
|
|
1542
|
+
// const afterText = text.slice(index + selectedText.length);
|
|
1543
|
+
// const fragment = document.createDocumentFragment();
|
|
1544
|
+
// if (beforeText)
|
|
1545
|
+
// fragment.appendChild(document.createTextNode(beforeText));
|
|
1546
|
+
// fragment.appendChild(span);
|
|
1547
|
+
// if (afterText)
|
|
1548
|
+
// fragment.appendChild(document.createTextNode(afterText));
|
|
1549
|
+
// textNode.replaceWith(fragment);
|
|
1550
|
+
// break; // Apply only once per selection
|
|
1551
|
+
// }
|
|
1552
|
+
// }
|
|
1553
|
+
// }
|
|
1554
|
+
// } else {
|
|
1555
|
+
// console.log("No TH or TD element found in selection");
|
|
1556
|
+
// return;
|
|
1557
|
+
// }
|
|
1558
|
+
// this.savedSelection = null;
|
|
1559
|
+
// }
|
|
1483
1560
|
setTextColor(event) {
|
|
1484
|
-
console.log("
|
|
1561
|
+
console.log("clicked");
|
|
1485
1562
|
if (!this.savedSelection) {
|
|
1486
1563
|
console.warn("No saved selection available!");
|
|
1487
1564
|
return;
|
|
1488
1565
|
}
|
|
1489
1566
|
const color = event.target.value;
|
|
1567
|
+
console.log("color", color);
|
|
1490
1568
|
this.selectedTextColor = color;
|
|
1491
1569
|
const selection = window.getSelection();
|
|
1492
1570
|
if (!selection || selection.rangeCount === 0) {
|
|
@@ -1496,59 +1574,57 @@ class ElTextEditorComponent {
|
|
|
1496
1574
|
selection.removeAllRanges();
|
|
1497
1575
|
selection.addRange(this.savedSelection);
|
|
1498
1576
|
const range = this.savedSelection;
|
|
1499
|
-
const
|
|
1577
|
+
const getParentElement = (node) => {
|
|
1500
1578
|
let currentNode = node;
|
|
1501
1579
|
if (currentNode && currentNode.nodeType === Node.TEXT_NODE) {
|
|
1502
1580
|
currentNode = currentNode.parentNode;
|
|
1503
1581
|
}
|
|
1504
1582
|
while (currentNode && currentNode instanceof HTMLElement) {
|
|
1505
|
-
|
|
1506
|
-
return currentNode;
|
|
1507
|
-
}
|
|
1508
|
-
currentNode = currentNode.parentElement;
|
|
1583
|
+
return currentNode;
|
|
1509
1584
|
}
|
|
1510
1585
|
return null;
|
|
1511
1586
|
};
|
|
1512
|
-
const
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
if (
|
|
1516
|
-
console.
|
|
1517
|
-
|
|
1518
|
-
if (selectedText) {
|
|
1519
|
-
console.log(`Selected text in ${tableCell.tagName}:`, selectedText);
|
|
1520
|
-
const textNodes = [];
|
|
1521
|
-
const walker = document.createTreeWalker(tableCell, NodeFilter.SHOW_TEXT, null);
|
|
1522
|
-
let node;
|
|
1523
|
-
while ((node = walker.nextNode())) {
|
|
1524
|
-
textNodes.push(node);
|
|
1525
|
-
}
|
|
1526
|
-
for (const textNode of textNodes) {
|
|
1527
|
-
const text = textNode.textContent || "";
|
|
1528
|
-
const index = text.indexOf(selectedText);
|
|
1529
|
-
if (index !== -1) {
|
|
1530
|
-
console.log(`Found selected text in ${tableCell.tagName} text node`);
|
|
1531
|
-
const span = document.createElement("span");
|
|
1532
|
-
span.style.color = color;
|
|
1533
|
-
span.textContent = selectedText;
|
|
1534
|
-
const beforeText = text.slice(0, index);
|
|
1535
|
-
const afterText = text.slice(index + selectedText.length);
|
|
1536
|
-
const fragment = document.createDocumentFragment();
|
|
1537
|
-
if (beforeText)
|
|
1538
|
-
fragment.appendChild(document.createTextNode(beforeText));
|
|
1539
|
-
fragment.appendChild(span);
|
|
1540
|
-
if (afterText)
|
|
1541
|
-
fragment.appendChild(document.createTextNode(afterText));
|
|
1542
|
-
textNode.replaceWith(fragment);
|
|
1543
|
-
break; // Apply only once per selection
|
|
1544
|
-
}
|
|
1545
|
-
}
|
|
1546
|
-
}
|
|
1587
|
+
const parentElement = getParentElement(range.commonAncestorContainer) ||
|
|
1588
|
+
getParentElement(range.startContainer) ||
|
|
1589
|
+
getParentElement(range.endContainer);
|
|
1590
|
+
if (!parentElement) {
|
|
1591
|
+
console.error("No valid parent element found!");
|
|
1592
|
+
return;
|
|
1547
1593
|
}
|
|
1548
|
-
|
|
1549
|
-
|
|
1594
|
+
// **Handle Table Cell Case**
|
|
1595
|
+
if (parentElement.tagName === "TD") {
|
|
1596
|
+
parentElement.style.color = color; // Apply color directly to cell
|
|
1550
1597
|
return;
|
|
1551
1598
|
}
|
|
1599
|
+
// **Handle Normal Text Case**
|
|
1600
|
+
const selectedText = selection.toString();
|
|
1601
|
+
if (selectedText) {
|
|
1602
|
+
const textNodes = [];
|
|
1603
|
+
const walker = document.createTreeWalker(parentElement, NodeFilter.SHOW_TEXT, null);
|
|
1604
|
+
let node;
|
|
1605
|
+
while ((node = walker.nextNode())) {
|
|
1606
|
+
textNodes.push(node);
|
|
1607
|
+
}
|
|
1608
|
+
for (const textNode of textNodes) {
|
|
1609
|
+
const text = textNode.textContent || "";
|
|
1610
|
+
const index = text.indexOf(selectedText);
|
|
1611
|
+
if (index !== -1) {
|
|
1612
|
+
const span = document.createElement("span");
|
|
1613
|
+
span.style.color = color;
|
|
1614
|
+
span.textContent = selectedText;
|
|
1615
|
+
const beforeText = text.slice(0, index);
|
|
1616
|
+
const afterText = text.slice(index + selectedText.length);
|
|
1617
|
+
const fragment = document.createDocumentFragment();
|
|
1618
|
+
if (beforeText)
|
|
1619
|
+
fragment.appendChild(document.createTextNode(beforeText));
|
|
1620
|
+
fragment.appendChild(span);
|
|
1621
|
+
if (afterText)
|
|
1622
|
+
fragment.appendChild(document.createTextNode(afterText));
|
|
1623
|
+
textNode.replaceWith(fragment);
|
|
1624
|
+
break; // Apply only once per selection
|
|
1625
|
+
}
|
|
1626
|
+
}
|
|
1627
|
+
}
|
|
1552
1628
|
this.savedSelection = null;
|
|
1553
1629
|
}
|
|
1554
1630
|
setBackgroundColor(event) {
|