Enable tag dropdown in pip

README.md

@@ -7,9 +7,12 @@ More info coming soon.
 - [ ] Edit sparks
 - [ ] Delete sparks
 - [ ] Filter sparks
-- [ ] Tag management
-- [ ] Tag widget in tiptap with autocomplete
-- [ ] Tag highlighting
+- [ ] Tag color changing
+- [ ] Tag renaming
+- [ ] Tag deleting
+- [ ] Tag descriptions
+- [x] Tag widget in tiptap with autocomplete
+- [x] Tag highlighting
 - [x] Backups
 - [x] Webapp
 - [ ] Todos

src/common/components/TextInput/TextInput.config.tsx

@@ -12,7 +12,7 @@ import tippy, { type Instance as TippyInstance } from "tippy.js";
 import { stringToHue } from "../../../scripts/utils/stringUtils";
 import { tagService } from "../../../scripts/db/TagService";
 
-export const extensions = [
+export const getExtensions = (parentWindow: Window) => [
 	// Document,
 	// Text,
 	// Paragraph,
@@ -92,7 +92,7 @@ export const extensions = [
 			char: "#",
 			render: () => {
 				let component: ReactRenderer<TagListRef>;
-				let popup: TippyInstance[];
+				let popup: TippyInstance;
 
 				return {
 					onStart: (props) => {
@@ -105,10 +105,10 @@ export const extensions = [
 							return;
 						}
 
-						popup = tippy("body", {
+						popup = tippy(parentWindow.document.body, {
 							// biome-ignore lint/style/noNonNullAssertion: <explanation>
 							getReferenceClientRect: () => props.clientRect?.()!,
-							appendTo: () => document.body,
+							appendTo: () => parentWindow.document.body,
 							content: component.element,
 							showOnCreate: true,
 							interactive: true,
@@ -124,15 +124,15 @@ export const extensions = [
 							return;
 						}
 
-						popup[0].setProps({
+						popup.setProps({
 							// biome-ignore lint/style/noNonNullAssertion: <explanation>
 							getReferenceClientRect: () => props.clientRect?.()!,
 						});
 					},
 
 					onKeyDown(props) {
 						if (props.event.key === "Escape") {
-							popup[0].hide();
+							popup.hide();
 
 							return true;
 						}
@@ -141,7 +141,7 @@ export const extensions = [
 					},
 
 					onExit() {
-						popup[0].destroy();
+						popup.destroy();
 						component.destroy();
 					},
 				};

src/common/components/TextInput/TextInput.tsx

@@ -1,19 +1,20 @@
 import { EditorContent, useEditor, type Editor } from "@tiptap/react";
-import { extensions } from "./TextInput.config";
+import { getExtensions } from "./TextInput.config";
 import "./TextInput.css";
 import { extractTags } from "../../../scripts/utils/stringUtils";
 import { isUserSelectingTag } from "./TagList/TagList";
 
 export type TextInputProps = {
 	onSubmit?: (plainText: string, html: string) => void;
+	parentWindow: Window;
 };
 
 let editor: Editor | null = null;
 
 export const TextInput = (props: TextInputProps) => {
-	const { onSubmit } = props;
+	const { onSubmit, parentWindow } = props;
 	editor = useEditor({
-		extensions: extensions,
+		extensions: getExtensions(parentWindow),
 		editorProps: {
 			attributes: {
 				"aria-label": "Add a spark",

src/container/SparkInput/SparkInput.tsx

@@ -71,7 +71,10 @@ export const SparkInput = () => {
 		<>
 			<div className="flex flex-col gap-1">
 				<div className="min-h-32">
-					<TextInput onSubmit={handleSubmit} />
+					<TextInput
+						onSubmit={handleSubmit}
+						parentWindow={window}
+					/>
 				</div>
 				<div className="flex justify-end px-3">
 					<IconButton
@@ -87,7 +90,10 @@ export const SparkInput = () => {
 				createPortal(
 					<div className="grid grid-rows-[1fr_min-content] gap-1 h-full p-1">
 						<div className="min-h-full overflow-y-auto">
-							<TextInput onSubmit={handleSubmit} />
+							<TextInput
+								onSubmit={handleSubmit}
+								parentWindow={pipWindow}
+							/>
 						</div>
 						<div className="flex justify-end px-3">
 							<IconButton