📖 Complete Documentation

Comprehensive guide covering all features, extensions, APIs, and advanced usage patterns for Akhlaq Digital Editor. From basic setup to expert customization.

🚀 Getting Started

1Choose Your Installation

NPM Package

For React, Vue, Angular, or any JavaScript framework

npm install @akhlaqdigital/editor

CDN Script

For vanilla JavaScript or quick prototyping

<script src="https://cdn.jsdelivr.net/npm/@akhlaqdigital/editor/dist/ad-editor.js"></script>

2Basic Implementation

// React
import { Editor } from '@akhlaqdigital/editor';

<Editor 
  content="<p>Hello World!</p>"
  onChange={(html) => console.log(html)}
  placeholder="Start typing..."
/>

Quick Links

📦 NPM Guide →🌐 CDN Guide →🎯 Live Demo →

✨ Core Features

📝

Rich Text Editing

Complete WYSIWYG editor with formatting, lists, headings, and more.

📋

Tables

Insert and edit tables with resizable columns and responsive design.

🖼️

Image Upload

Drag & drop image uploads with automatic resizing and optimization.

Mentions

User mentions with autocomplete and customizable user lists.

😊

Emoji Picker

Rich emoji selection with 9 categories: smileys, food, nature, activities, travel, objects, celebrations, symbols, and flags.

🔗

Link Management

Easy link insertion with preview and validation.

💾

Auto-save

Automatic content saving with customizable intervals.

🔧 Extensions & Plugins

Built-in Extensions

Text Formatting

• Bold, Italic, Underline, Strikethrough
• Text color and highlighting
• Font family and size
• Text alignment

Content Structure

• Headings (H1-H6)
• Paragraphs and line breaks
• Blockquotes
• Code blocks with syntax highlighting

Lists & Tables

• Bulleted and numbered lists
• Nested lists
• Responsive tables
• Table row/column operations

Media & Links

• Image insertion and resizing
• File uploads
• Link creation and editing
• Embedded content

Advanced Example

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

function AdvancedEditor() {
  const [content, setContent] = useState('');

  const mentions = [
    { id: 1, label: 'John Doe' },
    { id: 2, label: 'Jane Smith' }
  ];

  const handleImageUpload = async ({ file, onProgress, abortSignal }) => {
    // Your upload logic here
    const formData = new FormData();
    formData.append('image', file.file);
    
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
      signal: abortSignal
    });
    
    const { url } = await response.json();
    return url;
  };

  return (
    <SimpleEditor
      content={content}
      onChange={setContent}
      placeholder="Write something amazing..."
      height={500}
      mentions={mentions}
      handleImageInsertion={handleImageUpload}
    />
  );
}

📚 API Reference

Editor Methods

Method	Parameters	Description
getContent()	-	Returns current HTML content
setContent(html)	html: string	Sets editor content
focus()	-	Focuses the editor
blur()	-	Removes focus from editor
destroy()	-	Destroys editor instance

Component Props

Prop	Type	Default	Description
content	string	""	Initial HTML content
onChange	(html: string) => void	-	Callback when content changes
placeholder	string	"Start typing..."	Placeholder text
className	string	-	CSS classes for the editor container
isAutoFocus	boolean	false	Enable auto focus on editor
isEditable	boolean	true	Enable editing capabilities
isShowMention	boolean	true	Enable @mention functionality
isFileUpload	boolean	true	Enable file upload features
isBottomToolbar	boolean	false	Position toolbar at the bottom
acceptedFileTypes	string	"*"	Accepted file types for upload
mentions	Array<{id, label}>	[]	List of mentionable users
onInit	(editor: any) => void	-	Callback when editor is initialized
handleImageInsertion	function	-	Custom image upload handler
handleFilesChange	function	-	Custom file upload handler
editor	Editor	-	Custom editor instance

Formatting Commands

Text Style

editor.chain().focus().toggleBold().run()
editor.chain().focus().toggleItalic().run()
editor.chain().focus().toggleUnderline().run()
editor.chain().focus().toggleStrike().run()

Structure

editor.chain().focus().toggleHeading({level: 1}).run()
editor.chain().focus().toggleBulletList().run()
editor.chain().focus().toggleOrderedList().run()
editor.chain().focus().toggleBlockquote().run()

🎨 Customization

Theme Customization

/* Custom CSS Variables */
:root {
  --editor-bg: #ffffff;
  --editor-text: #1a1a1a;
  --editor-border: #e2e8f0;
  --editor-focus: #3b82f6;
  --toolbar-bg: #f8fafc;
  --button-hover: #e2e8f0;
}

/* Dark theme */
[data-theme="dark"] {
  --editor-bg: #1a1a1a;
  --editor-text: #ffffff;
  --editor-border: #374151;
  --editor-focus: #60a5fa;
  --toolbar-bg: #111827;
  --button-hover: #374151;
}

.akd {
  background: var(--editor-bg);
  color: var(--editor-text);
  border: 1px solid var(--editor-border);
}

.akd:focus-within {
  border-color: var(--editor-focus);
}

Event Handling

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

function EditorWithEvents() {
  const [content, setContent] = useState('');

  const handleContentChange = (newContent) => {
    console.log('Content changed:', newContent);
    setContent(newContent);
    // Save to localStorage or send to server
    localStorage.setItem('editorContent', newContent);
  };

  const handleEditorReady = (editor) => {
    console.log('Editor is ready:', editor);
    // Load saved content
    const saved = localStorage.getItem('editorContent');
    if (saved) {
      editor.commands.setContent(saved);
    }
  };

  return (
    <SimpleEditor
      content={content}
      onChange={handleContentChange}
      onInit={handleEditorReady}
      placeholder="Start writing..."
    />
  );
}

💡 Examples

Blog Post Editor Example

Here's how you can create a blog post editor with title input and rich text content:

Features:
• Title input field
• Rich text editor with file upload
• Custom styling for blog posts
• Publish button integration

Comment System Example

Perfect for building comment systems with mentions and compact design:

Features:
• Compact editor for comments
• @mention functionality
• Cancel and submit buttons
• No file uploads for simple comments

🔍 Troubleshooting

Common Issues

TypeScript errors

Ensure you have the latest version which includes full TypeScript definitions.

npm update @akhlaqdigital/editor

SSR issues with Next.js

Use dynamic imports to avoid SSR conflicts.

const Editor = dynamic(() => import('@akhlaqdigital/editor'), { ssr: false });

Need Help?

If you're still experiencing issues, check out these resources:

📧 Email Support 🎯 Live Examples 📦 NPM Guide