@blocklet/editor 2.3.49 → 2.3.51

package/lib/main/nodes/ImageComponent.js

@@ -248,7 +248,8 @@ export default function ImageComponent({ file, src, altText, nodeKey, width, hei
             uploadImage();
         }
     }, [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 } } })) : (_jsx(Skeleton, { variant: "rectangular", animation: "wave", sx: { width: 300, height: 200, borderRadius: 1 } }));
+    const skeleton = sizeMode === 'original' ? null : (_jsx(Skeleton, { variant: "rectangular", animation: "wave", sx: { width: 300, height: 200, borderRadius: 1 } }));
+    const placeholder = objectUrl ? (_jsx(ImageContainer, { draggable: draggable, success: !!src, loading: loading, error: error, confirmText: confirmText, uploadImage: uploadImage, placeholder: objectUrl, placeholderProps: { style: { width, height, maxWidth } } })) : (skeleton);
     const imageDisplayWidth = useImageDisplayWidth({ src: src || objectUrl, sizeMode, width });
     const { zoomOpened, openedImageRef } = useMediumZoom(imageRef, { enabled: !frame });
     const renderImageAnnotationView = () => {

package/lib/main/nodes/MermaidComponent.d.ts

@@ -0,0 +1,7 @@
+interface MermaidComponentProps {
+    code: string;
+    theme?: string;
+    mode?: string;
+}
+declare function MermaidComponent({ code }: MermaidComponentProps): import("react/jsx-runtime").JSX.Element;
+export default MermaidComponent;

package/lib/main/nodes/MermaidComponent.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect } from 'react';
+import mermaid from 'mermaid';
+function MermaidComponent({ code }) {
+    const ref = React.useRef(null);
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        ref.current.innerHTML = '';
+        mermaid.initialize({ startOnLoad: false });
+        const id = `mermaid-${Math.random().toString(36).substring(2, 9)}`;
+        try {
+            mermaid.render(id, code).then(({ svg }) => {
+                if (ref.current)
+                    ref.current.innerHTML = svg;
+            });
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }, [code]);
+    return _jsx("div", { ref: ref });
+}
+export default MermaidComponent;

package/lib/main/nodes/MermaidNode.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import type { DOMConversionMap, DOMExportOutput, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import { DecoratorNode } from 'lexical';
+export interface MermaidPayload {
+    code: string;
+    theme?: string;
+    mode?: string;
+    key?: NodeKey;
+}
+export type SerializedMermaidNode = Spread<{
+    code: string;
+    theme?: string;
+    mode?: string;
+    type: 'mermaid';
+    version: 1;
+}, SerializedLexicalNode>;
+export declare class MermaidNode extends DecoratorNode<JSX.Element> {
+    __code: string;
+    __theme?: string;
+    __mode?: string;
+    static getType(): string;
+    static clone(node: MermaidNode): MermaidNode;
+    static importJSON(serializedNode: SerializedMermaidNode): MermaidNode;
+    exportJSON(): SerializedMermaidNode;
+    static importDOM(): DOMConversionMap | null;
+    exportDOM(): DOMExportOutput;
+    constructor(code: string, theme?: string, mode?: string, key?: NodeKey);
+    getCode(): string;
+    setCode(code: string): void;
+    getTheme(): string | undefined;
+    setTheme(theme: string): void;
+    getMode(): string | undefined;
+    setMode(mode: string): void;
+    createDOM(): HTMLElement;
+    updateDOM(): false;
+    decorate(): JSX.Element;
+}
+export declare function $createMermaidNode({ code, theme, mode, key }: MermaidPayload): MermaidNode;
+export declare function $isMermaidNode(node: LexicalNode | null | undefined): node is MermaidNode;

package/lib/main/nodes/MermaidNode.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DecoratorNode } from 'lexical';
+import MermaidComponent from './MermaidComponent';
+function convertMermaidElement(domNode) {
+    if (domNode && domNode.classList?.contains('mermaid')) {
+        const code = domNode.textContent || '';
+        const node = $createMermaidNode({ code });
+        return { node };
+    }
+    return null;
+}
+export class MermaidNode extends DecoratorNode {
+    __code;
+    __theme;
+    __mode;
+    static getType() {
+        return 'mermaid';
+    }
+    static clone(node) {
+        return new MermaidNode(node.__code, node.__theme, node.__mode, node.__key);
+    }
+    static importJSON(serializedNode) {
+        const { code, theme, mode } = serializedNode;
+        return $createMermaidNode({ code, theme, mode });
+    }
+    exportJSON() {
+        return {
+            code: this.__code,
+            theme: this.__theme,
+            mode: this.__mode,
+            type: 'mermaid',
+            version: 1,
+        };
+    }
+    static importDOM() {
+        return {
+            pre: (domNode) => {
+                if (domNode.classList?.contains('mermaid')) {
+                    return { conversion: convertMermaidElement, priority: 0 };
+                }
+                return null;
+            },
+        };
+    }
+    exportDOM() {
+        const element = document.createElement('pre');
+        element.className = 'mermaid';
+        element.textContent = this.__code;
+        return { element };
+    }
+    constructor(code, theme, mode, key) {
+        super(key);
+        this.__code = code;
+        this.__theme = theme;
+        this.__mode = mode;
+    }
+    getCode() {
+        return this.__code;
+    }
+    setCode(code) {
+        const writable = this.getWritable();
+        writable.__code = code;
+    }
+    getTheme() {
+        return this.__theme;
+    }
+    setTheme(theme) {
+        const writable = this.getWritable();
+        writable.__theme = theme;
+    }
+    getMode() {
+        return this.__mode;
+    }
+    setMode(mode) {
+        const writable = this.getWritable();
+        writable.__mode = mode;
+    }
+    createDOM() {
+        const div = document.createElement('div');
+        div.className = 'mermaid-container';
+        return div;
+    }
+    updateDOM() {
+        return false;
+    }
+    decorate() {
+        return _jsx(MermaidComponent, { code: this.__code, theme: this.__theme, mode: this.__mode });
+    }
+}
+export function $createMermaidNode({ code, theme, mode, key }) {
+    return new MermaidNode(code, theme, mode, key);
+}
+export function $isMermaidNode(node) {
+    return node instanceof MermaidNode;
+}

package/lib/main/nodes/PlaygroundNodes.js

@@ -22,6 +22,7 @@ import { EquationNode } from './EquationNode';
 import { ExcalidrawNode } from './ExcalidrawNode';
 import { FigmaNode } from './FigmaNode';
 import { ImageNode } from './ImageNode';
+import { MermaidNode } from './MermaidNode';
 import { KeywordNode } from './KeywordNode';
 import { MentionNode } from './MentionNode';
 import { StickyNode } from './StickyNode';
@@ -80,5 +81,6 @@ const PlaygroundNodes = [
     SubpageListingNode,
     PagesKitComponentNode,
     TranslationNode,
+    MermaidNode,
 ];
 export default PlaygroundNodes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.3.49",
+  "version": "2.3.51",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -61,6 +61,7 @@
     "markerjs-live": "^1.2.1",
     "markerjs2": "^2.32.2",
     "medium-zoom": "^1.1.0",
+    "mermaid": "^11.6.0",
     "path-parser": "^6.1.0",
     "react-player": "^2.16.0",
     "react-popper": "^2.3.0",
@@ -68,7 +69,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "^2.3.49"
+    "@blocklet/pdf": "^2.3.51"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",