feat: add rich text undo redo btns [TOL-1038]

cypress/component/rich-text/RichTextEditor.Tables.spec.ts

@@ -168,7 +168,7 @@ describe('Rich Text Editor', { viewportHeight: 2000 }, () => {
         BLOCKS.HEADING_4,
         BLOCKS.HEADING_5,
         BLOCKS.HEADING_6,
-      ].forEach((type) => getDropdownItem(type).get('button').should('not.be.disabled'));
+      ].forEach((type) => getDropdownItem(type).should('not.be.disabled'));
     });
 
     describe('Inserting Tables', () => {

cypress/component/rich-text/RichTextEditor.spec.ts

@@ -96,7 +96,7 @@ describe('Rich Text Editor', { viewportHeight: 2000 }, () => {
   });
 
   describe('history', () => {
-    it('supports undo and redo', () => {
+    it('supports undo and redo with keyboard shortcuts', () => {
       const expectedValue = doc(block(BLOCKS.PARAGRAPH, {}, text('some text.')));
 
       // type
@@ -113,6 +113,23 @@ describe('Rich Text Editor', { viewportHeight: 2000 }, () => {
       richText.expectValue(expectedValue);
     });
 
+    it('supports undo and redo with toolbar buttons', () => {
+      const expectedValue = doc(block(BLOCKS.PARAGRAPH, {}, text('some text.')));
+
+      // type
+      richText.editor.click().type('some text.').click();
+
+      richText.expectValue(expectedValue);
+
+      // undo
+      richText.toolbar.undo.click();
+      richText.expectValue(undefined);
+
+      // redo
+      richText.toolbar.redo.click();
+      richText.expectValue(expectedValue);
+    });
+
     it('correctly undoes after drag&drop', () => {
       cy.viewport(1200, 1200);
       const paragraph = block(BLOCKS.PARAGRAPH, {}, text('some text.'));

cypress/component/rich-text/RichTextPage.ts

@@ -25,6 +25,14 @@ export class RichTextPage {
         cy.findByTestId(`dropdown-option-${type}`).click({ force: true });
       },
 
+      get undo() {
+        return cy.findByTestId('undo-toolbar-button');
+      },
+
+      get redo() {
+        return cy.findByTestId('redo-toolbar-button');
+      },
+
       get bold() {
         return cy.findByTestId('bold-toolbar-button');
       },

packages/rich-text/src/Toolbar/components/ButtonRedo.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Icon } from '@contentful/f36-components';
+
+import { useContentfulEditor } from '../../ContentfulEditorProvider';
+import { ToolbarButton } from '../../plugins/shared/ToolbarButton';
+
+export const ButtonRedo = () => {
+  const editor = useContentfulEditor();
+
+  return (
+    <ToolbarButton
+      title="Redo"
+      testId="redo-toolbar-button"
+      onClick={editor.redo}
+      isActive={false}
+      isDisabled={editor.history.redos.length === 0}
+    >
+      <Icon variant="secondary">
+        <path d="M18.4,10.6C16.55,9 14.15,8 11.5,8C6.85,8 2.92,11.03 1.54,15.22L3.9,16C4.95,12.81 7.95,10.5 11.5,10.5C13.45,10.5 15.23,11.22 16.62,12.38L13,16H22V7L18.4,10.6Z" />
+      </Icon>
+    </ToolbarButton>
+  );
+};

packages/rich-text/src/Toolbar/components/ButtonUndo.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Icon } from '@contentful/f36-components';
+
+import { useContentfulEditor } from '../../ContentfulEditorProvider';
+import { ToolbarButton } from '../../plugins/shared/ToolbarButton';
+
+export const ButtonUndo = () => {
+  const editor = useContentfulEditor();
+
+  return (
+    <ToolbarButton
+      title="Undo"
+      testId="undo-toolbar-button"
+      onClick={editor.undo}
+      isActive={false}
+      isDisabled={editor.history.undos.length === 0}
+    >
+      <Icon variant="secondary">
+        <path d="M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z" />
+      </Icon>
+    </ToolbarButton>
+  );
+};

packages/rich-text/src/Toolbar/index.tsx

@@ -27,6 +27,8 @@ import { ToolbarUnderlineButton } from '../plugins/Marks/Underline';
 import { ToolbarQuoteButton } from '../plugins/Quote';
 import { ToolbarTableButton } from '../plugins/Table';
 import { useSdkContext } from '../SdkProvider';
+import { ButtonRedo } from './components/ButtonRedo';
+import { ButtonUndo } from './components/ButtonUndo';
 import { EmbedEntityWidget } from './components/EmbedEntityWidget';
 
 type ToolbarProps = {
@@ -58,7 +60,6 @@ const styles = {
     webkitAlignSelf: 'flex-start',
     alignSelf: 'flex-start',
     msFlexItemAlign: 'start',
-    marginLeft: 'auto',
   }),
   formattingOptionsWrapper: css({
     display: ['-webkit-box', '-ms-flexbox', 'flex'],
@@ -132,10 +133,20 @@ const Toolbar = ({ isDisabled }: ToolbarProps) => {
   const shouldShowDropdown = boldItalicUnderlineAvailable && dropdownItemsAvailable;
 
   return (
-    <Flex testId="toolbar" className={styles.toolbar} alignItems="center">
+    <Flex
+      gap="spacingS"
+      flexWrap="wrap"
+      flexDirection="row"
+      testId="toolbar"
+      className={styles.toolbar}
+      justifyContent="space-between"
+    >
       <div className={styles.formattingOptionsWrapper}>
         <ToolbarHeadingButton isDisabled={isDisabled || !canInsertBlocks} />
 
+        <span className={styles.divider} />
+        <ButtonUndo />
+        <ButtonRedo />
         {validationInfo.isAnyMarkEnabled && <span className={styles.divider} />}
 
         {isMarkEnabled(sdk.field, MARKS.BOLD) && <ToolbarBoldButton isDisabled={isDisabled} />}