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

package/lib/ui/ToolbarButton/ToolbarButton.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+type ToolbarButtonProps = {
+    handleOnClick: () => void;
+    isDisabled: boolean;
+    isActive: boolean;
+    icon: ReactElement;
+    label: string;
+};
+declare const ToolbarButton: ({ handleOnClick, isDisabled, isActive, icon, label }: ToolbarButtonProps) => JSX.Element;
+export default ToolbarButton;

package/lib/ui/ToolbarButton/ToolbarButton.js

@@ -0,0 +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));
+};
+export default ToolbarButton;

package/package.json

@@ -1,42 +1,59 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "type": "module",
-  "version": "1.5.1-alpha.6",
+  "version": "1.12.0-alpha.14",
   "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "scripts": {
     "dev": "vite",
-    "compile": "tsc && 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",
     "preview": "vite preview",
-    "lint": "eslint . --ext .ts,.tsx",
-    "prepare": "cd .. && cd .. && husky install",
-    "pretty-quick": "pretty-quick"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged"
-    }
+    "build": "vite build",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:e2e": "vite build && vite preview --port 8080 & cypress open"
   },
   "dependencies": {
-    "@remirror/pm": "^2.0.3",
-    "@remirror/react": "^2.0.25",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.32.2",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "remirror": "^2.0.24"
+    "@mui/icons-material": "5.11.0",
+    "@remirror/react": "2.0.25"
   },
   "devDependencies": {
-    "@types/react": "^16.14.14",
-    "@types/react-dom": "^16.9.14",
-    "@vitejs/plugin-react-swc": "^3.0.0",
-    "husky": "^8.0.3",
-    "prettier": "^2.8.3",
-    "pretty-quick": "^3.1.3",
-    "typescript": "^4.9.3",
-    "vite": "^4.0.0"
+    "@testing-library/cypress": "9.0.0",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "12.1.5",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
+    "@vitejs/plugin-react": "3.0.0",
+    "cypress": "12.5.1",
+    "eslint-config-prettier": "8.6.0",
+    "eslint-plugin-cypress": "2.12.1",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-react": "7.32.2",
+    "jest-environment-jsdom": "29.4.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rimraf": "4.1.2",
+    "typescript": "4.9.3",
+    "vite": "4.0.0"
+  },
+  "peerDependencies": {
+    "@types/react": "^16.14.0 || ^17 || ^18",
+    "@types/react-dom": "^16.9.0 || ^17 || ^18",
+    "react": "^16.14.0 || ^17 || ^18",
+    "react-dom": "^16.14.0 || ^17 || ^18"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
   },
   "volta": {
-    "node": "17.1.0"
-  }
-}
+    "node": "16.19.0"
+  },
+  "gitHead": "76fa4ca4f3c3fa3b0a808232474df640550871cc"
+}

package/src/Editor/Editor.spec.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import Editor from './Editor';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+describe('Formatted text editor', () => {
+  it('Renders the text editor', () => {
+    render(<Editor />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('Renders the placeholder if there is no content', () => {
+    render(<Editor />);
+    expect(document.querySelector(`[data-placeholder='Write something']`)).toBeInTheDocument();
+  });
+
+  it('Renders the bold button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Bold (cmd+B)' })).toBeInTheDocument();
+  });
+
+  it('Renders the italic button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Italic (cmd+I)' })).toBeInTheDocument();
+  });
+
+  it('Renders the underline button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Underline (cmd+U)' })).toBeInTheDocument();
+  });
+
+  it('Renders the align left button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Align left' })).toBeInTheDocument();
+  });
+
+  it('Applies left alignment styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    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();
+  });
+
+  it('Applies center alignment styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('p[data-node-text-align="center"]')).toBeFalsy();
+
+    const centerAlignButton = baseElement.querySelector('button[title="Align center"]') as HTMLButtonElement;
+    expect(centerAlignButton).toBeTruthy();
+
+    fireEvent.click(centerAlignButton);
+    expect(baseElement.querySelector('p[data-node-text-align="center"]')).toBeTruthy();
+  });
+
+  it('Applies right alignment styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('p[data-node-text-align="right"]')).toBeFalsy();
+
+    const rightAlignButton = baseElement.querySelector('button[title="Align right"]') as HTMLButtonElement;
+    expect(rightAlignButton).toBeTruthy();
+
+    fireEvent.click(rightAlignButton);
+    expect(baseElement.querySelector('p[data-node-text-align="right"]')).toBeTruthy();
+  });
+
+  it('Applies justify alignment styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('p[data-node-text-align="justify"]')).toBeFalsy();
+
+    const justifyAlignButton = baseElement.querySelector('button[title="Justify"]') as HTMLButtonElement;
+    expect(justifyAlignButton).toBeTruthy();
+
+    fireEvent.click(justifyAlignButton);
+    expect(baseElement.querySelector('p[data-node-text-align="justify"]')).toBeTruthy();
+  });
+});

