@stephen-netu/design-system 0.1.0 → 0.2.0

package/dist/editor/components/CorrectionTooltip.svelte.d.ts

@@ -0,0 +1,33 @@
+interface Suggestion {
+    word: string;
+    from: number;
+    to: number;
+}
+interface Props {
+    view: {
+        coordsAtPos: (pos: number) => {
+            top: number;
+            left: number;
+            bottom: number;
+        } | null;
+        state: {
+            doc: {
+                sliceString: (from: number, to: number) => string;
+            };
+            selection: {
+                main: {
+                    from: number;
+                    to: number;
+                };
+            };
+        };
+    };
+    suggestion: Suggestion;
+    onAccept: (suggestion: string) => void;
+    onDismiss: () => void;
+    onAddToDictionary: () => void;
+}
+declare const CorrectionTooltip: import("svelte").Component<Props, {}, "">;
+type CorrectionTooltip = ReturnType<typeof CorrectionTooltip>;
+export default CorrectionTooltip;
+//# sourceMappingURL=CorrectionTooltip.svelte.d.ts.map

package/dist/editor/components/CorrectionTooltip.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CorrectionTooltip.svelte.d.ts","sourceRoot":"","sources":["../../../src/editor/components/CorrectionTooltip.svelte.ts"],"names":[],"mappings":"AAMI,UAAU,UAAU;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACd;AAED,UAAU,KAAK;IACX,IAAI,EAAE;QAAE,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK;YAAE,GAAG,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,GAAG,IAAI,CAAC;QAAC,KAAK,EAAE;YAAE,GAAG,EAAE;gBAAE,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,MAAM,CAAA;aAAE,CAAC;YAAC,SAAS,EAAE;gBAAE,IAAI,EAAE;oBAAE,IAAI,EAAE,MAAM,CAAC;oBAAC,EAAE,EAAE,MAAM,CAAA;iBAAE,CAAA;aAAE,CAAA;SAAE,CAAA;KAAE,CAAC;IACvN,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,iBAAiB,EAAE,MAAM,IAAI,CAAC;CACjC;AAwEL,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/editor/extensions/autocomplete.d.ts

@@ -0,0 +1,10 @@
+import { autocompletion, type CompletionSource } from '@codemirror/autocomplete';
+export { autocompletion };
+export type { CompletionSource };
+export interface AutocompleteConfig {
+    source: CompletionSource;
+    defaultKeymap?: boolean;
+    closeOnBlur?: boolean;
+}
+export declare function autocomplete(config: AutocompleteConfig): import("@codemirror/state").Extension;
+//# sourceMappingURL=autocomplete.d.ts.map

package/dist/editor/extensions/autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/editor/extensions/autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjF,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAEjC,MAAM,WAAW,kBAAkB;IAC/B,MAAM,EAAE,gBAAgB,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,kBAAkB,yCAMtD"}

package/dist/editor/extensions/autocomplete.js

@@ -0,0 +1,9 @@
+import { autocompletion } from '@codemirror/autocomplete';
+export { autocompletion };
+export function autocomplete(config) {
+    return autocompletion({
+        override: [config.source],
+        defaultKeymap: config.defaultKeymap ?? true,
+        closeOnBlur: config.closeOnBlur ?? true,
+    });
+}

package/dist/editor/extensions/autoformat.d.ts

@@ -0,0 +1,2 @@
+export declare function autoFormat(): import("@codemirror/state").Extension;
+//# sourceMappingURL=autoformat.d.ts.map

package/dist/editor/extensions/autoformat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autoformat.d.ts","sourceRoot":"","sources":["../../../src/editor/extensions/autoformat.ts"],"names":[],"mappings":"AAyDA,wBAAgB,UAAU,0CAgBzB"}

package/dist/editor/extensions/autoformat.js

