@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.
47 lines (46 loc) • 3.19 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FiEdit } from "react-icons/fi";
import { useEditorStore } from "../store/useEditorState";
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "./ui/dropdown-menu";
import { CgMoreVerticalR } from "react-icons/cg";
import { Separator } from "./ui/separator";
import { LuGlobe, LuTextCursor, LuX } from "react-icons/lu";
import { BsFiletypeJson } from "react-icons/bs";
import { FaFilePdf } from "react-icons/fa6";
export function Menu({ onClose, onCreateNew }) {
const { editor } = useEditorStore();
function onExport(blob, filename) {
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
}
function onExportJSON() {
if (!editor)
return;
const json = editor?.getJSON();
const blob = new Blob([JSON.stringify(json)], { type: "application/json" });
onExport(blob, "document.json");
}
function onExportHTML() {
if (!editor)
return;
const html = editor?.getHTML();
const blob = new Blob([html], { type: "text/html" });
onExport(blob, "document.html");
}
function onExportText() {
if (!editor)
return;
const text = editor?.getText();
const blob = new Blob([text], { type: "text/plain" });
onExport(blob, "document.txt");
}
return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { title: "Menu", className: "toolbar-button", children: _jsx(CgMoreVerticalR, { size: 16 }) }) }), _jsxs(DropdownMenuContent, { align: "start", className: "editor-dropdown-content", children: [_jsxs("button", { onClick: onCreateNew, className: "editor-dropdown-menu-button", children: [_jsx(FiEdit, { size: 16 }), "New Document"] }), _jsx(Separator, { orientation: "horizontal", className: "separator" }), _jsxs("button", { className: "editor-dropdown-menu-button", onClick: () => {
if (confirm(`To export the document as a PDF, click the 'Print' button below, on the menubar or toolbar. Then, in the print dialog box that appears, select 'Save as PDF' and click 'Save' button to save the document.`))
window.print();
}, children: [_jsx(FaFilePdf, { size: 16 }), "Download PDF"] }), _jsxs("button", { className: "editor-dropdown-menu-button", onClick: onExportHTML, children: [_jsx(LuGlobe, { size: 16 }), "Download HTML"] }), _jsxs("button", { className: "editor-dropdown-menu-button", onClick: onExportJSON, children: [_jsx(BsFiletypeJson, { size: 16 }), "Download JSON"] }), _jsxs("button", { className: "editor-dropdown-menu-button", onClick: onExportText, children: [_jsx(LuTextCursor, { size: 16 }), "Download Text"] }), _jsx(Separator, { orientation: "horizontal", className: "separator" }), _jsxs("button", { className: "editor-dropdown-menu-button", onClick: onClose, children: [_jsx(LuX, { size: 16 }), "Close"] })] })] }));
}