@finos/legend-application-studio 28.13.14 → 28.14.0

package/lib/components/editor/editor-group/GrammarTextEditor.js

@@ -16,21 +16,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useEffect, useState, useRef, useCallback, forwardRef } from 'react';
 import { observer } from 'mobx-react-lite';
-import { editor as monacoEditorAPI, languages as monacoLanguagesAPI, } from 'monaco-editor';
-import { ContextMenu, clsx, WordWrapIcon, MoreHorizontalIcon, FoldIcon, UnfoldIcon, PanelContent, MenuContent, MenuContentItem, } from '@finos/legend-art';
+import { editor as monacoEditorAPI, languages as monacoLanguagesAPI, KeyCode, KeyMod, } from 'monaco-editor';
+import { ContextMenu, PanelContent, MenuContent, MenuContentItem, PanelLoadingIndicator, CaretDownIcon, DropdownMenu, MenuContentItemIcon, CheckIcon, MenuContentItemLabel, } from '@finos/legend-art';
 import { DEFAULT_TAB_SIZE, useApplicationStore, useApplicationNavigationContext, } from '@finos/legend-application';
 import { disposeCodeEditor, getBaseCodeEditorOptions, resetLineNumberGutterWidth, getCodeEditorValue, normalizeLineEnding, setWarningMarkers, clearMarkers, setErrorMarkers, moveCursorToPosition, CODE_EDITOR_THEME, CODE_EDITOR_LANGUAGE, getInlineSnippetSuggestions, getParserKeywordSuggestions, getParserElementSnippetSuggestions, getSectionParserNameFromLineText, } from '@finos/legend-lego/code-editor';
 import { CORE_DND_TYPE, } from '../../../stores/editor/utils/DnDUtils.js';
 import { useDrop } from 'react-dnd';
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../EditorStoreProvider.js';
-import { hasWhiteSpace, isNonNullable } from '@finos/legend-shared';
-import { PARSER_SECTION_MARKER, PURE_CONNECTION_NAME, PURE_ELEMENT_NAME, PURE_PARSER, } from '@finos/legend-graph';
+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 { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../__lib__/LegendStudioDocumentation.js';
 import { BLANK_CLASS_SNIPPET, CLASS_WITH_CONSTRAINT_SNIPPET, CLASS_WITH_INHERITANCE_SNIPPET, CLASS_WITH_PROPERTY_SNIPPET, DATA_WITH_EXTERNAL_FORMAT_SNIPPET, DATA_WITH_MODEL_STORE_SNIPPET, createDataElementSnippetWithEmbeddedDataSuggestionSnippet, SIMPLE_PROFILE_SNIPPET, SIMPLE_ENUMERATION_SNIPPET, SIMPLE_ASSOCIATION_SNIPPET, SIMPLE_MEASURE_SNIPPET, BLANK_FUNCTION_SNIPPET, SIMPLE_FUNCTION_SNIPPET, SIMPLE_RUNTIME_SNIPPET, JSON_MODEL_CONNECTION_SNIPPET, XML_MODEL_CONNECTION_SNIPPET, MODEL_CHAIN_CONNECTION_SNIPPET, RELATIONAL_DATABASE_CONNECTION_SNIPPET, BLANK_RELATIONAL_DATABASE_SNIPPET, SIMPLE_GENERATION_SPECIFICATION_SNIPPET, BLANK_SERVICE_SNIPPET, SERVICE_WITH_SINGLE_EXECUTION_SNIPPET, SERVICE_WITH_MULTI_EXECUTION_SNIPPET, BLANK_MAPPING_SNIPPET, MAPPING_WITH_M2M_CLASS_MAPPING_SNIPPET, MAPPING_WITH_ENUMERATION_MAPPING_SNIPPET, MAPPING_WITH_RELATIONAL_CLASS_MAPPING_SNIPPET, POST_PROCESSOR_RELATIONAL_DATABASE_CONNECTION_SNIPPET, createConnectionSnippetWithPostProcessorSuggestionSnippet, } from '../../../__lib__/LegendStudioCodeSnippet.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../__lib__/LegendStudioApplicationNavigationContext.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(function GrammarTextEditorHeaderTabContextMenu(props, ref) {
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
@@ -451,6 +452,55 @@ const collectParserElementSnippetSuggestions = (editorStore, parserKeyword) => {
     }
     return [];
 };
