@blocklet/editor-lite 2.6.0

package/lib/ext/TemplatePlugin.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useReactive } from 'ahooks';
+import { ClickAwayListener, Box, MenuList, MenuItem, ListItemText, ListItemIcon, Typography } from '@mui/material';
+import { mergeRegister } from '@lexical/utils';
+import { $createParagraphNode, $insertNodes, $parseSerializedNode, COMMAND_PRIORITY_EDITOR, createCommand, $getSelection, $getNodeByKey, } from 'lexical';
+import { useEffect, useRef } from 'react';
+import { Card, MenuWrapper, NestedMenuItem } from './common';
+import { SelectionPopper } from '../components/SelectionPopper';
+import { safeParseJSON } from './utils';
+import { TEMPLATE_CLASS_NAME } from './CustomOnChangePlugin';
+import { useEditorConfig } from '../config';
+function BlockletLogo(props) {
+    const { did, ...restProps } = props;
+    const src = `/.well-known/service/blocklet/logo-bundle/${did}`;
+    return _jsx("img", { width: 24, height: 24, src: src, alt: did, ...restProps });
+}
+export const INSERT_TEMPLATE_COMMAND = createCommand('INSERT_TEMPLATE_COMMAND');
+export function TemplatePlugin() {
+    const [editor] = useLexicalComposerContext();
+    const { templatePlugin } = useEditorConfig();
+    const selectionRef = useRef(null);
+    const templateRef = useRef(null);
+    const boxRef = useRef(null);
+    const state = useReactive({
+        template: '',
+        open: false,
+        appendKey: '',
+        templateList: [],
+    });
+    useEffect(() => {
+        if (templatePlugin?.fetchTemplateList) {
+            templatePlugin.fetchTemplateList().then((data) => {
+                state.templateList = data?.filter((item) => item.options?.length > 0) || [];
+            });
+        }
+    }, []);
+    useEffect(() => {
+        return mergeRegister(editor.registerCommand(INSERT_TEMPLATE_COMMAND, (_payload) => {
+            onOpen();
+            editor.update(() => {
+                const selection = $getSelection();
+                // @ts-ignore
+                const anchorNode = selection?.anchor?.getNode();
+                // must, clear anchor node to ensure selection not change
+                if (anchorNode?.clear) {
+                    anchorNode.clear();
+                }
+                // must, insert a paragraph node to avoid index out of range
+                const p = $createParagraphNode();
+                $insertNodes([p]);
+                p.selectStart();
+                // @ts-ignore get new selection
+                selectionRef.current = $getSelection();
+            });
+            return true;
+        }, COMMAND_PRIORITY_EDITOR));
+    }, [editor]);
+    const onOpen = () => {
+        state.open = true;
+        window.addEventListener('keydown', onClickAway);
+    };
+    const onClose = () => {
+        state.open = false;
+        state.appendKey = '';
+        templateRef.current = null;
+        window.removeEventListener('keydown', onClickAway);
+    };
+    const removeTemplate = async () => {
+        editor.update(() => {
+            if (state.appendKey) {
+                const node = $getNodeByKey(state.appendKey);
+                // clear nodes
+                // @ts-ignore
+                node?.clear();
+                state.appendKey = '';
+                // @ts-ignore
+                selectionRef.current = $getSelection();
+            }
+        });
+        await Promise.resolve().then();
+    };
+    const insertTemplate = async (item) => {
+        await removeTemplate();
+        editor.update(() => {
+            try {
+                const p = $createParagraphNode();
+                // @ts-ignore get all nodes in lexical state
+                const nodes = safeParseJSON(item.content, {})?.root?.children?.map?.((node) => {
+                    return $parseSerializedNode(node);
+                });
+                p.append($createParagraphNode(), 
+                // insert all nodes into paragraph
+                ...nodes);
+                p.markDirty();
+                $insertNodes([p]);
+                // keep selection not change
+                p.selectStart();
+                state.appendKey = p.getKey();
+            }
+            catch (e) {
+                console.error('insert nodes error: ', e);
+            }
+        });
+        await Promise.resolve().then();
+        editor.getEditorState().read(() => {
+            const htmlElement = editor.getElementByKey(state.appendKey);
+            htmlElement?.classList.add(TEMPLATE_CLASS_NAME);
+            // @ts-ignore
+            selectionRef.current = $getSelection();
+        });
+    };
+    const onSelect = (item) => {
+        if (item.id === templateRef.current?.id) {
+            const htmlElement = editor.getElementByKey(state.appendKey);
+            if (htmlElement?.classList.contains(TEMPLATE_CLASS_NAME)) {
+                htmlElement?.classList.remove(TEMPLATE_CLASS_NAME);
+            }
+        }
+        onClose();
+        if (templatePlugin?.importTemplate) {
+            templatePlugin.importTemplate(item);
+        }
+    };
+    const onHover = async (item) => {
+        if (item.id !== templateRef.current?.id) {
+            templateRef.current = item;
+            await insertTemplate(item);
+        }
+    };
+    const onClickAway = async (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        await removeTemplate();
+        onClose();
+    };
+    const templateSelectProps = {
+        onSelect,
+        onHover,
+        templateList: state.templateList,
+    };
+    if (state.open) {
+        return (_jsx(ClickAwayListener, { onClickAway: onClickAway, children: _jsx(Box, { ref: boxRef, children: _jsx(SelectionPopper, { selection: selectionRef.current, sx: { display: 'flex', alignItems: 'center', zIndex: 9999 }, children: _jsx(TemplateSelect, { ...templateSelectProps }) }) }) }));
+    }
+    return null;
+}
+export function TemplateSelect({ onSelect, onHover, templateList = [], }) {
+    return (_jsx(Card, { component: MenuWrapper, sx: {
+            flex: '0 1 auto',
+            width: 280,
+            my: 0.5,
+            overflowY: 'auto',
+            maxHeight: 240,
+        }, children: templateList?.length > 0 ? (_jsx(MenuList, { children: templateList.map((template) => {
+                if (template.options) {
+                    return (_jsxs(NestedMenuItem, { subMenu: _jsx(Card, { sx: { minWidth: 200, maxHeight: 240, overflowY: 'auto' }, children: _jsx(MenuList, { children: template.options.map((option) => {
+                                    return (_jsx(MenuItem, { onClick: () => onSelect?.(option), onMouseEnter: () => onHover?.(option), children: option.title }, option.title));
+                                }) }) }), children: [_jsx(ListItemIcon, { sx: { mr: 0.75 }, children: _jsx(BlockletLogo, { did: template.did }) }), _jsx(ListItemText, { children: _jsx(Typography, { variant: "inherit", noWrap: true, sx: {
+                                        lineHeight: 1,
+                                    }, children: template.title }) })] }, template.title));
+                }
+                // not any options
+                return null;
+            }) })) : (_jsxs(MenuItem, { children: [_jsx(ListItemIcon, { sx: { mr: 0.75 }, children: _jsx(Box, { component: "i", className: "iconify", "data-icon": "material-symbols:info-outline", "data-height": "24px", "data-width": "24px" }) }), _jsx(ListItemText, { sx: {
+                        whiteSpace: 'pre-wrap',
+                    }, children: _jsx(Typography, { variant: "inherit", sx: {
+                            lineHeight: 1.4,
+                            whiteSpace: 'pre-wrap',
+                        }, children: "There is no templates available, please contact the owner or admin to import it" }) })] })) }));
+}

