yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import getAvatar from "@hey/helpers/getAvatar";
2import { Image } from "@/components/Shared/UI";
3import { defineEditorExtension } from "@/helpers/prosekit/extension";
4import { htmlFromMarkdown } from "@/helpers/prosekit/markdown";
5import useContentChange from "@/hooks/prosekit/useContentChange";
6import useFocus from "@/hooks/prosekit/useFocus";
7import { usePaste } from "@/hooks/prosekit/usePaste";
8import { usePostStore } from "@/store/non-persisted/post/usePostStore";
9import { useAccountStore } from "@/store/persisted/useAccountStore";
10import "prosekit/basic/style.css";
11import { createEditor } from "prosekit/core";
12import { ProseKit } from "prosekit/react";
13import { useMemo, useRef } from "react";
14import { useEditorHandle } from "./EditorHandle";
15import EditorMenus from "./EditorMenus";
16
17interface EditorProps {
18 isComment: boolean;
19}
20
21const Editor = ({ isComment }: EditorProps) => {
22 const { currentAccount } = useAccountStore();
23 const { postContent } = usePostStore();
24 const defaultMarkdownRef = useRef(postContent);
25
26 const defaultContent = useMemo(() => {
27 const markdown = defaultMarkdownRef.current;
28 return markdown ? htmlFromMarkdown(markdown) : undefined;
29 }, []);
30
31 const editor = useMemo(() => {
32 const extension = defineEditorExtension();
33 return createEditor({ defaultContent, extension });
34 }, [defaultContent]);
35
36 useFocus(editor, isComment);
37 useContentChange(editor);
38 usePaste(editor);
39 useEditorHandle(editor);
40
41 return (
42 <ProseKit editor={editor}>
43 <div className="box-border flex size-full justify-stretch overflow-y-auto overflow-x-hidden px-5 py-4">
44 <Image
45 alt={currentAccount?.address}
46 className="mr-3 size-11 rounded-full border border-gray-200 bg-gray-200 dark:border-gray-700"
47 src={getAvatar(currentAccount)}
48 />
49 <div className="flex flex-1 flex-col overflow-x-hidden">
50 <EditorMenus />
51 <div
52 className="relative mt-[8.5px] box-border h-full min-h-[80px] flex-1 overflow-auto leading-6 outline-0 sm:leading-[26px]"
53 ref={editor.mount}
54 />
55 </div>
56 </div>
57 </ProseKit>
58 );
59};
60
61export default Editor;