@blocklet/editor 1.6.195 → 1.6.197

package/lib/components/createPortal.js

@@ -4,7 +4,10 @@ import { usePopper } from 'react-popper';
 import { useState } from 'react';
 const CreatePopperElement = ({ portalElement, parentElement, }) => {
     const [popperElement, setPopperElement] = useState(null);
-    const { styles, attributes } = usePopper(parentElement, popperElement, { placement: 'bottom-start' });
+    const { styles, attributes } = usePopper(parentElement, popperElement, {
+        placement: 'bottom-start',
+        strategy: 'fixed',
+    });
     return (_jsx("div", { ref: setPopperElement, style: { ...styles.popper, zIndex: 1 }, ...attributes.popper, children: portalElement }));
 };
 const createPortal = (portalElement, parentElement) => {

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

@@ -9,7 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { $getSelection, $isRangeSelection, $createTextNode, COMMAND_PRIORITY_EDITOR, KEY_DOWN_COMMAND, } from 'lexical';
 import { AutoEmbedOption, URL_MATCHER, LexicalAutoEmbedPlugin, } from '@lexical/react/LexicalAutoEmbedPlugin';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { useMemo, useState, useEffect } from 'react';
+import { useMemo, useState, useEffect, useRef } from 'react';
 import { $getNearestNodeOfType } from '@lexical/utils';
 import { LinkNode, $createLinkNode } from '@lexical/link';
 import compact from 'lodash/compact';
@@ -24,11 +24,11 @@ import { createBookmarkOption } from '../../../ext/BookmarkPlugin';
 import { get as getFromUrlParseCache, wrap } from './urlParseCache';
 import { BilibiliEmbedConfig } from '../../../ext/BilibiliPlugin/config';
 import { createPostLinkAutoEmbedOption } from '../../../ext/PostLinkEmbedPlugin';
-import createPortal from '../../../components/createPortal';
 import { $createGithubNode } from '../../../ext/nodes/GithubNode';
 import { $createEmojiNode } from '../../nodes/EmojiNode';
 import { useEditorConfig } from '../../../config';
 import { fetchOpenGraphInfo } from '../../../ext/utils';
+import createPortal from '../../../components/createPortal';
 export const YoutubeEmbedConfig = {
     contentName: 'Youtube Video',
     exampleUrl: 'https://www.youtube.com/watch?v=jNQXAC9IVRw',
@@ -206,10 +206,19 @@ export default function AutoEmbedPlugin() {
     const [editor] = useLexicalComposerContext();
     const [modal, showModal] = useModal();
     const editorConfig = useEditorConfig();
+    const dismissFnRef = useRef(null);
     const openEmbedModal = (embedConfig) => {
         showModal(`Embed ${embedConfig.contentName}`, (onClose) => (_jsx(AutoEmbedDialog, { embedConfig: embedConfig, onClose: onClose })));
     };
+    // Dismiss the menu when moving the cursor
+    // (https://community.arcblock.io/discussions/29f1b7a4-2af6-407f-8653-1267067d8899)
+    useEffect(() => {
+        return editor.registerUpdateListener(() => {
+            dismissFnRef.current?.();
+        });
+    }, [editor]);
     const getMenuOptions = (activeEmbedConfig, embedFn, dismissFn) => {
+        dismissFnRef.current = dismissFn;
         return compact([
             new AutoEmbedOption('Dismiss', {
                 onSelect: dismissFn,
@@ -314,15 +323,17 @@ export default function AutoEmbedPlugin() {
             return false;
         }, COMMAND_PRIORITY_EDITOR);
     }, [editor]);
-    return (_jsxs(_Fragment, { children: [modal, _jsx(LexicalAutoEmbedPlugin, { embedConfigs: EmbedConfigs, onOpenEmbedModalForConfig: openEmbedModal, getMenuOptions: getMenuOptions, menuRenderFn: (anchorElementRef, { selectedIndex, options, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current
-                    ? createPortal(_jsx("div", { className: "typeahead-popover auto-embed-menu", style: {
-                            marginLeft: anchorElementRef.current.style.width,
-                            width: 200,
-                        }, children: _jsx(AutoEmbedMenu, { options: options, selectedItemIndex: selectedIndex, onOptionClick: (option, index) => {
-                                setHighlightedIndex(index);
-                                selectOptionAndCleanUp(option);
-                            }, onOptionMouseEnter: (index) => {
-                                setHighlightedIndex(index);
-                            } }) }), anchorElementRef.current)
-                    : null })] }));
+    return (_jsxs(_Fragment, { children: [modal, _jsx(LexicalAutoEmbedPlugin, { embedConfigs: EmbedConfigs, onOpenEmbedModalForConfig: openEmbedModal, getMenuOptions: getMenuOptions, menuRenderFn: (anchorElementRef, { selectedIndex, options, selectOptionAndCleanUp, setHighlightedIndex }) => {
+                    return anchorElementRef.current
+                        ? createPortal(_jsx("div", { className: "typeahead-popover auto-embed-menu", style: {
+                                marginLeft: `${Math.max(parseFloat(anchorElementRef.current.style.width) - 200, 0)}px`,
+                                width: 200,
+                            }, children: _jsx(AutoEmbedMenu, { options: options, selectedItemIndex: selectedIndex, onOptionClick: (option, index) => {
+                                    setHighlightedIndex(index);
+                                    selectOptionAndCleanUp(option);
+                                }, onOptionMouseEnter: (index) => {
+                                    setHighlightedIndex(index);
+                                } }) }), anchorElementRef.current)
+                        : null;
+                } })] }));
 }

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

@@ -8,22 +8,21 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  */
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $createTextNode, $getSelection } from 'lexical';
+import { LexicalTypeaheadMenuPlugin, useBasicTypeaheadTriggerMatch, } from '@lexical/react/LexicalTypeaheadMenuPlugin';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import debounce from 'lodash/debounce';
-import { LexicalTypeaheadMenuPlugin, TypeaheadOption, useBasicTypeaheadTriggerMatch, } from '../LexicalTypeaheadMenuPlugin';
 import { $createMentionNode } from '../../nodes/MentionNode';
 import { useEditorConfig } from '../../../config';
 import HighlightStyle from './HighlightStyle';
-import createPortal from '../../../components/createPortal';
 import sortArrayByKey from '../../../libs/sort-array-by-key';
+import { TypeaheadOption } from '../LexicalTypeaheadMenuPlugin';
+import createPortal from '../../../components/createPortal';
 const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
 const NAME = `\\b[A-Z][^\\s${PUNCTUATION}]`;
 const DocumentMentionsRegex = {
     NAME,
     PUNCTUATION,
 };
-const CapitalizedNameMentionsRegex = new RegExp(`(^|[^#])((?:${DocumentMentionsRegex.NAME}{${1},})$)`);
 const PUNC = DocumentMentionsRegex.PUNCTUATION;
 const TRIGGERS = ['@'].join('');
 // Chars we expect to see in a mention (non-space, non-punctuation).
@@ -75,23 +74,6 @@ function useMentionLookupService(mentionString) {
     }, [mentionString]);
     return results;
 }
-function checkForCapitalizedNameMentions(text, minMatchLength) {
-    const match = CapitalizedNameMentionsRegex.exec(text);
-    if (match !== null) {
-        // The strategy ignores leading whitespace but we need to know it's
-        // length to add it to the leadOffset
-        const maybeLeadingWhitespace = match[1];
-        const matchingString = match[2];
-        if (matchingString != null && matchingString.length >= minMatchLength) {
-            return {
-                leadOffset: match.index + maybeLeadingWhitespace.length,
-                matchingString,
-                replaceableString: matchingString,
-            };
-        }
-    }
-    return null;
-}
 function checkForAtSignMentions(text, minMatchLength) {
     // 输入 @ 符号立即显示用户列表 (#383)
     if (/([\s]|^)@$/.test(text)) {
@@ -121,10 +103,7 @@ function checkForAtSignMentions(text, minMatchLength) {
     return null;
 }
 function getPossibleQueryMatch(text) {
-    const match = checkForAtSignMentions(text, 1);
-    // 禁用 "连续输入 (4 个?) 大写字母触发 mention"
-    // return match === null ? checkForCapitalizedNameMentions(text, 3) : match;
-    return match;
+    return checkForAtSignMentions(text, 1);
 }
 class MentionTypeaheadOption extends TypeaheadOption {
     user;
@@ -155,27 +134,28 @@ export default function NewMentionsPlugin() {
                 nodeToReplace.replace(mentionNode);
             }
             mentionNode.select();
-            const textNode = $createTextNode(' ');
-            const selection = $getSelection();
-            selection?.insertNodes([textNode]);
             closeMenu();
         });
     }, [editor]);
     const checkForMentionMatch = useCallback((text) => {
-        const mentionMatch = getPossibleQueryMatch(text);
         const slashMatch = checkForSlashTriggerMatch(text, editor);
-        return !slashMatch && mentionMatch ? mentionMatch : null;
+        if (slashMatch !== null) {
+            return null;
+        }
+        return getPossibleQueryMatch(text);
     }, [checkForSlashTriggerMatch, editor]);
-    return (_jsxs(_Fragment, { children: [_jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForMentionMatch, options: options, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current && results.length
-                    ? createPortal(_jsx("div", { className: "typeahead-popover mentions-menu", children: _jsx("ul", { children: options.map((option, i) => (_jsx(MentionsTypeaheadMenuItem, { index: i, isSelected: selectedIndex === i, onClick: () => {
-                                    setHighlightedIndex(i);
-                                    selectOptionAndCleanUp(option);
-                                }, onMouseEnter: () => {
-                                    setHighlightedIndex(i);
-                                    // hover option 时显示用户 did
-                                    if (option?.ref?.current) {
-                                        option.ref.current.title = option.user.did;
-                                    }
-                                }, option: option }, option.key))) }) }), anchorElementRef.current)
-                    : null }), _jsx(HighlightStyle, {})] }));
+    return (_jsxs(_Fragment, { children: [_jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForMentionMatch, options: options, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
+                    return anchorElementRef.current && results.length
+                        ? createPortal(_jsx("div", { className: "typeahead-popover mentions-menu", children: _jsx("ul", { children: options.map((option, i) => (_jsx(MentionsTypeaheadMenuItem, { index: i, isSelected: selectedIndex === i, onClick: () => {
+                                        setHighlightedIndex(i);
+                                        selectOptionAndCleanUp(option);
+                                    }, onMouseEnter: () => {
+                                        setHighlightedIndex(i);
+                                        // hover option 时显示用户 did
+                                        if (option?.ref?.current) {
+                                            option.ref.current.title = option.user.did;
+                                        }
+                                    }, option: option }, option.key))) }) }), anchorElementRef.current)
+                        : null;
+                } }), _jsx(HighlightStyle, {})] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "1.6.195",
+  "version": "1.6.197",
   "main": "lib/index.js",
   "scripts": {
     "dev": "npm run storybook",
@@ -37,9 +37,9 @@
     ]
   },
   "dependencies": {
-    "@arcblock/ux": "^2.9.58",
+    "@arcblock/ux": "^2.9.63",
     "@blocklet/embed": "^0.1.11",
-    "@blocklet/pdf": "1.6.195",
+    "@blocklet/pdf": "1.6.197",
     "@excalidraw/excalidraw": "^0.14.2",
     "@iconify/iconify": "^3.0.1",
     "@lexical/clipboard": "0.13.1",
@@ -108,5 +108,5 @@
     "react": "*",
     "react-dom": "*"
   },
-  "gitHead": "5c9deace228af5f06acbb41ac675780e46368027"
+  "gitHead": "0dfec64ec8d8047b70efdffe51b2ded92fbe796f"
 }