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

package/src/ui/Modal/_modal.scss

@@ -0,0 +1,24 @@
+.squiz-fte-modal {
+  @apply border-0 rounded shadow-lg flex flex-col w-full bg-white font-base;
+  border-radius: 8px;
+
+  &-wrapper {
+    @apply justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none;
+  }
+
+  &-header {
+    @apply flex items-start justify-between;
+  }
+
+  &-content {
+    @apply relative px-6 flex-auto;
+  }
+
+  &-footer {
+    @apply flex items-center justify-end rounded-b;
+
+    &__button {
+      @apply squiz-fte-btn text-md font-bold;
+    }
+  }
+}

package/src/ui/ToolbarButton/ToolbarButton.tsx

@@ -0,0 +1,26 @@
+import React, { ReactElement } from 'react';
+
+type ToolbarButtonProps = {
+  handleOnClick: () => void;
+  isDisabled?: boolean;
+  isActive: boolean;
+  icon: ReactElement;
+  label: string;
+};
+
+const ToolbarButton = ({ handleOnClick, isDisabled, isActive, icon, label }: ToolbarButtonProps) => {
+  return (
+    <button
+      aria-label={label}
+      title={label}
+      type="button"
+      onClick={handleOnClick}
+      disabled={isDisabled}
+      className={`squiz-fte-btn toolbar-button ${isActive ? 'is-active' : ''}`}
+    >
+      {icon}
+    </button>
+  );
+};
+
+export default ToolbarButton;

package/src/ui/ToolbarButton/_toolbar-button.scss

@@ -0,0 +1,17 @@
+.toolbar-button {
+  @apply bg-white text-gray-600 p-1;
+
+  ~ .toolbar-button {
+    margin-left: 2px;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: rgba(black, 0.04);
+  }
+
+  &.is-active,
+  &:active {
+    @apply text-blue-300 bg-blue-100;
+  }
+}

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

