@blocklet/editor-lite 2.6.0

package/lib/ext/BlockletEmbedPlugin/BlockletEmbedNode.d.ts

@@ -0,0 +1,30 @@
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread } from 'lexical';
+import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import type { JSX } from 'react';
+export interface Embed {
+    title: string;
+    url: string;
+    originalUrl: string;
+}
+export type SerializedBlockletEmbedNode = Spread<{
+    embed: Embed;
+    type: 'blocklet-embed';
+    version: 1;
+}, SerializedDecoratorBlockNode>;
+export declare class BlockletEmbedNode extends DecoratorBlockNode {
+    __embed: Embed;
+    static getType(): string;
+    static clone(node: BlockletEmbedNode): BlockletEmbedNode;
+    static importJSON(serializedNode: SerializedBlockletEmbedNode): BlockletEmbedNode;
+    exportJSON(): SerializedBlockletEmbedNode;
+    constructor(__embed: Embed, format?: ElementFormatType, key?: NodeKey);
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    updateDOM(): false;
+    getId(): string;
+    getTextContent(_includeInert?: boolean | undefined, _includeDirectionless?: false | undefined): string;
+    decorate(_editor: LexicalEditor, config: EditorConfig): JSX.Element;
+    isInline(): false;
+}
+export declare function $createBlockletEmbedNode(embed: Embed): BlockletEmbedNode;
+export declare function $isBlockletEmbedNode(node: BlockletEmbedNode | LexicalNode | null | undefined): node is BlockletEmbedNode;

package/lib/ext/BlockletEmbedPlugin/BlockletEmbedNode.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
+import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import BlockletEmbed from './BlockletEmbed';
+function BlockletEmbedComponent({ className, format, nodeKey, embed }) {
+    return (_jsx(BlockWithAlignableContents, { className: className, format: format, nodeKey: nodeKey, children: _jsx(BlockletEmbed, { url: embed.url, title: embed.title, originalUrl: embed.originalUrl }) }));
+}
+function convertBlockletEmbedElement(domNode) {
+    const embedStr = domNode.getAttribute('data-lexical-blocklet-embed');
+    try {
+        const parsed = JSON.parse(embedStr);
+        if (parsed) {
+            const node = $createBlockletEmbedNode(parsed);
+            return { node };
+        }
+    }
+    catch (e) {
+        console.warn(`Failed to parse: ${embedStr}`, e);
+    }
+    return null;
+}
+export class BlockletEmbedNode extends DecoratorBlockNode {
+    __embed;
+    static getType() {
+        return 'blocklet-embed';
+    }
+    static clone(node) {
+        return new BlockletEmbedNode({ ...node.__embed }, node.__format, node.__key);
+    }
+    static importJSON(serializedNode) {
+        const node = $createBlockletEmbedNode(serializedNode.embed);
+        node.setFormat(serializedNode.format);
+        return node;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'blocklet-embed',
+            version: 1,
+            embed: this.__embed,
+        };
+    }
+    constructor(__embed, format, key) {
+        super(format, key);
+        this.__embed = __embed;
+    }
+    exportDOM() {
+        const element = document.createElement('iframe');
+        element.setAttribute('data-lexical-blocklet-embed', JSON.stringify(this.__embed));
+        element.setAttribute('width', '100%');
+        // element.setAttribute('height', '315');
+        element.setAttribute('frameborder', '0');
+        element.setAttribute('src', this.__embed.url);
+        element.setAttribute('title', this.__embed.title);
+        return { element };
+    }
+    static importDOM() {
+        return {
+            iframe: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-blocklet-embed')) {
+                    return null;
+                }
+                return {
+                    conversion: convertBlockletEmbedElement,
+                    priority: 1,
+                };
+            },
+        };
+    }
+    updateDOM() {
+        return false;
+    }
+    getId() {
+        return this.__embed.url;
+    }
+    getTextContent(_includeInert, _includeDirectionless) {
+        return this.__embed.url;
+    }
+    decorate(_editor, config) {
+        const embedBlockTheme = config.theme.embedBlock || {};
+        const className = {
+            base: embedBlockTheme.base || '',
+            focus: embedBlockTheme.focus || '',
+        };
+        return (_jsx(BlockletEmbedComponent, { className: className, format: this.__format, nodeKey: this.getKey(), embed: this.__embed }));
+    }
+    isInline() {
+        return false;
+    }
+}
+export function $createBlockletEmbedNode(embed) {
+    return new BlockletEmbedNode(embed);
+}
+export function $isBlockletEmbedNode(node) {
+    return node instanceof BlockletEmbedNode;
+}

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

