@squiz/formatted-text-editor 1.21.1-alpha.35 → 1.21.1-alpha.39

package/src/Extensions/LinkExtension/AssetLinkExtension.ts

@@ -10,6 +10,7 @@ import { command, CommandFunction, extension, MarkExtension, omitExtraAttributes
 import { LinkTarget, validateTarget } from './common';
 import { CommandsExtension } from '../CommandsExtension/CommandsExtension';
 import { MarkName } from '../Extensions';
+import { resolveMatrixAssetUrl } from '../../utils/resolveMatrixAssetUrl';
 
 export type AssetLinkAttributes = {
   matrixAssetId: string;
@@ -48,7 +49,7 @@ export class AssetLinkExtension extends MarkExtension<AssetLinkOptions> {
   createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec {
     return {
       inclusive: false,
-      excludes: 'link',
+      excludes: MarkName.Link,
       ...override,
       attrs: {
         ...extra.defaults(),
@@ -97,8 +98,7 @@ export class AssetLinkExtension extends MarkExtension<AssetLinkOptions> {
           ...extra.dom(node),
           ...rest,
           rel,
-          // TODO: this won't be acceptable if/when we get to rendering outside of Matrix.
-          href: `/?a=${matrixAssetId}`,
+          href: resolveMatrixAssetUrl(String(matrixAssetId), String(matrixDomain)),
           target: validateTarget(target, this.options.supportedTargets, this.options.defaultTarget),
           'data-matrix-asset-id': matrixAssetId,
           'data-matrix-identifier': matrixIdentifier,

package/src/Extensions/LinkExtension/LinkExtension.ts

@@ -6,18 +6,7 @@ import {
   MarkExtensionSpec,
   MarkSpecOverride,
 } from 'remirror';
-import {
-  command,
-  CommandFunction,
-  extension,
-  Handler,
-  keyBinding,
-  KeyBindingProps,
-  MarkExtension,
-  NamedShortcut,
-  omitExtraAttributes,
-  removeMark,
-} from '@remirror/core';
+import { command, CommandFunction, extension, MarkExtension, omitExtraAttributes, removeMark } from '@remirror/core';
 import { LinkTarget, validateTarget } from './common';
 import { CommandsExtension } from '../CommandsExtension/CommandsExtension';
 import { MarkName } from '../Extensions';
@@ -31,7 +20,6 @@ export type LinkAttributes = {
 export type LinkOptions = {
   defaultTarget?: LinkTarget;
   supportedTargets?: LinkTarget[];
-  onShortcut?: Handler<() => void>;
 };
 
 export type UpdateLinkProps = {
@@ -45,7 +33,6 @@ export type UpdateLinkProps = {
     defaultTarget: LinkTarget.Self,
     supportedTargets: [LinkTarget.Self, LinkTarget.Blank],
   },
-  handlerKeys: ['onShortcut'],
   defaultPriority: ExtensionPriority.Medium,
 })
 export class LinkExtension extends MarkExtension<LinkOptions> {
@@ -56,7 +43,7 @@ export class LinkExtension extends MarkExtension<LinkOptions> {
   createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec {
     return {
       inclusive: false,
-      excludes: 'assetLink',
+      excludes: MarkName.AssetLink,
       ...override,
       attrs: {
         ...extra.defaults(),
@@ -100,13 +87,6 @@ export class LinkExtension extends MarkExtension<LinkOptions> {
     };
   }
 
-  @keyBinding({ shortcut: NamedShortcut.InsertLink })
-  shortcut(_: KeyBindingProps): boolean {
-    this.options.onShortcut();
-
-    return true;
-  }
-
   @command()
   updateLink({ text, attrs, range }: UpdateLinkProps): CommandFunction {
     return this.store.getExtension(CommandsExtension).updateMark({

package/src/utils/converters/mocks/squizNodeJson.mock.ts

@@ -146,6 +146,25 @@ export const sharedNodeExamples: NodeExample[] = [
       },
     ],
   },
+  {
+    description: 'Asset image',
+    remirrorNode: {
+      type: 'assetImage',
+      attrs: {
+        matrixAssetId: '123',
+        matrixDomain: 'https://my-matrix.squiz.net',
+        matrixIdentifier: 'matrix-api-identifier',
+      },
+    },
+    squizNode: [
+      {
+        type: 'matrix-image',
+        matrixAssetId: '123',
+        matrixDomain: 'https://my-matrix.squiz.net',
+        matrixIdentifier: 'matrix-api-identifier',
+      },
+    ],
+  },
 ];
 
 export const squizOnlyNodeExamples: NodeExample[] = [

package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.ts

@@ -2,6 +2,7 @@ import { ProsemirrorNode, Fragment as ProsemirrorFragment, Mark } from 'remirror
 import { Attrs } from 'prosemirror-model';
 import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
 import { undefinedIfEmpty } from '../../undefinedIfEmpty';
+import { NodeName } from '../../../Extensions/Extensions';
 
 type Fragment = ProsemirrorFragment & {
   content?: Fragment[];
@@ -91,7 +92,7 @@ const transformFragment = (fragment: Fragment): FormattedText => {
 };
 
 const transformNode = (node: ProsemirrorNode): FormattedNode => {
-  const attributes = node.type.name === 'image' ? transformAttributes(node.attrs) : undefined;
+  const attributes = node.type.name === NodeName.Image ? transformAttributes(node.attrs) : undefined;
   const formattingOptions = undefinedIfEmpty(resolveFormattingOptions(node));
   const font = undefinedIfEmpty(resolveFontOptions(node));
   let transformedNode: FormattedNode = { type: 'text', value: node.text || '' };
@@ -101,17 +102,26 @@ const transformNode = (node: ProsemirrorNode): FormattedNode => {
   // If the node isn't a text type assume it is a tag type and wrap in a tag.
   // If we pick the wrong tag here it will be corrected later as part of looping through the
   // non-font marks.
-  if (node.type.name !== 'text' || attributes || formattingOptions || font) {
+  if (node.type.name !== NodeName.Text || attributes || formattingOptions || font) {
     transformedNode = {
       type: 'tag',
       tag: resolveNodeTag(node),
-      children: node.type.name === 'text' ? [transformedNode] : transformFragment(node.content),
+      children: node.type.name === NodeName.Text ? [transformedNode] : transformFragment(node.content),
       attributes,
       formattingOptions,
       font,
     };
   }
 
+  if (node.type.name === NodeName.AssetImage) {
+    transformedNode = {
+      type: 'matrix-image',
+      matrixAssetId: node.attrs.matrixAssetId,
+      matrixIdentifier: node.attrs.matrixIdentifier,
+      matrixDomain: node.attrs.matrixDomain,
+    };
+  }
+
   node.marks.forEach((mark) => {
     switch (mark.type.name) {
       case 'bold':

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

@@ -314,12 +314,24 @@ describe('squizNodeToRemirrorNode', () => {
   it.each([...sharedNodeExamples, ...squizOnlyNodeExamples])(
     'should convert a Squiz node to the expected Remirror representation - $description',
     async ({ remirrorNode, squizNode }: any) => {
-      const result = squizNodeToRemirrorNode(squizNode);
+      const result = squizNodeToRemirrorNode([
+        {
+          type: 'tag',
+          tag: 'p',
+          children: squizNode,
+        },
+      ]);
       expect(result).toEqual({
         type: 'doc',
         content: [
           {
             type: 'paragraph',
+            attrs: {
+              nodeIndent: null,
+              nodeLineHeight: null,
+              nodeTextAlignment: null,
+              style: '',
+            },
             content: [remirrorNode],
           },
         ],

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

@@ -2,13 +2,15 @@ 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': 'text',
+    'link-to-matrix-asset': NodeName.Text,
+    'matrix-image': NodeName.AssetImage,
     text: 'text',
   };
 
@@ -22,8 +24,8 @@ const getNodeType = (node: FormattedNodes): string => {
     img: 'image',
     pre: 'preformatted',
     p: 'paragraph',
-    a: 'text',
-    span: 'text',
+    a: NodeName.Text,
+    span: NodeName.Text,
   };
 
   if (typeMap[node.type]) {
@@ -51,6 +53,12 @@ const getNodeAttributes = (node: FormattedNodes): Attrs => {
       src: node.attributes?.src,
       title: node.attributes?.title,
     };
+  } else if (node.type === 'matrix-image') {
+    return {
+      matrixAssetId: node.matrixAssetId,
+      matrixDomain: node.matrixDomain,
+      matrixIdentifier: node.matrixIdentifier,
+    };
   } else if (node.type === 'tag') {
     return {
       nodeIndent: null,
@@ -69,7 +77,7 @@ const getNodeMarks = (node: FormattedNodes): ObjectMark[] => {
 
   if (node.type === 'tag' && node.tag === 'a') {
     marks.push({
-      type: 'link',
+      type: MarkName.Link,
       attrs: {
         href: node.attributes?.href,
         target: node.attributes?.target ?? null,
@@ -79,7 +87,7 @@ const getNodeMarks = (node: FormattedNodes): ObjectMark[] => {
     });
   } else if (node.type === 'link-to-matrix-asset') {
     marks.push({
-      type: 'assetLink',
+      type: MarkName.AssetLink,
       attrs: {
         matrixAssetId: node.matrixAssetId,
         matrixDomain: node.matrixDomain,

package/src/utils/resolveMatrixAssetUrl.spec.ts

@@ -0,0 +1,26 @@
+import { resolveMatrixAssetUrl } from './resolveMatrixAssetUrl';
+
+describe('resolveMatrixAssetUrl', () => {
+  it.each([
+    [
+      'domain with no scheme',
+      '123:hello?.txt',
+      'matrix.labs.squiz.test',
+      'http://matrix.labs.squiz.test/_nocache?a=123%3Ahello%3F.txt',
+    ],
+    [
+      'domain with scheme',
+      '123:hello?.txt',
+      'https://matrix.labs.squiz.test',
+      'https://matrix.labs.squiz.test/_nocache?a=123%3Ahello%3F.txt',
+    ],
+    [
+      'domain with path',
+      '123:hello?.txt',
+      'https://matrix.labs.squiz.test/site-1',
+      'https://matrix.labs.squiz.test/_nocache?a=123%3Ahello%3F.txt',
+    ],
+  ])('Resolves to expected URL for %s', (description: string, id: string, matrixDomain: string, expected: string) => {
+    expect(resolveMatrixAssetUrl(id, matrixDomain)).toBe(expected);
+  });
+});

package/src/utils/resolveMatrixAssetUrl.ts

@@ -0,0 +1,7 @@
+export const resolveMatrixAssetUrl = (id: string, matrixDomain: string): string => {
+  if (matrixDomain.indexOf('://') < 0) {
+    matrixDomain = `${window.location.protocol}//${matrixDomain}`;
+  }
+
+  return new URL(`/_nocache?a=${encodeURIComponent(id)}`, matrixDomain).toString();
+};