fix: monaco getModeId bug for monaco-editor@^0.30.0 (#2118)

* fix: monaco getModeId bug * upgrade for new key codes for example
graphql · Dec 13, 2021 · 0d1122f · 0d1122f · github-actions · Dec 13, 2021
1 parent c1e2b5e
commit 0d1122f
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 12 deletions.
diff --git a/.changeset/orange-wombats-help.md b/.changeset/orange-wombats-help.md
@@ -0,0 +1,7 @@
+---
+'monaco-graphql': patch
+---
+
+fix: monaco `getModeId` bug for `monaco-editor@^0.30.0`
+
+We fixed this already, but we reverted it because folks were having issues with older versions. This fix works for all versions of `monaco-editor` that we support!
diff --git a/examples/monaco-graphql-react-vite/package.json b/examples/monaco-graphql-react-vite/package.json
@@ -8,7 +8,8 @@
     "monaco-graphql": "^1.0.8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "jsonc-parser": "^3.0.0"
+    "jsonc-parser": "^3.0.0",
+    "monaco-editor": "^0.31.0"
   },
   "devDependencies": {
     "vite": "^2.7.0",

diff --git a/examples/monaco-graphql-webpack/package.json b/examples/monaco-graphql-webpack/package.json
@@ -15,7 +15,7 @@
     "graphql-language-service": "^4.1.4",
     "json-schema": "^0.3.0",
     "jsonc-parser": "3.0.0",
-    "monaco-editor": "^0.29.1"
+    "monaco-editor": "^0.31.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",

diff --git a/examples/monaco-graphql-webpack/src/index.ts b/examples/monaco-graphql-webpack/src/index.ts
@@ -172,8 +172,7 @@ async function render() {
       contextMenuOrder: 0,
       contextMenuGroupId: 'graphql',
       keybindings: [
-        // eslint-disable-next-line no-bitwise
-        monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_R,
+        monaco.KeyMod.CtrlCmd | monaco.KeyCode?.KeyR, // eslint-disable-line no-bitwise
       ],
       run: operationHandler,
     };

diff --git a/packages/monaco-graphql/package.json b/packages/monaco-graphql/package.json
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "graphql": "16.0.0-experimental-stream-defer.5",
-    "monaco-editor": "^0.29.1",
+    "monaco-editor": "^0.31.0",
     "vscode-languageserver-types": "^3.15.1"
   },
   "peerDependencies": {

diff --git a/packages/monaco-graphql/src/languageFeatures.ts b/packages/monaco-graphql/src/languageFeatures.ts
@@ -20,7 +20,7 @@ import * as monaco from 'monaco-editor';
 
 import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
 import { CompletionItemKind as lsCompletionItemKind } from 'graphql-language-service';
-import { GraphQLWorkerCompletionItem } from './utils';
+import { getModelLanguageId, GraphQLWorkerCompletionItem } from './utils';
 export interface WorkerAccessor {
   (...more: Uri[]): Thenable<GraphQLWorker>;
 }
@@ -37,7 +37,7 @@ export class DiagnosticsAdapter {
   ) {
     this._worker = _worker;
     const onModelAdd = (model: editor.IModel): void => {
-      const modeId = model.getModeId();
+      const modeId = getModelLanguageId(model);
       if (modeId !== this.defaults.languageId) {
         // it is tempting to load json models we cared about here
         // into the webworker, however setDiagnosticOptions() needs
@@ -97,7 +97,7 @@ export class DiagnosticsAdapter {
     this._disposables.push(
       defaults.onDidChange(() => {
         editor.getModels().forEach(model => {
-          if (model.getModeId() === this.defaults.languageId) {
+          if (getModelLanguageId(model) === this.defaults.languageId) {
             onModelRemoved(model);
             onModelAdd(model);
           }

diff --git a/packages/monaco-graphql/src/utils.ts b/packages/monaco-graphql/src/utils.ts
@@ -12,11 +12,22 @@ import type {
   Diagnostic,
   CompletionItem as GraphQLCompletionItem,
 } from 'graphql-language-service';
+import type { editor } from 'monaco-editor';
 
 import { buildASTSchema, printSchema } from 'graphql';
 
 import { Position } from 'graphql-language-service';
 
+// for backwards compatibility
+export const getModelLanguageId = (model: editor.ITextModel) => {
+  if ('getModeId' in model) {
+    // for <0.30.0 support
+    // @ts-expect-error
+    return model.getModeId();
+  }
+  return model.getLanguageId();
+};
+
 export type MonacoCompletionItem = monaco.languages.CompletionItem & {
   isDeprecated?: boolean;
   deprecationReason?: string | null;

diff --git a/yarn.lock b/yarn.lock
@@ -14971,10 +14971,10 @@ monaco-editor@^0.27.0:
   resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.27.0.tgz#4b69108bb1dc1f60174c5dcdf51bc5306ab5ba26"
   integrity sha512-UhwP78Wb8w0ZSYoKXQNTV/0CHObp6NS3nCt51QfKE6sKyBo5PBsvuDOHoI2ooBakc6uIwByRLHVeT7+yXQe2fQ==
 
-monaco-editor@^0.29.1:
-  version "0.29.1"
-  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.29.1.tgz#6ee93d8a5320704d48fd7058204deed72429c020"
-  integrity sha512-rguaEG/zrPQSaKzQB7IfX/PpNa0qxF1FY8ZXRkN4WIl8qZdTQRSRJCtRto7IMcSgrU6H53RXI+fTcywOBC4aVw==
+monaco-editor@^0.31.0:
+  version "0.31.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.31.0.tgz#ec53566e40b612a96c0d54f77d37acef6d9dd70e"
+  integrity sha512-H3QmysEwxxY8oxmFhIFcY9JkuwilUDa6txdAxb797cVr7XFZX27a3SDwcGJmTlV9iGPwdh132r3KKCS5aNL4Gg==
 
 move-concurrently@^1.0.1:
   version "1.0.1"