@uniformdev/design-system 19.173.2-alpha.210 → 19.173.2-alpha.263

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/index.js CHANGED
@@ -1676,6 +1676,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
1676
1676
  --purple-rain-600: #6340a9;
1677
1677
 
1678
1678
  /* raspberry spectrum*/
1679
+ --raspberry-beret-50: #fefafc;
1679
1680
  --raspberry-beret-100: #ffbee1;
1680
1681
  --raspberry-beret-200: #ff94ce;
1681
1682
  --raspberry-beret-300: #ff6aba;
@@ -13510,6 +13511,9 @@ var avatarImageStyles = import_react27.css`
13510
13511
  height: 100%;
13511
13512
  object-fit: cover;
13512
13513
  `;
13514
+ var avatarSize2xsStyles = import_react27.css`
13515
+ width: 1rem;
13516
+ `;
13513
13517
  var avatarSizeXsStyles = import_react27.css`
13514
13518
  width: 1.5rem;
13515
13519
  `;
@@ -13523,20 +13527,26 @@ var avatarSizeLgStyles = import_react27.css`
13523
13527
  width: 3rem;
13524
13528
  `;
13525
13529
  var avatarSizeXlStyles = import_react27.css`
13526
- width: 3.5rem;
13530
+ width: 4rem;
13531
+ `;
13532
+ var avatarSize2xlStyles = import_react27.css`
13533
+ width: 5rem;
13527
13534
  `;
13528
13535
 
13529
13536
  // src/components/Avatar/Avatar.tsx
13530
13537
  var import_jsx_runtime19 = require("@emotion/react/jsx-runtime");
13531
13538
  var avatarSizeStylesMap = {
13539
+ "2xs": avatarSize2xsStyles,
13532
13540
  xs: avatarSizeXsStyles,
13533
13541
  sm: avatarSizeSmStyles,
13534
13542
  md: avatarSizeMdStyles,
13535
13543
  lg: avatarSizeLgStyles,
13536
- xl: avatarSizeXlStyles
13544
+ xl: avatarSizeXlStyles,
13545
+ "2xl": avatarSize2xlStyles
13537
13546
  };
