- Plugin wrapper implemented for abstraction editor operations

tdonuk · tdonuk · commit a577557a6ef6 · 2024-12-24T00:09:32.000+03:00
- new language: SH
- Standard menu items added (undo, redo, copy etc..)
diff --git a/linux_clean_install.sh b/linux_clean_install.sh
@@ -1,7 +1,7 @@
 # Script to quickly fresh-install note-manager
 
 # 1- Remove existing installation if exists
-# 2- Delete 'out' folder
+# 2- Delete 'out' folder if exists
 # 3- Run 'npm make' to create new artifact
 # 4- Install the newly created artifact
 # 5- Launch the app
diff --git a/src/domain/AceEditorWrapper.ts b/src/domain/AceEditorWrapper.ts
@@ -0,0 +1,65 @@
+import {EditorWrapper} from "./EditorWrapper";
+import {Ace} from "ace-builds";
+import {LanguageName} from "./SupportedLanguage";
+
+export class AceEditorWrapper implements EditorWrapper {
+    private _editor: Ace.Editor;
+
+    constructor(editor: Ace.Editor) {
+        this._editor = editor;
+    }
+
+    getAllSelectionRanges(): Array<Ace.Range> {
+        const multiCursorRanges = this._editor?.getSelection().getAllRanges();
+
+        if(multiCursorRanges?.length > 0) {
+            return multiCursorRanges;
+        } else {
+            const singleSelectionRange = this.getSingleSelectionRange();
+
+            return singleSelectionRange ? [singleSelectionRange] : [];
+        }
+    }
+
+    getSingleSelectionRange(): Ace.Range {
+        return this._editor.getSelectionRange();
+    }
+
+    replaceRange(range: Ace.Range, text: string): void {
+        if(!range) return;
+
+        this._editor?.session.replace(range, text);
+    }
+
+    getSelectedText() {
+        return this._editor?.getSelectedText() || "";
+    }
+
+    replaceAllSelectionRanges(text: string): void {
+        const ranges = this.getAllSelectionRanges();
+
+        if(ranges?.length > 0) { // multi cursor
+            for(let range of ranges) {
+                this.replaceRange(range, text);
+            }
+        }
+    }
+
+    replaceSelection(text: string): void {
+        const selectionRange = this.getSingleSelectionRange();
+
+        this.replaceRange(selectionRange, text);
+    }
+
+    getLanguage(): LanguageName {
+        return this._editor?.getOption("mode").split("/").pop() as LanguageName || LanguageName.TEXT;
+    }
+
+    getTextRange(range: Ace.Range): string {
+        return this._editor?.session.getTextRange(range) || "";
+    }
+
+    getValue(): string {
+        return this._editor?.session.getValue();
+    }
+}
diff --git a/src/domain/EditorWrapper.ts b/src/domain/EditorWrapper.ts
@@ -0,0 +1,53 @@
+import {LanguageName} from "./SupportedLanguage";
+
+export interface EditorWrapper {
+    /**
+     * Returns the selection range in a single cursor editor.
+     */
+    getSingleSelectionRange: () => any;
+
+    /**
+     * Returns the array of selection ranges in a multi cursor editor.
+     */
+    getAllSelectionRanges: () => Array<any>;
+
+    /**
+     * Replaces single cursor selection with given text.
+     * @param text
+     */
+    replaceSelection: (text: string) => void,
+
+    /**
+     * Replaces the content in the given range with provided string.
+     * @param range
+     * @param text
+     */
+    replaceRange: (range: any, text: string) => void,
+
+    /**
+     * Replaces the contents of each selection range with the given string. Supports both single cursor and multiple cursors.
+     * @param text
+     */
+    replaceAllSelectionRanges: (text: string) => void
+
+    /**
+     * Returns the selected text. If the editor is in multi cursor mode, returns the concatenation of the all selections.
+     */
+    getSelectedText: () => string;
+
+    /**
+     * Returns the language mode of the editor.
+     */
+    getLanguage: () => LanguageName;
+
+    /**
+     * Returns the text that is included by the given range.
+     * @param range
+     */
+    getTextRange: (range: any) => string;
+
+    /**
+     * Returns the current value of the editor.
+     */
+    getValue: () => string;
+}
diff --git a/src/domain/SupportedLanguage.ts b/src/domain/SupportedLanguage.ts
@@ -14,6 +14,7 @@ export enum LanguageName {
     CSS = "css",
     MARKDOWN = "markdown",
     JAVA = "java",
+    SH = "sh"
 }
 
 export const SupportedLanguages: Record<LanguageName, SupportedLanguage> = {
@@ -62,6 +63,11 @@ export const SupportedLanguages: Record<LanguageName, SupportedLanguage> = {
         label: "Java",
         extensions: [".java", ".class"]
     },
+    [LanguageName.SH]: {
+        name: LanguageName.SH,
+        label: "SH",
+        extensions: [".sh"]
+    }
 };
 
 export function findLanguageByFileName(fileName: string|undefined): SupportedLanguage {
diff --git a/src/main.ts b/src/main.ts
@@ -59,17 +59,6 @@ const createWindow = () => {
     // @ts-ignore
     mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
 
-    mainWindow.webContents.on('will-navigate', (event, url) => {
-        console.log(`Blocked navigation to: ${url}`);
-        event.preventDefault(); // Prevent navigation
-    });
-
-    // Intercept link clicks that try to open new windows
-    mainWindow.webContents.setWindowOpenHandler(({ url }) => {
-        console.log(`Blocked new window for: ${url}`);
-        return { action: 'deny' }; // Prevent the new window from opening
-    });
-
     attachTitlebarToWindow(mainWindow);
 
     mainWindow.webContents.on("dom-ready", async () => {
diff --git a/src/react/components/editor/Editor.tsx b/src/react/components/editor/Editor.tsx
@@ -9,6 +9,7 @@ import {fireEvent} from "../../ApplicationEvents";
 import {EventType} from "../../../enums";
 import {allPlugins} from "../../../utils/PluginLoader";
 import {ipcRenderer} from "electron";
+import {AceEditorWrapper} from "../../../domain/AceEditorWrapper";
 
 export default function Editor({content, language, onEditorLoad, changeListener, cursorListener, selectionListener}: {
     content: string,
@@ -60,7 +61,12 @@ export default function Editor({content, language, onEditorLoad, changeListener,
 
     const handleLoad = (editor: Ace.Editor) => {
         try {
-            allPlugins.forEach(p => p.initializePlugin(editor));
+            const editorWrapper = new AceEditorWrapper(editor);
+
+            allPlugins.forEach(p => {
+                console.log("initializing plugin... ("+p.name+")");
+                p.initializePlugin(editorWrapper)
+            });
         } catch (err) {
             console.error("could not initialize plugin: " + err);
         }
@@ -117,7 +123,10 @@ export default function Editor({content, language, onEditorLoad, changeListener,
                     showPrintMargin: false,
                     useWorker: false,
                     enableSnippets: true,
-                    cursorStyle: "ace"
+                    cursorStyle: "ace",
+                    scrollPastEnd: false,
+                    useSoftTabs: false,
+                    navigateWithinSoftTabs: false,
                 }}
                 width={"100%"}
                 height={"100%"}
diff --git a/src/react/components/editor/plugins/Base64Plugin.ts b/src/react/components/editor/plugins/Base64Plugin.ts
@@ -1,5 +1,5 @@
 import {EditorAction, EditorMenuItem, EditorPlugin} from "./index";
-import {Ace} from "ace-builds";
+import {EditorWrapper} from "../../../../domain/EditorWrapper";
 
 enum Keys {
     B64_ENCODE = "Base64_base64Encode",
@@ -28,7 +28,7 @@ export default class Base64Plugin implements EditorPlugin {
             ]
         }
     ];
-    editor?: Ace.Editor
+    editor?: EditorWrapper
 
     doAction(code: string): void {
         if(!this.editor) throw new Error("Plugin not initialized !");
@@ -43,7 +43,7 @@ export default class Base64Plugin implements EditorPlugin {
         return Array.from(this.actionMap.keys());
     }
 
-    initializePlugin(editor: Ace.Editor): void {
+    initializePlugin(editor: EditorWrapper): void {
         this.editor = editor;
 
         this.initializeActionMap();
@@ -53,16 +53,36 @@ export default class Base64Plugin implements EditorPlugin {
         this.actionMap.set(Keys.B64_ENCODE, {
             label: "Base64 Encode",
             code: Keys.B64_ENCODE,
-            perform: (editor: Ace.Editor) => {
-                editor.session.replace(editor.getSelectionRange(), encode(editor.getSelectedText()));
+            perform: (editor: EditorWrapper) => {
+                const selectionRanges = editor.getAllSelectionRanges();
+
+                if(selectionRanges && selectionRanges.length > 0 && (editor.getSelectedText() || "").length > 0) {
+                    for(let range of selectionRanges) {
+                        const target = editor.getTextRange(range);
+
+                        target && editor.replaceRange(range, encode(target));
+                    }
+
+                    return;
+                }
             }
         });
 
         this.actionMap.set(Keys.B64_DECODE, {
             label: "Base64 Decode",
             code: Keys.B64_DECODE,
-            perform: (editor: Ace.Editor) => {
-                editor.session.replace(editor.getSelectionRange(), decode(editor.getSelectedText()));
+            perform: (editor: EditorWrapper) => {
+                const selectionRanges = editor.getAllSelectionRanges();
+
+                if(selectionRanges && selectionRanges.length > 0 && (editor.getSelectedText() || "").length > 0) {
+                    for(let range of selectionRanges) {
+                        const target = editor.getTextRange(range);
+
+                        target && editor.replaceRange(range, decode(target));
+                    }
+
+                    return;
+                }
             }
         });
     }
diff --git a/src/react/components/editor/plugins/BeautifyPlugin.ts b/src/react/components/editor/plugins/BeautifyPlugin.ts
@@ -1,8 +1,8 @@
 import {EditorAction, EditorMenuItem, EditorPlugin} from "./index";
-import {Ace} from "ace-builds";
 import {LanguageName} from "../../../../domain/SupportedLanguage";
 import xmlFormat from "xml-formatter";
 import os from "os";
+import {EditorWrapper} from "../../../../domain/EditorWrapper";
 
 enum Keys {
     FORMAT = "beautify.format",
@@ -28,7 +28,7 @@ export default class BeautifyPlugin implements EditorPlugin{
 
     ];
 
-    editor?: Ace.Editor;
+    editor?: EditorWrapper;
 
     actionMap?: Map<string, EditorAction>;
 
@@ -47,7 +47,7 @@ export default class BeautifyPlugin implements EditorPlugin{
         return Array.from(this.actionMap.keys());
     }
 
-    initializePlugin(editor: Ace.Editor): void {
+    initializePlugin(editor: EditorWrapper): void {
         this.editor = editor;
 
         this.initializeActionMap();
@@ -60,32 +60,18 @@ export default class BeautifyPlugin implements EditorPlugin{
             label: "Format",
             code: Keys.FORMAT,
             perform: () => {
-                let langName = this.editor?.getOption("mode").split("/").pop() || LanguageName.TEXT;
+                let langName = this.editor?.getLanguage() || LanguageName.TEXT;
 
-                // multi selection
-                const multiCursorRanges = this.editor?.getSelection().getAllRanges();
-                if(multiCursorRanges && multiCursorRanges.length > 0 && (this.editor?.getSelectedText() || "").length > 0) {
-                    for(let range of multiCursorRanges) {
-                        const target = this.editor?.session.getTextRange(range) || "";
+                const selectionRanges = this.editor?.getAllSelectionRanges();
+                if(selectionRanges && selectionRanges.length > 0 && (this.editor?.getSelectedText() || "").length > 0) {
+                    for(let range of selectionRanges) {
+                        const target = this.editor?.getTextRange(range) || "";
 
-                        this.editor?.session.replace(range, format(langName, target));
+                        this.editor?.replaceRange(range, format(langName, target));
                     }
 
                     return;
                 }
-
-                // single selection
-                const singleCursorRange = this.editor?.getSelection().getRange();
-                if(singleCursorRange && (this.editor?.getSelectedText() || "").length > 0) {
-                    const target = this.editor?.session.getTextRange(singleCursorRange) || "";
-
-                    this.editor?.session.replace(singleCursorRange, format(langName, target));
-
-                    return;
-                }
-
-                // no selection
-                this.editor?.setValue(format(langName, this.editor?.getValue()));
             }
         });
     }
diff --git a/src/react/components/editor/plugins/PreviewPlugin.ts b/src/react/components/editor/plugins/PreviewPlugin.ts
@@ -1,8 +1,8 @@
 import {EditorMenuItem, EditorPlugin, ToolbarMenuItem} from "./index";
-import {Ace} from "ace-builds";
 import {LanguageName} from "../../../../domain/SupportedLanguage";
 import DOMPurify from "dompurify";
 import {marked} from "marked";
+import {EditorWrapper} from "../../../../domain/EditorWrapper";
 
 const previewIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNy4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTQ0OCA4MGM4LjggMCAxNiA3LjIgMTYgMTZsMCAzMTkuOC01LTYuNS0xMzYtMTc2Yy00LjUtNS45LTExLjYtOS4zLTE5LTkuM3MtMTQuNCAzLjQtMTkgOS4zTDIwMiAzNDAuN2wtMzAuNS00Mi43QzE2NyAyOTEuNyAxNTkuOCAyODggMTUyIDI4OHMtMTUgMy43LTE5LjUgMTAuMWwtODAgMTEyTDQ4IDQxNi4zbDAtLjNMNDggOTZjMC04LjggNy4yLTE2IDE2LTE2bDM4NCAwek02NCAzMkMyOC43IDMyIDAgNjAuNyAwIDk2TDAgNDE2YzAgMzUuMyAyOC43IDY0IDY0IDY0bDM4NCAwYzM1LjMgMCA2NC0yOC43IDY0LTY0bDAtMzIwYzAtMzUuMy0yOC43LTY0LTY0LTY0TDY0IDMyem04MCAxOTJhNDggNDggMCAxIDAgMC05NiA0OCA0OCAwIDEgMCAwIDk2eiIvPjwvc3ZnPg==";
 const refreshIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNy4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTQ2My41IDIyNGw4LjUgMGMxMy4zIDAgMjQtMTAuNyAyNC0yNGwwLTEyOGMwLTkuNy01LjgtMTguNS0xNC44LTIyLjJzLTE5LjMtMS43LTI2LjIgNS4yTDQxMy40IDk2LjZjLTg3LjYtODYuNS0yMjguNy04Ni4yLTMxNS44IDFjLTg3LjUgODcuNS04Ny41IDIyOS4zIDAgMzE2LjhzMjI5LjMgODcuNSAzMTYuOCAwYzEyLjUtMTIuNSAxMi41LTMyLjggMC00NS4zcy0zMi44LTEyLjUtNDUuMyAwYy02Mi41IDYyLjUtMTYzLjggNjIuNS0yMjYuMyAwcy02Mi41LTE2My44IDAtMjI2LjNjNjIuMi02Mi4yIDE2Mi43LTYyLjUgMjI1LjMtMUwzMjcgMTgzYy02LjkgNi45LTguOSAxNy4yLTUuMiAyNi4yczEyLjUgMTQuOCAyMi4yIDE0LjhsMTE5LjUgMHoiLz48L3N2Zz4=";
@@ -29,11 +29,11 @@ export default class PreviewPlugin implements EditorPlugin {
                 if(refreshButton && content) {
                     const shadow = content.attachShadow({mode: 'open'});
 
-                    shadow.innerHTML = preview(this.editor?.getValue(), getLanguage(this.editor)) || getEmptyPreviewResult();
+                    shadow.innerHTML = preview(this.editor?.getValue(), this.editor?.getLanguage()) || getEmptyPreviewResult();
 
                     refreshButton.addEventListener("click", () => {
                         shadow.innerHTML = "";
-                        shadow.innerHTML = preview(this.editor?.getValue(), getLanguage(this.editor)) || getEmptyPreviewResult();
+                        shadow.innerHTML = preview(this.editor?.getValue(), this.editor?.getLanguage()) || getEmptyPreviewResult();
                     });
                 }
             },
@@ -107,7 +107,7 @@ export default class PreviewPlugin implements EditorPlugin {
         }
     ];
 
-    editor?: Ace.Editor;
+    editor?: EditorWrapper;
 
     doAction(code: string): void {
         if(!this.editor) throw new Error("Plugin not initialized !");
@@ -125,17 +125,11 @@ export default class PreviewPlugin implements EditorPlugin {
         return Object.keys(Keys);
     }
 
-    initializePlugin(editor: Ace.Editor): void {
+    initializePlugin(editor: EditorWrapper): void {
         this.editor = editor;
     }
 }
 
-function getLanguage(editor?: Ace.Editor): string {
-    if(!editor) return LanguageName.TEXT;
-
-    return editor?.getOption("mode").split("/").pop() || LanguageName.TEXT;
-}
-
 function preview(content?: string, lang?: string) {
     if(!content || !lang) return "";
 
diff --git a/src/react/components/editor/plugins/index.ts b/src/react/components/editor/plugins/index.ts
diff --git a/src/utils/ElectronUtils.ts b/src/utils/ElectronUtils.ts
