@squiz/formatted-text-editor 1.21.1-alpha.2 → 1.21.1-alpha.21

package/src/Extensions/LinkExtension/AssetLinkExtension.ts

@@ -0,0 +1,128 @@
+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;
+};
+
+export type AssetLinkOptions = {
+  matrixIdentifier?: string;
+  matrixDomain?: string;
+  defaultTarget?: LinkTarget;
+  supportedTargets?: LinkTarget[];
+};
+
+export type UpdateAssetLinkProps = {
+  text: string;
+  attrs: Partial<AssetLinkAttributes>;
+  range: FromToProps;
+};
+
+@extension<AssetLinkOptions>({
+  defaultOptions: {
+    matrixIdentifier: '',
+    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: 'link',
+      ...override,
+      attrs: {
+        ...extra.defaults(),
+        matrixAssetId: {},
+        matrixIdentifier: { default: this.options.matrixIdentifier },
+        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, ...rest } = omitExtraAttributes(
+          node.attrs,
+          extra,
+        );
+        const rel = 'noopener noreferrer nofollow';
+        const attrs = {
+          ...extra.dom(node),
+          ...rest,
+          rel,
+          // TODO: this won't be acceptable if/when we get to rendering outside of Matrix.
+          href: `/?a=${matrixAssetId}`,
+          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,
+      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

@@ -1,26 +1,68 @@
-import { ApplySchemaAttributes, getMarkRanges, isElementDomNode, MarkExtensionSpec, MarkSpecOverride } from 'remirror';
-import { getTextSelection, getMarkRange, KeyBindingProps } from '@remirror/core';
-import { CommandFunction } from '@remirror/pm';
-import { LinkAttributes as RemirrorLinkAttributes, LinkExtension as RemirrorLinkExtension } from 'remirror/extensions';
+import {
+  ApplySchemaAttributes,
+  ExtensionPriority,
+  FromToProps,
+  isElementDomNode,
+  MarkExtensionSpec,
+  MarkSpecOverride,
+} from 'remirror';
+import {
+  command,
+  CommandFunction,
+  extension,
+  Handler,
+  keyBinding,
+  KeyBindingProps,
+  MarkExtension,
+  NamedShortcut,
+  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 UpdateLinkOptions = LinkAttributes & {
-  text: string;
+export type LinkOptions = {
+  defaultTarget?: LinkTarget;
+  supportedTargets?: LinkTarget[];
+  onShortcut?: Handler<() => void>;
 };
 
-export type LinkAttributes = RemirrorLinkAttributes & {
-  title?: string;
+export type UpdateLinkProps = {
+  text: string;
+  attrs: Partial<LinkAttributes>;
+  range: FromToProps;
 };
 
-export class LinkExtension extends RemirrorLinkExtension {
-  createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec {
-    const spec = super.createMarkSpec(extra, override);
+@extension<LinkOptions>({
+  defaultOptions: {
+    defaultTarget: LinkTarget.Self,
+    supportedTargets: [LinkTarget.Self, LinkTarget.Blank],
+  },
+  handlerKeys: ['onShortcut'],
+  defaultPriority: ExtensionPriority.Medium,
+})
+export class LinkExtension extends MarkExtension<LinkOptions> {
+  get name(): string {
+    return MarkName.Link;
+  }
 
+  createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec {
     return {
-      ...spec,
-      excludes: undefined,
+      inclusive: false,
+      excludes: 'assetLink',
+      ...override,
       attrs: {
-        ...spec.attrs,
+        ...extra.defaults(),
+        href: {},
         title: { default: undefined },
+        target: { default: this.options.defaultTarget },
       },
       parseDOM: [
         {
@@ -32,88 +74,52 @@ export class LinkExtension extends RemirrorLinkExtension {
 
             return {
               ...extra.parse(node),
-              auto: false,
               href: node.getAttribute('href'),
-              target: node.getAttribute('target'),
               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];
+      },
     };
   }
 
-  shortcut({ tr }: KeyBindingProps): boolean {
-    // override parent implementation to allow a link to be inserted without requiring a text selection first.
-    const { from, to, $from } = tr.selection;
-    const mark = getMarkRange($from, this.type);
-    const selectedText = tr.doc.textBetween(from, to);
-
-    this.options.onShortcut({
-      activeLink: mark ? { attrs: mark.mark.attrs as LinkAttributes, from: mark.from, to: mark.to } : undefined,
-      selectedText,
-      from,
-      to,
-    });
+  @keyBinding({ shortcut: NamedShortcut.InsertLink })
+  shortcut(_: KeyBindingProps): boolean {
+    this.options.onShortcut();
 
     return true;
   }
 
-  selectLink(): CommandFunction {
-    // parent implementation selects only the link text, this mimics closer to Google Docs where
-    // the select text is widened to include the link but retains non-link selected text as well.
-    return (props) => {
-      const { tr } = props;
-      const ranges = getMarkRanges(tr.selection, this.type);
-
-      if (ranges.length === 0) {
-        return false;
-      }
-
-      // work out the start position of the first link and end position of the last link in the selection.
-      const from = Math.min(tr.selection.from, ...ranges.map((range) => range.from));
-      const to = Math.max(tr.selection.to, ...ranges.map((range) => range.to));
-
-      // don't need to widen the selection, return early.
-      if (tr.selection.from === from && tr.selection.to === to) {
-        return false;
-      }
-
-      // widen the selection to make sure the full link is included.
-      this.store.commands.selectText.original({ from, to })(props);
-      return true;
-    };
+  @command()
+  updateLink({ text, attrs, range }: UpdateLinkProps): CommandFunction {
+    return this.store.getExtension(CommandsExtension).updateMark({
+      attrs,
+      text,
+      range,
+      mark: this.type,
+      removeMark: !attrs.href,
+    });
   }
 
-  updateLink(options: UpdateLinkOptions): CommandFunction {
-    const { text, ...attrs } = options;
-
-    return (props) => {
-      const { tr, dispatch, view } = props;
-      const range = { from: tr.selection.from, to: tr.selection.to };
-      const selectedText = tr.doc.textBetween(range.from, range.to);
-
-      if (text !== selectedText) {
-        // update the text in the editor if it was updated, update the range to cover the length of the new text.
-        tr.insertText(text);
-        range.to = range.from + text.length;
-      }
-
-      // apply the link, or remove it if no URL was provided.
-      if (attrs.href.length > 0) {
-        tr.addMark(range.from, range.to, this.type.create(attrs));
-      } else {
-        tr.removeMark(range.from, range.to, this.type);
-      }
-
-      // move the cursor to the end of the link and re-focus the editor.
-      tr.setSelection(getTextSelection({ from: range.to, to: range.to }, tr.doc));
-
-      // apply the transaction.
-      dispatch?.(tr);
-      view?.focus();
-
-      return true;
-    };
+  @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/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useExtensionNames';
+export * from './useExpandedSelection';

package/src/hooks/useExpandedSelection.ts

@@ -0,0 +1,44 @@
+import { Selection } from '@remirror/core';
+import { GetMarkRange, getMarkRanges, getTextSelection, Mark, MarkType } from 'remirror';
+import { useEditorState } from '@remirror/react';
+
+export type ExpandedSelection = {
+  selection: Selection;
+  marks: Mark[];
+};
+
+/**
+ * Returns a single range that is either:
+ * 1. The current selection if the current selection does not contain any of the indicated marks.
+ * 2. An expanded version of the current selection if the range contains any of the indicated marks.
+ *
+ * For example, given the content:
+ *
+ * <strong>Bold</strong> regular <u>underline</u> <u>more underline</u>
+ *
+ * If the marks passed in are 'bold' and 'underline' and the text "old regular under" is selected
+ * the returned range will be "Bold regular underline".
+ *
+ * @param {(MarkType|string)[]} markTypes
+ *
+ * @return {ExpandedSelection}
+ */
+export const useExpandedSelection = (markTypes: (MarkType | string)[]): ExpandedSelection => {
+  const { doc, selection } = useEditorState();
+  const ranges: GetMarkRange[] = [];
+
+  markTypes.forEach((markType) => {
+    ranges.push(...getMarkRanges(selection, markType));
+  });
+
+  if (ranges.length === 0) {
+    return { selection, marks: [] };
+  }
+
+  // work out the start position of the first link and end position of the last link in the selection.
+  const from = Math.min(selection.from, ...ranges.map((range) => range.from));
+  const to = Math.max(selection.to, ...ranges.map((range) => range.to));
+  const marks = ranges.map((range) => range.mark);
+
+  return { selection: getTextSelection({ from, to }, doc), marks };
+};

package/src/index.scss

@@ -4,15 +4,15 @@
 @import 'tailwindcss/utilities';
 
 /* Global */
+@import './ui/typography';
 @import './ui/forms';
-@import './ui/buttons';
 
 /* Components */
 @import './Editor/editor';
 @import './EditorToolbar/toolbar';
 @import './EditorToolbar/floating-toolbar';
 
-@import './ui/ToolbarButton/toolbar-button';
+@import './ui/Button/button';
 @import './ui/ToolbarDropdown/toolbar-dropdown';
 @import './ui/ToolbarDropdownButton/toolbar-dropdown-button';
 

package/src/index.ts

@@ -1,3 +1,6 @@
-import FormattedTextEditor from './FormattedTextEditor';
+import Editor from './Editor/Editor';
+import { EditorContext } from './Editor/EditorContext';
+import { remirrorNodeToSquizNode } from './utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode';
+import { squizNodeToRemirrorNode } from './utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode';
 
-export { FormattedTextEditor };
+export { Editor, EditorContext, remirrorNodeToSquizNode, squizNodeToRemirrorNode };

package/src/types.ts

@@ -0,0 +1,5 @@
+export type DeepPartial<T> = T extends Record<string, unknown>
+  ? {
+      [P in keyof T]?: DeepPartial<T[P]>;
+    }
+  : T;

package/src/ui/Button/Button.spec.tsx

@@ -0,0 +1,44 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import Button from './Button';
+import AccessTimeRoundedIcon from '@mui/icons-material/AccessTimeRounded';
+
+describe('Button', () => {
+  const mockOnClick = jest.fn();
+
+  const ButtonComponent = () => {
+    return (
+      <Button
+        handleOnClick={mockOnClick}
+        isDisabled
+        isActive
+        label="Am a button"
+        text="Hello"
+        icon={<AccessTimeRoundedIcon />}
+      />
+    );
+  };
+
+  it('Renders the label, text and icon', () => {
+    render(<ButtonComponent />);
+    const label = screen.getByLabelText('Am a button');
+    expect(label).toBeInTheDocument();
+    const text = screen.getByText('Hello');
+    expect(text).toBeInTheDocument();
+    const icon = screen.getByTestId('AccessTimeRoundedIcon');
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('Renders the button in a disabled state if set to be disabled', () => {
+    render(<ButtonComponent />);
+    const button = screen.getByLabelText('Am a button');
+    expect(button).toBeDisabled();
+  });
+
+  it('Adds the active class is set to be active', () => {
+    render(<ButtonComponent />);
+    const button = screen.getByLabelText('Am a button');
+    expect(button).toHaveClass('squiz-fte-btn--is-active');
+  });
+});

package/src/ui/Button/Button.tsx

@@ -0,0 +1,29 @@
+import React, { ReactElement } from 'react';
+import clsx from 'clsx';
+
+type ButtonProps = {
+  handleOnClick: () => void;
+  isDisabled?: boolean;
+  isActive: boolean;
+  label: string;
+  text?: string;
+  icon?: ReactElement;
+};
+
+const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon }: ButtonProps) => {
+  return (
+    <button
+      aria-label={label}
+      title={label}
+      type="button"
+      onClick={handleOnClick}
+      disabled={isDisabled}
+      className={clsx('squiz-fte-btn', isActive && 'squiz-fte-btn--is-active', icon && ' squiz-fte-btn--is-icon')}
+    >
+      {text && <span>{text}</span>}
+      {icon && icon}
+    </button>
+  );
+};
+
+export default Button;

package/src/ui/{_buttons.scss → Button/_button.scss}

@@ -1,5 +1,5 @@
 .squiz-fte-btn {
-  @apply font-normal rounded ease-linear transition-all duration-150;
+  @apply font-normal rounded ease-linear transition-all bg-white text-gray-600 duration-150;
   display: flex;
   align-items: center;
   text-align: center;
@@ -11,9 +11,27 @@
   border: 1px solid transparent;
   padding: 6px 12px;
 
+  &--is-icon {
+    padding: 6px;
+  }
+
+  ~ .squiz-fte-btn {
+    margin-left: 2px;
+  }
+
   &.disabled,
   &[disabled] {
     cursor: not-allowed;
     @apply opacity-50;
   }
+
+  &:hover,
+  &:focus {
+    background-color: rgba(black, 0.04);
+  }
+
+  &--is-active,
+  &:active {
+    @apply text-blue-300 bg-blue-100;
+  }
 }

package/src/ui/{Inputs/Text/TextInput.spec.tsx → Fields/Input/Input.spec.tsx}

@@ -1,30 +1,30 @@
 import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
-import { TextInput } from './TextInput';
+import { Input } from './Input';
 
-describe('Text input', () => {
+describe('Input', () => {
   const mockOnChange = jest.fn();
 
-  const TextInputComponent = () => {
-    return <TextInput name="text-input" defaultValue="Water" label="Text input" onChange={mockOnChange} />;
+  const InputComponent = () => {
+    return <Input name="text-input" defaultValue="Water" label="Text input" onChange={mockOnChange} />;
   };
 
   it('Renders the label', () => {
-    render(<TextInputComponent />);
+    render(<InputComponent />);
     // Check that the supplied label renders
     const inputLabel = screen.getByLabelText('Text input');
     expect(inputLabel).toBeInTheDocument();
   });
 
   it('Renders the default value', () => {
-    render(<TextInputComponent />);
+    render(<InputComponent />);
     // Check that default value supplied renders
     expect(screen.getByDisplayValue('Water')).toBeInTheDocument();
   });
 
   it('Changes the value when new value entered', () => {
-    render(<TextInputComponent />);
+    render(<InputComponent />);
     const input = screen.getByLabelText('Text input') as HTMLInputElement;
     // Check that default value supplied renders
     expect(input.value).toBe('Water');
@@ -33,7 +33,7 @@ describe('Text input', () => {
   });
 
   it('Fires the change function when new value entered', () => {
-    render(<TextInputComponent />);
+    render(<InputComponent />);
     const input = screen.getByLabelText('Text input') as HTMLInputElement;
     // Check that default value supplied renders
     expect(input.value).toBe('Water');

package/src/ui/Fields/Input/Input.tsx

@@ -0,0 +1,34 @@
+import React, { ForwardedRef, forwardRef, InputHTMLAttributes } from 'react';
+import clsx from 'clsx';
+
+type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+  label?: string;
+  error?: string;
+};
+
+const InputInternal = (
+  { name, label, type = 'text', error, ...rest }: InputProps,
+  ref: ForwardedRef<HTMLInputElement>,
+) => {
+  return (
+    <div className={clsx(error && 'squiz-fte-invalid-form-field')}>
+      {label && (
+        <label htmlFor={name} className="squiz-fte-form-label">
+          {label}
+        </label>
+      )}
+      <input
+        ref={ref}
+        id={name}
+        name={name}
+        type={type}
+        aria-invalid={!!error}
+        className="squiz-fte-form-control"
+        {...rest}
+      />
+      {error && <div className="squiz-fte-form-error">{error}</div>}
+    </div>
+  );
+};
+
+export const Input = forwardRef(InputInternal);