@webiny/lexical-editor 6.0.0-beta.0 → 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/image.d.ts +2 -2
- package/commands/image.js +2 -8
- package/commands/image.js.map +1 -1
- package/commands/index.d.ts +5 -3
- package/commands/index.js +5 -38
- package/commands/index.js.map +1 -1
- package/commands/list.d.ts +2 -2
- package/commands/list.js +4 -10
- package/commands/list.js.map +1 -1
- package/commands/quote.d.ts +2 -2
- package/commands/quote.js +2 -8
- package/commands/quote.js.map +1 -1
- package/commands/toolbar.d.ts +1 -0
- package/commands/toolbar.js +4 -0
- package/commands/toolbar.js.map +1 -0
- package/commands/typography.d.ts +8 -0
- package/commands/typography.js +4 -0
- package/commands/typography.js.map +1 -0
- package/components/Editor/EnsureHeadingTagPlugin.d.ts +6 -0
- package/components/Editor/EnsureHeadingTagPlugin.js +20 -0
- package/components/Editor/EnsureHeadingTagPlugin.js.map +1 -0
- package/components/Editor/RichTextEditor.d.ts +29 -12
- package/components/Editor/RichTextEditor.js +89 -110
- package/components/Editor/RichTextEditor.js.map +1 -1
- package/components/Editor/normalizeInputValue.d.ts +6 -0
- package/components/Editor/normalizeInputValue.js +16 -0
- package/components/Editor/normalizeInputValue.js.map +1 -0
- package/components/LexicalEditorConfig/LexicalEditorConfig.d.ts +14 -16
- package/components/LexicalEditorConfig/LexicalEditorConfig.js +21 -69
- package/components/LexicalEditorConfig/LexicalEditorConfig.js.map +1 -1
- package/components/LexicalEditorConfig/components/Node.d.ts +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.d.ts +5 -8
- package/components/LexicalHtmlRenderer.js +35 -50
- package/components/LexicalHtmlRenderer.js.map +1 -1
- package/components/Toolbar/StaticToolbar.css +416 -0
- 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/ToolbarActions/BoldAction.js +16 -21
- package/components/ToolbarActions/BoldAction.js.map +1 -1
- package/components/ToolbarActions/BulletListAction.js +25 -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.d.ts +16 -4
- package/components/ToolbarActions/FontColorAction.js +32 -43
- package/components/ToolbarActions/FontColorAction.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 +25 -36
- 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.d.ts +16 -4
- package/components/ToolbarActions/TextAlignmentAction.js +36 -45
- package/components/ToolbarActions/TextAlignmentAction.js.map +1 -1
- package/components/ToolbarActions/TypographyAction.d.ts +16 -4
- package/components/ToolbarActions/TypographyAction.js +57 -79
- 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.d.ts +7 -8
- package/context/RichTextEditorContext.js +28 -26
- package/context/RichTextEditorContext.js.map +1 -1
- package/context/SharedHistoryContext.d.ts +3 -3
- package/context/SharedHistoryContext.js +12 -20
- package/context/SharedHistoryContext.js.map +1 -1
- package/context/TextAlignmentActionContextProps.d.ts +1 -1
- package/context/TextAlignmentActionContextProps.js +2 -9
- package/context/TextAlignmentActionContextProps.js.map +1 -1
- package/context/TypographyActionContext.d.ts +3 -2
- package/context/TypographyActionContext.js +2 -9
- 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 -93
- package/hooks/index.js.map +1 -1
- package/hooks/useCurrentElement.d.ts +3 -3
- package/hooks/useCurrentElement.js +11 -18
- package/hooks/useCurrentElement.js.map +1 -1
- package/hooks/useCurrentSelection.d.ts +2 -1
- package/hooks/useCurrentSelection.js +27 -40
- package/hooks/useCurrentSelection.js.map +1 -1
- package/hooks/useFontColorPicker.d.ts +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/useRichTextEditor.d.ts +1 -1
- package/hooks/useRichTextEditor.js +5 -11
- package/hooks/useRichTextEditor.js.map +1 -1
- package/hooks/useTextAlignmentAction.d.ts +1 -1
- package/hooks/useTextAlignmentAction.js +5 -11
- package/hooks/useTextAlignmentAction.js.map +1 -1
- package/hooks/useTypographyAction.d.ts +1 -1
- package/hooks/useTypographyAction.js +5 -11
- package/hooks/useTypographyAction.js.map +1 -1
- package/index.d.ts +33 -38
- package/index.js +44 -322
- package/index.js.map +1 -1
- package/package.json +18 -22
- package/plugins/BlurEventPlugin/BlurEventPlugin.d.ts +2 -2
- 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.d.ts +1 -1
- package/plugins/CodeHighlightPlugin/index.js +1 -16
- package/plugins/CodeHighlightPlugin/index.js.map +1 -1
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.d.ts +10 -0
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.js +28 -0
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.js.map +1 -0
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorController.d.ts +7 -0
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorController.js +61 -0
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorController.js.map +1 -0
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.css +2 -136
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.d.ts +4 -16
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.js +7 -180
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.js.map +1 -1
- package/plugins/FloatingLinkEditorPlugin/index.d.ts +1 -1
- package/plugins/FloatingLinkEditorPlugin/index.js +1 -16
- package/plugins/FloatingLinkEditorPlugin/index.js.map +1 -1
- package/plugins/FloatingLinkEditorPlugin/isChildOfLinkEditor.js +2 -8
- package/plugins/FloatingLinkEditorPlugin/isChildOfLinkEditor.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 -2
- package/plugins/FloatingLinkEditorPlugin/useFloatingLinkEditor.js +119 -63
- package/plugins/FloatingLinkEditorPlugin/useFloatingLinkEditor.js.map +1 -1
- package/plugins/FontColorPlugin/FontColorPlugin.js +19 -28
- package/plugins/FontColorPlugin/FontColorPlugin.js.map +1 -1
- package/plugins/FontColorPlugin/applyColorToNode.d.ts +3 -0
- package/plugins/FontColorPlugin/applyColorToNode.js +8 -0
- package/plugins/FontColorPlugin/applyColorToNode.js.map +1 -0
- package/plugins/FontColorPlugin/applyColorToSelection.d.ts +3 -0
- package/plugins/FontColorPlugin/applyColorToSelection.js +66 -0
- package/plugins/FontColorPlugin/applyColorToSelection.js.map +1 -0
- package/plugins/ImagesPlugin/ImagesPlugin.d.ts +2 -3
- package/plugins/ImagesPlugin/ImagesPlugin.js +58 -60
- package/plugins/ImagesPlugin/ImagesPlugin.js.map +1 -1
- package/plugins/LinkPlugin/LinkPlugin.d.ts +1 -1
- package/plugins/LinkPlugin/LinkPlugin.js +29 -37
- package/plugins/LinkPlugin/LinkPlugin.js.map +1 -1
- package/plugins/ListPLugin/ListPlugin.js +52 -15
- package/plugins/ListPLugin/ListPlugin.js.map +1 -1
- package/plugins/QuoteNodePlugin/QuoteNodePlugin.js +19 -16
- package/plugins/QuoteNodePlugin/QuoteNodePlugin.js.map +1 -1
- package/plugins/StateHandlingPlugin.d.ts +8 -0
- package/plugins/StateHandlingPlugin.js +75 -0
- package/plugins/StateHandlingPlugin.js.map +1 -0
- package/plugins/TypographyPlugin/TypographyPlugin.js +17 -21
- package/plugins/TypographyPlugin/TypographyPlugin.js.map +1 -1
- package/types.d.ts +8 -8
- package/types.js +6 -38
- package/types.js.map +1 -1
- package/ui/ContentEditable.d.ts +0 -1
- package/ui/ContentEditable.js +7 -14
- package/ui/ContentEditable.js.map +1 -1
- package/ui/Divider.d.ts +0 -1
- package/ui/Divider.js +3 -10
- package/ui/Divider.js.map +1 -1
- package/ui/DropDown.d.ts +1 -1
- package/ui/DropDown.js +64 -90
- package/ui/DropDown.js.map +1 -1
- package/ui/ImageResizer.d.ts +0 -1
- package/ui/ImageResizer.js +84 -89
- package/ui/ImageResizer.js.map +1 -1
- package/ui/LinkPreview.d.ts +0 -1
- package/ui/LinkPreview.js +22 -29
- package/ui/LinkPreview.js.map +1 -1
- package/ui/Placeholder.d.ts +1 -1
- package/ui/Placeholder.js +10 -16
- package/ui/Placeholder.js.map +1 -1
- package/ui/TextInput.d.ts +1 -2
- 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.d.ts +6 -7
- package/utils/files.js +5 -56
- package/utils/files.js.map +1 -1
- package/utils/getDOMRangeRect.js +4 -10
- package/utils/getDOMRangeRect.js.map +1 -1
- package/utils/getSelectedNode.d.ts +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.d.ts +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 +2 -8
- 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 +3 -3
- 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.d.ts +2 -2
- package/utils/rect.js +115 -149
- package/utils/rect.js.map +1 -1
- package/utils/sanitizeUrl.js +6 -13
- package/utils/sanitizeUrl.js.map +1 -1
- package/utils/setFloatingElemPosition.d.ts +1 -1
- package/utils/setFloatingElemPosition.js +29 -39
- package/utils/setFloatingElemPosition.js.map +1 -1
- package/components/Editor/HeadingEditor.d.ts +0 -7
- package/components/Editor/HeadingEditor.js +0 -29
- package/components/Editor/HeadingEditor.js.map +0 -1
- package/components/Editor/ParagraphEditor.d.ts +0 -7
- package/components/Editor/ParagraphEditor.js +0 -29
- package/components/Editor/ParagraphEditor.js.map +0 -1
- package/components/Toolbar/Toolbar.css +0 -647
- package/components/Toolbar/Toolbar.d.ts +0 -6
- package/components/Toolbar/Toolbar.js +0 -162
- package/components/Toolbar/Toolbar.js.map +0 -1
- package/components/ToolbarActions/FontSizeAction.d.ts +0 -2
- package/components/ToolbarActions/FontSizeAction.js +0 -88
- package/components/ToolbarActions/FontSizeAction.js.map +0 -1
- package/hooks/useList.d.ts +0 -2
- package/hooks/useList.js +0 -54
- package/hooks/useList.js.map +0 -1
- package/hooks/useQuote.d.ts +0 -2
- package/hooks/useQuote.js +0 -22
- package/hooks/useQuote.js.map +0 -1
- package/plugins/FloatingLinkEditorPlugin/LinkEditForm.d.ts +0 -9
- package/plugins/FloatingLinkEditorPlugin/LinkEditForm.js +0 -118
- package/plugins/FloatingLinkEditorPlugin/LinkEditForm.js.map +0 -1
- package/plugins/FloatingLinkEditorPlugin/LinkPreviewForm.d.ts +0 -9
- package/plugins/FloatingLinkEditorPlugin/LinkPreviewForm.js +0 -44
- package/plugins/FloatingLinkEditorPlugin/LinkPreviewForm.js.map +0 -1
- package/plugins/LexicalUpdateStatePlugin/UpdateStatePlugin.d.ts +0 -9
- package/plugins/LexicalUpdateStatePlugin/UpdateStatePlugin.js +0 -45
- package/plugins/LexicalUpdateStatePlugin/UpdateStatePlugin.js.map +0 -1
- package/plugins/LexicalUpdateStatePlugin/index.d.ts +0 -1
- package/plugins/LexicalUpdateStatePlugin/index.js +0 -18
- package/plugins/LexicalUpdateStatePlugin/index.js.map +0 -1
- package/utils/generateInitialLexicalValue.d.ts +0 -5
- package/utils/generateInitialLexicalValue.js +0 -33
- package/utils/generateInitialLexicalValue.js.map +0 -1
|
@@ -1,162 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.Toolbar = void 0;
|
|
9
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var _lexical = require("lexical");
|
|
12
|
-
var _reactDom = require("react-dom");
|
|
13
|
-
var _utils = require("@lexical/utils");
|
|
14
|
-
var _lexicalNodes = require("@webiny/lexical-nodes");
|
|
15
|
-
require("./Toolbar.css");
|
|
16
|
-
var _getDOMRangeRect = require("../../utils/getDOMRangeRect");
|
|
17
|
-
var _setFloatingElemPosition = require("../../utils/setFloatingElemPosition");
|
|
18
|
-
var _LexicalEditorConfig = require("../LexicalEditorConfig/LexicalEditorConfig");
|
|
19
|
-
var _useCurrentSelection = require("../../hooks/useCurrentSelection");
|
|
20
|
-
var _getSelectedNode = require("../../utils/getSelectedNode");
|
|
21
|
-
var _hooks = require("../../hooks");
|
|
22
|
-
var _isChildOfFloatingToolbar = require("../../utils/isChildOfFloatingToolbar");
|
|
23
|
-
var FloatingToolbar = function FloatingToolbar(_ref) {
|
|
24
|
-
var anchorElem = _ref.anchorElem,
|
|
25
|
-
editor = _ref.editor;
|
|
26
|
-
var _useState = (0, _react.useState)(true),
|
|
27
|
-
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
28
|
-
isVisible = _useState2[0],
|
|
29
|
-
setIsVisible = _useState2[1];
|
|
30
|
-
var popupCharStylesEditorRef = (0, _react.useRef)(null);
|
|
31
|
-
var _useLexicalEditorConf = (0, _LexicalEditorConfig.useLexicalEditorConfig)(),
|
|
32
|
-
toolbarElements = _useLexicalEditorConf.toolbarElements;
|
|
33
|
-
var mouseMoveListener = (0, _react.useCallback)(function (e) {
|
|
34
|
-
/* Indicates which mouse button(s) was pressed.
|
|
35
|
-
/ 1 = mouse left button
|
|
36
|
-
/ 3 = mouse left and right button in the same time
|
|
37
|
-
/ More info: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
|
|
38
|
-
*/
|
|
39
|
-
if (popupCharStylesEditorRef?.current && (e.buttons === 1 || e.buttons === 3)) {
|
|
40
|
-
if (popupCharStylesEditorRef.current.style.pointerEvents !== "none") {
|
|
41
|
-
var x = e.clientX;
|
|
42
|
-
var y = e.clientY;
|
|
43
|
-
var elementUnderMouse = document.elementFromPoint(x, y);
|
|
44
|
-
if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {
|
|
45
|
-
// Mouse is not over the target element => not a normal click, but probably a drag
|
|
46
|
-
popupCharStylesEditorRef.current.style.pointerEvents = "none";
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
}, [popupCharStylesEditorRef]);
|
|
51
|
-
var mouseUpListener = (0, _react.useCallback)(function () {
|
|
52
|
-
if (popupCharStylesEditorRef?.current) {
|
|
53
|
-
if (popupCharStylesEditorRef.current.style.pointerEvents !== "auto") {
|
|
54
|
-
popupCharStylesEditorRef.current.style.pointerEvents = "auto";
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
}, [popupCharStylesEditorRef]);
|
|
58
|
-
(0, _react.useEffect)(function () {
|
|
59
|
-
if (popupCharStylesEditorRef?.current) {
|
|
60
|
-
document.addEventListener("mousemove", mouseMoveListener);
|
|
61
|
-
document.addEventListener("mouseup", mouseUpListener);
|
|
62
|
-
return function () {
|
|
63
|
-
document.removeEventListener("mousemove", mouseMoveListener);
|
|
64
|
-
document.removeEventListener("mouseup", mouseUpListener);
|
|
65
|
-
};
|
|
66
|
-
}
|
|
67
|
-
return;
|
|
68
|
-
}, [popupCharStylesEditorRef]);
|
|
69
|
-
var updateTextFormatFloatingToolbar = (0, _react.useCallback)(function () {
|
|
70
|
-
var selection = (0, _lexical.$getSelection)();
|
|
71
|
-
var popupCharStylesEditorElem = popupCharStylesEditorRef.current;
|
|
72
|
-
var nativeSelection = window.getSelection();
|
|
73
|
-
if (popupCharStylesEditorElem === null) {
|
|
74
|
-
return;
|
|
75
|
-
}
|
|
76
|
-
var rootElement = editor.getRootElement();
|
|
77
|
-
if (selection !== null && nativeSelection !== null && !nativeSelection.isCollapsed && rootElement !== null && rootElement.contains(nativeSelection.anchorNode)) {
|
|
78
|
-
var rangeRect = (0, _getDOMRangeRect.getDOMRangeRect)(nativeSelection, rootElement);
|
|
79
|
-
(0, _setFloatingElemPosition.setFloatingElemPosition)(rangeRect, popupCharStylesEditorElem, anchorElem);
|
|
80
|
-
}
|
|
81
|
-
}, [editor, anchorElem]);
|
|
82
|
-
(0, _react.useEffect)(function () {
|
|
83
|
-
var scrollerElem = anchorElem.parentElement;
|
|
84
|
-
var update = function update() {
|
|
85
|
-
editor.getEditorState().read(function () {
|
|
86
|
-
updateTextFormatFloatingToolbar();
|
|
87
|
-
});
|
|
88
|
-
};
|
|
89
|
-
window.addEventListener("resize", update);
|
|
90
|
-
if (scrollerElem) {
|
|
91
|
-
scrollerElem.addEventListener("scroll", update);
|
|
92
|
-
}
|
|
93
|
-
return function () {
|
|
94
|
-
window.removeEventListener("resize", update);
|
|
95
|
-
if (scrollerElem) {
|
|
96
|
-
scrollerElem.removeEventListener("scroll", update);
|
|
97
|
-
}
|
|
98
|
-
};
|
|
99
|
-
}, [editor, updateTextFormatFloatingToolbar, anchorElem]);
|
|
100
|
-
(0, _react.useEffect)(function () {
|
|
101
|
-
editor.getEditorState().read(function () {
|
|
102
|
-
updateTextFormatFloatingToolbar();
|
|
103
|
-
});
|
|
104
|
-
return (0, _utils.mergeRegister)(editor.registerUpdateListener(function (_ref2) {
|
|
105
|
-
var editorState = _ref2.editorState;
|
|
106
|
-
editorState.read(function () {
|
|
107
|
-
updateTextFormatFloatingToolbar();
|
|
108
|
-
});
|
|
109
|
-
}), editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function () {
|
|
110
|
-
setIsVisible(true);
|
|
111
|
-
updateTextFormatFloatingToolbar();
|
|
112
|
-
return false;
|
|
113
|
-
}, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.BLUR_COMMAND, function (payload) {
|
|
114
|
-
if (!(0, _isChildOfFloatingToolbar.isChildOfFloatingToolbar)(payload.relatedTarget)) {
|
|
115
|
-
setIsVisible(false);
|
|
116
|
-
}
|
|
117
|
-
return false;
|
|
118
|
-
}, _lexical.COMMAND_PRIORITY_LOW));
|
|
119
|
-
}, [editor, updateTextFormatFloatingToolbar]);
|
|
120
|
-
if (!isVisible) {
|
|
121
|
-
return null;
|
|
122
|
-
}
|
|
123
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
124
|
-
ref: popupCharStylesEditorRef,
|
|
125
|
-
className: "floating-toolbar"
|
|
126
|
-
}, editor.isEditable() && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toolbarElements.map(function (action) {
|
|
127
|
-
return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
|
|
128
|
-
key: action.name
|
|
129
|
-
}, action.element);
|
|
130
|
-
})));
|
|
131
|
-
};
|
|
132
|
-
|
|
133
|
-
/**
|
|
134
|
-
* TODO: this logic should live in Node classes. A toolbar should not decide when to show itself.
|
|
135
|
-
*/
|
|
136
|
-
function isLinkNode(selection) {
|
|
137
|
-
var node = (0, _getSelectedNode.getSelectedNode)(selection);
|
|
138
|
-
var parent = node.getParent();
|
|
139
|
-
return (0, _lexicalNodes.$isLinkNode)(parent) || (0, _lexicalNodes.$isLinkNode)(node);
|
|
140
|
-
}
|
|
141
|
-
var Toolbar = exports.Toolbar = function Toolbar(_ref3) {
|
|
142
|
-
var _ref3$anchorElem = _ref3.anchorElem,
|
|
143
|
-
anchorElem = _ref3$anchorElem === void 0 ? document.body : _ref3$anchorElem;
|
|
144
|
-
var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
|
|
145
|
-
editor = _useRichTextEditor.editor;
|
|
146
|
-
var showToolbar = (0, _useCurrentSelection.useDeriveValueFromSelection)(function (_ref4) {
|
|
147
|
-
var rangeSelection = _ref4.rangeSelection;
|
|
148
|
-
if (!rangeSelection) {
|
|
149
|
-
return false;
|
|
150
|
-
}
|
|
151
|
-
return !isLinkNode(rangeSelection) && !rangeSelection.isCollapsed();
|
|
152
|
-
});
|
|
153
|
-
if (!showToolbar) {
|
|
154
|
-
return null;
|
|
155
|
-
}
|
|
156
|
-
return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(FloatingToolbar, {
|
|
157
|
-
anchorElem: anchorElem,
|
|
158
|
-
editor: editor
|
|
159
|
-
}), anchorElem);
|
|
160
|
-
};
|
|
161
|
-
|
|
162
|
-
//# sourceMappingURL=Toolbar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_reactDom","_utils","_lexicalNodes","_getDOMRangeRect","_setFloatingElemPosition","_LexicalEditorConfig","_useCurrentSelection","_getSelectedNode","_hooks","_isChildOfFloatingToolbar","FloatingToolbar","_ref","anchorElem","editor","_useState","useState","_useState2","_slicedToArray2","default","isVisible","setIsVisible","popupCharStylesEditorRef","useRef","_useLexicalEditorConf","useLexicalEditorConfig","toolbarElements","mouseMoveListener","useCallback","e","current","buttons","style","pointerEvents","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","useEffect","addEventListener","removeEventListener","updateTextFormatFloatingToolbar","selection","$getSelection","popupCharStylesEditorElem","nativeSelection","window","getSelection","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","scrollerElem","parentElement","update","getEditorState","read","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","BLUR_COMMAND","payload","isChildOfFloatingToolbar","relatedTarget","createElement","ref","className","isEditable","Fragment","map","action","key","name","element","isLinkNode","node","getSelectedNode","parent","getParent","$isLinkNode","Toolbar","exports","_ref3","_ref3$anchorElem","body","_useRichTextEditor","useRichTextEditor","showToolbar","useDeriveValueFromSelection","_ref4","rangeSelection","createPortal"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, Fragment, useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n $getSelection,\n BLUR_COMMAND,\n COMMAND_PRIORITY_LOW,\n LexicalEditor,\n RangeSelection,\n SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { $isLinkNode } from \"@webiny/lexical-nodes\";\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 { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useRichTextEditor } from \"~/hooks\";\nimport { isChildOfFloatingToolbar } from \"~/utils/isChildOfFloatingToolbar\";\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 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\n/**\n * TODO: this logic should live in Node classes. A toolbar should not decide when to show itself.\n */\nfunction isLinkNode(selection: RangeSelection) {\n const node = getSelectedNode(selection);\n const parent = node.getParent();\n\n return $isLinkNode(parent) || $isLinkNode(node);\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 !isLinkNode(rangeSelection) && !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,88 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.FontSizeAction = void 0;
|
|
9
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
-
var _selection = require("@lexical/selection");
|
|
13
|
-
var _utils = require("@lexical/utils");
|
|
14
|
-
var _lexical = require("lexical");
|
|
15
|
-
var _DropDown = require("../../ui/DropDown");
|
|
16
|
-
var _useCurrentSelection = require("../../hooks/useCurrentSelection");
|
|
17
|
-
var _hooks = require("../../hooks");
|
|
18
|
-
var FONT_SIZE_OPTIONS = ["8px", "9px", "10px", "11px", "12px", "14px", "15px", "16px", "18px", "21px", "24px", "30px", "36px", "48px", "60px", "72px", "96px"];
|
|
19
|
-
function dropDownActiveClass(active) {
|
|
20
|
-
if (active) {
|
|
21
|
-
return "active dropdown-item-active";
|
|
22
|
-
}
|
|
23
|
-
return "";
|
|
24
|
-
}
|
|
25
|
-
function FontSizeDropDown(props) {
|
|
26
|
-
var editor = props.editor,
|
|
27
|
-
value = props.value,
|
|
28
|
-
_props$disabled = props.disabled,
|
|
29
|
-
disabled = _props$disabled === void 0 ? false : _props$disabled;
|
|
30
|
-
var handleClick = (0, _react.useCallback)(function (option) {
|
|
31
|
-
editor.update(function () {
|
|
32
|
-
var selection = (0, _lexical.$getSelection)();
|
|
33
|
-
if ((0, _lexical.$isRangeSelection)(selection)) {
|
|
34
|
-
(0, _selection.$patchStyleText)(selection, (0, _defineProperty2.default)({}, "font-size", option));
|
|
35
|
-
}
|
|
36
|
-
});
|
|
37
|
-
}, [editor]);
|
|
38
|
-
return /*#__PURE__*/_react.default.createElement(_DropDown.DropDown, {
|
|
39
|
-
disabled: disabled,
|
|
40
|
-
buttonClassName: "toolbar-item font-size",
|
|
41
|
-
buttonLabel: value,
|
|
42
|
-
buttonAriaLabel: "Formatting options for font size"
|
|
43
|
-
}, FONT_SIZE_OPTIONS.map(function (option) {
|
|
44
|
-
return /*#__PURE__*/_react.default.createElement(_DropDown.DropDownItem, {
|
|
45
|
-
className: "item fontsize-item ".concat(dropDownActiveClass(value === option)),
|
|
46
|
-
onClick: function onClick() {
|
|
47
|
-
return handleClick(option);
|
|
48
|
-
},
|
|
49
|
-
key: option
|
|
50
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
51
|
-
className: "text"
|
|
52
|
-
}, option));
|
|
53
|
-
}));
|
|
54
|
-
}
|
|
55
|
-
var defaultSize = "15px";
|
|
56
|
-
var FontSizeAction = exports.FontSizeAction = function FontSizeAction() {
|
|
57
|
-
var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
|
|
58
|
-
editor = _useRichTextEditor.editor;
|
|
59
|
-
var _useState = (0, _react.useState)(function () {
|
|
60
|
-
return editor.isEditable();
|
|
61
|
-
}),
|
|
62
|
-
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
63
|
-
isEditable = _useState2[0],
|
|
64
|
-
setIsEditable = _useState2[1];
|
|
65
|
-
var fontSize = (0, _useCurrentSelection.useDeriveValueFromSelection)(function (_ref) {
|
|
66
|
-
var rangeSelection = _ref.rangeSelection;
|
|
67
|
-
if (!rangeSelection) {
|
|
68
|
-
return defaultSize;
|
|
69
|
-
}
|
|
70
|
-
try {
|
|
71
|
-
return (0, _selection.$getSelectionStyleValueForProperty)(rangeSelection, "font-size", "15px");
|
|
72
|
-
} catch (_unused) {
|
|
73
|
-
return defaultSize;
|
|
74
|
-
}
|
|
75
|
-
});
|
|
76
|
-
(0, _react.useEffect)(function () {
|
|
77
|
-
return (0, _utils.mergeRegister)(editor.registerEditableListener(function (editable) {
|
|
78
|
-
setIsEditable(editable);
|
|
79
|
-
}));
|
|
80
|
-
}, [editor]);
|
|
81
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FontSizeDropDown, {
|
|
82
|
-
disabled: !isEditable,
|
|
83
|
-
value: fontSize,
|
|
84
|
-
editor: editor
|
|
85
|
-
}));
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
//# sourceMappingURL=FontSizeAction.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_selection","_utils","_lexical","_DropDown","_useCurrentSelection","_hooks","FONT_SIZE_OPTIONS","dropDownActiveClass","active","FontSizeDropDown","props","editor","value","_props$disabled","disabled","handleClick","useCallback","option","update","selection","$getSelection","$isRangeSelection","$patchStyleText","_defineProperty2","default","createElement","DropDown","buttonClassName","buttonLabel","buttonAriaLabel","map","DropDownItem","className","concat","onClick","key","defaultSize","FontSizeAction","exports","_useRichTextEditor","useRichTextEditor","_useState","useState","isEditable","_useState2","_slicedToArray2","setIsEditable","fontSize","useDeriveValueFromSelection","_ref","rangeSelection","$getSelectionStyleValueForProperty","_unused","useEffect","mergeRegister","registerEditableListener","editable","Fragment"],"sources":["FontSizeAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { $getSelectionStyleValueForProperty, $patchStyleText } from \"@lexical/selection\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { $getSelection, $isRangeSelection, LexicalEditor } from \"lexical\";\nimport { DropDown, DropDownItem } from \"~/ui/DropDown\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nconst FONT_SIZE_OPTIONS: string[] = [\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];\n\nfunction dropDownActiveClass(active: boolean) {\n if (active) {\n return \"active dropdown-item-active\";\n }\n return \"\";\n}\n\ninterface FontSizeDropDownProps {\n editor: LexicalEditor;\n value: string;\n disabled?: boolean;\n}\n\nfunction FontSizeDropDown(props: FontSizeDropDownProps): JSX.Element {\n const { editor, value, disabled = false } = props;\n\n const handleClick = useCallback(\n (option: string) => {\n editor.update(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n $patchStyleText(selection, {\n [\"font-size\"]: option\n });\n }\n });\n },\n [editor]\n );\n\n return (\n <DropDown\n disabled={disabled}\n buttonClassName=\"toolbar-item font-size\"\n buttonLabel={value}\n buttonAriaLabel={\"Formatting options for font size\"}\n >\n {FONT_SIZE_OPTIONS.map(option => (\n <DropDownItem\n className={`item fontsize-item ${dropDownActiveClass(value === option)}`}\n onClick={() => handleClick(option)}\n key={option}\n >\n <span className=\"text\">{option}</span>\n </DropDownItem>\n ))}\n </DropDown>\n );\n}\n\nconst defaultSize = \"15px\";\n\nexport const FontSizeAction = () => {\n const { editor } = useRichTextEditor();\n const [isEditable, setIsEditable] = useState(() => editor.isEditable());\n const fontSize = useDeriveValueFromSelection(({ rangeSelection }) => {\n if (!rangeSelection) {\n return defaultSize;\n }\n try {\n return $getSelectionStyleValueForProperty(rangeSelection, \"font-size\", \"15px\");\n } catch {\n return defaultSize;\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 disabled={!isEditable} value={fontSize} editor={editor} />\n </>\n );\n};\n"],"mappings":"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","ignoreList":[]}
|
package/hooks/useList.d.ts
DELETED
package/hooks/useList.js
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useList = useList;
|
|
7
|
-
var _utils = require("@lexical/utils");
|
|
8
|
-
var _lexical = require("lexical");
|
|
9
|
-
var _react = require("react");
|
|
10
|
-
var _lexicalNodes = require("@webiny/lexical-nodes");
|
|
11
|
-
var _commands = require("../commands");
|
|
12
|
-
var _useCurrentElement = require("./useCurrentElement");
|
|
13
|
-
function useList(editor) {
|
|
14
|
-
(0, _react.useEffect)(function () {
|
|
15
|
-
return (0, _utils.mergeRegister)(editor.registerCommand(_lexical.INDENT_CONTENT_COMMAND, function () {
|
|
16
|
-
(0, _lexicalNodes.indentList)();
|
|
17
|
-
return false;
|
|
18
|
-
}, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.OUTDENT_CONTENT_COMMAND, function () {
|
|
19
|
-
(0, _lexicalNodes.outdentList)();
|
|
20
|
-
return false;
|
|
21
|
-
}, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_commands.INSERT_ORDERED_LIST_COMMAND, function (_ref) {
|
|
22
|
-
var themeStyleId = _ref.themeStyleId;
|
|
23
|
-
(0, _lexicalNodes.insertList)(editor, "number", themeStyleId);
|
|
24
|
-
return true;
|
|
25
|
-
}, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_commands.INSERT_UNORDERED_LIST_COMMAND, function (_ref2) {
|
|
26
|
-
var themeStyleId = _ref2.themeStyleId;
|
|
27
|
-
(0, _lexicalNodes.insertList)(editor, "bullet", themeStyleId);
|
|
28
|
-
return true;
|
|
29
|
-
}, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.KEY_BACKSPACE_COMMAND, function (event) {
|
|
30
|
-
var selection = (0, _lexical.$getSelection)();
|
|
31
|
-
if ((0, _lexical.$isRangeSelection)(selection)) {
|
|
32
|
-
var node = (0, _useCurrentElement.getNodeFromSelection)(selection);
|
|
33
|
-
if (!(0, _lexicalNodes.$isListNode)(node)) {
|
|
34
|
-
return false;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
// Check if list have one list item remain, without text.
|
|
38
|
-
if (node.getChildren().length === 1 && !node.getTextContent()) {
|
|
39
|
-
event.preventDefault();
|
|
40
|
-
(0, _lexicalNodes.removeList)(editor);
|
|
41
|
-
return true;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
return false;
|
|
45
|
-
}, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_commands.REMOVE_LIST_COMMAND, function () {
|
|
46
|
-
(0, _lexicalNodes.removeList)(editor);
|
|
47
|
-
return true;
|
|
48
|
-
}, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.INSERT_PARAGRAPH_COMMAND, function () {
|
|
49
|
-
return (0, _lexicalNodes.$handleListInsertParagraph)();
|
|
50
|
-
}, _lexical.COMMAND_PRIORITY_LOW));
|
|
51
|
-
}, [editor]);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
//# sourceMappingURL=useList.js.map
|
package/hooks/useList.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_utils","require","_lexical","_react","_lexicalNodes","_commands","_useCurrentElement","useList","editor","useEffect","mergeRegister","registerCommand","INDENT_CONTENT_COMMAND","indentList","COMMAND_PRIORITY_LOW","OUTDENT_CONTENT_COMMAND","outdentList","INSERT_ORDERED_LIST_COMMAND","_ref","themeStyleId","insertList","INSERT_UNORDERED_LIST_COMMAND","_ref2","KEY_BACKSPACE_COMMAND","event","selection","$getSelection","$isRangeSelection","node","getNodeFromSelection","$isListNode","getChildren","length","getTextContent","preventDefault","removeList","REMOVE_LIST_COMMAND","INSERT_PARAGRAPH_COMMAND","$handleListInsertParagraph"],"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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AASA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAQA,IAAAI,SAAA,GAAAJ,OAAA;AAKA,IAAAK,kBAAA,GAAAL,OAAA;AAEO,SAASM,OAAOA,CAACC,MAAqB,EAAQ;EACjD,IAAAC,gBAAS,EAAC,YAAM;IACZ,OAAO,IAAAC,oBAAa,EAChBF,MAAM,CAACG,eAAe,CAClBC,+BAAsB,EACtB,YAAM;MACF,IAAAC,wBAAU,EAAC,CAAC;MACZ,OAAO,KAAK;IAChB,CAAC,EACDC,6BACJ,CAAC,EACDN,MAAM,CAACG,eAAe,CAClBI,gCAAuB,EACvB,YAAM;MACF,IAAAC,yBAAW,EAAC,CAAC;MACb,OAAO,KAAK;IAChB,CAAC,EACDF,6BACJ,CAAC,EACDN,MAAM,CAACG,eAAe,CAClBM,qCAA2B,EAC3B,UAAAC,IAAA,EAAsB;MAAA,IAAnBC,YAAY,GAAAD,IAAA,CAAZC,YAAY;MACX,IAAAC,wBAAU,EAACZ,MAAM,EAAE,QAAQ,EAAEW,YAAY,CAAC;MAC1C,OAAO,IAAI;IACf,CAAC,EACDL,6BACJ,CAAC,EACDN,MAAM,CAACG,eAAe,CAClBU,uCAA6B,EAC7B,UAAAC,KAAA,EAAsB;MAAA,IAAnBH,YAAY,GAAAG,KAAA,CAAZH,YAAY;MACX,IAAAC,wBAAU,EAACZ,MAAM,EAAE,QAAQ,EAAEW,YAAY,CAAC;MAC1C,OAAO,IAAI;IACf,CAAC,EACDL,6BACJ,CAAC,EACDN,MAAM,CAACG,eAAe,CAClBY,8BAAqB,EACrB,UAACC,KAAoB,EAAK;MACtB,IAAMC,SAAS,GAAG,IAAAC,sBAAa,EAAC,CAAC;MACjC,IAAI,IAAAC,0BAAiB,EAACF,SAAS,CAAC,EAAE;QAC9B,IAAMG,IAAI,GAAG,IAAAC,uCAAoB,EAACJ,SAAS,CAAC;QAC5C,IAAI,CAAC,IAAAK,yBAAW,EAACF,IAAI,CAAC,EAAE;UACpB,OAAO,KAAK;QAChB;;QAEA;QACA,IAAIA,IAAI,CAACG,WAAW,CAAC,CAAC,CAACC,MAAM,KAAK,CAAC,IAAI,CAACJ,IAAI,CAACK,cAAc,CAAC,CAAC,EAAE;UAC3DT,KAAK,CAACU,cAAc,CAAC,CAAC;UACtB,IAAAC,wBAAU,EAAC3B,MAAM,CAAC;UAClB,OAAO,IAAI;QACf;MACJ;MACA,OAAO,KAAK;IAChB,CAAC,EACDM,6BACJ,CAAC,EACDN,MAAM,CAACG,eAAe,CAClByB,6BAAmB,EACnB,YAAM;MACF,IAAAD,wBAAU,EAAC3B,MAAM,CAAC;MAClB,OAAO,IAAI;IACf,CAAC,EACDM,6BACJ,CAAC,EACDN,MAAM,CAACG,eAAe,CAClB0B,iCAAwB,EACxB,YAAM;MACF,OAAO,IAAAC,wCAA0B,EAAC,CAAC;IACvC,CAAC,EACDxB,6BACJ,CACJ,CAAC;EACL,CAAC,EAAE,CAACN,MAAM,CAAC,CAAC;AAChB","ignoreList":[]}
|
package/hooks/useQuote.d.ts
DELETED
package/hooks/useQuote.js
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useQuote = useQuote;
|
|
7
|
-
var _react = require("react");
|
|
8
|
-
var _lexical = require("lexical");
|
|
9
|
-
var _utils = require("@lexical/utils");
|
|
10
|
-
var _lexicalNodes = require("@webiny/lexical-nodes");
|
|
11
|
-
var _commands = require("../commands");
|
|
12
|
-
function useQuote(editor) {
|
|
13
|
-
(0, _react.useEffect)(function () {
|
|
14
|
-
return (0, _utils.mergeRegister)(editor.registerCommand(_commands.INSERT_QUOTE_COMMAND, function (_ref) {
|
|
15
|
-
var themeStyleId = _ref.themeStyleId;
|
|
16
|
-
(0, _lexicalNodes.formatToQuote)(editor, themeStyleId);
|
|
17
|
-
return false;
|
|
18
|
-
}, _lexical.COMMAND_PRIORITY_LOW));
|
|
19
|
-
}, [editor]);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
//# sourceMappingURL=useQuote.js.map
|
package/hooks/useQuote.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_lexical","_utils","_lexicalNodes","_commands","useQuote","editor","useEffect","mergeRegister","registerCommand","INSERT_QUOTE_COMMAND","_ref","themeStyleId","formatToQuote","COMMAND_PRIORITY_LOW"],"sources":["useQuote.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { LexicalEditor, 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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AAEO,SAASK,QAAQA,CAACC,MAAqB,EAAQ;EAClD,IAAAC,gBAAS,EAAC,YAAM;IACZ,OAAO,IAAAC,oBAAa,EAChBF,MAAM,CAACG,eAAe,CAClBC,8BAAoB,EACpB,UAAAC,IAAA,EAAsB;MAAA,IAAnBC,YAAY,GAAAD,IAAA,CAAZC,YAAY;MACX,IAAAC,2BAAa,EAACP,MAAM,EAAEM,YAAY,CAAC;MACnC,OAAO,KAAK;IAChB,CAAC,EACDE,6BACJ,CACJ,CAAC;EACL,CAAC,EAAE,CAACR,MAAM,CAAC,CAAC;AAChB","ignoreList":[]}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { LinkData } from "./FloatingLinkEditorPlugin";
|
|
3
|
-
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;
|
|
9
|
-
export {};
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.LinkEditForm = void 0;
|
|
9
|
-
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
10
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
-
var _sanitizeUrl = require("../../utils/sanitizeUrl");
|
|
13
|
-
var _isAnchorLink = require("../../utils/isAnchorLink");
|
|
14
|
-
var LinkEditForm = exports.LinkEditForm = function LinkEditForm(_ref) {
|
|
15
|
-
var linkData = _ref.linkData,
|
|
16
|
-
onSave = _ref.onSave,
|
|
17
|
-
onCancel = _ref.onCancel;
|
|
18
|
-
var _useState = (0, _react.useState)(linkData),
|
|
19
|
-
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
20
|
-
linkState = _useState2[0],
|
|
21
|
-
setLinkState = _useState2[1];
|
|
22
|
-
var onInputKeyDown = function onInputKeyDown(event) {
|
|
23
|
-
if (event.key === "Enter") {
|
|
24
|
-
event.preventDefault();
|
|
25
|
-
onSubmit();
|
|
26
|
-
} else if (event.key === "Escape") {
|
|
27
|
-
event.preventDefault();
|
|
28
|
-
onCancel();
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
var onSubmit = function onSubmit() {
|
|
32
|
-
onSave((0, _objectSpread2.default)((0, _objectSpread2.default)({}, linkState), {}, {
|
|
33
|
-
target: (0, _isAnchorLink.isAnchorLink)(linkState.url) ? null : linkState.target,
|
|
34
|
-
url: (0, _sanitizeUrl.sanitizeUrl)(linkState.url)
|
|
35
|
-
}));
|
|
36
|
-
};
|
|
37
|
-
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h5", {
|
|
38
|
-
className: "link-editor-popup-title"
|
|
39
|
-
}, "Edit Link"), /*#__PURE__*/_react.default.createElement("div", {
|
|
40
|
-
className: "link-editor-section"
|
|
41
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
42
|
-
className: "header"
|
|
43
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
44
|
-
className: "header_title"
|
|
45
|
-
}, "URL")), /*#__PURE__*/_react.default.createElement("div", {
|
|
46
|
-
className: "section-desc"
|
|
47
|
-
}, /*#__PURE__*/_react.default.createElement("input", {
|
|
48
|
-
autoFocus: true,
|
|
49
|
-
placeholder: "URL: https://example.com",
|
|
50
|
-
className: "link-input full-with",
|
|
51
|
-
value: linkState.url,
|
|
52
|
-
onKeyDown: onInputKeyDown,
|
|
53
|
-
onChange: function onChange(e) {
|
|
54
|
-
return setLinkState(function (state) {
|
|
55
|
-
return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
|
|
56
|
-
url: e.target.value
|
|
57
|
-
});
|
|
58
|
-
});
|
|
59
|
-
}
|
|
60
|
-
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
61
|
-
className: "link-editor-section"
|
|
62
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
63
|
-
className: "header"
|
|
64
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
65
|
-
className: "header_title"
|
|
66
|
-
}, "Alt text")), /*#__PURE__*/_react.default.createElement("div", {
|
|
67
|
-
className: "section-desc"
|
|
68
|
-
}, /*#__PURE__*/_react.default.createElement("input", {
|
|
69
|
-
placeholder: "Enter alt text",
|
|
70
|
-
className: "link-input full-with",
|
|
71
|
-
type: "text",
|
|
72
|
-
value: linkState.alt || "",
|
|
73
|
-
onKeyDown: onInputKeyDown,
|
|
74
|
-
onChange: function onChange(e) {
|
|
75
|
-
return setLinkState(function (state) {
|
|
76
|
-
return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
|
|
77
|
-
alt: e.target.value
|
|
78
|
-
});
|
|
79
|
-
});
|
|
80
|
-
}
|
|
81
|
-
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
82
|
-
className: "link-editor-section"
|
|
83
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
84
|
-
className: "section-desc"
|
|
85
|
-
}, /*#__PURE__*/_react.default.createElement("input", {
|
|
86
|
-
id: "link-editor-new-tab",
|
|
87
|
-
type: "checkbox",
|
|
88
|
-
checked: linkState.target === "_blank",
|
|
89
|
-
disabled: (0, _isAnchorLink.isAnchorLink)(linkState.url),
|
|
90
|
-
onChange: function onChange(e) {
|
|
91
|
-
return setLinkState(function (state) {
|
|
92
|
-
return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
|
|
93
|
-
target: e.target.checked ? "_blank" : null
|
|
94
|
-
});
|
|
95
|
-
});
|
|
96
|
-
}
|
|
97
|
-
}), /*#__PURE__*/_react.default.createElement("label", {
|
|
98
|
-
htmlFor: "link-editor-new-tab"
|
|
99
|
-
}, "Open link in a new tab"))), /*#__PURE__*/_react.default.createElement("div", {
|
|
100
|
-
className: "link-editor-section full-with edit-form-bottom-menu"
|
|
101
|
-
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
102
|
-
className: "webiny-ui-button mdc-button",
|
|
103
|
-
onClick: onCancel
|
|
104
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
105
|
-
className: "mdc-button__ripple"
|
|
106
|
-
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
107
|
-
className: "mdc-button__label"
|
|
108
|
-
}, "Cancel")), /*#__PURE__*/_react.default.createElement("button", {
|
|
109
|
-
className: "webiny-ui-button webiny-ui-button--primary mdc-button mdc-button--raised",
|
|
110
|
-
onClick: onSubmit
|
|
111
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
112
|
-
className: "mdc-button__ripple"
|
|
113
|
-
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
114
|
-
className: "mdc-button__label"
|
|
115
|
-
}, "Confirm"))));
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
//# sourceMappingURL=LinkEditForm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_sanitizeUrl","_isAnchorLink","LinkEditForm","exports","_ref","linkData","onSave","onCancel","_useState","useState","_useState2","_slicedToArray2","default","linkState","setLinkState","onInputKeyDown","event","key","preventDefault","onSubmit","_objectSpread2","target","isAnchorLink","url","sanitizeUrl","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 { LinkData } from \"./FloatingLinkEditorPlugin\";\n\ninterface 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 { LinkData } from "./FloatingLinkEditorPlugin";
|
|
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,44 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.LinkPreviewForm = void 0;
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var LinkPreviewForm = exports.LinkPreviewForm = function LinkPreviewForm(_ref) {
|
|
10
|
-
var linkData = _ref.linkData,
|
|
11
|
-
onEdit = _ref.onEdit,
|
|
12
|
-
removeLink = _ref.removeLink;
|
|
13
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
14
|
-
className: "link-preview-form"
|
|
15
|
-
}, /*#__PURE__*/_react.default.createElement("h5", {
|
|
16
|
-
className: "link-editor-popup-title"
|
|
17
|
-
}, "Preview Link"), /*#__PURE__*/_react.default.createElement("div", {
|
|
18
|
-
className: "link-input"
|
|
19
|
-
}, /*#__PURE__*/_react.default.createElement("a", {
|
|
20
|
-
href: linkData.url,
|
|
21
|
-
target: "_blank",
|
|
22
|
-
rel: "noopener noreferrer"
|
|
23
|
-
}, linkData.url), /*#__PURE__*/_react.default.createElement("div", {
|
|
24
|
-
className: "link-edit",
|
|
25
|
-
role: "button",
|
|
26
|
-
tabIndex: 0,
|
|
27
|
-
onMouseDown: function onMouseDown(event) {
|
|
28
|
-
return event.preventDefault();
|
|
29
|
-
},
|
|
30
|
-
onClick: onEdit
|
|
31
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
32
|
-
className: "link-unlink",
|
|
33
|
-
role: "button",
|
|
34
|
-
tabIndex: 0,
|
|
35
|
-
onMouseDown: function onMouseDown(event) {
|
|
36
|
-
return event.preventDefault();
|
|
37
|
-
},
|
|
38
|
-
onClick: removeLink
|
|
39
|
-
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
40
|
-
className: "link-editor-section"
|
|
41
|
-
}, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, linkData.target === "_blank" ? /*#__PURE__*/_react.default.createElement("span", null, "Open link in a new tab") : /*#__PURE__*/_react.default.createElement("span", null, "Open link in the same tab")), linkData.alt && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("span", null, "Alt text: ", /*#__PURE__*/_react.default.createElement("span", null, linkData.alt))))));
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
//# sourceMappingURL=LinkPreviewForm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","LinkPreviewForm","exports","_ref","linkData","onEdit","removeLink","default","createElement","className","href","url","target","rel","role","tabIndex","onMouseDown","event","preventDefault","onClick","alt"],"sources":["LinkPreviewForm.tsx"],"sourcesContent":["import React from \"react\";\nimport { LinkData } from \"./FloatingLinkEditorPlugin\";\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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AASO,IAAMC,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,SAAlBA,eAAeA,CAAAE,IAAA,EAAwD;EAAA,IAAlDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,MAAM,GAAAF,IAAA,CAANE,MAAM;IAAEC,UAAU,GAAAH,IAAA,CAAVG,UAAU;EAC1D,oBACIR,MAAA,CAAAS,OAAA,CAAAC,aAAA;IAAKC,SAAS,EAAE;EAAoB,gBAChCX,MAAA,CAAAS,OAAA,CAAAC,aAAA;IAAIC,SAAS,EAAE;EAA0B,GAAC,cAAgB,CAAC,eAC3DX,MAAA,CAAAS,OAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAY,gBACvBX,MAAA,CAAAS,OAAA,CAAAC,aAAA;IAAGE,IAAI,EAAEN,QAAQ,CAACO,GAAI;IAACC,MAAM,EAAC,QAAQ;IAACC,GAAG,EAAC;EAAqB,GAC3DT,QAAQ,CAACO,GACX,CAAC,eACJb,MAAA,CAAAS,OAAA,CAAAC,aAAA;IACIC,SAAS,EAAC,WAAW;IACrBK,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE,CAAE;IACZC,WAAW,EAAE,SAAAA,YAAAC,KAAK;MAAA,OAAIA,KAAK,CAACC,cAAc,CAAC,CAAC;IAAA,CAAC;IAC7CC,OAAO,EAAEd;EAAO,CACnB,CAAC,eACFP,MAAA,CAAAS,OAAA,CAAAC,aAAA;IACIC,SAAS,EAAC,aAAa;IACvBK,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE,CAAE;IACZC,WAAW,EAAE,SAAAA,YAAAC,KAAK;MAAA,OAAIA,KAAK,CAACC,cAAc,CAAC,CAAC;IAAA,CAAC;IAC7CC,OAAO,EAAEb;EAAW,CACvB,CACA,CAAC,eACNR,MAAA,CAAAS,OAAA,CAAAC,aAAA;IAAKC,SAAS,EAAE;EAAsB,gBAClCX,MAAA,CAAAS,OAAA,CAAAC,aAAA,0BACIV,MAAA,CAAAS,OAAA,CAAAC,aAAA,aACKJ,QAAQ,CAACQ,MAAM,KAAK,QAAQ,gBACzBd,MAAA,CAAAS,OAAA,CAAAC,aAAA,eAAM,wBAA4B,CAAC,gBAEnCV,MAAA,CAAAS,OAAA,CAAAC,aAAA,eAAM,2BAA+B,CAEzC,CAAC,EACJJ,QAAQ,CAACgB,GAAG,iBACTtB,MAAA,CAAAS,OAAA,CAAAC,aAAA,0BACIV,MAAA,CAAAS,OAAA,CAAAC,aAAA,eAAM,YACQ,eAAAV,MAAA,CAAAS,OAAA,CAAAC,aAAA,eAAOJ,QAAQ,CAACgB,GAAU,CAClC,CACN,CAER,CACH,CACJ,CAAC;AAEd,CAAC","ignoreList":[]}
|