Feature: Undo Redo options multi tool #2297 (#2348)

* Implement Command class for Command Pattern

Created a base `Command` class to implement the **Command Pattern**. This class provides a skeletal implementation for `execute`, `undo`, and `redo` methods.

**Note:** This class is intended to be subclassed and not instantiated directly.

* Add undo/redo stacks and operations

* Use rotate element command to perform execute/undo/redo operations

* Handle commands executed through events
- Add "command-execution" event listener to execute commands that are not invoked from the same class while adding the command to the undo stack and clearing the redo stack.

* Add and use rotate all command to rotate/redo/undo all elements

* Use command pattern to delete pages

* Use command pattern for page selection

* Use command pattern to move pages up and down

* Use command pattern to remove selected pages

* Use command pattern to perform the splitting operation

* Add undo/redo functionality with filename input exclusion

- Implement undo (Ctrl+Z) and redo (Ctrl+Y) functionality.
- Prevent undo/redo actions when the filename input field is focused.
- Ensures proper handling of undo/redo actions without interfering with text editing.

* Introduce UndoManager for managing undo/redo operations

 - Encapsulate undo/redo stacks and operations within UndoManager.
- Simplify handling of undo/redo functionality through a dedicated manager.

* Call execute on splitAllCommand

- Fix a bug that caused split all functionality to not work as execute() wasn't called on splitAllCommand

* Add undo/redo buttons to multi tool

- Add undo/redo buttons to multi tool
- Dispatch an event upon state change (such as changes in the undo/redo stacks) to update the UI accordingly.

* Add undo/redo to translations

* Replace hard-coded "Undo"/"Redo" with translation keys in multi tool

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>

src/main/resources/templates/multi-tool.html

@@ -57,6 +57,27 @@
                     </span>
                     <span class="btn-tooltip" th:text="#{multiTool.insertPageBreak}"></span>
                   </button>
+                  <button id="undo-btn" class="btn btn-secondary" onclick="undo()" disabled>
+                    <span class="material-symbols-rounded">
+                      undo
+                    </span>
+                    <span class="btn-tooltip">
+                      <div th:text="#{multiTool.undo}"></div>
+                      <div class="text-uppercase" th:text="'(CTRL + Z)'"></div>
+                    </span>
+                  </button>
+
+                  <button id="redo-btn" class="btn btn-secondary" onclick="redo()" disabled>
+                    <span class="material-symbols-rounded">
+                      redo
+                    </span>
+                    <span class="btn-tooltip">
+                      <div th:text="#{multiTool.redo}"></div>
+                      <div class="text-uppercase" th:text="'(CTRL + Y)'"></div>
+                    </span>
+                  </button>
+                  </button>
+
                   <button id="select-pages-container" class="btn btn-secondary enable-on-file"
                     onclick="toggleSelectPageVisibility()" disabled>
                     <span id="select-pages-button" class="material-symbols-rounded">
@@ -139,7 +160,9 @@
         split: '[[#{multiTool.split}]]',
         addFile: '[[#{multiTool.addFile}]]',
         insertPageBreak:'[[#{multiTool.insertPageBreak}]]',
-        dragDropMessage:'[[#{multiTool.dragDropMessage}]]'
+        dragDropMessage:'[[#{multiTool.dragDropMessage}]]',
+        undo: '[[#{multiTool.undo}]]',
+        redo: '[[#{multiTool.redo}]]'
     };
 
 
@@ -155,17 +178,20 @@
     });
   </script>
   <script type="module">
+    import { UndoManager } from './js/multitool/UndoManager.js';
     import PdfContainer from './js/multitool/PdfContainer.js';
     import DragDropManager from "./js/multitool/DragDropManager.js";
     import ImageHighlighter from "./js/multitool/ImageHighlighter.js";
     import PdfActionsManager from './js/multitool/PdfActionsManager.js';
     import FileDragManager from './js/multitool/fileInput.js';
     // enables drag and drop
+
+    var undoManager = new UndoManager();
     const dragDropManager = new DragDropManager('drag-container', 'pages-container');
     // enables image highlight on click
     const imageHighlighter = new ImageHighlighter('image-highlighter');
     // enables the default action buttons on each file
-    const pdfActionsManager = new PdfActionsManager('pages-container');
+    const pdfActionsManager = new PdfActionsManager('pages-container', undoManager);
     const fileDragManager = new FileDragManager();
     // Scroll the wrapper horizontally
 
@@ -178,10 +204,23 @@
         imageHighlighter,
         pdfActionsManager,
         fileDragManager
-      ]
+      ],
+      undoManager
     )
 
     fileDragManager.setCallback(async (files) => pdfContainer.addFilesFromFiles(files));
+    document.addEventListener('keydown', function(event) {
+    let targetElementId = event.target.id;
+
+    // To avoid undoing/redoing the page when the user is simply undoing/redoing text
+    const isFilenameInputField = (targetElementId === 'filename-input') && (event.target === document.activeElement);
+
+    const isUndo = (event.ctrlKey && event.key === 'z');
+    const isRedo = (event.ctrlKey && event.key == 'y');
+    if (isUndo && !isFilenameInputField)
+      undoManager.undo();
+    else if (isRedo && !isFilenameInputField) undoManager.redo();
+});
   </script>
 </body>