pagemaster-editor 0.3.0 → 0.3.5

package/README.md

@@ -1,6 +1,9 @@
-# PageMaster Editor
+# Aditily
 
-A powerful, DOCX-style rich text editor and PDF viewer for React applications. Built with Tiptap, React PDF, and generic document handling libraries.
+A powerful, DOCX-style rich text editor and PDF viewer for React applications. Built with Tiptap, React PDF, and modern styling libraries.
+
+[![NPM Version](https://img.shields.io/npm/v/aditily.svg)](https://www.npmjs.com/package/aditily)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 ## Features
 
@@ -24,14 +27,14 @@ A powerful, DOCX-style rich text editor and PDF viewer for React applications. B
 
 ### 📄 PDF Integration
 - **Integrated Viewer**: Built-in tabbed interface to switch between Editor and PDF viewing modes.
-- **PDF Upload**: Upload PDF files directly from the toolbar.
-- **Advanced Controls**: Zoom (50%-300%), page navigation, and responsive rendering.
+- **PDF Upload**: Upload PDF files directly from the toolbar for convenient viewing and reference.
+- **Advanced Controls**: Zoom (50%-300%), page navigation, sidebars for thumbnails, and responsive rendering.
 
 ### 💾 Import & Export
 - **DOCX Support**: 
   - **Import**: Load existing DOCX files for editing.
-  - **Export**: Generate distinct, browser-compatible DOCX files with improved formatting.
-- **PDF Export**: Export your document content directly to PDF format.
+  - **Export**: Generate high-fidelity DOCX files compatible with Microsoft Word and Google Docs.
+- **PDF Export**: Export your document content directly to PDF format with a single click.
 
 ### ⌨️ Keyboard Shortcuts
 
@@ -51,23 +54,25 @@ A powerful, DOCX-style rich text editor and PDF viewer for React applications. B
 ## Installation
 
 ```bash
-npm install pagemaster-editor
+npm install aditily
 ```
 
 ## Usage
 
 ### Basic Usage
 
+Import the component and its baseline styles. Ensure the parent container has a height.
+
 ```tsx
-import { DocumentEditor } from 'pagemaster-editor';
-import 'pagemaster-editor/dist/style.css';
+import { DocumentEditor } from 'aditily';
+import 'aditily/dist/style.css';
 
 function App() {
   return (
-    <div style={{ height: '100vh' }}>
+    <div style={{ height: '100vh', width: '100vw' }}>
       <DocumentEditor 
-        initialContent="<h1>Hello World</h1>"
-        onChange={(html) => console.log(html)}
+        initialContent="<h1>Welcome to Aditily</h1>"
+        onChange={(html) => console.log('Content updated:', html)}
       />
     </div>
   );
@@ -76,15 +81,20 @@ function App() {
 
 ### Next.js Integration (SSR)
 
-Since PageMaster Editor uses browser-only APIs (like Canvas and DOM), you should import it dynamically when using Next.js to avoid hydration mismatches.
+Since Aditily uses browser-specific APIs (Canvas, DOM), it must be imported dynamically.
 
 ```tsx
+"use client";
+
 import dynamic from 'next/dynamic';
-import 'pagemaster-editor/dist/style.css';
+import 'aditily/dist/style.css';
 
 const DocumentEditor = dynamic(
-  () => import('pagemaster-editor').then((mod) => mod.DocumentEditor),
-  { ssr: false }
+  () => import('aditily').then((mod) => mod.DocumentEditor),
+  { 
+    ssr: false,
+    loading: () => <div>Loading Editor...</div>
+  }
 );
 
 export default function Page() {
@@ -92,44 +102,51 @@ export default function Page() {
 }
 ```
 
-### Tailwind CSS Setup
+### Tailwind CSS Configuration
 
-If your project uses Tailwind CSS, ensure you include the library components in your content path so the styles are generated:
+Aditily uses Tailwind for styling. To ensure all library styles are properly purged/generated in your project:
 
 #### Tailwind v3 (tailwind.config.js)
 ```javascript
 module.exports = {
   content: [
-    // ... your project paths
-    "./node_modules/pagemaster-editor/dist/**/*.{js,ts,jsx,tsx}",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/aditily/dist/**/*.{js,ts,jsx,tsx}",
   ],
-  // ...
+  theme: {
+    extend: {},
+  },
+  plugins: [],
 }
 ```
 
 #### Tailwind v4 (globals.css)
 ```css
 @import "tailwindcss";
-@source "../../node_modules/pagemaster-editor/src/**/*.{ts,tsx}"; /* or dist if published */
-@import "pagemaster-editor/style";
+@import "aditily/style";
+
+/* Ensure Tailwind scans the library for utility classes */
+@source "../../node_modules/aditily/dist/**/*.{js,ts,jsx,tsx}";
 ```
 
 ## Props
 
+The `DocumentEditor` component accepts the following props:
+
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `initialContent` | `string` | `""` | Initial HTML content of the editor |
-| `className` | `string` | `""` | Additional CSS classes for the container |
-| `onChange` | `(html: string) => void` | `undefined` | Callback called when content changes |
-| `readOnly` | `boolean` | `false` | Disable editing and hide toolbars |
-| `placeholder` | `string` | `"Enter your content here..."` | Placeholder text when empty |
+| `initialContent` | `string` | `""` | Initial HTML string to load into the editor. |
+| `className` | `string` | `""` | Additional CSS classes for the outer container. |
+| `onChange` | `(html: string) => void` | `undefined` | Callback function triggered on every content change. |
+| `readOnly` | `boolean` | `false` | If true, the editor is disabled and toolbars are hidden. |
+| `placeholder` | `string` | `"Enter your content here..."` | Text to show when the editor is empty. |
 
 ## Peer Dependencies
 
-Ensure you have the following installed in your project:
-- `react` (>= 18)
-- `react-dom` (>= 18)
+Ensure your project has these dependencies:
+- `react` >= 18.0.0
+- `react-dom` >= 18.0.0
 
 ## License
 
-MIT
+MIT © [Surendra Singh](https://github.com/surendrasinghc80)

package/dist/{html2canvas-C14FkWKb.js → html2canvas-DlG3m2SO.js}

@@ -1,4 +1,4 @@
-import { g as c, r as f } from "./index-u7lSscc-.js";
+import { g as c, r as f } from "./index-BEovP1jN.js";
 function l(r, n) {
   for (var o = 0; o < n.length; o++) {
     const e = n[o];