add editing functionality

src/seqta/ui/ThemeCreator.ts

@@ -2,15 +2,16 @@ import browser from "webextension-polyfill";
 
 /**
  * Open the Theme Creator sidebar, it is an embedded page loaded similar to the extension popup
+ * @param themeID - The ID of the theme to load in the Theme Creator
  * @returns void
  */
-export function OpenThemeCreator() {
+export function OpenThemeCreator( themeID: string = '' ) {
   CloseThemeCreator();
   
   const width = '310px';
 
   const themeCreatorIframe: HTMLIFrameElement = document.createElement('iframe');
-  themeCreatorIframe.src = `${browser.runtime.getURL('src/interface/index.html')}#themeCreator`;
+  themeCreatorIframe.src = `${browser.runtime.getURL('src/interface/index.html')}${ themeID != '' ? `?themeID=${themeID}` : '' }#themeCreator`;
   themeCreatorIframe.id = 'themeCreatorIframe';
   themeCreatorIframe.setAttribute('allowTransparency', 'true');
   themeCreatorIframe.setAttribute('excludeDarkCheck', 'true');

src/seqta/ui/Themes.ts

@@ -152,7 +152,7 @@ export const UpdateImageData = (imageData2: { id: string; base64: string }) => {
   const { id, base64 } = imageData2;
 
   if (imageData[id]) {
-    imageData[id].url = updateImage({ id, url: base64, variableName: imageData[id].variableName });
+    imageData[id].url = base64toblob(base64);
     const { variableName } = imageData[id];
     document.documentElement.style.setProperty('--' + variableName, `url(${imageData[id].url})`);
   }
@@ -172,10 +172,10 @@ function removeImageFromDocument(variableName: string) {
   document.documentElement.style.removeProperty('--' + variableName);
 }
 
-export function updateImage(image: CustomImageBase64) {
+export function base64toblob(base64: string) {
   // Extract base64 data from the data URI
-  const base64Index = image.url.indexOf(',') + 1;
-  const imageBase64 = image.url.substring(base64Index);
+  const base64Index = base64.indexOf(',') + 1;
+  const imageBase64 = base64.substring(base64Index);
 
   // Convert base64 to blob
   const byteCharacters = atob(imageBase64);
@@ -233,6 +233,43 @@ const removeTheme = (theme: CustomTheme) => {
   });
 };
 
+const blobToBase64 = (blob: Blob) => {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const base64 = reader.result as string;
+      resolve(base64);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+};
+
+export const getTheme = async (themeId: string): Promise<CustomThemeBase64 | null> => {
+  try {
+    const theme = await localforage.getItem(themeId) as CustomTheme;
+    
+    const CustomImages: CustomImageBase64[] = await Promise.all(
+      theme.CustomImages.map(async (image) => {
+        const base64 = await blobToBase64(image.blob);
+        return {
+          id: image.id,
+          variableName: image.variableName,
+          url: base64,
+        };
+      })
+    );
+
+    return {
+      ...theme,
+      CustomImages,
+    };
+  } catch (error) {
+    console.error('Error getting theme:', error);
+    return null;
+  }
+}
+
 export const setTheme = async (themeId: string) => {
   try {
     const enabledTheme = await browser.storage.local.get('selectedTheme') as { selectedTheme: string };

src/seqta/utils/listeners/MessageListener.ts

@@ -1,7 +1,7 @@
 import browser from 'webextension-polyfill'
 
 import { MenuOptionsOpen, OpenMenuOptions, OpenWhatsNewPopup, closeSettings } from '../../../SEQTA';
-import { UpdateImageData, UpdateThemePreview, deleteTheme, disableTheme, getAvailableThemes, saveTheme, setTheme } from '../../ui/Themes';
+import { UpdateImageData, UpdateThemePreview, deleteTheme, disableTheme, getAvailableThemes, getTheme, saveTheme, setTheme } from '../../ui/Themes';
 import { CloseThemeCreator, OpenThemeCreator } from '../../ui/ThemeCreator';
 
 export class MessageHandler {
@@ -28,17 +28,12 @@ export class MessageHandler {
           sendResponse({ status: 'success' });
         }
         break;
-
-      case 'UpdateThemeImageData':
-        UpdateImageData(request.body);
-        sendResponse({ status: 'success' });
-        break;
-  
-      case 'SaveTheme':
-        saveTheme(request.body).then(() => {
-          sendResponse({ status: 'success' });
+      
+      case 'GetTheme':
+        getTheme(request.body.themeID).then((theme) => {
+          sendResponse(theme);
         });
-        break;
+        return true;
   
       case 'SetTheme':
         setTheme(request.body.themeID).then(() => {
@@ -71,7 +66,8 @@ export class MessageHandler {
         break;
   
       case 'OpenThemeCreator':
-        OpenThemeCreator();
+        const themeID = request?.body?.themeID;
+        OpenThemeCreator( themeID ? themeID : '' );
         closeSettings();
         sendResponse({ status: 'success' });
         break;