@blocklet/editor 2.2.46 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.2.46",
+  "version": "2.3.0",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -32,30 +32,29 @@
     "@excalidraw/excalidraw": "^0.14.2",
     "@iconify/iconify": "^3.1.1",
     "@iconify/icons-tabler": "^1.2.95",
-    "@lexical/clipboard": "0.13.1",
-    "@lexical/code": "0.13.1",
-    "@lexical/file": "0.13.1",
-    "@lexical/hashtag": "0.13.1",
-    "@lexical/headless": "0.13.1",
-    "@lexical/html": "0.13.1",
-    "@lexical/link": "0.13.1",
-    "@lexical/list": "0.13.1",
-    "@lexical/mark": "0.13.1",
-    "@lexical/markdown": "0.13.1",
-    "@lexical/overflow": "0.13.1",
-    "@lexical/react": "0.13.1",
-    "@lexical/rich-text": "0.13.1",
-    "@lexical/selection": "0.13.1",
-    "@lexical/table": "0.13.1",
-    "@lexical/utils": "0.13.1",
-    "@lexical/yjs": "0.13.1",
+    "@lexical/clipboard": "^0.30.0",
+    "@lexical/code": "^0.30.0",
+    "@lexical/file": "^0.30.0",
+    "@lexical/hashtag": "^0.30.0",
+    "@lexical/headless": "^0.30.0",
+    "@lexical/html": "^0.30.0",
+    "@lexical/link": "^0.30.0",
+    "@lexical/list": "^0.30.0",
+    "@lexical/mark": "^0.30.0",
+    "@lexical/markdown": "^0.30.0",
+    "@lexical/overflow": "^0.30.0",
+    "@lexical/react": "^0.30.0",
+    "@lexical/rich-text": "^0.30.0",
+    "@lexical/selection": "^0.30.0",
+    "@lexical/table": "^0.30.0",
+    "@lexical/utils": "^0.30.0",
+    "@lexical/yjs": "^0.30.0",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@popperjs/core": "^2.11.8",
     "ahooks": "^3.8.1",
     "joi": "^17.13.3",
-    "katex": "^0.15.6",
     "leven": "^4.0.0",
-    "lexical": "0.13.1",
+    "lexical": "^0.30.0",
     "lodash": "^4.17.21",
     "lottie-react": "^2.4.0",
     "marked": "^15.0.8",
@@ -69,7 +68,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "^2.2.46"
+    "@blocklet/pdf": "^2.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

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

@@ -1,34 +0,0 @@
-/**
- * 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.
- *
- */
-/// <reference types="react" />
-import type { Spread } from 'lexical';
-import { DecoratorNode, EditorConfig, NodeKey, SerializedLexicalNode } from 'lexical';
-declare global {
-    interface Navigator {
-        userAgentData?: {
-            mobile: boolean;
-        };
-    }
-}
-export type SerializedAutocompleteNode = Spread<{
-    type: 'autocomplete';
-    version: 1;
-    uuid: string;
-}, SerializedLexicalNode>;
-export declare class AutocompleteNode extends DecoratorNode<JSX.Element | null> {
-    __uuid: string;
-    static clone(node: AutocompleteNode): AutocompleteNode;
-    static getType(): 'autocomplete';
-    static importJSON(serializedNode: SerializedAutocompleteNode): AutocompleteNode;
-    exportJSON(): SerializedAutocompleteNode;
-    constructor(uuid: string, key?: NodeKey);
-    updateDOM(prevNode: unknown, dom: HTMLElement, config: EditorConfig): boolean;
-    createDOM(config: EditorConfig): HTMLElement;
-    decorate(): JSX.Element | null;
-}
-export declare function $createAutocompleteNode(uuid: string): AutocompleteNode;

