@squiz/formatted-text-editor 2.4.0 → 2.5.0

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';

package/src/hooks/useFocus/useFocus.spec.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { useFocus } from './useFocus';
+import { render, renderHook } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+describe('useFocus', () => {
+  beforeEach(() => {
+    jest.useRealTimers();
+    global.requestAnimationFrame = process.nextTick as any;
+  });
+
+  it.each([true, false])('Should set the focus value from initial state - %s', (initialState: boolean) => {
+    const isChildElement = jest.fn();
+    const { result } = renderHook(() => useFocus(initialState, isChildElement));
+
+    expect(result.current.isFocused).toBe(initialState);
+  });
+
+  it('Should update the focused value when an element is focused or blurred', async () => {
+    const isChildElement = jest.fn((element: Element) => !!element.closest('.focus-container'));
+    let lastIsFocused: boolean | undefined = undefined;
+    const Component = () => {
+      const { isFocused, handleFocus, handleBlur } = useFocus(false, isChildElement);
+      lastIsFocused = isFocused;
+
+      return (
+        <>
+          <div className="focus-container" onFocus={handleFocus} onBlur={handleBlur}>
+            <button type="button">Child element</button>
+          </div>
+          <div>
+            <button type="button">Non-child element</button>
+          </div>
+        </>
+      );
+    };
+
+    const { rerender } = render(<Component />);
+
+    await userEvent.click(screen.getByRole('button', { name: 'Child element' }));
+    expect(lastIsFocused).toBe(true);
+
+    await userEvent.click(screen.getByRole('button', { name: 'Non-child element' }));
+    rerender(<Component />);
+    expect(lastIsFocused).toBe(false);
+  });
+});

package/src/hooks/useFocus/useFocus.ts

@@ -0,0 +1,71 @@
+import { useState, useCallback, FocusEvent as ReactFocusEvent, FocusEventHandler } from 'react';
+
+export const useFocus = (
+  initialState: boolean,
+  isChildElement: (element: Element) => boolean,
+): {
+  handleFocus: (event: ReactFocusEvent) => void;
+  handleBlur: FocusEventHandler<HTMLDivElement>;
+  isFocused: boolean;
+} => {
+  const [isFocused, setIsFocused] = useState(initialState);
+  const getFocusedElement = useCallback((): Element | null => {
+    let element = document.activeElement;
+
+    while (element instanceof HTMLIFrameElement) {
+      element = element.contentDocument?.activeElement || null;
+    }
+
+    return element?.parentElement ? element : null;
+  }, []);
+
+  const handleFocus = useCallback((event: ReactFocusEvent) => {
+    // Ignore elements flagged to be ignored, this allows us to add extra, clickable, elements
+    // without triggering a focus, such as action menus.
+    if (!event.target?.classList?.contains('fte-ignore') && !event.target?.closest('.fte-ignore')) {
+      setIsFocused(true);
+    }
+  }, []);
+
+  const handleBlur = useCallback(
+    (event: ReactFocusEvent<Element>) => {
+      // React event bubbling is interesting, it bubbles up the React tree rather than the DOM tree.
+      // The tree deviates when rendering portals (eg. for modals).
+      //
+      // Only hide the toolbar if:
+      // 1. We are blurring a node in the editor **DOM** tree.
+      // 2. We are focusing on something that is not in the editor DOM tree
+      //    (elements in the portal won't be in the tree but don't influence the focus state per #1).
+      //
+      // This avoids the scenario where an element in a portal is blurred and another one in the portal focused.
+      // Without this logic the blur and focus handlers are called (in that order). The impact of these handlers being
+      // called is that the "isFocused" state changes inconsistently. This state changing then causes subtle issues.
+      // eg. unable to drill down in resource browser, toolbar appearing/disappearing.
+      //
+      // Ideally we would instead solely seeing if the "relatedTarget" is in the React tree. This isn't easily
+      // identifiable however without reaching into React internals.
+      //
+      // An assumption here is that anything in a portal will only blur to another element that is also in the portal
+      // (and therefore still in our React tree resulting in the element still effectively being focused).
+      // TODO: PLATFORM-1611 this shit still doesn't work properly, notably issues with the link/image modals.
+      requestAnimationFrame(() => {
+        // "relatedTarget" in the event object will be null if the element gaining focus is in a different
+        // document to the element being blurred (eg. floating toolbar rendered in top level frame,
+        // editor rendered in iframe). instead grab the active element to determine current focus.
+        const isBlurringEditor = isChildElement(event.target);
+        const focusedElement = event.relatedTarget || getFocusedElement();
+        const isFocusedInEditor = focusedElement && isChildElement(focusedElement);
+
+        // Detect if the blur event happens when the related/clicked target is the floating popover
+        const isClickingFloatingToolbar = !!focusedElement?.closest('.squiz-fte-scope__floating-popover');
+
+        if (isBlurringEditor && !isFocusedInEditor && !isClickingFloatingToolbar) {
+          setIsFocused(false);
+        }
+      });
+    },
+    [getFocusedElement, isChildElement],
+  );
+
+  return { handleFocus, handleBlur, isFocused };
+};

