Editing sparks

Author: derwebcoder

package-lock.json

@@ -18,6 +18,7 @@
 		"@astrojs/check": "^0.9.4",
 		"@astrojs/react": "^3.6.2",
 		"@astrojs/tailwind": "^5.1.2",
+		"@radix-ui/react-alert-dialog": "^1.1.2",
 		"@radix-ui/react-dialog": "^1.1.1",
 		"@radix-ui/react-icons": "^1.3.0",
 		"@radix-ui/react-select": "^2.1.2",

package.json

@@ -0,0 +1,24 @@
+type IconProps = {
+	className?: string;
+	overrideDefaultClassName?: boolean;
+};
+
+export const EditIcon = (props: IconProps) => {
+	const { className, overrideDefaultClassName } = props;
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			strokeWidth={1.5}
+			stroke="currentColor"
+			className={
+				overrideDefaultClassName ? className : `size-5 ${className}`
+			}
+			role="presentation"
+		>
+			<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+			<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+		</svg>
+	);
+};

src/assets/icons/EditIcon.tsx

@@ -0,0 +1,36 @@
+type IconProps = {
+	className?: string;
+	overrideDefaultClassName?: boolean;
+};
+
+export const TrashIcon = (props: IconProps) => {
+	const { className, overrideDefaultClassName } = props;
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			strokeWidth={1.5}
+			stroke="currentColor"
+			className={
+				overrideDefaultClassName ? className : `size-5 ${className}`
+			}
+			role="presentation"
+		>
+			<polyline points="3 6 5 6 21 6" />
+			<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+			<line
+				x1="10"
+				y1="11"
+				x2="10"
+				y2="17"
+			/>
+			<line
+				x1="14"
+				y1="11"
+				x2="14"
+				y2="17"
+			/>
+		</svg>
+	);
+};

src/assets/icons/TrashIcon.tsx

@@ -158,7 +158,9 @@ export const getExtensions = (settings: Settings) => {
 							},
 
 							onExit() {
-								popup.destroy();
+								if (!popup.state.isDestroyed) {
+									popup.destroy();
+								}
 								component.destroy();
 							},
 						};
@@ -249,7 +251,9 @@ export const getExtensions = (settings: Settings) => {
 							},
 
 							onExit() {
-								popup.destroy();
+								if (!popup.state.isDestroyed) {
+									popup.destroy();
+								}
 								component.destroy();
 							},
 						};

src/common/components/TextInput/TextInput.config.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;
@@ -12,6 +13,7 @@ export type TextInputProps = {
 	onChange?: (htmlString: string) => void;
 	style?: keyof typeof styleMap;
 	placeholder?: string;
+	content?: string;
 };
 
 let editor: Editor | null = null;
@@ -28,9 +30,11 @@ export const TextInput = (props: TextInputProps) => {
 		allowAddingTags = true,
 		onChange,
 		style = "spark",
+		content,
 		placeholder,
 	} = props;
 	editor = useEditor({
+		content,
 		extensions: getExtensions({
 			parentWindow: parentWindow ?? window,
 			allowAddingTags,