Skip to main content

Editor

Description​

A powerful rich text editor built on EditorJS with drag-and-drop layout management. Supports multiple content blocks including text, headers, lists, quotes, images, and custom row/column layouts. Ideal for creating complex page content with flexible layouts.

Import​

import { Editor } from '@components/common/form/Editor';

Usage​

import { Form } from '@components/common/form/Form';
import { Editor } from '@components/common/form/Editor';

function PageForm() {
  return (
    <Form action="/api/pages">
      <Editor
        name="content"
        label="Page Content"
        value={[]}
      />
    </Form>
  );
}

Props​

NameTypeDefaultDescription
namestring-Field name (required)
labelstring-Label text displayed above the editor
valueRow[]-Initial editor content (row structure)

Row Structure​

// The exported type. `id` is required and both sizes are NUMBERS (column spans).
export interface Row {
  id: string;
  size: number;              // sum of its columns' sizes
  columns: {
    id: string;
    size: number;            // column span, 1-3
    data: any;               // EditorJS output data
  }[];
}

// There is no exported `Column` type, and `className` is not part of the exported
// shape — RowTemplates adds it at runtime (`md:grid-cols-N` / `md:col-span-N`).

Example: Basic Content Editor​

import { Form } from '@components/common/form/Form';
import { Editor } from '@components/common/form/Editor';

function BlogPostForm() {
  return (
    <Form action="/api/blog/posts">
      <Editor
        name="content"
        label="Post Content"
        value={[]}
      />
    </Form>
  );
}

Example: With Initial Content​

import { Form } from '@components/common/form/Form';
import { Editor } from '@components/common/form/Editor';

function EditPage() {
  const initialContent = [
    {
      id: 'r__1',
      size: 1,
      columns: [
        {
          id: 'c__1',
          size: 1,
          data: {
            blocks: [
              {
                type: 'header',
                data: {
                  text: 'Welcome',
                  level: 1
                }
              },
              {
                type: 'paragraph',
                data: {
                  text: 'This is sample content.'
                }
              }
            ]
          }
        }
      ]
    }
  ];

  return (
    <Form action="/api/pages/update">
      <Editor
        name="content"
        label="Page Content"
        value={initialContent}
      />
    </Form>
  );
}

Example: Product Description​

import { Form } from '@components/common/form/Form';
import { InputField } from '@components/common/form/InputField';
import { Editor } from '@components/common/form/Editor';

function ProductDescriptionForm() {
  return (
    <Form action="/api/products">
      <InputField
        name="name"
        label="Product Name"
        required={true}
      />
      
      <Editor
        name="description"
        label="Product Description"
        value={[]}
      />
    </Form>
  );
}

Content Blocks​

The editor supports multiple EditorJS block types:

Text Blocks​

  • Paragraph: Standard text content
  • Header: H1-H6 headings
  • Quote: Blockquote with attribution
  • Raw HTML: Custom HTML content

List Blocks​

  • Ordered List: Numbered lists
  • Unordered List: Bullet lists

Media Blocks​

  • Image: Image upload with FileBrowser integration
  • Supports image selection from media library
  • Automatic image URL handling

Layout System​

Row Templates​

Users can add rows with different column layouts:

  • Single column (1)
  • Two columns, equal or weighted (1:1, 1:2, 2:1, 2:3, 3:2)
  • Three columns (1:1:1, 1:2:1)

Drag and Drop​

  • Drag rows to reorder content
  • Visual feedback during dragging
  • Keyboard navigation support

Column sizes​

Sizes are integer grid spans, not fractions. A column's size is 1-3; the row's size is the sum of its columns (1-5). The layout toolbar offers these templates: 1, 1:1, 1:2, 2:1, 2:3, 3:2, 1:1:1, 1:2:1.

Dependencies​

This component uses several external libraries:

  • @editorjs/editorjs - Core editor functionality
  • @evershop/editorjs-image - Image block tool
  • @editorjs/header - Header block tool
  • @editorjs/list - List block tool
  • @editorjs/quote - Quote block tool
  • @editorjs/raw - Raw HTML block tool
  • @dnd-kit/core - Drag and drop functionality
  • @dnd-kit/sortable - Sortable list implementation

Features​

  • Rich Text Editing: Multiple content block types
  • Drag and Drop: Reorder rows easily
  • Flexible Layouts: Multi-column row system
  • Image Integration: FileBrowser for media selection
  • Auto-save: Content automatically saved on changes
  • Keyboard Support: Full keyboard navigation
  • Visual Editor: WYSIWYG-style editing
  • Responsive Design: Prose styling with max-width
  • Hidden Input: Stores structured data in form

Output Format​

The editor outputs an array of rows, each containing columns with EditorJS data:

[
  {
    id: "r__uuid",
    size: 2,
    className: "md:grid-cols-2",
    columns: [
      {
        id: "c__uuid",
        size: 1,
        className: "md:col-span-1",
        data: {
          blocks: [
            { type: "header", data: { text: "...", level: 1 } },
            { type: "paragraph", data: { text: "..." } }
          ]
        }
      }
    ]
  }
]

Styling​

The component uses:

  • Prose classes for typography
  • Grid system for column layouts
  • Border and shadow utilities
  • Drag handle indicators
  • Custom SCSS styles in Editor.scss