Merge pull request #3 from derwebcoder/backup

Changes of late October

package.json

@@ -43,6 +43,7 @@
 		"dexie": "^4.0.8",
 		"dexie-react-hooks": "^1.1.7",
 		"lucide-react": "^0.446.0",
+		"match-sorter": "^7.0.0",
 		"preline": "^2.4.1",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",

src/common/components/Tag/Tag.stories.tsx

@@ -70,3 +70,31 @@ export const ChipBorder: Story = {
 		),
 	],
 };
+
+export const ChipIconLight: Story = {
+	args: {
+		name: "wilderness",
+		hue: 321,
+	},
+	decorators: [
+		(Story) => (
+			<div className="chip-icon-light">
+				<Story />
+			</div>
+		),
+	],
+};
+
+export const ChipIconDark: Story = {
+	args: {
+		name: "wilderness",
+		hue: 321,
+	},
+	decorators: [
+		(Story) => (
+			<div className="chip-icon-dark">
+				<Story />
+			</div>
+		),
+	],
+};

src/common/components/Tag/Tag.test.tsx

@@ -12,7 +12,7 @@ describe("Tag", () => {
 			/>,
 		);
 
-		const tag = screen.getByText("#world");
+		const tag = screen.getByText("world");
 		expect(tag).toBeInTheDocument();
 
 		const style = getComputedStyle(tag);

src/common/components/Tag/Tag.tsx

@@ -3,20 +3,23 @@ import type React from "react";
 export type TagProps = {
 	name: string;
 	hue: number;
+	icon?: string;
 };
 
 export const Tag = (props: TagProps) => {
-	const { name, hue } = props;
+	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,
 				} as React.CSSProperties
 			}
 		>
-			#{name}
+			{name}
 		</span>
 	);
 };

src/common/components/TextInput/TagList/TagList.tsx

@@ -13,14 +13,16 @@ export const getNewTagPhrase = (tag: string) =>
 
 export let isUserSelectingTag = false;
 
-type Props = SuggestionProps<PlainTag, MentionNodeAttrs>;
+export type TagListProps = SuggestionProps<PlainTag, MentionNodeAttrs> & {
+	parentWindow: Window;
+};
 
 export type TagListRef = {
 	onKeyDown: (data: SuggestionKeyDownProps) => boolean;
 };
 
-export const TagList = forwardRef<TagListRef, Props>((props, ref) => {
-	const { items } = props;
+export const TagList = forwardRef<TagListRef, TagListProps>((props, ref) => {
+	const { items, parentWindow } = props;
 	const [selectedIndex, setSelectedIndex] = useState(1);
 
 	useEffect(() => {
@@ -51,7 +53,7 @@ export const TagList = forwardRef<TagListRef, Props>((props, ref) => {
 	};
 
 	const scrollIntoView = (index: number) => {
-		const itemElement = document.querySelector(
+		const itemElement = parentWindow.document.querySelector(
 			`[data-selector=tags-dropdown]>:nth-child(${index + 1})`,
 		);
 		itemElement?.scrollIntoView({
@@ -123,6 +125,7 @@ export const TagList = forwardRef<TagListRef, Props>((props, ref) => {
 						<Tag
 							name={item.name}
 							hue={item.hue}
+							icon={item.icon}
 						/>
 						<div
 							className="text-sm text-stone-500 px-2 max-h-10 overflow-hidden text-clip"

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

@@ -83,15 +83,18 @@ export const getExtensions = (settings: Settings) => {
 						class: "tag",
 					},
 					renderHTML({ options, node }) {
+						const tagName = node.attrs.id;
 						return [
 							"span",
 							mergeAttributes(
 								{
-									style: `--tag-color: ${tagService.getTagHueFromCache(`${node.attrs.id}`)}`,
+									style: `--tag-color: ${tagService.getTagHueFromCache(`${tagName}`)}`,
+									"data-icon":
+										tagService.getTagIconFromCache(tagName),
 								},
 								options.HTMLAttributes,
 							),
-							`${options.suggestion.char}${node.attrs.id}`,
+							`${tagName}`,
 						];
 					},
 					suggestion: {
@@ -128,7 +131,10 @@ export const getExtensions = (settings: Settings) => {
 							return {
 								onStart: (props) => {
 									component = new ReactRenderer(TagList, {
-										props,
+										props: {
+											...props,
+											parentWindow,
+										},
 										editor: props.editor,
 									});
 

src/common/components/TextInput/TextInput.css

@@ -4,8 +4,4 @@
     float: left;
     height: 0;
     pointer-events: none;
-}
-
-.tiptap .tag {
-    display: inline-block;
 }

src/common/components/TextInput/TextInput.tsx

@@ -16,13 +16,13 @@ export type TextInputProps = {
 	style?: keyof typeof styleMap;
 	placeholder?: string;
 	content?: string;
+	onEscape?: () => void;
+	globalAccessorId?: string;
 };
 
-let editor: Editor | null = null;
-
 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",
 };
@@ -38,50 +38,70 @@ export const TextInput = (props: TextInputProps) => {
 		placeholder,
 		enableTags,
 		enableExtension,
+		onEscape,
+		globalAccessorId,
 	} = props;
-	editor = useEditor({
-		content,
-		extensions: getExtensions({
-			parentWindow: parentWindow ?? window,
-			allowAddingTags,
-			placeholder,
-			enableTags,
-			enableExtension,
-		}),
-		editorProps: {
-			attributes: {
-				"aria-label": "Add a spark",
-				role: "textbox",
-				class: `${styleMap[style]}`,
+	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;
+					}
+					onSubmit(plainText, html);
+					const { prefixTagsHtml } = parseSpark(plainText, html);
+					editor?.commands.setContent(prefixTagsHtml, false, {
+						preserveWhitespace: true,
+					});
+					return true;
+				},
 			},
-			handleKeyDown: (_view, event) => {
-				if (!onSubmit) {
-					return false;
-				}
-				if (event.key !== "Enter" || event.shiftKey) {
-					return false;
-				}
-				if (isUserSelectingTag || isUserSelectingExtension) {
-					// user currently has the selection open and might have pressed enter to select an item
-					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;
+			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