@uniformdev/design-system 19.186.2-alpha.14 → 19.186.4-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -22292,11 +22292,11 @@ var ParameterNameAndPublicIdInput = ({
22292
22292
 
22293
22293
  // src/components/ParameterInputs/ParameterRichText.tsx
22294
22294
  init_emotion_jsx_shim();
22295
- var import_react158 = require("@emotion/react");
22295
+ var import_react156 = require("@emotion/react");
22296
22296
  var import_list3 = require("@lexical/list");
22297
22297
  var import_markdown = require("@lexical/markdown");
22298
22298
  var import_LexicalComposer = require("@lexical/react/LexicalComposer");
22299
- var import_LexicalComposerContext9 = require("@lexical/react/LexicalComposerContext");
22299
+ var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
22300
22300
  var import_LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
22301
22301
  var import_LexicalErrorBoundary = __toESM(require("@lexical/react/LexicalErrorBoundary"));
22302
22302
  var import_LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin");
@@ -22309,12 +22309,6 @@ var import_table5 = require("@lexical/table");
22309
22309
 
22310
22310
  // ../richtext/dist/index.mjs
22311
22311
  init_emotion_jsx_shim();
22312
- function isRichTextNode(node) {
22313
- return !!node && typeof node === "object" && "type" in node;
22314
- }
22315
- function isRichTextNodeType(node, type) {
22316
- return isRichTextNode(node) && node.type === type;
22317
- }
22318
22312
  var richTextBuiltInElements = [
22319
22313
  {
22320
22314
  label: "Heading 1",
@@ -22364,10 +22358,6 @@ var richTextBuiltInElements = [
22364
22358
  label: "Table",
22365
22359
  type: "table"
22366
22360
  },
22367
- {
22368
- label: "Asset",
22369
- type: "asset"
22370
- },
22371
22361
  {
22372
22362
  label: "Dynamic Token",
22373
22363
  type: "variable"
@@ -22414,8 +22404,8 @@ var getLabelForElement = (type) => {
22414
22404
 
22415
22405
  // src/components/ParameterInputs/ParameterRichText.tsx
22416
22406
  var import_fast_equals2 = require("fast-equals");
22417
- var import_lexical10 = require("lexical");
22418
- var import_react159 = require("react");
22407
+ var import_lexical9 = require("lexical");
22408
+ var import_react157 = require("react");
22419
22409
 
22420
22410
  // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
22421
22411
  init_emotion_jsx_shim();
@@ -22697,75 +22687,20 @@ var tableHeaderElement = import_css2.css`
22697
22687
  width: 7rem;
22698
22688
  `;
22699
22689
 
22700
- // src/components/ParameterInputs/rich-text/ImprovedAssetSelectionPlugin.tsx
22701
- init_emotion_jsx_shim();
22702
- var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
22703
- var import_utils6 = require("@lexical/utils");
22704
- var import_lexical2 = require("lexical");
22705
- var import_react146 = require("react");
22706
- var ImprovedAssetSelectionPlugin = () => {
22707
- const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
22708
- (0, import_react146.useEffect)(() => {
22709
- editor.getRootElement();
22710
- const onRootClick = (event) => {
22711
- if (event.target !== editor.getRootElement()) {
22712
- return;
22713
- }
22714
- const clickArea = event.offsetY <= 60 ? "top" : "bottom";
22715
- const state = editor.getEditorState().toJSON();
22716
- const firstNode = state.root.children[0];
22717
- const lastNode = state.root.children.at(-1);
22718
- if (isRichTextNodeType(firstNode, "asset") && clickArea === "top") {
22719
- editor.update(() => {
22720
- (0, import_utils6.$insertFirst)((0, import_lexical2.$getRoot)(), (0, import_lexical2.$createParagraphNode)());
22721
- requestAnimationFrame(() => {
22722
- var _a, _b;
22723
- (_b = (_a = editor.getRootElement()) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.scrollTo({
22724
- top: 0,
22725
- behavior: "instant"
22726
- });
22727
- });
22728
- });
22729
- } else if (isRichTextNodeType(lastNode, "asset") && clickArea === "bottom") {
22730
- editor.update(() => {
22731
- (0, import_lexical2.$getRoot)().selectEnd();
22732
- (0, import_lexical2.$insertNodes)([(0, import_lexical2.$createParagraphNode)()]);
22733
- requestAnimationFrame(() => {
22734
- var _a, _b, _c, _d;
22735
- (_d = (_a = editor.getRootElement()) == null ? void 0 : _a.parentElement) == null ? void 0 : _d.scrollTo({
22736
- top: (_c = (_b = editor.getRootElement()) == null ? void 0 : _b.parentElement) == null ? void 0 : _c.scrollHeight,
22737
- behavior: "instant"
22738
- });
22739
- });
22740
- });
22741
- }
22742
- };
22743
- const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
22744
- rootElement == null ? void 0 : rootElement.addEventListener("click", onRootClick);
22745
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("click", onRootClick);
22746
- });
22747
- return () => {
22748
- removeRootListener();
22749
- };
22750
- }, [editor]);
22751
- return null;
22752
- };
22753
- var ImprovedAssetSelectionPlugin_default = ImprovedAssetSelectionPlugin;
22754
-
22755
22690
  // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
22756
22691
  init_emotion_jsx_shim();
22757
- var import_react147 = require("@emotion/react");
22758
- var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
22692
+ var import_react146 = require("@emotion/react");
22693
+ var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
22759
22694
  var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
22760
- var import_utils7 = require("@lexical/utils");
22695
+ var import_utils6 = require("@lexical/utils");
22761
22696
  var import_fast_equals = require("fast-equals");
22762
- var import_lexical4 = require("lexical");
22763
- var import_react148 = require("react");
22697
+ var import_lexical3 = require("lexical");
22698
+ var import_react147 = require("react");
22764
22699
 
22765
22700
  // src/components/ParameterInputs/rich-text/utils.ts
22766
22701
  init_emotion_jsx_shim();
22767
22702
  var import_selection = require("@lexical/selection");
22768
- var import_lexical3 = require("lexical");
22703
+ var import_lexical2 = require("lexical");
22769
22704
  var getElementNodesInSelection = (selection) => {
22770
22705
  const nodesInSelection = selection.getNodes();
22771
22706
  if (nodesInSelection.length === 0) {
@@ -22774,7 +22709,7 @@ var getElementNodesInSelection = (selection) => {
22774
22709
  selection.focus.getNode().getParentOrThrow()
22775
22710
  ]);
22776
22711
  }
22777
- return new Set(nodesInSelection.map((node) => (0, import_lexical3.$isElementNode)(node) ? node : node.getParentOrThrow()));
22712
+ return new Set(nodesInSelection.map((node) => (0, import_lexical2.$isElementNode)(node) ? node : node.getParentOrThrow()));
22778
22713
  };
22779
22714
  var getAncestor = (node, predicate) => {
22780
22715
  let parent = node;
@@ -22821,7 +22756,7 @@ var guessLinkTypeFromPath = (path) => {
22821
22756
  };
22822
22757
  function convertAnchorElement(domNode) {
22823
22758
  let node = null;
22824
- if (!(0, import_utils7.isHTMLAnchorElement)(domNode)) {
22759
+ if (!(0, import_utils6.isHTMLAnchorElement)(domNode)) {
22825
22760
  return { node };
22826
22761
  }
22827
22762
  const textContent = domNode.textContent;
@@ -22878,12 +22813,14 @@ function convertAnchorElement(domNode) {
22878
22813
  nodeId,
22879
22814
  dynamicInputValues
22880
22815
  };
22881
- if (isProjectMapLinkValue(value) || isNonProjectMapLinkValue(value)) {
22816
+ if (isProjectMapLinkValue(value)) {
22817
+ node = $createLinkNode(value);
22818
+ } else if (isNonProjectMapLinkValue(value)) {
22882
22819
  node = $createLinkNode(value);
22883
22820
  }
22884
22821
  return { node };
22885
22822
  }
22886
- var LinkNode = class _LinkNode extends import_lexical4.ElementNode {
22823
+ var LinkNode = class _LinkNode extends import_lexical3.ElementNode {
22887
22824
  static getType() {
22888
22825
  return "link";
22889
22826
  }
@@ -22928,7 +22865,7 @@ var LinkNode = class _LinkNode extends import_lexical4.ElementNode {
22928
22865
  element.setAttribute("href", `mailto:${this.__link.path}`);
22929
22866
  }
22930
22867
  }
22931
- (0, import_utils7.addClassNamesToElement)(element, config.theme.link);
22868
+ (0, import_utils6.addClassNamesToElement)(element, config.theme.link);
22932
22869
  return element;
22933
22870
  }
22934
22871
  updateDOM(prevNode, a) {
@@ -22956,7 +22893,7 @@ var LinkNode = class _LinkNode extends import_lexical4.ElementNode {
22956
22893
  }
22957
22894
  insertNewAfter(selection, restoreSelection = true) {
22958
22895
  const element = this.getParentOrThrow().insertNewAfter(selection, restoreSelection);
22959
- if ((0, import_lexical4.$isElementNode)(element)) {
22896
+ if ((0, import_lexical3.$isElementNode)(element)) {
22960
22897
  const linkNode = $createLinkNode(
22961
22898
  "nodeId" in this.__link ? {
22962
22899
  nodeId: this.__link.nodeId,
@@ -22987,7 +22924,7 @@ var LinkNode = class _LinkNode extends import_lexical4.ElementNode {
22987
22924
  }
22988
22925
  };
22989
22926
  function $createLinkNode(props) {
22990
- return (0, import_lexical4.$applyNodeReplacement)(new LinkNode(props));
22927
+ return (0, import_lexical3.$applyNodeReplacement)(new LinkNode(props));
22991
22928
  }
22992
22929
  function $isLinkNode(node) {
22993
22930
  return node instanceof LinkNode;
@@ -23000,14 +22937,14 @@ function removeLinkNode(node) {
23000
22937
  node.remove();
23001
22938
  }
23002
22939
  function removeLinkNodeFromSelection() {
23003
- const selection = (0, import_lexical4.$getSelection)();
23004
- if (!(0, import_lexical4.$isRangeSelection)(selection)) {
22940
+ const selection = (0, import_lexical3.$getSelection)();
22941
+ if (!(0, import_lexical3.$isRangeSelection)(selection)) {
23005
22942
  return;
23006
22943
  }
23007
22944
  const nodes = selection.extract();
23008
22945
  const linkNodesFound = /* @__PURE__ */ new Set();
23009
22946
  for (const node of nodes) {
23010
- if ((0, import_lexical4.$isElementNode)(node) && !node.isInline()) {
22947
+ if ((0, import_lexical3.$isElementNode)(node) && !node.isInline()) {
23011
22948
  continue;
23012
22949
  }
23013
22950
  const linkNodeAncestor = getLinkAncestor(node);
@@ -23021,21 +22958,17 @@ function removeLinkNodeFromSelection() {
23021
22958
  }
23022
22959
  function upsertLinkNode(props) {
23023
22960
  var _a, _b, _c, _d, _e;
23024
- const selection = (0, import_lexical4.$getSelection)();
23025
- if (!(0, import_lexical4.$isRangeSelection)(selection)) {
22961
+ const selection = (0, import_lexical3.$getSelection)();
22962
+ if (!(0, import_lexical3.$isRangeSelection)(selection)) {
23026
22963
  return;
23027
22964
  }
23028
22965
  const nodes = selection.extract();
23029
22966
  const touchedNodes = [];
23030
22967
  for (const node of nodes) {
23031
- if ((0, import_lexical4.$isElementNode)(node) && !node.isInline()) {
22968
+ if ((0, import_lexical3.$isElementNode)(node) && !node.isInline()) {
23032
22969
  continue;
23033
22970
  }
23034
22971
  const linkNodeAncestor = getLinkAncestor(node);
23035
- if ($isLinkNode(node)) {
23036
- node.setLink(props);
23037
- continue;
23038
- }
23039
22972
  if (!linkNodeAncestor) {
23040
22973
  const newLinkNode = $createLinkNode(props);
23041
22974
  node.insertBefore(newLinkNode);
@@ -23080,23 +23013,23 @@ function upsertLinkNode(props) {
23080
23013
  }
23081
23014
  }
23082
23015
  }
23083
- var REMOVE_LINK_NODE_COMMAND = (0, import_lexical4.createCommand)("REMOVE_LINK_NODE_COMMAND");
23084
- var UPSERT_LINK_NODE_COMMAND = (0, import_lexical4.createCommand)("UPSERT_LINK_NODE_COMMAND");
23085
- var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical4.createCommand)(
23016
+ var REMOVE_LINK_NODE_COMMAND = (0, import_lexical3.createCommand)("REMOVE_LINK_NODE_COMMAND");
23017
+ var UPSERT_LINK_NODE_COMMAND = (0, import_lexical3.createCommand)("UPSERT_LINK_NODE_COMMAND");
23018
+ var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical3.createCommand)(
23086
23019
  "OPEN_LINK_NODE_MODAL_COMMAND"
23087
23020
  );
23088
23021
  var LINK_POPOVER_OFFSET_X = 0;
23089
23022
  var LINK_POPOVER_OFFSET_Y = 8;
23090
- var linkPopover = import_react147.css`
23023
+ var linkPopover = import_react146.css`
23091
23024
  position: absolute;
23092
23025
  z-index: 11;
23093
23026
  `;
23094
- var linkPopoverContainer = import_react147.css`
23027
+ var linkPopoverContainer = import_react146.css`
23095
23028
  ${Popover()};
23096
23029
  align-items: center;
23097
23030
  display: flex;
23098
23031
  `;
23099
- var linkPopoverAnchor = import_react147.css`
23032
+ var linkPopoverAnchor = import_react146.css`
23100
23033
  ${link}
23101
23034
  ${linkColorDefault}
23102
23035
  `;
@@ -23108,29 +23041,29 @@ function LinkNodePlugin({
23108
23041
  const parsePath = getBoundPath != null ? getBoundPath : function(path) {
23109
23042
  return path;
23110
23043
  };
23111
- const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
23112
- const [linkPopoverState, setLinkPopoverState] = (0, import_react148.useState)();
23113
- const linkPopoverElRef = (0, import_react148.useRef)(null);
23114
- const [isEditorFocused, setIsEditorFocused] = (0, import_react148.useState)(false);
23115
- const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react148.useState)(false);
23116
- (0, import_react148.useEffect)(() => {
23044
+ const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
23045
+ const [linkPopoverState, setLinkPopoverState] = (0, import_react147.useState)();
23046
+ const linkPopoverElRef = (0, import_react147.useRef)(null);
23047
+ const [isEditorFocused, setIsEditorFocused] = (0, import_react147.useState)(false);
23048
+ const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react147.useState)(false);
23049
+ (0, import_react147.useEffect)(() => {
23117
23050
  if (!isEditorFocused && !isLinkPopoverFocused) {
23118
23051
  setLinkPopoverState(void 0);
23119
23052
  return;
23120
23053
  }
23121
23054
  }, [isEditorFocused, isLinkPopoverFocused]);
23122
- (0, import_react148.useEffect)(() => {
23055
+ (0, import_react147.useEffect)(() => {
23123
23056
  if (!editor.hasNodes([LinkNode])) {
23124
23057
  throw new Error("LinkNode not registered on editor");
23125
23058
  }
23126
- return (0, import_utils7.mergeRegister)(
23059
+ return (0, import_utils6.mergeRegister)(
23127
23060
  editor.registerCommand(
23128
23061
  UPSERT_LINK_NODE_COMMAND,
23129
23062
  (payload) => {
23130
23063
  upsertLinkNode(payload);
23131
23064
  return true;
23132
23065
  },
23133
- import_lexical4.COMMAND_PRIORITY_EDITOR
23066
+ import_lexical3.COMMAND_PRIORITY_EDITOR
23134
23067
  ),
23135
23068
  editor.registerCommand(
23136
23069
  REMOVE_LINK_NODE_COMMAND,
@@ -23138,7 +23071,7 @@ function LinkNodePlugin({
23138
23071
  removeLinkNodeFromSelection();
23139
23072
  return true;
23140
23073
  },
23141
- import_lexical4.COMMAND_PRIORITY_EDITOR
23074
+ import_lexical3.COMMAND_PRIORITY_EDITOR
23142
23075
  ),
23143
23076
  editor.registerCommand(
23144
23077
  OPEN_LINK_NODE_MODAL_COMMAND,
@@ -23157,18 +23090,18 @@ function LinkNodePlugin({
23157
23090
  });
23158
23091
  return true;
23159
23092
  },
23160
- import_lexical4.COMMAND_PRIORITY_EDITOR
23093
+ import_lexical3.COMMAND_PRIORITY_EDITOR
23161
23094
  ),
23162
23095
  editor.registerCommand(
23163
- import_lexical4.FOCUS_COMMAND,
23096
+ import_lexical3.FOCUS_COMMAND,
23164
23097
  () => {
23165
23098
  setIsEditorFocused(true);
23166
23099
  return true;
23167
23100
  },
23168
- import_lexical4.COMMAND_PRIORITY_EDITOR
23101
+ import_lexical3.COMMAND_PRIORITY_EDITOR
23169
23102
  ),
23170
23103
  editor.registerCommand(
23171
- import_lexical4.BLUR_COMMAND,
23104
+ import_lexical3.BLUR_COMMAND,
23172
23105
  () => {
23173
23106
  requestAnimationFrame(() => {
23174
23107
  if (linkPopoverElRef.current !== null) {
@@ -23184,51 +23117,16 @@ function LinkNodePlugin({
23184
23117
  });
23185
23118
  return true;
23186
23119
  },
23187
- import_lexical4.COMMAND_PRIORITY_EDITOR
23188
- ),
23189
- // Support pasting of links from clipboard
23190
- editor.registerCommand(
23191
- import_lexical4.PASTE_COMMAND,
23192
- (event) => {
23193
- const selection = (0, import_lexical4.$getSelection)();
23194
- if (!(0, import_lexical4.$isRangeSelection)(selection) || selection.isCollapsed() || !(0, import_utils7.objectKlassEquals)(event, ClipboardEvent)) {
23195
- return false;
23196
- }
23197
- const clipboardEvent = event;
23198
- if (clipboardEvent.clipboardData === null) {
23199
- return false;
23200
- }
23201
- const clipboardText = clipboardEvent.clipboardData.getData("text");
23202
- if (!isValidUrl(clipboardText)) {
23203
- return false;
23204
- }
23205
- if (selection.getNodes().some((node) => (0, import_lexical4.$isElementNode)(node) && !$isLinkNode(node))) {
23206
- return false;
23207
- }
23208
- let path = clipboardText;
23209
- const type = guessLinkTypeFromPath(path);
23210
- if (type === "email" && path.startsWith("mailto:")) {
23211
- path = path.replace("mailto:", "");
23212
- } else if (type === "tel" && path.startsWith("tel:")) {
23213
- path = path.replace("tel:", "");
23214
- }
23215
- upsertLinkNode({
23216
- path,
23217
- type
23218
- });
23219
- event.preventDefault();
23220
- return true;
23221
- },
23222
- import_lexical4.COMMAND_PRIORITY_LOW
23120
+ import_lexical3.COMMAND_PRIORITY_EDITOR
23223
23121
  )
23224
23122
  );
23225
23123
  }, [editor, onConnectLink]);
23226
- const maybeShowLinkToolbar = (0, import_react148.useCallback)(() => {
23124
+ const maybeShowLinkToolbar = (0, import_react147.useCallback)(() => {
23227
23125
  if (!editor.isEditable()) {
23228
23126
  return;
23229
23127
  }
23230
- const selection = (0, import_lexical4.$getSelection)();
23231
- if (!(0, import_lexical4.$isRangeSelection)(selection)) {
23128
+ const selection = (0, import_lexical3.$getSelection)();
23129
+ if (!(0, import_lexical3.$isRangeSelection)(selection)) {
23232
23130
  setLinkPopoverState(void 0);
23233
23131
  return;
23234
23132
  }
@@ -23257,7 +23155,7 @@ function LinkNodePlugin({
23257
23155
  }
23258
23156
  });
23259
23157
  }, [editor, positioningAnchorEl]);
23260
- (0, import_react148.useEffect)(() => {
23158
+ (0, import_react147.useEffect)(() => {
23261
23159
  return editor.registerUpdateListener(({ editorState }) => {
23262
23160
  requestAnimationFrame(() => {
23263
23161
  editorState.read(() => {
@@ -23342,13 +23240,13 @@ function getLinkAncestor(node) {
23342
23240
  // src/components/ParameterInputs/rich-text/ListIndentPlugin.tsx
23343
23241
  init_emotion_jsx_shim();
23344
23242
  var import_list = require("@lexical/list");
23345
- var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
23346
- var import_utils10 = require("@lexical/utils");
23347
- var import_lexical5 = require("lexical");
23348
- var import_react149 = require("react");
23243
+ var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
23244
+ var import_utils8 = require("@lexical/utils");
23245
+ var import_lexical4 = require("lexical");
23246
+ var import_react148 = require("react");
23349
23247
  function isIndentPermitted(maxDepth) {
23350
- const selection = (0, import_lexical5.$getSelection)();
23351
- if (!(0, import_lexical5.$isRangeSelection)(selection)) {
23248
+ const selection = (0, import_lexical4.$getSelection)();
23249
+ if (!(0, import_lexical4.$isRangeSelection)(selection)) {
23352
23250
  return false;
23353
23251
  }
23354
23252
  const elementNodesInSelection = getElementNodesInSelection(selection);
@@ -23368,12 +23266,12 @@ function isIndentPermitted(maxDepth) {
23368
23266
  }
23369
23267
  function $isAnyOfSelectedNodesAListItemNode(selection) {
23370
23268
  const nodes = selection.getNodes();
23371
- return (0, import_utils10.$filter)(nodes, (node) => (0, import_list.$isListItemNode)(node) ? node : null).length > 0;
23269
+ return (0, import_utils8.$filter)(nodes, (node) => (0, import_list.$isListItemNode)(node) ? node : null).length > 0;
23372
23270
  }
23373
23271
  function $indentOverTab(selection) {
23374
23272
  const nodes = selection.getNodes();
23375
- const canIndentBlockNodes = (0, import_utils10.$filter)(nodes, (node) => {
23376
- if ((0, import_lexical5.$isBlockElementNode)(node) && node.canIndent()) {
23273
+ const canIndentBlockNodes = (0, import_utils8.$filter)(nodes, (node) => {
23274
+ if ((0, import_lexical4.$isBlockElementNode)(node) && node.canIndent()) {
23377
23275
  return node;
23378
23276
  }
23379
23277
  return null;
@@ -23385,13 +23283,13 @@ function $indentOverTab(selection) {
23385
23283
  const focus = selection.focus;
23386
23284
  const first = focus.isBefore(anchor) ? focus : anchor;
23387
23285
  const firstNode = first.getNode();
23388
- const firstBlock = (0, import_utils10.$getNearestBlockElementAncestorOrThrow)(firstNode);
23286
+ const firstBlock = (0, import_utils8.$getNearestBlockElementAncestorOrThrow)(firstNode);
23389
23287
  if (firstBlock.canIndent()) {
23390
23288
  const firstBlockKey = firstBlock.getKey();
23391
- let selectionAtStart = (0, import_lexical5.$createRangeSelection)();
23289
+ let selectionAtStart = (0, import_lexical4.$createRangeSelection)();
23392
23290
  selectionAtStart.anchor.set(firstBlockKey, 0, "element");
23393
23291
  selectionAtStart.focus.set(firstBlockKey, 0, "element");
23394
- selectionAtStart = (0, import_lexical5.$normalizeSelection__EXPERIMENTAL)(selectionAtStart);
23292
+ selectionAtStart = (0, import_lexical4.$normalizeSelection__EXPERIMENTAL)(selectionAtStart);
23395
23293
  if (selectionAtStart.anchor.is(first)) {
23396
23294
  return true;
23397
23295
  }
@@ -23399,1280 +23297,1251 @@ function $indentOverTab(selection) {
23399
23297
  return false;
23400
23298
  }
23401
23299
  function ListIndentPlugin({ maxDepth }) {
23402
- const [editor] = (0, import_LexicalComposerContext4.useLexicalComposerContext)();
23403
- const isInListItemNode = (0, import_react149.useRef)(false);
23404
- (0, import_react149.useEffect)(() => {
23300
+ const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
23301
+ const isInListItemNode = (0, import_react148.useRef)(false);
23302
+ (0, import_react148.useEffect)(() => {
23405
23303
  return editor.registerCommand(
23406
- import_lexical5.SELECTION_CHANGE_COMMAND,
23304
+ import_lexical4.SELECTION_CHANGE_COMMAND,
23407
23305
  () => {
23408
23306
  editor.read(() => {
23409
- const selection = (0, import_lexical5.$getSelection)();
23410
- if (!(0, import_lexical5.$isRangeSelection)(selection) || !selection.isCollapsed()) {
23307
+ const selection = (0, import_lexical4.$getSelection)();
23308
+ if (!(0, import_lexical4.$isRangeSelection)(selection) || !selection.isCollapsed()) {
23411
23309
  isInListItemNode.current = false;
23412
23310
  return false;
23413
23311
  }
23414
- isInListItemNode.current = (0, import_utils10.$getNearestNodeOfType)(selection.anchor.getNode(), import_list.ListNode) !== null;
23312
+ isInListItemNode.current = (0, import_utils8.$getNearestNodeOfType)(selection.anchor.getNode(), import_list.ListNode) !== null;
23415
23313
  });
23416
23314
  return false;
23417
23315
  },
23418
- import_lexical5.COMMAND_PRIORITY_NORMAL
23316
+ import_lexical4.COMMAND_PRIORITY_NORMAL
23419
23317
  );
23420
23318
  }, [editor]);
23421
- (0, import_react149.useEffect)(() => {
23422
- return (0, import_utils10.mergeRegister)(
23319
+ (0, import_react148.useEffect)(() => {
23320
+ return (0, import_utils8.mergeRegister)(
23423
23321
  editor.registerCommand(
23424
- import_lexical5.INDENT_CONTENT_COMMAND,
23322
+ import_lexical4.INDENT_CONTENT_COMMAND,
23425
23323
  () => !isIndentPermitted(maxDepth),
23426
- import_lexical5.COMMAND_PRIORITY_CRITICAL
23324
+ import_lexical4.COMMAND_PRIORITY_CRITICAL
23427
23325
  ),
23428
23326
  editor.registerCommand(
23429
- import_lexical5.KEY_TAB_COMMAND,
23327
+ import_lexical4.KEY_TAB_COMMAND,
23430
23328
  (event) => {
23431
- const selection = (0, import_lexical5.$getSelection)();
23432
- if (!(0, import_lexical5.$isRangeSelection)(selection) || !isInListItemNode.current && !$isAnyOfSelectedNodesAListItemNode(selection)) {
23329
+ const selection = (0, import_lexical4.$getSelection)();
23330
+ if (!(0, import_lexical4.$isRangeSelection)(selection) || !isInListItemNode.current && !$isAnyOfSelectedNodesAListItemNode(selection)) {
23433
23331
  return false;
23434
23332
  }
23435
23333
  event.preventDefault();
23436
23334
  if ($indentOverTab(selection)) {
23437
- const command = event.shiftKey ? import_lexical5.OUTDENT_CONTENT_COMMAND : import_lexical5.INDENT_CONTENT_COMMAND;
23335
+ const command = event.shiftKey ? import_lexical4.OUTDENT_CONTENT_COMMAND : import_lexical4.INDENT_CONTENT_COMMAND;
23438
23336
  return editor.dispatchCommand(command, void 0);
23439
23337
  }
23440
23338
  return false;
23441
23339
  },
23442
- import_lexical5.COMMAND_PRIORITY_CRITICAL
23340
+ import_lexical4.COMMAND_PRIORITY_CRITICAL
23443
23341
  )
23444
23342
  );
23445
23343
  }, [editor, maxDepth]);
23446
23344
  return null;
23447
23345
  }
23448
23346
 
23449
- // src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
23347
+ // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
23450
23348
  init_emotion_jsx_shim();
23451
- var import_react150 = require("@emotion/react");
23452
- var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
23453
- var import_useLexicalEditable = require("@lexical/react/useLexicalEditable");
23349
+ var import_react149 = require("@emotion/react");
23350
+ var import_code2 = require("@lexical/code");
23351
+ var import_list2 = require("@lexical/list");
23352
+ var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
23353
+ var import_rich_text = require("@lexical/rich-text");
23354
+ var import_selection2 = require("@lexical/selection");
23454
23355
  var import_table = require("@lexical/table");
23455
- var import_lexical6 = require("lexical");
23456
- var import_react151 = require("react");
23356
+ var import_utils10 = require("@lexical/utils");
23357
+ var import_lexical5 = require("lexical");
23358
+ var import_react150 = require("react");
23457
23359
  var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
23458
- function computeSelectionCount(selection) {
23459
- const selectionShape = selection.getShape();
23460
- return {
23461
- columns: selectionShape.toX - selectionShape.fromX + 1,
23462
- rows: selectionShape.toY - selectionShape.fromY + 1
23463
- };
23464
- }
23465
- var tableActionMenuTrigger = import_react150.css`
23466
- position: absolute;
23467
- transform: translate(calc(-100% - 1px), 1px);
23360
+ var toolbar = import_react149.css`
23361
+ ${scrollbarStyles}
23362
+ background: var(--gray-50);
23363
+ border-radius: var(--rounded-base);
23364
+ display: flex;
23365
+ /* We add 1px because we use a 1px wide separator */
23366
+ gap: calc(var(--spacing-sm) + 1px);
23367
+ margin: 0 0 calc(var(--spacing-sm) + var(--spacing-xs)) 0;
23368
+ overflow: auto;
23369
+ padding: var(--spacing-sm);
23370
+ position: sticky;
23371
+ top: calc(var(--spacing-sm) * -2);
23372
+ z-index: 10;
23468
23373
  `;
23469
- var TableActionMenuTrigger = (0, import_react151.forwardRef)((props, ref) => {
23470
- const { tableCellEl, positioningAnchorEl, ...rest } = props;
23471
- const [coordinates, setCoordinates] = (0, import_react151.useState)({ x: 0, y: 0 });
23472
- (0, import_react151.useLayoutEffect)(() => {
23473
- const rect = tableCellEl.getBoundingClientRect();
23474
- const parentRect = positioningAnchorEl.getBoundingClientRect();
23475
- const relativeX = rect.right - parentRect.left + positioningAnchorEl.scrollLeft;
23476
- const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
23477
- setCoordinates({ x: relativeX, y: relativeY });
23478
- }, [tableCellEl, positioningAnchorEl]);
23479
- return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23480
- IconButton,
23481
- {
23482
- ref,
23483
- css: [
23484
- tableActionMenuTrigger,
23485
- {
23486
- top: coordinates.y,
23487
- left: coordinates.x
23488
- }
23489
- ],
23490
- size: "xs",
23491
- buttonType: "unimportant",
23492
- ...rest,
23493
- children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
23374
+ var toolbarGroup = import_react149.css`
23375
+ display: flex;
23376
+ flex-shrink: 0;
23377
+ gap: var(--spacing-xs);
23378
+ position: relative;
23379
+
23380
+ &:not(:first-child)::before {
23381
+ background-color: var(--gray-300);
23382
+ content: '';
23383
+ display: block;
23384
+ height: 24px;
23385
+ left: calc(var(--spacing-xs) * -1);
23386
+ position: absolute;
23387
+ top: 4px;
23388
+ width: 1px;
23389
+ }
23390
+ `;
23391
+ var richTextToolbarButton = import_react149.css`
23392
+ align-items: center;
23393
+ appearance: none;
23394
+ border: 0;
23395
+ border-radius: var(--rounded-sm);
23396
+ box-shadow: none;
23397
+ color: var(--gray-900);
23398
+ display: flex;
23399
+ flex-shrink: 0;
23400
+ height: 32px;
23401
+ justify-content: center;
23402
+ min-width: 32px;
23403
+ padding: 0 var(--spacing-sm);
23404
+ `;
23405
+ var richTextToolbarButtonActive = import_react149.css`
23406
+ background: var(--gray-200);
23407
+ `;
23408
+ var textStyleButton = import_react149.css`
23409
+ justify-content: space-between;
23410
+ min-width: 7rem;
23411
+ `;
23412
+ var toolbarIcon = import_react149.css`
23413
+ color: inherit;
23414
+ `;
23415
+ var toolbarChevron = import_react149.css`
23416
+ margin-left: var(--spacing-xs);
23417
+ `;
23418
+ var RichTextToolbarIcon = ({ icon }) => {
23419
+ return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
23420
+ };
23421
+ var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
23422
+ ["bold", "format-bold"],
23423
+ ["italic", "format-italic"],
23424
+ ["underline", "format-underline"],
23425
+ ["strikethrough", "format-strike"],
23426
+ ["code", "format-code"],
23427
+ ["superscript", "format-superscript"],
23428
+ ["subscript", "format-subscript"]
23429
+ ]);
23430
+ var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
23431
+ var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
23432
+ var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
23433
+ const [editor] = (0, import_LexicalComposerContext4.useLexicalComposerContext)();
23434
+ const {
23435
+ activeElement,
23436
+ setActiveElement,
23437
+ activeFormats,
23438
+ setActiveFormats,
23439
+ visibleFormatsWithIcon,
23440
+ visibleFormatsWithoutIcon,
23441
+ visibleTextualElements,
23442
+ isLink,
23443
+ setIsLink,
23444
+ linkElementVisible,
23445
+ visibleLists,
23446
+ codeElementVisible,
23447
+ quoteElementVisible,
23448
+ visibleElementsWithIcons,
23449
+ visibleInsertElementsWithIcons,
23450
+ tableElementVisible
23451
+ } = useRichTextToolbarState({ config });
23452
+ const onSelectElement = (type) => {
23453
+ if (activeElement === type) {
23454
+ return;
23494
23455
  }
23495
- );
23496
- });
23497
- TableActionMenuTrigger.displayName = "TableActionMenuTrigger";
23498
- function TableActionMenu({
23499
- tableCellNode: _tableCellNode,
23500
- menuPortalEl,
23501
- tableCellEl,
23502
- positioningAnchorEl
23503
- }) {
23504
- const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
23505
- const [tableCellNode, updateTableCellNode] = (0, import_react151.useState)(_tableCellNode);
23506
- const [selectionCounts, updateSelectionCounts] = (0, import_react151.useState)({
23507
- columns: 1,
23508
- rows: 1
23509
- });
23510
- const [menuTriggerKey, setMenuTriggerKey] = (0, import_react151.useState)(0);
23511
- const incrementMenuTriggerKey = () => {
23512
- setMenuTriggerKey((key) => key += 1);
23513
- };
23514
- (0, import_react151.useEffect)(() => {
23515
- return editor.registerMutationListener(
23516
- import_table.TableCellNode,
23517
- (nodeMutations) => {
23518
- const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
23519
- if (nodeUpdated) {
23520
- editor.getEditorState().read(() => {
23521
- updateTableCellNode(tableCellNode.getLatest());
23456
+ editor.focus(() => {
23457
+ editor.update(() => {
23458
+ const selection = (0, import_lexical5.$getSelection)();
23459
+ if (HEADING_ELEMENTS.includes(type)) {
23460
+ (0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createHeadingNode)(type));
23461
+ } else if (type === "paragraph") {
23462
+ (0, import_selection2.$setBlocksType)(selection, () => (0, import_lexical5.$createParagraphNode)());
23463
+ } else if (type === "quote") {
23464
+ (0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createQuoteNode)());
23465
+ } else if (type === "code") {
23466
+ (0, import_selection2.$setBlocksType)(selection, () => (0, import_code2.$createCodeNode)());
23467
+ } else if (type === "table" && onInsertTable) {
23468
+ onInsertTable().then((dimensions) => {
23469
+ if (!dimensions) {
23470
+ return;
23471
+ }
23472
+ const { rows, columns } = dimensions;
23473
+ editor.focus(() => {
23474
+ editor.update(() => {
23475
+ (0, import_lexical5.$insertNodes)([(0, import_table.$createTableNodeWithDimensions)(rows, columns, false)]);
23476
+ });
23477
+ });
23522
23478
  });
23523
23479
  }
23524
- },
23525
- { skipInitialization: true }
23526
- );
23527
- }, [editor, tableCellNode]);
23528
- (0, import_react151.useEffect)(() => {
23529
- editor.getEditorState().read(() => {
23530
- const selection = (0, import_lexical6.$getSelection)();
23531
- if ((0, import_table.$isTableSelection)(selection)) {
23532
- updateSelectionCounts(computeSelectionCount(selection));
23533
- }
23534
- });
23535
- }, [editor]);
23536
- const clearTableSelection = (0, import_react151.useCallback)(() => {
23537
- editor.update(() => {
23538
- if (tableCellNode.isAttached()) {
23539
- const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23540
- const tableElement2 = editor.getElementByKey(
23541
- tableNode.getKey()
23542
- );
23543
- if (!tableElement2) {
23544
- throw new Error("Expected to find tableElement in DOM");
23545
- }
23546
- const tableSelection = (0, import_table.getTableObserverFromTableElement)(tableElement2);
23547
- if (tableSelection !== null) {
23548
- tableSelection.clearHighlight();
23549
- }
23550
- tableNode.markDirty();
23551
- updateTableCellNode(tableCellNode.getLatest());
23552
- }
23553
- const rootNode = (0, import_lexical6.$getRoot)();
23554
- rootNode.selectStart();
23555
- });
23556
- }, [editor, tableCellNode]);
23557
- const insertTableRowAtSelection = (0, import_react151.useCallback)(
23558
- (shouldInsertAfter) => {
23559
- editor.update(() => {
23560
- (0, import_table.$insertTableRow__EXPERIMENTAL)(shouldInsertAfter);
23561
- });
23562
- incrementMenuTriggerKey();
23563
- },
23564
- [editor]
23565
- );
23566
- const insertTableColumnAtSelection = (0, import_react151.useCallback)(
23567
- (shouldInsertAfter) => {
23568
- editor.update(() => {
23569
- for (let i = 0; i < selectionCounts.columns; i++) {
23570
- (0, import_table.$insertTableColumn__EXPERIMENTAL)(shouldInsertAfter);
23571
- }
23572
23480
  });
23573
- incrementMenuTriggerKey();
23574
- },
23575
- [editor, selectionCounts.columns]
23576
- );
23577
- const deleteTableRowAtSelection = (0, import_react151.useCallback)(() => {
23578
- editor.update(() => {
23579
- (0, import_table.$deleteTableRow__EXPERIMENTAL)();
23580
- });
23581
- incrementMenuTriggerKey();
23582
- }, [editor]);
23583
- const deleteTableAtSelection = (0, import_react151.useCallback)(() => {
23584
- editor.update(() => {
23585
- const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23586
- tableNode.remove();
23587
- clearTableSelection();
23588
- });
23589
- }, [editor, tableCellNode, clearTableSelection]);
23590
- const deleteTableColumnAtSelection = (0, import_react151.useCallback)(() => {
23591
- editor.update(() => {
23592
- (0, import_table.$deleteTableColumn__EXPERIMENTAL)();
23593
23481
  });
23594
- incrementMenuTriggerKey();
23595
- }, [editor]);
23596
- const toggleTableRowIsHeader = (0, import_react151.useCallback)(() => {
23597
- editor.update(() => {
23598
- const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23599
- const tableRowIndex = (0, import_table.$getTableRowIndexFromTableCellNode)(tableCellNode);
23600
- const tableRows = tableNode.getChildren();
23601
- if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
23602
- throw new Error("Expected table cell to be inside of table row.");
23482
+ };
23483
+ const updateToolbar = (0, import_react150.useCallback)(() => {
23484
+ const selection = (0, import_lexical5.$getSelection)();
23485
+ if (!(0, import_lexical5.$isRangeSelection)(selection)) {
23486
+ return;
23487
+ }
23488
+ const newActiveFormats = [];
23489
+ for (const format of richTextBuiltInFormats) {
23490
+ if (selection.hasFormat(format.type)) {
23491
+ newActiveFormats.push(format.type);
23603
23492
  }
23604
- const tableRow2 = tableRows[tableRowIndex];
23605
- if (!(0, import_table.$isTableRowNode)(tableRow2)) {
23606
- throw new Error("Expected table row");
23493
+ }
23494
+ setActiveFormats(newActiveFormats);
23495
+ const anchorNode = selection.anchor.getNode();
23496
+ let element = anchorNode.getKey() === "root" ? anchorNode : (0, import_utils10.$findMatchingParent)(anchorNode, (e) => {
23497
+ const parent = e.getParent();
23498
+ return parent !== null && (0, import_lexical5.$isRootOrShadowRoot)(parent);
23499
+ });
23500
+ if (element === null) {
23501
+ element = anchorNode.getTopLevelElementOrThrow();
23502
+ }
23503
+ const elementKey = element.getKey();
23504
+ const elementDOM = editor.getElementByKey(elementKey);
23505
+ if (elementDOM !== null) {
23506
+ if ((0, import_list2.$isListNode)(element)) {
23507
+ const parentList = (0, import_utils10.$getNearestNodeOfType)(anchorNode, import_list2.ListNode);
23508
+ const type = parentList ? parentList.getListType() : element.getListType();
23509
+ setActiveElement(type === "bullet" ? "unorderedList" : "orderedList");
23510
+ } else {
23511
+ const type = (0, import_rich_text.$isHeadingNode)(element) ? element.getTag() : element.getType();
23512
+ setActiveElement(type);
23607
23513
  }
23608
- tableRow2.getChildren().forEach((tableCell) => {
23609
- if (!(0, import_table.$isTableCellNode)(tableCell)) {
23610
- throw new Error("Expected table cell");
23611
- }
23612
- tableCell.toggleHeaderStyle(import_table.TableCellHeaderStates.ROW);
23514
+ }
23515
+ const node = getSelectedNode(selection);
23516
+ if (getLinkAncestor(node) !== null) {
23517
+ setIsLink(true);
23518
+ } else {
23519
+ setIsLink(false);
23520
+ }
23521
+ }, [editor, setActiveElement, setActiveFormats, setIsLink]);
23522
+ (0, import_react150.useEffect)(() => {
23523
+ return editor.registerCommand(
23524
+ import_lexical5.SELECTION_CHANGE_COMMAND,
23525
+ (_payload) => {
23526
+ updateToolbar();
23527
+ return false;
23528
+ },
23529
+ import_lexical5.COMMAND_PRIORITY_CRITICAL
23530
+ );
23531
+ }, [editor, updateToolbar]);
23532
+ (0, import_react150.useEffect)(() => {
23533
+ return editor.registerUpdateListener(({ editorState }) => {
23534
+ requestAnimationFrame(() => {
23535
+ editorState.read(() => {
23536
+ updateToolbar();
23537
+ });
23613
23538
  });
23614
- clearTableSelection();
23615
23539
  });
23616
- }, [editor, tableCellNode, clearTableSelection]);
23617
- const toggleTableColumnIsHeader = (0, import_react151.useCallback)(() => {
23618
- editor.update(() => {
23619
- const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23620
- const tableColumnIndex = (0, import_table.$getTableColumnIndexFromTableCellNode)(tableCellNode);
23621
- const tableRows = tableNode.getChildren();
23622
- const maxRowsLength = Math.max(...tableRows.map((row) => row.getChildren().length));
23623
- if (tableColumnIndex >= maxRowsLength || tableColumnIndex < 0) {
23624
- throw new Error("Expected table cell to be inside of table row.");
23540
+ }, [editor, updateToolbar]);
23541
+ return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbar, children: [
23542
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
23543
+ Menu,
23544
+ {
23545
+ menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", children: [
23546
+ visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
23547
+ " ",
23548
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
23549
+ ] }),
23550
+ placement: "bottom-start",
23551
+ children: [
23552
+ [
23553
+ {
23554
+ label: "Normal",
23555
+ type: "paragraph"
23556
+ },
23557
+ ...visibleTextualElements
23558
+ ].map((element) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23559
+ MenuItem,
23560
+ {
23561
+ onClick: () => {
23562
+ onSelectElement(element.type);
23563
+ },
23564
+ children: element.label
23565
+ },
23566
+ element.type
23567
+ )),
23568
+ visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
23569
+ ]
23625
23570
  }
23626
- for (let r = 0; r < tableRows.length; r++) {
23627
- const tableRow2 = tableRows[r];
23628
- if (!(0, import_table.$isTableRowNode)(tableRow2)) {
23629
- throw new Error("Expected table row");
23630
- }
23631
- const tableCells = tableRow2.getChildren();
23632
- if (tableColumnIndex >= tableCells.length) {
23633
- continue;
23571
+ ),
23572
+ visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbarGroup, children: [
23573
+ visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23574
+ "button",
23575
+ {
23576
+ onClick: () => {
23577
+ editor.dispatchCommand(import_lexical5.FORMAT_TEXT_COMMAND, format.type);
23578
+ },
23579
+ css: [
23580
+ richTextToolbarButton,
23581
+ activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
23582
+ ],
23583
+ children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
23634
23584
  }
23635
- const tableCell = tableCells[tableColumnIndex];
23636
- if (!(0, import_table.$isTableCellNode)(tableCell)) {
23637
- throw new Error("Expected table cell");
23585
+ ) }, format.type)),
23586
+ visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23587
+ Menu,
23588
+ {
23589
+ menuLabel: "Alternative text styles",
23590
+ menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
23591
+ placement: "bottom-start",
23592
+ children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23593
+ MenuItem,
23594
+ {
23595
+ onClick: () => {
23596
+ editor.dispatchCommand(import_lexical5.FORMAT_TEXT_COMMAND, format.type);
23597
+ },
23598
+ children: format.label
23599
+ },
23600
+ format.type
23601
+ ))
23638
23602
  }
23639
- tableCell.toggleHeaderStyle(import_table.TableCellHeaderStates.COLUMN);
23640
- }
23641
- clearTableSelection();
23642
- });
23643
- }, [editor, tableCellNode, clearTableSelection]);
23644
- const menuItemCss = (0, import_react150.css)({
23645
- fontSize: "var(--fs-sm)"
23646
- });
23647
- return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
23648
- Menu,
23649
- {
23650
- menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23651
- TableActionMenuTrigger,
23603
+ ) : null
23604
+ ] }) : null,
23605
+ visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbarGroup, children: [
23606
+ linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23607
+ "button",
23652
23608
  {
23653
- tableCellEl,
23654
- positioningAnchorEl
23655
- },
23656
- menuTriggerKey
23657
- ),
23658
- portalElement: menuPortalEl,
23659
- maxMenuHeight: "300px",
23660
- children: [
23661
- /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
23662
- MenuItem,
23609
+ onClick: () => {
23610
+ isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
23611
+ },
23612
+ css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
23613
+ children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "link" })
23614
+ }
23615
+ ) }) : null,
23616
+ visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
23617
+ visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23618
+ "button",
23663
23619
  {
23664
23620
  onClick: () => {
23665
- insertTableRowAtSelection(false);
23621
+ activeElement === "unorderedList" ? editor.dispatchCommand(import_list2.REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(import_list2.INSERT_UNORDERED_LIST_COMMAND, void 0);
23666
23622
  },
23667
- css: menuItemCss,
23668
- children: [
23669
- "Insert ",
23670
- selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
23671
- " above"
23672
- ]
23623
+ css: [
23624
+ richTextToolbarButton,
23625
+ activeElement === "unorderedList" ? richTextToolbarButtonActive : null
23626
+ ],
23627
+ children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
23673
23628
  }
23674
- ),
23675
- /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
23676
- "Insert ",
23677
- selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
23678
- " below"
23679
- ] }),
23680
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(MenuItemSeparator, {}),
23681
- /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
23682
- "Insert ",
23683
- selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
23684
- " left"
23685
- ] }),
23686
- /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
23687
- "Insert ",
23688
- selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
23689
- " right"
23690
- ] }),
23691
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(MenuItemSeparator, {}),
23692
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
23693
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
23694
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
23695
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(MenuItemSeparator, {}),
23696
- /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
23697
- (tableCellNode.__headerState & import_table.TableCellHeaderStates.ROW) === import_table.TableCellHeaderStates.ROW ? "Remove" : "Add",
23698
- " ",
23699
- "row header"
23629
+ ) }) : null,
23630
+ visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23631
+ "button",
23632
+ {
23633
+ onClick: () => {
23634
+ activeElement === "orderedList" ? editor.dispatchCommand(import_list2.REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(import_list2.INSERT_ORDERED_LIST_COMMAND, void 0);
23635
+ },
23636
+ css: [
23637
+ richTextToolbarButton,
23638
+ activeElement === "orderedList" ? richTextToolbarButtonActive : null
23639
+ ],
23640
+ children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
23641
+ }
23642
+ ) }) : null
23643
+ ] }) : null,
23644
+ customControls ? customControls : null
23645
+ ] }) : null,
23646
+ visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { css: toolbarGroup, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
23647
+ Menu,
23648
+ {
23649
+ menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("button", { css: richTextToolbarButton, title: "Insert block element", children: [
23650
+ "Insert",
23651
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
23700
23652
  ] }),
23701
- /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
23702
- (tableCellNode.__headerState & import_table.TableCellHeaderStates.COLUMN) === import_table.TableCellHeaderStates.COLUMN ? "Remove" : "Add",
23703
- " ",
23704
- "column header"
23705
- ] })
23706
- ]
23707
- }
23708
- );
23709
- }
23710
- function TableCellActionMenuContainer({
23711
- menuPortalEl,
23712
- positioningAnchorEl
23713
- }) {
23714
- const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
23715
- const [tableCellNode, setTableMenuCellNode] = (0, import_react151.useState)(null);
23716
- const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0, import_react151.useState)(null);
23717
- const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0, import_react151.useState)(null);
23718
- (0, import_react151.useEffect)(() => {
23719
- const newPortalEl = document.createElement("div");
23720
- setTableMenuCellMenuPortalEl(newPortalEl);
23721
- menuPortalEl.appendChild(newPortalEl);
23722
- return () => {
23723
- newPortalEl.remove();
23724
- };
23725
- }, [menuPortalEl]);
23726
- const setTableMenuCellNodeElem = (0, import_react151.useCallback)((elem) => {
23727
- if (elem) {
23728
- _setTableMenuCellNodeEl(elem);
23729
- } else {
23730
- _setTableMenuCellNodeEl(null);
23731
- }
23732
- }, []);
23733
- const $moveMenu = (0, import_react151.useCallback)(() => {
23734
- const selection = (0, import_lexical6.$getSelection)();
23735
- const nativeSelection = window.getSelection();
23736
- const activeElement = document.activeElement;
23737
- if (selection == null) {
23738
- setTableMenuCellNode(null);
23739
- return;
23740
- }
23741
- const rootElement = editor.getRootElement();
23742
- if ((0, import_lexical6.$isRangeSelection)(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
23743
- const tableCellNodeFromSelection = (0, import_table.$getTableCellNodeFromLexicalNode)(selection.anchor.getNode());
23744
- if (tableCellNodeFromSelection == null) {
23745
- setTableMenuCellNode(null);
23746
- setTableMenuCellNodeElem(null);
23747
- return;
23653
+ placement: "bottom-start",
23654
+ children: [
23655
+ quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23656
+ MenuItem,
23657
+ {
23658
+ onClick: () => {
23659
+ onSelectElement("quote");
23660
+ },
23661
+ icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "quote", iconColor: "currentColor" }),
23662
+ children: "Quote"
23663
+ }
23664
+ ) : null,
23665
+ codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23666
+ MenuItem,
23667
+ {
23668
+ onClick: () => {
23669
+ onSelectElement("code");
23670
+ },
23671
+ icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "code-slash", iconColor: "currentColor" }),
23672
+ children: "Code"
23673
+ }
23674
+ ) : null,
23675
+ tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23676
+ MenuItem,
23677
+ {
23678
+ onClick: () => {
23679
+ onSelectElement("table");
23680
+ },
23681
+ icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "view-grid", iconColor: "currentColor" }),
23682
+ children: "Table"
23683
+ }
23684
+ ) : null
23685
+ ]
23748
23686
  }
