From 94108b963e6268d7426f84ac9ffde7d9302634cb Mon Sep 17 00:00:00 2001
From: Angel Fernando Quiroz Campos <angelfqc.18@gmail.com>
Date: Mon, 1 Apr 2024 12:45:39 -0500
Subject: [PATCH] Display: Disable skin and content css for TinyMCE and include
 default skin in editor component #5253

---
 assets/vue/components/Editor.js                        |  1 +
 .../vue/components/basecomponents/BaseTinyEditor.vue   | 10 +++++++---
 assets/vue/main.js                                     |  3 ---
 webpack.config.js                                      |  4 ----
 4 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/assets/vue/components/Editor.js b/assets/vue/components/Editor.js
index e2530dc131..c2d74371d1 100644
--- a/assets/vue/components/Editor.js
+++ b/assets/vue/components/Editor.js
@@ -1,5 +1,6 @@
 
 import Editor from '@tinymce/tinymce-vue'
+import "tinymce/skins/ui/oxide/skin.css"
 
 import 'tinymce/tinymce'
 import 'tinymce/icons/default'
diff --git a/assets/vue/components/basecomponents/BaseTinyEditor.vue b/assets/vue/components/basecomponents/BaseTinyEditor.vue
index f79cda5f83..abf21c5d93 100644
--- a/assets/vue/components/basecomponents/BaseTinyEditor.vue
+++ b/assets/vue/components/basecomponents/BaseTinyEditor.vue
@@ -25,13 +25,16 @@
 
 <script setup>
 import { computed, ref } from "vue"
-import TinyEditor from "@tinymce/tinymce-vue"
+import TinyEditor from "../../components/Editor"
 import { useRoute, useRouter } from "vue-router"
 import { useCidReqStore } from "../../store/cidReq"
 import { storeToRefs } from "pinia"
 import { useStore } from "vuex"
 import { TINYEDITOR_MODE_DOCUMENTS, TINYEDITOR_MODE_PERSONAL_FILES, TINYEDITOR_MODES } from "./TinyEditorOptions"
 
+//import contentUiCss from "css-loader!tinymce/skins/ui/oxide/content.css"
+//import contentCss from "css-loader!tinymce/skins/content/default/content.css"
+
 const props = defineProps({
   editorId: {
     type: String,
@@ -109,8 +112,9 @@ const toolbarCode = "code codesample"
 const toolbarTextDirection = "ltr rtl"
 
 const defaultEditorConfig = {
-  skin_url: "/build/libs/tinymce/skins/ui/oxide",
-  content_css: "/build/libs/tinymce/skins/content/default/content.css",
+  skin: false,
+  content_css: false,
+  //content_style: contentUiCss.toString() + "\n" + contentCss.toString(),
   branding: false,
   relative_urls: false,
   height: 500,
diff --git a/assets/vue/main.js b/assets/vue/main.js
index 8d182c597d..0426ad13ef 100644
--- a/assets/vue/main.js
+++ b/assets/vue/main.js
@@ -34,8 +34,6 @@ import "@mdi/font/css/materialdesignicons.css"
 
 import DashboardLayout from "./components/layout/DashboardLayout.vue"
 import EmptyLayout from "./components/layout/EmptyLayout.vue"
-// Tinymce
-import Editor from "./components/Editor"
 
 // Prime
 import PrimeVue from "primevue/config"
@@ -202,7 +200,6 @@ app.component("ColumnGroup", ColumnGroup)
 app.component("Toolbar", Toolbar)
 app.component("DashboardLayout", DashboardLayout)
 app.component("EmptyLayout", EmptyLayout)
-app.component("TinyEditor", Editor)
 
 app.config.globalProperties.axios = axios
 app.config.globalProperties.window = window
diff --git a/webpack.config.js b/webpack.config.js
index 8f477333a2..f71854b12c 100755
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -121,10 +121,6 @@ Encore.copyFiles({
   from: "./node_modules/mathjax/config",
   to: "libs/mathjax/config/[path][name].[ext]",
 })
-Encore.copyFiles({
-  from: "./node_modules/tinymce/skins",
-  to: "libs/tinymce/skins/[path][name].[ext]",
-})
 Encore.copyFiles({
   from: "node_modules/moment/locale",
   to: "libs/locale/[path][name].[ext]",