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 { EditorContent, EditorRoot, createEditorConfig, defaultExtensionNodes,} from "@typix-editor/react";import { AutoLinkExtension } from "@typix-editor/extension-auto-link";import { theme } from "./theme";import "./style.css";const config = createEditorConfig({ extensionNodes: defaultExtensionNodes, theme,});export default function AutoLinkExample() { return ( <EditorRoot config={config}> <EditorContent placeholder="Type a URL (e.g. https://typix.dev)..." /> <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