Typix
Loading preview…
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>  );}