diff --git a/package.json b/package.json index d8690858d..fbaa3d895 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "@popperjs/core": "^2.11.8", "bootstrap": "^5.3.0", "bootstrap-icons": "^1.10.5", - "codemirror": "^5.63.1", + "codemirror": "^6.0.1", "css-browser-selector": "^0.6.5", "d3": "^7.0.0", "fabric": "^5.3.0", diff --git a/ts/editor/CodeMirror.svelte b/ts/editor/CodeMirror.svelte index e72036748..0f5d48d7f 100644 --- a/ts/editor/CodeMirror.svelte +++ b/ts/editor/CodeMirror.svelte @@ -4,6 +4,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html --> @@ -85,12 +102,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html tabindex="-1" hidden use:openCodeMirror={{ - configuration: { - ...configuration, - ...defaultConfiguration, - direction: $direction, - theme: $pageTheme.isDark ? darkTheme : lightTheme, - }, + configuration: allConfiguration(), resolve, hidden, }} diff --git a/ts/editor/code-mirror.ts b/ts/editor/code-mirror.ts index 4b6c5dec6..5bf86edc1 100644 --- a/ts/editor/code-mirror.ts +++ b/ts/editor/code-mirror.ts @@ -1,25 +1,13 @@ // Copyright: Ankitects Pty Ltd and contributors // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html -import "codemirror/lib/codemirror.css"; -import "codemirror/addon/fold/foldgutter.css"; -import "codemirror/theme/monokai.css"; -import "codemirror/mode/htmlmixed/htmlmixed"; -import "codemirror/mode/stex/stex"; -import "codemirror/addon/fold/foldcode"; -import "codemirror/addon/fold/foldgutter"; -import "codemirror/addon/fold/xml-fold"; -import "codemirror/addon/edit/matchtags"; -import "codemirror/addon/edit/closetag"; -import "codemirror/addon/display/placeholder"; +import type { Extension } from "@codemirror/state"; +import { EditorView } from "@codemirror/view"; -import CodeMirror from "codemirror"; import type { Readable } from "svelte/store"; import storeSubscribe from "../sveltelib/store-subscribe"; -export { CodeMirror }; - export const latex = { name: "stex", inMathMode: true, @@ -52,7 +40,7 @@ export const gutterOptions: CodeMirror.EditorConfiguration = { }; export function focusAndSetCaret( - editor: CodeMirror.Editor, + editor: EditorView, position: CodeMirror.Position = { line: editor.lineCount(), ch: 0 }, ): void { editor.focus(); @@ -60,31 +48,31 @@ export function focusAndSetCaret( } interface OpenCodeMirrorOptions { - configuration: CodeMirror.EditorConfiguration; - resolve(editor: CodeMirror.EditorFromTextArea): void; + configuration: Extension; + resolve(editor: EditorView): void; hidden: boolean; } export function openCodeMirror( textarea: HTMLTextAreaElement, - options: Partial, -): { update: (options: Partial) => void; destroy: () => void } { - let editor: CodeMirror.EditorFromTextArea | null = null; + options: OpenCodeMirrorOptions, +): { update: (options: OpenCodeMirrorOptions) => void; destroy: () => void } { + let editor: EditorView | null = null; function update({ configuration, resolve, hidden, - }: Partial): void { + }: OpenCodeMirrorOptions): void { if (editor) { - for (const key in configuration) { - editor.setOption( - key as keyof CodeMirror.EditorConfiguration, - configuration[key], - ); - } + // for (const key in configuration) { + // editor.setOption( + // key as keyof CodeMirror.EditorConfiguration, + // configuration[key], + // ); + // } } else if (!hidden) { - editor = CodeMirror.fromTextArea(textarea, configuration); + editor = editorFromTextArea(textarea, configuration); resolve?.(editor); } } @@ -94,51 +82,66 @@ export function openCodeMirror( return { update, destroy(): void { - editor?.toTextArea(); + if (editor) editorToTextArea(textarea, editor); editor = null; }, }; } +function editorFromTextArea(textarea, extensions: Extension) { + let view = new EditorView({ doc: textarea.value, extensions }); + textarea.parentNode.insertBefore(view.dom, textarea); + textarea.style.display = "none"; + return view; +} + +function editorToTextArea(textarea, view: EditorView) { + textarea.style.display = "block"; + view.destroy(); +} + /** * Sets up the contract with the code store and location restoration. */ export function setupCodeMirror( - editor: CodeMirror.Editor, + editor: EditorView, code: Readable, ): void { const { subscribe, unsubscribe } = storeSubscribe( code, - (value: string): void => editor.setValue(value), + (value: string): void => { + console.log(value); + editor.dispatch({ changes: { from: 0, to: editor.state.doc.length, insert: value } }); + }, false, ); - // TODO passing in the tabindex option does not do anything: bug? - editor.getInputField().tabIndex = 0; + // // TODO passing in the tabindex option does not do anything: bug? + // editor.getInputField().tabIndex = 0; - let ranges: CodeMirror.Range[] | null = null; + // let ranges: CodeMirror.Range[] | null = null; - editor.on("focus", () => { - if (ranges) { - try { - editor.setSelections(ranges); - } catch { - ranges = null; - editor.setCursor(editor.lineCount(), 0); - } - } - unsubscribe(); - }); + // editor.on("focus", () => { + // if (ranges) { + // try { + // editor.setSelections(ranges); + // } catch { + // ranges = null; + // editor.setCursor(editor.lineCount(), 0); + // } + // } + // unsubscribe(); + // }); - editor.on("mousedown", () => { - // Prevent focus restoring location - ranges = null; - }); + // editor.on("mousedown", () => { + // // Prevent focus restoring location + // ranges = null; + // }); - editor.on("blur", () => { - ranges = editor.listSelections(); - subscribe(); - }); + // editor.on("blur", () => { + // ranges = editor.listSelections(); + // subscribe(); + // }); subscribe(); } diff --git a/ts/licenses.json b/ts/licenses.json index d28eeb21a..b40094b88 100644 --- a/ts/licenses.json +++ b/ts/licenses.json @@ -5,6 +5,62 @@ "path": "node_modules/@bufbuild/protobuf", "licenseFile": "node_modules/@bufbuild/protobuf/README.md" }, + "@codemirror/autocomplete@6.8.1": { + "licenses": "MIT", + "repository": "https://github.com/codemirror/autocomplete", + "publisher": "Marijn Haverbeke", + "email": "marijn@haverbeke.berlin", + "path": "node_modules/@codemirror/autocomplete", + "licenseFile": "node_modules/@codemirror/autocomplete/LICENSE" + }, + "@codemirror/commands@6.2.4": { + "licenses": "MIT", + "repository": "https://github.com/codemirror/commands", + "publisher": "Marijn Haverbeke", + "email": "marijn@haverbeke.berlin", + "path": "node_modules/@codemirror/commands", + "licenseFile": "node_modules/@codemirror/commands/LICENSE" + }, + "@codemirror/language@6.8.0": { + "licenses": "MIT", + "repository": "https://github.com/codemirror/language", + "publisher": "Marijn Haverbeke", + "email": "marijn@haverbeke.berlin", + "path": "node_modules/@codemirror/language", + "licenseFile": "node_modules/@codemirror/language/LICENSE" + }, + "@codemirror/lint@6.3.0": { + "licenses": "MIT", + "repository": "https://github.com/codemirror/lint", + "publisher": "Marijn Haverbeke", + "email": "marijn@haverbeke.berlin", + "path": "node_modules/@codemirror/lint", + "licenseFile": "node_modules/@codemirror/lint/LICENSE" + }, + "@codemirror/search@6.5.0": { + "licenses": "MIT", + "repository": "https://github.com/codemirror/search", + "publisher": "Marijn Haverbeke", + "email": "marijn@haverbeke.berlin", + "path": "node_modules/@codemirror/search", + "licenseFile": "node_modules/@codemirror/search/LICENSE" + }, + "@codemirror/state@6.2.1": { + "licenses": "MIT", + "repository": "https://github.com/codemirror/state", + "publisher": "Marijn Haverbeke", + "email": "marijn@haverbeke.berlin", + "path": "node_modules/@codemirror/state", + "licenseFile": "node_modules/@codemirror/state/LICENSE" + }, + "@codemirror/view@6.14.0": { + "licenses": "MIT", + "repository": "https://github.com/codemirror/view", + "publisher": "Marijn Haverbeke", + "email": "marijn@haverbeke.berlin", + "path": "node_modules/@codemirror/view", + "licenseFile": "node_modules/@codemirror/view/LICENSE" + }, "@floating-ui/core@1.3.1": { "licenses": "MIT", "repository": "https://github.com/floating-ui/floating-ui", @@ -27,6 +83,30 @@ "path": "node_modules/@fluent/bundle", "licenseFile": "node_modules/@fluent/bundle/README.md" }, + "@lezer/common@1.0.3": { + "licenses": "MIT", + "repository": "https://github.com/lezer-parser/common", + "publisher": "Marijn Haverbeke", + "email": "marijn@haverbeke.berlin", + "path": "node_modules/@lezer/common", + "licenseFile": "node_modules/@lezer/common/LICENSE" + }, + "@lezer/highlight@1.1.6": { + "licenses": "MIT", + "repository": "https://github.com/lezer-parser/highlight", + "publisher": "Marijn Haverbeke", + "email": "marijn@haverbeke.berlin", + "path": "node_modules/@lezer/highlight", + "licenseFile": "node_modules/@lezer/highlight/LICENSE" + }, + "@lezer/lr@1.3.7": { + "licenses": "MIT", + "repository": "https://github.com/lezer-parser/lr", + "publisher": "Marijn Haverbeke", + "email": "marijn@haverbeke.berlin", + "path": "node_modules/@lezer/lr", + "licenseFile": "node_modules/@lezer/lr/LICENSE" + }, "@mdi/svg@7.2.96": { "licenses": "Apache-2.0", "repository": "https://github.com/Templarian/MaterialDesign-SVG", @@ -135,11 +215,11 @@ "path": "node_modules/browser-process-hrtime", "licenseFile": "node_modules/browser-process-hrtime/LICENSE" }, - "codemirror@5.65.13": { + "codemirror@6.0.1": { "licenses": "MIT", - "repository": "https://github.com/codemirror/CodeMirror", + "repository": "https://github.com/codemirror/basic-setup", "publisher": "Marijn Haverbeke", - "email": "marijn@haverbeke.berlin", + "email": "marijnh@gmail.com", "path": "node_modules/codemirror", "licenseFile": "node_modules/codemirror/LICENSE" }, @@ -159,6 +239,14 @@ "path": "node_modules/commander", "licenseFile": "node_modules/commander/LICENSE" }, + "crelt@1.0.6": { + "licenses": "MIT", + "repository": "https://github.com/marijnh/crelt", + "publisher": "Marijn Haverbeke", + "email": "marijn@haverbeke.berlin", + "path": "node_modules/crelt", + "licenseFile": "node_modules/crelt/LICENSE" + }, "css-browser-selector@0.6.5": { "licenses": "CC-BY-SA-2.5", "repository": "https://github.com/verbatim/css_browser_selector", @@ -708,6 +796,13 @@ "path": "node_modules/source-map", "licenseFile": "node_modules/source-map/LICENSE" }, + "style-mod@4.0.3": { + "licenses": "MIT", + "publisher": "Marijn Haverbeke", + "email": "marijn@haverbeke.berlin", + "path": "node_modules/style-mod", + "licenseFile": "node_modules/style-mod/LICENSE" + }, "symbol-tree@3.2.4": { "licenses": "MIT", "repository": "https://github.com/jsdom/js-symbol-tree", @@ -755,6 +850,14 @@ "path": "node_modules/w3c-hr-time", "licenseFile": "node_modules/w3c-hr-time/LICENSE.md" }, + "w3c-keyname@2.2.8": { + "licenses": "MIT", + "repository": "https://github.com/marijnh/w3c-keyname", + "publisher": "Marijn Haverbeke", + "email": "marijn@haverbeke.berlin", + "path": "node_modules/w3c-keyname", + "licenseFile": "node_modules/w3c-keyname/LICENSE" + }, "w3c-xmlserializer@3.0.0": { "licenses": "MIT", "repository": "https://github.com/jsdom/w3c-xmlserializer", diff --git a/yarn.lock b/yarn.lock index 307dec4ed..a5d4c2900 100644 --- a/yarn.lock +++ b/yarn.lock @@ -318,6 +318,70 @@ "@typescript/vfs" "^1.4.0" typescript "4.5.2" +"@codemirror/autocomplete@^6.0.0": + version "6.8.1" + resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.8.1.tgz#3f3daa9f591186901db07f58d17256656242e841" + integrity sha512-HpphvDcTdOx+9R3eUw9hZK9JA77jlaBF0kOt2McbyfvY0rX9pnMoO8rkkZc0GzSbzhIY4m5xJ0uHHgjfqHNmXQ== + dependencies: + "@codemirror/language" "^6.0.0" + "@codemirror/state" "^6.0.0" + "@codemirror/view" "^6.6.0" + "@lezer/common" "^1.0.0" + +"@codemirror/commands@^6.0.0": + version "6.2.4" + resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.2.4.tgz#b8a0e5ce72448c092ba4c4b1d902e6f183948aec" + integrity sha512-42lmDqVH0ttfilLShReLXsDfASKLXzfyC36bzwcqzox9PlHulMcsUOfHXNo2X2aFMVNUoQ7j+d4q5bnfseYoOA== + dependencies: + "@codemirror/language" "^6.0.0" + "@codemirror/state" "^6.2.0" + "@codemirror/view" "^6.0.0" + "@lezer/common" "^1.0.0" + +"@codemirror/language@^6.0.0": + version "6.8.0" + resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.8.0.tgz#f2d7eea6b338c25593d800f2293b062d9f9856db" + integrity sha512-r1paAyWOZkfY0RaYEZj3Kul+MiQTEbDvYqf8gPGaRvNneHXCmfSaAVFjwRUPlgxS8yflMxw2CTu6uCMp8R8A2g== + dependencies: + "@codemirror/state" "^6.0.0" + "@codemirror/view" "^6.0.0" + "@lezer/common" "^1.0.0" + "@lezer/highlight" "^1.0.0" + "@lezer/lr" "^1.0.0" + style-mod "^4.0.0" + +"@codemirror/lint@^6.0.0": + version "6.3.0" + resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-6.3.0.tgz#bd36fb85094cf5735e5426e48f1a8e575a7b70df" + integrity sha512-tzxOVQNoDhhwFNfcTO2IB74wQoWarARcH6gv3YufPpiJ9yhcb7zD6JCkO5+FWARskqRFc8GFa6E+wUyOvADl5A== + dependencies: + "@codemirror/state" "^6.0.0" + "@codemirror/view" "^6.0.0" + crelt "^1.0.5" + +"@codemirror/search@^6.0.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-6.5.0.tgz#308f9968434e0e6ed59c9ec36a0239eb1dfc5d92" + integrity sha512-64/M40YeJPToKvGO6p3fijo2vwUEj4nACEAXElCaYQ50HrXSvRaK+NHEhSh73WFBGdvIdhrV+lL9PdJy2RfCYA== + dependencies: + "@codemirror/state" "^6.0.0" + "@codemirror/view" "^6.0.0" + crelt "^1.0.5" + +"@codemirror/state@^6.0.0", "@codemirror/state@^6.1.4", "@codemirror/state@^6.2.0": + version "6.2.1" + resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.2.1.tgz#6dc8d8e5abb26b875e3164191872d69a5e85bd73" + integrity sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw== + +"@codemirror/view@^6.0.0", "@codemirror/view@^6.6.0": + version "6.14.0" + resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.14.0.tgz#a8ecb0216d6f81aeb20bf8b0cbbc7ed563cf0777" + integrity sha512-I263FPs4In42MNmrdwN2DfmYPFMVMXgT7o/mxdGp4jv5LPs8i0FOxzmxF5yeeQdYSTztb2ZhmPIu0ahveInVTg== + dependencies: + "@codemirror/state" "^6.1.4" + style-mod "^4.0.0" + w3c-keyname "^2.2.4" + "@esbuild-kit/cjs-loader@^2.4.2": version "2.4.2" resolved "https://registry.yarnpkg.com/@esbuild-kit/cjs-loader/-/cjs-loader-2.4.2.tgz#cb4dde00fbf744a68c4f20162ea15a8242d0fa54" @@ -888,6 +952,25 @@ "@jridgewell/resolve-uri" "3.1.0" "@jridgewell/sourcemap-codec" "1.4.14" +"@lezer/common@^1.0.0": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.0.3.tgz#1808f70e2b0a7b1fdcbaf5c074723d2d4ed1e4c5" + integrity sha512-JH4wAXCgUOcCGNekQPLhVeUtIqjH0yPBs7vvUdSjyQama9618IOKFJwkv2kcqdhF0my8hQEgCTEJU0GIgnahvA== + +"@lezer/highlight@^1.0.0": + version "1.1.6" + resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.1.6.tgz#87e56468c0f43c2a8b3dc7f0b7c2804b34901556" + integrity sha512-cmSJYa2us+r3SePpRCjN5ymCqCPv+zyXmDl0ciWtVaNiORT/MxM7ZgOMQZADD0o51qOaOg24qc/zBViOIwAjJg== + dependencies: + "@lezer/common" "^1.0.0" + +"@lezer/lr@^1.0.0": + version "1.3.7" + resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-1.3.7.tgz#e3012c74512a063098eb9da86d4cc689170e1f92" + integrity sha512-ssHKb3p0MxhJXT2i7UBmgAY1BIM3Uq/D772Qutu3EVmxWIyNMU12nQ0rL3Fhu+MiFtiTzyTmd3xGwEf3ON5PSA== + dependencies: + "@lezer/common" "^1.0.0" + "@mdi/svg@^7.0.96": version "7.2.96" resolved "https://registry.yarnpkg.com/@mdi/svg/-/svg-7.2.96.tgz#6c182628ed722a85055c3795e7d4ca6d4f2f139c" @@ -1928,10 +2011,18 @@ code-red@^1.0.3: estree-walker "^3.0.3" periscopic "^3.1.0" -codemirror@^5.63.1: - version "5.65.13" - resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.13.tgz#c098a6f409db8b5a7c5722788bd9fa3bb2367f2e" - integrity sha512-SVWEzKXmbHmTQQWaz03Shrh4nybG0wXx2MEu3FO4ezbPW8IbnZEd5iGHGEffSUaitKYa3i+pHpBsSvw8sPHtzg== +codemirror@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-6.0.1.tgz#62b91142d45904547ee3e0e0e4c1a79158035a29" + integrity sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg== + dependencies: + "@codemirror/autocomplete" "^6.0.0" + "@codemirror/commands" "^6.0.0" + "@codemirror/language" "^6.0.0" + "@codemirror/lint" "^6.0.0" + "@codemirror/search" "^6.0.0" + "@codemirror/state" "^6.0.0" + "@codemirror/view" "^6.0.0" collect-v8-coverage@^1.0.0: version "1.0.1" @@ -1984,6 +2075,11 @@ convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0: resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f" integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A== +crelt@^1.0.5: + version "1.0.6" + resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72" + integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g== + cross-env@^7.0.2: version "7.0.3" resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf" @@ -5017,6 +5113,11 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== +style-mod@^4.0.0: + version "4.0.3" + resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.0.3.tgz#136c4abc905f82a866a18b39df4dc08ec762b1ad" + integrity sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw== + supports-color@^5.3.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" @@ -5323,6 +5424,11 @@ w3c-hr-time@^1.0.2: dependencies: browser-process-hrtime "^1.0.0" +w3c-keyname@^2.2.4: + version "2.2.8" + resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5" + integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ== + w3c-xmlserializer@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz#06cdc3eefb7e4d0b20a560a5a3aeb0d2d9a65923"