@uniformdev/design-system 19.185.1-alpha.8 → 19.186.1
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 +1172 -1206
- package/dist/index.d.mts +8 -12
- package/dist/index.d.ts +8 -12
- package/dist/index.js +1196 -1232
- package/package.json +4 -4
package/dist/esm/index.js
CHANGED
|
@@ -17736,7 +17736,8 @@ var KeyValueInput = ({
|
|
|
17736
17736
|
onChange: (itemValue) => handleUpdateOptionRow(index, itemValue),
|
|
17737
17737
|
onDelete: () => handleDeleteOptionRow(index),
|
|
17738
17738
|
onFocusChange: handleFocusChange,
|
|
17739
|
-
"data-testid": "key-value-input-item"
|
|
17739
|
+
"data-testid": "key-value-input-item",
|
|
17740
|
+
onEnter: handleAddOptionRow
|
|
17740
17741
|
},
|
|
17741
17742
|
isDragging ? id : index
|
|
17742
17743
|
)) })
|
|
@@ -17771,7 +17772,8 @@ var KeyValueInputItem = ({
|
|
|
17771
17772
|
error,
|
|
17772
17773
|
onFocusChange,
|
|
17773
17774
|
disabledDelete = false,
|
|
17774
|
-
disabledDnd = false
|
|
17775
|
+
disabledDnd = false,
|
|
17776
|
+
onEnter
|
|
17775
17777
|
}) => {
|
|
17776
17778
|
const { attributes, listeners, setNodeRef, transform, transition, setActivatorNodeRef, isSorting } = useSortable({
|
|
17777
17779
|
id,
|
|
@@ -17781,6 +17783,11 @@ var KeyValueInputItem = ({
|
|
|
17781
17783
|
transform: CSS.Transform.toString(transform),
|
|
17782
17784
|
transition
|
|
17783
17785
|
};
|
|
17786
|
+
const handleEnter = (e) => {
|
|
17787
|
+
if (e.key === "Enter") {
|
|
17788
|
+
onEnter();
|
|
17789
|
+
}
|
|
17790
|
+
};
|
|
17784
17791
|
return /* @__PURE__ */ jsxs57("div", { css: rowWrapper, ref: setNodeRef, style, children: [
|
|
17785
17792
|
/* @__PURE__ */ jsx92(DragHandle, { disableDnd: disabledDnd, ref: setActivatorNodeRef, ...attributes, ...listeners }),
|
|
17786
17793
|
/* @__PURE__ */ jsxs57("div", { css: SelectKeyValueRowStyles, "data-testid": "key-value-input-item", children: [
|
|
@@ -17800,6 +17807,7 @@ var KeyValueInputItem = ({
|
|
|
17800
17807
|
},
|
|
17801
17808
|
onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
|
|
17802
17809
|
onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
|
|
17810
|
+
onKeyDown: handleEnter,
|
|
17803
17811
|
value: value.key,
|
|
17804
17812
|
errorMessage: isSorting ? void 0 : error == null ? void 0 : error.key,
|
|
17805
17813
|
"data-testid": "key"
|
|
@@ -17811,12 +17819,15 @@ var KeyValueInputItem = ({
|
|
|
17811
17819
|
label: valueLabel,
|
|
17812
17820
|
showLabel: false,
|
|
17813
17821
|
disabled: disabled2,
|
|
17814
|
-
onChange: (e) =>
|
|
17815
|
-
|
|
17816
|
-
|
|
17817
|
-
|
|
17822
|
+
onChange: (e) => {
|
|
17823
|
+
onChange == null ? void 0 : onChange({
|
|
17824
|
+
key: value.key,
|
|
17825
|
+
value: e.currentTarget.value
|
|
17826
|
+
});
|
|
17827
|
+
},
|
|
17818
17828
|
onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
|
|
17819
17829
|
onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
|
|
17830
|
+
onKeyDown: handleEnter,
|
|
17820
17831
|
value: value.value,
|
|
17821
17832
|
errorMessage: isSorting ? void 0 : error == null ? void 0 : error.value,
|
|
17822
17833
|
"data-testid": "value"
|
|
@@ -19923,8 +19934,8 @@ import { useState as useState15 } from "react";
|
|
|
19923
19934
|
|
|
19924
19935
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
19925
19936
|
import { jsx as jsx121 } from "@emotion/react/jsx-runtime";
|
|
19926
|
-
var ParameterLabel = ({ id, asSpan, children, ...props }) => {
|
|
19927
|
-
return !asSpan ? /* @__PURE__ */ jsx121("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx121("span", { "aria-labelledby": id, css: labelText2, children });
|
|
19937
|
+
var ParameterLabel = ({ id, asSpan, children, testId, ...props }) => {
|
|
19938
|
+
return !asSpan ? /* @__PURE__ */ jsx121("label", { ...props, htmlFor: id, css: labelText2, "data-testid": testId, children }) : /* @__PURE__ */ jsx121("span", { "aria-labelledby": id, css: labelText2, children });
|
|
19928
19939
|
};
|
|
19929
19940
|
|
|
19930
19941
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
@@ -20049,7 +20060,7 @@ var ParameterShell = ({
|
|
|
20049
20060
|
label,
|
|
20050
20061
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
20051
20062
|
] }),
|
|
20052
|
-
!title2 ? null : /* @__PURE__ */ jsxs81(ParameterLabel, { id, asSpan: true, children: [
|
|
20063
|
+
!title2 ? null : /* @__PURE__ */ jsxs81(ParameterLabel, { id, asSpan: true, testId: "parameter-label", children: [
|
|
20053
20064
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
20054
20065
|
title2,
|
|
20055
20066
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
@@ -20442,10 +20453,6 @@ var richTextBuiltInElements = [
|
|
|
20442
20453
|
label: "Table",
|
|
20443
20454
|
type: "table"
|
|
20444
20455
|
},
|
|
20445
|
-
{
|
|
20446
|
-
label: "Asset",
|
|
20447
|
-
type: "asset"
|
|
20448
|
-
},
|
|
20449
20456
|
{
|
|
20450
20457
|
label: "Dynamic Token",
|
|
20451
20458
|
type: "variable"
|
|
@@ -21453,1269 +21460,1242 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
21453
21460
|
return null;
|
|
21454
21461
|
}
|
|
21455
21462
|
|
|
21456
|
-
// src/components/ParameterInputs/rich-text/
|
|
21463
|
+
// src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
|
|
21457
21464
|
import { css as css98 } from "@emotion/react";
|
|
21465
|
+
import { $createCodeNode } from "@lexical/code";
|
|
21466
|
+
import {
|
|
21467
|
+
$isListNode as $isListNode2,
|
|
21468
|
+
INSERT_ORDERED_LIST_COMMAND,
|
|
21469
|
+
INSERT_UNORDERED_LIST_COMMAND,
|
|
21470
|
+
ListNode as ListNode2,
|
|
21471
|
+
REMOVE_LIST_COMMAND
|
|
21472
|
+
} from "@lexical/list";
|
|
21458
21473
|
import { useLexicalComposerContext as useLexicalComposerContext4 } from "@lexical/react/LexicalComposerContext";
|
|
21459
|
-
import {
|
|
21474
|
+
import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
|
|
21475
|
+
import { $setBlocksType } from "@lexical/selection";
|
|
21476
|
+
import { $createTableNodeWithDimensions } from "@lexical/table";
|
|
21477
|
+
import { $findMatchingParent, $getNearestNodeOfType as $getNearestNodeOfType2 } from "@lexical/utils";
|
|
21460
21478
|
import {
|
|
21461
|
-
$
|
|
21462
|
-
$
|
|
21463
|
-
$
|
|
21464
|
-
$
|
|
21465
|
-
$
|
|
21466
|
-
|
|
21467
|
-
|
|
21468
|
-
|
|
21469
|
-
|
|
21470
|
-
|
|
21471
|
-
|
|
21472
|
-
|
|
21473
|
-
|
|
21474
|
-
|
|
21475
|
-
|
|
21476
|
-
|
|
21477
|
-
|
|
21478
|
-
|
|
21479
|
-
|
|
21480
|
-
|
|
21481
|
-
|
|
21482
|
-
|
|
21483
|
-
|
|
21484
|
-
|
|
21485
|
-
}
|
|
21486
|
-
var tableActionMenuTrigger = css98`
|
|
21487
|
-
position: absolute;
|
|
21488
|
-
transform: translate(calc(-100% - 1px), 1px);
|
|
21479
|
+
$createParagraphNode,
|
|
21480
|
+
$getSelection as $getSelection3,
|
|
21481
|
+
$insertNodes,
|
|
21482
|
+
$isRangeSelection as $isRangeSelection3,
|
|
21483
|
+
$isRootOrShadowRoot,
|
|
21484
|
+
COMMAND_PRIORITY_CRITICAL as COMMAND_PRIORITY_CRITICAL2,
|
|
21485
|
+
FORMAT_TEXT_COMMAND,
|
|
21486
|
+
SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND2
|
|
21487
|
+
} from "lexical";
|
|
21488
|
+
import { useCallback as useCallback11, useEffect as useEffect20, useMemo as useMemo6, useState as useState17 } from "react";
|
|
21489
|
+
import { Fragment as Fragment19, jsx as jsx130, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
|
|
21490
|
+
var toolbar = css98`
|
|
21491
|
+
${scrollbarStyles}
|
|
21492
|
+
background: var(--gray-50);
|
|
21493
|
+
border-radius: var(--rounded-base);
|
|
21494
|
+
display: flex;
|
|
21495
|
+
/* We add 1px because we use a 1px wide separator */
|
|
21496
|
+
gap: calc(var(--spacing-sm) + 1px);
|
|
21497
|
+
margin: 0 0 calc(var(--spacing-sm) + var(--spacing-xs)) 0;
|
|
21498
|
+
overflow: auto;
|
|
21499
|
+
padding: var(--spacing-sm);
|
|
21500
|
+
position: sticky;
|
|
21501
|
+
top: calc(var(--spacing-sm) * -2);
|
|
21502
|
+
z-index: 10;
|
|
21489
21503
|
`;
|
|
21490
|
-
var
|
|
21491
|
-
|
|
21492
|
-
|
|
21493
|
-
|
|
21494
|
-
|
|
21495
|
-
|
|
21496
|
-
|
|
21497
|
-
|
|
21498
|
-
|
|
21499
|
-
|
|
21500
|
-
|
|
21501
|
-
|
|
21502
|
-
|
|
21503
|
-
|
|
21504
|
-
|
|
21505
|
-
|
|
21506
|
-
|
|
21507
|
-
|
|
21508
|
-
|
|
21509
|
-
|
|
21510
|
-
|
|
21511
|
-
|
|
21512
|
-
|
|
21513
|
-
|
|
21514
|
-
|
|
21515
|
-
|
|
21516
|
-
|
|
21517
|
-
|
|
21518
|
-
|
|
21519
|
-
|
|
21520
|
-
|
|
21521
|
-
|
|
21522
|
-
|
|
21523
|
-
|
|
21524
|
-
|
|
21504
|
+
var toolbarGroup = css98`
|
|
21505
|
+
display: flex;
|
|
21506
|
+
flex-shrink: 0;
|
|
21507
|
+
gap: var(--spacing-xs);
|
|
21508
|
+
position: relative;
|
|
21509
|
+
|
|
21510
|
+
&:not(:first-child)::before {
|
|
21511
|
+
background-color: var(--gray-300);
|
|
21512
|
+
content: '';
|
|
21513
|
+
display: block;
|
|
21514
|
+
height: 24px;
|
|
21515
|
+
left: calc(var(--spacing-xs) * -1);
|
|
21516
|
+
position: absolute;
|
|
21517
|
+
top: 4px;
|
|
21518
|
+
width: 1px;
|
|
21519
|
+
}
|
|
21520
|
+
`;
|
|
21521
|
+
var richTextToolbarButton = css98`
|
|
21522
|
+
align-items: center;
|
|
21523
|
+
appearance: none;
|
|
21524
|
+
border: 0;
|
|
21525
|
+
border-radius: var(--rounded-sm);
|
|
21526
|
+
box-shadow: none;
|
|
21527
|
+
color: var(--gray-900);
|
|
21528
|
+
display: flex;
|
|
21529
|
+
flex-shrink: 0;
|
|
21530
|
+
height: 32px;
|
|
21531
|
+
justify-content: center;
|
|
21532
|
+
min-width: 32px;
|
|
21533
|
+
padding: 0 var(--spacing-sm);
|
|
21534
|
+
`;
|
|
21535
|
+
var richTextToolbarButtonActive = css98`
|
|
21536
|
+
background: var(--gray-200);
|
|
21537
|
+
`;
|
|
21538
|
+
var textStyleButton = css98`
|
|
21539
|
+
justify-content: space-between;
|
|
21540
|
+
min-width: 7rem;
|
|
21541
|
+
`;
|
|
21542
|
+
var toolbarIcon = css98`
|
|
21543
|
+
color: inherit;
|
|
21544
|
+
`;
|
|
21545
|
+
var toolbarChevron = css98`
|
|
21546
|
+
margin-left: var(--spacing-xs);
|
|
21547
|
+
`;
|
|
21548
|
+
var RichTextToolbarIcon = ({ icon }) => {
|
|
21549
|
+
return /* @__PURE__ */ jsx130(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
21550
|
+
};
|
|
21551
|
+
var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
|
|
21552
|
+
["bold", "format-bold"],
|
|
21553
|
+
["italic", "format-italic"],
|
|
21554
|
+
["underline", "format-underline"],
|
|
21555
|
+
["strikethrough", "format-strike"],
|
|
21556
|
+
["code", "format-code"],
|
|
21557
|
+
["superscript", "format-superscript"],
|
|
21558
|
+
["subscript", "format-subscript"]
|
|
21559
|
+
]);
|
|
21560
|
+
var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
|
|
21561
|
+
var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
|
|
21562
|
+
var RichTextToolbar = ({ config, customControls, onInsertTable }) => {
|
|
21525
21563
|
const [editor] = useLexicalComposerContext4();
|
|
21526
|
-
const
|
|
21527
|
-
|
|
21528
|
-
|
|
21529
|
-
|
|
21530
|
-
|
|
21531
|
-
|
|
21532
|
-
|
|
21533
|
-
|
|
21534
|
-
|
|
21535
|
-
|
|
21536
|
-
|
|
21537
|
-
|
|
21538
|
-
|
|
21539
|
-
|
|
21540
|
-
|
|
21541
|
-
|
|
21542
|
-
|
|
21564
|
+
const {
|
|
21565
|
+
activeElement,
|
|
21566
|
+
setActiveElement,
|
|
21567
|
+
activeFormats,
|
|
21568
|
+
setActiveFormats,
|
|
21569
|
+
visibleFormatsWithIcon,
|
|
21570
|
+
visibleFormatsWithoutIcon,
|
|
21571
|
+
visibleTextualElements,
|
|
21572
|
+
isLink,
|
|
21573
|
+
setIsLink,
|
|
21574
|
+
linkElementVisible,
|
|
21575
|
+
visibleLists,
|
|
21576
|
+
codeElementVisible,
|
|
21577
|
+
quoteElementVisible,
|
|
21578
|
+
visibleElementsWithIcons,
|
|
21579
|
+
visibleInsertElementsWithIcons,
|
|
21580
|
+
tableElementVisible
|
|
21581
|
+
} = useRichTextToolbarState({ config });
|
|
21582
|
+
const onSelectElement = (type) => {
|
|
21583
|
+
if (activeElement === type) {
|
|
21584
|
+
return;
|
|
21585
|
+
}
|
|
21586
|
+
editor.focus(() => {
|
|
21587
|
+
editor.update(() => {
|
|
21588
|
+
const selection = $getSelection3();
|
|
21589
|
+
if (HEADING_ELEMENTS.includes(type)) {
|
|
21590
|
+
$setBlocksType(selection, () => $createHeadingNode(type));
|
|
21591
|
+
} else if (type === "paragraph") {
|
|
21592
|
+
$setBlocksType(selection, () => $createParagraphNode());
|
|
21593
|
+
} else if (type === "quote") {
|
|
21594
|
+
$setBlocksType(selection, () => $createQuoteNode());
|
|
21595
|
+
} else if (type === "code") {
|
|
21596
|
+
$setBlocksType(selection, () => $createCodeNode());
|
|
21597
|
+
} else if (type === "table" && onInsertTable) {
|
|
21598
|
+
onInsertTable().then((dimensions) => {
|
|
21599
|
+
if (!dimensions) {
|
|
21600
|
+
return;
|
|
21601
|
+
}
|
|
21602
|
+
const { rows, columns } = dimensions;
|
|
21603
|
+
editor.focus(() => {
|
|
21604
|
+
editor.update(() => {
|
|
21605
|
+
$insertNodes([$createTableNodeWithDimensions(rows, columns, false)]);
|
|
21606
|
+
});
|
|
21607
|
+
});
|
|
21543
21608
|
});
|
|
21544
21609
|
}
|
|
21545
|
-
}
|
|
21546
|
-
{ skipInitialization: true }
|
|
21547
|
-
);
|
|
21548
|
-
}, [editor, tableCellNode]);
|
|
21549
|
-
useEffect20(() => {
|
|
21550
|
-
editor.getEditorState().read(() => {
|
|
21551
|
-
const selection = $getSelection3();
|
|
21552
|
-
if ($isTableSelection(selection)) {
|
|
21553
|
-
updateSelectionCounts(computeSelectionCount(selection));
|
|
21554
|
-
}
|
|
21610
|
+
});
|
|
21555
21611
|
});
|
|
21556
|
-
}
|
|
21557
|
-
const
|
|
21558
|
-
|
|
21559
|
-
|
|
21560
|
-
|
|
21561
|
-
|
|
21562
|
-
|
|
21563
|
-
|
|
21564
|
-
|
|
21565
|
-
|
|
21566
|
-
}
|
|
21567
|
-
const tableSelection = getTableObserverFromTableElement(tableElement2);
|
|
21568
|
-
if (tableSelection !== null) {
|
|
21569
|
-
tableSelection.clearHighlight();
|
|
21570
|
-
}
|
|
21571
|
-
tableNode.markDirty();
|
|
21572
|
-
updateTableCellNode(tableCellNode.getLatest());
|
|
21612
|
+
};
|
|
21613
|
+
const updateToolbar = useCallback11(() => {
|
|
21614
|
+
const selection = $getSelection3();
|
|
21615
|
+
if (!$isRangeSelection3(selection)) {
|
|
21616
|
+
return;
|
|
21617
|
+
}
|
|
21618
|
+
const newActiveFormats = [];
|
|
21619
|
+
for (const format of richTextBuiltInFormats) {
|
|
21620
|
+
if (selection.hasFormat(format.type)) {
|
|
21621
|
+
newActiveFormats.push(format.type);
|
|
21573
21622
|
}
|
|
21574
|
-
|
|
21575
|
-
|
|
21623
|
+
}
|
|
21624
|
+
setActiveFormats(newActiveFormats);
|
|
21625
|
+
const anchorNode = selection.anchor.getNode();
|
|
21626
|
+
let element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent(anchorNode, (e) => {
|
|
21627
|
+
const parent = e.getParent();
|
|
21628
|
+
return parent !== null && $isRootOrShadowRoot(parent);
|
|
21576
21629
|
});
|
|
21577
|
-
|
|
21578
|
-
|
|
21579
|
-
|
|
21580
|
-
|
|
21581
|
-
|
|
21582
|
-
|
|
21583
|
-
|
|
21584
|
-
|
|
21585
|
-
|
|
21586
|
-
|
|
21587
|
-
|
|
21588
|
-
|
|
21589
|
-
|
|
21590
|
-
for (let i = 0; i < selectionCounts.columns; i++) {
|
|
21591
|
-
$insertTableColumn__EXPERIMENTAL(shouldInsertAfter);
|
|
21592
|
-
}
|
|
21593
|
-
});
|
|
21594
|
-
incrementMenuTriggerKey();
|
|
21595
|
-
},
|
|
21596
|
-
[editor, selectionCounts.columns]
|
|
21597
|
-
);
|
|
21598
|
-
const deleteTableRowAtSelection = useCallback11(() => {
|
|
21599
|
-
editor.update(() => {
|
|
21600
|
-
$deleteTableRow__EXPERIMENTAL();
|
|
21601
|
-
});
|
|
21602
|
-
incrementMenuTriggerKey();
|
|
21603
|
-
}, [editor]);
|
|
21604
|
-
const deleteTableAtSelection = useCallback11(() => {
|
|
21605
|
-
editor.update(() => {
|
|
21606
|
-
const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
|
|
21607
|
-
tableNode.remove();
|
|
21608
|
-
clearTableSelection();
|
|
21609
|
-
});
|
|
21610
|
-
}, [editor, tableCellNode, clearTableSelection]);
|
|
21611
|
-
const deleteTableColumnAtSelection = useCallback11(() => {
|
|
21612
|
-
editor.update(() => {
|
|
21613
|
-
$deleteTableColumn__EXPERIMENTAL();
|
|
21614
|
-
});
|
|
21615
|
-
incrementMenuTriggerKey();
|
|
21616
|
-
}, [editor]);
|
|
21617
|
-
const toggleTableRowIsHeader = useCallback11(() => {
|
|
21618
|
-
editor.update(() => {
|
|
21619
|
-
const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
|
|
21620
|
-
const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
|
|
21621
|
-
const tableRows = tableNode.getChildren();
|
|
21622
|
-
if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
|
|
21623
|
-
throw new Error("Expected table cell to be inside of table row.");
|
|
21624
|
-
}
|
|
21625
|
-
const tableRow2 = tableRows[tableRowIndex];
|
|
21626
|
-
if (!$isTableRowNode(tableRow2)) {
|
|
21627
|
-
throw new Error("Expected table row");
|
|
21630
|
+
if (element === null) {
|
|
21631
|
+
element = anchorNode.getTopLevelElementOrThrow();
|
|
21632
|
+
}
|
|
21633
|
+
const elementKey = element.getKey();
|
|
21634
|
+
const elementDOM = editor.getElementByKey(elementKey);
|
|
21635
|
+
if (elementDOM !== null) {
|
|
21636
|
+
if ($isListNode2(element)) {
|
|
21637
|
+
const parentList = $getNearestNodeOfType2(anchorNode, ListNode2);
|
|
21638
|
+
const type = parentList ? parentList.getListType() : element.getListType();
|
|
21639
|
+
setActiveElement(type === "bullet" ? "unorderedList" : "orderedList");
|
|
21640
|
+
} else {
|
|
21641
|
+
const type = $isHeadingNode(element) ? element.getTag() : element.getType();
|
|
21642
|
+
setActiveElement(type);
|
|
21628
21643
|
}
|
|
21629
|
-
|
|
21630
|
-
|
|
21631
|
-
|
|
21632
|
-
|
|
21633
|
-
|
|
21644
|
+
}
|
|
21645
|
+
const node = getSelectedNode(selection);
|
|
21646
|
+
if (getLinkAncestor(node) !== null) {
|
|
21647
|
+
setIsLink(true);
|
|
21648
|
+
} else {
|
|
21649
|
+
setIsLink(false);
|
|
21650
|
+
}
|
|
21651
|
+
}, [editor, setActiveElement, setActiveFormats, setIsLink]);
|
|
21652
|
+
useEffect20(() => {
|
|
21653
|
+
return editor.registerCommand(
|
|
21654
|
+
SELECTION_CHANGE_COMMAND2,
|
|
21655
|
+
(_payload) => {
|
|
21656
|
+
updateToolbar();
|
|
21657
|
+
return false;
|
|
21658
|
+
},
|
|
21659
|
+
COMMAND_PRIORITY_CRITICAL2
|
|
21660
|
+
);
|
|
21661
|
+
}, [editor, updateToolbar]);
|
|
21662
|
+
useEffect20(() => {
|
|
21663
|
+
return editor.registerUpdateListener(({ editorState }) => {
|
|
21664
|
+
requestAnimationFrame(() => {
|
|
21665
|
+
editorState.read(() => {
|
|
21666
|
+
updateToolbar();
|
|
21667
|
+
});
|
|
21634
21668
|
});
|
|
21635
|
-
clearTableSelection();
|
|
21636
21669
|
});
|
|
21637
|
-
}, [editor,
|
|
21638
|
-
|
|
21639
|
-
|
|
21640
|
-
|
|
21641
|
-
|
|
21642
|
-
|
|
21643
|
-
|
|
21644
|
-
|
|
21645
|
-
|
|
21670
|
+
}, [editor, updateToolbar]);
|
|
21671
|
+
return /* @__PURE__ */ jsxs86("div", { css: toolbar, children: [
|
|
21672
|
+
/* @__PURE__ */ jsxs86(
|
|
21673
|
+
Menu,
|
|
21674
|
+
{
|
|
21675
|
+
menuTrigger: /* @__PURE__ */ jsxs86("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", children: [
|
|
21676
|
+
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
21677
|
+
" ",
|
|
21678
|
+
/* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
21679
|
+
] }),
|
|
21680
|
+
placement: "bottom-start",
|
|
21681
|
+
children: [
|
|
21682
|
+
[
|
|
21683
|
+
{
|
|
21684
|
+
label: "Normal",
|
|
21685
|
+
type: "paragraph"
|
|
21686
|
+
},
|
|
21687
|
+
...visibleTextualElements
|
|
21688
|
+
].map((element) => /* @__PURE__ */ jsx130(
|
|
21689
|
+
MenuItem,
|
|
21690
|
+
{
|
|
21691
|
+
onClick: () => {
|
|
21692
|
+
onSelectElement(element.type);
|
|
21693
|
+
},
|
|
21694
|
+
children: element.label
|
|
21695
|
+
},
|
|
21696
|
+
element.type
|
|
21697
|
+
)),
|
|
21698
|
+
visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx130(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
|
|
21699
|
+
]
|
|
21646
21700
|
}
|
|
21647
|
-
|
|
21648
|
-
|
|
21649
|
-
|
|
21650
|
-
|
|
21651
|
-
|
|
21652
|
-
|
|
21653
|
-
|
|
21654
|
-
|
|
21701
|
+
),
|
|
21702
|
+
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs86("div", { css: toolbarGroup, children: [
|
|
21703
|
+
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx130(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx130(
|
|
21704
|
+
"button",
|
|
21705
|
+
{
|
|
21706
|
+
onClick: () => {
|
|
21707
|
+
editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
|
|
21708
|
+
},
|
|
21709
|
+
css: [
|
|
21710
|
+
richTextToolbarButton,
|
|
21711
|
+
activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
|
|
21712
|
+
],
|
|
21713
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
|
|
21655
21714
|
}
|
|
21656
|
-
|
|
21657
|
-
|
|
21658
|
-
|
|
21715
|
+
) }, format.type)),
|
|
21716
|
+
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx130(
|
|
21717
|
+
Menu,
|
|
21718
|
+
{
|
|
21719
|
+
menuLabel: "Alternative text styles",
|
|
21720
|
+
menuTrigger: /* @__PURE__ */ jsx130("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx130(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
21721
|
+
placement: "bottom-start",
|
|
21722
|
+
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx130(
|
|
21723
|
+
MenuItem,
|
|
21724
|
+
{
|
|
21725
|
+
onClick: () => {
|
|
21726
|
+
editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
|
|
21727
|
+
},
|
|
21728
|
+
children: format.label
|
|
21729
|
+
},
|
|
21730
|
+
format.type
|
|
21731
|
+
))
|
|
21659
21732
|
}
|
|
21660
|
-
|
|
21661
|
-
|
|
21662
|
-
|
|
21663
|
-
|
|
21664
|
-
|
|
21665
|
-
const menuItemCss = css98({
|
|
21666
|
-
fontSize: "var(--fs-sm)"
|
|
21667
|
-
});
|
|
21668
|
-
return /* @__PURE__ */ jsxs86(
|
|
21669
|
-
Menu,
|
|
21670
|
-
{
|
|
21671
|
-
menuTrigger: /* @__PURE__ */ jsx130(
|
|
21672
|
-
TableActionMenuTrigger,
|
|
21733
|
+
) : null
|
|
21734
|
+
] }) : null,
|
|
21735
|
+
visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ jsxs86("div", { css: toolbarGroup, children: [
|
|
21736
|
+
linkElementVisible ? /* @__PURE__ */ jsx130(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
21737
|
+
"button",
|
|
21673
21738
|
{
|
|
21674
|
-
|
|
21675
|
-
|
|
21676
|
-
|
|
21677
|
-
|
|
21678
|
-
|
|
21679
|
-
|
|
21680
|
-
|
|
21681
|
-
children: [
|
|
21682
|
-
/* @__PURE__ */
|
|
21683
|
-
|
|
21739
|
+
onClick: () => {
|
|
21740
|
+
isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
|
|
21741
|
+
},
|
|
21742
|
+
css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
|
|
21743
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "link" })
|
|
21744
|
+
}
|
|
21745
|
+
) }) : null,
|
|
21746
|
+
visibleLists.size > 0 ? /* @__PURE__ */ jsxs86(Fragment19, { children: [
|
|
21747
|
+
visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx130(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
21748
|
+
"button",
|
|
21684
21749
|
{
|
|
21685
21750
|
onClick: () => {
|
|
21686
|
-
|
|
21751
|
+
activeElement === "unorderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
|
|
21687
21752
|
},
|
|
21688
|
-
css:
|
|
21689
|
-
|
|
21690
|
-
"
|
|
21691
|
-
|
|
21692
|
-
|
|
21693
|
-
]
|
|
21753
|
+
css: [
|
|
21754
|
+
richTextToolbarButton,
|
|
21755
|
+
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
21756
|
+
],
|
|
21757
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "layout-list" })
|
|
21694
21758
|
}
|
|
21695
|
-
),
|
|
21696
|
-
/* @__PURE__ */
|
|
21697
|
-
"
|
|
21698
|
-
|
|
21699
|
-
|
|
21700
|
-
|
|
21701
|
-
|
|
21702
|
-
|
|
21703
|
-
|
|
21704
|
-
|
|
21705
|
-
|
|
21706
|
-
|
|
21707
|
-
|
|
21708
|
-
|
|
21709
|
-
|
|
21710
|
-
|
|
21711
|
-
|
|
21712
|
-
|
|
21713
|
-
|
|
21714
|
-
|
|
21715
|
-
/* @__PURE__ */
|
|
21716
|
-
|
|
21717
|
-
|
|
21718
|
-
(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "Remove" : "Add",
|
|
21719
|
-
" ",
|
|
21720
|
-
"row header"
|
|
21759
|
+
) }) : null,
|
|
21760
|
+
visibleLists.has("orderedList") ? /* @__PURE__ */ jsx130(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
21761
|
+
"button",
|
|
21762
|
+
{
|
|
21763
|
+
onClick: () => {
|
|
21764
|
+
activeElement === "orderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
|
|
21765
|
+
},
|
|
21766
|
+
css: [
|
|
21767
|
+
richTextToolbarButton,
|
|
21768
|
+
activeElement === "orderedList" ? richTextToolbarButtonActive : null
|
|
21769
|
+
],
|
|
21770
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "layout-list-numbered" })
|
|
21771
|
+
}
|
|
21772
|
+
) }) : null
|
|
21773
|
+
] }) : null,
|
|
21774
|
+
customControls ? customControls : null
|
|
21775
|
+
] }) : null,
|
|
21776
|
+
visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ jsx130("div", { css: toolbarGroup, children: /* @__PURE__ */ jsxs86(
|
|
21777
|
+
Menu,
|
|
21778
|
+
{
|
|
21779
|
+
menuTrigger: /* @__PURE__ */ jsxs86("button", { css: richTextToolbarButton, title: "Insert block element", children: [
|
|
21780
|
+
"Insert",
|
|
21781
|
+
/* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
21721
21782
|
] }),
|
|
21722
|
-
|
|
21723
|
-
|
|
21724
|
-
|
|
21725
|
-
|
|
21726
|
-
|
|
21727
|
-
|
|
21728
|
-
|
|
21729
|
-
|
|
21730
|
-
}
|
|
21731
|
-
|
|
21732
|
-
|
|
21733
|
-
|
|
21734
|
-
|
|
21735
|
-
|
|
21736
|
-
|
|
21737
|
-
|
|
21738
|
-
|
|
21739
|
-
|
|
21740
|
-
|
|
21741
|
-
|
|
21742
|
-
|
|
21743
|
-
|
|
21744
|
-
|
|
21745
|
-
|
|
21746
|
-
|
|
21747
|
-
|
|
21748
|
-
|
|
21749
|
-
|
|
21750
|
-
|
|
21751
|
-
|
|
21752
|
-
|
|
21753
|
-
|
|
21754
|
-
|
|
21755
|
-
const selection = $getSelection3();
|
|
21756
|
-
const nativeSelection = window.getSelection();
|
|
21757
|
-
const activeElement = document.activeElement;
|
|
21758
|
-
if (selection == null) {
|
|
21759
|
-
setTableMenuCellNode(null);
|
|
21760
|
-
return;
|
|
21761
|
-
}
|
|
21762
|
-
const rootElement = editor.getRootElement();
|
|
21763
|
-
if ($isRangeSelection3(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
|
|
21764
|
-
const tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
|
|
21765
|
-
if (tableCellNodeFromSelection == null) {
|
|
21766
|
-
setTableMenuCellNode(null);
|
|
21767
|
-
setTableMenuCellNodeElem(null);
|
|
21768
|
-
return;
|
|
21783
|
+
placement: "bottom-start",
|
|
21784
|
+
children: [
|
|
21785
|
+
quoteElementVisible ? /* @__PURE__ */ jsx130(
|
|
21786
|
+
MenuItem,
|
|
21787
|
+
{
|
|
21788
|
+
onClick: () => {
|
|
21789
|
+
onSelectElement("quote");
|
|
21790
|
+
},
|
|
21791
|
+
icon: /* @__PURE__ */ jsx130(Icon, { icon: "quote", iconColor: "currentColor" }),
|
|
21792
|
+
children: "Quote"
|
|
21793
|
+
}
|
|
21794
|
+
) : null,
|
|
21795
|
+
codeElementVisible ? /* @__PURE__ */ jsx130(
|
|
21796
|
+
MenuItem,
|
|
21797
|
+
{
|
|
21798
|
+
onClick: () => {
|
|
21799
|
+
onSelectElement("code");
|
|
21800
|
+
},
|
|
21801
|
+
icon: /* @__PURE__ */ jsx130(Icon, { icon: "code-slash", iconColor: "currentColor" }),
|
|
21802
|
+
children: "Code"
|
|
21803
|
+
}
|
|
21804
|
+
) : null,
|
|
21805
|
+
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ jsx130(
|
|
21806
|
+
MenuItem,
|
|
21807
|
+
{
|
|
21808
|
+
onClick: () => {
|
|
21809
|
+
onSelectElement("table");
|
|
21810
|
+
},
|
|
21811
|
+
icon: /* @__PURE__ */ jsx130(Icon, { icon: "view-grid", iconColor: "currentColor" }),
|
|
21812
|
+
children: "Table"
|
|
21813
|
+
}
|
|
21814
|
+
) : null
|
|
21815
|
+
]
|
|
21769
21816
|
}
|
|
21770
|
-
|
|
21771
|
-
|
|
21772
|
-
|
|
21773
|
-
|
|
21774
|
-
|
|
21817
|
+
) }) : null
|
|
21818
|
+
] });
|
|
21819
|
+
};
|
|
21820
|
+
var RichTextToolbar_default = RichTextToolbar;
|
|
21821
|
+
var useRichTextToolbarState = ({ config }) => {
|
|
21822
|
+
var _a;
|
|
21823
|
+
const enabledBuiltInFormats = useMemo6(() => {
|
|
21824
|
+
return richTextBuiltInFormats.filter((format) => {
|
|
21825
|
+
var _a2, _b;
|
|
21826
|
+
return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
|
|
21827
|
+
});
|
|
21828
|
+
}, [config]);
|
|
21829
|
+
const enabledBuiltInElements = useMemo6(() => {
|
|
21830
|
+
return richTextBuiltInElements.filter((element) => {
|
|
21831
|
+
var _a2, _b;
|
|
21832
|
+
return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
|
|
21833
|
+
});
|
|
21834
|
+
}, [config]);
|
|
21835
|
+
const enabledBuiltInFormatsWithIcon = useMemo6(() => {
|
|
21836
|
+
return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
|
|
21837
|
+
}, [enabledBuiltInFormats]);
|
|
21838
|
+
const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
|
|
21839
|
+
(format) => !FORMATS_WITH_ICON.has(format.type)
|
|
21840
|
+
);
|
|
21841
|
+
const [activeFormats, setActiveFormats] = useState17([]);
|
|
21842
|
+
const visibleFormatsWithIcon = useMemo6(() => {
|
|
21843
|
+
const visibleFormats = /* @__PURE__ */ new Set();
|
|
21844
|
+
activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
21845
|
+
visibleFormats.add(type);
|
|
21846
|
+
});
|
|
21847
|
+
enabledBuiltInFormatsWithIcon.forEach((format) => {
|
|
21848
|
+
visibleFormats.add(format.type);
|
|
21849
|
+
});
|
|
21850
|
+
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
21851
|
+
}, [activeFormats, enabledBuiltInFormatsWithIcon]);
|
|
21852
|
+
const visibleFormatsWithoutIcon = useMemo6(() => {
|
|
21853
|
+
const visibleFormats = /* @__PURE__ */ new Set();
|
|
21854
|
+
activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
21855
|
+
visibleFormats.add(type);
|
|
21856
|
+
});
|
|
21857
|
+
enabledBuiltInFormatsWithoutIcon.forEach((format) => {
|
|
21858
|
+
visibleFormats.add(format.type);
|
|
21859
|
+
});
|
|
21860
|
+
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
21861
|
+
}, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
|
|
21862
|
+
const [activeElement, setActiveElement] = useState17("paragraph");
|
|
21863
|
+
const enabledTextualElements = enabledBuiltInElements.filter(
|
|
21864
|
+
(element) => TEXTUAL_ELEMENTS.includes(element.type)
|
|
21865
|
+
);
|
|
21866
|
+
const visibleTextualElements = useMemo6(() => {
|
|
21867
|
+
if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
|
|
21868
|
+
return enabledTextualElements;
|
|
21869
|
+
}
|
|
21870
|
+
return richTextBuiltInElements.filter(
|
|
21871
|
+
(element) => {
|
|
21872
|
+
var _a2, _b;
|
|
21873
|
+
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);
|
|
21775
21874
|
}
|
|
21776
|
-
|
|
21777
|
-
|
|
21778
|
-
|
|
21779
|
-
|
|
21780
|
-
|
|
21875
|
+
);
|
|
21876
|
+
}, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
|
|
21877
|
+
const [isLink, setIsLink] = useState17(false);
|
|
21878
|
+
const linkElementVisible = useMemo6(() => {
|
|
21879
|
+
return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
|
|
21880
|
+
}, [isLink, enabledBuiltInElements]);
|
|
21881
|
+
const visibleLists = useMemo6(() => {
|
|
21882
|
+
return new Set(
|
|
21883
|
+
["orderedList", "unorderedList"].filter(
|
|
21884
|
+
(type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
|
|
21885
|
+
)
|
|
21886
|
+
);
|
|
21887
|
+
}, [activeElement, enabledBuiltInElements]);
|
|
21888
|
+
const quoteElementVisible = useMemo6(() => {
|
|
21889
|
+
return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
|
|
21890
|
+
}, [activeElement, enabledBuiltInElements]);
|
|
21891
|
+
const codeElementVisible = useMemo6(() => {
|
|
21892
|
+
return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
|
|
21893
|
+
}, [activeElement, enabledBuiltInElements]);
|
|
21894
|
+
const tableElementVisible = useMemo6(() => {
|
|
21895
|
+
return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
|
|
21896
|
+
}, [activeElement, enabledBuiltInElements]);
|
|
21897
|
+
const visibleElementsWithIcons = useMemo6(() => {
|
|
21898
|
+
const visibleElements = /* @__PURE__ */ new Set();
|
|
21899
|
+
if (linkElementVisible) {
|
|
21900
|
+
visibleElements.add("link");
|
|
21781
21901
|
}
|
|
21782
|
-
|
|
21783
|
-
|
|
21784
|
-
|
|
21785
|
-
editor.getEditorState().read(() => {
|
|
21786
|
-
$moveMenu();
|
|
21902
|
+
if (visibleLists.size > 0) {
|
|
21903
|
+
visibleLists.forEach((type) => {
|
|
21904
|
+
visibleElements.add(type);
|
|
21787
21905
|
});
|
|
21788
|
-
}
|
|
21789
|
-
|
|
21790
|
-
|
|
21791
|
-
|
|
21792
|
-
|
|
21793
|
-
|
|
21794
|
-
|
|
21795
|
-
|
|
21796
|
-
|
|
21797
|
-
|
|
21798
|
-
|
|
21799
|
-
|
|
21800
|
-
|
|
21801
|
-
|
|
21802
|
-
|
|
21803
|
-
|
|
21804
|
-
|
|
21805
|
-
|
|
21806
|
-
|
|
21807
|
-
|
|
21906
|
+
}
|
|
21907
|
+
return visibleElements;
|
|
21908
|
+
}, [linkElementVisible, visibleLists]);
|
|
21909
|
+
const visibleInsertElementsWithIcons = useMemo6(() => {
|
|
21910
|
+
const visibleElements = /* @__PURE__ */ new Set();
|
|
21911
|
+
if (quoteElementVisible) {
|
|
21912
|
+
visibleElements.add("quote");
|
|
21913
|
+
}
|
|
21914
|
+
if (codeElementVisible) {
|
|
21915
|
+
visibleElements.add("code");
|
|
21916
|
+
}
|
|
21917
|
+
if (tableElementVisible) {
|
|
21918
|
+
visibleElements.add("table");
|
|
21919
|
+
}
|
|
21920
|
+
return visibleElements;
|
|
21921
|
+
}, [codeElementVisible, quoteElementVisible, tableElementVisible]);
|
|
21922
|
+
return {
|
|
21923
|
+
activeFormats,
|
|
21924
|
+
setActiveFormats,
|
|
21925
|
+
activeElement,
|
|
21926
|
+
setActiveElement,
|
|
21927
|
+
visibleFormatsWithIcon,
|
|
21928
|
+
visibleFormatsWithoutIcon,
|
|
21929
|
+
visibleTextualElements,
|
|
21930
|
+
isLink,
|
|
21931
|
+
setIsLink,
|
|
21932
|
+
linkElementVisible,
|
|
21933
|
+
visibleLists,
|
|
21934
|
+
quoteElementVisible,
|
|
21935
|
+
codeElementVisible,
|
|
21936
|
+
tableElementVisible,
|
|
21937
|
+
visibleElementsWithIcons,
|
|
21938
|
+
visibleInsertElementsWithIcons
|
|
21939
|
+
};
|
|
21940
|
+
};
|
|
21808
21941
|
|
|
21809
|
-
// src/components/ParameterInputs/rich-text/
|
|
21942
|
+
// src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
|
|
21810
21943
|
import { css as css99 } from "@emotion/react";
|
|
21811
21944
|
import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
|
|
21812
|
-
import { useLexicalEditable
|
|
21945
|
+
import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
|
|
21813
21946
|
import {
|
|
21814
|
-
$
|
|
21815
|
-
$
|
|
21816
|
-
$
|
|
21817
|
-
$
|
|
21818
|
-
$
|
|
21947
|
+
$deleteTableColumn__EXPERIMENTAL,
|
|
21948
|
+
$deleteTableRow__EXPERIMENTAL,
|
|
21949
|
+
$getTableCellNodeFromLexicalNode,
|
|
21950
|
+
$getTableColumnIndexFromTableCellNode,
|
|
21951
|
+
$getTableNodeFromLexicalNodeOrThrow,
|
|
21952
|
+
$getTableRowIndexFromTableCellNode,
|
|
21953
|
+
$insertTableColumn__EXPERIMENTAL,
|
|
21954
|
+
$insertTableRow__EXPERIMENTAL,
|
|
21955
|
+
$isTableCellNode,
|
|
21956
|
+
$isTableRowNode,
|
|
21957
|
+
$isTableSelection,
|
|
21958
|
+
getTableObserverFromTableElement,
|
|
21959
|
+
TableCellHeaderStates,
|
|
21960
|
+
TableCellNode
|
|
21819
21961
|
} from "@lexical/table";
|
|
21820
|
-
import {
|
|
21821
|
-
import {
|
|
21822
|
-
import {
|
|
21823
|
-
|
|
21824
|
-
|
|
21825
|
-
|
|
21826
|
-
|
|
21827
|
-
|
|
21962
|
+
import { $getRoot, $getSelection as $getSelection4, $isRangeSelection as $isRangeSelection4 } from "lexical";
|
|
21963
|
+
import { forwardRef as forwardRef22, useCallback as useCallback12, useEffect as useEffect21, useLayoutEffect, useState as useState18 } from "react";
|
|
21964
|
+
import { jsx as jsx131, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
|
|
21965
|
+
function computeSelectionCount(selection) {
|
|
21966
|
+
const selectionShape = selection.getShape();
|
|
21967
|
+
return {
|
|
21968
|
+
columns: selectionShape.toX - selectionShape.fromX + 1,
|
|
21969
|
+
rows: selectionShape.toY - selectionShape.fromY + 1
|
|
21970
|
+
};
|
|
21971
|
+
}
|
|
21972
|
+
var tableActionMenuTrigger = css99`
|
|
21828
21973
|
position: absolute;
|
|
21829
|
-
|
|
21974
|
+
transform: translate(calc(-100% - 1px), 1px);
|
|
21830
21975
|
`;
|
|
21831
|
-
var
|
|
21832
|
-
|
|
21833
|
-
|
|
21834
|
-
|
|
21835
|
-
|
|
21836
|
-
|
|
21837
|
-
|
|
21838
|
-
|
|
21839
|
-
|
|
21840
|
-
|
|
21841
|
-
|
|
21842
|
-
|
|
21976
|
+
var TableActionMenuTrigger = forwardRef22((props, ref) => {
|
|
21977
|
+
const { tableCellEl, positioningAnchorEl, ...rest } = props;
|
|
21978
|
+
const [coordinates, setCoordinates] = useState18({ x: 0, y: 0 });
|
|
21979
|
+
useLayoutEffect(() => {
|
|
21980
|
+
const rect = tableCellEl.getBoundingClientRect();
|
|
21981
|
+
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
21982
|
+
const relativeX = rect.right - parentRect.left + positioningAnchorEl.scrollLeft;
|
|
21983
|
+
const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
|
|
21984
|
+
setCoordinates({ x: relativeX, y: relativeY });
|
|
21985
|
+
}, [tableCellEl, positioningAnchorEl]);
|
|
21986
|
+
return /* @__PURE__ */ jsx131(
|
|
21987
|
+
IconButton,
|
|
21988
|
+
{
|
|
21989
|
+
ref,
|
|
21990
|
+
css: [
|
|
21991
|
+
tableActionMenuTrigger,
|
|
21992
|
+
{
|
|
21993
|
+
top: coordinates.y,
|
|
21994
|
+
left: coordinates.x
|
|
21995
|
+
}
|
|
21996
|
+
],
|
|
21997
|
+
size: "xs",
|
|
21998
|
+
buttonType: "unimportant",
|
|
21999
|
+
...rest,
|
|
22000
|
+
children: /* @__PURE__ */ jsx131(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
|
|
21843
22001
|
}
|
|
21844
|
-
|
|
21845
|
-
|
|
21846
|
-
|
|
21847
|
-
|
|
21848
|
-
|
|
21849
|
-
|
|
21850
|
-
|
|
21851
|
-
|
|
21852
|
-
|
|
21853
|
-
const [
|
|
21854
|
-
const [
|
|
21855
|
-
const [
|
|
21856
|
-
|
|
21857
|
-
|
|
21858
|
-
|
|
21859
|
-
|
|
21860
|
-
|
|
21861
|
-
|
|
21862
|
-
tableRectRef.current = null;
|
|
21863
|
-
}, []);
|
|
21864
|
-
const isMouseDownOnEvent = (event) => {
|
|
21865
|
-
return (event.buttons & 1) === 1;
|
|
22002
|
+
);
|
|
22003
|
+
});
|
|
22004
|
+
TableActionMenuTrigger.displayName = "TableActionMenuTrigger";
|
|
22005
|
+
function TableActionMenu({
|
|
22006
|
+
tableCellNode: _tableCellNode,
|
|
22007
|
+
menuPortalEl,
|
|
22008
|
+
tableCellEl,
|
|
22009
|
+
positioningAnchorEl
|
|
22010
|
+
}) {
|
|
22011
|
+
const [editor] = useLexicalComposerContext5();
|
|
22012
|
+
const [tableCellNode, updateTableCellNode] = useState18(_tableCellNode);
|
|
22013
|
+
const [selectionCounts, updateSelectionCounts] = useState18({
|
|
22014
|
+
columns: 1,
|
|
22015
|
+
rows: 1
|
|
22016
|
+
});
|
|
22017
|
+
const [menuTriggerKey, setMenuTriggerKey] = useState18(0);
|
|
22018
|
+
const incrementMenuTriggerKey = () => {
|
|
22019
|
+
setMenuTriggerKey((key) => key += 1);
|
|
21866
22020
|
};
|
|
21867
22021
|
useEffect21(() => {
|
|
21868
|
-
|
|
21869
|
-
|
|
21870
|
-
|
|
21871
|
-
|
|
21872
|
-
|
|
21873
|
-
|
|
21874
|
-
|
|
22022
|
+
return editor.registerMutationListener(
|
|
22023
|
+
TableCellNode,
|
|
22024
|
+
(nodeMutations) => {
|
|
22025
|
+
const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
|
|
22026
|
+
if (nodeUpdated) {
|
|
22027
|
+
editor.getEditorState().read(() => {
|
|
22028
|
+
updateTableCellNode(tableCellNode.getLatest());
|
|
21875
22029
|
});
|
|
21876
|
-
return;
|
|
21877
22030
|
}
|
|
21878
|
-
|
|
21879
|
-
|
|
21880
|
-
|
|
22031
|
+
},
|
|
22032
|
+
{ skipInitialization: true }
|
|
22033
|
+
);
|
|
22034
|
+
}, [editor, tableCellNode]);
|
|
22035
|
+
useEffect21(() => {
|
|
22036
|
+
editor.getEditorState().read(() => {
|
|
22037
|
+
const selection = $getSelection4();
|
|
22038
|
+
if ($isTableSelection(selection)) {
|
|
22039
|
+
updateSelectionCounts(computeSelectionCount(selection));
|
|
22040
|
+
}
|
|
22041
|
+
});
|
|
22042
|
+
}, [editor]);
|
|
22043
|
+
const clearTableSelection = useCallback12(() => {
|
|
22044
|
+
editor.update(() => {
|
|
22045
|
+
if (tableCellNode.isAttached()) {
|
|
22046
|
+
const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
|
|
22047
|
+
const tableElement2 = editor.getElementByKey(
|
|
22048
|
+
tableNode.getKey()
|
|
22049
|
+
);
|
|
22050
|
+
if (!tableElement2) {
|
|
22051
|
+
throw new Error("Expected to find tableElement in DOM");
|
|
21881
22052
|
}
|
|
21882
|
-
|
|
21883
|
-
|
|
21884
|
-
|
|
21885
|
-
if (cell2 && activeCell !== cell2) {
|
|
21886
|
-
editor.update(() => {
|
|
21887
|
-
const tableCellNode = $getNearestNodeFromDOMNode(cell2.elem);
|
|
21888
|
-
if (!tableCellNode) {
|
|
21889
|
-
throw new Error("TableCellResizer: Table cell node not found.");
|
|
21890
|
-
}
|
|
21891
|
-
const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
|
|
21892
|
-
const tableElement2 = editor.getElementByKey(tableNode.getKey());
|
|
21893
|
-
if (!tableElement2) {
|
|
21894
|
-
throw new Error("TableCellResizer: Table element not found.");
|
|
21895
|
-
}
|
|
21896
|
-
targetRef.current = target;
|
|
21897
|
-
tableRectRef.current = tableElement2.getBoundingClientRect();
|
|
21898
|
-
updateActiveCell(cell2);
|
|
21899
|
-
});
|
|
21900
|
-
} else if (cell2 == null) {
|
|
21901
|
-
resetState();
|
|
21902
|
-
}
|
|
22053
|
+
const tableSelection = getTableObserverFromTableElement(tableElement2);
|
|
22054
|
+
if (tableSelection !== null) {
|
|
22055
|
+
tableSelection.clearHighlight();
|
|
21903
22056
|
}
|
|
21904
|
-
|
|
21905
|
-
|
|
21906
|
-
const onMouseDown = () => {
|
|
21907
|
-
setTimeout(() => {
|
|
21908
|
-
updateIsMouseDown(true);
|
|
21909
|
-
}, 0);
|
|
21910
|
-
};
|
|
21911
|
-
const onMouseUp = () => {
|
|
21912
|
-
setTimeout(() => {
|
|
21913
|
-
updateIsMouseDown(false);
|
|
21914
|
-
}, 0);
|
|
21915
|
-
};
|
|
21916
|
-
const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
|
|
21917
|
-
rootElement == null ? void 0 : rootElement.addEventListener("mousemove", onMouseMove);
|
|
21918
|
-
rootElement == null ? void 0 : rootElement.addEventListener("mousedown", onMouseDown);
|
|
21919
|
-
rootElement == null ? void 0 : rootElement.addEventListener("mouseup", onMouseUp);
|
|
21920
|
-
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousemove", onMouseMove);
|
|
21921
|
-
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousedown", onMouseDown);
|
|
21922
|
-
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mouseup", onMouseUp);
|
|
21923
|
-
});
|
|
21924
|
-
return () => {
|
|
21925
|
-
removeRootListener();
|
|
21926
|
-
};
|
|
21927
|
-
}, [activeCell, draggingDirection, editor, resetState]);
|
|
21928
|
-
const isHeightChanging = (direction) => {
|
|
21929
|
-
if (direction === "bottom") {
|
|
21930
|
-
return true;
|
|
21931
|
-
}
|
|
21932
|
-
return false;
|
|
21933
|
-
};
|
|
21934
|
-
const updateRowHeight = useCallback12(
|
|
21935
|
-
(heightChange) => {
|
|
21936
|
-
if (!activeCell) {
|
|
21937
|
-
throw new Error("TableCellResizer: Expected active cell.");
|
|
22057
|
+
tableNode.markDirty();
|
|
22058
|
+
updateTableCellNode(tableCellNode.getLatest());
|
|
21938
22059
|
}
|
|
21939
|
-
|
|
21940
|
-
|
|
21941
|
-
|
|
21942
|
-
|
|
21943
|
-
|
|
21944
|
-
|
|
21945
|
-
|
|
21946
|
-
|
|
21947
|
-
|
|
21948
|
-
|
|
21949
|
-
throw new Error("Expected table cell to be inside of table row.");
|
|
21950
|
-
}
|
|
21951
|
-
const tableRow2 = tableRows[tableRowIndex];
|
|
21952
|
-
if (!$isTableRowNode2(tableRow2)) {
|
|
21953
|
-
throw new Error("Expected table row");
|
|
21954
|
-
}
|
|
21955
|
-
let height = tableRow2.getHeight();
|
|
21956
|
-
if (height === void 0) {
|
|
21957
|
-
const rowCells = tableRow2.getChildren();
|
|
21958
|
-
height = Math.min(...rowCells.map((cell2) => {
|
|
21959
|
-
var _a;
|
|
21960
|
-
return (_a = getCellNodeHeight(cell2, editor)) != null ? _a : Infinity;
|
|
21961
|
-
}));
|
|
21962
|
-
}
|
|
21963
|
-
const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
|
|
21964
|
-
tableRow2.setHeight(newHeight);
|
|
21965
|
-
},
|
|
21966
|
-
{ tag: "skip-scroll-into-view" }
|
|
21967
|
-
);
|
|
22060
|
+
const rootNode = $getRoot();
|
|
22061
|
+
rootNode.selectStart();
|
|
22062
|
+
});
|
|
22063
|
+
}, [editor, tableCellNode]);
|
|
22064
|
+
const insertTableRowAtSelection = useCallback12(
|
|
22065
|
+
(shouldInsertAfter) => {
|
|
22066
|
+
editor.update(() => {
|
|
22067
|
+
$insertTableRow__EXPERIMENTAL(shouldInsertAfter);
|
|
22068
|
+
});
|
|
22069
|
+
incrementMenuTriggerKey();
|
|
21968
22070
|
},
|
|
21969
|
-
[
|
|
22071
|
+
[editor]
|
|
21970
22072
|
);
|
|
21971
|
-
const
|
|
21972
|
-
|
|
21973
|
-
|
|
21974
|
-
|
|
21975
|
-
|
|
21976
|
-
const domCellNode = activeEditor.getElementByKey(cell2.getKey());
|
|
21977
|
-
if (domCellNode == null) {
|
|
21978
|
-
return void 0;
|
|
21979
|
-
}
|
|
21980
|
-
const computedStyle = getComputedStyle(domCellNode);
|
|
21981
|
-
return domCellNode.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
|
|
21982
|
-
};
|
|
21983
|
-
const getCellNodeHeight = (cell2, activeEditor) => {
|
|
21984
|
-
const domCellNode = activeEditor.getElementByKey(cell2.getKey());
|
|
21985
|
-
return domCellNode == null ? void 0 : domCellNode.clientHeight;
|
|
21986
|
-
};
|
|
21987
|
-
const getCellColumnIndex = (tableCellNode, tableMap) => {
|
|
21988
|
-
for (let row = 0; row < tableMap.length; row++) {
|
|
21989
|
-
for (let column = 0; column < tableMap[row].length; column++) {
|
|
21990
|
-
if (tableMap[row][column].cell === tableCellNode) {
|
|
21991
|
-
return column;
|
|
22073
|
+
const insertTableColumnAtSelection = useCallback12(
|
|
22074
|
+
(shouldInsertAfter) => {
|
|
22075
|
+
editor.update(() => {
|
|
22076
|
+
for (let i = 0; i < selectionCounts.columns; i++) {
|
|
22077
|
+
$insertTableColumn__EXPERIMENTAL(shouldInsertAfter);
|
|
21992
22078
|
}
|
|
21993
|
-
}
|
|
21994
|
-
|
|
21995
|
-
};
|
|
21996
|
-
const updateColumnWidth = useCallback12(
|
|
21997
|
-
(widthChange) => {
|
|
21998
|
-
if (!activeCell) {
|
|
21999
|
-
throw new Error("TableCellResizer: Expected active cell.");
|
|
22000
|
-
}
|
|
22001
|
-
editor.update(
|
|
22002
|
-
() => {
|
|
22003
|
-
const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
|
|
22004
|
-
if (!$isTableCellNode2(tableCellNode)) {
|
|
22005
|
-
throw new Error("TableCellResizer: Table cell node not found.");
|
|
22006
|
-
}
|
|
22007
|
-
const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
|
|
22008
|
-
const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
|
|
22009
|
-
const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
|
|
22010
|
-
if (columnIndex === void 0) {
|
|
22011
|
-
throw new Error("TableCellResizer: Table column not found.");
|
|
22012
|
-
}
|
|
22013
|
-
for (let row = 0; row < tableMap.length; row++) {
|
|
22014
|
-
const cell2 = tableMap[row][columnIndex];
|
|
22015
|
-
if (cell2.startRow === row && (columnIndex === tableMap[row].length - 1 || tableMap[row][columnIndex].cell !== tableMap[row][columnIndex + 1].cell)) {
|
|
22016
|
-
const width = getCellNodeWidth(cell2.cell, editor);
|
|
22017
|
-
if (width === void 0) {
|
|
22018
|
-
continue;
|
|
22019
|
-
}
|
|
22020
|
-
const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
|
|
22021
|
-
cell2.cell.setWidth(newWidth);
|
|
22022
|
-
}
|
|
22023
|
-
}
|
|
22024
|
-
},
|
|
22025
|
-
{ tag: "skip-scroll-into-view" }
|
|
22026
|
-
);
|
|
22079
|
+
});
|
|
22080
|
+
incrementMenuTriggerKey();
|
|
22027
22081
|
},
|
|
22028
|
-
[
|
|
22082
|
+
[editor, selectionCounts.columns]
|
|
22029
22083
|
);
|
|
22030
|
-
const
|
|
22031
|
-
(
|
|
22032
|
-
|
|
22033
|
-
|
|
22034
|
-
|
|
22035
|
-
|
|
22036
|
-
|
|
22084
|
+
const deleteTableRowAtSelection = useCallback12(() => {
|
|
22085
|
+
editor.update(() => {
|
|
22086
|
+
$deleteTableRow__EXPERIMENTAL();
|
|
22087
|
+
});
|
|
22088
|
+
incrementMenuTriggerKey();
|
|
22089
|
+
}, [editor]);
|
|
22090
|
+
const deleteTableAtSelection = useCallback12(() => {
|
|
22091
|
+
editor.update(() => {
|
|
22092
|
+
const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
|
|
22093
|
+
tableNode.remove();
|
|
22094
|
+
clearTableSelection();
|
|
22095
|
+
});
|
|
22096
|
+
}, [editor, tableCellNode, clearTableSelection]);
|
|
22097
|
+
const deleteTableColumnAtSelection = useCallback12(() => {
|
|
22098
|
+
editor.update(() => {
|
|
22099
|
+
$deleteTableColumn__EXPERIMENTAL();
|
|
22100
|
+
});
|
|
22101
|
+
incrementMenuTriggerKey();
|
|
22102
|
+
}, [editor]);
|
|
22103
|
+
const toggleTableRowIsHeader = useCallback12(() => {
|
|
22104
|
+
editor.update(() => {
|
|
22105
|
+
const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
|
|
22106
|
+
const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
|
|
22107
|
+
const tableRows = tableNode.getChildren();
|
|
22108
|
+
if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
|
|
22109
|
+
throw new Error("Expected table cell to be inside of table row.");
|
|
22110
|
+
}
|
|
22111
|
+
const tableRow2 = tableRows[tableRowIndex];
|
|
22112
|
+
if (!$isTableRowNode(tableRow2)) {
|
|
22113
|
+
throw new Error("Expected table row");
|
|
22114
|
+
}
|
|
22115
|
+
tableRow2.getChildren().forEach((tableCell) => {
|
|
22116
|
+
if (!$isTableCellNode(tableCell)) {
|
|
22117
|
+
throw new Error("Expected table cell");
|
|
22037
22118
|
}
|
|
22038
|
-
|
|
22039
|
-
|
|
22040
|
-
|
|
22041
|
-
|
|
22042
|
-
|
|
22043
|
-
|
|
22044
|
-
|
|
22045
|
-
|
|
22046
|
-
|
|
22047
|
-
|
|
22048
|
-
|
|
22049
|
-
|
|
22050
|
-
|
|
22051
|
-
resetState();
|
|
22052
|
-
document.removeEventListener("mouseup", handler);
|
|
22053
|
-
}
|
|
22054
|
-
};
|
|
22055
|
-
return handler;
|
|
22056
|
-
},
|
|
22057
|
-
[activeCell, resetState, updateColumnWidth, updateRowHeight]
|
|
22058
|
-
);
|
|
22059
|
-
const toggleResize = useCallback12(
|
|
22060
|
-
(direction) => (event) => {
|
|
22061
|
-
event.preventDefault();
|
|
22062
|
-
event.stopPropagation();
|
|
22063
|
-
if (!activeCell) {
|
|
22064
|
-
throw new Error("TableCellResizer: Expected active cell.");
|
|
22119
|
+
tableCell.toggleHeaderStyle(TableCellHeaderStates.ROW);
|
|
22120
|
+
});
|
|
22121
|
+
clearTableSelection();
|
|
22122
|
+
});
|
|
22123
|
+
}, [editor, tableCellNode, clearTableSelection]);
|
|
22124
|
+
const toggleTableColumnIsHeader = useCallback12(() => {
|
|
22125
|
+
editor.update(() => {
|
|
22126
|
+
const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
|
|
22127
|
+
const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
|
|
22128
|
+
const tableRows = tableNode.getChildren();
|
|
22129
|
+
const maxRowsLength = Math.max(...tableRows.map((row) => row.getChildren().length));
|
|
22130
|
+
if (tableColumnIndex >= maxRowsLength || tableColumnIndex < 0) {
|
|
22131
|
+
throw new Error("Expected table cell to be inside of table row.");
|
|
22065
22132
|
}
|
|
22066
|
-
|
|
22067
|
-
|
|
22068
|
-
|
|
22069
|
-
|
|
22070
|
-
updateMouseCurrentPos(mouseStartPosRef.current);
|
|
22071
|
-
updateDraggingDirection(direction);
|
|
22072
|
-
document.addEventListener("mouseup", mouseUpHandler(direction));
|
|
22073
|
-
},
|
|
22074
|
-
[activeCell, mouseUpHandler]
|
|
22075
|
-
);
|
|
22076
|
-
const getResizers = useCallback12(() => {
|
|
22077
|
-
if (activeCell) {
|
|
22078
|
-
const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
|
|
22079
|
-
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
22080
|
-
const zoom = calculateZoomLevel(activeCell.elem);
|
|
22081
|
-
const zoneWidth = 10;
|
|
22082
|
-
const styles = {
|
|
22083
|
-
bottom: {
|
|
22084
|
-
backgroundColor: "none",
|
|
22085
|
-
cursor: "row-resize",
|
|
22086
|
-
height: `${zoneWidth}px`,
|
|
22087
|
-
left: `${left - parentRect.left}px`,
|
|
22088
|
-
top: `${top - parentRect.top + positioningAnchorEl.scrollTop + height - zoneWidth / 2}px`,
|
|
22089
|
-
width: `${width}px`
|
|
22090
|
-
},
|
|
22091
|
-
right: {
|
|
22092
|
-
backgroundColor: "none",
|
|
22093
|
-
cursor: "col-resize",
|
|
22094
|
-
height: `${height}px`,
|
|
22095
|
-
left: `${left - parentRect.left + width - zoneWidth / 2}px`,
|
|
22096
|
-
top: `${top - parentRect.top + positioningAnchorEl.scrollTop}px`,
|
|
22097
|
-
width: `${zoneWidth}px`
|
|
22133
|
+
for (let r = 0; r < tableRows.length; r++) {
|
|
22134
|
+
const tableRow2 = tableRows[r];
|
|
22135
|
+
if (!$isTableRowNode(tableRow2)) {
|
|
22136
|
+
throw new Error("Expected table row");
|
|
22098
22137
|
}
|
|
22099
|
-
|
|
22100
|
-
|
|
22101
|
-
|
|
22102
|
-
if (isHeightChanging(draggingDirection)) {
|
|
22103
|
-
styles[draggingDirection].left = `${tableRect.left - parentRect.left}px`;
|
|
22104
|
-
styles[draggingDirection].top = `${(mouseCurrentPos.y - parentRect.top + positioningAnchorEl.scrollTop) / zoom}px`;
|
|
22105
|
-
styles[draggingDirection].height = "3px";
|
|
22106
|
-
styles[draggingDirection].width = `${tableRect.width}px`;
|
|
22107
|
-
} else {
|
|
22108
|
-
styles[draggingDirection].top = `${tableRect.top - parentRect.top + positioningAnchorEl.scrollTop}px`;
|
|
22109
|
-
styles[draggingDirection].left = `${(mouseCurrentPos.x - parentRect.left) / zoom}px`;
|
|
22110
|
-
styles[draggingDirection].width = "3px";
|
|
22111
|
-
styles[draggingDirection].height = `${tableRect.height}px`;
|
|
22138
|
+
const tableCells = tableRow2.getChildren();
|
|
22139
|
+
if (tableColumnIndex >= tableCells.length) {
|
|
22140
|
+
continue;
|
|
22112
22141
|
}
|
|
22113
|
-
|
|
22142
|
+
const tableCell = tableCells[tableColumnIndex];
|
|
22143
|
+
if (!$isTableCellNode(tableCell)) {
|
|
22144
|
+
throw new Error("Expected table cell");
|
|
22145
|
+
}
|
|
22146
|
+
tableCell.toggleHeaderStyle(TableCellHeaderStates.COLUMN);
|
|
22114
22147
|
}
|
|
22115
|
-
|
|
22148
|
+
clearTableSelection();
|
|
22149
|
+
});
|
|
22150
|
+
}, [editor, tableCellNode, clearTableSelection]);
|
|
22151
|
+
const menuItemCss = css99({
|
|
22152
|
+
fontSize: "var(--fs-sm)"
|
|
22153
|
+
});
|
|
22154
|
+
return /* @__PURE__ */ jsxs87(
|
|
22155
|
+
Menu,
|
|
22156
|
+
{
|
|
22157
|
+
menuTrigger: /* @__PURE__ */ jsx131(
|
|
22158
|
+
TableActionMenuTrigger,
|
|
22159
|
+
{
|
|
22160
|
+
tableCellEl,
|
|
22161
|
+
positioningAnchorEl
|
|
22162
|
+
},
|
|
22163
|
+
menuTriggerKey
|
|
22164
|
+
),
|
|
22165
|
+
portalElement: menuPortalEl,
|
|
22166
|
+
maxMenuHeight: "300px",
|
|
22167
|
+
children: [
|
|
22168
|
+
/* @__PURE__ */ jsxs87(
|
|
22169
|
+
MenuItem,
|
|
22170
|
+
{
|
|
22171
|
+
onClick: () => {
|
|
22172
|
+
insertTableRowAtSelection(false);
|
|
22173
|
+
},
|
|
22174
|
+
css: menuItemCss,
|
|
22175
|
+
children: [
|
|
22176
|
+
"Insert ",
|
|
22177
|
+
selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
|
|
22178
|
+
" above"
|
|
22179
|
+
]
|
|
22180
|
+
}
|
|
22181
|
+
),
|
|
22182
|
+
/* @__PURE__ */ jsxs87(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
|
|
22183
|
+
"Insert ",
|
|
22184
|
+
selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
|
|
22185
|
+
" below"
|
|
22186
|
+
] }),
|
|
22187
|
+
/* @__PURE__ */ jsx131(MenuItemSeparator, {}),
|
|
22188
|
+
/* @__PURE__ */ jsxs87(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
|
|
22189
|
+
"Insert ",
|
|
22190
|
+
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
22191
|
+
" left"
|
|
22192
|
+
] }),
|
|
22193
|
+
/* @__PURE__ */ jsxs87(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
|
|
22194
|
+
"Insert ",
|
|
22195
|
+
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
22196
|
+
" right"
|
|
22197
|
+
] }),
|
|
22198
|
+
/* @__PURE__ */ jsx131(MenuItemSeparator, {}),
|
|
22199
|
+
/* @__PURE__ */ jsx131(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
|
|
22200
|
+
/* @__PURE__ */ jsx131(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
|
|
22201
|
+
/* @__PURE__ */ jsx131(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
|
|
22202
|
+
/* @__PURE__ */ jsx131(MenuItemSeparator, {}),
|
|
22203
|
+
/* @__PURE__ */ jsxs87(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
|
|
22204
|
+
(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "Remove" : "Add",
|
|
22205
|
+
" ",
|
|
22206
|
+
"row header"
|
|
22207
|
+
] }),
|
|
22208
|
+
/* @__PURE__ */ jsxs87(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
|
|
22209
|
+
(tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN ? "Remove" : "Add",
|
|
22210
|
+
" ",
|
|
22211
|
+
"column header"
|
|
22212
|
+
] })
|
|
22213
|
+
]
|
|
22116
22214
|
}
|
|
22117
|
-
|
|
22118
|
-
|
|
22119
|
-
|
|
22120
|
-
|
|
22121
|
-
|
|
22215
|
+
);
|
|
22216
|
+
}
|
|
22217
|
+
function TableCellActionMenuContainer({
|
|
22218
|
+
menuPortalEl,
|
|
22219
|
+
positioningAnchorEl
|
|
22220
|
+
}) {
|
|
22221
|
+
const [editor] = useLexicalComposerContext5();
|
|
22222
|
+
const [tableCellNode, setTableMenuCellNode] = useState18(null);
|
|
22223
|
+
const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState18(null);
|
|
22224
|
+
const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState18(null);
|
|
22225
|
+
useEffect21(() => {
|
|
22226
|
+
const newPortalEl = document.createElement("div");
|
|
22227
|
+
setTableMenuCellMenuPortalEl(newPortalEl);
|
|
22228
|
+
menuPortalEl.appendChild(newPortalEl);
|
|
22229
|
+
return () => {
|
|
22230
|
+
newPortalEl.remove();
|
|
22122
22231
|
};
|
|
22123
|
-
}, [
|
|
22124
|
-
const
|
|
22125
|
-
|
|
22126
|
-
|
|
22127
|
-
|
|
22128
|
-
|
|
22129
|
-
|
|
22130
|
-
|
|
22131
|
-
|
|
22232
|
+
}, [menuPortalEl]);
|
|
22233
|
+
const setTableMenuCellNodeElem = useCallback12((elem) => {
|
|
22234
|
+
if (elem) {
|
|
22235
|
+
_setTableMenuCellNodeEl(elem);
|
|
22236
|
+
} else {
|
|
22237
|
+
_setTableMenuCellNodeEl(null);
|
|
22238
|
+
}
|
|
22239
|
+
}, []);
|
|
22240
|
+
const $moveMenu = useCallback12(() => {
|
|
22241
|
+
const selection = $getSelection4();
|
|
22242
|
+
const nativeSelection = window.getSelection();
|
|
22243
|
+
const activeElement = document.activeElement;
|
|
22244
|
+
if (selection == null) {
|
|
22245
|
+
setTableMenuCellNode(null);
|
|
22246
|
+
return;
|
|
22247
|
+
}
|
|
22248
|
+
const rootElement = editor.getRootElement();
|
|
22249
|
+
if ($isRangeSelection4(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
|
|
22250
|
+
const tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
|
|
22251
|
+
if (tableCellNodeFromSelection == null) {
|
|
22252
|
+
setTableMenuCellNode(null);
|
|
22253
|
+
setTableMenuCellNodeElem(null);
|
|
22254
|
+
return;
|
|
22132
22255
|
}
|
|
22133
|
-
|
|
22134
|
-
|
|
22135
|
-
|
|
22136
|
-
|
|
22137
|
-
|
|
22138
|
-
style: resizerStyles.bottom || void 0,
|
|
22139
|
-
onMouseDown: toggleResize("bottom")
|
|
22256
|
+
const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
|
|
22257
|
+
if (tableCellParentNodeDOM == null) {
|
|
22258
|
+
setTableMenuCellNode(null);
|
|
22259
|
+
setTableMenuCellNodeElem(null);
|
|
22260
|
+
return;
|
|
22140
22261
|
}
|
|
22141
|
-
|
|
22142
|
-
|
|
22143
|
-
}
|
|
22144
|
-
|
|
22145
|
-
|
|
22146
|
-
|
|
22147
|
-
|
|
22148
|
-
|
|
22149
|
-
|
|
22262
|
+
setTableMenuCellNode(tableCellNodeFromSelection);
|
|
22263
|
+
setTableMenuCellNodeElem(tableCellParentNodeDOM);
|
|
22264
|
+
} else if (!activeElement) {
|
|
22265
|
+
setTableMenuCellNode(null);
|
|
22266
|
+
setTableMenuCellNodeElem(null);
|
|
22267
|
+
}
|
|
22268
|
+
}, [editor, setTableMenuCellNodeElem]);
|
|
22269
|
+
useEffect21(() => {
|
|
22270
|
+
return editor.registerUpdateListener(() => {
|
|
22271
|
+
editor.getEditorState().read(() => {
|
|
22272
|
+
$moveMenu();
|
|
22273
|
+
});
|
|
22274
|
+
});
|
|
22275
|
+
});
|
|
22276
|
+
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ jsx131(
|
|
22277
|
+
TableActionMenu,
|
|
22278
|
+
{
|
|
22279
|
+
tableCellNode,
|
|
22280
|
+
menuPortalEl: tableCellMenuPortalEl,
|
|
22281
|
+
tableCellEl: tableCellNodeEl,
|
|
22150
22282
|
positioningAnchorEl
|
|
22151
|
-
|
|
22152
|
-
|
|
22283
|
+
},
|
|
22284
|
+
tableCellNode.getKey()
|
|
22153
22285
|
);
|
|
22154
22286
|
}
|
|
22287
|
+
function TableActionMenuPlugin({
|
|
22288
|
+
positioningAnchorEl,
|
|
22289
|
+
menuPortalEl
|
|
22290
|
+
}) {
|
|
22291
|
+
const isEditable = useLexicalEditable();
|
|
22292
|
+
return isEditable ? /* @__PURE__ */ jsx131(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
|
|
22293
|
+
}
|
|
22155
22294
|
|
|
22156
|
-
// src/components/ParameterInputs/rich-text/
|
|
22295
|
+
// src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
|
|
22296
|
+
import { css as css100 } from "@emotion/react";
|
|
22157
22297
|
import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
|
|
22158
|
-
import {
|
|
22298
|
+
import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
|
|
22159
22299
|
import {
|
|
22160
|
-
$
|
|
22161
|
-
$
|
|
22162
|
-
$
|
|
22163
|
-
|
|
22164
|
-
|
|
22165
|
-
} from "lexical";
|
|
22166
|
-
import {
|
|
22167
|
-
|
|
22168
|
-
|
|
22169
|
-
|
|
22170
|
-
|
|
22171
|
-
|
|
22172
|
-
|
|
22173
|
-
|
|
22174
|
-
|
|
22175
|
-
|
|
22176
|
-
|
|
22177
|
-
|
|
22178
|
-
|
|
22179
|
-
|
|
22180
|
-
|
|
22181
|
-
|
|
22182
|
-
|
|
22183
|
-
|
|
22184
|
-
|
|
22185
|
-
|
|
22186
|
-
}
|
|
22187
|
-
|
|
22188
|
-
|
|
22189
|
-
|
|
22190
|
-
|
|
22191
|
-
}
|
|
22300
|
+
$computeTableMapSkipCellCheck,
|
|
22301
|
+
$getTableNodeFromLexicalNodeOrThrow as $getTableNodeFromLexicalNodeOrThrow2,
|
|
22302
|
+
$getTableRowIndexFromTableCellNode as $getTableRowIndexFromTableCellNode2,
|
|
22303
|
+
$isTableCellNode as $isTableCellNode2,
|
|
22304
|
+
$isTableRowNode as $isTableRowNode2
|
|
22305
|
+
} from "@lexical/table";
|
|
22306
|
+
import { calculateZoomLevel } from "@lexical/utils";
|
|
22307
|
+
import { $getNearestNodeFromDOMNode } from "lexical";
|
|
22308
|
+
import { useCallback as useCallback13, useEffect as useEffect22, useMemo as useMemo7, useRef as useRef13, useState as useState19 } from "react";
|
|
22309
|
+
import { createPortal as createPortal3 } from "react-dom";
|
|
22310
|
+
import { Fragment as Fragment20, jsx as jsx132, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
|
|
22311
|
+
var MIN_ROW_HEIGHT = 33;
|
|
22312
|
+
var MIN_COLUMN_WIDTH = 50;
|
|
22313
|
+
var tableResizer = css100`
|
|
22314
|
+
position: absolute;
|
|
22315
|
+
z-index: var(--z-10);
|
|
22316
|
+
`;
|
|
22317
|
+
var fixedGetDOMCellFromTarget = (node) => {
|
|
22318
|
+
let currentNode = node;
|
|
22319
|
+
while (currentNode != null) {
|
|
22320
|
+
const nodeName = currentNode.nodeName;
|
|
22321
|
+
if (nodeName === "TD" || nodeName === "TH") {
|
|
22322
|
+
const cell2 = currentNode._cell;
|
|
22323
|
+
if (cell2 === void 0) {
|
|
22324
|
+
return {
|
|
22325
|
+
elem: currentNode
|
|
22326
|
+
};
|
|
22327
|
+
}
|
|
22328
|
+
return cell2;
|
|
22329
|
+
}
|
|
22330
|
+
currentNode = currentNode.parentNode;
|
|
22331
|
+
}
|
|
22332
|
+
return null;
|
|
22333
|
+
};
|
|
22334
|
+
function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
22335
|
+
const targetRef = useRef13(null);
|
|
22336
|
+
const resizerRef = useRef13(null);
|
|
22337
|
+
const tableRectRef = useRef13(null);
|
|
22338
|
+
const mouseStartPosRef = useRef13(null);
|
|
22339
|
+
const [mouseCurrentPos, updateMouseCurrentPos] = useState19(null);
|
|
22340
|
+
const [activeCell, updateActiveCell] = useState19(null);
|
|
22341
|
+
const [isMouseDown, updateIsMouseDown] = useState19(false);
|
|
22342
|
+
const [draggingDirection, updateDraggingDirection] = useState19(null);
|
|
22343
|
+
const resetState = useCallback13(() => {
|
|
22344
|
+
updateActiveCell(null);
|
|
22345
|
+
targetRef.current = null;
|
|
22346
|
+
updateDraggingDirection(null);
|
|
22347
|
+
mouseStartPosRef.current = null;
|
|
22348
|
+
tableRectRef.current = null;
|
|
22349
|
+
}, []);
|
|
22350
|
+
const isMouseDownOnEvent = (event) => {
|
|
22351
|
+
return (event.buttons & 1) === 1;
|
|
22352
|
+
};
|
|
22192
22353
|
useEffect22(() => {
|
|
22193
|
-
const
|
|
22194
|
-
|
|
22195
|
-
|
|
22354
|
+
const onMouseMove = (event) => {
|
|
22355
|
+
setTimeout(() => {
|
|
22356
|
+
const target = event.target;
|
|
22357
|
+
if (draggingDirection) {
|
|
22358
|
+
updateMouseCurrentPos({
|
|
22359
|
+
x: event.clientX,
|
|
22360
|
+
y: event.clientY
|
|
22361
|
+
});
|
|
22196
22362
|
return;
|
|
22197
22363
|
}
|
|
22198
|
-
event
|
|
22199
|
-
|
|
22200
|
-
|
|
22201
|
-
|
|
22202
|
-
|
|
22203
|
-
|
|
22364
|
+
updateIsMouseDown(isMouseDownOnEvent(event));
|
|
22365
|
+
if (resizerRef.current && resizerRef.current.contains(target)) {
|
|
22366
|
+
return;
|
|
22367
|
+
}
|
|
22368
|
+
if (targetRef.current !== target) {
|
|
22369
|
+
targetRef.current = target;
|
|
22370
|
+
const cell2 = fixedGetDOMCellFromTarget(target);
|
|
22371
|
+
if (cell2 && activeCell !== cell2) {
|
|
22372
|
+
editor.update(() => {
|
|
22373
|
+
const tableCellNode = $getNearestNodeFromDOMNode(cell2.elem);
|
|
22374
|
+
if (!tableCellNode) {
|
|
22375
|
+
throw new Error("TableCellResizer: Table cell node not found.");
|
|
22376
|
+
}
|
|
22377
|
+
const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
|
|
22378
|
+
const tableElement2 = editor.getElementByKey(tableNode.getKey());
|
|
22379
|
+
if (!tableElement2) {
|
|
22380
|
+
throw new Error("TableCellResizer: Table element not found.");
|
|
22381
|
+
}
|
|
22382
|
+
targetRef.current = target;
|
|
22383
|
+
tableRectRef.current = tableElement2.getBoundingClientRect();
|
|
22384
|
+
updateActiveCell(cell2);
|
|
22385
|
+
});
|
|
22386
|
+
} else if (cell2 == null) {
|
|
22387
|
+
resetState();
|
|
22388
|
+
}
|
|
22389
|
+
}
|
|
22390
|
+
}, 0);
|
|
22204
22391
|
};
|
|
22205
|
-
|
|
22206
|
-
|
|
22207
|
-
|
|
22208
|
-
|
|
22209
|
-
|
|
22210
|
-
|
|
22211
|
-
|
|
22212
|
-
|
|
22213
|
-
|
|
22214
|
-
|
|
22215
|
-
|
|
22216
|
-
|
|
22217
|
-
|
|
22218
|
-
|
|
22219
|
-
|
|
22220
|
-
|
|
22221
|
-
|
|
22222
|
-
REMOVE_LIST_COMMAND
|
|
22223
|
-
} from "@lexical/list";
|
|
22224
|
-
import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
|
|
22225
|
-
import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
|
|
22226
|
-
import { $setBlocksType } from "@lexical/selection";
|
|
22227
|
-
import { $createTableNodeWithDimensions } from "@lexical/table";
|
|
22228
|
-
import { $findMatchingParent, $getNearestNodeOfType as $getNearestNodeOfType2 } from "@lexical/utils";
|
|
22229
|
-
import {
|
|
22230
|
-
$createParagraphNode,
|
|
22231
|
-
$getSelection as $getSelection5,
|
|
22232
|
-
$insertNodes,
|
|
22233
|
-
$isRangeSelection as $isRangeSelection5,
|
|
22234
|
-
$isRootOrShadowRoot,
|
|
22235
|
-
COMMAND_PRIORITY_CRITICAL as COMMAND_PRIORITY_CRITICAL2,
|
|
22236
|
-
FORMAT_TEXT_COMMAND,
|
|
22237
|
-
SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND3
|
|
22238
|
-
} from "lexical";
|
|
22239
|
-
import { useCallback as useCallback13, useEffect as useEffect23 } from "react";
|
|
22240
|
-
|
|
22241
|
-
// src/components/ParameterInputs/rich-text/toolbar/constants.ts
|
|
22242
|
-
var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
|
|
22243
|
-
["bold", "format-bold"],
|
|
22244
|
-
["italic", "format-italic"],
|
|
22245
|
-
["underline", "format-underline"],
|
|
22246
|
-
["strikethrough", "format-strike"],
|
|
22247
|
-
["code", "format-code"],
|
|
22248
|
-
["superscript", "format-superscript"],
|
|
22249
|
-
["subscript", "format-subscript"]
|
|
22250
|
-
]);
|
|
22251
|
-
var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
|
|
22252
|
-
var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
|
|
22253
|
-
|
|
22254
|
-
// src/components/ParameterInputs/rich-text/toolbar/useRichTextToolbarState.ts
|
|
22255
|
-
import { useMemo as useMemo7, useState as useState20 } from "react";
|
|
22256
|
-
var useRichTextToolbarState = ({ config }) => {
|
|
22257
|
-
var _a;
|
|
22258
|
-
const enabledBuiltInFormats = useMemo7(() => {
|
|
22259
|
-
return richTextBuiltInFormats.filter((format) => {
|
|
22260
|
-
var _a2, _b;
|
|
22261
|
-
return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
|
|
22262
|
-
});
|
|
22263
|
-
}, [config]);
|
|
22264
|
-
const enabledBuiltInElements = useMemo7(() => {
|
|
22265
|
-
return richTextBuiltInElements.filter((element) => {
|
|
22266
|
-
var _a2, _b;
|
|
22267
|
-
return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
|
|
22268
|
-
});
|
|
22269
|
-
}, [config]);
|
|
22270
|
-
const enabledBuiltInFormatsWithIcon = useMemo7(() => {
|
|
22271
|
-
return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
|
|
22272
|
-
}, [enabledBuiltInFormats]);
|
|
22273
|
-
const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
|
|
22274
|
-
(format) => !FORMATS_WITH_ICON.has(format.type)
|
|
22275
|
-
);
|
|
22276
|
-
const [activeFormats, setActiveFormats] = useState20([]);
|
|
22277
|
-
const visibleFormatsWithIcon = useMemo7(() => {
|
|
22278
|
-
const visibleFormats = /* @__PURE__ */ new Set();
|
|
22279
|
-
activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
22280
|
-
visibleFormats.add(type);
|
|
22281
|
-
});
|
|
22282
|
-
enabledBuiltInFormatsWithIcon.forEach((format) => {
|
|
22283
|
-
visibleFormats.add(format.type);
|
|
22284
|
-
});
|
|
22285
|
-
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
22286
|
-
}, [activeFormats, enabledBuiltInFormatsWithIcon]);
|
|
22287
|
-
const visibleFormatsWithoutIcon = useMemo7(() => {
|
|
22288
|
-
const visibleFormats = /* @__PURE__ */ new Set();
|
|
22289
|
-
activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
22290
|
-
visibleFormats.add(type);
|
|
22291
|
-
});
|
|
22292
|
-
enabledBuiltInFormatsWithoutIcon.forEach((format) => {
|
|
22293
|
-
visibleFormats.add(format.type);
|
|
22392
|
+
const onMouseDown = () => {
|
|
22393
|
+
setTimeout(() => {
|
|
22394
|
+
updateIsMouseDown(true);
|
|
22395
|
+
}, 0);
|
|
22396
|
+
};
|
|
22397
|
+
const onMouseUp = () => {
|
|
22398
|
+
setTimeout(() => {
|
|
22399
|
+
updateIsMouseDown(false);
|
|
22400
|
+
}, 0);
|
|
22401
|
+
};
|
|
22402
|
+
const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
|
|
22403
|
+
rootElement == null ? void 0 : rootElement.addEventListener("mousemove", onMouseMove);
|
|
22404
|
+
rootElement == null ? void 0 : rootElement.addEventListener("mousedown", onMouseDown);
|
|
22405
|
+
rootElement == null ? void 0 : rootElement.addEventListener("mouseup", onMouseUp);
|
|
22406
|
+
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousemove", onMouseMove);
|
|
22407
|
+
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousedown", onMouseDown);
|
|
22408
|
+
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mouseup", onMouseUp);
|
|
22294
22409
|
});
|
|
22295
|
-
return
|
|
22296
|
-
|
|
22297
|
-
|
|
22298
|
-
|
|
22299
|
-
|
|
22300
|
-
|
|
22301
|
-
|
|
22302
|
-
if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
|
|
22303
|
-
return enabledTextualElements;
|
|
22410
|
+
return () => {
|
|
22411
|
+
removeRootListener();
|
|
22412
|
+
};
|
|
22413
|
+
}, [activeCell, draggingDirection, editor, resetState]);
|
|
22414
|
+
const isHeightChanging = (direction) => {
|
|
22415
|
+
if (direction === "bottom") {
|
|
22416
|
+
return true;
|
|
22304
22417
|
}
|
|
22305
|
-
return
|
|
22306
|
-
|
|
22307
|
-
|
|
22308
|
-
|
|
22418
|
+
return false;
|
|
22419
|
+
};
|
|
22420
|
+
const updateRowHeight = useCallback13(
|
|
22421
|
+
(heightChange) => {
|
|
22422
|
+
if (!activeCell) {
|
|
22423
|
+
throw new Error("TableCellResizer: Expected active cell.");
|
|
22309
22424
|
}
|
|
22310
|
-
|
|
22311
|
-
|
|
22312
|
-
|
|
22313
|
-
|
|
22314
|
-
|
|
22315
|
-
|
|
22316
|
-
|
|
22317
|
-
|
|
22318
|
-
|
|
22319
|
-
|
|
22320
|
-
|
|
22321
|
-
|
|
22322
|
-
|
|
22323
|
-
|
|
22324
|
-
|
|
22325
|
-
|
|
22326
|
-
|
|
22327
|
-
|
|
22328
|
-
|
|
22329
|
-
|
|
22330
|
-
|
|
22331
|
-
|
|
22332
|
-
|
|
22333
|
-
|
|
22334
|
-
|
|
22335
|
-
|
|
22336
|
-
|
|
22337
|
-
|
|
22338
|
-
|
|
22339
|
-
}
|
|
22340
|
-
|
|
22341
|
-
|
|
22342
|
-
|
|
22343
|
-
|
|
22344
|
-
|
|
22345
|
-
|
|
22346
|
-
|
|
22347
|
-
|
|
22348
|
-
|
|
22349
|
-
|
|
22350
|
-
|
|
22351
|
-
|
|
22352
|
-
|
|
22353
|
-
visibleElements.add("code");
|
|
22354
|
-
}
|
|
22355
|
-
if (tableElementVisible) {
|
|
22356
|
-
visibleElements.add("table");
|
|
22357
|
-
}
|
|
22358
|
-
if (assetElementVisible) {
|
|
22359
|
-
visibleElements.add("asset");
|
|
22360
|
-
}
|
|
22361
|
-
return visibleElements;
|
|
22362
|
-
}, [codeElementVisible, quoteElementVisible, tableElementVisible, assetElementVisible]);
|
|
22363
|
-
return {
|
|
22364
|
-
activeFormats,
|
|
22365
|
-
setActiveFormats,
|
|
22366
|
-
activeElement,
|
|
22367
|
-
setActiveElement,
|
|
22368
|
-
visibleFormatsWithIcon,
|
|
22369
|
-
visibleFormatsWithoutIcon,
|
|
22370
|
-
visibleTextualElements,
|
|
22371
|
-
isLink,
|
|
22372
|
-
setIsLink,
|
|
22373
|
-
linkElementVisible,
|
|
22374
|
-
visibleLists,
|
|
22375
|
-
quoteElementVisible,
|
|
22376
|
-
codeElementVisible,
|
|
22377
|
-
tableElementVisible,
|
|
22378
|
-
assetElementVisible,
|
|
22379
|
-
visibleElementsWithIcons,
|
|
22380
|
-
visibleInsertElementsWithIcons
|
|
22425
|
+
editor.update(
|
|
22426
|
+
() => {
|
|
22427
|
+
const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
|
|
22428
|
+
if (!$isTableCellNode2(tableCellNode)) {
|
|
22429
|
+
throw new Error("TableCellResizer: Table cell node not found.");
|
|
22430
|
+
}
|
|
22431
|
+
const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
|
|
22432
|
+
const tableRowIndex = $getTableRowIndexFromTableCellNode2(tableCellNode);
|
|
22433
|
+
const tableRows = tableNode.getChildren();
|
|
22434
|
+
if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
|
|
22435
|
+
throw new Error("Expected table cell to be inside of table row.");
|
|
22436
|
+
}
|
|
22437
|
+
const tableRow2 = tableRows[tableRowIndex];
|
|
22438
|
+
if (!$isTableRowNode2(tableRow2)) {
|
|
22439
|
+
throw new Error("Expected table row");
|
|
22440
|
+
}
|
|
22441
|
+
let height = tableRow2.getHeight();
|
|
22442
|
+
if (height === void 0) {
|
|
22443
|
+
const rowCells = tableRow2.getChildren();
|
|
22444
|
+
height = Math.min(...rowCells.map((cell2) => {
|
|
22445
|
+
var _a;
|
|
22446
|
+
return (_a = getCellNodeHeight(cell2, editor)) != null ? _a : Infinity;
|
|
22447
|
+
}));
|
|
22448
|
+
}
|
|
22449
|
+
const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
|
|
22450
|
+
tableRow2.setHeight(newHeight);
|
|
22451
|
+
},
|
|
22452
|
+
{ tag: "skip-scroll-into-view" }
|
|
22453
|
+
);
|
|
22454
|
+
},
|
|
22455
|
+
[activeCell, editor]
|
|
22456
|
+
);
|
|
22457
|
+
const getCellNodeWidth = (cell2, activeEditor) => {
|
|
22458
|
+
const width = cell2.getWidth();
|
|
22459
|
+
if (width !== void 0) {
|
|
22460
|
+
return width;
|
|
22461
|
+
}
|
|
22462
|
+
const domCellNode = activeEditor.getElementByKey(cell2.getKey());
|
|
22463
|
+
if (domCellNode == null) {
|
|
22464
|
+
return void 0;
|
|
22465
|
+
}
|
|
22466
|
+
const computedStyle = getComputedStyle(domCellNode);
|
|
22467
|
+
return domCellNode.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
|
|
22381
22468
|
};
|
|
22382
|
-
|
|
22383
|
-
|
|
22384
|
-
|
|
22385
|
-
|
|
22386
|
-
|
|
22387
|
-
|
|
22388
|
-
|
|
22389
|
-
|
|
22390
|
-
|
|
22391
|
-
|
|
22392
|
-
|
|
22393
|
-
margin: 0 0 calc(var(--spacing-sm) + var(--spacing-xs)) 0;
|
|
22394
|
-
overflow: auto;
|
|
22395
|
-
padding: var(--spacing-sm);
|
|
22396
|
-
position: sticky;
|
|
22397
|
-
top: calc(var(--spacing-sm) * -2);
|
|
22398
|
-
z-index: 10;
|
|
22399
|
-
`;
|
|
22400
|
-
var toolbarGroup = css100`
|
|
22401
|
-
display: flex;
|
|
22402
|
-
flex-shrink: 0;
|
|
22403
|
-
gap: var(--spacing-xs);
|
|
22404
|
-
position: relative;
|
|
22405
|
-
|
|
22406
|
-
&:not(:first-child)::before {
|
|
22407
|
-
background-color: var(--gray-300);
|
|
22408
|
-
content: '';
|
|
22409
|
-
display: block;
|
|
22410
|
-
height: 24px;
|
|
22411
|
-
left: calc(var(--spacing-xs) * -1);
|
|
22412
|
-
position: absolute;
|
|
22413
|
-
top: 4px;
|
|
22414
|
-
width: 1px;
|
|
22415
|
-
}
|
|
22416
|
-
`;
|
|
22417
|
-
var richTextToolbarButton = css100`
|
|
22418
|
-
align-items: center;
|
|
22419
|
-
appearance: none;
|
|
22420
|
-
border: 0;
|
|
22421
|
-
border-radius: var(--rounded-sm);
|
|
22422
|
-
box-shadow: none;
|
|
22423
|
-
color: var(--gray-900);
|
|
22424
|
-
display: flex;
|
|
22425
|
-
flex-shrink: 0;
|
|
22426
|
-
height: 32px;
|
|
22427
|
-
justify-content: center;
|
|
22428
|
-
min-width: 32px;
|
|
22429
|
-
padding: 0 var(--spacing-sm);
|
|
22430
|
-
`;
|
|
22431
|
-
var richTextToolbarButtonActive = css100`
|
|
22432
|
-
background: var(--gray-200);
|
|
22433
|
-
`;
|
|
22434
|
-
var textStyleButton = css100`
|
|
22435
|
-
justify-content: space-between;
|
|
22436
|
-
min-width: 7rem;
|
|
22437
|
-
`;
|
|
22438
|
-
var toolbarIcon = css100`
|
|
22439
|
-
color: inherit;
|
|
22440
|
-
`;
|
|
22441
|
-
var toolbarChevron = css100`
|
|
22442
|
-
margin-left: var(--spacing-xs);
|
|
22443
|
-
`;
|
|
22444
|
-
var RichTextToolbarIcon = ({ icon }) => {
|
|
22445
|
-
return /* @__PURE__ */ jsx132(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
22446
|
-
};
|
|
22447
|
-
var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset }) => {
|
|
22448
|
-
const [editor] = useLexicalComposerContext7();
|
|
22449
|
-
const {
|
|
22450
|
-
activeElement,
|
|
22451
|
-
setActiveElement,
|
|
22452
|
-
activeFormats,
|
|
22453
|
-
setActiveFormats,
|
|
22454
|
-
visibleFormatsWithIcon,
|
|
22455
|
-
visibleFormatsWithoutIcon,
|
|
22456
|
-
visibleTextualElements,
|
|
22457
|
-
isLink,
|
|
22458
|
-
setIsLink,
|
|
22459
|
-
linkElementVisible,
|
|
22460
|
-
visibleLists,
|
|
22461
|
-
codeElementVisible,
|
|
22462
|
-
quoteElementVisible,
|
|
22463
|
-
visibleElementsWithIcons,
|
|
22464
|
-
visibleInsertElementsWithIcons,
|
|
22465
|
-
tableElementVisible,
|
|
22466
|
-
assetElementVisible
|
|
22467
|
-
} = useRichTextToolbarState({ config });
|
|
22468
|
-
const onSelectElement = (type) => {
|
|
22469
|
-
if (activeElement === type) {
|
|
22470
|
-
return;
|
|
22469
|
+
const getCellNodeHeight = (cell2, activeEditor) => {
|
|
22470
|
+
const domCellNode = activeEditor.getElementByKey(cell2.getKey());
|
|
22471
|
+
return domCellNode == null ? void 0 : domCellNode.clientHeight;
|
|
22472
|
+
};
|
|
22473
|
+
const getCellColumnIndex = (tableCellNode, tableMap) => {
|
|
22474
|
+
for (let row = 0; row < tableMap.length; row++) {
|
|
22475
|
+
for (let column = 0; column < tableMap[row].length; column++) {
|
|
22476
|
+
if (tableMap[row][column].cell === tableCellNode) {
|
|
22477
|
+
return column;
|
|
22478
|
+
}
|
|
22479
|
+
}
|
|
22471
22480
|
}
|
|
22472
|
-
|
|
22473
|
-
|
|
22474
|
-
|
|
22475
|
-
|
|
22476
|
-
|
|
22477
|
-
|
|
22478
|
-
|
|
22479
|
-
|
|
22480
|
-
|
|
22481
|
-
|
|
22482
|
-
|
|
22483
|
-
|
|
22484
|
-
|
|
22485
|
-
|
|
22486
|
-
|
|
22481
|
+
};
|
|
22482
|
+
const updateColumnWidth = useCallback13(
|
|
22483
|
+
(widthChange) => {
|
|
22484
|
+
if (!activeCell) {
|
|
22485
|
+
throw new Error("TableCellResizer: Expected active cell.");
|
|
22486
|
+
}
|
|
22487
|
+
editor.update(
|
|
22488
|
+
() => {
|
|
22489
|
+
const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
|
|
22490
|
+
if (!$isTableCellNode2(tableCellNode)) {
|
|
22491
|
+
throw new Error("TableCellResizer: Table cell node not found.");
|
|
22492
|
+
}
|
|
22493
|
+
const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
|
|
22494
|
+
const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
|
|
22495
|
+
const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
|
|
22496
|
+
if (columnIndex === void 0) {
|
|
22497
|
+
throw new Error("TableCellResizer: Table column not found.");
|
|
22498
|
+
}
|
|
22499
|
+
for (let row = 0; row < tableMap.length; row++) {
|
|
22500
|
+
const cell2 = tableMap[row][columnIndex];
|
|
22501
|
+
if (cell2.startRow === row && (columnIndex === tableMap[row].length - 1 || tableMap[row][columnIndex].cell !== tableMap[row][columnIndex + 1].cell)) {
|
|
22502
|
+
const width = getCellNodeWidth(cell2.cell, editor);
|
|
22503
|
+
if (width === void 0) {
|
|
22504
|
+
continue;
|
|
22505
|
+
}
|
|
22506
|
+
const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
|
|
22507
|
+
cell2.cell.setWidth(newWidth);
|
|
22487
22508
|
}
|
|
22488
|
-
|
|
22489
|
-
|
|
22490
|
-
|
|
22491
|
-
|
|
22492
|
-
|
|
22493
|
-
|
|
22494
|
-
|
|
22495
|
-
|
|
22496
|
-
|
|
22509
|
+
}
|
|
22510
|
+
},
|
|
22511
|
+
{ tag: "skip-scroll-into-view" }
|
|
22512
|
+
);
|
|
22513
|
+
},
|
|
22514
|
+
[activeCell, editor]
|
|
22515
|
+
);
|
|
22516
|
+
const mouseUpHandler = useCallback13(
|
|
22517
|
+
(direction) => {
|
|
22518
|
+
const handler = (event) => {
|
|
22519
|
+
event.preventDefault();
|
|
22520
|
+
event.stopPropagation();
|
|
22521
|
+
if (!activeCell) {
|
|
22522
|
+
throw new Error("TableCellResizer: Expected active cell.");
|
|
22497
22523
|
}
|
|
22498
|
-
|
|
22499
|
-
|
|
22500
|
-
|
|
22501
|
-
|
|
22502
|
-
|
|
22503
|
-
|
|
22504
|
-
|
|
22505
|
-
|
|
22506
|
-
|
|
22507
|
-
|
|
22508
|
-
|
|
22509
|
-
|
|
22524
|
+
if (mouseStartPosRef.current) {
|
|
22525
|
+
const { x, y } = mouseStartPosRef.current;
|
|
22526
|
+
if (activeCell === null) {
|
|
22527
|
+
return;
|
|
22528
|
+
}
|
|
22529
|
+
const zoom = calculateZoomLevel(event.target);
|
|
22530
|
+
if (isHeightChanging(direction)) {
|
|
22531
|
+
const heightChange = (event.clientY - y) / zoom;
|
|
22532
|
+
updateRowHeight(heightChange);
|
|
22533
|
+
} else {
|
|
22534
|
+
const widthChange = (event.clientX - x) / zoom;
|
|
22535
|
+
updateColumnWidth(widthChange);
|
|
22536
|
+
}
|
|
22537
|
+
resetState();
|
|
22538
|
+
document.removeEventListener("mouseup", handler);
|
|
22539
|
+
}
|
|
22540
|
+
};
|
|
22541
|
+
return handler;
|
|
22542
|
+
},
|
|
22543
|
+
[activeCell, resetState, updateColumnWidth, updateRowHeight]
|
|
22544
|
+
);
|
|
22545
|
+
const toggleResize = useCallback13(
|
|
22546
|
+
(direction) => (event) => {
|
|
22547
|
+
event.preventDefault();
|
|
22548
|
+
event.stopPropagation();
|
|
22549
|
+
if (!activeCell) {
|
|
22550
|
+
throw new Error("TableCellResizer: Expected active cell.");
|
|
22551
|
+
}
|
|
22552
|
+
mouseStartPosRef.current = {
|
|
22553
|
+
x: event.clientX,
|
|
22554
|
+
y: event.clientY
|
|
22555
|
+
};
|
|
22556
|
+
updateMouseCurrentPos(mouseStartPosRef.current);
|
|
22557
|
+
updateDraggingDirection(direction);
|
|
22558
|
+
document.addEventListener("mouseup", mouseUpHandler(direction));
|
|
22559
|
+
},
|
|
22560
|
+
[activeCell, mouseUpHandler]
|
|
22561
|
+
);
|
|
22562
|
+
const getResizers = useCallback13(() => {
|
|
22563
|
+
if (activeCell) {
|
|
22564
|
+
const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
|
|
22565
|
+
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
22566
|
+
const zoom = calculateZoomLevel(activeCell.elem);
|
|
22567
|
+
const zoneWidth = 10;
|
|
22568
|
+
const styles = {
|
|
22569
|
+
bottom: {
|
|
22570
|
+
backgroundColor: "none",
|
|
22571
|
+
cursor: "row-resize",
|
|
22572
|
+
height: `${zoneWidth}px`,
|
|
22573
|
+
left: `${left - parentRect.left}px`,
|
|
22574
|
+
top: `${top - parentRect.top + positioningAnchorEl.scrollTop + height - zoneWidth / 2}px`,
|
|
22575
|
+
width: `${width}px`
|
|
22576
|
+
},
|
|
22577
|
+
right: {
|
|
22578
|
+
backgroundColor: "none",
|
|
22579
|
+
cursor: "col-resize",
|
|
22580
|
+
height: `${height}px`,
|
|
22581
|
+
left: `${left - parentRect.left + width - zoneWidth / 2}px`,
|
|
22582
|
+
top: `${top - parentRect.top + positioningAnchorEl.scrollTop}px`,
|
|
22583
|
+
width: `${zoneWidth}px`
|
|
22584
|
+
}
|
|
22585
|
+
};
|
|
22586
|
+
const tableRect = tableRectRef.current;
|
|
22587
|
+
if (draggingDirection && mouseCurrentPos && tableRect) {
|
|
22588
|
+
if (isHeightChanging(draggingDirection)) {
|
|
22589
|
+
styles[draggingDirection].left = `${tableRect.left - parentRect.left}px`;
|
|
22590
|
+
styles[draggingDirection].top = `${(mouseCurrentPos.y - parentRect.top + positioningAnchorEl.scrollTop) / zoom}px`;
|
|
22591
|
+
styles[draggingDirection].height = "3px";
|
|
22592
|
+
styles[draggingDirection].width = `${tableRect.width}px`;
|
|
22593
|
+
} else {
|
|
22594
|
+
styles[draggingDirection].top = `${tableRect.top - parentRect.top + positioningAnchorEl.scrollTop}px`;
|
|
22595
|
+
styles[draggingDirection].left = `${(mouseCurrentPos.x - parentRect.left) / zoom}px`;
|
|
22596
|
+
styles[draggingDirection].width = "3px";
|
|
22597
|
+
styles[draggingDirection].height = `${tableRect.height}px`;
|
|
22598
|
+
}
|
|
22599
|
+
styles[draggingDirection].backgroundColor = "#adf";
|
|
22510
22600
|
}
|
|
22601
|
+
return styles;
|
|
22511
22602
|
}
|
|
22512
|
-
|
|
22513
|
-
|
|
22514
|
-
|
|
22515
|
-
|
|
22516
|
-
|
|
22517
|
-
}
|
|
22518
|
-
|
|
22519
|
-
|
|
22520
|
-
|
|
22521
|
-
|
|
22522
|
-
|
|
22523
|
-
|
|
22524
|
-
|
|
22525
|
-
|
|
22526
|
-
|
|
22527
|
-
setActiveElement(type === "bullet" ? "unorderedList" : "orderedList");
|
|
22528
|
-
} else {
|
|
22529
|
-
const type = $isHeadingNode(element) ? element.getTag() : element.getType();
|
|
22530
|
-
setActiveElement(type);
|
|
22603
|
+
return {
|
|
22604
|
+
bottom: null,
|
|
22605
|
+
left: null,
|
|
22606
|
+
right: null,
|
|
22607
|
+
top: null
|
|
22608
|
+
};
|
|
22609
|
+
}, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
|
|
22610
|
+
const resizerStyles = getResizers();
|
|
22611
|
+
return /* @__PURE__ */ jsx132("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs88(Fragment20, { children: [
|
|
22612
|
+
/* @__PURE__ */ jsx132(
|
|
22613
|
+
"div",
|
|
22614
|
+
{
|
|
22615
|
+
css: tableResizer,
|
|
22616
|
+
style: resizerStyles.right || void 0,
|
|
22617
|
+
onMouseDown: toggleResize("right")
|
|
22531
22618
|
}
|
|
22532
|
-
|
|
22533
|
-
|
|
22534
|
-
|
|
22535
|
-
|
|
22536
|
-
|
|
22537
|
-
|
|
22538
|
-
|
|
22539
|
-
|
|
22619
|
+
),
|
|
22620
|
+
/* @__PURE__ */ jsx132(
|
|
22621
|
+
"div",
|
|
22622
|
+
{
|
|
22623
|
+
css: tableResizer,
|
|
22624
|
+
style: resizerStyles.bottom || void 0,
|
|
22625
|
+
onMouseDown: toggleResize("bottom")
|
|
22626
|
+
}
|
|
22627
|
+
)
|
|
22628
|
+
] }) });
|
|
22629
|
+
}
|
|
22630
|
+
function TableCellResizerPlugin({ positioningAnchorEl }) {
|
|
22631
|
+
const [editor] = useLexicalComposerContext6();
|
|
22632
|
+
const isEditable = useLexicalEditable2();
|
|
22633
|
+
return useMemo7(
|
|
22634
|
+
() => isEditable ? createPortal3(
|
|
22635
|
+
/* @__PURE__ */ jsx132(TableCellResizer, { editor, positioningAnchorEl }),
|
|
22636
|
+
positioningAnchorEl
|
|
22637
|
+
) : null,
|
|
22638
|
+
[editor, isEditable, positioningAnchorEl]
|
|
22639
|
+
);
|
|
22640
|
+
}
|
|
22641
|
+
|
|
22642
|
+
// src/components/ParameterInputs/rich-text/TableSelectionPlugin.tsx
|
|
22643
|
+
import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
|
|
22644
|
+
import { $findCellNode } from "@lexical/table";
|
|
22645
|
+
import {
|
|
22646
|
+
$getSelection as $getSelection5,
|
|
22647
|
+
$isRangeSelection as $isRangeSelection5,
|
|
22648
|
+
$setSelection,
|
|
22649
|
+
COMMAND_PRIORITY_NORMAL as COMMAND_PRIORITY_NORMAL2,
|
|
22650
|
+
SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND3
|
|
22651
|
+
} from "lexical";
|
|
22652
|
+
import { useEffect as useEffect23, useState as useState20 } from "react";
|
|
22653
|
+
var TableSelectionPlugin = () => {
|
|
22654
|
+
const [editor] = useLexicalComposerContext7();
|
|
22655
|
+
const [closestTableCellNode, setClosestTableCellNode] = useState20(null);
|
|
22540
22656
|
useEffect23(() => {
|
|
22541
22657
|
return editor.registerCommand(
|
|
22542
22658
|
SELECTION_CHANGE_COMMAND3,
|
|
22543
|
-
(
|
|
22544
|
-
|
|
22659
|
+
() => {
|
|
22660
|
+
editor.read(() => {
|
|
22661
|
+
const selection = $getSelection5();
|
|
22662
|
+
if (!$isRangeSelection5(selection) || !selection.isCollapsed()) {
|
|
22663
|
+
setClosestTableCellNode(null);
|
|
22664
|
+
return false;
|
|
22665
|
+
}
|
|
22666
|
+
const tableCellNode = $findCellNode(selection.anchor.getNode());
|
|
22667
|
+
if (tableCellNode === null) {
|
|
22668
|
+
setClosestTableCellNode(null);
|
|
22669
|
+
return false;
|
|
22670
|
+
}
|
|
22671
|
+
setClosestTableCellNode(tableCellNode);
|
|
22672
|
+
});
|
|
22545
22673
|
return false;
|
|
22546
22674
|
},
|
|
22547
|
-
|
|
22675
|
+
COMMAND_PRIORITY_NORMAL2
|
|
22548
22676
|
);
|
|
22549
|
-
}, [editor
|
|
22677
|
+
}, [editor]);
|
|
22550
22678
|
useEffect23(() => {
|
|
22551
|
-
|
|
22552
|
-
|
|
22553
|
-
|
|
22554
|
-
|
|
22555
|
-
});
|
|
22556
|
-
});
|
|
22557
|
-
});
|
|
22558
|
-
}, [editor, updateToolbar]);
|
|
22559
|
-
return /* @__PURE__ */ jsxs88("div", { css: toolbar, children: [
|
|
22560
|
-
/* @__PURE__ */ jsxs88(
|
|
22561
|
-
Menu,
|
|
22562
|
-
{
|
|
22563
|
-
menuTrigger: /* @__PURE__ */ jsxs88("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", children: [
|
|
22564
|
-
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
22565
|
-
" ",
|
|
22566
|
-
/* @__PURE__ */ jsx132(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
22567
|
-
] }),
|
|
22568
|
-
placement: "bottom-start",
|
|
22569
|
-
children: [
|
|
22570
|
-
[
|
|
22571
|
-
{
|
|
22572
|
-
label: "Normal",
|
|
22573
|
-
type: "paragraph"
|
|
22574
|
-
},
|
|
22575
|
-
...visibleTextualElements
|
|
22576
|
-
].map((element) => /* @__PURE__ */ jsx132(
|
|
22577
|
-
MenuItem,
|
|
22578
|
-
{
|
|
22579
|
-
onClick: () => {
|
|
22580
|
-
onSelectElement(element.type);
|
|
22581
|
-
},
|
|
22582
|
-
children: element.label
|
|
22583
|
-
},
|
|
22584
|
-
element.type
|
|
22585
|
-
)),
|
|
22586
|
-
visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx132(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
|
|
22587
|
-
]
|
|
22588
|
-
}
|
|
22589
|
-
),
|
|
22590
|
-
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs88("div", { css: toolbarGroup, children: [
|
|
22591
|
-
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx132(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx132(
|
|
22592
|
-
"button",
|
|
22593
|
-
{
|
|
22594
|
-
onClick: () => {
|
|
22595
|
-
editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
|
|
22596
|
-
},
|
|
22597
|
-
css: [
|
|
22598
|
-
richTextToolbarButton,
|
|
22599
|
-
activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
|
|
22600
|
-
],
|
|
22601
|
-
children: /* @__PURE__ */ jsx132(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
|
|
22602
|
-
}
|
|
22603
|
-
) }, format.type)),
|
|
22604
|
-
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx132(
|
|
22605
|
-
Menu,
|
|
22606
|
-
{
|
|
22607
|
-
menuLabel: "Alternative text styles",
|
|
22608
|
-
menuTrigger: /* @__PURE__ */ jsx132("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx132(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
22609
|
-
placement: "bottom-start",
|
|
22610
|
-
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx132(
|
|
22611
|
-
MenuItem,
|
|
22612
|
-
{
|
|
22613
|
-
onClick: () => {
|
|
22614
|
-
editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
|
|
22615
|
-
},
|
|
22616
|
-
children: format.label
|
|
22617
|
-
},
|
|
22618
|
-
format.type
|
|
22619
|
-
))
|
|
22620
|
-
}
|
|
22621
|
-
) : null
|
|
22622
|
-
] }) : null,
|
|
22623
|
-
visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ jsxs88("div", { css: toolbarGroup, children: [
|
|
22624
|
-
linkElementVisible ? /* @__PURE__ */ jsx132(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx132(
|
|
22625
|
-
"button",
|
|
22626
|
-
{
|
|
22627
|
-
onClick: () => {
|
|
22628
|
-
isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
|
|
22629
|
-
},
|
|
22630
|
-
css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
|
|
22631
|
-
children: /* @__PURE__ */ jsx132(RichTextToolbarIcon, { icon: "link" })
|
|
22679
|
+
const onControlA = (event) => {
|
|
22680
|
+
if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
|
|
22681
|
+
if (!closestTableCellNode) {
|
|
22682
|
+
return;
|
|
22632
22683
|
}
|
|
22633
|
-
|
|
22634
|
-
|
|
22635
|
-
|
|
22636
|
-
|
|
22637
|
-
|
|
22638
|
-
onClick: () => {
|
|
22639
|
-
activeElement === "unorderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
|
|
22640
|
-
},
|
|
22641
|
-
css: [
|
|
22642
|
-
richTextToolbarButton,
|
|
22643
|
-
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
22644
|
-
],
|
|
22645
|
-
children: /* @__PURE__ */ jsx132(RichTextToolbarIcon, { icon: "layout-list" })
|
|
22646
|
-
}
|
|
22647
|
-
) }) : null,
|
|
22648
|
-
visibleLists.has("orderedList") ? /* @__PURE__ */ jsx132(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx132(
|
|
22649
|
-
"button",
|
|
22650
|
-
{
|
|
22651
|
-
onClick: () => {
|
|
22652
|
-
activeElement === "orderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
|
|
22653
|
-
},
|
|
22654
|
-
css: [
|
|
22655
|
-
richTextToolbarButton,
|
|
22656
|
-
activeElement === "orderedList" ? richTextToolbarButtonActive : null
|
|
22657
|
-
],
|
|
22658
|
-
children: /* @__PURE__ */ jsx132(RichTextToolbarIcon, { icon: "layout-list-numbered" })
|
|
22659
|
-
}
|
|
22660
|
-
) }) : null
|
|
22661
|
-
] }) : null,
|
|
22662
|
-
customControls ? customControls : null
|
|
22663
|
-
] }) : null,
|
|
22664
|
-
visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ jsx132("div", { css: toolbarGroup, children: /* @__PURE__ */ jsxs88(
|
|
22665
|
-
Menu,
|
|
22666
|
-
{
|
|
22667
|
-
menuTrigger: /* @__PURE__ */ jsxs88("button", { css: richTextToolbarButton, title: "Insert block element", children: [
|
|
22668
|
-
"Insert",
|
|
22669
|
-
/* @__PURE__ */ jsx132(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
22670
|
-
] }),
|
|
22671
|
-
placement: "bottom-start",
|
|
22672
|
-
children: [
|
|
22673
|
-
quoteElementVisible ? /* @__PURE__ */ jsx132(
|
|
22674
|
-
MenuItem,
|
|
22675
|
-
{
|
|
22676
|
-
onClick: () => {
|
|
22677
|
-
onSelectElement("quote");
|
|
22678
|
-
},
|
|
22679
|
-
icon: /* @__PURE__ */ jsx132(Icon, { icon: "quote", iconColor: "currentColor" }),
|
|
22680
|
-
children: "Quote"
|
|
22681
|
-
}
|
|
22682
|
-
) : null,
|
|
22683
|
-
codeElementVisible ? /* @__PURE__ */ jsx132(
|
|
22684
|
-
MenuItem,
|
|
22685
|
-
{
|
|
22686
|
-
onClick: () => {
|
|
22687
|
-
onSelectElement("code");
|
|
22688
|
-
},
|
|
22689
|
-
icon: /* @__PURE__ */ jsx132(Icon, { icon: "code-slash", iconColor: "currentColor" }),
|
|
22690
|
-
children: "Code"
|
|
22691
|
-
}
|
|
22692
|
-
) : null,
|
|
22693
|
-
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ jsx132(
|
|
22694
|
-
MenuItem,
|
|
22695
|
-
{
|
|
22696
|
-
onClick: () => {
|
|
22697
|
-
onSelectElement("table");
|
|
22698
|
-
},
|
|
22699
|
-
icon: /* @__PURE__ */ jsx132(Icon, { icon: "view-grid", iconColor: "currentColor" }),
|
|
22700
|
-
children: "Table"
|
|
22701
|
-
}
|
|
22702
|
-
) : null,
|
|
22703
|
-
assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ jsx132(
|
|
22704
|
-
MenuItem,
|
|
22705
|
-
{
|
|
22706
|
-
onClick: () => {
|
|
22707
|
-
onSelectElement("asset");
|
|
22708
|
-
},
|
|
22709
|
-
icon: /* @__PURE__ */ jsx132(Icon, { icon: "image", iconColor: "currentColor" }),
|
|
22710
|
-
children: "Asset"
|
|
22711
|
-
}
|
|
22712
|
-
) : null
|
|
22713
|
-
]
|
|
22684
|
+
event.preventDefault();
|
|
22685
|
+
editor.update(() => {
|
|
22686
|
+
const selection = closestTableCellNode.select(0, closestTableCellNode.getChildrenSize());
|
|
22687
|
+
$setSelection(selection);
|
|
22688
|
+
});
|
|
22714
22689
|
}
|
|
22715
|
-
|
|
22716
|
-
|
|
22690
|
+
};
|
|
22691
|
+
return editor.registerRootListener((rootElement, prevRootElement) => {
|
|
22692
|
+
rootElement == null ? void 0 : rootElement.addEventListener("keydown", onControlA);
|
|
22693
|
+
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("keydown", onControlA);
|
|
22694
|
+
});
|
|
22695
|
+
}, [editor, closestTableCellNode]);
|
|
22696
|
+
return null;
|
|
22717
22697
|
};
|
|
22718
|
-
var
|
|
22698
|
+
var TableSelectionPlugin_default = TableSelectionPlugin;
|
|
22719
22699
|
|
|
22720
22700
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
22721
22701
|
import { Fragment as Fragment21, jsx as jsx133, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
|
|
@@ -22744,7 +22724,6 @@ var ParameterRichText = ({
|
|
|
22744
22724
|
variables,
|
|
22745
22725
|
customControls,
|
|
22746
22726
|
onInsertTable,
|
|
22747
|
-
onInsertAsset,
|
|
22748
22727
|
minimalInteractivity
|
|
22749
22728
|
}) => {
|
|
22750
22729
|
return /* @__PURE__ */ jsxs89(
|
|
@@ -22778,7 +22757,6 @@ var ParameterRichText = ({
|
|
|
22778
22757
|
variables,
|
|
22779
22758
|
customControls,
|
|
22780
22759
|
onInsertTable,
|
|
22781
|
-
onInsertAsset,
|
|
22782
22760
|
minimalInteractivity,
|
|
22783
22761
|
children
|
|
22784
22762
|
}
|
|
@@ -22862,7 +22840,6 @@ var editorPlaceholder = css101`
|
|
|
22862
22840
|
`;
|
|
22863
22841
|
var editorInput = css101`
|
|
22864
22842
|
min-height: 100%;
|
|
22865
|
-
flex-grow: 1;
|
|
22866
22843
|
|
|
22867
22844
|
&:focus,
|
|
22868
22845
|
&:focus-within {
|
|
@@ -22885,7 +22862,6 @@ var ParameterRichTextInner = ({
|
|
|
22885
22862
|
variables,
|
|
22886
22863
|
customControls,
|
|
22887
22864
|
onInsertTable,
|
|
22888
|
-
onInsertAsset,
|
|
22889
22865
|
minimalInteractivity
|
|
22890
22866
|
}) => {
|
|
22891
22867
|
const lexicalConfig = {
|
|
@@ -22958,7 +22934,6 @@ var ParameterRichTextInner = ({
|
|
|
22958
22934
|
variables,
|
|
22959
22935
|
customControls,
|
|
22960
22936
|
onInsertTable,
|
|
22961
|
-
onInsertAsset,
|
|
22962
22937
|
minimalInteractivity,
|
|
22963
22938
|
children
|
|
22964
22939
|
}
|
|
@@ -22987,7 +22962,6 @@ var RichText = ({
|
|
|
22987
22962
|
variables,
|
|
22988
22963
|
customControls,
|
|
22989
22964
|
onInsertTable,
|
|
22990
|
-
onInsertAsset,
|
|
22991
22965
|
minimalInteractivity
|
|
22992
22966
|
}) => {
|
|
22993
22967
|
const [editor] = useLexicalComposerContext8();
|
|
@@ -23024,15 +22998,7 @@ var RichText = ({
|
|
|
23024
22998
|
}
|
|
23025
22999
|
};
|
|
23026
23000
|
return /* @__PURE__ */ jsxs89(Fragment21, { children: [
|
|
23027
|
-
readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx133(
|
|
23028
|
-
RichTextToolbar_default,
|
|
23029
|
-
{
|
|
23030
|
-
config,
|
|
23031
|
-
customControls,
|
|
23032
|
-
onInsertTable,
|
|
23033
|
-
onInsertAsset
|
|
23034
|
-
}
|
|
23035
|
-
),
|
|
23001
|
+
readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx133(RichTextToolbar_default, { config, customControls, onInsertTable }),
|
|
23036
23002
|
/* @__PURE__ */ jsxs89("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
|
|
23037
23003
|
/* @__PURE__ */ jsxs89(
|
|
23038
23004
|
"div",
|