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

package/src/author/main.tsx

@@ -0,0 +1,498 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/drag-in-the-blank/configure/src/main.jsx
+ * @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 React from 'react';
+import PropTypes from 'prop-types';
+import EditableHtml, { ALL_PLUGINS } from '@pie-lib/editable-html-tip-tap';
+import { layout, settings } from '@pie-lib/config-ui';
+import { InputContainer as InputContainerImport } from '@pie-lib/render-ui';
+
+function isRenderableReactInteropType(value: any) {
+  return (
+    typeof value === 'function' ||
+    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')
+  );
+}
+
+function unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {
+  if (!maybeSymbol) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {
+    return maybeSymbol[namedExport];
+  }
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {
+    return maybeSymbol[namedExport].default;
+  }
+  return maybeSymbol;
+}
+const InputContainer = unwrapReactInteropSymbol(InputContainerImport, 'InputContainer') || unwrapReactInteropSymbol(renderUi.InputContainer, 'InputContainer');
+import * as RenderUiNamespace from '@pie-lib/render-ui';
+const renderUiNamespaceAny = RenderUiNamespace as any;
+const renderUiDefaultMaybe = renderUiNamespaceAny['default'];
+const renderUi =
+  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'
+    ? renderUiDefaultMaybe
+    : renderUiNamespaceAny;
+import { DragProvider } from '@pie-lib/drag';
+import { renderMath } from '@pie-element/shared-math-rendering-mathjax';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import Info from '@mui/icons-material/Info';
+import Tooltip from '@mui/material/Tooltip';
+import { DragOverlay } from '@dnd-kit/core';
+
+import Choice from './choice.js';
+import Choices from './choices.js';
+import { createSlateMarkup } from './markupUtils.js';
+import { generateValidationMessage } from './utils.js';
+
+class DragPreviewWrapper extends React.Component {
+  containerRef = React.createRef();
+
+  componentDidMount() {
+    // Render math in the drag preview after it mounts
+    setTimeout(() => {
+      if (this.containerRef.current) {
+        renderMath(this.containerRef.current);
+      }
+    }, 0);
+  }
+
+  componentDidUpdate() {
+    // Re-render math when the drag preview updates
+    setTimeout(() => {
+      if (this.containerRef.current) {
+        renderMath(this.containerRef.current);
+      }
+    }, 0);
+  }
+
+  render() {
+    return <div ref={this.containerRef}>{this.props.children}</div>;
+  }
+}
+
+const { dropdown, toggle, Panel } = settings;
+
+const StyledInputContainer: any = styled(InputContainer)(({ theme }) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+}));
+
+const StyledMarkup: any = styled('div')(({ theme }) => ({
+  minHeight: '235px',
+  paddingTop: theme.spacing(1),
+  paddingBottom: theme.spacing(2),
+  width: '100%',
+  '& [data-slate-editor="true"]': {
+    minHeight: '235px',
+  },
+}));
+
+const StyledText: any = styled(Typography)(({ theme }) => ({
+  fontSize: theme.typography.fontSize + 2,
+}));
+
+const StyledTooltip: any = styled(Tooltip)(({ theme }) => ({
+  '& .MuiTooltip-tooltip': {
+    fontSize: theme.typography.fontSize - 2,
+    whiteSpace: 'pre',
+    maxWidth: '500px',
+  },
+}));
+
+const ErrorText: any = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1),
+}));
+
+const FlexContainer: any = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export class Main extends React.Component {
+  static propTypes = {
+    configuration: PropTypes.object.isRequired,
+    model: PropTypes.object.isRequired,
+    disableSidePanel: PropTypes.bool,
+    onModelChanged: PropTypes.func.isRequired,
+    onConfigurationChanged: PropTypes.func.isRequired,
+    imageSupport: PropTypes.shape({
+      add: PropTypes.func.isRequired,
+      delete: PropTypes.func.isRequired,
+    }),
+    uploadSoundSupport: PropTypes.object,
+  };
+
+  state = {
+    activeDragItem: null,
+  };
+
+  constructor(props) {
+    super(props);
+    this.markupRef = React.createRef();
+  }
+
+  onModelChange: any = (newVal) => {
+    this.props.onModelChanged({
+      ...this.props.model,
+      ...newVal,
+    });
+  };
+
+  onPromptChanged: any = (prompt) => {
+    this.props.onModelChanged({
+      ...this.props.model,
+      prompt,
+    });
+  };
+
+  onRationaleChanged: any = (rationale) => {
+    this.props.onModelChanged({
+      ...this.props.model,
+      rationale,
+    });
+  };
+
+  onTeacherInstructionsChanged: any = (teacherInstructions) => {
+    this.props.onModelChanged({
+      ...this.props.model,
+      teacherInstructions,
+    });
+  };
+
+  onMarkupChanged: any = (slateMarkup) => {
+    this.props.onModelChanged({
+      ...this.props.model,
+      slateMarkup,
+    });
+  };
+
+  onResponsesChanged: any = (choices) => {
+    const {
+      model: { correctResponse, markup },
+    } = this.props;
+    const slateMarkup = createSlateMarkup(markup, choices, correctResponse);
+
+    this.props.onModelChanged({
+      ...this.props.model,
+      slateMarkup,
+      choices,
+    });
+  };
+
+  render() {
+    const { model, configuration, onConfigurationChanged, imageSupport, uploadSoundSupport } = this.props;
+    const {
+      addChoice = {},
+      baseInputConfiguration = {},
+      contentDimensions = {},
+      duplicates = {},
+      prompt = {},
+      partialScoring = {},
+      lockChoiceOrder = {},
+      rationale = {},
+      teacherInstructions = {},
+      choicesPosition = {},
+      spellCheck = {},
+      settingsPanelDisabled,
+      maxChoices,
+      maxResponseAreas,
+      maxImageWidth = {},
+      maxImageHeight = {},
+      withRubric = {},
+      mathMlOptions = {},
+      language = {},
+      languageChoices = {},
+      maxLength = {},
+    } = configuration || {};
+    const {
+      rationaleEnabled,
+      promptEnabled,
+      teacherInstructionsEnabled,
+      spellCheckEnabled,
+      toolbarEditorPosition,
+      errors,
+      extraCSSRules,
+    } = model || {};
+
+    const {
+      choicesError,
+      correctResponseError,
+      prompt: promptError,
+      rationale: rationaleError,
+      responseAreasError,
+      teacherInstructions: teacherInstructionsError,
+    } = errors || {};
+    const validationMessage = generateValidationMessage(configuration);
+
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom',
+    };
+
+    const panelSettings = {
+      partialScoring: partialScoring.settings && toggle(partialScoring.label),
+      duplicates: duplicates.settings && toggle(duplicates.label),
+      lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label),
+      choicesPosition: choicesPosition.settings && dropdown(choicesPosition.label, ['above', 'below', 'left', 'right']),
+      'language.enabled': language.settings && toggle(language.label, true),
+      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options),
+    };
+
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      rationaleEnabled: rationale.settings && toggle(rationale.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      promptEnabled: prompt.settings && toggle(prompt.label),
+      rubricEnabled: withRubric?.settings && toggle(withRubric?.label),
+    };
+
+    const getPluginProps = (props) => {
+      return Object.assign(
+        {
+          ...baseInputConfiguration,
+        },
+        props || {},
+      );
+    };
+
+
+    const onDragEnd = ({ active, over }) => {
+      // check if item was placed as a correct answer and then dropped outside of StyledMarkup component
+      if (active && !over) {
+        const drag = active.data.current;
+
+        if (drag && drag.type === 'drag-in-the-blank-placed-choice') {
+          if (this.markupRef.current) {
+            const markupBounds = this.markupRef.current.getBoundingClientRect();
+            const dropX = active.rect.current.translated?.x || 0;
+            const dropY = active.rect.current.translated?.y || 0;
+
+            const isOutsideMarkup = (
+              dropX < markupBounds.left ||
+              dropX > markupBounds.right ||
+              dropY < markupBounds.top ||
+              dropY > markupBounds.bottom
+            );
+
+            if (isOutsideMarkup && drag.onRemove && typeof drag.onRemove === 'function') {
+              drag.onRemove(drag);
+            }
+          }
+        }
+      }
+
+      if (!active || !over) {
+        this.setState({
+          activeDragItem: null,
+        });
+        return;
+      }
+
+      const drag = active.data.current;
+      const drop = over.data.current;
+
+      if (drop && typeof drop.onDrop === "function") {
+        drop.onDrop(drag, drop);
+        return;
+      }
+
+      if (drag && typeof drag.onDrop === "function") {
+        drag.onDrop(drag, drop);
+      }
+
+      this.setState({
+        activeDragItem: null,
+      });
+    };
+
+    const onDragStart = (event) => {
+      const { active } = event;
+
+      if (active?.data?.current) {
+        this.setState({
+          activeDragItem: active.data.current,
+        });
+      }
+    };
+
+    const renderDragOverlay = () => {
+      const { activeDragItem } = this.state;
+      const { model } = this.props;
+
+      if (!activeDragItem) return null;
+
+      if ((activeDragItem.type === 'drag-in-the-blank-choice' || activeDragItem.type === 'drag-in-the-blank-placed-choice') && activeDragItem.value) {
+        const choice = model.choices?.find(c => c.id === activeDragItem.value.id);
+
+        if (!choice) return null;
+
+        return <Choice choice={choice} />;
+      }
+    };
+
+    return (
+      <DragProvider onDragEnd={onDragEnd} onDragStart={onDragStart}>
+        <layout.ConfigLayout
+          extraCSSRules={extraCSSRules}
+          dimensions={contentDimensions}
+          hideSettings={settingsPanelDisabled}
+          settings={
+            <Panel
+              model={model}
+              configuration={configuration}
+              onChangeModel={(model) => this.onModelChange(model)}
+              onChangeConfiguration={(configuration) => onConfigurationChanged(configuration, true)}
+              groups={{
+                Settings: panelSettings,
+                Properties: panelProperties,
+              }}
+            />
+          }
+        >
+          {teacherInstructionsEnabled && (
+            <StyledInputContainer label={teacherInstructions.label}>
+              <EditableHtml
+                markup={model.teacherInstructions || ''}
+                onChange={this.onTeacherInstructionsChanged}
+                imageSupport={imageSupport}
+                nonEmpty={false}
+                error={teacherInstructionsError}
+                toolbarOpts={toolbarOpts}
+                pluginProps={getPluginProps(teacherInstructions?.inputConfiguration)}
+                spellCheck={spellCheckEnabled}
+                maxImageWidth={(maxImageWidth && maxImageWidth.teacherInstructions) || defaultImageMaxWidth}
+                maxImageHeight={(maxImageHeight && maxImageHeight.teacherInstructions) || defaultImageMaxHeight}
+                uploadSoundSupport={uploadSoundSupport}
+                languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+                mathMlOptions={mathMlOptions}
+              />
+              {teacherInstructionsError && <ErrorText>{teacherInstructionsError}</ErrorText>}
+            </StyledInputContainer>
+          )}
+
+          {promptEnabled && (
+            <StyledInputContainer label={prompt.label}>
+              <EditableHtml
+                markup={model.prompt}
+                onChange={this.onPromptChanged}
+                imageSupport={imageSupport}
+                nonEmpty={false}
+                disableUnderline
+                error={promptError}
+                toolbarOpts={toolbarOpts}
+                pluginProps={getPluginProps(prompt?.inputConfiguration)}
+                spellCheck={spellCheckEnabled}
+                maxImageWidth={defaultImageMaxWidth}
+                maxImageHeight={defaultImageMaxHeight}
+                uploadSoundSupport={uploadSoundSupport}
+                languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+                mathMlOptions={mathMlOptions}
+              />
+              {promptError && <ErrorText>{promptError}</ErrorText>}
+            </StyledInputContainer>
+          )}
+
+          <FlexContainer>
+            <StyledText component={'div'}>
+              Define Template, Choices, and Correct Responses
+            </StyledText>
+            <StyledTooltip
+              disableFocusListener
+              disableTouchListener
+              placement={'right'}
+              title={validationMessage}
+            >
+              <Info fontSize={'small'} color={'primary'} style={{ marginLeft: '5px' }} />
+            </StyledTooltip>
+          </FlexContainer>
+
+          <StyledMarkup ref={this.markupRef}>
+            <EditableHtml
+              activePlugins={ALL_PLUGINS}
+              responseAreaProps={{
+                type: 'drag-in-the-blank',
+                options: {
+                  duplicates: model.duplicates,
+                },
+                maxResponseAreas: maxResponseAreas,
+              }}
+              pluginProps={getPluginProps()}
+              markup={model.slateMarkup}
+              onChange={this.onMarkupChanged}
+              imageSupport={imageSupport}
+              disableImageAlignmentButtons={true}
+              nonEmpty={false}
+              disableUnderline
+              error={responseAreasError || correctResponseError}
+              toolbarOpts={toolbarOpts}
+              spellCheck={spellCheckEnabled}
+              uploadSoundSupport={uploadSoundSupport}
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+              mathMlOptions={mathMlOptions}
+            />
+          </StyledMarkup>
+          {responseAreasError && <ErrorText>{responseAreasError}</ErrorText>}
+          {correctResponseError && <ErrorText>{correctResponseError}</ErrorText>}
+
+          <Choices
+            model={model}
+            imageSupport={imageSupport}
+            duplicates={model.duplicates}
+            error={choicesError}
+            onChange={this.onResponsesChanged}
+            toolbarOpts={toolbarOpts}
+            maxChoices={maxChoices}
+            uploadSoundSupport={uploadSoundSupport}
+            mathMlOptions={mathMlOptions}
+            pluginProps={getPluginProps(addChoice?.inputConfiguration)}
+            maxImageWidth={(maxImageWidth && maxImageWidth.choice) || defaultImageMaxWidth}
+            maxImageHeight={(maxImageHeight && maxImageHeight.choice) || defaultImageMaxHeight}
+            maxLength={maxLength}
+          />
+
+          {rationaleEnabled && (
+            <StyledInputContainer label={rationale.label}>
+              <EditableHtml
+                markup={model.rationale || ''}
+                onChange={this.onRationaleChanged}
+                imageSupport={imageSupport}
+                error={rationaleError}
+                toolbarOpts={toolbarOpts}
+                pluginProps={getPluginProps(rationale?.inputConfiguration)}
+                spellCheck={spellCheckEnabled}
+                maxImageWidth={(maxImageWidth && maxImageWidth.rationale) || defaultImageMaxWidth}
+                maxImageHeight={(maxImageHeight && maxImageHeight.rationale) || defaultImageMaxHeight}
+                uploadSoundSupport={uploadSoundSupport}
+                languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+                mathMlOptions={mathMlOptions}
+              />
+              {rationaleError && <ErrorText>{rationaleError}</ErrorText>}
+            </StyledInputContainer>
+          )}
+        </layout.ConfigLayout>
+        <DragOverlay>
+          <DragPreviewWrapper>
+            {renderDragOverlay()}
+          </DragPreviewWrapper>
+        </DragOverlay>
+      </DragProvider>
+    );
+  }
+}
+
+export default Main;