package/src/ui/EditorInput/EditorInput.props.ts

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

package/src/ui/EditorInput/EditorInput.spec.tsx

@@ -0,0 +1,38 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import { EditorInput } from './EditorInput';
+import { Remirror, useRemirror } from '@remirror/react';
+import { EditorInputProps } from './EditorInput.props';
+
+describe('EditorInput', () => {
+  const inputLabel = 'Text editor';
+
+  const Component = (props: EditorInputProps) => {
+    const { manager, state } = useRemirror({
+      content: 'Hello world',
+      stringHandler: 'html',
+    });
+
+    return (
+      <Remirror manager={manager} state={state} label={inputLabel}>
+        <EditorInput {...props} />
+      </Remirror>
+    );
+  };
+
+  it('Mounts the input inline if container is not provided', () => {
+    render(<Component />);
+
+    expect(screen.getByRole('textbox', { name: 'Text editor' })).toBeInTheDocument();
+  });
+
+  it('Mounts the input inside the container if provided', () => {
+    const container = document.createElement('div');
+    document.body.append(container);
+
+    render(<Component container={container} />);
+
+    expect(within(container).getByRole('textbox', { name: 'Text editor' })).toBeInTheDocument();
+  });
+});

package/src/ui/EditorInput/EditorInput.tsx

@@ -0,0 +1,30 @@
+import { useEditorEvent, useRemirrorContext } from '@remirror/react';
+import React, { useCallback } from 'react';
+import { ClipboardEventHandler } from '@remirror/extension-events/dist-types/events-extension';
+import { createPortal } from 'react-dom';
+import { EditorInputProps } from './EditorInput.props';
+
+export const EditorInput = ({ container, ...other }: EditorInputProps) => {
+  const { getRootProps } = useRemirrorContext();
+  const { key, ...rootProps } = getRootProps();
+  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;
+  const input = <div key={key} {...rootProps} {...other} />;
+
+  useEditorEvent('paste', preventImagePaste);
+
+  return container ? createPortal(input, container) : input;
+};

package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.spec.ts

@@ -102,9 +102,7 @@ describe('remirrorNodeToSquizNode', () => {
         type: 'tag',
         tag: 'code',
         children: [{ type: 'text', value: 'Hello world' }],
-        attributes: {
-          language: 'js',
-        },
+        attributes: {},
       },
     ];
 

package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.ts

@@ -22,10 +22,6 @@ export const resolveNodeTag = (node: ProsemirrorNode): string => {
     return 'span';
   }
 
