qword 1.0.2 → 1.1.0

package/client/history.js

@@ -0,0 +1,16 @@
+import {history, historyKeymap} from '@codemirror/commands';
+import {keymap} from '@codemirror/view';
+
+export function clearHistory(view, historyCompartment, vimEnabled) {
+    if (!view)
+        return;
+    
+    view.dispatch({
+        effects: historyCompartment.reconfigure(vimEnabled
+            ? []
+            : [
+                history(),
+                keymap.of(historyKeymap),
+            ]),
+    });
+}

package/client/history.spec.js

@@ -0,0 +1,57 @@
+import {test} from 'supertape';
+import {EditorState, Compartment} from '@codemirror/state';
+import {EditorView, keymap} from '@codemirror/view';
+import {history, historyKeymap} from '@codemirror/commands';
+import {clearHistory} from './history.js';
+
+const historyExtensions = [
+    history(),
+    keymap.of(historyKeymap),
+];
+
+function makeView() {
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const compartment = new Compartment();
+    
+    const view = new EditorView({
+        state: EditorState.create({
+            doc: 'hello',
+            extensions: [
+                compartment.of(historyExtensions),
+            ],
+        }),
+        parent: element,
+    });
+    
+    return {
+        view,
+        compartment,
+    };
+}
+
+test('history: clearHistory does not throw', (t) => {
+    const {view, compartment} = makeView();
+    clearHistory(view, compartment, false);
+    view.destroy();
+    
+    t.ok(true);
+    t.end();
+});
+
+test('history: clearHistory with vim does not throw', (t) => {
+    const {view, compartment} = makeView();
+    clearHistory(view, compartment, true);
+    view.destroy();
+    
+    t.ok(true);
+    t.end();
+});
+
+test('history: clearHistory null view does not throw', (t) => {
+    const {compartment} = makeView();
+    clearHistory(null, compartment, false);
+    
+    t.ok(true);
+    t.end();
+});

package/client/index.d.ts

@@ -0,0 +1,60 @@
+export {
+    createEditor,
+    type CreateEditorOptions,
+    type QwordEditorView,
+} from './create.js';
+export {
+    getValue,
+    setValue,
+    getDocValue,
+    setDocValue,
+} from './content.js';
+export {
+    offsetToPosition,
+    positionToOffset,
+    posFromIndex,
+    indexFromPos,
+    getCursorIndex,
+    getCursor,
+} from './position.js';
+export {
+    markField,
+    lineField,
+    markText,
+    addLineClass,
+    removeLineClass,
+    type MarkHandle,
+} from './decorations.js';
+export {
+    on,
+    off,
+    type EventBinding,
+} from './events.js';
+export {
+    getScrollInfo,
+    scrollTo,
+    type ScrollInfo,
+} from './scroll.js';
+export {
+    getView,
+    refresh,
+    observeResize,
+} from './dom.js';
+export {
+    keymapExtension,
+    themeExtension,
+    languageExtension,
+    setOption,
+    type OptionKey,
+    type OptionValue,
+} from './options.js';
+export {clearHistory} from './history.js';
+export {highlightStyle} from './highlight.js';
+export type {
+    SourceCode,
+    SourcePosition,
+    CharOffset,
+    EditorMode,
+    EditorTheme,
+    KeyMap,
+} from './types.js';

package/client/index.js

@@ -0,0 +1,37 @@
+export {createEditor} from './create.js';
+export {
+    getValue,
+    setValue,
+    getDocValue,
+    setDocValue,
+} from './content.js';
+export {
+    offsetToPosition,
+    positionToOffset,
+    posFromIndex,
+    indexFromPos,
+    getCursorIndex,
+    getCursor,
+} from './position.js';
+export {
+    markField,
+    lineField,
+    markText,
+    addLineClass,
+    removeLineClass,
+} from './decorations.js';
+export {on, off} from './events.js';
+export {getScrollInfo, scrollTo} from './scroll.js';
+export {
+    getView,
+    refresh,
+    observeResize,
+} from './dom.js';
+export {
+    keymapExtension,
+    themeExtension,
+    languageExtension,
+    setOption,
+} from './options.js';
+export {clearHistory} from './history.js';
+export {highlightStyle} from './highlight.js';

