@pie-element/drag-in-the-blank 0.1.0

package/src/author/defaults.ts

@@ -0,0 +1,132 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/drag-in-the-blank/configure/src/defaults.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+export default {
+  model: {
+    choices: [],
+    choicesPosition: 'below',
+    correctResponse: {},
+    disabled: false,
+    duplicates: true,
+    markup: '',
+    mode: 'gather',
+    prompt: '',
+    promptEnabled: true,
+    rationale: '',
+    rationaleEnabled: true,
+    studentInstructionsEnabled: true,
+    teacherInstructions: '',
+    teacherInstructionsEnabled: true,
+    toolbarEditorPosition: 'bottom',
+  },
+  configuration: {
+    baseInputConfiguration: {
+      audio: { disabled: false },
+      video: { disabled: false },
+      image: { disabled: false },
+      h3: { disabled: true },
+      blockquote: { disabled: true },
+      textAlign: { disabled: true },
+      showParagraphs: { disabled: false },
+      separateParagraphs: { disabled: true },
+    },
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true,
+    },
+    choicesPosition: {
+      settings: true,
+      label: 'Choices Position',
+    },
+    prompt: {
+      settings: true,
+      label: 'Prompt',
+      inputConfiguration: {
+        audio: { disabled: false },
+        video: { disabled: false },
+        image: { disabled: false },
+      },
+      required: false,
+    },
+    addChoice: {
+      inputConfiguration: {
+        audio: { disabled: true },
+        video: { disabled: true },
+        image: { disabled: false },
+      },
+    },
+    duplicates: {
+      settings: true,
+      label: 'Duplicates',
+    },
+    lockChoiceOrder: {
+      settings: true,
+      label: 'Lock Choice Order',
+    },
+    partialScoring: {
+      settings: false,
+      label: 'Allow Partial Scoring',
+    },
+    rationale: {
+      settings: true,
+      label: 'Rationale',
+      inputConfiguration: {
+        audio: { disabled: false },
+        video: { disabled: false },
+        image: { disabled: false },
+      },
+      required: false,
+    },
+    settingsPanelDisabled: false,
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions',
+      inputConfiguration: {
+        audio: { disabled: false },
+        video: { disabled: false },
+        image: { disabled: false },
+      },
+      required: false,
+    },
+    minChoices: 2,
+    maxResponseAreas: 10,
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300,
+      choice: 300,
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300,
+      choice: 300,
+    },
+    withRubric: {
+      settings: false,
+      label: 'Add Rubric',
+    },
+    mathMlOptions: {
+      mmlOutput: false,
+      mmlEditing: false,
+    },
+    language: {
+      settings: false,
+      label: 'Specify Language',
+      enabled: false,
+    },
+    languageChoices: {
+      label: 'Language Choices',
+      options: [],
+    },
+    maxLength: 200
+  },
+};

package/src/author/index.tsx

@@ -0,0 +1,176 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/drag-in-the-blank/configure/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import {
+  ModelUpdatedEvent,
+  DeleteImageEvent,
+  InsertImageEvent,
+  InsertSoundEvent,
+  DeleteSoundEvent,
+} from '@pie-element/shared-configure-events';
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { renderMath } from '@pie-element/shared-math-rendering-mathjax';
+import Main from './main.js';
+import debug from 'debug';
+import { defaults } from 'lodash-es';
+
+import sensibleDefaults from './defaults.js';
+import { processMarkup, createSlateMarkup } from './markupUtils.js';
+
+const log = debug('multiple-choice:configure');
+
+export default class DragInTheBlank extends HTMLElement {
+  static prepareModel = (model = {}) => {
+    const joinedObj = {
+      ...sensibleDefaults.model,
+      ...model,
+    };
+    const slateMarkup =
+      model.slateMarkup || createSlateMarkup(joinedObj.markup, joinedObj.choices, joinedObj.correctResponse);
+    const processedMarkup = processMarkup(slateMarkup);
+
+    return {
+      ...joinedObj,
+      slateMarkup,
+      markup: processedMarkup.markup,
+      correctResponse: processedMarkup.correctResponse,
+    };
+  };
+
+  constructor() {
+    super();
+    this._root = null;
+    this._model = DragInTheBlank.prepareModel();
+    this._configuration = sensibleDefaults.configuration;
+    this.onModelChanged = this.onModelChanged.bind(this);
+    this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
+  }
+
+  set model(m) {
+    const formModel = {
+      ...m,
+      markup: `<div>${m.markup || sensibleDefaults.model.markup}</div>`,
+    };
+
+    this._model = DragInTheBlank.prepareModel(formModel);
+    this._render();
+  }
+
+  set configuration(c) {
+    const newConfiguration = defaults(c, sensibleDefaults.configuration);
+
+    this._configuration = newConfiguration;
+
+    // if language:enabled is true, then the corresponding default item model should include a language value;
+    // if it is false, then the language field should be omitted from the item model.
+    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,
+    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).
+    if (newConfiguration?.language?.enabled) {
+      if (newConfiguration?.languageChoices?.options?.length) {
+        this._model.language = newConfiguration?.languageChoices.options[0].value;
+      }
+    } else if (newConfiguration.language.settings && this._model.language) {
+      this._configuration.language.enabled = true;
+
+      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {
+        this._configuration.languageChoices.options = [];
+      }
+
+      // check if the language is already included in the languageChoices.options array
+      // and if not, then add it.
+      if (!this._configuration.languageChoices.options.find(option => option.value === this._model.language)) {
+        this._configuration.languageChoices.options.push({
+          value: this._model.language,
+          label: this._model.language,
+        });
+      }
+    } else {
+      delete this._model.language;
+    }
+
+    this._render();
+  }
+
+  set disableSidePanel(s) {
+    this._disableSidePanel = s;
+    this._render();
+  }
+
+  dispatchModelUpdated(reset) {
+    const resetValue = !!reset;
+
+    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));
+  }
+
+  onModelChanged(m, reset) {
+    this._model = DragInTheBlank.prepareModel(m);
+    this._render();
+    this.dispatchModelUpdated(reset);
+  }
+
+  onConfigurationChanged(c) {
+    this._configuration = c;
+    this._render();
+  }
+
+  /** @param {done, progress, file} handler */
+  insertImage(handler) {
+    this.dispatchEvent(new InsertImageEvent(handler));
+  }
+
+  onDeleteImage(src, done) {
+    this.dispatchEvent(new DeleteImageEvent(src, done));
+  }
+
+  insertSound(handler) {
+    this.dispatchEvent(new InsertSoundEvent(handler));
+  }
+
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new DeleteSoundEvent(src, done));
+  }
+
+  _render() {
+    log('_render');
+
+    let element = React.createElement(Main, {
+      model: this._model,
+      configuration: this._configuration,
+      onModelChanged: this.onModelChanged,
+      onConfigurationChanged: this.onConfigurationChanged,
+      disableSidePanel: this._disableSidePanel,
+      imageSupport: {
+        add: this.insertImage.bind(this),
+        delete: this.onDeleteImage.bind(this),
+      },
+      uploadSoundSupport: {
+        add: this.insertSound.bind(this),
+        delete: this.onDeleteSound.bind(this),
+      },
+    });
+
+    if (!this._root) {
+      this._root = createRoot(this);
+    }
+    this._root.render(element);
+
+    setTimeout(() => {
+      renderMath(this);
+    }, 0);
+  }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}