🐛 fix(block): hide floating menu when editor is not editable

Treat `editable === false` as a suppressed state inside ReactBlockPlugin
so the left-side add-block button and drag handle do not render when the
editor is read-only. Add a Toggle Editable demo for verification.

Author: Innei

src/plugins/block/react/ReactBlockPlugin.tsx

@@ -21,6 +21,7 @@ import { createPortal } from 'react-dom';
 
 import { useLexicalEditor } from '@/editor-kernel/react';
 import { useLexicalComposerContext } from '@/editor-kernel/react/react-context';
+import { useEditable } from '@/editor-kernel/react/useEditable';
 import { ILocaleKeys } from '@/types';
 import { createDebugLogger } from '@/utils/debug';
 
@@ -108,7 +109,8 @@ const ReactBlockPlugin: FC<ReactBlockPluginProps> = (props) => {
   const [isDragging, setIsDragging] = useState(false);
   const [focusedTableBlockId, setFocusedTableBlockId] = useState<string | null>(null);
   const [blockMenuService, setBlockMenuService] = useState<BlockMenuService | null>(null);
-  const blockMenuSuppressed = blockMenuService?.isMenuSuppressed() ?? false;
+  const { editable } = useEditable();
+  const blockMenuSuppressed = (blockMenuService?.isMenuSuppressed() ?? false) || editable === false;
 
   useLayoutEffect(() => {
     if (locale) {

src/react/Editor/demos/editable.tsx

@@ -0,0 +1,54 @@
+import { IEditor, ReactBlockPlugin } from '@lobehub/editor';
+import { Editor, useEditor } from '@lobehub/editor/react';
+import { Button, type CollapseProps, Flexbox, Text } from '@lobehub/ui';
+import { debounce } from 'es-toolkit';
+import { type FC, useMemo, useState } from 'react';
+
+import Container from './Container';
+import content from './disableMakrdownData.json';
+
+const Demo: FC<Pick<CollapseProps, 'collapsible' | 'defaultActiveKey'>> = (props) => {
+  const editor = useEditor();
+  const [editable, setEditable] = useState(true);
+  const [json, setJson] = useState('');
+  const [markdown, setMarkdown] = useState('');
+
+  const handleChange = useMemo(
+    () =>
+      debounce((editor: IEditor) => {
+        const markdownContent = editor.getDocument('markdown') as unknown as string;
+        const jsonContent = editor.getDocument('json') as unknown as Record<string, any>;
+        setMarkdown(markdownContent || '');
+        setJson(JSON.stringify(jsonContent || {}, null, 2));
+      }, 300),
+    [],
+  );
+
+  const handleInit = (editor: IEditor) => {
+    handleChange(editor);
+  };
+
+  return (
+    <Container json={json} markdown={markdown} {...props}>
+      <Flexbox align={'center'} gap={12} horizontal style={{ padding: 16 }}>
+        <Button onClick={() => setEditable((value) => !value)} type={'primary'}>
+          Toggle editable (current: {String(editable)})
+        </Button>
+        <Text type={'secondary'}>
+          When editable is false, the left-side add-block / drag handle should disappear.
+        </Text>
+      </Flexbox>
+      <Editor
+        content={content}
+        editable={editable}
+        editor={editor}
+        onInit={handleInit}
+        onTextChange={handleChange}
+        placeholder={'Type something...'}
+        plugins={[ReactBlockPlugin]}
+      />
+    </Container>
+  );
+};
+
+export default Demo;

src/react/Editor/index.md

@@ -32,6 +32,12 @@ Editor is a powerful and extensible rich text editor component designed for mode
 
 <code src="./demos/disableMarkdown.tsx" nopadding iframe></code>
 
+## Toggle Editable
+
+When `editable` is `false`, the floating block menu (add-block button and drag handle) on the left side should not appear.
+
+<code src="./demos/editable.tsx" nopadding iframe></code>
+
 ## Paste as Plain Text
 
 Force all pasted content to be inserted as plain text, stripping any rich text formatting (bold, italic, links, etc).