📝 Akhlaq Digital Editor

A modern, powerful rich text editor for React and vanilla JavaScript

📖 Documentation · 🎯 Live Demo · 📧 Support

✨ Why Choose This Editor?

• ⚡ Lightning Fast - Optimized performance with minimal bundle size
• 🎨 Beautiful by Default - Modern, clean UI that works out of the box
• 📱 Mobile First - Touch-optimized interface for all devices
• 🔧 Easy Integration - Works with React, Next.js, Vue, or vanilla JS
• 🔒 Type Safe - Full TypeScript support
• 🌐 Dual Distribution - NPM package + CDN for maximum flexibility

🚀 Quick Start

NPM Installation (React)

npm install @akhlaqdigital/editor

import { SimpleEditor } from "@akhlaqdigital/editor";

function MyApp() {
  const [content, setContent] = useState("<p>Hello World!</p>");

  return (
    <SimpleEditor
      content={content}
      onChange={setContent}
      placeholder="Start writing..."
      height={400}
    />
  );
}

CDN Usage (Vanilla JS)

<div id="editor" style="height: 400px;"></div>

<script src="https://cdn.jsdelivr.net/npm/@akhlaqdigital/editor/dist/ad-editor.js"></script>
<script>
  const editor = window.AkhlaqDigitalEditor.init({
    container: "#editor",
    placeholder: "Start typing...",
    content: "<p>Welcome!</p>",
    onChange: (content) => console.log(content),
  });
</script>

📖 Documentation

| Resource | Description | Link | | ---------------------- | -------------------------------- | --------------------------------------------------------------- | | 📚 Complete Guide | Full documentation with examples | View Docs → | | ⚛️ React/NPM Guide | React integration guide | NPM Docs → | | 🌐 CDN/Vanilla JS | Vanilla JavaScript guide | CDN Docs → | | 🎯 Live Demo | Interactive playground | Try Demo → |

🎨 Styling & CSS Classes

The editor uses CSS classes with the akd- prefix to avoid conflicts with your application styles:

• .akd - Main editor container with all core editor styles
• .dropdown-menu - Dropdown menus for mentions and tools
• .tableWrapper - Table container for responsive table handling

Import Styles

// For NPM/React projects
import "@akhlaqdigital/editor/styles.css";

<!-- For CDN usage -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@akhlaqdigital/editor/dist/styles.css"
/>

All styles are scoped and won't interfere with your existing CSS framework (Bootstrap, Tailwind, etc.).

📦 Core Features

• 📝 Rich Text Editing - Bold, italic, headers, lists, and more
• 📷 Image Support - Drag & drop images with resizing
• 😊 Emoji Picker - Categorized emoji selection
• 👥 Mentions - @user functionality with suggestions
• 📎 File Upload - Drag & drop file handling
• 📊 Tables - Full table editing capabilities
• 💻 Code Blocks - Syntax highlighted code
• 📱 Mobile Responsive - Touch-optimized interface

🔧 Props Reference

| Prop | Type | Default | Description | | ---------------------- | ---------- | --------------------------- | ----------------------------------------------------------------- | | content | string | null | Initial HTML content | | onChange | function | () => {} | Callback when content changes | | placeholder | string | "Enter your content here" | Placeholder text | | height | number | 300 | Editor height in pixels | | isEditable | boolean | true | Enable/disable editing | | isRefreshEditor | boolean | false | Force remount when deps change | | isAutoFocus | boolean | false | Autofocus the editor on mount | | isShowMention | boolean | true | Enable @mentions | | isShowEmoji | boolean | true | Enable emoji picker | | isFileUpload | boolean | true | Enable file uploads | | isBottomToolbar | boolean | false | Show toolbar at the bottom | | acceptedFileTypes | string | - | Accepted file types for upload (e.g. "image/*,application/pdf") | | mentions | array | [] | Mention suggestions (array of user objects) | | onInit | function | - | Callback when editor is initialized | | handleImageInsertion | function | - | Custom handler for image insertion | | handleFilesChange | function | async () => {} | Custom handler for file uploads | | className | string | - | Custom class for the editor container |

🎨 Styling

Easily customize the editor appearance:

.akd-editor-wrapper {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.akd-editor-content {
  min-height: 200px;
  padding: 16px;
}

🤝 Support

• 📧 Email: [email protected]
• 📖 Documentation: akhlaq-digital-editor.vercel.app/docs
• 🎯 Demo: akhlaq-digital-editor.vercel.app/example

📄 License

MIT License

Made with ❤️ by Akhlaq Digital