@squiz/formatted-text-editor 1.12.0-alpha.8 → 1.12.1-alpha.0

package/src/Extensions/Extensions.ts

@@ -0,0 +1,29 @@
+import {
+  BoldExtension,
+  HeadingExtension,
+  ItalicExtension,
+  NodeFormattingExtension,
+  ParagraphExtension,
+  UnderlineExtension,
+  HistoryExtension,
+} from 'remirror/extensions';
+import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
+import { LinkExtension } from './LinkExtension/LinkExtension';
+
+export const Extensions = () => [
+  new BoldExtension(),
+  new HeadingExtension(),
+  new ItalicExtension(),
+  new NodeFormattingExtension(),
+  new ParagraphExtension(),
+  new PreformattedExtension(),
+  new UnderlineExtension(),
+  new HistoryExtension(),
+  new LinkExtension({
+    supportedTargets: [
+      // '_self' is the browser default and will be used when encountering a link with a
+      // different target is encountered.
+      '_blank',
+    ],
+  }),
+];

package/src/Extensions/LinkExtension/LinkExtension.ts

@@ -0,0 +1,116 @@
+import { ApplySchemaAttributes, getMarkRanges, isElementDomNode, MarkExtensionSpec, MarkSpecOverride } from 'remirror';
+import { getTextSelection, getMarkRange, KeyBindingProps, updateMark, removeMark } from '@remirror/core';
+import { CommandFunction } from '@remirror/pm';
+import { LinkAttributes as RemirrorLinkAttributes, LinkExtension as RemirrorLinkExtension } from 'remirror/extensions';
+
+export type UpdateLinkOptions = LinkAttributes & {
+  text: string;
+};
+
+export type LinkAttributes = RemirrorLinkAttributes & {
+  title?: string;
+};
+
+export class LinkExtension extends RemirrorLinkExtension {
+  createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec {
+    const spec = super.createMarkSpec(extra, override);
+
+    return {
+      ...spec,
+      excludes: undefined,
+      attrs: {
+        ...spec.attrs,
+        title: { default: undefined },
+      },
+      parseDOM: [
+        {
+          tag: 'a[href]',
+          getAttrs: (node) => {
+            if (!isElementDomNode(node)) {
+              return false;
+            }
+
+            return {
+              ...extra.parse(node),
+              auto: false,
+              href: node.getAttribute('href'),
+              target: node.getAttribute('target'),
+              title: node.getAttribute('title'),
+            };
+          },
+        },
+      ],
+    };
+  }
+
+  shortcut({ tr }: KeyBindingProps): boolean {
+    // override parent implementation to allow a link to be inserted without requiring a text selection first.
+    const { from, to, $from } = tr.selection;
+    const mark = getMarkRange($from, this.type);
+    const selectedText = tr.doc.textBetween(from, to);
+
+    this.options.onShortcut({
+      activeLink: mark ? { attrs: mark.mark.attrs as LinkAttributes, from: mark.from, to: mark.to } : undefined,
+      selectedText,
+      from,
+      to,
+    });
+
+    return true;
+  }
+
+  selectLink(): CommandFunction {
+    // parent implementation selects only the link text, this mimics closer to Google Docs where
+    // the select text is widened to include the link but retains non-link selected text as well.
+    return (props) => {
+      const { tr } = props;
+      const ranges = getMarkRanges(tr.selection, this.type);
+
+      if (ranges.length === 0) {
+        return false;
+      }
+
+      // work out the start position of the first link and end position of the last link in the selection.
+      const from = Math.min(tr.selection.from, ...ranges.map((range) => range.from));
+      const to = Math.max(tr.selection.to, ...ranges.map((range) => range.to));
+
+      // don't need to widen the selection, return early.
+      if (tr.selection.from === from && tr.selection.to === to) {
+        return false;
+      }
+
+      // widen the selection to make sure the full link is included.
+      this.store.commands.selectText.original({ from, to })(props);
+      return true;
+    };
+  }
+
+  updateLink(options: UpdateLinkOptions): CommandFunction {
+    const { text, ...attrs } = options;
+
+    return (props) => {
+      const { tr, dispatch, view } = props;
+      const range = { from: tr.selection.from, to: tr.selection.to };
+      const selectedText = tr.doc.textBetween(range.from, range.to);
+
+      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));
+        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);
+      } else {
+        removeMark({ type: this.type, range })(props);
+      }
+
+      // 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)));
+      view?.focus();
+
+      return true;
+    };
+  }
+}

