the embeddedItem item slot is not working with vuetify "v-textarea" or simple textarea, only works with contentEditable

[rizwanrb12345]

here is my code

<vue-at-textarea v-bind="getVueAtProps(VueAtListTypes.VARIABLES)">
                        <vue-at-textarea
                            v-bind="getVueAtProps(VueAtListTypes.SNIPPETS)"
                            @insert="eventSelectVariableOnEnter"
                        >
                            <v-textarea
                                ref="editableInputField"
                                v-model="messageToSend"
                                :placeholder="messageFieldLabel"
                                rows="1"
                                hide-details
                                auto-grow
                                autofocus
                                class="ma-0 pa-0 editor"
                                @input="messageInput"
                                @keydown.enter.exact.prevent="sendMessage"
                                @blur="hideVueAtOnBlur"
                            />
                            <template slot="embeddedItem" slot-scope="{ current }">
                                <span
                                    ><span>{{ current.value }}</span></span
                                >
                            </template>
                        </vue-at-textarea>
                        </vue-at-textarea>

[rizwanrb12345]

please add that feature or help me to get through a workaround. .thanks :)

[fritx]

@rizwanrb12345 oh yes, embeddedItem, i.e. the custom-tags feature, is just available for the contentEditable, because only textarea can only contains plain text. We can not put any customized HTML tags into a textarea.

[rizwanrb12345]

but i got a work around of this

placeValueInTextarea({ key, value }) {
            let keyLength = key.length + 2; //adding 2 (1 for trigger character(/) and 1 for space after key)
            let startPos = this.textarea.selectionStart - keyLength, //subtracting key length to replace text along with key
                endPos = this.textarea.selectionEnd,
                taValue = this.textarea.value;
            this.messageToSend =
                taValue.substring(0, startPos) +
                value +
                ' ' +
                taValue.substring(endPos, taValue.length);
            /* placing cursor at the end of selection*/
            let newStartPos = startPos + value.length + 1;
            this.$nextTick(() => {
                this.textarea.setSelectionRange(newStartPos, newStartPos);
                this.$refs.editableInputField.calculateInputHeight();
                this.setHeightTextArea();
            });
        },

[rizwanrb12345]

but still the issue is its not cross browser the textarea.selectionStart such properties not wok on I.E, we do some range functions for that. but i saw the code of your library its also using selection start and things like that so , i wraped it with that code : P

[fritx]

@rizwanrb12345 oh I can't understand your workaround. did u manage to insert some customized tags into a textarea or hacking?

btw what did u do for the selectionStart/End? it's cool I think it can also be merged to the lib inset-text: https://github.com/fritx/vue-at/pull/46

[rizwanrb12345]

its a hack and place text into textarea. for selectionStart/End as far as cross browser is concerned the implementation in https://github.com/grassator/insert-text-at-cursor/blob/master/index.js is good