@webiny/lexical-editor 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/README.md +6 -12
- package/commands/index.d.ts +5 -5
- package/commands/index.js +5 -5
- package/commands/index.js.map +1 -1
- package/components/Editor/EnsureHeadingTagPlugin.js +1 -1
- package/components/Editor/EnsureHeadingTagPlugin.js.map +1 -1
- package/components/Editor/RichTextEditor.d.ts +11 -6
- package/components/Editor/RichTextEditor.js +22 -16
- package/components/Editor/RichTextEditor.js.map +1 -1
- package/components/Editor/normalizeInputValue.d.ts +1 -1
- package/components/Editor/normalizeInputValue.js.map +1 -1
- package/components/LexicalEditorConfig/LexicalEditorConfig.d.ts +14 -16
- package/components/LexicalEditorConfig/LexicalEditorConfig.js +20 -58
- package/components/LexicalEditorConfig/LexicalEditorConfig.js.map +1 -1
- package/components/LexicalHtmlRenderer.d.ts +3 -6
- package/components/LexicalHtmlRenderer.js +12 -17
- package/components/LexicalHtmlRenderer.js.map +1 -1
- package/components/Toolbar/StaticToolbar.css +416 -0
- package/components/Toolbar/StaticToolbar.d.ts +1 -1
- package/components/Toolbar/StaticToolbar.js +2 -2
- package/components/Toolbar/StaticToolbar.js.map +1 -1
- package/components/ToolbarActions/BoldAction.js +2 -2
- package/components/ToolbarActions/BoldAction.js.map +1 -1
- package/components/ToolbarActions/BulletListAction.js +5 -6
- package/components/ToolbarActions/BulletListAction.js.map +1 -1
- package/components/ToolbarActions/CodeHighlightAction.js +2 -2
- package/components/ToolbarActions/CodeHighlightAction.js.map +1 -1
- package/components/ToolbarActions/FontColorAction.js +4 -4
- package/components/ToolbarActions/FontColorAction.js.map +1 -1
- package/components/ToolbarActions/ImageAction.js +3 -3
- package/components/ToolbarActions/ImageAction.js.map +1 -1
- package/components/ToolbarActions/ItalicAction.js +2 -2
- package/components/ToolbarActions/ItalicAction.js.map +1 -1
- package/components/ToolbarActions/LinkAction.js +3 -3
- package/components/ToolbarActions/LinkAction.js.map +1 -1
- package/components/ToolbarActions/NumberedListAction.js +7 -11
- package/components/ToolbarActions/NumberedListAction.js.map +1 -1
- package/components/ToolbarActions/QuoteAction.js +6 -6
- package/components/ToolbarActions/QuoteAction.js.map +1 -1
- package/components/ToolbarActions/TextAlignmentAction.js +4 -4
- package/components/ToolbarActions/TextAlignmentAction.js.map +1 -1
- package/components/ToolbarActions/TypographyAction.js +14 -11
- package/components/ToolbarActions/TypographyAction.js.map +1 -1
- package/components/ToolbarActions/UnderlineAction.js +1 -1
- package/components/ToolbarActions/UnderlineAction.js.map +1 -1
- package/context/RichTextEditorContext.d.ts +5 -6
- package/context/RichTextEditorContext.js +17 -4
- package/context/RichTextEditorContext.js.map +1 -1
- package/context/TypographyActionContext.d.ts +1 -1
- package/context/TypographyActionContext.js.map +1 -1
- package/exports/admin/lexical.d.ts +15 -0
- package/exports/admin/lexical.js +23 -0
- package/exports/admin/lexical.js.map +1 -0
- package/hooks/index.d.ts +7 -8
- package/hooks/index.js +7 -8
- package/hooks/index.js.map +1 -1
- package/hooks/useCurrentElement.js +2 -3
- package/hooks/useCurrentElement.js.map +1 -1
- package/hooks/useCurrentSelection.js +4 -4
- package/hooks/useCurrentSelection.js.map +1 -1
- package/hooks/useFontColorPicker.d.ts +1 -1
- package/hooks/useFontColorPicker.js +1 -1
- package/hooks/useFontColorPicker.js.map +1 -1
- package/hooks/useRichTextEditor.d.ts +1 -1
- package/hooks/useRichTextEditor.js +1 -1
- package/hooks/useRichTextEditor.js.map +1 -1
- package/hooks/useTextAlignmentAction.d.ts +1 -1
- package/hooks/useTextAlignmentAction.js +1 -1
- package/hooks/useTextAlignmentAction.js.map +1 -1
- package/hooks/useTypographyAction.d.ts +1 -1
- package/hooks/useTypographyAction.js +1 -1
- package/hooks/useTypographyAction.js.map +1 -1
- package/index.d.ts +33 -37
- package/index.js +33 -37
- package/index.js.map +1 -1
- package/package.json +18 -22
- package/plugins/BlurEventPlugin/BlurEventPlugin.d.ts +1 -1
- package/plugins/BlurEventPlugin/BlurEventPlugin.js +1 -1
- package/plugins/BlurEventPlugin/BlurEventPlugin.js.map +1 -1
- package/plugins/CodeHighlightPlugin/CodeHighlightPlugin.js +1 -1
- package/plugins/CodeHighlightPlugin/CodeHighlightPlugin.js.map +1 -1
- package/plugins/CodeHighlightPlugin/index.d.ts +1 -1
- package/plugins/CodeHighlightPlugin/index.js +1 -1
- package/plugins/CodeHighlightPlugin/index.js.map +1 -1
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.d.ts +4 -10
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.js +15 -145
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.js.map +1 -1
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorController.d.ts +2 -3
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorController.js +10 -11
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorController.js.map +1 -1
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.css +1 -136
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.d.ts +5 -6
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.js +3 -7
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.js.map +1 -1
- package/plugins/FloatingLinkEditorPlugin/index.d.ts +1 -1
- package/plugins/FloatingLinkEditorPlugin/index.js +1 -1
- package/plugins/FloatingLinkEditorPlugin/index.js.map +1 -1
- package/plugins/FloatingLinkEditorPlugin/types.d.ts +10 -0
- package/plugins/FloatingLinkEditorPlugin/types.js +3 -0
- package/plugins/FloatingLinkEditorPlugin/types.js.map +1 -0
- package/plugins/FloatingLinkEditorPlugin/useFloatingLinkEditor.d.ts +8 -0
- package/plugins/FloatingLinkEditorPlugin/useFloatingLinkEditor.js +128 -0
- package/plugins/FloatingLinkEditorPlugin/useFloatingLinkEditor.js.map +1 -0
- package/plugins/FontColorPlugin/FontColorPlugin.js +2 -2
- package/plugins/FontColorPlugin/FontColorPlugin.js.map +1 -1
- package/plugins/FontColorPlugin/applyColorToSelection.js +1 -1
- package/plugins/FontColorPlugin/applyColorToSelection.js.map +1 -1
- package/plugins/ImagesPlugin/ImagesPlugin.d.ts +1 -2
- package/plugins/ImagesPlugin/ImagesPlugin.js +5 -8
- package/plugins/ImagesPlugin/ImagesPlugin.js.map +1 -1
- package/plugins/LinkPlugin/LinkPlugin.js +2 -3
- package/plugins/LinkPlugin/LinkPlugin.js.map +1 -1
- package/plugins/ListPLugin/ListPlugin.js +45 -3
- package/plugins/ListPLugin/ListPlugin.js.map +1 -1
- package/plugins/QuoteNodePlugin/QuoteNodePlugin.js +12 -4
- package/plugins/QuoteNodePlugin/QuoteNodePlugin.js.map +1 -1
- package/plugins/StateHandlingPlugin.d.ts +1 -1
- package/plugins/StateHandlingPlugin.js +6 -6
- package/plugins/StateHandlingPlugin.js.map +1 -1
- package/plugins/TypographyPlugin/TypographyPlugin.js +2 -2
- package/plugins/TypographyPlugin/TypographyPlugin.js.map +1 -1
- package/types.d.ts +3 -3
- package/types.js +1 -1
- package/types.js.map +1 -1
- package/ui/ContentEditable.d.ts +0 -1
- package/ui/Divider.d.ts +0 -1
- package/ui/DropDown.js +4 -3
- package/ui/DropDown.js.map +1 -1
- package/ui/ImageResizer.d.ts +0 -1
- package/ui/ImageResizer.js.map +1 -1
- package/ui/LinkPreview.d.ts +0 -1
- package/ui/TextInput.d.ts +0 -1
- package/utils/files.d.ts +6 -6
- package/utils/files.js +3 -13
- package/utils/files.js.map +1 -1
- package/utils/insertImage.d.ts +1 -1
- package/utils/insertImage.js.map +1 -1
- package/utils/isValidLexicalData.d.ts +2 -2
- package/utils/isValidLexicalData.js.map +1 -1
- package/utils/rect.d.ts +1 -1
- package/utils/rect.js +1 -1
- package/utils/rect.js.map +1 -1
- package/utils/sanitizeUrl.js +1 -1
- package/utils/sanitizeUrl.js.map +1 -1
- package/utils/setFloatingElemPosition.d.ts +1 -1
- package/utils/setFloatingElemPosition.js +23 -21
- package/utils/setFloatingElemPosition.js.map +1 -1
- package/components/Editor/HeadingEditor.d.ts +0 -7
- package/components/Editor/HeadingEditor.js +0 -22
- package/components/Editor/HeadingEditor.js.map +0 -1
- package/components/Editor/ParagraphEditor.d.ts +0 -7
- package/components/Editor/ParagraphEditor.js +0 -22
- package/components/Editor/ParagraphEditor.js.map +0 -1
- package/components/Toolbar/Toolbar.css +0 -643
- package/components/Toolbar/Toolbar.d.ts +0 -6
- package/components/Toolbar/Toolbar.js +0 -148
- package/components/Toolbar/Toolbar.js.map +0 -1
- package/components/ToolbarActions/FontSizeAction.d.ts +0 -14
- package/components/ToolbarActions/FontSizeAction.js +0 -91
- package/components/ToolbarActions/FontSizeAction.js.map +0 -1
- package/hooks/useList.d.ts +0 -2
- package/hooks/useList.js +0 -50
- package/hooks/useList.js.map +0 -1
- package/hooks/useQuote.d.ts +0 -2
- package/hooks/useQuote.js +0 -17
- package/hooks/useQuote.js.map +0 -1
- package/plugins/FloatingLinkEditorPlugin/LinkEditForm.d.ts +0 -8
- package/plugins/FloatingLinkEditorPlugin/LinkEditForm.js +0 -104
- package/plugins/FloatingLinkEditorPlugin/LinkEditForm.js.map +0 -1
- package/plugins/FloatingLinkEditorPlugin/LinkPreviewForm.d.ts +0 -9
- package/plugins/FloatingLinkEditorPlugin/LinkPreviewForm.js +0 -34
- package/plugins/FloatingLinkEditorPlugin/LinkPreviewForm.js.map +0 -1
|
@@ -1,148 +0,0 @@
|
|
|
1
|
-
import React, { Fragment, useCallback, useEffect, useRef, useState } from "react";
|
|
2
|
-
import { $getSelection, BLUR_COMMAND, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND } from "lexical";
|
|
3
|
-
import { createPortal } from "react-dom";
|
|
4
|
-
import { mergeRegister } from "@lexical/utils";
|
|
5
|
-
import "./Toolbar.css";
|
|
6
|
-
import { getDOMRangeRect } from "../../utils/getDOMRangeRect";
|
|
7
|
-
import { setFloatingElemPosition } from "../../utils/setFloatingElemPosition";
|
|
8
|
-
import { useLexicalEditorConfig } from "../LexicalEditorConfig/LexicalEditorConfig";
|
|
9
|
-
import { useDeriveValueFromSelection } from "../../hooks/useCurrentSelection";
|
|
10
|
-
import { useRichTextEditor } from "../../hooks";
|
|
11
|
-
import { isChildOfFloatingToolbar } from "../../utils/isChildOfFloatingToolbar";
|
|
12
|
-
import { HIDE_FLOATING_TOOLBAR } from "../../commands";
|
|
13
|
-
const FloatingToolbar = ({
|
|
14
|
-
anchorElem,
|
|
15
|
-
editor
|
|
16
|
-
}) => {
|
|
17
|
-
const [isVisible, setIsVisible] = useState(true);
|
|
18
|
-
const popupCharStylesEditorRef = useRef(null);
|
|
19
|
-
const {
|
|
20
|
-
toolbarElements
|
|
21
|
-
} = useLexicalEditorConfig();
|
|
22
|
-
const mouseMoveListener = useCallback(e => {
|
|
23
|
-
/* Indicates which mouse button(s) was pressed.
|
|
24
|
-
/ 1 = mouse left button
|
|
25
|
-
/ 3 = mouse left and right button in the same time
|
|
26
|
-
/ More info: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
|
|
27
|
-
*/
|
|
28
|
-
if (popupCharStylesEditorRef?.current && (e.buttons === 1 || e.buttons === 3)) {
|
|
29
|
-
if (popupCharStylesEditorRef.current.style.pointerEvents !== "none") {
|
|
30
|
-
const x = e.clientX;
|
|
31
|
-
const y = e.clientY;
|
|
32
|
-
const elementUnderMouse = document.elementFromPoint(x, y);
|
|
33
|
-
if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {
|
|
34
|
-
// Mouse is not over the target element => not a normal click, but probably a drag
|
|
35
|
-
popupCharStylesEditorRef.current.style.pointerEvents = "none";
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}, [popupCharStylesEditorRef]);
|
|
40
|
-
const mouseUpListener = useCallback(() => {
|
|
41
|
-
if (popupCharStylesEditorRef?.current) {
|
|
42
|
-
if (popupCharStylesEditorRef.current.style.pointerEvents !== "auto") {
|
|
43
|
-
popupCharStylesEditorRef.current.style.pointerEvents = "auto";
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
}, [popupCharStylesEditorRef]);
|
|
47
|
-
useEffect(() => {
|
|
48
|
-
if (popupCharStylesEditorRef?.current) {
|
|
49
|
-
document.addEventListener("mousemove", mouseMoveListener);
|
|
50
|
-
document.addEventListener("mouseup", mouseUpListener);
|
|
51
|
-
return () => {
|
|
52
|
-
document.removeEventListener("mousemove", mouseMoveListener);
|
|
53
|
-
document.removeEventListener("mouseup", mouseUpListener);
|
|
54
|
-
};
|
|
55
|
-
}
|
|
56
|
-
return;
|
|
57
|
-
}, [popupCharStylesEditorRef]);
|
|
58
|
-
const updateTextFormatFloatingToolbar = useCallback(() => {
|
|
59
|
-
const selection = $getSelection();
|
|
60
|
-
const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
|
|
61
|
-
const nativeSelection = window.getSelection();
|
|
62
|
-
if (popupCharStylesEditorElem === null) {
|
|
63
|
-
return;
|
|
64
|
-
}
|
|
65
|
-
const rootElement = editor.getRootElement();
|
|
66
|
-
if (selection !== null && nativeSelection !== null && !nativeSelection.isCollapsed && rootElement !== null && rootElement.contains(nativeSelection.anchorNode)) {
|
|
67
|
-
const rangeRect = getDOMRangeRect(nativeSelection, rootElement);
|
|
68
|
-
setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);
|
|
69
|
-
}
|
|
70
|
-
}, [editor, anchorElem]);
|
|
71
|
-
useEffect(() => {
|
|
72
|
-
const scrollerElem = anchorElem.parentElement;
|
|
73
|
-
const update = () => {
|
|
74
|
-
editor.getEditorState().read(() => {
|
|
75
|
-
updateTextFormatFloatingToolbar();
|
|
76
|
-
});
|
|
77
|
-
};
|
|
78
|
-
window.addEventListener("resize", update);
|
|
79
|
-
if (scrollerElem) {
|
|
80
|
-
scrollerElem.addEventListener("scroll", update);
|
|
81
|
-
}
|
|
82
|
-
return () => {
|
|
83
|
-
window.removeEventListener("resize", update);
|
|
84
|
-
if (scrollerElem) {
|
|
85
|
-
scrollerElem.removeEventListener("scroll", update);
|
|
86
|
-
}
|
|
87
|
-
};
|
|
88
|
-
}, [editor, updateTextFormatFloatingToolbar, anchorElem]);
|
|
89
|
-
useEffect(() => {
|
|
90
|
-
editor.getEditorState().read(() => {
|
|
91
|
-
updateTextFormatFloatingToolbar();
|
|
92
|
-
});
|
|
93
|
-
return mergeRegister(editor.registerUpdateListener(({
|
|
94
|
-
editorState
|
|
95
|
-
}) => {
|
|
96
|
-
editorState.read(() => {
|
|
97
|
-
updateTextFormatFloatingToolbar();
|
|
98
|
-
});
|
|
99
|
-
}), editor.registerCommand(HIDE_FLOATING_TOOLBAR, () => {
|
|
100
|
-
setTimeout(() => {
|
|
101
|
-
setIsVisible(false);
|
|
102
|
-
}, 10);
|
|
103
|
-
return true;
|
|
104
|
-
}, COMMAND_PRIORITY_LOW), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
|
|
105
|
-
setIsVisible(true);
|
|
106
|
-
updateTextFormatFloatingToolbar();
|
|
107
|
-
return false;
|
|
108
|
-
}, COMMAND_PRIORITY_LOW), editor.registerCommand(BLUR_COMMAND, payload => {
|
|
109
|
-
if (!isChildOfFloatingToolbar(payload.relatedTarget)) {
|
|
110
|
-
setIsVisible(false);
|
|
111
|
-
}
|
|
112
|
-
return false;
|
|
113
|
-
}, COMMAND_PRIORITY_LOW));
|
|
114
|
-
}, [editor, updateTextFormatFloatingToolbar]);
|
|
115
|
-
if (!isVisible) {
|
|
116
|
-
return null;
|
|
117
|
-
}
|
|
118
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
119
|
-
ref: popupCharStylesEditorRef,
|
|
120
|
-
className: "floating-toolbar"
|
|
121
|
-
}, editor.isEditable() && /*#__PURE__*/React.createElement(React.Fragment, null, toolbarElements.map(action => /*#__PURE__*/React.createElement(Fragment, {
|
|
122
|
-
key: action.name
|
|
123
|
-
}, action.element))));
|
|
124
|
-
};
|
|
125
|
-
export const Toolbar = ({
|
|
126
|
-
anchorElem = document.body
|
|
127
|
-
}) => {
|
|
128
|
-
const {
|
|
129
|
-
editor
|
|
130
|
-
} = useRichTextEditor();
|
|
131
|
-
const showToolbar = useDeriveValueFromSelection(({
|
|
132
|
-
rangeSelection
|
|
133
|
-
}) => {
|
|
134
|
-
if (!rangeSelection) {
|
|
135
|
-
return false;
|
|
136
|
-
}
|
|
137
|
-
return !rangeSelection.isCollapsed();
|
|
138
|
-
});
|
|
139
|
-
if (!showToolbar) {
|
|
140
|
-
return null;
|
|
141
|
-
}
|
|
142
|
-
return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(FloatingToolbar, {
|
|
143
|
-
anchorElem: anchorElem,
|
|
144
|
-
editor: editor
|
|
145
|
-
}), anchorElem);
|
|
146
|
-
};
|
|
147
|
-
|
|
148
|
-
//# sourceMappingURL=Toolbar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","Fragment","useCallback","useEffect","useRef","useState","$getSelection","BLUR_COMMAND","COMMAND_PRIORITY_LOW","SELECTION_CHANGE_COMMAND","createPortal","mergeRegister","getDOMRangeRect","setFloatingElemPosition","useLexicalEditorConfig","useDeriveValueFromSelection","useRichTextEditor","isChildOfFloatingToolbar","HIDE_FLOATING_TOOLBAR","FloatingToolbar","anchorElem","editor","isVisible","setIsVisible","popupCharStylesEditorRef","toolbarElements","mouseMoveListener","e","current","buttons","style","pointerEvents","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","addEventListener","removeEventListener","updateTextFormatFloatingToolbar","selection","popupCharStylesEditorElem","nativeSelection","window","getSelection","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","scrollerElem","parentElement","update","getEditorState","read","registerUpdateListener","editorState","registerCommand","setTimeout","payload","relatedTarget","createElement","ref","className","isEditable","map","action","key","name","element","Toolbar","body","showToolbar","rangeSelection"],"sources":["Toolbar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React, { Fragment, useCallback, useEffect, useRef, useState } from \"react\";\nimport type { LexicalEditor } from \"lexical\";\nimport {\n $getSelection,\n BLUR_COMMAND,\n COMMAND_PRIORITY_LOW,\n SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport \"./Toolbar.css\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\nimport { isChildOfFloatingToolbar } from \"~/utils/isChildOfFloatingToolbar\";\nimport { HIDE_FLOATING_TOOLBAR } from \"~/commands\";\n\ninterface FloatingToolbarProps {\n anchorElem: HTMLElement;\n editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ anchorElem, editor }) => {\n const [isVisible, setIsVisible] = useState(true);\n const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n const { toolbarElements } = useLexicalEditorConfig();\n\n const mouseMoveListener = useCallback(\n (e: MouseEvent) => {\n /* Indicates which mouse button(s) was pressed.\n / 1 = mouse left button\n / 3 = mouse left and right button in the same time\n / More info: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons\n */\n if (popupCharStylesEditorRef?.current && (e.buttons === 1 || e.buttons === 3)) {\n if (popupCharStylesEditorRef.current.style.pointerEvents !== \"none\") {\n const x = e.clientX;\n const y = e.clientY;\n const elementUnderMouse = document.elementFromPoint(x, y);\n\n if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {\n // Mouse is not over the target element => not a normal click, but probably a drag\n popupCharStylesEditorRef.current.style.pointerEvents = \"none\";\n }\n }\n }\n },\n [popupCharStylesEditorRef]\n );\n\n const mouseUpListener = useCallback(() => {\n if (popupCharStylesEditorRef?.current) {\n if (popupCharStylesEditorRef.current.style.pointerEvents !== \"auto\") {\n popupCharStylesEditorRef.current.style.pointerEvents = \"auto\";\n }\n }\n }, [popupCharStylesEditorRef]);\n\n useEffect(() => {\n if (popupCharStylesEditorRef?.current) {\n document.addEventListener(\"mousemove\", mouseMoveListener);\n document.addEventListener(\"mouseup\", mouseUpListener);\n\n return () => {\n document.removeEventListener(\"mousemove\", mouseMoveListener);\n document.removeEventListener(\"mouseup\", mouseUpListener);\n };\n }\n return;\n }, [popupCharStylesEditorRef]);\n\n const updateTextFormatFloatingToolbar = useCallback(() => {\n const selection = $getSelection();\n\n const popupCharStylesEditorElem = popupCharStylesEditorRef.current;\n const nativeSelection = window.getSelection();\n\n if (popupCharStylesEditorElem === null) {\n return;\n }\n\n const rootElement = editor.getRootElement();\n if (\n selection !== null &&\n nativeSelection !== null &&\n !nativeSelection.isCollapsed &&\n rootElement !== null &&\n rootElement.contains(nativeSelection.anchorNode)\n ) {\n const rangeRect = getDOMRangeRect(nativeSelection, rootElement);\n\n setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);\n }\n }, [editor, anchorElem]);\n\n useEffect(() => {\n const scrollerElem = anchorElem.parentElement;\n\n const update = () => {\n editor.getEditorState().read(() => {\n updateTextFormatFloatingToolbar();\n });\n };\n\n window.addEventListener(\"resize\", update);\n if (scrollerElem) {\n scrollerElem.addEventListener(\"scroll\", update);\n }\n\n return () => {\n window.removeEventListener(\"resize\", update);\n if (scrollerElem) {\n scrollerElem.removeEventListener(\"scroll\", update);\n }\n };\n }, [editor, updateTextFormatFloatingToolbar, anchorElem]);\n\n useEffect(() => {\n editor.getEditorState().read(() => {\n updateTextFormatFloatingToolbar();\n });\n return mergeRegister(\n editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n updateTextFormatFloatingToolbar();\n });\n }),\n\n editor.registerCommand(\n HIDE_FLOATING_TOOLBAR,\n () => {\n setTimeout(() => {\n setIsVisible(false);\n }, 10);\n return true;\n },\n COMMAND_PRIORITY_LOW\n ),\n\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n setIsVisible(true);\n updateTextFormatFloatingToolbar();\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n\n editor.registerCommand(\n BLUR_COMMAND,\n payload => {\n if (!isChildOfFloatingToolbar(payload.relatedTarget as HTMLElement)) {\n setIsVisible(false);\n }\n\n return false;\n },\n COMMAND_PRIORITY_LOW\n )\n );\n }, [editor, updateTextFormatFloatingToolbar]);\n\n if (!isVisible) {\n return null;\n }\n\n return (\n <div ref={popupCharStylesEditorRef} className=\"floating-toolbar\">\n {editor.isEditable() && (\n <>\n {toolbarElements.map(action => (\n <Fragment key={action.name}>{action.element}</Fragment>\n ))}\n </>\n )}\n </div>\n );\n};\n\nexport interface ToolbarProps {\n anchorElem?: HTMLElement;\n}\n\nexport const Toolbar = ({ anchorElem = document.body }: ToolbarProps) => {\n const { editor } = useRichTextEditor();\n const showToolbar = useDeriveValueFromSelection(({ rangeSelection }) => {\n if (!rangeSelection) {\n return false;\n }\n\n return !rangeSelection.isCollapsed();\n });\n\n if (!showToolbar) {\n return null;\n }\n\n return createPortal(<FloatingToolbar anchorElem={anchorElem} editor={editor} />, anchorElem);\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
export interface FontSize {
|
|
3
|
-
id: string;
|
|
4
|
-
name: string;
|
|
5
|
-
value: string;
|
|
6
|
-
}
|
|
7
|
-
export declare const FONT_SIZES_FALLBACK: FontSize[];
|
|
8
|
-
interface FontSizeActionProps {
|
|
9
|
-
fontSizes?: FontSize[];
|
|
10
|
-
}
|
|
11
|
-
export declare const FontSizeAction: (({ fontSizes }: FontSizeActionProps) => React.JSX.Element) & {
|
|
12
|
-
FONT_SIZES_FALLBACK: FontSize[];
|
|
13
|
-
};
|
|
14
|
-
export {};
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import React, { useCallback, useEffect, useState } from "react";
|
|
2
|
-
import { $getSelectionStyleValueForProperty, $patchStyleText } from "@lexical/selection";
|
|
3
|
-
import { mergeRegister } from "@lexical/utils";
|
|
4
|
-
import { $getSelection, $isRangeSelection } from "lexical";
|
|
5
|
-
import { DropDown, DropDownItem } from "../../ui/DropDown";
|
|
6
|
-
import { useDeriveValueFromSelection } from "../../hooks/useCurrentSelection";
|
|
7
|
-
import { useRichTextEditor } from "../../hooks";
|
|
8
|
-
export const FONT_SIZES_FALLBACK = ["8px", "9px", "10px", "11px", "12px", "14px", "15px", "16px", "18px", "21px", "24px", "30px", "36px", "48px", "60px", "72px", "96px"].map(size => ({
|
|
9
|
-
id: size,
|
|
10
|
-
name: size,
|
|
11
|
-
value: size,
|
|
12
|
-
default: size === "15px"
|
|
13
|
-
}));
|
|
14
|
-
const emptyOption = {
|
|
15
|
-
value: "",
|
|
16
|
-
name: "Font Size",
|
|
17
|
-
id: "empty"
|
|
18
|
-
};
|
|
19
|
-
function dropDownActiveClass(active) {
|
|
20
|
-
if (active) {
|
|
21
|
-
return "active dropdown-item-active";
|
|
22
|
-
}
|
|
23
|
-
return "";
|
|
24
|
-
}
|
|
25
|
-
function FontSizeDropDown(props) {
|
|
26
|
-
const {
|
|
27
|
-
editor,
|
|
28
|
-
value,
|
|
29
|
-
fontSizes,
|
|
30
|
-
disabled = false
|
|
31
|
-
} = props;
|
|
32
|
-
const handleClick = useCallback(option => {
|
|
33
|
-
editor.update(() => {
|
|
34
|
-
const selection = $getSelection();
|
|
35
|
-
if ($isRangeSelection(selection)) {
|
|
36
|
-
$patchStyleText(selection, {
|
|
37
|
-
["font-size"]: option.value
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
}, [editor]);
|
|
42
|
-
const selectedOption = fontSizes.find(opt => opt.value === value) ?? emptyOption;
|
|
43
|
-
return /*#__PURE__*/React.createElement(DropDown, {
|
|
44
|
-
disabled: disabled,
|
|
45
|
-
buttonClassName: "toolbar-item font-size",
|
|
46
|
-
buttonLabel: selectedOption.name,
|
|
47
|
-
buttonAriaLabel: "Formatting options for font size"
|
|
48
|
-
}, fontSizes.map(option => /*#__PURE__*/React.createElement(DropDownItem, {
|
|
49
|
-
className: `item fontsize-item ${dropDownActiveClass(value === option.id)}`,
|
|
50
|
-
onClick: () => handleClick(option),
|
|
51
|
-
key: option.id
|
|
52
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
53
|
-
className: "text"
|
|
54
|
-
}, option.name))));
|
|
55
|
-
}
|
|
56
|
-
const FontSize = ({
|
|
57
|
-
fontSizes = FONT_SIZES_FALLBACK
|
|
58
|
-
}) => {
|
|
59
|
-
const {
|
|
60
|
-
editor
|
|
61
|
-
} = useRichTextEditor();
|
|
62
|
-
const [isEditable, setIsEditable] = useState(() => editor.isEditable());
|
|
63
|
-
const fontSize = useDeriveValueFromSelection(({
|
|
64
|
-
rangeSelection
|
|
65
|
-
}) => {
|
|
66
|
-
if (!rangeSelection) {
|
|
67
|
-
return undefined;
|
|
68
|
-
}
|
|
69
|
-
try {
|
|
70
|
-
return $getSelectionStyleValueForProperty(rangeSelection, "font-size");
|
|
71
|
-
} catch {
|
|
72
|
-
return undefined;
|
|
73
|
-
}
|
|
74
|
-
});
|
|
75
|
-
useEffect(() => {
|
|
76
|
-
return mergeRegister(editor.registerEditableListener(editable => {
|
|
77
|
-
setIsEditable(editable);
|
|
78
|
-
}));
|
|
79
|
-
}, [editor]);
|
|
80
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FontSizeDropDown, {
|
|
81
|
-
disabled: !isEditable,
|
|
82
|
-
value: fontSize,
|
|
83
|
-
editor: editor,
|
|
84
|
-
fontSizes: fontSizes
|
|
85
|
-
}));
|
|
86
|
-
};
|
|
87
|
-
export const FontSizeAction = Object.assign(FontSize, {
|
|
88
|
-
FONT_SIZES_FALLBACK
|
|
89
|
-
});
|
|
90
|
-
|
|
91
|
-
//# sourceMappingURL=FontSizeAction.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useEffect","useState","$getSelectionStyleValueForProperty","$patchStyleText","mergeRegister","$getSelection","$isRangeSelection","DropDown","DropDownItem","useDeriveValueFromSelection","useRichTextEditor","FONT_SIZES_FALLBACK","map","size","id","name","value","default","emptyOption","dropDownActiveClass","active","FontSizeDropDown","props","editor","fontSizes","disabled","handleClick","option","update","selection","selectedOption","find","opt","createElement","buttonClassName","buttonLabel","buttonAriaLabel","className","onClick","key","FontSize","isEditable","setIsEditable","fontSize","rangeSelection","undefined","registerEditableListener","editable","Fragment","FontSizeAction","Object","assign"],"sources":["FontSizeAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { $getSelectionStyleValueForProperty, $patchStyleText } from \"@lexical/selection\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport type { LexicalEditor } from \"lexical\";\nimport { $getSelection, $isRangeSelection } from \"lexical\";\nimport { DropDown, DropDownItem } from \"~/ui/DropDown\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport interface FontSize {\n id: string;\n name: string;\n value: string;\n}\n\nexport const FONT_SIZES_FALLBACK: FontSize[] = [\n \"8px\",\n \"9px\",\n \"10px\",\n \"11px\",\n \"12px\",\n \"14px\",\n \"15px\",\n \"16px\",\n \"18px\",\n \"21px\",\n \"24px\",\n \"30px\",\n \"36px\",\n \"48px\",\n \"60px\",\n \"72px\",\n \"96px\"\n].map(size => ({\n id: size,\n name: size,\n value: size,\n default: size === \"15px\"\n}));\n\nconst emptyOption: FontSize = {\n value: \"\",\n name: \"Font Size\",\n id: \"empty\"\n};\n\nfunction dropDownActiveClass(active: boolean) {\n if (active) {\n return \"active dropdown-item-active\";\n }\n return \"\";\n}\n\ninterface FontSizeDropDownProps {\n fontSizes: FontSize[];\n editor: LexicalEditor;\n value: string | undefined;\n disabled?: boolean;\n}\n\nfunction FontSizeDropDown(props: FontSizeDropDownProps): JSX.Element {\n const { editor, value, fontSizes, disabled = false } = props;\n\n const handleClick = useCallback(\n (option: FontSize) => {\n editor.update(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n $patchStyleText(selection, {\n [\"font-size\"]: option.value\n });\n }\n });\n },\n [editor]\n );\n\n const selectedOption = fontSizes.find(opt => opt.value === value) ?? emptyOption;\n\n return (\n <DropDown\n disabled={disabled}\n buttonClassName=\"toolbar-item font-size\"\n buttonLabel={selectedOption.name}\n buttonAriaLabel={\"Formatting options for font size\"}\n >\n {fontSizes.map(option => (\n <DropDownItem\n className={`item fontsize-item ${dropDownActiveClass(value === option.id)}`}\n onClick={() => handleClick(option)}\n key={option.id}\n >\n <span className=\"text\">{option.name}</span>\n </DropDownItem>\n ))}\n </DropDown>\n );\n}\n\ninterface FontSizeActionProps {\n fontSizes?: FontSize[];\n}\n\nconst FontSize = ({ fontSizes = FONT_SIZES_FALLBACK }: FontSizeActionProps) => {\n const { editor } = useRichTextEditor();\n const [isEditable, setIsEditable] = useState(() => editor.isEditable());\n const fontSize = useDeriveValueFromSelection(({ rangeSelection }) => {\n if (!rangeSelection) {\n return undefined;\n }\n try {\n return $getSelectionStyleValueForProperty(rangeSelection, \"font-size\");\n } catch {\n return undefined;\n }\n });\n\n useEffect(() => {\n return mergeRegister(\n editor.registerEditableListener(editable => {\n setIsEditable(editable);\n })\n );\n }, [editor]);\n\n return (\n <>\n <FontSizeDropDown\n disabled={!isEditable}\n value={fontSize}\n editor={editor}\n fontSizes={fontSizes}\n />\n </>\n );\n};\n\nexport const FontSizeAction = Object.assign(FontSize, { FONT_SIZES_FALLBACK });\n"],"mappings":"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","ignoreList":[]}
|
package/hooks/useList.d.ts
DELETED
package/hooks/useList.js
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { mergeRegister } from "@lexical/utils";
|
|
2
|
-
import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, INDENT_CONTENT_COMMAND, INSERT_PARAGRAPH_COMMAND, KEY_BACKSPACE_COMMAND, OUTDENT_CONTENT_COMMAND } from "lexical";
|
|
3
|
-
import { useEffect } from "react";
|
|
4
|
-
import { $handleListInsertParagraph, indentList, insertList, outdentList, removeList, $isListNode } from "@webiny/lexical-nodes";
|
|
5
|
-
import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from "../commands";
|
|
6
|
-
import { getNodeFromSelection } from "./useCurrentElement";
|
|
7
|
-
export function useList(editor) {
|
|
8
|
-
useEffect(() => {
|
|
9
|
-
return mergeRegister(editor.registerCommand(INDENT_CONTENT_COMMAND, () => {
|
|
10
|
-
indentList();
|
|
11
|
-
return false;
|
|
12
|
-
}, COMMAND_PRIORITY_LOW), editor.registerCommand(OUTDENT_CONTENT_COMMAND, () => {
|
|
13
|
-
outdentList();
|
|
14
|
-
return false;
|
|
15
|
-
}, COMMAND_PRIORITY_LOW), editor.registerCommand(INSERT_ORDERED_LIST_COMMAND, ({
|
|
16
|
-
themeStyleId
|
|
17
|
-
}) => {
|
|
18
|
-
insertList(editor, "number", themeStyleId);
|
|
19
|
-
return true;
|
|
20
|
-
}, COMMAND_PRIORITY_LOW), editor.registerCommand(INSERT_UNORDERED_LIST_COMMAND, ({
|
|
21
|
-
themeStyleId
|
|
22
|
-
}) => {
|
|
23
|
-
insertList(editor, "bullet", themeStyleId);
|
|
24
|
-
return true;
|
|
25
|
-
}, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, event => {
|
|
26
|
-
const selection = $getSelection();
|
|
27
|
-
if ($isRangeSelection(selection)) {
|
|
28
|
-
const node = getNodeFromSelection(selection);
|
|
29
|
-
if (!$isListNode(node)) {
|
|
30
|
-
return false;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
// Check if list have one list item remain, without text.
|
|
34
|
-
if (node.getChildren().length === 1 && !node.getTextContent()) {
|
|
35
|
-
event.preventDefault();
|
|
36
|
-
removeList(editor);
|
|
37
|
-
return true;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
return false;
|
|
41
|
-
}, COMMAND_PRIORITY_LOW), editor.registerCommand(REMOVE_LIST_COMMAND, () => {
|
|
42
|
-
removeList(editor);
|
|
43
|
-
return true;
|
|
44
|
-
}, COMMAND_PRIORITY_LOW), editor.registerCommand(INSERT_PARAGRAPH_COMMAND, () => {
|
|
45
|
-
return $handleListInsertParagraph();
|
|
46
|
-
}, COMMAND_PRIORITY_LOW));
|
|
47
|
-
}, [editor]);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
//# sourceMappingURL=useList.js.map
|
package/hooks/useList.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["mergeRegister","$getSelection","$isRangeSelection","COMMAND_PRIORITY_LOW","INDENT_CONTENT_COMMAND","INSERT_PARAGRAPH_COMMAND","KEY_BACKSPACE_COMMAND","OUTDENT_CONTENT_COMMAND","useEffect","$handleListInsertParagraph","indentList","insertList","outdentList","removeList","$isListNode","INSERT_ORDERED_LIST_COMMAND","INSERT_UNORDERED_LIST_COMMAND","REMOVE_LIST_COMMAND","getNodeFromSelection","useList","editor","registerCommand","themeStyleId","event","selection","node","getChildren","length","getTextContent","preventDefault"],"sources":["useList.ts"],"sourcesContent":["import type { LexicalEditor } from \"lexical\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n $getSelection,\n $isRangeSelection,\n COMMAND_PRIORITY_LOW,\n INDENT_CONTENT_COMMAND,\n INSERT_PARAGRAPH_COMMAND,\n KEY_BACKSPACE_COMMAND,\n OUTDENT_CONTENT_COMMAND\n} from \"lexical\";\nimport { useEffect } from \"react\";\nimport {\n $handleListInsertParagraph,\n indentList,\n insertList,\n outdentList,\n removeList,\n $isListNode\n} from \"@webiny/lexical-nodes\";\nimport {\n INSERT_ORDERED_LIST_COMMAND,\n INSERT_UNORDERED_LIST_COMMAND,\n REMOVE_LIST_COMMAND\n} from \"~/commands\";\nimport { getNodeFromSelection } from \"~/hooks/useCurrentElement\";\n\nexport function useList(editor: LexicalEditor): void {\n useEffect(() => {\n return mergeRegister(\n editor.registerCommand(\n INDENT_CONTENT_COMMAND,\n () => {\n indentList();\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n OUTDENT_CONTENT_COMMAND,\n () => {\n outdentList();\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n INSERT_ORDERED_LIST_COMMAND,\n ({ themeStyleId }) => {\n insertList(editor, \"number\", themeStyleId);\n return true;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n INSERT_UNORDERED_LIST_COMMAND,\n ({ themeStyleId }) => {\n insertList(editor, \"bullet\", themeStyleId);\n return true;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n KEY_BACKSPACE_COMMAND,\n (event: KeyboardEvent) => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n const node = getNodeFromSelection(selection);\n if (!$isListNode(node)) {\n return false;\n }\n\n // Check if list have one list item remain, without text.\n if (node.getChildren().length === 1 && !node.getTextContent()) {\n event.preventDefault();\n removeList(editor);\n return true;\n }\n }\n return false;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n REMOVE_LIST_COMMAND,\n () => {\n removeList(editor);\n return true;\n },\n COMMAND_PRIORITY_LOW\n ),\n editor.registerCommand(\n INSERT_PARAGRAPH_COMMAND,\n () => {\n return $handleListInsertParagraph();\n },\n COMMAND_PRIORITY_LOW\n )\n );\n }, [editor]);\n}\n"],"mappings":"AACA,SAASA,aAAa,QAAQ,gBAAgB;AAC9C,SACIC,aAAa,EACbC,iBAAiB,EACjBC,oBAAoB,EACpBC,sBAAsB,EACtBC,wBAAwB,EACxBC,qBAAqB,EACrBC,uBAAuB,QACpB,SAAS;AAChB,SAASC,SAAS,QAAQ,OAAO;AACjC,SACIC,0BAA0B,EAC1BC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,UAAU,EACVC,WAAW,QACR,uBAAuB;AAC9B,SACIC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,mBAAmB;AAEvB,SAASC,oBAAoB;AAE7B,OAAO,SAASC,OAAOA,CAACC,MAAqB,EAAQ;EACjDZ,SAAS,CAAC,MAAM;IACZ,OAAOR,aAAa,CAChBoB,MAAM,CAACC,eAAe,CAClBjB,sBAAsB,EACtB,MAAM;MACFM,UAAU,CAAC,CAAC;MACZ,OAAO,KAAK;IAChB,CAAC,EACDP,oBACJ,CAAC,EACDiB,MAAM,CAACC,eAAe,CAClBd,uBAAuB,EACvB,MAAM;MACFK,WAAW,CAAC,CAAC;MACb,OAAO,KAAK;IAChB,CAAC,EACDT,oBACJ,CAAC,EACDiB,MAAM,CAACC,eAAe,CAClBN,2BAA2B,EAC3B,CAAC;MAAEO;IAAa,CAAC,KAAK;MAClBX,UAAU,CAACS,MAAM,EAAE,QAAQ,EAAEE,YAAY,CAAC;MAC1C,OAAO,IAAI;IACf,CAAC,EACDnB,oBACJ,CAAC,EACDiB,MAAM,CAACC,eAAe,CAClBL,6BAA6B,EAC7B,CAAC;MAAEM;IAAa,CAAC,KAAK;MAClBX,UAAU,CAACS,MAAM,EAAE,QAAQ,EAAEE,YAAY,CAAC;MAC1C,OAAO,IAAI;IACf,CAAC,EACDnB,oBACJ,CAAC,EACDiB,MAAM,CAACC,eAAe,CAClBf,qBAAqB,EACpBiB,KAAoB,IAAK;MACtB,MAAMC,SAAS,GAAGvB,aAAa,CAAC,CAAC;MACjC,IAAIC,iBAAiB,CAACsB,SAAS,CAAC,EAAE;QAC9B,MAAMC,IAAI,GAAGP,oBAAoB,CAACM,SAAS,CAAC;QAC5C,IAAI,CAACV,WAAW,CAACW,IAAI,CAAC,EAAE;UACpB,OAAO,KAAK;QAChB;;QAEA;QACA,IAAIA,IAAI,CAACC,WAAW,CAAC,CAAC,CAACC,MAAM,KAAK,CAAC,IAAI,CAACF,IAAI,CAACG,cAAc,CAAC,CAAC,EAAE;UAC3DL,KAAK,CAACM,cAAc,CAAC,CAAC;UACtBhB,UAAU,CAACO,MAAM,CAAC;UAClB,OAAO,IAAI;QACf;MACJ;MACA,OAAO,KAAK;IAChB,CAAC,EACDjB,oBACJ,CAAC,EACDiB,MAAM,CAACC,eAAe,CAClBJ,mBAAmB,EACnB,MAAM;MACFJ,UAAU,CAACO,MAAM,CAAC;MAClB,OAAO,IAAI;IACf,CAAC,EACDjB,oBACJ,CAAC,EACDiB,MAAM,CAACC,eAAe,CAClBhB,wBAAwB,EACxB,MAAM;MACF,OAAOI,0BAA0B,CAAC,CAAC;IACvC,CAAC,EACDN,oBACJ,CACJ,CAAC;EACL,CAAC,EAAE,CAACiB,MAAM,CAAC,CAAC;AAChB","ignoreList":[]}
|
package/hooks/useQuote.d.ts
DELETED
package/hooks/useQuote.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { useEffect } from "react";
|
|
2
|
-
import { COMMAND_PRIORITY_LOW } from "lexical";
|
|
3
|
-
import { mergeRegister } from "@lexical/utils";
|
|
4
|
-
import { formatToQuote } from "@webiny/lexical-nodes";
|
|
5
|
-
import { INSERT_QUOTE_COMMAND } from "../commands";
|
|
6
|
-
export function useQuote(editor) {
|
|
7
|
-
useEffect(() => {
|
|
8
|
-
return mergeRegister(editor.registerCommand(INSERT_QUOTE_COMMAND, ({
|
|
9
|
-
themeStyleId
|
|
10
|
-
}) => {
|
|
11
|
-
formatToQuote(editor, themeStyleId);
|
|
12
|
-
return false;
|
|
13
|
-
}, COMMAND_PRIORITY_LOW));
|
|
14
|
-
}, [editor]);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
//# sourceMappingURL=useQuote.js.map
|
package/hooks/useQuote.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","COMMAND_PRIORITY_LOW","mergeRegister","formatToQuote","INSERT_QUOTE_COMMAND","useQuote","editor","registerCommand","themeStyleId"],"sources":["useQuote.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { LexicalEditor } from \"lexical\";\nimport { COMMAND_PRIORITY_LOW } from \"lexical\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { formatToQuote } from \"@webiny/lexical-nodes\";\nimport { INSERT_QUOTE_COMMAND } from \"~/commands\";\n\nexport function useQuote(editor: LexicalEditor): void {\n useEffect(() => {\n return mergeRegister(\n editor.registerCommand(\n INSERT_QUOTE_COMMAND,\n ({ themeStyleId }) => {\n formatToQuote(editor, themeStyleId);\n return false;\n },\n COMMAND_PRIORITY_LOW\n )\n );\n }, [editor]);\n}\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AAEjC,SAASC,oBAAoB,QAAQ,SAAS;AAC9C,SAASC,aAAa,QAAQ,gBAAgB;AAC9C,SAASC,aAAa,QAAQ,uBAAuB;AACrD,SAASC,oBAAoB;AAE7B,OAAO,SAASC,QAAQA,CAACC,MAAqB,EAAQ;EAClDN,SAAS,CAAC,MAAM;IACZ,OAAOE,aAAa,CAChBI,MAAM,CAACC,eAAe,CAClBH,oBAAoB,EACpB,CAAC;MAAEI;IAAa,CAAC,KAAK;MAClBL,aAAa,CAACG,MAAM,EAAEE,YAAY,CAAC;MACnC,OAAO,KAAK;IAChB,CAAC,EACDP,oBACJ,CACJ,CAAC;EACL,CAAC,EAAE,CAACK,MAAM,CAAC,CAAC;AAChB","ignoreList":[]}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import type { LinkData } from "./FloatingLinkEditor";
|
|
3
|
-
export interface LinkFormProps {
|
|
4
|
-
linkData: LinkData;
|
|
5
|
-
onSave: (linkData: LinkData) => void;
|
|
6
|
-
onCancel: () => void;
|
|
7
|
-
}
|
|
8
|
-
export declare const LinkEditForm: ({ linkData, onSave, onCancel }: LinkFormProps) => React.JSX.Element;
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
import { sanitizeUrl } from "../../utils/sanitizeUrl";
|
|
3
|
-
import { isAnchorLink } from "../../utils/isAnchorLink";
|
|
4
|
-
export const LinkEditForm = ({
|
|
5
|
-
linkData,
|
|
6
|
-
onSave,
|
|
7
|
-
onCancel
|
|
8
|
-
}) => {
|
|
9
|
-
const [linkState, setLinkState] = useState(linkData);
|
|
10
|
-
const onInputKeyDown = event => {
|
|
11
|
-
if (event.key === "Enter") {
|
|
12
|
-
event.preventDefault();
|
|
13
|
-
onSubmit();
|
|
14
|
-
} else if (event.key === "Escape") {
|
|
15
|
-
event.preventDefault();
|
|
16
|
-
onCancel();
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
const onSubmit = () => {
|
|
20
|
-
onSave({
|
|
21
|
-
...linkState,
|
|
22
|
-
target: isAnchorLink(linkState.url) ? null : linkState.target,
|
|
23
|
-
url: sanitizeUrl(linkState.url)
|
|
24
|
-
});
|
|
25
|
-
};
|
|
26
|
-
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h5", {
|
|
27
|
-
className: "link-editor-popup-title"
|
|
28
|
-
}, "Edit Link"), /*#__PURE__*/React.createElement("div", {
|
|
29
|
-
className: "link-editor-section"
|
|
30
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
31
|
-
className: "header"
|
|
32
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
33
|
-
className: "header_title"
|
|
34
|
-
}, "URL")), /*#__PURE__*/React.createElement("div", {
|
|
35
|
-
className: "section-desc"
|
|
36
|
-
}, /*#__PURE__*/React.createElement("input", {
|
|
37
|
-
autoFocus: true,
|
|
38
|
-
placeholder: "URL: https://example.com",
|
|
39
|
-
className: "link-input full-with",
|
|
40
|
-
value: linkState.url,
|
|
41
|
-
onKeyDown: onInputKeyDown,
|
|
42
|
-
onChange: e => {
|
|
43
|
-
return setLinkState(state => ({
|
|
44
|
-
...state,
|
|
45
|
-
url: e.target.value
|
|
46
|
-
}));
|
|
47
|
-
}
|
|
48
|
-
}))), /*#__PURE__*/React.createElement("div", {
|
|
49
|
-
className: "link-editor-section"
|
|
50
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
51
|
-
className: "header"
|
|
52
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
53
|
-
className: "header_title"
|
|
54
|
-
}, "Alt text")), /*#__PURE__*/React.createElement("div", {
|
|
55
|
-
className: "section-desc"
|
|
56
|
-
}, /*#__PURE__*/React.createElement("input", {
|
|
57
|
-
placeholder: "Enter alt text",
|
|
58
|
-
className: "link-input full-with",
|
|
59
|
-
type: "text",
|
|
60
|
-
value: linkState.alt || "",
|
|
61
|
-
onKeyDown: onInputKeyDown,
|
|
62
|
-
onChange: e => {
|
|
63
|
-
return setLinkState(state => ({
|
|
64
|
-
...state,
|
|
65
|
-
alt: e.target.value
|
|
66
|
-
}));
|
|
67
|
-
}
|
|
68
|
-
}))), /*#__PURE__*/React.createElement("div", {
|
|
69
|
-
className: "link-editor-section"
|
|
70
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
71
|
-
className: "section-desc"
|
|
72
|
-
}, /*#__PURE__*/React.createElement("input", {
|
|
73
|
-
id: "link-editor-new-tab",
|
|
74
|
-
type: "checkbox",
|
|
75
|
-
checked: linkState.target === "_blank",
|
|
76
|
-
disabled: isAnchorLink(linkState.url),
|
|
77
|
-
onChange: e => {
|
|
78
|
-
return setLinkState(state => ({
|
|
79
|
-
...state,
|
|
80
|
-
target: e.target.checked ? "_blank" : null
|
|
81
|
-
}));
|
|
82
|
-
}
|
|
83
|
-
}), /*#__PURE__*/React.createElement("label", {
|
|
84
|
-
htmlFor: "link-editor-new-tab"
|
|
85
|
-
}, "Open link in a new tab"))), /*#__PURE__*/React.createElement("div", {
|
|
86
|
-
className: "link-editor-section full-with edit-form-bottom-menu"
|
|
87
|
-
}, /*#__PURE__*/React.createElement("button", {
|
|
88
|
-
className: "webiny-ui-button mdc-button",
|
|
89
|
-
onClick: onCancel
|
|
90
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
91
|
-
className: "mdc-button__ripple"
|
|
92
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
93
|
-
className: "mdc-button__label"
|
|
94
|
-
}, "Cancel")), /*#__PURE__*/React.createElement("button", {
|
|
95
|
-
className: "webiny-ui-button webiny-ui-button--primary mdc-button mdc-button--raised",
|
|
96
|
-
onClick: onSubmit
|
|
97
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
98
|
-
className: "mdc-button__ripple"
|
|
99
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
100
|
-
className: "mdc-button__label"
|
|
101
|
-
}, "Confirm"))));
|
|
102
|
-
};
|
|
103
|
-
|
|
104
|
-
//# sourceMappingURL=LinkEditForm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","sanitizeUrl","isAnchorLink","LinkEditForm","linkData","onSave","onCancel","linkState","setLinkState","onInputKeyDown","event","key","preventDefault","onSubmit","target","url","createElement","className","autoFocus","placeholder","value","onKeyDown","onChange","e","state","type","alt","id","checked","disabled","htmlFor","onClick"],"sources":["LinkEditForm.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { sanitizeUrl } from \"~/utils/sanitizeUrl\";\nimport { isAnchorLink } from \"~/utils/isAnchorLink\";\nimport type { LinkData } from \"./FloatingLinkEditor\";\n\nexport interface LinkFormProps {\n linkData: LinkData;\n onSave: (linkData: LinkData) => void;\n onCancel: () => void;\n}\n\nexport const LinkEditForm = ({ linkData, onSave, onCancel }: LinkFormProps) => {\n const [linkState, setLinkState] = useState(linkData);\n\n const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"Enter\") {\n event.preventDefault();\n onSubmit();\n } else if (event.key === \"Escape\") {\n event.preventDefault();\n onCancel();\n }\n };\n\n const onSubmit = () => {\n onSave({\n ...linkState,\n target: isAnchorLink(linkState.url) ? null : linkState.target,\n url: sanitizeUrl(linkState.url)\n });\n };\n\n return (\n <div>\n <h5 className={\"link-editor-popup-title\"}>Edit Link</h5>\n\n <div className={\"link-editor-section\"}>\n <div className={\"header\"}>\n <div className={\"header_title\"}>URL</div>\n </div>\n <div className={\"section-desc\"}>\n <input\n autoFocus\n placeholder={\"URL: https://example.com\"}\n className=\"link-input full-with\"\n value={linkState.url}\n onKeyDown={onInputKeyDown}\n onChange={e => {\n return setLinkState(state => ({\n ...state,\n url: e.target.value\n }));\n }}\n />\n </div>\n </div>\n <div className={\"link-editor-section\"}>\n <div className={\"header\"}>\n <div className={\"header_title\"}>Alt text</div>\n </div>\n <div className={\"section-desc\"}>\n <input\n placeholder={\"Enter alt text\"}\n className={\"link-input full-with\"}\n type={\"text\"}\n value={linkState.alt || \"\"}\n onKeyDown={onInputKeyDown}\n onChange={e => {\n return setLinkState(state => ({\n ...state,\n alt: e.target.value\n }));\n }}\n />\n </div>\n </div>\n <div className={\"link-editor-section\"}>\n <div className={\"section-desc\"}>\n <input\n id={\"link-editor-new-tab\"}\n type={\"checkbox\"}\n checked={linkState.target === \"_blank\"}\n disabled={isAnchorLink(linkState.url)}\n onChange={e => {\n return setLinkState(state => ({\n ...state,\n target: e.target.checked ? \"_blank\" : null\n }));\n }}\n />\n <label htmlFor={\"link-editor-new-tab\"}>Open link in a new tab</label>\n </div>\n </div>\n\n <div className={\"link-editor-section full-with edit-form-bottom-menu\"}>\n <button className=\"webiny-ui-button mdc-button\" onClick={onCancel}>\n <div className=\"mdc-button__ripple\"></div>\n <span className=\"mdc-button__label\">Cancel</span>\n </button>\n <button\n className=\"webiny-ui-button webiny-ui-button--primary mdc-button mdc-button--raised\"\n onClick={onSubmit}\n >\n <div className=\"mdc-button__ripple\"></div>\n <span className=\"mdc-button__label\">Confirm</span>\n </button>\n </div>\n </div>\n );\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import type { LinkData } from "./FloatingLinkEditor";
|
|
3
|
-
interface LinkFormProps {
|
|
4
|
-
linkData: LinkData;
|
|
5
|
-
onEdit: () => void;
|
|
6
|
-
removeLink: () => void;
|
|
7
|
-
}
|
|
8
|
-
export declare const LinkPreviewForm: ({ linkData, onEdit, removeLink }: LinkFormProps) => React.JSX.Element;
|
|
9
|
-
export {};
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
export const LinkPreviewForm = ({
|
|
3
|
-
linkData,
|
|
4
|
-
onEdit,
|
|
5
|
-
removeLink
|
|
6
|
-
}) => {
|
|
7
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
8
|
-
className: "link-preview-form"
|
|
9
|
-
}, /*#__PURE__*/React.createElement("h5", {
|
|
10
|
-
className: "link-editor-popup-title"
|
|
11
|
-
}, "Preview Link"), /*#__PURE__*/React.createElement("div", {
|
|
12
|
-
className: "link-input"
|
|
13
|
-
}, /*#__PURE__*/React.createElement("a", {
|
|
14
|
-
href: linkData.url,
|
|
15
|
-
target: "_blank",
|
|
16
|
-
rel: "noopener noreferrer"
|
|
17
|
-
}, linkData.url), /*#__PURE__*/React.createElement("div", {
|
|
18
|
-
className: "link-edit",
|
|
19
|
-
role: "button",
|
|
20
|
-
tabIndex: 0,
|
|
21
|
-
onMouseDown: event => event.preventDefault(),
|
|
22
|
-
onClick: onEdit
|
|
23
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
24
|
-
className: "link-unlink",
|
|
25
|
-
role: "button",
|
|
26
|
-
tabIndex: 0,
|
|
27
|
-
onMouseDown: event => event.preventDefault(),
|
|
28
|
-
onClick: removeLink
|
|
29
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
30
|
-
className: "link-editor-section"
|
|
31
|
-
}, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, linkData.target === "_blank" ? /*#__PURE__*/React.createElement("span", null, "Open link in a new tab") : /*#__PURE__*/React.createElement("span", null, "Open link in the same tab")), linkData.alt && /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("span", null, "Alt text: ", /*#__PURE__*/React.createElement("span", null, linkData.alt))))));
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
//# sourceMappingURL=LinkPreviewForm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","LinkPreviewForm","linkData","onEdit","removeLink","createElement","className","href","url","target","rel","role","tabIndex","onMouseDown","event","preventDefault","onClick","alt"],"sources":["LinkPreviewForm.tsx"],"sourcesContent":["import React from \"react\";\nimport type { LinkData } from \"./FloatingLinkEditor\";\n\ninterface LinkFormProps {\n linkData: LinkData;\n onEdit: () => void;\n removeLink: () => void;\n}\n\nexport const LinkPreviewForm = ({ linkData, onEdit, removeLink }: LinkFormProps) => {\n return (\n <div className={\"link-preview-form\"}>\n <h5 className={\"link-editor-popup-title\"}>Preview Link</h5>\n <div className=\"link-input\">\n <a href={linkData.url} target=\"_blank\" rel=\"noopener noreferrer\">\n {linkData.url}\n </a>\n <div\n className=\"link-edit\"\n role=\"button\"\n tabIndex={0}\n onMouseDown={event => event.preventDefault()}\n onClick={onEdit}\n />\n <div\n className=\"link-unlink\"\n role=\"button\"\n tabIndex={0}\n onMouseDown={event => event.preventDefault()}\n onClick={removeLink}\n />\n </div>\n <div className={\"link-editor-section\"}>\n <ul>\n <li>\n {linkData.target === \"_blank\" ? (\n <span>Open link in a new tab</span>\n ) : (\n <span>Open link in the same tab</span>\n )}\n </li>\n {linkData.alt && (\n <li>\n <span>\n Alt text: <span>{linkData.alt}</span>\n </span>\n </li>\n )}\n </ul>\n </div>\n </div>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AASzB,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,MAAM;EAAEC;AAA0B,CAAC,KAAK;EAChF,oBACIJ,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE;EAAoB,gBAChCN,KAAA,CAAAK,aAAA;IAAIC,SAAS,EAAE;EAA0B,GAAC,cAAgB,CAAC,eAC3DN,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAC;EAAY,gBACvBN,KAAA,CAAAK,aAAA;IAAGE,IAAI,EAAEL,QAAQ,CAACM,GAAI;IAACC,MAAM,EAAC,QAAQ;IAACC,GAAG,EAAC;EAAqB,GAC3DR,QAAQ,CAACM,GACX,CAAC,eACJR,KAAA,CAAAK,aAAA;IACIC,SAAS,EAAC,WAAW;IACrBK,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE,CAAE;IACZC,WAAW,EAAEC,KAAK,IAAIA,KAAK,CAACC,cAAc,CAAC,CAAE;IAC7CC,OAAO,EAAEb;EAAO,CACnB,CAAC,eACFH,KAAA,CAAAK,aAAA;IACIC,SAAS,EAAC,aAAa;IACvBK,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE,CAAE;IACZC,WAAW,EAAEC,KAAK,IAAIA,KAAK,CAACC,cAAc,CAAC,CAAE;IAC7CC,OAAO,EAAEZ;EAAW,CACvB,CACA,CAAC,eACNJ,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE;EAAsB,gBAClCN,KAAA,CAAAK,aAAA,0BACIL,KAAA,CAAAK,aAAA,aACKH,QAAQ,CAACO,MAAM,KAAK,QAAQ,gBACzBT,KAAA,CAAAK,aAAA,eAAM,wBAA4B,CAAC,gBAEnCL,KAAA,CAAAK,aAAA,eAAM,2BAA+B,CAEzC,CAAC,EACJH,QAAQ,CAACe,GAAG,iBACTjB,KAAA,CAAAK,aAAA,0BACIL,KAAA,CAAAK,aAAA,eAAM,YACQ,eAAAL,KAAA,CAAAK,aAAA,eAAOH,QAAQ,CAACe,GAAU,CAClC,CACN,CAER,CACH,CACJ,CAAC;AAEd,CAAC","ignoreList":[]}
|