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

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],
@@ -54,7 +52,7 @@ export class AssetLinkExtension extends MarkExtension<AssetLinkOptions> {
       attrs: {
         ...extra.defaults(),
         matrixAssetId: {},
-        matrixIdentifier: { default: this.options.matrixIdentifier },
+        matrixIdentifier: {},
         matrixDomain: { default: this.options.matrixDomain },
         target: { default: this.options.defaultTarget },
       },

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

@@ -41,7 +41,7 @@ export const Checkbox = <TChecked, TUnchecked>({
         {toggled && <CheckRoundedIcon />}
       </button>
       {/* Checkbox label as a button, acts as a secondary way to toggle */}
-      <button type="button" className="label" onClick={toggleCheckbox}>
+      <button type="button" className="label" onClick={toggleCheckbox} tabIndex={-1}>
         {label}
       </button>
     </div>

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>
+  );
+};

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

@@ -0,0 +1,103 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { MatrixAsset } from './MatrixAsset';
+import { mockResourceBrowserContext } from '../../../../tests';
+
+describe('MatrixAsset', () => {
+  it('Renders empty state when no value is provided', () => {
+    render(<MatrixAsset modalTitle="Insert asset" onChange={jest.fn()} />);
+
+    expect(screen.getByRole('button', { name: 'Choose asset' })).toBeInTheDocument();
+  });
+
+  it('Renders a selected state when a value is provided', () => {
+    const { MockResourceBrowserContext } = mockResourceBrowserContext({
+      sources: [{ id: 'my-source-id' }],
+      resources: [{ id: 'my-resource-id', name: 'My resource' }],
+    });
+
+    render(
+      <MockResourceBrowserContext>
+        <MatrixAsset
+          modalTitle="Insert asset"
+          value={{
+            matrixIdentifier: 'my-source-id',
+            matrixAssetId: 'my-resource-id',
+            addional: 'addditional data',
+          }}
+          onChange={jest.fn()}
+        />
+      </MockResourceBrowserContext>,
+    );
+
+    expect(screen.getByText('My resource')).toBeInTheDocument();
+  });
+
+  it('Calls onChange with expected value when resources is selected', async () => {
+    const handleChange = jest.fn();
+    const { MockResourceBrowserContext, selectResource } = mockResourceBrowserContext({
+      sources: [{ id: 'my-source-id' }],
+      resources: [{ id: 'my-resource-id', name: 'My resource' }],
+    });
+
+    render(
+      <MockResourceBrowserContext>
+        <MatrixAsset
+          modalTitle="Insert asset"
+          value={{ matrixIdentifier: undefined, matrixAssetId: undefined, additional: 'additional data' }}
+          onChange={handleChange}
+        />
+      </MockResourceBrowserContext>,
+    );
+
+    await selectResource(screen.getByRole('button', { name: 'Choose asset' }), 'My resource');
+
+    expect(handleChange).toHaveBeenCalledWith({
+      target: {
+        value: {
+          additional: 'additional data',
+          matrixAssetId: 'my-resource-id',
+          matrixIdentifier: 'my-source-id',
+        },
+      },
+    });
+  });
+
+  it('Calls onChange with expected value when resources is cleared', async () => {
+    const handleChange = jest.fn();
+    const { MockResourceBrowserContext } = mockResourceBrowserContext({
+      sources: [{ id: 'my-source-id' }],
+      resources: [
+        { id: 'my-resource-id', name: 'My resource' },
+        { id: 'updated-resource-id', name: 'Updated resource' },
+      ],
+    });
+
+    render(
+      <MockResourceBrowserContext>
+        <MatrixAsset
+          modalTitle="Insert asset"
+          value={{
+            matrixIdentifier: 'my-source-id',
+            matrixAssetId: 'my-resource-id',
+            additional: 'additional data',
+          }}
+          onChange={handleChange}
+        />
+      </MockResourceBrowserContext>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Remove selection' }));
+
+    expect(handleChange).toHaveBeenCalledWith({
+      target: {
+        value: {
+          additional: 'additional data',
+          matrixAssetId: undefined,
+          matrixIdentifier: undefined,
+        },
+      },
+    });
+  });
+});

package/src/ui/Fields/MatrixAsset/MatrixAsset.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { HydratedResourceReference, ResourceBrowserInput } from '@squiz/resource-browser';
+import { InputContainer, InputContainerProps } from '../InputContainer/InputContainer';
+
+type MatrixAssetValue = {
+  matrixIdentifier?: string;
+  matrixAssetId?: string;
+};
+
+export type MatrixAssetProps<T extends MatrixAssetValue> = Omit<InputContainerProps, 'children'> & {
+  modalTitle: string;
+  allowedTypes?: string[];
+  value?: T | null;
+  // LinkForm contains a "target" property.
+  // react-hook-form treats the presence of this property as an "Event" object being passed through, see:
+  // https://github.com/react-hook-form/react-hook-form/blob/master/src/logic/getEventValue.ts
+  // Nest the value under a "target" object to work around the behaviour.
+  onChange: (value: { target: { value: T } }) => void;
+};
+
+export const MatrixAsset = <T extends MatrixAssetValue>({
+  modalTitle,
+  allowedTypes,
+  value,
+  onChange,
+  ...props
+}: MatrixAssetProps<T>) => {
+  return (
+    <InputContainer {...props}>
+      <ResourceBrowserInput
+        modalTitle={modalTitle}
+        allowedTypes={allowedTypes}
+        value={
+          value && value.matrixIdentifier && value.matrixAssetId
+            ? {
+                source: value.matrixIdentifier,
+                resource: value.matrixAssetId,
+              }
+            : null
+        }
+        onChange={(reference: HydratedResourceReference | null) => {
+          onChange({
+            target: {
+              value: {
+                ...value,
+                matrixIdentifier: reference?.source?.id,
+                matrixAssetId: reference?.resource?.id,
+              } as T,
+            },
+          });
+        }}
+      />
+    </InputContainer>
+  );
+};

package/src/ui/_forms.scss

@@ -6,6 +6,7 @@
     @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,
@@ -14,10 +15,11 @@
     }
   }
   &-invalid-form-field {
-    .squiz-fte-form-control {
+    .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: top 0.25rem right 0.25rem;
+      background-position: center right 0.25rem;
       background-size: 1.5rem;
     }
   }

