136958 fold drawio in editor

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

@@ -1,3 +1,4 @@
+import { foldEffect } from '@codemirror/language';
 import { EditorView } from '@codemirror/view';
 
 const lineBeginPartOfDrawioRE = /^```(\s.*)drawio$/;
@@ -115,6 +116,36 @@ export const getMarkdownDrawioMxfile = (editor: EditorView): string | null => {
   return editor.state.sliceDoc(bodLine, eodLine);
 };
 
+// /**
+//  * return an array of the starting line numbers of the drawio sections found in markdown
+//  */
+// const findAllDrawioSection = (editor: EditorView): number[] => {
+//   const lineNumbers: number[] = [];
+//   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;
+// };
+
+// // fold draw.io section (``` drawio ~ ```)
+// export const foldDrawioSection = (editor: EditorView): void => {
+//   const lineNumbers = findAllDrawioSection(editor);
+//   console.log(lineNumbers);
+//   lineNumbers.forEach((lineNumber) => {
+//     const from = getLine(editor, lineNumber).to;
+//     const to = getLine(editor, lineNumber + 2).to;
+//     editor.dispatch({
+//       effects: foldEffect.of({
+//         from, to,
+//       }),
+//     });
+//   });
+// };
+
 export const replaceFocusedDrawioWithEditor = (editor: EditorView, drawioData: string): void => {
   const drawioBlock = ['``` drawio', drawioData.toString(), '```'].join('\n');
   let bod = getBod(editor);
@@ -131,21 +162,5 @@ export const replaceFocusedDrawioWithEditor = (editor: EditorView, drawioData: s
       insert: drawioBlock,
     },
   });
+  // foldDrawioSection(editor);
 };
-
-/**
- * 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/utils/init-doc.ts

@@ -1,11 +1,46 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } 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({