<commit_before><template>
    <FieldLayout class="ShowTextField" :label="label">
        <div class="ShowTextField__content" v-html="currentContent" ref="content"></div>
        <template v-if="hasCollapsed">
            <div class="mt-2">
                <a href="#" class="ShowTextField__more" @click.prevent="handleToggleClicked">
                    <template v-if="expanded">
                        - {{ l('show.text.show_less') }}
                    </template>
                    <template v-else>
                        + {{ l('show.text.show_more') }}
                    </template>
                </a>
            </div>
        </template>
    </FieldLayout>
</template>

<script>
    import { Localization } from 'sharp/mixins';
    import clip from 'text-clipper';
    import { syncVisibility } from "../../util/fields/visiblity";
    import { truncateToWords, stripTags } from "../../util/fields/text";
    import FieldLayout from "../FieldLayout";

    export default {
        mixins: [Localization],
        components: {
            FieldLayout,
        },
        props: {
            value: String,
            collapseToWordCount: Number,
            label: String,
            emptyVisible: Boolean,
        },
        data() {
            return {
                expanded: false,
            }
        },
        computed: {
            currentContent() {
                if(this.hasCollapsed && !this.expanded) {
                    return this.collapsedContent;
                }
                return this.value;
            },
            hasCollapsed() {
                return !!this.collapsedContent;
            },
            collapsedContent() {
                if(!this.collapseToWordCount || !this.value) {
                    return null;
                }
                const html = this.value.trim();
                const text = stripTags(html);
                const truncated = truncateToWords(text, this.collapseToWordCount);
                return truncated.length < text.length
                    ? clip(html, truncated.length + 2, { html: true })
                    : null;
            },
            isVisible() {
                return !!this.value || this.emptyVisible;
            },
        },
        methods: {
            handleToggleClicked() {
                this.expanded = !this.expanded;
            },
        },
        created() {
            syncVisibility(this, () => this.isVisible);
        },
    }
</script>
<commit_msg>Handle html attribute in show text<commit_after><template>
    <FieldLayout class="ShowTextField" :label="label">
        <div class="ShowTextField__content">
            <template v-if="html">
                <div v-html="currentContent"></div>
            </template>
            <template v-else>
                {{ currentContent }}
            </template>
        </div>

        <template v-if="hasCollapsed">
            <div class="mt-2">
                <a href="#" class="ShowTextField__more" @click.prevent="handleToggleClicked">
                    <template v-if="expanded">
                        - {{ l('show.text.show_less') }}
                    </template>
                    <template v-else>
                        + {{ l('show.text.show_more') }}
                    </template>
                </a>
            </div>
        </template>
    </FieldLayout>
</template>

<script>
    import { Localization } from 'sharp/mixins';
    import clip from 'text-clipper';
    import { syncVisibility } from "../../util/fields/visiblity";
    import { truncateToWords, stripTags } from "../../util/fields/text";
    import FieldLayout from "../FieldLayout";

    export default {
        mixins: [Localization],
        components: {
            FieldLayout,
        },
        props: {
            value: String,
            collapseToWordCount: Number,
            label: String,
            emptyVisible: Boolean,
            html: Boolean,
        },
        data() {
            return {
                expanded: false,
            }
        },
        computed: {
            currentContent() {
                if(this.hasCollapsed && !this.expanded) {
                    return this.collapsedContent;
                }
                return this.value;
            },
            hasCollapsed() {
                return !!this.collapsedContent;
            },
            collapsedContent() {
                if(!this.collapseToWordCount || !this.value) {
                    return null;
                }
                const html = this.value.trim();
                const text = stripTags(html);
                const truncated = truncateToWords(text, this.collapseToWordCount);
                return truncated.length < text.length
                    ? clip(html, truncated.length + 2, { html: this.html })
                    : null;
            },
            isVisible() {
                return !!this.value || this.emptyVisible;
            },
        },
        methods: {
            handleToggleClicked() {
                this.expanded = !this.expanded;
            },
        },
        created() {
            syncVisibility(this, () => this.isVisible);
        },
    }
</script>

{'fraction_non_alphanumeric': 0.12129328486703654, 'fraction_numerical': 0.0007652573177731012, 'mean_word_length': 1.274032187907786, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1359757', 'n_tokens_mistral': 1332, 'n_tokens_neox': 1272, 'n_words': 249}