Fix: Support Ctrl+Shift keyboard shortcuts for text direction in RTL documents

packages/client/composables/useTextDirection.ts

@@ -0,0 +1,36 @@
+import type { Ref } from 'vue'
+import { watch } from 'vue'
+
+// Handle keyboard shortcuts for switching text direction
+// Mainly for RTL documents where you need to quickly switch between RTL and LTR
+export function useTextDirection(element: Ref<HTMLTextAreaElement | null | undefined>) {
+  function handleKeyDown(e: KeyboardEvent) {
+    // Check if it's a Ctrl+Shift combo
+    if (!e.ctrlKey || !e.shiftKey || e.key !== 'Shift')
+      return
+
+    // The KeyboardEvent.location property tells us which shift key was pressed
+    // 1 = left shift, 2 = right shift
+    if (e.location === 1) {
+      // Left shift = LTR
+      e.preventDefault()
+      if (element.value)
+        element.value.setAttribute('dir', 'ltr')
+    }
+    else if (e.location === 2) {
+      // Right shift = RTL
+      e.preventDefault()
+      if (element.value)
+        element.value.setAttribute('dir', 'rtl')
+    }
+  }
+
+  // Need to watch the element because it might not be available immediately
+  watch(element, (newEl, oldEl) => {
+    if (oldEl)
+      oldEl.removeEventListener('keydown', handleKeyDown)
+
+    if (newEl)
+      newEl.addEventListener('keydown', handleKeyDown)
+  }, { immediate: true })
+}

packages/client/internals/NoteEditable.vue

@@ -4,6 +4,7 @@ import type { PropType } from 'vue'
 import { ignorableWatch, onClickOutside, useVModel } from '@vueuse/core'
 import { nextTick, ref, toRef, watch, watchEffect } from 'vue'
 import { useDynamicSlideInfo } from '../composables/useSlideInfo'
+import { useTextDirection } from '../composables/useTextDirection'
 import NoteDisplay from './NoteDisplay.vue'
 
 const props = defineProps({
@@ -77,6 +78,7 @@ watch(
 
 const inputEl = ref<HTMLTextAreaElement>()
 const inputHeight = ref<number | null>()
+useTextDirection(inputEl)
 
 watchEffect(() => {
   if (editing.value)

packages/client/internals/ShikiEditor.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, shallowRef } from 'vue'
 import { useIME } from '../composables/useIME'
+import { useTextDirection } from '../composables/useTextDirection'
 
 const props = defineProps<{
   placeholder?: string
@@ -9,6 +10,7 @@ const content = defineModel<string>({ required: true })
 const { composingContent, onInput, onCompositionEnd } = useIME(content)
 
 const textareaEl = ref<HTMLTextAreaElement | null>(null)
+useTextDirection(textareaEl)
 
 const highlight = shallowRef<((code: string) => string) | null>(null)
 import('../setup/shiki').then(async (m) => {