diff --git a/.changeset/fresh-peaches-heal.md b/.changeset/fresh-peaches-heal.md
new file mode 100644
index 000000000..c1bec5f06
--- /dev/null
+++ b/.changeset/fresh-peaches-heal.md
@@ -0,0 +1,11 @@
+---
+'@jpmorganchase/mosaic-content-editor-plugin': patch
+---
+
+### Fix
+
+The insert/edit link dialog no longer closes when its contents are clicked.
+
+### Refactor
+
+The forms used to insert/edit links and insert images in the content editor plugin have been updated to use the latest version of `FormField` and `Input` from Salt-ds.
diff --git a/packages/content-editor-plugin/src/components/Editor.tsx b/packages/content-editor-plugin/src/components/Editor.tsx
index 63cd797af..e91eaf16b 100644
--- a/packages/content-editor-plugin/src/components/Editor.tsx
+++ b/packages/content-editor-plugin/src/components/Editor.tsx
@@ -27,7 +27,6 @@ import { ScrollableSection } from './ScrollableSection/ScrollableSection';
 import HorizontalRulePlugin from '../plugins/HorizontalRulePlugin';
 import { FloatingToolbarPlugin } from '../plugins/FloatingToolbarPlugin';
 import { TableActionMenuPlugin } from '../plugins/TableActionMenuPlugin';
