@squiz/formatted-text-editor 1.21.1-alpha.7 → 1.22.0

package/src/Extensions/LinkExtension/LinkExtension.ts

@@ -1,26 +1,55 @@
-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, 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 UpdateLinkOptions = LinkAttributes & {
-  text: string;
+export type LinkOptions = {
+  defaultTarget?: LinkTarget;
+  supportedTargets?: LinkTarget[];
 };
 
-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],
+  },
+  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: MarkName.AssetLink,
+      ...override,
       attrs: {
-        ...spec.attrs,
+        ...extra.defaults(),
+        href: {},
         title: { default: undefined },
+        target: { default: this.options.defaultTarget },
       },
       parseDOM: [
         {
@@ -32,88 +61,45 @@ 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,
+  @command()
+  updateLink({ text, attrs, range }: UpdateLinkProps): CommandFunction {
+    return this.store.getExtension(CommandsExtension).updateMark({
+      attrs,
+      text,
+      range,
+      mark: this.type,
+      removeMark: !attrs.href,
     });
-
-    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;
-    };
-  }
-
-  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/Extensions/PreformattedExtension/PreformattedExtension.spec.ts

@@ -0,0 +1,41 @@
+import { renderWithEditor } from '../../../tests';
+
+describe('AssetLinkExtension', () => {
+  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('<pre style="">This is some preformatted text</pre>');
+  });
+});

package/src/Extensions/PreformattedExtension/PreformattedExtension.ts

@@ -30,9 +30,13 @@ export class PreformattedExtension extends NodeExtension {
       attrs: {
         ...extra.defaults(),
       },
-      parseDOM: [...(override.parseDOM ?? [])],
+      parseDOM: [
+        {
+          tag: 'pre',
+        },
+      ],
       toDOM: (node: ProsemirrorNode) => {
-        return [`pre`, extra.dom(node), 0];
+        return ['pre', extra.dom(node), 0];
       },
     };
   }

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.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.tsx

@@ -8,9 +8,10 @@ type ButtonProps = {
   label: string;
   text?: string;
   icon?: ReactElement;
+  className?: string;
 };
 
-const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon }: ButtonProps) => {
+const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon, className }: ButtonProps) => {
   return (
     <button
       aria-label={label}
@@ -18,12 +19,15 @@ const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon }: Butt
       type="button"
       onClick={handleOnClick}
       disabled={isDisabled}
-      className={clsx('squiz-fte-btn', isActive && 'squiz-fte-btn--is-active', icon && ' squiz-fte-btn--is-icon')}
+      className={clsx(
+        'squiz-fte-btn',
+        isActive && 'squiz-fte-btn--is-active',
+        icon && ' squiz-fte-btn--is-icon',
+        className,
+      )}
     >
-      <>
-        {text && <span>{text}</span>}
-        {icon && icon}
-      </>
+      {text && <span>{text}</span>}
+      {icon && icon}
     </button>
   );
 };

package/src/ui/Button/_button.scss