23749
- const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
23750
- if (tableCellParentNodeDOM == null) {
23751
- setTableMenuCellNode(null);
23752
- setTableMenuCellNodeElem(null);
23753
- return;
23687
+ ) }) : null
23688
+ ] });
23689
+ };
23690
+ var RichTextToolbar_default = RichTextToolbar;
23691
+ var useRichTextToolbarState = ({ config }) => {
23692
+ var _a;
23693
+ const enabledBuiltInFormats = (0, import_react150.useMemo)(() => {
23694
+ return richTextBuiltInFormats.filter((format) => {
23695
+ var _a2, _b;
23696
+ return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
23697
+ });
23698
+ }, [config]);
23699
+ const enabledBuiltInElements = (0, import_react150.useMemo)(() => {
23700
+ return richTextBuiltInElements.filter((element) => {
23701
+ var _a2, _b;
23702
+ return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
23703
+ });
23704
+ }, [config]);
23705
+ const enabledBuiltInFormatsWithIcon = (0, import_react150.useMemo)(() => {
23706
+ return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
23707
+ }, [enabledBuiltInFormats]);
23708
+ const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
23709
+ (format) => !FORMATS_WITH_ICON.has(format.type)
23710
+ );
23711
+ const [activeFormats, setActiveFormats] = (0, import_react150.useState)([]);
23712
+ const visibleFormatsWithIcon = (0, import_react150.useMemo)(() => {
23713
+ const visibleFormats = /* @__PURE__ */ new Set();
23714
+ activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
23715
+ visibleFormats.add(type);
23716
+ });
23717
+ enabledBuiltInFormatsWithIcon.forEach((format) => {
23718
+ visibleFormats.add(format.type);
23719
+ });
23720
+ return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
23721
+ }, [activeFormats, enabledBuiltInFormatsWithIcon]);
23722
+ const visibleFormatsWithoutIcon = (0, import_react150.useMemo)(() => {
23723
+ const visibleFormats = /* @__PURE__ */ new Set();
23724
+ activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
23725
+ visibleFormats.add(type);
23726
+ });
23727
+ enabledBuiltInFormatsWithoutIcon.forEach((format) => {
23728
+ visibleFormats.add(format.type);
23729
+ });
23730
+ return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
23731
+ }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
23732
+ const [activeElement, setActiveElement] = (0, import_react150.useState)("paragraph");
23733
+ const enabledTextualElements = enabledBuiltInElements.filter(
23734
+ (element) => TEXTUAL_ELEMENTS.includes(element.type)
23735
+ );
23736
+ const visibleTextualElements = (0, import_react150.useMemo)(() => {
23737
+ if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
23738
+ return enabledTextualElements;
23739
+ }
23740
+ return richTextBuiltInElements.filter(
23741
+ (element) => {
23742
+ var _a2, _b;
23743
+ 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);
23754
23744
  }
23755
- setTableMenuCellNode(tableCellNodeFromSelection);
23756
- setTableMenuCellNodeElem(tableCellParentNodeDOM);
23757
- } else if (!activeElement) {
23758
- setTableMenuCellNode(null);
23759
- setTableMenuCellNodeElem(null);
23745
+ );
23746
+ }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
23747
+ const [isLink, setIsLink] = (0, import_react150.useState)(false);
23748
+ const linkElementVisible = (0, import_react150.useMemo)(() => {
23749
+ return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
23750
+ }, [isLink, enabledBuiltInElements]);
23751
+ const visibleLists = (0, import_react150.useMemo)(() => {
23752
+ return new Set(
23753
+ ["orderedList", "unorderedList"].filter(
23754
+ (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
23755
+ )
23756
+ );
23757
+ }, [activeElement, enabledBuiltInElements]);
23758
+ const quoteElementVisible = (0, import_react150.useMemo)(() => {
23759
+ return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
23760
+ }, [activeElement, enabledBuiltInElements]);
23761
+ const codeElementVisible = (0, import_react150.useMemo)(() => {
23762
+ return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
23763
+ }, [activeElement, enabledBuiltInElements]);
23764
+ const tableElementVisible = (0, import_react150.useMemo)(() => {
23765
+ return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
23766
+ }, [activeElement, enabledBuiltInElements]);
23767
+ const visibleElementsWithIcons = (0, import_react150.useMemo)(() => {
23768
+ const visibleElements = /* @__PURE__ */ new Set();
23769
+ if (linkElementVisible) {
23770
+ visibleElements.add("link");
23760
23771
  }
23761
- }, [editor, setTableMenuCellNodeElem]);
23762
- (0, import_react151.useEffect)(() => {
23763
- return editor.registerUpdateListener(() => {
23764
- editor.getEditorState().read(() => {
23765
- $moveMenu();
23772
+ if (visibleLists.size > 0) {
23773
+ visibleLists.forEach((type) => {
23774
+ visibleElements.add(type);
23766
23775
  });
23767
- });
23768
- });
23769
- return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
23770
- TableActionMenu,
23771
- {
23772
- tableCellNode,
23773
- menuPortalEl: tableCellMenuPortalEl,
23774
- tableCellEl: tableCellNodeEl,
23775
- positioningAnchorEl
23776
- },
23777
- tableCellNode.getKey()
23778
- );
23779
- }
23780
- function TableActionMenuPlugin({
23781
- positioningAnchorEl,
23782
- menuPortalEl
23783
- }) {
23784
- const isEditable = (0, import_useLexicalEditable.useLexicalEditable)();
23785
- return isEditable ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
23786
- }
23776
+ }
23777
+ return visibleElements;
23778
+ }, [linkElementVisible, visibleLists]);
23779
+ const visibleInsertElementsWithIcons = (0, import_react150.useMemo)(() => {
23780
+ const visibleElements = /* @__PURE__ */ new Set();
23781
+ if (quoteElementVisible) {
23782
+ visibleElements.add("quote");
23783
+ }
23784
+ if (codeElementVisible) {
23785
+ visibleElements.add("code");
23786
+ }
23787
+ if (tableElementVisible) {
23788
+ visibleElements.add("table");
23789
+ }
23790
+ return visibleElements;
23791
+ }, [codeElementVisible, quoteElementVisible, tableElementVisible]);
23792
+ return {
23793
+ activeFormats,
23794
+ setActiveFormats,
23795
+ activeElement,
23796
+ setActiveElement,
23797
+ visibleFormatsWithIcon,
23798
+ visibleFormatsWithoutIcon,
23799
+ visibleTextualElements,
23800
+ isLink,
23801
+ setIsLink,
23802
+ linkElementVisible,
23803
+ visibleLists,
23804
+ quoteElementVisible,
23805
+ codeElementVisible,
23806
+ tableElementVisible,
23807
+ visibleElementsWithIcons,
23808
+ visibleInsertElementsWithIcons
23809
+ };
23810
+ };
23787
23811
 
