tricu

source-editor.js (9326B)

---

 import { importFolds, importSites } from './import-folds.js';
 import { EditorState, StateField, StateEffect, Transaction, EditorSelection, Compartment, EditorView, Decoration, keymap, drawSelection, history, historyKeymap, standardKeymap, isolateHistory, undo, redo, insertNewline } from './codemirror.js';
 import { tokenize, bracketPair, definitionSites } from './syntax.js';
 // Enter inserts a plain newline, preserving explicit source indentation.
 const plainNewline = (view) => !view.state.readOnly && insertNewline(view);
 const definitions = StateEffect.define();
 const definitionState = StateField.define({
     create: () => ({ ready: false, busy: false }),
     update: (old, tr) => { for (const effect of tr.effects)
         if (effect.is(definitions))
             return effect.value; return old; }
 });
 const presentations = new WeakMap();
 function presentation(state) {
     let cached = presentations.get(state.doc);
     if (!cached) {
         const source = state.doc.toString(), tokens = tokenize(source);
         cached = { tokens, sites: definitionSites(source, tokens) };
         presentations.set(state.doc, cached);
     }
     return cached;
 }
 function decorations(state) {
     const { tokens, sites } = presentation(state), selection = state.selection.main;
     const pair = selection.empty ? bracketPair(tokens, selection.head) : [];
     const marks = [], imports = importSites(state);
     for (const token of tokens)
         if (token.kind && !imports.some(site => token.start >= site.from && token.end <= site.to)) {
             const match = pair.includes(token.start) ? pair.length === 2 ? ' bracket-match' : ' bracket-unmatched' : '';
             marks.push(Decoration.mark({ class: `syntax-${token.kind}${match}` }).range(token.start, token.end));
         }
     const controls = state.field(definitionState);
     if (controls.ready)
         for (const site of sites) {
             if (controls.published && !controls.published.includes(site.name) || controls.busy && controls.selected !== site.name)
                 continue;
             marks.push(Decoration.mark({ class: 'definition-name', attributes: {
                     role: 'button', tabindex: controls.busy ? '-1' : '0', 'data-definition': site.name,
                     'aria-label': `Inspect compiled definition ${site.name}`, 'aria-controls': 'inline-definition',
                     'aria-expanded': String(controls.selected === site.name), 'aria-disabled': String(controls.busy)
                 } }).range(site.start, site.start + site.name.length));
         }
     return Decoration.set(marks, true);
 }
 const syntax = StateField.define({
     create: decorations,
     update: (old, tr) => tr.docChanged || tr.selection || tr.effects.some(effect => effect.is(definitions)) ? decorations(tr.state) : old,
     provide: field => EditorView.decorations.from(field)
 });
 // Symbol.for shares the mounted component across independently bundled test
 // and application entrypoints.
 const editorKey = Symbol.for('tricu.source-editor');
 // Controller and browser fixtures access the same EditorState document,
 // selection and history through the mounted component.
 export function editorFor(element) {
     const editor = element[editorKey];
     if (!editor)
         throw Error('Source editor is not initialized');
     return editor;
 }
 export class SourceEditor {
     dom;
     view;
     configuration;
     currentDefinitions = { ready: false, busy: false };
     availability = new Compartment();
     changes = new Set();
     layouts = new Set();
     locked = false;
     readonlySource = false;
     controls = '';
     pendingEpoch;
     epoch = 0;
     constructor(dom) {
         this.dom = dom;
         dom.classList.add('source-editor');
         this.configuration = [
             definitionState, syntax, importFolds, history(), drawSelection(), EditorState.tabSize.of(2),
             keymap.of([{ key: 'Enter', run: plainNewline, shift: plainNewline }, ...historyKeymap, ...standardKeymap]), EditorView.lineWrapping,
             this.availability.of([EditorState.readOnly.of(false), EditorView.editable.of(true)]),
             EditorView.contentAttributes.of({ 'aria-label': 'tricu source (up to 16,384 characters)', spellcheck: 'false', autocorrect: 'off', autocapitalize: 'off' }),
             EditorView.updateListener.of(update => {
                 if (update.docChanged)
                     this.notify();
                 // Schedule external listeners after EditorView.update so controller
                 // effects can dispatch their own transactions.
                 queueMicrotask(() => { for (const listener of this.layouts)
                     listener(); });
             }),
             EditorView.theme({ '&': { height: '100%' }, '.cm-scroller': { overflow: 'auto', fontFamily: 'inherit', lineHeight: 'inherit' },
                 '.cm-content': { padding: '18px 20px', fontFamily: 'inherit', fontVariantLigatures: 'none', minHeight: '100%' },
                 '.cm-line': { padding: '0' }, '.cm-cursor': { borderLeftColor: 'var(--syntax-ink)' },
                 '.cm-selectionBackground, &.cm-focused .cm-selectionBackground': { background: '#799ea066' } })
         ];
         this.view = new EditorView({ parent: dom, state: EditorState.create({ extensions: this.configuration }) });
         this.view.scrollDOM.addEventListener('scroll', () => { for (const listener of this.layouts)
             listener(); }, { passive: true });
         new ResizeObserver(() => { for (const listener of this.layouts)
             listener(); }).observe(dom);
         dom.addEventListener('compositionstart', () => dom.classList.add('composing'));
         dom.addEventListener('compositionend', () => dom.classList.remove('composing'));
         dom[editorKey] = this;
     }
     notify() {
         const epoch = this.epoch;
         if (this.pendingEpoch === epoch)
             return;
         this.pendingEpoch = epoch;
         queueMicrotask(() => { if (this.pendingEpoch === epoch)
             this.flushChange(); });
     }
     // Controller edits notify after the view update returns; native-input edits
     // notify at the microtask boundary. Both refresh revisions before the next
     // user event. Document epochs discard notifications from previous loads.
     flushChange() {
         if (this.pendingEpoch !== this.epoch)
             return;
         this.pendingEpoch = undefined;
         for (const listener of this.changes)
             listener();
     }
     undo() { const result = undo(this.view); this.flushChange(); return result; }
     redo() { const result = redo(this.view); this.flushChange(); return result; }
     getSource() { return this.view.state.doc.toString(); }
     getSelection() { const { from, to } = this.view.state.selection.main; return { from, to }; }
     focus() { this.view.focus(); }
     declarations() { return presentation(this.view.state).sites; }
     revealDefinition(name) {
         const site = this.declarations().find(site => site.name === name);
         if (!site)
             return false;
         this.view.dispatch({ effects: EditorView.scrollIntoView(site.start, { y: 'center' }) });
         return true;
     }
     select(from, to = from) { this.view.dispatch({ selection: EditorSelection.single(from, to), scrollIntoView: true }); this.focus(); }
     // Loading/restoring documents retires old history; import insertion is a
     // separate, isolated undoable edit. Notification is explicit for controller edits.
     replaceSource(source, notify = false) {
         this.epoch++;
         this.pendingEpoch = undefined;
         const state = EditorState.create({ doc: source, extensions: this.configuration });
         this.view.setState(state.update({ effects: [definitions.of(this.currentDefinitions),
                 this.availability.reconfigure([EditorState.readOnly.of(this.locked || this.readonlySource), EditorView.editable.of(!this.locked && !this.readonlySource)])] }).state);
         if (notify) {
             this.pendingEpoch = this.epoch;
             this.flushChange();
         }
     }
     edit(from, to, text) {
         this.view.dispatch({ changes: { from, to, insert: text }, selection: EditorSelection.single(from + text.length),
             annotations: [Transaction.userEvent.of('input'), isolateHistory.of('full')] });
         this.focus();
         this.flushChange();
     }
     get isDisabled() { return this.locked; }
     get isReadOnly() { return this.readonlySource; }
     setAvailability(disabled, readOnly) {
         if (this.locked === disabled && this.readonlySource === readOnly)
             return;
         this.locked = disabled;
         this.readonlySource = readOnly;
         this.dom.classList.toggle('disabled', disabled);
         this.view.dispatch({ effects: this.availability.reconfigure([EditorState.readOnly.of(disabled || readOnly), EditorView.editable.of(!disabled && !readOnly)]) });
     }
     setDefinitions(value) {
         const key = JSON.stringify(value);
         if (key === this.controls)
             return;
         this.controls = key;
         this.currentDefinitions = value;
         this.view.dispatch({ effects: definitions.of(value) });
     }
     onChange(listener) { this.changes.add(listener); return () => this.changes.delete(listener); }
     onLayout(listener) { this.layouts.add(listener); }
     refresh() { this.view.requestMeasure(); }
 }