feat: add missing interactions to menus

Author: denisebroekman

src/app/app.html

@@ -7,6 +7,7 @@
     (fileNameChange)="fileName.set($event)"
     (newFile)="onNewFile()"
     (saveFile)="onSaveFile()"
+    (importXml)="onImportXml()"
     (exportXml)="onExportXml()"
     (loadFile)="onLoadFile($event)"
     (deleteFile)="onDeleteFile($event)"

src/app/app.ts

@@ -98,6 +98,16 @@ export class App {
     URL.revokeObjectURL(url);
   }
 
+  protected async onImportXml(): Promise<void> {
+    try {
+      await this.editorHost.importXml();
+      this.currentFileId.set(null);
+      this.fileName.set('imported-qti-item');
+    } catch {
+      this.errorMessage.set('Import failed: please choose a valid QTI XML file.');
+    }
+  }
+
   protected onLoadFile(fileId: string): void {
     const file = this.savedFiles().find((f) => f.id === fileId);
     if (!file) return;

src/app/components/editor-host/editor-host.ts

@@ -40,7 +40,10 @@ import {
   qtiEditorEventsExtension,
   type QtiContentChangeEventDetail,
 } from '../../../lib/qti-prosekit-integration/events';
+import { openXmlFilePicker } from '../../../lib/qti-prosekit-integration/import-xml';
 import { defineQtiExtension } from '../../../lib/qti-prosekit-integration/interactions-prosekit';
+import { defineSlashMenuGuardExtension } from '../../../lib/qti-prosekit-integration/slash-menu-guard';
+import { translateQti } from '@qti-editor/interaction-shared';
 
 const STORAGE_KEY = 'qti-editor-angular:prosemirror-doc:v1';
 
@@ -176,6 +179,30 @@ export class EditorHostComponent implements OnDestroy {
     }
   }
 