@@ -0,0 +1,69 @@
+import { ChangeSet, EditorState } from '@codemirror/state';
+const REPLACEMENTS = {
+    '...': '\u2026',
+    '-->': '\u2192',
+    '->': '\u2192',
+    '<-': '\u2190',
+    '---': '\u2014',
+};
+const SMART_DOUBLE_OPEN = '\u201C';
+const SMART_DOUBLE_CLOSE = '\u201D';
+const SMART_SINGLE_OPEN = '\u2018';
+const SMART_SINGLE_CLOSE = '\u2019';
+function buildReplacementChanges(tr) {
+    if (!tr.docChanged)
+        return null;
+    const newDoc = tr.newDoc;
+    const changes = [];
+    tr.changes.iterChanges((_fromA, _toA, fromB, toB, inserted) => {
+        const insertedStr = inserted.toString();
+        if (insertedStr.length !== 1)
+            return;
+        const ch = insertedStr[0];
+        for (const [pattern, replacement] of Object.entries(REPLACEMENTS)) {
+            if (ch !== pattern[pattern.length - 1])
+                continue;
+            const checkFrom = fromB - pattern.length + 1;
+            if (checkFrom < 0)
+                continue;
+            const preceding = newDoc.sliceString(checkFrom, fromB);
+            if (preceding === pattern.slice(0, -1)) {
+                changes.push({ from: checkFrom, to: toB, insert: replacement });
+                return;
+            }
+        }
+        if (ch === '"') {
+            const prevCh = fromB > 0 ? newDoc.sliceString(fromB - 1, fromB) : ' ';
+            changes.push({
+                from: fromB,
+                to: toB,
+                insert: /\s/.test(prevCh) ? SMART_DOUBLE_OPEN : SMART_DOUBLE_CLOSE,
+            });
+        }
+        else if (ch === "'") {
+            const prevCh = fromB > 0 ? newDoc.sliceString(fromB - 1, fromB) : ' ';
+            changes.push({
+                from: fromB,
+                to: toB,
+                insert: /\s/.test(prevCh) ? SMART_SINGLE_OPEN : SMART_SINGLE_CLOSE,
+            });
+        }
+    });
+    return changes.length > 0 ? changes : null;
+}
+export function autoFormat() {
+    return EditorState.transactionFilter.of((tr) => {
+        const replacementChanges = buildReplacementChanges(tr);
+        if (!replacementChanges)
+            return tr;
+        const replacementCS = ChangeSet.of(replacementChanges, tr.newDoc.length);
+        const composed = tr.changes.compose(replacementCS);
+        const spec = {
+            changes: composed,
+            selection: tr.selection,
+            effects: tr.effects,
+            scrollIntoView: tr.scrollIntoView,
+        };
+        return spec;
+    });
+}

package/dist/editor/extensions/autoformat.test.js

