@blocklet/editor-lite 2.6.0

package/lib/main/context/SharedAutocompleteContext.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+const Context = createContext([(_cb) => () => { }, (_newSuggestion) => { }]);
+export function SharedAutocompleteContext({ children }) {
+    const context = useMemo(() => {
+        let suggestion = null;
+        const listeners = new Set();
+        return [
+            (cb) => {
+                cb(suggestion);
+                listeners.add(cb);
+                return () => {
+                    listeners.delete(cb);
+                };
+            },
+            (newSuggestion) => {
+                suggestion = newSuggestion;
+                for (const listener of listeners) {
+                    listener(newSuggestion);
+                }
+            },
+        ];
+    }, []);
+    return _jsx(Context.Provider, { value: context, children: children });
+}
+export const useSharedAutocompleteContext = () => {
+    const [subscribe, publish] = useContext(Context);
+    const [suggestion, setSuggestion] = useState(null);
+    useEffect(() => {
+        return subscribe((newSuggestion) => {
+            setSuggestion(newSuggestion);
+        });
+    }, [subscribe]);
+    return [suggestion, publish];
+};

package/lib/main/context/SharedHistoryContext.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 { ReactNode, type JSX } from 'react';
+import type { HistoryState } from '../../vendor/history/history';
+type ContextShape = {
+    historyState?: HistoryState;
+};
+export declare function SharedHistoryContext({ children }: {
+    children: ReactNode;
+}): JSX.Element;
+export declare const useSharedHistoryContext: () => ContextShape;
+export {};

package/lib/main/context/SharedHistoryContext.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+import { createEmptyHistoryState } from '../../vendor/history/history';
+const Context = createContext({});
+export function SharedHistoryContext({ children }) {
+    const historyContext = useMemo(() => ({ historyState: createEmptyHistoryState() }), []);
+    return _jsx(Context.Provider, { value: historyContext, children: children });
+}
+export const useSharedHistoryContext = () => {
+    return useContext(Context);
+};

package/lib/main/editor-root.d.ts

@@ -0,0 +1,2 @@
+import { Box } from '@mui/material';
+export declare const EditorRoot: typeof Box;

package/lib/main/editor-root.js

@@ -0,0 +1,46 @@
+import { Box, styled } from '@mui/material';
+export const EditorRoot = styled(Box)(({ theme }) => {
+    const { palette } = theme;
+    return {
+        container: 'blocklet-editor / inline-size',
+        margin: '0 auto',
+        borderRadius: '4px',
+        position: 'relative',
+        lineHeight: '1.7',
+        fontWeight: '400',
+        textAlign: 'left',
+        // mui-*
+        '--mui-palette-grey-50': palette.grey[50],
+        '--mui-palette-grey-200': palette.grey[200],
+        '--mui-palette-background-paper': palette.background.paper,
+        '--mui-palette-divider': palette.divider,
+        '--mui-palette-primary-main': palette.primary.main,
+        '--mui-palette-primary-light': palette.primary.light,
+        '--mui-palette-text-primary': palette.text.primary,
+        '--mui-palette-text-secondary': palette.text.secondary,
+        // lexical-*
+        '--lexical-text-code': 'inherit',
+        // lexical-code-*
+        '--lexical-code-comment': '#1e8449',
+        '--lexical-code-punctuation': '#2c3e50',
+        '--lexical-code-property': '#e67e22',
+        '--lexical-code-selector': '#c0392b',
+        '--lexical-code-operator': '#8e44ad',
+        '--lexical-code-attr': '#2980b9',
+        '--lexical-code-variable': '#27ae60',
+        '--lexical-code-function': '#f39c12',
+        // dark mode
+        '&[data-mode="dark"]': {
+            '--lexical-text-code': palette.grey[800],
+            // lexical-code-*
+            '--lexical-code-comment': '#6a9955',
+            '--lexical-code-punctuation': '#d4d4d4',
+            '--lexical-code-property': '#9cdcfe',
+            '--lexical-code-selector': '#d7ba7d',
+            '--lexical-code-operator': '#d4d4d4',
+            '--lexical-code-attr': '#9cdcfe',
+            '--lexical-code-variable': '#9cdcfe',
+            '--lexical-code-function': '#dcdcaa',
+        },
+    };
+});

