tessl/npm-udecode--plate-link

Link plugin for Plate rich text editor providing hyperlink functionality with URL validation, keyboard shortcuts, and UI components

—

Pending

Overview

Eval results

Files

Core Link Plugin

Name: tessl/npm-udecode--plate-link
Author: tessl

The BaseLinkPlugin provides foundational hyperlink functionality for Plate editors, including automatic link detection, HTML serialization, and configurable URL validation.

Capabilities

BaseLinkPlugin

Core plugin that enables hyperlink support with automatic wrapping, paste handling, and HTML serialization.

/**
 * Core link plugin with editor overrides, HTML parsing, and normalization
 */
const BaseLinkPlugin: PlatePlugin<BaseLinkConfig>;

type BaseLinkConfig = PluginConfig<'a', {
  /** List of allowed URL schemes @default ['http', 'https', 'mailto', 'tel'] */
  allowedSchemes?: string[];
  /** Skips sanitation of links @default false */
  dangerouslySkipSanitization?: boolean;
  /** Default HTML attributes for link elements */
  defaultLinkAttributes?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
  /** Forces form submission behavior */
  forceSubmit?: boolean;
  /** Keeps selected text on pasting links @default true */
  keepSelectedTextOnPaste?: boolean;
  /** Custom config for rangeBeforeOptions */
  rangeBeforeOptions?: EditorBeforeOptions;
  /** Hotkeys to trigger floating link @default 'meta+k, ctrl+k' */
  triggerFloatingLinkHotkeys?: string[] | string;
  /** Promise-based URL getter for keyboard shortcuts */
  getLinkUrl?: (prevUrl: string | null) => Promise<string | null>;
  /** Callback to get href for a URL */
  getUrlHref?: (url: string) => string | undefined;
  /** URL validation function @default isUrl */
  isUrl?: (text: string) => boolean;
  /** Transform URL input before validation */
  transformInput?: (url: string) => string | undefined;
}>;

Usage Examples:

import { createPlateEditor } from "@udecode/plate";
import { BaseLinkPlugin } from "@udecode/plate-link";

// Basic setup
const editor = createPlateEditor({
  plugins: [BaseLinkPlugin]
});

// Custom configuration
const customEditor = createPlateEditor({
  plugins: [
    BaseLinkPlugin.configure({
      options: {
        allowedSchemes: ['http', 'https', 'ftp'],
        defaultLinkAttributes: { target: '_blank', rel: 'noopener' },
        transformInput: (url) => {
          // Auto-add https:// to bare domains
          if (!url.includes('://') && !url.startsWith('/')) {
            return `https://${url}`;
          }
          return url;
        }
      }
    })
  ]
});

withLink Editor Enhancement

Editor enhancement function that adds automatic link wrapping behavior, paste handling, and normalization.

/**
 * Editor enhancement adding automatic link detection and paste handling
 * @param editor - The Slate editor instance
 * @param getOptions - Function to get current plugin options
 * @param tf - Transform functions
 * @param type - Node type for links
 */
const withLink: OverrideEditor<BaseLinkConfig>;

Key Features:

Auto-wrapping: Automatically wraps URLs in link elements when typing space or pressing enter
Paste handling: Intelligently handles pasted URLs, preserving or replacing selected text
Normalization: Ensures proper cursor positioning and text node structure around links

Usage Examples:

import { createSlateEditor } from '@udecode/plate';
import { withLink } from '@udecode/plate-link';

// Applied automatically by BaseLinkPlugin
const editor = createSlateEditor().overrideEditor(withLink);

Plugin Configuration Options

URL Scheme Validation

Control which URL schemes are considered valid links.

BaseLinkPlugin.configure({
  options: {
    allowedSchemes: ['http', 'https', 'mailto', 'tel', 'ftp']
  }
});

Custom URL Processing

Transform and validate URLs with custom logic.

BaseLinkPlugin.configure({
  options: {
    // Transform input before validation
    transformInput: (url) => {
      if (!url.includes('://')) {
        return `https://${url}`;
      }
      return url;
    },
    
    // Custom URL validation
    isUrl: (text) => {
      return /^https?:\/\//.test(text) || text.includes('@');
    },
    
    // Get different href from display text
    getUrlHref: (url) => {
      if (url.startsWith('www.')) {
        return `https://${url}`;
      }
      return url;
    }
  }
});

Paste Behavior Configuration

Control how pasted URLs interact with selected text.

BaseLinkPlugin.configure({
  options: {
    // Keep selected text when pasting URLs
    keepSelectedTextOnPaste: true,
    
    // Custom range detection for auto-wrapping
    rangeBeforeOptions: {
      matchString: ' ',
      skipInvalid: true,
      afterMatch: true,
      matchBlockStart: true
    }
  }
});

Install with Tessl CLI

npx tessl i tessl/npm-udecode--plate-link

docs

core-plugin.md

floating-interface.md