@blocklet/editor 2.4.57 → 2.4.58

package/lib/ext/CustomComponent/CustomComponent.d.ts

@@ -0,0 +1,6 @@
+interface CustomComponentProps {
+    component: string;
+    properties?: any;
+}
+export declare function CustomComponent({ component, properties }: CustomComponentProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/ext/CustomComponent/CustomComponent.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { ErrorBoundary } from 'react-error-boundary';
+import components from './components';
+export function CustomComponent({ component, properties }) {
+    const Component = components[component];
+    if (!Component) {
+        return null;
+    }
+    const fallbackRender = ({ error }) => {
+        console.error('CustomComponent error', component, properties, error);
+        return null;
+    };
+    return (_jsx(Box, { sx: { py: 1 }, children: _jsx(ErrorBoundary, { fallbackRender: fallbackRender, children: _jsx(Component, { ...properties }) }) }));
+}

package/lib/ext/CustomComponent/CustomComponentNode.d.ts

@@ -0,0 +1,29 @@
+import { type DOMConversionMap, type DOMExportOutput, type EditorConfig, type ElementFormatType, type LexicalEditor, type LexicalNode, type NodeKey, type Spread } from 'lexical';
+import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import type { JSX } from 'react';
+declare const NODE_TYPE = "x-component";
+interface CustomComponentData {
+    component: string;
+    properties?: Record<string, unknown>;
+}
+export type SerializedCustomComponentNode = Spread<{
+    type: typeof NODE_TYPE;
+    data: CustomComponentData;
+}, SerializedDecoratorBlockNode>;
+export declare class CustomComponentNode extends DecoratorBlockNode {
+    __data: CustomComponentData;
+    static getType(): string;
+    static clone(node: CustomComponentNode): CustomComponentNode;
+    constructor(data: CustomComponentData, format?: ElementFormatType, key?: NodeKey);
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(serializedNode: SerializedCustomComponentNode): CustomComponentNode;
+    exportJSON(): SerializedCustomComponentNode;
+    getData(): CustomComponentData;
+    setData(data: CustomComponentData): void;
+    isInline(): false;
+    decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element;
+}
+export declare function $createCustomComponentNode(data: CustomComponentData): CustomComponentNode;
+export declare function $isCustomComponentNode(node: LexicalNode | null | undefined): node is CustomComponentNode;
+export {};

package/lib/ext/CustomComponent/CustomComponentNode.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
+import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import { CustomComponent } from './CustomComponent';
+const NODE_TYPE = 'x-component';
+function isCustomComponent(domNode) {
+    return domNode.tagName.toLowerCase().startsWith('x-');
+}
+function getComponentName(domNode) {
+    if (!isCustomComponent(domNode)) {
+        throw new Error(`Invalid component name: ${domNode.tagName.toLowerCase()}`);
+    }
+    return domNode.tagName.toLowerCase().slice(2);
+}
+function domToComponentProperties(domNode) {
+    const properties = { component: getComponentName(domNode), ...domNode.dataset };
+    const { children } = domNode;
+    const hasChildren = Array.from(children).some((child) => isCustomComponent(child));
+    if (hasChildren) {
+        properties.children = Array.from(children).map((child) => {
+            const childProperties = domToComponentProperties(child);
+            return { component: childProperties.component, properties: childProperties };
+        });
+    }
+    else {
+        properties.body = domNode.textContent?.trim() || '';
+    }
+    return properties;
+}
+function convertCustomComponentElement(domNode) {
+    const component = getComponentName(domNode);
+    try {
+        if (component) {
+            const node = $createCustomComponentNode({ component, properties: domToComponentProperties(domNode) });
+            return { node };
+        }
+    }
+    catch (e) {
+        console.warn(`Failed to parse: ${component}`, e);
+    }
+    return null;
+}
+export class CustomComponentNode extends DecoratorBlockNode {
+    __data;
+    static getType() {
+        return NODE_TYPE;
+    }
+    static clone(node) {
+        return new CustomComponentNode(node.__data, node.__format, node.__key);
+    }
+    constructor(data, format, key) {
+        super(format, key);
+        this.__data = { ...data };
+    }
+    exportDOM() {
+        const element = document.createElement('div');
+        const { body, ...rest } = this.__data.properties || {};
+        if (body) {
+            element.textContent = body;
+        }
+        Object.entries(rest).forEach(([key, value]) => {
+            element.setAttribute(`data-${key}`, value);
+        });
+        return { element };
+    }
+    static importDOM() {
+        return {
+            'x-card': () => ({ conversion: convertCustomComponentElement, priority: 1 }),
+            'x-cards': () => ({ conversion: convertCustomComponentElement, priority: 1 }),
+            'x-code-group': () => ({ conversion: convertCustomComponentElement, priority: 1 }),
+            'x-steps': () => ({ conversion: convertCustomComponentElement, priority: 1 }),
+        };
+    }
+    static importJSON(serializedNode) {
+        const node = $createCustomComponentNode(serializedNode.data);
+        return node;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: NODE_TYPE,
+            data: this.__data,
+            version: 1,
+        };
+    }
+    getData() {
+        return this.__data;
+    }
+    setData(data) {
+        const writable = this.getWritable();
+        writable.__data = data;
+    }
+    isInline() {
+        return false;
+    }
+    decorate(editor, config) {
+        const customComponentTheme = config.theme.customComponent || {};
+        const className = {
+            base: customComponentTheme.base || '',
+            focus: customComponentTheme.focus || '',
+        };
+        return (_jsx(BlockWithAlignableContents, { className: className, format: this.__format, nodeKey: this.__key, children: _jsx(CustomComponent, { component: this.__data.component, properties: this.__data.properties }) }));
+    }
+}
+export function $createCustomComponentNode(data) {
+    const customComponentNode = new CustomComponentNode(data);
+    return customComponentNode;
+}
+export function $isCustomComponentNode(node) {
+    return node instanceof CustomComponentNode;
+}

