From 35852924f88c0a0f9bd65111a8943e9ff4269efe Mon Sep 17 00:00:00 2001 From: Elizabeth Hunt Date: Mon, 5 Jan 2026 00:27:43 -0800 Subject: Editor update --- package-lock.json | 13 +++++++------ src/ts/editor-standalone.ts | 1 + src/ts/editor.ts | 34 ++++++++++++++++++++++++---------- src/types/global.d.ts | 1 + 4 files changed, 33 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index 87daca8..30985ed 100644 --- a/package-lock.json +++ b/package-lock.json @@ -329,9 +329,9 @@ } }, "node_modules/@emprespresso/codemirror-lang-tabloid": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@emprespresso/codemirror-lang-tabloid/-/codemirror-lang-tabloid-0.2.0.tgz", - "integrity": "sha512-9J1yGLXjkVdjhhFnhXMEdFYySk+7SmlrFX/ZMpRikR77EoOc3QAN1MiYafo5mrD6wKRkt0770A3MZsrJSU/ZhQ==", + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@emprespresso/codemirror-lang-tabloid/-/codemirror-lang-tabloid-0.2.1.tgz", + "integrity": "sha512-oXcEgA/DKMX3pqTpmT1ZiAgbXmaAIzAdhRNVHBZttfcoPmU/2qHHn7S0VYjta7pVG0v3NahdpCaz2nWLpI1W2Q==", "license": "MIT", "dependencies": { "@codemirror/autocomplete": "^6.20.0", @@ -1140,9 +1140,9 @@ } }, "node_modules/fs-extra": { - "version": "11.3.2", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.2.tgz", - "integrity": "sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A==", + "version": "11.3.3", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.3.tgz", + "integrity": "sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg==", "dev": true, "license": "MIT", "dependencies": { @@ -1636,6 +1636,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz", "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==", + "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation", "dev": true, "license": "MIT", "dependencies": { diff --git a/src/ts/editor-standalone.ts b/src/ts/editor-standalone.ts index 45e6573..905a3cf 100644 --- a/src/ts/editor-standalone.ts +++ b/src/ts/editor-standalone.ts @@ -1,3 +1,4 @@ +import type { EditorView } from 'codemirror'; import { createEditor, setEditorTheme } from './editor'; // Global API diff --git a/src/ts/editor.ts b/src/ts/editor.ts index 1c52569..3884317 100644 --- a/src/ts/editor.ts +++ b/src/ts/editor.ts @@ -1,15 +1,16 @@ -import { EditorView, minimalSetup } from 'codemirror'; -import { javascript } from '@codemirror/lang-javascript'; +import { closeBrackets } from '@codemirror/autocomplete'; import { css } from '@codemirror/lang-css'; import { html } from '@codemirror/lang-html'; +import { javascript } from '@codemirror/lang-javascript'; +import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'; +import { Compartment, EditorState } from '@codemirror/state'; +import { RangeSetBuilder } from '@codemirror/state'; +import { Decoration, GutterMarker, ViewPlugin, gutter } from '@codemirror/view'; +import type { DecorationSet, ViewUpdate } from '@codemirror/view'; import { tabloid } from '@emprespresso/codemirror-lang-tabloid'; -import { EditorState, Compartment } from '@codemirror/state'; -import { syntaxHighlighting, HighlightStyle } from '@codemirror/language'; import { tags } from '@lezer/highlight'; import { vim } from '@replit/codemirror-vim'; -import { ViewPlugin, Decoration, DecorationSet, gutter, GutterMarker } from '@codemirror/view'; -import { RangeSetBuilder } from '@codemirror/state'; -import { closeBrackets } from '@codemirror/autocomplete'; +import { EditorView, minimalSetup } from 'codemirror'; const themeConfig = new Compartment(); @@ -28,7 +29,7 @@ function highlightWhitespace() { this.decorations = this.buildDecorations(view); } - update(update: any) { + update(update: ViewUpdate) { if (update.docChanged || update.viewportChanged || update.selectionSet) { this.decorations = this.buildDecorations(update.view); } @@ -41,7 +42,7 @@ function highlightWhitespace() { // Only show whitespace in selected ranges if (!selection.empty) { const text = view.state.doc.sliceString(selection.from, selection.to); - let pos = selection.from; + const pos = selection.from; for (let i = 0; i < text.length; i++) { const char = text[i]; @@ -84,7 +85,7 @@ const relativeLineNumberGutter = ViewPlugin.fromClass( class { constructor(private view: EditorView) {} - update(update: any) { + update(update: ViewUpdate) { // Force update on selection change if (update.selectionSet || update.docChanged || update.viewportChanged) { this.view.requestMeasure(); @@ -160,10 +161,17 @@ const lightTheme = EditorView.theme({ border: 'none', borderRight: '1px solid var(--border)', }, + '.cm-lineNumbers': { + minWidth: '3ch', + }, + '.cm-lineNumbers .cm-gutterElement': { + width: '100%', + }, '.cm-activeLineGutter': { backgroundColor: 'var(--primary-light)', color: 'var(--text)', }, + '.cm-activeLine': { backgroundColor: 'rgba(229, 106, 166, 0.08)', }, @@ -206,6 +214,12 @@ const darkTheme = EditorView.theme( border: 'none', borderRight: '1px solid var(--border)', }, + '.cm-lineNumbers': { + minWidth: '3ch', + }, + '.cm-lineNumbers .cm-gutterElement': { + width: '100%', + }, '.cm-activeLineGutter': { backgroundColor: 'rgba(229, 106, 166, 0.2)', color: 'var(--text)', diff --git a/src/types/global.d.ts b/src/types/global.d.ts index 3c8c458..73e03e4 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -1,5 +1,6 @@ declare module 'prismjs'; declare module 'prismjs/components/*'; +declare module '@emprespresso/codemirror-lang-tabloid'; interface Window { ASSET_BASE?: string; -- cgit v1.2.3-70-g09d2