feat: feedback (#156)

* minimal tiptap

* wip

* img edit block

* wip

* fix

web/components/minimal-tiptap/hooks/use-minimal-tiptap.ts

@@ -0,0 +1,107 @@
+import * as React from "react"
+import { StarterKit } from "@tiptap/starter-kit"
+import type { Content, UseEditorOptions } from "@tiptap/react"
+import { useEditor } from "@tiptap/react"
+import type { Editor } from "@tiptap/core"
+import { Typography } from "@tiptap/extension-typography"
+import { Placeholder } from "@tiptap/extension-placeholder"
+import { TextStyle } from "@tiptap/extension-text-style"
+import {
+	Link,
+	Image,
+	HorizontalRule,
+	CodeBlockLowlight,
+	Selection,
+	Color,
+	UnsetAllMarks,
+	ResetMarksOnEnter
+} from "../extensions"
+import { cn } from "@/lib/utils"
+import { getOutput } from "../utils"
+import { useThrottle } from "../hooks/use-throttle"
+
+export interface UseMinimalTiptapEditorProps extends UseEditorOptions {
+	value?: Content
+	output?: "html" | "json" | "text"
+	placeholder?: string
+	editorClassName?: string
+	throttleDelay?: number
+	onUpdate?: (content: Content) => void
+	onBlur?: (content: Content) => void
+}
+
+const createExtensions = (placeholder: string) => [
+	StarterKit.configure({
+		horizontalRule: false,
+		codeBlock: false,
+		paragraph: { HTMLAttributes: { class: "text-node" } },
+		heading: { HTMLAttributes: { class: "heading-node" } },
+		blockquote: { HTMLAttributes: { class: "block-node" } },
+		bulletList: { HTMLAttributes: { class: "list-node" } },
+		orderedList: { HTMLAttributes: { class: "list-node" } },
+		code: { HTMLAttributes: { class: "inline", spellcheck: "false" } },
+		dropcursor: { width: 2, class: "ProseMirror-dropcursor border" }
+	}),
+	Link,
+	Image,
+	Color,
+	TextStyle,
+	Selection,
+	Typography,
+	UnsetAllMarks,
+	HorizontalRule,
+	ResetMarksOnEnter,
+	CodeBlockLowlight,
+	Placeholder.configure({ placeholder: () => placeholder })
+]
+
+export const useMinimalTiptapEditor = ({
+	value,
+	output = "html",
+	placeholder = "",
+	editorClassName,
+	throttleDelay = 1000,
+	onUpdate,
+	onBlur,
+	...props
+}: UseMinimalTiptapEditorProps) => {
+	const throttledSetValue = useThrottle((value: Content) => onUpdate?.(value), throttleDelay)
+
+	const handleUpdate = React.useCallback(
+		(editor: Editor) => {
+			throttledSetValue(getOutput(editor, output))
+		},
+		[output, throttledSetValue]
+	)
+
+	const handleCreate = React.useCallback(
+		(editor: Editor) => {
+			if (value && editor.isEmpty) {
+				editor.commands.setContent(value)
+			}
+		},
+		[value]
+	)
+
+	const handleBlur = React.useCallback((editor: Editor) => onBlur?.(getOutput(editor, output)), [output, onBlur])
+
+	const editor = useEditor({
+		extensions: createExtensions(placeholder!),
+		editorProps: {
+			attributes: {
+				autocomplete: "off",
+				autocorrect: "off",
+				autocapitalize: "off",
+				class: cn("focus:outline-none", editorClassName)
+			}
+		},
+		onUpdate: ({ editor }) => handleUpdate(editor),
+		onCreate: ({ editor }) => handleCreate(editor),
+		onBlur: ({ editor }) => handleBlur(editor),
+		...props
+	})
+
+	return editor
+}
+
+export default useMinimalTiptapEditor