qword 1.1.11 → 1.1.13

package/client/editor.js

@@ -0,0 +1,178 @@
+import Emitify from 'emitify';
+import {EditorView} from '@codemirror/view';
+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;
+    }
+    
+    setOptions(options = {}) {
+        if (options.fontSize)
+            this._view.dispatch({
+                effects: this._view._themeCompartment.reconfigure(EditorView.theme({
+                    '&': {
+                        fontSize: `${options.fontSize}px`,
+                    },
+                })),
+            });
+        
+        return this;
+    }
+    
+    get _view() {
+        return this.#view;
+    }
+}

package/client/events.d.ts

@@ -0,0 +1,8 @@
+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/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/history.d.ts

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

package/client/history.js

@@ -0,0 +1,14 @@
+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/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,38 @@
+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,
+    indentKeymap,
+    setOption,
+} from './options.js';
+export {clearHistory} from './history.js';
+export {highlightStyle} from './highlight.js';

package/client/loadremote.js

@@ -0,0 +1,102 @@
+import load from 'load.js';
+import {tryToCatch} from 'try-to-catch';
+import once from 'once';
+
+const isString = (a) => typeof a === 'string';
+
+export const loadModules = once(async (prefix) => {
+    const url = `${prefix}/modules.json`;
+    return await load.json(url);
+});
+
+export const loadOptions = once(async (prefix) => {
+    const url = `${prefix}/options.json`;
+    return await load.json(url);
+});
+
+const on = async ({remote, local}) => {
+    const [error] = await tryToCatch(load.parallel, remote);
+    
+    if (error)
+        await off(local);
+};
+
+const off = async function(local) {
+    await load.parallel(local);
+};
+
+export default async (name, options = {}) => {
+    const o = options;
+    
+    const {prefix = ''} = o;
+    
+    if (o.name && global[o.name])
+        return;
+    
+    const promises = [
+        loadModules(prefix),
+        loadOptions(prefix),
+    ];
+    
+    const [error, [modules, config]] = await tryToCatch(Promise.all.bind(Promise), promises);
+    
+    let remoteTmpls;
+    let local;
+    
+    if (error)
+        return alert(`Error: could not load module or config: ${error.message}`);
+    
+    const online = config.online && navigator.onLine;
+    const module = binom(name, modules);
+    const isArray = Array.isArray(module.local);
+    const {version} = module;
+    
+    if (isArray) {
+        remoteTmpls = module.remote;
+        ({local} = module);
+    } else {
+        remoteTmpls = [module.remote];
+        local = [module.local];
+    }
+    
+    local = [];
+    
+    for (const url of local) {
+        local.push(prefix + url);
+    }
+    
+    const remote = [];
+    
+    for (const tmpl of remoteTmpls) {
+        remote.push(tmpl.replace(/{{\s*version\s*}}/g, version));
+    }
+    
+    if (!online)
+        return await off(local);
+    
+    await on({
+        remote,
+        local,
+    });
+};
+
+function binom(name, array) {
+    let ret;
+    
+    if (!isString(name))
+        throw Error('name should be string!');
+    
+    if (!Array.isArray(array))
+        throw Error('array should be array!');
+    
+    array.some((item) => {
+        const is = item.name === name;
+        
+        if (is)
+            ret = item;
+        
+        return is;
+    });
+    
+    return ret;
+}

package/client/options.d.ts

@@ -0,0 +1,31 @@
+import {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,70 @@
+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 {Prec} from '@codemirror/state';
+import {
+    defaultKeymap,
+    emacsStyleKeymap,
+    indentWithTab,
+    insertNewlineKeepIndent,
+} from '@codemirror/commands';
+
+const enterKeepIndent = {
+    key: 'Enter',
+    run: insertNewlineKeepIndent,
+};
+
+export function keymapExtension(name) {
+    if (name === 'vim')
+        return vim();
+    
+    if (name === 'emacs')
+        return keymap.of([...emacsStyleKeymap, indentWithTab]);
+    
+    return Prec.highest(keymap.of([enterKeepIndent, indentWithTab, ...defaultKeymap]));
+}
+
+export function themeExtension(name) {
+    if (name === 'nord' || name === 'dark' || name === 'one-dark')
+        return nord;
+    
+    return [];
+}
+
+export const indentKeymap = keymap.of([indentWithTab]);
+
+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/position.d.ts

@@ -0,0 +1,19 @@
+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;