package/lib/main/editor.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 { MutableRefObject, ReactNode, type JSX } from 'react';
+import { EditorState, LexicalEditor } from 'lexical';
+export interface EditorProps {
+    children?: ReactNode;
+    prepend?: ReactNode;
+    placeholder?: ReactNode;
+    onChange?: (editorState: EditorState, editor: LexicalEditor) => void;
+    autoFocus?: boolean;
+    showToolbar?: boolean;
+    editorRef?: React.RefCallback<LexicalEditor> | MutableRefObject<LexicalEditor | null>;
+    onReady?: () => void;
+    enableHeadingsIdPlugin?: boolean;
+}
+export default function Editor({ children, prepend, placeholder, onChange, autoFocus, showToolbar, editorRef, onReady, enableHeadingsIdPlugin, }: EditorProps): JSX.Element;

package/lib/main/editor.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 { cx } from '@emotion/css';
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
+import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
+import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
+import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';
+import { useEffect, useState } from 'react';
+import { useSharedHistoryContext } from './context/SharedHistoryContext';
+import useHasNodes from './hooks/useHasNodes';
+import AutoEmbedPlugin from './plugins/AutoEmbedPlugin';
+import AutoLinkPlugin from './plugins/AutoLinkPlugin';
+import ClickableLinkPlugin from './plugins/ClickableLinkPlugin';
+import CodeHighlightPlugin from './plugins/CodeHighlightPlugin';
+import CollapsiblePlugin from './plugins/CollapsiblePlugin';
+import ComponentPickerPlugin from './plugins/ComponentPickerPlugin';
+import DragDropPaste from './plugins/DragDropPastePlugin';
+import DraggableBlockPlugin from './plugins/DraggableBlockPlugin';
+import ExcalidrawPlugin from './plugins/ExcalidrawPlugin';
+import FigmaPlugin from './plugins/FigmaPlugin';
+import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
+import FloatingTextFormatToolbarPlugin from './plugins/FloatingTextFormatToolbarPlugin';
+import HorizontalRulePlugin from './plugins/HorizontalRulePlugin';
+import ImagesPlugin from './plugins/ImagesPlugin';
+import MarkdownShortcutPlugin from './plugins/MarkdownShortcutPlugin';
+import { CharacterLimitPlugin } from '../ext/CharacterLimitPlugin';
+import MentionsPlugin from './plugins/MentionsPlugin';
+import TabFocusPlugin from './plugins/TabFocusPlugin';
+import TableCellActionMenuPlugin from './plugins/TableActionMenuPlugin';
+import TableCellResizer from './plugins/TableCellResizer';
+import ToolbarPlugin from './plugins/ToolbarPlugin';
+import TwitterPlugin from './plugins/TwitterPlugin';
+import YouTubePlugin from './plugins/YouTubePlugin';
+import BilibiliPlugin from '../ext/BilibiliPlugin';
+import ContentEditable from './ui/ContentEditable';
+import BlockletEmbedPlugin from '../ext/BlockletEmbedPlugin';
+import PostLinkEmbedPlugin from '../ext/PostLinkEmbedPlugin';
+import PasteSlackImagePlugin from '../ext/PasteSlackImagePlugin';
+import BookmarkPlugin from '../ext/BookmarkPlugin';
+import Placeholder from './ui/Placeholder';
+import { useEditorConfig } from '../config';
+import AidePlugin from '../ext/AIPlugin';
+import { EditorRefPlugin } from '../ext/LexicalEditorRefPlugin';
+import AlertPlugin from '../ext/Alert/AlertPlugin';
+import { HeadingsIdPlugin } from '../ext/HeadingsIdPlugin';
+import { EditorReadyPlugin } from '../ext/EditorReadyPlugin';
+import { VideoPlugin } from '../ext/VideoPlugin';
+import { FilePlugin } from '../ext/FilePlugin';
+import { EditorHolderPlugin } from '../ext/EditorHolderPlugin';
+import { StyledEditorContent } from './styled-editor-content';
+// import { CodeCopyPlugin } from '../ext/CodeCopyPlugin';
+import { VideoPathFixerPlugin } from '../ext/VideoPathFixerPlugin';
+import ImagePathFixerPlugin from '../ext/ImagePathFixerPlugin';
+import { SafeAreaPlugin } from '../ext/SafeAreaPlugin';
+import { HistoryPlugin } from '../vendor/history/LexicalHistoryPlugin';
+const ENABLE_EDITOR_PLUGIN_CHAR_LIMIT = window.blocklet?.ENABLE_EDITOR_PLUGIN_CHAR_LIMIT !== 'false';
+export default function Editor({ children, prepend, placeholder, onChange, autoFocus = true, showToolbar = true, editorRef, onReady, enableHeadingsIdPlugin, }) {
+    const [editor] = useLexicalComposerContext();
+    const [editable, setEditable] = useState(false);
+    const config = useEditorConfig();
+    const { minimalMode, characterLimitConfig } = config;
+    const hasUploader = !!config.uploader;
+    useEffect(() => {
+        setEditable(editor.isEditable());
+        return editor.registerEditableListener((e) => {
+            setEditable(e);
+        });
+    }, [editor]);
+    const hasNodes = useHasNodes();
+    const { historyState } = useSharedHistoryContext();
+    const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
+    const onRef = (_floatingAnchorElem) => {
+        if (_floatingAnchorElem !== null) {
+            setFloatingAnchorElem(_floatingAnchorElem);
+        }
+    };
+    useEffect(() => {
+        if (hasNodes('image') && !hasUploader) {
+            console.warn('You need to configure uploader to use ImagesPlugin');
+        }
+    }, [hasNodes('image'), hasUploader]);
+    if (minimalMode) {
+        return (_jsxs(_Fragment, { children: [prepend, _jsx(VideoPathFixerPlugin, {}), _jsx(ImagePathFixerPlugin, {}), editable && showToolbar && _jsx(ToolbarPlugin, {}), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), _jsx(PasteSlackImagePlugin, {}), _jsx(StyledEditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('autolink') && !!editable && _jsx(AutoLinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), _jsx(TabFocusPlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && hasNodes('link') && (_jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem })), !!characterLimitConfig?.maxLength && ENABLE_EDITOR_PLUGIN_CHAR_LIMIT && (_jsx(CharacterLimitPlugin, { maxLength: characterLimitConfig.maxLength, charLimitIndicatorStyle: characterLimitConfig.indicatorStyle, alignLeft: characterLimitConfig.alignLeft })), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), children] }));
+    }
+    return (_jsxs(_Fragment, { children: [prepend, _jsx(VideoPathFixerPlugin, {}), _jsx(ImagePathFixerPlugin, {}), editable && showToolbar && _jsx(ToolbarPlugin, {}), !!characterLimitConfig?.maxLength && ENABLE_EDITOR_PLUGIN_CHAR_LIMIT && (_jsx(CharacterLimitPlugin, { maxLength: characterLimitConfig.maxLength, charLimitIndicatorStyle: characterLimitConfig.indicatorStyle, alignLeft: characterLimitConfig.alignLeft })), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('autolink') && !!editable && _jsx(AutoLinkPlugin, {}), _jsxs(_Fragment, { children: [_jsx(PasteSlackImagePlugin, {}), _jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(StyledEditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), _jsx(MarkdownShortcutPlugin, {}), _jsx(TabIndentationPlugin, {}), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('table', 'tablerow', 'tablecell') && (_jsx(TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: true, hasHorizontalScroll: true })), hasNodes('table', 'tablerow', 'tablecell') && _jsx(TableCellResizer, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(BilibiliPlugin, {}), _jsx(BlockletEmbedPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), _jsx(AidePlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), _jsx(TabFocusPlugin, {}), hasNodes('collapsible-container', 'collapsible-content', 'collapsible-title') && _jsx(CollapsiblePlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }), hasNodes('table') && _jsx(TableCellActionMenuPlugin, { anchorElem: floatingAnchorElem, cellMerge: true }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })] })), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {})] }), _jsx(EditorHolderPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), config.enableSafeAreaPlugin && _jsx(SafeAreaPlugin, {}), children] }));
+}

