@blocklet/editor 2.4.122 → 2.4.124

package/lib/config.d.ts

@@ -27,6 +27,7 @@ export interface EditorConfig {
     openLinkInNewTab?: boolean;
     characterLimitConfig?: CharacterLimitConfig;
     simpleImageComponent?: boolean;
+    enableSafeAreaPlugin?: boolean;
 }
 export declare function EditorConfigProvider({ children, value }: {
     children: React.ReactNode;

package/lib/ext/BlockletEmbedPlugin/index.js

@@ -4,8 +4,9 @@ import { COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
 import { useEffect } from 'react';
 import { AutoEmbedOption } from '@lexical/react/LexicalAutoEmbedPlugin';
 import pick from 'lodash/pick';
+import { joinURL } from 'ufo';
 import { $createBlockletEmbedNode, BlockletEmbedNode } from './BlockletEmbedNode';
-import { $getLinkNode, joinUrl } from '../utils';
+import { $getLinkNode } from '../utils';
 export const INSERT_BLOCKLET_EMBED_COMMAND = createCommand('INSERT_BLOCKLET_EMBED_COMMAND');
 const parseBlockletEmbedUrl = async (blockletEmbedEndpoint, url) => {
     const urlObj = new URL(blockletEmbedEndpoint);
@@ -14,7 +15,7 @@ const parseBlockletEmbedUrl = async (blockletEmbedEndpoint, url) => {
     const data = await response.json();
     const embed = data?.embed?.[0];
     if (embed) {
-        const embedUrl = joinUrl(data.origin, embed.url);
+        const embedUrl = joinURL(data.origin, embed.url);
         return {
             id: url,
             url: embedUrl,

package/lib/ext/ImagePathFixerPlugin.d.ts

@@ -0,0 +1 @@
+export default function ImagePathFixerPlugin(): null;

package/lib/ext/ImagePathFixerPlugin.js

@@ -0,0 +1,31 @@
+import { useLayoutEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { joinURL } from 'ufo';
+import { discussKitUploadsUrl } from './utils';
+import { ImageNode } from '../main/nodes/ImageNode';
+const originalExportJSON = ImageNode.prototype.exportJSON;
+const ensureLeadingSlash = (str) => (str.startsWith('/') ? str : `/${str}`);
+ImageNode.prototype.exportJSON = function exportJSON() {
+    const json = originalExportJSON.call(this);
+    // 保存 editor content 时恢复 image src (剥除 discussKitUploadsUrl)
+    if (json.src && json.src.startsWith(discussKitUploadsUrl)) {
+        json.src = json.src.replace(discussKitUploadsUrl, '');
+        json.src = ensureLeadingSlash(json.src);
+    }
+    return json;
+};
+function imageNodeTransform(node) {
+    const targetNode = node;
+    const src = targetNode.getSrc();
+    // 仅处理以 "/" 为前缀的 image src, 并且避免重复处理
+    if (src?.startsWith('/') && !src.startsWith(discussKitUploadsUrl)) {
+        targetNode.setSrc(joinURL(discussKitUploadsUrl, src));
+    }
+}
+export default function ImagePathFixerPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useLayoutEffect(() => {
+        return editor.registerNodeTransform(ImageNode, imageNodeTransform);
+    }, [editor]);
+    return null;
+}

package/lib/ext/VideoPathFixerPlugin.d.ts

@@ -0,0 +1 @@
+export declare function VideoPathFixerPlugin(): null;

package/lib/ext/VideoPathFixerPlugin.js

@@ -0,0 +1,31 @@
+import { useLayoutEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { joinURL } from 'ufo';
+import { discussKitUploadsUrl } from './utils';
+import { VideoNode } from './VideoPlugin/VideoNode';
+const originalExportJSON = VideoNode.prototype.exportJSON;
+const ensureLeadingSlash = (str) => (str.startsWith('/') ? str : `/${str}`);
+VideoNode.prototype.exportJSON = function exportJSON() {
+    const json = originalExportJSON.call(this);
+    // 保存 editor content 时恢复 src (剥除 discussKitUploadsUrl)
+    if (json.src && json.src.startsWith(discussKitUploadsUrl)) {
+        json.src = json.src.replace(discussKitUploadsUrl, '');
+        json.src = ensureLeadingSlash(json.src);
+    }
+    return json;
+};
+function VideoNodeTransform(node) {
+    const targetNode = node;
+    const src = targetNode.getSrc();
+    // 仅处理以 "/" 为前缀的 image src, 并且避免重复处理
+    if (src?.startsWith('/') && !src.startsWith(discussKitUploadsUrl)) {
+        targetNode.setSrc(joinURL(discussKitUploadsUrl, src));
+    }
+}
+export function VideoPathFixerPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useLayoutEffect(() => {
+        return editor.registerNodeTransform(VideoNode, VideoNodeTransform);
+    }, [editor]);
+    return null;
+}

package/lib/ext/utils.d.ts

@@ -1,10 +1,10 @@
 import { LinkNode } from '@lexical/link';
 import { type LexicalEditor } from 'lexical';
-export declare function joinUrl(...paths: string[]): string;
 export declare function isValidUrl(url: string): boolean;
 export declare const safeParseJSON: (json: string, defaultValue?: any) => any;
 export declare const getBlockletMountPointInfo: (name: string) => any;
 export declare const discussKitMountPoint: any;
+export declare const discussKitUploadsUrl: string;
 export declare const blockletExists: (name: string) => boolean;
 export declare const fetchOpenGraphInfo: (openGraphEndpoint: string, url: string) => Promise<{
     url: any;

package/lib/ext/utils.js

@@ -1,12 +1,7 @@
 import { $isLinkNode, LinkNode } from '@lexical/link';
 import { $getNearestNodeOfType } from '@lexical/utils';
 import { $getSelection, $isRangeSelection } from 'lexical';
-function dedupeSlashes(path) {
-    return path.replace(/([^:]\/)\/+/g, '$1');
-}
-export function joinUrl(...paths) {
-    return dedupeSlashes(paths.join('/'));
-}
+import { joinURL } from 'ufo';
 export function isValidUrl(url) {
     try {
         // eslint-disable-next-line no-new
@@ -29,6 +24,7 @@ export const getBlockletMountPointInfo = (name) => {
     return window.blocklet?.componentMountPoints?.find((x) => x.name === name);
 };
 export const discussKitMountPoint = window.blocklet?.componentMountPoints?.find((x) => x.did === 'z8ia1WEiBZ7hxURf6LwH21Wpg99vophFwSJdu')?.mountPoint || '/';
+export const discussKitUploadsUrl = joinURL(discussKitMountPoint || '', '/uploads');
 export const blockletExists = (name) => {
     return !!getBlockletMountPointInfo(name);
 };

package/lib/lexical-utils/index.d.ts

@@ -7,6 +7,7 @@
  *
  */
 import { EditorState, ElementNode, Klass, LexicalEditor, LexicalNode } from 'lexical';
+import { InitialEditorStateType } from '@lexical/react/LexicalComposer';
 export type DFSNode = Readonly<{
     depth: number;
     node: LexicalNode;
@@ -41,4 +42,5 @@ export declare function mergeRegister(...func: Array<Func>): () => void;
 export declare function registerNestedElementResolver<N extends ElementNode>(editor: LexicalEditor, targetNode: Klass<N>, cloneNode: (from: N) => N, handleOverlap: (from: N, to: N) => void): () => void;
 export declare function $restoreEditorState(editor: LexicalEditor, editorState: EditorState): void;
 export declare function $wrapNodeInElement(node: LexicalNode, createElementNode: () => ElementNode): ElementNode;
+export declare function getInitialEditorState(content: string, markdown?: boolean): InitialEditorStateType;
 export {};

package/lib/lexical-utils/index.js

@@ -9,7 +9,9 @@
  *
  */
 import { $getRoot, $isElementNode, $setSelection, } from 'lexical';
+import { $convertFromMarkdownString } from '@lexical/markdown';
 import invariant from '../shared/invariant';
+import { PLAYGROUND_TRANSFORMERS } from '../main/plugins/MarkdownTransformers';
 export function addClassNamesToElement(element, ...classNames) {
     classNames.forEach((className) => {
         if (typeof className === 'string') {
@@ -224,3 +226,18 @@ export function $wrapNodeInElement(node, createElementNode) {
     elementNode.append(node);
     return elementNode;
 }
+export function getInitialEditorState(content, markdown) {
+    if (markdown) {
+        return () => $convertFromMarkdownString(content, PLAYGROUND_TRANSFORMERS);
+    }
+    try {
+        const parsed = JSON.parse(content);
+        if (parsed && typeof parsed === 'object') {
+            return content;
+        }
+        return () => $convertFromMarkdownString(content, PLAYGROUND_TRANSFORMERS);
+    }
+    catch (e) {
+        return () => $convertFromMarkdownString(content, PLAYGROUND_TRANSFORMERS);
+    }
+}

package/lib/main/editor.js

@@ -75,6 +75,9 @@ import { PagesKitComponentPlugin } from '../ext/PagesKitComponent/PagesKitCompon
 import { EditorHolderPlugin } from '../ext/EditorHolderPlugin';
 import { StyledEditorContent } from './styled-editor-content';
 import { CodeCopyPlugin } from '../ext/CodeCopyPlugin';
+import { VideoPathFixerPlugin } from '../ext/VideoPathFixerPlugin';
+import ImagePathFixerPlugin from '../ext/ImagePathFixerPlugin';
+import { SafeAreaPlugin } from '../ext/SafeAreaPlugin';
 export default function Editor({ children, prepend, placeholder, onChange, autoFocus = true, showToolbar = true, editorRef, onReady, enableHeadingsIdPlugin, }) {
     const [editor] = useLexicalComposerContext();
     const [editable, setEditable] = useState(false);
@@ -104,7 +107,7 @@ export default function Editor({ children, prepend, placeholder, onChange, autoF
         }
     }, [hasNodes('image'), hasUploader]);
     if (minimalMode) {
-        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('code') && _jsx(CodeCopyPlugin, {}), 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, {}), 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 && 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] }));
+        return (_jsxs(_Fragment, { children: [prepend, _jsx(VideoPathFixerPlugin, {}), _jsx(ImagePathFixerPlugin, {}), 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('code') && _jsx(CodeCopyPlugin, {}), 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, {}), 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 && 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] }));
     }
-    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, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), 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('code') && _jsx(CodeCopyPlugin, {}), 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('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] }));
+    return (_jsxs(_Fragment, { children: [prepend, _jsx(VideoPathFixerPlugin, {}), _jsx(ImagePathFixerPlugin, {}), 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, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), 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('code') && _jsx(CodeCopyPlugin, {}), 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('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 }), config.enableSafeAreaPlugin && _jsx(SafeAreaPlugin, {}), children] }));
 }

package/lib/main/index.js

@@ -13,7 +13,6 @@ import { cx } from '@emotion/css';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useCallback, useEffect, useRef } from 'react';
-import { $convertFromMarkdownString } from '@lexical/markdown';
 import { useTheme } from '@mui/material';
 import { SettingsContext } from './context/SettingsContext';
 import { SharedAutocompleteContext } from './context/SharedAutocompleteContext';
@@ -23,12 +22,12 @@ import { EditorRoot } from './editor-root';
 import PlaygroundNodes from './nodes/PlaygroundNodes';
 import { TableContext } from './plugins/TablePlugin';
 import { useCustomTheme } from './themes/customTheme';
-import { PLAYGROUND_TRANSFORMERS } from './plugins/MarkdownTransformers';
+import { getInitialEditorState } from '../lexical-utils';
 export default function BlockletEditor({ editorState, nodes = PlaygroundNodes, editable = true, markdown, ...props }) {
     const theme = useCustomTheme();
     const initialConfig = {
         namespace: 'Playground',
-        editorState: markdown && editorState ? () => $convertFromMarkdownString(editorState, PLAYGROUND_TRANSFORMERS) : editorState,
+        editorState: getInitialEditorState(editorState ?? '', markdown),
         nodes,
         editable,
         onError: (error) => {

package/lib/main/markdown-editor/editor.js

@@ -38,7 +38,7 @@ import { HeadingsIdPlugin } from '../../ext/HeadingsIdPlugin';
 import { EditorReadyPlugin } from '../../ext/EditorReadyPlugin';
 import { BlurTextPlugin } from '../../ext/BlurTextPlugin';
 import ToolbarPlugin from './plugins/ToolbarPlugin';
-import { TRANSFORMERS, IMAGE } from './transformers';
+import { PLAYGROUND_TRANSFORMERS as TRANSFORMERS, IMAGE } from '../plugins/MarkdownTransformers';
 import { MediaUrlFixerPlugin } from './plugins/MediaUrlFixerPlugin';
 import { StyledEditorContent } from '../styled-editor-content';
 export default function Editor({ children, placeholder, onChange, autoFocus = true, showToolbar = true, editorRef, onReady, enableHeadingsIdPlugin, mediaUrlPrefix, }) {

package/lib/main/markdown-editor/index.js

@@ -9,7 +9,7 @@ import { EditorRoot } from '../editor-root';
 import nodes from './nodes';
 import { useCustomTheme } from '../themes/customTheme';
 import { MarkdownEditorThemeProvider } from './theme';
-import { TRANSFORMERS } from './transformers';
+import { PLAYGROUND_TRANSFORMERS } from '../plugins/MarkdownTransformers';
 export function MarkdownEditor(props) {
     return (_jsx(MarkdownEditorThemeProvider, { children: _jsx(InnerMarkdownEditor, { ...props }) }));
 }
@@ -17,7 +17,7 @@ function InnerMarkdownEditor({ editorState, editable = true, ...props }) {
     const theme = useCustomTheme();
     const initialConfig = {
         namespace: 'MarkdownEditor',
-        editorState: editorState ? () => $convertFromMarkdownString(editorState, TRANSFORMERS) : undefined,
+        editorState: editorState ? () => $convertFromMarkdownString(editorState, PLAYGROUND_TRANSFORMERS) : undefined,
         nodes,
         editable,
         onError: (error) => {

package/lib/main/markdown-editor/plugins/MediaUrlFixerPlugin.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import joinUrl from 'url-join';
+import { joinURL } from 'ufo';
 import { $isImageNode, ImageNode } from '../../nodes/ImageNode';
 export function MediaUrlFixerPlugin({ mediaUrlPrefix, transformers, }) {
     const [editor] = useLexicalComposerContext();
@@ -26,7 +26,7 @@ export function MediaUrlFixerPlugin({ mediaUrlPrefix, transformers, }) {
             const src = targetNode.getSrc();
             // 仅处理以 "/" 为前缀的 image src, 并且避免重复处理
             if (src?.startsWith('/') && !src.startsWith(mediaUrlPrefix)) {
-                targetNode.setSrc(joinUrl(mediaUrlPrefix, src));
+                targetNode.setSrc(joinURL(mediaUrlPrefix, src));
             }
         }
         return editor.registerNodeTransform(ImageNode, imageNodeTransform);

package/lib/main/nodes/ImageComponent.js

@@ -18,7 +18,7 @@ import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection'
 import { mergeRegister } from '@lexical/utils';
 import { Alert, Box, Button, Dialog, LinearProgress, Skeleton } from '@mui/material';
 import { $getNodeByKey, $getSelection, $isNodeSelection, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
-import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
+import { Suspense, useCallback, useEffect, useRef, useState, lazy } from 'react';
 import { createPortal } from 'react-dom';
 import { useEditorConfig } from '../../config';
 import { useSettings } from '../context/SettingsContext';
@@ -28,12 +28,14 @@ import ImageResizer from '../ui/ImageResizer';
 import Placeholder from '../ui/Placeholder';
 import { $isImageNode } from './ImageNode';
 import './ImageNode.css';
-import { ImageAnnotation, ImageAnnotationView, ImageEnhancer } from '../ui/ImageEnhancer';
 import { useImageDisplayWidth } from '../hooks/hooks';
 import { useMediumZoom } from '../hooks/medium-zoom';
 import { FrameMockup, isDeviceFrame } from '../ui/FrameMockup';
 import { useSafeArea } from '../../ext/SafeAreaPlugin';
 import { UPDATE_BUSY_COMMAND } from '../../ext/BusyPlugin';
+const ImageAnnotation = lazy(() => import('../ui/ImageEnhancer').then((module) => ({ default: module.ImageAnnotation })));
+const ImageAnnotationView = lazy(() => import('../ui/ImageEnhancer').then((module) => ({ default: module.ImageAnnotationView })));
+const ImageEnhancer = lazy(() => import('../ui/ImageEnhancer').then((module) => ({ default: module.ImageEnhancer })));
 const imageCache = new Set();
 // Min size that require user confirm to upload image
 const REQUIRE_CONFIRM_UPLOAD_SIZE = 10 << 20;

package/lib/main/viewer/index.js

@@ -2,19 +2,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import '../index.css';
 import { cx } from '@emotion/css';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
-import { $convertFromMarkdownString } from '@lexical/markdown';
 import { useTheme } from '@mui/material';
 import PlaygroundNodes from '../nodes/PlaygroundNodes';
 import { useCustomTheme } from '../themes/customTheme';
-import { PLAYGROUND_TRANSFORMERS } from '../plugins/MarkdownTransformers';
 import { EditorViewer } from './viewer';
 import { EditorRoot } from '../editor-root';
+import { getInitialEditorState } from '../../lexical-utils';
 export function BlockletEditorViewer({ editorState, markdown, ...props }) {
     const muiTheme = useTheme();
     const theme = useCustomTheme();
     const initialConfig = {
         namespace: 'Playground',
-        editorState: markdown && editorState ? () => $convertFromMarkdownString(editorState, PLAYGROUND_TRANSFORMERS) : editorState,
+        editorState: getInitialEditorState(editorState ?? '', markdown),
         nodes: PlaygroundNodes,
         editable: false,
         onError: (error) => {

package/lib/main/viewer/viewer.js

@@ -23,8 +23,10 @@ import { EditorHolderPlugin } from '../../ext/EditorHolderPlugin';
 import { StyledEditorContent } from '../styled-editor-content';
 import { CodeCopyPlugin } from '../../ext/CodeCopyPlugin';
 import CheckboxPlugin from '../../ext/CheckboxPlugin';
+import { VideoPathFixerPlugin } from '../../ext/VideoPathFixerPlugin';
+import ImagePathFixerPlugin from '../../ext/ImagePathFixerPlugin';
 export function EditorViewer({ children, prepend, onChange, editorRef, onReady, enableHeadingsIdPlugin, onCheckboxChange, }) {
     useResponsiveTable();
     const hasNodes = useHasNodes();
-    return (_jsxs(_Fragment, { children: [prepend, _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('code') && _jsx(CodeCopyPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), hasNodes('link') && _jsx(LinkPlugin, {}), _jsx(BlurTextPlugin, {}), 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] }));
+    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('code') && _jsx(CodeCopyPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), hasNodes('link') && _jsx(LinkPlugin, {}), _jsx(BlurTextPlugin, {}), 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] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.4.122",
+  "version": "2.4.124",
   "main": "lib/index.js",
   "sideEffects": false,
   "publishConfig": {
@@ -73,7 +73,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "2.4.122"
+    "@blocklet/pdf": "2.4.124"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

package/lib/main/markdown-editor/transformers.d.ts

@@ -1,12 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import { ElementTransformer, TextMatchTransformer, Transformer } from '@lexical/markdown';
-export declare const HR: ElementTransformer;
-export declare const IMAGE: TextMatchTransformer;
-export declare const TABLE: ElementTransformer;
-export declare const TRANSFORMERS: Array<Transformer>;

package/lib/main/markdown-editor/transformers.js

@@ -1,185 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import { $convertFromMarkdownString, $convertToMarkdownString, CHECK_LIST, ELEMENT_TRANSFORMERS, MULTILINE_ELEMENT_TRANSFORMERS, TEXT_FORMAT_TRANSFORMERS, TEXT_MATCH_TRANSFORMERS, } from '@lexical/markdown';
-import { $createHorizontalRuleNode, $isHorizontalRuleNode, HorizontalRuleNode, } from '@lexical/react/LexicalHorizontalRuleNode';
-import { $createTableCellNode, $createTableNode, $createTableRowNode, $isTableCellNode, $isTableNode, $isTableRowNode, TableCellHeaderStates, TableCellNode, TableNode, TableRowNode, } from '@lexical/table';
-import { $isParagraphNode, $isTextNode } from 'lexical';
-import { $createImageNode, $isImageNode, ImageNode } from '../nodes/ImageNode';
-export const HR = {
-    dependencies: [HorizontalRuleNode],
-    export: (node) => {
-        return $isHorizontalRuleNode(node) ? '***' : null;
-    },
-    regExp: /^(---|\*\*\*|___)\s?$/,
-    replace: (parentNode, _1, _2, isImport) => {
-        const line = $createHorizontalRuleNode();
-        // TODO: Get rid of isImport flag
-        if (isImport || parentNode.getNextSibling() != null) {
-            parentNode.replace(line);
-        }
-        else {
-            parentNode.insertBefore(line);
-        }
-        line.selectNext();
-    },
-    type: 'element',
-};
-export const IMAGE = {
-    dependencies: [ImageNode],
-    export: (node) => {
-        if (!$isImageNode(node)) {
-            return null;
-        }
-        return `![${node.getAltText()}](${node.getSrc()})`;
-    },
-    importRegExp: /!(?:\[([^[]*)\])(?:\(([^(]+)\))/,
-    regExp: /!(?:\[([^[]*)\])(?:\(([^(]+)\))$/,
-    replace: (textNode, match) => {
-        const [, altText, src] = match;
-        const imageNode = $createImageNode({
-            altText,
-            maxWidth: 800,
-            src,
-        });
-        textNode.replace(imageNode);
-    },
-    trigger: ')',
-    type: 'text-match',
-};
-// Very primitive table setup
-const TABLE_ROW_REG_EXP = /^(?:\|)(.+)(?:\|)\s?$/;
-const TABLE_ROW_DIVIDER_REG_EXP = /^(\| ?:?-*:? ?)+\|\s?$/;
-export const TABLE = {
-    dependencies: [TableNode, TableRowNode, TableCellNode],
-    export: (node) => {
-        if (!$isTableNode(node)) {
-            return null;
-        }
-        const output = [];
-        for (const row of node.getChildren()) {
-            const rowOutput = [];
-            if (!$isTableRowNode(row)) {
-                // eslint-disable-next-line no-continue
-                continue;
-            }
-            let isHeaderRow = false;
-            for (const cell of row.getChildren()) {
-                // It's TableCellNode so it's just to make flow happy
-                if ($isTableCellNode(cell)) {
-                    rowOutput.push($convertToMarkdownString(TRANSFORMERS, cell).replace(/\n/g, '\\n').trim());
-                    if (cell.__headerState === TableCellHeaderStates.ROW) {
-                        isHeaderRow = true;
-                    }
-                }
-            }
-            output.push(`| ${rowOutput.join(' | ')} |`);
-            if (isHeaderRow) {
-                output.push(`| ${rowOutput.map((_) => '---').join(' | ')} |`);
-            }
-        }
-        return output.join('\n');
-    },
-    regExp: TABLE_ROW_REG_EXP,
-    replace: (parentNode, _1, match) => {
-        // Header row
-        if (TABLE_ROW_DIVIDER_REG_EXP.test(match[0])) {
-            const table = parentNode.getPreviousSibling();
-            if (!table || !$isTableNode(table)) {
-                return;
-            }
-            const rows = table.getChildren();
-            const lastRow = rows[rows.length - 1];
-            if (!lastRow || !$isTableRowNode(lastRow)) {
-                return;
-            }
-            // Add header state to row cells
-            lastRow.getChildren().forEach((cell) => {
-                if (!$isTableCellNode(cell)) {
-                    return;
-                }
-                cell.setHeaderStyles(TableCellHeaderStates.ROW, TableCellHeaderStates.ROW);
-            });
-            // Remove line
-            parentNode.remove();
-            return;
-        }
-        const matchCells = mapToTableCells(match[0]);
-        if (matchCells == null) {
-            return;
-        }
-        const rows = [matchCells];
-        let sibling = parentNode.getPreviousSibling();
-        let maxCells = matchCells.length;
-        while (sibling) {
-            if (!$isParagraphNode(sibling)) {
-                break;
-            }
-            if (sibling.getChildrenSize() !== 1) {
-                break;
-            }
-            const firstChild = sibling.getFirstChild();
-            if (!$isTextNode(firstChild)) {
-                break;
-            }
-            const cells = mapToTableCells(firstChild.getTextContent());
-            if (cells == null) {
-                break;
-            }
-            maxCells = Math.max(maxCells, cells.length);
-            rows.unshift(cells);
-            const previousSibling = sibling.getPreviousSibling();
-            sibling.remove();
-            sibling = previousSibling;
-        }
-        const table = $createTableNode();
-        for (const cells of rows) {
-            const tableRow = $createTableRowNode();
-            table.append(tableRow);
-            for (let i = 0; i < maxCells; i++) {
-                tableRow.append(i < cells.length ? cells[i] : $createTableCell(''));
-            }
-        }
-        const previousSibling = parentNode.getPreviousSibling();
-        if ($isTableNode(previousSibling) && getTableColumnsSize(previousSibling) === maxCells) {
-            previousSibling.append(...table.getChildren());
-            parentNode.remove();
-        }
-        else {
-            parentNode.replace(table);
-        }
-        table.selectEnd();
-    },
-    type: 'element',
-};
-function getTableColumnsSize(table) {
-    const row = table.getFirstChild();
-    return $isTableRowNode(row) ? row.getChildrenSize() : 0;
-}
-const $createTableCell = (textContent) => {
-    textContent = textContent.replace(/\\n/g, '\n');
-    const cell = $createTableCellNode(TableCellHeaderStates.NO_STATUS);
-    $convertFromMarkdownString(textContent, TRANSFORMERS, cell);
-    return cell;
-};
-const mapToTableCells = (textContent) => {
-    const match = textContent.match(TABLE_ROW_REG_EXP);
-    if (!match || !match[1]) {
-        return null;
-    }
-    return match[1].split('|').map((text) => $createTableCell(text));
-};
-export const TRANSFORMERS = [
-    TABLE,
-    HR,
-    IMAGE,
-    CHECK_LIST,
-    ...ELEMENT_TRANSFORMERS,
-    ...MULTILINE_ELEMENT_TRANSFORMERS,
-    ...TEXT_FORMAT_TRANSFORMERS,
-    ...TEXT_MATCH_TRANSFORMERS,
-];