package/src/Editor/Editor.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {
+  BoldExtension,
+  ItalicExtension,
+  NodeFormattingExtension,
+  UnderlineExtension,
+  wysiwygPreset,
+} from 'remirror/extensions';
+import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
+import { RemirrorContentType, Extension } from '@remirror/core';
+import { EditorToolbar } from '../EditorToolbar/EditorToolbar';
+
+type EditorProps = {
+  content?: RemirrorContentType;
+};
+
+const Editor = ({ content }: EditorProps) => {
+  const { manager, state, setState } = useRemirror({
+    extensions: () => [
+      ...(wysiwygPreset() as Extension[]),
+      new BoldExtension(),
+      new ItalicExtension(),
+      new NodeFormattingExtension(),
+      new UnderlineExtension(),
+    ],
+    content,
+    selection: 'start',
+    stringHandler: 'html',
+  });
+
+  const handleChange = (parameter: { state: any }) => {
+    setState(parameter.state);
+  };
+
+  return (
+    <Remirror manager={manager} state={state} onChange={handleChange} placeholder="Write something">
+      <EditorToolbar manager={manager} />
+      <EditorComponent />
+      <EditorToolbar manager={manager} isPopover />
+    </Remirror>
+  );
+};
+
+export default Editor;

package/src/Editor/editor.scss

@@ -0,0 +1,36 @@
+.formatted-text-editor {
+  &.editor-wrapper {
+    background: white;
+    border: 2px solid var(--grey-300);
+    border-radius: 4px;
+  }
+
+  .remirror-editor-wrapper {
+    padding-top: 0;
+    color: var(--grey-600);
+  }
+
+  .remirror-editor {
+    box-shadow: none;
+    background: white;
+    border-radius: 0 0 4px 4px;
+
+    &:active,
+    :focus {
+      /* some focus state */
+    }
+
+    p {
+      /* Make sure content aligned with "text-align: justify" is justified */
+      display: block;
+    }
+  }
+}
+
+/* remove existing style */
+.remirror-theme .ProseMirror {
+  &:active,
+  &:focus {
+    box-shadow: none;
+  }
+}

