@squiz/formatted-text-editor 1.12.0-alpha.14 → 1.12.0-alpha.16

package/lib/Editor/Editor.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoldExtension, ItalicExtension, NodeFormattingExtension, UnderlineExtension, wysiwygPreset, } from 'remirror/extensions';
+import { BoldExtension, ItalicExtension, NodeFormattingExtension, UnderlineExtension, HistoryExtension, wysiwygPreset, } from 'remirror/extensions';
 import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
 import { EditorToolbar } from '../EditorToolbar/EditorToolbar';
 const Editor = ({ content }) => {
@@ -10,6 +10,7 @@ const Editor = ({ content }) => {
             new ItalicExtension(),
             new NodeFormattingExtension(),
             new UnderlineExtension(),
+            new HistoryExtension(),
         ],
         content,
         selection: 'start',
@@ -18,7 +19,7 @@ const Editor = ({ content }) => {
     const handleChange = (parameter) => {
         setState(parameter.state);
     };
-    return (React.createElement(Remirror, { manager: manager, state: state, onChange: handleChange, placeholder: "Write something" },
+    return (React.createElement(Remirror, { manager: manager, state: state, onChange: handleChange, placeholder: "Write something", label: "Text editor" },
         React.createElement(EditorToolbar, { manager: manager }),
         React.createElement(EditorComponent, null),
         React.createElement(EditorToolbar, { manager: manager, isPopover: true })));

package/lib/EditorToolbar/EditorToolbar.js

@@ -1,9 +1,11 @@
 import React from 'react';
-import { Toolbar, FloatingToolbar } from '@remirror/react-components';
+import { Toolbar, FloatingToolbar, VerticalDivider } from '@remirror/react-components';
 import ItalicButton from './Tools/Italic/ItalicButton';
 import UnderlineButton from './Tools/Underline/UnderlineButton';
 import BoldButton from './Tools/Bold/BoldButton';
 import TextAlignButtons from './Tools/TextAlign/TextAlignButtons';
+import UndoButton from './Tools/Undo/UndoButton';
+import RedoButton from './Tools/Redo/RedoButton';
 // The editor main toolbar
 export const EditorToolbar = ({ manager, isPopover }) => {
     const extensionNames = {};
@@ -11,6 +13,10 @@ export const EditorToolbar = ({ manager, isPopover }) => {
         extensionNames[extension.name] = true;
     });
     return (React.createElement(React.Fragment, null, !isPopover ? (React.createElement(Toolbar, { className: "remirror-toolbar editor-toolbar" },
+        extensionNames.history && (React.createElement(React.Fragment, null,
+            React.createElement(UndoButton, null),
+            React.createElement(RedoButton, null),
+            React.createElement(VerticalDivider, { className: "editor-divider" }))),
         extensionNames.bold && React.createElement(BoldButton, null),
         extensionNames.italic && React.createElement(ItalicButton, null),
         extensionNames.underline && React.createElement(UnderlineButton, null),

package/lib/EditorToolbar/Tools/Redo/RedoButton.d.ts

@@ -0,0 +1,2 @@
+declare const RedoButton: () => JSX.Element;
+export default RedoButton;

package/lib/EditorToolbar/Tools/Redo/RedoButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useCommands, useHelpers } from '@remirror/react';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import RedoRoundedIcon from '@mui/icons-material/RedoRounded';
+const RedoButton = () => {
+    const { redo } = useCommands();
+    const { redoDepth } = useHelpers(true);
+    const handleSelect = () => {
+        if (redo.enabled()) {
+            redo();
+        }
+    };
+    const enabled = redoDepth() > 0;
+    return (React.createElement(ToolbarButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: false, icon: React.createElement(RedoRoundedIcon, null), label: "Redo (shift+cmd+Z)" }));
+};
+export default RedoButton;

package/lib/EditorToolbar/Tools/Undo/UndoButton.d.ts

@@ -0,0 +1,2 @@
+declare const UndoButton: () => JSX.Element;
+export default UndoButton;

package/lib/EditorToolbar/Tools/Undo/UndoButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useCommands, useHelpers } from '@remirror/react';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import UndoRoundedIcon from '@mui/icons-material/UndoRounded';
+const UndoButton = () => {
+    const { undo } = useCommands();
+    const { undoDepth } = useHelpers(true);
+    const handleSelect = () => {
+        if (undo.enabled()) {
+            undo();
+        }
+    };
+    const enabled = undoDepth() > 0;
+    return (React.createElement(ToolbarButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: false, icon: React.createElement(UndoRoundedIcon, null), label: "Undo (cmd+Z)" }));
+};
+export default UndoButton;

package/lib/index.css

@@ -3843,7 +3843,8 @@ button:active .remirror-menu-pane-shortcut,
 .toolbar-button ~ .toolbar-button {
   margin-left: 2px;
 }
-.toolbar-button.is-active {
+.toolbar-button.is-active,
+.toolbar-button:active {
   background-color: var(--blue-100);
   color: var(--blue-300);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.12.0-alpha.14",
+  "version": "1.12.0-alpha.16",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -55,5 +55,5 @@
   "volta": {
     "node": "16.19.0"
   },
-  "gitHead": "76fa4ca4f3c3fa3b0a808232474df640550871cc"
+  "gitHead": "25328af157198a2b393ebab5896efa9b28cbdd69"
 }

package/src/Editor/Editor.tsx

@@ -4,6 +4,7 @@ import {
   ItalicExtension,
   NodeFormattingExtension,
   UnderlineExtension,
+  HistoryExtension,
   wysiwygPreset,
 } from 'remirror/extensions';
 import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
@@ -22,6 +23,7 @@ const Editor = ({ content }: EditorProps) => {
       new ItalicExtension(),
       new NodeFormattingExtension(),
       new UnderlineExtension(),
+      new HistoryExtension(),
     ],
     content,
     selection: 'start',
@@ -33,7 +35,7 @@ const Editor = ({ content }: EditorProps) => {
   };
 
   return (
-    <Remirror manager={manager} state={state} onChange={handleChange} placeholder="Write something">
+    <Remirror manager={manager} state={state} onChange={handleChange} placeholder="Write something" label="Text editor">
       <EditorToolbar manager={manager} />
       <EditorComponent />
       <EditorToolbar manager={manager} isPopover />

package/src/EditorToolbar/EditorToolbar.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
-import { Toolbar, FloatingToolbar } from '@remirror/react-components';
+import { Toolbar, FloatingToolbar, VerticalDivider } from '@remirror/react-components';
 import { RemirrorManager } from 'remirror';
 import ItalicButton from './Tools/Italic/ItalicButton';
 import UnderlineButton from './Tools/Underline/UnderlineButton';
 import BoldButton from './Tools/Bold/BoldButton';
 import TextAlignButtons from './Tools/TextAlign/TextAlignButtons';
+import UndoButton from './Tools/Undo/UndoButton';
+import RedoButton from './Tools/Redo/RedoButton';
 
 type EditorToolbarProps = {
   manager: RemirrorManager<any>;
@@ -23,6 +25,13 @@ export const EditorToolbar = ({ manager, isPopover }: EditorToolbarProps) => {
     <>
       {!isPopover ? (
         <Toolbar className="remirror-toolbar editor-toolbar">
+          {extensionNames.history && (
+            <>
+              <UndoButton />
+              <RedoButton />
+              <VerticalDivider className="editor-divider" />
+            </>
+          )}
           {extensionNames.bold && <BoldButton />}
           {extensionNames.italic && <ItalicButton />}
           {extensionNames.underline && <UnderlineButton />}

package/src/EditorToolbar/Tools/Redo/RedoButton.spec.tsx

@@ -0,0 +1,59 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Editor from '../../../Editor/Editor';
+import React from 'react';
+
+describe('Redo button', () => {
+  it('Renders the redo button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Redo (shift+cmd+Z)' })).toBeInTheDocument();
+  });
+
+  it('Renders a disabled button if you have not made any changes yet', () => {
+    render(<Editor />);
+    const redo = screen.getByRole('button', { name: 'Redo (shift+cmd+Z)' });
+    expect(redo).toBeDisabled();
+  });
+
+  it('Enables the button when you perform an action and then revert it', () => {
+    const { baseElement } = render(<Editor />);
+
+    // perform some action
+    const leftAlignButton = baseElement.querySelector('button[title="Align left"]') as HTMLButtonElement;
+    expect(leftAlignButton).toBeTruthy();
+    fireEvent.click(leftAlignButton);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
+
+    // Revert this action
+    const undo = screen.getByRole('button', { name: 'Undo (cmd+Z)' });
+    fireEvent.click(undo);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
+
+    // Check that this enables the redo button
+    const redo = screen.getByRole('button', { name: 'Redo (shift+cmd+Z)' });
+    expect(redo).not.toBeDisabled();
+  });
+
+  it('Reverts this action when clicked', () => {
+    const { baseElement } = render(<Editor />);
+
+    // perform some action
+    const leftAlignButton = baseElement.querySelector('button[title="Align left"]') as HTMLButtonElement;
+    expect(leftAlignButton).toBeTruthy();
+    fireEvent.click(leftAlignButton);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
+
+    // Revert this action
+    const undo = screen.getByRole('button', { name: 'Undo (cmd+Z)' });
+    fireEvent.click(undo);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
+
+    // Check that this enables the redo button
+    const redo = screen.getByRole('button', { name: 'Redo (shift+cmd+Z)' });
+    expect(redo).not.toBeDisabled();
+
+    // Click the redo button and check that this has reverted the previous action
+    fireEvent.click(redo);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/Redo/RedoButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useCommands, useHelpers } from '@remirror/react';
+import { HistoryExtension } from 'remirror/extensions';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import RedoRoundedIcon from '@mui/icons-material/RedoRounded';
+
+const RedoButton = () => {
+  const { redo } = useCommands<HistoryExtension>();
+  const { redoDepth } = useHelpers<HistoryExtension>(true);
+
+  const handleSelect = () => {
+    if (redo.enabled()) {
+      redo();
+    }
+  };
+
+  const enabled = redoDepth() > 0;
+
+  return (
+    <ToolbarButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={false}
+      icon={<RedoRoundedIcon />}
+      label="Redo (shift+cmd+Z)"
+    />
+  );
+};
+
+export default RedoButton;

package/src/EditorToolbar/Tools/Undo/UndoButton.spec.tsx

@@ -0,0 +1,49 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Editor from '../../../Editor/Editor';
+import React from 'react';
+
+describe('Undo button', () => {
+  it('Renders the undo button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Undo (cmd+Z)' })).toBeInTheDocument();
+  });
+
+  it('Renders a disabled button if you have not made any changes yet', () => {
+    render(<Editor />);
+    const undo = screen.getByRole('button', { name: 'Undo (cmd+Z)' });
+    expect(undo).toBeDisabled();
+  });
+
+  it('Enables the button when you perform an action', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
+
+    const leftAlignButton = baseElement.querySelector('button[title="Align left"]') as HTMLButtonElement;
+    expect(leftAlignButton).toBeTruthy();
+
+    fireEvent.click(leftAlignButton);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
+    const undo = screen.getByRole('button', { name: 'Undo (cmd+Z)' });
+    expect(undo).not.toBeDisabled();
+  });
+
+  it('Reverts this action when clicked', () => {
+    const { baseElement } = render(<Editor />);
+
+    // perform some action
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
+    const leftAlignButton = baseElement.querySelector('button[title="Align left"]') as HTMLButtonElement;
+    expect(leftAlignButton).toBeTruthy();
+    fireEvent.click(leftAlignButton);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
+
+    // Check that this enables the undo button
+    const undo = screen.getByRole('button', { name: 'Undo (cmd+Z)' });
+    expect(undo).not.toBeDisabled();
+
+    // Click the undo button and check that this has reverted the previous action
+    fireEvent.click(undo);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
+  });
+});

package/src/EditorToolbar/Tools/Undo/UndoButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useCommands, useHelpers } from '@remirror/react';
+import { HistoryExtension } from 'remirror/extensions';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import UndoRoundedIcon from '@mui/icons-material/UndoRounded';
+
+const UndoButton = () => {
+  const { undo } = useCommands<HistoryExtension>();
+  const { undoDepth } = useHelpers<HistoryExtension>(true);
+
+  const handleSelect = () => {
+    if (undo.enabled()) {
+      undo();
+    }
+  };
+
+  const enabled = undoDepth() > 0;
+
+  return (
+    <ToolbarButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={false}
+      icon={<UndoRoundedIcon />}
+      label="Undo (cmd+Z)"
+    />
+  );
+};
+
+export default UndoButton;

package/src/EditorToolbar/editor-toolbar.scss

@@ -10,7 +10,6 @@
   > *:not(:first-child) {
     margin: 0 0 0 2px;
   }
-
   .editor-divider {
     margin: -4px 2px -4px 4px;
     border-width: 1px;

package/src/ui/ToolbarButton/toolbar-button.scss

@@ -33,7 +33,8 @@
     margin-left: 2px;
   }
 
-  &.is-active {
+  &.is-active,
+  &:active {
     background-color: var(--blue-100);
     color: var(--blue-300);
   }