package/lib/main/nodes/AutocompleteNode.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DecoratorNode } from 'lexical';
-import { useSharedAutocompleteContext } from '../context/SharedAutocompleteContext';
-import { uuid as UUID } from '../plugins/AutocompletePlugin';
-export class AutocompleteNode extends DecoratorNode {
-    // TODO add comment
-    __uuid;
-    static clone(node) {
-        return new AutocompleteNode(node.__key);
-    }
-    static getType() {
-        return 'autocomplete';
-    }
-    static importJSON(serializedNode) {
-        const node = $createAutocompleteNode(serializedNode.uuid);
-        return node;
-    }
-    exportJSON() {
-        return {
-            ...super.exportJSON(),
-            type: 'autocomplete',
-            uuid: this.__uuid,
-            version: 1,
-        };
-    }
-    constructor(uuid, key) {
-        super(key);
-        this.__uuid = uuid;
-    }
-    updateDOM(prevNode, dom, config) {
-        return false;
-    }
-    createDOM(config) {
-        return document.createElement('span');
-    }
-    decorate() {
-        if (this.__uuid !== UUID) {
-            return null;
-        }
-        return _jsx(AutocompleteComponent, {});
-    }
-}
-export function $createAutocompleteNode(uuid) {
-    return new AutocompleteNode(uuid);
-}
-function AutocompleteComponent() {
-    const [suggestion] = useSharedAutocompleteContext();
-    const { userAgentData } = window.navigator;
-    const isMobile = userAgentData !== undefined ? userAgentData.mobile : window.innerWidth <= 800 && window.innerHeight <= 600;
-    // TODO Move to theme
-    return (_jsxs("span", { style: { color: '#ccc' }, spellCheck: "false", children: [suggestion, " ", isMobile ? '(SWIPE \u2B95)' : '(TAB)'] }));
-}

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

@@ -1,16 +0,0 @@
-/**
- * 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.
- *
- */
-/// <reference types="react" />
-import type { NodeKey } from 'lexical';
-type EquationComponentProps = {
-    equation: string;
-    inline: boolean;
-    nodeKey: NodeKey;
-};
-export default function EquationComponent({ equation, inline, nodeKey }: EquationComponentProps): JSX.Element;
-export {};

package/lib/main/nodes/EquationComponent.js

