@payloadcms/richtext-lexical 3.0.0-beta.35 → 3.0.0-beta.36
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/cell/index.d.ts +2 -0
- package/dist/cell/index.d.ts.map +1 -1
- package/dist/cell/index.js +24 -15
- package/dist/cell/index.js.map +1 -1
- package/dist/field/Field.d.ts.map +1 -1
- package/dist/field/Field.js +66 -47
- package/dist/field/Field.js.map +1 -1
- package/dist/field/features/blocks/component/BlockContent.js +62 -45
- package/dist/field/features/blocks/component/BlockContent.js.map +1 -1
- package/dist/field/features/blocks/component/index.js +38 -28
- package/dist/field/features/blocks/component/index.js.map +1 -1
- package/dist/field/features/blocks/drawer/index.js +2 -1
- package/dist/field/features/blocks/drawer/index.js.map +1 -1
- package/dist/field/features/blocks/nodes/BlocksNode.d.ts +1 -1
- package/dist/field/features/blocks/nodes/BlocksNode.d.ts.map +1 -1
- package/dist/field/features/blocks/nodes/BlocksNode.js +2 -1
- package/dist/field/features/blocks/nodes/BlocksNode.js.map +1 -1
- package/dist/field/features/blocks/plugin/index.js +2 -1
- package/dist/field/features/blocks/plugin/index.js.map +1 -1
- package/dist/field/features/debug/testRecorder/plugin/index.js +65 -39
- package/dist/field/features/debug/testRecorder/plugin/index.js.map +1 -1
- package/dist/field/features/debug/treeView/plugin/index.js +2 -1
- package/dist/field/features/debug/treeView/plugin/index.js.map +1 -1
- package/dist/field/features/horizontalRule/nodes/HorizontalRuleNode.js +2 -1
- package/dist/field/features/horizontalRule/nodes/HorizontalRuleNode.js.map +1 -1
- package/dist/field/features/link/drawer/index.js +30 -22
- package/dist/field/features/link/drawer/index.js.map +1 -1
- package/dist/field/features/link/plugins/clickableLink/index.js +2 -1
- package/dist/field/features/link/plugins/clickableLink/index.js.map +1 -1
- package/dist/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.d.ts.map +1 -1
- package/dist/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.js +88 -70
- package/dist/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.js.map +1 -1
- package/dist/field/features/link/plugins/floatingLinkEditor/index.js +2 -1
- package/dist/field/features/link/plugins/floatingLinkEditor/index.js.map +1 -1
- package/dist/field/features/lists/checklist/plugin/index.js +2 -1
- package/dist/field/features/lists/checklist/plugin/index.js.map +1 -1
- package/dist/field/features/lists/plugin/index.js +2 -1
- package/dist/field/features/lists/plugin/index.js.map +1 -1
- package/dist/field/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/Component.js +9 -1
- package/dist/field/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/Component.js.map +1 -1
- package/dist/field/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/index.d.ts +1 -1
- package/dist/field/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/index.d.ts.map +1 -1
- package/dist/field/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/index.js +2 -1
- package/dist/field/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/index.js.map +1 -1
- package/dist/field/features/migrations/slateToLexical/nodes/unknownConvertedNode/Component.js +9 -1
- package/dist/field/features/migrations/slateToLexical/nodes/unknownConvertedNode/Component.js.map +1 -1
- package/dist/field/features/migrations/slateToLexical/nodes/unknownConvertedNode/index.d.ts +1 -1
- package/dist/field/features/migrations/slateToLexical/nodes/unknownConvertedNode/index.d.ts.map +1 -1
- package/dist/field/features/migrations/slateToLexical/nodes/unknownConvertedNode/index.js +2 -1
- package/dist/field/features/migrations/slateToLexical/nodes/unknownConvertedNode/index.js.map +1 -1
- package/dist/field/features/relationship/drawer/index.js +10 -2
- package/dist/field/features/relationship/drawer/index.js.map +1 -1
- package/dist/field/features/relationship/nodes/RelationshipNode.d.ts +1 -1
- package/dist/field/features/relationship/nodes/RelationshipNode.d.ts.map +1 -1
- package/dist/field/features/relationship/nodes/RelationshipNode.js +2 -1
- package/dist/field/features/relationship/nodes/RelationshipNode.js.map +1 -1
- package/dist/field/features/relationship/nodes/components/RelationshipComponent.js +64 -44
- package/dist/field/features/relationship/nodes/components/RelationshipComponent.js.map +1 -1
- package/dist/field/features/relationship/plugins/index.js +2 -1
- package/dist/field/features/relationship/plugins/index.js.map +1 -1
- package/dist/field/features/toolbars/fixed/Toolbar/index.js +60 -55
- package/dist/field/features/toolbars/fixed/Toolbar/index.js.map +1 -1
- package/dist/field/features/toolbars/fixed/Toolbar/index.scss +16 -2
- package/dist/field/features/toolbars/inline/Toolbar/index.js +57 -49
- package/dist/field/features/toolbars/inline/Toolbar/index.js.map +1 -1
- package/dist/field/features/toolbars/shared/ToolbarButton/index.d.ts +1 -1
- package/dist/field/features/toolbars/shared/ToolbarButton/index.d.ts.map +1 -1
- package/dist/field/features/toolbars/shared/ToolbarButton/index.js +5 -3
- package/dist/field/features/toolbars/shared/ToolbarButton/index.js.map +1 -1
- package/dist/field/features/toolbars/shared/ToolbarDropdown/DropDown.d.ts.map +1 -1
- package/dist/field/features/toolbars/shared/ToolbarDropdown/DropDown.js +54 -35
- package/dist/field/features/toolbars/shared/ToolbarDropdown/DropDown.js.map +1 -1
- package/dist/field/features/toolbars/shared/ToolbarDropdown/index.d.ts +1 -1
- package/dist/field/features/toolbars/shared/ToolbarDropdown/index.d.ts.map +1 -1
- package/dist/field/features/toolbars/shared/ToolbarDropdown/index.js +25 -22
- package/dist/field/features/toolbars/shared/ToolbarDropdown/index.js.map +1 -1
- package/dist/field/features/upload/component/ExtraFieldsDrawer/index.js +30 -22
- package/dist/field/features/upload/component/ExtraFieldsDrawer/index.js.map +1 -1
- package/dist/field/features/upload/component/index.js +104 -71
- package/dist/field/features/upload/component/index.js.map +1 -1
- package/dist/field/features/upload/drawer/index.js +8 -4
- package/dist/field/features/upload/drawer/index.js.map +1 -1
- package/dist/field/features/upload/nodes/UploadNode.d.ts +1 -1
- package/dist/field/features/upload/nodes/UploadNode.d.ts.map +1 -1
- package/dist/field/features/upload/nodes/UploadNode.js +2 -1
- package/dist/field/features/upload/nodes/UploadNode.js.map +1 -1
- package/dist/field/features/upload/plugin/index.js +2 -1
- package/dist/field/features/upload/plugin/index.js.map +1 -1
- package/dist/field/index.d.ts +2 -0
- package/dist/field/index.d.ts.map +1 -1
- package/dist/field/index.js +29 -21
- package/dist/field/index.js.map +1 -1
- package/dist/field/index.scss +0 -19
- package/dist/field/lexical/EditorFocusProvider.d.ts +1 -2
- package/dist/field/lexical/EditorFocusProvider.d.ts.map +1 -1
- package/dist/field/lexical/EditorFocusProvider.js +5 -3
- package/dist/field/lexical/EditorFocusProvider.js.map +1 -1
- package/dist/field/lexical/EditorPlugin.js +3 -2
- package/dist/field/lexical/EditorPlugin.js.map +1 -1
- package/dist/field/lexical/LexicalEditor.js +113 -81
- package/dist/field/lexical/LexicalEditor.js.map +1 -1
- package/dist/field/lexical/LexicalEditor.scss +10 -1
- package/dist/field/lexical/LexicalProvider.js +16 -10
- package/dist/field/lexical/LexicalProvider.js.map +1 -1
- package/dist/field/lexical/config/client/EditorConfigProvider.js +5 -3
- package/dist/field/lexical/config/client/EditorConfigProvider.js.map +1 -1
- package/dist/field/lexical/config/client/sanitize.d.ts +2 -1
- package/dist/field/lexical/config/client/sanitize.d.ts.map +1 -1
- package/dist/field/lexical/config/client/sanitize.js +2 -1
- package/dist/field/lexical/config/client/sanitize.js.map +1 -1
- package/dist/field/lexical/config/types.d.ts +2 -0
- package/dist/field/lexical/config/types.d.ts.map +1 -1
- package/dist/field/lexical/config/types.js.map +1 -1
- package/dist/field/lexical/plugins/MarkdownShortcut/index.js +2 -1
- package/dist/field/lexical/plugins/MarkdownShortcut/index.js.map +1 -1
- package/dist/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.d.ts +1 -1
- package/dist/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.d.ts.map +1 -1
- package/dist/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.js.map +1 -1
- package/dist/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/index.d.ts +1 -1
- package/dist/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/index.d.ts.map +1 -1
- package/dist/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/index.js +2 -1
- package/dist/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/index.js.map +1 -1
- package/dist/field/lexical/plugins/SlashMenu/index.js +51 -40
- package/dist/field/lexical/plugins/SlashMenu/index.js.map +1 -1
- package/dist/field/lexical/plugins/handles/AddBlockHandlePlugin/index.d.ts +2 -2
- package/dist/field/lexical/plugins/handles/AddBlockHandlePlugin/index.d.ts.map +1 -1
- package/dist/field/lexical/plugins/handles/AddBlockHandlePlugin/index.js +38 -119
- package/dist/field/lexical/plugins/handles/AddBlockHandlePlugin/index.js.map +1 -1
- package/dist/field/lexical/plugins/handles/AddBlockHandlePlugin/index.scss +2 -2
- package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/highlightElemOriginalPosition.d.ts +1 -1
- package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/highlightElemOriginalPosition.d.ts.map +1 -1
- package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/highlightElemOriginalPosition.js.map +1 -1
- package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/index.d.ts +2 -2
- package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/index.d.ts.map +1 -1
- package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/index.js +102 -58
- package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/index.js.map +1 -1
- package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/index.scss +12 -3
- package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/setTargetLine.d.ts +8 -1
- package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/setTargetLine.d.ts.map +1 -1
- package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/setTargetLine.js +73 -25
- package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/setTargetLine.js.map +1 -1
- package/dist/field/lexical/plugins/handles/utils/calculateDistanceFromScrollerElem.d.ts +5 -0
- package/dist/field/lexical/plugins/handles/utils/calculateDistanceFromScrollerElem.d.ts.map +1 -0
- package/dist/field/lexical/plugins/handles/utils/calculateDistanceFromScrollerElem.js +21 -0
- package/dist/field/lexical/plugins/handles/utils/calculateDistanceFromScrollerElem.js.map +1 -0
- package/dist/field/lexical/plugins/handles/{DraggableBlockPlugin → utils}/getNodeCloseToPoint.d.ts +4 -0
- package/dist/field/lexical/plugins/handles/utils/getNodeCloseToPoint.d.ts.map +1 -0
- package/dist/field/lexical/plugins/handles/{DraggableBlockPlugin → utils}/getNodeCloseToPoint.js +2 -14
- package/dist/field/lexical/plugins/handles/utils/getNodeCloseToPoint.js.map +1 -0
- package/dist/field/lexical/plugins/handles/utils/setHandlePosition.d.ts.map +1 -1
- package/dist/field/lexical/plugins/handles/utils/setHandlePosition.js +4 -2
- package/dist/field/lexical/plugins/handles/utils/setHandlePosition.js.map +1 -1
- package/dist/field/lexical/theme/EditorTheme.scss +5 -0
- package/dist/field/lexical/ui/ContentEditable.d.ts +1 -1
- package/dist/field/lexical/ui/ContentEditable.d.ts.map +1 -1
- package/dist/field/lexical/ui/ContentEditable.js +2 -1
- package/dist/field/lexical/ui/ContentEditable.js.map +1 -1
- package/dist/field/lexical/ui/ContentEditable.scss +50 -2
- package/dist/field/lexical/ui/icons/AI/index.js +26 -17
- package/dist/field/lexical/ui/icons/AI/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/Add/index.js +14 -9
- package/dist/field/lexical/ui/icons/Add/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/Add/light.svg +4 -0
- package/dist/field/lexical/ui/icons/AlignCenter/index.js +21 -15
- package/dist/field/lexical/ui/icons/AlignCenter/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/AlignJustify/index.js +21 -15
- package/dist/field/lexical/ui/icons/AlignJustify/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/AlignLeft/index.js +21 -15
- package/dist/field/lexical/ui/icons/AlignLeft/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/AlignRight/index.js +21 -15
- package/dist/field/lexical/ui/icons/AlignRight/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/Block/index.js +30 -24
- package/dist/field/lexical/ui/icons/Block/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/Blockquote/index.js +8 -6
- package/dist/field/lexical/ui/icons/Blockquote/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/Bold/index.js +8 -6
- package/dist/field/lexical/ui/icons/Bold/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/Checklist/index.js +19 -14
- package/dist/field/lexical/ui/icons/Checklist/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/Code/index.js +14 -9
- package/dist/field/lexical/ui/icons/Code/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/CodeBlock/index.js +14 -9
- package/dist/field/lexical/ui/icons/CodeBlock/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/DraggableBlock/light.svg +9 -0
- package/dist/field/lexical/ui/icons/H1/index.js +8 -6
- package/dist/field/lexical/ui/icons/H1/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/H2/index.js +8 -6
- package/dist/field/lexical/ui/icons/H2/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/H3/index.js +8 -6
- package/dist/field/lexical/ui/icons/H3/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/H4/index.js +8 -6
- package/dist/field/lexical/ui/icons/H4/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/H5/index.js +8 -6
- package/dist/field/lexical/ui/icons/H5/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/H6/index.js +8 -6
- package/dist/field/lexical/ui/icons/H6/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/HorizontalRule/index.js +11 -9
- package/dist/field/lexical/ui/icons/HorizontalRule/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/IndentDecrease/index.js +25 -18
- package/dist/field/lexical/ui/icons/IndentDecrease/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/IndentIncrease/index.js +25 -18
- package/dist/field/lexical/ui/icons/IndentIncrease/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/Italic/index.js +8 -6
- package/dist/field/lexical/ui/icons/Italic/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/Link/index.js +26 -17
- package/dist/field/lexical/ui/icons/Link/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/OrderedList/index.js +29 -21
- package/dist/field/lexical/ui/icons/OrderedList/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/Relationship/index.js +26 -17
- package/dist/field/lexical/ui/icons/Relationship/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/Strikethrough/index.js +14 -9
- package/dist/field/lexical/ui/icons/Strikethrough/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/Subscript/index.js +8 -6
- package/dist/field/lexical/ui/icons/Subscript/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/Superscript/index.js +8 -6
- package/dist/field/lexical/ui/icons/Superscript/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/Text/index.js +8 -6
- package/dist/field/lexical/ui/icons/Text/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/Underline/index.js +14 -9
- package/dist/field/lexical/ui/icons/Underline/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/UnorderedList/index.js +45 -36
- package/dist/field/lexical/ui/icons/UnorderedList/index.js.map +1 -1
- package/dist/field/lexical/ui/icons/Upload/index.js +24 -18
- package/dist/field/lexical/ui/icons/Upload/index.js.map +1 -1
- package/dist/generateComponentMap.js +8 -8
- package/dist/generateComponentMap.js.map +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/types.d.ts +7 -0
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js.map +1 -1
- package/package.json +17 -13
- package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/getNodeCloseToPoint.d.ts.map +0 -1
- package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/getNodeCloseToPoint.js.map +0 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
|
|
3
4
|
import { useTranslation } from '@payloadcms/ui/providers/Translation';
|
|
4
5
|
import * as React from 'react';
|
|
@@ -9,18 +10,17 @@ import { ToolbarDropdown } from '../../shared/ToolbarDropdown/index.js';
|
|
|
9
10
|
import './index.scss';
|
|
10
11
|
function ButtonGroupItem({ anchorElem, editor, item }) {
|
|
11
12
|
if (item.Component) {
|
|
12
|
-
return item?.Component && /*#__PURE__*/
|
|
13
|
+
return item?.Component && /*#__PURE__*/ _jsx(item.Component, {
|
|
13
14
|
anchorElem: anchorElem,
|
|
14
15
|
editor: editor,
|
|
15
|
-
item: item
|
|
16
|
-
|
|
17
|
-
});
|
|
16
|
+
item: item
|
|
17
|
+
}, item.key);
|
|
18
18
|
}
|
|
19
|
-
return /*#__PURE__*/
|
|
19
|
+
return /*#__PURE__*/ _jsx(ToolbarButton, {
|
|
20
20
|
editor: editor,
|
|
21
21
|
item: item,
|
|
22
|
-
|
|
23
|
-
}, item
|
|
22
|
+
children: item?.ChildComponent && /*#__PURE__*/ _jsx(item.ChildComponent, {})
|
|
23
|
+
}, item.key);
|
|
24
24
|
}
|
|
25
25
|
function ToolbarGroupComponent({ anchorElem, editor, editorConfig, group, index }) {
|
|
26
26
|
const { i18n } = useTranslation();
|
|
@@ -60,61 +60,66 @@ function ToolbarGroupComponent({ anchorElem, editor, editorConfig, group, index
|
|
|
60
60
|
setDropdownLabel(label);
|
|
61
61
|
setDropdownIcon(()=>item.ChildComponent);
|
|
62
62
|
};
|
|
63
|
-
return /*#__PURE__*/
|
|
63
|
+
return /*#__PURE__*/ _jsxs("div", {
|
|
64
64
|
className: `fixed-toolbar__group fixed-toolbar__group-${group.key}`,
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
65
|
+
children: [
|
|
66
|
+
group.type === 'dropdown' && group.items.length && (DropdownIcon ? /*#__PURE__*/ _jsx(ToolbarDropdown, {
|
|
67
|
+
Icon: DropdownIcon,
|
|
68
|
+
anchorElem: anchorElem,
|
|
69
|
+
editor: editor,
|
|
70
|
+
groupKey: group.key,
|
|
71
|
+
items: group.items,
|
|
72
|
+
itemsContainerClassNames: [
|
|
73
|
+
'fixed-toolbar__dropdown-items'
|
|
74
|
+
],
|
|
75
|
+
label: dropdownLabel,
|
|
76
|
+
maxActiveItems: 1,
|
|
77
|
+
onActiveChange: onActiveChange
|
|
78
|
+
}) : /*#__PURE__*/ _jsx(ToolbarDropdown, {
|
|
79
|
+
anchorElem: anchorElem,
|
|
80
|
+
editor: editor,
|
|
81
|
+
groupKey: group.key,
|
|
82
|
+
items: group.items,
|
|
83
|
+
itemsContainerClassNames: [
|
|
84
|
+
'fixed-toolbar__dropdown-items'
|
|
85
|
+
],
|
|
86
|
+
label: dropdownLabel,
|
|
87
|
+
maxActiveItems: 1,
|
|
88
|
+
onActiveChange: onActiveChange
|
|
89
|
+
})),
|
|
90
|
+
group.type === 'buttons' && group.items.length && group.items.map((item)=>{
|
|
91
|
+
return /*#__PURE__*/ _jsx(ButtonGroupItem, {
|
|
92
|
+
anchorElem: anchorElem,
|
|
93
|
+
editor: editor,
|
|
94
|
+
item: item
|
|
95
|
+
}, item.key);
|
|
96
|
+
}),
|
|
97
|
+
index < editorConfig.features.toolbarFixed?.groups.length - 1 && /*#__PURE__*/ _jsx("div", {
|
|
98
|
+
className: "divider"
|
|
99
|
+
})
|
|
100
|
+
]
|
|
101
|
+
}, group.key);
|
|
99
102
|
}
|
|
100
103
|
function FixedToolbar({ anchorElem, editor, editorConfig }) {
|
|
101
|
-
return /*#__PURE__*/
|
|
104
|
+
return /*#__PURE__*/ _jsx("div", {
|
|
102
105
|
className: "fixed-toolbar",
|
|
103
106
|
onFocus: (event)=>{
|
|
104
107
|
// Prevent other focus events being triggered. Otherwise, if this was to be clicked while in a child editor,
|
|
105
108
|
// the parent editor will be focused, and the child editor will lose focus.
|
|
106
109
|
event.stopPropagation();
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
110
|
+
},
|
|
111
|
+
children: editor.isEditable() && /*#__PURE__*/ _jsx(React.Fragment, {
|
|
112
|
+
children: editorConfig?.features && editorConfig.features?.toolbarFixed?.groups.map((group, i)=>{
|
|
113
|
+
return /*#__PURE__*/ _jsx(ToolbarGroupComponent, {
|
|
114
|
+
anchorElem: anchorElem,
|
|
115
|
+
editor: editor,
|
|
116
|
+
editorConfig: editorConfig,
|
|
117
|
+
group: group,
|
|
118
|
+
index: i
|
|
119
|
+
}, group.key);
|
|
120
|
+
})
|
|
121
|
+
})
|
|
122
|
+
});
|
|
118
123
|
}
|
|
119
124
|
const checkParentEditor = (editorFocus)=>{
|
|
120
125
|
if (editorFocus.parentEditorConfigContext?.editorConfig) {
|
|
@@ -142,7 +147,7 @@ export const FixedToolbarPlugin = ({ anchorElem })=>{
|
|
|
142
147
|
if (!editorConfig?.features?.toolbarFixed?.groups?.length) {
|
|
143
148
|
return null;
|
|
144
149
|
}
|
|
145
|
-
return /*#__PURE__*/
|
|
150
|
+
return /*#__PURE__*/ _jsx(FixedToolbar, {
|
|
146
151
|
anchorElem: anchorElem,
|
|
147
152
|
editor: editor,
|
|
148
153
|
editorConfig: editorConfig
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/field/features/toolbars/fixed/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport * as React from 'react'\n\nimport type { EditorFocusContextType } from '../../../../lexical/EditorFocusProvider.js'\nimport type { SanitizedClientEditorConfig } from '../../../../lexical/config/types.js'\nimport type { PluginComponentWithAnchor } from '../../../types.js'\nimport type { ToolbarGroup, ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorFocus } from '../../../../lexical/EditorFocusProvider.js'\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { ToolbarButton } from '../../shared/ToolbarButton/index.js'\nimport { ToolbarDropdown } from '../../shared/ToolbarDropdown/index.js'\nimport './index.scss'\n\nfunction ButtonGroupItem({\n anchorElem,\n editor,\n item,\n}: {\n anchorElem: HTMLElement\n editor: LexicalEditor\n item: ToolbarGroupItem\n}): React.ReactNode {\n if (item.Component) {\n return (\n item?.Component && (\n <item.Component anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n )\n )\n }\n\n return (\n <ToolbarButton editor={editor} item={item} key={item.key}>\n {item?.ChildComponent && <item.ChildComponent />}\n </ToolbarButton>\n )\n}\n\nfunction ToolbarGroupComponent({\n anchorElem,\n editor,\n editorConfig,\n group,\n index,\n}: {\n anchorElem: HTMLElement\n editor: LexicalEditor\n editorConfig: SanitizedClientEditorConfig\n group: ToolbarGroup\n index: number\n}): React.ReactNode {\n const { i18n } = useTranslation()\n\n const [dropdownLabel, setDropdownLabel] = React.useState<null | string>(null)\n const [DropdownIcon, setDropdownIcon] = React.useState<React.FC | null>(null)\n\n React.useEffect(() => {\n if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n setDropdownIcon(() => group.ChildComponent)\n } else {\n setDropdownIcon(null)\n }\n }, [group])\n\n const onActiveChange = ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => {\n if (!activeItems.length) {\n if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n setDropdownIcon(() => group.ChildComponent)\n setDropdownLabel(null)\n } else {\n setDropdownIcon(null)\n setDropdownLabel(null)\n }\n return\n }\n const item = activeItems[0]\n\n let label = item.key\n if (item.label) {\n label = typeof item.label === 'function' ? item.label({ i18n }) : item.label\n }\n // Crop title to max. 25 characters\n if (label.length > 25) {\n label = label.substring(0, 25) + '...'\n }\n setDropdownLabel(label)\n setDropdownIcon(() => item.ChildComponent)\n }\n\n return (\n <div className={`fixed-toolbar__group fixed-toolbar__group-${group.key}`} key={group.key}>\n {group.type === 'dropdown' &&\n group.items.length &&\n (DropdownIcon ? (\n <ToolbarDropdown\n Icon={DropdownIcon}\n anchorElem={anchorElem}\n editor={editor}\n groupKey={group.key}\n items={group.items}\n itemsContainerClassNames={['fixed-toolbar__dropdown-items']}\n label={dropdownLabel}\n maxActiveItems={1}\n onActiveChange={onActiveChange}\n />\n ) : (\n <ToolbarDropdown\n anchorElem={anchorElem}\n editor={editor}\n groupKey={group.key}\n items={group.items}\n itemsContainerClassNames={['fixed-toolbar__dropdown-items']}\n label={dropdownLabel}\n maxActiveItems={1}\n onActiveChange={onActiveChange}\n />\n ))}\n {group.type === 'buttons' &&\n group.items.length &&\n group.items.map((item) => {\n return (\n <ButtonGroupItem anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n )\n })}\n {index < editorConfig.features.toolbarFixed?.groups.length - 1 && <div className=\"divider\" />}\n </div>\n )\n}\n\nfunction FixedToolbar({\n anchorElem,\n editor,\n editorConfig,\n}: {\n anchorElem: HTMLElement\n editor: LexicalEditor\n editorConfig: SanitizedClientEditorConfig\n}): React.ReactNode {\n return (\n <div\n className=\"fixed-toolbar\"\n onFocus={(event) => {\n // Prevent other focus events being triggered. Otherwise, if this was to be clicked while in a child editor,\n // the parent editor will be focused, and the child editor will lose focus.\n event.stopPropagation()\n }}\n >\n {editor.isEditable() && (\n <React.Fragment>\n {editorConfig?.features &&\n editorConfig.features?.toolbarFixed?.groups.map((group, i) => {\n return (\n <ToolbarGroupComponent\n anchorElem={anchorElem}\n editor={editor}\n editorConfig={editorConfig}\n group={group}\n index={i}\n key={group.key}\n />\n )\n })}\n </React.Fragment>\n )}\n </div>\n )\n}\n\nconst checkParentEditor = (editorFocus: EditorFocusContextType): boolean => {\n if (editorFocus.parentEditorConfigContext?.editorConfig) {\n if (\n editorFocus.parentEditorConfigContext?.editorConfig.resolvedFeatureMap.has('toolbarFixed')\n ) {\n return true\n } else {\n if (editorFocus.parentEditorFocus) {\n return checkParentEditor(editorFocus.parentEditorFocus)\n }\n }\n }\n return false\n}\n\nexport const FixedToolbarPlugin: PluginComponentWithAnchor<undefined> = ({ anchorElem }) => {\n const [currentEditor] = useLexicalComposerContext()\n const { editorConfig: currentEditorConfig, uuid } = useEditorConfigContext()\n\n const editorFocus = useEditorFocus()\n const editor = editorFocus.focusedEditor || currentEditor\n\n const editorConfig = editorFocus.focusedEditorConfigContext?.editorConfig || currentEditorConfig\n\n // Check if there is a parent editor with a fixed toolbar already\n const hasParentWithFixedToolbar = checkParentEditor(editorFocus)\n\n if (hasParentWithFixedToolbar) {\n return null\n }\n\n if (!editorConfig?.features?.toolbarFixed?.groups?.length) {\n return null\n }\n\n return <FixedToolbar anchorElem={anchorElem} editor={editor} editorConfig={editorConfig} />\n}\n"],"names":["useLexicalComposerContext","useTranslation","React","useEditorFocus","useEditorConfigContext","ToolbarButton","ToolbarDropdown","ButtonGroupItem","anchorElem","editor","item","Component","key","ChildComponent","ToolbarGroupComponent","editorConfig","group","index","i18n","dropdownLabel","setDropdownLabel","useState","DropdownIcon","setDropdownIcon","useEffect","type","items","length","onActiveChange","activeItems","label","substring","div","className","Icon","groupKey","itemsContainerClassNames","maxActiveItems","map","features","toolbarFixed","groups","FixedToolbar","onFocus","event","stopPropagation","isEditable","Fragment","i","checkParentEditor","editorFocus","parentEditorConfigContext","resolvedFeatureMap","has","parentEditorFocus","FixedToolbarPlugin","currentEditor","currentEditorConfig","uuid","focusedEditor","focusedEditorConfigContext","hasParentWithFixedToolbar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/field/features/toolbars/fixed/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport * as React from 'react'\n\nimport type { EditorFocusContextType } from '../../../../lexical/EditorFocusProvider.js'\nimport type { SanitizedClientEditorConfig } from '../../../../lexical/config/types.js'\nimport type { PluginComponentWithAnchor } from '../../../types.js'\nimport type { ToolbarGroup, ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorFocus } from '../../../../lexical/EditorFocusProvider.js'\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { ToolbarButton } from '../../shared/ToolbarButton/index.js'\nimport { ToolbarDropdown } from '../../shared/ToolbarDropdown/index.js'\nimport './index.scss'\n\nfunction ButtonGroupItem({\n anchorElem,\n editor,\n item,\n}: {\n anchorElem: HTMLElement\n editor: LexicalEditor\n item: ToolbarGroupItem\n}): React.ReactNode {\n if (item.Component) {\n return (\n item?.Component && (\n <item.Component anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n )\n )\n }\n\n return (\n <ToolbarButton editor={editor} item={item} key={item.key}>\n {item?.ChildComponent && <item.ChildComponent />}\n </ToolbarButton>\n )\n}\n\nfunction ToolbarGroupComponent({\n anchorElem,\n editor,\n editorConfig,\n group,\n index,\n}: {\n anchorElem: HTMLElement\n editor: LexicalEditor\n editorConfig: SanitizedClientEditorConfig\n group: ToolbarGroup\n index: number\n}): React.ReactNode {\n const { i18n } = useTranslation()\n\n const [dropdownLabel, setDropdownLabel] = React.useState<null | string>(null)\n const [DropdownIcon, setDropdownIcon] = React.useState<React.FC | null>(null)\n\n React.useEffect(() => {\n if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n setDropdownIcon(() => group.ChildComponent)\n } else {\n setDropdownIcon(null)\n }\n }, [group])\n\n const onActiveChange = ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => {\n if (!activeItems.length) {\n if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n setDropdownIcon(() => group.ChildComponent)\n setDropdownLabel(null)\n } else {\n setDropdownIcon(null)\n setDropdownLabel(null)\n }\n return\n }\n const item = activeItems[0]\n\n let label = item.key\n if (item.label) {\n label = typeof item.label === 'function' ? item.label({ i18n }) : item.label\n }\n // Crop title to max. 25 characters\n if (label.length > 25) {\n label = label.substring(0, 25) + '...'\n }\n setDropdownLabel(label)\n setDropdownIcon(() => item.ChildComponent)\n }\n\n return (\n <div className={`fixed-toolbar__group fixed-toolbar__group-${group.key}`} key={group.key}>\n {group.type === 'dropdown' &&\n group.items.length &&\n (DropdownIcon ? (\n <ToolbarDropdown\n Icon={DropdownIcon}\n anchorElem={anchorElem}\n editor={editor}\n groupKey={group.key}\n items={group.items}\n itemsContainerClassNames={['fixed-toolbar__dropdown-items']}\n label={dropdownLabel}\n maxActiveItems={1}\n onActiveChange={onActiveChange}\n />\n ) : (\n <ToolbarDropdown\n anchorElem={anchorElem}\n editor={editor}\n groupKey={group.key}\n items={group.items}\n itemsContainerClassNames={['fixed-toolbar__dropdown-items']}\n label={dropdownLabel}\n maxActiveItems={1}\n onActiveChange={onActiveChange}\n />\n ))}\n {group.type === 'buttons' &&\n group.items.length &&\n group.items.map((item) => {\n return (\n <ButtonGroupItem anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n )\n })}\n {index < editorConfig.features.toolbarFixed?.groups.length - 1 && <div className=\"divider\" />}\n </div>\n )\n}\n\nfunction FixedToolbar({\n anchorElem,\n editor,\n editorConfig,\n}: {\n anchorElem: HTMLElement\n editor: LexicalEditor\n editorConfig: SanitizedClientEditorConfig\n}): React.ReactNode {\n return (\n <div\n className=\"fixed-toolbar\"\n onFocus={(event) => {\n // Prevent other focus events being triggered. Otherwise, if this was to be clicked while in a child editor,\n // the parent editor will be focused, and the child editor will lose focus.\n event.stopPropagation()\n }}\n >\n {editor.isEditable() && (\n <React.Fragment>\n {editorConfig?.features &&\n editorConfig.features?.toolbarFixed?.groups.map((group, i) => {\n return (\n <ToolbarGroupComponent\n anchorElem={anchorElem}\n editor={editor}\n editorConfig={editorConfig}\n group={group}\n index={i}\n key={group.key}\n />\n )\n })}\n </React.Fragment>\n )}\n </div>\n )\n}\n\nconst checkParentEditor = (editorFocus: EditorFocusContextType): boolean => {\n if (editorFocus.parentEditorConfigContext?.editorConfig) {\n if (\n editorFocus.parentEditorConfigContext?.editorConfig.resolvedFeatureMap.has('toolbarFixed')\n ) {\n return true\n } else {\n if (editorFocus.parentEditorFocus) {\n return checkParentEditor(editorFocus.parentEditorFocus)\n }\n }\n }\n return false\n}\n\nexport const FixedToolbarPlugin: PluginComponentWithAnchor<undefined> = ({ anchorElem }) => {\n const [currentEditor] = useLexicalComposerContext()\n const { editorConfig: currentEditorConfig, uuid } = useEditorConfigContext()\n\n const editorFocus = useEditorFocus()\n const editor = editorFocus.focusedEditor || currentEditor\n\n const editorConfig = editorFocus.focusedEditorConfigContext?.editorConfig || currentEditorConfig\n\n // Check if there is a parent editor with a fixed toolbar already\n const hasParentWithFixedToolbar = checkParentEditor(editorFocus)\n\n if (hasParentWithFixedToolbar) {\n return null\n }\n\n if (!editorConfig?.features?.toolbarFixed?.groups?.length) {\n return null\n }\n\n return <FixedToolbar anchorElem={anchorElem} editor={editor} editorConfig={editorConfig} />\n}\n"],"names":["useLexicalComposerContext","useTranslation","React","useEditorFocus","useEditorConfigContext","ToolbarButton","ToolbarDropdown","ButtonGroupItem","anchorElem","editor","item","Component","key","ChildComponent","ToolbarGroupComponent","editorConfig","group","index","i18n","dropdownLabel","setDropdownLabel","useState","DropdownIcon","setDropdownIcon","useEffect","type","items","length","onActiveChange","activeItems","label","substring","div","className","Icon","groupKey","itemsContainerClassNames","maxActiveItems","map","features","toolbarFixed","groups","FixedToolbar","onFocus","event","stopPropagation","isEditable","Fragment","i","checkParentEditor","editorFocus","parentEditorConfigContext","resolvedFeatureMap","has","parentEditorFocus","FixedToolbarPlugin","currentEditor","currentEditorConfig","uuid","focusedEditor","focusedEditorConfigContext","hasParentWithFixedToolbar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -85,14 +85,28 @@ html[data-theme='dark'] {
|
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
+ .editor-container {
|
|
88
|
-
> .editor-scroller > .editor
|
|
89
|
-
|
|
88
|
+
> .editor-scroller > .editor {
|
|
89
|
+
> .ContentEditable__root {
|
|
90
|
+
padding-top: calc(var(--base) * 1.25);
|
|
91
|
+
}
|
|
90
92
|
}
|
|
91
93
|
|
|
92
94
|
> .editor-placeholder {
|
|
93
95
|
top: calc(var(--base) * 1.25);
|
|
94
96
|
}
|
|
95
97
|
}
|
|
98
|
+
}
|
|
96
99
|
|
|
97
100
|
|
|
101
|
+
.rich-text-lexical--show-gutter {
|
|
102
|
+
.fixed-toolbar {
|
|
103
|
+
+ .editor-container {
|
|
104
|
+
> .editor-scroller > .editor {
|
|
105
|
+
> .ContentEditable__root::before {
|
|
106
|
+
top: calc(var(--base) * 1.25)!important;
|
|
107
|
+
height: calc(100% - calc(var(--base) * 1.25) - 8px)!important;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
98
112
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
|
|
3
4
|
import { mergeRegister } from '@lexical/utils';
|
|
4
5
|
import { $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND } from 'lexical';
|
|
@@ -13,18 +14,17 @@ import { ToolbarDropdown } from '../../shared/ToolbarDropdown/index.js';
|
|
|
13
14
|
import './index.scss';
|
|
14
15
|
function ButtonGroupItem({ anchorElem, editor, item }) {
|
|
15
16
|
if (item.Component) {
|
|
16
|
-
return item?.Component && /*#__PURE__*/
|
|
17
|
+
return item?.Component && /*#__PURE__*/ _jsx(item.Component, {
|
|
17
18
|
anchorElem: anchorElem,
|
|
18
19
|
editor: editor,
|
|
19
|
-
item: item
|
|
20
|
-
|
|
21
|
-
});
|
|
20
|
+
item: item
|
|
21
|
+
}, item.key);
|
|
22
22
|
}
|
|
23
|
-
return /*#__PURE__*/
|
|
23
|
+
return /*#__PURE__*/ _jsx(ToolbarButton, {
|
|
24
24
|
editor: editor,
|
|
25
25
|
item: item,
|
|
26
|
-
|
|
27
|
-
}, item
|
|
26
|
+
children: item?.ChildComponent && /*#__PURE__*/ _jsx(item.ChildComponent, {})
|
|
27
|
+
}, item.key);
|
|
28
28
|
}
|
|
29
29
|
function ToolbarGroupComponent({ anchorElem, editor, group, index }) {
|
|
30
30
|
const { editorConfig } = useEditorConfigContext();
|
|
@@ -50,34 +50,37 @@ function ToolbarGroupComponent({ anchorElem, editor, group, index }) {
|
|
|
50
50
|
const item = activeItems[0];
|
|
51
51
|
setDropdownIcon(()=>item.ChildComponent);
|
|
52
52
|
};
|
|
53
|
-
return /*#__PURE__*/
|
|
53
|
+
return /*#__PURE__*/ _jsxs("div", {
|
|
54
54
|
className: `inline-toolbar-popup__group inline-toolbar-popup__group-${group.key}`,
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
55
|
+
children: [
|
|
56
|
+
group.type === 'dropdown' && group.items.length && (DropdownIcon ? /*#__PURE__*/ _jsx(ToolbarDropdown, {
|
|
57
|
+
Icon: DropdownIcon,
|
|
58
|
+
anchorElem: anchorElem,
|
|
59
|
+
editor: editor,
|
|
60
|
+
groupKey: group.key,
|
|
61
|
+
items: group.items,
|
|
62
|
+
maxActiveItems: 1,
|
|
63
|
+
onActiveChange: onActiveChange
|
|
64
|
+
}) : /*#__PURE__*/ _jsx(ToolbarDropdown, {
|
|
65
|
+
anchorElem: anchorElem,
|
|
66
|
+
editor: editor,
|
|
67
|
+
groupKey: group.key,
|
|
68
|
+
items: group.items,
|
|
69
|
+
maxActiveItems: 1,
|
|
70
|
+
onActiveChange: onActiveChange
|
|
71
|
+
})),
|
|
72
|
+
group.type === 'buttons' && group.items.length && group.items.map((item)=>{
|
|
73
|
+
return /*#__PURE__*/ _jsx(ButtonGroupItem, {
|
|
74
|
+
anchorElem: anchorElem,
|
|
75
|
+
editor: editor,
|
|
76
|
+
item: item
|
|
77
|
+
}, item.key);
|
|
78
|
+
}),
|
|
79
|
+
index < editorConfig.features.toolbarInline?.groups.length - 1 && /*#__PURE__*/ _jsx("div", {
|
|
80
|
+
className: "divider"
|
|
81
|
+
})
|
|
82
|
+
]
|
|
83
|
+
}, group.key);
|
|
81
84
|
}
|
|
82
85
|
function InlineToolbar({ anchorElem, editor }) {
|
|
83
86
|
const floatingToolbarRef = useRef(null);
|
|
@@ -215,21 +218,26 @@ function InlineToolbar({ anchorElem, editor }) {
|
|
|
215
218
|
editor,
|
|
216
219
|
$updateTextFormatFloatingToolbar
|
|
217
220
|
]);
|
|
218
|
-
return /*#__PURE__*/
|
|
221
|
+
return /*#__PURE__*/ _jsxs("div", {
|
|
219
222
|
className: "inline-toolbar-popup",
|
|
220
|
-
ref: floatingToolbarRef
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
223
|
+
ref: floatingToolbarRef,
|
|
224
|
+
children: [
|
|
225
|
+
/*#__PURE__*/ _jsx("div", {
|
|
226
|
+
className: "caret",
|
|
227
|
+
ref: caretRef
|
|
228
|
+
}),
|
|
229
|
+
editor.isEditable() && /*#__PURE__*/ _jsx(React.Fragment, {
|
|
230
|
+
children: editorConfig?.features && editorConfig.features?.toolbarInline?.groups.map((group, i)=>{
|
|
231
|
+
return /*#__PURE__*/ _jsx(ToolbarGroupComponent, {
|
|
232
|
+
anchorElem: anchorElem,
|
|
233
|
+
editor: editor,
|
|
234
|
+
group: group,
|
|
235
|
+
index: i
|
|
236
|
+
}, group.key);
|
|
237
|
+
})
|
|
238
|
+
})
|
|
239
|
+
]
|
|
240
|
+
});
|
|
233
241
|
}
|
|
234
242
|
function useInlineToolbar(editor, anchorElem) {
|
|
235
243
|
const [isText, setIsText] = useState(false);
|
|
@@ -299,7 +307,7 @@ function useInlineToolbar(editor, anchorElem) {
|
|
|
299
307
|
if (!isText) {
|
|
300
308
|
return null;
|
|
301
309
|
}
|
|
302
|
-
return /*#__PURE__*/ createPortal(/*#__PURE__*/
|
|
310
|
+
return /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsx(InlineToolbar, {
|
|
303
311
|
anchorElem: anchorElem,
|
|
304
312
|
editor: editor
|
|
305
313
|
}), anchorElem);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/field/features/toolbars/inline/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { mergeRegister } from '@lexical/utils'\nimport {\n $getSelection,\n $isRangeSelection,\n $isTextNode,\n COMMAND_PRIORITY_LOW,\n SELECTION_CHANGE_COMMAND,\n} from 'lexical'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport type { PluginComponentWithAnchor } from '../../../types.js'\nimport type { ToolbarGroup, ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { getDOMRangeRect } from '../../../../lexical/utils/getDOMRangeRect.js'\nimport { setFloatingElemPosition } from '../../../../lexical/utils/setFloatingElemPosition.js'\nimport { ToolbarButton } from '../../shared/ToolbarButton/index.js'\nimport { ToolbarDropdown } from '../../shared/ToolbarDropdown/index.js'\nimport './index.scss'\n\nfunction ButtonGroupItem({\n anchorElem,\n editor,\n item,\n}: {\n anchorElem: HTMLElement\n editor: LexicalEditor\n item: ToolbarGroupItem\n}): React.ReactNode {\n if (item.Component) {\n return (\n item?.Component && (\n <item.Component anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n )\n )\n }\n\n return (\n <ToolbarButton editor={editor} item={item} key={item.key}>\n {item?.ChildComponent && <item.ChildComponent />}\n </ToolbarButton>\n )\n}\n\nfunction ToolbarGroupComponent({\n anchorElem,\n editor,\n group,\n index,\n}: {\n anchorElem: HTMLElement\n editor: LexicalEditor\n group: ToolbarGroup\n index: number\n}): React.ReactNode {\n const { editorConfig } = useEditorConfigContext()\n\n const [DropdownIcon, setDropdownIcon] = React.useState<React.FC | null>(null)\n\n React.useEffect(() => {\n if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n setDropdownIcon(() => group.ChildComponent)\n } else {\n setDropdownIcon(null)\n }\n }, [group])\n\n const onActiveChange = ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => {\n if (!activeItems.length) {\n if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n setDropdownIcon(() => group.ChildComponent)\n } else {\n setDropdownIcon(null)\n }\n return\n }\n const item = activeItems[0]\n setDropdownIcon(() => item.ChildComponent)\n }\n\n return (\n <div\n className={`inline-toolbar-popup__group inline-toolbar-popup__group-${group.key}`}\n key={group.key}\n >\n {group.type === 'dropdown' &&\n group.items.length &&\n (DropdownIcon ? (\n <ToolbarDropdown\n Icon={DropdownIcon}\n anchorElem={anchorElem}\n editor={editor}\n groupKey={group.key}\n items={group.items}\n maxActiveItems={1}\n onActiveChange={onActiveChange}\n />\n ) : (\n <ToolbarDropdown\n anchorElem={anchorElem}\n editor={editor}\n groupKey={group.key}\n items={group.items}\n maxActiveItems={1}\n onActiveChange={onActiveChange}\n />\n ))}\n {group.type === 'buttons' &&\n group.items.length &&\n group.items.map((item) => {\n return (\n <ButtonGroupItem anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n )\n })}\n {index < editorConfig.features.toolbarInline?.groups.length - 1 && (\n <div className=\"divider\" />\n )}\n </div>\n )\n}\n\nfunction InlineToolbar({\n anchorElem,\n editor,\n}: {\n anchorElem: HTMLElement\n editor: LexicalEditor\n}): React.ReactNode {\n const floatingToolbarRef = useRef<HTMLDivElement | null>(null)\n const caretRef = useRef<HTMLDivElement | null>(null)\n\n const { editorConfig } = useEditorConfigContext()\n\n const closeFloatingToolbar = useCallback(() => {\n if (floatingToolbarRef?.current) {\n const isOpacityZero = floatingToolbarRef.current.style.opacity === '0'\n const isPointerEventsNone = floatingToolbarRef.current.style.pointerEvents === 'none'\n\n if (!isOpacityZero) {\n floatingToolbarRef.current.style.opacity = '0'\n }\n if (!isPointerEventsNone) {\n floatingToolbarRef.current.style.pointerEvents = 'none'\n }\n }\n }, [floatingToolbarRef])\n\n const mouseMoveListener = useCallback(\n (e: MouseEvent) => {\n if (floatingToolbarRef?.current && (e.buttons === 1 || e.buttons === 3)) {\n const isOpacityZero = floatingToolbarRef.current.style.opacity === '0'\n const isPointerEventsNone = floatingToolbarRef.current.style.pointerEvents === 'none'\n if (!isOpacityZero || !isPointerEventsNone) {\n // Check if the mouse is not over the popup\n const x = e.clientX\n const y = e.clientY\n const elementUnderMouse = document.elementFromPoint(x, y)\n if (!floatingToolbarRef.current.contains(elementUnderMouse)) {\n // Mouse is not over the target element => not a normal click, but probably a drag\n closeFloatingToolbar()\n }\n }\n }\n },\n [closeFloatingToolbar],\n )\n\n const mouseUpListener = useCallback(() => {\n if (floatingToolbarRef?.current) {\n if (floatingToolbarRef.current.style.opacity !== '1') {\n floatingToolbarRef.current.style.opacity = '1'\n }\n if (floatingToolbarRef.current.style.pointerEvents !== 'auto') {\n floatingToolbarRef.current.style.pointerEvents = 'auto'\n }\n }\n }, [])\n\n useEffect(() => {\n document.addEventListener('mousemove', mouseMoveListener)\n document.addEventListener('mouseup', mouseUpListener)\n\n return () => {\n document.removeEventListener('mousemove', mouseMoveListener)\n document.removeEventListener('mouseup', mouseUpListener)\n }\n }, [floatingToolbarRef, mouseMoveListener, mouseUpListener])\n\n const $updateTextFormatFloatingToolbar = useCallback(() => {\n const selection = $getSelection()\n\n const nativeSelection = window.getSelection()\n\n if (floatingToolbarRef.current === null) {\n return\n }\n\n const possibleLinkEditor = anchorElem.querySelector(':scope > .link-editor')\n const isLinkEditorVisible =\n possibleLinkEditor !== null &&\n 'style' in possibleLinkEditor &&\n possibleLinkEditor?.style?.['opacity'] === '1'\n\n const rootElement = editor.getRootElement()\n if (\n selection !== null &&\n nativeSelection !== null &&\n !nativeSelection.isCollapsed &&\n rootElement !== null &&\n rootElement.contains(nativeSelection.anchorNode)\n ) {\n const rangeRect = getDOMRangeRect(nativeSelection, rootElement)\n\n // Position floating toolbar\n const offsetIfFlipped = setFloatingElemPosition({\n alwaysDisplayOnTop: isLinkEditorVisible,\n anchorElem,\n floatingElem: floatingToolbarRef.current,\n horizontalPosition: 'center',\n targetRect: rangeRect,\n })\n\n // Position caret\n if (caretRef.current) {\n setFloatingElemPosition({\n anchorElem: floatingToolbarRef.current,\n anchorFlippedOffset: offsetIfFlipped,\n floatingElem: caretRef.current,\n horizontalOffset: 5,\n horizontalPosition: 'center',\n specialHandlingForCaret: true,\n targetRect: rangeRect,\n verticalGap: 10,\n })\n }\n } else {\n closeFloatingToolbar()\n }\n }, [editor, closeFloatingToolbar, anchorElem])\n\n useEffect(() => {\n const scrollerElem = anchorElem.parentElement\n\n const update = () => {\n editor.getEditorState().read(() => {\n $updateTextFormatFloatingToolbar()\n })\n }\n\n window.addEventListener('resize', update)\n if (scrollerElem) {\n scrollerElem.addEventListener('scroll', update)\n }\n\n return () => {\n window.removeEventListener('resize', update)\n if (scrollerElem) {\n scrollerElem.removeEventListener('scroll', update)\n }\n }\n }, [editor, $updateTextFormatFloatingToolbar, anchorElem])\n\n useEffect(() => {\n editor.getEditorState().read(() => {\n $updateTextFormatFloatingToolbar()\n })\n return mergeRegister(\n editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n $updateTextFormatFloatingToolbar()\n })\n }),\n\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n $updateTextFormatFloatingToolbar()\n return false\n },\n COMMAND_PRIORITY_LOW,\n ),\n )\n }, [editor, $updateTextFormatFloatingToolbar])\n\n return (\n <div className=\"inline-toolbar-popup\" ref={floatingToolbarRef}>\n <div className=\"caret\" ref={caretRef} />\n {editor.isEditable() && (\n <React.Fragment>\n {editorConfig?.features &&\n editorConfig.features?.toolbarInline?.groups.map((group, i) => {\n return (\n <ToolbarGroupComponent\n anchorElem={anchorElem}\n editor={editor}\n group={group}\n index={i}\n key={group.key}\n />\n )\n })}\n </React.Fragment>\n )}\n </div>\n )\n}\n\nfunction useInlineToolbar(\n editor: LexicalEditor,\n anchorElem: HTMLElement,\n): React.ReactElement | null {\n const [isText, setIsText] = useState(false)\n\n const updatePopup = useCallback(() => {\n editor.getEditorState().read(() => {\n // Should not to pop up the floating toolbar when using IME input\n if (editor.isComposing()) {\n return\n }\n const selection = $getSelection()\n const nativeSelection = window.getSelection()\n const rootElement = editor.getRootElement()\n\n if (\n nativeSelection !== null &&\n (!$isRangeSelection(selection) ||\n rootElement === null ||\n !rootElement.contains(nativeSelection.anchorNode))\n ) {\n setIsText(false)\n return\n }\n\n if (!$isRangeSelection(selection)) {\n return\n }\n\n if (selection.getTextContent() !== '') {\n const nodes = selection.getNodes()\n let foundNodeWithText = false\n for (const node of nodes) {\n if ($isTextNode(node)) {\n setIsText(true)\n foundNodeWithText = true\n break\n }\n }\n if (!foundNodeWithText) {\n setIsText(false)\n }\n } else {\n setIsText(false)\n }\n\n const rawTextContent = selection.getTextContent().replace(/\\n/g, '')\n if (!selection.isCollapsed() && rawTextContent === '') {\n setIsText(false)\n return\n }\n })\n }, [editor])\n\n useEffect(() => {\n document.addEventListener('selectionchange', updatePopup)\n document.addEventListener('mouseup', updatePopup)\n return () => {\n document.removeEventListener('selectionchange', updatePopup)\n document.removeEventListener('mouseup', updatePopup)\n }\n }, [updatePopup])\n\n useEffect(() => {\n return mergeRegister(\n editor.registerUpdateListener(() => {\n updatePopup()\n }),\n editor.registerRootListener(() => {\n if (editor.getRootElement() === null) {\n setIsText(false)\n }\n }),\n )\n }, [editor, updatePopup])\n\n if (!isText) {\n return null\n }\n\n return createPortal(<InlineToolbar anchorElem={anchorElem} editor={editor} />, anchorElem)\n}\n\nexport const InlineToolbarPlugin: PluginComponentWithAnchor<undefined> = ({ anchorElem }) => {\n const [editor] = useLexicalComposerContext()\n\n return useInlineToolbar(editor, anchorElem)\n}\n"],"names":["useLexicalComposerContext","mergeRegister","$getSelection","$isRangeSelection","$isTextNode","COMMAND_PRIORITY_LOW","SELECTION_CHANGE_COMMAND","useCallback","useEffect","useRef","useState","React","createPortal","useEditorConfigContext","getDOMRangeRect","setFloatingElemPosition","ToolbarButton","ToolbarDropdown","ButtonGroupItem","anchorElem","editor","item","Component","key","ChildComponent","ToolbarGroupComponent","group","index","editorConfig","DropdownIcon","setDropdownIcon","type","items","length","onActiveChange","activeItems","div","className","Icon","groupKey","maxActiveItems","map","features","toolbarInline","groups","InlineToolbar","floatingToolbarRef","caretRef","closeFloatingToolbar","current","isOpacityZero","style","opacity","isPointerEventsNone","pointerEvents","mouseMoveListener","e","buttons","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","addEventListener","removeEventListener","$updateTextFormatFloatingToolbar","selection","nativeSelection","window","getSelection","possibleLinkEditor","querySelector","isLinkEditorVisible","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","offsetIfFlipped","alwaysDisplayOnTop","floatingElem","horizontalPosition","targetRect","anchorFlippedOffset","horizontalOffset","specialHandlingForCaret","verticalGap","scrollerElem","parentElement","update","getEditorState","read","registerUpdateListener","editorState","registerCommand","ref","isEditable","Fragment","i","useInlineToolbar","isText","setIsText","updatePopup","isComposing","getTextContent","nodes","getNodes","foundNodeWithText","node","rawTextContent","replace","registerRootListener","InlineToolbarPlugin"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/field/features/toolbars/inline/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { mergeRegister } from '@lexical/utils'\nimport {\n $getSelection,\n $isRangeSelection,\n $isTextNode,\n COMMAND_PRIORITY_LOW,\n SELECTION_CHANGE_COMMAND,\n} from 'lexical'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport type { PluginComponentWithAnchor } from '../../../types.js'\nimport type { ToolbarGroup, ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { getDOMRangeRect } from '../../../../lexical/utils/getDOMRangeRect.js'\nimport { setFloatingElemPosition } from '../../../../lexical/utils/setFloatingElemPosition.js'\nimport { ToolbarButton } from '../../shared/ToolbarButton/index.js'\nimport { ToolbarDropdown } from '../../shared/ToolbarDropdown/index.js'\nimport './index.scss'\n\nfunction ButtonGroupItem({\n anchorElem,\n editor,\n item,\n}: {\n anchorElem: HTMLElement\n editor: LexicalEditor\n item: ToolbarGroupItem\n}): React.ReactNode {\n if (item.Component) {\n return (\n item?.Component && (\n <item.Component anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n )\n )\n }\n\n return (\n <ToolbarButton editor={editor} item={item} key={item.key}>\n {item?.ChildComponent && <item.ChildComponent />}\n </ToolbarButton>\n )\n}\n\nfunction ToolbarGroupComponent({\n anchorElem,\n editor,\n group,\n index,\n}: {\n anchorElem: HTMLElement\n editor: LexicalEditor\n group: ToolbarGroup\n index: number\n}): React.ReactNode {\n const { editorConfig } = useEditorConfigContext()\n\n const [DropdownIcon, setDropdownIcon] = React.useState<React.FC | null>(null)\n\n React.useEffect(() => {\n if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n setDropdownIcon(() => group.ChildComponent)\n } else {\n setDropdownIcon(null)\n }\n }, [group])\n\n const onActiveChange = ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => {\n if (!activeItems.length) {\n if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {\n setDropdownIcon(() => group.ChildComponent)\n } else {\n setDropdownIcon(null)\n }\n return\n }\n const item = activeItems[0]\n setDropdownIcon(() => item.ChildComponent)\n }\n\n return (\n <div\n className={`inline-toolbar-popup__group inline-toolbar-popup__group-${group.key}`}\n key={group.key}\n >\n {group.type === 'dropdown' &&\n group.items.length &&\n (DropdownIcon ? (\n <ToolbarDropdown\n Icon={DropdownIcon}\n anchorElem={anchorElem}\n editor={editor}\n groupKey={group.key}\n items={group.items}\n maxActiveItems={1}\n onActiveChange={onActiveChange}\n />\n ) : (\n <ToolbarDropdown\n anchorElem={anchorElem}\n editor={editor}\n groupKey={group.key}\n items={group.items}\n maxActiveItems={1}\n onActiveChange={onActiveChange}\n />\n ))}\n {group.type === 'buttons' &&\n group.items.length &&\n group.items.map((item) => {\n return (\n <ButtonGroupItem anchorElem={anchorElem} editor={editor} item={item} key={item.key} />\n )\n })}\n {index < editorConfig.features.toolbarInline?.groups.length - 1 && (\n <div className=\"divider\" />\n )}\n </div>\n )\n}\n\nfunction InlineToolbar({\n anchorElem,\n editor,\n}: {\n anchorElem: HTMLElement\n editor: LexicalEditor\n}): React.ReactNode {\n const floatingToolbarRef = useRef<HTMLDivElement | null>(null)\n const caretRef = useRef<HTMLDivElement | null>(null)\n\n const { editorConfig } = useEditorConfigContext()\n\n const closeFloatingToolbar = useCallback(() => {\n if (floatingToolbarRef?.current) {\n const isOpacityZero = floatingToolbarRef.current.style.opacity === '0'\n const isPointerEventsNone = floatingToolbarRef.current.style.pointerEvents === 'none'\n\n if (!isOpacityZero) {\n floatingToolbarRef.current.style.opacity = '0'\n }\n if (!isPointerEventsNone) {\n floatingToolbarRef.current.style.pointerEvents = 'none'\n }\n }\n }, [floatingToolbarRef])\n\n const mouseMoveListener = useCallback(\n (e: MouseEvent) => {\n if (floatingToolbarRef?.current && (e.buttons === 1 || e.buttons === 3)) {\n const isOpacityZero = floatingToolbarRef.current.style.opacity === '0'\n const isPointerEventsNone = floatingToolbarRef.current.style.pointerEvents === 'none'\n if (!isOpacityZero || !isPointerEventsNone) {\n // Check if the mouse is not over the popup\n const x = e.clientX\n const y = e.clientY\n const elementUnderMouse = document.elementFromPoint(x, y)\n if (!floatingToolbarRef.current.contains(elementUnderMouse)) {\n // Mouse is not over the target element => not a normal click, but probably a drag\n closeFloatingToolbar()\n }\n }\n }\n },\n [closeFloatingToolbar],\n )\n\n const mouseUpListener = useCallback(() => {\n if (floatingToolbarRef?.current) {\n if (floatingToolbarRef.current.style.opacity !== '1') {\n floatingToolbarRef.current.style.opacity = '1'\n }\n if (floatingToolbarRef.current.style.pointerEvents !== 'auto') {\n floatingToolbarRef.current.style.pointerEvents = 'auto'\n }\n }\n }, [])\n\n useEffect(() => {\n document.addEventListener('mousemove', mouseMoveListener)\n document.addEventListener('mouseup', mouseUpListener)\n\n return () => {\n document.removeEventListener('mousemove', mouseMoveListener)\n document.removeEventListener('mouseup', mouseUpListener)\n }\n }, [floatingToolbarRef, mouseMoveListener, mouseUpListener])\n\n const $updateTextFormatFloatingToolbar = useCallback(() => {\n const selection = $getSelection()\n\n const nativeSelection = window.getSelection()\n\n if (floatingToolbarRef.current === null) {\n return\n }\n\n const possibleLinkEditor = anchorElem.querySelector(':scope > .link-editor')\n const isLinkEditorVisible =\n possibleLinkEditor !== null &&\n 'style' in possibleLinkEditor &&\n possibleLinkEditor?.style?.['opacity'] === '1'\n\n const rootElement = editor.getRootElement()\n if (\n selection !== null &&\n nativeSelection !== null &&\n !nativeSelection.isCollapsed &&\n rootElement !== null &&\n rootElement.contains(nativeSelection.anchorNode)\n ) {\n const rangeRect = getDOMRangeRect(nativeSelection, rootElement)\n\n // Position floating toolbar\n const offsetIfFlipped = setFloatingElemPosition({\n alwaysDisplayOnTop: isLinkEditorVisible,\n anchorElem,\n floatingElem: floatingToolbarRef.current,\n horizontalPosition: 'center',\n targetRect: rangeRect,\n })\n\n // Position caret\n if (caretRef.current) {\n setFloatingElemPosition({\n anchorElem: floatingToolbarRef.current,\n anchorFlippedOffset: offsetIfFlipped,\n floatingElem: caretRef.current,\n horizontalOffset: 5,\n horizontalPosition: 'center',\n specialHandlingForCaret: true,\n targetRect: rangeRect,\n verticalGap: 10,\n })\n }\n } else {\n closeFloatingToolbar()\n }\n }, [editor, closeFloatingToolbar, anchorElem])\n\n useEffect(() => {\n const scrollerElem = anchorElem.parentElement\n\n const update = () => {\n editor.getEditorState().read(() => {\n $updateTextFormatFloatingToolbar()\n })\n }\n\n window.addEventListener('resize', update)\n if (scrollerElem) {\n scrollerElem.addEventListener('scroll', update)\n }\n\n return () => {\n window.removeEventListener('resize', update)\n if (scrollerElem) {\n scrollerElem.removeEventListener('scroll', update)\n }\n }\n }, [editor, $updateTextFormatFloatingToolbar, anchorElem])\n\n useEffect(() => {\n editor.getEditorState().read(() => {\n $updateTextFormatFloatingToolbar()\n })\n return mergeRegister(\n editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n $updateTextFormatFloatingToolbar()\n })\n }),\n\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n $updateTextFormatFloatingToolbar()\n return false\n },\n COMMAND_PRIORITY_LOW,\n ),\n )\n }, [editor, $updateTextFormatFloatingToolbar])\n\n return (\n <div className=\"inline-toolbar-popup\" ref={floatingToolbarRef}>\n <div className=\"caret\" ref={caretRef} />\n {editor.isEditable() && (\n <React.Fragment>\n {editorConfig?.features &&\n editorConfig.features?.toolbarInline?.groups.map((group, i) => {\n return (\n <ToolbarGroupComponent\n anchorElem={anchorElem}\n editor={editor}\n group={group}\n index={i}\n key={group.key}\n />\n )\n })}\n </React.Fragment>\n )}\n </div>\n )\n}\n\nfunction useInlineToolbar(\n editor: LexicalEditor,\n anchorElem: HTMLElement,\n): React.ReactElement | null {\n const [isText, setIsText] = useState(false)\n\n const updatePopup = useCallback(() => {\n editor.getEditorState().read(() => {\n // Should not to pop up the floating toolbar when using IME input\n if (editor.isComposing()) {\n return\n }\n const selection = $getSelection()\n const nativeSelection = window.getSelection()\n const rootElement = editor.getRootElement()\n\n if (\n nativeSelection !== null &&\n (!$isRangeSelection(selection) ||\n rootElement === null ||\n !rootElement.contains(nativeSelection.anchorNode))\n ) {\n setIsText(false)\n return\n }\n\n if (!$isRangeSelection(selection)) {\n return\n }\n\n if (selection.getTextContent() !== '') {\n const nodes = selection.getNodes()\n let foundNodeWithText = false\n for (const node of nodes) {\n if ($isTextNode(node)) {\n setIsText(true)\n foundNodeWithText = true\n break\n }\n }\n if (!foundNodeWithText) {\n setIsText(false)\n }\n } else {\n setIsText(false)\n }\n\n const rawTextContent = selection.getTextContent().replace(/\\n/g, '')\n if (!selection.isCollapsed() && rawTextContent === '') {\n setIsText(false)\n return\n }\n })\n }, [editor])\n\n useEffect(() => {\n document.addEventListener('selectionchange', updatePopup)\n document.addEventListener('mouseup', updatePopup)\n return () => {\n document.removeEventListener('selectionchange', updatePopup)\n document.removeEventListener('mouseup', updatePopup)\n }\n }, [updatePopup])\n\n useEffect(() => {\n return mergeRegister(\n editor.registerUpdateListener(() => {\n updatePopup()\n }),\n editor.registerRootListener(() => {\n if (editor.getRootElement() === null) {\n setIsText(false)\n }\n }),\n )\n }, [editor, updatePopup])\n\n if (!isText) {\n return null\n }\n\n return createPortal(<InlineToolbar anchorElem={anchorElem} editor={editor} />, anchorElem)\n}\n\nexport const InlineToolbarPlugin: PluginComponentWithAnchor<undefined> = ({ anchorElem }) => {\n const [editor] = useLexicalComposerContext()\n\n return useInlineToolbar(editor, anchorElem)\n}\n"],"names":["useLexicalComposerContext","mergeRegister","$getSelection","$isRangeSelection","$isTextNode","COMMAND_PRIORITY_LOW","SELECTION_CHANGE_COMMAND","useCallback","useEffect","useRef","useState","React","createPortal","useEditorConfigContext","getDOMRangeRect","setFloatingElemPosition","ToolbarButton","ToolbarDropdown","ButtonGroupItem","anchorElem","editor","item","Component","key","ChildComponent","ToolbarGroupComponent","group","index","editorConfig","DropdownIcon","setDropdownIcon","type","items","length","onActiveChange","activeItems","div","className","Icon","groupKey","maxActiveItems","map","features","toolbarInline","groups","InlineToolbar","floatingToolbarRef","caretRef","closeFloatingToolbar","current","isOpacityZero","style","opacity","isPointerEventsNone","pointerEvents","mouseMoveListener","e","buttons","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","addEventListener","removeEventListener","$updateTextFormatFloatingToolbar","selection","nativeSelection","window","getSelection","possibleLinkEditor","querySelector","isLinkEditorVisible","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","offsetIfFlipped","alwaysDisplayOnTop","floatingElem","horizontalPosition","targetRect","anchorFlippedOffset","horizontalOffset","specialHandlingForCaret","verticalGap","scrollerElem","parentElement","update","getEditorState","read","registerUpdateListener","editorState","registerCommand","ref","isEditable","Fragment","i","useInlineToolbar","isText","setIsText","updatePopup","isComposing","getTextContent","nodes","getNodes","foundNodeWithText","node","rawTextContent","replace","registerRootListener","InlineToolbarPlugin"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/field/features/toolbars/shared/ToolbarButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAI5C,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAGtD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,aAAa,gCAIvB;IACD,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAA;IAC3B,MAAM,EAAE,aAAa,CAAA;IACrB,IAAI,EAAE,gBAAgB,CAAA;CACvB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/field/features/toolbars/shared/ToolbarButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAI5C,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAGtD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,aAAa,gCAIvB;IACD,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAA;IAC3B,MAAM,EAAE,aAAa,CAAA;IACrB,IAAI,EAAE,gBAAgB,CAAA;CACvB,4CAqFA,CAAA"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
3
|
import { mergeRegister } from '@lexical/utils';
|
|
3
4
|
import { $getSelection } from 'lexical';
|
|
4
5
|
import React, { useCallback, useEffect, useState } from 'react';
|
|
@@ -75,7 +76,7 @@ export const ToolbarButton = ({ children, editor, item })=>{
|
|
|
75
76
|
className,
|
|
76
77
|
item.key
|
|
77
78
|
]);
|
|
78
|
-
return /*#__PURE__*/
|
|
79
|
+
return /*#__PURE__*/ _jsx("button", {
|
|
79
80
|
className: className,
|
|
80
81
|
onClick: ()=>{
|
|
81
82
|
if (enabled !== false) {
|
|
@@ -100,8 +101,9 @@ export const ToolbarButton = ({ children, editor, item })=>{
|
|
|
100
101
|
// TODO: Find out why exactly it happens and why e.preventDefault() on the mouseDown fixes it. Write that down here, or potentially fix a root cause, if there is any.
|
|
101
102
|
e.preventDefault();
|
|
102
103
|
},
|
|
103
|
-
type: "button"
|
|
104
|
-
|
|
104
|
+
type: "button",
|
|
105
|
+
children: children
|
|
106
|
+
});
|
|
105
107
|
};
|
|
106
108
|
|
|
107
109
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/field/features/toolbars/shared/ToolbarButton/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { $getSelection } from 'lexical'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorFocus } from '../../../../lexical/EditorFocusProvider.js'\nimport './index.scss'\n\nconst baseClass = 'toolbar-popup__button'\n\nexport const ToolbarButton = ({\n children,\n editor,\n item,\n}: {\n children: React.JSX.Element\n editor: LexicalEditor\n item: ToolbarGroupItem\n}) => {\n const [enabled, setEnabled] = useState<boolean>(true)\n const [active, setActive] = useState<boolean>(false)\n const [className, setClassName] = useState<string>(baseClass)\n const editorFocusContext = useEditorFocus()\n\n const updateStates = useCallback(() => {\n editor.getEditorState().read(() => {\n const selection = $getSelection()\n if (item.isActive) {\n const isActive = item.isActive({ editor, editorFocusContext, selection })\n if (active !== isActive) {\n setActive(isActive)\n }\n }\n if (item.isEnabled) {\n const isEnabled = item.isEnabled({ editor, editorFocusContext, selection })\n if (enabled !== isEnabled) {\n setEnabled(isEnabled)\n }\n }\n })\n }, [active, editor, editorFocusContext, enabled, item])\n\n useEffect(() => {\n updateStates()\n }, [updateStates])\n\n useEffect(() => {\n document.addEventListener('mouseup', updateStates)\n return () => {\n document.removeEventListener('mouseup', updateStates)\n }\n }, [updateStates])\n\n useEffect(() => {\n return mergeRegister(\n editor.registerUpdateListener(() => {\n updateStates()\n }),\n )\n }, [editor, updateStates])\n\n useEffect(() => {\n setClassName(\n [\n baseClass,\n enabled === false ? 'disabled' : '',\n active ? 'active' : '',\n item?.key ? `${baseClass}-` + item.key : '',\n ]\n .filter(Boolean)\n .join(' '),\n )\n }, [enabled, active, className, item.key])\n\n return (\n <button\n className={className}\n onClick={() => {\n if (enabled !== false) {\n editor._updateTags = new Set([...editor._updateTags, 'toolbar']) // without setting the tags, our onSelect will not be able to trigger our onChange as focus onChanges are ignored.\n\n editor.focus(() => {\n // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.\n item.onSelect({\n editor,\n isActive: active,\n })\n })\n\n return true\n }\n }}\n onMouseDown={(e) => {\n // This fixes a bug where you are unable to click the button if you are in a NESTED editor (editor in blocks field in editor).\n // Thus only happens if you click on the SVG of the button. Clicking on the outside works. Related issue: https://github.com/payloadcms/payload/issues/4025\n // TODO: Find out why exactly it happens and why e.preventDefault() on the mouseDown fixes it. Write that down here, or potentially fix a root cause, if there is any.\n e.preventDefault()\n }}\n type=\"button\"\n >\n {children}\n </button>\n )\n}\n"],"names":["mergeRegister","$getSelection","React","useCallback","useEffect","useState","useEditorFocus","baseClass","ToolbarButton","children","editor","item","enabled","setEnabled","active","setActive","className","setClassName","editorFocusContext","updateStates","getEditorState","read","selection","isActive","isEnabled","document","addEventListener","removeEventListener","registerUpdateListener","key","filter","Boolean","join","button","onClick","_updateTags","Set","focus","onSelect","onMouseDown","e","preventDefault","type"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/field/features/toolbars/shared/ToolbarButton/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { mergeRegister } from '@lexical/utils'\nimport { $getSelection } from 'lexical'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { ToolbarGroupItem } from '../../types.js'\n\nimport { useEditorFocus } from '../../../../lexical/EditorFocusProvider.js'\nimport './index.scss'\n\nconst baseClass = 'toolbar-popup__button'\n\nexport const ToolbarButton = ({\n children,\n editor,\n item,\n}: {\n children: React.JSX.Element\n editor: LexicalEditor\n item: ToolbarGroupItem\n}) => {\n const [enabled, setEnabled] = useState<boolean>(true)\n const [active, setActive] = useState<boolean>(false)\n const [className, setClassName] = useState<string>(baseClass)\n const editorFocusContext = useEditorFocus()\n\n const updateStates = useCallback(() => {\n editor.getEditorState().read(() => {\n const selection = $getSelection()\n if (item.isActive) {\n const isActive = item.isActive({ editor, editorFocusContext, selection })\n if (active !== isActive) {\n setActive(isActive)\n }\n }\n if (item.isEnabled) {\n const isEnabled = item.isEnabled({ editor, editorFocusContext, selection })\n if (enabled !== isEnabled) {\n setEnabled(isEnabled)\n }\n }\n })\n }, [active, editor, editorFocusContext, enabled, item])\n\n useEffect(() => {\n updateStates()\n }, [updateStates])\n\n useEffect(() => {\n document.addEventListener('mouseup', updateStates)\n return () => {\n document.removeEventListener('mouseup', updateStates)\n }\n }, [updateStates])\n\n useEffect(() => {\n return mergeRegister(\n editor.registerUpdateListener(() => {\n updateStates()\n }),\n )\n }, [editor, updateStates])\n\n useEffect(() => {\n setClassName(\n [\n baseClass,\n enabled === false ? 'disabled' : '',\n active ? 'active' : '',\n item?.key ? `${baseClass}-` + item.key : '',\n ]\n .filter(Boolean)\n .join(' '),\n )\n }, [enabled, active, className, item.key])\n\n return (\n <button\n className={className}\n onClick={() => {\n if (enabled !== false) {\n editor._updateTags = new Set([...editor._updateTags, 'toolbar']) // without setting the tags, our onSelect will not be able to trigger our onChange as focus onChanges are ignored.\n\n editor.focus(() => {\n // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.\n item.onSelect({\n editor,\n isActive: active,\n })\n })\n\n return true\n }\n }}\n onMouseDown={(e) => {\n // This fixes a bug where you are unable to click the button if you are in a NESTED editor (editor in blocks field in editor).\n // Thus only happens if you click on the SVG of the button. Clicking on the outside works. Related issue: https://github.com/payloadcms/payload/issues/4025\n // TODO: Find out why exactly it happens and why e.preventDefault() on the mouseDown fixes it. Write that down here, or potentially fix a root cause, if there is any.\n e.preventDefault()\n }}\n type=\"button\"\n >\n {children}\n </button>\n )\n}\n"],"names":["mergeRegister","$getSelection","React","useCallback","useEffect","useState","useEditorFocus","baseClass","ToolbarButton","children","editor","item","enabled","setEnabled","active","setActive","className","setClassName","editorFocusContext","updateStates","getEditorState","read","selection","isActive","isEnabled","document","addEventListener","removeEventListener","registerUpdateListener","key","filter","Boolean","join","button","onClick","_updateTags","Set","focus","onSelect","onMouseDown","e","preventDefault","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAGA,SAASA,aAAa,QAAQ,iBAAgB;AAC9C,SAASC,aAAa,QAAQ,UAAS;AACvC,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAI/D,SAASC,cAAc,QAAQ,6CAA4C;AAC3E,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EACRC,MAAM,EACNC,IAAI,EAKL;IACC,MAAM,CAACC,SAASC,WAAW,GAAGR,SAAkB;IAChD,MAAM,CAACS,QAAQC,UAAU,GAAGV,SAAkB;IAC9C,MAAM,CAACW,WAAWC,aAAa,GAAGZ,SAAiBE;IACnD,MAAMW,qBAAqBZ;IAE3B,MAAMa,eAAehB,YAAY;QAC/BO,OAAOU,cAAc,GAAGC,IAAI,CAAC;YAC3B,MAAMC,YAAYrB;YAClB,IAAIU,KAAKY,QAAQ,EAAE;gBACjB,MAAMA,WAAWZ,KAAKY,QAAQ,CAAC;oBAAEb;oBAAQQ;oBAAoBI;gBAAU;gBACvE,IAAIR,WAAWS,UAAU;oBACvBR,UAAUQ;gBACZ;YACF;YACA,IAAIZ,KAAKa,SAAS,EAAE;gBAClB,MAAMA,YAAYb,KAAKa,SAAS,CAAC;oBAAEd;oBAAQQ;oBAAoBI;gBAAU;gBACzE,IAAIV,YAAYY,WAAW;oBACzBX,WAAWW;gBACb;YACF;QACF;IACF,GAAG;QAACV;QAAQJ;QAAQQ;QAAoBN;QAASD;KAAK;IAEtDP,UAAU;QACRe;IACF,GAAG;QAACA;KAAa;IAEjBf,UAAU;QACRqB,SAASC,gBAAgB,CAAC,WAAWP;QACrC,OAAO;YACLM,SAASE,mBAAmB,CAAC,WAAWR;QAC1C;IACF,GAAG;QAACA;KAAa;IAEjBf,UAAU;QACR,OAAOJ,cACLU,OAAOkB,sBAAsB,CAAC;YAC5BT;QACF;IAEJ,GAAG;QAACT;QAAQS;KAAa;IAEzBf,UAAU;QACRa,aACE;YACEV;YACAK,YAAY,QAAQ,aAAa;YACjCE,SAAS,WAAW;YACpBH,MAAMkB,MAAM,CAAC,EAAEtB,UAAU,CAAC,CAAC,GAAGI,KAAKkB,GAAG,GAAG;SAC1C,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IAEZ,GAAG;QAACpB;QAASE;QAAQE;QAAWL,KAAKkB,GAAG;KAAC;IAEzC,qBACE,KAACI;QACCjB,WAAWA;QACXkB,SAAS;YACP,IAAItB,YAAY,OAAO;gBACrBF,OAAOyB,WAAW,GAAG,IAAIC,IAAI;uBAAI1B,OAAOyB,WAAW;oBAAE;iBAAU,EAAE,kHAAkH;;gBAEnLzB,OAAO2B,KAAK,CAAC;oBACX,iHAAiH;oBACjH1B,KAAK2B,QAAQ,CAAC;wBACZ5B;wBACAa,UAAUT;oBACZ;gBACF;gBAEA,OAAO;YACT;QACF;QACAyB,aAAa,CAACC;YACZ,8HAA8H;YAC9H,2JAA2J;YAC3J,sKAAsK;YACtKA,EAAEC,cAAc;QAClB;QACAC,MAAK;kBAEJjC;;AAGP,EAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../../../../src/field/features/toolbars/shared/ToolbarDropdown/DropDown.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,OAAO,EAAE,KAAK,SAAS,EAAqD,MAAM,OAAO,CAAA;AACzF,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAUtD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,QAAQ,EACR,MAAM,EACN,OAAO,EACP,IAAI,EACJ,KAAK,GACN,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,EAAE,aAAa,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,gBAAgB,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,KAAK,CAAC,SAAS,CA4DlB;
|
|
1
|
+
{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../../../../src/field/features/toolbars/shared/ToolbarDropdown/DropDown.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,OAAO,EAAE,KAAK,SAAS,EAAqD,MAAM,OAAO,CAAA;AACzF,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAUtD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,QAAQ,EACR,MAAM,EACN,OAAO,EACP,IAAI,EACJ,KAAK,GACN,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,EAAE,aAAa,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,gBAAgB,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,KAAK,CAAC,SAAS,CA4DlB;AA+ED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,eAAe,EACf,eAAe,EACf,QAAQ,EACR,QAAgB,EAChB,wBAAwB,EACxB,KAAK,EACL,oBAAoB,GACrB,EAAE;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACf,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wBAAwB,CAAC,EAAE,MAAM,EAAE,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,GAAG,KAAK,CAAC,SAAS,CAsFlB"}
|