@pie-lib/editable-html 9.4.1 → 9.5.1-next.2

package/src/plugins/image/component.jsx

@@ -217,14 +217,17 @@ export class Component extends React.Component {
         justifyContent = 'flex-start';
         margin = '0';
         break;
+
       case 'center':
         justifyContent = 'center';
         margin = '0 auto';
         break;
+
       case 'right':
         justifyContent = 'flex-end';
         margin = 'auto 0 0 auto ';
         break;
+
       default:
         justifyContent = 'flex-start';
         margin = '0';
@@ -280,11 +283,11 @@ const styles = (theme) => ({
     transition: 'opacity 200ms linear',
   },
   floatingButtonRow: {
-    backgroundColor: 'white',
+    backgroundColor: theme.palette.background.paper,
     borderRadius: '1px',
     display: 'flex',
     padding: '10px',
-    border: 'solid 1px #eeeeee',
+    border: `solid 1px ${theme.palette.grey[200]}`,
     boxShadow:
       '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
   },
@@ -306,7 +309,7 @@ const styles = (theme) => ({
   },
   root: {
     position: 'relative',
-    border: 'solid 1px white',
+    border: `solid 1px ${theme.palette.common.white}`,
     display: 'flex',
     transition: 'opacity 200ms linear',
   },

package/src/plugins/media/media-dialog.js

@@ -508,7 +508,7 @@ export class MediaDialog extends React.Component {
   }
 }
 
-const styles = () => ({
+const styles = (theme) => ({
   paper: {
     minWidth: '500px',
   },
@@ -520,7 +520,7 @@ const styles = () => ({
     flexDirection: 'space-between',
   },
   rowItem: {
-    marginRight: '12px',
+    marginRight: theme.spacing.unit * 1.5,
     cursor: 'pointer',
   },
   active: {
@@ -528,14 +528,14 @@ const styles = () => ({
     borderBottom: `2px solid ${color.primary()}`,
   },
   uploadInput: {
-    marginTop: '12px',
+    marginTop: theme.spacing.unit * 1.5,
   },
   error: {
-    marginTop: '12px',
-    color: 'red',
+    marginTop: theme.spacing.unit * 1.5,
+    color: theme.palette.error.main,
   },
   deleteIcon: {
-    marginLeft: '12px',
+    marginLeft: theme.spacing.unit * 1.5,
   },
 });
 

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

@@ -8,7 +8,7 @@ const useStyles = withStyles((theme) => ({
     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)',
@@ -16,7 +16,7 @@ const useStyles = withStyles((theme) => ({
   editContainer: {
     cursor: 'pointer',
     flex: 3,
-    border: 'solid black',
+    border: `solid ${theme.palette.common.black}`,
     textAlign: 'right',
     borderWidth: '0 2px 0 0',
     marginRight: '5px',

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

@@ -17,10 +17,10 @@ const useStyles = withStyles((theme) => ({
     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`,

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

@@ -8,10 +8,13 @@ const getRotate = (direction) => {
   switch (direction) {
     case 'down':
       return 90;
+
     case 'up':
       return -90;
+
     case 'left':
       return 180;
+
     default:
       return 0;
   }
@@ -53,10 +56,10 @@ GripIcon.propTypes = {
   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',
@@ -65,4 +68,4 @@ export const ToolbarIcon = withStyles({
     height: '28px',
     whiteSpace: 'nowrap',
   },
-})(({ classes }) => <div className={classes.icon}>+ Response Area</div>);
+}))(({ classes }) => <div className={classes.icon}>+ Response Area</div>);

package/src/plugins/respArea/utils.jsx

@@ -68,8 +68,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/index.jsx

@@ -377,6 +377,7 @@ export const serialization = {
           data: attributes.reduce(attributesToMap(el), {}),
         };
       }
+
       case 'th': {
         return {
           object: 'block',
@@ -385,6 +386,7 @@ export const serialization = {
           data: cellAttributes.reduce(attributesToMap(el), { header: true }),
         };
       }
+
       case 'tr': {
         return {
           object: 'block',
@@ -392,6 +394,7 @@ export const serialization = {
           nodes: next(Array.from(el.children)),
         };
       }
+
       case 'td': {
         return {
           object: 'block',
@@ -410,18 +413,22 @@ export const serialization = {
     switch (object.type) {
       case 'table': {
         const attributes = dataToAttributes(object.data);
+
         return (
           <table {...attributes}>
             <tbody>{children}</tbody>
           </table>
         );
       }
+
       case 'table_row': {
         return <tr>{children}</tr>;
       }
+
       case 'table_cell': {
         const attributes = dataToAttributes(object.data);
         delete attributes.header;
+
         if (object.data.get('header')) {
           return <th {...attributes}>{children}</th>;
         } else {

package/src/plugins/toolbar/editor-and-toolbar.jsx

@@ -122,7 +122,7 @@ export class EditorAndToolbar extends React.Component {
   }
 }
 
-const style = {
+const style = (theme) => ({
   root: {
     position: 'relative',
     padding: '0px',
@@ -178,7 +178,7 @@ const style = {
     '&:hover': {
       '&::after': {
         transform: 'scaleX(1)',
-        backgroundColor: 'black',
+        backgroundColor: theme.palette.common.black,
         height: '2px',
       },
     },
@@ -220,7 +220,7 @@ const style = {
     '&:hover': {
       '&::after': {
         transform: 'scaleX(0)',
-        backgroundColor: 'black',
+        backgroundColor: theme.palette.common.black,
         height: '2px',
       },
     },
@@ -238,7 +238,7 @@ const style = {
     },
   },
   error: {
-    border: '2px solid red',
+    border: `2px solid ${theme.palette.error.main}`,
   },
   noBorder: {
     border: 'none',
@@ -246,6 +246,6 @@ const style = {
   noPadding: {
     padding: 0,
   },
-};
+});
 
 export default withStyles(style)(EditorAndToolbar);