package/lib/ext/VideoPathFixerPlugin.d.ts

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

package/lib/ext/VideoPathFixerPlugin.js

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

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

@@ -0,0 +1,5 @@
+interface Props {
+    url: string;
+}
+export default function VideoComponent({ url, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/ext/VideoPlugin/VideoComponent.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactPlayer from 'react-player';
+export default function VideoComponent({ url, ...rest }) {
+    return _jsx(ReactPlayer, { url: url, controls: true, style: { maxWidth: '100%' }, height: "auto" });
+}

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

@@ -0,0 +1,37 @@
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import { DecoratorNode } from 'lexical';
+import { type JSX } from 'react';
+export interface VideoPayload {
+    key?: NodeKey;
+    src: string;
+    width?: number;
+    height?: number;
+    maxWidth?: number;
+}
+export type SerializedVideoNode = Spread<{
+    height?: number;
+    maxWidth: number;
+    src: string;
+    width?: number;
+}, SerializedLexicalNode>;
+export declare class VideoNode extends DecoratorNode<JSX.Element> {
+    __src: string;
+    __width: 'inherit' | number;
+    __height: 'inherit' | number;
+    __maxWidth: number;
+    static getType(): string;
+    static clone(node: VideoNode): VideoNode;
+    static importJSON(serializedNode: SerializedVideoNode): VideoNode;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    constructor(src: string, maxWidth: number, width?: 'inherit' | number, height?: 'inherit' | number, key?: NodeKey);
+    exportJSON(): SerializedVideoNode;
+    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 $createVideoNode({ height, maxWidth, src, width, key }: VideoPayload): VideoNode;
+export declare function $isVideoNode(node: LexicalNode | null | undefined): node is VideoNode;

package/lib/ext/VideoPlugin/VideoNode.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { $applyNodeReplacement, DecoratorNode } from 'lexical';
+import { lazyRetry as lazy } from '@arcblock/ux/lib/Util';
+import { Suspense } from 'react';
+const VideoComponent = lazy(
+// @ts-ignore
+() => import('./VideoComponent'));
+function convertVideoElement(domNode) {
+    if (domNode instanceof HTMLVideoElement) {
+        const { src, width, height } = domNode;
+        const node = $createVideoNode({ height, src, width });
+        return { node };
+    }
+    return null;
+}
+export class VideoNode extends DecoratorNode {
+    __src;
+    __width;
+    __height;
+    __maxWidth;
+    static getType() {
+        return 'video';
+    }
+    static clone(node) {
+        return new VideoNode(node.__src, node.__maxWidth, node.__width, node.__height, node.__key);
+    }
+    static importJSON(serializedNode) {
+        const { height, width, maxWidth, src } = serializedNode;
+        const node = $createVideoNode({
+            height,
+            maxWidth,
+            src,
+            width,
+        });
+        return node;
+    }
+    exportDOM() {
+        const element = document.createElement('img');
+        element.setAttribute('src', this.__src);
+        element.setAttribute('width', this.__width.toString());
+        element.setAttribute('height', this.__height.toString());
+        return { element };
+    }
+    static importDOM() {
+        return {
+            img: (node) => ({
+                conversion: convertVideoElement,
+                priority: 0,
+            }),
+        };
+    }
+    constructor(src, maxWidth, width, height, key) {
+        super(key);
+        this.__src = src;
+        this.__maxWidth = maxWidth;
+        this.__width = width || 'inherit';
+        this.__height = height || 'inherit';
+    }
+    exportJSON() {
+        return {
+            height: this.__height === 'inherit' ? 0 : this.__height,
+            maxWidth: this.__maxWidth,
+            src: this.getSrc(),
+            type: 'video',
+            version: 1,
+            width: this.__width === 'inherit' ? 0 : this.__width,
+        };
+    }
+    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(VideoComponent, { url: this.__src }) }));
+    }
+}
+export function $createVideoNode({ height, maxWidth = 500, src, width, key }) {
+    return $applyNodeReplacement(new VideoNode(src, maxWidth, width, height, key));
+}
+export function $isVideoNode(node) {
+    return node instanceof VideoNode;
+}

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

