@squiz/formatted-text-editor 2.4.0 → 2.6.0

package/lib/ui/EditorInput/EditorInput.props.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+export type EditorInputProps = HTMLAttributes<HTMLDivElement> & {
+    container?: Element | null;
+};

package/lib/ui/EditorInput/EditorInput.props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.js

@@ -8,9 +8,6 @@ const resolveNodeTag = (node) => {
     if (node.type.name === Extensions_1.NodeName.Text) {
         return 'span';
     }
-    if (node.type.name === Extensions_1.NodeName.CodeBlock) {
-        return 'code';
-    }
     if (node.type.spec?.toDOM) {
         const domNode = node.type.spec.toDOM(node);
         if (domNode instanceof window.Node) {

package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js

@@ -75,12 +75,6 @@ const getNodeAttributes = (node) => {
             title: node.attributes?.title,
         };
     }
-    else if (node.type === 'tag' && node.tag === 'code') {
-        return {
-            language: node.attributes?.language || 'markup',
-            wrap: node.attributes?.wrap || true,
-        };
-    }
     else if (node.type === 'matrix-image') {
         return {
             matrixAssetId: node.matrixAssetId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -25,12 +25,12 @@
     "@mui/icons-material": "5.15.18",
     "@remirror/extension-react-tables": "^2.2.19",
     "@remirror/react": "2.0.35",
-    "@squiz/dam-resource-browser-plugin": "^0.10.0",
+    "@squiz/dam-resource-browser-plugin": "^3.0.3-rc.0",
     "@squiz/dx-json-schema-lib": "^1.74.1",
     "@squiz/dxp-ai-client-react": "^0.2.0",
     "@squiz/dxp-content-tools-modal": "^0.3.2",
-    "@squiz/matrix-resource-browser-plugin": "^2.0.0",
-    "@squiz/resource-browser": "^2.0.0",
+    "@squiz/matrix-resource-browser-plugin": "^3.0.3-rc.0",
+    "@squiz/resource-browser": "^3.0.1-rc.0",
     "@squiz/sds": "^1.0.2",
     "clsx": "2.1.1",
     "react-hook-form": "7.51.4",
@@ -49,6 +49,7 @@
     "autoprefixer": "10.4.13",
     "cypress": "12.5.1",
     "deepmerge": "4.3.0",
+    "esbuild-sass-plugin": "^2.8.0",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.32.2",

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 />);
@@ -439,6 +441,7 @@ describe('Formatted text editor', () => {
         onRequestSources,
         onRequestChildren,
         onRequestResource,
+        onSearchRequest: jest.fn(),
       } as MatrixResourceBrowserPluginProps,
     });
 
@@ -462,4 +465,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.',
+        },
+      ],
+    });
+  });
+});

package/src/Extensions/CodeBlockExtension/CodeBlockExtension.ts

@@ -1,11 +1,76 @@
-import { CodeBlockExtension } from '@remirror/extension-code-block';
-import { NodeViewMethod, ProsemirrorNode } from 'remirror';
+import {
+  ApplySchemaAttributes,
+  command,
+  CommandFunction,
+  extension,
+  ExtensionTag,
+  NodeExtension,
+  NodeExtensionSpec,
+  NodeSpecOverride,
+  ProsemirrorNode,
+  toggleBlockItem,
+} from '@remirror/core';
+import { isElementDomNode, NodeViewMethod } from 'remirror';
 