-  if (node.type.name === NodeName.CodeBlock) {
-    return 'code';
-  }
-
   if (node.type.spec?.toDOM) {
     const domNode = node.type.spec.toDOM(node);
 

package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.spec.ts

@@ -283,10 +283,7 @@ describe('squizNodeToRemirrorNode', () => {
       content: [
         {
           type: 'codeBlock',
-          attrs: {
-            language: 'markup',
-            wrap: true,
-          },
+          attrs: { nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
           content: [
             {
               type: 'text',

package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts

@@ -85,11 +85,6 @@ const getNodeAttributes = (node: FormattedNodes): Attrs => {
       src: node.attributes?.src,
       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/lib/hooks/useFocus.d.ts

@@ -1,8 +0,0 @@
-import { FocusEvent, FocusEventHandler, RefObject } from 'react';
-declare const useFocus: (initialState: boolean) => {
-    handleFocus: (event: FocusEvent) => void;
-    handleBlur: FocusEventHandler<HTMLDivElement>;
-    isVisible: boolean;
-    wrapperRef: RefObject<HTMLDivElement>;
-};
-export default useFocus;

package/src/hooks/useFocus.ts

@@ -1,61 +0,0 @@
-import { useState, useCallback, FocusEvent, FocusEventHandler, RefObject, createRef } from 'react';
-
-const useFocus = (
-  initialState: boolean,
-): {
-  handleFocus: (event: FocusEvent) => void;
-  handleBlur: FocusEventHandler<HTMLDivElement>;
-  isVisible: boolean;
-  wrapperRef: RefObject<HTMLDivElement>;
-} => {
-  const wrapperRef = createRef<HTMLDivElement>();
-  const [isVisible, setIsVisible] = useState(initialState);
-
-  const handleFocus = useCallback(
-    (event: FocusEvent) => {
-      // Ignore elements flagged to be ignored, this allows us to add extra, clickable, elements
-      // without triggering a focus, such as action menus.
-      if (!event.target?.classList?.contains('fte-ignore') && !event.target?.closest('.fte-ignore')) {
-        setIsVisible(true);
-      }
-    },
-    [wrapperRef],
-  );
-
-  const handleBlur = useCallback(
-    (event: FocusEvent<HTMLDivElement>) => {
-      // React event bubbling is interesting, it bubbles up the React tree rather than the DOM tree.
-      // The tree deviates when rendering portals (eg. for modals).
-      //
-      // Only hide the toolbar if:
-      // 1. We are blurring a node in the editor **DOM** tree.
-      // 2. We are focusing on something that is not in the editor DOM tree
-      //    (elements in the portal won't be in the tree but don't influence the focus state per #1).
-      //
-      // This avoids the scenario where an element in a portal is blurred and another one in the portal focused.
-      // Without this logic the blur and focus handlers are called (in that order). The impact of these handlers being
-      // called is that the "isFocused" state changes inconsistently. This state changing then causes subtle issues.
-      // eg. unable to drill down in resource browser, toolbar appearing/disappearing.
-      //
-      // Ideally we would instead solely seeing if the "relatedTarget" is in the React tree. This isn't easily
-      // identifiable however without reaching into React internals.
-      //
-      // An assumption here is that anything in a portal will only blur to another element that is also in the portal
-      // (and therefore still in our React tree resulting in the element still effectively being focused).
-      const isBlurringEditor = wrapperRef.current?.contains(event.target);
-      const isFocusedInEditor = wrapperRef.current?.contains(event.relatedTarget);
-
-      // Detect if the blur event happens when the related/clicked target is the floating popover
-      const isClickingFloatingToolbar = !!event.relatedTarget?.closest('.squiz-fte-scope__floating-popover');
-
-      if (isBlurringEditor && !isFocusedInEditor && !isClickingFloatingToolbar) {
-        setIsVisible(false);
-      }
-    },
-    [wrapperRef],
-  );
-
-  return { handleFocus, handleBlur, isVisible, wrapperRef };
-};
-
-export default useFocus;