@blocklet/editor 1.6.234 → 1.6.236

package/lib/ext/FilePlugin/FileNode.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import { DecoratorNode } from 'lexical';
+export declare const getAbsoluteUrl: ({ fileUrl, name }: {
+    fileUrl: string;
+    name?: string | undefined;
+}) => string;
+export interface FilePayload {
+    key?: NodeKey;
+    src: string;
+    name?: string;
+    mimetype?: string;
+    width?: number | string;
+    height?: number | string;
+}
+export type SerializedFileNode = Spread<{
+    height?: number | string;
+    src: string;
+    name?: string;
+    mimetype?: string;
+    width?: number | string;
+}, SerializedLexicalNode>;
+export declare class FileNode extends DecoratorNode<JSX.Element> {
+    __src: string;
+    __name?: string;
+    __mimetype?: string;
+    __width: 'inherit' | number | string;
+    __height: 'inherit' | number | string;
+    static getType(): string;
+    static clone(node: FileNode): FileNode;
+    static importJSON(serializedNode: SerializedFileNode): FileNode;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    constructor(src: string, name?: string, mimetype?: string, width?: 'inherit' | number | string, height?: 'inherit' | number | string, key?: NodeKey);
+    exportJSON(): SerializedFileNode;
+    setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): false;
+    getSrc(): string;
+    setSrc(src: string): void;
+    decorate(): JSX.Element;
+}
+export declare function $createFileNode({ height, src, name, mimetype, width, key }: FilePayload): FileNode;
+export declare function $isFileNode(node: LexicalNode | null | undefined): node is FileNode;

