qword 1.0.3 → 1.1.0

package/ChangeLog

@@ -1,3 +1,17 @@
+2026.09.05, v1.1.0
+
+fix:
+- 34a981c client: clipboard
+
+feature:
+- 83e40e6 qword: cssnano v9.0.2
+- 2f29f72 types: add
+- 58fce83 migrate to rspack
+- 03bb806 qword: @lezer/highlight v1.2.3
+- c5cf54a qword: superc8 v12.7.0
+- 51d8bc5 editor: move out
+- 3d791d7 qword: @putout/plugin-convert-webpack-to-rspack v1.0.1
+
 2026.05.18, v1.0.3
 
 fix:

package/assets/style.css

@@ -1,18 +1,18 @@
 @font-face {
     font-family: 'Droid Sans Mono';
-    src: url(https://themes.googleusercontent.com/static/fonts/droidsansmono/v5/ns-m2xQYezAtqh7ai59hJTwtzT4qNq-faudv5qbO9-U.eot);
+    src: url('https://themes.googleusercontent.com/static/fonts/droidsansmono/v5/ns-m2xQYezAtqh7ai59hJTwtzT4qNq-faudv5qbO9-U.eot');
     src:
         local('Droid Sans Mono'),
         local('DroidSansMono'),
-        url(/font/DroidSansMono.eot) format('embedded-opentype'),
-        url(https://themes.googleusercontent.com/static/fonts/droidsansmono/v5/ns-m2xQYezAtqh7ai59hJTwtzT4qNq-faudv5qbO9-U.eot?#iefix)
-            format('embedded-opentype'),
-        url(https://themes.googleusercontent.com/static/fonts/droidsansmono/v5/ns-m2xQYezAtqh7ai59hJTwtzT4qNq-faudv5qbO9-U.eot)
-            format('embedded-opentype'),
-        url(/font/DroidSansMono.woff2) format('woff2'),
-        url(/font/DroidSansMono.woff) format('woff'),
-        url(https://themes.googleusercontent.com/static/fonts/droidsansmono/v5/ns-m2xQYezAtqh7ai59hJUYuTAAIFFn5GTWtryCmBQ4.woff)
-            format('woff'),
+        url('/font/DroidSansMono.eot') format('embedded-opentype'),
+        url('https://themes.googleusercontent.com/static/fonts/droidsansmono/v5/ns-m2xQYezAtqh7ai59hJTwtzT4qNq-faudv5qbO9-U.eot?#iefix')
+        format('embedded-opentype'),
+        url('https://themes.googleusercontent.com/static/fonts/droidsansmono/v5/ns-m2xQYezAtqh7ai59hJTwtzT4qNq-faudv5qbO9-U.eot')
+        format('embedded-opentype'),
+        url('/font/DroidSansMono.woff2') format('woff2'),
+        url('/font/DroidSansMono.woff') format('woff'),
+        url('https://themes.googleusercontent.com/static/fonts/droidsansmono/v5/ns-m2xQYezAtqh7ai59hJUYuTAAIFFn5GTWtryCmBQ4.woff')
+        format('woff'),
         local('Consolas');
     font-style: normal;
     font-weight: 400;

package/client/_clipboard.js

@@ -1,53 +1,50 @@
 import clipboard from '@cloudcmd/clipboard';
-import createElement from '@cloudcmd/create-element';
 import once from 'once';
-import _showMessageOnce from './show-message.js';
+import showMessage from './show-message.js';
 
-const resolve = Promise.resolve.bind(Promise);
-const reject = Promise.reject.bind(Promise);
-const showMessageOnce = once(_showMessageOnce);
+const showMessageOnce = once(showMessage);
 
-export default (cmd) => {
+export default function clipboardCommand(command) {
+    const {_view, _story} = this;
     const NAME = 'editor-clipboard';
-    const {_Ace, _story} = this;
     
-    const value = _Ace.getSelection('\n');
-    const insert = (a) => _Ace
-        .getDoc()
-        .replaceSelection(a);
+    const getSelected = () => {
+        const {from, to} = _view.state.selection.main;
+        return _view.state.sliceDoc(from, to);
+    };
+    
+    const insert = (text) => {
+        const {from, to} = _view.state.selection.main;
+        
+        _view.dispatch({
+            changes: {
+                from,
+                to,
+                insert: text,
+            },
+        });
+    };
     
-    if (cmd === 'copy') {
+    if (command === 'copy') {
+        const value = getSelected();
         _story.setData(NAME, value);
+        
         return clipboard.writeText(value);
     }
     
-    if (cmd === 'cut') {
+    if (command === 'cut') {
+        const value = getSelected();
         _story.setData(NAME, value);
-        return cut(value) ? resolve() : reject();
+        insert('');
+        
+        return clipboard.writeText(value);
     }
     
     return clipboard
         .readText()
         .then(insert)
         .catch(() => {
-            showMessageOnce('Could not paste from clipboard. Inner buffer used.');
-            
-            const value = _story.getData(NAME);
-            
-            insert(value);
+            showMessageOnce.call(this, 'Could not paste from clipboard. Inner buffer used.');
+            insert(_story.getData(NAME));
         });
-};
-
-function cut(value) {
-    const textarea = createElement('textarea', {
-        value,
-    });
-    
-    textarea.select();
-    
-    const result = document.execCommand('cut');
-    
-    document.body.removeChild(textarea);
-    
-    return result;
 }

package/client/_clipboard.spec.js

@@ -0,0 +1,160 @@
+import {test, stub} from 'supertape';
+
+test('clipboard: copy stores value in story', (t) => {
+    const story = createStoryStub();
+    const view = createViewStub('hello world');
+    
+    const clipboardFn = createClipboard({
+        story,
+        view,
+    });
+    
+    clipboardFn('copy');
+    
+    t.ok(story.setData.called, 'story.setData should be called');
+    t.end();
+});
+
+test('clipboard: copy calls clipboard.writeText', async (t) => {
+    const story = createStoryStub();
+    const view = createViewStub('selected text');
+    
+    const writeTextStub = stub().returns(Promise.resolve());
+    const clipboardFn = createClipboard({
+        story,
+        view,
+        writeText: writeTextStub,
+    });
+    
+    await clipboardFn('copy');
+    
+    t.calledWith(writeTextStub, ['selected text'], 'writeText should be called with selected text');
+    t.end();
+});
+
+test('clipboard: cut stores value in story', (t) => {
+    const story = createStoryStub();
+    const view = createViewStub('cut text');
+    
+    const clipboardFn = createClipboard({
+        story,
+        view,
+    });
+    
+    clipboardFn('cut');
+    
+    t.ok(story.setData.called, 'story.setData should be called');
+    t.end();
+});
+
+test('clipboard: paste reads from clipboard and inserts', async (t) => {
+    const story = createStoryStub();
+    const view = createViewStub('');
+    
+    const readTextStub = stub().returns(Promise.resolve('pasted content'));
+    const clipboardFn = createClipboard({
+        story,
+        view,
+        readText: readTextStub,
+    });
+    
+    await clipboardFn('paste');
+    
+    t.ok(view.dispatch.called, 'view.dispatch should be called');
+    t.end();
+});
+
+test('clipboard: paste falls back to story on clipboard error', async (t) => {
+    const story = createStoryStub();
+    
+    story.getData = stub().returns('fallback text');
+    
+    const view = createViewStub('');
+    
+    const readTextStub = stub().returns(Promise.reject(Error('denied')));
+    const clipboardFn = createClipboard({
+        story,
+        view,
+        readText: readTextStub,
+    });
+    
+    await clipboardFn('paste');
+    
+    t.ok(view.dispatch.called, 'view.dispatch should be called');
+    t.end();
+});
+
+const createStoryStub = () => ({
+    setData: stub(),
+    getData: stub().returns(''),
+});
+
+const createViewStub = (selectedText = '') => ({
+    state: {
+        selection: {
+            main: {
+                from: 0,
+                to: selectedText.length,
+            },
+        },
+        sliceDoc: () => selectedText,
+    },
+    dispatch: stub().returns(true),
+});
+
+function createClipboard({story, view, writeText, readText}) {
+    const clipboard = {
+        writeText: writeText || stub().returns(Promise.resolve()),
+        readText: readText || stub().returns(Promise.resolve('')),
+    };
+    
+    const showMessageOnce = stub();
+    
+    return (cmd) => {
+        const NAME = 'editor-clipboard';
+        
+        const value = view.state.sliceDoc(view.state.selection.main.from, view.state.selection.main.to);
+        
+        const insert = (text) => {
+            view.dispatch({
+                changes: {
+                    from: view.state.selection.main.from,
+                    to: view.state.selection.main.to,
+                    insert: text,
+                },
+            });
+        };
+        
+        if (cmd === 'copy') {
+            story.setData(NAME, value);
+            return clipboard.writeText(value);
+        }
+        
+        if (cmd === 'cut') {
+            story.setData(NAME, value);
+            return cut(view) ? Promise.resolve() : Promise.reject();
+        }
+        
+        return clipboard
+            .readText()
+            .then(insert)
+            .catch(() => {
+                showMessageOnce('Could not paste from clipboard. Inner buffer used.');
+                
+                const fallbackValue = story.getData(NAME);
+                
+                insert(fallbackValue);
+            });
+    };
+}
+
+function cut(view) {
+    view.dispatch({
+        changes: {
+            from: view.state.selection.main.from,
+            to: view.state.selection.main.to,
+            insert: '',
+        },
+    });
+    return true;
+}

package/client/content.d.ts

@@ -0,0 +1,8 @@
+import type {EditorView} from '@codemirror/view';
+import type {SourceCode} from './types.js';
+
+export function getValue(view: EditorView): SourceCode;
+export const getDocValue: typeof getValue;
+
+export function setValue(view: EditorView, value: SourceCode): void;
+export const setDocValue: typeof setValue;

package/client/content.js

@@ -0,0 +1,14 @@
+export const getValue = (view) => view.state.doc.toString();
+export const getDocValue = getValue;
+
+export function setValue(view, value) {
+    view.dispatch({
+        changes: {
+            from: 0,
+            to: view.state.doc.length,
+            insert: value,
+        },
+    });
+}
+
+export const setDocValue = setValue;

package/client/content.spec.js

@@ -0,0 +1,69 @@
+import {test} from 'supertape';
+import {EditorState} from '@codemirror/state';
+import {EditorView} from '@codemirror/view';
+import {
+    getValue,
+    setValue,
+    getDocValue,
+    setDocValue,
+} from './content.js';
+
+function makeView(doc = 'hello') {
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    
+    return new EditorView({
+        state: EditorState.create({
+            doc,
+        }),
+        parent: element,
+    });
+}
+
+test('content: getValue returns document string', (t) => {
+    const view = makeView('abc');
+    const result = getValue(view);
+    const expected = 'abc';
+    
+    view.destroy();
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('content: setValue replaces content', (t) => {
+    const view = makeView('abc');
+    setValue(view, 'xyz');
+    
+    const result = getValue(view);
+    const expected = 'xyz';
+    
+    view.destroy();
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('content: getDocValue aliases getValue', (t) => {
+    const view = makeView('abc');
+    const result = getDocValue(view);
+    const expected = 'abc';
+    
+    view.destroy();
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('content: setDocValue aliases setValue', (t) => {
+    const view = makeView('abc');
+    setDocValue(view, 'xyz');
+    
+    const result = getValue(view);
+    const expected = 'xyz';
+    
+    view.destroy();
+    
+    t.equal(result, expected);
+    t.end();
+});

package/client/create.d.ts

@@ -0,0 +1,32 @@
+import {Compartment} from '@codemirror/state';
+import {type ViewUpdate, EditorView} from '@codemirror/view';
+import type {
+    SourceCode,
+    KeyMap,
+    EditorMode,
+    EditorTheme,
+} from './types.js';
+
+export type CreateEditorOptions = {
+    value?: SourceCode;
+    mode?: EditorMode | {
+        name: EditorMode;
+        json?: boolean;
+    };
+    keyMap?: KeyMap;
+    theme?: EditorTheme;
+    lineNumbers?: boolean;
+    readOnly?: boolean;
+    foldGutter?: boolean;
+    updateListener?: (update: ViewUpdate) => void;
+};
+
+// Augmented EditorView with compartment refs for dynamic option changes.
+export type QwordEditorView = EditorView & {
+    _themeCompartment: Compartment;
+    _keymapCompartment: Compartment;
+    _langCompartment: Compartment;
+    _historyCompartment: Compartment;
+};
+
+export function createEditor(element: Element, options?: CreateEditorOptions): QwordEditorView;

package/client/create.js

@@ -0,0 +1,95 @@
+import {EditorState, Compartment} from '@codemirror/state';
+import {
+    EditorView,
+    lineNumbers as lineNumbersExtension,
+    drawSelection,
+    keymap,
+} from '@codemirror/view';
+import {history, historyKeymap} from '@codemirror/commands';
+import {
+    foldGutter,
+    codeFolding,
+    syntaxHighlighting,
+} from '@codemirror/language';
+import {highlightStyle} from './highlight.js';
+import {
+    keymapExtension,
+    themeExtension,
+    languageExtension,
+} from './options.js';
+import {markField, lineField} from './decorations.js';
+
+export function createEditor(element, options = {}) {
+    const {
+        value = '',
+        mode = 'javascript',
+        keyMap = 'default',
+        theme = 'default',
+        lineNumbers = true,
+        readOnly = false,
+        foldGutter: fold = false,
+        updateListener,
+    } = options;
+    
+    const themeCompartment = new Compartment();
+    const keymapCompartment = new Compartment();
+    const langCompartment = new Compartment();
+    const historyCompartment = new Compartment();
+    
+    const hideCursorOnBlur = EditorView.theme({
+        '&:not(.cm-focused) .cm-fat-cursor': {
+            display: 'none',
+        },
+    });
+    
+    const extensions = [
+        historyCompartment.of([
+            history(),
+            keymap.of(historyKeymap),
+        ]),
+        markField,
+        lineField,
+        themeCompartment.of(themeExtension(theme)),
+        keymapCompartment.of(keymapExtension(keyMap)),
+        langCompartment.of(languageExtension(mode)),
+        syntaxHighlighting(highlightStyle),
+        ...lineNumbers
+            ? [
+                lineNumbersExtension(),
+            ]
+            : [],
+        ...fold
+            ? [
+                foldGutter(),
+                codeFolding(),
+            ]
+            : [],
+        ...readOnly
+            ? [
+                EditorState.readOnly.of(true),
+            ]
+            : [],
+        ...updateListener
+            ? [
+                EditorView.updateListener.of(updateListener),
+            ]
+            : [],
+        drawSelection(),
+        hideCursorOnBlur,
+    ];
+    
+    const view = new EditorView({
+        state: EditorState.create({
+            doc: value,
+            extensions,
+        }),
+        parent: element,
+    });
+    
+    view._themeCompartment = themeCompartment;
+    view._keymapCompartment = keymapCompartment;
+    view._langCompartment = langCompartment;
+    view._historyCompartment = historyCompartment;
+    
+    return view;
+}

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();
+});