Editor: quilljs styles and whitelist allowed formats

assets/controllers/nostr/nostr_publish_controller.js

@@ -536,5 +536,11 @@ export default class extends Controller {
     if (this.hasStatusTarget) {
       this.statusTarget.innerHTML = `<div class="alert alert-danger">${message}</div>`;
     }
+    // Clear status after 10 seconds
+    setTimeout(() => {
+      if (this.hasStatusTarget) {
+        this.statusTarget.innerHTML = '';
+      }
+    }, 10000);
   }
 }

assets/controllers/publishing/quill_controller.js

@@ -51,7 +51,7 @@ export default class extends Controller {
           '<div class="ql-tooltip-editor">',
           '<input class="ql-image-src" type="text" placeholder="Image URL" />',
           '<input class="ql-image-alt" type="text" placeholder="Alt text" />',
-          '<a class="ql-action">Insert</a>',
+          '<a class="ql-action"></a>',
           '<a class="ql-cancel">Cancel</a>',
           '</div>',
         ].join('');
@@ -126,6 +126,21 @@ export default class extends Controller {
 
     const options = {
       theme: 'snow',
+      formats: [
+        'bold',
+        'strike',
+        'italic',
+        'link',
+        'blockquote',
+        'code-block',
+        'code',
+        'header',
+        'list',
+        'image',
+        'video',
+        'imageAlt',
+        'formula'
+      ],
       modules: {
         toolbar: toolbarOptions,
       },

assets/styles/03-components/form.css

@@ -83,7 +83,6 @@ input:focus, textarea:focus, select:focus {
 
 #editor {
     margin: 0;
-    min-height: 300px;
     font-size: 120%;
 }
 

assets/styles/05-utilities/utilities.css

@@ -37,6 +37,8 @@
 .align-items-center{align-items:center!important}
 .align-items-start{align-items:flex-start!important}
 
+.flex-grow{flex-grow: 1}
+
 /* Lists */
 .list-unstyled{list-style:none;padding-left:0;margin:0}
 

assets/styles/editor-layout.css

@@ -197,9 +197,10 @@ main.editor-layout {
 
 .editor-pane--edit .ql-toolbar {
     flex-shrink: 0;
-    border-left: none;
-    border-right: none;
-    border-top: none;
+    position: sticky;
+    top: -16px;
+    background: white;
+    z-index: 100;
 }
 
 .editor-pane--edit .ql-container {
@@ -217,7 +218,6 @@ main.editor-layout {
 .editor-pane--edit #editor {
     flex: 1;
     overflow-y: auto;
-    min-height: 300px;
 }
 
 /* Preview pane */
@@ -564,10 +564,6 @@ main.editor-layout {
         overflow: visible;
     }
 
-    .editor-pane {
-        overflow: visible;
-    }
-
     .editor-sidebar {
         display: none !important;
     }

src/Form/EditorType.php

@@ -43,8 +43,9 @@ class EditorType extends AbstractType
             ->add('content_html', QuillType::class, [
                 'required' => false,
                 'mapped' => false,
-                'label' => 'HTML Content (Quill)',
-                'attr' => ['placeholder' => 'Write content', 'class' => 'form-control editor-quill-pane']
+                'label' => false,
+                'attr' => ['placeholder' => 'Write content', 'class' => 'form-control editor-quill-pane'],
+                'row_attr' => ['class' => 'd-flex flex-grow']
             ])
             ->add('image', UrlType::class, [
                 'required' => false,

templates/editor/layout.html.twig

@@ -63,7 +63,7 @@
                     data-mode="edit"
                     data-action="editor--layout#switchMode"
                 >
-                    Editor
+                    Rich Text
                 </button>
                 <button
                     type="button"
@@ -77,6 +77,7 @@
                 <button
                     type="button"
                     class="editor-tab"
+                    style="margin-left: auto"
                     data-editor--layout-target="modeTab"
                     data-mode="json"
                     data-action="editor--layout#switchMode"
@@ -96,9 +97,10 @@
 
             <div class="editor-center-content">
                 {{ form_start(form) }}
+                {# Hidden field for draft status - controlled by Save Draft / Publish buttons #}
+                {{ form_widget(form.isDraft, {'attr': {'class': 'hidden'}}) }}
                 {# Hidden fields for content delta and NMD #}
                 {{ form_widget(form.contentDelta) }}
-                {{ form_widget(form.contentNMD) }}
 
                 <div
                     class="editor-pane editor-pane--edit"
@@ -115,10 +117,7 @@
                     {# QuillJS editor container, now using content_html #}
                     {{ form_row(form.content_html, {'label': false}) }}
 
-                    {# Hidden field for draft status - controlled by Save Draft / Publish buttons #}
-                    <div style="display: none;">
-                        {{ form_widget(form.isDraft) }}
-                    </div>
+
 
                     {# Mobile action buttons at bottom #}
                     <div class="editor-mobile-actions">
@@ -147,6 +146,7 @@
                                 readonly
                             />
                         </div>
+                        {{ form_widget(form.contentNMD) }}
                         {{ form_row(form.content, {'label': false, 'attr': {'class': 'form-control editor-md-field'}}) }}
                     </div>
                 </div>