package/src/EditorToolbar/EditorToolbar.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Toolbar, FloatingToolbar } 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';
+
+type EditorToolbarProps = {
+  manager: RemirrorManager<any>;
+  isPopover?: boolean;
+};
+
+// The editor main toolbar
+export const EditorToolbar = ({ manager, isPopover }: EditorToolbarProps) => {
+  const extensionNames: Record<string, true> = {};
+
+  manager.extensions.forEach((extension) => {
+    extensionNames[extension.name] = true;
+  });
+
+  return (
+    <>
+      {!isPopover ? (
+        <Toolbar className="remirror-toolbar editor-toolbar">
+          {extensionNames.bold && <BoldButton />}
+          {extensionNames.italic && <ItalicButton />}
+          {extensionNames.underline && <UnderlineButton />}
+          {extensionNames.nodeFormatting && <TextAlignButtons />}
+        </Toolbar>
+      ) : (
+        <FloatingToolbar className="remirror-floating-popover">
+          {extensionNames.bold && <BoldButton />}
+          {extensionNames.italic && <ItalicButton />}
+          {extensionNames.underline && <UnderlineButton />}
+        </FloatingToolbar>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Editor from '../../../Editor/Editor';
+
+describe('Bold button', () => {
+  it('Renders the bold button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Bold (cmd+B)' })).toBeInTheDocument();
+  });
+
+  it('Activates the button if clicked', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Bold (cmd+B)' }).classList.contains('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/Bold/BoldButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import { BoldExtension } from '@remirror/extension-bold';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import FormatBoldRoundedIcon from '@mui/icons-material/FormatBoldRounded';
+
+const BoldButton = () => {
+  const { toggleBold } = useCommands();
+  const chain = useChainedCommands();
+
+  const active = useActive<BoldExtension>();
+  const enabled = toggleBold.enabled();
+  const handleSelect = () => {
+    if (toggleBold.enabled()) {
+      chain.toggleBold().focus().run();
+    }
+  };
+
+  return (
+    <ToolbarButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.bold()}
+      icon={<FormatBoldRoundedIcon />}
+      label="Bold (cmd+B)"
+    />
+  );
+};
+
+export default BoldButton;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Editor from '../../../Editor/Editor';
+
+describe('Italic button', () => {
+  it('Renders the italic button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Italic (cmd+I)' })).toBeInTheDocument();
+  });
+
+  it('Activates the button if clicked', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Italic (cmd+I)' }).classList.contains('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/Italic/ItalicButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import { ItalicExtension } from '@remirror/extension-italic';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import FormatItalicRoundedIcon from '@mui/icons-material/FormatItalicRounded';
+
+const ItalicButton = () => {
+  const { toggleItalic } = useCommands();
+  const chain = useChainedCommands();
+
+  const active = useActive<ItalicExtension>();
+  const enabled = toggleItalic.enabled();
+  const handleSelect = () => {
+    if (toggleItalic.enabled()) {
+      chain.toggleItalic().focus().run();
+    }
+  };
+
+  return (
+    <ToolbarButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.italic()}
+      icon={<FormatItalicRoundedIcon />}
+      label="Italic (cmd+I)"
+    />
+  );
+};
+
+export default ItalicButton;

package/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCommands, useChainedCommands } from '@remirror/react';
+import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
+import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
+
+const CenterAlignButton = () => {
+  const { centerAlign } = useCommands<NodeFormattingExtension>();
+  const chain = useChainedCommands();
+
+  const handleSelect = () => {
+    if (centerAlign.enabled()) {
+      chain.centerAlign().focus().run();
+    }
+  };
+
+  const active = centerAlign.active?.() || false;
+  const enabled = centerAlign.enabled();
+
+  return (
+    <ToolbarButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active}
+      icon={<FormatAlignCenterIcon />}
+      label="Align center"
+    />
+  );
+};
+
+export default CenterAlignButton;

package/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCommands, useChainedCommands } from '@remirror/react';
+import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
+import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
+
+const JustifyAlignButton = () => {
+  const { justifyAlign } = useCommands<NodeFormattingExtension>();
+  const chain = useChainedCommands();
+
+  const handleSelect = () => {
+    if (justifyAlign.enabled()) {
+      chain.justifyAlign().focus().run();
+    }
+  };
+
+  const active = justifyAlign.active?.() || false;
+  const enabled = justifyAlign.enabled();
+
+  return (
+    <ToolbarButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active}
+      icon={<FormatAlignJustifyIcon />}
+      label="Justify"
+    />
+  );
+};
+
+export default JustifyAlignButton;