13538
- var Avatar = ({ src, label = "", children, size = "md", ...props }) => {
13539
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tooltip, { title: label, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { css: [avatarStyles, avatarSizeStylesMap[size]], ...props, children: [
13547
+ var Avatar = ({ src, label = "", children, size = "md", as = "div", ...props }) => {
13548
+ const Element = as;
13549
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tooltip, { title: label, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Element, { css: [avatarStyles, avatarSizeStylesMap[size]], ...props, children: [
13540
13550
  !src ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("img", { role: "presentation", src, css: avatarImageStyles }),
13541
13551
  children
13542
13552
  ] }) });
@@ -13976,7 +13986,6 @@ var UniformLogoLarge = ({ ...props }) => {
13976
13986
  // src/components/ButtonWithMenu/ButtonWithMenu.tsx
13977
13987
  init_emotion_jsx_shim();
13978
13988
  var import_CgChevronDown4 = require("@react-icons/all-files/cg/CgChevronDown");
13979
- var React13 = __toESM(require("react"));
13980
13989
 
13981
13990
  // src/components/Menu/DropdownStyleMenuTrigger.tsx
13982
13991
  init_emotion_jsx_shim();
@@ -14066,7 +14075,7 @@ var menuItem = (textTheme, forceActive) => import_react34.css`
14066
14075
  align-items: center;
14067
14076
  border-radius: var(--rounded-base);
14068
14077
  background: none;
14069
- color: ${textTheme === "base" ? "var(--typography-base)" : "var(--brand-secondary-5)"};
14078
+ color: ${textTheme === "base" ? "var(--typography-base)" : textTheme === "accent-alt" ? "var(--accent-alt-dark)" : "var(--brand-secondary-5)"};
14070
14079
  display: flex;
14071
14080
  padding: var(--spacing-3);
14072
14081
  font-weight: var(--fw-regular);
@@ -15862,7 +15871,6 @@ var ButtonWithMenu = ({
15862
15871
  }) => {
15863
15872
  const onButtonClickHandler = onButtonClick != null ? onButtonClick : shortcut == null ? void 0 : shortcut.handler;
15864
15873
  const disabledValue = disabled2 != null ? disabled2 : shortcut == null ? void 0 : shortcut.disabled;
15865
- const menuRef = React13.useRef(null);
15866
15874
  if (typeof withoutPortal !== "undefined" && typeof portal === "undefined") {
15867
15875
  portal = !withoutPortal;
15868
15876
  }
@@ -15906,7 +15914,6 @@ var ButtonWithMenu = ({
15906
15914
  disabledValue ? menuButton2 : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
15907
15915
  Menu,
15908
15916
  {
15909
- ref: menuRef,
15910
15917
  menuLabel: "buttonMenu",
15911
15918
  placement,
15912
15919
  menuTrigger: menuButton2,
@@ -16193,7 +16200,7 @@ init_emotion_jsx_shim();
16193
16200
  // src/components/Typography/Link.tsx
16194
16201
  init_emotion_jsx_shim();
16195
16202
  var import_CgExternal2 = require("@react-icons/all-files/cg/CgExternal");
16196
- var React14 = __toESM(require("react"));
16203
+ var React13 = __toESM(require("react"));
16197
16204
 
16198
16205
  // src/components/Typography/styles/Link.styles.ts
16199
16206
  init_emotion_jsx_shim();
@@ -16219,7 +16226,7 @@ var linkColorCurrent = import_react62.css`
16219
16226
 
16220
16227
  // src/components/Typography/Link.tsx
16221
16228
  var import_jsx_runtime55 = require("@emotion/react/jsx-runtime");
16222
- var Link = React14.forwardRef(
16229
+ var Link = React13.forwardRef(
16223
16230
  ({ external, text, linkColor = "default", children, ...props }, ref) => {
16224
16231
  const textColor = {
16225
16232
  currentColor: linkColorCurrent,
@@ -16237,7 +16244,7 @@ var Link = React14.forwardRef(
16237
16244
  ] });
16238
16245
  }
16239
16246
  );
16240
- var LinkWithRef = React14.forwardRef(({ linkManagerComponent: LinkManager, href, as, onClick, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(LinkManager, { ...props, as, href, ref, passHref: true, legacyBehavior: true, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Link, { ...props, onClick }) }));
16247
+ var LinkWithRef = React13.forwardRef(({ linkManagerComponent: LinkManager, href, as, onClick, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(LinkManager, { ...props, as, href, ref, passHref: true, legacyBehavior: true, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Link, { ...props, onClick }) }));
16241
16248
 
16242
16249
  // src/components/Typography/Paragraph.tsx
16243
16250
  init_emotion_jsx_shim();
@@ -17673,7 +17680,7 @@ var DescriptionListValueBoolean = ({ value }) => {
17673
17680
 
17674
17681
  // src/components/Details/Details.tsx
17675
17682
  init_emotion_jsx_shim();
17676
- var React16 = __toESM(require("react"));
17683
+ var React15 = __toESM(require("react"));
17677
17684
 
17678
17685
  // src/components/Details/Details.styles.ts
17679
17686
  init_emotion_jsx_shim();
@@ -17740,9 +17747,9 @@ var Details = ({
17740
17747
  onChange,
17741
17748
  ...props
17742
17749
  }) => {
17743
- const detailsRef = React16.useRef(null);
17744
- const [internalOpen, setInternalOpen] = React16.useState(isOpenByDefault);
17745
- const memoizedIsOpen = React16.useMemo(() => {
17750
+ const detailsRef = React15.useRef(null);
17751
+ const [internalOpen, setInternalOpen] = React15.useState(isOpenByDefault);
17752
+ const memoizedIsOpen = React15.useMemo(() => {
17746
17753
  return isOpen !== void 0 ? isOpen : internalOpen;
17747
17754
  }, [internalOpen, isOpen]);
17748
17755
  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
@@ -18206,6 +18213,7 @@ var DrawerContentInner = import_react85.css`
18206
18213
  height: 100%;
18207
18214
  overflow-y: auto;
18208
18215
  ${scrollbarStyles}
18216
+ border-radius: var(--rounded-base);
18209
18217
  `;
18210
18218
  var DrawerContentBtnGroup = import_react85.css`
18211
18219
  display: flex;
@@ -20021,10 +20029,10 @@ var loader = import_react111.css`
20021
20029
  display: inline-flex;
20022
20030
  justify-content: center;
20023
20031
  `;
20024
- function loadingDot(size) {
20032
+ function loadingDot(size, backgroundColor) {
20025
20033
  const dotSize = size === "lg" ? 8 : 4;
20026
20034
  return import_react111.css`
20027
- background-color: var(--gray-700);
20035
+ background-color: ${backgroundColor};
20028
20036
  display: block;
20029
20037
  border-radius: var(--rounded-full);
20030
20038
  animation: ${bounceFade(size)} 0.75s infinite ease-in-out;
@@ -20049,11 +20057,13 @@ function loadingDot(size) {
20049
20057
 
20050
20058
  // src/components/LoadingIndicator/LoadingIndicator.tsx
20051
20059
  var import_jsx_runtime98 = require("@emotion/react/jsx-runtime");
20052
- var LoadingIndicator = ({
20053
- size = "lg",
20054
- ...props
20055
- }) => {
20056
- const dotStyle = loadingDot(size);
20060
+ var cssColorMap = {
20061
+ gray: "var(--gray-700)",
20062
+ "accent-alt": "var(--accent-alt-dark)"
20063
+ };
20064
+ var LoadingIndicator = ({ size = "lg", color = "gray", ...props }) => {
20065
+ const cssColor = cssColorMap[color];
20066
+ const dotStyle = loadingDot(size, cssColor);
20057
20067
  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
20058
20068
  /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { css: dotStyle }),
20059
20069
  /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { css: dotStyle }),
@@ -22295,11 +22305,11 @@ var ParameterNameAndPublicIdInput = ({
22295
22305
 
22296
22306
  // src/components/ParameterInputs/ParameterRichText.tsx
22297
22307
  init_emotion_jsx_shim();
22298
- var import_react156 = require("@emotion/react");
22308
+ var import_react158 = require("@emotion/react");
22299
22309
  var import_list3 = require("@lexical/list");
22300
22310
  var import_markdown = require("@lexical/markdown");
22301
22311
  var import_LexicalComposer = require("@lexical/react/LexicalComposer");
22302
- var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
22312
+ var import_LexicalComposerContext9 = require("@lexical/react/LexicalComposerContext");
22303
22313
  var import_LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
22304
22314
  var import_LexicalErrorBoundary = __toESM(require("@lexical/react/LexicalErrorBoundary"));
22305
22315
  var import_LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin");
@@ -22312,6 +22322,12 @@ var import_table5 = require("@lexical/table");
22312
22322
 
22313
22323
  // ../richtext/dist/index.mjs
22314
22324
  init_emotion_jsx_shim();
22325
+ function isRichTextNode(node) {
22326
+ return !!node && typeof node === "object" && "type" in node;
22327
+ }
22328
+ function isRichTextNodeType(node, type) {
22329
+ return isRichTextNode(node) && node.type === type;
22330
+ }
22315
22331
  var richTextBuiltInElements = [
22316
22332
  {
22317
22333
  label: "Heading 1",
@@ -22361,6 +22377,10 @@ var richTextBuiltInElements = [
22361
22377
  label: "Table",
22362
22378
  type: "table"
22363
22379
  },
22380
+ {
22381
+ label: "Asset",
22382
+ type: "asset"
22383
+ },
22364
22384
  {
22365
22385
  label: "Dynamic Token",
22366
22386
  type: "variable"
@@ -22407,8 +22427,8 @@ var getLabelForElement = (type) => {
22407
22427
 
22408
22428
  // src/components/ParameterInputs/ParameterRichText.tsx
22409
22429
  var import_fast_equals2 = require("fast-equals");
22410
- var import_lexical9 = require("lexical");
22411
- var import_react157 = require("react");
22430
+ var import_lexical10 = require("lexical");
22431
+ var import_react159 = require("react");
22412
22432
 
22413
22433
  // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
22414
22434
  init_emotion_jsx_shim();
@@ -22690,20 +22710,75 @@ var tableHeaderElement = import_css2.css`
22690
22710
  width: 7rem;
22691
22711
  `;
22692
22712
 
22693
- // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
22713
+ // src/components/ParameterInputs/rich-text/ImprovedAssetSelectionPlugin.tsx
22694
22714
  init_emotion_jsx_shim();
22695
- var import_react146 = require("@emotion/react");
22696
22715
  var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
22697
- var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
22698
22716
  var import_utils6 = require("@lexical/utils");
22717
+ var import_lexical2 = require("lexical");
22718
+ var import_react146 = require("react");
22719
+ var ImprovedAssetSelectionPlugin = () => {
22720
+ const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
22721
+ (0, import_react146.useEffect)(() => {
22722
+ editor.getRootElement();
22723
+ const onRootClick = (event) => {
22724
+ if (event.target !== editor.getRootElement()) {
22725
+ return;
22726
+ }
22727
+ const clickArea = event.offsetY <= 60 ? "top" : "bottom";
22728
+ const state = editor.getEditorState().toJSON();
22729
+ const firstNode = state.root.children[0];
22730
+ const lastNode = state.root.children.at(-1);
22731
+ if (isRichTextNodeType(firstNode, "asset") && clickArea === "top") {
22732
+ editor.update(() => {
22733
+ (0, import_utils6.$insertFirst)((0, import_lexical2.$getRoot)(), (0, import_lexical2.$createParagraphNode)());
22734
+ requestAnimationFrame(() => {
22735
+ var _a, _b;
22736
+ (_b = (_a = editor.getRootElement()) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.scrollTo({
22737
+ top: 0,
22738
+ behavior: "instant"
22739
+ });
22740
+ });
22741
+ });
22742
+ } else if (isRichTextNodeType(lastNode, "asset") && clickArea === "bottom") {
22743
+ editor.update(() => {
22744
+ (0, import_lexical2.$getRoot)().selectEnd();
22745
+ (0, import_lexical2.$insertNodes)([(0, import_lexical2.$createParagraphNode)()]);
22746
+ requestAnimationFrame(() => {
22747
+ var _a, _b, _c, _d;
22748
+ (_d = (_a = editor.getRootElement()) == null ? void 0 : _a.parentElement) == null ? void 0 : _d.scrollTo({
22749
+ top: (_c = (_b = editor.getRootElement()) == null ? void 0 : _b.parentElement) == null ? void 0 : _c.scrollHeight,
22750
+ behavior: "instant"
22751
+ });
22752
+ });
22753
+ });
22754
+ }
22755
+ };
22756
+ const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
22757
+ rootElement == null ? void 0 : rootElement.addEventListener("click", onRootClick);
22758
+ prevRootElement == null ? void 0 : prevRootElement.removeEventListener("click", onRootClick);
22759
+ });
22760
+ return () => {
22761
+ removeRootListener();
22762
+ };
22763
+ }, [editor]);
22764
+ return null;
22765
+ };
22766
+ var ImprovedAssetSelectionPlugin_default = ImprovedAssetSelectionPlugin;
22767
+
22768
+ // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
22769
+ init_emotion_jsx_shim();
22770
+ var import_react147 = require("@emotion/react");
22771
+ var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
22772
+ var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
22773
+ var import_utils7 = require("@lexical/utils");
22699
22774
  var import_fast_equals = require("fast-equals");
22700
- var import_lexical3 = require("lexical");
22701
- var import_react147 = require("react");
22775
+ var import_lexical4 = require("lexical");
22776
+ var import_react148 = require("react");
22702
22777
 
22703
22778
  // src/components/ParameterInputs/rich-text/utils.ts
22704
22779
  init_emotion_jsx_shim();
22705
22780
  var import_selection = require("@lexical/selection");
22706
- var import_lexical2 = require("lexical");
22781
+ var import_lexical3 = require("lexical");
22707
22782
  var getElementNodesInSelection = (selection) => {
22708
22783
  const nodesInSelection = selection.getNodes();
22709
22784
  if (nodesInSelection.length === 0) {
@@ -22712,7 +22787,7 @@ var getElementNodesInSelection = (selection) => {
22712
22787
  selection.focus.getNode().getParentOrThrow()
22713
22788
  ]);
22714
22789
  }
22715
- return new Set(nodesInSelection.map((node) => (0, import_lexical2.$isElementNode)(node) ? node : node.getParentOrThrow()));
22790
+ return new Set(nodesInSelection.map((node) => (0, import_lexical3.$isElementNode)(node) ? node : node.getParentOrThrow()));
22716
22791
  };
22717
22792
  var getAncestor = (node, predicate) => {
22718
22793
  let parent = node;
@@ -22759,7 +22834,7 @@ var guessLinkTypeFromPath = (path) => {
22759
22834
  };
22760
22835
  function convertAnchorElement(domNode) {
22761
22836
  let node = null;
22762
- if (!(0, import_utils6.isHTMLAnchorElement)(domNode)) {
22837
+ if (!(0, import_utils7.isHTMLAnchorElement)(domNode)) {
22763
22838
  return { node };
22764
22839
  }
22765
22840
  const textContent = domNode.textContent;
@@ -22816,14 +22891,12 @@ function convertAnchorElement(domNode) {
22816
22891
  nodeId,
22817
22892
  dynamicInputValues
22818
22893
  };
22819
- if (isProjectMapLinkValue(value)) {
22820
- node = $createLinkNode(value);
22821
- } else if (isNonProjectMapLinkValue(value)) {
22894
+ if (isProjectMapLinkValue(value) || isNonProjectMapLinkValue(value)) {
22822
22895
  node = $createLinkNode(value);
22823
22896
  }
22824
22897
  return { node };
22825
22898
  }
22826
- var LinkNode = class _LinkNode extends import_lexical3.ElementNode {
22899
+ var LinkNode = class _LinkNode extends import_lexical4.ElementNode {
22827
22900
  static getType() {
22828
22901
  return "link";
22829
22902
  }
@@ -22868,7 +22941,7 @@ var LinkNode = class _LinkNode extends import_lexical3.ElementNode {
22868
22941
  element.setAttribute("href", `mailto:${this.__link.path}`);
22869
22942
  }
22870
22943
  }
22871
- (0, import_utils6.addClassNamesToElement)(element, config.theme.link);
22944
+ (0, import_utils7.addClassNamesToElement)(element, config.theme.link);
22872
22945
  return element;
22873
22946
  }
22874
22947
  updateDOM(prevNode, a) {
@@ -22896,7 +22969,7 @@ var LinkNode = class _LinkNode extends import_lexical3.ElementNode {
22896
22969
  }
22897
22970
  insertNewAfter(selection, restoreSelection = true) {
22898
22971
  const element = this.getParentOrThrow().insertNewAfter(selection, restoreSelection);
22899
- if ((0, import_lexical3.$isElementNode)(element)) {
22972
+ if ((0, import_lexical4.$isElementNode)(element)) {
22900
22973
  const linkNode = $createLinkNode(
22901
22974
  "nodeId" in this.__link ? {
22902
22975
  nodeId: this.__link.nodeId,
@@ -22927,7 +23000,7 @@ var LinkNode = class _LinkNode extends import_lexical3.ElementNode {
22927
23000
  }
22928
23001
  };
22929
23002
  function $createLinkNode(props) {
22930
- return (0, import_lexical3.$applyNodeReplacement)(new LinkNode(props));
23003
+ return (0, import_lexical4.$applyNodeReplacement)(new LinkNode(props));
22931
23004
  }
22932
23005
  function $isLinkNode(node) {
22933
23006
  return node instanceof LinkNode;
@@ -22940,14 +23013,14 @@ function removeLinkNode(node) {
22940
23013
  node.remove();
22941
23014
  }
22942
23015
  function removeLinkNodeFromSelection() {
22943
- const selection = (0, import_lexical3.$getSelection)();
22944
- if (!(0, import_lexical3.$isRangeSelection)(selection)) {
23016
+ const selection = (0, import_lexical4.$getSelection)();
23017
+ if (!(0, import_lexical4.$isRangeSelection)(selection)) {
22945
23018
  return;
22946
23019
  }
22947
23020
  const nodes = selection.extract();
22948
23021
  const linkNodesFound = /* @__PURE__ */ new Set();
22949
23022
  for (const node of nodes) {
22950
- if ((0, import_lexical3.$isElementNode)(node) && !node.isInline()) {
23023
+ if ((0, import_lexical4.$isElementNode)(node) && !node.isInline()) {
22951
23024
  continue;
22952
23025
  }
22953
23026
  const linkNodeAncestor = getLinkAncestor(node);
@@ -22961,17 +23034,21 @@ function removeLinkNodeFromSelection() {
22961
23034
  }
22962
23035
  function upsertLinkNode(props) {
22963
23036
  var _a, _b, _c, _d, _e;
22964
- const selection = (0, import_lexical3.$getSelection)();
22965
- if (!(0, import_lexical3.$isRangeSelection)(selection)) {
23037
+ const selection = (0, import_lexical4.$getSelection)();
23038
+ if (!(0, import_lexical4.$isRangeSelection)(selection)) {
22966
23039
  return;
22967
23040
  }
22968
23041
  const nodes = selection.extract();
22969
23042
  const touchedNodes = [];
22970
23043
  for (const node of nodes) {
22971
- if ((0, import_lexical3.$isElementNode)(node) && !node.isInline()) {
23044
+ if ((0, import_lexical4.$isElementNode)(node) && !node.isInline()) {
22972
23045
  continue;
22973
23046
  }
22974
23047
  const linkNodeAncestor = getLinkAncestor(node);
23048
+ if ($isLinkNode(node)) {
23049
+ node.setLink(props);
23050
+ continue;
23051
+ }
22975
23052
  if (!linkNodeAncestor) {
22976
23053
  const newLinkNode = $createLinkNode(props);
22977
23054
  node.insertBefore(newLinkNode);
@@ -23016,23 +23093,23 @@ function upsertLinkNode(props) {
23016
23093
  }
23017
23094
  }
23018
23095
  }
23019
- var REMOVE_LINK_NODE_COMMAND = (0, import_lexical3.createCommand)("REMOVE_LINK_NODE_COMMAND");
23020
- var UPSERT_LINK_NODE_COMMAND = (0, import_lexical3.createCommand)("UPSERT_LINK_NODE_COMMAND");
23021
- var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical3.createCommand)(
23096
+ var REMOVE_LINK_NODE_COMMAND = (0, import_lexical4.createCommand)("REMOVE_LINK_NODE_COMMAND");
23097
+ var UPSERT_LINK_NODE_COMMAND = (0, import_lexical4.createCommand)("UPSERT_LINK_NODE_COMMAND");
23098
+ var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical4.createCommand)(
23022
23099
  "OPEN_LINK_NODE_MODAL_COMMAND"
23023
23100
  );
23024
23101
  var LINK_POPOVER_OFFSET_X = 0;
23025
23102
  var LINK_POPOVER_OFFSET_Y = 8;
23026
- var linkPopover = import_react146.css`
23103
+ var linkPopover = import_react147.css`
23027
23104
  position: absolute;
23028
23105
  z-index: 11;
23029
23106
  `;
23030
- var linkPopoverContainer = import_react146.css`
23107
+ var linkPopoverContainer = import_react147.css`
23031
23108
  ${Popover()};
23032
23109
  align-items: center;
23033
23110
  display: flex;
23034
23111
  `;
23035
- var linkPopoverAnchor = import_react146.css`
23112
+ var linkPopoverAnchor = import_react147.css`
23036
23113
  ${link}
23037
23114
  ${linkColorDefault}
23038
23115
  `;
@@ -23044,29 +23121,29 @@ function LinkNodePlugin({
23044
23121
  const parsePath = getBoundPath != null ? getBoundPath : function(path) {
23045
23122
  return path;
23046
23123
  };
23047
- const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
23048
- const [linkPopoverState, setLinkPopoverState] = (0, import_react147.useState)();
23049
- const linkPopoverElRef = (0, import_react147.useRef)(null);
23050
- const [isEditorFocused, setIsEditorFocused] = (0, import_react147.useState)(false);
23051
- const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react147.useState)(false);
23052
- (0, import_react147.useEffect)(() => {
23124
+ const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
23125
+ const [linkPopoverState, setLinkPopoverState] = (0, import_react148.useState)();
23126
+ const linkPopoverElRef = (0, import_react148.useRef)(null);
23127
+ const [isEditorFocused, setIsEditorFocused] = (0, import_react148.useState)(false);
23128
+ const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react148.useState)(false);
23129
+ (0, import_react148.useEffect)(() => {
23053
23130
  if (!isEditorFocused && !isLinkPopoverFocused) {
23054
23131
  setLinkPopoverState(void 0);
23055
23132
  return;
23056
23133
  }
23057
23134
  }, [isEditorFocused, isLinkPopoverFocused]);
23058
- (0, import_react147.useEffect)(() => {
23135
+ (0, import_react148.useEffect)(() => {
23059
23136
  if (!editor.hasNodes([LinkNode])) {
23060
23137
  throw new Error("LinkNode not registered on editor");
23061
23138
  }
23062
- return (0, import_utils6.mergeRegister)(
23139
+ return (0, import_utils7.mergeRegister)(
23063
23140
  editor.registerCommand(
23064
23141
  UPSERT_LINK_NODE_COMMAND,
23065
23142
  (payload) => {
23066
23143
  upsertLinkNode(payload);
23067
23144
  return true;
23068
23145
  },
23069
- import_lexical3.COMMAND_PRIORITY_EDITOR
23146
+ import_lexical4.COMMAND_PRIORITY_EDITOR
23070
23147
  ),
23071
23148
  editor.registerCommand(
23072
23149
  REMOVE_LINK_NODE_COMMAND,
@@ -23074,7 +23151,7 @@ function LinkNodePlugin({
23074
23151
  removeLinkNodeFromSelection();
23075
23152
  return true;
23076
23153
  },
23077
- import_lexical3.COMMAND_PRIORITY_EDITOR
23154
+ import_lexical4.COMMAND_PRIORITY_EDITOR
23078
23155
  ),
23079
23156
  editor.registerCommand(
23080
23157
  OPEN_LINK_NODE_MODAL_COMMAND,
@@ -23093,18 +23170,18 @@ function LinkNodePlugin({
23093
23170
  });
23094
23171
  return true;
23095
23172
  },
23096
- import_lexical3.COMMAND_PRIORITY_EDITOR
23173
+ import_lexical4.COMMAND_PRIORITY_EDITOR
23097
23174
  ),
23098
23175
  editor.registerCommand(
23099
- import_lexical3.FOCUS_COMMAND,
23176
+ import_lexical4.FOCUS_COMMAND,
23100
23177
  () => {
23101
23178
  setIsEditorFocused(true);
23102
23179
  return true;
23103
23180
  },
23104
- import_lexical3.COMMAND_PRIORITY_EDITOR
23181
+ import_lexical4.COMMAND_PRIORITY_EDITOR
23105
23182
  ),
23106
23183
  editor.registerCommand(
23107
- import_lexical3.BLUR_COMMAND,
23184
+ import_lexical4.BLUR_COMMAND,
23108
23185
  () => {
23109
23186
  requestAnimationFrame(() => {
23110
23187
  if (linkPopoverElRef.current !== null) {
@@ -23120,16 +23197,51 @@ function LinkNodePlugin({
23120
23197
  });
23121
23198
  return true;
23122
23199
  },
23123
- import_lexical3.COMMAND_PRIORITY_EDITOR
23200
+ import_lexical4.COMMAND_PRIORITY_EDITOR
23201
+ ),
23202
+ // Support pasting of links from clipboard
23203
+ editor.registerCommand(
23204
+ import_lexical4.PASTE_COMMAND,
23205
+ (event) => {
23206
+ const selection = (0, import_lexical4.$getSelection)();
23207
+ if (!(0, import_lexical4.$isRangeSelection)(selection) || selection.isCollapsed() || !(0, import_utils7.objectKlassEquals)(event, ClipboardEvent)) {
23208
+ return false;
23209
+ }
23210
+ const clipboardEvent = event;
23211
+ if (clipboardEvent.clipboardData === null) {
23212
+ return false;
23213
+ }
23214
+ const clipboardText = clipboardEvent.clipboardData.getData("text");
23215
+ if (!isValidUrl(clipboardText)) {
23216
+ return false;
23217
+ }
23218
+ if (selection.getNodes().some((node) => (0, import_lexical4.$isElementNode)(node) && !$isLinkNode(node))) {
23219
+ return false;
23220
+ }
23221
+ let path = clipboardText;
23222
+ const type = guessLinkTypeFromPath(path);
23223
+ if (type === "email" && path.startsWith("mailto:")) {
23224
+ path = path.replace("mailto:", "");
23225
+ } else if (type === "tel" && path.startsWith("tel:")) {
23226
+ path = path.replace("tel:", "");
23227
+ }
23228
+ upsertLinkNode({
23229
+ path,
23230
+ type
23231
+ });
23232
+ event.preventDefault();
23233
+ return true;
23234
+ },
23235
+ import_lexical4.COMMAND_PRIORITY_LOW
23124
23236
  )
23125
23237
  );
23126
23238
  }, [editor, onConnectLink]);
23127
- const maybeShowLinkToolbar = (0, import_react147.useCallback)(() => {
23239
+ const maybeShowLinkToolbar = (0, import_react148.useCallback)(() => {
23128
23240
  if (!editor.isEditable()) {
23129
23241
  return;
23130
23242
  }
23131
- const selection = (0, import_lexical3.$getSelection)();
23132
- if (!(0, import_lexical3.$isRangeSelection)(selection)) {
23243
+ const selection = (0, import_lexical4.$getSelection)();
23244
+ if (!(0, import_lexical4.$isRangeSelection)(selection)) {
23133
23245
  setLinkPopoverState(void 0);
23134
23246
  return;
23135
23247
  }
@@ -23158,7 +23270,7 @@ function LinkNodePlugin({
23158
23270
  }
23159
23271
  });
23160
23272
  }, [editor, positioningAnchorEl]);
23161
- (0, import_react147.useEffect)(() => {
23273
+ (0, import_react148.useEffect)(() => {
23162
23274
  return editor.registerUpdateListener(({ editorState }) => {
23163
23275
  requestAnimationFrame(() => {
23164
23276
  editorState.read(() => {
@@ -23243,13 +23355,13 @@ function getLinkAncestor(node) {
23243
23355
  // src/components/ParameterInputs/rich-text/ListIndentPlugin.tsx
23244
23356
  init_emotion_jsx_shim();
23245
23357
  var import_list = require("@lexical/list");
23246
- var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
23247
- var import_utils8 = require("@lexical/utils");
23248
- var import_lexical4 = require("lexical");
23249
- var import_react148 = require("react");
23358
+ var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
23359
+ var import_utils10 = require("@lexical/utils");
23360
+ var import_lexical5 = require("lexical");
23361
+ var import_react149 = require("react");
23250
23362
  function isIndentPermitted(maxDepth) {
23251
- const selection = (0, import_lexical4.$getSelection)();
23252
- if (!(0, import_lexical4.$isRangeSelection)(selection)) {
23363
+ const selection = (0, import_lexical5.$getSelection)();
23364
+ if (!(0, import_lexical5.$isRangeSelection)(selection)) {
23253
23365
  return false;
23254
23366
  }
23255
23367
  const elementNodesInSelection = getElementNodesInSelection(selection);
@@ -23269,12 +23381,12 @@ function isIndentPermitted(maxDepth) {
23269
23381
  }
23270
23382
  function $isAnyOfSelectedNodesAListItemNode(selection) {
23271
23383
  const nodes = selection.getNodes();
23272
- return (0, import_utils8.$filter)(nodes, (node) => (0, import_list.$isListItemNode)(node) ? node : null).length > 0;
23384
+ return (0, import_utils10.$filter)(nodes, (node) => (0, import_list.$isListItemNode)(node) ? node : null).length > 0;
23273
23385
  }
23274
23386
  function $indentOverTab(selection) {
23275
23387
  const nodes = selection.getNodes();
23276
- const canIndentBlockNodes = (0, import_utils8.$filter)(nodes, (node) => {
23277
- if ((0, import_lexical4.$isBlockElementNode)(node) && node.canIndent()) {
23388
+ const canIndentBlockNodes = (0, import_utils10.$filter)(nodes, (node) => {
23389
+ if ((0, import_lexical5.$isBlockElementNode)(node) && node.canIndent()) {
23278
23390
  return node;
23279
23391
  }
23280
23392
  return null;
@@ -23286,13 +23398,13 @@ function $indentOverTab(selection) {
23286
23398
  const focus = selection.focus;
23287
23399
  const first = focus.isBefore(anchor) ? focus : anchor;
23288
23400
  const firstNode = first.getNode();
23289
- const firstBlock = (0, import_utils8.$getNearestBlockElementAncestorOrThrow)(firstNode);
23401
+ const firstBlock = (0, import_utils10.$getNearestBlockElementAncestorOrThrow)(firstNode);
23290
23402
  if (firstBlock.canIndent()) {
23291
23403
  const firstBlockKey = firstBlock.getKey();
23292
- let selectionAtStart = (0, import_lexical4.$createRangeSelection)();
23404
+ let selectionAtStart = (0, import_lexical5.$createRangeSelection)();
23293
23405
  selectionAtStart.anchor.set(firstBlockKey, 0, "element");
23294
23406
  selectionAtStart.focus.set(firstBlockKey, 0, "element");
23295
- selectionAtStart = (0, import_lexical4.$normalizeSelection__EXPERIMENTAL)(selectionAtStart);
23407
+ selectionAtStart = (0, import_lexical5.$normalizeSelection__EXPERIMENTAL)(selectionAtStart);
23296
23408
  if (selectionAtStart.anchor.is(first)) {
23297
23409
  return true;
23298
23410
  }
@@ -23300,1251 +23412,1280 @@ function $indentOverTab(selection) {
23300
23412
  return false;
23301
23413
  }
23302
23414
  function ListIndentPlugin({ maxDepth }) {
23303
- const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
23304
- const isInListItemNode = (0, import_react148.useRef)(false);
23305
- (0, import_react148.useEffect)(() => {
23415
+ const [editor] = (0, import_LexicalComposerContext4.useLexicalComposerContext)();
23416
+ const isInListItemNode = (0, import_react149.useRef)(false);
23417
+ (0, import_react149.useEffect)(() => {
23306
23418
  return editor.registerCommand(
23307
- import_lexical4.SELECTION_CHANGE_COMMAND,
23419
+ import_lexical5.SELECTION_CHANGE_COMMAND,
23308
23420
  () => {
23309
23421
  editor.read(() => {
23310
- const selection = (0, import_lexical4.$getSelection)();
23311
- if (!(0, import_lexical4.$isRangeSelection)(selection) || !selection.isCollapsed()) {
23422
+ const selection = (0, import_lexical5.$getSelection)();
23423
+ if (!(0, import_lexical5.$isRangeSelection)(selection) || !selection.isCollapsed()) {
23312
23424
  isInListItemNode.current = false;
23313
23425
  return false;
23314
23426
  }
23315
- isInListItemNode.current = (0, import_utils8.$getNearestNodeOfType)(selection.anchor.getNode(), import_list.ListNode) !== null;
23427
+ isInListItemNode.current = (0, import_utils10.$getNearestNodeOfType)(selection.anchor.getNode(), import_list.ListNode) !== null;
23316
23428
  });
23317
23429
  return false;
23318
23430
  },
23319
- import_lexical4.COMMAND_PRIORITY_NORMAL
23431
+ import_lexical5.COMMAND_PRIORITY_NORMAL
23320
23432
  );
23321
23433
  }, [editor]);
23322
- (0, import_react148.useEffect)(() => {
23323
- return (0, import_utils8.mergeRegister)(
23434
+ (0, import_react149.useEffect)(() => {
23435
+ return (0, import_utils10.mergeRegister)(
23324
23436
  editor.registerCommand(
23325
- import_lexical4.INDENT_CONTENT_COMMAND,
23437
+ import_lexical5.INDENT_CONTENT_COMMAND,
23326
23438
  () => !isIndentPermitted(maxDepth),
23327
- import_lexical4.COMMAND_PRIORITY_CRITICAL
23439
+ import_lexical5.COMMAND_PRIORITY_CRITICAL
23328
23440
  ),
23329
23441
  editor.registerCommand(
23330
- import_lexical4.KEY_TAB_COMMAND,
23442
+ import_lexical5.KEY_TAB_COMMAND,
23331
23443
  (event) => {
23332
- const selection = (0, import_lexical4.$getSelection)();
23333
- if (!(0, import_lexical4.$isRangeSelection)(selection) || !isInListItemNode.current && !$isAnyOfSelectedNodesAListItemNode(selection)) {
23444
+ const selection = (0, import_lexical5.$getSelection)();
23445
+ if (!(0, import_lexical5.$isRangeSelection)(selection) || !isInListItemNode.current && !$isAnyOfSelectedNodesAListItemNode(selection)) {
23334
23446
  return false;
23335
23447
  }
23336
23448
  event.preventDefault();
23337
23449
  if ($indentOverTab(selection)) {
23338
- const command = event.shiftKey ? import_lexical4.OUTDENT_CONTENT_COMMAND : import_lexical4.INDENT_CONTENT_COMMAND;
23450
+ const command = event.shiftKey ? import_lexical5.OUTDENT_CONTENT_COMMAND : import_lexical5.INDENT_CONTENT_COMMAND;
23339
23451
  return editor.dispatchCommand(command, void 0);
23340
23452
  }
23341
23453
  return false;
23342
23454
  },
23343
- import_lexical4.COMMAND_PRIORITY_CRITICAL
23455
+ import_lexical5.COMMAND_PRIORITY_CRITICAL
23344
23456
  )
23345
23457
  );
23346
23458
  }, [editor, maxDepth]);
23347
23459
  return null;
23348
23460
  }
23349
23461
 
23350
- // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
23462
+ // src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
23351
23463
  init_emotion_jsx_shim();
23352
- var import_react149 = require("@emotion/react");
23353
- var import_code2 = require("@lexical/code");
23354
- var import_list2 = require("@lexical/list");
23355
- var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
23356
- var import_rich_text = require("@lexical/rich-text");
23357
- var import_selection2 = require("@lexical/selection");
23464
+ var import_react150 = require("@emotion/react");
23465
+ var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
23466
+ var import_useLexicalEditable = require("@lexical/react/useLexicalEditable");
23358
23467
  var import_table = require("@lexical/table");
23359
- var import_utils10 = require("@lexical/utils");
23360
- var import_lexical5 = require("lexical");
23361
- var import_react150 = require("react");
23468
+ var import_lexical6 = require("lexical");
23469
+ var import_react151 = require("react");
23362
23470
  var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
23363
- var toolbar = import_react149.css`
23364
- ${scrollbarStyles}
23365
- background: var(--gray-50);
23366
- border-radius: var(--rounded-base);
23367
- display: flex;
23368
- /* We add 1px because we use a 1px wide separator */
23369
- gap: calc(var(--spacing-sm) + 1px);
23370
- margin: 0 0 calc(var(--spacing-sm) + var(--spacing-xs)) 0;
23371
- overflow: auto;
23372
- padding: var(--spacing-sm);
23373
- position: sticky;
23374
- top: calc(var(--spacing-sm) * -2);
23375
- z-index: 10;
23376
- `;
23377
- var toolbarGroup = import_react149.css`
23378
- display: flex;
23379
- flex-shrink: 0;
23380
- gap: var(--spacing-xs);
23381
- position: relative;
23382
-
23383
- &:not(:first-child)::before {
23384
- background-color: var(--gray-300);
23385
- content: '';
23386
- display: block;
23387
- height: 24px;
23388
- left: calc(var(--spacing-xs) * -1);
23389
- position: absolute;
23390
- top: 4px;
23391
- width: 1px;
23392
- }
23393
- `;
23394
- var richTextToolbarButton = import_react149.css`
23395
- align-items: center;
23396
- appearance: none;
23397
- border: 0;
23398
- border-radius: var(--rounded-sm);
23399
- box-shadow: none;
23400
- color: var(--gray-900);
23401
- display: flex;
23402
- flex-shrink: 0;
23403
- height: 32px;
23404
- justify-content: center;
23405
- min-width: 32px;
23406
- padding: 0 var(--spacing-sm);
23407
- `;
23408
- var richTextToolbarButtonActive = import_react149.css`
23409
- background: var(--gray-200);
23410
- `;
23411
- var textStyleButton = import_react149.css`
23412
- justify-content: space-between;
23413
- min-width: 7rem;
23414
- `;
23415
- var toolbarIcon = import_react149.css`
23416
- color: inherit;
23417
- `;
23418
- var toolbarChevron = import_react149.css`
23419
- margin-left: var(--spacing-xs);
23471
+ function computeSelectionCount(selection) {
23472
+ const selectionShape = selection.getShape();
23473
+ return {
23474
+ columns: selectionShape.toX - selectionShape.fromX + 1,
23475
+ rows: selectionShape.toY - selectionShape.fromY + 1
23476
+ };
23477
+ }
23478
+ var tableActionMenuTrigger = import_react150.css`
23479
+ position: absolute;
23480
+ transform: translate(calc(-100% - 1px), 1px);
23420
23481
  `;
23421
- var RichTextToolbarIcon = ({ icon }) => {
23422
- return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
23423
- };
23424
- var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
23425
- ["bold", "format-bold"],
23426
- ["italic", "format-italic"],
23427
- ["underline", "format-underline"],
23428
- ["strikethrough", "format-strike"],
23429
- ["code", "format-code"],
23430
- ["superscript", "format-superscript"],
23431
- ["subscript", "format-subscript"]
23432
- ]);
23433
- var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
23434
- var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
23435
- var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
23436
- const [editor] = (0, import_LexicalComposerContext4.useLexicalComposerContext)();
23437
- const {
23438
- activeElement,
23439
- setActiveElement,
23440
- activeFormats,
23441
- setActiveFormats,
23442
- visibleFormatsWithIcon,
23443
- visibleFormatsWithoutIcon,
23444
- visibleTextualElements,
23445
- isLink,
23446
- setIsLink,
23447
- linkElementVisible,
23448
- visibleLists,
23449
- codeElementVisible,
23450
- quoteElementVisible,
23451
- visibleElementsWithIcons,
23452
- visibleInsertElementsWithIcons,
23453
- tableElementVisible
23454
- } = useRichTextToolbarState({ config });
23455
- const onSelectElement = (type) => {
23456
- if (activeElement === type) {
23457
- return;
23458
- }
23459
- editor.focus(() => {
23460
- editor.update(() => {
23461
- const selection = (0, import_lexical5.$getSelection)();
23462
- if (HEADING_ELEMENTS.includes(type)) {
23463
- (0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createHeadingNode)(type));
23464
- } else if (type === "paragraph") {
23465
- (0, import_selection2.$setBlocksType)(selection, () => (0, import_lexical5.$createParagraphNode)());
23466
- } else if (type === "quote") {
23467
- (0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createQuoteNode)());
23468
- } else if (type === "code") {
23469
- (0, import_selection2.$setBlocksType)(selection, () => (0, import_code2.$createCodeNode)());
23470
- } else if (type === "table" && onInsertTable) {
23471
- onInsertTable().then((dimensions) => {
23472
- if (!dimensions) {
23473
- return;
23474
- }
23475
- const { rows, columns } = dimensions;
23476
- editor.focus(() => {
23477
- editor.update(() => {
23478
- (0, import_lexical5.$insertNodes)([(0, import_table.$createTableNodeWithDimensions)(rows, columns, false)]);
23479
- });
23480
- });
23481
- });
23482
+ var TableActionMenuTrigger = (0, import_react151.forwardRef)((props, ref) => {
23483
+ const { tableCellEl, positioningAnchorEl, ...rest } = props;
23484
+ const [coordinates, setCoordinates] = (0, import_react151.useState)({ x: 0, y: 0 });
23485
+ (0, import_react151.useLayoutEffect)(() => {
23486
+ const rect = tableCellEl.getBoundingClientRect();
23487
+ const parentRect = positioningAnchorEl.getBoundingClientRect();
23488
+ const relativeX = rect.right - parentRect.left + positioningAnchorEl.scrollLeft;
23489
+ const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
23490
+ setCoordinates({ x: relativeX, y: relativeY });
23491
+ }, [tableCellEl, positioningAnchorEl]);
23492
+ return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23493
+ IconButton,
23494
+ {
23495
+ ref,
23496
+ css: [
23497
+ tableActionMenuTrigger,
23498
+ {
23499
+ top: coordinates.y,
23500
+ left: coordinates.x
23482
23501
  }
23483
- });
23484
- });
23485
- };
23486
- const updateToolbar = (0, import_react150.useCallback)(() => {
23487
- const selection = (0, import_lexical5.$getSelection)();
23488
- if (!(0, import_lexical5.$isRangeSelection)(selection)) {
23489
- return;
23490
- }
23491
- const newActiveFormats = [];
23492
- for (const format of richTextBuiltInFormats) {
23493
- if (selection.hasFormat(format.type)) {
23494
- newActiveFormats.push(format.type);
23495
- }
23502
+ ],
23503
+ size: "xs",
23504
+ buttonType: "unimportant",
23505
+ ...rest,
23506
+ children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
23496
23507
  }
23497
- setActiveFormats(newActiveFormats);
23498
- const anchorNode = selection.anchor.getNode();
23499
- let element = anchorNode.getKey() === "root" ? anchorNode : (0, import_utils10.$findMatchingParent)(anchorNode, (e) => {
23500
- const parent = e.getParent();
23501
- return parent !== null && (0, import_lexical5.$isRootOrShadowRoot)(parent);
23502
- });
23503
- if (element === null) {
23504
- element = anchorNode.getTopLevelElementOrThrow();
23505
- }
23506
- const elementKey = element.getKey();
23507
- const elementDOM = editor.getElementByKey(elementKey);
23508
- if (elementDOM !== null) {
23509
- if ((0, import_list2.$isListNode)(element)) {
23510
- const parentList = (0, import_utils10.$getNearestNodeOfType)(anchorNode, import_list2.ListNode);
23511
- const type = parentList ? parentList.getListType() : element.getListType();
23512
- setActiveElement(type === "bullet" ? "unorderedList" : "orderedList");
23513
- } else {
23514
- const type = (0, import_rich_text.$isHeadingNode)(element) ? element.getTag() : element.getType();
23515
- setActiveElement(type);
23516
- }
23517
- }
23518
- const node = getSelectedNode(selection);
23519
- if (getLinkAncestor(node) !== null) {
23520
- setIsLink(true);
23521
- } else {
23522
- setIsLink(false);
23523
- }
23524
- }, [editor, setActiveElement, setActiveFormats, setIsLink]);
23525
- (0, import_react150.useEffect)(() => {
23526
- return editor.registerCommand(
23527
- import_lexical5.SELECTION_CHANGE_COMMAND,
23528
- (_payload) => {
23529
- updateToolbar();
23530
- return false;
23508
+ );
23509
+ });
23510
+ TableActionMenuTrigger.displayName = "TableActionMenuTrigger";
23511
+ function TableActionMenu({
23512
+ tableCellNode: _tableCellNode,
23513
+ menuPortalEl,
23514
+ tableCellEl,
23515
+ positioningAnchorEl
23516
+ }) {
23517
+ const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
23518
+ const [tableCellNode, updateTableCellNode] = (0, import_react151.useState)(_tableCellNode);
23519
+ const [selectionCounts, updateSelectionCounts] = (0, import_react151.useState)({
23520
+ columns: 1,
23521
+ rows: 1
23522
+ });
23523
+ const [menuTriggerKey, setMenuTriggerKey] = (0, import_react151.useState)(0);
23524
+ const incrementMenuTriggerKey = () => {
23525
+ setMenuTriggerKey((key) => key += 1);
23526
+ };
23527
+ (0, import_react151.useEffect)(() => {
23528
+ return editor.registerMutationListener(
23529
+ import_table.TableCellNode,
23530
+ (nodeMutations) => {
23531
+ const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
23532
+ if (nodeUpdated) {
23533
+ editor.getEditorState().read(() => {
23534
+ updateTableCellNode(tableCellNode.getLatest());
23535
+ });
23536
+ }
23531
23537
  },
23532
- import_lexical5.COMMAND_PRIORITY_CRITICAL
23538
+ { skipInitialization: true }
23533
23539
  );
23534
- }, [editor, updateToolbar]);
23535
- (0, import_react150.useEffect)(() => {
23536
- return editor.registerUpdateListener(({ editorState }) => {
23537
- requestAnimationFrame(() => {
23538
- editorState.read(() => {
23539
- updateToolbar();
23540
- });
23540
+ }, [editor, tableCellNode]);
23541
+ (0, import_react151.useEffect)(() => {
23542
+ editor.getEditorState().read(() => {
23543
+ const selection = (0, import_lexical6.$getSelection)();
23544
+ if ((0, import_table.$isTableSelection)(selection)) {
23545
+ updateSelectionCounts(computeSelectionCount(selection));
23546
+ }
23547
+ });
23548
+ }, [editor]);
23549
+ const clearTableSelection = (0, import_react151.useCallback)(() => {
23550
+ editor.update(() => {
23551
+ if (tableCellNode.isAttached()) {
23552
+ const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23553
+ const tableElement2 = editor.getElementByKey(
23554
+ tableNode.getKey()
23555
+ );
23556
+ if (!tableElement2) {
23557
+ throw new Error("Expected to find tableElement in DOM");
23558
+ }
23559
+ const tableSelection = (0, import_table.getTableObserverFromTableElement)(tableElement2);
23560
+ if (tableSelection !== null) {
23561
+ tableSelection.clearHighlight();
23562
+ }
23563
+ tableNode.markDirty();
23564
+ updateTableCellNode(tableCellNode.getLatest());
23565
+ }
23566
+ const rootNode = (0, import_lexical6.$getRoot)();
23567
+ rootNode.selectStart();
23568
+ });
23569
+ }, [editor, tableCellNode]);
23570
+ const insertTableRowAtSelection = (0, import_react151.useCallback)(
23571
+ (shouldInsertAfter) => {
23572
+ editor.update(() => {
23573
+ (0, import_table.$insertTableRow__EXPERIMENTAL)(shouldInsertAfter);
23574
+ });
23575
+ incrementMenuTriggerKey();
23576
+ },
23577
+ [editor]
23578
+ );
23579
+ const insertTableColumnAtSelection = (0, import_react151.useCallback)(
23580
+ (shouldInsertAfter) => {
23581
+ editor.update(() => {
23582
+ for (let i = 0; i < selectionCounts.columns; i++) {
23583
+ (0, import_table.$insertTableColumn__EXPERIMENTAL)(shouldInsertAfter);
23584
+ }
23541
23585
  });
23586
+ incrementMenuTriggerKey();
23587
+ },
23588
+ [editor, selectionCounts.columns]
23589
+ );
23590
+ const deleteTableRowAtSelection = (0, import_react151.useCallback)(() => {
23591
+ editor.update(() => {
23592
+ (0, import_table.$deleteTableRow__EXPERIMENTAL)();
23542
23593
  });
23543
- }, [editor, updateToolbar]);
23544
- return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbar, children: [
23545
- /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
23546
- Menu,
23547
- {
23548
- menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", children: [
23549
- visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
23550
- " ",
23551
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
23552
- ] }),
23553
- placement: "bottom-start",
23554
- children: [
23555
- [
23556
- {
23557
- label: "Normal",
23558
- type: "paragraph"
23559
- },
23560
- ...visibleTextualElements
23561
- ].map((element) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23562
- MenuItem,
23563
- {
23564
- onClick: () => {
23565
- onSelectElement(element.type);
23566
- },
23567
- children: element.label
23568
- },
23569
- element.type
23570
- )),
23571
- visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
23572
- ]
23594
+ incrementMenuTriggerKey();
23595
+ }, [editor]);
23596
+ const deleteTableAtSelection = (0, import_react151.useCallback)(() => {
23597
+ editor.update(() => {
23598
+ const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23599
+ tableNode.remove();
23600
+ clearTableSelection();
23601
+ });
23602
+ }, [editor, tableCellNode, clearTableSelection]);
23603
+ const deleteTableColumnAtSelection = (0, import_react151.useCallback)(() => {
23604
+ editor.update(() => {
23605
+ (0, import_table.$deleteTableColumn__EXPERIMENTAL)();
23606
+ });
23607
+ incrementMenuTriggerKey();
23608
+ }, [editor]);
23609
+ const toggleTableRowIsHeader = (0, import_react151.useCallback)(() => {
23610
+ editor.update(() => {
23611
+ const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23612
+ const tableRowIndex = (0, import_table.$getTableRowIndexFromTableCellNode)(tableCellNode);
23613
+ const tableRows = tableNode.getChildren();
23614
+ if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
23615
+ throw new Error("Expected table cell to be inside of table row.");
23573
23616
  }
23574
- ),
23575
- visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbarGroup, children: [
23576
- visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23577
- "button",
23578
- {
23579
- onClick: () => {
23580
- editor.dispatchCommand(import_lexical5.FORMAT_TEXT_COMMAND, format.type);
23581
- },
23582
- css: [
23583
- richTextToolbarButton,
23584
- activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
23585
- ],
23586
- children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
23617
+ const tableRow2 = tableRows[tableRowIndex];
23618
+ if (!(0, import_table.$isTableRowNode)(tableRow2)) {
23619
+ throw new Error("Expected table row");
23620
+ }
23621
+ tableRow2.getChildren().forEach((tableCell) => {
23622
+ if (!(0, import_table.$isTableCellNode)(tableCell)) {
23623
+ throw new Error("Expected table cell");
23587
23624
  }
23588
- ) }, format.type)),
23589
- visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23590
- Menu,
23591
- {
23592
- menuLabel: "Alternative text styles",
23593
- menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
23594
- placement: "bottom-start",
23595
- children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23596
- MenuItem,
23597
- {
23598
- onClick: () => {
23599
- editor.dispatchCommand(import_lexical5.FORMAT_TEXT_COMMAND, format.type);
23600
- },
23601
- children: format.label
23602
- },
23603
- format.type
23604
- ))
23625
+ tableCell.toggleHeaderStyle(import_table.TableCellHeaderStates.ROW);
23626
+ });
23627
+ clearTableSelection();
23628
+ });
23629
+ }, [editor, tableCellNode, clearTableSelection]);
23630
+ const toggleTableColumnIsHeader = (0, import_react151.useCallback)(() => {
23631
+ editor.update(() => {
23632
+ const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23633
+ const tableColumnIndex = (0, import_table.$getTableColumnIndexFromTableCellNode)(tableCellNode);
23634
+ const tableRows = tableNode.getChildren();
23635
+ const maxRowsLength = Math.max(...tableRows.map((row) => row.getChildren().length));
23636
+ if (tableColumnIndex >= maxRowsLength || tableColumnIndex < 0) {
23637
+ throw new Error("Expected table cell to be inside of table row.");
23638
+ }
23639
+ for (let r = 0; r < tableRows.length; r++) {
23640
+ const tableRow2 = tableRows[r];
23641
+ if (!(0, import_table.$isTableRowNode)(tableRow2)) {
23642
+ throw new Error("Expected table row");
23605
23643
  }
23606
- ) : null
23607
- ] }) : null,
23608
- visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbarGroup, children: [
23609
- linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23610
- "button",
23611
- {
23612
- onClick: () => {
23613
- isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
23614
- },
23615
- css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
23616
- children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "link" })
23644
+ const tableCells = tableRow2.getChildren();
23645
+ if (tableColumnIndex >= tableCells.length) {
23646
+ continue;
23617
23647
  }
23618
- ) }) : null,
23619
- visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
23620
- visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23621
- "button",
23622
- {
23623
- onClick: () => {
23624
- activeElement === "unorderedList" ? editor.dispatchCommand(import_list2.REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(import_list2.INSERT_UNORDERED_LIST_COMMAND, void 0);
23625
- },
23626
- css: [
23627
- richTextToolbarButton,
23628
- activeElement === "unorderedList" ? richTextToolbarButtonActive : null
23629
- ],
23630
- children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
23631
- }
23632
- ) }) : null,
23633
- visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23634
- "button",
23648
+ const tableCell = tableCells[tableColumnIndex];
23649
+ if (!(0, import_table.$isTableCellNode)(tableCell)) {
23650
+ throw new Error("Expected table cell");
23651
+ }
23652
+ tableCell.toggleHeaderStyle(import_table.TableCellHeaderStates.COLUMN);
23653
+ }
23654
+ clearTableSelection();
23655
+ });
23656
+ }, [editor, tableCellNode, clearTableSelection]);
23657
+ const menuItemCss = (0, import_react150.css)({
23658
+ fontSize: "var(--fs-sm)"
23659
+ });
23660
+ return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
23661
+ Menu,
23662
+ {
23663
+ menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23664
+ TableActionMenuTrigger,
23665
+ {
23666
+ tableCellEl,
23667
+ positioningAnchorEl
23668
+ },
23669
+ menuTriggerKey
23670
+ ),
23671
+ portalElement: menuPortalEl,
23672
+ maxMenuHeight: "300px",
23673
+ children: [
23674
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
23675
+ MenuItem,
23635
23676
  {
23636
23677
  onClick: () => {
23637
- activeElement === "orderedList" ? editor.dispatchCommand(import_list2.REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(import_list2.INSERT_ORDERED_LIST_COMMAND, void 0);
23678
+ insertTableRowAtSelection(false);
23638
23679
  },
23639
- css: [
23640
- richTextToolbarButton,
23641
- activeElement === "orderedList" ? richTextToolbarButtonActive : null
23642
- ],
23643
- children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
23680
+ css: menuItemCss,
23681
+ children: [
23682
+ "Insert ",
23683
+ selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
23684
+ " above"
23685
+ ]
23644
23686
  }
23645
- ) }) : null
23646
- ] }) : null,
23647
- customControls ? customControls : null
23648
- ] }) : null,
23649
- visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { css: toolbarGroup, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
23650
- Menu,
23651
- {
23652
- menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("button", { css: richTextToolbarButton, title: "Insert block element", children: [
23653
- "Insert",
23654
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
23687
+ ),
23688
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
23689
+ "Insert ",
23690
+ selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
23691
+ " below"
23655
23692
  ] }),
23656
- placement: "bottom-start",
23657
- children: [
23658
- quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23659
- MenuItem,
23660
- {
23661
- onClick: () => {
23662
- onSelectElement("quote");
23663
- },
23664
- icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "quote", iconColor: "currentColor" }),
23665
- children: "Quote"
23666
- }
23667
- ) : null,
23668
- codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23669
- MenuItem,
23670
- {
23671
- onClick: () => {
23672
- onSelectElement("code");
23673
- },
23674
- icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "code-slash", iconColor: "currentColor" }),
23675
- children: "Code"
23676
- }
23677
- ) : null,
23678
- tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23679
- MenuItem,
23680
- {
23681
- onClick: () => {
23682
- onSelectElement("table");
23683
- },
23684
- icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "view-grid", iconColor: "currentColor" }),
23685
- children: "Table"
23686
- }
23687
- ) : null
23688
- ]
23689
- }
23690
- ) }) : null
23691
- ] });
23692
- };
23693
- var RichTextToolbar_default = RichTextToolbar;
23694
- var useRichTextToolbarState = ({ config }) => {
23695
- var _a;
23696
- const enabledBuiltInFormats = (0, import_react150.useMemo)(() => {
23697
- return richTextBuiltInFormats.filter((format) => {
23698
- var _a2, _b;
23699
- return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
23700
- });
23701
- }, [config]);
23702
- const enabledBuiltInElements = (0, import_react150.useMemo)(() => {
23703
- return richTextBuiltInElements.filter((element) => {
23704
- var _a2, _b;
23705
- return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
23706
- });
23707
- }, [config]);
23708
- const enabledBuiltInFormatsWithIcon = (0, import_react150.useMemo)(() => {
23709
- return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
23710
- }, [enabledBuiltInFormats]);
23711
- const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
23712
- (format) => !FORMATS_WITH_ICON.has(format.type)
23713
- );
23714
- const [activeFormats, setActiveFormats] = (0, import_react150.useState)([]);
23715
- const visibleFormatsWithIcon = (0, import_react150.useMemo)(() => {
23716
- const visibleFormats = /* @__PURE__ */ new Set();
23717
- activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
23718
- visibleFormats.add(type);
23719
- });
23720
- enabledBuiltInFormatsWithIcon.forEach((format) => {
23721
- visibleFormats.add(format.type);
23722
- });
23723
- return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
23724
- }, [activeFormats, enabledBuiltInFormatsWithIcon]);
23725
- const visibleFormatsWithoutIcon = (0, import_react150.useMemo)(() => {
23726
- const visibleFormats = /* @__PURE__ */ new Set();
23727
- activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
23728
- visibleFormats.add(type);
23729
- });
23730
- enabledBuiltInFormatsWithoutIcon.forEach((format) => {
23731
- visibleFormats.add(format.type);
23732
- });
23733
- return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
23734
- }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
23735
- const [activeElement, setActiveElement] = (0, import_react150.useState)("paragraph");
23736
- const enabledTextualElements = enabledBuiltInElements.filter(
23737
- (element) => TEXTUAL_ELEMENTS.includes(element.type)
23693
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(MenuItemSeparator, {}),
23694
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
23695
+ "Insert ",
23696
+ selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
23697
+ " left"
23698
+ ] }),
23699
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
23700
+ "Insert ",
23701
+ selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
23702
+ " right"
23703
+ ] }),
23704
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(MenuItemSeparator, {}),
23705
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
23706
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
23707
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
23708
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(MenuItemSeparator, {}),
23709
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
23710
+ (tableCellNode.__headerState & import_table.TableCellHeaderStates.ROW) === import_table.TableCellHeaderStates.ROW ? "Remove" : "Add",
23711
+ " ",
23712
+ "row header"
23713
+ ] }),
23714
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
23715
+ (tableCellNode.__headerState & import_table.TableCellHeaderStates.COLUMN) === import_table.TableCellHeaderStates.COLUMN ? "Remove" : "Add",
23716
+ " ",
23717
+ "column header"
23718
+ ] })
23719
+ ]
23720
+ }
23738
23721
  );
