Merge pull request #8815 from andrej-scinote/aj_SCI_12192

[DRAFT] Add nested lists for TinyMCE fields [SCI-11979]

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;

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;
+  }
+}

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 {

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') {

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>

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',