@finos/legend-code-editor 1.2.73

package/src/CodeEditorUtils.ts

@@ -0,0 +1,241 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { editor as monacoEditorAPI, MarkerSeverity } from 'monaco-editor';
+import {
+  CODE_EDITOR_THEME,
+  DEFAULT_DARK_THEME,
+  GITHUB_DARK_DIMMED_THEME,
+  GITHUB_DARK_THEME,
+  GITHUB_LIGHT_THEME,
+  MATERIAL_DARKER_THEME,
+  MATERIAL_DEFAULT_THEME,
+  ONE_DARK_PRO_DARKER_THEME,
+  ONE_DARK_PRO_THEME,
+  SOLARIZED_DARK_THEME,
+} from './CodeEditorTheme.js';
+
+export type CodeEditorPosition = {
+  lineNumber: number;
+  column: number;
+};
+
+/**
+ * Get the text value with LF line ending.
+ * This is needed since if there are CR `\r` characters in the text input
+ * (e.g. users of Windows doing copy/paste)
+ * the default mode of `monaco-editor` is `TextDefined` which means if the text
+ * contains CR character(s), it will automatically be treated as CRLF. As such, we want
+ * an utility method to extract the text value with line ending option LF
+ * to force omission of CR characters
+ * See https://github.com/finos/legend-studio/issues/608
+ */
+export const getCodeEditorValue = (
+  editor: monacoEditorAPI.IStandaloneCodeEditor,
+): string =>
+  editor.getModel()?.getValue(monacoEditorAPI.EndOfLinePreference.LF) ?? '';
+
+export const getBaseCodeEditorOptions =
+  (): monacoEditorAPI.IStandaloneEditorConstructionOptions =>
+    ({
+      contextmenu: false,
+      copyWithSyntaxHighlighting: false,
+      // NOTE: These following font options are needed (and CSS font-size option `.monaco-editor * { font-size: ... }` as well)
+      // in order to make the editor appear properly on multiple platform, the ligatures option is needed for Mac to display properly
+      // otherwise the cursor position relatively to text would be off
+      // Another potential cause for this misaligment is that the fonts are being lazy-loaded and made available after `monaco-editor`
+      // calculated the font-width, for this, we can use `remeasureFonts`, but our case here, `fontLigatures: true` seems
+      // to do the trick
+      // See https://github.com/microsoft/monaco-editor/issues/392
+      fontSize: 14,
+      // Enforce a fixed font-family to make cross platform display consistent (i.e. Mac defaults to use `Menlo` which is bigger than
+      // `Consolas` on Windows, etc.)
+      fontFamily: 'Roboto Mono',
+      // Enable font ligature: glyphs which combine the shapes of certain sequences of characters into a new form that makes for
+      //  a more harmonious reading experience.
+      fontLigatures: true,
+      // Make sure hover or widget shown near boundary are not truncated by setting their position to `fixed`
+      fixedOverflowWidgets: true,
+      detectIndentation: false, // i.e. so we can force tab-size
+      tabSize: 2,
+      // The typing is currently not correct for `bracketPairColorization`, until this is fixed, we will remove the cast
+      // See https://github.com/microsoft/monaco-editor/issues/3013
+      'bracketPairColorization.enabled': false,
+      automaticLayout: true,
+    }) as monacoEditorAPI.IStandaloneEditorConstructionOptions;
+
+export const moveCursorToPosition = (
+  editor: monacoEditorAPI.ICodeEditor,
+  position: CodeEditorPosition,
+): void => {
+  if (!editor.hasTextFocus()) {
+    editor.focus();
+  } // focus the editor first so that it can shows the cursor
+  editor.revealPositionInCenter(position, 0);
+  editor.setPosition(position);
+};
+
+const INTERNAL__DUMMY_PROBLEM_MARKER_OWNER = 'dummy_problem_marker_owner';
+
+export const setErrorMarkers = (
+  editorModel: monacoEditorAPI.ITextModel,
+  errors: {
+    message: string;
+    startLineNumber: number;
+    startColumn: number;
+    endLineNumber: number;
+    endColumn: number;
+  }[],
+  ownerId?: string,
+): void => {
+  monacoEditorAPI.setModelMarkers(
+    editorModel,
+    ownerId ?? INTERNAL__DUMMY_PROBLEM_MARKER_OWNER,
+    errors.map((error) => ({
+      startLineNumber: error.startLineNumber,
+      startColumn: error.startColumn,
+      endLineNumber: error.endLineNumber,
+      endColumn: error.endColumn + 1, // add a 1 to endColumn as monaco editor range is not inclusive
+      // NOTE: when the message is empty, no error tooltip is shown, we want to avoid this
+      message: error.message === '' ? '(no error message)' : error.message,
+      severity: MarkerSeverity.Error,
+    })),
+  );
+};
+
+export const setWarningMarkers = (
+  editorModel: monacoEditorAPI.ITextModel,
+  warnings: {
+    message: string;
+    startLineNumber: number;
+    startColumn: number;
+    endLineNumber: number;
+    endColumn: number;
+  }[],
+  ownerId?: string,
+): void => {
+  monacoEditorAPI.setModelMarkers(
+    editorModel,
+    ownerId ?? INTERNAL__DUMMY_PROBLEM_MARKER_OWNER,
+    warnings.map((warning) => ({
+      startLineNumber: warning.startLineNumber,
+      startColumn: warning.startColumn,
+      endColumn: warning.endColumn,
+      endLineNumber: warning.endLineNumber,
+      message:
+        warning.message === '' ? '(no warning message)' : warning.message,
+      severity: MarkerSeverity.Warning,
+    })),
+  );
+};
+
+export const clearMarkers = (ownerId?: string): void => {
+  monacoEditorAPI.removeAllMarkers(
+    ownerId ?? INTERNAL__DUMMY_PROBLEM_MARKER_OWNER,
+  );
+};
+
+/**
+ * This method eliminates CR '\r' character(s) in the provided text value.
+ */
+export const normalizeLineEnding = (val: string): string =>
+  val.replace(/\r/g, '');
+
+// We need to dynamically adjust the width of the line number gutter, otherwise as the document gets
+// larger, the left margin will start to shrink
+// See https://github.com/microsoft/monaco-editor/issues/2206
+export const resetLineNumberGutterWidth = (
+  editor: monacoEditorAPI.ICodeEditor,
+): void => {
+  const currentValue = editor.getValue();
+  editor.updateOptions({
+    lineNumbersMinChars: Math.max(
+      Math.floor(Math.log10(currentValue.split(/\r\n|\r|\n/g).length)) + 3,
+      5,
+    ),
+  });
+};
+
+export const configureCodeEditor = async (
+  fontFamily: string,
+  onError: (error: Error) => void,
+): Promise<void> => {
+  // themes
+  monacoEditorAPI.defineTheme(
+    CODE_EDITOR_THEME.DEFAULT_DARK,
+    DEFAULT_DARK_THEME,
+  );
+  monacoEditorAPI.defineTheme(
+    CODE_EDITOR_THEME.SOLARIZED_DARK,
+    SOLARIZED_DARK_THEME,
+  );
+  monacoEditorAPI.defineTheme(CODE_EDITOR_THEME.GITHUB_DARK, GITHUB_DARK_THEME);
+  monacoEditorAPI.defineTheme(
+    CODE_EDITOR_THEME.GITHUB_DARK_DIMMED,
+    GITHUB_DARK_DIMMED_THEME,
+  );
+  monacoEditorAPI.defineTheme(
+    CODE_EDITOR_THEME.GITHUB_LIGHT,
+    GITHUB_LIGHT_THEME,
+  );
+  monacoEditorAPI.defineTheme(
+    CODE_EDITOR_THEME.MATERIAL_DEFAULT,
+    MATERIAL_DEFAULT_THEME,
+  );
+  monacoEditorAPI.defineTheme(
+    CODE_EDITOR_THEME.MATERIAL_DARKER,
+    MATERIAL_DARKER_THEME,
+  );
+  monacoEditorAPI.defineTheme(
+    CODE_EDITOR_THEME.ONE_DARK_PRO,
+    ONE_DARK_PRO_THEME,
+  );
+  monacoEditorAPI.defineTheme(
+    CODE_EDITOR_THEME.ONE_DARK_PRO_DARKER,
+    ONE_DARK_PRO_DARKER_THEME,
+  );
+
+  /**
+   * Since we use a custom fonts for text-editor, we want to make sure the font is loaded before any text-editor is opened
+   * this is to ensure
+   */
+  const fontLoadFailureErrorMessage = `Monospaced font '${fontFamily}' has not been loaded properly, code editor might not display properly`;
+  await Promise.all(
+    [400, 700].map((weight) =>
+      document.fonts.load(`${weight} 1em ${fontFamily}`),
+    ),
+  )
+    .then(() => {
+      if (document.fonts.check(`1em ${fontFamily}`)) {
+        monacoEditorAPI.remeasureFonts();
+      } else {
+        onError(new Error(fontLoadFailureErrorMessage));
+      }
+    })
+    .catch(() => onError(new Error(fontLoadFailureErrorMessage)));
+};
+
+export enum CODE_EDITOR_LANGUAGE {
+  TEXT = 'plaintext',
+  PURE = 'pure',
+  JSON = 'json',
+  JAVA = 'java',
+  MARKDOWN = 'markdown',
+  SQL = 'sql',
+  XML = 'xml',
+  YAML = 'yaml',
+  GRAPHQL = 'graphql',
+}

