@squiz/formatted-text-editor 1.70.0 → 2.0.0

package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.spec.ts

@@ -665,4 +665,214 @@ describe('squizNodeToRemirrorNode', () => {
     const result = squizNodeToRemirrorNode(squizComponentJSON);
     expect(result).toEqual(expected);
   });
+
+  it('should handle tables', () => {
+    const squizJSON: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'table',
+        children: [
+          {
+            type: 'tag',
+            tag: 'tr',
+            children: [
+              {
+                type: 'tag',
+                tag: 'th',
+                children: [],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                  tableControllerCell: 'true',
+                },
+              },
+              {
+                type: 'tag',
+                tag: 'th',
+                children: [],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                  tableControllerCell: 'true',
+                  colwidth: '366',
+                },
+              },
+              {
+                type: 'tag',
+                tag: 'th',
+                children: [],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                  tableControllerCell: 'true',
+                },
+              },
+            ],
+          },
+          {
+            type: 'tag',
+            tag: 'tr',
+            children: [
+              {
+                type: 'tag',
+                tag: 'th',
+                children: [],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                  tableControllerCell: 'true',
+                },
+              },
+              {
+                type: 'tag',
+                tag: 'td',
+                children: [
+                  {
+                    type: 'tag',
+                    tag: 'p',
+                    children: [],
+                  },
+                ],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                  colwidth: '366',
+                },
+              },
+              {
+                type: 'tag',
+                tag: 'td',
+                children: [
+                  {
+                    type: 'tag',
+                    tag: 'p',
+                    children: [],
+                  },
+                ],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      type: 'doc',
+      content: [
+        {
+          type: 'table',
+          attrs: {
+            isControllersInjected: true,
+          },
+          content: [
+            {
+              type: 'tableRow',
+              attrs: {
+                nodeIndent: null,
+                nodeLineHeight: null,
+                nodeTextAlignment: null,
+                style: '',
+              },
+              content: [
+                {
+                  type: 'tableControllerCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: null,
+                    background: null,
+                  },
+                },
+                {
+                  type: 'tableControllerCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: [366],
+                    background: null,
+                  },
+                },
+                {
+                  type: 'tableControllerCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: null,
+                    background: null,
+                  },
+                },
+              ],
+            },
+            {
+              type: 'tableRow',
+              attrs: {
+                nodeIndent: null,
+                nodeLineHeight: null,
+                nodeTextAlignment: null,
+                style: '',
+              },
+              content: [
+                {
+                  type: 'tableControllerCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: null,
+                    background: null,
+                  },
+                },
+                {
+                  type: 'tableCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: [366],
+                    background: null,
+                  },
+                  content: [
+                    {
+                      type: 'paragraph',
+                      attrs: {
+                        nodeIndent: null,
+                        nodeTextAlignment: null,
+                        nodeLineHeight: null,
+                        style: '',
+                      },
+                    },
+                  ],
+                },
+                {
+                  type: 'tableCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: null,
+                    background: null,
+                  },
+                  content: [
+                    {
+                      type: 'paragraph',
+                      attrs: {
+                        nodeIndent: null,
+                        nodeTextAlignment: null,
+                        nodeLineHeight: null,
+                        style: '',
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+
+    const result = squizNodeToRemirrorNode(squizJSON);
+    expect(result).toEqual(expected);
+  });
 });

package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts

@@ -28,6 +28,10 @@ const getNodeType = (node: FormattedNodes): string => {
     li: 'listItem',
     ul: 'bulletList',
     hr: 'horizontalRule',
+    table: 'table',
+    tr: 'tableRow',
+    th: 'tableHeaderCell',
+    td: 'tableCell',
     a: NodeName.Text,
     em: NodeName.Text,
     span: NodeName.Text,
@@ -41,6 +45,12 @@ const getNodeType = (node: FormattedNodes): string => {
   }
 
   if (node.type === 'tag' && tagMap[node.tag]) {
+    // This is a specific check case for tables as there are some <th> tags which need to be returned
+    // as table controller cells.
+    if (node.attributes?.tableControllerCell) {
+      return 'tableControllerCell';
+    }
+    // Return regular tag for everything else
     return tagMap[node.tag];
   }
 
@@ -53,6 +63,19 @@ const getNodeType = (node: FormattedNodes): string => {
 };
 
 const getNodeAttributes = (node: FormattedNodes): Attrs => {
+  if (node.type === 'tag' && node.tag === 'table') {
+    return {
+      isControllersInjected: true,
+    };
+  }
+  if (node.type === 'tag' && (node.tag === 'th' || node.tag === 'td')) {
+    return {
+      colspan: parseInt(node.attributes?.colspan ?? '1'),
+      rowspan: parseInt(node.attributes?.rowspan ?? '1'),
+      colwidth: node.attributes?.colwidth ? [parseInt(node.attributes.colwidth)] : null,
+      background: null,
+    };
+  }
   if (node.type === 'tag' && node.tag === 'img') {
     return {
       alt: node.attributes?.alt,

package/tests/mockResourceBrowserContext.tsx

@@ -1,11 +1,23 @@
 import React, { ReactNode } from 'react';
-import { ResourceBrowserContext, Source, Resource, ResourceReference } from '@squiz/resource-browser';
+import {
+  ResourceBrowserSource,
+  ResourceBrowserContextProvider,
+  ResourceBrowserPluginType,
+} from '@squiz/resource-browser';
+import MatrixResourceBrowserPlugin, {
+  Source,
+  Resource,
+  ResourceReference,
+  MatrixResourceBrowserPluginProps,
+} from '@squiz/matrix-resource-browser-plugin';
+
 import { fireEvent, screen } from '@testing-library/react';
 import { DeepPartial } from '../src/types';
 
 export type MockResourceBrowserContextOptions = DeepPartial<{
   sources: Source[];
   resources: Resource[];
+  pluginProps?: MatrixResourceBrowserPluginProps;
 }>;
 
 export const mockResource = (resource: DeepPartial<Resource> = {}): Resource =>
@@ -23,6 +35,10 @@ export const mockResource = (resource: DeepPartial<Resource> = {}): Resource =>
       code: 'live',
       name: 'Live',
     },
+    source: {
+      id: '1',
+      type: 'matrix' as ResourceBrowserPluginType,
+    },
     ...resource,
   } as Resource);
 
@@ -33,29 +49,49 @@ export const mockSource = (source: DeepPartial<Source> = {}): Source => ({
   nodes: (source.nodes || [mockResource()]).map((resource) => mockResource(resource)),
 });
 
-export const mockResourceBrowserContext = ({ sources, resources }: MockResourceBrowserContextOptions) => {
+export const mockResourceBrowserContext = ({ sources, resources, pluginProps }: 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,
-    );
+  const onRequestSources = pluginProps?.onRequestSources || jest.fn().mockResolvedValue(sources);
+  const onRequestChildren = pluginProps?.onRequestChildren || jest.fn().mockResolvedValue(resources);
+  const onRequestResource =
+    pluginProps?.onRequestResource ||
+    jest
+      .fn()
+      .mockImplementation((reference: ResourceReference) =>
+        Promise.resolve(resources?.find((resource) => resource.id === reference.resource) || null),
+      );
 
   return {
     MockResourceBrowserContext: ({ children }: { children: ReactNode }) => (
-      <ResourceBrowserContext.Provider value={{ onRequestSources, onRequestChildren, onRequestResource }}>
+      <ResourceBrowserContextProvider
+        value={{
+          onRequestSources: (): Promise<ResourceBrowserSource[]> =>
+            Promise.resolve([
+              {
+                name: 'Matrix API',
+                id: 'matrix-api-identifier',
+                type: 'matrix',
+              },
+            ]),
+          plugins: [
+            MatrixResourceBrowserPlugin({
+              onRequestSources: onRequestSources,
+              onRequestChildren: onRequestChildren,
+              onRequestResource: onRequestResource,
+            } as MatrixResourceBrowserPluginProps),
+          ],
+        }}
+      >
         {children}
-      </ResourceBrowserContext.Provider>
+      </ResourceBrowserContextProvider>
     ),
     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.findAllByRole('button', { name: sourceLabel }))[0]);
       fireEvent.click(await screen.findByTitle(resourceName));
       fireEvent.click(await screen.findByRole('button', { name: 'Select' }));
     },