23739
- const visibleTextualElements = (0, import_react150.useMemo)(() => {
23740
- if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
23741
- return enabledTextualElements;
23722
+ }
23723
+ function TableCellActionMenuContainer({
23724
+ menuPortalEl,
23725
+ positioningAnchorEl
23726
+ }) {
23727
+ const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
23728
+ const [tableCellNode, setTableMenuCellNode] = (0, import_react151.useState)(null);
23729
+ const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0, import_react151.useState)(null);
23730
+ const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0, import_react151.useState)(null);
23731
+ (0, import_react151.useEffect)(() => {
23732
+ const newPortalEl = document.createElement("div");
23733
+ setTableMenuCellMenuPortalEl(newPortalEl);
23734
+ menuPortalEl.appendChild(newPortalEl);
23735
+ return () => {
23736
+ newPortalEl.remove();
23737
+ };
23738
+ }, [menuPortalEl]);
23739
+ const setTableMenuCellNodeElem = (0, import_react151.useCallback)((elem) => {
23740
+ if (elem) {
23741
+ _setTableMenuCellNodeEl(elem);
23742
+ } else {
23743
+ _setTableMenuCellNodeEl(null);
23742
23744
  }
23743
- return richTextBuiltInElements.filter(
23744
- (element) => {
23745
- var _a2, _b;
23746
- 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);
23745
+ }, []);
23746
+ const $moveMenu = (0, import_react151.useCallback)(() => {
23747
+ const selection = (0, import_lexical6.$getSelection)();
23748
+ const nativeSelection = window.getSelection();
23749
+ const activeElement = document.activeElement;
23750
+ if (selection == null) {
23751
+ setTableMenuCellNode(null);
23752
+ return;
23753
+ }
23754
+ const rootElement = editor.getRootElement();
23755
+ if ((0, import_lexical6.$isRangeSelection)(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
23756
+ const tableCellNodeFromSelection = (0, import_table.$getTableCellNodeFromLexicalNode)(selection.anchor.getNode());
23757
+ if (tableCellNodeFromSelection == null) {
23758
+ setTableMenuCellNode(null);
23759
+ setTableMenuCellNodeElem(null);
23760
+ return;
23747
23761
  }
23748
- );
23749
- }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
23750
- const [isLink, setIsLink] = (0, import_react150.useState)(false);
23751
- const linkElementVisible = (0, import_react150.useMemo)(() => {
23752
- return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
23753
- }, [isLink, enabledBuiltInElements]);
23754
- const visibleLists = (0, import_react150.useMemo)(() => {
23755
- return new Set(
23756
- ["orderedList", "unorderedList"].filter(
23757
- (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
23758
- )
23759
- );
23760
- }, [activeElement, enabledBuiltInElements]);
23761
- const quoteElementVisible = (0, import_react150.useMemo)(() => {
23762
- return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
23763
- }, [activeElement, enabledBuiltInElements]);
23764
- const codeElementVisible = (0, import_react150.useMemo)(() => {
23765
- return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
23766
- }, [activeElement, enabledBuiltInElements]);
23767
- const tableElementVisible = (0, import_react150.useMemo)(() => {
23768
- return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
23769
- }, [activeElement, enabledBuiltInElements]);
23770
- const visibleElementsWithIcons = (0, import_react150.useMemo)(() => {
23771
- const visibleElements = /* @__PURE__ */ new Set();
23772
- if (linkElementVisible) {
23773
- visibleElements.add("link");
23762
+ const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
23763
+ if (tableCellParentNodeDOM == null) {
23764
+ setTableMenuCellNode(null);
23765
+ setTableMenuCellNodeElem(null);
23766
+ return;
23767
+ }
23768
+ setTableMenuCellNode(tableCellNodeFromSelection);
23769
+ setTableMenuCellNodeElem(tableCellParentNodeDOM);
23770
+ } else if (!activeElement) {
23771
+ setTableMenuCellNode(null);
23772
+ setTableMenuCellNodeElem(null);
23774
23773
  }
23775
- if (visibleLists.size > 0) {
23776
- visibleLists.forEach((type) => {
23777
- visibleElements.add(type);
23774
+ }, [editor, setTableMenuCellNodeElem]);
23775
+ (0, import_react151.useEffect)(() => {
23776
+ return editor.registerUpdateListener(() => {
23777
+ editor.getEditorState().read(() => {
23778
+ $moveMenu();
23778
23779
  });
23779
- }
23780
- return visibleElements;
23781
- }, [linkElementVisible, visibleLists]);
23782
- const visibleInsertElementsWithIcons = (0, import_react150.useMemo)(() => {
23783
- const visibleElements = /* @__PURE__ */ new Set();
23784
- if (quoteElementVisible) {
23785
- visibleElements.add("quote");
23786
- }
23787
- if (codeElementVisible) {
23788
- visibleElements.add("code");
23789
- }
23790
- if (tableElementVisible) {
23791
- visibleElements.add("table");
23792
- }
23793
- return visibleElements;
23794
- }, [codeElementVisible, quoteElementVisible, tableElementVisible]);
23795
- return {
23796
- activeFormats,
23797
- setActiveFormats,
23798
- activeElement,
23799
- setActiveElement,
23800
- visibleFormatsWithIcon,
23801
- visibleFormatsWithoutIcon,
23802
- visibleTextualElements,
23803
- isLink,
23804
- setIsLink,
23805
- linkElementVisible,
23806
- visibleLists,
23807
- quoteElementVisible,
23808
- codeElementVisible,
23809
- tableElementVisible,
23810
- visibleElementsWithIcons,
23811
- visibleInsertElementsWithIcons
23812
- };
23813
- };
23780
+ });
23781
+ });
23782
+ return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23783
+ TableActionMenu,
23784
+ {
23785
+ tableCellNode,
23786
+ menuPortalEl: tableCellMenuPortalEl,
23787
+ tableCellEl: tableCellNodeEl,
23788
+ positioningAnchorEl
23789
+ },
23790
+ tableCellNode.getKey()
23791
+ );
23792
+ }
23793
+ function TableActionMenuPlugin({
23794
+ positioningAnchorEl,
23795
+ menuPortalEl
23796
+ }) {
23797
+ const isEditable = (0, import_useLexicalEditable.useLexicalEditable)();
23798
+ return isEditable ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
23799
+ }
23814
23800
 
23815
- // src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
23801
+ // src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
23816
23802
  init_emotion_jsx_shim();
23817
- var import_react151 = require("@emotion/react");
23818
- var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
23819
- var import_useLexicalEditable = require("@lexical/react/useLexicalEditable");
23803
+ var import_react152 = require("@emotion/react");
23804
+ var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
23805
+ var import_useLexicalEditable2 = require("@lexical/react/useLexicalEditable");
23820
23806
  var import_table2 = require("@lexical/table");
23821
- var import_lexical6 = require("lexical");
23822
- var import_react152 = require("react");
23807
+ var import_utils12 = require("@lexical/utils");
23808
+ var import_lexical7 = require("lexical");
23809
+ var import_react153 = require("react");
23810
+ var import_react_dom3 = require("react-dom");
23823
23811
  var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
23824
- function computeSelectionCount(selection) {
23825
- const selectionShape = selection.getShape();
23826
- return {
23827
- columns: selectionShape.toX - selectionShape.fromX + 1,
23828
- rows: selectionShape.toY - selectionShape.fromY + 1
23829
- };
23830
- }
23831
- var tableActionMenuTrigger = import_react151.css`
23812
+ var MIN_ROW_HEIGHT = 33;
23813
+ var MIN_COLUMN_WIDTH = 50;
23814
+ var tableResizer = import_react152.css`
23832
23815
  position: absolute;
23833
- transform: translate(calc(-100% - 1px), 1px);
23816
+ z-index: var(--z-10);
23834
23817
  `;
23835
- var TableActionMenuTrigger = (0, import_react152.forwardRef)((props, ref) => {
23836
- const { tableCellEl, positioningAnchorEl, ...rest } = props;
23837
- const [coordinates, setCoordinates] = (0, import_react152.useState)({ x: 0, y: 0 });
23838
- (0, import_react152.useLayoutEffect)(() => {
23839
- const rect = tableCellEl.getBoundingClientRect();
23840
- const parentRect = positioningAnchorEl.getBoundingClientRect();
23841
- const relativeX = rect.right - parentRect.left + positioningAnchorEl.scrollLeft;
23842
- const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
23843
- setCoordinates({ x: relativeX, y: relativeY });
23844
- }, [tableCellEl, positioningAnchorEl]);
23845
- return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
23846
- IconButton,
23847
- {
23848
- ref,
23849
- css: [
23850
- tableActionMenuTrigger,
23851
- {
23852
- top: coordinates.y,
23853
- left: coordinates.x
23854
- }
23855
- ],
23856
- size: "xs",
23857
- buttonType: "unimportant",
23858
- ...rest,
23859
- children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
23818
+ var fixedGetDOMCellFromTarget = (node) => {
23819
+ let currentNode = node;
23820
+ while (currentNode != null) {
23821
+ const nodeName = currentNode.nodeName;
23822
+ if (nodeName === "TD" || nodeName === "TH") {
23823
+ const cell2 = currentNode._cell;
23824
+ if (cell2 === void 0) {
23825
+ return {
23826
+ elem: currentNode
23827
+ };
23828
+ }
23829
+ return cell2;
23860
23830
  }
23861
- );
23862
- });
23863
- TableActionMenuTrigger.displayName = "TableActionMenuTrigger";
23864
- function TableActionMenu({
23865
- tableCellNode: _tableCellNode,
23866
- menuPortalEl,
23867
- tableCellEl,
23868
- positioningAnchorEl
23869
- }) {
23870
- const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
23871
- const [tableCellNode, updateTableCellNode] = (0, import_react152.useState)(_tableCellNode);
23872
- const [selectionCounts, updateSelectionCounts] = (0, import_react152.useState)({
23873
- columns: 1,
23874
- rows: 1
23875
- });
23876
- const [menuTriggerKey, setMenuTriggerKey] = (0, import_react152.useState)(0);
23877
- const incrementMenuTriggerKey = () => {
23878
- setMenuTriggerKey((key) => key += 1);
23831
+ currentNode = currentNode.parentNode;
23832
+ }
23833
+ return null;
23834
+ };
23835
+ function TableCellResizer({ editor, positioningAnchorEl }) {
23836
+ const targetRef = (0, import_react153.useRef)(null);
23837
+ const resizerRef = (0, import_react153.useRef)(null);
23838
+ const tableRectRef = (0, import_react153.useRef)(null);
23839
+ const mouseStartPosRef = (0, import_react153.useRef)(null);
23840
+ const [mouseCurrentPos, updateMouseCurrentPos] = (0, import_react153.useState)(null);
23841
+ const [activeCell, updateActiveCell] = (0, import_react153.useState)(null);
23842
+ const [isMouseDown, updateIsMouseDown] = (0, import_react153.useState)(false);
23843
+ const [draggingDirection, updateDraggingDirection] = (0, import_react153.useState)(null);
23844
+ const resetState = (0, import_react153.useCallback)(() => {
23845
+ updateActiveCell(null);
23846
+ targetRef.current = null;
23847
+ updateDraggingDirection(null);
23848
+ mouseStartPosRef.current = null;
23849
+ tableRectRef.current = null;
23850
+ }, []);
23851
+ const isMouseDownOnEvent = (event) => {
23852
+ return (event.buttons & 1) === 1;
23879
23853
  };
23880
- (0, import_react152.useEffect)(() => {
23881
- return editor.registerMutationListener(
23882
- import_table2.TableCellNode,
23883
- (nodeMutations) => {
23884
- const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
23885
- if (nodeUpdated) {
23886
- editor.getEditorState().read(() => {
23887
- updateTableCellNode(tableCellNode.getLatest());
23854
+ (0, import_react153.useEffect)(() => {
23855
+ const onMouseMove = (event) => {
23856
+ setTimeout(() => {
23857
+ const target = event.target;
23858
+ if (draggingDirection) {
23859
+ updateMouseCurrentPos({
23860
+ x: event.clientX,
23861
+ y: event.clientY
23888
23862
  });
23863
+ return;
23889
23864
  }
23890
- },
23891
- { skipInitialization: true }
23892
- );
23893
- }, [editor, tableCellNode]);
23894
- (0, import_react152.useEffect)(() => {
23895
- editor.getEditorState().read(() => {
23896
- const selection = (0, import_lexical6.$getSelection)();
23897
- if ((0, import_table2.$isTableSelection)(selection)) {
23898
- updateSelectionCounts(computeSelectionCount(selection));
23899
- }
23900
- });
23901
- }, [editor]);
23902
- const clearTableSelection = (0, import_react152.useCallback)(() => {
23903
- editor.update(() => {
23904
- if (tableCellNode.isAttached()) {
23905
- const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23906
- const tableElement2 = editor.getElementByKey(
23907
- tableNode.getKey()
23908
- );
23909
- if (!tableElement2) {
23910
- throw new Error("Expected to find tableElement in DOM");
23865
+ updateIsMouseDown(isMouseDownOnEvent(event));
23866
+ if (resizerRef.current && resizerRef.current.contains(target)) {
23867
+ return;
23911
23868
  }
23912
- const tableSelection = (0, import_table2.getTableObserverFromTableElement)(tableElement2);
23913
- if (tableSelection !== null) {
23914
- tableSelection.clearHighlight();
23869
+ if (targetRef.current !== target) {
23870
+ targetRef.current = target;
23871
+ const cell2 = fixedGetDOMCellFromTarget(target);
23872
+ if (cell2 && activeCell !== cell2) {
23873
+ editor.update(() => {
23874
+ const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(cell2.elem);
23875
+ if (!tableCellNode) {
23876
+ throw new Error("TableCellResizer: Table cell node not found.");
23877
+ }
23878
+ const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23879
+ const tableElement2 = editor.getElementByKey(tableNode.getKey());
23880
+ if (!tableElement2) {
23881
+ throw new Error("TableCellResizer: Table element not found.");
23882
+ }
23883
+ targetRef.current = target;
23884
+ tableRectRef.current = tableElement2.getBoundingClientRect();
23885
+ updateActiveCell(cell2);
23886
+ });
23887
+ } else if (cell2 == null) {
23888
+ resetState();
23889
+ }
23915
23890
  }
23916
- tableNode.markDirty();
23917
- updateTableCellNode(tableCellNode.getLatest());
23918
- }
23919
- const rootNode = (0, import_lexical6.$getRoot)();
23920
- rootNode.selectStart();
23891
+ }, 0);
23892
+ };
23893
+ const onMouseDown = () => {
23894
+ setTimeout(() => {
23895
+ updateIsMouseDown(true);
23896
+ }, 0);
23897
+ };
23898
+ const onMouseUp = () => {
23899
+ setTimeout(() => {
23900
+ updateIsMouseDown(false);
23901
+ }, 0);
23902
+ };
23903
+ const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
23904
+ rootElement == null ? void 0 : rootElement.addEventListener("mousemove", onMouseMove);
23905
+ rootElement == null ? void 0 : rootElement.addEventListener("mousedown", onMouseDown);
23906
+ rootElement == null ? void 0 : rootElement.addEventListener("mouseup", onMouseUp);
23907
+ prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousemove", onMouseMove);
23908
+ prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousedown", onMouseDown);
23909
+ prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mouseup", onMouseUp);
23921
23910
  });
23922
- }, [editor, tableCellNode]);
23923
- const insertTableRowAtSelection = (0, import_react152.useCallback)(
23924
- (shouldInsertAfter) => {
23925
- editor.update(() => {
23926
- (0, import_table2.$insertTableRow__EXPERIMENTAL)(shouldInsertAfter);
23927
- });
23928
- incrementMenuTriggerKey();
23911
+ return () => {
23912
+ removeRootListener();
23913
+ };
23914
+ }, [activeCell, draggingDirection, editor, resetState]);
23915
+ const isHeightChanging = (direction) => {
23916
+ if (direction === "bottom") {
23917
+ return true;
23918
+ }
23919
+ return false;
23920
+ };
23921
+ const updateRowHeight = (0, import_react153.useCallback)(
23922
+ (heightChange) => {
23923
+ if (!activeCell) {
23924
+ throw new Error("TableCellResizer: Expected active cell.");
23925
+ }
23926
+ editor.update(
23927
+ () => {
23928
+ const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(activeCell.elem);
23929
+ if (!(0, import_table2.$isTableCellNode)(tableCellNode)) {
23930
+ throw new Error("TableCellResizer: Table cell node not found.");
23931
+ }
23932
+ const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23933
+ const tableRowIndex = (0, import_table2.$getTableRowIndexFromTableCellNode)(tableCellNode);
23934
+ const tableRows = tableNode.getChildren();
23935
+ if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
23936
+ throw new Error("Expected table cell to be inside of table row.");
23937
+ }
23938
+ const tableRow2 = tableRows[tableRowIndex];
23939
+ if (!(0, import_table2.$isTableRowNode)(tableRow2)) {
23940
+ throw new Error("Expected table row");
23941
+ }
23942
+ let height = tableRow2.getHeight();
23943
+ if (height === void 0) {
23944
+ const rowCells = tableRow2.getChildren();
23945
+ height = Math.min(...rowCells.map((cell2) => {
23946
+ var _a;
23947
+ return (_a = getCellNodeHeight(cell2, editor)) != null ? _a : Infinity;
23948
+ }));
23949
+ }
23950
+ const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
23951
+ tableRow2.setHeight(newHeight);
23952
+ },
23953
+ { tag: "skip-scroll-into-view" }
23954
+ );
23929
23955
  },
23930
- [editor]
23956
+ [activeCell, editor]
23931
23957
  );
23932
- const insertTableColumnAtSelection = (0, import_react152.useCallback)(
23933
- (shouldInsertAfter) => {
23934
- editor.update(() => {
23935
- for (let i = 0; i < selectionCounts.columns; i++) {
23936
- (0, import_table2.$insertTableColumn__EXPERIMENTAL)(shouldInsertAfter);
23958
+ const getCellNodeWidth = (cell2, activeEditor) => {
23959
+ const width = cell2.getWidth();
23960
+ if (width !== void 0) {
23961
+ return width;
23962
+ }
23963
+ const domCellNode = activeEditor.getElementByKey(cell2.getKey());
23964
+ if (domCellNode == null) {
23965
+ return void 0;
23966
+ }
23967
+ const computedStyle = getComputedStyle(domCellNode);
23968
+ return domCellNode.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
23969
+ };
23970
+ const getCellNodeHeight = (cell2, activeEditor) => {
23971
+ const domCellNode = activeEditor.getElementByKey(cell2.getKey());
23972
+ return domCellNode == null ? void 0 : domCellNode.clientHeight;
23973
+ };
23974
+ const getCellColumnIndex = (tableCellNode, tableMap) => {
23975
+ for (let row = 0; row < tableMap.length; row++) {
23976
+ for (let column = 0; column < tableMap[row].length; column++) {
23977
+ if (tableMap[row][column].cell === tableCellNode) {
23978
+ return column;
23937
23979
  }
23938
- });
23939
- incrementMenuTriggerKey();
23940
- },
23941
- [editor, selectionCounts.columns]
23942
- );
23943
- const deleteTableRowAtSelection = (0, import_react152.useCallback)(() => {
23944
- editor.update(() => {
23945
- (0, import_table2.$deleteTableRow__EXPERIMENTAL)();
23946
- });
23947
- incrementMenuTriggerKey();
23948
- }, [editor]);
23949
- const deleteTableAtSelection = (0, import_react152.useCallback)(() => {
23950
- editor.update(() => {
23951
- const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23952
- tableNode.remove();
23953
- clearTableSelection();
23954
- });
23955
- }, [editor, tableCellNode, clearTableSelection]);
23956
- const deleteTableColumnAtSelection = (0, import_react152.useCallback)(() => {
23957
- editor.update(() => {
23958
- (0, import_table2.$deleteTableColumn__EXPERIMENTAL)();
23959
- });
23960
- incrementMenuTriggerKey();
23961
- }, [editor]);
23962
- const toggleTableRowIsHeader = (0, import_react152.useCallback)(() => {
23963
- editor.update(() => {
23964
- const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23965
- const tableRowIndex = (0, import_table2.$getTableRowIndexFromTableCellNode)(tableCellNode);
23966
- const tableRows = tableNode.getChildren();
23967
- if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
23968
- throw new Error("Expected table cell to be inside of table row.");
23969
23980
  }
23970
- const tableRow2 = tableRows[tableRowIndex];
23971
- if (!(0, import_table2.$isTableRowNode)(tableRow2)) {
23972
- throw new Error("Expected table row");
23973
- }
23974
- tableRow2.getChildren().forEach((tableCell) => {
23975
- if (!(0, import_table2.$isTableCellNode)(tableCell)) {
23976
- throw new Error("Expected table cell");
23977
- }
23978
- tableCell.toggleHeaderStyle(import_table2.TableCellHeaderStates.ROW);
23979
- });
23980
- clearTableSelection();
23981
- });
23982
- }, [editor, tableCellNode, clearTableSelection]);
23983
- const toggleTableColumnIsHeader = (0, import_react152.useCallback)(() => {
23984
- editor.update(() => {
23985
- const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23986
- const tableColumnIndex = (0, import_table2.$getTableColumnIndexFromTableCellNode)(tableCellNode);
23987
- const tableRows = tableNode.getChildren();
23988
- const maxRowsLength = Math.max(...tableRows.map((row) => row.getChildren().length));
23989
- if (tableColumnIndex >= maxRowsLength || tableColumnIndex < 0) {
23990
- throw new Error("Expected table cell to be inside of table row.");
23981
+ }
23982
+ };
23983
+ const updateColumnWidth = (0, import_react153.useCallback)(
23984
+ (widthChange) => {
23985
+ if (!activeCell) {
23986
+ throw new Error("TableCellResizer: Expected active cell.");
23991
23987
  }
23992
- for (let r = 0; r < tableRows.length; r++) {
23993
- const tableRow2 = tableRows[r];
23994
- if (!(0, import_table2.$isTableRowNode)(tableRow2)) {
23995
- throw new Error("Expected table row");
23988
+ editor.update(
23989
+ () => {
23990
+ const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(activeCell.elem);
23991
+ if (!(0, import_table2.$isTableCellNode)(tableCellNode)) {
23992
+ throw new Error("TableCellResizer: Table cell node not found.");
23993
+ }
23994
+ const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23995
+ const [tableMap] = (0, import_table2.$computeTableMapSkipCellCheck)(tableNode, null, null);
23996
+ const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
23997
+ if (columnIndex === void 0) {
23998
+ throw new Error("TableCellResizer: Table column not found.");
23999
+ }
24000
+ for (let row = 0; row < tableMap.length; row++) {
24001
+ const cell2 = tableMap[row][columnIndex];
24002
+ if (cell2.startRow === row && (columnIndex === tableMap[row].length - 1 || tableMap[row][columnIndex].cell !== tableMap[row][columnIndex + 1].cell)) {
24003
+ const width = getCellNodeWidth(cell2.cell, editor);
24004
+ if (width === void 0) {
24005
+ continue;
24006
+ }
24007
+ const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
24008
+ cell2.cell.setWidth(newWidth);
24009
+ }
24010
+ }
24011
+ },
24012
+ { tag: "skip-scroll-into-view" }
24013
+ );
24014
+ },
24015
+ [activeCell, editor]
24016
+ );
24017
+ const mouseUpHandler = (0, import_react153.useCallback)(
24018
+ (direction) => {
24019
+ const handler = (event) => {
24020
+ event.preventDefault();
24021
+ event.stopPropagation();
24022
+ if (!activeCell) {
24023
+ throw new Error("TableCellResizer: Expected active cell.");
23996
24024
  }
23997
- const tableCells = tableRow2.getChildren();
23998
- if (tableColumnIndex >= tableCells.length) {
23999
- continue;
24000
- }
24001
- const tableCell = tableCells[tableColumnIndex];
24002
- if (!(0, import_table2.$isTableCellNode)(tableCell)) {
24003
- throw new Error("Expected table cell");
24025
+ if (mouseStartPosRef.current) {
24026
+ const { x, y } = mouseStartPosRef.current;
24027
+ if (activeCell === null) {
24028
+ return;
24029
+ }
24030
+ const zoom = (0, import_utils12.calculateZoomLevel)(event.target);
24031
+ if (isHeightChanging(direction)) {
24032
+ const heightChange = (event.clientY - y) / zoom;
24033
+ updateRowHeight(heightChange);
24034
+ } else {
24035
+ const widthChange = (event.clientX - x) / zoom;
24036
+ updateColumnWidth(widthChange);
24037
+ }
24038
+ resetState();
24039
+ document.removeEventListener("mouseup", handler);
24004
24040
  }
24005
- tableCell.toggleHeaderStyle(import_table2.TableCellHeaderStates.COLUMN);
24041
+ };
24042
+ return handler;
24043
+ },
24044
+ [activeCell, resetState, updateColumnWidth, updateRowHeight]
24045
+ );
24046
+ const toggleResize = (0, import_react153.useCallback)(
24047
+ (direction) => (event) => {
24048
+ event.preventDefault();
24049
+ event.stopPropagation();
24050
+ if (!activeCell) {
24051
+ throw new Error("TableCellResizer: Expected active cell.");
24006
24052
  }
24007
- clearTableSelection();
24008
- });
24009
- }, [editor, tableCellNode, clearTableSelection]);
24010
- const menuItemCss = (0, import_react151.css)({
24011
- fontSize: "var(--fs-sm)"
24012
- });
24013
- return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
24014
- Menu,
24015
- {
24016
- menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
24017
- TableActionMenuTrigger,
24018
- {
24019
- tableCellEl,
24020
- positioningAnchorEl
24053
+ mouseStartPosRef.current = {
24054
+ x: event.clientX,
24055
+ y: event.clientY
24056
+ };
24057
+ updateMouseCurrentPos(mouseStartPosRef.current);
24058
+ updateDraggingDirection(direction);
24059
+ document.addEventListener("mouseup", mouseUpHandler(direction));
24060
+ },
24061
+ [activeCell, mouseUpHandler]
24062
+ );
24063
+ const getResizers = (0, import_react153.useCallback)(() => {
24064
+ if (activeCell) {
24065
+ const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
24066
+ const parentRect = positioningAnchorEl.getBoundingClientRect();
24067
+ const zoom = (0, import_utils12.calculateZoomLevel)(activeCell.elem);
24068
+ const zoneWidth = 10;
24069
+ const styles = {
24070
+ bottom: {
24071
+ backgroundColor: "none",
24072
+ cursor: "row-resize",
24073
+ height: `${zoneWidth}px`,
24074
+ left: `${left - parentRect.left}px`,
24075
+ top: `${top - parentRect.top + positioningAnchorEl.scrollTop + height - zoneWidth / 2}px`,
24076
+ width: `${width}px`
24021
24077
  },
24022
- menuTriggerKey
24023
- ),
24024
- portalElement: menuPortalEl,
24025
- maxMenuHeight: "300px",
24026
- children: [
24027
- /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
24028
- MenuItem,
24029
- {
24030
- onClick: () => {
24031
- insertTableRowAtSelection(false);
24032
- },
24033
- css: menuItemCss,
24034
- children: [
24035
- "Insert ",
24036
- selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
24037
- " above"
24038
- ]
24039
- }
24040
- ),
24041
- /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
24042
- "Insert ",
24043
- selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
24044
- " below"
24045
- ] }),
24046
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
24047
- /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
24048
- "Insert ",
24049
- selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
24050
- " left"
24051
- ] }),
24052
- /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
24053
- "Insert ",
24054
- selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
24055
- " right"
24056
- ] }),
24057
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
24058
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
24059
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
24060
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
24061
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
24062
- /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
24063
- (tableCellNode.__headerState & import_table2.TableCellHeaderStates.ROW) === import_table2.TableCellHeaderStates.ROW ? "Remove" : "Add",
24064
- " ",
24065
- "row header"
24066
- ] }),
24067
- /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
24068
- (tableCellNode.__headerState & import_table2.TableCellHeaderStates.COLUMN) === import_table2.TableCellHeaderStates.COLUMN ? "Remove" : "Add",
24069
- " ",
24070
- "column header"
24071
- ] })
24072
- ]
24078
+ right: {
24079
+ backgroundColor: "none",
24080
+ cursor: "col-resize",
24081
+ height: `${height}px`,
24082
+ left: `${left - parentRect.left + width - zoneWidth / 2}px`,
24083
+ top: `${top - parentRect.top + positioningAnchorEl.scrollTop}px`,
24084
+ width: `${zoneWidth}px`
24085
+ }
24086
+ };
24087
+ const tableRect = tableRectRef.current;
24088
+ if (draggingDirection && mouseCurrentPos && tableRect) {
24089
+ if (isHeightChanging(draggingDirection)) {
24090
+ styles[draggingDirection].left = `${tableRect.left - parentRect.left}px`;
24091
+ styles[draggingDirection].top = `${(mouseCurrentPos.y - parentRect.top + positioningAnchorEl.scrollTop) / zoom}px`;
24092
+ styles[draggingDirection].height = "3px";
24093
+ styles[draggingDirection].width = `${tableRect.width}px`;
24094
+ } else {
24095
+ styles[draggingDirection].top = `${tableRect.top - parentRect.top + positioningAnchorEl.scrollTop}px`;
24096
+ styles[draggingDirection].left = `${(mouseCurrentPos.x - parentRect.left) / zoom}px`;
24097
+ styles[draggingDirection].width = "3px";
24098
+ styles[draggingDirection].height = `${tableRect.height}px`;
24099
+ }
24100
+ styles[draggingDirection].backgroundColor = "#adf";
24101
+ }
24102
+ return styles;
24073
24103
  }
24074
- );
24075
- }
24076
- function TableCellActionMenuContainer({
24077
- menuPortalEl,
24078
- positioningAnchorEl
24079
- }) {
24080
- const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
24081
- const [tableCellNode, setTableMenuCellNode] = (0, import_react152.useState)(null);
24082
- const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0, import_react152.useState)(null);
24083
- const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0, import_react152.useState)(null);
24084
- (0, import_react152.useEffect)(() => {
24085
- const newPortalEl = document.createElement("div");
24086
- setTableMenuCellMenuPortalEl(newPortalEl);
24087
- menuPortalEl.appendChild(newPortalEl);
24088
- return () => {
24089
- newPortalEl.remove();
24104
+ return {
24105
+ bottom: null,
24106
+ left: null,
24107
+ right: null,
24108
+ top: null
24090
24109
  };
24091
- }, [menuPortalEl]);
24092
- const setTableMenuCellNodeElem = (0, import_react152.useCallback)((elem) => {
24093
- if (elem) {
24094
- _setTableMenuCellNodeEl(elem);
24095
- } else {
24096
- _setTableMenuCellNodeEl(null);
24097
- }
24098
- }, []);
24099
- const $moveMenu = (0, import_react152.useCallback)(() => {
24100
- const selection = (0, import_lexical6.$getSelection)();
24101
- const nativeSelection = window.getSelection();
24102
- const activeElement = document.activeElement;
24103
- if (selection == null) {
24104
- setTableMenuCellNode(null);
24105
- return;
24106
- }
24107
- const rootElement = editor.getRootElement();
24108
- if ((0, import_lexical6.$isRangeSelection)(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
24109
- const tableCellNodeFromSelection = (0, import_table2.$getTableCellNodeFromLexicalNode)(selection.anchor.getNode());
24110
- if (tableCellNodeFromSelection == null) {
24111
- setTableMenuCellNode(null);
24112
- setTableMenuCellNodeElem(null);
24113
- return;
24110
+ }, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
24111
+ const resizerStyles = getResizers();
24112
+ return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
24113
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
24114
+ "div",
24115
+ {
24116
+ css: tableResizer,
24117
+ style: resizerStyles.right || void 0,
24118
+ onMouseDown: toggleResize("right")
24114
24119
  }
24115
- const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
24116
- if (tableCellParentNodeDOM == null) {
24117
- setTableMenuCellNode(null);
24118
- setTableMenuCellNodeElem(null);
24119
- return;
24120
+ ),
24121
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
24122
+ "div",
24123
+ {
24124
+ css: tableResizer,
24125
+ style: resizerStyles.bottom || void 0,
24126
+ onMouseDown: toggleResize("bottom")
24120
24127
  }
24121
- setTableMenuCellNode(tableCellNodeFromSelection);
24122
- setTableMenuCellNodeElem(tableCellParentNodeDOM);
24123
- } else if (!activeElement) {
24124
- setTableMenuCellNode(null);
24125
- setTableMenuCellNodeElem(null);
24126
- }
24127
- }, [editor, setTableMenuCellNodeElem]);
24128
- (0, import_react152.useEffect)(() => {
24129
- return editor.registerUpdateListener(() => {
24130
- editor.getEditorState().read(() => {
24131
- $moveMenu();
24132
- });
24133
- });
24134
- });
24135
- return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
24136
- TableActionMenu,
24137
- {
24138
- tableCellNode,
24139
- menuPortalEl: tableCellMenuPortalEl,
24140
- tableCellEl: tableCellNodeEl,
24128
+ )
24129
+ ] }) });
24130
+ }
24131
+ function TableCellResizerPlugin({ positioningAnchorEl }) {
24132
+ const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
24133
+ const isEditable = (0, import_useLexicalEditable2.useLexicalEditable)();
24134
+ return (0, import_react153.useMemo)(
24135
+ () => isEditable ? (0, import_react_dom3.createPortal)(
24136
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TableCellResizer, { editor, positioningAnchorEl }),
24141
24137
  positioningAnchorEl
24142
- },
24143
- tableCellNode.getKey()
24138
+ ) : null,
24139
+ [editor, isEditable, positioningAnchorEl]
24144
24140
  );
24145
24141
  }
24146
- function TableActionMenuPlugin({
24147
- positioningAnchorEl,
24148
- menuPortalEl
24149
- }) {
24150
- const isEditable = (0, import_useLexicalEditable.useLexicalEditable)();
24151
- return isEditable ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
24152
- }
24153
24142
 
24154
- // src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
24143
+ // src/components/ParameterInputs/rich-text/TableSelectionPlugin.tsx
24155
24144
  init_emotion_jsx_shim();
24156
- var import_react153 = require("@emotion/react");
24157
- var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
24158
- var import_useLexicalEditable2 = require("@lexical/react/useLexicalEditable");
24145
+ var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
24159
24146
  var import_table3 = require("@lexical/table");
24160
- var import_utils12 = require("@lexical/utils");
24161
- var import_lexical7 = require("lexical");
24147
+ var import_lexical8 = require("lexical");
24162
24148
  var import_react154 = require("react");
24163
- var import_react_dom3 = require("react-dom");
24164
- var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
24165
- var MIN_ROW_HEIGHT = 33;
24166
- var MIN_COLUMN_WIDTH = 50;
24167
- var tableResizer = import_react153.css`
24168
- position: absolute;
24169
- z-index: var(--z-10);
24170
- `;
24171
- var fixedGetDOMCellFromTarget = (node) => {
24172
- let currentNode = node;
24173
- while (currentNode != null) {
24174
- const nodeName = currentNode.nodeName;
24175
- if (nodeName === "TD" || nodeName === "TH") {
24176
- const cell2 = currentNode._cell;
24177
- if (cell2 === void 0) {
24178
- return {
24179
- elem: currentNode
24180
- };
24181
- }
24182
- return cell2;
24183
- }
24184
- currentNode = currentNode.parentNode;
24185
- }
24186
- return null;
24187
- };
24188
- function TableCellResizer({ editor, positioningAnchorEl }) {
24189
- const targetRef = (0, import_react154.useRef)(null);
24190
- const resizerRef = (0, import_react154.useRef)(null);
24191
- const tableRectRef = (0, import_react154.useRef)(null);
24192
- const mouseStartPosRef = (0, import_react154.useRef)(null);
24193
- const [mouseCurrentPos, updateMouseCurrentPos] = (0, import_react154.useState)(null);
24194
- const [activeCell, updateActiveCell] = (0, import_react154.useState)(null);
24195
- const [isMouseDown, updateIsMouseDown] = (0, import_react154.useState)(false);
24196
- const [draggingDirection, updateDraggingDirection] = (0, import_react154.useState)(null);
24197
- const resetState = (0, import_react154.useCallback)(() => {
24198
- updateActiveCell(null);
24199
- targetRef.current = null;
24200
- updateDraggingDirection(null);
24201
- mouseStartPosRef.current = null;
24202
- tableRectRef.current = null;
24203
- }, []);
24204
- const isMouseDownOnEvent = (event) => {
24205
- return (event.buttons & 1) === 1;
24206
- };
24149
+ var TableSelectionPlugin = () => {
24150
+ const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
24151
+ const [closestTableCellNode, setClosestTableCellNode] = (0, import_react154.useState)(null);
24207
24152
  (0, import_react154.useEffect)(() => {
24208
- const onMouseMove = (event) => {
24209
- setTimeout(() => {
24210
- const target = event.target;
24211
- if (draggingDirection) {
24212
- updateMouseCurrentPos({
24213
- x: event.clientX,
24214
- y: event.clientY
24215
- });
24216
- return;
24217
- }
24218
- updateIsMouseDown(isMouseDownOnEvent(event));
24219
- if (resizerRef.current && resizerRef.current.contains(target)) {
24220
- return;
24221
- }
24222
- if (targetRef.current !== target) {
24223
- targetRef.current = target;
24224
- const cell2 = fixedGetDOMCellFromTarget(target);
24225
- if (cell2 && activeCell !== cell2) {
24226
- editor.update(() => {
24227
- const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(cell2.elem);
24228
- if (!tableCellNode) {
24229
- throw new Error("TableCellResizer: Table cell node not found.");
24230
- }
24231
- const tableNode = (0, import_table3.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
24232
- const tableElement2 = editor.getElementByKey(tableNode.getKey());
24233
- if (!tableElement2) {
24234
- throw new Error("TableCellResizer: Table element not found.");
24235
- }
24236
- targetRef.current = target;
24237
- tableRectRef.current = tableElement2.getBoundingClientRect();
24238
- updateActiveCell(cell2);
24239
- });
24240
- } else if (cell2 == null) {
24241
- resetState();
24153
+ return editor.registerCommand(
24154
+ import_lexical8.SELECTION_CHANGE_COMMAND,
24155
+ () => {
24156
+ editor.read(() => {
24157
+ const selection = (0, import_lexical8.$getSelection)();
24158
+ if (!(0, import_lexical8.$isRangeSelection)(selection) || !selection.isCollapsed()) {
24159
+ setClosestTableCellNode(null);
24160
+ return false;
24242
24161
  }
24162
+ const tableCellNode = (0, import_table3.$findCellNode)(selection.anchor.getNode());
24163
+ if (tableCellNode === null) {
24164
+ setClosestTableCellNode(null);
24165
+ return false;
24166
+ }
24167
+ setClosestTableCellNode(tableCellNode);
24168
+ });
24169
+ return false;
24170
+ },
24171
+ import_lexical8.COMMAND_PRIORITY_NORMAL
24172
+ );
24173
+ }, [editor]);
24174
+ (0, import_react154.useEffect)(() => {
24175
+ const onControlA = (event) => {
24176
+ if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
24177
+ if (!closestTableCellNode) {
24178
+ return;
24243
24179
  }
24244
- }, 0);
24245
- };
24246
- const onMouseDown = () => {
24247
- setTimeout(() => {
24248
- updateIsMouseDown(true);
24249
- }, 0);
24250
- };
24251
- const onMouseUp = () => {
24252
- setTimeout(() => {
24253
- updateIsMouseDown(false);
24254
- }, 0);
24180
+ event.preventDefault();
24181
+ editor.update(() => {
24182
+ const selection = closestTableCellNode.select(0, closestTableCellNode.getChildrenSize());
24183
+ (0, import_lexical8.$setSelection)(selection);
24184
+ });
24185
+ }
24255
24186
  };
24256
- const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
24257
- rootElement == null ? void 0 : rootElement.addEventListener("mousemove", onMouseMove);
24258
- rootElement == null ? void 0 : rootElement.addEventListener("mousedown", onMouseDown);
24259
- rootElement == null ? void 0 : rootElement.addEventListener("mouseup", onMouseUp);
24260
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousemove", onMouseMove);
24261
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousedown", onMouseDown);
24262
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mouseup", onMouseUp);
24187
+ return editor.registerRootListener((rootElement, prevRootElement) => {
24188
+ rootElement == null ? void 0 : rootElement.addEventListener("keydown", onControlA);
24189
+ prevRootElement == null ? void 0 : prevRootElement.removeEventListener("keydown", onControlA);
24263
24190
  });
24264
- return () => {
24265
- removeRootListener();
24266
- };
24267
- }, [activeCell, draggingDirection, editor, resetState]);
24268
- const isHeightChanging = (direction) => {
24269
- if (direction === "bottom") {
24270
- return true;
24191
+ }, [editor, closestTableCellNode]);
24192
+ return null;
24193
+ };
24194
+ var TableSelectionPlugin_default = TableSelectionPlugin;
24195
+
24196
+ // src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
24197
+ init_emotion_jsx_shim();
24198
+ var import_react156 = require("@emotion/react");
24199
+ var import_code2 = require("@lexical/code");
24200
+ var import_list2 = require("@lexical/list");
24201
+ var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
24202
+ var import_rich_text = require("@lexical/rich-text");
24203
+ var import_selection2 = require("@lexical/selection");
24204
+ var import_table4 = require("@lexical/table");
24205
+ var import_utils13 = require("@lexical/utils");
24206
+ var import_lexical9 = require("lexical");
24207
+ var import_react157 = require("react");
24208
+
24209
+ // src/components/ParameterInputs/rich-text/toolbar/constants.ts
24210
+ init_emotion_jsx_shim();
24211
+ var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
24212
+ ["bold", "format-bold"],
24213
+ ["italic", "format-italic"],
24214
+ ["underline", "format-underline"],
24215
+ ["strikethrough", "format-strike"],
24216
+ ["code", "format-code"],
24217
+ ["superscript", "format-superscript"],
24218
+ ["subscript", "format-subscript"]
24219
+ ]);
24220
+ var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
24221
+ var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
24222
+
24223
+ // src/components/ParameterInputs/rich-text/toolbar/useRichTextToolbarState.ts
24224
+ init_emotion_jsx_shim();
24225
+ var import_react155 = require("react");
24226
+ var useRichTextToolbarState = ({ config }) => {
24227
+ var _a;
24228
+ const enabledBuiltInFormats = (0, import_react155.useMemo)(() => {
24229
+ return richTextBuiltInFormats.filter((format) => {
24230
+ var _a2, _b;
24231
+ return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
24232
+ });
24233
+ }, [config]);
24234
+ const enabledBuiltInElements = (0, import_react155.useMemo)(() => {
24235
+ return richTextBuiltInElements.filter((element) => {
24236
+ var _a2, _b;
24237
+ return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
24238
+ });
24239
+ }, [config]);
24240
+ const enabledBuiltInFormatsWithIcon = (0, import_react155.useMemo)(() => {
24241
+ return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
24242
+ }, [enabledBuiltInFormats]);
24243
+ const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
24244
+ (format) => !FORMATS_WITH_ICON.has(format.type)
24245
+ );
24246
+ const [activeFormats, setActiveFormats] = (0, import_react155.useState)([]);
24247
+ const visibleFormatsWithIcon = (0, import_react155.useMemo)(() => {
24248
+ const visibleFormats = /* @__PURE__ */ new Set();
24249
+ activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
24250
+ visibleFormats.add(type);
24251
+ });
24252
+ enabledBuiltInFormatsWithIcon.forEach((format) => {
24253
+ visibleFormats.add(format.type);
24254
+ });
24255
+ return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
24256
+ }, [activeFormats, enabledBuiltInFormatsWithIcon]);
24257
+ const visibleFormatsWithoutIcon = (0, import_react155.useMemo)(() => {
24258
+ const visibleFormats = /* @__PURE__ */ new Set();
24259
+ activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
24260
+ visibleFormats.add(type);
24261
+ });
24262
+ enabledBuiltInFormatsWithoutIcon.forEach((format) => {
24263
+ visibleFormats.add(format.type);
24264
+ });
24265
+ return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
24266
+ }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
24267
+ const [activeElement, setActiveElement] = (0, import_react155.useState)("paragraph");
24268
+ const enabledTextualElements = enabledBuiltInElements.filter(
24269
+ (element) => TEXTUAL_ELEMENTS.includes(element.type)
24270
+ );
24271
+ const visibleTextualElements = (0, import_react155.useMemo)(() => {
24272
+ if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
24273
+ return enabledTextualElements;
24271
24274
  }
24272
- return false;
24273
- };
24274
- const updateRowHeight = (0, import_react154.useCallback)(
24275
- (heightChange) => {
24276
- if (!activeCell) {
24277
- throw new Error("TableCellResizer: Expected active cell.");
24275
+ return richTextBuiltInElements.filter(
24276
+ (element) => {
24277
+ var _a2, _b;
24278
+ 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);
24278
24279
  }
24279
- editor.update(
24280
- () => {
24281
- const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(activeCell.elem);
24282
- if (!(0, import_table3.$isTableCellNode)(tableCellNode)) {
24283
- throw new Error("TableCellResizer: Table cell node not found.");
24284
- }
24285
- const tableNode = (0, import_table3.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
24286
- const tableRowIndex = (0, import_table3.$getTableRowIndexFromTableCellNode)(tableCellNode);
24287
- const tableRows = tableNode.getChildren();
24288
- if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
24289
- throw new Error("Expected table cell to be inside of table row.");
24290
- }
24291
- const tableRow2 = tableRows[tableRowIndex];
24292
- if (!(0, import_table3.$isTableRowNode)(tableRow2)) {
24293
- throw new Error("Expected table row");
24294
- }
24295
- let height = tableRow2.getHeight();
24296
- if (height === void 0) {
24297
- const rowCells = tableRow2.getChildren();
24298
- height = Math.min(...rowCells.map((cell2) => {
24299
- var _a;
24300
- return (_a = getCellNodeHeight(cell2, editor)) != null ? _a : Infinity;
24301
- }));
24302
- }
24303
- const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
24304
- tableRow2.setHeight(newHeight);
24305
- },
24306
- { tag: "skip-scroll-into-view" }
24307
- );
24308
- },
24309
- [activeCell, editor]
24310
- );
24311
- const getCellNodeWidth = (cell2, activeEditor) => {
24312
- const width = cell2.getWidth();
24313
- if (width !== void 0) {
24314
- return width;
24280
+ );
24281
+ }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
24282
+ const [isLink, setIsLink] = (0, import_react155.useState)(false);
24283
+ const linkElementVisible = (0, import_react155.useMemo)(() => {
24284
+ return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
24285
+ }, [isLink, enabledBuiltInElements]);
24286
+ const visibleLists = (0, import_react155.useMemo)(() => {
24287
+ return new Set(
24288
+ ["orderedList", "unorderedList"].filter(
24289
+ (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
24290
+ )
24291
+ );
24292
+ }, [activeElement, enabledBuiltInElements]);
24293
+ const quoteElementVisible = (0, import_react155.useMemo)(() => {
24294
+ return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
24295
+ }, [activeElement, enabledBuiltInElements]);
24296
+ const codeElementVisible = (0, import_react155.useMemo)(() => {
24297
+ return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
24298
+ }, [activeElement, enabledBuiltInElements]);
24299
+ const tableElementVisible = (0, import_react155.useMemo)(() => {
24300
+ return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
24301
+ }, [activeElement, enabledBuiltInElements]);
24302
+ const assetElementVisible = (0, import_react155.useMemo)(() => {
24303
+ return enabledBuiltInElements.some((element) => element.type === "asset") || activeElement === "asset";
24304
+ }, [activeElement, enabledBuiltInElements]);
24305
+ const visibleElementsWithIcons = (0, import_react155.useMemo)(() => {
24306
+ const visibleElements = /* @__PURE__ */ new Set();
24307
+ if (linkElementVisible) {
24308
+ visibleElements.add("link");
24315
24309
  }
24316
- const domCellNode = activeEditor.getElementByKey(cell2.getKey());
24317
- if (domCellNode == null) {
24318
- return void 0;
24310
+ if (visibleLists.size > 0) {
24311
+ visibleLists.forEach((type) => {
24312
+ visibleElements.add(type);
24313
+ });
24319
24314
  }
24320
- const computedStyle = getComputedStyle(domCellNode);
24321
- return domCellNode.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
24322
- };
24323
- const getCellNodeHeight = (cell2, activeEditor) => {
24324
- const domCellNode = activeEditor.getElementByKey(cell2.getKey());
24325
- return domCellNode == null ? void 0 : domCellNode.clientHeight;
24326
- };
24327
- const getCellColumnIndex = (tableCellNode, tableMap) => {
24328
- for (let row = 0; row < tableMap.length; row++) {
24329
- for (let column = 0; column < tableMap[row].length; column++) {
24330
- if (tableMap[row][column].cell === tableCellNode) {
24331
- return column;
24332
- }
24333
- }
24315
+ return visibleElements;
24316
+ }, [linkElementVisible, visibleLists]);
24317
+ const visibleInsertElementsWithIcons = (0, import_react155.useMemo)(() => {
24318
+ const visibleElements = /* @__PURE__ */ new Set();
24319
+ if (quoteElementVisible) {
24320
+ visibleElements.add("quote");
24321
+ }
24322
+ if (codeElementVisible) {
24323
+ visibleElements.add("code");
24324
+ }
24325
+ if (tableElementVisible) {
24326
+ visibleElements.add("table");
24327
+ }
24328
+ if (assetElementVisible) {
24329
+ visibleElements.add("asset");
24334
24330
  }
24331
+ return visibleElements;
24332
+ }, [codeElementVisible, quoteElementVisible, tableElementVisible, assetElementVisible]);
24333
+ return {
24334
+ activeFormats,
24335
+ setActiveFormats,
24336
+ activeElement,
24337
+ setActiveElement,
24338
+ visibleFormatsWithIcon,
24339
+ visibleFormatsWithoutIcon,
24340
+ visibleTextualElements,
24341
+ isLink,
24342
+ setIsLink,
24343
+ linkElementVisible,
24344
+ visibleLists,
24345
+ quoteElementVisible,
24346
+ codeElementVisible,
24347
+ tableElementVisible,
24348
+ assetElementVisible,
24349
+ visibleElementsWithIcons,
24350
+ visibleInsertElementsWithIcons
24335
24351
  };
24336
- const updateColumnWidth = (0, import_react154.useCallback)(
24337
- (widthChange) => {
24338
- if (!activeCell) {
24339
- throw new Error("TableCellResizer: Expected active cell.");
24340
- }
24341
- editor.update(
24342
- () => {
24343
- const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(activeCell.elem);
24344
- if (!(0, import_table3.$isTableCellNode)(tableCellNode)) {
24345
- throw new Error("TableCellResizer: Table cell node not found.");
24346
- }
24347
- const tableNode = (0, import_table3.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
24348
- const [tableMap] = (0, import_table3.$computeTableMapSkipCellCheck)(tableNode, null, null);
24349
- const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
24350
- if (columnIndex === void 0) {
24351
- throw new Error("TableCellResizer: Table column not found.");
24352
- }
24353
- for (let row = 0; row < tableMap.length; row++) {
24354
- const cell2 = tableMap[row][columnIndex];
24355
- if (cell2.startRow === row && (columnIndex === tableMap[row].length - 1 || tableMap[row][columnIndex].cell !== tableMap[row][columnIndex + 1].cell)) {
24356
- const width = getCellNodeWidth(cell2.cell, editor);
24357
- if (width === void 0) {
24358
- continue;
24359
- }
24360
- const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
24361
- cell2.cell.setWidth(newWidth);
24362
- }
24363
- }
24364
- },
24365
- { tag: "skip-scroll-into-view" }
24366
- );
24367
- },
24368
- [activeCell, editor]
24369
- );
24370
- const mouseUpHandler = (0, import_react154.useCallback)(
24371
- (direction) => {
24372
- const handler = (event) => {
24373
- event.preventDefault();
24374
- event.stopPropagation();
24375
- if (!activeCell) {
24376
- throw new Error("TableCellResizer: Expected active cell.");
24377
- }
24378
- if (mouseStartPosRef.current) {
24379
- const { x, y } = mouseStartPosRef.current;
24380
- if (activeCell === null) {
24381
- return;
24382
- }
24383
- const zoom = (0, import_utils12.calculateZoomLevel)(event.target);
24384
- if (isHeightChanging(direction)) {
24385
- const heightChange = (event.clientY - y) / zoom;
24386
- updateRowHeight(heightChange);
24387
- } else {
24388
- const widthChange = (event.clientX - x) / zoom;
24389
- updateColumnWidth(widthChange);
24390
- }
24391
- resetState();
24392
- document.removeEventListener("mouseup", handler);
24393
- }
24394
- };
24395
- return handler;
24396
- },
24397
- [activeCell, resetState, updateColumnWidth, updateRowHeight]
24398
- );
24399
- const toggleResize = (0, import_react154.useCallback)(
24400
- (direction) => (event) => {
24401
- event.preventDefault();
24402
- event.stopPropagation();
24403
- if (!activeCell) {
24404
- throw new Error("TableCellResizer: Expected active cell.");
24405
- }
24406
- mouseStartPosRef.current = {
24407
- x: event.clientX,
24408
- y: event.clientY
24409
- };
24410
- updateMouseCurrentPos(mouseStartPosRef.current);
24411
- updateDraggingDirection(direction);
24412
- document.addEventListener("mouseup", mouseUpHandler(direction));
24413
- },
24414
- [activeCell, mouseUpHandler]
24415
- );
24416
- const getResizers = (0, import_react154.useCallback)(() => {
24417
- if (activeCell) {
24418
- const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
24419
- const parentRect = positioningAnchorEl.getBoundingClientRect();
24420
- const zoom = (0, import_utils12.calculateZoomLevel)(activeCell.elem);
24421
- const zoneWidth = 10;
24422
- const styles = {
24423
- bottom: {
24424
- backgroundColor: "none",
24425
- cursor: "row-resize",
24426
- height: `${zoneWidth}px`,
24427
- left: `${left - parentRect.left}px`,
24428
- top: `${top - parentRect.top + positioningAnchorEl.scrollTop + height - zoneWidth / 2}px`,
24429
- width: `${width}px`
24430
- },
24431
- right: {
24432
- backgroundColor: "none",
24433
- cursor: "col-resize",
24434
- height: `${height}px`,
24435
- left: `${left - parentRect.left + width - zoneWidth / 2}px`,
24436
- top: `${top - parentRect.top + positioningAnchorEl.scrollTop}px`,
24437
- width: `${zoneWidth}px`
24438
- }
24439
- };
24440
- const tableRect = tableRectRef.current;
24441
- if (draggingDirection && mouseCurrentPos && tableRect) {
24442
- if (isHeightChanging(draggingDirection)) {
24443
- styles[draggingDirection].left = `${tableRect.left - parentRect.left}px`;
24444
- styles[draggingDirection].top = `${(mouseCurrentPos.y - parentRect.top + positioningAnchorEl.scrollTop) / zoom}px`;
24445
- styles[draggingDirection].height = "3px";
24446
- styles[draggingDirection].width = `${tableRect.width}px`;
24447
- } else {
24448
- styles[draggingDirection].top = `${tableRect.top - parentRect.top + positioningAnchorEl.scrollTop}px`;
24449
- styles[draggingDirection].left = `${(mouseCurrentPos.x - parentRect.left) / zoom}px`;
24450
- styles[draggingDirection].width = "3px";
24451
- styles[draggingDirection].height = `${tableRect.height}px`;
24452
- }
24453
- styles[draggingDirection].backgroundColor = "#adf";
24454
- }
24455
- return styles;
24352
+ };
24353
+
24354
+ // src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
24355
+ var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
24356
+ var toolbar = import_react156.css`
24357
+ ${scrollbarStyles}
24358
+ background: var(--gray-50);
24359
+ border-radius: var(--rounded-base);
24360
+ display: flex;
24361
+ /* We add 1px because we use a 1px wide separator */
24362
+ gap: calc(var(--spacing-sm) + 1px);
24363
+ margin: 0 0 calc(var(--spacing-sm) + var(--spacing-xs)) 0;
24364
+ overflow: auto;
24365
+ padding: var(--spacing-sm);
24366
+ position: sticky;
24367
+ top: calc(var(--spacing-sm) * -2);
24368
+ z-index: 10;
24369
+ `;
24370
+ var toolbarGroup = import_react156.css`
24371
+ display: flex;
24372
+ flex-shrink: 0;
24373
+ gap: var(--spacing-xs);
24374
+ position: relative;
24375
+
24376
+ &:not(:first-child)::before {
24377
+ background-color: var(--gray-300);
24378
+ content: '';
24379
+ display: block;
24380
+ height: 24px;
24381
+ left: calc(var(--spacing-xs) * -1);
24382
+ position: absolute;
24383
+ top: 4px;
24384
+ width: 1px;
24385
+ }
24386
+ `;
24387
+ var richTextToolbarButton = import_react156.css`
24388
+ align-items: center;
24389
+ appearance: none;
24390
+ border: 0;
24391
+ border-radius: var(--rounded-sm);
24392
+ box-shadow: none;
24393
+ color: var(--gray-900);
24394
+ display: flex;
24395
+ flex-shrink: 0;
24396
+ height: 32px;
24397
+ justify-content: center;
24398
+ min-width: 32px;
24399
+ padding: 0 var(--spacing-sm);
24400
+ `;
24401
+ var richTextToolbarButtonActive = import_react156.css`
24402
+ background: var(--gray-200);
24403
+ `;
24404
+ var textStyleButton = import_react156.css`
24405
+ justify-content: space-between;
24406
+ min-width: 7rem;
24407
+ `;
24408
+ var toolbarIcon = import_react156.css`
24409
+ color: inherit;
24410
+ `;
24411
+ var toolbarChevron = import_react156.css`
24412
+ margin-left: var(--spacing-xs);
24413
+ `;
24414
+ var RichTextToolbarIcon = ({ icon }) => {
24415
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
24416
+ };
24417
+ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset }) => {
24418
+ const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
24419
+ const {
24420
+ activeElement,
24421
+ setActiveElement,
24422
+ activeFormats,
24423
+ setActiveFormats,
24424
+ visibleFormatsWithIcon,
24425
+ visibleFormatsWithoutIcon,
24426
+ visibleTextualElements,
24427
+ isLink,
24428
+ setIsLink,
24429
+ linkElementVisible,
24430
+ visibleLists,
24431
+ codeElementVisible,
24432
+ quoteElementVisible,
24433
+ visibleElementsWithIcons,
24434
+ visibleInsertElementsWithIcons,
24435
+ tableElementVisible,
24436
+ assetElementVisible
24437
+ } = useRichTextToolbarState({ config });
24438
+ const onSelectElement = (type) => {
24439
+ if (activeElement === type) {
24440
+ return;
24456
24441
  }
24457
- return {
24458
- bottom: null,
24459
- left: null,
24460
- right: null,
24461
- top: null
24462
- };
24463
- }, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
24464
- const resizerStyles = getResizers();
24465
- return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
24466
- /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24467
- "div",
24468
- {
24469
- css: tableResizer,
24470
- style: resizerStyles.right || void 0,
24471
- onMouseDown: toggleResize("right")
24442
+ editor.focus(() => {
24443
+ editor.update(() => {
24444
+ const selection = (0, import_lexical9.$getSelection)();
24445
+ if (HEADING_ELEMENTS.includes(type)) {
24446
+ (0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createHeadingNode)(type));
24447
+ } else if (type === "paragraph") {
24448
+ (0, import_selection2.$setBlocksType)(selection, () => (0, import_lexical9.$createParagraphNode)());
24449
+ } else if (type === "quote") {
24450
+ (0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createQuoteNode)());
24451
+ } else if (type === "code") {
24452
+ (0, import_selection2.$setBlocksType)(selection, () => (0, import_code2.$createCodeNode)());
24453
+ } else if (type === "table" && onInsertTable) {
24454
+ onInsertTable().then((dimensions) => {
24455
+ if (!dimensions) {
24456
+ return;
24457
+ }
24458
+ const { rows, columns } = dimensions;
24459
+ editor.focus(() => {
24460
+ editor.update(() => {
24461
+ (0, import_lexical9.$insertNodes)([(0, import_table4.$createTableNodeWithDimensions)(rows, columns, false)]);
24462
+ });
24463
+ });
24464
+ });
24465
+ } else if (type === "asset" && onInsertAsset) {
24466
+ onInsertAsset();
24467
+ }
24468
+ });
24469
+ });
24470
+ };
24471
+ const updateToolbar = (0, import_react157.useCallback)(() => {
24472
+ const selection = (0, import_lexical9.$getSelection)();
24473
+ if (!(0, import_lexical9.$isRangeSelection)(selection)) {
24474
+ return;
24475
+ }
24476
+ const newActiveFormats = [];
24477
+ for (const format of richTextBuiltInFormats) {
24478
+ if (selection.hasFormat(format.type)) {
24479
+ newActiveFormats.push(format.type);
24472
24480
  }
24473
- ),
24474
- /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24475
- "div",
24476
- {
24477
- css: tableResizer,
24478
- style: resizerStyles.bottom || void 0,
24479
- onMouseDown: toggleResize("bottom")
24481
+ }
24482
+ setActiveFormats(newActiveFormats);
24483
+ const anchorNode = selection.anchor.getNode();
24484
+ let element = anchorNode.getKey() === "root" ? anchorNode : (0, import_utils13.$findMatchingParent)(anchorNode, (e) => {
24485
+ const parent = e.getParent();
24486
+ return parent !== null && (0, import_lexical9.$isRootOrShadowRoot)(parent);
24487
+ });
24488
+ if (element === null) {
24489
+ element = anchorNode.getTopLevelElementOrThrow();
24490
+ }
24491
+ const elementKey = element.getKey();
24492
+ const elementDOM = editor.getElementByKey(elementKey);
24493
+ if (elementDOM !== null) {
24494
+ if ((0, import_list2.$isListNode)(element)) {
24495
+ const parentList = (0, import_utils13.$getNearestNodeOfType)(anchorNode, import_list2.ListNode);
24496
+ const type = parentList ? parentList.getListType() : element.getListType();
24497
+ setActiveElement(type === "bullet" ? "unorderedList" : "orderedList");
24498
+ } else {
24499
+ const type = (0, import_rich_text.$isHeadingNode)(element) ? element.getTag() : element.getType();
24500
+ setActiveElement(type);
24480
24501
  }
24481
- )
24482
- ] }) });
24483
- }
24484
- function TableCellResizerPlugin({ positioningAnchorEl }) {
24485
- const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
24486
- const isEditable = (0, import_useLexicalEditable2.useLexicalEditable)();
24487
- return (0, import_react154.useMemo)(
24488
- () => isEditable ? (0, import_react_dom3.createPortal)(
24489
- /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TableCellResizer, { editor, positioningAnchorEl }),
24490
- positioningAnchorEl
24491
- ) : null,
24492
- [editor, isEditable, positioningAnchorEl]
24493
- );
24494
- }
24495
-
24496
- // src/components/ParameterInputs/rich-text/TableSelectionPlugin.tsx
24497
- init_emotion_jsx_shim();
24498
- var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
24499
- var import_table4 = require("@lexical/table");
24500
- var import_lexical8 = require("lexical");
24501
- var import_react155 = require("react");
24502
- var TableSelectionPlugin = () => {
24503
- const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
24504
- const [closestTableCellNode, setClosestTableCellNode] = (0, import_react155.useState)(null);
24505
- (0, import_react155.useEffect)(() => {
24502
+ }
24503
+ const node = getSelectedNode(selection);
24504
+ if (getLinkAncestor(node) !== null) {
24505
+ setIsLink(true);
24506
+ } else {
24507
+ setIsLink(false);
24508
+ }
24509
+ }, [editor, setActiveElement, setActiveFormats, setIsLink]);
24510
+ (0, import_react157.useEffect)(() => {
24506
24511
  return editor.registerCommand(
24507
- import_lexical8.SELECTION_CHANGE_COMMAND,
24508
- () => {
24509
- editor.read(() => {
24510
- const selection = (0, import_lexical8.$getSelection)();
24511
- if (!(0, import_lexical8.$isRangeSelection)(selection) || !selection.isCollapsed()) {
24512
- setClosestTableCellNode(null);
24513
- return false;
24514
- }
24515
- const tableCellNode = (0, import_table4.$findCellNode)(selection.anchor.getNode());
24516
- if (tableCellNode === null) {
24517
- setClosestTableCellNode(null);
24518
- return false;
24519
- }
24520
- setClosestTableCellNode(tableCellNode);
24521
- });
24512
+ import_lexical9.SELECTION_CHANGE_COMMAND,
24513
+ (_payload) => {
24514
+ updateToolbar();
24522
24515
  return false;
24523
24516
  },
24524
- import_lexical8.COMMAND_PRIORITY_NORMAL
24517
+ import_lexical9.COMMAND_PRIORITY_CRITICAL
24525
24518
  );
24526
- }, [editor]);
24527
- (0, import_react155.useEffect)(() => {
24528
- const onControlA = (event) => {
24529
- if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
24530
- if (!closestTableCellNode) {
24531
- return;
24532
- }
24533
- event.preventDefault();
24534
- editor.update(() => {
24535
- const selection = closestTableCellNode.select(0, closestTableCellNode.getChildrenSize());
24536
- (0, import_lexical8.$setSelection)(selection);
24519
+ }, [editor, updateToolbar]);
24520
+ (0, import_react157.useEffect)(() => {
24521
+ return editor.registerUpdateListener(({ editorState }) => {
24522
+ requestAnimationFrame(() => {
24523
+ editorState.read(() => {
24524
+ updateToolbar();
24537
24525
  });
24538
- }
24539
- };
24540
- return editor.registerRootListener((rootElement, prevRootElement) => {
24541
- rootElement == null ? void 0 : rootElement.addEventListener("keydown", onControlA);
24542
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("keydown", onControlA);
24526
+ });
24543
24527
  });
24544
- }, [editor, closestTableCellNode]);
24545
- return null;
24528
+ }, [editor, updateToolbar]);
24529
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { css: toolbar, children: [
24530
+ /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
24531
+ Menu,
24532
+ {
24533
+ menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", children: [
24534
+ visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
24535
+ " ",
24536
+ /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
24537
+ ] }),
24538
+ placement: "bottom-start",
24539
+ children: [
24540
+ [
24541
+ {
24542
+ label: "Normal",
24543
+ type: "paragraph"
24544
+ },
24545
+ ...visibleTextualElements
24546
+ ].map((element) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24547
+ MenuItem,
24548
+ {
24549
+ onClick: () => {
24550
+ onSelectElement(element.type);
24551
+ },
24552
+ children: element.label
24553
+ },
24554
+ element.type
24555
+ )),
24556
+ visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
24557
+ ]
24558
+ }
24559
+ ),
24560
+ visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { css: toolbarGroup, children: [
24561
+ visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24562
+ "button",
24563
+ {
24564
+ onClick: () => {
24565
+ editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, format.type);
24566
+ },
24567
+ css: [
24568
+ richTextToolbarButton,
24569
+ activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
24570
+ ],
24571
+ children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
24572
+ }
24573
+ ) }, format.type)),
24574
+ visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24575
+ Menu,
24576
+ {
24577
+ menuLabel: "Alternative text styles",
24578
+ menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
24579
+ placement: "bottom-start",
24580
+ children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24581
+ MenuItem,
24582
+ {
24583
+ onClick: () => {
24584
+ editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, format.type);
24585
+ },
24586
+ children: format.label
24587
+ },
24588
+ format.type
24589
+ ))
24590
+ }
24591
+ ) : null
24592
+ ] }) : null,
24593
+ visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { css: toolbarGroup, children: [
24594
+ linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24595
+ "button",
24596
+ {
24597
+ onClick: () => {
24598
+ isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
24599
+ },
24600
+ css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
24601
+ children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(RichTextToolbarIcon, { icon: "link" })
24602
+ }
24603
+ ) }) : null,
24604
+ visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
24605
+ visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24606
+ "button",
24607
+ {
24608
+ onClick: () => {
24609
+ activeElement === "unorderedList" ? editor.dispatchCommand(import_list2.REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(import_list2.INSERT_UNORDERED_LIST_COMMAND, void 0);
24610
+ },
24611
+ css: [
24612
+ richTextToolbarButton,
24613
+ activeElement === "unorderedList" ? richTextToolbarButtonActive : null
24614
+ ],
24615
+ children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
24616
+ }
24617
+ ) }) : null,
24618
+ visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24619
+ "button",
24620
+ {
24621
+ onClick: () => {
24622
+ activeElement === "orderedList" ? editor.dispatchCommand(import_list2.REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(import_list2.INSERT_ORDERED_LIST_COMMAND, void 0);
24623
+ },
24624
+ css: [
24625
+ richTextToolbarButton,
24626
+ activeElement === "orderedList" ? richTextToolbarButtonActive : null
24627
+ ],
24628
+ children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
24629
+ }
24630
+ ) }) : null
24631
+ ] }) : null,
24632
+ customControls ? customControls : null
24633
+ ] }) : null,
24634
+ visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { css: toolbarGroup, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
24635
+ Menu,
24636
+ {
24637
+ menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("button", { css: richTextToolbarButton, title: "Insert block element", children: [
24638
+ "Insert",
24639
+ /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
24640
+ ] }),
24641
+ placement: "bottom-start",
24642
+ children: [
24643
+ quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24644
+ MenuItem,
24645
+ {
24646
+ onClick: () => {
24647
+ onSelectElement("quote");
24648
+ },
24649
+ icon: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { icon: "quote", iconColor: "currentColor" }),
24650
+ children: "Quote"
24651
+ }
24652
+ ) : null,
24653
+ codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24654
+ MenuItem,
24655
+ {
24656
+ onClick: () => {
24657
+ onSelectElement("code");
24658
+ },
24659
+ icon: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { icon: "code-slash", iconColor: "currentColor" }),
24660
+ children: "Code"
24661
+ }
24662
+ ) : null,
24663
+ tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24664
+ MenuItem,
24665
+ {
24666
+ onClick: () => {
24667
+ onSelectElement("table");
24668
+ },
24669
+ icon: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { icon: "view-grid", iconColor: "currentColor" }),
24670
+ children: "Table"
24671
+ }
24672
+ ) : null,
24673
+ assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24674
+ MenuItem,
24675
+ {
24676
+ onClick: () => {
24677
+ onSelectElement("asset");
24678
+ },
24679
+ icon: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { icon: "image", iconColor: "currentColor" }),
24680
+ children: "Asset"
24681
+ }
24682
+ ) : null
24683
+ ]
24684
+ }
24685
+ ) }) : null
24686
+ ] });
24546
24687
  };
24547
- var TableSelectionPlugin_default = TableSelectionPlugin;
24688
+ var RichTextToolbar_default = RichTextToolbar;
24548
24689
 
24549
24690
  // src/components/ParameterInputs/ParameterRichText.tsx
24550
24691
  var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
@@ -24573,6 +24714,7 @@ var ParameterRichText = ({
24573
24714
  variables,
24574
24715
  customControls,
24575
24716
  onInsertTable,
24717
+ onInsertAsset,
24576
24718
  minimalInteractivity
24577
24719
  }) => {
24578
24720
  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
@@ -24606,6 +24748,7 @@ var ParameterRichText = ({
24606
24748
  variables,
24607
24749
  customControls,
24608
24750
  onInsertTable,
24751
+ onInsertAsset,
24609
24752
  minimalInteractivity,
24610
24753
  children
24611
24754
  }
@@ -24615,7 +24758,7 @@ var ParameterRichText = ({
24615
24758
  }
24616
24759
  );
24617
24760
  };
24618
- var editorContainerWrapper = import_react156.css`
24761
+ var editorContainerWrapper = import_react158.css`
24619
24762
  position: relative;
24620
24763
 
24621
24764
  &::before {
@@ -24631,12 +24774,12 @@ var editorContainerWrapper = import_react156.css`
24631
24774
  z-index: 2;
24632
24775
  }
