@webiny/lexical-editor 5.43.2 → 6.0.0-alpha.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/commands/image.js +2 -8
- package/commands/image.js.map +1 -1
- package/commands/index.js +4 -49
- package/commands/index.js.map +1 -1
- package/commands/list.js +4 -10
- package/commands/list.js.map +1 -1
- package/commands/quote.js +2 -8
- package/commands/quote.js.map +1 -1
- package/commands/toolbar.js +2 -8
- package/commands/toolbar.js.map +1 -1
- package/components/Editor/EnsureHeadingTagPlugin.js +10 -16
- package/components/Editor/EnsureHeadingTagPlugin.js.map +1 -1
- package/components/Editor/HeadingEditor.js +13 -21
- package/components/Editor/HeadingEditor.js.map +1 -1
- package/components/Editor/ParagraphEditor.js +12 -19
- package/components/Editor/ParagraphEditor.js.map +1 -1
- package/components/Editor/RichTextEditor.js +92 -105
- package/components/Editor/RichTextEditor.js.map +1 -1
- package/components/Editor/normalizeInputValue.js +2 -8
- package/components/Editor/normalizeInputValue.js.map +1 -1
- package/components/LexicalEditorConfig/LexicalEditorConfig.js +39 -49
- package/components/LexicalEditorConfig/LexicalEditorConfig.js.map +1 -1
- package/components/LexicalEditorConfig/components/Node.js +17 -26
- package/components/LexicalEditorConfig/components/Node.js.map +1 -1
- package/components/LexicalEditorConfig/components/Plugin.js +17 -26
- package/components/LexicalEditorConfig/components/Plugin.js.map +1 -1
- package/components/LexicalEditorConfig/components/ToolbarElement.js +17 -26
- package/components/LexicalEditorConfig/components/ToolbarElement.js.map +1 -1
- package/components/LexicalHtmlRenderer.js +37 -46
- package/components/LexicalHtmlRenderer.js.map +1 -1
- package/components/Toolbar/StaticToolbar.d.ts +3 -1
- package/components/Toolbar/StaticToolbar.js +19 -23
- package/components/Toolbar/StaticToolbar.js.map +1 -1
- package/components/Toolbar/Toolbar.js +66 -75
- package/components/Toolbar/Toolbar.js.map +1 -1
- package/components/ToolbarActions/BoldAction.js +16 -21
- package/components/ToolbarActions/BoldAction.js.map +1 -1
- package/components/ToolbarActions/BulletListAction.js +26 -31
- package/components/ToolbarActions/BulletListAction.js.map +1 -1
- package/components/ToolbarActions/CodeHighlightAction.js +16 -21
- package/components/ToolbarActions/CodeHighlightAction.js.map +1 -1
- package/components/ToolbarActions/FontColorAction.js +32 -42
- package/components/ToolbarActions/FontColorAction.js.map +1 -1
- package/components/ToolbarActions/FontSizeAction.js +53 -71
- package/components/ToolbarActions/FontSizeAction.js.map +1 -1
- package/components/ToolbarActions/ImageAction.js +19 -34
- package/components/ToolbarActions/ImageAction.js.map +1 -1
- package/components/ToolbarActions/ItalicAction.js +16 -21
- package/components/ToolbarActions/ItalicAction.js.map +1 -1
- package/components/ToolbarActions/LinkAction.js +19 -24
- package/components/ToolbarActions/LinkAction.js.map +1 -1
- package/components/ToolbarActions/NumberedListAction.js +26 -33
- package/components/ToolbarActions/NumberedListAction.js.map +1 -1
- package/components/ToolbarActions/QuoteAction.js +20 -25
- package/components/ToolbarActions/QuoteAction.js.map +1 -1
- package/components/ToolbarActions/TextAlignmentAction.js +36 -45
- package/components/ToolbarActions/TextAlignmentAction.js.map +1 -1
- package/components/ToolbarActions/TypographyAction.js +43 -55
- package/components/ToolbarActions/TypographyAction.js.map +1 -1
- package/components/ToolbarActions/UnderlineAction.js +16 -21
- package/components/ToolbarActions/UnderlineAction.js.map +1 -1
- package/context/FontColorActionContext.js +2 -9
- package/context/FontColorActionContext.js.map +1 -1
- package/context/RichTextEditorContext.js +15 -26
- package/context/RichTextEditorContext.js.map +1 -1
- package/context/SharedHistoryContext.js +12 -20
- package/context/SharedHistoryContext.js.map +1 -1
- package/context/TextAlignmentActionContextProps.js +2 -9
- package/context/TextAlignmentActionContextProps.js.map +1 -1
- package/context/TypographyActionContext.js +2 -9
- package/context/TypographyActionContext.js.map +1 -1
- package/hooks/index.js +8 -93
- package/hooks/index.js.map +1 -1
- package/hooks/useCurrentElement.d.ts +2 -2
- package/hooks/useCurrentElement.js +12 -18
- package/hooks/useCurrentElement.js.map +1 -1
- package/hooks/useCurrentSelection.js +27 -40
- package/hooks/useCurrentSelection.js.map +1 -1
- package/hooks/useFontColorPicker.js +5 -11
- package/hooks/useFontColorPicker.js.map +1 -1
- package/hooks/useIsMounted.js +6 -14
- package/hooks/useIsMounted.js.map +1 -1
- package/hooks/useList.js +31 -35
- package/hooks/useList.js.map +1 -1
- package/hooks/useQuote.js +12 -17
- package/hooks/useQuote.js.map +1 -1
- package/hooks/useRichTextEditor.js +5 -11
- package/hooks/useRichTextEditor.js.map +1 -1
- package/hooks/useTextAlignmentAction.js +5 -11
- package/hooks/useTextAlignmentAction.js.map +1 -1
- package/hooks/useTypographyAction.js +5 -11
- package/hooks/useTypographyAction.js.map +1 -1
- package/index.js +49 -322
- package/index.js.map +1 -1
- package/package.json +8 -7
- package/plugins/BlurEventPlugin/BlurEventPlugin.js +16 -22
- package/plugins/BlurEventPlugin/BlurEventPlugin.js.map +1 -1
- package/plugins/CodeHighlightPlugin/CodeHighlightPlugin.js +9 -14
- package/plugins/CodeHighlightPlugin/CodeHighlightPlugin.js.map +1 -1
- package/plugins/CodeHighlightPlugin/index.js +1 -16
- package/plugins/CodeHighlightPlugin/index.js.map +1 -1
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.d.ts +16 -0
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.js +158 -0
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.js.map +1 -0
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorController.d.ts +8 -0
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorController.js +62 -0
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorController.js.map +1 -0
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.css +2 -1
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.d.ts +5 -16
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.js +11 -180
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.js.map +1 -1
- package/plugins/FloatingLinkEditorPlugin/LinkEditForm.d.ts +2 -3
- package/plugins/FloatingLinkEditorPlugin/LinkEditForm.js +54 -68
- package/plugins/FloatingLinkEditorPlugin/LinkEditForm.js.map +1 -1
- package/plugins/FloatingLinkEditorPlugin/LinkPreviewForm.d.ts +1 -1
- package/plugins/FloatingLinkEditorPlugin/LinkPreviewForm.js +16 -26
- package/plugins/FloatingLinkEditorPlugin/LinkPreviewForm.js.map +1 -1
- package/plugins/FloatingLinkEditorPlugin/index.js +1 -16
- package/plugins/FloatingLinkEditorPlugin/index.js.map +1 -1
- package/plugins/FloatingLinkEditorPlugin/isChildOfLinkEditor.js +3 -9
- package/plugins/FloatingLinkEditorPlugin/isChildOfLinkEditor.js.map +1 -1
- package/plugins/FontColorPlugin/FontColorPlugin.js +19 -22
- package/plugins/FontColorPlugin/FontColorPlugin.js.map +1 -1
- package/plugins/FontColorPlugin/applyColorToNode.js +4 -10
- package/plugins/FontColorPlugin/applyColorToNode.js.map +1 -1
- package/plugins/FontColorPlugin/applyColorToSelection.js +28 -44
- package/plugins/FontColorPlugin/applyColorToSelection.js.map +1 -1
- package/plugins/ImagesPlugin/ImagesPlugin.js +59 -58
- package/plugins/ImagesPlugin/ImagesPlugin.js.map +1 -1
- package/plugins/LexicalUpdateStatePlugin/UpdateStatePlugin.js +23 -23
- package/plugins/LexicalUpdateStatePlugin/UpdateStatePlugin.js.map +1 -1
- package/plugins/LexicalUpdateStatePlugin/index.js +1 -16
- package/plugins/LexicalUpdateStatePlugin/index.js.map +1 -1
- package/plugins/LinkPlugin/LinkPlugin.js +30 -37
- package/plugins/LinkPlugin/LinkPlugin.js.map +1 -1
- package/plugins/ListPLugin/ListPlugin.js +10 -15
- package/plugins/ListPLugin/ListPlugin.js.map +1 -1
- package/plugins/QuoteNodePlugin/QuoteNodePlugin.js +11 -16
- package/plugins/QuoteNodePlugin/QuoteNodePlugin.js.map +1 -1
- package/plugins/TypographyPlugin/TypographyPlugin.js +16 -21
- package/plugins/TypographyPlugin/TypographyPlugin.js.map +1 -1
- package/types.d.ts +3 -3
- package/types.js +6 -38
- package/types.js.map +1 -1
- package/ui/ContentEditable.js +7 -14
- package/ui/ContentEditable.js.map +1 -1
- package/ui/Divider.js +3 -10
- package/ui/Divider.js.map +1 -1
- package/ui/DropDown.js +61 -88
- package/ui/DropDown.js.map +1 -1
- package/ui/ImageResizer.js +78 -83
- package/ui/ImageResizer.js.map +1 -1
- package/ui/LinkPreview.js +22 -29
- package/ui/LinkPreview.js.map +1 -1
- package/ui/Placeholder.js +10 -16
- package/ui/Placeholder.js.map +1 -1
- package/ui/TextInput.js +11 -18
- package/ui/TextInput.js.map +1 -1
- package/ui/ToolbarActionDialog.js +30 -42
- package/ui/ToolbarActionDialog.js.map +1 -1
- package/utils/canUseDOM.js +1 -7
- package/utils/canUseDOM.js.map +1 -1
- package/utils/files.js +9 -26
- package/utils/files.js.map +1 -1
- package/utils/generateInitialLexicalValue.js +2 -8
- package/utils/generateInitialLexicalValue.js.map +1 -1
- package/utils/getDOMRangeRect.js +4 -10
- package/utils/getDOMRangeRect.js.map +1 -1
- package/utils/getSelectedNode.js +9 -16
- package/utils/getSelectedNode.js.map +1 -1
- package/utils/getTransparentImage.js +1 -7
- package/utils/getTransparentImage.js.map +1 -1
- package/utils/insertImage.js +8 -14
- package/utils/insertImage.js.map +1 -1
- package/utils/isAnchorLink.js +1 -7
- package/utils/isAnchorLink.js.map +1 -1
- package/utils/isChildOfFloatingToolbar.js +3 -9
- package/utils/isChildOfFloatingToolbar.js.map +1 -1
- package/utils/isHTMLElement.js +1 -7
- package/utils/isHTMLElement.js.map +1 -1
- package/utils/isValidJSON.js +3 -9
- package/utils/isValidJSON.js.map +1 -1
- package/utils/isValidLexicalData.d.ts +1 -1
- package/utils/isValidLexicalData.js +6 -12
- package/utils/isValidLexicalData.js.map +1 -1
- package/utils/point.js +35 -60
- package/utils/point.js.map +1 -1
- package/utils/rect.js +114 -149
- package/utils/rect.js.map +1 -1
- package/utils/sanitizeUrl.js +6 -13
- package/utils/sanitizeUrl.js.map +1 -1
- package/utils/setFloatingElemPosition.js +11 -19
- package/utils/setFloatingElemPosition.js.map +1 -1
- package/plugins/FloatingLinkEditorPlugin/useFloatingLinkEditor.d.ts +0 -2
- package/plugins/FloatingLinkEditorPlugin/useFloatingLinkEditor.js +0 -96
- package/plugins/FloatingLinkEditorPlugin/useFloatingLinkEditor.js.map +0 -1
|
@@ -1,64 +1,57 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
var _excluded = ["url"];
|
|
15
|
-
function LinkPlugin(_ref) {
|
|
16
|
-
var validateUrl = _ref.validateUrl;
|
|
17
|
-
var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
|
|
18
|
-
editor = _useRichTextEditor.editor;
|
|
19
|
-
(0, _react.useEffect)(function () {
|
|
20
|
-
if (!editor.hasNodes([_lexicalNodes.LinkNode])) {
|
|
1
|
+
import { useEffect } from "react";
|
|
2
|
+
import { mergeRegister } from "@lexical/utils";
|
|
3
|
+
import { $getSelection, $isElementNode, $isRangeSelection, COMMAND_PRIORITY_LOW, PASTE_COMMAND } from "lexical";
|
|
4
|
+
import { LinkNode, TOGGLE_LINK_COMMAND, toggleLink } from "@webiny/lexical-nodes";
|
|
5
|
+
import { useRichTextEditor } from "../../hooks";
|
|
6
|
+
export function LinkPlugin({
|
|
7
|
+
validateUrl
|
|
8
|
+
}) {
|
|
9
|
+
const {
|
|
10
|
+
editor
|
|
11
|
+
} = useRichTextEditor();
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
if (!editor.hasNodes([LinkNode])) {
|
|
21
14
|
throw new Error("LinkPlugin: LinkNode not registered in the editor!");
|
|
22
15
|
}
|
|
23
|
-
|
|
16
|
+
const commands = [editor.registerCommand(TOGGLE_LINK_COMMAND, payload => {
|
|
24
17
|
if (payload === null) {
|
|
25
|
-
|
|
18
|
+
toggleLink(payload);
|
|
26
19
|
return true;
|
|
27
20
|
} else if (typeof payload === "string") {
|
|
28
21
|
if (validateUrl === undefined || validateUrl(payload)) {
|
|
29
|
-
|
|
22
|
+
toggleLink(payload);
|
|
30
23
|
return true;
|
|
31
24
|
}
|
|
32
25
|
return false;
|
|
33
26
|
} else {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
27
|
+
const {
|
|
28
|
+
url,
|
|
29
|
+
...attrs
|
|
30
|
+
} = payload;
|
|
31
|
+
toggleLink(url, attrs);
|
|
37
32
|
return true;
|
|
38
33
|
}
|
|
39
|
-
},
|
|
34
|
+
}, COMMAND_PRIORITY_LOW)];
|
|
40
35
|
if (validateUrl !== undefined) {
|
|
41
|
-
commands.push(editor.registerCommand(
|
|
42
|
-
|
|
43
|
-
if (
|
|
36
|
+
commands.push(editor.registerCommand(PASTE_COMMAND, event => {
|
|
37
|
+
const selection = $getSelection();
|
|
38
|
+
if (!$isRangeSelection(selection) || selection.isCollapsed() || !(event instanceof ClipboardEvent) || event.clipboardData == null) {
|
|
44
39
|
return false;
|
|
45
40
|
}
|
|
46
|
-
|
|
41
|
+
const clipboardText = event.clipboardData.getData("text");
|
|
47
42
|
if (!validateUrl(clipboardText)) {
|
|
48
43
|
return false;
|
|
49
44
|
}
|
|
50
45
|
// If we select nodes that are elements then avoid applying the link.
|
|
51
|
-
if (!selection.getNodes().some(
|
|
52
|
-
|
|
53
|
-
})) {
|
|
54
|
-
editor.dispatchCommand(_lexicalNodes.TOGGLE_LINK_COMMAND, clipboardText);
|
|
46
|
+
if (!selection.getNodes().some(node => $isElementNode(node))) {
|
|
47
|
+
editor.dispatchCommand(TOGGLE_LINK_COMMAND, clipboardText);
|
|
55
48
|
event.preventDefault();
|
|
56
49
|
return true;
|
|
57
50
|
}
|
|
58
51
|
return false;
|
|
59
|
-
},
|
|
52
|
+
}, COMMAND_PRIORITY_LOW));
|
|
60
53
|
}
|
|
61
|
-
return
|
|
54
|
+
return mergeRegister(...commands);
|
|
62
55
|
}, [editor, validateUrl]);
|
|
63
56
|
return null;
|
|
64
57
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["useEffect","mergeRegister","$getSelection","$isElementNode","$isRangeSelection","COMMAND_PRIORITY_LOW","PASTE_COMMAND","LinkNode","TOGGLE_LINK_COMMAND","toggleLink","useRichTextEditor","LinkPlugin","validateUrl","editor","hasNodes","Error","commands","registerCommand","payload","undefined","url","attrs","push","event","selection","isCollapsed","ClipboardEvent","clipboardData","clipboardText","getData","getNodes","some","node","dispatchCommand","preventDefault"],"sources":["LinkPlugin.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n $getSelection,\n $isElementNode,\n $isRangeSelection,\n COMMAND_PRIORITY_LOW,\n PASTE_COMMAND\n} from \"lexical\";\nimport { LinkNode, TOGGLE_LINK_COMMAND, toggleLink } from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks\";\n\ntype Props = {\n validateUrl?: (url: string) => boolean;\n};\n\nexport function LinkPlugin({ validateUrl }: Props): null {\n const { editor } = useRichTextEditor();\n\n useEffect(() => {\n if (!editor.hasNodes([LinkNode])) {\n throw new Error(\"LinkPlugin: LinkNode not registered in the editor!\");\n }\n\n const commands = [\n editor.registerCommand(\n TOGGLE_LINK_COMMAND,\n payload => {\n if (payload === null) {\n toggleLink(payload);\n return true;\n } else if (typeof payload === \"string\") {\n if (validateUrl === undefined || validateUrl(payload)) {\n toggleLink(payload);\n return true;\n }\n return false;\n } else {\n const { url, ...attrs } = payload;\n toggleLink(url, attrs);\n return true;\n }\n },\n COMMAND_PRIORITY_LOW\n )\n ];\n\n if (validateUrl !== undefined) {\n commands.push(\n editor.registerCommand(\n PASTE_COMMAND,\n event => {\n const selection = $getSelection();\n if (\n !$isRangeSelection(selection) ||\n selection.isCollapsed() ||\n !(event instanceof ClipboardEvent) ||\n event.clipboardData == null\n ) {\n return false;\n }\n const clipboardText = event.clipboardData.getData(\"text\");\n if (!validateUrl(clipboardText)) {\n return false;\n }\n // If we select nodes that are elements then avoid applying the link.\n if (!selection.getNodes().some(node => $isElementNode(node))) {\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, clipboardText);\n event.preventDefault();\n return true;\n }\n return false;\n },\n COMMAND_PRIORITY_LOW\n )\n );\n }\n\n return mergeRegister(...commands);\n }, [editor, validateUrl]);\n\n return null;\n}\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,aAAa,QAAQ,gBAAgB;AAC9C,SACIC,aAAa,EACbC,cAAc,EACdC,iBAAiB,EACjBC,oBAAoB,EACpBC,aAAa,QACV,SAAS;AAChB,SAASC,QAAQ,EAAEC,mBAAmB,EAAEC,UAAU,QAAQ,uBAAuB;AACjF,SAASC,iBAAiB;AAM1B,OAAO,SAASC,UAAUA,CAAC;EAAEC;AAAmB,CAAC,EAAQ;EACrD,MAAM;IAAEC;EAAO,CAAC,GAAGH,iBAAiB,CAAC,CAAC;EAEtCV,SAAS,CAAC,MAAM;IACZ,IAAI,CAACa,MAAM,CAACC,QAAQ,CAAC,CAACP,QAAQ,CAAC,CAAC,EAAE;MAC9B,MAAM,IAAIQ,KAAK,CAAC,oDAAoD,CAAC;IACzE;IAEA,MAAMC,QAAQ,GAAG,CACbH,MAAM,CAACI,eAAe,CAClBT,mBAAmB,EACnBU,OAAO,IAAI;MACP,IAAIA,OAAO,KAAK,IAAI,EAAE;QAClBT,UAAU,CAACS,OAAO,CAAC;QACnB,OAAO,IAAI;MACf,CAAC,MAAM,IAAI,OAAOA,OAAO,KAAK,QAAQ,EAAE;QACpC,IAAIN,WAAW,KAAKO,SAAS,IAAIP,WAAW,CAACM,OAAO,CAAC,EAAE;UACnDT,UAAU,CAACS,OAAO,CAAC;UACnB,OAAO,IAAI;QACf;QACA,OAAO,KAAK;MAChB,CAAC,MAAM;QACH,MAAM;UAAEE,GAAG;UAAE,GAAGC;QAAM,CAAC,GAAGH,OAAO;QACjCT,UAAU,CAACW,GAAG,EAAEC,KAAK,CAAC;QACtB,OAAO,IAAI;MACf;IACJ,CAAC,EACDhB,oBACJ,CAAC,CACJ;IAED,IAAIO,WAAW,KAAKO,SAAS,EAAE;MAC3BH,QAAQ,CAACM,IAAI,CACTT,MAAM,CAACI,eAAe,CAClBX,aAAa,EACbiB,KAAK,IAAI;QACL,MAAMC,SAAS,GAAGtB,aAAa,CAAC,CAAC;QACjC,IACI,CAACE,iBAAiB,CAACoB,SAAS,CAAC,IAC7BA,SAAS,CAACC,WAAW,CAAC,CAAC,IACvB,EAAEF,KAAK,YAAYG,cAAc,CAAC,IAClCH,KAAK,CAACI,aAAa,IAAI,IAAI,EAC7B;UACE,OAAO,KAAK;QAChB;QACA,MAAMC,aAAa,GAAGL,KAAK,CAACI,aAAa,CAACE,OAAO,CAAC,MAAM,CAAC;QACzD,IAAI,CAACjB,WAAW,CAACgB,aAAa,CAAC,EAAE;UAC7B,OAAO,KAAK;QAChB;QACA;QACA,IAAI,CAACJ,SAAS,CAACM,QAAQ,CAAC,CAAC,CAACC,IAAI,CAACC,IAAI,IAAI7B,cAAc,CAAC6B,IAAI,CAAC,CAAC,EAAE;UAC1DnB,MAAM,CAACoB,eAAe,CAACzB,mBAAmB,EAAEoB,aAAa,CAAC;UAC1DL,KAAK,CAACW,cAAc,CAAC,CAAC;UACtB,OAAO,IAAI;QACf;QACA,OAAO,KAAK;MAChB,CAAC,EACD7B,oBACJ,CACJ,CAAC;IACL;IAEA,OAAOJ,aAAa,CAAC,GAAGe,QAAQ,CAAC;EACrC,CAAC,EAAE,CAACH,MAAM,EAAED,WAAW,CAAC,CAAC;EAEzB,OAAO,IAAI;AACf","ignoreList":[]}
|
|
@@ -1,21 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
function ListPlugin() {
|
|
11
|
-
var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
|
|
12
|
-
editor = _useRichTextEditor.editor;
|
|
13
|
-
(0, _react.useEffect)(function () {
|
|
14
|
-
if (!editor.hasNodes([_lexicalNodes.ListNode, _lexicalNodes.ListItemNode])) {
|
|
1
|
+
import { useEffect } from "react";
|
|
2
|
+
import { ListNode, ListItemNode } from "@webiny/lexical-nodes";
|
|
3
|
+
import { useList, useRichTextEditor } from "../../hooks";
|
|
4
|
+
export function ListPlugin() {
|
|
5
|
+
const {
|
|
6
|
+
editor
|
|
7
|
+
} = useRichTextEditor();
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
if (!editor.hasNodes([ListNode, ListItemNode])) {
|
|
15
10
|
throw new Error("ListPlugin: ListNode and/or ListItemNode not registered in the editor!");
|
|
16
11
|
}
|
|
17
12
|
}, [editor]);
|
|
18
|
-
|
|
13
|
+
useList(editor);
|
|
19
14
|
return null;
|
|
20
15
|
}
|
|
21
16
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["useEffect","ListNode","ListItemNode","useList","useRichTextEditor","ListPlugin","editor","hasNodes","Error"],"sources":["ListPlugin.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { ListNode, ListItemNode } from \"@webiny/lexical-nodes\";\nimport { useList, useRichTextEditor } from \"~/hooks\";\n\nexport function ListPlugin(): null {\n const { editor } = useRichTextEditor();\n\n useEffect(() => {\n if (!editor.hasNodes([ListNode, ListItemNode])) {\n throw new Error(\n \"ListPlugin: ListNode and/or ListItemNode not registered in the editor!\"\n );\n }\n }, [editor]);\n\n useList(editor);\n\n return null;\n}\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,QAAQ,EAAEC,YAAY,QAAQ,uBAAuB;AAC9D,SAASC,OAAO,EAAEC,iBAAiB;AAEnC,OAAO,SAASC,UAAUA,CAAA,EAAS;EAC/B,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EAEtCJ,SAAS,CAAC,MAAM;IACZ,IAAI,CAACM,MAAM,CAACC,QAAQ,CAAC,CAACN,QAAQ,EAAEC,YAAY,CAAC,CAAC,EAAE;MAC5C,MAAM,IAAIM,KAAK,CACX,wEACJ,CAAC;IACL;EACJ,CAAC,EAAE,CAACF,MAAM,CAAC,CAAC;EAEZH,OAAO,CAACG,MAAM,CAAC;EAEf,OAAO,IAAI;AACf","ignoreList":[]}
|
|
@@ -1,19 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
|
|
13
|
-
editor = _useRichTextEditor.editor;
|
|
14
|
-
(0, _useQuote.useQuote)(editor);
|
|
15
|
-
(0, _react.useEffect)(function () {
|
|
16
|
-
if (!editor.hasNodes([_lexicalNodes.QuoteNode])) {
|
|
1
|
+
import { useEffect } from "react";
|
|
2
|
+
import { QuoteNode } from "@webiny/lexical-nodes";
|
|
3
|
+
import { useQuote } from "../../hooks/useQuote";
|
|
4
|
+
import { useRichTextEditor } from "../../hooks";
|
|
5
|
+
export function QuotePlugin() {
|
|
6
|
+
const {
|
|
7
|
+
editor
|
|
8
|
+
} = useRichTextEditor();
|
|
9
|
+
useQuote(editor);
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
if (!editor.hasNodes([QuoteNode])) {
|
|
17
12
|
throw new Error("QuoteNodePlugin: QuoteNode is not registered in the editor!");
|
|
18
13
|
}
|
|
19
14
|
}, [editor]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["useEffect","QuoteNode","useQuote","useRichTextEditor","QuotePlugin","editor","hasNodes","Error"],"sources":["QuoteNodePlugin.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { QuoteNode } from \"@webiny/lexical-nodes\";\nimport { useQuote } from \"~/hooks/useQuote\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport function QuotePlugin() {\n const { editor } = useRichTextEditor();\n useQuote(editor);\n\n useEffect(() => {\n if (!editor.hasNodes([QuoteNode])) {\n throw new Error(\"QuoteNodePlugin: QuoteNode is not registered in the editor!\");\n }\n }, [editor]);\n\n return null;\n}\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,SAAS,QAAQ,uBAAuB;AACjD,SAASC,QAAQ;AACjB,SAASC,iBAAiB;AAE1B,OAAO,SAASC,WAAWA,CAAA,EAAG;EAC1B,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACtCD,QAAQ,CAACG,MAAM,CAAC;EAEhBL,SAAS,CAAC,MAAM;IACZ,IAAI,CAACK,MAAM,CAACC,QAAQ,CAAC,CAACL,SAAS,CAAC,CAAC,EAAE;MAC/B,MAAM,IAAIM,KAAK,CAAC,6DAA6D,CAAC;IAClF;EACJ,CAAC,EAAE,CAACF,MAAM,CAAC,CAAC;EAEZ,OAAO,IAAI;AACf","ignoreList":[]}
|
|
@@ -1,29 +1,24 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
|
|
13
|
-
editor = _useRichTextEditor.editor;
|
|
14
|
-
(0, _react.useEffect)(function () {
|
|
15
|
-
return editor.registerCommand(_lexicalNodes.ADD_TYPOGRAPHY_COMMAND, function (payload) {
|
|
16
|
-
var selection = (0, _lexical.$getSelection)();
|
|
1
|
+
import { useEffect } from "react";
|
|
2
|
+
import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from "lexical";
|
|
3
|
+
import { ADD_TYPOGRAPHY_COMMAND, formatToParagraph, formatToHeading } from "@webiny/lexical-nodes";
|
|
4
|
+
import { useRichTextEditor } from "../../hooks";
|
|
5
|
+
export const TypographyPlugin = () => {
|
|
6
|
+
const {
|
|
7
|
+
editor
|
|
8
|
+
} = useRichTextEditor();
|
|
9
|
+
useEffect(() => {
|
|
10
|
+
return editor.registerCommand(ADD_TYPOGRAPHY_COMMAND, payload => {
|
|
11
|
+
const selection = $getSelection();
|
|
17
12
|
// paragraph
|
|
18
|
-
if (
|
|
19
|
-
|
|
13
|
+
if ($isRangeSelection(selection) && payload.value.id && payload.value.tag === "p") {
|
|
14
|
+
formatToParagraph(editor, payload.value.id);
|
|
20
15
|
}
|
|
21
16
|
// heading
|
|
22
|
-
if (
|
|
23
|
-
|
|
17
|
+
if ($isRangeSelection(selection) && payload.value.id && payload.value.tag.includes("h")) {
|
|
18
|
+
formatToHeading(editor, payload.value.tag, payload.value.id);
|
|
24
19
|
}
|
|
25
20
|
return true;
|
|
26
|
-
},
|
|
21
|
+
}, COMMAND_PRIORITY_EDITOR);
|
|
27
22
|
}, [editor]);
|
|
28
23
|
return null;
|
|
29
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["useEffect","$getSelection","$isRangeSelection","COMMAND_PRIORITY_EDITOR","ADD_TYPOGRAPHY_COMMAND","formatToParagraph","formatToHeading","useRichTextEditor","TypographyPlugin","editor","registerCommand","payload","selection","value","id","tag","includes"],"sources":["TypographyPlugin.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from \"lexical\";\nimport {\n ADD_TYPOGRAPHY_COMMAND,\n TypographyPayload,\n formatToParagraph,\n formatToHeading\n} from \"@webiny/lexical-nodes\";\nimport { HeadingTagType } from \"@lexical/rich-text\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const TypographyPlugin = () => {\n const { editor } = useRichTextEditor();\n\n useEffect(() => {\n return editor.registerCommand<TypographyPayload>(\n ADD_TYPOGRAPHY_COMMAND,\n payload => {\n const selection = $getSelection();\n // paragraph\n if ($isRangeSelection(selection) && payload.value.id && payload.value.tag === \"p\") {\n formatToParagraph(editor, payload.value.id);\n }\n // heading\n if (\n $isRangeSelection(selection) &&\n payload.value.id &&\n payload.value.tag.includes(\"h\")\n ) {\n formatToHeading(editor, payload.value.tag as HeadingTagType, payload.value.id);\n }\n return true;\n },\n COMMAND_PRIORITY_EDITOR\n );\n }, [editor]);\n\n return null;\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,aAAa,EAAEC,iBAAiB,EAAEC,uBAAuB,QAAQ,SAAS;AACnF,SACIC,sBAAsB,EAEtBC,iBAAiB,EACjBC,eAAe,QACZ,uBAAuB;AAE9B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EAEtCP,SAAS,CAAC,MAAM;IACZ,OAAOS,MAAM,CAACC,eAAe,CACzBN,sBAAsB,EACtBO,OAAO,IAAI;MACP,MAAMC,SAAS,GAAGX,aAAa,CAAC,CAAC;MACjC;MACA,IAAIC,iBAAiB,CAACU,SAAS,CAAC,IAAID,OAAO,CAACE,KAAK,CAACC,EAAE,IAAIH,OAAO,CAACE,KAAK,CAACE,GAAG,KAAK,GAAG,EAAE;QAC/EV,iBAAiB,CAACI,MAAM,EAAEE,OAAO,CAACE,KAAK,CAACC,EAAE,CAAC;MAC/C;MACA;MACA,IACIZ,iBAAiB,CAACU,SAAS,CAAC,IAC5BD,OAAO,CAACE,KAAK,CAACC,EAAE,IAChBH,OAAO,CAACE,KAAK,CAACE,GAAG,CAACC,QAAQ,CAAC,GAAG,CAAC,EACjC;QACEV,eAAe,CAACG,MAAM,EAAEE,OAAO,CAACE,KAAK,CAACE,GAAG,EAAoBJ,OAAO,CAACE,KAAK,CAACC,EAAE,CAAC;MAClF;MACA,OAAO,IAAI;IACf,CAAC,EACDX,uBACJ,CAAC;EACL,CAAC,EAAE,CAACM,MAAM,CAAC,CAAC;EAEZ,OAAO,IAAI;AACf,CAAC","ignoreList":[]}
|
package/types.d.ts
CHANGED
|
@@ -7,6 +7,6 @@ export interface ToolbarActionPlugin {
|
|
|
7
7
|
targetAction: ToolbarActionType;
|
|
8
8
|
plugin: Record<string, any> | ((cb: (value: any) => void) => any) | undefined;
|
|
9
9
|
}
|
|
10
|
-
export { ImagePayload } from "./commands";
|
|
11
|
-
export { RichTextEditorProps } from "./components/Editor/RichTextEditor";
|
|
12
|
-
export { Klass, LexicalNode } from "lexical";
|
|
10
|
+
export { type ImagePayload } from "./commands";
|
|
11
|
+
export { type RichTextEditorProps } from "./components/Editor/RichTextEditor";
|
|
12
|
+
export type { Klass, LexicalNode } from "lexical";
|
package/types.js
CHANGED
|
@@ -1,41 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
export { FontColorPicker } from "./components/ToolbarActions/FontColorAction";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
get: function get() {
|
|
9
|
-
return _FontColorAction.FontColorPicker;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
Object.defineProperty(exports, "ImagePayload", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function get() {
|
|
15
|
-
return _commands.ImagePayload;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
Object.defineProperty(exports, "Klass", {
|
|
19
|
-
enumerable: true,
|
|
20
|
-
get: function get() {
|
|
21
|
-
return _lexical.Klass;
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
Object.defineProperty(exports, "LexicalNode", {
|
|
25
|
-
enumerable: true,
|
|
26
|
-
get: function get() {
|
|
27
|
-
return _lexical.LexicalNode;
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
|
-
Object.defineProperty(exports, "RichTextEditorProps", {
|
|
31
|
-
enumerable: true,
|
|
32
|
-
get: function get() {
|
|
33
|
-
return _RichTextEditor.RichTextEditorProps;
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
var _FontColorAction = require("./components/ToolbarActions/FontColorAction");
|
|
37
|
-
var _commands = require("./commands");
|
|
38
|
-
var _RichTextEditor = require("./components/Editor/RichTextEditor");
|
|
39
|
-
var _lexical = require("lexical");
|
|
3
|
+
/* Commands payload types */
|
|
4
|
+
|
|
5
|
+
/* Lexical editor interfaces */
|
|
6
|
+
|
|
7
|
+
// lexical types
|
|
40
8
|
|
|
41
9
|
//# sourceMappingURL=types.js.map
|
package/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["FontColorPicker"],"sources":["types.ts"],"sourcesContent":["export type LexicalValue = string;\n\nexport type NormalizedInputValue = LexicalValue | null;\n\nexport { FontColorPicker } from \"~/components/ToolbarActions/FontColorAction\";\n\nexport type ImageActionType = \"image-action\";\nexport type ToolbarActionType = ImageActionType | string;\nexport interface ToolbarActionPlugin {\n targetAction: ToolbarActionType;\n plugin: Record<string, any> | ((cb: (value: any) => void) => any) | undefined;\n}\n\n/* Commands payload types */\nexport { type ImagePayload } from \"~/commands\";\n\n/* Lexical editor interfaces */\nexport { type RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\n\n// lexical types\nexport type { Klass, LexicalNode } from \"lexical\";\n"],"mappings":"AAIA,SAASA,eAAe;;AASxB;;AAGA;;AAGA","ignoreList":[]}
|
package/ui/ContentEditable.js
CHANGED
|
@@ -1,13 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.LexicalContentEditable = LexicalContentEditable;
|
|
8
|
-
require("./ContentEditable.css");
|
|
9
|
-
var _LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
|
|
10
|
-
var React = _interopRequireWildcard(require("react"));
|
|
11
1
|
/**
|
|
12
2
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
13
3
|
*
|
|
@@ -15,10 +5,13 @@ var React = _interopRequireWildcard(require("react"));
|
|
|
15
5
|
* LICENSE file in the root directory of this source tree.
|
|
16
6
|
*
|
|
17
7
|
*/
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
8
|
+
import "./ContentEditable.css";
|
|
9
|
+
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
|
|
10
|
+
import * as React from "react";
|
|
11
|
+
export function LexicalContentEditable({
|
|
12
|
+
className
|
|
13
|
+
}) {
|
|
14
|
+
return /*#__PURE__*/React.createElement(ContentEditable, {
|
|
22
15
|
className: className || "ContentEditable__root"
|
|
23
16
|
});
|
|
24
17
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["ContentEditable","React","LexicalContentEditable","className","createElement"],"sources":["ContentEditable.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 \"./ContentEditable.css\";\n\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport * as React from \"react\";\n\nexport function LexicalContentEditable({ className }: { className?: string }): JSX.Element {\n return <ContentEditable className={className || \"ContentEditable__root\"} />;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,eAAe,QAAQ,uCAAuC;AACvE,OAAO,KAAKC,KAAK,MAAM,OAAO;AAE9B,OAAO,SAASC,sBAAsBA,CAAC;EAAEC;AAAkC,CAAC,EAAe;EACvF,oBAAOF,KAAA,CAAAG,aAAA,CAACJ,eAAe;IAACG,SAAS,EAAEA,SAAS,IAAI;EAAwB,CAAE,CAAC;AAC/E","ignoreList":[]}
|
package/ui/Divider.js
CHANGED
|
@@ -1,13 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.Divider = Divider;
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
function Divider() {
|
|
10
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
1
|
+
import React from "react";
|
|
2
|
+
export function Divider() {
|
|
3
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
11
4
|
className: "divider"
|
|
12
5
|
});
|
|
13
6
|
}
|
package/ui/Divider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["React","Divider","createElement","className"],"sources":["Divider.tsx"],"sourcesContent":["import React from \"react\";\n\nexport function Divider(): JSX.Element {\n return <div className=\"divider\"></div>;\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAO,SAASC,OAAOA,CAAA,EAAgB;EACnC,oBAAOD,KAAA,CAAAE,aAAA;IAAKC,SAAS,EAAC;EAAS,CAAM,CAAC;AAC1C","ignoreList":[]}
|