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

[CodyBrat]

#2382

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

Overview

This PR adds support for Windows standard keyboard shortcuts (Ctrl+Shift) to properly switch text direction in Slidev's integrated editor when working with RTL documents.

Problem

When editing RTL presentations (e.g., Hebrew with htmlAttrs: { dir: rtl }), pressing Ctrl+Left Shift or Ctrl+Right Shift would cause the browser to internally switch text direction, but the visual rendering would break because the dir attribute wasn't being synchronized on the textarea element.

This made it difficult to edit mixed-direction content (e.g., inserting English code or formulas in an RTL Hebrew presentation).

Solution

Added a new useTextDirection composable that:

• Listens for Ctrl+Shift keyboard combinations
• Detects which Shift key was pressed (left or right) using KeyboardEvent.location
• Sets the appropriate dir attribute on the textarea element
• Uses Vue's watch to ensure the event listener is attached when the element becomes available

Changes

New File

• packages/client/composables/useTextDirection.ts - Composable for handling direction switching

Modified Files

• packages/client/internals/NoteEditable.vue - Applied composable to notes editor
• packages/client/internals/ShikiEditor.vue - Applied composable to Shiki code editor

Testing

Tested manually in presenter mode with an RTL document:

1. Set htmlAttrs: { dir: rtl, lang: he } in slides.md
2. Open presenter mode at http://localhost:3030/presenter/
3. Click in the notes editor
4. Press Ctrl+Right Shift → textarea gets dir="rtl" ✓
5. Press Ctrl+Left Shift → textarea gets dir="ltr" ✓

Text direction switches properly with correct visual rendering and caret positioning.

Related Issues

Fixes the issue where Ctrl+Shift shortcuts don't work properly in RTL documents as described in the original bug report.

[netlify[bot]]

✅ Deploy Preview for slidev ready!

Name	Link
🔨 Latest commit	f6fc1273e20111c33d1208fa6ac29b3987c46fc9
🔍 Latest deploy log	https://app.netlify.com/projects/slidev/deploys/69308493d106c20008926e55
😎 Deploy Preview	https://deploy-preview-2385--slidev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.