Merge pull request #379 from basecamp/undo-redo

Undo/redo

Author: jorgemanrubia

app/assets/javascript/lexxy.js

@@ -5125,6 +5125,8 @@ class LexicalToolbarElement extends HTMLElement {
     this.#bindHotkeys();
     this.#assignButtonTabindex();
     this.#monitorSelectionChanges();
+    this.#monitorHistoryChanges();
+    this.#refreshToolbarOverflow();
   }
 
   #bindButtons() {
@@ -5200,6 +5202,30 @@ class LexicalToolbarElement extends HTMLElement {
     });
   }
 
+  #monitorHistoryChanges() {
+    this.editor.registerUpdateListener(() => {
+      this.#updateUndoRedoButtonStates();
+    });
+  }
+
+  #updateUndoRedoButtonStates() {
+    this.editor.getEditorState().read(() => {
+      const historyState = this.editorElement.historyState;
+      if (historyState) {
+        this.#setButtonDisabled("undo", historyState.undoStack.length === 0);
+        this.#setButtonDisabled("redo", historyState.redoStack.length === 0);
+      }
+    });
+  }
+
+  #setButtonDisabled(name, isDisabled) {
+    const button = this.querySelector(`[name="${name}"]`);
+    if (button) {
+      button.disabled = isDisabled;
+      button.setAttribute("aria-disabled", isDisabled.toString());
+    }
+  }
+
   #updateButtonStates() {
     const selection = Nr();
     if (!cr(selection)) return
@@ -5228,6 +5254,8 @@ class LexicalToolbarElement extends HTMLElement {
     this.#setButtonPressed("quote", isInQuote);
     this.#setButtonPressed("heading", isInHeading);
     this.#setButtonPressed("link", isInLink);
+
+    this.#updateUndoRedoButtonStates();
   }
 
   #isSelectionInInlineCode(selection) {
@@ -5300,17 +5328,17 @@ class LexicalToolbarElement extends HTMLElement {
 
     for (const button of buttons) {
       if (this.#toolbarIsOverflowing()) {
-        this.#overflowMenu.appendChild(button);
+        this.#overflowMenu.prepend(button);
         movedToOverflow = true;
       } else {
-        if (movedToOverflow) this.#overflowMenu.appendChild(button);
+        if (movedToOverflow) this.#overflowMenu.prepend(button);
         break
       }
     }
   }
 
   get #buttons() {
