feat: optional callback for the link dialog plugin (#335)

Co-authored-by: vhash <[email protected]> Co-authored-by: Petyo Ivanov <[email protected]>
mdx-editor · Jan 30, 2024 · 95e55cd · 95e55cd
1 parent 796e631
commit 95e55cd
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 8 deletions.
diff --git a/src/plugins/link-dialog/LinkDialog.tsx b/src/plugins/link-dialog/LinkDialog.tsx
@@ -18,7 +18,8 @@ import {
   onWindowChange$,
   removeLink$,
   switchFromPreviewToLinkEdit$,
-  updateLink$
+  updateLink$,
+  onClickLinkCallback$
 } from '.'
 import { useCellValues, usePublisher } from '@mdxeditor/gurx'
 
@@ -97,13 +98,15 @@ export function LinkEditForm({ url, title, onSubmit, onCancel, linkAutocompleteS
 
 /** @internal */
 export const LinkDialog: React.FC = () => {
-  const [editorRootElementRef, activeEditor, iconComponentFor, linkDialogState, linkAutocompleteSuggestions] = useCellValues(
-    editorRootElementRef$,
-    activeEditor$,
-    iconComponentFor$,
-    linkDialogState$,
-    linkAutocompleteSuggestions$
-  )
+  const [editorRootElementRef, activeEditor, iconComponentFor, linkDialogState, linkAutocompleteSuggestions, onClickLinkCallback] =
+    useCellValues(
+      editorRootElementRef$,
+      activeEditor$,
+      iconComponentFor$,
+      linkDialogState$,
+      linkAutocompleteSuggestions$,
+      onClickLinkCallback$
+    )
   const publishWindowChange = usePublisher(onWindowChange$)
   const updateLink = usePublisher(updateLink$)
   const cancelLinkEdit = usePublisher(cancelLinkEdit$)
@@ -168,11 +171,18 @@ export const LinkDialog: React.FC = () => {
                 className={styles.linkDialogPreviewAnchor}
                 href={linkDialogState.url}
                 {...(urlIsExternal ? { target: '_blank', rel: 'noreferrer' } : {})}
+                onClick={(e) => {
+                  if (onClickLinkCallback !== null) {
+                    e.preventDefault()
+                    onClickLinkCallback(linkDialogState.url)
+                  }
+                }}
                 title={urlIsExternal ? `Open ${linkDialogState.url} in new window` : linkDialogState.url}
               >
                 <span>{linkDialogState.url}</span>
                 {urlIsExternal && iconComponentFor('open_in_new')}
               </a>
+
               <ActionButton onClick={() => switchFromPreviewToLinkEdit()} title="Edit link URL" aria-label="Edit link URL">
                 {iconComponentFor('edit')}
               </ActionButton>

diff --git a/src/plugins/link-dialog/index.ts b/src/plugins/link-dialog/index.ts
@@ -318,15 +318,31 @@ export const openLinkEditDialog$ = Action((r) => {
 /** @internal */
 export const linkAutocompleteSuggestions$ = Cell<string[]>([])
 
+export type ClickLinkCallback = (url: string) => void
+
+/** @internal */
+export const onClickLinkCallback$ = Cell<ClickLinkCallback | null>(null)
+
 /**
  * @group Link Dialog
  */
 export const linkDialogPlugin = realmPlugin<{
+  /**
+   * If passed, the link dialog will be rendered using this component instead of the default one.
+   */
   LinkDialog?: () => JSX.Element
+  /**
+   * If passed, the link input field will autocomplete using the published suggestions.
+   */
   linkAutocompleteSuggestions?: string[]
+  /**
+   * If set, clicking on the link in the preview popup will call this callback instead of opening the link.
+   */
+  onClickLinkCallback?: ClickLinkCallback
 }>({
   init(r, params) {
     r.pub(addComposerChild$, params?.LinkDialog || LinkDialog)
+    r.pub(onClickLinkCallback$, params?.onClickLinkCallback ?? null)
   },
   update(r, params = {}) {
     r.pub(linkAutocompleteSuggestions$, params.linkAutocompleteSuggestions || [])