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
import { createEditorConfig, defaultExtensionNodes, defaultTheme, EditorContent, EditorRoot,} from "@typix-editor/react";import { LinkExtension } from "@typix-editor/extension-link";import { FloatingLinkExtension } from "@typix-editor/extension-floating-link";import { AutoLinkExtension } from "@typix-editor/extension-auto-link";import { Toolbar } from "./Toolbar";const config = createEditorConfig({ extensionNodes: defaultExtensionNodes, theme: defaultTheme, initialState: { root: { children: [ { children: [ { detail: 0, format: 0, mode: "normal", style: "", text: "Visit ", type: "text", version: 1 }, { children: [{ detail: 0, format: 0, mode: "normal", style: "", text: "typix.uz", type: "text", version: 1 }], direction: "ltr", format: "", indent: 0, type: "link", version: 1, rel: "noreferrer", target: null, title: null, url: "https://typix.uz", }, { detail: 0, format: 0, mode: "normal", style: "", text: " — Ctrl+click to open.", type: "text", version: 1 }, ], direction: "ltr", format: "", indent: 0, type: "paragraph", version: 1, textFormat: 0, textStyle: "", }, ], direction: "ltr", format: "", indent: 0, type: "root", version: 1, }, } as any,});export default function FloatingLinkExample() { return ( <EditorRoot config={config}> <div className="editor-container"> <Toolbar /> <EditorContent placeholder="Select text, then use Ctrl+K or the link button..." /> </div> <LinkExtension /> <FloatingLinkExtension /> <AutoLinkExtension /> </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