trigger a context menu in a q-input textarea when selecting text

kimgerdes

I’m trying to obtain a context menu that is triggered on a q-input textarea as soon as a word is selected.
Here is a fiddle with the best I’ve come up with: https://jsfiddle.net/kimgerdes/r7bsqtyf/36/

  <q-input
	v-model="textmodel"
	type="textarea"
	filled
	label="Paste your text here"
	style="overflow: auto"
	@select="ttselect"
	>
		<q-menu
		v-model="cmenu"
		touch-position
		ref='menu'
		offset=[250,50] 
		>
			<q-list dense style="min-width: 100px">
			<q-item clickable v-close-popup>
			<q-item-section>Search for "{{selword}}"</q-item-section>
			</q-item>
			<q-item clickable v-close-popup>
			<q-item-section>Something else</q-item-section>
			</q-item> 
		</q-list>
	</q-menu>
</q-input>

    new Vue({
      el: '#q-app',
      data: function() {
        return {
          version: Quasar.version,
          textmodel: "Why is the selection disappearing when selecting a word? I tried all kinds of event modifiers on clicks from https://vuejs.org/v2/guide/events.html#Event-Modifiers on different (click) events on the q-input but failed to get this running.",
          cmenu: true,
          selword: ''
        }
      },
      methods: {
        ttselect: function(event) {
          this.selword = event.srcElement.value.substring(event.srcElement.selectionStart, event.srcElement.selectionEnd);
    			//this.cmenu= false;
    
          this.$q.notify('This text was selected:'  + this.selword)
        }
      }
    })

Yet, the menu is appearing even with a simple click in the text, and the text selection is disappearing when the menu appears. I guess it’s something about the click-event propagating the unselection of the text. So I tried all kinds of event modifiers on clicks from https://vuejs.org/v2/guide/events.html#Event-Modifiers on different (click) events on the q-input but failed to get this running.

Here is what i want:

a context menu that appears if and only if some text is selected.
preferably that only happens if the selection is done by double-clicking, but it’s ok if it appears also during normal selection.
the selected text remains selected when the menu is showing.

I’d be very grateful for any hint to what I should try.

qyloxe

In the context of rich, interactive editors, I would just use this:

https://github.com/donotebase/quasar-tiptap

kimgerdes

Thanks so much, @qyloxe for your answer. I’ve tried for some time to install tiptap, it somehow works but looks weird and throws many errors the first of which is “[Vue warn]: Unknown custom element: <q-btn> - did you register the component correctly? For recursive components, make sure to provide the “name” option.”

BUT: in fact I don’t need a rich editor. On the contrary, I just want an text area with context menus that opens when text is selected. So using Tiptap may be some kind of overkill.

Do you have any idea how I could do that?

qyloxe

@kimgerdes said in trigger a context menu in a q-input textarea when selecting text:

Do you have any idea how I could do that?

Nope. Nothing easy and portable comes to mind.

Writing myself routines for proper selection handling, mixing it with dnd, ensuring that it works smoothly and doesn’t break browser behaviours, is imho big time overkill. Would rather prefer to use something ready and maintained.