@blocklet/editor 2.4.13 → 2.4.15
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.
|
@@ -8,6 +8,7 @@ import { useRequest } from 'ahooks';
|
|
|
8
8
|
import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
|
|
9
9
|
import { getBlockletMountPointInfo } from '../utils';
|
|
10
10
|
const discussKitMountPoint = getBlockletMountPointInfo('did-comments')?.mountPoint;
|
|
11
|
+
const { enableDocFullWidthMode = true } = window.blocklet.preferences;
|
|
11
12
|
const fetchSubpages = async ({ id, mode, locale }) => {
|
|
12
13
|
try {
|
|
13
14
|
const result = await fetch(joinURL(discussKitMountPoint, `/api/docs/${id}/subpages?${new URLSearchParams({ mode, locale })}`)).then((res) => res.json());
|
|
@@ -26,7 +27,7 @@ function Icon({ icon, sx }) {
|
|
|
26
27
|
const mergedSx = [
|
|
27
28
|
{
|
|
28
29
|
flex: '0 0 auto',
|
|
29
|
-
fontSize:
|
|
30
|
+
fontSize: 24,
|
|
30
31
|
lineHeight: 1,
|
|
31
32
|
},
|
|
32
33
|
...(Array.isArray(sx) ? sx : [sx]),
|
|
@@ -63,33 +64,38 @@ export default function SubpageListingComponent({ docPostId, mode, onModeChange,
|
|
|
63
64
|
const link = window.blocklet.pageGroup === 'doc'
|
|
64
65
|
? joinURL(window.blocklet.prefix || '/', x.boardId, locale, x.slug)
|
|
65
66
|
: joinURL(discussKitMountPoint, '/docs', x.boardId, locale, x.slug);
|
|
66
|
-
return (_jsx(Box, { sx: {
|
|
67
|
+
return (_jsx(Box, { sx: {
|
|
68
|
+
boxSizing: 'border-box',
|
|
69
|
+
width: { xs: 1, lg: 1 / 2, xl: enableDocFullWidthMode ? 1 / 3 : 1 / 2 },
|
|
70
|
+
height: 120,
|
|
71
|
+
p: 1,
|
|
72
|
+
}, children: _jsxs(Box, { component: "a", href: link, sx: {
|
|
67
73
|
display: 'flex',
|
|
68
|
-
|
|
74
|
+
alignItems: 'center',
|
|
69
75
|
gap: 1,
|
|
70
76
|
height: 1,
|
|
71
|
-
|
|
77
|
+
px: 3,
|
|
78
|
+
py: 2.5,
|
|
72
79
|
color: 'inherit',
|
|
73
80
|
textDecoration: 'none',
|
|
74
81
|
border: 1,
|
|
75
|
-
borderColor: '
|
|
76
|
-
borderRadius:
|
|
77
|
-
boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
|
82
|
+
borderColor: 'divider',
|
|
83
|
+
borderRadius: 2,
|
|
78
84
|
cursor: 'pointer',
|
|
79
85
|
':hover': {
|
|
80
|
-
borderColor: '
|
|
81
|
-
// boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
|
86
|
+
borderColor: 'primary.main',
|
|
82
87
|
boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
|
|
83
88
|
},
|
|
84
|
-
}, children: [
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
89
|
+
}, children: [_jsx(Icon, { icon: x.icon }), _jsxs(Box, { sx: { ml: 1 }, children: [_jsx(Typography, { variant: "body2", component: "h2", sx: { fontWeight: 'bold' }, children: x.title }), x.excerpt && (_jsx(Typography, { variant: "body2", sx: {
|
|
90
|
+
mt: 1,
|
|
91
|
+
fontSize: 14,
|
|
92
|
+
color: 'text.secondary',
|
|
93
|
+
overflow: 'hidden',
|
|
94
|
+
textOverflow: 'ellipsis',
|
|
95
|
+
wordBreak: 'break-word',
|
|
96
|
+
display: '-webkit-box',
|
|
97
|
+
WebkitLineClamp: 2,
|
|
98
|
+
WebkitBoxOrient: 'vertical',
|
|
99
|
+
}, children: x.excerpt }))] })] }) }, x.id));
|
|
94
100
|
})] }));
|
|
95
101
|
}
|
package/lib/main/editor.js
CHANGED
|
@@ -35,7 +35,6 @@ import ComponentPickerPlugin from './plugins/ComponentPickerPlugin';
|
|
|
35
35
|
import DragDropPaste from './plugins/DragDropPastePlugin';
|
|
36
36
|
import DraggableBlockPlugin from './plugins/DraggableBlockPlugin';
|
|
37
37
|
import EmojiPickerPlugin from './plugins/EmojiPickerPlugin';
|
|
38
|
-
import EmojisPlugin from './plugins/EmojisPlugin';
|
|
39
38
|
import ExcalidrawPlugin from './plugins/ExcalidrawPlugin';
|
|
40
39
|
import FigmaPlugin from './plugins/FigmaPlugin';
|
|
41
40
|
import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
|
|
@@ -109,5 +108,5 @@ export default function Editor({ children, prepend, placeholder, onChange, autoF
|
|
|
109
108
|
if (minimalMode) {
|
|
110
109
|
return (_jsxs(_Fragment, { children: [prepend, isRichText && 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('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _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 })] })), !!characterLimitConfig?.maxLength && (_jsx(CharacterLimitPlugin, { maxLength: characterLimitConfig.maxLength, charLimitIndicatorStyle: characterLimitConfig.indicatorStyle, alignLeft: characterLimitConfig.alignLeft })), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), children] }));
|
|
111
110
|
}
|
|
112
|
-
return (_jsxs(_Fragment, { children: [prepend, isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), !!characterLimitConfig?.maxLength && (_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, {}), !!editable && _jsx(EmojiPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('
|
|
111
|
+
return (_jsxs(_Fragment, { children: [prepend, isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), !!characterLimitConfig?.maxLength && (_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, {}), !!editable && _jsx(EmojiPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('hashtag') && _jsx(HashtagPlugin, {}), hasNodes('autolink') && !!editable && _jsx(AutoLinkPlugin, {}), isRichText ? (_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('list', 'listitem') && _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), 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, {}), 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 })] })), _jsx("div", { children: showTableOfContents && _jsx(TableOfContentsPlugin, {}) }), _jsx(MarkdownHeadTextPlugin, {}), _jsx(EditorHolderPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), children] }));
|
|
113
112
|
}
|
|
@@ -10,7 +10,6 @@ import styled from '@emotion/styled';
|
|
|
10
10
|
import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
|
|
11
11
|
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
12
12
|
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
|
|
13
|
-
import { HashtagPlugin } from '@lexical/react/LexicalHashtagPlugin';
|
|
14
13
|
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
|
|
15
14
|
import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
|
|
16
15
|
import { LexicalNestedComposer } from '@lexical/react/LexicalNestedComposer';
|
|
@@ -24,8 +23,6 @@ import { createPortal } from 'react-dom';
|
|
|
24
23
|
import { useEditorConfig } from '../../config';
|
|
25
24
|
import { useSettings } from '../context/SettingsContext';
|
|
26
25
|
import { useSharedHistoryContext } from '../context/SharedHistoryContext';
|
|
27
|
-
import EmojisPlugin from '../plugins/EmojisPlugin';
|
|
28
|
-
import MentionsPlugin from '../plugins/MentionsPlugin';
|
|
29
26
|
import ContentEditable from '../ui/ContentEditable';
|
|
30
27
|
import ImageResizer from '../ui/ImageResizer';
|
|
31
28
|
import Placeholder from '../ui/Placeholder';
|
|
@@ -307,7 +304,7 @@ export default function ImageComponent({ file, src, altText, nodeKey, width, hei
|
|
|
307
304
|
}
|
|
308
305
|
return (_jsxs(_Fragment, { children: [_jsx(LazyImage, { className: isFocused && editor.isEditable() ? `focused ${$isNodeSelection(selection) ? 'draggable' : ''}` : null, src: imgSrc, altText: altText, imageRef: imageRef, width: imageDisplayWidth, height: height }), renderImageAnnotationView()] }));
|
|
309
306
|
};
|
|
310
|
-
return (_jsx(Suspense, { fallback: placeholder, children: _jsxs(_Fragment, { children: [src ? (_jsxs(ImageContainer, { draggable: draggable, children: [renderImage(src), editor.isEditable() && (_jsx(ImageAnnotation, { editing: markerEditing, setEditing: setMarkerEditing, imageRef: imageRef, markerState: markerState, onChange: setMarkerState }))] })) : (placeholder), showCaption && (_jsx("div", { className: "image-caption-container", children: _jsxs(LexicalNestedComposer, { initialEditor: caption, children: [_jsx(AutoFocusPlugin, {}), _jsx(
|
|
307
|
+
return (_jsx(Suspense, { fallback: placeholder, children: _jsxs(_Fragment, { children: [src ? (_jsxs(ImageContainer, { draggable: draggable, children: [renderImage(src), editor.isEditable() && (_jsx(ImageAnnotation, { editing: markerEditing, setEditing: setMarkerEditing, imageRef: imageRef, markerState: markerState, onChange: setMarkerState }))] })) : (placeholder), showCaption && (_jsx("div", { className: "image-caption-container", children: _jsxs(LexicalNestedComposer, { initialEditor: caption, children: [_jsx(AutoFocusPlugin, {}), _jsx(LinkPlugin, {}), _jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "ImageNode__contentEditable" }), placeholder: editor.isEditable() ? (_jsx(Placeholder, { className: "ImageNode__placeholder", children: "Enter a caption..." })) : null, ErrorBoundary: LexicalErrorBoundary })] }) })), resizable && $isNodeSelection(selection) && isFocused && (_jsxs(_Fragment, { children: [_jsx(ImageResizer, { showCaption: showCaption, setShowCaption: setShowCaption, editor: editor, buttonRef: buttonRef, imageRef: imageFrameRef.current ? imageFrameRef : imageRef,
|
|
311
308
|
// maxWidth={maxWidth}
|
|
312
309
|
onResizeStart: onResizeStart, onResizeEnd: onResizeEnd, captionsEnabled: false }), _jsxs(ImageEnhancer, { frame: frame, sizeMode: width === 'inherit' ? sizeMode || 'best-fit' : undefined, onSizeModeChange: setSizeMode, onFrameChange: setFrame, children: [_jsx(Button, { disabled: !!isDeviceFrameUsed, onClick: () => setMarkerEditing(true), variant: "outlined", size: "small", sx: {
|
|
313
310
|
minWidth: 36,
|
|
@@ -11,7 +11,18 @@ const createCustomTheme = (theme) => {
|
|
|
11
11
|
`);
|
|
12
12
|
const paragraph = css(
|
|
13
13
|
// use default theme's paragraph style
|
|
14
|
-
defaultTheme.paragraph,
|
|
14
|
+
defaultTheme.paragraph, `
|
|
15
|
+
margin-bottom: 20px;
|
|
16
|
+
&:has(img) {
|
|
17
|
+
display: flex;
|
|
18
|
+
margin: 32px 0;
|
|
19
|
+
line-height: 1;
|
|
20
|
+
div {
|
|
21
|
+
display: flex;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
line-height: 1.75;
|
|
25
|
+
`,
|
|
15
26
|
// 兼容旧 table 水平滚动条问题 (与 useResponsiveTable 配合使用)
|
|
16
27
|
`
|
|
17
28
|
&:has(table) {
|
|
@@ -68,7 +79,7 @@ const createCustomTheme = (theme) => {
|
|
|
68
79
|
const link = css(`
|
|
69
80
|
color: inherit;
|
|
70
81
|
text-decoration: none;
|
|
71
|
-
border-bottom: 1px solid ${palette.primary.
|
|
82
|
+
border-bottom: 1px solid ${palette.primary.main};
|
|
72
83
|
&:hover {
|
|
73
84
|
border-bottom-width: 2px;
|
|
74
85
|
}
|
|
@@ -99,12 +110,12 @@ const createCustomTheme = (theme) => {
|
|
|
99
110
|
const textCode = css(theme.typography.body1, {
|
|
100
111
|
fontSize: '.875em',
|
|
101
112
|
fontWeight: 500,
|
|
102
|
-
borderRadius: '.
|
|
103
|
-
border: `1px solid ${palette.grey[
|
|
113
|
+
borderRadius: '.25rem',
|
|
114
|
+
border: `1px solid ${palette.grey[200]}`,
|
|
104
115
|
padding: '1px .375rem',
|
|
105
116
|
fontFamily: 'Menlo, Consolas, Monaco, monospace',
|
|
106
117
|
fontVariantLigatures: 'none',
|
|
107
|
-
backgroundColor: palette.grey[
|
|
118
|
+
backgroundColor: palette.grey[50],
|
|
108
119
|
...(palette.mode === 'dark' && { color: palette.grey[800] }),
|
|
109
120
|
});
|
|
110
121
|
const olCommon = {
|
|
@@ -228,7 +239,8 @@ const createCustomTheme = (theme) => {
|
|
|
228
239
|
color: #fff;
|
|
229
240
|
font-family: Menlo, Consolas, Monaco, monospace;
|
|
230
241
|
display: block;
|
|
231
|
-
padding: 16px;
|
|
242
|
+
// padding: 16px;
|
|
243
|
+
padding: 16px 16px 16px 52px;
|
|
232
244
|
line-height: 1.53;
|
|
233
245
|
font-size: 13px;
|
|
234
246
|
margin: 0;
|
|
@@ -242,7 +254,17 @@ const createCustomTheme = (theme) => {
|
|
|
242
254
|
border: 1px solid #27272;
|
|
243
255
|
|
|
244
256
|
&:before {
|
|
245
|
-
|
|
257
|
+
content: attr(data-gutter);
|
|
258
|
+
position: absolute;
|
|
259
|
+
background-color: #18181b;
|
|
260
|
+
left: 0;
|
|
261
|
+
top: 0;
|
|
262
|
+
// border-right: 1px solid #ccc;
|
|
263
|
+
padding: 16px 8px;
|
|
264
|
+
color: #777;
|
|
265
|
+
white-space: pre-wrap;
|
|
266
|
+
text-align: right;
|
|
267
|
+
min-width: 25px;
|
|
246
268
|
}
|
|
247
269
|
`;
|
|
248
270
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/editor",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.15",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"ufo": "^1.5.4",
|
|
69
69
|
"url-join": "^4.0.1",
|
|
70
70
|
"zustand": "^4.5.5",
|
|
71
|
-
"@blocklet/pdf": "^2.4.
|
|
71
|
+
"@blocklet/pdf": "^2.4.15"
|
|
72
72
|
},
|
|
73
73
|
"devDependencies": {
|
|
74
74
|
"@babel/core": "^7.25.2",
|