ct-rich-text-editor 1.3.10 → 1.3.11
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.
- package/dist/assets/style.css +31 -0
- package/dist/{html2pdf.bundle-7796d91e.js → html2pdf.bundle-f2c10c61.js} +2 -2
- package/dist/{html2pdf.bundle-7796d91e.js.map → html2pdf.bundle-f2c10c61.js.map} +1 -1
- package/dist/{html2pdf.bundle.min-655f7464.js → html2pdf.bundle.min-05204c5b.js} +2 -2
- package/dist/{html2pdf.bundle.min-655f7464.js.map → html2pdf.bundle.min-05204c5b.js.map} +1 -1
- package/dist/{index-d292603a.js → index-35bfe917.js} +2 -2
- package/dist/{index-d292603a.js.map → index-35bfe917.js.map} +1 -1
- package/dist/{index-d5866754.js → index-ca05509b.js} +419 -145
- package/dist/index-ca05509b.js.map +1 -0
- package/dist/{index-e0dbaf6d.js → index-d9c39bac.js} +2 -2
- package/dist/{index-e0dbaf6d.js.map → index-d9c39bac.js.map} +1 -1
- package/dist/index.js +1 -1
- package/dist/plugins/TableHoverActionsPlugin/index.d.ts +0 -4
- package/dist/plugins/Tableimageautoresizeplugin.d.ts +1 -0
- package/package.json +1 -1
- package/dist/index-d5866754.js.map +0 -1
|
@@ -21,7 +21,7 @@ import { ListPlugin } from "@lexical/react/LexicalListPlugin";
|
|
|
21
21
|
import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
|
|
22
22
|
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
|
|
23
23
|
import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
|
|
24
|
-
import { TableNode, TableCellNode, TableRowNode, $createTableNodeWithDimensions, $isTableRowNode, $isTableCellNode, TableCellHeaderStates, $isTableNode, $isTableSelection, $getTableCellNodeFromLexicalNode, $getTableNodeFromLexicalNodeOrThrow, getTableElement, getTableObserverFromTableElement, $
|
|
24
|
+
import { TableNode, TableCellNode, TableRowNode, $createTableNodeWithDimensions, $isTableRowNode, $isTableCellNode, TableCellHeaderStates, $isTableNode, $isTableSelection, $getTableCellNodeFromLexicalNode, $getTableNodeFromLexicalNodeOrThrow, getTableElement, getTableObserverFromTableElement, $getTableRowIndexFromTableCellNode, $getNodeTriplet, $insertTableRow__EXPERIMENTAL, $getTableColumnIndexFromTableCellNode, $insertTableColumn__EXPERIMENTAL, $deleteTableRow__EXPERIMENTAL, $deleteTableColumn__EXPERIMENTAL, $unmergeCell, $computeTableMapSkipCellCheck, getDOMCellFromTarget, $getTableAndElementByKey } from "@lexical/table";
|
|
25
25
|
import { mergeRegister, $wrapNodeInElement, $findMatchingParent, $getNearestNodeOfType, $getNearestBlockElementAncestorOrThrow, $insertNodeToNearestRoot, $isEditorIsNestedEditor, mediaFileReader, isMimeType, calculateZoomLevel, CAN_USE_DOM } from "@lexical/utils";
|
|
26
26
|
import Stack from "@mui/material/Stack";
|
|
27
27
|
import { createCommand, DecoratorNode, createEditor, $applyNodeReplacement, $insertNodes, $isRootOrShadowRoot, $createParagraphNode, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_LOW, $getSelection, $isRangeSelection, $getNearestNodeFromDOMNode, $setSelection, isHTMLElement as isHTMLElement$1, TextNode, $getRoot, $createTextNode, $getNodeByKey, $isParagraphNode, $isTextNode, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, $isElementNode, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, UNDO_COMMAND, REDO_COMMAND, $createRangeSelection, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, KEY_ENTER_COMMAND, $createNodeSelection, $isNodeSelection, getDOMSelection, CLICK_COMMAND, COMMAND_PRIORITY_HIGH, $isLineBreakNode, PASTE_COMMAND, isDOMNode } from "lexical";
|
|
@@ -1477,7 +1477,7 @@ const AiTextTransform = async ({ content, apiKey }) => {
|
|
|
1477
1477
|
const AI_ACTION_COMMAND = createCommand(
|
|
1478
1478
|
"AI_ACTION_COMMAND"
|
|
1479
1479
|
);
|
|
1480
|
-
const ImageView = React__default.lazy(() => import("./index-
|
|
1480
|
+
const ImageView = React__default.lazy(() => import("./index-35bfe917.js"));
|
|
1481
1481
|
function isGoogleDocCheckboxImg(img) {
|
|
1482
1482
|
return img.parentElement != null && img.parentElement.tagName === "LI" && img.previousSibling === null && img.getAttribute("aria-roledescription") === "checkbox";
|
|
1483
1483
|
}
|
|
@@ -15226,7 +15226,7 @@ const EmbedComponent = ({ url, displayType, alignment, nodeKey }) => {
|
|
|
15226
15226
|
}
|
|
15227
15227
|
);
|
|
15228
15228
|
};
|
|
15229
|
-
const FileComponent = React$1.lazy(() => import("./index-
|
|
15229
|
+
const FileComponent = React$1.lazy(() => import("./index-d9c39bac.js"));
|
|
15230
15230
|
function convertFileElement(domNode) {
|
|
15231
15231
|
if (domNode instanceof HTMLDivElement) {
|
|
15232
15232
|
const dataUrl = domNode.getAttribute("data-lexical-file-src");
|
|
@@ -20113,10 +20113,10 @@ const PDF_CONFIG = {
|
|
|
20113
20113
|
};
|
|
20114
20114
|
const loadHtml2Pdf = async () => {
|
|
20115
20115
|
try {
|
|
20116
|
-
const mod = await import("./html2pdf.bundle.min-
|
|
20116
|
+
const mod = await import("./html2pdf.bundle.min-05204c5b.js").then((n) => n.h);
|
|
20117
20117
|
return (mod == null ? void 0 : mod.default) || mod;
|
|
20118
20118
|
} catch {
|
|
20119
|
-
const mod2 = await import("./html2pdf.bundle-
|
|
20119
|
+
const mod2 = await import("./html2pdf.bundle-f2c10c61.js").then((n) => n.h);
|
|
20120
20120
|
return (mod2 == null ? void 0 : mod2.default) || mod2;
|
|
20121
20121
|
}
|
|
20122
20122
|
};
|
|
@@ -31976,8 +31976,10 @@ function TableActionMenu({
|
|
|
31976
31976
|
const [canMergeCells, setCanMergeCells] = useState$1(false);
|
|
31977
31977
|
const [canUnmergeCell, setCanUnmergeCell] = useState$1(false);
|
|
31978
31978
|
const [backgroundColor, setBackgroundColor] = useState$1("");
|
|
31979
|
-
const [
|
|
31979
|
+
const [oddRowStripingColor, setOddRowStripingColor] = useState$1("");
|
|
31980
|
+
const [evenRowStripingColor, setEvenRowStripingColor] = useState$1("");
|
|
31980
31981
|
const [isHeaderCell, setIsHeaderCell] = useState$1(false);
|
|
31982
|
+
const [isOddRow, setIsOddRow] = useState$1(true);
|
|
31981
31983
|
useEffect$1(() => {
|
|
31982
31984
|
updateTableCellNode(_tableCellNode);
|
|
31983
31985
|
}, [_tableCellNode]);
|
|
@@ -31999,18 +32001,52 @@ function TableActionMenu({
|
|
|
31999
32001
|
useEffect$1(() => {
|
|
32000
32002
|
editor.getEditorState().read(() => {
|
|
32001
32003
|
const selection = $getSelection();
|
|
32004
|
+
try {
|
|
32005
|
+
const rowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
|
|
32006
|
+
const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
|
|
32007
|
+
const firstRow = tableNode.getFirstChild();
|
|
32008
|
+
let hasHeaderRow = false;
|
|
32009
|
+
if (firstRow && $isTableRowNode(firstRow)) {
|
|
32010
|
+
const firstCell = firstRow.getFirstChild();
|
|
32011
|
+
if (firstCell && $isTableCellNode(firstCell)) {
|
|
32012
|
+
hasHeaderRow = (firstCell.getHeaderStyles() & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN;
|
|
32013
|
+
}
|
|
32014
|
+
}
|
|
32015
|
+
let dataRowNumber;
|
|
32016
|
+
if (hasHeaderRow) {
|
|
32017
|
+
if (rowIndex === 0) {
|
|
32018
|
+
setIsOddRow(true);
|
|
32019
|
+
return;
|
|
32020
|
+
}
|
|
32021
|
+
dataRowNumber = rowIndex;
|
|
32022
|
+
} else {
|
|
32023
|
+
dataRowNumber = rowIndex + 1;
|
|
32024
|
+
}
|
|
32025
|
+
setIsOddRow(dataRowNumber % 2 === 1);
|
|
32026
|
+
} catch (error) {
|
|
32027
|
+
setIsOddRow(true);
|
|
32028
|
+
}
|
|
32002
32029
|
if ($isTableSelection(selection)) {
|
|
32003
32030
|
const currentSelectionCounts = computeSelectionCount(selection);
|
|
32004
32031
|
updateSelectionCounts(computeSelectionCount(selection));
|
|
32005
32032
|
setCanMergeCells(
|
|
32006
32033
|
currentSelectionCounts.columns > 1 || currentSelectionCounts.rows > 1
|
|
32007
32034
|
);
|
|
32008
|
-
const anchorNode = $getTableCellNodeFromLexicalNode(
|
|
32035
|
+
const anchorNode = $getTableCellNodeFromLexicalNode(
|
|
32036
|
+
selection.anchor.getNode()
|
|
32037
|
+
);
|
|
32009
32038
|
if (anchorNode) {
|
|
32010
32039
|
const tableNode = $getTableNodeFromLexicalNodeOrThrow(anchorNode);
|
|
32011
32040
|
const tableRowCount = tableNode.getChildrenSize();
|
|
32012
32041
|
const firstRow = tableNode.getFirstChild();
|
|
32013
32042
|
const tableColumnCount = firstRow && $isTableRowNode(firstRow) ? firstRow.getChildrenSize() : 0;
|
|
32043
|
+
let hasHeaderRow = false;
|
|
32044
|
+
if (firstRow && $isTableRowNode(firstRow)) {
|
|
32045
|
+
const firstCell = firstRow.getFirstChild();
|
|
32046
|
+
if (firstCell && $isTableCellNode(firstCell)) {
|
|
32047
|
+
hasHeaderRow = (firstCell.getHeaderStyles() & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN;
|
|
32048
|
+
}
|
|
32049
|
+
}
|
|
32014
32050
|
const nodes = selection.getNodes();
|
|
32015
32051
|
const hasHeaderCell = nodes.some((node) => {
|
|
32016
32052
|
if ($isTableCellNode(node)) {
|
|
@@ -32023,6 +32059,22 @@ function TableActionMenu({
|
|
|
32023
32059
|
setSelectionType("column");
|
|
32024
32060
|
} else if (currentSelectionCounts.columns === tableColumnCount && currentSelectionCounts.rows < tableRowCount) {
|
|
32025
32061
|
setSelectionType("row");
|
|
32062
|
+
try {
|
|
32063
|
+
const anchorRowIndex = $getTableRowIndexFromTableCellNode(anchorNode);
|
|
32064
|
+
let dataRowNumber;
|
|
32065
|
+
if (hasHeaderRow) {
|
|
32066
|
+
if (anchorRowIndex === 0) {
|
|
32067
|
+
setIsOddRow(true);
|
|
32068
|
+
} else {
|
|
32069
|
+
dataRowNumber = anchorRowIndex;
|
|
32070
|
+
setIsOddRow(dataRowNumber % 2 === 1);
|
|
32071
|
+
}
|
|
32072
|
+
} else {
|
|
32073
|
+
dataRowNumber = anchorRowIndex + 1;
|
|
32074
|
+
setIsOddRow(dataRowNumber % 2 === 1);
|
|
32075
|
+
}
|
|
32076
|
+
} catch (error) {
|
|
32077
|
+
}
|
|
32026
32078
|
} else {
|
|
32027
32079
|
setSelectionType("cell");
|
|
32028
32080
|
}
|
|
@@ -32124,7 +32176,13 @@ function TableActionMenu({
|
|
|
32124
32176
|
dropDownElement.style.top = `${topPosition}px`;
|
|
32125
32177
|
}
|
|
32126
32178
|
}
|
|
32127
|
-
}, [
|
|
32179
|
+
}, [
|
|
32180
|
+
contextRef,
|
|
32181
|
+
dropDownRef,
|
|
32182
|
+
editor,
|
|
32183
|
+
contextMenuPosition,
|
|
32184
|
+
chevronPositionRef
|
|
32185
|
+
]);
|
|
32128
32186
|
useEffect$1(() => {
|
|
32129
32187
|
function handleClickOutside(event) {
|
|
32130
32188
|
if (event.button === 2) {
|
|
@@ -32468,22 +32526,85 @@ function TableActionMenu({
|
|
|
32468
32526
|
});
|
|
32469
32527
|
});
|
|
32470
32528
|
}, [editor, tableCellNode, $clearTableSelectionInline, onClose]);
|
|
32471
|
-
const
|
|
32472
|
-
|
|
32473
|
-
|
|
32474
|
-
|
|
32475
|
-
|
|
32476
|
-
|
|
32477
|
-
|
|
32478
|
-
|
|
32479
|
-
|
|
32480
|
-
|
|
32529
|
+
const selectFirstCellInRow = (cellNode) => {
|
|
32530
|
+
const row = cellNode.getParent();
|
|
32531
|
+
if ($isTableRowNode(row)) {
|
|
32532
|
+
const firstCell = row.getFirstChild();
|
|
32533
|
+
if ($isTableCellNode(firstCell)) {
|
|
32534
|
+
firstCell.selectEnd();
|
|
32535
|
+
}
|
|
32536
|
+
}
|
|
32537
|
+
};
|
|
32538
|
+
const applyOddRowStriping = useCallback(
|
|
32539
|
+
(color) => {
|
|
32540
|
+
editor.update(() => {
|
|
32541
|
+
if (tableCellNode.isAttached()) {
|
|
32542
|
+
const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
|
|
32543
|
+
if (tableNode) {
|
|
32544
|
+
const tableElement = editor.getElementByKey(tableNode.getKey());
|
|
32545
|
+
if (tableElement instanceof HTMLElement) {
|
|
32546
|
+
const firstRow = tableNode.getFirstChild();
|
|
32547
|
+
let hasHeaderRow = false;
|
|
32548
|
+
if (firstRow && $isTableRowNode(firstRow)) {
|
|
32549
|
+
const firstCell = firstRow.getFirstChild();
|
|
32550
|
+
if (firstCell && $isTableCellNode(firstCell)) {
|
|
32551
|
+
hasHeaderRow = (firstCell.getHeaderStyles() & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN;
|
|
32552
|
+
}
|
|
32553
|
+
}
|
|
32554
|
+
tableElement.style.setProperty(
|
|
32555
|
+
"--table-odd-striping-color",
|
|
32556
|
+
color
|
|
32557
|
+
);
|
|
32558
|
+
tableElement.classList.add("table-custom-odd-striping");
|
|
32559
|
+
if (hasHeaderRow) {
|
|
32560
|
+
tableElement.classList.add("has-header-row");
|
|
32561
|
+
} else {
|
|
32562
|
+
tableElement.classList.remove("has-header-row");
|
|
32563
|
+
}
|
|
32564
|
+
selectFirstCellInRow(tableCellNode);
|
|
32565
|
+
}
|
|
32481
32566
|
}
|
|
32482
32567
|
}
|
|
32483
|
-
}
|
|
32484
|
-
|
|
32485
|
-
}
|
|
32486
|
-
|
|
32568
|
+
});
|
|
32569
|
+
setIsMenuOpen(false);
|
|
32570
|
+
},
|
|
32571
|
+
[editor, tableCellNode, setIsMenuOpen]
|
|
32572
|
+
);
|
|
32573
|
+
const applyEvenRowStriping = useCallback(
|
|
32574
|
+
(color) => {
|
|
32575
|
+
editor.update(() => {
|
|
32576
|
+
if (tableCellNode.isAttached()) {
|
|
32577
|
+
const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
|
|
32578
|
+
if (tableNode) {
|
|
32579
|
+
const tableElement = editor.getElementByKey(tableNode.getKey());
|
|
32580
|
+
if (tableElement instanceof HTMLElement) {
|
|
32581
|
+
const firstRow = tableNode.getFirstChild();
|
|
32582
|
+
let hasHeaderRow = false;
|
|
32583
|
+
if (firstRow && $isTableRowNode(firstRow)) {
|
|
32584
|
+
const firstCell = firstRow.getFirstChild();
|
|
32585
|
+
if (firstCell && $isTableCellNode(firstCell)) {
|
|
32586
|
+
hasHeaderRow = (firstCell.getHeaderStyles() & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN;
|
|
32587
|
+
}
|
|
32588
|
+
}
|
|
32589
|
+
tableElement.style.setProperty(
|
|
32590
|
+
"--table-even-striping-color",
|
|
32591
|
+
color
|
|
32592
|
+
);
|
|
32593
|
+
tableElement.classList.add("table-custom-even-striping");
|
|
32594
|
+
if (hasHeaderRow) {
|
|
32595
|
+
tableElement.classList.add("has-header-row");
|
|
32596
|
+
} else {
|
|
32597
|
+
tableElement.classList.remove("has-header-row");
|
|
32598
|
+
}
|
|
32599
|
+
selectFirstCellInRow(tableCellNode);
|
|
32600
|
+
}
|
|
32601
|
+
}
|
|
32602
|
+
}
|
|
32603
|
+
});
|
|
32604
|
+
setIsMenuOpen(false);
|
|
32605
|
+
},
|
|
32606
|
+
[editor, tableCellNode, setIsMenuOpen]
|
|
32607
|
+
);
|
|
32487
32608
|
const handleCellBackgroundColor = useCallback(
|
|
32488
32609
|
(value) => {
|
|
32489
32610
|
const getContrastColor = (hexColor) => {
|
|
@@ -32517,7 +32638,11 @@ function TableActionMenu({
|
|
|
32517
32638
|
cellKeysToStyle.forEach((cellKey) => {
|
|
32518
32639
|
const cellElement = editor.getElementByKey(cellKey);
|
|
32519
32640
|
if (cellElement instanceof HTMLElement) {
|
|
32520
|
-
cellElement.style.setProperty(
|
|
32641
|
+
cellElement.style.setProperty(
|
|
32642
|
+
"background-color",
|
|
32643
|
+
value,
|
|
32644
|
+
"important"
|
|
32645
|
+
);
|
|
32521
32646
|
cellElement.style.setProperty("color", textColor, "important");
|
|
32522
32647
|
cellElement.style.setProperty("border-color", "#bbb", "important");
|
|
32523
32648
|
const nestedElements = cellElement.querySelectorAll("*");
|
|
@@ -32584,46 +32709,84 @@ function TableActionMenu({
|
|
|
32584
32709
|
className: menuItemClass,
|
|
32585
32710
|
onClick: (e) => {
|
|
32586
32711
|
e.stopPropagation();
|
|
32587
|
-
showColorPickerModal(
|
|
32588
|
-
|
|
32589
|
-
|
|
32590
|
-
|
|
32591
|
-
|
|
32592
|
-
|
|
32593
|
-
|
|
32594
|
-
|
|
32712
|
+
showColorPickerModal(
|
|
32713
|
+
"Cell Background Color",
|
|
32714
|
+
(closeModal) => /* @__PURE__ */ jsx(
|
|
32715
|
+
ColorPicker,
|
|
32716
|
+
{
|
|
32717
|
+
color: backgroundColor,
|
|
32718
|
+
onApply: (value) => {
|
|
32719
|
+
handleCellBackgroundColor(value);
|
|
32720
|
+
closeModal();
|
|
32721
|
+
setIsMenuOpen(false);
|
|
32722
|
+
}
|
|
32595
32723
|
}
|
|
32596
|
-
|
|
32597
|
-
|
|
32724
|
+
),
|
|
32725
|
+
true
|
|
32726
|
+
);
|
|
32598
32727
|
},
|
|
32599
32728
|
"data-test-id": "table-background-color",
|
|
32600
32729
|
children: /* @__PURE__ */ jsx("span", { className: "text", children: "Background Color" })
|
|
32601
32730
|
}
|
|
32602
32731
|
),
|
|
32603
|
-
selectionType !== "column" && /* @__PURE__ */ jsx(
|
|
32732
|
+
selectionType !== "column" && /* @__PURE__ */ jsx(Fragment, { children: !isOddRow ? (
|
|
32733
|
+
//might look inverted but it's correct
|
|
32734
|
+
/* @__PURE__ */ jsx(
|
|
32735
|
+
"button",
|
|
32736
|
+
{
|
|
32737
|
+
type: "button",
|
|
32738
|
+
className: menuItemClass,
|
|
32739
|
+
onClick: (e) => {
|
|
32740
|
+
e.stopPropagation();
|
|
32741
|
+
showColorPickerModal(
|
|
32742
|
+
"Odd Row Striping Color",
|
|
32743
|
+
(closeModal) => /* @__PURE__ */ jsx(
|
|
32744
|
+
ColorPicker,
|
|
32745
|
+
{
|
|
32746
|
+
color: oddRowStripingColor,
|
|
32747
|
+
onApply: (value) => {
|
|
32748
|
+
setOddRowStripingColor(value);
|
|
32749
|
+
applyOddRowStriping(value);
|
|
32750
|
+
closeModal();
|
|
32751
|
+
setIsMenuOpen(false);
|
|
32752
|
+
}
|
|
32753
|
+
}
|
|
32754
|
+
),
|
|
32755
|
+
true
|
|
32756
|
+
);
|
|
32757
|
+
},
|
|
32758
|
+
"data-test-id": "table-odd-row-striping",
|
|
32759
|
+
children: /* @__PURE__ */ jsx("span", { className: "text", children: "Even Row Striping Color" })
|
|
32760
|
+
}
|
|
32761
|
+
)
|
|
32762
|
+
) : /* @__PURE__ */ jsx(
|
|
32604
32763
|
"button",
|
|
32605
32764
|
{
|
|
32606
32765
|
type: "button",
|
|
32607
32766
|
className: menuItemClass,
|
|
32608
32767
|
onClick: (e) => {
|
|
32609
32768
|
e.stopPropagation();
|
|
32610
|
-
showColorPickerModal(
|
|
32611
|
-
|
|
32612
|
-
|
|
32613
|
-
|
|
32614
|
-
|
|
32615
|
-
|
|
32616
|
-
|
|
32617
|
-
|
|
32618
|
-
|
|
32769
|
+
showColorPickerModal(
|
|
32770
|
+
"Even Row Striping Color",
|
|
32771
|
+
(closeModal) => /* @__PURE__ */ jsx(
|
|
32772
|
+
ColorPicker,
|
|
32773
|
+
{
|
|
32774
|
+
color: evenRowStripingColor,
|
|
32775
|
+
onApply: (value) => {
|
|
32776
|
+
setEvenRowStripingColor(value);
|
|
32777
|
+
applyEvenRowStriping(value);
|
|
32778
|
+
closeModal();
|
|
32779
|
+
setIsMenuOpen(false);
|
|
32780
|
+
}
|
|
32619
32781
|
}
|
|
32620
|
-
|
|
32621
|
-
|
|
32782
|
+
),
|
|
32783
|
+
true
|
|
32784
|
+
);
|
|
32622
32785
|
},
|
|
32623
|
-
"data-test-id": "table-row-striping",
|
|
32624
|
-
children: /* @__PURE__ */ jsx("span", { className: "text", children: "Row Striping Color" })
|
|
32786
|
+
"data-test-id": "table-even-row-striping",
|
|
32787
|
+
children: /* @__PURE__ */ jsx("span", { className: "text", children: "Odd Row Striping Color" })
|
|
32625
32788
|
}
|
|
32626
|
-
),
|
|
32789
|
+
) }),
|
|
32627
32790
|
/* @__PURE__ */ jsx("div", { className: "cteditor-bg-gradient-to-r cteditor-from-foreground/0 cteditor-via-foreground/15 cteditor-to-foreground/0 !cteditor-my-1 cteditor-h-[1px]" }),
|
|
32628
32791
|
!isHeaderCell && /* @__PURE__ */ jsx(
|
|
32629
32792
|
"button",
|
|
@@ -32658,7 +32821,7 @@ function TableActionMenu({
|
|
|
32658
32821
|
}
|
|
32659
32822
|
),
|
|
32660
32823
|
/* @__PURE__ */ jsx("div", { className: "cteditor-bg-gradient-to-r cteditor-from-foreground/0 cteditor-via-foreground/15 cteditor-to-foreground/0 !cteditor-my-1 cteditor-h-[1px]" }),
|
|
32661
|
-
"
|
|
32824
|
+
" ",
|
|
32662
32825
|
/* @__PURE__ */ jsx(
|
|
32663
32826
|
"button",
|
|
32664
32827
|
{
|
|
@@ -32692,7 +32855,7 @@ function TableActionMenu({
|
|
|
32692
32855
|
}
|
|
32693
32856
|
),
|
|
32694
32857
|
/* @__PURE__ */ jsx("div", { className: "cteditor-bg-gradient-to-r cteditor-from-foreground/0 cteditor-via-foreground/15 cteditor-to-foreground/0 !cteditor-my-1 cteditor-h-[1px]" }),
|
|
32695
|
-
"
|
|
32858
|
+
" ",
|
|
32696
32859
|
selectionType !== "row" && /* @__PURE__ */ jsx(
|
|
32697
32860
|
"button",
|
|
32698
32861
|
{
|
|
@@ -32724,7 +32887,7 @@ function TableActionMenu({
|
|
|
32724
32887
|
}
|
|
32725
32888
|
),
|
|
32726
32889
|
/* @__PURE__ */ jsx("div", { className: "cteditor-bg-gradient-to-r cteditor-from-foreground/0 cteditor-via-foreground/15 cteditor-to-foreground/0 !cteditor-my-1 cteditor-h-[1px]" }),
|
|
32727
|
-
"
|
|
32890
|
+
" ",
|
|
32728
32891
|
selectionType !== "column" && /* @__PURE__ */ jsx(
|
|
32729
32892
|
"button",
|
|
32730
32893
|
{
|
|
@@ -32889,9 +33052,15 @@ function TableCellActionMenuContainer({
|
|
|
32889
33052
|
const editorElement = editor.getRootElement();
|
|
32890
33053
|
const scrollableParent = editorElement == null ? void 0 : editorElement.closest(".cteditor-content");
|
|
32891
33054
|
if (scrollableParent) {
|
|
32892
|
-
scrollableParent.addEventListener("scroll", handleScroll2, {
|
|
33055
|
+
scrollableParent.addEventListener("scroll", handleScroll2, {
|
|
33056
|
+
capture: true,
|
|
33057
|
+
passive: true
|
|
33058
|
+
});
|
|
32893
33059
|
}
|
|
32894
|
-
window.addEventListener("scroll", handleScroll2, {
|
|
33060
|
+
window.addEventListener("scroll", handleScroll2, {
|
|
33061
|
+
capture: true,
|
|
33062
|
+
passive: true
|
|
33063
|
+
});
|
|
32895
33064
|
const handleContextMenu = (event) => {
|
|
32896
33065
|
event.stopPropagation();
|
|
32897
33066
|
const target = event.target;
|
|
@@ -33006,7 +33175,12 @@ function TableCellActionMenuContainer({
|
|
|
33006
33175
|
e.stopPropagation();
|
|
33007
33176
|
if (menuRootRef.current) {
|
|
33008
33177
|
const rect = menuRootRef.current.getBoundingClientRect();
|
|
33009
|
-
chevronPositionRef.current = {
|
|
33178
|
+
chevronPositionRef.current = {
|
|
33179
|
+
top: rect.top,
|
|
33180
|
+
left: rect.left,
|
|
33181
|
+
right: rect.right,
|
|
33182
|
+
bottom: rect.bottom
|
|
33183
|
+
};
|
|
33010
33184
|
}
|
|
33011
33185
|
setIsMenuOpen(!isMenuOpen);
|
|
33012
33186
|
},
|
|
@@ -33594,7 +33768,7 @@ function TableHoverActionsContainer({
|
|
|
33594
33768
|
const currentTableKeyRef = useRef(null);
|
|
33595
33769
|
const calculateDotPositions = useCallback((tableDOMElement) => {
|
|
33596
33770
|
const tableRect = tableDOMElement.getBoundingClientRect();
|
|
33597
|
-
const { left: editorLeft, top: editorTop } = anchorElem.getBoundingClientRect();
|
|
33771
|
+
const { left: editorLeft, top: editorTop, width: editorWidth } = anchorElem.getBoundingClientRect();
|
|
33598
33772
|
const rows = tableDOMElement.querySelectorAll("tr");
|
|
33599
33773
|
const newDots = [];
|
|
33600
33774
|
const newSelectors = [];
|
|
@@ -33602,25 +33776,29 @@ function TableHoverActionsContainer({
|
|
|
33602
33776
|
const rowRect = row.getBoundingClientRect();
|
|
33603
33777
|
const dotTop = rowRect.bottom - editorTop - DOT_SIZE / 2;
|
|
33604
33778
|
const dotLeft = tableRect.left - editorLeft - 20;
|
|
33605
|
-
|
|
33606
|
-
|
|
33607
|
-
|
|
33608
|
-
|
|
33609
|
-
|
|
33610
|
-
|
|
33611
|
-
|
|
33612
|
-
|
|
33779
|
+
if (dotLeft >= -30) {
|
|
33780
|
+
newDots.push({
|
|
33781
|
+
left: dotLeft,
|
|
33782
|
+
top: dotTop,
|
|
33783
|
+
type: "row",
|
|
33784
|
+
index: index2 + 1,
|
|
33785
|
+
isHovered: false
|
|
33786
|
+
});
|
|
33787
|
+
}
|
|
33613
33788
|
});
|
|
33614
33789
|
const lastRow = rows[rows.length - 1];
|
|
33615
33790
|
if (lastRow) {
|
|
33616
33791
|
const lastRowRect = lastRow.getBoundingClientRect();
|
|
33617
|
-
|
|
33618
|
-
|
|
33619
|
-
|
|
33620
|
-
|
|
33621
|
-
|
|
33622
|
-
|
|
33623
|
-
|
|
33792
|
+
const dotLeft = tableRect.left - editorLeft - 20;
|
|
33793
|
+
if (dotLeft >= -30) {
|
|
33794
|
+
newDots.push({
|
|
33795
|
+
left: dotLeft,
|
|
33796
|
+
top: lastRowRect.bottom - editorTop - DOT_SIZE / 2,
|
|
33797
|
+
type: "row",
|
|
33798
|
+
index: rows.length,
|
|
33799
|
+
isHovered: false
|
|
33800
|
+
});
|
|
33801
|
+
}
|
|
33624
33802
|
}
|
|
33625
33803
|
if (rows.length > 0) {
|
|
33626
33804
|
const firstRow = rows[0];
|
|
@@ -33629,39 +33807,44 @@ function TableHoverActionsContainer({
|
|
|
33629
33807
|
const cellRect = cell.getBoundingClientRect();
|
|
33630
33808
|
const dotLeft = cellRect.right - editorLeft - DOT_SIZE / 2;
|
|
33631
33809
|
const dotTop = tableRect.top - editorTop - 12;
|
|
33632
|
-
|
|
33633
|
-
|
|
33634
|
-
|
|
33635
|
-
|
|
33636
|
-
|
|
33637
|
-
|
|
33638
|
-
|
|
33639
|
-
|
|
33810
|
+
if (dotLeft + DOT_HOVER_SIZE + 16 <= editorWidth + 20) {
|
|
33811
|
+
newDots.push({
|
|
33812
|
+
left: dotLeft,
|
|
33813
|
+
top: dotTop,
|
|
33814
|
+
type: "column",
|
|
33815
|
+
index: index2 + 1,
|
|
33816
|
+
isHovered: false
|
|
33817
|
+
});
|
|
33818
|
+
}
|
|
33640
33819
|
});
|
|
33641
33820
|
const lastCell = cells[cells.length - 1];
|
|
33642
33821
|
if (lastCell) {
|
|
33643
33822
|
const lastCellRect = lastCell.getBoundingClientRect();
|
|
33644
|
-
|
|
33645
|
-
|
|
33646
|
-
|
|
33647
|
-
|
|
33648
|
-
|
|
33649
|
-
|
|
33650
|
-
|
|
33823
|
+
const dotLeft = lastCellRect.right - editorLeft - DOT_SIZE / 2;
|
|
33824
|
+
if (dotLeft + DOT_HOVER_SIZE + 16 <= editorWidth + 20) {
|
|
33825
|
+
newDots.push({
|
|
33826
|
+
left: dotLeft,
|
|
33827
|
+
top: tableRect.top - editorTop - 12,
|
|
33828
|
+
type: "column",
|
|
33829
|
+
index: cells.length,
|
|
33830
|
+
isHovered: false
|
|
33831
|
+
});
|
|
33832
|
+
}
|
|
33651
33833
|
}
|
|
33652
33834
|
}
|
|
33653
33835
|
rows.forEach((row, index2) => {
|
|
33654
33836
|
const rowRect = row.getBoundingClientRect();
|
|
33655
33837
|
const buttonTop = rowRect.top - editorTop + (rowRect.height - SELECTOR_BUTTON_SIZE) / 2;
|
|
33656
33838
|
const buttonLeft = tableRect.left - editorLeft - SELECTOR_BUTTON_SIZE / 2;
|
|
33657
|
-
|
|
33658
|
-
|
|
33659
|
-
|
|
33660
|
-
|
|
33661
|
-
|
|
33662
|
-
|
|
33663
|
-
|
|
33664
|
-
|
|
33839
|
+
if (buttonLeft >= -(SELECTOR_BUTTON_SIZE + 10)) {
|
|
33840
|
+
newSelectors.push({
|
|
33841
|
+
left: buttonLeft,
|
|
33842
|
+
top: buttonTop,
|
|
33843
|
+
type: "row",
|
|
33844
|
+
index: index2,
|
|
33845
|
+
isHovered: false
|
|
33846
|
+
});
|
|
33847
|
+
}
|
|
33665
33848
|
});
|
|
33666
33849
|
if (rows.length > 0) {
|
|
33667
33850
|
const firstRow = rows[0];
|
|
@@ -33670,14 +33853,15 @@ function TableHoverActionsContainer({
|
|
|
33670
33853
|
const cellRect = cell.getBoundingClientRect();
|
|
33671
33854
|
const buttonLeft = cellRect.left - editorLeft + (cellRect.width - SELECTOR_BUTTON_SIZE) / 2;
|
|
33672
33855
|
const buttonTop = tableRect.top - editorTop - SELECTOR_BUTTON_SIZE / 2;
|
|
33673
|
-
|
|
33674
|
-
|
|
33675
|
-
|
|
33676
|
-
|
|
33677
|
-
|
|
33678
|
-
|
|
33679
|
-
|
|
33680
|
-
|
|
33856
|
+
if (buttonLeft + SELECTOR_BUTTON_SIZE + 10 <= editorWidth + 20) {
|
|
33857
|
+
newSelectors.push({
|
|
33858
|
+
left: buttonLeft,
|
|
33859
|
+
top: buttonTop,
|
|
33860
|
+
type: "column",
|
|
33861
|
+
index: index2,
|
|
33862
|
+
isHovered: false
|
|
33863
|
+
});
|
|
33864
|
+
}
|
|
33681
33865
|
});
|
|
33682
33866
|
}
|
|
33683
33867
|
setDots(newDots);
|
|
@@ -33817,14 +34001,11 @@ function TableHoverActionsContainer({
|
|
|
33817
34001
|
const handleSelectorClick = (type, index2) => {
|
|
33818
34002
|
if (!currentTableKeyRef.current)
|
|
33819
34003
|
return;
|
|
33820
|
-
console.log(`[HoverPlugin] Selector clicked - Type: ${type}, Index: ${index2}`);
|
|
33821
34004
|
editor.update(() => {
|
|
33822
34005
|
const { tableNode } = $getTableAndElementByKey(currentTableKeyRef.current);
|
|
33823
34006
|
if (!tableNode || !$isTableNode(tableNode)) {
|
|
33824
|
-
console.log("[HoverPlugin] Table node not found");
|
|
33825
34007
|
return;
|
|
33826
34008
|
}
|
|
33827
|
-
console.log("[HoverPlugin] Table node found, creating selection");
|
|
33828
34009
|
if (type === "row") {
|
|
33829
34010
|
const rows = tableNode.getChildren();
|
|
33830
34011
|
if (index2 >= 0 && index2 < rows.length) {
|
|
@@ -33833,12 +34014,10 @@ function TableHoverActionsContainer({
|
|
|
33833
34014
|
if (cells.length > 0) {
|
|
33834
34015
|
const firstCell = cells[0];
|
|
33835
34016
|
const lastCell = cells[cells.length - 1];
|
|
33836
|
-
console.log(`[HoverPlugin] Selecting row ${index2}, cells: ${cells.length}`);
|
|
33837
34017
|
firstCell.selectEnd();
|
|
33838
34018
|
const selection = firstCell.select();
|
|
33839
34019
|
if (selection) {
|
|
33840
34020
|
selection.focus.set(lastCell.getKey(), lastCell.getChildrenSize(), "element");
|
|
33841
|
-
console.log("[HoverPlugin] Row selection created");
|
|
33842
34021
|
setTimeout(() => {
|
|
33843
34022
|
const firstCellDOM = editor.getElementByKey(firstCell.getKey());
|
|
33844
34023
|
if (firstCellDOM) {
|
|
@@ -33851,7 +34030,6 @@ function TableHoverActionsContainer({
|
|
|
33851
34030
|
clientY: firstCellDOM.getBoundingClientRect().top + 10
|
|
33852
34031
|
});
|
|
33853
34032
|
firstCellDOM.dispatchEvent(event);
|
|
33854
|
-
console.log("[HoverPlugin] Context menu triggered");
|
|
33855
34033
|
}
|
|
33856
34034
|
}, 50);
|
|
33857
34035
|
}
|
|
@@ -33867,13 +34045,11 @@ function TableHoverActionsContainer({
|
|
|
33867
34045
|
const lastRow = rows[rows.length - 1];
|
|
33868
34046
|
const lastRowCells = lastRow.getChildren();
|
|
33869
34047
|
const lastCell = lastRowCells[index2];
|
|
33870
|
-
console.log(`[HoverPlugin] Selecting column ${index2}, rows: ${rows.length}`);
|
|
33871
34048
|
if (firstCell && lastCell) {
|
|
33872
34049
|
firstCell.selectEnd();
|
|
33873
34050
|
const selection = firstCell.select();
|
|
33874
34051
|
if (selection) {
|
|
33875
34052
|
selection.focus.set(lastCell.getKey(), lastCell.getChildrenSize(), "element");
|
|
33876
|
-
console.log("[HoverPlugin] Column selection created");
|
|
33877
34053
|
setTimeout(() => {
|
|
33878
34054
|
const firstCellDOM = editor.getElementByKey(firstCell.getKey());
|
|
33879
34055
|
if (firstCellDOM) {
|
|
@@ -33886,7 +34062,6 @@ function TableHoverActionsContainer({
|
|
|
33886
34062
|
clientY: firstCellDOM.getBoundingClientRect().top + 10
|
|
33887
34063
|
});
|
|
33888
34064
|
firstCellDOM.dispatchEvent(event);
|
|
33889
|
-
console.log("[HoverPlugin] Context menu triggered");
|
|
33890
34065
|
}
|
|
33891
34066
|
}, 50);
|
|
33892
34067
|
}
|
|
@@ -34038,9 +34213,8 @@ function TableHoverActionsContainer({
|
|
|
34038
34213
|
}
|
|
34039
34214
|
const { type, sourceIndex } = dragState;
|
|
34040
34215
|
let actualColWidths = [];
|
|
34041
|
-
let tableActualWidth = 0;
|
|
34042
34216
|
if (currentTableRef.current) {
|
|
34043
|
-
|
|
34217
|
+
currentTableRef.current.getBoundingClientRect().width;
|
|
34044
34218
|
const firstRow = currentTableRef.current.querySelector("tr");
|
|
34045
34219
|
if (firstRow) {
|
|
34046
34220
|
const cells = firstRow.querySelectorAll("td, th");
|
|
@@ -34049,10 +34223,6 @@ function TableHoverActionsContainer({
|
|
|
34049
34223
|
});
|
|
34050
34224
|
}
|
|
34051
34225
|
}
|
|
34052
|
-
console.log("[TABLE-DND] BEFORE DROP:");
|
|
34053
|
-
console.log(" - Table actual width:", tableActualWidth);
|
|
34054
|
-
console.log(" - Captured DOM column widths:", actualColWidths);
|
|
34055
|
-
console.log(" - Source index:", sourceIndex, "Target index:", targetIndex, "Type:", type);
|
|
34056
34226
|
editor.update(() => {
|
|
34057
34227
|
if (!currentTableKeyRef.current) {
|
|
34058
34228
|
return;
|
|
@@ -34064,7 +34234,6 @@ function TableHoverActionsContainer({
|
|
|
34064
34234
|
return;
|
|
34065
34235
|
}
|
|
34066
34236
|
const preservedColWidths = tableNode.getColWidths();
|
|
34067
|
-
console.log("[TABLE-DND] Lexical stored column widths:", preservedColWidths);
|
|
34068
34237
|
if (type === "row") {
|
|
34069
34238
|
const rows = tableNode.getChildren();
|
|
34070
34239
|
if (sourceIndex >= 0 && sourceIndex < rows.length && targetIndex >= 0 && targetIndex < rows.length) {
|
|
@@ -34127,34 +34296,13 @@ function TableHoverActionsContainer({
|
|
|
34127
34296
|
});
|
|
34128
34297
|
}
|
|
34129
34298
|
const widthsToRestore = actualColWidths.length > 0 ? actualColWidths : preservedColWidths;
|
|
34130
|
-
console.log("[TABLE-DND] Widths to restore:", widthsToRestore);
|
|
34131
34299
|
if (widthsToRestore && widthsToRestore.length > 0) {
|
|
34132
34300
|
tableNode.setColWidths(widthsToRestore);
|
|
34133
|
-
console.log("[TABLE-DND] Column widths restored");
|
|
34134
|
-
} else {
|
|
34135
|
-
console.log("[TABLE-DND] WARNING: No widths available to restore!");
|
|
34136
34301
|
}
|
|
34137
34302
|
} catch (error) {
|
|
34138
34303
|
console.error(`[TABLE-DND] ERROR during swap:`, error);
|
|
34139
34304
|
}
|
|
34140
34305
|
});
|
|
34141
|
-
setTimeout(() => {
|
|
34142
|
-
if (currentTableRef.current) {
|
|
34143
|
-
const newTableWidth = currentTableRef.current.getBoundingClientRect().width;
|
|
34144
|
-
const firstRow = currentTableRef.current.querySelector("tr");
|
|
34145
|
-
let newColWidths = [];
|
|
34146
|
-
if (firstRow) {
|
|
34147
|
-
const cells = firstRow.querySelectorAll("td, th");
|
|
34148
|
-
newColWidths = Array.from(cells).map((cell) => {
|
|
34149
|
-
return cell.getBoundingClientRect().width;
|
|
34150
|
-
});
|
|
34151
|
-
}
|
|
34152
|
-
console.log("[TABLE-DND] AFTER DROP:");
|
|
34153
|
-
console.log(" - Table actual width:", newTableWidth);
|
|
34154
|
-
console.log(" - New DOM column widths:", newColWidths);
|
|
34155
|
-
console.log(" - Width changed:", tableActualWidth !== newTableWidth);
|
|
34156
|
-
}
|
|
34157
|
-
}, 100);
|
|
34158
34306
|
setDragState(null);
|
|
34159
34307
|
setDragPreviewLine(null);
|
|
34160
34308
|
setHighlightedRow(null);
|
|
@@ -34306,10 +34454,8 @@ function TableHoverActionsContainer({
|
|
|
34306
34454
|
style: {
|
|
34307
34455
|
position: "absolute",
|
|
34308
34456
|
left: `${dot.left - 12}px`,
|
|
34309
|
-
// Center hover zone on dot position
|
|
34310
34457
|
top: `${dot.top - 12}px`,
|
|
34311
34458
|
width: `${DOT_HOVER_SIZE + 16}px`,
|
|
34312
|
-
// Fixed larger hover zone
|
|
34313
34459
|
height: `${DOT_HOVER_SIZE + 16}px`,
|
|
34314
34460
|
display: "flex",
|
|
34315
34461
|
alignItems: "center",
|
|
@@ -34336,7 +34482,6 @@ function TableHoverActionsContainer({
|
|
|
34336
34482
|
padding: 0,
|
|
34337
34483
|
position: "relative",
|
|
34338
34484
|
transform: isHovered ? "scale(1)" : "scale(1)"
|
|
34339
|
-
// Keep centered while scaling
|
|
34340
34485
|
},
|
|
34341
34486
|
onClick: () => handleDotClick(dot.type, dot.index),
|
|
34342
34487
|
"aria-label": `Insert ${dot.type} ${dot.type === "row" ? "here" : "here"}`,
|
|
@@ -34378,11 +34523,8 @@ function TableHoverActionsContainer({
|
|
|
34378
34523
|
style: {
|
|
34379
34524
|
position: "absolute",
|
|
34380
34525
|
left: `${selector.left - (isDirectHover ? 4 : 0)}px`,
|
|
34381
|
-
// Expand left when hovered
|
|
34382
34526
|
top: `${selector.top - (isDirectHover ? 4 : 0)}px`,
|
|
34383
|
-
// Expand top when hovered
|
|
34384
34527
|
width: `${isDirectHover ? SELECTOR_BUTTON_SIZE + 8 : SELECTOR_BUTTON_SIZE}px`,
|
|
34385
|
-
// Expand to ~20px when hovered
|
|
34386
34528
|
height: `${isDirectHover ? SELECTOR_BUTTON_SIZE + 8 : SELECTOR_BUTTON_SIZE}px`,
|
|
34387
34529
|
zIndex: 1e3,
|
|
34388
34530
|
opacity: isDragging ? 0.5 : 1
|
|
@@ -34713,6 +34855,137 @@ function TableHoverActionsPlugin({
|
|
|
34713
34855
|
anchorElem
|
|
34714
34856
|
) : null;
|
|
34715
34857
|
}
|
|
34858
|
+
function TableImageAutoResizePlugin() {
|
|
34859
|
+
const [editor] = useLexicalComposerContext();
|
|
34860
|
+
useEffect$1(() => {
|
|
34861
|
+
const processedImages = /* @__PURE__ */ new Set();
|
|
34862
|
+
const processImageNode = (nodeKey) => {
|
|
34863
|
+
if (processedImages.has(nodeKey)) {
|
|
34864
|
+
return;
|
|
34865
|
+
}
|
|
34866
|
+
editor.getEditorState().read(() => {
|
|
34867
|
+
const node = $getNodeByKey(nodeKey);
|
|
34868
|
+
if (!node) {
|
|
34869
|
+
return;
|
|
34870
|
+
}
|
|
34871
|
+
const nodeType = node.getType();
|
|
34872
|
+
if (nodeType !== "image" && nodeType !== "inline-image") {
|
|
34873
|
+
return;
|
|
34874
|
+
}
|
|
34875
|
+
const tableCell = $findMatchingParent(node, $isTableCellNode);
|
|
34876
|
+
if (!tableCell || !$isTableCellNode(tableCell)) {
|
|
34877
|
+
return;
|
|
34878
|
+
}
|
|
34879
|
+
processedImages.add(nodeKey);
|
|
34880
|
+
try {
|
|
34881
|
+
const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCell);
|
|
34882
|
+
if (!$isTableNode(tableNode)) {
|
|
34883
|
+
return;
|
|
34884
|
+
}
|
|
34885
|
+
const columnIndex = $getTableColumnIndexFromTableCellNode(tableCell);
|
|
34886
|
+
const tableCellKey = tableCell.getKey();
|
|
34887
|
+
console.log(`[TableImageResize] Detected image node ${nodeKey} in table cell column ${columnIndex}`);
|
|
34888
|
+
const scheduleResize = (delay) => {
|
|
34889
|
+
setTimeout(() => {
|
|
34890
|
+
const domElement = editor.getElementByKey(nodeKey);
|
|
34891
|
+
if (!domElement) {
|
|
34892
|
+
console.warn(`[TableImageResize] Could not find DOM element for node ${nodeKey}`);
|
|
34893
|
+
return;
|
|
34894
|
+
}
|
|
34895
|
+
const imgElement = domElement.querySelector("img") || (domElement.tagName === "IMG" ? domElement : null);
|
|
34896
|
+
if (!imgElement) {
|
|
34897
|
+
console.warn(`[TableImageResize] Could not find img element in node ${nodeKey}`);
|
|
34898
|
+
return;
|
|
34899
|
+
}
|
|
34900
|
+
const img = imgElement;
|
|
34901
|
+
const updateColumnWidth = () => {
|
|
34902
|
+
editor.update(() => {
|
|
34903
|
+
const currentTableCell = $getNodeByKey(tableCellKey);
|
|
34904
|
+
if (!currentTableCell || !$isTableCellNode(currentTableCell)) {
|
|
34905
|
+
return;
|
|
34906
|
+
}
|
|
34907
|
+
const currentTableNode = $getTableNodeFromLexicalNodeOrThrow(currentTableCell);
|
|
34908
|
+
if (!$isTableNode(currentTableNode)) {
|
|
34909
|
+
return;
|
|
34910
|
+
}
|
|
34911
|
+
const imageWidth = img.naturalWidth || img.width || img.offsetWidth;
|
|
34912
|
+
if (!imageWidth || imageWidth === 0) {
|
|
34913
|
+
console.warn(`[TableImageResize] Image width is 0, skipping resize`);
|
|
34914
|
+
return;
|
|
34915
|
+
}
|
|
34916
|
+
const desiredWidth = imageWidth + 40;
|
|
34917
|
+
const currentWidths = currentTableNode.getColWidths() || [];
|
|
34918
|
+
const newWidths = [...currentWidths];
|
|
34919
|
+
const firstRow = currentTableNode.getFirstChild();
|
|
34920
|
+
if (!firstRow || !$isTableRowNode(firstRow)) {
|
|
34921
|
+
return;
|
|
34922
|
+
}
|
|
34923
|
+
const columnCount = firstRow.getChildrenSize();
|
|
34924
|
+
while (newWidths.length < columnCount) {
|
|
34925
|
+
newWidths.push(0);
|
|
34926
|
+
}
|
|
34927
|
+
const currentWidth = newWidths[columnIndex] || 0;
|
|
34928
|
+
if (desiredWidth > currentWidth) {
|
|
34929
|
+
newWidths[columnIndex] = desiredWidth;
|
|
34930
|
+
currentTableNode.setColWidths(newWidths);
|
|
34931
|
+
console.log(`[TableImageResize] ✓ Resized column ${columnIndex} from ${currentWidth}px to ${desiredWidth}px (image: ${imageWidth}px)`);
|
|
34932
|
+
} else {
|
|
34933
|
+
console.log(`[TableImageResize] Column ${columnIndex} already wide enough (${currentWidth}px >= ${desiredWidth}px)`);
|
|
34934
|
+
}
|
|
34935
|
+
});
|
|
34936
|
+
};
|
|
34937
|
+
if (img.complete && img.naturalWidth > 0) {
|
|
34938
|
+
console.log(`[TableImageResize] Image already loaded (${img.naturalWidth}px), updating immediately`);
|
|
34939
|
+
updateColumnWidth();
|
|
34940
|
+
} else {
|
|
34941
|
+
console.log(`[TableImageResize] Waiting for image to load...`);
|
|
34942
|
+
img.addEventListener("load", () => {
|
|
34943
|
+
console.log(`[TableImageResize] Image loaded (${img.naturalWidth}px)`);
|
|
34944
|
+
updateColumnWidth();
|
|
34945
|
+
}, { once: true });
|
|
34946
|
+
setTimeout(() => {
|
|
34947
|
+
if (img.complete || img.naturalWidth > 0) {
|
|
34948
|
+
console.log(`[TableImageResize] Fallback check - image ready (${img.naturalWidth}px)`);
|
|
34949
|
+
updateColumnWidth();
|
|
34950
|
+
} else {
|
|
34951
|
+
console.warn(`[TableImageResize] Image still not loaded after timeout`);
|
|
34952
|
+
}
|
|
34953
|
+
}, 3e3);
|
|
34954
|
+
}
|
|
34955
|
+
}, delay);
|
|
34956
|
+
};
|
|
34957
|
+
scheduleResize(100);
|
|
34958
|
+
scheduleResize(500);
|
|
34959
|
+
scheduleResize(1500);
|
|
34960
|
+
} catch (error) {
|
|
34961
|
+
console.warn("[TableImageResize] Error processing image:", error);
|
|
34962
|
+
}
|
|
34963
|
+
});
|
|
34964
|
+
};
|
|
34965
|
+
let previousNodeKeys = /* @__PURE__ */ new Set();
|
|
34966
|
+
const unregisterUpdateListener = editor.registerUpdateListener(({ editorState, dirtyElements, dirtyLeaves }) => {
|
|
34967
|
+
editorState.read(() => {
|
|
34968
|
+
const nodeMap = editorState._nodeMap;
|
|
34969
|
+
const currentNodeKeys = /* @__PURE__ */ new Set();
|
|
34970
|
+
nodeMap.forEach((node, nodeKey) => {
|
|
34971
|
+
currentNodeKeys.add(nodeKey);
|
|
34972
|
+
const nodeType = node.getType();
|
|
34973
|
+
if (nodeType === "image" || nodeType === "inline-image") {
|
|
34974
|
+
if (!previousNodeKeys.has(nodeKey) || dirtyElements.size > 0 || dirtyLeaves.size > 0) {
|
|
34975
|
+
processImageNode(nodeKey);
|
|
34976
|
+
}
|
|
34977
|
+
}
|
|
34978
|
+
});
|
|
34979
|
+
previousNodeKeys = currentNodeKeys;
|
|
34980
|
+
});
|
|
34981
|
+
});
|
|
34982
|
+
return () => {
|
|
34983
|
+
unregisterUpdateListener();
|
|
34984
|
+
processedImages.clear();
|
|
34985
|
+
};
|
|
34986
|
+
}, [editor]);
|
|
34987
|
+
return null;
|
|
34988
|
+
}
|
|
34716
34989
|
const WordCountPlugin = () => {
|
|
34717
34990
|
const [editor] = useLexicalComposerContext();
|
|
34718
34991
|
const [stats, setStats] = useState$1({
|
|
@@ -35070,6 +35343,7 @@ const ConfigurableEditor = ({
|
|
|
35070
35343
|
hasHorizontalScroll: true
|
|
35071
35344
|
}
|
|
35072
35345
|
),
|
|
35346
|
+
/* @__PURE__ */ jsx(TableImageAutoResizePlugin, {}),
|
|
35073
35347
|
/* @__PURE__ */ jsx(TableCellResizerPlugin, {}),
|
|
35074
35348
|
/* @__PURE__ */ jsx(EmbedPreviewPlugin, {}),
|
|
35075
35349
|
config.htmlViewOption && !config.toolbarOptions.enableHtmlViewToggle && /* @__PURE__ */ jsx(HtmlViewTogglePlugin, {})
|
|
@@ -35254,4 +35528,4 @@ export {
|
|
|
35254
35528
|
useHtmlView as u,
|
|
35255
35529
|
verifyApiKey as v
|
|
35256
35530
|
};
|
|
35257
|
-
//# sourceMappingURL=index-
|
|
35531
|
+
//# sourceMappingURL=index-ca05509b.js.map
|