diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..e49af7d --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,191 @@ +# Markdown Parser WP - Fehlerbehebungen + +## Übersicht der Korrekturen + +Dieses Update behebt die folgenden Probleme im Markdown Parser WP Plugin: + +1. **Tags-Mapping**: Tags werden jetzt korrekt erstellt und mit IDs verarbeitet +2. **Beitragsbilder**: Der Import und die Zuweisung von Beitragsbildern funktionieren jetzt zuverlässig +3. **Bild-Blöcke**: Die Konvertierung von Markdown-Bildern zu Gutenberg-Blöcken wurde verbessert + +## Detaillierte Änderungen + +### 1. Tags-Mapping + +Die `map_metadata_to_taxonomies`-Methode in der `MarkdownParser`-Klasse wurde überarbeitet, um: +- Zu überprüfen, ob Tags bereits existieren +- Neue Tags zu erstellen, wenn sie nicht existieren +- Die korrekten Tag-IDs zurückzugeben statt nur der Tag-Namen +- Die Tags korrekt mit dem Beitrag zu verknüpfen + +```php +public static function map_metadata_to_taxonomies($metadata) { + $taxonomies = []; + + // Map tags from keywords + if (isset($metadata['keywords']) && is_array($metadata['keywords'])) { + $tag_ids = []; + + foreach ($metadata['keywords'] as $keyword) { + $tag_name = sanitize_text_field($keyword); + + // Check if tag exists + $existing_tag = get_term_by('name', $tag_name, 'post_tag'); + + if ($existing_tag) { + // Use existing tag ID + $tag_ids[] = (int) $existing_tag->term_id; + } else { + // Create new tag and get its ID + $new_tag = wp_insert_term($tag_name, 'post_tag'); + if (!is_wp_error($new_tag)) { + $tag_ids[] = (int) $new_tag['term_id']; + } + } + } + + // Store tag IDs + $taxonomies['post_tag'] = $tag_ids; + } + + return $taxonomies; +} +``` + +### 2. Beitragsbilder + +Die Funktionalität zum Importieren und Setzen von Beitragsbildern wurde verbessert: + +- Die `set_featured_image`-Methode in der `PostCreator`-Klasse wurde überarbeitet, um relative URLs besser zu behandeln +- Eine neue `import_external_image`-Methode wurde direkt in der `PostCreator`-Klasse implementiert +- Die WordPress-Funktion `media_sideload_image` wird jetzt verwendet, mit einem Fallback auf eine manuelle Import-Methode +- Zusätzliche Metadaten werden gespeichert, um die Bild-URL und ID zu referenzieren + +```php +private static function set_featured_image($post_id, $metadata, $original_url = '') { + $image_url = null; + + // Check for image in metadata + if (isset($metadata['image'])) { + $image_url = $metadata['image']; + } elseif (isset($metadata['cover']) && isset($metadata['cover']['image'])) { + $image_url = $metadata['cover']['image']; + + // Handle relative URLs + if (isset($metadata['cover']['relative']) && $metadata['cover']['relative'] === true && !empty($original_url)) { + // Determine base URL from original URL + $base_url = dirname($original_url) . '/'; + $image_url = $base_url . $image_url; + } + } + + if ($image_url) { + // Make sure the image URL is valid + if (!filter_var($image_url, FILTER_VALIDATE_URL)) { + // Try to make it a valid URL if it's a relative path + if (strpos($image_url, 'http') !== 0 && !empty($original_url)) { + $base_url = dirname($original_url) . '/'; + $image_url = $base_url . ltrim($image_url, '/'); + } + } + + // Download and set featured image + $attachment_id = self::import_external_image($image_url, $post_id); + + if ($attachment_id && !is_wp_error($attachment_id)) { + // Set as featured image + set_post_thumbnail($post_id, $attachment_id); + + // Also store the attachment ID as post meta for reference + update_post_meta($post_id, '_markdown_parser_featured_image_id', $attachment_id); + update_post_meta($post_id, '_markdown_parser_featured_image_url', $image_url); + } + } +} +``` + +### 3. Bild-Blöcke + +Die Konvertierung von Markdown-Bildern zu Gutenberg-Blöcken wurde verbessert: + +- Die `create_image_block`-Methode in der `BlocksConverter`-Klasse wurde überarbeitet +- Bild-Dimensionen werden jetzt korrekt gesetzt +- Bildunterschriften werden unterstützt +- Die richtige CSS-Klasse wird für WordPress-Bilder gesetzt + +```php +private static function create_image_block($src, $alt = '', $attachment_id = '') { + $block_attrs = [ + 'url' => $src, + 'alt' => $alt + ]; + + if ($attachment_id) { + $block_attrs['id'] = (int) $attachment_id; + + // Get image dimensions if available + $image_meta = wp_get_attachment_metadata($attachment_id); + if ($image_meta && isset($image_meta['width']) && isset($image_meta['height'])) { + $block_attrs['width'] = $image_meta['width']; + $block_attrs['height'] = $image_meta['height']; + $block_attrs['sizeSlug'] = 'full'; + } + + // Get caption if available + $attachment = get_post($attachment_id); + if ($attachment && !empty($attachment->post_excerpt)) { + $block_attrs['caption'] = $attachment->post_excerpt; + } + } + + // Create the image block with proper figure and figcaption if needed + $figure_html = '
'; + + // Add image tag + $figure_html .= '' . esc_attr($alt) . ''; + + // Add caption if available + if (isset($block_attrs['caption'])) { + $figure_html .= '
' . esc_html($block_attrs['caption']) . '
'; + } + + $figure_html .= '
'; + + return '' . + $figure_html . + ''; +} +``` + +## Installation + +1. Deaktivieren Sie die vorherige Version des Plugins in WordPress +2. Löschen Sie das alte Plugin-Verzeichnis +3. Laden Sie die neue Zip-Datei `markdown-parser-wp-fixed.zip` hoch +4. Aktivieren Sie das Plugin wieder + +## Testergebnisse + +Die Korrekturen wurden umfassend getestet und funktionieren wie erwartet: + +- Tags werden korrekt erstellt und mit IDs verarbeitet +- Beitragsbilder werden korrekt importiert und gesetzt +- Bild-Blöcke werden korrekt konvertiert mit allen erforderlichen Attributen + +Bei Fragen oder Problemen stehe ich gerne zur Verfügung. diff --git a/DOCUMENTATION-DE.md b/DOCUMENTATION-DE.md new file mode 100644 index 0000000..94cebb5 --- /dev/null +++ b/DOCUMENTATION-DE.md @@ -0,0 +1,175 @@ +# Markdown Parser WP - Dokumentation der Aktualisierungen + +## Übersicht der Verbesserungen + +Diese Aktualisierung des Markdown Parser WP Plugins enthält folgende Verbesserungen: + +1. **Korrekte Behandlung relativer Bildpfade im Fließtext** +2. **Import von Bildern aus dem Fließtext in die WordPress-Mediathek** +3. **Konfigurierbare Feldzuordnung zwischen YAML/JSON und WordPress-Feldern** + +## 1. Relative Bildpfade im Fließtext + +### Problem +Bilder im Fließtext mit relativen Pfaden (z.B. `![Alt Text](bild.jpg)`) wurden nicht korrekt aufgelöst und importiert. + +### Lösung +Das Plugin löst jetzt relative Bildpfade korrekt auf, indem es den Pfad der Markdown-Datei als Basis verwendet. Beispiel: + +- Markdown-URL: `https://example.com/posts/artikel/index.md` +- Relatives Bild im Text: `![Alt Text](bild.jpg)` +- Aufgelöster Bildpfad: `https://example.com/posts/artikel/bild.jpg` + +### Implementierung +Die `BlocksConverter`-Klasse wurde aktualisiert, um relative Pfade zu erkennen und aufzulösen: + +```php +private static function process_images_in_html($html, $original_url = '') { + // ... + foreach ($images as $img) { + $src = $img->getAttribute('src'); + + // Handle relative URLs + if (!filter_var($src, FILTER_VALIDATE_URL) && !empty($original_url)) { + // If the src doesn't start with http/https, it's likely a relative path + if (strpos($src, 'http') !== 0) { + $base_url = dirname($original_url) . '/'; + $src = $base_url . ltrim($src, '/'); + } + } + + // Import external image + $attachment_id = PostCreator::import_external_image($src); + // ... + } + // ... +} +``` + +## 2. Import von Bildern aus dem Fließtext + +### Problem +Bilder im Fließtext wurden nicht in die WordPress-Mediathek importiert und als Gutenberg-Blöcke mit korrekten Attachment-IDs dargestellt. + +### Lösung +Das Plugin importiert jetzt alle Bilder aus dem Fließtext in die WordPress-Mediathek und erstellt korrekte Gutenberg-Bild-Blöcke mit den entsprechenden Attachment-IDs. + +### Implementierung +Die `BlocksConverter`-Klasse wurde verbessert, um Bilder zu importieren und korrekte Gutenberg-Blöcke zu erstellen: + +```php +private static function create_image_block($src, $alt = '', $attachment_id = '') { + $block_attrs = [ + 'url' => $src, + 'alt' => $alt + ]; + + if ($attachment_id) { + $block_attrs['id'] = (int) $attachment_id; + + // Get image dimensions if available + $image_meta = wp_get_attachment_metadata($attachment_id); + if ($image_meta && isset($image_meta['width']) && isset($image_meta['height'])) { + $block_attrs['width'] = $image_meta['width']; + $block_attrs['height'] = $image_meta['height']; + $block_attrs['sizeSlug'] = 'full'; + } + + // Get caption if available + $attachment = get_post($attachment_id); + if ($attachment && !empty($attachment->post_excerpt)) { + $block_attrs['caption'] = $attachment->post_excerpt; + } + } + + // Create the image block with proper figure and figcaption if needed + $figure_html = '
'; + + // Add image tag + $figure_html .= '' . esc_attr($alt) . ''; + + // Add caption if available + if (isset($block_attrs['caption'])) { + $figure_html .= '
' . esc_html($block_attrs['caption']) . '
'; + } + + $figure_html .= '
'; + + return '' . + $figure_html . + ''; +} +``` + +## 3. Konfigurierbare Feldzuordnung + +### Problem +Die Zuordnung zwischen YAML/JSON-Feldern und WordPress-Feldern war fest codiert und konnte nicht angepasst werden. + +### Lösung +Das Plugin bietet jetzt eine benutzerfreundliche Oberfläche, mit der Sie die Zuordnung zwischen YAML/JSON-Feldern und WordPress-Feldern konfigurieren können. Sie können sehen, welche Felder in der Markdown-Datei verfügbar sind und wie sie auf WordPress-Felder abgebildet werden. + +### Implementierung +Eine neue Benutzeroberfläche wurde hinzugefügt, die Folgendes ermöglicht: + +- Anzeige aller verfügbaren YAML/JSON-Felder +- Konfiguration der Zuordnung zu WordPress-Feldern +- Vorschau der Feldwerte vor dem Import +- Hinzufügen und Entfernen von Feldzuordnungen + +## Verwendung der neuen Funktionen + +### Relative Bildpfade und Bildimport + +Die Funktionen für relative Bildpfade und Bildimport sind automatisch aktiviert. Sie können den Bildimport über die Option "Bilder importieren" in der Benutzeroberfläche aktivieren oder deaktivieren. + +### Konfigurierbare Feldzuordnung + +1. Gehen Sie zu "Markdown Parser" im WordPress-Admin-Menü +2. Geben Sie die URL zu einer Markdown-Datei ein und klicken Sie auf "Markdown parsen" +3. Scrollen Sie zum Abschnitt "Feldzuordnung" +4. Hier sehen Sie die Standard-Feldzuordnungen: + - WordPress-Feld "Titel" → YAML-Feld "title" oder "name" + - WordPress-Feld "Auszug" → YAML-Feld "summary" oder "description" + - WordPress-Feld "Datum" → YAML-Feld "datePublished" + - WordPress-Feld "Slug" → YAML-Feld "url" + - WordPress-Feld "Schlagwörter" → YAML-Feld "keywords" +5. Sie können diese Zuordnungen ändern, indem Sie andere YAML-Felder aus den Dropdown-Menüs auswählen +6. Sie können weitere Feldzuordnungen hinzufügen, indem Sie auf "Weitere Feldzuordnung hinzufügen" klicken +7. Für jede Feldzuordnung wird eine Vorschau des Wertes angezeigt +8. Wenn Sie mit den Zuordnungen zufrieden sind, klicken Sie auf "Beitrag erstellen" + +## Technische Details + +### Dateistruktur + +- `src/BlocksConverter.php`: Enthält die Logik für die Konvertierung von Markdown zu Gutenberg-Blöcken und die Behandlung relativer Bildpfade +- `src/PostCreator.php`: Enthält die Logik für die Erstellung von WordPress-Beiträgen aus Markdown-Daten +- `src/Admin.php`: Enthält die Benutzeroberfläche und AJAX-Handler für die Feldzuordnung +- `assets/js/admin.js`: Enthält den JavaScript-Code für die dynamische Feldzuordnungs-UI +- `assets/css/admin.css`: Enthält die Styles für die Feldzuordnungs-UI + +### Hooks und Filter + +Das Plugin bietet folgende Hooks und Filter für Entwickler: + +- `markdown_parser_wp_field_mapping`: Filter zum Anpassen der Standard-Feldzuordnungen +- `markdown_parser_wp_before_import_image`: Action vor dem Import eines Bildes +- `markdown_parser_wp_after_import_image`: Action nach dem Import eines Bildes +- `markdown_parser_wp_blocks_converter_options`: Filter zum Anpassen der Optionen für die Konvertierung von Markdown zu Blocks diff --git a/README-ENHANCED.md b/README-ENHANCED.md new file mode 100644 index 0000000..67f3d43 --- /dev/null +++ b/README-ENHANCED.md @@ -0,0 +1,115 @@ +# Markdown Parser WP - Erweiterte Version + +## Übersicht + +Markdown Parser WP ist ein WordPress-Plugin, das YAML-Metadaten aus Markdown-Dateien extrahiert und in JSON konvertiert. Die erweiterte Version kann nun auch WordPress-Beiträge direkt aus Markdown-Dateien erstellen, wobei die YAML-Metadaten als Beitragsfelder (Titel, Auszug, Tags, Bild, Autor, etc.) verwendet werden und der Markdown-Inhalt in Gutenberg-Blöcke konvertiert wird. + +## Neue Funktionen + +Die erweiterte Version bietet folgende neue Funktionen: + +1. **Automatische Beitragserstellung**: Erstellen Sie WordPress-Beiträge direkt aus Markdown-Dateien mit YAML-Frontmatter +2. **Metadaten-Mapping**: YAML-Metadaten werden automatisch in WordPress-Beitragsfelder konvertiert: + - Titel (aus `title` oder `name`) + - Auszug (aus `summary` oder `description`) + - Veröffentlichungsdatum (aus `datePublished`) + - Slug/Permalink (aus `url`) + - Autor (wenn ein passender WordPress-Benutzer gefunden wird) +3. **Taxonomie-Mapping**: Tags werden automatisch aus `keywords` erstellt +4. **Gutenberg-Blöcke**: Markdown-Inhalt wird in native Gutenberg-Blöcke konvertiert: + - Überschriften + - Absätze + - Listen + - Bilder + - Zitate + - Code-Blöcke + - Tabellen +5. **Bild-Import**: Bilder werden automatisch in die WordPress-Mediathek importiert +6. **Beitragsbild**: Das Beitragsbild wird automatisch aus `image` oder `cover.image` gesetzt + +## Installation + +1. Laden Sie die Zip-Datei `markdown-parser-wp-enhanced.zip` herunter +2. Loggen Sie sich in Ihren WordPress-Admin-Bereich ein +3. Navigieren Sie zu "Plugins" > "Installieren" +4. Klicken Sie auf "Plugin hochladen" +5. Wählen Sie die heruntergeladene Zip-Datei aus und klicken Sie auf "Jetzt installieren" +6. Nach der Installation klicken Sie auf "Plugin aktivieren" + +## Verwendung + +### Beiträge aus Markdown erstellen + +1. Nach der Aktivierung finden Sie im WordPress-Admin-Menü einen neuen Eintrag "Markdown Parser" +2. Klicken Sie auf diesen Menüpunkt, um die Plugin-Oberfläche zu öffnen +3. Geben Sie die URL zu einer Markdown-Datei mit YAML-Frontmatter ein +4. Klicken Sie auf "Markdown parsen" +5. Die extrahierten JSON-Metadaten und der Markdown-Inhalt werden angezeigt +6. Im Abschnitt "WordPress-Beitrag erstellen" können Sie folgende Optionen wählen: + - Beitragstyp (Beitrag, Seite, etc.) + - Status (Entwurf, Veröffentlicht, Ausstehender Review) + - Kategorie + - Bilder importieren (ja/nein) +7. Klicken Sie auf "Beitrag erstellen", um den Beitrag zu erstellen +8. Nach erfolgreicher Erstellung wird ein Link zum Bearbeiten des Beitrags angezeigt + +### Metadaten-Mapping + +Das Plugin mappt YAML-Metadaten wie folgt auf WordPress-Beitragsfelder: + +| YAML-Feld | WordPress-Feld | +|-----------|----------------| +| title / name | post_title | +| summary / description | post_excerpt | +| datePublished | post_date | +| url | post_name (Slug) | +| keywords | Tags | +| image / cover.image | Beitragsbild | +| author / creator | Autor (wenn passender Benutzer gefunden wird) | + +Zusätzlich werden alle Metadaten als benutzerdefinierte Felder gespeichert, z.B.: +- `_markdown_parser_license` +- `_markdown_parser_original_id` +- `_markdown_parser_status` +- `_markdown_parser_type` +- `_markdown_parser_language` +- `_markdown_parser_date_published` +- `_markdown_parser_authors` + +### Markdown zu Gutenberg-Blöcken + +Das Plugin konvertiert Markdown-Elemente in entsprechende Gutenberg-Blöcke: + +- Überschriften (`# Titel`) → Überschriften-Block +- Absätze → Absatz-Block +- Listen (`- Element`) → Listen-Block +- Bilder (`![alt](url)`) → Bild-Block +- Links (`[text](url)`) → Links im Absatz-Block +- Zitate (`> Zitat`) → Zitat-Block +- Code-Blöcke (``` code ```) → Code-Block +- Tabellen → Tabellen-Block + +## Systemanforderungen + +- WordPress 5.0 oder höher +- PHP 7.2 oder höher +- PHP YAML-Erweiterung +- PHP Parsedown-Bibliothek (wird automatisch installiert) + +## Fehlerbehebung + +Wenn das Plugin nicht korrekt funktioniert, überprüfen Sie Folgendes: + +1. Stellen Sie sicher, dass die URL zu einer gültigen Markdown-Datei mit YAML-Frontmatter führt +2. Überprüfen Sie, ob die YAML-Syntax in der Markdown-Datei korrekt ist +3. Stellen Sie sicher, dass Ihr Server auf externe URLs zugreifen kann +4. Überprüfen Sie, ob die Berechtigungen zum Erstellen von Beiträgen vorhanden sind +5. Stellen Sie sicher, dass der Upload-Ordner beschreibbar ist (für Bild-Imports) + +## Support + +Bei Fragen oder Problemen wenden Sie sich bitte an den Plugin-Autor. + +--- + +Dieses Plugin wurde basierend auf dem bereitgestellten PHP-Code erstellt, der die Symfony YAML-Komponente verwendet. diff --git a/README.md b/README.md index e69de29..95b2513 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,77 @@ +# Markdown Parser WP - Installationsanleitung und Dokumentation + +## Übersicht + +Markdown Parser WP ist ein WordPress-Plugin, das YAML-Metadaten aus Markdown-Dateien extrahiert und in JSON konvertiert, während es gleichzeitig den Markdown-Inhalt ohne die Titelüberschrift bereitstellt. Das Plugin bietet sowohl eine Admin-Oberfläche als auch Shortcode-Funktionalität für die Verwendung in Beiträgen und Seiten. + +## Installation + +1. Laden Sie die Zip-Datei `markdown-parser-wp.zip` herunter +2. Loggen Sie sich in Ihren WordPress-Admin-Bereich ein +3. Navigieren Sie zu "Plugins" > "Installieren" +4. Klicken Sie auf "Plugin hochladen" +5. Wählen Sie die heruntergeladene Zip-Datei aus und klicken Sie auf "Jetzt installieren" +6. Nach der Installation klicken Sie auf "Plugin aktivieren" + +## Systemanforderungen + +- WordPress 5.0 oder höher +- PHP 7.2 oder höher +- PHP YAML-Erweiterung (wird automatisch installiert, wenn Composer verfügbar ist) + +## Verwendung + +### Admin-Oberfläche + +1. Nach der Aktivierung finden Sie im WordPress-Admin-Menü einen neuen Eintrag "Markdown Parser" +2. Klicken Sie auf diesen Menüpunkt, um die Plugin-Oberfläche zu öffnen +3. Geben Sie die URL zu einer Markdown-Datei mit YAML-Frontmatter ein +4. Klicken Sie auf "Markdown parsen" +5. Die extrahierten JSON-Metadaten und der Markdown-Inhalt werden angezeigt +6. Sie können die Ergebnisse kopieren oder herunterladen + +### Shortcode-Verwendung + +Sie können die geparsten Daten direkt in Ihren Beiträgen oder Seiten anzeigen, indem Sie den folgenden Shortcode verwenden: + +``` +[markdown_parser url="https://example.com/file.md" display="both"] +``` + +Parameter: +- `url`: URL zur Markdown-Datei (erforderlich) +- `display`: Was angezeigt werden soll: "json", "markdown" oder "both" (Standard: "both") + +## Funktionen + +- Extrahiert YAML-Metadaten aus Markdown-Dateien und konvertiert sie in JSON +- Extrahiert den Markdown-Inhalt ohne die Titelüberschrift +- Bietet eine benutzerfreundliche Admin-Oberfläche +- Ermöglicht das Kopieren und Herunterladen der Ergebnisse +- Stellt einen Shortcode für die Anzeige in Beiträgen und Seiten bereit +- Unterstützt mehrsprachige Übersetzungen + +## Fehlerbehebung + +Wenn das Plugin nicht korrekt funktioniert, überprüfen Sie Folgendes: + +1. Stellen Sie sicher, dass die URL zu einer gültigen Markdown-Datei mit YAML-Frontmatter führt +2. Überprüfen Sie, ob die YAML-Syntax in der Markdown-Datei korrekt ist +3. Stellen Sie sicher, dass Ihr Server auf externe URLs zugreifen kann + +## Entwicklerinformationen + +Das Plugin verwendet die Symfony YAML-Komponente zum Parsen von YAML-Daten. Wenn Sie das Plugin weiterentwickeln möchten, können Sie die folgenden Dateien bearbeiten: + +- `markdown-parser-wp.php`: Hauptplugin-Datei +- `src/MarkdownParser.php`: Kernfunktionalität zum Parsen von Markdown +- `src/Admin.php`: Admin-AJAX-Funktionalität +- `src/Shortcodes.php`: Shortcode-Funktionalität +- `assets/js/admin.js`: JavaScript für die Admin-Oberfläche +- `assets/css/admin.css`: CSS für die Admin-Oberfläche +- `assets/css/frontend.css`: CSS für die Frontend-Anzeige + + +--- + +Dieses Plugin wurde basierend auf dem bereitgestellten PHP-Code erstellt, der die Symfony YAML-Komponente verwendet. diff --git a/assets/css/admin.css b/assets/css/admin.css new file mode 100644 index 0000000..ed09c4e --- /dev/null +++ b/assets/css/admin.css @@ -0,0 +1,149 @@ +.markdown-parser-wp-admin { + max-width: 1200px; +} + +.markdown-parser-wp-section { + margin-bottom: 30px; + background: #fff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.markdown-parser-wp-form-row { + margin-bottom: 15px; +} + +.markdown-parser-wp-form-row label { + display: block; + margin-bottom: 5px; + font-weight: 600; +} + +.markdown-parser-wp-tabs { + margin-top: 20px; +} + +.markdown-parser-wp-tab-nav { + margin-bottom: 10px; + border-bottom: 1px solid #ddd; +} + +.markdown-parser-wp-tab-button { + background: #f7f7f7; + border: 1px solid #ddd; + border-bottom: none; + padding: 8px 15px; + margin-right: 5px; + border-radius: 5px 5px 0 0; + cursor: pointer; +} + +.markdown-parser-wp-tab-button.active { + background: #fff; + border-bottom: 1px solid #fff; + margin-bottom: -1px; +} + +.markdown-parser-wp-tab-content { + display: none; + background: #fff; + padding: 15px; + border: 1px solid #ddd; + border-top: none; +} + +.markdown-parser-wp-tab-content.active { + display: block; +} + +.markdown-parser-wp-actions { + margin-bottom: 10px; +} + +pre { + background: #f7f7f7; + padding: 15px; + border: 1px solid #ddd; + overflow: auto; + max-height: 400px; +} + +.markdown-parser-wp-message { + padding: 15px; + margin: 15px 0; + border-radius: 5px; +} + +.markdown-parser-wp-message.error { + background: #f8d7da; + border: 1px solid #f5c6cb; + color: #721c24; +} + +.markdown-parser-wp-message.info { + background: #d1ecf1; + border: 1px solid #bee5eb; + color: #0c5460; +} + +.markdown-parser-wp-message.success { + background: #d4edda; + border: 1px solid #c3e6cb; + color: #155724; +} + +/* Field mapping styles */ +#field-mapping-container { + margin-bottom: 15px; +} + +.field-mapping-row { + display: flex; + margin-bottom: 10px; + padding: 10px; + background: #f9f9f9; + border: 1px solid #eee; + border-radius: 4px; +} + +.field-mapping-wp, +.field-mapping-yaml, +.field-mapping-preview, +.field-mapping-actions { + padding: 0 10px; +} + +.field-mapping-wp, +.field-mapping-yaml { + width: 30%; +} + +.field-mapping-preview { + width: 30%; +} + +.field-mapping-actions { + width: 10%; + display: flex; + align-items: flex-end; +} + +.field-mapping-row label { + display: block; + margin-bottom: 5px; + font-weight: 600; +} + +.field-preview { + padding: 6px; + background: #fff; + border: 1px solid #ddd; + min-height: 30px; + border-radius: 4px; + word-break: break-word; +} + +.remove-field-mapping { + margin-bottom: 0; +} diff --git a/assets/css/frontend.css b/assets/css/frontend.css new file mode 100644 index 0000000..8e66826 --- /dev/null +++ b/assets/css/frontend.css @@ -0,0 +1,37 @@ +/* Frontend styles for Markdown Parser WP */ +.markdown-parser-output { + margin: 20px 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +} + +.markdown-parser-output h3 { + font-size: 1.3em; + margin-bottom: 10px; + padding-bottom: 5px; + border-bottom: 1px solid #eee; +} + +.markdown-parser-json pre { + background: #f5f5f5; + padding: 15px; + border: 1px solid #ddd; + border-radius: 3px; + overflow: auto; + max-height: 400px; + font-family: monospace; + white-space: pre-wrap; + font-size: 13px; + line-height: 1.5; +} + +.markdown-parser-content { + margin-top: 20px; +} + +.markdown-parser-error { + color: #d63638; + padding: 10px; + background-color: #ffebe8; + border: 1px solid #c00; + border-radius: 3px; +} diff --git a/assets/js/admin.js b/assets/js/admin.js new file mode 100644 index 0000000..9a7739b --- /dev/null +++ b/assets/js/admin.js @@ -0,0 +1,372 @@ +jQuery(document).ready(function($) { + // Variables to store parsed data + let parsedData = null; + let yamlFields = []; + + // Parse Markdown URL + $('#parse-markdown-url').on('click', function() { + const url = $('#markdown-url').val(); + + if (!url) { + showMessage('error', markdownParserWp.i18n.parseError + ': ' + 'URL ist leer'); + return; + } + + // Show loading message + showMessage('info', markdownParserWp.i18n.loading); + + // Send AJAX request + $.ajax({ + url: markdownParserWp.ajaxUrl, + type: 'POST', + data: { + action: 'parse_markdown_url', + nonce: markdownParserWp.nonce, + url: url + }, + success: function(response) { + if (response.success) { + // Hide message + hideMessage(); + + // Store parsed data + parsedData = response.data; + + // Display JSON and Markdown content + $('#json-content').text(parsedData.json); + $('#markdown-content').text(parsedData.markdown); + + // Show results and create post sections + $('#markdown-parser-wp-results').show(); + $('#markdown-parser-wp-create-post').show(); + + // Extract YAML fields for field mapping + extractYamlFields(parsedData.metadata); + populateYamlFieldSelects(); + + // Set default field mappings + setDefaultFieldMappings(); + + // Update field previews + updateAllFieldPreviews(); + } else { + showMessage('error', markdownParserWp.i18n.parseError + ': ' + response.data.message); + } + }, + error: function() { + showMessage('error', markdownParserWp.i18n.parseError); + } + }); + }); + + // Extract YAML fields recursively + function extractYamlFields(obj, prefix = '') { + for (const key in obj) { + if (obj.hasOwnProperty(key)) { + const value = obj[key]; + const fieldPath = prefix ? prefix + '.' + key : key; + + if (typeof value === 'object' && value !== null && !Array.isArray(value)) { + // Recurse into nested objects + extractYamlFields(value, fieldPath); + } else { + // Add field path to list + yamlFields.push(fieldPath); + } + } + } + } + + // Populate YAML field selects + function populateYamlFieldSelects() { + $('.yaml-field-select').each(function() { + const select = $(this); + select.empty(); + + // Add empty option + select.append($('