diff --git a/assets/ckeditor/html_full.js b/assets/ckeditor/html_label.js similarity index 100% rename from assets/ckeditor/html_full.js rename to assets/ckeditor/html_label.js diff --git a/assets/ckeditor/markdown_full.js b/assets/ckeditor/markdown_full.js index ca7e5620..45072644 100644 --- a/assets/ckeditor/markdown_full.js +++ b/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, + + } } }; diff --git a/assets/ckeditor/plugins/extendedMarkdown.js b/assets/ckeditor/plugins/extendedMarkdown.js index 62478f69..8ce1c9c0 100644 --- a/assets/ckeditor/plugins/extendedMarkdown.js +++ b/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', ]; /** diff --git a/assets/ckeditor/plugins/extendedMarkdownInline.js b/assets/ckeditor/plugins/extendedMarkdownInline.js index c075364b..dc8eb5e0 100644 --- a/assets/ckeditor/plugins/extendedMarkdownInline.js +++ b/assets/ckeditor/plugins/extendedMarkdownInline.js @@ -11,6 +11,8 @@ const ALLOWED_TAGS = [ 'ins', 'small', 'abbr', + 'br', + 'span', ]; diff --git a/assets/controllers/common/markdown_controller.js b/assets/controllers/common/markdown_controller.js index 1f243800..70fd4d90 100644 --- a/assets/controllers/common/markdown_controller.js +++ b/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'); + } } /** diff --git a/assets/controllers/elements/ckeditor_controller.js b/assets/controllers/elements/ckeditor_controller.js index 3f0cc6c3..87607709 100644 --- a/assets/controllers/elements/ckeditor_controller.js +++ b/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') { - if(mode == 'full') { + switch (mode) { + case "markdown-full": EDITOR_TYPE = FullEditor['Editor']; - } else if(mode == 'single_line') { + break; + case "markdown-single_line": EDITOR_TYPE = SingleLineEditor['Editor']; - } - } else if(output_format == 'html') { - EDITOR_TYPE = HTMLEditor['Editor']; - } else { - console.error("Unknown output format: " + output-format); - return; + break; + case "html-label": + EDITOR_TYPE = HTMLLabelEditor['Editor']; + break; + default: + 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 => { diff --git a/assets/css/app.css b/assets/css/app.css index cff5513c..d4a8ce0b 100644 --- a/assets/css/app.css +++ b/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; } diff --git a/assets/css/markdown.css b/assets/css/markdown.css new file mode 100644 index 00000000..ec7abc5a --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/Form/AdminPages/BaseEntityAdminForm.php b/src/Form/AdminPages/BaseEntityAdminForm.php index d66cc5c6..b97da09d 100644 --- a/src/Form/AdminPages/BaseEntityAdminForm.php +++ b/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), ] ); diff --git a/src/Form/LabelOptionsType.php b/src/Form/LabelOptionsType.php index 975ef434..3a401a12 100644 --- a/src/Form/LabelOptionsType.php +++ b/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, ], diff --git a/src/Form/Part/PartBaseType.php b/src/Form/Part/PartBaseType.php index 5999cf2d..77d382b8 100644 --- a/src/Form/Part/PartBaseType.php +++ b/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' => '', ]); diff --git a/src/Form/Type/RichTextEditorType.php b/src/Form/Type/RichTextEditorType.php index c6647b6d..4ed31aee 100644 --- a/src/Form/Type/RichTextEditorType.php +++ b/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->setAllowedValues('mode', ['full', 'single_line']); - - $resolver->setDefault('output_format', 'markdown'); - $resolver->setAllowedValues('output_format', ['markdown', 'html']); + $resolver->setDefault('mode', 'markdown-full'); + $resolver->setAllowedValues('mode', ['html-label', 'markdown-single_line', 'markdown-full']); } 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';