-import { InsertLinkDialog } from './Toolbar/InsertLink';
 
 function onError(error: Error) {
   console.error(error);
@@ -137,7 +136,6 @@ const Editor: FC<EditorProps> = ({
           <HorizontalRulePlugin />
           <FloatingToolbarPlugin />
           <TableActionMenuPlugin />
-          <InsertLinkDialog />
         </div>
       </div>
     </LexicalComposer>
diff --git a/packages/content-editor-plugin/src/components/Toolbar/InsertImage.tsx b/packages/content-editor-plugin/src/components/Toolbar/InsertImage.tsx
index 104e1c150..2b7a65192 100644
--- a/packages/content-editor-plugin/src/components/Toolbar/InsertImage.tsx
+++ b/packages/content-editor-plugin/src/components/Toolbar/InsertImage.tsx
@@ -2,14 +2,8 @@ import React, { useState } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { Button, Icon } from '@jpmorganchase/mosaic-components';
 import { string, object } from 'yup';
-import {
-  ButtonBar,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  FormField,
-  Input
-} from '@salt-ds/lab';
+import { Input, FormField, FormFieldLabel, FormFieldHelperText } from '@salt-ds/core';
+import { ButtonBar, DialogTitle, DialogContent, DialogActions } from '@salt-ds/lab';
 
 import { ToolbarButton } from './ToolbarButton';
 import { Dialog } from '../Dialog';
@@ -52,11 +46,16 @@ export const InsertImage = () => {
 
   const handleOpenChange = (open: boolean) => {
     setIsOpen(open);
+    if (!open) {
+      setValues(initialState);
+    }
   };
 
   const handleOpen = () => setIsOpen(true);
 
-  const handleClose = () => setIsOpen(false);
+  const handleClose = () => {
+    handleOpenChange(false);
+  };
 
   const processErrors = validationErrors => {
     const newErrors = validationErrors.inner.reduce(
@@ -69,8 +68,8 @@ export const InsertImage = () => {
     setErrors(newErrors);
   };
 
-  const handleChange = (event, value) => {
-    const { name } = event.target;
+  const handleChange = event => {
+    const { name, value } = event.target;
     const newValues = { ...values, [name]: value };
     validationSchema.validateAt(name, newValues, { abortEarly: false }).then(() => {
       setErrors({ ...errors, [name]: undefined });
@@ -101,22 +100,18 @@ export const InsertImage = () => {
           <DialogTitle>Insert Image</DialogTitle>
           <DialogContent>
             <div className={styles.fullWidth}>
-              <FormField
-                label="Url for image"
-                validationStatus={errors?.url ? 'error' : undefined}
-                helperText={errors?.url}
-              >
+              <FormField validationStatus={errors?.url ? 'error' : undefined}>
+                <FormFieldLabel>Url for image</FormFieldLabel>
                 <Input value={values?.url} inputProps={{ name: 'url' }} onChange={handleChange} />
+                <FormFieldHelperText>{errors?.url}</FormFieldHelperText>
               </FormField>
-              <FormField
-                label="Alternative Information (alt)"
-                validationStatus={errors?.alt ? 'error' : undefined}
-                helperText={
-                  errors?.alt ||
-                  'Provides alternative information for the image if for some reason it cannot be viewed'
-                }
-              >
+              <FormField validationStatus={errors?.alt ? 'error' : undefined}>
+                <FormFieldLabel>Alternative Information (alt)</FormFieldLabel>
                 <Input value={values?.alt} inputProps={{ name: 'alt' }} onChange={handleChange} />
+                <FormFieldHelperText>
+                  {errors?.alt ||
+                    'Provides alternative information for the image if for some reason it cannot be viewed'}
+                </FormFieldHelperText>
               </FormField>
             </div>
           </DialogContent>
diff --git a/packages/content-editor-plugin/src/components/Toolbar/InsertLink.tsx b/packages/content-editor-plugin/src/components/Toolbar/InsertLink.tsx
index 467b4ecdf..8dce426e8 100644
--- a/packages/content-editor-plugin/src/components/Toolbar/InsertLink.tsx
+++ b/packages/content-editor-plugin/src/components/Toolbar/InsertLink.tsx
@@ -2,14 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { Button, Icon } from '@jpmorganchase/mosaic-components';
 import { string, object } from 'yup';
-import {
-  FormField,
-  Input,
-  ButtonBar,
-  DialogTitle,
-  DialogContent,
-  DialogActions
-} from '@salt-ds/lab';
+import { Input, FormField, FormFieldLabel, FormFieldHelperText } from '@salt-ds/core';
+import { ButtonBar, DialogTitle, DialogContent, DialogActions } from '@salt-ds/lab';
 import { $getSelection, $isRangeSelection } from 'lexical';
 
 import { ToolbarButton } from './ToolbarButton';
@@ -20,7 +14,7 @@ import styles from './InsertLink.css';
 
 const validationSchema = object({
   url: string().required('Url is required'),
-  text: string().required('Text is required').max(10, 'Text must be fewer than 100 characters')
+  text: string().required('Text is required').max(100, 'Text must be fewer than 100 characters')
 });
 
 export const InsertLinkButton = () => {
@@ -37,7 +31,8 @@ export const InsertLinkButton = () => {
 };
 
 const initialState = {
-  url: 'https://'
+  url: 'https://',
+  text: ''
 };
 
 type FormValueState =
@@ -78,7 +73,7 @@ export const InsertLinkDialog = () => {
         const selection = $getSelection();
         if ($isRangeSelection(selection)) {
           const textContent = selection.getTextContent();
-          setValues(values => ({ ...values, text: textContent }));
+          setValues(prevState => ({ ...prevState, text: textContent }));
         }
       }
     });
@@ -95,8 +90,8 @@ export const InsertLinkDialog = () => {
     setErrors(newErrors);
   };
 
-  const handleChange = (event, value) => {
-    const { name } = event.target;
+  const handleChange = event => {
+    const { name, value } = event.target;
     const newValues = { ...values, [name]: value };
     validationSchema.validateAt(name, newValues, { abortEarly: false }).then(() => {
       setErrors({ ...errors, [name]: undefined });
@@ -104,8 +99,7 @@ export const InsertLinkDialog = () => {
     setValues(newValues);
   };
 
-  const handleSubmit = async event => {
-    event.preventDefault();
+  const handleSubmit = async () => {
     validationSchema.validate(values, { abortEarly: false }).then(() => {
       const payload: InsertLinkPayload = {
         url: values?.url,
@@ -118,35 +112,29 @@ export const InsertLinkDialog = () => {
 
   return (
     <Dialog onOpenChange={handleOpenChange} open={isInsertingLink}>
-      <form onSubmit={handleSubmit} noValidate>
-        <DialogTitle>Insert Link</DialogTitle>
-        <DialogContent>
-          <div className={styles.fullWidth}>
-            <FormField
-              label="Image URL text"
-              validationStatus={errors?.url ? 'error' : undefined}
-              helperText={errors?.url}
-            >
-              <Input value={values?.url} inputProps={{ name: 'url' }} onChange={handleChange} />
-            </FormField>
-            <FormField
-              label="Link text"
-              validationStatus={errors?.text ? 'error' : undefined}
-              helperText={errors?.text}
-            >
-              <Input value={values?.text} inputProps={{ name: 'text' }} onChange={handleChange} />
-            </FormField>
-          </div>
-        </DialogContent>
-        <DialogActions>
-          <ButtonBar>
-            <Button onClick={handleClose}>Cancel</Button>
-            <Button variant="cta" type="submit">
-              Insert
-            </Button>
-          </ButtonBar>
-        </DialogActions>
-      </form>
+      <DialogTitle>Insert Link</DialogTitle>
+      <DialogContent>
+        <div className={styles.fullWidth}>
+          <FormField validationStatus={errors?.url ? 'error' : undefined}>
+            <FormFieldLabel>Image URL text</FormFieldLabel>
+            <Input value={values?.url} inputProps={{ name: 'url' }} onChange={handleChange} />
+            <FormFieldHelperText>{errors?.url}</FormFieldHelperText>
+          </FormField>
+          <FormField validationStatus={errors?.text ? 'error' : undefined}>
+            <FormFieldLabel>Link Text</FormFieldLabel>
+            <Input value={values?.text} inputProps={{ name: 'text' }} onChange={handleChange} />
+            <FormFieldHelperText>{errors?.text}</FormFieldHelperText>
+          </FormField>
+        </div>
+      </DialogContent>
+      <DialogActions>
+        <ButtonBar>
+          <Button onClick={handleClose}>Cancel</Button>
+          <Button variant="cta" onClick={handleSubmit}>
+            Insert
+          </Button>
+        </ButtonBar>
+      </DialogActions>
     </Dialog>
   );
 };