feat: some fixes, add import/export

Author: denisebroekman

angular.json

@@ -18,6 +18,7 @@
           "options": {
             "browser": "src/main.ts",
             "tsConfig": "tsconfig.app.json",
+            "allowedCommonJsDependencies": ["jszip"],
             "assets": [
               {
                 "glob": "**/*",

package.json

@@ -39,6 +39,7 @@
     "@qti-editor/prosemirror-attributes-ui-prosekit": "^0.1.0",
     "@qti-editor/qti-item-divider": "^1.1.0",
     "daisyui": "^5.1.6",
+    "jszip": "^3.10.1",
     "lit": "^3.3.2",
     "prosekit": "^0.20.1",
     "rxjs": "~7.8.0",
@@ -49,6 +50,7 @@
     "@angular/cli": "^21.2.6",
     "@angular/compiler-cli": "^21.2.0",
     "@tailwindcss/postcss": "^4.1.18",
+    "@types/jszip": "^3.4.1",
     "jsdom": "^28.0.0",
     "postcss": "^8.5.6",
     "prettier": "^3.8.1",

pnpm-lock.yaml

@@ -4,11 +4,12 @@
     [fileName]="fileName()"
     [savedFiles]="savedFiles()"
     [currentFileId]="currentFileId()"
-    (fileNameChange)="fileName.set($event)"
+    (fileNameChange)="onFileNameChange($event)"
     (newFile)="onNewFile()"
     (saveFile)="onSaveFile()"
     (importXml)="onImportXml()"
     (exportXml)="onExportXml()"
+    (exportPackage)="onExportPackage()"
     (loadFile)="onLoadFile($event)"
     (deleteFile)="onDeleteFile($event)"
   ></app-menu-bar>

src/app/app.html

@@ -103,11 +103,29 @@ export class App {
       await this.editorHost.importXml();
       this.currentFileId.set(null);
       this.fileName.set('imported-qti-item');
+      this.onSaveFile();
     } catch {
-      this.errorMessage.set('Import failed: please choose a valid QTI XML file.');
+      this.errorMessage.set('Import failed: please choose a valid QTI XML or ZIP package file.');
     }
   }
 
+  protected async onExportPackage(): Promise<void> {
+    let blob: Blob;
+    try {
+      blob = await this.editorHost.exportPackage();
+    } catch {
+      this.errorMessage.set('Export failed: could not generate QTI package.');
+      return;
+    }
+
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${this.safeFileName()}.zip`;
+    link.click();
+    URL.revokeObjectURL(url);
+  }
+
   protected onLoadFile(fileId: string): void {
     const file = this.savedFiles().find((f) => f.id === fileId);
     if (!file) return;
@@ -133,6 +151,11 @@ export class App {
     }
   }
 
+  protected onFileNameChange(name: string): void {
+    this.fileName.set(name);
+    this.onSaveFile();
+  }
+
   protected onContentChange(detail: QtiContentChangeEventDetail): void {
     this.content.set(detail);
   }