23788
- // src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
23812
+ // src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
23789
23813
  init_emotion_jsx_shim();
23790
- var import_react152 = require("@emotion/react");
23791
- var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
23792
- var import_useLexicalEditable2 = require("@lexical/react/useLexicalEditable");
23814
+ var import_react151 = require("@emotion/react");
23815
+ var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
23816
+ var import_useLexicalEditable = require("@lexical/react/useLexicalEditable");
23793
23817
  var import_table2 = require("@lexical/table");
23794
- var import_utils12 = require("@lexical/utils");
23795
- var import_lexical7 = require("lexical");
23796
- var import_react153 = require("react");
23797
- var import_react_dom3 = require("react-dom");
23818
+ var import_lexical6 = require("lexical");
23819
+ var import_react152 = require("react");
23798
23820
  var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
23799
- var MIN_ROW_HEIGHT = 33;
23800
- var MIN_COLUMN_WIDTH = 50;
23801
- var tableResizer = import_react152.css`
23821
+ function computeSelectionCount(selection) {
23822
+ const selectionShape = selection.getShape();
23823
+ return {
23824
+ columns: selectionShape.toX - selectionShape.fromX + 1,
23825
+ rows: selectionShape.toY - selectionShape.fromY + 1
23826
+ };
23827
+ }
23828
+ var tableActionMenuTrigger = import_react151.css`
23802
23829
  position: absolute;
