antd-text-editor

A lightweight React rich-text editor built with Ant Design and ReactQuill that supports a customizable toolbar, emoji picker, column/template insertion, spintax modal, and internationalization-friendly labels.

✨ Features

• ✅ Emoji picker (emoji-mart) built into a modal
• ✅ Insert column placeholders like {{columnName}} using a dropdown
• ✅ Customizable toolbar with actions: Bold, Italic, Strikethrough, Monospace, Bulleted List, Quote, Inline Code, Emoji, Spintax
• ✅ Spintax modal trigger to open custom UI
• ✅ Internationalization-friendly via translations prop
• ✅ Toggle toolbar buttons using toolbarDisplay
• ✅ Built using Ant Design UI components for a professional UX

📦 Installation

Install as part of your project dependencies:

npm install antd react react-dom react-quill-new @emoji-mart/data @ant-design/icons

or

yarn add antd react react-dom react-quill-new @emoji-mart/data @ant-design/icons

or

pnpm add antd react react-dom react-quill-new @emoji-mart/data @ant-design/icons

🚀 Quick Start

import { useState } from "react";
import { TextEditor } from "antd-text-editor";
import 'react-quill-new/dist/quill.snow.css'

function App() {
  const [value, setValue] = useState("Hello World!");

  const columns = [
    {
      key: "First Name",
      value: "first_name",
      children: [
        {
          key: "First Name",
          value: "first_name",
          children: [
            { key: "Nick Name", value: "nick_name" },
            { key: "Middle Name", value: "middle_name" },
          ],
        },
        { key: "Last Name", value: "last_name" },
      ],
    },
    { key: "Last Name", value: "last_name" },
    { key: "Email", value: "email" },
  ];

  const translations = {
    toolbar: {
      bold: "Bold",
      italic: "Italic",
      emoji: "Emoji",
      useColumn: "Insert Column",
      spintax: "Spintax",
    },
    textarea: {
      placeholder: "Write your message...",
    },
    spintax: {
      title: "Add Spintax",
      inputPlaceholder: "Enter spintax",
      cancelButtonText: "Cancel",
      okButtonText: "Add",
    },
  };

  return (
    <>
      <TextEditor
        initialValue={value}
        onChange={(html) => setValue(html)}
        columns={columns}
        translations={translations}
        emojiPickerTheme="light"
        setting={{
          textareaHeight: 200,
          toolbarIconSpacing: 10,
          toolbar: {
            useColumn: true,
            bold: true,
            italic: true,
            strikethrough: true,
            monospace: true,
            bulletedList: true,
            quote: true,
            inlineCode: true,
            emoji: true,
            spintax: true,
          },
        }}
      />
    </>
  );
}

export default App;

📚 Props

| Prop | Type | Required | Description | | ------------------ | ------------------------ | -------- | ---------------------------------------------------------------------------- | | initialValue | string | No | Initial HTML value for the editor | | onChange | (html: string) => void | Yes | Called when editor content changes (HTML output from Quill) | | columns | Array<{ name, value }> | No | Columns used by the "Insert Column" dropdown for template placeholders | | translations | Object | No | Provide strings for toolbar and placeholder text (structure seen in example) | | emojiPickerTheme | "light", "dark" | No | The emoji picker theme | | textareaHeight | number | No | Height in pixels for the editor textarea (e.g., 200) | | toolbarIconSpacing | number | No | Spacing in pixels between toolbar icons (e.g., 10) | | toolbarDisplay | Object | No | Toggle toolbar buttons true/false. Example: { bold: true, italic: false } | | spintaxInput | Array | No | Internal state for spintax modal (can be left unset) |

Toolbar Button Summary

• useColumn — Dropdown listing columns props. Inserts {{key}} placeholders into editor.
• emoji — Opens emoji modal. The picker inserts emoji text at cursor position.
• bold, italic, strikethrough, monospace — Basic text formatting.
• bulletedList — Toggles bullet list formatting on selected lines.
• quote — Toggles blockquote on selected lines.
• inlineCode, spintax — Inline code and spintax modal actions.