24633
24776
  `;
24634
- var editorWrapper = import_react156.css`
24777
+ var editorWrapper = import_react158.css`
24635
24778
  display: flex;
24636
24779
  flex-flow: column;
24637
24780
  flex-grow: 1;
24638
24781
  `;
24639
- var editorContainer = import_react156.css`
24782
+ var editorContainer = import_react158.css`
24640
24783
  ${scrollbarStyles}
24641
24784
  background: var(--white);
24642
24785
  border-radius: var(--rounded-sm);
@@ -24648,7 +24791,7 @@ var editorContainer = import_react156.css`
24648
24791
  font-size: var(--fs-base);
24649
24792
  height: max-content;
24650
24793
  line-height: 1.2;
24651
- max-height: 300px;
24794
+ max-height: 320px;
24652
24795
  min-height: 50px;
24653
24796
  overflow-y: auto;
24654
24797
  padding: var(--spacing-sm);
@@ -24664,11 +24807,11 @@ var editorContainer = import_react156.css`
24664
24807
  }
24665
24808
 
24666
24809
  &[style*='height:'] {
24667
- min-height: 50px;
24810
+ min-height: calc(3rem + (2 * var(--spacing-sm)));
24668
24811
  max-height: unset;
24669
24812
  }
24670
24813
  `;
24671
- var editorContainerOverflowWrapper = import_react156.css`
24814
+ var editorContainerOverflowWrapper = import_react158.css`
24672
24815
  overflow: hidden;
24673
24816
  pointer-events: none;
24674
24817
 
@@ -24676,7 +24819,7 @@ var editorContainerOverflowWrapper = import_react156.css`
24676
24819
  pointer-events: auto;