23803
- z-index: var(--z-10);
23830
+ transform: translate(calc(-100% - 1px), 1px);
23804
23831
  `;
23805
- var fixedGetDOMCellFromTarget = (node) => {
23806
- let currentNode = node;
23807
- while (currentNode != null) {
23808
- const nodeName = currentNode.nodeName;
23809
- if (nodeName === "TD" || nodeName === "TH") {
23810
- const cell2 = currentNode._cell;
23811
- if (cell2 === void 0) {
23812
- return {
23813
- elem: currentNode
23814
- };
23815
- }
23816
- return cell2;
23832
+ var TableActionMenuTrigger = (0, import_react152.forwardRef)((props, ref) => {
23833
+ const { tableCellEl, positioningAnchorEl, ...rest } = props;
23834
+ const [coordinates, setCoordinates] = (0, import_react152.useState)({ x: 0, y: 0 });
23835
+ (0, import_react152.useLayoutEffect)(() => {
23836
+ const rect = tableCellEl.getBoundingClientRect();
23837
+ const parentRect = positioningAnchorEl.getBoundingClientRect();
23838
+ const relativeX = rect.right - parentRect.left + positioningAnchorEl.scrollLeft;
23839
+ const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
23840
+ setCoordinates({ x: relativeX, y: relativeY });
23841
+ }, [tableCellEl, positioningAnchorEl]);
23842
+ return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
23843
+ IconButton,
23844
+ {
23845
+ ref,
23846
+ css: [
23847
+ tableActionMenuTrigger,
23848
+ {
23849
+ top: coordinates.y,
23850
+ left: coordinates.x
23851
+ }
23852
+ ],
23853
+ size: "xs",
23854
+ buttonType: "unimportant",
23855
+ ...rest,
23856
+ children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
23817
23857
  }
23818
- currentNode = currentNode.parentNode;
23819
- }
23820
- return null;
23821
- };
23822
- function TableCellResizer({ editor, positioningAnchorEl }) {
23823
- const targetRef = (0, import_react153.useRef)(null);
23824
- const resizerRef = (0, import_react153.useRef)(null);
23825
- const tableRectRef = (0, import_react153.useRef)(null);
23826
- const mouseStartPosRef = (0, import_react153.useRef)(null);
23827
- const [mouseCurrentPos, updateMouseCurrentPos] = (0, import_react153.useState)(null);
23828
- const [activeCell, updateActiveCell] = (0, import_react153.useState)(null);
23829
- const [isMouseDown, updateIsMouseDown] = (0, import_react153.useState)(false);
23830
- const [draggingDirection, updateDraggingDirection] = (0, import_react153.useState)(null);
23831
- const resetState = (0, import_react153.useCallback)(() => {
23832
- updateActiveCell(null);
23833
- targetRef.current = null;
23834
- updateDraggingDirection(null);
23835
- mouseStartPosRef.current = null;
23836
- tableRectRef.current = null;
23837
- }, []);
23838
- const isMouseDownOnEvent = (event) => {
23839
- return (event.buttons & 1) === 1;
23840
- };
23841
- (0, import_react153.useEffect)(() => {
23842
- const onMouseMove = (event) => {
23843
- setTimeout(() => {
23844
- const target = event.target;
23845
- if (draggingDirection) {
23846
- updateMouseCurrentPos({
23847
- x: event.clientX,
23848
- y: event.clientY
23858
+ );
23859
+ });
23860
+ TableActionMenuTrigger.displayName = "TableActionMenuTrigger";
23861
+ function TableActionMenu({
23862
+ tableCellNode: _tableCellNode,
23863
+ menuPortalEl,
23864
+ tableCellEl,
23865
+ positioningAnchorEl
23866
+ }) {
23867
+ const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
23868
+ const [tableCellNode, updateTableCellNode] = (0, import_react152.useState)(_tableCellNode);
23869
+ const [selectionCounts, updateSelectionCounts] = (0, import_react152.useState)({
23870
+ columns: 1,
23871
+ rows: 1
23872
+ });
23873
+ const [menuTriggerKey, setMenuTriggerKey] = (0, import_react152.useState)(0);
23874
+ const incrementMenuTriggerKey = () => {
23875
+ setMenuTriggerKey((key) => key += 1);
23876
+ };
23877
+ (0, import_react152.useEffect)(() => {
23878
+ return editor.registerMutationListener(
23879
+ import_table2.TableCellNode,
23880
+ (nodeMutations) => {
23881
+ const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
23882
+ if (nodeUpdated) {
23883
+ editor.getEditorState().read(() => {
23884
+ updateTableCellNode(tableCellNode.getLatest());
23849
23885
  });
23850
- return;
23851
23886
  }
23852
- updateIsMouseDown(isMouseDownOnEvent(event));
23853
- if (resizerRef.current && resizerRef.current.contains(target)) {
23854
- return;
23887
+ },
23888
+ { skipInitialization: true }
23889
+ );
23890
+ }, [editor, tableCellNode]);
23891
+ (0, import_react152.useEffect)(() => {
23892
+ editor.getEditorState().read(() => {
23893
+ const selection = (0, import_lexical6.$getSelection)();
23894
+ if ((0, import_table2.$isTableSelection)(selection)) {
23895
+ updateSelectionCounts(computeSelectionCount(selection));
23896
+ }
23897
+ });
23898
+ }, [editor]);
23899
+ const clearTableSelection = (0, import_react152.useCallback)(() => {
23900
+ editor.update(() => {
23901
+ if (tableCellNode.isAttached()) {
23902
+ const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23903
+ const tableElement2 = editor.getElementByKey(
23904
+ tableNode.getKey()
23905
+ );
23906
+ if (!tableElement2) {
23907
+ throw new Error("Expected to find tableElement in DOM");
23855
23908
  }
23856
- if (targetRef.current !== target) {
23857
- targetRef.current = target;
23858
- const cell2 = fixedGetDOMCellFromTarget(target);
23859
- if (cell2 && activeCell !== cell2) {
23860
- editor.update(() => {
23861
- const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(cell2.elem);
23862
- if (!tableCellNode) {
23863
- throw new Error("TableCellResizer: Table cell node not found.");
23864
- }
23865
- const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23866
- const tableElement2 = editor.getElementByKey(tableNode.getKey());
23867
- if (!tableElement2) {
23868
- throw new Error("TableCellResizer: Table element not found.");
23869
- }
23870
- targetRef.current = target;
23871
- tableRectRef.current = tableElement2.getBoundingClientRect();
23872
- updateActiveCell(cell2);
23873
- });
23874
- } else if (cell2 == null) {
23875
- resetState();
23876
- }
23909
+ const tableSelection = (0, import_table2.getTableObserverFromTableElement)(tableElement2);
23910
+ if (tableSelection !== null) {
23911
+ tableSelection.clearHighlight();
23877
23912
  }
23878
- }, 0);
23879
- };
23880
- const onMouseDown = () => {
23881
- setTimeout(() => {
23882
- updateIsMouseDown(true);
23883
- }, 0);
23884
- };
23885
- const onMouseUp = () => {
23886
- setTimeout(() => {
23887
- updateIsMouseDown(false);
23888
- }, 0);
23889
- };
23890
- const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
23891
- rootElement == null ? void 0 : rootElement.addEventListener("mousemove", onMouseMove);
23892
- rootElement == null ? void 0 : rootElement.addEventListener("mousedown", onMouseDown);
23893
- rootElement == null ? void 0 : rootElement.addEventListener("mouseup", onMouseUp);
23894
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousemove", onMouseMove);
23895
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousedown", onMouseDown);
23896
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mouseup", onMouseUp);
23897
- });
23898
- return () => {
23899
- removeRootListener();
23900
- };
23901
- }, [activeCell, draggingDirection, editor, resetState]);
23902
- const isHeightChanging = (direction) => {
23903
- if (direction === "bottom") {
23904
- return true;
23905
- }
23906
- return false;
23907
- };
23908
- const updateRowHeight = (0, import_react153.useCallback)(
23909
- (heightChange) => {
23910
- if (!activeCell) {
23911
- throw new Error("TableCellResizer: Expected active cell.");
23913
+ tableNode.markDirty();
23914
+ updateTableCellNode(tableCellNode.getLatest());
23912
23915
  }
23913
- editor.update(
23914
- () => {
23915
- const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(activeCell.elem);
23916
- if (!(0, import_table2.$isTableCellNode)(tableCellNode)) {
23917
- throw new Error("TableCellResizer: Table cell node not found.");
23918
- }
23919
- const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23920
- const tableRowIndex = (0, import_table2.$getTableRowIndexFromTableCellNode)(tableCellNode);
23921
- const tableRows = tableNode.getChildren();
23922
- if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
23923
- throw new Error("Expected table cell to be inside of table row.");
23924
- }
23925
- const tableRow2 = tableRows[tableRowIndex];
23926
- if (!(0, import_table2.$isTableRowNode)(tableRow2)) {
23927
- throw new Error("Expected table row");
23928
- }
23929
- let height = tableRow2.getHeight();
23930
- if (height === void 0) {
23931
- const rowCells = tableRow2.getChildren();
23932
- height = Math.min(...rowCells.map((cell2) => {
23933
- var _a;
23934
- return (_a = getCellNodeHeight(cell2, editor)) != null ? _a : Infinity;
23935
- }));
23936
- }
23937
- const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
23938
- tableRow2.setHeight(newHeight);
23939
- },
23940
- { tag: "skip-scroll-into-view" }
23941
- );
23916
+ const rootNode = (0, import_lexical6.$getRoot)();
23917
+ rootNode.selectStart();
23918
+ });
23919
+ }, [editor, tableCellNode]);
23920
+ const insertTableRowAtSelection = (0, import_react152.useCallback)(
23921
+ (shouldInsertAfter) => {
23922
+ editor.update(() => {
23923
+ (0, import_table2.$insertTableRow__EXPERIMENTAL)(shouldInsertAfter);
23924
+ });
23925
+ incrementMenuTriggerKey();
23942
23926
  },
23943
- [activeCell, editor]
23927
+ [editor]
23944
23928
  );
23945
- const getCellNodeWidth = (cell2, activeEditor) => {
23946
- const width = cell2.getWidth();
23947
- if (width !== void 0) {
23948
- return width;
23949
- }
23950
- const domCellNode = activeEditor.getElementByKey(cell2.getKey());
23951
- if (domCellNode == null) {
23952
- return void 0;
23953
- }
23954
- const computedStyle = getComputedStyle(domCellNode);
23955
- return domCellNode.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
23956
- };
23957
- const getCellNodeHeight = (cell2, activeEditor) => {
23958
- const domCellNode = activeEditor.getElementByKey(cell2.getKey());
23959
- return domCellNode == null ? void 0 : domCellNode.clientHeight;
23960
- };
23961
- const getCellColumnIndex = (tableCellNode, tableMap) => {
23962
- for (let row = 0; row < tableMap.length; row++) {
23963
- for (let column = 0; column < tableMap[row].length; column++) {
23964
- if (tableMap[row][column].cell === tableCellNode) {
23965
- return column;
23929
+ const insertTableColumnAtSelection = (0, import_react152.useCallback)(
23930
+ (shouldInsertAfter) => {
23931
+ editor.update(() => {
23932
+ for (let i = 0; i < selectionCounts.columns; i++) {
23933
+ (0, import_table2.$insertTableColumn__EXPERIMENTAL)(shouldInsertAfter);
23966
23934
  }
23967
- }
23968
- }
23969
- };
23970
- const updateColumnWidth = (0, import_react153.useCallback)(
23971
- (widthChange) => {
23972
- if (!activeCell) {
23973
- throw new Error("TableCellResizer: Expected active cell.");
23974
- }
23975
- editor.update(
23976
- () => {
23977
- const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(activeCell.elem);
23978
- if (!(0, import_table2.$isTableCellNode)(tableCellNode)) {
23979
- throw new Error("TableCellResizer: Table cell node not found.");
23980
- }
23981
- const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23982
- const [tableMap] = (0, import_table2.$computeTableMapSkipCellCheck)(tableNode, null, null);
23983
- const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
23984
- if (columnIndex === void 0) {
23985
- throw new Error("TableCellResizer: Table column not found.");
23986
- }
23987
- for (let row = 0; row < tableMap.length; row++) {
23988
- const cell2 = tableMap[row][columnIndex];
23989
- if (cell2.startRow === row && (columnIndex === tableMap[row].length - 1 || tableMap[row][columnIndex].cell !== tableMap[row][columnIndex + 1].cell)) {
23990
- const width = getCellNodeWidth(cell2.cell, editor);
23991
- if (width === void 0) {
23992
- continue;
23993
- }
23994
- const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
23995
- cell2.cell.setWidth(newWidth);
23996
- }
23997
- }
23998
- },
23999
- { tag: "skip-scroll-into-view" }
24000
- );
23935
+ });
23936
+ incrementMenuTriggerKey();
24001
23937
  },
24002
- [activeCell, editor]
23938
+ [editor, selectionCounts.columns]
24003
23939
  );
24004
- const mouseUpHandler = (0, import_react153.useCallback)(
24005
- (direction) => {
24006
- const handler = (event) => {
24007
- event.preventDefault();
24008
- event.stopPropagation();
24009
- if (!activeCell) {
24010
- throw new Error("TableCellResizer: Expected active cell.");
23940
+ const deleteTableRowAtSelection = (0, import_react152.useCallback)(() => {
23941
+ editor.update(() => {
23942
+ (0, import_table2.$deleteTableRow__EXPERIMENTAL)();
23943
+ });
23944
+ incrementMenuTriggerKey();
23945
+ }, [editor]);
23946
+ const deleteTableAtSelection = (0, import_react152.useCallback)(() => {
23947
+ editor.update(() => {
23948
+ const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23949
+ tableNode.remove();
23950
+ clearTableSelection();
23951
+ });
23952
+ }, [editor, tableCellNode, clearTableSelection]);
23953
+ const deleteTableColumnAtSelection = (0, import_react152.useCallback)(() => {
23954
+ editor.update(() => {
23955
+ (0, import_table2.$deleteTableColumn__EXPERIMENTAL)();
23956
+ });
23957
+ incrementMenuTriggerKey();
23958
+ }, [editor]);
23959
+ const toggleTableRowIsHeader = (0, import_react152.useCallback)(() => {
23960
+ editor.update(() => {
23961
+ const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23962
+ const tableRowIndex = (0, import_table2.$getTableRowIndexFromTableCellNode)(tableCellNode);
23963
+ const tableRows = tableNode.getChildren();
23964
+ if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
23965
+ throw new Error("Expected table cell to be inside of table row.");
23966
+ }
23967
+ const tableRow2 = tableRows[tableRowIndex];
23968
+ if (!(0, import_table2.$isTableRowNode)(tableRow2)) {
23969
+ throw new Error("Expected table row");
23970
+ }
23971
+ tableRow2.getChildren().forEach((tableCell) => {
23972
+ if (!(0, import_table2.$isTableCellNode)(tableCell)) {
23973
+ throw new Error("Expected table cell");
24011
23974
  }
24012
- if (mouseStartPosRef.current) {
24013
- const { x, y } = mouseStartPosRef.current;
24014
- if (activeCell === null) {
24015
- return;
24016
- }
24017
- const zoom = (0, import_utils12.calculateZoomLevel)(event.target);
24018
- if (isHeightChanging(direction)) {
24019
- const heightChange = (event.clientY - y) / zoom;
24020
- updateRowHeight(heightChange);
24021
- } else {
24022
- const widthChange = (event.clientX - x) / zoom;
24023
- updateColumnWidth(widthChange);
24024
- }
24025
- resetState();
24026
- document.removeEventListener("mouseup", handler);
23975
+ tableCell.toggleHeaderStyle(import_table2.TableCellHeaderStates.ROW);
23976
+ });
23977
+ clearTableSelection();
23978
+ });
23979
+ }, [editor, tableCellNode, clearTableSelection]);
23980
+ const toggleTableColumnIsHeader = (0, import_react152.useCallback)(() => {
23981
+ editor.update(() => {
23982
+ const tableNode = (0, import_table2.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
23983
+ const tableColumnIndex = (0, import_table2.$getTableColumnIndexFromTableCellNode)(tableCellNode);
23984
+ const tableRows = tableNode.getChildren();
23985
+ const maxRowsLength = Math.max(...tableRows.map((row) => row.getChildren().length));
23986
+ if (tableColumnIndex >= maxRowsLength || tableColumnIndex < 0) {
23987
+ throw new Error("Expected table cell to be inside of table row.");
23988
+ }
23989
+ for (let r = 0; r < tableRows.length; r++) {
23990
+ const tableRow2 = tableRows[r];
23991
+ if (!(0, import_table2.$isTableRowNode)(tableRow2)) {
23992
+ throw new Error("Expected table row");
24027
23993
  }
24028
- };
24029
- return handler;
24030
- },
24031
- [activeCell, resetState, updateColumnWidth, updateRowHeight]
24032
- );
24033
- const toggleResize = (0, import_react153.useCallback)(
24034
- (direction) => (event) => {
24035
- event.preventDefault();
24036
- event.stopPropagation();
24037
- if (!activeCell) {
24038
- throw new Error("TableCellResizer: Expected active cell.");
24039
- }
24040
- mouseStartPosRef.current = {
24041
- x: event.clientX,
24042
- y: event.clientY
24043
- };
24044
- updateMouseCurrentPos(mouseStartPosRef.current);
24045
- updateDraggingDirection(direction);
24046
- document.addEventListener("mouseup", mouseUpHandler(direction));
24047
- },
24048
- [activeCell, mouseUpHandler]
24049
- );
24050
- const getResizers = (0, import_react153.useCallback)(() => {
24051
- if (activeCell) {
24052
- const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
24053
- const parentRect = positioningAnchorEl.getBoundingClientRect();
24054
- const zoom = (0, import_utils12.calculateZoomLevel)(activeCell.elem);
24055
- const zoneWidth = 10;
24056
- const styles = {
24057
- bottom: {
24058
- backgroundColor: "none",
24059
- cursor: "row-resize",
24060
- height: `${zoneWidth}px`,
24061
- left: `${left - parentRect.left}px`,
24062
- top: `${top - parentRect.top + positioningAnchorEl.scrollTop + height - zoneWidth / 2}px`,
24063
- width: `${width}px`
24064
- },
24065
- right: {
24066
- backgroundColor: "none",
24067
- cursor: "col-resize",
24068
- height: `${height}px`,
24069
- left: `${left - parentRect.left + width - zoneWidth / 2}px`,
24070
- top: `${top - parentRect.top + positioningAnchorEl.scrollTop}px`,
24071
- width: `${zoneWidth}px`
23994
+ const tableCells = tableRow2.getChildren();
23995
+ if (tableColumnIndex >= tableCells.length) {
23996
+ continue;
24072
23997
  }
24073
- };
24074
- const tableRect = tableRectRef.current;
24075
- if (draggingDirection && mouseCurrentPos && tableRect) {
24076
- if (isHeightChanging(draggingDirection)) {
24077
- styles[draggingDirection].left = `${tableRect.left - parentRect.left}px`;
24078
- styles[draggingDirection].top = `${(mouseCurrentPos.y - parentRect.top + positioningAnchorEl.scrollTop) / zoom}px`;
24079
- styles[draggingDirection].height = "3px";
24080
- styles[draggingDirection].width = `${tableRect.width}px`;
24081
- } else {
24082
- styles[draggingDirection].top = `${tableRect.top - parentRect.top + positioningAnchorEl.scrollTop}px`;
24083
- styles[draggingDirection].left = `${(mouseCurrentPos.x - parentRect.left) / zoom}px`;
24084
- styles[draggingDirection].width = "3px";
24085
- styles[draggingDirection].height = `${tableRect.height}px`;
23998
+ const tableCell = tableCells[tableColumnIndex];
23999
+ if (!(0, import_table2.$isTableCellNode)(tableCell)) {
24000
+ throw new Error("Expected table cell");
24086
24001
  }
24087
- styles[draggingDirection].backgroundColor = "#adf";
24002
+ tableCell.toggleHeaderStyle(import_table2.TableCellHeaderStates.COLUMN);
24088
24003
  }
24089
- return styles;
24004
+ clearTableSelection();
24005
+ });
24006
+ }, [editor, tableCellNode, clearTableSelection]);
24007
+ const menuItemCss = (0, import_react151.css)({
24008
+ fontSize: "var(--fs-sm)"
24009
+ });
24010
+ return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
24011
+ Menu,
24012
+ {
24013
+ menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
24014
+ TableActionMenuTrigger,
24015
+ {
24016
+ tableCellEl,
24017
+ positioningAnchorEl
24018
+ },
24019
+ menuTriggerKey
24020
+ ),
24021
+ portalElement: menuPortalEl,
24022
+ maxMenuHeight: "300px",
24023
+ children: [
24024
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
24025
+ MenuItem,
24026
+ {
24027
+ onClick: () => {
24028
+ insertTableRowAtSelection(false);
24029
+ },
24030
+ css: menuItemCss,
24031
+ children: [
24032
+ "Insert ",
24033
+ selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
24034
+ " above"
24035
+ ]
24036
+ }
24037
+ ),
24038
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
24039
+ "Insert ",
24040
+ selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
24041
+ " below"
24042
+ ] }),
24043
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
24044
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
24045
+ "Insert ",
24046
+ selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
24047
+ " left"
24048
+ ] }),
24049
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
24050
+ "Insert ",
24051
+ selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
24052
+ " right"
24053
+ ] }),
24054
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
24055
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
24056
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
24057
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
24058
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(MenuItemSeparator, {}),
24059
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
24060
+ (tableCellNode.__headerState & import_table2.TableCellHeaderStates.ROW) === import_table2.TableCellHeaderStates.ROW ? "Remove" : "Add",
24061
+ " ",
24062
+ "row header"
24063
+ ] }),
24064
+ /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
24065
+ (tableCellNode.__headerState & import_table2.TableCellHeaderStates.COLUMN) === import_table2.TableCellHeaderStates.COLUMN ? "Remove" : "Add",
24066
+ " ",
24067
+ "column header"
24068
+ ] })
24069
+ ]
24090
24070
  }
24091
- return {
24092
- bottom: null,
24093
- left: null,
24094
- right: null,
24095
- top: null
24071
+ );
24072
+ }
24073
+ function TableCellActionMenuContainer({
24074
+ menuPortalEl,
24075
+ positioningAnchorEl
24076
+ }) {
24077
+ const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
24078
+ const [tableCellNode, setTableMenuCellNode] = (0, import_react152.useState)(null);
24079
+ const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0, import_react152.useState)(null);
24080
+ const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0, import_react152.useState)(null);
24081
+ (0, import_react152.useEffect)(() => {
24082
+ const newPortalEl = document.createElement("div");
24083
+ setTableMenuCellMenuPortalEl(newPortalEl);
24084
+ menuPortalEl.appendChild(newPortalEl);
24085
+ return () => {
24086
+ newPortalEl.remove();
24096
24087
  };
24097
- }, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
24098
- const resizerStyles = getResizers();
24099
- return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
24100
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
24101
- "div",
24102
- {
24103
- css: tableResizer,
24104
- style: resizerStyles.right || void 0,
24105
- onMouseDown: toggleResize("right")
24088
+ }, [menuPortalEl]);
24089
+ const setTableMenuCellNodeElem = (0, import_react152.useCallback)((elem) => {
24090
+ if (elem) {
24091
+ _setTableMenuCellNodeEl(elem);
24092
+ } else {
24093
+ _setTableMenuCellNodeEl(null);
24094
+ }
24095
+ }, []);
24096
+ const $moveMenu = (0, import_react152.useCallback)(() => {
24097
+ const selection = (0, import_lexical6.$getSelection)();
24098
+ const nativeSelection = window.getSelection();
24099
+ const activeElement = document.activeElement;
24100
+ if (selection == null) {
24101
+ setTableMenuCellNode(null);
24102
+ return;
24103
+ }
24104
+ const rootElement = editor.getRootElement();
24105
+ if ((0, import_lexical6.$isRangeSelection)(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
24106
+ const tableCellNodeFromSelection = (0, import_table2.$getTableCellNodeFromLexicalNode)(selection.anchor.getNode());
24107
+ if (tableCellNodeFromSelection == null) {
24108
+ setTableMenuCellNode(null);
24109
+ setTableMenuCellNodeElem(null);
24110
+ return;
24106
24111
  }
24107
- ),
24108
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
24109
- "div",
24110
- {
24111
- css: tableResizer,
24112
- style: resizerStyles.bottom || void 0,
24113
- onMouseDown: toggleResize("bottom")
24112
+ const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
24113
+ if (tableCellParentNodeDOM == null) {
24114
+ setTableMenuCellNode(null);
24115
+ setTableMenuCellNodeElem(null);
24116
+ return;
24114
24117
  }
24115
- )
24116
- ] }) });
24117
- }
24118
- function TableCellResizerPlugin({ positioningAnchorEl }) {
24119
- const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
24120
- const isEditable = (0, import_useLexicalEditable2.useLexicalEditable)();
24121
- return (0, import_react153.useMemo)(
24122
- () => isEditable ? (0, import_react_dom3.createPortal)(
24123
- /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TableCellResizer, { editor, positioningAnchorEl }),
24118
+ setTableMenuCellNode(tableCellNodeFromSelection);
24119
+ setTableMenuCellNodeElem(tableCellParentNodeDOM);
24120
+ } else if (!activeElement) {
24121
+ setTableMenuCellNode(null);
24122
+ setTableMenuCellNodeElem(null);
24123
+ }
24124
+ }, [editor, setTableMenuCellNodeElem]);
24125
+ (0, import_react152.useEffect)(() => {
24126
+ return editor.registerUpdateListener(() => {
24127
+ editor.getEditorState().read(() => {
24128
+ $moveMenu();
24129
+ });
24130
+ });
24131
+ });
24132
+ return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
24133
+ TableActionMenu,
24134
+ {
24135
+ tableCellNode,
24136
+ menuPortalEl: tableCellMenuPortalEl,
24137
+ tableCellEl: tableCellNodeEl,
24124
24138
  positioningAnchorEl
24125
- ) : null,
24126
- [editor, isEditable, positioningAnchorEl]
24139
+ },
24140
+ tableCellNode.getKey()
24127
24141
  );
24128
24142
  }
24143
+ function TableActionMenuPlugin({
24144
+ positioningAnchorEl,
24145
+ menuPortalEl
24146
+ }) {
24147
+ const isEditable = (0, import_useLexicalEditable.useLexicalEditable)();
24148
+ return isEditable ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
24149
+ }
24129
24150
 
24130
- // src/components/ParameterInputs/rich-text/TableSelectionPlugin.tsx
24151
+ // src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
24131
24152
  init_emotion_jsx_shim();
24132
- var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
24153
+ var import_react153 = require("@emotion/react");
24154
+ var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
24155
+ var import_useLexicalEditable2 = require("@lexical/react/useLexicalEditable");
24133
24156
  var import_table3 = require("@lexical/table");
24134
- var import_lexical8 = require("lexical");
24157
+ var import_utils12 = require("@lexical/utils");
24158
+ var import_lexical7 = require("lexical");
24135
24159
  var import_react154 = require("react");
24136
- var TableSelectionPlugin = () => {
24137
- const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
24138
- const [closestTableCellNode, setClosestTableCellNode] = (0, import_react154.useState)(null);
24160
+ var import_react_dom3 = require("react-dom");
24161
+ var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
24162
+ var MIN_ROW_HEIGHT = 33;
24163
+ var MIN_COLUMN_WIDTH = 50;
24164
+ var tableResizer = import_react153.css`
24165
+ position: absolute;
24166
+ z-index: var(--z-10);
24167
+ `;
24168
+ var fixedGetDOMCellFromTarget = (node) => {
24169
+ let currentNode = node;
24170
+ while (currentNode != null) {
24171
+ const nodeName = currentNode.nodeName;
24172
+ if (nodeName === "TD" || nodeName === "TH") {
24173
+ const cell2 = currentNode._cell;
24174
+ if (cell2 === void 0) {
24175
+ return {
24176
+ elem: currentNode
24177
+ };
24178
+ }
24179
+ return cell2;
24180
+ }
24181
+ currentNode = currentNode.parentNode;
24182
+ }
24183
+ return null;
24184
+ };
24185
+ function TableCellResizer({ editor, positioningAnchorEl }) {
24186
+ const targetRef = (0, import_react154.useRef)(null);
24187
+ const resizerRef = (0, import_react154.useRef)(null);
24188
+ const tableRectRef = (0, import_react154.useRef)(null);
24189
+ const mouseStartPosRef = (0, import_react154.useRef)(null);
24190
+ const [mouseCurrentPos, updateMouseCurrentPos] = (0, import_react154.useState)(null);
24191
+ const [activeCell, updateActiveCell] = (0, import_react154.useState)(null);
24192
+ const [isMouseDown, updateIsMouseDown] = (0, import_react154.useState)(false);
24193
+ const [draggingDirection, updateDraggingDirection] = (0, import_react154.useState)(null);
24194
+ const resetState = (0, import_react154.useCallback)(() => {
24195
+ updateActiveCell(null);
24196
+ targetRef.current = null;
24197
+ updateDraggingDirection(null);
24198
+ mouseStartPosRef.current = null;
24199
+ tableRectRef.current = null;
24200
+ }, []);
24201
+ const isMouseDownOnEvent = (event) => {
24202
+ return (event.buttons & 1) === 1;
24203
+ };
24139
24204
  (0, import_react154.useEffect)(() => {
24140
- return editor.registerCommand(
24141
- import_lexical8.SELECTION_CHANGE_COMMAND,
24142
- () => {
24143
- editor.read(() => {
24144
- const selection = (0, import_lexical8.$getSelection)();
24145
- if (!(0, import_lexical8.$isRangeSelection)(selection) || !selection.isCollapsed()) {
24146
- setClosestTableCellNode(null);
24147
- return false;
24148
- }
24149
- const tableCellNode = (0, import_table3.$findCellNode)(selection.anchor.getNode());
24150
- if (tableCellNode === null) {
24151
- setClosestTableCellNode(null);
24152
- return false;
24153
- }
24154
- setClosestTableCellNode(tableCellNode);
24155
- });
24156
- return false;
24157
- },
24158
- import_lexical8.COMMAND_PRIORITY_NORMAL
24159
- );
24160
- }, [editor]);
24161
- (0, import_react154.useEffect)(() => {
24162
- const onControlA = (event) => {
24163
- if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
24164
- if (!closestTableCellNode) {
24205
+ const onMouseMove = (event) => {
24206
+ setTimeout(() => {
24207
+ const target = event.target;
24208
+ if (draggingDirection) {
24209
+ updateMouseCurrentPos({
24210
+ x: event.clientX,
24211
+ y: event.clientY
24212
+ });
24165
24213
  return;
24166
24214
  }
24167
- event.preventDefault();
24168
- editor.update(() => {
24169
- const selection = closestTableCellNode.select(0, closestTableCellNode.getChildrenSize());
24170
- (0, import_lexical8.$setSelection)(selection);
24171
- });
24172
- }
24215
+ updateIsMouseDown(isMouseDownOnEvent(event));
24216
+ if (resizerRef.current && resizerRef.current.contains(target)) {
24217
+ return;
24218
+ }
24219
+ if (targetRef.current !== target) {
24220
+ targetRef.current = target;
24221
+ const cell2 = fixedGetDOMCellFromTarget(target);
24222
+ if (cell2 && activeCell !== cell2) {
24223
+ editor.update(() => {
24224
+ const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(cell2.elem);
24225
+ if (!tableCellNode) {
24226
+ throw new Error("TableCellResizer: Table cell node not found.");
24227
+ }
24228
+ const tableNode = (0, import_table3.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
24229
+ const tableElement2 = editor.getElementByKey(tableNode.getKey());
24230
+ if (!tableElement2) {
24231
+ throw new Error("TableCellResizer: Table element not found.");
24232
+ }
24233
+ targetRef.current = target;
24234
+ tableRectRef.current = tableElement2.getBoundingClientRect();
24235
+ updateActiveCell(cell2);
24236
+ });
24237
+ } else if (cell2 == null) {
24238
+ resetState();
24239
+ }
24240
+ }
24241
+ }, 0);
24173
24242
  };
24174
- return editor.registerRootListener((rootElement, prevRootElement) => {
24175
- rootElement == null ? void 0 : rootElement.addEventListener("keydown", onControlA);
24176
- prevRootElement == null ? void 0 : prevRootElement.removeEventListener("keydown", onControlA);
24177
- });
24178
- }, [editor, closestTableCellNode]);
24179
- return null;
24180
- };
24181
- var TableSelectionPlugin_default = TableSelectionPlugin;
24182
-
24183
- // src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
24184
- init_emotion_jsx_shim();
24185
- var import_react156 = require("@emotion/react");
24186
- var import_code2 = require("@lexical/code");
24187
- var import_list2 = require("@lexical/list");
24188
- var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
24189
- var import_rich_text = require("@lexical/rich-text");
24190
- var import_selection2 = require("@lexical/selection");
24191
- var import_table4 = require("@lexical/table");
24192
- var import_utils13 = require("@lexical/utils");
24193
- var import_lexical9 = require("lexical");
24194
- var import_react157 = require("react");
24195
-
24196
- // src/components/ParameterInputs/rich-text/toolbar/constants.ts
24197
- init_emotion_jsx_shim();
24198
- var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
24199
- ["bold", "format-bold"],
24200
- ["italic", "format-italic"],
24201
- ["underline", "format-underline"],
24202
- ["strikethrough", "format-strike"],
24203
- ["code", "format-code"],
24204
- ["superscript", "format-superscript"],
24205
- ["subscript", "format-subscript"]
24206
- ]);
24207
- var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
24208
- var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
24209
-
24210
- // src/components/ParameterInputs/rich-text/toolbar/useRichTextToolbarState.ts
24211
- init_emotion_jsx_shim();
24212
- var import_react155 = require("react");
24213
- var useRichTextToolbarState = ({ config }) => {
24214
- var _a;
24215
- const enabledBuiltInFormats = (0, import_react155.useMemo)(() => {
24216
- return richTextBuiltInFormats.filter((format) => {
24217
- var _a2, _b;
24218
- return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
24219
- });
24220
- }, [config]);
24221
- const enabledBuiltInElements = (0, import_react155.useMemo)(() => {
24222
- return richTextBuiltInElements.filter((element) => {
24223
- var _a2, _b;
24224
- return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
24225
- });
24226
- }, [config]);
24227
- const enabledBuiltInFormatsWithIcon = (0, import_react155.useMemo)(() => {
24228
- return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
24229
- }, [enabledBuiltInFormats]);
24230
- const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
24231
- (format) => !FORMATS_WITH_ICON.has(format.type)
24232
- );
24233
- const [activeFormats, setActiveFormats] = (0, import_react155.useState)([]);
24234
- const visibleFormatsWithIcon = (0, import_react155.useMemo)(() => {
24235
- const visibleFormats = /* @__PURE__ */ new Set();
24236
- activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
24237
- visibleFormats.add(type);
24238
- });
24239
- enabledBuiltInFormatsWithIcon.forEach((format) => {
24240
- visibleFormats.add(format.type);
24241
- });
24242
- return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
24243
- }, [activeFormats, enabledBuiltInFormatsWithIcon]);
24244
- const visibleFormatsWithoutIcon = (0, import_react155.useMemo)(() => {
24245
- const visibleFormats = /* @__PURE__ */ new Set();
24246
- activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
24247
- visibleFormats.add(type);
24248
- });
24249
- enabledBuiltInFormatsWithoutIcon.forEach((format) => {
24250
- visibleFormats.add(format.type);
24243
+ const onMouseDown = () => {
24244
+ setTimeout(() => {
24245
+ updateIsMouseDown(true);
24246
+ }, 0);
24247
+ };
24248
+ const onMouseUp = () => {
24249
+ setTimeout(() => {
24250
+ updateIsMouseDown(false);
24251
+ }, 0);
24252
+ };
24253
+ const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
24254
+ rootElement == null ? void 0 : rootElement.addEventListener("mousemove", onMouseMove);
24255
+ rootElement == null ? void 0 : rootElement.addEventListener("mousedown", onMouseDown);
24256
+ rootElement == null ? void 0 : rootElement.addEventListener("mouseup", onMouseUp);
24257
+ prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousemove", onMouseMove);
24258
+ prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousedown", onMouseDown);
24259
+ prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mouseup", onMouseUp);
24251
24260
  });
24252
- return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
24253
- }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
24254
- const [activeElement, setActiveElement] = (0, import_react155.useState)("paragraph");
24255
- const enabledTextualElements = enabledBuiltInElements.filter(
24256
- (element) => TEXTUAL_ELEMENTS.includes(element.type)
24257
- );
24258
- const visibleTextualElements = (0, import_react155.useMemo)(() => {
24259
- if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
24260
- return enabledTextualElements;
24261
+ return () => {
24262
+ removeRootListener();
24263
+ };
24264
+ }, [activeCell, draggingDirection, editor, resetState]);
24265
+ const isHeightChanging = (direction) => {
24266
+ if (direction === "bottom") {
24267
+ return true;
24261
24268
  }
24262
- return richTextBuiltInElements.filter(
24263
- (element) => {
24264
- var _a2, _b;
24265
- 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);
24269
+ return false;
24270
+ };
24271
+ const updateRowHeight = (0, import_react154.useCallback)(
24272
+ (heightChange) => {
24273
+ if (!activeCell) {
24274
+ throw new Error("TableCellResizer: Expected active cell.");
24266
24275
  }
24267
- );
24268
- }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
24269
- const [isLink, setIsLink] = (0, import_react155.useState)(false);
24270
- const linkElementVisible = (0, import_react155.useMemo)(() => {
24271
- return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
24272
- }, [isLink, enabledBuiltInElements]);
24273
- const visibleLists = (0, import_react155.useMemo)(() => {
24274
- return new Set(
24275
- ["orderedList", "unorderedList"].filter(
24276
- (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
24277
- )
24278
- );
24279
- }, [activeElement, enabledBuiltInElements]);
24280
- const quoteElementVisible = (0, import_react155.useMemo)(() => {
24281
- return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
24282
- }, [activeElement, enabledBuiltInElements]);
24283
- const codeElementVisible = (0, import_react155.useMemo)(() => {
24284
- return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
24285
- }, [activeElement, enabledBuiltInElements]);
24286
- const tableElementVisible = (0, import_react155.useMemo)(() => {
24287
- return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
24288
- }, [activeElement, enabledBuiltInElements]);
24289
- const assetElementVisible = (0, import_react155.useMemo)(() => {
24290
- return enabledBuiltInElements.some((element) => element.type === "asset") || activeElement === "asset";
24291
- }, [activeElement, enabledBuiltInElements]);
24292
- const visibleElementsWithIcons = (0, import_react155.useMemo)(() => {
24293
- const visibleElements = /* @__PURE__ */ new Set();
24294
- if (linkElementVisible) {
24295
- visibleElements.add("link");
24296
- }
24297
- if (visibleLists.size > 0) {
24298
- visibleLists.forEach((type) => {
24299
- visibleElements.add(type);
24300
- });
24301
- }
24302
- return visibleElements;
24303
- }, [linkElementVisible, visibleLists]);
24304
- const visibleInsertElementsWithIcons = (0, import_react155.useMemo)(() => {
24305
- const visibleElements = /* @__PURE__ */ new Set();
24306
- if (quoteElementVisible) {
24307
- visibleElements.add("quote");
24308
- }
24309
- if (codeElementVisible) {
24310
- visibleElements.add("code");
24311
- }
24312
- if (tableElementVisible) {
24313
- visibleElements.add("table");
24276
+ editor.update(
24277
+ () => {
24278
+ const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(activeCell.elem);
24279
+ if (!(0, import_table3.$isTableCellNode)(tableCellNode)) {
24280
+ throw new Error("TableCellResizer: Table cell node not found.");
24281
+ }
24282
+ const tableNode = (0, import_table3.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
24283
+ const tableRowIndex = (0, import_table3.$getTableRowIndexFromTableCellNode)(tableCellNode);
24284
+ const tableRows = tableNode.getChildren();
24285
+ if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
24286
+ throw new Error("Expected table cell to be inside of table row.");
24287
+ }
24288
+ const tableRow2 = tableRows[tableRowIndex];
24289
+ if (!(0, import_table3.$isTableRowNode)(tableRow2)) {
24290
+ throw new Error("Expected table row");
24291
+ }
24292
+ let height = tableRow2.getHeight();
24293
+ if (height === void 0) {
24294
+ const rowCells = tableRow2.getChildren();
24295
+ height = Math.min(...rowCells.map((cell2) => {
24296
+ var _a;
24297
+ return (_a = getCellNodeHeight(cell2, editor)) != null ? _a : Infinity;
24298
+ }));
24299
+ }
24300
+ const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
24301
+ tableRow2.setHeight(newHeight);
24302
+ },
24303
+ { tag: "skip-scroll-into-view" }
24304
+ );
24305
+ },
24306
+ [activeCell, editor]
24307
+ );
24308
+ const getCellNodeWidth = (cell2, activeEditor) => {
24309
+ const width = cell2.getWidth();
24310
+ if (width !== void 0) {
24311
+ return width;
24314
24312
  }
24315
- if (assetElementVisible) {
24316
- visibleElements.add("asset");
24313
+ const domCellNode = activeEditor.getElementByKey(cell2.getKey());
24314
+ if (domCellNode == null) {
24315
+ return void 0;
24317
24316
  }
24318
- return visibleElements;
24319
- }, [codeElementVisible, quoteElementVisible, tableElementVisible, assetElementVisible]);
24320
- return {
24321
- activeFormats,
24322
- setActiveFormats,
24323
- activeElement,
24324
- setActiveElement,
24325
- visibleFormatsWithIcon,
24326
- visibleFormatsWithoutIcon,
24327
- visibleTextualElements,
24328
- isLink,
24329
- setIsLink,
24330
- linkElementVisible,
24331
- visibleLists,
24332
- quoteElementVisible,
24333
- codeElementVisible,
24334
- tableElementVisible,
24335
- assetElementVisible,
24336
- visibleElementsWithIcons,
24337
- visibleInsertElementsWithIcons
24317
+ const computedStyle = getComputedStyle(domCellNode);
24318
+ return domCellNode.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
24338
24319
  };
24339
- };
24340
-
24341
- // src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
24342
- var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
24343
- var toolbar = import_react156.css`
24344
- ${scrollbarStyles}
24345
- background: var(--gray-50);
24346
- border-radius: var(--rounded-base);
24347
- display: flex;
24348
- /* We add 1px because we use a 1px wide separator */
24349
- gap: calc(var(--spacing-sm) + 1px);
24350
- margin: 0 0 calc(var(--spacing-sm) + var(--spacing-xs)) 0;
24351
- overflow: auto;
24352
- padding: var(--spacing-sm);
24353
- position: sticky;
24354
- top: calc(var(--spacing-sm) * -2);
24355
- z-index: 10;
24356
- `;
24357
- var toolbarGroup = import_react156.css`
24358
- display: flex;
24359
- flex-shrink: 0;
24360
- gap: var(--spacing-xs);
24361
- position: relative;
24362
-
24363
- &:not(:first-child)::before {
24364
- background-color: var(--gray-300);
24365
- content: '';
24366
- display: block;
24367
- height: 24px;
24368
- left: calc(var(--spacing-xs) * -1);
24369
- position: absolute;
24370
- top: 4px;
24371
- width: 1px;
24372
- }
24373
- `;
24374
- var richTextToolbarButton = import_react156.css`
24375
- align-items: center;
24376
- appearance: none;
24377
- border: 0;
24378
- border-radius: var(--rounded-sm);
24379
- box-shadow: none;
24380
- color: var(--gray-900);
24381
- display: flex;
24382
- flex-shrink: 0;
24383
- height: 32px;
24384
- justify-content: center;
24385
- min-width: 32px;
24386
- padding: 0 var(--spacing-sm);
24387
- `;
24388
- var richTextToolbarButtonActive = import_react156.css`
24389
- background: var(--gray-200);
24390
- `;
24391
- var textStyleButton = import_react156.css`
24392
- justify-content: space-between;
24393
- min-width: 7rem;
24394
- `;
24395
- var toolbarIcon = import_react156.css`
24396
- color: inherit;
24397
- `;
24398
- var toolbarChevron = import_react156.css`
24399
- margin-left: var(--spacing-xs);
24400
- `;
24401
- var RichTextToolbarIcon = ({ icon }) => {
24402
- return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
24403
- };
24404
- var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset }) => {
24405
- const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
24406
- const {
24407
- activeElement,
24408
- setActiveElement,
24409
- activeFormats,
24410
- setActiveFormats,
24411
- visibleFormatsWithIcon,
24412
- visibleFormatsWithoutIcon,
24413
- visibleTextualElements,
24414
- isLink,
24415
- setIsLink,
24416
- linkElementVisible,
24417
- visibleLists,
24418
- codeElementVisible,
24419
- quoteElementVisible,
24420
- visibleElementsWithIcons,
24421
- visibleInsertElementsWithIcons,
24422
- tableElementVisible,
24423
- assetElementVisible
24424
- } = useRichTextToolbarState({ config });
24425
- const onSelectElement = (type) => {
24426
- if (activeElement === type) {
24427
- return;
24320
+ const getCellNodeHeight = (cell2, activeEditor) => {
24321
+ const domCellNode = activeEditor.getElementByKey(cell2.getKey());
24322
+ return domCellNode == null ? void 0 : domCellNode.clientHeight;
24323
+ };
24324
+ const getCellColumnIndex = (tableCellNode, tableMap) => {
24325
+ for (let row = 0; row < tableMap.length; row++) {
24326
+ for (let column = 0; column < tableMap[row].length; column++) {
24327
+ if (tableMap[row][column].cell === tableCellNode) {
24328
+ return column;
24329
+ }
24330
+ }
24428
24331
  }
24429
- editor.focus(() => {
24430
- editor.update(() => {
24431
- const selection = (0, import_lexical9.$getSelection)();
24432
- if (HEADING_ELEMENTS.includes(type)) {
24433
- (0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createHeadingNode)(type));
24434
- } else if (type === "paragraph") {
24435
- (0, import_selection2.$setBlocksType)(selection, () => (0, import_lexical9.$createParagraphNode)());
24436
- } else if (type === "quote") {
24437
- (0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createQuoteNode)());
24438
- } else if (type === "code") {
24439
- (0, import_selection2.$setBlocksType)(selection, () => (0, import_code2.$createCodeNode)());
24440
- } else if (type === "table" && onInsertTable) {
24441
- onInsertTable().then((dimensions) => {
24442
- if (!dimensions) {
24443
- return;
24332
+ };
24333
+ const updateColumnWidth = (0, import_react154.useCallback)(
24334
+ (widthChange) => {
24335
+ if (!activeCell) {
24336
+ throw new Error("TableCellResizer: Expected active cell.");
24337
+ }
24338
+ editor.update(
24339
+ () => {
24340
+ const tableCellNode = (0, import_lexical7.$getNearestNodeFromDOMNode)(activeCell.elem);
24341
+ if (!(0, import_table3.$isTableCellNode)(tableCellNode)) {
24342
+ throw new Error("TableCellResizer: Table cell node not found.");
24343
+ }
24344
+ const tableNode = (0, import_table3.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
24345
+ const [tableMap] = (0, import_table3.$computeTableMapSkipCellCheck)(tableNode, null, null);
24346
+ const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
24347
+ if (columnIndex === void 0) {
24348
+ throw new Error("TableCellResizer: Table column not found.");
24349
+ }
24350
+ for (let row = 0; row < tableMap.length; row++) {
24351
+ const cell2 = tableMap[row][columnIndex];
24352
+ if (cell2.startRow === row && (columnIndex === tableMap[row].length - 1 || tableMap[row][columnIndex].cell !== tableMap[row][columnIndex + 1].cell)) {
24353
+ const width = getCellNodeWidth(cell2.cell, editor);
24354
+ if (width === void 0) {
24355
+ continue;
24356
+ }
24357
+ const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
24358
+ cell2.cell.setWidth(newWidth);
24444
24359
  }
24445
- const { rows, columns } = dimensions;
24446
- editor.focus(() => {
24447
- editor.update(() => {
24448
- (0, import_lexical9.$insertNodes)([(0, import_table4.$createTableNodeWithDimensions)(rows, columns, false)]);
24449
- });
24450
- });
24451
- });
24452
- } else if (type === "asset" && onInsertAsset) {
24453
- onInsertAsset();
24360
+ }
24361
+ },
24362
+ { tag: "skip-scroll-into-view" }
24363
+ );
24364
+ },
24365
+ [activeCell, editor]
24366
+ );
24367
+ const mouseUpHandler = (0, import_react154.useCallback)(
24368
+ (direction) => {
24369
+ const handler = (event) => {
24370
+ event.preventDefault();
24371
+ event.stopPropagation();
24372
+ if (!activeCell) {
24373
+ throw new Error("TableCellResizer: Expected active cell.");
24454
24374
  }
24455
- });
24456
- });
24457
- };
24458
- const updateToolbar = (0, import_react157.useCallback)(() => {
24459
- const selection = (0, import_lexical9.$getSelection)();
24460
- if (!(0, import_lexical9.$isRangeSelection)(selection)) {
24461
- return;
24462
- }
24463
- const newActiveFormats = [];
24464
- for (const format of richTextBuiltInFormats) {
24465
- if (selection.hasFormat(format.type)) {
24466
- newActiveFormats.push(format.type);
24375
+ if (mouseStartPosRef.current) {
24376
+ const { x, y } = mouseStartPosRef.current;
24377
+ if (activeCell === null) {
24378
+ return;
24379
+ }
24380
+ const zoom = (0, import_utils12.calculateZoomLevel)(event.target);
24381
+ if (isHeightChanging(direction)) {
24382
+ const heightChange = (event.clientY - y) / zoom;
24383
+ updateRowHeight(heightChange);
24384
+ } else {
24385
+ const widthChange = (event.clientX - x) / zoom;
24386
+ updateColumnWidth(widthChange);
24387
+ }
24388
+ resetState();
24389
+ document.removeEventListener("mouseup", handler);
24390
+ }
24391
+ };
24392
+ return handler;
24393
+ },
24394
+ [activeCell, resetState, updateColumnWidth, updateRowHeight]
24395
+ );
24396
+ const toggleResize = (0, import_react154.useCallback)(
24397
+ (direction) => (event) => {
24398
+ event.preventDefault();
24399
+ event.stopPropagation();
24400
+ if (!activeCell) {
24401
+ throw new Error("TableCellResizer: Expected active cell.");
24402
+ }
24403
+ mouseStartPosRef.current = {
24404
+ x: event.clientX,
24405
+ y: event.clientY
24406
+ };
24407
+ updateMouseCurrentPos(mouseStartPosRef.current);
24408
+ updateDraggingDirection(direction);
24409
+ document.addEventListener("mouseup", mouseUpHandler(direction));
24410
+ },
24411
+ [activeCell, mouseUpHandler]
24412
+ );
24413
+ const getResizers = (0, import_react154.useCallback)(() => {
24414
+ if (activeCell) {
24415
+ const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
24416
+ const parentRect = positioningAnchorEl.getBoundingClientRect();
24417
+ const zoom = (0, import_utils12.calculateZoomLevel)(activeCell.elem);
24418
+ const zoneWidth = 10;
24419
+ const styles = {
24420
+ bottom: {
24421
+ backgroundColor: "none",
24422
+ cursor: "row-resize",
24423
+ height: `${zoneWidth}px`,
24424
+ left: `${left - parentRect.left}px`,
24425
+ top: `${top - parentRect.top + positioningAnchorEl.scrollTop + height - zoneWidth / 2}px`,
24426
+ width: `${width}px`
24427
+ },
24428
+ right: {
24429
+ backgroundColor: "none",
24430
+ cursor: "col-resize",
24431
+ height: `${height}px`,
24432
+ left: `${left - parentRect.left + width - zoneWidth / 2}px`,
24433
+ top: `${top - parentRect.top + positioningAnchorEl.scrollTop}px`,
24434
+ width: `${zoneWidth}px`
24435
+ }
24436
+ };
24437
+ const tableRect = tableRectRef.current;
24438
+ if (draggingDirection && mouseCurrentPos && tableRect) {
24439
+ if (isHeightChanging(draggingDirection)) {
24440
+ styles[draggingDirection].left = `${tableRect.left - parentRect.left}px`;
24441
+ styles[draggingDirection].top = `${(mouseCurrentPos.y - parentRect.top + positioningAnchorEl.scrollTop) / zoom}px`;
24442
+ styles[draggingDirection].height = "3px";
24443
+ styles[draggingDirection].width = `${tableRect.width}px`;
24444
+ } else {
24445
+ styles[draggingDirection].top = `${tableRect.top - parentRect.top + positioningAnchorEl.scrollTop}px`;
24446
+ styles[draggingDirection].left = `${(mouseCurrentPos.x - parentRect.left) / zoom}px`;
24447
+ styles[draggingDirection].width = "3px";
24448
+ styles[draggingDirection].height = `${tableRect.height}px`;
24449
+ }
24450
+ styles[draggingDirection].backgroundColor = "#adf";
24467
24451
  }
24452
+ return styles;
24468
24453
  }
24469
- setActiveFormats(newActiveFormats);
24470
- const anchorNode = selection.anchor.getNode();
24471
- let element = anchorNode.getKey() === "root" ? anchorNode : (0, import_utils13.$findMatchingParent)(anchorNode, (e) => {
24472
- const parent = e.getParent();
24473
- return parent !== null && (0, import_lexical9.$isRootOrShadowRoot)(parent);
24474
- });
24475
- if (element === null) {
24476
- element = anchorNode.getTopLevelElementOrThrow();
24477
- }
24478
- const elementKey = element.getKey();
24479
- const elementDOM = editor.getElementByKey(elementKey);
24480
- if (elementDOM !== null) {
24481
- if ((0, import_list2.$isListNode)(element)) {
24482
- const parentList = (0, import_utils13.$getNearestNodeOfType)(anchorNode, import_list2.ListNode);
24483
- const type = parentList ? parentList.getListType() : element.getListType();
24484
- setActiveElement(type === "bullet" ? "unorderedList" : "orderedList");
24485
- } else {
24486
- const type = (0, import_rich_text.$isHeadingNode)(element) ? element.getTag() : element.getType();
24487
- setActiveElement(type);
24454
+ return {
24455
+ bottom: null,
24456
+ left: null,
24457
+ right: null,
24458
+ top: null
24459
+ };
24460
+ }, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
24461
+ const resizerStyles = getResizers();
24462
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
24463
+ /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24464
+ "div",
24465
+ {
24466
+ css: tableResizer,
24467
+ style: resizerStyles.right || void 0,
24468
+ onMouseDown: toggleResize("right")
24488
24469
  }
24489
- }
24490
- const node = getSelectedNode(selection);
24491
- if (getLinkAncestor(node) !== null) {
24492
- setIsLink(true);
24493
- } else {
24494
- setIsLink(false);
24495
- }
24496
- }, [editor, setActiveElement, setActiveFormats, setIsLink]);
24497
- (0, import_react157.useEffect)(() => {
24470
+ ),
24471
+ /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24472
+ "div",
24473
+ {
24474
+ css: tableResizer,
24475
+ style: resizerStyles.bottom || void 0,
24476
+ onMouseDown: toggleResize("bottom")
24477
+ }
24478
+ )
24479
+ ] }) });
24480
+ }
24481
+ function TableCellResizerPlugin({ positioningAnchorEl }) {
24482
+ const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
24483
+ const isEditable = (0, import_useLexicalEditable2.useLexicalEditable)();
24484
+ return (0, import_react154.useMemo)(
24485
+ () => isEditable ? (0, import_react_dom3.createPortal)(
24486
+ /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TableCellResizer, { editor, positioningAnchorEl }),
24487
+ positioningAnchorEl
24488
+ ) : null,
24489
+ [editor, isEditable, positioningAnchorEl]
24490
+ );
24491
+ }
24492
+
24493
+ // src/components/ParameterInputs/rich-text/TableSelectionPlugin.tsx
24494
+ init_emotion_jsx_shim();
24495
+ var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
24496
+ var import_table4 = require("@lexical/table");
24497
+ var import_lexical8 = require("lexical");
24498
+ var import_react155 = require("react");
24499
+ var TableSelectionPlugin = () => {
24500
+ const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
24501
+ const [closestTableCellNode, setClosestTableCellNode] = (0, import_react155.useState)(null);
24502
+ (0, import_react155.useEffect)(() => {
24498
24503
  return editor.registerCommand(
24499
- import_lexical9.SELECTION_CHANGE_COMMAND,
24500
- (_payload) => {
24501
- updateToolbar();
24504
+ import_lexical8.SELECTION_CHANGE_COMMAND,
24505
+ () => {
24506
+ editor.read(() => {
24507
+ const selection = (0, import_lexical8.$getSelection)();
24508
+ if (!(0, import_lexical8.$isRangeSelection)(selection) || !selection.isCollapsed()) {
24509
+ setClosestTableCellNode(null);
24510
+ return false;
24511
+ }
24512
+ const tableCellNode = (0, import_table4.$findCellNode)(selection.anchor.getNode());
24513
+ if (tableCellNode === null) {
24514
+ setClosestTableCellNode(null);
24515
+ return false;
24516
+ }
24517
+ setClosestTableCellNode(tableCellNode);
24518
+ });
24502
24519
  return false;
24503
24520
  },
24504
- import_lexical9.COMMAND_PRIORITY_CRITICAL
24521
+ import_lexical8.COMMAND_PRIORITY_NORMAL
24505
24522
  );
24506
- }, [editor, updateToolbar]);
24507
- (0, import_react157.useEffect)(() => {
24508
- return editor.registerUpdateListener(({ editorState }) => {
24509
- requestAnimationFrame(() => {
24510
- editorState.read(() => {
24511
- updateToolbar();
24512
- });
24513
- });
24514
- });
24515
- }, [editor, updateToolbar]);
24516
- return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { css: toolbar, children: [
24517
- /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
24518
- Menu,
24519
- {
24520
- menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", children: [
24521
- visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
24522
- " ",
24523
- /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
24524
- ] }),
24525
- placement: "bottom-start",
24526
- children: [
24527
- [
24528
- {
24529
- label: "Normal",
24530
- type: "paragraph"
24531
- },
24532
- ...visibleTextualElements
24533
- ].map((element) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24534
- MenuItem,
24535
- {
24536
- onClick: () => {
24537
- onSelectElement(element.type);
24538
- },
24539
- children: element.label
24540
- },
24541
- element.type
24542
- )),
24543
- visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
24544
- ]
24545
- }
24546
- ),
24547
- visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { css: toolbarGroup, children: [
24548
- visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24549
- "button",
24550
- {
24551
- onClick: () => {
24552
- editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, format.type);
24553
- },
24554
- css: [
24555
- richTextToolbarButton,
24556
- activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
24557
- ],
24558
- children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
24559
- }
24560
- ) }, format.type)),
24561
- visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24562
- Menu,
24563
- {
24564
- menuLabel: "Alternative text styles",
24565
- menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
24566
- placement: "bottom-start",
24567
- children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24568
- MenuItem,
24569
- {
24570
- onClick: () => {
24571
- editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, format.type);
24572
- },
24573
- children: format.label
24574
- },
24575
- format.type
24576
- ))
24577
- }
24578
- ) : null
24579
- ] }) : null,
24580
- visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { css: toolbarGroup, children: [
24581
- linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24582
- "button",
24583
- {
24584
- onClick: () => {
24585
- isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
24586
- },
24587
- css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
24588
- children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(RichTextToolbarIcon, { icon: "link" })
24523
+ }, [editor]);
24524
+ (0, import_react155.useEffect)(() => {
24525
+ const onControlA = (event) => {
24526
+ if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
24527
+ if (!closestTableCellNode) {
24528
+ return;
24589
24529
  }
24590
- ) }) : null,
24591
- visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
24592
- visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24593
- "button",
24594
- {
24595
- onClick: () => {
24596
- activeElement === "unorderedList" ? editor.dispatchCommand(import_list2.REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(import_list2.INSERT_UNORDERED_LIST_COMMAND, void 0);
24597
- },
24598
- css: [
24599
- richTextToolbarButton,
24600
- activeElement === "unorderedList" ? richTextToolbarButtonActive : null
24601
- ],
24602
- children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
24603
- }
24604
- ) }) : null,
24605
- visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24606
- "button",
24607
- {
24608
- onClick: () => {
24609
- activeElement === "orderedList" ? editor.dispatchCommand(import_list2.REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(import_list2.INSERT_ORDERED_LIST_COMMAND, void 0);
24610
- },
24611
- css: [
24612
- richTextToolbarButton,
24613
- activeElement === "orderedList" ? richTextToolbarButtonActive : null
24614
- ],
24615
- children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
24616
- }
24617
- ) }) : null
24618
- ] }) : null,
24619
- customControls ? customControls : null
24620
- ] }) : null,
24621
- visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { css: toolbarGroup, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
24622
- Menu,
24623
- {
24624
- menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("button", { css: richTextToolbarButton, title: "Insert block element", children: [
24625
- "Insert",
24626
- /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
24627
- ] }),
24628
- placement: "bottom-start",
24629
- children: [
24630
- quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24631
- MenuItem,
24632
- {
24633
- onClick: () => {
24634
- onSelectElement("quote");
24635
- },
24636
- icon: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { icon: "quote", iconColor: "currentColor" }),
24637
- children: "Quote"
24638
- }
24639
- ) : null,
24640
- codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24641
- MenuItem,
24642
- {
24643
- onClick: () => {
24644
- onSelectElement("code");
24645
- },
24646
- icon: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { icon: "code-slash", iconColor: "currentColor" }),
24647
- children: "Code"
24648
- }
24649
- ) : null,
24650
- tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24651
- MenuItem,
24652
- {
24653
- onClick: () => {
24654
- onSelectElement("table");
24655
- },
24656
- icon: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { icon: "view-grid", iconColor: "currentColor" }),
24657
- children: "Table"
24658
- }
24659
- ) : null,
24660
- assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
24661
- MenuItem,
24662
- {
24663
- onClick: () => {
24664
- onSelectElement("asset");
24665
- },
24666
- icon: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { icon: "image", iconColor: "currentColor" }),
24667
- children: "Asset"
24668
- }
24669
- ) : null
24670
- ]
24530
+ event.preventDefault();
24531
+ editor.update(() => {
24532
+ const selection = closestTableCellNode.select(0, closestTableCellNode.getChildrenSize());
24533
+ (0, import_lexical8.$setSelection)(selection);
24534
+ });
24671
24535
  }
24672
- ) }) : null
24673
- ] });
24536
+ };
24537
+ return editor.registerRootListener((rootElement, prevRootElement) => {
24538
+ rootElement == null ? void 0 : rootElement.addEventListener("keydown", onControlA);
24539
+ prevRootElement == null ? void 0 : prevRootElement.removeEventListener("keydown", onControlA);
24540
+ });
24541
+ }, [editor, closestTableCellNode]);
24542
+ return null;
24674
24543
  };
24675
- var RichTextToolbar_default = RichTextToolbar;
24544
+ var TableSelectionPlugin_default = TableSelectionPlugin;
24676
24545
 
24677
24546
  // src/components/ParameterInputs/ParameterRichText.tsx
24678
24547
  var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
@@ -24701,7 +24570,6 @@ var ParameterRichText = ({
24701
24570
  variables,
24702
24571
  customControls,
24703
24572
  onInsertTable,
24704
- onInsertAsset,
24705
24573
  minimalInteractivity
24706
24574
  }) => {
24707
24575
  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
@@ -24735,7 +24603,6 @@ var ParameterRichText = ({
24735
24603
  variables,
24736
24604
  customControls,
24737
24605
  onInsertTable,
24738
- onInsertAsset,
24739
24606
  minimalInteractivity,
24740
24607
  children
24741
24608
  }
@@ -24745,7 +24612,7 @@ var ParameterRichText = ({
24745
24612
  }
24746
24613
  );
24747
24614
  };
24748
- var editorContainerWrapper = import_react158.css`
24615
+ var editorContainerWrapper = import_react156.css`
24749
24616
  position: relative;
24750
24617
 
24751
24618
  &::before {
@@ -24761,12 +24628,12 @@ var editorContainerWrapper = import_react158.css`
24761
24628
  z-index: 2;
