@pie-lib/mask-markup 1.13.46 → 1.14.1-beta.0

package/src/constructed-response.jsx

@@ -1,34 +1,92 @@
 import React from 'react';
-import Input from './components/input';
+import { withStyles } from '@material-ui/core/styles';
+import classnames from 'classnames';
+
+import { color } from '@pie-lib/render-ui';
+import EditableHtml from '@pie-lib/editable-html';
 import { withMask } from './with-mask';
 
-// eslint-disable-next-line react/display-name
-export default withMask('input', (props) => (node, data, onChange) => {
-  const dataset = node.data ? node.data.dataset || {} : {};
-  if (dataset.component === 'input') {
-    // eslint-disable-next-line react/prop-types
-    const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength, spellCheck } = props;
+const styles = () => ({
+  editableHtmlCustom: {
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    margin: '4px',
+    borderRadius: '4px',
+    border: `1px solid ${color.black()}`,
+  },
+  correct: {
+    border: `1px solid ${color.correct()}`,
+  },
+  incorrect: {
+    border: `1px solid ${color.incorrect()}`,
+  },
+});
 
-    // the first answer is the correct one
-    // eslint-disable-next-line react/prop-types
+const MaskedInput = (props) => (node, data) => {
+  const {
+    adjustedLimit,
+    disabled,
+    feedback,
+    showCorrectAnswer,
+    maxLength,
+    spellCheck,
+    classes,
+    pluginProps,
+    onChange,
+  } = props;
+  const dataset = node.data?.dataset || {};
+
+  if (dataset.component === 'input') {
     const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];
     const finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';
     const width = maxLength && maxLength[dataset.id];
+    const feedbackStatus = feedback && feedback[dataset.id];
+    const isCorrect = showCorrectAnswer || feedbackStatus === 'correct';
+    const isIncorrect = !showCorrectAnswer && feedbackStatus === 'incorrect';
+
+    const handleInputChange = (newValue) => {
+      const updatedValue = {
+        ...data,
+        [dataset.id]: newValue,
+      };
+      onChange(updatedValue);
+    };
+
+    const handleKeyDown = (event) => {
+      // the keyCode value for the Enter/Return key is 13
+      if (event.key === 'Enter' || event.keyCode === 13) {
+        return false;
+      }
+    };
 
     return (
-      <Input
+      <EditableHtml
+        id={dataset.id}
         key={`${node.type}-input-${dataset.id}`}
-        correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}
         disabled={showCorrectAnswer || disabled}
-        value={finalValue}
-        id={dataset.id}
-        onChange={onChange}
-        showCorrectAnswer={showCorrectAnswer}
-        width={width}
+        disableUnderline
+        onChange={handleInputChange}
+        markup={finalValue || ''}
         charactersLimit={adjustedLimit ? width : 25}
-        isConstructedResponse={true}
+        activePlugins={['languageCharacters']}
+        pluginProps={pluginProps}
+        languageCharactersProps={[{ language: 'spanish' }]}
         spellCheck={spellCheck}
+        width={`calc(${width}em + 42px)`} // added 42px for left and right padding of editable-html
+        onKeyDown={handleKeyDown}
+        autoWidthToolbar
+        toolbarOpts={{
+          minWidth: 'auto',
+          noBorder: true,
+          isHidden: !!pluginProps?.characters?.disabled,
+        }}
+        className={classnames(classes.editableHtmlCustom, {
+          [classes.correct]: isCorrect,
+          [classes.incorrect]: isIncorrect,
+        })}
       />
     );
   }
-});
+};
+
+export default withStyles(styles)(withMask('input', MaskedInput));

package/src/customizable.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+// import Input from './components/input';
+import { withMask } from './with-mask';
+
+// eslint-disable-next-line react/display-name
+export default withMask('input', (props) => (node, data, onChange) => {
+  const dataset = node.data ? node.data.dataset || {} : {};
+  if (dataset.component === 'input') {
+    // eslint-disable-next-line react/prop-types
+    // const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength, spellCheck } = props;
+
+    // the first answer is the correct one
+    // eslint-disable-next-line react/prop-types
+    // const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];
+    // const finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';
+    // const width = maxLength && maxLength[dataset.id];
+
+    return props.customMarkMarkupComponent(dataset.id);
+    // return (
+    //   <Input
+    //     key={`${node.type}-input-${dataset.id}`}
+    //     correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}
+    //     disabled={showCorrectAnswer || disabled}
+    //     value={finalValue}
+    //     id={dataset.id}
+    //     onChange={onChange}
+    //     showCorrectAnswer={showCorrectAnswer}
+    //     width={width}
+    //     charactersLimit={adjustedLimit ? width : 25}
+    //     isConstructedResponse={true}
+    //     spellCheck={spellCheck}
+    //   />
+    // );
+  }
+});