@@ -0,0 +1,12 @@
+import { LexicalCommand } from 'lexical';
+import { type JSX } from 'react';
+import type { LexicalEditor } from 'lexical';
+import { AutoEmbedOption } from '@lexical/react/LexicalAutoEmbedPlugin';
+import { Embed } from './BlockletEmbedNode';
+import { EditorConfig } from '../../config';
+export declare const INSERT_BLOCKLET_EMBED_COMMAND: LexicalCommand<Embed>;
+/**
+ * 创建 "Embed Blocklet Embed" AutoEmbedOption
+ */
+export declare const createBlockletEmbedOption: (editor: LexicalEditor, editorConfig: EditorConfig) => AutoEmbedOption | null;
+export default function BlockletEmbedPlugin(): JSX.Element | null;

package/lib/ext/BlockletEmbedPlugin/index.js

@@ -0,0 +1,76 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $insertNodeToNearestRoot } from '@lexical/utils';
+import { COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
+import { useEffect } from 'react';
+import { AutoEmbedOption } from '@lexical/react/LexicalAutoEmbedPlugin';
+import pick from 'lodash/pick';
+import { joinURL } from 'ufo';
+import { $createBlockletEmbedNode, BlockletEmbedNode } from './BlockletEmbedNode';
+import { $getLinkNode } from '../utils';
+export const INSERT_BLOCKLET_EMBED_COMMAND = createCommand('INSERT_BLOCKLET_EMBED_COMMAND');
+const parseBlockletEmbedUrl = async (blockletEmbedEndpoint, url) => {
+    const urlObj = new URL(blockletEmbedEndpoint);
+    urlObj.searchParams.set('url', url);
+    const response = await fetch(urlObj.href);
+    const data = await response.json();
+    const embed = data?.embed?.[0];
+    if (embed) {
+        const embedUrl = joinURL(data.origin, embed.url);
+        return {
+            id: url,
+            url: embedUrl,
+            title: embed.title,
+            originalUrl: url,
+        };
+    }
+};
+const embedCache = {};
+/**
+ * 创建 "Embed Blocklet Embed" AutoEmbedOption
+ */
+export const createBlockletEmbedOption = (editor, editorConfig) => {
+    const linkNode = $getLinkNode(editor);
+    const url = linkNode?.__url;
+    if (editorConfig.blockletEmbedEndpoint && url) {
+        // 粘贴一个 link 到 editor 中, 弹出 embed menu 后 createBlockletEmbedOption 可能会被再次执行 (比如光标 focus 状态变化导致 AutoEmbedPlugin 内部的 re-render)
+        // embedCache 此时有额外的作用: 记住 option#disabled 状态以避免 loading 效果再次出现
+        let embed = embedCache[url];
+        const option = new AutoEmbedOption('Embed Blocklet Embed', {
+            onSelect: () => {
+                if (embed) {
+                    editor.dispatchCommand(INSERT_BLOCKLET_EMBED_COMMAND, pick(embed, 'title', 'url', 'originalUrl'));
+                    linkNode?.remove();
+                }
+            },
+        });
+        // @ts-ignore
+        option.disabled = !embed;
+        if (!embed) {
+            parseBlockletEmbedUrl(editorConfig.blockletEmbedEndpoint, url).then((result) => {
+                if (result) {
+                    // @ts-ignore
+                    option.disabled = false;
+                    option.ref?.current?.classList.remove('embed-option-disabled');
+                    embedCache[url] = result;
+                    embed = result;
+                }
+            });
+        }
+        return option;
+    }
+    return null;
+};
+export default function BlockletEmbedPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([BlockletEmbedNode])) {
+            throw new Error('BlockletEmbedPlugin: BlockletEmbedNode not registered on editor');
+        }
+        return editor.registerCommand(INSERT_BLOCKLET_EMBED_COMMAND, (payload) => {
+            const blockletEmbedNode = $createBlockletEmbedNode(payload);
+            $insertNodeToNearestRoot(blockletEmbedNode);
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}

package/lib/ext/BlurTextPlugin.d.ts

@@ -0,0 +1 @@
+export declare const BlurTextPlugin: () => null;

package/lib/ext/BlurTextPlugin.js

@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import { TextNode } from 'lexical';
+const BLUR_TEXT_PLUGIN_FLAG = '@BLUR_TEXT_PLUGIN@';
+const removeNodeBlurTextFlag = (node) => {
+    node?.setTextContent(node.getTextContent().replaceAll(BLUR_TEXT_PLUGIN_FLAG, ''));
+    node?.setStyle('filter: blur(4px) opacity(0.25); transition: all 0.2s ease-in-out;');
+};
+export const BlurTextPlugin = () => {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return mergeRegister(editor.registerNodeTransform(TextNode, (node) => {
+            if (node.isSimpleText()) {
+                const text = node.getTextContent();
+                const hasBlurTextFlag = (text.match(/@BLUR_TEXT_PLUGIN@/g) || [])?.length > 0;
+                try {
+                    if (hasBlurTextFlag) {
+                        const index = text.indexOf(BLUR_TEXT_PLUGIN_FLAG);
+                        const lastIndex = text.lastIndexOf(BLUR_TEXT_PLUGIN_FLAG) + BLUR_TEXT_PLUGIN_FLAG.length;
+                        // @ts-ignore
+                        const [startNode, blurNode, endNode] = node.splitText(index, lastIndex);
+                        if (!blurNode) {
+                            removeNodeBlurTextFlag(startNode);
+                            removeNodeBlurTextFlag(endNode);
+                        }
+                        else {
+                            removeNodeBlurTextFlag(blurNode);
+                        }
+                    }
+                }
+                catch (error) {
+                    // ignore error
+                    console.error('Blur Text Plugin error: ', error);
+                }
+            }
+        }));
+    }, []);
+    return null;
+};