package/lib/main/hooks/hooks.d.ts

@@ -0,0 +1,15 @@
+import { ImageSizeMode } from '../../types';
+export declare const useEditorSize: () => {
+    width: number;
+    height: number;
+} | undefined;
+export declare const useMaxImageWidth: () => number;
+export declare const useImageNaturalSize: (src: string) => {
+    width: number;
+    height: number;
+};
+export declare const useImageDisplayWidth: ({ src, sizeMode, width, }: {
+    src: string;
+    sizeMode?: ImageSizeMode | undefined;
+    width: number | 'inherit';
+}) => number;

package/lib/main/hooks/hooks.js

@@ -0,0 +1,49 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useSize } from 'ahooks';
+import { useEffect, useState } from 'react';
+import { useMediaQuery } from '@mui/material';
+import { scaleImage } from '../utils/images';
+export const useEditorSize = () => {
+    const [editor] = useLexicalComposerContext();
+    return useSize(() => editor.getRootElement());
+};
+export const useMaxImageWidth = () => {
+    const size = useEditorSize();
+    if (size?.width) {
+        return size.width - 54;
+    }
+    return document.documentElement.clientWidth;
+};
+export const useImageNaturalSize = (src) => {
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    useEffect(() => {
+        const img = new Image();
+        img.onload = () => setSize({ width: img.width, height: img.height });
+        img.src = src;
+    }, [src]);
+    return size;
+};
+export const useImageDisplayWidth = ({ src, sizeMode = 'best-fit', width, }) => {
+    const upLg = useMediaQuery((theme) => theme.breakpoints.up('lg'));
+    const naturalSize = useImageNaturalSize(src);
+    const maxImageWidth = useMaxImageWidth();
+    // 显式设置过宽度
+    if (width !== 'inherit') {
+        return Math.min(width, maxImageWidth);
+    }
+    if (!naturalSize) {
+        return 0;
+    }
+    if (sizeMode === 'small') {
+        return scaleImage({ width: naturalSize.width, height: naturalSize.height, maxSize: 200 }).width;
+    }
+    if (sizeMode === 'original') {
+        return Math.min(maxImageWidth, naturalSize.width);
+    }
+    const bestFitSize = upLg ? 560 : 400;
+    return scaleImage({
+        width: naturalSize.width,
+        height: naturalSize.height,
+        maxSize: Math.min(bestFitSize, maxImageWidth),
+    }).width;
+};