24762
24629
  }
24763
24630
  `;
24764
- var editorWrapper = import_react158.css`
24631
+ var editorWrapper = import_react156.css`
24765
24632
  display: flex;
24766
24633
  flex-flow: column;
24767
24634
  flex-grow: 1;
24768
24635
  `;
24769
- var editorContainer = import_react158.css`
24636
+ var editorContainer = import_react156.css`
24770
24637
  ${scrollbarStyles}
24771
24638
  background: var(--white);
24772
24639
  border-radius: var(--rounded-sm);
@@ -24778,7 +24645,7 @@ var editorContainer = import_react158.css`
24778
24645
  font-size: var(--fs-base);
24779
24646
  height: max-content;
24780
24647
  line-height: 1.2;
24781
- max-height: 320px;
24648
+ max-height: 300px;
24782
24649
  min-height: 50px;
24783
24650
  overflow-y: auto;
24784
24651
  padding: var(--spacing-sm);
@@ -24798,7 +24665,7 @@ var editorContainer = import_react158.css`
24798
24665
  max-height: unset;
24799
24666
  }
24800
24667
  `;
24801
- var editorContainerOverflowWrapper = import_react158.css`
24668
+ var editorContainerOverflowWrapper = import_react156.css`
24802
24669
  overflow: hidden;
24803
24670
  pointer-events: none;
24804
24671
 
@@ -24806,7 +24673,7 @@ var editorContainerOverflowWrapper = import_react158.css`
24806
24673
  pointer-events: auto;
