epub-flow 0.0.5 → 0.0.12

package/README.md

@@ -5,25 +5,33 @@ A premium, feature-rich EPUB reader library for Angular applications. Built with
 ## ✨ Features
 
 - 📖 **Smooth Reading**: Powered by Epub.js for reliable rendering.
-- 🌓 **Aesthetic Transitions**: Integrated Light and Dark modes with smooth color transitions.
-- 📚 **Beautiful TOC**: Hierarchical Table of Contents with dot leaders and indentation.
-- 🖼️ **Cover Preview**: Custom loading screen with pulse-animated book cover previews.
-- 🏷️ **Annotations**: Support for highlights, notes, and bookmarks.
-- 📱 **Responsive**: Mobile-first design that looks great on any screen size.
-- 🔍 **Search**: Full-text search with highlighting in result snippets.
-- 🛠️ **Configurable**: Toggle features like search, notes, font controls, etc.
+- 🌓 **Aesthetic Dark Mode**: Support for modern dark aesthetics with `rgb(32 33 32)` background.
+- 🖋️ **Rich Text Notes**: Integrated `ngx-editor` for professionally formatted notes.
+- 📚 **Beautiful TOC**: Hierarchical Table of Contents with smooth navigation.
+- 🖼️ **Cover Preview**: pulse-animated book cover previews during load.
+- 🏷️ **State-Managed Annotations**: Fully event-driven highlights and underlines.
+- 📱 **Responsive**: Mobile-first design that looks great on any device.
+- 🔍 **Advanced Search**: Case-insensitive search with highlighted snippets.
 
 ## 🚀 Installation
 
+Install the package via npm:
+
+```bash
+npm install epub-flow --legacy-peer-deps
+```
+
+Ensure the following peer dependencies are installed:
+
 ```bash
-npm install epub-flow epubjs
+npm install epubjs ngx-editor @angular/cdk primeng primeicons --save
 ```
 
 ## 🛠 Setup
 
 ### 1. Import EpubReaderModule
 
-Add `EpubReaderModule` to your `AppModule` or standalone component:
+Add `EpubReaderModule` to your module:
 
 ```typescript
 import { EpubReaderModule } from 'epub-flow';
@@ -37,8 +45,17 @@ import { EpubReaderModule } from 'epub-flow';
 export class AppModule { }
 ```
 
-### 2. Required Styles
-The package is designed to be standalone. You only need to ensure your global `styles.scss` is set up for your application. No external UI library styles are required.
+### 2. Include Required Styles
+
+Add the necessary styles to your `styles.scss` or `angular.json`:
+
+```scss
+/* In styles.scss */
+@import "primeicons/primeicons.css";
+@import "primeng/resources/themes/lara-light-blue/theme.css";
+@import "primeng/resources/primeng.min.css";
+@import "ngx-editor/lib/styles/editor.scss";
+```
 
 ## 📖 Usage
 
@@ -47,35 +64,68 @@ The package is designed to be standalone. You only need to ensure your global `s
 <epub-flow [epubUrl]="'assets/books/sample.epub'"></epub-flow>
 ```
 
-### Advanced Usage with Feature Toggles
+### Advanced Usage (Event-Driven)
+The component is designed to be stateless regarding annotations, allowing the parent application to manage persistence.
+
 ```html
 <epub-flow 
-  [epubBlob]="currentBlob" 
-  [coverPage]="'assets/cover.jpg'"
-  [enableDarkMode]="true"
-  [enableSearch]="true"
-  [enableHighlights]="true"
-  [enableBookmarks]="true"
-  [enableChapterList]="true"
-  [enableTextSelection]="true">
+  [bookId]="123"
+  [epubUrl]="bookUrl" 
+  [underlineCfiList]="myUnderlines"
+  [highlightCfiList]="myHighlights"
+  (underlineAddRequest)="onUnderlineAdd($event)"
+  (underlineRemoveRequest)="onUnderlineRemove($event)"
+  (highlightAddRequest)="onHighlightAdd($event)"
+  (highlightRemoveRequest)="onHighlightRemove($event)">
 </epub-flow>
 ```
 
-## ⚙️ Configuration (Inputs)
+```typescript
+// Example Handler
+onHighlightAdd(event: {cfi: string, color: string}) {
+  console.log('User added highlight:', event.cfi, 'with color:', event.color);
+  // 1. Save to your DB via API
+  // 2. Update your local 'myHighlights' array to persist across sessions
+}
+```
 
+## ⚙️ Configuration
+
+### Inputs
 | Input | Type | Default | Description |
 |---|---|---|---|
 | `epubUrl` | `string` | `null` | URL to a remote EPUB file. |
-| `epubBlob` | `Blob` | `null` | Local Blob or File object for direct loading. |
+| `epubBlob` | `Blob` | `null` | Local Blob object for direct loading. |
 | `coverPage` | `string` | `null` | URL to a cover image displayed during loading. |
-| `bookId` | `string \| number` | `0` | Unique ID for backend integration. |
+| `bookId` | `string \| number` | `0` | Unique ID for backend synchronization. |
+| `underlineCfiList` | `string[]` | `[]` | List of CFIs to be rendered as underlines. |
+| `highlightCfiList` | `{cfi:string, color:string}[]` | `[]` | List of objects to be rendered as highlights. |
 | `enableDarkMode` | `boolean` | `true` | Toggle Dark Mode availability. |
-| `enableSearch` | `boolean` | `true` | Toggle Search tool. |
-| `enableHighlights` | `boolean` | `true` | Toggle Highlighting tools. |
-| `enableBookmarks` | `boolean` | `true` | Toggle Bookmarking. |
-| `enableChapterList` | `boolean` | `true` | Toggle Table of Contents. |
-| `enableFontSize` | `boolean` | `true` | Toggle Font size controls. |
-| `enableNotes` | `boolean` | `true` | Toggle Note creation. |
+| `enableSearch` | `boolean` | `true` | Toggle the Search tool. |
+| `enableHighlights` | `boolean` | `true` | Toggle Underline/Highlighting tools. |
+| `enableBookmarks` | `boolean` | `true` | Toggle Bookmarking tool. |
+| `enableNotes` | `boolean` | `true` | Toggle Rich Text note creation. |
+
+### Outputs
+| Output | Payload | Description |
+|---|---|---|
+| `underlineAddRequest` | `{cfi: string}` | Emits when a user selects text to underline. |
+| `underlineRemoveRequest` | `{cfi: string}` | Emits when a user confirms removal of an underline. |
+| `highlightAddRequest` | `{cfi: string, color: string}` | Emits when a user selects a highlight color. |
+| `highlightRemoveRequest` | `{cfi: string}` | Emits when a user confirms removal of a highlight. |
+
+## 🛠 Development
+
+### Building the library
+```bash
+npx -y @angular/cli build epub-reader
+```
+
+### Creating a package
+```bash
+cd dist/epub-reader
+npm pack
+```
 
 ## 📄 License
 MIT