-    return Array.from(this.querySelectorAll(":scope > button"))
+    return Array.from(this.querySelectorAll(":scope > button, :scope > [role=separator]"))
   }
 
   static get defaultTemplate() {
@@ -5372,6 +5400,16 @@ class LexicalToolbarElement extends HTMLElement {
       <button class="lexxy-editor__toolbar-button" type="button" name="divider" data-command="insertHorizontalDivider" title="Insert a divider">
         <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 12C0 11.4477 0.447715 11 1 11H23C23.5523 11 24 11.4477 24 12C24 12.5523 23.5523 13 23 13H1C0.447716 13 0 12.5523 0 12Z"/><path d="M4 5C4 3.89543 4.89543 3 6 3H18C19.1046 3 20 3.89543 20 5C20 6.10457 19.1046 7 18 7H6C4.89543 7 4 6.10457 4 5Z"/><path d="M4 19C4 17.8954 4.89543 17 6 17H18C19.1046 17 20 17.8954 20 19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19Z"/></svg>
       </button>
+      
+      <div class="lexxy-editor__toolbar-spacer" role="separator"></div>
+      
+      <button class="lexxy-editor__toolbar-button" type="button" name="undo" data-command="undo" title="Undo" data-hotkey="cmd+z ctrl+z">
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.64648 8.26531C7.93911 6.56386 10.7827 5.77629 13.624 6.05535C16.4655 6.33452 19.1018 7.66079 21.0195 9.77605C22.5839 11.5016 23.5799 13.6516 23.8936 15.9352C24.0115 16.7939 23.2974 17.4997 22.4307 17.4997C21.5641 17.4997 20.8766 16.7915 20.7148 15.9401C20.4295 14.4379 19.7348 13.0321 18.6943 11.8844C17.3 10.3464 15.3835 9.38139 13.3174 9.17839C11.2514 8.97546 9.18359 9.54856 7.5166 10.7858C6.38259 11.6275 5.48981 12.7361 4.90723 13.9997H8.5C9.3283 13.9997 9.99979 14.6714 10 15.4997C10 16.3281 9.32843 16.9997 8.5 16.9997H1.5C0.671573 16.9997 0 16.3281 0 15.4997V8.49968C0.000213656 7.67144 0.671705 6.99968 1.5 6.99968C2.3283 6.99968 2.99979 7.67144 3 8.49968V11.0212C3.7166 9.9704 4.60793 9.03613 5.64648 8.26531Z"/></svg>
+      </button>
+
+      <button class="lexxy-editor__toolbar-button" type="button" name="redo" data-command="redo" title="Redo" data-hotkey="cmd+shift+z ctrl+shift+z ctrl+y">
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.2599 8.26531C15.9672 6.56386 13.1237 5.77629 10.2823 6.05535C7.4408 6.33452 4.80455 7.66079 2.88681 9.77605C1.32245 11.5016 0.326407 13.6516 0.0127834 15.9352C-0.105117 16.7939 0.608975 17.4997 1.47567 17.4997C2.34228 17.4997 3.02969 16.7915 3.19149 15.9401C3.47682 14.4379 4.17156 13.0321 5.212 11.8844C6.60637 10.3464 8.52287 9.38139 10.589 9.17839C12.655 8.97546 14.7227 9.54856 16.3897 10.7858C17.5237 11.6275 18.4165 12.7361 18.9991 13.9997H15.4063C14.578 13.9997 13.9066 14.6714 13.9063 15.4997C13.9063 16.3281 14.5779 16.9997 15.4063 16.9997H22.4063C23.2348 16.9997 23.9063 16.3281 23.9063 15.4997V8.49968C23.9061 7.67144 23.2346 6.99968 22.4063 6.99968C21.578 6.99968 20.9066 7.67144 20.9063 8.49968V11.0212C20.1897 9.9704 19.2984 9.03613 18.2599 8.26531Z"/></svg>
+      </button>
 
       <details class="lexxy-editor__toolbar-overflow">
         <summary class="lexxy-editor__toolbar-button" aria-label="Show more toolbar buttons">•••</summary>
@@ -6004,7 +6042,9 @@ const COMMANDS = [
   "insertQuoteBlock",
   "insertCodeBlock",
   "insertHorizontalDivider",
-  "uploadAttachments"
+  "uploadAttachments",
+  "undo",
+  "redo"
 ];
 
 class CommandDispatcher {
@@ -6140,6 +6180,14 @@ class CommandDispatcher {
     setTimeout(() => input.remove(), 1000);
   }
 
+  dispatchUndo() {
+    this.editor.dispatchCommand(xe$1, undefined);
+  }
+
+  dispatchRedo() {
+    this.editor.dispatchCommand(Ce$1, undefined);
+  }
+
   #registerCommands() {
     for (const command of COMMANDS) {
       const methodName = `dispatch${capitalize(command)}`;
@@ -7986,7 +8034,8 @@ class LexicalEditorElement extends HTMLElement {
 
   #registerComponents() {
     Mt(this.editor);
-    v$1(this.editor, E$1(), 20);
+    this.historyState = E$1();
+    v$1(this.editor, this.historyState, 20);
     _t$3(this.editor);
     this.#registerCodeHiglightingComponents();
     et(this.editor, Bt);

app/assets/javascript/lexxy.js.br

@@ -36,7 +36,7 @@
     inline-size: auto;
 
     @media(any-hover: hover) {
-      &:hover {
+      &:hover:not([aria-disabled="true"]) {
         background: var(--lexxy-color-ink-lightest);
       }
     }
@@ -103,7 +103,7 @@
   display: grid;
   place-items: center;
 
-  &:is(:active),
+  &:is(:active):not([aria-disabled="true"]),
   &[aria-pressed="true"] {
     background-color: var(--lexxy-color-selected);
 
@@ -112,6 +112,11 @@
     }
   }
 
+  &[aria-disabled="true"] {
+    cursor: default;
+    opacity: 0.3;
+  }
+
   svg {
     -webkit-touch-callout: none;
     block-size: var(--lexxy-toolbar-icon-size);
@@ -122,8 +127,18 @@
   }
 }
 
+:where(.lexxy-editor__toolbar-spacer) {
+  flex: 1;
+}
+
+/* Make sure spacer is only displayed if there's another button before it */
+* + :where(.lexxy-editor__toolbar-spacer) {
+  min-inline-size: 1lh;
+}
+
 :where(.lexxy-editor__toolbar-overflow) {
   display: none;
+  justify-self: flex-end;
   position: relative;
   z-index: 1;
 

app/assets/javascript/lexxy.js.gz

@@ -3,7 +3,9 @@ import {
   $isRangeSelection,
   PASTE_COMMAND,
   COMMAND_PRIORITY_LOW,
-  FORMAT_TEXT_COMMAND
+  FORMAT_TEXT_COMMAND,
+  UNDO_COMMAND,
+  REDO_COMMAND
 } from "lexical"
 
 import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from "@lexical/list"
@@ -26,7 +28,9 @@ const COMMANDS = [
   "insertQuoteBlock",
   "insertCodeBlock",
   "insertHorizontalDivider",
-  "uploadAttachments"
+  "uploadAttachments",
+  "undo",
+  "redo"
 ]
 
 export class CommandDispatcher {
@@ -162,6 +166,14 @@ export class CommandDispatcher {
     setTimeout(() => input.remove(), 1000)
   }
 
+  dispatchUndo() {
+    this.editor.dispatchCommand(UNDO_COMMAND, undefined)
+  }
+
+  dispatchRedo() {
+    this.editor.dispatchCommand(REDO_COMMAND, undefined)
+  }
+
   #registerCommands() {
     for (const command of COMMANDS) {
       const methodName = `dispatch${capitalize(command)}`

app/assets/javascript/lexxy.min.js

@@ -279,7 +279,8 @@ export default class LexicalEditorElement extends HTMLElement {
 
   #registerComponents() {
     registerRichText(this.editor)
-    registerHistory(this.editor, createEmptyHistoryState(), 20)
+    this.historyState = createEmptyHistoryState()
+    registerHistory(this.editor, this.historyState, 20)
     registerList(this.editor)
     this.#registerCodeHiglightingComponents()
     registerMarkdownShortcuts(this.editor, TRANSFORMERS)