package/src/Extensions/PreformattedExtension/PreformattedExtension.ts

@@ -0,0 +1,50 @@
+import {
+  ApplySchemaAttributes,
+  command,
+  CommandFunction,
+  extension,
+  ExtensionTag,
+  NodeExtension,
+  NodeExtensionSpec,
+  NodeSpecOverride,
+  ProsemirrorNode,
+  toggleBlockItem,
+} from '@remirror/core';
+
+@extension({})
+export class PreformattedExtension extends NodeExtension {
+  get name() {
+    return 'preformatted' as const;
+  }
+
+  createTags() {
+    return [ExtensionTag.Block, ExtensionTag.TextBlock, ExtensionTag.FormattingNode];
+  }
+
+  createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec {
+    return {
+      content: 'inline*',
+      defining: true,
+      draggable: false,
+      ...override,
+      attrs: {
+        ...extra.defaults(),
+      },
+      parseDOM: [...(override.parseDOM ?? [])],
+      toDOM: (node: ProsemirrorNode) => {
+        return [`pre`, extra.dom(node), 0];
+      },
+    };
+  }
+
+  /**
+   * Toggle the <pre> for the current block.
+   */
+  @command()
+  togglePreformatted(): CommandFunction {
+    return toggleBlockItem({
+      type: this.type,
+      toggleType: 'paragraph',
+    });
+  }
+}

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/FormattedTextEditor.tsx

@@ -0,0 +1,3 @@
+import Editor from './Editor/Editor';
+
+export default Editor;

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useExtensionNames';

package/src/hooks/useExtensionNames.ts

@@ -0,0 +1,15 @@
+import { useRemirrorContext } from '@remirror/react';
+import { useMemo } from 'react';
+
+export const useExtensionNames = () => {
+  const { manager } = useRemirrorContext();
+  return useMemo(() => {
+    const extensionNames: Record<string, true> = {};
+
+    manager.extensions.forEach((extension) => {
+      extensionNames[extension.name] = true;
+    });
+
+    return extensionNames;
+  }, [manager]);
+};

package/src/index.scss

@@ -0,0 +1,19 @@
+/* Tailwind base styles, but scoped to the editor */
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+/* Global */
+@import './ui/forms';
+@import './ui/buttons';
+
+/* Components */
+@import './Editor/editor';
+@import './EditorToolbar/toolbar';
+@import './EditorToolbar/floating-toolbar';
+
+@import './ui/ToolbarButton/toolbar-button';
+@import './ui/ToolbarDropdown/toolbar-dropdown';
+@import './ui/ToolbarDropdownButton/toolbar-dropdown-button';
+
+@import './ui/Modal/modal';

package/src/index.ts

@@ -0,0 +1,3 @@
+import FormattedTextEditor from './FormattedTextEditor';
+
+export { FormattedTextEditor };

package/src/ui/Inputs/Select/Select.spec.tsx

@@ -0,0 +1,30 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Select } from './Select';
+
+describe('Select field', () => {
+  const selectOptions = {
+    chicken: { label: 'chicken' },
+    egg: { label: 'Egg' },
+  };
+
+  it('Renders the label', () => {
+    render(<Select name="select-field" label="Which came first?" value="Chicken" options={selectOptions} />);
+    // Check that the supplied label renders
+    const inputLabel = screen.getByLabelText('Which came first?');
+    expect(inputLabel).toBeInTheDocument();
+  });
+
+  it('Renders the default value', () => {
+    render(<Select name="select-field" label="Which came first?" value="Chicken" options={selectOptions} />);
+    // Check that default value supplied renders
+    expect(screen.getByDisplayValue('Chicken')).toBeInTheDocument();
+  });
+
+  it('Renders an empty state when no value is provided', () => {
+    render(<Select name="select-field" label="Which came first?" options={selectOptions} />);
+    // nbsp should be rendered so input maintains a consistent size when nothing is selected.
+    expect(screen.getByLabelText('Which came first?')).toContainHTML('&nbsp;');
+  });
+});

package/src/ui/Inputs/Select/Select.tsx

