📦 NPM Documentation

Complete guide for integrating Akhlaq Digital Editor into your React, Vue, Next.js, or any modern JavaScript project using NPM package manager.

🚀 Installation

NPM

npm install @akhlaqdigital/editor

Yarn

yarn add @akhlaqdigital/editor

PNPM

pnpm install @akhlaqdigital/editor

⚛️ React Usage

Basic Implementation

import React, { useState } from 'react';
import { Editor } from '@akhlaqdigital/editor';
// Import editor styles
import '@akhlaqdigital/editor/styles.css';

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

  return (
    <div>
      <Editor
        content={content}
        onChange={(html) => setContent(html)}
        placeholder="Start typing..."
        className="min-h-64"
      />
    </div>
  );
}

export default MyEditor;

Advanced Configuration

import React, { useState } from 'react';
import { SimpleEditor } from '@akhlaqdigital/editor';
// Import editor styles
import '@akhlaqdigital/editor/styles.css';

function AdvancedEditor() {
  const [content, setContent] = useState('<h1>Welcome!</h1>');
  
  const mentions = [
    { id: 1, label: 'John Doe' },
    { id: 2, label: 'Jane Smith' }
  ];

  return (
    <SimpleEditor
      content={content}
      onChange={setContent}
      placeholder="Write something amazing..."
      height={500}
      isAutoFocus={false}
      isShowMention={true}
      isShowEmoji={true}
      isFileUpload={true}
      mentions={mentions}
    />
  );
}

🔷 Next.js Usage

App Router (Recommended)

// app/editor/page.tsx
'use client';

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

export default function EditorPage() {
  const [content, setContent] = useState('');

  return (
    <main className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">My Editor</h1>
      <Editor
        content={content}
        onChange={setContent}
        placeholder="Start writing..."
        className="min-h-96 border rounded-lg"
      />
    </main>
  );
}

Pages Router

// pages/editor.tsx
import dynamic from 'next/dynamic';
import { useState } from 'react';

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

export default function EditorPage() {
  const [content, setContent] = useState('');

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">My Editor</h1>
      <Editor
        content={content}
        onChange={setContent}
        placeholder="Start writing..."
      />
    </div>
  );
}

🔧 Component Props

PropTypeDefaultDescription
contentstring""Initial HTML content
onChange(html: string) => void-Callback when content changes
placeholderstring"Start typing..."Placeholder text
classNamestring-CSS classes for the editor container
isAutoFocusbooleanfalseEnable auto focus on editor
isEditablebooleantrueEnable editing capabilities
isRefreshEditorbooleanfalseForce remount editor when dependencies change
isShowMentionbooleantrueEnable @mention functionality
isFileUploadbooleantrueEnable file upload features
isShowEmojibooleantrueEnable emoji picker with categorized emojis
isBottomToolbarbooleanfalsePosition toolbar at the bottom
heightnumber300Initial height of the editor in pixels
acceptedFileTypesstring"*"Accepted file types for upload
mentionsArray<{id, label}>[]List of mentionable users
onInit(editor: any) => void-Callback when editor is initialized
handleImageInsertionfunction-Custom image upload handler
handleFilesChangefunction-Custom file upload handler
editorEditor-Custom editor instance

⚡ Event Handling

Content Changes & Editor Ready

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

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

  const handleContentChange = (newContent) => {
    console.log('Content changed:', newContent);
    setContent(newContent);
    // Save to server or localStorage
    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..."
    />
  );
}

🎨 Styling & Customization

Custom CSS

/* Override editor styles */
.akd {
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
}

.akd:focus-within {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Custom button styling */
.akd-button {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 8px;
  border-radius: 4px;
}

/* Mention styling */
.mention {
  background: #3b82f6;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

Tailwind CSS Integration

<Editor
  className="
    min-h-64 
    border-2 border-gray-300 
    rounded-lg 
    focus-within:border-blue-500 
    focus-within:ring-2 
    focus-within:ring-blue-200
    p-4
  "
  content={content}
  onChange={setContent}
/>

📘 TypeScript Support

Akhlaq Digital Editor is built with TypeScript and provides full type definitions out of the box.

import React, { useState } from 'react';
import { Editor, EditorProps, MentionUser } from '@akhlaqdigital/editor';

interface MyEditorProps {
  initialContent?: string;
  onSave?: (content: string) => void;
}

const MyEditor: React.FC<MyEditorProps> = ({ 
  initialContent = '', 
  onSave 
}) => {
  const [content, setContent] = useState<string>(initialContent);
  
  const mentions: MentionUser[] = [
    { id: 1, label: 'John Doe', email: 'john@example.com' },
    { id: 2, label: 'Jane Smith', email: 'jane@example.com' }
  ];

  const handleChange = (html: string) => {
    setContent(html);
    onSave?.(html);
  };

  return (
    <Editor
      content={content}
      onChange={handleChange}
      mentions={mentions}
      placeholder="Start typing..."
    />
  );
};

export default MyEditor;

🎯 Try It Live

Experience the NPM version with our React demo application.

View React Demo →