Skip to content

fix: support Ctrl+Shift keyboard shortcuts for text direction in RTL documents#2385

Open
CodyBrat wants to merge 3 commits intoslidevjs:mainfrom
CodyBrat:fixes
Open

fix: support Ctrl+Shift keyboard shortcuts for text direction in RTL documents#2385
CodyBrat wants to merge 3 commits intoslidevjs:mainfrom
CodyBrat:fixes

Conversation

@CodyBrat
Copy link

#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
Copy link

netlify bot commented Nov 27, 2025

Deploy Preview for slidev ready!

Name Link
🔨 Latest commit f6fc127
🔍 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...

QR Code

Use your smartphone camera to open QR code link.

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

@kermanx kermanx changed the title Fix: Support Ctrl+Shift keyboard shortcuts for text direction in RTL documents fix: support Ctrl+Shift keyboard shortcuts for text direction in RTL documents Jan 5, 2026
Copy link
Member

@antfu antfu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I understand it correctly, the combo Ctrl+Shift does not work everywhere in every OS. I think we might need to conditionally enable this, or have a better solution to detect this behaviour change, rather than listening to key strokes that are only "common practice" (which I assume this shortcut can be configurable system-wide, so it does not always apply).

I think my biggest concern is that this would easily conflict with other combos like Ctrl+Shift+X and trigger mistakenly for users who do not use RTL.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

Comments