From 3f9e6fba3bb1846590351187566126cadee46d9e Mon Sep 17 00:00:00 2001 From: Yves Rijckaert Date: Tue, 30 Jan 2024 09:41:56 +0100 Subject: [PATCH 1/3] feat: add rich text undo redo btns --- .../src/Toolbar/components/ButtonRedo.tsx | 24 +++++++++++++++++++ .../src/Toolbar/components/ButtonUndo.tsx | 24 +++++++++++++++++++ packages/rich-text/src/Toolbar/index.tsx | 5 ++++ 3 files changed, 53 insertions(+) create mode 100644 packages/rich-text/src/Toolbar/components/ButtonRedo.tsx create mode 100644 packages/rich-text/src/Toolbar/components/ButtonUndo.tsx diff --git a/packages/rich-text/src/Toolbar/components/ButtonRedo.tsx b/packages/rich-text/src/Toolbar/components/ButtonRedo.tsx new file mode 100644 index 000000000..45b2499f0 --- /dev/null +++ b/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 ( + + + + + + ); +}; diff --git a/packages/rich-text/src/Toolbar/components/ButtonUndo.tsx b/packages/rich-text/src/Toolbar/components/ButtonUndo.tsx new file mode 100644 index 000000000..350cf7092 --- /dev/null +++ b/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 ( + + + + + + ); +}; diff --git a/packages/rich-text/src/Toolbar/index.tsx b/packages/rich-text/src/Toolbar/index.tsx index 4d040882f..ea4445054 100644 --- a/packages/rich-text/src/Toolbar/index.tsx +++ b/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 = { @@ -136,6 +138,9 @@ const Toolbar = ({ isDisabled }: ToolbarProps) => {
+ + + {validationInfo.isAnyMarkEnabled && } {isMarkEnabled(sdk.field, MARKS.BOLD) && } From e8ab53f96b12e4149179d41893480e106ad6ced2 Mon Sep 17 00:00:00 2001 From: Yves Rijckaert Date: Fri, 1 Mar 2024 12:52:14 +0100 Subject: [PATCH 2/3] fix: wrapping toolbar --- packages/rich-text/src/Toolbar/index.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/rich-text/src/Toolbar/index.tsx b/packages/rich-text/src/Toolbar/index.tsx index ea4445054..491a775a1 100644 --- a/packages/rich-text/src/Toolbar/index.tsx +++ b/packages/rich-text/src/Toolbar/index.tsx @@ -60,7 +60,6 @@ const styles = { webkitAlignSelf: 'flex-start', alignSelf: 'flex-start', msFlexItemAlign: 'start', - marginLeft: 'auto', }), formattingOptionsWrapper: css({ display: ['-webkit-box', '-ms-flexbox', 'flex'], @@ -134,7 +133,14 @@ const Toolbar = ({ isDisabled }: ToolbarProps) => { const shouldShowDropdown = boldItalicUnderlineAvailable && dropdownItemsAvailable; return ( - +
From 324c1c23ec5ec70a8c6a70c4795f0d519aacc9ff Mon Sep 17 00:00:00 2001 From: Yves Rijckaert Date: Fri, 1 Mar 2024 12:56:46 +0100 Subject: [PATCH 3/3] test: undo redo toolbar buttons --- .../rich-text/RichTextEditor.Tables.spec.ts | 2 +- .../rich-text/RichTextEditor.spec.ts | 19 ++++++++++++++++++- cypress/component/rich-text/RichTextPage.ts | 8 ++++++++ 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/cypress/component/rich-text/RichTextEditor.Tables.spec.ts b/cypress/component/rich-text/RichTextEditor.Tables.spec.ts index ad373f771..a6b73d461 100644 --- a/cypress/component/rich-text/RichTextEditor.Tables.spec.ts +++ b/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', () => { diff --git a/cypress/component/rich-text/RichTextEditor.spec.ts b/cypress/component/rich-text/RichTextEditor.spec.ts index 1de02ea30..1bba3e605 100644 --- a/cypress/component/rich-text/RichTextEditor.spec.ts +++ b/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.')); diff --git a/cypress/component/rich-text/RichTextPage.ts b/cypress/component/rich-text/RichTextPage.ts index e22308be3..332fc14de 100644 --- a/cypress/component/rich-text/RichTextPage.ts +++ b/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'); },