add undo button to extra buttons

Author: lorens-osman-dev

src/createFamily/buttons.ts

@@ -12,7 +12,6 @@ export async function buttonsLine(app: App, file: TFile, settings?: any) {
     this.app = app
     Vars = settings
     //! Android 
-    console.log("buttonsLine ⸦ Platform:", Platform);
     if (Platform.isMobile) {
         let LEAF: WorkspaceLeaf | null = null;
         this.app.workspace.iterateAllLeaves((leaf: WorkspaceLeaf) => {
@@ -134,6 +133,8 @@ function appendOrRemoveChild(file: TFile, obsidianContainer: any, obsidianContai
 
         const deleteLineBtn = makeButton("deleteLineBtn", "deleteLineBtn", `Delete the current line`)
         setIcon(deleteLineBtn, "chevrons-left")
+        const undoBtn = makeButton("undoBtn", "undoBtn", `Undo the last action`)
+        setIcon(undoBtn, "redo-2")
         const coffeeBtn = makeButton("coffeeBtn", "coffeeBtn", `coffee`)
         setIcon(coffeeBtn, "coffee")
         const puzzleBtn = makeButton("puzzleBtn", "puzzleBtn", `puzzle tooltip message `)
@@ -150,6 +151,7 @@ function appendOrRemoveChild(file: TFile, obsidianContainer: any, obsidianContai
         // Append Extra Buttons 
         buttonsLineContainer?.appendChild(extraBtn)
 
+        extraButtonsContainer?.appendChild(undoBtn)
         extraButtonsContainer?.appendChild(deleteLineBtn)
         extraButtonsContainer?.appendChild(coffeeBtn)
         extraButtonsContainer?.appendChild(puzzleBtn)
@@ -210,15 +212,23 @@ function makeButton(type: string, className: string, tooltipMsg: string, element
             }
         }
         else if (type == "deleteLineBtn") {
-            deleteLineFunction()
+            const view = this.app.workspace.getActiveViewOfType(MarkdownView);
+            const editor = view?.editor as Editor
+            editor.exec("deleteLine")
+            editor.focus()
+        }
+        else if (type == "undoBtn") {
+            const view = this.app.workspace.getActiveViewOfType(MarkdownView);
+            const editor = view?.editor as Editor
+            editor.undo()
+            editor.focus()
         }
         else if (type == "coffeeBtn") {
             const coffeeLink = "https://www.buymeacoffee.com/lorens";
             window.location.href = coffeeLink;
         }
         else if (type == "puzzleBtn") {
             const puzzleFileExists = await this.app.vault.adapter.exists("/ORPHANS/puzzle.md")
-            console.log(puzzleFileExists)
             if (!puzzleFileExists) {
 
                 const puzzleFile = await this.app.vault.create("/ORPHANS/puzzle.md", puzzleTemplate)
@@ -250,18 +260,6 @@ function setExternalIcon(con: any, type: string) {
         return
     }
 }
-//- Delete Line FUNCTION
-function deleteLineFunction() {
-    const view = this.app.workspace.getActiveViewOfType(MarkdownView);
-    const editor = view?.editor as Editor
-    const cursorPos = editor.getCursor()
-    const firstCurserPosition = { line: cursorPos.line, ch: 0 }
-    const secondCurserPosition = { line: cursorPos.line + 1, ch: 0 }
-    const thirdCurserPosition = { line: cursorPos.line - 1, ch: 0 }
-    editor.replaceRange("", firstCurserPosition, secondCurserPosition)
-    editor.setCursor(thirdCurserPosition)
-    editor.focus()
-}
 
 //- First Page Of Clusters FUNCTION
 function firstPageOfClusters(file: TFile, obsidianContainerElements: any) {

src/createFamily/coloringTreePanel.ts

@@ -3,9 +3,34 @@ import { App, TFile } from "obsidian";
 const clusters = "CLUSTERS"
 const orphans = "ORPHANS"
 
+//- Fold Properties element
+export async function foldPropertiesElement(app: App, file: TFile) {
+    if (file.path.startsWith(clusters) || file.path.startsWith(orphans)) {
+
+        this.app = app
+        const propertiesElement: HTMLElement = this.app.workspace.activeEditor.containerEl.querySelector('.metadata-container');
+        const metaDataContentElement = propertiesElement.querySelector('.collapse-indicator') as HTMLElement;
+        const collapseIndicatorElement = propertiesElement.querySelector('.metadata-properties-heading') as HTMLElement;
+        if (propertiesElement) {
+            propertiesElement.classList.add("collapse-from-cluster")
+            metaDataContentElement.classList.add("is-collapsed")
+            collapseIndicatorElement.classList.add("is-collapsed")
+            metaDataContentElement.addEventListener("click", () => {
+                propertiesElement.classList.remove("collapse-from-cluster")
+            })
+            propertiesElement.addEventListener("click", () => {
+                propertiesElement.classList.remove("collapse-from-cluster")
+            })
+        }
+
+    }
+
+
+}
 
 //- Coloring Tree Panel Elements
 export async function coloringTreePanel(app: App, file: TFile) {
+    // FIX if the file tree is expanded too much , the errors show from this function even its stops the next functions , for this reason i moved the fold function to top
     this.app = app
     // Coloring clusters tree Element
     const fatherClusters: HTMLElement = this.app.workspace.containerEl.querySelector('[draggable="true"][data-path="CLUSTERS"]');
@@ -35,30 +60,7 @@ export async function coloringTreePanel(app: App, file: TFile) {
     }
 }
 
-//- Fold Properties element
-export async function foldPropertiesElement(app: App, file: TFile) {
-    if (file.path.startsWith(clusters) || file.path.startsWith(orphans)) {
 
-        this.app = app
-        const propertiesElement: HTMLElement = this.app.workspace.activeEditor.containerEl.querySelector('.metadata-container');
-        const metaDataContentElement = propertiesElement.querySelector('.collapse-indicator') as HTMLElement;
-        const collapseIndicatorElement = propertiesElement.querySelector('.metadata-properties-heading') as HTMLElement;
-        if (propertiesElement) {
-            propertiesElement.classList.add("collapse-from-cluster")
-            metaDataContentElement.classList.add("is-collapsed")
-            collapseIndicatorElement.classList.add("is-collapsed")
-            metaDataContentElement.addEventListener("click", () => {
-                propertiesElement.classList.remove("collapse-from-cluster")
-            })
-            propertiesElement.addEventListener("click", () => {
-                propertiesElement.classList.remove("collapse-from-cluster")
-            })
-        }
-
-    }
-
-
-}
 //- Append Unsorted Files Counter Element Function
 export async function addUnsortedFilesCounter(app: App) {
     this.app = app

src/createFamily/commit_info.md

@@ -1,6 +1,6 @@
 ## Did
 
--   [*] fix the buttons leaf problem
+-   [*] add undo button to extra buttons
 
 ## ToDo
 

src/createFamily/style.scss

@@ -302,12 +302,12 @@
 
     &.showOnClusters {
       background-color: var(--background-extra-button-container-clusters);
-      height: 84px;
+      height: 104px;
     }
 
     &.showOnOrphans {
       background-color: var(--background-extra-button-container-orphans);
-      height: 84px;
+      height: 104px;
     }
   }
 }
@@ -431,12 +431,12 @@
 
       &.showOnClusters {
 
-        height: 120px;
+        height: 160px;
       }
 
       &.showOnOrphans {
 
-        height: 120px;
+        height: 160px;
       }
     }
   }