@@ -0,0 +1,7 @@
+import { LexicalCommand } from 'lexical';
+import { type JSX } from 'react';
+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: (src: string) => boolean;

package/lib/ext/VideoPlugin/VideoPlugin.js

@@ -0,0 +1,26 @@
+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 { $createVideoNode, VideoNode } from './VideoNode';
+export const INSERT_VIDEO_COMMAND = createCommand('INSERT_VIDEO_COMMAND');
+export function VideoPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([VideoNode])) {
+            throw new Error('VideoPlugin: VideoNode not registered on editor');
+        }
+        return mergeRegister(editor.registerCommand(INSERT_VIDEO_COMMAND, (payload) => {
+            const videoNode = $createVideoNode(payload);
+            $insertNodes([videoNode]);
+            if ($isRootOrShadowRoot(videoNode.getParentOrThrow())) {
+                $wrapNodeInElement(videoNode, $createParagraphNode).selectEnd();
+            }
+            return true;
+        }, COMMAND_PRIORITY_EDITOR));
+    }, [editor]);
+    return null;
+}
+export const isVideo = (src) => {
+    return /\.(mp4|avi|mov|wmv|flv|mkv|mpeg|mpg|webm|ogg|ogv|3gp)$/i.test(src);
+};

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

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

package/lib/ext/VideoPlugin/index.js

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

