Add sticky note support to obsidian

dist/birb.js

@@ -70,8 +70,9 @@
 	 * @param {HTMLElement|null} element The element to detect drag events on
 	 * @param {boolean} [parent] Whether to move the parent element when the child is dragged
 	 * @param {(top: number, left: number) => void} [callback] Callback for when element is moved
+	 * @param {HTMLElement} [pageElement] The page element to constrain movement within
 	 */
-	function makeDraggable(element, parent = true, callback = () => { }) {
+	function makeDraggable(element, parent = true, callback = () => { }, pageElement) {
 		if (!element) {
 			return;
 		}
@@ -117,9 +118,12 @@
 		});
 
 		document.addEventListener("mousemove", (e) => {
+			const page = pageElement || document.documentElement;
+			const maxX = page.scrollWidth - elementToMove.clientWidth;
+			const maxY = page.scrollHeight - elementToMove.clientHeight;
 			if (isMouseDown) {
-				elementToMove.style.left = `${Math.max(0, e.clientX - offsetX)}px`;
+				elementToMove.style.left = `${Math.max(0, Math.min(maxX, e.clientX - offsetX))}px`;
-				elementToMove.style.top = `${Math.max(0, e.clientY - offsetY)}px`;
+				elementToMove.style.top = `${Math.max(0, Math.min(maxY, e.clientY - offsetY))}px`;
 			}
 		});
 
@@ -840,6 +844,7 @@
 	}
 
 	const SAVE_KEY = "birbSaveData";
+	const ROOT_PATH = "";
 
 	/**
 	 * @typedef {import('./application.js').BirbSaveData} BirbSaveData
@@ -1070,7 +1075,6 @@
 	}
 
 	class ObsidianContext extends Context {
-
 		/**
 		 * @override
 		 * @returns {boolean}
@@ -1085,8 +1089,12 @@
 		 * @returns {Promise<BirbSaveData|{}>}
 		 */
 		async getSaveData() {
-			// @ts-expect-error
+			return new Promise((resolve) => {
-			return await OBSIDIAN_PLUGIN.loadData() ?? {};
+				// @ts-expect-error
+				OBSIDIAN_PLUGIN.loadData().then((data) => {
+					resolve(data ?? {});
+				});
+			});
 		}
 
 		/**
@@ -1095,7 +1103,7 @@
 		 */
 		async putSaveData(saveData) {
 			// @ts-expect-error
-			return await OBSIDIAN_PLUGIN.saveData(saveData);
+			await OBSIDIAN_PLUGIN.saveData(saveData);
 		}
 
 		/** @override */
@@ -1116,8 +1124,36 @@
 		}
 
 		/** @override */
-		areStickyNotesEnabled() {
+		getPath() {
-			return false;
+			// @ts-expect-error
+			const file = app.workspace.getActiveFile();
+			if (file && this.getActiveEditorElement()) {
+				return file.path;
+			} else {
+				return ROOT_PATH;
+			}
+		}
+
+		/** @override */
+		getActivePage() {
+			if (this.getPath() === ROOT_PATH) {
+				// Root page, use document element
+				return document.documentElement
+			}
+			return this.getActiveEditorElement() ?? document.documentElement;
+		}
+
+		/** @override */
+		isPathApplicable(path) {
+			return path === this.getPath();
+		}
+
+		/** @returns {HTMLElement|null} */
+		getActiveEditorElement() {
+			// @ts-expect-error
+			const activeLeaf = app.workspace.activeLeaf;
+			const leafElement = activeLeaf?.view?.containerEl;
+			return leafElement?.querySelector(".cm-scroller") ?? null;
 		}
 	}
 
@@ -1217,7 +1253,7 @@
 			stickyNote.top = top;
 			stickyNote.left = left;
 			onSave();
