@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/esm/index.js CHANGED
@@ -50,6 +50,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
50
50
  --purple-rain-600: #6340a9;
51
51
 
52
52
  /* raspberry spectrum*/
53
+ --raspberry-beret-50: #fefafc;
53
54
  --raspberry-beret-100: #ffbee1;
54
55
  --raspberry-beret-200: #ff94ce;
55
56
  --raspberry-beret-300: #ff6aba;
@@ -11824,6 +11825,9 @@ var avatarImageStyles = css19`
11824
11825
  height: 100%;
11825
11826
  object-fit: cover;
11826
11827
  `;
11828
+ var avatarSize2xsStyles = css19`
11829
+ width: 1rem;
11830
+ `;
11827
11831
  var avatarSizeXsStyles = css19`
11828
11832
  width: 1.5rem;
11829
11833
  `;
@@ -11837,20 +11841,26 @@ var avatarSizeLgStyles = css19`
11837
11841
  width: 3rem;
11838
11842
  `;
11839
11843
  var avatarSizeXlStyles = css19`
11840
- width: 3.5rem;
11844
+ width: 4rem;
11845
+ `;
11846
+ var avatarSize2xlStyles = css19`
11847
+ width: 5rem;
11841
11848
  `;
11842
11849
 
11843
11850
  // src/components/Avatar/Avatar.tsx
