From cc536dce1f57fc2c6a603254255d1c32792e0298 Mon Sep 17 00:00:00 2001
From: Marvin Becker <marvinbecker@derwebcoder.de>
Date: Wed, 16 Oct 2024 21:30:30 +0200
Subject: [PATCH] Enable tag dropdown in pip

---
 README.md                                          |  9 ++++++---
 .../components/TextInput/TextInput.config.tsx      | 14 +++++++-------
 src/common/components/TextInput/TextInput.tsx      |  7 ++++---
 src/container/SparkInput/SparkInput.tsx            | 10 ++++++++--
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index f80b9bf..3a62a66 100644
--- a/README.md
+++ b/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
diff --git a/src/common/components/TextInput/TextInput.config.tsx b/src/common/components/TextInput/TextInput.config.tsx
index 3297630..ddc7be3 100644
--- a/src/common/components/TextInput/TextInput.config.tsx
+++ b/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,7 +124,7 @@ export const extensions = [
 							return;
 						}
 
-						popup[0].setProps({
+						popup.setProps({
 							// biome-ignore lint/style/noNonNullAssertion: <explanation>
 							getReferenceClientRect: () => props.clientRect?.()!,
 						});
@@ -132,7 +132,7 @@ export const extensions = [
 
 					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();
 					},
 				};
diff --git a/src/common/components/TextInput/TextInput.tsx b/src/common/components/TextInput/TextInput.tsx
index f537791..5f05ffc 100644
--- a/src/common/components/TextInput/TextInput.tsx
+++ b/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",
diff --git a/src/container/SparkInput/SparkInput.tsx b/src/container/SparkInput/SparkInput.tsx
index f93815d..bc80b1c 100644
--- a/src/container/SparkInput/SparkInput.tsx
+++ b/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