@squiz/formatted-text-editor 0.0.0-rbv2-20240530041851

package/src/ui/Modal/Modal.tsx

@@ -0,0 +1,104 @@
+import React, { ForwardedRef, forwardRef, ReactElement, useEffect, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import { FocusTrap } from '@mui/base';
+import clsx from 'clsx';
+
+export type ModalProps = {
+  title: string;
+  icon: ReactElement;
+  children: ReactElement;
+  onCancel: () => void;
+  onSubmit?: () => void;
+  className?: string;
+};
+
+const Modal = (
+  { children, title, icon, onCancel, onSubmit, className }: ModalProps,
+  ref: ForwardedRef<HTMLDivElement>,
+): ReactElement => {
+  const content = useRef<HTMLDivElement>(null);
+  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('keydown', keydown);
+    return () => window.removeEventListener('keydown', keydown);
+  }, []);
+
+  // add/remove the modal container from the DOM and focus on the first input
+  useEffect(() => {
+    const firstInput = content.current?.querySelector('input:not([type=hidden]), button') as HTMLElement;
+
+    document.body.appendChild(container);
+    firstInput?.focus();
+
+    return () => {
+      document.body.removeChild(container);
+    };
+  }, [container]);
+
+  return createPortal(
+    <>
+      <FocusTrap open>
+        <div ref={ref} className={clsx('squiz-fte-modal-wrapper', 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-4">
+                <div className="squiz-fte-modal-header-icon mr-1.5 mt-[-1px]">{icon}</div>
+                <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"
+                >
+                  <CloseRoundedIcon />
+                </button>
+              </div>
+              <div className="squiz-fte-modal-content" ref={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);

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/Tabs/Tabs.spec.tsx

@@ -0,0 +1,44 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Tabs, TabOptions } from './Tabs';
+import { MarkName } from '../../Extensions/Extensions';
+
+const linkTypeOptions: TabOptions = {
+  [MarkName.AssetLink]: { label: 'From source' },
+  [MarkName.Link]: { label: 'From URL' },
+};
+
+describe('Tabs', () => {
+  const mockOnChange = jest.fn();
+
+  const TabsComponent = () => {
+    return <Tabs value={MarkName.AssetLink} options={linkTypeOptions} onChange={mockOnChange} />;
+  };
+
+  it('renders the Tabs component', () => {
+    render(<TabsComponent />);
+    expect(screen.getByText('From source')).toBeInTheDocument();
+    expect(screen.getByText('From URL')).toBeInTheDocument();
+  });
+
+  it('defaults active to asset link', () => {
+    render(<TabsComponent />);
+    expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('From source');
+  });
+
+  it('changes selected state when clicking the other tab', () => {
+    render(<TabsComponent />);
+
+    const assetLink = screen.getByTestId('assetLink');
+    const link = screen.getByTestId('link');
+
+    expect(assetLink).toHaveAttribute('aria-selected', 'true');
+    expect(link).not.toHaveAttribute('aria-selected', 'true');
+
+    fireEvent.click(link);
+
+    expect(assetLink).not.toHaveAttribute('aria-selected', 'true');
+    expect(link).toHaveAttribute('aria-selected', 'true');
+  });
+});

package/src/ui/Tabs/Tabs.tsx

@@ -0,0 +1,41 @@
+import { Tab } from '@headlessui/react';
+import React, { Fragment } from 'react';
+import clsx from 'clsx';
+
+export type TabOptions = Record<string, TabOption>;
+export type TabOption = {
+  label: string;
+};
+
+export type TabsProps = {
+  value: string;
+  options: TabOptions;
+  onChange?: (value: string) => void;
+};
+
+export const Tabs = ({ value, options, onChange }: TabsProps) => (
+  <Tab.Group
+    // Check what index the selected tab is, otherwise default to first tab
+    defaultIndex={Object.keys(options).indexOf(value) || 0}
+    // Check what the selected tab key is and trigger onChange
+    onChange={(index) => {
+      const selectedTab = Object.keys(options)[index];
+      onChange?.(selectedTab);
+    }}
+  >
+    <Tab.List className="grid grid-flow-col h-10 border-b border-gray-300">
+      {Object.entries(options).map(([key, option]) => (
+        <Tab key={key} as={Fragment}>
+          {({ selected }) => (
+            <div className="flex flex-col justify-between" data-testid={key} aria-selected={selected}>
+              <button type="button" className={clsx('mt-[7px] text-gray-800', selected && 'font-bold')}>
+                {option.label}
+              </button>
+              {selected && <span className="h-[3px] bg-gray-800 w-11/12 self-center rounded-t-sm" />}
+            </div>
+          )}
+        </Tab>
+      ))}
+    </Tab.List>
+  </Tab.Group>
+);

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

@@ -0,0 +1,80 @@
+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">
+        <ToolbarDropdownButton label="Test button" isDisabled={false} isActive={false} handleOnClick={jest.fn()} />
+        <ToolbarDropdownButton label="Test button 2" isDisabled={false} isActive={false} handleOnClick={jest.fn()} />
+      </ToolbarDropdown>
+    );
+  };
+
+  it('Renders the dropdown button', () => {
+    render(<ToolbarDropdownComponent />);
+    // Check that the supplied label renders
+    const dropdownButton = screen.getByRole('button', { name: 'Test dropdown' });
+    expect(dropdownButton).toHaveAttribute('type', 'button');
+    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" type="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 rounded;
+    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,33 @@
+import React from 'react';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+
+type DropdownButtonProps = {
+  children?: JSX.Element;
+  handleOnClick: () => void;
+  isDisabled: boolean;
+  isActive: boolean;
+  label: string;
+  icon?: JSX.Element;
+};
+
+const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label, icon }: DropdownButtonProps) => {
+  return (
+    <button
+      aria-label={label}
+      id="dropdownMenuButton"
+      title={label}
+      type="button"
+      onClick={handleOnClick}
+      disabled={isDisabled}
+      className={`btn dropdown-button ${isActive ? 'is-active' : ''}`}
+    >
+      <div className="dropdown-button-label">
+        {icon && icon}
+        {children || label}
+      </div>
+      {isActive && <CheckRoundedIcon className="dropdown-button-icon" />}
+    </button>
+  );
+};
+
+export default DropdownButton;

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

