feat: custom shortcut icons #258

src/seqta/utils/CreateEnable/CreateCustomShortcutDiv.ts

@@ -9,23 +9,35 @@ export function CreateCustomShortcutDiv(element: any) {
   shortcutdiv.classList.add("shortcut");
   shortcutdiv.classList.add("customshortcut");
 
-  let image = stringToHTML(
-    `
-    <svg style="width:39px;height:39px" viewBox="0 0 40 40" class="shortcuticondiv">
-      <text
-        text-anchor="middle"
-        x="50%"
-        y="50%"
-        dy=".35em"
-        fill="var(--text-primary)"
-        font-weight="bold"
-        font-size="32"
-        dominant-baseline="middle">
-        ${element.icon}
-      </text>
-    </svg>
-    `,
-  ).firstChild;
+  let image: ChildNode | null = null;
+
+  if (typeof element.icon === "string" && element.icon.trim().startsWith("<")) {
+    image = stringToHTML(element.icon).firstChild;
+  } else if (typeof element.icon === "string" && element.icon.startsWith("data:image")) {
+    const img = document.createElement("img");
+    img.src = element.icon;
+    img.style.width = "39px";
+    img.style.height = "39px";
+    image = img;
+  } else {
+    image = stringToHTML(
+      /* html */`
+      <svg style="width:39px;height:39px" viewBox="0 0 40 40" class="shortcuticondiv">
+        <text
+          text-anchor="middle"
+          x="50%"
+          y="50%"
+          dy=".35em"
+          fill="var(--text-primary)"
+          font-weight="bold"
+          font-size="32"
+          dominant-baseline="middle">
+          ${element.icon}
+        </text>
+      </svg>
+      `,
+    ).firstChild;
+  }
   (image as HTMLElement).classList.add("shortcuticondiv");
   var text = document.createElement("p");
   text.textContent = element.name;

src/seqta/utils/DisableRemove/RemoveShortcutDiv.ts

@@ -10,7 +10,7 @@ export function RemoveShortcutDiv(elements: any) {
       const textElement = shortcut.querySelector("p"); // <p> is a direct child of .shortcut
       const title = textElement ? textElement.textContent : "";
 
-      const elementName = links[element.name as keyof typeof links].DisplayName || element.name;
+      const elementName = links[element.name as keyof typeof links]?.DisplayName || element.name;
 
       let shouldRemove = title === elementName;