@pie-lib/editable-html 10.0.0-beta.4 → 10.0.0-beta.6

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

@@ -2,29 +2,29 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 
-const useStyles = withStyles(theme => ({
+const useStyles = withStyles((theme) => ({
   root: {
     position: 'relative',
     bottom: '5px',
     left: 0,
     width: '100%',
-    background: 'white',
+    background: theme.palette.common.white,
     display: 'inline-flex',
     padding: '5px',
-    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
+    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
   },
   editContainer: {
     cursor: 'pointer',
     flex: 3,
-    border: 'solid black',
+    border: `solid ${theme.palette.common.black}`,
     textAlign: 'right',
     borderWidth: '0 2px 0 0',
     marginRight: '5px',
-    paddingRight: '5px'
+    paddingRight: '5px',
   },
   removeContainer: {
-    cursor: 'pointer'
-  }
+    cursor: 'pointer',
+  },
 }));
 
 class MediaToolbar extends React.Component {
@@ -32,7 +32,7 @@ class MediaToolbar extends React.Component {
     classes: PropTypes.object,
     onEdit: PropTypes.func,
     hideEdit: PropTypes.bool,
-    onRemove: PropTypes.func
+    onRemove: PropTypes.func,
   };
 
   render() {

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

@@ -5,22 +5,25 @@ 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={{

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

@@ -49,7 +49,7 @@ const DragDrop = props => {
         minWidth: '178px',
         position: 'relative',
         margin: inTable ? '10px' : '0 10px',
-        cursor: 'pointer'
+        cursor: 'pointer',
       }}
     >
       <DragDropTile
@@ -58,8 +58,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 +73,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

@@ -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,17 +18,17 @@ 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 => {
       log('[toolbar] onClick');
@@ -86,7 +86,7 @@ export default function ResponseAreaPlugin(opts) {
       }
     },
     customToolbar: opts.respAreaToolbar,
-    showDone: false
+    showDone: false,
   };
 
   return {
@@ -166,7 +166,7 @@ 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();
@@ -229,12 +229,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;
       }
-    }
+    },
   };
 }
 
@@ -281,13 +281,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 +297,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>}
     />
@@ -61,8 +63,10 @@ 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);

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

@@ -5,53 +5,47 @@ const styles = {
   icon: {
     fill: 'grey',
     '&:hover': {
-      fill: 'black'
-    }
-  }
+      fill: 'black',
+    },
+  },
 };
 
