@finos/legend-application-studio 28.13.15 → 28.14.0

package/src/components/editor/editor-group/GrammarTextEditor.tsx

@@ -20,17 +20,20 @@ import {
   type IDisposable,
   editor as monacoEditorAPI,
   languages as monacoLanguagesAPI,
+  KeyCode,
+  KeyMod,
 } from 'monaco-editor';
 import {
   ContextMenu,
-  clsx,
-  WordWrapIcon,
-  MoreHorizontalIcon,
-  FoldIcon,
-  UnfoldIcon,
   PanelContent,
   MenuContent,
   MenuContentItem,
+  PanelLoadingIndicator,
+  CaretDownIcon,
+  DropdownMenu,
+  MenuContentItemIcon,
+  CheckIcon,
+  MenuContentItemLabel,
 } from '@finos/legend-art';
 import {
   DEFAULT_TAB_SIZE,
@@ -64,12 +67,20 @@ import { useDrop } from 'react-dnd';
 import type { DSL_LegendStudioApplicationPlugin_Extension } from '../../../stores/LegendStudioApplicationPlugin.js';
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../EditorStoreProvider.js';
-import { hasWhiteSpace, isNonNullable } from '@finos/legend-shared';
 import {
+  LogEvent,
+  assertErrorThrown,
+  assertTrue,
+  hasWhiteSpace,
+  isNonNullable,
+} from '@finos/legend-shared';
+import {
+  ELEMENT_PATH_DELIMITER,
   PARSER_SECTION_MARKER,
   PURE_CONNECTION_NAME,
   PURE_ELEMENT_NAME,
   PURE_PARSER,
+  isValidFullPath,
 } from '@finos/legend-graph';
 import type { EditorStore } from '../../../stores/editor/EditorStore.js';
 import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../__lib__/LegendStudioDocumentation.js';
@@ -109,7 +120,11 @@ import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../__lib
 import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../stores/extensions/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
 import type { STO_Relational_LegendStudioApplicationPlugin_Extension } from '../../../stores/extensions/STO_Relational_LegendStudioApplicationPlugin_Extension.js';
 import { LEGEND_STUDIO_SETTING_KEY } from '../../../__lib__/LegendStudioSetting.js';
-import { GraphEditGrammarModeState } from '../../../stores/editor/GraphEditGrammarModeState.js';
+import {
+  GRAMMAR_MODE_EDITOR_ACTION,
+  GraphEditGrammarModeState,
+} from '../../../stores/editor/GraphEditGrammarModeState.js';
+import { LEGEND_STUDIO_APP_EVENT } from '../../../__lib__/LegendStudioEvent.js';
 
 export const GrammarTextEditorHeaderTabContextMenu = observer(
   forwardRef<HTMLDivElement, { children?: React.ReactNode }>(
@@ -678,6 +693,81 @@ const collectParserElementSnippetSuggestions = (
   return [];
 };
 
+const resolveElementPathFromCurrentPosition = (
+  _editor: monacoEditorAPI.ICodeEditor,
+  grammarModeState: GraphEditGrammarModeState,
+): string | undefined => {
+  let elementPath = '';
+  try {
+    const model = _editor.getModel();
+    let position = _editor.getPosition();
+    let maxWords = 0;
+    if (model) {
+      while (position && maxWords < 30) {
+        const currentWord = model.getWordAtPosition(position);
+        const lineNumber = position.lineNumber;
+        position = null;
+        maxWords += 1;
+        if (currentWord) {
+          const wordStartPost = {
+            lineNumber: lineNumber,
+            column: currentWord.startColumn,
+          };
+          const startPost = model.modifyPosition(wordStartPost, -2);
+          elementPath = currentWord.word + elementPath;
+          const pathDelimiterRange = {
+            startLineNumber: startPost.lineNumber,
+            startColumn: startPost.column,
+            endLineNumber: wordStartPost.lineNumber,
+            endColumn: wordStartPost.column,
+          };
+          const packageRange = model.getValueInRange(
+            model.validateRange(pathDelimiterRange),
+          );
+          if (packageRange === ELEMENT_PATH_DELIMITER) {
+            elementPath = packageRange + elementPath;
+            position = model.modifyPosition(startPost, -1);
+          }
+        }
+      }
+    }
+    assertTrue(
+      isValidFullPath(elementPath),
+      `Unable to go to element definition. Not valid element path: ${elementPath}`,
+    );
+    return elementPath;
+  } catch (error) {
+    assertErrorThrown(error);
+    grammarModeState.editorStore.applicationStore.logService.error(
+      LogEvent.create(
+        LEGEND_STUDIO_APP_EVENT.TEXT_MODE_ACTION_KEYBOARD_SHORTCUT_GO_TO_DEFINITION__ERROR,
+      ),
+      error,
+    );
+  }
+  return undefined;
+};
+
+const goToElement = (
+  _editor: monacoEditorAPI.ICodeEditor,
+  grammarModeState: GraphEditGrammarModeState,
+): void => {
+  grammarModeState.editorStore.applicationStore.logService.info(
+    LogEvent.create(
+      LEGEND_STUDIO_APP_EVENT.TEXT_MODE_ACTION_KEYBOARD_SHORTCUT_GO_TO_DEFINITION__LAUNCH,
+    ),
+  );
+  const elementPath = resolveElementPathFromCurrentPosition(
+    _editor,
+    grammarModeState,
+  );
+  if (elementPath) {
+    flowResult(grammarModeState.goToElement(elementPath)).catch(
+      grammarModeState.editorStore.applicationStore.alertUnhandledError,
+    );
+  }
+};
+
 export const GrammarTextEditor = observer(() => {
   const [editor, setEditor] = useState<
     monacoEditorAPI.IStandaloneCodeEditor | undefined
@@ -689,9 +779,11 @@ export const GrammarTextEditor = observer(() => {
   );
   const grammarTextEditorState = grammarModeState.grammarTextEditorState;
   const error = editorStore.graphState.error;
+  const warnings = editorStore.graphState.warnings;
   const [elementsFolded, setFoldingElements] = useState(false);
 
   const forcedCursorPosition = grammarTextEditorState.forcedCursorPosition;
+  const wordWrapOtion = grammarTextEditorState.wordWrapOtion;
   const value = normalizeLineEnding(grammarTextEditorState.graphGrammarText);
   const textEditorRef = useRef<HTMLDivElement>(null);
   const hoverProviderDisposer = useRef<IDisposable | undefined>(undefined);
@@ -701,6 +793,10 @@ export const GrammarTextEditor = observer(() => {
     flowResult(editorStore.toggleTextMode()),
   );
 
+  const globalCompile = applicationStore.guardUnhandledError(() =>
+    flowResult(grammarModeState.globalCompile()),
+  );
+
   const toggleWordWrap = (): void => {
     grammarTextEditorState.setWrapText(!grammarTextEditorState.wrapText);
     editorStore.applicationStore.settingService.persistValue(
@@ -717,18 +813,36 @@ export const GrammarTextEditor = observer(() => {
         language: CODE_EDITOR_LANGUAGE.PURE,
         theme: CODE_EDITOR_THEME.DEFAULT_DARK,
         renderValidationDecorations: 'on',
+        wordWrap: grammarTextEditorState.wordWrapOtion,
+        readOnly: editorStore.editorMode.disableEditing,
       });
       _editor.onDidChangeModelContent(() => {
         grammarTextEditorState.setGraphGrammarText(getCodeEditorValue(_editor));
         clearMarkers();
         // NOTE: we can technically can reset the current element label regex string here
         // but if we do that on first load, the cursor will not jump to the current element
-        // also, it's better to place that logic in an effect that watches for the regex string
+        // also, it's better to place that logic in an effect that watches for the regex string.
+        // this is done by watching `forcedCursorPosition` in the useEffect
       });
       _editor.focus(); // focus on the editor initially
+      _editor.getModel()?.updateOptions({ tabSize: DEFAULT_TAB_SIZE });
+      _editor.addAction({
+        id: GRAMMAR_MODE_EDITOR_ACTION.GO_TO_ELEMENT_DEFINITION,
+        label: 'Go To Element',
+        keybindings: [KeyMod.CtrlCmd | KeyCode.KeyB],
+        run: (ed: monacoEditorAPI.ICodeEditor): void => {
+          goToElement(ed, grammarModeState);
+        },
+      });
       setEditor(_editor);
     }
-  }, [editorStore, applicationStore, editor, grammarTextEditorState]);
+  }, [
+    editorStore,
+    applicationStore,
+    editor,
+    grammarTextEditorState,
+    grammarModeState,
+  ]);
 
   // Drag and Drop
   const extraElementDragTypes = editorStore.pluginManager
@@ -776,210 +890,163 @@ export const GrammarTextEditor = observer(() => {
     [extraElementDragTypes, handleDrop],
   );
   dropConnector(textEditorRef);
-
   if (editor) {
     // Set the value of the editor
     const currentValue = getCodeEditorValue(editor);
     if (currentValue !== value) {
       editor.setValue(value);
     }
-    editor.updateOptions({
-      wordWrap: grammarTextEditorState.wrapText ? 'on' : 'off',
-    });
     resetLineNumberGutterWidth(editor);
     const editorModel = editor.getModel();
     if (editorModel) {
-      editorModel.updateOptions({ tabSize: DEFAULT_TAB_SIZE });
-      if (
-        error?.sourceInformation &&
-        // We should only calculate if problems are stale if there is an error/warning as
-        // calculating staleness takes time
-        !editorStore.graphState.areProblemsStale
-      ) {
-        setErrorMarkers(editorModel, [
-          {
-            message: error.message,
-            startLineNumber: error.sourceInformation.startLine,
-            startColumn: error.sourceInformation.startColumn,
-            endLineNumber: error.sourceInformation.endLine,
-            endColumn: error.sourceInformation.endColumn,
-          },
-        ]);
-      }
-
-      if (
-        editorStore.graphState.warnings.length &&
-        // We should only calculate if problems are stale if there is an error/warning as
-        // calculating staleness takes time
-        !editorStore.graphState.areProblemsStale
-      ) {
-        setWarningMarkers(
-          editorModel,
-          editorStore.graphState.warnings
-            .map((warning) => {
-              if (!warning.sourceInformation) {
-                return undefined;
-              }
-              return {
-                message: warning.message,
-                startLineNumber: warning.sourceInformation.startLine,
-                startColumn: warning.sourceInformation.startColumn,
-                endLineNumber: warning.sourceInformation.endLine,
-                endColumn: warning.sourceInformation.endColumn,
-              };
-            })
-            .filter(isNonNullable),
-        );
-      }
-    }
-    // Disable editing if user is in viewer mode
-    editor.updateOptions({ readOnly: editorStore.editorMode.disableEditing });
-
-    // hover
-    hoverProviderDisposer.current?.dispose();
-    hoverProviderDisposer.current = monacoLanguagesAPI.registerHoverProvider(
-      CODE_EDITOR_LANGUAGE.PURE,
-      {
-        provideHover: (model, position) => {
-          const currentWord = model.getWordAtPosition(position);
-          if (!currentWord) {
-            return { contents: [] };
-          }
+      // hover
+      hoverProviderDisposer.current?.dispose();
+      hoverProviderDisposer.current = monacoLanguagesAPI.registerHoverProvider(
+        CODE_EDITOR_LANGUAGE.PURE,
+        {
+          provideHover: (model, position) => {
+            const currentWord = model.getWordAtPosition(position);
+            if (!currentWord) {
+              return { contents: [] };
+            }
 
-          // show documention for parser section
-          const lineTextIncludingWordRange = {
-            startLineNumber: position.lineNumber,
-            startColumn: 1,
-            endLineNumber: position.lineNumber,
-            endColumn: currentWord.endColumn,
-          };
-          const lineTextIncludingWord = model.getValueInRange(
-            lineTextIncludingWordRange,
-          );
-          // NOTE: we don't need to trim here since the leading whitespace in front of
-          // the section header is considered invalid syntax in the grammar
-          if (
-            !hasWhiteSpace(lineTextIncludingWord) &&
-            lineTextIncludingWord.startsWith(PARSER_SECTION_MARKER)
-          ) {
-            const parserKeyword = lineTextIncludingWord.substring(
-              PARSER_SECTION_MARKER.length,
+            // show documention for parser section
+            const lineTextIncludingWordRange = {
+              startLineNumber: position.lineNumber,
+              startColumn: 1,
+              endLineNumber: position.lineNumber,
+              endColumn: currentWord.endColumn,
+            };
+            const lineTextIncludingWord = model.getValueInRange(
+              lineTextIncludingWordRange,
             );
-            const doc = getParserDocumetation(editorStore, parserKeyword);
-            if (doc) {
-              return {
-                range: lineTextIncludingWordRange,
-                contents: [
-                  doc.markdownText
-                    ? {
-                        value: doc.markdownText.value,
-                      }
-                    : undefined,
-                  doc.url
-                    ? {
-                        value: `[See documentation](${doc.url})`,
-                      }
-                    : undefined,
-                ].filter(isNonNullable),
-              };
+            // NOTE: we don't need to trim here since the leading whitespace in front of
+            // the section header is considered invalid syntax in the grammar
+            if (
+              !hasWhiteSpace(lineTextIncludingWord) &&
+              lineTextIncludingWord.startsWith(PARSER_SECTION_MARKER)
+            ) {
+              const parserKeyword = lineTextIncludingWord.substring(
+                PARSER_SECTION_MARKER.length,
+              );
+              const doc = getParserDocumetation(editorStore, parserKeyword);
+              if (doc) {
+                return {
+                  range: lineTextIncludingWordRange,
+                  contents: [
+                    doc.markdownText
+                      ? {
+                          value: doc.markdownText.value,
+                        }
+                      : undefined,
+                    doc.url
+                      ? {
+                          value: `[See documentation](${doc.url})`,
+                        }
+                      : undefined,
+                  ].filter(isNonNullable),
+                };
+              }
             }
-          }
 
-          // show documentation for parser element
-          const textUntilPosition = model.getValueInRange({
-            startLineNumber: 1,
-            startColumn: 1,
-            endLineNumber: position.lineNumber,
-            endColumn: position.column,
-          });
-          const allParserSectionHeaders =
-            // NOTE: since `###Pure` is implicitly considered as the first section, we prepend it to the text
-            `${PARSER_SECTION_MARKER}${PURE_PARSER.PURE}\n${textUntilPosition}`
-              .split('\n')
-              .filter((line) => line.startsWith(PARSER_SECTION_MARKER));
-          const currentSectionParserKeyword = getSectionParserNameFromLineText(
-            allParserSectionHeaders[allParserSectionHeaders.length - 1] ?? '',
-          );
-          if (currentSectionParserKeyword) {
-            const doc = getParserElementDocumentation(
-              editorStore,
-              currentSectionParserKeyword,
-              currentWord.word,
-            );
-            if (doc) {
-              return {
-                range: {
-                  startLineNumber: position.lineNumber,
-                  startColumn: currentWord.startColumn,
-                  endLineNumber: position.lineNumber,
-                  endColumn: currentWord.endColumn,
-                },
-                contents: [
-                  doc.markdownText
-                    ? {
-                        value: doc.markdownText.value,
-                      }
-                    : undefined,
-                  doc.url
-                    ? {
-                        value: `[See documentation](${doc.url})`,
-                      }
-                    : undefined,
-                ].filter(isNonNullable),
-              };
+            // show documentation for parser element
+            const textUntilPosition = model.getValueInRange({
+              startLineNumber: 1,
+              startColumn: 1,
+              endLineNumber: position.lineNumber,
+              endColumn: position.column,
+            });
+            const allParserSectionHeaders =
+              // NOTE: since `###Pure` is implicitly considered as the first section, we prepend it to the text
+              `${PARSER_SECTION_MARKER}${PURE_PARSER.PURE}\n${textUntilPosition}`
+                .split('\n')
+                .filter((line) => line.startsWith(PARSER_SECTION_MARKER));
+            const currentSectionParserKeyword =
+              getSectionParserNameFromLineText(
+                allParserSectionHeaders[allParserSectionHeaders.length - 1] ??
+                  '',
+              );
+            if (currentSectionParserKeyword) {
+              const doc = getParserElementDocumentation(
+                editorStore,
+                currentSectionParserKeyword,
+                currentWord.word,
+              );
+              if (doc) {
+                return {
+                  range: {
+                    startLineNumber: position.lineNumber,
+                    startColumn: currentWord.startColumn,
+                    endLineNumber: position.lineNumber,
+                    endColumn: currentWord.endColumn,
+                  },
+                  contents: [
+                    doc.markdownText
+                      ? {
+                          value: doc.markdownText.value,
+                        }
+                      : undefined,
+                    doc.url
+                      ? {
+                          value: `[See documentation](${doc.url})`,
+                        }
+                      : undefined,
+                  ].filter(isNonNullable),
+                };
+              }
             }
-          }
 
-          return { contents: [] };
+            return { contents: [] };
+          },
         },
-      },
-    );
+      );
 
-    // suggestion
-    suggestionProviderDisposer.current?.dispose();
-    suggestionProviderDisposer.current =
-      monacoLanguagesAPI.registerCompletionItemProvider(
-        CODE_EDITOR_LANGUAGE.PURE,
-        {
-          // NOTE: we need to specify this to show suggestions for section
-          // because by default, only alphanumeric characters trigger completion item provider
-          // See https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.CompletionContext.html#triggerCharacter
-          // See https://github.com/microsoft/monaco-editor/issues/2530#issuecomment-861757198
-          triggerCharacters: ['#'],
-          provideCompletionItems: (model, position) => {
-            let suggestions: monacoLanguagesAPI.CompletionItem[] = [];
+      // suggestion
+      suggestionProviderDisposer.current?.dispose();
+      suggestionProviderDisposer.current =
+        monacoLanguagesAPI.registerCompletionItemProvider(
+          CODE_EDITOR_LANGUAGE.PURE,
+          {
+            // NOTE: we need to specify this to show suggestions for section
+            // because by default, only alphanumeric characters trigger completion item provider
+            // See https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.CompletionContext.html#triggerCharacter
+            // See https://github.com/microsoft/monaco-editor/issues/2530#issuecomment-861757198
+            triggerCharacters: ['#'],
+            provideCompletionItems: (model, position) => {
+              let suggestions: monacoLanguagesAPI.CompletionItem[] = [];
 
-            // suggestions for parser keyword
-            suggestions = suggestions.concat(
-              getParserKeywordSuggestions(
-                position,
-                model,
-                collectParserKeywordSuggestions(editorStore),
-              ),
-            );
+              // suggestions for parser keyword
+              suggestions = suggestions.concat(
+                getParserKeywordSuggestions(
+                  position,
+                  model,
+                  collectParserKeywordSuggestions(editorStore),
+                ),
+              );
 
-            // suggestions for parser element snippets
-            suggestions = suggestions.concat(
-              getParserElementSnippetSuggestions(
-                position,
-                model,
-                (parserName: string) =>
-                  collectParserElementSnippetSuggestions(
-                    editorStore,
-                    parserName,
-                  ),
-              ),
-            );
+              // suggestions for parser element snippets
+              suggestions = suggestions.concat(
+                getParserElementSnippetSuggestions(
+                  position,
+                  model,
+                  (parserName: string) =>
+                    collectParserElementSnippetSuggestions(
+                      editorStore,
+                      parserName,
+                    ),
+                ),
+              );
 
-            // inline code snippet suggestions
-            suggestions = suggestions.concat(
-              getInlineSnippetSuggestions(position, model),
-            );
+              // inline code snippet suggestions
+              suggestions = suggestions.concat(
+                getInlineSnippetSuggestions(position, model),
+              );
 
-            return { suggestions };
+              return { suggestions };
+            },
           },
-        },
-      );
+        );
+    }
   }
 
   function toggleAutoFoldingElements(): void {
@@ -993,80 +1060,7 @@ export const GrammarTextEditor = observer(() => {
           [],
       );
     const foldingClass = editor?.getContribution('editor.contrib.folding');
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (foldingClass as any).getFoldingModel().then(
-      (foldingModel: {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        _regions: any;
-        onDidChange: (arg0: () => void) => void;
-        getRegionAtLine: (arg0: unknown) => unknown;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        getAllRegionsAtLine(arg0: unknown): any;
-        toggleCollapseState: (arg0: unknown) => unknown;
-      }) => {
-        const model = editor?.getModel();
-        const toggleFoldingLines: number[] = [];
-        model?.getLinesContent().forEach((line, j) => {
-          autoFoldingElements.forEach((elementName) => {
-            if (line.match(new RegExp(`^${elementName}`))) {
-              toggleFoldingLines.push(j + 2);
-            }
-          });
-        });
-        let allElementsFolded = true;
-        toggleFoldingLines.forEach((foldingLineRegion, i) => {
-          if (foldingModel.getAllRegionsAtLine(foldingLineRegion)[0]) {
-            if (
-              foldingModel._regions.isCollapsed(
-                foldingModel.getAllRegionsAtLine(foldingLineRegion)[0]
-                  .regionIndex,
-              ) === false
-            ) {
-              allElementsFolded = false;
-            }
-          }
-        });
-
-        setFoldingElements(!allElementsFolded);
-
-        toggleFoldingLines.forEach((foldingLineRegion, i) => {
-          if (foldingModel.getAllRegionsAtLine(foldingLineRegion)[0]) {
-            if (
-              foldingModel._regions.isCollapsed(
-                foldingModel.getAllRegionsAtLine(foldingLineRegion)[0]
-                  .regionIndex,
-              ) !== elementsFolded
-            ) {
-              foldingModel.toggleCollapseState(
-                foldingModel.getAllRegionsAtLine(foldingLineRegion),
-              );
-            }
-          }
-        });
-      },
-    );
-  }
-
-  useEffect(() => {
-    if (editor && forcedCursorPosition) {
-      moveCursorToPosition(editor, forcedCursorPosition);
-    }
-  }, [editor, forcedCursorPosition]);
-
-  useEffect(() => {
-    if (editor) {
-      const autoFoldingElements = editorStore.pluginManager
-        .getApplicationPlugins()
-        .flatMap(
-          (plugin) =>
-            (
-              plugin as DSL_LegendStudioApplicationPlugin_Extension
-            ).getExtraGrammarTextEditorAutoFoldingElementCreatorKeywords?.() ??
-            [],
-        );
-      const foldingClass = editor.getContribution('editor.contrib.folding');
-
+    if (editor && foldingClass) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       (foldingClass as any).getFoldingModel().then(
         (foldingModel: {
@@ -1078,39 +1072,89 @@ export const GrammarTextEditor = observer(() => {
           getAllRegionsAtLine(arg0: unknown): any;
           toggleCollapseState: (arg0: unknown) => unknown;
         }) => {
-          foldingModel.onDidChange(() => {
-            const model = editor.getModel();
-            const toggleFoldingLines: number[] = [];
-            model?.getLinesContent().forEach((line, j) => {
-              autoFoldingElements.forEach((elementName) => {
-                if (line.match(new RegExp(`^${elementName}`))) {
-                  toggleFoldingLines.push(j + 2);
-                }
-              });
-            });
-            let allElementsFolded = true;
-            toggleFoldingLines.forEach((foldingLineRegion, i) => {
-              if (foldingModel.getAllRegionsAtLine(foldingLineRegion)[0]) {
-                if (
-                  foldingModel._regions.isCollapsed(
-                    foldingModel.getAllRegionsAtLine(foldingLineRegion)[0]
-                      .regionIndex,
-                  ) === false
-                ) {
-                  allElementsFolded = false;
-                }
+          const model = editor.getModel();
+          const toggleFoldingLines: number[] = [];
+          model?.getLinesContent().forEach((line, j) => {
+            autoFoldingElements.forEach((elementName) => {
+              if (line.match(new RegExp(`^${elementName}`))) {
+                toggleFoldingLines.push(j + 2);
               }
             });
-
-            setFoldingElements(!allElementsFolded);
           });
+          const toFold = !elementsFolded;
+          toggleFoldingLines.forEach((foldingLineRegion, i) => {
+            if (foldingModel.getAllRegionsAtLine(foldingLineRegion)[0]) {
+              if (
+                foldingModel._regions.isCollapsed(
+                  foldingModel.getAllRegionsAtLine(foldingLineRegion)[0]
+                    .regionIndex,
+                ) !== toFold
+              ) {
+                foldingModel.toggleCollapseState(
+                  foldingModel.getAllRegionsAtLine(foldingLineRegion),
+                );
+              }
+            }
+          });
+          setFoldingElements(toFold);
         },
       );
     }
-  });
+  }
+
+  // below use effects watch over `forcedCursorPosition`, `wordWrapOtion`, `error`, `warnings` and reset them to the editor as needed
+  useEffect(() => {
+    if (editor && forcedCursorPosition) {
+      moveCursorToPosition(editor, forcedCursorPosition);
+    }
+  }, [editor, forcedCursorPosition]);
+  useEffect(() => {
+    if (editor) {
+      editor.updateOptions({
+        wordWrap: wordWrapOtion,
+      });
+    }
+  }, [editor, wordWrapOtion]);
+  useEffect(() => {
+    const editorModel = editor?.getModel();
+    if (editorModel && (error?.sourceInformation || warnings.length)) {
+      if (error?.sourceInformation) {
+        setErrorMarkers(editorModel, [
+          {
+            message: error.message,
+            startLineNumber: error.sourceInformation.startLine,
+            startColumn: error.sourceInformation.startColumn,
+            endLineNumber: error.sourceInformation.endLine,
+            endColumn: error.sourceInformation.endColumn,
+          },
+        ]);
+      }
+      if (warnings.length) {
+        setWarningMarkers(
+          editorModel,
+          warnings
+            .map((warning) => {
+              if (!warning.sourceInformation) {
+                return undefined;
+              }
+              return {
+                message: warning.message,
+                startLineNumber: warning.sourceInformation.startLine,
+                startColumn: warning.sourceInformation.startColumn,
+                endLineNumber: warning.sourceInformation.endLine,
+                endColumn: warning.sourceInformation.endColumn,
+              };
+            })
+            .filter(isNonNullable),
+        );
+      }
+    }
+  }, [editor, error, warnings]);
 
+  // first load with grammar. auto fold element sections
   useEffect(() => {
     if (editor) {
+      const model = editor.getModel();
       const autoFoldingElements = editorStore.pluginManager
         .getApplicationPlugins()
         .flatMap(
@@ -1121,33 +1165,38 @@ export const GrammarTextEditor = observer(() => {
             [],
         );
       const foldingClass = editor.getContribution('editor.contrib.folding');
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (foldingClass as any)
-        .getFoldingModel()
-        .then(
-          (foldingModel: {
-            onDidChange: (arg0: () => void) => void;
-            getRegionAtLine: (arg0: unknown) => unknown;
-            getAllRegionsAtLine(arg0: unknown): unknown;
-            toggleCollapseState: (arg0: unknown) => unknown;
-          }) => {
-            const model = editor.getModel();
-            const foldingLines: number[] = [];
-            model?.getLinesContent().forEach((line, j) => {
-              autoFoldingElements.forEach((elementName) => {
-                if (line.match(new RegExp(`^${elementName}`))) {
-                  foldingLines.push(j + 2);
+      if (foldingClass && model) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (foldingClass as any).getFoldingModel().then(
+          (
+            foldingModel:
+              | {
+                  onDidChange: (arg0: () => void) => void;
+                  getRegionAtLine: (arg0: unknown) => unknown;
+                  getAllRegionsAtLine(arg0: unknown): unknown;
+                  toggleCollapseState: (arg0: unknown) => unknown;
                 }
+              | undefined,
+          ) => {
+            if (foldingModel) {
+              const elementLinesToBeFolded: number[] = [];
+              model.getLinesContent().forEach((line, idx) => {
+                autoFoldingElements.forEach((elementName) => {
+                  if (line.match(new RegExp(`^${elementName}`))) {
+                    elementLinesToBeFolded.push(idx + 2);
+                  }
+                });
               });
-            });
-            foldingLines.forEach((foldingLineRegion, i) => {
-              foldingModel.toggleCollapseState(
-                foldingModel.getAllRegionsAtLine(foldingLineRegion),
-              );
-            });
+              elementLinesToBeFolded.forEach((lineToBeFolded) => {
+                const regionToFold =
+                  foldingModel.getAllRegionsAtLine(lineToBeFolded);
+                foldingModel.toggleCollapseState(regionToFold);
+              });
+              setFoldingElements(true);
+            }
           },
         );
+      }
     }
   }, [editor, editorStore.pluginManager]);
 
@@ -1173,19 +1222,6 @@ export const GrammarTextEditor = observer(() => {
     <div className="panel editor-group">
       <div className="panel__header editor-group__header">
         <div className="editor-group__header__tabs">
-          <div className="editor-group__text-mode__tab">
-            <button
-              className="editor-group__text-mode__tab__label"
-              disabled={
-                editorStore.graphState.isApplicationLeavingGraphEditMode
-              }
-              onClick={leaveTextMode}
-              tabIndex={-1}
-              title="Click to exit text mode and go back to form mode"
-            >
-              <MoreHorizontalIcon />
-            </button>
-          </div>
           <ContextMenu
             className="editor-group__text-mode__tab editor-group__text-mode__tab--active"
             content={<GrammarTextEditorHeaderTabContextMenu />}
@@ -1196,39 +1232,66 @@ export const GrammarTextEditor = observer(() => {
           </ContextMenu>
         </div>
         <div className="editor-group__header__actions">
-          <button
-            className={clsx('editor-group__header__action', {
-              'editor-group__header__action--active':
-                grammarTextEditorState.wrapText,
-            })}
-            onClick={toggleWordWrap}
-            tabIndex={-1}
-            title={`[${
-              grammarTextEditorState.wrapText ? 'on' : 'off'
-            }] Toggle word wrap`}
-          >
-            <WordWrapIcon className="editor-group__icon__word-wrap" />
-          </button>
-          <button
-            className={clsx('editor-group__header__action', {
-              'editor-group__header__action--active': elementsFolded,
-            })}
-            onClick={toggleAutoFoldingElements}
-            tabIndex={-1}
-            title={`${
-              !elementsFolded ? 'Unfold' : 'Fold'
-            } auto-folding elements`}
-          >
-            {!elementsFolded && (
-              <UnfoldIcon className="editor-group__icon__word-wrap" />
-            )}
-            {elementsFolded && (
-              <FoldIcon className="editor-group__icon__word-wrap" />
-            )}
-          </button>
+          <div className="editor-group__text-mode__action">
+            <button
+              title="Compile (F9)"
+              onClick={globalCompile}
+              className="editor-group__text-mode-btn btn--dark"
+            >
+              Compile
+            </button>
+          </div>
+          <div className="editor-group__text-mode__action">
+            <button
+              title="Click to exit text mode and go back to form mode (F8)"
+              onClick={leaveTextMode}
+              className="editor-group__text-mode-btn btn--dark"
+            >
+              Exit Text Mode
+            </button>
+          </div>
+          <div className="query-builder__header__actions">
+            <DropdownMenu
+              className="query-builder__header__advanced-dropdown"
+              title="Show Advanced Menu..."
+              content={
+                <MenuContent>
+                  <MenuContentItem onClick={toggleWordWrap}>
+                    <MenuContentItemIcon>
+                      {grammarTextEditorState.wrapText ? <CheckIcon /> : null}
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>
+                      Wrap Overflowing Words
+                    </MenuContentItemLabel>
+                  </MenuContentItem>
+                  <MenuContentItem onClick={toggleAutoFoldingElements}>
+                    <MenuContentItemIcon>
+                      {elementsFolded ? <CheckIcon /> : null}
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>
+                      Auto Fold Elements
+                    </MenuContentItemLabel>
+                  </MenuContentItem>
+                </MenuContent>
+              }
+              menuProps={{
+                anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                transformOrigin: { vertical: 'top', horizontal: 'right' },
+                elevation: 7,
+              }}
+            >
+              <div className="query-builder__header__advanced-dropdown__label">
+                Advanced
+              </div>
+              <CaretDownIcon className="query-builder__header__advanced-dropdown__icon" />
+            </DropdownMenu>
+          </div>
         </div>
       </div>
       <PanelContent className="editor-group__content">
+        <PanelLoadingIndicator
+          isLoading={editorStore.graphState.isRunningGlobalCompile}
+        />
         <div className="code-editor__container">
           <div className="code-editor__body" ref={textEditorRef} />
         </div>