yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { BoldIcon, ItalicIcon } from "@heroicons/react/24/outline";
2import { useEditor } from "prosekit/react";
3import { InlinePopover } from "prosekit/react/inline-popover";
4import type { EditorExtension } from "@/helpers/prosekit/extension";
5import Toggle from "./Toggle";
6
7const InlineMenu = () => {
8 const editor = useEditor<EditorExtension>({ update: true });
9
10 return (
11 <InlinePopover className="z-10 flex space-x-1 rounded-xl border border-gray-200 bg-white p-1 shadow-xs dark:border-gray-700 dark:bg-gray-900">
12 <Toggle
13 disabled={!editor.commands.toggleBold.canApply()}
14 onClick={() => editor.commands.toggleBold()}
15 pressed={editor.marks.bold.isActive()}
16 tooltip="Bold"
17 >
18 <BoldIcon className="size-4" />
19 </Toggle>
20 <Toggle
21 disabled={!editor.commands.toggleItalic.canApply()}
22 onClick={() => editor.commands.toggleItalic()}
23 pressed={editor.marks.italic.isActive()}
24 tooltip="Italic"
25 >
26 <ItalicIcon className="size-4" />
27 </Toggle>
28 </InlinePopover>
29 );
30};
31
32export default InlineMenu;