package/lib/ext/CustomComponent/components/Card.d.ts

@@ -0,0 +1,11 @@
+interface CardProps {
+    title: string;
+    body?: string;
+    image?: string;
+    icon?: string;
+    href?: string;
+    horizontal?: boolean;
+    cta?: string;
+}
+export default function Card({ title, body, image, icon, href, horizontal, cta }: CardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/ext/CustomComponent/components/Card.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Card as MuiCard, CardContent, Typography, Link } from '@mui/material';
+import { Icon } from '@iconify/react';
+export default function Card({ title, body, image, icon, href, horizontal = false, cta }) {
+    const isLink = !!href;
+    // 渲染图标
+    const renderIcon = () => {
+        if (!icon || !!image)
+            return null;
+        return (_jsx(Box, { component: Icon, icon: icon, sx: {
+                display: 'inline-block',
+                fontSize: '1.5em',
+                color: 'primary.dark',
+            } }));
+    };
+    const cardContent = (_jsxs(MuiCard, { sx: {
+            height: '100%',
+            display: 'flex',
+            flexDirection: horizontal ? 'row' : 'column',
+            cursor: isLink ? 'pointer' : 'default',
+            transition: 'all 0.2s ease-in-out',
+            '&:hover': isLink && !image ? { borderColor: 'primary.main' } : {},
+            border: 1,
+            borderColor: 'divider',
+            borderRadius: 1,
+            overflow: 'hidden',
+        }, elevation: 0, children: [image && !horizontal && (_jsx(Box, { component: "img", src: image, alt: title, sx: {
+                    width: '100%',
+                    height: 200,
+                    objectFit: 'cover',
+                } })), _jsx(CardContent, { sx: {
+                    display: 'flex',
+                    flexDirection: horizontal ? 'row' : 'column',
+                    alignItems: horizontal ? 'center' : 'flex-start',
+                    flex: 1,
+                    p: 3,
+                }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', flex: 1, gap: 1 }, children: [_jsxs(Box, { sx: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 1,
+                                ...(horizontal && { flexDirection: 'row', alignItems: 'center' }),
+                            }, children: [renderIcon(), _jsx(Typography, { variant: "h5", component: "h3", sx: {
+                                        fontWeight: 600,
+                                        color: 'text.primary',
+                                    }, children: title })] }), body && (_jsx(Typography, { variant: "body2", sx: {
+                                color: 'text.secondary',
+                            }, children: body })), isLink && cta && (_jsx(Box, { sx: { display: 'flex', alignItems: 'center', marginTop: 'auto' }, children: _jsxs(Typography, { variant: "body2", sx: {
+                                    color: 'text.primary',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 0.5,
+                                }, children: [cta || 'Learn more', _jsx(Box, { component: Icon, icon: "lucide:chevron-right", sx: {
+                                            fontSize: '0.875rem',
+                                            transition: 'transform 0.2s ease-in-out',
+                                        } })] }) }))] }) })] }));
+    if (isLink) {
+        return (_jsx(Box, { component: Link, href: href, sx: { display: 'block', height: '100%', textDecoration: 'none', color: 'inherit' }, children: cardContent }));
+    }
+    return cardContent;
+}

