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.
This commit is contained in:
Alireza Heidari
2026-02-26 16:05:59 +01:00
parent 945328b752
commit e276adb45c
@@ -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,