refactor: inject editor component during definition and add XML re-assembly to useQtiItem

Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>

Author: Abhishek-Punhani

contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/index.vue

@@ -64,7 +64,6 @@
   import { qtiEditorStrings } from '../../qtiEditorStrings';
   import { QuestionType } from '../../constants';
   import useQtiItem from '../../composables/useQtiItem';
-  import { assembleItemXml } from '../../serialization/assembleItem';
   import InteractionSection from '../InteractionSection/index.vue';
 
   export default {
@@ -81,7 +80,28 @@
         unknownTypeLabel$,
       } = qtiEditorStrings;
 
-      const { identifier, title, language, interactions } = useQtiItem(props.item.raw_data);
+      /**
+       * Track the current bodyXml and responseDeclarations for the interaction.
+       * Initialised after parsing; updated atomically when the editor emits
+       * update:interaction. Declared before useQtiItem so they can be passed in
+       * and observed by the rawData computed inside the composable.
+       */
+      const currentBodyXml = ref('');
+      const currentResponseDeclarations = ref([]);
+
+      // Parse the item XML. rawData is a computed inside useQtiItem that
+      // re-assembles the full XML whenever identifier/title/language or the
+      // editor refs change — no need to duplicate assembleItemXml here.
+      const { interactions, rawData } = useQtiItem(props.item.raw_data, {
+        bodyXml: currentBodyXml,
+        responseDeclarations: currentResponseDeclarations,
+      });
+
+      // Seed the editor refs from the parsed interactions (first interaction only).
+      if (interactions.value.length > 0) {
+        currentBodyXml.value = interactions.value[0].bodyXml;
+        currentResponseDeclarations.value = interactions.value[0].responseDeclarations;
+      }
 
       const questionNumberLabel = computed(() =>
         questionNumberLabel$({
@@ -118,33 +138,7 @@
         }),
       );
 
