@squiz/formatted-text-editor 2.3.0 → 2.5.0

package/lib/utils/createToolbarPositioner.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createToolbarPositioner = void 0;
+const extensions_1 = require("remirror/extensions");
+const remirror_1 = require("remirror");
+const getCursorRect_1 = require("./getCursorRect");
+/* istanbul ignore next */
+const createToolbarPositioner = ({ types }) => {
+    // Inspired by "createMarkPositioner".
+    // See: https://github.com/remirror/remirror/blob/107cba/packages/remirror__extension-positioner/src/core-positioners.ts#L267
+    return extensions_1.Positioner.create({
+        hasChanged: extensions_1.hasStateChanged,
+        getActive: (props) => {
+            const { state, view } = props;
+            try {
+                const selection = (0, remirror_1.getTextSelection)(state.selection, state.doc);
+                const cursor = { from: view.coordsAtPos(selection.from), to: view.coordsAtPos(selection.to) };
+                const data = {
+                    isSelectionInView: (0, extensions_1.isPositionVisible)((0, getCursorRect_1.getCursorRect)(cursor.from), view.dom) ||
+                        (0, extensions_1.isPositionVisible)((0, getCursorRect_1.getCursorRect)(cursor.to), view.dom),
+                    cursor: cursor,
+                    visible: false,
+                    marks: {},
+                };
+                data.visible = !selection.empty && data.isSelectionInView;
+                types.forEach((type) => {
+                    const markRange = (0, remirror_1.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] : extensions_1.Positioner.EMPTY;
+            }
+            catch {
+                return extensions_1.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 };
+        },
+    });
+};
+exports.createToolbarPositioner = createToolbarPositioner;

package/lib/utils/getCursorRect.d.ts

@@ -0,0 +1,2 @@
+import { Coords } from 'remirror';
+export declare const getCursorRect: (coords: Coords) => DOMRect;

package/lib/utils/getCursorRect.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCursorRect = void 0;
+const getCursorRect = (coords) => {
+    return new DOMRect(coords.left, coords.top, 1, coords.top - coords.bottom);
+};
+exports.getCursorRect = getCursorRect;

package/lib/utils/getMarkNamesByGroup.d.ts

@@ -0,0 +1,2 @@
+import { EditorSchema, ExtensionTagType } from '@remirror/core';
+export declare const getMarkNamesByGroup: (schema: EditorSchema, group: ExtensionTagType) => string[];

package/lib/utils/getMarkNamesByGroup.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMarkNamesByGroup = void 0;
+const getMarkNamesByGroup = (schema, group) => {
+    return Object.values(schema.marks)
+        .filter((mark) => mark.spec.group?.includes(group))
+        .map((mark) => mark.name);
+};
+exports.getMarkNamesByGroup = getMarkNamesByGroup;

package/lib/utils/getNodeNamesByGroup.d.ts

@@ -0,0 +1,2 @@
+import { EditorSchema, ExtensionTagType } from '@remirror/core';
+export declare const getNodeNamesByGroup: (schema: EditorSchema, group: ExtensionTagType) => string[];

package/lib/utils/getNodeNamesByGroup.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNodeNamesByGroup = void 0;
+const getNodeNamesByGroup = (schema, group) => {
+    return Object.values(schema.nodes)
+        .filter((node) => node.spec.group?.includes(group))
+        .map((node) => node.name);
+};
+exports.getNodeNamesByGroup = getNodeNamesByGroup;

package/lib/utils/getShortcutSymbol.d.ts

@@ -0,0 +1 @@
+export declare const getShortcutSymbol: () => string;

package/lib/utils/getShortcutSymbol.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getShortcutSymbol = void 0;
+const getShortcutSymbol = () => {
+    // If we can detect Mac then we return "⌘" otherwise default to "Ctrl"
+    return window.navigator.userAgent.toLowerCase().indexOf('mac') > -1 ? '⌘' : 'Ctrl';
+};
+exports.getShortcutSymbol = getShortcutSymbol;

package/lib/utils/undefinedIfEmpty.d.ts

@@ -0,0 +1 @@
+export declare const undefinedIfEmpty: <T extends object>(object: T) => T | undefined;

package/lib/utils/undefinedIfEmpty.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.undefinedIfEmpty = void 0;
+const undefinedIfEmpty = (object) => {
+    return Object.keys(object).length > 0 ? object : undefined;
+};
+exports.undefinedIfEmpty = undefinedIfEmpty;

package/lib/utils/validation.d.ts

@@ -0,0 +1,3 @@
+export declare const noEmptySpacesValidation: (value: string | undefined) => "Empty space is not allowed" | undefined;
+export declare const hasProperties: <T>(message: string, properties: (keyof T)[]) => (value: T) => string | undefined;
+export declare const regexDataURI: RegExp;

package/lib/utils/validation.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.regexDataURI = exports.hasProperties = exports.noEmptySpacesValidation = void 0;
+const noEmptySpacesValidation = (value) => {
+    if (value && !(value.trim().length > 0)) {
+        return 'Empty space is not allowed';
+    }
+};
+exports.noEmptySpacesValidation = noEmptySpacesValidation;
+const hasProperties = (message, properties) => (value) => {
+    if (!value || properties.filter((property) => value[property]).length !== properties.length) {
+        return message;
+    }
+};
+exports.hasProperties = hasProperties;
+exports.regexDataURI = /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*)$/i;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,

package/src/Editor/Editor.spec.tsx

@@ -5,7 +5,12 @@ import { MatrixResourceBrowserPluginProps } from '@squiz/matrix-resource-browser
 import Editor from './Editor';
 import { renderWithEditor, mockResourceBrowserContext } from '../../tests';
 import ImageButton from '../EditorToolbar/Tools/Image/ImageButton';
-import * as useFocus from '../hooks/useFocus';
+import * as hooks from '../hooks';
+
+jest.mock('../hooks', () => ({
+  __esModule: true,
+  ...jest.requireActual('../hooks'),
+}));
 
 const handleFocusMock = jest.fn();
 const handleBlurMock = jest.fn();
@@ -341,11 +346,10 @@ describe('Formatted text editor', () => {
   });
 
   it('triggers handleFocus when editor is focused', async () => {
-    jest.spyOn(useFocus, 'default').mockReturnValue({
-      isVisible: false,
+    jest.spyOn(hooks, 'useFocus').mockReturnValue({
+      isFocused: false,
       handleFocus: handleFocusMock,
       handleBlur: handleBlurMock,
-      wrapperRef: { current: null },
     });
 
     const { getByLabelText } = render(<Editor />);
@@ -358,11 +362,10 @@ describe('Formatted text editor', () => {
   });
 
   it('triggers handleBlur when editor is blurred', () => {
-    jest.spyOn(useFocus, 'default').mockReturnValue({
-      isVisible: false,
+    jest.spyOn(hooks, 'useFocus').mockReturnValue({
+      isFocused: false,
       handleFocus: handleFocusMock,
       handleBlur: handleBlurMock,
-      wrapperRef: { current: null },
     });
 
     const { getByLabelText } = render(<Editor />);
@@ -375,11 +378,10 @@ describe('Formatted text editor', () => {
   });
 
   it('should apply hide class when focus hook returns false', () => {
-    jest.spyOn(useFocus, 'default').mockReturnValue({
-      isVisible: true,
+    jest.spyOn(hooks, 'useFocus').mockReturnValue({
+      isFocused: true,
       handleFocus: handleFocusMock,
       handleBlur: handleBlurMock,
-      wrapperRef: { current: null },
     });
 
     const { container } = render(<Editor />);
@@ -462,4 +464,27 @@ describe('Formatted text editor', () => {
     expect(within(document.body).getByRole('button', { name: 'Link (Ctrl+K)', hidden: true })).toBeInTheDocument();
     expect(document.querySelector('.show-toolbar')).toBeInTheDocument();
   });
+
+  it('Renders the input and toolbar in container elements if provided', () => {
+    const toolbar = document.createElement('div');
+    const input = document.createElement('div');
+    document.body.append(toolbar, input);
+
+    const { container, unmount } = render(<Editor containers={{ toolbar, input }} />);
+
+    // Toolbar and input should be rendered in the provided containers.
+    expect(within(input).getByRole('textbox')).toBeInTheDocument();
+    expect(within(toolbar).getByRole('button', { name: 'Bold (Ctrl+B)' })).toBeInTheDocument();
+
+    // They should not be rendered inside of the editor element.
+    expect(within(container).queryByRole('textbox')).not.toBeInTheDocument();
+    expect(within(container).queryByRole('button', { name: 'Bold (Ctrl+B)' })).not.toBeInTheDocument();
+    expect(container.querySelector('.squiz-fte-scope__editor--empty')).toBeInTheDocument();
+
+    unmount();
+
+    // Toolbar and input should be removed on unmount.
+    expect(within(input).queryByRole('textbox')).not.toBeInTheDocument();
+    expect(within(toolbar).queryByRole('button', { name: 'Bold (Ctrl+B)' })).not.toBeInTheDocument();
+  });
 });

package/src/Editor/Editor.tsx

@@ -1,61 +1,49 @@
-import React, { useContext, useCallback, ReactNode, useEffect } from 'react';
-import { EditorComponent, Remirror, useRemirror, useEditorEvent } from '@remirror/react';
+import React, { useContext, useCallback, ReactNode, useEffect, useRef } from 'react';
+import { Remirror, useRemirror } from '@remirror/react';
 import { RemirrorContentType, RemirrorEventListener, Extension } from '@remirror/core';
-import { ClipboardEventHandler } from '@remirror/extension-events/dist-types/events-extension';
 import clsx from 'clsx';
 import { Toolbar, FloatingToolbar } from '../EditorToolbar';
 import { EditorContext } from './EditorContext';
 import { createExtensions } from '../Extensions/Extensions';
-import useFocus from '../hooks/useFocus';
+import { useFocus } from '../hooks';
 import { TableComponents } from '@remirror/extension-react-tables';
+import { EditorInput } from '../ui/EditorInput/EditorInput';
 
 type EditorProps = {
+  attributes?: Record<string, string>;
+  border?: boolean;
+  children?: ReactNode;
   className?: string;
+  containers?: {
+    input?: Element | null;
+    toolbar?: Element | null;
+  };
   content?: RemirrorContentType;
-  onChange?: RemirrorEventListener<Extension>;
   editable?: boolean;
-  border?: boolean;
-  children?: ReactNode;
+  enableDecorations?: boolean;
+  enableTableTool?: boolean;
   isFocused?: boolean;
   label?: string;
-  attributes?: Record<string, string>;
-  enableTableTool?: boolean;
-};
-
-const WrappedEditor = () => {
-  const preventImagePaste = useCallback((event) => {
-    const { clipboardData } = event;
-    const pastedData = clipboardData?.files[0];
-    if (
-      pastedData?.type &&
-      pastedData?.type.startsWith('image/') &&
-      // Still allow paste of any text that came through (Word, etc)
-      !clipboardData?.types.includes('text/plain')
-    ) {
-      event.preventDefault();
-    }
-
-    // Allow other paste event handlers to be run.
-    return false;
-  }, []) as ClipboardEventHandler;
-
-  useEditorEvent('paste', preventImagePaste);
-  return <EditorComponent />;
+  onChange?: RemirrorEventListener<Extension>;
 };
 
 const Editor = ({
-  content,
-  className,
+  attributes,
   border = true,
-  editable = true,
-  onChange,
   children,
-  isFocused,
-  attributes,
+  className,
+  containers,
+  content,
+  editable = true,
+  enableDecorations = true,
   enableTableTool = false,
+  isFocused: isInitiallyFocused = false,
+  label = 'Text editor',
+  onChange,
 }: EditorProps) => {
+  const isEmpty = containers?.toolbar && containers.input && !children;
   const { manager, state, setState } = useRemirror({
-    extensions: createExtensions(useContext(EditorContext)),
+    extensions: createExtensions(useContext(EditorContext), enableDecorations),
     content,
     selection: 'start',
     stringHandler: 'html',
@@ -66,11 +54,24 @@ const Editor = ({
     onChange?.(parameter);
   };
 
-  const { isVisible, handleFocus, handleBlur, wrapperRef } = useFocus(isFocused || false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const { isFocused, handleFocus, handleBlur } = useFocus(
+    isInitiallyFocused,
+    useCallback(
+      (element: Node) => {
+        return Boolean(
+          wrapperRef.current?.contains(element) ||
+            containers?.input?.contains(element) ||
+            containers?.toolbar?.contains(element),
+        );
+      },
+      [containers?.input, containers?.toolbar],
+    ),
+  );
 
   // On initial load, check if we need to focus the actual text content
   useEffect(() => {
-    if (isFocused) {
+    if (isInitiallyFocused) {
       manager.view.dom.focus();
     }
 
@@ -85,13 +86,14 @@ const Editor = ({
   return (
     <div
       ref={wrapperRef}
-      onBlur={handleBlur}
+      onBlurCapture={handleBlur}
       onFocusCapture={handleFocus}
       className={clsx(
         'squiz-fte-scope',
         'squiz-fte-scope__editor',
         !editable && 'squiz-fte-scope__editor--is-disabled',
         border && 'squiz-fte-scope__editor--bordered',
+        isEmpty && 'squiz-fte-scope__editor--empty',
         className,
       )}
     >
@@ -101,14 +103,16 @@ const Editor = ({
         editable={editable}
         onChange={handleChange}
         placeholder="Write something"
-        label="Text editor"
+        label={label}
         attributes={attributes}
       >
-        {editable && <Toolbar isVisible={isVisible} enableTableTool={enableTableTool} />}
+        {editable && (
+          <Toolbar isVisible={isFocused} enableTableTool={enableTableTool} container={containers?.toolbar} />
+        )}
         {children && <div className="squiz-fte-scope__editor__children">{children}</div>}
-        <WrappedEditor />
+        <EditorInput container={containers?.input} />
         {enableTableTool && <TableComponents enableTableCellMenu={false} />}
-        {editable && isVisible && <FloatingToolbar />}
+        {editable && isFocused && <FloatingToolbar />}
       </Remirror>
     </div>
   );

package/src/Editor/_editor.scss

@@ -42,6 +42,10 @@
     @apply border-2 border-solid;
   }
 
+  &--empty {
+    @apply w-0 h-0 border-0;
+  }
+
   &--is-disabled {
     @apply bg-gray-50 border-0 cursor-not-allowed;
 

package/src/EditorToolbar/Toolbar.tsx

@@ -17,17 +17,19 @@ import HorizontalLineButton from './Tools/HorizontalLine/HorizontalLineButton';
 import TableButton from './Tools/Table/TableButton';
 import ContentToolsDropdown from './Tools/ContentTools/ContentToolsDropdown';
 import { useExtensionNames } from '../hooks';
+import { createPortal } from 'react-dom';
 
 type ToolbarProps = {
   isVisible: boolean;
   enableTableTool: boolean;
+  container?: Element | null;
 };
-export const Toolbar = ({ isVisible, enableTableTool }: ToolbarProps) => {
-  const extensionNames = useExtensionNames();
 
-  return (
+export const Toolbar = ({ isVisible, enableTableTool, container }: ToolbarProps) => {
+  const extensionNames = useExtensionNames();
+  const toolbar = (
     <RemirrorToolbar
-      className={clsx('editor-toolbar header-toolbar', isVisible && 'show-toolbar')}
+      className={clsx('editor-toolbar header-toolbar', isVisible && 'show-toolbar', container && 'fte-portal-toolbar')}
       role="toolbar"
       tabIndex={0}
     >
@@ -59,4 +61,6 @@ export const Toolbar = ({ isVisible, enableTableTool }: ToolbarProps) => {
       </div>
     </RemirrorToolbar>
   );
+
+  return container ? createPortal(toolbar, container) : toolbar;
 };

package/src/EditorToolbar/Tools/Image/Form/ImageForm.tsx

@@ -105,12 +105,10 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
       setViewType(value as ViewTypes);
       // If its the URL field type we know what the imageType should be
       if (value === ViewTypes.URL) {
-        console.log(`handleChangeViewType: ${value} NodeName.Image`);
         setValue('imageType', NodeName.Image);
       } else {
         // Need a value here and this is the assumed default elsewhere
         // Will be set again later once Resource Browser returns a resource value
-        console.log(`handleChangeViewType: ${value} NodeName.AssetImage`);
         setValue('imageType', NodeName.AssetImage);
       }
     },
@@ -231,7 +229,6 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
                 allowedTypes={['image']}
                 value={value}
                 onChange={(value: { target: { value: any } }) => {
-                  console.log(`onChange: ${value}`);
                   setValue('imageType', value.target.value.nodeType);
                   onChange(value);
                 }}

package/src/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { useCommands, useActive } from '@remirror/react';
-import { ExtendedCodeBlockExtension } from '../../../../Extensions/CodeBlockExtension/CodeBlockExtension';
+import { CodeBlockExtension } from '../../../../Extensions/CodeBlockExtension/CodeBlockExtension';
 import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
 import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
 
 const CodeBlockButton = () => {
-  const { toggleCodeBlock } = useCommands<ExtendedCodeBlockExtension>();
+  const { toggleCodeBlock } = useCommands<CodeBlockExtension>();
 
-  const active = useActive<ExtendedCodeBlockExtension>();
+  const active = useActive<CodeBlockExtension>();
   const enabled = toggleCodeBlock.enabled();
 
   const handleSelect = () => {

package/src/EditorToolbar/_toolbar.scss

@@ -30,11 +30,12 @@
 }
 
 .header-toolbar {
+  opacity: 0;
+  max-height: 0;
+  // TODO: PLATFORM-1611 animation looks strange when the toolbar is rendered in an arbitrary location.
   transition-duration: 0.3s;
   transition-property: max-height, opacity;
   transition-timing-function: ease-out;
-  opacity: 0;
-  max-height: 0;
 
   &.show-toolbar {
     opacity: 1;

package/src/Extensions/CodeBlockExtension/CodeBlockExtension.props.ts

@@ -0,0 +1,3 @@
+export type ExtendedCodeBlockExtensionProps = {
+  enableDecorations: boolean;
+};

package/src/Extensions/CodeBlockExtension/CodeBlockExtension.spec.ts

@@ -0,0 +1,59 @@
+import { renderWithEditor } from '../../../tests';
+
+describe('CodeBlockExtension', () => {
+  it('Parses a <code> HTML tag', async () => {
+    // This is the structure <code> "blocks" are persisted as.
+    // When displaying without decorations this is how a code "block" will also
+    // be rendered.
+    const { getJsonContent } = await renderWithEditor(null, {
+      content: `<code>Code block content</code.`,
+    });
+
+    expect(getJsonContent()).toEqual({
+      type: 'codeBlock',
+      content: [
+        {
+          type: 'text',
+          text: 'Code block content',
+        },
+      ],
+    });
+  });
+
+  it('Parses a <code> HTML tag wrapped in a <pre> tag', async () => {
+    // This is the structure <code> blocks are rendered as in the editor
+    // when decorations are enabled. Supporting parsing this format
+    // allows copy-pasting it between editor instances.
+    const { getJsonContent } = await renderWithEditor(null, {
+      content: `<pre><code>Code block content</code></code.`,
+    });
+
+    expect(getJsonContent()).toEqual({
+      type: 'codeBlock',
+      content: [
+        {
+          type: 'text',
+          text: 'Code block content',
+        },
+      ],
+    });
+  });
+
+  it('Does not parse a non-<code> HTML tag wrapped in a <pre> tag', async () => {
+    const { getJsonContent } = await renderWithEditor(null, {
+      content: `<pre><p>This is an un-expected node structure.</p></code>`,
+    });
+
+    expect(getJsonContent()).toEqual({
+      // parsed by the PreformattedExtension, not the CodeBlockExtension.
+      type: 'preformatted',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'This is an un-expected node structure.',
+        },
+      ],
+    });
+  });
+});