@finos/legend-code-editor 1.2.73

package/lib/themes/solarized-dark-color-theme.json

@@ -0,0 +1,398 @@
+{
+    "name": "Solarized (dark)",
+    "tokenColors": [
+        {
+            "settings": {
+                "foreground": "#839496"
+            }
+        },
+        {
+            "scope": [
+                "meta.embedded",
+                "source.groovy.embedded",
+                "string meta.image.inline.markdown"
+            ],
+            "settings": {
+                "foreground": "#839496"
+            }
+        },
+        {
+            "name": "Comment",
+            "scope": "comment",
+            "settings": {
+                "fontStyle": "italic",
+                "foreground": "#586E75"
+            }
+        },
+        {
+            "name": "String",
+            "scope": "string",
+            "settings": {
+                "foreground": "#2AA198"
+            }
+        },
+        {
+            "name": "Regexp",
+            "scope": "string.regexp",
+            "settings": {
+                "foreground": "#DC322F"
+            }
+        },
+        {
+            "name": "Number",
+            "scope": "constant.numeric",
+            "settings": {
+                "foreground": "#D33682"
+            }
+        },
+        {
+            "name": "Variable",
+            "scope": ["variable.language", "variable.other"],
+            "settings": {
+                "foreground": "#268BD2"
+            }
+        },
+        {
+            "name": "Keyword",
+            "scope": "keyword",
+            "settings": {
+                "foreground": "#859900"
+            }
+        },
+        {
+            "name": "Storage",
+            "scope": "storage",
+            "settings": {
+                "fontStyle": "bold",
+                "foreground": "#93A1A1"
+            }
+        },
+        {
+            "name": "Class name",
+            "scope": [
+                "entity.name.class",
+                "entity.name.type",
+                "entity.name.namespace",
+                "entity.name.scope-resolution"
+            ],
+            "settings": {
+                "fontStyle": "",
+                "foreground": "#CB4B16"
+            }
+        },
+        {
+            "name": "Function name",
+            "scope": "entity.name.function",
+            "settings": {
+                "foreground": "#268BD2"
+            }
+        },
+        {
+            "name": "Variable start",
+            "scope": "punctuation.definition.variable",
+            "settings": {
+                "foreground": "#859900"
+            }
+        },
+        {
+            "name": "Embedded code markers",
+            "scope": [
+                "punctuation.section.embedded.begin",
+                "punctuation.section.embedded.end"
+            ],
+            "settings": {
+                "foreground": "#DC322F"
+            }
+        },
+        {
+            "name": "Built-in constant",
+            "scope": ["constant.language", "meta.preprocessor"],
+            "settings": {
+                "foreground": "#B58900"
+            }
+        },
+        {
+            "name": "Support.construct",
+            "scope": ["support.function.construct", "keyword.other.new"],
+            "settings": {
+                "foreground": "#CB4B16"
+            }
+        },
+        {
+            "name": "User-defined constant",
+            "scope": ["constant.character", "constant.other"],
+            "settings": {
+                "foreground": "#CB4B16"
+            }
+        },
+        {
+            "name": "Inherited class",
+            "scope": "entity.other.inherited-class",
+            "settings": {
+                "foreground": "#6C71C4"
+            }
+        },
+        {
+            "name": "Function argument",
+            "scope": "variable.parameter",
+            "settings": {}
+        },
+        {
+            "name": "Tag name",
+            "scope": "entity.name.tag",
+            "settings": {
+                "foreground": "#268BD2"
+            }
+        },
+        {
+            "name": "Tag start/end",
+            "scope": "punctuation.definition.tag",
+            "settings": {
+                "foreground": "#586E75"
+            }
+        },
+        {
+            "name": "Tag attribute",
+            "scope": "entity.other.attribute-name",
+            "settings": {
+                "foreground": "#93A1A1"
+            }
+        },
+        {
+            "name": "Library function",
+            "scope": "support.function",
+            "settings": {
+                "foreground": "#268BD2"
+            }
+        },
+        {
+            "name": "Continuation",
+            "scope": "punctuation.separator.continuation",
+            "settings": {
+                "foreground": "#DC322F"
+            }
+        },
+        {
+            "name": "Library constant",
+            "scope": ["support.constant", "support.variable"],
+            "settings": {}
+        },
+        {
+            "name": "Library class/type",
+            "scope": ["support.type", "support.class"],
+            "settings": {
+                "foreground": "#859900"
+            }
+        },
+        {
+            "name": "Library Exception",
+            "scope": "support.type.exception",
+            "settings": {
+                "foreground": "#CB4B16"
+            }
+        },
+        {
+            "name": "Library variable",
+            "scope": "support.other.variable",
+            "settings": {}
+        },
+        {
+            "name": "Invalid",
+            "scope": "invalid",
+            "settings": {
+                "foreground": "#DC322F"
+            }
+        },
+        {
+            "name": "diff: header",
+            "scope": ["meta.diff", "meta.diff.header"],
+            "settings": {
+                "fontStyle": "italic",
+                "foreground": "#268BD2"
+            }
+        },
+        {
+            "name": "diff: deleted",
+            "scope": "markup.deleted",
+            "settings": {
+                "fontStyle": "",
+                "foreground": "#DC322F"
+            }
+        },
+        {
+            "name": "diff: changed",
+            "scope": "markup.changed",
+            "settings": {
+                "fontStyle": "",
+                "foreground": "#CB4B16"
+            }
+        },
+        {
+            "name": "diff: inserted",
+            "scope": "markup.inserted",
+            "settings": {
+                "foreground": "#859900"
+            }
+        },
+        {
+            "name": "Markup Quote",
+            "scope": "markup.quote",
+            "settings": {
+                "foreground": "#859900"
+            }
+        },
+        {
+            "name": "Markup Lists",
+            "scope": "markup.list",
+            "settings": {
+                "foreground": "#B58900"
+            }
+        },
+        {
+            "name": "Markup Styling",
+            "scope": ["markup.bold", "markup.italic"],
+            "settings": {
+                "foreground": "#D33682"
+            }
+        },
+        {
+            "name": "Markup: Strong",
+            "scope": "markup.bold",
+            "settings": {
+                "fontStyle": "bold"
+            }
+        },
+        {
+            "name": "Markup: Emphasis",
+            "scope": "markup.italic",
+            "settings": {
+                "fontStyle": "italic"
+            }
+        },
+        {
+            "scope": "markup.strikethrough",
+            "settings": {
+                "fontStyle": "strikethrough"
+            }
+        },
+        {
+            "name": "Markup Inline",
+            "scope": "markup.inline.raw",
+            "settings": {
+                "fontStyle": "",
+                "foreground": "#2AA198"
+            }
+        },
+        {
+            "name": "Markup Headings",
+            "scope": "markup.heading",
+            "settings": {
+                "fontStyle": "bold",
+                "foreground": "#268BD2"
+            }
+        },
+        {
+            "name": "Markup Setext Header",
+            "scope": "markup.heading.setext",
+            "settings": {
+                "fontStyle": "",
+                "foreground": "#268BD2"
+            }
+        }
+    ],
+    "colors": {
+        "focusBorder": "#2AA19899",
+        "selection.background": "#2AA19899",
+        "input.background": "#003847",
+        "input.foreground": "#93A1A1",
+        "input.placeholderForeground": "#93A1A1AA",
+        "inputOption.activeBorder": "#2AA19899",
+        "inputValidation.infoBorder": "#363b5f",
+        "inputValidation.infoBackground": "#052730",
+        "inputValidation.warningBackground": "#5d5938",
+        "inputValidation.warningBorder": "#9d8a5e",
+        "inputValidation.errorBackground": "#571b26",
+        "inputValidation.errorBorder": "#a92049",
+        "errorForeground": "#ffeaea",
+        "badge.background": "#047aa6",
+        "progressBar.background": "#047aa6",
+        "dropdown.background": "#00212B",
+        "dropdown.border": "#2AA19899",
+        "button.background": "#2AA19899",
+        "list.activeSelectionBackground": "#005A6F",
+        "quickInputList.focusBackground": "#005A6F",
+        "list.hoverBackground": "#004454AA",
+        "list.inactiveSelectionBackground": "#00445488",
+        "list.dropBackground": "#00445488",
+        "list.highlightForeground": "#1ebcc5",
+        "editor.background": "#002B36",
+        "editor.foreground": "#839496",
+        "editorWidget.background": "#00212B",
+        "editorCursor.foreground": "#D30102",
+        "editorWhitespace.foreground": "#93A1A180",
+        "editor.lineHighlightBackground": "#073642",
+        "editorLineNumber.activeForeground": "#949494",
+        "editor.selectionBackground": "#274642",
+        "minimap.selectionHighlight": "#274642",
+        "editorIndentGuide.background": "#93A1A180",
+        "editorIndentGuide.activeBackground": "#C3E1E180",
+        "editorHoverWidget.background": "#004052",
+        "editorMarkerNavigationError.background": "#AB395B",
+        "editorMarkerNavigationWarning.background": "#5B7E7A",
+        "editor.selectionHighlightBackground": "#005A6FAA",
+        "editor.wordHighlightBackground": "#004454AA",
+        "editor.wordHighlightStrongBackground": "#005A6FAA",
+        "editorBracketHighlight.foreground1": "#cdcdcdff",
+        "editorBracketHighlight.foreground2": "#b58900ff",
+        "editorBracketHighlight.foreground3": "#d33682ff",
+        "peekViewResult.background": "#00212B",
+        "peekViewEditor.background": "#10192c",
+        "peekViewTitle.background": "#00212B",
+        "peekView.border": "#2b2b4a",
+        "peekViewEditor.matchHighlightBackground": "#7744AA40",
+        "titleBar.activeBackground": "#002C39",
+        "editorGroup.border": "#00212B",
+        "editorGroup.dropBackground": "#2AA19844",
+        "editorGroupHeader.tabsBackground": "#004052",
+        "tab.activeForeground": "#d6dbdb",
+        "tab.activeBackground": "#002B37",
+        "tab.inactiveForeground": "#93A1A1",
+        "tab.inactiveBackground": "#004052",
+        "tab.border": "#003847",
+        "tab.lastPinnedBorder": "#2AA19844",
+        "activityBar.background": "#003847",
+        "panel.border": "#2b2b4a",
+        "sideBar.background": "#00212B",
+        "sideBarTitle.foreground": "#93A1A1",
+        "statusBar.foreground": "#93A1A1",
+        "statusBar.background": "#00212B",
+        "statusBar.debuggingBackground": "#00212B",
+        "statusBar.noFolderBackground": "#00212B",
+        "statusBarItem.remoteBackground": "#2AA19899",
+        "ports.iconRunningProcessForeground": "#369432",
+        "statusBarItem.prominentBackground": "#003847",
+        "statusBarItem.prominentHoverBackground": "#003847",
+        "debugToolBar.background": "#00212B",
+        "debugExceptionWidget.background": "#00212B",
+        "debugExceptionWidget.border": "#AB395B",
+        "pickerGroup.foreground": "#2AA19899",
+        "pickerGroup.border": "#2AA19899",
+        "terminal.ansiBlack": "#073642",
+        "terminal.ansiRed": "#dc322f",
+        "terminal.ansiGreen": "#859900",
+        "terminal.ansiYellow": "#b58900",
+        "terminal.ansiBlue": "#268bd2",
+        "terminal.ansiMagenta": "#d33682",
+        "terminal.ansiCyan": "#2aa198",
+        "terminal.ansiWhite": "#eee8d5",
+        "terminal.ansiBrightBlack": "#002b36",
+        "terminal.ansiBrightRed": "#cb4b16",
+        "terminal.ansiBrightGreen": "#586e75",
+        "terminal.ansiBrightYellow": "#657b83",
+        "terminal.ansiBrightBlue": "#839496",
+        "terminal.ansiBrightMagenta": "#6c71c4",
+        "terminal.ansiBrightCyan": "#93a1a1",
+        "terminal.ansiBrightWhite": "#fdf6e3"
+    },
+    "semanticHighlighting": true
+}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@finos/legend-code-editor",
+  "version": "1.2.73",
+  "description": "Legend shared advanced application components and building blocks",
+  "keywords": [
+    "legend",
+    "component",
+    "shared-component"
+  ],
+  "homepage": "https://github.com/finos/legend-studio/tree/master/packages/legend-code-editor",
+  "bugs": {
+    "url": "https://github.com/finos/legend-studio/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/finos/legend-studio.git",
+    "directory": "packages/legend-code-editor"
+  },
+  "license": "Apache-2.0",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": "./lib/index.js"
+  },
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "build": "yarn clean && yarn build:sass && yarn build:ts",
+    "build:sass": "cross-env INIT_CWD=$INIT_CWD node ../../scripts/workflow/buildSass.js",
+    "build:ts": "tsc --project ./tsconfig.build.json",
+    "clean": "npm-run-all clean:cache clean:lib",
+    "clean:cache": "rimraf \"build\"",
+    "clean:lib": "rimraf \"lib\"",
+    "dev": "npm-run-all --parallel dev:sass dev:ts",
+    "dev:sass": "sass style:lib --watch --load-path=../../node_modules/@finos/legend-art/scss",
+    "dev:ts": "tsc --watch --preserveWatchOutput",
+    "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location ./build/.eslintcache --report-unused-disable-directives --parser-options=project:\"./tsconfig.json\" \"./src/**/*.{js,ts,tsx}\"",
+    "publish:prepare": "node ../../scripts/release/preparePublishContent.js",
+    "publish:snapshot": "node ../../scripts/release/publishDevSnapshot.js",
+    "test": "jest",
+    "test:watch": "jest --watch"
+  },
+  "dependencies": {
+    "@finos/legend-graph": "31.10.34",
+    "@finos/legend-shared": "10.0.56",
+    "@types/css-font-loading-module": "0.0.13",
+    "monaco-editor": "0.52.0"
+  },
+  "devDependencies": {
+    "@finos/legend-dev-utils": "2.1.23",
+    "@jest/globals": "29.7.0",
+    "cross-env": "7.0.3",
+    "eslint": "8.57.1",
+    "jest": "29.7.0",
+    "npm-run-all": "4.1.5",
+    "rimraf": "6.0.1",
+    "sass": "1.79.3",
+    "typescript": "5.6.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "publishConfig": {
+    "directory": "build/publishContent"
+  }
+}