package/src/author/markupUtils.tsx

@@ -0,0 +1,106 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/drag-in-the-blank/configure/src/markupUtils.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 { escape } from 'lodash-es';
+
+export const createElementFromHTML = (htmlString) => {
+  const div = document.createElement('div');
+
+  div.innerHTML = htmlString.trim();
+
+  return div;
+};
+
+// do not remove \t from \times, \triangle, \tan, \theta or \therefore
+const tSymbols = 'imes|riangle|an|heta|herefore';
+// do not remove \n from \nthroot, \nparallel, \ncong, \napprox, \neq, \ne or \nsim
+const nSymbols = 'throot|parallel|cong|approx|eq|e|sim';
+// match all \t and \n that are not part of math symbols that starts with \t or \n
+const matchTabAndNewLine = new RegExp(
+  `(\\t(?!${tSymbols}))|(\\n(?!${nSymbols}))|(\\\\t(?!${tSymbols}))|(\\\\n(?!${nSymbols}))`,
+  'g',
+);
+
+export const removeUnwantedCharacters = (markup) =>
+  markup.replace(matchTabAndNewLine, '').replace(/\\"/g, '"').replace(/\\\//g, '/');
+
+export const processMarkup = (markup) => {
+  const newMarkup = removeUnwantedCharacters(markup);
+  const slateMarkup = createElementFromHTML(newMarkup);
+  const choices = [];
+  let index = 0;
+
+  slateMarkup.querySelectorAll('[data-type="drag_in_the_blank"]').forEach((s) => {
+    let value = s.dataset.value && s.dataset.value.replace(/ /g, ' ').trim();
+
+    if (!value) {
+      value = '';
+    }
+
+    choices.push({
+      value,
+      id: s.dataset.id,
+    });
+
+    s.replaceWith(`{{${index++}}}`);
+  });
+
+  return {
+    markup: slateMarkup.innerHTML,
+    choices: choices,
+    correctResponse: choices.reduce((obj, c, index) => {
+      obj[index] = (c.id !== undefined  && c.id) || '';
+
+      return obj;
+    }, {}),
+  };
+};
+
+const REGEX = /\{\{(\d+)\}\}/g;
+
+export const createSlateMarkup = (markup, choices, correctResponse) => {
+  const newMarkup = removeUnwantedCharacters(markup);
+  let index = 0;
+
+  return newMarkup.replace(REGEX, (match, g) => {
+    const correctId = correctResponse[g];
+    let correctChoice = choices.find((c) => c.id === correctId);
+
+    if (!correctChoice || !correctChoice.value) {
+      correctChoice = {
+        id: '',
+        value: '',
+      };
+    }
+
+    return `<span data-type="drag_in_the_blank" data-index="${index++}" data-id="${
+      correctChoice.id
+    }" data-value="${escape(correctChoice.value)}"></span>`;
+  });
+};
+
+export const choiceIsEmpty = (choice) => {
+  if (choice) {
+    const { value = '' } = choice;
+    const domEl = createElementFromHTML(value);
+
+    Array.from(domEl.querySelectorAll('*')).forEach((domEl) => {
+      if (domEl.tagName !== 'IMG' && domEl.childNodes.length === 0) {
+        domEl.remove();
+      }
+    });
+
+    const newString = domEl.innerHTML.trim();
+
+    return newString === '';
+  }
+
+  return false;
+};

package/src/author/utils.ts

@@ -0,0 +1,27 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/drag-in-the-blank/configure/utils.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 const generateValidationMessage = (config) => {
+  let { maxResponseAreas, minChoices, maxChoices } = config;
+  minChoices = minChoices || 2;
+
+  const responseAreasMessage =
+    '\nThe tokens should ' +
+    'not be empty and should be unique.\nThere should be at least 1 ' +
+    (maxResponseAreas ? `and at most ${maxResponseAreas} ` : '') +
+    'response area' +
+    (maxResponseAreas ? 's' : '') +
+    ' defined.' +
+    `\nThere should be at least ${minChoices} ` +
+    (maxChoices ? `and at most ${maxChoices} ` : '') +
+    'tokens defined.';
+
+  return 'Validation requirements:' + responseAreasMessage;
+};

package/src/controller/defaults.ts

@@ -0,0 +1,27 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/drag-in-the-blank/controller/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 {
+  choices: [],
+  choicesPosition: 'below',
+  correctResponse: {},
+  disabled: false,
+  duplicates: true,
+  markup: '',
+  mode: 'gather',
+  prompt: '',
+  promptEnabled: true,
+  rationale: '',
+  rationaleEnabled: true,
+  studentInstructionsEnabled: true,
+  teacherInstructions: '',
+  teacherInstructionsEnabled: true,
+  toolbarEditorPosition: 'bottom',
+};