+const resolveElementPathFromCurrentPosition = (_editor, grammarModeState) => {
+    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, grammarModeState) => {
+    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();
     const editorStore = useEditorStore();
@@ -458,13 +508,16 @@ export const GrammarTextEditor = observer(() => {
     const grammarModeState = editorStore.getGraphEditorMode(GraphEditGrammarModeState);
     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(null);
     const hoverProviderDisposer = useRef(undefined);
     const suggestionProviderDisposer = useRef(undefined);
     const leaveTextMode = applicationStore.guardUnhandledError(() => flowResult(editorStore.toggleTextMode()));
+    const globalCompile = applicationStore.guardUnhandledError(() => flowResult(grammarModeState.globalCompile()));
     const toggleWordWrap = () => {
         grammarTextEditorState.setWrapText(!grammarTextEditorState.wrapText);
         editorStore.applicationStore.settingService.persistValue(LEGEND_STUDIO_SETTING_KEY.EDITOR_WRAP_TEXT, grammarTextEditorState.wrapText);
@@ -477,18 +530,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) => {
+                    goToElement(ed, grammarModeState);
+                },
+            });
             setEditor(_editor);
         }
-    }, [editorStore, applicationStore, editor, grammarTextEditorState]);
+    }, [
+        editorStore,
+        applicationStore,
+        editor,
+        grammarTextEditorState,
+        grammarModeState,
+    ]);
     // Drag and Drop
     const extraElementDragTypes = editorStore.pluginManager
         .getApplicationPlugins()
