From fbf69331020f4d4c0759512824c80eb1b3140d40 Mon Sep 17 00:00:00 2001 From: itdominator <1itdominator@gmail.com> Date: Sat, 31 May 2025 01:10:55 -0500 Subject: [PATCH] Added base class to extend; added initial desired keybindings --- src/app/editor/ace/ace-editor.base.ts | 75 +++++++++++++++++ src/app/editor/ace/ace-editor.component.ts | 95 ++++++++++++++++++---- src/app/editor/editors.component.ts | 3 +- 3 files changed, 153 insertions(+), 20 deletions(-) create mode 100644 src/app/editor/ace/ace-editor.base.ts diff --git a/src/app/editor/ace/ace-editor.base.ts b/src/app/editor/ace/ace-editor.base.ts new file mode 100644 index 0000000..baf3d6f --- /dev/null +++ b/src/app/editor/ace/ace-editor.base.ts @@ -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); + } + +} \ No newline at end of file diff --git a/src/app/editor/ace/ace-editor.component.ts b/src/app/editor/ace/ace-editor.component.ts index 5346512..8a5ef13 100644 --- a/src/app/editor/ace/ace-editor.component.ts +++ b/src/app/editor/ace/ace-editor.component.ts @@ -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); + }); } } \ No newline at end of file diff --git a/src/app/editor/editors.component.ts b/src/app/editor/editors.component.ts index 21ba6c7..e528c8b 100644 --- a/src/app/editor/editors.component.ts +++ b/src/app/editor/editors.component.ts @@ -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(); }); }