Upgrade to latest Codemirror 6

niklaskorz · Sep 7, 2023 · 5406b6a · 5406b6a
1 parent 66e1a71
commit 5406b6a
Show file tree

Hide file tree

Showing 33 changed files with 9,725 additions and 24,693 deletions.
diff --git a/apps/example/package.json b/apps/example/package.json
@@ -1,36 +1,37 @@
 {
   "name": "@puredit/example",
-  "private": true,
   "version": "0.0.0",
+  "private": true,
   "type": "module",
   "scripts": {
-    "dev": "npm run prebuild && vite",
+    "prebuild": "npm run generate-dsl-declarations",
     "build": "vite build",
-    "preview": "vite preview",
+    "dev": "npm run prebuild && vite",
+    "generate-dsl-declarations": "dts-bundle-generator -o public/dsl.d.ts src/dsl/index.ts",
     "lint": "svelte-check --tsconfig ./tsconfig.json",
-    "prebuild": "npm run generate-dsl-declarations",
-    "generate-dsl-declarations": "dts-bundle-generator -o public/dsl.d.ts src/dsl/index.ts"
+    "preview": "vite preview"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^0.19.13",
-    "@codemirror/basic-setup": "^0.19.1",
-    "@codemirror/commands": "^0.19.8",
-    "@codemirror/lint": "^0.19.5",
-    "@codemirror/state": "^0.19.9",
-    "@codemirror/theme-one-dark": "^0.19.1",
-    "@codemirror/tooltip": "^0.19.16",
-    "@codemirror/view": "^0.19.45",
+    "@codemirror/autocomplete": "6",
+    "@codemirror/commands": "6",
+    "@codemirror/lint": "6",
+    "@codemirror/state": "6",
+    "@codemirror/theme-one-dark": "6",
+    "@codemirror/view": "6",
+    "@lezer/highlight": "1",
     "@puredit/codemirror-typescript": "*",
     "@puredit/projections": "*",
     "@puredit/simple-projection": "*",
     "@puredit/utils": "*",
-    "@replit/codemirror-indentation-markers": "^0.19.1",
+    "@replit/codemirror-indentation-markers": "6",
+    "codemirror": "6",
     "normalize.css": "^8.0.1",
     "svelte-dark-mode": "^2.1.0"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.1.0",
     "@tsconfig/svelte": "^3.0.0",
+    "@types/node": "^20.5.9",
     "dts-bundle-generator": "^6.5.0",
     "sass": "^1.53.0",
     "svelte": "^3.48.0",

diff --git a/apps/example/src/Editor.svelte b/apps/example/src/Editor.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import DarkMode from "svelte-dark-mode";
   import type { Theme } from "svelte-dark-mode/types/DarkMode.svelte";
-  import { EditorState, basicSetup } from "@codemirror/basic-setup";
-  import { Annotation, Compartment } from "@codemirror/state";
+  import { basicSetup } from "codemirror";
+  import { EditorState, Annotation, Compartment } from "@codemirror/state";
   import type { Extension } from "@codemirror/state";
   import { EditorView, keymap } from "@codemirror/view";
   import { indentWithTab } from "@codemirror/commands";

diff --git a/apps/example/src/projections/ChangeProjection.svelte b/apps/example/src/projections/ChangeProjection.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import { onMount } from "svelte";
+  import { tags } from "@lezer/highlight";
   import type { EditorState } from "@codemirror/state";
   import type { EditorView } from "@codemirror/view";
-  import { HighlightStyle, tags } from "@codemirror/highlight";
+  import { highlightingFor } from "@codemirror/language";
   import type { Match } from "@puredit/parser";
   import type { FocusGroup } from "@puredit/projections/focus";
   import TextInput from "@puredit/projections/TextInput.svelte";
@@ -31,7 +32,7 @@
 <span class="inline-flex">
   <span>change table</span>
   <TextInput
-    className={HighlightStyle.get(state, tags.atom)}
+    className={highlightingFor(state, [tags.atom])}
     node={match.args.table}
     {state}
     {view}

diff --git a/apps/example/src/projections/ReplaceProjection.svelte b/apps/example/src/projections/ReplaceProjection.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import { onMount } from "svelte";
+  import { tags } from "@lezer/highlight";
   import type { EditorState } from "@codemirror/state";
   import type { EditorView } from "@codemirror/view";
-  import { HighlightStyle, tags } from "@codemirror/highlight";
+  import { highlightingFor } from "@codemirror/language";
   import type { Match } from "@puredit/parser";
   import type { FocusGroup } from "@puredit/projections/focus";
   import TextInput from "@puredit/projections/TextInput.svelte";
@@ -33,7 +34,7 @@
 <span class="inline-flex">
   <span>replace</span>
   <TextInput
-    className={HighlightStyle.get(state, tags.string)}
+    className={highlightingFor(state, [tags.string])}
     node={match.args.target}
     {state}
     {view}
@@ -42,7 +43,7 @@
   />
   <span>in column</span>
   <TextInput
-    className={HighlightStyle.get(state, tags.atom)}
+    className={highlightingFor(state, [tags.atom])}
     node={match.args.columnTarget}
     targetNodes={[match.args.columnTarget, match.args.columnSource]}
     {state}
@@ -54,7 +55,7 @@
   />
   <span>with</span>
   <TextInput
-    className={HighlightStyle.get(state, tags.string)}
+    className={highlightingFor(state, [tags.string])}
     node={match.args.replacement}
     {state}
     {view}

diff --git a/apps/example/src/projections/TrimProjection.svelte b/apps/example/src/projections/TrimProjection.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import { onMount } from "svelte";
+  import { tags } from "@lezer/highlight";
   import type { EditorState } from "@codemirror/state";
   import type { EditorView } from "@codemirror/view";
-  import { HighlightStyle, tags } from "@codemirror/highlight";
+  import { highlightingFor } from "@codemirror/language";
   import type { Match } from "@puredit/parser";
   import type { FocusGroup } from "@puredit/projections/focus";
   import {
@@ -38,7 +39,7 @@
 <span class="inline-flex">
   <span>trim column</span>
   <TextInput
-    className={HighlightStyle.get(state, tags.atom)}
+    className={highlightingFor(state, [tags.atom])}
     node={match.args.columnTarget}
     targetNodes={[match.args.columnTarget, match.args.columnSource]}
     {state}
@@ -50,7 +51,7 @@
   />
   <span>on</span>
   <TextInput
-    className={HighlightStyle.get(state, tags.atom)}
+    className={highlightingFor(state, [tags.atom])}
     node={match.args.direction}
     {state}
     {focusGroup}

diff --git a/apps/example/src/projections/changeProjection.ts b/apps/example/src/projections/changeProjection.ts
@@ -1,4 +1,4 @@
-import type { Text } from "@codemirror/text";
+import type { Text } from "@codemirror/state";
 import { arg, block, contextVariable } from "@puredit/parser";
 import type { Match } from "@puredit/parser";
 import {

diff --git a/apps/generate/package.json b/apps/generate/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@puredit/generate",
-  "private": true,
   "version": "0.0.0",
+  "private": true,
   "type": "module",
   "scripts": {
     "start": "cross-env NODE_OPTIONS=\"--experimental-specifier-resolution=node --no-warnings --no-experimental-fetch\" ts-node index.ts"

diff --git a/apps/generate/templates.ts b/apps/generate/templates.ts
@@ -37,9 +37,10 @@ export const componentTemplate = (
   projectionSegments: ProjectionSegment[]
 ) => `<script lang="ts">
   import { onMount } from "svelte";
+  import { tags } from "@lezer/highlight";
   import type { EditorState } from "@codemirror/state";
   import type { EditorView } from "@codemirror/view";
-  import { HighlightStyle, tags } from "@codemirror/highlight";
+  import { highlightingFor } from "@codemirror/language";
   import type { Match } from "@puredit/parser";
   import type { FocusGroup } from "@puredit/projections/focus";
   import TextInput from "@puredit/projections/TextInput.svelte";
@@ -91,7 +92,7 @@ const projectionSegmentTemplate = (segment: ProjectionSegment) => {
     targetNodesAttr = `\n    targetNodes={[${targetNodes.join(", ")}]}`;
   }
   return `  <TextInput
-    className={HighlightStyle.get(state, tags.string)}
+    className={highlightingFor(state, [tags.string])}
     node={${targetNodes[0]}}${targetNodesAttr}
     placeholder="${segment.names.join(", ")}"
     {state}

diff --git a/apps/jupyter/package.json b/apps/jupyter/package.json
@@ -2,7 +2,6 @@
   "name": "@puredit/jupyter",
   "version": "0.1.0",
   "description": "A projectional editor that uses textual code as its source of truth.",
-  "license": "MIT",
   "keywords": [
     "jupyter",
     "jupyterlab",
@@ -12,21 +11,26 @@
   "bugs": {
     "url": "https://github.com/niklaskorz/puredit/issues"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/niklaskorz/puredit.git"
+  },
+  "license": "MIT",
   "author": {
     "name": "Niklas Korz",
     "email": "[email protected]"
   },
-  "files": [
-    "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
-    "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}"
+  "sideEffects": [
+    "style/*.css",
+    "style/index.js"
   ],
   "main": "src/index.ts",
   "types": "src/index.ts",
   "style": "style/index.css",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/niklaskorz/puredit.git"
-  },
+  "files": [
+    "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+    "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}"
+  ],
   "scripts": {
     "build:prod": "npm run clean && npm run build:labextension",
     "build:dev": "npm run build:labextension:dev",
@@ -44,25 +48,25 @@
     "develop": "jupyter labextension develop . --overwrite"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^0.19.14",
-    "@codemirror/basic-setup": "^0.19.1",
-    "@codemirror/commands": "^0.19.8",
-    "@codemirror/history": "^0.19.2",
-    "@codemirror/lang-python": "^0.19.4",
-    "@codemirror/language": "^0.19.8",
-    "@codemirror/state": "^0.19.9",
-    "@codemirror/view": "^0.19.47",
+    "@codemirror/autocomplete": "6",
+    "@codemirror/commands": "6",
+    "@codemirror/lang-python": "6",
+    "@codemirror/language": "6",
+    "@codemirror/state": "6",
+    "@codemirror/view": "6",
     "@jupyterlab/application": "^3.3.2",
     "@jupyterlab/apputils": "^3.3.2",
     "@jupyterlab/codeeditor": "^3.3.2",
     "@jupyterlab/codemirror": "^3.3.2",
     "@jupyterlab/fileeditor": "^3.3.2",
     "@jupyterlab/notebook": "^3.3.2",
+    "@lezer/highlight": "1",
     "@lumino/widgets": "^1.31.1",
     "@puredit/projections": "^0.0.0",
-    "@replit/codemirror-indentation-markers": "^0.19.1",
+    "@replit/codemirror-indentation-markers": "6",
     "@swc/core": "^1.2.156",
     "@types/uuid": "^8.3.4",
+    "codemirror": "6",
     "mathlive": "^0.73.7",
     "svelte": "^3.46.4",
     "swc-loader": "^0.1.15",
@@ -81,19 +85,9 @@
     "svelte-preprocess": "^4.10.4",
     "typescript": "^4.5.5"
   },
-  "sideEffects": [
-    "style/*.css",
-    "style/index.js"
-  ],
-  "styleModule": "style/index.js",
   "publishConfig": {
     "access": "public"
   },
-  "jupyterlab": {
-    "extension": true,
-    "outputDir": "puredit/labextension",
-    "webpackConfig": "./webpack.config.cjs"
-  },
   "jupyter-releaser": {
     "hooks": {
       "before-build-npm": [
@@ -104,5 +98,11 @@
         "npm clean:all"
       ]
     }
-  }
+  },
+  "jupyterlab": {
+    "extension": true,
+    "outputDir": "puredit/labextension",
+    "webpackConfig": "./webpack.config.cjs"
+  },
+  "styleModule": "style/index.js"
 }
diff --git a/apps/jupyter/src/editor.ts b/apps/jupyter/src/editor.ts
@@ -1,6 +1,6 @@
 import { autocompletion } from "@codemirror/autocomplete";
-import { basicSetup } from "@codemirror/basic-setup";
-import { indentWithTab } from "@codemirror/commands";
+import { basicSetup } from "codemirror";
+import { indentWithTab, redo, undo } from "@codemirror/commands";
 import { python } from "@codemirror/lang-python";
 import {
   indentUnit,
@@ -18,7 +18,6 @@ import { completions, projectionPlugin } from "@puredit/projections";
 import * as uuid from "uuid";
 import debounce from "lodash-es/debounce";
 import { projectionPluginConfig } from "./projections";
-import { redo, undo } from "@codemirror/history";
 
 export class Editor implements CodeEditor.IEditor {
   view: EditorView;
@@ -198,11 +197,15 @@ export class Editor implements CodeEditor.IEditor {
   }
 
   revealPosition(position: CodeEditor.IPosition): void {
-    this.view.scrollPosIntoView(this.getOffsetAt(position));
+    this.view.dispatch({
+      effects: EditorView.scrollIntoView(this.getOffsetAt(position)),
+    });
   }
 
   revealSelection(selection: CodeEditor.IRange): void {
-    this.view.scrollPosIntoView(this.getOffsetAt(selection.start));
+    this.view.dispatch({
+      effects: EditorView.scrollIntoView(this.getOffsetAt(selection.start)),
+    });
   }
 
   getCoordinateForPosition(

diff --git a/apps/jupyter/src/projections/DisplayProjection.svelte b/apps/jupyter/src/projections/DisplayProjection.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import { onMount } from "svelte";
+  import { tags } from "@lezer/highlight";
   import type { EditorState } from "@codemirror/state";
   import type { EditorView } from "@codemirror/view";
-  import { HighlightStyle, tags } from "@codemirror/highlight";
+  import { highlightingFor } from "@codemirror/language";
   import type { Match } from "@puredit/parser";
   import type { FocusGroup } from "@puredit/projections/focus";
   import TextInput from "@puredit/projections/TextInput.svelte";
@@ -29,7 +30,7 @@
 <span class="inline-flex">
   <span>display</span>
   <TextInput
-    className={HighlightStyle.get(state, tags.atom)}
+    className={highlightingFor(state, [tags.atom])}
     node={match.args.columns}
     {state}
     {view}