Improve tooltip docs with Markdown styling and refined math node explanations (#3488)

frontend/src/state-providers/app-window.ts

@@ -9,7 +9,7 @@ export function createAppWindowState(editor: Editor) {
 		maximized: false,
 		fullscreen: false,
 		viewportHolePunch: false,
-		uiScale: 1.0,
+		uiScale: 1,
 	});
 
 	// Set up message subscriptions on creation

frontend/src/state-providers/tooltip.ts

@@ -1,12 +1,18 @@
 import { writable } from "svelte/store";
 
+import { type Editor } from "@graphite/editor";
+import { SendShortcutAltClick, SendShortcutF11, SendShortcutShiftClick, type ActionShortcut } from "@graphite/messages";
+
 const SHOW_TOOLTIP_DELAY_MS = 500;
 
-export function createTooltipState() {
+export function createTooltipState(editor: Editor) {
 	const { subscribe, update } = writable({
 		visible: false,
 		element: undefined as Element | undefined,
 		position: { x: 0, y: 0 },
+		shiftClickShortcut: undefined as ActionShortcut | undefined,
+		altClickShortcut: undefined as ActionShortcut | undefined,
+		f11Shortcut: undefined as ActionShortcut | undefined,
 	});
 
 	let tooltipTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
@@ -45,6 +51,25 @@ export function createTooltipState() {
 		}, SHOW_TOOLTIP_DELAY_MS);
 	});
 
+	editor.subscriptions.subscribeJsMessage(SendShortcutShiftClick, async (data) => {
+		update((state) => {
+			state.shiftClickShortcut = data.shortcut;
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(SendShortcutAltClick, async (data) => {
+		update((state) => {
+			state.altClickShortcut = data.shortcut;
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(SendShortcutF11, async (data) => {
+		update((state) => {
+			state.f11Shortcut = data.shortcut;
+			return state;
+		});
+	});
+
 	document.addEventListener("mousedown", closeTooltip);
 	document.addEventListener("keydown", closeTooltip);