package/lib/ext/BookmarkPlugin/Bookmark.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+import type { BookmarkInfo } from './BookmarkNode';
+export declare function Bookmark({ url, title, description, image, favicon, loading }: BookmarkInfo): JSX.Element;
+export declare function BookmarkLoader({ url, onLoaded }: {
+    url: string;
+    onLoaded: (info: BookmarkInfo) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/ext/BookmarkPlugin/Bookmark.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { Box, CircularProgress, styled } from '@mui/material';
+import { useRequest } from 'ahooks';
+import { useEditorConfig } from '../../config';
+import { fetchOpenGraphInfo } from '../utils';
+const isGithubRepo = (url) => {
+    const reg = /^https?:\/\/github.com\//;
+    return reg.test(url);
+};
+const getHost = (url) => {
+    try {
+        return new URL(url).host;
+    }
+    catch (e) {
+        return url;
+    }
+};
+export function Bookmark({ url, title, description, image, favicon, loading }) {
+    // title 显示:
+    // - 有 title 值则直接显示
+    // - loading 状态显示 "Fetching preview"
+    // - 非 loading 状态显示 url 的 host
+    const renderTitle = () => {
+        const previewTitle = title || (loading ? 'Fetching preview' : getHost(url));
+        return (_jsxs(Box, { className: "be-bookmark-title be-bookmark-ellipsis", sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [loading && _jsx(CircularProgress, { size: 14, sx: { color: 'grey.400' } }), _jsx(Box, { component: "span", sx: { color: loading ? 'grey.700' : 'inherit' }, children: previewTitle })] }));
+    };
+    if (isGithubRepo(url)) {
+        return (_jsxs(Root, { href: url, target: "_blank", className: "github-bookmark", children: [image && (_jsxs("div", { className: "be-github-image", children: [_jsx(Image, { src: image }), _jsx(Icon, { icon: "mdi:github", style: { fontSize: 18 }, className: "be-github-image-icon" })] })), _jsxs("div", { className: "be-bookmark-texts", children: [renderTitle(), description && _jsx("div", { className: "be-bookmark-description be-bookmark-clamp2", children: description }), loading && (_jsx(Box, { className: "be-bookmark-url-content", sx: { pt: 1 }, children: _jsx("div", { className: "be-bookmark-url be-bookmark-ellipsis", children: url }) }))] })] }));
+    }
+    return (_jsxs(Root, { href: url, target: "_blank", children: [_jsxs("div", { className: "be-bookmark-texts", children: [renderTitle(), _jsx("div", { className: "be-bookmark-description be-bookmark-clamp2", children: description }), _jsxs("div", { className: "be-bookmark-url-content", children: [favicon && _jsx("img", { src: favicon, alt: "favicon", className: "be-bookmark-favicon" }), _jsx("div", { className: "be-bookmark-url be-bookmark-ellipsis", children: url })] })] }), image && _jsx("div", { className: "be-bookmark-image", style: { backgroundImage: `url(${image})` } })] }));
+}
+const Root = styled('a') `
+  box-sizing: border-box;
+  display: inline-flex;
+  width: 100%;
+  margin: 8px 0;
+  border: 1px solid;
+  border-color: ${({ theme }) => theme.palette.divider};
+  overflow: hidden;
+  color: inherit;
+  border-radius: 4px;
+  text-decoration: none;
+  cursor: pointer;
+
+  :hover {
+    background: ${({ theme }) => theme.palette.grey[50]};
+  }
+
+  .be-bookmark-texts {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    padding: 16px;
+    font-size: 14px;
+    .be-bookmark-title {
+    }
+    .be-bookmark-description {
+      margin: 4px 0;
+      line-height: 1.2;
+      font-size: 12px;
+      color: ${({ theme }) => theme.palette.text.secondary};
+    }
+
+    .be-bookmark-url-content {
+      display: flex;
+      align-items: center;
+      margin-top: auto;
+
+      .be-bookmark-url {
+        font-size: 12px;
+        color: ${({ theme }) => theme.palette.text.secondary};
+        line-height: 1;
+      }
+
+      .be-bookmark-favicon {
+        width: 18px;
+        height: 18px;
+        border-radius: 100%;
+        margin-right: 8px;
+      }
+    }
+  }
+
+  .be-bookmark-image {
+    flex: 0 0 auto;
+    margin-left: auto;
+    // The recommended size for an Open Graph (OG) image is 1200 x 630 pixels with an aspect ratio of 1.91:1
+    width: 300px;
+    height: 158px;
+    background-size: cover;
+    background-position: center center;
+  }
+
+  @media (max-width: 768px) {
+    .be-bookmark-image {
+      width: 200px;
+      height: 105px;
+    }
+  }
+
+  @media (max-width: 500px) {
+    .be-bookmark-image {
+      display: none;
+    }
+  }
+
+  .be-bookmark-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .be-bookmark-clamp2 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  &.github-bookmark {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    border-radius: 4px;
+
+    .be-github-image-icon {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      background: ${({ theme }) => theme.palette.background.paper};
+      border-radius: 100%;
+      z-index: 1;
+    }
+
+    .be-github-image {
+      width: 40px;
+      min-height: 40px;
+      max-height: 40px;
+      position: relative;
+      border-radius: 100%;
+      margin-right: 12px;
+    }
+
+    .be-bookmark-texts {
+      padding: 0;
+    }
+  }
+`;
+const Image = styled('img') `
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  object-fit: cover;
+`;
+export function BookmarkLoader({ url, onLoaded }) {
+    const { openGraphEndpoint } = useEditorConfig();
+    const { data, loading } = useRequest(async () => {
+        if (!openGraphEndpoint) {
+            return null;
+        }
+        const openGraphInfo = await fetchOpenGraphInfo(openGraphEndpoint, url);
+        if (openGraphInfo) {
+            onLoaded(openGraphInfo);
+        }
+        return openGraphInfo;
+    });
+    return _jsx(Bookmark, { url: url, title: "", loading: loading || !data, ...data });
+}

package/lib/ext/BookmarkPlugin/BookmarkNode.d.ts

@@ -0,0 +1,35 @@
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread } from 'lexical';
+import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import type { JSX } from 'react';
+export interface BookmarkInfo {
+    url: string;
+    title: string;
+    description?: string;
+    image?: string;
+    favicon?: string;
+    loading?: boolean;
+    selfLoad?: boolean;
+}
+export type SerializedBookmarkNode = Spread<{
+    bookmark: BookmarkInfo;
+    type: 'bookmark';
+    version: 1;
+}, SerializedDecoratorBlockNode>;
+export declare class BookmarkNode extends DecoratorBlockNode {
+    __bookmark: BookmarkInfo;
+    static getType(): string;
+    static clone(node: BookmarkNode): BookmarkNode;
+    static importJSON(serializedNode: SerializedBookmarkNode): BookmarkNode;
+    exportJSON(): SerializedBookmarkNode;
+    constructor(__bookmark: BookmarkInfo, format?: ElementFormatType, key?: NodeKey);
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    updateDOM(): false;
+    getId(): string;
+    getTextContent(_includeInert?: boolean | undefined, _includeDirectionless?: false | undefined): string;
+    setBookmark(bookmark: BookmarkInfo): void;
+    decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element;
+    isInline(): false;
+}
+export declare function $createBookmarkNode(bookmark: BookmarkInfo | string): BookmarkNode;
+export declare function $isBookmarkNode(node: BookmarkNode | LexicalNode | null | undefined): node is BookmarkNode;

package/lib/ext/BookmarkPlugin/BookmarkNode.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
+import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import { Bookmark, BookmarkLoader } from './Bookmark';
+function BookmarkComponent({ className, format, nodeKey, bookmark, onLoaded }) {
+    if (bookmark.selfLoad) {
+        return (_jsx(BlockWithAlignableContents, { className: className, format: format, nodeKey: nodeKey, children: _jsx(BookmarkLoader, { url: bookmark.url, onLoaded: onLoaded }) }));
+    }
+    return (_jsx(BlockWithAlignableContents, { className: className, format: format, nodeKey: nodeKey, children: _jsx(Bookmark, { url: bookmark.url, title: bookmark.title, description: bookmark.description, image: bookmark.image, favicon: bookmark.favicon, loading: bookmark.loading }) }));
+}
+function convertBookmarkElement(domNode) {
+    const bookmarkStr = domNode.getAttribute('data-lexical-bookmark');
+    try {
+        const parsed = JSON.parse(bookmarkStr);
+        if (parsed) {
+            const node = $createBookmarkNode(parsed);
+            return { node };
+        }
+    }
+    catch (e) {
+        console.warn(`Failed to parse: ${bookmarkStr}`, e);
+    }
+    return null;
+}
+export class BookmarkNode extends DecoratorBlockNode {
+    __bookmark;
+    static getType() {
+        return 'bookmark';
+    }
+    static clone(node) {
+        return new BookmarkNode({ ...node.__bookmark }, node.__format, node.__key);
+    }
+    static importJSON(serializedNode) {
+        const node = $createBookmarkNode(serializedNode.bookmark);
+        node.setFormat(serializedNode.format);
+        return node;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'bookmark',
+            version: 1,
+            bookmark: this.__bookmark,
+        };
+    }
+    constructor(__bookmark, format, key) {
+        super(format, key);
+        this.__bookmark = __bookmark;
+    }
+    exportDOM() {
+        const element = document.createElement('iframe');
+        element.setAttribute('data-lexical-bookmark', JSON.stringify(this.__bookmark));
+        element.setAttribute('width', '100%');
+        // element.setAttribute('height', '315');
+        element.setAttribute('frameborder', '0');
+        element.setAttribute('src', this.__bookmark.url);
+        element.setAttribute('title', this.__bookmark.title);
+        return { element };
+    }
+    static importDOM() {
+        return {
+            iframe: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-bookmark')) {
+                    return null;
+                }
+                return {
+                    conversion: convertBookmarkElement,
+                    priority: 1,
+                };
+            },
+        };
+    }
+    updateDOM() {
+        return false;
+    }
+    getId() {
+        return this.__bookmark.url;
+    }
+    getTextContent(_includeInert, _includeDirectionless) {
+        return this.__bookmark.url;
+    }
+    setBookmark(bookmark) {
+        const writable = this.getWritable();
+        writable.__bookmark = bookmark;
+    }
+    decorate(editor, config) {
+        const embedBlockTheme = config.theme.embedBlock || {};
+        const className = {
+            base: embedBlockTheme.base || '',
+            focus: embedBlockTheme.focus || '',
+        };
+        return (_jsx(BookmarkComponent, { className: className, format: this.__format, nodeKey: this.getKey(), bookmark: this.__bookmark, onLoaded: (bookmark) => {
+                editor.update(() => {
+                    this.setBookmark({ ...bookmark, url: this.__bookmark.url, selfLoad: false });
+                });
+            } }));
+    }
+    isInline() {
+        return false;
+    }
+}
+export function $createBookmarkNode(bookmark) {
+    if (typeof bookmark === 'string') {
+        return new BookmarkNode({ url: bookmark, title: '', loading: true, selfLoad: true });
+    }
+    return new BookmarkNode(bookmark);
+}
+export function $isBookmarkNode(node) {
+    return node instanceof BookmarkNode;
+}

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

