@squiz/formatted-text-editor 1.21.1-alpha.4 → 1.21.1-alpha.41

package/src/types.ts

@@ -0,0 +1,5 @@
+export type DeepPartial<T> = T extends Record<string, unknown>
+  ? {
+      [P in keyof T]?: DeepPartial<T[P]>;
+    }
+  : T;

package/src/ui/Button/Button.tsx

@@ -8,9 +8,10 @@ type ButtonProps = {
   label: string;
   text?: string;
   icon?: ReactElement;
+  className?: string;
 };
 
-const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon }: ButtonProps) => {
+const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon, className }: ButtonProps) => {
   return (
     <button
       aria-label={label}
@@ -18,12 +19,15 @@ const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon }: Butt
       type="button"
       onClick={handleOnClick}
       disabled={isDisabled}
-      className={clsx('squiz-fte-btn', isActive && 'squiz-fte-btn--is-active', icon && ' squiz-fte-btn--is-icon')}
+      className={clsx(
+        'squiz-fte-btn',
+        isActive && 'squiz-fte-btn--is-active',
+        icon && ' squiz-fte-btn--is-icon',
+        className,
+      )}
     >
-      <>
-        {text && <span>{text}</span>}
-        {icon && icon}
-      </>
+      {text && <span>{text}</span>}
+      {icon && icon}
     </button>
   );
 };

package/src/ui/Button/_button.scss

