Closing completion
Updated on September 7, 2024Source codeTests
useClosingCompletion is an extension that autocompletes closing punctuation (e.g. brackets and quotes) in a textbox created by useTextbox.
For example, when the end user types [, the ] will be autocompleted. Or, if they highlight text and type (, the highlighted text will be wrapped in opening and closing parentheses.
Example
Type an opening bracket or quote to autocomplete. Or, highlight text and type an opening bracket or quote to wrap the selected text.
Create closing completion
To start autocompleting punctuation, call the useClosingCompletion function, which accepts two parameters:
optionsHere's a breakdown of the useClosingCompletion options:
onlyAn array of punctuation that should be autocompleted. Valid opening punctuation includes:
[({<"'`
The default only array includes all of those characters.
<!-- MyComponent.vue -->
<template>...</template>
<script setup>
import { useTextbox, useClosingCompletion } from '@baleada/vue-features'
const textbox = useTextbox(),
closingCompletion = useClosingCompletion(textbox[, options])
</script>
Use your closing completion
useClosingCompletion returns closingCompletion—an object with tools you can use to perform and monitor autocompletion.
Here's a breakdown of that object:
close(opening)A function you can use to programmatically autocomplete punctuation based on the current selection.
close requires one parameter: opening, the opening punctuation that should be autocompleted.
Given the opening punctuation, close will record a new entry with the autocompleted text into your textbox's undo/redo history, which in turn will update the value of your HTML text input or textarea.
close returns the closing punctuation character (String).
segmentedBySelectionCompleteable)The reactive Completeable instance created by useClosingCompletion to manage punctuation autocompletion.
See the How autocompletion works section for more guidance on segmentedBySelection usage.
How autocompletion works
As mentioned above, the returned closingCompletion object has a segmentedBySelection property that holds the Completeable instance that handles all of closingCompletion's autocompletion logic.
Like all Completeable instances, this instance extracts a segment of your text, which it eventually replaces with autocompleted text.
This segment starts exactly where the end user's selection starts, and ends exactly where the end user's selection ends. If the end user types Baleada into your textbox, then highlights Bal, then closingCompletion.segmentedBySelection.value.segment will be Bal.
More importantly, if the end user highlights Bal and then types [, two things would happen:
- The textbox would autocomplete to
[Bal]eada(wrapping the highlighted text in autocompleted punctuation) - The selection range would update, so that only
Balis still highlighted
Play with the example near the top of this article to get a better sense of how that logic works.
