@pie-lib/editable-html 10.0.0-beta.5 → 10.0.0-beta.7

package/src/plugins/media/media-wrapper.jsx

@@ -5,26 +5,29 @@ import { makeStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles(() => ({
   root: {
-    position: 'relative'
+    position: 'relative',
   },
   editor: {
     display: 'inline-block',
-    overflow: 'hidden'
-  }
+    overflow: 'hidden',
+  },
 }));
 
 const MediaWrapper = React.forwardRef((props, ref) => {
-  const { children, width, attributes } = props;
+  const { children, width, attributes, ...rest } = props;
   const classes = useStyles(props);
 
   return (
     <span
-      className={classNames(classes.root, classes.editor)}
+      className={classNames(classes.root, {
+        [classes.editor]: editor,
+      })}
       ref={ref}
+      {...rest}
       {...attributes}
       contentEditable={false}
       style={{
-        width: width || 300
+        width: width || 300,
       }}
     >
       {children}
@@ -36,7 +39,7 @@ MediaWrapper.propTypes = {
   attributes: PropTypes.object,
   classes: PropTypes.object,
   children: PropTypes.array,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
 
 export default MediaWrapper;

package/src/plugins/respArea/drag-in-the-blank/choice.jsx

@@ -9,22 +9,22 @@ import classnames from 'classnames';
 
 import { GripIcon } from '../icons';
 
-const useStyles = withStyles(theme => ({
+const useStyles = withStyles((theme) => ({
   content: {
-    border: `solid 0px ${theme.palette.primary.main}`
+    border: `solid 0px ${theme.palette.primary.main}`,
   },
   chip: {
-    minWidth: '90px'
+    minWidth: '90px',
   },
   correct: {
-    border: 'solid 1px green'
+    border: `solid 1px ${color.correct()}`,
   },
   incorrect: {
-    border: 'solid 1px red'
+    border: `solid 1px ${theme.palette.error.main}`,
   },
   selected: {
-    border: `2px solid ${color.primaryDark()} !important`
-  }
+    border: `2px solid ${color.primaryDark()} !important`,
+  },
 }));
 
 export class BlankContent extends React.Component {
@@ -35,7 +35,7 @@ export class BlankContent extends React.Component {
     isOver: PropTypes.bool,
     dragItem: PropTypes.object,
     value: PropTypes.object,
-    classes: PropTypes.object
+    classes: PropTypes.object,
   };
 
   constructor(props) {
@@ -75,7 +75,7 @@ export class BlankContent extends React.Component {
 
     return (
       <div
-        ref={ref => (this.elementRef = ref)}
+        ref={(ref) => (this.elementRef = ref)}
         style={{
           display: 'inline-flex',
           minWidth: '178px',
@@ -86,7 +86,7 @@ export class BlankContent extends React.Component {
           borderRadius: '3px',
           overflow: 'hidden',
           position: 'relative',
-          padding: '8px 8px 8px 35px'
+          padding: '8px 8px 8px 35px',
         }}
         data-key={n.key}
         contentEditable={false}
@@ -97,14 +97,14 @@ export class BlankContent extends React.Component {
               position: 'absolute',
               top: '6px',
               left: '15px',
-              color: '#9B9B9B'
+              color: '#9B9B9B',
             }}
             contentEditable={false}
           />
         )}
         <span
           dangerouslySetInnerHTML={{
-            __html: finalLabel
+            __html: finalLabel,
           }}
         />
         {children}
@@ -119,9 +119,7 @@ const connectedBlankContent = useStyles(({ connectDropTarget, connectDragSource,
   const { classes, isOver, value } = props;
   const dragContent = <StyledBlankContent {...props} />;
   const dragEl = !value ? dragContent : connectDragSource(<span>{dragContent}</span>);
-  const content = (
-    <span className={classnames(classes.content, isOver && classes.over)}>{dragEl}</span>
-  );
+  const content = <span className={classnames(classes.content, isOver && classes.over)}>{dragEl}</span>;
 
   return connectDropTarget ? connectDropTarget(content) : content;
 });
@@ -139,20 +137,20 @@ export const tileTarget = {
     }
 
     return {
-      dropped: shouldDrop
+      dropped: shouldDrop,
     };
   },
   canDrop(props, monitor) {
     const draggedItem = monitor.getItem();
 
     return draggedItem.instanceId === props.instanceId;
-  }
+  },
 };
 
 const DropTile = DropTarget('drag-in-the-blank-choice', tileTarget, (connect, monitor) => ({
   connectDropTarget: connect.dropTarget(),
   isOver: monitor.isOver(),
-  dragItem: monitor.getItem()
+  dragItem: monitor.getItem(),
 }))(connectedBlankContent);
 
 export const tileSource = {
@@ -164,7 +162,7 @@ export const tileSource = {
       id: props.targetId,
       value: props.value,
       instanceId: props.instanceId,
-      fromChoice: true
+      fromChoice: true,
     };
   },
   endDrag(props, monitor) {
@@ -178,10 +176,10 @@ export const tileSource = {
         props.removeResponse(draggedItem.value);
       }
     }
-  }
+  },
 };
 
 export default DragSource('drag-in-the-blank-choice', tileSource, (connect, monitor) => ({
   connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging()
+  isDragging: monitor.isDragging(),
 }))(DropTile);

package/src/plugins/respArea/drag-in-the-blank/index.jsx

@@ -9,8 +9,8 @@ export const onValueChange = (nodeProps, n, value) => {
   change.setNodeByKey(n.key, {
     data: {
       ...value,
-      index: n.data.index
-    }
+      index: n.data.index,
+    },
   });
 
   nodeProps.editor.props.onChange(change, () => {
@@ -21,14 +21,12 @@ export const onValueChange = (nodeProps, n, value) => {
 export const onRemoveResponse = (nodeProps, value) => {
   const val = nodeProps.editor.value;
   const change = val.change();
-  const dragInTheBlank = val.document.findDescendant(
-    n => n.data && n.data.index === value.index
-  );
+  const dragInTheBlank = val.document.findDescendant((n) => n.data && n.data.index === value.index);
 
   change.setNodeByKey(dragInTheBlank.key, {
     data: {
-      index: dragInTheBlank.data.index
-    }
+      index: dragInTheBlank.data.index,
+    },
   });
 
   nodeProps.editor.props.onChange(change, () => {
@@ -36,7 +34,7 @@ export const onRemoveResponse = (nodeProps, value) => {
   });
 };
 
-const DragDrop = props => {
+const DragDrop = (props) => {
   const { attributes, children, data, n, nodeProps, opts } = props;
   const { inTable } = data;
 
@@ -49,7 +47,7 @@ const DragDrop = props => {
         minWidth: '178px',
         position: 'relative',
         margin: inTable ? '10px' : '0 10px',
-        cursor: 'pointer'
+        cursor: 'pointer',
       }}
     >
       <DragDropTile
@@ -58,8 +56,8 @@ const DragDrop = props => {
         targetId="0"
         value={data}
         duplicates={opts.options.duplicates}
-        onChange={value => onValueChange(nodeProps, n, value)}
-        removeResponse={value => onRemoveResponse(nodeProps, value)}
+        onChange={(value) => onValueChange(nodeProps, n, value)}
+        removeResponse={(value) => onRemoveResponse(nodeProps, value)}
       >
         {nodeProps.children}
         {children}
@@ -73,7 +71,7 @@ DragDrop.propTypes = {
   data: PropTypes.object,
   n: PropTypes.object,
   nodeProps: PropTypes.object,
-  opts: PropTypes.object
+  opts: PropTypes.object,
 };
 
 export default DragDrop;

package/src/plugins/respArea/explicit-constructed-response/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const ExplicitConstructedResponse = props => {
+const ExplicitConstructedResponse = (props) => {
   const { attributes, children, value, error } = props;
 
   return (
@@ -13,7 +13,7 @@ const ExplicitConstructedResponse = props => {
         minWidth: '178px',
         position: 'relative',
         margin: '0 5px',
-        cursor: 'pointer'
+        cursor: 'pointer',
       }}
     >
       <div
@@ -27,10 +27,10 @@ const ExplicitConstructedResponse = props => {
           boxSizing: 'border-box',
           borderRadius: '3px',
           overflow: 'hidden',
-          padding: '8px'
+          padding: '8px',
         }}
         dangerouslySetInnerHTML={{
-          __html: value || '<div>&nbsp;</div>'
+          __html: value || '<div>&nbsp;</div>',
         }}
       />
       {children}
@@ -40,7 +40,8 @@ const ExplicitConstructedResponse = props => {
 
 ExplicitConstructedResponse.propTypes = {
   attributes: PropTypes.object,
-  value: PropTypes.string
+  error: PropTypes.any,
+  value: PropTypes.string,
 };
 
 export default ExplicitConstructedResponse;

package/src/plugins/respArea/icons/index.jsx

@@ -4,20 +4,23 @@ import ChevronRight from '@material-ui/icons/ChevronRight';
 import MoreVert from '@material-ui/icons/MoreVert';
 import { withStyles } from '@material-ui/core/styles';
 
-const getRotate = direction => {
+const getRotate = (direction) => {
   switch (direction) {
     case 'down':
       return 90;
+
     case 'up':
       return -90;
+
     case 'left':
       return 180;
+
     default:
       return 0;
   }
 };
 
-export const Chevron = props => {
+export const Chevron = (props) => {
   const { direction, style } = props;
   const rotate = getRotate(direction);
 
@@ -25,7 +28,7 @@ export const Chevron = props => {
     <ChevronRight
       style={{
         transform: `rotate(${rotate}deg)`,
-        ...style
+        ...style,
       }}
     />
   );
@@ -33,7 +36,7 @@ export const Chevron = props => {
 
 Chevron.propTypes = {
   direction: PropTypes.string,
-  style: PropTypes.object
+  style: PropTypes.object,
 };
 
 export const GripIcon = ({ style }) => {
@@ -41,7 +44,7 @@ export const GripIcon = ({ style }) => {
     <span style={style}>
       <MoreVert
         style={{
-          margin: '0 -16px'
+          margin: '0 -16px',
         }}
       />
       <MoreVert />
@@ -50,19 +53,19 @@ export const GripIcon = ({ style }) => {
 };
 
 GripIcon.propTypes = {
-  style: PropTypes.object
+  style: PropTypes.object,
 };
 
-export const ToolbarIcon = withStyles({
+export const ToolbarIcon = withStyles((theme) => ({
   icon: {
     fontFamily: 'Cerebri Sans !important',
-    fontSize: '14px',
+    fontSize: theme.typography.fontSize,
     fontWeight: 'bold',
     lineHeight: '14px',
     position: 'relative',
     top: '7px',
     width: '110px',
     height: '28px',
-    whiteSpace: 'nowrap'
-  }
-})(({ classes }) => <div className={classes.icon}>+ Response Area</div>);
+    whiteSpace: 'nowrap',
+  },
+}))(({ classes }) => <div className={classes.icon}>+ Response Area</div>);

package/src/plugins/respArea/index.jsx

@@ -18,26 +18,24 @@ const lastIndexMap = {};
 const elTypesMap = {
   'inline-dropdown': 'inline_dropdown',
   'explicit-constructed-response': 'explicit_constructed_response',
-  'drag-in-the-blank': 'drag_in_the_blank'
+  'drag-in-the-blank': 'drag_in_the_blank',
 };
 const elTypesArray = Object.values(elTypesMap);
 
 export default function ResponseAreaPlugin(opts) {
-  const isOfCurrentType = d => d.type === opts.type || d.type === elTypesMap[opts.type];
+  const isOfCurrentType = (d) => d.type === opts.type || d.type === elTypesMap[opts.type];
 
   const toolbar = {
     icon: <ToolbarIcon />,
     buttonStyles: {
-      margin: '0 20px 0 auto'
+      margin: '0 20px 0 auto',
     },
-    onClick: editor => {
+    onClick: (editor) => {
       log('[toolbar] onClick');
       const currentRespAreaList = [];
-      const descendants = Array.from(SlateNode.descendants(editor, { reverse: true })).map(
-        ([d]) => d
-      );
+      const descendants = Array.from(SlateNode.descendants(editor, { reverse: true })).map(([d]) => d);
 
-      descendants.forEach(d => {
+      descendants.forEach((d) => {
         if (isOfCurrentType(d)) {
           currentRespAreaList.push(d);
         }
@@ -86,35 +84,33 @@ export default function ResponseAreaPlugin(opts) {
       }
     },
     customToolbar: opts.respAreaToolbar,
-    showDone: false
+    showDone: false,
   };
 
   return {
     name: 'response_area',
     toolbar,
-    rules: editor => {
+    rules: (editor) => {
       const { isVoid, isInline, onChange } = editor;
 
-      editor.isVoid = element => {
+      editor.isVoid = (element) => {
         return elTypesArray.includes(element.type) ? true : isVoid(element);
       };
 
-      editor.isInline = element => {
+      editor.isInline = (element) => {
         return elTypesArray.includes(element.type) ? true : isInline(element);
       };
 
       let oldEditor = cloneDeep(editor);
 
-      editor.onChange = options => {
-        const descendants = Array.from(SlateNode.descendants(editor, { reverse: true })).map(
-          ([d]) => d
-        );
+      editor.onChange = (options) => {
+        const descendants = Array.from(SlateNode.descendants(editor, { reverse: true })).map(([d]) => d);
         const type = opts.type.replace(/-/g, '_');
 
         if (isUndefined(lastIndexMap[type])) {
           lastIndexMap[type] = 0;
 
-          descendants.forEach(d => {
+          descendants.forEach((d) => {
             if (d.type === type) {
               const newIndex = parseInt(d.data.index, 10);
 
@@ -129,29 +125,21 @@ export default function ResponseAreaPlugin(opts) {
           return;
         }
 
-        const oldDescendants = Array.from(SlateNode.descendants(oldEditor, { reverse: true })).map(
-          ([d]) => d
-        );
+        const oldDescendants = Array.from(SlateNode.descendants(oldEditor, { reverse: true })).map(([d]) => d);
         const currentRespAreaList = descendants.filter(isOfCurrentType);
         const oldRespAreaList = oldDescendants.filter(isOfCurrentType);
 
         toolbar.disabled = currentRespAreaList.length >= opts.maxResponseAreas;
 
         const arrayToFilter =
-          oldRespAreaList.length > currentRespAreaList.length
-            ? oldRespAreaList
-            : currentRespAreaList;
-        const arrayToUseForFilter =
-          arrayToFilter === oldRespAreaList ? currentRespAreaList : oldRespAreaList;
+          oldRespAreaList.length > currentRespAreaList.length ? oldRespAreaList : currentRespAreaList;
+        const arrayToUseForFilter = arrayToFilter === oldRespAreaList ? currentRespAreaList : oldRespAreaList;
 
         const elementsWithChangedStatus = arrayToFilter.filter(
-          d => !arrayToUseForFilter.find(e => e.data.index === d.data.index)
+          (d) => !arrayToUseForFilter.find((e) => e.data.index === d.data.index),
         );
 
-        if (
-          elementsWithChangedStatus.length &&
-          oldRespAreaList.length > currentRespAreaList.length
-        ) {
+        if (elementsWithChangedStatus.length && oldRespAreaList.length > currentRespAreaList.length) {
           opts.onHandleAreaChange(elementsWithChangedStatus);
         }
 
@@ -166,19 +154,19 @@ export default function ResponseAreaPlugin(opts) {
         return [];
       }
 
-      return plugins.filter(p => p.name !== 'response_area');
+      return plugins.filter((p) => p.name !== 'response_area');
     },
     deleteNode: (e, node, nodePath, editor, onChange) => {
       e.preventDefault();
 
       editor.apply({
         type: 'remove_node',
-        path: nodePath
+        path: nodePath,
       });
 
       onChange(editor);
     },
-    supports: node => elTypesArray.indexOf(node.type) >= 0,
+    supports: (node) => elTypesArray.indexOf(node.type) >= 0,
     renderNode(props) {
       const { attributes, node } = props;
 
@@ -205,13 +193,7 @@ export default function ResponseAreaPlugin(opts) {
         const { data } = node;
 
         return (
-          <DragInTheBlank
-            attributes={attributes}
-            data={data}
-            n={node}
-            nodeProps={props}
-            opts={opts}
-          >
+          <DragInTheBlank attributes={attributes} data={data} n={node} nodeProps={props} opts={opts}>
             {props.children}
           </DragInTheBlank>
         );
@@ -229,12 +211,12 @@ export default function ResponseAreaPlugin(opts) {
     },
     onDrop(event, change, editor) {
       const closestEl = event.target.closest('[data-key]');
-      const inline = editor.value.document.findDescendant(d => d.key === closestEl.dataset.key);
+      const inline = editor.value.document.findDescendant((d) => d.key === closestEl.dataset.key);
 
       if (inline.type === 'drag_in_the_blank') {
         return false;
       }
-    }
+    },
   };
 }
 
@@ -248,16 +230,16 @@ export const serialization = {
           type: 'inline_dropdown',
           data: {
             index: el.dataset.index,
-            value: el.dataset.value
-          }
+            value: el.dataset.value,
+          },
         });
       case 'explicit_constructed_response':
         return jsx('element', {
           type: 'explicit_constructed_response',
           data: {
             index: el.dataset.index,
-            value: el.dataset.value
-          }
+            value: el.dataset.value,
+          },
         });
       case 'drag_in_the_blank':
         return jsx('element', {
@@ -266,8 +248,8 @@ export const serialization = {
             index: el.dataset.index,
             id: el.dataset.id,
             value: el.dataset.value,
-            inTable: el.dataset.inTable
-          }
+            inTable: el.dataset.inTable,
+          },
         });
     }
   },
@@ -281,13 +263,7 @@ export const serialization = {
       case 'explicit_constructed_response': {
         const data = object.data;
 
-        return (
-          <span
-            data-type="explicit_constructed_response"
-            data-index={data.index}
-            data-value={data.value}
-          />
-        );
+        return <span data-type="explicit_constructed_response" data-index={data.index} data-value={data.value} />;
       }
       case 'drag_in_the_blank': {
         const data = object.data;
@@ -303,5 +279,5 @@ export const serialization = {
         );
       }
     }
-  }
+  },
 };

package/src/plugins/respArea/inline-dropdown/index.jsx

@@ -14,7 +14,7 @@ const InlineDropdown = ({ attributes, children, selectedItem }) => {
         display: 'inline-flex',
         height: '50px',
         margin: '0 5px',
-        cursor: 'pointer'
+        cursor: 'pointer',
       }}
     >
       <div
@@ -26,7 +26,7 @@ const InlineDropdown = ({ attributes, children, selectedItem }) => {
           border: '1px solid #C0C3CF',
           boxSizing: 'border-box',
           borderRadius: '3px',
-          position: 'relative'
+          position: 'relative',
         }}
       >
         {children}
@@ -37,10 +37,10 @@ const InlineDropdown = ({ attributes, children, selectedItem }) => {
             padding: '0 25px 0 8px',
             whiteSpace: 'nowrap',
             textOverflow: 'ellipsis',
-            lineHeight: '35px'
+            lineHeight: '35px',
           }}
           dangerouslySetInnerHTML={{
-            __html: html
+            __html: html,
           }}
         />
         <Chevron
@@ -48,7 +48,7 @@ const InlineDropdown = ({ attributes, children, selectedItem }) => {
           style={{
             position: 'absolute',
             top: '5px',
-            right: '5px'
+            right: '5px',
           }}
         />
       </div>
@@ -58,7 +58,7 @@ const InlineDropdown = ({ attributes, children, selectedItem }) => {
 
 InlineDropdown.propTypes = {
   attributes: PropTypes.object,
-  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
+  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 };
 
 export default InlineDropdown;

package/src/plugins/respArea/utils.jsx

@@ -2,10 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Snackbar from '@material-ui/core/Snackbar';
 
-export const insertSnackBar = message => {
+export const isNumber = (val) => !isNaN(parseFloat(val)) && isFinite(val);
+
+export const insertSnackBar = (message) => {
   const prevSnacks = document.querySelectorAll('.response-area-alert');
 
-  prevSnacks.forEach(s => s.remove());
+  prevSnacks.forEach((s) => s.remove());
 
   const newEl = document.createElement('div');
 
@@ -16,7 +18,7 @@ export const insertSnackBar = message => {
       anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
       open={true}
       ContentProps={{
-        'aria-describedby': 'message-id'
+        'aria-describedby': 'message-id',
       }}
       message={<span id="message-id">{message}</span>}
     />
@@ -31,12 +33,12 @@ export const insertSnackBar = message => {
   }, 2000);
 };
 
-export const defaultECR = index => ({
+export const defaultECR = (index) => ({
   type: 'explicit_constructed_response',
   children: [{ text: '' }],
   data: {
-    index
-  }
+    index,
+  },
 });
 
 export const defaultDIB = (opts, index) => ({
@@ -45,24 +47,26 @@ export const defaultDIB = (opts, index) => ({
   data: {
     index,
     duplicates: opts.options.duplicates,
-    value: null
-  }
+    value: null,
+  },
 });
 
-export const defaultIDD = index => ({
+export const defaultIDD = (index) => ({
   type: 'inline_dropdown',
   children: [{ text: '' }],
   data: {
-    index
-  }
+    index,
+  },
 });
 
 export const getDefaultElement = (opts, index) => {
   switch (opts.type) {
     case 'explicit-constructed-response':
       return defaultECR(index);
+
     case 'drag-in-the-blank':
       return defaultDIB(opts, index);
+
     default:
       // inline-dropdown
       return defaultIDD(index);