mirror of
https://github.com/orelby/obsidian-rtl-math-text-plugin.git
synced 2026-07-22 05:48:01 +00:00
Initial working version
This commit is contained in:
orelby
parent
de4a919043
commit
a55177fc4d
2 changed files with 74 additions and 120 deletions
180
main.ts
180
main.ts
|
|
@ -1,134 +1,88 @@
|
|||
import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
|
||||
import { Plugin, loadMathJax, finishRenderMath } from 'obsidian';
|
||||
|
||||
// Remember to rename these classes and interfaces!
|
||||
|
||||
interface MyPluginSettings {
|
||||
mySetting: string;
|
||||
declare global {
|
||||
interface Window {
|
||||
MathJax: any;
|
||||
}
|
||||
}
|
||||
|
||||
const DEFAULT_SETTINGS: MyPluginSettings = {
|
||||
mySetting: 'default'
|
||||
}
|
||||
|
||||
export default class MyPlugin extends Plugin {
|
||||
settings: MyPluginSettings;
|
||||
export default class RtlMathTextPlugin extends Plugin {
|
||||
private mathjaxStyleObserver?: MutationObserver;
|
||||
private styleEl?: HTMLStyleElement;
|
||||
|
||||
async onload() {
|
||||
await this.loadSettings();
|
||||
await loadMathJax();
|
||||
|
||||
// This creates an icon in the left ribbon.
|
||||
const ribbonIconEl = this.addRibbonIcon('dice', 'Sample Plugin', (evt: MouseEvent) => {
|
||||
// Called when the user clicks the icon.
|
||||
new Notice('This is a notice!');
|
||||
// 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();
|
||||
}
|
||||
|
||||
// Patch styles after initial MathJax stylesheet flush
|
||||
await finishRenderMath();
|
||||
this.patchStyles();
|
||||
|
||||
// Patch styles on MathJax stylesheet change
|
||||
this.mathjaxStyleObserver = new MutationObserver(() => this.patchStyles());
|
||||
this.mathjaxStyleObserver.observe(getMathJaxStyleElement(), {
|
||||
attributes: true,
|
||||
});
|
||||
// Perform additional things with the ribbon
|
||||
ribbonIconEl.addClass('my-plugin-ribbon-class');
|
||||
|
||||
// This adds a status bar item to the bottom of the app. Does not work on mobile apps.
|
||||
const statusBarItemEl = this.addStatusBarItem();
|
||||
statusBarItemEl.setText('Status Bar Text');
|
||||
|
||||
// This adds a simple command that can be triggered anywhere
|
||||
this.addCommand({
|
||||
id: 'open-sample-modal-simple',
|
||||
name: 'Open sample modal (simple)',
|
||||
callback: () => {
|
||||
new SampleModal(this.app).open();
|
||||
}
|
||||
});
|
||||
// This adds an editor command that can perform some operation on the current editor instance
|
||||
this.addCommand({
|
||||
id: 'sample-editor-command',
|
||||
name: 'Sample editor command',
|
||||
editorCallback: (editor: Editor, view: MarkdownView) => {
|
||||
console.log(editor.getSelection());
|
||||
editor.replaceSelection('Sample Editor Command');
|
||||
}
|
||||
});
|
||||
// This adds a complex command that can check whether the current state of the app allows execution of the command
|
||||
this.addCommand({
|
||||
id: 'open-sample-modal-complex',
|
||||
name: 'Open sample modal (complex)',
|
||||
checkCallback: (checking: boolean) => {
|
||||
// Conditions to check
|
||||
const markdownView = this.app.workspace.getActiveViewOfType(MarkdownView);
|
||||
if (markdownView) {
|
||||
// If checking is true, we're simply "checking" if the command can be run.
|
||||
// If checking is false, then we want to actually perform the operation.
|
||||
if (!checking) {
|
||||
new SampleModal(this.app).open();
|
||||
}
|
||||
|
||||
// This command will only show up in Command Palette when the check function returns true
|
||||
return true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// This adds a settings tab so the user can configure various aspects of the plugin
|
||||
this.addSettingTab(new SampleSettingTab(this.app, this));
|
||||
|
||||
// If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin)
|
||||
// Using this function will automatically remove the event listener when this plugin is disabled.
|
||||
this.registerDomEvent(document, 'click', (evt: MouseEvent) => {
|
||||
console.log('click', evt);
|
||||
});
|
||||
|
||||
// When registering intervals, this function will automatically clear the interval when the plugin is disabled.
|
||||
this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000));
|
||||
}
|
||||
|
||||
onunload() {
|
||||
|
||||
this.mathjaxStyleObserver?.disconnect();
|
||||
this.styleEl?.remove();
|
||||
}
|
||||
|
||||
async loadSettings() {
|
||||
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
|
||||
}
|
||||
|
||||
async saveSettings() {
|
||||
await this.saveData(this.settings);
|
||||
patchStyles() {
|
||||
const rules = convertMathJaxStylesToLogicalProperties();
|
||||
this.styleEl?.remove();
|
||||
this.styleEl = document.head.createEl('style', {
|
||||
text: rules.join('\n')
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class SampleModal extends Modal {
|
||||
constructor(app: App) {
|
||||
super(app);
|
||||
}
|
||||
|
||||
onOpen() {
|
||||
const {contentEl} = this;
|
||||
contentEl.setText('Woah!');
|
||||
}
|
||||
|
||||
onClose() {
|
||||
const {contentEl} = this;
|
||||
contentEl.empty();
|
||||
}
|
||||
function getMathJaxStyleElement() {
|
||||
return document.getElementById('MJX-CHTML-styles') as HTMLStyleElement;
|
||||
}
|
||||
|
||||
class SampleSettingTab extends PluginSettingTab {
|
||||
plugin: MyPlugin;
|
||||
function convertMathJaxStylesToLogicalProperties(): string[] {
|
||||
const rules: string[] = [];
|
||||
const styleEl = getMathJaxStyleElement();
|
||||
|
||||
constructor(app: App, plugin: MyPlugin) {
|
||||
super(app, plugin);
|
||||
this.plugin = plugin;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
display(): void {
|
||||
const {containerEl} = this;
|
||||
|
||||
containerEl.empty();
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName('Setting #1')
|
||||
.setDesc('It\'s a secret')
|
||||
.addText(text => text
|
||||
.setPlaceholder('Enter your secret')
|
||||
.setValue(this.plugin.settings.mySetting)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.mySetting = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
}
|
||||
return rules;
|
||||
}
|
||||
|
|
|
|||
14
styles.css
14
styles.css
|
|
@ -1,8 +1,8 @@
|
|||
/*
|
||||
.mjx-rtl{
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
This CSS file will be included with your plugin, and
|
||||
available in the app when your plugin is enabled.
|
||||
|
||||
If your plugin does not need CSS, delete this file.
|
||||
|
||||
*/
|
||||
.mjx-ltr,
|
||||
.mjx-rtl :where(:not(.mjx-rtl, mjx-mtext, mjx-c)) {
|
||||
direction: ltr;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue