Extensions
Auto Link
Automatically detect and convert URLs into link nodes
The Auto Link extension detects URLs as users type and automatically converts them into clickable link nodes.
Demo
import { createEditorConfig, defaultExtensionNodes, defaultTheme, EditorContent, EditorRoot,} from "@typix-editor/react";import { AutoLinkExtension } from "@typix-editor/extension-auto-link";import { Toolbar } from "./Toolbar";const config = createEditorConfig({ extensionNodes: defaultExtensionNodes, theme: defaultTheme,});export default function AutoLinkExample() { return ( <EditorRoot config={config}> <div className="editor-container"> <Toolbar /> <EditorContent placeholder="Type a URL and it becomes a link..." /> </div> <AutoLinkExtension /> </EditorRoot> );}Installation
pnpm add @typix-editor/extension-auto-linknpm install @typix-editor/extension-auto-linkyarn add @typix-editor/extension-auto-linkSetup
import { AutoLinkExtension } from '@typix-editor/extension-auto-link';
function MyEditor() {
return (
<EditorRoot>
<EditorContent />
<AutoLinkExtension />
</EditorRoot>
);
}The AutoLinkNode is already included in defaultExtensionNodes, so you don't need to add it to your config.
Exports
| Export | Type | Description |
|---|---|---|
AutoLinkExtension | Component | The auto-link detection plugin |
Behavior
- Detects URLs matching
http://,https://,mailto:,tel:, andsms:protocols - Converts matching text into
AutoLinkNodeinstances - Works in real-time as the user types
- Preserves the original text as the link label