@@ -529,146 +600,112 @@ export const GrammarTextEditor = observer(() => {
         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 (!editorStore.graphState.areProblemsStale &&
-                error?.sourceInformation) {
-                setErrorMarkers(editorModel, [
-                    {
-                        message: error.message,
-                        startLineNumber: error.sourceInformation.startLine,
-                        startColumn: error.sourceInformation.startColumn,
-                        endLineNumber: error.sourceInformation.endLine,
-                        endColumn: error.sourceInformation.endColumn,
-                    },
-                ]);
-            }
-            if (!editorStore.graphState.areProblemsStale &&
-                editorStore.graphState.warnings.length) {
-                setWarningMarkers(editorModel, editorStore.graphState.warnings
-                    .map((warning) => {
-                    if (!warning.sourceInformation) {
-                        return undefined;
+            // hover
+            hoverProviderDisposer.current?.dispose();
+            hoverProviderDisposer.current = monacoLanguagesAPI.registerHoverProvider(CODE_EDITOR_LANGUAGE.PURE, {
+                provideHover: (model, position) => {
+                    const currentWord = model.getWordAtPosition(position);
+                    if (!currentWord) {
+                        return { contents: [] };
                     }
-                    return {
-                        message: warning.message,
-                        startLineNumber: warning.sourceInformation.startLine,
-                        startColumn: warning.sourceInformation.startColumn,
-                        endLineNumber: warning.sourceInformation.endLine,
-                        endColumn: warning.sourceInformation.endColumn,
+                    // show documention for parser section
+                    const lineTextIncludingWordRange = {
+                        startLineNumber: position.lineNumber,
+                        startColumn: 1,
+                        endLineNumber: position.lineNumber,
+                        endColumn: currentWord.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: [] };
-                }
-                // 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);
-                    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),
-                        };
+                    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);
+                        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: [] };
-            },
-        });
-        // 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 = [];
-                    // suggestions for parser keyword
-                    suggestions = suggestions.concat(getParserKeywordSuggestions(position, model, collectParserKeywordSuggestions(editorStore)));
-                    // suggestions for parser element snippets
-                    suggestions = suggestions.concat(getParserElementSnippetSuggestions(position, model, (parserName) => collectParserElementSnippetSuggestions(editorStore, parserName)));
-                    // inline code snippet suggestions
-                    suggestions = suggestions.concat(getInlineSnippetSuggestions(position, model));
-                    return { suggestions };
+                    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 = [];
+                        // suggestions for parser keyword
+                        suggestions = suggestions.concat(getParserKeywordSuggestions(position, model, collectParserKeywordSuggestions(editorStore)));
+                        // suggestions for parser element snippets
+                        suggestions = suggestions.concat(getParserElementSnippetSuggestions(position, model, (parserName) => collectParserElementSnippetSuggestions(editorStore, parserName)));
+                        // inline code snippet suggestions
+                        suggestions = suggestions.concat(getInlineSnippetSuggestions(position, model));
+                        return { suggestions };
+                    },
+                });
+        }
     }
     function toggleAutoFoldingElements() {
         const autoFoldingElements = editorStore.pluginManager
@@ -676,37 +713,32 @@ export const GrammarTextEditor = observer(() => {
             .flatMap((plugin) => plugin.getExtraGrammarTextEditorAutoFoldingElementCreatorKeywords?.() ??
             []);
         const foldingClass = editor?.getContribution('editor.contrib.folding');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        foldingClass.getFoldingModel().then((foldingModel) => {
-            const model = editor?.getModel();
-            const toggleFoldingLines = [];
-            model?.getLinesContent().forEach((line, j) => {
-                autoFoldingElements.forEach((elementName) => {
-                    if (line.match(new RegExp(`^${elementName}`))) {
-                        toggleFoldingLines.push(j + 2);
-                    }
+        if (editor && foldingClass) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            foldingClass.getFoldingModel().then((foldingModel) => {
+                const model = editor.getModel();
+                const toggleFoldingLines = [];
+                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));
+                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);
@@ -714,61 +746,72 @@ export const GrammarTextEditor = observer(() => {
     }, [editor, forcedCursorPosition]);
     useEffect(() => {
         if (editor) {
-            const autoFoldingElements = editorStore.pluginManager
-                .getApplicationPlugins()
-                .flatMap((plugin) => plugin.getExtraGrammarTextEditorAutoFoldingElementCreatorKeywords?.() ??
-                []);
-            const foldingClass = editor.getContribution('editor.contrib.folding');
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            foldingClass.getFoldingModel().then((foldingModel) => {
-                foldingModel.onDidChange(() => {
-                    const model = editor.getModel();
-                    const toggleFoldingLines = [];
-                    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);
-                });
+            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((plugin) => plugin.getExtraGrammarTextEditorAutoFoldingElementCreatorKeywords?.() ??
                 []);
             const foldingClass = editor.getContribution('editor.contrib.folding');
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            foldingClass
-                .getFoldingModel()
-                .then((foldingModel) => {
-                const model = editor.getModel();
-                const foldingLines = [];
-                model?.getLinesContent().forEach((line, j) => {
-                    autoFoldingElements.forEach((elementName) => {
-                        if (line.match(new RegExp(`^${elementName}`))) {
-                            foldingLines.push(j + 2);
-                        }
-                    });
-                });
-                foldingLines.forEach((foldingLineRegion, i) => {
-                    foldingModel.toggleCollapseState(foldingModel.getAllRegionsAtLine(foldingLineRegion));
+            if (foldingClass && model) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                foldingClass.getFoldingModel().then((foldingModel) => {
+                    if (foldingModel) {
+                        const elementLinesToBeFolded = [];
+                        model.getLinesContent().forEach((line, idx) => {
+                            autoFoldingElements.forEach((elementName) => {
+                                if (line.match(new RegExp(`^${elementName}`))) {
+                                    elementLinesToBeFolded.push(idx + 2);
+                                }
+                            });
+                        });
+                        elementLinesToBeFolded.forEach((lineToBeFolded) => {
+                            const regionToFold = foldingModel.getAllRegionsAtLine(lineToBeFolded);
+                            foldingModel.toggleCollapseState(regionToFold);
+                        });
+                        setFoldingElements(true);
+                    }
                 });
-            });
+            }
         }
     }, [editor, editorStore.pluginManager]);
     // NOTE: dispose the editor to prevent potential memory-leak
@@ -781,10 +824,10 @@ export const GrammarTextEditor = observer(() => {
         suggestionProviderDisposer.current?.dispose();
     }, [editor]);
     useApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.TEXT_MODE_EDITOR);
-    return (_jsxs("div", { className: "panel editor-group", children: [_jsxs("div", { className: "panel__header editor-group__header", children: [_jsxs("div", { className: "editor-group__header__tabs", children: [_jsx("div", { className: "editor-group__text-mode__tab", children: _jsx("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", children: _jsx(MoreHorizontalIcon, {}) }) }), _jsx(ContextMenu, { className: "editor-group__text-mode__tab editor-group__text-mode__tab--active", content: _jsx(GrammarTextEditorHeaderTabContextMenu, {}), children: _jsx("div", { className: "editor-group__text-mode__tab__label", children: grammarModeState.headerLabel }) })] }), _jsxs("div", { className: "editor-group__header__actions", children: [_jsx("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`, children: _jsx(WordWrapIcon, { className: "editor-group__icon__word-wrap" }) }), _jsxs("button", { className: clsx('editor-group__header__action', {
-                                    'editor-group__header__action--active': elementsFolded,
-                                }), onClick: toggleAutoFoldingElements, tabIndex: -1, title: `${!elementsFolded ? 'Unfold' : 'Fold'} auto-folding elements`, children: [!elementsFolded && (_jsx(UnfoldIcon, { className: "editor-group__icon__word-wrap" })), elementsFolded && (_jsx(FoldIcon, { className: "editor-group__icon__word-wrap" }))] })] })] }), _jsx(PanelContent, { className: "editor-group__content", children: _jsx("div", { className: "code-editor__container", children: _jsx("div", { className: "code-editor__body", ref: textEditorRef }) }) })] }));
+    return (_jsxs("div", { className: "panel editor-group", children: [_jsxs("div", { className: "panel__header editor-group__header", children: [_jsx("div", { className: "editor-group__header__tabs", children: _jsx(ContextMenu, { className: "editor-group__text-mode__tab editor-group__text-mode__tab--active", content: _jsx(GrammarTextEditorHeaderTabContextMenu, {}), children: _jsx("div", { className: "editor-group__text-mode__tab__label", children: grammarModeState.headerLabel }) }) }), _jsxs("div", { className: "editor-group__header__actions", children: [_jsx("div", { className: "editor-group__text-mode__action", children: _jsx("button", { title: "Compile (F9)", onClick: globalCompile, className: "editor-group__text-mode-btn btn--dark", children: "Compile" }) }), _jsx("div", { className: "editor-group__text-mode__action", children: _jsx("button", { title: "Click to exit text mode and go back to form mode (F8)", onClick: leaveTextMode, className: "editor-group__text-mode-btn btn--dark", children: "Exit Text Mode" }) }), _jsx("div", { className: "query-builder__header__actions", children: _jsxs(DropdownMenu, { className: "query-builder__header__advanced-dropdown", title: "Show Advanced Menu...", content: _jsxs(MenuContent, { children: [_jsxs(MenuContentItem, { onClick: toggleWordWrap, children: [_jsx(MenuContentItemIcon, { children: grammarTextEditorState.wrapText ? _jsx(CheckIcon, {}) : null }), _jsx(MenuContentItemLabel, { children: "Wrap Overflowing Words" })] }), _jsxs(MenuContentItem, { onClick: toggleAutoFoldingElements, children: [_jsx(MenuContentItemIcon, { children: elementsFolded ? _jsx(CheckIcon, {}) : null }), _jsx(MenuContentItemLabel, { children: "Auto Fold Elements" })] })] }), menuProps: {
+                                        anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                                        transformOrigin: { vertical: 'top', horizontal: 'right' },
+                                        elevation: 7,
+                                    }, children: [_jsx("div", { className: "query-builder__header__advanced-dropdown__label", children: "Advanced" }), _jsx(CaretDownIcon, { className: "query-builder__header__advanced-dropdown__icon" })] }) })] })] }), _jsxs(PanelContent, { className: "editor-group__content", children: [_jsx(PanelLoadingIndicator, { isLoading: editorStore.graphState.isRunningGlobalCompile }), _jsx("div", { className: "code-editor__container", children: _jsx("div", { className: "code-editor__body", ref: textEditorRef }) })] })] }));
 });
 //# sourceMappingURL=GrammarTextEditor.js.map