@@ -0,0 +1,66 @@
+import { Listbox } from '@headlessui/react';
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded';
+import ExpandLessRoundedIcon from '@mui/icons-material/ExpandLessRounded';
+
+export type SelectOptions = Record<string, SelectOption>;
+export type SelectOption = {
+  label: string;
+};
+
+export type SelectProps = {
+  name: string;
+  label?: string;
+  value?: string;
+  options: SelectOptions;
+  onChange?: (value: string) => void;
+};
+
+export const Select = ({ name, label, value, onChange, options }: SelectProps) => {
+  const [selectedOption, setSelectedOptions] = useState(value ? options[value] : null);
+  const handleChange = (value: string): void => {
+    setSelectedOptions(options[value]);
+    onChange?.(value);
+  };
+
+  return (
+    <Listbox value={value} name={name} aria-labelledby={name} onChange={handleChange}>
+      {({ open }) => (
+        <>
+          {label && <Listbox.Label className="squiz-fte-form-label">{label}</Listbox.Label>}
+          <div className="relative text-md text-gray-800">
+            <Listbox.Button className="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">
+              <span className="flex items-center">
+                <span className="block truncate">{selectedOption?.label}&nbsp;</span>
+              </span>
+              <span className="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
+                {!open ? (
+                  <ExpandMoreRoundedIcon className="text-gray-500" aria-hidden="true" />
+                ) : (
+                  <ExpandLessRoundedIcon className="text-gray-500" aria-hidden="true" />
+                )}
+              </span>
+            </Listbox.Button>
+            <Listbox.Options className="absolute z-10 mt-1 w-full overflow-auto rounded border-2 border-gray-300 bg-white">
+              {Object.entries(options).map(([key, option]) => (
+                <Listbox.Option
+                  key={key}
+                  value={key}
+                  className={({ active }) =>
+                    clsx(
+                      active ? 'bg-gray-100' : 'bg-white',
+                      'relative cursor-default select-none flex hover:bg-gray-100 py-2 px-3',
+                    )
+                  }
+                >
+                  <span className="block truncate">{option.label}</span>
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </div>
+        </>
+      )}
+    </Listbox>
+  );
+};

package/src/ui/Inputs/Text/TextInput.spec.tsx

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

package/src/ui/Inputs/Text/TextInput.tsx

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

package/src/ui/Modal/FormModal.spec.tsx

@@ -0,0 +1,20 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import FormModal from './FormModal';
+
+describe('FormModal', () => {
+  it('Triggers form submit handler when modal is submitted', () => {
+    const handleSubmit = jest.fn();
+
+    render(
+      <FormModal title="Modal title" onCancel={jest.fn()}>
+        <form onSubmit={handleSubmit}></form>
+      </FormModal>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    expect(handleSubmit).toHaveBeenCalled();
+  });
+});

package/src/ui/Modal/FormModal.tsx

@@ -0,0 +1,17 @@
+import React, { createRef, ReactElement } from 'react';
+import Modal, { ModalProps } from './Modal';
+
+type FormModalProps = Omit<ModalProps, 'onSubmit'>;
+
+const FormModal = (props: FormModalProps): ReactElement => {
+  const ref = createRef<HTMLDivElement>();
+  const handleSubmit = () => {
+    const form = ref.current?.querySelector('form');
+
+    form?.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+  };
+
+  return <Modal ref={ref} {...props} onSubmit={handleSubmit} />;
+};
+
+export default FormModal;

package/src/ui/Modal/Modal.spec.tsx

@@ -0,0 +1,113 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import Modal from './Modal';
+
+describe('Modal', () => {
+  const mockOnCancel = jest.fn();
+  const mockOnSubmit = jest.fn();
+
+  const ModalComponent = () => {
+    return (
+      <Modal title="Modal title" onCancel={mockOnCancel}>
+        <div>I am a child in the modal</div>
+      </Modal>
+    );
+  };
+
+  it('Renders the modal title', () => {
+    render(<ModalComponent />);
+    // Check that the modal heading displays
+    const modalHeading = screen.getByRole('heading', {
+      name: /Modal title/i,
+    });
+    expect(modalHeading).toBeInTheDocument();
+  });
+
+  it('Renders the child', () => {
+    render(<ModalComponent />);
+    // Check that the modal heading displays
+    const modalChild = screen.getByText(/I am a child in the modal/i);
+    expect(modalChild).toBeInTheDocument();
+  });
+
+  it('Renders the cancel button', () => {
+    render(<ModalComponent />);
+    // 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(mockOnCancel).toHaveBeenCalled();
+  });
+
+  it('Does not render the submit button if there is no submit function supplied', () => {
+    render(<ModalComponent />);
+    // Check that the submit button does not render
+    const submitButton = screen.queryByRole('button', { name: 'Apply' });
+    expect(submitButton).not.toBeInTheDocument();
+  });
+
+  it('Renders the submit button if there is a submit function supplied', () => {
+    render(
+      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+        <div>I am a child in the modal</div>
+      </Modal>,
+    );
+    // Check that the submit button renders
+    const submitButton = screen.getByRole('button', { name: 'Apply' });
+    expect(submitButton).toBeInTheDocument();
+  });
+
+  it('Checks that the submit function fires if you click on the submit button', () => {
+    render(
+      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+        <div>I am a child in the modal</div>
+      </Modal>,
+    );
+    // Check that the submit button renders
+    const submitButton = screen.getByRole('button', { name: 'Apply' });
+    expect(submitButton).toBeInTheDocument();
+    // check that firing the submit button fires the submit function
+    fireEvent.click(submitButton);
+    expect(mockOnSubmit).toHaveBeenCalled();
+  });
+
+  it('Calls the onSubmit handler when the enter key is pressed', () => {
+    render(
+      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    fireEvent.keyUp(screen.getByText('Modal content'), { key: 'Enter' });
+
+    expect(mockOnSubmit).toHaveBeenCalled();
+  });
+
+  it('Calls the onCancel handler when the escape key is pressed', () => {
+    render(
+      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    fireEvent.keyUp(screen.getByText('Modal content'), { key: 'Escape' });
+
+    expect(mockOnCancel).toHaveBeenCalled();
+  });
+
+  it('Auto-focuses on the first non-hidden input on mount', () => {
+    render(
+      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+        <>
+          <input id="hidden-input" type="hidden" />
+          <label htmlFor="my-input">My input</label>
+          <input id="my-input" type="text" />
+        </>
+      </Modal>,
+    );
+
+    expect(screen.getByLabelText('My input')).toHaveFocus();
+  });
+});

package/src/ui/Modal/Modal.tsx

@@ -0,0 +1,97 @@
+import React, { ForwardedRef, forwardRef, ReactElement, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import { FocusTrap } from '@mui/base';
+
+export type ModalProps = {
+  title: string;
+  children: ReactElement;
+  onCancel: () => void;
+  onSubmit?: () => void;
+  className?: string;
+};
+
+const Modal = (
+  { children, title, onCancel, onSubmit, className }: ModalProps,
+  ref: ForwardedRef<HTMLDivElement>,
+): ReactElement => {
+  const container = useMemo(() => {
+    const element = document.createElement('div');
+    element.classList.add('squiz-fte-scope');
+    return element;
+  }, []);
+  const keydown = (e: { key: string }) => {
+    if (e.key === 'Escape') {
+      onCancel();
+    }
+    if (e.key === 'Enter') {
+      onSubmit && onSubmit();
+    }
+  };
+
+  // register key listeners for Enter/Escape on key up so the editor doesn't handle the event as well
+  useEffect(() => {
+    window.addEventListener('keyup', keydown);
+    return () => window.removeEventListener('keyup', keydown);
+  }, []);
+
+  // add/remove the modal container from the DOM and focus on the first input
+  useEffect(() => {
+    const firstInput = container.querySelector('input:not([type=hidden])') as HTMLInputElement;
+
+    document.body.appendChild(container);
+    firstInput?.focus();
+
+    return () => {
+      document.body.removeChild(container);
+    };
+  }, [container]);
+
+  return createPortal(
+    <>
+      <FocusTrap open>
+        <div ref={ref} className={`squiz-fte-modal-wrapper ${className ? className : ''}`} tabIndex={-1}>
+          <div className="w-modal-sm my-6 mx-auto">
+            <div className="squiz-fte-modal">
+              <div className="squiz-fte-modal-header p-6 pb-2">
+                <h2 className="font-semibold text-gray-900 text-heading-2">{title}</h2>
+                <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"
+                >
+                  <CloseRoundedIcon />
+                </button>
+              </div>
+              <div className="squiz-fte-modal-content">{children}</div>
+              <div className="squiz-fte-modal-footer p-6 pt-3">
+                <button
+                  className="squiz-fte-modal-footer__button bg-gray-200 text-gray-700 mr-2 hover:bg-gray-300"
+                  type="button"
+                  onClick={onCancel}
+                  aria-label="Cancel"
+                >
+                  Cancel
+                </button>
+                {onSubmit && (
+                  <button
+                    className="squiz-fte-modal-footer__button bg-blue-300 text-white hover:bg-blue-400"
+                    type="button"
+                    onClick={onSubmit}
+                    aria-label="Apply"
+                  >
+                    Apply
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </FocusTrap>
+      <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
+    </>,
+    container,
+  );
+};
+
+export default forwardRef(Modal);