Merge pull request udecode#3389 from georeith/feat/link-transform-input

feat: add transformInput to LinkPlugin

.changeset/quick-falcons-vanish.md

@@ -0,0 +1,6 @@
+---
+'@udecode/plate-link': minor
+---
+
+feat:`LinkPlugin` new option `transformInput: (url: string) => string | undefined;` that optionally transform's the
+submitted URL provided by the user to the URL input before validation.

apps/www/content/docs/link.mdx

@@ -106,6 +106,9 @@ Callback function to validate a URL.
 <APIItem name="getUrlHref" type="(url: string) => string | undefined" optional>
 Callback function to optionally get the href for a URL. It returns an optional link that is different from the text content. For example, returns `https://google.com` for `google.com`.
 </APIItem>
+<APIItem name="transformInput" type="(url: string | null) => string | undefined" optional>
+Callback function to optionally transform the submitted URL provided by the user to the URL input before validation.
+</APIItem>
 <APIItem name="getLinkUrl" type="(prevUrl: string | null) => Promise<string | null>" optional>
 On keyboard shortcut or toolbar mousedown, this function is called to get the link URL. The default behavior is to use the browser's native `prompt`.
 </APIItem>

packages/link/src/createLinkPlugin.ts

@@ -76,6 +76,17 @@ export interface LinkPlugin {
    */
   rangeBeforeOptions?: RangeBeforeOptions;
 
+  /**
+   * Transform the content of the URL input before validating it. Useful for
+   * adding a protocol to a URL. E.g. `google.com` -> `https://google.com`
+   *
+   * Similar to `getUrlHref` but is used on URL inputs. Whereas that is used on
+   * any entered text.
+   *
+   * @returns The transformed URL.
+   */
+  transformInput?: (url: string) => string | undefined;
+
   /**
    * Hotkeys to trigger floating link.
    *

packages/link/src/transforms/submitFloatingLink.ts

@@ -20,9 +20,13 @@ import { upsertLink } from './index';
 export const submitFloatingLink = <V extends Value>(editor: PlateEditor<V>) => {
   if (!editor.selection) return;
 
-  const { forceSubmit } = getPluginOptions<LinkPlugin, V>(editor, ELEMENT_LINK);
+  const { forceSubmit, transformInput } = getPluginOptions<LinkPlugin, V>(
+    editor,
+    ELEMENT_LINK
+  );
 
-  const url = floatingLinkSelectors.url();
+  const inputUrl = floatingLinkSelectors.url();
+  const url = transformInput ? transformInput(inputUrl) ?? '' : inputUrl;
 
   if (!forceSubmit && !validateUrl(editor, url)) return;