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

React Integration

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

The LinkPlugin extends BaseLinkPlugin with React-specific functionality including floating UI, state management, keyboard shortcuts, and component integration.

Capabilities

LinkPlugin

React-enhanced plugin that provides floating link editing interface and advanced state management.

/**
 * React-enhanced link plugin with floating UI and state management
 */
const LinkPlugin: PlatePlugin<LinkConfig>;

type LinkConfig = ExtendConfig<BaseLinkConfig, {
  /** Whether currently in editing mode */
  isEditing: boolean;
  /** Current floating link mode */
  mode: FloatingLinkMode;
  /** Mouse down state for UI interaction */
  mouseDown: boolean;
  /** Whether link should open in new tab */
  newTab: boolean;
  /** ID of editor with open floating UI */
  openEditorId: string | null;
  /** Current text content */
  text: string;
  /** Whether form has been updated */
  updated: boolean;
  /** Current URL value */
  url: string;
  /** Keyboard shortcut override */
  triggerFloatingLinkHotkeys?: string;
}, {
  floatingLink: {
    hide: () => void;
    reset: () => void;
    show: (mode: FloatingLinkMode, editorId: string) => void;
  };
  link: {
    getAttributes: (link: TLinkElement) => React.AnchorHTMLAttributes<HTMLAnchorElement>;
  };
}, {}, {
  isOpen?: (editorId: string) => boolean;
}>;

type FloatingLinkMode = '' | 'edit' | 'insert';

Usage Examples:

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

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

// Access plugin API
const { api } = editor;

// Show floating link in insert mode
api.floatingLink.show('insert', editor.id);

// Hide floating link
api.floatingLink.hide();

// Check if floating link is open
const isOpen = api.isOpen?.(editor.id);

Plugin API Methods

Floating Link Control

Methods for controlling the floating link interface state.

interface FloatingLinkAPI {
  /** Hide the floating link interface */
  hide(): void;
  /** Reset floating link state without hiding */
  reset(): void;
  /** Show floating link interface in specified mode */
  show(mode: FloatingLinkMode, editorId: string): void;
}

Link Utilities

Helper methods for working with link elements.

interface LinkAPI {
  /** Get HTML attributes for a link element */
  getAttributes(link: TLinkElement): React.AnchorHTMLAttributes<HTMLAnchorElement>;
}

Floating Link Modes

The floating link interface operates in different modes for various user interactions.

type FloatingLinkMode = '' | 'edit' | 'insert';

Mode Descriptions:

'' (empty): Interface is hidden
'insert': Interface is in link insertion mode for new links
'edit': Interface is in edit mode for existing links

State Management

Link State Properties

interface LinkState {
  /** Whether currently in editing mode */
  isEditing: boolean;
  /** Current floating link mode */
  mode: FloatingLinkMode;
  /** Mouse interaction state */
  mouseDown: boolean;
  /** New tab checkbox state */
  newTab: boolean;
  /** ID of editor with active floating UI */
  openEditorId: string | null;
  /** Current link text content */
  text: string;
  /** Whether form values have been modified */
  updated: boolean;
  /** Current URL input value */
  url: string;
}

Keyboard Shortcuts

Default keyboard shortcuts for triggering floating link interface.

LinkPlugin.configure({
  options: {
    triggerFloatingLinkHotkeys: 'meta+k, ctrl+k'
  }
});

Custom Shortcuts:

LinkPlugin.configure({
  options: {
    triggerFloatingLinkHotkeys: ['mod+shift+l', 'alt+l']
  }
});

Plugin Selectors

Selector functions for querying plugin state.

interface LinkSelectors {
  /** Check if floating link is open for specific editor */
  isOpen?: (editorId: string) => boolean;
}

Usage Examples:

import { useEditorPlugin } from '@udecode/plate/react';
import { LinkPlugin } from '@udecode/plate-link/react';

function LinkComponent() {
  const { editor, api } = useEditorPlugin(LinkPlugin);
  
  const isFloatingOpen = api.isOpen?.(editor.id);
  
  const handleShowFloating = () => {
    api.floatingLink.show('insert', editor.id);
  };
  
  const handleHideFloating = () => {
    api.floatingLink.hide();
  };
  
  return (
    <div>
      <button onClick={handleShowFloating}>
        Add Link
      </button>
      {isFloatingOpen && (
        <button onClick={handleHideFloating}>
          Cancel
        </button>
      )}
    </div>
  );
}

Install with Tessl CLI

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

docs

core-plugin.md

floating-interface.md

tessl/npm-udecode--plate-link