Merge pull request #2 from derwebcoder/tagnodes

Advanced tag editing

Author: derwebcoder

README.md

@@ -14,5 +14,5 @@ More info coming soon.
 - [x] Webapp
 - [ ] Todos
 - [ ] Reminder
-- [ ] Empty state when no spark exist yet
+- [x] Empty state when no spark exist yet
 - [ ] Add second confirmation to "Delete everything" button

doc/HOW_TO_UPDATE_THE_DB.md

@@ -0,0 +1,8 @@
+If you want to update the database schema or export / import format, you have to make sure you follow a few steps:
+
+1. Start with adding a new version in `AppDB.ts`. Make sure to define an upgrade transaction.
+2. Add a new backup format in `Backup.ts` and a safe guard
+3. Add a new import upgrade method in `importJSONWorker.ts`. Don't forget to update the final backup type check (currently line 60)
+4. Now you can use the new data
+
+Note: If you add a new table, remember to also implement a `CAREFUL_deleteAllData()` function in the corresponding service and call this from the settings when the user wants to delete all data.

package-lock.json

@@ -23,10 +23,12 @@
 		"@radix-ui/react-slot": "^1.1.0",
 		"@radix-ui/react-toast": "^1.2.1",
 		"@tiptap/extension-list-keymap": "^2.6.6",
+		"@tiptap/extension-mention": "^2.8.0",
 		"@tiptap/extension-placeholder": "^2.6.6",
 		"@tiptap/pm": "^2.6.6",
 		"@tiptap/react": "^2.6.6",
 		"@tiptap/starter-kit": "^2.6.6",
+		"@tiptap/suggestion": "^2.8.0",
 		"@types/wicg-file-system-access": "^2023.10.5",
 		"astro": "^4.16.1",
 		"class-variance-authority": "^0.7.0",
@@ -43,6 +45,7 @@
 		"tailwind-merge": "^2.5.2",
 		"tailwindcss": "^3.4.10",
 		"tailwindcss-animate": "^1.0.7",
+		"tippy.js": "^6.3.7",
 		"typescript": "^5.5.4",
 		"vaul": "^1.0.0"
 	},

package.json

@@ -0,0 +1,116 @@
+import type { MentionNodeAttrs } from "@tiptap/extension-mention";
+import type {
+	SuggestionKeyDownProps,
+	SuggestionProps,
+} from "@tiptap/suggestion";
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import type { Tag } from "../../../../interfaces/Tag";
+
+export const NEW_TAG_PREFIX = 'New tag "';
+export const getNewTagPhrase = (tag: string) =>
+	`${NEW_TAG_PREFIX}${tag.toLowerCase()}"`;
+
+export let isUserSelectingTag = false;
+
+type Props = SuggestionProps<{ name: string; hue: number }, MentionNodeAttrs>;
+
+export type TagListRef = {
+	onKeyDown: (data: SuggestionKeyDownProps) => boolean;
+};
+
+export const TagList = forwardRef<TagListRef, Props>((props, ref) => {
+	const { items } = props;
+	const [selectedIndex, setSelectedIndex] = useState(1);
+
+	useEffect(() => {
+		isUserSelectingTag = true;
+
+		return () => {
+			isUserSelectingTag = false;
+		};
+	}, []);
+
+	const selectItem = (index: number) => {
+		let item = items[index].name;
+		if (item.startsWith(NEW_TAG_PREFIX)) {
+			item = item.slice(NEW_TAG_PREFIX.length, item.length - 1);
+		}
+
+		if (item) {
+			props.command({ id: item.toLowerCase() });
+			props.editor;
+		}
+	};
+
+	const upHandler = () => {
+		setSelectedIndex((selectedIndex + items.length - 1) % items.length);
+	};
+
+	const downHandler = () => {
+		setSelectedIndex((selectedIndex + 1) % items.length);
+	};
+
+	const enterHandler = () => {
+		selectItem(selectedIndex);
+	};
+
+	useEffect(() => {
+		if (items.length <= 1 || !items[0].name.startsWith(NEW_TAG_PREFIX)) {
+			setSelectedIndex(0);
+			return;
+		}
+		setSelectedIndex(1);
+	}, [items]);
+
+	useImperativeHandle(ref, () => ({
+		onKeyDown: ({ event }) => {
+			if (event.key === "ArrowUp") {
+				upHandler();
+				return true;
+			}
+
+			if (event.key === "ArrowDown") {
+				downHandler();
+				return true;
+			}
+
+			if (event.key === "Enter" || event.key === " ") {
+				enterHandler();
+				event.preventDefault();
+				event.stopPropagation();
+				return true;
+			}
+
+			return false;
+		},
+	}));
+
+	return (
+		<div className="bg-white border border-stone-400 rounded-md shadow flex flex-col gap-1 scroll-auto px-3 py-2 relative">
+			{items.length ? (
+				items.map((item, index) => (
+					<button
+						type="button"
+						className={`flex gap-1 text-left py-1 px-3 rounded-md ${index === selectedIndex ? "bg-stone-300" : "hover:bg-stone-200"}`}
+						key={item.name}
+						data-key={item.name}
+						onClick={() => selectItem(index)}
+					>
+						<span
+							className="tag"
+							style={
+								{
+									"--tag-color": `${item.hue}`,
+								} as React.CSSProperties
+							}
+						>
+							{item.name}
+						</span>
+					</button>
+				))
+			) : (
+				<div className="item">No result</div>
+			)}
+		</div>
+	);
+});