@squiz/formatted-text-editor 1.22.1-alpha.6 → 1.22.1-alpha.8

package/lib/EditorToolbar/Tools/Image/Form/ImageForm.js

@@ -37,11 +37,11 @@ const clsx_1 = __importDefault(require("clsx"));
 const Extensions_1 = require("../../../../Extensions/Extensions");
 const Select_1 = require("../../../../ui/Fields/Select/Select");
 const EditorContext_1 = require("../../../../Editor/EditorContext");
+const validation_1 = require("../../../../utils/validation");
 const imageTypeOptions = {
     [Extensions_1.NodeName.Image]: { label: 'External image' },
     [Extensions_1.NodeName.AssetImage]: { label: 'Asset image' },
 };
-const regexDataURI = /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*)$/i;
 const ImageForm = ({ data, onSubmit }) => {
     const { register, handleSubmit, setValue, watch, formState: { errors }, } = (0, react_hook_form_1.useForm)({
         defaultValues: data,
@@ -97,17 +97,23 @@ const ImageForm = ({ data, onSubmit }) => {
                         required: 'Source is required',
                         validate: {
                             isValidImage: async (value) => {
-                                if (value && regexDataURI.test(value)) {
+                                if (value && validation_1.regexDataURI.test(value)) {
                                     return 'Must not be a data URI';
                                 }
                                 if (value && (await validateIsNotImage(value))) {
                                     return 'Must be a valid image URL';
                                 }
                             },
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
                         },
                     }) })),
             react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-                react_1.default.createElement(Input_1.Input, { label: "Alternative description", required: true, error: errors?.image?.alt?.message, ...register('image.alt', { required: 'Alternative description is required' }) })),
+                react_1.default.createElement(Input_1.Input, { label: "Alternative description", required: true, error: errors?.image?.alt?.message, ...register('image.alt', {
+                        required: 'Alternative description is required',
+                        validate: {
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
+                        },
+                    }) })),
             react_1.default.createElement("div", { className: "flex flex-row" },
                 react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
                     react_1.default.createElement(Input_1.Input, { label: "Width", type: "number", required: true, error: errors?.image?.width?.message, ...register('image.width', {
@@ -146,6 +152,7 @@ const ImageForm = ({ data, onSubmit }) => {
                                     return 'Asset ID is invalid or not an image';
                                 }
                             },
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
                         },
                     }) }))))));
 };

package/lib/EditorToolbar/Tools/Link/Form/LinkForm.js

@@ -35,6 +35,7 @@ const Select_1 = require("../../../../ui/Fields/Select/Select");
 const common_1 = require("../../../../Extensions/LinkExtension/common");
 const EditorContext_1 = require("../../../../Editor/EditorContext");
 const Extensions_1 = require("../../../../Extensions/Extensions");
+const validation_1 = require("../../../../utils/validation");
 const linkTypeOptions = {
     [Extensions_1.MarkName.Link]: { label: 'Link to URL' },
     [Extensions_1.MarkName.AssetLink]: { label: 'Link to asset' },
@@ -54,27 +55,49 @@ const LinkForm = ({ data, onSubmit }) => {
             react_1.default.createElement(Select_1.Select, { name: "linkType", label: "Type", value: linkType, options: linkTypeOptions, onChange: (value) => setValue('linkType', value) })),
         linkType === Extensions_1.MarkName.Link && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
-                react_1.default.createElement(Input_1.Input, { label: "URL", ...register('link.href') })),
+                react_1.default.createElement(Input_1.Input, { label: "URL", required: true, error: errors?.link?.href?.message, ...register('link.href', {
+                        required: 'URL is required',
+                        validate: {
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
+                        },
+                    }) })),
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
-                react_1.default.createElement(Input_1.Input, { label: "Text", ...register('text') })),
+                react_1.default.createElement(Input_1.Input, { label: "Text", required: true, error: errors?.text?.message, ...register('text', {
+                        required: 'Text is required',
+                        validate: {
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
+                        },
+                    }) })),
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
-                react_1.default.createElement(Input_1.Input, { label: "Title", ...register('link.title') })),
+                react_1.default.createElement(Input_1.Input, { label: "Title", required: true, error: errors?.link?.title?.message, ...register('link.title', {
+                        required: 'Title is required',
+                        validate: {
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
+                        },
+                    }) })),
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-0') },
                 react_1.default.createElement(Select_1.Select, { name: "link.target", label: "Target", value: data?.link?.target || '_self', options: targetOptions, onChange: (value) => setValue('link.target', value) })))),
         linkType === Extensions_1.MarkName.AssetLink && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
