feat(Editor): allow folding lines and regions

hatemhosny · hatemhosny · commit 984c913bcebc · 2025-03-22T15:08:29.000+02:00
diff --git a/docs/docs/configuration/configuration-object.mdx b/docs/docs/configuration/configuration-object.mdx
@@ -153,6 +153,12 @@ An object that configures the language and content of the markup editor. This ca
   A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled.
   The URL is only fetched if `hiddenContent` property had no value.
 
+- `foldedLines`:
+  Type: [`Array<{ from: number; to: number }> | undefined`](../api/interfaces/Config.md#foldedlines)
+  Default: `undefined`
+  Lines that get folded when the editor loads. The code can be unfolded by clicking on arrow beside the line.
+  This can be useful for less relevant code in embedded playgrounds.
+
 - `title`:
   Type: [`string | undefined`](../api/interfaces/Config.md#title)
   Default: `""`
@@ -661,6 +667,14 @@ Default: `true`
 
 Use auto-complete to close brackets and quotes.
 
+### `foldRegions`
+
+Type: [`boolean`](../api/interfaces/Config.md#foldregions)
+
+Default: `false`
+
+When set to `true`, regions marked by `#region` and `#endregion` comments are folded when the project is loaded.
+
 ### `emmet`
 
 Type: [`boolean`](../api/interfaces/Config.md#emmet)
diff --git a/docs/docs/features/editor-settings.mdx b/docs/docs/features/editor-settings.mdx
@@ -46,6 +46,7 @@ These include:
 - [Line numbers](../configuration/configuration-object.mdx#linenumbers)
 - [Word-wrap](../configuration/configuration-object.mdx#wordwrap)
 - [Auto-close brackets and quotes](../configuration/configuration-object.mdx#closebrackets)
+- [Fold (collapse) regions](../configuration/configuration-object.mdx#foldregions)
 
 ### Emmet
 
diff --git a/src/livecodes/UI/editor-settings.ts b/src/livecodes/UI/editor-settings.ts
@@ -238,6 +238,15 @@ export const createEditorSettingsUI = async ({
       name: 'closeBrackets',
       options: [{ value: 'true' }],
     },
+    {
+      title: window.deps.translateString(
+        'editorSettings.foldRegions',
+        'Fold (collapse) regions *',
+      ),
+      name: 'foldRegions',
+      options: [{ value: 'true' }],
+      help: `${process.env.DOCS_BASE_URL}configuration/configuration-object#foldregions`,
+    },
     {
       title: window.deps.translateString('editorSettings.emmet', 'Enable Emmet *'),
       name: 'emmet',
diff --git a/src/livecodes/config/config.ts b/src/livecodes/config/config.ts
@@ -80,6 +80,7 @@ export const getEditorConfig = (config: Config | UserConfig): EditorConfig =>
     lineNumbers: config.lineNumbers,
     wordWrap: config.wordWrap,
     closeBrackets: config.closeBrackets,
+    foldRegions: config.foldRegions,
     emmet: config.emmet,
     enableAI: config.enableAI,
     editorMode: config.editorMode,
diff --git a/src/livecodes/config/default-config.ts b/src/livecodes/config/default-config.ts
@@ -62,6 +62,7 @@ export const defaultConfig: Config = {
   lineNumbers: true,
   wordWrap: false,
   closeBrackets: true,
+  foldRegions: false,
   semicolons: true,
   singleQuote: false,
   trailingComma: true,
diff --git a/src/livecodes/config/validate-config.ts b/src/livecodes/config/validate-config.ts
@@ -51,9 +51,12 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
       is(x.contentUrl, 'string') ||
       is(x.hiddenContent, 'string') ||
       is(x.hiddenContentUrl, 'string') ||
+      is(x.foldedLines, 'array', 'object') ||
       is(x.order, 'number') ||
       is(x.selector, 'string'));
 
+  const isFoldedLines = (x: any) => is(x, 'object') && (is(x.from, 'number') || is(x.to, 'number'));
+
   const fixSfcLanguage = (lang: Language, editorId: EditorId) =>
     editorId !== 'markup'
       ? lang
@@ -76,6 +79,9 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
     ...(is(x.hideTitle, 'boolean') ? { hideTitle: x.hideTitle } : {}),
     ...(is(x.hiddenContent, 'string') ? { hiddenContent: x.hiddenContent } : {}),
     ...(is(x.hiddenContentUrl, 'string') ? { hiddenContentUrl: x.hiddenContentUrl } : {}),
+    ...(is(x.foldedLines, 'array', 'object') && x.foldedLines?.every(isFoldedLines)
+      ? { foldedLines: x.foldedLines }
+      : {}),
     ...(is(x.order, 'number') ? { order: x.order } : {}),
     ...(is(x.selector, 'string') ? { selector: x.selector } : {}),
     ...(is(x.position, 'object') ? { position: x.position } : {}),
@@ -181,6 +187,7 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
       : {}),
     ...(is(config.wordWrap, 'boolean') ? { wordWrap: config.wordWrap } : {}),
     ...(is(config.closeBrackets, 'boolean') ? { closeBrackets: config.closeBrackets } : {}),
+    ...(is(config.foldRegions, 'boolean') ? { foldRegions: config.foldRegions } : {}),
     ...(is(config.semicolons, 'boolean') ? { semicolons: config.semicolons } : {}),
     ...(is(config.singleQuote, 'boolean') ? { singleQuote: config.singleQuote } : {}),
     ...(is(config.trailingComma, 'boolean') ? { trailingComma: config.trailingComma } : {}),
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
@@ -566,6 +566,14 @@ const updateEditors = async (editors: Editors, config: Config) => {
     if (language) {
       await changeLanguage(language, config[editorId].content, true);
     }
+    const editor = editors[editorId];
+    if (config.foldRegions) {
+      await editor.foldRegions?.();
+    }
+    const foldedLines = config[editorId].foldedLines;
+    if (foldedLines?.length) {
+      await editor.foldLines?.(foldedLines);
+    }
   }
 };
 
@@ -1218,10 +1226,20 @@ const updateUrl = (url: string, push = false) => {
 
 const format = async (allEditors = true) => {
   if (allEditors) {
-    await Promise.all([editors.markup.format(), editors.style.format(), editors.script.format()]);
+    await Promise.all(
+      (Object.values(editors) as CodeEditor[]).map(async (editor) => {
+        await editor.format();
+        if (getConfig().foldRegions) {
+          await editor.foldRegions?.();
+        }
+      }),
+    );
   } else {
     const activeEditor = getActiveEditor();
     await activeEditor.format();
+    if (getConfig().foldRegions) {
+      await activeEditor.foldRegions?.();
+    }
     activeEditor.focus();
   }
   updateConfig();
diff --git a/src/livecodes/editor/codemirror/codemirror.ts b/src/livecodes/editor/codemirror/codemirror.ts
@@ -20,6 +20,7 @@ import {
   syntaxHighlighting,
   indentUnit,
   HighlightStyle,
+  foldEffect,
   type LanguageSupport,
   // @ts-ignore
 } from '@codemirror/language';
@@ -479,6 +480,42 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     });
   };
 
+  const foldRegions = () => {
+    const code = view.state.doc.toString();
+    const regionRegExp = /\/\/#region[\s\S]*?\/\/#endregion/g;
+    let matches;
+    while ((matches = regionRegExp.exec(code)) !== null) {
+      const start = matches.index + code.slice(matches.index).indexOf('\n');
+      const end = matches.index + matches[0].length;
+      view.dispatch({
+        effects: foldEffect.of({ from: start, to: end }),
+      });
+    }
+  };
+
+  const foldLines = (linesToFold: Array<{ from: number; to: number }>) => {
+    linesToFold.forEach((line) => {
+      let start = 0;
+      let end = view.state.doc.length;
+      if (line.from < 0 || line.to < 0 || line.from > line.to) return;
+      try {
+        if (line.from) {
+          const startLineInfo = view.state.doc.line(line.from);
+          start = startLineInfo.from;
+        }
+        if (line.to) {
+          const endLineInfo = view.state.doc.line(line.to);
+          end = endLineInfo.from + endLineInfo.length;
+        }
+        view.dispatch({
+          effects: foldEffect.of({ from: start, to: end }),
+        });
+      } catch (e) {
+        //
+      }
+    });
+  };
+
   const destroy = () => {
     listeners.length = 0;
     keyBindings.length = 0;
@@ -497,6 +534,8 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     focus,
     getPosition,
     setPosition,
+    foldRegions,
+    foldLines,
     addTypes,
     onContentChanged,
     keyCodes,
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
@@ -614,6 +614,29 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     setTimeout(() => editor.revealPositionInCenter(newPosition, 0), 50);
   };
 
+  const foldRegions = async () => {
+    const model = editor.getModel();
+    if (!model) return;
+    const regionRegExp = /\/\/#region[\s\S]*?\/\/#endregion/g;
+    let matches: RegExpExecArray | null;
+    while ((matches = regionRegExp.exec(model.getValue())) !== null) {
+      const startLineNumber = model.getPositionAt(matches.index).lineNumber;
+      const endLineNumber = model.getPositionAt(matches.index + matches[0].length).lineNumber;
+      editor.setSelection(new monaco.Selection(startLineNumber, 1, endLineNumber + 1, 1));
+      await editor.getAction('editor.createFoldingRangeFromSelection')?.run();
+    }
+  };
+
+  const foldLines = async (linesToFold: Array<{ from?: number; to?: number }>) => {
+    for (const lines of linesToFold) {
+      const startLine = lines.from ?? 0;
+      const endLine = lines.to ?? editor.getModel()!.getLineCount();
+      if (startLine < 0 || endLine < 0 || startLine > endLine) continue;
+      editor.setSelection(new monaco.Selection(startLine, 1, endLine + 1, 1));
+      await editor.getAction('editor.createFoldingRangeFromSelection')?.run();
+    }
+  };
+
   const configureCodeium = (enabled: boolean) => {
     if (!enabled) {
       codeiumProvider?.dispose();
@@ -830,6 +853,8 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     focus,
     getPosition,
     setPosition,
+    foldRegions,
+    foldLines,
     layout,
     addTypes,
     changeSettings,
diff --git a/src/livecodes/i18n/locales/en/language-info.lokalise.json b/src/livecodes/i18n/locales/en/language-info.lokalise.json
@@ -972,4 +972,4 @@
     "notes": "",
     "translation": "WebAssembly Text Format"
   }
-}
+}
diff --git a/src/livecodes/i18n/locales/en/translation.lokalise.json b/src/livecodes/i18n/locales/en/translation.lokalise.json
@@ -1264,6 +1264,10 @@
     "notes": "### <tag-1> ###\n<a href=\"https://codeium.com\" rel=\"noopener noreferrer\" target=\"_blank\" />\n\n### <tag-2> ###\n<img src=\"{{baseUrl}}assets/images/codeium.svg\" style=\"height: 1.2em; vertical-align: bottom;\" alt=\"Codeium\" />\n\n",
     "translation": "Powered by <tag-1><tag-2></tag-2></tag-1>"
   },
+  "editorSettings.foldRegions": {
+    "notes": "",
+    "translation": "Fold (collapse) regions *"
+  },
   "editorSettings.fontFamily": {
     "notes": "",
     "translation": "Font Family"
@@ -2968,4 +2972,4 @@
     "notes": "",
     "translation": "Starter Templates"
   }
-}
+}
diff --git a/src/livecodes/i18n/locales/en/translation.ts b/src/livecodes/i18n/locales/en/translation.ts
@@ -510,6 +510,7 @@ const translation = {
       heading: 'Enable AI Code Assistant',
       note: 'Powered by <1><2></2></1>',
     },
+    foldRegions: 'Fold (collapse) regions *',
     fontFamily: 'Font Family',
     fontSize: 'Font Size',
     format: 'Format',
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
@@ -784,6 +784,12 @@ export interface EditorConfig {
    */
   wordWrap: boolean;
 
+  /**
+   * When set to `true`, regions marked by `#region` and `#endregion` comments are folded when the project is loaded.
+   * @default false
+   */
+  foldRegions: boolean;
+
   /**
    * Use auto-complete to close brackets and quotes.
    * @default true
@@ -1104,6 +1110,14 @@ export interface Editor {
    */
   hiddenContentUrl?: string;
 
+  /**
+   * Lines that get folded when the editor loads.
+   *
+   * This can be used for less relevant content.
+   * @example [{ from: 5, to: 8 }, { from: 15, to: 20 }]
+   */
+  foldedLines?: Array<{ from: number; to: number }>;
+
   /**
    * If set, this is used as the title of the editor in the UI,
    * overriding the default title set to the language name
@@ -1490,6 +1504,8 @@ export interface CodeEditor {
   focus: () => void;
   getPosition: () => EditorPosition;
   setPosition: (position: EditorPosition) => void;
+  foldRegions?: () => void | Promise<void>;
+  foldLines?: (linesToFold: Array<{ from: number; to: number }>) => void | Promise<void>;
   layout?: () => void;
   addTypes?: (lib: EditorLibrary, force?: boolean) => any;
   onContentChanged: (callback: () => void) => void;

Original file line number	Diff line number	Diff line change
`@@ -972,4 +972,4 @@`
`972`	`972`	`"notes": "",`
`973`	`973`	`"translation": "WebAssembly Text Format"`
`974`	`974`	`}`
`975`		`-}`
	`975`	`+}`