Markdown completion
Updated on September 7, 2024Source codeTests
useMarkdownCompletion is an extension that autocompletes markdown notation in a textbox created by useTextbox.
Example
Create markdown completion
To start autocompleting markdown, call the useMarkdownCompletion function, which requires one parameter:
<!-- MyComponent.vue -->
<template>...</template>
<script setup>
import { useTextbox, useMarkdownCompletion } from '@baleada/vue-features'
const textbox = useTextbox(),
markdownCompletion = useMarkdownCompletion(textbox)
</script>
Use your markdown completion
useMarkdownCompletion returns markdownCompletion—an object with tools you can use to perform and monitor autocompletion.
Here's a breakdown of that object:
segmentedBySpaceCompleteable)The reactive Completeable instance created by useMarkdownCompletion to manage inline markdown autocompletion.
Inline markdown includes:
- bold
- italic
- superscript
- subscript
- strikethrough
- code
- link
segmentedByNewlineCompleteable)The reactive Completeable instance created by useMarkdownCompletion to manage block-level markdown autocompletion.
Block-level markdown includes:
- codeblock
- blockquote
- ordered list
- unordered list
- checklist
- heading
- horizontal rule
boldA function you can use to autocomplete bold text, i.e. wrap words in **.
italicA function you can use to autocomplete italic text, i.e. wrap words in _.
superscriptA function you can use to autocomplete superscript text, i.e. wrap words in ^.
subscriptA function you can use to autocomplete subscript text, i.e. wrap words in ~.
strikethroughA function you can use to autocomplete strikethrough text, i.e. wrap words in ~~.
codeA function you can use to autocomplete code text, i.e. wrap words in `.
linkA function you can use to autocomplete a link.
codeblockA function you can use to autocomplete a codeblock, i.e. wrap a block of text in ```.
blockquoteA function you can use to programmatically convert one or more
orderedListA function you can use to autocomplete orderedList text
unorderedListA function you can use to autocomplete unorderedList text
checklistA function you can use to autocomplete checklist text
headingA function you can use to autocomplete heading text
horizontalRuleA function you can use to autocomplete horizontalRule text
