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> );}