From c280c4b9d4905cf77cf89e1084abf9f923f8c236 Mon Sep 17 00:00:00 2001
From: Essam <Essam.soft@gmail.com>
Date: Mon, 6 Apr 2026 21:46:25 +0300
Subject: [PATCH] Add RTL toggle button for preview pane

Adds an RTL button (text-only, no icon) to both the desktop toolbar and
mobile menu that toggles right-to-left direction on the markdown preview.
State is persisted to localStorage and restored on page load.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html |  4 ++++
 script.js  | 17 +++++++++++++++++
 styles.css |  6 ++++++
 3 files changed, 27 insertions(+)

diff --git a/index.html b/index.html
index 407a507..f50e5c3 100644
--- a/index.html
+++ b/index.html
@@ -139,6 +139,8 @@ <h1 class="h4 mb-0 me-2">Markdown Viewer</h1>
                         <i class="bi bi-share"></i> Share
                     </button>
                     
+                    <button id="rtl-toggle" class="tool-button" title="Toggle RTL Preview">RTL</button>
+
                     <button id="theme-toggle" class="tool-button" title="Toggle Dark Mode">
                         <i class="bi bi-moon"></i>
                     </button>
@@ -235,6 +237,8 @@ <h5>Menu</h5>
                                 <i class="bi bi-share me-2"></i> Share
                             </button>
                             
+                            <button id="mobile-rtl-toggle" class="mobile-menu-item" title="Toggle RTL Preview">RTL</button>
+
                             <button id="mobile-theme-toggle" class="mobile-menu-item" title="Toggle Dark Mode">
                                 <i class="bi bi-moon me-2"></i> Dark Mode
                             </button>
diff --git a/script.js b/script.js
index ebafa41..33de2a6 100644
--- a/script.js
+++ b/script.js
@@ -61,6 +61,8 @@ document.addEventListener("DOMContentLoaded", function () {
   const mobileThemeToggle   = document.getElementById("mobile-theme-toggle");
   const shareButton         = document.getElementById("share-button");
   const mobileShareButton   = document.getElementById("mobile-share-button");
+  const rtlToggleButton     = document.getElementById("rtl-toggle");
+  const mobileRtlToggle     = document.getElementById("mobile-rtl-toggle");
   const githubImportModal = document.getElementById("github-import-modal");
   const githubImportTitle = document.getElementById("github-import-title");
   const githubImportUrlInput = document.getElementById("github-import-url");
@@ -1524,6 +1526,18 @@ This is a fully client-side application. Your content never leaves your browser
     saveGlobalState({ syncScrollingEnabled });
   }
 
+  // RTL Preview Toggle
+  let rtlEnabled = false;
+
+  function toggleRTL() {
+    rtlEnabled = !rtlEnabled;
+    markdownPreview.setAttribute("dir", rtlEnabled ? "rtl" : "ltr");
+    [rtlToggleButton, mobileRtlToggle].forEach(btn => {
+      if (btn) btn.classList.toggle("rtl-active", rtlEnabled);
+    });
+    saveGlobalState({ rtlEnabled });
+  }
+
   // View Mode Functions - Story 1.1 & 1.2
   function setViewMode(mode) {
     if (mode === currentViewMode) return;
@@ -1745,6 +1759,7 @@ This is a fully client-side application. Your content never leaves your browser
   
   initTabs();
   if (loadGlobalState().syncScrollingEnabled === false) toggleSyncScrolling();
+  if (loadGlobalState().rtlEnabled === true) toggleRTL();
   updateMobileStats();
 
   // Initialize resizer - Story 1.3
@@ -1801,6 +1816,8 @@ This is a fully client-side application. Your content never leaves your browser
   editorPane.addEventListener("scroll", syncEditorToPreview);
   previewPane.addEventListener("scroll", syncPreviewToEditor);
   toggleSyncButton.addEventListener("click", toggleSyncScrolling);
+  rtlToggleButton.addEventListener("click", toggleRTL);
+  mobileRtlToggle.addEventListener("click", () => { toggleRTL(); closeMobileMenu(); });
   themeToggle.addEventListener("click", function () {
     const theme =
       document.documentElement.getAttribute("data-theme") === "dark"
diff --git a/styles.css b/styles.css
index 7795594..d1ef1d7 100644
--- a/styles.css
+++ b/styles.css
@@ -302,6 +302,12 @@ body {
   font-size: 16px;
 }
 
+.tool-button.rtl-active {
+  background-color: var(--button-active);
+  border-color: var(--accent-color, #0969da);
+  color: var(--accent-color, #0969da);
+}
+
 .file-input {
   display: none;
 }