-                react_1.default.createElement(Input_1.Input, { label: "Asset ID", error: errors?.assetLink?.matrixAssetId?.message, ...register('assetLink.matrixAssetId', {
+                react_1.default.createElement(Input_1.Input, { label: "Asset ID", required: true, error: errors?.assetLink?.matrixAssetId?.message, ...register('assetLink.matrixAssetId', {
+                        required: 'Asset ID is required',
                         validate: {
                             isValidAsset: async (assetId) => {
                                 if (assetId && !(await context.matrix.resolveMatrixAsset(assetId))) {
                                     return 'Invalid asset ID';
                                 }
                             },
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
                         },
                     }) })),
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
-                react_1.default.createElement(Input_1.Input, { label: "Text", ...register('text') })),
+                react_1.default.createElement(Input_1.Input, { label: "Text", required: true, error: errors?.text?.message, ...register('text', {
+                        required: 'Text is required',
+                        validate: {
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
+                        },
+                    }) })),
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-0') },
-                react_1.default.createElement(Select_1.Select, { name: "assetLink.target", label: "Target", value: data?.link?.target || '_self', options: targetOptions, onChange: (value) => setValue('assetLink.target', value) }))))));
+                react_1.default.createElement(Select_1.Select, { name: "assetLink.target", label: "Target", value: data?.assetLink?.target || '_self', options: targetOptions, onChange: (value) => setValue('assetLink.target', value) }))))));
 };
 exports.LinkForm = LinkForm;

package/lib/ui/Modal/Modal.js

@@ -48,8 +48,8 @@ const Modal = ({ children, title, onCancel, onSubmit, className }, ref) => {
     };
     // register key listeners for Enter/Escape on key up so the editor doesn't handle the event as well
     (0, react_1.useEffect)(() => {
-        window.addEventListener('keyup', keydown);
-        return () => window.removeEventListener('keyup', keydown);
+        window.addEventListener('keydown', keydown);
+        return () => window.removeEventListener('keydown', keydown);
     }, []);
     // add/remove the modal container from the DOM and focus on the first input
     (0, react_1.useEffect)(() => {

package/lib/utils/validation.d.ts

@@ -0,0 +1,2 @@
+export declare const noEmptySpacesValidation: (value: string | undefined) => Promise<"Empty space is not allowed" | undefined>;
+export declare const regexDataURI: RegExp;

package/lib/utils/validation.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.22.1-alpha.6",
+  "version": "1.22.1-alpha.8",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -74,5 +74,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "74678e99718430c58c5d5d813e02be8869f95f39"
+  "gitHead": "ffec707da1d32e94ba004fd16da25c7e3a259e01"
 }

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

@@ -12,6 +12,7 @@ import { AssetImageAttributes } from '../../../../Extensions/ImageExtension/Asse
 import { DeepPartial } from '../../../../types';
 import { Select, SelectOptions } from '../../../../ui/Fields/Select/Select';
 import { EditorContext } from '../../../../Editor/EditorContext';
+import { noEmptySpacesValidation, regexDataURI } from '../../../../utils/validation';
 
 export type ImageFormData = {
   imageType: NodeName;
@@ -30,9 +31,6 @@ export type FormProps = {
 };
 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;
-
 const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
   const {
     register,
@@ -118,6 +116,7 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
                       return 'Must be a valid image URL';
                     }
                   },
+                  noEmptySpaces: noEmptySpacesValidation,
                 },
               })}
             />
