Editor refactor, continued

assets/app.js

@@ -55,9 +55,13 @@ import './styles/05-utilities/utilities.css';
 
 console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');
 
+import Prism from 'prismjs';
+
 import 'katex/dist/katex.min.css';
 import renderMathInElement from 'katex/dist/contrib/auto-render.mjs';
 
+Prism.highlightAll();
+
 // Detect math blocks in text content while avoiding common currency patterns
 function hasRealMath(text) {
   if (!text) return false;

assets/controllers/editor/layout_controller.js

@@ -3,7 +3,7 @@ import {Controller} from '@hotwired/stimulus';
 
 export default class extends Controller {
     static targets = [
-        'modeTab', 'editPane', 'markdownPane', 'previewPane',
+        'modeTab', 'editPane', 'markdownPane', 'jsonPane', 'previewPane',
         'previewBody', 'previewTitle',
         'previewSummary', 'previewImage', 'previewImagePlaceholder', 'previewAuthor', 'previewDate',
         'markdownEditor', 'markdownTitle', 'markdownCode', 'status'
@@ -24,6 +24,23 @@ export default class extends Controller {
             imageInput.addEventListener('input', () => this.updatePreview());
             imageInput.addEventListener('change', () => this.updatePreview());
         }
+
+        // If editing an existing article, load JSON event by default
+        if (this.element.dataset.articleId && this.hasJsonPaneTarget) {
+            // Find the JSON textarea in the pane and load the event
+            const jsonTextarea = this.jsonPaneTarget.querySelector('[data-editor--json-panel-target="jsonTextarea"]');
+            if (jsonTextarea && !jsonTextarea.value.trim()) {
+                // Try to get the Nostr publish controller's JSON
+                const nostrController = this.application.getControllerForElementAndIdentifier(
+                    this.element.querySelector('[data-controller*="nostr--nostr-publish"]'),
+                    'nostr--nostr-publish'
+                );
+                if (nostrController && nostrController.hasJsonTextareaTarget) {
+                    jsonTextarea.value = nostrController.jsonTextareaTarget.value;
+                    // Optionally, trigger formatting/validation if needed
+                }
+            }
+        }
     }
 
     switchMode(event) {
@@ -37,6 +54,7 @@ export default class extends Controller {
         // Toggle panes - hide all, then show the selected one
         this.editPaneTarget.classList.toggle('is-hidden', mode !== 'edit');
         this.markdownPaneTarget.classList.toggle('is-hidden', mode !== 'markdown');
+        this.jsonPaneTarget.classList.toggle('is-hidden', mode !== 'json');
         this.previewPaneTarget.classList.toggle('is-hidden', mode !== 'preview');
 
         // Update content when switching modes
@@ -44,6 +62,8 @@ export default class extends Controller {
             this.updateMarkdown();
         } else if (mode === 'preview') {
             this.updatePreview();
+        } else if (mode === 'json') {
+            // Optionally, trigger JSON formatting/validation
         }
     }
 

importmap.php

@@ -115,4 +115,53 @@ return [
     'katex/dist/katex.min.js' => [
         'version' => '0.16.25',
     ],
+    'prism-react' => [
+        'version' => '1.0.2',
+    ],
+    'prism-redux' => [
+        'version' => '1.0.2',
+    ],
+    'react' => [
+        'version' => '15.5.4',
+    ],
+    'recompose' => [
+        'version' => '0.22.0',
+    ],
+    'object-assign' => [
+        'version' => '4.1.1',
+    ],
+    'fbjs/lib/invariant' => [
+        'version' => '0.8.12',
+    ],
+    'fbjs/lib/warning' => [
+        'version' => '0.8.12',
+    ],
+    'fbjs/lib/emptyFunction' => [
+        'version' => '0.8.12',
+    ],
+    'fbjs/lib/emptyObject' => [
+        'version' => '0.8.12',
+    ],
+    'prop-types/factory' => [
+        'version' => '15.5.7',
+    ],
+    'fbjs/lib/shallowEqual' => [
+        'version' => '0.8.8',
+    ],
+    'hoist-non-react-statics' => [
+        'version' => '1.2.0',
+    ],
+    'change-emitter' => [
+        'version' => '0.1.2',
+    ],
+    'symbol-observable' => [
+        'version' => '1.0.4',
+    ],
+    'prismjs' => [
+        'version' => '1.30.0',
+    ],
+    'prismjs/themes/prism.min.css' => [
+        'version' => '1.30.0',
+        'type' => 'css',
+    ],
 ];

templates/editor/layout.html.twig

@@ -38,7 +38,7 @@
 {% endblock %}
 
 {% block layout %}
-<main data-controller="editor--layout">
+<main data-controller="editor--layout" data-article-id="{{ article.id|default('') }}">
     <div class="editor-main">
         {# Insert the article list sidebar as the first grid column #}
         <aside class="editor-articlelist-sidebar" data-controller="editor--articlelist-panels">
@@ -151,6 +151,15 @@
                 >
                     Markdown
                 </button>
+                <button
+                    type="button"
+                    class="editor-tab"
+                    data-editor--layout-target="modeTab"
+                    data-mode="json"
+                    data-action="editor--layout#switchMode"
+                >
+                    JSON
+                </button>
                 <button
                     type="button"
                     class="editor-tab"
@@ -216,6 +225,13 @@
                     </div>
                 </div>
 
+                <div
+                    class="editor-pane editor-pane--json is-hidden"
+                    data-editor--layout-target="jsonPane"
+                >
+                    {% include 'editor/panels/_json.html.twig' %}
+                </div>
+
                 <div
                     class="editor-pane editor-pane--preview is-hidden"
                     data-editor--layout-target="previewPane"
@@ -282,15 +298,6 @@
                     Media
                 </button>
                 #}
-                <button
-                    type="button"
-                    class="editor-sidebar-tab"
-                    data-editor--panels-target="tab"
-                    data-panel="json"
-                    data-action="editor--panels#switch"
-                >
-                    Event JSON
-                </button>
             </div>
 
             <section class="editor-sidebar-panels">
@@ -319,14 +326,6 @@
                     {% include 'editor/panels/_media.html.twig' %}
                 </div>
                 #}
-
-                <div
-                    class="editor-panel is-hidden"
-                    data-editor--panels-target="panel"
-                    data-panel="json"
-                >
-                    {% include 'editor/panels/_json.html.twig' %}
-                </div>
             </section>
         </aside>
 
@@ -354,8 +353,3 @@
 
 {% block footer %}
 {% endblock %}
-
-{% block javascripts %}
-    {{ parent() }}
-    {# Removed inline script, now handled by Stimulus controller #}
-{% endblock %}

templates/editor/panels/_json.html.twig

@@ -1,9 +1,4 @@
 <div class="panel-section" data-controller="editor--json-panel">
-    <h3>Raw Nostr Event</h3>
-    <p class="panel-help">
-        View and edit the raw Nostr event JSON. Changes here will override form values when publishing.
-    </p>
-
     <div class="mb-3">
         <button
             type="button"
@@ -15,7 +10,6 @@
     </div>
 
     <div class="json-editor-container">
-        <label for="json-editor-textarea" class="visually-hidden">Raw Nostr Event JSON</label>
         <textarea
             id="json-editor-textarea"
             class="json-textarea"
@@ -24,7 +18,7 @@
             data-action="input->nostr--nostr-publish#onJsonInput input->editor--json-panel#onJsonInput"
             rows="20"
             spellcheck="false"
-        ></textarea>
+        >{{ article.raw is defined and article.raw ? article.raw|json_encode(constant('JSON_PRETTY_PRINT')) : '' }}</textarea>
         <div class="json-status" data-editor--json-panel-target="status"></div>
     </div>
 
@@ -37,4 +31,3 @@
         </small>
     </div>
 </div>
-