@blocklet/editor 2.5.51 → 2.5.53
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/lib/ext/CharacterCountPlugin/useCharacterCount.js +4 -1
- package/lib/main/editor.js +3 -15
- package/lib/main/index.js +1 -2
- package/lib/main/markdown-editor/editor.js +1 -3
- package/lib/main/markdown-editor/plugins/ToolbarPlugin.js +4 -1
- package/lib/main/markdown-to-lexical/index.js +4 -1
- package/lib/main/nodes/ImageComponent.js +4 -5
- package/lib/main/plugins/ComponentPickerPlugin/index.js +8 -9
- package/lib/main/plugins/FloatingLinkEditorPlugin/index.js +4 -1
- package/lib/main/plugins/FloatingTextFormatToolbarPlugin/index.js +4 -1
- package/lib/main/plugins/ToolbarPlugin/index.js +4 -1
- package/lib/main/viewer/viewer.js +2 -6
- package/package.json +2 -2
- package/lib/main/context/SettingsContext.d.ts +0 -18
- package/lib/main/context/SettingsContext.js +0 -46
- package/lib/main/plugins/ListMaxIndentLevelPlugin/index.d.ts +0 -12
- package/lib/main/plugins/ListMaxIndentLevelPlugin/index.js +0 -46
|
@@ -25,7 +25,10 @@ export default function useCharacterCount(editor, optional = Object.freeze({}))
|
|
|
25
25
|
let text = editor.getEditorState().read($rootTextContent);
|
|
26
26
|
return mergeRegister(editor.registerTextContentListener((currentText) => {
|
|
27
27
|
text = currentText;
|
|
28
|
-
}), editor.registerUpdateListener((
|
|
28
|
+
}), editor.registerUpdateListener((payload) => {
|
|
29
|
+
if (!payload)
|
|
30
|
+
return;
|
|
31
|
+
const { dirtyLeaves } = payload;
|
|
29
32
|
const isComposing = editor.isComposing();
|
|
30
33
|
const hasDirtyLeaves = dirtyLeaves.size > 0;
|
|
31
34
|
if (isComposing || !hasDirtyLeaves) {
|
package/lib/main/editor.js
CHANGED
|
@@ -16,12 +16,10 @@ import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
|
|
|
16
16
|
import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
|
|
17
17
|
import { ListPlugin } from '@lexical/react/LexicalListPlugin';
|
|
18
18
|
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
|
|
19
|
-
import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
|
|
20
19
|
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
|
|
21
20
|
import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
|
|
22
21
|
import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';
|
|
23
22
|
import { useEffect, useState } from 'react';
|
|
24
|
-
import { useSettings } from './context/SettingsContext';
|
|
25
23
|
import { useSharedHistoryContext } from './context/SharedHistoryContext';
|
|
26
24
|
import useHasNodes from './hooks/useHasNodes';
|
|
27
25
|
import AutoEmbedPlugin from './plugins/AutoEmbedPlugin';
|
|
@@ -38,14 +36,12 @@ import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
|
|
|
38
36
|
import FloatingTextFormatToolbarPlugin from './plugins/FloatingTextFormatToolbarPlugin';
|
|
39
37
|
import HorizontalRulePlugin from './plugins/HorizontalRulePlugin';
|
|
40
38
|
import ImagesPlugin from './plugins/ImagesPlugin';
|
|
41
|
-
import ListMaxIndentLevelPlugin from './plugins/ListMaxIndentLevelPlugin';
|
|
42
39
|
import MarkdownShortcutPlugin from './plugins/MarkdownShortcutPlugin';
|
|
43
40
|
import { CharacterLimitPlugin } from '../ext/CharacterLimitPlugin';
|
|
44
41
|
import MentionsPlugin from './plugins/MentionsPlugin';
|
|
45
42
|
import TabFocusPlugin from './plugins/TabFocusPlugin';
|
|
46
43
|
import TableCellActionMenuPlugin from './plugins/TableActionMenuPlugin';
|
|
47
44
|
import TableCellResizer from './plugins/TableCellResizer';
|
|
48
|
-
import TableOfContentsPlugin from './plugins/TableOfContentsPlugin';
|
|
49
45
|
import ToolbarPlugin from './plugins/ToolbarPlugin';
|
|
50
46
|
import TwitterPlugin from './plugins/TwitterPlugin';
|
|
51
47
|
import YouTubePlugin from './plugins/YouTubePlugin';
|
|
@@ -63,17 +59,12 @@ import AlertPlugin from '../ext/Alert/AlertPlugin';
|
|
|
63
59
|
import { HeadingsIdPlugin } from '../ext/HeadingsIdPlugin';
|
|
64
60
|
import { EditorReadyPlugin } from '../ext/EditorReadyPlugin';
|
|
65
61
|
import { VideoPlugin } from '../ext/VideoPlugin';
|
|
66
|
-
import { TemplatePlugin } from '../ext/TemplatePlugin';
|
|
67
|
-
import { CustomOnChangePlugin } from '../ext/CustomOnChangePlugin';
|
|
68
62
|
import { PdfPlugin } from '../ext/PdfPlugin';
|
|
69
63
|
import { FilePlugin } from '../ext/FilePlugin';
|
|
70
|
-
import { BlurTextPlugin } from '../ext/BlurTextPlugin';
|
|
71
|
-
import { useResponsiveTable } from './hooks/useResponsiveTable';
|
|
72
|
-
import { useTranslationListener } from './hooks/useTranslationListener';
|
|
73
64
|
import { PagesKitComponentPlugin } from '../ext/PagesKitComponent/PagesKitComponentPlugin';
|
|
74
65
|
import { EditorHolderPlugin } from '../ext/EditorHolderPlugin';
|
|
75
66
|
import { StyledEditorContent } from './styled-editor-content';
|
|
76
|
-
import { CodeCopyPlugin } from '../ext/CodeCopyPlugin';
|
|
67
|
+
// import { CodeCopyPlugin } from '../ext/CodeCopyPlugin';
|
|
77
68
|
import { VideoPathFixerPlugin } from '../ext/VideoPathFixerPlugin';
|
|
78
69
|
import ImagePathFixerPlugin from '../ext/ImagePathFixerPlugin';
|
|
79
70
|
import { SafeAreaPlugin } from '../ext/SafeAreaPlugin';
|
|
@@ -90,11 +81,8 @@ export default function Editor({ children, prepend, placeholder, onChange, autoF
|
|
|
90
81
|
setEditable(e);
|
|
91
82
|
});
|
|
92
83
|
}, [editor]);
|
|
93
|
-
useResponsiveTable();
|
|
94
|
-
useTranslationListener();
|
|
95
84
|
const hasNodes = useHasNodes();
|
|
96
85
|
const { historyState } = useSharedHistoryContext();
|
|
97
|
-
const { settings: { isRichText, showTableOfContents }, } = useSettings();
|
|
98
86
|
const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
|
|
99
87
|
const onRef = (_floatingAnchorElem) => {
|
|
100
88
|
if (_floatingAnchorElem !== null) {
|
|
@@ -107,7 +95,7 @@ export default function Editor({ children, prepend, placeholder, onChange, autoF
|
|
|
107
95
|
}
|
|
108
96
|
}, [hasNodes('image'), hasUploader]);
|
|
109
97
|
if (minimalMode) {
|
|
110
|
-
return (_jsxs(_Fragment, { children: [prepend, _jsx(VideoPathFixerPlugin, {}), _jsx(ImagePathFixerPlugin, {}),
|
|
98
|
+
return (_jsxs(_Fragment, { children: [prepend, _jsx(VideoPathFixerPlugin, {}), _jsx(ImagePathFixerPlugin, {}), editable && showToolbar && _jsx(ToolbarPlugin, {}), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), _jsx(PasteSlackImagePlugin, {}), _jsx(StyledEditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('autolink') && !!editable && _jsx(AutoLinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && hasNodes('link') && (_jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem })), !!characterLimitConfig?.maxLength && ENABLE_EDITOR_PLUGIN_CHAR_LIMIT && (_jsx(CharacterLimitPlugin, { maxLength: characterLimitConfig.maxLength, charLimitIndicatorStyle: characterLimitConfig.indicatorStyle, alignLeft: characterLimitConfig.alignLeft })), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), children] }));
|
|
111
99
|
}
|
|
112
|
-
return (_jsxs(_Fragment, { children: [prepend, _jsx(VideoPathFixerPlugin, {}), _jsx(ImagePathFixerPlugin, {}),
|
|
100
|
+
return (_jsxs(_Fragment, { children: [prepend, _jsx(VideoPathFixerPlugin, {}), _jsx(ImagePathFixerPlugin, {}), editable && showToolbar && _jsx(ToolbarPlugin, {}), !!characterLimitConfig?.maxLength && ENABLE_EDITOR_PLUGIN_CHAR_LIMIT && (_jsx(CharacterLimitPlugin, { maxLength: characterLimitConfig.maxLength, charLimitIndicatorStyle: characterLimitConfig.indicatorStyle, alignLeft: characterLimitConfig.alignLeft })), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('autolink') && !!editable && _jsx(AutoLinkPlugin, {}), _jsxs(_Fragment, { children: [_jsx(PasteSlackImagePlugin, {}), _jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(StyledEditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), _jsx(MarkdownShortcutPlugin, {}), _jsx(TabIndentationPlugin, {}), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('table', 'tablerow', 'tablecell') && editable && (_jsx(TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: true, hasHorizontalScroll: true })), hasNodes('table', 'tablerow', 'tablecell') && _jsx(TableCellResizer, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(BilibiliPlugin, {}), _jsx(BlockletEmbedPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), _jsx(AidePlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), hasNodes('collapsible-container', 'collapsible-content', 'collapsible-title') && _jsx(CollapsiblePlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }), hasNodes('table') && _jsx(TableCellActionMenuPlugin, { anchorElem: floatingAnchorElem, cellMerge: true }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })] })), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {})] }), _jsx(EditorHolderPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), config.enableSafeAreaPlugin && _jsx(SafeAreaPlugin, {}), children] }));
|
|
113
101
|
}
|
package/lib/main/index.js
CHANGED
|
@@ -14,7 +14,6 @@ import { LexicalComposer } from '@lexical/react/LexicalComposer';
|
|
|
14
14
|
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
15
15
|
import { useCallback, useEffect, useRef } from 'react';
|
|
16
16
|
import { useTheme } from '@mui/material';
|
|
17
|
-
import { SettingsContext } from './context/SettingsContext';
|
|
18
17
|
import { SharedAutocompleteContext } from './context/SharedAutocompleteContext';
|
|
19
18
|
import { SharedHistoryContext } from './context/SharedHistoryContext';
|
|
20
19
|
import Editor from './editor';
|
|
@@ -35,7 +34,7 @@ export default function BlockletEditor({ editorState, nodes = PlaygroundNodes, e
|
|
|
35
34
|
},
|
|
36
35
|
theme,
|
|
37
36
|
};
|
|
38
|
-
return (_jsx(
|
|
37
|
+
return (_jsx(SharedHistoryContext, { children: _jsx(SharedAutocompleteContext, { children: _jsx(TableContext, { children: _jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsx(EditorShell, { ...props, editable: editable }) }) }) }) }));
|
|
39
38
|
}
|
|
40
39
|
function EditorShell({ placeholder, children, prepend, editable, onChange, autoFocus, showToolbar = true, editorRef, onReady, enableHeadingsIdPlugin, ...props }) {
|
|
41
40
|
const muiTheme = useTheme();
|
|
@@ -24,7 +24,6 @@ import FloatingLinkEditorPlugin from '../plugins/FloatingLinkEditorPlugin';
|
|
|
24
24
|
import FloatingTextFormatToolbarPlugin from '../plugins/FloatingTextFormatToolbarPlugin';
|
|
25
25
|
import HorizontalRulePlugin from '../plugins/HorizontalRulePlugin';
|
|
26
26
|
import ImagesPlugin from '../plugins/ImagesPlugin';
|
|
27
|
-
import ListMaxIndentLevelPlugin from '../plugins/ListMaxIndentLevelPlugin';
|
|
28
27
|
import MarkdownShortcutPlugin from '../plugins/MarkdownShortcutPlugin';
|
|
29
28
|
import TabFocusPlugin from '../plugins/TabFocusPlugin';
|
|
30
29
|
import ContentEditable from '../ui/ContentEditable';
|
|
@@ -35,7 +34,6 @@ import RemoveListPlugin from '../../ext/RemoveListPlugin';
|
|
|
35
34
|
import { EditorRefPlugin } from '../../ext/LexicalEditorRefPlugin';
|
|
36
35
|
import { HeadingsIdPlugin } from '../../ext/HeadingsIdPlugin';
|
|
37
36
|
import { EditorReadyPlugin } from '../../ext/EditorReadyPlugin';
|
|
38
|
-
import { BlurTextPlugin } from '../../ext/BlurTextPlugin';
|
|
39
37
|
import ToolbarPlugin from './plugins/ToolbarPlugin';
|
|
40
38
|
import { PLAYGROUND_TRANSFORMERS as TRANSFORMERS, IMAGE } from '../plugins/MarkdownTransformers';
|
|
41
39
|
import { MediaUrlFixerPlugin } from './plugins/MediaUrlFixerPlugin';
|
|
@@ -72,5 +70,5 @@ export default function Editor({ children, placeholder, onChange, autoFocus = tr
|
|
|
72
70
|
});
|
|
73
71
|
}
|
|
74
72
|
};
|
|
75
|
-
return (_jsxs(_Fragment, { children: [editable && showToolbar && _jsx(ToolbarPlugin, {}), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), hasNodes('autolink') && _jsx(AutoLinkPlugin, {}), _jsx(StyledEditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), _jsx(MarkdownShortcutPlugin, {}), _jsx(TabIndentationPlugin, {}), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('
|
|
73
|
+
return (_jsxs(_Fragment, { children: [editable && showToolbar && _jsx(ToolbarPlugin, {}), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), hasNodes('autolink') && _jsx(AutoLinkPlugin, {}), _jsx(StyledEditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), _jsx(MarkdownShortcutPlugin, {}), _jsx(TabIndentationPlugin, {}), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), _jsx(TabFocusPlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: handleOnChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })] })), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {}), mediaUrlPrefix && _jsx(MediaUrlFixerPlugin, { mediaUrlPrefix: mediaUrlPrefix, transformers: [IMAGE] }), _jsx(SelectBlockPlugin, {}), _jsx(RemoveListPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), hasNodes('table', 'tablerow', 'tablecell') && editable && _jsx(TablePlugin, {}), children] }));
|
|
76
74
|
}
|
|
@@ -224,7 +224,10 @@ export default function ToolbarPlugin() {
|
|
|
224
224
|
useEffect(() => {
|
|
225
225
|
return mergeRegister(editor.registerEditableListener((editable) => {
|
|
226
226
|
setIsEditable(editable);
|
|
227
|
-
}), activeEditor.registerUpdateListener((
|
|
227
|
+
}), activeEditor.registerUpdateListener((payload) => {
|
|
228
|
+
if (!payload)
|
|
229
|
+
return;
|
|
230
|
+
const { editorState } = payload;
|
|
228
231
|
editorState.read(() => {
|
|
229
232
|
updateToolbar();
|
|
230
233
|
});
|
|
@@ -11,7 +11,10 @@ export function markdownToLexical({ markdown }) {
|
|
|
11
11
|
editor.update(() => {
|
|
12
12
|
$convertFromMarkdownString(markdown, PLAYGROUND_TRANSFORMERS, undefined, true);
|
|
13
13
|
});
|
|
14
|
-
editor.registerUpdateListener((
|
|
14
|
+
editor.registerUpdateListener((payload) => {
|
|
15
|
+
if (!payload)
|
|
16
|
+
return;
|
|
17
|
+
const { editorState } = payload;
|
|
15
18
|
editorState.read(() => {
|
|
16
19
|
resolve(editorState);
|
|
17
20
|
});
|
|
@@ -22,7 +22,6 @@ import { Suspense, useCallback, useEffect, useRef, useState, lazy, useMemo } fro
|
|
|
22
22
|
import { createPortal } from 'react-dom';
|
|
23
23
|
import { withQuery, getQuery } from 'ufo';
|
|
24
24
|
import { useEditorConfig } from '../../config';
|
|
25
|
-
import { useSettings } from '../context/SettingsContext';
|
|
26
25
|
import { useSharedHistoryContext } from '../context/SharedHistoryContext';
|
|
27
26
|
import ContentEditable from '../ui/ContentEditable';
|
|
28
27
|
import ImageResizer from '../ui/ImageResizer';
|
|
@@ -129,7 +128,10 @@ function ImageComponent({ file, src, altText, nodeKey, width, height, maxWidth,
|
|
|
129
128
|
return false;
|
|
130
129
|
}, [caption, editor, setSelected]);
|
|
131
130
|
useEffect(() => {
|
|
132
|
-
return mergeRegister(editor.registerUpdateListener((
|
|
131
|
+
return mergeRegister(editor.registerUpdateListener((payload) => {
|
|
132
|
+
if (!payload)
|
|
133
|
+
return;
|
|
134
|
+
const { editorState } = payload;
|
|
133
135
|
setSelection(editorState.read(() => $getSelection()));
|
|
134
136
|
}), editor.registerCommand(SELECTION_CHANGE_COMMAND, (_, activeEditor) => {
|
|
135
137
|
activeEditorRef.current = activeEditor;
|
|
@@ -203,9 +205,6 @@ function ImageComponent({ file, src, altText, nodeKey, width, height, maxWidth,
|
|
|
203
205
|
setIsResizing(true);
|
|
204
206
|
};
|
|
205
207
|
const { historyState } = useSharedHistoryContext();
|
|
206
|
-
const {
|
|
207
|
-
// eslint-disable-next-line no-empty-pattern
|
|
208
|
-
settings: {}, } = useSettings();
|
|
209
208
|
const draggable = isSelected && $isNodeSelection(selection);
|
|
210
209
|
const isFocused = isSelected || isResizing;
|
|
211
210
|
const [objectUrl] = useState(() => file && URL.createObjectURL(file));
|
|
@@ -30,7 +30,6 @@ import { useEditorConfig } from '../../../config';
|
|
|
30
30
|
import createPortal from '../../../components/createPortal';
|
|
31
31
|
import { $insertAlert } from '../../../ext/Alert/AlertPlugin';
|
|
32
32
|
import { INSERT_VIDEO_COMMAND, isVideo } from '../../../ext/VideoPlugin';
|
|
33
|
-
import { INSERT_TEMPLATE_COMMAND } from '../../../ext/TemplatePlugin';
|
|
34
33
|
import { INSERT_PDF_COMMAND, isPdf } from '../../../ext/PdfPlugin';
|
|
35
34
|
import { INSERT_FILE_COMMAND } from '../../../ext/FilePlugin';
|
|
36
35
|
import { $insertSubpageListing } from '../../../ext/SubpageListingPlugin/SubpageListingPlugin';
|
|
@@ -287,14 +286,14 @@ export default function ComponentPickerMenuPlugin() {
|
|
|
287
286
|
uploadFile(editor);
|
|
288
287
|
},
|
|
289
288
|
}),
|
|
290
|
-
!minimalMode &&
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
289
|
+
// !minimalMode &&
|
|
290
|
+
// new ComponentPickerOption('Templates', {
|
|
291
|
+
// icon: <i className="iconify" data-icon={icons.template} />,
|
|
292
|
+
// keywords: ['templates'],
|
|
293
|
+
// onSelect: () => {
|
|
294
|
+
// editor.dispatchCommand(INSERT_TEMPLATE_COMMAND, undefined);
|
|
295
|
+
// },
|
|
296
|
+
// }),
|
|
298
297
|
!minimalMode &&
|
|
299
298
|
hasNodes('collapsible-container') &&
|
|
300
299
|
new ComponentPickerOption('Collapsible', {
|
|
@@ -93,7 +93,10 @@ function FloatingLinkEditor({ editor, anchorElem }) {
|
|
|
93
93
|
};
|
|
94
94
|
}, [anchorElem.parentElement, editor, updateLinkEditor]);
|
|
95
95
|
useEffect(() => {
|
|
96
|
-
return mergeRegister(editor.registerUpdateListener((
|
|
96
|
+
return mergeRegister(editor.registerUpdateListener((payload) => {
|
|
97
|
+
if (!payload)
|
|
98
|
+
return;
|
|
99
|
+
const { editorState } = payload;
|
|
97
100
|
editorState.read(() => {
|
|
98
101
|
updateLinkEditor();
|
|
99
102
|
});
|
|
@@ -82,7 +82,10 @@ function TextFormatFloatingToolbar({ editor, anchorElem, isLink, isBold, isItali
|
|
|
82
82
|
editor.getEditorState().read(() => {
|
|
83
83
|
updateTextFormatFloatingToolbar();
|
|
84
84
|
});
|
|
85
|
-
return mergeRegister(editor.registerUpdateListener((
|
|
85
|
+
return mergeRegister(editor.registerUpdateListener((payload) => {
|
|
86
|
+
if (!payload)
|
|
87
|
+
return;
|
|
88
|
+
const { editorState } = payload;
|
|
86
89
|
editorState.read(() => {
|
|
87
90
|
updateTextFormatFloatingToolbar();
|
|
88
91
|
});
|
|
@@ -229,7 +229,10 @@ export default function ToolbarPlugin() {
|
|
|
229
229
|
useEffect(() => {
|
|
230
230
|
return mergeRegister(editor.registerEditableListener((editable) => {
|
|
231
231
|
setIsEditable(editable);
|
|
232
|
-
}), activeEditor.registerUpdateListener((
|
|
232
|
+
}), activeEditor.registerUpdateListener((payload) => {
|
|
233
|
+
if (!payload)
|
|
234
|
+
return;
|
|
235
|
+
const { editorState } = payload;
|
|
233
236
|
editorState.read(() => {
|
|
234
237
|
updateToolbar();
|
|
235
238
|
});
|
|
@@ -10,23 +10,19 @@ import useHasNodes from '../hooks/useHasNodes';
|
|
|
10
10
|
import ClickableLinkPlugin from '../plugins/ClickableLinkPlugin';
|
|
11
11
|
import CodeHighlightPlugin from '../plugins/CodeHighlightPlugin';
|
|
12
12
|
import CollapsiblePlugin from '../plugins/CollapsiblePlugin';
|
|
13
|
-
import ListMaxIndentLevelPlugin from '../plugins/ListMaxIndentLevelPlugin';
|
|
14
13
|
import MarkdownShortcutPlugin from '../plugins/MarkdownShortcutPlugin';
|
|
15
14
|
import TabFocusPlugin from '../plugins/TabFocusPlugin';
|
|
16
15
|
import ContentEditable from '../ui/ContentEditable';
|
|
17
16
|
import { EditorRefPlugin } from '../../ext/LexicalEditorRefPlugin';
|
|
18
17
|
import { HeadingsIdPlugin } from '../../ext/HeadingsIdPlugin';
|
|
19
18
|
import { EditorReadyPlugin } from '../../ext/EditorReadyPlugin';
|
|
20
|
-
import { BlurTextPlugin } from '../../ext/BlurTextPlugin';
|
|
21
|
-
import { useResponsiveTable } from '../hooks/useResponsiveTable';
|
|
22
19
|
import { EditorHolderPlugin } from '../../ext/EditorHolderPlugin';
|
|
23
20
|
import { StyledEditorContent } from '../styled-editor-content';
|
|
24
|
-
import { CodeCopyPlugin } from '../../ext/CodeCopyPlugin';
|
|
21
|
+
// import { CodeCopyPlugin } from '../../ext/CodeCopyPlugin';
|
|
25
22
|
import CheckboxPlugin from '../../ext/CheckboxPlugin';
|
|
26
23
|
import { VideoPathFixerPlugin } from '../../ext/VideoPathFixerPlugin';
|
|
27
24
|
import ImagePathFixerPlugin from '../../ext/ImagePathFixerPlugin';
|
|
28
25
|
export function EditorViewer({ children, prepend, onChange, editorRef, onReady, enableHeadingsIdPlugin, onCheckboxChange, }) {
|
|
29
|
-
useResponsiveTable();
|
|
30
26
|
const hasNodes = useHasNodes();
|
|
31
|
-
return (_jsxs(_Fragment, { children: [prepend, _jsx(VideoPathFixerPlugin, {}), _jsx(ImagePathFixerPlugin, {}), _jsx(StyledEditorContent, { className: "be-content", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), ErrorBoundary: LexicalErrorBoundary }) }), _jsx(MarkdownShortcutPlugin, {}), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('
|
|
27
|
+
return (_jsxs(_Fragment, { children: [prepend, _jsx(VideoPathFixerPlugin, {}), _jsx(ImagePathFixerPlugin, {}), _jsx(StyledEditorContent, { className: "be-content", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), ErrorBoundary: LexicalErrorBoundary }) }), _jsx(MarkdownShortcutPlugin, {}), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), _jsx(TabFocusPlugin, {}), hasNodes('collapsible-container', 'collapsible-content', 'collapsible-title') && _jsx(CollapsiblePlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {}), _jsx(EditorHolderPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), _jsx(CheckboxPlugin, { send: onCheckboxChange }), children] }));
|
|
32
28
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/editor",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.53",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"publishConfig": {
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"ufo": "^1.5.4",
|
|
74
74
|
"url-join": "^4.0.1",
|
|
75
75
|
"zustand": "^4.5.5",
|
|
76
|
-
"@blocklet/pdf": "2.5.
|
|
76
|
+
"@blocklet/pdf": "2.5.53"
|
|
77
77
|
},
|
|
78
78
|
"devDependencies": {
|
|
79
79
|
"@babel/core": "^7.25.2",
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the MIT license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
import { ReactNode, type JSX } from 'react';
|
|
9
|
-
import type { SettingName } from '../appSettings';
|
|
10
|
-
type SettingsContextShape = {
|
|
11
|
-
setOption: (name: SettingName, value: boolean) => void;
|
|
12
|
-
settings: Record<SettingName, boolean>;
|
|
13
|
-
};
|
|
14
|
-
export declare function SettingsContext({ children }: {
|
|
15
|
-
children: ReactNode;
|
|
16
|
-
}): JSX.Element;
|
|
17
|
-
export declare const useSettings: () => SettingsContextShape;
|
|
18
|
-
export {};
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { createContext, useCallback, useContext, useMemo, useState } from 'react';
|
|
3
|
-
import { DEFAULT_SETTINGS } from '../appSettings';
|
|
4
|
-
const Context = createContext({
|
|
5
|
-
setOption: (name, value) => { },
|
|
6
|
-
settings: DEFAULT_SETTINGS,
|
|
7
|
-
});
|
|
8
|
-
export function SettingsContext({ children }) {
|
|
9
|
-
const [settings, setSettings] = useState(DEFAULT_SETTINGS);
|
|
10
|
-
const setOption = useCallback((setting, value) => {
|
|
11
|
-
setSettings((options) => ({
|
|
12
|
-
...options,
|
|
13
|
-
[setting]: value,
|
|
14
|
-
}));
|
|
15
|
-
if (DEFAULT_SETTINGS[setting] === value) {
|
|
16
|
-
setURLParam(setting, null);
|
|
17
|
-
}
|
|
18
|
-
else {
|
|
19
|
-
setURLParam(setting, value);
|
|
20
|
-
}
|
|
21
|
-
}, []);
|
|
22
|
-
const contextValue = useMemo(() => {
|
|
23
|
-
return { setOption, settings };
|
|
24
|
-
}, [setOption, settings]);
|
|
25
|
-
return _jsx(Context.Provider, { value: contextValue, children: children });
|
|
26
|
-
}
|
|
27
|
-
export const useSettings = () => {
|
|
28
|
-
return useContext(Context);
|
|
29
|
-
};
|
|
30
|
-
function setURLParam(param, value) {
|
|
31
|
-
const url = new URL(window.location.href);
|
|
32
|
-
const params = new URLSearchParams(url.search);
|
|
33
|
-
if (value !== null) {
|
|
34
|
-
if (params.has(param)) {
|
|
35
|
-
params.set(param, String(value));
|
|
36
|
-
}
|
|
37
|
-
else {
|
|
38
|
-
params.append(param, String(value));
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
else if (params.has(param)) {
|
|
42
|
-
params.delete(param);
|
|
43
|
-
}
|
|
44
|
-
url.search = params.toString();
|
|
45
|
-
window.history.pushState(null, '', url.toString());
|
|
46
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the MIT license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
type Props = Readonly<{
|
|
9
|
-
maxDepth: number | null | undefined;
|
|
10
|
-
}>;
|
|
11
|
-
export default function ListMaxIndentLevelPlugin({ maxDepth }: Props): null;
|
|
12
|
-
export {};
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the MIT license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
import { $getListDepth, $isListItemNode, $isListNode } from '@lexical/list';
|
|
9
|
-
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
10
|
-
import { $getSelection, $isElementNode, $isRangeSelection, COMMAND_PRIORITY_CRITICAL, INDENT_CONTENT_COMMAND, } from 'lexical';
|
|
11
|
-
import { useEffect } from 'react';
|
|
12
|
-
function getElementNodesInSelection(selection) {
|
|
13
|
-
const nodesInSelection = selection.getNodes();
|
|
14
|
-
if (nodesInSelection.length === 0) {
|
|
15
|
-
return new Set([selection.anchor.getNode().getParentOrThrow(), selection.focus.getNode().getParentOrThrow()]);
|
|
16
|
-
}
|
|
17
|
-
return new Set(nodesInSelection.map((n) => ($isElementNode(n) ? n : n.getParentOrThrow())));
|
|
18
|
-
}
|
|
19
|
-
function isIndentPermitted(maxDepth) {
|
|
20
|
-
const selection = $getSelection();
|
|
21
|
-
if (!$isRangeSelection(selection)) {
|
|
22
|
-
return false;
|
|
23
|
-
}
|
|
24
|
-
const elementNodesInSelection = getElementNodesInSelection(selection);
|
|
25
|
-
let totalDepth = 0;
|
|
26
|
-
for (const elementNode of elementNodesInSelection) {
|
|
27
|
-
if ($isListNode(elementNode)) {
|
|
28
|
-
totalDepth = Math.max($getListDepth(elementNode) + 1, totalDepth);
|
|
29
|
-
}
|
|
30
|
-
else if ($isListItemNode(elementNode)) {
|
|
31
|
-
const parent = elementNode.getParent();
|
|
32
|
-
if (!$isListNode(parent)) {
|
|
33
|
-
throw new Error('ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent.');
|
|
34
|
-
}
|
|
35
|
-
totalDepth = Math.max($getListDepth(parent) + 1, totalDepth);
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
return totalDepth <= maxDepth;
|
|
39
|
-
}
|
|
40
|
-
export default function ListMaxIndentLevelPlugin({ maxDepth }) {
|
|
41
|
-
const [editor] = useLexicalComposerContext();
|
|
42
|
-
useEffect(() => {
|
|
43
|
-
return editor.registerCommand(INDENT_CONTENT_COMMAND, () => !isIndentPermitted(maxDepth ?? 7), COMMAND_PRIORITY_CRITICAL);
|
|
44
|
-
}, [editor, maxDepth]);
|
|
45
|
-
return null;
|
|
46
|
-
}
|