-const SvgIcon = Component => {
-  return withStyles(styles)(props => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-    >
+const SvgIcon = (Component) => {
+  return withStyles(styles)((props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
       <Component className={props.classes.icon} />
     </svg>
   ));
 };
-export const AddRow = SvgIcon(props => (
+export const AddRow = SvgIcon((props) => (
   <path
     {...props}
     d="M22,10A2,2 0 0,1 20,12H4A2,2 0 0,1 2,10V3H4V5H8V3H10V5H14V3H16V5H20V3H22V10M4,10H8V7H4V10M10,10H14V7H10V10M20,10V7H16V10H20M11,14H13V17H16V19H13V22H11V19H8V17H11V14Z"
   />
 ));
 
-export const RemoveRow = SvgIcon(props => (
+export const RemoveRow = SvgIcon((props) => (
   <path
     {...props}
     d="M9.41,13L12,15.59L14.59,13L16,14.41L13.41,17L16,19.59L14.59,21L12,18.41L9.41,21L8,19.59L10.59,17L8,14.41L9.41,13M22,9A2,2 0 0,1 20,11H4A2,2 0 0,1 2,9V6A2,2 0 0,1 4,4H20A2,2 0 0,1 22,6V9M4,9H8V6H4V9M10,9H14V6H10V9M16,9H20V6H16V9Z"
   />
 ));
 
-export const AddColumn = SvgIcon(props => (
+export const AddColumn = SvgIcon((props) => (
   <path
     {...props}
     d="M11,2A2,2 0 0,1 13,4V20A2,2 0 0,1 11,22H2V2H11M4,10V14H11V10H4M4,16V20H11V16H4M4,4V8H11V4H4M15,11H18V8H20V11H23V13H20V16H18V13H15V11Z"
   />
 ));
 
-export const RemoveColumn = SvgIcon(props => (
+export const RemoveColumn = SvgIcon((props) => (
   <path
     {...props}
     d="M4,2H11A2,2 0 0,1 13,4V20A2,2 0 0,1 11,22H4A2,2 0 0,1 2,20V4A2,2 0 0,1 4,2M4,10V14H11V10H4M4,16V20H11V16H4M4,4V8H11V4H4M17.59,12L15,9.41L16.41,8L19,10.59L21.59,8L23,9.41L20.41,12L23,14.59L21.59,16L19,13.41L16.41,16L15,14.59L17.59,12Z"
   />
 ));
 
-export const RemoveTable = SvgIcon(props => (
+export const RemoveTable = SvgIcon((props) => (
   <path
     {...props}
     d="M15.46,15.88L16.88,14.46L19,16.59L21.12,14.46L22.54,15.88L20.41,18L22.54,20.12L21.12,21.54L19,19.41L16.88,21.54L15.46,20.12L17.59,18L15.46,15.88M4,3H18A2,2 0 0,1 20,5V12.08C18.45,11.82 16.92,12.18 15.68,13H12V17H13.08C12.97,17.68 12.97,18.35 13.08,19H4A2,2 0 0,1 2,17V5A2,2 0 0,1 4,3M4,7V11H10V7H4M12,7V11H18V7H12M4,13V17H10V13H4Z"

package/src/plugins/table/index.jsx

@@ -44,7 +44,7 @@ TableRow.propTypes = {
   attributes: PropTypes.object,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
 };
 
 const TableBody = React.forwardRef(props => <tbody {...props.attributes}>{props.children}</tbody>);
@@ -90,7 +90,7 @@ TableCell.propTypes = {
   attributes: PropTypes.object,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
 };
 
 const getAncestorByType = (editor, type) => {
@@ -245,8 +245,8 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
       const newTable = core.utils.createTableWithOptions(2, 2, {
         data: {
           border: '1',
-          newTable: true
-        }
+          newTable: true,
+        },
       });
 
       editor.insertNode(newTable);
@@ -399,7 +399,7 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
         />
       );
       return Tb;
-    }
+    },
   };
 
   core.supports = node => TABLE_TYPES.includes(node.type);
@@ -419,7 +419,7 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
     }
   };
   Node.propTypes = {
-    node: PropTypes.object
+    node: PropTypes.object,
   };
 
   core.renderNode = Node;
@@ -427,7 +427,7 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
   return core;
 };
 
-export const parseStyleString = s => {
+export const parseStyleString = (s) => {
   const regex = /([\w-]*)\s*:\s*([^;]*)/g;
   let match;
   const result = {};
@@ -437,9 +437,9 @@ export const parseStyleString = s => {
   return result;
 };
 
-export const reactAttributes = o => toStyleObject(o, { camelize: true, addUnits: false });
+export const reactAttributes = (o) => toStyleObject(o, { camelize: true, addUnits: false });
 
-const attributesToMap = el => (acc, attribute) => {
+const attributesToMap = (el) => (acc, attribute) => {
   const value = el.getAttribute(attribute);
   if (value) {
     if (attribute === 'style') {
@@ -500,6 +500,7 @@ export const serialization = {
           next(el.childNodes)
         );
       }
+
       case 'th': {
         return jsx(
           'element',
@@ -510,6 +511,7 @@ export const serialization = {
           next(el.childNodes)
         );
       }
+
       case 'tr': {
         return jsx(
           'element',
@@ -519,6 +521,7 @@ export const serialization = {
           next(Array.from(el.children))
         );
       }
+
       case 'td': {
         return jsx(
           'element',
@@ -535,6 +538,7 @@ export const serialization = {
     switch (object.type) {
       case 'table': {
         const attributes = dataToAttributes(object.data);
+
         return (
           <table {...attributes}>
             {children}
@@ -556,5 +560,5 @@ export const serialization = {
         return <th {...attributes}>{children}</th>;
       }
     }
-  }
+  },
 };