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

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isLength.js

@@ -0,0 +1,7 @@
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isLength.js
+var e = 9007199254740991;
+function t(t) {
+	return typeof t == "number" && t > -1 && t % 1 == 0 && t <= e;
+}
+//#endregion
+export { t as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isMap.js

@@ -0,0 +1,7 @@
+import e from "./_baseUnary.js";
+import t from "./_nodeUtil.js";
+import n from "./_baseIsMap.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isMap.js
+var r = t && t.isMap, i = r ? e(r) : n;
+//#endregion
+export { i as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isObject.js

@@ -0,0 +1,7 @@
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isObject.js
+function e(e) {
+	var t = typeof e;
+	return e != null && (t == "object" || t == "function");
+}
+//#endregion
+export { e as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isObjectLike.js

@@ -0,0 +1,6 @@
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isObjectLike.js
+function e(e) {
+	return typeof e == "object" && !!e;
+}
+//#endregion
+export { e as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isSet.js

@@ -0,0 +1,7 @@
+import e from "./_baseUnary.js";
+import t from "./_nodeUtil.js";
+import n from "./_baseIsSet.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isSet.js
+var r = t && t.isSet, i = r ? e(r) : n;
+//#endregion
+export { i as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isSymbol.js

@@ -0,0 +1,9 @@
+import e from "./_baseGetTag.js";
+import t from "./isObjectLike.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isSymbol.js
+var n = "[object Symbol]";
+function r(r) {
+	return typeof r == "symbol" || t(r) && e(r) == n;
+}
+//#endregion
+export { r as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isTypedArray.js

@@ -0,0 +1,7 @@
+import e from "./_baseIsTypedArray.js";
+import t from "./_baseUnary.js";
+import n from "./_nodeUtil.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isTypedArray.js
+var r = n && n.isTypedArray, i = r ? t(r) : e;
+//#endregion
+export { i as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/keys.js

@@ -0,0 +1,9 @@
+import e from "./isArrayLike.js";
+import t from "./_arrayLikeKeys.js";
+import n from "./_baseKeys.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/keys.js
+function r(r) {
+	return e(r) ? t(r) : n(r);
+}
+//#endregion
+export { r as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/keysIn.js

@@ -0,0 +1,9 @@
+import e from "./isArrayLike.js";
+import t from "./_arrayLikeKeys.js";
+import n from "./_baseKeysIn.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/keysIn.js
+function r(r) {
+	return e(r) ? t(r, !0) : n(r);
+}
+//#endregion
+export { r as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/memoize.js

@@ -0,0 +1,16 @@
+import e from "./_MapCache.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/memoize.js
+var t = "Expected a function";
+function n(r, i) {
+	if (typeof r != "function" || i != null && typeof i != "function") throw TypeError(t);
+	var a = function() {
+		var e = arguments, t = i ? i.apply(this, e) : e[0], n = a.cache;
+		if (n.has(t)) return n.get(t);
+		var o = r.apply(this, e);
+		return a.cache = n.set(t, o) || n, o;
+	};
+	return a.cache = new (n.Cache || e)(), a;
+}
+n.Cache = e;
+//#endregion
+export { n as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/property.js

@@ -0,0 +1,10 @@
+import e from "./_isKey.js";
+import t from "./_toKey.js";
+import n from "./_baseProperty.js";
+import r from "./_basePropertyDeep.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/property.js
+function i(i) {
+	return e(i) ? n(t(i)) : r(i);
+}
+//#endregion
+export { i as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/reduce.js

@@ -0,0 +1,12 @@
+import e from "./isArray.js";
+import t from "./_arrayReduce.js";
+import n from "./_baseIteratee.js";
+import r from "./_baseEach.js";
+import i from "./_baseReduce.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/reduce.js
+function a(a, o, s) {
+	var c = e(a) ? t : i, l = arguments.length < 3;
+	return c(a, n(o, 4), s, l, r);
+}
+//#endregion
+export { a as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/stubArray.js

@@ -0,0 +1,6 @@
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/stubArray.js
+function e() {
+	return [];
+}
+//#endregion
+export { e as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/stubFalse.js

@@ -0,0 +1,6 @@
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/stubFalse.js
+function e() {
+	return !1;
+}
+//#endregion
+export { e as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/toString.js

@@ -0,0 +1,7 @@
+import e from "./_baseToString.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/toString.js
+function t(t) {
+	return t == null ? "" : e(t);
+}
+//#endregion
+export { t as default };

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@pie-element/drag-in-the-blank",
+  "version": "0.1.0",
+  "description": "",
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/correct-answer-toggle": "0.1.0",
+    "@pie-lib/drag": "0.1.0",
+    "@pie-lib/mask-markup": "0.1.0",
+    "@pie-lib/render-ui": "0.1.0",
+    "lodash-es": "^4.17.23",
+    "prop-types": "^15.6.1",
+    "@pie-lib/editable-html-tip-tap": "0.1.0",
+    "@pie-lib/config-ui": "0.1.0",
+    "@pie-element/shared-math-rendering-mathjax": "0.1.0",
+    "@pie-element/shared-configure-events": "0.1.0",
+    "@pie-element/shared-controller-utils": "0.1.0",
+    "@pie-element/shared-player-events": "0.1.0",
+    "@dnd-kit/core": "6.3.1",
+    "debug": "^4.1.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "exports": {
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./delivery": {
+      "development": "./src/delivery/index.ts",
+      "types": "./dist/delivery/index.d.ts",
+      "default": "./dist/delivery/index.js"
+    },
+    "./author": {
+      "development": "./src/author/index.tsx",
+      "types": "./dist/author/index.d.ts",
+      "default": "./dist/author/index.js"
+    },
+    "./controller": {
+      "development": "./src/controller/index.ts",
+      "types": "./dist/controller/index.d.ts",
+      "default": "./dist/controller/index.js"
+    }
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "devDependencies": {
+    "vite": "^8.0.1",
+    "typescript": "^5.9.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "build": "bun x vite build && bun x vite build --config vite.config.iife.ts && bun x tsc --emitDeclarationOnly",
+    "dev": "bun x vite",
+    "demo": "bun x vite --mode demo",
+    "test": "bun x vitest run"
+  }
+}

package/src/author/choice.tsx

@@ -0,0 +1,132 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/drag-in-the-blank/configure/src/choice.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 MoreVert from '@mui/icons-material/MoreVert';
+import Delete from '@mui/icons-material/Delete';
+import { useDraggable } from '@dnd-kit/core';
+import { styled } from '@mui/material/styles';
+import { choiceIsEmpty } from './markupUtils.js';
+
+const GripIcon = ({ style }) => (
+  <span style={style}>
+    <MoreVert style={{ margin: '0 -16px' }} />
+    <MoreVert />
+  </span>
+);
+
+GripIcon.propTypes = {
+  style: PropTypes.object,
+};
+
+const StyledChoice: any = styled('div', {
+  shouldForwardProp: (prop) => !['error', 'isDragging'].includes(prop),
+})(({ theme, error }) => ({
+  display: 'inline-flex',
+  minWidth: '178px',
+  minHeight: '36px',
+  background: theme.palette.common.white,
+  boxSizing: 'border-box',
+  borderRadius: '3px',
+  overflow: 'hidden',
+  position: 'relative',
+  padding: '8px 35px 8px 35px',
+  cursor: 'grab',
+  border: `1px solid ${error ? '#f44336' : '#C0C3CF'}`,
+  '& img': {
+    display: 'flex',
+  },
+  // browser adds extra marrgin for p tags by default
+  '& p': {
+    margin: 0,
+  },
+  '& mjx-frac': {
+    fontSize: '120% !important',
+  },
+}));
+
+const StyledDeleteIcon: any = styled(Delete)(({ theme }) => ({
+  position: 'absolute',
+  top: '6px',
+  right: '0',
+  color: theme.palette.grey[500],
+  zIndex: 2,
+  '&:hover': {
+    cursor: 'pointer',
+    color: theme.palette.common.black,
+  },
+}));
+
+export const BlankContent = (props) => {
+  const { choice, onClick, onRemoveChoice, error, instanceId, disabled } = props;
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: `choice-${choice.id}-${instanceId || 'default'}`,
+    data: {
+      type: 'drag-in-the-blank-choice',
+      id: choice.id,
+      value: choice,
+      instanceId: instanceId,
+    },
+    disabled: disabled || choiceIsEmpty(choice),
+  });
+
+  const handleDragStart = (e) => {
+    if (choiceIsEmpty(choice)) {
+      e.preventDefault();
+      alert('You need to define a value for an answer choice before it can be associated with a response area.');
+      return;
+    }
+  };
+
+  return (
+    <StyledChoice
+      ref={setNodeRef}
+      error={error}
+      isDragging={isDragging}
+      onClick={onClick}
+      {...attributes}
+      {...listeners}
+      onDragStart={handleDragStart}
+    >
+      <GripIcon
+        style={{
+          position: 'absolute',
+          top: '6px',
+          left: '15px',
+          color: '#9e9e9e',
+          zIndex: 2,
+        }}
+      />
+
+      <span dangerouslySetInnerHTML={{ __html: choice.value }} />
+
+      <StyledDeleteIcon
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+
+          onRemoveChoice(e);
+        }}
+      />
+    </StyledChoice>
+  );
+};
+
+BlankContent.propTypes = {
+  choice: PropTypes.object.isRequired,
+  onClick: PropTypes.func,
+  onRemoveChoice: PropTypes.func.isRequired,
+  error: PropTypes.bool,
+  instanceId: PropTypes.string,
+  disabled: PropTypes.bool,
+};
+
+export default BlankContent;

package/src/author/choices.tsx

@@ -0,0 +1,314 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/drag-in-the-blank/configure/src/choices.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 from '@pie-lib/editable-html-tip-tap';
+import { AlertDialog } from '@pie-lib/config-ui';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+
+import Choice from './choice.js';
+import { choiceIsEmpty } from './markupUtils.js';
+import { renderMath } from '@pie-element/shared-math-rendering-mathjax';
+
+const StyledDesign: any = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  marginBottom: theme.spacing(1.5),
+}));
+
+const StyledAddButton: any = styled(Button)({
+  marginLeft: 'auto',
+});
+
+const StyledAltChoices: any = styled('div')(({ theme }) => ({
+  alignItems: 'flex-start',
+  display: 'flex',
+  flexWrap: 'wrap',
+  justifyContent: 'space-evenly',
+  marginTop: theme.spacing(1),
+
+  '& > *': {
+    margin: theme.spacing(1),
+  },
+}));
+
+const ErrorText: any = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingBottom: theme.spacing(2),
+}));
+
+export class Choices extends React.Component {
+  static propTypes = {
+    duplicates: PropTypes.bool,
+    error: PropTypes.string,
+    model: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    toolbarOpts: PropTypes.object,
+    pluginProps: PropTypes.object,
+    maxChoices: PropTypes.number,
+    uploadSoundSupport: PropTypes.object,
+    maxImageWidth: PropTypes.number,
+    maxImageHeight: PropTypes.number,
+    maxLength: PropTypes.number,
+  };
+
+  state = { warning: { open: false } };
+  preventDone = false;
+  wrapperRef = React.createRef(null);
+
+  componentDidUpdate() {
+    if (this.focusedNodeRef) {
+      this.focusedNodeRef.focus('end');
+    }
+
+    renderMath(this.wrapperRef.current);
+  }
+
+  onChoiceChanged: any = (prevValue, val, key) => {
+    const { onChange, model } = this.props;
+    const { choices, correctResponse, alternateResponses } = model;
+    const duplicatedValue = (choices || []).find((c) => c.value === val && c.id !== key);
+
+    // discard the new added choice or the changes if the choice would be a duplicate to one that already exists
+    if (duplicatedValue) {
+      if (prevValue === '') {
+        // remove the new added choice from choices
+        const newChoices = (choices || []).filter((c) => c.id !== key);
+
+        onChange(newChoices);
+      }
+
+      this.setState({
+        warning: {
+          open: true,
+          text: 'Identical answer choices are not allowed and the changes will be discarded.',
+        },
+      });
+
+      return;
+    }
+
+    const newChoices = choices?.map((choice) => (choice.id === key ? { ...choice, value: val } : choice)) || [];
+
+    if (!choiceIsEmpty({ value: val })) {
+      onChange(newChoices);
+
+      return;
+    }
+
+    // if the edited content is empty, its usage has to be searched in the correct response definitions
+    let usedForResponse = false;
+
+    if (correctResponse) {
+      Object.keys(correctResponse).forEach((responseKey) => {
+        if (correctResponse[responseKey] === key) {
+          usedForResponse = true;
+        }
+      });
+    }
+
+    if (alternateResponses && !usedForResponse) {
+      Object.values(alternateResponses).forEach((alternate) => {
+        if (alternate.indexOf(key) >= 0) {
+          usedForResponse = true;
+        }
+      });
+    }
+
+    if (usedForResponse) {
+      this.setState({
+        warning: {
+          open: true,
+          text: 'Answer choices cannot be blank and the changes will be discarded.',
+        },
+      });
+
+      return;
+    }
+
+    const newChoicesWithoutTheEmptyOne = newChoices.filter((choice) => choice.id !== key);
+
+    onChange(newChoicesWithoutTheEmptyOne);
+
+    this.setState({
+      warning: {
+        open: true,
+        text: 'Answer choices cannot be blank.',
+      },
+    });
+  };
+
+  onChoiceFocus = (id) =>
+    this.setState({
+      focusedEl: id,
+    });
+
+  onAddChoice: any = () => {
+    const {
+      model: { choices: oldChoices },
+      onChange,
+    } = this.props;
+
+    // find the maximum existing id and add 1 to generate the new id so we avoid duplicates
+    const maxId = oldChoices.length > 0 ? Math.max(...oldChoices.map((choice) => parseInt(choice.id, 10) || 0)) : -1;
+    const newId = `${maxId + 1}`;
+
+    this.setState(
+      {
+        focusedEl: newId,
+      },
+      () => {
+        onChange([
+          ...oldChoices,
+          {
+            id: newId,
+            value: '',
+          },
+        ]);
+      },
+    );
+  };
+
+  onChoiceRemove: any = (id) => {
+    const {
+      onChange,
+      model: { choices },
+    } = this.props;
+    const newChoices = (choices || []).filter((choice) => choice.id !== id);
+
+    onChange(newChoices);
+  };
+
+  getVisibleChoices: any = () => {
+    const {
+      duplicates,
+      model: { choices, correctResponse },
+    } = this.props;
+
+    if (!choices) {
+      return [];
+    }
+
+    if (duplicates) {
+      return choices;
+    }
+
+    // if duplicates not allowed, remove the choices that are used to define the correct response
+    return choices.filter((choice) => !(correctResponse && Object.values(correctResponse).includes(choice.id)));
+  };
+
+  render() {
+    const { focusedEl, warning } = this.state;
+    const {
+      duplicates,
+      error,
+      mathMlOptions = {},
+      maxChoices,
+      model: { choices },
+      toolbarOpts,
+      uploadSoundSupport,
+      imageSupport = {},
+      pluginProps = {},
+      maxImageWidth,
+      maxImageHeight,
+      maxLength,
+    } = this.props;
+    const visibleChoices = this.getVisibleChoices() || [];
+    return (
+      <StyledDesign ref={this.wrapperRef}>
+        <StyledAddButton
+          variant="contained"
+          color="primary"
+          onClick={this.onAddChoice}
+          disabled={maxChoices && choices && maxChoices === choices.length}
+        >
+          Add Choice
+        </StyledAddButton>
+
+        <StyledAltChoices>
+          {visibleChoices.map((choice, index) => {
+            if (!choice || !choice.id) {
+              return null;
+            }
+
+            return focusedEl === choice.id ? (
+              <div
+                key={index}
+                style={{
+                  minWidth: '100%',
+                  zIndex: '100',
+                }}
+              >
+                <EditableHtml
+                  ref={(ref) => (this.focusedNodeRef = ref)}
+                  autoFocus
+                  imageSupport={imageSupport}
+                  markup={choice.value}
+                  pluginProps={pluginProps}
+                  languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+                  onChange={(val) => {
+                    if (this.preventDone) {
+                      return;
+                    }
+
+                    this.onChoiceChanged(choice.value, val, choice.id);
+                  }}
+                  onDone={() => {
+                    if (this.preventDone) {
+                      return;
+                    }
+
+                    this.setState({
+                      focusedEl: undefined,
+                    });
+                  }}
+                  onBlur={(e) => {
+                    const inInInsertCharacter = e.relatedTarget && e.relatedTarget.closest('.insert-character-dialog');
+
+                    this.preventDone = inInInsertCharacter;
+                  }}
+                  disableUnderline
+                  toolbarOpts={toolbarOpts}
+                  uploadSoundSupport={uploadSoundSupport}
+                  mathMlOptions={mathMlOptions}
+                  maxImageHeight={maxImageHeight}
+                  maxImageWidth={maxImageWidth}
+                  charactersLimit={maxLength}
+                />
+              </div>
+            ) : (
+              <Choice
+                key={index}
+                duplicates={duplicates}
+                choice={choice}
+                error={error}
+                onClick={() => this.onChoiceFocus(choice.id)}
+                onRemoveChoice={() => this.onChoiceRemove(choice.id)}
+              />
+            );
+          })}
+        </StyledAltChoices>
+        {error && <ErrorText>{error}</ErrorText>}
+
+        <AlertDialog
+          open={warning.open}
+          title="Warning"
+          text={warning.text}
+          onConfirm={() => this.setState({ warning: { open: false } })}
+        />
+      </StyledDesign>
+    );
+  }
+}
+
+export default Choices;