@@ -0,0 +1,344 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { history, undo, redo } from '@codemirror/commands';
+import { autoFormat } from './autoformat';
+function createView(doc = '') {
+    return new EditorView({
+        state: EditorState.create({
+            doc,
+            extensions: [autoFormat(), history()],
+        }),
+        parent: document.body,
+    });
+}
+function typeAt(view, text, pos) {
+    const position = pos ?? view.state.doc.length;
+    view.dispatch({ changes: { from: position, insert: text } });
+}
+describe('autoFormat', () => {
+    let view;
+    afterEach(() => {
+        if (view)
+            view.destroy();
+    });
+    describe('ellipsis replacement (...)', () => {
+        it('replaces ... with … typed one char at a time', () => {
+            view = createView();
+            typeAt(view, '.');
+            expect(view.state.doc.toString()).toBe('.');
+            typeAt(view, '.');
+            expect(view.state.doc.toString()).toBe('..');
+            typeAt(view, '.');
+            expect(view.state.doc.toString()).toBe('\u2026');
+        });
+        it('replaces ... appended to existing text', () => {
+            view = createView('hello ');
+            typeAt(view, '.');
+            typeAt(view, '.');
+            typeAt(view, '.');
+            expect(view.state.doc.toString()).toBe('hello \u2026');
+        });
+        it('does not replace partial .. (only two dots)', () => {
+            view = createView();
+            typeAt(view, '.');
+            typeAt(view, '.');
+            expect(view.state.doc.toString()).toBe('..');
+        });
+        it('handles multiple ellipses in sequence', () => {
+            view = createView();
+            typeAt(view, '.');
+            typeAt(view, '.');
+            typeAt(view, '.');
+            expect(view.state.doc.toString()).toBe('\u2026');
+            typeAt(view, ' ');
+            typeAt(view, '.');
+            typeAt(view, '.');
+            typeAt(view, '.');
+            expect(view.state.doc.toString()).toBe('\u2026 \u2026');
+        });
+        it('handles ellipsis after other replaced text', () => {
+            view = createView();
+            typeAt(view, '-');
+            typeAt(view, '-');
+            typeAt(view, '-');
+            expect(view.state.doc.toString()).toContain('\u2014');
+            typeAt(view, ' ');
+            typeAt(view, '.');
+            typeAt(view, '.');
+            typeAt(view, '.');
+            expect(view.state.doc.toString()).toContain('\u2026');
+        });
+    });
+    describe('arrow replacement (-> and <-)', () => {
+        it('replaces --> with →', () => {
+            view = createView();
+            typeAt(view, '-');
+            expect(view.state.doc.toString()).toBe('-');
+            typeAt(view, '-');
+            expect(view.state.doc.toString()).toBe('--');
+            typeAt(view, '>');
+            expect(view.state.doc.toString()).toBe('\u2192');
+        });
+        it('replaces <- with ←', () => {
+            view = createView();
+            typeAt(view, '<');
+            typeAt(view, '-');
+            expect(view.state.doc.toString()).toBe('\u2190');
+        });
+        it('handles arrow after text', () => {
+            view = createView('go');
+            typeAt(view, '-');
+            typeAt(view, '-');
+            typeAt(view, '>');
+            expect(view.state.doc.toString()).toBe('go\u2192');
+        });
+        it('handles left arrow after text', () => {
+            view = createView('back');
+            typeAt(view, '<');
+            typeAt(view, '-');
+            expect(view.state.doc.toString()).toBe('back\u2190');
+        });
+    });
+    describe('em dash replacement (---)', () => {
+        it('replaces --- with —', () => {
+            view = createView();
+            typeAt(view, '-');
+            typeAt(view, '-');
+            typeAt(view, '-');
+            expect(view.state.doc.toString()).toBe('\u2014');
+        });
+        it('em dash after text', () => {
+            view = createView('word');
+            typeAt(view, '-');
+            typeAt(view, '-');
+            typeAt(view, '-');
+            expect(view.state.doc.toString()).toBe('word\u2014');
+        });
+        it('double hyphen is not replaced', () => {
+            view = createView();
+            typeAt(view, '-');
+            typeAt(view, '-');
+            expect(view.state.doc.toString()).toBe('--');
+        });
+        it('four hyphens produce em dash + hyphen', () => {
+            view = createView();
+            typeAt(view, '-');
+            typeAt(view, '-');
+            typeAt(view, '-');
+            typeAt(view, '-');
+            expect(view.state.doc.toString()).toBe('\u2014-');
+        });
+    });
+    describe('smart double quotes', () => {
+        it('opens quote at position 0', () => {
+            view = createView();
+            typeAt(view, '"');
+            expect(view.state.doc.toString()).toBe('\u201C');
+        });
+        it('opens quote after space', () => {
+            view = createView('say ');
+            typeAt(view, '"');
+            expect(view.state.doc.toString()).toBe('say \u201C');
+        });
+        it('closes quote after word character', () => {
+            view = createView('word');
+            typeAt(view, '"');
+            expect(view.state.doc.toString()).toBe('word\u201D');
+        });
+        it('closes quote after opening quote', () => {
+            view = createView();
+            typeAt(view, '"');
+            typeAt(view, '"');
+            expect(view.state.doc.toString()).toBe('\u201C\u201D');
+        });
+        it('opens quote after space following closing quote', () => {
+            view = createView();
+            typeAt(view, '"');
+            typeAt(view, '"');
+            typeAt(view, ' ');
+            typeAt(view, '"');
+            expect(view.state.doc.toString()).toBe('\u201C\u201D \u201C');
+        });
+        it('wraps a word with smart quotes', () => {
+            view = createView('say ');
+            typeAt(view, '"');
+            typeAt(view, 'hi');
+            typeAt(view, '"');
+            expect(view.state.doc.toString()).toBe('say \u201Chi\u201D');
+        });
+    });
+    describe('smart single quotes and apostrophes', () => {
+        it('opens after space', () => {
+            view = createView(' ');
+            typeAt(view, "'");
+            expect(view.state.doc.toString()).toBe(' \u2018');
+        });
+        it('apostrophe after word character', () => {
+            view = createView('don');
+            typeAt(view, "'");
+            expect(view.state.doc.toString()).toBe('don\u2019');
+        });
+        it("handles it's correctly", () => {
+            view = createView('it');
+            typeAt(view, "'");
+            expect(view.state.doc.toString()).toBe('it\u2019');
+            typeAt(view, 's');
+            expect(view.state.doc.toString()).toBe('it\u2019s');
+        });
+        it('opens at position 0', () => {
+            view = createView();
+            typeAt(view, "'");
+            expect(view.state.doc.toString()).toBe('\u2018');
+        });
+    });
+    describe('no infinite re-filtering', () => {
+        it('replacement is stable after ellipsis', () => {
+            view = createView();
+            typeAt(view, '.');
+            typeAt(view, '.');
+            typeAt(view, '.');
+            expect(view.state.doc.toString()).toBe('\u2026');
+            typeAt(view, 'x');
+            expect(view.state.doc.toString()).toBe('\u2026x');
+        });
+        it('replacement is stable after arrow', () => {
+            view = createView();
+            typeAt(view, '-');
+            typeAt(view, '-');
+            typeAt(view, '>');
+            expect(view.state.doc.toString()).toBe('\u2192');
+            typeAt(view, 'x');
+            expect(view.state.doc.toString()).toBe('\u2192x');
+        });
+        it('replacement is stable after em dash', () => {
+            view = createView();
+            typeAt(view, '-');
+            typeAt(view, '-');
+            typeAt(view, '-');
+            expect(view.state.doc.toString()).toBe('\u2014');
+            typeAt(view, 'x');
+            expect(view.state.doc.toString()).toBe('\u2014x');
+        });
+        it('smart quote replacement is stable', () => {
+            view = createView();
+            typeAt(view, '"');
+            expect(view.state.doc.toString()).toBe('\u201C');
+            typeAt(view, 'a');
+            expect(view.state.doc.toString()).toBe('\u201Ca');
+        });
+        it('apostrophe replacement is stable', () => {
+            view = createView('don');
+            typeAt(view, "'");
+            expect(view.state.doc.toString()).toBe('don\u2019');
+            typeAt(view, 't');
+            expect(view.state.doc.toString()).toBe('don\u2019t');
+        });
+    });
+    describe('no replacement for non-trigger patterns', () => {
+        it('plain text passes through unchanged', () => {
+            view = createView();
+            typeAt(view, 'hi');
+            expect(view.state.doc.toString()).toBe('hi');
+        });
+        it('single hyphen is unchanged', () => {
+            view = createView();
+            typeAt(view, '-');
+            expect(view.state.doc.toString()).toBe('-');
+        });
+        it('single < is unchanged', () => {
+            view = createView();
+            typeAt(view, '<');
+            expect(view.state.doc.toString()).toBe('<');
+        });
+        it('double hyphen stays as --', () => {
+            view = createView();
+            typeAt(view, '-');
+            typeAt(view, '-');
+            expect(view.state.doc.toString()).toBe('--');
+        });
+    });
+    describe('multi-character insertion (paste)', () => {
+        it('skips pasted multi-char text', () => {
+            view = createView('hello');
+            typeAt(view, ' world...end');
+            expect(view.state.doc.toString()).toBe('hello world...end');
+        });
+        it('handles paste followed by single-char trigger', () => {
+            view = createView('pre');
+            typeAt(view, '--');
+            expect(view.state.doc.toString()).toBe('pre--');
+            typeAt(view, '>');
+            expect(view.state.doc.toString()).toBe('pre\u2192');
+        });
+    });
+    describe('undo/redo', () => {
+        it('undo reverts an ellipsis replacement', () => {
+            view = createView();
+            typeAt(view, '.');
+            typeAt(view, '.');
+            typeAt(view, '.');
+            expect(view.state.doc.toString()).toBe('\u2026');
+            undo({ state: view.state, dispatch: view.dispatch });
+            expect(view.state.doc.toString()).not.toBe('\u2026');
+        });
+        it('undo reverts an em dash replacement', () => {
+            view = createView();
+            typeAt(view, '-');
+            typeAt(view, '-');
+            typeAt(view, '-');
+            expect(view.state.doc.toString()).toBe('\u2014');
+            undo({ state: view.state, dispatch: view.dispatch });
+            expect(view.state.doc.toString()).not.toBe('\u2014');
+        });
+        it('undo reverts a smart quote replacement', () => {
+            view = createView(' ');
+            typeAt(view, '"');
+            expect(view.state.doc.toString()).toBe(' \u201C');
+            undo({ state: view.state, dispatch: view.dispatch });
+            expect(view.state.doc.toString()).not.toBe(' \u201C');
+        });
+        it('redo re-applies after undo', () => {
+            view = createView();
+            typeAt(view, '-');
+            typeAt(view, '-');
+            typeAt(view, '-');
+            expect(view.state.doc.toString()).toBe('\u2014');
+            undo({ state: view.state, dispatch: view.dispatch });
+            redo({ state: view.state, dispatch: view.dispatch });
+            expect(view.state.doc.toString()).toBe('\u2014');
+        });
+    });
+    describe('edge cases', () => {
+        it('empty document', () => {
+            view = createView('');
+            expect(view.state.doc.toString()).toBe('');
+        });
+        it('single chars that are not triggers', () => {
+            view = createView();
+            typeAt(view, '-');
+            expect(view.state.doc.toString()).toBe('-');
+            typeAt(view, '<');
+            expect(view.state.doc.toString()).toBe('-<');
+        });
+        it('replacement after existing text', () => {
+            view = createView('abc');
+            typeAt(view, '.');
+            typeAt(view, '.');
+            typeAt(view, '.');
+            expect(view.state.doc.toString()).toBe('abc\u2026');
+        });
+        it('arrow after em dash in one session', () => {
+            view = createView();
+            typeAt(view, '-');
+            typeAt(view, '-');
+            typeAt(view, '-');
+            expect(view.state.doc.toString()).toContain('\u2014');
+            typeAt(view, ' ');
+            typeAt(view, '-');
+            typeAt(view, '-');
+            typeAt(view, '>');
+            expect(view.state.doc.toString()).toContain('\u2192');
+        });
+    });
+});

