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