-      /**
-       * Track the current bodyXml and responseDeclarations for the interaction.
-       * Initialised from the parsed item; updated atomically when the editor
-       * emits update:interaction.
-       *
-       * Note: We are currently using only the first interaction, but this
-       * architecture is designed to be expansible to multiple interactions
-       * per question in the future.
-       */
-      const currentBodyXml = ref(
-        interactions.value.length > 0 ? interactions.value[0].bodyXml : '',
-      );
-      const currentResponseDeclarations = ref(
-        interactions.value.length > 0 ? interactions.value[0].responseDeclarations : [],
-      );
-
-      const rawData = computed(() =>
-        assembleItemXml({
-          identifier: identifier.value,
-          title: title.value,
-          language: language.value,
-          bodyXml: currentBodyXml.value,
-          responseDeclarations: currentResponseDeclarations.value,
-        }),
-      );
-
-      // Emit only when the assembled XML actually changes after initial mount
+      // Emit only when the assembled XML actually changes after initial mount.
       watch(rawData, newVal => {
         if (process.env.NODE_ENV === 'development') {
           // eslint-disable-next-line no-console

contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useQtiItem.js

@@ -1,31 +1,37 @@
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { parseItem } from '../serialization/parseItem';
+import { assembleItemXml } from '../serialization/assembleItem';
 
 /**
  * Composable that parses a raw QTI XML string once and exposes the
  * structured item model as reactive refs.
  *
- * Scope: read / parse only. No dirty tracking, no XML assembly, no emit-up.
+ * Optionally accepts reactive `bodyXml` and `responseDeclarations` refs
+ * (owned by the editor) and exposes a `rawData` computed that re-assembles
+ * the full item XML whenever any of the five values change.
  *
  * @param {string | null | undefined} rawData - Raw QTI XML string from item.raw_data
+ * @param {{ bodyXml?: import('vue').Ref<string>,
+ *   responseDeclarations?: import('vue').Ref<string[]> }} [editorRefs]
  * @returns {{
  *   identifier: import('vue').Ref<string>,
  *   title: import('vue').Ref<string>,
  *   language: import('vue').Ref<string>,
  *   interactions: import('vue').Ref<Array<{ bodyXml: string, responseDeclarations: string[] }>>,
  *   parseError: import('vue').Ref<string | null>,
+ *   rawData: import('vue').ComputedRef<string>,
  * }}
  */
-export default function useQtiItem(rawData) {
+export default function useQtiItem(rawXml, { bodyXml, responseDeclarations } = {}) {
   const identifier = ref('');
   const title = ref('');
   const language = ref('');
   const interactions = ref([]);
   const parseError = ref(null);
 
-  if (rawData) {
+  if (rawXml) {
     try {
-      const model = parseItem(rawData);
+      const model = parseItem(rawXml);
       identifier.value = model.identifier;
       title.value = model.title;
       language.value = model.language;
@@ -35,5 +41,20 @@ export default function useQtiItem(rawData) {
     }
   }
 
-  return { identifier, title, language, interactions, parseError };
+  /**
+   * Re-assembles the full QTI item XML whenever identifier, title, language,
+   * bodyXml, or responseDeclarations change. Only available when the caller
+   * passes in bodyXml and responseDeclarations refs.
+   */
+  const rawData = computed(() =>
+    assembleItemXml({
+      identifier: identifier.value,
+      title: title.value,
+      language: language.value,
+      bodyXml: bodyXml?.value ?? '',
+      responseDeclarations: responseDeclarations?.value ?? [],
+    }),
+  );
+
+  return { identifier, title, language, interactions, parseError, rawData };
 }

contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/__tests__/defineInteraction.spec.js

@@ -1,11 +1,11 @@
 import defineInteraction from '../defineInteraction';
 
-// A minimal valid descriptor with all required keys present.
+// A minimal valid descriptor with all required keys except editorComponent,
+// which is now always supplied as the second argument to defineInteraction.
 const makeValidDescriptor = (overrides = {}) => ({
   type: 'test',
   placement: 'block',
   questionTypes: [],
-  editorComponent: {},
   convertsFrom: [],
   matches: () => false,
   getQuestionType: () => null,
@@ -16,17 +16,27 @@ const makeValidDescriptor = (overrides = {}) => ({
   ...overrides,
 });
 
+const STUB_COMPONENT = {};
+
 describe('defineInteraction', () => {
   it('returns the descriptor unchanged when all required keys are present', () => {
     const descriptor = makeValidDescriptor();
-    expect(defineInteraction(descriptor)).toBe(descriptor);
+    expect(defineInteraction(descriptor, STUB_COMPONENT)).toBe(descriptor);
+  });
+
+  it('attaches the editorComponent from the second argument onto the descriptor', () => {
+    const descriptor = makeValidDescriptor();
+    const component = { name: 'MyEditor' };
+    defineInteraction(descriptor, component);
+    expect(descriptor.editorComponent).toBe(component);
   });
 
-  const REQUIRED_KEYS = [
+  // Keys that must be present on the descriptor itself (editorComponent is injected
+  // by defineInteraction from the second argument, so it is excluded here).
+  const REQUIRED_DESCRIPTOR_KEYS = [
     'type',
     'placement',
     'questionTypes',
-    'editorComponent',
     'convertsFrom',
     'matches',
     'getQuestionType',
@@ -36,24 +46,30 @@ describe('defineInteraction', () => {
     'validate',
   ];
 
-  it.each(REQUIRED_KEYS)('throws when the required key "%s" is missing', key => {
+  it.each(REQUIRED_DESCRIPTOR_KEYS)('throws when the required key "%s" is missing', key => {
     const descriptor = makeValidDescriptor();
     delete descriptor[key];
-    expect(() => defineInteraction(descriptor)).toThrow(
+    expect(() => defineInteraction(descriptor, STUB_COMPONENT)).toThrow(
       new RegExp(`missing required key "${key}"`, 'i'),
     );
   });
 
+  it('throws when editorComponent is not passed as the second argument', () => {
+    const descriptor = makeValidDescriptor();
+    // Calling with no second arg means editorComponent is undefined — still flagged.
+    expect(() => defineInteraction(descriptor)).toThrow(/missing required key "editorComponent"/i);
+  });
+
   it('includes the descriptor type in the error message when type is present', () => {
     const descriptor = makeValidDescriptor({ type: 'myPlugin' });
-    delete descriptor.editorComponent;
-    expect(() => defineInteraction(descriptor)).toThrow(/myPlugin/);
+    delete descriptor.buildXML; // delete a different key to trigger the error
+    expect(() => defineInteraction(descriptor, STUB_COMPONENT)).toThrow(/myPlugin/);
   });
 
   it('uses "(unknown)" in the error message when type is also missing', () => {
     const descriptor = makeValidDescriptor();
     delete descriptor.type;
-    delete descriptor.editorComponent;
-    expect(() => defineInteraction(descriptor)).toThrow(/\(unknown\)/);
+    delete descriptor.buildXML;
+    expect(() => defineInteraction(descriptor, STUB_COMPONENT)).toThrow(/\(unknown\)/);
   });
 });

contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/index.js

@@ -20,6 +20,4 @@ import { choiceInteractionDescriptor } from './ChoiceInteractionDescriptor';
  * @property {string}        orientation - From orientation attribute; default "vertical"
  */
 
-choiceInteractionDescriptor.editorComponent = ChoiceInteractionEditor;
-
-export default defineInteraction(choiceInteractionDescriptor);
+export default defineInteraction(choiceInteractionDescriptor, ChoiceInteractionEditor);

contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/defineInteraction.js

@@ -20,14 +20,25 @@ const REQUIRED_KEYS = [
  * Validates that a descriptor has every required key and returns it unchanged.
  * Throws at call-time (i.e. module import time) if any key is absent.
  *
+ * Pass the Vue editor component as the second argument to attach it to the
+ * descriptor here rather than mutating the descriptor after construction.
+ *
  * @template {object} T
  * @param {T} descriptor - The interaction descriptor to validate
- * @returns {T} The same descriptor, unmodified
+ * @param {object} editorComponent - The Vue component that edits this interaction
+ * @returns {T} The same descriptor, with editorComponent attached
  * @throws {Error} If any required key is missing from the descriptor
  */
-export default function defineInteraction(descriptor) {
+export default function defineInteraction(descriptor, editorComponent) {
+  // Attach editorComponent before validation so the required-key check can
+  // confirm it is present even when the descriptor class does not set it.
+  descriptor.editorComponent = editorComponent;
+
   for (const key of REQUIRED_KEYS) {
-    if (!(key in descriptor)) {
+    // Use a truthiness check for editorComponent (a Vue component object) so
+    // that passing `undefined` as the second argument is caught as missing.
+    const isMissing = key === 'editorComponent' ? !descriptor[key] : !(key in descriptor);
+    if (isMissing) {
       const name = descriptor.type ?? '(unknown)';
       throw new Error(`defineInteraction: missing required key "${key}" on descriptor "${name}"`);
     }