@uniformdev/design-system 19.186.2-alpha.14 → 19.186.4-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +1188 -1338
- package/dist/index.d.mts +5 -11
- package/dist/index.d.ts +5 -11
- package/dist/index.js +1311 -1457
- package/package.json +4 -4
package/dist/esm/index.js
CHANGED
|
@@ -20392,7 +20392,7 @@ import {
|
|
|
20392
20392
|
UNORDERED_LIST
|
|
20393
20393
|
} from "@lexical/markdown";
|
|
20394
20394
|
import { LexicalComposer } from "@lexical/react/LexicalComposer";
|
|
20395
|
-
import { useLexicalComposerContext as
|
|
20395
|
+
import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
|
|
20396
20396
|
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
|
|
20397
20397
|
import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
|
|
20398
20398
|
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
|
|
@@ -20404,12 +20404,6 @@ import { HeadingNode, QuoteNode } from "@lexical/rich-text";
|
|
|
20404
20404
|
import { TableCellNode as TableCellNode3, TableNode, TableRowNode as TableRowNode2 } from "@lexical/table";
|
|
20405
20405
|
|
|
20406
20406
|
// ../richtext/dist/index.mjs
|
|
20407
|
-
function isRichTextNode(node) {
|
|
20408
|
-
return !!node && typeof node === "object" && "type" in node;
|
|
20409
|
-
}
|
|
20410
|
-
function isRichTextNodeType(node, type) {
|
|
20411
|
-
return isRichTextNode(node) && node.type === type;
|
|
20412
|
-
}
|
|
20413
20407
|
var richTextBuiltInElements = [
|
|
20414
20408
|
{
|
|
20415
20409
|
label: "Heading 1",
|
|
@@ -20459,10 +20453,6 @@ var richTextBuiltInElements = [
|
|
|
20459
20453
|
label: "Table",
|
|
20460
20454
|
type: "table"
|
|
20461
20455
|
},
|
|
20462
|
-
{
|
|
20463
|
-
label: "Asset",
|
|
20464
|
-
type: "asset"
|
|
20465
|
-
},
|
|
20466
20456
|
{
|
|
20467
20457
|
label: "Dynamic Token",
|
|
20468
20458
|
type: "variable"
|
|
@@ -20510,7 +20500,7 @@ var getLabelForElement = (type) => {
|
|
|
20510
20500
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
20511
20501
|
import { deepEqual as deepEqual2 } from "fast-equals";
|
|
20512
20502
|
import { ParagraphNode as ParagraphNode2 } from "lexical";
|
|
20513
|
-
import { useEffect as
|
|
20503
|
+
import { useEffect as useEffect24, useState as useState21 } from "react";
|
|
20514
20504
|
|
|
20515
20505
|
// src/components/ParameterInputs/rich-text/CustomCodeNode.ts
|
|
20516
20506
|
import { CodeNode } from "@lexical/code";
|
|
@@ -20789,70 +20779,11 @@ var tableHeaderElement = css96`
|
|
|
20789
20779
|
width: 7rem;
|
|
20790
20780
|
`;
|
|
20791
20781
|
|
|
20792
|
-
// src/components/ParameterInputs/rich-text/ImprovedAssetSelectionPlugin.tsx
|
|
20793
|
-
import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
|
|
20794
|
-
import { $insertFirst } from "@lexical/utils";
|
|
20795
|
-
import { $createParagraphNode, $getRoot, $insertNodes } from "lexical";
|
|
20796
|
-
import { useEffect as useEffect18 } from "react";
|
|
20797
|
-
var ImprovedAssetSelectionPlugin = () => {
|
|
20798
|
-
const [editor] = useLexicalComposerContext2();
|
|
20799
|
-
useEffect18(() => {
|
|
20800
|
-
editor.getRootElement();
|
|
20801
|
-
const onRootClick = (event) => {
|
|
20802
|
-
if (event.target !== editor.getRootElement()) {
|
|
20803
|
-
return;
|
|
20804
|
-
}
|
|
20805
|
-
const clickArea = event.offsetY <= 60 ? "top" : "bottom";
|
|
20806
|
-
const state = editor.getEditorState().toJSON();
|
|
20807
|
-
const firstNode = state.root.children[0];
|
|
20808
|
-
const lastNode = state.root.children.at(-1);
|
|
20809
|
-
if (isRichTextNodeType(firstNode, "asset") && clickArea === "top") {
|
|
20810
|
-
editor.update(() => {
|
|
20811
|
-
$insertFirst($getRoot(), $createParagraphNode());
|
|
20812
|
-
requestAnimationFrame(() => {
|
|
20813
|
-
var _a, _b;
|
|
20814
|
-
(_b = (_a = editor.getRootElement()) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.scrollTo({
|
|
20815
|
-
top: 0,
|
|
20816
|
-
behavior: "instant"
|
|
20817
|
-
});
|
|
20818
|
-
});
|
|
20819
|
-
});
|
|
20820
|
-
} else if (isRichTextNodeType(lastNode, "asset") && clickArea === "bottom") {
|
|
20821
|
-
editor.update(() => {
|
|
20822
|
-
$getRoot().selectEnd();
|
|
20823
|
-
$insertNodes([$createParagraphNode()]);
|
|
20824
|
-
requestAnimationFrame(() => {
|
|
20825
|
-
var _a, _b, _c, _d;
|
|
20826
|
-
(_d = (_a = editor.getRootElement()) == null ? void 0 : _a.parentElement) == null ? void 0 : _d.scrollTo({
|
|
20827
|
-
top: (_c = (_b = editor.getRootElement()) == null ? void 0 : _b.parentElement) == null ? void 0 : _c.scrollHeight,
|
|
20828
|
-
behavior: "instant"
|
|
20829
|
-
});
|
|
20830
|
-
});
|
|
20831
|
-
});
|
|
20832
|
-
}
|
|
20833
|
-
};
|
|
20834
|
-
const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
|
|
20835
|
-
rootElement == null ? void 0 : rootElement.addEventListener("click", onRootClick);
|
|
20836
|
-
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("click", onRootClick);
|
|
20837
|
-
});
|
|
20838
|
-
return () => {
|
|
20839
|
-
removeRootListener();
|
|
20840
|
-
};
|
|
20841
|
-
}, [editor]);
|
|
20842
|
-
return null;
|
|
20843
|
-
};
|
|
20844
|
-
var ImprovedAssetSelectionPlugin_default = ImprovedAssetSelectionPlugin;
|
|
20845
|
-
|
|
20846
20782
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
20847
20783
|
import { css as css97 } from "@emotion/react";
|
|
20848
|
-
import { useLexicalComposerContext as
|
|
20784
|
+
import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
|
|
20849
20785
|
import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
|
|
20850
|
-
import {
|
|
20851
|
-
addClassNamesToElement,
|
|
20852
|
-
isHTMLAnchorElement,
|
|
20853
|
-
mergeRegister as mergeRegister2,
|
|
20854
|
-
objectKlassEquals
|
|
20855
|
-
} from "@lexical/utils";
|
|
20786
|
+
import { addClassNamesToElement, isHTMLAnchorElement, mergeRegister as mergeRegister2 } from "@lexical/utils";
|
|
20856
20787
|
import { deepEqual } from "fast-equals";
|
|
20857
20788
|
import {
|
|
20858
20789
|
$applyNodeReplacement,
|
|
@@ -20861,13 +20792,11 @@ import {
|
|
|
20861
20792
|
$isRangeSelection,
|
|
20862
20793
|
BLUR_COMMAND,
|
|
20863
20794
|
COMMAND_PRIORITY_EDITOR,
|
|
20864
|
-
COMMAND_PRIORITY_LOW,
|
|
20865
20795
|
createCommand,
|
|
20866
20796
|
ElementNode as ElementNode2,
|
|
20867
|
-
FOCUS_COMMAND
|
|
20868
|
-
PASTE_COMMAND
|
|
20797
|
+
FOCUS_COMMAND
|
|
20869
20798
|
} from "lexical";
|
|
20870
|
-
import { useCallback as useCallback10, useEffect as
|
|
20799
|
+
import { useCallback as useCallback10, useEffect as useEffect18, useRef as useRef11, useState as useState16 } from "react";
|
|
20871
20800
|
|
|
20872
20801
|
// src/components/ParameterInputs/rich-text/utils.ts
|
|
20873
20802
|
import { $isAtNodeEnd } from "@lexical/selection";
|
|
@@ -20984,7 +20913,9 @@ function convertAnchorElement(domNode) {
|
|
|
20984
20913
|
nodeId,
|
|
20985
20914
|
dynamicInputValues
|
|
20986
20915
|
};
|
|
20987
|
-
if (isProjectMapLinkValue(value)
|
|
20916
|
+
if (isProjectMapLinkValue(value)) {
|
|
20917
|
+
node = $createLinkNode(value);
|
|
20918
|
+
} else if (isNonProjectMapLinkValue(value)) {
|
|
20988
20919
|
node = $createLinkNode(value);
|
|
20989
20920
|
}
|
|
20990
20921
|
return { node };
|
|
@@ -21138,10 +21069,6 @@ function upsertLinkNode(props) {
|
|
|
21138
21069
|
continue;
|
|
21139
21070
|
}
|
|
21140
21071
|
const linkNodeAncestor = getLinkAncestor(node);
|
|
21141
|
-
if ($isLinkNode(node)) {
|
|
21142
|
-
node.setLink(props);
|
|
21143
|
-
continue;
|
|
21144
|
-
}
|
|
21145
21072
|
if (!linkNodeAncestor) {
|
|
21146
21073
|
const newLinkNode = $createLinkNode(props);
|
|
21147
21074
|
node.insertBefore(newLinkNode);
|
|
@@ -21214,18 +21141,18 @@ function LinkNodePlugin({
|
|
|
21214
21141
|
const parsePath = getBoundPath != null ? getBoundPath : function(path) {
|
|
21215
21142
|
return path;
|
|
21216
21143
|
};
|
|
21217
|
-
const [editor] =
|
|
21144
|
+
const [editor] = useLexicalComposerContext2();
|
|
21218
21145
|
const [linkPopoverState, setLinkPopoverState] = useState16();
|
|
21219
21146
|
const linkPopoverElRef = useRef11(null);
|
|
21220
21147
|
const [isEditorFocused, setIsEditorFocused] = useState16(false);
|
|
21221
21148
|
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState16(false);
|
|
21222
|
-
|
|
21149
|
+
useEffect18(() => {
|
|
21223
21150
|
if (!isEditorFocused && !isLinkPopoverFocused) {
|
|
21224
21151
|
setLinkPopoverState(void 0);
|
|
21225
21152
|
return;
|
|
21226
21153
|
}
|
|
21227
21154
|
}, [isEditorFocused, isLinkPopoverFocused]);
|
|
21228
|
-
|
|
21155
|
+
useEffect18(() => {
|
|
21229
21156
|
if (!editor.hasNodes([LinkNode])) {
|
|
21230
21157
|
throw new Error("LinkNode not registered on editor");
|
|
21231
21158
|
}
|
|
@@ -21291,41 +21218,6 @@ function LinkNodePlugin({
|
|
|
21291
21218
|
return true;
|
|
21292
21219
|
},
|
|
21293
21220
|
COMMAND_PRIORITY_EDITOR
|
|
21294
|
-
),
|
|
21295
|
-
// Support pasting of links from clipboard
|
|
21296
|
-
editor.registerCommand(
|
|
21297
|
-
PASTE_COMMAND,
|
|
21298
|
-
(event) => {
|
|
21299
|
-
const selection = $getSelection();
|
|
21300
|
-
if (!$isRangeSelection(selection) || selection.isCollapsed() || !objectKlassEquals(event, ClipboardEvent)) {
|
|
21301
|
-
return false;
|
|
21302
|
-
}
|
|
21303
|
-
const clipboardEvent = event;
|
|
21304
|
-
if (clipboardEvent.clipboardData === null) {
|
|
21305
|
-
return false;
|
|
21306
|
-
}
|
|
21307
|
-
const clipboardText = clipboardEvent.clipboardData.getData("text");
|
|
21308
|
-
if (!isValidUrl(clipboardText)) {
|
|
21309
|
-
return false;
|
|
21310
|
-
}
|
|
21311
|
-
if (selection.getNodes().some((node) => $isElementNode2(node) && !$isLinkNode(node))) {
|
|
21312
|
-
return false;
|
|
21313
|
-
}
|
|
21314
|
-
let path = clipboardText;
|
|
21315
|
-
const type = guessLinkTypeFromPath(path);
|
|
21316
|
-
if (type === "email" && path.startsWith("mailto:")) {
|
|
21317
|
-
path = path.replace("mailto:", "");
|
|
21318
|
-
} else if (type === "tel" && path.startsWith("tel:")) {
|
|
21319
|
-
path = path.replace("tel:", "");
|
|
21320
|
-
}
|
|
21321
|
-
upsertLinkNode({
|
|
21322
|
-
path,
|
|
21323
|
-
type
|
|
21324
|
-
});
|
|
21325
|
-
event.preventDefault();
|
|
21326
|
-
return true;
|
|
21327
|
-
},
|
|
21328
|
-
COMMAND_PRIORITY_LOW
|
|
21329
21221
|
)
|
|
21330
21222
|
);
|
|
21331
21223
|
}, [editor, onConnectLink]);
|
|
@@ -21363,7 +21255,7 @@ function LinkNodePlugin({
|
|
|
21363
21255
|
}
|
|
21364
21256
|
});
|
|
21365
21257
|
}, [editor, positioningAnchorEl]);
|
|
21366
|
-
|
|
21258
|
+
useEffect18(() => {
|
|
21367
21259
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
21368
21260
|
requestAnimationFrame(() => {
|
|
21369
21261
|
editorState.read(() => {
|
|
@@ -21447,7 +21339,7 @@ function getLinkAncestor(node) {
|
|
|
21447
21339
|
|
|
21448
21340
|
// src/components/ParameterInputs/rich-text/ListIndentPlugin.tsx
|
|
21449
21341
|
import { $getListDepth, $isListItemNode, $isListNode, ListNode } from "@lexical/list";
|
|
21450
|
-
import { useLexicalComposerContext as
|
|
21342
|
+
import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
|
|
21451
21343
|
import {
|
|
21452
21344
|
$filter,
|
|
21453
21345
|
$getNearestBlockElementAncestorOrThrow,
|
|
@@ -21467,7 +21359,7 @@ import {
|
|
|
21467
21359
|
OUTDENT_CONTENT_COMMAND,
|
|
21468
21360
|
SELECTION_CHANGE_COMMAND
|
|
21469
21361
|
} from "lexical";
|
|
21470
|
-
import { useEffect as
|
|
21362
|
+
import { useEffect as useEffect19, useRef as useRef12 } from "react";
|
|
21471
21363
|
function isIndentPermitted(maxDepth) {
|
|
21472
21364
|
const selection = $getSelection2();
|
|
21473
21365
|
if (!$isRangeSelection2(selection)) {
|
|
@@ -21521,9 +21413,9 @@ function $indentOverTab(selection) {
|
|
|
21521
21413
|
return false;
|
|
21522
21414
|
}
|
|
21523
21415
|
function ListIndentPlugin({ maxDepth }) {
|
|
21524
|
-
const [editor] =
|
|
21416
|
+
const [editor] = useLexicalComposerContext3();
|
|
21525
21417
|
const isInListItemNode = useRef12(false);
|
|
21526
|
-
|
|
21418
|
+
useEffect19(() => {
|
|
21527
21419
|
return editor.registerCommand(
|
|
21528
21420
|
SELECTION_CHANGE_COMMAND,
|
|
21529
21421
|
() => {
|
|
@@ -21540,7 +21432,7 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
21540
21432
|
COMMAND_PRIORITY_NORMAL
|
|
21541
21433
|
);
|
|
21542
21434
|
}, [editor]);
|
|
21543
|
-
|
|
21435
|
+
useEffect19(() => {
|
|
21544
21436
|
return mergeRegister3(
|
|
21545
21437
|
editor.registerCommand(
|
|
21546
21438
|
INDENT_CONTENT_COMMAND,
|
|
@@ -21568,1269 +21460,1242 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
21568
21460
|
return null;
|
|
21569
21461
|
}
|
|
21570
21462
|
|
|
21571
|
-
// src/components/ParameterInputs/rich-text/
|
|
21463
|
+
// src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
|
|
21572
21464
|
import { css as css98 } from "@emotion/react";
|
|
21573
|
-
import {
|
|
21574
|
-
import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
|
|
21465
|
+
import { $createCodeNode } from "@lexical/code";
|
|
21575
21466
|
import {
|
|
21576
|
-
$
|
|
21577
|
-
|
|
21578
|
-
|
|
21579
|
-
|
|
21580
|
-
|
|
21581
|
-
|
|
21582
|
-
|
|
21583
|
-
|
|
21584
|
-
|
|
21585
|
-
|
|
21586
|
-
|
|
21587
|
-
|
|
21588
|
-
|
|
21589
|
-
|
|
21590
|
-
|
|
21591
|
-
|
|
21592
|
-
|
|
21593
|
-
|
|
21594
|
-
|
|
21595
|
-
|
|
21596
|
-
|
|
21597
|
-
|
|
21598
|
-
|
|
21599
|
-
|
|
21600
|
-
}
|
|
21601
|
-
var
|
|
21602
|
-
|
|
21603
|
-
|
|
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";
|
|
21473
|
+
import { useLexicalComposerContext as useLexicalComposerContext4 } from "@lexical/react/LexicalComposerContext";
|
|
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";
|
|
21478
|
+
import {
|
|
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;
|
|
21604
21503
|
`;
|
|
21605
|
-
var
|
|
21606
|
-
|
|
21607
|
-
|
|
21608
|
-
|
|
21609
|
-
|
|
21610
|
-
|
|
21611
|
-
|
|
21612
|
-
|
|
21613
|
-
|
|
21614
|
-
|
|
21615
|
-
|
|
21616
|
-
|
|
21617
|
-
|
|
21618
|
-
|
|
21619
|
-
|
|
21620
|
-
|
|
21621
|
-
|
|
21622
|
-
|
|
21623
|
-
|
|
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 }) => {
|
|
21563
|
+
const [editor] = useLexicalComposerContext4();
|
|
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
|
+
});
|
|
21608
|
+
});
|
|
21624
21609
|
}
|
|
21625
|
-
|
|
21626
|
-
|
|
21627
|
-
|
|
21628
|
-
|
|
21629
|
-
|
|
21610
|
+
});
|
|
21611
|
+
});
|
|
21612
|
+
};
|
|
21613
|
+
const updateToolbar = useCallback11(() => {
|
|
21614
|
+
const selection = $getSelection3();
|
|
21615
|
+
if (!$isRangeSelection3(selection)) {
|
|
21616
|
+
return;
|
|
21630
21617
|
}
|
|
21631
|
-
|
|
21632
|
-
|
|
21633
|
-
|
|
21634
|
-
|
|
21635
|
-
tableCellNode: _tableCellNode,
|
|
21636
|
-
menuPortalEl,
|
|
21637
|
-
tableCellEl,
|
|
21638
|
-
positioningAnchorEl
|
|
21639
|
-
}) {
|
|
21640
|
-
const [editor] = useLexicalComposerContext5();
|
|
21641
|
-
const [tableCellNode, updateTableCellNode] = useState17(_tableCellNode);
|
|
21642
|
-
const [selectionCounts, updateSelectionCounts] = useState17({
|
|
21643
|
-
columns: 1,
|
|
21644
|
-
rows: 1
|
|
21645
|
-
});
|
|
21646
|
-
const [menuTriggerKey, setMenuTriggerKey] = useState17(0);
|
|
21647
|
-
const incrementMenuTriggerKey = () => {
|
|
21648
|
-
setMenuTriggerKey((key) => key += 1);
|
|
21649
|
-
};
|
|
21650
|
-
useEffect21(() => {
|
|
21651
|
-
return editor.registerMutationListener(
|
|
21652
|
-
TableCellNode,
|
|
21653
|
-
(nodeMutations) => {
|
|
21654
|
-
const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
|
|
21655
|
-
if (nodeUpdated) {
|
|
21656
|
-
editor.getEditorState().read(() => {
|
|
21657
|
-
updateTableCellNode(tableCellNode.getLatest());
|
|
21658
|
-
});
|
|
21659
|
-
}
|
|
21660
|
-
},
|
|
21661
|
-
{ skipInitialization: true }
|
|
21662
|
-
);
|
|
21663
|
-
}, [editor, tableCellNode]);
|
|
21664
|
-
useEffect21(() => {
|
|
21665
|
-
editor.getEditorState().read(() => {
|
|
21666
|
-
const selection = $getSelection3();
|
|
21667
|
-
if ($isTableSelection(selection)) {
|
|
21668
|
-
updateSelectionCounts(computeSelectionCount(selection));
|
|
21669
|
-
}
|
|
21670
|
-
});
|
|
21671
|
-
}, [editor]);
|
|
21672
|
-
const clearTableSelection = useCallback11(() => {
|
|
21673
|
-
editor.update(() => {
|
|
21674
|
-
if (tableCellNode.isAttached()) {
|
|
21675
|
-
const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
|
|
21676
|
-
const tableElement2 = editor.getElementByKey(
|
|
21677
|
-
tableNode.getKey()
|
|
21678
|
-
);
|
|
21679
|
-
if (!tableElement2) {
|
|
21680
|
-
throw new Error("Expected to find tableElement in DOM");
|
|
21681
|
-
}
|
|
21682
|
-
const tableSelection = getTableObserverFromTableElement(tableElement2);
|
|
21683
|
-
if (tableSelection !== null) {
|
|
21684
|
-
tableSelection.clearHighlight();
|
|
21685
|
-
}
|
|
21686
|
-
tableNode.markDirty();
|
|
21687
|
-
updateTableCellNode(tableCellNode.getLatest());
|
|
21618
|
+
const newActiveFormats = [];
|
|
21619
|
+
for (const format of richTextBuiltInFormats) {
|
|
21620
|
+
if (selection.hasFormat(format.type)) {
|
|
21621
|
+
newActiveFormats.push(format.type);
|
|
21688
21622
|
}
|
|
21689
|
-
|
|
21690
|
-
|
|
21691
|
-
|
|
21692
|
-
|
|
21693
|
-
|
|
21694
|
-
|
|
21695
|
-
editor.update(() => {
|
|
21696
|
-
$insertTableRow__EXPERIMENTAL(shouldInsertAfter);
|
|
21697
|
-
});
|
|
21698
|
-
incrementMenuTriggerKey();
|
|
21699
|
-
},
|
|
21700
|
-
[editor]
|
|
21701
|
-
);
|
|
21702
|
-
const insertTableColumnAtSelection = useCallback11(
|
|
21703
|
-
(shouldInsertAfter) => {
|
|
21704
|
-
editor.update(() => {
|
|
21705
|
-
for (let i = 0; i < selectionCounts.columns; i++) {
|
|
21706
|
-
$insertTableColumn__EXPERIMENTAL(shouldInsertAfter);
|
|
21707
|
-
}
|
|
21708
|
-
});
|
|
21709
|
-
incrementMenuTriggerKey();
|
|
21710
|
-
},
|
|
21711
|
-
[editor, selectionCounts.columns]
|
|
21712
|
-
);
|
|
21713
|
-
const deleteTableRowAtSelection = useCallback11(() => {
|
|
21714
|
-
editor.update(() => {
|
|
21715
|
-
$deleteTableRow__EXPERIMENTAL();
|
|
21716
|
-
});
|
|
21717
|
-
incrementMenuTriggerKey();
|
|
21718
|
-
}, [editor]);
|
|
21719
|
-
const deleteTableAtSelection = useCallback11(() => {
|
|
21720
|
-
editor.update(() => {
|
|
21721
|
-
const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
|
|
21722
|
-
tableNode.remove();
|
|
21723
|
-
clearTableSelection();
|
|
21724
|
-
});
|
|
21725
|
-
}, [editor, tableCellNode, clearTableSelection]);
|
|
21726
|
-
const deleteTableColumnAtSelection = useCallback11(() => {
|
|
21727
|
-
editor.update(() => {
|
|
21728
|
-
$deleteTableColumn__EXPERIMENTAL();
|
|
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);
|
|
21729
21629
|
});
|
|
21730
|
-
|
|
21731
|
-
|
|
21732
|
-
|
|
21733
|
-
|
|
21734
|
-
|
|
21735
|
-
|
|
21736
|
-
|
|
21737
|
-
|
|
21738
|
-
|
|
21739
|
-
|
|
21740
|
-
|
|
21741
|
-
|
|
21742
|
-
|
|
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);
|
|
21743
21643
|
}
|
|
21744
|
-
|
|
21745
|
-
|
|
21746
|
-
|
|
21747
|
-
|
|
21748
|
-
|
|
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
|
+
});
|
|
21749
21668
|
});
|
|
21750
|
-
clearTableSelection();
|
|
21751
21669
|
});
|
|
21752
|
-
}, [editor,
|
|
21753
|
-
|
|
21754
|
-
|
|
21755
|
-
|
|
21756
|
-
|
|
21757
|
-
|
|
21758
|
-
|
|
21759
|
-
|
|
21760
|
-
|
|
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
|
+
]
|
|
21761
21700
|
}
|
|
21762
|
-
|
|
21763
|
-
|
|
21764
|
-
|
|
21765
|
-
|
|
21766
|
-
|
|
21767
|
-
|
|
21768
|
-
|
|
21769
|
-
|
|
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) })
|
|
21770
21714
|
}
|
|
21771
|
-
|
|
21772
|
-
|
|
21773
|
-
|
|
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
|
+
))
|
|
21774
21732
|
}
|
|
21775
|
-
|
|
21776
|
-
|
|
21777
|
-
|
|
21778
|
-
|
|
21779
|
-
|
|
21780
|
-
const menuItemCss = css98({
|
|
21781
|
-
fontSize: "var(--fs-sm)"
|
|
21782
|
-
});
|
|
21783
|
-
return /* @__PURE__ */ jsxs86(
|
|
21784
|
-
Menu,
|
|
21785
|
-
{
|
|
21786
|
-
menuTrigger: /* @__PURE__ */ jsx130(
|
|
21787
|
-
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",
|
|
21788
21738
|
{
|
|
21789
|
-
|
|
21790
|
-
|
|
21791
|
-
|
|
21792
|
-
|
|
21793
|
-
|
|
21794
|
-
|
|
21795
|
-
|
|
21796
|
-
children: [
|
|
21797
|
-
/* @__PURE__ */
|
|
21798
|
-
|
|
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",
|
|
21799
21749
|
{
|
|
21800
21750
|
onClick: () => {
|
|
21801
|
-
|
|
21751
|
+
activeElement === "unorderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
|
|
21802
21752
|
},
|
|
21803
|
-
css:
|
|
21804
|
-
|
|
21805
|
-
"
|
|
21806
|
-
|
|
21807
|
-
|
|
21808
|
-
]
|
|
21753
|
+
css: [
|
|
21754
|
+
richTextToolbarButton,
|
|
21755
|
+
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
21756
|
+
],
|
|
21757
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "layout-list" })
|
|
21809
21758
|
}
|
|
21810
|
-
),
|
|
21811
|
-
/* @__PURE__ */
|
|
21812
|
-
"
|
|
21813
|
-
|
|
21814
|
-
|
|
21815
|
-
|
|
21816
|
-
|
|
21817
|
-
|
|
21818
|
-
|
|
21819
|
-
|
|
21820
|
-
|
|
21821
|
-
|
|
21822
|
-
|
|
21823
|
-
|
|
21824
|
-
|
|
21825
|
-
|
|
21826
|
-
|
|
21827
|
-
|
|
21828
|
-
|
|
21829
|
-
|
|
21830
|
-
/* @__PURE__ */
|
|
21831
|
-
|
|
21832
|
-
|
|
21833
|
-
(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "Remove" : "Add",
|
|
21834
|
-
" ",
|
|
21835
|
-
"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" })
|
|
21836
21782
|
] }),
|
|
21837
|
-
|
|
21838
|
-
|
|
21839
|
-
|
|
21840
|
-
|
|
21841
|
-
|
|
21842
|
-
|
|
21843
|
-
|
|
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
|
+
]
|
|
21816
|
+
}
|
|
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)
|
|
21844
21840
|
);
|
|
21845
|
-
|
|
21846
|
-
|
|
21847
|
-
|
|
21848
|
-
|
|
21849
|
-
|
|
21850
|
-
|
|
21851
|
-
|
|
21852
|
-
|
|
21853
|
-
|
|
21854
|
-
|
|
21855
|
-
|
|
21856
|
-
|
|
21857
|
-
|
|
21858
|
-
|
|
21859
|
-
|
|
21860
|
-
};
|
|
21861
|
-
|
|
21862
|
-
|
|
21863
|
-
|
|
21864
|
-
|
|
21865
|
-
|
|
21866
|
-
|
|
21867
|
-
|
|
21868
|
-
|
|
21869
|
-
|
|
21870
|
-
|
|
21871
|
-
|
|
21872
|
-
|
|
21873
|
-
if (selection == null) {
|
|
21874
|
-
setTableMenuCellNode(null);
|
|
21875
|
-
return;
|
|
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;
|
|
21876
21869
|
}
|
|
21877
|
-
|
|
21878
|
-
|
|
21879
|
-
|
|
21880
|
-
|
|
21881
|
-
setTableMenuCellNode(null);
|
|
21882
|
-
setTableMenuCellNodeElem(null);
|
|
21883
|
-
return;
|
|
21884
|
-
}
|
|
21885
|
-
const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
|
|
21886
|
-
if (tableCellParentNodeDOM == null) {
|
|
21887
|
-
setTableMenuCellNode(null);
|
|
21888
|
-
setTableMenuCellNodeElem(null);
|
|
21889
|
-
return;
|
|
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);
|
|
21890
21874
|
}
|
|
21891
|
-
|
|
21892
|
-
|
|
21893
|
-
|
|
21894
|
-
|
|
21895
|
-
|
|
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");
|
|
21896
21901
|
}
|
|
21897
|
-
|
|
21898
|
-
|
|
21899
|
-
|
|
21900
|
-
editor.getEditorState().read(() => {
|
|
21901
|
-
$moveMenu();
|
|
21902
|
+
if (visibleLists.size > 0) {
|
|
21903
|
+
visibleLists.forEach((type) => {
|
|
21904
|
+
visibleElements.add(type);
|
|
21902
21905
|
});
|
|
21903
|
-
}
|
|
21904
|
-
|
|
21905
|
-
|
|
21906
|
-
|
|
21907
|
-
|
|
21908
|
-
|
|
21909
|
-
|
|
21910
|
-
|
|
21911
|
-
|
|
21912
|
-
|
|
21913
|
-
|
|
21914
|
-
|
|
21915
|
-
|
|
21916
|
-
|
|
21917
|
-
|
|
21918
|
-
|
|
21919
|
-
|
|
21920
|
-
|
|
21921
|
-
|
|
21922
|
-
|
|
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
|
+
};
|
|
21923
21941
|
|
|
21924
|
-
// src/components/ParameterInputs/rich-text/
|
|
21942
|
+
// src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
|
|
21925
21943
|
import { css as css99 } from "@emotion/react";
|
|
21926
|
-
import { useLexicalComposerContext as
|
|
21927
|
-
import { useLexicalEditable
|
|
21944
|
+
import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
|
|
21945
|
+
import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
|
|
21928
21946
|
import {
|
|
21929
|
-
$
|
|
21930
|
-
$
|
|
21931
|
-
$
|
|
21932
|
-
$
|
|
21933
|
-
$
|
|
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
|
|
21934
21961
|
} from "@lexical/table";
|
|
21935
|
-
import {
|
|
21936
|
-
import {
|
|
21937
|
-
import {
|
|
21938
|
-
|
|
21939
|
-
|
|
21940
|
-
|
|
21941
|
-
|
|
21942
|
-
|
|
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`
|
|
21943
21973
|
position: absolute;
|
|
21944
|
-
|
|
21974
|
+
transform: translate(calc(-100% - 1px), 1px);
|
|
21945
21975
|
`;
|
|
21946
|
-
var
|
|
21947
|
-
|
|
21948
|
-
|
|
21949
|
-
|
|
21950
|
-
|
|
21951
|
-
|
|
21952
|
-
|
|
21953
|
-
|
|
21954
|
-
|
|
21955
|
-
|
|
21956
|
-
|
|
21957
|
-
|
|
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" })
|
|
21958
22001
|
}
|
|
21959
|
-
|
|
21960
|
-
|
|
21961
|
-
|
|
21962
|
-
|
|
21963
|
-
|
|
21964
|
-
|
|
21965
|
-
|
|
21966
|
-
|
|
21967
|
-
|
|
21968
|
-
const [
|
|
21969
|
-
const [
|
|
21970
|
-
const [
|
|
21971
|
-
|
|
21972
|
-
|
|
21973
|
-
|
|
21974
|
-
|
|
21975
|
-
|
|
21976
|
-
|
|
21977
|
-
tableRectRef.current = null;
|
|
21978
|
-
}, []);
|
|
21979
|
-
const isMouseDownOnEvent = (event) => {
|
|
21980
|
-
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);
|
|
21981
22020
|
};
|
|
21982
|
-
|
|
21983
|
-
|
|
21984
|
-
|
|
21985
|
-
|
|
21986
|
-
|
|
21987
|
-
|
|
21988
|
-
|
|
21989
|
-
|
|
22021
|
+
useEffect21(() => {
|
|
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());
|
|
21990
22029
|
});
|
|
21991
|
-
return;
|
|
21992
22030
|
}
|
|
21993
|
-
|
|
21994
|
-
|
|
21995
|
-
|
|
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");
|
|
21996
22052
|
}
|
|
21997
|
-
|
|
21998
|
-
|
|
21999
|
-
|
|
22000
|
-
if (cell2 && activeCell !== cell2) {
|
|
22001
|
-
editor.update(() => {
|
|
22002
|
-
const tableCellNode = $getNearestNodeFromDOMNode(cell2.elem);
|
|
22003
|
-
if (!tableCellNode) {
|
|
22004
|
-
throw new Error("TableCellResizer: Table cell node not found.");
|
|
22005
|
-
}
|
|
22006
|
-
const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
|
|
22007
|
-
const tableElement2 = editor.getElementByKey(tableNode.getKey());
|
|
22008
|
-
if (!tableElement2) {
|
|
22009
|
-
throw new Error("TableCellResizer: Table element not found.");
|
|
22010
|
-
}
|
|
22011
|
-
targetRef.current = target;
|
|
22012
|
-
tableRectRef.current = tableElement2.getBoundingClientRect();
|
|
22013
|
-
updateActiveCell(cell2);
|
|
22014
|
-
});
|
|
22015
|
-
} else if (cell2 == null) {
|
|
22016
|
-
resetState();
|
|
22017
|
-
}
|
|
22053
|
+
const tableSelection = getTableObserverFromTableElement(tableElement2);
|
|
22054
|
+
if (tableSelection !== null) {
|
|
22055
|
+
tableSelection.clearHighlight();
|
|
22018
22056
|
}
|
|
22019
|
-
|
|
22020
|
-
|
|
22021
|
-
const onMouseDown = () => {
|
|
22022
|
-
setTimeout(() => {
|
|
22023
|
-
updateIsMouseDown(true);
|
|
22024
|
-
}, 0);
|
|
22025
|
-
};
|
|
22026
|
-
const onMouseUp = () => {
|
|
22027
|
-
setTimeout(() => {
|
|
22028
|
-
updateIsMouseDown(false);
|
|
22029
|
-
}, 0);
|
|
22030
|
-
};
|
|
22031
|
-
const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
|
|
22032
|
-
rootElement == null ? void 0 : rootElement.addEventListener("mousemove", onMouseMove);
|
|
22033
|
-
rootElement == null ? void 0 : rootElement.addEventListener("mousedown", onMouseDown);
|
|
22034
|
-
rootElement == null ? void 0 : rootElement.addEventListener("mouseup", onMouseUp);
|
|
22035
|
-
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousemove", onMouseMove);
|
|
22036
|
-
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mousedown", onMouseDown);
|
|
22037
|
-
prevRootElement == null ? void 0 : prevRootElement.removeEventListener("mouseup", onMouseUp);
|
|
22038
|
-
});
|
|
22039
|
-
return () => {
|
|
22040
|
-
removeRootListener();
|
|
22041
|
-
};
|
|
22042
|
-
}, [activeCell, draggingDirection, editor, resetState]);
|
|
22043
|
-
const isHeightChanging = (direction) => {
|
|
22044
|
-
if (direction === "bottom") {
|
|
22045
|
-
return true;
|
|
22046
|
-
}
|
|
22047
|
-
return false;
|
|
22048
|
-
};
|
|
22049
|
-
const updateRowHeight = useCallback12(
|
|
22050
|
-
(heightChange) => {
|
|
22051
|
-
if (!activeCell) {
|
|
22052
|
-
throw new Error("TableCellResizer: Expected active cell.");
|
|
22057
|
+
tableNode.markDirty();
|
|
22058
|
+
updateTableCellNode(tableCellNode.getLatest());
|
|
22053
22059
|
}
|
|
22054
|
-
|
|
22055
|
-
|
|
22056
|
-
|
|
22057
|
-
|
|
22058
|
-
|
|
22059
|
-
|
|
22060
|
-
|
|
22061
|
-
|
|
22062
|
-
|
|
22063
|
-
|
|
22064
|
-
throw new Error("Expected table cell to be inside of table row.");
|
|
22065
|
-
}
|
|
22066
|
-
const tableRow2 = tableRows[tableRowIndex];
|
|
22067
|
-
if (!$isTableRowNode2(tableRow2)) {
|
|
22068
|
-
throw new Error("Expected table row");
|
|
22069
|
-
}
|
|
22070
|
-
let height = tableRow2.getHeight();
|
|
22071
|
-
if (height === void 0) {
|
|
22072
|
-
const rowCells = tableRow2.getChildren();
|
|
22073
|
-
height = Math.min(...rowCells.map((cell2) => {
|
|
22074
|
-
var _a;
|
|
22075
|
-
return (_a = getCellNodeHeight(cell2, editor)) != null ? _a : Infinity;
|
|
22076
|
-
}));
|
|
22077
|
-
}
|
|
22078
|
-
const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
|
|
22079
|
-
tableRow2.setHeight(newHeight);
|
|
22080
|
-
},
|
|
22081
|
-
{ tag: "skip-scroll-into-view" }
|
|
22082
|
-
);
|
|
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();
|
|
22083
22070
|
},
|
|
22084
|
-
[
|
|
22071
|
+
[editor]
|
|
22085
22072
|
);
|
|
22086
|
-
const
|
|
22087
|
-
|
|
22088
|
-
|
|
22089
|
-
|
|
22090
|
-
|
|
22091
|
-
const domCellNode = activeEditor.getElementByKey(cell2.getKey());
|
|
22092
|
-
if (domCellNode == null) {
|
|
22093
|
-
return void 0;
|
|
22094
|
-
}
|
|
22095
|
-
const computedStyle = getComputedStyle(domCellNode);
|
|
22096
|
-
return domCellNode.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
|
|
22097
|
-
};
|
|
22098
|
-
const getCellNodeHeight = (cell2, activeEditor) => {
|
|
22099
|
-
const domCellNode = activeEditor.getElementByKey(cell2.getKey());
|
|
22100
|
-
return domCellNode == null ? void 0 : domCellNode.clientHeight;
|
|
22101
|
-
};
|
|
22102
|
-
const getCellColumnIndex = (tableCellNode, tableMap) => {
|
|
22103
|
-
for (let row = 0; row < tableMap.length; row++) {
|
|
22104
|
-
for (let column = 0; column < tableMap[row].length; column++) {
|
|
22105
|
-
if (tableMap[row][column].cell === tableCellNode) {
|
|
22106
|
-
return column;
|
|
22073
|
+
const insertTableColumnAtSelection = useCallback12(
|
|
22074
|
+
(shouldInsertAfter) => {
|
|
22075
|
+
editor.update(() => {
|
|
22076
|
+
for (let i = 0; i < selectionCounts.columns; i++) {
|
|
22077
|
+
$insertTableColumn__EXPERIMENTAL(shouldInsertAfter);
|
|
22107
22078
|
}
|
|
22108
|
-
}
|
|
22109
|
-
|
|
22110
|
-
};
|
|
22111
|
-
const updateColumnWidth = useCallback12(
|
|
22112
|
-
(widthChange) => {
|
|
22113
|
-
if (!activeCell) {
|
|
22114
|
-
throw new Error("TableCellResizer: Expected active cell.");
|
|
22115
|
-
}
|
|
22116
|
-
editor.update(
|
|
22117
|
-
() => {
|
|
22118
|
-
const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
|
|
22119
|
-
if (!$isTableCellNode2(tableCellNode)) {
|
|
22120
|
-
throw new Error("TableCellResizer: Table cell node not found.");
|
|
22121
|
-
}
|
|
22122
|
-
const tableNode = $getTableNodeFromLexicalNodeOrThrow2(tableCellNode);
|
|
22123
|
-
const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
|
|
22124
|
-
const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
|
|
22125
|
-
if (columnIndex === void 0) {
|
|
22126
|
-
throw new Error("TableCellResizer: Table column not found.");
|
|
22127
|
-
}
|
|
22128
|
-
for (let row = 0; row < tableMap.length; row++) {
|
|
22129
|
-
const cell2 = tableMap[row][columnIndex];
|
|
22130
|
-
if (cell2.startRow === row && (columnIndex === tableMap[row].length - 1 || tableMap[row][columnIndex].cell !== tableMap[row][columnIndex + 1].cell)) {
|
|
22131
|
-
const width = getCellNodeWidth(cell2.cell, editor);
|
|
22132
|
-
if (width === void 0) {
|
|
22133
|
-
continue;
|
|
22134
|
-
}
|
|
22135
|
-
const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
|
|
22136
|
-
cell2.cell.setWidth(newWidth);
|
|
22137
|
-
}
|
|
22138
|
-
}
|
|
22139
|
-
},
|
|
22140
|
-
{ tag: "skip-scroll-into-view" }
|
|
22141
|
-
);
|
|
22079
|
+
});
|
|
22080
|
+
incrementMenuTriggerKey();
|
|
22142
22081
|
},
|
|
22143
|
-
[
|
|
22082
|
+
[editor, selectionCounts.columns]
|
|
22144
22083
|
);
|
|
22145
|
-
const
|
|
22146
|
-
(
|
|
22147
|
-
|
|
22148
|
-
|
|
22149
|
-
|
|
22150
|
-
|
|
22151
|
-
|
|
22152
|
-
|
|
22153
|
-
|
|
22154
|
-
|
|
22155
|
-
|
|
22156
|
-
|
|
22157
|
-
|
|
22158
|
-
|
|
22159
|
-
|
|
22160
|
-
|
|
22161
|
-
|
|
22162
|
-
|
|
22163
|
-
|
|
22164
|
-
|
|
22165
|
-
|
|
22166
|
-
|
|
22167
|
-
|
|
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");
|
|
22168
22118
|
}
|
|
22169
|
-
|
|
22170
|
-
|
|
22171
|
-
|
|
22172
|
-
|
|
22173
|
-
);
|
|
22174
|
-
const
|
|
22175
|
-
(
|
|
22176
|
-
|
|
22177
|
-
|
|
22178
|
-
|
|
22179
|
-
|
|
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.");
|
|
22180
22132
|
}
|
|
22181
|
-
|
|
22182
|
-
|
|
22183
|
-
|
|
22184
|
-
|
|
22185
|
-
updateMouseCurrentPos(mouseStartPosRef.current);
|
|
22186
|
-
updateDraggingDirection(direction);
|
|
22187
|
-
document.addEventListener("mouseup", mouseUpHandler(direction));
|
|
22188
|
-
},
|
|
22189
|
-
[activeCell, mouseUpHandler]
|
|
22190
|
-
);
|
|
22191
|
-
const getResizers = useCallback12(() => {
|
|
22192
|
-
if (activeCell) {
|
|
22193
|
-
const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
|
|
22194
|
-
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
22195
|
-
const zoom = calculateZoomLevel(activeCell.elem);
|
|
22196
|
-
const zoneWidth = 10;
|
|
22197
|
-
const styles = {
|
|
22198
|
-
bottom: {
|
|
22199
|
-
backgroundColor: "none",
|
|
22200
|
-
cursor: "row-resize",
|
|
22201
|
-
height: `${zoneWidth}px`,
|
|
22202
|
-
left: `${left - parentRect.left}px`,
|
|
22203
|
-
top: `${top - parentRect.top + positioningAnchorEl.scrollTop + height - zoneWidth / 2}px`,
|
|
22204
|
-
width: `${width}px`
|
|
22205
|
-
},
|
|
22206
|
-
right: {
|
|
22207
|
-
backgroundColor: "none",
|
|
22208
|
-
cursor: "col-resize",
|
|
22209
|
-
height: `${height}px`,
|
|
22210
|
-
left: `${left - parentRect.left + width - zoneWidth / 2}px`,
|
|
22211
|
-
top: `${top - parentRect.top + positioningAnchorEl.scrollTop}px`,
|
|
22212
|
-
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");
|
|
22213
22137
|
}
|
|
22214
|
-
|
|
22215
|
-
|
|
22216
|
-
|
|
22217
|
-
if (isHeightChanging(draggingDirection)) {
|
|
22218
|
-
styles[draggingDirection].left = `${tableRect.left - parentRect.left}px`;
|
|
22219
|
-
styles[draggingDirection].top = `${(mouseCurrentPos.y - parentRect.top + positioningAnchorEl.scrollTop) / zoom}px`;
|
|
22220
|
-
styles[draggingDirection].height = "3px";
|
|
22221
|
-
styles[draggingDirection].width = `${tableRect.width}px`;
|
|
22222
|
-
} else {
|
|
22223
|
-
styles[draggingDirection].top = `${tableRect.top - parentRect.top + positioningAnchorEl.scrollTop}px`;
|
|
22224
|
-
styles[draggingDirection].left = `${(mouseCurrentPos.x - parentRect.left) / zoom}px`;
|
|
22225
|
-
styles[draggingDirection].width = "3px";
|
|
22226
|
-
styles[draggingDirection].height = `${tableRect.height}px`;
|
|
22138
|
+
const tableCells = tableRow2.getChildren();
|
|
22139
|
+
if (tableColumnIndex >= tableCells.length) {
|
|
22140
|
+
continue;
|
|
22227
22141
|
}
|
|
22228
|
-
|
|
22142
|
+
const tableCell = tableCells[tableColumnIndex];
|
|
22143
|
+
if (!$isTableCellNode(tableCell)) {
|
|
22144
|
+
throw new Error("Expected table cell");
|
|
22145
|
+
}
|
|
22146
|
+
tableCell.toggleHeaderStyle(TableCellHeaderStates.COLUMN);
|
|
22229
22147
|
}
|
|
22230
|
-
|
|
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
|
+
]
|
|
22231
22214
|
}
|
|
22232
|
-
return {
|
|
22233
|
-
bottom: null,
|
|
22234
|
-
left: null,
|
|
22235
|
-
right: null,
|
|
22236
|
-
top: null
|
|
22237
|
-
};
|
|
22238
|
-
}, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
|
|
22239
|
-
const resizerStyles = getResizers();
|
|
22240
|
-
return /* @__PURE__ */ jsx131("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs87(Fragment19, { children: [
|
|
22241
|
-
/* @__PURE__ */ jsx131(
|
|
22242
|
-
"div",
|
|
22243
|
-
{
|
|
22244
|
-
css: tableResizer,
|
|
22245
|
-
style: resizerStyles.right || void 0,
|
|
22246
|
-
onMouseDown: toggleResize("right")
|
|
22247
|
-
}
|
|
22248
|
-
),
|
|
22249
|
-
/* @__PURE__ */ jsx131(
|
|
22250
|
-
"div",
|
|
22251
|
-
{
|
|
22252
|
-
css: tableResizer,
|
|
22253
|
-
style: resizerStyles.bottom || void 0,
|
|
22254
|
-
onMouseDown: toggleResize("bottom")
|
|
22255
|
-
}
|
|
22256
|
-
)
|
|
22257
|
-
] }) });
|
|
22258
|
-
}
|
|
22259
|
-
function TableCellResizerPlugin({ positioningAnchorEl }) {
|
|
22260
|
-
const [editor] = useLexicalComposerContext6();
|
|
22261
|
-
const isEditable = useLexicalEditable2();
|
|
22262
|
-
return useMemo6(
|
|
22263
|
-
() => isEditable ? createPortal3(
|
|
22264
|
-
/* @__PURE__ */ jsx131(TableCellResizer, { editor, positioningAnchorEl }),
|
|
22265
|
-
positioningAnchorEl
|
|
22266
|
-
) : null,
|
|
22267
|
-
[editor, isEditable, positioningAnchorEl]
|
|
22268
22215
|
);
|
|
22269
22216
|
}
|
|
22270
|
-
|
|
22271
|
-
|
|
22272
|
-
|
|
22273
|
-
|
|
22274
|
-
|
|
22275
|
-
|
|
22276
|
-
|
|
22277
|
-
|
|
22278
|
-
|
|
22279
|
-
|
|
22280
|
-
|
|
22281
|
-
|
|
22282
|
-
|
|
22283
|
-
|
|
22284
|
-
const [closestTableCellNode, setClosestTableCellNode] = useState19(null);
|
|
22285
|
-
useEffect23(() => {
|
|
22286
|
-
return editor.registerCommand(
|
|
22287
|
-
SELECTION_CHANGE_COMMAND2,
|
|
22288
|
-
() => {
|
|
22289
|
-
editor.read(() => {
|
|
22290
|
-
const selection = $getSelection4();
|
|
22291
|
-
if (!$isRangeSelection4(selection) || !selection.isCollapsed()) {
|
|
22292
|
-
setClosestTableCellNode(null);
|
|
22293
|
-
return false;
|
|
22294
|
-
}
|
|
22295
|
-
const tableCellNode = $findCellNode(selection.anchor.getNode());
|
|
22296
|
-
if (tableCellNode === null) {
|
|
22297
|
-
setClosestTableCellNode(null);
|
|
22298
|
-
return false;
|
|
22299
|
-
}
|
|
22300
|
-
setClosestTableCellNode(tableCellNode);
|
|
22301
|
-
});
|
|
22302
|
-
return false;
|
|
22303
|
-
},
|
|
22304
|
-
COMMAND_PRIORITY_NORMAL2
|
|
22305
|
-
);
|
|
22306
|
-
}, [editor]);
|
|
22307
|
-
useEffect23(() => {
|
|
22308
|
-
const onControlA = (event) => {
|
|
22309
|
-
if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
|
|
22310
|
-
if (!closestTableCellNode) {
|
|
22311
|
-
return;
|
|
22312
|
-
}
|
|
22313
|
-
event.preventDefault();
|
|
22314
|
-
editor.update(() => {
|
|
22315
|
-
const selection = closestTableCellNode.select(0, closestTableCellNode.getChildrenSize());
|
|
22316
|
-
$setSelection(selection);
|
|
22317
|
-
});
|
|
22318
|
-
}
|
|
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();
|
|
22319
22231
|
};
|
|
22320
|
-
|
|
22321
|
-
|
|
22322
|
-
|
|
22323
|
-
|
|
22324
|
-
|
|
22325
|
-
|
|
22326
|
-
};
|
|
22327
|
-
var TableSelectionPlugin_default = TableSelectionPlugin;
|
|
22328
|
-
|
|
22329
|
-
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
22330
|
-
import { css as css100 } from "@emotion/react";
|
|
22331
|
-
import { $createCodeNode } from "@lexical/code";
|
|
22332
|
-
import {
|
|
22333
|
-
$isListNode as $isListNode2,
|
|
22334
|
-
INSERT_ORDERED_LIST_COMMAND,
|
|
22335
|
-
INSERT_UNORDERED_LIST_COMMAND,
|
|
22336
|
-
ListNode as ListNode2,
|
|
22337
|
-
REMOVE_LIST_COMMAND
|
|
22338
|
-
} from "@lexical/list";
|
|
22339
|
-
import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
|
|
22340
|
-
import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
|
|
22341
|
-
import { $setBlocksType } from "@lexical/selection";
|
|
22342
|
-
import { $createTableNodeWithDimensions } from "@lexical/table";
|
|
22343
|
-
import { $findMatchingParent, $getNearestNodeOfType as $getNearestNodeOfType2 } from "@lexical/utils";
|
|
22344
|
-
import {
|
|
22345
|
-
$createParagraphNode as $createParagraphNode2,
|
|
22346
|
-
$getSelection as $getSelection5,
|
|
22347
|
-
$insertNodes as $insertNodes2,
|
|
22348
|
-
$isRangeSelection as $isRangeSelection5,
|
|
22349
|
-
$isRootOrShadowRoot,
|
|
22350
|
-
COMMAND_PRIORITY_CRITICAL as COMMAND_PRIORITY_CRITICAL2,
|
|
22351
|
-
FORMAT_TEXT_COMMAND,
|
|
22352
|
-
SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND3
|
|
22353
|
-
} from "lexical";
|
|
22354
|
-
import { useCallback as useCallback13, useEffect as useEffect24 } from "react";
|
|
22355
|
-
|
|
22356
|
-
// src/components/ParameterInputs/rich-text/toolbar/constants.ts
|
|
22357
|
-
var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
|
|
22358
|
-
["bold", "format-bold"],
|
|
22359
|
-
["italic", "format-italic"],
|
|
22360
|
-
["underline", "format-underline"],
|
|
22361
|
-
["strikethrough", "format-strike"],
|
|
22362
|
-
["code", "format-code"],
|
|
22363
|
-
["superscript", "format-superscript"],
|
|
22364
|
-
["subscript", "format-subscript"]
|
|
22365
|
-
]);
|
|
22366
|
-
var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
|
|
22367
|
-
var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
|
|
22368
|
-
|
|
22369
|
-
// src/components/ParameterInputs/rich-text/toolbar/useRichTextToolbarState.ts
|
|
22370
|
-
import { useMemo as useMemo7, useState as useState20 } from "react";
|
|
22371
|
-
var useRichTextToolbarState = ({ config }) => {
|
|
22372
|
-
var _a;
|
|
22373
|
-
const enabledBuiltInFormats = useMemo7(() => {
|
|
22374
|
-
return richTextBuiltInFormats.filter((format) => {
|
|
22375
|
-
var _a2, _b;
|
|
22376
|
-
return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
|
|
22377
|
-
});
|
|
22378
|
-
}, [config]);
|
|
22379
|
-
const enabledBuiltInElements = useMemo7(() => {
|
|
22380
|
-
return richTextBuiltInElements.filter((element) => {
|
|
22381
|
-
var _a2, _b;
|
|
22382
|
-
return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
|
|
22383
|
-
});
|
|
22384
|
-
}, [config]);
|
|
22385
|
-
const enabledBuiltInFormatsWithIcon = useMemo7(() => {
|
|
22386
|
-
return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
|
|
22387
|
-
}, [enabledBuiltInFormats]);
|
|
22388
|
-
const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
|
|
22389
|
-
(format) => !FORMATS_WITH_ICON.has(format.type)
|
|
22390
|
-
);
|
|
22391
|
-
const [activeFormats, setActiveFormats] = useState20([]);
|
|
22392
|
-
const visibleFormatsWithIcon = useMemo7(() => {
|
|
22393
|
-
const visibleFormats = /* @__PURE__ */ new Set();
|
|
22394
|
-
activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
22395
|
-
visibleFormats.add(type);
|
|
22396
|
-
});
|
|
22397
|
-
enabledBuiltInFormatsWithIcon.forEach((format) => {
|
|
22398
|
-
visibleFormats.add(format.type);
|
|
22399
|
-
});
|
|
22400
|
-
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
22401
|
-
}, [activeFormats, enabledBuiltInFormatsWithIcon]);
|
|
22402
|
-
const visibleFormatsWithoutIcon = useMemo7(() => {
|
|
22403
|
-
const visibleFormats = /* @__PURE__ */ new Set();
|
|
22404
|
-
activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
22405
|
-
visibleFormats.add(type);
|
|
22406
|
-
});
|
|
22407
|
-
enabledBuiltInFormatsWithoutIcon.forEach((format) => {
|
|
22408
|
-
visibleFormats.add(format.type);
|
|
22409
|
-
});
|
|
22410
|
-
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
22411
|
-
}, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
|
|
22412
|
-
const [activeElement, setActiveElement] = useState20("paragraph");
|
|
22413
|
-
const enabledTextualElements = enabledBuiltInElements.filter(
|
|
22414
|
-
(element) => TEXTUAL_ELEMENTS.includes(element.type)
|
|
22415
|
-
);
|
|
22416
|
-
const visibleTextualElements = useMemo7(() => {
|
|
22417
|
-
if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
|
|
22418
|
-
return enabledTextualElements;
|
|
22232
|
+
}, [menuPortalEl]);
|
|
22233
|
+
const setTableMenuCellNodeElem = useCallback12((elem) => {
|
|
22234
|
+
if (elem) {
|
|
22235
|
+
_setTableMenuCellNodeEl(elem);
|
|
22236
|
+
} else {
|
|
22237
|
+
_setTableMenuCellNodeEl(null);
|
|
22419
22238
|
}
|
|
22420
|
-
|
|
22421
|
-
|
|
22422
|
-
|
|
22423
|
-
|
|
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;
|
|
22424
22255
|
}
|
|
22425
|
-
|
|
22426
|
-
|
|
22427
|
-
|
|
22428
|
-
|
|
22429
|
-
|
|
22430
|
-
|
|
22431
|
-
|
|
22432
|
-
|
|
22433
|
-
|
|
22434
|
-
|
|
22435
|
-
)
|
|
22436
|
-
);
|
|
22437
|
-
}, [activeElement, enabledBuiltInElements]);
|
|
22438
|
-
const quoteElementVisible = useMemo7(() => {
|
|
22439
|
-
return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
|
|
22440
|
-
}, [activeElement, enabledBuiltInElements]);
|
|
22441
|
-
const codeElementVisible = useMemo7(() => {
|
|
22442
|
-
return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
|
|
22443
|
-
}, [activeElement, enabledBuiltInElements]);
|
|
22444
|
-
const tableElementVisible = useMemo7(() => {
|
|
22445
|
-
return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
|
|
22446
|
-
}, [activeElement, enabledBuiltInElements]);
|
|
22447
|
-
const assetElementVisible = useMemo7(() => {
|
|
22448
|
-
return enabledBuiltInElements.some((element) => element.type === "asset") || activeElement === "asset";
|
|
22449
|
-
}, [activeElement, enabledBuiltInElements]);
|
|
22450
|
-
const visibleElementsWithIcons = useMemo7(() => {
|
|
22451
|
-
const visibleElements = /* @__PURE__ */ new Set();
|
|
22452
|
-
if (linkElementVisible) {
|
|
22453
|
-
visibleElements.add("link");
|
|
22256
|
+
const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
|
|
22257
|
+
if (tableCellParentNodeDOM == null) {
|
|
22258
|
+
setTableMenuCellNode(null);
|
|
22259
|
+
setTableMenuCellNodeElem(null);
|
|
22260
|
+
return;
|
|
22261
|
+
}
|
|
22262
|
+
setTableMenuCellNode(tableCellNodeFromSelection);
|
|
22263
|
+
setTableMenuCellNodeElem(tableCellParentNodeDOM);
|
|
22264
|
+
} else if (!activeElement) {
|
|
22265
|
+
setTableMenuCellNode(null);
|
|
22266
|
+
setTableMenuCellNodeElem(null);
|
|
22454
22267
|
}
|
|
22455
|
-
|
|
22456
|
-
|
|
22457
|
-
|
|
22268
|
+
}, [editor, setTableMenuCellNodeElem]);
|
|
22269
|
+
useEffect21(() => {
|
|
22270
|
+
return editor.registerUpdateListener(() => {
|
|
22271
|
+
editor.getEditorState().read(() => {
|
|
22272
|
+
$moveMenu();
|
|
22458
22273
|
});
|
|
22459
|
-
}
|
|
22460
|
-
|
|
22461
|
-
|
|
22462
|
-
|
|
22463
|
-
|
|
22464
|
-
|
|
22465
|
-
|
|
22466
|
-
|
|
22467
|
-
|
|
22468
|
-
|
|
22469
|
-
|
|
22470
|
-
|
|
22471
|
-
|
|
22472
|
-
|
|
22473
|
-
|
|
22474
|
-
|
|
22475
|
-
|
|
22476
|
-
|
|
22477
|
-
|
|
22478
|
-
|
|
22479
|
-
activeFormats,
|
|
22480
|
-
setActiveFormats,
|
|
22481
|
-
activeElement,
|
|
22482
|
-
setActiveElement,
|
|
22483
|
-
visibleFormatsWithIcon,
|
|
22484
|
-
visibleFormatsWithoutIcon,
|
|
22485
|
-
visibleTextualElements,
|
|
22486
|
-
isLink,
|
|
22487
|
-
setIsLink,
|
|
22488
|
-
linkElementVisible,
|
|
22489
|
-
visibleLists,
|
|
22490
|
-
quoteElementVisible,
|
|
22491
|
-
codeElementVisible,
|
|
22492
|
-
tableElementVisible,
|
|
22493
|
-
assetElementVisible,
|
|
22494
|
-
visibleElementsWithIcons,
|
|
22495
|
-
visibleInsertElementsWithIcons
|
|
22496
|
-
};
|
|
22497
|
-
};
|
|
22274
|
+
});
|
|
22275
|
+
});
|
|
22276
|
+
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ jsx131(
|
|
22277
|
+
TableActionMenu,
|
|
22278
|
+
{
|
|
22279
|
+
tableCellNode,
|
|
22280
|
+
menuPortalEl: tableCellMenuPortalEl,
|
|
22281
|
+
tableCellEl: tableCellNodeEl,
|
|
22282
|
+
positioningAnchorEl
|
|
22283
|
+
},
|
|
22284
|
+
tableCellNode.getKey()
|
|
22285
|
+
);
|
|
22286
|
+
}
|
|
22287
|
+
function TableActionMenuPlugin({
|
|
22288
|
+
positioningAnchorEl,
|
|
22289
|
+
menuPortalEl
|
|
22290
|
+
}) {
|
|
22291
|
+
const isEditable = useLexicalEditable();
|
|
22292
|
+
return isEditable ? /* @__PURE__ */ jsx131(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
|
|
22293
|
+
}
|
|
22498
22294
|
|
|
22499
|
-
// src/components/ParameterInputs/rich-text/
|
|
22295
|
+
// src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
|
|
22296
|
+
import { css as css100 } from "@emotion/react";
|
|
22297
|
+
import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
|
|
22298
|
+
import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
|
|
22299
|
+
import {
|
|
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";
|
|
22500
22310
|
import { Fragment as Fragment20, jsx as jsx132, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
|
|
22501
|
-
var
|
|
22502
|
-
|
|
22503
|
-
|
|
22504
|
-
|
|
22505
|
-
|
|
22506
|
-
/* We add 1px because we use a 1px wide separator */
|
|
22507
|
-
gap: calc(var(--spacing-sm) + 1px);
|
|
22508
|
-
margin: 0 0 calc(var(--spacing-sm) + var(--spacing-xs)) 0;
|
|
22509
|
-
overflow: auto;
|
|
22510
|
-
padding: var(--spacing-sm);
|
|
22511
|
-
position: sticky;
|
|
22512
|
-
top: calc(var(--spacing-sm) * -2);
|
|
22513
|
-
z-index: 10;
|
|
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);
|
|
22514
22316
|
`;
|
|
22515
|
-
var
|
|
22516
|
-
|
|
22517
|
-
|
|
22518
|
-
|
|
22519
|
-
|
|
22520
|
-
|
|
22521
|
-
|
|
22522
|
-
|
|
22523
|
-
|
|
22524
|
-
|
|
22525
|
-
|
|
22526
|
-
|
|
22527
|
-
|
|
22528
|
-
|
|
22529
|
-
width: 1px;
|
|
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;
|
|
22530
22331
|
}
|
|
22531
|
-
|
|
22532
|
-
var richTextToolbarButton = css100`
|
|
22533
|
-
align-items: center;
|
|
22534
|
-
appearance: none;
|
|
22535
|
-
border: 0;
|
|
22536
|
-
border-radius: var(--rounded-sm);
|
|
22537
|
-
box-shadow: none;
|
|
22538
|
-
color: var(--gray-900);
|
|
22539
|
-
display: flex;
|
|
22540
|
-
flex-shrink: 0;
|
|
22541
|
-
height: 32px;
|
|
22542
|
-
justify-content: center;
|
|
22543
|
-
min-width: 32px;
|
|
22544
|
-
padding: 0 var(--spacing-sm);
|
|
22545
|
-
`;
|
|
22546
|
-
var richTextToolbarButtonActive = css100`
|
|
22547
|
-
background: var(--gray-200);
|
|
22548
|
-
`;
|
|
22549
|
-
var textStyleButton = css100`
|
|
22550
|
-
justify-content: space-between;
|
|
22551
|
-
min-width: 7rem;
|
|
22552
|
-
`;
|
|
22553
|
-
var toolbarIcon = css100`
|
|
22554
|
-
color: inherit;
|
|
22555
|
-
`;
|
|
22556
|
-
var toolbarChevron = css100`
|
|
22557
|
-
margin-left: var(--spacing-xs);
|
|
22558
|
-
`;
|
|
22559
|
-
var RichTextToolbarIcon = ({ icon }) => {
|
|
22560
|
-
return /* @__PURE__ */ jsx132(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
22332
|
+
return null;
|
|
22561
22333
|
};
|
|
22562
|
-
|
|
22563
|
-
const
|
|
22564
|
-
const
|
|
22565
|
-
|
|
22566
|
-
|
|
22567
|
-
|
|
22568
|
-
|
|
22569
|
-
|
|
22570
|
-
|
|
22571
|
-
|
|
22572
|
-
|
|
22573
|
-
|
|
22574
|
-
|
|
22575
|
-
|
|
22576
|
-
|
|
22577
|
-
|
|
22578
|
-
|
|
22579
|
-
|
|
22580
|
-
|
|
22581
|
-
|
|
22582
|
-
|
|
22583
|
-
|
|
22584
|
-
|
|
22585
|
-
|
|
22586
|
-
|
|
22587
|
-
|
|
22588
|
-
|
|
22589
|
-
const selection = $getSelection5();
|
|
22590
|
-
if (HEADING_ELEMENTS.includes(type)) {
|
|
22591
|
-
$setBlocksType(selection, () => $createHeadingNode(type));
|
|
22592
|
-
} else if (type === "paragraph") {
|
|
22593
|
-
$setBlocksType(selection, () => $createParagraphNode2());
|
|
22594
|
-
} else if (type === "quote") {
|
|
22595
|
-
$setBlocksType(selection, () => $createQuoteNode());
|
|
22596
|
-
} else if (type === "code") {
|
|
22597
|
-
$setBlocksType(selection, () => $createCodeNode());
|
|
22598
|
-
} else if (type === "table" && onInsertTable) {
|
|
22599
|
-
onInsertTable().then((dimensions) => {
|
|
22600
|
-
if (!dimensions) {
|
|
22601
|
-
return;
|
|
22602
|
-
}
|
|
22603
|
-
const { rows, columns } = dimensions;
|
|
22604
|
-
editor.focus(() => {
|
|
22605
|
-
editor.update(() => {
|
|
22606
|
-
$insertNodes2([$createTableNodeWithDimensions(rows, columns, false)]);
|
|
22607
|
-
});
|
|
22608
|
-
});
|
|
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
|
+
};
|
|
22353
|
+
useEffect22(() => {
|
|
22354
|
+
const onMouseMove = (event) => {
|
|
22355
|
+
setTimeout(() => {
|
|
22356
|
+
const target = event.target;
|
|
22357
|
+
if (draggingDirection) {
|
|
22358
|
+
updateMouseCurrentPos({
|
|
22359
|
+
x: event.clientX,
|
|
22360
|
+
y: event.clientY
|
|
22609
22361
|
});
|
|
22610
|
-
|
|
22611
|
-
onInsertAsset();
|
|
22362
|
+
return;
|
|
22612
22363
|
}
|
|
22613
|
-
|
|
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);
|
|
22391
|
+
};
|
|
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);
|
|
22614
22409
|
});
|
|
22615
|
-
|
|
22616
|
-
|
|
22617
|
-
|
|
22618
|
-
|
|
22619
|
-
|
|
22410
|
+
return () => {
|
|
22411
|
+
removeRootListener();
|
|
22412
|
+
};
|
|
22413
|
+
}, [activeCell, draggingDirection, editor, resetState]);
|
|
22414
|
+
const isHeightChanging = (direction) => {
|
|
22415
|
+
if (direction === "bottom") {
|
|
22416
|
+
return true;
|
|
22620
22417
|
}
|
|
22621
|
-
|
|
22622
|
-
|
|
22623
|
-
|
|
22624
|
-
|
|
22418
|
+
return false;
|
|
22419
|
+
};
|
|
22420
|
+
const updateRowHeight = useCallback13(
|
|
22421
|
+
(heightChange) => {
|
|
22422
|
+
if (!activeCell) {
|
|
22423
|
+
throw new Error("TableCellResizer: Expected active cell.");
|
|
22625
22424
|
}
|
|
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;
|
|
22626
22461
|
}
|
|
22627
|
-
|
|
22628
|
-
|
|
22629
|
-
|
|
22630
|
-
const parent = e.getParent();
|
|
22631
|
-
return parent !== null && $isRootOrShadowRoot(parent);
|
|
22632
|
-
});
|
|
22633
|
-
if (element === null) {
|
|
22634
|
-
element = anchorNode.getTopLevelElementOrThrow();
|
|
22462
|
+
const domCellNode = activeEditor.getElementByKey(cell2.getKey());
|
|
22463
|
+
if (domCellNode == null) {
|
|
22464
|
+
return void 0;
|
|
22635
22465
|
}
|
|
22636
|
-
const
|
|
22637
|
-
|
|
22638
|
-
|
|
22639
|
-
|
|
22640
|
-
|
|
22641
|
-
|
|
22642
|
-
|
|
22643
|
-
|
|
22644
|
-
|
|
22645
|
-
|
|
22466
|
+
const computedStyle = getComputedStyle(domCellNode);
|
|
22467
|
+
return domCellNode.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
|
|
22468
|
+
};
|
|
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
|
+
}
|
|
22480
|
+
}
|
|
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);
|
|
22508
|
+
}
|
|
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.");
|
|
22523
|
+
}
|
|
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";
|
|
22646
22600
|
}
|
|
22601
|
+
return styles;
|
|
22647
22602
|
}
|
|
22648
|
-
|
|
22649
|
-
|
|
22650
|
-
|
|
22651
|
-
|
|
22652
|
-
|
|
22653
|
-
}
|
|
22654
|
-
}, [
|
|
22655
|
-
|
|
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")
|
|
22618
|
+
}
|
|
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);
|
|
22656
|
+
useEffect23(() => {
|
|
22656
22657
|
return editor.registerCommand(
|
|
22657
22658
|
SELECTION_CHANGE_COMMAND3,
|
|
22658
|
-
(
|
|
22659
|
-
|
|
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
|
+
});
|
|
22660
22673
|
return false;
|
|
22661
22674
|
},
|
|
22662
|
-
|
|
22675
|
+
COMMAND_PRIORITY_NORMAL2
|
|
22663
22676
|
);
|
|
22664
|
-
}, [editor
|
|
22665
|
-
|
|
22666
|
-
|
|
22667
|
-
|
|
22668
|
-
|
|
22669
|
-
|
|
22670
|
-
});
|
|
22671
|
-
});
|
|
22672
|
-
});
|
|
22673
|
-
}, [editor, updateToolbar]);
|
|
22674
|
-
return /* @__PURE__ */ jsxs88("div", { css: toolbar, children: [
|
|
22675
|
-
/* @__PURE__ */ jsxs88(
|
|
22676
|
-
Menu,
|
|
22677
|
-
{
|
|
22678
|
-
menuTrigger: /* @__PURE__ */ jsxs88("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", children: [
|
|
22679
|
-
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
22680
|
-
" ",
|
|
22681
|
-
/* @__PURE__ */ jsx132(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
22682
|
-
] }),
|
|
22683
|
-
placement: "bottom-start",
|
|
22684
|
-
children: [
|
|
22685
|
-
[
|
|
22686
|
-
{
|
|
22687
|
-
label: "Normal",
|
|
22688
|
-
type: "paragraph"
|
|
22689
|
-
},
|
|
22690
|
-
...visibleTextualElements
|
|
22691
|
-
].map((element) => /* @__PURE__ */ jsx132(
|
|
22692
|
-
MenuItem,
|
|
22693
|
-
{
|
|
22694
|
-
onClick: () => {
|
|
22695
|
-
onSelectElement(element.type);
|
|
22696
|
-
},
|
|
22697
|
-
children: element.label
|
|
22698
|
-
},
|
|
22699
|
-
element.type
|
|
22700
|
-
)),
|
|
22701
|
-
visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx132(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
|
|
22702
|
-
]
|
|
22703
|
-
}
|
|
22704
|
-
),
|
|
22705
|
-
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs88("div", { css: toolbarGroup, children: [
|
|
22706
|
-
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx132(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx132(
|
|
22707
|
-
"button",
|
|
22708
|
-
{
|
|
22709
|
-
onClick: () => {
|
|
22710
|
-
editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
|
|
22711
|
-
},
|
|
22712
|
-
css: [
|
|
22713
|
-
richTextToolbarButton,
|
|
22714
|
-
activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
|
|
22715
|
-
],
|
|
22716
|
-
children: /* @__PURE__ */ jsx132(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
|
|
22717
|
-
}
|
|
22718
|
-
) }, format.type)),
|
|
22719
|
-
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx132(
|
|
22720
|
-
Menu,
|
|
22721
|
-
{
|
|
22722
|
-
menuLabel: "Alternative text styles",
|
|
22723
|
-
menuTrigger: /* @__PURE__ */ jsx132("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx132(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
22724
|
-
placement: "bottom-start",
|
|
22725
|
-
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx132(
|
|
22726
|
-
MenuItem,
|
|
22727
|
-
{
|
|
22728
|
-
onClick: () => {
|
|
22729
|
-
editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
|
|
22730
|
-
},
|
|
22731
|
-
children: format.label
|
|
22732
|
-
},
|
|
22733
|
-
format.type
|
|
22734
|
-
))
|
|
22735
|
-
}
|
|
22736
|
-
) : null
|
|
22737
|
-
] }) : null,
|
|
22738
|
-
visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ jsxs88("div", { css: toolbarGroup, children: [
|
|
22739
|
-
linkElementVisible ? /* @__PURE__ */ jsx132(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx132(
|
|
22740
|
-
"button",
|
|
22741
|
-
{
|
|
22742
|
-
onClick: () => {
|
|
22743
|
-
isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
|
|
22744
|
-
},
|
|
22745
|
-
css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
|
|
22746
|
-
children: /* @__PURE__ */ jsx132(RichTextToolbarIcon, { icon: "link" })
|
|
22677
|
+
}, [editor]);
|
|
22678
|
+
useEffect23(() => {
|
|
22679
|
+
const onControlA = (event) => {
|
|
22680
|
+
if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
|
|
22681
|
+
if (!closestTableCellNode) {
|
|
22682
|
+
return;
|
|
22747
22683
|
}
|
|
22748
|
-
|
|
22749
|
-
|
|
22750
|
-
|
|
22751
|
-
|
|
22752
|
-
|
|
22753
|
-
onClick: () => {
|
|
22754
|
-
activeElement === "unorderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
|
|
22755
|
-
},
|
|
22756
|
-
css: [
|
|
22757
|
-
richTextToolbarButton,
|
|
22758
|
-
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
22759
|
-
],
|
|
22760
|
-
children: /* @__PURE__ */ jsx132(RichTextToolbarIcon, { icon: "layout-list" })
|
|
22761
|
-
}
|
|
22762
|
-
) }) : null,
|
|
22763
|
-
visibleLists.has("orderedList") ? /* @__PURE__ */ jsx132(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx132(
|
|
22764
|
-
"button",
|
|
22765
|
-
{
|
|
22766
|
-
onClick: () => {
|
|
22767
|
-
activeElement === "orderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
|
|
22768
|
-
},
|
|
22769
|
-
css: [
|
|
22770
|
-
richTextToolbarButton,
|
|
22771
|
-
activeElement === "orderedList" ? richTextToolbarButtonActive : null
|
|
22772
|
-
],
|
|
22773
|
-
children: /* @__PURE__ */ jsx132(RichTextToolbarIcon, { icon: "layout-list-numbered" })
|
|
22774
|
-
}
|
|
22775
|
-
) }) : null
|
|
22776
|
-
] }) : null,
|
|
22777
|
-
customControls ? customControls : null
|
|
22778
|
-
] }) : null,
|
|
22779
|
-
visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ jsx132("div", { css: toolbarGroup, children: /* @__PURE__ */ jsxs88(
|
|
22780
|
-
Menu,
|
|
22781
|
-
{
|
|
22782
|
-
menuTrigger: /* @__PURE__ */ jsxs88("button", { css: richTextToolbarButton, title: "Insert block element", children: [
|
|
22783
|
-
"Insert",
|
|
22784
|
-
/* @__PURE__ */ jsx132(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
22785
|
-
] }),
|
|
22786
|
-
placement: "bottom-start",
|
|
22787
|
-
children: [
|
|
22788
|
-
quoteElementVisible ? /* @__PURE__ */ jsx132(
|
|
22789
|
-
MenuItem,
|
|
22790
|
-
{
|
|
22791
|
-
onClick: () => {
|
|
22792
|
-
onSelectElement("quote");
|
|
22793
|
-
},
|
|
22794
|
-
icon: /* @__PURE__ */ jsx132(Icon, { icon: "quote", iconColor: "currentColor" }),
|
|
22795
|
-
children: "Quote"
|
|
22796
|
-
}
|
|
22797
|
-
) : null,
|
|
22798
|
-
codeElementVisible ? /* @__PURE__ */ jsx132(
|
|
22799
|
-
MenuItem,
|
|
22800
|
-
{
|
|
22801
|
-
onClick: () => {
|
|
22802
|
-
onSelectElement("code");
|
|
22803
|
-
},
|
|
22804
|
-
icon: /* @__PURE__ */ jsx132(Icon, { icon: "code-slash", iconColor: "currentColor" }),
|
|
22805
|
-
children: "Code"
|
|
22806
|
-
}
|
|
22807
|
-
) : null,
|
|
22808
|
-
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ jsx132(
|
|
22809
|
-
MenuItem,
|
|
22810
|
-
{
|
|
22811
|
-
onClick: () => {
|
|
22812
|
-
onSelectElement("table");
|
|
22813
|
-
},
|
|
22814
|
-
icon: /* @__PURE__ */ jsx132(Icon, { icon: "view-grid", iconColor: "currentColor" }),
|
|
22815
|
-
children: "Table"
|
|
22816
|
-
}
|
|
22817
|
-
) : null,
|
|
22818
|
-
assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ jsx132(
|
|
22819
|
-
MenuItem,
|
|
22820
|
-
{
|
|
22821
|
-
onClick: () => {
|
|
22822
|
-
onSelectElement("asset");
|
|
22823
|
-
},
|
|
22824
|
-
icon: /* @__PURE__ */ jsx132(Icon, { icon: "image", iconColor: "currentColor" }),
|
|
22825
|
-
children: "Asset"
|
|
22826
|
-
}
|
|
22827
|
-
) : null
|
|
22828
|
-
]
|
|
22684
|
+
event.preventDefault();
|
|
22685
|
+
editor.update(() => {
|
|
22686
|
+
const selection = closestTableCellNode.select(0, closestTableCellNode.getChildrenSize());
|
|
22687
|
+
$setSelection(selection);
|
|
22688
|
+
});
|
|
22829
22689
|
}
|
|
22830
|
-
|
|
22831
|
-
|
|
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;
|
|
22832
22697
|
};
|
|
22833
|
-
var
|
|
22698
|
+
var TableSelectionPlugin_default = TableSelectionPlugin;
|
|
22834
22699
|
|
|
22835
22700
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
22836
22701
|
import { Fragment as Fragment21, jsx as jsx133, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
|
|
@@ -22859,7 +22724,6 @@ var ParameterRichText = ({
|
|
|
22859
22724
|
variables,
|
|
22860
22725
|
customControls,
|
|
22861
22726
|
onInsertTable,
|
|
22862
|
-
onInsertAsset,
|
|
22863
22727
|
minimalInteractivity
|
|
22864
22728
|
}) => {
|
|
22865
22729
|
return /* @__PURE__ */ jsxs89(
|
|
@@ -22893,7 +22757,6 @@ var ParameterRichText = ({
|
|
|
22893
22757
|
variables,
|
|
22894
22758
|
customControls,
|
|
22895
22759
|
onInsertTable,
|
|
22896
|
-
onInsertAsset,
|
|
22897
22760
|
minimalInteractivity,
|
|
22898
22761
|
children
|
|
22899
22762
|
}
|
|
@@ -22936,7 +22799,7 @@ var editorContainer = css101`
|
|
|
22936
22799
|
font-size: var(--fs-base);
|
|
22937
22800
|
height: max-content;
|
|
22938
22801
|
line-height: 1.2;
|
|
22939
|
-
max-height:
|
|
22802
|
+
max-height: 300px;
|
|
22940
22803
|
min-height: 50px;
|
|
22941
22804
|
overflow-y: auto;
|
|
22942
22805
|
padding: var(--spacing-sm);
|
|
@@ -22977,7 +22840,6 @@ var editorPlaceholder = css101`
|
|
|
22977
22840
|
`;
|
|
22978
22841
|
var editorInput = css101`
|
|
22979
22842
|
min-height: 100%;
|
|
22980
|
-
flex-grow: 1;
|
|
22981
22843
|
|
|
22982
22844
|
&:focus,
|
|
22983
22845
|
&:focus-within {
|
|
@@ -23000,7 +22862,6 @@ var ParameterRichTextInner = ({
|
|
|
23000
22862
|
variables,
|
|
23001
22863
|
customControls,
|
|
23002
22864
|
onInsertTable,
|
|
23003
|
-
onInsertAsset,
|
|
23004
22865
|
minimalInteractivity
|
|
23005
22866
|
}) => {
|
|
23006
22867
|
const lexicalConfig = {
|
|
@@ -23073,7 +22934,6 @@ var ParameterRichTextInner = ({
|
|
|
23073
22934
|
variables,
|
|
23074
22935
|
customControls,
|
|
23075
22936
|
onInsertTable,
|
|
23076
|
-
onInsertAsset,
|
|
23077
22937
|
minimalInteractivity,
|
|
23078
22938
|
children
|
|
23079
22939
|
}
|
|
@@ -23102,16 +22962,15 @@ var RichText = ({
|
|
|
23102
22962
|
variables,
|
|
23103
22963
|
customControls,
|
|
23104
22964
|
onInsertTable,
|
|
23105
|
-
onInsertAsset,
|
|
23106
22965
|
minimalInteractivity
|
|
23107
22966
|
}) => {
|
|
23108
|
-
const [editor] =
|
|
23109
|
-
|
|
22967
|
+
const [editor] = useLexicalComposerContext8();
|
|
22968
|
+
useEffect24(() => {
|
|
23110
22969
|
if (onRichTextInit) {
|
|
23111
22970
|
onRichTextInit(editor);
|
|
23112
22971
|
}
|
|
23113
22972
|
}, [editor, onRichTextInit]);
|
|
23114
|
-
|
|
22973
|
+
useEffect24(() => {
|
|
23115
22974
|
const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
|
|
23116
22975
|
requestAnimationFrame(() => {
|
|
23117
22976
|
if (!deepEqual2(editorState.toJSON(), prevEditorState.toJSON())) {
|
|
@@ -23123,7 +22982,7 @@ var RichText = ({
|
|
|
23123
22982
|
removeUpdateListener();
|
|
23124
22983
|
};
|
|
23125
22984
|
}, [editor, onChange]);
|
|
23126
|
-
|
|
22985
|
+
useEffect24(() => {
|
|
23127
22986
|
editor.setEditable(!readOnly);
|
|
23128
22987
|
}, [editor, readOnly]);
|
|
23129
22988
|
const [editorContainerRef, setEditorContainerRef] = useState21(null);
|
|
@@ -23139,15 +22998,7 @@ var RichText = ({
|
|
|
23139
22998
|
}
|
|
23140
22999
|
};
|
|
23141
23000
|
return /* @__PURE__ */ jsxs89(Fragment21, { children: [
|
|
23142
|
-
readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx133(
|
|
23143
|
-
RichTextToolbar_default,
|
|
23144
|
-
{
|
|
23145
|
-
config,
|
|
23146
|
-
customControls,
|
|
23147
|
-
onInsertTable,
|
|
23148
|
-
onInsertAsset
|
|
23149
|
-
}
|
|
23150
|
-
),
|
|
23001
|
+
readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx133(RichTextToolbar_default, { config, customControls, onInsertTable }),
|
|
23151
23002
|
/* @__PURE__ */ jsxs89("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
|
|
23152
23003
|
/* @__PURE__ */ jsxs89(
|
|
23153
23004
|
"div",
|
|
@@ -23194,8 +23045,7 @@ var RichText = ({
|
|
|
23194
23045
|
positioningAnchorEl: editorContainerRef
|
|
23195
23046
|
}
|
|
23196
23047
|
) : null,
|
|
23197
|
-
/* @__PURE__ */ jsx133(TableSelectionPlugin_default, {})
|
|
23198
|
-
/* @__PURE__ */ jsx133(ImprovedAssetSelectionPlugin_default, {})
|
|
23048
|
+
/* @__PURE__ */ jsx133(TableSelectionPlugin_default, {})
|
|
23199
23049
|
] })
|
|
23200
23050
|
] });
|
|
23201
23051
|
};
|
|
@@ -23472,7 +23322,7 @@ var ProgressListItem = ({
|
|
|
23472
23322
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
23473
23323
|
import { css as css106 } from "@emotion/react";
|
|
23474
23324
|
import { CgCheck as CgCheck5 } from "@react-icons/all-files/cg/CgCheck";
|
|
23475
|
-
import { useCallback as useCallback14, useEffect as
|
|
23325
|
+
import { useCallback as useCallback14, useEffect as useEffect25, useMemo as useMemo9, useRef as useRef14, useState as useState22 } from "react";
|
|
23476
23326
|
|
|
23477
23327
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
23478
23328
|
import { css as css105 } from "@emotion/react";
|
|
@@ -23686,7 +23536,7 @@ var SegmentedControl = ({
|
|
|
23686
23536
|
const isIconOnly = useMemo9(() => {
|
|
23687
23537
|
return options.every((option) => option && option.icon && !option.label);
|
|
23688
23538
|
}, [options]);
|
|
23689
|
-
|
|
23539
|
+
useEffect25(() => {
|
|
23690
23540
|
const wrapperElement = wrapperRef.current;
|
|
23691
23541
|
const onScroll = () => {
|
|
23692
23542
|
if (!wrapperElement) {
|
|
@@ -24014,7 +23864,7 @@ import {
|
|
|
24014
23864
|
TabProvider as AriakitTabProvider,
|
|
24015
23865
|
useTabStore as useAriakitTabStore
|
|
24016
23866
|
} from "@ariakit/react";
|
|
24017
|
-
import { useCallback as useCallback15, useEffect as
|
|
23867
|
+
import { useCallback as useCallback15, useEffect as useEffect26, useMemo as useMemo10 } from "react";
|
|
24018
23868
|
|
|
24019
23869
|
// src/components/Tabs/Tabs.styles.ts
|
|
24020
23870
|
import { css as css110 } from "@emotion/react";
|
|
@@ -24074,7 +23924,7 @@ var Tabs = ({
|
|
|
24074
23924
|
},
|
|
24075
23925
|
[onSelectedIdChange, useHashForState]
|
|
24076
23926
|
);
|
|
24077
|
-
|
|
23927
|
+
useEffect26(() => {
|
|
24078
23928
|
if (selected && selected !== tab.getState().activeId) {
|
|
24079
23929
|
tab.setSelectedId(selected);
|
|
24080
23930
|
}
|