package/lib/ext/CustomComponent/components/Cards.d.ts

@@ -0,0 +1,20 @@
+interface Item {
+    title: string;
+    body?: string;
+    image?: string;
+    icon?: string;
+    color?: string;
+    href?: string;
+    horizontal?: boolean;
+    cta?: string;
+    arrow?: boolean;
+}
+interface CardsProps {
+    columns?: number;
+    children: {
+        properties: Item;
+    }[];
+    gap?: number;
+}
+export default function Cards({ children, columns, gap }: CardsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/ext/CustomComponent/components/Cards.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import Card from './Card';
+export default function Cards({ children, columns = 2, gap = 2 }) {
+    if (!children || children.length === 0) {
+        return null;
+    }
+    // 响应式列数
+    const getResponsiveColumns = (cols) => {
+        return {
+            xs: 1,
+            sm: Math.min(2, cols),
+            md: Math.min(3, cols),
+            lg: Math.min(4, cols),
+            xl: cols,
+        };
+    };
+    const responsiveCols = getResponsiveColumns(columns);
+    return (_jsx(Box, { sx: {
+            display: 'grid',
+            gridTemplateColumns: {
+                xs: 'repeat(1, 1fr)',
+                sm: `repeat(${responsiveCols.sm}, 1fr)`,
+                md: `repeat(${responsiveCols.md}, 1fr)`,
+                lg: `repeat(${responsiveCols.lg}, 1fr)`,
+                xl: `repeat(${responsiveCols.xl}, 1fr)`,
+            },
+            gap,
+            width: '100%',
+        }, children: children.map((x) => {
+            const { properties } = x;
+            return (_jsx(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                }, children: _jsx(Card, { ...properties }) }, properties.title));
+        }) }));
+}

package/lib/ext/CustomComponent/components/index.d.ts

@@ -0,0 +1,7 @@
+import Card from './Card';
+import Cards from './Cards';
+declare const components: {
+    card: typeof Card;
+    cards: typeof Cards;
+};
+export default components;

package/lib/ext/CustomComponent/components/index.js

@@ -0,0 +1,7 @@
+import Card from './Card';
+import Cards from './Cards';
+const components = {
+    card: Card,
+    cards: Cards,
+};
+export default components;

package/lib/main/nodes/PlaygroundNodes.js

@@ -39,6 +39,7 @@ import { FileNode } from '../../ext/FilePlugin';
 import { SubpageListingNode } from '../../ext/SubpageListingPlugin/SubpageListingNode';
 import { PagesKitComponentNode } from '../../ext/PagesKitComponent/PagesKitComponentNode';
 import { TranslationNode } from '../../ext/InlineTranslationPlugin';
+import { CustomComponentNode } from '../../ext/CustomComponent/CustomComponentNode';
 const PlaygroundNodes = [
     HeadingNode,
     ListNode,
@@ -80,5 +81,6 @@ const PlaygroundNodes = [
     PagesKitComponentNode,
     TranslationNode,
     MermaidNode,
+    CustomComponentNode,
 ];
 export default PlaygroundNodes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.4.57",
+  "version": "2.4.58",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -63,13 +63,14 @@
     "medium-zoom": "^1.1.0",
     "mermaid": "^11.6.0",
     "path-parser": "^6.1.0",
+    "react-error-boundary": "^3.1.4",
     "react-player": "^2.16.0",
     "react-popper": "^2.3.0",
     "split-pane-react": "^0.1.3",
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "2.4.57"
+    "@blocklet/pdf": "2.4.58"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",