Use CKEDITOR 5 for all comment fields.

assets/ckeditor/markdown_full.js

@@ -60,6 +60,7 @@ import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js';
 import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline.js';
 import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount.js';
 import EditorWatchdog from '@ckeditor/ckeditor5-watchdog/src/editorwatchdog.js';
+import TodoList from '@ckeditor/ckeditor5-list/src/todolist';
 
 import ExtendedMarkdown from "./plugins/extendedMarkdown.js";
 
@@ -67,7 +68,6 @@ class Editor extends ClassicEditor {}
 
 // Plugins to include in the build.
 Editor.builtinPlugins = [
-    Alignment,
     Autoformat,
     Base64UploadAdapter,
     BlockQuote,
@@ -78,14 +78,11 @@ Editor.builtinPlugins = [
     FindAndReplace,
     FontBackgroundColor,
     FontColor,
-    FontFamily,
     FontSize,
     GeneralHtmlSupport,
     Heading,
     Highlight,
     HorizontalLine,
-    HtmlComment,
-    HtmlEmbed,
     Image,
     ImageResize,
     ImageStyle,
@@ -97,7 +94,6 @@ Editor.builtinPlugins = [
     Link,
     LinkImage,
     List,
-    ListProperties,
     //MediaEmbed,
     //MediaEmbedToolbar,
     Paragraph,
@@ -115,13 +111,10 @@ Editor.builtinPlugins = [
     Subscript,
     Superscript,
     Table,
-    TableCaption,
-    TableCellProperties,
-    TableColumnResize,
     TableProperties,
     TableToolbar,
     Underline,
-    WordCount,
+    TodoList,
     ExtendedMarkdown
 ];
 
@@ -130,7 +123,6 @@ Editor.defaultConfig = {
     toolbar: {
         items: [
             'heading',
-            'alignment',
             '|',
             'bold',
             'italic',
@@ -145,7 +137,6 @@ Editor.defaultConfig = {
             'fontColor',
             'fontSize',
             '|',
-            'fontFamily',
             'link',
             'bulletedList',
             'numberedList',
@@ -161,7 +152,7 @@ Editor.defaultConfig = {
             //'mediaEmbed',
             'code',
             'codeBlock',
-            'htmlEmbed',
+            'todoList',
             '|',
             'undo',
             'redo',
@@ -187,6 +178,12 @@ Editor.defaultConfig = {
             'tableCellProperties',
             'tableProperties'
         ]
+    },
+    list: {
+        properties: {
+            styles: false,
+
+        }
     }
 };
 

assets/ckeditor/plugins/extendedMarkdown.js

@@ -5,6 +5,25 @@ const ALLOWED_TAGS = [
 	//Common elements
 	'sup',
 	'sub',
+	'u',
+	'kbd',
+	'mark',
+	'ins',
+	'small',
+	'abbr',
+	'br',
+
+	//Block elements
+	'span',
+	'p',
+	'img',
+
+
+
+	//These commands are somehow ignored: TODO
+	'left',
+	'center',
+	'right',
 ];
 
 /**

assets/ckeditor/plugins/extendedMarkdownInline.js

@@ -11,6 +11,8 @@ const ALLOWED_TAGS = [
 	'ins',
 	'small',
 	'abbr',
+	'br',
+	'span',
 ];
 
 

assets/controllers/common/markdown_controller.js

@@ -4,6 +4,8 @@ import { Controller } from '@hotwired/stimulus';
 import { marked } from "marked";
 import DOMPurify from 'dompurify';
 
+import "../../css/markdown.css";
+
 export default class extends Controller {
 
     connect()
@@ -33,10 +35,15 @@ export default class extends Controller {
             a.setAttribute('rel', 'noopener');
         }
 
-        //Apply bootstrap styles to
+        //Apply bootstrap styles to tables
         for(let table of this.element.querySelectorAll('table')) {
             table.classList.add('table', 'table-hover', 'table-striped', 'table-bordered', 'table-sm');
         }
+
+        //Make header line dark
+        for(let head of this.element.querySelectorAll('thead')) {
+            head.classList.add('table-dark');
+        }
     }
 
     /**

assets/controllers/elements/ckeditor_controller.js

@@ -2,7 +2,7 @@ import {Controller} from "@hotwired/stimulus";
 
 import { default as FullEditor } from "../../ckeditor/markdown_full";
 import { default as SingleLineEditor} from "../../ckeditor/markdown_single_line";
-import { default as HTMLEditor } from "../../ckeditor/html_full";
+import { default as HTMLLabelEditor } from "../../ckeditor/html_label";
 
 import EditorWatchdog from '@ckeditor/ckeditor5-watchdog/src/editorwatchdog';
 
@@ -11,21 +11,22 @@ import EditorWatchdog from '@ckeditor/ckeditor5-watchdog/src/editorwatchdog';
 export default class extends Controller {
     connect() {
         const mode = this.element.dataset.mode;
-        const output_format = this.element.dataset.outputFormat;
 
         let EDITOR_TYPE = "Invalid";
 
-        if(output_format == 'markdown') {
+        switch (mode) {
-            if(mode == 'full') {
+            case "markdown-full":
                 EDITOR_TYPE = FullEditor['Editor'];
-            } else if(mode == 'single_line') {
+                break;
+            case "markdown-single_line":
                 EDITOR_TYPE = SingleLineEditor['Editor'];
-            }
+                break;
-        } else if(output_format == 'html') {
+            case "html-label":
-            EDITOR_TYPE = HTMLEditor['Editor'];
+                EDITOR_TYPE = HTMLLabelEditor['Editor'];
-        } else {
+                break;
-            console.error("Unknown output format: " + output-format);
+            default:
-            return;
+                console.error("Unknown mode: " + mode);
+                return;
         }
 
         const language = document.body.dataset.locale ?? "en";
@@ -34,7 +35,7 @@ export default class extends Controller {
             language: language,
         }
 
-       const watchdog = new EditorWatchdog();
+        const watchdog = new EditorWatchdog();
         watchdog.setCreator((elementOrData, editorConfig) => {
             return EDITOR_TYPE.create(elementOrData, editorConfig)
                 .then(editor => {

assets/css/app.css

@@ -797,43 +797,6 @@ div.dataTables_wrapper div.dataTables_info {
     margin: 0;
 }
 
-/***************************************************
- * Markdown styles
- ***************************************************/
-.markdown code {
-    padding: 2px 4px;
-    font-size: 90%;
-    color: #c7254e;
-    background-color: #f9f2f4;
-    border-radius: 4px;
-}
-
-.markdown pre {
-    display: block;
-    padding: 10px;
-    margin: 0 0 10px;
-    font-size: 13px;
-    line-height: 1.42857143;
-    color: #333;
-    word-break: break-all;
-    word-wrap: break-word;
-    background-color: #f5f5f5;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-}
-
-.markdown img {
-    max-width: 35%;
-    vertical-align: middle;
-}
-
-.markdown blockquote {
-    padding: 10px 10px;
-    margin: 0 0 10px;
-    font-size: 18px;
-    border-left: 5px solid #aaa;
-}
-
 .darkmode-layer {
     z-index: 2020;
 }

assets/css/markdown.css

@@ -0,0 +1,53 @@
+/**
+ * Customization for markdown output
+ */
+
+.markdown .text-tiny {
+    font-size: .7em;
+}
+
+.markdown .text-small {
+    font-size: .85em;
+}
+
+.markdown .text-big {
+    font-size: 1.4em;
+}
+
+.markdown .text-huge {
+    font-size: 1.8em;
+}
+
+.markdown code {
+    padding: 2px 4px;
+    font-size: 90%;
+    color: #c7254e;
+    background-color: #f9f2f4;
+    border-radius: 4px;
+}
+
+.markdown pre {
+    display: block;
+    padding: 10px;
+    margin: 0 0 10px;
+    font-size: 13px;
+    line-height: 1.42857143;
+    color: #333;
+    word-break: break-all;
+    word-wrap: break-word;
+    background-color: #f5f5f5;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.markdown img {
+    max-width: 35%;
+    vertical-align: middle;
+}
+
+.markdown blockquote {
+    padding: 10px 10px;
+    margin: 0 0 10px;
+    font-size: 18px;
+    border-left: 5px solid #aaa;
+}

src/Form/AdminPages/BaseEntityAdminForm.php

@@ -48,6 +48,7 @@ use App\Entity\LabelSystem\LabelProfile;
 use App\Form\AttachmentFormType;
 use App\Form\ParameterType;
 use App\Form\Type\MasterPictureAttachmentType;
+use App\Form\Type\RichTextEditorType;
 use App\Form\Type\StructuralEntityType;
 use FOS\CKEditorBundle\Form\Type\CKEditorType;
 use function get_class;
@@ -118,7 +119,7 @@ class BaseEntityAdminForm extends AbstractType
         if ($entity instanceof AbstractStructuralDBElement || $entity instanceof LabelProfile) {
             $builder->add(
                 'comment',
-                CKEditorType::class,
+                RichTextEditorType::class,
                 [
                     'required' => false,
                     'empty_data' => '',
@@ -126,7 +127,7 @@ class BaseEntityAdminForm extends AbstractType
                     'attr' => [
                         'rows' => 4,
                     ],
-                    'help' => 'bbcode.hint',
+                    'mode' => 'markdown-full',
                     'disabled' => !$this->security->isGranted($is_new ? 'create' : 'edit', $entity),
                 ]
             );

src/Form/LabelOptionsType.php

@@ -25,7 +25,6 @@ namespace App\Form;
 
 use App\Entity\LabelSystem\LabelOptions;
 use App\Form\Type\RichTextEditorType;
-use FOS\CKEditorBundle\Form\Type\CKEditorType;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
 use Symfony\Component\Form\Extension\Core\Type\NumberType;
@@ -104,7 +103,7 @@ class LabelOptionsType extends AbstractType
         $builder->add('lines', RichTextEditorType::class, [
             'label' => 'label_profile.lines.label',
             'empty_data' => '',
-            'output_format' => 'html',
+            'mode' => 'html-label',
             'attr' => [
                 'rows' => 4,
             ],

src/Form/Part/PartBaseType.php

@@ -57,7 +57,6 @@ use App\Form\Type\RichTextEditorType;
 use App\Form\Type\SIUnitType;
 use App\Form\Type\StructuralEntityType;
 use App\Form\WorkaroundCollectionType;
-use FOS\CKEditorBundle\Form\Type\CKEditorType;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
 use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
@@ -112,7 +111,7 @@ class PartBaseType extends AbstractType
                 'required' => false,
                 'empty_data' => '',
                 'label' => 'part.edit.description',
-                'mode' => 'single_line',
+                'mode' => 'markdown-single_line',
                 'attr' => [
                     'placeholder' => 'part.edit.description.placeholder',
                     'rows' => 2,
@@ -214,7 +213,7 @@ class PartBaseType extends AbstractType
             'attr' => [
                 'rows' => 4,
             ],
-
+            'mode' => 'markdown-full',
             'disabled' => !$this->security->isGranted('comment.edit', $part),
             'empty_data' => '',
         ]);

src/Form/Type/RichTextEditorType.php

@@ -14,11 +14,8 @@ class RichTextEditorType extends AbstractType
     {
         parent::configureOptions($resolver); // TODO: Change the autogenerated stub
 
-        $resolver->setDefault('mode', 'full');
+        $resolver->setDefault('mode', 'markdown-full');
-        $resolver->setAllowedValues('mode', ['full', 'single_line']);
+        $resolver->setAllowedValues('mode', ['html-label', 'markdown-single_line', 'markdown-full']);
-
-        $resolver->setDefault('output_format', 'markdown');
-        $resolver->setAllowedValues('output_format', ['markdown', 'html']);
     }
 
     public function getBlockPrefix()
@@ -38,7 +35,6 @@ class RichTextEditorType extends AbstractType
         $tmp = [];
 
         $tmp['data-mode'] = $options['mode'];
-        $tmp['data-output-format'] = $options['output_format'];
 
         //Add our data-controller element to the textarea
         $tmp['data-controller'] = 'elements--ckeditor';