From a932e4231d5746e96f964d370979e1500b844865 Mon Sep 17 00:00:00 2001
From: Andrej <andrej@scinote.net>
Date: Mon, 18 Aug 2025 14:02:13 +0200
Subject: [PATCH] Add nested lists for tinyMce fields [SCI-12192]

---
 app/assets/stylesheets/application.tailwind.css  |  1 +
 app/assets/stylesheets/tailwind/lists.css        | 14 ++++++++++++++
 app/assets/stylesheets/tiny_mce.scss             | 13 +++++++++++++
 app/javascript/packs/tiny_mce.js                 | 16 +++++++++++++++-
 .../vue/shared/datatable/modals/description.vue  |  2 +-
 app/javascript/vue/shared/tinymce_editor.vue     | 16 +++++++++++++++-
 6 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/stylesheets/tailwind/lists.css

diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index babe0439f..c8b7305fb 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -5,6 +5,7 @@
 @import "tailwind/radio";
 @import "tailwind/loader.css";
 @import "tailwind/tags.css";
+@import "tailwind/lists.css";
 
 @tailwind base;
 @tailwind components;
diff --git a/app/assets/stylesheets/tailwind/lists.css b/app/assets/stylesheets/tailwind/lists.css
new file mode 100644
index 000000000..438ffc143
--- /dev/null
+++ b/app/assets/stylesheets/tailwind/lists.css
@@ -0,0 +1,14 @@
+@layer components {
+  .numerical-nested-list ol:not([style*="list-style-type"]) {
+    counter-reset: item;
+  }
+
+  .numerical-nested-list ol:not([style*="list-style-type"]) li {
+    @apply block
+  }
+
+  .numerical-nested-list ol:not([style*="list-style-type"]) li::before {
+    content: counters(item, ".") ". ";
+    counter-increment: item;
+  }
+}
diff --git a/app/assets/stylesheets/tiny_mce.scss b/app/assets/stylesheets/tiny_mce.scss
index 3ad62f4f7..01ac2ab06 100644
--- a/app/assets/stylesheets/tiny_mce.scss
+++ b/app/assets/stylesheets/tiny_mce.scss
@@ -21,6 +21,19 @@
     margin: 0;
     padding: 0;
   }
+
+  ol:not([style*="list-style-type"]) {
+    counter-reset: item;
+  }
+
+  ol:not([style*="list-style-type"]) li {
+    display: block;
+  }
+
+  ol:not([style*="list-style-type"]) li:before {
+    content: counters(item, ".") ". ";
+    counter-increment: item;
+  }
 }
 
 .mce-tinymce {
diff --git a/app/javascript/packs/tiny_mce.js b/app/javascript/packs/tiny_mce.js
index cc041eb4c..8f642a582 100644
--- a/app/javascript/packs/tiny_mce.js
+++ b/app/javascript/packs/tiny_mce.js
@@ -42,7 +42,21 @@ import contentUiCss from '!!raw-loader!tinymce/skins/ui/tinymce-5/content.min.cs
 
 const contentPStyle = `p { margin: 0; padding: 0;}`;
 const contentBodyStyle = `body { font-family: "SN Inter", "Open Sans", Arial, Helvetica, sans-serif }`;
-const contentStyle = [contentCss, contentUiCss, contentBodyStyle, contentPStyle].map((s) => s.toString()).join('\n');
+const contentListStyle = `
+  ol:not([style*="list-style-type"]) {
+    counter-reset: item;
+  }
+
+  ol:not([style*="list-style-type"]) li {
+    display: block;
+  }
+
+  ol:not([style*="list-style-type"]) li:before {
+    content: counters(item, ".") ". ";
+    counter-increment: item;
+  }
+`;
+const contentStyle = [contentCss, contentUiCss, contentBodyStyle, contentPStyle, contentListStyle].map((s) => s.toString()).join('\n');
 
 // Optional pre-initialization method
 if (typeof(window.preTinyMceInit) === 'function') {
diff --git a/app/javascript/vue/shared/datatable/modals/description.vue b/app/javascript/vue/shared/datatable/modals/description.vue
index 736d94163..84d5e323a 100644
--- a/app/javascript/vue/shared/datatable/modals/description.vue
+++ b/app/javascript/vue/shared/datatable/modals/description.vue
@@ -18,7 +18,7 @@
               textareaId="descriptionModelInput"
             ></TinymceEditor>
           </div>
-          <span v-else v-html="description"></span>
+          <span v-else v-html="description" class="numerical-nested-list"></span>
         </div>
         <div class="modal-footer">
           <button v-if="editMode" type="button" @click="cancelEdit" class="btn btn-secondary">{{ i18n.t('general.cancel') }}</button>
diff --git a/app/javascript/vue/shared/tinymce_editor.vue b/app/javascript/vue/shared/tinymce_editor.vue
index dc775622b..d391d86e4 100644
--- a/app/javascript/vue/shared/tinymce_editor.vue
+++ b/app/javascript/vue/shared/tinymce_editor.vue
@@ -48,7 +48,21 @@ import contentUiCss from '!!raw-loader!tinymce/skins/ui/tinymce-5/content.min.cs
 
 const contentPStyle = 'p { margin: 0; padding: 0;}';
 const contentBodyStyle = 'body { font-family: "SN Inter", "Open Sans", Arial, Helvetica, sans-serif }';
-const contentStyle = [contentCss, contentUiCss, contentBodyStyle, contentPStyle].map((s) => s.toString()).join('\n');
+const contentListStyle = `
+  ol:not([style*="list-style-type"]) {
+    counter-reset: item;
+  }
+
+  ol:not([style*="list-style-type"]) li {
+    display: block;
+  }
+
+  ol:not([style*="list-style-type"]) li:before {
+    content: counters(item, ".") ". ";
+    counter-increment: item;
+  }
+`;
+const contentStyle = [contentCss, contentUiCss, contentBodyStyle, contentPStyle, contentListStyle].map((s) => s.toString()).join('\n');
 
 export default {
   name: 'TinemcyEditor',