@squiz/formatted-text-editor 1.16.0 → 1.21.1-alpha.10

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useChainedCommands } from '@remirror/react';
 import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../../ui/Button/Button';
 import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
 
 const JustifyAlignButton = () => {
@@ -18,7 +18,7 @@ const JustifyAlignButton = () => {
   const enabled = justifyAlign.enabled();
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={active}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useChainedCommands } from '@remirror/react';
 import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../../ui/Button/Button';
 import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
 
 const LeftAlignButton = () => {
@@ -18,7 +18,7 @@ const LeftAlignButton = () => {
   const enabled = leftAlign.enabled();
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={active}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useChainedCommands } from '@remirror/react';
 import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../../ui/Button/Button';
 import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
 
 const RightAlignButton = () => {
@@ -18,7 +18,7 @@ const RightAlignButton = () => {
   const enabled = rightAlign.enabled();
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={active}

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

@@ -14,6 +14,6 @@ describe('Underline button', () => {
     expect(screen.getByRole('button', { name: 'Underline (cmd+U)' }).classList.contains('squiz-fte-btn')).toBeTruthy();
     const underline = screen.getByRole('button', { name: 'Underline (cmd+U)' });
     fireEvent.click(underline);
-    expect(underline.classList.contains('is-active')).toBeTruthy();
+    expect(underline.classList.contains('squiz-fte-btn--is-active')).toBeTruthy();
   });
 });

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useActive, useChainedCommands } from '@remirror/react';
 import { UnderlineExtension } from '@remirror/extension-underline';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../ui/Button/Button';
 import FormatUnderlinedRoundedIcon from '@mui/icons-material/FormatUnderlinedRounded';
 
 const UnderlineButton = () => {
@@ -17,7 +17,7 @@ const UnderlineButton = () => {
   };
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={active.underline()}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useHelpers } from '@remirror/react';
 import { HistoryExtension } from 'remirror/extensions';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../ui/Button/Button';
 import UndoRoundedIcon from '@mui/icons-material/UndoRounded';
 
 const UndoButton = () => {
@@ -17,7 +17,7 @@ const UndoButton = () => {
   const enabled = undoDepth() > 0;
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={false}

package/src/EditorToolbar/_floating-toolbar.scss

@@ -1,4 +1,10 @@
 /// This class is excluded from the scope of squiz-fte-scope as it is outside of the scoped element
 .squiz-fte-scope__floating-popover {
   @apply bg-white border-gray-200 p-1 shadow rounded-md border flex;
+  .squiz-fte-btn {
+    @apply p-1;
+    ~ .squiz-fte-btn {
+      margin-left: 2px;
+    }
+  }
 }

package/src/EditorToolbar/_toolbar.scss

@@ -1,10 +1,10 @@
-.formatted-text-editor .editor-toolbar {
+.editor-toolbar {
   @apply bg-white border-gray-200 border-b-2 border-solid p-1;
 
   display: flex;
   justify-items: center;
 
-  > *:not(:first-child) {
+  > *:not(:first-child, .editor-divider) {
     margin: 0 0 0 2px;
   }
 
@@ -13,4 +13,10 @@
     margin-right: 2px;
     height: auto;
   }
+  .squiz-fte-btn {
+    @apply p-1;
+    ~ .squiz-fte-btn {
+      margin-left: 2px;
+    }
+  }
 }

package/src/Extensions/Extensions.ts

@@ -9,16 +9,19 @@ import {
 } from 'remirror/extensions';
 import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
 import { LinkExtension } from './LinkExtension/LinkExtension';
+import { ImageExtension } from './ImageExtension/ImageExtension';
+import { Extension } from '@remirror/core';
 
-export const Extensions = () => [
+export const Extensions = (): Extension[] => [
   new BoldExtension(),
   new HeadingExtension(),
   new ItalicExtension(),
-  new NodeFormattingExtension(),
+  new NodeFormattingExtension({ indents: [] }),
   new ParagraphExtension(),
   new PreformattedExtension(),
   new UnderlineExtension(),
   new HistoryExtension(),
+  new ImageExtension(),
   new LinkExtension({
     supportedTargets: [
       // '_self' is the browser default and will be used when encountering a link with a

package/src/Extensions/ImageExtension/ImageExtension.ts

@@ -0,0 +1,3 @@
+import { ImageExtension as RemirrorImageExtension } from 'remirror/extensions';
+
+export class ImageExtension extends RemirrorImageExtension {}

package/src/Extensions/LinkExtension/LinkExtension.ts

@@ -1,5 +1,5 @@
 import { ApplySchemaAttributes, getMarkRanges, isElementDomNode, MarkExtensionSpec, MarkSpecOverride } from 'remirror';
-import { getTextSelection, getMarkRange, KeyBindingProps, updateMark, removeMark } from '@remirror/core';
+import { getTextSelection, getMarkRange, KeyBindingProps } from '@remirror/core';
 import { CommandFunction } from '@remirror/pm';
 import { LinkAttributes as RemirrorLinkAttributes, LinkExtension as RemirrorLinkExtension } from 'remirror/extensions';
 
@@ -95,19 +95,22 @@ export class LinkExtension extends RemirrorLinkExtension {
 
       if (text !== selectedText) {
         // update the text in the editor if it was updated, update the range to cover the length of the new text.
-        dispatch?.(tr.insertText(text));
+        tr.insertText(text);
         range.to = range.from + text.length;
       }
 
       // apply the link, or remove it if no URL was provided.
       if (attrs.href.length > 0) {
-        updateMark({ type: this.type, attrs, range })(props);
+        tr.addMark(range.from, range.to, this.type.create(attrs));
       } else {
-        removeMark({ type: this.type, range })(props);
+        tr.removeMark(range.from, range.to, this.type);
       }
 
       // move the cursor to the end of the link and re-focus the editor.
-      dispatch?.(tr.setSelection(getTextSelection({ from: range.to, to: range.to }, tr.doc)));
+      tr.setSelection(getTextSelection({ from: range.to, to: range.to }, tr.doc));
+
+      // apply the transaction.
+      dispatch?.(tr);
       view?.focus();
 
       return true;

package/src/index.scss

@@ -4,15 +4,15 @@
 @import 'tailwindcss/utilities';
 
 /* Global */
+@import './ui/typography';
 @import './ui/forms';
-@import './ui/buttons';
 
 /* Components */
 @import './Editor/editor';
 @import './EditorToolbar/toolbar';
 @import './EditorToolbar/floating-toolbar';
 
-@import './ui/ToolbarButton/toolbar-button';
+@import './ui/Button/button';
 @import './ui/ToolbarDropdown/toolbar-dropdown';
 @import './ui/ToolbarDropdownButton/toolbar-dropdown-button';
 

package/src/index.ts

@@ -1,3 +1,5 @@
 import FormattedTextEditor from './FormattedTextEditor';
+import { remirrorNodeToSquizNode } from './utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode';
+import { squizNodeToRemirrorNode } from './utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode';
 
-export { FormattedTextEditor };
+export { FormattedTextEditor, remirrorNodeToSquizNode, squizNodeToRemirrorNode };

package/src/ui/Button/Button.spec.tsx

@@ -0,0 +1,44 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import Button from './Button';
+import AccessTimeRoundedIcon from '@mui/icons-material/AccessTimeRounded';
+
+describe('Button', () => {
+  const mockOnClick = jest.fn();
+
+  const ButtonComponent = () => {
+    return (
+      <Button
+        handleOnClick={mockOnClick}
+        isDisabled
+        isActive
+        label="Am a button"
+        text="Hello"
+        icon={<AccessTimeRoundedIcon />}
+      />
+    );
+  };
+
+  it('Renders the label, text and icon', () => {
+    render(<ButtonComponent />);
+    const label = screen.getByLabelText('Am a button');
+    expect(label).toBeInTheDocument();
+    const text = screen.getByText('Hello');
+    expect(text).toBeInTheDocument();
+    const icon = screen.getByTestId('AccessTimeRoundedIcon');
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('Renders the button in a disabled state if set to be disabled', () => {
+    render(<ButtonComponent />);
+    const button = screen.getByLabelText('Am a button');
+    expect(button).toBeDisabled();
+  });
+
+  it('Adds the active class is set to be active', () => {
+    render(<ButtonComponent />);
+    const button = screen.getByLabelText('Am a button');
+    expect(button).toHaveClass('squiz-fte-btn--is-active');
+  });
+});

package/src/ui/Button/Button.tsx

@@ -0,0 +1,31 @@
+import React, { ReactElement } from 'react';
+import clsx from 'clsx';
+
+type ButtonProps = {
+  handleOnClick: () => void;
+  isDisabled?: boolean;
+  isActive: boolean;
+  label: string;
+  text?: string;
+  icon?: ReactElement;
+};
+
+const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon }: ButtonProps) => {
+  return (
+    <button
+      aria-label={label}
+      title={label}
+      type="button"
+      onClick={handleOnClick}
+      disabled={isDisabled}
+      className={clsx('squiz-fte-btn', isActive && 'squiz-fte-btn--is-active', icon && ' squiz-fte-btn--is-icon')}
+    >
+      <>
+        {text && <span>{text}</span>}
+        {icon && icon}
+      </>
+    </button>
+  );
+};
+
+export default Button;

package/src/ui/{_buttons.scss → Button/_button.scss}

@@ -1,5 +1,5 @@
 .squiz-fte-btn {
-  @apply font-normal rounded ease-linear transition-all duration-150;
+  @apply font-normal rounded ease-linear transition-all bg-white text-gray-600 duration-150;
   display: flex;
   align-items: center;
   text-align: center;
@@ -11,9 +11,27 @@
   border: 1px solid transparent;
   padding: 6px 12px;
 
+  &--is-icon {
+    padding: 6px;
+  }
+
+  ~ .squiz-fte-btn {
+    margin-left: 2px;
+  }
+
   &.disabled,
   &[disabled] {
     cursor: not-allowed;
     @apply opacity-50;
   }
+
+  &:hover,
+  &:focus {
+    background-color: rgba(black, 0.04);
+  }
+
+  &--is-active,
+  &:active {
+    @apply text-blue-300 bg-blue-100;
+  }
 }

package/src/ui/{Inputs/Text/TextInput.spec.tsx → Fields/Input/Input.spec.tsx}

@@ -1,30 +1,30 @@
 import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
-import { TextInput } from './TextInput';
+import { Input } from './Input';
 
-describe('Text input', () => {
+describe('Input', () => {
   const mockOnChange = jest.fn();
 
-  const TextInputComponent = () => {
-    return <TextInput name="text-input" defaultValue="Water" label="Text input" onChange={mockOnChange} />;
+  const InputComponent = () => {
+    return <Input name="text-input" defaultValue="Water" label="Text input" onChange={mockOnChange} />;
   };
 
   it('Renders the label', () => {
-    render(<TextInputComponent />);
+    render(<InputComponent />);
     // Check that the supplied label renders
     const inputLabel = screen.getByLabelText('Text input');
     expect(inputLabel).toBeInTheDocument();
   });
 
   it('Renders the default value', () => {
-    render(<TextInputComponent />);
+    render(<InputComponent />);
     // Check that default value supplied renders
     expect(screen.getByDisplayValue('Water')).toBeInTheDocument();
   });
 
   it('Changes the value when new value entered', () => {
-    render(<TextInputComponent />);
+    render(<InputComponent />);
     const input = screen.getByLabelText('Text input') as HTMLInputElement;
     // Check that default value supplied renders
     expect(input.value).toBe('Water');
@@ -33,7 +33,7 @@ describe('Text input', () => {
   });
 
   it('Fires the change function when new value entered', () => {
-    render(<TextInputComponent />);
+    render(<InputComponent />);
     const input = screen.getByLabelText('Text input') as HTMLInputElement;
     // Check that default value supplied renders
     expect(input.value).toBe('Water');

package/src/ui/{Inputs/Text/TextInput.tsx → Fields/Input/Input.tsx}

@@ -1,10 +1,10 @@
 import React, { ForwardedRef, forwardRef, InputHTMLAttributes } from 'react';
 
-type TextInputProps = InputHTMLAttributes<HTMLInputElement> & {
+type InputProps = InputHTMLAttributes<HTMLInputElement> & {
   label?: string;
 };
 
-const TextInputInternal = ({ name, label, ...rest }: TextInputProps, ref: ForwardedRef<HTMLInputElement>) => {
+const InputInternal = ({ name, label, type = 'text', ...rest }: InputProps, ref: ForwardedRef<HTMLInputElement>) => {
   return (
     <>
       {label && (
@@ -12,9 +12,9 @@ const TextInputInternal = ({ name, label, ...rest }: TextInputProps, ref: Forwar
           {label}
         </label>
       )}
-      <input ref={ref} id={name} name={name} type="text" className="squiz-fte-form-control" {...rest} />
+      <input ref={ref} id={name} name={name} type={type} className="squiz-fte-form-control" {...rest} />
     </>
   );
 };
 
-export const TextInput = forwardRef(TextInputInternal);
+export const Input = forwardRef(InputInternal);

package/src/ui/Modal/Modal.tsx

@@ -56,6 +56,7 @@ const Modal = (
               <div className="squiz-fte-modal-header p-6 pb-2">
                 <h2 className="font-semibold text-gray-900 text-heading-2">{title}</h2>
                 <button
+                  type="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"

package/src/ui/ToolbarDropdown/ToolbarDropdown.spec.tsx

@@ -2,13 +2,14 @@ import '@testing-library/jest-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import ToolbarDropdown from './ToolbarDropdown';
+import ToolbarDropdownButton from '../ToolbarDropdownButton/ToolbarDropdownButton';
 
 describe('Toolbar dropdown', () => {
   const ToolbarDropdownComponent = () => {
     return (
       <ToolbarDropdown label="Test dropdown">
-        <button>Test button</button>
-        <button>Test button 2</button>
+        <ToolbarDropdownButton label="Test button" isDisabled={false} isActive={false} handleOnClick={jest.fn()} />
+        <ToolbarDropdownButton label="Test button 2" isDisabled={false} isActive={false} handleOnClick={jest.fn()} />
       </ToolbarDropdown>
     );
   };
@@ -17,6 +18,7 @@ describe('Toolbar dropdown', () => {
     render(<ToolbarDropdownComponent />);
     // Check that the supplied label renders
     const dropdownButton = screen.getByRole('button', { name: 'Test dropdown' });
+    expect(dropdownButton).toHaveAttribute('type', 'button');
     expect(dropdownButton).toBeInTheDocument();
   });
 

package/src/ui/ToolbarDropdown/ToolbarDropdown.tsx

@@ -21,7 +21,7 @@ const ToolbarDropdown = ({ children, label }: ToolbarDropdownProps) => {
 
   return (
     <div className="toolbar-dropdown" onBlur={handleBlur}>
-      <button id="dropdownHoverButton" className="toolbar-dropdown__button" onClick={handleDropDown}>
+      <button id="dropdownHoverButton" className="toolbar-dropdown__button" type="button" onClick={handleDropDown}>
         <span className="toolbar-dropdown__label">{label}</span>
         <ExpandMoreIcon className="toolbar-dropdown__icon" aria-hidden="true" />
       </button>

package/src/ui/_typography.scss

@@ -0,0 +1,46 @@
+a {
+  @apply text-blue-300;
+  text-decoration: underline;
+}
+
+h1 {
+  font-size: 1.625rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 2rem;
+}
+
+h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+  line-height: 1.5rem;
+}
+
+h3 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.375rem;
+}
+
+h4 {
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}
+
+h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}
+
+h6 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}

package/src/utils/converters/mocks/squizNodeJson.mock.ts

@@ -0,0 +1,75 @@
+import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+
+export const mockSquizNodeJson: FormattedTextModels.v1.FormattedText = [
+  {
+    children: [
+      {
+        type: 'text',
+        value: 'Hello ',
+      },
+      {
+        children: [
+          {
+            type: 'text',
+            value: 'Mr Bean',
+          },
+        ],
+        attributes: {
+          href: 'https://www.google.com',
+        },
+        font: {
+          bold: true,
+        },
+        type: 'tag',
+        tag: 'a',
+      },
+      {
+        type: 'text',
+        value: ', nice to ',
+      },
+      {
+        children: [
+          {
+            type: 'text',
+            value: 'meet you',
+          },
+        ],
+        attributes: {
+          href: 'https://www.google.com',
+        },
+        type: 'tag',
+        tag: 'a',
+      },
+      {
+        type: 'text',
+        value: '.',
+      },
+      {
+        children: [],
+        attributes: {
+          alt: 'Test',
+          height: '150',
+          width: '200',
+          src: 'https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif',
+          title: '',
+          resizable: 'false',
+        },
+        type: 'tag',
+        tag: 'img',
+      },
+    ],
+    type: 'tag',
+    tag: 'p',
+  },
+];
+
+export const mockSquizNodeTextJson: FormattedTextModels.v1.FormattedText = [
+  {
+    value: 'Hello world!',
+    type: 'text',
+  },
+  {
+    value: 'Another one...',
+    type: 'text',
+  },
+];