Merge pull request #257 from bdm-k/tooltip-position

Make the math tooltip appear below the line
artisticat1 · Feb 23, 2024 · 1cae1a1 · 1cae1a1
2 parents 3b13c41 + 5c75a02
commit 1cae1a1
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/src/editor_extensions/math_tooltip.ts b/src/editor_extensions/math_tooltip.ts
@@ -2,6 +2,7 @@ import { Tooltip, showTooltip, EditorView } from "@codemirror/view";
 import { StateField, EditorState } from "@codemirror/state";
 import { renderMath, finishRenderMath, editorLivePreviewField } from "obsidian";
 import { Context } from "src/utils/context";
+import { getLatexSuiteConfig } from "src/snippets/codemirror/config";
 
 export const cursorTooltipField = StateField.define<readonly Tooltip[]>({
 	create: getCursorTooltips,
@@ -15,6 +16,7 @@ export const cursorTooltipField = StateField.define<readonly Tooltip[]>({
 });
 
 function getCursorTooltips(state: EditorState): readonly Tooltip[] {
+	const settings = getLatexSuiteConfig(state);
 	const ctx = Context.fromState(state);
 
 	if (!ctx.mode.inMath()) {
@@ -34,8 +36,8 @@ function getCursorTooltips(state: EditorState): readonly Tooltip[] {
 
 	return [
 		{
-			pos: bounds.start,
-			above: true,
+			pos: (ctx.mode.inlineMath || settings.mathPreviewPositionIsAbove) ? bounds.start : bounds.end,
+			above: settings.mathPreviewPositionIsAbove,
 			strictSide: true,
 			arrow: true,
 			create: () => {
@@ -62,9 +64,11 @@ export const cursorTooltipBaseTheme = EditorView.baseTheme({
 		borderRadius: "6px",
 		"& .cm-tooltip-arrow:before": {
 			borderTopColor: "var(--background-modifier-border-hover)",
+			borderBottomColor: "var(--background-modifier-border-hover)",
 		},
 		"& .cm-tooltip-arrow:after": {
 			borderTopColor: "var(--background-secondary)",
+			borderBottomColor: "var(--background-secondary)",
 		},
 		"& p": {
 			margin: "0px",

diff --git a/src/settings/settings.ts b/src/settings/settings.ts
@@ -14,6 +14,7 @@ interface LatexSuiteBasicSettings {
 	colorPairedBracketsEnabled: boolean;
 	highlightCursorBracketsEnabled: boolean;
 	mathPreviewEnabled: boolean;
+	mathPreviewPositionIsAbove: boolean;
 	autofractionSymbol: string;
 	autofractionBreakingChars: string;
 	matrixShortcutsEnabled: boolean;
@@ -57,6 +58,7 @@ export const DEFAULT_SETTINGS: LatexSuitePluginSettings = {
 	colorPairedBracketsEnabled: true,
 	highlightCursorBracketsEnabled: true,
 	mathPreviewEnabled: true,
+	mathPreviewPositionIsAbove: true,
 	autofractionEnabled: true,
 	autofractionSymbol: "\\frac",
 	autofractionBreakingChars: "+-=\t",

diff --git a/src/settings/settings_tab.ts b/src/settings/settings_tab.ts
@@ -149,7 +149,6 @@ export class LatexSuiteSettingTab extends PluginSettingTab {
 					.setValue(this.plugin.settings.concealEnabled)
 					.onChange(async (value) => {
 						this.plugin.settings.concealEnabled = value;
-						this.plugin.refreshCMExtensions();
 						await this.plugin.saveSettings();
 					})
 				);
@@ -165,8 +164,6 @@ export class LatexSuiteSettingTab extends PluginSettingTab {
 				.setValue(this.plugin.settings.colorPairedBracketsEnabled)
 				.onChange(async (value) => {
 					this.plugin.settings.colorPairedBracketsEnabled = value;
-
-					this.plugin.refreshCMExtensions();
 					await this.plugin.saveSettings();
 				}));
 		new Setting(containerEl)
@@ -176,7 +173,6 @@ export class LatexSuiteSettingTab extends PluginSettingTab {
 				.setValue(this.plugin.settings.highlightCursorBracketsEnabled)
 				.onChange(async (value) => {
 					this.plugin.settings.highlightCursorBracketsEnabled = value;
-					this.plugin.refreshCMExtensions();
 					await this.plugin.saveSettings();
 				}));
 
@@ -189,7 +185,6 @@ export class LatexSuiteSettingTab extends PluginSettingTab {
 		const popup_space = document.createElement("br");
 		const popup_line4 = document.createElement("div");
 		popup_line4.setText("The popup preview will be shown for all inline math equations, as well as for block math equations in Source mode.");
-
 		popup_fragment.append(popup_line1, popup_space, popup_line4);
 
 		new Setting(containerEl)
@@ -199,10 +194,22 @@ export class LatexSuiteSettingTab extends PluginSettingTab {
 				.setValue(this.plugin.settings.mathPreviewEnabled)
 				.onChange(async (value) => {
 					this.plugin.settings.mathPreviewEnabled = value;
-					this.plugin.refreshCMExtensions();
+
 					await this.plugin.saveSettings();
 				}));
 
+		const mathPreviewPositionSetting = new Setting(containerEl)
+      .setName("Position")
+      .setDesc("Where to display the popup preview relative to the equation source.")
+      .addDropdown((dropdown) => dropdown
+		.addOption("Above", "Above")
+        .addOption("Below", "Below")
+        .setValue(this.plugin.settings.mathPreviewPositionIsAbove ? "Above" : "Below")
+        .onChange(async (value) => {
+          this.plugin.settings.mathPreviewPositionIsAbove = (value === "Above");
+          await this.plugin.saveSettings();
+        })
+      );
 
 		this.addHeading(containerEl, "Auto-fraction", "math-x-divide-y-2");