@squiz/formatted-text-editor 0.0.0-rbv2-20240530041851

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

@@ -0,0 +1,221 @@
+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';
+import { MarkName, NodeName } from '../../../Extensions/Extensions';
+
+type FormattedText = FormattedTextModels.v1.FormattedText;
+type FormattedNodes = FormattedTextModels.v1.FormattedNodes;
+
+const getNodeType = (node: FormattedNodes): string => {
+  const typeMap: Record<string, string> = {
+    'link-to-matrix-asset': NodeName.Text,
+    'matrix-image': NodeName.AssetImage,
+    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',
+    ol: 'orderedList',
+    li: 'listItem',
+    ul: 'bulletList',
+    hr: 'horizontalRule',
+    table: 'table',
+    tr: 'tableRow',
+    th: 'tableHeaderCell',
+    td: 'tableCell',
+    a: NodeName.Text,
+    em: NodeName.Text,
+    span: NodeName.Text,
+    strong: NodeName.Text,
+    code: NodeName.CodeBlock,
+    br: NodeName.hardBreak,
+  };
+
+  if (typeMap[node.type]) {
+    return typeMap[node.type];
+  }
+
+  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];
+  }
+
+  // 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 === '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,
+      height: node.attributes?.height,
+      width: node.attributes?.width,
+      src: node.attributes?.src,
+      title: node.attributes?.title,
+    };
+  } else if (node.type === 'tag' && node.tag === 'code') {
+    return {
+      language: node.attributes?.language || 'markup',
+      wrap: node.attributes?.wrap || true,
+    };
+  } else if (node.type === 'matrix-image') {
+    return {
+      matrixAssetId: node.matrixAssetId,
+      matrixDomain: node.matrixDomain,
+      matrixIdentifier: node.matrixIdentifier,
+    };
+  } 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: MarkName.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: MarkName.AssetLink,
+      attrs: {
+        matrixAssetId: node.matrixAssetId,
+        matrixDomain: node.matrixDomain,
+        matrixIdentifier: node.matrixIdentifier,
+        target: node.target,
+      },
+    });
+  } else if (node.type === 'tag' && node.tag === 'strong') {
+    marks.push({ type: 'bold' });
+  } else if (node.type === 'tag' && node.tag === 'em') {
+    marks.push({ type: 'italic' });
+  }
+
+  // Handle font formatting
+  if ('font' in node && node.font !== undefined) {
+    for (const [type, enabled] of Object.entries(node.font)) {
+      if (enabled) {
+        if (type === 'bold' || type === 'italics' || type === 'underline') {
+          marks.push({ type: type === 'italics' ? 'italic' : type });
+        } else {
+          throw new Error(`Unsupported mark provided: ${type}`);
+        }
+      }
+    }
+  }
+
+  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) => {
+    try {
+      children.push(...formatNode(node));
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      children.push({
+        type: 'paragraph',
+        content: [
+          {
+            type: NodeName.Unsupported,
+            attrs: {
+              originalNode: node,
+              errorMessage,
+            },
+          },
+        ],
+      });
+    }
+  });
+
+  if (children.find((child) => child.type === 'text')) {
+    children = [{ type: 'paragraph', content: children }];
+  }
+
+  return { type: 'doc', content: children };
+};

package/src/utils/createToolbarPositioner.ts

