feat: undo redo rich text tracking [TOL-1987] (#1657)

* feat: undo redo rich text tracking * test: tracking undo and redo
contentful · May 17, 2024 · 7f72d28 · 7f72d28
1 parent aba605c
commit 7f72d28
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 3 deletions.
diff --git a/cypress/component/rich-text/RichTextEditor.Tracking.spec.ts b/cypress/component/rich-text/RichTextEditor.Tracking.spec.ts
@@ -967,4 +967,24 @@ describe('Rich Text Editor - Tracking', { viewportHeight: 2000, viewportWidth: 1
  cy.get('@onAction').should('have.callCount', 3);
  });
  });
+
+ describe('Undo / redo', () => {
+ it('tracks via toolbar', () => {
+ richText.editor.click().type('some text.').click();
+ richText.toolbar.undo.click();
+ cy.get('@onAction').should('be.calledWithExactly', ...action('undo', 'toolbar-icon'));
+ richText.toolbar.redo.click();
+ cy.get('@onAction').should('be.calledWithExactly', ...action('redo', 'toolbar-icon'));
+ cy.get('@onAction').should('have.callCount', 2);
+ });
+
+ it('tracks via shortcut', () => {
+ richText.editor.click().type('some text.').click();
+ richText.editor.click().type(`{${mod}}z`);
+ cy.get('@onAction').should('be.calledWithExactly', ...action('undo', 'shortcut'));
+ richText.editor.type(`{${mod}}{shift}z`);
+ cy.get('@onAction').should('be.calledWithExactly', ...action('redo', 'shortcut'));
+ cy.get('@onAction').should('have.callCount', 2);
+ });
+ });
 });
diff --git a/packages/rich-text/src/Toolbar/components/ButtonRedo.tsx b/packages/rich-text/src/Toolbar/components/ButtonRedo.tsx
@@ -8,11 +8,15 @@ import { ToolbarButton } from '../../plugins/shared/ToolbarButton';
 export const ButtonRedo = () => {
  const editor = useContentfulEditor();
 
+ const onClickHandler = () => {
+ editor.redo('toolbar');
+ };
+
  return (
  <ToolbarButton
  title="Redo"
  testId="redo-toolbar-button"
- onClick={editor.redo}
+ onClick={onClickHandler}
  isActive={false}
  isDisabled={editor.history.redos.length === 0}
  >

diff --git a/packages/rich-text/src/Toolbar/components/ButtonUndo.tsx b/packages/rich-text/src/Toolbar/components/ButtonUndo.tsx
@@ -8,11 +8,15 @@ import { ToolbarButton } from '../../plugins/shared/ToolbarButton';
 export const ButtonUndo = () => {
  const editor = useContentfulEditor();
 
+ const onClickHandler = () => {
+ editor.undo('toolbar');
+ };
+
  return (
  <ToolbarButton
  title="Undo"
  testId="undo-toolbar-button"
- onClick={editor.undo}
+ onClick={onClickHandler}
  isActive={false}
  isDisabled={editor.history.undos.length === 0}
  >

diff --git a/packages/rich-text/src/internal/types/editor.ts b/packages/rich-text/src/internal/types/editor.ts
@@ -33,6 +33,14 @@ export type Value = Element[];
 export type ReactEditor = p.TReactEditor<Value>;
 export interface PlateEditor extends p.PlateEditor<Value> {
  tracking: TrackingPluginActions;
+ undo: {
+ (): void;
+ (source: 'toolbar' | 'shortcut'): void;
+ };
+ redo: {
+ (): void;
+ (source: 'toolbar' | 'shortcut'): void;
+ };
 }
 
 export type Node = p.ElementOf<PlateEditor> | p.TextOf<PlateEditor>;

diff --git a/packages/rich-text/src/plugins/Tracking/createTrackingPlugin.ts b/packages/rich-text/src/plugins/Tracking/createTrackingPlugin.ts
@@ -19,6 +19,9 @@ export type RichTextTrackingActionName =
  // Copy & Paste
  | 'paste'
  | 'invalidTablePaste'
+ // Undo & Redo
+ | 'undo'
+ | 'redo'
  // Hyperlinks
  | 'cancelCreateHyperlinkDialog'
  | 'cancelEditHyperlinkDialog'
@@ -136,7 +139,7 @@ export const createTrackingPlugin = (onAction: RichTextTrackingActionHandler): P
  return {
  key: 'TrackingPlugin',
  withOverrides: (editor) => {
- const { insertData } = editor;
+ const { insertData, undo, redo } = editor;
 
  editor.tracking = trackingActions;
 
@@ -161,6 +164,23 @@ export const createTrackingPlugin = (onAction: RichTextTrackingActionHandler): P
  insertData(data);
  };
 
+ editor.undo = (source?: 'toolbar' | 'shortcut') => {
+ undo();
+ if (source === 'toolbar') {
+ editor.tracking.onToolbarAction('undo');
+ } else {
+ editor.tracking.onShortcutAction('undo');
+ }
+ };
+
+ editor.redo = (source?: 'toolbar' | 'shortcut') => {
+ redo();
+ if (source === 'toolbar') {
+ editor.tracking.onToolbarAction('redo');
+ } else {
+ editor.tracking.onShortcutAction('redo');
+ }
+ };
  return editor;
  },
  };