@@ -127,7 +126,12 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
               label="Alternative description"
               required
               error={errors?.image?.alt?.message}
-              {...register('image.alt', { required: 'Alternative description is required' })}
+              {...register('image.alt', {
+                required: 'Alternative description is required',
+                validate: {
+                  noEmptySpaces: noEmptySpacesValidation,
+                },
+              })}
             />
           </div>
           <div className="flex flex-row">
@@ -199,6 +203,7 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
                       return 'Asset ID is invalid or not an image';
                     }
                   },
+                  noEmptySpaces: noEmptySpacesValidation,
                 },
               })}
             />

package/src/EditorToolbar/Tools/Image/ImageButton.spec.tsx

@@ -324,4 +324,15 @@ describe('ImageButton', () => {
       expect(screen.getByText(expectedError)).toBeInTheDocument();
     },
   );
+
+  it('Shows an error if the field value is just an empty space', async () => {
+    await renderWithEditor(<ImageButton />);
+
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Source'), { target: { value: ' ' } });
+    fireEvent.change(screen.getByLabelText('Alternative description'), { target: { value: ' ' } });
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
+
+    expect(screen.getAllByText('Empty space is not allowed')).toHaveLength(2);
+  });
 });

package/src/EditorToolbar/Tools/Link/Form/LinkForm.tsx

@@ -10,6 +10,7 @@ import { LinkTarget } from '../../../../Extensions/LinkExtension/common';
 import { EditorContext } from '../../../../Editor/EditorContext';
 import { MarkName } from '../../../../Extensions/Extensions';
 import { DeepPartial } from '../../../../types';
+import { noEmptySpacesValidation } from '../../../../utils/validation';
 
 export type LinkFormData = {
   linkType: MarkName;
@@ -62,13 +63,44 @@ export const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
       {linkType === MarkName.Link && (
         <>
           <div className={clsx('squiz-fte-form-group mb-2')}>
-            <Input label="URL" {...register('link.href')} />
+            <Input
+              label="URL"
+              required
+              error={errors?.link?.href?.message}
+              {...register('link.href', {
+                required: 'URL is required',
+                validate: {
+                  noEmptySpaces: noEmptySpacesValidation,
+                },
+              })}
+            />
           </div>
+
           <div className={clsx('squiz-fte-form-group mb-2')}>
-            <Input label="Text" {...register('text')} />
+            <Input
+              label="Text"
+              required
+              error={errors?.text?.message}
+              {...register('text', {
+                required: 'Text is required',
+                validate: {
+                  noEmptySpaces: noEmptySpacesValidation,
+                },
+              })}
+            />
           </div>
           <div className={clsx('squiz-fte-form-group mb-2')}>
-            <Input label="Title" {...register('link.title')} />
+            <Input
+              label="Title"
+              required
+              error={errors?.link?.title?.message}
+              {...register('link.title', {
+                required: 'Title is required',
+                validate: {
+                  noEmptySpaces: noEmptySpacesValidation,
+                },
+              })}
+            />
           </div>
           <div className={clsx('squiz-fte-form-group mb-0')}>
             <Select
@@ -87,26 +119,39 @@ export const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
           <div className={clsx('squiz-fte-form-group mb-2')}>
             <Input
               label="Asset ID"
+              required
               error={errors?.assetLink?.matrixAssetId?.message}
               {...register('assetLink.matrixAssetId', {
+                required: 'Asset ID is required',
                 validate: {
                   isValidAsset: async (assetId: string | undefined) => {
                     if (assetId && !(await context.matrix.resolveMatrixAsset(assetId))) {
                       return 'Invalid asset ID';
                     }
                   },
+                  noEmptySpaces: noEmptySpacesValidation,
                 },
               })}
             />
           </div>
           <div className={clsx('squiz-fte-form-group mb-2')}>
-            <Input label="Text" {...register('text')} />
+            <Input
+              label="Text"
+              required
+              error={errors?.text?.message}
+              {...register('text', {
+                required: 'Text is required',
+                validate: {
+                  noEmptySpaces: noEmptySpacesValidation,
+                },
+              })}
+            />
           </div>
           <div className={clsx('squiz-fte-form-group mb-0')}>
             <Select
               name="assetLink.target"
               label="Target"
-              value={data?.link?.target || '_self'}
+              value={data?.assetLink?.target || '_self'}
               options={targetOptions}
               onChange={(value) => setValue('assetLink.target', value as LinkTarget)}
             />

package/src/EditorToolbar/Tools/Link/LinkButton.spec.tsx

@@ -48,7 +48,8 @@ describe('LinkButton', () => {
 
   it('Updates the attributes of an existing link', async () => {
     const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
-      content: '<a href="https://www.example.org/my-link">Sample link</a> with some other content.',
+      content:
+        '<a href="https://www.example.org/my-link" title="Sample title">Sample link</a> with some other content.',
     });
 
     // jump to the middle of the link.
@@ -58,6 +59,7 @@ describe('LinkButton', () => {
     await openModal();
     fireEvent.change(screen.getByLabelText('URL'), { target: { value: 'https://www.example.org/updated-link' } });
     fireEvent.change(screen.getByLabelText('Text'), { target: { value: 'Updated sample link' } });
+    fireEvent.change(screen.getByLabelText('Title'), { target: { value: 'Updated sample title' } });
 
     // verify the content matches what was initially set prior to applying.
     expect(getJsonContent()).toEqual({
@@ -70,7 +72,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: null },
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: 'Sample title' },
             },
           ],
         },
@@ -96,7 +98,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { href: 'https://www.example.org/updated-link', target: '_self', title: null },
+              attrs: { href: 'https://www.example.org/updated-link', target: '_self', title: 'Updated sample title' },
             },
           ],
         },
@@ -105,59 +107,10 @@ describe('LinkButton', () => {
     });
   });
 