package/dist/editor/extensions/expansion.d.ts

@@ -0,0 +1,5 @@
+export interface ExpansionDictionary {
+    [abbreviation: string]: string;
+}
+export declare function expansion(dictionary?: ExpansionDictionary): import("@codemirror/state").Extension;
+//# sourceMappingURL=expansion.d.ts.map

package/dist/editor/extensions/expansion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansion.d.ts","sourceRoot":"","sources":["../../../src/editor/extensions/expansion.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,mBAAmB;IAChC,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;CAClC;AA8CD,wBAAgB,SAAS,CAAC,UAAU,CAAC,EAAE,mBAAmB,yCAqBzD"}

package/dist/editor/extensions/expansion.js

@@ -0,0 +1,58 @@
+import { ChangeSet, EditorState } from '@codemirror/state';
+const BUILT_IN_EXPANSIONS = {
+    'sig': 'signature',
+    'impl': 'implementation',
+    'config': 'configuration',
+    'docs': 'documentation',
+    'async': 'asynchronous',
+};
+function buildExpansionChanges(tr, dictionary) {
+    if (!tr.docChanged)
+        return null;
+    const newDoc = tr.newDoc;
+    const changes = [];
+    tr.changes.iterChanges((_fromA, _toA, fromB, toB, inserted) => {
+        const insertedStr = inserted.toString();
+        if (insertedStr !== ' ' && insertedStr !== '\t')
+            return;
+        const line = newDoc.lineAt(fromB);
+        let wordStart = fromB;
+        while (wordStart > line.from) {
+            const ch = newDoc.sliceString(wordStart - 1, wordStart);
+            if (/\s/.test(ch))
+                break;
+            wordStart--;
+        }
+        const precedingWord = newDoc.sliceString(wordStart, fromB);
+        const expansion = dictionary[precedingWord];
+        if (!expansion)
+            return;
+        const trailingSpace = insertedStr === ' ' ? ' ' : '\t';
+        changes.push({
+            from: wordStart,
+            to: toB,
+            insert: expansion + trailingSpace,
+        });
+    });
+    return changes.length > 0 ? changes : null;
+}
+export function expansion(dictionary) {
+    const table = dictionary
+        ? { ...dictionary, ...BUILT_IN_EXPANSIONS }
+        : BUILT_IN_EXPANSIONS;
+    return EditorState.transactionFilter.of((tr) => {
+        const expansionChanges = buildExpansionChanges(tr, table);
+        if (!expansionChanges)
+            return tr;
+        const newDocLen = tr.newDoc.length;
+        const expansionCS = ChangeSet.of(expansionChanges, newDocLen);
+        const composed = tr.changes.compose(expansionCS);
+        const spec = {
+            changes: composed,
+            selection: tr.selection,
+            effects: tr.effects,
+            scrollIntoView: tr.scrollIntoView,
+        };
+        return spec;
+    });
+}