@@ -1,5 +1,5 @@
 .squiz-fte-btn {
-  @apply font-normal rounded ease-linear transition-all bg-white text-gray-600 duration-150;
+  @apply font-bold rounded ease-linear transition-all bg-white text-gray-600 duration-150;
   display: flex;
   align-items: center;
   text-align: center;

package/src/ui/Fields/Input/Input.spec.tsx

@@ -7,7 +7,7 @@ describe('Input', () => {
   const mockOnChange = jest.fn();
 
   const InputComponent = () => {
-    return <Input name="text-input" defaultValue="Water" label="Text input" onChange={mockOnChange} />;
+    return <Input name="text-input" defaultValue="Water" label="Text input" onChange={mockOnChange} required />;
   };
 
   it('Renders the label', () => {
@@ -40,4 +40,10 @@ describe('Input', () => {
     fireEvent.change(input, { target: { value: 'Wine' } });
     expect(mockOnChange).toHaveBeenCalled();
   });
+
+  it('If the field is declared required, it is marked as such', () => {
+    render(<InputComponent />);
+    const requiredMarker = screen.getByLabelText('Required field');
+    expect(requiredMarker).toBeInTheDocument();
+  });
 });

package/src/ui/Fields/Input/Input.tsx

@@ -1,19 +1,38 @@
 import React, { ForwardedRef, forwardRef, InputHTMLAttributes } from 'react';
+import clsx from 'clsx';
 
 type InputProps = InputHTMLAttributes<HTMLInputElement> & {
   label?: string;
+  error?: string;
 };
 
-const InputInternal = ({ name, label, type = 'text', ...rest }: InputProps, ref: ForwardedRef<HTMLInputElement>) => {
+const InputInternal = (
+  { name, label, type = 'text', error, required, ...rest }: InputProps,
+  ref: ForwardedRef<HTMLInputElement>,
+) => {
   return (
-    <>
+    <div className={clsx(error && 'squiz-fte-invalid-form-field')}>
       {label && (
         <label htmlFor={name} className="squiz-fte-form-label">
           {label}
         </label>
       )}
-      <input ref={ref} id={name} name={name} type={type} className="squiz-fte-form-control" {...rest} />
-    </>
+      {required && (
+        <span className="text-gray-600" aria-label="Required field">
+          *
+        </span>
+      )}
+      <input
+        ref={ref}
+        id={name}
+        name={name}
+        type={type}
+        aria-invalid={!!error}
+        className="squiz-fte-form-control"
+        {...rest}
+      />
+      {error && <div className="squiz-fte-form-error">{error}</div>}
+    </div>
   );
 };
 

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

@@ -2,6 +2,8 @@ import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
 import Modal from './Modal';
+import { Select } from '../Fields/Select/Select';
+import { Input } from '../Fields/Input/Input';
 
 describe('Modal', () => {
   const mockOnCancel = jest.fn();
@@ -110,4 +112,17 @@ describe('Modal', () => {
 
     expect(screen.getByLabelText('My input')).toHaveFocus();
   });
+
+  it('Auto-focuses on the first select field on mount', () => {
+    render(
+      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+        <>
+          <Select label="Dropdown" name="select" options={{}} />
+          <Input label="Input" name="input" />
+        </>
+      </Modal>,
+    );
+
+    expect(screen.getByLabelText('Dropdown')).toHaveFocus();
+  });
 });

package/src/ui/Modal/Modal.tsx

@@ -1,7 +1,8 @@
-import React, { ForwardedRef, forwardRef, ReactElement, useEffect, useMemo } from 'react';
+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;
@@ -15,6 +16,7 @@ const Modal = (
   { children, title, 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');
@@ -37,7 +39,7 @@ const Modal = (
 
   // 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;
+    const firstInput = content.current?.querySelector('input:not([type=hidden]), button') as HTMLElement;
 
     document.body.appendChild(container);
     firstInput?.focus();
@@ -50,7 +52,7 @@ const Modal = (
   return createPortal(
     <>
       <FocusTrap open>
-        <div ref={ref} className={`squiz-fte-modal-wrapper ${className ? className : ''}`} tabIndex={-1}>
+        <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-2">
@@ -64,7 +66,9 @@ const Modal = (
                   <CloseRoundedIcon />
                 </button>
               </div>
-              <div className="squiz-fte-modal-content">{children}</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"

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

@@ -1,6 +1,6 @@
 .toolbar-dropdown {
   &__button {
-    @apply flex items-center font-base text-md font-semibold text-gray-600;
+    @apply flex items-center font-base text-md font-semibold text-gray-600 rounded;
     align-self: center;
 
     height: 2rem;

package/src/ui/_forms.scss

@@ -13,4 +13,18 @@
       box-shadow: none;
     }
   }
+  &-invalid-form-field {
+    .squiz-fte-form-control {
+      @apply border-red-300 bg-no-repeat pr-8;
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0ibm9uZSIvPjxnIGNsYXNzPSJjdXJyZW50TGF5ZXIiPjxwYXRoIGQ9Ik00LjQ3IDIxaDE1LjA2YzEuNTQgMCAyLjUtMS42NyAxLjczLTNMMTMuNzMgNC45OWMtLjc3LTEuMzMtMi42OS0xLjMzLTMuNDYgMEwyLjc0IDE4Yy0uNzcgMS4zMy4xOSAzIDEuNzMgM3pNMTIgMTRjLS41NSAwLTEtLjQ1LTEtMXYtMmMwLS41NS40NS0xIDEtMXMxIC40NSAxIDF2MmMwIC41NS0uNDUgMS0xIDF6bTEgNGgtMnYtMmgydjJ6IiBjbGFzcz0ic2VsZWN0ZWQiIGZpbGw9IiNkNzIzMjEiLz48L2c+PC9zdmc+');
+      background-position: top 0.25rem 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/utils/converters/mocks/squizNodeJson.mock.ts

@@ -0,0 +1,271 @@
+import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+import { RemirrorJSON } from '@remirror/core';
+
+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',
+  },
+];
+
+type NodeExample = {
+  description: string;
+  remirrorNode: RemirrorJSON;
+  squizNode: FormattedTextModels.v1.FormattedText;
+};
+
+export const sharedNodeExamples: NodeExample[] = [
+  {
+    description: 'Asset link',
+    remirrorNode: {
+      type: 'text',
+      text: 'Hello',
+      marks: [
+        {
+          type: 'assetLink',
+          attrs: {
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+          },
+        },
+      ],
+    },
+    squizNode: [
+      {
+        type: 'link-to-matrix-asset',
+        target: '_blank',
+        matrixAssetId: '123',
+        matrixDomain: 'https://my-matrix.squiz.net',
+        matrixIdentifier: 'matrix-api-identifier',
+        children: [{ type: 'text', value: 'Hello' }],
+      },
+    ],
+  },
+  {
+    description: 'Asset link with formatting applied inside of the link',
+    remirrorNode: {
+      type: 'text',
+      text: 'Hello',
+      marks: [
+        { type: 'bold' },
+        {
+          type: 'assetLink',
+          attrs: {
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+          },
+        },
+      ],
+    },
+    squizNode: [
+      {
+        type: 'link-to-matrix-asset',
+        target: '_blank',
+        matrixAssetId: '123',
+        matrixDomain: 'https://my-matrix.squiz.net',
+        matrixIdentifier: 'matrix-api-identifier',
+        children: [
+          {
+            type: 'tag',
+            tag: 'span',
+            font: { bold: true },
+            children: [{ type: 'text', value: 'Hello' }],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    description: 'Asset image',
+    remirrorNode: {
+      type: 'assetImage',
+      attrs: {
+        matrixAssetId: '123',
+        matrixDomain: 'https://my-matrix.squiz.net',
+        matrixIdentifier: 'matrix-api-identifier',
+      },
+    },
+    squizNode: [
+      {
+        type: 'matrix-image',
+        matrixAssetId: '123',
+        matrixDomain: 'https://my-matrix.squiz.net',
+        matrixIdentifier: 'matrix-api-identifier',
+      },
+    ],
+  },
+];
+
+export const squizOnlyNodeExamples: NodeExample[] = [
+  {
+    description: 'Asset link with formatting applied inside, outside and with multiple levels of nesting',
+    squizNode: [
+      {
+        type: 'tag',
+        tag: 'span',
+        font: { bold: true },
+        children: [
+          {
+            type: 'link-to-matrix-asset',
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+            children: [
+              {
+                type: 'tag',
+                tag: 'span',
+                font: { italics: true },
+                children: [
+                  {
+                    type: 'tag',
+                    tag: 'span',
+                    font: { underline: true },
+                    children: [{ type: 'text', value: 'Hello' }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    remirrorNode: {
+      // reverse operation covered by "Asset link with formatting applied inside of the link".
+      type: 'text',
+      text: 'Hello',
+      marks: [
+        { type: 'underline' },
+        { type: 'italic' },
+        {
+          type: 'assetLink',
+          attrs: {
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+          },
+        },
+        { type: 'bold' },
+      ],
+    },
+  },
+  {
+    description: 'Asset link with multiple levels of un-necessary nesting',
+    squizNode: [
+      {
+        type: 'tag',
+        tag: 'span',
+        children: [
+          {
+            type: 'link-to-matrix-asset',
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+            children: [
+              {
+                type: 'tag',
+                tag: 'span',
+                children: [
+                  {
+                    type: 'tag',
+                    tag: 'span',
+                    children: [{ type: 'text', value: 'Hello' }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    remirrorNode: {
+      // reverse operation covered by "Asset link".
+      type: 'text',
+      text: 'Hello',
+      marks: [
+        {
+          type: 'assetLink',
+          attrs: {
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+          },
+        },
+      ],
+    },
+  },
+];