@squiz/formatted-text-editor 1.21.1-alpha.34 → 1.21.1-alpha.39

package/lib/Extensions/LinkExtension/LinkExtension.js

@@ -19,7 +19,7 @@ let LinkExtension = class LinkExtension extends core_1.MarkExtension {
     createMarkSpec(extra, override) {
         return {
             inclusive: false,
-            excludes: 'assetLink',
+            excludes: Extensions_1.MarkName.AssetLink,
             ...override,
             attrs: {
                 ...extra.defaults(),
@@ -56,10 +56,6 @@ let LinkExtension = class LinkExtension extends core_1.MarkExtension {
             },
         };
     }
-    shortcut(_) {
-        this.options.onShortcut();
-        return true;
-    }
     updateLink({ text, attrs, range }) {
         return this.store.getExtension(CommandsExtension_1.CommandsExtension).updateMark({
             attrs,
@@ -73,9 +69,6 @@ let LinkExtension = class LinkExtension extends core_1.MarkExtension {
         return (0, core_1.removeMark)({ type: this.type });
     }
 };
-__decorate([
-    (0, core_1.keyBinding)({ shortcut: core_1.NamedShortcut.InsertLink })
-], LinkExtension.prototype, "shortcut", null);
 __decorate([
     (0, core_1.command)()
 ], LinkExtension.prototype, "updateLink", null);
@@ -88,7 +81,6 @@ LinkExtension = __decorate([
             defaultTarget: common_1.LinkTarget.Self,
             supportedTargets: [common_1.LinkTarget.Self, common_1.LinkTarget.Blank],
         },
-        handlerKeys: ['onShortcut'],
         defaultPriority: remirror_1.ExtensionPriority.Medium,
     })
 ], LinkExtension);

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.remirrorNodeToSquizNode = exports.resolveNodeTag = void 0;
 const undefinedIfEmpty_1 = require("../../undefinedIfEmpty");
+const Extensions_1 = require("../../../Extensions/Extensions");
 const resolveNodeTag = (node) => {
     if (node.type.name === 'text') {
         return 'span';
@@ -62,7 +63,7 @@ const transformFragment = (fragment) => {
     return transformed;
 };
 const transformNode = (node) => {
-    const attributes = node.type.name === 'image' ? transformAttributes(node.attrs) : undefined;
+    const attributes = node.type.name === Extensions_1.NodeName.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 || '' };
@@ -71,16 +72,24 @@ const transformNode = (node) => {
     // 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) {
+    if (node.type.name !== Extensions_1.NodeName.Text || attributes || formattingOptions || font) {
         transformedNode = {
             type: 'tag',
             tag: (0, exports.resolveNodeTag)(node),
-            children: node.type.name === 'text' ? [transformedNode] : transformFragment(node.content),
+            children: node.type.name === Extensions_1.NodeName.Text ? [transformedNode] : transformFragment(node.content),
             attributes,
             formattingOptions,
             font,
         };
     }
+    if (node.type.name === Extensions_1.NodeName.AssetImage) {
+        transformedNode = {
+            type: 'matrix-image',
+            matrixAssetId: node.attrs.matrixAssetId,
+            matrixIdentifier: node.attrs.matrixIdentifier,
+            matrixDomain: node.attrs.matrixDomain,
+        };
+    }
     node.marks.forEach((mark) => {
         switch (mark.type.name) {
             case 'bold':

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

@@ -2,9 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.squizNodeToRemirrorNode = void 0;
 const undefinedIfEmpty_1 = require("../../undefinedIfEmpty");
+const Extensions_1 = require("../../../Extensions/Extensions");
 const getNodeType = (node) => {
     const typeMap = {
-        'link-to-matrix-asset': 'text',
+        'link-to-matrix-asset': Extensions_1.NodeName.Text,
+        'matrix-image': Extensions_1.NodeName.AssetImage,
         text: 'text',
     };
     const tagMap = {
@@ -17,8 +19,8 @@ const getNodeType = (node) => {
         img: 'image',
         pre: 'preformatted',
         p: 'paragraph',
-        a: 'text',
-        span: 'text',
+        a: Extensions_1.NodeName.Text,
+        span: Extensions_1.NodeName.Text,
     };
     if (typeMap[node.type]) {
         return typeMap[node.type];
@@ -41,6 +43,13 @@ const getNodeAttributes = (node) => {
             title: node.attributes?.title,
         };
     }
+    else if (node.type === 'matrix-image') {
+        return {
+            matrixAssetId: node.matrixAssetId,
+            matrixDomain: node.matrixDomain,
+            matrixIdentifier: node.matrixIdentifier,
+        };
+    }
     else if (node.type === 'tag') {
         return {
             nodeIndent: null,
@@ -56,7 +65,7 @@ const getNodeMarks = (node) => {
     const marks = [];
     if (node.type === 'tag' && node.tag === 'a') {
         marks.push({
-            type: 'link',
+            type: Extensions_1.MarkName.Link,
             attrs: {
                 href: node.attributes?.href,
                 target: node.attributes?.target ?? null,
@@ -67,7 +76,7 @@ const getNodeMarks = (node) => {
     }
     else if (node.type === 'link-to-matrix-asset') {
         marks.push({
-            type: 'assetLink',
+            type: Extensions_1.MarkName.AssetLink,
             attrs: {
                 matrixAssetId: node.matrixAssetId,
                 matrixDomain: node.matrixDomain,

package/lib/utils/resolveMatrixAssetUrl.d.ts

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

package/lib/utils/resolveMatrixAssetUrl.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveMatrixAssetUrl = void 0;
+const resolveMatrixAssetUrl = (id, matrixDomain) => {
+    if (matrixDomain.indexOf('://') < 0) {
+        matrixDomain = `${window.location.protocol}//${matrixDomain}`;
+    }
+    return new URL(`/_nocache?a=${encodeURIComponent(id)}`, matrixDomain).toString();
+};
+exports.resolveMatrixAssetUrl = resolveMatrixAssetUrl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.21.1-alpha.34",
+  "version": "1.21.1-alpha.39",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -37,7 +37,7 @@
     "@vitejs/plugin-react": "3.0.0",
     "autoprefixer": "10.4.13",
     "cypress": "12.5.1",
-    "deepmerge": "^4.3.0",
+    "deepmerge": "4.3.0",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.32.2",
@@ -74,5 +74,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "823bebc1586e99871cdc92d69a7af878fd27f537"
+  "gitHead": "52f09f966b5eaa35149786dd1f2c55bf9ad8bde5"
 }

package/src/Editor/EditorContext.spec.tsx

@@ -9,18 +9,18 @@ describe('EditorContext', () => {
     return null;
   };
 
-  it('Has expected defaults', () => {
+  it('Has expected defaults', async () => {
     render(<Component />);
 
     const defaultContext = defaultContextFn.mock.calls[0][0];
 
     expect(defaultContext).toEqual({
       matrix: {
-        isValidMatrixAssetId: expect.any(Function),
+        resolveMatrixAsset: expect.any(Function),
         matrixDomain: '',
         matrixIdentifier: '',
       },
     });
-    expect(defaultContext.matrix.isValidMatrixAssetId('fake-asset-id')).toBe(true);
+    expect(await defaultContext.matrix.resolveMatrixAsset('fake-asset-id')).toBeNull();
   });
 });

package/src/Editor/EditorContext.ts

@@ -1,10 +1,17 @@
 import React from 'react';
 
+export type MatrixAsset = {
+  id: string;
+  type: string | 'image';
+};
+
+export type MatrixAssetResolver = (assetId: string) => Promise<MatrixAsset | null>;
+
 export type EditorContextOptions = {
   matrix: {
     matrixIdentifier: string;
     matrixDomain: string;
-    isValidMatrixAssetId: (assetId: string) => boolean | Promise<boolean>;
+    resolveMatrixAsset: MatrixAssetResolver;
   };
 };
 
@@ -12,7 +19,7 @@ export const defaultEditorContext: EditorContextOptions = {
   matrix: {
     matrixIdentifier: '',
     matrixDomain: '',
-    isValidMatrixAssetId: () => true,
+    resolveMatrixAsset: () => Promise.resolve(null),
   },
 };
 

package/src/EditorToolbar/FloatingToolbar.spec.tsx

@@ -1,7 +1,12 @@
 import { act, screen } from '@testing-library/react';
+import { NodeSelection } from 'prosemirror-state';
 import { renderWithEditor } from '../../tests';
 
 describe('FloatingToolbar', () => {
+  const getFloatingButtonNames = () => {
+    return screen.queryAllByRole('button').map((button) => button.getAttribute('title'));
+  };
+
   it.each([
     ['Nothing selected', 3, 3, []],
     ['Regular text selected', 3, 4, ['Bold (cmd+B)', 'Italic (cmd+I)', 'Underline (cmd+U)', 'Link (cmd+K)']],
@@ -9,7 +14,6 @@ describe('FloatingToolbar', () => {
     ['Nothing selected, positioned directly on the left of a link', 12, 12, []],
     ['Nothing selected, positioned directly on the right of a link', 19, 19, []],
     ['Nothing selected, positioned within a link', 13, 13, ['Link (cmd+K)', 'Remove link']],
-    ['Link partially selected', 15, 17, ['Link (cmd+K)', 'Remove link']],
   ])(
     'Renders formatting buttons when text is selected - %s',
     async (description: string, from: number, to: number, expectedButtons: string[]) => {
@@ -20,10 +24,26 @@ describe('FloatingToolbar', () => {
 
       await act(() => editor.selectText({ from, to }));
 
-      const buttons = screen.queryAllByRole('button');
-      const buttonLabels = buttons.map((button) => button.getAttribute('title'));
+      expect(getFloatingButtonNames()).toEqual(expectedButtons);
+    },
+  );
+
+  it.each([
+    ['Image selected', 1, ['Image (cmd+L)']],
+    ['Asset image selected', 2, ['Image (cmd+L)']],
+  ])(
+    'Renders formatting buttons when node is selected - %s',
+    async (description: string, pos: number, expectedButtons: string[]) => {
+      const { editor } = await renderWithEditor(null, {
+        content:
+          '<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />' +
+          '<img data-matrix-asset-id="100" data-matrix-identifier="key" data-matrix-domain="my-matrix.squiz.net" />',
+        editable: true,
+      });
+
+      await act(() => editor.selectText(new NodeSelection(editor.state.doc.resolve(pos))));
 
-      expect(buttonLabels).toEqual(expectedButtons);
+      expect(getFloatingButtonNames()).toEqual(expectedButtons);
     },
   );
 });

package/src/EditorToolbar/FloatingToolbar.tsx

@@ -27,7 +27,7 @@ export const FloatingToolbar = () => {
     extensionNames.underline && <UnderlineButton key="underline" />,
   ];
 
-  if (active.image()) {
+  if (active.image() || active.assetImage()) {
     buttons = [<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

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

@@ -2,25 +2,46 @@ import '@testing-library/jest-dom';
 import { render, screen, act, fireEvent } from '@testing-library/react';
 import React from 'react';
 import ImageForm from './ImageForm';
+import { NodeName } from '../../../../Extensions/Extensions';
 
 describe('Image Form', () => {
   const handleSubmit = jest.fn();
   const data = {
-    src: 'https://httpcats.com/302.jpg',
-    alt: 'Cat with mouse in mouth',
-    width: 1600,
-    height: 1400,
+    imageType: NodeName.Image,
+    image: {
+      src: 'https://httpcats.com/302.jpg',
+      alt: 'Cat with mouse in mouth',
+      width: 1600,
+      height: 1400,
+    },
   };
 
-  it('Renders the form with the relevant fields', () => {
+  it('Renders the form with the relevant fields for arbitrary images', () => {
     render(<ImageForm data={data} onSubmit={handleSubmit} />);
 
+    expect(screen.getByLabelText('Type')).toHaveTextContent('External image');
     expect(screen.getByLabelText('Source')).toHaveValue('https://httpcats.com/302.jpg');
     expect(screen.getByLabelText('Alternative description')).toHaveValue('Cat with mouse in mouth');
     expect(screen.getByLabelText('Width')).toHaveValue(1600);
     expect(screen.getByLabelText('Height')).toHaveValue(1400);
   });
 
+  it('Renders the form with the relevant fields for asset images', () => {
+    render(
+      <ImageForm
+        data={{
+          ...data,
+          imageType: NodeName.AssetImage,
+          assetImage: { matrixAssetId: '100' },
+        }}
+        onSubmit={handleSubmit}
+      />,
+    );
+
+    expect(screen.getByLabelText('Type')).toHaveTextContent('Asset image');
+    expect(screen.getByLabelText('Asset ID')).toHaveValue('100');
+  });
+
   it('calculates the height when width changes and aspect ratio is locked', () => {
     render(<ImageForm data={data} onSubmit={handleSubmit} />);
     const widthInput = screen.getByLabelText('Width');

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

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState } from 'react';
+import React, { ReactElement, useContext, useState } from 'react';
 import { Input } from '../../../../ui/Fields/Input/Input';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { getImageSize } from 'react-image-size';
@@ -7,20 +7,28 @@ import Button from '../../../../ui/Button/Button';
 import LinkOffIcon from '@mui/icons-material/LinkOff';
 import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
 import clsx from 'clsx';
+import { NodeName } from '../../../../Extensions/Extensions';
+import { AssetImageAttributes } from '../../../../Extensions/ImageExtension/AssetImageExtension';
+import { DeepPartial } from '../../../../types';
+import { Select, SelectOptions } from '../../../../ui/Fields/Select/Select';
+import { EditorContext } from '../../../../Editor/EditorContext';
 
-export type UpdateImageOptions = ImageAttributes & {
-  src: string;
-  alt: string;
-  width: number;
-  height: number;
+export type ImageFormData = {
+  imageType: NodeName;
+  image: Pick<ImageAttributes, 'src' | 'alt' | 'width' | 'height'>;
+  assetImage: AssetImageAttributes;
+};
+
+const imageTypeOptions: SelectOptions = {
+  [NodeName.Image]: { label: 'External image' },
+  [NodeName.AssetImage]: { label: 'Asset image' },
 };
-export type ImageFormData = Pick<UpdateImageOptions, 'src' | 'alt' | 'width' | 'height'>;
 
 export type FormProps = {
-  data: Partial<ImageFormData>;
+  data: DeepPartial<ImageFormData>;
   onSubmit: SubmitHandler<ImageFormData>;
 };
-export type Dimensions = 'width' | 'height';
+export type Dimensions = 'image.width' | 'image.height';
 
 const regexDataURI =
   /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*)$/i;
@@ -30,24 +38,29 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
     register,
     handleSubmit,
     setValue,
+    watch,
     formState: { errors },
   } = useForm<ImageFormData>({
     defaultValues: data,
   });
-
+  const imageType = watch('imageType') || NodeName.Image;
+  const context = useContext(EditorContext);
   const [aspectRatioFromWidth, setAspectRatioFromWidth] = useState(9 / 16);
   const [aspectRatioFromHeight, setAspectRatioFromHeight] = useState(16 / 9);
   const [aspectRatioLocked, setAspectRatioLocked] = useState(true);
 
-  const setDimensionsFromURL = (e: React.ChangeEvent<HTMLInputElement>) => {
-    getImageSize(e.target.value)
-      .then(({ width, height }: { width: number; height: number }) => {
-        setValue('width', width);
-        setValue('height', height);
-        setAspectRatioFromWidth(height / width);
-        setAspectRatioFromHeight(width / height);
-      })
-      .catch();
+  const setDimensionsFromURL = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    try {
+      const { width, height } = await getImageSize(e.target.value);
+
+      setValue('image.width', width);
+      setValue('image.height', height);
+      setAspectRatioFromWidth(height / width);
+      setAspectRatioFromHeight(width / height);
+    } catch (error) {
+      // swallow the error for fetching the image size, will occur if the URL does not point to an image.
+      // will be handled by validation when attempting to add the image.
+    }
   };
 
   const validateIsNotImage = async (src: string) => {
@@ -59,13 +72,13 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
     }
   };
 
-  const calculateDimensions = () => {
+  const calculateDimensions = (event: Event) => {
     if (aspectRatioLocked) {
       const currentTarget = event?.target as HTMLInputElement;
       const type = currentTarget.name as Dimensions;
       const currentValue = currentTarget.value as string;
-      const otherValue = type === 'width' ? 'height' : 'width';
-      const aspectRatio = type === 'width' ? aspectRatioFromWidth : aspectRatioFromHeight;
+      const otherValue = type === 'image.width' ? 'image.height' : 'image.width';
+      const aspectRatio = type === 'image.width' ? aspectRatioFromWidth : aspectRatioFromHeight;
       const newValue = Math.round(aspectRatio * Number(currentValue) * 100) / 100;
       setValue(otherValue, newValue);
     }
@@ -78,84 +91,120 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
   return (
     <form className="squiz-fte-form" onSubmit={handleSubmit(onSubmit)}>
       <div className="squiz-fte-form-group mb-2">
-        <Input
-          label="Source"
-          required
-          error={errors?.src?.message}
-          {...register('src', {
-            onChange: setDimensionsFromURL,
-            required: 'Source is required',
-            validate: {
-              isValidImage: async (value: string | undefined) => {
-                if (value && regexDataURI.test(value)) {
-                  return 'Must not be a data URI';
-                }
-                if (value && (await validateIsNotImage(value))) {
-                  return 'Must be a valid image URL';
-                }
-              },
-            },
-          })}
-        />
-      </div>
-      <div className="squiz-fte-form-group mb-2">
-        <Input
-          label="Alternative description"
-          required
-          error={errors?.alt?.message}
-          {...register('alt', { required: 'Alternative description is required' })}
+        <Select
+          name="imageType"
+          label="Type"
+          value={imageType}
+          options={imageTypeOptions}
+          onChange={(value) => setValue('imageType', value as NodeName)}
         />
       </div>
-      <div className="flex flex-row">
-        <div className="squiz-fte-form-group mb-2">
-          <Input
-            label="Width"
-            type="number"
-            required
-            error={errors?.width?.message}
-            {...register('width', {
-              onChange: calculateDimensions,
-              required: 'Width is required',
-              validate: {
-                isValidWidth: (value: number | undefined) => {
-                  if (value && !(value > 0)) {
-                    return 'Must be higher than 0';
-                  }
+      {imageType === NodeName.Image && (
+        <>
+          <div className="squiz-fte-form-group mb-2">
+            <Input
+              label="Source"
+              required
+              error={errors?.image?.src?.message}
+              {...register('image.src', {
+                onChange: setDimensionsFromURL,
+                required: 'Source is required',
+                validate: {
+                  isValidImage: async (value: string | undefined) => {
+                    if (value && regexDataURI.test(value)) {
+                      return 'Must not be a data URI';
+                    }
+                    if (value && (await validateIsNotImage(value))) {
+                      return 'Must be a valid image URL';
+                    }
+                  },
                 },
-              },
-            })}
-          />
-        </div>
-        <div className="flex mx-1 mb-2">
-          <Button
-            handleOnClick={toggleAspectRatio}
-            isActive={false}
-            icon={aspectRatioLocked ? <InsertLinkRoundedIcon /> : <LinkOffIcon />}
-            label="Constrain properties"
-            isDisabled={false}
-            className={clsx('my-auto', !errors?.height && !errors?.width && 'mb-0')}
-          />
-        </div>
-        <div className="squiz-fte-form-group mb-2">
-          <Input
-            label="Height"
-            type="number"
-            required
-            error={errors?.height?.message}
-            {...register('height', {
-              onChange: calculateDimensions,
-              required: 'Height is required',
-              validate: {
-                isValidHeight: (value: number | undefined) => {
-                  if (value && !(value > 0)) {
-                    return 'Must be higher than 0';
-                  }
+              })}
+            />
+          </div>
+          <div className="squiz-fte-form-group mb-2">
+            <Input
+              label="Alternative description"
+              required
+              error={errors?.image?.alt?.message}
+              {...register('image.alt', { required: 'Alternative description is required' })}
+            />
+          </div>
+          <div className="flex flex-row">
+            <div className="squiz-fte-form-group mb-2">
+              <Input
+                label="Width"
+                type="number"
+                required
+                error={errors?.image?.width?.message}
+                {...register('image.width', {
+                  onChange: calculateDimensions,
+                  required: 'Width is required',
+                  validate: {
+                    isValidWidth: (value) => {
+                      if (value && !(value > 0)) {
+                        return 'Must be higher than 0';
+                      }
+                    },
+                  },
+                })}
+              />
+            </div>
+            <div className="flex mx-1 mb-2">
+              <Button
+                handleOnClick={toggleAspectRatio}
+                isActive={false}
+                icon={aspectRatioLocked ? <InsertLinkRoundedIcon /> : <LinkOffIcon />}
+                label="Constrain properties"
+                isDisabled={false}
+                className={clsx('my-auto', !errors?.image?.height && !errors?.image?.width && 'mb-0')}
+              />
+            </div>
+            <div className="squiz-fte-form-group mb-2">
+              <Input
+                label="Height"
+                type="number"
+                required
+                error={errors?.image?.height?.message}
+                {...register('image.height', {
+                  onChange: calculateDimensions,
+                  required: 'Height is required',
+                  validate: {
+                    isValidHeight: (value) => {
+                      if (value && !(value > 0)) {
+                        return 'Must be higher than 0';
+                      }
+                    },
+                  },
+                })}
+              />
+            </div>
+          </div>
+        </>
+      )}
+      {imageType === NodeName.AssetImage && (
+        <>
+          <div className="squiz-fte-form-group mb-2">
+            <Input
+              label="Asset ID"
+              required
+              error={errors?.assetImage?.matrixAssetId?.message}
+              {...register('assetImage.matrixAssetId', {
+                required: 'Asset ID is required',
+                validate: {
+                  isImage: async (assetId) => {
+                    const asset = await context.matrix.resolveMatrixAsset(assetId);
+
+                    if (asset?.type !== 'image') {
+                      return 'Asset ID is invalid or not an image';
+                    }
+                  },
                 },
-              },
-            })}
-          />
-        </div>
-      </div>
+              })}
+            />
+          </div>
+        </>
+      )}
     </form>
   );
 };