@blocklet/editor 1.6.233 → 1.6.236

package/lib/ext/PagesKitComponent/PagesKitComponentRenderer.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { Box, Button, Divider, IconButton, Popover, useMediaQuery } from '@mui/material';
+import { useEffect, useState } from 'react';
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
+import { CustomComponentRenderer, customComponentStates } from '@blocklet/pages-kit/components';
+import { isBlockletRunning } from '../utils';
+import { mode, isValidPropertyType, getLocalizedValue, getPropertyLabel } from './utils';
+import { PropertyField } from './PropertyField';
+import { useContentLocale } from '../ContentLocale';
+export function PagesKitComponentRenderer({ id, name, properties, onPropertiesChange }) {
+    const locale = useContentLocale();
+    const [editor] = useLexicalComposerContext();
+    const isEditable = editor.isEditable();
+    const [loading, setLoading] = useState(true);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const upMd = useMediaQuery((theme) => theme.breakpoints.up('md'));
+    const [pendingProperties, setPendingProperties] = useState(properties || {});
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleCancel = () => {
+        setAnchorEl(null);
+        setPendingProperties(properties || {});
+    };
+    const handleSave = () => {
+        onPropertiesChange(pendingProperties);
+        setAnchorEl(null);
+    };
+    useEffect(() => {
+        const load = async () => {
+            const state = customComponentStates().getState();
+            await state.loadComponents({
+                mode,
+                locale,
+                instances: [{ id, component: { name } }],
+            });
+            setLoading(false);
+        };
+        if (isBlockletRunning('pages-kit')) {
+            load();
+        }
+    }, [id, name]);
+    const component = customComponentStates().getState()?.state?.components?.[id]?.component;
+    if (loading || !component) {
+        return null;
+    }
+    // 暂时仅支持基础类型的组件参数配置
+    const propDefinitions = Object.values(component.properties || {})
+        .map((x) => x.data)
+        .filter((x) => !!x.key && isValidPropertyType(x.type));
+    return (_jsxs(Box, { sx: { position: 'relative', ...(isEditable && { mt: 2 }) }, children: [_jsx(CustomComponentRenderer, { componentId: id, locale: locale, dev: { mode }, props: properties?.[locale] }), isEditable && !!propDefinitions.length && upMd && (_jsxs(_Fragment, { children: [_jsx(IconButton, { sx: { position: 'absolute', right: 0, top: -32 }, onClick: handleClick, children: _jsx(SettingsOutlinedIcon, {}) }), _jsx(Popover, { open: open, anchorEl: anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: 'right',
+                        }, transformOrigin: {
+                            vertical: 'top',
+                            horizontal: 'right',
+                        }, children: _jsxs(Box, { sx: { width: 440, maxHeight: 500, p: 2 }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center' }, children: _jsxs(Box, { sx: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: 0.5,
+                                            color: 'text.secondary',
+                                            fontSize: 14,
+                                            fontWeight: 600,
+                                        }, children: [_jsx(Box, { component: "span", className: "iconify", "data-icon": "tabler:settings-2", sx: { fontSize: 20 } }), _jsx("span", { children: "Properties" })] }) }), _jsx(Divider, { sx: { mt: 0.75, mb: 2 } }), propDefinitions.map((x) => {
+                                    // @ts-ignore
+                                    const multiline = !!x.multiline;
+                                    return (_jsx(Box, { sx: { mt: 2 }, children: _jsx(PropertyField, { label: getPropertyLabel({ locale, locales: x.locales }), type: x.type, value: pendingProperties[locale]?.[x.key] ||
+                                                getLocalizedValue({ key: 'defaultValue', locale, data: x.locales }), onChange: (v) => setPendingProperties({
+                                                ...pendingProperties,
+                                                [locale]: { ...pendingProperties[locale], [x.key]: v },
+                                            }), multiline: multiline }) }, x.key));
+                                }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 1, py: 2 }, children: [_jsx(Button, { color: "inherit", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { color: "primary", variant: "contained", onClick: handleSave, children: "Save" })] })] }) })] }))] }));
+}