-  it('Removes the link when the URL is cleared', async () => {
-    const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
-      content: '<a href="https://www.example.org/my-link">Sample link</a> with some other content.',
-    });
-
-    // jump to the middle of the link.
-    await act(() => editor.selectText(3));
-
-    // open the modal and clear the link.
-    await openModal();
-    fireEvent.change(screen.getByLabelText('URL'), { target: { value: '' } });
-    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
-
-    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
-
-    // cursor should be positioned after the link and the link should be removed.
-    expect(editor.from).toBe(12);
-    expect(editor.to).toBe(12);
-    expect(getJsonContent()).toEqual({
-      type: 'paragraph',
-      attrs: expect.any(Object),
-      content: [{ type: 'text', text: 'Sample link with some other content.' }],
-    });
-  });
-
-  it('Removes the content when the text is cleared', async () => {
-    const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
-      content: '<a href="https://www.example.org/my-link">Sample link</a> with some other content.',
-    });
-
-    // jump to the middle of the link.
-    await act(() => editor.selectText(3));
-
-    // open the modal and clear the text.
-    await openModal();
-    fireEvent.change(screen.getByLabelText('Text'), { target: { value: '' } });
-    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
-
-    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
-
-    // cursor should be positioned where the link was and the link+text should be removed.
-    expect(editor.from).toBe(1);
-    expect(editor.to).toBe(1);
-    expect(getJsonContent()).toEqual({
-      type: 'paragraph',
-      attrs: expect.any(Object),
-      content: [{ type: 'text', text: ' with some other content.' }],
-    });
-  });
-
   it('Updates unselected part of link when link is partially selected', async () => {
     const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
-      content: '<a href="https://www.example.org/my-link">Sample link</a> <strong>with</strong> some other content.',
+      content:
+        '<a href="https://www.example.org/my-link" title="Sample title">Sample link</a> <strong>with</strong> some other content.',
     });
 
     // jump to the middle of the link and select some of the text after it.