@@ -0,0 +1,128 @@
+import { hasStateChanged, isPositionVisible, Positioner } from 'remirror/extensions';
+import { Coords, getMarkRange, getTextSelection } from 'remirror';
+import { getCursorRect } from './getCursorRect';
+
+export type ToolbarPositionerProps = {
+  types: string[];
+};
+
+export type ToolbarPositionerRange = {
+  isSelectionInView: boolean;
+  visible: boolean;
+  marks: Record<
+    string,
+    {
+      isExclusivelyActive: boolean;
+      isActive: boolean;
+    }
+  >;
+  cursor: {
+    from: Coords;
+    to: Coords;
+  };
+};
+
+/* istanbul ignore next */
+export const createToolbarPositioner = ({ types }: ToolbarPositionerProps) => {
+  // Inspired by "createMarkPositioner".
+  // See: https://github.com/remirror/remirror/blob/107cba/packages/remirror__extension-positioner/src/core-positioners.ts#L267
+  return Positioner.create({
+    hasChanged: hasStateChanged,
+    getActive: (props) => {
+      const { state, view } = props;
+
+      try {
+        const selection = getTextSelection(state.selection, state.doc);
+        const cursor = { from: view.coordsAtPos(selection.from), to: view.coordsAtPos(selection.to) };
+        const data: ToolbarPositionerRange = {
+          isSelectionInView:
+            isPositionVisible(getCursorRect(cursor.from), view.dom) ||
+            isPositionVisible(getCursorRect(cursor.to), view.dom),
+          cursor: cursor,
+          visible: false,
+          marks: {},
+        };
+
+        data.visible = !selection.empty && data.isSelectionInView;
+
+        types.forEach((type) => {
+          const markRange = getMarkRange(selection.$from, type, selection.$to);
+
+          if (!markRange) {
+            data.marks[type] = { isActive: false, isExclusivelyActive: false };
+            return;
+          }
+
+          // exclusively active =
+          //   the entire selection has the mark applied.
+          // active =
+          //   at least part of the selection has the mark applied. "getMarkRanges" will return an empty array
+          //   if this isn't the case. if there is no selection the cursor must be within the bounds of the mark,
+          //   not on the edges.
+          const isExclusivelyActive = selection.empty
+            ? selection.from > markRange.from && selection.to < markRange.to
+            : selection.from >= markRange.from && selection.to <= markRange.to;
+          const isActive = selection.empty ? selection.from > markRange.from && selection.to < markRange.to : true;
+
+          // the toolbar will be visible if there is either a selection, or we are within the bounds of a mark
+          // we have formatting tools for.
+          data.visible = data.visible || isExclusivelyActive;
+          data.marks[type] = { isExclusivelyActive, isActive };
+        });
+
+        return data.visible ? [data] : Positioner.EMPTY;
+      } catch {
+        return Positioner.EMPTY;
+      }
+    },
+    getPosition: (props) => {
+      const { element, data, view } = props;
+      const { cursor, visible } = data;
+      const { from, to } = cursor;
+      const parent = element.offsetParent ?? view.dom;
+      const parentRect = parent.getBoundingClientRect();
+      const height = Math.abs(to.bottom - from.top);
+
+      // Hack to get JSDOM to work, positioning doesn't work great here.
+      if (isNaN(parentRect.top)) {
+        return {
+          rect: new DOMRect(0, 0, 0, 0),
+          y: 0,
+          x: 0,
+          height: 0,
+          width: 0,
+          visible: false,
+        };
+      }
+
+      // True when the selection spans multiple lines.
+      const spansMultipleLines = height > from.bottom - from.top;
+
+      // The position furthest to the left.
+      const leftmost = Math.min(from.left, to.left);
+
+      // The position nearest the top.
+      const topmost = Math.min(from.top, to.top);
+      const bottommost = Math.max(from.bottom, to.bottom);
+
+      const left = parent.scrollLeft + (spansMultipleLines ? to.left - parentRect.left : leftmost - parentRect.left);
+      const top = parent.scrollTop + topmost - parentRect.top;
+      const width = spansMultipleLines ? 1 : Math.abs(from.left - to.right);
+      const rect = new DOMRect(spansMultipleLines ? to.left : leftmost, topmost, width, height);
+
+      // Get header toolbar by class inside the current element/editor
+      const headerToolbar = element.parentElement?.getElementsByClassName('header-toolbar')?.[0];
+      const headerBarRects = headerToolbar?.getBoundingClientRect();
+      const headerBarHeight = headerBarRects?.height ?? 0;
+      const headerBarBottom = (headerBarRects?.top ?? 0) + headerBarHeight;
+
+      // If floating toolbar will overlap fixed toolbar, set position to under selection
+      const isOverlapping = headerBarBottom + headerBarHeight > topmost;
+      // This is a good bottom position instead of it being on top of the toolbar when there is an overlap
+      const bottomPosition = parent.scrollTop + bottommost - parentRect.top + 62;
+      const y = isOverlapping ? bottomPosition : top;
+
+      return { rect, y, x: left, height, width, visible };
+    },
+  });
+};

