SAPPEditor

A rich, extensible TipTap-based React editor built for modern web apps. Includes advanced formatting, mobile-friendly UI, image uploads, tables, highlights, and more.

✨ Features

• Based on TipTap
• Supports tables, images, task lists, highlights, links, text alignment, typography
• Font family + font size picker
• Image upload with custom handler
• Responsive mobile toolbar with simplified actions
• Color picker, underline, superscript, subscript, etc.
• Light/dark theme toggle

📦 Installation

npm install @sapp-common-package/sapp-editor

🚀 Usage

import React, { useState } from 'react'
import SAPPEditor from '@sapp-common-package/sapp-editor'

const MyEditorPage = () => {
  const [html, setHtml] = useState('')

  const handleUploadImage = async (file: File) => {
    // Upload image to server or cloud and return URL
    const url = await uploadToCloud(file)
    return url
  }

  return (
    <SAPPEditor
      content={html}
      onChange={setHtml}
      handleImageUpload={handleUploadImage}
    />
  )
}

🧩 Props

| Prop | Type | Description | | ------------------- | --------------------------------- | -------------------------------------- | | content | string | Initial HTML content | | onChange | (html: string) => void | Callback when content updates | | handleImageUpload | (file: File) => Promise<string> | Function to handle pasted image upload |

📁 File Structure

sapp-editor/
├── simpleTipTap/
│   ├── tiptap-ui/...
│   ├── tiptap-icons/...
│   ├── tiptap-extension/...
│   └── tiptap-node/
├── tiptap-ui-primitive/
├── theme-toggle.tsx
├── FontSize.tsx
├── SAPPEditor.tsx

🛠 Extensions Used

• @tiptap/starter-kit
• @tiptap/extension-image
• @tiptap/extension-task-list, task-item
• @tiptap/extension-highlight
• @tiptap/extension-link
• @tiptap/extension-underline, superscript, subscript
• @tiptap/extension-color, text-style, font-family
• Custom: ImageUploadNode, FontSize, TrailingNode, SuperchargedTable, Selection

📱 Mobile Support

• Mobile layout uses simplified toolbar views
• Popovers for highlight and link become fullscreen sheets

📸 Image Upload

Editor supports paste-to-upload or custom image node uploads using the handleImageUpload prop. This can be integrated with:

• Firebase Storage
• Cloudinary
• Backend APIs

📄 License

MIT License

Built with ❤️ using TipTap and Ant Design