24677
24820
  }
24678
24821
  `;
24679
- var editorPlaceholder = import_react156.css`
24822
+ var editorPlaceholder = import_react158.css`
24680
24823
  color: var(--gray-500);
24681
24824
  font-style: italic;
24682
24825
  /* 1px is added to make sure caret is clearly visible when field is focused
@@ -24684,11 +24827,12 @@ var editorPlaceholder = import_react156.css`
24684
24827
  left: calc(var(--spacing-sm) + 1px);
24685
24828
  pointer-events: none;
24686
24829
  position: absolute;
24687
- top: var(--spacing-sm);
24830
+ top: calc(1rem + var(--spacing-sm));
24688
24831
  user-select: none;
24689
24832
  `;
24690
- var editorInput = import_react156.css`
24833
+ var editorInput = import_react158.css`
24691
24834
  min-height: 100%;
24835
+ flex-grow: 1;
24692
24836
 
24693
24837
  &:focus,
24694
24838
  &:focus-within {
@@ -24711,6 +24855,7 @@ var ParameterRichTextInner = ({
24711
24855
  variables,
24712
24856
  customControls,
24713
24857
  onInsertTable,
24858
+ onInsertAsset,
24714
24859
  minimalInteractivity
24715
24860
  }) => {
24716
24861
  const lexicalConfig = {
@@ -24725,7 +24870,7 @@ var ParameterRichTextInner = ({
24725
24870
  LinkNode,
24726
24871
  import_rich_text2.HeadingNode,
24727
24872
  import_rich_text2.QuoteNode,
24728
- import_lexical9.ParagraphNode,
24873
+ import_lexical10.ParagraphNode,
24729
24874
  CustomCodeNode,
24730
24875
  import_table5.TableNode,
24731
24876
  import_table5.TableCellNode,
@@ -24783,6 +24928,7 @@ var ParameterRichTextInner = ({
24783
24928
  variables,
24784
24929
  customControls,
24785
24930
  onInsertTable,
24931
+ onInsertAsset,
24786
24932
  minimalInteractivity,
24787
24933
  children
24788
24934
  }
@@ -24811,15 +24957,16 @@ var RichText = ({
24811
24957
  variables,
24812
24958
  customControls,
24813
24959
  onInsertTable,
24960
+ onInsertAsset,
24814
24961
  minimalInteractivity
24815
24962
  }) => {
24816
- const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
24817
- (0, import_react157.useEffect)(() => {
24963
+ const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
24964
+ (0, import_react159.useEffect)(() => {
24818
24965
  if (onRichTextInit) {
24819
24966
  onRichTextInit(editor);
24820
24967
  }
24821
24968
  }, [editor, onRichTextInit]);
24822
- (0, import_react157.useEffect)(() => {
24969
+ (0, import_react159.useEffect)(() => {
24823
24970
  const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
24824
24971
  requestAnimationFrame(() => {
24825
24972
  if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -24831,23 +24978,31 @@ var RichText = ({
24831
24978
  removeUpdateListener();
24832
24979
  };
24833
24980
  }, [editor, onChange]);
24834
- (0, import_react157.useEffect)(() => {
24981
+ (0, import_react159.useEffect)(() => {
24835
24982
  editor.setEditable(!readOnly);
24836
24983
  }, [editor, readOnly]);
24837
- const [editorContainerRef, setEditorContainerRef] = (0, import_react157.useState)(null);
24984
+ const [editorContainerRef, setEditorContainerRef] = (0, import_react159.useState)(null);
24838
24985
  const onEditorContainerRef = (_editorContainerRef) => {
24839
24986
  if (_editorContainerRef !== null) {
24840
24987
  setEditorContainerRef(_editorContainerRef);
24841
24988
  }
24842
24989
  };
24843
- const [portalContainerRef, setPortalContainerRef] = (0, import_react157.useState)(null);
24990
+ const [portalContainerRef, setPortalContainerRef] = (0, import_react159.useState)(null);
24844
24991
  const onPortalContainerRef = (_portalContainerRef) => {
24845
24992
  if (_portalContainerRef !== null) {
24846
24993
  setPortalContainerRef(_portalContainerRef);
24847
24994
  }
24848
24995
  };
24849
24996
  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, { children: [
24850
- readOnly || minimalInteractivity ? null : /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(RichTextToolbar_default, { config, customControls, onInsertTable }),
24997
+ readOnly || minimalInteractivity ? null : /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
24998
+ RichTextToolbar_default,
24999
+ {
25000
+ config,
25001
+ customControls,
25002
+ onInsertTable,
25003
+ onInsertAsset
25004
+ }
25005
+ ),
24851
25006
  /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
24852
25007
  /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
24853
25008
  "div",
@@ -24894,22 +25049,23 @@ var RichText = ({
24894
25049
  positioningAnchorEl: editorContainerRef
24895
25050
  }
24896
25051
  ) : null,
24897
- /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(TableSelectionPlugin_default, {})
25052
+ /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(TableSelectionPlugin_default, {}),
25053
+ /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ImprovedAssetSelectionPlugin_default, {})
24898
25054
  ] })
24899
25055
  ] });
24900
25056
  };
24901
25057
 
24902
25058
  // src/components/ParameterInputs/ParameterSelect.tsx
24903
25059
  init_emotion_jsx_shim();
24904
- var import_react158 = require("react");
25060
+ var import_react160 = require("react");
24905
25061
  var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
24906
- var ParameterSelect = (0, import_react158.forwardRef)(
25062
+ var ParameterSelect = (0, import_react160.forwardRef)(
24907
25063
  ({ defaultOption, options, ...props }, ref) => {
24908
25064
  const { shellProps, innerProps } = extractParameterProps(props);
24909
25065
  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
24910
25066
  }
24911
25067
  );
24912
- var ParameterSelectInner = (0, import_react158.forwardRef)(
25068
+ var ParameterSelectInner = (0, import_react160.forwardRef)(
24913
25069
  ({ defaultOption, options, ...props }, ref) => {
24914
25070
  const { id, label, hiddenLabel } = useParameterShell();
24915
25071
  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
@@ -24934,13 +25090,13 @@ var ParameterSelectInner = (0, import_react158.forwardRef)(
24934
25090
 
24935
25091
  // src/components/ParameterInputs/ParameterTextarea.tsx
24936
25092
  init_emotion_jsx_shim();
24937
- var import_react159 = require("react");
25093
+ var import_react161 = require("react");
24938
25094
  var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
24939
- var ParameterTextarea = (0, import_react159.forwardRef)((props, ref) => {
25095
+ var ParameterTextarea = (0, import_react161.forwardRef)((props, ref) => {
24940
25096
  const { shellProps, innerProps } = extractParameterProps(props);
24941
25097
  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
24942
25098
  });
24943
- var ParameterTextareaInner = (0, import_react159.forwardRef)(({ ...props }, ref) => {
25099
+ var ParameterTextareaInner = (0, import_react161.forwardRef)(({ ...props }, ref) => {
24944
25100
  const { id, label, hiddenLabel } = useParameterShell();
24945
25101
  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
24946
25102
  "textarea",
@@ -24956,13 +25112,13 @@ var ParameterTextareaInner = (0, import_react159.forwardRef)(({ ...props }, ref)
24956
25112
 
24957
25113
  // src/components/ParameterInputs/ParameterToggle.tsx
24958
25114
  init_emotion_jsx_shim();
24959
- var import_react160 = require("react");
25115
+ var import_react162 = require("react");
24960
25116
  var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
24961
- var ParameterToggle = (0, import_react160.forwardRef)((props, ref) => {
25117
+ var ParameterToggle = (0, import_react162.forwardRef)((props, ref) => {
24962
25118
  const { shellProps, innerProps } = extractParameterProps(props);
24963
25119
  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
24964
25120
  });
24965
- var ParameterToggleInner = (0, import_react160.forwardRef)(
25121
+ var ParameterToggleInner = (0, import_react162.forwardRef)(
24966
25122
  ({ children, ...props }, ref) => {
24967
25123
  const { id, label } = useParameterShell();
24968
25124
  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("label", { css: inputToggleLabel2, children: [
@@ -24978,8 +25134,8 @@ init_emotion_jsx_shim();
24978
25134
 
24979
25135
  // src/components/ProgressBar/ProgressBar.styles.ts
24980
25136
  init_emotion_jsx_shim();
24981
- var import_react161 = require("@emotion/react");
24982
- var container3 = import_react161.css`
25137
+ var import_react163 = require("@emotion/react");
25138
+ var container3 = import_react163.css`
24983
25139
  background: var(--gray-50);
24984
25140
  margin-block: var(--spacing-sm);
24985
25141
  position: relative;
@@ -24989,17 +25145,17 @@ var container3 = import_react161.css`
24989
25145
  border: solid 1px var(--gray-300);