package/lib/ext/common.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { SxProps, BoxProps, MenuItemProps, ButtonProps } from '@mui/material';
+type Props = {
+    children: React.ReactNode;
+    sx?: SxProps;
+} & BoxProps;
+export declare function Card({ ref, children, sx, ...rest }: Props & {
+    ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const MenuWrapper: React.FC<BoxProps>;
+export declare const GradientButton: React.FC<ButtonProps>;
+export declare function NestedMenuItem({ children, subMenu, ...rest }: MenuItemProps & {
+    subMenu: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/ext/common.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, MenuItem, styled } from '@mui/material';
+import { useRef, useState } from 'react';
+import { usePopper } from 'react-popper';
+export function Card({ ref = undefined, children, sx, ...rest }) {
+    const mergedSx = [
+        {
+            maxWidth: '100%',
+            border: 1,
+            borderColor: 'divider',
+            borderRadius: 2,
+            bgcolor: 'background.paper',
+            boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+            pointerEvents: 'initial',
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+    ];
+    return (_jsx(Box, { ref: ref, sx: mergedSx, ...rest, children: children }));
+}
+export const MenuWrapper = styled(Box) `
+  .MuiMenuItem-root {
+    min-height: 32px;
+    font-size: 14px;
+    .MuiListItemIcon-root {
+      min-width: 28px;
+    }
+  }
+`;
+export const GradientButton = styled(Button) `
+  background-image: linear-gradient(to right, #4776e6 0%, #8e54e9 51%, #4776e6 100%);
+  transition: 0.5s;
+  background-size: 200% auto;
+  color: white;
+  box-shadow: 0 0 20px #eee;
+
+  &:hover {
+    background-position: right center;
+    color: #fff;
+    text-decoration: none;
+  }
+`;
+export function NestedMenuItem({ children, subMenu, ...rest }) {
+    const [referenceElement, setReferenceElement] = useState(null);
+    const [popperElement, setPopperElement] = useState(null);
+    const { styles, attributes } = usePopper(referenceElement, popperElement, {
+        placement: 'right',
+        strategy: 'fixed',
+    });
+    const mouseOverPopper = useRef(false);
+    const handleMouseMoveOut = () => {
+        setTimeout(() => {
+            if (!mouseOverPopper.current) {
+                setReferenceElement(null);
+            }
+        });
+    };
+    return (_jsxs(MenuItem, { ...rest, onMouseOut: handleMouseMoveOut, children: [children, _jsx(Box, { component: "i", className: "iconify", "data-icon": "mdi:chevron-right", "data-height": "18px", sx: { color: 'text.secondary' } }), _jsx(Box, { sx: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }, onMouseOver: (e) => setReferenceElement(e.target) }), referenceElement && (_jsx(Box, { ref: setPopperElement, style: styles.popper, ...attributes.popper, onMouseOver: () => {
+                    mouseOverPopper.current = true;
+                }, onMouseOut: () => {
+                    mouseOverPopper.current = false;
+                }, children: subMenu }))] }));
+}

package/lib/ext/nodes/GithubComp.d.ts

@@ -0,0 +1,3 @@
+import { GithubInfoType } from './util';
+declare function GithubComponent({ title, image, link }: GithubInfoType): import("react/jsx-runtime").JSX.Element;
+export default GithubComponent;

package/lib/ext/nodes/GithubComp.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Box } from '@mui/material';
+function GithubComponent({ title, image, link }) {
+    const number = useMemo(() => {
+        if (!link) {
+            return '';
+        }
+        try {
+            const { pathname } = new URL(link || '');
+            const [, , , id] = pathname.split('/').filter(Boolean);
+            return id;
+        }
+        catch (error) {
+            return '';
+        }
+    }, [link]);
+    return (_jsxs(Box, { className: "github-container", sx: { color: 'text.primary' }, children: [_jsx("i", { className: "iconify github-icon", "data-icon": "mdi:github" }), !!number && _jsx(Box, { className: "github-number", sx: { color: 'text.secondary' }, children: `#${number}` }), _jsx(Box, { component: "a", className: "github-text", href: link, title: title, sx: { color: 'inherit', borderBottom: 1, borderColor: 'divider' }, children: title }), image && _jsx("img", { src: image, alt: "github-avatar", className: "github-avatar" })] }));
+}
+export default GithubComponent;

package/lib/ext/nodes/GithubNode.d.ts

@@ -0,0 +1,28 @@
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import { DecoratorNode } from 'lexical';
+import { type JSX } from 'react';
+import { GithubInfoType } from './util';
+export type SerializedGithubNode = Spread<{
+    title: string;
+    image: string;
+    link: string;
+    type: 'github';
+    version: 1;
+}, SerializedLexicalNode>;
+export declare class GithubNode extends DecoratorNode<JSX.Element> {
+    __title: string;
+    __image: string;
+    __link: string;
+    static getType(): string;
+    static clone(node: GithubNode): GithubNode;
+    static importJSON(serializedNode: SerializedGithubNode): GithubNode;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    constructor(title: string, image: string, link: string, key?: NodeKey);
+    exportJSON(): SerializedGithubNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): false;
+    decorate(): JSX.Element;
+}
+export declare function $createGithubNode(github: GithubInfoType): GithubNode;
+export declare function $isGithubNode(node: GithubNode | LexicalNode | null | undefined): node is GithubNode;

package/lib/ext/nodes/GithubNode.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DecoratorNode } from 'lexical';
+import { Suspense } from 'react';
+import GithubComponent from './GithubComp';
+function convertGithubElement(domNode) {
+    const githubStr = domNode.getAttribute('data-lexical-github');
+    if (!githubStr) {
+        return null;
+    }
+    try {
+        const parsed = JSON.parse(githubStr);
+        if (parsed && typeof parsed === 'object') {
+            const node = $createGithubNode({ title: parsed.title, image: parsed.image, link: parsed.link });
+            return { node };
+        }
+    }
+    catch (e) {
+        console.warn(`Failed to parse: ${githubStr}`, e);
+    }
+    return null;
+}
+export class GithubNode extends DecoratorNode {
+    __title;
+    __image;
+    __link;
+    static getType() {
+        return 'github';
+    }
+    static clone(node) {
+        return new GithubNode(node.__title, node.__image, node.__link, node.__key);
+    }
+    static importJSON(serializedNode) {
+        const { title, image, link } = serializedNode;
+        const node = $createGithubNode({
+            title,
+            image,
+            link,
+        });
+        return node;
+    }
+    exportDOM() {
+        const element = document.createElement('span');
+        element.className = 'github-node-container';
+        element.setAttribute('data-lexical-github', JSON.stringify({ title: this.__title, image: this.__image, link: this.__link }));
+        return { element };
+    }
+    static importDOM() {
+        return {
+            span: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-github')) {
+                    return null;
+                }
+                return {
+                    conversion: convertGithubElement,
+                    priority: 4,
+                };
+            },
+        };
+    }
+    constructor(title, image, link, key) {
+        super(key);
+        this.__title = title;
+        this.__image = image;
+        this.__link = link;
+    }
+    exportJSON() {
+        return {
+            title: this.__title,
+            image: this.__image,
+            link: this.__link,
+            type: 'github',
+            version: 1,
+        };
+    }
+    // View
+    createDOM(config) {
+        const span = document.createElement('span');
+        span.className = 'github-node-container';
+        span.setAttribute('data-lexical-github', JSON.stringify({ title: this.__title, image: this.__image, link: this.__link }));
+        return span;
+    }
+    updateDOM() {
+        return false;
+    }
+    decorate() {
+        return (_jsx(Suspense, { fallback: null, children: _jsx(GithubComponent, { title: this.__title, image: this.__image, link: this.__link }) }));
+    }
+}
+export function $createGithubNode(github) {
+    return new GithubNode(github?.title || '', github?.image || '', github?.link || '');
+}
+export function $isGithubNode(node) {
+    return node instanceof GithubNode;
+}

