feat(Mentions): add EditablePlugin

src/Mentions/index.tsx

@@ -11,14 +11,15 @@ import React, { useMemo } from 'react';
 
 import { isBrowser } from '@/utils/tools';
 
+import { OnBlurBlockPlugin } from './plugins/OnBlurBlockPlugin';
 import { CustomTextNode } from './plugins/custom-text/node';
+import { EditablePlugin } from './plugins/editable';
 import {
   MentionNode,
   MentionNodePlugin,
   MentionNodePluginReplacement,
 } from './plugins/mention-node';
 import { MentionPickerPlugin, type MentionPickerPluginProps } from './plugins/mention-picker';
-import OnBlurBlock from './plugins/on-blur-or-focus-block';
 import { MentionsConfigProvider } from './provider';
 import { useStyles } from './style';
 import type { AutoSize, MentionOption, MentionsOptionsMap } from './types';
@@ -67,8 +68,12 @@ export const Mentions: React.FC<MentionsProps> = ({
 }) => {
   const { componentDisabled } = ConfigProvider.useConfig();
   const { styles, cx } = useStyles({ autoSize });
-  const disabled = customDisabled ?? componentDisabled;
-  const editable = !readOnly && !disabled;
+
+  const disabled = useMemo(
+    () => customDisabled ?? componentDisabled,
+    [componentDisabled, customDisabled]
+  );
+  const editable = useMemo(() => !readOnly && !disabled, [disabled, readOnly]);
   const initialConfig = useMemo(
     () => ({
       namespace: 'mentions',
@@ -166,20 +171,23 @@ export const Mentions: React.FC<MentionsProps> = ({
               </div>
             }
           />
-          <MentionPickerPlugin
-            allowSpaces={allowSpaces}
-            onSelect={onSelect}
-            options={options}
-            overlayClassName={classNames?.menuOverlay}
-            preTriggerChars={preTriggerChars}
-            punctuation={punctuation}
-            triggers={triggers}
-          />
+          {editable && (
+            <MentionPickerPlugin
+              allowSpaces={allowSpaces}
+              onSelect={onSelect}
+              options={options}
+              overlayClassName={classNames?.menuOverlay}
+              preTriggerChars={preTriggerChars}
+              punctuation={punctuation}
+              triggers={triggers}
+            />
+          )}
           <MentionNodePlugin />
           <MentionNodePluginReplacement />
           <HistoryPlugin />
           <OnChangePlugin onChange={handleEditorChange} />
-          <OnBlurBlock onBlur={onBlur} onFocus={onFocus} />
+          <OnBlurBlockPlugin onBlur={onBlur} onFocus={onFocus} />
+          <EditablePlugin editable={editable} />
         </div>
       </MentionsConfigProvider>
     </LexicalComposer>

src/Mentions/plugins/on-blur-or-focus-block.tsx → src/Mentions/plugins/OnBlurBlockPlugin.tsx

@@ -6,11 +6,11 @@ import { useEffect, useRef } from 'react';
 
 import { CLEAR_HIDE_MENU_TIMEOUT } from './mention-node';
 
-type OnBlurBlockProps = {
+type OnBlurBlockPluginProps = {
   onBlur?: () => void;
   onFocus?: () => void;
 };
-const OnBlurBlock: FC<OnBlurBlockProps> = ({ onBlur, onFocus }) => {
+export const OnBlurBlockPlugin: FC<OnBlurBlockPluginProps> = ({ onBlur, onFocus }) => {
   const [editor] = useLexicalComposerContext();
 
   const ref = useRef<any>(null);
@@ -57,5 +57,3 @@ const OnBlurBlock: FC<OnBlurBlockProps> = ({ onBlur, onFocus }) => {
 
   return null;
 };
-
-export default OnBlurBlock;

src/Mentions/plugins/editable.tsx

@@ -0,0 +1,11 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import React, { useEffect } from 'react';
+
+export const EditablePlugin: React.FC<{ editable: boolean }> = ({ editable }) => {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    editor.setEditable(editable);
+  }, [editable, editor]);
+
+  return null;
+};