@@ -0,0 +1,78 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import ToolbarDropdown from './ToolbarDropdown';
+
+describe('Toolbar dropdown', () => {
+  const ToolbarDropdownComponent = () => {
+    return (
+      <ToolbarDropdown label="Test dropdown">
+        <button>Test button</button>
+        <button>Test button 2</button>
+      </ToolbarDropdown>
+    );
+  };
+
+  it('Renders the dropdown button', () => {
+    render(<ToolbarDropdownComponent />);
+    // Check that the supplied label renders
+    const dropdownButton = screen.getByRole('button', { name: 'Test dropdown' });
+    expect(dropdownButton).toBeInTheDocument();
+  });
+
+  it('Renders the child elements for the dropdown', () => {
+    render(<ToolbarDropdownComponent />);
+    // Check that default value supplied renders
+    expect(screen.getByRole('button', { name: 'Test button' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Test button 2' })).toBeInTheDocument();
+  });
+
+  it('Renders the dropdown menu after clicking the dropdown button', () => {
+    const { baseElement } = render(<ToolbarDropdownComponent />);
+    expect(baseElement).toBeTruthy();
+
+    const dropdownButton = baseElement.querySelector('button#dropdownHoverButton') as HTMLButtonElement;
+    expect(dropdownButton).toBeTruthy();
+    fireEvent.click(dropdownButton);
+
+    const dropdownMenu = baseElement.querySelector('div.toolbar-dropdown__menu') as HTMLDivElement;
+    expect(dropdownMenu).toBeTruthy();
+    expect(dropdownMenu.classList).toContain('block');
+  });
+
+  it('Handles the onBlur call when focusing out of the menu', () => {
+    const { baseElement } = render(<ToolbarDropdownComponent />);
+    expect(baseElement).toBeTruthy();
+
+    const dropdownButton = baseElement.querySelector('button#dropdownHoverButton') as HTMLButtonElement;
+    expect(dropdownButton).toBeTruthy();
+    fireEvent.click(dropdownButton);
+
+    const dropdownMenu = baseElement.querySelector('div.toolbar-dropdown__menu') as HTMLDivElement;
+    expect(dropdownMenu).toBeTruthy();
+    expect(dropdownMenu.classList).toContain('block');
+
+    fireEvent.blur(dropdownMenu);
+
+    expect(dropdownMenu.classList).toContain('hidden');
+  });
+
+  it('Closes the dropdown menu after clicking a child element', () => {
+    const { baseElement } = render(<ToolbarDropdownComponent />);
+    expect(baseElement).toBeTruthy();
+
+    const dropdownButton = baseElement.querySelector('button#dropdownHoverButton') as HTMLButtonElement;
+    expect(dropdownButton).toBeTruthy();
+    fireEvent.click(dropdownButton);
+
+    const dropdownMenu = baseElement.querySelector('div.toolbar-dropdown__menu') as HTMLDivElement;
+    expect(dropdownMenu).toBeTruthy();
+    expect(dropdownMenu.classList).toContain('block');
+
+    const childElement = screen.getByRole('button', { name: 'Test button' });
+    expect(childElement).toBeTruthy();
+    fireEvent.click(childElement);
+
+    expect(dropdownMenu.classList).toContain('hidden');
+  });
+});

package/src/ui/ToolbarDropdown/ToolbarDropdown.tsx

@@ -0,0 +1,42 @@
+import React, { FocusEventHandler, useState } from 'react';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+type ToolbarDropdownProps = {
+  children: JSX.Element | JSX.Element[];
+  label: string;
+};
+
+const ToolbarDropdown = ({ children, label }: ToolbarDropdownProps) => {
+  const [isOpen, setOpen] = useState<boolean>(false);
+
+  const handleDropDown = () => {
+    setOpen(!isOpen);
+  };
+
+  const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {
+    if (event.relatedTarget?.id !== 'dropdownMenuButton' && !event.target?.className.includes('is-active')) {
+      isOpen && handleDropDown();
+    }
+  };
+
+  return (
+    <div className="toolbar-dropdown" onBlur={handleBlur}>
+      <button id="dropdownHoverButton" className="toolbar-dropdown__button" onClick={handleDropDown}>
+        <span className="toolbar-dropdown__label">{label}</span>
+        <ExpandMoreIcon className="toolbar-dropdown__icon" aria-hidden="true" />
+      </button>
+
+      <div
+        id="dropdown"
+        className={`toolbar-dropdown__menu z-10 ${isOpen ? 'block' : 'hidden'} bg-white divide-y w-169`}
+      >
+        {/* eslint-disable-next-line */}
+        <ul aria-labelledby="dropdownHoverButton" onClick={handleDropDown}>
+          {children}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default ToolbarDropdown;

package/src/ui/ToolbarDropdown/_toolbar-dropdown.scss

@@ -0,0 +1,32 @@
+.toolbar-dropdown {
+  &__button {
+    @apply flex items-center font-base text-md font-semibold text-gray-600;
+    align-self: center;
+
+    height: 2rem;
+    padding-left: 0.5rem;
+
+    &:active,
+    &:hover,
+    &:focus {
+      background-color: rgba(black, 0.04);
+    }
+
+    .toolbar-dropdown__label {
+      display: inline-flex;
+      width: 7rem;
+    }
+
+    .toolbar-dropdown__icon {
+      width: 1rem;
+      height: 1.5rem;
+    }
+  }
+
+  &__menu {
+    @apply rounded shadow-sm border border-gray-300;
+
+    position: absolute;
+    margin-top: 0.75rem;
+  }
+}

package/src/ui/ToolbarDropdownButton/ToolbarDropdownButton.spec.tsx

@@ -0,0 +1,48 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import React from 'react';
+import ToolbarDropdownButton from './ToolbarDropdownButton';
+
+describe('Toolbar dropdown', () => {
+  const handleSelect = jest.fn();
+
+  const ToolbarDropdownButtonComponent = () => {
+    return (
+      <ToolbarDropdownButton handleOnClick={handleSelect} isDisabled={false} isActive={true} label={'Test label'}>
+        <h1>Test heading 1</h1>
+      </ToolbarDropdownButton>
+    );
+  };
+
+  const EmptyToolbarDropdownButtonComponent = () => {
+    return (
+      <ToolbarDropdownButton handleOnClick={handleSelect} isDisabled={false} isActive={false} label={'Test label'} />
+    );
+  };
+
+  it('Renders the dropdown menu button', () => {
+    const { baseElement } = render(<ToolbarDropdownButtonComponent />);
+    expect(baseElement).toBeTruthy();
+
+    const buttonElement = baseElement.querySelector('button#dropdownMenuButton') as HTMLButtonElement;
+    expect(buttonElement).toBeTruthy();
+    expect(buttonElement.textContent).toBe('Test heading 1');
+  });
+
+  it('Renders the dropdown menu button active icon', () => {
+    const { baseElement } = render(<ToolbarDropdownButtonComponent />);
+    expect(baseElement).toBeTruthy();
+
+    const iconElement = baseElement.querySelector('svg.dropdown-button-icon') as SVGElement;
+    expect(iconElement).toBeTruthy();
+  });
+
+  it('Should render the label as button text if no children are provided', () => {
+    const { baseElement } = render(<EmptyToolbarDropdownButtonComponent />);
+    expect(baseElement).toBeTruthy();
+
+    const buttonElement = baseElement.querySelector('button#dropdownMenuButton') as HTMLButtonElement;
+    expect(buttonElement).toBeTruthy();
+    expect(buttonElement.textContent).toBe('Test label');
+  });
+});

package/src/ui/ToolbarDropdownButton/ToolbarDropdownButton.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import CheckIcon from '@mui/icons-material/Check';
+
+type DropdownButtonProps = {
+  children?: JSX.Element;
+  handleOnClick: () => void;
+  isDisabled: boolean;
+  isActive: boolean;
+  label: string;
+};
+
+const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label }: DropdownButtonProps) => {
+  return (
+    <button
+      aria-label={label}
+      id="dropdownMenuButton"
+      title={label}
+      type="button"
+      onClick={handleOnClick}
+      disabled={isDisabled}
+      className={`btn dropdown-button ${isActive ? 'is-active' : ''}`}
+    >
+      <span>{children || label}</span>
+      {isActive && <CheckIcon className="dropdown-button-icon" />}
+    </button>
+  );
+};
+
+export default DropdownButton;

package/src/ui/ToolbarDropdownButton/_toolbar-dropdown-button.scss

@@ -0,0 +1,14 @@
+.dropdown-button {
+  @apply px-2 py-1 text-gray-600;
+
+  height: 40px;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+
+  &:hover,
+  &:focus {
+    background-color: rgba(black, 0.04);
+  }
+}

package/src/ui/_buttons.scss

@@ -0,0 +1,19 @@
+.squiz-fte-btn {
+  @apply font-normal rounded ease-linear transition-all duration-150;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  padding: 6px 12px;
+
+  &.disabled,
+  &[disabled] {
+    cursor: not-allowed;
+    @apply opacity-50;
+  }
+}

package/src/ui/_forms.scss

@@ -0,0 +1,16 @@
+.squiz-fte {
+  &-form-group {
+    @apply flex flex-col;
+  }
+  &-form-label {
+    @apply mb-1 text-md font-semibold text-gray-600;
+  }
+  &-form-control {
+    padding: 6px 12px;
+    @apply placeholder-slate-300 text-gray-800 relative bg-white rounded text-md border-2 border-gray-300 outline-0 focus:outline-0 focus:border-blue-300 w-full;
+    &:focus,
+    &:active {
+      box-shadow: none;
+    }
+  }
+}

package/src/utils/createToolbarPositioner.ts

@@ -0,0 +1,115 @@
+import { hasStateChanged, isPositionVisible, Positioner } from 'remirror/extensions';
+import { Coords, getMarkRange, getTextSelection } from 'remirror';
+import { getCursorRect } from './getCursorRect';
+
+export type ToolbarPositionerProps = {
+  types: string[];
+};
+
+export type ToolbarPositionerRange = {
+  isSelectionInView: boolean;
+  visible: boolean;
+  marks: Record<
+    string,
+    {
+      isExclusivelyActive: boolean;
+      isActive: boolean;
+    }
+  >;
+  cursor: {
+    from: Coords;
+    to: Coords;
+  };
+};
+
+/* istanbul ignore next */
+export const createToolbarPositioner = ({ types }: ToolbarPositionerProps) => {
+  // Inspired by "createMarkPositioner".
+  // See: https://github.com/remirror/remirror/blob/107cba/packages/remirror__extension-positioner/src/core-positioners.ts#L267
+  return Positioner.create({
+    hasChanged: hasStateChanged,
+    getActive: (props) => {
+      const { state, view } = props;
+
+      try {
+        const selection = getTextSelection(state.selection, state.doc);
+        const cursor = { from: view.coordsAtPos(selection.from), to: view.coordsAtPos(selection.to) };
+        const data: ToolbarPositionerRange = {
+          isSelectionInView:
+            isPositionVisible(getCursorRect(cursor.from), view.dom) ||
+            isPositionVisible(getCursorRect(cursor.to), view.dom),
+          cursor: cursor,
+          visible: false,
+          marks: {},
+        };
+
+        data.visible = !selection.empty && data.isSelectionInView;
+
+        types.forEach((type) => {
+          const markRange = getMarkRange(selection.$from, type, selection.$to);
+
+          if (!markRange) {
+            data.marks[type] = { isActive: false, isExclusivelyActive: false };
+            return;
+          }
+
+          // exclusively active =
+          //   the entire selection has the mark applied.
+          // active =
+          //   at least part of the selection has the mark applied. "getMarkRanges" will return an empty array
+          //   if this isn't the case. if there is no selection the cursor must be within the bounds of the mark,
+          //   not on the edges.
+          const isExclusivelyActive = selection.empty
+            ? selection.from > markRange.from && selection.to < markRange.to
+            : selection.from >= markRange.from && selection.to <= markRange.to;
+          const isActive = selection.empty ? selection.from > markRange.from && selection.to < markRange.to : true;
+
+          // the toolbar will be visible if there is either a selection, or we are within the bounds of a mark
+          // we have formatting tools for.
+          data.visible = data.visible || isExclusivelyActive;
+          data.marks[type] = { isExclusivelyActive, isActive };
+        });
+
+        return data.visible ? [data] : Positioner.EMPTY;
+      } catch {
+        return Positioner.EMPTY;
+      }
+    },
+    getPosition: (props) => {
+      const { element, data, view } = props;
+      const { cursor, visible } = data;
+      const { from, to } = cursor;
+      const parent = element.offsetParent ?? view.dom;
+      const parentRect = parent.getBoundingClientRect();
+      const height = Math.abs(to.bottom - from.top);
+
+      // Hack to get JSDOM to work, positioning doesn't work great here.
+      if (isNaN(parentRect.top)) {
+        return {
+          rect: new DOMRect(0, 0, 0, 0),
+          y: 0,
+          x: 0,
+          height: 0,
+          width: 0,
+          visible: false,
+        };
+      }
+
+      // True when the selection spans multiple lines.
+      const spansMultipleLines = height > from.bottom - from.top;
+
+      // The position furthest to the left.
+      const leftmost = Math.min(from.left, to.left);
+
+      // The position nearest the top.
+      const topmost = Math.min(from.top, to.top);
+
+      const left = parent.scrollLeft + (spansMultipleLines ? to.left - parentRect.left : leftmost - parentRect.left);
+      const top = parent.scrollTop + topmost - parentRect.top;
+      const width = spansMultipleLines ? 1 : Math.abs(from.left - to.right);
+      const rect = new DOMRect(spansMultipleLines ? to.left : leftmost, topmost, width, height);
+
+      return { rect, y: top, x: left, height, width, visible };
+    },
+  });
+};

package/src/utils/getCursorRect.ts

@@ -0,0 +1,5 @@
+import { Coords } from 'remirror';
+
+export const getCursorRect = (coords: Coords): DOMRect => {
+  return new DOMRect(coords.left, coords.top, 1, coords.top - coords.bottom);
+};

package/tailwind.config.cjs

@@ -0,0 +1,83 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './node_modules/flowbite/**/*.js'],
+  theme: {
+    extend: {
+      borderRadius: {
+        DEFAULT: '4px',
+        md: '6px',
+      },
+      fontFamily: {
+        base: 'Open Sans, Arial, sans-serif',
+      },
+      fontWeight: {
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+      },
+      fontSize: {
+        xlg: '1.125rem',
+        lg: '1rem',
+        md: '0.875rem',
+        sm: '0.8125rem',
+        base: '1rem',
+        'heading-1': ['1.625rem', '2rem'],
+        'heading-2': ['1.25rem', '1.5rem'],
+        'heading-3': ['1.125rem', '1.375rem'],
+        'heading-4': ['1rem', '1.25rem'],
+      },
+      fontFamily: {
+        base: 'Open Sans, Arial, sans-serif',
+      },
+      boxShadow: {
+        outline: '0 0 0 1px rgba(0,0,0,0.10)',
+        sm: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 4px 2px rgba(0,0,0,0.08)',
+        DEFAULT: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12)',
+        md: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12)',
+        lg: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 24px 12px rgba(0,0,0,0.12)',
+        inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+        none: 'none',
+      },
+      width: {
+        'modal-sm': '25rem',
+        'modal-md': '37.5rem',
+        'modal-lg': '50rem',
+        'modal-xl': '62.5rem',
+      },
+      spacing: {
+        1: '0.25rem', // 4px
+        2: '0.5rem', // 8px
+        3: '0.75rem', // 12px
+        4: '1rem', // 16px
+        5: '1.25rem', // 20px
+        6: '1.5rem', // 24px
+        7: '1.75rem', // 28px
+        8: '2rem', // 32px
+        169: '169px', // 169px
+      },
+      colors: {
+        gray: {
+          50: '#F7F7F7',
+          100: '#F5F5F5',
+          200: '#ededed',
+          300: '#e0e0e0',
+          400: '#BABABA',
+          500: '#949494',
+          600: '#707070',
+          700: '#4F4F4F',
+          800: '#3D3D3D',
+          900: '#2B2B2B',
+        },
+        blue: {
+          100: '#e6f1fa',
+          200: '#8FC0EB',
+          300: '#0774d2',
+          400: '#044985',
+        },
+      },
+    },
+  },
+  plugins: [],
+  important: true,
+};

