Extensions
Floating Link
Floating link editor UI for creating and editing links
The Floating Link extension provides a floating UI that appears when a link is selected, allowing users to edit, open, or remove links.
Demo
Loading preview...
import { EditorContent, EditorRoot, createEditorConfig, defaultExtensionNodes,} from "@typix-editor/react";import { LinkExtension } from "@typix-editor/extension-link";import { FloatingLinkExtension } from "@typix-editor/extension-floating-link";import { theme } from "./theme";import "./style.css";const config = createEditorConfig({ extensionNodes: defaultExtensionNodes, theme,});export default function FloatingLinkExample() { return ( <EditorRoot config={config}> <EditorContent placeholder="Select text, then use Ctrl+K to insert a link..." /> <LinkExtension /> <FloatingLinkExtension /> </EditorRoot> );}Installation
pnpm add @typix-editor/extension-floating-linknpm install @typix-editor/extension-floating-linkyarn add @typix-editor/extension-floating-linkSetup
import { FloatingLinkExtension } from '@typix-editor/extension-floating-link';
function MyEditor() {
return (
<EditorRoot>
<EditorContent />
<FloatingLinkExtension />
</EditorRoot>
);
}With custom rendering
<FloatingLinkExtension
render={(props) => (
<div className="my-link-editor">
<input value={props.url} onChange={(e) => props.setUrl(e.target.value)} />
<button onClick={props.onConfirm}>Save</button>
<button onClick={props.onRemove}>Remove</button>
</div>
)}
/>Exports
| Export | Type | Description |
|---|---|---|
FloatingLinkExtension | Component | The floating link editor plugin |
FloatingLinkExtensionProps | Type | Props type |
FloatingLinkRenderProps | Type | Props passed to custom render function |
Behavior
- Appears when the cursor is inside a link node
- Shows the current URL with options to edit, open in new tab, or remove
- Positions itself using the floating element positioning utility
- Supports fully custom rendering via the
renderprop