package/src/utils/validation.spec.ts

@@ -0,0 +1,22 @@
+import { hasProperties, noEmptySpacesValidation } from './validation';
+
+describe('validation', () => {
+  it.each([
+    ['String with only spaces', '  ', 'Empty space is not allowed'],
+    ['Empty string', '', undefined],
+    ['Non-empty string', 'test value', undefined],
+    ['String with trailing/leading spaces', ' test value ', undefined],
+  ])('noEmptySpacesValidation - %s', (description: string, value: string, expected: string | undefined) => {
+    expect(noEmptySpacesValidation(value)).toBe(expected);
+  });
+
+  it.each([
+    ['Value is null', null, ['prop1'], 'Field is invalid'],
+    ['Value is undefined', undefined, ['prop1'], 'Field is invalid'],
+    ['Value has none of the required props', { prop2: 'Not what we want' }, ['prop1'], 'Field is invalid'],
+    ['Value has all of the required props', { prop1: 'Valid' }, ['prop1'], undefined],
+    ['Value has all of the required props + extra', { prop1: 'Valid', prop2: 'Another prop' }, ['prop1'], undefined],
+  ])('hasProperties - %s', (description: string, value: any, properties: string[], expected: string | undefined) => {
+    expect(hasProperties('Field is invalid', properties)(value)).toBe(expected);
+  });
+});

package/src/utils/validation.ts

@@ -1,8 +1,16 @@
-export const noEmptySpacesValidation = async (value: string | undefined) => {
+export const noEmptySpacesValidation = (value: string | undefined) => {
   if (value && !(value.trim().length > 0)) {
     return 'Empty space is not allowed';
   }
 };
 
+export const hasProperties =
+  <T>(message: string, properties: (keyof T)[]) =>
+  (value: T) => {
+    if (!value || properties.filter((property) => value[property]).length !== properties.length) {
+      return message;
+    }
+  };
+
 export const regexDataURI =
   /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*)$/i;

package/tests/index.ts

@@ -1,2 +1,4 @@
 export * from './renderWithEditor';
+export * from './renderWithContext';
+export * from './mockResourceBrowserContext';
 export * from './select';

package/tests/mockResourceBrowserContext.tsx