24990
25146
  `;
24991
25147
  var themeMap = {
24992
- primary: import_react161.css`
25148
+ primary: import_react163.css`
24993
25149
  --progress-color: var(--accent-light);
24994
25150
  `,
24995
- secondary: import_react161.css`
25151
+ secondary: import_react163.css`
24996
25152
  --progress-color: var(--accent-alt-light);
24997
25153
  `,
24998
- destructive: import_react161.css`
25154
+ destructive: import_react163.css`
24999
25155
  --progress-color: var(--brand-secondary-5);
25000
25156
  `
25001
25157
  };
25002
- var slidingBackgroundPosition = import_react161.keyframes`
25158
+ var slidingBackgroundPosition = import_react163.keyframes`
25003
25159
  from {
25004
25160
  background-position: 0 0;
25005
25161
  }
@@ -25007,10 +25163,10 @@ var slidingBackgroundPosition = import_react161.keyframes`
25007
25163
  background-position: 64px 0;
25008
25164
  }
25009
25165
  `;
25010
- var determinate = import_react161.css`
25166
+ var determinate = import_react163.css`
25011
25167
  background-color: var(--progress-color);
25012
25168
  `;
25013
- var indeterminate = import_react161.css`
25169
+ var indeterminate = import_react163.css`
25014
25170
  background-image: linear-gradient(
25015
25171
  45deg,
25016
25172
  var(--progress-color) 25%,
@@ -25024,7 +25180,7 @@ var indeterminate = import_react161.css`
25024
25180
  background-size: 64px 64px;