@@ -1,5 +1,5 @@
 .squiz-fte-btn {
-  @apply font-normal rounded ease-linear transition-all bg-white text-gray-600 duration-150;
+  @apply font-bold rounded ease-linear transition-all bg-white text-gray-600 duration-150;
   display: flex;
   align-items: center;
   text-align: center;

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

@@ -7,7 +7,7 @@ describe('Input', () => {
   const mockOnChange = jest.fn();
 
   const InputComponent = () => {
-    return <Input name="text-input" defaultValue="Water" label="Text input" onChange={mockOnChange} />;
+    return <Input name="text-input" defaultValue="Water" label="Text input" onChange={mockOnChange} required />;
   };
 
   it('Renders the label', () => {
@@ -40,4 +40,10 @@ describe('Input', () => {
     fireEvent.change(input, { target: { value: 'Wine' } });
     expect(mockOnChange).toHaveBeenCalled();
   });
+
+  it('If the field is declared required, it is marked as such', () => {
+    render(<InputComponent />);
+    const requiredMarker = screen.getByLabelText('Required field');
+    expect(requiredMarker).toBeInTheDocument();
+  });
 });

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

@@ -1,19 +1,38 @@
 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', ...rest }: InputProps, ref: ForwardedRef<HTMLInputElement>) => {
+const InputInternal = (
+  { name, label, type = 'text', error, required, ...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} className="squiz-fte-form-control" {...rest} />
-    </>
+      {required && (
+        <span className="text-gray-600" aria-label="Required field">
+          *
+        </span>
+      )}
+      <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>
   );
 };
 

package/src/ui/Modal/Modal.spec.tsx

@@ -2,6 +2,8 @@ import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
 import Modal from './Modal';
+import { Select } from '../Fields/Select/Select';
+import { Input } from '../Fields/Input/Input';
 
 describe('Modal', () => {
   const mockOnCancel = jest.fn();
@@ -110,4 +112,17 @@ describe('Modal', () => {
 
     expect(screen.getByLabelText('My input')).toHaveFocus();
   });
+
+  it('Auto-focuses on the first select field on mount', () => {
+    render(
+      <Modal title="Modal title" onCancel={mockOnCancel} onSubmit={mockOnSubmit}>
+        <>
+          <Select label="Dropdown" name="select" options={{}} />
+          <Input label="Input" name="input" />
+        </>
+      </Modal>,
+    );
+
+    expect(screen.getByLabelText('Dropdown')).toHaveFocus();
+  });
 });

package/src/ui/Modal/Modal.tsx

@@ -1,7 +1,8 @@
-import React, { ForwardedRef, forwardRef, ReactElement, useEffect, useMemo } from 'react';
+import React, { ForwardedRef, forwardRef, ReactElement, useEffect, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import { FocusTrap } from '@mui/base';
+import clsx from 'clsx';
 
 export type ModalProps = {
   title: string;
@@ -15,6 +16,7 @@ const Modal = (
   { children, title, onCancel, onSubmit, className }: ModalProps,
   ref: ForwardedRef<HTMLDivElement>,
 ): ReactElement => {
+  const content = useRef<HTMLDivElement>(null);
   const container = useMemo(() => {
     const element = document.createElement('div');
     element.classList.add('squiz-fte-scope');
@@ -37,7 +39,7 @@ const Modal = (
 
   // add/remove the modal container from the DOM and focus on the first input
   useEffect(() => {
-    const firstInput = container.querySelector('input:not([type=hidden])') as HTMLInputElement;
+    const firstInput = content.current?.querySelector('input:not([type=hidden]), button') as HTMLElement;
 
     document.body.appendChild(container);
     firstInput?.focus();
@@ -50,7 +52,7 @@ const Modal = (
   return createPortal(
     <>
       <FocusTrap open>
-        <div ref={ref} className={`squiz-fte-modal-wrapper ${className ? className : ''}`} tabIndex={-1}>
+        <div ref={ref} className={clsx('squiz-fte-modal-wrapper', className)} tabIndex={-1}>
           <div className="w-modal-sm my-6 mx-auto">
             <div className="squiz-fte-modal">
               <div className="squiz-fte-modal-header p-6 pb-2">
@@ -64,7 +66,9 @@ const Modal = (
                   <CloseRoundedIcon />
                 </button>
               </div>
-              <div className="squiz-fte-modal-content">{children}</div>
+              <div className="squiz-fte-modal-content" ref={content}>
+                {children}
+              </div>
               <div className="squiz-fte-modal-footer p-6 pt-3">
                 <button
                   className="squiz-fte-modal-footer__button bg-gray-200 text-gray-700 mr-2 hover:bg-gray-300"

package/src/ui/ToolbarDropdown/_toolbar-dropdown.scss

@@ -1,6 +1,6 @@
 .toolbar-dropdown {
   &__button {
-    @apply flex items-center font-base text-md font-semibold text-gray-600;
+    @apply flex items-center font-base text-md font-semibold text-gray-600 rounded;
     align-self: center;
 
     height: 2rem;

package/src/ui/_forms.scss

@@ -13,4 +13,18 @@
       box-shadow: none;
     }
   }
+  &-invalid-form-field {
+    .squiz-fte-form-control {
+      @apply border-red-300 bg-no-repeat pr-8;
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0ibm9uZSIvPjxnIGNsYXNzPSJjdXJyZW50TGF5ZXIiPjxwYXRoIGQ9Ik00LjQ3IDIxaDE1LjA2YzEuNTQgMCAyLjUtMS42NyAxLjczLTNMMTMuNzMgNC45OWMtLjc3LTEuMzMtMi42OS0xLjMzLTMuNDYgMEwyLjc0IDE4Yy0uNzcgMS4zMy4xOSAzIDEuNzMgM3pNMTIgMTRjLS41NSAwLTEtLjQ1LTEtMXYtMmMwLS41NS40NS0xIDEtMXMxIC40NSAxIDF2MmMwIC41NS0uNDUgMS0xIDF6bTEgNGgtMnYtMmgydjJ6IiBjbGFzcz0ic2VsZWN0ZWQiIGZpbGw9IiNkNzIzMjEiLz48L2c+PC9zdmc+');
+      background-position: top 0.25rem right 0.25rem;
+      background-size: 1.5rem;
+    }
+  }
+  &-form-error {
+    @apply text-red-300;
+    font-size: 13px;
+    line-height: 1.23;
+    padding-top: 0.25rem;
+  }
 }