tricu

source-editor.ts (8961B)

---

 import { importFolds, importSites } from './import-folds.js';
 import {EditorState, StateField, StateEffect, Transaction, EditorSelection, Compartment, type Range, type Extension,
   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:EditorView):boolean=>!view.state.readOnly&&insertNewline(view);
 
 interface Definitions { ready: boolean; busy: boolean; selected?: string; published?: string[] }
 const definitions = StateEffect.define<Definitions>();
 const definitionState = StateField.define<Definitions>({
   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<EditorState['doc'],{tokens:ReturnType<typeof tokenize>;sites:ReturnType<typeof definitionSites>}>();
 function presentation(state:EditorState) {
   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: EditorState): ReturnType<typeof Decoration.set> {
   const {tokens,sites}=presentation(state), selection=state.selection.main;
   const pair=selection.empty?bracketPair(tokens,selection.head):[];
   const marks:Range<Decoration>[]=[], 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');
 type MountedEditor=HTMLElement&{[editorKey]?:SourceEditor};
 // Controller and browser fixtures access the same EditorState document,
 // selection and history through the mounted component.
 export function editorFor(element:HTMLElement):SourceEditor {
   const editor=(element as MountedEditor)[editorKey];if(!editor)throw Error('Source editor is not initialized');return editor;
 }
 export class SourceEditor {
   readonly view:EditorView;
   private readonly configuration:Extension[];
   private currentDefinitions:Definitions={ready:false,busy:false};
   private readonly availability=new Compartment();
   private readonly changes=new Set<()=>void>();
   private readonly layouts=new Set<()=>void>();
   private locked=false;
   private readonlySource=false;
   private controls='';
   private pendingEpoch:number|undefined;
   private epoch=0;
   constructor(readonly dom:HTMLElement) {
     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 as MountedEditor)[editorKey]=this;
   }
   private notify():void {
     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.
   private flushChange():void {
     if(this.pendingEpoch!==this.epoch)return;this.pendingEpoch=undefined;
     for(const listener of this.changes)listener();
   }
   undo():boolean{const result=undo(this.view);this.flushChange();return result;}
   redo():boolean{const result=redo(this.view);this.flushChange();return result;}
   getSource():string{return this.view.state.doc.toString();}
   getSelection():{from:number;to:number}{const {from,to}=this.view.state.selection.main;return {from,to};}
   focus():void{this.view.focus();}
   declarations():ReturnType<typeof definitionSites>{return presentation(this.view.state).sites;}
   revealDefinition(name:string):boolean {
     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:number,to=from):void{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:string,notify=false):void {
     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:number,to:number,text:string):void {
     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():boolean{return this.locked;}
   get isReadOnly():boolean{return this.readonlySource;}
   setAvailability(disabled:boolean,readOnly:boolean):void {
     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:Definitions):void {
     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:()=>void):()=>void{this.changes.add(listener);return ()=>this.changes.delete(listener);}
   onLayout(listener:()=>void):void{this.layouts.add(listener);}
   refresh():void{this.view.requestMeasure();}
 }