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

package/lib/ui/Inputs/Select/Select.d.ts

@@ -0,0 +1,12 @@
+type SelectProps = {
+    id: string;
+    label?: string;
+    value: any;
+    options: {
+        id: number;
+        name: string;
+        key: string;
+    }[];
+};
+export declare const Select: ({ id, label, value, options }: SelectProps) => JSX.Element;
+export {};

package/lib/ui/Inputs/Select/Select.js

@@ -0,0 +1,19 @@
+import { Listbox } from '@headlessui/react';
+import React, { useState } from 'react';
+import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded';
+import ExpandLessRoundedIcon from '@mui/icons-material/ExpandLessRounded';
+import clsx from 'clsx';
+export const Select = ({ id, label, value, options }) => {
+    const [selectedOption, setSelectedOption] = useState(value);
+    return (React.createElement(React.Fragment, null,
+        label && (React.createElement("label", { htmlFor: id, className: "sds-form-label" }, label)),
+        React.createElement("div", { className: "relative text-md text-gray-800" },
+            React.createElement(Listbox, { value: selectedOption, onChange: setSelectedOption, name: id, "aria-labelledby": id }, ({ open }) => (React.createElement(React.Fragment, null,
+                React.createElement(Listbox.Label, { className: "sr-only" }, label),
+                React.createElement(Listbox.Button, { className: "relative w-full cursor-default rounded border-2 border-gray-300 bg-white py-2 pl-3 pr-10 focus:border-blue-300 focus:outline-none" },
+                    React.createElement("span", { className: "flex items-center" },
+                        React.createElement("span", { className: "block truncate" }, selectedOption.name)),
+                    React.createElement("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2" }, !open ? (React.createElement(ExpandMoreRoundedIcon, { className: "text-gray-500", "aria-hidden": "true" })) : (React.createElement(ExpandLessRoundedIcon, { className: "text-gray-500", "aria-hidden": "true" })))),
+                React.createElement(Listbox.Options, { className: "absolute z-10 mt-1 w-full overflow-auto rounded border-2 border-gray-300 bg-white" }, options.map((option) => (React.createElement(Listbox.Option, { key: option.id, className: ({ active }) => clsx(active ? 'bg-gray-100' : 'bg-white', 'relative cursor-default select-none flex hover:bg-gray-100 py-2 px-3'), value: option },
+                    React.createElement("span", { className: "block truncate" }, option.name)))))))))));
+};

package/lib/ui/Inputs/Text/TextInput.d.ts

@@ -0,0 +1,8 @@
+type TextInputProps = {
+    id: string;
+    label?: string;
+    value: string;
+    onChange: any;
+};
+export declare const TextInput: ({ id, label, value, ...rest }: TextInputProps) => JSX.Element;
+export {};

package/lib/ui/Inputs/Text/TextInput.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export const TextInput = ({ id, label, value, ...rest }) => {
+    return (React.createElement(React.Fragment, null,
+        label && (React.createElement("label", { htmlFor: id, className: "sds-form-label" }, label)),
+        React.createElement("input", { name: id, id: id, type: "text", className: "sds-form-control", defaultValue: value, ...rest })));
+};

package/lib/ui/Modal/Modal.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+type ModalProps = {
+    children: ReactElement;
+    onCancel: () => void;
+    onSubmit?: () => void;
+    className?: string;
+};
+declare const Modal: ({ children, onCancel, onSubmit, className }: ModalProps) => ReactElement;
+export default Modal;

package/lib/ui/Modal/Modal.js

@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+const Modal = ({ children, onCancel, onSubmit, className }) => {
+    const keydown = (e) => {
+        if (e.key === 'Escape') {
+            onCancel();
+        }
+        if (e.key === 'Enter') {
+            onSubmit && onSubmit();
+        }
+    };
+    useEffect(() => {
+        window.addEventListener('keydown', keydown);
+        return () => window.removeEventListener('keydown', keydown);
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: `sds-modal-wrapper ${className ? className : ''}` },
+            React.createElement("div", { className: "w-modal-sm my-6 mx-auto" },
+                React.createElement("div", { className: "sds-modal" },
+                    React.createElement("div", { className: "sds-modal-header p-6 pb-2" },
+                        React.createElement("h2", { className: "font-semibold text-gray-900 text-heading-2" }, "Link"),
+                        React.createElement("button", { className: "ml-auto -mr-3 -mt-3 bg-transparent border-0 text-gray-600 font-semibold outline-none focus:outline-none hover:text-color-gray-800", onClick: onCancel, "aria-label": "Close" },
+                            React.createElement(CloseRoundedIcon, null))),
+                    React.createElement("div", { className: "sds-modal-content" }, children),
+                    React.createElement("div", { className: "sds-modal-footer p-6 pt-3" },
+                        React.createElement("button", { className: "sds-modal-footer__button bg-gray-200 text-gray-700 mr-2 hover:bg-gray-300", type: "button", onClick: onCancel, "aria-label": "Cancel" }, "Cancel"),
+                        onSubmit && (React.createElement("button", { className: "sds-modal-footer__button bg-blue-300 text-white hover:bg-blue-400", type: "button", onClick: onSubmit, "aria-label": "Apply" }, "Apply")))))),
+        React.createElement("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" })));
+};
+export default Modal;