package/src/CodeEditorTheme.ts

@@ -0,0 +1,151 @@
+/**
+ * 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 { PURE_GRAMMAR_TOKEN } from './PureLanguage.js';
+import type { editor as monacoEditorAPI } from 'monaco-editor';
+import { buildCodeEditorTheme } from './themes/MonacoEditorThemeUtils.js';
+import SOLARIZED_DARK_THEME_DATA from './themes/solarized-dark-color-theme.json' with { type: 'json' };
+import GITHUB_DARK_THEME_DATA from './themes/Github-Theme-dark.json' with { type: 'json' };
+import GITHUB_DARK_DIMMED_THEME_DATA from './themes/Github-Theme-dark-dimmed.json' with { type: 'json' };
+import GITHUB_LIGHT_THEME_DATA from './themes/Github-Theme-light.json' with { type: 'json' };
+import MATERIAL_DEFAULT_THEME_DATA from './themes/Material-Theme-Default.json' with { type: 'json' };
+import MATERIAL_DARKER_THEME_DATA from './themes/Material-Theme-Darker.json' with { type: 'json' };
+import ONE_DARK_PRO_THEME_DATA from './themes/OneDark-Pro.json' with { type: 'json' };
+import ONE_DARK_PRO_DARKER_THEME_DATA from './themes/OneDark-Pro-darker.json' with { type: 'json' };
+
+const BASE_PURE_LANGUAGE_COLOR_TOKENS: monacoEditorAPI.ITokenThemeRule[] = [
+  // NOTE: `monaco-editor` only accepts HEX values, not CSS variables
+  { token: PURE_GRAMMAR_TOKEN.IDENTIFIER, foreground: 'dcdcaa' },
+  { token: PURE_GRAMMAR_TOKEN.NUMBER, foreground: 'b5cea8' },
+  { token: PURE_GRAMMAR_TOKEN.DATE, foreground: 'b5cea8' },
+  { token: PURE_GRAMMAR_TOKEN.COLOR, foreground: 'b5cea8' },
+  { token: PURE_GRAMMAR_TOKEN.PACKAGE, foreground: '808080' },
+  { token: PURE_GRAMMAR_TOKEN.PARSER, foreground: 'c586c0' },
+  { token: PURE_GRAMMAR_TOKEN.LANGUAGE_STRUCT, foreground: 'c586c0' },
+  { token: PURE_GRAMMAR_TOKEN.MULTIPLICITY, foreground: '2d796b' },
+  { token: PURE_GRAMMAR_TOKEN.GENERICS, foreground: '2d796b' },
+  { token: PURE_GRAMMAR_TOKEN.PROPERTY, foreground: '9cdcfe' },
+  { token: PURE_GRAMMAR_TOKEN.PARAMETER, foreground: '9cdcfe' },
+  { token: PURE_GRAMMAR_TOKEN.VARIABLE, foreground: '4fc1ff' },
+  { token: PURE_GRAMMAR_TOKEN.TYPE, foreground: '3dc9b0' },
+  { token: `${PURE_GRAMMAR_TOKEN.STRING}.escape`, foreground: 'd7ba7d' },
+];
+
+export enum CODE_EDITOR_THEME {
+  DEFAULT_DARK = 'default-dark',
+  GITHUB_LIGHT = 'github-light',
+  GITHUB_DARK = 'github-dark',
+  GITHUB_DARK_DIMMED = 'github-dark-dimmed',
+  SOLARIZED_DARK = 'solarized-dark',
+  ONE_DARK_PRO = 'one-dark-pro',
+  ONE_DARK_PRO_DARKER = 'one-dark-pro-darker',
+  MATERIAL_DEFAULT = 'material-default',
+  MATERIAL_DARKER = 'material-darker',
+
+  // default themes in Monaco editor
+  // See https://github.com/microsoft/vscode/blob/main/src/vs/editor/standalone/common/themes.ts
+  BUILT_IN__VSCODE_LIGHT = 'vs',
+  BUILT_IN__VSCODE_DARK = 'vs-dark',
+  BUILT_IN__VSCODE_HC_BLACK = 'hc-black',
+  BUILT_IN__VSCODE_HC_LIGHT = 'hc-light',
+}
+
+export const DEFAULT_DARK_THEME: monacoEditorAPI.IStandaloneThemeData = {
+  base: 'vs-dark',
+  inherit: true,
+  colors: {},
+  rules: [
+    ...BASE_PURE_LANGUAGE_COLOR_TOKENS,
+    // NOTE: correct a problem with syntax highlighting of string in SQL
+    { token: 'string.sql', foreground: 'ce9178' },
+    { token: 'white.sql', foreground: 'd4d4d4' },
+    { token: 'identifier.sql', foreground: 'd4d4d4' },
+    { token: 'operator.sql', foreground: 'd4d4d4' },
+  ],
+};
+
+export const SOLARIZED_DARK_THEME = buildCodeEditorTheme(
+  SOLARIZED_DARK_THEME_DATA,
+  CODE_EDITOR_THEME.BUILT_IN__VSCODE_DARK,
+  {},
+  [],
+);
+
+export const GITHUB_DARK_THEME = buildCodeEditorTheme(
+  GITHUB_DARK_THEME_DATA,
+  CODE_EDITOR_THEME.BUILT_IN__VSCODE_DARK,
+  {},
+  [],
+);
+
+export const GITHUB_LIGHT_THEME = buildCodeEditorTheme(
+  GITHUB_LIGHT_THEME_DATA,
+  CODE_EDITOR_THEME.BUILT_IN__VSCODE_LIGHT,
+  {},
+  [
+    // NOTE: `monaco-editor` only accepts HEX values, not CSS variables
+    // { token: PURE_GRAMMAR_TOKEN.IDENTIFIER, foreground: '000000' },
+    // { token: PURE_GRAMMAR_TOKEN.NUMBER, foreground: 'b5cea8' },
+    // { token: PURE_GRAMMAR_TOKEN.DATE, foreground: 'b5cea8' },
+    // { token: PURE_GRAMMAR_TOKEN.COLOR, foreground: 'b5cea8' },
+    // { token: PURE_GRAMMAR_TOKEN.PACKAGE, foreground: '808080' },
+    // { token: PURE_GRAMMAR_TOKEN.PARSER, foreground: 'c586c0' },
+    // { token: PURE_GRAMMAR_TOKEN.LANGUAGE_STRUCT, foreground: 'c586c0' },
+    // { token: PURE_GRAMMAR_TOKEN.MULTIPLICITY, foreground: '2d796b' },
+    // { token: PURE_GRAMMAR_TOKEN.GENERICS, foreground: '2d796b' },
+    // { token: PURE_GRAMMAR_TOKEN.PROPERTY, foreground: '9cdcfe' },
+    // { token: PURE_GRAMMAR_TOKEN.PARAMETER, foreground: '9cdcfe' },
+    // { token: PURE_GRAMMAR_TOKEN.VARIABLE, foreground: '4fc1ff' },
+    // { token: PURE_GRAMMAR_TOKEN.TYPE, foreground: '3dc9b0' },
+    // { token: `${PURE_GRAMMAR_TOKEN.STRING}.escape`, foreground: 'd7ba7d' },
+    // TODO: handle SQL formatting like in dark theme?
+  ],
+);
+
+export const GITHUB_DARK_DIMMED_THEME = buildCodeEditorTheme(
+  GITHUB_DARK_DIMMED_THEME_DATA,
+  CODE_EDITOR_THEME.BUILT_IN__VSCODE_DARK,
+  {},
+  [],
+);
+
+export const MATERIAL_DEFAULT_THEME = buildCodeEditorTheme(
+  MATERIAL_DEFAULT_THEME_DATA,
+  CODE_EDITOR_THEME.BUILT_IN__VSCODE_DARK,
+  {},
+  [],
+);
+
+export const MATERIAL_DARKER_THEME = buildCodeEditorTheme(
+  MATERIAL_DARKER_THEME_DATA,
+  CODE_EDITOR_THEME.BUILT_IN__VSCODE_DARK,
+  {},
+  [],
+);
+
+export const ONE_DARK_PRO_THEME = buildCodeEditorTheme(
+  ONE_DARK_PRO_THEME_DATA,
+  CODE_EDITOR_THEME.BUILT_IN__VSCODE_DARK,
+  {},
+  [],
+);
+
+export const ONE_DARK_PRO_DARKER_THEME = buildCodeEditorTheme(
+  ONE_DARK_PRO_DARKER_THEME_DATA,
+  CODE_EDITOR_THEME.BUILT_IN__VSCODE_DARK,
+  {},
+  [],
+);