package/tests/renderWithContext.tsx

@@ -4,7 +4,12 @@ import merge from 'deepmerge';
 import { EditorContext } from '../src';
 import { defaultEditorContext, EditorContextOptions } from '../src/Editor/EditorContext';
 import { DeepPartial } from '../src/types';
-import { ResourceBrowserContext } from '@squiz/resource-browser';
+import {
+  ResourceBrowserSource,
+  ResourceBrowserContextProvider,
+  ResourceBrowserPluginType,
+} from '@squiz/resource-browser';
+import MatrixResourceBrowserPlugin from '@squiz/matrix-resource-browser-plugin';
 import { mockSource } from './mockResourceBrowserContext';
 
 export type ContextRenderOptions = RenderOptions & {
@@ -31,17 +36,40 @@ export const renderWithContext = (ui: ReactElement | null, options?: ContextRend
         code: 'live',
         name: 'Live',
       },
+      source: {
+        id: '1',
+        type: 'matrix' as ResourceBrowserPluginType,
+      },
     },
   ];
   const onRequestSources = jest.fn().mockResolvedValue(sources);
   const onRequestChildren = jest.fn().mockResolvedValue(resources);
   const onRequestResource = jest.fn(() => Promise.resolve(resources[0]));
+  editorContext.resolveNodeToUrl = jest.fn(() => Promise.resolve(resources[0].url));
 
   return render(
     <EditorContext.Provider value={editorContext}>
-      <ResourceBrowserContext.Provider value={{ onRequestSources, onRequestChildren, onRequestResource }}>
+      <ResourceBrowserContextProvider
+        value={{
+          onRequestSources: (): Promise<ResourceBrowserSource[]> =>
+            Promise.resolve([
+              {
+                name: 'Matrix',
+                id: 'matrixIdentifier',
+                type: 'matrix',
+              },
+            ]),
+          plugins: [
+            MatrixResourceBrowserPlugin({
+              onRequestSources: onRequestSources,
+              onRequestChildren: onRequestChildren,
+              onRequestResource: onRequestResource,
+            }),
+          ],
+        }}
+      >
         {ui}
-      </ResourceBrowserContext.Provider>
+      </ResourceBrowserContextProvider>
     </EditorContext.Provider>,
   );
 };

package/tests/renderWithEditor.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement, useContext, useEffect } from 'react';
 import { Extension, RemirrorContentType, RemirrorManager } from '@remirror/core';
 import { CorePreset } from '@remirror/preset-core';
-import { ResourceBrowserContext } from '@squiz/resource-browser';
 import { BuiltinPreset } from 'remirror';
 import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
 import { RemirrorTestChain } from 'jest-remirror';
@@ -34,9 +33,8 @@ export type EditorRenderResult = {
 
 const TestEditor = ({ children, extensions, content, onReady, editable }: TestEditorProps) => {
   const context = useContext(EditorContext);
-  const browserContext = useContext(ResourceBrowserContext);
   const { manager, state, setState } = useRemirror({
-    extensions: () => extensions || createExtensions(context, browserContext)(),
+    extensions: () => extensions || createExtensions(context)(),
     content: content,
     selection: 'start',
     stringHandler: 'html',

package/vite.config.ts

@@ -7,12 +7,12 @@ import react from '@vitejs/plugin-react';
 export default defineConfig({
   root: 'demo',
   optimizeDeps: {
-    include: ['@squiz/resource-browser'],
+    include: [],
   },
   build: {
     outDir: 'build/demo',
     commonjsOptions: {
-      include: [/node_modules/, /resource-browser/],
+      include: [/node_modules/],
     },
   },
   plugins: [