Question

我试图制作一个Tiptap 丰富的文本框, 里面有天体的反动。我正跟踪一个在下一个天体上这样做的人的辅导, 但我想我可以在天体上做同样的事情, 因为天体仍然在回动。如果您想看这个视频, 这里就是: < href="https://www.youtube.com/ watch?v=ml4USMIm594" rel="nofollow noreferrer" >https://www.youtube.com/watch?v=ml4USMIm594

我有索引,Astro:

---
import Layout from  ../../layouts/Layout.astro 

import {NewArticleForm} from  @/components/react_pages/NewArticleForm 
---
<Layout title="New Article">
    <NewArticleForm />
</Layout>

新建条款格式( Tsx) :

import {
    Form, FormControl, FormField, FormItem, FormLabel, FormMessage
} from  @/components/ui/form 
import {useForm} from  react-hook-form 
import {zodResolver} from  @hookform/resolvers/zod 
import * as z from  zod 
import {Input} from  @/components/ui/input.tsx 
import Tiptap from "@/components/Tiptap.tsx";

export const NewArticleForm = () => {
    const formSchema = z.object({
        title: z.string().max(100, {message:  Title is too long }),
        content: z.string().min(100, {message:  You can type more than that }),
    })

    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
        mode:  onChange ,
        defaultValues: {
            title:   ,
            content:   ,
        },
    })

    const onSubmit = (values: z.infer<typeof formSchema>) => {

    }

    return (
        <main>
            <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)}>
                <FormField control={form.control} name= title  render={({field}) => (
                    <FormItem>
                        <FormLabel>Title</FormLabel>
                        <FormControl>
                            <Input placeholder= Article title  />
                        </FormControl>
                    </FormItem>
                )}  />
                <FormField control={form.control} name= content  render={({field}) => (
                    <FormItem>
                        <FormLabel>Content</FormLabel>
                        <FormControl>
                            <Tiptap description={field.name} onChange={field.onChange} />
                        </FormControl>
                    </FormItem>
                )}  />
                </form>
            </Form>
        </main>
    )
}

Tiptap. tsx :

import {useEditor, EditorContent} from  @tiptap/react 
import StarterKit from  @tiptap/starter-kit 

export default function Tiptap({description, onChange}: {description: string, onChange: (richText: string) => void}){
    const editor = useEditor({
        extensions: [StarterKit.configure()],
        content: description,
        editorProps: {
            attributes: {
                class:  rounded-md border min-h-[150px] border-input bg-back 
            },
        },
        onUpdate({editor}){
            onChange(editor.getHTML())
            console.log(editor.getHTML())
        }
    })

    return (
        <div className= flex flex-col justify-stretch min-h-[250px] >
            <EditorContent editor={editor} />
        </div>
    )
}

我试图在索引.astro 中添加 client: only=“ reactive” 到 index.astro 的内侧,但是,它完全没有显示新Arteform 组件,而我只得到了这个错误:

newarticle:1457 [astro-island] Error hydrating 
/src/components/react_pages/NewArticleForm.tsx SyntaxError: 
The requested module  /node_modules/.vite/deps/react-hook-
form.js?v=b9251174  does not provide an export named 
 ControllerProps  (at form.tsx:6:3)

Answer 1

错误似乎正在发生, 原因似乎是从回声光窗体错误地导入 COCRProps 。要解决这个问题, 请用以下代码更新您的窗体. tsx 文件 :

 import type { ControllerProps } from "react-hook-form"

友情链接