@webiny/lexical-editor 0.0.0-unstable.085ff6572f
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/LICENSE +21 -0
- package/README.md +17 -0
- package/commands/webiny-list.d.ts +7 -0
- package/commands/webiny-list.js +13 -0
- package/commands/webiny-list.js.map +1 -0
- package/commands/webiny-quote.d.ts +5 -0
- package/commands/webiny-quote.js +9 -0
- package/commands/webiny-quote.js.map +1 -0
- package/components/AddRichTextEditorNodeType.d.ts +6 -0
- package/components/AddRichTextEditorNodeType.js +28 -0
- package/components/AddRichTextEditorNodeType.js.map +1 -0
- package/components/AddRichTextEditorPlugin.d.ts +12 -0
- package/components/AddRichTextEditorPlugin.js +33 -0
- package/components/AddRichTextEditorPlugin.js.map +1 -0
- package/components/AddToolbarAction.d.ts +7 -0
- package/components/AddToolbarAction.js +33 -0
- package/components/AddToolbarAction.js.map +1 -0
- package/components/Editor/HeadingEditor.d.ts +7 -0
- package/components/Editor/HeadingEditor.js +29 -0
- package/components/Editor/HeadingEditor.js.map +1 -0
- package/components/Editor/ParagraphEditor.d.ts +7 -0
- package/components/Editor/ParagraphEditor.js +30 -0
- package/components/Editor/ParagraphEditor.js.map +1 -0
- package/components/Editor/RichTextEditor.d.ts +26 -0
- package/components/Editor/RichTextEditor.js +138 -0
- package/components/Editor/RichTextEditor.js.map +1 -0
- package/components/LexicalEditorConfig/LexicalEditorConfig.d.ts +11 -0
- package/components/LexicalEditorConfig/LexicalEditorConfig.js +19 -0
- package/components/LexicalEditorConfig/LexicalEditorConfig.js.map +1 -0
- package/components/LexicalHtmlRenderer.d.ts +16 -0
- package/components/LexicalHtmlRenderer.js +67 -0
- package/components/LexicalHtmlRenderer.js.map +1 -0
- package/components/Toolbar/HeadingToolbar.d.ts +12 -0
- package/components/Toolbar/HeadingToolbar.js +23 -0
- package/components/Toolbar/HeadingToolbar.js.map +1 -0
- package/components/Toolbar/ParagraphToolbar.d.ts +12 -0
- package/components/Toolbar/ParagraphToolbar.js +23 -0
- package/components/Toolbar/ParagraphToolbar.js.map +1 -0
- package/components/Toolbar/Toolbar.css +435 -0
- package/components/Toolbar/Toolbar.d.ts +13 -0
- package/components/Toolbar/Toolbar.js +215 -0
- package/components/Toolbar/Toolbar.js.map +1 -0
- package/components/ToolbarActions/BoldAction.d.ts +2 -0
- package/components/ToolbarActions/BoldAction.js +43 -0
- package/components/ToolbarActions/BoldAction.js.map +1 -0
- package/components/ToolbarActions/BulletListAction.d.ts +2 -0
- package/components/ToolbarActions/BulletListAction.js +56 -0
- package/components/ToolbarActions/BulletListAction.js.map +1 -0
- package/components/ToolbarActions/CodeHighlightAction.d.ts +2 -0
- package/components/ToolbarActions/CodeHighlightAction.js +43 -0
- package/components/ToolbarActions/CodeHighlightAction.js.map +1 -0
- package/components/ToolbarActions/FontColorAction.d.ts +11 -0
- package/components/ToolbarActions/FontColorAction.js +83 -0
- package/components/ToolbarActions/FontColorAction.js.map +1 -0
- package/components/ToolbarActions/FontSizeAction.d.ts +2 -0
- package/components/ToolbarActions/FontSizeAction.js +101 -0
- package/components/ToolbarActions/FontSizeAction.js.map +1 -0
- package/components/ToolbarActions/ItalicAction.d.ts +2 -0
- package/components/ToolbarActions/ItalicAction.js +43 -0
- package/components/ToolbarActions/ItalicAction.js.map +1 -0
- package/components/ToolbarActions/LinkAction.d.ts +2 -0
- package/components/ToolbarActions/LinkAction.js +64 -0
- package/components/ToolbarActions/LinkAction.js.map +1 -0
- package/components/ToolbarActions/NumberedListAction.d.ts +2 -0
- package/components/ToolbarActions/NumberedListAction.js +58 -0
- package/components/ToolbarActions/NumberedListAction.js.map +1 -0
- package/components/ToolbarActions/QuoteAction.d.ts +2 -0
- package/components/ToolbarActions/QuoteAction.js +52 -0
- package/components/ToolbarActions/QuoteAction.js.map +1 -0
- package/components/ToolbarActions/TextAlignmentAction.d.ts +11 -0
- package/components/ToolbarActions/TextAlignmentAction.js +70 -0
- package/components/ToolbarActions/TextAlignmentAction.js.map +1 -0
- package/components/ToolbarActions/TypographyAction.d.ts +11 -0
- package/components/ToolbarActions/TypographyAction.js +145 -0
- package/components/ToolbarActions/TypographyAction.js.map +1 -0
- package/components/ToolbarActions/UnderlineAction.d.ts +2 -0
- package/components/ToolbarActions/UnderlineAction.js +43 -0
- package/components/ToolbarActions/UnderlineAction.js.map +1 -0
- package/components/ToolbarPresets/HeadingToolbarPreset.d.ts +2 -0
- package/components/ToolbarPresets/HeadingToolbarPreset.js +56 -0
- package/components/ToolbarPresets/HeadingToolbarPreset.js.map +1 -0
- package/components/ToolbarPresets/ParagraphToolbarPreset.d.ts +2 -0
- package/components/ToolbarPresets/ParagraphToolbarPreset.js +71 -0
- package/components/ToolbarPresets/ParagraphToolbarPreset.js.map +1 -0
- package/context/FontColorActionContext.d.ts +6 -0
- package/context/FontColorActionContext.js +10 -0
- package/context/FontColorActionContext.js.map +1 -0
- package/context/RichTextEditorContext.d.ts +26 -0
- package/context/RichTextEditorContext.js +68 -0
- package/context/RichTextEditorContext.js.map +1 -0
- package/context/SharedHistoryContext.d.ts +11 -0
- package/context/SharedHistoryContext.js +26 -0
- package/context/SharedHistoryContext.js.map +1 -0
- package/context/TextAlignmentActionContextProps.d.ts +9 -0
- package/context/TextAlignmentActionContextProps.js +10 -0
- package/context/TextAlignmentActionContextProps.js.map +1 -0
- package/context/TypographyActionContext.d.ts +7 -0
- package/context/TypographyActionContext.js +10 -0
- package/context/TypographyActionContext.js.map +1 -0
- package/hooks/useFontColorPicker.d.ts +2 -0
- package/hooks/useFontColorPicker.js +15 -0
- package/hooks/useFontColorPicker.js.map +1 -0
- package/hooks/useList.d.ts +2 -0
- package/hooks/useList.js +39 -0
- package/hooks/useList.js.map +1 -0
- package/hooks/useQuote.d.ts +2 -0
- package/hooks/useQuote.js +20 -0
- package/hooks/useQuote.js.map +1 -0
- package/hooks/useRichTextEditor.d.ts +2 -0
- package/hooks/useRichTextEditor.js +15 -0
- package/hooks/useRichTextEditor.js.map +1 -0
- package/hooks/useTextAlignmentAction.d.ts +1 -0
- package/hooks/useTextAlignmentAction.js +15 -0
- package/hooks/useTextAlignmentAction.js.map +1 -0
- package/hooks/useTypographyAction.d.ts +1 -0
- package/hooks/useTypographyAction.js +15 -0
- package/hooks/useTypographyAction.js.map +1 -0
- package/images/icons/LICENSE.md +5 -0
- package/images/icons/chat-square-quote.svg +1 -0
- package/images/icons/chevron-down.svg +1 -0
- package/images/icons/code.svg +1 -0
- package/images/icons/font-color.svg +1 -0
- package/images/icons/indent.svg +3 -0
- package/images/icons/justify.svg +3 -0
- package/images/icons/link.svg +1 -0
- package/images/icons/list-ol.svg +1 -0
- package/images/icons/list-ul.svg +1 -0
- package/images/icons/outdent.svg +3 -0
- package/images/icons/pencil-fill.svg +1 -0
- package/images/icons/text-center.svg +1 -0
- package/images/icons/text-left.svg +1 -0
- package/images/icons/text-paragraph.svg +1 -0
- package/images/icons/text-right.svg +1 -0
- package/images/icons/type-bold.svg +1 -0
- package/images/icons/type-h1.svg +1 -0
- package/images/icons/type-h2.svg +1 -0
- package/images/icons/type-h3.svg +1 -0
- package/images/icons/type-h4.svg +1 -0
- package/images/icons/type-h5.svg +1 -0
- package/images/icons/type-h6.svg +1 -0
- package/images/icons/type-italic.svg +1 -0
- package/images/icons/type-strikethrough.svg +1 -0
- package/images/icons/type-underline.svg +1 -0
- package/images/icons/unlink_icon.svg +1 -0
- package/index.d.ts +42 -0
- package/index.js +295 -0
- package/index.js.map +1 -0
- package/nodes/FontColorNode.d.ts +43 -0
- package/nodes/FontColorNode.js +127 -0
- package/nodes/FontColorNode.js.map +1 -0
- package/nodes/HeadingNode.d.ts +34 -0
- package/nodes/HeadingNode.js +192 -0
- package/nodes/HeadingNode.js.map +1 -0
- package/nodes/ListItemNode.d.ts +46 -0
- package/nodes/ListItemNode.js +441 -0
- package/nodes/ListItemNode.js.map +1 -0
- package/nodes/ListNode/formatList.d.ts +12 -0
- package/nodes/ListNode/formatList.js +424 -0
- package/nodes/ListNode/formatList.js.map +1 -0
- package/nodes/ListNode.d.ts +42 -0
- package/nodes/ListNode.js +294 -0
- package/nodes/ListNode.js.map +1 -0
- package/nodes/ParagraphNode.d.ts +32 -0
- package/nodes/ParagraphNode.js +218 -0
- package/nodes/ParagraphNode.js.map +1 -0
- package/nodes/QuoteNode.d.ts +34 -0
- package/nodes/QuoteNode.js +225 -0
- package/nodes/QuoteNode.js.map +1 -0
- package/nodes/TypographyElementNode.d.ts +42 -0
- package/nodes/TypographyElementNode.js +155 -0
- package/nodes/TypographyElementNode.js.map +1 -0
- package/nodes/types.d.ts +15 -0
- package/nodes/types.js +5 -0
- package/nodes/types.js.map +1 -0
- package/nodes/webinyNodes.d.ts +7 -0
- package/nodes/webinyNodes.js +45 -0
- package/nodes/webinyNodes.js.map +1 -0
- package/package.json +41 -0
- package/plugins/AutoLinkPlugin/AutoLinkPlugin.d.ts +11 -0
- package/plugins/AutoLinkPlugin/AutoLinkPlugin.js +46 -0
- package/plugins/AutoLinkPlugin/AutoLinkPlugin.js.map +1 -0
- package/plugins/AutoLinkPlugin/index.d.ts +1 -0
- package/plugins/AutoLinkPlugin/index.js +16 -0
- package/plugins/AutoLinkPlugin/index.js.map +1 -0
- package/plugins/BlurEventPlugin/BlurEventPlugin.d.ts +7 -0
- package/plugins/BlurEventPlugin/BlurEventPlugin.js +28 -0
- package/plugins/BlurEventPlugin/BlurEventPlugin.js.map +1 -0
- package/plugins/ClickableLinkPlugin/ClickableLinkPlugin.d.ts +17 -0
- package/plugins/ClickableLinkPlugin/ClickableLinkPlugin.js +88 -0
- package/plugins/ClickableLinkPlugin/ClickableLinkPlugin.js.map +1 -0
- package/plugins/ClickableLinkPlugin/index.d.ts +1 -0
- package/plugins/ClickableLinkPlugin/index.js +16 -0
- package/plugins/ClickableLinkPlugin/index.js.map +1 -0
- package/plugins/CodeHighlightPlugin/CodeHighlightPlugin.d.ts +1 -0
- package/plugins/CodeHighlightPlugin/CodeHighlightPlugin.js +20 -0
- package/plugins/CodeHighlightPlugin/CodeHighlightPlugin.js.map +1 -0
- package/plugins/CodeHighlightPlugin/index.d.ts +1 -0
- package/plugins/CodeHighlightPlugin/index.js +16 -0
- package/plugins/CodeHighlightPlugin/index.js.map +1 -0
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.css +118 -0
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.d.ts +7 -0
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.js +222 -0
- package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.js.map +1 -0
- package/plugins/FloatingLinkEditorPlugin/index.d.ts +1 -0
- package/plugins/FloatingLinkEditorPlugin/index.js +16 -0
- package/plugins/FloatingLinkEditorPlugin/index.js.map +1 -0
- package/plugins/FontColorPlugin/FontColorPlugin.d.ts +2 -0
- package/plugins/FontColorPlugin/FontColorPlugin.js +39 -0
- package/plugins/FontColorPlugin/FontColorPlugin.js.map +1 -0
- package/plugins/LexicalUpdateStatePlugin/LexicalUpdateStatePlugin.d.ts +8 -0
- package/plugins/LexicalUpdateStatePlugin/LexicalUpdateStatePlugin.js +34 -0
- package/plugins/LexicalUpdateStatePlugin/LexicalUpdateStatePlugin.js.map +1 -0
- package/plugins/LexicalUpdateStatePlugin/index.d.ts +1 -0
- package/plugins/LexicalUpdateStatePlugin/index.js +16 -0
- package/plugins/LexicalUpdateStatePlugin/index.js.map +1 -0
- package/plugins/TypographyPlugin/TypographyPlugin.d.ts +2 -0
- package/plugins/TypographyPlugin/TypographyPlugin.js +35 -0
- package/plugins/TypographyPlugin/TypographyPlugin.js.map +1 -0
- package/plugins/WebinyListPLugin/WebinyListPlugin.d.ts +1 -0
- package/plugins/WebinyListPLugin/WebinyListPlugin.js +25 -0
- package/plugins/WebinyListPLugin/WebinyListPlugin.js.map +1 -0
- package/plugins/WebinyQuoteNodePlugin/WebinyQuoteNodePlugin.d.ts +1 -0
- package/plugins/WebinyQuoteNodePlugin/WebinyQuoteNodePlugin.js +24 -0
- package/plugins/WebinyQuoteNodePlugin/WebinyQuoteNodePlugin.js.map +1 -0
- package/themes/webinyLexicalTheme.css +429 -0
- package/themes/webinyLexicalTheme.d.ts +9 -0
- package/themes/webinyLexicalTheme.js +87 -0
- package/themes/webinyLexicalTheme.js.map +1 -0
- package/types.d.ts +63 -0
- package/types.js +25 -0
- package/types.js.map +1 -0
- package/ui/Divider.d.ts +2 -0
- package/ui/Divider.js +13 -0
- package/ui/Divider.js.map +1 -0
- package/ui/DropDown.d.ts +26 -0
- package/ui/DropDown.js +206 -0
- package/ui/DropDown.js.map +1 -0
- package/ui/Input.css +32 -0
- package/ui/LinkPreview.css +69 -0
- package/ui/LinkPreview.d.ts +12 -0
- package/ui/LinkPreview.js +101 -0
- package/ui/LinkPreview.js.map +1 -0
- package/ui/Placeholder.css +23 -0
- package/ui/Placeholder.d.ts +13 -0
- package/ui/Placeholder.js +24 -0
- package/ui/Placeholder.js.map +1 -0
- package/ui/TextInput.d.ts +18 -0
- package/ui/TextInput.js +39 -0
- package/ui/TextInput.js.map +1 -0
- package/ui/ToolbarActionDialog.d.ts +12 -0
- package/ui/ToolbarActionDialog.js +106 -0
- package/ui/ToolbarActionDialog.js.map +1 -0
- package/utils/findTypographyStyleByHtmlTag.d.ts +8 -0
- package/utils/findTypographyStyleByHtmlTag.js +16 -0
- package/utils/findTypographyStyleByHtmlTag.js.map +1 -0
- package/utils/generateInitialLexicalValue.d.ts +5 -0
- package/utils/generateInitialLexicalValue.js +30 -0
- package/utils/generateInitialLexicalValue.js.map +1 -0
- package/utils/getDOMRangeRect.d.ts +10 -0
- package/utils/getDOMRangeRect.js +27 -0
- package/utils/getDOMRangeRect.js.map +1 -0
- package/utils/getLexicalTextSelectionState.d.ts +5 -0
- package/utils/getLexicalTextSelectionState.js +163 -0
- package/utils/getLexicalTextSelectionState.js.map +1 -0
- package/utils/getSelectedNode.d.ts +2 -0
- package/utils/getSelectedNode.js +30 -0
- package/utils/getSelectedNode.js.map +1 -0
- package/utils/isValidJSON.d.ts +1 -0
- package/utils/isValidJSON.js +18 -0
- package/utils/isValidJSON.js.map +1 -0
- package/utils/isValidLexicalData.d.ts +2 -0
- package/utils/isValidLexicalData.js +24 -0
- package/utils/isValidLexicalData.js.map +1 -0
- package/utils/nodes/clearNodeFormating.d.ts +2 -0
- package/utils/nodes/clearNodeFormating.js +28 -0
- package/utils/nodes/clearNodeFormating.js.map +1 -0
- package/utils/nodes/formatToHeading.d.ts +3 -0
- package/utils/nodes/formatToHeading.js +25 -0
- package/utils/nodes/formatToHeading.js.map +1 -0
- package/utils/nodes/formatToParagraph.d.ts +2 -0
- package/utils/nodes/formatToParagraph.js +20 -0
- package/utils/nodes/formatToParagraph.js.map +1 -0
- package/utils/nodes/formatToQuote.d.ts +2 -0
- package/utils/nodes/formatToQuote.js +25 -0
- package/utils/nodes/formatToQuote.js.map +1 -0
- package/utils/nodes/listNode.d.ts +11 -0
- package/utils/nodes/listNode.js +107 -0
- package/utils/nodes/listNode.js.map +1 -0
- package/utils/point.d.ts +21 -0
- package/utils/point.js +77 -0
- package/utils/point.js.map +1 -0
- package/utils/rect.d.ts +47 -0
- package/utils/rect.js +169 -0
- package/utils/rect.js.map +1 -0
- package/utils/sanitizeUrl.d.ts +8 -0
- package/utils/sanitizeUrl.js +27 -0
- package/utils/sanitizeUrl.js.map +1 -0
- package/utils/setFloatingElemPosition.d.ts +3 -0
- package/utils/setFloatingElemPosition.js +40 -0
- package/utils/setFloatingElemPosition.js.map +1 -0
- package/utils/styleObjectToString.d.ts +2 -0
- package/utils/styleObjectToString.js +22 -0
- package/utils/styleObjectToString.js.map +1 -0
- package/utils/toTypographyEmotionMap.d.ts +3 -0
- package/utils/toTypographyEmotionMap.js +36 -0
- package/utils/toTypographyEmotionMap.js.map +1 -0
|
@@ -0,0 +1,222 @@
|
|
|
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.FloatingLinkEditorPlugin = FloatingLinkEditorPlugin;
|
|
9
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
require("./FloatingLinkEditorPlugin.css");
|
|
12
|
+
var _link = require("@lexical/link");
|
|
13
|
+
var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
|
|
14
|
+
var _utils = require("@lexical/utils");
|
|
15
|
+
var _lexical = require("lexical");
|
|
16
|
+
var _reactDom = require("react-dom");
|
|
17
|
+
var _LinkPreview = require("../../ui/LinkPreview");
|
|
18
|
+
var _getSelectedNode = require("../../utils/getSelectedNode");
|
|
19
|
+
var _sanitizeUrl = require("../../utils/sanitizeUrl");
|
|
20
|
+
var _setFloatingElemPosition = require("../../utils/setFloatingElemPosition");
|
|
21
|
+
function FloatingLinkEditor(_ref) {
|
|
22
|
+
var editor = _ref.editor,
|
|
23
|
+
anchorElem = _ref.anchorElem;
|
|
24
|
+
var editorRef = (0, _react.useRef)(null);
|
|
25
|
+
var inputRef = (0, _react.useRef)(null);
|
|
26
|
+
var _useState = (0, _react.useState)(""),
|
|
27
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
28
|
+
linkUrl = _useState2[0],
|
|
29
|
+
setLinkUrl = _useState2[1];
|
|
30
|
+
var _useState3 = (0, _react.useState)(false),
|
|
31
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
32
|
+
isEditMode = _useState4[0],
|
|
33
|
+
setEditMode = _useState4[1];
|
|
34
|
+
var _useState5 = (0, _react.useState)(null),
|
|
35
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
36
|
+
lastSelection = _useState6[0],
|
|
37
|
+
setLastSelection = _useState6[1];
|
|
38
|
+
var updateLinkEditor = (0, _react.useCallback)(function () {
|
|
39
|
+
var selection = (0, _lexical.$getSelection)();
|
|
40
|
+
if ((0, _lexical.$isRangeSelection)(selection)) {
|
|
41
|
+
var node = (0, _getSelectedNode.getSelectedNode)(selection);
|
|
42
|
+
var parent = node.getParent();
|
|
43
|
+
if ((0, _link.$isLinkNode)(parent)) {
|
|
44
|
+
setLinkUrl(parent.getURL());
|
|
45
|
+
} else if ((0, _link.$isLinkNode)(node)) {
|
|
46
|
+
setLinkUrl(node.getURL());
|
|
47
|
+
} else {
|
|
48
|
+
setLinkUrl("");
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
var editorElem = editorRef.current;
|
|
52
|
+
var nativeSelection = window.getSelection();
|
|
53
|
+
var activeElement = document.activeElement;
|
|
54
|
+
if (editorElem === null) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
var rootElement = editor.getRootElement();
|
|
58
|
+
if (selection !== null && nativeSelection !== null && rootElement !== null && rootElement.contains(nativeSelection.anchorNode)) {
|
|
59
|
+
var domRange = nativeSelection.getRangeAt(0);
|
|
60
|
+
var rect;
|
|
61
|
+
if (nativeSelection.anchorNode === rootElement) {
|
|
62
|
+
var inner = rootElement;
|
|
63
|
+
while (inner.firstElementChild != null) {
|
|
64
|
+
inner = inner.firstElementChild;
|
|
65
|
+
}
|
|
66
|
+
rect = inner.getBoundingClientRect();
|
|
67
|
+
} else {
|
|
68
|
+
rect = domRange.getBoundingClientRect();
|
|
69
|
+
}
|
|
70
|
+
(0, _setFloatingElemPosition.setFloatingElemPosition)(rect, editorElem, anchorElem);
|
|
71
|
+
setLastSelection(selection);
|
|
72
|
+
} else if (!activeElement || activeElement.className !== "link-input") {
|
|
73
|
+
if (rootElement !== null) {
|
|
74
|
+
(0, _setFloatingElemPosition.setFloatingElemPosition)(null, editorElem, anchorElem);
|
|
75
|
+
}
|
|
76
|
+
setLastSelection(null);
|
|
77
|
+
setEditMode(false);
|
|
78
|
+
setLinkUrl("");
|
|
79
|
+
}
|
|
80
|
+
return true;
|
|
81
|
+
}, [anchorElem, editor]);
|
|
82
|
+
var removeLink = function removeLink() {
|
|
83
|
+
editor.dispatchCommand(_link.TOGGLE_LINK_COMMAND, null);
|
|
84
|
+
setEditMode(false);
|
|
85
|
+
};
|
|
86
|
+
(0, _react.useEffect)(function () {
|
|
87
|
+
var scrollerElem = anchorElem.parentElement;
|
|
88
|
+
var update = function update() {
|
|
89
|
+
editor.getEditorState().read(function () {
|
|
90
|
+
updateLinkEditor();
|
|
91
|
+
});
|
|
92
|
+
};
|
|
93
|
+
window.addEventListener("resize", update);
|
|
94
|
+
if (scrollerElem) {
|
|
95
|
+
scrollerElem.addEventListener("scroll", update);
|
|
96
|
+
}
|
|
97
|
+
return function () {
|
|
98
|
+
window.removeEventListener("resize", update);
|
|
99
|
+
if (scrollerElem) {
|
|
100
|
+
scrollerElem.removeEventListener("scroll", update);
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
}, [anchorElem.parentElement, editor, updateLinkEditor]);
|
|
104
|
+
(0, _react.useEffect)(function () {
|
|
105
|
+
return (0, _utils.mergeRegister)(editor.registerUpdateListener(function (_ref2) {
|
|
106
|
+
var editorState = _ref2.editorState;
|
|
107
|
+
editorState.read(function () {
|
|
108
|
+
updateLinkEditor();
|
|
109
|
+
});
|
|
110
|
+
}), editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function () {
|
|
111
|
+
updateLinkEditor();
|
|
112
|
+
return true;
|
|
113
|
+
}, _lexical.COMMAND_PRIORITY_LOW));
|
|
114
|
+
}, [editor, updateLinkEditor]);
|
|
115
|
+
(0, _react.useEffect)(function () {
|
|
116
|
+
editor.getEditorState().read(function () {
|
|
117
|
+
updateLinkEditor();
|
|
118
|
+
});
|
|
119
|
+
}, [editor, updateLinkEditor]);
|
|
120
|
+
(0, _react.useEffect)(function () {
|
|
121
|
+
if (isEditMode && inputRef.current) {
|
|
122
|
+
inputRef.current.focus();
|
|
123
|
+
}
|
|
124
|
+
}, [isEditMode]);
|
|
125
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
126
|
+
ref: editorRef,
|
|
127
|
+
className: "link-editor"
|
|
128
|
+
}, isEditMode ? /*#__PURE__*/_react.default.createElement("input", {
|
|
129
|
+
ref: inputRef,
|
|
130
|
+
className: "link-input",
|
|
131
|
+
value: linkUrl,
|
|
132
|
+
onChange: function onChange(event) {
|
|
133
|
+
setLinkUrl(event.target.value);
|
|
134
|
+
},
|
|
135
|
+
onKeyDown: function onKeyDown(event) {
|
|
136
|
+
if (event.key === "Enter") {
|
|
137
|
+
event.preventDefault();
|
|
138
|
+
if (lastSelection !== null) {
|
|
139
|
+
if (linkUrl !== "") {
|
|
140
|
+
editor.dispatchCommand(_link.TOGGLE_LINK_COMMAND, (0, _sanitizeUrl.sanitizeUrl)(linkUrl));
|
|
141
|
+
}
|
|
142
|
+
setEditMode(false);
|
|
143
|
+
}
|
|
144
|
+
} else if (event.key === "Escape") {
|
|
145
|
+
event.preventDefault();
|
|
146
|
+
setEditMode(false);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
}) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
150
|
+
className: "link-input"
|
|
151
|
+
}, /*#__PURE__*/_react.default.createElement("a", {
|
|
152
|
+
href: linkUrl,
|
|
153
|
+
target: "_blank",
|
|
154
|
+
rel: "noopener noreferrer"
|
|
155
|
+
}, linkUrl), /*#__PURE__*/_react.default.createElement("div", {
|
|
156
|
+
className: "link-edit",
|
|
157
|
+
role: "button",
|
|
158
|
+
tabIndex: 0,
|
|
159
|
+
onMouseDown: function onMouseDown(event) {
|
|
160
|
+
return event.preventDefault();
|
|
161
|
+
},
|
|
162
|
+
onClick: function onClick() {
|
|
163
|
+
setEditMode(true);
|
|
164
|
+
}
|
|
165
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
166
|
+
className: "link-unlink",
|
|
167
|
+
role: "button",
|
|
168
|
+
tabIndex: 0,
|
|
169
|
+
onMouseDown: function onMouseDown(event) {
|
|
170
|
+
return event.preventDefault();
|
|
171
|
+
},
|
|
172
|
+
onClick: function onClick() {
|
|
173
|
+
removeLink();
|
|
174
|
+
}
|
|
175
|
+
})), /*#__PURE__*/_react.default.createElement(_LinkPreview.LinkPreview, {
|
|
176
|
+
url: linkUrl
|
|
177
|
+
})));
|
|
178
|
+
}
|
|
179
|
+
function useFloatingLinkEditorToolbar(editor, anchorElem) {
|
|
180
|
+
var _useState7 = (0, _react.useState)(editor),
|
|
181
|
+
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
182
|
+
activeEditor = _useState8[0],
|
|
183
|
+
setActiveEditor = _useState8[1];
|
|
184
|
+
var _useState9 = (0, _react.useState)(false),
|
|
185
|
+
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
186
|
+
isLink = _useState10[0],
|
|
187
|
+
setIsLink = _useState10[1];
|
|
188
|
+
var updateToolbar = (0, _react.useCallback)(function () {
|
|
189
|
+
var selection = (0, _lexical.$getSelection)();
|
|
190
|
+
if ((0, _lexical.$isRangeSelection)(selection)) {
|
|
191
|
+
var node = (0, _getSelectedNode.getSelectedNode)(selection);
|
|
192
|
+
var linkParent = (0, _utils.$findMatchingParent)(node, _link.$isLinkNode);
|
|
193
|
+
var autoLinkParent = (0, _utils.$findMatchingParent)(node, _link.$isAutoLinkNode);
|
|
194
|
+
|
|
195
|
+
// We don't want this menu to open for auto links.
|
|
196
|
+
if (linkParent != null && autoLinkParent == null) {
|
|
197
|
+
setIsLink(true);
|
|
198
|
+
} else {
|
|
199
|
+
setIsLink(false);
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}, []);
|
|
203
|
+
(0, _react.useEffect)(function () {
|
|
204
|
+
return editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function (_payload, newEditor) {
|
|
205
|
+
updateToolbar();
|
|
206
|
+
setActiveEditor(newEditor);
|
|
207
|
+
return false;
|
|
208
|
+
}, _lexical.COMMAND_PRIORITY_CRITICAL);
|
|
209
|
+
}, [editor, updateToolbar]);
|
|
210
|
+
return isLink ? /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(FloatingLinkEditor, {
|
|
211
|
+
editor: activeEditor,
|
|
212
|
+
anchorElem: anchorElem
|
|
213
|
+
}), anchorElem) : null;
|
|
214
|
+
}
|
|
215
|
+
function FloatingLinkEditorPlugin(_ref3) {
|
|
216
|
+
var _ref3$anchorElem = _ref3.anchorElem,
|
|
217
|
+
anchorElem = _ref3$anchorElem === void 0 ? document.body : _ref3$anchorElem;
|
|
218
|
+
var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
|
|
219
|
+
_useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
|
|
220
|
+
editor = _useLexicalComposerCo2[0];
|
|
221
|
+
return useFloatingLinkEditorToolbar(editor, anchorElem);
|
|
222
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["FloatingLinkEditor","editor","anchorElem","editorRef","useRef","inputRef","useState","linkUrl","setLinkUrl","isEditMode","setEditMode","lastSelection","setLastSelection","updateLinkEditor","useCallback","selection","$getSelection","$isRangeSelection","node","getSelectedNode","parent","getParent","$isLinkNode","getURL","editorElem","current","nativeSelection","window","getSelection","activeElement","document","rootElement","getRootElement","contains","anchorNode","domRange","getRangeAt","rect","inner","firstElementChild","getBoundingClientRect","setFloatingElemPosition","className","removeLink","dispatchCommand","TOGGLE_LINK_COMMAND","useEffect","scrollerElem","parentElement","update","getEditorState","read","addEventListener","removeEventListener","mergeRegister","registerUpdateListener","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","focus","event","target","value","key","preventDefault","sanitizeUrl","useFloatingLinkEditorToolbar","activeEditor","setActiveEditor","isLink","setIsLink","updateToolbar","linkParent","$findMatchingParent","autoLinkParent","$isAutoLinkNode","_payload","newEditor","COMMAND_PRIORITY_CRITICAL","createPortal","FloatingLinkEditorPlugin","body","useLexicalComposerContext"],"sources":["FloatingLinkEditorPlugin.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport \"./FloatingLinkEditorPlugin.css\";\nimport { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from \"@lexical/link\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $findMatchingParent, mergeRegister } from \"@lexical/utils\";\nimport {\n $getSelection,\n $isRangeSelection,\n COMMAND_PRIORITY_CRITICAL,\n COMMAND_PRIORITY_LOW,\n GridSelection,\n LexicalEditor,\n NodeSelection,\n RangeSelection,\n SELECTION_CHANGE_COMMAND\n} from \"lexical\";\n\nimport { createPortal } from \"react-dom\";\nimport { LinkPreview } from \"../../ui/LinkPreview\";\nimport { getSelectedNode } from \"../../utils/getSelectedNode\";\nimport { sanitizeUrl } from \"../../utils/sanitizeUrl\";\nimport { setFloatingElemPosition } from \"../../utils/setFloatingElemPosition\";\n\nfunction FloatingLinkEditor({\n editor,\n anchorElem\n}: {\n editor: LexicalEditor;\n anchorElem: HTMLElement;\n}): JSX.Element {\n const editorRef = useRef<HTMLDivElement | null>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const [linkUrl, setLinkUrl] = useState(\"\");\n const [isEditMode, setEditMode] = useState(false);\n const [lastSelection, setLastSelection] = useState<\n RangeSelection | GridSelection | NodeSelection | null\n >(null);\n\n const updateLinkEditor = useCallback(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n const node = getSelectedNode(selection);\n const parent = node.getParent();\n if ($isLinkNode(parent)) {\n setLinkUrl(parent.getURL());\n } else if ($isLinkNode(node)) {\n setLinkUrl(node.getURL());\n } else {\n setLinkUrl(\"\");\n }\n }\n const editorElem = editorRef.current;\n const nativeSelection = window.getSelection();\n const activeElement = document.activeElement;\n\n if (editorElem === null) {\n return;\n }\n\n const rootElement = editor.getRootElement();\n\n if (\n selection !== null &&\n nativeSelection !== null &&\n rootElement !== null &&\n rootElement.contains(nativeSelection.anchorNode)\n ) {\n const domRange = nativeSelection.getRangeAt(0);\n let rect;\n if (nativeSelection.anchorNode === rootElement) {\n let inner = rootElement;\n while (inner.firstElementChild != null) {\n inner = inner.firstElementChild as HTMLElement;\n }\n rect = inner.getBoundingClientRect();\n } else {\n rect = domRange.getBoundingClientRect();\n }\n\n setFloatingElemPosition(rect, editorElem, anchorElem);\n setLastSelection(selection);\n } else if (!activeElement || activeElement.className !== \"link-input\") {\n if (rootElement !== null) {\n setFloatingElemPosition(null, editorElem, anchorElem);\n }\n setLastSelection(null);\n setEditMode(false);\n setLinkUrl(\"\");\n }\n\n return true;\n }, [anchorElem, editor]);\n\n const removeLink = () => {\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n setEditMode(false);\n };\n\n useEffect(() => {\n const scrollerElem = anchorElem.parentElement;\n\n const update = () => {\n editor.getEditorState().read(() => {\n updateLinkEditor();\n });\n };\n\n window.addEventListener(\"resize\", update);\n\n if (scrollerElem) {\n scrollerElem.addEventListener(\"scroll\", update);\n }\n\n return () => {\n window.removeEventListener(\"resize\", update);\n\n if (scrollerElem) {\n scrollerElem.removeEventListener(\"scroll\", update);\n }\n };\n }, [anchorElem.parentElement, editor, updateLinkEditor]);\n\n useEffect(() => {\n return mergeRegister(\n editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n updateLinkEditor();\n });\n }),\n\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n updateLinkEditor();\n return true;\n },\n COMMAND_PRIORITY_LOW\n )\n );\n }, [editor, updateLinkEditor]);\n\n useEffect(() => {\n editor.getEditorState().read(() => {\n updateLinkEditor();\n });\n }, [editor, updateLinkEditor]);\n\n useEffect(() => {\n if (isEditMode && inputRef.current) {\n inputRef.current.focus();\n }\n }, [isEditMode]);\n\n return (\n <div ref={editorRef} className=\"link-editor\">\n {isEditMode ? (\n <input\n ref={inputRef}\n className=\"link-input\"\n value={linkUrl}\n onChange={event => {\n setLinkUrl(event.target.value);\n }}\n onKeyDown={event => {\n if (event.key === \"Enter\") {\n event.preventDefault();\n if (lastSelection !== null) {\n if (linkUrl !== \"\") {\n editor.dispatchCommand(\n TOGGLE_LINK_COMMAND,\n sanitizeUrl(linkUrl)\n );\n }\n setEditMode(false);\n }\n } else if (event.key === \"Escape\") {\n event.preventDefault();\n setEditMode(false);\n }\n }}\n />\n ) : (\n <>\n <div className=\"link-input\">\n <a href={linkUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n {linkUrl}\n </a>\n <div\n className=\"link-edit\"\n role=\"button\"\n tabIndex={0}\n onMouseDown={event => event.preventDefault()}\n onClick={() => {\n setEditMode(true);\n }}\n />\n <div\n className=\"link-unlink\"\n role=\"button\"\n tabIndex={0}\n onMouseDown={event => event.preventDefault()}\n onClick={() => {\n removeLink();\n }}\n />\n </div>\n <LinkPreview url={linkUrl} />\n </>\n )}\n </div>\n );\n}\n\nfunction useFloatingLinkEditorToolbar(\n editor: LexicalEditor,\n anchorElem: HTMLElement\n): JSX.Element | null {\n const [activeEditor, setActiveEditor] = useState(editor);\n const [isLink, setIsLink] = useState(false);\n\n const updateToolbar = useCallback(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n const node = getSelectedNode(selection);\n const linkParent = $findMatchingParent(node, $isLinkNode);\n const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode);\n\n // We don't want this menu to open for auto links.\n if (linkParent != null && autoLinkParent == null) {\n setIsLink(true);\n } else {\n setIsLink(false);\n }\n }\n }, []);\n\n useEffect(() => {\n return editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n (_payload, newEditor) => {\n updateToolbar();\n setActiveEditor(newEditor);\n return false;\n },\n COMMAND_PRIORITY_CRITICAL\n );\n }, [editor, updateToolbar]);\n\n return isLink\n ? createPortal(\n <FloatingLinkEditor editor={activeEditor} anchorElem={anchorElem} />,\n anchorElem\n )\n : null;\n}\n\nexport function FloatingLinkEditorPlugin({\n anchorElem = document.body\n}: {\n anchorElem?: HTMLElement;\n}): JSX.Element | null {\n const [editor] = useLexicalComposerContext();\n return useFloatingLinkEditorToolbar(editor, anchorElem);\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./FloatingLinkEditorPlugin";
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _FloatingLinkEditorPlugin = require("./FloatingLinkEditorPlugin");
|
|
7
|
+
Object.keys(_FloatingLinkEditorPlugin).forEach(function (key) {
|
|
8
|
+
if (key === "default" || key === "__esModule") return;
|
|
9
|
+
if (key in exports && exports[key] === _FloatingLinkEditorPlugin[key]) return;
|
|
10
|
+
Object.defineProperty(exports, key, {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function get() {
|
|
13
|
+
return _FloatingLinkEditorPlugin[key];
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./FloatingLinkEditorPlugin\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.FontColorPlugin = void 0;
|
|
8
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
|
+
var _react = require("react");
|
|
10
|
+
var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
|
|
11
|
+
var _FontColorNode = require("../../nodes/FontColorNode");
|
|
12
|
+
var _lexical = require("lexical");
|
|
13
|
+
var _utils = require("@lexical/utils");
|
|
14
|
+
var _ParagraphNode = require("../../nodes/ParagraphNode");
|
|
15
|
+
var FontColorPlugin = function FontColorPlugin() {
|
|
16
|
+
var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
|
|
17
|
+
_useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
|
|
18
|
+
editor = _useLexicalComposerCo2[0];
|
|
19
|
+
(0, _react.useEffect)(function () {
|
|
20
|
+
return editor.registerCommand(_FontColorNode.ADD_FONT_COLOR_COMMAND, function (payload) {
|
|
21
|
+
editor.update(function () {
|
|
22
|
+
var color = payload.color,
|
|
23
|
+
themeColorName = payload.themeColorName;
|
|
24
|
+
var selection = (0, _lexical.$getSelection)();
|
|
25
|
+
if ((0, _lexical.$isRangeSelection)(selection)) {
|
|
26
|
+
var fontColorNode = (0, _FontColorNode.$createFontColorNode)(selection.getTextContent(), color, themeColorName);
|
|
27
|
+
(0, _FontColorNode.$applyStylesToNode)(fontColorNode, selection);
|
|
28
|
+
(0, _lexical.$insertNodes)([fontColorNode]);
|
|
29
|
+
if ((0, _lexical.$isRootOrShadowRoot)(fontColorNode.getParentOrThrow())) {
|
|
30
|
+
(0, _utils.$wrapNodeInElement)(fontColorNode, _ParagraphNode.$createParagraphNode).selectEnd();
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
return true;
|
|
35
|
+
}, _lexical.COMMAND_PRIORITY_EDITOR);
|
|
36
|
+
}, [editor]);
|
|
37
|
+
return null;
|
|
38
|
+
};
|
|
39
|
+
exports.FontColorPlugin = FontColorPlugin;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["FontColorPlugin","useLexicalComposerContext","editor","useEffect","registerCommand","ADD_FONT_COLOR_COMMAND","payload","update","color","themeColorName","selection","$getSelection","$isRangeSelection","fontColorNode","$createFontColorNode","getTextContent","$applyStylesToNode","$insertNodes","$isRootOrShadowRoot","getParentOrThrow","$wrapNodeInElement","$createParagraphNode","selectEnd","COMMAND_PRIORITY_EDITOR"],"sources":["FontColorPlugin.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n $applyStylesToNode,\n $createFontColorNode,\n ADD_FONT_COLOR_COMMAND,\n FontColorPayload\n} from \"~/nodes/FontColorNode\";\nimport {\n $getSelection,\n $insertNodes,\n $isRangeSelection,\n $isRootOrShadowRoot,\n COMMAND_PRIORITY_EDITOR\n} from \"lexical\";\nimport { $wrapNodeInElement } from \"@lexical/utils\";\nimport { $createParagraphNode } from \"~/nodes/ParagraphNode\";\n\nexport const FontColorPlugin: React.FC = () => {\n const [editor] = useLexicalComposerContext();\n\n useEffect(() => {\n return editor.registerCommand<FontColorPayload>(\n ADD_FONT_COLOR_COMMAND,\n payload => {\n editor.update(() => {\n const { color, themeColorName } = payload;\n const selection = $getSelection();\n\n if ($isRangeSelection(selection)) {\n const fontColorNode = $createFontColorNode(\n selection.getTextContent(),\n color,\n themeColorName\n );\n $applyStylesToNode(fontColorNode, selection);\n $insertNodes([fontColorNode]);\n if ($isRootOrShadowRoot(fontColorNode.getParentOrThrow())) {\n $wrapNodeInElement(fontColorNode, $createParagraphNode).selectEnd();\n }\n }\n });\n return true;\n },\n COMMAND_PRIORITY_EDITOR\n );\n }, [editor]);\n\n return null;\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAMA;AAOA;AACA;AAEO,IAAMA,eAAyB,GAAG,SAA5BA,eAAyB,GAAS;EAC3C,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EAEb,IAAAC,gBAAS,EAAC,YAAM;IACZ,OAAOD,MAAM,CAACE,eAAe,CACzBC,qCAAsB,EACtB,UAAAC,OAAO,EAAI;MACPJ,MAAM,CAACK,MAAM,CAAC,YAAM;QAChB,IAAQC,KAAK,GAAqBF,OAAO,CAAjCE,KAAK;UAAEC,cAAc,GAAKH,OAAO,CAA1BG,cAAc;QAC7B,IAAMC,SAAS,GAAG,IAAAC,sBAAa,GAAE;QAEjC,IAAI,IAAAC,0BAAiB,EAACF,SAAS,CAAC,EAAE;UAC9B,IAAMG,aAAa,GAAG,IAAAC,mCAAoB,EACtCJ,SAAS,CAACK,cAAc,EAAE,EAC1BP,KAAK,EACLC,cAAc,CACjB;UACD,IAAAO,iCAAkB,EAACH,aAAa,EAAEH,SAAS,CAAC;UAC5C,IAAAO,qBAAY,EAAC,CAACJ,aAAa,CAAC,CAAC;UAC7B,IAAI,IAAAK,4BAAmB,EAACL,aAAa,CAACM,gBAAgB,EAAE,CAAC,EAAE;YACvD,IAAAC,yBAAkB,EAACP,aAAa,EAAEQ,mCAAoB,CAAC,CAACC,SAAS,EAAE;UACvE;QACJ;MACJ,CAAC,CAAC;MACF,OAAO,IAAI;IACf,CAAC,EACDC,gCAAuB,CAC1B;EACL,CAAC,EAAE,CAACrB,MAAM,CAAC,CAAC;EAEZ,OAAO,IAAI;AACf,CAAC;AAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
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.LexicalUpdateStatePlugin = void 0;
|
|
9
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
+
var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
|
|
11
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _isValidLexicalData = require("../../utils/isValidLexicalData");
|
|
13
|
+
var _generateInitialLexicalValue = require("../../utils/generateInitialLexicalValue");
|
|
14
|
+
/*
|
|
15
|
+
* Updates the lexical state if new value is provided to the lexical editor trough props
|
|
16
|
+
*/
|
|
17
|
+
var LexicalUpdateStatePlugin = function LexicalUpdateStatePlugin(_ref) {
|
|
18
|
+
var value = _ref.value;
|
|
19
|
+
var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
|
|
20
|
+
_useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
|
|
21
|
+
editor = _useLexicalComposerCo2[0];
|
|
22
|
+
(0, _react.useEffect)(function () {
|
|
23
|
+
if (value && editor) {
|
|
24
|
+
var editorState = editor.getEditorState();
|
|
25
|
+
if (JSON.stringify(editorState.toJSON()) === value) {
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
var initialEditorState = editor.parseEditorState((0, _isValidLexicalData.isValidLexicalData)(value) ? value : (0, _generateInitialLexicalValue.generateInitialLexicalValue)());
|
|
29
|
+
editor.setEditorState(initialEditorState);
|
|
30
|
+
}
|
|
31
|
+
}, [value, editor]);
|
|
32
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
|
|
33
|
+
};
|
|
34
|
+
exports.LexicalUpdateStatePlugin = LexicalUpdateStatePlugin;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["LexicalUpdateStatePlugin","value","useLexicalComposerContext","editor","useEffect","editorState","getEditorState","JSON","stringify","toJSON","initialEditorState","parseEditorState","isValidLexicalData","generateInitialLexicalValue","setEditorState"],"sources":["LexicalUpdateStatePlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport React, { FC, useEffect } from \"react\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { LexicalValue } from \"~/types\";\n\ninterface LexicalUpdateStatePlugin {\n value: LexicalValue | null;\n readOnly?: boolean;\n}\n\n/*\n * Updates the lexical state if new value is provided to the lexical editor trough props\n */\nexport const LexicalUpdateStatePlugin: FC<LexicalUpdateStatePlugin> = ({\n value\n}): React.ReactElement => {\n const [editor] = useLexicalComposerContext();\n useEffect(() => {\n if (value && editor) {\n const editorState = editor.getEditorState();\n if (JSON.stringify(editorState.toJSON()) === value) {\n return;\n }\n\n const initialEditorState = editor.parseEditorState(\n isValidLexicalData(value)\n ? (value as string)\n : (generateInitialLexicalValue() as string)\n );\n editor.setEditorState(initialEditorState);\n }\n }, [value, editor]);\n\n return <></>;\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AAQA;AACA;AACA;AACO,IAAMA,wBAAsD,GAAG,SAAzDA,wBAAsD,OAEzC;EAAA,IADtBC,KAAK,QAALA,KAAK;EAEL,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,IAAAC,gBAAS,EAAC,YAAM;IACZ,IAAIH,KAAK,IAAIE,MAAM,EAAE;MACjB,IAAME,WAAW,GAAGF,MAAM,CAACG,cAAc,EAAE;MAC3C,IAAIC,IAAI,CAACC,SAAS,CAACH,WAAW,CAACI,MAAM,EAAE,CAAC,KAAKR,KAAK,EAAE;QAChD;MACJ;MAEA,IAAMS,kBAAkB,GAAGP,MAAM,CAACQ,gBAAgB,CAC9C,IAAAC,sCAAkB,EAACX,KAAK,CAAC,GAClBA,KAAK,GACL,IAAAY,wDAA2B,GAAa,CAClD;MACDV,MAAM,CAACW,cAAc,CAACJ,kBAAkB,CAAC;IAC7C;EACJ,CAAC,EAAE,CAACT,KAAK,EAAEE,MAAM,CAAC,CAAC;EAEnB,oBAAO,2DAAK;AAChB,CAAC;AAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./LexicalUpdateStatePlugin";
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _LexicalUpdateStatePlugin = require("./LexicalUpdateStatePlugin");
|
|
7
|
+
Object.keys(_LexicalUpdateStatePlugin).forEach(function (key) {
|
|
8
|
+
if (key === "default" || key === "__esModule") return;
|
|
9
|
+
if (key in exports && exports[key] === _LexicalUpdateStatePlugin[key]) return;
|
|
10
|
+
Object.defineProperty(exports, key, {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function get() {
|
|
13
|
+
return _LexicalUpdateStatePlugin[key];
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./LexicalUpdateStatePlugin\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.TypographyPlugin = void 0;
|
|
8
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
|
+
var _react = require("react");
|
|
10
|
+
var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
|
|
11
|
+
var _lexical = require("lexical");
|
|
12
|
+
var _TypographyElementNode = require("../../nodes/TypographyElementNode");
|
|
13
|
+
var _formatToParagraph = require("../../utils/nodes/formatToParagraph");
|
|
14
|
+
var _formatToHeading = require("../../utils/nodes/formatToHeading");
|
|
15
|
+
var TypographyPlugin = function TypographyPlugin() {
|
|
16
|
+
var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
|
|
17
|
+
_useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
|
|
18
|
+
editor = _useLexicalComposerCo2[0];
|
|
19
|
+
(0, _react.useEffect)(function () {
|
|
20
|
+
return editor.registerCommand(_TypographyElementNode.ADD_TYPOGRAPHY_ELEMENT_COMMAND, function (payload) {
|
|
21
|
+
var selection = (0, _lexical.$getSelection)();
|
|
22
|
+
// paragraph
|
|
23
|
+
if ((0, _lexical.$isRangeSelection)(selection) && payload.value.id && payload.value.tag === "p") {
|
|
24
|
+
(0, _formatToParagraph.formatToParagraph)(editor, payload.value.id);
|
|
25
|
+
}
|
|
26
|
+
// heading
|
|
27
|
+
if ((0, _lexical.$isRangeSelection)(selection) && payload.value.id && payload.value.tag.includes("h")) {
|
|
28
|
+
(0, _formatToHeading.formatToHeading)(editor, payload.value.tag, payload.value.id);
|
|
29
|
+
}
|
|
30
|
+
return true;
|
|
31
|
+
}, _lexical.COMMAND_PRIORITY_EDITOR);
|
|
32
|
+
}, [editor]);
|
|
33
|
+
return null;
|
|
34
|
+
};
|
|
35
|
+
exports.TypographyPlugin = TypographyPlugin;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["TypographyPlugin","useLexicalComposerContext","editor","useEffect","registerCommand","ADD_TYPOGRAPHY_ELEMENT_COMMAND","payload","selection","$getSelection","$isRangeSelection","value","id","tag","formatToParagraph","includes","formatToHeading","COMMAND_PRIORITY_EDITOR"],"sources":["TypographyPlugin.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from \"lexical\";\nimport { ADD_TYPOGRAPHY_ELEMENT_COMMAND, TypographyPayload } from \"~/nodes/TypographyElementNode\";\nimport { formatToParagraph } from \"~/utils/nodes/formatToParagraph\";\nimport { formatToHeading } from \"~/utils/nodes/formatToHeading\";\nimport { HeadingTagType } from \"@lexical/rich-text\";\n\nexport const TypographyPlugin: React.FC = () => {\n const [editor] = useLexicalComposerContext();\n\n useEffect(() => {\n return editor.registerCommand<TypographyPayload>(\n ADD_TYPOGRAPHY_ELEMENT_COMMAND,\n payload => {\n const selection = $getSelection();\n // paragraph\n if ($isRangeSelection(selection) && payload.value.id && payload.value.tag === \"p\") {\n formatToParagraph(editor, payload.value.id);\n }\n // heading\n if (\n $isRangeSelection(selection) &&\n payload.value.id &&\n payload.value.tag.includes(\"h\")\n ) {\n formatToHeading(editor, payload.value.tag as HeadingTagType, payload.value.id);\n }\n return true;\n },\n COMMAND_PRIORITY_EDITOR\n );\n }, [editor]);\n\n return null;\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAGO,IAAMA,gBAA0B,GAAG,SAA7BA,gBAA0B,GAAS;EAC5C,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EAEb,IAAAC,gBAAS,EAAC,YAAM;IACZ,OAAOD,MAAM,CAACE,eAAe,CACzBC,qDAA8B,EAC9B,UAAAC,OAAO,EAAI;MACP,IAAMC,SAAS,GAAG,IAAAC,sBAAa,GAAE;MACjC;MACA,IAAI,IAAAC,0BAAiB,EAACF,SAAS,CAAC,IAAID,OAAO,CAACI,KAAK,CAACC,EAAE,IAAIL,OAAO,CAACI,KAAK,CAACE,GAAG,KAAK,GAAG,EAAE;QAC/E,IAAAC,oCAAiB,EAACX,MAAM,EAAEI,OAAO,CAACI,KAAK,CAACC,EAAE,CAAC;MAC/C;MACA;MACA,IACI,IAAAF,0BAAiB,EAACF,SAAS,CAAC,IAC5BD,OAAO,CAACI,KAAK,CAACC,EAAE,IAChBL,OAAO,CAACI,KAAK,CAACE,GAAG,CAACE,QAAQ,CAAC,GAAG,CAAC,EACjC;QACE,IAAAC,gCAAe,EAACb,MAAM,EAAEI,OAAO,CAACI,KAAK,CAACE,GAAG,EAAoBN,OAAO,CAACI,KAAK,CAACC,EAAE,CAAC;MAClF;MACA,OAAO,IAAI;IACf,CAAC,EACDK,gCAAuB,CAC1B;EACL,CAAC,EAAE,CAACd,MAAM,CAAC,CAAC;EAEZ,OAAO,IAAI;AACf,CAAC;AAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function WebinyListPlugin(): null;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.WebinyListPlugin = WebinyListPlugin;
|
|
8
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
|
+
var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
|
|
10
|
+
var _react = require("react");
|
|
11
|
+
var _ListNode = require("../../nodes/ListNode");
|
|
12
|
+
var _ListItemNode = require("../../nodes/ListItemNode");
|
|
13
|
+
var _useList = require("../../hooks/useList");
|
|
14
|
+
function WebinyListPlugin() {
|
|
15
|
+
var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
|
|
16
|
+
_useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
|
|
17
|
+
editor = _useLexicalComposerCo2[0];
|
|
18
|
+
(0, _react.useEffect)(function () {
|
|
19
|
+
if (!editor.hasNodes([_ListNode.ListNode, _ListItemNode.ListItemNode])) {
|
|
20
|
+
throw new Error("WebinyListPlugin: WebinyListNode and/or WebinyListItemNode not registered on editor");
|
|
21
|
+
}
|
|
22
|
+
}, [editor]);
|
|
23
|
+
(0, _useList.useList)(editor);
|
|
24
|
+
return null;
|
|
25
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["WebinyListPlugin","useLexicalComposerContext","editor","useEffect","hasNodes","ListNode","ListItemNode","Error","useList"],"sources":["WebinyListPlugin.ts"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { useEffect } from \"react\";\nimport { ListNode } from \"~/nodes/ListNode\";\nimport { ListItemNode } from \"~/nodes/ListItemNode\";\nimport { useList } from \"~/hooks/useList\";\n\nexport function WebinyListPlugin(): null {\n const [editor] = useLexicalComposerContext();\n\n useEffect(() => {\n if (!editor.hasNodes([ListNode, ListItemNode])) {\n throw new Error(\n \"WebinyListPlugin: WebinyListNode and/or WebinyListItemNode not registered on editor\"\n );\n }\n }, [editor]);\n\n useList(editor);\n\n return null;\n}\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEO,SAASA,gBAAgB,GAAS;EACrC,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EAEb,IAAAC,gBAAS,EAAC,YAAM;IACZ,IAAI,CAACD,MAAM,CAACE,QAAQ,CAAC,CAACC,kBAAQ,EAAEC,0BAAY,CAAC,CAAC,EAAE;MAC5C,MAAM,IAAIC,KAAK,CACX,qFAAqF,CACxF;IACL;EACJ,CAAC,EAAE,CAACL,MAAM,CAAC,CAAC;EAEZ,IAAAM,gBAAO,EAACN,MAAM,CAAC;EAEf,OAAO,IAAI;AACf"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function QuotePlugin(): null;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.QuotePlugin = QuotePlugin;
|
|
8
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
|
+
var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
|
|
10
|
+
var _react = require("react");
|
|
11
|
+
var _QuoteNode = require("../../nodes/QuoteNode");
|
|
12
|
+
var _useQuote = require("../../hooks/useQuote");
|
|
13
|
+
function QuotePlugin() {
|
|
14
|
+
var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
|
|
15
|
+
_useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
|
|
16
|
+
editor = _useLexicalComposerCo2[0];
|
|
17
|
+
(0, _react.useEffect)(function () {
|
|
18
|
+
if (!editor.hasNodes([_QuoteNode.QuoteNode])) {
|
|
19
|
+
throw new Error("QuoteNodePlugin: QuoteNode is e not registered on editor");
|
|
20
|
+
}
|
|
21
|
+
}, [editor]);
|
|
22
|
+
(0, _useQuote.useQuote)(editor);
|
|
23
|
+
return null;
|
|
24
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["QuotePlugin","useLexicalComposerContext","editor","useEffect","hasNodes","QuoteNode","Error","useQuote"],"sources":["WebinyQuoteNodePlugin.ts"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { useEffect } from \"react\";\nimport { QuoteNode } from \"~/nodes/QuoteNode\";\nimport { useQuote } from \"~/hooks/useQuote\";\n\nexport function QuotePlugin(): null {\n const [editor] = useLexicalComposerContext();\n\n useEffect(() => {\n if (!editor.hasNodes([QuoteNode])) {\n throw new Error(\"QuoteNodePlugin: QuoteNode is e not registered on editor\");\n }\n }, [editor]);\n\n useQuote(editor);\n\n return null;\n}\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AAEO,SAASA,WAAW,GAAS;EAChC,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EAEb,IAAAC,gBAAS,EAAC,YAAM;IACZ,IAAI,CAACD,MAAM,CAACE,QAAQ,CAAC,CAACC,oBAAS,CAAC,CAAC,EAAE;MAC/B,MAAM,IAAIC,KAAK,CAAC,0DAA0D,CAAC;IAC/E;EACJ,CAAC,EAAE,CAACJ,MAAM,CAAC,CAAC;EAEZ,IAAAK,kBAAQ,EAACL,MAAM,CAAC;EAEhB,OAAO,IAAI;AACf"}
|