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.
@@ -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, $getNodeTriplet, $getTableRowIndexFromTableCellNode, $insertTableRow__EXPERIMENTAL, $getTableColumnIndexFromTableCellNode, $insertTableColumn__EXPERIMENTAL, $deleteTableRow__EXPERIMENTAL, $deleteTableColumn__EXPERIMENTAL, $unmergeCell, $computeTableMapSkipCellCheck, getDOMCellFromTarget, $getTableAndElementByKey } from "@lexical/table";
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-d292603a.js"));
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-e0dbaf6d.js"));
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-655f7464.js").then((n) => n.h);
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-7796d91e.js").then((n) => n.h);
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 [stripingColor, setStripingColor] = useState$1("");
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(selection.anchor.getNode());
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
- }, [contextRef, dropDownRef, editor, contextMenuPosition, chevronPositionRef]);
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 applyRowStriping = useCallback((color) => {
32472
- editor.update(() => {
32473
- if (tableCellNode.isAttached()) {
32474
- const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
32475
- if (tableNode) {
32476
- tableNode.setRowStriping(true);
32477
- const tableElement = editor.getElementByKey(tableNode.getKey());
32478
- if (tableElement instanceof HTMLElement) {
32479
- tableElement.style.setProperty("--table-striping-color", color);
32480
- tableElement.classList.add("table-custom-striping");
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
- $clearTableSelectionInline();
32485
- });
32486
- }, [editor, tableCellNode, $clearTableSelectionInline]);
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("background-color", value, "important");
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("Cell Background Color", (closeModal) => /* @__PURE__ */ jsx(
32588
- ColorPicker,
32589
- {
32590
- color: backgroundColor,
32591
- onApply: (value) => {
32592
- handleCellBackgroundColor(value);
32593
- closeModal();
32594
- setIsMenuOpen(false);
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
- ), true);
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("Row striping color", (closeModal) => /* @__PURE__ */ jsx(
32611
- ColorPicker,
32612
- {
32613
- color: stripingColor,
32614
- onApply: (value) => {
32615
- setStripingColor(value);
32616
- applyRowStriping(value);
32617
- closeModal();
32618
- setIsMenuOpen(false);
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
- ), true);
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, { capture: true, passive: true });
33055
+ scrollableParent.addEventListener("scroll", handleScroll2, {
33056
+ capture: true,
33057
+ passive: true
33058
+ });
32893
33059
  }
32894
- window.addEventListener("scroll", handleScroll2, { capture: true, passive: true });
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 = { top: rect.top, left: rect.left, right: rect.right, bottom: rect.bottom };
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
- newDots.push({
33606
- left: dotLeft,
33607
- top: dotTop,
33608
- type: "row",
33609
- index: index2 + 1,
33610
- // This dot will insert at position index+1 (after current row)
33611
- isHovered: false
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
- newDots.push({
33618
- left: tableRect.left - editorLeft - 20,
33619
- top: lastRowRect.bottom - editorTop - DOT_SIZE / 2,
33620
- type: "row",
33621
- index: rows.length,
33622
- isHovered: false
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
- newDots.push({
33633
- left: dotLeft,
33634
- top: dotTop,
33635
- type: "column",
33636
- index: index2 + 1,
33637
- // This dot will insert at position index+1 (after current column)
33638
- isHovered: false
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
- newDots.push({
33645
- left: lastCellRect.right - editorLeft - DOT_SIZE / 2,
33646
- top: tableRect.top - editorTop - 12,
33647
- type: "column",
33648
- index: cells.length,
33649
- isHovered: false
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
- newSelectors.push({
33658
- left: buttonLeft,
33659
- top: buttonTop,
33660
- type: "row",
33661
- index: index2,
33662
- // The actual row index
33663
- isHovered: false
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
- newSelectors.push({
33674
- left: buttonLeft,
33675
- top: buttonTop,
33676
- type: "column",
33677
- index: index2,
33678
- // The actual column index
33679
- isHovered: false
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
- tableActualWidth = currentTableRef.current.getBoundingClientRect().width;
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-d5866754.js.map
35531
+ //# sourceMappingURL=index-ca05509b.js.map