Add escape key functionality to quit editing a spark

Author: derwebcoder

src/common/components/TextInput/TextInput.tsx

@@ -4,7 +4,6 @@ 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,10 +15,9 @@ export type TextInputProps = {
 	style?: keyof typeof styleMap;
 	placeholder?: string;
 	content?: string;
+	onEscape?: () => void;
 };
 
-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",
@@ -38,8 +36,9 @@ export const TextInput = (props: TextInputProps) => {
 		placeholder,
 		enableTags,
 		enableExtension,
+		onEscape,
 	} = props;
-	editor = useEditor({
+	const editor = useEditor({
 		content,
 		extensions: getExtensions({
 			parentWindow: parentWindow ?? window,
@@ -58,13 +57,16 @@ export const TextInput = (props: TextInputProps) => {
 				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;
 				}
+				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 === "") {

src/container/SparkList/SparkItem/SparkItem.tsx

@@ -32,6 +32,10 @@ export const SparkItem = (props: Props) => {
 		setIsEditing(false);
 	};
 
+	const handleEscape = () => {
+		setIsEditing(false);
+	};
+
 	const handleTrashClicked = async () => {
 		setIsDeleting(true);
 	};
@@ -50,6 +54,7 @@ export const SparkItem = (props: Props) => {
 					<TextInput
 						onSubmit={handleSubmit}
 						content={spark.originalHtml}
+						onEscape={handleEscape}
 					/>
 				</div>
 			) : (