@blocklet/editor-lite 2.6.0

package/lib/main/nodes/ImageNode.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createEditor, DecoratorNode } from 'lexical';
+import { Suspense } from 'react';
+import ImageComponent from './ImageComponent';
+function convertImageElement(domNode) {
+    if (domNode instanceof HTMLImageElement) {
+        const { alt: altText, src } = domNode;
+        const node = $createImageNode({ altText, src });
+        return { node };
+    }
+    return null;
+}
+export class ImageNode extends DecoratorNode {
+    file;
+    __src;
+    __altText;
+    __width;
+    __height;
+    __maxWidth;
+    __showCaption;
+    __caption;
+    __markerState;
+    __frame;
+    __sizeMode;
+    // Captions cannot yet be used within editor cells
+    __captionsEnabled;
+    static getType() {
+        return 'image';
+    }
+    static clone(node) {
+        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__width, node.__height, node.__showCaption, node.__caption, node.__captionsEnabled, node.__key, node.file, node.__markerState, node.__frame, node.__sizeMode);
+    }
+    static importJSON(serializedNode) {
+        const { altText, height, width, maxWidth, caption, src, showCaption, markerState, frame, sizeMode } = serializedNode;
+        const node = $createImageNode({
+            altText,
+            height,
+            maxWidth,
+            showCaption,
+            src,
+            width,
+            markerState,
+            frame,
+            sizeMode,
+        });
+        const nestedEditor = node.__caption;
+        const editorState = nestedEditor.parseEditorState(caption.editorState);
+        if (!editorState.isEmpty()) {
+            nestedEditor.setEditorState(editorState);
+        }
+        return node;
+    }
+    exportDOM() {
+        const element = document.createElement('img');
+        element.setAttribute('src', this.__src || '');
+        element.setAttribute('alt', this.__altText);
+        return { element };
+    }
+    static importDOM() {
+        return {
+            img: (node) => ({
+                conversion: convertImageElement,
+                priority: 0,
+            }),
+        };
+    }
+    constructor(src, altText, maxWidth, width, height, showCaption, caption, captionsEnabled, key, file, markerState, frame, sizeMode) {
+        super(key);
+        this.__src = src;
+        this.__altText = altText;
+        this.__maxWidth = maxWidth;
+        this.__width = width || 'inherit';
+        this.__height = height || 'inherit';
+        this.__showCaption = showCaption || false;
+        this.__caption = caption || createEditor();
+        this.__captionsEnabled = captionsEnabled || captionsEnabled === undefined;
+        this.file = file;
+        this.__markerState = markerState;
+        this.__frame = frame;
+        this.__sizeMode = sizeMode;
+    }
+    exportJSON() {
+        return {
+            altText: this.getAltText(),
+            caption: this.__caption.toJSON(),
+            height: this.__height === 'inherit' ? 0 : this.__height,
+            maxWidth: this.__maxWidth,
+            showCaption: this.__showCaption,
+            src: this.getSrc(),
+            type: 'image',
+            version: 1,
+            width: this.__width === 'inherit' ? 0 : this.__width,
+            markerState: this.__markerState,
+            frame: this.__frame,
+            sizeMode: this.__sizeMode,
+        };
+    }
+    setWidthAndHeight(width, height) {
+        const writable = this.getWritable();
+        writable.__width = width;
+        writable.__height = height;
+    }
+    setShowCaption(showCaption) {
+        const writable = this.getWritable();
+        writable.__showCaption = showCaption;
+    }
+    setMarkerState(markerState) {
+        const writable = this.getWritable();
+        writable.__markerState = markerState;
+    }
+    setFrame(frame) {
+        const writable = this.getWritable();
+        writable.__frame = frame;
+    }
+    setSizeMode(sizeMode) {
+        const writable = this.getWritable();
+        writable.__sizeMode = sizeMode;
+    }
+    // View
+    createDOM(config) {
+        const span = document.createElement('span');
+        const { theme } = config;
+        const className = theme.image;
+        if (className !== undefined) {
+            span.className = `${className} be-image`;
+        }
+        return span;
+    }
+    updateDOM() {
+        return false;
+    }
+    getSrc() {
+        return this.__src;
+    }
+    setSrc(src) {
+        const writable = this.getWritable();
+        writable.__src = src;
+    }
+    getAltText() {
+        return this.__altText;
+    }
+    decorate() {
+        return (_jsx(Suspense, { fallback: null, children: _jsx(ImageComponent, { src: this.__src, file: this.file, altText: this.__altText, width: this.__width, height: this.__height, maxWidth: this.__maxWidth, nodeKey: this.getKey(), showCaption: this.__showCaption, caption: this.__caption, captionsEnabled: this.__captionsEnabled, markerState: this.__markerState, frame: this.__frame, sizeMode: this.__sizeMode, resizable: true }) }));
+    }
+}
+export function $createImageNode({ altText, height, maxWidth = 500, captionsEnabled, src, width, showCaption, caption, key, file, markerState, frame, sizeMode, }) {
+    return new ImageNode(src, altText, maxWidth, width, height, showCaption, caption, captionsEnabled, key, file, markerState, frame, sizeMode);
+}
+export function $isImageNode(node) {
+    return node instanceof ImageNode;
+}

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

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { EditorConfig, LexicalNode, SerializedTextNode, Spread } from 'lexical';
+import { TextNode } from 'lexical';
+export type SerializedKeywordNode = Spread<{
+    type: 'keyword';
+    version: 1;
+}, SerializedTextNode>;
+export declare class KeywordNode extends TextNode {
+    static getType(): string;
+    static clone(node: KeywordNode): KeywordNode;
+    static importJSON(serializedNode: SerializedKeywordNode): KeywordNode;
+    exportJSON(): SerializedKeywordNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    canInsertTextBefore(): boolean;
+    canInsertTextAfter(): boolean;
+    isTextEntity(): true;
+}
+export declare function $createKeywordNode(keyword: string): KeywordNode;
+export declare function $isKeywordNode(node: LexicalNode | null | undefined | undefined): boolean;