@@ -0,0 +1,11 @@
+import { LexicalCommand, LexicalEditor } from 'lexical';
+import { type JSX } from 'react';
+import { AutoEmbedOption } from '@lexical/react/LexicalAutoEmbedPlugin';
+import { BookmarkInfo } from './BookmarkNode';
+import { EditorConfig } from '../../config';
+export declare const INSERT_BOOKMARK_COMMAND: LexicalCommand<BookmarkInfo>;
+/**
+ * 创建 "Create bookmark" AutoEmbedOption
+ */
+export declare const createBookmarkOption: (editor: LexicalEditor, editorConfig: EditorConfig) => AutoEmbedOption | null;
+export default function BookmarkPlugin(): JSX.Element | null;

package/lib/ext/BookmarkPlugin/index.js

@@ -0,0 +1,45 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $insertNodeToNearestRoot } from '@lexical/utils';
+import { COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
+import { useEffect } from 'react';
+import { AutoEmbedOption } from '@lexical/react/LexicalAutoEmbedPlugin';
+import { $createBookmarkNode, BookmarkNode } from './BookmarkNode';
+import { $getLinkNode, fetchOpenGraphInfo } from '../utils';
+export const INSERT_BOOKMARK_COMMAND = createCommand('INSERT_BOOKMARK_COMMAND');
+/**
+ * 创建 "Create bookmark" AutoEmbedOption
+ */
+export const createBookmarkOption = (editor, editorConfig) => {
+    const linkNode = $getLinkNode(editor);
+    const url = linkNode?.__url;
+    if (editorConfig.openGraphEndpoint && url) {
+        return new AutoEmbedOption('Create bookmark', {
+            onSelect: async () => {
+                const bookmarkNode = $createBookmarkNode({ loading: true, title: '', url });
+                $insertNodeToNearestRoot(bookmarkNode);
+                editor.update(() => {
+                    linkNode.remove();
+                });
+                const openGraphInfo = await fetchOpenGraphInfo(editorConfig.openGraphEndpoint, url);
+                editor.update(() => {
+                    bookmarkNode.replace($createBookmarkNode({ ...openGraphInfo, title: openGraphInfo?.title || '', url }));
+                });
+            },
+        });
+    }
+    return null;
+};
+export default function BookmarkPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([BookmarkNode])) {
+            throw new Error('BookmarkPlugin: BookmarkNode not registered on editor');
+        }
+        return editor.registerCommand(INSERT_BOOKMARK_COMMAND, (payload) => {
+            const bookmarkNode = $createBookmarkNode(payload);
+            $insertNodeToNearestRoot(bookmarkNode);
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}

package/lib/ext/BusyPlugin.d.ts

@@ -0,0 +1,9 @@
+import { LexicalCommand } from 'lexical';
+interface Payload {
+    busy: boolean;
+}
+export declare const UPDATE_BUSY_COMMAND: LexicalCommand<Payload>;
+export declare function BusyPlugin({ onChange }: {
+    onChange: (busy: boolean) => void;
+}): null;
+export {};

package/lib/ext/BusyPlugin.js

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
+import { mergeRegister } from '@lexical/utils';
+export const UPDATE_BUSY_COMMAND = createCommand('UPDATE_BUSY_COMMAND');
+export function BusyPlugin({ onChange }) {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (editor.isEditable()) {
+            return mergeRegister(editor.registerCommand(UPDATE_BUSY_COMMAND, (payload) => {
+                onChange(payload.busy);
+                return true;
+            }, COMMAND_PRIORITY_EDITOR));
+        }
+    }, [editor]);
+    return null;
+}