Merge pull request #2163 from tf/text-undo

Add undo/redo to inline editable texts

entry_types/scrolled/package/package.json

@@ -30,6 +30,7 @@
     "screenfull": "^5.1.0",
     "scroll-timeline": "https://github.com/tf/scroll-timeline#pageflow-scrolled-2",
     "slate": "^0.57.3",
+    "slate-history": "^0.57.3",
     "slate-react": "^0.57.3",
     "slugify": "^1.4.6",
     "striptags": "^3.2.0",

entry_types/scrolled/package/src/frontend/inlineEditing/EditableInlineText/index.js

@@ -1,23 +1,34 @@
-import React, {memo, useMemo} from 'react';
+import React, {memo, useCallback, useMemo} from 'react';
 import classNames from 'classnames';
 import {createEditor} from 'slate';
 import {Slate, Editable, withReact} from 'slate-react';
+import {withHistory} from 'slate-history';
 
 import {TextPlaceholder} from '../TextPlaceholder';
 import {useCachedValue} from '../useCachedValue';
 
 import {useContentElementEditorState} from '../../useContentElementEditorState';
 
 import {decorateLineBreaks, useLineBreakHandler, withLineBreakNormalization} from './lineBreaks'
+import {useShortcutHandler} from './shortcuts';
 
 import styles from './index.module.css';
 import frontendStyles from '../../EditableInlineText.module.css';
 
 export const EditableInlineText = memo(function EditableInlineText({
   value, defaultValue = '', hyphens, placeholder, onChange
 }) {
-  const editor = useMemo(() => withLineBreakNormalization(withReact(createEditor())), []);
+  const editor = useMemo(
+    () => withLineBreakNormalization(withReact(withHistory(createEditor()))),
+    []
+  );
   const handleLineBreaks = useLineBreakHandler(editor);
+  const handleShortcuts = useShortcutHandler(editor);
+
+  const handleKeyDown = useCallback(event => {
+    handleLineBreaks(event);
+    handleShortcuts(event);
+  }, [handleLineBreaks, handleShortcuts]);
 
   const [cachedValue, setCachedValue] = useCachedValue(value, {
     defaultValue: [{
@@ -37,7 +48,7 @@ export const EditableInlineText = memo(function EditableInlineText({
          spellCheck="false">
       <Slate editor={editor} value={cachedValue} onChange={setCachedValue}>
         <Editable decorate={decorateLineBreaks}
-                  onKeyDown={handleLineBreaks}
+                  onKeyDown={handleKeyDown}
                   renderLeaf={renderLeaf} />
       </Slate>
       <TextPlaceholder text={placeholder}

entry_types/scrolled/package/src/frontend/inlineEditing/EditableInlineText/shortcuts.js

@@ -0,0 +1,18 @@
+import {useCallback} from 'react';
+
+export function useShortcutHandler(editor) {
+  return useCallback(event => {
+    if (!event.ctrlKey) {
+      return;
+    }
+
+    if (event.key === 'z') {
+      event.preventDefault()
+      editor.undo();
+    }
+    else if (event.key === 'y') {
+      event.preventDefault()
+      editor.redo();
+    }
+  }, [editor]);
+}

entry_types/scrolled/package/src/frontend/inlineEditing/EditableText/index.js

@@ -2,6 +2,7 @@ import React, {useCallback, useMemo, useEffect} from 'react';
 import classNames from 'classnames';
 import {createEditor, Transforms, Node, Text as SlateText, Range} from 'slate';
 import {Slate, Editable, withReact, ReactEditor} from 'slate-react';
+import {withHistory} from 'slate-history';
 
 import {Text} from '../../Text';
 import {useCachedValue} from '../useCachedValue';
@@ -48,7 +49,9 @@ export const EditableText = React.memo(function EditableText({
           {onlyParagraphs: !selectionRect},
           withLineBreakNormalization(
             withReact(
-              createEditor()
+              withHistory(
+                createEditor()
+              )
             )
           )
         )
@@ -77,7 +80,10 @@ export const EditableText = React.memo(function EditableText({
       children: [{ text: '' }],
     }],
     onDebouncedChange: onChange,
-    onReset: nextValue => resetSelectionIfOutsideNextValue(editor, nextValue)
+    onReset: nextValue => {
+      resetSelectionIfOutsideNextValue(editor, nextValue);
+      resetHistory(editor);
+    }
   });
 
   const {isSelected} = useContentElementEditorState();
@@ -148,3 +154,8 @@ function hasTextAtPoint(editor, point) {
   const node = Node.get(editor, point.path);
   return SlateText.isText(node) && point.offset <= node.text.length;
 }
+
+function resetHistory(editor) {
+  editor.history.undos = [];
+  editor.history.redos = [];
+}

entry_types/scrolled/package/src/frontend/inlineEditing/EditableText/shortcuts.js

@@ -7,7 +7,15 @@ export function useShortcutHandler(editor) {
       return;
     }
 
-    if (event.key === 'b') {
+    if (event.key === 'z') {
+      event.preventDefault()
+      editor.undo();
+    }
+    else if (event.key === 'y') {
+      event.preventDefault()
+      editor.redo();
+    }
+    else if (event.key === 'b') {
       event.preventDefault()
       toggleMark(editor, 'bold');
     }

yarn.lock

@@ -11720,6 +11720,14 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
+slate-history@^0.57.3:
+  version "0.57.3"
+  resolved "https://registry.yarnpkg.com/slate-history/-/slate-history-0.57.3.tgz#22e8263610d53d5753c8ede2cc90394c93fb6727"
+  integrity sha512-8vqjLWAsX79117uhfMPqDPXgi7QnFXSZjjSJotzhMRnuqYUw9RneWf/VGVKmsJXZ8JliaQ+QFYEd3EctvmDOlQ==
+  dependencies:
+    immer "^5.0.0"
+    is-plain-object "^3.0.0"
+
 slate-hyperscript@^0.57.3:
   version "0.57.3"
   resolved "https://registry.yarnpkg.com/slate-hyperscript/-/slate-hyperscript-0.57.3.tgz#69462c2f436f75f0c17d9a727514402fc8abbf3c"