package/lib/ext/nodes/util.d.ts

@@ -0,0 +1,5 @@
+export interface GithubInfoType {
+    title?: string;
+    image?: string;
+    link?: string;
+}

package/lib/ext/nodes/util.js

@@ -0,0 +1 @@
+export {};

package/lib/ext/translation/translation-utils.d.ts

@@ -0,0 +1,16 @@
+import { ElementNode, LexicalNode, LexicalEditor } from 'lexical';
+export declare const $nodeToHtml: (editor: LexicalEditor, node: ElementNode) => string;
+export declare const $htmlToNodes: (editor: LexicalEditor, text: string) => LexicalNode[] | import("lexical").TextNode[];
+/**
+ * 判断 node 是否是有效的 TextNode
+ * - $isTextNode => true
+ * - format 不是 code
+ */
+export declare const $isValidTextNode: (node: LexicalNode) => boolean | "";
+/**
+ * 判断一个 ElementNode 是否含有效的 TextNode 的 child
+ */
+export declare const $hasValidTextNode: (elementNode: ElementNode) => boolean;
+export declare const $findTranslatableElementNodes: () => ElementNode[];
+export declare const $createNodeKeyToSidMap: () => Map<string, string>;
+export declare const $createSidToNodeKeyMap: () => Map<string, string>;