@@ -0,0 +1,63 @@
+import React, { ReactNode } from 'react';
+import { ResourceBrowserContext, Source, Resource, ResourceReference } from '@squiz/resource-browser';
+import { fireEvent, screen } from '@testing-library/react';
+import { DeepPartial } from '../src/types';
+
+export type MockResourceBrowserContextOptions = DeepPartial<{
+  sources: Source[];
+  resources: Resource[];
+}>;
+
+const mockResource = (resource: DeepPartial<Resource> = {}): Resource =>
+  ({
+    id: 'default-resource',
+    name: 'Default resource',
+    url: 'https://default-resource/',
+    urls: [],
+    childCount: 0,
+    type: {
+      code: 'unspecified',
+      name: 'Unspecified',
+    },
+    status: {
+      code: 'live',
+      name: 'Live',
+    },
+    ...resource,
+  } as Resource);
+
+const mockSource = (source: DeepPartial<Source>): Source => ({
+  id: 'default-source',
+  name: 'Default source',
+  ...source,
+  nodes: (source.nodes || [mockResource()]).map((resource) => mockResource(resource)),
+});
+
+export const mockResourceBrowserContext = ({ sources, resources }: MockResourceBrowserContextOptions) => {
+  sources = (sources || []).map((source) => mockSource(source));
+  resources = (resources || []).map((resource) => mockResource(resource));
+
+  const onRequestSources = jest.fn().mockResolvedValue(sources);
+  const onRequestChildren = jest.fn().mockResolvedValue(resources);
+  const onRequestResource = jest
+    .fn()
+    .mockImplementation(
+      (reference: ResourceReference) => resources?.find((resource) => resource.id === reference.resource) || null,
+    );
+
+  return {
+    MockResourceBrowserContext: ({ children }: { children: ReactNode }) => (
+      <ResourceBrowserContext.Provider value={{ onRequestSources, onRequestChildren, onRequestResource }}>
+        {children}
+      </ResourceBrowserContext.Provider>
+    ),
+    selectResource: async (opener: HTMLElement, resourceName: string) => {
+      const sourceLabel = `Drill down to ${sources?.[0]?.nodes?.[0]?.name} children`;
+
+      fireEvent.click(opener);
+      fireEvent.click(await screen.findByRole('button', { name: sourceLabel }));
+      fireEvent.click(await screen.findByTitle(resourceName));
+      fireEvent.click(await screen.findByRole('button', { name: 'Select' }));
+    },
+  };
+};

package/tests/renderWithContext.tsx

@@ -0,0 +1,18 @@
+import React, { ReactElement } from 'react';
+import { render, RenderOptions, RenderResult } from '@testing-library/react';
+import merge from 'deepmerge';
+import { EditorContext } from '../src';
+import { defaultEditorContext, EditorContextOptions } from '../src/Editor/EditorContext';
+import { DeepPartial } from '../src/types';
+
+export type ContextRenderOptions = RenderOptions & {
+  context?: DeepPartial<{
+    editor: EditorContextOptions;
+  }>;
+};
+
+export const renderWithContext = (ui: ReactElement | null, options?: ContextRenderOptions): RenderResult => {
+  const editorContext = merge(defaultEditorContext, options?.context?.editor || {}) as EditorContextOptions;
+
+  return render(<EditorContext.Provider value={editorContext}>{ui}</EditorContext.Provider>);
+};

package/tests/renderWithEditor.tsx

@@ -1,22 +1,18 @@
 import React, { ReactElement, useContext, 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 { RemirrorTestChain } from 'jest-remirror';
-import merge from 'deepmerge';
 import { createExtensions } from '../src/Extensions/Extensions';
-import { EditorContext } from '../src/Editor/EditorContext';
-import { FloatingToolbar } from '../src/EditorToolbar/FloatingToolbar';
-import { defaultEditorContext, EditorContextOptions } from '../src/Editor/EditorContext';
-import { DeepPartial } from '../src/types';
+import { EditorContext } from '../src';
+import { FloatingToolbar } from '../src/EditorToolbar';
+import { renderWithContext, ContextRenderOptions } from './renderWithContext';
 
-export type EditorRenderOptions = RenderOptions & {
+export type EditorRenderOptions = ContextRenderOptions & {
   content?: RemirrorContentType;
   editable?: boolean;
   extensions?: Extension[];
-  context?: DeepPartial<EditorContextOptions>;
 };
 
 type TestEditorProps = EditorRenderOptions & {
@@ -41,6 +37,9 @@ const TestEditor = ({ children, extensions, content, onReady, editable }: TestEd
     content: content,
     selection: 'start',
     stringHandler: 'html',
+    onError: ({ error }) => {
+      throw error;
+    },
   });
 
   useEffect(() => {
@@ -89,7 +88,6 @@ export const renderWithEditor = async (
   ui: ReactElement | null,
   options?: EditorRenderOptions,
 ): Promise<EditorRenderResult> => {
-  const context = merge(defaultEditorContext, options?.context || {}) as EditorContextOptions;
   const result: Partial<EditorRenderResult> = {
     getHtmlContent: () => document.querySelector('.remirror-editor')?.innerHTML,
     getJsonContent: () => result.editor?.state.doc.content.child(0).toJSON(),
@@ -97,18 +95,17 @@ export const renderWithEditor = async (
   };
   let isReady = false;
 
-  const { container } = render(
-    <EditorContext.Provider value={context}>
-      <TestEditor
-        onReady={(manager) => {
-          result.editor = RemirrorTestChain.create(manager);
-          isReady = true;
-        }}
-        {...options}
-      >
-        {ui}
-      </TestEditor>
-    </EditorContext.Provider>,
+  const { container } = renderWithContext(
+    <TestEditor
+      onReady={(manager) => {
+        result.editor = RemirrorTestChain.create(manager);
+        isReady = true;
+      }}
+      {...options}
+    >
+      {ui}
+    </TestEditor>,
+    options,
   );
 
   if (!isReady) {