@webiny/lexical-nodes 6.0.0-alpha.5 β 6.0.0-rc.0
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/FontColorNode.d.ts +3 -3
- package/FontColorNode.js +12 -6
- package/FontColorNode.js.map +1 -1
- package/HeadingNode.d.ts +4 -4
- package/HeadingNode.js +14 -11
- package/HeadingNode.js.map +1 -1
- package/ImageNode.d.ts +1 -11
- package/ImageNode.js +8 -34
- package/ImageNode.js.map +1 -1
- package/LinkNode.js +1 -3
- package/LinkNode.js.map +1 -1
- package/ListItemNode.js +5 -6
- package/ListItemNode.js.map +1 -1
- package/ListNode.d.ts +4 -4
- package/ListNode.js +14 -19
- package/ListNode.js.map +1 -1
- package/ParagraphNode.d.ts +3 -3
- package/ParagraphNode.js +15 -13
- package/ParagraphNode.js.map +1 -1
- package/QuoteNode.d.ts +3 -3
- package/QuoteNode.js +7 -11
- package/QuoteNode.js.map +1 -1
- package/README.md +9 -4
- package/components/ImageNode/ImageComponent.d.ts +2 -7
- package/components/ImageNode/ImageComponent.js +10 -84
- package/components/ImageNode/ImageComponent.js.map +1 -1
- package/components/ImageNode/ImageResizer.d.ts +1 -8
- package/components/ImageNode/ImageResizer.js +2 -12
- package/components/ImageNode/ImageResizer.js.map +1 -1
- package/index.d.ts +17 -17
- package/index.js +31 -28
- package/index.js.map +1 -1
- package/package.json +16 -20
- package/prepareLexicalState.js +2 -2
- package/prepareLexicalState.js.map +1 -1
- package/utils/formatList.d.ts +2 -2
- package/utils/formatList.js +4 -4
- package/utils/formatList.js.map +1 -1
- package/utils/formatToHeading.js +1 -1
- package/utils/formatToHeading.js.map +1 -1
- package/utils/formatToParagraph.js +1 -1
- package/utils/formatToParagraph.js.map +1 -1
- package/utils/formatToQuote.js +1 -1
- package/utils/formatToQuote.js.map +1 -1
- package/utils/getStyleId.d.ts +1 -1
- package/utils/getStyleId.js.map +1 -1
- package/utils/listNode.d.ts +2 -2
- package/utils/listNode.js +2 -2
- package/utils/listNode.js.map +1 -1
- package/utils/toggleLink.d.ts +1 -1
- package/utils/toggleLink.js +1 -1
- package/utils/toggleLink.js.map +1 -1
- package/components/ImageNode/ContentEditable.css +0 -22
- package/components/ImageNode/ContentEditable.d.ts +0 -12
- package/components/ImageNode/ContentEditable.js +0 -19
- package/components/ImageNode/ContentEditable.js.map +0 -1
- package/components/ImageNode/ImageComponent.css +0 -43
- package/components/ImageNode/Placeholder.css +0 -20
- package/components/ImageNode/Placeholder.d.ts +0 -15
- package/components/ImageNode/Placeholder.js +0 -24
- package/components/ImageNode/Placeholder.js.map +0 -1
- package/components/ImageNode/SharedHistoryContext.d.ts +0 -10
- package/components/ImageNode/SharedHistoryContext.js +0 -19
- package/components/ImageNode/SharedHistoryContext.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
# @webiny/lexical-nodes
|
|
2
2
|
|
|
3
|
-
[!
|
|
4
|
-
[
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
> [!NOTE]
|
|
4
|
+
> This package is part of the [Webiny](https://www.webiny.com) monorepo.
|
|
5
|
+
> Itβs **included in every Webiny project by default** and is not meant to be used as a standalone package.
|
|
6
|
+
|
|
7
|
+
π **Documentation:** [https://www.webiny.com/docs](https://www.webiny.com/docs)
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
_This README file is automatically generated during the publish process._
|
|
@@ -1,18 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
import type { LexicalEditor, NodeKey } from "lexical";
|
|
3
|
-
import "./ImageComponent.css";
|
|
1
|
+
import type { NodeKey } from "lexical";
|
|
4
2
|
interface ImageComponentProps {
|
|
5
3
|
id: string;
|
|
6
4
|
altText: string;
|
|
7
|
-
caption: LexicalEditor;
|
|
8
5
|
height: "inherit" | number;
|
|
9
6
|
maxWidth: number;
|
|
10
7
|
nodeKey: NodeKey;
|
|
11
8
|
resizable: boolean;
|
|
12
|
-
showCaption: boolean;
|
|
13
9
|
src: string;
|
|
14
10
|
width: "inherit" | number;
|
|
15
|
-
captionsEnabled: boolean;
|
|
16
11
|
}
|
|
17
|
-
export default function ImageComponent({ id, src, altText, nodeKey, width, height, maxWidth, resizable
|
|
12
|
+
export default function ImageComponent({ id, src, altText, nodeKey, width, height, maxWidth, resizable }: ImageComponentProps): JSX.Element;
|
|
18
13
|
export {};
|
|
@@ -7,21 +7,12 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as React from "react";
|
|
9
9
|
import { Suspense, useCallback, useEffect, useRef, useState } from "react";
|
|
10
|
-
import "
|
|
11
|
-
import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
|
|
10
|
+
import { mergeRegister } from "lexical";
|
|
12
11
|
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
|
13
|
-
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
|
|
14
|
-
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
|
|
15
|
-
import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
|
|
16
|
-
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
|
|
17
12
|
import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import { ImageResizer } from "./ImageResizer";
|
|
22
|
-
import { useSharedHistoryContext } from "./SharedHistoryContext";
|
|
23
|
-
import { $isImageNode } from "../../ImageNode";
|
|
24
|
-
import { LexicalContentEditable } from "./ContentEditable";
|
|
13
|
+
import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, DRAGSTART_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, SELECTION_CHANGE_COMMAND } from "lexical";
|
|
14
|
+
import { ImageResizer } from "./ImageResizer.js";
|
|
15
|
+
import { $isImageNode } from "../../ImageNode.js";
|
|
25
16
|
const imageCache = new Set();
|
|
26
17
|
function useSuspenseImage(src) {
|
|
27
18
|
if (!imageCache.has(src)) {
|
|
@@ -68,13 +59,9 @@ export default function ImageComponent({
|
|
|
68
59
|
width,
|
|
69
60
|
height,
|
|
70
61
|
maxWidth,
|
|
71
|
-
resizable
|
|
72
|
-
showCaption,
|
|
73
|
-
caption,
|
|
74
|
-
captionsEnabled
|
|
62
|
+
resizable
|
|
75
63
|
}) {
|
|
76
64
|
const imageRef = useRef(null);
|
|
77
|
-
const buttonRef = useRef(null);
|
|
78
65
|
const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
|
|
79
66
|
const [isResizing, setIsResizing] = useState(false);
|
|
80
67
|
const [editor] = useLexicalComposerContext();
|
|
@@ -92,38 +79,6 @@ export default function ImageComponent({
|
|
|
92
79
|
}
|
|
93
80
|
return false;
|
|
94
81
|
}, [isSelected, nodeKey, setSelected]);
|
|
95
|
-
const onEnter = useCallback(event => {
|
|
96
|
-
const latestSelection = $getSelection();
|
|
97
|
-
const buttonElem = buttonRef.current;
|
|
98
|
-
if (isSelected && $isNodeSelection(latestSelection) && latestSelection.getNodes().length === 1) {
|
|
99
|
-
if (showCaption) {
|
|
100
|
-
// Move focus into nested editor
|
|
101
|
-
$setSelection(null);
|
|
102
|
-
event.preventDefault();
|
|
103
|
-
caption.focus();
|
|
104
|
-
return true;
|
|
105
|
-
} else if (buttonElem !== null && buttonElem !== document.activeElement) {
|
|
106
|
-
event.preventDefault();
|
|
107
|
-
buttonElem.focus();
|
|
108
|
-
return true;
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
return false;
|
|
112
|
-
}, [caption, isSelected, showCaption]);
|
|
113
|
-
const onEscape = useCallback(event => {
|
|
114
|
-
if (activeEditorRef.current === caption || buttonRef.current === event.target) {
|
|
115
|
-
$setSelection(null);
|
|
116
|
-
editor.update(() => {
|
|
117
|
-
setSelected(true);
|
|
118
|
-
const parentRootElement = editor.getRootElement();
|
|
119
|
-
if (parentRootElement !== null) {
|
|
120
|
-
parentRootElement.focus();
|
|
121
|
-
}
|
|
122
|
-
});
|
|
123
|
-
return true;
|
|
124
|
-
}
|
|
125
|
-
return false;
|
|
126
|
-
}, [caption, editor, setSelected]);
|
|
127
82
|
useEffect(() => {
|
|
128
83
|
let isMounted = true;
|
|
129
84
|
const unregister = mergeRegister(editor.registerUpdateListener(({
|
|
@@ -158,20 +113,12 @@ export default function ImageComponent({
|
|
|
158
113
|
return true;
|
|
159
114
|
}
|
|
160
115
|
return false;
|
|
161
|
-
}, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW)
|
|
116
|
+
}, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW));
|
|
162
117
|
return () => {
|
|
163
118
|
isMounted = false;
|
|
164
119
|
unregister();
|
|
165
120
|
};
|
|
166
|
-
}, [clearSelection, editor, isResizing, isSelected, nodeKey, onDelete,
|
|
167
|
-
const setShowCaption = () => {
|
|
168
|
-
editor.update(() => {
|
|
169
|
-
const node = $getNodeByKey(nodeKey);
|
|
170
|
-
if ($isImageNode(node)) {
|
|
171
|
-
node.setShowCaption(true);
|
|
172
|
-
}
|
|
173
|
-
});
|
|
174
|
-
};
|
|
121
|
+
}, [clearSelection, editor, isResizing, isSelected, nodeKey, onDelete, setSelected]);
|
|
175
122
|
const onResizeEnd = (nextWidth, nextHeight) => {
|
|
176
123
|
// Delay hiding the resize bars for click case
|
|
177
124
|
setTimeout(() => {
|
|
@@ -187,9 +134,6 @@ export default function ImageComponent({
|
|
|
187
134
|
const onResizeStart = () => {
|
|
188
135
|
setIsResizing(true);
|
|
189
136
|
};
|
|
190
|
-
const {
|
|
191
|
-
historyState
|
|
192
|
-
} = useSharedHistoryContext();
|
|
193
137
|
const draggable = isSelected && $isNodeSelection(selection) && !isResizing;
|
|
194
138
|
const isFocused = isSelected || isResizing;
|
|
195
139
|
return /*#__PURE__*/React.createElement(Suspense, {
|
|
@@ -205,31 +149,13 @@ export default function ImageComponent({
|
|
|
205
149
|
width: width,
|
|
206
150
|
height: height,
|
|
207
151
|
maxWidth: maxWidth
|
|
208
|
-
})),
|
|
209
|
-
className: "image-caption-container"
|
|
210
|
-
}, /*#__PURE__*/React.createElement(LexicalNestedComposer, {
|
|
211
|
-
initialEditor: caption
|
|
212
|
-
}, /*#__PURE__*/React.createElement(AutoFocusPlugin, null), /*#__PURE__*/React.createElement(HistoryPlugin, {
|
|
213
|
-
externalHistoryState: historyState
|
|
214
|
-
}), /*#__PURE__*/React.createElement(RichTextPlugin, {
|
|
215
|
-
contentEditable: /*#__PURE__*/React.createElement(LexicalContentEditable, {
|
|
216
|
-
className: "ImageNode__contentEditable"
|
|
217
|
-
}),
|
|
218
|
-
placeholder: /*#__PURE__*/React.createElement(Placeholder, {
|
|
219
|
-
className: "ImageNode__placeholder"
|
|
220
|
-
}, "Enter a caption..."),
|
|
221
|
-
ErrorBoundary: LexicalErrorBoundary
|
|
222
|
-
}))), resizable && $isNodeSelection(selection) && isFocused && /*#__PURE__*/React.createElement(ImageResizer, {
|
|
223
|
-
showCaption: showCaption,
|
|
224
|
-
setShowCaption: setShowCaption,
|
|
152
|
+
})), resizable && $isNodeSelection(selection) && isFocused ? /*#__PURE__*/React.createElement(ImageResizer, {
|
|
225
153
|
editor: editor,
|
|
226
|
-
buttonRef: buttonRef,
|
|
227
154
|
imageRef: imageRef,
|
|
228
155
|
maxWidth: maxWidth,
|
|
229
156
|
onResizeStart: onResizeStart,
|
|
230
|
-
onResizeEnd: onResizeEnd
|
|
231
|
-
|
|
232
|
-
})));
|
|
157
|
+
onResizeEnd: onResizeEnd
|
|
158
|
+
}) : null));
|
|
233
159
|
}
|
|
234
160
|
|
|
235
161
|
//# sourceMappingURL=ImageComponent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Suspense","useCallback","useEffect","useRef","useState","AutoFocusPlugin","useLexicalComposerContext","LexicalErrorBoundary","HistoryPlugin","LexicalNestedComposer","RichTextPlugin","useLexicalNodeSelection","mergeRegister","$getNodeByKey","$getSelection","$isNodeSelection","$setSelection","CLICK_COMMAND","COMMAND_PRIORITY_LOW","DRAGSTART_COMMAND","KEY_BACKSPACE_COMMAND","KEY_DELETE_COMMAND","KEY_ENTER_COMMAND","KEY_ESCAPE_COMMAND","SELECTION_CHANGE_COMMAND","Placeholder","ImageResizer","useSharedHistoryContext","$isImageNode","LexicalContentEditable","imageCache","Set","useSuspenseImage","src","has","Promise","resolve","img","Image","onload","add","LazyImage","id","altText","className","imageRef","width","height","maxWidth","createElement","undefined","alt","ref","style","draggable","ImageComponent","nodeKey","resizable","showCaption","caption","captionsEnabled","buttonRef","isSelected","setSelected","clearSelection","isResizing","setIsResizing","editor","selection","setSelection","activeEditorRef","onDelete","payload","event","preventDefault","node","remove","onEnter","latestSelection","buttonElem","current","getNodes","length","focus","document","activeElement","onEscape","target","update","parentRootElement","getRootElement","isMounted","unregister","registerUpdateListener","editorState","read","registerCommand","_","activeEditor","shiftKey","setShowCaption","onResizeEnd","nextWidth","nextHeight","setTimeout","setWidthAndHeight","onResizeStart","historyState","isFocused","fallback","Fragment","initialEditor","externalHistoryState","contentEditable","placeholder","ErrorBoundary"],"sources":["ImageComponent.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\nimport * as React from \"react\";\nimport { Suspense, useCallback, useEffect, useRef, useState } from \"react\";\n\nimport type { LexicalEditor, NodeKey, BaseSelection } from \"lexical\";\n\nimport \"./ImageComponent.css\";\n\nimport { AutoFocusPlugin } from \"@lexical/react/LexicalAutoFocusPlugin\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { LexicalNestedComposer } from \"@lexical/react/LexicalNestedComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { useLexicalNodeSelection } from \"@lexical/react/useLexicalNodeSelection\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n $getNodeByKey,\n $getSelection,\n $isNodeSelection,\n $setSelection,\n CLICK_COMMAND,\n COMMAND_PRIORITY_LOW,\n DRAGSTART_COMMAND,\n KEY_BACKSPACE_COMMAND,\n KEY_DELETE_COMMAND,\n KEY_ENTER_COMMAND,\n KEY_ESCAPE_COMMAND,\n SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { Placeholder } from \"./Placeholder\";\nimport { ImageResizer } from \"./ImageResizer\";\nimport { useSharedHistoryContext } from \"./SharedHistoryContext\";\nimport { $isImageNode } from \"~/ImageNode\";\nimport { LexicalContentEditable } from \"./ContentEditable\";\n\nconst imageCache = new Set();\n\nfunction useSuspenseImage(src: string) {\n if (!imageCache.has(src)) {\n throw new Promise(resolve => {\n const img = new Image();\n img.src = src;\n img.onload = () => {\n imageCache.add(src);\n resolve(null);\n };\n });\n }\n}\n\nfunction LazyImage({\n id,\n altText,\n className,\n imageRef,\n src,\n width,\n height,\n maxWidth\n}: {\n id: string;\n altText: string;\n className: string | null;\n height: \"inherit\" | number;\n imageRef: { current: null | HTMLImageElement };\n maxWidth: number;\n src: string;\n width: \"inherit\" | number;\n}): JSX.Element {\n useSuspenseImage(src);\n return (\n <img\n id={id}\n className={className || undefined}\n src={src}\n alt={altText}\n ref={imageRef}\n style={{\n height,\n maxWidth,\n width\n }}\n draggable=\"false\"\n />\n );\n}\n\ninterface ImageComponentProps {\n id: string;\n altText: string;\n caption: LexicalEditor;\n height: \"inherit\" | number;\n maxWidth: number;\n nodeKey: NodeKey;\n resizable: boolean;\n showCaption: boolean;\n src: string;\n width: \"inherit\" | number;\n captionsEnabled: boolean;\n}\n\nexport default function ImageComponent({\n id,\n src,\n altText,\n nodeKey,\n width,\n height,\n maxWidth,\n resizable,\n showCaption,\n caption,\n captionsEnabled\n}: ImageComponentProps): JSX.Element {\n const imageRef = useRef<null | HTMLImageElement>(null);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);\n const [isResizing, setIsResizing] = useState<boolean>(false);\n const [editor] = useLexicalComposerContext();\n const [selection, setSelection] = useState<BaseSelection | null>(null);\n const activeEditorRef = useRef<LexicalEditor | null>(null);\n\n const onDelete = useCallback(\n (payload: KeyboardEvent) => {\n if (isSelected && $isNodeSelection($getSelection())) {\n const event: KeyboardEvent = payload;\n event.preventDefault();\n const node = $getNodeByKey(nodeKey);\n if ($isImageNode(node)) {\n node.remove();\n }\n setSelected(false);\n }\n return false;\n },\n [isSelected, nodeKey, setSelected]\n );\n\n const onEnter = useCallback(\n (event: KeyboardEvent) => {\n const latestSelection = $getSelection();\n const buttonElem = buttonRef.current;\n if (\n isSelected &&\n $isNodeSelection(latestSelection) &&\n latestSelection.getNodes().length === 1\n ) {\n if (showCaption) {\n // Move focus into nested editor\n $setSelection(null);\n event.preventDefault();\n caption.focus();\n return true;\n } else if (buttonElem !== null && buttonElem !== document.activeElement) {\n event.preventDefault();\n buttonElem.focus();\n return true;\n }\n }\n return false;\n },\n [caption, isSelected, showCaption]\n );\n\n const onEscape = useCallback(\n (event: KeyboardEvent) => {\n if (activeEditorRef.current === caption || buttonRef.current === event.target) {\n $setSelection(null);\n editor.update(() => {\n setSelected(true);\n const parentRootElement = editor.getRootElement();\n if (parentRootElement !== null) {\n parentRootElement.focus();\n }\n });\n return true;\n }\n return false;\n },\n [caption, editor, setSelected]\n );\n\n useEffect(() => {\n let isMounted = true;\n const unregister = mergeRegister(\n editor.registerUpdateListener(({ editorState }) => {\n if (isMounted) {\n setSelection(editorState.read(() => $getSelection()));\n }\n }),\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n (_, activeEditor) => {\n activeEditorRef.current = activeEditor;\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand<MouseEvent>(\n CLICK_COMMAND,\n payload => {\n const event = payload;\n if (isResizing) {\n return true;\n }\n if (event.target === imageRef.current) {\n if (event.shiftKey) {\n setSelected(!isSelected);\n } else {\n clearSelection();\n setSelected(true);\n }\n return true;\n }\n\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n DRAGSTART_COMMAND,\n event => {\n if (event.target === imageRef.current) {\n // TODO This is just a temporary workaround for FF to behave like other browsers.\n // Ideally, this handles drag & drop too (and all browsers).\n event.preventDefault();\n return true;\n }\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),\n editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),\n editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_LOW),\n editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_LOW)\n );\n return () => {\n isMounted = false;\n unregister();\n };\n }, [\n clearSelection,\n editor,\n isResizing,\n isSelected,\n nodeKey,\n onDelete,\n onEnter,\n onEscape,\n setSelected\n ]);\n\n const setShowCaption = () => {\n editor.update(() => {\n const node = $getNodeByKey(nodeKey);\n if ($isImageNode(node)) {\n node.setShowCaption(true);\n }\n });\n };\n\n const onResizeEnd = (nextWidth: \"inherit\" | number, nextHeight: \"inherit\" | number) => {\n // Delay hiding the resize bars for click case\n setTimeout(() => {\n setIsResizing(false);\n }, 200);\n\n editor.update(() => {\n const node = $getNodeByKey(nodeKey);\n if ($isImageNode(node)) {\n node.setWidthAndHeight(nextWidth, nextHeight);\n }\n });\n };\n\n const onResizeStart = () => {\n setIsResizing(true);\n };\n\n const { historyState } = useSharedHistoryContext();\n const draggable = isSelected && $isNodeSelection(selection) && !isResizing;\n const isFocused = isSelected || isResizing;\n return (\n <Suspense fallback={null}>\n <>\n <div draggable={draggable}>\n <LazyImage\n id={id}\n className={\n isFocused\n ? `focused ${$isNodeSelection(selection) ? \"draggable\" : \"\"}`\n : null\n }\n src={src}\n altText={altText}\n imageRef={imageRef}\n width={width}\n height={height}\n maxWidth={maxWidth}\n />\n </div>\n {showCaption && (\n <div className=\"image-caption-container\">\n <LexicalNestedComposer initialEditor={caption}>\n <AutoFocusPlugin />\n <HistoryPlugin externalHistoryState={historyState} />\n <RichTextPlugin\n contentEditable={\n <LexicalContentEditable className=\"ImageNode__contentEditable\" />\n }\n placeholder={\n <Placeholder className=\"ImageNode__placeholder\">\n Enter a caption...\n </Placeholder>\n }\n ErrorBoundary={LexicalErrorBoundary}\n />\n </LexicalNestedComposer>\n </div>\n )}\n {resizable && $isNodeSelection(selection) && isFocused && (\n <ImageResizer\n showCaption={showCaption}\n setShowCaption={setShowCaption}\n editor={editor}\n buttonRef={buttonRef}\n imageRef={imageRef}\n maxWidth={maxWidth}\n onResizeStart={onResizeStart}\n onResizeEnd={onResizeEnd}\n captionsEnabled={captionsEnabled}\n />\n )}\n </>\n </Suspense>\n );\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["React","Suspense","useCallback","useEffect","useRef","useState","mergeRegister","useLexicalComposerContext","useLexicalNodeSelection","$getNodeByKey","$getSelection","$isNodeSelection","CLICK_COMMAND","COMMAND_PRIORITY_LOW","DRAGSTART_COMMAND","KEY_BACKSPACE_COMMAND","KEY_DELETE_COMMAND","SELECTION_CHANGE_COMMAND","ImageResizer","$isImageNode","imageCache","Set","useSuspenseImage","src","has","Promise","resolve","img","Image","onload","add","LazyImage","id","altText","className","imageRef","width","height","maxWidth","createElement","undefined","alt","ref","style","draggable","ImageComponent","nodeKey","resizable","isSelected","setSelected","clearSelection","isResizing","setIsResizing","editor","selection","setSelection","activeEditorRef","onDelete","payload","event","preventDefault","node","remove","isMounted","unregister","registerUpdateListener","editorState","read","registerCommand","_","activeEditor","current","target","shiftKey","onResizeEnd","nextWidth","nextHeight","setTimeout","update","setWidthAndHeight","onResizeStart","isFocused","fallback","Fragment"],"sources":["ImageComponent.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\nimport * as React from \"react\";\nimport { Suspense, useCallback, useEffect, useRef, useState } from \"react\";\n\nimport type { LexicalEditor, NodeKey, BaseSelection } from \"lexical\";\nimport { mergeRegister } from \"lexical\";\n\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { useLexicalNodeSelection } from \"@lexical/react/useLexicalNodeSelection\";\nimport {\n $getNodeByKey,\n $getSelection,\n $isNodeSelection,\n CLICK_COMMAND,\n COMMAND_PRIORITY_LOW,\n DRAGSTART_COMMAND,\n KEY_BACKSPACE_COMMAND,\n KEY_DELETE_COMMAND,\n SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { ImageResizer } from \"./ImageResizer.js\";\nimport { $isImageNode } from \"~/ImageNode.js\";\n\nconst imageCache = new Set();\n\nfunction useSuspenseImage(src: string) {\n if (!imageCache.has(src)) {\n throw new Promise(resolve => {\n const img = new Image();\n img.src = src;\n img.onload = () => {\n imageCache.add(src);\n resolve(null);\n };\n });\n }\n}\n\nfunction LazyImage({\n id,\n altText,\n className,\n imageRef,\n src,\n width,\n height,\n maxWidth\n}: {\n id: string;\n altText: string;\n className: string | null;\n height: \"inherit\" | number;\n imageRef: { current: null | HTMLImageElement };\n maxWidth: number;\n src: string;\n width: \"inherit\" | number;\n}): JSX.Element {\n useSuspenseImage(src);\n return (\n <img\n id={id}\n className={className || undefined}\n src={src}\n alt={altText}\n ref={imageRef}\n style={{\n height,\n maxWidth,\n width\n }}\n draggable=\"false\"\n />\n );\n}\n\ninterface ImageComponentProps {\n id: string;\n altText: string;\n height: \"inherit\" | number;\n maxWidth: number;\n nodeKey: NodeKey;\n resizable: boolean;\n src: string;\n width: \"inherit\" | number;\n}\n\nexport default function ImageComponent({\n id,\n src,\n altText,\n nodeKey,\n width,\n height,\n maxWidth,\n resizable\n}: ImageComponentProps): JSX.Element {\n const imageRef = useRef<null | HTMLImageElement>(null);\n const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);\n const [isResizing, setIsResizing] = useState<boolean>(false);\n const [editor] = useLexicalComposerContext();\n const [selection, setSelection] = useState<BaseSelection | null>(null);\n const activeEditorRef = useRef<LexicalEditor | null>(null);\n\n const onDelete = useCallback(\n (payload: KeyboardEvent) => {\n if (isSelected && $isNodeSelection($getSelection())) {\n const event: KeyboardEvent = payload;\n event.preventDefault();\n const node = $getNodeByKey(nodeKey);\n if ($isImageNode(node)) {\n node.remove();\n }\n setSelected(false);\n }\n return false;\n },\n [isSelected, nodeKey, setSelected]\n );\n\n useEffect(() => {\n let isMounted = true;\n const unregister = mergeRegister(\n editor.registerUpdateListener(({ editorState }) => {\n if (isMounted) {\n setSelection(editorState.read(() => $getSelection()));\n }\n }),\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n (_, activeEditor) => {\n activeEditorRef.current = activeEditor;\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand<MouseEvent>(\n CLICK_COMMAND,\n payload => {\n const event = payload;\n if (isResizing) {\n return true;\n }\n if (event.target === imageRef.current) {\n if (event.shiftKey) {\n setSelected(!isSelected);\n } else {\n clearSelection();\n setSelected(true);\n }\n return true;\n }\n\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n DRAGSTART_COMMAND,\n event => {\n if (event.target === imageRef.current) {\n // TODO This is just a temporary workaround for FF to behave like other browsers.\n // Ideally, this handles drag & drop too (and all browsers).\n event.preventDefault();\n return true;\n }\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),\n editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW)\n );\n return () => {\n isMounted = false;\n unregister();\n };\n }, [clearSelection, editor, isResizing, isSelected, nodeKey, onDelete, setSelected]);\n\n const onResizeEnd = (nextWidth: \"inherit\" | number, nextHeight: \"inherit\" | number) => {\n // Delay hiding the resize bars for click case\n setTimeout(() => {\n setIsResizing(false);\n }, 200);\n\n editor.update(() => {\n const node = $getNodeByKey(nodeKey);\n if ($isImageNode(node)) {\n node.setWidthAndHeight(nextWidth, nextHeight);\n }\n });\n };\n\n const onResizeStart = () => {\n setIsResizing(true);\n };\n\n const draggable = isSelected && $isNodeSelection(selection) && !isResizing;\n const isFocused = isSelected || isResizing;\n return (\n <Suspense fallback={null}>\n <>\n <div draggable={draggable}>\n <LazyImage\n id={id}\n className={\n isFocused\n ? `focused ${$isNodeSelection(selection) ? \"draggable\" : \"\"}`\n : null\n }\n src={src}\n altText={altText}\n imageRef={imageRef}\n width={width}\n height={height}\n maxWidth={maxWidth}\n />\n </div>\n {resizable && $isNodeSelection(selection) && isFocused ? (\n <ImageResizer\n editor={editor}\n imageRef={imageRef}\n maxWidth={maxWidth}\n onResizeStart={onResizeStart}\n onResizeEnd={onResizeEnd}\n />\n ) : null}\n </>\n </Suspense>\n );\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -5,20 +5,13 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
|
-
/// <reference types="react" />
|
|
9
8
|
import type { LexicalEditor } from "lexical";
|
|
10
|
-
export declare function ImageResizer({ onResizeStart, onResizeEnd,
|
|
9
|
+
export declare function ImageResizer({ onResizeStart, onResizeEnd, imageRef, maxWidth, editor }: {
|
|
11
10
|
editor: LexicalEditor;
|
|
12
|
-
buttonRef: {
|
|
13
|
-
current: null | HTMLButtonElement;
|
|
14
|
-
};
|
|
15
11
|
imageRef: {
|
|
16
12
|
current: null | HTMLElement;
|
|
17
13
|
};
|
|
18
14
|
maxWidth?: number;
|
|
19
15
|
onResizeEnd: (width: "inherit" | number, height: "inherit" | number) => void;
|
|
20
16
|
onResizeStart: () => void;
|
|
21
|
-
setShowCaption: (show: boolean) => void;
|
|
22
|
-
showCaption: boolean;
|
|
23
|
-
captionsEnabled: boolean;
|
|
24
17
|
}): JSX.Element;
|
|
@@ -20,13 +20,9 @@ const Direction = {
|
|
|
20
20
|
export function ImageResizer({
|
|
21
21
|
onResizeStart,
|
|
22
22
|
onResizeEnd,
|
|
23
|
-
buttonRef,
|
|
24
23
|
imageRef,
|
|
25
24
|
maxWidth,
|
|
26
|
-
editor
|
|
27
|
-
showCaption,
|
|
28
|
-
setShowCaption,
|
|
29
|
-
captionsEnabled
|
|
25
|
+
editor
|
|
30
26
|
}) {
|
|
31
27
|
const controlWrapperRef = useRef(null);
|
|
32
28
|
const userSelect = useRef({
|
|
@@ -159,13 +155,7 @@ export function ImageResizer({
|
|
|
159
155
|
};
|
|
160
156
|
return /*#__PURE__*/React.createElement("div", {
|
|
161
157
|
ref: controlWrapperRef
|
|
162
|
-
},
|
|
163
|
-
className: "image-caption-button",
|
|
164
|
-
ref: buttonRef,
|
|
165
|
-
onClick: () => {
|
|
166
|
-
setShowCaption(!showCaption);
|
|
167
|
-
}
|
|
168
|
-
}, "Add Caption"), /*#__PURE__*/React.createElement("div", {
|
|
158
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
169
159
|
className: "image-resizer image-resizer-n",
|
|
170
160
|
onPointerDown: event => {
|
|
171
161
|
handlePointerDown(event, Direction.north);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useRef","clamp","value","min","max","Math","Direction","east","north","south","west","ImageResizer","onResizeStart","onResizeEnd","buttonRef","imageRef","maxWidth","editor","showCaption","setShowCaption","captionsEnabled","controlWrapperRef","userSelect","priority","positioningRef","currentHeight","currentWidth","direction","isResizing","ratio","startHeight","startWidth","startX","startY","editorRootElement","getRootElement","maxWidthContainer","getBoundingClientRect","width","maxHeightContainer","height","minWidth","minHeight","setStartCursor","ew","ns","nwse","cursorDir","style","setProperty","document","body","current","getPropertyValue","getPropertyPriority","setEndCursor","handlePointerDown","event","isEditable","image","controlWrapper","positioning","clientX","clientY","classList","add","addEventListener","handlePointerMove","handlePointerUp","isHorizontal","isVertical","diff","floor","remove","removeEventListener","createElement","ref","className","onClick","onPointerDown"],"sources":["ImageResizer.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { LexicalEditor } from \"lexical\";\n\nimport * as React from \"react\";\nimport { useRef } from \"react\";\n\nfunction clamp(value: number, min: number, max: number) {\n return Math.min(Math.max(value, min), max);\n}\n\nconst Direction = {\n east: 1 << 0,\n north: 1 << 3,\n south: 1 << 1,\n west: 1 << 2\n};\n\nexport function ImageResizer({\n onResizeStart,\n onResizeEnd,\n buttonRef,\n imageRef,\n maxWidth,\n editor,\n showCaption,\n setShowCaption,\n captionsEnabled\n}: {\n editor: LexicalEditor;\n buttonRef: { current: null | HTMLButtonElement };\n imageRef: { current: null | HTMLElement };\n maxWidth?: number;\n onResizeEnd: (width: \"inherit\" | number, height: \"inherit\" | number) => void;\n onResizeStart: () => void;\n setShowCaption: (show: boolean) => void;\n showCaption: boolean;\n captionsEnabled: boolean;\n}): JSX.Element {\n const controlWrapperRef = useRef<HTMLDivElement>(null);\n const userSelect = useRef({\n priority: \"\",\n value: \"default\"\n });\n const positioningRef = useRef<{\n currentHeight: \"inherit\" | number;\n currentWidth: \"inherit\" | number;\n direction: number;\n isResizing: boolean;\n ratio: number;\n startHeight: number;\n startWidth: number;\n startX: number;\n startY: number;\n }>({\n currentHeight: 0,\n currentWidth: 0,\n direction: 0,\n isResizing: false,\n ratio: 0,\n startHeight: 0,\n startWidth: 0,\n startX: 0,\n startY: 0\n });\n const editorRootElement = editor.getRootElement();\n // Find max width, accounting for editor padding.\n const maxWidthContainer = maxWidth\n ? maxWidth\n : editorRootElement !== null\n ? editorRootElement.getBoundingClientRect().width - 20\n : 100;\n const maxHeightContainer =\n editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;\n\n const minWidth = 100;\n const minHeight = 100;\n\n const setStartCursor = (direction: number) => {\n const ew = direction === Direction.east || direction === Direction.west;\n const ns = direction === Direction.north || direction === Direction.south;\n const nwse =\n (direction & Direction.north && direction & Direction.west) ||\n (direction & Direction.south && direction & Direction.east);\n\n const cursorDir = ew ? \"ew\" : ns ? \"ns\" : nwse ? \"nwse\" : \"nesw\";\n\n if (editorRootElement !== null) {\n editorRootElement.style.setProperty(\"cursor\", `${cursorDir}-resize`, \"important\");\n }\n if (document.body !== null) {\n document.body.style.setProperty(\"cursor\", `${cursorDir}-resize`, \"important\");\n userSelect.current.value = document.body.style.getPropertyValue(\"-webkit-user-select\");\n userSelect.current.priority =\n document.body.style.getPropertyPriority(\"-webkit-user-select\");\n document.body.style.setProperty(\"-webkit-user-select\", `none`, \"important\");\n }\n };\n\n const setEndCursor = () => {\n if (editorRootElement !== null) {\n editorRootElement.style.setProperty(\"cursor\", \"text\");\n }\n if (document.body !== null) {\n document.body.style.setProperty(\"cursor\", \"default\");\n document.body.style.setProperty(\n \"-webkit-user-select\",\n userSelect.current.value,\n userSelect.current.priority\n );\n }\n };\n\n const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>, direction: number) => {\n if (!editor.isEditable()) {\n return;\n }\n\n const image = imageRef.current;\n const controlWrapper = controlWrapperRef.current;\n\n if (image !== null && controlWrapper !== null) {\n const { width, height } = image.getBoundingClientRect();\n const positioning = positioningRef.current;\n positioning.startWidth = width;\n positioning.startHeight = height;\n positioning.ratio = width / height;\n positioning.currentWidth = width;\n positioning.currentHeight = height;\n positioning.startX = event.clientX;\n positioning.startY = event.clientY;\n positioning.isResizing = true;\n positioning.direction = direction;\n\n setStartCursor(direction);\n onResizeStart();\n\n controlWrapper.classList.add(\"image-control-wrapper--resizing\");\n image.style.height = `${height}px`;\n image.style.width = `${width}px`;\n\n document.addEventListener(\"pointermove\", handlePointerMove);\n document.addEventListener(\"pointerup\", handlePointerUp);\n }\n };\n const handlePointerMove = (event: PointerEvent) => {\n const image = imageRef.current;\n const positioning = positioningRef.current;\n\n const isHorizontal = positioning.direction & (Direction.east | Direction.west);\n const isVertical = positioning.direction & (Direction.south | Direction.north);\n\n if (image !== null && positioning.isResizing) {\n // Corner cursor\n if (isHorizontal && isVertical) {\n let diff = Math.floor(positioning.startX - event.clientX);\n diff = positioning.direction & Direction.east ? -diff : diff;\n\n const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);\n\n const height = width / positioning.ratio;\n image.style.width = `${width}px`;\n image.style.height = `${height}px`;\n positioning.currentHeight = height;\n positioning.currentWidth = width;\n } else if (isVertical) {\n let diff = Math.floor(positioning.startY - event.clientY);\n diff = positioning.direction & Direction.south ? -diff : diff;\n\n const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);\n\n image.style.height = `${height}px`;\n positioning.currentHeight = height;\n } else {\n let diff = Math.floor(positioning.startX - event.clientX);\n diff = positioning.direction & Direction.east ? -diff : diff;\n\n const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);\n\n image.style.width = `${width}px`;\n positioning.currentWidth = width;\n }\n }\n };\n const handlePointerUp = () => {\n const image = imageRef.current;\n const positioning = positioningRef.current;\n const controlWrapper = controlWrapperRef.current;\n if (image !== null && controlWrapper !== null && positioning.isResizing) {\n const width = positioning.currentWidth;\n const height = positioning.currentHeight;\n positioning.startWidth = 0;\n positioning.startHeight = 0;\n positioning.ratio = 0;\n positioning.startX = 0;\n positioning.startY = 0;\n positioning.currentWidth = 0;\n positioning.currentHeight = 0;\n positioning.isResizing = false;\n\n controlWrapper.classList.remove(\"image-control-wrapper--resizing\");\n\n setEndCursor();\n onResizeEnd(width, height);\n\n document.removeEventListener(\"pointermove\", handlePointerMove);\n document.removeEventListener(\"pointerup\", handlePointerUp);\n }\n };\n return (\n <div ref={controlWrapperRef}>\n {!showCaption && captionsEnabled && (\n <button\n className=\"image-caption-button\"\n ref={buttonRef}\n onClick={() => {\n setShowCaption(!showCaption);\n }}\n >\n Add Caption\n </button>\n )}\n <div\n className=\"image-resizer image-resizer-n\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.north);\n }}\n />\n <div\n className=\"image-resizer image-resizer-ne\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.north | Direction.east);\n }}\n />\n <div\n className=\"image-resizer image-resizer-e\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.east);\n }}\n />\n <div\n className=\"image-resizer image-resizer-se\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.south | Direction.east);\n }}\n />\n <div\n className=\"image-resizer image-resizer-s\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.south);\n }}\n />\n <div\n className=\"image-resizer image-resizer-sw\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.south | Direction.west);\n }}\n />\n <div\n className=\"image-resizer image-resizer-w\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.west);\n }}\n />\n <div\n className=\"image-resizer image-resizer-nw\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.north | Direction.west);\n }}\n />\n </div>\n );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,QAAQ,OAAO;AAE9B,SAASC,KAAKA,CAACC,KAAa,EAAEC,GAAW,EAAEC,GAAW,EAAE;EACpD,OAAOC,IAAI,CAACF,GAAG,CAACE,IAAI,CAACD,GAAG,CAACF,KAAK,EAAEC,GAAG,CAAC,EAAEC,GAAG,CAAC;AAC9C;AAEA,MAAME,SAAS,GAAG;EACdC,IAAI,EAAE,CAAC,IAAI,CAAC;EACZC,KAAK,EAAE,CAAC,IAAI,CAAC;EACbC,KAAK,EAAE,CAAC,IAAI,CAAC;EACbC,IAAI,EAAE,CAAC,IAAI;AACf,CAAC;AAED,OAAO,SAASC,YAAYA,CAAC;EACzBC,aAAa;EACbC,WAAW;EACXC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,MAAM;EACNC,WAAW;EACXC,cAAc;EACdC;AAWJ,CAAC,EAAe;EACZ,MAAMC,iBAAiB,GAAGrB,MAAM,CAAiB,IAAI,CAAC;EACtD,MAAMsB,UAAU,GAAGtB,MAAM,CAAC;IACtBuB,QAAQ,EAAE,EAAE;IACZrB,KAAK,EAAE;EACX,CAAC,CAAC;EACF,MAAMsB,cAAc,GAAGxB,MAAM,CAU1B;IACCyB,aAAa,EAAE,CAAC;IAChBC,YAAY,EAAE,CAAC;IACfC,SAAS,EAAE,CAAC;IACZC,UAAU,EAAE,KAAK;IACjBC,KAAK,EAAE,CAAC;IACRC,WAAW,EAAE,CAAC;IACdC,UAAU,EAAE,CAAC;IACbC,MAAM,EAAE,CAAC;IACTC,MAAM,EAAE;EACZ,CAAC,CAAC;EACF,MAAMC,iBAAiB,GAAGjB,MAAM,CAACkB,cAAc,CAAC,CAAC;EACjD;EACA,MAAMC,iBAAiB,GAAGpB,QAAQ,GAC5BA,QAAQ,GACRkB,iBAAiB,KAAK,IAAI,GAC1BA,iBAAiB,CAACG,qBAAqB,CAAC,CAAC,CAACC,KAAK,GAAG,EAAE,GACpD,GAAG;EACT,MAAMC,kBAAkB,GACpBL,iBAAiB,KAAK,IAAI,GAAGA,iBAAiB,CAACG,qBAAqB,CAAC,CAAC,CAACG,MAAM,GAAG,EAAE,GAAG,GAAG;EAE5F,MAAMC,QAAQ,GAAG,GAAG;EACpB,MAAMC,SAAS,GAAG,GAAG;EAErB,MAAMC,cAAc,GAAIhB,SAAiB,IAAK;IAC1C,MAAMiB,EAAE,GAAGjB,SAAS,KAAKrB,SAAS,CAACC,IAAI,IAAIoB,SAAS,KAAKrB,SAAS,CAACI,IAAI;IACvE,MAAMmC,EAAE,GAAGlB,SAAS,KAAKrB,SAAS,CAACE,KAAK,IAAImB,SAAS,KAAKrB,SAAS,CAACG,KAAK;IACzE,MAAMqC,IAAI,GACLnB,SAAS,GAAGrB,SAAS,CAACE,KAAK,IAAImB,SAAS,GAAGrB,SAAS,CAACI,IAAI,IACzDiB,SAAS,GAAGrB,SAAS,CAACG,KAAK,IAAIkB,SAAS,GAAGrB,SAAS,CAACC,IAAK;IAE/D,MAAMwC,SAAS,GAAGH,EAAE,GAAG,IAAI,GAAGC,EAAE,GAAG,IAAI,GAAGC,IAAI,GAAG,MAAM,GAAG,MAAM;IAEhE,IAAIZ,iBAAiB,KAAK,IAAI,EAAE;MAC5BA,iBAAiB,CAACc,KAAK,CAACC,WAAW,CAAC,QAAQ,EAAE,GAAGF,SAAS,SAAS,EAAE,WAAW,CAAC;IACrF;IACA,IAAIG,QAAQ,CAACC,IAAI,KAAK,IAAI,EAAE;MACxBD,QAAQ,CAACC,IAAI,CAACH,KAAK,CAACC,WAAW,CAAC,QAAQ,EAAE,GAAGF,SAAS,SAAS,EAAE,WAAW,CAAC;MAC7EzB,UAAU,CAAC8B,OAAO,CAAClD,KAAK,GAAGgD,QAAQ,CAACC,IAAI,CAACH,KAAK,CAACK,gBAAgB,CAAC,qBAAqB,CAAC;MACtF/B,UAAU,CAAC8B,OAAO,CAAC7B,QAAQ,GACvB2B,QAAQ,CAACC,IAAI,CAACH,KAAK,CAACM,mBAAmB,CAAC,qBAAqB,CAAC;MAClEJ,QAAQ,CAACC,IAAI,CAACH,KAAK,CAACC,WAAW,CAAC,qBAAqB,EAAE,MAAM,EAAE,WAAW,CAAC;IAC/E;EACJ,CAAC;EAED,MAAMM,YAAY,GAAGA,CAAA,KAAM;IACvB,IAAIrB,iBAAiB,KAAK,IAAI,EAAE;MAC5BA,iBAAiB,CAACc,KAAK,CAACC,WAAW,CAAC,QAAQ,EAAE,MAAM,CAAC;IACzD;IACA,IAAIC,QAAQ,CAACC,IAAI,KAAK,IAAI,EAAE;MACxBD,QAAQ,CAACC,IAAI,CAACH,KAAK,CAACC,WAAW,CAAC,QAAQ,EAAE,SAAS,CAAC;MACpDC,QAAQ,CAACC,IAAI,CAACH,KAAK,CAACC,WAAW,CAC3B,qBAAqB,EACrB3B,UAAU,CAAC8B,OAAO,CAAClD,KAAK,EACxBoB,UAAU,CAAC8B,OAAO,CAAC7B,QACvB,CAAC;IACL;EACJ,CAAC;EAED,MAAMiC,iBAAiB,GAAGA,CAACC,KAAyC,EAAE9B,SAAiB,KAAK;IACxF,IAAI,CAACV,MAAM,CAACyC,UAAU,CAAC,CAAC,EAAE;MACtB;IACJ;IAEA,MAAMC,KAAK,GAAG5C,QAAQ,CAACqC,OAAO;IAC9B,MAAMQ,cAAc,GAAGvC,iBAAiB,CAAC+B,OAAO;IAEhD,IAAIO,KAAK,KAAK,IAAI,IAAIC,cAAc,KAAK,IAAI,EAAE;MAC3C,MAAM;QAAEtB,KAAK;QAAEE;MAAO,CAAC,GAAGmB,KAAK,CAACtB,qBAAqB,CAAC,CAAC;MACvD,MAAMwB,WAAW,GAAGrC,cAAc,CAAC4B,OAAO;MAC1CS,WAAW,CAAC9B,UAAU,GAAGO,KAAK;MAC9BuB,WAAW,CAAC/B,WAAW,GAAGU,MAAM;MAChCqB,WAAW,CAAChC,KAAK,GAAGS,KAAK,GAAGE,MAAM;MAClCqB,WAAW,CAACnC,YAAY,GAAGY,KAAK;MAChCuB,WAAW,CAACpC,aAAa,GAAGe,MAAM;MAClCqB,WAAW,CAAC7B,MAAM,GAAGyB,KAAK,CAACK,OAAO;MAClCD,WAAW,CAAC5B,MAAM,GAAGwB,KAAK,CAACM,OAAO;MAClCF,WAAW,CAACjC,UAAU,GAAG,IAAI;MAC7BiC,WAAW,CAAClC,SAAS,GAAGA,SAAS;MAEjCgB,cAAc,CAAChB,SAAS,CAAC;MACzBf,aAAa,CAAC,CAAC;MAEfgD,cAAc,CAACI,SAAS,CAACC,GAAG,CAAC,iCAAiC,CAAC;MAC/DN,KAAK,CAACX,KAAK,CAACR,MAAM,GAAG,GAAGA,MAAM,IAAI;MAClCmB,KAAK,CAACX,KAAK,CAACV,KAAK,GAAG,GAAGA,KAAK,IAAI;MAEhCY,QAAQ,CAACgB,gBAAgB,CAAC,aAAa,EAAEC,iBAAiB,CAAC;MAC3DjB,QAAQ,CAACgB,gBAAgB,CAAC,WAAW,EAAEE,eAAe,CAAC;IAC3D;EACJ,CAAC;EACD,MAAMD,iBAAiB,GAAIV,KAAmB,IAAK;IAC/C,MAAME,KAAK,GAAG5C,QAAQ,CAACqC,OAAO;IAC9B,MAAMS,WAAW,GAAGrC,cAAc,CAAC4B,OAAO;IAE1C,MAAMiB,YAAY,GAAGR,WAAW,CAAClC,SAAS,IAAIrB,SAAS,CAACC,IAAI,GAAGD,SAAS,CAACI,IAAI,CAAC;IAC9E,MAAM4D,UAAU,GAAGT,WAAW,CAAClC,SAAS,IAAIrB,SAAS,CAACG,KAAK,GAAGH,SAAS,CAACE,KAAK,CAAC;IAE9E,IAAImD,KAAK,KAAK,IAAI,IAAIE,WAAW,CAACjC,UAAU,EAAE;MAC1C;MACA,IAAIyC,YAAY,IAAIC,UAAU,EAAE;QAC5B,IAAIC,IAAI,GAAGlE,IAAI,CAACmE,KAAK,CAACX,WAAW,CAAC7B,MAAM,GAAGyB,KAAK,CAACK,OAAO,CAAC;QACzDS,IAAI,GAAGV,WAAW,CAAClC,SAAS,GAAGrB,SAAS,CAACC,IAAI,GAAG,CAACgE,IAAI,GAAGA,IAAI;QAE5D,MAAMjC,KAAK,GAAGrC,KAAK,CAAC4D,WAAW,CAAC9B,UAAU,GAAGwC,IAAI,EAAE9B,QAAQ,EAAEL,iBAAiB,CAAC;QAE/E,MAAMI,MAAM,GAAGF,KAAK,GAAGuB,WAAW,CAAChC,KAAK;QACxC8B,KAAK,CAACX,KAAK,CAACV,KAAK,GAAG,GAAGA,KAAK,IAAI;QAChCqB,KAAK,CAACX,KAAK,CAACR,MAAM,GAAG,GAAGA,MAAM,IAAI;QAClCqB,WAAW,CAACpC,aAAa,GAAGe,MAAM;QAClCqB,WAAW,CAACnC,YAAY,GAAGY,KAAK;MACpC,CAAC,MAAM,IAAIgC,UAAU,EAAE;QACnB,IAAIC,IAAI,GAAGlE,IAAI,CAACmE,KAAK,CAACX,WAAW,CAAC5B,MAAM,GAAGwB,KAAK,CAACM,OAAO,CAAC;QACzDQ,IAAI,GAAGV,WAAW,CAAClC,SAAS,GAAGrB,SAAS,CAACG,KAAK,GAAG,CAAC8D,IAAI,GAAGA,IAAI;QAE7D,MAAM/B,MAAM,GAAGvC,KAAK,CAAC4D,WAAW,CAAC/B,WAAW,GAAGyC,IAAI,EAAE7B,SAAS,EAAEH,kBAAkB,CAAC;QAEnFoB,KAAK,CAACX,KAAK,CAACR,MAAM,GAAG,GAAGA,MAAM,IAAI;QAClCqB,WAAW,CAACpC,aAAa,GAAGe,MAAM;MACtC,CAAC,MAAM;QACH,IAAI+B,IAAI,GAAGlE,IAAI,CAACmE,KAAK,CAACX,WAAW,CAAC7B,MAAM,GAAGyB,KAAK,CAACK,OAAO,CAAC;QACzDS,IAAI,GAAGV,WAAW,CAAClC,SAAS,GAAGrB,SAAS,CAACC,IAAI,GAAG,CAACgE,IAAI,GAAGA,IAAI;QAE5D,MAAMjC,KAAK,GAAGrC,KAAK,CAAC4D,WAAW,CAAC9B,UAAU,GAAGwC,IAAI,EAAE9B,QAAQ,EAAEL,iBAAiB,CAAC;QAE/EuB,KAAK,CAACX,KAAK,CAACV,KAAK,GAAG,GAAGA,KAAK,IAAI;QAChCuB,WAAW,CAACnC,YAAY,GAAGY,KAAK;MACpC;IACJ;EACJ,CAAC;EACD,MAAM8B,eAAe,GAAGA,CAAA,KAAM;IAC1B,MAAMT,KAAK,GAAG5C,QAAQ,CAACqC,OAAO;IAC9B,MAAMS,WAAW,GAAGrC,cAAc,CAAC4B,OAAO;IAC1C,MAAMQ,cAAc,GAAGvC,iBAAiB,CAAC+B,OAAO;IAChD,IAAIO,KAAK,KAAK,IAAI,IAAIC,cAAc,KAAK,IAAI,IAAIC,WAAW,CAACjC,UAAU,EAAE;MACrE,MAAMU,KAAK,GAAGuB,WAAW,CAACnC,YAAY;MACtC,MAAMc,MAAM,GAAGqB,WAAW,CAACpC,aAAa;MACxCoC,WAAW,CAAC9B,UAAU,GAAG,CAAC;MAC1B8B,WAAW,CAAC/B,WAAW,GAAG,CAAC;MAC3B+B,WAAW,CAAChC,KAAK,GAAG,CAAC;MACrBgC,WAAW,CAAC7B,MAAM,GAAG,CAAC;MACtB6B,WAAW,CAAC5B,MAAM,GAAG,CAAC;MACtB4B,WAAW,CAACnC,YAAY,GAAG,CAAC;MAC5BmC,WAAW,CAACpC,aAAa,GAAG,CAAC;MAC7BoC,WAAW,CAACjC,UAAU,GAAG,KAAK;MAE9BgC,cAAc,CAACI,SAAS,CAACS,MAAM,CAAC,iCAAiC,CAAC;MAElElB,YAAY,CAAC,CAAC;MACd1C,WAAW,CAACyB,KAAK,EAAEE,MAAM,CAAC;MAE1BU,QAAQ,CAACwB,mBAAmB,CAAC,aAAa,EAAEP,iBAAiB,CAAC;MAC9DjB,QAAQ,CAACwB,mBAAmB,CAAC,WAAW,EAAEN,eAAe,CAAC;IAC9D;EACJ,CAAC;EACD,oBACIrE,KAAA,CAAA4E,aAAA;IAAKC,GAAG,EAAEvD;EAAkB,GACvB,CAACH,WAAW,IAAIE,eAAe,iBAC5BrB,KAAA,CAAA4E,aAAA;IACIE,SAAS,EAAC,sBAAsB;IAChCD,GAAG,EAAE9D,SAAU;IACfgE,OAAO,EAAEA,CAAA,KAAM;MACX3D,cAAc,CAAC,CAACD,WAAW,CAAC;IAChC;EAAE,GACL,aAEO,CACX,eACDnB,KAAA,CAAA4E,aAAA;IACIE,SAAS,EAAC,+BAA+B;IACzCE,aAAa,EAAEtB,KAAK,IAAI;MACpBD,iBAAiB,CAACC,KAAK,EAAEnD,SAAS,CAACE,KAAK,CAAC;IAC7C;EAAE,CACL,CAAC,eACFT,KAAA,CAAA4E,aAAA;IACIE,SAAS,EAAC,gCAAgC;IAC1CE,aAAa,EAAEtB,KAAK,IAAI;MACpBD,iBAAiB,CAACC,KAAK,EAAEnD,SAAS,CAACE,KAAK,GAAGF,SAAS,CAACC,IAAI,CAAC;IAC9D;EAAE,CACL,CAAC,eACFR,KAAA,CAAA4E,aAAA;IACIE,SAAS,EAAC,+BAA+B;IACzCE,aAAa,EAAEtB,KAAK,IAAI;MACpBD,iBAAiB,CAACC,KAAK,EAAEnD,SAAS,CAACC,IAAI,CAAC;IAC5C;EAAE,CACL,CAAC,eACFR,KAAA,CAAA4E,aAAA;IACIE,SAAS,EAAC,gCAAgC;IAC1CE,aAAa,EAAEtB,KAAK,IAAI;MACpBD,iBAAiB,CAACC,KAAK,EAAEnD,SAAS,CAACG,KAAK,GAAGH,SAAS,CAACC,IAAI,CAAC;IAC9D;EAAE,CACL,CAAC,eACFR,KAAA,CAAA4E,aAAA;IACIE,SAAS,EAAC,+BAA+B;IACzCE,aAAa,EAAEtB,KAAK,IAAI;MACpBD,iBAAiB,CAACC,KAAK,EAAEnD,SAAS,CAACG,KAAK,CAAC;IAC7C;EAAE,CACL,CAAC,eACFV,KAAA,CAAA4E,aAAA;IACIE,SAAS,EAAC,gCAAgC;IAC1CE,aAAa,EAAEtB,KAAK,IAAI;MACpBD,iBAAiB,CAACC,KAAK,EAAEnD,SAAS,CAACG,KAAK,GAAGH,SAAS,CAACI,IAAI,CAAC;IAC9D;EAAE,CACL,CAAC,eACFX,KAAA,CAAA4E,aAAA;IACIE,SAAS,EAAC,+BAA+B;IACzCE,aAAa,EAAEtB,KAAK,IAAI;MACpBD,iBAAiB,CAACC,KAAK,EAAEnD,SAAS,CAACI,IAAI,CAAC;IAC5C;EAAE,CACL,CAAC,eACFX,KAAA,CAAA4E,aAAA;IACIE,SAAS,EAAC,gCAAgC;IAC1CE,aAAa,EAAEtB,KAAK,IAAI;MACpBD,iBAAiB,CAACC,KAAK,EAAEnD,SAAS,CAACE,KAAK,GAAGF,SAAS,CAACI,IAAI,CAAC;IAC9D;EAAE,CACL,CACA,CAAC;AAEd","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["React","useRef","clamp","value","min","max","Math","Direction","east","north","south","west","ImageResizer","onResizeStart","onResizeEnd","imageRef","maxWidth","editor","controlWrapperRef","userSelect","priority","positioningRef","currentHeight","currentWidth","direction","isResizing","ratio","startHeight","startWidth","startX","startY","editorRootElement","getRootElement","maxWidthContainer","getBoundingClientRect","width","maxHeightContainer","height","minWidth","minHeight","setStartCursor","ew","ns","nwse","cursorDir","style","setProperty","document","body","current","getPropertyValue","getPropertyPriority","setEndCursor","handlePointerDown","event","isEditable","image","controlWrapper","positioning","clientX","clientY","classList","add","addEventListener","handlePointerMove","handlePointerUp","isHorizontal","isVertical","diff","floor","remove","removeEventListener","createElement","ref","className","onPointerDown"],"sources":["ImageResizer.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { LexicalEditor } from \"lexical\";\n\nimport * as React from \"react\";\nimport { useRef } from \"react\";\n\nfunction clamp(value: number, min: number, max: number) {\n return Math.min(Math.max(value, min), max);\n}\n\nconst Direction = {\n east: 1 << 0,\n north: 1 << 3,\n south: 1 << 1,\n west: 1 << 2\n};\n\nexport function ImageResizer({\n onResizeStart,\n onResizeEnd,\n imageRef,\n maxWidth,\n editor\n}: {\n editor: LexicalEditor;\n imageRef: { current: null | HTMLElement };\n maxWidth?: number;\n onResizeEnd: (width: \"inherit\" | number, height: \"inherit\" | number) => void;\n onResizeStart: () => void;\n}): JSX.Element {\n const controlWrapperRef = useRef<HTMLDivElement>(null);\n const userSelect = useRef({\n priority: \"\",\n value: \"default\"\n });\n const positioningRef = useRef<{\n currentHeight: \"inherit\" | number;\n currentWidth: \"inherit\" | number;\n direction: number;\n isResizing: boolean;\n ratio: number;\n startHeight: number;\n startWidth: number;\n startX: number;\n startY: number;\n }>({\n currentHeight: 0,\n currentWidth: 0,\n direction: 0,\n isResizing: false,\n ratio: 0,\n startHeight: 0,\n startWidth: 0,\n startX: 0,\n startY: 0\n });\n const editorRootElement = editor.getRootElement();\n // Find max width, accounting for editor padding.\n const maxWidthContainer = maxWidth\n ? maxWidth\n : editorRootElement !== null\n ? editorRootElement.getBoundingClientRect().width - 20\n : 100;\n const maxHeightContainer =\n editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;\n\n const minWidth = 100;\n const minHeight = 100;\n\n const setStartCursor = (direction: number) => {\n const ew = direction === Direction.east || direction === Direction.west;\n const ns = direction === Direction.north || direction === Direction.south;\n const nwse =\n (direction & Direction.north && direction & Direction.west) ||\n (direction & Direction.south && direction & Direction.east);\n\n const cursorDir = ew ? \"ew\" : ns ? \"ns\" : nwse ? \"nwse\" : \"nesw\";\n\n if (editorRootElement !== null) {\n editorRootElement.style.setProperty(\"cursor\", `${cursorDir}-resize`, \"important\");\n }\n if (document.body !== null) {\n document.body.style.setProperty(\"cursor\", `${cursorDir}-resize`, \"important\");\n userSelect.current.value = document.body.style.getPropertyValue(\"-webkit-user-select\");\n userSelect.current.priority =\n document.body.style.getPropertyPriority(\"-webkit-user-select\");\n document.body.style.setProperty(\"-webkit-user-select\", `none`, \"important\");\n }\n };\n\n const setEndCursor = () => {\n if (editorRootElement !== null) {\n editorRootElement.style.setProperty(\"cursor\", \"text\");\n }\n if (document.body !== null) {\n document.body.style.setProperty(\"cursor\", \"default\");\n document.body.style.setProperty(\n \"-webkit-user-select\",\n userSelect.current.value,\n userSelect.current.priority\n );\n }\n };\n\n const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>, direction: number) => {\n if (!editor.isEditable()) {\n return;\n }\n\n const image = imageRef.current;\n const controlWrapper = controlWrapperRef.current;\n\n if (image !== null && controlWrapper !== null) {\n const { width, height } = image.getBoundingClientRect();\n const positioning = positioningRef.current;\n positioning.startWidth = width;\n positioning.startHeight = height;\n positioning.ratio = width / height;\n positioning.currentWidth = width;\n positioning.currentHeight = height;\n positioning.startX = event.clientX;\n positioning.startY = event.clientY;\n positioning.isResizing = true;\n positioning.direction = direction;\n\n setStartCursor(direction);\n onResizeStart();\n\n controlWrapper.classList.add(\"image-control-wrapper--resizing\");\n image.style.height = `${height}px`;\n image.style.width = `${width}px`;\n\n document.addEventListener(\"pointermove\", handlePointerMove);\n document.addEventListener(\"pointerup\", handlePointerUp);\n }\n };\n const handlePointerMove = (event: PointerEvent) => {\n const image = imageRef.current;\n const positioning = positioningRef.current;\n\n const isHorizontal = positioning.direction & (Direction.east | Direction.west);\n const isVertical = positioning.direction & (Direction.south | Direction.north);\n\n if (image !== null && positioning.isResizing) {\n // Corner cursor\n if (isHorizontal && isVertical) {\n let diff = Math.floor(positioning.startX - event.clientX);\n diff = positioning.direction & Direction.east ? -diff : diff;\n\n const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);\n\n const height = width / positioning.ratio;\n image.style.width = `${width}px`;\n image.style.height = `${height}px`;\n positioning.currentHeight = height;\n positioning.currentWidth = width;\n } else if (isVertical) {\n let diff = Math.floor(positioning.startY - event.clientY);\n diff = positioning.direction & Direction.south ? -diff : diff;\n\n const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);\n\n image.style.height = `${height}px`;\n positioning.currentHeight = height;\n } else {\n let diff = Math.floor(positioning.startX - event.clientX);\n diff = positioning.direction & Direction.east ? -diff : diff;\n\n const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);\n\n image.style.width = `${width}px`;\n positioning.currentWidth = width;\n }\n }\n };\n const handlePointerUp = () => {\n const image = imageRef.current;\n const positioning = positioningRef.current;\n const controlWrapper = controlWrapperRef.current;\n if (image !== null && controlWrapper !== null && positioning.isResizing) {\n const width = positioning.currentWidth;\n const height = positioning.currentHeight;\n positioning.startWidth = 0;\n positioning.startHeight = 0;\n positioning.ratio = 0;\n positioning.startX = 0;\n positioning.startY = 0;\n positioning.currentWidth = 0;\n positioning.currentHeight = 0;\n positioning.isResizing = false;\n\n controlWrapper.classList.remove(\"image-control-wrapper--resizing\");\n\n setEndCursor();\n onResizeEnd(width, height);\n\n document.removeEventListener(\"pointermove\", handlePointerMove);\n document.removeEventListener(\"pointerup\", handlePointerUp);\n }\n };\n return (\n <div ref={controlWrapperRef}>\n <div\n className=\"image-resizer image-resizer-n\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.north);\n }}\n />\n <div\n className=\"image-resizer image-resizer-ne\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.north | Direction.east);\n }}\n />\n <div\n className=\"image-resizer image-resizer-e\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.east);\n }}\n />\n <div\n className=\"image-resizer image-resizer-se\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.south | Direction.east);\n }}\n />\n <div\n className=\"image-resizer image-resizer-s\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.south);\n }}\n />\n <div\n className=\"image-resizer image-resizer-sw\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.south | Direction.west);\n }}\n />\n <div\n className=\"image-resizer image-resizer-w\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.west);\n }}\n />\n <div\n className=\"image-resizer image-resizer-nw\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.north | Direction.west);\n }}\n />\n </div>\n );\n}\n"],"mappings":"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","ignoreList":[]}
|
package/index.d.ts
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { type Klass, type LexicalNode, type LexicalNodeReplacement } from "lexical";
|
|
2
|
-
export * from "./FontColorNode";
|
|
3
|
-
export * from "./ListNode";
|
|
4
|
-
export * from "./ListItemNode";
|
|
5
|
-
export * from "./HeadingNode";
|
|
6
|
-
export * from "./ParagraphNode";
|
|
7
|
-
export * from "./QuoteNode";
|
|
8
|
-
export * from "./ImageNode";
|
|
9
|
-
export * from "./LinkNode";
|
|
10
|
-
export * from "./utils/formatList";
|
|
11
|
-
export * from "./utils/listNode";
|
|
12
|
-
export * from "./utils/formatToQuote";
|
|
13
|
-
export * from "./utils/formatToHeading";
|
|
14
|
-
export * from "./utils/formatToParagraph";
|
|
15
|
-
export * from "./utils/clearNodeFormating";
|
|
16
|
-
export * from "./utils/toggleLink";
|
|
17
|
-
export * from "./prepareLexicalState";
|
|
18
|
-
export * from "./generateInitialLexicalValue";
|
|
2
|
+
export * from "./FontColorNode.js";
|
|
3
|
+
export * from "./ListNode.js";
|
|
4
|
+
export * from "./ListItemNode.js";
|
|
5
|
+
export * from "./HeadingNode.js";
|
|
6
|
+
export * from "./ParagraphNode.js";
|
|
7
|
+
export * from "./QuoteNode.js";
|
|
8
|
+
export * from "./ImageNode.js";
|
|
9
|
+
export * from "./LinkNode.js";
|
|
10
|
+
export * from "./utils/formatList.js";
|
|
11
|
+
export * from "./utils/listNode.js";
|
|
12
|
+
export * from "./utils/formatToQuote.js";
|
|
13
|
+
export * from "./utils/formatToHeading.js";
|
|
14
|
+
export * from "./utils/formatToParagraph.js";
|
|
15
|
+
export * from "./utils/clearNodeFormating.js";
|
|
16
|
+
export * from "./utils/toggleLink.js";
|
|
17
|
+
export * from "./prepareLexicalState.js";
|
|
18
|
+
export * from "./generateInitialLexicalValue.js";
|
|
19
19
|
export declare const allNodes: ReadonlyArray<Klass<LexicalNode> | LexicalNodeReplacement>;
|
package/index.js
CHANGED
|
@@ -4,48 +4,51 @@ import { CodeHighlightNode, CodeNode } from "@lexical/code";
|
|
|
4
4
|
import { HashtagNode } from "@lexical/hashtag";
|
|
5
5
|
import { MarkNode } from "@lexical/mark";
|
|
6
6
|
import { OverflowNode } from "@lexical/overflow";
|
|
7
|
-
import { AutoLinkNode, LinkNode } from "./LinkNode";
|
|
8
|
-
import { FontColorNode } from "./FontColorNode";
|
|
9
|
-
import { ListNode } from "./ListNode";
|
|
10
|
-
import { ListItemNode } from "./ListItemNode";
|
|
11
|
-
import { HeadingNode } from "./HeadingNode";
|
|
12
|
-
import { ParagraphNode } from "./ParagraphNode";
|
|
13
|
-
import { QuoteNode } from "./QuoteNode";
|
|
14
|
-
import { ImageNode } from "./ImageNode";
|
|
15
|
-
export * from "./FontColorNode";
|
|
16
|
-
export * from "./ListNode";
|
|
17
|
-
export * from "./ListItemNode";
|
|
18
|
-
export * from "./HeadingNode";
|
|
19
|
-
export * from "./ParagraphNode";
|
|
20
|
-
export * from "./QuoteNode";
|
|
21
|
-
export * from "./ImageNode";
|
|
22
|
-
export * from "./LinkNode";
|
|
23
|
-
export * from "./utils/formatList";
|
|
24
|
-
export * from "./utils/listNode";
|
|
25
|
-
export * from "./utils/formatToQuote";
|
|
26
|
-
export * from "./utils/formatToHeading";
|
|
27
|
-
export * from "./utils/formatToParagraph";
|
|
28
|
-
export * from "./utils/clearNodeFormating";
|
|
29
|
-
export * from "./utils/toggleLink";
|
|
30
|
-
export * from "./prepareLexicalState";
|
|
31
|
-
export * from "./generateInitialLexicalValue";
|
|
7
|
+
import { AutoLinkNode, LinkNode } from "./LinkNode.js";
|
|
8
|
+
import { FontColorNode } from "./FontColorNode.js";
|
|
9
|
+
import { ListNode } from "./ListNode.js";
|
|
10
|
+
import { ListItemNode } from "./ListItemNode.js";
|
|
11
|
+
import { HeadingNode } from "./HeadingNode.js";
|
|
12
|
+
import { ParagraphNode } from "./ParagraphNode.js";
|
|
13
|
+
import { QuoteNode } from "./QuoteNode.js";
|
|
14
|
+
import { ImageNode } from "./ImageNode.js";
|
|
15
|
+
export * from "./FontColorNode.js";
|
|
16
|
+
export * from "./ListNode.js";
|
|
17
|
+
export * from "./ListItemNode.js";
|
|
18
|
+
export * from "./HeadingNode.js";
|
|
19
|
+
export * from "./ParagraphNode.js";
|
|
20
|
+
export * from "./QuoteNode.js";
|
|
21
|
+
export * from "./ImageNode.js";
|
|
22
|
+
export * from "./LinkNode.js";
|
|
23
|
+
export * from "./utils/formatList.js";
|
|
24
|
+
export * from "./utils/listNode.js";
|
|
25
|
+
export * from "./utils/formatToQuote.js";
|
|
26
|
+
export * from "./utils/formatToHeading.js";
|
|
27
|
+
export * from "./utils/formatToParagraph.js";
|
|
28
|
+
export * from "./utils/clearNodeFormating.js";
|
|
29
|
+
export * from "./utils/toggleLink.js";
|
|
30
|
+
export * from "./prepareLexicalState.js";
|
|
31
|
+
export * from "./generateInitialLexicalValue.js";
|
|
32
32
|
|
|
33
33
|
// This is a list of all the nodes that our Lexical implementation supports OOTB.
|
|
34
34
|
export const allNodes = [ParagraphNode, {
|
|
35
35
|
replace: BaseParagraphNode,
|
|
36
36
|
with: () => {
|
|
37
37
|
return new ParagraphNode();
|
|
38
|
-
}
|
|
38
|
+
},
|
|
39
|
+
withKlass: ParagraphNode
|
|
39
40
|
}, HeadingNode, {
|
|
40
41
|
replace: BaseHeadingNode,
|
|
41
42
|
with: node => {
|
|
42
43
|
return new HeadingNode(node.getTag());
|
|
43
|
-
}
|
|
44
|
+
},
|
|
45
|
+
withKlass: HeadingNode
|
|
44
46
|
}, QuoteNode, {
|
|
45
47
|
replace: BaseQuoteNode,
|
|
46
48
|
with: () => {
|
|
47
49
|
return new QuoteNode();
|
|
48
|
-
}
|
|
50
|
+
},
|
|
51
|
+
withKlass: QuoteNode
|
|
49
52
|
}, ImageNode, ListNode, ListItemNode, CodeNode, HashtagNode, CodeHighlightNode, AutoLinkNode, OverflowNode, MarkNode, FontColorNode, QuoteNode, LinkNode];
|
|
50
53
|
|
|
51
54
|
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ParagraphNode","BaseParagraphNode","HeadingNode","BaseHeadingNode","QuoteNode","BaseQuoteNode","CodeHighlightNode","CodeNode","HashtagNode","MarkNode","OverflowNode","AutoLinkNode","LinkNode","FontColorNode","ListNode","ListItemNode","ImageNode","allNodes","replace","with","node","getTag"],"sources":["index.ts"],"sourcesContent":["import {\n type Klass,\n type LexicalNode,\n type LexicalNodeReplacement,\n ParagraphNode as BaseParagraphNode\n} from \"lexical\";\nimport { HeadingNode as BaseHeadingNode, QuoteNode as BaseQuoteNode } from \"@lexical/rich-text\";\nimport { CodeHighlightNode, CodeNode } from \"@lexical/code\";\nimport { HashtagNode } from \"@lexical/hashtag\";\nimport { MarkNode } from \"@lexical/mark\";\nimport { OverflowNode } from \"@lexical/overflow\";\n\nimport { AutoLinkNode, LinkNode } from \"./LinkNode\";\nimport { FontColorNode } from \"./FontColorNode\";\nimport { ListNode } from \"./ListNode\";\nimport { ListItemNode } from \"./ListItemNode\";\nimport { HeadingNode } from \"./HeadingNode\";\nimport { ParagraphNode } from \"./ParagraphNode\";\nimport { QuoteNode } from \"./QuoteNode\";\nimport { ImageNode } from \"./ImageNode\";\n\nexport * from \"./FontColorNode\";\nexport * from \"./ListNode\";\nexport * from \"./ListItemNode\";\nexport * from \"./HeadingNode\";\nexport * from \"./ParagraphNode\";\nexport * from \"./QuoteNode\";\nexport * from \"./ImageNode\";\nexport * from \"./LinkNode\";\n\nexport * from \"./utils/formatList\";\nexport * from \"./utils/listNode\";\nexport * from \"./utils/formatToQuote\";\nexport * from \"./utils/formatToHeading\";\nexport * from \"./utils/formatToParagraph\";\nexport * from \"./utils/clearNodeFormating\";\nexport * from \"./utils/toggleLink\";\nexport * from \"./prepareLexicalState\";\nexport * from \"./generateInitialLexicalValue\";\n\n// This is a list of all the nodes that our Lexical implementation supports OOTB.\nexport const allNodes: ReadonlyArray<Klass<LexicalNode> | LexicalNodeReplacement> = [\n ParagraphNode,\n {\n replace: BaseParagraphNode,\n with: () => {\n return new ParagraphNode();\n }\n },\n HeadingNode,\n {\n replace: BaseHeadingNode,\n with: (node: BaseHeadingNode) => {\n return new HeadingNode(node.getTag());\n }\n },\n QuoteNode,\n {\n replace: BaseQuoteNode,\n with: () => {\n return new QuoteNode();\n }\n },\n ImageNode,\n ListNode,\n ListItemNode,\n CodeNode,\n HashtagNode,\n CodeHighlightNode,\n AutoLinkNode,\n OverflowNode,\n MarkNode,\n FontColorNode,\n QuoteNode,\n LinkNode\n];\n"],"mappings":"AAAA,SAIIA,aAAa,IAAIC,iBAAiB,QAC/B,SAAS;AAChB,SAASC,WAAW,IAAIC,eAAe,EAAEC,SAAS,IAAIC,aAAa,QAAQ,oBAAoB;AAC/F,SAASC,iBAAiB,EAAEC,QAAQ,QAAQ,eAAe;AAC3D,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,SAASC,QAAQ,QAAQ,eAAe;AACxC,SAASC,YAAY,QAAQ,mBAAmB;AAEhD,SAASC,YAAY,EAAEC,QAAQ;AAC/B,SAASC,aAAa;AACtB,SAASC,QAAQ;AACjB,SAASC,YAAY;AACrB,SAASb,WAAW;AACpB,SAASF,aAAa;AACtB,SAASI,SAAS;AAClB,SAASY,SAAS;AAElB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,OAAO,MAAMC,QAAoE,GAAG,CAChFjB,aAAa,EACb;EACIkB,OAAO,EAAEjB,iBAAiB;EAC1BkB,IAAI,EAAEA,CAAA,KAAM;IACR,OAAO,IAAInB,aAAa,CAAC,CAAC;EAC9B;
|
|
1
|
+
{"version":3,"names":["ParagraphNode","BaseParagraphNode","HeadingNode","BaseHeadingNode","QuoteNode","BaseQuoteNode","CodeHighlightNode","CodeNode","HashtagNode","MarkNode","OverflowNode","AutoLinkNode","LinkNode","FontColorNode","ListNode","ListItemNode","ImageNode","allNodes","replace","with","withKlass","node","getTag"],"sources":["index.ts"],"sourcesContent":["import {\n type Klass,\n type LexicalNode,\n type LexicalNodeReplacement,\n ParagraphNode as BaseParagraphNode\n} from \"lexical\";\nimport { HeadingNode as BaseHeadingNode, QuoteNode as BaseQuoteNode } from \"@lexical/rich-text\";\nimport { CodeHighlightNode, CodeNode } from \"@lexical/code\";\nimport { HashtagNode } from \"@lexical/hashtag\";\nimport { MarkNode } from \"@lexical/mark\";\nimport { OverflowNode } from \"@lexical/overflow\";\n\nimport { AutoLinkNode, LinkNode } from \"./LinkNode.js\";\nimport { FontColorNode } from \"./FontColorNode.js\";\nimport { ListNode } from \"./ListNode.js\";\nimport { ListItemNode } from \"./ListItemNode.js\";\nimport { HeadingNode } from \"./HeadingNode.js\";\nimport { ParagraphNode } from \"./ParagraphNode.js\";\nimport { QuoteNode } from \"./QuoteNode.js\";\nimport { ImageNode } from \"./ImageNode.js\";\n\nexport * from \"./FontColorNode.js\";\nexport * from \"./ListNode.js\";\nexport * from \"./ListItemNode.js\";\nexport * from \"./HeadingNode.js\";\nexport * from \"./ParagraphNode.js\";\nexport * from \"./QuoteNode.js\";\nexport * from \"./ImageNode.js\";\nexport * from \"./LinkNode.js\";\n\nexport * from \"./utils/formatList.js\";\nexport * from \"./utils/listNode.js\";\nexport * from \"./utils/formatToQuote.js\";\nexport * from \"./utils/formatToHeading.js\";\nexport * from \"./utils/formatToParagraph.js\";\nexport * from \"./utils/clearNodeFormating.js\";\nexport * from \"./utils/toggleLink.js\";\nexport * from \"./prepareLexicalState.js\";\nexport * from \"./generateInitialLexicalValue.js\";\n\n// This is a list of all the nodes that our Lexical implementation supports OOTB.\nexport const allNodes: ReadonlyArray<Klass<LexicalNode> | LexicalNodeReplacement> = [\n ParagraphNode,\n {\n replace: BaseParagraphNode,\n with: () => {\n return new ParagraphNode();\n },\n withKlass: ParagraphNode\n },\n HeadingNode,\n {\n replace: BaseHeadingNode,\n with: (node: BaseHeadingNode) => {\n return new HeadingNode(node.getTag());\n },\n withKlass: HeadingNode\n },\n QuoteNode,\n {\n replace: BaseQuoteNode,\n with: () => {\n return new QuoteNode();\n },\n withKlass: QuoteNode\n },\n ImageNode,\n ListNode,\n ListItemNode,\n CodeNode,\n HashtagNode,\n CodeHighlightNode,\n AutoLinkNode,\n OverflowNode,\n MarkNode,\n FontColorNode,\n QuoteNode,\n LinkNode\n];\n"],"mappings":"AAAA,SAIIA,aAAa,IAAIC,iBAAiB,QAC/B,SAAS;AAChB,SAASC,WAAW,IAAIC,eAAe,EAAEC,SAAS,IAAIC,aAAa,QAAQ,oBAAoB;AAC/F,SAASC,iBAAiB,EAAEC,QAAQ,QAAQ,eAAe;AAC3D,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,SAASC,QAAQ,QAAQ,eAAe;AACxC,SAASC,YAAY,QAAQ,mBAAmB;AAEhD,SAASC,YAAY,EAAEC,QAAQ;AAC/B,SAASC,aAAa;AACtB,SAASC,QAAQ;AACjB,SAASC,YAAY;AACrB,SAASb,WAAW;AACpB,SAASF,aAAa;AACtB,SAASI,SAAS;AAClB,SAASY,SAAS;AAElB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,OAAO,MAAMC,QAAoE,GAAG,CAChFjB,aAAa,EACb;EACIkB,OAAO,EAAEjB,iBAAiB;EAC1BkB,IAAI,EAAEA,CAAA,KAAM;IACR,OAAO,IAAInB,aAAa,CAAC,CAAC;EAC9B,CAAC;EACDoB,SAAS,EAAEpB;AACf,CAAC,EACDE,WAAW,EACX;EACIgB,OAAO,EAAEf,eAAe;EACxBgB,IAAI,EAAGE,IAAqB,IAAK;IAC7B,OAAO,IAAInB,WAAW,CAACmB,IAAI,CAACC,MAAM,CAAC,CAAC,CAAC;EACzC,CAAC;EACDF,SAAS,EAAElB;AACf,CAAC,EACDE,SAAS,EACT;EACIc,OAAO,EAAEb,aAAa;EACtBc,IAAI,EAAEA,CAAA,KAAM;IACR,OAAO,IAAIf,SAAS,CAAC,CAAC;EAC1B,CAAC;EACDgB,SAAS,EAAEhB;AACf,CAAC,EACDY,SAAS,EACTF,QAAQ,EACRC,YAAY,EACZR,QAAQ,EACRC,WAAW,EACXF,iBAAiB,EACjBK,YAAY,EACZD,YAAY,EACZD,QAAQ,EACRI,aAAa,EACbT,SAAS,EACTQ,QAAQ,CACX","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,33 +1,29 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/lexical-nodes",
|
|
3
|
-
"version": "6.0.0-
|
|
3
|
+
"version": "6.0.0-rc.0",
|
|
4
|
+
"type": "module",
|
|
4
5
|
"dependencies": {
|
|
5
|
-
"@lexical/code": "0.
|
|
6
|
-
"@lexical/hashtag": "0.
|
|
7
|
-
"@lexical/
|
|
8
|
-
"@lexical/
|
|
9
|
-
"@lexical/
|
|
10
|
-
"@lexical/
|
|
11
|
-
"@lexical/
|
|
12
|
-
"@lexical/
|
|
13
|
-
"@lexical/
|
|
14
|
-
"@
|
|
15
|
-
"@
|
|
16
|
-
"
|
|
17
|
-
"lexical": "0.23.1"
|
|
6
|
+
"@lexical/code": "0.40.0",
|
|
7
|
+
"@lexical/hashtag": "0.40.0",
|
|
8
|
+
"@lexical/list": "0.40.0",
|
|
9
|
+
"@lexical/mark": "0.40.0",
|
|
10
|
+
"@lexical/overflow": "0.40.0",
|
|
11
|
+
"@lexical/react": "0.40.0",
|
|
12
|
+
"@lexical/rich-text": "0.40.0",
|
|
13
|
+
"@lexical/selection": "0.40.0",
|
|
14
|
+
"@lexical/utils": "0.40.0",
|
|
15
|
+
"@types/prismjs": "1.26.6",
|
|
16
|
+
"@webiny/lexical-theme": "6.0.0-rc.0",
|
|
17
|
+
"lexical": "0.40.0"
|
|
18
18
|
},
|
|
19
19
|
"devDependencies": {
|
|
20
|
-
"@webiny/
|
|
20
|
+
"@webiny/build-tools": "6.0.0-rc.0",
|
|
21
21
|
"react": "18.2.0"
|
|
22
22
|
},
|
|
23
23
|
"publishConfig": {
|
|
24
24
|
"access": "public",
|
|
25
25
|
"directory": "dist"
|
|
26
26
|
},
|
|
27
|
-
"scripts": {
|
|
28
|
-
"build": "node ../cli/bin.js run build",
|
|
29
|
-
"watch": "node ../cli/bin.js run watch"
|
|
30
|
-
},
|
|
31
27
|
"adio": {
|
|
32
28
|
"ignore": {
|
|
33
29
|
"dependencies": [
|
|
@@ -35,5 +31,5 @@
|
|
|
35
31
|
]
|
|
36
32
|
}
|
|
37
33
|
},
|
|
38
|
-
"gitHead": "
|
|
34
|
+
"gitHead": "0f2aa699f4642e550ab62c96fcd050e8d02345c9"
|
|
39
35
|
}
|