yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import type { Editor } from "prosekit/core";
2import { useDocChange } from "prosekit/react";
3import { useCallback, useState } from "react";
4import type { EditorExtension } from "@/helpers/prosekit/extension";
5import { getMarkdownContent } from "@/helpers/prosekit/markdownContent";
6import useDebouncedCallback from "@/hooks/prosekit/useDebouncedCallback";
7import { usePostStore } from "@/store/non-persisted/post/usePostStore";
8
9const DEBOUNCE_CHARS_THRESHOLD = 3000;
10const DEBOUNCE_DELAY = 500;
11
12const useContentChange = (editor: Editor<EditorExtension>) => {
13 const { setPostContent } = usePostStore();
14 const [largeDocument, setLargeDocument] = useState(false);
15
16 const updatePostContent = useCallback(
17 (markdown: string) => {
18 setLargeDocument(markdown.length > DEBOUNCE_CHARS_THRESHOLD);
19 setPostContent(markdown);
20 },
21 [setPostContent]
22 );
23
24 const serializeContent = useCallback(() => {
25 const markdown = getMarkdownContent(editor);
26 updatePostContent(markdown);
27 }, [editor, updatePostContent]);
28
29 // Determine debounce delay based on document size
30 const delay = largeDocument ? DEBOUNCE_DELAY : 0;
31 const debouncedSetContent = useDebouncedCallback(serializeContent, delay);
32
33 useDocChange(debouncedSetContent, { editor });
34};
35
36export default useContentChange;