diff --git a/packages/client/composables/useTextDirection.ts b/packages/client/composables/useTextDirection.ts new file mode 100644 index 0000000000..751035bbf5 --- /dev/null +++ b/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) { + 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 }) +} diff --git a/packages/client/internals/NoteEditable.vue b/packages/client/internals/NoteEditable.vue index 80a28a37ae..72ab7d81aa 100644 --- a/packages/client/internals/NoteEditable.vue +++ b/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() const inputHeight = ref() +useTextDirection(inputEl) watchEffect(() => { if (editing.value) diff --git a/packages/client/internals/ShikiEditor.vue b/packages/client/internals/ShikiEditor.vue index 8171c927cd..43ea120c58 100644 --- a/packages/client/internals/ShikiEditor.vue +++ b/packages/client/internals/ShikiEditor.vue @@ -1,6 +1,7 @@