Name: Typix
Author: Diyorbek Juraev

The Link extension provides URL validation for link nodes in the editor. It wraps Lexical's LinkPlugin with Typix's URL validation.

Demo

Loading preview…

import {  createEditorConfig,  defaultExtensionNodes,  defaultTheme,  EditorContent,  EditorRoot,} from "@typix-editor/react";import { LinkExtension } from "@typix-editor/extension-link";import { Toolbar } from "./Toolbar";const config = createEditorConfig({  extensionNodes: defaultExtensionNodes,  theme: defaultTheme,});export default function LinkExample() {  return (    <EditorRoot config={config}>      <div className="editor-container">        <Toolbar />        <EditorContent placeholder="Select text and use Ctrl+K to add a link..." />      </div>      <LinkExtension />    </EditorRoot>  );}

Installation

pnpm add @typix-editor/extension-link

npm install @typix-editor/extension-link

yarn add @typix-editor/extension-link

Setup

import { LinkExtension } from '@typix-editor/extension-link';

function MyEditor() {
  return (
    <EditorRoot>
      <EditorContent />
      <LinkExtension />
    </EditorRoot>
  );
}

LinkNode is included in defaultExtensionNodes, so no additional node registration is needed.

Custom URL validation

<LinkExtension
  validateUrl={(url) => {
    // Only allow HTTPS URLs
    return url.startsWith('https://');
  }}
/>

Props

Prop	Type	Default	Description
`validateUrl`	`(url: string) => boolean`	`validateUrl` from core	Custom URL validator function

Exports

Export	Type	Description
`LinkExtension`	Component	The link validation plugin
`LinkExtensionProps`	Type	Props type

Floating Link — Floating link editor UI
Auto Link — Auto-detect URLs
URL Utilities — sanitizeUrl and validateUrl

Link