From 91171a2a474093493ac6bb4749cc0ee5c40a7a0d Mon Sep 17 00:00:00 2001
From: christianbeeznst <christian.fasanando@beeznest.com>
Date: Sun, 28 Jul 2024 20:10:44 -0500
Subject: [PATCH 1/2] Internal: Add CSS reset for TinyMCE editor content - refs
 BT#21876

---
 assets/css/app.scss                           |  1 +
 assets/css/editor_content.css                 | 27 ++++++++
 .../basecomponents/BaseTinyEditor.vue         | 61 +++++++++----------
 3 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/assets/css/app.scss b/assets/css/app.scss
index 892ba4f1c5c..920fd89a9ef 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -9,6 +9,7 @@
 //@import '~jquery-ui/themes/base/all.css';
 
 @import "tinymce/skins/ui/oxide/skin.css";
+@import './editor_content.css';
 
 @layer utilities {
   .border-gray-300 {
diff --git a/assets/css/editor_content.css b/assets/css/editor_content.css
index f47fecf813a..11ec54d5348 100644
--- a/assets/css/editor_content.css
+++ b/assets/css/editor_content.css
@@ -2,6 +2,33 @@
 Stylesheet for HTML blocks created with CKEditor to embed in Chamilo pages.
 */
 
+/* Reset styles */
+.tiny-content {
+    all: initial;
+    display: block;
+    width: 100%;
+}
+
+.tiny-content * {
+    all: revert;
+    box-sizing: border-box;
+}
+
+/* Specific styles for TinyMCE content */
+.tiny-content img {
+    display: block !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    width: auto !important;
+    height: auto !important;
+}
+
+.tiny-content table {
+    margin: auto !important;
+    width: auto !important;
+}
+
+
 /* Hack for show Bootstrap alerts in CKEditor' style select */
 .cke_panel_listItem a > :first-child {
     margin-bottom: 0;
diff --git a/assets/vue/components/basecomponents/BaseTinyEditor.vue b/assets/vue/components/basecomponents/BaseTinyEditor.vue
index 73acc43665e..4c3a331425f 100644
--- a/assets/vue/components/basecomponents/BaseTinyEditor.vue
+++ b/assets/vue/components/basecomponents/BaseTinyEditor.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script setup>
-import { computed, ref } from "vue"
+import { computed, ref, watch } from "vue"
 import TinyEditor from "../../components/Editor"
 import { useRoute, useRouter } from "vue-router"
 import { useCidReqStore } from "../../store/cidReq"
@@ -29,9 +29,6 @@ import { storeToRefs } from "pinia"
 import { useSecurityStore } from "../../store/securityStore"
 import FloatLabel from "primevue/floatlabel"
 
-//import contentUiCss from "css-loader!tinymce/skins/ui/oxide/content.css"
-//import contentCss from "css-loader!tinymce/skins/content/default/content.css"
-
 const modelValue = defineModel({
   type: String,
   required: true,
@@ -104,7 +101,6 @@ const toolbarTextDirection = "ltr rtl"
 const defaultEditorConfig = {
   skin: false,
   content_css: false,
-  //content_style: contentUiCss.toString() + "\n" + contentCss.toString(),
   branding: false,
   relative_urls: false,
   height: 500,
@@ -136,33 +132,30 @@ const defaultEditorConfig = {
     "visualblocks",
     "wordcount",
   ],
-  toolbar:
-    toolbarUndo +
-    " | " +
-    toolbarFormatText +
-    " | " +
-    toolbarInsertMedia +
-    " | " +
-    toolbarFontConfig +
-    " | " +
-    toolbarAlign +
-    " | " +
-    toolbarIndent +
-    " | " +
-    toolbarList +
-    " | " +
-    toolbarColor +
-    " | " +
-    toolbarPageBreak +
-    " | " +
-    toolbarSpecialSymbols +
-    " | " +
-    toolbarOther +
-    " | " +
-    toolbarCode +
-    " | " +
-    toolbarTextDirection,
+  toolbar: [
+    toolbarUndo,
+    toolbarFormatText,
+    toolbarInsertMedia,
+    toolbarFontConfig,
+    toolbarAlign,
+    toolbarIndent,
+    toolbarList,
+    toolbarColor,
+    toolbarPageBreak,
+    toolbarSpecialSymbols,
+    toolbarOther,
+    toolbarCode,
+    toolbarTextDirection
+  ].join(" | "),
   file_picker_callback: filePickerCallback,
+  content_style: ".tiny-content { font-family: Arial, sans-serif; font-size: 14px; }",
+  body_class: 'tiny-content',
+  setup: (editor) => {
+    editor.on('init', () => {
+      const body = editor.getBody();
+      body.classList.add('tiny-content');
+    });
+  }
 }
 
 if (props.fullPage) {
@@ -175,6 +168,12 @@ const editorConfig = computed(() => ({
   ...props.editorConfig,
 }))
 
+watch(modelValue, (newValue) => {
+  if (newValue && !newValue.includes('tiny-content')) {
+    modelValue.value = `<div class="tiny-content">${newValue}</div>`
+  }
+})
+
 async function filePickerCallback(callback, value, meta) {
   let url = getUrlForTinyEditor()
   if ("image" === meta.filetype) {

From a6f8faf02dde98b96438e66a35257bf0604fbe38 Mon Sep 17 00:00:00 2001
From: christianbeeznst <christian.fasanando@beeznest.com>
Date: Wed, 31 Jul 2024 12:41:21 -0500
Subject: [PATCH 2/2] Internal: Improve TinyMCE content styling for consistency
 between editor and view - refs BT#21876

---
 assets/css/editor_content.css | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/assets/css/editor_content.css b/assets/css/editor_content.css
index 11ec54d5348..f2be9a8d794 100644
--- a/assets/css/editor_content.css
+++ b/assets/css/editor_content.css
@@ -10,7 +10,6 @@ Stylesheet for HTML blocks created with CKEditor to embed in Chamilo pages.
 }
 
 .tiny-content * {
-    all: revert;
     box-sizing: border-box;
 }
 
@@ -19,15 +18,27 @@ Stylesheet for HTML blocks created with CKEditor to embed in Chamilo pages.
     display: block !important;
     margin-left: auto !important;
     margin-right: auto !important;
-    width: auto !important;
-    height: auto !important;
 }
 
 .tiny-content table {
     margin: auto !important;
-    width: auto !important;
+    border-collapse: collapse !important;
 }
 
+.tiny-content td, .tiny-content th {
+    padding: 5px !important;
+}
+
+.tiny-content a {
+    color: blue !important;
+    text-decoration: underline !important;
+}
+
+.tiny-content caption {
+    caption-side: top !important;
+    text-align: center !important;
+    font-weight: bold !important;
+}
 
 /* Hack for show Bootstrap alerts in CKEditor' style select */
 .cke_panel_listItem a > :first-child {