source: main/trunk/model-interfaces-dev/atea/macron-restoration/src/components/DirectInput.vue@ 35716

<template>
<div class="root">
    <textarea class="text-input input-area" @input="onTextInput"
        v-model="input" :placeholder="translations.get('DirectInput_InputPlaceholder')" />
    <div class="text-container">
        {{ output }}
    </div>
</div>
</template>

<style scoped lang="scss">
.root {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

.input-area {
    resize: none;
    min-height: 4em;
    overflow: hidden;
}
</style>

<script>
import { mapState } from "vuex";
import MacronRestorationModule from "../js/MacronRestorationModule"

const macroniser = new MacronRestorationModule();

export default {
    name: "DirectInput",
    data() {
        return {
            input: "",
            output: "",
            transcribeTimeout: null
        }
    },
    computed: {
        ...mapState({
            translations: state => state.translations
        })
    },
    watch: {
        input() {
            if (this.transcribeTimeout !== null) {
                clearTimeout(this.transcribeTimeout);
            }

            this.transcribeTimeout = setTimeout(this.updateMacronisedText, 1000);
        }
    },
    methods: {
        /**
         * Handles input on an element, and grows its height so that the text is always visible.
         * @param {InputEvent} event The input event.
         */
        onTextInput(event) {
            event.target.height = event.target.scrollHeight;
        },
        async updateMacronisedText() {
            const response = await macroniser.directMacronisation(this.input);
            this.output = response.fragment2;
        }
    }
}
</script>