@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.
65 lines (64 loc) • 2.62 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { LuBold, LuItalic, LuList, LuListOrdered, LuStrikethrough, LuSubscript, LuSuperscript, LuUnderline, } from "react-icons/lu";
import { useEditorStore } from "../store/useEditorState";
import { BubbleMenu } from "@tiptap/react";
import { cn } from "../lib/utils";
export function PopupMenu() {
const { editor, editorOpts } = useEditorStore();
if (!editor)
return null;
const buttons = [
{
label: "Bold",
icon: LuBold,
isActive: editor.isActive("bold"),
onClick: () => editor.chain().focus().toggleBold().run(),
},
{
label: "Italic",
icon: LuItalic,
isActive: editor.isActive("italic"),
onClick: () => editor.chain().focus().toggleItalic().run(),
},
{
label: "Underline",
icon: LuUnderline,
isActive: editor.isActive("underline"),
onClick: () => editor?.chain().focus().toggleUnderline().run(),
},
{
label: "Strikethrough",
icon: LuStrikethrough,
isActive: editor.isActive("strike"),
onClick: () => editor.chain().focus().toggleStrike().run(),
},
{
label: "Superscript",
icon: LuSuperscript,
isActive: editor.isActive("superscript"),
onClick: () => editor.chain().focus().toggleSuperscript().run(),
},
{
label: "Subscript",
icon: LuSubscript,
isActive: editor.isActive("subscript"),
onClick: () => editor.chain().focus().toggleSubscript().run(),
},
{
label: "Bullet List",
icon: LuList,
isActive: editor.isActive("bulletList"),
onClick: () => editor.chain().focus().toggleBulletList().run(),
},
{
label: "Ordered List",
icon: LuListOrdered,
isActive: editor.isActive("orderedList"),
onClick: () => editor.chain().focus().toggleOrderedList().run(),
},
];
return (_jsx(BubbleMenu, { editor: editor, tippyOptions: { duration: 100 }, children: _jsx("div", { className: "bubble-menu", style: {
transform: `scale(${editorOpts.zoomLevel})`,
}, children: buttons.map(({ label, icon: Icon, isActive, onClick }) => (_jsx("button", { onClick: onClick, className: cn("toolbar-button", isActive && "editor-item-active"), title: label, children: _jsx(Icon, { size: 13 }) }, label))) }) }));
}