@squiz/formatted-text-editor 1.12.0-alpha.39 → 1.12.0-alpha.40

package/README.md

@@ -51,6 +51,8 @@ Or if you'd like to "watch" for changes:
 npm run test:watch
 ```
 
+When testing text input in the text editor, it is recommended to use the `<MockEditor />` component, which is a simple wrapper around the Remirror component that provides additional functionality for testing (supplying text into the editor).
+
 ### End to end testing
 
 This package uses [Cypress](https://docs.cypress.io/) for end to end testing.

package/lib/Editor/Editor.js

@@ -1,21 +1,10 @@
 import React from 'react';
-import { BoldExtension, HeadingExtension, ItalicExtension, NodeFormattingExtension, ParagraphExtension, UnderlineExtension, HistoryExtension, wysiwygPreset, } from 'remirror/extensions';
 import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
 import { EditorToolbar } from '../EditorToolbar/EditorToolbar';
-import { PreformattedExtension } from '../extensions/PreformattedExtension/PreformattedExtension';
+import { Extensions } from '../Extensions/Extensions';
 const Editor = ({ content }) => {
     const { manager, state, setState } = useRemirror({
-        extensions: () => [
-            ...wysiwygPreset(),
-            new BoldExtension(),
-            new HeadingExtension(),
-            new ItalicExtension(),
-            new NodeFormattingExtension(),
-            new ParagraphExtension(),
-            new PreformattedExtension(),
-            new UnderlineExtension(),
-            new HistoryExtension(),
-        ],
+        extensions: Extensions,
         content,
         selection: 'start',
         stringHandler: 'html',

package/lib/Extensions/Extensions.d.ts

@@ -0,0 +1,3 @@
+import { BoldExtension, HeadingExtension, NodeFormattingExtension, HistoryExtension } from 'remirror/extensions';
+import { Extension } from '@remirror/core';
+export declare const Extensions: () => (BoldExtension | HistoryExtension | HeadingExtension | NodeFormattingExtension | Extension<import("@remirror/core").EmptyShape>)[];

package/lib/Extensions/Extensions.js

@@ -0,0 +1,13 @@
+import { BoldExtension, HeadingExtension, ItalicExtension, NodeFormattingExtension, ParagraphExtension, UnderlineExtension, HistoryExtension, wysiwygPreset, } from 'remirror/extensions';
+import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
+export const Extensions = () => [
+    ...wysiwygPreset(),
+    new BoldExtension(),
+    new HeadingExtension(),
+    new ItalicExtension(),
+    new NodeFormattingExtension(),
+    new ParagraphExtension(),
+    new PreformattedExtension(),
+    new UnderlineExtension(),
+    new HistoryExtension(),
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.12.0-alpha.39",
+  "version": "1.12.0-alpha.40",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -61,5 +61,5 @@
   "volta": {
     "node": "16.19.0"
   },
-  "gitHead": "cfb46042a71dbebfa5f7f98459d99b84c2da9bed"
+  "gitHead": "8db852ade2813dc297b7d0fa4975e0c5a57ac83e"
 }

package/src/Editor/Editor.mock.tsx

@@ -0,0 +1,40 @@
+import { Remirror, useRemirror, useRemirrorContext } from '@remirror/react';
+import React from 'react';
+import { EditorToolbar } from '../EditorToolbar/EditorToolbar';
+import { Extensions } from '../Extensions/Extensions';
+
+type MockEditorProps = {
+  setContent?: any;
+};
+
+export const MockEditor = ({ setContent }: MockEditorProps) => {
+  const { manager, state, setState } = useRemirror({
+    extensions: Extensions,
+    selection: 'start',
+    stringHandler: 'html',
+  });
+
+  const Component = () => {
+    setContent && setContent.mockImplementation(useRemirrorContext().setContent);
+    return null;
+  };
+
+  const handleChange = (parameter: { state: any }) => {
+    setState(parameter.state);
+  };
+
+  return (
+    <Remirror
+      manager={manager}
+      onChange={handleChange}
+      placeholder="Write something"
+      label="Text editor"
+      state={state}
+      autoRender="start"
+    >
+      <EditorToolbar manager={manager} />
+      <Component />
+      <EditorToolbar manager={manager} isPopover />
+    </Remirror>
+  );
+};

package/src/Editor/Editor.spec.tsx

@@ -1,7 +1,11 @@
+import { jest } from '@jest/globals';
 import React from 'react';
-import '@testing-library/jest-dom';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { MockEditor } from './Editor.mock';
 import Editor from './Editor';
-import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+const setContent: any = jest.fn();
 
 describe('Formatted text editor', () => {
   it('Renders the text editor', () => {
@@ -225,4 +229,26 @@ describe('Formatted text editor', () => {
 
     expect(baseElement.querySelectorAll('div.remirror-editor p')).toHaveLength(2);
   });
+
+  it('Should allow text input & undo input upon clicking undo button', () => {
+    const { baseElement, getByLabelText } = render(<MockEditor setContent={setContent} />);
+
+    const textContent = `This is a string with a random number: ${Math.random() * 9999}`;
+
+    // This sets the content of the text editor
+    act(() => {
+      setContent(`<p>${textContent}</p>`, { triggerChange: true });
+    });
+
+    const editorNode = getByLabelText(`Text editor`);
+    expect(editorNode).toBeTruthy();
+    expect(editorNode.textContent).toBe(textContent);
+
+    // Testing if clicking undo button removes text from editor
+    const undoButton = baseElement.querySelector('button[title="Undo (cmd+Z)"]') as HTMLButtonElement;
+    expect(undoButton).toBeTruthy();
+    fireEvent.click(undoButton);
+
+    expect(editorNode.textContent).toBe('');
+  });
 });

package/src/Editor/Editor.tsx

@@ -1,18 +1,8 @@
 import React from 'react';
-import {
-  BoldExtension,
-  HeadingExtension,
-  ItalicExtension,
-  NodeFormattingExtension,
-  ParagraphExtension,
-  UnderlineExtension,
-  HistoryExtension,
-  wysiwygPreset,
-} from 'remirror/extensions';
 import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
-import { RemirrorContentType, Extension } from '@remirror/core';
+import { RemirrorContentType } from '@remirror/core';
 import { EditorToolbar } from '../EditorToolbar/EditorToolbar';
-import { PreformattedExtension } from '../extensions/PreformattedExtension/PreformattedExtension';
+import { Extensions } from '../Extensions/Extensions';
 
 type EditorProps = {
   content?: RemirrorContentType;
@@ -20,17 +10,7 @@ type EditorProps = {
 
 const Editor = ({ content }: EditorProps) => {
   const { manager, state, setState } = useRemirror({
-    extensions: () => [
-      ...(wysiwygPreset() as Extension[]),
-      new BoldExtension(),
-      new HeadingExtension(),
-      new ItalicExtension(),
-      new NodeFormattingExtension(),
-      new ParagraphExtension(),
-      new PreformattedExtension(),
-      new UnderlineExtension(),
-      new HistoryExtension(),
-    ],
+    extensions: Extensions,
     content,
     selection: 'start',
     stringHandler: 'html',

package/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useCommands, useActive } from '@remirror/react';
-import { PreformattedExtension } from '../../../../extensions/PreformattedExtension/PreformattedExtension';
+import { PreformattedExtension } from '../../../../Extensions/PreformattedExtension/PreformattedExtension';
 import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
 
 const PreformattedButton = () => {

package/src/EditorToolbar/Tools/TextType/TextTypeDropdown.tsx

@@ -4,7 +4,7 @@ import ParagraphButton from './Paragraph/ParagraphButton';
 import PreformattedButton from './Preformatted/PreformattedButton';
 import ToolbarDropdown from '../../../ui/ToolbarDropdown/ToolbarDropdown';
 import { useActive, VerticalDivider } from '@remirror/react';
-import { PreformattedExtension } from '../../../extensions/PreformattedExtension/PreformattedExtension';
+import { PreformattedExtension } from '../../../Extensions/PreformattedExtension/PreformattedExtension';
 
 const TextTypeDropdown = () => {
   const active = useActive<PreformattedExtension>();

package/src/Extensions/Extensions.tsx

@@ -0,0 +1,24 @@
+import {
+  BoldExtension,
+  HeadingExtension,
+  ItalicExtension,
+  NodeFormattingExtension,
+  ParagraphExtension,
+  UnderlineExtension,
+  HistoryExtension,
+  wysiwygPreset,
+} from 'remirror/extensions';
+import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
+import { Extension } from '@remirror/core';
+
+export const Extensions = () => [
+  ...(wysiwygPreset() as Extension[]),
+  new BoldExtension(),
+  new HeadingExtension(),
+  new ItalicExtension(),
+  new NodeFormattingExtension(),
+  new ParagraphExtension(),
+  new PreformattedExtension(),
+  new UnderlineExtension(),
+  new HistoryExtension(),
+];

package/src/FormattedTextEditor.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+import { FormattedTextEditor } from './';
+import React from 'react';
+
+describe('<FormattedTextEditor />', () => {
+  it('should render "<FormattedTextEditor />" component', () => {
+    const { baseElement } = render(<FormattedTextEditor />);
+    expect(baseElement).toBeTruthy();
+  });
+});