diff --git a/index.html b/index.html
index 407a507..f50e5c3 100644
--- a/index.html
+++ b/index.html
@@ -139,6 +139,8 @@
Markdown Viewer
Share
+
+
@@ -235,6 +237,8 @@ Menu
Share
+
+
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;
}