It's Winter. Replace summernote with trix (applied in task/form)

assets/app.js

@@ -1,19 +1,32 @@
 import './bootstrap.js';
+import "trix";
+import './scripts/tailmater.js';
+import './scripts/datatables.js';
+
+import 'trix/dist/trix.css';
 import './styles/materialDesignIcons.css';
 import './styles/tailmater.css';
 import './styles/colors.css';
 import './styles/dataTablesTailwind.css';
 import './styles/dataTablesApp.css';
 import './styles/app.css';
-import './scripts/tailmater.js';
-import './scripts/datatables.js';
 
 import $ from 'jquery';
 global.$ = global.jQuery = $;
 import {initFreeFields} from "./scripts/freeField";
 
 document.getElementById('snackbar-trigger')?.click();
 
+(function() {
+    addEventListener("trix-initialize", function(e) {
+        const file_tools = document.querySelector(".trix-button-group--file-tools");
+        file_tools?.remove();
+    })
+    addEventListener("trix-file-accept", function(e) {
+        e.preventDefault();
+    })
+})();
+
 $(document).ready(function() {
     initFreeFields();
 });

assets/styles/tailmater.css

@@ -1075,4 +1075,36 @@ ul.stacked-list > li > div:last-child {
 
 ul.dynamic-list > li {
     @apply flex pb-3 gap-x-5;
+}
+
+.trix-wrapper {
+    @apply bg-white shadow-sm rounded border border-gray-300;
+}
+
+trix-toolbar {
+    @apply border-b border-gray-300 px-2 pt-2.5;
+}
+
+trix-editor {
+    @apply border-none p-2;
+}
+
+trix-toolbar .trix-button.trix-active {
+    @apply bg-primary-100;
+}
+
+trix-toolbar .trix-button-group.trix-button-group--file-tools {
+    @apply hidden;
+}
+
+trix-editor ol, trix-editor ul {
+    margin-left: 25px;
+}
+
+trix-editor ul {
+    list-style: disc;
+}
+
+trix-editor ol {
+    list-style: decimal;
 }

package.json

@@ -23,6 +23,7 @@
     },
     "dependencies": {
         "datatables.net-dt": "^1.13.7",
-        "h2-invent-apps": "^2.2.0"
+        "h2-invent-apps": "^2.2.0",
+        "trix": "^2.0.8"
     }
 }

templates/task/__form.html.twig

@@ -1,7 +1,13 @@
 {{ form_start(form, {attr: {class: not activ ? 'disabled'}}) }}
     <fieldset>
         {{ form_row(form.title) }}
-        {{ form_row(form.task) }}
+        <div class="form-group">
+            {{ form_label(form.task) }}
+            <div class="hidden">{{ form_widget(form.task) }}</div>
+            <div class="trix-wrapper">
+                <trix-editor input="tasks_task"></trix-editor>
+            </div>
+        </div>
         {{ form_row(form.endDate) }}
         {{ form_row(form.prio) }}
         {{ form_row(form.assignedUser) }}