Soul AI & Deccan Rich Editor

A powerful, feature-rich Tiptap-based text editor for React. Designed for modern web applications with a focus on aesthetics, modularity, and user experience.

✨ Overview

A rich text editor built with Tiptap for React. Provides a complete writing experience with formatting tools, media support, and flexible export options.

🚀 Key Features

Content Formatting

• Headings: H1 through H6 with visual hierarchy
• Text Styles: Bold, Italic, Underline, Strikethrough, Subscript, Superscript
• Alignment: Left, center, and right text alignment
• Blockquotes: For citations and quotes
• Code: Inline code and syntax-highlighted code blocks

Lists & Organization

• Bullet Lists: Unordered lists
• Numbered Lists: Ordered lists
• Task Lists: Interactive checkboxes for to-dos
• Tables: Create and manage tables with resizable columns

Media & Embeds

• Images: Insert images via URL
• YouTube Videos: Embed videos by URL
• Horizontal Rules: Visual separators

User Experience

• Bubble Menu: Formatting options appear when text is selected
• Floating Menu: Quick insert menu on empty lines
• Live Counters: Real-time word and character count
• Fullscreen Mode: Distraction-free writing
• Save Functionality: Export content in multiple formats

📦 Installation

Choose the package that fits your project scope:

Soul AI Version

npm install @soulai/rich-editor
# or
yarn add @soulai/rich-editor

Deccan AI Version

npm install @deccan-ai/rich-editor
# or
yarn add @deccan-ai/rich-editor

🛠️ Usage

Quick Start

import { useState } from "react";
import { TiptapEditor } from "@soulai/rich-editor";
import "@soulai/rich-editor/styles";

function MyEditor() {
  const [content, setContent] = useState(
    "<h1>Hello</h1><p>Start typing...</p>"
  );
  const [isFullscreen, setIsFullscreen] = useState(false);

  const handleSave = (data: string | object, format: string) => {
    console.log(format, data);
    // Send to your backend
  };

  const handleFullscreenChange = (fullscreen: boolean) => {
    setIsFullscreen(fullscreen);
  };

  return (
    <TiptapEditor
      content={content}
      onChange={setContent}
      onSave={handleSave}
      saveFormat="html"
      fullscreen={true}
      onFullscreenChange={handleFullscreenChange}
    />
  );
}

Basic Usage

The onChange callback is called every time the content changes, allowing you to track edits in real-time:

const [content, setContent] = useState("");

<TiptapEditor
  content={content}
  onChange={(html) => {
    setContent(html);
    // Auto-save, update preview, etc.
  }}
/>;

Read-Only Mode

Set editable={false} to display content without editing:

<TiptapEditor content={savedContent} editable={false} />

Props

| Prop | Type | Default | Description | | -------------------- | ---------- | -------- | ------------------------------------------------------------------------------ | | content | string | '' | Initial HTML content to display in the editor | | onChange | function | - | Callback function called whenever content changes. Receives HTML string | | onSave | function | - | Callback function called when save button is clicked. Receives data and format | | editable | boolean | true | Set to false to make the editor read-only | | placeholder | string | - | Placeholder text shown when editor is empty | | fullscreen | boolean | - | Set to true to show fullscreen toggle button in toolbar | | onFullscreenChange | function | - | Callback function called when fullscreen state changes. Receives boolean | | saveFormat | string | 'html' | Format for saving: 'html' (string), 'json' (object), or 'text' (string) |

Save Formats

When you provide the onSave prop, a save button appears in the toolbar. You can choose which format to save the content in using the saveFormat prop.

Available Formats

• 'html' (default): Returns content as an HTML string

  // Example output: "<h1>Title</h1><p>Content</p>"
  <TiptapEditor onSave={handleSave} saveFormat="html" />

• 'json': Returns content as a Tiptap JSON object

  // Example output: { type: "doc", content: [...] }
  <TiptapEditor onSave={handleSave} saveFormat="json" />

• 'text': Returns content as plain text (no formatting)

  // Example output: "Title\n\nContent"
  <TiptapEditor onSave={handleSave} saveFormat="text" />

Save Handler Example

const handleSave = (data: string | object, format: string) => {
  // data type depends on format:
  // - string for 'html' and 'text'
  // - object for 'json'

  fetch("/api/save", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      content: data,
      format,
    }),
  });
};

<TiptapEditor onSave={handleSave} saveFormat="html" />;

Fullscreen Mode

Enable fullscreen mode by passing fullscreen={true}. This adds a fullscreen toggle button to the toolbar. When clicked, the editor expands to fill its parent container (not the entire viewport).

Important: The parent container must have position: relative and a defined height for fullscreen to work correctly:

const [isFullscreen, setIsFullscreen] = useState(false);

const handleFullscreenChange = (fullscreen: boolean) => {
  setIsFullscreen(fullscreen);
  // Use this state for your needs (e.g., hide other UI elements)
};

<div style={{ position: 'relative', height: '600px' }}>
  <TiptapEditor
    content={content}
    onChange={setContent}
    fullscreen={true}
    onFullscreenChange={handleFullscreenChange}
  />
</div>

The editor uses position: absolute to fill the parent container's space, allowing you to control the fullscreen area. The callback receives a boolean indicating the new fullscreen state whenever the user toggles fullscreen mode.

Styling

The editor comes with default styles, but you can customize them by overriding CSS classes:

/* Customize primary color */
.tiptap-wrapper {
  --primary-color: #5b4eff;
}

/* Customize toolbar */
.tiptap-toolbar {
  background: white;
  border-radius: 12px;
}

/* Customize editor content area */
.editor-content-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

The editor uses SCSS internally, compiled to CSS. You can import the styles and override as needed.

Development

yarn install
yarn dev    # Run dev server
yarn build  # Build library

📄 License

ISC © Aslam Shaik