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

package/src/Extensions/ImageExtension/ImageExtension.ts

@@ -0,0 +1,19 @@
+import { ImageExtension as RemirrorImageExtension } from 'remirror/extensions';
+import { PasteRule } from 'prosemirror-paste-rules';
+import { ApplySchemaAttributes, NodeSpecOverride, NodeExtensionSpec } from '@remirror/core';
+
+export class ImageExtension extends RemirrorImageExtension {
+  createPasteRules(): PasteRule[] {
+    // override super behaviour of handling file uploads.
+    return [];
+  }
+
+  createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec {
+    const spec = super.createNodeSpec(extra, override);
+
+    return {
+      ...spec,
+      selectable: true,
+    };
+  }
+}

package/src/Extensions/LinkExtension/AssetLinkExtension.spec.ts

@@ -0,0 +1,106 @@
+import { renderWithEditor } from '../../../tests';
+
+describe('AssetLinkExtension', () => {
+  it('Parses HTML content representing an asset link', async () => {
+    const { getJsonContent } = await renderWithEditor(null, {
+      content: `<a href="https://my-matrix.squiz.net/?a=this-is-actually-ignored"
+                  target="_self"
+                  data-matrix-asset-id="123"
+                  data-matrix-identifier="matrix-api-identifier"
+                  data-matrix-domain="https://matrix-domain.squiz.net">
+                  Hello!
+                </a>`,
+    });
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Hello!',
+          marks: [
+            {
+              type: 'assetLink',
+              attrs: {
+                href: 'https://default-resource/',
+                matrixAssetId: '123',
+                matrixDomain: 'https://matrix-domain.squiz.net',
+                matrixIdentifier: 'matrix-api-identifier',
+                target: '_self',
+              },
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it('Resolves to a regular link if HTML content is missing some of the expected attributes', async () => {
+    const { getJsonContent } = await renderWithEditor(null, {
+      content: `<a href="https://my-matrix.squiz.net/?a=123"
+                  target="_self"
+                  data-matrix-asset-id="123">
+                  Hello!
+                </a>`,
+    });
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Hello!',
+          marks: [
+            {
+              type: 'link',
+              attrs: {
+                href: 'https://my-matrix.squiz.net/?a=123',
+                target: '_self',
+                title: null,
+              },
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it('Outputs expected HTML', async () => {
+    const { getHtmlContent } = await renderWithEditor(null, {
+      content: {
+        type: 'paragraph',
+        content: [
+          {
+            type: 'text',
+            text: 'Hello!',
+            marks: [
+              {
+                type: 'assetLink',
+                attrs: {
+                  href: 'https://default-resource/',
+                  matrixAssetId: '123',
+                  matrixDomain: 'https://matrix-domain.squiz.net',
+                  matrixIdentifier: 'matrix-api-identifier',
+                  target: '_blank',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    });
+
+    expect(getHtmlContent()).toEqual(
+      '<a rel="noopener noreferrer nofollow" ' +
+        'href="https://default-resource/" ' +
+        'target="_blank" ' +
+        'data-matrix-asset-id="123" ' +
+        'data-matrix-identifier="matrix-api-identifier" ' +
+        'data-matrix-domain="https://matrix-domain.squiz.net">' +
+        'Hello!' +
+        '</a>',
+    );
+  });
+});

package/src/Extensions/LinkExtension/AssetLinkExtension.ts

@@ -0,0 +1,127 @@
+import {
+  ApplySchemaAttributes,
+  ExtensionPriority,
+  FromToProps,
+  isElementDomNode,
+  MarkExtensionSpec,
+  MarkSpecOverride,
+} from 'remirror';
+import { command, CommandFunction, extension, MarkExtension, omitExtraAttributes, removeMark } from '@remirror/core';
+import { LinkTarget, validateTarget } from './common';
+import { CommandsExtension } from '../CommandsExtension/CommandsExtension';
+import { MarkName } from '../Extensions';
+
+export type AssetLinkAttributes = {
+  matrixAssetId: string;
+  matrixIdentifier: string;
+  matrixDomain: string;
+  target: LinkTarget;
+  href: string;
+  url: string;
+};
+
+export type AssetLinkOptions = {
+  matrixDomain?: string;
+  defaultTarget?: LinkTarget;
+  supportedTargets?: LinkTarget[];
+};
+
+export type UpdateAssetLinkProps = {
+  text: string;
+  attrs: Partial<AssetLinkAttributes>;
+  range: FromToProps;
+};
+
+@extension<AssetLinkOptions>({
+  defaultOptions: {
+    matrixDomain: '',
+    defaultTarget: LinkTarget.Self,
+    supportedTargets: [LinkTarget.Self, LinkTarget.Blank],
+  },
+  defaultPriority: ExtensionPriority.High,
+})
+export class AssetLinkExtension extends MarkExtension<AssetLinkOptions> {
+  get name(): string {
+    return MarkName.AssetLink;
+  }
+
+  createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec {
+    return {
+      inclusive: false,
+      excludes: [this.name, MarkName.Link].join(' '),
+      ...override,
+      attrs: {
+        ...extra.defaults(),
+        matrixAssetId: {},
+        matrixIdentifier: {},
+        href: { default: '' },
+        matrixDomain: { default: this.options.matrixDomain },
+        target: { default: this.options.defaultTarget },
+      },
+      parseDOM: [
+        {
+          tag: 'a[data-matrix-asset-id]',
+          getAttrs: (node) => {
+            if (!isElementDomNode(node)) {
+              return false;
+            }
+
+            const matrixAssetId = node.getAttribute('data-matrix-asset-id');
+            const matrixIdentifier = node.getAttribute('data-matrix-identifier');
+            const matrixDomain = node.getAttribute('data-matrix-domain');
+
+            if (!matrixAssetId || !matrixIdentifier || !matrixDomain) {
+              return false;
+            }
+
+            return {
+              ...extra.parse(node),
+              matrixAssetId,
+              matrixIdentifier,
+              matrixDomain,
+              target: validateTarget(
+                node.getAttribute('target'),
+                this.options.supportedTargets,
+                this.options.defaultTarget,
+              ),
+            };
+          },
+        },
+      ],
+      toDOM: (node) => {
+        const { matrixAssetId, matrixIdentifier, matrixDomain, target, href, ...rest } = omitExtraAttributes(
+          node.attrs,
+          extra,
+        );
+        const rel = 'noopener noreferrer nofollow';
+        const attrs = {
+          ...extra.dom(node),
+          ...rest,
+          rel,
+          href,
+          target: validateTarget(target, this.options.supportedTargets, this.options.defaultTarget),
+          'data-matrix-asset-id': matrixAssetId,
+          'data-matrix-identifier': matrixIdentifier,
+          'data-matrix-domain': matrixDomain,
+        };
+
+        return ['a', attrs, 0];
+      },
+    };
+  }
+
+  @command()
+  updateAssetLink({ text, attrs, range }: UpdateAssetLinkProps): CommandFunction {
+    return this.store.getExtension(CommandsExtension).updateMark({
+      attrs: { ...attrs, href: attrs.url },
+      text,
+      range,
+      mark: this.type,
+      removeMark: !attrs.matrixAssetId,
+    });
+  }
+  @command()
+  removeAssetLink(): CommandFunction {
+    return removeMark({ type: this.type });
+  }
+}

package/src/Extensions/LinkExtension/LinkExtension.spec.ts

@@ -0,0 +1,68 @@
+import { renderWithEditor } from '../../../tests';
+
+describe('AssetLinkExtension', () => {
+  it('Parses HTML content representing an asset link', async () => {
+    const { getJsonContent } = await renderWithEditor(null, {
+      content: `<a href="https://example.org/some-page"
+                  title="Link title"
+                  target="_blank"
+                  rel="this is ignored">
+                  Hello!
+                </a>`,
+    });
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Hello!',
+          marks: [
+            {
+              type: 'link',
+              attrs: {
+                href: 'https://example.org/some-page',
+                title: 'Link title',
+                target: '_blank',
+              },
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it('Outputs expected HTML', async () => {
+    const { getHtmlContent } = await renderWithEditor(null, {
+      content: {
+        type: 'paragraph',
+        content: [
+          {
+            type: 'text',
+            text: 'Hello!',
+            marks: [
+              {
+                type: 'link',
+                attrs: {
+                  href: 'https://example.org/some-page',
+                  title: 'Link title',
+                  target: '_blank',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    });
+
+    expect(getHtmlContent()).toEqual(
+      '<a href="https://example.org/some-page" ' +
+        'title="Link title" ' +
+        'rel="noopener noreferrer nofollow" ' +
+        'target="_blank">' +
+        'Hello!' +
+        '</a>',
+    );
+  });
+});

package/src/Extensions/LinkExtension/LinkExtension.ts

@@ -0,0 +1,105 @@
+import {
+  ApplySchemaAttributes,
+  ExtensionPriority,
+  FromToProps,
+  isElementDomNode,
+  MarkExtensionSpec,
+  MarkSpecOverride,
+} from 'remirror';
+import { command, CommandFunction, extension, MarkExtension, omitExtraAttributes, removeMark } from '@remirror/core';
+import { LinkTarget, validateTarget } from './common';
+import { CommandsExtension } from '../CommandsExtension/CommandsExtension';
+import { MarkName } from '../Extensions';
+
+export type LinkAttributes = {
+  href: string;
+  title?: string;
+  target: LinkTarget;
+};
+
+export type LinkOptions = {
+  defaultTarget?: LinkTarget;
+  supportedTargets?: LinkTarget[];
+};
+
+export type UpdateLinkProps = {
+  text: string;
+  attrs: Partial<LinkAttributes>;
+  range: FromToProps;
+};
+
+@extension<LinkOptions>({
+  defaultOptions: {
+    defaultTarget: LinkTarget.Self,
+    supportedTargets: [LinkTarget.Self, LinkTarget.Blank],
+  },
+  defaultPriority: ExtensionPriority.Medium,
+})
+export class LinkExtension extends MarkExtension<LinkOptions> {
+  get name(): string {
+    return MarkName.Link;
+  }
+
+  createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec {
+    return {
+      inclusive: false,
+      excludes: [this.name, MarkName.AssetLink].join(' '),
+      ...override,
+      attrs: {
+        ...extra.defaults(),
+        href: {},
+        title: { default: undefined },
+        target: { default: this.options.defaultTarget },
+      },
+      parseDOM: [
+        {
+          tag: 'a[href]',
+          getAttrs: (node) => {
+            if (!isElementDomNode(node)) {
+              return false;
+            }
+
+            return {
+              ...extra.parse(node),
+              href: node.getAttribute('href'),
+              title: node.getAttribute('title'),
+              target: validateTarget(
+                node.getAttribute('target'),
+                this.options.supportedTargets,
+                this.options.defaultTarget,
+              ),
+            };
+          },
+        },
+      ],
+      toDOM: (node) => {
+        const { target, ...rest } = omitExtraAttributes(node.attrs, extra);
+        const rel = 'noopener noreferrer nofollow';
+        const attrs = {
+          ...extra.dom(node),
+          ...rest,
+          rel,
+          target: validateTarget(target, this.options.supportedTargets, this.options.defaultTarget),
+        };
+
+        return ['a', attrs, 0];
+      },
+    };
+  }
+
+  @command()
+  updateLink({ text, attrs, range }: UpdateLinkProps): CommandFunction {
+    return this.store.getExtension(CommandsExtension).updateMark({
+      attrs,
+      text,
+      range,
+      mark: this.type,
+      removeMark: !attrs.href,
+    });
+  }
+
+  @command()
+  removeLink(): CommandFunction {
+    return removeMark({ type: this.type });
+  }
+}

package/src/Extensions/LinkExtension/common.ts

@@ -0,0 +1,10 @@
+export enum LinkTarget {
+  Self = '_self',
+  Blank = '_blank',
+  Parent = '_parent',
+  Top = '_top',
+}
+
+export const validateTarget = (target: unknown, supportedTargets: LinkTarget[], defaultTarget: LinkTarget) => {
+  return supportedTargets.includes(target as LinkTarget) ? (target as LinkTarget) : defaultTarget;
+};

package/src/Extensions/PreformattedExtension/PreformattedExtension.spec.ts

@@ -0,0 +1,43 @@
+import { renderWithEditor } from '../../../tests';
+
+describe('PreformattedExtension', () => {
+  it('Parses HTML content with preformatted text', async () => {
+    const { getJsonContent } = await renderWithEditor(null, {
+      content: `<pre>This is some preformatted text</pre>`,
+    });
+
+    expect(getJsonContent()).toEqual({
+      type: 'preformatted',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'This is some preformatted text',
+        },
+      ],
+    });
+  });
+
+  it('Outputs expected HTML', async () => {
+    const { getHtmlContent } = await renderWithEditor(null, {
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'preformatted',
+            content: [
+              {
+                type: 'text',
+                text: 'This is some preformatted text',
+              },
+            ],
+          },
+        ],
+      },
+    });
+
+    expect(getHtmlContent()).toBe(
+      '<div class="preformatted"><svg class="material-symbols-rounded">short_text</svg><div class="block-divider"></div><pre data-node-text-align="null" style="text-align:null">This is some preformatted text</pre></div>',
+    );
+  });
+});

package/src/Extensions/PreformattedExtension/PreformattedExtension.ts

@@ -0,0 +1,85 @@
+import {
+  ApplySchemaAttributes,
+  command,
+  CommandFunction,
+  extension,
+  ExtensionTag,
+  NodeExtension,
+  NodeExtensionSpec,
+  NodeSpecOverride,
+  ProsemirrorNode,
+  toggleBlockItem,
+} from '@remirror/core';
+import { NodeViewMethod } from 'remirror';
+
+@extension({})
+export class PreformattedExtension extends NodeExtension {
+  get name() {
+    return 'preformatted' as const;
+  }
+
+  createTags() {
+    return [ExtensionTag.Block, ExtensionTag.TextBlock, ExtensionTag.FormattingNode];
+  }
+
+  createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec {
+    return {
+      content: 'inline*',
+      defining: true,
+      draggable: false,
+      ...override,
+      attrs: {
+        ...extra.defaults(),
+      },
+      parseDOM: [
+        {
+          tag: 'pre',
+        },
+      ],
+      toDOM: (node: ProsemirrorNode) => {
+        return ['pre', extra.dom(node), 0];
+      },
+    };
+  }
+
+  createNodeViews(): NodeViewMethod {
+    return (node: ProsemirrorNode) => {
+      const { nodeTextAlignment } = node.attrs;
+
+      // This is the pre container for the code block
+      const dom = document.createElement('div');
+      dom.classList.add(`preformatted`);
+
+      // This is the actual code content in the code block
+      const contentDOM = document.createElement('pre');
+      contentDOM.setAttribute('data-node-text-align', nodeTextAlignment);
+      contentDOM.setAttribute('style', `text-align:${nodeTextAlignment}`);
+
+      // Divider between code block and pre container
+      const dividerElement = document.createElement('div');
+      dividerElement.classList.add('block-divider');
+
+      // The material icon to use
+      const codeIcon = document.createElement('svg');
+      codeIcon.classList.add('material-symbols-rounded');
+      codeIcon.textContent = 'short_text';
+
+      dom.append(codeIcon);
+      dom.append(dividerElement);
+      dom.append(contentDOM);
+
+      return { dom, contentDOM };
+    };
+  }
+
+  /**
+   * Toggle the <pre> for the current block.
+   */
+  @command()
+  togglePreformatted(): CommandFunction {
+    return toggleBlockItem({
+      type: this.type,
+      toggleType: 'paragraph',
+    });
+  }
+}