package/lib/ext/PagesKitComponent/PropertyField.d.ts

@@ -0,0 +1,13 @@
+import { type PropertyType } from './utils';
+interface PropertyFieldProps {
+    type?: PropertyType;
+    multiline?: boolean;
+    label: string;
+    value: any;
+    onChange: (value: any) => void;
+}
+export declare function UploaderButton({ onChange }: {
+    onChange?: Function;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PropertyField({ type, multiline, label, value, onChange, ...rest }: PropertyFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/ext/PagesKitComponent/PropertyField.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormControlLabel, IconButton, InputAdornment, Switch, TextField } from '@mui/material';
+import UploadIcon from '@mui/icons-material/Upload';
+function getVideoSize(url) {
+    return new Promise((resolve, reject) => {
+        const video = document.createElement('video');
+        video.src = url;
+        video.onloadedmetadata = () => {
+            const { videoWidth: naturalWidth, videoHeight: naturalHeight } = video;
+            resolve({ naturalWidth, naturalHeight });
+        };
+        video.onerror = (e) => reject(e);
+    });
+}
+function getImageSize(url) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.src = url;
+        img.onload = () => {
+            const { naturalWidth, naturalHeight } = img;
+            resolve({ naturalWidth, naturalHeight });
+        };
+        img.onerror = (e) => reject(e);
+    });
+}
+export function UploaderButton({ onChange }) {
+    const handleOpen = () => {
+        // @ts-ignore
+        const uploader = uploaderRef?.current?.getUploader();
+        uploader?.open();
+        if (onChange) {
+            // rewrite default emitter
+            uploader.onceUploadSuccess((...args) => {
+                onChange(...args);
+            });
+        }
+    };
+    return (_jsx(IconButton, { size: "small", onClick: handleOpen, children: _jsx(UploadIcon, {}) }, "uploader-trigger"));
+}
+export function PropertyField({ type, multiline, label, value, onChange, ...rest }) {
+    if (type === 'boolean') {
+        return (_jsx(FormControlLabel, { sx: { display: 'inline-flex', m: 0 }, label: label, labelPlacement: "start", control: _jsx(Switch, { checked: value === true, onChange: (_, checked) => onChange?.(checked) }) }));
+    }
+    if (type === 'number') {
+        return (_jsx(TextField, { type: "number", size: "small", sx: { width: 1 }, label: label, value: value, onChange: (e) => onChange(e.target.value), ...rest }));
+    }
+    if (type === 'url') {
+        return (_jsx(TextField, { sx: { width: 1 }, size: "small", label: label, value: value.url, onChange: (e) => onChange(e.target.value), InputProps: {
+                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(UploaderButton, { onChange: async ({ response }) => {
+                            const url = response?.data?.url || response?.data?.fileUrl;
+                            let size;
+                            if (url) {
+                                size = await getImageSize(url)
+                                    .catch(() => getVideoSize(url))
+                                    .catch(() => undefined);
+                            }
+                            onChange?.({ url, width: size?.naturalWidth, height: size?.naturalHeight });
+                        } }) })),
+            }, ...rest }));
+    }
+    return (_jsx(TextField, { sx: { width: 1 }, size: "small", label: label, value: value, onChange: (e) => onChange(e.target.value), ...((multiline || type === 'json') && {
+            multiline: true,
+            rows: 2,
+        }), ...rest }));
+}

package/lib/ext/PagesKitComponent/utils.d.ts

@@ -0,0 +1,25 @@
+export declare const mode: string;
+export declare const propertyTypes: readonly ["string", "number", "boolean", "json", "url"];
+export type PropertyType = typeof propertyTypes[number];
+export type Properties = {
+    [locale: string]: {
+        [key: string]: any;
+    };
+};
+export declare const isValidPropertyType: (type: string | null | undefined) => boolean;
+type Locales = {
+    [locale: string]: {
+        name?: string;
+        defaultValue?: any;
+    };
+};
+export declare const getLocalizedValue: ({ key, locale, data }: {
+    key: string;
+    locale: string;
+    data?: Properties | undefined;
+}) => any;
+export declare const getPropertyLabel: ({ locale, locales }: {
+    locale: string;
+    locales?: Locales | undefined;
+}) => string;
+export {};

