Editor
Rich text editor built on TipTap for editing and rendering HTML content.
Preview
Usage
import { z } from "zod";
import { AutoForm } from "@vitnode/core/components/form/auto-form";
import { AutoFormEditor } from "@vitnode/core/components/form/fields/editor";const formSchema = z.object({
content: z
.string()
.min(1, "Content is required")
.default("<p>Write your content here...</p>"),
});<AutoForm
formSchema={formSchema}
fields={[
{
id: "content",
component: props => (
<AutoFormEditor
{...props}
description="Rich text content powered by the Editor."
label="Content"
/>
),
},
]}
/>import { Editor } from "@vitnode/core/components/ui/editor";The Editor is uncontrolled by default - pass value as the initial HTML and
listen for changes with onChange, which receives the current HTML string:
const [content, setContent] = useState("<p>Hello World! 🌎️</p>");
<Editor value={content} onChange={setContent} />;Multi-language
Set the multiLang prop to edit the content in every enabled language. A
language select (shown only when more than one language is enabled) switches
which language you are editing - it does not change the app-wide locale,
only the content inside this editor.
The value becomes an array matching the core_languages_words table:
[
{ languageCode: "en", value: "<p>Hello</p>" },
{ languageCode: "pl", value: "<p>Cześć</p>" },
];Declare the field with the multiLangValueSchema helper and enable multiLang:
import { multiLangValueSchema } from "@vitnode/core/lib/helpers/multi-lang";
const formSchema = z.object({
content: multiLangValueSchema({ minLength: 1 }).min(1),
});{
id: "content",
component: props => <AutoFormEditor {...props} label="Content" multiLang />,
}Persist the array on the backend with saveLanguageWords. See
Auto Form - Multi-language fields.
Rendering Content
Use EditorContent to render the stored HTML as read-only content outside of
the editor (e.g. on a public page):
import { EditorContent } from "@vitnode/core/components/ui/editor-content";<EditorContent content="<h2>Title</h2><p>Hello World! 🌎️</p>" />Props
Prop
Type