🐛 fix: fix edit rich render codeblock (#11303)

* fix: fix enableRichRender

* fix: fix enableRichRender

package.json

@@ -202,7 +202,7 @@
     "@lobehub/chat-plugin-sdk": "^1.32.4",
     "@lobehub/chat-plugins-gateway": "^1.9.0",
     "@lobehub/desktop-ipc-typings": "workspace:*",
-    "@lobehub/editor": "^3.4.1",
+    "@lobehub/editor": "^3.6.0",
     "@lobehub/icons": "^4.0.2",
     "@lobehub/market-sdk": "^0.27.1",
     "@lobehub/tts": "^4.0.2",

src/features/ChatInput/InputEditor/index.tsx

@@ -89,17 +89,7 @@ const InputEditor = memo<{ defaultRows?: number }>(({ defaultRows = 2 }) => {
       !enableRichRender
         ? {
             enablePasteMarkdown: false,
-            markdownOption: {
-              bold: false,
-              code: false,
-              header: false,
-              italic: false,
-              quote: false,
-              strikethrough: false,
-              underline: false,
-              underlineStrikethrough: false,
-            },
-            plugins: [ReactCodemirrorPlugin],
+            markdownOption: false,
           }
         : {
             plugins: [

src/features/EditorModal/EditorCanvas.tsx

@@ -10,7 +10,10 @@ import {
 } from '@lobehub/editor';
 import { Editor } from '@lobehub/editor/react';
 import { Flexbox } from '@lobehub/ui';
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
+
+import { useUserStore } from '@/store/user';
+import { labPreferSelectors } from '@/store/user/selectors';
 
 import TypoBar from './Typobar';
 
@@ -20,9 +23,32 @@ interface EditorCanvasProps {
 }
 
 const EditorCanvas: FC<EditorCanvasProps> = ({ defaultValue, editor }) => {
+  const enableRichRender = useUserStore(labPreferSelectors.enableInputMarkdown);
+
+  const richRenderProps = useMemo(
+    () =>
+      !enableRichRender
+        ? {
+            enablePasteMarkdown: false,
+            markdownOption: false,
+          }
+        : {
+            plugins: [
+              ReactListPlugin,
+              ReactCodePlugin,
+              ReactCodemirrorPlugin,
+              ReactHRPlugin,
+              ReactLinkPlugin,
+              ReactTablePlugin,
+              ReactMathPlugin,
+            ],
+          },
+    [enableRichRender],
+  );
+
   return (
     <>
-      <TypoBar editor={editor} />
+      {enableRichRender && <TypoBar editor={editor} />}
       <Flexbox
         padding={16}
         style={{ cursor: 'text', maxHeight: '80vh', minHeight: '50vh', overflowY: 'auto' }}
@@ -34,25 +60,21 @@ const EditorCanvas: FC<EditorCanvasProps> = ({ defaultValue, editor }) => {
           onInit={(editor) => {
             if (!editor || !defaultValue) return;
             try {
-              editor?.setDocument('markdown', defaultValue);
+              if (enableRichRender) {
+                editor?.setDocument('markdown', defaultValue);
+              } else {
+                editor?.setDocument('text', defaultValue);
+              }
             } catch (e) {
               console.error('setDocument error:', e);
             }
           }}
-          plugins={[
-            ReactListPlugin,
-            ReactCodePlugin,
-            ReactCodemirrorPlugin,
-            ReactHRPlugin,
-            ReactLinkPlugin,
-            ReactTablePlugin,
-            ReactMathPlugin,
-          ]}
           style={{
             paddingBottom: 120,
           }}
           type={'text'}
           variant={'chat'}
+          {...richRenderProps}
         />
       </Flexbox>
     </>

src/features/EditorModal/TextareCanvas.tsx

@@ -1,30 +0,0 @@
-import { TextArea } from '@lobehub/ui';
-import { FC } from 'react';
-
-interface EditorCanvasProps {
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  value?: string;
-}
-
-const EditorCanvas: FC<EditorCanvasProps> = ({ defaultValue, value, onChange }) => {
-  return (
-    <TextArea
-      defaultValue={defaultValue}
-      onChange={(e) => {
-        onChange?.(e.target.value);
-      }}
-      style={{
-        cursor: 'text',
-        maxHeight: '80vh',
-        minHeight: '50vh',
-        overflowY: 'auto',
-        padding: 16,
-      }}
-      value={value}
-      variant={'borderless'}
-    />
-  );
-};
-
-export default EditorCanvas;

src/features/EditorModal/index.tsx

@@ -3,11 +3,7 @@ import { Modal, ModalProps, createRawModal } from '@lobehub/ui';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useUserStore } from '@/store/user';
-import { labPreferSelectors } from '@/store/user/slices/preference/selectors';
-
 import EditorCanvas from './EditorCanvas';
-import TextareCanvas from './TextareCanvas';
 
 interface EditorModalProps extends ModalProps {
   onConfirm?: (value: string) => Promise<void>;
@@ -17,8 +13,7 @@ interface EditorModalProps extends ModalProps {
 export const EditorModal = memo<EditorModalProps>(({ value, onConfirm, ...rest }) => {
   const [confirmLoading, setConfirmLoading] = useState(false);
   const { t } = useTranslation('common');
-  const [v, setV] = useState(value);
-  const enableRichRender = useUserStore(labPreferSelectors.enableInputMarkdown);
+
   const editor = useEditor();
 
   return (
@@ -30,13 +25,12 @@ export const EditorModal = memo<EditorModalProps>(({ value, onConfirm, ...rest }
       okText={t('ok')}
       onOk={async () => {
         setConfirmLoading(true);
-        let finalValue;
-        if (enableRichRender) {
-          finalValue = editor?.getDocument('markdown') as unknown as string;
-        } else {
-          finalValue = v;
+        try {
+          await onConfirm?.((editor?.getDocument('markdown') as unknown as string) || '');
+        } catch (e) {
+          console.error('EditorModal onOk error:', e);
+          onConfirm?.(value || '');
         }
-        await onConfirm?.(finalValue || '');
         setConfirmLoading(false);
       }}
       styles={{
@@ -49,11 +43,7 @@ export const EditorModal = memo<EditorModalProps>(({ value, onConfirm, ...rest }
       width={'min(90vw, 920px)'}
       {...rest}
     >
-      {enableRichRender ? (
-        <EditorCanvas defaultValue={value} editor={editor} />
-      ) : (
-        <TextareCanvas defaultValue={value} onChange={(v) => setV(v)} value={v} />
-      )}
+      <EditorCanvas defaultValue={value} editor={editor} />
     </Modal>
   );
 });