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