Merge pull request #8342 from weseek/imprv/136958-fold-drawio-when-inserted

imprv: Fold drawio in Editor

apps/app/src/components/PageEditor/markdown-drawio-util-for-editor.ts

@@ -132,20 +132,3 @@ export const replaceFocusedDrawioWithEditor = (editor: EditorView, drawioData: s
     },
   });
 };
-
-/**
- * return an array of the starting line numbers of the drawio sections found in markdown
- */
-// TODO: https://redmine.weseek.co.jp/issues/136473
-// export const findAllDrawioSection = (editor: EditorView): number[] => {
-//   const lineNumbers: number[] = [];
-//   // refs: https://github.com/codemirror/CodeMirror/blob/5.64.0/addon/fold/foldcode.js#L106-L111
-//   for (let i = firstLineNum, e = lastLineNum(editor); i <= e; i++) {
-//     const lineTxt = getLine(editor, i).text;
-//     const match = lineBeginPartOfDrawioRE.exec(lineTxt);
-//     if (match) {
-//       lineNumbers.push(i);
-//     }
-//   }
-//   return lineNumbers;
-// };

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,50 @@
+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[] = [];
+  // repeat the process in each line from the top to the bottom in the editor
+  for (let i = 1, e = view.state.doc.lines; i <= e; i++) {
+    // get each line text
+    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) => {
+    // get the end of the lines containing '''drawio
+    const from = view.state.doc.line(lineNumber).to;
+    // get the end of the lines containing '''
+    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]);
+};