@@ -0,0 +1,25 @@
+.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);
+  }
+
+  svg {
+    font-size: 18px;
+  }
+
+  .dropdown-button-label {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    gap: 5px;
+  }
+}

package/src/ui/_forms.scss

@@ -0,0 +1,32 @@
+.squiz-fte {
+  &-form-group {
+    @apply flex flex-col;
+  }
+  &-form-label {
+    @apply mb-1 text-md font-semibold text-gray-600;
+  }
+  &-form-control {
+    height: 36px;
+    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;
+    }
+  }
+  &-invalid-form-field {
+    .squiz-fte-form-control,
+    .resource-picker {
+      @apply border-red-300 bg-no-repeat pr-8;
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0ibm9uZSIvPjxnIGNsYXNzPSJjdXJyZW50TGF5ZXIiPjxwYXRoIGQ9Ik00LjQ3IDIxaDE1LjA2YzEuNTQgMCAyLjUtMS42NyAxLjczLTNMMTMuNzMgNC45OWMtLjc3LTEuMzMtMi42OS0xLjMzLTMuNDYgMEwyLjc0IDE4Yy0uNzcgMS4zMy4xOSAzIDEuNzMgM3pNMTIgMTRjLS41NSAwLTEtLjQ1LTEtMXYtMmMwLS41NS40NS0xIDEtMXMxIC40NSAxIDF2MmMwIC41NS0uNDUgMS0xIDF6bTEgNGgtMnYtMmgydjJ6IiBjbGFzcz0ic2VsZWN0ZWQiIGZpbGw9IiNkNzIzMjEiLz48L2c+PC9zdmc+');
+      background-position: center right 0.25rem;
+      background-size: 1.5rem;
+    }
+  }
+  &-form-error {
+    @apply text-red-300;
+    font-size: 13px;
+    line-height: 1.23;
+    padding-top: 0.25rem;
+  }
+}

package/src/ui/_typography.scss

@@ -0,0 +1,95 @@
+// Add any formatting we want the editor to have for the tools we have added - all default styling has been removed by the reset
+.remirror-editor {
+  a {
+    @apply text-blue-300;
+    text-decoration: underline;
+  }
+
+  p {
+    margin-block-end: 0.8rem;
+  }
+
+  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;
+  }
+
+  .code-block,
+  .preformatted {
+    display: flex;
+
+    .material-symbols-rounded {
+      @apply text-gray-700 text-xlg;
+      pointer-events: none;
+      margin-right: 0.375rem;
+    }
+
+    .block-divider {
+      @apply bg-gray-200;
+      width: 4px;
+      border-radius: 0.75rem;
+      margin-right: 0.625rem;
+    }
+
+    code,
+    pre {
+      @apply text-gray-700;
+      font-size: 0.75rem;
+      padding-top: 0.75rem;
+      padding-bottom: 0.75rem;
+    }
+  }
+
+  ul,
+  ol {
+    list-style-type: disc;
+    padding: 0 0 0 2.5rem;
+    margin: 1rem 0;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  hr {
+    margin-block-start: 0.6rem;
+    margin-block-end: 0.6rem;
+  }
+}

package/src/utils/converters/htmlToSquizNode/htmlToSquizNode.props.ts

@@ -0,0 +1,3 @@
+export type HtmlToSquizNodeProps = {
+  content: string;
+};