@esportsplus/ui 0.57.0 → 0.58.0

package/scripts/code-editor-markdown.test.mjs

@@ -5,6 +5,7 @@ import './resolve.mjs';
 
 const { EditorDocument } = await import('../src/components/editor/code/document.ts');
 const { markdownCommand } = await import('../src/components/editor/markdown/editing.ts');
+const { reach, widen } = await import('../src/components/editor/markdown/erase.ts');
 const { sanitize } = await import('../src/components/editor/markdown/html.ts');
 const { clipInline, parseInline, safeUrl } = await import('../src/components/editor/markdown/inline.ts');
 const { arrange, cache, MarkdownLayout, SLICE_LINES, unitStart, WINDOW_LIMIT } = await import(
@@ -438,28 +439,23 @@ test('folds follow logical blocks; markers only look at neighbours', () => {
     assert.equal(foldable(list, list.length - 1, nested.value), false);
 });
 
-test('units leave folded blocks out, stand the field in for the active blocks and keep identity', () => {
+test('units leave folded blocks out and keep identity', () => {
     let source = '# A\n\ntext\n\n## B\n\nmore\n\n# C\nend',
         document = new EditorDocument(source),
         blocks = parseMarkdown(document),
         store = cache(),
         fold = foldAt(document, blocks, 0),
-        all = arrange(blocks, source, [], store, null, null),
-        folded = arrange(blocks, source, [fold], store, null, null);
+        all = arrange(blocks, source, [], store, null),
+        folded = arrange(blocks, source, [fold], store, null);
 
     assert.equal(all.length, blocks.length);
     assert.equal(folded[0].fold, fold);
     assert.ok(folded.every((unit) => unitStart(unit) < fold.from || unitStart(unit) >= fold.to));
     assert.equal(unitStart(folded[1]), source.indexOf('# C'));
 
-    let field = { active: true, block: blocks[2] },
-        active = arrange(blocks, source, [], store, { first: 2, last: 4, unit: field }, null);
+    assert.equal(arrange(blocks, source, [], store, null)[5], all[5]);
 
-    assert.equal(active.length, blocks.length - 1);
-    assert.equal(active[2], field);
-    assert.equal(arrange(blocks, source, [], store, null, null)[5], all[5]);
-
-    let raw = arrange(blocks, source, [], store, null, (index) => index === 2);
+    let raw = arrange(blocks, source, [], store, (index) => index === 2);
 
     assert.equal(raw[2].raw, true);
     assert.notEqual(raw[2], all[2]);
@@ -470,7 +466,7 @@ test('variable-height lookup and measurement stay bounded for ten thousand block
         blocks = parseMarkdown(document),
         layout = new MarkdownLayout();
 
-    layout.set(arrange(blocks, document.value, [], cache(), null, null), document.value);
+    layout.set(arrange(blocks, document.value, [], cache(), null), document.value);
     layout.configure({ charWidth: 8, fontSize: 13, lineHeight: 20, quoteIndent: 10, width: 600 });
 
     assert.ok(blocks.length >= 10000);
@@ -504,7 +500,7 @@ test('large logical blocks draw as bounded slices that cover the whole source',
     let source = '```ts\r\n' + Array.from({ length: 5000 }, (_, i) => `const x${i} = ${i};\r\n`).join('') + '```',
         document = new EditorDocument(source),
         blocks = parseMarkdown(document),
-        units = arrange(blocks, source, [], cache(), null, null);
+        units = arrange(blocks, source, [], cache(), null);
 
     assert.equal(blocks.length, 1);
     assert.ok(units.length > 100);
@@ -515,13 +511,48 @@ test('large logical blocks draw as bounded slices that cover the whole source',
     assert.deepEqual(blocksAt(blocks, { end: unitStart(units[90]), start: unitStart(units[90]) }), { first: 0, last: 1 });
 
     let line = new EditorDocument('```\n' + 'x'.repeat(20000) + '\n```'),
-        lines = arrange(parseMarkdown(line), line.value, [], cache(), null, null);
+        lines = arrange(parseMarkdown(line), line.value, [], cache(), null);
 
     assert.equal(lines.length, 1);
 
     let paragraph = new EditorDocument('y'.repeat(20000)),
-        pieces = arrange(parseMarkdown(paragraph), paragraph.value, [], cache(), null, null);
+        pieces = arrange(parseMarkdown(paragraph), paragraph.value, [], cache(), null);
 
     assert.ok(pieces.length >= 3);
     assert.equal(pieces.map((unit) => unit.rows.map((row) => paragraph.value.slice(row.contentFrom, row.contentTo)).join('')).join(''), paragraph.value);
 });
+
+test('deletion takes the visible character past hidden markup, and a line break with the markup around it', () => {
+    let text = 'a **b** c',
+        spans = [{ from: 0, to: 2 }, { from: 4, to: 5 }, { from: 7, to: 9 }];
+
+    assert.deepEqual(reach(text, spans, 4, true), { from: 1, to: 2 });
+    assert.deepEqual(reach(text, spans, 5, true), { from: 4, to: 5 });
+    assert.deepEqual(reach(text, spans, 7, true), { from: 4, to: 5 });
+    assert.deepEqual(reach(text, spans, 5, false), { from: 7, to: 8 });
+    assert.deepEqual(reach(text, spans, 0, true), null);
+    assert.deepEqual(reach(text, spans, 9, false), null);
+
+    let quote = '> one\n> two',
+        rows = [{ from: 2, to: 5 }, { from: 8, to: 11 }];
+
+    assert.deepEqual(reach(quote, rows, 8, true), { from: 5, to: 8 });
+    assert.deepEqual(reach(quote, rows, 5, false), { from: 5, to: 8 });
+    assert.deepEqual(reach('x 👍🏽', [{ from: 0, to: 6 }], 6, true), { from: 2, to: 6 });
+});
+
+test('a deletion that empties emphasis or code takes its delimiters, outward through nesting', () => {
+    let text = 'a **b** c',
+        tokens = parseInline(text);
+
+    assert.deepEqual(widen(text, tokens, 0, { from: 4, to: 5 }), { from: 2, to: 7 });
+    assert.deepEqual(widen(text, tokens, 0, { from: 1, to: 2 }), { from: 1, to: 2 });
+
+    let nested = 'x ***y*** z';
+
+    assert.deepEqual(widen(nested, parseInline(nested), 0, { from: 5, to: 6 }), { from: 2, to: 9 });
+
+    let code = 'run ``a`` now';
+
+    assert.deepEqual(widen(code, parseInline(code), 0, { from: 6, to: 7 }), { from: 4, to: 9 });
+});

package/scripts/code-viewer.test.mjs

@@ -0,0 +1,69 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import './resolve.mjs';
+
+
+const { hidden, outline } = await import('../src/components/editor/viewer/model.ts');
+
+
+const SOURCE = [
+    'export function apply(element) {',
+    '    for (let key of keys) {',
+    "        element.style.setProperty(key, '<b>');",
+    '    }',
+    '}',
+    ''
+].join('\n');
+
+
+test('outline highlights each line and escapes markup', () => {
+    let lines = outline(SOURCE, 'typescript');
+
+    assert.equal(lines.length, 6);
+    assert.match(lines[0].html, /^<span class="code-viewer-token--keyword">export<\/span>/);
+    assert.match(lines[2].html, /&lt;b&gt;/);
+    assert.doesNotMatch(lines[2].html, /<b>/);
+    assert.equal(lines[5].html, '');
+});
+
+test('outline leaves plain text unhighlighted', () => {
+    let lines = outline('pnpm add <pkg>', 'plain');
+
+    assert.deepEqual(lines, [{ end: -1, html: 'pnpm add &lt;pkg&gt;', text: 'pnpm add <pkg>', tokens: [] }]);
+});
+
+test('visible whitespace marks each space and tab, inside tokens too, keeping the characters', () => {
+    let [line] = outline("\tlet a = 'b c';", 'typescript', { whitespace: true });
+
+    assert.match(line.html, /^<span class="code-viewer-tab">\t<\/span>/);
+    assert.match(line.html, /'b<span class="code-viewer-space"> <\/span>c'/);
+    assert.equal(line.html.replace(/<[^>]+>/g, ''), "\tlet a = 'b c';");
+});
+
+test('bracket folds hide the body and keep the closing line', () => {
+    let lines = outline(SOURCE, 'typescript');
+
+    assert.equal(lines[0].end, 4);
+    assert.equal(lines[1].end, 3);
+    assert.equal(lines[2].end, -1);
+    assert.deepEqual(hidden(lines, new Set([0])), [false, true, true, true, false, false]);
+    assert.deepEqual(hidden(lines, new Set([1])), [false, false, true, false, false, false]);
+});
+
+test('a fold inside a folded one stays hidden when the outer one opens', () => {
+    let lines = outline(SOURCE, 'typescript');
+
+    assert.deepEqual(hidden(lines, new Set([0, 1])), [false, true, true, true, false, false]);
+    assert.deepEqual(hidden(lines, new Set([1])), [false, false, true, false, false, false]);
+});
+
+test('without folding no line starts a fold', () => {
+    assert.ok(outline(SOURCE, 'typescript', { fold: false }).every((line) => line.end === -1));
+});
+
+test('a markdown section at the end hides through the last line', () => {
+    let lines = outline('# Title\n\ntext\nmore', 'markdown');
+
+    assert.equal(lines[0].end, 4);
+    assert.deepEqual(hidden(lines, new Set([0])), [false, true, true, true]);
+});

package/scripts/workspace-keybindings.test.mjs

@@ -0,0 +1,273 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import './resolve.mjs';
+const { bind, conflict, declare, fromChord, fromRecorder, label, matches, merge, reset, rows, sanitize, sequence, unassign } =
+    await import('../src/components/editor/workspace/keybindings.ts');
+const { COMMANDS, keymap } = await import('../src/components/editor/code/keymap.ts');
+const { EditorWorkspaceModel } = await import('../src/components/editor/workspace/model.ts');
+const { createMemoryWorkspaceHost } = await import('../docs/src/examples/code-editor/fixtures/workspace.ts');
+const find = (list, id) => list.find((row) => row.id === id);
+const key = (key, modifiers = {}) => {
+    const event = {
+        altKey: false,
+        code: '',
+        ctrlKey: false,
+        defaultPrevented: false,
+        isComposing: false,
+        key,
+        metaKey: false,
+        propagationStopped: false,
+        shiftKey: false,
+        target: null,
+        ...modifiers,
+        preventDefault() {
+            event.defaultPrevented = true;
+        },
+        stopPropagation() {
+            event.propagationStopped = true;
+        }
+    };
+    return event;
+};
+// What the editor's keymap runs for a keydown under these keybindings.
+const runs = (keybindings, event) => keymap(false, keybindings)(event);
+
+test('rows list every command with its default chords and source', () => {
+    const list = rows({}, false);
+    assert.equal(list.length, COMMANDS.length);
+    assert.deepEqual(find(list, 'undo'), { builtin: [], chords: ['Mod+z'], id: 'undo', label: 'Undo', user: false });
+    assert.deepEqual(find(list, 'selectAllOccurrences').chords, ['Mod+Shift+a', 'Mod+Shift+l']);
+    assert.ok(list.every((row) => !row.user));
+});
+
+test('bind replaces a command\'s chords and the result drives the editor keymap', () => {
+    const next = bind({}, false, 'undo', 'Ctrl+Alt+u');
+    assert.deepEqual(next, { 'Mod+Alt+u': 'undo', 'Mod+z': null });
+    const row = find(rows(next, false), 'undo');
+    assert.deepEqual(row.chords, ['Mod+Alt+u']);
+    assert.equal(row.user, true);
+    assert.equal(runs(next, key('u', { altKey: true, ctrlKey: true })), 'undo');
+    assert.equal(runs(next, key('z', { ctrlKey: true })), null);
+});
+
+test('binding a chord back to its default leaves no override behind', () => {
+    const moved = bind({}, false, 'undo', 'Mod+Alt+u');
+    assert.deepEqual(bind(moved, false, 'undo', 'Mod+z'), {});
+});
+
+test('conflicts name the other owner; taking the chord unbinds it from that command only', () => {
+    assert.equal(conflict({}, false, 'undo', 'Mod+d'), 'nextOccurrence');
+    assert.equal(conflict({}, false, 'undo', 'Mod+z'), null);
+    assert.equal(conflict({}, false, 'undo', 'Mod+Alt+F12'), null);
+    const next = bind({}, false, 'undo', 'Mod+d');
+    assert.equal(find(rows(next, false), 'nextOccurrence').chords.length, 0);
+    assert.equal(find(rows(next, false), 'nextOccurrence').user, true);
+    assert.equal(runs(next, key('d', { ctrlKey: true })), 'undo');
+    const occurrences = bind({}, false, 'undo', 'Mod+Shift+l');
+    assert.deepEqual(find(rows(occurrences, false), 'selectAllOccurrences').chords, ['Mod+Shift+a']);
+});
+
+test('unassign removes defaults and user chords; reset restores one command; others keep taken chords', () => {
+    const cleared = unassign(bind({}, false, 'redo', 'Mod+Alt+r'), false, 'redo');
+    assert.deepEqual(find(rows(cleared, false), 'redo').chords, []);
+    assert.deepEqual(cleared, { 'Mod+Shift+z': null, 'Mod+y': null });
+    assert.deepEqual(reset(cleared, false, 'redo'), {});
+    const taken = bind(bind({}, false, 'undo', 'Mod+d'), false, 'nextOccurrence', 'Mod+Alt+n');
+    const restored = reset(taken, false, 'nextOccurrence');
+    assert.deepEqual(restored, { 'Mod+d': 'undo', 'Mod+z': null });
+    assert.deepEqual(find(rows(restored, false), 'nextOccurrence').chords, []);
+    assert.deepEqual(reset(restored, false, 'undo'), {});
+});
+
+test('bind leaves keybindings alone for a chord that does not parse', () => {
+    const keybindings = { 'Mod+z': null };
+    assert.equal(bind(keybindings, false, 'undo', 'Hyper+z'), keybindings);
+});
+
+test('recorder values convert to keymap chords and back on both platforms', () => {
+    assert.equal(fromRecorder('Mod+Shift+K', false), 'Mod+Shift+k');
+    assert.equal(fromRecorder('Mod+Alt+↓', false), 'Mod+Alt+ArrowDown');
+    assert.equal(fromRecorder('Mod+↵', false), 'Mod+Enter');
+    assert.equal(fromRecorder('Mod+Shift+{', false), 'Mod+Shift+[');
+    assert.equal(fromRecorder('Mod++', false), 'Mod++');
+    assert.equal(fromRecorder('Ctrl+Alt+Shift+Mod+K', true), 'Mod+Ctrl+Alt+Shift+k');
+    assert.equal(fromRecorder('', false), null);
+    assert.equal(fromChord('Mod+Alt+ArrowDown', false), 'Mod+Alt+↓');
+    assert.equal(fromChord('Mod+Ctrl+Alt+Shift+k', true), 'Ctrl+Alt+Shift+Mod+K');
+    assert.equal(fromChord('Mod+Enter', false), 'Mod+↵');
+    for (const { keys } of COMMANDS)
+        for (const chord of keys)
+            for (const apple of [false, true]) {
+                const normalized = fromRecorder(fromChord(chord, apple), apple);
+                assert.equal(fromRecorder(fromChord(normalized, apple), apple), normalized, chord);
+            }
+});
+
+test('labels read like the platform writes shortcuts', () => {
+    assert.equal(label('Mod+Shift+k', false), 'Ctrl+Shift+K');
+    assert.equal(label('Mod+Shift+k', true), '⇧⌘K');
+    assert.equal(label('Mod++', false), 'Ctrl++');
+    assert.equal(label('Alt+ArrowUp', true), '⌥↑');
+});
+
+test('search matches label, command id or chord in any spelling', () => {
+    const undo = find(rows({}, false), 'undo');
+    for (const query of ['', 'und', 'UNDO', 'mod+z', 'ctrl+z', '  Undo '])
+        assert.ok(matches(undo, query, false), query);
+    assert.ok(matches(undo, '⌘Z', true));
+    assert.ok(!matches(undo, 'redo', false));
+    assert.ok(!matches(undo, 'ctrl+y', false));
+});
+
+test('sanitize keeps parseable chords bound to known commands or null', () => {
+    assert.deepEqual(sanitize({ 'Mod+z': 'undo', 'Mod+q': null, 'Mod+x': 'explode', 'Hyper+z': 'undo', 'Mod+e': 4 }), {
+        'Mod+q': null,
+        'Mod+z': 'undo'
+    });
+    for (const value of [undefined, null, 'Mod+z', ['undo'], 4])
+        assert.deepEqual(sanitize(value), {});
+});
+
+test('merge lays the user keybindings over the editor options and keeps identity when there are none', () => {
+    const user = { 'Mod+z': null };
+    assert.equal(merge(undefined, user), user);
+    assert.deepEqual(merge({ 'Mod+z': 'redo', F2: 'toggleComment' }, user), { 'Mod+z': null, F2: 'toggleComment' });
+});
+
+test('model validates keybindings on load and in setPreferences, keeping the other preferences', async (t) => {
+    const host = createMemoryWorkspaceHost({ 'a.ts': 'a' }),
+        written = [];
+    host.preferences = {
+        get: async () => ({ keybindings: { 'Mod+z': 'undo', 'Mod+x': 'bogus', F2: 'toggleComment' }, wrapText: true }),
+        set: async (value) => {
+            written.push(value);
+        }
+    };
+    const model = new EditorWorkspaceModel(host, '/project', { keybindings: { 'Mod+y': 'nope' } });
+    t.after(() => model.dispose());
+    assert.deepEqual(model.state.preferences.keybindings, {});
+    await model.start();
+    assert.deepEqual(model.state.preferences.keybindings, { 'Mod+z': 'undo', F2: 'toggleComment' });
+    assert.equal(model.state.preferences.wrapText, true);
+    const before = model.state.preferences.keybindings;
+    model.setPreferences({ showWhitespace: true });
+    assert.equal(model.state.preferences.keybindings, before);
+    model.setPreferences({ keybindings: { 'Mod+k': 'deleteLine', 'Mod+j': 'unknown' } });
+    assert.deepEqual(model.state.preferences.keybindings, { 'Mod+k': 'deleteLine' });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    assert.deepEqual(written.at(-1).keybindings, { 'Mod+k': 'deleteLine' });
+});
+
+test('sequence waits for the second chord, consumes it, and times out', (t) => {
+    t.mock.timers.enable({ apis: ['setTimeout'] });
+    let opened = 0,
+        accepting = true;
+    const states = [],
+        chords = sequence({
+            accept: () => accepting,
+            actions: { 'Mod+s': () => opened++ },
+            apple: false,
+            onpending: (pending) => states.push(pending),
+            prefix: 'Mod+k'
+        });
+    const plain = key('s', { ctrlKey: true });
+    chords.keydown(plain);
+    assert.equal(plain.defaultPrevented, false);
+    const first = key('k', { ctrlKey: true });
+    chords.keydown(first);
+    assert.ok(first.defaultPrevented && first.propagationStopped);
+    assert.equal(chords.pending(), true);
+    chords.keydown(key('Control', { ctrlKey: true }));
+    assert.equal(chords.pending(), true);
+    const second = key('s', { ctrlKey: true });
+    chords.keydown(second);
+    assert.ok(second.defaultPrevented && second.propagationStopped);
+    assert.equal(opened, 1);
+    assert.deepEqual(states, [true, false]);
+    chords.keydown(key('k', { ctrlKey: true }));
+    const other = key('x');
+    chords.keydown(other);
+    assert.ok(other.defaultPrevented);
+    assert.equal(opened, 1);
+    chords.keydown(key('k', { ctrlKey: true }));
+    t.mock.timers.tick(1500);
+    assert.equal(chords.pending(), false);
+    assert.deepEqual(states, [true, false, true, false, true, false]);
+    accepting = false;
+    const outside = key('k', { ctrlKey: true });
+    chords.keydown(outside);
+    assert.equal(outside.defaultPrevented, false);
+    assert.equal(chords.pending(), false);
+    accepting = true;
+    chords.keydown(key('k', { metaKey: true }));
+    assert.equal(chords.pending(), false);
+    const apple = sequence({ accept: () => true, actions: { 'Mod+s': () => opened++ }, apple: true, prefix: 'Mod+k' });
+    apple.keydown(key('k', { metaKey: true }));
+    apple.keydown(key('s', { metaKey: true }));
+    assert.equal(opened, 2);
+    chords.keydown(key('k', { ctrlKey: true }));
+    chords.cancel();
+    assert.equal(chords.pending(), false);
+});
+
+test('sequence leaves a prefix it does not accept, and the key after it, untouched', () => {
+    let opened = 0;
+    const seen = [],
+        chords = sequence({
+            accept: (event) => {
+                seen.push(event.target);
+                return event.target === 'inside';
+            },
+            actions: { 'Mod+s': () => opened++ },
+            apple: false,
+            onpending: () => assert.fail('no chord should be pending'),
+            prefix: 'Mod+k'
+        });
+    for (const event of [key('k', { ctrlKey: true, target: 'outside' }), key('s', { ctrlKey: true, target: 'outside' }), key('a', { target: 'outside' })]) {
+        chords.keydown(event);
+        assert.equal(event.defaultPrevented, false);
+        assert.equal(event.propagationStopped, false);
+    }
+    assert.deepEqual(seen, ['outside']);
+    assert.equal(chords.pending(), false);
+    assert.equal(opened, 0);
+});
+
+test('built-in keys show read-only on commands the keymap leaves out, and count as conflicts', () => {
+    const list = rows({}, false);
+    for (const row of list)
+        assert.ok(row.chords.length || row.builtin.length || ['deleteLineEnd', 'splitLine', 'transpose'].includes(row.id), row.id);
+    assert.deepEqual(find(list, 'deleteCharacterBackward'), {
+        builtin: ['Backspace'],
+        chords: [],
+        id: 'deleteCharacterBackward',
+        label: 'Delete character before',
+        user: false
+    });
+    assert.deepEqual(find(list, 'deleteWordBackward').builtin, ['Mod+Backspace']);
+    assert.deepEqual(find(list, 'autocomplete').builtin, ['Mod+ ']);
+    assert.deepEqual(find(rows({}, true), 'deleteWordBackward').builtin, ['Alt+Backspace', 'Ctrl+Alt+h']);
+    assert.deepEqual(find(rows({}, true), 'deleteLineEnd').builtin, ['Ctrl+k']);
+    for (const row of rows({}, true))
+        assert.ok(row.chords.length || row.builtin.length, row.id);
+    assert.equal(label('Mod+ ', false), 'Ctrl+Space');
+    assert.ok(matches(find(list, 'deleteCharacterForward'), 'delete', false));
+    assert.ok(matches(find(list, 'autocomplete'), 'ctrl+space', false));
+    assert.equal(conflict({}, false, 'undo', 'Backspace'), 'deleteCharacterBackward');
+    assert.equal(conflict({}, false, 'deleteCharacterBackward', 'Backspace'), null);
+    const taken = bind({}, false, 'undo', 'Mod+Backspace');
+    assert.deepEqual(find(rows(taken, false), 'deleteWordBackward').builtin, []);
+    assert.equal(find(rows(taken, false), 'deleteWordBackward').user, false);
+    const added = bind({}, false, 'deleteCharacterBackward', 'Mod+Alt+b');
+    const row = find(rows(added, false), 'deleteCharacterBackward');
+    assert.deepEqual([row.chords, row.builtin, row.user], [['Mod+Alt+b'], ['Backspace'], true]);
+    assert.deepEqual(unassign(added, false, 'deleteCharacterBackward'), {});
+    assert.deepEqual(reset(added, false, 'deleteCharacterBackward'), {});
+});
+
+test('declare adds both Mod+K forms to aria-keyshortcuts and keeps what is there', () => {
+    assert.equal(declare(null, 'Mod+k'), 'Control+K Meta+K');
+    assert.equal(declare('', 'Mod+k'), 'Control+K Meta+K');
+    assert.equal(declare('Alt+L  control+k', 'Mod+k'), 'Alt+L control+k Meta+K');
+    assert.equal(declare(declare('F2', 'Mod+k'), 'Mod+k'), 'F2 Control+K Meta+K');
+});