package/lib/ext/PagesKitComponent/utils.js

@@ -0,0 +1,16 @@
+export const mode = process.env.NODE_ENV === 'development' ? 'draft' : 'production';
+export const propertyTypes = ['string', 'number', 'boolean', 'json', 'url'];
+export const isValidPropertyType = (type) => {
+    return !type || propertyTypes.includes(type);
+};
+// 依次尝试取值
+// - `data[locale][key]`
+// - `data.en[key]`
+// - 遍历所有 locale 取第一个有值的 `data[locale][key]`
+export const getLocalizedValue = ({ key, locale, data }) => {
+    data = data || {};
+    return data[locale]?.[key] || data.en?.[key] || Object.values(data).find((x) => x?.[key])?.[key] || '';
+};
+export const getPropertyLabel = ({ locale, locales }) => {
+    return getLocalizedValue({ key: 'name', locale, data: locales });
+};

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/SubpageListingPlugin/SubpageListingComponent.js

@@ -50,7 +50,7 @@ export default function SubpageListingComponent({ docPostId, mode, onModeChange,
     if (loading) {
         return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', alignItems: 'center', height: 200 }, children: _jsx(CircularProgress, {}) }));
     }
-    return (_jsxs(Box, { sx: { display: 'flex', flexWrap: 'wrap', position: 'relative', mx: -1 }, children: [isEmpty && (_jsx(Box, { sx: { width: 1, px: 1 }, children: _jsx(Alert, { severity: "info", sx: {}, children: "No subpages" }) })), isEditable && (_jsxs(_Fragment, { children: [_jsx(IconButton, { sx: { position: 'absolute', right: 0, top: -32 }, onClick: handleClick, children: _jsx(SettingsOutlinedIcon, {}) }), _jsx(Popover, { open: open, anchorEl: anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: {
+    return (_jsxs(Box, { sx: { display: 'flex', flexWrap: 'wrap', position: 'relative', mx: -1, ...(isEditable && { mt: 2 }) }, children: [isEmpty && (_jsx(Box, { sx: { width: 1, px: 1 }, children: _jsx(Alert, { severity: "info", sx: {}, children: "No subpages" }) })), isEditable && (_jsxs(_Fragment, { children: [_jsx(IconButton, { sx: { position: 'absolute', right: 0, top: -32 }, onClick: handleClick, children: _jsx(SettingsOutlinedIcon, {}) }), _jsx(Popover, { open: open, anchorEl: anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: {
                             vertical: 'bottom',
                             horizontal: 'right',
                         }, transformOrigin: {

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/ext/utils.d.ts

@@ -17,3 +17,4 @@ export declare const sleep: (ms: number) => Promise<unknown>;
 export declare const minDelay: <T>(promise: Promise<T>, ms: number) => Promise<T>;
 export declare function exhaustiveGuard(_value: never): never;
 export declare const isSameHost: (url: string | URL) => boolean;
+export declare const isBlockletRunning: (name: string) => boolean;

package/lib/ext/utils.js

@@ -86,3 +86,6 @@ export const isSameHost = (url) => {
         return false;
     }
 };
+export const isBlockletRunning = (name) => {
+    return getBlockletMountPointInfo(name)?.status === 'running';
+};

package/lib/main/editor.js

@@ -79,9 +79,11 @@ 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';
+import { PagesKitComponentPlugin } from '../ext/PagesKitComponent/PagesKitComponentPlugin';
 export default function Editor({ children, placeholder, onChange, autoFocus = true, showToolbar = true, editorRef, onReady, enableHeadingsIdPlugin, }) {
     const [editor] = useLexicalComposerContext();
     const [editable, setEditable] = useState(false);
@@ -109,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, {}), _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,7 +36,9 @@ 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 = [
     HeadingNode,
     ListNode,
@@ -75,6 +77,8 @@ const PlaygroundNodes = [
     GithubNode,
     AlertNode,
     PdfNode,
+    FileNode,
     SubpageListingNode,
+    PagesKitComponentNode,
 ];
 export default PlaygroundNodes;

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

@@ -18,6 +18,7 @@ import { INSERT_TABLE_COMMAND } from '@lexical/table';
 import { $createParagraphNode, $getSelection, $isRangeSelection, FORMAT_ELEMENT_COMMAND, createCommand, $insertNodes, $createTextNode, COMMAND_PRIORITY_EDITOR, } from 'lexical';
 import { mergeRegister } from '@lexical/utils';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Box } from '@mui/material';
 import { LexicalTypeaheadMenuPlugin, TypeaheadOption, useBasicTypeaheadTriggerMatch, } from '../LexicalTypeaheadMenuPlugin';
 import useHasNodes from '../../hooks/useHasNodes';
 import useModal from '../../hooks/useModal';
@@ -25,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';
@@ -34,7 +35,9 @@ 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 {
     // What shows up in the editor
     title;
@@ -68,6 +71,7 @@ export default function ComponentPickerMenuPlugin() {
     const [modal, showModal] = useModal();
     const [queryString, setQueryString] = useState(null);
     const config = useEditorConfig();
+    const { pagesKitComponents } = usePagesKitComponents();
     const hasUploader = !!config.uploader;
     const checkForTriggerMatch = useBasicTypeaheadTriggerMatch('/', {
         minLength: 0,
@@ -290,6 +294,13 @@ export default function ComponentPickerMenuPlugin() {
                     keywords: ['subpage', 'doc', 'list'],
                     onSelect: () => $insertSubpageListing(editor, 'children'),
                 }),
+            ...pagesKitComponents
+                .filter((x) => !!x.name)
+                .map((x) => new ComponentPickerOption(`${x.name}`, {
+                icon: (_jsx(Box, { component: "span", sx: { display: 'inline-flex', width: 20, px: 0.25, mr: '1px', fontSize: 13 }, title: "Pages kit custom component", children: "\uD83E\uDDE9" })),
+                keywords: [x.name],
+                onSelect: () => editor.dispatchCommand(INSERT_PAGES_KIT_COMPONENT_COMMAND, { id: x.id, name: x.name }),
+            })),
         ].filter(Boolean);
         const dynamicOptions = getDynamicOptions();
         return queryString
@@ -365,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

@@ -25,8 +25,6 @@ import { sanitizeUrl } from '../../utils/sanitizeUrl';
 // import { InsertEquationDialog } from "../EquationsPlugin";
 // import { INSERT_EXCALIDRAW_COMMAND } from "../ExcalidrawPlugin";
 import { INSERT_IMAGE_COMMAND } from '../ImagesPlugin';
-import { AideToolbarButton } from '../../../ext/AIPlugin';
-import { AITranslateToolbarButton } from '../../../ext/AITranslationPlugin';
 import { uploadFile, INSERT_COMPONENT_COMMAND } from '../ComponentPickerPlugin';
 // import { InsertNewTableDialog, InsertTableDialog } from "../TablePlugin";
 const blockTypeToBlockName = {
@@ -390,7 +388,7 @@ export default function ToolbarPlugin() {
                                         if (data?.filename) {
                                             editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
                                                 src: `/${data?.filename}`,
-                                                altText: 'Image',
+                                                altText: data?.originalname,
                                             });
                                         }
                                     }
@@ -463,8 +461,6 @@ export default function ToolbarPlugin() {
     if (menus.length === 0) {
         return null;
     }
-    menus.push(_jsx(AideToolbarButton, {}, "aide"));
-    menus.push(_jsx(AITranslateToolbarButton, {}, "ai-translate"));
     return (_jsxs(Toolbar, { className: "toolbar", children: [menus, modal] }));
 }
 const Toolbar = styled.div `

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);