Version	React	Vite	License

The Ultimate Hybrid: A powerful split-screen editor combining Markdown simplicity with HTML precision.

Der ultimative Hybrid: Ein leistungsstarker Split-Screen-Editor, der die Einfachheit von Markdown mit der Präzision von HTML vereint.

🇺🇸 English Documentation

📖 About

DualForge Editor is a modern, React-based text editor designed for developers and content creators who need more than just standard Markdown. It features a dual-pane interface (Editor & Live Preview), a rich toolbar for both Markdown and HTML helper tools, and advanced extensions like Math formulas, Diagrams, and Admonitions.

✨ Key Features

⚡ Real-time Split Screen: Write on the left, see the result instantly on the right.
📝 Hybrid Syntax: Supports standard Markdown (**bold**, # H1) AND raw HTML (<div style="...">).
🛠️ Dual Toolbar:
- Markdown Tab (Blue): Standard formatting, Lists, Tables, Math, TOC.
- HTML Tab (Green): Text alignment, Colors, Iframe generator, Grid layouts, Spoilers.
🎨 Rich Media Tools:
- Icon Picker: Integrated FontAwesome gallery (Searchable).
- Emoji Picker: Insert emojis with a click.
- Color Picker: Hex-code generator for text/backgrounds.
📐 Advanced Rendering:
- Math: LaTeX support via KaTeX ($$E = mc^2$$).
- Diagrams: Mermaid support flowcharts & graphs.
- Admonitions: Beautiful alert boxes (:::tip, :::warning).
- TOC: Auto-generated Table of Contents ([[toc]]).
🌍 Internationalization (i18n): One-click switch between English and German.
🧹 Smart Formatter: Cleans up code, removes trailing spaces, and fixes HTML indentation.
▦ Smart Table Generator: Visual grid editor with intelligent Excel copy-paste support to create complex Markdown tables in seconds.

🚀 Installation & Configuration

Default Port: 1001

⚙️ Configuration

Settings are managed centrally via the .env file in the root directory.

Clone the repository:

    git clone https://github.com/el-choco/dualforge-editor.git
    cd dualforge-editor

Create or edit the .env file:

    VITE_PORT=1001
    VITE_HOST=0.0.0.0
    NODE_ENV=development

Start Container:

    docker compose up -d

. Open in Browser:
Go to http://localhost:1001 (or your configured VITE_PORT).

> **Note:** To change the port, simply update `VITE_PORT` in the `.env` file and restart the container.

💻 Option B: Node.js (Manual)

Install dependencies:

    npm install

Start Server:

    npm run dev

💡 Syntax Guide

Feature	Syntax	Output
TOC	`[[toc]]`	Generates a Table of Contents
Math	`$$ x^2 $$`	Renders formatted Formula
Tip Box	`:::tip`<br>`Text`<br>`:::`	Green Info Box
Spoiler	`Click <details>...`	Collapsible text
Language	Toolbar Toggle	Switch UI EN/DE

🛠️ Tech Stack

Core: React 18, Vite
Parser: Marked, DOMPurify
Syntax Highlighting: Highlight.js
Math: KaTeX
Icons: Lucide React, FontAwesome
I18n: i18next

🇩🇪 Deutsche Dokumentation

📖 Über das Projekt

DualForge Editor ist ein moderner, React-basierter Texteditor für Entwickler und Content Creator, die mehr als nur Standard-Markdown benötigen. Er bietet eine zweigeteilte Oberfläche (Editor & Live-Vorschau), eine umfangreiche Toolbar für Markdown- und HTML-Tools sowie erweiterte Funktionen wie mathematische Formeln, Diagramme und Hinweisboxen.

✨ Hauptfunktionen

⚡ Echtzeit-Split-Screen: Links schreiben, rechts sofort das Ergebnis sehen.
📝 Hybrid-Syntax: Unterstützt Standard-Markdown (**fett**, # H1) UND rohes HTML (<div style="...">).
🛠️ Doppelte Werkzeugleiste:
- Markdown-Tab (Blau): Formatierung, Listen, Tabellen, Mathe, Inhaltsverzeichnis.
- HTML-Tab (Grün): Textausrichtung, Farben, Iframe-Generator, Grid-Layouts, Spoiler.
🎨 Medien-Tools:
- Icon-Galerie: Integrierte FontAwesome-Suche.
- Emoji-Picker: Emojis per Klick einfügen.
- Farbwähler: Hex-Code-Generator für Text und Hintergründe.
📐 Erweitertes Rendering:
- Mathe: LaTeX-Support via KaTeX ($$ E = mc^2 $$).
- Diagramme: Mermaid-Support für Flussdiagramme.
- Hinweisboxen: Schicke Alert-Boxen (:::tip, :::warning).
- TOC: Automatisch generiertes Inhaltsverzeichnis ([[toc]]).
🌍 Mehrsprachigkeit (i18n): Umschalten zwischen Deutsch und Englisch mit einem Klick.
🧹 Smart Formatter: Bereinigt den Code, entfernt unnötige Leerzeichen und repariert Abstände.
▦ Smarter Tabellen-Generator: Visueller Grid-Editor mit intelligenter Excel-Copy-Paste-Funktion zum blitzschnellen Erstellen komplexer Markdown-Tabellen.

🚀 Installation & Konfiguration

Standard-Port: 1001

⚙️ Konfiguration

Alle Einstellungen werden zentral über die .env Datei im Hauptverzeichnis verwaltet.

Repository klonen:

    git clone https://github.com/el-choco/dualforge-editor.git
    cd dualforge-editor

Erstelle oder bearbeite die .env Datei:

    VITE_PORT=1001
    VITE_HOST=0.0.0.0
    NODE_ENV=development

Container starten:

    docker compose up -d

Im Browser öffnen:
Gehe zu http://localhost:1001 (bzw. dein konfigurierter VITE_PORT).

> Hinweis: Um den Port zu ändern, passe einfach VITE_PORT in der .env Datei an und starte den Container neu.

💻 Option B: Node.js (Manuell)

Abhängigkeiten installieren:

    npm install

Server starten:

    npm run dev

💡 Syntax Kurzanleitung

Funktion	Syntax	Ergebnis
Inhalt	`[[toc]]`	Erstellt Inhaltsverzeichnis
Mathe	`$$ x^2 $$`	Rendert mathematische Formel
Tipp Box	`:::tip`<br>`Text`<br>`:::`	Grüne Hinweisbox
Spoiler	`Klick <details>...`	Ausklappbarer Text
Sprache	Toolbar Schalter	UI DE/EN umschalten

🛠️ Verwendete Technologien

Core: React 18, Vite
Parser: Marked, DOMPurify
Highlighting: Highlight.js
Mathe: KaTeX
Icons: Lucide React, FontAwesome
I18n: i18next

Made with ❤️ by el-choco