package/lib/ext/FilePlugin/FileNode.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Tooltip } from '@mui/material';
+import { useEffect, Suspense, useState } from 'react';
+import { Link } from 'react-router-dom';
+import joinURL from 'url-join';
+import { Icon } from '@iconify/react';
+import { $applyNodeReplacement, DecoratorNode } from 'lexical';
+import mime from 'mime-types';
+import TablerFileIcon from '@iconify/icons-tabler/file';
+import { withQuery } from 'ufo';
+const iconSize = 80;
+const baseColor = 'primary.main';
+const FileComponent = ({ src, mimetype, name }) => {
+    const [ext, setExt] = useState('file');
+    useEffect(() => {
+        setExt(mime.extension(mimetype || '') || 'file');
+    }, [mimetype]);
+    return (_jsx(Tooltip, { title: name, placement: "top", children: _jsxs(Box, { component: Link, to: src, target: "_blank", sx: {
+                // remove a tag underline and color
+                color: baseColor,
+                textDecoration: 'none',
+                display: 'inline-flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: 1,
+                pt: 1.25,
+                mt: 1,
+                border: 2,
+                borderColor: baseColor,
+                borderRadius: 1,
+                transition: 'all 0.3s',
+                userSelect: 'none',
+                ':hover': {
+                    opacity: 0.75,
+                },
+            }, children: [_jsxs(Box, { sx: {
+                        position: 'relative',
+                        display: 'inline-flex',
+                    }, children: [_jsx(Icon, { icon: TablerFileIcon, style: { fontSize: iconSize } }), _jsx(Box, { sx: {
+                                position: 'absolute',
+                                left: 0,
+                                right: 0,
+                                top: '50%',
+                                textAlign: 'center',
+                                margin: 'auto',
+                                fontWeight: 900,
+                                maxWidth: iconSize * 0.45,
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                fontSize: 14,
+                            }, children: ext })] }), _jsx(Box, { sx: {
+                        bgcolor: baseColor,
+                        color: 'white',
+                        px: 1,
+                        lineHeight: 2,
+                        fontSize: 13,
+                        maxWidth: iconSize * 1.5,
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        display: 'inline-block',
+                        '@keyframes scroll': {
+                            '0%': {
+                                ml: 0,
+                                transform: 'translateX(0)',
+                            },
+                            '100%': {
+                                ml: '100%',
+                                transform: 'translateX(-100%)',
+                            },
+                        },
+                    }, children: _jsx(Box, { sx: {
+                            animation: 'scroll linear 5s alternate infinite',
+                            float: 'left',
+                        }, children: name }) })] }) }));
+};
+export const getAbsoluteUrl = ({ fileUrl, name }) => {
+    if (!fileUrl || typeof fileUrl !== 'string') {
+        return '';
+    }
+    if (/^https?:\/\//.test(fileUrl)) {
+        return withQuery(fileUrl, {
+            filename: name,
+        });
+    }
+    // @ts-ignore
+    const { componentMountPoints = [] } = window.blocklet;
+    const mediaKit = componentMountPoints.find((x) => x.did === 'z8ia1mAXo8ZE7ytGF36L5uBf9kD2kenhqFGp9');
+    const realUrl = mediaKit ? joinURL(window.location.origin, mediaKit.mountPoint || '/', '/uploads', fileUrl) : fileUrl;
+    return withQuery(realUrl, {
+        filename: name,
+    });
+};
+function convertFileElement(domNode) {
+    if (domNode instanceof HTMLObjectElement) {
+        // @ts-ignore
+        const { data, width, height, type, alt } = domNode;
+        const node = $createFileNode({ height, width, src: data, mimetype: type, name: alt });
+        return { node };
+    }
+    return null;
+}
+export class FileNode extends DecoratorNode {
+    __src;
+    __name;
+    __mimetype;
+    __width;
+    __height;
+    static getType() {
+        return 'file';
+    }
+    static clone(node) {
+        return new FileNode(node.__src, node.__name, node.__mimetype, node.__width, node.__height, node.__key);
+    }
+    static importJSON(serializedNode) {
+        const { height, width, src, mimetype, name } = serializedNode;
+        const node = $createFileNode({
+            height,
+            src,
+            width,
+            mimetype,
+            name,
+        });
+        return node;
+    }
+    exportDOM() {
+        const element = document.createElement('object');
+        element.setAttribute('data', this.__src);
+        element.setAttribute('width', this.__width.toString());
+        element.setAttribute('height', this.__height.toString());
+        element.setAttribute('type', this.__mimetype || 'image/png');
+        element.setAttribute('loading', 'lazy');
+        element.setAttribute('alt', this.__name || '');
+        return { element };
+    }
+    static importDOM() {
+        return {
+            object: (node) => ({
+                conversion: convertFileElement,
+                priority: 0,
+            }),
+        };
+    }
+    constructor(src, name, mimetype, width, height, key) {
+        super(key);
+        this.__src = src;
+        this.__name = name;
+        this.__mimetype = mimetype;
+        this.__width = width || 'inherit';
+        this.__height = height || 'inherit';
+    }
+    exportJSON() {
+        return {
+            height: this.__height === 'inherit' ? 0 : this.__height,
+            src: this.getSrc(),
+            type: 'file',
+            version: 1,
+            width: this.__width === 'inherit' ? 0 : this.__width,
+            name: this.__name,
+            mimetype: this.__mimetype,
+        };
+    }
+    setWidthAndHeight(width, height) {
+        const writable = this.getWritable();
+        writable.__width = width;
+        writable.__height = height;
+    }
+    createDOM(config) {
+        const span = document.createElement('span');
+        return span;
+    }
+    updateDOM() {
+        return false;
+    }
+    getSrc() {
+        return this.__src;
+    }
+    setSrc(src) {
+        const writable = this.getWritable();
+        writable.__src = src;
+    }
+    decorate() {
+        return (_jsx(Suspense, { fallback: null, children: _jsx(FileComponent, { src: getAbsoluteUrl({
+                    fileUrl: this.__src,
+                    name: this.__name,
+                }), mimetype: this.__mimetype, name: this.__name }) }));
+    }
+}
+export function $createFileNode({ height, src, name, mimetype, width, key }) {
+    return $applyNodeReplacement(new FileNode(src, name, mimetype, width, height, key));
+}
+export function $isFileNode(node) {
+    return node instanceof FileNode;
+}

