@squiz/formatted-text-editor 1.21.1-alpha.19 → 1.21.1-alpha.20

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

@@ -1,14 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.remirrorNodeToSquizNode = exports.resolveNodeTag = void 0;
-const validNodeTypes_1 = require("../validNodeTypes");
+const undefinedIfEmpty_1 = require("../../undefinedIfEmpty");
 const resolveNodeTag = (node) => {
+    if (node.type.name === 'text') {
+        return 'span';
+    }
     if (node.type.spec?.toDOM) {
         const domNode = node.type.spec.toDOM(node);
         if (domNode instanceof window.Node) {
             return domNode.nodeName.toLowerCase();
         }
-        if (domNode?.dom instanceof window.Node) {
+        if (typeof domNode === 'object' && 'dom' in domNode && domNode.dom instanceof window.Node) {
             return domNode.dom.nodeName.toLowerCase();
         }
         if (domNode instanceof Array) {
@@ -16,7 +19,7 @@ const resolveNodeTag = (node) => {
             return domNode[0].toLowerCase();
         }
     }
-    return null;
+    throw new Error('Unexpected Remirror node encountered, cannot resolve tag.');
 };
 exports.resolveNodeTag = resolveNodeTag;
 const resolveFormattingOptions = (node) => {
@@ -39,122 +42,124 @@ const resolveFontOptions = (node) => {
             case 'underline':
                 fontOptions.underline = true;
                 break;
-            default:
-                // Currently unsupported mark type
-                break;
         }
     });
     return fontOptions;
 };