package/src/utils/getCursorRect.ts

@@ -0,0 +1,5 @@
+import { Coords } from 'remirror';
+
+export const getCursorRect = (coords: Coords): DOMRect => {
+  return new DOMRect(coords.left, coords.top, 1, coords.top - coords.bottom);
+};

package/src/utils/getMarkNamesByGroup.spec.ts

@@ -0,0 +1,20 @@
+import { EditorSchema, ExtensionTag } from '@remirror/core';
+import { renderWithEditor } from '../../tests';
+import { getMarkNamesByGroup } from './getMarkNamesByGroup';
+
+describe('getMarkNamesGroup', () => {
+  it('Should return expected extensions with "FormattingMark" tag', async () => {
+    const { editor } = await renderWithEditor(null);
+    const schema: EditorSchema = editor.schema;
+    const formattingMarkNames = getMarkNamesByGroup(schema, ExtensionTag.FormattingMark);
+    const otherMarkNames = Object.values(schema.marks)
+      .map((mark) => mark.name)
+      .filter((mark) => !formattingMarkNames.includes(mark));
+
+    // This tag is used by the clear formatting extension.
+    // Marks in the first array will be transformed to a paragraph when formatting is cleared.
+    // Mark in the second array will be left as-is.
+    expect(formattingMarkNames).toEqual(['bold', 'italic', 'underline']);
+    expect(otherMarkNames).toEqual(['assetLink', 'link']);
+  });
+});

package/src/utils/getMarkNamesByGroup.ts

@@ -0,0 +1,7 @@
+import { EditorSchema, ExtensionTagType } from '@remirror/core';
+
+export const getMarkNamesByGroup = (schema: EditorSchema, group: ExtensionTagType): string[] => {
+  return Object.values(schema.marks)
+    .filter((mark) => mark.spec.group?.includes(group))
+    .map((mark) => mark.name);
+};

package/src/utils/getNodeNamesByGroup.spec.ts

@@ -0,0 +1,37 @@
+import { EditorSchema, ExtensionTag } from '@remirror/core';
+import { renderWithEditor } from '../../tests';
+import { getNodeNamesByGroup } from './getNodeNamesByGroup';
+
+describe('getNodeNamesByGroup', () => {
+  it('Should return expected extensions with "FormattingNode" tag', async () => {
+    const { editor } = await renderWithEditor(null);
+    const schema: EditorSchema = editor.schema;
+    const formattingNodeNames = getNodeNamesByGroup(schema, ExtensionTag.FormattingNode);
+    const otherNodeNames = Object.values(schema.nodes)
+      .map((node) => node.name)
+      .filter((node) => !formattingNodeNames.includes(node));
+
+    // This tag is used by the clear formatting extension.
+    // Nodes in the first array will be transformed to a paragraph when formatting is cleared.
+    // Nodes in the second array will be left as-is.
+    expect(formattingNodeNames).toEqual(['paragraph', 'heading', 'preformatted']);
+    expect(otherNodeNames).toEqual([
+      'assetImage',
+      'doc',
+      'text',
+      'tableControllerCell',
+      'codeBlock',
+      'image',
+      'unsupportedNode',
+      'bulletList',
+      'listItem',
+      'orderedList',
+      'horizontalRule',
+      'table',
+      'hardBreak',
+      'tableRow',
+      'tableCell',
+      'tableHeaderCell',
+    ]);
+  });
+});

package/src/utils/getNodeNamesByGroup.ts

@@ -0,0 +1,7 @@
+import { EditorSchema, ExtensionTagType } from '@remirror/core';
+
+export const getNodeNamesByGroup = (schema: EditorSchema, group: ExtensionTagType): string[] => {
+  return Object.values(schema.nodes)
+    .filter((node) => node.spec.group?.includes(group))
+    .map((node) => node.name);
+};

