fix: remove tab

README.md

@@ -8,6 +8,7 @@ Kong's open-source markdown renderer and live editor.
 - [TODO](#todo)
 - [Usage](#usage)
   - [Installation](#installation)
+  - [Notes](#notes)
   - [Props](#props)
 - [Contributing \& Local Development](#contributing--local-development)
   - [Development Sandbox](#development-sandbox)
@@ -40,6 +41,12 @@ pnpm add @kong/markdown
 yarn add @kong/markdown
 ```
 
+### Notes
+
+By default, the editor does not handle the Tab key unless there is an active text selection within the `textarea`. This isn't an oversight —- it is an intentional decision to make the default configuration pass the ["no keyboard trap"](https://www.w3.org/TR/WCAG21/#no-keyboard-trap) criterion of the W3C Web Content Accessibility Guidelines.
+
+Some users browse the web without access to a pointing device, and it is really unfriendly towards such users to have focusable inputs that they cannot escape from.
+
 ### Props
 
 #### `v-model`

src/components/MarkdownUi.vue

@@ -33,8 +33,6 @@
           translate="no"
           :value="rawMarkdown"
           @input="$event => onContentEdit($event as any)"
-          @keydown.shift.tab.exact.prevent="onShiftTab"
-          @keydown.tab.exact.prevent="onTab"
         />
       </div>
       <div
@@ -88,7 +86,7 @@ const props = defineProps({
   /** The number of spaces to insert on tab. Defaults to 2, max of 10 */
   tabSize: {
     type: Number,
-    default: 4,
+    default: 2,
     validator: (size: number): boolean => size >= 2 && size <= 6,
   },
   /** MermaidJs is heavy; allow it opting-out by passing false. Defaults to true. */
@@ -135,6 +133,7 @@ const uniqueId = uuidv4()
 const componentContainerId = computed((): string => `markdown-ui-${uniqueId}`)
 const textareaId = computed((): string => `markdown-ui-textarea-${uniqueId}`)
 const scrollableClass = computed((): string => `scrollable-${uniqueId}`)
+const tabSize = computed((): number => props.tabSize)
 
 // Provide values to child components
 provide(TEXTAREA_ID_INJECTION_KEY, computed((): string => textareaId.value))
@@ -205,27 +204,13 @@ const insertTemplate = (template: MarkdownTemplate): void => {
   emulateInputEvent()
 }
 
-// When the user presses the `tab` key in the textarea
-const onTab = (): void => {
-  toggleTab('add', props.tabSize)
-  // Emulate an `input` event to trigger an update
-  emulateInputEvent()
-}
-
-// When the user presses `shift + tab` keys in the textarea
-const onShiftTab = (): void => {
-  toggleTab('remove', props.tabSize)
-  // Emulate an `input` event to trigger an update
-  emulateInputEvent()
-}
-
 /** When true, show the HTML preview instead of the rendered markdown preview */
 const htmlPreview = ref<boolean>(false)
 
 // If the htmlPreview is enabled, pass the generated HTML through the markdown renderer and output the syntax-highlighted result
 watchEffect(() => {
   if (htmlPreview.value) {
-    markdownPreviewHtml.value = md.value?.render('```html' + NEW_LINE_CHARACTER + formatHtml(markdownHtml.value, ' '.repeat(props.tabSize)) + NEW_LINE_CHARACTER + '```')
+    markdownPreviewHtml.value = md.value?.render('```html' + NEW_LINE_CHARACTER + formatHtml(markdownHtml.value, ' '.repeat(tabSize.value)) + NEW_LINE_CHARACTER + '```')
   }
 })
 
@@ -352,7 +337,7 @@ const saveChanges = (): void => {
 }
 
 // Initialize keyboard shortcuts; they will only fire in edit mode when the textarea is active
-composables.useKeyboardShortcuts(textareaId.value, rawMarkdown, emulateInputEvent)
+composables.useKeyboardShortcuts(textareaId.value, rawMarkdown, tabSize, emulateInputEvent)
 
 onBeforeMount(async () => {
   // Initialize markdown-it

src/composables/useKeyboardShortcuts.ts

@@ -8,18 +8,20 @@ import type { InlineFormat } from '@/types'
  * Utilize keyboard shortcuts in the markdown editor. Must be called at the root of the `setup` function.
  * @param {string} textareaId The `id` of the textarea
  * @param {Ref<string>} rawMarkdown A Vue ref containing the raw markdown content from the textarea.
+ * @param {Ref<number>} tabSize The current tab size
  * @param {Function} onEditCallback A function to call after toggling the inline text formatting.
  * @returns
  */
 export default function useKeyboardShortcuts(
   textareaId: string,
   rawMarkdown: Ref<string>,
+  tabSize: Ref<number>,
   onEditCallback: () => void,
 ) {
   // The document.activeElement
   const activeElement = useActiveElement()
   const textareaIsActive = computed((): boolean => activeElement.value?.id === textareaId)
-  const { toggleInlineFormatting, insertNewLine } = useMarkdownActions(textareaId, rawMarkdown)
+  const { toggleInlineFormatting, insertNewLine, getTextSelection, selectedText, toggleTab } = useMarkdownActions(textareaId, rawMarkdown)
 
   const getFormatForKeyEvent = (evt: any): InlineFormat | undefined => {
     let format: InlineFormat | undefined
@@ -76,12 +78,29 @@ export default function useKeyboardShortcuts(
         }
       }
 
+      // Enter key
       if (e.key && e.key === 'Enter' && !e.shiftKey) {
         e.preventDefault()
         insertNewLine()
         // Always fire the callback
         onEditCallback()
       }
+
+      // Tab key, and Shift + Tab
+      if (e.key && e.key === 'Tab') {
+        getTextSelection()
+
+        if (selectedText.text) {
+          e.preventDefault()
+          if (e.shiftKey) {
+            toggleTab('remove', tabSize.value)
+          } else {
+            toggleTab('add', tabSize.value)
+          }
+          // Always fire the callback
+          onEditCallback()
+        }
+      }
     },
   })
 }

src/composables/useMarkdownActions.ts

@@ -496,6 +496,7 @@ export default function useMarkdownActions(
 
   return {
     selectedText,
+    getTextSelection,
     toggleInlineFormatting,
     toggleTab,
     insertMarkdownTemplate,