24807
24674
  }
24808
24675
  `;
24809
- var editorPlaceholder = import_react158.css`
24676
+ var editorPlaceholder = import_react156.css`
24810
24677
  color: var(--gray-500);
24811
24678
  font-style: italic;
24812
24679
  /* 1px is added to make sure caret is clearly visible when field is focused
@@ -24817,9 +24684,8 @@ var editorPlaceholder = import_react158.css`
24817
24684
  top: var(--spacing-sm);
24818
24685
  user-select: none;
24819
24686
  `;
24820
- var editorInput = import_react158.css`
24687
+ var editorInput = import_react156.css`
24821
24688
  min-height: 100%;
24822
- flex-grow: 1;
24823
24689
 
24824
24690
  &:focus,
24825
24691
  &:focus-within {
@@ -24842,7 +24708,6 @@ var ParameterRichTextInner = ({
24842
24708
  variables,
24843
24709
  customControls,
24844
24710
  onInsertTable,
24845
- onInsertAsset,
24846
24711
  minimalInteractivity
24847
24712
  }) => {
24848
24713
  const lexicalConfig = {
@@ -24857,7 +24722,7 @@ var ParameterRichTextInner = ({
24857
24722
  LinkNode,
24858
24723
  import_rich_text2.HeadingNode,
24859
24724
  import_rich_text2.QuoteNode,
24860
- import_lexical10.ParagraphNode,
24725
+ import_lexical9.ParagraphNode,
24861
24726
  CustomCodeNode,
24862
24727
  import_table5.TableNode,
24863
24728
  import_table5.TableCellNode,
@@ -24915,7 +24780,6 @@ var ParameterRichTextInner = ({
24915
24780
  variables,
24916
24781
  customControls,
24917
24782
  onInsertTable,
24918
- onInsertAsset,
24919
24783
  minimalInteractivity,
24920
24784
  children
24921
24785
  }
@@ -24944,16 +24808,15 @@ var RichText = ({
24944
24808
  variables,
24945
24809
  customControls,
24946
24810
  onInsertTable,
24947
- onInsertAsset,
24948
24811
  minimalInteractivity
24949
24812
  }) => {
24950
- const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
24951
- (0, import_react159.useEffect)(() => {
24813
+ const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
24814
+ (0, import_react157.useEffect)(() => {
24952
24815
  if (onRichTextInit) {
24953
24816
  onRichTextInit(editor);
24954
24817
  }
24955
24818
  }, [editor, onRichTextInit]);
24956
- (0, import_react159.useEffect)(() => {
24819
+ (0, import_react157.useEffect)(() => {
24957
24820
  const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
24958
24821
  requestAnimationFrame(() => {
24959
24822
  if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -24965,31 +24828,23 @@ var RichText = ({
24965
24828
  removeUpdateListener();
24966
24829
  };
24967
24830
  }, [editor, onChange]);
24968
- (0, import_react159.useEffect)(() => {
24831
+ (0, import_react157.useEffect)(() => {
24969
24832
  editor.setEditable(!readOnly);
24970
24833
  }, [editor, readOnly]);
24971
- const [editorContainerRef, setEditorContainerRef] = (0, import_react159.useState)(null);
24834
+ const [editorContainerRef, setEditorContainerRef] = (0, import_react157.useState)(null);
24972
24835
  const onEditorContainerRef = (_editorContainerRef) => {
24973
24836
  if (_editorContainerRef !== null) {
24974
24837
  setEditorContainerRef(_editorContainerRef);
24975
24838
  }
24976
24839
  };
24977
- const [portalContainerRef, setPortalContainerRef] = (0, import_react159.useState)(null);
24840
+ const [portalContainerRef, setPortalContainerRef] = (0, import_react157.useState)(null);
24978
24841
  const onPortalContainerRef = (_portalContainerRef) => {
24979
24842
  if (_portalContainerRef !== null) {
24980
24843
  setPortalContainerRef(_portalContainerRef);
24981
24844
  }
24982
24845
  };
24983
24846
  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, { children: [
24984
- readOnly || minimalInteractivity ? null : /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
24985
- RichTextToolbar_default,
24986
- {
24987
- config,
24988
- customControls,
24989
- onInsertTable,
24990
- onInsertAsset
24991
- }
24992
- ),
24847
+ readOnly || minimalInteractivity ? null : /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(RichTextToolbar_default, { config, customControls, onInsertTable }),
24993
24848
  /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
24994
24849
  /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
24995
24850
  "div",
@@ -25036,23 +24891,22 @@ var RichText = ({
25036
24891
  positioningAnchorEl: editorContainerRef
25037
24892
  }
25038
24893
  ) : null,
25039
- /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(TableSelectionPlugin_default, {}),
25040
- /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ImprovedAssetSelectionPlugin_default, {})
24894
+ /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(TableSelectionPlugin_default, {})
25041
24895
  ] })
25042
24896
  ] });
25043
24897
  };
25044
24898
 
25045
24899
  // src/components/ParameterInputs/ParameterSelect.tsx
25046
24900
  init_emotion_jsx_shim();
25047
- var import_react160 = require("react");
24901
+ var import_react158 = require("react");
25048
24902
  var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
25049
- var ParameterSelect = (0, import_react160.forwardRef)(
24903
+ var ParameterSelect = (0, import_react158.forwardRef)(
25050
24904
  ({ defaultOption, options, ...props }, ref) => {
25051
24905
  const { shellProps, innerProps } = extractParameterProps(props);
25052
24906
  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
25053
24907
  }
25054
24908
  );
25055
- var ParameterSelectInner = (0, import_react160.forwardRef)(
24909
+ var ParameterSelectInner = (0, import_react158.forwardRef)(
25056
24910
  ({ defaultOption, options, ...props }, ref) => {
25057
24911
  const { id, label, hiddenLabel } = useParameterShell();
25058
24912
  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
@@ -25077,13 +24931,13 @@ var ParameterSelectInner = (0, import_react160.forwardRef)(
25077
24931
 
25078
24932
  // src/components/ParameterInputs/ParameterTextarea.tsx
25079
24933
  init_emotion_jsx_shim();
25080
- var import_react161 = require("react");
24934
+ var import_react159 = require("react");
25081
24935
  var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
25082
- var ParameterTextarea = (0, import_react161.forwardRef)((props, ref) => {
24936
+ var ParameterTextarea = (0, import_react159.forwardRef)((props, ref) => {
25083
24937
  const { shellProps, innerProps } = extractParameterProps(props);
25084
24938
  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
25085
24939
  });
25086
- var ParameterTextareaInner = (0, import_react161.forwardRef)(({ ...props }, ref) => {
24940
+ var ParameterTextareaInner = (0, import_react159.forwardRef)(({ ...props }, ref) => {
25087
24941
  const { id, label, hiddenLabel } = useParameterShell();
25088
24942
  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
25089
24943
  "textarea",
@@ -25099,13 +24953,13 @@ var ParameterTextareaInner = (0, import_react161.forwardRef)(({ ...props }, ref)
25099
24953
 
25100
24954
  // src/components/ParameterInputs/ParameterToggle.tsx
25101
24955
  init_emotion_jsx_shim();
25102
- var import_react162 = require("react");
24956
+ var import_react160 = require("react");
25103
24957
  var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
25104
- var ParameterToggle = (0, import_react162.forwardRef)((props, ref) => {
24958
+ var ParameterToggle = (0, import_react160.forwardRef)((props, ref) => {
25105
24959
  const { shellProps, innerProps } = extractParameterProps(props);
25106
24960
  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
25107
24961
  });
25108
- var ParameterToggleInner = (0, import_react162.forwardRef)(
24962
+ var ParameterToggleInner = (0, import_react160.forwardRef)(
25109
24963
  ({ children, ...props }, ref) => {
25110
24964
  const { id, label } = useParameterShell();
25111
24965
  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("label", { css: inputToggleLabel2, children: [
@@ -25121,8 +24975,8 @@ init_emotion_jsx_shim();
25121
24975
 
25122
24976
  // src/components/ProgressBar/ProgressBar.styles.ts
25123
24977
  init_emotion_jsx_shim();
25124
- var import_react163 = require("@emotion/react");
25125
- var container3 = import_react163.css`
24978
+ var import_react161 = require("@emotion/react");
24979
+ var container3 = import_react161.css`
25126
24980
  background: var(--gray-50);
25127
24981
  margin-block: var(--spacing-sm);
25128
24982
  position: relative;
@@ -25132,17 +24986,17 @@ var container3 = import_react163.css`
25132
24986
  border: solid 1px var(--gray-300);
