WYSIWYG Editor

Preview

Usage

import { z } from 'zod';
import { AutoForm } from 'vitnode-frontend/form/auto-form';
import { AutoFormEditor } from 'vitnode-frontend/form/fields/editor';
import { zodLanguageInput } from 'vitnode-frontend/helpers/zod';

const formSchema = z.object({
  content: zodLanguageInput, 
});

<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'content',
      component: AutoFormEditor,
    },
  ]}
/>

API Reference

Prop	Type	Default
`onChange`	`(value: StringLanguage[]) => void \| (value: string) => void`	-
`value`	`StringLanguage[] \| string`	-
`disableLanguages`	`boolean`	`false`
`autofocus`	`boolean`	`false`
`allowUploadFiles`	`{ plugin_code: string, folder: string }`	-
`disabled`	`boolean`	`false`

Extensions

We have implemented the following extensions:

To Improve:

Dropcursor,
Gapcursor,

and extra extensions unique to our implementation:

Remove Formatting,
Emoji,
Images,
Files

Upload Files

Our editor allows you to upload files. To enable this feature, you need to pass the allowUploadFiles prop with the plugin and folder name.

import { z } from 'zod';
import { AutoForm } from 'vitnode-frontend/form/auto-form';
import { AutoFormEditor } from 'vitnode-frontend/form/fields/editor';
import { zodLanguageInput } from 'vitnode-frontend/helpers/zod';

const formSchema = z.object({
  content: zodLanguageInput, 
});

<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'content',
      component: props => (
        <AutoFormEditor
          {...props}
          allowUploadFiles={{
            plugin_code: '{your_plugin_name}',
            folder: '{your_folder_to_save_files}',
          }}
        />
      ),
    },
  ]}
/>

Read only mode

To display content form editor you have to use ReadOnlyEditor component.

import { ReadOnlyEditor } from 'vitnode-frontend/components/editor/read-only';

<ReadOnlyEditor value={value} />

API Reference

Prop	Type	Default
`value`	`StringLanguage[]`	`[]`
`allowDownloadAttachments`	`boolean`	`false`

Preview

Usage

API Reference

Extensions

Upload Files

Read only mode

API Reference

On this page