package/src/PureLanguage.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export enum PURE_GRAMMAR_TOKEN {
+  WHITESPACE = '',
+
+  KEYWORD = 'keyword',
+  IDENTIFIER = 'identifier',
+  OPERATOR = 'operator',
+  DELIMITER = 'delimiter',
+
+  PARSER = 'parser',
+  NUMBER = 'number',
+  DATE = 'date',
+  COLOR = 'color',
+  PACKAGE = 'package',
+  STRING = 'string',
+  COMMENT = 'comment',
+
+  LANGUAGE_STRUCT = 'language-struct',
+  MULTIPLICITY = 'multiplicity',
+  GENERICS = 'generics',
+  PROPERTY = 'property',
+  PARAMETER = 'parameter',
+  VARIABLE = 'variable',
+  TYPE = 'type',
+
+  INVALID = 'invalid',
+}

package/src/PureLanguageCodeEditorSupport.ts

@@ -0,0 +1,341 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { PARSER_SECTION_MARKER, PURE_PARSER } from '@finos/legend-graph';
+import {
+  getNullableFirstEntry,
+  guaranteeNonNullable,
+  hasWhiteSpace,
+  type DocumentationEntry,
+} from '@finos/legend-shared';
+import {
+  type editor as monacoEditorAPI,
+  languages as monacoLanguagesAPI,
+  type IPosition,
+} from 'monaco-editor';
+
+/**
+ * This snippet suggestion is meant for an embedded content of an element
+ * In other words, it is used to construct element snippet suggestions
+ *
+ * Because of that, it is expected that there are text content wrapping around
+ * this snippet, so the first suggestion might not start from index 1.
+ */
+export interface ElementEmbeddedContentSnippetSuggestion {
+  /**
+   * Brief description about the suggestion item to enable the users to quickly
+   * differentiate between one suggestions from another
+   */
+  description?: string | undefined;
+  /**
+   * The snippet text to be embedded in the full snippet suggestion text for the element
+   *
+   * NOTE: The snippet syntax follows that of `monaco-editor`
+   * See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets
+   */
+  text: string;
+}
+
+/**
+ * This mirrors `monaco-editor` completion item structure
+ * See https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.CompletionItem.html
+ */
+export interface PureGrammarTextSuggestion {
+  /**
+   * The text label of the suggestion.
+   */
+  text: string;
+  /**
+   * Brief description about the suggestion item to enable the users to quickly
+   * differentiate between one suggestions from another
+   */
+  description?: string | undefined;
+  /**
+   * Detailed documentation that explains/elaborates the suggestion item.
+   */
+  documentation?: DocumentationEntry | undefined;
+  /**
+   * A string or snippet that should be inserted when selecting this suggestion.
+   *
+   * NOTE: The snippet syntax follows that of `monaco-editor`
+   * See https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets
+   */
+  insertText: string;
+}
+
+export const getParserKeywordSuggestions = (
+  position: IPosition,
+  model: monacoEditorAPI.ITextModel,
+  suggestions: PureGrammarTextSuggestion[],
+): monacoLanguagesAPI.CompletionItem[] => {
+  const results: monacoLanguagesAPI.CompletionItem[] = [];
+  const currentWord = model.getWordUntilPosition(position);
+
+  // suggestions for parser keyword
+  const lineTextIncludingWordRange = {
+    startLineNumber: position.lineNumber,
+    startColumn: 1,
+    endLineNumber: position.lineNumber,
+    endColumn: currentWord.endColumn,
+  };
+  const lineTextIncludingWord = model.getValueInRange(
+    lineTextIncludingWordRange,
+  );
+
+  // NOTE: make sure parser keyword suggestions only show up when the current word is the
+  // the first word of the line since parser section header must not be preceded by anything
+  if (!hasWhiteSpace(lineTextIncludingWord.trim())) {
+    suggestions.forEach((suggestion) => {
+      results.push({
+        label: {
+          label: `${PARSER_SECTION_MARKER}${suggestion.text}`,
+          description: suggestion.description,
+        },
+        kind: monacoLanguagesAPI.CompletionItemKind.Keyword,
+        insertText: `${PARSER_SECTION_MARKER}${suggestion.insertText}\n`,
+        range: lineTextIncludingWordRange,
+        documentation: suggestion.documentation
+          ? suggestion.documentation.markdownText
+            ? {
+                value: suggestion.documentation.markdownText.value,
+              }
+            : suggestion.documentation.text
+          : undefined,
+      } as monacoLanguagesAPI.CompletionItem);
+    });
+  }
+
+  return results;
+};
+
+export const getSectionParserNameFromLineText = (
+  lineText: string,
+): string | undefined => {
+  if (lineText.startsWith(PARSER_SECTION_MARKER)) {
+    return lineText.substring(PARSER_SECTION_MARKER.length).split(' ')[0];
+  }
+  // NOTE: since leading whitespace to parser name is considered invalid, we will return `undefined`
+  return undefined;
+};
+
+export const getParserElementSnippetSuggestions = (
+  position: IPosition,
+  model: monacoEditorAPI.ITextModel,
+  suggestionsGetter: (parserName: string) => PureGrammarTextSuggestion[],
+): monacoLanguagesAPI.CompletionItem[] => {
+  const results: monacoLanguagesAPI.CompletionItem[] = [];
+  const currentWord = model.getWordUntilPosition(position);
+
+  // suggestions for parser element snippets
+  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 currentParserName = getSectionParserNameFromLineText(
+    allParserSectionHeaders[allParserSectionHeaders.length - 1] ?? '',
+  );
+
+  if (currentParserName) {
+    suggestionsGetter(currentParserName).forEach((snippetSuggestion) => {
+      results.push({
+        label: {
+          label: snippetSuggestion.text,
+          description: snippetSuggestion.description,
+        },
+        kind: monacoLanguagesAPI.CompletionItemKind.Snippet,
+        insertTextRules:
+          monacoLanguagesAPI.CompletionItemInsertTextRule.InsertAsSnippet,
+        insertText: `${snippetSuggestion.insertText}\n`,
+        range: {
+          startLineNumber: position.lineNumber,
+          startColumn: currentWord.startColumn,
+          endLineNumber: position.lineNumber,
+          endColumn: currentWord.endColumn,
+        },
+        documentation: snippetSuggestion.documentation
+          ? snippetSuggestion.documentation.markdownText
+            ? {
+                value: snippetSuggestion.documentation.markdownText.value,
+              }
+            : snippetSuggestion.documentation.text
+          : undefined,
+      } as monacoLanguagesAPI.CompletionItem);
+    });
+  }
+
+  return results;
+};
+
+export const getInlineSnippetSuggestions = (
+  position: IPosition,
+  model: monacoEditorAPI.ITextModel,
+  extraSnippetSuggestions: PureGrammarTextSuggestion[] = [],
+): monacoLanguagesAPI.CompletionItem[] => {
+  const currentWord = model.getWordUntilPosition(position);
+
+  return (
+    [
+      {
+        text: 'let',
+        description: 'new variable',
+        insertText: `let \${1:} = \${2:};`,
+      },
+      {
+        text: 'let',
+        description: 'new collection',
+        insertText: `let \${1:} = [\${2:}];`,
+      },
+      {
+        text: 'cast',
+        description: 'type casting',
+        insertText: `cast(@\${1:model::SomeClass})`,
+      },
+      // conditionals
+      {
+        text: 'if',
+        description: '(conditional)',
+        insertText: `if(\${1:'true'}, | \${2:/* if true do this */}, | \${3:/* if false do this */})`,
+      },
+      {
+        text: 'case',
+        description: '(conditional)',
+        insertText: `case(\${1:}, \${2:'true'}, \${3:'false'})`,
+      },
+      {
+        text: 'match',
+        description: '(conditional)',
+        insertText: `match([x:\${1:String[1]}, \${2:''}])`,
+      },
+      // collection
+      {
+        text: 'map',
+        description: '(collection)',
+        insertText: `map(x|\${1:})`,
+      },
+      {
+        text: 'filter',
+        description: '(collection)',
+        insertText: `filter(x|\${1:})`,
+      },
+      {
+        text: 'fold',
+        description: '(collection)',
+        insertText: `fold({a, b| \${1:$a + $b}}, \${2:0})`,
+      },
+      {
+        text: 'filter',
+        description: '(collection)',
+        insertText: `filter(x|\${1:})`,
+      },
+      {
+        text: 'sort',
+        description: '(collection)',
+        insertText: `sort()`,
+      },
+      {
+        text: 'in',
+        description: '(collection)',
+        insertText: `in()`,
+      },
+      {
+        text: 'slice',
+        description: '(collection)',
+        insertText: `slice(\${1:1},$\{2:2})`,
+      },
+      {
+        text: 'removeDuplicates',
+        description: '(collection)',
+        insertText: `removeDuplicates()`,
+      },
+      {
+        text: 'toOne',
+        description: '(collection)',
+        insertText: `toOne(\${1:})`,
+      },
+      {
+        text: 'toOneMany',
+        description: '(collection)',
+        insertText: `toOneMany(\${1:})`,
+      },
+      {
+        text: 'isEmpty',
+        description: '(collection)',
+        insertText: `isEmpty()`,
+      },
+      // string
+      {
+        text: 'endsWith',
+        description: '(string)',
+        insertText: `endsWith()`,
+      },
+      {
+        text: 'startsWith',
+        description: '(string)',
+        insertText: `startsWith()`,
+      },
+      ...extraSnippetSuggestions,
+    ] as PureGrammarTextSuggestion[]
+  ).map(
+    (snippetSuggestion) =>
+      ({
+        label: {
+          label: snippetSuggestion.text,
+          description: snippetSuggestion.description,
+        },
+        kind: monacoLanguagesAPI.CompletionItemKind.Snippet,
+        insertTextRules:
+          monacoLanguagesAPI.CompletionItemInsertTextRule.InsertAsSnippet,
+        insertText: snippetSuggestion.insertText,
+        range: {
+          startLineNumber: position.lineNumber,
+          startColumn: currentWord.startColumn,
+          endLineNumber: position.lineNumber,
+          endColumn: currentWord.endColumn,
+        },
+        documentation: snippetSuggestion.documentation
+          ? snippetSuggestion.documentation.markdownText
+            ? {
+                value: snippetSuggestion.documentation.markdownText.value,
+              }
+            : snippetSuggestion.documentation.text
+          : undefined,
+      }) as monacoLanguagesAPI.CompletionItem,
+  );
+};
+
+export const isTokenOneOf = (
+  token: string,
+  baseTokens: string[],
+  exact = false,
+): boolean => {
+  if (exact) {
+    return baseTokens.map((baseToken) => `${baseToken}.pure`).includes(token);
+  }
+  const baseToken = guaranteeNonNullable(
+    getNullableFirstEntry(token.split('.')),
+  );
+  return baseTokens.includes(baseToken);
+};
+
+export const PURE_CODE_EDITOR_WORD_SEPARATORS =
+  '`~!@#%^&*()-=+[{]}\\|;:\'",.<>/?'; // omit $ from default word separators