'use client'; import React from 'react'; import { cn } from '@udecode/cn'; import { useFormInputProps } from '@udecode/plate-common/react'; import { type UseVirtualFloatingOptions, flip, offset, } from '@udecode/plate-floating'; import { type LinkFloatingToolbarState, FloatingLinkUrlInput, LinkOpenButton, useFloatingLinkEdit, useFloatingLinkEditState, useFloatingLinkInsert, useFloatingLinkInsertState, } from '@udecode/plate-link/react'; import { ExternalLink, Link, Text, Unlink } from 'lucide-react'; import { buttonVariants } from './button'; import { inputVariants } from './input'; import { popoverVariants } from './popover'; import { Separator } from './separator'; const floatingOptions: UseVirtualFloatingOptions = { middleware: [ offset(12), flip({ fallbackPlacements: ['bottom-end', 'top-start', 'top-end'], padding: 12, }), ], placement: 'bottom-start', }; export interface LinkFloatingToolbarProps { state?: LinkFloatingToolbarState; } export function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) { const insertState = useFloatingLinkInsertState({ ...state, floatingOptions: { ...floatingOptions, ...state?.floatingOptions, }, }); const { hidden, props: insertProps, ref: insertRef, textInputProps, } = useFloatingLinkInsert(insertState); const editState = useFloatingLinkEditState({ ...state, floatingOptions: { ...floatingOptions, ...state?.floatingOptions, }, }); const { editButtonProps, props: editProps, ref: editRef, unlinkButtonProps, } = useFloatingLinkEdit(editState); const inputProps = useFormInputProps({ preventDefaultOnEnterKeydown: true, }); if (hidden) return null; const input = (

); const editContent = editState.isEditing ? ( input ) : (

); return ( <>

{input}

{editContent}

); }

Link Floating Toolbar

Installation

Examples

Link