Editor

WYSIWYG Editor is a rich text editor that uses Lexical (opens in a new tab) library.

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
          id="topic_create"
          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
  id="topic_create"
  onChange={field.onChange}
  value={field.value}
  disableLanguage
/>

Form Schema

const formSchema = z.object({
  content: z.string().trim()
});

Plugins

• History - Undo/redo changes (For example go back by pressing Ctrl+Z or Cmd+Z on Mac)
• RichText - Entering text, deleting characters, copy + paste etc.
• Markdown - Write markdown
• AutoLinkPluginEditor - Automatically convert URLs to links

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-editor";
 
<ReadOnlyEditor id={`${id}_value`} value={value} />;