@blocklet/editor 2.0.4 → 2.0.6
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/main/editor.js
CHANGED
|
@@ -39,7 +39,6 @@ import DragDropPaste from './plugins/DragDropPastePlugin';
|
|
|
39
39
|
import DraggableBlockPlugin from './plugins/DraggableBlockPlugin';
|
|
40
40
|
import EmojiPickerPlugin from './plugins/EmojiPickerPlugin';
|
|
41
41
|
import EmojisPlugin from './plugins/EmojisPlugin';
|
|
42
|
-
import EquationsPlugin from './plugins/EquationsPlugin';
|
|
43
42
|
import ExcalidrawPlugin from './plugins/ExcalidrawPlugin';
|
|
44
43
|
import FigmaPlugin from './plugins/FigmaPlugin';
|
|
45
44
|
import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
|
|
@@ -113,9 +112,9 @@ export default function Editor({ children, placeholder, onChange, autoFocus = tr
|
|
|
113
112
|
}
|
|
114
113
|
}, [hasNodes('image'), hasUploader]);
|
|
115
114
|
if (minimalMode) {
|
|
116
|
-
return (_jsxs(_Fragment, { children: [isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), _jsx(EditorContent, { 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('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(BilibiliPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('
|
|
115
|
+
return (_jsxs(_Fragment, { children: [isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), _jsx(EditorContent, { 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('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(BilibiliPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), 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 && (_jsxs(_Fragment, { children: [hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(AiImagePlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), children] }));
|
|
117
116
|
}
|
|
118
|
-
return (_jsxs(_Fragment, { children: [isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), isMaxLength && _jsx(MaxLengthPlugin, { maxLength: 30 }), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), _jsx(EmojiPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('emoji') && _jsx(EmojisPlugin, {}), hasNodes('hashtag') && _jsx(HashtagPlugin, {}), hasNodes('keyword') && _jsx(KeywordsPlugin, {}), _jsx(SpeechToTextPlugin, {}), hasNodes('autolink') && _jsx(AutoLinkPlugin, {}), isRichText ? (_jsxs(_Fragment, { children: [_jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(EditorContent, { 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('list', 'listitem') && _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), hasNodes('table', 'tablerow', 'tablecell') && editable && (_jsx(TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: 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, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('
|
|
117
|
+
return (_jsxs(_Fragment, { children: [isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), isMaxLength && _jsx(MaxLengthPlugin, { maxLength: 30 }), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), _jsx(EmojiPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('emoji') && _jsx(EmojisPlugin, {}), hasNodes('hashtag') && _jsx(HashtagPlugin, {}), hasNodes('keyword') && _jsx(KeywordsPlugin, {}), _jsx(SpeechToTextPlugin, {}), hasNodes('autolink') && _jsx(AutoLinkPlugin, {}), isRichText ? (_jsxs(_Fragment, { children: [_jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(EditorContent, { 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('list', 'listitem') && _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), hasNodes('table', 'tablerow', 'tablecell') && editable && (_jsx(TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: 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, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), 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('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }), hasNodes('table') && _jsx(TableCellActionMenuPlugin, { anchorElem: floatingAnchorElem, cellMerge: true }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })] })), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {})] })) : (_jsxs(_Fragment, { children: [_jsx(PlainTextPlugin, { contentEditable: _jsx(ContentEditable, {}), placeholder: _jsx(Placeholder, { children: "placeholder" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, { externalHistoryState: historyState })] })), (isCharLimit || isCharLimitUtf8) && (_jsx(CharacterLimitPlugin, { charset: isCharLimit ? 'UTF-16' : 'UTF-8', maxLength: 5 })), isAutocomplete && hasNodes('autocomplete') && _jsx(AutocompletePlugin, {}), _jsx("div", { children: showTableOfContents && _jsx(TableOfContentsPlugin, {}) }), _jsx(SelectBlockPlugin, {}), _jsx(RemoveListPlugin, {}), _jsx(MarkdownHeadTextPlugin, {}), _jsx(AiImagePlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), children] }));
|
|
119
118
|
}
|
|
120
119
|
const EditorContent = styled.div `
|
|
121
120
|
position: relative;
|
|
@@ -24,7 +24,6 @@ import useHasNodes from '../../hooks/useHasNodes';
|
|
|
24
24
|
import useModal from '../../hooks/useModal';
|
|
25
25
|
import { EmbedConfigs } from '../AutoEmbedPlugin';
|
|
26
26
|
import { INSERT_COLLAPSIBLE_COMMAND } from '../CollapsiblePlugin';
|
|
27
|
-
import { InsertEquationDialog } from '../EquationsPlugin';
|
|
28
27
|
import { INSERT_EXCALIDRAW_COMMAND } from '../ExcalidrawPlugin';
|
|
29
28
|
import { INSERT_IMAGE_COMMAND, isImage } from '../ImagesPlugin';
|
|
30
29
|
import { InsertTableDialog } from '../TablePlugin';
|
|
@@ -268,13 +267,6 @@ export default function ComponentPickerMenuPlugin() {
|
|
|
268
267
|
keywords: [...embedConfig.keywords, 'embed'],
|
|
269
268
|
onSelect: () => editor.dispatchCommand(INSERT_EMBED_COMMAND, embedConfig.type),
|
|
270
269
|
}))),
|
|
271
|
-
!minimalMode &&
|
|
272
|
-
hasNodes('equation') &&
|
|
273
|
-
new ComponentPickerOption('Equation', {
|
|
274
|
-
icon: _jsx("i", { className: "iconify", "data-icon": "mdi:function-variant" }),
|
|
275
|
-
keywords: ['equation', 'latex', 'math'],
|
|
276
|
-
onSelect: () => showModal('Insert Equation', (onClose) => _jsx(InsertEquationDialog, { activeEditor: editor, onClose: onClose })),
|
|
277
|
-
}),
|
|
278
270
|
hasNodes('image') &&
|
|
279
271
|
hasUploader &&
|
|
280
272
|
new ComponentPickerOption(isExistAiKit() ? 'Media (Support AI)' : 'Media', {
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
9
|
-
import {
|
|
10
|
-
import { $createParagraphNode, $insertNodes,
|
|
9
|
+
import { mergeRegister } from '@lexical/utils';
|
|
10
|
+
import { $createParagraphNode, $insertNodes, COMMAND_PRIORITY_EDITOR, createCommand, } from 'lexical';
|
|
11
11
|
import { useEffect } from 'react';
|
|
12
12
|
import { $createImageNode, ImageNode } from '../../nodes/ImageNode';
|
|
13
13
|
export const INSERT_IMAGE_COMMAND = createCommand('INSERT_IMAGE_COMMAND');
|
|
@@ -19,10 +19,10 @@ export default function ImagesPlugin({ captionsEnabled }) {
|
|
|
19
19
|
}
|
|
20
20
|
return mergeRegister(editor.registerCommand(INSERT_IMAGE_COMMAND, (payload) => {
|
|
21
21
|
const imageNode = $createImageNode(payload);
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
// 插入段落再插入图片, 确保图片独自占一行 (#2505)
|
|
23
|
+
const p = $createParagraphNode();
|
|
24
|
+
$insertNodes([p, imageNode]);
|
|
25
|
+
p.remove();
|
|
26
26
|
return true;
|
|
27
27
|
}, COMMAND_PRIORITY_EDITOR));
|
|
28
28
|
}, [captionsEnabled, editor]);
|
|
@@ -298,7 +298,7 @@ export default function ToolbarPlugin() {
|
|
|
298
298
|
};
|
|
299
299
|
const { toolbar: toolbarConfig, minimalMode } = useEditorConfig();
|
|
300
300
|
const defaultItems = minimalMode
|
|
301
|
-
? ['component', 'block', 'bold', 'italic', 'underline', '
|
|
301
|
+
? ['component', 'block', 'bold', 'italic', 'underline', 'media', 'code', 'link']
|
|
302
302
|
: [
|
|
303
303
|
'component',
|
|
304
304
|
'block',
|
|
@@ -306,12 +306,12 @@ export default function ToolbarPlugin() {
|
|
|
306
306
|
'bold',
|
|
307
307
|
'italic',
|
|
308
308
|
'underline',
|
|
309
|
+
'media',
|
|
309
310
|
'code',
|
|
310
311
|
'link',
|
|
311
312
|
'color',
|
|
312
313
|
'bgcolor',
|
|
313
314
|
'strikethrough',
|
|
314
|
-
'media',
|
|
315
315
|
];
|
|
316
316
|
const items = toolbarConfig?.items ?? defaultItems;
|
|
317
317
|
const menus = [];
|
|
@@ -376,32 +376,6 @@ export default function ToolbarPlugin() {
|
|
|
376
376
|
}
|
|
377
377
|
break;
|
|
378
378
|
}
|
|
379
|
-
case 'image': {
|
|
380
|
-
if (hasNodes('image')) {
|
|
381
|
-
menus.push(_jsx(FormatButton, { disabled: !isEditable, onClick: () => {
|
|
382
|
-
// @ts-ignore
|
|
383
|
-
if (window?.uploaderRef) {
|
|
384
|
-
// @ts-ignore
|
|
385
|
-
const uploader = window?.uploaderRef?.current?.getUploader();
|
|
386
|
-
uploader.open();
|
|
387
|
-
// listen to all upload success
|
|
388
|
-
uploader.onUploadSuccess(({ file, response }) => {
|
|
389
|
-
// missing the source: function-upload-file
|
|
390
|
-
if (file.source !== 'function-upload-file') {
|
|
391
|
-
const { data } = response;
|
|
392
|
-
if (data?.filename) {
|
|
393
|
-
editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
|
|
394
|
-
src: `/${data?.filename}`,
|
|
395
|
-
altText: data?.originalname,
|
|
396
|
-
});
|
|
397
|
-
}
|
|
398
|
-
}
|
|
399
|
-
});
|
|
400
|
-
}
|
|
401
|
-
}, className: "toolbar-item spaced", "aria-label": "Upload Image", title: "Upload Image", children: _jsx("i", { className: "iconify", "data-icon": "tabler:photo" }) }, item));
|
|
402
|
-
}
|
|
403
|
-
break;
|
|
404
|
-
}
|
|
405
379
|
case 'color': {
|
|
406
380
|
if (blockType !== 'code') {
|
|
407
381
|
menus.push(_jsx(ColorPicker, { disabled: !isEditable, buttonClassName: "toolbar-item color-picker", buttonAriaLabel: "Formatting text color", buttonIconClassName: "iconify", buttonIconData: "tabler:text-color", color: fontColor, onChange: onFontColorSelect, title: "text color" }, item));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/editor",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.6",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "npm run storybook",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"@arcblock/ux": "^2.9.77",
|
|
41
41
|
"@blocklet/embed": "^0.1.11",
|
|
42
42
|
"@blocklet/pages-kit": "^0.2.302",
|
|
43
|
-
"@blocklet/pdf": "2.0.
|
|
43
|
+
"@blocklet/pdf": "2.0.6",
|
|
44
44
|
"@excalidraw/excalidraw": "^0.14.2",
|
|
45
45
|
"@iconify/iconify": "^3.0.1",
|
|
46
46
|
"@iconify/icons-tabler": "^1.2.95",
|
|
@@ -113,5 +113,5 @@
|
|
|
113
113
|
"react": "*",
|
|
114
114
|
"react-dom": "*"
|
|
115
115
|
},
|
|
116
|
-
"gitHead": "
|
|
116
|
+
"gitHead": "06a854759aa8326ba20e3a12a107d1824e9321bc"
|
|
117
117
|
}
|