@uniformdev/design-system 19.186.2-alpha.14 → 19.186.4-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +1188 -1338
- package/dist/index.d.mts +5 -11
- package/dist/index.d.ts +5 -11
- package/dist/index.js +1311 -1457
- package/package.json +4 -4
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
|
|
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
|
|
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
|
|
22418
|
-
var
|
|
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
|
|
22758
|
-
var
|
|
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
|
|
22695
|
+
var import_utils6 = require("@lexical/utils");
|
|
22761
22696
|
var import_fast_equals = require("fast-equals");
|
|
22762
|
-
var
|
|
22763
|
-
var
|
|
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
|
|
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,
|
|
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,
|
|
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)
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
23004
|
-
if (!(0,
|
|
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,
|
|
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,
|
|
23025
|
-
if (!(0,
|
|
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,
|
|
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,
|
|
23084
|
-
var UPSERT_LINK_NODE_COMMAND = (0,
|
|
23085
|
-
var OPEN_LINK_NODE_MODAL_COMMAND = (0,
|
|
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 =
|
|
23023
|
+
var linkPopover = import_react146.css`
|
|
23091
23024
|
position: absolute;
|
|
23092
23025
|
z-index: 11;
|
|
23093
23026
|
`;
|
|
23094
|
-
var linkPopoverContainer =
|
|
23027
|
+
var linkPopoverContainer = import_react146.css`
|
|
23095
23028
|
${Popover()};
|
|
23096
23029
|
align-items: center;
|
|
23097
23030
|
display: flex;
|
|
23098
23031
|
`;
|
|
23099
|
-
var linkPopoverAnchor =
|
|
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,
|
|
23112
|
-
const [linkPopoverState, setLinkPopoverState] = (0,
|
|
23113
|
-
const linkPopoverElRef = (0,
|
|
23114
|
-
const [isEditorFocused, setIsEditorFocused] = (0,
|
|
23115
|
-
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0,
|
|
23116
|
-
(0,
|
|
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,
|
|
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,
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
23093
|
+
import_lexical3.COMMAND_PRIORITY_EDITOR
|
|
23161
23094
|
),
|
|
23162
23095
|
editor.registerCommand(
|
|
23163
|
-
|
|
23096
|
+
import_lexical3.FOCUS_COMMAND,
|
|
23164
23097
|
() => {
|
|
23165
23098
|
setIsEditorFocused(true);
|
|
23166
23099
|
return true;
|
|
23167
23100
|
},
|
|
23168
|
-
|
|
23101
|
+
import_lexical3.COMMAND_PRIORITY_EDITOR
|
|
23169
23102
|
),
|
|
23170
23103
|
editor.registerCommand(
|
|
23171
|
-
|
|
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
|
-
|
|
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,
|
|
23124
|
+
const maybeShowLinkToolbar = (0, import_react147.useCallback)(() => {
|
|
23227
23125
|
if (!editor.isEditable()) {
|
|
23228
23126
|
return;
|
|
23229
23127
|
}
|
|
23230
|
-
const selection = (0,
|
|
23231
|
-
if (!(0,
|
|
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,
|
|
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
|
|
23346
|
-
var
|
|
23347
|
-
var
|
|
23348
|
-
var
|
|
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,
|
|
23351
|
-
if (!(0,
|
|
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,
|
|
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,
|
|
23376
|
-
if ((0,
|
|
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,
|
|
23286
|
+
const firstBlock = (0, import_utils8.$getNearestBlockElementAncestorOrThrow)(firstNode);
|
|
23389
23287
|
if (firstBlock.canIndent()) {
|
|
23390
23288
|
const firstBlockKey = firstBlock.getKey();
|
|
23391
|
-
let selectionAtStart = (0,
|
|
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,
|
|
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,
|
|
23403
|
-
const isInListItemNode = (0,
|
|
23404
|
-
(0,
|
|
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
|
-
|
|
23304
|
+
import_lexical4.SELECTION_CHANGE_COMMAND,
|
|
23407
23305
|
() => {
|
|
23408
23306
|
editor.read(() => {
|
|
23409
|
-
const selection = (0,
|
|
23410
|
-
if (!(0,
|
|
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,
|
|
23312
|
+
isInListItemNode.current = (0, import_utils8.$getNearestNodeOfType)(selection.anchor.getNode(), import_list.ListNode) !== null;
|
|
23415
23313
|
});
|
|
23416
23314
|
return false;
|
|
23417
23315
|
},
|
|
23418
|
-
|
|
23316
|
+
import_lexical4.COMMAND_PRIORITY_NORMAL
|
|
23419
23317
|
);
|
|
23420
23318
|
}, [editor]);
|
|
23421
|
-
(0,
|
|
23422
|
-
return (0,
|
|
23319
|
+
(0, import_react148.useEffect)(() => {
|
|
23320
|
+
return (0, import_utils8.mergeRegister)(
|
|
23423
23321
|
editor.registerCommand(
|
|
23424
|
-
|
|
23322
|
+
import_lexical4.INDENT_CONTENT_COMMAND,
|
|
23425
23323
|
() => !isIndentPermitted(maxDepth),
|
|
23426
|
-
|
|
23324
|
+
import_lexical4.COMMAND_PRIORITY_CRITICAL
|
|
23427
23325
|
),
|
|
23428
23326
|
editor.registerCommand(
|
|
23429
|
-
|
|
23327
|
+
import_lexical4.KEY_TAB_COMMAND,
|
|
23430
23328
|
(event) => {
|
|
23431
|
-
const selection = (0,
|
|
23432
|
-
if (!(0,
|
|
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 ?
|
|
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
|
-
|
|
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/
|
|
23347
|
+
// src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
|
|
23450
23348
|
init_emotion_jsx_shim();
|
|
23451
|
-
var
|
|
23452
|
-
var
|
|
23453
|
-
var
|
|
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
|
|
23456
|
-
var
|
|
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
|
-
|
|
23459
|
-
|
|
23460
|
-
|
|
23461
|
-
|
|
23462
|
-
|
|
23463
|
-
|
|
23464
|
-
|
|
23465
|
-
var
|
|
23466
|
-
|
|
23467
|
-
|
|
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
|
|
23470
|
-
|
|
23471
|
-
|
|
23472
|
-
|
|
23473
|
-
|
|
23474
|
-
|
|
23475
|
-
|
|
23476
|
-
|
|
23477
|
-
|
|
23478
|
-
|
|
23479
|
-
|
|
23480
|
-
|
|
23481
|
-
|
|
23482
|
-
|
|
23483
|
-
|
|
23484
|
-
|
|
23485
|
-
|
|
23486
|
-
|
|
23487
|
-
|
|
23488
|
-
|
|
23489
|
-
|
|
23490
|
-
|
|
23491
|
-
|
|
23492
|
-
|
|
23493
|
-
|
|
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
|
-
|
|
23498
|
-
|
|
23499
|
-
|
|
23500
|
-
|
|
23501
|
-
|
|
23502
|
-
|
|
23503
|
-
|
|
23504
|
-
|
|
23505
|
-
|
|
23506
|
-
|
|
23507
|
-
|
|
23508
|
-
|
|
23509
|
-
|
|
23510
|
-
|
|
23511
|
-
|
|
23512
|
-
|
|
23513
|
-
|
|
23514
|
-
|
|
23515
|
-
|
|
23516
|
-
|
|
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
|
-
|
|
23595
|
-
|
|
23596
|
-
|
|
23597
|
-
|
|
23598
|
-
|
|
23599
|
-
|
|
23600
|
-
|
|
23601
|
-
|
|
23602
|
-
|
|
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
|
-
|
|
23605
|
-
|
|
23606
|
-
|
|
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
|
-
|
|
23609
|
-
|
|
23610
|
-
|
|
23611
|
-
|
|
23612
|
-
|
|
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,
|
|
23617
|
-
|
|
23618
|
-
|
|
23619
|
-
|
|
23620
|
-
|
|
23621
|
-
|
|
23622
|
-
|
|
23623
|
-
|
|
23624
|
-
|
|
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
|
-
|
|
23627
|
-
|
|
23628
|
-
|
|
23629
|
-
|
|
23630
|
-
|
|
23631
|
-
|
|
23632
|
-
|
|
23633
|
-
|
|
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
|
-
|
|
23636
|
-
|
|
23637
|
-
|
|
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
|
-
|
|
23640
|
-
|
|
23641
|
-
|
|
23642
|
-
|
|
23643
|
-
|
|
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
|
-
|
|
23654
|
-
|
|
23655
|
-
|
|
23656
|
-
|
|
23657
|
-
|
|
23658
|
-
|
|
23659
|
-
|
|
23660
|
-
children: [
|
|
23661
|
-
/* @__PURE__ */ (0, import_jsx_runtime130.
|
|
23662
|
-
|
|
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
|
-
|
|
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:
|
|
23668
|
-
|
|
23669
|
-
"
|
|
23670
|
-
|
|
23671
|
-
|
|
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.
|
|
23676
|
-
"
|
|
23677
|
-
|
|
23678
|
-
|
|
23679
|
-
|
|
23680
|
-
|
|
23681
|
-
|
|
23682
|
-
|
|
23683
|
-
|
|
23684
|
-
|
|
23685
|
-
|
|
23686
|
-
|
|
23687
|
-
|
|
23688
|
-
|
|
23689
|
-
|
|
23690
|
-
|
|
23691
|
-
|
|
23692
|
-
|
|
23693
|
-
|
|
23694
|
-
/* @__PURE__ */ (0, import_jsx_runtime130.
|
|
23695
|
-
|
|
23696
|
-
|
|
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
|
-
|
|
23702
|
-
|
|
23703
|
-
|
|
23704
|
-
|
|
23705
|
-
|
|
23706
|
-
|
|
23707
|
-
|
|
23708
|
-
|
|
23709
|
-
}
|
|
23710
|
-
|
|
23711
|
-
|
|
23712
|
-
|
|
23713
|
-
|
|
23714
|
-
|
|
23715
|
-
|
|
23716
|
-
|
|
23717
|
-
|
|
23718
|
-
|
|
23719
|
-
|
|
23720
|
-
|
|
23721
|
-
|
|
23722
|
-
|
|
23723
|
-
|
|
23724
|
-
|
|
23725
|
-
|
|
23726
|
-
|
|
23727
|
-
|
|
23728
|
-
|
|
23729
|
-
|
|
23730
|
-
|
|
23731
|
-
|
|
23732
|
-
|
|
23733
|
-
|
|
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
|
-
|
|
23750
|
-
|
|
23751
|
-
|
|
23752
|
-
|
|
23753
|
-
|
|
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
|
-
|
|
23756
|
-
|
|
23757
|
-
|
|
23758
|
-
|
|
23759
|
-
|
|
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
|
-
|
|
23762
|
-
|
|
23763
|
-
|
|
23764
|
-
editor.getEditorState().read(() => {
|
|
23765
|
-
$moveMenu();
|
|
23772
|
+
if (visibleLists.size > 0) {
|
|
23773
|
+
visibleLists.forEach((type) => {
|
|
23774
|
+
visibleElements.add(type);
|
|
23766
23775
|
});
|
|
23767
|
-
}
|
|
23768
|
-
|
|
23769
|
-
|
|
23770
|
-
|
|
23771
|
-
|
|
23772
|
-
|
|
23773
|
-
|
|
23774
|
-
|
|
23775
|
-
|
|
23776
|
-
|
|
23777
|
-
|
|
23778
|
-
|
|
23779
|
-
|
|
23780
|
-
|
|
23781
|
-
|
|
23782
|
-
|
|
23783
|
-
|
|
23784
|
-
|
|
23785
|
-
|
|
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/
|
|
23812
|
+
// src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
|
|
23789
23813
|
init_emotion_jsx_shim();
|
|
23790
|
-
var
|
|
23791
|
-
var
|
|
23792
|
-
var
|
|
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
|
|
23795
|
-
var
|
|
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
|
-
|
|
23800
|
-
|
|
23801
|
-
|
|
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
|
-
|
|
23830
|
+
transform: translate(calc(-100% - 1px), 1px);
|
|
23804
23831
|
`;
|
|
23805
|
-
var
|
|
23806
|
-
|
|
23807
|
-
|
|
23808
|
-
|
|
23809
|
-
|
|
23810
|
-
|
|
23811
|
-
|
|
23812
|
-
|
|
23813
|
-
|
|
23814
|
-
|
|
23815
|
-
|
|
23816
|
-
|
|
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
|
-
|
|
23819
|
-
|
|
23820
|
-
|
|
23821
|
-
|
|
23822
|
-
|
|
23823
|
-
|
|
23824
|
-
|
|
23825
|
-
|
|
23826
|
-
|
|
23827
|
-
const [
|
|
23828
|
-
const [
|
|
23829
|
-
const [
|
|
23830
|
-
|
|
23831
|
-
|
|
23832
|
-
|
|
23833
|
-
|
|
23834
|
-
|
|
23835
|
-
|
|
23836
|
-
|
|
23837
|
-
|
|
23838
|
-
|
|
23839
|
-
|
|
23840
|
-
|
|
23841
|
-
|
|
23842
|
-
|
|
23843
|
-
|
|
23844
|
-
|
|
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
|
-
|
|
23853
|
-
|
|
23854
|
-
|
|
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
|
-
|
|
23857
|
-
|
|
23858
|
-
|
|
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
|
-
|
|
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
|
-
|
|
23914
|
-
|
|
23915
|
-
|
|
23916
|
-
|
|
23917
|
-
|
|
23918
|
-
|
|
23919
|
-
|
|
23920
|
-
|
|
23921
|
-
|
|
23922
|
-
|
|
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
|
-
[
|
|
23927
|
+
[editor]
|
|
23944
23928
|
);
|
|
23945
|
-
const
|
|
23946
|
-
|
|
23947
|
-
|
|
23948
|
-
|
|
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
|
-
[
|
|
23938
|
+
[editor, selectionCounts.columns]
|
|
24003
23939
|
);
|
|
24004
|
-
const
|
|
24005
|
-
(
|
|
24006
|
-
|
|
24007
|
-
|
|
24008
|
-
|
|
24009
|
-
|
|
24010
|
-
|
|
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
|
-
|
|
24013
|
-
|
|
24014
|
-
|
|
24015
|
-
|
|
24016
|
-
|
|
24017
|
-
|
|
24018
|
-
|
|
24019
|
-
|
|
24020
|
-
|
|
24021
|
-
|
|
24022
|
-
|
|
24023
|
-
|
|
24024
|
-
|
|
24025
|
-
|
|
24026
|
-
|
|
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
|
-
|
|
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
|
-
|
|
24075
|
-
|
|
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
|
-
|
|
24002
|
+
tableCell.toggleHeaderStyle(import_table2.TableCellHeaderStates.COLUMN);
|
|
24088
24003
|
}
|
|
24089
|
-
|
|
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
|
-
|
|
24092
|
-
|
|
24093
|
-
|
|
24094
|
-
|
|
24095
|
-
|
|
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
|
-
}, [
|
|
24098
|
-
const
|
|
24099
|
-
|
|
24100
|
-
|
|
24101
|
-
|
|
24102
|
-
|
|
24103
|
-
|
|
24104
|
-
|
|
24105
|
-
|
|
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
|
-
|
|
24109
|
-
|
|
24110
|
-
|
|
24111
|
-
|
|
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
|
-
|
|
24119
|
-
|
|
24120
|
-
|
|
24121
|
-
|
|
24122
|
-
|
|
24123
|
-
|
|
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
|
-
|
|
24126
|
-
|
|
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/
|
|
24151
|
+
// src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
|
|
24131
24152
|
init_emotion_jsx_shim();
|
|
24132
|
-
var
|
|
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
|
|
24157
|
+
var import_utils12 = require("@lexical/utils");
|
|
24158
|
+
var import_lexical7 = require("lexical");
|
|
24135
24159
|
var import_react154 = require("react");
|
|
24136
|
-
var
|
|
24137
|
-
|
|
24138
|
-
|
|
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
|
-
|
|
24141
|
-
|
|
24142
|
-
|
|
24143
|
-
|
|
24144
|
-
|
|
24145
|
-
|
|
24146
|
-
|
|
24147
|
-
|
|
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
|
|
24168
|
-
|
|
24169
|
-
|
|
24170
|
-
|
|
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
|
-
|
|
24175
|
-
|
|
24176
|
-
|
|
24177
|
-
|
|
24178
|
-
|
|
24179
|
-
|
|
24180
|
-
|
|
24181
|
-
|
|
24182
|
-
|
|
24183
|
-
|
|
24184
|
-
|
|
24185
|
-
|
|
24186
|
-
|
|
24187
|
-
|
|
24188
|
-
|
|
24189
|
-
|
|
24190
|
-
|
|
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
|
|
24253
|
-
|
|
24254
|
-
|
|
24255
|
-
|
|
24256
|
-
|
|
24257
|
-
|
|
24258
|
-
|
|
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
|
|
24263
|
-
|
|
24264
|
-
|
|
24265
|
-
|
|
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
|
-
|
|
24269
|
-
|
|
24270
|
-
|
|
24271
|
-
|
|
24272
|
-
|
|
24273
|
-
|
|
24274
|
-
|
|
24275
|
-
|
|
24276
|
-
|
|
24277
|
-
|
|
24278
|
-
|
|
24279
|
-
|
|
24280
|
-
|
|
24281
|
-
|
|
24282
|
-
|
|
24283
|
-
|
|
24284
|
-
|
|
24285
|
-
|
|
24286
|
-
|
|
24287
|
-
|
|
24288
|
-
|
|
24289
|
-
|
|
24290
|
-
|
|
24291
|
-
|
|
24292
|
-
|
|
24293
|
-
|
|
24294
|
-
|
|
24295
|
-
|
|
24296
|
-
}
|
|
24297
|
-
|
|
24298
|
-
|
|
24299
|
-
|
|
24300
|
-
|
|
24301
|
-
|
|
24302
|
-
|
|
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
|
-
|
|
24316
|
-
|
|
24313
|
+
const domCellNode = activeEditor.getElementByKey(cell2.getKey());
|
|
24314
|
+
if (domCellNode == null) {
|
|
24315
|
+
return void 0;
|
|
24317
24316
|
}
|
|
24318
|
-
|
|
24319
|
-
|
|
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
|
-
|
|
24342
|
-
|
|
24343
|
-
|
|
24344
|
-
|
|
24345
|
-
|
|
24346
|
-
|
|
24347
|
-
|
|
24348
|
-
|
|
24349
|
-
|
|
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
|
-
|
|
24430
|
-
|
|
24431
|
-
|
|
24432
|
-
|
|
24433
|
-
|
|
24434
|
-
|
|
24435
|
-
|
|
24436
|
-
|
|
24437
|
-
|
|
24438
|
-
|
|
24439
|
-
|
|
24440
|
-
|
|
24441
|
-
|
|
24442
|
-
|
|
24443
|
-
|
|
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
|
-
|
|
24446
|
-
|
|
24447
|
-
|
|
24448
|
-
|
|
24449
|
-
|
|
24450
|
-
|
|
24451
|
-
|
|
24452
|
-
|
|
24453
|
-
|
|
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
|
-
|
|
24459
|
-
|
|
24460
|
-
|
|
24461
|
-
|
|
24462
|
-
|
|
24463
|
-
|
|
24464
|
-
|
|
24465
|
-
|
|
24466
|
-
|
|
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
|
-
|
|
24470
|
-
|
|
24471
|
-
|
|
24472
|
-
|
|
24473
|
-
|
|
24474
|
-
}
|
|
24475
|
-
|
|
24476
|
-
|
|
24477
|
-
|
|
24478
|
-
|
|
24479
|
-
|
|
24480
|
-
|
|
24481
|
-
|
|
24482
|
-
|
|
24483
|
-
|
|
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
|
-
|
|
24491
|
-
|
|
24492
|
-
|
|
24493
|
-
|
|
24494
|
-
|
|
24495
|
-
|
|
24496
|
-
|
|
24497
|
-
|
|
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
|
-
|
|
24500
|
-
(
|
|
24501
|
-
|
|
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
|
-
|
|
24521
|
+
import_lexical8.COMMAND_PRIORITY_NORMAL
|
|
24505
24522
|
);
|
|
24506
|
-
}, [editor
|
|
24507
|
-
(0,
|
|
24508
|
-
|
|
24509
|
-
|
|
24510
|
-
|
|
24511
|
-
|
|
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
|
-
|
|
24591
|
-
|
|
24592
|
-
|
|
24593
|
-
|
|
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
|
-
|
|
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
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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:
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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
|
-
|
|
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,
|
|
24951
|
-
(0,
|
|
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,
|
|
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,
|
|
24831
|
+
(0, import_react157.useEffect)(() => {
|
|
24969
24832
|
editor.setEditable(!readOnly);
|
|
24970
24833
|
}, [editor, readOnly]);
|
|
24971
|
-
const [editorContainerRef, setEditorContainerRef] = (0,
|
|
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,
|
|
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
|
|
24901
|
+
var import_react158 = require("react");
|
|
25048
24902
|
var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
|
|
25049
|
-
var ParameterSelect = (0,
|
|
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,
|
|
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
|
|
24934
|
+
var import_react159 = require("react");
|
|
25081
24935
|
var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
|
|
25082
|
-
var ParameterTextarea = (0,
|
|
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,
|
|
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
|
|
24956
|
+
var import_react160 = require("react");
|
|
25103
24957
|
var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
|
|
25104
|
-
var ParameterToggle = (0,
|
|
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,
|
|
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
|
|
25125
|
-
var container3 =
|
|
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:
|
|
24989
|
+
primary: import_react161.css`
|
|
25136
24990
|
--progress-color: var(--accent-light);
|
|
25137
24991
|
`,
|
|
25138
|
-
secondary:
|
|
24992
|
+
secondary: import_react161.css`
|
|
25139
24993
|
--progress-color: var(--accent-alt-light);
|
|
25140
24994
|
`,
|
|
25141
|
-
destructive:
|
|
24995
|
+
destructive: import_react161.css`
|
|
25142
24996
|
--progress-color: var(--brand-secondary-5);
|
|
25143
24997
|
`
|
|
25144
24998
|
};
|
|
25145
|
-
var slidingBackgroundPosition =
|
|
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 =
|
|
25007
|
+
var determinate = import_react161.css`
|
|
25154
25008
|
background-color: var(--progress-color);
|
|
25155
25009
|
`;
|
|
25156
|
-
var indeterminate =
|
|
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 =
|
|
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
|
|
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
|
|
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
|
|
25228
|
-
var progressListStyles =
|
|
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 =
|
|
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,
|
|
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,
|
|
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,
|
|
25141
|
+
const statusStyles = (0, import_react164.useMemo)(() => {
|
|
25288
25142
|
if (error) {
|
|
25289
|
-
return errorLevel === "caution" ?
|
|
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
|
-
` :
|
|
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:
|
|
25156
|
+
completed: import_react163.css`
|
|
25303
25157
|
opacity: 0.75;
|
|
25304
25158
|
`,
|
|
25305
|
-
inProgress:
|
|
25159
|
+
inProgress: import_react163.css`
|
|
25306
25160
|
-webkit-text-stroke-width: thin;
|
|
25307
25161
|
`,
|
|
25308
|
-
queued:
|
|
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
|
|
25179
|
+
var import_react166 = require("@emotion/react");
|
|
25326
25180
|
var import_CgCheck6 = require("@react-icons/all-files/cg/CgCheck");
|
|
25327
|
-
var
|
|
25181
|
+
var import_react167 = require("react");
|
|
25328
25182
|
|
|
25329
25183
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
25330
25184
|
init_emotion_jsx_shim();
|
|
25331
|
-
var
|
|
25332
|
-
var segmentedControlRootStyles =
|
|
25185
|
+
var import_react165 = require("@emotion/react");
|
|
25186
|
+
var segmentedControlRootStyles = import_react165.css`
|
|
25333
25187
|
position: relative;
|
|
25334
25188
|
`;
|
|
25335
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
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 =
|
|
25217
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = import_react165.css`
|
|
25364
25218
|
&::before {
|
|
25365
25219
|
opacity: 1;
|
|
25366
25220
|
}
|
|
25367
25221
|
`;
|
|
25368
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
25222
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = import_react165.css`
|
|
25369
25223
|
&::after {
|
|
25370
25224
|
opacity: 1;
|
|
25371
25225
|
}
|
|
25372
25226
|
`;
|
|
25373
|
-
var segmentedControlWrapperStyles =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
25270
|
+
var segmentedControlInputStyles = import_react165.css`
|
|
25417
25271
|
${accessibleHidden}
|
|
25418
25272
|
`;
|
|
25419
|
-
var segmentedControlLabelStyles = (checked, disabled2) =>
|
|
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 =
|
|
25340
|
+
var segmentedControlLabelIconOnlyStyles = import_react165.css`
|
|
25487
25341
|
padding-inline: 0.5em;
|
|
25488
25342
|
`;
|
|
25489
|
-
var segmentedControlLabelCheckStyles =
|
|
25343
|
+
var segmentedControlLabelCheckStyles = import_react165.css`
|
|
25490
25344
|
opacity: 0.5;
|
|
25491
25345
|
`;
|
|
25492
|
-
var segmentedControlLabelContentStyles =
|
|
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 =
|
|
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,
|
|
25520
|
-
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0,
|
|
25521
|
-
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0,
|
|
25522
|
-
const onOptionChange = (0,
|
|
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,
|
|
25384
|
+
const sizeStyles = (0, import_react167.useMemo)(() => {
|
|
25531
25385
|
const map = {
|
|
25532
|
-
sm: (0,
|
|
25533
|
-
md: (0,
|
|
25534
|
-
lg: (0,
|
|
25535
|
-
xl: (0,
|
|
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,
|
|
25393
|
+
const isIconOnly = (0, import_react167.useMemo)(() => {
|
|
25540
25394
|
return options.every((option) => option && option.icon && !option.label);
|
|
25541
25395
|
}, [options]);
|
|
25542
|
-
(0,
|
|
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
|
|
25638
|
-
var lightFadingOut =
|
|
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 =
|
|
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
|
|
25531
|
+
var import_react170 = require("react");
|
|
25678
25532
|
|
|
25679
25533
|
// src/components/Switch/Switch.styles.ts
|
|
25680
25534
|
init_emotion_jsx_shim();
|
|
25681
|
-
var
|
|
25682
|
-
var SwitchInputContainer =
|
|
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) =>
|
|
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 =
|
|
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) =>
|
|
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) =>
|
|
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,
|
|
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
|
|
25799
|
-
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) =>
|
|
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 =
|
|
25673
|
+
var tableHead = import_react171.css`
|
|
25820
25674
|
color: var(--typography-base);
|
|
25821
25675
|
text-align: left;
|
|
25822
25676
|
`;
|
|
25823
|
-
var tableRow =
|
|
25677
|
+
var tableRow = import_react171.css`
|
|
25824
25678
|
border-bottom: 1px solid var(--gray-100);
|
|
25825
25679
|
`;
|
|
25826
|
-
var tableCellHead =
|
|
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
|
|
25873
|
-
var
|
|
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
|
|
25878
|
-
var tabButtonStyles =
|
|
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 =
|
|
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,
|
|
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,
|
|
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,
|
|
25923
|
-
const onTabSelect = (0,
|
|
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,
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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
|
|
25964
|
-
var StatusBulletContainer =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
25874
|
+
var StatusPublished = import_react175.css`
|
|
26021
25875
|
&:before {
|
|
26022
25876
|
background: var(--accent-dark);
|
|
26023
25877
|
}
|
|
26024
25878
|
`;
|
|
26025
|
-
var StatusOrphan =
|
|
25879
|
+
var StatusOrphan = import_react175.css`
|
|
26026
25880
|
&:before {
|
|
26027
25881
|
background: var(--brand-secondary-5);
|
|
26028
25882
|
}
|
|
26029
25883
|
`;
|
|
26030
|
-
var StatusUnknown =
|
|
25884
|
+
var StatusUnknown = import_react175.css`
|
|
26031
25885
|
&:before {
|
|
26032
25886
|
background: var(--gray-800);
|
|
26033
25887
|
}
|
|
26034
25888
|
`;
|
|
26035
|
-
var StatusDeleted =
|
|
25889
|
+
var StatusDeleted = import_react175.css`
|
|
26036
25890
|
&:before {
|
|
26037
25891
|
background: var(--error);
|
|
26038
25892
|
}
|