-		});
+		}, page);
 
 		if (closeButton) {
 			makeClosable(() => {
@@ -1574,6 +1610,7 @@
 	flex-grow: 1;
 	user-select: none;
 	color: var(--birb-background-color);
+	white-space: nowrap;
 }
 
 .birb-window-close {
@@ -1815,7 +1852,7 @@
 	const AFK_TIME = isDebug() ? 0 : 1000 * 5;
 	const PET_BOOST_DURATION = 1000 * 60 * 5;
 	const PET_MENU_COOLDOWN = 1000;
-	const URL_CHECK_INTERVAL = 500;
+	const URL_CHECK_INTERVAL = 250;
 	const HOP_DELAY = 500;
 
 	// Random event chances per tick
@@ -1957,7 +1994,7 @@
 				insertModal(`${birdBirb()} Mode`, message);
 			}),
 			new Separator(),
-			new MenuItem("2025.11.13.80", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.11.13.80"); }, false),
+			new MenuItem("2025.11.14.16", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.11.14.16"); }, false),
 		];
 
 		const styleElement = document.createElement("style");
@@ -2156,7 +2193,7 @@
 			setInterval(() => {
 				const currentPath = getContext().getPath().split("?")[0];
 				if (currentPath !== lastPath) {
-					log("Path changed, updating sticky notes");
+					log("Path changed, updating sticky notes: " + currentPath);
 					lastPath = currentPath;
 					drawStickyNotes(stickyNotes, save, deleteStickyNote);
 				}

dist/extension/birb.js

@@ -70,8 +70,9 @@
 	 * @param {HTMLElement|null} element The element to detect drag events on
 	 * @param {boolean} [parent] Whether to move the parent element when the child is dragged
 	 * @param {(top: number, left: number) => void} [callback] Callback for when element is moved
+	 * @param {HTMLElement} [pageElement] The page element to constrain movement within
 	 */
-	function makeDraggable(element, parent = true, callback = () => { }) {
+	function makeDraggable(element, parent = true, callback = () => { }, pageElement) {
 		if (!element) {
 			return;
 		}
@@ -117,9 +118,12 @@
 		});
 
 		document.addEventListener("mousemove", (e) => {
+			const page = pageElement || document.documentElement;
+			const maxX = page.scrollWidth - elementToMove.clientWidth;
+			const maxY = page.scrollHeight - elementToMove.clientHeight;
 			if (isMouseDown) {
-				elementToMove.style.left = `${Math.max(0, e.clientX - offsetX)}px`;
+				elementToMove.style.left = `${Math.max(0, Math.min(maxX, e.clientX - offsetX))}px`;
-				elementToMove.style.top = `${Math.max(0, e.clientY - offsetY)}px`;
+				elementToMove.style.top = `${Math.max(0, Math.min(maxY, e.clientY - offsetY))}px`;
 			}
 		});
 
@@ -840,6 +844,7 @@
 	}
 
 	const SAVE_KEY = "birbSaveData";
+	const ROOT_PATH = "";
 
 	/**
 	 * @typedef {import('./application.js').BirbSaveData} BirbSaveData
@@ -1070,7 +1075,6 @@
 	}
 
 	class ObsidianContext extends Context {
-
 		/**
 		 * @override
 		 * @returns {boolean}
@@ -1085,8 +1089,12 @@
 		 * @returns {Promise<BirbSaveData|{}>}
 		 */
 		async getSaveData() {
-			// @ts-expect-error
+			return new Promise((resolve) => {
-			return await OBSIDIAN_PLUGIN.loadData() ?? {};
+				// @ts-expect-error
+				OBSIDIAN_PLUGIN.loadData().then((data) => {
+					resolve(data ?? {});
+				});
+			});
 		}
 
 		/**
@@ -1095,7 +1103,7 @@
 		 */
 		async putSaveData(saveData) {
 			// @ts-expect-error
-			return await OBSIDIAN_PLUGIN.saveData(saveData);
+			await OBSIDIAN_PLUGIN.saveData(saveData);
 		}
 
 		/** @override */
@@ -1116,8 +1124,36 @@
 		}
 
 		/** @override */
-		areStickyNotesEnabled() {
+		getPath() {
-			return false;
+			// @ts-expect-error
+			const file = app.workspace.getActiveFile();
+			if (file && this.getActiveEditorElement()) {
+				return file.path;
+			} else {
+				return ROOT_PATH;
+			}
+		}
+
+		/** @override */
+		getActivePage() {
+			if (this.getPath() === ROOT_PATH) {
+				// Root page, use document element
+				return document.documentElement
+			}
+			return this.getActiveEditorElement() ?? document.documentElement;
+		}
+
+		/** @override */
+		isPathApplicable(path) {
+			return path === this.getPath();
+		}
+
+		/** @returns {HTMLElement|null} */
+		getActiveEditorElement() {
+			// @ts-expect-error
+			const activeLeaf = app.workspace.activeLeaf;
+			const leafElement = activeLeaf?.view?.containerEl;
+			return leafElement?.querySelector(".cm-scroller") ?? null;
 		}
 	}
 
@@ -1217,7 +1253,7 @@
 			stickyNote.top = top;
 			stickyNote.left = left;
 			onSave();
-		});
+		}, page);
 
 		if (closeButton) {
 			makeClosable(() => {
@@ -1574,6 +1610,7 @@
 	flex-grow: 1;
 	user-select: none;
 	color: var(--birb-background-color);
+	white-space: nowrap;
 }
 
 .birb-window-close {
@@ -1815,7 +1852,7 @@
 	const AFK_TIME = isDebug() ? 0 : 1000 * 5;
 	const PET_BOOST_DURATION = 1000 * 60 * 5;
 	const PET_MENU_COOLDOWN = 1000;
-	const URL_CHECK_INTERVAL = 500;
+	const URL_CHECK_INTERVAL = 250;
 	const HOP_DELAY = 500;
 
 	// Random event chances per tick
@@ -1957,7 +1994,7 @@
 				insertModal(`${birdBirb()} Mode`, message);
 			}),
 			new Separator(),
-			new MenuItem("2025.11.13.80", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.11.13.80"); }, false),
+			new MenuItem("2025.11.14.16", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.11.14.16"); }, false),
 		];
 
 		const styleElement = document.createElement("style");
@@ -2156,7 +2193,7 @@
 			setInterval(() => {
 				const currentPath = getContext().getPath().split("?")[0];
 				if (currentPath !== lastPath) {
-					log("Path changed, updating sticky notes");
+					log("Path changed, updating sticky notes: " + currentPath);
 					lastPath = currentPath;
 					drawStickyNotes(stickyNotes, save, deleteStickyNote);
 				}

dist/extension/manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "Pocket Bird",
     "description": "It's a pet bird in your browser, what more could you want?",
-    "version": "2025.11.13.80",
+    "version": "2025.11.14.16",
     "homepage_url": "https://idreesinc.com",
     "icons": {
         "48": "images/icons/transparent/48x48x1.png",

dist/obsidian/main.js

@@ -2,7 +2,7 @@
 const { Plugin, Notice } = require('obsidian');
 module.exports = class PocketBird extends Plugin {
 	onload() {
-		console.log("Loading Pocket Bird version 2025.11.13.80...");
+		console.log("Loading Pocket Bird version 2025.11.14.16...");
 		const OBSIDIAN_PLUGIN = this;
 		(function () {
 	'use strict';
@@ -76,8 +76,9 @@ module.exports = class PocketBird extends Plugin {
 	 * @param {HTMLElement|null} element The element to detect drag events on
 	 * @param {boolean} [parent] Whether to move the parent element when the child is dragged
 	 * @param {(top: number, left: number) => void} [callback] Callback for when element is moved
+	 * @param {HTMLElement} [pageElement] The page element to constrain movement within
 	 */
-	function makeDraggable(element, parent = true, callback = () => { }) {
+	function makeDraggable(element, parent = true, callback = () => { }, pageElement) {
 		if (!element) {
 			return;
 		}
@@ -123,9 +124,12 @@ module.exports = class PocketBird extends Plugin {
 		});
 
 		document.addEventListener("mousemove", (e) => {
+			const page = pageElement || document.documentElement;
+			const maxX = page.scrollWidth - elementToMove.clientWidth;
+			const maxY = page.scrollHeight - elementToMove.clientHeight;
 			if (isMouseDown) {
-				elementToMove.style.left = `${Math.max(0, e.clientX - offsetX)}px`;
+				elementToMove.style.left = `${Math.max(0, Math.min(maxX, e.clientX - offsetX))}px`;
-				elementToMove.style.top = `${Math.max(0, e.clientY - offsetY)}px`;
+				elementToMove.style.top = `${Math.max(0, Math.min(maxY, e.clientY - offsetY))}px`;
 			}
 		});
 
@@ -846,6 +850,7 @@ module.exports = class PocketBird extends Plugin {
 	}
 
 	const SAVE_KEY = "birbSaveData";
+	const ROOT_PATH = "";
 
 	/**
 	 * @typedef {import('./application.js').BirbSaveData} BirbSaveData
@@ -1076,7 +1081,6 @@ module.exports = class PocketBird extends Plugin {
 	}
 
 	class ObsidianContext extends Context {
-
 		/**
 		 * @override
 		 * @returns {boolean}
@@ -1091,8 +1095,12 @@ module.exports = class PocketBird extends Plugin {
 		 * @returns {Promise<BirbSaveData|{}>}
 		 */
 		async getSaveData() {
-			// @ts-expect-error
+			return new Promise((resolve) => {
-			return await OBSIDIAN_PLUGIN.loadData() ?? {};
+				// @ts-expect-error
+				OBSIDIAN_PLUGIN.loadData().then((data) => {
+					resolve(data ?? {});
+				});
+			});
 		}
 
 		/**
@@ -1101,7 +1109,7 @@ module.exports = class PocketBird extends Plugin {
 		 */
 		async putSaveData(saveData) {
 			// @ts-expect-error
-			return await OBSIDIAN_PLUGIN.saveData(saveData);
+			await OBSIDIAN_PLUGIN.saveData(saveData);
 		}
 
 		/** @override */
@@ -1122,8 +1130,36 @@ module.exports = class PocketBird extends Plugin {
 		}
 
 		/** @override */
-		areStickyNotesEnabled() {
+		getPath() {
-			return false;
+			// @ts-expect-error
+			const file = app.workspace.getActiveFile();
+			if (file && this.getActiveEditorElement()) {
+				return file.path;
+			} else {
+				return ROOT_PATH;
+			}
+		}
+
+		/** @override */
+		getActivePage() {
+			if (this.getPath() === ROOT_PATH) {
+				// Root page, use document element
+				return document.documentElement
+			}
+			return this.getActiveEditorElement() ?? document.documentElement;
+		}
+
+		/** @override */
+		isPathApplicable(path) {
+			return path === this.getPath();
+		}
+
+		/** @returns {HTMLElement|null} */
+		getActiveEditorElement() {
+			// @ts-expect-error
+			const activeLeaf = app.workspace.activeLeaf;
+			const leafElement = activeLeaf?.view?.containerEl;
+			return leafElement?.querySelector(".cm-scroller") ?? null;
 		}
 	}
 
@@ -1223,7 +1259,7 @@ module.exports = class PocketBird extends Plugin {
 			stickyNote.top = top;
 			stickyNote.left = left;
 			onSave();
-		});
+		}, page);
 
 		if (closeButton) {
 			makeClosable(() => {
@@ -1580,6 +1616,7 @@ module.exports = class PocketBird extends Plugin {
 	flex-grow: 1;
 	user-select: none;
 	color: var(--birb-background-color);
+	white-space: nowrap;
 }
 
 .birb-window-close {
@@ -1821,7 +1858,7 @@ module.exports = class PocketBird extends Plugin {
 	const AFK_TIME = isDebug() ? 0 : 1000 * 5;
 	const PET_BOOST_DURATION = 1000 * 60 * 5;
 	const PET_MENU_COOLDOWN = 1000;
-	const URL_CHECK_INTERVAL = 500;
+	const URL_CHECK_INTERVAL = 250;
 	const HOP_DELAY = 500;
 
 	// Random event chances per tick
@@ -1963,7 +2000,7 @@ module.exports = class PocketBird extends Plugin {
 				insertModal(`${birdBirb()} Mode`, message);
 			}),
 			new Separator(),
-			new MenuItem("2025.11.13.80", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.11.13.80"); }, false),
+			new MenuItem("2025.11.14.16", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.11.14.16"); }, false),
 		];
 
 		const styleElement = document.createElement("style");
@@ -2162,7 +2199,7 @@ module.exports = class PocketBird extends Plugin {
 			setInterval(() => {
 				const currentPath = getContext().getPath().split("?")[0];
 				if (currentPath !== lastPath) {
-					log("Path changed, updating sticky notes");
+					log("Path changed, updating sticky notes: " + currentPath);
 					lastPath = currentPath;
 					drawStickyNotes(stickyNotes, save, deleteStickyNote);
 				}

dist/obsidian/manifest.json

@@ -1,7 +1,7 @@
 {
     "id": "pocket-bird",
     "name": "Pocket Bird",
-    "version": "2025.11.13.80",
+    "version": "2025.11.14.16",
     "minAppVersion": "0.15.0",
     "description": "It's a pet bird in your Obsidian, what more could you want?",
     "author": "Idrees Hassan",

dist/userscript/birb.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Pocket Bird
 // @namespace    https://idreesinc.com
-// @version      2025.11.13.80
+// @version      2025.11.14.16
 // @description  It's a bird that hops around your web browser, the future is here 
 // @author       Idrees
 // @downloadURL  https://github.com/IdreesInc/Pocket-Bird/raw/refs/heads/main/dist/userscript/birb.user.js
@@ -84,8 +84,9 @@
 	 * @param {HTMLElement|null} element The element to detect drag events on
 	 * @param {boolean} [parent] Whether to move the parent element when the child is dragged
 	 * @param {(top: number, left: number) => void} [callback] Callback for when element is moved
+	 * @param {HTMLElement} [pageElement] The page element to constrain movement within
 	 */
-	function makeDraggable(element, parent = true, callback = () => { }) {
+	function makeDraggable(element, parent = true, callback = () => { }, pageElement) {
 		if (!element) {
 			return;
 		}
@@ -131,9 +132,12 @@
 		});
 
 		document.addEventListener("mousemove", (e) => {
+			const page = pageElement || document.documentElement;
+			const maxX = page.scrollWidth - elementToMove.clientWidth;
+			const maxY = page.scrollHeight - elementToMove.clientHeight;
 			if (isMouseDown) {
-				elementToMove.style.left = `${Math.max(0, e.clientX - offsetX)}px`;
+				elementToMove.style.left = `${Math.max(0, Math.min(maxX, e.clientX - offsetX))}px`;
-				elementToMove.style.top = `${Math.max(0, e.clientY - offsetY)}px`;
+				elementToMove.style.top = `${Math.max(0, Math.min(maxY, e.clientY - offsetY))}px`;
 			}
 		});
 
@@ -854,6 +858,7 @@
 	}
 
 	const SAVE_KEY = "birbSaveData";
+	const ROOT_PATH = "";
 
 	/**
 	 * @typedef {import('./application.js').BirbSaveData} BirbSaveData
@@ -1084,7 +1089,6 @@
 	}
 
 	class ObsidianContext extends Context {
-
 		/**
 		 * @override
 		 * @returns {boolean}
@@ -1099,8 +1103,12 @@
 		 * @returns {Promise<BirbSaveData|{}>}
 		 */
 		async getSaveData() {
-			// @ts-expect-error
+			return new Promise((resolve) => {
-			return await OBSIDIAN_PLUGIN.loadData() ?? {};
+				// @ts-expect-error
+				OBSIDIAN_PLUGIN.loadData().then((data) => {
+					resolve(data ?? {});
+				});
+			});
 		}
 
 		/**
@@ -1109,7 +1117,7 @@
 		 */
 		async putSaveData(saveData) {
 			// @ts-expect-error
-			return await OBSIDIAN_PLUGIN.saveData(saveData);
+			await OBSIDIAN_PLUGIN.saveData(saveData);
 		}
 
 		/** @override */
@@ -1130,8 +1138,36 @@
 		}
 
 		/** @override */
-		areStickyNotesEnabled() {
+		getPath() {
-			return false;
+			// @ts-expect-error
+			const file = app.workspace.getActiveFile();
+			if (file && this.getActiveEditorElement()) {
+				return file.path;
+			} else {
+				return ROOT_PATH;
+			}
+		}
+
+		/** @override */
+		getActivePage() {
+			if (this.getPath() === ROOT_PATH) {
+				// Root page, use document element
+				return document.documentElement
+			}
+			return this.getActiveEditorElement() ?? document.documentElement;
+		}
+
+		/** @override */
+		isPathApplicable(path) {
+			return path === this.getPath();
+		}
+
+		/** @returns {HTMLElement|null} */
+		getActiveEditorElement() {
+			// @ts-expect-error
+			const activeLeaf = app.workspace.activeLeaf;
+			const leafElement = activeLeaf?.view?.containerEl;
+			return leafElement?.querySelector(".cm-scroller") ?? null;
 		}
 	}
 
@@ -1231,7 +1267,7 @@
 			stickyNote.top = top;
 			stickyNote.left = left;
 			onSave();
-		});
+		}, page);
 
 		if (closeButton) {
 			makeClosable(() => {
@@ -1588,6 +1624,7 @@
 	flex-grow: 1;
 	user-select: none;
 	color: var(--birb-background-color);
+	white-space: nowrap;
 }
 
 .birb-window-close {
@@ -1829,7 +1866,7 @@
 	const AFK_TIME = isDebug() ? 0 : 1000 * 5;
 	const PET_BOOST_DURATION = 1000 * 60 * 5;
 	const PET_MENU_COOLDOWN = 1000;
-	const URL_CHECK_INTERVAL = 500;
+	const URL_CHECK_INTERVAL = 250;
 	const HOP_DELAY = 500;
 
 	// Random event chances per tick
@@ -1971,7 +2008,7 @@
 				insertModal(`${birdBirb()} Mode`, message);
 			}),
 			new Separator(),
-			new MenuItem("2025.11.13.80", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.11.13.80"); }, false),
+			new MenuItem("2025.11.14.16", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.11.14.16"); }, false),
 		];
 
 		const styleElement = document.createElement("style");
@@ -2170,7 +2207,7 @@
 			setInterval(() => {
 				const currentPath = getContext().getPath().split("?")[0];
 				if (currentPath !== lastPath) {
-					log("Path changed, updating sticky notes");
+					log("Path changed, updating sticky notes: " + currentPath);
 					lastPath = currentPath;
 					drawStickyNotes(stickyNotes, save, deleteStickyNote);
 				}

src/application.js

@@ -90,7 +90,7 @@ const UPDATE_INTERVAL = 1000 / 60; // 60 FPS
 const AFK_TIME = isDebug() ? 0 : 1000 * 5;
 const PET_BOOST_DURATION = 1000 * 60 * 5;
 const PET_MENU_COOLDOWN = 1000;
-const URL_CHECK_INTERVAL = 500;
+const URL_CHECK_INTERVAL = 250;
 const HOP_DELAY = 500;
 
 // Random event chances per tick
@@ -431,7 +431,7 @@ Promise.all([
 		setInterval(() => {
 			const currentPath = getContext().getPath().split("?")[0];
 			if (currentPath !== lastPath) {
-				log("Path changed, updating sticky notes");
+				log("Path changed, updating sticky notes: " + currentPath);
 				lastPath = currentPath;
 				drawStickyNotes(stickyNotes, save, deleteStickyNote);
 			}

src/context.js

@@ -1,6 +1,7 @@
 import { debug, log, error } from "./shared.js";
 
 const SAVE_KEY = "birbSaveData";
+const ROOT_PATH = "";
 
 /**
  * @typedef {import('./application.js').BirbSaveData} BirbSaveData
@@ -231,7 +232,6 @@ class BrowserExtensionContext extends Context {
 }
 
 export class ObsidianContext extends Context {
-
 	/**
 	 * @override
 	 * @returns {boolean}
@@ -246,8 +246,12 @@ export class ObsidianContext extends Context {
 	 * @returns {Promise<BirbSaveData|{}>}
 	 */
 	async getSaveData() {
-		// @ts-expect-error
+		return new Promise((resolve) => {
-		return await OBSIDIAN_PLUGIN.loadData() ?? {};
+			// @ts-expect-error
+			OBSIDIAN_PLUGIN.loadData().then((data) => {
+				resolve(data ?? {});
+			});
+		});
 	}
 
 	/**
@@ -256,7 +260,7 @@ export class ObsidianContext extends Context {
 	 */
 	async putSaveData(saveData) {
 		// @ts-expect-error
-		return await OBSIDIAN_PLUGIN.saveData(saveData);
+		await OBSIDIAN_PLUGIN.saveData(saveData);
 	}
 
 	/** @override */
@@ -277,8 +281,36 @@ export class ObsidianContext extends Context {
 	}
 
 	/** @override */
-	areStickyNotesEnabled() {
+	getPath() {
-		return false;
+		// @ts-expect-error
+		const file = app.workspace.getActiveFile();
+		if (file && this.getActiveEditorElement()) {
+			return file.path;
+		} else {
+			return ROOT_PATH;
+		}
+	}
+
+	/** @override */
+	getActivePage() {
+		if (this.getPath() === ROOT_PATH) {
+			// Root page, use document element
+			return document.documentElement
+		}
+		return this.getActiveEditorElement() ?? document.documentElement;
+	}
+
+	/** @override */
+	isPathApplicable(path) {
+		return path === this.getPath();
+	}
+
+	/** @returns {HTMLElement|null} */
+	getActiveEditorElement() {
+		// @ts-expect-error
+		const activeLeaf = app.workspace.activeLeaf;
+		const leafElement = activeLeaf?.view?.containerEl;
+		return leafElement?.querySelector(".cm-scroller") ?? null;
 	}
 }
 

src/shared.js

@@ -67,8 +67,9 @@ export function onClick(element, action) {
  * @param {HTMLElement|null} element The element to detect drag events on
  * @param {boolean} [parent] Whether to move the parent element when the child is dragged
  * @param {(top: number, left: number) => void} [callback] Callback for when element is moved
+ * @param {HTMLElement} [pageElement] The page element to constrain movement within
  */
-export function makeDraggable(element, parent = true, callback = () => { }) {
+export function makeDraggable(element, parent = true, callback = () => { }, pageElement) {
 	if (!element) {
 		return;
 	}
@@ -114,9 +115,12 @@ export function makeDraggable(element, parent = true, callback = () => { }) {
 	});
 
 	document.addEventListener("mousemove", (e) => {
+		const page = pageElement || document.documentElement;
+		const maxX = page.scrollWidth - elementToMove.clientWidth;
+		const maxY = page.scrollHeight - elementToMove.clientHeight;
 		if (isMouseDown) {
-			elementToMove.style.left = `${Math.max(0, e.clientX - offsetX)}px`;
+			elementToMove.style.left = `${Math.max(0, Math.min(maxX, e.clientX - offsetX))}px`;
-			elementToMove.style.top = `${Math.max(0, e.clientY - offsetY)}px`;
+			elementToMove.style.top = `${Math.max(0, Math.min(maxY, e.clientY - offsetY))}px`;
 		}
 	});
 

src/stickyNotes.js

@@ -69,7 +69,7 @@ export function renderStickyNote(stickyNote, page, onSave, onDelete) {
 		stickyNote.top = top;
 		stickyNote.left = left;
 		onSave();
-	});
+	}, page);
 
 	if (closeButton) {
 		makeClosable(() => {

src/stylesheet.css

@@ -119,6 +119,7 @@
 	flex-grow: 1;
 	user-select: none;
 	color: var(--birb-background-color);
+	white-space: nowrap;
 }
 
 .birb-window-close {