package/lib/main/hooks/medium-zoom.d.ts

@@ -0,0 +1,9 @@
+import 'medium-zoom/dist/style.css';
+interface MediumZoomOption {
+    enabled?: boolean;
+}
+export declare const useMediumZoom: (imageRef: React.RefObject<HTMLImageElement | null>, options?: MediumZoomOption) => {
+    zoomOpened: boolean;
+    openedImageRef: import("react").MutableRefObject<HTMLImageElement | null>;
+};
+export {};

package/lib/main/hooks/medium-zoom.js

@@ -0,0 +1,34 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect, useRef, useState } from 'react';
+import mediumZoom from 'medium-zoom/dist/pure';
+import 'medium-zoom/dist/style.css';
+export const useMediumZoom = (imageRef, options) => {
+    const [editor] = useLexicalComposerContext();
+    const editable = editor.isEditable();
+    const openedImageRef = useRef(null);
+    const [zoomOpened, setZoomOpened] = useState(false);
+    const enabled = options?.enabled ?? true;
+    useEffect(() => {
+        if (!editable && imageRef.current) {
+            if (!enabled) {
+                return () => { };
+            }
+            const zoom = mediumZoom(imageRef.current, { background: 'rgba(0,0,0,.5)' });
+            zoom.on('opened', (e) => {
+                const openedImage = document.querySelector('.medium-zoom-image--opened');
+                if (openedImage) {
+                    openedImageRef.current = openedImage;
+                    setZoomOpened(true);
+                }
+            });
+            zoom.on('close', (e) => {
+                openedImageRef.current = null;
+                setZoomOpened(false);
+            });
+            return () => {
+                zoom.detach();
+            };
+        }
+    }, [editable, imageRef.current, enabled]);
+    return { zoomOpened, openedImageRef };
+};

