feat: implement undo/redo handlers

Author: ChrisUser

lib/ContentEditable.tsx

@@ -46,6 +46,8 @@ const ContentEditable: React.FC<ContentEditableProps> = ({
 }) => {
   const [content, setContent] = useState("")
   const divRef = useRef<HTMLDivElement | null>(null)
+  const undoStack = useRef<string[]>([])
+  const redoStack = useRef<string[]>([])
 
   useEffect(() => {
     if (updatedContent !== null && updatedContent !== undefined) {
@@ -70,6 +72,60 @@ const ContentEditable: React.FC<ContentEditableProps> = ({
     }
   }, [autoFocus])
 
+  useEffect(() => {
+    undoStack.current.push(content)
+  }, [content])
+
+  /**
+   * Handles undo and redo keyboard shortcuts for content editable div.
+   * - Undo with `Ctrl + Z`
+   * - Redo with `Ctrl + Y` or `Ctrl + Shift + Z`
+   *
+   * Prevents the default action.
+   * Pops the last content from the undo/redo stack and pushes it to the redo/undo stack.
+   * Sets the content to the previous state and updates
+   * the content of the div and sets the caret at the end.
+   */
+  const handleUndoRedo = useCallback(
+    (e: KeyboardEvent) => {
+      // Undo
+      if (e.ctrlKey && e.key === "z") {
+        e.preventDefault()
+        if (undoStack.current.length > 1) {
+          redoStack.current.push(undoStack.current.pop() as string)
+          const previousContent =
+            undoStack.current[undoStack.current.length - 1]
+          setContent(previousContent)
+          if (divRef.current) {
+            divRef.current.innerText = previousContent
+            setCaretAtTheEnd(divRef.current)
+          }
+        }
+        // Redo
+      } else if (
+        (e.ctrlKey && e.key === "y") ||
+        (e.ctrlKey && e.shiftKey && e.key === "Z")
+      ) {
+        e.preventDefault()
+        if (redoStack.current.length > 0) {
+          const nextContent = redoStack.current.pop() as string
+          undoStack.current.push(nextContent)
+          setContent(nextContent)
+          if (divRef.current) {
+            divRef.current.innerText = nextContent
+            setCaretAtTheEnd(divRef.current)
+          }
+        }
+      }
+    },
+    [setContent]
+  )
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleUndoRedo)
+    return () => document.removeEventListener("keydown", handleUndoRedo)
+  }, [handleUndoRedo])
+
   /**
    * Checks if the caret is on the last line of a contenteditable element
    * @param element - The HTMLDivElement to check

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-basic-contenteditable",
   "description": "React contenteditable component. Super-customizable!",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",