11844
11851
  import { jsx as jsx20, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
11845
11852
  var avatarSizeStylesMap = {
11853
+ "2xs": avatarSize2xsStyles,
11846
11854
  xs: avatarSizeXsStyles,
11847
11855
  sm: avatarSizeSmStyles,
11848
11856
  md: avatarSizeMdStyles,
11849
11857
  lg: avatarSizeLgStyles,
11850
- xl: avatarSizeXlStyles
11858
+ xl: avatarSizeXlStyles,
11859
+ "2xl": avatarSize2xlStyles
11851
11860
  };
11852
- var Avatar = ({ src, label = "", children, size = "md", ...props }) => {
11853
- return /* @__PURE__ */ jsx20(Tooltip, { title: label, children: /* @__PURE__ */ jsxs8("div", { css: [avatarStyles, avatarSizeStylesMap[size]], ...props, children: [
11861
+ var Avatar = ({ src, label = "", children, size = "md", as = "div", ...props }) => {
11862
+ const Element = as;
11863
+ return /* @__PURE__ */ jsx20(Tooltip, { title: label, children: /* @__PURE__ */ jsxs8(Element, { css: [avatarStyles, avatarSizeStylesMap[size]], ...props, children: [
11854
11864
  !src ? null : /* @__PURE__ */ jsx20("img", { role: "presentation", src, css: avatarImageStyles }),
11855
11865
  children
11856
11866
  ] }) });
@@ -12274,7 +12284,6 @@ var UniformLogoLarge = ({ ...props }) => {
12274
12284
 
12275
12285
  // src/components/ButtonWithMenu/ButtonWithMenu.tsx
12276
12286
  import { CgChevronDown as CgChevronDown3 } from "@react-icons/all-files/cg/CgChevronDown";
12277
- import * as React13 from "react";
12278
12287
 
12279
12288
  // src/components/Menu/DropdownStyleMenuTrigger.tsx
12280
12289
  import { css as css24 } from "@emotion/react";
@@ -12358,7 +12367,7 @@ var menuItem = (textTheme, forceActive) => css26`
12358
12367
  align-items: center;
12359
12368
  border-radius: var(--rounded-base);
12360
12369
  background: none;
12361
- color: ${textTheme === "base" ? "var(--typography-base)" : "var(--brand-secondary-5)"};
12370
+ color: ${textTheme === "base" ? "var(--typography-base)" : textTheme === "accent-alt" ? "var(--accent-alt-dark)" : "var(--brand-secondary-5)"};
12362
12371
  display: flex;
12363
12372
  padding: var(--spacing-3);
12364
12373
  font-weight: var(--fw-regular);
@@ -14117,7 +14126,6 @@ var ButtonWithMenu = ({
14117
14126
  }) => {
14118
14127
  const onButtonClickHandler = onButtonClick != null ? onButtonClick : shortcut == null ? void 0 : shortcut.handler;
14119
14128
  const disabledValue = disabled2 != null ? disabled2 : shortcut == null ? void 0 : shortcut.disabled;
14120
- const menuRef = React13.useRef(null);
14121
14129
  if (typeof withoutPortal !== "undefined" && typeof portal === "undefined") {
14122
14130
  portal = !withoutPortal;
14123
14131
  }
@@ -14161,7 +14169,6 @@ var ButtonWithMenu = ({
14161
14169
  disabledValue ? menuButton2 : /* @__PURE__ */ jsx52(
14162
14170
  Menu,
14163
14171
  {
14164
- ref: menuRef,
14165
14172
  menuLabel: "buttonMenu",
14166
14173
  placement,
14167
14174
  menuTrigger: menuButton2,
@@ -14445,7 +14452,7 @@ var Heading2 = ({
14445
14452
 
14446
14453
  // src/components/Typography/Link.tsx
14447
14454
  import { CgExternal } from "@react-icons/all-files/cg/CgExternal";
14448
- import * as React14 from "react";
14455
+ import * as React13 from "react";
14449
14456
 
14450
14457
  // src/components/Typography/styles/Link.styles.ts
14451
14458
  import { css as css42 } from "@emotion/react";
@@ -14470,7 +14477,7 @@ var linkColorCurrent = css42`
14470
14477
 
14471
14478
  // src/components/Typography/Link.tsx
14472
14479
  import { jsx as jsx55, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
14473
- var Link = React14.forwardRef(
14480
+ var Link = React13.forwardRef(
14474
14481
  ({ external, text, linkColor = "default", children, ...props }, ref) => {
14475
14482
  const textColor = {
14476
14483
  currentColor: linkColorCurrent,
@@ -14488,7 +14495,7 @@ var Link = React14.forwardRef(
14488
14495
  ] });
14489
14496
  }
14490
14497
  );
14491
- var LinkWithRef = React14.forwardRef(({ linkManagerComponent: LinkManager, href, as, onClick, ...props }, ref) => /* @__PURE__ */ jsx55(LinkManager, { ...props, as, href, ref, passHref: true, legacyBehavior: true, children: /* @__PURE__ */ jsx55(Link, { ...props, onClick }) }));
14498
+ var LinkWithRef = React13.forwardRef(({ linkManagerComponent: LinkManager, href, as, onClick, ...props }, ref) => /* @__PURE__ */ jsx55(LinkManager, { ...props, as, href, ref, passHref: true, legacyBehavior: true, children: /* @__PURE__ */ jsx55(Link, { ...props, onClick }) }));
14492
14499
 
14493
14500
  // src/components/Typography/styles/Paragraph.styles.ts
14494
14501
  import { css as css43 } from "@emotion/react";
@@ -15835,7 +15842,7 @@ var DateTimePicker = ({
15835
15842
  // src/components/DescriptionList/DescriptionList.tsx
15836
15843
  import { TbCheck } from "@react-icons/all-files/tb/TbCheck";
15837
15844
  import { TbMinus } from "@react-icons/all-files/tb/TbMinus";
15838
- import React15 from "react";
15845
+ import React14 from "react";
15839
15846
 
15840
15847
  // src/components/DescriptionList/DescriptionList.styles.ts
15841
15848
  import { css as css55 } from "@emotion/react";
@@ -15862,7 +15869,7 @@ var descriptionListValueStyles = css55`
15862
15869
 
15863
15870
  // src/components/DescriptionList/DescriptionList.tsx
15864
15871
  import { jsx as jsx68, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
15865
- var DescriptionList = React15.forwardRef(
15872
+ var DescriptionList = React14.forwardRef(
15866
15873
  ({ items, variant = "horizontal", ...listProps }, ref) => {
15867
15874
  if (!(items == null ? void 0 : items.length)) {
15868
15875
  return null;
@@ -15873,7 +15880,7 @@ var DescriptionList = React15.forwardRef(
15873
15880
  ref,
15874
15881
  css: variant === "vertical" ? descriptionListVertical : descriptionListHorizontal,
15875
15882
  ...listProps,
15876
- children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ jsxs42(React15.Fragment, { children: [
15883
+ children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ jsxs42(React14.Fragment, { children: [
15877
15884
  /* @__PURE__ */ jsx68("dt", { css: descriptionListLabelStyles, children: label }),
15878
15885
  /* @__PURE__ */ jsx68("dd", { css: descriptionListValueStyles, children: typeof value === "boolean" ? /* @__PURE__ */ jsx68(DescriptionListValueBoolean, { value }) : value })
15879
15886
  ] }, label))
@@ -15889,7 +15896,7 @@ var DescriptionListValueBoolean = ({ value }) => {
15889
15896
  };
15890
15897
 
15891
15898
  // src/components/Details/Details.tsx
15892
- import * as React16 from "react";
15899
+ import * as React15 from "react";
15893
15900
 
15894
15901
  // src/components/Details/Details.styles.ts
15895
15902
  import { css as css56 } from "@emotion/react";
@@ -15955,9 +15962,9 @@ var Details = ({
15955
15962
  onChange,
15956
15963
  ...props
15957
15964
  }) => {
15958
- const detailsRef = React16.useRef(null);
15959
- const [internalOpen, setInternalOpen] = React16.useState(isOpenByDefault);
15960
- const memoizedIsOpen = React16.useMemo(() => {
15965
+ const detailsRef = React15.useRef(null);
15966
+ const [internalOpen, setInternalOpen] = React15.useState(isOpenByDefault);
15967
+ const memoizedIsOpen = React15.useMemo(() => {
15961
15968
  return isOpen !== void 0 ? isOpen : internalOpen;
15962
15969
  }, [internalOpen, isOpen]);
15963
15970
  return /* @__PURE__ */ jsxs43(
@@ -16048,7 +16055,7 @@ var DragHandle = forwardRef14(
16048
16055
 
16049
16056
  // src/components/Drawer/Drawer.tsx
16050
16057
  import { CgChevronRight } from "@react-icons/all-files/cg/CgChevronRight";
16051
- import React18, { createContext as createContext4, useContext as useContext5, useEffect as useEffect6, useRef as useRef6, useState as useState9 } from "react";
16058
+ import React17, { createContext as createContext4, useContext as useContext5, useEffect as useEffect6, useRef as useRef5, useState as useState9 } from "react";
16052
16059
  import { createPortal } from "react-dom";
16053
16060
 
16054
16061
  // src/components/Drawer/Drawer.styles.ts
@@ -16159,7 +16166,7 @@ var drawerWrapperOverlayStyles = css58`
16159
16166
  `;
16160
16167
 
16161
16168
  // src/components/Drawer/DrawerProvider.tsx
16162
- import { createContext as createContext3, useCallback as useCallback5, useContext as useContext4, useRef as useRef5, useState as useState8 } from "react";
16169
+ import { createContext as createContext3, useCallback as useCallback5, useContext as useContext4, useRef as useRef4, useState as useState8 } from "react";
16163
16170
  import { jsx as jsx71 } from "@emotion/react/jsx-runtime";
16164
16171
  var DrawerContext = createContext3({
16165
16172
  providerId: "",
@@ -16178,7 +16185,7 @@ function renderDrawerId(drawer) {
16178
16185
  }
16179
16186
  var DrawerProvider = ({ children }) => {
16180
16187
  const [drawersRegistry, setDrawersRegistry] = useState8([]);
16181
- const providerId = useRef5(crypto.randomUUID());
16188
+ const providerId = useRef4(crypto.randomUUID());
16182
16189
  const [drawerTakeoverStackId, setDrawerTakeoverStackId] = useState8(void 0);
16183
16190
  useShortcut({
16184
16191
  handler: () => {
@@ -16293,13 +16300,13 @@ var CurrentDrawerContext = createContext4({});
16293
16300
  var useCurrentDrawer = () => {
16294
16301
  return useContext5(CurrentDrawerContext);
16295
16302
  };
16296
- var Drawer = React18.forwardRef(
16303
+ var Drawer = React17.forwardRef(
16297
16304
  ({ minWidth, maxWidth, position, leftAligned, ...drawerProps }, ref) => {
16298
16305
  var _a;
16299
16306
  const { stackId: inheritedStackId } = useCurrentDrawer();
16300
16307
  const { drawerTakeoverStackId } = useDrawer();
16301
16308
  const drawerRendererProps = { width: drawerProps.width, minWidth, maxWidth, position, leftAligned };
16302
- const resolvedStickyStackIdRef = useRef6((_a = drawerTakeoverStackId != null ? drawerTakeoverStackId : drawerProps.stackId) != null ? _a : inheritedStackId);
16309
+ const resolvedStickyStackIdRef = useRef5((_a = drawerTakeoverStackId != null ? drawerTakeoverStackId : drawerProps.stackId) != null ? _a : inheritedStackId);
16303
16310
  return resolvedStickyStackIdRef.current ? /* @__PURE__ */ jsx72(DrawerInner, { ref, ...drawerProps, stackId: resolvedStickyStackIdRef.current }) : /* @__PURE__ */ jsxs44(DrawerProvider, { children: [
16304
16311
  /* @__PURE__ */ jsx72(DrawerInner, { ref, ...drawerProps }),
16305
16312
  /* @__PURE__ */ jsx72(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
@@ -16320,7 +16327,7 @@ var DrawerInner = ({
16320
16327
  testId = "side-dialog"
16321
16328
  }) => {
16322
16329
  const { registerDrawer, unregisterDrawer, providerId } = useDrawer();
16323
- const closeButtonRef = useRef6(null);
16330
+ const closeButtonRef = useRef5(null);
16324
16331
  const [rendererElement, setRendererElement] = useState9(null);
16325
16332
  useEffect6(() => {
16326
16333
  registerDrawer({
@@ -16412,6 +16419,7 @@ var DrawerContentInner = css59`
16412
16419
  height: 100%;
16413
16420
  overflow-y: auto;
16414
16421
  ${scrollbarStyles}
16422
+ border-radius: var(--rounded-base);
16415
16423
  `;
16416
16424
  var DrawerContentBtnGroup = css59`
16417
16425
  display: flex;
@@ -17527,15 +17535,15 @@ import {
17527
17535
  verticalListSortingStrategy
17528
17536
  } from "@dnd-kit/sortable";
17529
17537
  import { CSS } from "@dnd-kit/utilities";
17530
- import { useCallback as useCallback7, useEffect as useEffect12, useMemo as useMemo5, useRef as useRef8, useState as useState12 } from "react";
17538
+ import { useCallback as useCallback7, useEffect as useEffect12, useMemo as useMemo5, useRef as useRef7, useState as useState12 } from "react";
17531
17539
 
17532
17540
  // src/utils/useDebouncedCallback.ts
17533
- import { useEffect as useEffect11, useMemo as useMemo4, useRef as useRef7 } from "react";
17541
+ import { useEffect as useEffect11, useMemo as useMemo4, useRef as useRef6 } from "react";
17534
17542
  function useDebouncedCallback(callback, deps, delay, maxWait = 0) {
17535
- const timeout = useRef7();
17536
- const waitTimeout = useRef7();
17537
- const cb = useRef7(callback);
17538
- const lastCall = useRef7();
17543
+ const timeout = useRef6();
17544
+ const waitTimeout = useRef6();
17545
+ const cb = useRef6(callback);
17546
+ const lastCall = useRef6();
17539
17547
  const clear = () => {
17540
17548
  if (timeout.current) {
17541
17549
  clearTimeout(timeout.current);
@@ -17617,8 +17625,8 @@ var KeyValueInput = ({
17617
17625
  onFocusChange
17618
17626
  }) => {
17619
17627
  const [isDragging, setIsDragging] = useState12(false);
17620
- const popoverStoresMap = useRef8({});
17621
- const lastRowFirstInputRef = useRef8(null);
17628
+ const popoverStoresMap = useRef7({});
17629
+ const lastRowFirstInputRef = useRef7(null);
17622
17630
  const sensors = useSensors(
17623
17631
  useSensor(PointerSensor),
17624
17632
  useSensor(KeyboardSensor, {
@@ -18173,10 +18181,10 @@ var loader = css77`
18173
18181
  display: inline-flex;
18174
18182
  justify-content: center;
18175
18183
  `;
18176
- function loadingDot(size) {
18184
+ function loadingDot(size, backgroundColor) {
18177
18185
  const dotSize = size === "lg" ? 8 : 4;
18178
18186
  return css77`
18179
- background-color: var(--gray-700);
18187
+ background-color: ${backgroundColor};
18180
18188
  display: block;
18181
18189
  border-radius: var(--rounded-full);
18182
18190
  animation: ${bounceFade(size)} 0.75s infinite ease-in-out;
@@ -18201,11 +18209,13 @@ function loadingDot(size) {
18201
18209
 
18202
18210
  // src/components/LoadingIndicator/LoadingIndicator.tsx
18203
18211
  import { jsx as jsx98, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
18204
- var LoadingIndicator = ({
18205
- size = "lg",
18206
- ...props
18207
- }) => {
18208
- const dotStyle = loadingDot(size);
18212
+ var cssColorMap = {
18213
+ gray: "var(--gray-700)",
18214
+ "accent-alt": "var(--accent-alt-dark)"
18215
+ };
18216
+ var LoadingIndicator = ({ size = "lg", color = "gray", ...props }) => {
18217
+ const cssColor = cssColorMap[color];
18218
+ const dotStyle = loadingDot(size, cssColor);
18209
18219
  return /* @__PURE__ */ jsxs63("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
18210
18220
  /* @__PURE__ */ jsx98("span", { css: dotStyle }),
18211
18221
  /* @__PURE__ */ jsx98("span", { css: dotStyle }),
@@ -18214,7 +18224,7 @@ var LoadingIndicator = ({
18214
18224
  };
18215
18225
 
18216
18226
  // src/components/LoadingOverlay/LoadingOverlay.tsx
18217
- import { useCallback as useCallback8, useEffect as useEffect13, useRef as useRef9 } from "react";
18227
+ import { useCallback as useCallback8, useEffect as useEffect13, useRef as useRef8 } from "react";
18218
18228
 
18219
18229
  // src/components/LoadingOverlay/LoadingOverlay.styles.ts
18220
18230
  import { css as css78 } from "@emotion/react";
@@ -18260,7 +18270,7 @@ var LoadingOverlay = ({
18260
18270
  children,
18261
18271
  position = "absolute"
18262
18272
  }) => {
18263
- const lottieRef = useRef9(null);
18273
+ const lottieRef = useRef8(null);
18264
18274
  const onLoopComplete = useCallback8(() => {
18265
18275
  var _a, _b, _c;
18266
18276
  if (isPaused && !((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
@@ -18552,7 +18562,7 @@ var MediaCard = ({
18552
18562
  // src/components/Modal/Modal.tsx
18553
18563
  import { PortalContext } from "@ariakit/react";
18554
18564
  import { CgClose as CgClose4 } from "@react-icons/all-files/cg/CgClose";
18555
- import React21, { useEffect as useEffect15, useRef as useRef10 } from "react";
18565
+ import React20, { useEffect as useEffect15, useRef as useRef9 } from "react";
18556
18566
 
18557
18567
  // src/components/Modal/Modal.styles.ts
18558
18568
  import { css as css80 } from "@emotion/react";
@@ -18641,7 +18651,7 @@ var modalDialogInnerStyles = css80`
18641
18651
  import { jsx as jsx102, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
18642
18652
  var defaultModalWidth = "75rem";
18643
18653
  var defaultModalHeight = "51rem";
18644
- var Modal = React21.forwardRef(
18654
+ var Modal = React20.forwardRef(
18645
18655
  ({
18646
18656
  header: header2,
18647
18657
  children,
@@ -18654,7 +18664,7 @@ var Modal = React21.forwardRef(
18654
18664
  withoutContentBackground = false,
18655
18665
  ...modalProps
18656
18666
  }, ref) => {
18657
- const dialogRef = useRef10(null);
18667
+ const dialogRef = useRef9(null);
18658
18668
  const size = {
18659
18669
  sm: modalSizeSmall,
18660
18670
  md: modalSizeMedium,
@@ -18971,7 +18981,7 @@ var ObjectGridItemCoverButton = ({
18971
18981
  };
18972
18982
 
18973
18983
  // src/components/Objects/ObjectGridItemHeading.tsx
18974
- import { useEffect as useEffect16, useRef as useRef11, useState as useState13 } from "react";
18984
+ import { useEffect as useEffect16, useRef as useRef10, useState as useState13 } from "react";
18975
18985
 
18976
18986
  // src/components/Objects/styles/ObjectGridItemHeading.styles.ts
18977
18987
  import { css as css84 } from "@emotion/react";
@@ -18995,7 +19005,7 @@ var ObjectGridItemHeading2 = ({
18995
19005
  afterHeadingSlot
18996
19006
  }) => {
18997
19007
  const [hasTruncation, setHasTruncation] = useState13(false);
18998
- const headingRef = useRef11(null);
19008
+ const headingRef = useRef10(null);
18999
19009
  useEffect16(() => {
19000
19010
  const currentHeading = headingRef.current;
19001
19011
  const observer = new ResizeObserver((entries) => {
@@ -20395,7 +20405,7 @@ import {
20395
20405
  UNORDERED_LIST
20396
20406
  } from "@lexical/markdown";
20397
20407
  import { LexicalComposer } from "@lexical/react/LexicalComposer";
20398
- import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
20408
+ import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexical/react/LexicalComposerContext";
20399
20409
  import { ContentEditable } from "@lexical/react/LexicalContentEditable";
20400
20410
  import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
20401
20411
  import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
@@ -20407,6 +20417,12 @@ import { HeadingNode, QuoteNode } from "@lexical/rich-text";
20407
20417
  import { TableCellNode as TableCellNode3, TableNode, TableRowNode as TableRowNode2 } from "@lexical/table";
20408
20418
 
20409
20419
  // ../richtext/dist/index.mjs
20420
+ function isRichTextNode(node) {
20421
+ return !!node && typeof node === "object" && "type" in node;
20422
+ }
20423
+ function isRichTextNodeType(node, type) {
20424
+ return isRichTextNode(node) && node.type === type;
20425
+ }
20410
20426
  var richTextBuiltInElements = [
20411
20427
  {
20412
20428
  label: "Heading 1",
@@ -20456,6 +20472,10 @@ var richTextBuiltInElements = [
20456
20472
  label: "Table",
20457
20473
  type: "table"
20458
20474
  },
20475
+ {
20476
+ label: "Asset",
20477
+ type: "asset"
20478
+ },
20459
20479
  {
20460
20480
  label: "Dynamic Token",
20461
20481
  type: "variable"
@@ -20503,7 +20523,7 @@ var getLabelForElement = (type) => {
20503
20523
  // src/components/ParameterInputs/ParameterRichText.tsx
20504
20524
  import { deepEqual as deepEqual2 } from "fast-equals";
20505
20525
  import { ParagraphNode as ParagraphNode2 } from "lexical";
20506
- import { useEffect as useEffect24, useState as useState21 } from "react";
20526
+ import { useEffect as useEffect25, useState as useState21 } from "react";
20507
20527
 
20508
20528
  // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
20509
20529
  import { CodeNode } from "@lexical/code";
@@ -20782,11 +20802,70 @@ var tableHeaderElement = css96`
20782
20802
  width: 7rem;
20783
20803
  `;
20784
20804
 
20805
+ // src/components/ParameterInputs/rich-text/ImprovedAssetSelectionPlugin.tsx
20806
+ import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
20807
+ import { $insertFirst } from "@lexical/utils";
20808
+ import { $createParagraphNode, $getRoot, $insertNodes } from "lexical";
20809
+ import { useEffect as useEffect18 } from "react";
20810
+ var ImprovedAssetSelectionPlugin = () => {
20811
+ const [editor] = useLexicalComposerContext2();
20812
+ useEffect18(() => {
20813
+ editor.getRootElement();
20814
+ const onRootClick = (event) => {
20815
+ if (event.target !== editor.getRootElement()) {
20816
+ return;
20817
+ }
20818
+ const clickArea = event.offsetY <= 60 ? "top" : "bottom";
20819
+ const state = editor.getEditorState().toJSON();
20820
+ const firstNode = state.root.children[0];
20821
+ const lastNode = state.root.children.at(-1);
20822
+ if (isRichTextNodeType(firstNode, "asset") && clickArea === "top") {
20823
+ editor.update(() => {
20824
+ $insertFirst($getRoot(), $createParagraphNode());
20825
+ requestAnimationFrame(() => {
20826
+ var _a, _b;
20827
+ (_b = (_a = editor.getRootElement()) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.scrollTo({
20828
+ top: 0,
20829
+ behavior: "instant"
20830
+ });
20831
+ });
20832
+ });
20833
+ } else if (isRichTextNodeType(lastNode, "asset") && clickArea === "bottom") {
20834
+ editor.update(() => {
20835
+ $getRoot().selectEnd();
20836
+ $insertNodes([$createParagraphNode()]);
20837
+ requestAnimationFrame(() => {
20838
+ var _a, _b, _c, _d;
20839
+ (_d = (_a = editor.getRootElement()) == null ? void 0 : _a.parentElement) == null ? void 0 : _d.scrollTo({
20840
+ top: (_c = (_b = editor.getRootElement()) == null ? void 0 : _b.parentElement) == null ? void 0 : _c.scrollHeight,
20841
+ behavior: "instant"
20842
+ });
20843
+ });
20844
+ });
20845
+ }
20846
+ };
20847
+ const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
20848
+ rootElement == null ? void 0 : rootElement.addEventListener("click", onRootClick);
20849
+ prevRootElement == null ? void 0 : prevRootElement.removeEventListener("click", onRootClick);
20850
+ });
20851
+ return () => {
20852
+ removeRootListener();
20853
+ };
20854
+ }, [editor]);
20855
+ return null;
20856
+ };
20857
+ var ImprovedAssetSelectionPlugin_default = ImprovedAssetSelectionPlugin;
20858
+
20785
20859
  // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
20786
20860
  import { css as css97 } from "@emotion/react";
20787
- import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
20861
+ import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
20788
20862
  import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
20789
- import { addClassNamesToElement, isHTMLAnchorElement, mergeRegister as mergeRegister2 } from "@lexical/utils";
20863
+ import {
20864
+ addClassNamesToElement,
20865
+ isHTMLAnchorElement,
20866
+ mergeRegister as mergeRegister2,
20867
+ objectKlassEquals
20868
+ } from "@lexical/utils";
20790
20869
  import { deepEqual } from "fast-equals";
20791
20870
  import {
20792
20871
  $applyNodeReplacement,
@@ -20795,11 +20874,13 @@ import {
20795
20874
  $isRangeSelection,
20796
20875
  BLUR_COMMAND,
20797
20876
  COMMAND_PRIORITY_EDITOR,
20877
+ COMMAND_PRIORITY_LOW,
20798
20878
  createCommand,
20799
20879
  ElementNode as ElementNode2,
20800
- FOCUS_COMMAND
20880
+ FOCUS_COMMAND,
20881
+ PASTE_COMMAND
20801
20882
  } from "lexical";
20802
- import { useCallback as useCallback10, useEffect as useEffect18, useRef as useRef12, useState as useState16 } from "react";
20883
+ import { useCallback as useCallback10, useEffect as useEffect19, useRef as useRef11, useState as useState16 } from "react";
20803
20884
 
20804
20885
  // src/components/ParameterInputs/rich-text/utils.ts
20805
20886
  import { $isAtNodeEnd } from "@lexical/selection";
@@ -20916,9 +20997,7 @@ function convertAnchorElement(domNode) {
20916
20997
  nodeId,
20917
20998
  dynamicInputValues
20918
20999
  };
20919
- if (isProjectMapLinkValue(value)) {
20920
- node = $createLinkNode(value);
20921
- } else if (isNonProjectMapLinkValue(value)) {
21000
+ if (isProjectMapLinkValue(value) || isNonProjectMapLinkValue(value)) {
20922
21001
  node = $createLinkNode(value);
20923
21002
  }
20924
21003
  return { node };
@@ -21072,6 +21151,10 @@ function upsertLinkNode(props) {
21072
21151
  continue;
21073
21152
  }
21074
21153
  const linkNodeAncestor = getLinkAncestor(node);
21154
+ if ($isLinkNode(node)) {
21155
+ node.setLink(props);
21156
+ continue;
21157
+ }
21075
21158
  if (!linkNodeAncestor) {
21076
21159
  const newLinkNode = $createLinkNode(props);
21077
21160
  node.insertBefore(newLinkNode);
@@ -21144,18 +21227,18 @@ function LinkNodePlugin({
21144
21227
  const parsePath = getBoundPath != null ? getBoundPath : function(path) {
21145
21228
  return path;
21146
21229
  };
21147
- const [editor] = useLexicalComposerContext2();
21230
+ const [editor] = useLexicalComposerContext3();
21148
21231
  const [linkPopoverState, setLinkPopoverState] = useState16();
21149
- const linkPopoverElRef = useRef12(null);
21232
+ const linkPopoverElRef = useRef11(null);
21150
21233
  const [isEditorFocused, setIsEditorFocused] = useState16(false);
21151
21234
  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState16(false);
21152
- useEffect18(() => {
21235
+ useEffect19(() => {
21153
21236
  if (!isEditorFocused && !isLinkPopoverFocused) {
21154
21237
  setLinkPopoverState(void 0);
21155
21238
  return;
21156
21239
  }
21157
21240
  }, [isEditorFocused, isLinkPopoverFocused]);
21158
- useEffect18(() => {
21241
+ useEffect19(() => {
21159
21242
  if (!editor.hasNodes([LinkNode])) {
21160
21243
  throw new Error("LinkNode not registered on editor");
21161
21244
  }
@@ -21221,6 +21304,41 @@ function LinkNodePlugin({
21221
21304
  return true;
21222
21305
  },
21223
21306
  COMMAND_PRIORITY_EDITOR
21307
+ ),
21308
+ // Support pasting of links from clipboard
21309
+ editor.registerCommand(
21310
+ PASTE_COMMAND,
21311
+ (event) => {
21312
+ const selection = $getSelection();
21313
+ if (!$isRangeSelection(selection) || selection.isCollapsed() || !objectKlassEquals(event, ClipboardEvent)) {
21314
+ return false;
21315
+ }
21316
+ const clipboardEvent = event;
21317
+ if (clipboardEvent.clipboardData === null) {
21318
+ return false;
21319
+ }
21320
+ const clipboardText = clipboardEvent.clipboardData.getData("text");
21321
+ if (!isValidUrl(clipboardText)) {
21322
+ return false;
21323
+ }
21324
+ if (selection.getNodes().some((node) => $isElementNode2(node) && !$isLinkNode(node))) {
21325
+ return false;
21326
+ }
21327
+ let path = clipboardText;
21328
+ const type = guessLinkTypeFromPath(path);
21329
+ if (type === "email" && path.startsWith("mailto:")) {
21330
+ path = path.replace("mailto:", "");
21331
+ } else if (type === "tel" && path.startsWith("tel:")) {
21332
+ path = path.replace("tel:", "");
21333
+ }
21334
+ upsertLinkNode({
21335
+ path,
21336
+ type
21337
+ });
21338
+ event.preventDefault();
21339
+ return true;
21340
+ },
21341
+ COMMAND_PRIORITY_LOW
21224
21342
  )
21225
21343
  );
21226
21344
  }, [editor, onConnectLink]);
@@ -21258,7 +21376,7 @@ function LinkNodePlugin({
21258
21376
  }
21259
21377
  });
21260
21378
  }, [editor, positioningAnchorEl]);
21261
- useEffect18(() => {
21379
+ useEffect19(() => {
21262
21380
  return editor.registerUpdateListener(({ editorState }) => {
21263
21381
  requestAnimationFrame(() => {
21264
21382
  editorState.read(() => {
@@ -21342,7 +21460,7 @@ function getLinkAncestor(node) {
21342
21460
 
21343
21461
  // src/components/ParameterInputs/rich-text/ListIndentPlugin.tsx
21344
21462
  import { $getListDepth, $isListItemNode, $isListNode, ListNode } from "@lexical/list";
21345
- import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
21463
+ import { useLexicalComposerContext as useLexicalComposerContext4 } from "@lexical/react/LexicalComposerContext";
21346
21464
  import {
21347
21465
  $filter,
21348
21466
  $getNearestBlockElementAncestorOrThrow,
@@ -21362,7 +21480,7 @@ import {
21362
21480
  OUTDENT_CONTENT_COMMAND,
21363
21481
  SELECTION_CHANGE_COMMAND
21364
21482
  } from "lexical";
21365
- import { useEffect as useEffect19, useRef as useRef13 } from "react";
21483
+ import { useEffect as useEffect20, useRef as useRef12 } from "react";
21366
21484
  function isIndentPermitted(maxDepth) {
21367
21485
  const selection = $getSelection2();
21368
21486
  if (!$isRangeSelection2(selection)) {
@@ -21416,9 +21534,9 @@ function $indentOverTab(selection) {
21416
21534
  return false;
21417
21535
  }
21418
21536
  function ListIndentPlugin({ maxDepth }) {
21419
- const [editor] = useLexicalComposerContext3();
21420
- const isInListItemNode = useRef13(false);
21421
- useEffect19(() => {
21537
+ const [editor] = useLexicalComposerContext4();
21538
+ const isInListItemNode = useRef12(false);
21539
+ useEffect20(() => {
21422
21540
  return editor.registerCommand(
21423
21541
  SELECTION_CHANGE_COMMAND,
21424
21542
  () => {
@@ -21435,7 +21553,7 @@ function ListIndentPlugin({ maxDepth }) {
21435
21553
  COMMAND_PRIORITY_NORMAL
21436
21554
  );
21437
21555
  }, [editor]);
21438
- useEffect19(() => {
21556
+ useEffect20(() => {
21439
21557
  return mergeRegister3(
21440
21558
  editor.registerCommand(
21441
21559
  INDENT_CONTENT_COMMAND,
@@ -21463,1242 +21581,1269 @@ function ListIndentPlugin({ maxDepth }) {
21463
21581
  return null;
21464
21582
  }
21465
21583
 
21466
- // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
21584
+ // src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
21467
21585
  import { css as css98 } from "@emotion/react";
21468
- import { $createCodeNode } from "@lexical/code";
21469
- import {
21470
- $isListNode as $isListNode2,
21471
- INSERT_ORDERED_LIST_COMMAND,
21472
- INSERT_UNORDERED_LIST_COMMAND,
21473
- ListNode as ListNode2,
21474
- REMOVE_LIST_COMMAND
21475
- } from "@lexical/list";
21476
- import { useLexicalComposerContext as useLexicalComposerContext4 } from "@lexical/react/LexicalComposerContext";
21477
- import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
21478
- import { $setBlocksType } from "@lexical/selection";
21479
- import { $createTableNodeWithDimensions } from "@lexical/table";
21480
- import { $findMatchingParent, $getNearestNodeOfType as $getNearestNodeOfType2 } from "@lexical/utils";
21586
+ import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
21587
+ import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
21481
21588
  import {
21482
- $createParagraphNode,
21483
- $getSelection as $getSelection3,
21484
- $insertNodes,
21485
- $isRangeSelection as $isRangeSelection3,
21486
- $isRootOrShadowRoot,
21487
- COMMAND_PRIORITY_CRITICAL as COMMAND_PRIORITY_CRITICAL2,
21488
- FORMAT_TEXT_COMMAND,
21489
- SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND2
21490
- } from "lexical";
21491
- import { useCallback as useCallback11, useEffect as useEffect20, useMemo as useMemo6, useState as useState17 } from "react";
21492
- import { Fragment as Fragment19, jsx as jsx130, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
21493
- var toolbar = css98`
21494
- ${scrollbarStyles}
21495
- background: var(--gray-50);
21496
- border-radius: var(--rounded-base);
21497
- display: flex;
21498
- /* We add 1px because we use a 1px wide separator */
21499
- gap: calc(var(--spacing-sm) + 1px);
21500
- margin: 0 0 calc(var(--spacing-sm) + var(--spacing-xs)) 0;
21501
- overflow: auto;
21502
- padding: var(--spacing-sm);
21503
- position: sticky;
21504
- top: calc(var(--spacing-sm) * -2);
21505
- z-index: 10;
21506
- `;
21507
- var toolbarGroup = css98`
21508
- display: flex;
21509
- flex-shrink: 0;
21510
- gap: var(--spacing-xs);
21511
- position: relative;
21512
-
21513
- &:not(:first-child)::before {
21514
- background-color: var(--gray-300);
21515
- content: '';
21516
- display: block;
21517
- height: 24px;
21518
- left: calc(var(--spacing-xs) * -1);
21519
- position: absolute;
21520
- top: 4px;
21521
- width: 1px;
21522
- }
21523
- `;
21524
- var richTextToolbarButton = css98`
21525
- align-items: center;
21526
- appearance: none;
21527
- border: 0;
21528
- border-radius: var(--rounded-sm);
21529
- box-shadow: none;
21530
- color: var(--gray-900);
21531
- display: flex;
21532
- flex-shrink: 0;
21533
- height: 32px;
21534
- justify-content: center;
21535
- min-width: 32px;
21536
- padding: 0 var(--spacing-sm);
21537
- `;
21538
- var richTextToolbarButtonActive = css98`
21539
- background: var(--gray-200);
21540
- `;
21541
- var textStyleButton = css98`
21542
- justify-content: space-between;
21543
- min-width: 7rem;
21544
- `;
21545
- var toolbarIcon = css98`
21546
- color: inherit;
21547
- `;
21548
- var toolbarChevron = css98`
21549
- margin-left: var(--spacing-xs);
21589
+ $deleteTableColumn__EXPERIMENTAL,
21590
+ $deleteTableRow__EXPERIMENTAL,
21591
+ $getTableCellNodeFromLexicalNode,
21592
+ $getTableColumnIndexFromTableCellNode,
21593
+ $getTableNodeFromLexicalNodeOrThrow,
21594
+ $getTableRowIndexFromTableCellNode,
21595
+ $insertTableColumn__EXPERIMENTAL,
21596
+ $insertTableRow__EXPERIMENTAL,
21597
+ $isTableCellNode,
21598
+ $isTableRowNode,
21599
+ $isTableSelection,
21600
+ getTableObserverFromTableElement,
21601
+ TableCellHeaderStates,
21602
+ TableCellNode
21603
+ } from "@lexical/table";
21604
+ import { $getRoot as $getRoot2, $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection3 } from "lexical";
21605
+ import { forwardRef as forwardRef22, useCallback as useCallback11, useEffect as useEffect21, useLayoutEffect, useState as useState17 } from "react";
21606
+ import { jsx as jsx130, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
21607
+ function computeSelectionCount(selection) {
21608
+ const selectionShape = selection.getShape();
21609
+ return {
21610
+ columns: selectionShape.toX - selectionShape.fromX + 1,
21611
+ rows: selectionShape.toY - selectionShape.fromY + 1
21612
+ };
21613
+ }
21614
+ var tableActionMenuTrigger = css98`
21615
+ position: absolute;
21616
+ transform: translate(calc(-100% - 1px), 1px);
21550
21617
  `;
21551
- var RichTextToolbarIcon = ({ icon }) => {
21552
- return /* @__PURE__ */ jsx130(Icon, { icon, css: toolbarIcon, size: "1rem" });
21553
- };
21554
- var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
21555
- ["bold", "format-bold"],
21556
- ["italic", "format-italic"],
21557
- ["underline", "format-underline"],
21558
- ["strikethrough", "format-strike"],
21559
- ["code", "format-code"],
21560
- ["superscript", "format-superscript"],
21561
- ["subscript", "format-subscript"]
21562
- ]);
21563
- var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
21564
- var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
21565
- var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
21566
- const [editor] = useLexicalComposerContext4();
21567
- const {
21568
- activeElement,
21569
- setActiveElement,
21570
- activeFormats,
21571
- setActiveFormats,
21572
- visibleFormatsWithIcon,
21573
- visibleFormatsWithoutIcon,
21574
- visibleTextualElements,
21575
- isLink,
21576
- setIsLink,
21577
- linkElementVisible,
21578
- visibleLists,
21579
- codeElementVisible,
21580
- quoteElementVisible,
21581
- visibleElementsWithIcons,
21582
- visibleInsertElementsWithIcons,
21583
- tableElementVisible
21584
- } = useRichTextToolbarState({ config });
21585
- const onSelectElement = (type) => {
21586
- if (activeElement === type) {
21587
- return;
21588
- }
21589
- editor.focus(() => {
21590
- editor.update(() => {
21591
- const selection = $getSelection3();
21592
- if (HEADING_ELEMENTS.includes(type)) {
21593
- $setBlocksType(selection, () => $createHeadingNode(type));
21594
- } else if (type === "paragraph") {
21595
- $setBlocksType(selection, () => $createParagraphNode());
21596
- } else if (type === "quote") {
21597
- $setBlocksType(selection, () => $createQuoteNode());
21598
- } else if (type === "code") {
21599
- $setBlocksType(selection, () => $createCodeNode());
21600
- } else if (type === "table" && onInsertTable) {
21601
- onInsertTable().then((dimensions) => {
21602
- if (!dimensions) {
21603
- return;
21604
- }
21605
- const { rows, columns } = dimensions;
21606
- editor.focus(() => {
21607
- editor.update(() => {
21608
- $insertNodes([$createTableNodeWithDimensions(rows, columns, false)]);
21609
- });
21610
- });
21611
- });
21618
+ var TableActionMenuTrigger = forwardRef22((props, ref) => {
21619
+ const { tableCellEl, positioningAnchorEl, ...rest } = props;
21620
+ const [coordinates, setCoordinates] = useState17({ x: 0, y: 0 });
21621
+ useLayoutEffect(() => {
21622
+ const rect = tableCellEl.getBoundingClientRect();
21623
+ const parentRect = positioningAnchorEl.getBoundingClientRect();
21624
+ const relativeX = rect.right - parentRect.left + positioningAnchorEl.scrollLeft;
21625
+ const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
21626
+ setCoordinates({ x: relativeX, y: relativeY });
21627
+ }, [tableCellEl, positioningAnchorEl]);
21628
+ return /* @__PURE__ */ jsx130(
21629
+ IconButton,
21630
+ {
21631
+ ref,
21632
+ css: [
21633
+ tableActionMenuTrigger,
21634
+ {
21635
+ top: coordinates.y,
21636
+ left: coordinates.x
21612
21637
  }
21613
- });
21614
- });
21615
- };
21616
- const updateToolbar = useCallback11(() => {
21617
- const selection = $getSelection3();
21618
- if (!$isRangeSelection3(selection)) {
21619
- return;
21620
- }
21621
- const newActiveFormats = [];
21622
- for (const format of richTextBuiltInFormats) {
21623
- if (selection.hasFormat(format.type)) {
21624
- newActiveFormats.push(format.type);
21625
- }
21626
- }
21627
- setActiveFormats(newActiveFormats);
21628
- const anchorNode = selection.anchor.getNode();
21629
- let element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent(anchorNode, (e) => {
21630
- const parent = e.getParent();
21631
- return parent !== null && $isRootOrShadowRoot(parent);
21632
- });
21633
- if (element === null) {
21634
- element = anchorNode.getTopLevelElementOrThrow();
21635
- }
21636
- const elementKey = element.getKey();
21637
- const elementDOM = editor.getElementByKey(elementKey);
21638
- if (elementDOM !== null) {
21639
- if ($isListNode2(element)) {
21640
- const parentList = $getNearestNodeOfType2(anchorNode, ListNode2);
21641
- const type = parentList ? parentList.getListType() : element.getListType();
21642
- setActiveElement(type === "bullet" ? "unorderedList" : "orderedList");
21643
- } else {
21644
- const type = $isHeadingNode(element) ? element.getTag() : element.getType();
21645
- setActiveElement(type);
21646
- }
21647
- }
21648
- const node = getSelectedNode(selection);
21649
- if (getLinkAncestor(node) !== null) {
21650
- setIsLink(true);
21651
- } else {
21652
- setIsLink(false);
21638
+ ],
21639
+ size: "xs",
21640
+ buttonType: "unimportant",
21641
+ ...rest,
21642
+ children: /* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
21653
21643
  }
21654
- }, [editor, setActiveElement, setActiveFormats, setIsLink]);
21655
- useEffect20(() => {
21656
- return editor.registerCommand(
21657
- SELECTION_CHANGE_COMMAND2,
21658
- (_payload) => {
21659
- updateToolbar();
21660
- return false;
21644
+ );
21645
+ });
21646
+ TableActionMenuTrigger.displayName = "TableActionMenuTrigger";
21647
+ function TableActionMenu({
21648
+ tableCellNode: _tableCellNode,
21649
+ menuPortalEl,
21650
+ tableCellEl,
21651
+ positioningAnchorEl
21652
+ }) {
21653
+ const [editor] = useLexicalComposerContext5();
21654
+ const [tableCellNode, updateTableCellNode] = useState17(_tableCellNode);
21655
+ const [selectionCounts, updateSelectionCounts] = useState17({
21656
+ columns: 1,
21657
+ rows: 1
21658
+ });
21659
+ const [menuTriggerKey, setMenuTriggerKey] = useState17(0);
21660
+ const incrementMenuTriggerKey = () => {
21661
+ setMenuTriggerKey((key) => key += 1);
21662
+ };
21663
+ useEffect21(() => {
21664
+ return editor.registerMutationListener(
21665
+ TableCellNode,
21666
+ (nodeMutations) => {
21667
+ const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
21668
+ if (nodeUpdated) {
21669
+ editor.getEditorState().read(() => {
21670
+ updateTableCellNode(tableCellNode.getLatest());
21671
+ });
21672
+ }
21661
21673
  },
21662
- COMMAND_PRIORITY_CRITICAL2
21674
+ { skipInitialization: true }
21663
21675
  );
21664
- }, [editor, updateToolbar]);
21665
- useEffect20(() => {
21666
- return editor.registerUpdateListener(({ editorState }) => {
21667
- requestAnimationFrame(() => {
21668
- editorState.read(() => {
21669
- updateToolbar();
21670
- });
21676
+ }, [editor, tableCellNode]);
21677
+ useEffect21(() => {
21678
+ editor.getEditorState().read(() => {
21679
+ const selection = $getSelection3();
21680
+ if ($isTableSelection(selection)) {
21681
+ updateSelectionCounts(computeSelectionCount(selection));
21682
+ }
21683
+ });
21684
+ }, [editor]);
21685
+ const clearTableSelection = useCallback11(() => {
21686
+ editor.update(() => {
21687
+ if (tableCellNode.isAttached()) {
21688
+ const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
21689
+ const tableElement2 = editor.getElementByKey(
21690
+ tableNode.getKey()
21691
+ );
21692
+ if (!tableElement2) {
21693
+ throw new Error("Expected to find tableElement in DOM");
21694
+ }
21695
+ const tableSelection = getTableObserverFromTableElement(tableElement2);
21696
+ if (tableSelection !== null) {
21697
+ tableSelection.clearHighlight();
21698
+ }
21699
+ tableNode.markDirty();
21700
+ updateTableCellNode(tableCellNode.getLatest());
21701
+ }
21702
+ const rootNode = $getRoot2();
21703
+ rootNode.selectStart();
21704
+ });
21705
+ }, [editor, tableCellNode]);
21706
+ const insertTableRowAtSelection = useCallback11(
21707
+ (shouldInsertAfter) => {
21708
+ editor.update(() => {
21709
+ $insertTableRow__EXPERIMENTAL(shouldInsertAfter);
21710
+ });
21711
+ incrementMenuTriggerKey();
21712
+ },
21713
+ [editor]
21714
+ );
21715
+ const insertTableColumnAtSelection = useCallback11(
21716
+ (shouldInsertAfter) => {
21717
+ editor.update(() => {
21718
+ for (let i = 0; i < selectionCounts.columns; i++) {
21719
+ $insertTableColumn__EXPERIMENTAL(shouldInsertAfter);
21720
+ }
21671
21721
  });
21722
+ incrementMenuTriggerKey();
21723
+ },
21724
+ [editor, selectionCounts.columns]
21725
+ );
21726
+ const deleteTableRowAtSelection = useCallback11(() => {
21727
+ editor.update(() => {
21728
+ $deleteTableRow__EXPERIMENTAL();
21672
21729
  });
21673
- }, [editor, updateToolbar]);
21674
- return /* @__PURE__ */ jsxs86("div", { css: toolbar, children: [
21675
- /* @__PURE__ */ jsxs86(
21676
- Menu,
21677
- {
21678
- menuTrigger: /* @__PURE__ */ jsxs86("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", children: [
21679
- visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
21680
- " ",
21681
- /* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
21682
- ] }),
21683
- placement: "bottom-start",
21684
- children: [
21685
- [
21686
- {
21687
- label: "Normal",
21688
- type: "paragraph"
21689
- },
21690
- ...visibleTextualElements
21691
- ].map((element) => /* @__PURE__ */ jsx130(
21692
- MenuItem,
21693
- {
21694
- onClick: () => {
21695
- onSelectElement(element.type);
21696
- },
21697
- children: element.label
21698
- },
21699
- element.type
21700
- )),
21701
- visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx130(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
21702
- ]
21730
+ incrementMenuTriggerKey();
21731
+ }, [editor]);
21732
+ const deleteTableAtSelection = useCallback11(() => {
21733
+ editor.update(() => {
21734
+ const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
21735
+ tableNode.remove();
21736
+ clearTableSelection();
21737
+ });
21738
+ }, [editor, tableCellNode, clearTableSelection]);
21739
+ const deleteTableColumnAtSelection = useCallback11(() => {
21740
+ editor.update(() => {
21741
+ $deleteTableColumn__EXPERIMENTAL();
21742
+ });
21743
+ incrementMenuTriggerKey();
21744
+ }, [editor]);
21745
+ const toggleTableRowIsHeader = useCallback11(() => {
21746
+ editor.update(() => {
21747
+ const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
21748
+ const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
21749
+ const tableRows = tableNode.getChildren();
21750
+ if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
21751
+ throw new Error("Expected table cell to be inside of table row.");
21703
21752
  }
21704
- ),
21705
- visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs86("div", { css: toolbarGroup, children: [
21706
- visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx130(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx130(
21707
- "button",
21708
- {
21709
- onClick: () => {
21710
- editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
21711
- },
21712
- css: [
21713
- richTextToolbarButton,
21714
- activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
21715
- ],
21716
- children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
21753
+ const tableRow2 = tableRows[tableRowIndex];
21754
+ if (!$isTableRowNode(tableRow2)) {
21755
+ throw new Error("Expected table row");
21756
+ }
21757
+ tableRow2.getChildren().forEach((tableCell) => {
21758
+ if (!$isTableCellNode(tableCell)) {
21759
+ throw new Error("Expected table cell");
21717
21760
  }
21718
- ) }, format.type)),
21719
- visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx130(
21720
- Menu,
21721
- {
21722
- menuLabel: "Alternative text styles",
21723
- menuTrigger: /* @__PURE__ */ jsx130("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx130(Icon, { icon: "more-alt", css: toolbarIcon }) }),
21724
- placement: "bottom-start",
21725
- children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx130(
21726
- MenuItem,
21727
- {
21728
- onClick: () => {
21729
- editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
21730
- },
21731
- children: format.label
21732
- },
21733
- format.type
21734
- ))
21761
+ tableCell.toggleHeaderStyle(TableCellHeaderStates.ROW);
21762
+ });
21763
+ clearTableSelection();
21764
+ });
21765
+ }, [editor, tableCellNode, clearTableSelection]);
21766
+ const toggleTableColumnIsHeader = useCallback11(() => {
21767
+ editor.update(() => {
21768
+ const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
21769
+ const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
21770
+ const tableRows = tableNode.getChildren();
21771
+ const maxRowsLength = Math.max(...tableRows.map((row) => row.getChildren().length));
21772
+ if (tableColumnIndex >= maxRowsLength || tableColumnIndex < 0) {
21773
+ throw new Error("Expected table cell to be inside of table row.");
21774
+ }
21775
+ for (let r = 0; r < tableRows.length; r++) {
21776
+ const tableRow2 = tableRows[r];
21777
+ if (!$isTableRowNode(tableRow2)) {
21778
+ throw new Error("Expected table row");
21735
21779
  }
21736
- ) : null
21737
- ] }) : null,
21738
- visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ jsxs86("div", { css: toolbarGroup, children: [
21739
- linkElementVisible ? /* @__PURE__ */ jsx130(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx130(
21740
- "button",
21741
- {
21742
- onClick: () => {
21743
- isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
21744
- },
21745
- css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
21746
- children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "link" })
21780
+ const tableCells = tableRow2.getChildren();
21781
+ if (tableColumnIndex >= tableCells.length) {
21782
+ continue;
21747
21783
  }
21748
- ) }) : null,
21749
- visibleLists.size > 0 ? /* @__PURE__ */ jsxs86(Fragment19, { children: [
21750
- visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx130(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx130(
21751
- "button",
21784
+ const tableCell = tableCells[tableColumnIndex];
21785
+ if (!$isTableCellNode(tableCell)) {
21786
+ throw new Error("Expected table cell");
21787
+ }
21788
+ tableCell.toggleHeaderStyle(TableCellHeaderStates.COLUMN);
21789
+ }
21790
+ clearTableSelection();
21791
+ });
21792
+ }, [editor, tableCellNode, clearTableSelection]);
21793
+ const menuItemCss = css98({
21794
+ fontSize: "var(--fs-sm)"
21795
+ });
21796
+ return /* @__PURE__ */ jsxs86(
21797
+ Menu,
21798
+ {
21799
+ menuTrigger: /* @__PURE__ */ jsx130(
21800
+ TableActionMenuTrigger,
21801
+ {
21802
+ tableCellEl,
21803
+ positioningAnchorEl
21804
+ },
21805
+ menuTriggerKey
21806
+ ),
21807
+ portalElement: menuPortalEl,
21808
+ maxMenuHeight: "300px",
21809
+ children: [
21810
+ /* @__PURE__ */ jsxs86(
21811
+ MenuItem,
21752
21812
  {
21753
21813
  onClick: () => {
21754
- activeElement === "unorderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
21814
+ insertTableRowAtSelection(false);
21755
21815
  },
21756
- css: [
21757
- richTextToolbarButton,
21758
- activeElement === "unorderedList" ? richTextToolbarButtonActive : null
21759
- ],
21760
- children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "layout-list" })
21761
- }
21762
- ) }) : null,
21763
- visibleLists.has("orderedList") ? /* @__PURE__ */ jsx130(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx130(
21764
- "button",
21765
- {
21766
- onClick: () => {
21767
- activeElement === "orderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
21768
- },
21769
- css: [
21770
- richTextToolbarButton,
21771
- activeElement === "orderedList" ? richTextToolbarButtonActive : null
21772
- ],
21773
- children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "layout-list-numbered" })
21816
+ css: menuItemCss,
21817
+ children: [
21818
+ "Insert ",
21819
+ selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
21820
+ " above"
21821
+ ]
21774
21822
  }
21775
- ) }) : null
21776
- ] }) : null,
21777
- customControls ? customControls : null
21778
- ] }) : null,
21779
- visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ jsx130("div", { css: toolbarGroup, children: /* @__PURE__ */ jsxs86(
21780
- Menu,
21781
- {
21782
- menuTrigger: /* @__PURE__ */ jsxs86("button", { css: richTextToolbarButton, title: "Insert block element", children: [
21783
- "Insert",
21784
- /* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
21823
+ ),
21824
+ /* @__PURE__ */ jsxs86(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
21825
+ "Insert ",
21826
+ selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
21827
+ " below"
21785
21828
  ] }),
21786
- placement: "bottom-start",
21787
- children: [
21788
- quoteElementVisible ? /* @__PURE__ */ jsx130(
21789
- MenuItem,
21790
- {
21791
- onClick: () => {
21792
- onSelectElement("quote");
21793
- },
21794
- icon: /* @__PURE__ */ jsx130(Icon, { icon: "quote", iconColor: "currentColor" }),
21795
- children: "Quote"
21796
- }
21797
- ) : null,
21798
- codeElementVisible ? /* @__PURE__ */ jsx130(
21799
- MenuItem,
21800
- {
21801
- onClick: () => {
21802
- onSelectElement("code");
21803
- },
21804
- icon: /* @__PURE__ */ jsx130(Icon, { icon: "code-slash", iconColor: "currentColor" }),
21805
- children: "Code"
21806
- }
21807
- ) : null,
21808
- tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ jsx130(
21809
- MenuItem,
21810
- {
21811
- onClick: () => {
21812
- onSelectElement("table");
21813
- },
21814
- icon: /* @__PURE__ */ jsx130(Icon, { icon: "view-grid", iconColor: "currentColor" }),
21815
- children: "Table"
21816
- }
21817
- ) : null
21818
- ]
21819
- }
21820
- ) }) : null
21821
- ] });
21822
- };
21823
- var RichTextToolbar_default = RichTextToolbar;
21824
- var useRichTextToolbarState = ({ config }) => {
21825
- var _a;
21826
- const enabledBuiltInFormats = useMemo6(() => {
21827
- return richTextBuiltInFormats.filter((format) => {
21828
- var _a2, _b;
21829
- return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
21830
- });
21831
- }, [config]);
21832
- const enabledBuiltInElements = useMemo6(() => {
21833
- return richTextBuiltInElements.filter((element) => {
21834
- var _a2, _b;
21835
- return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
21836
- });
21837
- }, [config]);
21838
- const enabledBuiltInFormatsWithIcon = useMemo6(() => {
21839
- return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
21840
- }, [enabledBuiltInFormats]);
21841
- const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
21842
- (format) => !FORMATS_WITH_ICON.has(format.type)
21843
- );
21844
- const [activeFormats, setActiveFormats] = useState17([]);
21845
- const visibleFormatsWithIcon = useMemo6(() => {
21846
- const visibleFormats = /* @__PURE__ */ new Set();
21847
- activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
21848
- visibleFormats.add(type);
21849
- });
21850
- enabledBuiltInFormatsWithIcon.forEach((format) => {
21851
- visibleFormats.add(format.type);
21852
- });
21853
- return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
21854
- }, [activeFormats, enabledBuiltInFormatsWithIcon]);
21855
- const visibleFormatsWithoutIcon = useMemo6(() => {
21856
- const visibleFormats = /* @__PURE__ */ new Set();
21857
- activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
21858
- visibleFormats.add(type);
21859
- });
21860
- enabledBuiltInFormatsWithoutIcon.forEach((format) => {
21861
- visibleFormats.add(format.type);
21862
- });
21863
- return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
21864
- }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
21865
- const [activeElement, setActiveElement] = useState17("paragraph");
21866
- const enabledTextualElements = enabledBuiltInElements.filter(
21867
- (element) => TEXTUAL_ELEMENTS.includes(element.type)
21829
+ /* @__PURE__ */ jsx130(MenuItemSeparator, {}),
21830
+ /* @__PURE__ */ jsxs86(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
21831
+ "Insert ",
21832
+ selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
21833
+ " left"
21834
+ ] }),
21835
+ /* @__PURE__ */ jsxs86(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
21836
+ "Insert ",
21837
+ selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
21838
+ " right"
21839
+ ] }),
21840
+ /* @__PURE__ */ jsx130(MenuItemSeparator, {}),
21841
+ /* @__PURE__ */ jsx130(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
21842
+ /* @__PURE__ */ jsx130(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
21843
+ /* @__PURE__ */ jsx130(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
21844
+ /* @__PURE__ */ jsx130(MenuItemSeparator, {}),
21845
+ /* @__PURE__ */ jsxs86(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
21846
+ (tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "Remove" : "Add",
21847
+ " ",
21848
+ "row header"
21849
+ ] }),
21850
+ /* @__PURE__ */ jsxs86(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
21851
+ (tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN ? "Remove" : "Add",
21852
+ " ",
21853
+ "column header"
21854
+ ] })
21855
+ ]
21856
+ }
21868
21857
  );
21869
- const visibleTextualElements = useMemo6(() => {
21870
- if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
21871
- return enabledTextualElements;
21858
+ }
21859
+ function TableCellActionMenuContainer({
21860
+ menuPortalEl,
21861
+ positioningAnchorEl
21862
+ }) {
21863
+ const [editor] = useLexicalComposerContext5();
21864
+ const [tableCellNode, setTableMenuCellNode] = useState17(null);
21865
+ const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState17(null);
21866
+ const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState17(null);
21867
+ useEffect21(() => {
21868
+ const newPortalEl = document.createElement("div");
21869
+ setTableMenuCellMenuPortalEl(newPortalEl);
21870
+ menuPortalEl.appendChild(newPortalEl);
21871
+ return () => {
21872
+ newPortalEl.remove();
21873
+ };
21874
+ }, [menuPortalEl]);
21875
+ const setTableMenuCellNodeElem = useCallback11((elem) => {
21876
+ if (elem) {
21877
+ _setTableMenuCellNodeEl(elem);
21878
+ } else {
21879
+ _setTableMenuCellNodeEl(null);
21872
21880
  }
21873
- return richTextBuiltInElements.filter(
21874
- (element) => {
21875
- var _a2, _b;
21876
- 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);
21881
+ }, []);
21882
+ const $moveMenu = useCallback11(() => {
21883
+ const selection = $getSelection3();
21884
+ const nativeSelection = window.getSelection();
21885
+ const activeElement = document.activeElement;
21886
+ if (selection == null) {
21887
+ setTableMenuCellNode(null);
21888
+ return;
21889
+ }
21890
+ const rootElement = editor.getRootElement();
21891
+ if ($isRangeSelection3(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
21892
+ const tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
21893
+ if (tableCellNodeFromSelection == null) {
21894
+ setTableMenuCellNode(null);
21895
+ setTableMenuCellNodeElem(null);
21896
+ return;
21877
21897
  }
21878
- );
21879
- }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
21880
- const [isLink, setIsLink] = useState17(false);
21881
- const linkElementVisible = useMemo6(() => {
21882
- return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
21883
- }, [isLink, enabledBuiltInElements]);
21884
- const visibleLists = useMemo6(() => {
21885
- return new Set(
21886
- ["orderedList", "unorderedList"].filter(
21887
- (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
21888
- )
21889
- );
21890
- }, [activeElement, enabledBuiltInElements]);
21891
- const quoteElementVisible = useMemo6(() => {
21892
- return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
21893
- }, [activeElement, enabledBuiltInElements]);
21894
- const codeElementVisible = useMemo6(() => {
21895
- return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
21896
- }, [activeElement, enabledBuiltInElements]);
21897
- const tableElementVisible = useMemo6(() => {
21898
- return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
21899
- }, [activeElement, enabledBuiltInElements]);
21900
- const visibleElementsWithIcons = useMemo6(() => {
21901
- const visibleElements = /* @__PURE__ */ new Set();
21902
- if (linkElementVisible) {
21903
- visibleElements.add("link");
21898
+ const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
21899
+ if (tableCellParentNodeDOM == null) {
21900
+ setTableMenuCellNode(null);
21901
+ setTableMenuCellNodeElem(null);
21902
+ return;
21903
+ }
21904
+ setTableMenuCellNode(tableCellNodeFromSelection);
21905
+ setTableMenuCellNodeElem(tableCellParentNodeDOM);
21906
+ } else if (!activeElement) {
21907
+ setTableMenuCellNode(null);
21908
+ setTableMenuCellNodeElem(null);
21904
21909
  }
21905
- if (visibleLists.size > 0) {
21906
- visibleLists.forEach((type) => {
21907
- visibleElements.add(type);
21910
+ }, [editor, setTableMenuCellNodeElem]);
21911
+ useEffect21(() => {
21912
+ return editor.registerUpdateListener(() => {
21913
+ editor.getEditorState().read(() => {
21914
+ $moveMenu();
21908
21915
  });
21909
- }
21910
- return visibleElements;
21911
- }, [linkElementVisible, visibleLists]);
21912
- const visibleInsertElementsWithIcons = useMemo6(() => {
21913
- const visibleElements = /* @__PURE__ */ new Set();
21914
- if (quoteElementVisible) {
21915
- visibleElements.add("quote");
21916
- }
21917
- if (codeElementVisible) {
21918
- visibleElements.add("code");
21919
- }
21920
- if (tableElementVisible) {
21921
- visibleElements.add("table");
21922
- }
21923
- return visibleElements;
21924
- }, [codeElementVisible, quoteElementVisible, tableElementVisible]);
21925
- return {
21926
- activeFormats,
21927
- setActiveFormats,
21928
- activeElement,
21929
- setActiveElement,
21930
- visibleFormatsWithIcon,
21931
- visibleFormatsWithoutIcon,
21932
- visibleTextualElements,
21933
- isLink,
21934
- setIsLink,
21935
- linkElementVisible,
21936
- visibleLists,
21937
- quoteElementVisible,
21938
- codeElementVisible,
21939
- tableElementVisible,
21940
- visibleElementsWithIcons,
21941
- visibleInsertElementsWithIcons
21942
- };
21943
- };
21916
+ });
21917
+ });
21918
+ return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ jsx130(
21919
+ TableActionMenu,
21920
+ {
21921
+ tableCellNode,
21922
+ menuPortalEl: tableCellMenuPortalEl,
21923
+ tableCellEl: tableCellNodeEl,
21924
+ positioningAnchorEl
21925
+ },
21926
+ tableCellNode.getKey()
21927
+ );
21928
+ }
21929
+ function TableActionMenuPlugin({
21930
+ positioningAnchorEl,
21931
+ menuPortalEl
21932
+ }) {
21933
+ const isEditable = useLexicalEditable();
21934
+ return isEditable ? /* @__PURE__ */ jsx130(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
21935
+ }
21944
21936
 
21945
- // src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
21937
+ // src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
21946
21938
  import { css as css99 } from "@emotion/react";
21947
- import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
21948
- import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
21939
+ import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
21940
+ import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
21949
21941
  import {
21950
- $deleteTableColumn__EXPERIMENTAL,
21951
- $deleteTableRow__EXPERIMENTAL,
21952
- $getTableCellNodeFromLexicalNode,
21953
- $getTableColumnIndexFromTableCellNode,
21954
- $getTableNodeFromLexicalNodeOrThrow,
21955
- $getTableRowIndexFromTableCellNode,
21956
- $insertTableColumn__EXPERIMENTAL,
21957
- $insertTableRow__EXPERIMENTAL,
21958
- $isTableCellNode,
21959
- $isTableRowNode,
21960
- $isTableSelection,
21961
- getTableObserverFromTableElement,
21962
- TableCellHeaderStates,
21963
- TableCellNode
21942
+ $computeTableMapSkipCellCheck,
21943
+ $getTableNodeFromLexicalNodeOrThrow as $getTableNodeFromLexicalNodeOrThrow2,
21944
+ $getTableRowIndexFromTableCellNode as $getTableRowIndexFromTableCellNode2,
21945
+ $isTableCellNode as $isTableCellNode2,
21946
+ $isTableRowNode as $isTableRowNode2
21964
21947
  } from "@lexical/table";
21965
- import { $getRoot, $getSelection as $getSelection4, $isRangeSelection as $isRangeSelection4 } from "lexical";
21966
- import { forwardRef as forwardRef22, useCallback as useCallback12, useEffect as useEffect21, useLayoutEffect, useState as useState18 } from "react";
21967
- import { jsx as jsx131, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
21968
- function computeSelectionCount(selection) {
21969
- const selectionShape = selection.getShape();
21970
- return {
21971
- columns: selectionShape.toX - selectionShape.fromX + 1,
21972
- rows: selectionShape.toY - selectionShape.fromY + 1
21973
- };
21974
- }
21975
- var tableActionMenuTrigger = css99`
21948
+ import { calculateZoomLevel } from "@lexical/utils";
21949
+ import { $getNearestNodeFromDOMNode } from "lexical";
21950
+ import { useCallback as useCallback12, useEffect as useEffect22, useMemo as useMemo6, useRef as useRef13, useState as useState18 } from "react";
21951
+ import { createPortal as createPortal3 } from "react-dom";
21952
+ import { Fragment as Fragment19, jsx as jsx131, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
21953
+ var MIN_ROW_HEIGHT = 33;
21954
+ var MIN_COLUMN_WIDTH = 50;
21955
+ var tableResizer = css99`
21976
21956
  position: absolute;
21977
- transform: translate(calc(-100% - 1px), 1px);
21957
+ z-index: var(--z-10);
21978
21958
  `;
21979
- var TableActionMenuTrigger = forwardRef22((props, ref) => {
21980
- const { tableCellEl, positioningAnchorEl, ...rest } = props;
21981
- const [coordinates, setCoordinates] = useState18({ x: 0, y: 0 });
21982
- useLayoutEffect(() => {
21983
- const rect = tableCellEl.getBoundingClientRect();
21984
- const parentRect = positioningAnchorEl.getBoundingClientRect();
21985
- const relativeX = rect.right - parentRect.left + positioningAnchorEl.scrollLeft;
21986
- const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
21987
- setCoordinates({ x: relativeX, y: relativeY });
21988
- }, [tableCellEl, positioningAnchorEl]);
21989
- return /* @__PURE__ */ jsx131(
21990
- IconButton,
21991
- {
21992
- ref,
21993
- css: [
21994
- tableActionMenuTrigger,
21995
- {
21996
- top: coordinates.y,
21997
- left: coordinates.x
21998
- }
21999
- ],
22000
- size: "xs",
22001
- buttonType: "unimportant",
22002
- ...rest,
22003
- children: /* @__PURE__ */ jsx131(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
21959
+ var fixedGetDOMCellFromTarget = (node) => {
21960
+ let currentNode = node;
21961
+ while (currentNode != null) {
21962
+ const nodeName = currentNode.nodeName;
21963
+ if (nodeName === "TD" || nodeName === "TH") {
21964
+ const cell2 = currentNode._cell;
21965
+ if (cell2 === void 0) {
21966
+ return {
21967
+ elem: currentNode
21968
+ };
21969
+ }
21970
+ return cell2;
22004
21971
  }
22005
- );
22006
- });
22007
- TableActionMenuTrigger.displayName = "TableActionMenuTrigger";
22008
- function TableActionMenu({
22009
- tableCellNode: _tableCellNode,
22010
- menuPortalEl,
22011
- tableCellEl,
22012
- positioningAnchorEl
22013
- }) {
22014
- const [editor] = useLexicalComposerContext5();
22015
- const [tableCellNode, updateTableCellNode] = useState18(_tableCellNode);
22016
- const [selectionCounts, updateSelectionCounts] = useState18({
22017
- columns: 1,
22018
- rows: 1
22019
- });
22020
- const [menuTriggerKey, setMenuTriggerKey] = useState18(0);
22021
- const incrementMenuTriggerKey = () => {
22022
- setMenuTriggerKey((key) => key += 1);
21972
+ currentNode = currentNode.parentNode;
21973
+ }
21974
+ return null;
21975
+ };
21976
+ function TableCellResizer({ editor, positioningAnchorEl }) {
21977
+ const targetRef = useRef13(null);
21978
+ const resizerRef = useRef13(null);
21979
+ const tableRectRef = useRef13(null);
21980
+ const mouseStartPosRef = useRef13(null);
21981
+ const [mouseCurrentPos, updateMouseCurrentPos] = useState18(null);
21982
+ const [activeCell, updateActiveCell] = useState18(null);
21983
+ const [isMouseDown, updateIsMouseDown] = useState18(false);
21984
+ const [draggingDirection, updateDraggingDirection] = useState18(null);
21985
+ const resetState = useCallback12(() => {
21986
+ updateActiveCell(null);
21987
+ targetRef.current = null;
21988
+ updateDraggingDirection(null);
21989
+ mouseStartPosRef.current = null;
21990
+ tableRectRef.current = null;
21991
+ }, []);
21992
+ const isMouseDownOnEvent = (event) => {
21993
+ return (event.buttons & 1) === 1;
22023
21994
  };
22024
- useEffect21(() => {
22025
- return editor.registerMutationListener(
22026
- TableCellNode,
22027
- (nodeMutations) => {
22028
- const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
22029
- if (nodeUpdated) {
22030
- editor.getEditorState().read(() => {
22031
- updateTableCellNode(tableCellNode.getLatest());
21995
+ useEffect22(() => {
21996
+ const onMouseMove = (event) => {
21997
+ setTimeout(() => {
21998
+ const target = event.target;
21999
+ if (draggingDirection) {
22000
+ updateMouseCurrentPos({
22001
+ x: event.clientX,
22002
+ y: event.clientY
22032
22003
  });
22004
+ return;
22033
22005
  }
22034
- },
22035
- { skipInitialization: true }
22036
- );
22037
- }, [editor, tableCellNode]);
22038
- useEffect21(() => {
22039
- editor.getEditorState().read(() => {
22040
- const selection = $getSelection4();
22041
- if ($isTableSelection(selection)) {
22042
- updateSelectionCounts(computeSelectionCount(selection));
22043
- }
22044
- });
22045
- }, [editor]);
22046
- const clearTableSelection = useCallback12(() => {
22047
- editor.update(() => {
22048
- if (tableCellNode.isAttached()) {
22049
- const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
22050
- const tableElement2 = editor.getElementByKey(
22051
- tableNode.getKey()
22052
- );
22053
- if (!tableElement2) {
22054
- throw new Error("Expected to find tableElement in DOM");
22006
+ updateIsMouseDown(isMouseDownOnEvent(event));
22007
+ if (resizerRef.current && resizerRef.current.contains(target)) {
22008
+ return;
22055
22009
  }
22056
- const tableSelection = getTableObserverFromTableElement(tableElement2);
22057
- if (tableSelection !== null) {
22058
- tableSelection.clearHighlight();
22010
+ if (targetRef.current !== target) {
22011
+ targetRef.current = target;
22012
+ const cell2 = fixedGetDOMCellFromTarget(target);
22013
+ if (cell2 && activeCell !== cell2) {
22014
+ editor.update(() => {
22015
+ const tableCellNode = $getNearestNodeFromDOMNode(cell2.elem);
22016
+ if (!tableCellNode) {
22017
+ throw new Error("TableCellResizer: Table cell node not found.");
22018
+ }
22019
+ const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
22020
+ const tableElement2 = editor.getElementByKey(tableNode.getKey());
22021
+ if (!tableElement2) {
22022
+ throw new Error("TableCellResizer: Table element not found.");
22023
+ }
22024
+ targetRef.current = target;
22025
+ tableRectRef.current = tableElement2.getBoundingClientRect();
22026
+ updateActiveCell(cell2);
22027
+ });
22028
+ } else if (cell2 == null) {
22029
+ resetState();
22030
+ }
22059
22031
  }
22060
- tableNode.markDirty();
22061
- updateTableCellNode(tableCellNode.getLatest());
22062
- }
22063
- const rootNode = $getRoot();
22064
- rootNode.selectStart();
22032
+ }, 0);
22033
+ };
22034
+ const onMouseDown = () => {
22035
+ setTimeout(() => {
22036
+ updateIsMouseDown(true);
22037
+ }, 0);
22038
+ };
22039
+ const onMouseUp = () => {
22040
+ setTimeout(() => {
22041
+ updateIsMouseDown(false);
22042
+ }, 0);
22043
+ };
22044
+ const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
22045
+ rootElement == null ? void 0 : rootElement.addEventListener("mousemove", onMouseMove);
22046
+ rootElement == null ? void 0 : rootElement.addEventListener("mousedown", onMouseDown);
22047
+ rootElement == null ? void 0 : rootElement.addEventListener("mouseup", onMouseUp);
22048
+ prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousemove", onMouseMove);
22049
+ prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousedown", onMouseDown);
22050
+ prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mouseup", onMouseUp);
22065
22051
  });
22066
- }, [editor, tableCellNode]);
22067
- const insertTableRowAtSelection = useCallback12(
22068
- (shouldInsertAfter) => {
22069
- editor.update(() => {
22070
- $insertTableRow__EXPERIMENTAL(shouldInsertAfter);
22071
- });
22072
- incrementMenuTriggerKey();
22052
+ return () => {
22053
+ removeRootListener();
22054
+ };
22055
+ }, [activeCell, draggingDirection, editor, resetState]);
22056
+ const isHeightChanging = (direction) => {
22057
+ if (direction === "bottom") {
22058
+ return true;
22059
+ }
22060
+ return false;
22061
+ };
22062
+ const updateRowHeight = useCallback12(
22063
+ (heightChange) => {
22064
+ if (!activeCell) {
22065
+ throw new Error("TableCellResizer: Expected active cell.");
22066
+ }
22067
+ editor.update(
22068
+ () => {
22069
+ const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
22070
+ if (!$isTableCellNode2(tableCellNode)) {
22071
+ throw new Error("TableCellResizer: Table cell node not found.");
22072
+ }
22073
+ const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
22074
+ const tableRowIndex = $getTableRowIndexFromTableCellNode2(tableCellNode);
22075
+ const tableRows = tableNode.getChildren();
22076
+ if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
22077
+ throw new Error("Expected table cell to be inside of table row.");
22078
+ }
22079
+ const tableRow2 = tableRows[tableRowIndex];
22080
+ if (!$isTableRowNode2(tableRow2)) {
22081
+ throw new Error("Expected table row");
22082
+ }
22083
+ let height = tableRow2.getHeight();
22084
+ if (height === void 0) {
22085
+ const rowCells = tableRow2.getChildren();
22086
+ height = Math.min(...rowCells.map((cell2) => {
22087
+ var _a;
22088
+ return (_a = getCellNodeHeight(cell2, editor)) != null ? _a : Infinity;
22089
+ }));
22090
+ }
22091
+ const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
22092
+ tableRow2.setHeight(newHeight);
22093
+ },
22094
+ { tag: "skip-scroll-into-view" }
22095
+ );
22073
22096
  },
22074
- [editor]
22097
+ [activeCell, editor]
22075
22098
  );
22076
- const insertTableColumnAtSelection = useCallback12(
22077
- (shouldInsertAfter) => {
22078
- editor.update(() => {
22079
- for (let i = 0; i < selectionCounts.columns; i++) {
22080
- $insertTableColumn__EXPERIMENTAL(shouldInsertAfter);
22099
+ const getCellNodeWidth = (cell2, activeEditor) => {
22100
+ const width = cell2.getWidth();
22101
+ if (width !== void 0) {
22102
+ return width;
22103
+ }
22104
+ const domCellNode = activeEditor.getElementByKey(cell2.getKey());
22105
+ if (domCellNode == null) {
22106
+ return void 0;
22107
+ }
22108
+ const computedStyle = getComputedStyle(domCellNode);
22109
+ return domCellNode.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
22110
+ };
22111
+ const getCellNodeHeight = (cell2, activeEditor) => {
22112
+ const domCellNode = activeEditor.getElementByKey(cell2.getKey());
22113
+ return domCellNode == null ? void 0 : domCellNode.clientHeight;
22114
+ };
22115
+ const getCellColumnIndex = (tableCellNode, tableMap) => {
22116
+ for (let row = 0; row < tableMap.length; row++) {
22117
+ for (let column = 0; column < tableMap[row].length; column++) {
22118
+ if (tableMap[row][column].cell === tableCellNode) {
22119
+ return column;
22081
22120
  }
22082
- });
22083
- incrementMenuTriggerKey();
22084
- },
22085
- [editor, selectionCounts.columns]
22086
- );
22087
- const deleteTableRowAtSelection = useCallback12(() => {
22088
- editor.update(() => {
22089
- $deleteTableRow__EXPERIMENTAL();
22090
- });
22091
- incrementMenuTriggerKey();
22092
- }, [editor]);
22093
- const deleteTableAtSelection = useCallback12(() => {
22094
- editor.update(() => {
22095
- const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
22096
- tableNode.remove();
22097
- clearTableSelection();
22098
- });
22099
- }, [editor, tableCellNode, clearTableSelection]);
22100
- const deleteTableColumnAtSelection = useCallback12(() => {
22101
- editor.update(() => {
22102
- $deleteTableColumn__EXPERIMENTAL();
22103
- });
22104
- incrementMenuTriggerKey();
22105
- }, [editor]);
22106
- const toggleTableRowIsHeader = useCallback12(() => {
22107
- editor.update(() => {
22108
- const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
22109
- const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
22110
- const tableRows = tableNode.getChildren();
22111
- if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
22112
- throw new Error("Expected table cell to be inside of table row.");
22113
22121
  }
22114
- const tableRow2 = tableRows[tableRowIndex];
22115
- if (!$isTableRowNode(tableRow2)) {
22116
- throw new Error("Expected table row");
22122
+ }
22123
+ };
22124
+ const updateColumnWidth = useCallback12(
22125
+ (widthChange) => {
22126
+ if (!activeCell) {
22127
+ throw new Error("TableCellResizer: Expected active cell.");
22117
22128
  }
22118
- tableRow2.getChildren().forEach((tableCell) => {
22119
- if (!$isTableCellNode(tableCell)) {
22120
- throw new Error("Expected table cell");
22129
+ editor.update(
22130
+ () => {
22131
+ const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
22132
+ if (!$isTableCellNode2(tableCellNode)) {
22133
+ throw new Error("TableCellResizer: Table cell node not found.");
22134
+ }
22135
+ const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
22136
+ const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
22137
+ const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
22138
+ if (columnIndex === void 0) {
22139
+ throw new Error("TableCellResizer: Table column not found.");
22140
+ }
22141
+ for (let row = 0; row < tableMap.length; row++) {
22142
+ const cell2 = tableMap[row][columnIndex];
22143
+ if (cell2.startRow === row && (columnIndex === tableMap[row].length - 1 || tableMap[row][columnIndex].cell !== tableMap[row][columnIndex + 1].cell)) {
22144
+ const width = getCellNodeWidth(cell2.cell, editor);
22145
+ if (width === void 0) {
22146
+ continue;
22147
+ }
22148
+ const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
22149
+ cell2.cell.setWidth(newWidth);
22150
+ }
22151
+ }
22152
+ },
22153
+ { tag: "skip-scroll-into-view" }
22154
+ );
22155
+ },
22156
+ [activeCell, editor]
22157
+ );
22158
+ const mouseUpHandler = useCallback12(
22159
+ (direction) => {
22160
+ const handler = (event) => {
22161
+ event.preventDefault();
22162
+ event.stopPropagation();
22163
+ if (!activeCell) {
22164
+ throw new Error("TableCellResizer: Expected active cell.");
22121
22165
  }
22122
- tableCell.toggleHeaderStyle(TableCellHeaderStates.ROW);
22123
- });
22124
- clearTableSelection();
22125
- });
22126
- }, [editor, tableCellNode, clearTableSelection]);
22127
- const toggleTableColumnIsHeader = useCallback12(() => {
22128
- editor.update(() => {
22129
- const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
22130
- const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
22131
- const tableRows = tableNode.getChildren();
22132
- const maxRowsLength = Math.max(...tableRows.map((row) => row.getChildren().length));
22133
- if (tableColumnIndex >= maxRowsLength || tableColumnIndex < 0) {
22134
- throw new Error("Expected table cell to be inside of table row.");
22135
- }
22136
- for (let r = 0; r < tableRows.length; r++) {
22137
- const tableRow2 = tableRows[r];
22138
- if (!$isTableRowNode(tableRow2)) {
22139
- throw new Error("Expected table row");
22166
+ if (mouseStartPosRef.current) {
22167
+ const { x, y } = mouseStartPosRef.current;
22168
+ if (activeCell === null) {
22169
+ return;
22170
+ }
22171
+ const zoom = calculateZoomLevel(event.target);
22172
+ if (isHeightChanging(direction)) {
22173
+ const heightChange = (event.clientY - y) / zoom;
22174
+ updateRowHeight(heightChange);
22175
+ } else {
22176
+ const widthChange = (event.clientX - x) / zoom;
22177
+ updateColumnWidth(widthChange);
22178
+ }
22179
+ resetState();
22180
+ document.removeEventListener("mouseup", handler);
22140
22181
  }
22141
- const tableCells = tableRow2.getChildren();
22142
- if (tableColumnIndex >= tableCells.length) {
22143
- continue;
22182
+ };
22183
+ return handler;
22184
+ },
22185
+ [activeCell, resetState, updateColumnWidth, updateRowHeight]
22186
+ );
22187
+ const toggleResize = useCallback12(
22188
+ (direction) => (event) => {
22189
+ event.preventDefault();
22190
+ event.stopPropagation();
22191
+ if (!activeCell) {
22192
+ throw new Error("TableCellResizer: Expected active cell.");
22193
+ }
22194
+ mouseStartPosRef.current = {
22195
+ x: event.clientX,
22196
+ y: event.clientY
22197
+ };
22198
+ updateMouseCurrentPos(mouseStartPosRef.current);
22199
+ updateDraggingDirection(direction);
22200
+ document.addEventListener("mouseup", mouseUpHandler(direction));
22201
+ },
22202
+ [activeCell, mouseUpHandler]
22203
+ );
22204
+ const getResizers = useCallback12(() => {
22205
+ if (activeCell) {
22206
+ const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
22207
+ const parentRect = positioningAnchorEl.getBoundingClientRect();
22208
+ const zoom = calculateZoomLevel(activeCell.elem);
22209
+ const zoneWidth = 10;
22210
+ const styles = {
22211
+ bottom: {
22212
+ backgroundColor: "none",
22213
+ cursor: "row-resize",
22214
+ height: `${zoneWidth}px`,
22215
+ left: `${left - parentRect.left}px`,
22216
+ top: `${top - parentRect.top + positioningAnchorEl.scrollTop + height - zoneWidth / 2}px`,
22217
+ width: `${width}px`
22218
+ },
22219
+ right: {
22220
+ backgroundColor: "none",
22221
+ cursor: "col-resize",
22222
+ height: `${height}px`,
22223
+ left: `${left - parentRect.left + width - zoneWidth / 2}px`,
22224
+ top: `${top - parentRect.top + positioningAnchorEl.scrollTop}px`,
22225
+ width: `${zoneWidth}px`
22144
22226
  }
22145
- const tableCell = tableCells[tableColumnIndex];
22146
- if (!$isTableCellNode(tableCell)) {
22147
- throw new Error("Expected table cell");
22227
+ };
22228
+ const tableRect = tableRectRef.current;
22229
+ if (draggingDirection && mouseCurrentPos && tableRect) {
22230
+ if (isHeightChanging(draggingDirection)) {
22231
+ styles[draggingDirection].left = `${tableRect.left - parentRect.left}px`;
22232
+ styles[draggingDirection].top = `${(mouseCurrentPos.y - parentRect.top + positioningAnchorEl.scrollTop) / zoom}px`;
22233
+ styles[draggingDirection].height = "3px";
22234
+ styles[draggingDirection].width = `${tableRect.width}px`;
22235
+ } else {
22236
+ styles[draggingDirection].top = `${tableRect.top - parentRect.top + positioningAnchorEl.scrollTop}px`;
22237
+ styles[draggingDirection].left = `${(mouseCurrentPos.x - parentRect.left) / zoom}px`;
22238
+ styles[draggingDirection].width = "3px";
22239
+ styles[draggingDirection].height = `${tableRect.height}px`;
22148
22240
  }
22149
- tableCell.toggleHeaderStyle(TableCellHeaderStates.COLUMN);
22241
+ styles[draggingDirection].backgroundColor = "#adf";
22150
22242
  }
22151
- clearTableSelection();
22152
- });
22153
- }, [editor, tableCellNode, clearTableSelection]);
22154
- const menuItemCss = css99({
22155
- fontSize: "var(--fs-sm)"
22156
- });
22157
- return /* @__PURE__ */ jsxs87(
22158
- Menu,
22159
- {
22160
- menuTrigger: /* @__PURE__ */ jsx131(
22161
- TableActionMenuTrigger,
22162
- {
22163
- tableCellEl,
22164
- positioningAnchorEl
22165
- },
22166
- menuTriggerKey
22167
- ),
22168
- portalElement: menuPortalEl,
22169
- maxMenuHeight: "300px",
22170
- children: [
22171
- /* @__PURE__ */ jsxs87(
22172
- MenuItem,
22173
- {
22174
- onClick: () => {
22175
- insertTableRowAtSelection(false);
22176
- },
22177
- css: menuItemCss,
22178
- children: [
22179
- "Insert ",
22180
- selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
22181
- " above"
22182
- ]
22183
- }
22184
- ),
22185
- /* @__PURE__ */ jsxs87(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
22186
- "Insert ",
22187
- selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
22188
- " below"
22189
- ] }),
22190
- /* @__PURE__ */ jsx131(MenuItemSeparator, {}),
22191
- /* @__PURE__ */ jsxs87(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
22192
- "Insert ",
22193
- selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
22194
- " left"
22195
- ] }),
22196
- /* @__PURE__ */ jsxs87(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
22197
- "Insert ",
22198
- selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
22199
- " right"
22200
- ] }),
22201
- /* @__PURE__ */ jsx131(MenuItemSeparator, {}),
22202
- /* @__PURE__ */ jsx131(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
22203
- /* @__PURE__ */ jsx131(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
22204
- /* @__PURE__ */ jsx131(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
22205
- /* @__PURE__ */ jsx131(MenuItemSeparator, {}),
22206
- /* @__PURE__ */ jsxs87(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
22207
- (tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "Remove" : "Add",
22208
- " ",
22209
- "row header"
22210
- ] }),
22211
- /* @__PURE__ */ jsxs87(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
22212
- (tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN ? "Remove" : "Add",
22213
- " ",
22214
- "column header"
22215
- ] })
22216
- ]
22243
+ return styles;
22217
22244
  }
22245
+ return {
22246
+ bottom: null,
22247
+ left: null,
22248
+ right: null,
22249
+ top: null
22250
+ };
22251
+ }, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
22252
+ const resizerStyles = getResizers();
22253
+ return /* @__PURE__ */ jsx131("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs87(Fragment19, { children: [
22254
+ /* @__PURE__ */ jsx131(
22255
+ "div",
22256
+ {
22257
+ css: tableResizer,
22258
+ style: resizerStyles.right || void 0,
22259
+ onMouseDown: toggleResize("right")
22260
+ }
22261
+ ),
22262
+ /* @__PURE__ */ jsx131(
22263
+ "div",
22264
+ {
22265
+ css: tableResizer,
22266
+ style: resizerStyles.bottom || void 0,
22267
+ onMouseDown: toggleResize("bottom")
22268
+ }
22269
+ )
22270
+ ] }) });
22271
+ }
22272
+ function TableCellResizerPlugin({ positioningAnchorEl }) {
22273
+ const [editor] = useLexicalComposerContext6();
22274
+ const isEditable = useLexicalEditable2();
22275
+ return useMemo6(
22276
+ () => isEditable ? createPortal3(
22277
+ /* @__PURE__ */ jsx131(TableCellResizer, { editor, positioningAnchorEl }),
22278
+ positioningAnchorEl
22279
+ ) : null,
22280
+ [editor, isEditable, positioningAnchorEl]
22218
22281
  );
22219
22282
  }
22220
- function TableCellActionMenuContainer({
22221
- menuPortalEl,
22222
- positioningAnchorEl
22223
- }) {
22224
- const [editor] = useLexicalComposerContext5();
22225
- const [tableCellNode, setTableMenuCellNode] = useState18(null);
22226
- const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState18(null);
22227
- const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState18(null);
22228
- useEffect21(() => {
22229
- const newPortalEl = document.createElement("div");
22230
- setTableMenuCellMenuPortalEl(newPortalEl);
22231
- menuPortalEl.appendChild(newPortalEl);
22232
- return () => {
22233
- newPortalEl.remove();
22234
- };
22235
- }, [menuPortalEl]);
22236
- const setTableMenuCellNodeElem = useCallback12((elem) => {
22237
- if (elem) {
22238
- _setTableMenuCellNodeEl(elem);
22239
- } else {
22240
- _setTableMenuCellNodeEl(null);
22241
- }
22242
- }, []);
22243
- const $moveMenu = useCallback12(() => {
22244
- const selection = $getSelection4();
22245
- const nativeSelection = window.getSelection();
22246
- const activeElement = document.activeElement;
22247
- if (selection == null) {
22248
- setTableMenuCellNode(null);
22249
- return;
22250
- }
22251
- const rootElement = editor.getRootElement();
22252
- if ($isRangeSelection4(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
22253
- const tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
22254
- if (tableCellNodeFromSelection == null) {
22255
- setTableMenuCellNode(null);
22256
- setTableMenuCellNodeElem(null);
22257
- return;
22258
- }
22259
- const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
22260
- if (tableCellParentNodeDOM == null) {
22261
- setTableMenuCellNode(null);
22262
- setTableMenuCellNodeElem(null);
22263
- return;
22283
+
22284
+ // src/components/ParameterInputs/rich-text/TableSelectionPlugin.tsx
22285
+ import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
22286
+ import { $findCellNode } from "@lexical/table";
22287
+ import {
22288
+ $getSelection as $getSelection4,
22289
+ $isRangeSelection as $isRangeSelection4,
22290
+ $setSelection,
22291
+ COMMAND_PRIORITY_NORMAL as COMMAND_PRIORITY_NORMAL2,
22292
+ SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND2
22293
+ } from "lexical";
22294
+ import { useEffect as useEffect23, useState as useState19 } from "react";
22295
+ var TableSelectionPlugin = () => {
22296
+ const [editor] = useLexicalComposerContext7();
22297
+ const [closestTableCellNode, setClosestTableCellNode] = useState19(null);
22298
+ useEffect23(() => {
22299
+ return editor.registerCommand(
22300
+ SELECTION_CHANGE_COMMAND2,
22301
+ () => {
22302
+ editor.read(() => {
22303
+ const selection = $getSelection4();
22304
+ if (!$isRangeSelection4(selection) || !selection.isCollapsed()) {
22305
+ setClosestTableCellNode(null);
22306
+ return false;
22307
+ }
22308
+ const tableCellNode = $findCellNode(selection.anchor.getNode());
22309
+ if (tableCellNode === null) {
22310
+ setClosestTableCellNode(null);
22311
+ return false;
22312
+ }
22313
+ setClosestTableCellNode(tableCellNode);
22314
+ });
22315
+ return false;
22316
+ },
22317
+ COMMAND_PRIORITY_NORMAL2
22318
+ );
22319
+ }, [editor]);
22320
+ useEffect23(() => {
22321
+ const onControlA = (event) => {
22322
+ if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
22323
+ if (!closestTableCellNode) {
22324
+ return;
22325
+ }
22326
+ event.preventDefault();
22327
+ editor.update(() => {
22328
+ const selection = closestTableCellNode.select(0, closestTableCellNode.getChildrenSize());
22329
+ $setSelection(selection);
22330
+ });
22264
22331
  }
22265
- setTableMenuCellNode(tableCellNodeFromSelection);
22266
- setTableMenuCellNodeElem(tableCellParentNodeDOM);
22267
- } else if (!activeElement) {
22268
- setTableMenuCellNode(null);
22269
- setTableMenuCellNodeElem(null);
22270
- }
22271
- }, [editor, setTableMenuCellNodeElem]);
22272
- useEffect21(() => {
22273
- return editor.registerUpdateListener(() => {
22274
- editor.getEditorState().read(() => {
22275
- $moveMenu();
22276
- });
22332
+ };
22333
+ return editor.registerRootListener((rootElement, prevRootElement) => {
22334
+ rootElement == null ? void 0 : rootElement.addEventListener("keydown", onControlA);
22335
+ prevRootElement == null ? void 0 : prevRootElement.removeEventListener("keydown", onControlA);
22277
22336
  });
22278
- });
22279
- return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ jsx131(
22280
- TableActionMenu,
22281
- {
22282
- tableCellNode,
22283
- menuPortalEl: tableCellMenuPortalEl,
22284
- tableCellEl: tableCellNodeEl,
22285
- positioningAnchorEl
22286
- },
22287
- tableCellNode.getKey()
22288
- );
22289
- }
22290
- function TableActionMenuPlugin({
22291
- positioningAnchorEl,
22292
- menuPortalEl
22293
- }) {
22294
- const isEditable = useLexicalEditable();
22295
- return isEditable ? /* @__PURE__ */ jsx131(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
22296
- }
22337
+ }, [editor, closestTableCellNode]);
22338
+ return null;
22339
+ };
22340
+ var TableSelectionPlugin_default = TableSelectionPlugin;
22297
22341
 
22298
- // src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
22342
+ // src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
22299
22343
  import { css as css100 } from "@emotion/react";
22300
- import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
22301
- import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
22344
+ import { $createCodeNode } from "@lexical/code";
22302
22345
  import {
22303
- $computeTableMapSkipCellCheck,
22304
- $getTableNodeFromLexicalNodeOrThrow as $getTableNodeFromLexicalNodeOrThrow2,
22305
- $getTableRowIndexFromTableCellNode as $getTableRowIndexFromTableCellNode2,
22306
- $isTableCellNode as $isTableCellNode2,
22307
- $isTableRowNode as $isTableRowNode2
22308
- } from "@lexical/table";
22309
- import { calculateZoomLevel } from "@lexical/utils";
22310
- import { $getNearestNodeFromDOMNode } from "lexical";
22311
- import { useCallback as useCallback13, useEffect as useEffect22, useMemo as useMemo7, useRef as useRef14, useState as useState19 } from "react";
22312
- import { createPortal as createPortal3 } from "react-dom";
22313
- import { Fragment as Fragment20, jsx as jsx132, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
22314
- var MIN_ROW_HEIGHT = 33;
22315
- var MIN_COLUMN_WIDTH = 50;
22316
- var tableResizer = css100`
22317
- position: absolute;
22318
- z-index: var(--z-10);
22319
- `;
22320
- var fixedGetDOMCellFromTarget = (node) => {
22321
- let currentNode = node;
22322
- while (currentNode != null) {
22323
- const nodeName = currentNode.nodeName;
22324
- if (nodeName === "TD" || nodeName === "TH") {
22325
- const cell2 = currentNode._cell;
22326
- if (cell2 === void 0) {
22327
- return {
22328
- elem: currentNode
22329
- };
22346
+ $isListNode as $isListNode2,
22347
+ INSERT_ORDERED_LIST_COMMAND,
22348
+ INSERT_UNORDERED_LIST_COMMAND,
22349
+ ListNode as ListNode2,
22350
+ REMOVE_LIST_COMMAND
22351
+ } from "@lexical/list";
22352
+ import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
22353
+ import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
22354
+ import { $setBlocksType } from "@lexical/selection";
22355
+ import { $createTableNodeWithDimensions } from "@lexical/table";
22356
+ import { $findMatchingParent, $getNearestNodeOfType as $getNearestNodeOfType2 } from "@lexical/utils";
22357
+ import {
22358
+ $createParagraphNode as $createParagraphNode2,
22359
+ $getSelection as $getSelection5,
22360
+ $insertNodes as $insertNodes2,
22361
+ $isRangeSelection as $isRangeSelection5,
22362
+ $isRootOrShadowRoot,
22363
+ COMMAND_PRIORITY_CRITICAL as COMMAND_PRIORITY_CRITICAL2,
22364
+ FORMAT_TEXT_COMMAND,
22365
+ SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND3
22366
+ } from "lexical";
22367
+ import { useCallback as useCallback13, useEffect as useEffect24 } from "react";
22368
+
22369
+ // src/components/ParameterInputs/rich-text/toolbar/constants.ts
22370
+ var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
22371
+ ["bold", "format-bold"],
22372
+ ["italic", "format-italic"],
22373
+ ["underline", "format-underline"],
22374
+ ["strikethrough", "format-strike"],
22375
+ ["code", "format-code"],
22376
+ ["superscript", "format-superscript"],
22377
+ ["subscript", "format-subscript"]
22378
+ ]);
22379
+ var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
22380
+ var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
22381
+
22382
+ // src/components/ParameterInputs/rich-text/toolbar/useRichTextToolbarState.ts
22383
+ import { useMemo as useMemo7, useState as useState20 } from "react";
22384
+ var useRichTextToolbarState = ({ config }) => {
22385
+ var _a;
22386
+ const enabledBuiltInFormats = useMemo7(() => {
22387
+ return richTextBuiltInFormats.filter((format) => {
22388
+ var _a2, _b;
22389
+ return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
22390
+ });
22391
+ }, [config]);
22392
+ const enabledBuiltInElements = useMemo7(() => {
22393
+ return richTextBuiltInElements.filter((element) => {
22394
+ var _a2, _b;
22395
+ return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
22396
+ });
22397
+ }, [config]);
22398
+ const enabledBuiltInFormatsWithIcon = useMemo7(() => {
22399
+ return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
22400
+ }, [enabledBuiltInFormats]);
22401
+ const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
22402
+ (format) => !FORMATS_WITH_ICON.has(format.type)
22403
+ );
22404
+ const [activeFormats, setActiveFormats] = useState20([]);
22405
+ const visibleFormatsWithIcon = useMemo7(() => {
22406
+ const visibleFormats = /* @__PURE__ */ new Set();
22407
+ activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
22408
+ visibleFormats.add(type);
22409
+ });
22410
+ enabledBuiltInFormatsWithIcon.forEach((format) => {
22411
+ visibleFormats.add(format.type);
22412
+ });
22413
+ return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
22414
+ }, [activeFormats, enabledBuiltInFormatsWithIcon]);
22415
+ const visibleFormatsWithoutIcon = useMemo7(() => {
22416
+ const visibleFormats = /* @__PURE__ */ new Set();
22417
+ activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
22418
+ visibleFormats.add(type);
22419
+ });
22420
+ enabledBuiltInFormatsWithoutIcon.forEach((format) => {
22421
+ visibleFormats.add(format.type);
22422
+ });
22423
+ return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
22424
+ }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
22425
+ const [activeElement, setActiveElement] = useState20("paragraph");
22426
+ const enabledTextualElements = enabledBuiltInElements.filter(
22427
+ (element) => TEXTUAL_ELEMENTS.includes(element.type)
22428
+ );
22429
+ const visibleTextualElements = useMemo7(() => {
22430
+ if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
22431
+ return enabledTextualElements;
22432
+ }
22433
+ return richTextBuiltInElements.filter(
22434
+ (element) => {
22435
+ var _a2, _b;
22436
+ 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);
22330
22437
  }
22331
- return cell2;
22438
+ );
22439
+ }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
22440
+ const [isLink, setIsLink] = useState20(false);
22441
+ const linkElementVisible = useMemo7(() => {
22442
+ return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
22443
+ }, [isLink, enabledBuiltInElements]);
22444
+ const visibleLists = useMemo7(() => {
22445
+ return new Set(
22446
+ ["orderedList", "unorderedList"].filter(
22447
+ (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
22448
+ )
22449
+ );
22450
+ }, [activeElement, enabledBuiltInElements]);
22451
+ const quoteElementVisible = useMemo7(() => {
22452
+ return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
22453
+ }, [activeElement, enabledBuiltInElements]);
22454
+ const codeElementVisible = useMemo7(() => {
22455
+ return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
22456
+ }, [activeElement, enabledBuiltInElements]);
22457
+ const tableElementVisible = useMemo7(() => {
22458
+ return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
22459
+ }, [activeElement, enabledBuiltInElements]);
22460
+ const assetElementVisible = useMemo7(() => {
22461
+ return enabledBuiltInElements.some((element) => element.type === "asset") || activeElement === "asset";
22462
+ }, [activeElement, enabledBuiltInElements]);
22463
+ const visibleElementsWithIcons = useMemo7(() => {
22464
+ const visibleElements = /* @__PURE__ */ new Set();
22465
+ if (linkElementVisible) {
22466
+ visibleElements.add("link");
22332
22467
  }
22333
- currentNode = currentNode.parentNode;
22334
- }
22335
- return null;
22336
- };
22337
- function TableCellResizer({ editor, positioningAnchorEl }) {
22338
- const targetRef = useRef14(null);
22339
- const resizerRef = useRef14(null);
22340
- const tableRectRef = useRef14(null);
22341
- const mouseStartPosRef = useRef14(null);
22342
- const [mouseCurrentPos, updateMouseCurrentPos] = useState19(null);
22343
- const [activeCell, updateActiveCell] = useState19(null);
22344
- const [isMouseDown, updateIsMouseDown] = useState19(false);
22345
- const [draggingDirection, updateDraggingDirection] = useState19(null);
22346
- const resetState = useCallback13(() => {
22347
- updateActiveCell(null);
22348
- targetRef.current = null;
22349
- updateDraggingDirection(null);
22350
- mouseStartPosRef.current = null;
22351
- tableRectRef.current = null;
22352
- }, []);
22353
- const isMouseDownOnEvent = (event) => {
22354
- return (event.buttons & 1) === 1;
22355
- };
22356
- useEffect22(() => {
22357
- const onMouseMove = (event) => {
22358
- setTimeout(() => {
22359
- const target = event.target;
22360
- if (draggingDirection) {
22361
- updateMouseCurrentPos({
22362
- x: event.clientX,
22363
- y: event.clientY
22364
- });
22365
- return;
22366
- }
22367
- updateIsMouseDown(isMouseDownOnEvent(event));
22368
- if (resizerRef.current && resizerRef.current.contains(target)) {
22369
- return;
22370
- }
22371
- if (targetRef.current !== target) {
22372
- targetRef.current = target;
22373
- const cell2 = fixedGetDOMCellFromTarget(target);
22374
- if (cell2 && activeCell !== cell2) {
22375
- editor.update(() => {
22376
- const tableCellNode = $getNearestNodeFromDOMNode(cell2.elem);
22377
- if (!tableCellNode) {
22378
- throw new Error("TableCellResizer: Table cell node not found.");
22379
- }
22380
- const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
22381
- const tableElement2 = editor.getElementByKey(tableNode.getKey());
22382
- if (!tableElement2) {
22383
- throw new Error("TableCellResizer: Table element not found.");
22384
- }
22385
- targetRef.current = target;
22386
- tableRectRef.current = tableElement2.getBoundingClientRect();
22387
- updateActiveCell(cell2);
22388
- });
22389
- } else if (cell2 == null) {
22390
- resetState();
22391
- }
22392
- }
22393
- }, 0);
22394
- };
22395
- const onMouseDown = () => {
22396
- setTimeout(() => {
22397
- updateIsMouseDown(true);
22398
- }, 0);
22399
- };
22400
- const onMouseUp = () => {
22401
- setTimeout(() => {
22402
- updateIsMouseDown(false);
22403
- }, 0);
22404
- };
22405
- const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
22406
- rootElement == null ? void 0 : rootElement.addEventListener("mousemove", onMouseMove);
22407
- rootElement == null ? void 0 : rootElement.addEventListener("mousedown", onMouseDown);
22408
- rootElement == null ? void 0 : rootElement.addEventListener("mouseup", onMouseUp);
22409
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousemove", onMouseMove);
22410
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousedown", onMouseDown);
22411
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mouseup", onMouseUp);
22412
- });
22413
- return () => {
22414
- removeRootListener();
22415
- };
22416
- }, [activeCell, draggingDirection, editor, resetState]);
22417
- const isHeightChanging = (direction) => {
22418
- if (direction === "bottom") {
22419
- return true;
22468
+ if (visibleLists.size > 0) {
22469
+ visibleLists.forEach((type) => {
22470
+ visibleElements.add(type);
22471
+ });
22420
22472
  }
22421
- return false;
22422
- };
22423
- const updateRowHeight = useCallback13(
22424
- (heightChange) => {
22425
- if (!activeCell) {
22426
- throw new Error("TableCellResizer: Expected active cell.");
22427
- }
22428
- editor.update(
22429
- () => {
22430
- const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
22431
- if (!$isTableCellNode2(tableCellNode)) {
22432
- throw new Error("TableCellResizer: Table cell node not found.");
22433
- }
22434
- const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
22435
- const tableRowIndex = $getTableRowIndexFromTableCellNode2(tableCellNode);
22436
- const tableRows = tableNode.getChildren();
22437
- if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
22438
- throw new Error("Expected table cell to be inside of table row.");
22439
- }
22440
- const tableRow2 = tableRows[tableRowIndex];
22441
- if (!$isTableRowNode2(tableRow2)) {
22442
- throw new Error("Expected table row");
22443
- }
22444
- let height = tableRow2.getHeight();
22445
- if (height === void 0) {
22446
- const rowCells = tableRow2.getChildren();
22447
- height = Math.min(...rowCells.map((cell2) => {
22448
- var _a;
22449
- return (_a = getCellNodeHeight(cell2, editor)) != null ? _a : Infinity;
22450
- }));
22451
- }
22452
- const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
22453
- tableRow2.setHeight(newHeight);
22454
- },
22455
- { tag: "skip-scroll-into-view" }
22456
- );
22457
- },
22458
- [activeCell, editor]
22459
- );
22460
- const getCellNodeWidth = (cell2, activeEditor) => {
22461
- const width = cell2.getWidth();
22462
- if (width !== void 0) {
22463
- return width;
22473
+ return visibleElements;
22474
+ }, [linkElementVisible, visibleLists]);
22475
+ const visibleInsertElementsWithIcons = useMemo7(() => {
22476
+ const visibleElements = /* @__PURE__ */ new Set();
22477
+ if (quoteElementVisible) {
22478
+ visibleElements.add("quote");
22464
22479
  }
22465
- const domCellNode = activeEditor.getElementByKey(cell2.getKey());
22466
- if (domCellNode == null) {
22467
- return void 0;
22480
+ if (codeElementVisible) {
22481
+ visibleElements.add("code");
22468
22482
  }
22469
- const computedStyle = getComputedStyle(domCellNode);
22470
- return domCellNode.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
22471
- };
22472
- const getCellNodeHeight = (cell2, activeEditor) => {
22473
- const domCellNode = activeEditor.getElementByKey(cell2.getKey());
22474
- return domCellNode == null ? void 0 : domCellNode.clientHeight;
22475
- };
22476
- const getCellColumnIndex = (tableCellNode, tableMap) => {
22477
- for (let row = 0; row < tableMap.length; row++) {
22478
- for (let column = 0; column < tableMap[row].length; column++) {
22479
- if (tableMap[row][column].cell === tableCellNode) {
22480
- return column;
22481
- }
22482
- }
22483
+ if (tableElementVisible) {
22484
+ visibleElements.add("table");
22483
22485
  }
22486
+ if (assetElementVisible) {
22487
+ visibleElements.add("asset");
22488
+ }
22489
+ return visibleElements;
22490
+ }, [codeElementVisible, quoteElementVisible, tableElementVisible, assetElementVisible]);
22491
+ return {
22492
+ activeFormats,
22493
+ setActiveFormats,
22494
+ activeElement,
22495
+ setActiveElement,
22496
+ visibleFormatsWithIcon,
22497
+ visibleFormatsWithoutIcon,
22498
+ visibleTextualElements,
22499
+ isLink,
22500
+ setIsLink,
22501
+ linkElementVisible,
22502
+ visibleLists,
22503
+ quoteElementVisible,
22504
+ codeElementVisible,
22505
+ tableElementVisible,
22506
+ assetElementVisible,
22507
+ visibleElementsWithIcons,
22508
+ visibleInsertElementsWithIcons
22484
22509
  };
22485
- const updateColumnWidth = useCallback13(
22486
- (widthChange) => {
22487
- if (!activeCell) {
22488
- throw new Error("TableCellResizer: Expected active cell.");
22489
- }
22490
- editor.update(
22491
- () => {
22492
- const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
22493
- if (!$isTableCellNode2(tableCellNode)) {
22494
- throw new Error("TableCellResizer: Table cell node not found.");
22495
- }
22496
- const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
22497
- const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
22498
- const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
22499
- if (columnIndex === void 0) {
22500
- throw new Error("TableCellResizer: Table column not found.");
22501
- }
22502
- for (let row = 0; row < tableMap.length; row++) {
22503
- const cell2 = tableMap[row][columnIndex];
22504
- if (cell2.startRow === row && (columnIndex === tableMap[row].length - 1 || tableMap[row][columnIndex].cell !== tableMap[row][columnIndex + 1].cell)) {
22505
- const width = getCellNodeWidth(cell2.cell, editor);
22506
- if (width === void 0) {
22507
- continue;
22508
- }
22509
- const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
22510
- cell2.cell.setWidth(newWidth);
22510
+ };
22511
+
22512
+ // src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
22513
+ import { Fragment as Fragment20, jsx as jsx132, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
22514
+ var toolbar = css100`
22515
+ ${scrollbarStyles}
22516
+ background: var(--gray-50);
22517
+ border-radius: var(--rounded-base);
22518
+ display: flex;
22519
+ /* We add 1px because we use a 1px wide separator */
22520
+ gap: calc(var(--spacing-sm) + 1px);
22521
+ margin: 0 0 calc(var(--spacing-sm) + var(--spacing-xs)) 0;
22522
+ overflow: auto;
22523
+ padding: var(--spacing-sm);
22524
+ position: sticky;
22525
+ top: calc(var(--spacing-sm) * -2);
22526
+ z-index: 10;
22527
+ `;
22528
+ var toolbarGroup = css100`
22529
+ display: flex;
22530
+ flex-shrink: 0;
22531
+ gap: var(--spacing-xs);
22532
+ position: relative;
22533
+
22534
+ &:not(:first-child)::before {
22535
+ background-color: var(--gray-300);
22536
+ content: '';
22537
+ display: block;
22538
+ height: 24px;
22539
+ left: calc(var(--spacing-xs) * -1);
22540
+ position: absolute;
22541
+ top: 4px;
22542
+ width: 1px;
22543
+ }
22544
+ `;
22545
+ var richTextToolbarButton = css100`
22546
+ align-items: center;
22547
+ appearance: none;
22548
+ border: 0;
22549
+ border-radius: var(--rounded-sm);
22550
+ box-shadow: none;
22551
+ color: var(--gray-900);
22552
+ display: flex;
22553
+ flex-shrink: 0;
22554
+ height: 32px;
22555
+ justify-content: center;
22556
+ min-width: 32px;
22557
+ padding: 0 var(--spacing-sm);
22558
+ `;
22559
+ var richTextToolbarButtonActive = css100`
22560
+ background: var(--gray-200);
22561
+ `;
22562
+ var textStyleButton = css100`
22563
+ justify-content: space-between;
22564
+ min-width: 7rem;
22565
+ `;
22566
+ var toolbarIcon = css100`
22567
+ color: inherit;
22568
+ `;
22569
+ var toolbarChevron = css100`
22570
+ margin-left: var(--spacing-xs);
22571
+ `;
22572
+ var RichTextToolbarIcon = ({ icon }) => {
22573
+ return /* @__PURE__ */ jsx132(Icon, { icon, css: toolbarIcon, size: "1rem" });
22574
+ };
22575
+ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset }) => {
22576
+ const [editor] = useLexicalComposerContext8();
22577
+ const {
22578
+ activeElement,
22579
+ setActiveElement,
22580
+ activeFormats,
22581
+ setActiveFormats,
22582
+ visibleFormatsWithIcon,
22583
+ visibleFormatsWithoutIcon,
22584
+ visibleTextualElements,
22585
+ isLink,
22586
+ setIsLink,
22587
+ linkElementVisible,
22588
+ visibleLists,
22589
+ codeElementVisible,
22590
+ quoteElementVisible,
22591
+ visibleElementsWithIcons,
22592
+ visibleInsertElementsWithIcons,
22593
+ tableElementVisible,
22594
+ assetElementVisible
22595
+ } = useRichTextToolbarState({ config });
22596
+ const onSelectElement = (type) => {
22597
+ if (activeElement === type) {
22598
+ return;
22599
+ }
22600
+ editor.focus(() => {
22601
+ editor.update(() => {
22602
+ const selection = $getSelection5();
22603
+ if (HEADING_ELEMENTS.includes(type)) {
22604
+ $setBlocksType(selection, () => $createHeadingNode(type));
22605
+ } else if (type === "paragraph") {
22606
+ $setBlocksType(selection, () => $createParagraphNode2());
22607
+ } else if (type === "quote") {
22608
+ $setBlocksType(selection, () => $createQuoteNode());
22609
+ } else if (type === "code") {
22610
+ $setBlocksType(selection, () => $createCodeNode());
22611
+ } else if (type === "table" && onInsertTable) {
22612
+ onInsertTable().then((dimensions) => {
22613
+ if (!dimensions) {
22614
+ return;
22511
22615
  }
22512
- }
22513
- },
22514
- { tag: "skip-scroll-into-view" }
22515
- );
22516
- },
22517
- [activeCell, editor]
22518
- );
22519
- const mouseUpHandler = useCallback13(
22520
- (direction) => {
22521
- const handler = (event) => {
22522
- event.preventDefault();
22523
- event.stopPropagation();
22524
- if (!activeCell) {
22525
- throw new Error("TableCellResizer: Expected active cell.");
22526
- }
22527
- if (mouseStartPosRef.current) {
22528
- const { x, y } = mouseStartPosRef.current;
22529
- if (activeCell === null) {
22530
- return;
22531
- }
22532
- const zoom = calculateZoomLevel(event.target);
22533
- if (isHeightChanging(direction)) {
22534
- const heightChange = (event.clientY - y) / zoom;
22535
- updateRowHeight(heightChange);
22536
- } else {
22537
- const widthChange = (event.clientX - x) / zoom;
22538
- updateColumnWidth(widthChange);
22539
- }
22540
- resetState();
22541
- document.removeEventListener("mouseup", handler);
22542
- }
22543
- };
22544
- return handler;
22545
- },
22546
- [activeCell, resetState, updateColumnWidth, updateRowHeight]
22547
- );
22548
- const toggleResize = useCallback13(
22549
- (direction) => (event) => {
22550
- event.preventDefault();
22551
- event.stopPropagation();
22552
- if (!activeCell) {
22553
- throw new Error("TableCellResizer: Expected active cell.");
22554
- }
22555
- mouseStartPosRef.current = {
22556
- x: event.clientX,
22557
- y: event.clientY
22558
- };
22559
- updateMouseCurrentPos(mouseStartPosRef.current);
22560
- updateDraggingDirection(direction);
22561
- document.addEventListener("mouseup", mouseUpHandler(direction));
22562
- },
22563
- [activeCell, mouseUpHandler]
22564
- );
22565
- const getResizers = useCallback13(() => {
22566
- if (activeCell) {
22567
- const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
22568
- const parentRect = positioningAnchorEl.getBoundingClientRect();
22569
- const zoom = calculateZoomLevel(activeCell.elem);
22570
- const zoneWidth = 10;
22571
- const styles = {
22572
- bottom: {
22573
- backgroundColor: "none",
22574
- cursor: "row-resize",
22575
- height: `${zoneWidth}px`,
22576
- left: `${left - parentRect.left}px`,
22577
- top: `${top - parentRect.top + positioningAnchorEl.scrollTop + height - zoneWidth / 2}px`,
22578
- width: `${width}px`
22579
- },
22580
- right: {
22581
- backgroundColor: "none",
22582
- cursor: "col-resize",
22583
- height: `${height}px`,
22584
- left: `${left - parentRect.left + width - zoneWidth / 2}px`,
22585
- top: `${top - parentRect.top + positioningAnchorEl.scrollTop}px`,
22586
- width: `${zoneWidth}px`
22587
- }
22588
- };
22589
- const tableRect = tableRectRef.current;
22590
- if (draggingDirection && mouseCurrentPos && tableRect) {
22591
- if (isHeightChanging(draggingDirection)) {
22592
- styles[draggingDirection].left = `${tableRect.left - parentRect.left}px`;
22593
- styles[draggingDirection].top = `${(mouseCurrentPos.y - parentRect.top + positioningAnchorEl.scrollTop) / zoom}px`;
22594
- styles[draggingDirection].height = "3px";
22595
- styles[draggingDirection].width = `${tableRect.width}px`;
22596
- } else {
22597
- styles[draggingDirection].top = `${tableRect.top - parentRect.top + positioningAnchorEl.scrollTop}px`;
22598
- styles[draggingDirection].left = `${(mouseCurrentPos.x - parentRect.left) / zoom}px`;
22599
- styles[draggingDirection].width = "3px";
22600
- styles[draggingDirection].height = `${tableRect.height}px`;
22616
+ const { rows, columns } = dimensions;
22617
+ editor.focus(() => {
22618
+ editor.update(() => {
22619
+ $insertNodes2([$createTableNodeWithDimensions(rows, columns, false)]);
22620
+ });
22621
+ });
22622
+ });
22623
+ } else if (type === "asset" && onInsertAsset) {
22624
+ onInsertAsset();
22601
22625
  }
22602
- styles[draggingDirection].backgroundColor = "#adf";
22603
- }
22604
- return styles;
22605
- }
22606
- return {
22607
- bottom: null,
22608
- left: null,
22609
- right: null,
22610
- top: null
22611
- };
22612
- }, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
22613
- const resizerStyles = getResizers();
22614
- return /* @__PURE__ */ jsx132("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs88(Fragment20, { children: [
22615
- /* @__PURE__ */ jsx132(
22616
- "div",
22617
- {
22618
- css: tableResizer,
22619
- style: resizerStyles.right || void 0,
22620
- onMouseDown: toggleResize("right")
22626
+ });
22627
+ });
22628
+ };
22629
+ const updateToolbar = useCallback13(() => {
22630
+ const selection = $getSelection5();
22631
+ if (!$isRangeSelection5(selection)) {
22632
+ return;
22633
+ }
22634
+ const newActiveFormats = [];
22635
+ for (const format of richTextBuiltInFormats) {
22636
+ if (selection.hasFormat(format.type)) {
22637
+ newActiveFormats.push(format.type);
22621
22638
  }
22622
- ),
22623
- /* @__PURE__ */ jsx132(
22624
- "div",
22625
- {
22626
- css: tableResizer,
22627
- style: resizerStyles.bottom || void 0,
22628
- onMouseDown: toggleResize("bottom")
22639
+ }
22640
+ setActiveFormats(newActiveFormats);
22641
+ const anchorNode = selection.anchor.getNode();
22642
+ let element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent(anchorNode, (e) => {
22643
+ const parent = e.getParent();
22644
+ return parent !== null && $isRootOrShadowRoot(parent);
22645
+ });
22646
+ if (element === null) {
22647
+ element = anchorNode.getTopLevelElementOrThrow();
22648
+ }
22649
+ const elementKey = element.getKey();
22650
+ const elementDOM = editor.getElementByKey(elementKey);
22651
+ if (elementDOM !== null) {
22652
+ if ($isListNode2(element)) {
22653
+ const parentList = $getNearestNodeOfType2(anchorNode, ListNode2);
22654
+ const type = parentList ? parentList.getListType() : element.getListType();
22655
+ setActiveElement(type === "bullet" ? "unorderedList" : "orderedList");
22656
+ } else {
22657
+ const type = $isHeadingNode(element) ? element.getTag() : element.getType();
22658
+ setActiveElement(type);
22629
22659
  }
22630
- )
22631
- ] }) });
22632
- }
22633
- function TableCellResizerPlugin({ positioningAnchorEl }) {
22634
- const [editor] = useLexicalComposerContext6();
22635
- const isEditable = useLexicalEditable2();
22636
- return useMemo7(
22637
- () => isEditable ? createPortal3(
22638
- /* @__PURE__ */ jsx132(TableCellResizer, { editor, positioningAnchorEl }),
22639
- positioningAnchorEl
22640
- ) : null,
22641
- [editor, isEditable, positioningAnchorEl]
22642
- );
22643
- }
22644
-
22645
- // src/components/ParameterInputs/rich-text/TableSelectionPlugin.tsx
22646
- import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
22647
- import { $findCellNode } from "@lexical/table";
22648
- import {
22649
- $getSelection as $getSelection5,
22650
- $isRangeSelection as $isRangeSelection5,
22651
- $setSelection,
22652
- COMMAND_PRIORITY_NORMAL as COMMAND_PRIORITY_NORMAL2,
22653
- SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND3
22654
- } from "lexical";
22655
- import { useEffect as useEffect23, useState as useState20 } from "react";
22656
- var TableSelectionPlugin = () => {
22657
- const [editor] = useLexicalComposerContext7();
22658
- const [closestTableCellNode, setClosestTableCellNode] = useState20(null);
22659
- useEffect23(() => {
22660
+ }
22661
+ const node = getSelectedNode(selection);
22662
+ if (getLinkAncestor(node) !== null) {
22663
+ setIsLink(true);
22664
+ } else {
22665
+ setIsLink(false);
22666
+ }
22667
+ }, [editor, setActiveElement, setActiveFormats, setIsLink]);
22668
+ useEffect24(() => {
22660
22669
  return editor.registerCommand(
22661
22670
  SELECTION_CHANGE_COMMAND3,
22662
- () => {
22663
- editor.read(() => {
22664
- const selection = $getSelection5();
22665
- if (!$isRangeSelection5(selection) || !selection.isCollapsed()) {
22666
- setClosestTableCellNode(null);
22667
- return false;
22668
- }
22669
- const tableCellNode = $findCellNode(selection.anchor.getNode());
22670
- if (tableCellNode === null) {
22671
- setClosestTableCellNode(null);
22672
- return false;
22673
- }
22674
- setClosestTableCellNode(tableCellNode);
22675
- });
22671
+ (_payload) => {
22672
+ updateToolbar();
22676
22673
  return false;
22677
22674
  },
22678
- COMMAND_PRIORITY_NORMAL2
22675
+ COMMAND_PRIORITY_CRITICAL2
22679
22676
  );
22680
- }, [editor]);
22681
- useEffect23(() => {
22682
- const onControlA = (event) => {
22683
- if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
22684
- if (!closestTableCellNode) {
22685
- return;
22686
- }
22687
- event.preventDefault();
22688
- editor.update(() => {
22689
- const selection = closestTableCellNode.select(0, closestTableCellNode.getChildrenSize());
22690
- $setSelection(selection);
22677
+ }, [editor, updateToolbar]);
22678
+ useEffect24(() => {
22679
+ return editor.registerUpdateListener(({ editorState }) => {
22680
+ requestAnimationFrame(() => {
22681
+ editorState.read(() => {
22682
+ updateToolbar();
22691
22683
  });
22692
- }
22693
- };
22694
- return editor.registerRootListener((rootElement, prevRootElement) => {
22695
- rootElement == null ? void 0 : rootElement.addEventListener("keydown", onControlA);
22696
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("keydown", onControlA);
22684
+ });
22697
22685
  });
22698
- }, [editor, closestTableCellNode]);
22699
- return null;
22686
+ }, [editor, updateToolbar]);
22687
+ return /* @__PURE__ */ jsxs88("div", { css: toolbar, children: [
22688
+ /* @__PURE__ */ jsxs88(
22689
+ Menu,
22690
+ {
22691
+ menuTrigger: /* @__PURE__ */ jsxs88("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", children: [
22692
+ visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
22693
+ " ",
22694
+ /* @__PURE__ */ jsx132(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
22695
+ ] }),
22696
+ placement: "bottom-start",
22697
+ children: [
22698
+ [
22699
+ {
22700
+ label: "Normal",
22701
+ type: "paragraph"
22702
+ },
22703
+ ...visibleTextualElements
22704
+ ].map((element) => /* @__PURE__ */ jsx132(
22705
+ MenuItem,
22706
+ {
22707
+ onClick: () => {
22708
+ onSelectElement(element.type);
22709
+ },
22710
+ children: element.label
22711
+ },
22712
+ element.type
22713
+ )),
22714
+ visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx132(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
22715
+ ]
22716
+ }
22717
+ ),
22718
+ visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs88("div", { css: toolbarGroup, children: [
22719
+ visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx132(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx132(
22720
+ "button",
22721
+ {
22722
+ onClick: () => {
22723
+ editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
22724
+ },
22725
+ css: [
22726
+ richTextToolbarButton,
22727
+ activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
22728
+ ],
22729
+ children: /* @__PURE__ */ jsx132(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
22730
+ }
22731
+ ) }, format.type)),
22732
+ visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx132(
22733
+ Menu,
22734
+ {
22735
+ menuLabel: "Alternative text styles",
22736
+ menuTrigger: /* @__PURE__ */ jsx132("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx132(Icon, { icon: "more-alt", css: toolbarIcon }) }),
22737
+ placement: "bottom-start",
22738
+ children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx132(
22739
+ MenuItem,
22740
+ {
22741
+ onClick: () => {
22742
+ editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
22743
+ },
22744
+ children: format.label
22745
+ },
22746
+ format.type
22747
+ ))
22748
+ }
22749
+ ) : null
22750
+ ] }) : null,
22751
+ visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ jsxs88("div", { css: toolbarGroup, children: [
22752
+ linkElementVisible ? /* @__PURE__ */ jsx132(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx132(
22753
+ "button",
22754
+ {
22755
+ onClick: () => {
22756
+ isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
22757
+ },
22758
+ css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
22759
+ children: /* @__PURE__ */ jsx132(RichTextToolbarIcon, { icon: "link" })
22760
+ }
22761
+ ) }) : null,
22762
+ visibleLists.size > 0 ? /* @__PURE__ */ jsxs88(Fragment20, { children: [
22763
+ visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx132(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx132(
22764
+ "button",
22765
+ {
22766
+ onClick: () => {
22767
+ activeElement === "unorderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
22768
+ },
22769
+ css: [
22770
+ richTextToolbarButton,
22771
+ activeElement === "unorderedList" ? richTextToolbarButtonActive : null
22772
+ ],
22773
+ children: /* @__PURE__ */ jsx132(RichTextToolbarIcon, { icon: "layout-list" })
22774
+ }
22775
+ ) }) : null,
22776
+ visibleLists.has("orderedList") ? /* @__PURE__ */ jsx132(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx132(
22777
+ "button",
22778
+ {
22779
+ onClick: () => {
22780
+ activeElement === "orderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
22781
+ },
22782
+ css: [
22783
+ richTextToolbarButton,
22784
+ activeElement === "orderedList" ? richTextToolbarButtonActive : null
22785
+ ],
22786
+ children: /* @__PURE__ */ jsx132(RichTextToolbarIcon, { icon: "layout-list-numbered" })
22787
+ }
22788
+ ) }) : null
22789
+ ] }) : null,
22790
+ customControls ? customControls : null
22791
+ ] }) : null,
22792
+ visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ jsx132("div", { css: toolbarGroup, children: /* @__PURE__ */ jsxs88(
22793
+ Menu,
22794
+ {
22795
+ menuTrigger: /* @__PURE__ */ jsxs88("button", { css: richTextToolbarButton, title: "Insert block element", children: [
22796
+ "Insert",
22797
+ /* @__PURE__ */ jsx132(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
22798
+ ] }),
22799
+ placement: "bottom-start",
22800
+ children: [
22801
+ quoteElementVisible ? /* @__PURE__ */ jsx132(
22802
+ MenuItem,
22803
+ {
22804
+ onClick: () => {
22805
+ onSelectElement("quote");
22806
+ },
22807
+ icon: /* @__PURE__ */ jsx132(Icon, { icon: "quote", iconColor: "currentColor" }),
22808
+ children: "Quote"
22809
+ }
22810
+ ) : null,
22811
+ codeElementVisible ? /* @__PURE__ */ jsx132(
22812
+ MenuItem,
22813
+ {
22814
+ onClick: () => {
22815
+ onSelectElement("code");
22816
+ },
22817
+ icon: /* @__PURE__ */ jsx132(Icon, { icon: "code-slash", iconColor: "currentColor" }),
22818
+ children: "Code"
22819
+ }
22820
+ ) : null,
22821
+ tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ jsx132(
22822
+ MenuItem,
22823
+ {
22824
+ onClick: () => {
22825
+ onSelectElement("table");
22826
+ },
22827
+ icon: /* @__PURE__ */ jsx132(Icon, { icon: "view-grid", iconColor: "currentColor" }),
22828
+ children: "Table"
22829
+ }
22830
+ ) : null,
22831
+ assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ jsx132(
22832
+ MenuItem,
22833
+ {
22834
+ onClick: () => {
22835
+ onSelectElement("asset");
22836
+ },
22837
+ icon: /* @__PURE__ */ jsx132(Icon, { icon: "image", iconColor: "currentColor" }),
22838
+ children: "Asset"
22839
+ }
22840
+ ) : null
22841
+ ]
22842
+ }
22843
+ ) }) : null
22844
+ ] });
22700
22845
  };
22701
- var TableSelectionPlugin_default = TableSelectionPlugin;
22846
+ var RichTextToolbar_default = RichTextToolbar;
22702
22847
 
22703
22848
  // src/components/ParameterInputs/ParameterRichText.tsx
22704
22849
  import { Fragment as Fragment21, jsx as jsx133, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
@@ -22727,6 +22872,7 @@ var ParameterRichText = ({
22727
22872
  variables,
22728
22873
  customControls,
22729
22874
  onInsertTable,
22875
+ onInsertAsset,
22730
22876
  minimalInteractivity
22731
22877
  }) => {
22732
22878
  return /* @__PURE__ */ jsxs89(
@@ -22760,6 +22906,7 @@ var ParameterRichText = ({
22760
22906
  variables,
22761
22907
  customControls,
22762
22908
  onInsertTable,
22909
+ onInsertAsset,
22763
22910
  minimalInteractivity,
22764
22911
  children
22765
22912
  }
@@ -22802,7 +22949,7 @@ var editorContainer = css101`
22802
22949
  font-size: var(--fs-base);
22803
22950
  height: max-content;
22804
22951
  line-height: 1.2;
22805
- max-height: 300px;
22952
+ max-height: 320px;
22806
22953
  min-height: 50px;
22807
22954
  overflow-y: auto;
22808
22955
  padding: var(--spacing-sm);
@@ -22818,7 +22965,7 @@ var editorContainer = css101`
22818
22965
  }
22819
22966
 
22820
22967
  &[style*='height:'] {
22821
- min-height: 50px;
22968
+ min-height: calc(3rem + (2 * var(--spacing-sm)));
22822
22969
  max-height: unset;
22823
22970
  }
22824
22971
  `;
@@ -22838,11 +22985,12 @@ var editorPlaceholder = css101`
22838
22985
  left: calc(var(--spacing-sm) + 1px);
22839
22986
  pointer-events: none;
22840
22987
  position: absolute;
22841
- top: var(--spacing-sm);
22988
+ top: calc(1rem + var(--spacing-sm));
22842
22989
  user-select: none;
22843
22990
  `;
22844
22991
  var editorInput = css101`
22845
22992
  min-height: 100%;
22993
+ flex-grow: 1;
22846
22994
 
22847
22995
  &:focus,
22848
22996
  &:focus-within {
@@ -22865,6 +23013,7 @@ var ParameterRichTextInner = ({
22865
23013
  variables,
22866
23014
  customControls,
22867
23015
  onInsertTable,
23016
+ onInsertAsset,
22868
23017
  minimalInteractivity
22869
23018
  }) => {
22870
23019
  const lexicalConfig = {
@@ -22937,6 +23086,7 @@ var ParameterRichTextInner = ({
22937
23086
  variables,
22938
23087
  customControls,
22939
23088
  onInsertTable,
23089
+ onInsertAsset,
22940
23090
  minimalInteractivity,
22941
23091
  children
22942
23092
  }
@@ -22965,15 +23115,16 @@ var RichText = ({
22965
23115
  variables,
22966
23116
  customControls,
22967
23117
  onInsertTable,
23118
+ onInsertAsset,
22968
23119
  minimalInteractivity
22969
23120
  }) => {
22970
- const [editor] = useLexicalComposerContext8();
22971
- useEffect24(() => {
23121
+ const [editor] = useLexicalComposerContext9();
23122
+ useEffect25(() => {
22972
23123
  if (onRichTextInit) {
22973
23124
  onRichTextInit(editor);
22974
23125
  }
22975
23126
  }, [editor, onRichTextInit]);
22976
- useEffect24(() => {
23127
+ useEffect25(() => {
22977
23128
  const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
22978
23129
  requestAnimationFrame(() => {
22979
23130
  if (!deepEqual2(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -22985,7 +23136,7 @@ var RichText = ({
22985
23136
  removeUpdateListener();
22986
23137
  };
22987
23138
  }, [editor, onChange]);
22988
- useEffect24(() => {
23139
+ useEffect25(() => {
22989
23140
  editor.setEditable(!readOnly);
22990
23141
  }, [editor, readOnly]);
22991
23142
  const [editorContainerRef, setEditorContainerRef] = useState21(null);
@@ -23001,7 +23152,15 @@ var RichText = ({
23001
23152
  }
23002
23153
  };
23003
23154
  return /* @__PURE__ */ jsxs89(Fragment21, { children: [
23004
- readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx133(RichTextToolbar_default, { config, customControls, onInsertTable }),
23155
+ readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx133(
23156
+ RichTextToolbar_default,
23157
+ {
23158
+ config,
23159
+ customControls,
23160
+ onInsertTable,
23161
+ onInsertAsset
23162
+ }
23163
+ ),
23005
23164
  /* @__PURE__ */ jsxs89("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
23006
23165
  /* @__PURE__ */ jsxs89(
23007
23166
  "div",
@@ -23048,7 +23207,8 @@ var RichText = ({
23048
23207
  positioningAnchorEl: editorContainerRef
23049
23208
  }
23050
23209
  ) : null,
23051
- /* @__PURE__ */ jsx133(TableSelectionPlugin_default, {})
23210
+ /* @__PURE__ */ jsx133(TableSelectionPlugin_default, {}),
23211
+ /* @__PURE__ */ jsx133(ImprovedAssetSelectionPlugin_default, {})
23052
23212
  ] })
23053
23213
  ] });
23054
23214
  };
@@ -23325,7 +23485,7 @@ var ProgressListItem = ({
23325
23485
  // src/components/SegmentedControl/SegmentedControl.tsx
23326
23486
  import { css as css106 } from "@emotion/react";
23327
23487
  import { CgCheck as CgCheck5 } from "@react-icons/all-files/cg/CgCheck";
23328
- import { useCallback as useCallback14, useEffect as useEffect25, useMemo as useMemo9, useRef as useRef15, useState as useState22 } from "react";
23488
+ import { useCallback as useCallback14, useEffect as useEffect26, useMemo as useMemo9, useRef as useRef14, useState as useState22 } from "react";
23329
23489
 
23330
23490
  // src/components/SegmentedControl/SegmentedControl.styles.ts
23331
23491
  import { css as css105 } from "@emotion/react";
@@ -23516,7 +23676,7 @@ var SegmentedControl = ({
23516
23676
  currentBackgroundColor = "white",
23517
23677
  ...props
23518
23678
  }) => {
23519
- const wrapperRef = useRef15(null);
23679
+ const wrapperRef = useRef14(null);
23520
23680
  const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState22(false);
23521
23681
  const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState22(false);
23522
23682
  const onOptionChange = useCallback14(
@@ -23539,7 +23699,7 @@ var SegmentedControl = ({
23539
23699
  const isIconOnly = useMemo9(() => {
23540
23700
  return options.every((option) => option && option.icon && !option.label);
23541
23701
  }, [options]);
23542
- useEffect25(() => {
23702
+ useEffect26(() => {
23543
23703
  const wrapperElement = wrapperRef.current;
23544
23704
  const onScroll = () => {
23545
23705
  if (!wrapperElement) {
@@ -23784,7 +23944,7 @@ var Switch = forwardRef26(
23784
23944
  );
23785
23945
 
23786
23946
  // src/components/Table/Table.tsx
23787
- import * as React25 from "react";
23947
+ import * as React24 from "react";
23788
23948
 
23789
23949
  // src/components/Table/Table.styles.ts
23790
23950
  import { css as css109 } from "@emotion/react";
@@ -23823,37 +23983,37 @@ var tableCellHead = css109`
23823
23983
 
23824
23984
  // src/components/Table/Table.tsx
23825
23985
  import { jsx as jsx142 } from "@emotion/react/jsx-runtime";
23826
- var Table = React25.forwardRef(
23986
+ var Table = React24.forwardRef(
23827
23987
  ({ children, cellPadding, ...otherProps }, ref) => {
23828
23988
  return /* @__PURE__ */ jsx142("table", { ref, css: table({ cellPadding }), ...otherProps, children });
23829
23989
  }
23830
23990
  );
23831
- var TableHead = React25.forwardRef(
23991
+ var TableHead = React24.forwardRef(
23832
23992
  ({ children, ...otherProps }, ref) => {
23833
23993
  return /* @__PURE__ */ jsx142("thead", { ref, css: tableHead, ...otherProps, children });
23834
23994
  }
23835
23995
  );
23836
- var TableBody = React25.forwardRef(
23996
+ var TableBody = React24.forwardRef(
23837
23997
  ({ children, ...otherProps }, ref) => {
23838
23998
  return /* @__PURE__ */ jsx142("tbody", { ref, ...otherProps, children });
23839
23999
  }
23840
24000
  );
23841
- var TableFoot = React25.forwardRef(
24001
+ var TableFoot = React24.forwardRef(
23842
24002
  ({ children, ...otherProps }, ref) => {
23843
24003
  return /* @__PURE__ */ jsx142("tfoot", { ref, ...otherProps, children });
23844
24004
  }
23845
24005
  );
23846
- var TableRow = React25.forwardRef(
24006
+ var TableRow = React24.forwardRef(
23847
24007
  ({ children, ...otherProps }, ref) => {
23848
24008
  return /* @__PURE__ */ jsx142("tr", { ref, css: tableRow, ...otherProps, children });
23849
24009
  }
23850
24010
  );
23851
- var TableCellHead = React25.forwardRef(
24011
+ var TableCellHead = React24.forwardRef(
23852
24012
  ({ children, ...otherProps }, ref) => {
23853
24013
  return /* @__PURE__ */ jsx142("th", { ref, css: tableCellHead, ...otherProps, children });
23854
24014
  }
23855
24015
  );
23856
- var TableCellData = React25.forwardRef(
24016
+ var TableCellData = React24.forwardRef(
23857
24017
  ({ children, ...otherProps }, ref) => {
23858
24018
  return /* @__PURE__ */ jsx142("td", { ref, ...otherProps, children });
23859
24019
  }
@@ -23867,7 +24027,7 @@ import {
23867
24027
  TabProvider as AriakitTabProvider,
23868
24028
  useTabStore as useAriakitTabStore
23869
24029
  } from "@ariakit/react";
23870
- import { useCallback as useCallback15, useEffect as useEffect26, useMemo as useMemo10 } from "react";
24030
+ import { useCallback as useCallback15, useEffect as useEffect27, useMemo as useMemo10 } from "react";
23871
24031
 
23872
24032
  // src/components/Tabs/Tabs.styles.ts
23873
24033
  import { css as css110 } from "@emotion/react";
@@ -23927,7 +24087,7 @@ var Tabs = ({
23927
24087
  },
23928
24088
  [onSelectedIdChange, useHashForState]
23929
24089
  );
23930
- useEffect26(() => {
24090
+ useEffect27(() => {
23931
24091
  if (selected && selected !== tab.getState().activeId) {
23932
24092
  tab.setSelectedId(selected);
23933
24093
  }