@squiz/formatted-text-editor 1.21.1-alpha.3 → 1.21.1-alpha.30

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

@@ -0,0 +1,329 @@
+import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+import { RemirrorJSON } from '@remirror/core';
+import { squizNodeToRemirrorNode } from './squizNodeToRemirrorNode';
+import {
+  mockSquizNodeJson,
+  mockSquizNodeTextJson,
+  sharedNodeExamples,
+  squizOnlyNodeExamples,
+} from '../mocks/squizNodeJson.mock';
+
+type FormattedText = FormattedTextModels.v1.FormattedText;
+
+describe('squizNodeToRemirrorNode', () => {
+  it('should convert complex Squiz component JSON to Remirror JSON', () => {
+    expect(squizNodeToRemirrorNode(mockSquizNodeJson)).toEqual({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          attrs: {
+            nodeIndent: null,
+            nodeTextAlignment: null,
+            nodeLineHeight: null,
+            style: '',
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'Hello ',
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'link',
+                  attrs: {
+                    href: 'https://www.google.com',
+                    target: null,
+                    auto: false,
+                    title: null,
+                  },
+                },
+                {
+                  type: 'bold',
+                },
+              ],
+              text: 'Mr Bean',
+            },
+            {
+              type: 'text',
+              text: ', nice to ',
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'link',
+                  attrs: {
+                    href: 'https://www.google.com',
+                    target: null,
+                    auto: false,
+                    title: null,
+                  },
+                },
+              ],
+              text: 'meet you',
+            },
+            {
+              type: 'text',
+              text: '.',
+            },
+            {
+              type: 'image',
+              attrs: {
+                alt: 'Test',
+                height: '150',
+                width: '200',
+                src: 'https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif',
+                title: '',
+              },
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it('should convert top level text component JSON to Remirror JSON', () => {
+    expect(squizNodeToRemirrorNode(mockSquizNodeTextJson)).toEqual({
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Hello world!',
+            },
+            {
+              type: 'text',
+              text: 'Another one...',
+            },
+          ],
+        },
+      ],
+      type: 'doc',
+    });
+  });
+
+  it('should handle empty Squiz component JSON', () => {
+    expect(squizNodeToRemirrorNode([])).toEqual({ content: [], type: 'doc' });
+    expect(
+      squizNodeToRemirrorNode([
+        {
+          children: [],
+          type: 'tag',
+          tag: 'p',
+        },
+      ]),
+    ).toEqual({
+      content: [
+        {
+          attrs: { nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          type: 'paragraph',
+        },
+      ],
+      type: 'doc',
+    });
+  });
+
+  it.each([
+    [
+      'Unsupported DOM tag',
+      [
+        {
+          children: [
+            {
+              type: 'text',
+              value: 'Should throw an error.',
+            },
+          ],
+          type: 'tag',
+          tag: 'code',
+        },
+      ],
+      'Unsupported node type provided: tag (tag: code)',
+    ],
+    [
+      'Unsupported node type',
+      [
+        {
+          children: [
+            {
+              type: 'text',
+              value: 'Should throw an error.',
+            },
+          ],
+          type: 'unsupported-type',
+        },
+      ],
+      'Unsupported node type provided: unsupported-type',
+    ],
+  ])('should throw an error for non supported node types', (description: string, node: any, expectedError: string) => {
+    expect(() => squizNodeToRemirrorNode(node)).toThrow(expectedError);
+  });
+
+  it('should handle pre formatted text', () => {
+    const squizComponentJSON: FormattedText = [
+      {
+        children: [
+          {
+            type: 'text',
+            value: 'Hello world!',
+          },
+        ],
+        type: 'tag',
+        tag: 'pre',
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          content: [{ text: 'Hello world!', type: 'text' }],
+          type: 'preformatted',
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle images', () => {
+    const squizComponentJSON: FormattedText = [
+      {
+        children: [
+          {
+            children: [],
+            attributes: {
+              alt: 'This is a test alt',
+              height: '360',
+              width: '480',
+              src: 'https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif',
+              title: '',
+            },
+            type: 'tag',
+            tag: 'img',
+          },
+        ],
+        type: 'tag',
+        tag: 'p',
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          content: [
+            {
+              type: 'image',
+              attrs: {
+                alt: 'This is a test alt',
+                height: '360',
+                width: '480',
+                src: 'https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif',
+                title: '',
+              },
+            },
+          ],
+          type: 'paragraph',
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
+  it.each([
+    ['italics', 'italic'],
+    ['bold', 'bold'],
+    ['underline', 'underline'],
+  ])('should handle %s formatting', (a, b) => {
+    const squizComponentJSON: FormattedText = [
+      {
+        children: [
+          {
+            children: [
+              {
+                type: 'text',
+                value: 'Hello world!',
+              },
+            ],
+            font: {
+              [a]: true,
+            },
+            tag: 'span',
+            type: 'tag',
+          },
+        ],
+        type: 'tag',
+        tag: 'p',
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          content: [{ text: 'Hello world!', marks: [{ type: b }], type: 'text' }],
+          type: 'paragraph',
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
+  it.each([1, 2, 3, 4, 5, 6])('should handle heading %s and set it to level %s', (level) => {
+    const squizComponentJSON: FormattedText = [
+      {
+        children: [
+          {
+            type: 'text',
+            value: 'Hello world!',
+          },
+        ],
+        type: 'tag',
+        tag: `h${level}`,
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '', level },
+          content: [{ text: 'Hello world!', type: 'text' }],
+          type: 'heading',
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
+  it.each([...sharedNodeExamples, ...squizOnlyNodeExamples])(
+    'should convert a Squiz node to the expected Remirror representation - $description',
+    async ({ remirrorNode, squizNode }: any) => {
+      const result = squizNodeToRemirrorNode(squizNode);
+      expect(result).toEqual({
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [remirrorNode],
+          },
+        ],
+      });
+    },
+  );
+});

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

@@ -0,0 +1,151 @@
+import { RemirrorJSON, ObjectMark } from '@remirror/core';
+import { Attrs } from 'prosemirror-model';
+import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+import { undefinedIfEmpty } from '../../undefinedIfEmpty';
+
+type FormattedText = FormattedTextModels.v1.FormattedText;
+type FormattedNodes = FormattedTextModels.v1.FormattedNodes;
+
+const getNodeType = (node: FormattedNodes): string => {
+  const typeMap: Record<string, string> = {
+    'link-to-matrix-asset': 'text',
+    text: 'text',
+  };
+
+  const tagMap: Record<string, string> = {
+    h1: 'heading',
+    h2: 'heading',
+    h3: 'heading',
+    h4: 'heading',
+    h5: 'heading',
+    h6: 'heading',
+    img: 'image',
+    pre: 'preformatted',
+    p: 'paragraph',
+    a: 'text',
+    span: 'text',
+  };
+
+  if (typeMap[node.type]) {
+    return typeMap[node.type];
+  }
+
+  if (node.type === 'tag' && tagMap[node.tag]) {
+    return tagMap[node.tag];
+  }
+
+  // Unsupported node type
+  throw new Error(
+    node.type === 'tag'
+      ? `Unsupported node type provided: ${node.type} (tag: ${node.tag})`
+      : `Unsupported node type provided: ${node.type}`,
+  );
+};
+
+const getNodeAttributes = (node: FormattedNodes): Attrs => {
+  if (node.type === 'tag' && node.tag === 'img') {
+    return {
+      alt: node.attributes?.alt,
+      height: node.attributes?.height,
+      width: node.attributes?.width,
+      src: node.attributes?.src,
+      title: node.attributes?.title,
+    };
+  } else if (node.type === 'tag') {
+    return {
+      nodeIndent: null,
+      nodeTextAlignment: node.formattingOptions?.alignment || null,
+      nodeLineHeight: null,
+      style: '',
+      level: node.tag?.startsWith('h') ? parseInt(node.tag.substring(1)) : undefined,
+    };
+  }
+
+  return {};
+};
+
+const getNodeMarks = (node: FormattedNodes): ObjectMark[] => {
+  const marks: ObjectMark[] = [];
+
+  if (node.type === 'tag' && node.tag === 'a') {
+    marks.push({
+      type: 'link',
+      attrs: {
+        href: node.attributes?.href,
+        target: node.attributes?.target ?? null,
+        auto: false,
+        title: node.attributes?.title ?? null,
+      },
+    });
+  } else if (node.type === 'link-to-matrix-asset') {
+    marks.push({
+      type: 'assetLink',
+      attrs: {
+        matrixAssetId: node.matrixAssetId,
+        matrixDomain: node.matrixDomain,
+        matrixIdentifier: node.matrixIdentifier,
+        target: node.target,
+      },
+    });
+  }
+
+  // Handle font formatting
+  if ('font' in node) {
+    node.font?.bold && marks.push({ type: 'bold' });
+    node.font?.italics && marks.push({ type: 'italic' });
+    node.font?.underline && marks.push({ type: 'underline' });
+  }
+
+  return marks;
+};
+
+const unwrapNodeIfNeeded = (node: RemirrorJSON): RemirrorJSON[] => {
+  if (node.type === 'text' && node.content?.length) {
+    return node.content.map((child) => {
+      return {
+        ...child,
+        marks: [...(child.marks || []), ...(node.marks || [])],
+      };
+    });
+  }
+
+  return [node];
+};
+
+const formatNode = (node: FormattedNodes): RemirrorJSON[] => {
+  const children: RemirrorJSON[] = [];
+
+  if ('children' in node) {
+    node.children.forEach((child: FormattedNodes) => {
+      children.push(...formatNode(child));
+    });
+  }
+
+  return unwrapNodeIfNeeded({
+    type: getNodeType(node),
+    attrs: undefinedIfEmpty(getNodeAttributes(node)),
+    marks: undefinedIfEmpty(getNodeMarks(node)),
+    text: node.type === 'text' ? node.value : undefined,
+    content: undefinedIfEmpty(children),
+  });
+};
+
+/**
+ * Converts Squiz component JSON structure to Remirror node JSON structure.
+ * @param {FormattedText} nodes Squiz nodes to convert to Remirror.
+ * @export
+ * @returns {RemirrorJSON} The converted Remirror JSON.
+ */
+export const squizNodeToRemirrorNode = (nodes: FormattedText): RemirrorJSON => {
+  let children: RemirrorJSON[] = [];
+
+  nodes.forEach((node) => {
+    children.push(...formatNode(node));
+  });
+
+  if (children.find((child) => child.type === 'text')) {
+    children = [{ type: 'paragraph', content: children }];
+  }
+
+  return { type: 'doc', content: children };
+};

package/src/utils/undefinedIfEmpty.spec.ts

@@ -0,0 +1,12 @@
+import { undefinedIfEmpty } from './undefinedIfEmpty';
+
+describe('undefinedIfEmpty', () => {
+  it.each([
+    ['empty object', {}, undefined],
+    ['non-empty object', { a: 'not empty' }, { a: 'not empty' }],
+    ['empty array', [], undefined],
+    ['non-empty array', ['not empty'], ['not empty']],
+  ])('Returns expected for %s', (description: string, object: object, expected: object | undefined) => {
+    expect(undefinedIfEmpty(object)).toEqual(expected);
+  });
+});

package/src/utils/undefinedIfEmpty.ts

@@ -0,0 +1,3 @@
+export const undefinedIfEmpty = <T extends object>(object: T): T | undefined => {
+  return Object.keys(object).length > 0 ? object : undefined;
+};

package/tailwind.config.cjs

@@ -75,6 +75,9 @@ module.exports = {
           300: '#0774d2',
           400: '#044985',
         },
+        red: {
+          300: '#d72321',
+        },
       },
     },
   },

package/tests/renderWithEditor.tsx

@@ -1,19 +1,26 @@
-import React, { ReactElement, useEffect } from 'react';
+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 { Extensions } from '../src/Extensions/Extensions';
 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';
 
 export type EditorRenderOptions = RenderOptions & {
   content?: RemirrorContentType;
+  editable?: boolean;
   extensions?: Extension[];
+  context?: DeepPartial<EditorContextOptions>;
 };
 
 type TestEditorProps = EditorRenderOptions & {
-  children: ReactElement;
+  children: ReactElement | null;
   onReady: (manager: RemirrorManager<Extension>) => void;
 };
 
@@ -27,9 +34,10 @@ type EditorRenderResult = {
   };
 };
 
-const TestEditor = ({ children, extensions, content, onReady }: TestEditorProps) => {
+const TestEditor = ({ children, extensions, content, onReady, editable }: TestEditorProps) => {
+  const context = useContext(EditorContext);
   const { manager, state, setState } = useRemirror({
-    extensions: () => extensions || Extensions(),
+    extensions: () => extensions || createExtensions(context)(),
     content: content,
     selection: 'start',
     stringHandler: 'html',
@@ -43,12 +51,14 @@ const TestEditor = ({ children, extensions, content, onReady }: TestEditorProps)
     <Remirror
       manager={manager}
       state={state}
+      editable={editable}
       onChange={(params) => {
         setState(params.state);
       }}
     >
       {children}
       <EditorComponent />
+      {editable && <FloatingToolbar />}
     </Remirror>
   );
 };
@@ -76,9 +86,10 @@ const TestEditor = ({ children, extensions, content, onReady }: TestEditorProps)
  * @return {Promise<EditorRenderResult>}
  */
 export const renderWithEditor = async (
-  ui: ReactElement,
+  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(),
@@ -87,15 +98,17 @@ export const renderWithEditor = async (
   let isReady = false;
 
   const { container } = render(
-    <TestEditor
-      onReady={(manager) => {
-        result.editor = RemirrorTestChain.create(manager);
-        isReady = true;
-      }}
-      {...options}
-    >
-      {ui}
-    </TestEditor>,
+    <EditorContext.Provider value={context}>
+      <TestEditor
+        onReady={(manager) => {
+          result.editor = RemirrorTestChain.create(manager);
+          isReady = true;
+        }}
+        {...options}
+      >
+        {ui}
+      </TestEditor>
+    </EditorContext.Provider>,
   );
 
   if (!isReady) {

package/tsconfig.json

@@ -11,7 +11,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "CommonJS",
-    "moduleResolution": "Node",
+    "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react",

package/lib/FormattedTextEditor.d.ts

@@ -1,2 +0,0 @@
-import Editor from './Editor/Editor';
-export default Editor;

package/lib/FormattedTextEditor.js

@@ -1,7 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const Editor_1 = __importDefault(require("./Editor/Editor"));
-exports.default = Editor_1.default;

package/lib/ui/Inputs/Text/TextInput.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const TextInput: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
-    label?: string | undefined;
-} & React.RefAttributes<HTMLInputElement>>;

package/lib/ui/ToolbarButton/ToolbarButton.d.ts

@@ -1,10 +0,0 @@
-import { ReactElement } from 'react';
-type ToolbarButtonProps = {
-    handleOnClick: () => void;
-    isDisabled?: boolean;
-    isActive: boolean;
-    icon: ReactElement;
-    label: string;
-};
-declare const ToolbarButton: ({ handleOnClick, isDisabled, isActive, icon, label }: ToolbarButtonProps) => JSX.Element;
-export default ToolbarButton;

package/src/Editor/Editor.mock.tsx

@@ -1,43 +0,0 @@
-import { Remirror, useRemirror, useRemirrorContext } from '@remirror/react';
-import React from 'react';
-import { Toolbar, FloatingToolbar } from '../EditorToolbar';
-import { Extensions } from '../Extensions/Extensions';
-
-type MockEditorProps = {
-  setContent?: any;
-};
-
-/**
- * @deprecated Use "renderWithEditor" and render the specific component being tested instead.
- */
-export const MockEditor = ({ setContent }: MockEditorProps) => {
-  const { manager, state, setState } = useRemirror({
-    extensions: Extensions,
-    selection: 'start',
-    stringHandler: 'html',
-  });
-
-  const Component = () => {
-    setContent && setContent.mockImplementation(useRemirrorContext().setContent);
-    return null;
-  };
-
-  const handleChange = (parameter: { state: any }) => {
-    setState(parameter.state);
-  };
-
-  return (
-    <Remirror
-      manager={manager}
-      onChange={handleChange}
-      placeholder="Write something"
-      label="Text editor"
-      state={state}
-      autoRender="start"
-    >
-      <Toolbar />
-      <Component />
-      <FloatingToolbar />
-    </Remirror>
-  );
-};

package/src/FormattedTextEditor.spec.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-import { FormattedTextEditor } from './';
-import React from 'react';
-
-describe('<FormattedTextEditor />', () => {
-  it('should render "<FormattedTextEditor />" component', () => {
-    const { baseElement } = render(<FormattedTextEditor />);
-    expect(baseElement).toBeTruthy();
-  });
-});