Editor
WYSIWYG Editor is a rich text editor that uses TipTap (opens in a new tab) library.
ℹ️
Editor has uncontroller state. All source-code for Editor is based on change state and passing it to external state.
Using in Form
Editor is working only in Form
component. If you don't know how to use Form
please read Forms documentation.
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage
} from "@/components/ui/form";
import { Editor } from "@/components/editor/editor";
<FormField
control={form.control}
name="content"
render={({ field }) => (
<FormItem>
<FormLabel>{t("form.content")}</FormLabel>
<FormControl>
<Editor onChange={field.onChange} value={field.value} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>;
Form Schema
import { zodInput } from "@/functions/zod";
const formSchema = z.object({
content: zodInput.languageInput
});
You can set this field as required:
const formSchema = z.object({
content: zodInput.languageInput.min(1)
});
Editor without i18n
If you don't want to use i18n in Editor you need to pass disableLanguage
props.
<Editor onChange={field.onChange} value={field.value} disableLanguage />
Form Schema
const formSchema = z.object({
content: z.string().trim()
});
Extensions
- Blockquote (opens in a new tab),
- BulletList (opens in a new tab),
- CodeBlock (opens in a new tab),
- HardBreak (opens in a new tab),
- Heading (opens in a new tab),
- HorizontalRule (opens in a new tab),
- ListItem (opens in a new tab),
- OrderedList (opens in a new tab),
- Paragraph (opens in a new tab),
- Bold (opens in a new tab),
- Code (opens in a new tab),
- Italic (opens in a new tab),
- Strike (opens in a new tab),
- Dropcursor (opens in a new tab),
- Gapcursor (opens in a new tab),
- History (opens in a new tab),
- Underline (opens in a new tab),
- TextAlign (opens in a new tab),
- CodeBlockLowlight (opens in a new tab),
- Link (opens in a new tab),
- TextStyle (opens in a new tab),
- Color (opens in a new tab)
Custom Extensions
- Emoji,
- Image,
- Mention
Good to know
- Convert
http
URLs to links is not working for users safety. Users need to usehttps
instead, HTML
tags are not allowed. Users can useMarkdown
instead,Font Family
is not implemented. Users don't like to change it when they are writing,Code Block
has prettier support. Users can format code by pressing a button in the toolbar,
Read only mode
To display content form editor you have to use ReadOnlyEditor
component with unique id: string
and value: TextLanguage[]
props.
import { ReadOnlyEditor } from "@/components/editor/read-only/read-only";
<ReadOnlyEditor value={value} />;