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.
|
@@ -1315,7 +1315,8 @@ class ElTextEditorComponent {
|
|
|
1315
1315
|
cell.style.wordBreak = "break-all";
|
|
1316
1316
|
cell.style.whiteSpace = "normal";
|
|
1317
1317
|
cell.style.minWidth = `${minWidth}px`;
|
|
1318
|
-
cell.style.borderBottom =
|
|
1318
|
+
cell.style.borderBottom = "1px solid #d3d3d3";
|
|
1319
|
+
// cell.style.borderBottom = `2px solid ${this.themeModeClrVerticalLineColorForTable()}`;
|
|
1319
1320
|
// If it's the first row, make it a header cell
|
|
1320
1321
|
if (i === 0) {
|
|
1321
1322
|
cell.classList.add("header-cell");
|
|
@@ -1333,9 +1334,14 @@ class ElTextEditorComponent {
|
|
|
1333
1334
|
}
|
|
1334
1335
|
}
|
|
1335
1336
|
// Update existing rows' bottom border
|
|
1337
|
+
// for (let i = 0; i < this.selectedTable.rows.length; i++) {
|
|
1338
|
+
// this.selectedTable.rows[i].style.borderBottom =
|
|
1339
|
+
// this.themeModeClrVerticalLineForTable();
|
|
1340
|
+
// }
|
|
1336
1341
|
for (let i = 0; i < this.selectedTable.rows.length; i++) {
|
|
1337
|
-
this.selectedTable.rows[i].
|
|
1338
|
-
this.
|
|
1342
|
+
for (let j = 0; j < this.selectedTable.rows[i].cells.length; j++) {
|
|
1343
|
+
this.selectedTable.rows[i].cells[j].style.borderBottom = "1px solid #d3d3d3";
|
|
1344
|
+
}
|
|
1339
1345
|
}
|
|
1340
1346
|
}
|
|
1341
1347
|
}
|
|
@@ -1474,13 +1480,91 @@ class ElTextEditorComponent {
|
|
|
1474
1480
|
// }
|
|
1475
1481
|
// }
|
|
1476
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
|
+
// }
|
|
1477
1560
|
setTextColor(event) {
|
|
1478
|
-
console.log("
|
|
1561
|
+
console.log("clicked");
|
|
1479
1562
|
if (!this.savedSelection) {
|
|
1480
1563
|
console.warn("No saved selection available!");
|
|
1481
1564
|
return;
|
|
1482
1565
|
}
|
|
1483
1566
|
const color = event.target.value;
|
|
1567
|
+
console.log("color", color);
|
|
1484
1568
|
this.selectedTextColor = color;
|
|
1485
1569
|
const selection = window.getSelection();
|
|
1486
1570
|
if (!selection || selection.rangeCount === 0) {
|
|
@@ -1490,59 +1574,57 @@ class ElTextEditorComponent {
|
|
|
1490
1574
|
selection.removeAllRanges();
|
|
1491
1575
|
selection.addRange(this.savedSelection);
|
|
1492
1576
|
const range = this.savedSelection;
|
|
1493
|
-
const
|
|
1577
|
+
const getParentElement = (node) => {
|
|
1494
1578
|
let currentNode = node;
|
|
1495
1579
|
if (currentNode && currentNode.nodeType === Node.TEXT_NODE) {
|
|
1496
1580
|
currentNode = currentNode.parentNode;
|
|
1497
1581
|
}
|
|
1498
1582
|
while (currentNode && currentNode instanceof HTMLElement) {
|
|
1499
|
-
|
|
1500
|
-
return currentNode;
|
|
1501
|
-
}
|
|
1502
|
-
currentNode = currentNode.parentElement;
|
|
1583
|
+
return currentNode;
|
|
1503
1584
|
}
|
|
1504
1585
|
return null;
|
|
1505
1586
|
};
|
|
1506
|
-
const
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
if (
|
|
1510
|
-
console.
|
|
1511
|
-
|
|
1512
|
-
if (selectedText) {
|
|
1513
|
-
console.log(`Selected text in ${tableCell.tagName}:`, selectedText);
|
|
1514
|
-
const textNodes = [];
|
|
1515
|
-
const walker = document.createTreeWalker(tableCell, NodeFilter.SHOW_TEXT, null);
|
|
1516
|
-
let node;
|
|
1517
|
-
while ((node = walker.nextNode())) {
|
|
1518
|
-
textNodes.push(node);
|
|
1519
|
-
}
|
|
1520
|
-
for (const textNode of textNodes) {
|
|
1521
|
-
const text = textNode.textContent || "";
|
|
1522
|
-
const index = text.indexOf(selectedText);
|
|
1523
|
-
if (index !== -1) {
|
|
1524
|
-
console.log(`Found selected text in ${tableCell.tagName} text node`);
|
|
1525
|
-
const span = document.createElement("span");
|
|
1526
|
-
span.style.color = color;
|
|
1527
|
-
span.textContent = selectedText;
|
|
1528
|
-
const beforeText = text.slice(0, index);
|
|
1529
|
-
const afterText = text.slice(index + selectedText.length);
|
|
1530
|
-
const fragment = document.createDocumentFragment();
|
|
1531
|
-
if (beforeText)
|
|
1532
|
-
fragment.appendChild(document.createTextNode(beforeText));
|
|
1533
|
-
fragment.appendChild(span);
|
|
1534
|
-
if (afterText)
|
|
1535
|
-
fragment.appendChild(document.createTextNode(afterText));
|
|
1536
|
-
textNode.replaceWith(fragment);
|
|
1537
|
-
break; // Apply only once per selection
|
|
1538
|
-
}
|
|
1539
|
-
}
|
|
1540
|
-
}
|
|
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;
|
|
1541
1593
|
}
|
|
1542
|
-
|
|
1543
|
-
|
|
1594
|
+
// **Handle Table Cell Case**
|
|
1595
|
+
if (parentElement.tagName === "TD") {
|
|
1596
|
+
parentElement.style.color = color; // Apply color directly to cell
|
|
1544
1597
|
return;
|
|
1545
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
|
+
}
|
|
1546
1628
|
this.savedSelection = null;
|
|
1547
1629
|
}
|
|
1548
1630
|
setBackgroundColor(event) {
|