v1.3.2 — BiDi List Marker Alignment, Full-Bleed PDF Export & Engine Hardening

Overview

Theme Studio v1.3.2 introduces full-bleed zero-margin PDF exports, content-aware BiDi list and marker alignment for RTL scripts, reactive TinyMCE mode-switching synchronization, and substantial performance hardening across the CodeMirror and Joplin IPC pipelines.

---

🚀 Key Improvements & Features

1. Full-Bleed PDF Export & Custom Print Geometry

• Elimination of Unwanted White Sheet Borders: In Exact Match mode, @page sheet margins are now set to 0, allowing dark and colored theme backgrounds to paint edge-to-edge across the entire physical paper canvas without unprinted white borders.
• Configurable PDF Page Sizes: Added pdfPageSize setting supporting A4 (210 × 297 mm), US Letter (8.5 × 11 in), A5, A3, US Legal, and Auto (Printer / OS Default).
• Configurable PDF Page Margins: Added pdfPageMargin setting offering Standard (15mm 18mm), Comfortable (20mm), Compact (8mm 10mm), Zero / Full Bleed (0mm), and Custom.
• Custom Margin Definitions: Added customPdfMargin input to specify arbitrary CSS margin strings (e.g., 15mm 20mm, 1in, 10mm 15mm 10mm 15mm).
• Content Padding Inset: Content margins in Exact Match mode are applied via container padding (#rendered-md), ensuring readable text margins while preserving full-canvas background rendering.

2. BiDi List & Marker Alignment Engine

• Content-Aware First-Strong-Character Tagging: The Markdown-It parser now inspects the first strong directional character of block elements in Auto-Detect (BiDi) mode, assigning explicit dir="rtl" or dir="ltr" attributes to <ul>, <ol>, and <li>.
• RTL Bullet & Number Preservation: Addressed an issue where RTL list bullets and numbers either rendered on the left or were clipped off-screen by overflow-x: hidden. RTL lists now enforce a dedicated 2.2em right gutter (padding-right: 2.2em), keeping ::marker bullets and numbers within the visible viewport.
• Dual Selector Support: List rules bind both standard attribute selectors (ul[dir="rtl"]) and CSS pseudo-classes (ul:dir(rtl)) for broad compatibility across Electron and mobile WebViews.
• BiDi Checkbox & Heading Alignment: Task list checkboxes (- [ ]) and ## heading accent bars automatically mirror to the right margin for RTL text and the left margin for LTR text.

3. Rich Text Editor (TinyMCE) Asynchronous Mount Synchronization

• Lifecycle Synchronization: Resolved an issue where toggling from Markdown mode to Rich Text mode wiped injected theme styles due to TinyMCE's asynchronous document.write() initialization.
• Asynchronous Mount Watcher: Implemented a self-terminating, frame-based watcher (watchTinyMceIframe) that injects the active theme into TinyMCE's iframe <head> immediately upon initialization and unregisters within 50ms of document readiness.

---

⚡ Performance & Architectural Hardening

• Zero-Overhead Keystroke Processing: The main document's MutationObserver now detects and ignores mutations originating inside CodeMirror's editor tree (.cm-content, .cm-line). Typing latency is reduced from repetitive DOM/iframe queries to native speed (<0.01ms per keystroke).
• Observer & Listener Leak Prevention: Introduced an idempotent initialization guard preventing duplicate MutationObserver and window.focus listener registrations across note switches.
• I/O & IPC Quiescence:
  • Caches lastWrittenChromeCss to skip redundant disk writes (fs.writeFile) and desktop chrome stylesheet reloads (loadChromeCssFile) on window focus when settings have not changed.
  • Replaced 14 sequential setting queries with a single batched joplin.settings.values(keys) IPC call.
• Reactive Settings Sync: Registered joplin.settings.onChange to immediately sync the desktop application shell when settings are updated, eliminating the need to restart Joplin or refocus windows.
• Selector Optimization: Replaced the heavy universal descendant selector table :is(th, td) *:not(code):not(pre) with standard CSS table font inheritance.
• CodeMirror 6 Caret Support: Added explicit styling for .cm-cursor and .cm-dropCursor to maintain caret contrast across all themes.
• Modern Settings API: Migrated from deprecated joplin.settings.globalValue('locale') to joplin.settings.globalValues(['locale']).

---

⚙️ New Settings Reference

Setting Key	Type	Options	Default	Description
pdfPageSize	Enum	a4, letter, a5, a3, legal, auto	a4	Paper dimensions used when exporting notes to PDF.
pdfPageMargin	Enum	standard, comfortable, compact, none, custom	standard	Page margin presets applied during PDF export.
customPdfMargin	String	CSS Margin string	15mm 18mm	Custom margin rules active when pdfPageMargin is set to Custom.

---

📦 Verification & Installation

Automatic Update (Recommended)

1. Open Joplin.
2. Navigate to Tools > Options > Plugins (macOS: Joplin > Preferences > Plugins).
3. Search for Theme Studio and click Update (or restart Joplin when prompted).

Manual Installation

Download org.joplin.plugin.theme-studio.jpl from the assets below:

1. In Joplin, open Tools > Options > Plugins.
2. Click the gear icon (⚙) > Install from file.
3. Select the .jpl file and restart Joplin.

Theme Studio v1.3.1

Full Changelog: https://github.com/xyasharx/joplin-plugin-theme-studio/commits/v1.3.1

Theme Studio v1.3.0

Theme Studio v1.3.0: Desktop UI Shell Theming, Panel Synchronization & Heading Typography Scale

Theme Studio v1.3.0 introduces full-window application shell theming for Joplin Desktop, synchronization for third-party plugin panels (such as Outline), layout hardening for tree indentation and toolbar geometry, and configurable heading font scales.

---

🛠️ What's New

1. Desktop Application Shell Theming (Sidebar, Note List & Headers)

• Added full UI chrome theming via joplin.window.loadChromeCssFile combined with zero-latency live DOM style injection through src/codeMirrorTheme.ts.
• The active theme palette now applies across Joplin Desktop's shell:
  • Notebook and tag sidebar (.side-bar, .r-sidebar, div[toggleblock="1"]).
  • Note list panel and item containers (.note-list, .r-note-list).
  • Resizable layout splitters (div[style*="col-resize"], div[style*="row-resize"]).
  • Top header bar, search bar, and note title bar (.header, .note-title-wrapper).
  • Bottom tag bar and application notification banners.
• Controlled via an opt-in setting: "Theme Application Shell (Sidebar & Note List)" under Tools > Options > Theme Studio (automatically guarded to skip safely on mobile).

2. High-Specificity UI Shell Hardening

• Inline Style Overrides: Added high-specificity CSS rules to override Joplin's hardcoded inline dark-theme styles (rgb(20, 23, 26), rgb(0, 95, 184), and #383e4a).
• Synchronize Container: Correctly targets the bottom-left sync box (div.rli-sideBar > div:last-child, div:has(.synchronize-button)) to match var(--od-bg-alt) and var(--od-bg) instead of rendering pitch-black.
• Button Contrast Optimization: Button labels for + New note and + New to-do now use color: var(--od-bg) !important; to ensure WCAG-compliant contrast across both dark pastel and rich light palette buttons.
• Unified Title Bar: input.title-input now renders with a transparent background and zero borders, merging seamlessly with the top navigation bar and eliminating fragmented borders.
• Border Cleanup: Removed unnecessary bottom divider borders under the search bar and the editor formatting toolbar.

3. Sidebar Tree Indentation & BiDi Layout Preservation

• Restored Tree Depth: Removed destructive padding overrides from .side-bar .list-item-container. Joplin's native nested folder indentation (16px, 32px, 48px, etc.) functions without interference.
• Preserved Toolbar Coordinates: Top headers, search bars, and editor formatting toolbars remain in their standard left-to-right grid layout to prevent button reversal and icon displacement in RTL mode.
• Emoji & Count Spacing: Removed aggressive flex ordering that caused notebook emojis to collide with text. Folder icons now have dedicated horizontal margins (margin: 0 6px), note counts anchor to the left in RTL, and notebook titles isolate naturally via Unicode BiDi.

4. Third-Party Plugin Panel Synchronization (Outline Panel)

• Expanded the iframe injection pipeline in src/codeMirrorTheme.ts to inspect all plugin panel webviews (joplin.views.panels).
• The Outline plugin panel and its search header now inherit the active theme's background, borders, and typography variables (--joplin-background-color, --joplin-color), eliminating split dark/light panels.

5. Configurable Heading Typography Scales (H1 – H6)

• Added Heading Sizes Preset (headingSizePreset):
  • Balanced / Standard (Default): H1: 1.75em, H2: 1.42em, H3: 1.25em, H4: 1.12em, H5: 1.05em, H6: 1.0em.
  • Large / Editorial: H1: 2.15em, H2: 1.7em, H3: 1.4em, H4: 1.22em, H5: 1.1em, H6: 1.0em.
  • Compact / Dense: H1: 1.5em, H2: 1.3em, H3: 1.18em, H4: 1.08em, H5: 1.02em, H6: 0.95em.
  • Custom Sizes: Unlocks custom scale definition.
• Added Custom Heading Sizes (customHeadingSizes):
  • Accepts comma-separated values from H1 to H6 (e.g. 28px, 24px, 20px, 18px, 16px, 14px or 2.2em, 1.8em, 1.4em, 1.2em, 1.1em, 1.0em).
  • Includes a defensive parser that strips label prefixes (e.g. H1:) and falls back gracefully to standard scale if fewer than 6 tokens are supplied.
  • Scales proportionally across mobile viewports and PDF export using calc().

---

🐛 Bug Fixes

• Fixed TS2339: Property 'chromeCss' does not exist on type '{ editorCss: string; viewerCss: string; }' compilation failure in src/codeMirrorTheme.ts.
• Fixed white border artifact on the synchronize button in light themes by resetting outline and box-shadow.
• Fixed active notebook selection (.selected) retaining Joplin's default dark blue background.

---

📦 Installation & Upgrade

1. Download org.joplin.plugin.theme-studio.jpl from the release assets below.
2. In Joplin Desktop: Tools > Options > Plugins > ⚙ > Install from file.
3. In Joplin Mobile (Android): Configuration > Plugins > Advanced > Install from file.
4. Restart Joplin to reload the updated content scripts.

Full Changelog: v1.2.1...v1.3.0

Theme Studio v1.2.1

Full Changelog: https://github.com/xyasharx/joplin-plugin-theme-studio/commits/v1.2.1

v1.2.0: Full Editor Mode Theming (CodeMirror & TinyMCE) & Performance Optimizations

Theme Studio v1.2.0: Full Editor Mode Theming (CodeMirror & TinyMCE) & Performance Optimizations

Theme Studio v1.2.0 extends theme rendering across all Joplin editor environments (CodeMirror 6, CodeMirror 5, and the TinyMCE Rich Text Editor), optimizes typing and rendering execution speed with memoized caching, and refines typography and blockquote styling.

---

🛠️ What's New

1. Markdown Editor Theming (CodeMirror 6 & 5)

• Registered a dedicated CodeMirrorPlugin content script (src/codeMirrorTheme.ts) to inject real-time styles into Joplin's code editor.
• The active theme palette now styles:
  • Editor background and text color (.cm-editor, .CodeMirror).
  • Gutter tracks, border dividers, and line numbers (.cm-gutters, .CodeMirror-gutters).
  • Active line highlight and active gutter indicator (.cm-activeLine, .cm-activeLineGutter).
  • Cursor caret color and text selection bounds (.cm-selectionBackground).
  • Markdown syntax tokens (headings h1–h6, inline code, bold, italics, links, URLs, and quotes).
• Editor direction automatically aligns with your Layout Direction setting (ltr, rtl, or auto per-paragraph BiDi).

2. Rich Text Editor Theming (TinyMCE)

• Implemented real-time iframe style injection using a lightweight MutationObserver.
• The Rich Text Editor (body#tinymce) and its container (.tox-tinymce, .tox-toolbar) now fully inherit your active theme palette, typography stack, table formatting, and heading colors.
• New configuration toggle: "Apply Theme to Markdown Editor" (enabled by default) under Tools > Options > Theme Studio.

3. Rendering Engine Performance & Keystroke Memoization

• O(1) Cached Viewer Re-rendering: Replaced unmemoized string generation in src/markdownTheme.ts. Stylesheet compilation now caches the generated CSS and returns from memory on note edits. Full string concatenation only runs when plugin settings change.
• FOIT Mitigation: Added &display=swap to Google Fonts and CDN imports so text renders using system fallbacks immediately while remote fonts resolve asynchronously.

4. Typography & Blockquote Refinement

• Minimalist Blockquotes: Updated blockquote styling to use a clean 1px accent border, transparent background, and zero border-radius across RTL, LTR, Auto-BiDi, and PDF export modes.
• Table Font Isolation: Enforced explicit font-family inheritance across table, th, and td elements while isolating inline code cells to the selected monospace code font.

---

🐛 Bug Fixes

• Fixed TS2304: Cannot find name 'buildThemeCss' compilation error in src/index.ts.
• Resolved CSS specificity collisions where Joplin core styles overrode custom editor background colors.

---

📦 Installation & Upgrade

1. Download org.joplin.plugin.theme-studio.jpl from the release assets below.
2. In Joplin Desktop: Tools > Options > Plugins > ⚙ > Install from file.
3. In Joplin Mobile (Android): Configuration > Plugins > Advanced > Install from file.
4. Restart Joplin to apply the updated content scripts.

---

### 4. Git Deployment Commands

```bash
# Stage and commit version changes
git add package.json src/manifest.json src/index.ts
git commit -m "chore: bump version to 1.2.0"

# Push to primary branch
git push origin main

# Tag release to trigger GitHub Actions
git tag v1.2.0
git push origin v1.2.0

Theme Studio v1.1.0 — Global Typography, PDF Fidelity & Layout Polish

🎨 Theme Studio v1.1.0 — Global Typography, PDF Fidelity & Layout Polish

Theme Studio v1.1.0 is a major milestone release bringing international font presets with smart locale auto-detection, a high-fidelity PDF export engine, table typography fixes, and mobile layout refinements.

---

🌍 Smart Locale Detection & International Typography

• Zero-Config Locale Detection: Theme Studio now queries Joplin's interface language on launch:
  • For English, European, CJK, and Latin users, it defaults to clean LTR and the Inter font.
  • For Persian, Arabic, and Hebrew users, it automatically configures RTL and the Vazirmatn font.
• New "Auto-Detect (Per-Paragraph BiDi)" Mode: Powered by the Unicode Bidirectional Algorithm and CSS Logical Properties. Bilingual notes containing both English and Persian/Arabic will automatically align each paragraph to its natural writing direction.
• Built-in Web Font Presets: Mobile users can now render global typography on the fly without needing local system font installations:
  • Inter & Roboto: Modern Latin, European, and Cyrillic.
  • Vazirmatn & Noto Sans Arabic: Persian, Arabic, Kurdish, and Urdu.
  • Noto Sans SC & JP: Simplified Chinese & Japanese.
  • Heebo: Hebrew & Latin.
  • Noto Sans Devanagari: Hindi, Sanskrit, and Marathi.
  • Lora: Editorial serif for long-form reading.
  • Fira Code & JetBrains Mono: Monospace developer typography.

---

📄 High-Fidelity PDF & Print Engine

• Exact Color & Layout Preservation: Enforced print-color-adjust: exact so your chosen theme colors, dark/light backgrounds, borders, and callout fills carry over to exported PDFs.
• Table Auto-Fitting (No Cropping): Tables in exported PDFs now use flexible layout rules with text wrapping (pre-wrap), eliminating truncated right-side columns and printed scrollbar artifacts.
• Code Block Wrapping: Long code snippets automatically wrap on paper instead of extending past the printable margin.
• Smart Page-Break Protection: Images, Mermaid diagrams, table rows, and callouts will no longer be sliced in half across page breaks. Headings will never be stranded at the bottom of a page (break-after: avoid).
• New Setting — PDF Export Appearance: Choose between:
  • Exact Match (Default): Preserves complete theme colors and backgrounds.
  • Paper Friendly: Clean white page background with themed typography and accents (ink-saving).

---

🐛 Bug Fixes & Refinements

• Fixed Table Font Inheritance: Resolved an issue where table cells (th, td) ignored your chosen font preset and fell back to Joplin's default font. Tables now inherit your active font stack, while inline code inside cells continues using the monospace code font.
• Fixed Mobile Font Scaling: Eliminated the hardcoded 16px rule on mobile viewports (< 768px). Mobile text now scales with your chosen Font Size and Line Height settings.
• Fixed Horizontal Page Overflow on Mobile: Removed legacy 9999px SVG constraints and enforced root-level document clipping (overflow-x: hidden). Diagrams, code blocks, and wide tables scroll inside their own containers without causing the whole screen to sway horizontally.

---

✨ Reading & Note-Taking Polish

• Interactive Checklists: Checked to-do items (- [x]) smoothly dim to 55% opacity with a clean strikethrough.
• Smart Image Boundaries: Pasted high-resolution and retina screenshots are constrained to max-height: 520px with centered alignment, preventing single images from dominating notes.
• Cross-Note Link Distinction: Internal Joplin note links (:/<id>) now feature a dashed accent underline to distinguish them from external web URLs.
• Themed TOC & Footnotes: Built-in [[toc]] and [^1] footnotes automatically inherit your active theme palette and border styling.
• Reading Width (Focus Mode): Added Compact (760px Centered) and Comfortable (920px Centered) options to prevent text lines from stretching across ultra-wide desktop monitors.

---

📦 How to Install / Upgrade

1. Download org.joplin.plugin.theme-studio.jpl attached below.
2. In Joplin Desktop: Tools > Options > Plugins > ⚙ > Install from file.
3. In Joplin Mobile (Android): Configuration > Plugins > Advanced > Install from file.
4. Restart Joplin.

Theme Studio v1.0.5: Global Typography Engine, Mobile Fixes & Callouts

🎨 Theme Studio v1.0.5: Global Typography Engine, Mobile Fixes & Callouts

This update introduces international font presets, resolves mobile layout and scaling issues, and adds Obsidian/GitHub-style callout blocks alongside a focused reading mode.

---

🌍 New: International Font Engine

Mobile devices running Joplin often cannot install custom system fonts. Theme Studio now includes a built-in International Font Preset engine that downloads and renders high-quality typography on the fly via CDN:

• Persian / Arabic / Kurdish / Urdu: Vazirmatn & Noto Sans Arabic
• English / Latin / European / Cyrillic: Inter & Roboto
• East Asian (CJK): Noto Sans SC (Simplified Chinese) & Noto Sans JP (Japanese)
• Hebrew: Heebo
• Devanagari (Hindi / Sanskrit / Marathi): Noto Sans Devanagari
• Book & Long-form Reading: Lora (Editorial Serif)
• Code Fonts: Fira Code & JetBrains Mono

---

🐛 Bug Fixes & Mobile Improvements

• Fixed Mobile Font Scaling: Resolved a bug where mobile viewports (< 768px) were hardcoded to 16px. Your selected Font Size and Line Height settings now apply consistently across both Desktop and Mobile.
• Eliminated Horizontal Screen Scroll on Mobile:
  • Removed the legacy 9999px Mermaid SVG rule that forced viewport stretching.
  • Implemented universal box-sizing and root document overflow clipping (overflow-x: hidden).
  • Wide elements (Mermaid charts, ASCII tree code blocks, KaTeX formulas, and tables) now scroll strictly within their individual containers without causing the whole page to shift horizontally.

---

✨ Additional Features

• Callout / Admonition Blocks: Native styling for Obsidian and GitHub-style callouts (> [!NOTE], > [!TIP], > [!WARNING], > [!DANGER], and > [!INFO]) with theme-matched accent borders in both RTL and LTR modes.
• Reading Width (Focus Mode): Added a new layout option to prevent lines from stretching across ultra-wide monitors:
  • Full Width (100%)
  • Comfortable Reading (920px Centered)
  • Compact Focus (760px Centered)

---

🛠️ Build & CI/CD

• Webpack & Toolchain Upgrade: Standardized build commands using official --env arguments.
• TypeScript 5.8.3 Stability: Pinned TypeScript compiler to ensure full compatibility with ts-loader and Webpack 5.
• Automated Releases: Added support for conditional npm publishing and automatic .jpl bundle asset generation in GitHub Actions.

---

📦 How to Install / Upgrade

1. Download the org.joplin.plugin.theme-studio.jpl file attached below.
2. In Joplin Desktop: Go to Tools > Options > Plugins > ⚙ > Install from file.
3. In Joplin Mobile (Android): Go to Configuration > Plugins > Advanced > Install from file.
4. Restart Joplin.

Theme Studio v1.0.4

Full Changelog: v1.0.1...v1.0.4

Full Changelog: v1.0.1...v1.0.4

Release v1.0.1

Full Changelog: main...v1.0.1

Release main

Full Changelog: https://github.com/xyasharx/joplin-plugin-theme-studio/commits/main

Full Changelog: https://github.com/xyasharx/joplin-plugin-theme-studio/commits/main

Full Changelog: https://github.com/xyasharx/joplin-plugin-theme-studio/commits/main