package/src/drag-in-the-blank.jsx

@@ -10,7 +10,15 @@ const Masked = withMask('blank', (props) => (node, data, onChange) => {
   const dataset = node.data ? node.data.dataset || {} : {};
   if (dataset.component === 'blank') {
     // eslint-disable-next-line react/prop-types
-    const { disabled, duplicates, correctResponse, feedback, showCorrectAnswer } = props;
+    const {
+      disabled,
+      duplicates,
+      correctResponse,
+      feedback,
+      showCorrectAnswer,
+      emptyResponseAreaWidth,
+      emptyResponseAreaHeight,
+    } = props;
     const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];
     // eslint-disable-next-line react/prop-types
     const choice = choiceId && props.choices.find((c) => c.id === choiceId);
@@ -23,6 +31,8 @@ const Masked = withMask('blank', (props) => (node, data, onChange) => {
         duplicates={duplicates}
         choice={choice}
         id={dataset.id}
+        emptyResponseAreaWidth={emptyResponseAreaWidth}
+        emptyResponseAreaHeight={emptyResponseAreaHeight}
         onChange={onChange}
       />
     );
@@ -42,6 +52,8 @@ export default class DragInTheBlank extends React.Component {
     feedback: PropTypes.object,
     correctResponse: PropTypes.object,
     showCorrectAnswer: PropTypes.bool,
+    emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   };
 
   UNSAFE_componentWillReceiveProps() {
@@ -56,13 +68,18 @@ export default class DragInTheBlank extends React.Component {
 
   getPositionDirection = (choicePosition) => {
     let flexDirection;
+    let justifyContent;
+    let alignItems;
 
     switch (choicePosition) {
       case 'left':
         flexDirection = 'row';
+        alignItems = 'center';
         break;
       case 'right':
         flexDirection = 'row-reverse';
+        justifyContent = 'flex-end';
+        alignItems = 'center';
         break;
       case 'below':
         flexDirection = 'column-reverse';
@@ -73,7 +90,7 @@ export default class DragInTheBlank extends React.Component {
         break;
     }
 
-    return flexDirection;
+    return { flexDirection, justifyContent, alignItems };
   };
 
   render() {
@@ -89,12 +106,15 @@ export default class DragInTheBlank extends React.Component {
       disabled,
       feedback,
       showCorrectAnswer,
+      emptyResponseAreaWidth,
+      emptyResponseAreaHeight,
     } = this.props;
 
     const choicePosition = choicesPosition || 'below';
     const style = {
       display: 'flex',
-      flexDirection: this.getPositionDirection(choicePosition),
+      minWidth: '100px',
+      ...this.getPositionDirection(choicePosition),
     };
 
     return (
@@ -107,6 +127,7 @@ export default class DragInTheBlank extends React.Component {
           disabled={disabled}
         />
         <Masked
+          elementType={'drag-in-the-blank'}
           markup={markup}
           layout={layout}
           value={value}
@@ -117,6 +138,8 @@ export default class DragInTheBlank extends React.Component {
           feedback={feedback}
           correctResponse={correctResponse}
           showCorrectAnswer={showCorrectAnswer}
+          emptyResponseAreaWidth={emptyResponseAreaWidth}
+          emptyResponseAreaHeight={emptyResponseAreaHeight}
         />
       </div>
     );

package/src/index.js

@@ -1,7 +1,16 @@
 import { withMask, buildLayoutFromMarkup } from './with-mask';
 import DragInTheBlank from './drag-in-the-blank';
 import ConstructedResponse from './constructed-response';
+import Customizable from './customizable';
 import InlineDropdown from './inline-dropdown';
 import componentize from './componentize';
 
-export { withMask, buildLayoutFromMarkup, DragInTheBlank, ConstructedResponse, InlineDropdown, componentize };
+export {
+  withMask,
+  buildLayoutFromMarkup,
+  DragInTheBlank,
+  ConstructedResponse,
+  InlineDropdown,
+  componentize,
+  Customizable,
+};

package/src/inline-dropdown.jsx

@@ -17,10 +17,12 @@ export default withMask('dropdown', (props) => (node, data, onChange) => {
         correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}
         disabled={disabled || showCorrectAnswer}
         value={finalChoice}
+        correctValue={showCorrectAnswer ? correctAnswer && correctAnswer.label : undefined}
         id={dataset.id}
         onChange={onChange}
         choices={choices[dataset.id]}
         showCorrectAnswer={showCorrectAnswer}
+        singleQuery={Object.keys(choices).length == 1}
       />
     );
   }

package/src/mask.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import { withStyles } from '@material-ui/core/styles';
 import { MARK_TAGS } from './serialization';
+import cx from 'classnames';
 
 const Paragraph = withStyles((theme) => ({
   para: {
@@ -11,6 +12,13 @@ const Paragraph = withStyles((theme) => ({
   },
 }))((props) => <div className={props.classes.para}>{props.children}</div>);
 
+const Spacer = withStyles(() => ({
+  spacer: {
+    display: 'inline-block',
+    width: '.75em',
+  },
+}))((props) => <span className={props.classes.spacer} />);
+
 const restrictWhitespaceTypes = ['tbody', 'tr'];
 
 const addText = (parentNode, text) => {
@@ -34,7 +42,7 @@ const getMark = (n) => {
   return null;
 };
 
-export const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode) => {
+export const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode, elementType) => {
   if (!value) {
     return null;
   }
@@ -59,6 +67,9 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
       const c = rootRenderChildren(n, value, onChange);
       if (c) {
         children.push(c);
+        if (parentNode?.type !== 'td' && elementType === 'drag-in-the-blank') {
+          children.push(<Spacer key={`spacer-${index}`} />);
+        }
         return;
       }
     }
@@ -84,9 +95,12 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
         }
       } else if (content.length > 0) {
         children.push(content);
+        if (parentNode?.type !== 'td' && elementType === 'drag-in-the-blank') {
+          children.push(<Spacer key={`spacer-${index}`} />);
+        }
       }
     } else {
-      const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n);
+      const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n, elementType);
       if (n.type === 'p' || n.type === 'paragraph') {
         children.push(<Paragraph key={key}>{subNodes}</Paragraph>);
       } else {
@@ -110,7 +124,17 @@ const MaskContainer = withStyles(() => ({
   main: {
     display: 'initial',
   },
-}))((props) => <div className={props.classes.main}>{props.children}</div>);
+  tableStyle: {
+    '&:not(.MathJax) table': {
+      borderCollapse: 'collapse',
+    },
+    // align table content to left as per STAR requirement PD-3687
+    '&:not(.MathJax) table td, &:not(.MathJax) table th': {
+      padding: '8px 12px',
+      textAlign: 'left',
+    },
+  },
+}))((props) => <div className={cx(props.classes.main, props.classes.tableStyle)}>{props.children}</div>);
 
 /**
  * Renders a layout that uses the slate.js Value model structure.
@@ -121,6 +145,7 @@ export default class Mask extends React.Component {
     layout: PropTypes.object,
     value: PropTypes.object,
     onChange: PropTypes.func,
+    elementType: PropTypes.string,
   };
 
   handleChange = (id, value) => {
@@ -129,8 +154,8 @@ export default class Mask extends React.Component {
   };
 
   render() {
-    const { value, layout } = this.props;
-    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);
+    const { value, layout, elementType } = this.props;
+    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren, null, elementType);
 
     return <MaskContainer>{children}</MaskContainer>;
   }

package/src/with-mask.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import Mask from './mask';
 import componentize from './componentize';
@@ -23,13 +24,49 @@ export const withMask = (type, renderChildren) => {
       layout: PropTypes.object,
       value: PropTypes.object,
       onChange: PropTypes.func,
+      customMarkMarkupComponent: PropTypes.func,
+      elementType: PropTypes.string,
     };
 
+    componentDidUpdate(prevProps) {
+      if (this.props.markup !== prevProps.markup) {
+        // eslint-disable-next-line
+        const domNode = ReactDOM.findDOMNode(this);
+        // Query all elements that may contain outdated MathJax renderings
+        const mathElements = domNode && domNode.querySelectorAll('[data-latex][data-math-handled="true"]');
+
+        // Clean up for fresh MathJax processing
+        (mathElements || []).forEach((el) => {
+          // Remove the MathJax container to allow for clean updates
+          const mjxContainer = el.querySelector('mjx-container');
+
+          if (mjxContainer) {
+            el.removeChild(mjxContainer);
+          }
+
+          // Update the innerHTML to match the raw LaTeX data, ensuring it is reprocessed correctly
+          const latexCode = el.getAttribute('data-raw');
+          el.innerHTML = latexCode;
+
+          // Remove the attribute to signal that MathJax should reprocess this element
+          el.removeAttribute('data-math-handled');
+        });
+      }
+    }
+
     render() {
-      const { markup, layout, value, onChange } = this.props;
+      const { markup, layout, value, onChange, elementType } = this.props;
 
       const maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);
-      return <Mask layout={maskLayout} value={value} onChange={onChange} renderChildren={renderChildren(this.props)} />;
+      return (
+        <Mask
+          elementType={elementType}
+          layout={maskLayout}
+          value={value}
+          onChange={onChange}
+          renderChildren={renderChildren(this.props)}
+        />
+      );
     }
   };
 };

package/README.md

@@ -1,14 +0,0 @@
-# mask-markup
-
-## issues
-
-- dnd
-  - simple approach loses context due to stepping out of react tree to run a ReactDOM.render().
-    - Would need to pass drag parts as props (no context)
-    - Or do the entire tree render in react - like a simple slate
-  - HTML5Backend - ? going to be a an issue w/ multiple items using dnd?
-
-* hey diddle sample
-* add feedback
-* check perf
-* more complex html

package/lib/choices/choice.js

@@ -1,158 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.DRAG_TYPE = exports.BlankContent = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _drag = require("@pie-lib/drag");
-
-var _styles = require("@material-ui/core/styles");
-
-var _Chip = _interopRequireDefault(require("@material-ui/core/Chip"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-var _mathRendering = require("@pie-lib/math-rendering");
-
-var _renderUi = require("@pie-lib/render-ui");
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var DRAG_TYPE = 'MaskBlank';
-exports.DRAG_TYPE = DRAG_TYPE;
-
-var BlankContentComp = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(BlankContentComp, _React$Component);
-
-  var _super = _createSuper(BlankContentComp);
-
-  function BlankContentComp() {
-    (0, _classCallCheck2["default"])(this, BlankContentComp);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2["default"])(BlankContentComp, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      (0, _mathRendering.renderMath)(this.rootRef);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this = this;
-
-      var _this$props = this.props,
-          connectDragSource = _this$props.connectDragSource,
-          choice = _this$props.choice,
-          classes = _this$props.classes,
-          disabled = _this$props.disabled; // TODO the Chip element is causing drag problems on touch devices. Avoid using Chip and consider refactoring the code. Keep in mind that Chip is a span with a button role, which interferes with seamless touch device dragging.
-
-      return connectDragSource( /*#__PURE__*/_react["default"].createElement("span", {
-        className: (0, _classnames["default"])(classes.choice, disabled && classes.disabled)
-      }, /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
-        clickable: false,
-        disabled: true,
-        ref: function ref(_ref2) {
-          //eslint-disable-next-line
-          _this.rootRef = _reactDom["default"].findDOMNode(_ref2);
-        },
-        className: classes.chip,
-        label: /*#__PURE__*/_react["default"].createElement("span", {
-          className: classes.chipLabel,
-          ref: function ref(_ref) {
-            if (_ref) {
-              _ref.innerHTML = choice.value || ' ';
-            }
-          }
-        }, ' '),
-        variant: disabled ? 'outlined' : undefined
-      })), {});
-    }
-  }]);
-  return BlankContentComp;
-}(_react["default"].Component);
-
-(0, _defineProperty2["default"])(BlankContentComp, "propTypes", {
-  disabled: _propTypes["default"].bool,
-  choice: _propTypes["default"].object,
-  classes: _propTypes["default"].object,
-  connectDragSource: _propTypes["default"].func
-});
-var BlankContent = (0, _styles.withStyles)(function (theme) {
-  return {
-    choice: {
-      border: "solid 0px ".concat(theme.palette.primary.main),
-      borderRadius: theme.spacing.unit * 2,
-      margin: theme.spacing.unit / 2,
-      transform: 'translate(0, 0)'
-    },
-    chip: {
-      backgroundColor: _renderUi.color.background(),
-      border: "1px solid ".concat(_renderUi.color.text()),
-      color: _renderUi.color.text(),
-      alignItems: 'center',
-      display: 'inline-flex',
-      height: 'initial',
-      minHeight: '32px',
-      fontSize: 'inherit',
-      whiteSpace: 'pre-wrap',
-      maxWidth: '374px',
-      // Added for touch devices, for image content.
-      // This will prevent the context menu from appearing and not allowing other interactions with the image.
-      // If interactions with the image in the token will be requested we should handle only the context Menu.
-      pointerEvents: 'none'
-    },
-    chipLabel: {
-      whiteSpace: 'pre-wrap',
-      '& img': {
-        display: 'block',
-        padding: '2px 0'
-      }
-    },
-    disabled: {}
-  };
-})(BlankContentComp);
-exports.BlankContent = BlankContent;
-var tileSource = {
-  canDrag: function canDrag(props) {
-    return !props.disabled;
-  },
-  beginDrag: function beginDrag(props) {
-    return {
-      choice: props.choice,
-      instanceId: props.instanceId
-    };
-  }
-};
-var DragDropTile = (0, _drag.DragSource)(DRAG_TYPE, tileSource, function (connect, monitor) {
-  return {
-    connectDragSource: connect.dragSource(),
-    isDragging: monitor.isDragging()
-  };
-})(BlankContent);
-var _default = DragDropTile;
-exports["default"] = _default;
-//# sourceMappingURL=choice.js.map

package/lib/choices/choice.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/choices/choice.jsx"],"names":["DRAG_TYPE","BlankContentComp","rootRef","props","connectDragSource","choice","classes","disabled","ref","ReactDOM","findDOMNode","chip","chipLabel","innerHTML","value","undefined","React","Component","PropTypes","bool","object","func","BlankContent","theme","border","palette","primary","main","borderRadius","spacing","unit","margin","transform","backgroundColor","color","background","text","alignItems","display","height","minHeight","fontSize","whiteSpace","maxWidth","pointerEvents","padding","tileSource","canDrag","beginDrag","instanceId","DragDropTile","connect","monitor","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragSource } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport Chip from '@material-ui/core/Chip';\nimport classnames from 'classnames';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { color } from '@pie-lib/render-ui';\n\nexport const DRAG_TYPE = 'MaskBlank';\n\nclass BlankContentComp extends React.Component {\n  static propTypes = {\n    disabled: PropTypes.bool,\n    choice: PropTypes.object,\n    classes: PropTypes.object,\n    connectDragSource: PropTypes.func,\n  };\n\n  componentDidUpdate() {\n    renderMath(this.rootRef);\n  }\n\n  render() {\n    const { connectDragSource, choice, classes, disabled } = this.props;\n\n    // TODO the Chip element is causing drag problems on touch devices. Avoid using Chip and consider refactoring the code. Keep in mind that Chip is a span with a button role, which interferes with seamless touch device dragging.\n\n    return connectDragSource(\n      <span className={classnames(classes.choice, disabled && classes.disabled)}>\n        <Chip\n          clickable={false}\n          disabled={true}\n          ref={(ref) => {\n            //eslint-disable-next-line\n            this.rootRef = ReactDOM.findDOMNode(ref);\n          }}\n          className={classes.chip}\n          label={\n            <span\n              className={classes.chipLabel}\n              ref={(ref) => {\n                if (ref) {\n                  ref.innerHTML = choice.value || ' ';\n                }\n              }}\n            >\n              {' '}\n            </span>\n          }\n          variant={disabled ? 'outlined' : undefined}\n        />\n      </span>,\n      {},\n    );\n  }\n}\n\nexport const BlankContent = withStyles((theme) => ({\n  choice: {\n    border: `solid 0px ${theme.palette.primary.main}`,\n    borderRadius: theme.spacing.unit * 2,\n    margin: theme.spacing.unit / 2,\n    transform: 'translate(0, 0)',\n  },\n  chip: {\n    backgroundColor: color.background(),\n    border: `1px solid ${color.text()}`,\n    color: color.text(),\n    alignItems: 'center',\n    display: 'inline-flex',\n    height: 'initial',\n    minHeight: '32px',\n    fontSize: 'inherit',\n    whiteSpace: 'pre-wrap',\n    maxWidth: '374px',\n    // Added for touch devices, for image content.\n    // This will prevent the context menu from appearing and not allowing other interactions with the image.\n    // If interactions with the image in the token will be requested we should handle only the context Menu.\n    pointerEvents: 'none',\n  },\n  chipLabel: {\n    whiteSpace: 'pre-wrap',\n    '& img': {\n      display: 'block',\n      padding: '2px 0',\n    },\n  },\n  disabled: {},\n}))(BlankContentComp);\n\nconst tileSource = {\n  canDrag(props) {\n    return !props.disabled;\n  },\n  beginDrag(props) {\n    return {\n      choice: props.choice,\n      instanceId: props.instanceId,\n    };\n  },\n};\n\nconst DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging(),\n}))(BlankContent);\n\nexport default DragDropTile;\n"],"file":"choice.js"}