@@ -1,64 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { mergeRegister } from '@lexical/utils';
-import { $getNodeByKey, $getSelection, $isNodeSelection, COMMAND_PRIORITY_HIGH, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
-import { lazyRetry as lazy } from '@arcblock/ux/lib/Util';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import EquationEditor from '../ui/EquationEditor';
-import { $isEquationNode } from './EquationNode';
-const KatexRenderer = lazy(() => import('../ui/KatexRenderer'));
-export default function EquationComponent({ equation, inline, nodeKey }) {
-    const [editor] = useLexicalComposerContext();
-    const [equationValue, setEquationValue] = useState(equation);
-    const [showEquationEditor, setShowEquationEditor] = useState(false);
-    const inputRef = useRef(null);
-    const onHide = useCallback((restoreSelection) => {
-        setShowEquationEditor(false);
-        editor.update(() => {
-            const node = $getNodeByKey(nodeKey);
-            if ($isEquationNode(node)) {
-                node.setEquation(equationValue);
-                if (restoreSelection) {
-                    node.selectNext(0, 0);
-                }
-            }
-        });
-    }, [editor, equationValue, nodeKey]);
-    useEffect(() => {
-        if (!showEquationEditor && equationValue !== equation) {
-            setEquationValue(equation);
-        }
-    }, [showEquationEditor, equation, equationValue]);
-    useEffect(() => {
-        if (showEquationEditor) {
-            return mergeRegister(editor.registerCommand(SELECTION_CHANGE_COMMAND, (payload) => {
-                const { activeElement } = document;
-                const inputElem = inputRef.current;
-                if (inputElem !== activeElement) {
-                    onHide();
-                }
-                return false;
-            }, COMMAND_PRIORITY_HIGH), editor.registerCommand(KEY_ESCAPE_COMMAND, (payload) => {
-                const { activeElement } = document;
-                const inputElem = inputRef.current;
-                if (inputElem === activeElement) {
-                    onHide(true);
-                    return true;
-                }
-                return false;
-            }, COMMAND_PRIORITY_HIGH));
-        }
-        return editor.registerUpdateListener(({ editorState }) => {
-            const isSelected = editorState.read(() => {
-                const selection = $getSelection();
-                return $isNodeSelection(selection) && selection.has(nodeKey) && selection.getNodes().length === 1;
-            });
-            if (isSelected) {
-                setShowEquationEditor(true);
-            }
-        });
-    }, [editor, nodeKey, onHide, showEquationEditor]);
-    return showEquationEditor ? (_jsx(EquationEditor, { equation: equationValue, setEquation: setEquationValue, inline: inline, inputRef: inputRef })) : (_jsx(KatexRenderer, { equation: equationValue, inline: inline, onClick: () => {
-            setShowEquationEditor(true);
-        } }));
-}

package/lib/main/plugins/ActionsPlugin/index.d.ts

@@ -1,11 +0,0 @@
-/**
- * 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.
- *
- */
-/// <reference types="react" />
-export default function ActionsPlugin({ isRichText }: {
-    isRichText: boolean;
-}): JSX.Element;

package/lib/main/plugins/ActionsPlugin/index.js

@@ -1,129 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { $createCodeNode, $isCodeNode } from '@lexical/code';
-import { exportFile, importFile } from '@lexical/file';
-import { $convertFromMarkdownString, $convertToMarkdownString } from '@lexical/markdown';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { mergeRegister } from '@lexical/utils';
-import { CONNECTED_COMMAND } from '@lexical/yjs';
-import { $createTextNode, $getRoot, $isParagraphNode, CLEAR_EDITOR_COMMAND, COMMAND_PRIORITY_EDITOR } from 'lexical';
-import { useCallback, useEffect, useState } from 'react';
-import useModal from '../../hooks/useModal';
-import Button from '../../ui/Button';
-import { PLAYGROUND_TRANSFORMERS } from '../MarkdownTransformers';
-import { SPEECH_TO_TEXT_COMMAND, SUPPORT_SPEECH_RECOGNITION } from '../SpeechToTextPlugin';
-async function sendEditorState(editor) {
-    const stringifiedEditorState = JSON.stringify(editor.getEditorState());
-    try {
-        await fetch('http://localhost:1235/setEditorState', {
-            body: stringifiedEditorState,
-            headers: {
-                Accept: 'application/json',
-                'Content-type': 'application/json',
-            },
-            method: 'POST',
-        });
-    }
-    catch {
-        // NO-OP
-    }
-}
-async function validateEditorState(editor) {
-    const stringifiedEditorState = JSON.stringify(editor.getEditorState());
-    let response = null;
-    try {
-        response = await fetch('http://localhost:1235/validateEditorState', {
-            body: stringifiedEditorState,
-            headers: {
-                Accept: 'application/json',
-                'Content-type': 'application/json',
-            },
-            method: 'POST',
-        });
-    }
-    catch {
-        // NO-OP
-    }
-    if (response !== null && response.status === 403) {
-        throw new Error('Editor state validation failed! Server did not accept changes.');
-    }
-}
-export default function ActionsPlugin({ isRichText }) {
-    const [editor] = useLexicalComposerContext();
-    const [isEditable, setIsEditable] = useState(() => editor.isEditable());
-    const [isSpeechToText, setIsSpeechToText] = useState(false);
-    const [connected, setConnected] = useState(false);
-    const [isEditorEmpty, setIsEditorEmpty] = useState(true);
-    const [modal, showModal] = useModal();
-    useEffect(() => {
-        return mergeRegister(editor.registerEditableListener((editable) => {
-            setIsEditable(editable);
-        }), editor.registerCommand(CONNECTED_COMMAND, (payload) => {
-            const isConnected = payload;
-            setConnected(isConnected);
-            return false;
-        }, COMMAND_PRIORITY_EDITOR));
-    }, [editor]);
-    useEffect(() => {
-        return editor.registerUpdateListener(({ dirtyElements, prevEditorState, tags }) => {
-            // If we are in read only mode, send the editor state
-            // to server and ask for validation if possible.
-            if (!isEditable && dirtyElements.size > 0 && !tags.has('historic')) {
-                validateEditorState(editor);
-            }
-            editor.getEditorState().read(() => {
-                const root = $getRoot();
-                const children = root.getChildren();
-                if (children.length > 1) {
-                    setIsEditorEmpty(false);
-                }
-                else if ($isParagraphNode(children[0])) {
-                    const paragraphChildren = children[0].getChildren();
-                    setIsEditorEmpty(paragraphChildren.length === 0);
-                }
-                else {
-                    setIsEditorEmpty(false);
-                }
-            });
-        });
-    }, [editor, isEditable]);
-    const handleMarkdownToggle = useCallback(() => {
-        editor.update(() => {
-            const root = $getRoot();
-            const firstChild = root.getFirstChild();
-            if ($isCodeNode(firstChild) && firstChild.getLanguage() === 'markdown') {
-                $convertFromMarkdownString(firstChild.getTextContent(), PLAYGROUND_TRANSFORMERS);
-            }
-            else {
-                const markdown = $convertToMarkdownString(PLAYGROUND_TRANSFORMERS);
-                root.clear().append($createCodeNode('markdown').append($createTextNode(markdown)));
-            }
-            root.selectEnd();
-        });
-    }, [editor]);
-    return (_jsxs("div", { className: "actions", children: [SUPPORT_SPEECH_RECOGNITION && (_jsx("button", { onClick: () => {
-                    editor.dispatchCommand(SPEECH_TO_TEXT_COMMAND, !isSpeechToText);
-                    setIsSpeechToText(!isSpeechToText);
-                }, className: `action-button action-button-mic ${isSpeechToText ? 'active' : ''}`, title: "Speech To Text", "aria-label": `${isSpeechToText ? 'Enable' : 'Disable'} speech to text`, children: _jsx("i", { className: "mic" }) })), _jsx("button", { className: "action-button import", onClick: () => importFile(editor), title: "Import", "aria-label": "Import editor state from JSON", children: _jsx("i", { className: "import" }) }), _jsx("button", { className: "action-button export", onClick: () => exportFile(editor, {
-                    fileName: `Playground ${new Date().toISOString()}`,
-                    source: 'Playground',
-                }), title: "Export", "aria-label": "Export editor state to JSON", children: _jsx("i", { className: "export" }) }), _jsx("button", { className: "action-button clear", disabled: isEditorEmpty, onClick: () => {
-                    // eslint-disable-next-line react/no-unstable-nested-components
-                    showModal('Clear editor', (onClose) => _jsx(ShowClearDialog, { editor: editor, onClose: onClose }));
-                }, title: "Clear", "aria-label": "Clear editor contents", children: _jsx("i", { className: "clear" }) }), _jsx("button", { className: `action-button ${!isEditable ? 'unlock' : 'lock'}`, onClick: () => {
-                    // Send latest editor state to commenting validation server
-                    if (isEditable) {
-                        sendEditorState(editor);
-                    }
-                    editor.setEditable(!editor.isEditable());
-                }, title: "Read-Only Mode", "aria-label": `${!isEditable ? 'Unlock' : 'Lock'} read-only mode`, children: _jsx("i", { className: !isEditable ? 'unlock' : 'lock' }) }), _jsx("button", { className: "action-button", onClick: handleMarkdownToggle, title: "Convert From Markdown", "aria-label": "Convert from markdown", children: _jsx("i", { className: "markdown" }) }), modal] }));
-}
-function ShowClearDialog({ editor, onClose }) {
-    return (_jsxs(_Fragment, { children: ["Are you sure you want to clear the editor?", _jsxs("div", { className: "Modal__content", children: [_jsx(Button, { onClick: () => {
-                            editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
-                            editor.focus();
-                            onClose();
-                        }, children: "Clear" }), ' ', _jsx(Button, { onClick: () => {
-                            editor.focus();
-                            onClose();
-                        }, children: "Cancel" })] })] }));
-}

package/lib/main/plugins/AutocompletePlugin/index.d.ts

@@ -1,10 +0,0 @@
-/**
- * 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.
- *
- */
-/// <reference types="react" />
-export declare const uuid: string;
-export default function AutocompletePlugin(): JSX.Element | null;