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

Custom Extensions

Emoji,
Image,
Mention

Good to know

Convert http URLs to links is not working for users safety. Users need to use https instead,
HTML tags are not allowed. Users can use Markdown 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} />;

Date Format Icons