From e276adb45ccd7c0069883d47a60b01d64d424eee Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 26 Feb 2026 16:05:59 +0100
Subject: [PATCH] Refactor LibraryEditField component to use BFormTextarea and
 improve text handling

- Updated the textarea component to use BFormTextarea for consistency.
- Added spacing and formatting adjustments for better readability.
- Enhanced the toggle functionality for expanded text display.
---
 .../components/Libraries/LibraryEditField.vue    | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Libraries/LibraryEditField.vue b/client/src/components/Libraries/LibraryEditField.vue
index 019593a2006..b81a106d617 100644
--- a/client/src/components/Libraries/LibraryEditField.vue
+++ b/client/src/components/Libraries/LibraryEditField.vue
@@ -3,7 +3,7 @@
         <div class="text-field">
             <!-- edit mode -->
             <div v-if="isEditMode">
-                <b-form-textarea class="form-control" :value="text" rows="3" no-resize @change="updateValue" />
+                <BFormTextarea class="form-control" :value="text" rows="3" no-resize @change="updateValue" />
             </div>
             <!-- shrink long text -->
             <div v-else-if="text && text.length > maxDescriptionLength && !isExpanded">
@@ -13,6 +13,7 @@
                     :title="text"
                     v-html="linkify(sanitize(text.substring(0, maxDescriptionLength)))">
                 </span>
+
                 <!-- eslint-enable vue/no-v-html -->
                 <span :title="text">...</span>
                 <a class="more-text-btn" href="javascript:void(0)" @click="toggleDescriptionExpand">(more) </a>
@@ -21,13 +22,14 @@
             <div v-else>
                 <!-- eslint-disable-next-line vue/no-v-html -->
                 <div v-html="linkify(sanitize(text ?? ''))"></div>
+
                 <!-- hide toggle expand if text is too short -->
                 <a
                     v-if="text && text.length > maxDescriptionLength"
                     class="more-text-btn"
                     href="javascript:void(0)"
-                    @click="toggleDescriptionExpand"
-                    >(less)
+                    @click="toggleDescriptionExpand">
+                    (less)
                 </a>
             </div>
         </div>
@@ -35,16 +37,16 @@
 </template>
 
 <script>
-import BootstrapVue from "bootstrap-vue";
+import { BFormTextarea } from "bootstrap-vue";
 import purify from "dompurify";
 import linkifyHtml from "linkify-html";
-import Vue from "vue";
 
 import { MAX_DESCRIPTION_LENGTH } from "@/components/Libraries/library-utils";
 
-Vue.use(BootstrapVue);
-
 export default {
+    components: {
+        BFormTextarea,
+    },
     props: {
         text: {
             type: String,