+  public async importXml(): Promise<void> {
+    try {
+      const result = await openXmlFilePicker({ schema: this.editor.schema });
+      this.editor.setContent(result.json);
+
+      if (result.metadata && (result.metadata.identifier || result.metadata.title)) {
+        const detail = {
+          identifier: result.metadata.identifier || this.identifier(),
+          title: result.metadata.title || this.itemTitle(),
+        };
+
+        if (this.composerRef) {
+          this.composerRef.nativeElement.identifier = detail.identifier;
+          this.composerRef.nativeElement.title = detail.title;
+        }
+
+        this.metadataChange.emit(detail);
+      }
+    } catch (error) {
+      console.error('[QTI Editor] Failed to import XML:', error);
+      throw error;
+    }
+  }
+
   protected onMetadataChange(event: Event): void {
     const detail = (event as CustomEvent<{ title: string; identifier: string }>).detail;
     // Update composerRef immediately so the preview reflects the change before
@@ -191,11 +218,24 @@ export class EditorHostComponent implements OnDestroy {
     const extension = union(
       defineQtiExtension(),
       defineSemanticPasteExtension(),
+      defineSlashMenuGuardExtension(),
       defineLocalStorageDocPersistenceExtension({ storageKey: STORAGE_KEY }),
       blockSelectExtension,
       nodeAttrsSyncExtension,
       qtiEditorEventsExtension({ eventTarget: this.eventTarget }),
-      definePlaceholder({ placeholder: 'Typ / voor opdrachten', strategy: 'block' }),
+      definePlaceholder({
+        placeholder: (state) => {
+          const { $anchor } = state.selection;
+
+          for (let depth = $anchor.depth; depth > 0; depth -= 1) {
+            const placeholder = $anchor.node(depth).type.spec['placeholder'];
+            if (placeholder) return placeholder;
+          }
+
+          return translateQti('editor.placeholder', { target: document.body });
+        },
+        strategy: 'block',
+      }),
     );
 
     if (defaultContent) {

src/app/components/menu-bar/menu-bar.html

@@ -20,6 +20,15 @@
     Save
   </button>
 
+  <button type="button" class="menu-btn" (click)="importXml.emit()">
+    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+      <polyline points="17 8 12 3 7 8"/>
+      <line x1="12" y1="3" x2="12" y2="15"/>
+    </svg>
+    Import XML
+  </button>
+
   <button type="button" class="menu-btn" (click)="exportXml.emit()">
     <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
       <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>

src/app/components/menu-bar/menu-bar.ts

@@ -32,6 +32,7 @@ export class MenuBarComponent {
   readonly fileNameChange = output<string>();
   readonly newFile = output<void>();
   readonly saveFile = output<void>();
+  readonly importXml = output<void>();
   readonly exportXml = output<void>();
   readonly loadFile = output<string>();
   readonly deleteFile = output<string>();

src/components/blocks/interaction-insert-menu/index.ts

@@ -13,6 +13,8 @@ import { insertSelectPointInteraction } from '@qti-editor/interaction-select-poi
 import { insertInlineChoiceInteraction } from '@qti-editor/interaction-inline-choice';
 import { insertAssociateInteraction } from '@qti-editor/interaction-associate';
 import { insertHottextInteraction } from '@qti-editor/interaction-hottext';
+import { insertGap, insertGapMatchInteraction } from '../../../vendor/interaction-gap-match/dist/index.js';
+import { insertItemDivider } from '../../../vendor/qti-item-divider/dist/index.js';
 
 import type { EditorView } from 'prosekit/pm/view';
 
@@ -43,6 +45,20 @@ function canInsert(view: EditorView, nodeType: any): boolean {
   return false;
 }
 
+function canInsertInline(view: EditorView, nodeType: any): boolean {
+  const { $from } = view.state.selection;
+  for (let depth = $from.depth; depth >= 0; depth -= 1) {
+    const node = $from.node(depth);
+    if (!node.type.inlineContent) continue;
+
+    const index = $from.index(depth);
+    if (node.canReplaceWith(index, index, nodeType)) {
+      return true;
+    }
+  }
+  return false;
+}
+
 function isSelectionInsideNodeType(view: EditorView, nodeType: any): boolean {
   const { $from } = view.state.selection;
   for (let depth = $from.depth; depth >= 0; depth -= 1) {
@@ -57,6 +73,18 @@ function getInteractionInsertItems(view: EditorView): InteractionInsertItem[] {
   const schema: any = view.state.schema;
   const items: InteractionInsertItem[] = [];
 
+  if (schema.nodes.qtiAssociateInteraction && schema.nodes.qtiSimpleAssociableChoice) {
+    const nodeType = schema.nodes.qtiAssociateInteraction;
+    items.push({
+      label: translateQti('interactionInsert.associate', { target: view.dom }),
+      canInsert: canInsert(view, nodeType),
+      command: () => {
+        insertAssociateInteraction(view.state, view.dispatch, view);
+        view.focus();
+      },
+    });
+  }
+
   if (
     schema.nodes.qtiChoiceInteraction &&
     schema.nodes.qtiPrompt &&
@@ -75,27 +103,45 @@ function getInteractionInsertItems(view: EditorView): InteractionInsertItem[] {
     });
   }
 
-  if (schema.nodes.qtiTextEntryInteraction) {
-    const nodeType = schema.nodes.qtiTextEntryInteraction;
+  if (schema.nodes.qtiExtendedTextInteraction) {
+    const nodeType = schema.nodes.qtiExtendedTextInteraction;
     items.push({
-      label: translateQti('interactionInsert.textEntry', { target: view.dom }),
+      label: translateQti('interactionInsert.extendedText', { target: view.dom }),
       canInsert: canInsert(view, nodeType),
       command: () => {
-        const node = nodeType.createAndFill({ responseIdentifier: `RESPONSE_${crypto.randomUUID()}` });
-        if (!node) return;
-        view.dispatch(view.state.tr.replaceSelectionWith(node));
+        insertExtendedTextInteraction(view.state, view.dispatch, view);
         view.focus();
       },
     });
   }
 
-  if (schema.nodes.qtiSelectPointInteraction) {
-    const nodeType = schema.nodes.qtiSelectPointInteraction;
+  if (schema.nodes.qtiGapMatchInteraction && schema.nodes.qtiGapText && schema.nodes.qtiGap) {
+    const nodeType = schema.nodes.qtiGapMatchInteraction;
     items.push({
-      label: translateQti('interactionInsert.selectPoint', { target: view.dom }),
+      label: translateQti('interactionInsert.gapMatch', { target: view.dom }),
       canInsert: canInsert(view, nodeType),
       command: () => {
-        insertSelectPointInteraction(view.state, view.dispatch, view);
+        insertGapMatchInteraction(view.state, view.dispatch, view);
+        view.focus();
+      },
+    });
+    items.push({
+      label: translateQti('interactionInsert.gap', { target: view.dom }),
+      canInsert: insertGap(view.state),
+      command: () => {
+        insertGap(view.state, view.dispatch);
+        view.focus();
+      },
+    });
+  }
+
+  if (schema.nodes.qtiHottextInteraction && schema.nodes.qtiHottext) {
+    const nodeType = schema.nodes.qtiHottextInteraction;
+    items.push({
+      label: translateQti('interactionInsert.hottext', { target: view.dom }),
+      canInsert: canInsert(view, nodeType),
+      command: () => {
+        insertHottextInteraction(view.state, view.dispatch, view);
         view.focus();
       },
     });
@@ -105,7 +151,7 @@ function getInteractionInsertItems(view: EditorView): InteractionInsertItem[] {
     const nodeType = schema.nodes.qtiInlineChoiceInteraction;
     items.push({
       label: translateQti('interactionInsert.inlineChoice', { target: view.dom }),
-      canInsert: !isSelectionInsideNodeType(view, nodeType) && canInsert(view, nodeType),
+      canInsert: !isSelectionInsideNodeType(view, nodeType) && canInsertInline(view, nodeType),
       command: () => {
         insertInlineChoiceInteraction(view.state, view.dispatch, view);
         view.focus();
@@ -125,52 +171,51 @@ function getInteractionInsertItems(view: EditorView): InteractionInsertItem[] {
     });
   }
 
-  if (
-    schema.nodes.qtiAssociateInteraction &&
-    schema.nodes.qtiSimpleAssociableChoice
-  ) {
-    const nodeType = schema.nodes.qtiAssociateInteraction;
+  if (schema.nodes.qtiOrderInteraction && schema.nodes.qtiSimpleChoice) {
+    const nodeType = schema.nodes.qtiOrderInteraction;
     items.push({
-      label: translateQti('interactionInsert.associate', { target: view.dom }),
+      label: translateQti('interactionInsert.order', { target: view.dom }),
       canInsert: canInsert(view, nodeType),
       command: () => {
-        insertAssociateInteraction(view.state, view.dispatch, view);
+        insertOrderInteraction(view.state, view.dispatch, view);
         view.focus();
       },
     });
   }
 
-  if (schema.nodes.qtiOrderInteraction && schema.nodes.qtiSimpleChoice) {
-    const nodeType = schema.nodes.qtiOrderInteraction;
+  if (schema.nodes.qtiSelectPointInteraction) {
+    const nodeType = schema.nodes.qtiSelectPointInteraction;
     items.push({
-      label: translateQti('interactionInsert.order', { target: view.dom }),
+      label: translateQti('interactionInsert.selectPoint', { target: view.dom }),
       canInsert: canInsert(view, nodeType),
       command: () => {
-        insertOrderInteraction(view.state, view.dispatch, view);
+        insertSelectPointInteraction(view.state, view.dispatch, view);
         view.focus();
       },
     });
   }
 
-  if (schema.nodes.qtiHottextInteraction && schema.nodes.qtiHottext) {
-    const nodeType = schema.nodes.qtiHottextInteraction;
+  if (schema.nodes.qtiTextEntryInteraction) {
+    const nodeType = schema.nodes.qtiTextEntryInteraction;
     items.push({
-      label: translateQti('interactionInsert.hottext', { target: view.dom }),
-      canInsert: canInsert(view, nodeType),
+      label: translateQti('interactionInsert.textEntry', { target: view.dom }),
+      canInsert: canInsertInline(view, nodeType),
       command: () => {
-        insertHottextInteraction(view.state, view.dispatch, view);
+        const node = nodeType.createAndFill({ responseIdentifier: `RESPONSE_${crypto.randomUUID()}` });
+        if (!node) return;
+        view.dispatch(view.state.tr.replaceSelectionWith(node));
         view.focus();
       },
     });
   }
 
-  if (schema.nodes.qtiExtendedTextInteraction) {
-    const nodeType = schema.nodes.qtiExtendedTextInteraction;
+  if (schema.nodes.qtiItemDivider) {
+    const nodeType = schema.nodes.qtiItemDivider;
     items.push({
-      label: translateQti('interactionInsert.extendedText', { target: view.dom }),
+      label: translateQti('interactionInsert.itemDivider', { target: view.dom }),
       canInsert: canInsert(view, nodeType),
       command: () => {
-        insertExtendedTextInteraction(view.state, view.dispatch, view);
+        insertItemDivider(view.state, view.dispatch);
         view.focus();
       },
     });

src/components/editor/ui/slash-menu/slash-menu.js

@@ -19,6 +19,8 @@ import { insertHottextInteraction } from '@qti-editor/interaction-hottext';
 import { insertMatchInteraction } from '@qti-editor/interaction-match';
 import { insertOrderInteraction } from '@qti-editor/interaction-order';
 import { insertSelectPointInteraction } from '@qti-editor/interaction-select-point';
+import { insertGapMatchInteraction } from '../../../../vendor/interaction-gap-match/dist/index.js';
+import { insertItemDivider } from '../../../../vendor/qti-item-divider/dist/index.js';
 
 // Match inputs like "/", "/table", "/heading 1" etc. Do not match "/ heading".
 const regex = canUseRegexLookbehind() ? /(?<!\S)\/(\S.*)?$/u : /\/(\S.*)?$/u
@@ -53,6 +55,10 @@ class SlashMenuElement extends LitElement {
     editor: {
       attribute: false
     },
+    disabled: {
+      type: Boolean,
+      reflect: true,
+    },
   };
 
   removeUpdateExtension;
@@ -166,7 +172,7 @@ class SlashMenuElement extends LitElement {
 
     return html`<prosekit-autocomplete-popover
       .editor=${editor}
-      .regex=${regex}
+      .regex=${this.disabled ? null : regex}
       class="relative block max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1 z-10 box-border rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg [&:not([data-state])]:hidden"
     >
       <prosekit-autocomplete-list .editor=${editor}>
@@ -214,6 +220,26 @@ class SlashMenuElement extends LitElement {
               ></lit-editor-slash-menu-item>
             `
           : ''}
+        ${schema?.nodes.qtiGapMatchInteraction
+          ? html`
+              <lit-editor-slash-menu-item
+                class="contents"
+                label="Gap match interaction"
+                ?disabled=${!canInsert(view, schema.nodes.qtiGapMatchInteraction)}
+                @select=${() => this.runViewCommand((currentView) => insertGapMatchInteraction(currentView.state, currentView.dispatch, currentView))}
+              ></lit-editor-slash-menu-item>
+            `
+          : ''}
+        ${schema?.nodes.qtiItemDivider
+          ? html`
+              <lit-editor-slash-menu-item
+                class="contents"
+                label="Item divider"
+                ?disabled=${!canInsert(view, schema.nodes.qtiItemDivider)}
+                @select=${() => this.runViewCommand((currentView) => insertItemDivider(currentView.state, currentView.dispatch))}
+              ></lit-editor-slash-menu-item>
+            `
+          : ''}
         ${schema?.nodes.qtiMatchInteraction
           ? html`
               <lit-editor-slash-menu-item