@squiz/formatted-text-editor 1.33.1-alpha.2 → 1.33.1-alpha.4

package/src/EditorToolbar/Tools/Link/LinkButton.spec.tsx

@@ -1,13 +1,14 @@
 import '@testing-library/jest-dom';
 import { act, screen, fireEvent, waitForElementToBeRemoved } from '@testing-library/react';
 import React from 'react';
-import { renderWithEditor, select } from '../../../../tests';
+import { renderWithEditor, mockResourceBrowserContext } from '../../../../tests';
 import LinkButton from './LinkButton';
 
 describe('LinkButton', () => {
   const openModal = async () => {
     fireEvent.click(screen.getByRole('button', { name: 'Link (cmd+K)' }));
     await screen.findByRole('button', { name: 'Apply' });
+    fireEvent.click(screen.getByRole('button', { name: 'From URL' }));
   };
 
   it('Adds a new link', async () => {
@@ -21,7 +22,7 @@ describe('LinkButton', () => {
     fireEvent.change(screen.getByLabelText('URL'), { target: { value: 'https://www.squiz.net/link-button' } });
     fireEvent.change(screen.getByLabelText('Text'), { target: { value: 'Link text' } });
     fireEvent.change(screen.getByLabelText('Title'), { target: { value: 'Link title' } });
-    select(screen.getByLabelText('Target'), 'New window');
+    fireEvent.click(document.querySelector('div.squiz-fte-checkbox button') as HTMLButtonElement);
     fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
 
     await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
@@ -235,19 +236,29 @@ describe('LinkButton', () => {
   it('Add a new asset link', async () => {
     const matrixIdentifier = 'matrix-api-identifier';
     const matrixDomain = 'https://my-matrix.squiz.net';
-    const { getJsonContent } = await renderWithEditor(<LinkButton />, {
-      context: {
-        matrix: {
-          matrixIdentifier,
-          matrixDomain,
-          resolveMatrixAsset: () => Promise.resolve({ id: '100', type: 'physical_file' }),
+    const { MockResourceBrowserContext, selectResource } = mockResourceBrowserContext({
+      sources: [{ id: matrixIdentifier }],
+      resources: [{ id: 'my-resource-id', name: 'My resource' }],
+    });
+
+    const { getJsonContent } = await renderWithEditor(
+      <MockResourceBrowserContext>
+        <LinkButton />
+      </MockResourceBrowserContext>,
+      {
+        context: {
+          editor: {
+            matrix: {
+              matrixDomain,
+            },
+          },
         },
       },
-    });
+    );
 
     await openModal();
-    select(screen.getByLabelText('Type'), 'Link to asset');
-    fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '123' } });
+    fireEvent.click(screen.getByRole('button', { name: 'From source' }));
+    await selectResource(screen.getByRole('button', { name: 'Choose asset' }), 'My resource');
     fireEvent.change(screen.getByLabelText('Text'), { target: { value: 'Link text' } });
     fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
 
@@ -263,7 +274,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'assetLink',
-              attrs: { matrixAssetId: '123', target: '_self', matrixDomain, matrixIdentifier },
+              attrs: { matrixAssetId: 'my-resource-id', target: '_self', matrixDomain, matrixIdentifier },
             },
           ],
         },
@@ -274,25 +285,35 @@ describe('LinkButton', () => {
   it('Updates an existing link to be an asset link', async () => {
     const matrixIdentifier = 'matrix-api-identifier';
     const matrixDomain = 'https://my-matrix.squiz.net';
-    const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
-      content:
-        '<a href="https://www.example.org/my-link">Sample link</a> with ' +
-        '<a href="https://www.example.org/another-link">another link</a>',
-      context: {
-        matrix: {
-          matrixIdentifier,
-          matrixDomain,
-          resolveMatrixAsset: () => Promise.resolve({ id: '100', type: 'physical_file' }),
+    const { MockResourceBrowserContext, selectResource } = mockResourceBrowserContext({
+      sources: [{ id: matrixIdentifier }],
+      resources: [{ id: 'my-resource-id', name: 'My resource' }],
+    });
+
+    const { editor, getJsonContent } = await renderWithEditor(
+      <MockResourceBrowserContext>
+        <LinkButton />
+      </MockResourceBrowserContext>,
+      {
+        content:
+          '<a href="https://www.example.org/my-link">Sample link</a> with ' +
+          '<a href="https://www.example.org/another-link">another link</a>',
+        context: {
+          editor: {
+            matrix: {
+              matrixDomain,
+            },
+          },
         },
       },
-    });
+    );
 
     await act(() => editor.selectText(5));
 
     await openModal();
-    select(screen.getByLabelText('Type'), 'Link to asset');
-    fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '123' } });
-    select(screen.getByLabelText('Target'), 'New window');
+    fireEvent.click(screen.getByRole('button', { name: 'From source' }));
+    await selectResource(screen.getByRole('button', { name: 'Choose asset' }), 'My resource');
+    fireEvent.click(document.querySelector('div.squiz-fte-checkbox button') as HTMLButtonElement);
     fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
 
     await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
@@ -307,7 +328,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'assetLink',
-              attrs: { matrixAssetId: '123', target: '_blank', matrixDomain, matrixIdentifier },
+              attrs: { matrixAssetId: 'my-resource-id', target: '_blank', matrixDomain, matrixIdentifier },
             },
           ],
         },
@@ -326,18 +347,14 @@ describe('LinkButton', () => {
     });
   });
 
-  it('Shows an error if an invalid asset ID is provided', async () => {
-    const resolveMatrixAsset = jest.fn(() => Promise.resolve(null));
-
-    await renderWithEditor(<LinkButton />, { context: { matrix: { resolveMatrixAsset } } });
+  it('Shows an error if no asset is selected', async () => {
+    await renderWithEditor(<LinkButton />);
 
     await openModal();
-    select(screen.getByLabelText('Type'), 'Link to asset');
-    fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: 'invalid-asset-id' } });
+    fireEvent.click(screen.getByRole('button', { name: 'From source' }));
     await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
 
-    expect(screen.getByText('Invalid asset ID')).toBeInTheDocument();
-    expect(resolveMatrixAsset).toHaveBeenCalledWith('invalid-asset-id');
+    expect(screen.getByText('An asset must be selected')).toBeInTheDocument();
   });
 
   it('Shows an error if a required field is not provided', async () => {
@@ -351,7 +368,6 @@ describe('LinkButton', () => {
 
     expect(screen.getByText('URL is required')).toBeInTheDocument();
     expect(screen.getByText('Text is required')).toBeInTheDocument();
-    expect(screen.getByText('Title is required')).toBeInTheDocument();
   });
 
   it('Shows an error if the field value is just an empty space', async () => {
@@ -363,6 +379,6 @@ describe('LinkButton', () => {
     fireEvent.change(screen.getByLabelText('Title'), { target: { value: ' ' } });
     await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
 
-    expect(screen.getAllByText('Empty space is not allowed')).toHaveLength(3);
+    expect(screen.getAllByText('Empty space is not allowed')).toHaveLength(2);
   });
 });

package/src/EditorToolbar/Tools/Link/LinkModal.tsx

@@ -1,6 +1,7 @@
 import { LinkForm, LinkFormData } from './Form/LinkForm';
 import React from 'react';
 import { useRemirrorContext } from '@remirror/react';
+import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
 import FormModal from '../../../ui/Modal/FormModal';
 import { SubmitHandler } from 'react-hook-form';
 import { useExpandedSelection } from '../../../hooks';
@@ -19,7 +20,7 @@ const LinkModal = ({ onCancel, onSubmit }: LinkModalProps) => {
   const { selection, marks } = useExpandedSelection([MarkName.Link, MarkName.AssetLink]);
   const selectedText = helpers.getTextBetween(selection.from, selection.to, state.doc);
   const data = {
-    linkType: marks[0]?.type?.name === MarkName.AssetLink ? MarkName.AssetLink : MarkName.Link,
+    linkType: marks[0]?.type?.name === MarkName.Link ? MarkName.Link : MarkName.AssetLink,
     text: selectedText,
     link: { ...marks.find((mark) => mark.type.name === 'link')?.attrs },
     assetLink: { ...marks.find((mark) => mark.type.name === MarkName.AssetLink)?.attrs },
@@ -27,7 +28,7 @@ const LinkModal = ({ onCancel, onSubmit }: LinkModalProps) => {
   };
 
   return (
-    <FormModal title="Link" onCancel={onCancel}>
+    <FormModal title="Link" icon={<InsertLinkRoundedIcon />} onCancel={onCancel}>
       <LinkForm data={data} onSubmit={onSubmit} />
     </FormModal>
   );

package/src/EditorToolbar/Tools/Link/RemoveLinkButton.spec.tsx

@@ -7,7 +7,7 @@ import RemoveLinkButton from './RemoveLinkButton';
 describe('RemoveLinkButton', () => {
   it('Removes a link', async () => {
     const { editor, getJsonContent } = await renderWithEditor(<RemoveLinkButton />, {
-      context: { matrix: { matrixDomain: 'my-matrix.squiz.net' } },
+      context: { editor: { matrix: { matrixDomain: 'my-matrix.squiz.net' } } },
       content: {
         type: 'doc',
         content: [
@@ -17,7 +17,12 @@ describe('RemoveLinkButton', () => {
               {
                 type: 'text',
                 text: 'Sample link',
-                marks: [{ type: 'assetLink', attrs: { matrixAssetId: '123', target: '_blank' } }],
+                marks: [
+                  {
+                    type: 'assetLink',
+                    attrs: { matrixAssetId: '123', matrixIdentifier: 'matrix-identifier', target: '_blank' },
+                  },
+                ],
               },
               { type: 'text', text: ' with ' },
               {
@@ -47,7 +52,7 @@ describe('RemoveLinkButton', () => {
 
   it('Removes the link when clicking the keyboard shortcut', async () => {
     const { elements, editor, getJsonContent } = await renderWithEditor(<RemoveLinkButton />, {
-      context: { matrix: { matrixDomain: 'my-matrix.squiz.net' } },
+      context: { editor: { matrix: { matrixDomain: 'my-matrix.squiz.net' } } },
       content: {
         type: 'doc',
         content: [
@@ -57,7 +62,12 @@ describe('RemoveLinkButton', () => {
               {
                 type: 'text',
                 text: 'Sample link',
-                marks: [{ type: 'assetLink', attrs: { matrixAssetId: '123', target: '_blank' } }],
+                marks: [
+                  {
+                    type: 'assetLink',
+                    attrs: { matrixAssetId: '123', matrixIdentifier: 'matrix-identifier', target: '_blank' },
+                  },
+                ],
               },
               { type: 'text', text: ' with ' },
               {
@@ -97,4 +107,37 @@ describe('RemoveLinkButton', () => {
     // expect remove button to be enabled
     expect(screen.getByRole('button', { name: 'Remove link (shift+cmd+K)' })).not.toBeDisabled();
   });
+
+  it('Enables the Remove link button when asset link text is selected', async () => {
+    const { editor } = await renderWithEditor(<RemoveLinkButton />, {
+      context: { editor: { matrix: { matrixDomain: 'my-matrix.squiz.net' } } },
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Sample link',
+                marks: [
+                  {
+                    type: 'assetLink',
+                    attrs: { matrixAssetId: '123', matrixIdentifier: 'matrix-identifier', target: '_blank' },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    });
+
+    // expect remove button to be disabled
+    expect(screen.getByRole('button', { name: 'Remove link (shift+cmd+K)' })).toBeDisabled();
+    // jump to the middle of the link.
+    await act(() => editor.selectText(3));
+    // expect remove button to be enabled
+    expect(screen.getByRole('button', { name: 'Remove link (shift+cmd+K)' })).not.toBeDisabled();
+  });
 });

package/src/EditorToolbar/Tools/Link/RemoveLinkButton.tsx

@@ -2,13 +2,14 @@ import React, { useCallback } from 'react';
 import { useChainedCommands, useActive, useKeymap } from '@remirror/react';
 import Button from '../../../ui/Button/Button';
 import LinkOffIcon from '@mui/icons-material/LinkOff';
+import { AssetLinkExtension } from '../../../Extensions/LinkExtension/AssetLinkExtension';
 import { LinkExtension } from '../../../Extensions/LinkExtension/LinkExtension';
 import { LinkButtonProps } from './LinkButton';
 
 const RemoveLinkButton = ({ inPopover = false }: LinkButtonProps) => {
   const chain = useChainedCommands();
-  const active = useActive<LinkExtension>();
-  const disabled = !active.link();
+  const active = useActive<LinkExtension | AssetLinkExtension>();
+  const disabled = !active.link() && !active.assetLink();
 
   const handleClick = () => {
     chain.removeLink().removeAssetLink().focus().run();

package/src/Extensions/Extensions.ts

@@ -42,12 +42,10 @@ export const createExtensions = (context: EditorContextOptions) => {
       new ImageExtension(),
       new ImageExtension({ preferPastedTextContent: false }),
       new AssetImageExtension({
-        matrixIdentifier: context.matrix.matrixIdentifier,
         matrixDomain: context.matrix.matrixDomain,
       }),
       new LinkExtension(),
       new AssetLinkExtension({
-        matrixIdentifier: context.matrix.matrixIdentifier,
         matrixDomain: context.matrix.matrixDomain,
       }),
     ];

package/src/Extensions/ImageExtension/AssetImageExtension.ts

@@ -16,7 +16,6 @@ import { resolveMatrixAssetUrl } from '../../utils/resolveMatrixAssetUrl';
 import { NodeName } from '../Extensions';
 
 export type AssetImageOptions = {
-  matrixIdentifier?: string;
   matrixDomain?: string;
 };
 
@@ -28,7 +27,6 @@ export type AssetImageAttributes = {
 
 @extension<AssetImageOptions>({
   defaultOptions: {
-    matrixIdentifier: '',
     matrixDomain: '',
   },
   defaultPriority: ExtensionPriority.High,
@@ -51,7 +49,7 @@ export class AssetImageExtension extends NodeExtension<AssetImageOptions> {
       attrs: {
         ...extra.defaults(),
         matrixAssetId: {},
-        matrixIdentifier: { default: this.options.matrixIdentifier },
+        matrixIdentifier: {},
         matrixDomain: { default: this.options.matrixDomain },
       },
       parseDOM: [

package/src/Extensions/LinkExtension/AssetLinkExtension.ts

@@ -20,7 +20,6 @@ export type AssetLinkAttributes = {
 };
 
 export type AssetLinkOptions = {
-  matrixIdentifier?: string;
   matrixDomain?: string;
   defaultTarget?: LinkTarget;
   supportedTargets?: LinkTarget[];
@@ -34,7 +33,6 @@ export type UpdateAssetLinkProps = {
 
 @extension<AssetLinkOptions>({
   defaultOptions: {
-    matrixIdentifier: '',
     matrixDomain: '',
     defaultTarget: LinkTarget.Self,
     supportedTargets: [LinkTarget.Self, LinkTarget.Blank],
@@ -49,12 +47,12 @@ export class AssetLinkExtension extends MarkExtension<AssetLinkOptions> {
   createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec {
     return {
       inclusive: false,
-      excludes: MarkName.Link,
+      excludes: [this.name, MarkName.Link].join(' '),
       ...override,
       attrs: {
         ...extra.defaults(),
         matrixAssetId: {},
-        matrixIdentifier: { default: this.options.matrixIdentifier },
+        matrixIdentifier: {},
         matrixDomain: { default: this.options.matrixDomain },
         target: { default: this.options.defaultTarget },
       },

package/src/Extensions/LinkExtension/LinkExtension.ts

@@ -43,7 +43,7 @@ export class LinkExtension extends MarkExtension<LinkOptions> {
   createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec {
     return {
       inclusive: false,
-      excludes: MarkName.AssetLink,
+      excludes: [this.name, MarkName.AssetLink].join(' '),
       ...override,
       attrs: {
         ...extra.defaults(),

package/src/index.scss

@@ -15,5 +15,6 @@
 @import './ui/Button/button';
 @import './ui/ToolbarDropdown/toolbar-dropdown';
 @import './ui/ToolbarDropdownButton/toolbar-dropdown-button';
+@import './ui/Fields/Checkbox/checkbox';
 
 @import './ui/Modal/modal';

package/src/types.ts

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

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

@@ -0,0 +1,50 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { Checkbox } from './Checkbox';
+import { LinkTarget } from '../../../Extensions/LinkExtension/common';
+
+describe('Input', () => {
+  const mockOnChange = jest.fn();
+
+  const CheckboxComponent = ({ defaultChecked = false }: { defaultChecked?: boolean }) => {
+    return (
+      <Checkbox
+        label="This is a test checkbox"
+        onChange={mockOnChange}
+        defaultChecked={defaultChecked}
+        unchecked={'self' as LinkTarget}
+        checked={'_blank' as LinkTarget}
+      />
+    );
+  };
+
+  it('Renders the checkbox label', () => {
+    render(<CheckboxComponent />);
+    // Check that the supplied label renders
+    const checkboxLabel = screen.getByText('This is a test checkbox');
+    expect(checkboxLabel).toBeInTheDocument();
+  });
+
+  it('Renders the default checkmark', () => {
+    render(<CheckboxComponent defaultChecked={true} />);
+    // Check that default value supplied renders
+    expect(screen.getByTestId('CheckRoundedIcon')).toBeInTheDocument();
+  });
+
+  it('Does not render the default checkmark', () => {
+    render(<CheckboxComponent defaultChecked={false} />);
+    expect(screen.queryByTestId('CheckRoundedIcon')).toBeFalsy();
+  });
+
+  it('Toggles checkbox when it is clicked', () => {
+    render(<CheckboxComponent />);
+    const checkbox = screen.getAllByRole('button')[0];
+
+    expect(checkbox).toBeTruthy();
+    fireEvent.click(checkbox);
+
+    expect(mockOnChange).toHaveBeenCalled();
+    expect(screen.getByTestId('CheckRoundedIcon')).toBeInTheDocument();
+  });
+});

package/src/ui/Fields/Checkbox/Checkbox.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+
+export type CheckboxProps<TChecked, TUnchecked> = {
+  label: string;
+  onChange: (value: TChecked | TUnchecked) => void;
+  defaultChecked?: boolean;
+  unchecked: TUnchecked;
+  checked: TChecked;
+};
+
+export const Checkbox = <TChecked, TUnchecked>({
+  label,
+  onChange,
+  defaultChecked = false,
+  unchecked,
+  checked,
+}: CheckboxProps<TChecked, TUnchecked>) => {
+  const [toggled, setToggled] = useState<boolean>(defaultChecked);
+
+  useEffect(() => {
+    if (toggled) {
+      onChange(checked);
+    } else {
+      onChange(unchecked);
+    }
+  }, [toggled]);
+
+  const toggleCheckbox = () => setToggled(!toggled);
+
+  return (
+    <div className="squiz-fte-checkbox">
+      <button
+        type="button"
+        role="checkbox"
+        aria-label={label}
+        aria-checked={toggled}
+        className="checkbox"
+        onClick={toggleCheckbox}
+      >
+        {toggled && <CheckRoundedIcon />}
+      </button>
+      {/* Checkbox label as a button, acts as a secondary way to toggle */}
+      <button type="button" className="label" onClick={toggleCheckbox} tabIndex={-1}>
+        {label}
+      </button>
+    </div>
+  );
+};

package/src/ui/Fields/Checkbox/_checkbox.scss

@@ -0,0 +1,26 @@
+.squiz-fte-checkbox {
+  @apply text-gray-800;
+  font-size: 14px;
+
+  display: flex;
+  align-items: center;
+  margin-top: 0.75rem;
+  gap: 0.75rem;
+
+  .checkbox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 1.25rem;
+    height: 1.25rem;
+    background-color: #fff;
+
+    border: 2px solid #e0e0e0;
+    border-radius: 4px;
+
+    svg {
+      width: 100%;
+    }
+  }
+}

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

@@ -1,27 +1,14 @@
 import React, { ForwardedRef, forwardRef, InputHTMLAttributes } from 'react';
-import clsx from 'clsx';
+import { InputContainer, InputContainerProps } from '../InputContainer/InputContainer';
 
-type InputProps = InputHTMLAttributes<HTMLInputElement> & {
-  label?: string;
-  error?: string;
-};
+type InputProps = InputHTMLAttributes<HTMLInputElement> & Omit<InputContainerProps, 'children'>;
 
 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>
-      )}
-      {required && (
-        <span className="text-gray-600" aria-label="Required field">
-          *
-        </span>
-      )}
+    <InputContainer name={name} label={label} error={error} required={required}>
       <input
         ref={ref}
         id={name}
@@ -31,8 +18,7 @@ const InputInternal = (
         className="squiz-fte-form-control"
         {...rest}
       />
-      {error && <div className="squiz-fte-form-error">{error}</div>}
-    </div>
+    </InputContainer>
   );
 };
 

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

@@ -0,0 +1,18 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { InputContainer } from './InputContainer';
+
+describe('InputContainer', () => {
+  it('Renders with expected content', () => {
+    render(
+      <InputContainer name="my-input" label="My input" error="Input is invalid" required={true}>
+        input element
+      </InputContainer>,
+    );
+
+    expect(screen.getByText('My input')).toHaveClass('squiz-fte-form-label');
+    expect(screen.getByText('input element')).toBeInTheDocument();
+    expect(screen.getByText('Input is invalid')).toHaveClass('squiz-fte-form-error');
+  });
+});

package/src/ui/Fields/InputContainer/InputContainer.tsx

@@ -0,0 +1,29 @@
+import React, { ReactNode } from 'react';
+import clsx from 'clsx';
+
+export type InputContainerProps = {
+  name?: string;
+  label?: string;
+  error?: string;
+  required?: boolean;
+  children: ReactNode;
+};
+
+export const InputContainer = ({ name, label, error, required, children }: InputContainerProps) => {
+  return (
+    <div className={clsx(error && 'squiz-fte-invalid-form-field')}>
+      {label && (
+        <label htmlFor={name} className="squiz-fte-form-label">
+          {label}
+        </label>
+      )}
+      {label && required && (
+        <span className="text-gray-600" aria-label="Required field">
+          *
+        </span>
+      )}
+      {children}
+      {error && <div className="squiz-fte-form-error">{error}</div>}
+    </div>
+  );
+};