MagnetarQuill 🖋✨

The Next-Gen Universe-Inspired WYSIWYG Editor - Built with Angular 🚀💫

MagnetarQuill is a versatile, extensible, and powerful WYSIWYG editor built with Angular, designed to streamline content creation with rich text, media, tables, and more. MagnetarQuill stands out with its plugin architecture, cross-browser support, and stunning theming options.

Inspired by the most extreme phenomena in the universe, the Magnetar, and combined with the elegance of a quill, this editor takes your text editing experience beyond the ordinary.

---

Current view 🌟

---

Table of Contents 📚

• Features
• Installation
• Quick Start
• Usage
• Plugin Architecture
• Theming & Customization
• Available Commands
• Roadmap
• Contributing
• License
• Stay Connected
• Project Progress

---

Features 🌟

MagnetarQuill is packed with features to meet all your content creation needs:

• 🖋 Text Formatting: Support for bold, italic, underline, strikethrough, and more.
• 🎨 Custom Fonts and Colors: Easily change fonts, text colors, and background colors.
• 📝 Headers & Lists: Support for custom headers (H1-H6) and ordered/unordered lists.
• 📷 Insert Media: Insert and edit images, videos, links, and more.
• 📊 Tables & Block Elements: Create and manage tables, blockquotes, and code blocks.
• ✂ Rich Clipboard Support: Cut, copy, and paste rich text, media, and external content.
• 🔄 Undo/Redo History: Track changes with multi-step undo/redo support.
• 🌐 Cross-Browser & Responsive: Full support across Chrome, Firefox, Safari, Edge, and mobile browsers.
• 🎛 Plugin Architecture: Extend MagnetarQuill with custom plugins for endless possibilities.
• 🎨 Theme Support: Light, dark, and fully customizable themes with localization options.
• 💾 Export & Import: Save your work as HTML, Markdown, RTF, or PDF.

---

Installation 🛠

Prerequisites

• Node.js (v16.x or higher) and Angular CLI (v17.3.0 or higher) — only needed if you plan to build or customize MagnetarQuill within an Angular environment.

Note: For general use in frameworks like React or Vue, or in vanilla JavaScript, you can use MagnetarQuill as a standalone web component without Angular-specific prerequisites.

To install the MagnetarQuill library from npm, run the following command:

npm i --save magnetar-quill

Step 1: Clone the Repository

git clone https://github.com/yourusername/magnetarquill.git
cd magnetarquill

Step 2: Install Dependencies

npm install

Step 3: Run the Development Server

ng serve

Open your browser at http://localhost:4200 to see MagnetarQuill in action!

---

Quick Start 🚀

To get up and running with MagnetarQuill:

1. Import the core MagnetarQuillModule into your Angular application.

   import { MagnetarQuillModule } from 'magnetarquill';
   
   @NgModule({
     imports: [MagnetarQuillModule],
     declarations: [AppComponent],
     bootstrap: [AppComponent],
   })
   export class AppModule {}

2. Add the MagnetarQuill component to your template:

   <magnetar-quill [(ngModel)]="documentContent"></magnetar-quill>

3. Start editing with a galaxy of rich features at your fingertips!

---

Usage ✍️

Text Formatting

Format text using bold, italic, underline, and strikethrough options:

<magnetar-quill></magnetar-quill>

You can also style text with headers, lists, and blockquotes:

<magnetar-quill [formatOptions]="['headers', 'lists', 'blockquotes']"></magnetar-quill>

Image and Media Insertion

Upload and edit images with resizing, alignment, and captions:

<magnetar-quill [mediaOptions]="['images', 'videos']"></magnetar-quill>

Clipboard Support

MagnetarQuill handles pasted content seamlessly:

<magnetar-quill enableClipboardSupport="true"></magnetar-quill>

File Export & Import

Save your work in different formats like HTML, RTF, or Markdown:

const htmlContent = this.editor.exportAsHTML();
const markdownContent = this.editor.exportAsMarkdown();

---

Plugin Architecture 🔌

MagnetarQuill is built with extensibility in mind. You can easily add custom plugins to extend functionality.

Creating a Plugin