package/lib/ext/FilePlugin/FilePlugin.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { LexicalCommand } from 'lexical';
+import { FilePayload } from './FileNode';
+export type InsertFilePayload = Readonly<FilePayload>;
+export declare const INSERT_FILE_COMMAND: LexicalCommand<InsertFilePayload>;
+export declare function FilePlugin(): JSX.Element | null;
+export declare const isFile: (filename: string) => string | undefined;

package/lib/ext/FilePlugin/FilePlugin.js

@@ -0,0 +1,27 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $wrapNodeInElement, mergeRegister } from '@lexical/utils';
+import { $createParagraphNode, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, createCommand, } from 'lexical';
+import { useEffect } from 'react';
+import { $createFileNode, FileNode } from './FileNode';
+export const INSERT_FILE_COMMAND = createCommand('INSERT_FILE_COMMAND');
+export function FilePlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([FileNode])) {
+            throw new Error('FilePlugin: FileNode not registered on editor');
+        }
+        return mergeRegister(editor.registerCommand(INSERT_FILE_COMMAND, (payload) => {
+            const fileNode = $createFileNode(payload);
+            $insertNodes([fileNode]);
+            if ($isRootOrShadowRoot(fileNode.getParentOrThrow())) {
+                $wrapNodeInElement(fileNode, $createParagraphNode).selectEnd();
+            }
+            return true;
+        }, COMMAND_PRIORITY_EDITOR));
+    }, [editor]);
+    return null;
+}
+export const isFile = (filename) => {
+    const ext = filename.split('.').pop();
+    return ext;
+};

package/lib/ext/FilePlugin/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FilePlugin';
+export { FileNode } from './FileNode';

package/lib/ext/FilePlugin/index.js

@@ -0,0 +1,2 @@
+export * from './FilePlugin';
+export { FileNode } from './FileNode';

package/lib/ext/PagesKitComponent/PagesKitComponentRenderer.js