package/lib/main/nodes/KeywordNode.js

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { TextNode } from 'lexical';
+export class KeywordNode extends TextNode {
+    static getType() {
+        return 'keyword';
+    }
+    static clone(node) {
+        return new KeywordNode(node.__text, node.__key);
+    }
+    static importJSON(serializedNode) {
+        const node = $createKeywordNode(serializedNode.text);
+        node.setFormat(serializedNode.format);
+        node.setDetail(serializedNode.detail);
+        node.setMode(serializedNode.mode);
+        node.setStyle(serializedNode.style);
+        return node;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'keyword',
+            version: 1,
+        };
+    }
+    createDOM(config) {
+        const dom = super.createDOM(config);
+        dom.style.cursor = 'default';
+        dom.className = 'keyword';
+        return dom;
+    }
+    canInsertTextBefore() {
+        return false;
+    }
+    canInsertTextAfter() {
+        return false;
+    }
+    isTextEntity() {
+        return true;
+    }
+}
+export function $createKeywordNode(keyword) {
+    return new KeywordNode(keyword);
+}
+export function $isKeywordNode(node) {
+    return node instanceof KeywordNode;
+}

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

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { type Spread, type DOMConversionMap, type DOMExportOutput, type EditorConfig, type LexicalNode, type NodeKey, type SerializedTextNode, TextNode } from 'lexical';
+export type SerializedMentionNode = Spread<{
+    mentionName: string;
+    type: 'mention';
+    version: 1;
+}, SerializedTextNode>;
+export declare class MentionNode extends TextNode {
+    __mention: string;
+    static getType(): string;
+    static clone(node: MentionNode): MentionNode;
+    static importJSON(serializedNode: SerializedMentionNode): MentionNode;
+    constructor(mentionName: string, text?: string, key?: NodeKey);
+    exportJSON(): SerializedMentionNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    isTextEntity(): true;
+}
+export declare function $createMentionNode(mentionName: string, text?: string, key?: NodeKey): MentionNode;
+export declare function $isMentionNode(node: LexicalNode | null | undefined): node is MentionNode;

