Improved styling of the label dialog editor, so that the appearance is closer to the Label result

assets/ckeditor/html_label.js

@@ -188,6 +188,8 @@ Editor.defaultConfig = {
     'fontSize': {
         options: [
             'default',
+            6,
+            7,
             8,
             9,
             10,
@@ -222,7 +224,7 @@ Editor.defaultConfig = {
             'tableCellProperties',
             'tableProperties'
         ]
-    }
+    },
 };
 
 export default { Editor, EditorWatchdog };

assets/controllers/elements/ckeditor_controller.js

@@ -6,6 +6,7 @@ import { default as HTMLLabelEditor } from "../../ckeditor/html_label";
 
 import EditorWatchdog from '@ckeditor/ckeditor5-watchdog/src/editorwatchdog';
 
+import "../../css/ckeditor.css";
 
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {
@@ -43,6 +44,13 @@ export default class extends Controller {
                         editor.enableReadOnlyMode("readonly");
                     }
 
+                    //Apply additional styles
+                    const editor_div = editor.ui.view.element;
+                    const new_classes = this.element.dataset.ckClass;
+                    if (editor_div && new_classes) {
+                        editor_div.classList.add(...new_classes.split(","));
+                    }
+
                     console.log(editor);
                 })
                 .catch(error => {

assets/css/ckeditor.css

@@ -0,0 +1,19 @@
+/********************************************************************
+* HTML Label style override
+*********************************************************************/
+
+/** Should be the same settings, as in label_style.css */
+.ck-html-label .ck-content {
+    font-family: "DejaVu Sans Mono", monospace;
+    font-size: 12px;
+    line-height: 1.0;
+    font-size-adjust: 1.5;
+}
+
+.ck-html-label .ck-content p {
+    margin: 0;
+}
+
+.ck-html-label .ck-content hr {
+    margin: 2px;
+}

src/Form/LabelOptionsType.php

@@ -106,6 +106,7 @@ class LabelOptionsType extends AbstractType
             'mode' => 'html-label',
             'attr' => [
                 'rows' => 4,
+                'data-ck-class' => 'ck-html-label'
             ],
         ]);
 

templates/LabelSystem/labels/label_page_1d.html.twig

@@ -3,7 +3,7 @@
         {{ element.lines | raw }}
     </div>
     <div class="C39-container" style="">
-        <img class="C39" src="{{ element.barcode | data_uri(mime='image/svg+xml') }}" height="30px">
+        <img class="C39" src="{{ element.barcode | data_uri(mime='image/svg+xml') }}" height="30px"><br>
         <span class="C39-text">{{ element.barcode_content }}</span>
     </div>
 </div>

templates/LabelSystem/labels/label_style.css.twig

@@ -4,7 +4,7 @@
 
 body {
     font-family: "DejaVu Sans Mono";
-    font-size: 9pt;
+    font-size: 12px;
     line-height: 1.0;
 }
 
@@ -38,7 +38,6 @@ hr {
 
 .C39-text {
     display: block;
-    margin-top: -6px;
     font-size: 6pt;
 }