package/src/utils/getShortcutSymbol.spec.ts

@@ -0,0 +1,27 @@
+import { getShortcutSymbol } from './getShortcutSymbol';
+
+describe('getShortcutSymbol', () => {
+  it('Returns Mac command icon if user-agent is a Mac based user-agent', () => {
+    Object.defineProperty(window, `navigator`, {
+      value: {
+        userAgent:
+          'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/601.3.9 (KHTML, like Gecko) Version/9.0.2 Safari/601.3.9',
+      },
+      writable: true,
+    });
+
+    expect(getShortcutSymbol()).toBe('⌘');
+  });
+
+  it('Returns Ctrl shortcut if user-agent is not a Mac based user-agent', () => {
+    Object.defineProperty(window, `navigator`, {
+      value: {
+        userAgent:
+          'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.246',
+      },
+      writable: true,
+    });
+
+    expect(getShortcutSymbol()).toBe('Ctrl');
+  });
+});

package/src/utils/getShortcutSymbol.ts

@@ -0,0 +1,4 @@
+export const getShortcutSymbol = (): string => {
+  // If we can detect Mac then we return "⌘" otherwise default to "Ctrl"
+  return window.navigator.userAgent.toLowerCase().indexOf('mac') > -1 ? '⌘' : 'Ctrl';
+};

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/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

@@ -0,0 +1,16 @@
+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/tailwind.config.cjs

@@ -0,0 +1,87 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './node_modules/flowbite/**/*.js'],
+  theme: {
+    extend: {
+      borderRadius: {
+        DEFAULT: '8px',
+        md: '6px',
+      },
+      fontFamily: {
+        base: 'Open Sans, Arial, sans-serif',
+      },
+      fontWeight: {
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+      },
+      fontSize: {
+        xlg: '1.125rem',
+        lg: '1rem',
+        md: '0.875rem',
+        sm: '0.8125rem',
+        base: '1rem',
+        'heading-1': ['1.625rem', '2rem'],
+        'heading-2': ['1.25rem', '1.5rem'],
+        'heading-3': ['1.125rem', '1.375rem'],
+        'heading-4': ['1rem', '1.25rem'],
+      },
+      boxShadow: {
+        outline: '0 0 0 1px rgba(0,0,0,0.10)',
+        sm: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 4px 2px rgba(0,0,0,0.08)',
+        DEFAULT: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12)',
+        md: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12)',
+        lg: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 24px 12px rgba(0,0,0,0.12)',
+        inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+        none: 'none',
+      },
+      width: {
+        'modal-sm': '25rem',
+        'modal-md': '37.5rem',
+        'modal-lg': '50rem',
+        'modal-xl': '62.5rem',
+      },
+      spacing: {
+        1: '0.25rem', // 4px
+        2: '0.5rem', // 8px
+        3: '0.75rem', // 12px
+        4: '1rem', // 16px
+        5: '1.25rem', // 20px
+        6: '1.5rem', // 24px
+        7: '1.75rem', // 28px
+        8: '2rem', // 32px
+        169: '169px', // 169px
+      },
+      colors: {
+        gray: {
+          50: '#F7F7F7',
+          100: '#F5F5F5',
+          200: '#ededed',
+          300: '#e0e0e0',
+          400: '#BABABA',
+          500: '#949494',
+          600: '#707070',
+          700: '#4F4F4F',
+          800: '#3D3D3D',
+          900: '#2B2B2B',
+        },
+        blue: {
+          100: '#e6f1fa',
+          200: '#8FC0EB',
+          300: '#0774d2',
+          400: '#044985',
+        },
+        teal: {
+          100: '#E6F4F6',
+          400: '#024752',
+        },
+        red: {
+          300: '#d72321',
+        },
+      },
+    },
+  },
+  plugins: [],
+  important: true,
+};

package/tests/index.ts

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