package/client/loadremote.js

@@ -59,11 +59,17 @@ export default async (name, options = {}) => {
         local = [module.local];
     }
     
-    local = local.map((url) => prefix + url);
+    local = [];
     
-    const remote = remoteTmpls.map((tmpl) => {
-        return tmpl.replace(/{{\sversion\s}}/g, version);
-    });
+    for (const url of local) {
+        local.push(prefix + url);
+    }
+    
+    const remote = [];
+    
+    for (const tmpl of remoteTmpls) {
+        remote.push(tmpl.replace(/{{\sversion\s}}/g, version));
+    }
     
     if (!online)
         return await off(local);

package/client/options.d.ts

@@ -0,0 +1,30 @@
+import {type Compartment, type Extension} from '@codemirror/state';
+import type {QwordEditorView} from './create.js';
+import type {
+    KeyMap,
+    EditorMode,
+    EditorTheme,
+} from './types.js';
+
+export function keymapExtension(name: KeyMap): Extension;
+
+export function themeExtension(name: EditorTheme): Extension;
+
+export function languageExtension(mode: EditorMode | {
+    name: EditorMode;
+    json?: boolean;
+} | null): Extension;
+
+export type OptionKey = 'theme' | 'keyMap' | 'mode';
+
+export type OptionValue =
+    | EditorTheme
+    | KeyMap
+    | EditorMode
+    | {
+        name: EditorMode;
+        json?: boolean;
+    }
+    | null;
+
+export function setOption(view: QwordEditorView, key: OptionKey, value: OptionValue): void;

package/client/options.js

@@ -0,0 +1,59 @@
+import {keymap} from '@codemirror/view';
+import {javascript} from '@codemirror/lang-javascript';
+import {json} from '@codemirror/lang-json';
+import {html} from '@codemirror/lang-html';
+import {vim} from '@replit/codemirror-vim';
+import {nord} from '@uiw/codemirror-theme-nord';
+import {
+    defaultKeymap,
+    emacsStyleKeymap,
+} from '@codemirror/commands';
+
+export function keymapExtension(name) {
+    if (name === 'vim')
+        return vim();
+    
+    if (name === 'emacs')
+        return keymap.of(emacsStyleKeymap);
+    
+    return keymap.of(defaultKeymap);
+}
+
+export function themeExtension(name) {
+    if (name === 'nord' || name === 'dark' || name === 'one-dark')
+        return nord;
+    
+    return [];
+}
+
+export function languageExtension(mode) {
+    const name = typeof mode === 'object' ? mode?.name : mode;
+    
+    if (name === 'javascript' || name === 'js')
+        return javascript();
+    
+    if (name === 'json')
+        return json();
+    
+    if (name === 'html')
+        return html();
+    
+    return [];
+}
+
+export function setOption(view, key, value) {
+    if (key === 'theme')
+        return view.dispatch({
+            effects: view._themeCompartment.reconfigure(themeExtension(value)),
+        });
+    
+    if (key === 'keyMap')
+        return view.dispatch({
+            effects: view._keymapCompartment.reconfigure(keymapExtension(value)),
+        });
+    
+    if (key === 'mode')
+        return view.dispatch({
+            effects: view._langCompartment.reconfigure(languageExtension(value)),
+        });
+}

package/client/options.spec.js

