Added base class to extend; added initial desired keybindings

This commit is contained in:
itdominator 2025-05-31 01:10:55 -05:00
parent 05d48c5878
commit fbf6933102
3 changed files with 153 additions and 20 deletions

View File

@ -0,0 +1,75 @@
import { Directive, ElementRef, Input, ViewChild } from '@angular/core';
import { EditorSettings } from "../../common/configs/editor.config";
@Directive()
export class AceEditorBase {
@ViewChild('editor') editorElm!: ElementRef;
@Input() editorSettings!: typeof EditorSettings;
editor!: any;
uuid!: string;
fontSize: number = 12;
cutBuffer: string = "";
timerId: number = -1;
constructor(
) {}
protected zoomIn() {
this.fontSize += 1;
this.editorElm.nativeElement.style.fontSize = `${this.fontSize}px`;
}
protected zoomOut() {
this.fontSize -= 1;
this.editorElm.nativeElement.style.fontSize = `${this.fontSize}px`;
}
protected search() {
console.log(this.editor.getSession()["$modeId"])
}
protected movelinesUp() {
this.editor.execCommand("movelinesup");
}
protected movelinesDown() {
this.editor.execCommand("movelinesdown");
}
protected duplicateLines() {
this.editor.execCommand("copylinesdown");
}
protected cutToBuffer() {
if (this.timerId) { clearTimeout(this.timerId); }
const cursorPosition = this.editor.getCursorPosition();
let lineText = this.editor.session.getLine(cursorPosition.row);
this.cutBuffer += `${lineText}\n`;
this.editor.session.removeFullLines(cursorPosition.row, cursorPosition.row)
this.setBufferClearTimeout();
}
protected pasteCutBuffer() {
if (this.timerId) { clearTimeout(this.timerId); }
const cursorPosition = this.editor.getCursorPosition();
this.editor.session.insert(cursorPosition, this.cutBuffer)
this.setBufferClearTimeout();
}
private setBufferClearTimeout(timeout: number = 5000) {
this.timerId = setTimeout(() => {
this.cutBuffer = "";
this.timerId = -1;
}, timeout);
}
}

View File

@ -1,4 +1,4 @@
import { Component, ElementRef, ViewChild, Input } from '@angular/core';
import { Component } from '@angular/core';
// Import Ace and its modes/themes so that `ace` global is defined
import * as ace from 'ace-builds/src-noconflict/ace';
@ -8,7 +8,7 @@ import "ace-builds/src-noconflict/ext-language_tools";
import { EditorsService } from '../../common/services/editor/editors.service';
import { LSPService } from '../../common/services/lsp.service';
import { EditorSettings } from "../../common/configs/editor.config";
import { AceEditorBase } from './ace-editor.base';
@ -23,18 +23,15 @@ import { EditorSettings } from "../../common/configs/editor.config";
'class': 'col'
}
})
export class AceEditorComponent {
@Input() editorSettings!: typeof EditorSettings;
@ViewChild('editor') editorElm!: ElementRef;
editor!: any;
uuid!: string;
export class AceEditorComponent extends AceEditorBase {
constructor(
private editorsService: EditorsService,
private lspService: LSPService
) {}
) {
super();
}
public ngAfterViewInit(): void {
@ -46,7 +43,74 @@ export class AceEditorComponent {
this.editor = ace.edit( this.editorElm.nativeElement );
this.editor.setOptions( this.editorSettings.CONFIG );
// this.editor.commands.addCommands( this.editorSettings.KEYBINDINGS );
// this.editor.commands.addCommands( this.editorSettings.KEYBINDINGS );
this.editor.commands.addCommands([
{
name: "search",
bindKey: {win: "ctrl-f", mac: "ctrl-f"},
exec: () => {
this.search();
},
readOnly: true
}, {
name: "movelinesUp",
bindKey: {win: "ctrl-up", mac: "ctrl-up"},
exec: () => {
this.movelinesUp();
},
readOnly: true
}, {
name: "movelinesDown",
bindKey: {win: "ctrl-down", mac: "ctrl-down"},
exec: () => {
this.movelinesDown();
},
readOnly: true
},
{
name: "duplicateLines",
bindKey: {win: "ctrl-d", mac: "ctrl-d"},
exec: () => {
this.duplicateLines();
},
readOnly: true
}, {
name: "zoomIn",
bindKey: {win: "ctrl-=", mac: "ctrl-="},
exec: () => {
this.zoomIn();
},
readOnly: true
}, {
name: "zoomOut",
bindKey: {win: "ctrl--", mac: "ctrl--"},
exec: () => {
this.zoomOut();
},
readOnly: true
}, {
name: "cutToBuffer",
bindKey: {win: "ctrl-k", mac: "ctrl-k"},
exec: () => {
this.cutToBuffer();
},
readOnly: true
}, {
name: "pasteCutBuffer",
bindKey: {win: "ctrl-u", mac: "ctrl-u"},
exec: () => {
this.pasteCutBuffer();
},
readOnly: true
}, {
name: "destroySession",
bindKey: {win: "ctrl-w", mac: "ctrl-w"},
exec: () => {
this.editor.session.destroy();
},
readOnly: true
}
]);
// Note: https://github.com/mkslanc/ace-linters/blob/c286d85c558530aa1b0597d02108bc782abd4736/packages/ace-linters/src/language-provider.ts#L277
// found on focus ^ might have other signals we can watch like session being set, etc.
@ -54,14 +118,9 @@ export class AceEditorComponent {
this.editorsService.setActiveEditor(this.uuid);
});
// this.editor.on("changeSession", (session) => {
// console.log(session);
// console.log(session.session["$modeId"]);
// });
}
public registerEditorToLSPMode() {
this.lspService.registerEditor(this.editor);
this.editor.on("changeSession", (session) => {
this.lspService.registerEditor(this.editor);
});
}
}

View File

@ -84,9 +84,8 @@ export class EditorsComponent {
if ( !session ) return;
let editorComponent = this.editors.get(this.activeEditor)?.instance;
let editor = editorComponent.editor;
let editor = editorComponent.editor;
editor?.setSession(session);
editorComponent.registerEditorToLSPMode();
});
}