25133
24987
  `;
25134
24988
  var themeMap = {
25135
- primary: import_react163.css`
24989
+ primary: import_react161.css`
25136
24990
  --progress-color: var(--accent-light);
25137
24991
  `,
25138
- secondary: import_react163.css`
24992
+ secondary: import_react161.css`
25139
24993
  --progress-color: var(--accent-alt-light);
25140
24994
  `,
25141
- destructive: import_react163.css`
24995
+ destructive: import_react161.css`
25142
24996
  --progress-color: var(--brand-secondary-5);
25143
24997
  `
25144
24998
  };
25145
- var slidingBackgroundPosition = import_react163.keyframes`
24999
+ var slidingBackgroundPosition = import_react161.keyframes`
25146
25000
  from {
25147
25001
  background-position: 0 0;
25148
25002
  }
@@ -25150,10 +25004,10 @@ var slidingBackgroundPosition = import_react163.keyframes`
25150
25004
  background-position: 64px 0;
25151
25005
  }
25152
25006
  `;
25153
- var determinate = import_react163.css`
25007
+ var determinate = import_react161.css`
25154
25008
  background-color: var(--progress-color);
25155
25009
  `;
25156
- var indeterminate = import_react163.css`
25010
+ var indeterminate = import_react161.css`
25157
25011
  background-image: linear-gradient(
25158
25012
  45deg,
25159
25013
  var(--progress-color) 25%,
@@ -25167,7 +25021,7 @@ var indeterminate = import_react163.css`
25167
25021
  background-size: 64px 64px;
25168
25022
  animation: ${slidingBackgroundPosition} 1s linear infinite;
25169
25023
  `;
25170
- var bar = import_react163.css`
25024
+ var bar = import_react161.css`
25171
25025
  position: absolute;
25172
25026
  inset: 0;
25173
25027
  transition: transform var(--duration-fast) var(--timing-ease-out);
@@ -25216,22 +25070,22 @@ function ProgressBar({
25216
25070
 
25217
25071
  // src/components/ProgressList/ProgressList.tsx
25218
25072
  init_emotion_jsx_shim();
25219
- var import_react165 = require("@emotion/react");
25073
+ var import_react163 = require("@emotion/react");
25220
25074
  var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
25221
25075
  var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
25222
25076
  var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
25223
- var import_react166 = require("react");
25077
+ var import_react164 = require("react");
25224
25078
 
25225
25079
  // src/components/ProgressList/styles/ProgressList.styles.ts
25226
25080
  init_emotion_jsx_shim();
25227
- var import_react164 = require("@emotion/react");
25228
- var progressListStyles = import_react164.css`
25081
+ var import_react162 = require("@emotion/react");
25082
+ var progressListStyles = import_react162.css`
25229
25083
  display: flex;
25230
25084
  flex-direction: column;
25231
25085
  gap: var(--spacing-sm);
25232
25086
  list-style-type: none;
25233
25087
  `;
25234
- var progressListItemStyles = import_react164.css`
25088
+ var progressListItemStyles = import_react162.css`
25235
25089
  display: flex;
25236
25090
  gap: var(--spacing-base);
25237
25091
  align-items: center;
@@ -25240,7 +25094,7 @@ var progressListItemStyles = import_react164.css`
25240
25094
  // src/components/ProgressList/ProgressList.tsx
25241
25095
  var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
25242
25096
  var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
25243
- const itemsWithStatus = (0, import_react166.useMemo)(() => {
25097
+ const itemsWithStatus = (0, import_react164.useMemo)(() => {
25244
25098
  const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
25245
25099
  return items.map((item, index) => {
25246
25100
  let status = "queued";
@@ -25273,7 +25127,7 @@ var ProgressListItem = ({
25273
25127
  errorLevel = "danger",
25274
25128
  autoEllipsis = false
25275
25129
  }) => {
25276
- const icon = (0, import_react166.useMemo)(() => {
25130
+ const icon = (0, import_react164.useMemo)(() => {
25277
25131
  if (error) {
25278
25132
  return warningIcon;
25279
25133
  }
@@ -25284,14 +25138,14 @@ var ProgressListItem = ({
25284
25138
  };
25285
25139
  return iconPerStatus[status];
25286
25140
  }, [status, error]);
25287
- const statusStyles = (0, import_react166.useMemo)(() => {
25141
+ const statusStyles = (0, import_react164.useMemo)(() => {
25288
25142
  if (error) {
25289
- return errorLevel === "caution" ? import_react165.css`
25143
+ return errorLevel === "caution" ? import_react163.css`
25290
25144
  color: rgb(161, 98, 7);
25291
25145
  & svg {
25292
25146
  color: rgb(250, 204, 21);
25293
25147
  }
25294
- ` : import_react165.css`
25148
+ ` : import_react163.css`
25295
25149
  color: rgb(185, 28, 28);
25296
25150
  & svg {
25297
25151
  color: var(--brand-primary-2);
@@ -25299,13 +25153,13 @@ var ProgressListItem = ({
25299
25153
  `;
25300
25154
  }