package/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCommands, useChainedCommands } from '@remirror/react';
+import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
+import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
+
+const LeftAlignButton = () => {
+  const { leftAlign } = useCommands<NodeFormattingExtension>();
+  const chain = useChainedCommands();
+
+  const handleSelect = () => {
+    if (leftAlign.enabled()) {
+      chain.leftAlign().focus().run();
+    }
+  };
+
+  const active = leftAlign.active?.() || false;
+  const enabled = leftAlign.enabled();
+
+  return (
+    <ToolbarButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active}
+      icon={<FormatAlignLeftIcon />}
+      label="Align left"
+    />
+  );
+};
+
+export default LeftAlignButton;

package/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCommands, useChainedCommands } from '@remirror/react';
+import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
+import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
+
+const RightAlignButton = () => {
+  const { rightAlign } = useCommands<NodeFormattingExtension>();
+  const chain = useChainedCommands();
+
+  const handleSelect = () => {
+    if (rightAlign.enabled()) {
+      chain.rightAlign().focus().run();
+    }
+  };
+
+  const active = rightAlign.active?.() || false;
+  const enabled = rightAlign.enabled();
+
+  return (
+    <ToolbarButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active}
+      icon={<FormatAlignRightIcon />}
+      label="Align right"
+    />
+  );
+};
+
+export default RightAlignButton;

package/src/EditorToolbar/Tools/TextAlign/TextAlignButtons.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import LeftAlignButton from './LeftAlign/LeftAlignButton';
+import CenterAlignButton from './CenterAlign/CenterAlignButton';
+import RightAlignButton from './RightAlign/RightAlignButton';
+import JustifyAlignButton from './JustifyAlign/JustifyAlignButton';
+import { VerticalDivider } from '@remirror/react-components';
+
+const TextAlignButtons = () => {
+  return (
+    <>
+      <VerticalDivider className="editor-divider" />
+      <LeftAlignButton />
+      <CenterAlignButton />
+      <RightAlignButton />
+      <JustifyAlignButton />
+      <VerticalDivider className="editor-divider" />
+    </>
+  );
+};
+
+export default TextAlignButtons;

package/src/EditorToolbar/Tools/Underline/Underline.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Editor from '../../../Editor/Editor';
+
+describe('Underline button', () => {
+  it('Renders the underline button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Underline (cmd+U)' })).toBeInTheDocument();
+  });
+
+  it('Activates the button if clicked', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Underline (cmd+U)' }).classList.contains('btn')).toBeTruthy();
+    const underline = screen.getByRole('button', { name: 'Underline (cmd+U)' });
+    fireEvent.click(underline);
+    expect(underline.classList.contains('is-active')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/Underline/UnderlineButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import { UnderlineExtension } from '@remirror/extension-underline';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import FormatUnderlinedRoundedIcon from '@mui/icons-material/FormatUnderlinedRounded';
+
+const UnderlineButton = () => {
+  const { toggleUnderline } = useCommands();
+  const chain = useChainedCommands();
+
+  const active = useActive<UnderlineExtension>();
+  const enabled = toggleUnderline.enabled();
+  const handleSelect = () => {
+    if (toggleUnderline.enabled()) {
+      chain.toggleUnderline().focus().run();
+    }
+  };
+
+  return (
+    <ToolbarButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.underline()}
+      icon={<FormatUnderlinedRoundedIcon />}
+      label="Underline (cmd+U)"
+    />
+  );
+};
+
+export default UnderlineButton;

package/src/EditorToolbar/editor-toolbar.scss

@@ -0,0 +1,26 @@
+.formatted-text-editor .editor-toolbar {
+  border-bottom: 2px solid var(--grey-200);
+  background-color: white;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+
+  display: flex;
+  justify-items: center;
+
+  > *:not(:first-child) {
+    margin: 0 0 0 2px;
+  }
+
+  .editor-divider {
+    margin: -4px 2px -4px 4px;
+    border-width: 1px;
+  }
+}
+
+.remirror-floating-popover {
+  padding: 4px;
+  border: 1px var(--grey-200);
+  border-radius: 6px;
+  background-color: white;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 12px 4px rgba(0, 0, 0, 0.12);
+}