@@ -0,0 +1,157 @@
+import {test} from 'supertape';
+import {EditorState, Compartment} from '@codemirror/state';
+import {EditorView} from '@codemirror/view';
+import {
+    keymapExtension,
+    themeExtension,
+    languageExtension,
+    setOption,
+} from './options.js';
+
+function makeView() {
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const view = new EditorView({
+        state: EditorState.create({
+            doc: 'hello',
+        }),
+        parent: element,
+    });
+    
+    view._themeCompartment = new Compartment();
+    view._keymapCompartment = new Compartment();
+    view._langCompartment = new Compartment();
+    
+    return view;
+}
+
+test('options: keymapExtension default returns extension object', (t) => {
+    const result = keymapExtension('default');
+    
+    t.ok(result);
+    t.end();
+});
+
+test('options: keymapExtension vim returns extension object', (t) => {
+    const result = keymapExtension('vim');
+    
+    t.ok(result);
+    t.end();
+});
+
+test('options: keymapExtension emacs returns extension object', (t) => {
+    const result = keymapExtension('emacs');
+    
+    t.ok(result);
+    t.end();
+});
+
+test('options: themeExtension nord returns nord theme object', (t) => {
+    const result = themeExtension('nord');
+    
+    t.ok(result);
+    t.end();
+});
+
+test('options: themeExtension dark returns nord theme', (t) => {
+    const result = themeExtension('dark');
+    
+    t.equal(result, themeExtension('nord'));
+    t.end();
+});
+
+test('options: themeExtension one-dark returns nord theme', (t) => {
+    const result = themeExtension('one-dark');
+    
+    t.equal(result, themeExtension('nord'));
+    t.end();
+});
+
+test('options: themeExtension default returns empty array', (t) => {
+    const result = themeExtension('default');
+    const expected = [];
+    
+    t.deepEqual(result, expected);
+    t.end();
+});
+
+test('options: languageExtension javascript returns extension object', (t) => {
+    const result = languageExtension('javascript');
+    
+    t.ok(result);
+    t.end();
+});
+
+test('options: languageExtension js returns javascript extension', (t) => {
+    const result = languageExtension('js');
+    
+    t.ok(result);
+    t.end();
+});
+
+test('options: languageExtension json returns extension', (t) => {
+    const result = languageExtension('json');
+    
+    t.ok(result);
+    t.end();
+});
+
+test('options: languageExtension html returns extension', (t) => {
+    const result = languageExtension('html');
+    
+    t.ok(result);
+    t.end();
+});
+
+test('options: languageExtension object with javascript name returns extension', (t) => {
+    const result = languageExtension({
+        name: 'javascript',
+        json: true,
+    });
+    
+    t.ok(result);
+    t.end();
+});
+
+test('options: languageExtension unknown string returns empty array', (t) => {
+    const result = languageExtension('css');
+    const expected = [];
+    
+    t.deepEqual(result, expected);
+    t.end();
+});
+
+test('options: languageExtension null returns empty array', (t) => {
+    const result = languageExtension(null);
+    const expected = [];
+    
+    t.deepEqual(result, expected);
+    t.end();
+});
+
+test('options: setOption theme dispatches without throwing', (t) => {
+    const view = makeView();
+    setOption(view, 'theme', 'nord');
+    view.destroy();
+    
+    t.ok(true);
+    t.end();
+});
+
+test('options: setOption keyMap dispatches without throwing', (t) => {
+    const view = makeView();
+    setOption(view, 'keyMap', 'vim');
+    view.destroy();
+    
+    t.ok(true);
+    t.end();
+});
+
+test('options: setOption mode dispatches without throwing', (t) => {
+    const view = makeView();
+    setOption(view, 'mode', 'javascript');
+    view.destroy();
+    
+    t.ok(true);
+    t.end();
+});

package/client/position.d.ts

@@ -0,0 +1,21 @@
+import type {Text} from '@codemirror/state';
+import type {EditorView} from '@codemirror/view';
+import type {
+    CharOffset,
+    SourcePosition,
+} from './types.js';
+
+export function offsetToPosition(document_: Text, offset: CharOffset): SourcePosition;
+
+export function positionToOffset(document_: Text, {line, ch}: SourcePosition): CharOffset;
+
+export function posFromIndex(view: EditorView, index: CharOffset): SourcePosition;
+
+export function indexFromPos(view: EditorView, position: SourcePosition): CharOffset;
+
+export function getCursor(view: EditorView): {
+    row: number;
+    column: number;
+};
+
+export function getCursorIndex(view: EditorView): CharOffset;

package/client/position.js

