Create a form with editor text input fields

The Editor component can be used as a rich text input field, supporting features like single-line and multi-line editing, custom placeholders, character limits...

Below is an example showcasing two fields: one that behaves like a single-line input and another that supports multiple lines.

We use the following props to enhance the editor's functionality:

• intent: Indicates the validation status of the field (e.g., danger for errors).
• appearance: Defines the style of the editor (e.g., textBox).
• rows: Controls the height of the editor in multi-line mode.

// This kind of document will allow only one paragraph to be added.
export const SingleLineDocument = Document.extend({
  name: "doc",
  topNode: true,
  // Cannot use `inline*` because the document requires at least one descendant to display the placeholder.
  content: "paragraph",
});

const editor = useEditor({
  // link readOnly to the disabled state of the form field
  readOnly: disabled,
  // link the editor content to the form field value
  content: form.getValue(name),
  onUpdate: ({ editor }) => {
    // sync the editor content with the form field value
    form.setValue(name, editor.getText());
  },
  onBlur: () => {
    // trigger validation when the editor loses focus
    form.setFieldTouched(name, true);
    form.validate();
  },
  coreKitOptions: {
    placeholder: {
      // customize the placeholder text
      placeholder: "My custom placeholder",
    },
    characterCount: {

      limit: maxLength,
    },
    // disable document when the editor is in single-line mode
    ...(!multiline && { document: false }),
  },
  extensions: !multiline ? [SingleLineDocument] : [],
});

const insertLove = useEventCallback(() => {
  editor?.chain().focus().insertContent("❤").run();
});

const clearContent = useEventCallback(() => {
  editor?.chain().clearContent(true).focus().run();
});

return (
  <FixedMenu editor={editor}>
    <MenuItem onClick={insertLove}>
      <IoHeartCircleOutline /> Insert love
    </MenuItem>
    <MenuItem onClick={clearContent}>
      <IoTrashBinOutline /> Clear content
    </MenuItem>
  </FixedMenu>
  //....
  <Editor
    editor={editor}
    appearance="textBox"
    intent={invalid ? "danger" : undefined}
    rows={rows}
  />
  //...
)

Create Rich Text Editor with custom toolbar