@explita/editor
Version:
`@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.
43 lines (42 loc) • 2.48 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { useEditorStore } from "../store/useEditorState";
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "./ui/dropdown-menu";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from "./ui/dialog";
import { LuFileInput, LuImage } from "react-icons/lu";
import { Input } from "./ui/input";
import { Button } from "./ui/button";
export function Image() {
const { editor } = useEditorStore();
const [imageURL, setImageURL] = useState("");
const [isDialogOpen, setIsDialogOpen] = useState(false);
function onChange(src) {
editor?.chain().focus().setImage({ src }).run();
}
function onUpload() {
const input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
input.onchange = (e) => {
const file = e.target.files?.[0];
if (file) {
const imageUrl = URL.createObjectURL(file);
onChange(imageUrl);
}
};
input.click();
}
function handleImageURL() {
if (imageURL) {
onChange(imageURL);
setImageURL("");
setIsDialogOpen(false);
}
}
return (_jsxs(_Fragment, { children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { title: "Add Image", className: "toolbar-button", children: _jsx(LuImage, { size: 16 }) }) }), _jsx(DropdownMenuContent, { className: "editor-dropdown-content", children: _jsxs("button", { onClick: () => setIsDialogOpen(true), className: "editor-dropdown-menu-button", children: [_jsx(LuFileInput, { size: 16 }), " Image URL"] }) })] }), _jsx(Dialog, { open: isDialogOpen, onOpenChange: setIsDialogOpen, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { className: "explitaeditor:text-slate-700", children: "Image URL" }) }), _jsx(Input, { placeholder: "Insert url", value: imageURL, onChange: (e) => setImageURL(e.target.value), onKeyDown: (e) => {
if (e.key === "Enter") {
handleImageURL();
}
} }), _jsx(DialogFooter, { children: _jsx(Button, { onClick: handleImageURL, children: "Insert" }) })] }) })] }));
}