Less intrusive sharp popup (reference suggestion/autocomplete)

CHANGELOG.md

@@ -5,6 +5,8 @@
   [#1097](https://github.com/nextcloud/cookbook/pull/1097) @christianlupus
 - Ordering corrected for mobile and printout versions
   [#1107](https://github.com/nextcloud/cookbook/pull/1107) @christianlupus
+- Less intrusive sharp popup (suggestion menu for reference autocomplete)
+  [#1098](https://github.com/nextcloud/cookbook/pull/1098) @MarcelRobitaille
 
 ### Fixed
 - Prevent slow loading of recipes due to iteration over all files

package.json

@@ -33,6 +33,7 @@
     "@nextcloud/moment": "^1.1.1",
     "@nextcloud/router": "^2.0.0",
     "@nextcloud/vue": "^5.1.0",
+    "caret-pos": "2.0.0",
     "linkifyjs": "^3.0.1",
     "lozad": "^1.16.0",
     "sass": "^1.5.0",

src/components/EditInputField.vue

@@ -1,5 +1,5 @@
 <template>
-    <fieldset @keyup="keyPressed">
+    <fieldset>
         <label>
             {{ fieldLabel }}
         </label>
@@ -8,6 +8,11 @@
             ref="inputField"
             v-model="content"
             @input="handleInput"
+            @keydown="keyDown"
+            @keyup="handleSuggestionsPopupKeyUp"
+            @focus="handleSuggestionsPopupFocus"
+            @blur="handleSuggestionsPopupBlur"
+            @mouseup="handleSuggestionsPopupMouseUp"
         />
         <div v-else>
             <slot />
@@ -17,14 +22,31 @@
                 v-model="content"
                 :type="fieldType"
                 @input="handleInput"
+                @keydown="keyDown"
+                @keyup="handleSuggestionsPopupKeyUp"
+                @focus="handleSuggestionsPopupFocus"
+                @blur="handleSuggestionsPopupBlur"
+                @mouseup="handleSuggestionsPopupMouseUp"
             />
         </div>
+        <SuggestionsPopup
+            v-if="suggestionsPopupVisible"
+            ref="suggestionsPopup"
+            v-bind="suggestionsData"
+            :options="filteredSuggestionOptions"
+        />
     </fieldset>
 </template>
 
 <script>
+import SuggestionsPopup, { suggestionsPopupMixin } from "./SuggestionsPopup.vue"
+
 export default {
     name: "EditInputField",
+    components: {
+        SuggestionsPopup,
+    },
+    mixins: [suggestionsPopupMixin],
     props: {
         fieldLabel: {
             type: String,
@@ -34,10 +56,6 @@ export default {
             type: String,
             default: "",
         },
-        referencePopupEnabled: {
-            type: Boolean,
-            default: false,
-        },
         // Value (passed in v-model)
         // eslint-disable-next-line vue/require-prop-types
         value: {
@@ -65,55 +83,10 @@ export default {
         handleInput() {
             this.$emit("input", this.content)
         },
-        /**
-         * Catches # key down presses and opens recipe-references dialog
-         */
-        keyPressed(e) {
-            // Using keyup for trigger will prevent repeat triggering if key is held down
-            if (this.referencePopupEnabled && e.key === "#") {
-                e.preventDefault()
-                // Check if the letter before the hash
-                if (this.fieldType === "markdown") {
-                    // for reference: https://codemirror.net/doc/manual.html#api
-                    const cursorPos = JSON.parse(
-                        JSON.stringify(
-                            this.$refs.inputField.editor.getCursor("start")
-                        )
-                    )
-                    const prevChar = this.$refs.inputField.editor.getRange(
-                        { line: cursorPos.line, ch: cursorPos.ch - 2 },
-                        { line: cursorPos.line, ch: cursorPos.ch - 1 }
-                    )
-                    if (
-                        cursorPos.ch === 1 ||
-                        prevChar === " " ||
-                        prevChar === "\n" ||
-                        prevChar === "\r"
-                    ) {
-                        // beginning of line
-                        this.$parent.$emit("showRecipeReferencesPopup", {
-                            context: this,
-                        })
-                        this.lastCursorPosition = cursorPos
-                    }
-                } else {
-                    const cursorPos = this.$refs.inputField.selectionStart
-                    const content = this.$refs.inputField.value
-                    const prevChar =
-                        cursorPos > 1 ? content.charAt(cursorPos - 2) : ""
-                    if (
-                        cursorPos === 1 ||
-                        prevChar === " " ||
-                        prevChar === "\n" ||
-                        prevChar === "\r"
-                    ) {
-                        // Show dialog to select recipe
-                        this.$parent.$emit("showRecipeReferencesPopup", {
-                            context: this,
-                        })
-                        this.lastCursorPosition = cursorPos
-                    }
-                }
+        keyDown(e) {
+            // Redirect to suggestions handler if in suggestion mode
+            if (this.suggestionsPopupVisible) {
+                this.handleSuggestionsPopupKeyDown(e)
             }
         },
         pasteCanceled() {

src/components/EditInputGroup.vue

@@ -19,6 +19,9 @@
                     @keyup="keyUp"
                     @input="handleInput"
                     @paste="handlePaste"
+                    @focus="handleSuggestionsPopupFocus"
+                    @blur="handleSuggestionsPopupBlur"
+                    @mouseup="handleSuggestionsPopupMouseUp"
                 />
                 <textarea
                     v-else-if="fieldType === 'textarea'"
@@ -28,6 +31,9 @@
                     @keyup="keyUp"
                     @input="handleInput"
                     @paste="handlePaste"
+                    @focus="handleSuggestionsPopupFocus"
+                    @blur="handleSuggestionsPopupBlur"
+                    @mouseup="handleSuggestionsPopupMouseUp"
                 ></textarea>
                 <div class="controls">
                     <button
@@ -51,6 +57,15 @@
                         @click="deleteEntry(idx)"
                     ></button>
                 </div>
+                <SuggestionsPopup
+                    v-if="
+                        suggestionsPopupVisible &&
+                        suggestionsData.fieldIndex === idx
+                    "
+                    ref="suggestionsPopup"
+                    v-bind="suggestionsData"
+                    :options="filteredSuggestionOptions"
+                />
             </li>
         </ul>
         <button class="button add-list-item" @click="addNewEntry()">
@@ -60,6 +75,8 @@
 </template>
 
 <script>
+import SuggestionsPopup, { suggestionsPopupMixin } from "./SuggestionsPopup.vue"
+
 const linesMatchAtPosition = (lines, i) =>
     lines.every((line) => line[i] === lines[0][i])
 const findCommonPrefix = (lines) => {
@@ -82,6 +99,10 @@ const findCommonPrefix = (lines) => {
 
 export default {
     name: "EditInputGroup",
+    components: {
+        SuggestionsPopup,
+    },
+    mixins: [suggestionsPopupMixin],
     props: {
         value: {
             type: Array,
@@ -108,10 +129,6 @@ export default {
             type: Boolean,
             default: false,
         },
-        referencePopupEnabled: {
-            type: Boolean,
-            default: false,
-        },
     },
     data() {
         return {
@@ -268,6 +285,12 @@ export default {
                 return
             }
 
+            // Redirect to suggestions handler if in suggestion mode
+            if (this.suggestionsPopupVisible) {
+                this.handleSuggestionsPopupKeyDown(e)
+                return
+            }
+
             // Allow new lines with shift key
             if (e.shiftKey) {
                 // Do nothing here, user wants a line break
@@ -318,38 +341,14 @@ export default {
                 return
             }
 
-            // Only do anything for enter or # keys
-            if (!(this.referencePopupEnabled && e.key === "#")) {
-                return
-            }
-
-            // Get the index of the pressed list item
             const $li = e.currentTarget.closest("li")
             const $ul = $li.closest("ul")
             const $pressedLiIndex = Array.prototype.indexOf.call(
                 $ul.childNodes,
                 $li
             )
-
-            // Get the position of the cursor and the content of the input
-            const elm = this.$refs["list-field"][$pressedLiIndex]
-            const cursorPos = elm.selectionStart
-            const content = elm.value
-
-            // Show the popup only if the # was inserted at the very
-            // beggining of the input or after any whitespace character
-            if (
-                !(cursorPos === 1 || /\s/.test(content.charAt(cursorPos - 2)))
-            ) {
-                return
-            }
-
-            // Show dialog to select recipe
-            this.$parent.$emit("showRecipeReferencesPopup", {
-                context: this,
-            })
             this.lastFocusedFieldIndex = $pressedLiIndex
-            this.lastCursorPosition = cursorPos
+            this.handleSuggestionsPopupKeyUp(e)
         },
         moveEntryDown(index) {
             if (index >= this.buffer.length - 1) {
@@ -421,6 +420,7 @@ button {
 }
 
 fieldset {
+    position: relative;
     width: 100%;
     margin-bottom: 1em;
 }