package/lib/ui/ToolbarButton/ToolbarButton.js

@@ -1,5 +1,5 @@
 import React from 'react';
 const ToolbarButton = ({ handleOnClick, isDisabled, isActive, icon, label }) => {
-    return (React.createElement("button", { "aria-label": label, title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `btn toolbar-button ${isActive ? 'is-active' : ''}` }, icon));
+    return (React.createElement("button", { "aria-label": label, title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `sds-btn toolbar-button ${isActive ? 'is-active' : ''}` }, icon));
 };
 export default ToolbarButton;

package/package.json

@@ -1,29 +1,32 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.12.0-alpha.39",
+  "version": "1.12.0-alpha.42",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
-    "dev": "vite",
+    "build": "vite build",
     "clean": "rimraf ./lib",
     "compile": "npm run clean && npm run compile:styles && npm run compile:code",
     "compile:code": "tsc",
     "compile:styles": "node build.js",
+    "dev": "vite",
     "preview": "vite preview",
-    "build": "vite build",
     "test": "jest",
-    "test:watch": "jest --watch",
-    "test:e2e": "vite build && vite preview --port 8080 & cypress open"
+    "test:e2e": "vite build && vite preview --port 8080 & cypress open",
+    "test:watch": "jest --watch"
   },
   "dependencies": {
+    "@headlessui/react": "1.7.11",
     "@mui/icons-material": "5.11.0",
     "@remirror/react": "2.0.25",
+    "clsx": "^1.2.1",
     "flowbite": "^1.6.3"
   },
   "devDependencies": {
     "@testing-library/cypress": "9.0.0",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/react": "14.0.0",
+    "@testing-library/user-event": "14.4.3",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
     "@vitejs/plugin-react": "3.0.0",
@@ -61,5 +64,5 @@
   "volta": {
     "node": "16.19.0"
   },
-  "gitHead": "cfb46042a71dbebfa5f7f98459d99b84c2da9bed"
+  "gitHead": "e6a1ba4e3c9f944bd0006ed59673996dc5dccbfa"
 }

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/Editor/_editor.scss

@@ -10,11 +10,12 @@
   }
 
   .remirror-editor {
-    @apply bg-white shadow-none rounded-b;
+    @apply bg-white shadow-none rounded-b p-3;
+    min-height: 6rem;
 
     &:active,
-    :focus {
-      /* some focus state */
+    &:focus {
+      @apply outline-0;
     }
 
     p {
@@ -22,16 +23,22 @@
       @apply block;
     }
   }
-}
 