25301
25155
  const colorPerStatus = {
25302
- completed: import_react165.css`
25156
+ completed: import_react163.css`
25303
25157
  opacity: 0.75;
25304
25158
  `,
25305
- inProgress: import_react165.css`
25159
+ inProgress: import_react163.css`
25306
25160
  -webkit-text-stroke-width: thin;
25307
25161
  `,
25308
- queued: import_react165.css`
25162
+ queued: import_react163.css`
25309
25163
  opacity: 0.5;
25310
25164
  `
25311
25165
  };
@@ -25322,17 +25176,17 @@ var ProgressListItem = ({
25322
25176
 
25323
25177
  // src/components/SegmentedControl/SegmentedControl.tsx
25324
25178
  init_emotion_jsx_shim();
25325
- var import_react168 = require("@emotion/react");
25179
+ var import_react166 = require("@emotion/react");
25326
25180
  var import_CgCheck6 = require("@react-icons/all-files/cg/CgCheck");
25327
- var import_react169 = require("react");
25181
+ var import_react167 = require("react");
25328
25182
 
25329
25183
  // src/components/SegmentedControl/SegmentedControl.styles.ts
25330
25184
  init_emotion_jsx_shim();
25331
- var import_react167 = require("@emotion/react");
25332
- var segmentedControlRootStyles = import_react167.css`
25185
+ var import_react165 = require("@emotion/react");
25186
+ var segmentedControlRootStyles = import_react165.css`
25333
25187
  position: relative;
25334
25188
  `;
25335
- var segmentedControlScrollIndicatorsStyles = import_react167.css`
25189
+ var segmentedControlScrollIndicatorsStyles = import_react165.css`
25336
25190
  position: absolute;
25337
25191
  inset: 0;
25338
25192
  z-index: 1;
@@ -25360,17 +25214,17 @@ var segmentedControlScrollIndicatorsStyles = import_react167.css`
25360
25214
  background: linear-gradient(to left, var(--background-color) 10%, transparent);
25361
25215
  }
25362
25216
  `;
25363
- var segmentedControlScrollIndicatorStartVisibleStyles = import_react167.css`
25217
+ var segmentedControlScrollIndicatorStartVisibleStyles = import_react165.css`
25364
25218
  &::before {
25365
25219
  opacity: 1;
25366
25220
  }
25367
25221
  `;
25368
- var segmentedControlScrollIndicatorEndVisibleStyles = import_react167.css`
25222
+ var segmentedControlScrollIndicatorEndVisibleStyles = import_react165.css`
25369
25223
  &::after {
25370
25224
  opacity: 1;
25371
25225
  }
25372
25226
  `;
25373
- var segmentedControlWrapperStyles = import_react167.css`
25227
+ var segmentedControlWrapperStyles = import_react165.css`
25374
25228
  overflow-y: auto;
25375
25229
  scroll-behavior: smooth;
25376
25230
  scrollbar-width: none;
@@ -25379,7 +25233,7 @@ var segmentedControlWrapperStyles = import_react167.css`
25379
25233
  height: 0px;
25380
25234
  }
25381
25235
  `;
25382
- var segmentedControlStyles = import_react167.css`
25236
+ var segmentedControlStyles = import_react165.css`
25383
25237
  --segmented-control-rounded-value: var(--rounded-base);
25384
25238
  --segmented-control-border-width: 1px;
25385
25239
  --segmented-control-selected-color: var(--brand-secondary-3);
@@ -25398,14 +25252,14 @@ var segmentedControlStyles = import_react167.css`
25398
25252
  border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
25399
25253
  font-size: var(--fs-xs);
25400
25254
  `;
25401
- var segmentedControlVerticalStyles = import_react167.css`
25255
+ var segmentedControlVerticalStyles = import_react165.css`
25402
25256
  flex-direction: column;
25403
25257
  --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
25404
25258
  var(--segmented-control-rounded-value) 0 0;
25405
25259
  --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
25406
25260
  var(--segmented-control-rounded-value);
25407
25261
  `;
25408
- var segmentedControlItemStyles = import_react167.css`
25262
+ var segmentedControlItemStyles = import_react165.css`
25409
25263
  &:first-of-type label {
25410
25264
  border-radius: var(--segmented-control-first-border-radius);
25411
25265
  }
@@ -25413,10 +25267,10 @@ var segmentedControlItemStyles = import_react167.css`
25413
25267
  border-radius: var(--segmented-control-last-border-radius);
25414
25268
  }
25415
25269
  `;
25416
- var segmentedControlInputStyles = import_react167.css`
25270
+ var segmentedControlInputStyles = import_react165.css`
25417
25271
  ${accessibleHidden}
25418
25272
  `;
25419
- var segmentedControlLabelStyles = (checked, disabled2) => import_react167.css`
25273
+ var segmentedControlLabelStyles = (checked, disabled2) => import_react165.css`
25420
25274
  position: relative;
25421
25275
  display: flex;
25422
25276
  align-items: center;
@@ -25483,20 +25337,20 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react167.css`
25483
25337
  `}
25484
25338
  }
25485
25339
  `;
25486
- var segmentedControlLabelIconOnlyStyles = import_react167.css`
25340
+ var segmentedControlLabelIconOnlyStyles = import_react165.css`
25487
25341
  padding-inline: 0.5em;
25488
25342
  `;
25489
- var segmentedControlLabelCheckStyles = import_react167.css`
25343
+ var segmentedControlLabelCheckStyles = import_react165.css`
25490
25344
  opacity: 0.5;
25491
25345
  `;
25492
- var segmentedControlLabelContentStyles = import_react167.css`
25346
+ var segmentedControlLabelContentStyles = import_react165.css`
25493
25347
  display: flex;
25494
25348
  align-items: center;
25495
25349
  justify-content: center;
25496
25350
  gap: var(--spacing-sm);
25497
25351
  height: 100%;
25498
25352
  `;
25499
- var segmentedControlLabelTextStyles = import_react167.css`
25353
+ var segmentedControlLabelTextStyles = import_react165.css`
25500
25354
  white-space: nowrap;
25501
25355
  `;
25502
25356
 
@@ -25516,10 +25370,10 @@ var SegmentedControl = ({
25516
25370
  currentBackgroundColor = "white",
25517
25371
  ...props
25518
25372
  }) => {
25519
- const wrapperRef = (0, import_react169.useRef)(null);
25520
- const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react169.useState)(false);
25521
- const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react169.useState)(false);
25522
- const onOptionChange = (0, import_react169.useCallback)(
25373
+ const wrapperRef = (0, import_react167.useRef)(null);
25374
+ const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react167.useState)(false);
25375
+ const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react167.useState)(false);
25376
+ const onOptionChange = (0, import_react167.useCallback)(
25523
25377
  (event) => {
25524
25378
  if (event.target.checked) {
25525
25379
  onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -25527,19 +25381,19 @@ var SegmentedControl = ({
25527
25381
  },
25528
25382
  [options, onChange]
25529
25383
  );
25530
- const sizeStyles = (0, import_react169.useMemo)(() => {
25384
+ const sizeStyles = (0, import_react167.useMemo)(() => {
25531
25385
  const map = {
25532
- sm: (0, import_react168.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
25533
- md: (0, import_react168.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
25534
- lg: (0, import_react168.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
25535
- xl: (0, import_react168.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
25386
+ sm: (0, import_react166.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
25387
+ md: (0, import_react166.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
25388
+ lg: (0, import_react166.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
25389
+ xl: (0, import_react166.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
25536
25390
  };
25537
25391
  return map[size];
25538
25392
  }, [size]);
25539
- const isIconOnly = (0, import_react169.useMemo)(() => {
25393
+ const isIconOnly = (0, import_react167.useMemo)(() => {
25540
25394
  return options.every((option) => option && option.icon && !option.label);
25541
25395
  }, [options]);
25542
- (0, import_react169.useEffect)(() => {
25396
+ (0, import_react167.useEffect)(() => {
25543
25397
  const wrapperElement = wrapperRef.current;
25544
25398
  const onScroll = () => {
25545
25399
  if (!wrapperElement) {
@@ -25634,12 +25488,12 @@ init_emotion_jsx_shim();
25634
25488
 
25635
25489
  // src/components/Skeleton/Skeleton.styles.ts
25636
25490
  init_emotion_jsx_shim();
25637
- var import_react170 = require("@emotion/react");
25638
- var lightFadingOut = import_react170.keyframes`
25491
+ var import_react168 = require("@emotion/react");
25492
+ var lightFadingOut = import_react168.keyframes`
25639
25493
  from { opacity: 0.1; }
25640
25494
  to { opacity: 0.025; }
25641
25495
  `;
25642
- var skeletonStyles = import_react170.css`
25496
+ var skeletonStyles = import_react168.css`
25643
25497
  animation: ${lightFadingOut} 1s ease-out infinite alternate;
25644
25498
  background-color: var(--gray-900);
25645
25499
  `;
@@ -25674,12 +25528,12 @@ var Skeleton = ({
25674
25528
 
25675
25529
  // src/components/Switch/Switch.tsx
25676
25530
  init_emotion_jsx_shim();
25677
- var import_react172 = require("react");
25531
+ var import_react170 = require("react");
25678
25532
 
25679
25533
  // src/components/Switch/Switch.styles.ts
25680
25534
  init_emotion_jsx_shim();
25681
- var import_react171 = require("@emotion/react");
25682
- var SwitchInputContainer = import_react171.css`
25535
+ var import_react169 = require("@emotion/react");
25536
+ var SwitchInputContainer = import_react169.css`
25683
25537
  cursor: pointer;
25684
25538
  display: inline-block;
25685
25539
  position: relative;
@@ -25688,7 +25542,7 @@ var SwitchInputContainer = import_react171.css`
25688
25542
  vertical-align: middle;
25689
25543
  user-select: none;
25690
25544
  `;
25691
- var SwitchInput = (size) => import_react171.css`
25545
+ var SwitchInput = (size) => import_react169.css`
25692
25546
  appearance: none;
25693
25547
  border-radius: var(--rounded-full);
25694
25548
  background-color: var(--white);
@@ -25728,7 +25582,7 @@ var SwitchInput = (size) => import_react171.css`
25728
25582
  cursor: not-allowed;
25729
25583
  }
25730
25584
  `;
25731
- var SwitchInputDisabled = import_react171.css`
25585
+ var SwitchInputDisabled = import_react169.css`
25732
25586
  opacity: var(--opacity-50);
25733
25587
  cursor: not-allowed;
25734
25588
 
@@ -25736,7 +25590,7 @@ var SwitchInputDisabled = import_react171.css`
25736
25590
  cursor: not-allowed;
25737
25591
  }
25738
25592
  `;
25739
- var SwitchInputLabel = (size) => import_react171.css`
25593
+ var SwitchInputLabel = (size) => import_react169.css`
25740
25594
  align-items: center;
25741
25595
  color: var(--typography-base);
25742
25596
  display: inline-flex;
@@ -25758,7 +25612,7 @@ var SwitchInputLabel = (size) => import_react171.css`
25758
25612
  top: 0;
25759
25613
  }
25760
25614
  `;
25761
- var SwitchText = (size) => import_react171.css`
25615
+ var SwitchText = (size) => import_react169.css`
25762
25616
  color: var(--gray-500);
25763
25617
  font-size: var(--fs-sm);
25764
25618
  padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
@@ -25766,7 +25620,7 @@ var SwitchText = (size) => import_react171.css`
25766
25620
 
25767
25621
  // src/components/Switch/Switch.tsx
25768
25622
  var import_jsx_runtime141 = require("@emotion/react/jsx-runtime");
25769
- var Switch = (0, import_react172.forwardRef)(
25623
+ var Switch = (0, import_react170.forwardRef)(
25770
25624
  ({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
25771
25625
  let additionalText = infoText;
25772
25626
  if (infoText && toggleText) {
@@ -25795,8 +25649,8 @@ var React24 = __toESM(require("react"));
25795
25649
 
25796
25650
  // src/components/Table/Table.styles.ts
25797
25651
  init_emotion_jsx_shim();
25798
- var import_react173 = require("@emotion/react");
25799
- var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react173.css`
25652
+ var import_react171 = require("@emotion/react");
25653
+ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react171.css`
25800
25654
  border-bottom: 1px solid var(--gray-400);
25801
25655
  border-collapse: collapse;
25802
25656
  min-width: 100%;
@@ -25816,14 +25670,14 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_
25816
25670
  background-color: var(--gray-50);
25817
25671
  }
25818
25672
  `;
25819
- var tableHead = import_react173.css`
25673
+ var tableHead = import_react171.css`
25820
25674
  color: var(--typography-base);
25821
25675
  text-align: left;
25822
25676
  `;
25823
- var tableRow = import_react173.css`
25677
+ var tableRow = import_react171.css`
25824
25678
  border-bottom: 1px solid var(--gray-100);
25825
25679
  `;
25826
- var tableCellHead = import_react173.css`
25680
+ var tableCellHead = import_react171.css`
25827
25681
  font-size: var(--fs-sm);
25828
25682
  text-transform: uppercase;
25829
25683
  font-weight: var(--fw-bold);
@@ -25869,13 +25723,13 @@ var TableCellData = React24.forwardRef(
25869
25723
 
25870
25724
  // src/components/Tabs/Tabs.tsx
25871
25725
  init_emotion_jsx_shim();
25872
- var import_react175 = require("@ariakit/react");
25873
- var import_react176 = require("react");
25726
+ var import_react173 = require("@ariakit/react");
25727
+ var import_react174 = require("react");
25874
25728
 
25875
25729
  // src/components/Tabs/Tabs.styles.ts
25876
25730
  init_emotion_jsx_shim();
25877
- var import_react174 = require("@emotion/react");
25878
- var tabButtonStyles = import_react174.css`
25731
+ var import_react172 = require("@emotion/react");
25732
+ var tabButtonStyles = import_react172.css`
25879
25733
  align-items: center;
25880
25734
  border: 0;
25881
25735
  height: 2.5rem;
@@ -25892,7 +25746,7 @@ var tabButtonStyles = import_react174.css`
25892
25746
  box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
25893
25747
  }
25894
25748
  `;
25895
- var tabButtonGroupStyles = import_react174.css`
25749
+ var tabButtonGroupStyles = import_react172.css`
25896
25750
  display: flex;
25897
25751
  gap: var(--spacing-base);
25898
25752
  border-bottom: 1px solid var(--gray-300);
@@ -25901,7 +25755,7 @@ var tabButtonGroupStyles = import_react174.css`
25901
25755
  // src/components/Tabs/Tabs.tsx
25902
25756
  var import_jsx_runtime143 = require("@emotion/react/jsx-runtime");
25903
25757
  var useCurrentTab = () => {
25904
- const context = (0, import_react175.useTabStore)();
25758
+ const context = (0, import_react173.useTabStore)();
25905
25759
  if (!context) {
25906
25760
  throw new Error("This component can only be used inside <Tabs>");
25907
25761
  }
@@ -25915,12 +25769,12 @@ var Tabs = ({
25915
25769
  manual,
25916
25770
  ...props
25917
25771
  }) => {
25918
- const selected = (0, import_react176.useMemo)(() => {
25772
+ const selected = (0, import_react174.useMemo)(() => {
25919
25773
  if (selectedId) return selectedId;
25920
25774
  return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
25921
25775
  }, [selectedId, useHashForState]);
25922
- const tab = (0, import_react175.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
25923
- const onTabSelect = (0, import_react176.useCallback)(
25776
+ const tab = (0, import_react173.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
25777
+ const onTabSelect = (0, import_react174.useCallback)(
25924
25778
  (value) => {
25925
25779
  const selectedValueWithoutNull = value != null ? value : void 0;
25926
25780
  onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -25931,28 +25785,28 @@ var Tabs = ({
25931
25785
  },
25932
25786
  [onSelectedIdChange, useHashForState]
25933
25787
  );
25934
- (0, import_react176.useEffect)(() => {
25788
+ (0, import_react174.useEffect)(() => {
25935
25789
  if (selected && selected !== tab.getState().activeId) {
25936
25790
  tab.setSelectedId(selected);
25937
25791
  }
25938
25792
  }, [selected, tab]);
25939
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react175.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
25793
+ return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react173.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
25940
25794
  };
25941
25795
  var TabButtonGroup = ({ children, ...props }) => {
25942
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react175.TabList, { ...props, css: tabButtonGroupStyles, children });
25796
+ return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react173.TabList, { ...props, css: tabButtonGroupStyles, children });
25943
25797
  };
25944
25798
  var TabButton = ({
25945
25799
  children,
25946
25800
  id,
25947
25801
  ...props
25948
25802
  }) => {
25949
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react175.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
25803
+ return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react173.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
25950
25804
  };
25951
25805
  var TabContent = ({
25952
25806
  children,
25953
25807
  ...props
25954
25808
  }) => {
25955
- return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react175.TabPanel, { ...props, children });
25809
+ return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react173.TabPanel, { ...props, children });
25956
25810
  };
25957
25811
 
25958
25812
  // src/components/Validation/StatusBullet.tsx
@@ -25960,8 +25814,8 @@ init_emotion_jsx_shim();
25960
25814
 
25961
25815
  // src/components/Validation/StatusBullet.styles.ts
25962
25816
  init_emotion_jsx_shim();
25963
- var import_react177 = require("@emotion/react");
25964
- var StatusBulletContainer = import_react177.css`
25817
+ var import_react175 = require("@emotion/react");
25818
+ var StatusBulletContainer = import_react175.css`
25965
25819
  align-items: center;
25966
25820
  align-self: center;
25967
25821
  color: var(--gray-500);
@@ -25978,33 +25832,33 @@ var StatusBulletContainer = import_react177.css`
25978
25832
  display: block;
25979
25833
  }
25980
25834
  `;
25981
- var StatusBulletBase = import_react177.css`
25835
+ var StatusBulletBase = import_react175.css`
25982
25836
  font-size: var(--fs-sm);
25983
25837
  &:before {
25984
25838
  width: var(--fs-xs);
25985
25839
  height: var(--fs-xs);
25986
25840
  }
25987
25841
  `;
25988
- var StatusBulletSmall = import_react177.css`
25842
+ var StatusBulletSmall = import_react175.css`
25989
25843
  font-size: var(--fs-xs);
25990
25844
  &:before {
25991
25845
  width: var(--fs-xxs);
25992
25846
  height: var(--fs-xxs);
25993
25847
  }
25994
25848
  `;
25995
- var StatusDraft = import_react177.css`
25849
+ var StatusDraft = import_react175.css`
25996
25850
  &:before {
25997
25851
  background: var(--white);
25998
25852
  box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
25999
25853
  }
26000
25854
  `;
26001
- var StatusModified = import_react177.css`
25855
+ var StatusModified = import_react175.css`
26002
25856
  &:before {
26003
25857
  background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
26004
25858
  box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
26005
25859
  }
26006
25860
  `;
26007
- var StatusError = import_react177.css`
25861
+ var StatusError = import_react175.css`
26008
25862
  color: var(--error);
26009
25863
  &:before {
26010
25864
  /* TODO: replace this with an svg icon */
@@ -26017,22 +25871,22 @@ var StatusError = import_react177.css`
26017
25871
  );
26018
25872
  }
26019
25873
  `;
26020
- var StatusPublished = import_react177.css`
25874
+ var StatusPublished = import_react175.css`
26021
25875
  &:before {
26022
25876
  background: var(--accent-dark);
26023
25877
  }
26024
25878
  `;
26025
- var StatusOrphan = import_react177.css`
25879
+ var StatusOrphan = import_react175.css`
26026
25880
  &:before {
26027
25881
  background: var(--brand-secondary-5);
26028
25882
  }
26029
25883
  `;
26030
- var StatusUnknown = import_react177.css`
25884
+ var StatusUnknown = import_react175.css`
26031
25885
  &:before {
26032
25886
  background: var(--gray-800);
26033
25887
  }
26034
25888
  `;
26035
- var StatusDeleted = import_react177.css`
25889
+ var StatusDeleted = import_react175.css`
26036
25890
  &:before {
26037
25891
  background: var(--error);
26038
25892
  }