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:
#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