@@ -182,7 +135,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: null },
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: 'Sample title' },
             },
           ],
         },
@@ -192,7 +145,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: null },
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: 'Sample title' },
             },
             { type: 'bold' },
           ],
@@ -203,7 +156,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: null },
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: 'Sample title' },
             },
           ],
         },
@@ -214,7 +167,8 @@ describe('LinkButton', () => {
 
   it('Updates text and formatting when selection has a mixture of formatting', async () => {
     const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
-      content: '<a href="https://www.example.org/my-link">Sample link</a> <strong>with</strong> some other content.',
+      content:
+        '<a href="https://www.example.org/my-link" title="Sample title">Sample link</a> <strong>with</strong> some other content.',
     });
 
     // jump to the middle of the link and select some of the text after it.
@@ -240,7 +194,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: null },
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: 'Sample title' },
             },
           ],
         },
@@ -385,4 +339,30 @@ describe('LinkButton', () => {
     expect(screen.getByText('Invalid asset ID')).toBeInTheDocument();
     expect(resolveMatrixAsset).toHaveBeenCalledWith('invalid-asset-id');
   });
+
+  it('Shows an error if a required field is not provided', async () => {
+    await renderWithEditor(<LinkButton />);
+
+    await openModal();
+    fireEvent.change(screen.getByLabelText('URL'), { target: { value: '' } });
+    fireEvent.change(screen.getByLabelText('Text'), { target: { value: '' } });
+    fireEvent.change(screen.getByLabelText('Title'), { target: { value: '' } });
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
+
+    expect(screen.getByText('URL is required')).toBeInTheDocument();
+    expect(screen.getByText('Text is required')).toBeInTheDocument();
+    expect(screen.getByText('Title is required')).toBeInTheDocument();
+  });
+
+  it('Shows an error if the field value is just an empty space', async () => {
+    await renderWithEditor(<LinkButton />);
+
+    await openModal();
+    fireEvent.change(screen.getByLabelText('URL'), { target: { value: ' ' } });
+    fireEvent.change(screen.getByLabelText('Text'), { target: { value: ' ' } });
+    fireEvent.change(screen.getByLabelText('Title'), { target: { value: ' ' } });
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
+
+    expect(screen.getAllByText('Empty space is not allowed')).toHaveLength(3);
+  });
 });

package/src/ui/Modal/Modal.spec.tsx

@@ -82,7 +82,7 @@ describe('Modal', () => {
       </Modal>,
     );
 
-    fireEvent.keyUp(screen.getByText('Modal content'), { key: 'Enter' });
+    fireEvent.keyDown(screen.getByText('Modal content'), { key: 'Enter' });
 
     expect(mockOnSubmit).toHaveBeenCalled();
   });
@@ -94,7 +94,7 @@ describe('Modal', () => {
       </Modal>,
     );
 
-    fireEvent.keyUp(screen.getByText('Modal content'), { key: 'Escape' });
+    fireEvent.keyDown(screen.getByText('Modal content'), { key: 'Escape' });
 
     expect(mockOnCancel).toHaveBeenCalled();
   });

package/src/ui/Modal/Modal.tsx

@@ -33,8 +33,8 @@ const Modal = (
 
   // register key listeners for Enter/Escape on key up so the editor doesn't handle the event as well
   useEffect(() => {
-    window.addEventListener('keyup', keydown);
-    return () => window.removeEventListener('keyup', keydown);
+    window.addEventListener('keydown', keydown);
+    return () => window.removeEventListener('keydown', keydown);
   }, []);
 
   // add/remove the modal container from the DOM and focus on the first input

package/src/utils/validation.ts

@@ -0,0 +1,8 @@
+export const noEmptySpacesValidation = async (value: string | undefined) => {
+  if (value && !(value.trim().length > 0)) {
+    return 'Empty space is not allowed';
+  }
+};
+
+export const regexDataURI =
+  /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*)$/i;