From 98803c23e673b9bbba13ba796aadc22fc87da1d0 Mon Sep 17 00:00:00 2001
From: aqordeon <aqordivika@yahoo.co.id>
Date: Wed, 11 Dec 2024 16:20:02 +0800
Subject: [PATCH] fix: Announcement: update editor styles, link target on text

---
 .../Components/CMS/Fields/MultiEditorInputHTML.vue   |  8 ++++----
 .../js/Components/CMS/Fields/SideEditorInputHTML.vue |  2 +-
 resources/js/Components/Editor/TiptapLinkDialog.vue  |  2 +-
 .../Forms/Fields/BubleTextEditor/EditorV2.vue        | 11 ++++++-----
 .../AnnouncementInformation2TransitionText.vue       | 12 ++++++------
 .../Templates/Promo/AnnouncementPromo1.vue           | 12 +++++++-----
 6 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/resources/js/Components/CMS/Fields/MultiEditorInputHTML.vue b/resources/js/Components/CMS/Fields/MultiEditorInputHTML.vue
index eb08a3397..30fb64241 100644
--- a/resources/js/Components/CMS/Fields/MultiEditorInputHTML.vue
+++ b/resources/js/Components/CMS/Fields/MultiEditorInputHTML.vue
@@ -136,18 +136,18 @@ const transitionList = [
         </div>
 
         <div class="mt-6 text-sm text-gray-500 mb-2">{{ trans('Text list') }}</div>
-        <div class="grid gap-y-4">
-            <div v-for="(text, idxText) in model?.multi_text" :key="'texteditor_' + idxText + model?.multi_text?.length" class="flex items-center gap-x-1">
+        <div class="flex flex-col gap-y-4 ">
+            <div v-for="(text, idxText) in model?.multi_text" :key="'texteditor_' + idxText + model?.multi_text?.length" class="flex items-center gap-x-1 w-full">
                 <Editor2 :modelValue="text" @update:modelValue="(e) => set(model, ['multi_text', idxText], e)" v-bind="$attrs">
                     <template #editor-content="{ editor }">
                         <div
-                            class="editor-wrapper border-2 border-gray-300 rounded px-3 py-2 shadow-sm focus-within:border-blue-400">
+                            class="bg-gray-200 editor-wrapper border-2 border-gray-300 rounded px-3 py-2 shadow-sm focus-within:border-blue-400">
                             <EditorContent :editor="editor" class="editor-content focus:outline-none" />
                         </div>
                     </template>
                 </Editor2>
 
-           <div @click="(event)=>togglePopover(event,idxText)" class="px-1 py-1 text-red-400 hover:text-white cursor-pointer border border-transparent hover:bg-red-500 rounded">
+                <div @click="(event)=>togglePopover(event,idxText)" class="px-1 py-1 text-red-400 hover:text-white cursor-pointer border border-transparent hover:bg-red-500 rounded">
                     <FontAwesomeIcon icon='fal fa-trash-alt' class='' fixed-width aria-hidden='true' />
                 </div>
             </div>
diff --git a/resources/js/Components/CMS/Fields/SideEditorInputHTML.vue b/resources/js/Components/CMS/Fields/SideEditorInputHTML.vue
index d977bdb0f..202155b62 100644
--- a/resources/js/Components/CMS/Fields/SideEditorInputHTML.vue
+++ b/resources/js/Components/CMS/Fields/SideEditorInputHTML.vue
@@ -22,7 +22,7 @@ defineOptions({
       v-bind="$attrs"
     >
       <template #editor-content="{ editor }">
-        <div class="editor-wrapper border-2 border-gray-300 rounded-lg px-3 py-2 shadow-sm focus-within:border-blue-400">
+        <div class="bg-gray-200 editor-wrapper border-2 border-gray-300 rounded-lg px-3 py-2 shadow-sm focus-within:border-blue-400">
           <EditorContent :editor="editor" class="editor-content focus:outline-none" />
         </div>
       </template>
diff --git a/resources/js/Components/Editor/TiptapLinkDialog.vue b/resources/js/Components/Editor/TiptapLinkDialog.vue
index 88783b771..7c9a7aae9 100644
--- a/resources/js/Components/Editor/TiptapLinkDialog.vue
+++ b/resources/js/Components/Editor/TiptapLinkDialog.vue
@@ -47,7 +47,7 @@ onMounted(() => {
       <div class="flex flex-col space-y-5">
         <div>
           <div class="select-none text-sm text-gray-600 mb-2">Link</div>
-          <PureInput type="url" id="input-link-url" v-model="inputLinkRef" />
+          <PureInput type="url" id="input-link-url" v-model="inputLinkRef" placeholder="https://wowsbar.com" />
         </div>
         <div>
           <div class="select-none text-sm text-gray-600 mb-2">Target</div>
diff --git a/resources/js/Components/Forms/Fields/BubleTextEditor/EditorV2.vue b/resources/js/Components/Forms/Fields/BubleTextEditor/EditorV2.vue
index 6b8603142..7a63b7d69 100644
--- a/resources/js/Components/Forms/Fields/BubleTextEditor/EditorV2.vue
+++ b/resources/js/Components/Forms/Fields/BubleTextEditor/EditorV2.vue
@@ -414,14 +414,15 @@ const irisVariablesList = [
                         </TiptapToolbarButton> -->
 
                         <TiptapToolbarButton v-if="toogle.includes('color')" label="Text Color">
-                            <div class="relative w-7 h-7">
+                            <div class="relative w-8 h-8 ">
                                 <!-- Color Input -->
                                 <input type="color" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                                     @input="editorInstance?.chain().focus().setColor($event.target.value).run()"
-                                    :value="editorInstance.getAttributes('textStyle').color" />
+                                    :value="editorInstance.getAttributes('textStyle').color"
+                                />
                                 <!-- Icon -->
-                                <div class="flex items-center justify-center w-full h-full rounded"
-                                :style="{ color: editorInstance.getAttributes('textStyle').color || 'gray'}"
+                                <div class="flex items-center justify-center w-full h-full border border-gray-200 shadow rounded"
+                                    :style="{ color: editorInstance.getAttributes('textStyle').color || 'gray'}"
                                 > 
                                     <FontAwesomeIcon :icon="faTint" />
                                 </div>
@@ -435,7 +436,7 @@ const irisVariablesList = [
                                     @input="editorInstance.chain().focus().setHighlight({ color: $event.target.value }).run()"
                                     :value="editorInstance.getAttributes('highlight').color" />
                                 <!-- Icon -->
-                                <div class="flex items-center justify-center w-full h-full shadow rounded"
+                                <div class="flex items-center justify-center w-full h-full border border-gray-200 shadow rounded"
                                     :style="{ backgroundColor: editorInstance?.getAttributes('highlight').color}"
                                 > 
                                     <FontAwesomeIcon :icon="faPaintBrushAlt" />
diff --git a/resources/js/Components/Workshop/Announcement/Templates/Information/AnnouncementInformation2TransitionText.vue b/resources/js/Components/Workshop/Announcement/Templates/Information/AnnouncementInformation2TransitionText.vue
index eac3a01a0..511c4c535 100644
--- a/resources/js/Components/Workshop/Announcement/Templates/Information/AnnouncementInformation2TransitionText.vue
+++ b/resources/js/Components/Workshop/Announcement/Templates/Information/AnnouncementInformation2TransitionText.vue
@@ -24,12 +24,12 @@ const props = defineProps<{
                 duration: number
                 multi_text: string[]
             }
-            button_1: {
-                text: string
-                container: {
-                    properties: BlockProperties
-                }
-            }
+            // button_1: {
+            //     text: string
+            //     container: {
+            //         properties: BlockProperties
+            //     }
+            // }
             countdown: {
                 date: string
                 expired_text?: string
diff --git a/resources/js/Components/Workshop/Announcement/Templates/Promo/AnnouncementPromo1.vue b/resources/js/Components/Workshop/Announcement/Templates/Promo/AnnouncementPromo1.vue
index ea01776e4..413f7f58e 100644
--- a/resources/js/Components/Workshop/Announcement/Templates/Promo/AnnouncementPromo1.vue
+++ b/resources/js/Components/Workshop/Announcement/Templates/Promo/AnnouncementPromo1.vue
@@ -214,11 +214,12 @@ const defaultFieldsData = {
     "button_1": {
         "link": {
             "type" : "internal",
-            "url": "https://ancientwisdom.biz/showroom",
+            "href": "https://wowsbar.com",
             "id": 9,
-            "workshop_route" : ""
+            "workshop_route" : "",
+            "target": "_blank"
         },
-        "text": '<span style="font-size: 10px"><strong>Claim Now!</strong></span>',
+        "text": 'Claim Now!',
         "container": {
             "properties": {
                 "text": {
@@ -386,7 +387,7 @@ defineExpose({
     
             </div>
 
-            <button
+            <a
                 v-if="announcementData?.fields?.button_1?.text"
                 @click="() => (onClickClose(), onClickOpenFieldWorkshop(2))"
                 :href="announcementData?.fields.button_1.link.href || '#'"
@@ -395,8 +396,9 @@ defineExpose({
                 class="inline-flex items-center announcement-component-editable"
                 :style="propertiesToHTMLStyle(announcementData?.fields.button_1?.container?.properties)"
             >
-            </button>
+            </a>
         </div>
+        <pre>{{ announcementData?.fields?.button_1 }}</pre>
 
         <!-- <pre>{{defaultFieldsData?.button_1?.container?.properties}}</pre> -->