From 7c3df15ebc1e8320afc3e6185c64d2e3acf80269 Mon Sep 17 00:00:00 2001 From: orelby <1364809+orelby@users.noreply.github.com> Date: Wed, 23 Apr 2025 14:47:14 +0300 Subject: [PATCH] Support configurable RTL & LTR command names --- main.ts | 204 ++++++++++++++++++++++++++++++++++++++------------ manifest.json | 2 +- styles.css | 4 +- 3 files changed, 158 insertions(+), 52 deletions(-) diff --git a/main.ts b/main.ts index a15951e..ccb257c 100644 --- a/main.ts +++ b/main.ts @@ -1,4 +1,7 @@ -import { Plugin, loadMathJax, finishRenderMath } from 'obsidian'; +import { + App, Plugin, PluginSettingTab, Setting, + debounce, finishRenderMath, loadMathJax +} from 'obsidian'; declare global { interface Window { @@ -6,27 +9,80 @@ declare global { } } +interface BidiCommands { + RTL: string[]; + LTR: string[]; +} + +interface Settings { + cmds: BidiCommands; +} + +const DEFAULT_CMDS: BidiCommands = { + RTL: ['R'], + LTR: ['L'], +}; + export default class RtlMathTextPlugin extends Plugin { + settings: Settings; + private mathjaxPatcher?: MathJaxBidiCommandPatcher; + + async onload() { + await this.loadSettings(); + this.addSettingTab(new RtlMathTextSettingsTab(this.app, this)); + await this.patchMathJax(); + } + + private async patchMathJax() { + this.mathjaxPatcher?.destroy(); + this.mathjaxPatcher = new MathJaxBidiCommandPatcher(this.settings.cmds); + await this.mathjaxPatcher.init(); + } + + async loadSettings() { + const data = await this.loadData(); + this.settings = { + cmds: Object.assign({}, DEFAULT_CMDS, data?.cmds), + }; + } + + async saveSettings() { + await this.saveData(this.settings); + await this.patchMathJax(); + } + + onunload() { + this.mathjaxPatcher?.destroy(); + this.mathjaxPatcher = undefined; + } + +} + +class MathJaxBidiCommandPatcher { + private cmds: BidiCommands; private mathjaxStyleObserver?: MutationObserver; private styleEl?: HTMLStyleElement; - async onload() { + constructor(cmds: BidiCommands) { + this.cmds = cmds; + } + + async init() { await loadMathJax(); // Extend MathJax macros - window.MathJax.tex2chtml(` - \\def\\R#1{\\class{mjx-rtl}{#1}} - \\def\\L#1{\\class{mjx-ltr}{#1}} - \\def\\RLE#1{\\class{mjx-rtl}{#1}} - \\def\\LRE#1{\\class{mjx-ltr}{#1}} - `, - { display: false } - ); - - // Re-typeset existing math - if (window.MathJax.typesetPromise) { - await window.MathJax.typesetPromise(); + const defs = []; + for (const dir in this.cmds) { + for (const cmd of this.cmds[dir as keyof BidiCommands]) { + defs.push(`\\def\\${cmd}#1{\\class{mjx-${dir.toLowerCase()}}{#1}}`); + } } + window.MathJax.tex2chtml(defs.join('\n'), { display: false }); + + // // Re-typeset existing math + // if (window.MathJax.typesetPromise) { + // await window.MathJax.typesetPromise(); + // } // Patch styles after initial MathJax stylesheet flush await finishRenderMath(); @@ -34,55 +90,105 @@ export default class RtlMathTextPlugin extends Plugin { // Patch styles on MathJax stylesheet change this.mathjaxStyleObserver = new MutationObserver(() => this.patchStyles()); - this.mathjaxStyleObserver.observe(getMathJaxStyleElement(), { + this.mathjaxStyleObserver.observe(this.getMathJaxStyleElement(), { attributes: true, }); } - onunload() { + destroy() { this.mathjaxStyleObserver?.disconnect(); this.styleEl?.remove(); } - patchStyles() { - const rules = convertMathJaxStylesToLogicalProperties(); + private patchStyles() { + const rules = this.convertMathJaxStylesToLogicalProperties(); this.styleEl?.remove(); this.styleEl = document.head.createEl('style', { text: rules.join('\n') }); } -} -function getMathJaxStyleElement() { - return document.getElementById('MJX-CHTML-styles') as HTMLStyleElement; -} - -function convertMathJaxStylesToLogicalProperties(): string[] { - const rules: string[] = []; - const styleEl = getMathJaxStyleElement(); - - if (!styleEl || !styleEl.sheet) return rules; - - for (const rule of Array.from(styleEl.sheet.cssRules)) { - if (!(rule instanceof CSSStyleRule)) continue; - - const styleLines: string[] = []; - - const paddingLeft = rule.style.getPropertyValue('padding-left'); - const paddingRight = rule.style.getPropertyValue('padding-right'); - const marginLeft = rule.style.getPropertyValue('margin-left'); - const marginRight = rule.style.getPropertyValue('margin-right'); - - if (paddingLeft) styleLines.push(`padding-inline-start: ${paddingLeft};`); - if (paddingRight) styleLines.push(`padding-inline-end: ${paddingRight};`); - if (marginLeft) styleLines.push(`margin-inline-start: ${marginLeft};`); - if (marginRight) styleLines.push(`margin-inline-end: ${marginRight};`); - - if (styleLines.length > 0) { - const newRule = `${rule.selectorText} {\n ${styleLines.join('\n ')}\n}`; - rules.push(newRule); - } + private getMathJaxStyleElement() { + return document.getElementById('MJX-CHTML-styles') as HTMLStyleElement; } - return rules; + private convertMathJaxStylesToLogicalProperties(): string[] { + const rules: string[] = []; + const styleEl = this.getMathJaxStyleElement(); + + if (!styleEl || !styleEl.sheet) return rules; + + for (const rule of Array.from(styleEl.sheet.cssRules)) { + if (!(rule instanceof CSSStyleRule)) continue; + + const styleLines: string[] = []; + + const paddingLeft = rule.style.getPropertyValue('padding-left'); + const paddingRight = rule.style.getPropertyValue('padding-right'); + const marginLeft = rule.style.getPropertyValue('margin-left'); + const marginRight = rule.style.getPropertyValue('margin-right'); + + if (paddingLeft) styleLines.push(`padding-inline-start: ${paddingLeft};`); + if (paddingRight) styleLines.push(`padding-inline-end: ${paddingRight};`); + if (marginLeft) styleLines.push(`margin-inline-start: ${marginLeft};`); + if (marginRight) styleLines.push(`margin-inline-end: ${marginRight};`); + + if (styleLines.length > 0) { + const newRule = `${rule.selectorText} {\n ${styleLines.join('\n ')}\n}`; + rules.push(newRule); + } + } + + return rules; + } +} + +class RtlMathTextSettingsTab extends PluginSettingTab { + plugin: RtlMathTextPlugin; + + constructor(app: App, plugin: RtlMathTextPlugin) { + super(app, plugin); + this.plugin = plugin; + } + + display(): void { + const { containerEl } = this; + containerEl.empty(); + + containerEl.createEl('p', { + text: 'Changes may require restarting Obsidian to take full effect.', + cls: 'setting-item-description' + }); + + const cmds = this.plugin.settings.cmds; + for (const dir in cmds) { + new Setting(containerEl) + .setName(`${dir} commands`) + .setDesc(`Comma-separated list of commands for ${dir}`) + .addText(text => + text + .setPlaceholder(dir === 'RTL' ? 'e.g. R, RLE' : 'e.g. L, LRE') + .setValue(cmds[dir as keyof BidiCommands].join(', ')) + .onChange(debounce( + async (val) => { + cmds[dir as keyof BidiCommands] = val + .split(',') + .map(s => s.trim()) + .filter(Boolean); + await this.plugin.saveSettings(); + }, 2000, true)) + ); + } + + new Setting(containerEl) + .addButton(btn => + btn + .setButtonText('Restore Defaults') + .onClick(async () => { + this.plugin.settings.cmds = { ...DEFAULT_CMDS }; + await this.plugin.saveSettings(); + this.display(); + }) + ); + } } diff --git a/manifest.json b/manifest.json index d9e7f20..df0c767 100644 --- a/manifest.json +++ b/manifest.json @@ -3,7 +3,7 @@ "name": "RTL Math Text", "version": "0.0.1", "minAppVersion": "0.16.0", - "description": "Mix right-to-left and left-to-right text in math expressions with \\R{} (RTL) and \\L{} (LTR).", + "description": "Mix right-to-left and left-to-right text in math expressions using configurable commands (default: \\R{} for RTL and \\L{} for LTR).", "author": "orelby", "authorUrl": "", "isDesktopOnly": false diff --git a/styles.css b/styles.css index 81bea15..77f0886 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,8 @@ -.mjx-rtl{ +.mjx-rtl { direction: rtl; } .mjx-ltr, -.mjx-rtl :where(:not(.mjx-rtl, mjx-mtext, mjx-c)) { +.mjx-rtl :where(:not(.mjx-rtl, mjx-mtext, mjx-c, mjx-utext)) { direction: ltr; }