@webiny/lexical-editor 5.43.5 → 5.43.6
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/components/Toolbar/Toolbar.d.ts +5 -0
- package/components/Toolbar/Toolbar.js +9 -1
- package/components/Toolbar/Toolbar.js.map +1 -1
- package/hooks/useCurrentElement.d.ts +2 -2
- package/package.json +7 -7
- package/utils/isChildOfFloatingToolbar.js +3 -0
- package/utils/isChildOfFloatingToolbar.js.map +1 -1
|
@@ -121,12 +121,20 @@ var FloatingToolbar = function FloatingToolbar(_ref) {
|
|
|
121
121
|
return false;
|
|
122
122
|
}, _lexical.COMMAND_PRIORITY_LOW));
|
|
123
123
|
}, [editor, updateTextFormatFloatingToolbar]);
|
|
124
|
+
var onMouseEnter = (0, _react.useCallback)(function () {
|
|
125
|
+
document["floatingToolbar"] = true;
|
|
126
|
+
}, []);
|
|
127
|
+
var onMouseLeave = (0, _react.useCallback)(function () {
|
|
128
|
+
document["floatingToolbar"] = false;
|
|
129
|
+
}, []);
|
|
124
130
|
if (!isVisible) {
|
|
125
131
|
return null;
|
|
126
132
|
}
|
|
127
133
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
128
134
|
ref: popupCharStylesEditorRef,
|
|
129
|
-
className: "floating-toolbar"
|
|
135
|
+
className: "floating-toolbar",
|
|
136
|
+
onMouseEnter: onMouseEnter,
|
|
137
|
+
onMouseLeave: onMouseLeave
|
|
130
138
|
}, editor.isEditable() && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toolbarElements.map(function (action) {
|
|
131
139
|
return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
|
|
132
140
|
key: action.name
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_reactDom","_utils","_getDOMRangeRect","_setFloatingElemPosition","_LexicalEditorConfig","_useCurrentSelection","_hooks","_isChildOfFloatingToolbar","_commands","FloatingToolbar","_ref","anchorElem","editor","_useState","useState","_useState2","_slicedToArray2","default","isVisible","setIsVisible","popupCharStylesEditorRef","useRef","_useLexicalEditorConf","useLexicalEditorConfig","toolbarElements","mouseMoveListener","useCallback","e","current","buttons","style","pointerEvents","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","useEffect","addEventListener","removeEventListener","updateTextFormatFloatingToolbar","selection","$getSelection","popupCharStylesEditorElem","nativeSelection","window","getSelection","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","scrollerElem","parentElement","update","getEditorState","read","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","HIDE_FLOATING_TOOLBAR","setTimeout","COMMAND_PRIORITY_LOW","SELECTION_CHANGE_COMMAND","BLUR_COMMAND","payload","isChildOfFloatingToolbar","relatedTarget","createElement","ref","className","isEditable","Fragment","map","action","key","name","element","Toolbar","exports","_ref3","_ref3$anchorElem","body","_useRichTextEditor","useRichTextEditor","showToolbar","useDeriveValueFromSelection","_ref4","rangeSelection","createPortal"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, Fragment, useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n $getSelection,\n BLUR_COMMAND,\n COMMAND_PRIORITY_LOW,\n LexicalEditor,\n SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport \"./Toolbar.css\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\nimport { isChildOfFloatingToolbar } from \"~/utils/isChildOfFloatingToolbar\";\nimport { HIDE_FLOATING_TOOLBAR } from \"~/commands\";\n\ninterface FloatingToolbarProps {\n anchorElem: HTMLElement;\n editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ anchorElem, editor }) => {\n const [isVisible, setIsVisible] = useState(true);\n const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n const { toolbarElements } = useLexicalEditorConfig();\n\n const mouseMoveListener = useCallback(\n (e: MouseEvent) => {\n /* Indicates which mouse button(s) was pressed.\n / 1 = mouse left button\n / 3 = mouse left and right button in the same time\n / More info: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons\n */\n if (popupCharStylesEditorRef?.current && (e.buttons === 1 || e.buttons === 3)) {\n if (popupCharStylesEditorRef.current.style.pointerEvents !== \"none\") {\n const x = e.clientX;\n const y = e.clientY;\n const elementUnderMouse = document.elementFromPoint(x, y);\n\n if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {\n // Mouse is not over the target element => not a normal click, but probably a drag\n popupCharStylesEditorRef.current.style.pointerEvents = \"none\";\n }\n }\n }\n },\n [popupCharStylesEditorRef]\n );\n\n const mouseUpListener = useCallback(() => {\n if (popupCharStylesEditorRef?.current) {\n if (popupCharStylesEditorRef.current.style.pointerEvents !== \"auto\") {\n popupCharStylesEditorRef.current.style.pointerEvents = \"auto\";\n }\n }\n }, [popupCharStylesEditorRef]);\n\n useEffect(() => {\n if (popupCharStylesEditorRef?.current) {\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 }\n return;\n }, [popupCharStylesEditorRef]);\n\n const updateTextFormatFloatingToolbar = useCallback(() => {\n const selection = $getSelection();\n\n const popupCharStylesEditorElem = popupCharStylesEditorRef.current;\n const nativeSelection = window.getSelection();\n\n if (popupCharStylesEditorElem === null) {\n return;\n }\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 setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);\n }\n }, [editor, 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 HIDE_FLOATING_TOOLBAR,\n () => {\n setTimeout(() => {\n setIsVisible(false);\n }, 10);\n return true;\n },\n COMMAND_PRIORITY_LOW\n ),\n\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n setIsVisible(true);\n updateTextFormatFloatingToolbar();\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n\n editor.registerCommand(\n BLUR_COMMAND,\n payload => {\n if (!isChildOfFloatingToolbar(payload.relatedTarget as HTMLElement)) {\n setIsVisible(false);\n }\n\n return false;\n },\n COMMAND_PRIORITY_LOW\n )\n );\n }, [editor, updateTextFormatFloatingToolbar]);\n\n if (!isVisible) {\n return null;\n }\n\n return (\n <div ref={popupCharStylesEditorRef} className=\"floating-toolbar\">\n {editor.isEditable() && (\n <>\n {toolbarElements.map(action => (\n <Fragment key={action.name}>{action.element}</Fragment>\n ))}\n </>\n )}\n </div>\n );\n};\n\nexport interface ToolbarProps {\n anchorElem?: HTMLElement;\n}\n\nexport const Toolbar = ({ anchorElem = document.body }: ToolbarProps) => {\n const { editor } = useRichTextEditor();\n const showToolbar = useDeriveValueFromSelection(({ rangeSelection }) => {\n if (!rangeSelection) {\n return false;\n }\n\n return !rangeSelection.isCollapsed();\n });\n\n if (!showToolbar) {\n return null;\n }\n\n return createPortal(<FloatingToolbar anchorElem={anchorElem} editor={editor} />, anchorElem);\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_reactDom","_utils","_getDOMRangeRect","_setFloatingElemPosition","_LexicalEditorConfig","_useCurrentSelection","_hooks","_isChildOfFloatingToolbar","_commands","FloatingToolbar","_ref","anchorElem","editor","_useState","useState","_useState2","_slicedToArray2","default","isVisible","setIsVisible","popupCharStylesEditorRef","useRef","_useLexicalEditorConf","useLexicalEditorConfig","toolbarElements","mouseMoveListener","useCallback","e","current","buttons","style","pointerEvents","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","useEffect","addEventListener","removeEventListener","updateTextFormatFloatingToolbar","selection","$getSelection","popupCharStylesEditorElem","nativeSelection","window","getSelection","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","scrollerElem","parentElement","update","getEditorState","read","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","HIDE_FLOATING_TOOLBAR","setTimeout","COMMAND_PRIORITY_LOW","SELECTION_CHANGE_COMMAND","BLUR_COMMAND","payload","isChildOfFloatingToolbar","relatedTarget","onMouseEnter","onMouseLeave","createElement","ref","className","isEditable","Fragment","map","action","key","name","element","Toolbar","exports","_ref3","_ref3$anchorElem","body","_useRichTextEditor","useRichTextEditor","showToolbar","useDeriveValueFromSelection","_ref4","rangeSelection","createPortal"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, Fragment, useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n $getSelection,\n BLUR_COMMAND,\n COMMAND_PRIORITY_LOW,\n LexicalEditor,\n SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport \"./Toolbar.css\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\nimport { isChildOfFloatingToolbar } from \"~/utils/isChildOfFloatingToolbar\";\nimport { HIDE_FLOATING_TOOLBAR } from \"~/commands\";\n\ndeclare global {\n interface Document {\n floatingToolbar: boolean;\n }\n}\n\ninterface FloatingToolbarProps {\n anchorElem: HTMLElement;\n editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ anchorElem, editor }) => {\n const [isVisible, setIsVisible] = useState(true);\n const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n const { toolbarElements } = useLexicalEditorConfig();\n\n const mouseMoveListener = useCallback(\n (e: MouseEvent) => {\n /* Indicates which mouse button(s) was pressed.\n / 1 = mouse left button\n / 3 = mouse left and right button in the same time\n / More info: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons\n */\n if (popupCharStylesEditorRef?.current && (e.buttons === 1 || e.buttons === 3)) {\n if (popupCharStylesEditorRef.current.style.pointerEvents !== \"none\") {\n const x = e.clientX;\n const y = e.clientY;\n const elementUnderMouse = document.elementFromPoint(x, y);\n\n if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {\n // Mouse is not over the target element => not a normal click, but probably a drag\n popupCharStylesEditorRef.current.style.pointerEvents = \"none\";\n }\n }\n }\n },\n [popupCharStylesEditorRef]\n );\n\n const mouseUpListener = useCallback(() => {\n if (popupCharStylesEditorRef?.current) {\n if (popupCharStylesEditorRef.current.style.pointerEvents !== \"auto\") {\n popupCharStylesEditorRef.current.style.pointerEvents = \"auto\";\n }\n }\n }, [popupCharStylesEditorRef]);\n\n useEffect(() => {\n if (popupCharStylesEditorRef?.current) {\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 }\n return;\n }, [popupCharStylesEditorRef]);\n\n const updateTextFormatFloatingToolbar = useCallback(() => {\n const selection = $getSelection();\n\n const popupCharStylesEditorElem = popupCharStylesEditorRef.current;\n const nativeSelection = window.getSelection();\n\n if (popupCharStylesEditorElem === null) {\n return;\n }\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 setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);\n }\n }, [editor, 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 HIDE_FLOATING_TOOLBAR,\n () => {\n setTimeout(() => {\n setIsVisible(false);\n }, 10);\n return true;\n },\n COMMAND_PRIORITY_LOW\n ),\n\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n setIsVisible(true);\n updateTextFormatFloatingToolbar();\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n\n editor.registerCommand(\n BLUR_COMMAND,\n payload => {\n if (!isChildOfFloatingToolbar(payload.relatedTarget as HTMLElement)) {\n setIsVisible(false);\n }\n\n return false;\n },\n COMMAND_PRIORITY_LOW\n )\n );\n }, [editor, updateTextFormatFloatingToolbar]);\n\n const onMouseEnter = useCallback(() => {\n document[\"floatingToolbar\"] = true;\n }, []);\n\n const onMouseLeave = useCallback(() => {\n document[\"floatingToolbar\"] = false;\n }, []);\n\n if (!isVisible) {\n return null;\n }\n\n return (\n <div\n ref={popupCharStylesEditorRef}\n className=\"floating-toolbar\"\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n >\n {editor.isEditable() && (\n <>\n {toolbarElements.map(action => (\n <Fragment key={action.name}>{action.element}</Fragment>\n ))}\n </>\n )}\n </div>\n );\n};\n\nexport interface ToolbarProps {\n anchorElem?: HTMLElement;\n}\n\nexport const Toolbar = ({ anchorElem = document.body }: ToolbarProps) => {\n const { editor } = useRichTextEditor();\n const showToolbar = useDeriveValueFromSelection(({ rangeSelection }) => {\n if (!rangeSelection) {\n return false;\n }\n\n return !rangeSelection.isCollapsed();\n });\n\n if (!showToolbar) {\n return null;\n }\n\n return createPortal(<FloatingToolbar anchorElem={anchorElem} editor={editor} />, anchorElem);\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -2,6 +2,6 @@ import { RangeSelection } from "lexical";
|
|
|
2
2
|
export declare function useCurrentElement(): {
|
|
3
3
|
element: null;
|
|
4
4
|
} | {
|
|
5
|
-
element: import("lexical").
|
|
5
|
+
element: import("lexical").LexicalNode | import("lexical").TextNode;
|
|
6
6
|
};
|
|
7
|
-
export declare function getNodeFromSelection(selection: RangeSelection): import("lexical").
|
|
7
|
+
export declare function getNodeFromSelection(selection: RangeSelection): import("lexical").LexicalNode | import("lexical").TextNode;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/lexical-editor",
|
|
3
|
-
"version": "5.43.
|
|
3
|
+
"version": "5.43.6",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/webiny/webiny-js.git"
|
|
@@ -15,17 +15,17 @@
|
|
|
15
15
|
"@lexical/selection": "0.23.1",
|
|
16
16
|
"@lexical/text": "0.23.1",
|
|
17
17
|
"@lexical/utils": "0.23.1",
|
|
18
|
-
"@webiny/lexical-nodes": "5.43.
|
|
19
|
-
"@webiny/lexical-theme": "5.43.
|
|
20
|
-
"@webiny/react-composition": "5.43.
|
|
21
|
-
"@webiny/react-properties": "5.43.
|
|
18
|
+
"@webiny/lexical-nodes": "5.43.6",
|
|
19
|
+
"@webiny/lexical-theme": "5.43.6",
|
|
20
|
+
"@webiny/react-composition": "5.43.6",
|
|
21
|
+
"@webiny/react-properties": "5.43.6",
|
|
22
22
|
"emotion": "10.0.27",
|
|
23
23
|
"lexical": "0.23.1",
|
|
24
24
|
"react": "18.2.0",
|
|
25
25
|
"react-dom": "18.2.0"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"@webiny/project-utils": "5.43.
|
|
28
|
+
"@webiny/project-utils": "5.43.6"
|
|
29
29
|
},
|
|
30
30
|
"publishConfig": {
|
|
31
31
|
"access": "public",
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"build": "node ../cli/bin.js run build",
|
|
36
36
|
"watch": "node ../cli/bin.js run watch"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "32e742e0043a9d4930d1c68c990eb6976882c820"
|
|
39
39
|
}
|
|
@@ -5,6 +5,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.isChildOfFloatingToolbar = void 0;
|
|
7
7
|
var _isChildOfFloatingToolbar = exports.isChildOfFloatingToolbar = function isChildOfFloatingToolbar(element) {
|
|
8
|
+
if (!element && document["floatingToolbar"]) {
|
|
9
|
+
return true;
|
|
10
|
+
}
|
|
8
11
|
var parent = element ? element.parentElement : null;
|
|
9
12
|
if (!parent) {
|
|
10
13
|
return false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["isChildOfFloatingToolbar","exports","element","parent","parentElement","classList","contains"],"sources":["isChildOfFloatingToolbar.ts"],"sourcesContent":["export const isChildOfFloatingToolbar = (element: HTMLElement | null): boolean => {\n const parent = element ? element.parentElement : null;\n\n if (!parent) {\n return false;\n }\n\n if (parent.classList.contains(\"floating-toolbar\")) {\n return true;\n }\n\n return isChildOfFloatingToolbar(parent);\n};\n"],"mappings":";;;;;;AAAO,IAAMA,yBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,SAA3BA,wBAAwBA,CAAIE,OAA2B,EAAc;EAC9E,IAAMC,MAAM,
|
|
1
|
+
{"version":3,"names":["isChildOfFloatingToolbar","exports","element","document","parent","parentElement","classList","contains"],"sources":["isChildOfFloatingToolbar.ts"],"sourcesContent":["export const isChildOfFloatingToolbar = (element: HTMLElement | null): boolean => {\n if (!element && document[\"floatingToolbar\"]) {\n return true;\n }\n\n const parent = element ? element.parentElement : null;\n\n if (!parent) {\n return false;\n }\n\n if (parent.classList.contains(\"floating-toolbar\")) {\n return true;\n }\n\n return isChildOfFloatingToolbar(parent);\n};\n"],"mappings":";;;;;;AAAO,IAAMA,yBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,SAA3BA,wBAAwBA,CAAIE,OAA2B,EAAc;EAC9E,IAAI,CAACA,OAAO,IAAIC,QAAQ,CAAC,iBAAiB,CAAC,EAAE;IACzC,OAAO,IAAI;EACf;EAEA,IAAMC,MAAM,GAAGF,OAAO,GAAGA,OAAO,CAACG,aAAa,GAAG,IAAI;EAErD,IAAI,CAACD,MAAM,EAAE;IACT,OAAO,KAAK;EAChB;EAEA,IAAIA,MAAM,CAACE,SAAS,CAACC,QAAQ,CAAC,kBAAkB,CAAC,EAAE;IAC/C,OAAO,IAAI;EACf;EAEA,OAAOP,yBAAwB,CAACI,MAAM,CAAC;AAC3C,CAAC","ignoreList":[]}
|