136958 make a module for folding drawio

packages/editor/src/services/codemirror-editor/use-codemirror-editor/use-codemirror-editor.ts

@@ -14,6 +14,7 @@ import { emojiAutocompletionSettings } from '../../extensions/emojiAutocompletio
 
 import { useAppendExtensions, type AppendExtensions } from './utils/append-extensions';
 import { useFocus, type Focus } from './utils/focus';
+import { FoldDrawio, useFoldDrawio } from './utils/fold-drawio';
 import { useGetDoc, type GetDoc } from './utils/get-doc';
 import { useInitDoc, type InitDoc } from './utils/init-doc';
 import { useInsertMarkdownElements, type InsertMarkdowElements } from './utils/insert-markdown-elements';
@@ -41,6 +42,7 @@ type UseCodeMirrorEditorUtils = {
   replaceText: ReplaceText,
   insertMarkdownElements: InsertMarkdowElements,
   insertPrefix: InsertPrefix,
+  foldDrawio: FoldDrawio,
 }
 export type UseCodeMirrorEditor = {
   state: EditorState | undefined;
@@ -95,6 +97,7 @@ export const useCodeMirrorEditor = (props?: UseCodeMirror): UseCodeMirrorEditor
   const replaceText = useReplaceText(view);
   const insertMarkdownElements = useInsertMarkdownElements(view);
   const insertPrefix = useInsertPrefix(view);
+  const foldDrawio = useFoldDrawio(view);
 
   return {
     state,
@@ -108,5 +111,6 @@ export const useCodeMirrorEditor = (props?: UseCodeMirror): UseCodeMirrorEditor
     replaceText,
     insertMarkdownElements,
     insertPrefix,
+    foldDrawio,
   };
 };

packages/editor/src/services/codemirror-editor/use-codemirror-editor/utils/fold-drawio.ts

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+
+import { foldEffect } from '@codemirror/language';
+import { EditorView } from '@codemirror/view';
+
+export type FoldDrawio = void;
+
+const findAllDrawioSection = (view?: EditorView) => {
+  if (view == null) {
+    return;
+  }
+  const lineBeginPartOfDrawioRE = /^```(\s.*)drawio$/;
+  const lineNumbers: number[] = [];
+  for (let i = 1, e = view.state.doc.lines; i <= e; i++) {
+    const lineTxt = view.state.doc.line(i).text;
+    const match = lineBeginPartOfDrawioRE.exec(lineTxt);
+    if (match) {
+      lineNumbers.push(i);
+    }
+  }
+  return lineNumbers;
+};
+
+const foldDrawioSection = (lineNumbers?: number[], view?: EditorView) => {
+  if (view == null || lineNumbers == null) {
+    return;
+  }
+  lineNumbers.forEach((lineNumber) => {
+    const from = view.state.doc.line(lineNumber).to;
+    const to = view.state.doc.line(lineNumber + 2).to;
+    view?.dispatch({
+      effects: foldEffect.of({
+        from,
+        to,
+      }),
+    });
+  });
+};
+
+export const useFoldDrawio = (view?: EditorView): FoldDrawio => {
+  const lineNumbers = findAllDrawioSection(view);
+
+  useEffect(() => {
+    foldDrawioSection(lineNumbers, view);
+  }, [view, lineNumbers]);
+};

packages/editor/src/services/codemirror-editor/use-codemirror-editor/utils/init-doc.ts

@@ -1,46 +1,11 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 
-import { foldEffect } from '@codemirror/language';
 import { Transaction } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 
 export type InitDoc = (doc?: string) => void;
 
 export const useInitDoc = (view?: EditorView): InitDoc => {
-  useEffect(() => {
-    if (view != null) {
-      /**
-       * return an array of the starting line numbers of the drawio sections found in markdown
-       */
-      const findAllDrawioSection = (editor: EditorView): number[] => {
-        const lineBeginPartOfDrawioRE = /^```(\s.*)drawio$/;
-        const lineNumbers: number[] = [];
-        for (let i = 1, e = editor.state.doc.lines; i <= e; i++) {
-          const lineTxt = editor.state.doc.line(i).text;
-          const match = lineBeginPartOfDrawioRE.exec(lineTxt);
-          if (match) {
-            lineNumbers.push(i);
-          }
-        }
-        return lineNumbers;
-      };
-
-      // fold draw.io section (``` drawio ~ ```)
-      const foldDrawioSection = (editor: EditorView): void => {
-        const lineNumbers = findAllDrawioSection(editor);
-        lineNumbers.forEach((lineNumber) => {
-          const from = editor.state.doc.line(lineNumber).to;
-          const to = editor.state.doc.line(lineNumber + 2).to;
-          editor.dispatch({
-            effects: foldEffect.of({
-              from, to,
-            }),
-          });
-        });
-      };
-      foldDrawioSection(view);
-    }
-  });
 
   return useCallback((doc) => {
     view?.dispatch({