fix: code block disables continuous input of characters (AppFlowy-IO#12)

Author: qinluhe

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;
+    }
+
+    void deboucenUpdateMermaid(diagram);
+  }, [deboucenUpdateMermaid, diagram]);
 
-  if (error) {
+  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}

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: {