package/lib/main/nodes/MentionNode.js

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { $applyNodeReplacement, TextNode, } from 'lexical';
+function convertMentionElement(domNode) {
+    const { textContent } = domNode;
+    if (textContent !== null) {
+        const node = $createMentionNode(textContent);
+        return {
+            node,
+        };
+    }
+    return null;
+}
+const mentionStyle = 'background-color: transparent; font-weight: bold;';
+// node.__mention 用于存储/访问 user did, node.__text 负责显示 user name
+export class MentionNode extends TextNode {
+    __mention;
+    static getType() {
+        return 'mention';
+    }
+    static clone(node) {
+        return new MentionNode(node.__mention, node.__text, node.__key);
+    }
+    static importJSON(serializedNode) {
+        const node = $createMentionNode(serializedNode.mentionName);
+        node.setTextContent(serializedNode.text);
+        node.setFormat(serializedNode.format);
+        node.setDetail(serializedNode.detail);
+        node.setMode(serializedNode.mode);
+        node.setStyle(serializedNode.style);
+        return node;
+    }
+    constructor(mentionName, text, key) {
+        super(text ?? mentionName, key);
+        this.__mention = mentionName;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            mentionName: this.__mention,
+            type: 'mention',
+            version: 1,
+        };
+    }
+    createDOM(config) {
+        const dom = super.createDOM(config);
+        dom.style.cssText = mentionStyle;
+        dom.className = 'mention';
+        // 添加属性: data-did="<did>"
+        dom.dataset.did = this.__mention;
+        return dom;
+    }
+    exportDOM() {
+        const element = document.createElement('span');
+        element.setAttribute('data-lexical-mention', 'true');
+        element.textContent = this.__text;
+        return { element };
+    }
+    static importDOM() {
+        return {
+            span: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-mention')) {
+                    return null;
+                }
+                return {
+                    conversion: convertMentionElement,
+                    priority: 1,
+                };
+            },
+        };
+    }
+    isTextEntity() {
+        return true;
+    }
+}
+export function $createMentionNode(mentionName, text, key) {
+    const mentionNode = new MentionNode(mentionName, text, key);
+    mentionNode.setMode('segmented').toggleDirectionless();
+    return $applyNodeReplacement(mentionNode);
+}
+export function $isMentionNode(node) {
+    return node instanceof MentionNode;
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { Klass, LexicalNode } from 'lexical';
+declare const PlaygroundNodes: Array<Klass<LexicalNode>>;
+export default PlaygroundNodes;

package/lib/main/nodes/PlaygroundNodes.js

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { CodeHighlightNode, CodeNode } from '@lexical/code';
+import { AutoLinkNode, LinkNode } from '@lexical/link';
+import { ListItemNode, ListNode } from '@lexical/list';
+import { MarkNode } from '@lexical/mark';
+import { OverflowNode } from '@lexical/overflow';
+import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
+import { CollapsibleContainerNode } from '../plugins/CollapsiblePlugin/CollapsibleContainerNode';
+import { CollapsibleContentNode } from '../plugins/CollapsiblePlugin/CollapsibleContentNode';
+import { CollapsibleTitleNode } from '../plugins/CollapsiblePlugin/CollapsibleTitleNode';
+import { EmojiNode } from './EmojiNode';
+import { EquationNode } from './EquationNode';
+import { ExcalidrawNode } from './ExcalidrawNode';
+import { FigmaNode } from './FigmaNode';
+import { ImageNode } from './ImageNode';
+import { MentionNode } from './MentionNode';
+import { TweetNode } from './TweetNode';
+import { YouTubeNode } from './YouTubeNode';
+import { BilibiliNode } from '../../ext/BilibiliPlugin/BilibiliNode';
+import { BlockletEmbedNode } from '../../ext/BlockletEmbedPlugin/BlockletEmbedNode';
+import { PostLinkNode } from '../../ext/PostLinkEmbedPlugin/PostLinkNode';
+import { BookmarkNode } from '../../ext/BookmarkPlugin/BookmarkNode';
+import { GithubNode } from '../../ext/nodes/GithubNode';
+import { AlertNode } from '../../ext/Alert/AlertNode';
+import { VideoNode } from '../../ext/VideoPlugin';
+import { FileNode } from '../../ext/FilePlugin';
+const PlaygroundNodes = [
+    HeadingNode,
+    ListNode,
+    ListItemNode,
+    QuoteNode,
+    CodeNode,
+    TableNode,
+    TableCellNode,
+    TableRowNode,
+    CodeHighlightNode,
+    AutoLinkNode,
+    LinkNode,
+    OverflowNode,
+    ImageNode,
+    VideoNode,
+    MentionNode,
+    EmojiNode,
+    ExcalidrawNode,
+    EquationNode,
+    HorizontalRuleNode,
+    TweetNode,
+    YouTubeNode,
+    BilibiliNode,
+    BlockletEmbedNode,
+    PostLinkNode,
+    BookmarkNode,
+    FigmaNode,
+    MarkNode,
+    CollapsibleContainerNode,
+    CollapsibleContentNode,
+    CollapsibleTitleNode,
+    GithubNode,
+    AlertNode,
+    FileNode,
+];
+export default PlaygroundNodes;

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

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+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 type SerializedTweetNode = Spread<{
+    id: string;
+    type: 'tweet';
+    version: 1;
+}, SerializedDecoratorBlockNode>;
+export declare class TweetNode extends DecoratorBlockNode {
+    __id: string;
+    static getType(): string;
+    static clone(node: TweetNode): TweetNode;
+    static importJSON(serializedNode: SerializedTweetNode): TweetNode;
+    exportJSON(): SerializedTweetNode;
+    static importDOM(): DOMConversionMap<HTMLDivElement> | null;
+    exportDOM(): DOMExportOutput;
+    constructor(id: string, format?: ElementFormatType, key?: NodeKey);
+    getId(): string;
+    getTextContent(_includeInert?: boolean | undefined, _includeDirectionless?: false | undefined): string;
+    decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element;
+    isInline(): false;
+}
+export declare function $createTweetNode(tweetID: string): TweetNode;
+export declare function $isTweetNode(node: TweetNode | LexicalNode | null | undefined): node is TweetNode;

package/lib/main/nodes/TweetNode.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
+import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import { useCallback, useEffect, useRef, useState } from 'react';
+const WIDGET_SCRIPT_URL = 'https://platform.twitter.com/widgets.js';
+function convertTweetElement(domNode) {
+    const id = domNode.getAttribute('data-lexical-tweet-id');
+    if (id) {
+        const node = $createTweetNode(id);
+        return { node };
+    }
+    return null;
+}
+let isTwitterScriptLoading = true;
+function TweetComponent({ className, format, loadingComponent, nodeKey, onError, onLoad, tweetID, }) {
+    const containerRef = useRef(null);
+    const previousTweetIDRef = useRef('');
+    const [isTweetLoading, setIsTweetLoading] = useState(false);
+    const createTweet = useCallback(async () => {
+        try {
+            // @ts-expect-error Twitter is attached to the window.
+            await window.twttr.widgets.createTweet(tweetID, containerRef.current);
+            setIsTweetLoading(false);
+            isTwitterScriptLoading = false;
+            if (onLoad) {
+                onLoad();
+            }
+        }
+        catch (error) {
+            if (onError) {
+                onError(String(error));
+            }
+        }
+    }, [onError, onLoad, tweetID]);
+    useEffect(() => {
+        if (tweetID !== previousTweetIDRef.current) {
+            setIsTweetLoading(true);
+            if (isTwitterScriptLoading) {
+                const script = document.createElement('script');
+                script.src = WIDGET_SCRIPT_URL;
+                script.async = true;
+                document.body?.appendChild(script);
+                script.onload = createTweet;
+                if (onError) {
+                    script.onerror = onError;
+                }
+            }
+            else {
+                createTweet();
+            }
+            if (previousTweetIDRef) {
+                previousTweetIDRef.current = tweetID;
+            }
+        }
+    }, [createTweet, onError, tweetID]);
+    return (_jsxs(BlockWithAlignableContents, { className: className, format: format, nodeKey: nodeKey, children: [isTweetLoading ? loadingComponent : null, _jsx("div", { style: { display: 'inline-block', width: '100%' }, ref: containerRef })] }));
+}
+export class TweetNode extends DecoratorBlockNode {
+    __id;
+    static getType() {
+        return 'tweet';
+    }
+    static clone(node) {
+        return new TweetNode(node.__id, node.__format, node.__key);
+    }
+    static importJSON(serializedNode) {
+        const node = $createTweetNode(serializedNode.id);
+        node.setFormat(serializedNode.format);
+        return node;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            id: this.getId(),
+            type: 'tweet',
+            version: 1,
+        };
+    }
+    static importDOM() {
+        return {
+            div: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-tweet-id')) {
+                    return null;
+                }
+                return {
+                    conversion: convertTweetElement,
+                    priority: 2,
+                };
+            },
+        };
+    }
+    exportDOM() {
+        const element = document.createElement('div');
+        element.setAttribute('data-lexical-tweet-id', this.__id);
+        const text = document.createTextNode(this.getTextContent());
+        element.append(text);
+        return { element };
+    }
+    constructor(id, format, key) {
+        super(format, key);
+        this.__id = id;
+    }
+    getId() {
+        return this.__id;
+    }
+    getTextContent(_includeInert, _includeDirectionless) {
+        return `https://twitter.com/i/web/status/${this.__id}`;
+    }
+    decorate(editor, config) {
+        const embedBlockTheme = config.theme.embedBlock || {};
+        const className = {
+            base: embedBlockTheme.base || '',
+            focus: embedBlockTheme.focus || '',
+        };
+        return (_jsx(TweetComponent, { className: className, format: this.__format, loadingComponent: "Loading...", nodeKey: this.getKey(), tweetID: this.__id }));
+    }
+    isInline() {
+        return false;
+    }
+}
+export function $createTweetNode(tweetID) {
+    return new TweetNode(tweetID);
+}
+export function $isTweetNode(node) {
+    return node instanceof TweetNode;
+}

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

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+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 type SerializedYouTubeNode = Spread<{
+    videoID: string;
+    type: 'youtube';
+    version: 1;
+}, SerializedDecoratorBlockNode>;
+export declare class YouTubeNode extends DecoratorBlockNode {
+    __id: string;
+    static getType(): string;
+    static clone(node: YouTubeNode): YouTubeNode;
+    static importJSON(serializedNode: SerializedYouTubeNode): YouTubeNode;
+    exportJSON(): SerializedYouTubeNode;
+    constructor(id: string, 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 $createYouTubeNode(videoID: string): YouTubeNode;
+export declare function $isYouTubeNode(node: YouTubeNode | LexicalNode | null | undefined): node is YouTubeNode;