1. Create a new plugin that adds a custom toolbar button:

   const myPlugin = {
     name: 'customButton',
     action: () => {
       console.log('Custom button clicked!');
     },
   };

2. Register the plugin with MagnetarQuill:

   this.editor.registerPlugin(myPlugin);

Available Plugin Hooks

• onTextChange: Listen for text changes.
• onObjectInsertion: Trigger actions on media insert.
• onFormattingChange: Track formatting updates.

Extend the editor with limitless possibilities! 🎉

---

Theming & Customization 🎨

MagnetarQuill provides full support for light and dark themes, along with the ability to create custom themes.

Light/Dark Mode Switch

Toggle between light and dark modes:

<magnetar-quill [theme]="dark ? 'dark' : 'light'"></magnetar-quill>

Custom Themes

Create your own theme by defining custom styles:

const customTheme = {
  textColor: '#4a4a4a',
  backgroundColor: '#f0f0f0',
  toolbarColor: '#333',
};

this.editor.applyTheme(customTheme);

---

Available Commands 📜

• ng serve: Start the development server.
• ng build: Build the project for production.
• ng test: Run unit tests.
• ng lint: Lint the codebase for errors.

---

Roadmap 🛣

🔭 Upcoming Features:

• Integration with Google Docs and Microsoft Word.
• More advanced collaborative editing tools.
• Enhanced accessibility features.
• Mobile optimization for touch devices.
• Real-time spell checking via external plugins.

---

Contributing 🤝

We welcome contributions! Here's how you can help:

1. Fork the repository.
2. Create a new branch for your feature or bug fix:

   git checkout -b feature/my-awesome-feature

3. Commit your changes and open a pull request:

   git push origin feature/my-awesome-feature

4. We’ll review your PR and merge it!

Please read our Contributing Guidelines for more details.

---

License 📄

MagnetarQuill is licensed under the MIT License. See the LICENSE file for more information.

---

Stay Connected 💬

Follow us for updates, news, and more:

• GitHub Discussions: MagnetarQuill Discussions

---

Project Progress 🏗️

Here’s the updated table with the latest progress:

Step	Feature Description	Status	Version Name
1	Project Setup and Angular Initialization	✅ Completed	Version 0.1 - Setup
2	Implement Bold, Italic, Underline, Strikethrough	✅ Completed	Version 0.2 - Basic Text Formatting
3	Font Family and Font Size Dropdowns	✅ Completed	Version 0.3 - Font Options
4	Text & Background Color Pickers	✅ Completed	Version 0.4 - Color Selection
5	Text Alignment & Line Spacing	✅ Completed	Version 0.5 - Text Alignment & Spacing
6	Ordered and Unordered Lists	✅ Completed	Version 0.6 - Lists and Alignment
7	Custom Headers (H1-H6)	✅ Completed	Version 0.7 - Headers and Block Elements
8	Image Insertion and Editing	🔄 In Progress	Version 0.8 - Image Support
9	Copy-Paste Image Support	🔄 In Progress	Version 0.9 - Image Clipboard
10	Table Insertion and Editing	🔄 In Progress	Version 0.10 - Table Management
11	Object Context Menu	🔄 In Progress	Version 0.11 - Object Management
12	Drag-and-Drop Object Repositioning	🔄 In Progress	Version 0.12 - Object Repositioning
13	Rich Text Copy-Paste Support	🔴 Not Started	Version 0.13 - Rich Text Clipboard
14	Text Sanitization on Paste	🔴 Not Started	Version 0.14 - Paste Sanitization
15	Undo/Redo Functionality	🔴 Not Started	Version 0.15 - Undo/Redo
16	Multi-Step History Support	🔴 Not Started	Version 0.16 - History Features
17	HTML and Markdown Export	🔴 Not Started	Version 0.17 - File Export
18	File Loading (HTML & RTF)	🔴 Not Started	Version 0.18 - File Import
19	Full-Screen Mode	🔴 Not Started	Version 0.19 - Full-Screen
20	Light and Dark Theme Support	🔴 Not Started	Version 0.20 - Theme Customization
21	Plugin System for Custom Toolbar Tools	🔴 Not Started	Version 0.21 - Plugin Support