@pie-lib/mask-markup 1.13.47-next.1 → 1.14.0-beta.1

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