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

MagnetarQuill is a versatile, extensible, and powerful WYSIWYG editor component built with Angular, designed to streamline content creation.

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

(Assuming magnetar-quill-example.png shows the current state based on completed features)

• Status
• Features
• Installation
• Quick Start (Usage in Angular)
• Contributing & Local Development
• Available Commands (for Development)
• Roadmap
• License
• Stay Connected

MagnetarQuill is currently under active development. See the Project Progress section for detailed status.

Based on the current completed progress, MagnetarQuill offers:

• 🖋 Basic Text Formatting: Support for bold, italic, underline, strikethrough.
• 🎨 Font Options: Change font family and font size via dropdowns.
• 🎨 Color Selection: Apply text and background colors using color pickers.
• 📐 Text Alignment & Spacing: Includes options for text alignment and line spacing.
• 📝 Lists: Support for ordered and unordered lists.
• 📄 Headers: Support for custom headers (H1-H6).

(More features like image support, tables, clipboard enhancements, file export/import, and the plugin system are planned or in progress - see Roadmap and Progress below).

To use the MagnetarQuill component in your Angular project, install the library from npm (once published):

npm i --save magnetar-quill

(Note: Ensure the package is published to npm for this command to work.)

• An existing Angular project (v17.3.0 or higher recommended).

1. Import the standalone LibMagnetarQuillComponent into your Angular component or module where you want to use the editor:

   // Example in a standalone Angular component
   import { Component } from '@angular/core';
   import { LibMagnetarQuillComponent } from 'magnetar-quill'; // Adjust path if needed after install
   import { FormsModule } from '@angular/forms'; // Needed for ngModel
   
   @Component({
     selector: 'app-my-editor-page',
     standalone: true,
     imports: [ LibMagnetarQuillComponent, FormsModule ], // Import the component
     template: `
       <h2>My Editor</h2>
       <lib-magnetar-quill [(ngModel)]="documentContent"></lib-magnetar-quill>
       <hr>
       <h3>Content Preview:</h3>
       <div [innerHTML]="documentContent | safeHtml"></div>
     ` // safeHtml pipe would be needed for rendering raw HTML
   })
   export class MyEditorPageComponent {
     documentContent: string = '<p>Start editing here...</p>';
   }

   (Note: You might need a pipe like safeHtml to securely render the HTML output from the editor)

2. Add the component tag to your template and use [(ngModel)] for two-way binding of the editor's HTML content:

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

3. You can now use the editor in your application!

If you want to contribute to MagnetarQuill or run the demo application locally:

• Node.js (v16.x or higher)
• Angular CLI (v17.3.0 or higher)

git clone [https://github.com/scherenhaenden/MagnetarQuill.git](https://github.com/scherenhaenden/MagnetarQuill.git)
cd MagnetarQuill

npm install

ng serve

Open your browser at http://localhost:4200 to see the MagnetarQuill demo application.

Inside the cloned project directory:

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

🔭 Planned & In-Progress Features:

• 📷 Image Insertion, Editing, and Clipboard Support
• 📊 Table Insertion and Editing
• ✨ Object Context Menu & Drag-and-Drop Repositioning
• ✂ Rich Text Copy-Paste Support & Sanitization
• 🔄 Undo/Redo Functionality with Multi-Step History
• 💾 HTML and Markdown Export/Import
• 🖥 Full-Screen Mode
• 🎨 Light/Dark Theme Support & Customization
• 🔌 Plugin System for Custom Toolbar Tools & Extensions
• 🤝 Advanced collaborative editing tools (Potential Future Enhancement)
• ✅ Enhanced accessibility features (Potential Future Enhancement)
• 📱 Mobile optimization for touch devices (Potential Future Enhancement)

(See the detailed progress table below for current status)

Here’s the updated table with the latest progress:

(Status Key: ✅ Completed | 🔄 In Progress | 🔴 Not Started)

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

1. Fork the repository (https://github.com/scherenhaenden/MagnetarQuill.git).
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 against the main repository.
4. We’ll review your PR and merge it!

Please read our Contributing Guidelines (if available) for more details.

MagnetarQuill is licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License. You are free to use, distribute, and build upon this work, as long as proper attribution is given. See the LICENSE file for more details.

Follow development progress or ask questions:

• GitHub Issues: MagnetarQuill Issues
• GitHub Discussions: MagnetarQuill Discussions