@@ -30,7 +30,7 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
     };
     useEffect(() => {
         const load = async () => {
-            const state = customComponentStates.getState();
+            const state = customComponentStates().getState();
             await state.loadComponents({
                 mode,
                 locale,
@@ -42,7 +42,7 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
             load();
         }
     }, [id, name]);
-    const component = customComponentStates.getState()?.state?.components?.[id]?.component;
+    const component = customComponentStates().getState()?.state?.components?.[id]?.component;
     if (loading || !component) {
         return null;
     }

package/lib/ext/PdfPlugin/PdfNode.d.ts

@@ -5,24 +5,24 @@ export declare const getAbsoluteUrl: (imageUrl: string) => any;
 export interface PdfPayload {
     key?: NodeKey;
     src: string;
-    width?: number;
-    height?: number;
+    width?: number | string;
+    height?: number | string;
 }
 export type SerializedPdfNode = Spread<{
-    height?: number;
+    height?: number | string;
     src: string;
-    width?: number;
+    width?: number | string;
 }, SerializedLexicalNode>;
 export declare class PdfNode extends DecoratorNode<JSX.Element> {
     __src: string;
-    __width: 'inherit' | number;
-    __height: 'inherit' | number;
+    __width: 'inherit' | number | string;
+    __height: 'inherit' | number | string;
     static getType(): string;
     static clone(node: PdfNode): PdfNode;
     static importJSON(serializedNode: SerializedPdfNode): PdfNode;
     exportDOM(): DOMExportOutput;
     static importDOM(): DOMConversionMap | null;
-    constructor(src: string, width?: 'inherit' | number, height?: 'inherit' | number, key?: NodeKey);
+    constructor(src: string, width?: 'inherit' | number | string, height?: 'inherit' | number | string, key?: NodeKey);
     exportJSON(): SerializedPdfNode;
     setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
     createDOM(config: EditorConfig): HTMLElement;

package/lib/ext/PdfPlugin/PdfNode.js

@@ -23,9 +23,9 @@ export const getAbsoluteUrl = (imageUrl) => {
     return discussKit ? joinURL(window.location.origin, discussKit.mountPoint || '/', '/uploads', imageUrl) : imageUrl;
 };
 function convertPdfElement(domNode) {
-    if (domNode instanceof HTMLImageElement) {
-        const { src, width, height } = domNode;
-        const node = $createPdfNode({ height, src, width });
+    if (domNode instanceof HTMLObjectElement) {
+        const { data, width, height } = domNode;
+        const node = $createPdfNode({ height, src: data, width });
         return { node };
     }
     return null;
@@ -50,15 +50,17 @@ export class PdfNode extends DecoratorNode {
         return node;
     }
     exportDOM() {
-        const element = document.createElement('img');
-        element.setAttribute('src', this.__src);
+        const element = document.createElement('object');
+        element.setAttribute('data', this.__src);
         element.setAttribute('width', this.__width.toString());
         element.setAttribute('height', this.__height.toString());
+        // set pdf content-type
+        element.setAttribute('type', 'application/pdf');
         return { element };
     }
     static importDOM() {
         return {
-            img: (node) => ({
+            object: (node) => ({
                 conversion: convertPdfElement,
                 priority: 0,
             }),

package/lib/ext/VideoPlugin/VideoPlugin.d.ts

@@ -4,4 +4,4 @@ import { VideoPayload } from './VideoNode';
 export type InsertVideoPayload = Readonly<VideoPayload>;
 export declare const INSERT_VIDEO_COMMAND: LexicalCommand<InsertVideoPayload>;
 export declare function VideoPlugin(): JSX.Element | null;
-export declare const isVideo: (filename: string) => boolean | "" | undefined;
+export declare const isVideo: (src: string) => boolean;

package/lib/ext/VideoPlugin/VideoPlugin.js

@@ -21,7 +21,6 @@ export function VideoPlugin() {
     }, [editor]);
     return null;
 }
-export const isVideo = (filename) => {
-    const ext = filename.split('.').pop();
-    return ext && ['mp4', 'webm'].includes(ext);
+export const isVideo = (src) => {
+    return /\.(mp4|avi|mov|wmv|flv|mkv|mpeg|mpg|webm|ogg|ogv|3gp)$/i.test(src);
 };

package/lib/main/editor.js

@@ -79,6 +79,7 @@ import { VideoPlugin } from '../ext/VideoPlugin';
 import { TemplatePlugin } from '../ext/TemplatePlugin';
 import { CustomOnChangePlugin } from '../ext/CustomOnChangePlugin';
 import { PdfPlugin } from '../ext/PdfPlugin';
+import { FilePlugin } from '../ext/FilePlugin';
 import { BlurTextPlugin } from '../ext/BlurTextPlugin';
 import { useResponsiveTable } from './hooks/useResponsiveTable';
 import { useTranslationListener } from './hooks/useTranslationListener';
@@ -110,7 +111,7 @@ export default function Editor({ children, placeholder, onChange, autoFocus = tr
             console.warn('You need to configure uploader to use ImagesPlugin');
         }
     }, [hasNodes('image'), hasUploader]);
-    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('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('equation') && _jsx(EquationsPlugin, {}), 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] }));
+    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('equation') && _jsx(EquationsPlugin, {}), 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] }));
 }
 const EditorContent = styled.div `
   position: relative;

package/lib/main/nodes/ImageComponent.js

@@ -159,11 +159,11 @@ export default function ImageComponent({ file, src, altText, nodeKey, width, hei
             return false;
         }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_LOW));
     }, [clearSelection, editor, isResizing, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
-    const setShowCaption = () => {
+    const setShowCaption = (value) => {
         editor.update(() => {
             const node = $getNodeByKey(nodeKey);
             if ($isImageNode(node)) {
-                node.setShowCaption(true);
+                node.setShowCaption(value);
             }
         });
     };
@@ -227,7 +227,7 @@ export default function ImageComponent({ file, src, altText, nodeKey, width, hei
         }
     }, [src, file, confirmText]);
     const placeholder = objectUrl ? (_jsx(ImageContainer, { draggable: draggable, success: !!src, loading: loading, error: error, confirmText: confirmText, uploadImage: uploadImage, placeholder: objectUrl, placeholderProps: { style: { width, height, maxWidth } } })) : null;
-    return (_jsx(Suspense, { fallback: placeholder, children: _jsxs(_Fragment, { children: [src ? (_jsx(ImageContainer, { draggable: draggable, children: _jsx(LazyImage, { className: isFocused ? `focused ${$isNodeSelection(selection) ? 'draggable' : ''}` : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth }) })) : (placeholder), showCaption && (_jsx("div", { className: "image-caption-container", children: _jsxs(LexicalNestedComposer, { initialEditor: caption, children: [_jsx(AutoFocusPlugin, {}), _jsx(MentionsPlugin, {}), _jsx(LinkPlugin, {}), _jsx(EmojisPlugin, {}), _jsx(HashtagPlugin, {}), _jsx(KeywordsPlugin, {}), _jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "ImageNode__contentEditable" }), placeholder: _jsx(Placeholder, { className: "ImageNode__placeholder", children: "Enter a caption..." }), ErrorBoundary: LexicalErrorBoundary })] }) })), resizable && $isNodeSelection(selection) && isFocused && (_jsx(ImageResizer, { showCaption: showCaption, setShowCaption: setShowCaption, editor: editor, buttonRef: buttonRef, imageRef: imageRef, 
+    return (_jsx(Suspense, { fallback: placeholder, children: _jsxs(_Fragment, { children: [src ? (_jsx(ImageContainer, { draggable: draggable, children: _jsx(LazyImage, { className: isFocused ? `focused ${$isNodeSelection(selection) ? 'draggable' : ''}` : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth }) })) : (placeholder), showCaption && (_jsx("div", { className: "image-caption-container", children: _jsxs(LexicalNestedComposer, { initialEditor: caption, children: [_jsx(AutoFocusPlugin, {}), _jsx(MentionsPlugin, {}), _jsx(LinkPlugin, {}), _jsx(EmojisPlugin, {}), _jsx(HashtagPlugin, {}), _jsx(KeywordsPlugin, {}), _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 && (_jsx(ImageResizer, { showCaption: showCaption, setShowCaption: setShowCaption, editor: editor, buttonRef: buttonRef, imageRef: imageRef, 
                     // maxWidth={maxWidth}
                     onResizeStart: onResizeStart, onResizeEnd: onResizeEnd, captionsEnabled: captionsEnabled }))] }) }));
 }

package/lib/main/nodes/ImageNode.css

@@ -19,10 +19,13 @@
   outline: 0px;
   padding: 10px;
   user-select: text;
-  font-size: 12px;
+
   width: calc(100% - 20px);
   white-space: pre-wrap;
   word-break: break-word;
+  p {
+    font-size: 12px;
+  }
 }
 
 .ImageNode__placeholder {
@@ -31,12 +34,16 @@
   overflow: hidden;
   position: absolute;
   text-overflow: ellipsis;
-  top: 10px;
-  left: 10px;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  left: 0;
   user-select: none;
   white-space: nowrap;
   display: inline-block;
   pointer-events: none;
+  padding: 10px;
+  line-height: inherit;
 }
 
 .image-control-wrapper--resizing {

package/lib/main/nodes/PlaygroundNodes.js

@@ -36,6 +36,7 @@ import { GithubNode } from '../../ext/nodes/GithubNode';
 import { AlertNode } from '../../ext/Alert/AlertNode';
 import { VideoNode } from '../../ext/VideoPlugin';
 import { PdfNode } from '../../ext/PdfPlugin';
+import { FileNode } from '../../ext/FilePlugin';
 import { SubpageListingNode } from '../../ext/SubpageListingPlugin/SubpageListingNode';
 import { PagesKitComponentNode } from '../../ext/PagesKitComponent/PagesKitComponentNode';
 const PlaygroundNodes = [
@@ -76,6 +77,7 @@ const PlaygroundNodes = [
     GithubNode,
     AlertNode,
     PdfNode,
+    FileNode,
     SubpageListingNode,
     PagesKitComponentNode,
 ];

package/lib/main/plugins/ComponentPickerPlugin/index.js

@@ -26,7 +26,7 @@ import { EmbedConfigs } from '../AutoEmbedPlugin';
 import { INSERT_COLLAPSIBLE_COMMAND } from '../CollapsiblePlugin';
 import { InsertEquationDialog } from '../EquationsPlugin';
 import { INSERT_EXCALIDRAW_COMMAND } from '../ExcalidrawPlugin';
-import { INSERT_IMAGE_COMMAND } from '../ImagesPlugin';
+import { INSERT_IMAGE_COMMAND, isImage } from '../ImagesPlugin';
 import { InsertTableDialog } from '../TablePlugin';
 import { useEditorConfig } from '../../../config';
 import createPortal from '../../../components/createPortal';
@@ -35,6 +35,7 @@ import { $insertAlert } from '../../../ext/Alert/AlertPlugin';
 import { INSERT_VIDEO_COMMAND, isVideo } from '../../../ext/VideoPlugin';
 import { INSERT_TEMPLATE_COMMAND } from '../../../ext/TemplatePlugin';
 import { INSERT_PDF_COMMAND, isPdf } from '../../../ext/PdfPlugin';
+import { INSERT_FILE_COMMAND } from '../../../ext/FilePlugin';
 import { $insertSubpageListing } from '../../../ext/SubpageListingPlugin/SubpageListingPlugin';
 import { INSERT_PAGES_KIT_COMPONENT_COMMAND, usePagesKitComponents, } from '../../../ext/PagesKitComponent/PagesKitComponentPlugin';
 class ComponentPickerOption extends TypeaheadOption {
@@ -375,20 +376,27 @@ export const uploadFile = (editor) => {
             if (file.source !== 'function-upload-file') {
                 const { data } = response;
                 if (data?.filename) {
-                    if (isVideo(data.filename)) {
+                    if (isVideo(data.filename) || isVideo(data.originalname)) {
                         editor.dispatchCommand(INSERT_VIDEO_COMMAND, {
                             src: `/${data.filename}`,
                         });
                     }
-                    else if (isPdf(data.filename)) {
+                    else if (isPdf(data.filename) || isPdf(data.originalname)) {
                         editor.dispatchCommand(INSERT_PDF_COMMAND, {
                             src: `/${data.filename}`,
                         });
                     }
-                    else {
+                    else if (isImage(data.filename) || isImage(data.originalname)) {
                         editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
                             src: `/${data.filename}`,
-                            altText: 'Image',
+                            altText: data.originalname,
+                        });
+                    }
+                    else {
+                        editor.dispatchCommand(INSERT_FILE_COMMAND, {
+                            src: `/${data.filename}`,
+                            name: data.originalname,
+                            mimetype: data.mimetype,
                         });
                     }
                 }

package/lib/main/plugins/ImagesPlugin/index.d.ts

@@ -12,3 +12,4 @@ declare global {
         rangeParent?: Node;
     }
 }
+export declare const isImage: (src: string) => boolean;

package/lib/main/plugins/ImagesPlugin/index.js

@@ -31,3 +31,6 @@ export default function ImagesPlugin({ captionsEnabled }) {
 const TRANSPARENT_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
 const img = document.createElement('img');
 img.src = TRANSPARENT_IMAGE;
+export const isImage = (src) => {
+    return /\.(jpg|jpeg|png|gif|bmp|svg|webp|ico|tiff|tif|raw)$/i.test(src);
+};

package/lib/main/plugins/ToolbarPlugin/index.js

@@ -388,7 +388,7 @@ export default function ToolbarPlugin() {
                                         if (data?.filename) {
                                             editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
                                                 src: `/${data?.filename}`,
-                                                altText: 'Image',
+                                                altText: data?.originalname,
                                             });
                                         }
                                     }

package/lib/main/themes/customTheme.js

@@ -222,7 +222,7 @@ const createCustomTheme = (theme) => {
           padding: 0;
           p {
             color: ${palette.text.secondary};
-            font-size: 0.875rem;
+            font-size: 12px;
           }
         }
       }

package/lib/main/themes/defaultTheme.js

@@ -535,12 +535,12 @@ const image = css `
   .image-caption-container {
     display: block;
     position: absolute;
-    bottom: 4px;
+    bottom: 8px;
     left: 0;
     right: 0;
     padding: 0;
     margin: 0;
-    border-top: 1px solid #fff;
+
     background-color: rgba(255, 255, 255, 0.9);
     min-width: 100px;
     color: #000;
@@ -560,13 +560,15 @@ const image = css `
   .image-caption-button {
     display: block;
     position: absolute;
-    bottom: 20px;
+    height: 40px;
+    bottom: 0;
+    top: 0;
     left: 0;
     right: 0;
     width: 30%;
     padding: 10px;
-    margin: 0 auto;
-    border: 1px solid rgba(255, 255, 255, 0.3);
+    margin: auto;
+    border: 2px solid rgba(255, 255, 255, 0.3);
     border-radius: 5px;
     background-color: rgba(0, 0, 0, 0.5);
     min-width: 100px;

package/lib/main/ui/ImageResizer.js

@@ -136,9 +136,9 @@ export default function ImageResizer({ onResizeStart, onResizeEnd, buttonRef, im
             document.removeEventListener('pointerup', handlePointerUp);
         }
     };
-    return (_jsxs("div", { ref: controlWrapperRef, children: [!showCaption && captionsEnabled && (_jsx("button", { className: "image-caption-button", ref: buttonRef, onClick: () => {
+    return (_jsxs("div", { ref: controlWrapperRef, children: [captionsEnabled && (_jsx("button", { className: "image-caption-button", ref: buttonRef, onClick: () => {
                     setShowCaption(!showCaption);
-                }, children: "Add Caption" })), _jsx("div", { className: "image-resizer image-resizer-n", onPointerDown: (event) => {
+                }, children: showCaption ? 'Remove Caption' : 'Add Caption' })), _jsx("div", { className: "image-resizer image-resizer-n", onPointerDown: (event) => {
                     handlePointerDown(event, Direction.north);
                 } }), _jsx("div", { className: "image-resizer image-resizer-ne", onPointerDown: (event) => {
                     handlePointerDown(event, Direction.north | Direction.east);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "1.6.234",
+  "version": "1.6.236",
   "main": "lib/index.js",
   "scripts": {
     "dev": "npm run storybook",
@@ -37,12 +37,13 @@
     ]
   },
   "dependencies": {
-    "@arcblock/ux": "^2.9.75",
+    "@arcblock/ux": "^2.9.77",
     "@blocklet/embed": "^0.1.11",
-    "@blocklet/pages-kit": "^0.2.283",
-    "@blocklet/pdf": "1.6.234",
+    "@blocklet/pages-kit": "^0.2.302",
+    "@blocklet/pdf": "1.6.236",
     "@excalidraw/excalidraw": "^0.14.2",
     "@iconify/iconify": "^3.0.1",
+    "@iconify/icons-tabler": "^1.2.95",
     "@lexical/clipboard": "0.13.1",
     "@lexical/code": "0.13.1",
     "@lexical/file": "0.13.1",
@@ -109,5 +110,5 @@
     "react": "*",
     "react-dom": "*"
   },
-  "gitHead": "630c1a20241c7d3d65d3f90f78b7858d2198b25d"
+  "gitHead": "f3efd9c52ddb748b932ce475cc17e444c03a8a57"
 }