feat(richtext-lexical): adds ability to disable auto link creation (#11563)

This adds a new `disableAutoLinks` property to the `LinkFeature` that lets you disable the automatic creation of links while typing them in the editor or pasting them.

Author: AlessioGr

packages/richtext-lexical/src/features/link/client/index.tsx

@@ -1,11 +1,12 @@
 'use client'
 
-import type { LexicalNode } from 'lexical'
+import type { Klass, LexicalNode } from 'lexical'
 
 import { $findMatchingParent } from '@lexical/utils'
 import { $getSelection, $isRangeSelection } from 'lexical'
 
 import type { ToolbarGroup } from '../../toolbars/types.js'
+import type { ClientFeature } from '../../typesClient.js'
 import type { LinkFields } from '../nodes/types.js'
 import type { ExclusiveLinkCollectionsProps } from '../server/index.js'
 
@@ -25,6 +26,7 @@ import { LinkPlugin } from './plugins/link/index.js'
 export type ClientProps = {
   defaultLinkType?: string
   defaultLinkURL?: string
+  disableAutoLinks?: 'creationOnly' | true
 } & ExclusiveLinkCollectionsProps
 
 const toolbarGroups: ToolbarGroup[] = [
@@ -80,18 +82,22 @@ const toolbarGroups: ToolbarGroup[] = [
   ]),
 ]
 
-export const LinkFeatureClient = createClientFeature({
+export const LinkFeatureClient = createClientFeature<ClientProps>(({ props }) => ({
   markdownTransformers: [LinkMarkdownTransformer],
-  nodes: [LinkNode, AutoLinkNode],
+  nodes: [LinkNode, props?.disableAutoLinks === true ? null : AutoLinkNode].filter(
+    Boolean,
+  ) as Array<Klass<LexicalNode>>,
   plugins: [
     {
       Component: LinkPlugin,
       position: 'normal',
     },
-    {
-      Component: AutoLinkPlugin,
-      position: 'normal',
-    },
+    props?.disableAutoLinks === true || props?.disableAutoLinks === 'creationOnly'
+      ? null
+      : {
+          Component: AutoLinkPlugin,
+          position: 'normal',
+        },
     {
       Component: ClickableLinkPlugin,
       position: 'normal',
@@ -100,11 +106,12 @@ export const LinkFeatureClient = createClientFeature({
       Component: FloatingLinkEditorPlugin,
       position: 'floatingAnchorElem',
     },
-  ],
+  ].filter(Boolean) as ClientFeature<ClientProps>['plugins'],
+  sanitizedClientFeatureProps: props,
   toolbarFixed: {
     groups: toolbarGroups,
   },
   toolbarInline: {
     groups: toolbarGroups,
   },
-})
+}))

packages/richtext-lexical/src/features/link/server/index.ts

@@ -10,6 +10,7 @@ import type {
 import escapeHTML from 'escape-html'
 import { sanitizeFields } from 'payload'
 
+import type { NodeWithHooks } from '../../typesServer.js'
 import type { ClientProps } from '../client/index.js'
 
 import { createServerFeature } from '../../../utilities/createServerFeature.js'
@@ -46,6 +47,16 @@ export type ExclusiveLinkCollectionsProps =
     }
 
 export type LinkFeatureServerProps = {
+  /**
+   * Disables the automatic creation of links from URLs pasted into the editor, as well
+   * as auto link nodes.
+   *
+   * If set to 'creationOnly', only the creation of new auto link nodes will be disabled.
+   * Existing auto link nodes will still be editable.
+   *
+   * @default false
+   */
+  disableAutoLinks?: 'creationOnly' | true
   /**
    * A function or array defining additional fields for the link feature. These will be
    * displayed in the link editor drawer.
@@ -130,6 +141,7 @@ export const LinkFeature = createServerFeature<
       clientFeatureProps: {
         defaultLinkType,
         defaultLinkURL,
+        disableAutoLinks: props.disableAutoLinks,
         disabledCollections: props.disabledCollections,
         enabledCollections: props.enabledCollections,
       } as ClientProps,
@@ -148,55 +160,57 @@ export const LinkFeature = createServerFeature<
       i18n,
       markdownTransformers: [LinkMarkdownTransformer],
       nodes: [
-        createNode({
-          converters: {
-            html: {
-              converter: async ({
-                converters,
-                currentDepth,
-                depth,
-                draft,
-                node,
-                overrideAccess,
-                parent,
-                req,
-                showHiddenFields,
-              }) => {
-                const childrenText = await convertLexicalNodesToHTML({
-                  converters,
-                  currentDepth,
-                  depth,
-                  draft,
-                  lexicalNodes: node.children,
-                  overrideAccess,
-                  parent: {
-                    ...node,
+        props?.disableAutoLinks === true
+          ? null
+          : createNode({
+              converters: {
+                html: {
+                  converter: async ({
+                    converters,
+                    currentDepth,
+                    depth,
+                    draft,
+                    node,
+                    overrideAccess,
                     parent,
-                  },
-                  req,
-                  showHiddenFields,
-                })
+                    req,
+                    showHiddenFields,
+                  }) => {
+                    const childrenText = await convertLexicalNodesToHTML({
+                      converters,
+                      currentDepth,
+                      depth,
+                      draft,
+                      lexicalNodes: node.children,
+                      overrideAccess,
+                      parent: {
+                        ...node,
+                        parent,
+                      },
+                      req,
+                      showHiddenFields,
+                    })
 
-                const rel: string = node.fields.newTab ? ' rel="noopener noreferrer"' : ''
-                const target: string = node.fields.newTab ? ' target="_blank"' : ''
+                    const rel: string = node.fields.newTab ? ' rel="noopener noreferrer"' : ''
+                    const target: string = node.fields.newTab ? ' target="_blank"' : ''
 
-                let href: string = node.fields.url ?? ''
-                if (node.fields.linkType === 'internal') {
-                  href =
-                    typeof node.fields.doc?.value !== 'object'
-                      ? String(node.fields.doc?.value)
-                      : String(node.fields.doc?.value?.id)
-                }
+                    let href: string = node.fields.url ?? ''
+                    if (node.fields.linkType === 'internal') {
+                      href =
+                        typeof node.fields.doc?.value !== 'object'
+                          ? String(node.fields.doc?.value)
+                          : String(node.fields.doc?.value?.id)
+                    }
 
-                return `<a href="${href}"${target}${rel}>${childrenText}</a>`
+                    return `<a href="${href}"${target}${rel}>${childrenText}</a>`
+                  },
+                  nodeTypes: [AutoLinkNode.getType()],
+                },
               },
-              nodeTypes: [AutoLinkNode.getType()],
-            },
-          },
-          node: AutoLinkNode,
-          // Since AutoLinkNodes are just internal links, they need no hooks or graphQL population promises
-          validations: [linkValidation(props, sanitizedFieldsWithoutText)],
-        }),
+              node: AutoLinkNode,
+              // Since AutoLinkNodes are just internal links, they need no hooks or graphQL population promises
+              validations: [linkValidation(props, sanitizedFieldsWithoutText)],
+            }),
         createNode({
           converters: {
             html: {
@@ -249,7 +263,7 @@ export const LinkFeature = createServerFeature<
           node: LinkNode,
           validations: [linkValidation(props, sanitizedFieldsWithoutText)],
         }),
-      ],
+      ].filter(Boolean) as Array<NodeWithHooks>,
       sanitizedServerFeatureProps: props,
     }
   },