From 5ed3ee449fb62a1abc9276a2017f5316b980fd79 Mon Sep 17 00:00:00 2001 From: Gordon Brander Date: Wed, 16 Oct 2024 14:47:39 -0400 Subject: [PATCH 1/8] Stub out codemirror component --- typescript/package-lock.json | 192 +++++++++++++++++- typescript/packages/common-os-ui/index.html | 1 + typescript/packages/common-os-ui/package.json | 8 + .../components/code-editor/os-code-editor.ts | 111 ++++++++++ typescript/packages/common-os-ui/src/index.ts | 1 + 5 files changed, 312 insertions(+), 1 deletion(-) create mode 100644 typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts diff --git a/typescript/package-lock.json b/typescript/package-lock.json index 651e8ec2d..c66a1f206 100644 --- a/typescript/package-lock.json +++ b/typescript/package-lock.json @@ -778,10 +778,89 @@ "@lezer/common": "^0.16.0" } }, + "node_modules/@codemirror/lang-css": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.0.tgz", + "integrity": "sha512-CyR4rUNG9OYcXDZwMPvJdtb6PHbBDKUc/6Na2BIwZ6dKab1JQqKa4di+RNRY9Myn7JB81vayKwJeQ7jEdmNVDA==", + "license": "MIT", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.0.2", + "@lezer/css": "^1.1.7" + } + }, + "node_modules/@codemirror/lang-css/node_modules/@codemirror/autocomplete": { + "version": "6.18.1", + "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.1.tgz", + "integrity": "sha512-iWHdj/B1ethnHRTwZj+C1obmmuCzquH29EbcKr0qIjA9NfDeBDJ7vs+WOHsFeLeflE4o+dHfYndJloMKHUkWUA==", + "license": "MIT", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.17.0", + "@lezer/common": "^1.0.0" + }, + "peerDependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-css/node_modules/@lezer/common": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", + "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", + "license": "MIT" + }, + "node_modules/@codemirror/lang-html": { + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.9.tgz", + "integrity": "sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==", + "license": "MIT", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/lang-css": "^6.0.0", + "@codemirror/lang-javascript": "^6.0.0", + "@codemirror/language": "^6.4.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.17.0", + "@lezer/common": "^1.0.0", + "@lezer/css": "^1.1.0", + "@lezer/html": "^1.3.0" + } + }, + "node_modules/@codemirror/lang-html/node_modules/@codemirror/autocomplete": { + "version": "6.18.1", + "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.1.tgz", + "integrity": "sha512-iWHdj/B1ethnHRTwZj+C1obmmuCzquH29EbcKr0qIjA9NfDeBDJ7vs+WOHsFeLeflE4o+dHfYndJloMKHUkWUA==", + "license": "MIT", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.17.0", + "@lezer/common": "^1.0.0" + }, + "peerDependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-html/node_modules/@lezer/common": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", + "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", + "license": "MIT" + }, "node_modules/@codemirror/lang-javascript": { "version": "6.2.2", "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.2.tgz", "integrity": "sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==", + "license": "MIT", "dependencies": { "@codemirror/autocomplete": "^6.0.0", "@codemirror/language": "^6.6.0", @@ -828,11 +907,51 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz", "integrity": "sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==", + "license": "MIT", "dependencies": { "@codemirror/language": "^6.0.0", "@lezer/json": "^1.0.0" } }, + "node_modules/@codemirror/lang-markdown": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.3.0.tgz", + "integrity": "sha512-lYrI8SdL/vhd0w0aHIEvIRLRecLF7MiiRfzXFZY94dFwHqC9HtgxgagJ8fyYNBldijGatf9wkms60d8SrAj6Nw==", + "license": "MIT", + "dependencies": { + "@codemirror/autocomplete": "^6.7.1", + "@codemirror/lang-html": "^6.0.0", + "@codemirror/language": "^6.3.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.2.1", + "@lezer/markdown": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-markdown/node_modules/@codemirror/autocomplete": { + "version": "6.18.1", + "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.1.tgz", + "integrity": "sha512-iWHdj/B1ethnHRTwZj+C1obmmuCzquH29EbcKr0qIjA9NfDeBDJ7vs+WOHsFeLeflE4o+dHfYndJloMKHUkWUA==", + "license": "MIT", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.17.0", + "@lezer/common": "^1.0.0" + }, + "peerDependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-markdown/node_modules/@lezer/common": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", + "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", + "license": "MIT" + }, "node_modules/@codemirror/language": { "version": "6.10.2", "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.2.tgz", @@ -904,7 +1023,8 @@ "node_modules/@codemirror/state": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.1.tgz", - "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==" + "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==", + "license": "MIT" }, "node_modules/@codemirror/view": { "version": "6.28.0", @@ -1670,6 +1790,23 @@ "resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.16.1.tgz", "integrity": "sha512-qPmG7YTZ6lATyTOAWf8vXE+iRrt1NJd4cm2nJHK+v7X9TsOF6+HtuU/ctaZy2RCrluxDb89hI6KWQ5LfQGQWuA==" }, + "node_modules/@lezer/css": { + "version": "1.1.9", + "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.9.tgz", + "integrity": "sha512-TYwgljcDv+YrV0MZFFvYFQHCfGgbPMR6nuqLabBdmZoFH3EP1gvw8t0vae326Ne3PszQkbXfVBjCnf3ZVCr0bA==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/css/node_modules/@lezer/common": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", + "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", + "license": "MIT" + }, "node_modules/@lezer/highlight": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.0.tgz", @@ -1683,6 +1820,23 @@ "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz", "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==" }, + "node_modules/@lezer/html": { + "version": "1.3.10", + "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.10.tgz", + "integrity": "sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/html/node_modules/@lezer/common": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", + "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", + "license": "MIT" + }, "node_modules/@lezer/javascript": { "version": "1.4.17", "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.17.tgz", @@ -1726,6 +1880,22 @@ "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz", "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==" }, + "node_modules/@lezer/markdown": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.3.1.tgz", + "integrity": "sha512-DGlzU/i8DC8k0uz1F+jeePrkATl0jWakauTzftMQOcbaMkHbNSRki/4E2tOzJWsVpoKYhe7iTJ03aepdwVUXUA==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.0.0", + "@lezer/highlight": "^1.0.0" + } + }, + "node_modules/@lezer/markdown/node_modules/@lezer/common": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", + "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", + "license": "MIT" + }, "node_modules/@lit-labs/ssr-dom-shim": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz", @@ -5083,6 +5253,7 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz", "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==", + "license": "MIT", "dependencies": { "@codemirror/autocomplete": "^6.0.0", "@codemirror/commands": "^6.0.0", @@ -11979,7 +12150,15 @@ "version": "0.0.1", "license": "UNLICENSED", "dependencies": { + "@codemirror/lang-css": "^6.3.0", + "@codemirror/lang-html": "^6.4.9", + "@codemirror/lang-javascript": "^6.2.2", + "@codemirror/lang-json": "^6.0.1", + "@codemirror/lang-markdown": "^6.3.0", + "@codemirror/search": "^6.5.6", + "@codemirror/state": "^6.4.1", "@floating-ui/dom": "^1.6.11", + "codemirror": "^6.0.1", "lit": "^3.2.0", "prosemirror-commands": "^1.6.0", "prosemirror-history": "^1.4.1", @@ -11996,6 +12175,17 @@ "wireit": "^0.14.4" } }, + "packages/common-os-ui/node_modules/@codemirror/search": { + "version": "6.5.6", + "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.6.tgz", + "integrity": "sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==", + "license": "MIT", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, "packages/common-propagator": { "name": "@commontools/common-propagator", "version": "0.0.1", diff --git a/typescript/packages/common-os-ui/index.html b/typescript/packages/common-os-ui/index.html index 0fac8146c..1001a421d 100644 --- a/typescript/packages/common-os-ui/index.html +++ b/typescript/packages/common-os-ui/index.html @@ -23,6 +23,7 @@ + diff --git a/typescript/packages/common-os-ui/package.json b/typescript/packages/common-os-ui/package.json index 646724863..23b6ae1a0 100644 --- a/typescript/packages/common-os-ui/package.json +++ b/typescript/packages/common-os-ui/package.json @@ -25,7 +25,15 @@ "./lib/index.js" ], "dependencies": { + "@codemirror/lang-css": "^6.3.0", + "@codemirror/lang-html": "^6.4.9", + "@codemirror/lang-javascript": "^6.2.2", + "@codemirror/lang-json": "^6.0.1", + "@codemirror/lang-markdown": "^6.3.0", + "@codemirror/search": "^6.5.6", + "@codemirror/state": "^6.4.1", "@floating-ui/dom": "^1.6.11", + "codemirror": "^6.0.1", "lit": "^3.2.0", "prosemirror-commands": "^1.6.0", "prosemirror-history": "^1.4.1", diff --git a/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts b/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts new file mode 100644 index 000000000..2b9b19fca --- /dev/null +++ b/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts @@ -0,0 +1,111 @@ +import { css, html, render, adoptStyles } from "lit"; +import { customElement } from "lit/decorators.js"; +import { basicSetup, EditorView } from "codemirror"; +import { EditorState, Compartment } from "@codemirror/state"; +import { javascript } from "@codemirror/lang-javascript"; +import { createStore, Store, ValueMsg, FxDriver } from "../../shared/store"; +import { createCleanupGroup } from "../../shared/cleanup.js"; +import { base } from "../../shared/styles.ts"; + +const freeze = Object.freeze; + +export const MimeTypes = freeze({ + css: "text/css", + html: "text/html", + javascript: "text/javascript", + typescript: "text/x.typescript", + json: "application/json", + markdown: "text/markdown", +} as const); + +export type MimeType = (typeof MimeTypes)[keyof typeof MimeTypes]; + +export type SetText = ValueMsg<"setText", string>; + +export type Msg = SetText; + +export type Model = { + lang: MimeType; + text: string; +}; + +export const model = ({ + lang = MimeTypes.javascript, + text = "", +}: { + lang?: MimeType; + text?: string; +}): Model => + freeze({ + lang, + text, + }); + +export const update = (state: Model, msg: Msg): Model => { + return state; +}; + +export const createFx = + (): FxDriver => (state: Model, msg: Msg) => { + return []; + }; + +@customElement("os-code-editor") +export class OsCodeEditor extends HTMLElement { + static styles = [ + base, + css` + :host { + display: block; + } + + .code-editor { + display: block; + } + `, + ]; + + #shadow: ShadowRoot; + #destroy = createCleanupGroup(); + #store: Store; + #editorView: EditorView; + + constructor() { + super(); + // Set up shadow and styles + this.#shadow = this.attachShadow({ mode: "closed" }); + adoptStyles(this.#shadow, OsCodeEditor.styles); + + // Set up skeleton + // - #editor is managed by ProseMirror + // - #reactive is rendered via Lit templates and driven by store updates + render(html`
`, this.#shadow); + + const editorRoot = this.#shadow.querySelector("#editor") as HTMLElement; + + this.#store = createStore({ + state: model({}), + update, + }); + const cleanupRender = this.#store.sink(() => {}); + this.#destroy.add(cleanupRender); + + const language = new Compartment(); + const tabSize = new Compartment(); + + const state = EditorState.create({ + extensions: [ + basicSetup, + language.of(javascript()), + tabSize.of(EditorState.tabSize.of(4)), + ], + }); + + this.#editorView = new EditorView({ + state, + parent: editorRoot, + }); + } + + render() {} +} diff --git a/typescript/packages/common-os-ui/src/index.ts b/typescript/packages/common-os-ui/src/index.ts index eac6e38e5..aef5a8cf5 100644 --- a/typescript/packages/common-os-ui/src/index.ts +++ b/typescript/packages/common-os-ui/src/index.ts @@ -17,4 +17,5 @@ export * as charmRow from "./components/os-charm-row.js"; export * as charmChip from "./components/os-charm-chip.js"; export * as dialog from "./components/os-dialog.js"; export * as richTextEditor from "./components/editor/os-rich-text-editor.js"; +export * as codeEditor from "./components/code-editor/os-code-editor.js"; export * as floatingCompletions from "./components/os-floating-completions.js"; From 2d4785d2abe77ff736c20e70a2947069d08db454 Mon Sep 17 00:00:00 2001 From: Gordon Brander Date: Wed, 16 Oct 2024 15:51:39 -0400 Subject: [PATCH 2/8] Add theme --- typescript/package-lock.json | 356 ++++++++++-------- typescript/packages/common-os-ui/package.json | 3 +- .../components/code-editor/os-code-editor.ts | 3 +- 3 files changed, 203 insertions(+), 159 deletions(-) diff --git a/typescript/package-lock.json b/typescript/package-lock.json index c66a1f206..eda3365cd 100644 --- a/typescript/package-lock.json +++ b/typescript/package-lock.json @@ -83,10 +83,11 @@ } }, "node_modules/@75lb/deep-merge/node_modules/typical": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/typical/-/typical-7.1.1.tgz", - "integrity": "sha512-T+tKVNs6Wu7IWiAce5BgMd7OZfNYUndHwc5MknN+UHOudi7sGZzuHdCadllRuqJ3fPtgFtIH9+lt9qRv6lmpfA==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/typical/-/typical-7.2.0.tgz", + "integrity": "sha512-W1+HdVRUl8fS3MZ9ogD51GOb46xMmhAZzR0WPw5jcgIZQJVvkddYzAl4YTU6g5w33Y1iRQLdIi2/1jhi2RNL0g==", "dev": true, + "license": "MIT", "engines": { "node": ">=12.17" } @@ -872,9 +873,10 @@ } }, "node_modules/@codemirror/lang-javascript/node_modules/@codemirror/autocomplete": { - "version": "6.16.2", - "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.16.2.tgz", - "integrity": "sha512-MjfDrHy0gHKlPWsvSsikhO1+BOh+eBHNgfH1OXs1+DAf30IonQldgMM3kxLDTG9ktE7kDLaA1j/l7KMPA4KNfw==", + "version": "6.18.1", + "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.1.tgz", + "integrity": "sha512-iWHdj/B1ethnHRTwZj+C1obmmuCzquH29EbcKr0qIjA9NfDeBDJ7vs+WOHsFeLeflE4o+dHfYndJloMKHUkWUA==", + "license": "MIT", "dependencies": { "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.0.0", @@ -889,9 +891,10 @@ } }, "node_modules/@codemirror/lang-javascript/node_modules/@codemirror/lint": { - "version": "6.8.0", - "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.0.tgz", - "integrity": "sha512-lsFofvaw0lnPRJlQylNsC4IRt/1lI4OD/yYslrSGVndOJfStc58v+8p9dgGiD90ktOfL7OhBWns1ZETYgz0EJA==", + "version": "6.8.2", + "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.2.tgz", + "integrity": "sha512-PDFG5DjHxSEjOXk9TQYYVjZDqlZTFaDBfhQixHnQOEVDDNHUbEh/hstAjcQJaA6FQdZTD1hquXTK0rVBLADR1g==", + "license": "MIT", "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0", @@ -899,9 +902,10 @@ } }, "node_modules/@codemirror/lang-javascript/node_modules/@lezer/common": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz", - "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==" + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", + "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", + "license": "MIT" }, "node_modules/@codemirror/lang-json": { "version": "6.0.1", @@ -953,9 +957,10 @@ "license": "MIT" }, "node_modules/@codemirror/language": { - "version": "6.10.2", - "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.2.tgz", - "integrity": "sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==", + "version": "6.10.3", + "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.3.tgz", + "integrity": "sha512-kDqEU5sCP55Oabl6E7m5N+vZRoc0iWqgDVhEKifcHzPzjqCegcO4amfrYVL9PmPZpl4G0yjkpTpUO/Ui8CzO8A==", + "license": "MIT", "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.23.0", @@ -966,9 +971,10 @@ } }, "node_modules/@codemirror/language/node_modules/@lezer/common": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz", - "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==" + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", + "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", + "license": "MIT" }, "node_modules/@codemirror/lint": { "version": "0.20.3", @@ -1027,9 +1033,10 @@ "license": "MIT" }, "node_modules/@codemirror/view": { - "version": "6.28.0", - "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.28.0.tgz", - "integrity": "sha512-fo7CelaUDKWIyemw4b+J57cWuRkOu4SWCCPfNDkPvfWkGjM9D5racHQXr4EQeYCD6zEBIBxGCeaKkQo+ysl0gA==", + "version": "6.34.1", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.34.1.tgz", + "integrity": "sha512-t1zK/l9UiRqwUNPm+pdIT0qzJlzuVckbTEMVNFhfWkGiBQClstzg+78vedCvLSX0xJEZ6lwZbPpnljL7L6iwMQ==", + "license": "MIT", "dependencies": { "@codemirror/state": "^6.4.0", "style-mod": "^4.1.0", @@ -1808,17 +1815,19 @@ "license": "MIT" }, "node_modules/@lezer/highlight": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.0.tgz", - "integrity": "sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz", + "integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==", + "license": "MIT", "dependencies": { "@lezer/common": "^1.0.0" } }, "node_modules/@lezer/highlight/node_modules/@lezer/common": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz", - "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==" + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", + "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", + "license": "MIT" }, "node_modules/@lezer/html": { "version": "1.3.10", @@ -1848,9 +1857,10 @@ } }, "node_modules/@lezer/javascript/node_modules/@lezer/common": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz", - "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==" + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", + "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", + "license": "MIT" }, "node_modules/@lezer/json": { "version": "1.0.2", @@ -1863,22 +1873,25 @@ } }, "node_modules/@lezer/json/node_modules/@lezer/common": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz", - "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==" + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", + "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", + "license": "MIT" }, "node_modules/@lezer/lr": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.1.tgz", - "integrity": "sha512-CHsKq8DMKBf9b3yXPDIU4DbH+ZJd/sJdYOW2llbW/HudP5u0VS6Bfq1hLYfgU7uAYGFIyGGQIsSOXGPEErZiJw==", + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz", + "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==", + "license": "MIT", "dependencies": { "@lezer/common": "^1.0.0" } }, "node_modules/@lezer/lr/node_modules/@lezer/common": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz", - "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==" + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", + "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", + "license": "MIT" }, "node_modules/@lezer/markdown": { "version": "1.3.1", @@ -2012,19 +2025,6 @@ "node": ">=0.10.0" } }, - "node_modules/@microsoft/api-extractor/node_modules/typescript": { - "version": "5.4.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz", - "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==", - "dev": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=14.17" - } - }, "node_modules/@microsoft/tsdoc": { "version": "0.14.2", "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.14.2.tgz", @@ -3444,9 +3444,10 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "18.19.34", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.34.tgz", - "integrity": "sha512-eXF4pfBNV5DAMKGbI02NnDtWrQ40hAN558/2vvS4gMpMIxaf6JmD7YjnZbq0Q9TDSSkKBamime8ewRoomHdt4g==", + "version": "18.19.55", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.55.tgz", + "integrity": "sha512-zzw5Vw52205Zr/nmErSEkN5FLqXPuKX/k5d1D7RKHATGqU7y6YfX9QxZraUzUrFGqH6XzOzG196BC35ltJC4Cw==", + "license": "MIT", "dependencies": { "undici-types": "~5.26.4" } @@ -3809,10 +3810,11 @@ } }, "node_modules/@vue/language-core/node_modules/minimatch": { - "version": "9.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz", - "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==", + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", "dev": true, + "license": "ISC", "dependencies": { "brace-expansion": "^2.0.1" }, @@ -4472,9 +4474,10 @@ } }, "node_modules/ansi-regex": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", - "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", + "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", + "license": "MIT", "engines": { "node": ">=12" }, @@ -5265,9 +5268,10 @@ } }, "node_modules/codemirror/node_modules/@codemirror/autocomplete": { - "version": "6.16.2", - "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.16.2.tgz", - "integrity": "sha512-MjfDrHy0gHKlPWsvSsikhO1+BOh+eBHNgfH1OXs1+DAf30IonQldgMM3kxLDTG9ktE7kDLaA1j/l7KMPA4KNfw==", + "version": "6.18.1", + "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.1.tgz", + "integrity": "sha512-iWHdj/B1ethnHRTwZj+C1obmmuCzquH29EbcKr0qIjA9NfDeBDJ7vs+WOHsFeLeflE4o+dHfYndJloMKHUkWUA==", + "license": "MIT", "dependencies": { "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.0.0", @@ -5282,9 +5286,10 @@ } }, "node_modules/codemirror/node_modules/@codemirror/commands": { - "version": "6.6.0", - "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.6.0.tgz", - "integrity": "sha512-qnY+b7j1UNcTS31Eenuc/5YJB6gQOzkUoNmJQc0rznwqSRpeaWWpjkWy2C/MPTcePpsKJEM26hXrOXl1+nceXg==", + "version": "6.7.0", + "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.7.0.tgz", + "integrity": "sha512-+cduIZ2KbesDhbykV02K25A5xIVrquSPz4UxxYBemRlAT2aW8dhwUgLDwej7q/RJUHKk4nALYcR1puecDvbdqw==", + "license": "MIT", "dependencies": { "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.4.0", @@ -5293,9 +5298,10 @@ } }, "node_modules/codemirror/node_modules/@codemirror/lint": { - "version": "6.8.0", - "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.0.tgz", - "integrity": "sha512-lsFofvaw0lnPRJlQylNsC4IRt/1lI4OD/yYslrSGVndOJfStc58v+8p9dgGiD90ktOfL7OhBWns1ZETYgz0EJA==", + "version": "6.8.2", + "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.2.tgz", + "integrity": "sha512-PDFG5DjHxSEjOXk9TQYYVjZDqlZTFaDBfhQixHnQOEVDDNHUbEh/hstAjcQJaA6FQdZTD1hquXTK0rVBLADR1g==", + "license": "MIT", "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0", @@ -5313,9 +5319,10 @@ } }, "node_modules/codemirror/node_modules/@lezer/common": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz", - "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==" + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", + "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", + "license": "MIT" }, "node_modules/color-convert": { "version": "1.9.3", @@ -5466,10 +5473,11 @@ } }, "node_modules/command-line-usage/node_modules/typical": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/typical/-/typical-7.1.1.tgz", - "integrity": "sha512-T+tKVNs6Wu7IWiAce5BgMd7OZfNYUndHwc5MknN+UHOudi7sGZzuHdCadllRuqJ3fPtgFtIH9+lt9qRv6lmpfA==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/typical/-/typical-7.2.0.tgz", + "integrity": "sha512-W1+HdVRUl8fS3MZ9ogD51GOb46xMmhAZzR0WPw5jcgIZQJVvkddYzAl4YTU6g5w33Y1iRQLdIi2/1jhi2RNL0g==", "dev": true, + "license": "MIT", "engines": { "node": ">=12.17" } @@ -5737,11 +5745,12 @@ "dev": true }, "node_modules/debug": { - "version": "4.3.5", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", - "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==", + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "license": "MIT", "dependencies": { - "ms": "2.1.2" + "ms": "^2.1.3" }, "engines": { "node": ">=6.0" @@ -6177,10 +6186,11 @@ "dev": true }, "node_modules/emoji-regex": { - "version": "10.3.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz", - "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==", - "dev": true + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz", + "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==", + "dev": true, + "license": "MIT" }, "node_modules/encodeurl": { "version": "1.0.2", @@ -6897,22 +6907,21 @@ } }, "node_modules/glob": { - "version": "10.4.1", - "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.1.tgz", - "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==", + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "license": "ISC", "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" }, - "engines": { - "node": ">=16 || 14 >=14.18" - }, "funding": { "url": "https://github.com/sponsors/isaacs" } @@ -6935,9 +6944,10 @@ "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==" }, "node_modules/glob/node_modules/minimatch": { - "version": "9.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz", - "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==", + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "license": "ISC", "dependencies": { "brace-expansion": "^2.0.1" }, @@ -7571,10 +7581,11 @@ } }, "node_modules/is-unicode-supported": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-2.0.0.tgz", - "integrity": "sha512-FRdAyx5lusK1iHG0TWpVtk9+1i+GjrzRffhDg4ovQ7mcidMQ6mj+MhKPmvh7Xwyv5gIS06ns49CA7Sqg7lC22Q==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-2.1.0.tgz", + "integrity": "sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==", "dev": true, + "license": "MIT", "engines": { "node": ">=18" }, @@ -7815,13 +7826,13 @@ } }, "node_modules/jsdom/node_modules/parse5": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", - "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.0.tgz", + "integrity": "sha512-ZkDsAOcxsUMZ4Lz5fVciOehNcJ+Gb8gTzcA4yl3wnc273BAybYWrQ+Ks/OjCjSEpjvQkDSeZbybK9qj2VHHdGA==", "dev": true, "license": "MIT", "dependencies": { - "entities": "^4.4.0" + "entities": "^4.5.0" }, "funding": { "url": "https://github.com/inikulin/parse5?sponsor=1" @@ -8125,9 +8136,9 @@ } }, "node_modules/lit-element/node_modules/lit-html": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.2.0.tgz", - "integrity": "sha512-pwT/HwoxqI9FggTrYVarkBKFN9MlTUpLrDHubTmW4SrkL3kkqW5gxwbxMMUnbbRHBC0WTZnYHcjDSCM559VyfA==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.2.1.tgz", + "integrity": "sha512-qI/3lziaPMSKsrwlxH/xMgikhQ0EGOX2ICU73Bi/YHFvz2j/yMCIrw4+puF2IpQ4+upd3EWbvnHM9+PnJn48YA==", "license": "BSD-3-Clause", "dependencies": { "@types/trusted-types": "^2.0.2" @@ -8139,9 +8150,9 @@ "integrity": "sha512-ue0pIX3Fj5gUsNSozdRQIb1MAgNqFQsHgvHE/FU34xyu9NN/af3EISr7Bb+vP9YeLXIA4vLLOoYp2Z22dVYhww==" }, "node_modules/lit/node_modules/lit-html": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.2.0.tgz", - "integrity": "sha512-pwT/HwoxqI9FggTrYVarkBKFN9MlTUpLrDHubTmW4SrkL3kkqW5gxwbxMMUnbbRHBC0WTZnYHcjDSCM559VyfA==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.2.1.tgz", + "integrity": "sha512-qI/3lziaPMSKsrwlxH/xMgikhQ0EGOX2ICU73Bi/YHFvz2j/yMCIrw4+puF2IpQ4+upd3EWbvnHM9+PnJn48YA==", "license": "BSD-3-Clause", "dependencies": { "@types/trusted-types": "^2.0.2" @@ -8425,12 +8436,10 @@ } }, "node_modules/lru-cache": { - "version": "10.2.2", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz", - "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==", - "engines": { - "node": "14 || >=16.14" - } + "version": "10.4.3", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", + "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", + "license": "ISC" }, "node_modules/magic-string": { "version": "0.30.10", @@ -8879,12 +8888,6 @@ "node": ">=10" } }, - "node_modules/mocha/node_modules/ms": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", - "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", - "dev": true - }, "node_modules/mocha/node_modules/supports-color": { "version": "8.1.1", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", @@ -8901,9 +8904,10 @@ } }, "node_modules/ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "license": "MIT" }, "node_modules/muggle-string": { "version": "0.3.1", @@ -9327,6 +9331,12 @@ "node": ">= 14" } }, + "node_modules/package-json-from-dist": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", + "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", + "license": "BlueOak-1.0.0" + }, "node_modules/parse5": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", @@ -10240,9 +10250,10 @@ "integrity": "sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==" }, "node_modules/semver": { - "version": "7.6.2", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz", - "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==", + "version": "7.6.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", + "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "license": "ISC", "bin": { "semver": "bin/semver.js" }, @@ -10577,10 +10588,11 @@ } }, "node_modules/string-width": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.1.0.tgz", - "integrity": "sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz", + "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==", "dev": true, + "license": "MIT", "dependencies": { "emoji-regex": "^10.3.0", "get-east-asian-width": "^1.0.0", @@ -10837,10 +10849,11 @@ } }, "node_modules/table-layout/node_modules/typical": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/typical/-/typical-7.1.1.tgz", - "integrity": "sha512-T+tKVNs6Wu7IWiAce5BgMd7OZfNYUndHwc5MknN+UHOudi7sGZzuHdCadllRuqJ3fPtgFtIH9+lt9qRv6lmpfA==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/typical/-/typical-7.2.0.tgz", + "integrity": "sha512-W1+HdVRUl8fS3MZ9ogD51GOb46xMmhAZzR0WPw5jcgIZQJVvkddYzAl4YTU6g5w33Y1iRQLdIi2/1jhi2RNL0g==", "dev": true, + "license": "MIT", "engines": { "node": ">=12.17" } @@ -10944,6 +10957,17 @@ "b4a": "^1.6.4" } }, + "node_modules/thememirror": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/thememirror/-/thememirror-2.0.1.tgz", + "integrity": "sha512-d5i6FVvWWPkwrm4cHLI3t9AT1OrkAt7Ig8dtdYSofgF7C/eiyNuq6zQzSTusWTde3jpW9WLvA9J/fzNKMUsd0w==", + "license": "MIT", + "peerDependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0" + } + }, "node_modules/three": { "version": "0.165.0", "resolved": "https://registry.npmjs.org/three/-/three-0.165.0.tgz", @@ -11089,10 +11113,11 @@ } }, "node_modules/typescript": { - "version": "5.4.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz", - "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==", + "version": "5.4.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz", + "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==", "devOptional": true, + "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -12008,14 +12033,6 @@ "zod": ">=3.22.4" } }, - "node_modules/zod-stream/node_modules/zod-to-json-schema": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.23.0.tgz", - "integrity": "sha512-az0uJ243PxsRIa2x1WmNE/pnuA05gUq/JB8Lwe1EDCCL/Fz9MgjYQ0fPlyc2Tcv6aF2ZA7WM5TWaRZVEFaAIag==", - "peerDependencies": { - "zod": "^3.23.3" - } - }, "node_modules/zod-to-json-schema": { "version": "3.22.5", "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.22.5.tgz", @@ -12095,9 +12112,10 @@ } }, "packages/common-frp-lit/node_modules/lit-html": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.4.tgz", - "integrity": "sha512-yKKO2uVv7zYFHlWMfZmqc+4hkmSbFp8jgjdZY9vvR9jr4J8fH6FUMXhr+ljfELgmjpvlF7Z1SJ5n5/Jeqtc9YA==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.2.1.tgz", + "integrity": "sha512-qI/3lziaPMSKsrwlxH/xMgikhQ0EGOX2ICU73Bi/YHFvz2j/yMCIrw4+puF2IpQ4+upd3EWbvnHM9+PnJn48YA==", + "license": "BSD-3-Clause", "dependencies": { "@types/trusted-types": "^2.0.2" } @@ -12122,14 +12140,22 @@ } }, "packages/common-html/node_modules/@types/node": { - "version": "20.14.11", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.11.tgz", - "integrity": "sha512-kprQpL8MMeszbz6ojB5/tU8PLN4kesnN8Gjzw349rDlNgsSzg90lAVj3llK99Dh7JON+t9AuscPPFW6mPbTnSA==", + "version": "20.16.11", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.11.tgz", + "integrity": "sha512-y+cTCACu92FyA5fgQSAI8A1H429g7aSK2HsO7K4XYUWc4dY5IUz55JSDIYT6/VsOLfGy8vmvQYC2hfb0iF16Uw==", "dev": true, + "license": "MIT", "dependencies": { - "undici-types": "~5.26.4" + "undici-types": "~6.19.2" } }, + "packages/common-html/node_modules/undici-types": { + "version": "6.19.8", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", + "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==", + "dev": true, + "license": "MIT" + }, "packages/common-llm-client": { "name": "@commontools/common-llm-client", "version": "0.0.1", @@ -12165,7 +12191,8 @@ "prosemirror-keymap": "^1.2.2", "prosemirror-model": "^1.22.3", "prosemirror-state": "^1.4.3", - "prosemirror-view": "^1.34.3" + "prosemirror-view": "^1.34.3", + "thememirror": "^2.0.1" }, "devDependencies": { "@types/mocha": "^10.0.9", @@ -12200,14 +12227,22 @@ } }, "packages/common-propagator/node_modules/@types/node": { - "version": "20.14.12", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.12.tgz", - "integrity": "sha512-r7wNXakLeSsGT0H1AU863vS2wa5wBOK4bWMjZz2wj+8nBx+m5PeIn0k8AloSLpRuiwdRQZwarZqHE4FNArPuJQ==", + "version": "20.16.11", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.11.tgz", + "integrity": "sha512-y+cTCACu92FyA5fgQSAI8A1H429g7aSK2HsO7K4XYUWc4dY5IUz55JSDIYT6/VsOLfGy8vmvQYC2hfb0iF16Uw==", "dev": true, + "license": "MIT", "dependencies": { - "undici-types": "~5.26.4" + "undici-types": "~6.19.2" } }, + "packages/common-propagator/node_modules/undici-types": { + "version": "6.19.8", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", + "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==", + "dev": true, + "license": "MIT" + }, "packages/common-runner": { "name": "@commontools/common-runner", "version": "0.0.1", @@ -12248,13 +12283,20 @@ } }, "packages/common-ui/node_modules/@types/node": { - "version": "20.14.2", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.2.tgz", - "integrity": "sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q==", + "version": "20.16.11", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.11.tgz", + "integrity": "sha512-y+cTCACu92FyA5fgQSAI8A1H429g7aSK2HsO7K4XYUWc4dY5IUz55JSDIYT6/VsOLfGy8vmvQYC2hfb0iF16Uw==", + "license": "MIT", "dependencies": { - "undici-types": "~5.26.4" + "undici-types": "~6.19.2" } }, + "packages/common-ui/node_modules/undici-types": { + "version": "6.19.8", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", + "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==", + "license": "MIT" + }, "packages/common-verifier": { "name": "@commontools/common-verifier", "version": "0.0.1", diff --git a/typescript/packages/common-os-ui/package.json b/typescript/packages/common-os-ui/package.json index 23b6ae1a0..fe1a3bb4a 100644 --- a/typescript/packages/common-os-ui/package.json +++ b/typescript/packages/common-os-ui/package.json @@ -40,7 +40,8 @@ "prosemirror-keymap": "^1.2.2", "prosemirror-model": "^1.22.3", "prosemirror-state": "^1.4.3", - "prosemirror-view": "^1.34.3" + "prosemirror-view": "^1.34.3", + "thememirror": "^2.0.1" }, "devDependencies": { "@types/mocha": "^10.0.9", diff --git a/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts b/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts index 2b9b19fca..33586f55f 100644 --- a/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts +++ b/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts @@ -3,6 +3,7 @@ import { customElement } from "lit/decorators.js"; import { basicSetup, EditorView } from "codemirror"; import { EditorState, Compartment } from "@codemirror/state"; import { javascript } from "@codemirror/lang-javascript"; +import { ayuLight } from "thememirror"; import { createStore, Store, ValueMsg, FxDriver } from "../../shared/store"; import { createCleanupGroup } from "../../shared/cleanup.js"; import { base } from "../../shared/styles.ts"; @@ -53,7 +54,6 @@ export const createFx = @customElement("os-code-editor") export class OsCodeEditor extends HTMLElement { static styles = [ - base, css` :host { display: block; @@ -96,6 +96,7 @@ export class OsCodeEditor extends HTMLElement { const state = EditorState.create({ extensions: [ basicSetup, + ayuLight, language.of(javascript()), tabSize.of(EditorState.tabSize.of(4)), ], From 3fca1261291eabcfa26b040034881826cf3aaad2 Mon Sep 17 00:00:00 2001 From: Gordon Brander Date: Wed, 16 Oct 2024 16:02:39 -0400 Subject: [PATCH 3/8] Remove deprecated codemirror dep --- typescript/package-lock.json | 253 ++---------------- typescript/packages/common-os-ui/package.json | 5 +- .../components/code-editor/os-code-editor.ts | 7 +- .../packages/lookslike-prototype/package.json | 1 - 4 files changed, 21 insertions(+), 245 deletions(-) diff --git a/typescript/package-lock.json b/typescript/package-lock.json index eda3365cd..ac8fbc460 100644 --- a/typescript/package-lock.json +++ b/typescript/package-lock.json @@ -610,175 +610,6 @@ "node": ">=16" } }, - "node_modules/@codemirror/autocomplete": { - "version": "0.20.3", - "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-0.20.3.tgz", - "integrity": "sha512-lYB+NPGP+LEzAudkWhLfMxhTrxtLILGl938w+RcFrGdrIc54A+UgmCoz+McE3IYRFp4xyQcL4uFJwo+93YdgHw==", - "dependencies": { - "@codemirror/language": "^0.20.0", - "@codemirror/state": "^0.20.0", - "@codemirror/view": "^0.20.0", - "@lezer/common": "^0.16.0" - } - }, - "node_modules/@codemirror/autocomplete/node_modules/@codemirror/language": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-0.20.2.tgz", - "integrity": "sha512-WB3Bnuusw0xhVvhBocieYKwJm04SOk5bPoOEYksVHKHcGHFOaYaw+eZVxR4gIqMMcGzOIUil0FsCmFk8yrhHpw==", - "dependencies": { - "@codemirror/state": "^0.20.0", - "@codemirror/view": "^0.20.0", - "@lezer/common": "^0.16.0", - "@lezer/highlight": "^0.16.0", - "@lezer/lr": "^0.16.0", - "style-mod": "^4.0.0" - } - }, - "node_modules/@codemirror/autocomplete/node_modules/@codemirror/state": { - "version": "0.20.1", - "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.20.1.tgz", - "integrity": "sha512-ms0tlV5A02OK0pFvTtSUGMLkoarzh1F8mr6jy1cD7ucSC2X/VLHtQCxfhdSEGqTYlQF2hoZtmLv+amqhdgbwjQ==" - }, - "node_modules/@codemirror/autocomplete/node_modules/@codemirror/view": { - "version": "0.20.7", - "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.20.7.tgz", - "integrity": "sha512-pqEPCb9QFTOtHgAH5XU/oVy9UR/Anj6r+tG5CRmkNVcqSKEPmBU05WtN/jxJCFZBXf6HumzWC9ydE4qstO3TxQ==", - "dependencies": { - "@codemirror/state": "^0.20.0", - "style-mod": "^4.0.0", - "w3c-keyname": "^2.2.4" - } - }, - "node_modules/@codemirror/autocomplete/node_modules/@lezer/highlight": { - "version": "0.16.0", - "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-0.16.0.tgz", - "integrity": "sha512-iE5f4flHlJ1g1clOStvXNLbORJoiW4Kytso6ubfYzHnaNo/eo5SKhxs4wv/rtvwZQeZrK3we8S9SyA7OGOoRKQ==", - "dependencies": { - "@lezer/common": "^0.16.0" - } - }, - "node_modules/@codemirror/autocomplete/node_modules/@lezer/lr": { - "version": "0.16.3", - "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-0.16.3.tgz", - "integrity": "sha512-pau7um4eAw94BEuuShUIeQDTf3k4Wt6oIUOYxMmkZgDHdqtIcxWND4LRxi8nI9KuT4I1bXQv67BCapkxt7Ywqw==", - "dependencies": { - "@lezer/common": "^0.16.0" - } - }, - "node_modules/@codemirror/basic-setup": { - "version": "0.20.0", - "resolved": "https://registry.npmjs.org/@codemirror/basic-setup/-/basic-setup-0.20.0.tgz", - "integrity": "sha512-W/ERKMLErWkrVLyP5I8Yh8PXl4r+WFNkdYVSzkXYPQv2RMPSkWpr2BgggiSJ8AHF/q3GuApncDD8I4BZz65fyg==", - "deprecated": "In version 6.0, this package has been renamed to just 'codemirror'", - "dependencies": { - "@codemirror/autocomplete": "^0.20.0", - "@codemirror/commands": "^0.20.0", - "@codemirror/language": "^0.20.0", - "@codemirror/lint": "^0.20.0", - "@codemirror/search": "^0.20.0", - "@codemirror/state": "^0.20.0", - "@codemirror/view": "^0.20.0" - } - }, - "node_modules/@codemirror/basic-setup/node_modules/@codemirror/language": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-0.20.2.tgz", - "integrity": "sha512-WB3Bnuusw0xhVvhBocieYKwJm04SOk5bPoOEYksVHKHcGHFOaYaw+eZVxR4gIqMMcGzOIUil0FsCmFk8yrhHpw==", - "dependencies": { - "@codemirror/state": "^0.20.0", - "@codemirror/view": "^0.20.0", - "@lezer/common": "^0.16.0", - "@lezer/highlight": "^0.16.0", - "@lezer/lr": "^0.16.0", - "style-mod": "^4.0.0" - } - }, - "node_modules/@codemirror/basic-setup/node_modules/@codemirror/state": { - "version": "0.20.1", - "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.20.1.tgz", - "integrity": "sha512-ms0tlV5A02OK0pFvTtSUGMLkoarzh1F8mr6jy1cD7ucSC2X/VLHtQCxfhdSEGqTYlQF2hoZtmLv+amqhdgbwjQ==" - }, - "node_modules/@codemirror/basic-setup/node_modules/@codemirror/view": { - "version": "0.20.7", - "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.20.7.tgz", - "integrity": "sha512-pqEPCb9QFTOtHgAH5XU/oVy9UR/Anj6r+tG5CRmkNVcqSKEPmBU05WtN/jxJCFZBXf6HumzWC9ydE4qstO3TxQ==", - "dependencies": { - "@codemirror/state": "^0.20.0", - "style-mod": "^4.0.0", - "w3c-keyname": "^2.2.4" - } - }, - "node_modules/@codemirror/basic-setup/node_modules/@lezer/highlight": { - "version": "0.16.0", - "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-0.16.0.tgz", - "integrity": "sha512-iE5f4flHlJ1g1clOStvXNLbORJoiW4Kytso6ubfYzHnaNo/eo5SKhxs4wv/rtvwZQeZrK3we8S9SyA7OGOoRKQ==", - "dependencies": { - "@lezer/common": "^0.16.0" - } - }, - "node_modules/@codemirror/basic-setup/node_modules/@lezer/lr": { - "version": "0.16.3", - "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-0.16.3.tgz", - "integrity": "sha512-pau7um4eAw94BEuuShUIeQDTf3k4Wt6oIUOYxMmkZgDHdqtIcxWND4LRxi8nI9KuT4I1bXQv67BCapkxt7Ywqw==", - "dependencies": { - "@lezer/common": "^0.16.0" - } - }, - "node_modules/@codemirror/commands": { - "version": "0.20.0", - "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-0.20.0.tgz", - "integrity": "sha512-v9L5NNVA+A9R6zaFvaTbxs30kc69F6BkOoiEbeFw4m4I0exmDEKBILN6mK+GksJtvTzGBxvhAPlVFTdQW8GB7Q==", - "dependencies": { - "@codemirror/language": "^0.20.0", - "@codemirror/state": "^0.20.0", - "@codemirror/view": "^0.20.0", - "@lezer/common": "^0.16.0" - } - }, - "node_modules/@codemirror/commands/node_modules/@codemirror/language": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-0.20.2.tgz", - "integrity": "sha512-WB3Bnuusw0xhVvhBocieYKwJm04SOk5bPoOEYksVHKHcGHFOaYaw+eZVxR4gIqMMcGzOIUil0FsCmFk8yrhHpw==", - "dependencies": { - "@codemirror/state": "^0.20.0", - "@codemirror/view": "^0.20.0", - "@lezer/common": "^0.16.0", - "@lezer/highlight": "^0.16.0", - "@lezer/lr": "^0.16.0", - "style-mod": "^4.0.0" - } - }, - "node_modules/@codemirror/commands/node_modules/@codemirror/state": { - "version": "0.20.1", - "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.20.1.tgz", - "integrity": "sha512-ms0tlV5A02OK0pFvTtSUGMLkoarzh1F8mr6jy1cD7ucSC2X/VLHtQCxfhdSEGqTYlQF2hoZtmLv+amqhdgbwjQ==" - }, - "node_modules/@codemirror/commands/node_modules/@codemirror/view": { - "version": "0.20.7", - "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.20.7.tgz", - "integrity": "sha512-pqEPCb9QFTOtHgAH5XU/oVy9UR/Anj6r+tG5CRmkNVcqSKEPmBU05WtN/jxJCFZBXf6HumzWC9ydE4qstO3TxQ==", - "dependencies": { - "@codemirror/state": "^0.20.0", - "style-mod": "^4.0.0", - "w3c-keyname": "^2.2.4" - } - }, - "node_modules/@codemirror/commands/node_modules/@lezer/highlight": { - "version": "0.16.0", - "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-0.16.0.tgz", - "integrity": "sha512-iE5f4flHlJ1g1clOStvXNLbORJoiW4Kytso6ubfYzHnaNo/eo5SKhxs4wv/rtvwZQeZrK3we8S9SyA7OGOoRKQ==", - "dependencies": { - "@lezer/common": "^0.16.0" - } - }, - "node_modules/@codemirror/commands/node_modules/@lezer/lr": { - "version": "0.16.3", - "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-0.16.3.tgz", - "integrity": "sha512-pau7um4eAw94BEuuShUIeQDTf3k4Wt6oIUOYxMmkZgDHdqtIcxWND4LRxi8nI9KuT4I1bXQv67BCapkxt7Ywqw==", - "dependencies": { - "@lezer/common": "^0.16.0" - } - }, "node_modules/@codemirror/lang-css": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.0.tgz", @@ -976,62 +807,24 @@ "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", "license": "MIT" }, - "node_modules/@codemirror/lint": { - "version": "0.20.3", - "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-0.20.3.tgz", - "integrity": "sha512-06xUScbbspZ8mKoODQCEx6hz1bjaq9m8W8DxdycWARMiiX1wMtfCh/MoHpaL7ws/KUMwlsFFfp2qhm32oaCvVA==", - "dependencies": { - "@codemirror/state": "^0.20.0", - "@codemirror/view": "^0.20.2", - "crelt": "^1.0.5" - } - }, - "node_modules/@codemirror/lint/node_modules/@codemirror/state": { - "version": "0.20.1", - "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.20.1.tgz", - "integrity": "sha512-ms0tlV5A02OK0pFvTtSUGMLkoarzh1F8mr6jy1cD7ucSC2X/VLHtQCxfhdSEGqTYlQF2hoZtmLv+amqhdgbwjQ==" - }, - "node_modules/@codemirror/lint/node_modules/@codemirror/view": { - "version": "0.20.7", - "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.20.7.tgz", - "integrity": "sha512-pqEPCb9QFTOtHgAH5XU/oVy9UR/Anj6r+tG5CRmkNVcqSKEPmBU05WtN/jxJCFZBXf6HumzWC9ydE4qstO3TxQ==", - "dependencies": { - "@codemirror/state": "^0.20.0", - "style-mod": "^4.0.0", - "w3c-keyname": "^2.2.4" - } - }, - "node_modules/@codemirror/search": { - "version": "0.20.1", - "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-0.20.1.tgz", - "integrity": "sha512-ROe6gRboQU5E4z6GAkNa2kxhXqsGNbeLEisbvzbOeB7nuDYXUZ70vGIgmqPu0tB+1M3F9yWk6W8k2vrFpJaD4Q==", - "dependencies": { - "@codemirror/state": "^0.20.0", - "@codemirror/view": "^0.20.0", - "crelt": "^1.0.5" - } - }, - "node_modules/@codemirror/search/node_modules/@codemirror/state": { - "version": "0.20.1", - "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.20.1.tgz", - "integrity": "sha512-ms0tlV5A02OK0pFvTtSUGMLkoarzh1F8mr6jy1cD7ucSC2X/VLHtQCxfhdSEGqTYlQF2hoZtmLv+amqhdgbwjQ==" - }, - "node_modules/@codemirror/search/node_modules/@codemirror/view": { - "version": "0.20.7", - "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.20.7.tgz", - "integrity": "sha512-pqEPCb9QFTOtHgAH5XU/oVy9UR/Anj6r+tG5CRmkNVcqSKEPmBU05WtN/jxJCFZBXf6HumzWC9ydE4qstO3TxQ==", - "dependencies": { - "@codemirror/state": "^0.20.0", - "style-mod": "^4.0.0", - "w3c-keyname": "^2.2.4" - } - }, "node_modules/@codemirror/state": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.1.tgz", "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==", "license": "MIT" }, + "node_modules/@codemirror/theme-one-dark": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz", + "integrity": "sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==", + "license": "MIT", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/highlight": "^1.0.0" + } + }, "node_modules/@codemirror/view": { "version": "6.34.1", "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.34.1.tgz", @@ -1792,11 +1585,6 @@ "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==", "dev": true }, - "node_modules/@lezer/common": { - "version": "0.16.1", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.16.1.tgz", - "integrity": "sha512-qPmG7YTZ6lATyTOAWf8vXE+iRrt1NJd4cm2nJHK+v7X9TsOF6+HtuU/ctaZy2RCrluxDb89hI6KWQ5LfQGQWuA==" - }, "node_modules/@lezer/css": { "version": "1.1.9", "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.9.tgz", @@ -10957,17 +10745,6 @@ "b4a": "^1.6.4" } }, - "node_modules/thememirror": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/thememirror/-/thememirror-2.0.1.tgz", - "integrity": "sha512-d5i6FVvWWPkwrm4cHLI3t9AT1OrkAt7Ig8dtdYSofgF7C/eiyNuq6zQzSTusWTde3jpW9WLvA9J/fzNKMUsd0w==", - "license": "MIT", - "peerDependencies": { - "@codemirror/language": "^6.0.0", - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.0.0" - } - }, "node_modules/three": { "version": "0.165.0", "resolved": "https://registry.npmjs.org/three/-/three-0.165.0.tgz", @@ -12183,6 +11960,8 @@ "@codemirror/lang-markdown": "^6.3.0", "@codemirror/search": "^6.5.6", "@codemirror/state": "^6.4.1", + "@codemirror/theme-one-dark": "^6.1.2", + "@commontools/common-os-ui": "file:", "@floating-ui/dom": "^1.6.11", "codemirror": "^6.0.1", "lit": "^3.2.0", @@ -12191,8 +11970,7 @@ "prosemirror-keymap": "^1.2.2", "prosemirror-model": "^1.22.3", "prosemirror-state": "^1.4.3", - "prosemirror-view": "^1.34.3", - "thememirror": "^2.0.1" + "prosemirror-view": "^1.34.3" }, "devDependencies": { "@types/mocha": "^10.0.9", @@ -12417,7 +12195,6 @@ "dependencies": { "@babel/parser": "^7.24.6", "@bytecodealliance/preview2-shim": "^0.16.2", - "@codemirror/basic-setup": "^0.20.0", "@codemirror/lang-javascript": "^6.2.2", "@codemirror/lang-json": "^6.0.1", "@codemirror/language": "^6.10.2", diff --git a/typescript/packages/common-os-ui/package.json b/typescript/packages/common-os-ui/package.json index fe1a3bb4a..ea55c1f0c 100644 --- a/typescript/packages/common-os-ui/package.json +++ b/typescript/packages/common-os-ui/package.json @@ -32,6 +32,8 @@ "@codemirror/lang-markdown": "^6.3.0", "@codemirror/search": "^6.5.6", "@codemirror/state": "^6.4.1", + "@codemirror/theme-one-dark": "^6.1.2", + "@commontools/common-os-ui": "file:", "@floating-ui/dom": "^1.6.11", "codemirror": "^6.0.1", "lit": "^3.2.0", @@ -40,8 +42,7 @@ "prosemirror-keymap": "^1.2.2", "prosemirror-model": "^1.22.3", "prosemirror-state": "^1.4.3", - "prosemirror-view": "^1.34.3", - "thememirror": "^2.0.1" + "prosemirror-view": "^1.34.3" }, "devDependencies": { "@types/mocha": "^10.0.9", diff --git a/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts b/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts index 33586f55f..3b8b842c4 100644 --- a/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts +++ b/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts @@ -3,10 +3,9 @@ import { customElement } from "lit/decorators.js"; import { basicSetup, EditorView } from "codemirror"; import { EditorState, Compartment } from "@codemirror/state"; import { javascript } from "@codemirror/lang-javascript"; -import { ayuLight } from "thememirror"; -import { createStore, Store, ValueMsg, FxDriver } from "../../shared/store"; +import { oneDark } from "@codemirror/theme-one-dark"; +import { createStore, Store, ValueMsg, FxDriver } from "../../shared/store.js"; import { createCleanupGroup } from "../../shared/cleanup.js"; -import { base } from "../../shared/styles.ts"; const freeze = Object.freeze; @@ -96,7 +95,7 @@ export class OsCodeEditor extends HTMLElement { const state = EditorState.create({ extensions: [ basicSetup, - ayuLight, + oneDark, language.of(javascript()), tabSize.of(EditorState.tabSize.of(4)), ], diff --git a/typescript/packages/lookslike-prototype/package.json b/typescript/packages/lookslike-prototype/package.json index 5e96b84a7..e430e2368 100644 --- a/typescript/packages/lookslike-prototype/package.json +++ b/typescript/packages/lookslike-prototype/package.json @@ -50,7 +50,6 @@ "dependencies": { "@babel/parser": "^7.24.6", "@bytecodealliance/preview2-shim": "^0.16.2", - "@codemirror/basic-setup": "^0.20.0", "@codemirror/lang-javascript": "^6.2.2", "@codemirror/lang-json": "^6.0.1", "@codemirror/language": "^6.10.2", From 8e7bc356d5cbdf1c7fe041bc673bf676a1ed059a Mon Sep 17 00:00:00 2001 From: Gordon Brander Date: Wed, 16 Oct 2024 16:42:07 -0400 Subject: [PATCH 4/8] Fix CodeMirror dep with npm dedupe See https://discuss.codemirror.net/t/release-0-20-0/4302/5 There was an error breaking syntax highlighting: ``` CodeMirror plugin crashed: TypeError: tags3 is not iterable ``` Caused by mismatched dependency versions. This can occur if using CodeMirror 5 and CodeMirror 6 in the same repo. npm dedupe resolved the issue. --- typescript/package-lock.json | 245 +++--------------- .../components/code-editor/os-code-editor.ts | 2 +- 2 files changed, 41 insertions(+), 206 deletions(-) diff --git a/typescript/package-lock.json b/typescript/package-lock.json index ac8fbc460..b0ea1ea91 100644 --- a/typescript/package-lock.json +++ b/typescript/package-lock.json @@ -610,20 +610,7 @@ "node": ">=16" } }, - "node_modules/@codemirror/lang-css": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.0.tgz", - "integrity": "sha512-CyR4rUNG9OYcXDZwMPvJdtb6PHbBDKUc/6Na2BIwZ6dKab1JQqKa4di+RNRY9Myn7JB81vayKwJeQ7jEdmNVDA==", - "license": "MIT", - "dependencies": { - "@codemirror/autocomplete": "^6.0.0", - "@codemirror/language": "^6.0.0", - "@codemirror/state": "^6.0.0", - "@lezer/common": "^1.0.2", - "@lezer/css": "^1.1.7" - } - }, - "node_modules/@codemirror/lang-css/node_modules/@codemirror/autocomplete": { + "node_modules/@codemirror/autocomplete": { "version": "6.18.1", "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.1.tgz", "integrity": "sha512-iWHdj/B1ethnHRTwZj+C1obmmuCzquH29EbcKr0qIjA9NfDeBDJ7vs+WOHsFeLeflE4o+dHfYndJloMKHUkWUA==", @@ -641,11 +628,18 @@ "@lezer/common": "^1.0.0" } }, - "node_modules/@codemirror/lang-css/node_modules/@lezer/common": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", - "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", - "license": "MIT" + "node_modules/@codemirror/lang-css": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.0.tgz", + "integrity": "sha512-CyR4rUNG9OYcXDZwMPvJdtb6PHbBDKUc/6Na2BIwZ6dKab1JQqKa4di+RNRY9Myn7JB81vayKwJeQ7jEdmNVDA==", + "license": "MIT", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.0.2", + "@lezer/css": "^1.1.7" + } }, "node_modules/@codemirror/lang-html": { "version": "6.4.9", @@ -664,30 +658,6 @@ "@lezer/html": "^1.3.0" } }, - "node_modules/@codemirror/lang-html/node_modules/@codemirror/autocomplete": { - "version": "6.18.1", - "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.1.tgz", - "integrity": "sha512-iWHdj/B1ethnHRTwZj+C1obmmuCzquH29EbcKr0qIjA9NfDeBDJ7vs+WOHsFeLeflE4o+dHfYndJloMKHUkWUA==", - "license": "MIT", - "dependencies": { - "@codemirror/language": "^6.0.0", - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.17.0", - "@lezer/common": "^1.0.0" - }, - "peerDependencies": { - "@codemirror/language": "^6.0.0", - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.0.0", - "@lezer/common": "^1.0.0" - } - }, - "node_modules/@codemirror/lang-html/node_modules/@lezer/common": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", - "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", - "license": "MIT" - }, "node_modules/@codemirror/lang-javascript": { "version": "6.2.2", "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.2.tgz", @@ -703,41 +673,6 @@ "@lezer/javascript": "^1.0.0" } }, - "node_modules/@codemirror/lang-javascript/node_modules/@codemirror/autocomplete": { - "version": "6.18.1", - "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.1.tgz", - "integrity": "sha512-iWHdj/B1ethnHRTwZj+C1obmmuCzquH29EbcKr0qIjA9NfDeBDJ7vs+WOHsFeLeflE4o+dHfYndJloMKHUkWUA==", - "license": "MIT", - "dependencies": { - "@codemirror/language": "^6.0.0", - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.17.0", - "@lezer/common": "^1.0.0" - }, - "peerDependencies": { - "@codemirror/language": "^6.0.0", - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.0.0", - "@lezer/common": "^1.0.0" - } - }, - "node_modules/@codemirror/lang-javascript/node_modules/@codemirror/lint": { - "version": "6.8.2", - "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.2.tgz", - "integrity": "sha512-PDFG5DjHxSEjOXk9TQYYVjZDqlZTFaDBfhQixHnQOEVDDNHUbEh/hstAjcQJaA6FQdZTD1hquXTK0rVBLADR1g==", - "license": "MIT", - "dependencies": { - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.0.0", - "crelt": "^1.0.5" - } - }, - "node_modules/@codemirror/lang-javascript/node_modules/@lezer/common": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", - "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", - "license": "MIT" - }, "node_modules/@codemirror/lang-json": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz", @@ -763,30 +698,6 @@ "@lezer/markdown": "^1.0.0" } }, - "node_modules/@codemirror/lang-markdown/node_modules/@codemirror/autocomplete": { - "version": "6.18.1", - "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.1.tgz", - "integrity": "sha512-iWHdj/B1ethnHRTwZj+C1obmmuCzquH29EbcKr0qIjA9NfDeBDJ7vs+WOHsFeLeflE4o+dHfYndJloMKHUkWUA==", - "license": "MIT", - "dependencies": { - "@codemirror/language": "^6.0.0", - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.17.0", - "@lezer/common": "^1.0.0" - }, - "peerDependencies": { - "@codemirror/language": "^6.0.0", - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.0.0", - "@lezer/common": "^1.0.0" - } - }, - "node_modules/@codemirror/lang-markdown/node_modules/@lezer/common": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", - "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", - "license": "MIT" - }, "node_modules/@codemirror/language": { "version": "6.10.3", "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.3.tgz", @@ -801,11 +712,27 @@ "style-mod": "^4.0.0" } }, - "node_modules/@codemirror/language/node_modules/@lezer/common": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", - "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", - "license": "MIT" + "node_modules/@codemirror/lint": { + "version": "6.8.2", + "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.2.tgz", + "integrity": "sha512-PDFG5DjHxSEjOXk9TQYYVjZDqlZTFaDBfhQixHnQOEVDDNHUbEh/hstAjcQJaA6FQdZTD1hquXTK0rVBLADR1g==", + "license": "MIT", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, + "node_modules/@codemirror/search": { + "version": "6.5.6", + "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.6.tgz", + "integrity": "sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==", + "license": "MIT", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } }, "node_modules/@codemirror/state": { "version": "6.4.1", @@ -1585,6 +1512,12 @@ "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==", "dev": true }, + "node_modules/@lezer/common": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", + "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", + "license": "MIT" + }, "node_modules/@lezer/css": { "version": "1.1.9", "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.9.tgz", @@ -1596,12 +1529,6 @@ "@lezer/lr": "^1.0.0" } }, - "node_modules/@lezer/css/node_modules/@lezer/common": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", - "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", - "license": "MIT" - }, "node_modules/@lezer/highlight": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz", @@ -1611,12 +1538,6 @@ "@lezer/common": "^1.0.0" } }, - "node_modules/@lezer/highlight/node_modules/@lezer/common": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", - "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", - "license": "MIT" - }, "node_modules/@lezer/html": { "version": "1.3.10", "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.10.tgz", @@ -1628,12 +1549,6 @@ "@lezer/lr": "^1.0.0" } }, - "node_modules/@lezer/html/node_modules/@lezer/common": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", - "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", - "license": "MIT" - }, "node_modules/@lezer/javascript": { "version": "1.4.17", "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.17.tgz", @@ -1644,12 +1559,6 @@ "@lezer/lr": "^1.3.0" } }, - "node_modules/@lezer/javascript/node_modules/@lezer/common": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", - "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", - "license": "MIT" - }, "node_modules/@lezer/json": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.2.tgz", @@ -1660,12 +1569,6 @@ "@lezer/lr": "^1.0.0" } }, - "node_modules/@lezer/json/node_modules/@lezer/common": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", - "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", - "license": "MIT" - }, "node_modules/@lezer/lr": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz", @@ -1675,12 +1578,6 @@ "@lezer/common": "^1.0.0" } }, - "node_modules/@lezer/lr/node_modules/@lezer/common": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", - "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", - "license": "MIT" - }, "node_modules/@lezer/markdown": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.3.1.tgz", @@ -1691,12 +1588,6 @@ "@lezer/highlight": "^1.0.0" } }, - "node_modules/@lezer/markdown/node_modules/@lezer/common": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", - "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", - "license": "MIT" - }, "node_modules/@lit-labs/ssr-dom-shim": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz", @@ -5055,24 +4946,6 @@ "@codemirror/view": "^6.0.0" } }, - "node_modules/codemirror/node_modules/@codemirror/autocomplete": { - "version": "6.18.1", - "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.1.tgz", - "integrity": "sha512-iWHdj/B1ethnHRTwZj+C1obmmuCzquH29EbcKr0qIjA9NfDeBDJ7vs+WOHsFeLeflE4o+dHfYndJloMKHUkWUA==", - "license": "MIT", - "dependencies": { - "@codemirror/language": "^6.0.0", - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.17.0", - "@lezer/common": "^1.0.0" - }, - "peerDependencies": { - "@codemirror/language": "^6.0.0", - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.0.0", - "@lezer/common": "^1.0.0" - } - }, "node_modules/codemirror/node_modules/@codemirror/commands": { "version": "6.7.0", "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.7.0.tgz", @@ -5085,33 +4958,6 @@ "@lezer/common": "^1.1.0" } }, - "node_modules/codemirror/node_modules/@codemirror/lint": { - "version": "6.8.2", - "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.2.tgz", - "integrity": "sha512-PDFG5DjHxSEjOXk9TQYYVjZDqlZTFaDBfhQixHnQOEVDDNHUbEh/hstAjcQJaA6FQdZTD1hquXTK0rVBLADR1g==", - "license": "MIT", - "dependencies": { - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.0.0", - "crelt": "^1.0.5" - } - }, - "node_modules/codemirror/node_modules/@codemirror/search": { - "version": "6.5.6", - "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.6.tgz", - "integrity": "sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==", - "dependencies": { - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.0.0", - "crelt": "^1.0.5" - } - }, - "node_modules/codemirror/node_modules/@lezer/common": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", - "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", - "license": "MIT" - }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -11980,17 +11826,6 @@ "wireit": "^0.14.4" } }, - "packages/common-os-ui/node_modules/@codemirror/search": { - "version": "6.5.6", - "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.6.tgz", - "integrity": "sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==", - "license": "MIT", - "dependencies": { - "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.0.0", - "crelt": "^1.0.5" - } - }, "packages/common-propagator": { "name": "@commontools/common-propagator", "version": "0.0.1", diff --git a/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts b/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts index 3b8b842c4..ff114f2f5 100644 --- a/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts +++ b/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts @@ -4,7 +4,7 @@ import { basicSetup, EditorView } from "codemirror"; import { EditorState, Compartment } from "@codemirror/state"; import { javascript } from "@codemirror/lang-javascript"; import { oneDark } from "@codemirror/theme-one-dark"; -import { createStore, Store, ValueMsg, FxDriver } from "../../shared/store.js"; +import { createStore, Store, ValueMsg, FxDriver } from "../../shared/store"; import { createCleanupGroup } from "../../shared/cleanup.js"; const freeze = Object.freeze; From d976ef8a5ccf5d4f93a324a9d8ce13f628fb9867 Mon Sep 17 00:00:00 2001 From: Gordon Brander Date: Thu, 17 Oct 2024 11:00:49 -0400 Subject: [PATCH 5/8] Remove top padding from container --- typescript/packages/common-os-ui/src/components/os-container.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/typescript/packages/common-os-ui/src/components/os-container.ts b/typescript/packages/common-os-ui/src/components/os-container.ts index 130bc5f6f..2a66cbf2d 100644 --- a/typescript/packages/common-os-ui/src/components/os-container.ts +++ b/typescript/packages/common-os-ui/src/components/os-container.ts @@ -16,7 +16,7 @@ export class OsContainer extends LitElement { .container { max-width: var(--container-width); margin: 0 auto; - padding: var(--pad); + padding: 0 var(--pad); } `, ]; From 45d5d2b6116b615b8b1b4770daf60966e0aa733f Mon Sep 17 00:00:00 2001 From: Gordon Brander Date: Thu, 17 Oct 2024 11:02:24 -0400 Subject: [PATCH 6/8] Expose destroy on editors - Expose destroy method on editors - Rename cleanup to cancel, in keeping with nomenclature elsewhere - Remove focus border from editor --- typescript/packages/common-os-ui/index.html | 2 +- .../components/code-editor/os-code-editor.ts | 53 +++++++++++-------- .../components/editor/os-rich-text-editor.ts | 12 ++--- .../{cleanup.test.ts => cancel.test.ts} | 26 ++++----- .../common-os-ui/src/shared/cancel.ts | 18 +++++++ .../common-os-ui/src/shared/cleanup.ts | 18 ------- 6 files changed, 70 insertions(+), 59 deletions(-) rename typescript/packages/common-os-ui/src/shared/{cleanup.test.ts => cancel.test.ts} (67%) create mode 100644 typescript/packages/common-os-ui/src/shared/cancel.ts delete mode 100644 typescript/packages/common-os-ui/src/shared/cleanup.ts diff --git a/typescript/packages/common-os-ui/index.html b/typescript/packages/common-os-ui/index.html index 1001a421d..2a171f83f 100644 --- a/typescript/packages/common-os-ui/index.html +++ b/typescript/packages/common-os-ui/index.html @@ -23,7 +23,6 @@ - @@ -39,6 +38,7 @@ + diff --git a/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts b/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts index ff114f2f5..2b5581e47 100644 --- a/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts +++ b/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts @@ -4,8 +4,8 @@ import { basicSetup, EditorView } from "codemirror"; import { EditorState, Compartment } from "@codemirror/state"; import { javascript } from "@codemirror/lang-javascript"; import { oneDark } from "@codemirror/theme-one-dark"; -import { createStore, Store, ValueMsg, FxDriver } from "../../shared/store"; -import { createCleanupGroup } from "../../shared/cleanup.js"; +import { createStore, Store, ValueMsg, FxDriver } from "../../shared/store.js"; +import { createCancelGroup } from "../../shared/cancel.js"; const freeze = Object.freeze; @@ -41,15 +41,34 @@ export const model = ({ text, }); -export const update = (state: Model, msg: Msg): Model => { +export const update = (state: Model, _msg: Msg): Model => { return state; }; export const createFx = - (): FxDriver => (state: Model, msg: Msg) => { + (): FxDriver => (_state: Model, _msg: Msg) => { return []; }; +export const createEditor = ({ element }: { element: HTMLElement }) => { + const language = new Compartment(); + const tabSize = new Compartment(); + + const state = EditorState.create({ + extensions: [ + basicSetup, + oneDark, + language.of(javascript()), + tabSize.of(EditorState.tabSize.of(4)), + ], + }); + + return new EditorView({ + state, + parent: element, + }); +}; + @customElement("os-code-editor") export class OsCodeEditor extends HTMLElement { static styles = [ @@ -61,11 +80,15 @@ export class OsCodeEditor extends HTMLElement { .code-editor { display: block; } + + .cm-editor.cm-focused { + outline: none; + } `, ]; #shadow: ShadowRoot; - #destroy = createCleanupGroup(); + destroy = createCancelGroup(); #store: Store; #editorView: EditorView; @@ -87,24 +110,12 @@ export class OsCodeEditor extends HTMLElement { update, }); const cleanupRender = this.#store.sink(() => {}); - this.#destroy.add(cleanupRender); - - const language = new Compartment(); - const tabSize = new Compartment(); - - const state = EditorState.create({ - extensions: [ - basicSetup, - oneDark, - language.of(javascript()), - tabSize.of(EditorState.tabSize.of(4)), - ], - }); + this.destroy.add(cleanupRender); - this.#editorView = new EditorView({ - state, - parent: editorRoot, + this.#editorView = createEditor({ + element: editorRoot, }); + this.destroy.add(() => this.#editorView.destroy()); } render() {} diff --git a/typescript/packages/common-os-ui/src/components/editor/os-rich-text-editor.ts b/typescript/packages/common-os-ui/src/components/editor/os-rich-text-editor.ts index 21e5afcb4..f1f51770e 100644 --- a/typescript/packages/common-os-ui/src/components/editor/os-rich-text-editor.ts +++ b/typescript/packages/common-os-ui/src/components/editor/os-rich-text-editor.ts @@ -22,7 +22,7 @@ import { Store, ValueMsg, } from "../../shared/store.js"; -import { createCleanupGroup } from "../../shared/cleanup.js"; +import { createCancelGroup } from "../../shared/cancel.js"; import { TemplateResult } from "lit"; import { classes, on } from "../../shared/dom.js"; import { ClickCompletion } from "../os-floating-completions.js"; @@ -308,7 +308,7 @@ export class OsRichTextEditor extends HTMLElement { `, ]; - #destroy = createCleanupGroup(); + destroy = createCancelGroup(); #store: Store; #editorView: EditorView; #reactiveRoot: HTMLElement; @@ -343,7 +343,7 @@ export class OsRichTextEditor extends HTMLElement { element: editorRoot, send: (msg: Msg) => this.#store.send(msg), }); - this.#destroy.add(() => { + this.destroy.add(() => { this.#editorView.destroy(); }); @@ -352,7 +352,7 @@ export class OsRichTextEditor extends HTMLElement { const event = new EditorStateChangeEvent(this.#editorView.state); this.dispatchEvent(event); }); - this.#destroy.add(offInput); + this.destroy.add(offInput); // Create fx driver const fx = createFx({ @@ -368,11 +368,11 @@ export class OsRichTextEditor extends HTMLElement { }); // Drive #reactive renders via store changes - const cleanupRender = this.#store.sink(() => { + const cancelRender = this.#store.sink(() => { // Wire up reactive rendering render(this.render(), this.#reactiveRoot); }); - this.#destroy.add(cleanupRender); + this.destroy.add(cancelRender); } get editor() { diff --git a/typescript/packages/common-os-ui/src/shared/cleanup.test.ts b/typescript/packages/common-os-ui/src/shared/cancel.test.ts similarity index 67% rename from typescript/packages/common-os-ui/src/shared/cleanup.test.ts rename to typescript/packages/common-os-ui/src/shared/cancel.test.ts index 33dfdbefa..7e29d0e38 100644 --- a/typescript/packages/common-os-ui/src/shared/cleanup.test.ts +++ b/typescript/packages/common-os-ui/src/shared/cancel.test.ts @@ -1,15 +1,15 @@ -import { createCleanupGroup } from "./cleanup.js"; +import { createCancelGroup } from "./cancel.js"; import * as assert from "node:assert/strict"; describe("cleanupGroup", () => { it("should create a cleanup group with add and cleanup methods", () => { - const group = createCleanupGroup(); + const group = createCancelGroup(); assert.equal(typeof group.add, "function"); - assert.equal(typeof group.cleanup, "function"); + assert.equal(typeof group, "function"); }); it("should execute added cleanup functions when cleanup is called", () => { - const group = createCleanupGroup(); + const group = createCancelGroup(); let count = 0; group.add(() => { @@ -19,13 +19,13 @@ describe("cleanupGroup", () => { count++; }); - group.cleanup(); + group(); assert.equal(count, 2); }); it("should not execute cleanup functions more than once", () => { - const group = createCleanupGroup(); + const group = createCancelGroup(); let count = 0; group.add(() => { @@ -35,31 +35,31 @@ describe("cleanupGroup", () => { count++; }); - group.cleanup(); - group.cleanup(); + group(); + group(); assert.equal(count, 2); }); it("should allow adding cleanup functions after cleanup has been called", () => { - const group = createCleanupGroup(); + const group = createCancelGroup(); let count = 0; group.add(() => { count++; }); - group.cleanup(); + group(); group.add(() => { count++; }); - group.cleanup(); + group(); assert.equal(count, 2); }); it("should handle empty cleanup group", () => { - const group = createCleanupGroup(); - assert.doesNotThrow(() => group.cleanup()); + const group = createCancelGroup(); + assert.doesNotThrow(() => group()); }); }); diff --git a/typescript/packages/common-os-ui/src/shared/cancel.ts b/typescript/packages/common-os-ui/src/shared/cancel.ts new file mode 100644 index 000000000..75dd1b483 --- /dev/null +++ b/typescript/packages/common-os-ui/src/shared/cancel.ts @@ -0,0 +1,18 @@ +export type Cancel = () => void; + +export const createCancelGroup = () => { + const cancels: Set = new Set(); + + const cancel = () => { + for (const cancel of cancels) { + cancel(); + } + cancels.clear(); + }; + + cancel.add = (cancel: Cancel) => { + cancels.add(cancel); + }; + + return cancel; +}; diff --git a/typescript/packages/common-os-ui/src/shared/cleanup.ts b/typescript/packages/common-os-ui/src/shared/cleanup.ts deleted file mode 100644 index 0970f6a1f..000000000 --- a/typescript/packages/common-os-ui/src/shared/cleanup.ts +++ /dev/null @@ -1,18 +0,0 @@ -export type Cleanup = () => void; - -export const createCleanupGroup = () => { - const cleanups: Set = new Set(); - - const add = (cleanup: Cleanup) => { - cleanups.add(cleanup); - }; - - const cleanup = () => { - for (const cleanup of cleanups) { - cleanup(); - } - cleanups.clear(); - }; - - return { add, cleanup }; -}; From f823c842430e4d123d57e562f1c5e150dddea49d Mon Sep 17 00:00:00 2001 From: Gordon Brander Date: Thu, 17 Oct 2024 12:09:11 -0400 Subject: [PATCH 7/8] Allow configuration of source code and language --- .../code-editor/codemirror/utils.ts | 25 +++ .../components/code-editor/os-code-editor.ts | 144 ++++++++++-------- 2 files changed, 103 insertions(+), 66 deletions(-) create mode 100644 typescript/packages/common-os-ui/src/components/code-editor/codemirror/utils.ts diff --git a/typescript/packages/common-os-ui/src/components/code-editor/codemirror/utils.ts b/typescript/packages/common-os-ui/src/components/code-editor/codemirror/utils.ts new file mode 100644 index 000000000..da7705db2 --- /dev/null +++ b/typescript/packages/common-os-ui/src/components/code-editor/codemirror/utils.ts @@ -0,0 +1,25 @@ +import { EditorState } from "@codemirror/state"; +import { EditorView } from "codemirror"; + +export const replaceSource = (state: EditorState, value: string) => + state.update({ + changes: { + from: 0, + to: state.doc.length, + insert: value, + }, + }); + +/** Replace the source in this editor view, but only if it's different */ +export const replaceSourceIfNeeded = (view: EditorView, value: string) => { + if (view.state.doc.toString() === value) return; + view.update([ + view.state.update({ + changes: { + from: 0, + to: view.state.doc.length, + insert: value, + }, + }), + ]); +}; diff --git a/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts b/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts index 2b5581e47..7a8bf3b56 100644 --- a/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts +++ b/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts @@ -1,66 +1,69 @@ -import { css, html, render, adoptStyles } from "lit"; -import { customElement } from "lit/decorators.js"; +import { css, html, render, ReactiveElement, PropertyValues } from "lit"; +import { customElement, property } from "lit/decorators.js"; import { basicSetup, EditorView } from "codemirror"; -import { EditorState, Compartment } from "@codemirror/state"; -import { javascript } from "@codemirror/lang-javascript"; +import { EditorState, Compartment, Extension } from "@codemirror/state"; +import { LanguageSupport } from "@codemirror/language"; +import { javascript as createJavaScript } from "@codemirror/lang-javascript"; +import { markdown as createMarkdown } from "@codemirror/lang-markdown"; +import { css as createCss } from "@codemirror/lang-css"; +import { html as creatHtml } from "@codemirror/lang-html"; +import { json as createJson } from "@codemirror/lang-json"; import { oneDark } from "@codemirror/theme-one-dark"; -import { createStore, Store, ValueMsg, FxDriver } from "../../shared/store.js"; +import { replaceSourceIfNeeded } from "./codemirror/utils.js"; import { createCancelGroup } from "../../shared/cancel.js"; const freeze = Object.freeze; -export const MimeTypes = freeze({ +export const MimeType = freeze({ css: "text/css", html: "text/html", javascript: "text/javascript", + jsx: "text/x.jsx", typescript: "text/x.typescript", json: "application/json", markdown: "text/markdown", } as const); -export type MimeType = (typeof MimeTypes)[keyof typeof MimeTypes]; - -export type SetText = ValueMsg<"setText", string>; - -export type Msg = SetText; - -export type Model = { - lang: MimeType; - text: string; +export type MimeType = (typeof MimeType)[keyof typeof MimeType]; + +export const langRegistry = new Map(); +const markdownLang = createMarkdown({ + defaultCodeLanguage: createJavaScript({ jsx: true }), +}); +const defaultLang = markdownLang; + +langRegistry.set(MimeType.javascript, createJavaScript()); +langRegistry.set( + MimeType.jsx, + createJavaScript({ + jsx: true, + }), +); +langRegistry.set( + MimeType.typescript, + createJavaScript({ + jsx: true, + typescript: true, + }), +); +langRegistry.set(MimeType.css, createCss()); +langRegistry.set(MimeType.html, creatHtml()); +langRegistry.set(MimeType.markdown, markdownLang); +langRegistry.set(MimeType.json, createJson()); + +export const getLangExtFromMimeType = (mime: MimeType) => { + return langRegistry.get(mime) ?? defaultLang; }; -export const model = ({ - lang = MimeTypes.javascript, - text = "", +export const createEditor = ({ + element, + extensions = [], }: { - lang?: MimeType; - text?: string; -}): Model => - freeze({ - lang, - text, - }); - -export const update = (state: Model, _msg: Msg): Model => { - return state; -}; - -export const createFx = - (): FxDriver => (_state: Model, _msg: Msg) => { - return []; - }; - -export const createEditor = ({ element }: { element: HTMLElement }) => { - const language = new Compartment(); - const tabSize = new Compartment(); - + element: HTMLElement; + extensions?: Array; +}) => { const state = EditorState.create({ - extensions: [ - basicSetup, - oneDark, - language.of(javascript()), - tabSize.of(EditorState.tabSize.of(4)), - ], + extensions: [basicSetup, oneDark, ...extensions], }); return new EditorView({ @@ -70,7 +73,7 @@ export const createEditor = ({ element }: { element: HTMLElement }) => { }; @customElement("os-code-editor") -export class OsCodeEditor extends HTMLElement { +export class OsCodeEditor extends ReactiveElement { static styles = [ css` :host { @@ -87,36 +90,45 @@ export class OsCodeEditor extends HTMLElement { `, ]; - #shadow: ShadowRoot; + #editorView: EditorView | undefined = undefined; + #lang = new Compartment(); + #tabSize = new Compartment(); + destroy = createCancelGroup(); - #store: Store; - #editorView: EditorView; - constructor() { - super(); - // Set up shadow and styles - this.#shadow = this.attachShadow({ mode: "closed" }); - adoptStyles(this.#shadow, OsCodeEditor.styles); + @property({ type: String }) + source = ""; + @property({ type: String }) + lang = MimeType.markdown; + + protected firstUpdated(changedProperties: PropertyValues): void { + super.firstUpdated(changedProperties); // Set up skeleton // - #editor is managed by ProseMirror // - #reactive is rendered via Lit templates and driven by store updates - render(html`
`, this.#shadow); - - const editorRoot = this.#shadow.querySelector("#editor") as HTMLElement; - - this.#store = createStore({ - state: model({}), - update, - }); - const cleanupRender = this.#store.sink(() => {}); - this.destroy.add(cleanupRender); + render(html`
`, this.renderRoot); + const editorRoot = this.renderRoot.querySelector("#editor") as HTMLElement; this.#editorView = createEditor({ element: editorRoot, + extensions: [ + this.#lang.of(defaultLang), + this.#tabSize.of(EditorState.tabSize.of(4)), + ], }); - this.destroy.add(() => this.#editorView.destroy()); + this.destroy.add(() => this.#editorView?.destroy()); } - render() {} + protected updated(changedProperties: PropertyValues): void { + if (changedProperties.has("source")) { + replaceSourceIfNeeded(this.#editorView!, this.source); + } + if (changedProperties.has("lang")) { + const lang = getLangExtFromMimeType(this.lang); + this.#editorView?.dispatch({ + effects: this.#lang.reconfigure(lang), + }); + } + } } From b35a0adc737e7419bd1cac1a3c5d56437cb87843 Mon Sep 17 00:00:00 2001 From: Gordon Brander Date: Thu, 17 Oct 2024 12:40:03 -0400 Subject: [PATCH 8/8] Expose editor state get/set --- .../src/components/code-editor/os-code-editor.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts b/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts index 7a8bf3b56..645c70263 100644 --- a/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts +++ b/typescript/packages/common-os-ui/src/components/code-editor/os-code-editor.ts @@ -102,6 +102,14 @@ export class OsCodeEditor extends ReactiveElement { @property({ type: String }) lang = MimeType.markdown; + get editor(): EditorState | undefined { + return this.#editorView?.state; + } + + set editor(state: EditorState) { + this.#editorView?.setState(state); + } + protected firstUpdated(changedProperties: PropertyValues): void { super.firstUpdated(changedProperties); // Set up skeleton