25025
25181
  animation: ${slidingBackgroundPosition} 1s linear infinite;
25026
25182
  `;
25027
- var bar = import_react161.css`
25183
+ var bar = import_react163.css`
25028
25184
  position: absolute;
25029
25185
  inset: 0;
25030
25186
  transition: transform var(--duration-fast) var(--timing-ease-out);
@@ -25073,22 +25229,22 @@ function ProgressBar({
25073
25229
 
25074
25230
  // src/components/ProgressList/ProgressList.tsx
25075
25231
  init_emotion_jsx_shim();
25076
- var import_react163 = require("@emotion/react");
25232
+ var import_react165 = require("@emotion/react");
25077
25233
  var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
25078
25234
  var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
25079
25235
  var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
25080
- var import_react164 = require("react");
25236
+ var import_react166 = require("react");
25081
25237
 
25082
25238
  // src/components/ProgressList/styles/ProgressList.styles.ts
25083
25239
  init_emotion_jsx_shim();
25084
- var import_react162 = require("@emotion/react");
25085
- var progressListStyles = import_react162.css`
25240
+ var import_react164 = require("@emotion/react");
25241
+ var progressListStyles = import_react164.css`
25086
25242
  display: flex;
25087
25243
  flex-direction: column;
25088
25244
  gap: var(--spacing-sm);
25089
25245
  list-style-type: none;
25090
25246
  `;
25091
- var progressListItemStyles = import_react162.css`
25247
+ var progressListItemStyles = import_react164.css`
25092
25248
  display: flex;
25093
25249
  gap: var(--spacing-base);
25094
25250
  align-items: center;
@@ -25097,7 +25253,7 @@ var progressListItemStyles = import_react162.css`
25097
25253
  // src/components/ProgressList/ProgressList.tsx
25098
25254
  var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
25099
25255
  var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
25100
- const itemsWithStatus = (0, import_react164.useMemo)(() => {
25256
+ const itemsWithStatus = (0, import_react166.useMemo)(() => {
25101
25257
  const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
25102
25258
  return items.map((item, index) => {
25103
25259
  let status = "queued";
@@ -25130,7 +25286,7 @@ var ProgressListItem = ({
25130
25286
  errorLevel = "danger",
25131
25287
  autoEllipsis = false
25132
25288
  }) => {
25133
- const icon = (0, import_react164.useMemo)(() => {
25289
+ const icon = (0, import_react166.useMemo)(() => {
25134
25290
  if (error) {
25135
25291
  return warningIcon;
25136
25292
  }
@@ -25141,14 +25297,14 @@ var ProgressListItem = ({
25141
25297
  };
25142
25298
  return iconPerStatus[status];
25143
25299
  }, [status, error]);
25144
- const statusStyles = (0, import_react164.useMemo)(() => {
25300
+ const statusStyles = (0, import_react166.useMemo)(() => {
25145
25301
  if (error) {
25146
- return errorLevel === "caution" ? import_react163.css`
25302
+ return errorLevel === "caution" ? import_react165.css`
25147
25303
  color: rgb(161, 98, 7);
25148
25304
  & svg {
25149
25305
  color: rgb(250, 204, 21);
25150
25306
  }
25151
- ` : import_react163.css`
25307
+ ` : import_react165.css`
25152
25308
  color: rgb(185, 28, 28);
25153
25309
  & svg {
25154
25310
  color: var(--brand-primary-2);
@@ -25156,13 +25312,13 @@ var ProgressListItem = ({
25156
25312
  `;
25157
25313
  }