package/lib/main/hooks/use-mobile.d.ts

@@ -0,0 +1,4 @@
+import { type Breakpoint } from '@mui/material/styles';
+export default function useMobile({ key }?: {
+    key: Breakpoint | number;
+}): boolean;

package/lib/main/hooks/use-mobile.js

@@ -0,0 +1,6 @@
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+export default function useMobile({ key } = { key: 'md' }) {
+    const theme = useTheme();
+    return useMediaQuery(theme.breakpoints.down(key));
+}

package/lib/main/hooks/useBeforeUnload.d.ts

@@ -0,0 +1 @@
+export declare const useBeforeUnload: (dirty: boolean) => void;

package/lib/main/hooks/useBeforeUnload.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+export const useBeforeUnload = (dirty) => {
+    useEffect(() => {
+        const showPrompt = (e) => {
+            if (dirty) {
+                e.preventDefault();
+                e.returnValue = '';
+            }
+        };
+        window.addEventListener('beforeunload', showPrompt);
+        return () => {
+            window.removeEventListener('beforeunload', showPrompt);
+        };
+    }, [dirty]);
+};

package/lib/main/hooks/useHasNodes.d.ts

@@ -0,0 +1 @@
+export default function useHasNodes(): (...types: string[]) => boolean;

package/lib/main/hooks/useHasNodes.js

@@ -0,0 +1,8 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useCallback } from 'react';
+export default function useHasNodes() {
+    const [editor] = useLexicalComposerContext();
+    return useCallback((...types) => editor.hasNodes(types.map((type) => ({
+        getType: () => type,
+    }))), [editor]);
+}

package/lib/main/hooks/useIsFocused.d.ts

@@ -0,0 +1 @@
+export declare const useIsFocused: () => boolean;

package/lib/main/hooks/useIsFocused.js

@@ -0,0 +1,20 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { BLUR_COMMAND, COMMAND_PRIORITY_NORMAL, FOCUS_COMMAND } from 'lexical';
+import { useLayoutEffect, useState } from 'react';
+export const useIsFocused = () => {
+    const [editor] = useLexicalComposerContext();
+    const [hasFocus, setHasFocus] = useState(() => editor.getRootElement() === document.activeElement);
+    useLayoutEffect(() => {
+        return editor.registerCommand(FOCUS_COMMAND, () => {
+            setHasFocus(true);
+            return false;
+        }, COMMAND_PRIORITY_NORMAL);
+    }, [editor]);
+    useLayoutEffect(() => {
+        return editor.registerCommand(BLUR_COMMAND, () => {
+            setHasFocus(false);
+            return false;
+        }, COMMAND_PRIORITY_NORMAL);
+    }, [editor]);
+    return hasFocus;
+};

package/lib/main/hooks/useModal.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 JSX } from 'react';
+export default function useModal(): [
+    JSX.Element | null,
+    (title: string, showModal: (onClose: () => void) => JSX.Element) => void
+];