-const resolveAttributeOptions = (node, nodeType) => {
-    let attributeOptions = {};
-    if (nodeType === 'image') {
-        attributeOptions = { ...node.attrs };
-    }
-    else {
-        node.marks.forEach((mark) => {
-            switch (mark.type.name) {
-                case 'link':
-                    attributeOptions = { ...mark.attrs };
-                    break;
-                default:
-                    // Currently unsupported mark type
-                    break;
-            }
-        });
-    }
-    // Remove any non string elements from attributes, squiz component only accepts strings.
-    Object.keys(attributeOptions).forEach((key) => {
-        if (typeof attributeOptions[key] !== 'string' && typeof attributeOptions[key] !== 'number') {
-            delete attributeOptions[key];
-            // If it's a number we make it a string so its accepted by component service
+const transformAttributes = (attributes) => {
+    const transformed = {};
+    Object.keys(attributes).forEach((key) => {
+        // Component service requires attributes to be a string, cast as needed.
+        if (typeof attributes[key] === 'string' || typeof attributes[key] === 'number') {
+            transformed[key] = String(attributes[key]);
         }
-        else {
-            attributeOptions[key] = String(attributeOptions[key]);
+    });
+    return transformed;
+};
+const transformFragment = (fragment) => {
+    const transformed = [];
+    fragment.forEach((child) => transformed.push(transformNode(child)));
+    return transformed;
+};
+const transformNode = (node) => {
+    const attributes = node.type.name === 'image' ? transformAttributes(node.attrs) : undefined;
+    const formattingOptions = (0, undefinedIfEmpty_1.undefinedIfEmpty)(resolveFormattingOptions(node));
+    const font = (0, undefinedIfEmpty_1.undefinedIfEmpty)(resolveFontOptions(node));
+    let transformedNode = { type: 'text', value: node.text || '' };
+    // Squiz "text" nodes can't have formatting/font options but Remirror "text" nodes can.
+    // If the node has formatting options wrap in a tag.
+    // If the node isn't a text type assume it is a tag type and wrap in a tag.
+    // If we pick the wrong tag here it will be corrected later as part of looping through the
+    // non-font marks.
+    if (node.type.name !== 'text' || attributes || formattingOptions || font) {
+        transformedNode = {
+            type: 'tag',
+            tag: (0, exports.resolveNodeTag)(node),
+            children: node.type.name === 'text' ? [transformedNode] : transformFragment(node.content),
+            attributes,
+            formattingOptions,
+            font,
+        };
+    }
+    node.marks.forEach((mark) => {
+        switch (mark.type.name) {
+            case 'bold':
+            case 'italic':
+            case 'underline':
+                break;
+            default:
+                transformedNode = transformMark(mark, transformedNode);
         }
     });
-    return attributeOptions;
+    return transformedNode;
+};
+/**
+ * Merges 2 nodes together if they are compatible without losing any important details.
+ * Otherwise will wrap the node.
+ *
+ * @param {FormattedNode} node
+ * @param {FormattedNodeWithChildren} wrappingNode
+ *
+ * @return {FormattedNode}
+ */
+const wrapNodeIfNeeded = (node, wrappingNode) => {
+    if (node.type === 'tag' && wrappingNode.type === 'tag' && (node.tag === 'span' || node.tag === wrappingNode.tag)) {
+        // if the node we are wrapping with is a DOM node, and the node being wrapped is
+        // a plain looking DOM node merge the 2 nodes.
+        return {
+            ...node,
+            ...wrappingNode,
+            formattingOptions: (0, undefinedIfEmpty_1.undefinedIfEmpty)({
+                ...node.formattingOptions,
+                ...wrappingNode.formattingOptions,
+            }),
+            attributes: (0, undefinedIfEmpty_1.undefinedIfEmpty)({
+                ...node.attributes,
+                ...wrappingNode.attributes,
+            }),
+            font: (0, undefinedIfEmpty_1.undefinedIfEmpty)({
+                ...node.font,
+                ...wrappingNode.font,
+            }),
+            children: [...node.children, ...wrappingNode.children],
+        };
+    }
+    // if the node we are wrapping or the wrapping nodes are not compatible merge them.
+    return {
+        ...wrappingNode,
+        children: [node, ...wrappingNode.children],
+    };
+};
+const transformMark = (mark, node) => {
+    switch (mark.type.name) {
+        case 'link':
+            return wrapNodeIfNeeded(node, {
+                type: 'tag',
+                tag: 'a',
+                attributes: transformAttributes(mark.attrs),
+                children: [],
+            });
+        case 'assetLink':
+            return wrapNodeIfNeeded(node, {
+                type: 'link-to-matrix-asset',
+                target: mark.attrs.target,
+                matrixIdentifier: mark.attrs.matrixIdentifier,
+                matrixDomain: mark.attrs.matrixDomain,
+                matrixAssetId: mark.attrs.matrixAssetId,
+                children: [],
+            });
+    }
+    throw new Error(`Unsupported mark "${mark.type.name}" was applied to node.`);
 };
 /**
  * Converts Remirror node JSON structure to Squiz component JSON structure.
  * @param {ProsemirrorNode} node Remirror node to convert to component.
- * @export
  * @returns {FormattedText} The converted Squiz component JSON.
  */
 const remirrorNodeToSquizNode = (node) => {
-    if (!(0, validNodeTypes_1.validRemirrorNode)(node))
-        return [];
-    const nodeType = node.type.name;
-    let nodeTag = (0, exports.resolveNodeTag)(node);
-    // Filter out any children nodes that aren't currently supported.
-    const children = (node.content.content || []).map((child) => (0, exports.remirrorNodeToSquizNode)(child));
-    let transformed = {
-        children,
-        formattingOptions: resolveFormattingOptions(node),
-        attributes: resolveAttributeOptions(node, nodeType),
-        font: resolveFontOptions(node),
-    };
-    if (nodeType === 'doc') {
-        return transformed.children;
-    }
-    // If we don't have a node tag yet, check if there is one needed
-    if (!nodeTag) {
-        node.marks.forEach((mark) => {
-            switch (mark.type.name) {
-                case 'link':
-                    nodeTag = 'a';
-                    break;
-                default:
-                    // Currently unsupported mark type
-                    break;
-            }
-        });
-    }
-    if (nodeTag) {
-        transformed = {
-            ...transformed,
-            type: 'tag',
-            tag: nodeTag,
-        };
-    }
-    if ((Object.keys(transformed.font).length > 0 || Object.keys(transformed.attributes).length > 0) &&
-        !transformed.type) {
-        // Wrap in span so we can apply formatting to it
-        transformed = { ...transformed, tag: 'span', type: 'tag' };
-    }
-    if (nodeType === 'text') {
-        if (transformed.type) {
-            // If we have a tag already nest the text beneath it so we can preserve formatting options, etc.
-            transformed = {
-                ...transformed,
-                children: [
-                    {
-                        type: 'text',
-                        value: node.text,
-                    },
-                ],
-            };
-        }
-        else {
-            // If we don't have a tag just rewrite the transformed value to be the text.
-            transformed = {
-                type: 'text',
-                value: node.text,
-            };
-        }
-    }
-    // Remove empty formatting options from transformed object.
-    if (transformed.formattingOptions && Object.keys(transformed.formattingOptions).length === 0) {
-        delete transformed.formattingOptions;
-    }
-    // Remove empty font options from transformed object.
-    if (transformed.font && Object.keys(transformed.font).length === 0) {
-        delete transformed.font;
+    if (node?.type?.name !== 'doc') {
+        throw new Error('Unable to convert from Remirror to Node data structure, unexpected node provided.');
     }
-    // Remove empty attributes options from transformed object.
-    if (transformed.attributes && Object.keys(transformed.attributes).length === 0) {
-        delete transformed.attributes;
-    }
-    return transformed;
+    return transformFragment(node.content);
 };
 exports.remirrorNodeToSquizNode = remirrorNodeToSquizNode;

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

@@ -1,8 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.squizNodeToRemirrorNode = void 0;
+const undefinedIfEmpty_1 = require("../../undefinedIfEmpty");
 const getNodeType = (node) => {
-    const nodeTypeMap = {
+    const typeMap = {
+        'link-to-matrix-asset': 'text',
+        text: 'text',
+    };
+    const tagMap = {
         h1: 'heading',
         h2: 'heading',
         h3: 'heading',
@@ -12,83 +17,98 @@ const getNodeType = (node) => {
         img: 'image',
         pre: 'preformatted',
         p: 'paragraph',
-        text: 'paragraph',
+        a: 'text',
+        span: 'text',
     };
-    const nodeType = nodeTypeMap[node.tag || node.type];
+    if (typeMap[node.type]) {
+        return typeMap[node.type];
+    }
+    if (node.type === 'tag' && tagMap[node.tag]) {
+        return tagMap[node.tag];
+    }
     // Unsupported node type
-    if (!nodeType)
-        throw new Error(`Unsupported node type provided: ${node.tag}`);
-    return nodeType;
+    throw new Error(node.type === 'tag'
+        ? `Unsupported node type provided: ${node.type} (tag: ${node.tag})`
+        : `Unsupported node type provided: ${node.type}`);
 };
 const getNodeAttributes = (node) => {
-    const { alignment } = node.formattingOptions || {};
-    return {
-        nodeIndent: null,
-        nodeTextAlignment: alignment ?? null,
-        nodeLineHeight: null,
-        style: '',
-        level: node.tag?.startsWith('h') ? parseInt(node.tag.substring(1)) : undefined,
-    };
-};
-const resolveChild = (child) => {
-    if (child.type === 'text') {
-        return { type: 'text', text: child.value };
+    if (node.type === 'tag' && node.tag === 'img') {
+        return {
+            alt: node.attributes?.alt,
+            height: node.attributes?.height,
+            width: node.attributes?.width,
+            src: node.attributes?.src,
+            title: node.attributes?.title,
+        };
     }
-    let text = '';
+    else if (node.type === 'tag') {
+        return {
+            nodeIndent: null,
+            nodeTextAlignment: node.formattingOptions?.alignment || null,
+            nodeLineHeight: null,
+            style: '',
+            level: node.tag?.startsWith('h') ? parseInt(node.tag.substring(1)) : undefined,
+        };
+    }
+    return {};
+};
+const getNodeMarks = (node) => {
     const marks = [];
-    if (child.type === 'tag') {
-        // Handle link type
-        if (child.tag === 'a') {
-            marks.push({
-                type: 'link',
-                attrs: {
-                    href: child.attributes?.href,
-                    target: child.attributes?.target ?? null,
-                    auto: false,
-                    title: child.attributes?.title ?? null,
-                },
-            });
-        }
-        // Handle image type
-        if (child.tag === 'img') {
+    if (node.type === 'tag' && node.tag === 'a') {
+        marks.push({
+            type: 'link',
+            attrs: {
+                href: node.attributes?.href,
+                target: node.attributes?.target ?? null,
+                auto: false,
+                title: node.attributes?.title ?? null,
+            },
+        });
+    }
+    else if (node.type === 'link-to-matrix-asset') {
+        marks.push({
+            type: 'assetLink',
+            attrs: {
+                matrixAssetId: node.matrixAssetId,
+                matrixDomain: node.matrixDomain,
+                matrixIdentifier: node.matrixIdentifier,
+                target: node.target,
+            },
+        });
+    }
+    // Handle font formatting
+    if ('font' in node) {
+        node.font?.bold && marks.push({ type: 'bold' });
+        node.font?.italics && marks.push({ type: 'italic' });
+        node.font?.underline && marks.push({ type: 'underline' });
+    }
+    return marks;
+};
+const unwrapNodeIfNeeded = (node) => {
+    if (node.type === 'text' && node.content?.length) {
+        return node.content.map((child) => {
             return {
-                type: 'image',
-                attrs: {
-                    alt: child.attributes?.alt,
-                    height: child.attributes?.height,
-                    width: child.attributes?.width,
-                    src: child.attributes?.src,
-                    title: child.attributes?.title,
-                },
+                ...child,
+                marks: [...(child.marks || []), ...(node.marks || [])],
             };
-        }
-        // Handle font formatting
-        child.font?.bold && marks.push({ type: 'bold' });
-        child.font?.italics && marks.push({ type: 'italic' });
-        child.font?.underline && marks.push({ type: 'underline' });
-        // For now all children types should be "text"
-        text = child.children[0].type === 'text' ? child.children[0].value : '';
+        });
     }
-    return { type: 'text', marks, text };
+    return [node];
 };
 const formatNode = (node) => {
-    let content;
-    if (node.type === 'tag') {
-        content = node.children.length ? node.children.map((child) => resolveChild(child)) : undefined;
+    const children = [];
+    if ('children' in node) {
+        node.children.forEach((child) => {
+            children.push(...formatNode(child));
+        });
     }
-    if (node.type === 'text') {
-        content = [
-            {
-                type: 'text',
-                text: node.value,
-            },
-        ];
-    }
-    return {
+    return unwrapNodeIfNeeded({
         type: getNodeType(node),
-        attrs: getNodeAttributes(node),
-        content,
-    };
+        attrs: (0, undefinedIfEmpty_1.undefinedIfEmpty)(getNodeAttributes(node)),
+        marks: (0, undefinedIfEmpty_1.undefinedIfEmpty)(getNodeMarks(node)),
+        text: node.type === 'text' ? node.value : undefined,
+        content: (0, undefinedIfEmpty_1.undefinedIfEmpty)(children),
+    });
 };
 /**
  * Converts Squiz component JSON structure to Remirror node JSON structure.
@@ -97,9 +117,13 @@ const formatNode = (node) => {
  * @returns {RemirrorJSON} The converted Remirror JSON.
  */
 const squizNodeToRemirrorNode = (nodes) => {
-    return {
-        type: 'doc',
-        content: nodes.filter((node) => getNodeType(node)).map(formatNode),
-    };
+    let children = [];
+    nodes.forEach((node) => {
+        children.push(...formatNode(node));
+    });
+    if (children.find((child) => child.type === 'text')) {
+        children = [{ type: 'paragraph', content: children }];
+    }
+    return { type: 'doc', content: children };
 };
 exports.squizNodeToRemirrorNode = squizNodeToRemirrorNode;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.21.1-alpha.19",
+  "version": "1.21.1-alpha.20",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -36,6 +36,7 @@
     "@vitejs/plugin-react": "3.0.0",
     "autoprefixer": "10.4.13",
     "cypress": "12.5.1",
+    "deepmerge": "^4.3.0",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.32.2",
@@ -71,5 +72,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "401a8492ae51c8cd377d0676ec9ce4fccffca7ff"
+  "gitHead": "83f7b471dd6dd239c5b25233dcb5696fa96267e7"
 }

package/src/Editor/Editor.spec.tsx

@@ -1,14 +1,10 @@
-import { jest } from '@jest/globals';
 import React from 'react';
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import { MockEditor } from './Editor.mock';
 import Editor from './Editor';
 import '@testing-library/jest-dom';
 import { renderWithEditor } from '../../tests/renderWithEditor';
 import ImageButton from '../EditorToolbar/Tools/Image/ImageButton';
 
-const setContent: any = jest.fn();
-
 describe('Formatted text editor', () => {
   it('Renders the text editor', () => {
     render(<Editor />);
@@ -232,28 +228,6 @@ describe('Formatted text editor', () => {
     expect(baseElement.querySelectorAll('div.remirror-editor p')).toHaveLength(1);
   });
 
-  it('Should allow text input & undo input upon clicking undo button', () => {
-    const { baseElement, getByLabelText } = render(<MockEditor setContent={setContent} />);
-
-    const textContent = `This is a string with a random number: ${Math.random() * 9999}`;
-
-    // This sets the content of the text editor
-    act(() => {
-      setContent(`<p>${textContent}</p>`, { triggerChange: true });
-    });
-
-    const editorNode = getByLabelText(`Text editor`);
-    expect(editorNode).toBeTruthy();
-    expect(editorNode.textContent).toBe(textContent);
-
-    // Testing if clicking undo button removes text from editor
-    const undoButton = baseElement.querySelector('button[title="Undo (cmd+Z)"]') as HTMLButtonElement;
-    expect(undoButton).toBeTruthy();
-    fireEvent.click(undoButton);
-
-    expect(editorNode.textContent).toBe('');
-  });
-
   it('should allow text to be pasted into the editor', async () => {
     const { editor, getJsonContent } = await renderWithEditor(<ImageButton />, {
       content: 'Some nonsense content here',

package/src/Editor/Editor.tsx

@@ -1,8 +1,9 @@
-import React, { ClipboardEvent } from 'react';
+import React, { ClipboardEvent, useContext } from 'react';
 import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
 import { RemirrorContentType, RemirrorEventListener, Extension } from '@remirror/core';
 import { Toolbar, FloatingToolbar } from '../EditorToolbar';
-import { Extensions } from '../Extensions/Extensions';
+import { EditorContext } from './EditorContext';
+import { createExtensions } from '../Extensions/Extensions';
 import clsx from 'clsx';
 
 type EditorProps = {
@@ -13,7 +14,7 @@ type EditorProps = {
 
 const Editor = ({ content, editable = true, onChange }: EditorProps) => {
   const { manager, state, setState } = useRemirror({
-    extensions: Extensions,
+    extensions: createExtensions(useContext(EditorContext)),
     content,
     selection: 'start',
     stringHandler: 'html',

package/src/Editor/EditorContext.spec.tsx

@@ -0,0 +1,26 @@
+import React, { useContext } from 'react';
+import { EditorContext } from './EditorContext';
+import { render } from '@testing-library/react';
+
+describe('EditorContext', () => {
+  const defaultContextFn = jest.fn();
+  const Component = () => {
+    defaultContextFn(useContext(EditorContext));
+    return null;
+  };
+
+  it('Has expected defaults', () => {
+    render(<Component />);
+
+    const defaultContext = defaultContextFn.mock.calls[0][0];
+
+    expect(defaultContext).toEqual({
+      matrix: {
+        isValidMatrixAssetId: expect.any(Function),
+        matrixDomain: '',
+        matrixIdentifier: '',
+      },
+    });
+    expect(defaultContext.matrix.isValidMatrixAssetId('fake-asset-id')).toBe(true);
+  });
+});

package/src/Editor/EditorContext.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export type EditorContextOptions = {
+  matrix: {
+    matrixIdentifier: string;
+    matrixDomain: string;
+    isValidMatrixAssetId: (assetId: string) => boolean | Promise<boolean>;
+  };
+};
+
+export const defaultEditorContext: EditorContextOptions = {
+  matrix: {
+    matrixIdentifier: '',
+    matrixDomain: '',
+    isValidMatrixAssetId: () => true,
+  },
+};
+
+export const EditorContext = React.createContext(defaultEditorContext);

package/src/EditorToolbar/FloatingToolbar.tsx

@@ -5,18 +5,21 @@ import BoldButton from './Tools/Bold/BoldButton';
 import { useExtensionNames } from '../hooks';
 import RemoveLinkButton from './Tools/Link/RemoveLinkButton';
 import LinkButton from './Tools/Link/LinkButton';
-import { FloatingToolbar as RemirrorFloatingToolbar, usePositioner, useActive } from '@remirror/react';
+import { FloatingToolbar as RemirrorFloatingToolbar, useActive, usePositioner } from '@remirror/react';
 import { VerticalDivider } from '@remirror/react-components';
 import { createToolbarPositioner, ToolbarPositionerRange } from '../utils/createToolbarPositioner';
 import ImageButton from './Tools/Image/ImageButton';
+import { MarkName } from '../Extensions/Extensions';
 import { ImageExtension } from '../Extensions/ImageExtension/ImageExtension';
 
-// The editor main toolbar
 export const FloatingToolbar = () => {
+  const watchedMarks = [MarkName.Link, MarkName.AssetLink];
   const extensionNames = useExtensionNames();
-  const positioner = useMemo(() => createToolbarPositioner({ types: ['link'] }), []);
-  const { data } = usePositioner<Partial<ToolbarPositionerRange>>(positioner, []);
-  const activeImage = useActive<ImageExtension>();
+  const positioner = useMemo(() => createToolbarPositioner({ types: watchedMarks }), []);
+  const active = useActive<ImageExtension>();
+  const {
+    data: { marks },
+  } = usePositioner<Partial<ToolbarPositionerRange>>(positioner, []);
 
   let buttons = [
     extensionNames.bold && <BoldButton key="bold" />,
@@ -24,23 +27,21 @@ export const FloatingToolbar = () => {
     extensionNames.underline && <UnderlineButton key="underline" />,
   ];
 
-  if (!activeImage.image()) {
-    if (data.marks?.link.isExclusivelyActive) {
-      // if all of the selected text is a link show the options to update/remove the link instead of the regular
-      // formatting options.
-      buttons = [<LinkButton key="update-link" inPopover={true} />, <RemoveLinkButton key="remove-link" />];
-    } else if (!data.marks?.link.isActive) {
-      // if none of the selected text is a link show the option to create a link.
-      buttons.push(
-        <VerticalDivider key="link-divider" className="editor-divider" />,
-        <LinkButton key="add-link" inPopover={true} />,
-      );
-    }
-  } else {
+  if (active.image()) {
     buttons.push(
       <VerticalDivider key="image-divider" className="editor-divider" />,
       <ImageButton key="add-image" inPopover={true} />,
     );
+  } else if (marks?.[MarkName.Link].isExclusivelyActive || marks?.[MarkName.AssetLink].isExclusivelyActive) {
+    // if all of the selected text is a link show the options to update/remove the link instead of the regular
+    // formatting options.
+    buttons = [<LinkButton key="update-link" inPopover={true} />, <RemoveLinkButton key="remove-link" />];
+  } else if (!marks?.[MarkName.Link].isActive && !marks?.[MarkName.AssetLink].isActive) {
+    // if none of the selected text is a link show the option to create a link.
+    buttons.push(
+      <VerticalDivider key="link-divider" className="editor-divider" />,
+      <LinkButton key="add-link" inPopover={true} />,
+    );
   }
 
   return (