25158
25314
  const colorPerStatus = {
25159
- completed: import_react163.css`
25315
+ completed: import_react165.css`
25160
25316
  opacity: 0.75;
25161
25317
  `,
25162
- inProgress: import_react163.css`
25318
+ inProgress: import_react165.css`
25163
25319
  -webkit-text-stroke-width: thin;
25164
25320
  `,
25165
- queued: import_react163.css`
25321
+ queued: import_react165.css`
25166
25322
  opacity: 0.5;
25167
25323
  `
25168
25324
  };
@@ -25179,17 +25335,17 @@ var ProgressListItem = ({
25179
25335
 
25180
25336
  // src/components/SegmentedControl/SegmentedControl.tsx
25181
25337
  init_emotion_jsx_shim();
25182
- var import_react166 = require("@emotion/react");
25338
+ var import_react168 = require("@emotion/react");
25183
25339
  var import_CgCheck6 = require("@react-icons/all-files/cg/CgCheck");
25184
- var import_react167 = require("react");
25340
+ var import_react169 = require("react");
25185
25341
 
25186
25342
  // src/components/SegmentedControl/SegmentedControl.styles.ts
25187
25343
  init_emotion_jsx_shim();
25188
- var import_react165 = require("@emotion/react");
25189
- var segmentedControlRootStyles = import_react165.css`
25344
+ var import_react167 = require("@emotion/react");
25345
+ var segmentedControlRootStyles = import_react167.css`
25190
25346
  position: relative;
25191
25347
  `;
25192
- var segmentedControlScrollIndicatorsStyles = import_react165.css`
25348
+ var segmentedControlScrollIndicatorsStyles = import_react167.css`
25193
25349
  position: absolute;
25194
25350
  inset: 0;
25195
25351
  z-index: 1;
@@ -25217,17 +25373,17 @@ var segmentedControlScrollIndicatorsStyles = import_react165.css`
25217
25373
  background: linear-gradient(to left, var(--background-color) 10%, transparent);
25218
25374
  }
25219
25375
  `;
25220
- var segmentedControlScrollIndicatorStartVisibleStyles = import_react165.css`
25376
+ var segmentedControlScrollIndicatorStartVisibleStyles = import_react167.css`
25221
25377
  &::before {
25222
25378
  opacity: 1;
25223
25379
  }
25224
25380
  `;
25225
- var segmentedControlScrollIndicatorEndVisibleStyles = import_react165.css`
25381
+ var segmentedControlScrollIndicatorEndVisibleStyles = import_react167.css`
25226
25382
  &::after {
25227
25383
  opacity: 1;
25228
25384
  }
25229
25385
  `;
25230
- var segmentedControlWrapperStyles = import_react165.css`
25386
+ var segmentedControlWrapperStyles = import_react167.css`
25231
25387
  overflow-y: auto;
25232
25388
  scroll-behavior: smooth;
25233
25389
  scrollbar-width: none;
@@ -25236,7 +25392,7 @@ var segmentedControlWrapperStyles = import_react165.css`
25236
25392
  height: 0px;
25237
25393
  }
25238
25394
  `;
25239
- var segmentedControlStyles = import_react165.css`
25395
+ var segmentedControlStyles = import_react167.css`
25240
25396
  --segmented-control-rounded-value: var(--rounded-base);
25241
25397
  --segmented-control-border-width: 1px;
25242
25398
  --segmented-control-selected-color: var(--brand-secondary-3);
@@ -25255,14 +25411,14 @@ var segmentedControlStyles = import_react165.css`
25255
25411
  border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
25256
25412
  font-size: var(--fs-xs);
25257
25413
  `;
25258
- var segmentedControlVerticalStyles = import_react165.css`
25414
+ var segmentedControlVerticalStyles = import_react167.css`
25259
25415
  flex-direction: column;
25260
25416
  --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
25261
25417
  var(--segmented-control-rounded-value) 0 0;
25262
25418
  --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
25263
25419
  var(--segmented-control-rounded-value);
25264
25420
  `;
25265
- var segmentedControlItemStyles = import_react165.css`
25421
+ var segmentedControlItemStyles = import_react167.css`
25266
25422
  &:first-of-type label {
25267
25423
  border-radius: var(--segmented-control-first-border-radius);
25268
25424
  }
@@ -25270,10 +25426,10 @@ var segmentedControlItemStyles = import_react165.css`
25270
25426
  border-radius: var(--segmented-control-last-border-radius);
25271
25427
  }
25272
25428
  `;
25273
- var segmentedControlInputStyles = import_react165.css`
25429
+ var segmentedControlInputStyles = import_react167.css`
25274
25430
  ${accessibleHidden}
25275
25431
  `;
25276
- var segmentedControlLabelStyles = (checked, disabled2) => import_react165.css`
25432
+ var segmentedControlLabelStyles = (checked, disabled2) => import_react167.css`
25277
25433
  position: relative;
25278
25434
  display: flex;
25279
25435
  align-items: center;
@@ -25340,20 +25496,20 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react165.css`
25340
25496
  `}
25341
25497
  }
25342
25498
  `;
25343
- var segmentedControlLabelIconOnlyStyles = import_react165.css`
25499
+ var segmentedControlLabelIconOnlyStyles = import_react167.css`
25344
25500
  padding-inline: 0.5em;
25345
25501
  `;
25346
- var segmentedControlLabelCheckStyles = import_react165.css`
25502
+ var segmentedControlLabelCheckStyles = import_react167.css`
25347
25503
  opacity: 0.5;
25348
25504
  `;
25349
- var segmentedControlLabelContentStyles = import_react165.css`
25505
+ var segmentedControlLabelContentStyles = import_react167.css`
25350
25506
  display: flex;
25351
25507
  align-items: center;
25352
25508
  justify-content: center;
25353
25509
  gap: var(--spacing-sm);
25354
25510
  height: 100%;
25355
25511
  `;
25356
- var segmentedControlLabelTextStyles = import_react165.css`
25512
+ var segmentedControlLabelTextStyles = import_react167.css`
25357
25513
  white-space: nowrap;
25358
25514
  `;
25359
25515
 
@@ -25373,10 +25529,10 @@ var SegmentedControl = ({
25373
25529
  currentBackgroundColor = "white",
25374
25530
  ...props
25375
25531
  }) => {
25376
- const wrapperRef = (0, import_react167.useRef)(null);
25377
- const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react167.useState)(false);
25378
- const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react167.useState)(false);
25379
- const onOptionChange = (0, import_react167.useCallback)(
25532
+ const wrapperRef = (0, import_react169.useRef)(null);
25533
+ const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react169.useState)(false);
25534
+ const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react169.useState)(false);
25535
+ const onOptionChange = (0, import_react169.useCallback)(
25380
25536
  (event) => {
25381
25537
  if (event.target.checked) {
25382
25538
  onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -25384,19 +25540,19 @@ var SegmentedControl = ({
25384
25540
  },
25385
25541
  [options, onChange]
25386
25542
  );
25387
- const sizeStyles = (0, import_react167.useMemo)(() => {
25543
+ const sizeStyles = (0, import_react169.useMemo)(() => {
25388
25544
  const map = {
25389
- sm: (0, import_react166.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
25390
- md: (0, import_react166.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
25391
- lg: (0, import_react166.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
25392
- xl: (0, import_react166.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
25545
+ sm: (0, import_react168.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
25546
+ md: (0, import_react168.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
25547
+ lg: (0, import_react168.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
25548
+ xl: (0, import_react168.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
25393
25549
  };
25394
25550
  return map[size];
25395
25551
  }, [size]);
25396
- const isIconOnly = (0, import_react167.useMemo)(() => {
25552
+ const isIconOnly = (0, import_react169.useMemo)(() => {
25397
25553
  return options.every((option) => option && option.icon && !option.label);
25398
25554
  }, [options]);
25399
- (0, import_react167.useEffect)(() => {
25555
+ (0, import_react169.useEffect)(() => {
25400
25556
  const wrapperElement = wrapperRef.current;
25401
25557
  const onScroll = () => {
25402
25558
  if (!wrapperElement) {
@@ -25491,12 +25647,12 @@ init_emotion_jsx_shim();
25491
25647
 
25492
25648
  // src/components/Skeleton/Skeleton.styles.ts
25493
25649
  init_emotion_jsx_shim();
25494
- var import_react168 = require("@emotion/react");
25495
- var lightFadingOut = import_react168.keyframes`
25650
+ var import_react170 = require("@emotion/react");
25651
+ var lightFadingOut = import_react170.keyframes`
25496
25652
  from { opacity: 0.1; }
25497
25653
  to { opacity: 0.025; }
25498
25654
  `;
25499
- var skeletonStyles = import_react168.css`
25655
+ var skeletonStyles = import_react170.css`
25500
25656
  animation: ${lightFadingOut} 1s ease-out infinite alternate;
25501
25657
  background-color: var(--gray-900);
25502
25658
  `;
@@ -25531,12 +25687,12 @@ var Skeleton = ({
25531
25687
 
25532
25688
  // src/components/Switch/Switch.tsx
25533
25689
  init_emotion_jsx_shim();
25534
- var import_react170 = require("react");
25690
+ var import_react172 = require("react");
25535
25691
 
25536
25692
  // src/components/Switch/Switch.styles.ts
25537
25693
  init_emotion_jsx_shim();
25538
- var import_react169 = require("@emotion/react");
25539
- var SwitchInputContainer = import_react169.css`
25694
+ var import_react171 = require("@emotion/react");
25695
+ var SwitchInputContainer = import_react171.css`
25540
25696
  cursor: pointer;
25541
25697
  display: inline-block;
25542
25698
  position: relative;
@@ -25545,7 +25701,7 @@ var SwitchInputContainer = import_react169.css`
25545
25701
  vertical-align: middle;
25546
25702
  user-select: none;
25547
25703
  `;
25548
- var SwitchInput = (size) => import_react169.css`
25704
+ var SwitchInput = (size) => import_react171.css`
25549
25705
  appearance: none;
25550
25706
  border-radius: var(--rounded-full);
25551
25707
  background-color: var(--white);
@@ -25585,7 +25741,7 @@ var SwitchInput = (size) => import_react169.css`
25585
25741
  cursor: not-allowed;
25586
25742
  }
25587
25743
  `;
25588
- var SwitchInputDisabled = import_react169.css`
25744
+ var SwitchInputDisabled = import_react171.css`
25589
25745
  opacity: var(--opacity-50);
25590
25746
  cursor: not-allowed;
25591
25747
 
@@ -25593,7 +25749,7 @@ var SwitchInputDisabled = import_react169.css`
25593
25749
  cursor: not-allowed;
25594
25750
  }
25595
25751
  `;
25596
- var SwitchInputLabel = (size) => import_react169.css`
25752
+ var SwitchInputLabel = (size) => import_react171.css`
25597
25753
  align-items: center;
25598
25754
  color: var(--typography-base);
25599
25755
  display: inline-flex;
@@ -25615,7 +25771,7 @@ var SwitchInputLabel = (size) => import_react169.css`
25615
25771
  top: 0;
25616
25772
  }
25617
25773
  `;
25618
- var SwitchText = (size) => import_react169.css`
25774
+ var SwitchText = (size) => import_react171.css`
25619
25775
  color: var(--gray-500);
25620
25776
  font-size: var(--fs-sm);
25621
25777
  padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
@@ -25623,7 +25779,7 @@ var SwitchText = (size) => import_react169.css`
25623
25779
 
25624
25780
  // src/components/Switch/Switch.tsx
25625
25781
  var import_jsx_runtime141 = require("@emotion/react/jsx-runtime");
25626
- var Switch = (0, import_react170.forwardRef)(
25782
+ var Switch = (0, import_react172.forwardRef)(
25627
25783
  ({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
25628
25784
  let additionalText = infoText;
25629
25785
  if (infoText && toggleText) {
@@ -25648,12 +25804,12 @@ var Switch = (0, import_react170.forwardRef)(
25648
25804
 
25649
25805
  // src/components/Table/Table.tsx
25650
25806
  init_emotion_jsx_shim();
25651
- var React25 = __toESM(require("react"));
25807
+ var React24 = __toESM(require("react"));
25652
25808
 
25653
25809
  // src/components/Table/Table.styles.ts
25654
25810
  init_emotion_jsx_shim();
25655
- var import_react171 = require("@emotion/react");
25656
- var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react171.css`
25811
+ var import_react173 = require("@emotion/react");
25812
+ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react173.css`
25657
25813
  border-bottom: 1px solid var(--gray-400);
25658
25814
  border-collapse: collapse;
25659
25815
  min-width: 100%;
@@ -25673,14 +25829,14 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_
25673
25829
  background-color: var(--gray-50);
25674
25830
  }
25675
25831
  `;
25676
- var tableHead = import_react171.css`
25832
+ var tableHead = import_react173.css`
25677
25833
  color: var(--typography-base);
25678
25834
  text-align: left;
25679
25835
  `;
25680
- var tableRow = import_react171.css`
25836
+ var tableRow = import_react173.css`
25681
25837
  border-bottom: 1px solid var(--gray-100);
25682
25838
  `;
25683
- var tableCellHead = import_react171.css`
25839
+ var tableCellHead = import_react173.css`
25684
25840
  font-size: var(--fs-sm);
25685
25841
  text-transform: uppercase;
25686
25842
  font-weight: var(--fw-bold);
@@ -25688,37 +25844,37 @@ var tableCellHead = import_react171.css`
25688
25844
 
25689
25845
  // src/components/Table/Table.tsx
25690
25846
  var import_jsx_runtime142 = require("@emotion/react/jsx-runtime");
25691
- var Table = React25.forwardRef(
25847
+ var Table = React24.forwardRef(
25692
25848
  ({ children, cellPadding, ...otherProps }, ref) => {
25693
25849
  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
25694
25850
  }
25695
25851
  );
25696
- var TableHead = React25.forwardRef(
25852
+ var TableHead = React24.forwardRef(
25697
25853
  ({ children, ...otherProps }, ref) => {
25698
25854
  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
25699
25855
  }
25700
25856
  );
25701
- var TableBody = React25.forwardRef(
25857
+ var TableBody = React24.forwardRef(
25702
25858
  ({ children, ...otherProps }, ref) => {
25703
25859
  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("tbody", { ref, ...otherProps, children });
25704
25860
  }
25705
25861
  );
25706
- var TableFoot = React25.forwardRef(
25862
+ var TableFoot = React24.forwardRef(
25707
25863
  ({ children, ...otherProps }, ref) => {
25708
25864
  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("tfoot", { ref, ...otherProps, children });
25709
25865
  }
25710
25866
  );
25711
- var TableRow = React25.forwardRef(
25867
+ var TableRow = React24.forwardRef(
25712
25868
  ({ children, ...otherProps }, ref) => {
25713
25869
  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
25714
25870
  }
25715
25871
  );
25716
- var TableCellHead = React25.forwardRef(
25872
+ var TableCellHead = React24.forwardRef(
25717
25873
  ({ children, ...otherProps }, ref) => {
25718
25874
  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
25719
25875
  }
25720
25876
  );
25721
- var TableCellData = React25.forwardRef(
25877
+ var TableCellData = React24.forwardRef(
25722
25878
  ({ children, ...otherProps }, ref) => {
25723
25879
  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("td", { ref, ...otherProps, children });
25724
25880
  }
@@ -25726,13 +25882,13 @@ var TableCellData = React25.forwardRef(
25726
25882
 
25727
25883
  // src/components/Tabs/Tabs.tsx
25728
25884
  init_emotion_jsx_shim();
25729
- var import_react173 = require("@ariakit/react");
25730
- var import_react174 = require("react");
25885
+ var import_react175 = require("@ariakit/react");
25886
+ var import_react176 = require("react");
25731
25887
 
25732
25888
  // src/components/Tabs/Tabs.styles.ts
25733
25889
  init_emotion_jsx_shim();
25734
- var import_react172 = require("@emotion/react");
25735
- var tabButtonStyles = import_react172.css`
25890
+ var import_react174 = require("@emotion/react");
25891
+ var tabButtonStyles = import_react174.css`
25736
25892
  align-items: center;
25737
25893
  border: 0;
25738
25894
  height: 2.5rem;
@@ -25749,7 +25905,7 @@ var tabButtonStyles = import_react172.css`
25749
25905
  box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
25750
25906
  }
25751
25907
  `;
25752
- var tabButtonGroupStyles = import_react172.css`
25908
+ var tabButtonGroupStyles = import_react174.css`
25753
25909
  display: flex;
25754
25910
  gap: var(--spacing-base);
25755
25911
  border-bottom: 1px solid var(--gray-300);
@@ -25758,7 +25914,7 @@ var tabButtonGroupStyles = import_react172.css`
25758
25914
  // src/components/Tabs/Tabs.tsx
25759
25915
  var import_jsx_runtime143 = require("@emotion/react/jsx-runtime");
25760
25916
  var useCurrentTab = () => {
25761
- const context = (0, import_react173.useTabStore)();
25917
+ const context = (0, import_react175.useTabStore)();
25762
25918
  if (!context) {
25763
25919
  throw new Error("This component can only be used inside <Tabs>");
25764
25920
  }
@@ -25772,12 +25928,12 @@ var Tabs = ({
25772
25928
  manual,
25773
25929
  ...props
25774
25930
  }) => {
25775
- const selected = (0, import_react174.useMemo)(() => {
25931
+ const selected = (0, import_react176.useMemo)(() => {
25776
25932
  if (selectedId) return selectedId;
25777
25933
  return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
25778
25934
  }, [selectedId, useHashForState]);
25779
- const tab = (0, import_react173.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
25780
- const onTabSelect = (0, import_react174.useCallback)(
25935
+ const tab = (0, import_react175.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
25936
+ const onTabSelect = (0, import_react176.useCallback)(
25781
25937
  (value) => {
25782
25938
  const selectedValueWithoutNull = value != null ? value : void 0;
25783
25939
  onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -25788,28 +25944,28 @@ var Tabs = ({
25788
25944
  },
25789
25945
  [onSelectedIdChange, useHashForState]
25790
25946
  );
25791
- (0, import_react174.useEffect)(() => {
25947
+ (0, import_react176.useEffect)(() => {
25792
25948
  if (selected && selected !== tab.getState().activeId) {
25793
25949
  tab.setSelectedId(selected);
25794
25950
  }
25795
25951
  }, [selected, tab]);
25796
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react173.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
25952
+ return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react175.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
25797
25953
  };
25798
25954
  var TabButtonGroup = ({ children, ...props }) => {
25799
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react173.TabList, { ...props, css: tabButtonGroupStyles, children });
25955
+ return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react175.TabList, { ...props, css: tabButtonGroupStyles, children });
25800
25956
  };
25801
25957
  var TabButton = ({
25802
25958
  children,
25803
25959
  id,
25804
25960
  ...props
25805
25961
  }) => {
25806
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react173.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
25962
+ return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react175.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
25807
25963
  };
25808
25964
  var TabContent = ({
25809
25965
  children,
25810
25966
  ...props
25811
25967
  }) => {
25812
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react173.TabPanel, { ...props, children });
25968
+ return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react175.TabPanel, { ...props, children });
25813
25969
  };
25814
25970
 
25815
25971
  // src/components/Validation/StatusBullet.tsx
@@ -25817,8 +25973,8 @@ init_emotion_jsx_shim();
25817
25973
 
25818
25974
  // src/components/Validation/StatusBullet.styles.ts
25819
25975
  init_emotion_jsx_shim();
25820
- var import_react175 = require("@emotion/react");
25821
- var StatusBulletContainer = import_react175.css`
25976
+ var import_react177 = require("@emotion/react");
25977
+ var StatusBulletContainer = import_react177.css`
25822
25978
  align-items: center;
25823
25979
  align-self: center;
25824
25980
  color: var(--gray-500);
@@ -25835,33 +25991,33 @@ var StatusBulletContainer = import_react175.css`
25835
25991
  display: block;
25836
25992
  }
25837
25993
  `;
25838
- var StatusBulletBase = import_react175.css`
25994
+ var StatusBulletBase = import_react177.css`
25839
25995
  font-size: var(--fs-sm);
25840
25996
  &:before {
25841
25997
  width: var(--fs-xs);
25842
25998
  height: var(--fs-xs);
25843
25999
  }
25844
26000
  `;
25845
- var StatusBulletSmall = import_react175.css`
26001
+ var StatusBulletSmall = import_react177.css`
25846
26002
  font-size: var(--fs-xs);
25847
26003
  &:before {
25848
26004
  width: var(--fs-xxs);
25849
26005
  height: var(--fs-xxs);
25850
26006
  }
25851
26007
  `;
25852
- var StatusDraft = import_react175.css`
26008
+ var StatusDraft = import_react177.css`
25853
26009
  &:before {
25854
26010
  background: var(--white);
25855
26011
  box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
25856
26012
  }
25857
26013
  `;
25858
- var StatusModified = import_react175.css`
26014
+ var StatusModified = import_react177.css`
25859
26015
  &:before {
25860
26016
  background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
25861
26017
  box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
25862
26018
  }
25863
26019
  `;
25864
- var StatusError = import_react175.css`
26020
+ var StatusError = import_react177.css`
25865
26021
  color: var(--error);
25866
26022
  &:before {
25867
26023
  /* TODO: replace this with an svg icon */
@@ -25874,22 +26030,22 @@ var StatusError = import_react175.css`
25874
26030
  );
25875
26031
  }
25876
26032
  `;
25877
- var StatusPublished = import_react175.css`
26033
+ var StatusPublished = import_react177.css`
25878
26034
  &:before {
25879
26035
  background: var(--accent-dark);
25880
26036
  }
25881
26037
  `;
25882
- var StatusOrphan = import_react175.css`
26038
+ var StatusOrphan = import_react177.css`
25883
26039
  &:before {
25884
26040
  background: var(--brand-secondary-5);
25885
26041
  }
25886
26042
  `;
25887
- var StatusUnknown = import_react175.css`
26043
+ var StatusUnknown = import_react177.css`
25888
26044
  &:before {
25889
26045
  background: var(--gray-800);
25890
26046
  }
25891
26047
  `;
25892
- var StatusDeleted = import_react175.css`
26048
+ var StatusDeleted = import_react177.css`
25893
26049
  &:before {
25894
26050
  background: var(--error);
25895
26051
  }