package/lib/main/hooks/useModal.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 { useCallback, useMemo, useState } from 'react';
+import Modal from '../ui/Modal';
+export default function useModal() {
+    const [modalContent, setModalContent] = useState(null);
+    const onClose = useCallback(() => {
+        setModalContent(null);
+    }, []);
+    const modal = useMemo(() => {
+        if (modalContent === null) {
+            return null;
+        }
+        const { title, content, closeOnClickOutside } = modalContent;
+        return (_jsx(Modal, { onClose: onClose, title: title, closeOnClickOutside: closeOnClickOutside, children: content }));
+    }, [modalContent, onClose]);
+    const showModal = useCallback((title, 
+    // eslint-disable-next-line no-shadow
+    getContent, closeOnClickOutside = false) => {
+        setModalContent({
+            closeOnClickOutside,
+            content: getContent(onClose),
+            title,
+        });
+    }, [onClose]);
+    return [modal, showModal];
+}

package/lib/main/hooks/useReport.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ *
+ */
+export default function useReport(): (arg0: string) => ReturnType<typeof setTimeout>;

package/lib/main/hooks/useReport.js

@@ -0,0 +1,48 @@
+/**
+ * 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 { useCallback, useEffect, useRef } from 'react';
+const getElement = () => {
+    let element = document.getElementById('report-container');
+    if (element === null) {
+        element = document.createElement('div');
+        element.id = 'report-container';
+        element.style.position = 'fixed';
+        element.style.top = '50%';
+        element.style.left = '50%';
+        element.style.fontSize = '32px';
+        element.style.transform = 'translate(-50%, -50px)';
+        element.style.padding = '20px';
+        element.style.background = 'rgba(240, 240, 240, 0.4)';
+        element.style.borderRadius = '20px';
+        if (document.body) {
+            document.body.appendChild(element);
+        }
+    }
+    return element;
+};
+export default function useReport() {
+    const timer = useRef(null);
+    const cleanup = useCallback(() => {
+        if (timer !== null) {
+            clearTimeout(timer.current);
+        }
+        if (document.body) {
+            document.body.removeChild(getElement());
+        }
+    }, []);
+    useEffect(() => {
+        return cleanup;
+    }, [cleanup]);
+    return useCallback((content) => {
+        const element = getElement();
+        clearTimeout(timer.current);
+        element.innerHTML = content;
+        timer.current = setTimeout(cleanup, 1000);
+        return timer.current;
+    }, [cleanup]);
+}

package/lib/main/hooks/useResponsiveTable.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @deprecated
+ * 支持 (block 级别的) 水平滚动
+ */
+export declare const useResponsiveTable: () => void;

package/lib/main/hooks/useResponsiveTable.js

@@ -0,0 +1,31 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $isTableRowNode, TableNode } from '@lexical/table';
+import { useEffect } from 'react';
+import { $createParagraphNode } from 'lexical';
+import { $wrapNodeInElement } from '@lexical/utils';
+/**
+ * @deprecated
+ * 支持 (block 级别的) 水平滚动
+ */
+export const useResponsiveTable = () => {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return editor.registerNodeTransform(TableNode, (tableNode) => {
+            const tableRows = tableNode.getChildren();
+            const firstRow = tableRows[0];
+            const editorWidth = editor.getRootElement()?.getBoundingClientRect().width;
+            if (!$isTableRowNode(firstRow) || !editorWidth) {
+                return;
+            }
+            const parentNode = tableNode.getParent();
+            // 如果 table 直接在 root 中, 包裹一层 paragraph, 使其可以使用表格内滚动条
+            if (parentNode?.getType() === 'root') {
+                $wrapNodeInElement(tableNode, () => {
+                    const p = $createParagraphNode();
+                    return p;
+                });
+            }
+            return tableNode;
+        });
+    }, [editor]);
+};

package/lib/main/hooks/useTranslationListener.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 监听是否使用了翻译，会把 editor state 转换为 HTML，绕过 lexical editor 无法修改 dom 的问题
+ */
+export declare const useTranslationListener: () => void;