Move to TanStack Start from Next.js (#184)

2026-05-20 05:47:11 +02:00 · 2024-10-07 16:44:17 +07:00
parent 3a89a1c07f
commit 950ebc3dad
514 changed files with 20021 additions and 15508 deletions
@@ -0,0 +1,111 @@
+import * as React from "react"
+import type { Editor } from "@tiptap/core"
+import type { Content, UseEditorOptions } from "@tiptap/react"
+import { StarterKit } from "@tiptap/starter-kit"
+import { useEditor } from "@tiptap/react"
+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 "./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 = 0,
+  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