qword 1.0.2 → 1.1.0

package/client/create.spec.js

@@ -0,0 +1,192 @@
+import {test} from 'supertape';
+import {createEditor} from './create.js';
+
+function makeContainer() {
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    
+    return element;
+}
+
+test('create: createEditor doc matches value option', (t) => {
+    const view = createEditor(makeContainer(), {
+        value: 'hello',
+    });
+    
+    const result = view.state.doc.toString();
+    const expected = 'hello';
+    
+    view.destroy();
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('create: createEditor readOnly true sets state readOnly', (t) => {
+    const view = createEditor(makeContainer(), {
+        readOnly: true,
+    });
+    
+    view.destroy();
+    
+    t.ok(view.state.readOnly);
+    t.end();
+});
+
+test('create: createEditor lineNumbers false does not throw', (t) => {
+    const view = createEditor(makeContainer(), {
+        lineNumbers: false,
+    });
+    
+    view.destroy();
+    
+    t.ok(view.state);
+    t.end();
+});
+
+test('create: createEditor foldGutter true does not throw', (t) => {
+    const view = createEditor(makeContainer(), {
+        foldGutter: true,
+    });
+    
+    view.destroy();
+    
+    t.ok(view.state);
+    t.end();
+});
+
+test('create: createEditor vim keyMap does not throw', (t) => {
+    const view = createEditor(makeContainer(), {
+        keyMap: 'vim',
+    });
+    
+    view.destroy();
+    
+    t.ok(view.state);
+    t.end();
+});
+
+test('create: createEditor emacs keyMap does not throw', (t) => {
+    const view = createEditor(makeContainer(), {
+        keyMap: 'emacs',
+    });
+    
+    view.destroy();
+    
+    t.ok(view.state);
+    t.end();
+});
+
+test('create: createEditor nord theme does not throw', (t) => {
+    const view = createEditor(makeContainer(), {
+        theme: 'nord',
+    });
+    
+    view.destroy();
+    
+    t.ok(view.state);
+    t.end();
+});
+
+test('create: createEditor json mode does not throw', (t) => {
+    const view = createEditor(makeContainer(), {
+        mode: 'json',
+    });
+    
+    view.destroy();
+    
+    t.ok(view.state);
+    t.end();
+});
+
+test('create: createEditor html mode does not throw', (t) => {
+    const view = createEditor(makeContainer(), {
+        mode: 'html',
+    });
+    
+    view.destroy();
+    
+    t.ok(view.state);
+    t.end();
+});
+
+test('create: createEditor mode object does not throw', (t) => {
+    const view = createEditor(makeContainer(), {
+        mode: {
+            name: 'javascript',
+            json: true,
+        },
+    });
+    
+    view.destroy();
+    
+    t.ok(view.state);
+    t.end();
+});
+
+test('create: createEditor updateListener is called on change', (t) => {
+    let called = false;
+    const view = createEditor(makeContainer(), {
+        updateListener: () => {
+            called = true;
+        },
+    });
+    
+    view.dispatch({
+        changes: {
+            from: 0,
+            to: 0,
+            insert: 'x',
+        },
+    });
+    view.destroy();
+    
+    t.ok(called);
+    t.end();
+});
+
+test('create: createEditor exposes themeCompartment on view', (t) => {
+    const view = createEditor(makeContainer());
+    view.destroy();
+    
+    t.ok(view._themeCompartment);
+    t.end();
+});
+
+test('create: createEditor exposes keymapCompartment on view', (t) => {
+    const view = createEditor(makeContainer());
+    view.destroy();
+    
+    t.ok(view._keymapCompartment);
+    t.end();
+});
+
+test('create: createEditor exposes langCompartment on view', (t) => {
+    const view = createEditor(makeContainer());
+    view.destroy();
+    
+    t.ok(view._langCompartment);
+    t.end();
+});
+
+test('create: createEditor exposes historyCompartment on view', (t) => {
+    const view = createEditor(makeContainer());
+    view.destroy();
+    
+    t.ok(view._historyCompartment);
+    t.end();
+});
+
+test('create: createEditor produces hl-keyword spans for javascript', (t) => {
+    const view = createEditor(makeContainer(), {
+        value: 'const x = 1;',
+        mode: 'javascript',
+    });
+    
+    const spans = view.dom.querySelectorAll('span.hl-keyword');
+    
+    view.destroy();
+    
+    t.ok(spans.length > 0);
+    t.end();
+});

package/client/decorations.d.ts

@@ -0,0 +1,40 @@
+import {
+    type Range,
+    StateEffect,
+    StateField,
+    type Transaction,
+} from '@codemirror/state';
+import {
+    Decoration,
+    EditorView,
+    type DecorationSet,
+} from '@codemirror/view';
+import type {SourcePosition} from './types.js';
+
+export const setMarkEffect: StateEffect<Range<Decoration>>;
+export const clearMarkEffect: StateEffect<null>;
+export const setLineEffect: StateEffect<{
+    line: number;
+    cls: string;
+}>;
+export const clearLineEffect: StateEffect<{
+    line: number;
+    cls: string;
+}>;
+
+export const markField: StateField<DecorationSet>;
+export const lineField: StateField<DecorationSet>;
+
+export type MarkHandle = {
+    clear: () => void;
+};
+
+export function markText(view: EditorView, from: SourcePosition, to: SourcePosition, {
+    className,
+}: {
+    className: string;
+}): MarkHandle;
+
+export function addLineClass(view: EditorView, line: number, _where: string, className: string): void;
+
+export function removeLineClass(view: EditorView, line: number, _where: string, className: string): void;

package/client/decorations.js

@@ -0,0 +1,110 @@
+import {StateEffect, StateField} from '@codemirror/state';
+import {EditorView, Decoration} from '@codemirror/view';
+import {positionToOffset} from './position.js';
+
+const noop = () => {};
+
+export const setMarkEffect = StateEffect.define();
+export const clearMarkEffect = StateEffect.define();
+export const setLineEffect = StateEffect.define();
+export const clearLineEffect = StateEffect.define();
+
+export const markField = StateField.define({
+    create: () => Decoration.none,
+    update(decorations, transaction) {
+        decorations = decorations.map(transaction.changes);
+        
+        for (const effect of transaction.effects) {
+            if (effect.is(setMarkEffect))
+                decorations = decorations.update({
+                    add: [effect.value],
+                    sort: true,
+                });
+            
+            if (effect.is(clearMarkEffect))
+                decorations = Decoration.none;
+        }
+        
+        return decorations;
+    },
+    provide: (field) => EditorView.decorations.from(field),
+});
+
+export const lineField = StateField.define({
+    create: () => Decoration.none,
+    update(decorations, transaction) {
+        decorations = decorations.map(transaction.changes);
+        
+        for (const effect of transaction.effects) {
+            if (effect.is(setLineEffect)) {
+                const {line, cls} = effect.value;
+                const {from} = transaction.state.doc.line(Math.min(line + 1, transaction.state.doc.lines));
+                
+                decorations = decorations.update({
+                    add: [
+                        Decoration
+                            .line({
+                                class: cls,
+                            })
+                            .range(from),
+                    ],
+                    sort: true,
+                });
+            }
+            
+            if (effect.is(clearLineEffect)) {
+                const {line, cls} = effect.value;
+                
+                decorations = decorations.update({
+                    filter: (from, _, decoration) => !(decoration.spec.class === cls && transaction.state.doc.lineAt(from).number === line + 1),
+                });
+            }
+        }
+        
+        return decorations;
+    },
+    provide: (field) => EditorView.decorations.from(field),
+});
+
+export function markText(view, from, to, {className}) {
+    const fromOffset = positionToOffset(view.state.doc, from);
+    const toOffset = positionToOffset(view.state.doc, to);
+    
+    if (fromOffset === toOffset)
+        return {
+            clear: noop,
+        };
+    
+    const decoration = Decoration
+        .mark({
+            class: className,
+        })
+        .range(fromOffset, toOffset);
+    
+    view.dispatch({
+        effects: setMarkEffect.of(decoration),
+    });
+    return {
+        clear: () => view.dispatch({
+            effects: clearMarkEffect.of(null),
+        }),
+    };
+}
+
+export function addLineClass(view, line, _where, className) {
+    view.dispatch({
+        effects: setLineEffect.of({
+            line,
+            cls: className,
+        }),
+    });
+}
+
+export function removeLineClass(view, line, _where, className) {
+    view.dispatch({
+        effects: clearLineEffect.of({
+            line,
+            cls: className,
+        }),
+    });
+}

package/client/decorations.spec.js

@@ -0,0 +1,135 @@
+import {test} from 'supertape';
+import {EditorState} from '@codemirror/state';
+import {EditorView} from '@codemirror/view';
+import {
+    markField,
+    lineField,
+    markText,
+    addLineClass,
+    removeLineClass,
+} from './decorations.js';
+
+function makeView(document_ = 'hello world') {
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    
+    return new EditorView({
+        state: EditorState.create({
+            doc: document_,
+            extensions: [markField, lineField],
+        }),
+        parent: element,
+    });
+}
+
+test('decorations: markText returns object with clear function', (t) => {
+    const view = makeView();
+    const mark = markText(view, {line: 0, ch: 0}, {line: 0, ch: 5}, {
+        className: 'marked',
+    });
+    
+    const result = typeof mark.clear;
+    const expected = 'function';
+    
+    view.destroy();
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('decorations: markText adds one decoration to markField', (t) => {
+    const view = makeView();
+    
+    markText(view, {line: 0, ch: 0}, {line: 0, ch: 5}, {
+        className: 'marked',
+    });
+    
+    view.destroy();
+    
+    t.equal(view.state.field(markField).size, 1);
+    t.end();
+});
+
+test('decorations: mark clear removes all decorations from markField', (t) => {
+    const view = makeView();
+    const mark = markText(view, {line: 0, ch: 0}, {line: 0, ch: 5}, {
+        className: 'marked',
+    });
+    
+    mark.clear();
+    
+    view.destroy();
+    
+    t.equal(view.state.field(markField).size, 0);
+    t.end();
+});
+
+test('decorations: markText returns a clear no-op for empty range', (t) => {
+    const view = makeView();
+    
+    markText(view, {line: 0, ch: 0}, {line: 0, ch: 0}, {
+        className: 'marked',
+    });
+    
+    view.destroy();
+    
+    t.equal(view.state.field(markField).size, 0);
+    t.end();
+});
+
+test('decorations: markText empty range clear does not throw', (t) => {
+    const view = makeView();
+    const mark = markText(view, {line: 0, ch: 0}, {line: 0, ch: 0}, {
+        className: 'marked',
+    });
+    
+    mark.clear();
+    
+    view.destroy();
+    
+    t.ok(mark.clear);
+    t.end();
+});
+
+test('decorations: addLineClass adds decoration to lineField', (t) => {
+    const view = makeView();
+    addLineClass(view, 0, 'text', 'errorMarker');
+    
+    view.destroy();
+    
+    t.equal(view.state.field(lineField).size, 1);
+    t.end();
+});
+
+test('decorations: removeLineClass removes decoration from lineField', (t) => {
+    const view = makeView();
+    addLineClass(view, 0, 'text', 'errorMarker');
+    removeLineClass(view, 0, 'text', 'errorMarker');
+    
+    view.destroy();
+    
+    t.equal(view.state.field(lineField).size, 0);
+    t.end();
+});
+
+test('decorations: removeLineClass for other line keeps decoration', (t) => {
+    const view = makeView('a\nb');
+    addLineClass(view, 0, 'text', 'errorMarker');
+    removeLineClass(view, 1, 'text', 'errorMarker');
+    
+    view.destroy();
+    
+    t.equal(view.state.field(lineField).size, 1);
+    t.end();
+});
+
+test('decorations: removeLineClass for other class keeps decoration', (t) => {
+    const view = makeView();
+    addLineClass(view, 0, 'text', 'errorMarker');
+    removeLineClass(view, 0, 'text', 'otherClass');
+    
+    view.destroy();
+    
+    t.equal(view.state.field(lineField).size, 1);
+    t.end();
+});

package/client/dom.d.ts

@@ -0,0 +1,7 @@
+import {EditorView} from '@codemirror/view';
+
+export function getView(container: HTMLElement): EditorView | null;
+
+export function refresh(view: EditorView): void;
+
+export function observeResize(view: EditorView, container: Element): () => void;

package/client/dom.js

@@ -0,0 +1,17 @@
+import {EditorView} from '@codemirror/view';
+
+export function getView(container) {
+    const element = container.querySelector('.cm-editor');
+    return element ? EditorView.findFromDOM(element) : null;
+}
+
+export function refresh(view) {
+    view.requestMeasure();
+}
+
+export function observeResize(view, container) {
+    const observer = new ResizeObserver(() => view.requestMeasure());
+    observer.observe(container);
+    
+    return () => observer.disconnect();
+}

package/client/dom.spec.js

@@ -0,0 +1,78 @@
+import {test} from 'supertape';
+import {EditorState} from '@codemirror/state';
+import {EditorView} from '@codemirror/view';
+import {
+    getView,
+    refresh,
+    observeResize,
+} from './dom.js';
+
+function makeViewInContainer() {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const view = new EditorView({
+        state: EditorState.create({
+            doc: 'hello',
+        }),
+        parent: container,
+    });
+    
+    return {
+        view,
+        container,
+    };
+}
+
+test('dom: getView returns EditorView from container', (t) => {
+    const {view, container} = makeViewInContainer();
+    const result = getView(container);
+    const expected = view;
+    
+    view.destroy();
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('dom: getView returns null for empty container', (t) => {
+    const container = document.createElement('div');
+    const result = getView(container);
+    
+    t.notOk(result);
+    t.end();
+});
+
+test('dom: refresh calls requestMeasure without throwing', (t) => {
+    const {view} = makeViewInContainer();
+    refresh(view);
+    
+    view.destroy();
+    
+    t.ok(true);
+    t.end();
+});
+
+test('dom: observeResize returns a function', (t) => {
+    const {view, container} = makeViewInContainer();
+    const cleanup = observeResize(view, container);
+    const result = typeof cleanup;
+    const expected = 'function';
+    
+    view.destroy();
+    cleanup();
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('dom: observeResize cleanup disconnects without throwing', (t) => {
+    const {view, container} = makeViewInContainer();
+    const cleanup = observeResize(view, container);
+    
+    cleanup();
+    
+    view.destroy();
+    
+    t.ok(true);
+    t.end();
+});

package/client/editor.d.ts

@@ -0,0 +1,72 @@
+import type {QwordEditorView} from './create.js';
+import type {CreateEditorOptions} from './create.js';
+import type {
+    MarkHandle,
+} from './decorations.js';
+import type {
+    OptionKey,
+    OptionValue,
+} from './options.js';
+import type {
+    SourceCode,
+    SourcePosition,
+    CharOffset,
+    KeyMap,
+    EditorMode,
+    EditorTheme,
+} from './types.js';
+
+export type EditorOptions = CreateEditorOptions;
+
+export default class Editor {
+    constructor(element: Element, options?: EditorOptions);
+
+    getValue(): SourceCode;
+
+    setValue(value: SourceCode): this;
+
+    getCursorIndex(): CharOffset;
+
+    getCursor(): {
+        row: number;
+        column: number;
+    };
+
+    posFromIndex(index: CharOffset): SourcePosition;
+
+    focus(): this;
+
+    moveCursorTo(row: number, column?: number): this;
+
+    markRange(from: SourcePosition, to: SourcePosition, className: string): MarkHandle;
+
+    addLineClass(line: number, className: string): this;
+
+    removeLineClass(line: number, className: string): this;
+
+    setOption(name: OptionKey, value: OptionValue): this;
+
+    setMode(mode: EditorMode): this;
+
+    setTheme(theme: EditorTheme): this;
+
+    setKeyMap(name: KeyMap): this;
+
+    setModeForPath(path: string): this;
+
+    isChanged(): boolean;
+
+    clearHistory(): this;
+
+    on(event: string, handler: (...args: unknown[]) => void): this;
+
+    addListener(event: string, handler: (...args: unknown[]) => void): this;
+
+    once(event: string, handler: (...args: unknown[]) => void): this;
+
+    removeListener(event: string, handler: (...args: unknown[]) => void): this;
+
+    emit(...args: unknown[]): this;
+
+    get _view(): QwordEditorView;
+}