@uniformdev/design-system 19.185.1-alpha.8 → 19.186.1

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/esm/index.js CHANGED
@@ -17736,7 +17736,8 @@ var KeyValueInput = ({
17736
17736
  onChange: (itemValue) => handleUpdateOptionRow(index, itemValue),
17737
17737
  onDelete: () => handleDeleteOptionRow(index),
17738
17738
  onFocusChange: handleFocusChange,
17739
- "data-testid": "key-value-input-item"
17739
+ "data-testid": "key-value-input-item",
17740
+ onEnter: handleAddOptionRow
17740
17741
  },
17741
17742
  isDragging ? id : index
17742
17743
  )) })
@@ -17771,7 +17772,8 @@ var KeyValueInputItem = ({
17771
17772
  error,
17772
17773
  onFocusChange,
17773
17774
  disabledDelete = false,
17774
- disabledDnd = false
17775
+ disabledDnd = false,
17776
+ onEnter
17775
17777
  }) => {
17776
17778
  const { attributes, listeners, setNodeRef, transform, transition, setActivatorNodeRef, isSorting } = useSortable({
17777
17779
  id,
@@ -17781,6 +17783,11 @@ var KeyValueInputItem = ({
17781
17783
  transform: CSS.Transform.toString(transform),
17782
17784
  transition
17783
17785
  };
17786
+ const handleEnter = (e) => {
17787
+ if (e.key === "Enter") {
17788
+ onEnter();
17789
+ }
17790
+ };
17784
17791
  return /* @__PURE__ */ jsxs57("div", { css: rowWrapper, ref: setNodeRef, style, children: [
17785
17792
  /* @__PURE__ */ jsx92(DragHandle, { disableDnd: disabledDnd, ref: setActivatorNodeRef, ...attributes, ...listeners }),
17786
17793
  /* @__PURE__ */ jsxs57("div", { css: SelectKeyValueRowStyles, "data-testid": "key-value-input-item", children: [
@@ -17800,6 +17807,7 @@ var KeyValueInputItem = ({
17800
17807
  },
17801
17808
  onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
17802
17809
  onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
17810
+ onKeyDown: handleEnter,
17803
17811
  value: value.key,
17804
17812
  errorMessage: isSorting ? void 0 : error == null ? void 0 : error.key,
17805
17813
  "data-testid": "key"
@@ -17811,12 +17819,15 @@ var KeyValueInputItem = ({
17811
17819
  label: valueLabel,
17812
17820
  showLabel: false,
17813
17821
  disabled: disabled2,
17814
- onChange: (e) => onChange == null ? void 0 : onChange({
17815
- key: value.key,
17816
- value: e.currentTarget.value
17817
- }),
17822
+ onChange: (e) => {
17823
+ onChange == null ? void 0 : onChange({
17824
+ key: value.key,
17825
+ value: e.currentTarget.value
17826
+ });
17827
+ },
17818
17828
  onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
17819
17829
  onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
17830
+ onKeyDown: handleEnter,
17820
17831
  value: value.value,
17821
17832
  errorMessage: isSorting ? void 0 : error == null ? void 0 : error.value,
17822
17833
  "data-testid": "value"
@@ -19923,8 +19934,8 @@ import { useState as useState15 } from "react";
19923
19934
 
19924
19935
  // src/components/ParameterInputs/ParameterLabel.tsx
19925
19936
  import { jsx as jsx121 } from "@emotion/react/jsx-runtime";
19926
- var ParameterLabel = ({ id, asSpan, children, ...props }) => {
19927
- return !asSpan ? /* @__PURE__ */ jsx121("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx121("span", { "aria-labelledby": id, css: labelText2, children });
19937
+ var ParameterLabel = ({ id, asSpan, children, testId, ...props }) => {
19938
+ return !asSpan ? /* @__PURE__ */ jsx121("label", { ...props, htmlFor: id, css: labelText2, "data-testid": testId, children }) : /* @__PURE__ */ jsx121("span", { "aria-labelledby": id, css: labelText2, children });
19928
19939
  };
19929
19940
 
19930
19941
  // src/components/ParameterInputs/ParameterMenuButton.tsx
@@ -20049,7 +20060,7 @@ var ParameterShell = ({
20049
20060
  label,
20050
20061
  labelTrailingIcon != null ? labelTrailingIcon : null
20051
20062
  ] }),
20052
- !title2 ? null : /* @__PURE__ */ jsxs81(ParameterLabel, { id, asSpan: true, children: [
20063
+ !title2 ? null : /* @__PURE__ */ jsxs81(ParameterLabel, { id, asSpan: true, testId: "parameter-label", children: [
20053
20064
  labelLeadingIcon != null ? labelLeadingIcon : null,
20054
20065
  title2,
20055
20066
  labelTrailingIcon != null ? labelTrailingIcon : null
@@ -20442,10 +20453,6 @@ var richTextBuiltInElements = [
20442
20453
  label: "Table",
20443
20454
  type: "table"
20444
20455
  },
20445
- {
20446
- label: "Asset",
20447
- type: "asset"
20448
- },
20449
20456
  {
20450
20457
  label: "Dynamic Token",
20451
20458
  type: "variable"
@@ -21453,1269 +21460,1242 @@ function ListIndentPlugin({ maxDepth }) {
21453
21460
  return null;
21454
21461
  }
21455
21462
 
21456
- // src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
21463
+ // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
21457
21464
  import { css as css98 } from "@emotion/react";
21465
+ import { $createCodeNode } from "@lexical/code";
21466
+ import {
21467
+ $isListNode as $isListNode2,
21468
+ INSERT_ORDERED_LIST_COMMAND,
21469
+ INSERT_UNORDERED_LIST_COMMAND,
21470
+ ListNode as ListNode2,
21471
+ REMOVE_LIST_COMMAND
21472
+ } from "@lexical/list";
21458
21473
  import { useLexicalComposerContext as useLexicalComposerContext4 } from "@lexical/react/LexicalComposerContext";
21459
- import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
21474
+ import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
21475
+ import { $setBlocksType } from "@lexical/selection";
21476
+ import { $createTableNodeWithDimensions } from "@lexical/table";
21477
+ import { $findMatchingParent, $getNearestNodeOfType as $getNearestNodeOfType2 } from "@lexical/utils";
21460
21478
  import {
21461
- $deleteTableColumn__EXPERIMENTAL,
21462
- $deleteTableRow__EXPERIMENTAL,
21463
- $getTableCellNodeFromLexicalNode,
21464
- $getTableColumnIndexFromTableCellNode,
21465
- $getTableNodeFromLexicalNodeOrThrow,
21466
- $getTableRowIndexFromTableCellNode,
21467
- $insertTableColumn__EXPERIMENTAL,
21468
- $insertTableRow__EXPERIMENTAL,
21469
- $isTableCellNode,
21470
- $isTableRowNode,
21471
- $isTableSelection,
21472
- getTableObserverFromTableElement,
21473
- TableCellHeaderStates,
21474
- TableCellNode
21475
- } from "@lexical/table";
21476
- import { $getRoot, $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection3 } from "lexical";
21477
- import { forwardRef as forwardRef22, useCallback as useCallback11, useEffect as useEffect20, useLayoutEffect, useState as useState17 } from "react";
21478
- import { jsx as jsx130, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
21479
- function computeSelectionCount(selection) {
21480
- const selectionShape = selection.getShape();
21481
- return {
21482
- columns: selectionShape.toX - selectionShape.fromX + 1,
21483
- rows: selectionShape.toY - selectionShape.fromY + 1
21484
- };
21485
- }
21486
- var tableActionMenuTrigger = css98`
21487
- position: absolute;
21488
- transform: translate(calc(-100% - 1px), 1px);
21479
+ $createParagraphNode,
21480
+ $getSelection as $getSelection3,
21481
+ $insertNodes,
21482
+ $isRangeSelection as $isRangeSelection3,
21483
+ $isRootOrShadowRoot,
21484
+ COMMAND_PRIORITY_CRITICAL as COMMAND_PRIORITY_CRITICAL2,
21485
+ FORMAT_TEXT_COMMAND,
21486
+ SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND2
21487
+ } from "lexical";
21488
+ import { useCallback as useCallback11, useEffect as useEffect20, useMemo as useMemo6, useState as useState17 } from "react";
21489
+ import { Fragment as Fragment19, jsx as jsx130, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
21490
+ var toolbar = css98`
21491
+ ${scrollbarStyles}
21492
+ background: var(--gray-50);
21493
+ border-radius: var(--rounded-base);
21494
+ display: flex;
21495
+ /* We add 1px because we use a 1px wide separator */
21496
+ gap: calc(var(--spacing-sm) + 1px);
21497
+ margin: 0 0 calc(var(--spacing-sm) + var(--spacing-xs)) 0;
21498
+ overflow: auto;
21499
+ padding: var(--spacing-sm);
21500
+ position: sticky;
21501
+ top: calc(var(--spacing-sm) * -2);
21502
+ z-index: 10;
21489
21503
  `;
21490
- var TableActionMenuTrigger = forwardRef22((props, ref) => {
21491
- const { tableCellEl, positioningAnchorEl, ...rest } = props;
21492
- const [coordinates, setCoordinates] = useState17({ x: 0, y: 0 });
21493
- useLayoutEffect(() => {
21494
- const rect = tableCellEl.getBoundingClientRect();
21495
- const parentRect = positioningAnchorEl.getBoundingClientRect();
21496
- const relativeX = rect.right - parentRect.left + positioningAnchorEl.scrollLeft;
21497
- const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
21498
- setCoordinates({ x: relativeX, y: relativeY });
21499
- }, [tableCellEl, positioningAnchorEl]);
21500
- return /* @__PURE__ */ jsx130(
21501
- IconButton,
21502
- {
21503
- ref,
21504
- css: [
21505
- tableActionMenuTrigger,
21506
- {
21507
- top: coordinates.y,
21508
- left: coordinates.x
21509
- }
21510
- ],
21511
- size: "xs",
21512
- buttonType: "unimportant",
21513
- ...rest,
21514
- children: /* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
21515
- }
21516
- );
21517
- });
21518
- TableActionMenuTrigger.displayName = "TableActionMenuTrigger";
21519
- function TableActionMenu({
21520
- tableCellNode: _tableCellNode,
21521
- menuPortalEl,
21522
- tableCellEl,
21523
- positioningAnchorEl
21524
- }) {
21504
+ var toolbarGroup = css98`
21505
+ display: flex;
21506
+ flex-shrink: 0;
21507
+ gap: var(--spacing-xs);
21508
+ position: relative;
21509
+
21510
+ &:not(:first-child)::before {
21511
+ background-color: var(--gray-300);
21512
+ content: '';
21513
+ display: block;
21514
+ height: 24px;
21515
+ left: calc(var(--spacing-xs) * -1);
21516
+ position: absolute;
21517
+ top: 4px;
21518
+ width: 1px;
21519
+ }
21520
+ `;
21521
+ var richTextToolbarButton = css98`
21522
+ align-items: center;
21523
+ appearance: none;
21524
+ border: 0;
21525
+ border-radius: var(--rounded-sm);
21526
+ box-shadow: none;
21527
+ color: var(--gray-900);
21528
+ display: flex;
21529
+ flex-shrink: 0;
21530
+ height: 32px;
21531
+ justify-content: center;
21532
+ min-width: 32px;
21533
+ padding: 0 var(--spacing-sm);
21534
+ `;
21535
+ var richTextToolbarButtonActive = css98`
21536
+ background: var(--gray-200);
21537
+ `;
21538
+ var textStyleButton = css98`
21539
+ justify-content: space-between;
21540
+ min-width: 7rem;
21541
+ `;
21542
+ var toolbarIcon = css98`
21543
+ color: inherit;
21544
+ `;
21545
+ var toolbarChevron = css98`
21546
+ margin-left: var(--spacing-xs);
21547
+ `;
21548
+ var RichTextToolbarIcon = ({ icon }) => {
21549
+ return /* @__PURE__ */ jsx130(Icon, { icon, css: toolbarIcon, size: "1rem" });
21550
+ };
21551
+ var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
21552
+ ["bold", "format-bold"],
21553
+ ["italic", "format-italic"],
21554
+ ["underline", "format-underline"],
21555
+ ["strikethrough", "format-strike"],
21556
+ ["code", "format-code"],
21557
+ ["superscript", "format-superscript"],
21558
+ ["subscript", "format-subscript"]
21559
+ ]);
21560
+ var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
21561
+ var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
21562
+ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
21525
21563
  const [editor] = useLexicalComposerContext4();
21526
- const [tableCellNode, updateTableCellNode] = useState17(_tableCellNode);
21527
- const [selectionCounts, updateSelectionCounts] = useState17({
21528
- columns: 1,
21529
- rows: 1
21530
- });
21531
- const [menuTriggerKey, setMenuTriggerKey] = useState17(0);
21532
- const incrementMenuTriggerKey = () => {
21533
- setMenuTriggerKey((key) => key += 1);
21534
- };
21535
- useEffect20(() => {
21536
- return editor.registerMutationListener(
21537
- TableCellNode,
21538
- (nodeMutations) => {
21539
- const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
21540
- if (nodeUpdated) {
21541
- editor.getEditorState().read(() => {
21542
- updateTableCellNode(tableCellNode.getLatest());
21564
+ const {
21565
+ activeElement,
21566
+ setActiveElement,
21567
+ activeFormats,
21568
+ setActiveFormats,
21569
+ visibleFormatsWithIcon,
21570
+ visibleFormatsWithoutIcon,
21571
+ visibleTextualElements,
21572
+ isLink,
21573
+ setIsLink,
21574
+ linkElementVisible,
21575
+ visibleLists,
21576
+ codeElementVisible,
21577
+ quoteElementVisible,
21578
+ visibleElementsWithIcons,
21579
+ visibleInsertElementsWithIcons,
21580
+ tableElementVisible
21581
+ } = useRichTextToolbarState({ config });
21582
+ const onSelectElement = (type) => {
21583
+ if (activeElement === type) {
21584
+ return;
21585
+ }
21586
+ editor.focus(() => {
21587
+ editor.update(() => {
21588
+ const selection = $getSelection3();
21589
+ if (HEADING_ELEMENTS.includes(type)) {
21590
+ $setBlocksType(selection, () => $createHeadingNode(type));
21591
+ } else if (type === "paragraph") {
21592
+ $setBlocksType(selection, () => $createParagraphNode());
21593
+ } else if (type === "quote") {
21594
+ $setBlocksType(selection, () => $createQuoteNode());
21595
+ } else if (type === "code") {
21596
+ $setBlocksType(selection, () => $createCodeNode());
21597
+ } else if (type === "table" && onInsertTable) {
21598
+ onInsertTable().then((dimensions) => {
21599
+ if (!dimensions) {
21600
+ return;
21601
+ }
21602
+ const { rows, columns } = dimensions;
21603
+ editor.focus(() => {
21604
+ editor.update(() => {
21605
+ $insertNodes([$createTableNodeWithDimensions(rows, columns, false)]);
21606
+ });
21607
+ });
21543
21608
  });
21544
21609
  }
21545
- },
21546
- { skipInitialization: true }
21547
- );
21548
- }, [editor, tableCellNode]);
21549
- useEffect20(() => {
21550
- editor.getEditorState().read(() => {
21551
- const selection = $getSelection3();
21552
- if ($isTableSelection(selection)) {
21553
- updateSelectionCounts(computeSelectionCount(selection));
21554
- }
21610
+ });
21555
21611
  });
21556
- }, [editor]);
21557
- const clearTableSelection = useCallback11(() => {
21558
- editor.update(() => {
21559
- if (tableCellNode.isAttached()) {
21560
- const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
21561
- const tableElement2 = editor.getElementByKey(
21562
- tableNode.getKey()
21563
- );
21564
- if (!tableElement2) {
21565
- throw new Error("Expected to find tableElement in DOM");
21566
- }
21567
- const tableSelection = getTableObserverFromTableElement(tableElement2);
21568
- if (tableSelection !== null) {
21569
- tableSelection.clearHighlight();
21570
- }
21571
- tableNode.markDirty();
21572
- updateTableCellNode(tableCellNode.getLatest());
21612
+ };
21613
+ const updateToolbar = useCallback11(() => {
21614
+ const selection = $getSelection3();
21615
+ if (!$isRangeSelection3(selection)) {
21616
+ return;
21617
+ }
21618
+ const newActiveFormats = [];
21619
+ for (const format of richTextBuiltInFormats) {
21620
+ if (selection.hasFormat(format.type)) {
21621
+ newActiveFormats.push(format.type);
21573
21622
  }
21574
- const rootNode = $getRoot();
21575
- rootNode.selectStart();
21623
+ }
21624
+ setActiveFormats(newActiveFormats);
21625
+ const anchorNode = selection.anchor.getNode();
21626
+ let element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent(anchorNode, (e) => {
21627
+ const parent = e.getParent();
21628
+ return parent !== null && $isRootOrShadowRoot(parent);
21576
21629
  });
21577
- }, [editor, tableCellNode]);
21578
- const insertTableRowAtSelection = useCallback11(
21579
- (shouldInsertAfter) => {
21580
- editor.update(() => {
21581
- $insertTableRow__EXPERIMENTAL(shouldInsertAfter);
21582
- });
21583
- incrementMenuTriggerKey();
21584
- },
21585
- [editor]
21586
- );
21587
- const insertTableColumnAtSelection = useCallback11(
21588
- (shouldInsertAfter) => {
21589
- editor.update(() => {
21590
- for (let i = 0; i < selectionCounts.columns; i++) {
21591
- $insertTableColumn__EXPERIMENTAL(shouldInsertAfter);
21592
- }
21593
- });
21594
- incrementMenuTriggerKey();
21595
- },
21596
- [editor, selectionCounts.columns]
21597
- );
21598
- const deleteTableRowAtSelection = useCallback11(() => {
21599
- editor.update(() => {
21600
- $deleteTableRow__EXPERIMENTAL();
21601
- });
21602
- incrementMenuTriggerKey();
21603
- }, [editor]);
21604
- const deleteTableAtSelection = useCallback11(() => {
21605
- editor.update(() => {
21606
- const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
21607
- tableNode.remove();
21608
- clearTableSelection();
21609
- });
21610
- }, [editor, tableCellNode, clearTableSelection]);
21611
- const deleteTableColumnAtSelection = useCallback11(() => {
21612
- editor.update(() => {
21613
- $deleteTableColumn__EXPERIMENTAL();
21614
- });
21615
- incrementMenuTriggerKey();
21616
- }, [editor]);
21617
- const toggleTableRowIsHeader = useCallback11(() => {
21618
- editor.update(() => {
21619
- const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
21620
- const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
21621
- const tableRows = tableNode.getChildren();
21622
- if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
21623
- throw new Error("Expected table cell to be inside of table row.");
21624
- }
21625
- const tableRow2 = tableRows[tableRowIndex];
21626
- if (!$isTableRowNode(tableRow2)) {
21627
- throw new Error("Expected table row");
21630
+ if (element === null) {
21631
+ element = anchorNode.getTopLevelElementOrThrow();
21632
+ }
21633
+ const elementKey = element.getKey();
21634
+ const elementDOM = editor.getElementByKey(elementKey);
21635
+ if (elementDOM !== null) {
21636
+ if ($isListNode2(element)) {
21637
+ const parentList = $getNearestNodeOfType2(anchorNode, ListNode2);
21638
+ const type = parentList ? parentList.getListType() : element.getListType();
21639
+ setActiveElement(type === "bullet" ? "unorderedList" : "orderedList");
21640
+ } else {
21641
+ const type = $isHeadingNode(element) ? element.getTag() : element.getType();
21642
+ setActiveElement(type);
21628
21643
  }
21629
- tableRow2.getChildren().forEach((tableCell) => {
21630
- if (!$isTableCellNode(tableCell)) {
21631
- throw new Error("Expected table cell");
21632
- }
21633
- tableCell.toggleHeaderStyle(TableCellHeaderStates.ROW);
21644
+ }
21645
+ const node = getSelectedNode(selection);
21646
+ if (getLinkAncestor(node) !== null) {
21647
+ setIsLink(true);
21648
+ } else {
21649
+ setIsLink(false);
21650
+ }
21651
+ }, [editor, setActiveElement, setActiveFormats, setIsLink]);
21652
+ useEffect20(() => {
21653
+ return editor.registerCommand(
21654
+ SELECTION_CHANGE_COMMAND2,
21655
+ (_payload) => {
21656
+ updateToolbar();
21657
+ return false;
21658
+ },
21659
+ COMMAND_PRIORITY_CRITICAL2
21660
+ );
21661
+ }, [editor, updateToolbar]);
21662
+ useEffect20(() => {
21663
+ return editor.registerUpdateListener(({ editorState }) => {
21664
+ requestAnimationFrame(() => {
21665
+ editorState.read(() => {
21666
+ updateToolbar();
21667
+ });
21634
21668
  });
21635
- clearTableSelection();
21636
21669
  });
21637
- }, [editor, tableCellNode, clearTableSelection]);
21638
- const toggleTableColumnIsHeader = useCallback11(() => {
21639
- editor.update(() => {
21640
- const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
21641
- const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
21642
- const tableRows = tableNode.getChildren();
21643
- const maxRowsLength = Math.max(...tableRows.map((row) => row.getChildren().length));
21644
- if (tableColumnIndex >= maxRowsLength || tableColumnIndex < 0) {
21645
- throw new Error("Expected table cell to be inside of table row.");
21670
+ }, [editor, updateToolbar]);
21671
+ return /* @__PURE__ */ jsxs86("div", { css: toolbar, children: [
21672
+ /* @__PURE__ */ jsxs86(
21673
+ Menu,
21674
+ {
21675
+ menuTrigger: /* @__PURE__ */ jsxs86("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", children: [
21676
+ visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
21677
+ " ",
21678
+ /* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
21679
+ ] }),
21680
+ placement: "bottom-start",
21681
+ children: [
21682
+ [
21683
+ {
21684
+ label: "Normal",
21685
+ type: "paragraph"
21686
+ },
21687
+ ...visibleTextualElements
21688
+ ].map((element) => /* @__PURE__ */ jsx130(
21689
+ MenuItem,
21690
+ {
21691
+ onClick: () => {
21692
+ onSelectElement(element.type);
21693
+ },
21694
+ children: element.label
21695
+ },
21696
+ element.type
21697
+ )),
21698
+ visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx130(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
21699
+ ]
21646
21700
  }
21647
- for (let r = 0; r < tableRows.length; r++) {
21648
- const tableRow2 = tableRows[r];
21649
- if (!$isTableRowNode(tableRow2)) {
21650
- throw new Error("Expected table row");
21651
- }
21652
- const tableCells = tableRow2.getChildren();
21653
- if (tableColumnIndex >= tableCells.length) {
21654
- continue;
21701
+ ),
21702
+ visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs86("div", { css: toolbarGroup, children: [
21703
+ visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx130(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx130(
21704
+ "button",
21705
+ {
21706
+ onClick: () => {
21707
+ editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
21708
+ },
21709
+ css: [
21710
+ richTextToolbarButton,
21711
+ activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
21712
+ ],
21713
+ children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
21655
21714
  }
21656
- const tableCell = tableCells[tableColumnIndex];
21657
- if (!$isTableCellNode(tableCell)) {
21658
- throw new Error("Expected table cell");
21715
+ ) }, format.type)),
21716
+ visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx130(
21717
+ Menu,
21718
+ {
21719
+ menuLabel: "Alternative text styles",
21720
+ menuTrigger: /* @__PURE__ */ jsx130("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx130(Icon, { icon: "more-alt", css: toolbarIcon }) }),
21721
+ placement: "bottom-start",
21722
+ children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx130(
21723
+ MenuItem,
21724
+ {
21725
+ onClick: () => {
21726
+ editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
21727
+ },
21728
+ children: format.label
21729
+ },
21730
+ format.type
21731
+ ))
21659
21732
  }
21660
- tableCell.toggleHeaderStyle(TableCellHeaderStates.COLUMN);
21661
- }
21662
- clearTableSelection();
21663
- });
21664
- }, [editor, tableCellNode, clearTableSelection]);
21665
- const menuItemCss = css98({
21666
- fontSize: "var(--fs-sm)"
21667
- });
21668
- return /* @__PURE__ */ jsxs86(
21669
- Menu,
21670
- {
21671
- menuTrigger: /* @__PURE__ */ jsx130(
21672
- TableActionMenuTrigger,
21733
+ ) : null
21734
+ ] }) : null,
21735
+ visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ jsxs86("div", { css: toolbarGroup, children: [
21736
+ linkElementVisible ? /* @__PURE__ */ jsx130(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx130(
21737
+ "button",
21673
21738
  {
21674
- tableCellEl,
21675
- positioningAnchorEl
21676
- },
21677
- menuTriggerKey
21678
- ),
21679
- portalElement: menuPortalEl,
21680
- maxMenuHeight: "300px",
21681
- children: [
21682
- /* @__PURE__ */ jsxs86(
21683
- MenuItem,
21739
+ onClick: () => {
21740
+ isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
21741
+ },
21742
+ css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
21743
+ children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "link" })
21744
+ }
21745
+ ) }) : null,
21746
+ visibleLists.size > 0 ? /* @__PURE__ */ jsxs86(Fragment19, { children: [
21747
+ visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx130(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx130(
21748
+ "button",
21684
21749
  {
21685
21750
  onClick: () => {
21686
- insertTableRowAtSelection(false);
21751
+ activeElement === "unorderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
21687
21752
  },
21688
- css: menuItemCss,
21689
- children: [
21690
- "Insert ",
21691
- selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
21692
- " above"
21693
- ]
21753
+ css: [
21754
+ richTextToolbarButton,
21755
+ activeElement === "unorderedList" ? richTextToolbarButtonActive : null
21756
+ ],
21757
+ children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "layout-list" })
21694
21758
  }
21695
- ),
21696
- /* @__PURE__ */ jsxs86(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
21697
- "Insert ",
21698
- selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
21699
- " below"
21700
- ] }),
21701
- /* @__PURE__ */ jsx130(MenuItemSeparator, {}),
21702
- /* @__PURE__ */ jsxs86(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
21703
- "Insert ",
21704
- selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
21705
- " left"
21706
- ] }),
21707
- /* @__PURE__ */ jsxs86(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
21708
- "Insert ",
21709
- selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
21710
- " right"
21711
- ] }),
21712
- /* @__PURE__ */ jsx130(MenuItemSeparator, {}),
21713
- /* @__PURE__ */ jsx130(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
21714
- /* @__PURE__ */ jsx130(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
21715
- /* @__PURE__ */ jsx130(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
21716
- /* @__PURE__ */ jsx130(MenuItemSeparator, {}),
21717
- /* @__PURE__ */ jsxs86(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
21718
- (tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "Remove" : "Add",
21719
- " ",
21720
- "row header"
21759
+ ) }) : null,
21760
+ visibleLists.has("orderedList") ? /* @__PURE__ */ jsx130(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx130(
21761
+ "button",
21762
+ {
21763
+ onClick: () => {
21764
+ activeElement === "orderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
21765
+ },
21766
+ css: [
21767
+ richTextToolbarButton,
21768
+ activeElement === "orderedList" ? richTextToolbarButtonActive : null
21769
+ ],
21770
+ children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "layout-list-numbered" })
21771
+ }
21772
+ ) }) : null
21773
+ ] }) : null,
21774
+ customControls ? customControls : null
21775
+ ] }) : null,
21776
+ visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ jsx130("div", { css: toolbarGroup, children: /* @__PURE__ */ jsxs86(
21777
+ Menu,
21778
+ {
21779
+ menuTrigger: /* @__PURE__ */ jsxs86("button", { css: richTextToolbarButton, title: "Insert block element", children: [
21780
+ "Insert",
21781
+ /* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
21721
21782
  ] }),
21722
- /* @__PURE__ */ jsxs86(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
21723
- (tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN ? "Remove" : "Add",
21724
- " ",
21725
- "column header"
21726
- ] })
21727
- ]
21728
- }
21729
- );
21730
- }
21731
- function TableCellActionMenuContainer({
21732
- menuPortalEl,
21733
- positioningAnchorEl
21734
- }) {
21735
- const [editor] = useLexicalComposerContext4();
21736
- const [tableCellNode, setTableMenuCellNode] = useState17(null);
21737
- const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState17(null);
21738
- const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState17(null);
21739
- useEffect20(() => {
21740
- const newPortalEl = document.createElement("div");
21741
- setTableMenuCellMenuPortalEl(newPortalEl);
21742
- menuPortalEl.appendChild(newPortalEl);
21743
- return () => {
21744
- newPortalEl.remove();
21745
- };
21746
- }, [menuPortalEl]);
21747
- const setTableMenuCellNodeElem = useCallback11((elem) => {
21748
- if (elem) {
21749
- _setTableMenuCellNodeEl(elem);
21750
- } else {
21751
- _setTableMenuCellNodeEl(null);
21752
- }
21753
- }, []);
21754
- const $moveMenu = useCallback11(() => {
21755
- const selection = $getSelection3();
21756
- const nativeSelection = window.getSelection();
21757
- const activeElement = document.activeElement;
21758
- if (selection == null) {
21759
- setTableMenuCellNode(null);
21760
- return;
21761
- }
21762
- const rootElement = editor.getRootElement();
21763
- if ($isRangeSelection3(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
21764
- const tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
21765
- if (tableCellNodeFromSelection == null) {
21766
- setTableMenuCellNode(null);
21767
- setTableMenuCellNodeElem(null);
21768
- return;
21783
+ placement: "bottom-start",
21784
+ children: [
21785
+ quoteElementVisible ? /* @__PURE__ */ jsx130(
21786
+ MenuItem,
21787
+ {
21788
+ onClick: () => {
21789
+ onSelectElement("quote");
21790
+ },
21791
+ icon: /* @__PURE__ */ jsx130(Icon, { icon: "quote", iconColor: "currentColor" }),
21792
+ children: "Quote"
21793
+ }
21794
+ ) : null,
21795
+ codeElementVisible ? /* @__PURE__ */ jsx130(
21796
+ MenuItem,
21797
+ {
21798
+ onClick: () => {
21799
+ onSelectElement("code");
21800
+ },
21801
+ icon: /* @__PURE__ */ jsx130(Icon, { icon: "code-slash", iconColor: "currentColor" }),
21802
+ children: "Code"
21803
+ }
21804
+ ) : null,
21805
+ tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ jsx130(
21806
+ MenuItem,
21807
+ {
21808
+ onClick: () => {
21809
+ onSelectElement("table");
21810
+ },
21811
+ icon: /* @__PURE__ */ jsx130(Icon, { icon: "view-grid", iconColor: "currentColor" }),
21812
+ children: "Table"
21813
+ }
21814
+ ) : null
21815
+ ]
21769
21816
  }
21770
- const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
21771
- if (tableCellParentNodeDOM == null) {
21772
- setTableMenuCellNode(null);
21773
- setTableMenuCellNodeElem(null);
21774
- return;
21817
+ ) }) : null
21818
+ ] });
21819
+ };
21820
+ var RichTextToolbar_default = RichTextToolbar;
21821
+ var useRichTextToolbarState = ({ config }) => {
21822
+ var _a;
21823
+ const enabledBuiltInFormats = useMemo6(() => {
21824
+ return richTextBuiltInFormats.filter((format) => {
21825
+ var _a2, _b;
21826
+ return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
21827
+ });
21828
+ }, [config]);
21829
+ const enabledBuiltInElements = useMemo6(() => {
21830
+ return richTextBuiltInElements.filter((element) => {
21831
+ var _a2, _b;
21832
+ return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
21833
+ });
21834
+ }, [config]);
21835
+ const enabledBuiltInFormatsWithIcon = useMemo6(() => {
21836
+ return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
21837
+ }, [enabledBuiltInFormats]);
21838
+ const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
21839
+ (format) => !FORMATS_WITH_ICON.has(format.type)
21840
+ );
21841
+ const [activeFormats, setActiveFormats] = useState17([]);
21842
+ const visibleFormatsWithIcon = useMemo6(() => {
21843
+ const visibleFormats = /* @__PURE__ */ new Set();
21844
+ activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
21845
+ visibleFormats.add(type);
21846
+ });
21847
+ enabledBuiltInFormatsWithIcon.forEach((format) => {
21848
+ visibleFormats.add(format.type);
21849
+ });
21850
+ return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
21851
+ }, [activeFormats, enabledBuiltInFormatsWithIcon]);
21852
+ const visibleFormatsWithoutIcon = useMemo6(() => {
21853
+ const visibleFormats = /* @__PURE__ */ new Set();
21854
+ activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
21855
+ visibleFormats.add(type);
21856
+ });
21857
+ enabledBuiltInFormatsWithoutIcon.forEach((format) => {
21858
+ visibleFormats.add(format.type);
21859
+ });
21860
+ return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
21861
+ }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
21862
+ const [activeElement, setActiveElement] = useState17("paragraph");
21863
+ const enabledTextualElements = enabledBuiltInElements.filter(
21864
+ (element) => TEXTUAL_ELEMENTS.includes(element.type)
21865
+ );
21866
+ const visibleTextualElements = useMemo6(() => {
21867
+ if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
21868
+ return enabledTextualElements;
21869
+ }
21870
+ return richTextBuiltInElements.filter(
21871
+ (element) => {
21872
+ var _a2, _b;
21873
+ return TEXTUAL_ELEMENTS.includes(element.type) && (((_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type)) || element.type === activeElement);
21775
21874
  }
21776
- setTableMenuCellNode(tableCellNodeFromSelection);
21777
- setTableMenuCellNodeElem(tableCellParentNodeDOM);
21778
- } else if (!activeElement) {
21779
- setTableMenuCellNode(null);
21780
- setTableMenuCellNodeElem(null);
21875
+ );
21876
+ }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
21877
+ const [isLink, setIsLink] = useState17(false);
21878
+ const linkElementVisible = useMemo6(() => {
21879
+ return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
21880
+ }, [isLink, enabledBuiltInElements]);
21881
+ const visibleLists = useMemo6(() => {
21882
+ return new Set(
21883
+ ["orderedList", "unorderedList"].filter(
21884
+ (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
21885
+ )
21886
+ );
21887
+ }, [activeElement, enabledBuiltInElements]);
21888
+ const quoteElementVisible = useMemo6(() => {
21889
+ return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
21890
+ }, [activeElement, enabledBuiltInElements]);
21891
+ const codeElementVisible = useMemo6(() => {
21892
+ return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
21893
+ }, [activeElement, enabledBuiltInElements]);
21894
+ const tableElementVisible = useMemo6(() => {
21895
+ return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
21896
+ }, [activeElement, enabledBuiltInElements]);
21897
+ const visibleElementsWithIcons = useMemo6(() => {
21898
+ const visibleElements = /* @__PURE__ */ new Set();
21899
+ if (linkElementVisible) {
21900
+ visibleElements.add("link");
21781
21901
  }
21782
- }, [editor, setTableMenuCellNodeElem]);
21783
- useEffect20(() => {
21784
- return editor.registerUpdateListener(() => {
21785
- editor.getEditorState().read(() => {
21786
- $moveMenu();
21902
+ if (visibleLists.size > 0) {
21903
+ visibleLists.forEach((type) => {
21904
+ visibleElements.add(type);
21787
21905
  });
21788
- });
21789
- });
21790
- return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ jsx130(
21791
- TableActionMenu,
21792
- {
21793
- tableCellNode,
21794
- menuPortalEl: tableCellMenuPortalEl,
21795
- tableCellEl: tableCellNodeEl,
21796
- positioningAnchorEl
21797
- },
21798
- tableCellNode.getKey()
21799
- );
21800
- }
21801
- function TableActionMenuPlugin({
21802
- positioningAnchorEl,
21803
- menuPortalEl
21804
- }) {
21805
- const isEditable = useLexicalEditable();
21806
- return isEditable ? /* @__PURE__ */ jsx130(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
21807
- }
21906
+ }
21907
+ return visibleElements;
21908
+ }, [linkElementVisible, visibleLists]);
21909
+ const visibleInsertElementsWithIcons = useMemo6(() => {
21910
+ const visibleElements = /* @__PURE__ */ new Set();
21911
+ if (quoteElementVisible) {
21912
+ visibleElements.add("quote");
21913
+ }
21914
+ if (codeElementVisible) {
21915
+ visibleElements.add("code");
21916
+ }
21917
+ if (tableElementVisible) {
21918
+ visibleElements.add("table");
21919
+ }
21920
+ return visibleElements;
21921
+ }, [codeElementVisible, quoteElementVisible, tableElementVisible]);
21922
+ return {
21923
+ activeFormats,
21924
+ setActiveFormats,
21925
+ activeElement,
21926
+ setActiveElement,
21927
+ visibleFormatsWithIcon,
21928
+ visibleFormatsWithoutIcon,
21929
+ visibleTextualElements,
21930
+ isLink,
21931
+ setIsLink,
21932
+ linkElementVisible,
21933
+ visibleLists,
21934
+ quoteElementVisible,
21935
+ codeElementVisible,
21936
+ tableElementVisible,
21937
+ visibleElementsWithIcons,
21938
+ visibleInsertElementsWithIcons
21939
+ };
21940
+ };
21808
21941
 
21809
- // src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
21942
+ // src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
21810
21943
  import { css as css99 } from "@emotion/react";
21811
21944
  import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
21812
- import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
21945
+ import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
21813
21946
  import {
21814
- $computeTableMapSkipCellCheck,
21815
- $getTableNodeFromLexicalNodeOrThrow as $getTableNodeFromLexicalNodeOrThrow2,
21816
- $getTableRowIndexFromTableCellNode as $getTableRowIndexFromTableCellNode2,
21817
- $isTableCellNode as $isTableCellNode2,
21818
- $isTableRowNode as $isTableRowNode2
21947
+ $deleteTableColumn__EXPERIMENTAL,
21948
+ $deleteTableRow__EXPERIMENTAL,
21949
+ $getTableCellNodeFromLexicalNode,
21950
+ $getTableColumnIndexFromTableCellNode,
21951
+ $getTableNodeFromLexicalNodeOrThrow,
21952
+ $getTableRowIndexFromTableCellNode,
21953
+ $insertTableColumn__EXPERIMENTAL,
21954
+ $insertTableRow__EXPERIMENTAL,
21955
+ $isTableCellNode,
21956
+ $isTableRowNode,
21957
+ $isTableSelection,
21958
+ getTableObserverFromTableElement,
21959
+ TableCellHeaderStates,
21960
+ TableCellNode
21819
21961
  } from "@lexical/table";
21820
- import { calculateZoomLevel } from "@lexical/utils";
21821
- import { $getNearestNodeFromDOMNode } from "lexical";
21822
- import { useCallback as useCallback12, useEffect as useEffect21, useMemo as useMemo6, useRef as useRef13, useState as useState18 } from "react";
21823
- import { createPortal as createPortal3 } from "react-dom";
21824
- import { Fragment as Fragment19, jsx as jsx131, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
21825
- var MIN_ROW_HEIGHT = 33;
21826
- var MIN_COLUMN_WIDTH = 50;
21827
- var tableResizer = css99`
21962
+ import { $getRoot, $getSelection as $getSelection4, $isRangeSelection as $isRangeSelection4 } from "lexical";
21963
+ import { forwardRef as forwardRef22, useCallback as useCallback12, useEffect as useEffect21, useLayoutEffect, useState as useState18 } from "react";
21964
+ import { jsx as jsx131, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
21965
+ function computeSelectionCount(selection) {
21966
+ const selectionShape = selection.getShape();
21967
+ return {
21968
+ columns: selectionShape.toX - selectionShape.fromX + 1,
21969
+ rows: selectionShape.toY - selectionShape.fromY + 1
21970
+ };
21971
+ }
21972
+ var tableActionMenuTrigger = css99`
21828
21973
  position: absolute;
21829
- z-index: var(--z-10);
21974
+ transform: translate(calc(-100% - 1px), 1px);
21830
21975
  `;
21831
- var fixedGetDOMCellFromTarget = (node) => {
21832
- let currentNode = node;
21833
- while (currentNode != null) {
21834
- const nodeName = currentNode.nodeName;
21835
- if (nodeName === "TD" || nodeName === "TH") {
21836
- const cell2 = currentNode._cell;
21837
- if (cell2 === void 0) {
21838
- return {
21839
- elem: currentNode
21840
- };
21841
- }
21842
- return cell2;
21976
+ var TableActionMenuTrigger = forwardRef22((props, ref) => {
21977
+ const { tableCellEl, positioningAnchorEl, ...rest } = props;
21978
+ const [coordinates, setCoordinates] = useState18({ x: 0, y: 0 });
21979
+ useLayoutEffect(() => {
21980
+ const rect = tableCellEl.getBoundingClientRect();
21981
+ const parentRect = positioningAnchorEl.getBoundingClientRect();
21982
+ const relativeX = rect.right - parentRect.left + positioningAnchorEl.scrollLeft;
21983
+ const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
21984
+ setCoordinates({ x: relativeX, y: relativeY });
21985
+ }, [tableCellEl, positioningAnchorEl]);
21986
+ return /* @__PURE__ */ jsx131(
21987
+ IconButton,
21988
+ {
21989
+ ref,
21990
+ css: [
21991
+ tableActionMenuTrigger,
21992
+ {
21993
+ top: coordinates.y,
21994
+ left: coordinates.x
21995
+ }
21996
+ ],
21997
+ size: "xs",
21998
+ buttonType: "unimportant",
21999
+ ...rest,
22000
+ children: /* @__PURE__ */ jsx131(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
21843
22001
  }
21844
- currentNode = currentNode.parentNode;
21845
- }
21846
- return null;
21847
- };
21848
- function TableCellResizer({ editor, positioningAnchorEl }) {
21849
- const targetRef = useRef13(null);
21850
- const resizerRef = useRef13(null);
21851
- const tableRectRef = useRef13(null);
21852
- const mouseStartPosRef = useRef13(null);
21853
- const [mouseCurrentPos, updateMouseCurrentPos] = useState18(null);
21854
- const [activeCell, updateActiveCell] = useState18(null);
21855
- const [isMouseDown, updateIsMouseDown] = useState18(false);
21856
- const [draggingDirection, updateDraggingDirection] = useState18(null);
21857
- const resetState = useCallback12(() => {
21858
- updateActiveCell(null);
21859
- targetRef.current = null;
21860
- updateDraggingDirection(null);
21861
- mouseStartPosRef.current = null;
21862
- tableRectRef.current = null;
21863
- }, []);
21864
- const isMouseDownOnEvent = (event) => {
21865
- return (event.buttons & 1) === 1;
22002
+ );
22003
+ });
22004
+ TableActionMenuTrigger.displayName = "TableActionMenuTrigger";
22005
+ function TableActionMenu({
22006
+ tableCellNode: _tableCellNode,
22007
+ menuPortalEl,
22008
+ tableCellEl,
22009
+ positioningAnchorEl
22010
+ }) {
22011
+ const [editor] = useLexicalComposerContext5();
22012
+ const [tableCellNode, updateTableCellNode] = useState18(_tableCellNode);
22013
+ const [selectionCounts, updateSelectionCounts] = useState18({
22014
+ columns: 1,
22015
+ rows: 1
22016
+ });
22017
+ const [menuTriggerKey, setMenuTriggerKey] = useState18(0);
22018
+ const incrementMenuTriggerKey = () => {
22019
+ setMenuTriggerKey((key) => key += 1);
21866
22020
  };
21867
22021
  useEffect21(() => {
21868
- const onMouseMove = (event) => {
21869
- setTimeout(() => {
21870
- const target = event.target;
21871
- if (draggingDirection) {
21872
- updateMouseCurrentPos({
21873
- x: event.clientX,
21874
- y: event.clientY
22022
+ return editor.registerMutationListener(
22023
+ TableCellNode,
22024
+ (nodeMutations) => {
22025
+ const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
22026
+ if (nodeUpdated) {
22027
+ editor.getEditorState().read(() => {
22028
+ updateTableCellNode(tableCellNode.getLatest());
21875
22029
  });
21876
- return;
21877
22030
  }
21878
- updateIsMouseDown(isMouseDownOnEvent(event));
21879
- if (resizerRef.current && resizerRef.current.contains(target)) {
21880
- return;
22031
+ },
22032
+ { skipInitialization: true }
22033
+ );
22034
+ }, [editor, tableCellNode]);
22035
+ useEffect21(() => {
22036
+ editor.getEditorState().read(() => {
22037
+ const selection = $getSelection4();
22038
+ if ($isTableSelection(selection)) {
22039
+ updateSelectionCounts(computeSelectionCount(selection));
22040
+ }
22041
+ });
22042
+ }, [editor]);
22043
+ const clearTableSelection = useCallback12(() => {
22044
+ editor.update(() => {
22045
+ if (tableCellNode.isAttached()) {
22046
+ const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
22047
+ const tableElement2 = editor.getElementByKey(
22048
+ tableNode.getKey()
22049
+ );
22050
+ if (!tableElement2) {
22051
+ throw new Error("Expected to find tableElement in DOM");
21881
22052
  }
21882
- if (targetRef.current !== target) {
21883
- targetRef.current = target;
21884
- const cell2 = fixedGetDOMCellFromTarget(target);
21885
- if (cell2 && activeCell !== cell2) {
21886
- editor.update(() => {
21887
- const tableCellNode = $getNearestNodeFromDOMNode(cell2.elem);
21888
- if (!tableCellNode) {
21889
- throw new Error("TableCellResizer: Table cell node not found.");
21890
- }
21891
- const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
21892
- const tableElement2 = editor.getElementByKey(tableNode.getKey());
21893
- if (!tableElement2) {
21894
- throw new Error("TableCellResizer: Table element not found.");
21895
- }
21896
- targetRef.current = target;
21897
- tableRectRef.current = tableElement2.getBoundingClientRect();
21898
- updateActiveCell(cell2);
21899
- });
21900
- } else if (cell2 == null) {
21901
- resetState();
21902
- }
22053
+ const tableSelection = getTableObserverFromTableElement(tableElement2);
22054
+ if (tableSelection !== null) {
22055
+ tableSelection.clearHighlight();
21903
22056
  }
21904
- }, 0);
21905
- };
21906
- const onMouseDown = () => {
21907
- setTimeout(() => {
21908
- updateIsMouseDown(true);
21909
- }, 0);
21910
- };
21911
- const onMouseUp = () => {
21912
- setTimeout(() => {
21913
- updateIsMouseDown(false);
21914
- }, 0);
21915
- };
21916
- const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
21917
- rootElement == null ? void 0 : rootElement.addEventListener("mousemove", onMouseMove);
21918
- rootElement == null ? void 0 : rootElement.addEventListener("mousedown", onMouseDown);
21919
- rootElement == null ? void 0 : rootElement.addEventListener("mouseup", onMouseUp);
21920
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousemove", onMouseMove);
21921
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousedown", onMouseDown);
21922
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mouseup", onMouseUp);
21923
- });
21924
- return () => {
21925
- removeRootListener();
21926
- };
21927
- }, [activeCell, draggingDirection, editor, resetState]);
21928
- const isHeightChanging = (direction) => {
21929
- if (direction === "bottom") {
21930
- return true;
21931
- }
21932
- return false;
21933
- };
21934
- const updateRowHeight = useCallback12(
21935
- (heightChange) => {
21936
- if (!activeCell) {
21937
- throw new Error("TableCellResizer: Expected active cell.");
22057
+ tableNode.markDirty();
22058
+ updateTableCellNode(tableCellNode.getLatest());
21938
22059
  }
21939
- editor.update(
21940
- () => {
21941
- const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
21942
- if (!$isTableCellNode2(tableCellNode)) {
21943
- throw new Error("TableCellResizer: Table cell node not found.");
21944
- }
21945
- const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
21946
- const tableRowIndex = $getTableRowIndexFromTableCellNode2(tableCellNode);
21947
- const tableRows = tableNode.getChildren();
21948
- if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
21949
- throw new Error("Expected table cell to be inside of table row.");
21950
- }
21951
- const tableRow2 = tableRows[tableRowIndex];
21952
- if (!$isTableRowNode2(tableRow2)) {
21953
- throw new Error("Expected table row");
21954
- }
21955
- let height = tableRow2.getHeight();
21956
- if (height === void 0) {
21957
- const rowCells = tableRow2.getChildren();
21958
- height = Math.min(...rowCells.map((cell2) => {
21959
- var _a;
21960
- return (_a = getCellNodeHeight(cell2, editor)) != null ? _a : Infinity;
21961
- }));
21962
- }
21963
- const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
21964
- tableRow2.setHeight(newHeight);
21965
- },
21966
- { tag: "skip-scroll-into-view" }
21967
- );
22060
+ const rootNode = $getRoot();
22061
+ rootNode.selectStart();
22062
+ });
22063
+ }, [editor, tableCellNode]);
22064
+ const insertTableRowAtSelection = useCallback12(
22065
+ (shouldInsertAfter) => {
22066
+ editor.update(() => {
22067
+ $insertTableRow__EXPERIMENTAL(shouldInsertAfter);
22068
+ });
22069
+ incrementMenuTriggerKey();
21968
22070
  },
21969
- [activeCell, editor]
22071
+ [editor]
21970
22072
  );
21971
- const getCellNodeWidth = (cell2, activeEditor) => {
21972
- const width = cell2.getWidth();
21973
- if (width !== void 0) {
21974
- return width;
21975
- }
21976
- const domCellNode = activeEditor.getElementByKey(cell2.getKey());
21977
- if (domCellNode == null) {
21978
- return void 0;
21979
- }
21980
- const computedStyle = getComputedStyle(domCellNode);
21981
- return domCellNode.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
21982
- };
21983
- const getCellNodeHeight = (cell2, activeEditor) => {
21984
- const domCellNode = activeEditor.getElementByKey(cell2.getKey());
21985
- return domCellNode == null ? void 0 : domCellNode.clientHeight;
21986
- };
21987
- const getCellColumnIndex = (tableCellNode, tableMap) => {
21988
- for (let row = 0; row < tableMap.length; row++) {
21989
- for (let column = 0; column < tableMap[row].length; column++) {
21990
- if (tableMap[row][column].cell === tableCellNode) {
21991
- return column;
22073
+ const insertTableColumnAtSelection = useCallback12(
22074
+ (shouldInsertAfter) => {
22075
+ editor.update(() => {
22076
+ for (let i = 0; i < selectionCounts.columns; i++) {
22077
+ $insertTableColumn__EXPERIMENTAL(shouldInsertAfter);
21992
22078
  }
21993
- }
21994
- }
21995
- };
21996
- const updateColumnWidth = useCallback12(
21997
- (widthChange) => {
21998
- if (!activeCell) {
21999
- throw new Error("TableCellResizer: Expected active cell.");
22000
- }
22001
- editor.update(
22002
- () => {
22003
- const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
22004
- if (!$isTableCellNode2(tableCellNode)) {
22005
- throw new Error("TableCellResizer: Table cell node not found.");
22006
- }
22007
- const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
22008
- const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
22009
- const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
22010
- if (columnIndex === void 0) {
22011
- throw new Error("TableCellResizer: Table column not found.");
22012
- }
22013
- for (let row = 0; row < tableMap.length; row++) {
22014
- const cell2 = tableMap[row][columnIndex];
22015
- if (cell2.startRow === row && (columnIndex === tableMap[row].length - 1 || tableMap[row][columnIndex].cell !== tableMap[row][columnIndex + 1].cell)) {
22016
- const width = getCellNodeWidth(cell2.cell, editor);
22017
- if (width === void 0) {
22018
- continue;
22019
- }
22020
- const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
22021
- cell2.cell.setWidth(newWidth);
22022
- }
22023
- }
22024
- },
22025
- { tag: "skip-scroll-into-view" }
22026
- );
22079
+ });
22080
+ incrementMenuTriggerKey();
22027
22081
  },
22028
- [activeCell, editor]
22082
+ [editor, selectionCounts.columns]
22029
22083
  );
22030
- const mouseUpHandler = useCallback12(
22031
- (direction) => {
22032
- const handler = (event) => {
22033
- event.preventDefault();
22034
- event.stopPropagation();
22035
- if (!activeCell) {
22036
- throw new Error("TableCellResizer: Expected active cell.");
22084
+ const deleteTableRowAtSelection = useCallback12(() => {
22085
+ editor.update(() => {
22086
+ $deleteTableRow__EXPERIMENTAL();
22087
+ });
22088
+ incrementMenuTriggerKey();
22089
+ }, [editor]);
22090
+ const deleteTableAtSelection = useCallback12(() => {
22091
+ editor.update(() => {
22092
+ const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
22093
+ tableNode.remove();
22094
+ clearTableSelection();
22095
+ });
22096
+ }, [editor, tableCellNode, clearTableSelection]);
22097
+ const deleteTableColumnAtSelection = useCallback12(() => {
22098
+ editor.update(() => {
22099
+ $deleteTableColumn__EXPERIMENTAL();
22100
+ });
22101
+ incrementMenuTriggerKey();
22102
+ }, [editor]);
22103
+ const toggleTableRowIsHeader = useCallback12(() => {
22104
+ editor.update(() => {
22105
+ const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
22106
+ const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
22107
+ const tableRows = tableNode.getChildren();
22108
+ if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
22109
+ throw new Error("Expected table cell to be inside of table row.");
22110
+ }
22111
+ const tableRow2 = tableRows[tableRowIndex];
22112
+ if (!$isTableRowNode(tableRow2)) {
22113
+ throw new Error("Expected table row");
22114
+ }
22115
+ tableRow2.getChildren().forEach((tableCell) => {
22116
+ if (!$isTableCellNode(tableCell)) {
22117
+ throw new Error("Expected table cell");
22037
22118
  }
22038
- if (mouseStartPosRef.current) {
22039
- const { x, y } = mouseStartPosRef.current;
22040
- if (activeCell === null) {
22041
- return;
22042
- }
22043
- const zoom = calculateZoomLevel(event.target);
22044
- if (isHeightChanging(direction)) {
22045
- const heightChange = (event.clientY - y) / zoom;
22046
- updateRowHeight(heightChange);
22047
- } else {
22048
- const widthChange = (event.clientX - x) / zoom;
22049
- updateColumnWidth(widthChange);
22050
- }
22051
- resetState();
22052
- document.removeEventListener("mouseup", handler);
22053
- }
22054
- };
22055
- return handler;
22056
- },
22057
- [activeCell, resetState, updateColumnWidth, updateRowHeight]
22058
- );
22059
- const toggleResize = useCallback12(
22060
- (direction) => (event) => {
22061
- event.preventDefault();
22062
- event.stopPropagation();
22063
- if (!activeCell) {
22064
- throw new Error("TableCellResizer: Expected active cell.");
22119
+ tableCell.toggleHeaderStyle(TableCellHeaderStates.ROW);
22120
+ });
22121
+ clearTableSelection();
22122
+ });
22123
+ }, [editor, tableCellNode, clearTableSelection]);
22124
+ const toggleTableColumnIsHeader = useCallback12(() => {
22125
+ editor.update(() => {
22126
+ const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
22127
+ const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
22128
+ const tableRows = tableNode.getChildren();
22129
+ const maxRowsLength = Math.max(...tableRows.map((row) => row.getChildren().length));
22130
+ if (tableColumnIndex >= maxRowsLength || tableColumnIndex < 0) {
22131
+ throw new Error("Expected table cell to be inside of table row.");
22065
22132
  }
22066
- mouseStartPosRef.current = {
22067
- x: event.clientX,
22068
- y: event.clientY
22069
- };
22070
- updateMouseCurrentPos(mouseStartPosRef.current);
22071
- updateDraggingDirection(direction);
22072
- document.addEventListener("mouseup", mouseUpHandler(direction));
22073
- },
22074
- [activeCell, mouseUpHandler]
22075
- );
22076
- const getResizers = useCallback12(() => {
22077
- if (activeCell) {
22078
- const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
22079
- const parentRect = positioningAnchorEl.getBoundingClientRect();
22080
- const zoom = calculateZoomLevel(activeCell.elem);
22081
- const zoneWidth = 10;
22082
- const styles = {
22083
- bottom: {
22084
- backgroundColor: "none",
22085
- cursor: "row-resize",
22086
- height: `${zoneWidth}px`,
22087
- left: `${left - parentRect.left}px`,
22088
- top: `${top - parentRect.top + positioningAnchorEl.scrollTop + height - zoneWidth / 2}px`,
22089
- width: `${width}px`
22090
- },
22091
- right: {
22092
- backgroundColor: "none",
22093
- cursor: "col-resize",
22094
- height: `${height}px`,
22095
- left: `${left - parentRect.left + width - zoneWidth / 2}px`,
22096
- top: `${top - parentRect.top + positioningAnchorEl.scrollTop}px`,
22097
- width: `${zoneWidth}px`
22133
+ for (let r = 0; r < tableRows.length; r++) {
22134
+ const tableRow2 = tableRows[r];
22135
+ if (!$isTableRowNode(tableRow2)) {
22136
+ throw new Error("Expected table row");
22098
22137
  }
22099
- };
22100
- const tableRect = tableRectRef.current;
22101
- if (draggingDirection && mouseCurrentPos && tableRect) {
22102
- if (isHeightChanging(draggingDirection)) {
22103
- styles[draggingDirection].left = `${tableRect.left - parentRect.left}px`;
22104
- styles[draggingDirection].top = `${(mouseCurrentPos.y - parentRect.top + positioningAnchorEl.scrollTop) / zoom}px`;
22105
- styles[draggingDirection].height = "3px";
22106
- styles[draggingDirection].width = `${tableRect.width}px`;
22107
- } else {
22108
- styles[draggingDirection].top = `${tableRect.top - parentRect.top + positioningAnchorEl.scrollTop}px`;
22109
- styles[draggingDirection].left = `${(mouseCurrentPos.x - parentRect.left) / zoom}px`;
22110
- styles[draggingDirection].width = "3px";
22111
- styles[draggingDirection].height = `${tableRect.height}px`;
22138
+ const tableCells = tableRow2.getChildren();
22139
+ if (tableColumnIndex >= tableCells.length) {
22140
+ continue;
22112
22141
  }
22113
- styles[draggingDirection].backgroundColor = "#adf";
22142
+ const tableCell = tableCells[tableColumnIndex];
22143
+ if (!$isTableCellNode(tableCell)) {
22144
+ throw new Error("Expected table cell");
22145
+ }
22146
+ tableCell.toggleHeaderStyle(TableCellHeaderStates.COLUMN);
22114
22147
  }
22115
- return styles;
22148
+ clearTableSelection();
22149
+ });
22150
+ }, [editor, tableCellNode, clearTableSelection]);
22151
+ const menuItemCss = css99({
22152
+ fontSize: "var(--fs-sm)"
22153
+ });
22154
+ return /* @__PURE__ */ jsxs87(
22155
+ Menu,
22156
+ {
22157
+ menuTrigger: /* @__PURE__ */ jsx131(
22158
+ TableActionMenuTrigger,
22159
+ {
22160
+ tableCellEl,
22161
+ positioningAnchorEl
22162
+ },
22163
+ menuTriggerKey
22164
+ ),
22165
+ portalElement: menuPortalEl,
22166
+ maxMenuHeight: "300px",
22167
+ children: [
22168
+ /* @__PURE__ */ jsxs87(
22169
+ MenuItem,
22170
+ {
22171
+ onClick: () => {
22172
+ insertTableRowAtSelection(false);
22173
+ },
22174
+ css: menuItemCss,
22175
+ children: [
22176
+ "Insert ",
22177
+ selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
22178
+ " above"
22179
+ ]
22180
+ }
22181
+ ),
22182
+ /* @__PURE__ */ jsxs87(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
22183
+ "Insert ",
22184
+ selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
22185
+ " below"
22186
+ ] }),
22187
+ /* @__PURE__ */ jsx131(MenuItemSeparator, {}),
22188
+ /* @__PURE__ */ jsxs87(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
22189
+ "Insert ",
22190
+ selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
22191
+ " left"
22192
+ ] }),
22193
+ /* @__PURE__ */ jsxs87(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
22194
+ "Insert ",
22195
+ selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
22196
+ " right"
22197
+ ] }),
22198
+ /* @__PURE__ */ jsx131(MenuItemSeparator, {}),
22199
+ /* @__PURE__ */ jsx131(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
22200
+ /* @__PURE__ */ jsx131(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
22201
+ /* @__PURE__ */ jsx131(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
22202
+ /* @__PURE__ */ jsx131(MenuItemSeparator, {}),
22203
+ /* @__PURE__ */ jsxs87(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
22204
+ (tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "Remove" : "Add",
22205
+ " ",
22206
+ "row header"
22207
+ ] }),
22208
+ /* @__PURE__ */ jsxs87(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
22209
+ (tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN ? "Remove" : "Add",
22210
+ " ",
22211
+ "column header"
22212
+ ] })
22213
+ ]
22116
22214
  }
22117
- return {
22118
- bottom: null,
22119
- left: null,
22120
- right: null,
22121
- top: null
22215
+ );
22216
+ }
22217
+ function TableCellActionMenuContainer({
22218
+ menuPortalEl,
22219
+ positioningAnchorEl
22220
+ }) {
22221
+ const [editor] = useLexicalComposerContext5();
22222
+ const [tableCellNode, setTableMenuCellNode] = useState18(null);
22223
+ const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState18(null);
22224
+ const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState18(null);
22225
+ useEffect21(() => {
22226
+ const newPortalEl = document.createElement("div");
22227
+ setTableMenuCellMenuPortalEl(newPortalEl);
22228
+ menuPortalEl.appendChild(newPortalEl);
22229
+ return () => {
22230
+ newPortalEl.remove();
22122
22231
  };
22123
- }, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
22124
- const resizerStyles = getResizers();
22125
- return /* @__PURE__ */ jsx131("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs87(Fragment19, { children: [
22126
- /* @__PURE__ */ jsx131(
22127
- "div",
22128
- {
22129
- css: tableResizer,
22130
- style: resizerStyles.right || void 0,
22131
- onMouseDown: toggleResize("right")
22232
+ }, [menuPortalEl]);
22233
+ const setTableMenuCellNodeElem = useCallback12((elem) => {
22234
+ if (elem) {
22235
+ _setTableMenuCellNodeEl(elem);
22236
+ } else {
22237
+ _setTableMenuCellNodeEl(null);
22238
+ }
22239
+ }, []);
22240
+ const $moveMenu = useCallback12(() => {
22241
+ const selection = $getSelection4();
22242
+ const nativeSelection = window.getSelection();
22243
+ const activeElement = document.activeElement;
22244
+ if (selection == null) {
22245
+ setTableMenuCellNode(null);
22246
+ return;
22247
+ }
22248
+ const rootElement = editor.getRootElement();
22249
+ if ($isRangeSelection4(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
22250
+ const tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
22251
+ if (tableCellNodeFromSelection == null) {
22252
+ setTableMenuCellNode(null);
22253
+ setTableMenuCellNodeElem(null);
22254
+ return;
22132
22255
  }
22133
- ),
22134
- /* @__PURE__ */ jsx131(
22135
- "div",
22136
- {
22137
- css: tableResizer,
22138
- style: resizerStyles.bottom || void 0,
22139
- onMouseDown: toggleResize("bottom")
22256
+ const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
22257
+ if (tableCellParentNodeDOM == null) {
22258
+ setTableMenuCellNode(null);
22259
+ setTableMenuCellNodeElem(null);
22260
+ return;
22140
22261
  }
22141
- )
22142
- ] }) });
22143
- }
22144
- function TableCellResizerPlugin({ positioningAnchorEl }) {
22145
- const [editor] = useLexicalComposerContext5();
22146
- const isEditable = useLexicalEditable2();
22147
- return useMemo6(
22148
- () => isEditable ? createPortal3(
22149
- /* @__PURE__ */ jsx131(TableCellResizer, { editor, positioningAnchorEl }),
22262
+ setTableMenuCellNode(tableCellNodeFromSelection);
22263
+ setTableMenuCellNodeElem(tableCellParentNodeDOM);
22264
+ } else if (!activeElement) {
22265
+ setTableMenuCellNode(null);
22266
+ setTableMenuCellNodeElem(null);
22267
+ }
22268
+ }, [editor, setTableMenuCellNodeElem]);
22269
+ useEffect21(() => {
22270
+ return editor.registerUpdateListener(() => {
22271
+ editor.getEditorState().read(() => {
22272
+ $moveMenu();
22273
+ });
22274
+ });
22275
+ });
22276
+ return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ jsx131(
22277
+ TableActionMenu,
22278
+ {
22279
+ tableCellNode,
22280
+ menuPortalEl: tableCellMenuPortalEl,
22281
+ tableCellEl: tableCellNodeEl,
22150
22282
  positioningAnchorEl
22151
- ) : null,
22152
- [editor, isEditable, positioningAnchorEl]
22283
+ },
22284
+ tableCellNode.getKey()
22153
22285
  );
22154
22286
  }
22287
+ function TableActionMenuPlugin({
22288
+ positioningAnchorEl,
22289
+ menuPortalEl
22290
+ }) {
22291
+ const isEditable = useLexicalEditable();
22292
+ return isEditable ? /* @__PURE__ */ jsx131(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
22293
+ }
22155
22294
 
22156
- // src/components/ParameterInputs/rich-text/TableSelectionPlugin.tsx
22295
+ // src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
22296
+ import { css as css100 } from "@emotion/react";
22157
22297
  import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
22158
- import { $findCellNode } from "@lexical/table";
22298
+ import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
22159
22299
  import {
22160
- $getSelection as $getSelection4,
22161
- $isRangeSelection as $isRangeSelection4,
22162
- $setSelection,
22163
- COMMAND_PRIORITY_NORMAL as COMMAND_PRIORITY_NORMAL2,
22164
- SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND2
22165
- } from "lexical";
22166
- import { useEffect as useEffect22, useState as useState19 } from "react";
22167
- var TableSelectionPlugin = () => {
22168
- const [editor] = useLexicalComposerContext6();
22169
- const [closestTableCellNode, setClosestTableCellNode] = useState19(null);
22170
- useEffect22(() => {
22171
- return editor.registerCommand(
22172
- SELECTION_CHANGE_COMMAND2,
22173
- () => {
22174
- editor.read(() => {
22175
- const selection = $getSelection4();
22176
- if (!$isRangeSelection4(selection) || !selection.isCollapsed()) {
22177
- setClosestTableCellNode(null);
22178
- return false;
22179
- }
22180
- const tableCellNode = $findCellNode(selection.anchor.getNode());
22181
- if (tableCellNode === null) {
22182
- setClosestTableCellNode(null);
22183
- return false;
22184
- }
22185
- setClosestTableCellNode(tableCellNode);
22186
- });
22187
- return false;
22188
- },
22189
- COMMAND_PRIORITY_NORMAL2
22190
- );
22191
- }, [editor]);
22300
+ $computeTableMapSkipCellCheck,
22301
+ $getTableNodeFromLexicalNodeOrThrow as $getTableNodeFromLexicalNodeOrThrow2,
22302
+ $getTableRowIndexFromTableCellNode as $getTableRowIndexFromTableCellNode2,
22303
+ $isTableCellNode as $isTableCellNode2,
22304
+ $isTableRowNode as $isTableRowNode2
22305
+ } from "@lexical/table";
22306
+ import { calculateZoomLevel } from "@lexical/utils";
22307
+ import { $getNearestNodeFromDOMNode } from "lexical";
22308
+ import { useCallback as useCallback13, useEffect as useEffect22, useMemo as useMemo7, useRef as useRef13, useState as useState19 } from "react";
22309
+ import { createPortal as createPortal3 } from "react-dom";
22310
+ import { Fragment as Fragment20, jsx as jsx132, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
22311
+ var MIN_ROW_HEIGHT = 33;
22312
+ var MIN_COLUMN_WIDTH = 50;
22313
+ var tableResizer = css100`
22314
+ position: absolute;
22315
+ z-index: var(--z-10);
22316
+ `;
22317
+ var fixedGetDOMCellFromTarget = (node) => {
22318
+ let currentNode = node;
22319
+ while (currentNode != null) {
22320
+ const nodeName = currentNode.nodeName;
22321
+ if (nodeName === "TD" || nodeName === "TH") {
22322
+ const cell2 = currentNode._cell;
22323
+ if (cell2 === void 0) {
22324
+ return {
22325
+ elem: currentNode
22326
+ };
22327
+ }
22328
+ return cell2;
22329
+ }
22330
+ currentNode = currentNode.parentNode;
22331
+ }
22332
+ return null;
22333
+ };
22334
+ function TableCellResizer({ editor, positioningAnchorEl }) {
22335
+ const targetRef = useRef13(null);
22336
+ const resizerRef = useRef13(null);
22337
+ const tableRectRef = useRef13(null);
22338
+ const mouseStartPosRef = useRef13(null);
22339
+ const [mouseCurrentPos, updateMouseCurrentPos] = useState19(null);
22340
+ const [activeCell, updateActiveCell] = useState19(null);
22341
+ const [isMouseDown, updateIsMouseDown] = useState19(false);
22342
+ const [draggingDirection, updateDraggingDirection] = useState19(null);
22343
+ const resetState = useCallback13(() => {
22344
+ updateActiveCell(null);
22345
+ targetRef.current = null;
22346
+ updateDraggingDirection(null);
22347
+ mouseStartPosRef.current = null;
22348
+ tableRectRef.current = null;
22349
+ }, []);
22350
+ const isMouseDownOnEvent = (event) => {
22351
+ return (event.buttons & 1) === 1;
22352
+ };
22192
22353
  useEffect22(() => {
22193
- const onControlA = (event) => {
22194
- if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
22195
- if (!closestTableCellNode) {
22354
+ const onMouseMove = (event) => {
22355
+ setTimeout(() => {
22356
+ const target = event.target;
22357
+ if (draggingDirection) {
22358
+ updateMouseCurrentPos({
22359
+ x: event.clientX,
22360
+ y: event.clientY
22361
+ });
22196
22362
  return;
22197
22363
  }
22198
- event.preventDefault();
22199
- editor.update(() => {
22200
- const selection = closestTableCellNode.select(0, closestTableCellNode.getChildrenSize());
22201
- $setSelection(selection);
22202
- });
22203
- }
22364
+ updateIsMouseDown(isMouseDownOnEvent(event));
22365
+ if (resizerRef.current && resizerRef.current.contains(target)) {
22366
+ return;
22367
+ }
22368
+ if (targetRef.current !== target) {
22369
+ targetRef.current = target;
22370
+ const cell2 = fixedGetDOMCellFromTarget(target);
22371
+ if (cell2 && activeCell !== cell2) {
22372
+ editor.update(() => {
22373
+ const tableCellNode = $getNearestNodeFromDOMNode(cell2.elem);
22374
+ if (!tableCellNode) {
22375
+ throw new Error("TableCellResizer: Table cell node not found.");
22376
+ }
22377
+ const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
22378
+ const tableElement2 = editor.getElementByKey(tableNode.getKey());
22379
+ if (!tableElement2) {
22380
+ throw new Error("TableCellResizer: Table element not found.");
22381
+ }
22382
+ targetRef.current = target;
22383
+ tableRectRef.current = tableElement2.getBoundingClientRect();
22384
+ updateActiveCell(cell2);
22385
+ });
22386
+ } else if (cell2 == null) {
22387
+ resetState();
22388
+ }
22389
+ }
22390
+ }, 0);
22204
22391
  };
22205
- return editor.registerRootListener((rootElement, prevRootElement) => {
22206
- rootElement == null ? void 0 : rootElement.addEventListener("keydown", onControlA);
22207
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("keydown", onControlA);
22208
- });
22209
- }, [editor, closestTableCellNode]);
22210
- return null;
22211
- };
22212
- var TableSelectionPlugin_default = TableSelectionPlugin;
22213
-
22214
- // src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
22215
- import { css as css100 } from "@emotion/react";
22216
- import { $createCodeNode } from "@lexical/code";
22217
- import {
22218
- $isListNode as $isListNode2,
22219
- INSERT_ORDERED_LIST_COMMAND,
22220
- INSERT_UNORDERED_LIST_COMMAND,
22221
- ListNode as ListNode2,
22222
- REMOVE_LIST_COMMAND
22223
- } from "@lexical/list";
22224
- import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
22225
- import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
22226
- import { $setBlocksType } from "@lexical/selection";
22227
- import { $createTableNodeWithDimensions } from "@lexical/table";
22228
- import { $findMatchingParent, $getNearestNodeOfType as $getNearestNodeOfType2 } from "@lexical/utils";
22229
- import {
22230
- $createParagraphNode,
22231
- $getSelection as $getSelection5,
22232
- $insertNodes,
22233
- $isRangeSelection as $isRangeSelection5,
22234
- $isRootOrShadowRoot,
22235
- COMMAND_PRIORITY_CRITICAL as COMMAND_PRIORITY_CRITICAL2,
22236
- FORMAT_TEXT_COMMAND,
22237
- SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND3
22238
- } from "lexical";
22239
- import { useCallback as useCallback13, useEffect as useEffect23 } from "react";
22240
-
22241
- // src/components/ParameterInputs/rich-text/toolbar/constants.ts
22242
- var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
22243
- ["bold", "format-bold"],
22244
- ["italic", "format-italic"],
22245
- ["underline", "format-underline"],
22246
- ["strikethrough", "format-strike"],
22247
- ["code", "format-code"],
22248
- ["superscript", "format-superscript"],
22249
- ["subscript", "format-subscript"]
22250
- ]);
22251
- var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
22252
- var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
22253
-
22254
- // src/components/ParameterInputs/rich-text/toolbar/useRichTextToolbarState.ts
22255
- import { useMemo as useMemo7, useState as useState20 } from "react";
22256
- var useRichTextToolbarState = ({ config }) => {
22257
- var _a;
22258
- const enabledBuiltInFormats = useMemo7(() => {
22259
- return richTextBuiltInFormats.filter((format) => {
22260
- var _a2, _b;
22261
- return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
22262
- });
22263
- }, [config]);
22264
- const enabledBuiltInElements = useMemo7(() => {
22265
- return richTextBuiltInElements.filter((element) => {
22266
- var _a2, _b;
22267
- return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
22268
- });
22269
- }, [config]);
22270
- const enabledBuiltInFormatsWithIcon = useMemo7(() => {
22271
- return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
22272
- }, [enabledBuiltInFormats]);
22273
- const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
22274
- (format) => !FORMATS_WITH_ICON.has(format.type)
22275
- );
22276
- const [activeFormats, setActiveFormats] = useState20([]);
22277
- const visibleFormatsWithIcon = useMemo7(() => {
22278
- const visibleFormats = /* @__PURE__ */ new Set();
22279
- activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
22280
- visibleFormats.add(type);
22281
- });
22282
- enabledBuiltInFormatsWithIcon.forEach((format) => {
22283
- visibleFormats.add(format.type);
22284
- });
22285
- return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
22286
- }, [activeFormats, enabledBuiltInFormatsWithIcon]);
22287
- const visibleFormatsWithoutIcon = useMemo7(() => {
22288
- const visibleFormats = /* @__PURE__ */ new Set();
22289
- activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
22290
- visibleFormats.add(type);
22291
- });
22292
- enabledBuiltInFormatsWithoutIcon.forEach((format) => {
22293
- visibleFormats.add(format.type);
22392
+ const onMouseDown = () => {
22393
+ setTimeout(() => {
22394
+ updateIsMouseDown(true);
22395
+ }, 0);
22396
+ };
22397
+ const onMouseUp = () => {
22398
+ setTimeout(() => {
22399
+ updateIsMouseDown(false);
22400
+ }, 0);
22401
+ };
22402
+ const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
22403
+ rootElement == null ? void 0 : rootElement.addEventListener("mousemove", onMouseMove);
22404
+ rootElement == null ? void 0 : rootElement.addEventListener("mousedown", onMouseDown);
22405
+ rootElement == null ? void 0 : rootElement.addEventListener("mouseup", onMouseUp);
22406
+ prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousemove", onMouseMove);
22407
+ prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousedown", onMouseDown);
22408
+ prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mouseup", onMouseUp);
22294
22409
  });
22295
- return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
22296
- }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
22297
- const [activeElement, setActiveElement] = useState20("paragraph");
22298
- const enabledTextualElements = enabledBuiltInElements.filter(
22299
- (element) => TEXTUAL_ELEMENTS.includes(element.type)
22300
- );
22301
- const visibleTextualElements = useMemo7(() => {
22302
- if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
22303
- return enabledTextualElements;
22410
+ return () => {
22411
+ removeRootListener();
22412
+ };
22413
+ }, [activeCell, draggingDirection, editor, resetState]);
22414
+ const isHeightChanging = (direction) => {
22415
+ if (direction === "bottom") {
22416
+ return true;
22304
22417
  }
22305
- return richTextBuiltInElements.filter(
22306
- (element) => {
22307
- var _a2, _b;
22308
- return TEXTUAL_ELEMENTS.includes(element.type) && (((_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type)) || element.type === activeElement);
22418
+ return false;
22419
+ };
22420
+ const updateRowHeight = useCallback13(
22421
+ (heightChange) => {
22422
+ if (!activeCell) {
22423
+ throw new Error("TableCellResizer: Expected active cell.");
22309
22424
  }
22310
- );
22311
- }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
22312
- const [isLink, setIsLink] = useState20(false);
22313
- const linkElementVisible = useMemo7(() => {
22314
- return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
22315
- }, [isLink, enabledBuiltInElements]);
22316
- const visibleLists = useMemo7(() => {
22317
- return new Set(
22318
- ["orderedList", "unorderedList"].filter(
22319
- (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
22320
- )
22321
- );
22322
- }, [activeElement, enabledBuiltInElements]);
22323
- const quoteElementVisible = useMemo7(() => {
22324
- return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
22325
- }, [activeElement, enabledBuiltInElements]);
22326
- const codeElementVisible = useMemo7(() => {
22327
- return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
22328
- }, [activeElement, enabledBuiltInElements]);
22329
- const tableElementVisible = useMemo7(() => {
22330
- return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
22331
- }, [activeElement, enabledBuiltInElements]);
22332
- const assetElementVisible = useMemo7(() => {
22333
- return enabledBuiltInElements.some((element) => element.type === "asset") || activeElement === "asset";
22334
- }, [activeElement, enabledBuiltInElements]);
22335
- const visibleElementsWithIcons = useMemo7(() => {
22336
- const visibleElements = /* @__PURE__ */ new Set();
22337
- if (linkElementVisible) {
22338
- visibleElements.add("link");
22339
- }
22340
- if (visibleLists.size > 0) {
22341
- visibleLists.forEach((type) => {
22342
- visibleElements.add(type);
22343
- });
22344
- }
22345
- return visibleElements;
22346
- }, [linkElementVisible, visibleLists]);
22347
- const visibleInsertElementsWithIcons = useMemo7(() => {
22348
- const visibleElements = /* @__PURE__ */ new Set();
22349
- if (quoteElementVisible) {
22350
- visibleElements.add("quote");
22351
- }
22352
- if (codeElementVisible) {
22353
- visibleElements.add("code");
22354
- }
22355
- if (tableElementVisible) {
22356
- visibleElements.add("table");
22357
- }
22358
- if (assetElementVisible) {
22359
- visibleElements.add("asset");
22360
- }
22361
- return visibleElements;
22362
- }, [codeElementVisible, quoteElementVisible, tableElementVisible, assetElementVisible]);
22363
- return {
22364
- activeFormats,
22365
- setActiveFormats,
22366
- activeElement,
22367
- setActiveElement,
22368
- visibleFormatsWithIcon,
22369
- visibleFormatsWithoutIcon,
22370
- visibleTextualElements,
22371
- isLink,
22372
- setIsLink,
22373
- linkElementVisible,
22374
- visibleLists,
22375
- quoteElementVisible,
22376
- codeElementVisible,
22377
- tableElementVisible,
22378
- assetElementVisible,
22379
- visibleElementsWithIcons,
22380
- visibleInsertElementsWithIcons
22425
+ editor.update(
22426
+ () => {
22427
+ const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
22428
+ if (!$isTableCellNode2(tableCellNode)) {
22429
+ throw new Error("TableCellResizer: Table cell node not found.");
22430
+ }
22431
+ const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
22432
+ const tableRowIndex = $getTableRowIndexFromTableCellNode2(tableCellNode);
22433
+ const tableRows = tableNode.getChildren();
22434
+ if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
22435
+ throw new Error("Expected table cell to be inside of table row.");
22436
+ }
22437
+ const tableRow2 = tableRows[tableRowIndex];
22438
+ if (!$isTableRowNode2(tableRow2)) {
22439
+ throw new Error("Expected table row");
22440
+ }
22441
+ let height = tableRow2.getHeight();
22442
+ if (height === void 0) {
22443
+ const rowCells = tableRow2.getChildren();
22444
+ height = Math.min(...rowCells.map((cell2) => {
22445
+ var _a;
22446
+ return (_a = getCellNodeHeight(cell2, editor)) != null ? _a : Infinity;
22447
+ }));
22448
+ }
22449
+ const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
22450
+ tableRow2.setHeight(newHeight);
22451
+ },
22452
+ { tag: "skip-scroll-into-view" }
22453
+ );
22454
+ },
22455
+ [activeCell, editor]
22456
+ );
22457
+ const getCellNodeWidth = (cell2, activeEditor) => {
22458
+ const width = cell2.getWidth();
22459
+ if (width !== void 0) {
22460
+ return width;
22461
+ }
22462
+ const domCellNode = activeEditor.getElementByKey(cell2.getKey());
22463
+ if (domCellNode == null) {
22464
+ return void 0;
22465
+ }
22466
+ const computedStyle = getComputedStyle(domCellNode);
22467
+ return domCellNode.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
22381
22468
  };
22382
- };
22383
-
22384
- // src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
22385
- import { Fragment as Fragment20, jsx as jsx132, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
22386
- var toolbar = css100`
22387
- ${scrollbarStyles}
22388
- background: var(--gray-50);
22389
- border-radius: var(--rounded-base);
22390
- display: flex;
22391
- /* We add 1px because we use a 1px wide separator */
22392
- gap: calc(var(--spacing-sm) + 1px);
22393
- margin: 0 0 calc(var(--spacing-sm) + var(--spacing-xs)) 0;
22394
- overflow: auto;
22395
- padding: var(--spacing-sm);
22396
- position: sticky;
22397
- top: calc(var(--spacing-sm) * -2);
22398
- z-index: 10;
22399
- `;
22400
- var toolbarGroup = css100`
22401
- display: flex;
22402
- flex-shrink: 0;
22403
- gap: var(--spacing-xs);
22404
- position: relative;
22405
-
22406
- &:not(:first-child)::before {
22407
- background-color: var(--gray-300);
22408
- content: '';
22409
- display: block;
22410
- height: 24px;
22411
- left: calc(var(--spacing-xs) * -1);
22412
- position: absolute;
22413
- top: 4px;
22414
- width: 1px;
22415
- }
22416
- `;
22417
- var richTextToolbarButton = css100`
22418
- align-items: center;
22419
- appearance: none;
22420
- border: 0;
22421
- border-radius: var(--rounded-sm);
22422
- box-shadow: none;
22423
- color: var(--gray-900);
22424
- display: flex;
22425
- flex-shrink: 0;
22426
- height: 32px;
22427
- justify-content: center;
22428
- min-width: 32px;
22429
- padding: 0 var(--spacing-sm);
22430
- `;
22431
- var richTextToolbarButtonActive = css100`
22432
- background: var(--gray-200);
22433
- `;
22434
- var textStyleButton = css100`
22435
- justify-content: space-between;
22436
- min-width: 7rem;
22437
- `;
22438
- var toolbarIcon = css100`
22439
- color: inherit;
22440
- `;
22441
- var toolbarChevron = css100`
22442
- margin-left: var(--spacing-xs);
22443
- `;
22444
- var RichTextToolbarIcon = ({ icon }) => {
22445
- return /* @__PURE__ */ jsx132(Icon, { icon, css: toolbarIcon, size: "1rem" });
22446
- };
22447
- var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset }) => {
22448
- const [editor] = useLexicalComposerContext7();
22449
- const {
22450
- activeElement,
22451
- setActiveElement,
22452
- activeFormats,
22453
- setActiveFormats,
22454
- visibleFormatsWithIcon,
22455
- visibleFormatsWithoutIcon,
22456
- visibleTextualElements,
22457
- isLink,
22458
- setIsLink,
22459
- linkElementVisible,
22460
- visibleLists,
22461
- codeElementVisible,
22462
- quoteElementVisible,
22463
- visibleElementsWithIcons,
22464
- visibleInsertElementsWithIcons,
22465
- tableElementVisible,
22466
- assetElementVisible
22467
- } = useRichTextToolbarState({ config });
22468
- const onSelectElement = (type) => {
22469
- if (activeElement === type) {
22470
- return;
22469
+ const getCellNodeHeight = (cell2, activeEditor) => {
22470
+ const domCellNode = activeEditor.getElementByKey(cell2.getKey());
22471
+ return domCellNode == null ? void 0 : domCellNode.clientHeight;
22472
+ };
22473
+ const getCellColumnIndex = (tableCellNode, tableMap) => {
22474
+ for (let row = 0; row < tableMap.length; row++) {
22475
+ for (let column = 0; column < tableMap[row].length; column++) {
22476
+ if (tableMap[row][column].cell === tableCellNode) {
22477
+ return column;
22478
+ }
22479
+ }
22471
22480
  }
22472
- editor.focus(() => {
22473
- editor.update(() => {
22474
- const selection = $getSelection5();
22475
- if (HEADING_ELEMENTS.includes(type)) {
22476
- $setBlocksType(selection, () => $createHeadingNode(type));
22477
- } else if (type === "paragraph") {
22478
- $setBlocksType(selection, () => $createParagraphNode());
22479
- } else if (type === "quote") {
22480
- $setBlocksType(selection, () => $createQuoteNode());
22481
- } else if (type === "code") {
22482
- $setBlocksType(selection, () => $createCodeNode());
22483
- } else if (type === "table" && onInsertTable) {
22484
- onInsertTable().then((dimensions) => {
22485
- if (!dimensions) {
22486
- return;
22481
+ };
22482
+ const updateColumnWidth = useCallback13(
22483
+ (widthChange) => {
22484
+ if (!activeCell) {
22485
+ throw new Error("TableCellResizer: Expected active cell.");
22486
+ }
22487
+ editor.update(
22488
+ () => {
22489
+ const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
22490
+ if (!$isTableCellNode2(tableCellNode)) {
22491
+ throw new Error("TableCellResizer: Table cell node not found.");
22492
+ }
22493
+ const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
22494
+ const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
22495
+ const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
22496
+ if (columnIndex === void 0) {
22497
+ throw new Error("TableCellResizer: Table column not found.");
22498
+ }
22499
+ for (let row = 0; row < tableMap.length; row++) {
22500
+ const cell2 = tableMap[row][columnIndex];
22501
+ if (cell2.startRow === row && (columnIndex === tableMap[row].length - 1 || tableMap[row][columnIndex].cell !== tableMap[row][columnIndex + 1].cell)) {
22502
+ const width = getCellNodeWidth(cell2.cell, editor);
22503
+ if (width === void 0) {
22504
+ continue;
22505
+ }
22506
+ const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
22507
+ cell2.cell.setWidth(newWidth);
22487
22508
  }
22488
- const { rows, columns } = dimensions;
22489
- editor.focus(() => {
22490
- editor.update(() => {
22491
- $insertNodes([$createTableNodeWithDimensions(rows, columns, false)]);
22492
- });
22493
- });
22494
- });
22495
- } else if (type === "asset" && onInsertAsset) {
22496
- onInsertAsset();
22509
+ }
22510
+ },
22511
+ { tag: "skip-scroll-into-view" }
22512
+ );
22513
+ },
22514
+ [activeCell, editor]
22515
+ );
22516
+ const mouseUpHandler = useCallback13(
22517
+ (direction) => {
22518
+ const handler = (event) => {
22519
+ event.preventDefault();
22520
+ event.stopPropagation();
22521
+ if (!activeCell) {
22522
+ throw new Error("TableCellResizer: Expected active cell.");
22497
22523
  }
22498
- });
22499
- });
22500
- };
22501
- const updateToolbar = useCallback13(() => {
22502
- const selection = $getSelection5();
22503
- if (!$isRangeSelection5(selection)) {
22504
- return;
22505
- }
22506
- const newActiveFormats = [];
22507
- for (const format of richTextBuiltInFormats) {
22508
- if (selection.hasFormat(format.type)) {
22509
- newActiveFormats.push(format.type);
22524
+ if (mouseStartPosRef.current) {
22525
+ const { x, y } = mouseStartPosRef.current;
22526
+ if (activeCell === null) {
22527
+ return;
22528
+ }
22529
+ const zoom = calculateZoomLevel(event.target);
22530
+ if (isHeightChanging(direction)) {
22531
+ const heightChange = (event.clientY - y) / zoom;
22532
+ updateRowHeight(heightChange);
22533
+ } else {
22534
+ const widthChange = (event.clientX - x) / zoom;
22535
+ updateColumnWidth(widthChange);
22536
+ }
22537
+ resetState();
22538
+ document.removeEventListener("mouseup", handler);
22539
+ }
22540
+ };
22541
+ return handler;
22542
+ },
22543
+ [activeCell, resetState, updateColumnWidth, updateRowHeight]
22544
+ );
22545
+ const toggleResize = useCallback13(
22546
+ (direction) => (event) => {
22547
+ event.preventDefault();
22548
+ event.stopPropagation();
22549
+ if (!activeCell) {
22550
+ throw new Error("TableCellResizer: Expected active cell.");
22551
+ }
22552
+ mouseStartPosRef.current = {
22553
+ x: event.clientX,
22554
+ y: event.clientY
22555
+ };
22556
+ updateMouseCurrentPos(mouseStartPosRef.current);
22557
+ updateDraggingDirection(direction);
22558
+ document.addEventListener("mouseup", mouseUpHandler(direction));
22559
+ },
22560
+ [activeCell, mouseUpHandler]
22561
+ );
22562
+ const getResizers = useCallback13(() => {
22563
+ if (activeCell) {
22564
+ const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
22565
+ const parentRect = positioningAnchorEl.getBoundingClientRect();
22566
+ const zoom = calculateZoomLevel(activeCell.elem);
22567
+ const zoneWidth = 10;
22568
+ const styles = {
22569
+ bottom: {
22570
+ backgroundColor: "none",
22571
+ cursor: "row-resize",
22572
+ height: `${zoneWidth}px`,
22573
+ left: `${left - parentRect.left}px`,
22574
+ top: `${top - parentRect.top + positioningAnchorEl.scrollTop + height - zoneWidth / 2}px`,
22575
+ width: `${width}px`
22576
+ },
22577
+ right: {
22578
+ backgroundColor: "none",
22579
+ cursor: "col-resize",
22580
+ height: `${height}px`,
22581
+ left: `${left - parentRect.left + width - zoneWidth / 2}px`,
22582
+ top: `${top - parentRect.top + positioningAnchorEl.scrollTop}px`,
22583
+ width: `${zoneWidth}px`
22584
+ }
22585
+ };
22586
+ const tableRect = tableRectRef.current;
22587
+ if (draggingDirection && mouseCurrentPos && tableRect) {
22588
+ if (isHeightChanging(draggingDirection)) {
22589
+ styles[draggingDirection].left = `${tableRect.left - parentRect.left}px`;
22590
+ styles[draggingDirection].top = `${(mouseCurrentPos.y - parentRect.top + positioningAnchorEl.scrollTop) / zoom}px`;
22591
+ styles[draggingDirection].height = "3px";
22592
+ styles[draggingDirection].width = `${tableRect.width}px`;
22593
+ } else {
22594
+ styles[draggingDirection].top = `${tableRect.top - parentRect.top + positioningAnchorEl.scrollTop}px`;
22595
+ styles[draggingDirection].left = `${(mouseCurrentPos.x - parentRect.left) / zoom}px`;
22596
+ styles[draggingDirection].width = "3px";
22597
+ styles[draggingDirection].height = `${tableRect.height}px`;
22598
+ }
22599
+ styles[draggingDirection].backgroundColor = "#adf";
22510
22600
  }
22601
+ return styles;
22511
22602
  }
22512
- setActiveFormats(newActiveFormats);
22513
- const anchorNode = selection.anchor.getNode();
22514
- let element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent(anchorNode, (e) => {
22515
- const parent = e.getParent();
22516
- return parent !== null && $isRootOrShadowRoot(parent);
22517
- });
22518
- if (element === null) {
22519
- element = anchorNode.getTopLevelElementOrThrow();
22520
- }
22521
- const elementKey = element.getKey();
22522
- const elementDOM = editor.getElementByKey(elementKey);
22523
- if (elementDOM !== null) {
22524
- if ($isListNode2(element)) {
22525
- const parentList = $getNearestNodeOfType2(anchorNode, ListNode2);
22526
- const type = parentList ? parentList.getListType() : element.getListType();
22527
- setActiveElement(type === "bullet" ? "unorderedList" : "orderedList");
22528
- } else {
22529
- const type = $isHeadingNode(element) ? element.getTag() : element.getType();
22530
- setActiveElement(type);
22603
+ return {
22604
+ bottom: null,
22605
+ left: null,
22606
+ right: null,
22607
+ top: null
22608
+ };
22609
+ }, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
22610
+ const resizerStyles = getResizers();
22611
+ return /* @__PURE__ */ jsx132("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs88(Fragment20, { children: [
22612
+ /* @__PURE__ */ jsx132(
22613
+ "div",
22614
+ {
22615
+ css: tableResizer,
22616
+ style: resizerStyles.right || void 0,
22617
+ onMouseDown: toggleResize("right")
22531
22618
  }
22532
- }
22533
- const node = getSelectedNode(selection);
22534
- if (getLinkAncestor(node) !== null) {
22535
- setIsLink(true);
22536
- } else {
22537
- setIsLink(false);
22538
- }
22539
- }, [editor, setActiveElement, setActiveFormats, setIsLink]);
22619
+ ),
22620
+ /* @__PURE__ */ jsx132(
22621
+ "div",
22622
+ {
22623
+ css: tableResizer,
22624
+ style: resizerStyles.bottom || void 0,
22625
+ onMouseDown: toggleResize("bottom")
22626
+ }
22627
+ )
22628
+ ] }) });
22629
+ }
22630
+ function TableCellResizerPlugin({ positioningAnchorEl }) {
22631
+ const [editor] = useLexicalComposerContext6();
22632
+ const isEditable = useLexicalEditable2();
22633
+ return useMemo7(
22634
+ () => isEditable ? createPortal3(
22635
+ /* @__PURE__ */ jsx132(TableCellResizer, { editor, positioningAnchorEl }),
22636
+ positioningAnchorEl
22637
+ ) : null,
22638
+ [editor, isEditable, positioningAnchorEl]
22639
+ );
22640
+ }
22641
+
22642
+ // src/components/ParameterInputs/rich-text/TableSelectionPlugin.tsx
22643
+ import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
22644
+ import { $findCellNode } from "@lexical/table";
22645
+ import {
22646
+ $getSelection as $getSelection5,
22647
+ $isRangeSelection as $isRangeSelection5,
22648
+ $setSelection,
22649
+ COMMAND_PRIORITY_NORMAL as COMMAND_PRIORITY_NORMAL2,
22650
+ SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND3
22651
+ } from "lexical";
22652
+ import { useEffect as useEffect23, useState as useState20 } from "react";
22653
+ var TableSelectionPlugin = () => {
22654
+ const [editor] = useLexicalComposerContext7();
22655
+ const [closestTableCellNode, setClosestTableCellNode] = useState20(null);
22540
22656
  useEffect23(() => {
22541
22657
  return editor.registerCommand(
22542
22658
  SELECTION_CHANGE_COMMAND3,
22543
- (_payload) => {
22544
- updateToolbar();
22659
+ () => {
22660
+ editor.read(() => {
22661
+ const selection = $getSelection5();
22662
+ if (!$isRangeSelection5(selection) || !selection.isCollapsed()) {
22663
+ setClosestTableCellNode(null);
22664
+ return false;
22665
+ }
22666
+ const tableCellNode = $findCellNode(selection.anchor.getNode());
22667
+ if (tableCellNode === null) {
22668
+ setClosestTableCellNode(null);
22669
+ return false;
22670
+ }
22671
+ setClosestTableCellNode(tableCellNode);
22672
+ });
22545
22673
  return false;
22546
22674
  },
22547
- COMMAND_PRIORITY_CRITICAL2
22675
+ COMMAND_PRIORITY_NORMAL2
22548
22676
  );
22549
- }, [editor, updateToolbar]);
22677
+ }, [editor]);
22550
22678
  useEffect23(() => {
22551
- return editor.registerUpdateListener(({ editorState }) => {
22552
- requestAnimationFrame(() => {
22553
- editorState.read(() => {
22554
- updateToolbar();
22555
- });
22556
- });
22557
- });
22558
- }, [editor, updateToolbar]);
22559
- return /* @__PURE__ */ jsxs88("div", { css: toolbar, children: [
22560
- /* @__PURE__ */ jsxs88(
22561
- Menu,
22562
- {
22563
- menuTrigger: /* @__PURE__ */ jsxs88("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", children: [
22564
- visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
22565
- " ",
22566
- /* @__PURE__ */ jsx132(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
22567
- ] }),
22568
- placement: "bottom-start",
22569
- children: [
22570
- [
22571
- {
22572
- label: "Normal",
22573
- type: "paragraph"
22574
- },
22575
- ...visibleTextualElements
22576
- ].map((element) => /* @__PURE__ */ jsx132(
22577
- MenuItem,
22578
- {
22579
- onClick: () => {
22580
- onSelectElement(element.type);
22581
- },
22582
- children: element.label
22583
- },
22584
- element.type
22585
- )),
22586
- visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx132(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
22587
- ]
22588
- }
22589
- ),
22590
- visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs88("div", { css: toolbarGroup, children: [
22591
- visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx132(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx132(
22592
- "button",
22593
- {
22594
- onClick: () => {
22595
- editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
22596
- },
22597
- css: [
22598
- richTextToolbarButton,
22599
- activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
22600
- ],
22601
- children: /* @__PURE__ */ jsx132(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
22602
- }
22603
- ) }, format.type)),
22604
- visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx132(
22605
- Menu,
22606
- {
22607
- menuLabel: "Alternative text styles",
22608
- menuTrigger: /* @__PURE__ */ jsx132("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx132(Icon, { icon: "more-alt", css: toolbarIcon }) }),
22609
- placement: "bottom-start",
22610
- children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx132(
22611
- MenuItem,
22612
- {
22613
- onClick: () => {
22614
- editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
22615
- },
22616
- children: format.label
22617
- },
22618
- format.type
22619
- ))
22620
- }
22621
- ) : null
22622
- ] }) : null,
22623
- visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ jsxs88("div", { css: toolbarGroup, children: [
22624
- linkElementVisible ? /* @__PURE__ */ jsx132(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx132(
22625
- "button",
22626
- {
22627
- onClick: () => {
22628
- isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
22629
- },
22630
- css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
22631
- children: /* @__PURE__ */ jsx132(RichTextToolbarIcon, { icon: "link" })
22679
+ const onControlA = (event) => {
22680
+ if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
22681
+ if (!closestTableCellNode) {
22682
+ return;
22632
22683
  }
22633
- ) }) : null,
22634
- visibleLists.size > 0 ? /* @__PURE__ */ jsxs88(Fragment20, { children: [
22635
- visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx132(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx132(
22636
- "button",
22637
- {
22638
- onClick: () => {
22639
- activeElement === "unorderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
22640
- },
22641
- css: [
22642
- richTextToolbarButton,
22643
- activeElement === "unorderedList" ? richTextToolbarButtonActive : null
22644
- ],
22645
- children: /* @__PURE__ */ jsx132(RichTextToolbarIcon, { icon: "layout-list" })
22646
- }
22647
- ) }) : null,
22648
- visibleLists.has("orderedList") ? /* @__PURE__ */ jsx132(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx132(
22649
- "button",
22650
- {
22651
- onClick: () => {
22652
- activeElement === "orderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
22653
- },
22654
- css: [
22655
- richTextToolbarButton,
22656
- activeElement === "orderedList" ? richTextToolbarButtonActive : null
22657
- ],
22658
- children: /* @__PURE__ */ jsx132(RichTextToolbarIcon, { icon: "layout-list-numbered" })
22659
- }
22660
- ) }) : null
22661
- ] }) : null,
22662
- customControls ? customControls : null
22663
- ] }) : null,
22664
- visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ jsx132("div", { css: toolbarGroup, children: /* @__PURE__ */ jsxs88(
22665
- Menu,
22666
- {
22667
- menuTrigger: /* @__PURE__ */ jsxs88("button", { css: richTextToolbarButton, title: "Insert block element", children: [
22668
- "Insert",
22669
- /* @__PURE__ */ jsx132(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
22670
- ] }),
22671
- placement: "bottom-start",
22672
- children: [
22673
- quoteElementVisible ? /* @__PURE__ */ jsx132(
22674
- MenuItem,
22675
- {
22676
- onClick: () => {
22677
- onSelectElement("quote");
22678
- },
22679
- icon: /* @__PURE__ */ jsx132(Icon, { icon: "quote", iconColor: "currentColor" }),
22680
- children: "Quote"
22681
- }
22682
- ) : null,
22683
- codeElementVisible ? /* @__PURE__ */ jsx132(
22684
- MenuItem,
22685
- {
22686
- onClick: () => {
22687
- onSelectElement("code");
22688
- },
22689
- icon: /* @__PURE__ */ jsx132(Icon, { icon: "code-slash", iconColor: "currentColor" }),
22690
- children: "Code"
22691
- }
22692
- ) : null,
22693
- tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ jsx132(
22694
- MenuItem,
22695
- {
22696
- onClick: () => {
22697
- onSelectElement("table");
22698
- },
22699
- icon: /* @__PURE__ */ jsx132(Icon, { icon: "view-grid", iconColor: "currentColor" }),
22700
- children: "Table"
22701
- }
22702
- ) : null,
22703
- assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ jsx132(
22704
- MenuItem,
22705
- {
22706
- onClick: () => {
22707
- onSelectElement("asset");
22708
- },
22709
- icon: /* @__PURE__ */ jsx132(Icon, { icon: "image", iconColor: "currentColor" }),
22710
- children: "Asset"
22711
- }
22712
- ) : null
22713
- ]
22684
+ event.preventDefault();
22685
+ editor.update(() => {
22686
+ const selection = closestTableCellNode.select(0, closestTableCellNode.getChildrenSize());
22687
+ $setSelection(selection);
22688
+ });
22714
22689
  }
22715
- ) }) : null
22716
- ] });
22690
+ };
22691
+ return editor.registerRootListener((rootElement, prevRootElement) => {
22692
+ rootElement == null ? void 0 : rootElement.addEventListener("keydown", onControlA);
22693
+ prevRootElement == null ? void 0 : prevRootElement.removeEventListener("keydown", onControlA);
22694
+ });
22695
+ }, [editor, closestTableCellNode]);
22696
+ return null;
22717
22697
  };
22718
- var RichTextToolbar_default = RichTextToolbar;
22698
+ var TableSelectionPlugin_default = TableSelectionPlugin;
22719
22699
 
22720
22700
  // src/components/ParameterInputs/ParameterRichText.tsx
22721
22701
  import { Fragment as Fragment21, jsx as jsx133, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
@@ -22744,7 +22724,6 @@ var ParameterRichText = ({
22744
22724
  variables,
22745
22725
  customControls,
22746
22726
  onInsertTable,
22747
- onInsertAsset,
22748
22727
  minimalInteractivity
22749
22728
  }) => {
22750
22729
  return /* @__PURE__ */ jsxs89(
@@ -22778,7 +22757,6 @@ var ParameterRichText = ({
22778
22757
  variables,
22779
22758
  customControls,
22780
22759
  onInsertTable,
22781
- onInsertAsset,
22782
22760
  minimalInteractivity,
22783
22761
  children
22784
22762
  }
@@ -22862,7 +22840,6 @@ var editorPlaceholder = css101`
22862
22840
  `;
22863
22841
  var editorInput = css101`
22864
22842
  min-height: 100%;
22865
- flex-grow: 1;
22866
22843
 
22867
22844
  &:focus,
22868
22845
  &:focus-within {
@@ -22885,7 +22862,6 @@ var ParameterRichTextInner = ({
22885
22862
  variables,
22886
22863
  customControls,
22887
22864
  onInsertTable,
22888
- onInsertAsset,
22889
22865
  minimalInteractivity
22890
22866
  }) => {
22891
22867
  const lexicalConfig = {
@@ -22958,7 +22934,6 @@ var ParameterRichTextInner = ({
22958
22934
  variables,
22959
22935
  customControls,
22960
22936
  onInsertTable,
22961
- onInsertAsset,
22962
22937
  minimalInteractivity,
22963
22938
  children
22964
22939
  }
@@ -22987,7 +22962,6 @@ var RichText = ({
22987
22962
  variables,
22988
22963
  customControls,
22989
22964
  onInsertTable,
22990
- onInsertAsset,
22991
22965
  minimalInteractivity
22992
22966
  }) => {
22993
22967
  const [editor] = useLexicalComposerContext8();
@@ -23024,15 +22998,7 @@ var RichText = ({
23024
22998
  }
23025
22999
  };
23026
23000
  return /* @__PURE__ */ jsxs89(Fragment21, { children: [
23027
- readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx133(
23028
- RichTextToolbar_default,
23029
- {
23030
- config,
23031
- customControls,
23032
- onInsertTable,
23033
- onInsertAsset
23034
- }
23035
- ),
23001
+ readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx133(RichTextToolbar_default, { config, customControls, onInsertTable }),
23036
23002
  /* @__PURE__ */ jsxs89("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
23037
23003
  /* @__PURE__ */ jsxs89(
23038
23004
  "div",