@pie-lib/mask-markup 1.13.12 → 2.0.0-beta.1

package/src/components/correct-input.jsx

@@ -4,8 +4,8 @@ import classnames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 import { color } from '@pie-lib/render-ui';
 
-const correctStyle = (color) => ({
-  borderColor: `${color} !important`,
+const correctStyle = color => ({
+  borderColor: `${color} !important`
 });
 
 export default withStyles(() => ({
@@ -18,37 +18,37 @@ export default withStyles(() => ({
     padding: '10px 20px 10px 10px',
     '&:disabled': {
       opacity: 0.8,
-      cursor: 'not-allowed !important',
+      cursor: 'not-allowed !important'
     },
     '&:hover': {
       borderColor: color.primary(),
       '&:disabled': {
-        borderColor: 'initial',
-      },
+        borderColor: 'initial'
+      }
     },
     '&:focus': {
-      borderColor: color.primaryDark(),
-    },
+      borderColor: color.primaryDark()
+    }
   },
   crInput: {
-    padding: '8px !important',
+    padding: '8px !important'
   },
   correct: correctStyle(color.correct()),
   incorrect: correctStyle(color.incorrect()),
   box: {
-    fontSize: 'inherit',
+    fontSize: 'inherit'
   },
   outlinedInput: {
     padding: '2px',
     borderRadius: '4px',
     '& fieldset': {
-      border: 0,
-    },
+      border: 0
+    }
   },
   notchedOutline: {
-    borderColor: color.correct(),
-  },
-}))((props) => {
+    borderColor: color.correct()
+  }
+}))(props => {
   const {
     correct,
     charactersLimit,
@@ -65,7 +65,7 @@ export default withStyles(() => ({
 
   if (width) {
     inputProps.style = {
-      width: `${width + Math.round(width / 10) + 1}ch`, // added some extra space for capital letters
+      width: `${width + Math.round(width / 10) + 1}ch` // added some extra space for capital letters
     };
   }
 
@@ -74,14 +74,14 @@ export default withStyles(() => ({
       className={classnames({
         [classes.disabledInput]: disabled,
         [classes.box]: isBox,
-        [classes.outlinedInput]: true,
+        [classes.outlinedInput]: true
       })}
       classes={{
         input: classnames({
           [classes.input]: true,
           [classes[label]]: label,
-          [classes.crInput]: isConstructedResponse,
-        }),
+          [classes.crInput]: isConstructedResponse
+        })
       }}
       inputProps={inputProps}
       labelWidth={0}

package/src/components/dropdown.jsx

@@ -14,8 +14,10 @@ class Dropdown extends React.Component {
     onChange: PropTypes.func,
     classes: PropTypes.object,
     correct: PropTypes.bool,
-    choices: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.string, label: PropTypes.string })),
-    showCorrectAnswer: PropTypes.bool,
+    choices: PropTypes.arrayOf(
+      PropTypes.shape({ value: PropTypes.string, label: PropTypes.string })
+    ),
+    showCorrectAnswer: PropTypes.bool
   };
 
   constructor(props) {
@@ -23,26 +25,35 @@ class Dropdown extends React.Component {
 
     this.state = {
       showCheckmark: false,
-      open: false,
+      open: false
     };
   }
 
   showCheckmarkAndOpen = () => {
     this.setState({
       showCheckmark: true,
-      open: true,
+      open: true
     });
   };
 
   hideCheckmarkAndClose = () => {
     this.setState({
       showCheckmark: false,
-      open: false,
+      open: false
     });
   };
 
   render() {
-    const { classes, id, correct, disabled, value, onChange, choices, showCorrectAnswer } = this.props;
+    const {
+      classes,
+      id,
+      correct,
+      disabled,
+      value,
+      onChange,
+      choices,
+      showCorrectAnswer
+    } = this.props;
 
     const { showCheckmark, open } = this.state;
 
@@ -52,7 +63,7 @@ class Dropdown extends React.Component {
           root: classes.root,
           icon: classes.icon,
           selectMenu: classes.selectMenu,
-          select: classes.select,
+          select: classes.select
         }}
         disabled={disabled}
         value={value || ''}
@@ -62,9 +73,9 @@ class Dropdown extends React.Component {
         input={<CorrectInput correct={showCorrectAnswer || correct} />}
         MenuProps={{
           keepMounted: true,
-          disablePortal: true,
+          disablePortal: true
         }}
-        onChange={(e) => {
+        onChange={e => {
           onChange(id, e.target.value);
         }}
       >
@@ -77,7 +88,7 @@ class Dropdown extends React.Component {
             <span
               className={classes.label}
               dangerouslySetInnerHTML={{
-                __html: c.label,
+                __html: c.label
               }}
             />
             {showCheckmark && (
@@ -104,57 +115,57 @@ const styles = () => ({
       border: `1px solid ${color.text()}`,
       borderRadius: '5px',
       color: color.text(),
-      backgroundColor: color.background(),
-    },
+      backgroundColor: color.background()
+    }
   },
   select: {
     '&:focus': {
-      borderRadius: '4px',
-    },
+      borderRadius: '4px'
+    }
   },
   selectMenu: {
     backgroundColor: color.background(),
     '&:hover': {
-      borderColor: 'initial',
+      borderColor: 'initial'
     },
     '&:focus': {
-      borderColor: 'initial',
-    },
+      borderColor: 'initial'
+    }
   },
   icon: {
-    color: color.text(),
+    color: color.text()
   },
   selected: {
     color: `${color.text()} !important`,
     backgroundColor: `${color.background()} !important`,
     '&:hover': {
       color: color.text(),
-      backgroundColor: `${color.secondaryLight()} !important`,
-    },
+      backgroundColor: `${color.secondaryLight()} !important`
+    }
   },
   menuRoot: {
     color: color.text(),
     backgroundColor: color.background(),
     '&:focus': {
       color: color.text(),
-      backgroundColor: color.background(),
+      backgroundColor: color.background()
     },
     '&:hover': {
       color: color.text(),
-      backgroundColor: color.secondaryLight(),
+      backgroundColor: color.secondaryLight()
     },
     boxSizing: 'border-box',
     padding: '25px',
     '&:first-of-type': {
-      borderRadius: '3px 3px 0 0',
+      borderRadius: '3px 3px 0 0'
     },
     '&:last-of-type': {
-      borderRadius: '0 0 3px 3px',
-    },
+      borderRadius: '0 0 3px 3px'
+    }
   },
   label: {
-    fontSize: 'max(1rem, 14px)',
-  },
+    fontSize: 'max(1rem, 14px)'
+  }
 });
 
 export default withStyles(styles)(Dropdown);

package/src/components/input.jsx

@@ -12,7 +12,7 @@ const Input = ({
   onChange,
   showCorrectAnswer,
   spellCheck,
-  width,
+  width
 }) => {
   return (
     <CorrectInput
@@ -25,7 +25,7 @@ const Input = ({
       spellCheck={spellCheck}
       isBox={true}
       width={width}
-      onChange={(e) => {
+      onChange={e => {
         onChange(id, e.target.value);
       }}
     />
@@ -39,7 +39,7 @@ Input.propTypes = {
   disabled: PropTypes.bool,
   spellCheck: PropTypes.bool,
   correct: PropTypes.bool,
-  showCorrectAnswer: PropTypes.bool,
+  showCorrectAnswer: PropTypes.bool
 };
 
 export default Input;

package/src/constructed-response.jsx

@@ -2,14 +2,16 @@ import React from 'react';
 import Input from './components/input';
 import { withMask } from './with-mask';
 
-export default withMask('input', (props) => (node, data, onChange) => {
+export default withMask('input', props => (node, data, onChange) => {
   const dataset = node.data ? node.data.dataset || {} : {};
   if (dataset.component === 'input') {
     const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength, spellCheck } = props;
 
     // the first answer is the correct one
     const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];
-    const finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';
+    const finalValue = showCorrectAnswer
+      ? correctAnswer && correctAnswer.label
+      : data[dataset.id] || '';
     const width = maxLength && maxLength[dataset.id];
 
     return (

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

@@ -5,12 +5,13 @@ import Choices from './choices';
 import Blank from './components/blank';
 import { withMask } from './with-mask';
 
-const Masked = withMask('blank', (props) => (node, data, onChange) => {
+const Masked = withMask('blank', props => (node, data, onChange) => {
   const dataset = node.data ? node.data.dataset || {} : {};
+
   if (dataset.component === 'blank') {
     const { disabled, duplicates, correctResponse, feedback, showCorrectAnswer } = props;
     const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];
-    const choice = choiceId && props.choices.find((c) => c.id === choiceId);
+    const choice = choiceId && props.choices.find(c => c.id === choiceId);
 
     return (
       <Blank
@@ -31,14 +32,16 @@ export default class DragInTheBlank extends React.Component {
     markup: PropTypes.string,
     layout: PropTypes.object,
     choicesPosition: PropTypes.string,
-    choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),
+    choices: PropTypes.arrayOf(
+      PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })
+    ),
     value: PropTypes.object,
     onChange: PropTypes.func,
     duplicates: PropTypes.bool,
     disabled: PropTypes.bool,
     feedback: PropTypes.object,
     correctResponse: PropTypes.object,
-    showCorrectAnswer: PropTypes.bool,
+    showCorrectAnswer: PropTypes.bool
   };
 
   componentWillReceiveProps() {
@@ -51,7 +54,7 @@ export default class DragInTheBlank extends React.Component {
     renderMath(this.rootRef);
   }
 
-  getPositionDirection = (choicePosition) => {
+  getPositionDirection = choicePosition => {
     let flexDirection;
 
     switch (choicePosition) {
@@ -85,17 +88,17 @@ export default class DragInTheBlank extends React.Component {
       correctResponse,
       disabled,
       feedback,
-      showCorrectAnswer,
+      showCorrectAnswer
     } = this.props;
 
     const choicePosition = choicesPosition || 'below';
     const style = {
       display: 'flex',
-      flexDirection: this.getPositionDirection(choicePosition),
+      flexDirection: this.getPositionDirection(choicePosition)
     };
 
     return (
-      <div ref={(ref) => ref && (this.rootRef = ref)} style={style}>
+      <div ref={ref => ref && (this.rootRef = ref)} style={style}>
         <Choices
           choicePosition={choicePosition}
           duplicates={duplicates}

package/src/index.js

@@ -4,4 +4,11 @@ import ConstructedResponse from './constructed-response';
 import InlineDropdown from './inline-dropdown';
 import componentize from './componentize';
 
-export { withMask, buildLayoutFromMarkup, DragInTheBlank, ConstructedResponse, InlineDropdown, componentize };
+export {
+  withMask,
+  buildLayoutFromMarkup,
+  DragInTheBlank,
+  ConstructedResponse,
+  InlineDropdown,
+  componentize
+};

package/src/inline-dropdown.jsx

@@ -2,11 +2,12 @@ import React from 'react';
 import Dropdown from './components/dropdown';
 import { withMask } from './with-mask';
 
-export default withMask('dropdown', (props) => (node, data, onChange) => {
+export default withMask('dropdown', props => (node, data, onChange) => {
   const dataset = node.data ? node.data.dataset || {} : {};
   if (dataset.component === 'dropdown') {
     const { choices, disabled, feedback, showCorrectAnswer } = props;
-    const correctAnswer = choices && choices[dataset.id] && choices[dataset.id].find((c) => c.correct);
+    const correctAnswer =
+      choices && choices[dataset.id] && choices[dataset.id].find(c => c.correct);
     const finalChoice = showCorrectAnswer ? correctAnswer && correctAnswer.value : data[dataset.id];
 
     return (

package/src/mask.jsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
+import { Text } from 'slate';
 import { withStyles } from '@material-ui/core/styles';
 import { MARK_TAGS } from './serialization';
 
-const Paragraph = withStyles((theme) => ({
+const Paragraph = withStyles(theme => ({
   para: {
     paddingTop: 2 * theme.spacing.unit,
-    paddingBottom: 2 * theme.spacing.unit,
-  },
-}))((props) => <div className={props.classes.para}>{props.children}</div>);
+    paddingBottom: 2 * theme.spacing.unit
+  }
+}))(props => <div className={props.classes.para}>{props.children}</div>);
 
 const restrictWhitespaceTypes = ['tbody', 'tr'];
 
@@ -24,14 +25,10 @@ const addText = (parentNode, text) => {
   }
 };
 
-const getMark = (n) => {
-  const mark = n.leaves.find((leave) => get(leave, 'marks', []).length);
-
-  if (mark) {
-    return mark.marks[0];
-  }
+const getMark = n => {
+  const markTags = Object.values(MARK_TAGS);
 
-  return null;
+  return markTags.includes(n.type);
 };
 
 export const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode) => {
@@ -41,16 +38,12 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
 
   const children = [];
 
-  (layout.nodes || []).forEach((n, index) => {
+  (layout.children || []).forEach((n, index) => {
     const key = `${n.type}-${index}`;
 
     if (n.isMath) {
       children.push(
-        <span
-          dangerouslySetInnerHTML={{
-            __html: `<math displaystyle="true">${n.nodes[0].innerHTML}</math>`,
-          }}
-        />,
+        <span dangerouslySetInnerHTML={{ __html: `<math displaystyle="true">${n.children[0].innerHTML}</math>` }} />
       );
       return children;
     }
@@ -63,12 +56,8 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
       }
     }
 
-    if (n.object === 'text') {
-      const content = n.leaves.reduce((acc, l) => {
-        const t = l.text;
-        const extraText = addText(parentNode, t);
-        return extraText ? acc + extraText : acc;
-      }, '');
+    if (Text.isText(n)) {
+      const content = n.text;
       const mark = getMark(n);
 
       if (mark) {
@@ -91,11 +80,11 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
         children.push(<Paragraph key={key}>{subNodes}</Paragraph>);
       } else {
         const Tag = n.type;
-        if (n.nodes && n.nodes.length > 0) {
+        if (n.children && n.children.length > 0) {
           children.push(
             <Tag key={key} {...n.data.attributes}>
               {subNodes}
-            </Tag>,
+            </Tag>
           );
         } else {
           children.push(<Tag key={key} {...n.data.attributes} />);
@@ -108,9 +97,9 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
 
 const MaskContainer = withStyles(() => ({
   main: {
-    display: 'initial',
-  },
-}))((props) => <div className={props.classes.main}>{props.children}</div>);
+    display: 'initial'
+  }
+}))(props => <div className={props.classes.main}>{props.children}</div>);
 
 /**
  * Renders a layout that uses the slate.js Value model structure.
@@ -120,7 +109,7 @@ export default class Mask extends React.Component {
     renderChildren: PropTypes.func,
     layout: PropTypes.object,
     value: PropTypes.object,
-    onChange: PropTypes.func,
+    onChange: PropTypes.func
   };
 
   handleChange = (id, value) => {