From a8ea6c04d27cb3a7f9dc5aa5229443aa80fb58ef Mon Sep 17 00:00:00 2001
From: "Kilu.He" <108015703+qinluhe@users.noreply.github.com>
Date: Fri, 10 Jan 2025 15:40:46 +0800
Subject: [PATCH] fix: code block disables continuous input of characters (#12)

---
 .../components/blocks/code/MermaidChat.tsx      | 17 +++++++++++------
 src/components/editor/utils/markdown.ts         | 12 +++++++-----
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/editor/components/blocks/code/MermaidChat.tsx b/src/components/editor/components/blocks/code/MermaidChat.tsx
index 621aa16b..91cd27ee 100644
--- a/src/components/editor/components/blocks/code/MermaidChat.tsx
+++ b/src/components/editor/components/blocks/code/MermaidChat.tsx
@@ -69,7 +69,7 @@ function MermaidChat ({ node }: {
   const isDark = useContext(ThemeModeContext)?.isDark;
   const [error, setError] = React.useState<string | null>(null);
 
-  const updateMermaid = useCallback(async () => {
+  const updateMermaid = useCallback(async (diagram: string) => {
     const sanitizedDiagram = sanitizeDiagram(diagram);
     const theme = isDark ? darkTheme : lightTheme;
 
@@ -91,17 +91,23 @@ function MermaidChat ({ node }: {
       // @ts-ignore
       setError(e.message);
     }
-  }, [diagram, id, isDark]);
+  }, [id, isDark]);
 
   const deboucenUpdateMermaid = useMemo(() => {
     return debounce(updateMermaid, 1000);
   }, [updateMermaid]);
 
   useEffect(() => {
-    void deboucenUpdateMermaid();
-  }, [deboucenUpdateMermaid]);
+    if (!diagram.trim()) {
+      setError(null);
+      setInnerHtml('');
+      return;
+    }
 
-  if (error) {
+    void deboucenUpdateMermaid(diagram);
+  }, [deboucenUpdateMermaid, diagram]);
+
+  if (error && diagram) {
     return (
       <div
         contentEditable={false}
@@ -121,7 +127,6 @@ function MermaidChat ({ node }: {
         display: 'flex',
         flexDirection: 'row',
         placeContent: 'center',
-        minHeight: '250px',
       }}
       contentEditable={false}
       ref={ref}
diff --git a/src/components/editor/utils/markdown.ts b/src/components/editor/utils/markdown.ts
index 28acdf6b..f9efe6f9 100644
--- a/src/components/editor/utils/markdown.ts
+++ b/src/components/editor/utils/markdown.ts
@@ -54,7 +54,7 @@ type Rule = {
   filter?: (editor: YjsEditor, match: RegExpMatchArray) => boolean
 }
 
-function deletePrefix(editor: YjsEditor, offset: number) {
+function deletePrefix (editor: YjsEditor, offset: number) {
   const [, path] = getBlockEntry(editor);
 
   const { selection } = editor;
@@ -67,19 +67,19 @@ function deletePrefix(editor: YjsEditor, offset: number) {
   editor.delete();
 }
 
-function getNodeType(editor: YjsEditor) {
+function getNodeType (editor: YjsEditor) {
   const [node] = getBlockEntry(editor);
 
   return node.type as BlockType;
 }
 
-function getBlockData(editor: YjsEditor) {
+function getBlockData (editor: YjsEditor) {
   const [node] = getBlockEntry(editor);
 
   return node.data as BlockData;
 }
 
-function getLineText(editor: YjsEditor) {
+function getLineText (editor: YjsEditor) {
   const [node] = getBlockEntry(editor);
   const sharedRoot = getSharedRoot(editor);
   const block = getBlock(node.blockId as string, sharedRoot);
@@ -331,7 +331,6 @@ const rules: Rule[] = [
     match: /--/,
     format: SpecialSymbol.EM_DASH,
     transform: (editor) => {
-
       editor.delete({
         unit: 'character',
         reverse: true,
@@ -422,6 +421,9 @@ export const applyMarkdown = (editor: YjsEditor, insertText: string): boolean =>
       }
 
     } else if (rule.type === 'symbol') {
+      const block = getBlockEntry(editor)[0];
+
+      if (block.type === BlockType.CodeBlock) return false;
       const path = selection.anchor.path;
       const text = editor.string({
         anchor: {