@@ -0,0 +1,33 @@
+export function offsetToPosition(document_, offset) {
+    const index = offset < 0 ? 0 : offset > document_.length ? document_.length : offset;
+    const line = document_.lineAt(index);
+    
+    return {
+        line: line.number - 1,
+        ch: index - line.from,
+    };
+}
+
+export function positionToOffset(document_, {line, ch}) {
+    return document_.line(line + 1).from + ch;
+}
+
+export function posFromIndex(view, index) {
+    return offsetToPosition(view.state.doc, index);
+}
+
+export function indexFromPos(view, position) {
+    return positionToOffset(view.state.doc, position);
+}
+
+export function getCursor(view) {
+    const index = getCursorIndex(view);
+    const position = offsetToPosition(view.state.doc, index);
+    
+    return {
+        row: position.line,
+        column: position.ch,
+    };
+}
+
+export const getCursorIndex = (view) => view.state.selection.main.head;

package/client/position.spec.js

@@ -0,0 +1,176 @@
+import {test} from 'supertape';
+import {EditorState} from '@codemirror/state';
+import {EditorView} from '@codemirror/view';
+import {
+    offsetToPosition,
+    positionToOffset,
+    posFromIndex,
+    indexFromPos,
+    getCursorIndex,
+    getCursor,
+} from './position.js';
+
+function makeView(document_ = 'hello\nworld') {
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    
+    return new EditorView({
+        state: EditorState.create({
+            doc: document_,
+        }),
+        parent: element,
+    });
+}
+
+test('position: offsetToPosition line 0 ch 0 for offset 0', (t) => {
+    const view = makeView();
+    const result = offsetToPosition(view.state.doc, 0);
+    
+    const expected = {
+        line: 0,
+        ch: 0,
+    };
+    
+    view.destroy();
+    
+    t.deepEqual(result, expected);
+    t.end();
+});
+
+test('position: offsetToPosition line 1 ch 0 for start of second line', (t) => {
+    const view = makeView();
+    const result = offsetToPosition(view.state.doc, 6);
+    
+    const expected = {
+        line: 1,
+        ch: 0,
+    };
+    
+    view.destroy();
+    
+    t.deepEqual(result, expected);
+    t.end();
+});
+
+test('position: positionToOffset 0 for line 0 ch 0', (t) => {
+    const view = makeView();
+    const result = positionToOffset(view.state.doc, {
+        line: 0,
+        ch: 0,
+    });
+    
+    const expected = 0;
+    
+    view.destroy();
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('position: positionToOffset 6 for start of second line', (t) => {
+    const view = makeView();
+    const result = positionToOffset(view.state.doc, {
+        line: 1,
+        ch: 0,
+    });
+    
+    const expected = 6;
+    
+    view.destroy();
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('position: posFromIndex returns correct position', (t) => {
+    const view = makeView();
+    const result = posFromIndex(view, 6);
+    
+    const expected = {
+        line: 1,
+        ch: 0,
+    };
+    
+    view.destroy();
+    
+    t.deepEqual(result, expected);
+    t.end();
+});
+
+test('position: indexFromPos returns correct offset', (t) => {
+    const view = makeView();
+    const result = indexFromPos(view, {
+        line: 1,
+        ch: 0,
+    });
+    
+    const expected = 6;
+    
+    view.destroy();
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('position: offsetToPosition clamps negative offset to start', (t) => {
+    const view = makeView();
+    const result = offsetToPosition(view.state.doc, -1);
+    
+    const expected = {
+        line: 0,
+        ch: 0,
+    };
+    
+    view.destroy();
+    
+    t.deepEqual(result, expected);
+    t.end();
+});
+
+test('position: offsetToPosition clamps offset beyond end to end', (t) => {
+    const view = makeView();
+    const result = offsetToPosition(view.state.doc, 999);
+    
+    const expected = {
+        line: 1,
+        ch: 5,
+    };
+    
+    view.destroy();
+    
+    t.deepEqual(result, expected);
+    t.end();
+});
+
+test('position: getCursorIndex returns a number', (t) => {
+    const view = makeView();
+    const result = typeof getCursorIndex(view);
+    const expected = 'number';
+    
+    view.destroy();
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('position: getCursor returns row and column', (t) => {
+    const view = makeView();
+    
+    view.dispatch({
+        selection: {
+            anchor: 6,
+        },
+    });
+    
+    const result = getCursor(view);
+    
+    const expected = {
+        row: 1,
+        column: 0,
+    };
+    
+    view.destroy();
+    
+    t.deepEqual(result, expected);
+    t.end();
+});