From cfc18f8b41947ebbd521b37a7eb19fac5552cbac Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Fri, 21 Mar 2025 13:17:37 +0100
Subject: [PATCH] Add smart annotations to form description [SCI-11645]

---
 app/javascript/vue/forms/edit_field.vue | 13 +++++++++++--
 app/javascript/vue/forms/field.vue      |  9 +++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/javascript/vue/forms/edit_field.vue b/app/javascript/vue/forms/edit_field.vue
index 830809e99..45756df91 100644
--- a/app/javascript/vue/forms/edit_field.vue
+++ b/app/javascript/vue/forms/edit_field.vue
@@ -49,7 +49,11 @@
       <div>
         <label class="sci-label">{{ i18n.t('forms.show.description_label') }}</label>
         <div class="sci-input-container-v2 h-24" :class="{ 'error': !descriptionValid }" :data-error="descriptionFieldError"  >
-          <textarea class="sci-input " v-model="editField.attributes.description" @change="updateField" :placeholder="i18n.t('forms.show.description_placeholder')" />
+          <textarea ref="description"
+                    class="sci-input"
+                    v-model="editField.attributes.description"
+                    @blur="updateField"
+                    :placeholder="i18n.t('forms.show.description_placeholder')" />
         </div>
       </div>
       <component :is="this.editField.attributes.type" :field="editField" @updateField="updateField()" @syncField="syncField" />
@@ -73,7 +77,7 @@
 
 <script>
 
-/* global GLOBAL_CONSTANTS */
+/* global GLOBAL_CONSTANTS SmartAnnotation */
 
 import GeneralDropdown from '../shared/general_dropdown.vue';
 import DatetimeField from './edit_fields/datetime.vue';
@@ -110,6 +114,9 @@ export default {
       this.editField.attributes.description = '';
     }
   },
+  mounted() {
+    SmartAnnotation.init($(this.$refs.description), false);
+  },
   computed: {
     validField() {
       return this.nameValid && this.descriptionValid;
@@ -144,6 +151,8 @@ export default {
       if (!this.validField) {
         return;
       }
+      this.editField.attributes.description = this.$refs.description.value; // SmartAnnotation does not update the model
+
       this.$emit('update', this.editField);
     },
     deleteField() {
diff --git a/app/javascript/vue/forms/field.vue b/app/javascript/vue/forms/field.vue
index 9e20d64f1..475a0e782 100644
--- a/app/javascript/vue/forms/field.vue
+++ b/app/javascript/vue/forms/field.vue
@@ -6,8 +6,8 @@
       <span v-if="unit">({{ unit }})</span>
       <span v-if="field.attributes.required" class="text-sn-delete-red">*</span>
     </div>
-    <div v-if="field.attributes.description">
-      {{ field.attributes.description }}
+    <div ref="description" v-if="field.attributes.description">
+      <span>{{ field.attributes.description }}</span>
     </div>
     <div class="mt-2">
       <component :is="field.attributes.data.type" ref="formField" :disabled="disabled"
@@ -80,6 +80,11 @@ export default {
   },
   mounted() {
     this.checkValidField();
+    if (this.$refs.description) {
+      this.$nextTick(() => {
+        window.renderElementSmartAnnotations(this.$refs.description, 'span');
+      });
+    }
   },
   computed: {
     unit() {