feat: focus reverse i search

Author: ndabAP

src/components/VueCommand.vue

@@ -5,6 +5,7 @@
       'vue-command': !invert,
       'vue-command--invert': invert
     }">
+    <!-- Bar -->
     <slot name="bar">
       <div
         v-if="!hideBar"
@@ -54,6 +55,7 @@
       </div>
     </slot>
 
+    <!-- History -->
     <div
       ref="vueCommandHistoryRef"
       :class="{
@@ -71,7 +73,7 @@
           'vue-command__history__entry--fullscreen': shouldBeFullscreen(index),
           'vue-command__history__entry--fullscreen--invert': invert && shouldBeFullscreen(index)
         }">
-        <!-- User given components like bash and query -->
+        <!-- Components -->
         <component
           :is="component"
           ref="vueCommandHistoryEntryComponentRefs"
@@ -315,8 +317,8 @@ const addDispatchedQuery = dispatchedQuery => {
   local.dispatchedQueries.add(dispatchedQuery)
   emits('update:dispatchedQueries', local.dispatchedQueries)
 }
-// Focuses to the last query or multiline query input if the last history entry
-// is a query input
+// Focuses to the last query, multiline query or reverse I search input if the
+// last history entry is a query input
 const autoFocus = () => {
   // Not the query needs to maintain the validation upon focus but rather the
   // terminal itself
@@ -398,9 +400,9 @@ const dispatch = async query => {
 const exit = () => {
   // TODO Does order matter?
   appendToHistory(createQuery())
-  setHistoryPosition(local.dispatchedQueries.size)
   setCursorPosition(0)
   setFullscreen(false)
+  setHistoryPosition(local.dispatchedQueries.size)
   setQuery('')
 }
 // Decreases the history position about one and sets the new query

src/components/VueCommandQuery.vue

@@ -158,7 +158,8 @@ const showHelp = inject('showHelp')
 const signals = inject('signals')
 const terminal = inject('terminal')
 
-// Indicates if the query, including multiline queries, is invalid
+// Indicates if the query, including multiline queries and reverse I search, is
+// invalid
 const isOutdated = ref(false)
 const isReverseISearch = ref(false)
 const multilineQueryRefs = ref(null)
@@ -172,6 +173,7 @@ const local = reactive({
   prompt: terminal.value.prompt,
   query: ''
 })
+// Entered with "\"
 const multilineQueries = reactive([])
 
 const isBeforeReverseISearch = computed(() => {
@@ -290,8 +292,13 @@ const autocompleteQuery = async () => {
 const cycleReverseISearch = () => {
   // TODO
 }
-// Focuses the last query or multiline query
+// Focuses the last query, multiline query or reverse I search
 const focus = () => {
+  if (isReverseISearch.value) {
+    reverseISearchRef.value.focus()
+    return
+  }
+
   if (isEmpty(multilineQueries)) {
     queryRef.value.focus()
     return
@@ -312,6 +319,18 @@ const hideReverseISearch = async () => {
 const resizeReverseISearch = () => {
   reverseISearchRef.value.style.width = `${parseInt(reverseISearch.value.length)}ch`
 }
+// Sets the last multiline query
+const setLastMultilineQuery = multilineQuery => {
+  set(multilineQueries, size(multilineQueries) - 1, multilineQuery)
+}
+// Shows and focuses the reverse I search
+const showReverseISearch = async () => {
+  isReverseISearch.value = true
+
+  // Wait for DOM
+  await nextTick()
+  reverseISearchRef.value.focus()
+}
 // Cancels the current query or multiline query and creates a new query
 const sigint = () => {
   if (isEmpty(multilineQueries)) {
@@ -329,18 +348,6 @@ const sigint = () => {
   isOutdated.value = true
   appendToHistory(createQuery())
 }
-// Sets the last multiline query
-const setLastMultilineQuery = multilineQuery => {
-  set(multilineQueries, size(multilineQueries) - 1, multilineQuery)
-}
-// Shows and focuses the reverse I search
-const showReverseISearch = async () => {
-  isReverseISearch.value = true
-
-  // Wait for DOM
-  await nextTick()
-  reverseISearchRef.value.focus()
-}
 // Deactivates this query or spawns eventually new multiline queries and finally
 // dispatches the query to execute it
 const submit = async () => {
@@ -373,43 +380,38 @@ const submit = async () => {
     .replaceAll(/(?<!\\)\\(?!\\)/g, '')
     .trim()
 
-  // Dispatch the query to the parent
+  // Dispatch the query to the terminal
   dispatch(query)
 }
 
-const unwatchMultilineQueries = watch(multilineQueries, async () => {
-  await nextTick()
+const unwatchIsOutdated = watch(isOutdated, () => {
+  // Free resources if query, multiline query or reverse I search are
+  // outdated/inactive
 
-  const lastMultilineQueryRef = last(multilineQueryRefs.value)
-  // Apply given cursor position to actual cursor position
-  setCursorPosition(lastMultilineQueryRef.selectionStart)
+  signals.off('SIGINT', sigint)
+  unwatchLocalQuery()
+  unwatchTerminalQuery()
+  unwatchTerminalCursorPosition()
+  placeholder.value = ''
+  unwatchMultilineQueries()
+  unwatchIsOutdated()
+  unwatchReverseISearch()
 })
 const unwatchLocalQuery = watch(() => local.query, async () => {
   await nextTick()
 
   // Apply given cursor position to actual cursor position
   setCursorPosition(queryRef.value.selectionStart)
 })
-const unwatchTerminalCursorPosition = watch(
-  () => terminal.value.cursorPosition,
-  async cursorPosition => {
-    await nextTick()
-
-    // Apply given cursor position to actual cursor position
-    queryRef.value.setSelectionRange(cursorPosition, cursorPosition)
-  }
-)
-const unwatchTerminalQuery = watch(
-  () => terminal.value.query,
-  async query => {
-    await nextTick()
+const unwatchMultilineQueries = watch(multilineQueries, async () => {
+  await nextTick()
 
-    // This allows to mutate the query from outside the component and not only
-    // inside a history entry
-    local.query = query
-  }
-)
+  const lastMultilineQueryRef = last(multilineQueryRefs.value)
+  // Apply given cursor position to actual cursor position
+  setCursorPosition(lastMultilineQueryRef.selectionStart)
+})
 const unwatchReverseISearch = watch(reverseISearch, () => {
+  // Search in dispatched queries
   for (const dispatchedQuery of terminal.value.dispatchedQueries) {
     if (dispatchedQuery.startsWith(reverseISearch.value)) {
       if (isEmpty(multilineQueries)) {
@@ -429,25 +431,31 @@ const unwatchReverseISearch = watch(reverseISearch, () => {
 
   reverseISearchStatus.value = 'failed reverse-i-search'
 })
-const unwatchIsOutdated = watch(isOutdated, () => {
-  // Free resources if query, multiline query or reverse I search is
-  // outdated/inactive
+const unwatchTerminalCursorPosition = watch(
+  () => terminal.value.cursorPosition,
+  async cursorPosition => {
+    await nextTick()
 
-  signals.off('SIGINT', sigint)
-  unwatchLocalQuery()
-  unwatchTerminalQuery()
-  unwatchTerminalCursorPosition()
-  placeholder.value = ''
-  unwatchMultilineQueries()
-  unwatchIsOutdated()
-  unwatchReverseISearch()
-})
+    // Apply given cursor position to actual cursor position
+    queryRef.value.setSelectionRange(cursorPosition, cursorPosition)
+  }
+)
+const unwatchTerminalQuery = watch(
+  () => terminal.value.query,
+  async query => {
+    await nextTick()
+
+    // This allows to mutate the query from outside the component and not only
+    // inside a history entry
+    local.query = query
+  }
+)
 
 onMounted(() => {
   // Bind signals
   signals.on('SIGINT', sigint)
 
-  // Set initial query state
+  // Set initial query states
   setQuery('')
   setCursorPosition(0)
 

tests/unit/vue-command-query.spec.js

@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils'
+import VueCommand from '@/components/VueCommand.vue'
+import VueCommandQuery from '@/components/VueCommandQuery.vue'
+import {
+  noop,
+  wrap
+} from 'lodash'
+import {
+  computed,
+  ref
+} from 'vue'
+
+// Mock
+class ResizeObserver {
+  observe() { }
+  unobserve() { }
+  disconnect() { }
+}
+
+window.ResizeObserver = ResizeObserver
+
+describe('VueCommandQuery', () => {
+  it('shows multiline query', async () => {
+    const vueCommandWrapper = mount(VueCommand)
+
+    const vueCommandQueryWrapper = vueCommandWrapper.findComponent(VueCommandQuery)
+    const queryRef = vueCommandQueryWrapper.find({ ref: 'queryRef' })
+
+    queryRef.setValue('TEST_QUERY \\')
+    await queryRef.trigger('keyup.enter')
+
+    const multilineQueriesWrapper = vueCommandQueryWrapper.find({ ref: 'multilineQueryRefs' })
+    expect(multilineQueriesWrapper.exists()).toBe(true)
+  })
+})

tests/unit/vue-command.spec.js

@@ -5,9 +5,7 @@ import VueCommandQuery from '@/components/VueCommandQuery.vue'
 // Mock
 class ResizeObserver {
   observe () { }
-
   unobserve () { }
-
   disconnect () { }
 }