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.
|
@@ -1476,13 +1476,91 @@ class ElTextEditorComponent {
|
|
|
1476
1476
|
// }
|
|
1477
1477
|
// }
|
|
1478
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
|
+
// }
|
|
1479
1556
|
setTextColor(event) {
|
|
1480
|
-
console.log("
|
|
1557
|
+
console.log("clicked");
|
|
1481
1558
|
if (!this.savedSelection) {
|
|
1482
1559
|
console.warn("No saved selection available!");
|
|
1483
1560
|
return;
|
|
1484
1561
|
}
|
|
1485
1562
|
const color = event.target.value;
|
|
1563
|
+
console.log("color", color);
|
|
1486
1564
|
this.selectedTextColor = color;
|
|
1487
1565
|
const selection = window.getSelection();
|
|
1488
1566
|
if (!selection || selection.rangeCount === 0) {
|
|
@@ -1492,59 +1570,57 @@ class ElTextEditorComponent {
|
|
|
1492
1570
|
selection.removeAllRanges();
|
|
1493
1571
|
selection.addRange(this.savedSelection);
|
|
1494
1572
|
const range = this.savedSelection;
|
|
1495
|
-
const
|
|
1573
|
+
const getParentElement = (node) => {
|
|
1496
1574
|
let currentNode = node;
|
|
1497
1575
|
if (currentNode && currentNode.nodeType === Node.TEXT_NODE) {
|
|
1498
1576
|
currentNode = currentNode.parentNode;
|
|
1499
1577
|
}
|
|
1500
1578
|
while (currentNode && currentNode instanceof HTMLElement) {
|
|
1501
|
-
|
|
1502
|
-
return currentNode;
|
|
1503
|
-
}
|
|
1504
|
-
currentNode = currentNode.parentElement;
|
|
1579
|
+
return currentNode;
|
|
1505
1580
|
}
|
|
1506
1581
|
return null;
|
|
1507
1582
|
};
|
|
1508
|
-
const
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
if (
|
|
1512
|
-
console.
|
|
1513
|
-
|
|
1514
|
-
if (selectedText) {
|
|
1515
|
-
console.log(`Selected text in ${tableCell.tagName}:`, selectedText);
|
|
1516
|
-
const textNodes = [];
|
|
1517
|
-
const walker = document.createTreeWalker(tableCell, NodeFilter.SHOW_TEXT, null);
|
|
1518
|
-
let node;
|
|
1519
|
-
while ((node = walker.nextNode())) {
|
|
1520
|
-
textNodes.push(node);
|
|
1521
|
-
}
|
|
1522
|
-
for (const textNode of textNodes) {
|
|
1523
|
-
const text = textNode.textContent || "";
|
|
1524
|
-
const index = text.indexOf(selectedText);
|
|
1525
|
-
if (index !== -1) {
|
|
1526
|
-
console.log(`Found selected text in ${tableCell.tagName} text node`);
|
|
1527
|
-
const span = document.createElement("span");
|
|
1528
|
-
span.style.color = color;
|
|
1529
|
-
span.textContent = selectedText;
|
|
1530
|
-
const beforeText = text.slice(0, index);
|
|
1531
|
-
const afterText = text.slice(index + selectedText.length);
|
|
1532
|
-
const fragment = document.createDocumentFragment();
|
|
1533
|
-
if (beforeText)
|
|
1534
|
-
fragment.appendChild(document.createTextNode(beforeText));
|
|
1535
|
-
fragment.appendChild(span);
|
|
1536
|
-
if (afterText)
|
|
1537
|
-
fragment.appendChild(document.createTextNode(afterText));
|
|
1538
|
-
textNode.replaceWith(fragment);
|
|
1539
|
-
break; // Apply only once per selection
|
|
1540
|
-
}
|
|
1541
|
-
}
|
|
1542
|
-
}
|
|
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;
|
|
1543
1589
|
}
|
|
1544
|
-
|
|
1545
|
-
|
|
1590
|
+
// **Handle Table Cell Case**
|
|
1591
|
+
if (parentElement.tagName === "TD") {
|
|
1592
|
+
parentElement.style.color = color; // Apply color directly to cell
|
|
1546
1593
|
return;
|
|
1547
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
|
+
}
|
|
1548
1624
|
this.savedSelection = null;
|
|
1549
1625
|
}
|
|
1550
1626
|
setBackgroundColor(event) {
|