From d4028d750a11e0073df17b3a163bb70a1f876020 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Mon, 26 May 2025 13:45:27 +0200
Subject: [PATCH] Fix project and experiment placeholder color and wording
 [SCI-11921]

---
 app/javascript/vue/shared/datatable/modals/description.vue   | 1 +
 .../vue/shared/datatable/renderers/description.vue           | 2 +-
 app/javascript/vue/shared/tinymce_editor.vue                 | 5 +++++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/javascript/vue/shared/datatable/modals/description.vue b/app/javascript/vue/shared/datatable/modals/description.vue
index 3ac49caed..7829b9f40 100644
--- a/app/javascript/vue/shared/datatable/modals/description.vue
+++ b/app/javascript/vue/shared/datatable/modals/description.vue
@@ -14,6 +14,7 @@
           <div v-if="editMode">
             <TinymceEditor
               v-model="description"
+              :placeholder="i18n.t('projects.index.add_description')"
               textareaId="descriptionModelInput"
             ></TinymceEditor>
           </div>
diff --git a/app/javascript/vue/shared/datatable/renderers/description.vue b/app/javascript/vue/shared/datatable/renderers/description.vue
index 5d61aed09..1ac1baea2 100644
--- a/app/javascript/vue/shared/datatable/renderers/description.vue
+++ b/app/javascript/vue/shared/datatable/renderers/description.vue
@@ -3,7 +3,7 @@
     <template v-if="params.dtComponent.currentViewRender === 'table'">
     <div class="group relative flex items-center group-hover:marker text-xs h-full w-full leading-[unset]">
       <div ref="descripitonBox" class="flex gap-2 w-full items-center text-sm leading-[unset]">
-        <span v-if="removeTags(params.data.description).length > 0" class="cursor-pointer line-clamp-1 leading-[unset]"
+        <span v-if="params.data.description && removeTags(params.data.description).length > 0" class="cursor-pointer line-clamp-1 leading-[unset]"
               @click.stop="showDescriptionModal">
           {{ removeTags(params.data.description) }}
         </span>
diff --git a/app/javascript/vue/shared/tinymce_editor.vue b/app/javascript/vue/shared/tinymce_editor.vue
index 8d4bd7b4a..d8eb3a00b 100644
--- a/app/javascript/vue/shared/tinymce_editor.vue
+++ b/app/javascript/vue/shared/tinymce_editor.vue
@@ -199,6 +199,7 @@ export default {
     initCssOverrides(editor) {
       const editorIframe = $(`#${editor.id}`).next().find('.tox-edit-area iframe');
       const primaryColor = '#104da9';
+      const placeholderColor = '#98A2B3';
       editorIframe.contents().find('head').append(`<style type="text/css">
           img::-moz-selection{background:0 0}
           img::selection{background:0 0}
@@ -209,6 +210,10 @@ export default {
           .mce-content-body div#mceResizeHandlene{border-right: 2px solid ${primaryColor}; border-top: 2px solid ${primaryColor}}
           .mce-content-body div#mceResizeHandlesw{border-left: 2px solid ${primaryColor}; border-bottom: 2px solid ${primaryColor}}
           .mce-content-body div#mceResizeHandlese{border-right: 2px solid ${primaryColor}; border-bottom: 2px solid ${primaryColor}}
+          .mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
+            color: ${placeholderColor};
+            opacity: 0.7;
+          }
           h1 {font-size: 24px !important }
           h2 {font-size: 18px !important }
           h3 {font-size: 16px !important }