-export class ExtendedCodeBlockExtension extends CodeBlockExtension {
-  createNodeViews(): NodeViewMethod {
-    return (node: ProsemirrorNode) => {
-      const { language } = node.attrs;
+export type CodeBlockOptions = {
+  enableDecorations?: boolean;
+};
 
+@extension<CodeBlockOptions>({
+  defaultOptions: {
+    enableDecorations: false,
+  },
+})
+export class CodeBlockExtension extends NodeExtension<CodeBlockOptions> {
+  get name() {
+    return 'codeBlock' as const;
+  }
+
+  createTags() {
+    return [ExtensionTag.Block, ExtensionTag.Code];
+  }
+
+  createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec {
+    return {
+      content: 'text*',
+      marks: '',
+      defining: true,
+      isolating: true,
+      draggable: false,
+      ...override,
+      code: true,
+      attrs: {
+        ...extra.defaults(),
+      },
+      parseDOM: [
+        {
+          tag: 'code',
+          preserveWhitespace: 'full',
+        },
+        {
+          tag: 'pre',
+          preserveWhitespace: 'full',
+          getAttrs: (node) => {
+            if (!isElementDomNode(node) || !isElementDomNode(node.querySelector('code'))) {
+              return false;
+            }
+
+            return extra.parse(node);
+          },
+        },
+      ],
+      toDOM: (node: ProsemirrorNode) => {
+        return ['code', extra.dom(node), 0];
+      },
+    };
+  }
+
+  createNodeViews(): NodeViewMethod | Record<string, never> {
+    if (!this.options.enableDecorations) {
+      return {};
+    }
+
+    return () => {
       // This is the pre container for the code block
       const dom = document.createElement('pre');
       dom.setAttribute('spellcheck', 'false');
@@ -13,7 +78,6 @@ export class ExtendedCodeBlockExtension extends CodeBlockExtension {
 
       // This is the actual code content in the code block
       const contentDOM = document.createElement('code');
-      contentDOM.setAttribute('data-code-block-language', language);
 
       // Divider between code block and pre container
       const dividerElement = document.createElement('div');
@@ -31,4 +95,15 @@ export class ExtendedCodeBlockExtension extends CodeBlockExtension {
       return { dom, contentDOM };
     };
   }
+
+  /**
+   * Toggle the <code> for the current block.
+   */
+  @command()
+  toggleCodeBlock(): CommandFunction {
+    return toggleBlockItem({
+      type: this.type,
+      toggleType: 'paragraph',
+    });
+  }
 }

package/src/Extensions/Extensions.ts

@@ -24,7 +24,7 @@ import { CommandsExtension } from './CommandsExtension/CommandsExtension';
 import { EditorContextOptions } from '../Editor/EditorContext';
 import { AssetImageExtension } from './ImageExtension/AssetImageExtension';
 import { DAMImageExtension } from './ImageExtension/DAMImageExtension';
-import { ExtendedCodeBlockExtension } from './CodeBlockExtension/CodeBlockExtension';
+import { CodeBlockExtension } from './CodeBlockExtension/CodeBlockExtension';
 import { ClearFormattingExtension } from './ClearFormattingExtension/ClearFormattingExtension';
 import { UnsupportedNodeExtension } from './UnsuportedExtension/UnsupportedNodeExtension';
 import { FetchUrlExtension } from './FetchUrlExtension/FetchUrlExtension';
@@ -48,7 +48,7 @@ export enum MarkName {
   AssetLink = 'assetLink',
 }
 
-export const createExtensions = (context: EditorContextOptions) => {
+export const createExtensions = (context: EditorContextOptions, enableDecorations: boolean = true) => {
   return (): Extension[] => {
     return [
       new CommandsExtension(),
@@ -59,8 +59,8 @@ export const createExtensions = (context: EditorContextOptions) => {
       new NodeFormattingExtension({ indents: [] }),
       new ParagraphExtension(),
       new HardBreakExtension(),
-      new PreformattedExtension(),
-      new ExtendedCodeBlockExtension({ defaultWrap: true }),
+      new CodeBlockExtension({ enableDecorations }),
+      new PreformattedExtension({ enableDecorations }),
       new UnderlineExtension(),
       new HistoryExtension(),
       new ImageExtension(),

package/src/Extensions/PreformattedExtension/PreformattedExtension.ts

@@ -12,8 +12,16 @@ import {
 } from '@remirror/core';
 import { NodeViewMethod } from 'remirror';
 
-@extension({})
-export class PreformattedExtension extends NodeExtension {
+export type PreformattedExtensionOptions = {
+  enableDecorations?: boolean;
+};
+
+@extension<PreformattedExtensionOptions>({
+  defaultOptions: {
+    enableDecorations: false,
+  },
+})
+export class PreformattedExtension extends NodeExtension<PreformattedExtensionOptions> {
   get name() {
     return 'preformatted' as const;
   }
@@ -42,7 +50,11 @@ export class PreformattedExtension extends NodeExtension {
     };
   }
 
-  createNodeViews(): NodeViewMethod {
+  createNodeViews(): NodeViewMethod | Record<string, never> {
+    if (!this.options.enableDecorations) {
+      return {};
+    }
+
     return (node: ProsemirrorNode) => {
       const { nodeTextAlignment } = node.attrs;
 

package/src/hooks/index.ts

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