Delete tags and search if not possible

Author: derwebcoder

src/common/components/Tag/Tag.tsx

@@ -10,8 +10,9 @@ export const Tag = (props: TagProps) => {
 	const { name, hue, icon } = props;
 	return (
 		<span
-			className="font-semibold tag w-fit text-sm"
+			className="tag w-fit text-sm"
 			data-icon={icon}
+			data-type="tags"
 			style={
 				{
 					"--tag-color": hue,

src/common/components/TextInput/TextInput.tsx

@@ -4,6 +4,7 @@ import "./TextInput.css";
 import { parseSpark } from "../../../scripts/utils/stringUtils";
 import { isUserSelectingTag } from "./TagList/TagList";
 import { isUserSelectingExtension } from "./SparkExtensionList/SparkExtensionList";
+import { useEffect } from "react";
 
 export type TextInputProps = {
 	onSubmit?: (plainText: string, html: string) => void;
@@ -16,11 +17,12 @@ export type TextInputProps = {
 	placeholder?: string;
 	content?: string;
 	onEscape?: () => void;
+	globalAccessorId?: string;
 };
 
 const styleMap = {
 	spark: "p-4 min-h-full block w-full bg-white border border-blue-300 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600",
-	search: "px-4 py-2 block w-full bg-transparent hover:bg-white focus:bg-white border-b border-b-stone-200 rounded",
+	search: "px-4 py-2 block w-full bg-transparent text-sm hover:bg-white focus:bg-white border-b border-b-stone-200 rounded",
 	invisible:
 		"p-1 w-full bg-transparent rounded-sm text-stone-500 focus:text-stone-700 text-sm max-w-72",
 };
@@ -37,53 +39,69 @@ export const TextInput = (props: TextInputProps) => {
 		enableTags,
 		enableExtension,
 		onEscape,
+		globalAccessorId,
 	} = props;
-	const editor = useEditor({
-		content,
-		extensions: getExtensions({
-			parentWindow: parentWindow ?? window,
-			allowAddingTags,
-			placeholder,
-			enableTags,
-			enableExtension,
-		}),
-		editorProps: {
-			attributes: {
-				"aria-label": "Add a spark",
-				role: "textbox",
-				class: `${styleMap[style]}`,
-			},
-			handleKeyDown: (_view, event) => {
-				if (!onSubmit) {
-					return false;
-				}
-				if (isUserSelectingTag || isUserSelectingExtension) {
-					// user currently has the selection open and might have pressed enter to select an item
-					return false;
-				}
-				if (event.key !== "Enter" || event.shiftKey) {
-					if (event.key === "Escape") {
-						onEscape?.();
+	const editor = useEditor(
+		{
+			content,
+			extensions: getExtensions({
+				parentWindow: parentWindow ?? window,
+				allowAddingTags,
+				placeholder,
+				enableTags,
+				enableExtension,
+			}),
+			editorProps: {
+				attributes: {
+					"aria-label": "Add a spark",
+					role: "textbox",
+					class: `${styleMap[style]}`,
+				},
+				handleKeyDown: (_view, event) => {
+					if (!onSubmit) {
+						return false;
+					}
+					if (isUserSelectingTag || isUserSelectingExtension) {
+						// user currently has the selection open and might have pressed enter to select an item
+						return false;
+					}
+					if (event.key !== "Enter" || event.shiftKey) {
+						if (event.key === "Escape") {
+							onEscape?.();
+						}
+						return false;
+					}
+					const html = editor?.getHTML().trim() ?? "";
+					const plainText = editor?.getText().trim() ?? "";
+					if (html === "") {
+						return false;
 					}
-					return false;
-				}
-				const html = editor?.getHTML().trim() ?? "";
-				const plainText = editor?.getText().trim() ?? "";
-				if (html === "") {
-					return false;
-				}
-				onSubmit(plainText, html);
-				const { prefixTagsHtml } = parseSpark(plainText, html);
-				editor?.commands.setContent(prefixTagsHtml, false, {
-					preserveWhitespace: true,
-				});
-				return true;
+					onSubmit(plainText, html);
+					const { prefixTagsHtml } = parseSpark(plainText, html);
+					editor?.commands.setContent(prefixTagsHtml, false, {
+						preserveWhitespace: true,
+					});
+					return true;
+				},
+			},
+			onUpdate: ({ editor }) => {
+				onChange?.(editor.getHTML());
 			},
 		},
-		onUpdate: ({ editor }) => {
-			onChange?.(editor.getHTML());
-		},
-	});
+		[content],
+	);
+
+	useEffect(() => {
+		if (!globalAccessorId) {
+			return;
+		}
+		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+		const win = window as any;
+		if (!win.editor) {
+			win.editor = {};
+		}
+		win.editor[globalAccessorId] = editor;
+	}, [editor, globalAccessorId]);
 
 	return (
 		<EditorContent

src/container/SearchInput/SearchInput.tsx

@@ -1,6 +1,10 @@
 import { TextInput } from "../../common/components/TextInput/TextInput";
-import { updateQueryDebounced } from "../../scripts/store/queryStore";
-import { extractTags } from "../../scripts/utils/stringUtils";
+import {
+	updateQueryDebounced,
+	useQueryStore,
+} from "../../scripts/store/queryStore";
+
+export const SearchInputEditorAccessorId = "search";
 
 export const SearchInput = () => {
 	const handleChange = (htmlString: string) => {
@@ -9,6 +13,7 @@ export const SearchInput = () => {
 	return (
 		<div>
 			<TextInput
+				globalAccessorId={SearchInputEditorAccessorId}
 				allowAddingTags={false}
 				onChange={handleChange}
 				style="search"

src/container/SparkList/SparkList.tsx

@@ -24,7 +24,7 @@ type DateSection = {
 type Section = SparkSection | DateSection;
 
 export const SparkList = () => {
-	const queryTags = useQueryStore((state) => state.context.query);
+	const queryTags = useQueryStore((state) => state.context.tags);
 	const sparksWithTags = useLiveQuery(
 		() => sparkService.find(queryTags),
 		[queryTags],

src/container/TagEditor/TagConfig/TagConfig.tsx

@@ -19,6 +19,13 @@ import {
 	SelectValue,
 } from "../../../common/components/shadcn/select";
 import "./TagConfig.css";
+import { IconButton } from "../../../common/components/IconButton/IconButton";
+import { TrashIcon } from "../../../assets/icons/TrashIcon";
+import { sparkService } from "../../../scripts/db/SparkService";
+import { useToast } from "../../../common/hooks/use-toast";
+import { ToastAction } from "../../../common/components/shadcn/toast";
+import { SearchInputEditorAccessorId } from "../../SearchInput/SearchInput";
+import type { Editor } from "@tiptap/react";
 
 type Props = {
 	tag: Tag;
@@ -43,14 +50,64 @@ export const TagConfig = (props: Props) => {
 	const { tag } = props;
 	const [hue, setHue] = useState(tag.hue);
 	const [icon, setIcon] = useState<TagIcon>(tag.icon ?? "hash");
+	const { toast } = useToast();
 
 	const handleHueChange = (value: number) => {
 		setHue(value);
 		updateHueDebounced(tag.name, value);
 	};
 
+	const searchTag = () => {
+		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+		const searchEditor: Editor | undefined = (window as any).editor?.[
+			SearchInputEditorAccessorId
+		];
+
+		if (!searchEditor) {
+			return;
+		}
+
+		searchEditor.commands.setContent(
+			`
+			<span
+				data-type="tags"
+				data-icon="${tag.icon}"
+				data-id="${tag.name}"
+				style="--tag-color: ${tag.hue}"
+				class="tag"
+				contenteditable="false"
+			>${tag.name}</span>
+		`,
+			true,
+			{ preserveWhitespace: false },
+		);
+	};
+
+	const handleDelete = async () => {
+		const sparksWithTag = await sparkService.find([tag.name]);
+
+		if (sparksWithTag.length > 0) {
+			toast({
+				title: `Could not delete tag "${tag.name}"`,
+				description: `The tag is still being used by ${sparksWithTag.length} sparks. Edit these sparks and remove the tag on each of them to delete this tag.`,
+				variant: "destructive",
+				action: (
+					<ToastAction
+						altText="View sparks using this tag"
+						onClick={searchTag}
+					>
+						View
+					</ToastAction>
+				),
+			});
+			return;
+		}
+
+		await tagService.deleteTag(tag.name);
+	};
+
 	return (
-		<div className="grid grid-cols-subgrid col-span-4 border-b border-stone-200 py-2 w-full items-center gap-4">
+		<div className="grid grid-cols-subgrid col-span-5 border-b border-stone-200 py-2 w-full items-center gap-4">
 			<div className="justify-self-center">
 				<TagElement
 					name={tag.name}
@@ -124,6 +181,14 @@ export const TagConfig = (props: Props) => {
 					</PopoverContent>
 				</Popover>
 			</div>
+			<div className="flex flex-row justify-center">
+				<IconButton
+					relevancy="secondary"
+					onClick={handleDelete}
+				>
+					<TrashIcon />
+				</IconButton>
+			</div>
 		</div>
 	);
 };

src/scripts/db/TagService.ts

@@ -104,6 +104,10 @@ export class TagService {
 		this.tagMap.set(newTag.name, newTag);
 	}
 
+	public async deleteTag(name: string) {
+		await this.db.tags.delete(name);
+	}
+
 	public async CAREFUL_deleteAllData() {
 		await this.db.tags.clear();
 	}

src/scripts/store/queryStore.ts

@@ -5,36 +5,48 @@ import { useSelector } from "@xstate/store/react";
 
 export const queryStore = createStore({
 	// Initial context
-	context: { query: [] } as { query: string[] },
+	context: { tags: [], queryHtml: "" } as {
+		tags: string[];
+		queryHtml: string;
+	},
 	// Transitions
 	on: {
-		update: {
-			query: (_context, event: { value: string[] }) => event.value,
+		updateTags: {
+			tags: (_context, event: { html: string }) => {
+				return extractTags(event.html);
+			},
+		},
+		updateQueryHtml: {
+			queryHtml: (_context, event: { html: string }) => {
+				return event.html;
+			},
 		},
 		clear: {
-			query: () => [],
+			tags: () => [],
+			queryHtml: () => "",
 		},
 	},
 });
 
 const extractTagsAndUpdateDebounced = debounce((queryString: string) => {
-	const newQuery = extractTags(queryString);
-	console.log("extract", queryString, newQuery);
 	queryStore.send({
-		type: "update",
-		value: newQuery,
+		type: "updateTags",
+		html: queryString,
 	});
 }, 300);
 
 export const updateQueryDebounced = (queryString?: string) => {
-	console.log("u", queryString);
 	if (!queryString || queryString.trim() === "") {
 		queryStore.send({
 			type: "clear",
 		});
 		return;
 	}
 
+	queryStore.send({
+		type: "updateQueryHtml",
+		html: queryString,
+	});
 	extractTagsAndUpdateDebounced(queryString);
 };