qword 1.0.2 → 1.1.0

package/client/editor.js

@@ -0,0 +1,164 @@
+import Emitify from 'emitify';
+import {createEditor} from './create.js';
+import {getValue, setValue} from './content.js';
+import {
+    posFromIndex,
+    getCursorIndex,
+    getCursor,
+} from './position.js';
+import {
+    markText,
+    addLineClass,
+    removeLineClass,
+} from './decorations.js';
+import {setOption} from './options.js';
+import {clearHistory} from './history.js';
+import {observeResize} from './dom.js';
+
+export default class Editor {
+    #view;
+    #vimEnabled = false;
+    #savedValue = '';
+    #emitter;
+    constructor(element, options = {}) {
+        this.#emitter = Emitify();
+        
+        this.#view = createEditor(element, {
+            ...options,
+            updateListener: (update) => {
+                if (update.docChanged)
+                    this.#emitter.emit('change', {
+                        value: this.getValue(),
+                        cursor: this.getCursorIndex(),
+                    });
+                
+                if (update.selectionSet)
+                    this.#emitter.emit('cursorMove', this.getCursorIndex());
+            },
+        });
+        
+        observeResize(this.#view, element);
+    }
+    
+    getValue() {
+        return getValue(this.#view);
+    }
+    
+    setValue(value) {
+        setValue(this.#view, value);
+        return this;
+    }
+    
+    getCursorIndex() {
+        return getCursorIndex(this.#view);
+    }
+    
+    getCursor() {
+        return getCursor(this.#view);
+    }
+    
+    posFromIndex(index) {
+        return posFromIndex(this.#view, index);
+    }
+    
+    focus() {
+        this.#view.focus();
+        return this;
+    }
+    
+    moveCursorTo(row, column = 0) {
+        const line = this.#view.state.doc.line(row + 1);
+        
+        this.#view.dispatch({
+            selection: {
+                anchor: line.from + column,
+            },
+            scrollIntoView: true,
+        });
+        
+        return this;
+    }
+    
+    markRange(from, to, className) {
+        return markText(this.#view, from, to, {
+            className,
+        });
+    }
+    
+    addLineClass(line, className) {
+        addLineClass(this.#view, line, 'text', className);
+        return this;
+    }
+    
+    removeLineClass(line, className) {
+        removeLineClass(this.#view, line, 'text', className);
+        return this;
+    }
+    
+    setOption(name, value) {
+        if (name === 'keyMap')
+            this.#vimEnabled = value === 'vim';
+        
+        setOption(this.#view, name, value);
+        return this;
+    }
+    
+    setMode(mode) {
+        return this.setOption('mode', mode);
+    }
+    
+    setTheme(theme) {
+        return this.setOption('theme', theme);
+    }
+    
+    setKeyMap(name) {
+        return this.setOption('keyMap', name);
+    }
+    
+    setModeForPath(path) {
+        return this.setMode(path
+            .split('.')
+            .pop());
+    }
+    
+    isChanged() {
+        return this.getValue() !== this.#savedValue;
+    }
+    
+    clearHistory() {
+        clearHistory(
+            this.#view,
+            this.#view._historyCompartment,
+            this.#vimEnabled,
+        );
+        return this;
+    }
+    
+    on(event, handler) {
+        this.#emitter.on(event, handler);
+        return this;
+    }
+    
+    addListener(event, handler) {
+        return this.on(event, handler);
+    }
+    
+    once(event, handler) {
+        this.#emitter.once(event, handler);
+        return this;
+    }
+    
+    removeListener(event, handler) {
+        this.#emitter.removeListener(event, handler);
+        return this;
+    }
+    
+    emit(...args) {
+        this.#emitter.emit(...args);
+        return this;
+    }
+    
+    get _view() {
+        return this.#view;
+    }
+}

package/client/editor.spec.js

@@ -0,0 +1,307 @@
+import {test} from 'supertape';
+import {once} from 'events';
+import Editor from './editor.js';
+
+function makeEditor(options = {}) {
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    
+    return new Editor(element, options);
+}
+
+test('Editor: getValue returns document string', (t) => {
+    const editor = makeEditor({
+        value: 'hello',
+    });
+    
+    const result = editor.getValue();
+    const expected = 'hello';
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('Editor: setValue returns this', (t) => {
+    const editor = makeEditor();
+    
+    const result = editor.setValue('xyz');
+    
+    t.equal(result, editor);
+    t.end();
+});
+
+test('Editor: setValue updates content', (t) => {
+    const editor = makeEditor();
+    editor.setValue('xyz');
+    
+    const result = editor.getValue();
+    const expected = 'xyz';
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('Editor: getCursorIndex returns a number', (t) => {
+    const editor = makeEditor({
+        value: 'hello',
+    });
+    
+    const result = typeof editor.getCursorIndex();
+    const expected = 'number';
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('Editor: getCursor returns row number', (t) => {
+    const editor = makeEditor({
+        value: 'hello',
+    });
+    
+    const cursor = editor.getCursor();
+    const result = typeof cursor.row;
+    const expected = 'number';
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('Editor: getCursor returns column number', (t) => {
+    const editor = makeEditor({
+        value: 'hello',
+    });
+    
+    const cursor = editor.getCursor();
+    const result = typeof cursor.column;
+    const expected = 'number';
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('Editor: posFromIndex returns position', (t) => {
+    const editor = makeEditor({
+        value: 'hello world',
+    });
+    
+    const result = editor.posFromIndex(6);
+    
+    const expected = {
+        line: 0,
+        ch: 6,
+    };
+    
+    t.deepEqual(result, expected);
+    t.end();
+});
+
+test('Editor: focus returns this', (t) => {
+    const editor = makeEditor();
+    
+    const result = editor.focus();
+    
+    t.equal(result, editor);
+    t.end();
+});
+
+test('Editor: moveCursorTo returns this', (t) => {
+    const editor = makeEditor({
+        value: 'hello',
+    });
+    
+    const result = editor.moveCursorTo(0, 0);
+    
+    t.equal(result, editor);
+    t.end();
+});
+
+test('Editor: markRange returns object with clear function', (t) => {
+    const editor = makeEditor({
+        value: 'hello world',
+    });
+    
+    const mark = editor.markRange({
+        line: 0,
+        ch: 0,
+    }, {
+        line: 0,
+        ch: 5,
+    }, 'marked');
+    
+    const result = typeof mark.clear;
+    const expected = 'function';
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('Editor: markRange takes index positions', (t) => {
+    const editor = makeEditor({
+        value: 'hello world',
+    });
+    
+    const mark = editor.markRange({
+        line: 0,
+        ch: 0,
+    }, {
+        line: 0,
+        ch: 5,
+    }, 'marked');
+    
+    const result = typeof mark.clear;
+    const expected = 'function';
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('Editor: addLineClass returns this', (t) => {
+    const editor = makeEditor({
+        value: 'hello',
+    });
+    
+    const result = editor.addLineClass(0, 'errorMarker');
+    const expected = editor;
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('Editor: removeLineClass returns this', (t) => {
+    const editor = makeEditor({
+        value: 'hello',
+    });
+    
+    editor.addLineClass(0, 'errorMarker');
+    const result = editor.removeLineClass(0, 'errorMarker');
+    const expected = editor;
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('Editor: setOption emacs does not throw', (t) => {
+    const editor = makeEditor();
+    editor.setOption('keyMap', 'emacs');
+    
+    t.ok(true);
+    t.end();
+});
+
+test('Editor: setOption keyMap vim sets vim mode', (t) => {
+    const editor = makeEditor();
+    editor.setOption('keyMap', 'vim');
+    
+    t.ok(true);
+    t.end();
+});
+
+test('Editor: setMode returns this', (t) => {
+    const editor = makeEditor();
+    
+    const result = editor.setMode('json');
+    
+    t.equal(result, editor);
+    t.end();
+});
+
+test('Editor: setTheme returns this', (t) => {
+    const editor = makeEditor();
+    
+    const result = editor.setTheme('nord');
+    
+    t.equal(result, editor);
+    t.end();
+});
+
+test('Editor: setKeyMap returns this', (t) => {
+    const editor = makeEditor();
+    
+    const result = editor.setKeyMap('emacs');
+    
+    t.equal(result, editor);
+    t.end();
+});
+
+test('Editor: setModeForPath sets mode', (t) => {
+    const editor = makeEditor();
+    
+    const result = editor.setModeForPath('/path/to/file.json');
+    
+    t.equal(result, editor);
+    t.end();
+});
+
+test('Editor: isChanged false for clean editor', (t) => {
+    const editor = makeEditor();
+    const result = editor.isChanged();
+    
+    t.notOk(result);
+    t.end();
+});
+
+test('Editor: isChanged true after setValue', (t) => {
+    const editor = makeEditor();
+    editor.setValue('changed');
+    const result = editor.isChanged();
+    
+    t.ok(result);
+    t.end();
+});
+
+test('Editor: clearHistory returns this', (t) => {
+    const editor = makeEditor();
+    
+    const result = editor.clearHistory();
+    
+    t.equal(result, editor);
+    t.end();
+});
+
+test('Editor: on change event emits value and cursor', async (t) => {
+    const editor = makeEditor({
+        value: 'hello',
+    });
+    
+    const promise = once(editor, 'change');
+    
+    editor.setValue('changed');
+    const [data] = await promise;
+    const result = typeof data.value;
+    const expected = 'string';
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('Editor: addListener is alias for on', (t) => {
+    const editor = makeEditor();
+    let called = false;
+    
+    editor.addListener('change', () => {
+        called = true;
+    });
+    editor.setValue('x');
+    
+    t.ok(called);
+    t.end();
+});
+
+test('Editor: emit calls registered handler', async (t) => {
+    const editor = makeEditor();
+    let received = null;
+    const [value] = await once(editor, 'custom');
+    
+    received = value;
+    editor.emit('custom', 'hello');
+    
+    t.equal(received, 'hello');
+    t.end();
+});
+
+test('Editor: _view getter returns EditorView', (t) => {
+    const editor = makeEditor();
+    
+    t.ok(editor._view);
+    t.end();
+});

package/client/events.d.ts

@@ -0,0 +1,7 @@
+import type {EditorView} from '@codemirror/view';
+
+export type EventBinding = [string, EventListener];
+
+export function on(view: EditorView, event: string, handler: EventListener): EventBinding;
+
+export function off(view: EditorView, event: string, handler: EventListener): void;

package/client/events.js

@@ -0,0 +1,8 @@
+export function on(view, event, handler) {
+    view.contentDOM.addEventListener(event, handler);
+    return [event, handler];
+}
+
+export function off(view, event, handler) {
+    view.contentDOM.removeEventListener(event, handler);
+}

package/client/events.spec.js

@@ -0,0 +1,100 @@
+import {test} from 'supertape';
+import {EditorState} from '@codemirror/state';
+import {EditorView} from '@codemirror/view';
+import {on, off} from './events.js';
+
+function makeView() {
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    
+    return new EditorView({
+        state: EditorState.create({
+            doc: 'hello',
+        }),
+        parent: element,
+    });
+}
+
+test('events: on returns tuple of event name and handler', (t) => {
+    const view = makeView();
+    const handler = () => {};
+    const result = on(view, 'blur', handler);
+    const expected = ['blur', handler];
+    
+    view.destroy();
+    
+    t.deepEqual(result, expected);
+    t.end();
+});
+
+test('events: on fires handler when event dispatched on contentDOM', (t) => {
+    const view = makeView();
+    let fired = false;
+    
+    const [eventName, handler] = on(view, 'blur', () => {
+        fired = true;
+    });
+    
+    view.contentDOM.dispatchEvent(new FocusEvent('blur'));
+    off(view, eventName, handler);
+    view.destroy();
+    
+    t.ok(fired);
+    t.end();
+});
+
+test('events: off removes handler from contentDOM', (t) => {
+    const view = makeView();
+    let count = 0;
+    
+    const [eventName, handler] = on(view, 'blur', () => {
+        count++;
+    });
+    
+    off(view, eventName, handler);
+    view.contentDOM.dispatchEvent(new FocusEvent('blur'));
+    view.destroy();
+    
+    t.equal(count, 0);
+    t.end();
+});
+
+test('events: handler fires on contentDOM blur (not view.dom)', (t) => {
+    const view = makeView();
+    let fired = false;
+    
+    const [eventName, handler] = on(view, 'blur', () => {
+        fired = true;
+    });
+    
+    // Dispatch on contentDOM (the actual focusable element)
+    view.contentDOM.dispatchEvent(new FocusEvent('blur'));
+    
+    view.destroy();
+    off(view, eventName, handler);
+    
+    t.ok(fired, 'handler should fire when blur dispatched on contentDOM');
+    t.end();
+});
+
+test('events: handler does NOT fire when event dispatched only on view.dom wrapper', (t) => {
+    const view = makeView();
+    let fired = false;
+    
+    const [eventName, handler] = on(view, 'blur', () => {
+        fired = true;
+    });
+    
+    // Dispatch on view.dom (outer wrapper) - should NOT trigger handler
+    // since listener is on contentDOM, and events dispatched on view.dom
+    // won't bubble down to contentDOM
+    view.dom.dispatchEvent(new FocusEvent('blur', {
+        bubbles: false,
+    }));
+    
+    view.destroy();
+    off(view, eventName, handler);
+    
+    t.notOk(fired, 'handler should NOT fire when event only on view.dom wrapper');
+    t.end();
+});

package/client/highlight.d.ts

@@ -0,0 +1,3 @@
+import {HighlightStyle} from '@codemirror/language';
+
+export const highlightStyle: HighlightStyle;

package/client/highlight.js

@@ -0,0 +1,82 @@
+import {HighlightStyle} from '@codemirror/language';
+import {tags} from '@lezer/highlight';
+
+export const highlightStyle = HighlightStyle.define([{
+    tag: tags.keyword,
+    class: 'hl-keyword',
+}, {
+    tag: tags.definitionKeyword,
+    class: 'hl-keyword',
+}, {
+    tag: tags.controlKeyword,
+    class: 'hl-keyword',
+}, {
+    tag: tags.moduleKeyword,
+    class: 'hl-module-keyword',
+}, {
+    tag: tags.operatorKeyword,
+    class: 'hl-operator',
+}, {
+    tag: tags.string,
+    class: 'hl-string',
+}, {
+    tag: tags.number,
+    class: 'hl-number',
+}, {
+    tag: tags.integer,
+    class: 'hl-number',
+}, {
+    tag: tags.float,
+    class: 'hl-number',
+}, {
+    tag: tags.bool,
+    class: 'hl-constant',
+}, {
+    tag: tags.null,
+    class: 'hl-constant',
+}, {
+    tag: tags.comment,
+    class: 'hl-comment',
+}, {
+    tag: tags.lineComment,
+    class: 'hl-comment',
+}, {
+    tag: tags.blockComment,
+    class: 'hl-comment',
+}, {
+    tag: tags.variableName,
+    class: 'hl-name',
+}, {
+    tag: tags.function(tags.variableName),
+    class: 'hl-function',
+}, {
+    tag: tags.definition(tags.variableName),
+    class: 'hl-name',
+}, {
+    tag: tags.propertyName,
+    class: 'hl-name',
+}, {
+    tag: tags.className,
+    class: 'hl-class',
+}, {
+    tag: tags.typeName,
+    class: 'hl-type',
+}, {
+    tag: tags.operator,
+    class: 'hl-operator',
+}, {
+    tag: tags.punctuation,
+    class: 'hl-punctuation',
+}, {
+    tag: tags.regexp,
+    class: 'hl-regexp',
+}, {
+    tag: tags.escape,
+    class: 'hl-escape',
+}, {
+    tag: tags.tagName,
+    class: 'hl-tag',
+}, {
+    tag: tags.attributeName,
+    class: 'hl-attr',
+}]);

package/client/highlight.spec.js

@@ -0,0 +1,28 @@
+import {test} from 'supertape';
+import {highlightStyle} from './highlight.js';
+
+test('highlight: highlightStyle is defined', (t) => {
+    t.ok(highlightStyle);
+    t.end();
+});
+
+test('highlight: highlightStyle has specs array', (t) => {
+    const result = Array.isArray(highlightStyle.specs);
+    
+    t.ok(result);
+    t.end();
+});
+
+test('highlight: highlightStyle has keyword class', (t) => {
+    const hasKeyword = highlightStyle.specs.some((s) => s.class === 'hl-keyword');
+    
+    t.ok(hasKeyword);
+    t.end();
+});
+
+test('highlight: highlightStyle has function class', (t) => {
+    const hasFunction = highlightStyle.specs.some((s) => s.class === 'hl-function');
+    
+    t.ok(hasFunction);
+    t.end();
+});

package/client/history.d.ts

@@ -0,0 +1,4 @@
+import type {Compartment} from '@codemirror/state';
+import type {EditorView} from '@codemirror/view';
+
+export function clearHistory(view: EditorView, historyCompartment: Compartment, vimEnabled: boolean): void;