editorjs-antd-renderer

Render Editor.js output data to React components using Ant Design.

Supported Plugins

| Plugin | Block type | |--------|-----------| | Paragraph | paragraph | | Header | header | | List | list | | Checklist | checklist | | Image | image | | SimpleImage | simpleImage | | Code | code | | Quote | quote | | Embed | embed | | Attaches | attaches | | Math | math | | Table | table | | Delimiter | delimiter | | Warning | warning | | Marker | inline | | InlineCode | inline |

Installation

npm install editorjs-antd-renderer
# or
yarn add editorjs-antd-renderer
# or
bun add editorjs-antd-renderer

Peer dependencies: react, antd

Basic Usage

import Renderer from "editorjs-antd-renderer";

<Renderer data={editorJsOutputData} />

data accepts either an OutputData object or a JSON string.

Props

config

Per-block configuration:

<Renderer
  data={data}
  config={{
    image: {
      urlPrefix: "https://cdn.example.com/", // prepended to image URLs
    },
    attaches: {
      urlPrefix: "https://files.example.com/", // prepended to file URLs
    },
    code: {
      theme: "Dark",        // "Light" (default) | "Dark"
      showLineNumbers: true, // default: true
    },
  }}
/>

blocksProps

Pass additional props to individual block components. Useful for custom styling or event handlers:

<Renderer
  data={data}
  blocksProps={{
    paragraph: { style: { fontSize: 16 } },
    header: { style: { color: "navy" } },
    quote: { style: { borderColor: "gold" } },
    image: { preview: false },
    checklist: { direction: "horizontal" },
    attaches: { buttonPosition: "left" },
  }}
/>

customBlocks

Render unsupported or custom block types:

import type { CustomBlockRenderer } from "editorjs-antd-renderer";

const customBlocks: Record<string, CustomBlockRenderer> = {
  alert: (block) => (
    <div className={`alert alert-${block.data.type}`}>
      {String(block.data.message)}
    </div>
  ),
};

<Renderer data={data} customBlocks={customBlocks} />

TypeScript

All block data types are exported:

import type {
  HeaderData,
  ParagraphData,
  ListData,
  ListItem,
  ListItemMeta,
  ChecklistData,
  ImageData,
  CodeData,
  MathData,
  AttachesData,
  EmbedData,
  QuoteData,
  ImageConfig,
  CodeConfig,
  AttachesConfig,
  CustomBlockRenderer,
} from "editorjs-antd-renderer";