package/tests/index.ts

@@ -0,0 +1,2 @@
+export * from './renderWithEditor';
+export * from './select';

package/tests/renderWithEditor.tsx

@@ -0,0 +1,110 @@
+import React, { ReactElement, useEffect } from 'react';
+import { render, RenderOptions } from '@testing-library/react';
+import { Extension, RemirrorContentType, RemirrorManager } from '@remirror/core';
+import { CorePreset } from '@remirror/preset-core';
+import { BuiltinPreset } from 'remirror';
+import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
+import { Extensions } from '../src/Extensions/Extensions';
+import { RemirrorTestChain } from 'jest-remirror';
+
+export type EditorRenderOptions = RenderOptions & {
+  content?: RemirrorContentType;
+  extensions?: Extension[];
+};
+
+type TestEditorProps = EditorRenderOptions & {
+  children: ReactElement;
+  onReady: (manager: RemirrorManager<Extension>) => void;
+};
+
+type EditorRenderResult = {
+  editor: RemirrorTestChain<Extension | CorePreset | BuiltinPreset>;
+  getHtmlContent: () => string | undefined;
+  getJsonContent: () => any;
+  getSelectedText: () => string | undefined;
+  elements: {
+    editor: HTMLDivElement;
+  };
+};
+
+const TestEditor = ({ children, extensions, content, onReady }: TestEditorProps) => {
+  const { manager, state, setState } = useRemirror({
+    extensions: () => extensions || Extensions(),
+    content: content,
+    selection: 'start',
+    stringHandler: 'html',
+  });
+
+  useEffect(() => {
+    onReady(manager);
+  }, []);
+
+  return (
+    <Remirror
+      manager={manager}
+      state={state}
+      onChange={(params) => {
+        setState(params.state);
+      }}
+    >
+      {children}
+      <EditorComponent />
+    </Remirror>
+  );
+};
+
+/**
+ * Renders a React component alongside a very minimalistic editor within a Remirror context.
+ *
+ * We are using the "jest-remirror" library to expose some helper functions via the "editor" property we return.
+ *
+ * When interacting with the editor helper functions you should wrap calls in an "act" and await on it to avoid
+ * console errors during tests.
+ *
+ * We are NOT using the "renderEditor" method exposed by that library as it is not suitable for our use case.
+ * Its purpose is for rendering a plain Remirror editor outside of the context of React. This allows for testing
+ * extension logic but not testing any interaction between the extension logic and UI components.
+ *
+ * Interacting with the editor should typically trigger a re-render of components that use the Remirror hooks.
+ * Note that the "useRemirrorContext" hook has an "autoUpdate" option which controls if the hook re-renders on
+ * all changes. This defaults to false, some hooks which use this internally (eg. "useCommands") and
+ * leave this as the default.
+ *
+ * @param {ReactElement}        ui      The React component to render alongside the editor.
+ * @param {EditorRenderOptions} options Options to configure initial content, loaded extensions, etc.
+ *
+ * @return {Promise<EditorRenderResult>}
+ */
+export const renderWithEditor = async (
+  ui: ReactElement,
+  options?: EditorRenderOptions,
+): Promise<EditorRenderResult> => {
+  const result: Partial<EditorRenderResult> = {
+    getHtmlContent: () => document.querySelector('.remirror-editor')?.innerHTML,
+    getJsonContent: () => result.editor?.state.doc.content.child(0).toJSON(),
+    getSelectedText: () => result.editor?.state.doc.textBetween(result.editor?.from, result.editor?.to),
+  };
+  let isReady = false;
+
+  const { container } = render(
+    <TestEditor
+      onReady={(manager) => {
+        result.editor = RemirrorTestChain.create(manager);
+        isReady = true;
+      }}
+      {...options}
+    >
+      {ui}
+    </TestEditor>,
+  );
+
+  if (!isReady) {
+    throw new Error('The editor component did not mount.');
+  }
+
+  result.elements = {
+    editor: container.querySelector('.remirror-editor') as HTMLDivElement,
+  };
+
+  return result as EditorRenderResult;
+};