@explita/editor/dist/components/Link.js

`@explita/editor` is a versatile, modern rich-text editor built on TipTap for seamless integration into React applications. It provides extensive customization options and advanced features to cater to diverse content creation needs.

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { useEditorStore } from "../store/useEditorState";
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "./ui/dropdown-menu";
import { LuCheck, LuLink2 } from "react-icons/lu";
import { Input } from "./ui/input";
import { Button } from "./ui/button";
export function Link() {
    const { editor } = useEditorStore();
    const [current, setCurrent] = useState(editor?.getAttributes("link").href || "");
    function onChange(href) {
        editor?.chain().focus().extendMarkRange("link").setLink({ href }).run();
        setCurrent("");
    }
    return (_jsxs(DropdownMenu, { onOpenChange: (open) => {
            if (open) {
                setCurrent(editor?.getAttributes("link").href || "");
            }
        }, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { title: "Add Link", className: "toolbar-button", children: _jsx(LuLink2, { size: 16 }) }) }), _jsxs(DropdownMenuContent, { className: "explitaeditor:p-2.5 explitaeditor:flex explitaeditor:items-center explitaeditor:gap-x-2", children: [_jsx(Input, { placeholder: "https://www.example.com", value: current, onChange: (e) => setCurrent(e.target.value) }), _jsx(Button, { onClick: () => onChange(current), size: "icon", children: _jsx(LuCheck, {}) })] })] }));
}