-/* remove existing style */
-.remirror-theme .ProseMirror {
-  &:active,
-  &:focus {
-    @apply shadow-none;
+  .remirror-is-empty:first-of-type::before {
+    position: absolute;
+    pointer-events: none;
+    height: 0;
+    font-style: italic;
+    content: attr(data-placeholder);
+    @apply text-gray-500;
   }
 }
 
+a {
+  @apply text-blue-300;
+  text-decoration: underline;
+}
+
 .remirror-theme h1 {
   font-size: 1.625rem;
   font-weight: 600;

package/src/EditorToolbar/EditorToolbar.tsx

@@ -8,6 +8,7 @@ import TextAlignButtons from './Tools/TextAlign/TextAlignButtons';
 import UndoButton from './Tools/Undo/UndoButton';
 import RedoButton from './Tools/Redo/RedoButton';
 import TextTypeDropdown from './Tools/TextType/TextTypeDropdown';
+import TriggerLinkModal from './Tools/Link/Trigger/TriggerLinkModal';
 
 type EditorToolbarProps = {
   manager: RemirrorManager<any>;
@@ -38,6 +39,7 @@ export const EditorToolbar = ({ manager, isPopover }: EditorToolbarProps) => {
           {extensionNames.italic && <ItalicButton />}
           {extensionNames.underline && <UnderlineButton />}
           {extensionNames.nodeFormatting && <TextAlignButtons />}
+          <TriggerLinkModal />
         </Toolbar>
       ) : (
         <FloatingToolbar className="remirror-floating-popover">

package/src/EditorToolbar/Tools/Bold/BoldButton.spec.tsx

@@ -11,7 +11,7 @@ describe('Bold button', () => {
 
   it('Activates the button if clicked', () => {
     render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Bold (cmd+B)' }).classList.contains('btn')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Bold (cmd+B)' }).classList.contains('sds-btn')).toBeTruthy();
     const bold = screen.getByRole('button', { name: 'Bold (cmd+B)' });
     fireEvent.click(bold);
     expect(bold.classList.contains('is-active')).toBeTruthy();

package/src/EditorToolbar/Tools/Italic/ItalicButton.spec.tsx

@@ -11,7 +11,7 @@ describe('Italic button', () => {
 
   it('Activates the button if clicked', () => {
     render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Italic (cmd+I)' }).classList.contains('btn')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Italic (cmd+I)' }).classList.contains('sds-btn')).toBeTruthy();
     const italic = screen.getByRole('button', { name: 'Italic (cmd+I)' });
     fireEvent.click(italic);
     expect(italic.classList.contains('is-active')).toBeTruthy();

package/src/EditorToolbar/Tools/Link/Form/LinkForm.spec.tsx

@@ -0,0 +1,21 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import LinkForm from './LinkForm';
+
+describe('Link Form', () => {
+  it('Renders the form with the relevant fields', () => {
+    render(<LinkForm />);
+    expect(screen.getByLabelText('URL')).toBeInTheDocument();
+    expect(screen.getByLabelText('Text')).toBeInTheDocument();
+    expect(screen.getByLabelText('Title')).toBeInTheDocument();
+    expect(screen.getByLabelText('Target')).toBeInTheDocument();
+  });
+
+  it('Renders the form with the specified class', () => {
+    render(<LinkForm />);
+
+    const formClass = document.querySelector('.sds-form');
+    expect(formClass).toBeInTheDocument();
+  });
+});

package/src/EditorToolbar/Tools/Link/Form/LinkForm.tsx

@@ -0,0 +1,41 @@
+import React, { ReactElement, useState } from 'react';
+import { TextInput } from '../../../../ui/Inputs/Text/TextInput';
+import { Select } from '../../../../ui/Inputs/Select/Select';
+
+const selectOptions = [
+  { id: 1, name: 'Current window', key: '_blank' },
+  { id: 2, name: 'New window', key: '_parent' },
+];
+
+const LinkForm = (): ReactElement => {
+  const [formValues, setFormValues] = useState({
+    href: '',
+    target: selectOptions[0],
+    title: '',
+    text: '',
+  });
+
+  const handleChange = (event: { target: { name: string; value: string } }) => {
+    const { name, value } = event.target;
+    setFormValues({ ...formValues, [name]: value });
+  };
+
+  return (
+    <form action="" method="post" className="sds-form">
+      <div className="sds-form-group mb-2">
+        <TextInput id="href" label="URL" value={formValues.href} onChange={handleChange} />
+      </div>
+      <div className="sds-form-group mb-2">
+        <TextInput id="text" label="Text" value={formValues.text} onChange={handleChange} />
+      </div>
+      <div className="sds-form-group mb-2">
+        <TextInput id="title" label="Title" value={formValues.title} onChange={handleChange} />
+      </div>
+      <div className="sds-form-group mb-0">
+        <Select id="target" label="Target" value={formValues.target} options={selectOptions} />
+      </div>
+    </form>
+  );
+};
+
+export default LinkForm;

package/src/EditorToolbar/Tools/Link/LinkButton.spec.tsx

@@ -0,0 +1,26 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import LinkButton from './LinkButton';
+
+describe('Link button', () => {
+  const mockOnClick = jest.fn();
+
+  it('Renders the link button', () => {
+    render(<LinkButton showModal={false} onClick={mockOnClick} enabled />);
+    expect(screen.getByRole('button', { name: 'Link' })).toBeInTheDocument();
+  });
+
+  it('Renders a disabled button if this is what you have set', () => {
+    render(<LinkButton showModal={false} onClick={mockOnClick} enabled={false} />);
+    expect(screen.getByRole('button', { name: 'Link' })).toBeDisabled();
+  });
+
+  it('Calls the modalFire function if you click it', () => {
+    render(<LinkButton showModal={false} onClick={mockOnClick} enabled />);
+    const linkButton = screen.getByRole('button', { name: 'Link' });
+    expect(linkButton).not.toBeDisabled();
+    fireEvent.click(linkButton);
+    expect(mockOnClick).toHaveBeenCalled();
+  });
+});

package/src/EditorToolbar/Tools/Link/LinkButton.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
+
+type LinkButtonProps = {
+  onClick: () => void;
+  enabled: boolean;
+  showModal: boolean;
+};
+
+const LinkButton = ({ onClick, showModal, enabled }: LinkButtonProps) => {
+  const active = showModal;
+
+  return (
+    <ToolbarButton
+      handleOnClick={onClick}
+      isDisabled={!enabled}
+      isActive={active}
+      icon={<InsertLinkRoundedIcon />}
+      label={`Link`}
+    />
+  );
+};
+
+export default LinkButton;

package/src/EditorToolbar/Tools/Link/Trigger/TriggerLinkModal.spec.tsx

@@ -0,0 +1,41 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import TriggerLinkModal from './TriggerLinkModal';
+
+describe('TriggerLinkModal', () => {
+  it('Renders the trigger button', () => {
+    render(<TriggerLinkModal />);
+    expect(screen.getByRole('button', { name: 'Link' })).toBeInTheDocument();
+  });
+
+  it('Displays the modal when clicking on the trigger button', () => {
+    render(<TriggerLinkModal />);
+
+    // Open the modal
+    const triggerButton = screen.getByRole('button', { name: 'Link' });
+    fireEvent.click(triggerButton);
+
+    const modalHeading = screen.getByRole('heading', {
+      name: /Link/i,
+    });
+    expect(modalHeading).toBeInTheDocument();
+  });
+
+  it('Closes the modal when clicking on the cancel button', () => {
+    render(<TriggerLinkModal />);
+    // Open the modal
+    const triggerButton = screen.getByRole('button', { name: 'Link' });
+    fireEvent.click(triggerButton);
+    const modalHeading = screen.getByRole('heading', {
+      name: /Link/i,
+    });
+    expect(modalHeading).toBeInTheDocument();
+    // Check that the cancel button renders
+    const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+    expect(cancelButton).toBeInTheDocument();
+    // check that firing the cancel button fires the cancel function
+    fireEvent.click(cancelButton);
+    expect(modalHeading).not.toBeInTheDocument();
+  });
+});

package/src/EditorToolbar/Tools/Link/Trigger/TriggerLinkModal.tsx

@@ -0,0 +1,21 @@
+import React, { ReactElement, useState } from 'react';
+import LinkButton from '../LinkButton';
+import Modal from '../../../../ui/Modal/Modal';
+import LinkForm from '../Form/LinkForm';
+
+const TriggerLinkModal = (): ReactElement => {
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <>
+      <LinkButton showModal={showModal} onClick={() => setShowModal(true)} enabled />
+      {showModal ? (
+        <Modal onCancel={() => setShowModal(false)} onSubmit={() => console.log('Sumbmit form')}>
+          <LinkForm />
+        </Modal>
+      ) : null}
+    </>
+  );
+};
+
+export default TriggerLinkModal;

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/EditorToolbar/Tools/Underline/Underline.spec.tsx

@@ -11,7 +11,7 @@ describe('Underline button', () => {
 
   it('Activates the button if clicked', () => {
     render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Underline (cmd+U)' }).classList.contains('btn')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Underline (cmd+U)' }).classList.contains('sds-btn')).toBeTruthy();
     const underline = screen.getByRole('button', { name: 'Underline (cmd+U)' });
     fireEvent.click(underline);
     expect(underline.classList.contains('is-active')).toBeTruthy();

package/src/EditorToolbar/_editor-toolbar.scss

@@ -1,5 +1,5 @@
 .formatted-text-editor .editor-toolbar {
-  @apply bg-white rounded border-gray-200 border-2 border-solid p-1;
+  @apply bg-white border-gray-200 border-b-2 border-solid p-1;
 
   display: flex;
   justify-items: center;

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();
+  });
+});

package/src/index.scss

@@ -3,8 +3,9 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
-/* Remirror base */
-@import 'remirror/styles/all.css';
+/* Global */
+@import './ui/forms';
+@import './ui/buttons';
 
 /* Components */
 @import './Editor/editor';
@@ -13,3 +14,5 @@
 @import './ui/ToolbarButton/toolbar-button';
 @import './ui/ToolbarDropdown/toolbar-dropdown';
 @import './ui/DropdownButton/dropdown-button';
+
+@import './ui/Modal/modal';

package/src/ui/DropdownButton/_dropdown-button.scss

@@ -1,7 +1,8 @@
 .dropdown-button {
-  padding: 4px 8px;
-  color: #707070;
   height: 40px;
   width: 100%;
   justify-content: space-between;
+  align-items: center;
+  display: flex;
+  @apply px-2 py-1 text-gray-600;
 }