@pie-lib/editable-html 11.18.6-esmbeta.0 → 11.19.0-mui-update.0

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ChevronRight from '@material-ui/icons/ChevronRight';
-import MoreVert from '@material-ui/icons/MoreVert';
-import { withStyles } from '@material-ui/core/styles';
+import ChevronRight from '@mui/icons-material/ChevronRight';
+import MoreVert from '@mui/icons-material/MoreVert';
+import { styled } from '@mui/material/styles';
 
 const getRotate = (direction) => {
   switch (direction) {
@@ -56,16 +56,16 @@ GripIcon.propTypes = {
   style: PropTypes.object,
 };
 
-export const ToolbarIcon = withStyles((theme) => ({
-  icon: {
-    fontFamily: 'Cerebri Sans !important',
-    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>);
+const StyledToolbarIcon = styled('div')(({ theme }) => ({
+  fontFamily: 'Cerebri Sans !important',
+  fontSize: theme.typography.fontSize,
+  fontWeight: 'bold',
+  lineHeight: '14px',
+  position: 'relative',
+  top: '7px',
+  width: '110px',
+  height: '28px',
+  whiteSpace: 'nowrap',
+}));
+
+export const ToolbarIcon = () => <StyledToolbarIcon>+ Response Area</StyledToolbarIcon>;

package/src/plugins/respArea/math-templated/index.jsx

@@ -1,104 +1,103 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { mq } from '@pie-lib/math-input';
 
-const MathTemplated = ({ attributes, value, classes, keyToDisplay }) => (
-  <span {...attributes} className={classes.spanContainer}>
-    <div className={classes.responseBox}>{keyToDisplay}</div>
-    <div className={classes.mathBlock}>
-      <mq.Static latex={value} />
-    </div>
-  </span>
-);
+const StyledSpanContainer = styled('span')(({ theme }) => ({
+  display: 'inline-flex',
+  border: '1px solid #C0C3CF',
+  margin: '1px 5px',
+  cursor: 'pointer',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: '50px',
+  minHeight: '36px',
+  height: 'fit-content',
+}));
 
-MathTemplated.propTypes = {
-  attributes: PropTypes.object,
-  classes: PropTypes.object.isRequired,
-  value: PropTypes.string,
-  keyToDisplay: PropTypes.string,
-};
+const StyledResponseBox = styled('div')(({ theme }) => ({
+  background: theme.palette.grey['A100'],
+  color: theme.palette.grey['A700'],
+  display: 'inline-flex',
+  borderRight: '2px solid #C0C3CF',
+  boxSizing: 'border-box',
+  overflow: 'hidden',
+  fontSize: '12px',
+  minHeight: '36px',
+  height: '100%',
+  alignItems: 'center',
+  fontFamily: 'Symbola, Times New Roman, serif',
+  padding: '0 2px',
+}));
 
-const styles = (theme) => ({
-  responseBox: {
-    background: theme.palette.grey['A100'],
-    color: theme.palette.grey['A700'],
-    display: 'inline-flex',
-    borderRight: '2px solid #C0C3CF',
-    boxSizing: 'border-box',
-    overflow: 'hidden',
-    fontSize: '12px',
-    minHeight: '36px',
-    height: '100%',
-    alignItems: 'center',
-    fontFamily: 'Symbola, Times New Roman, serif',
-    padding: '0 2px',
+const StyledMathBlock = styled('div')(() => ({
+  flex: 8,
+  color: 'var(--pie-text, black)',
+  padding: '4px !important',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: 'var(--pie-background, rgba(255, 255, 255, 0))',
+  '& > .mq-math-mode sup.mq-nthroot': {
+    fontSize: '70% !important',
+    verticalAlign: '1em !important',
   },
-  spanContainer: {
-    display: 'inline-flex',
-    border: '1px solid #C0C3CF',
-    margin: '1px 5px',
-    cursor: 'pointer',
-    alignItems: 'center',
-    justifyContent: 'center',
-    minWidth: '50px',
-    minHeight: '36px',
-    height: 'fit-content',
+  '& > .mq-math-mode .mq-sqrt-stem': {
+    borderTop: '0.07em solid',
+    marginLeft: '-1.5px',
+    marginTop: '-2px !important',
+    paddingTop: '5px !important',
   },
-  mathBlock: {
-    flex: 8,
-    color: 'var(--pie-text, black)',
-    padding: '4px !important',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'var(--pie-background, rgba(255, 255, 255, 0))',
-    '& > .mq-math-mode sup.mq-nthroot': {
-      fontSize: '70% !important',
-      verticalAlign: '1em !important',
-    },
-    '& > .mq-math-mode .mq-sqrt-stem': {
-      borderTop: '0.07em solid',
-      marginLeft: '-1.5px',
-      marginTop: '-2px !important',
-      paddingTop: '5px !important',
-    },
-    '& .mq-overarrow-inner': {
-      paddingTop: '0 !important',
-      border: 'none !important',
+  '& .mq-overarrow-inner': {
+    paddingTop: '0 !important',
+    border: 'none !important',
+  },
+  '& .mq-overarrow.mq-arrow-both': {
+    marginTop: '0px',
+    minWidth: '1.23em',
+    '& *': {
+      lineHeight: '1 !important',
     },
-    '& .mq-overarrow.mq-arrow-both': {
-      marginTop: '0px',
-      minWidth: '1.23em',
-      '& *': {
-        lineHeight: '1 !important',
-      },
-      '&:before': {
-        top: '-0.4em',
-        left: '-1px',
-      },
-      '&:after': {
-        top: '0px !important',
-        position: 'absolute !important',
-        right: '-2px',
-      },
-      '&.mq-empty:after': {
-        top: '-0.45em',
-      },
+    '&:before': {
+      top: '-0.4em',
+      left: '-1px',
     },
-    '& .mq-overarrow.mq-arrow-right': {
-      '&:before': {
-        top: '-0.4em',
-        right: '-1px',
-      },
+    '&:after': {
+      top: '0px !important',
+      position: 'absolute !important',
+      right: '-2px',
     },
-    '& .mq-overarrow-inner-right': {
-      display: 'none !important',
+    '&.mq-empty:after': {
+      top: '-0.45em',
     },
-    '& .mq-overarrow-inner-left': {
-      display: 'none !important',
+  },
+  '& .mq-overarrow.mq-arrow-right': {
+    '&:before': {
+      top: '-0.4em',
+      right: '-1px',
     },
   },
-});
+  '& .mq-overarrow-inner-right': {
+    display: 'none !important',
+  },
+  '& .mq-overarrow-inner-left': {
+    display: 'none !important',
+  },
+}));
+
+const MathTemplated = ({ attributes, value, keyToDisplay }) => (
+  <StyledSpanContainer {...attributes}>
+    <StyledResponseBox>{keyToDisplay}</StyledResponseBox>
+    <StyledMathBlock>
+      <mq.Static latex={value} />
+    </StyledMathBlock>
+  </StyledSpanContainer>
+);
+
+MathTemplated.propTypes = {
+  attributes: PropTypes.object,
+  value: PropTypes.string,
+  keyToDisplay: PropTypes.string,
+};
 
-export default withStyles(styles)(MathTemplated);
+export default MathTemplated;

package/src/plugins/respArea/utils.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Inline } from 'slate';
-import Snackbar from '@material-ui/core/Snackbar';
+import Snackbar from '@mui/material/Snackbar';
 
 export const isNumber = (val) => !isNaN(parseFloat(val)) && isFinite(val);
 

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

@@ -1,52 +1,50 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
-const styles = {
-  icon: {
-    fill: 'grey',
-    '&:hover': {
-      fill: 'black',
-    },
+const StyledPath = styled('path')({
+  fill: 'grey',
+  '&:hover': {
+    fill: 'black',
   },
-};
+});
 
 const SvgIcon = (Component) => {
-  return withStyles(styles)((props) => (
+  return (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} />
+      <Component {...props} />
     </svg>
-  ));
+  );
 };
 export const AddRow = SvgIcon((props) => (
-  <path
+  <StyledPath
     {...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) => (
-  <path
+  <StyledPath
     {...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) => (
-  <path
+  <StyledPath
     {...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) => (
-  <path
+  <StyledPath
     {...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) => (
-  <path
+  <StyledPath
     {...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

@@ -1,34 +1,45 @@
 import React from 'react';
 import { Block } from 'slate';
 import debug from 'debug';
-import GridOn from '@material-ui/icons/GridOn';
+import GridOn from '@mui/icons-material/GridOn';
 import TableToolbar from './table-toolbar';
 import PropTypes from 'prop-types';
 import SlatePropTypes from 'slate-prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import convert from 'react-attr-converter';
 import { object as toStyleObject } from 'to-style';
 import CustomTablePlugin from './CustomTablePlugin';
 
 const log = debug('@pie-lib:editable-html:plugins:table');
 
-const Table = withStyles(() => ({
-  table: {},
-}))((props) => {
+const StyledTable = styled('table')({});
+
+const StyledTableCell = styled(({ node, ...props }) => {
+  const Tag = node.data.get('header') ? 'th' : 'td';
+  return <Tag {...props} />;
+})({
+  '&': {
+    minWidth: '25px',
+  },
+  '&[data-cell-type="td"]': {
+    minWidth: '25px',
+  },
+});
+
+const Table = (props) => {
   const nodeAttributes = dataToAttributes(props.node.data);
 
   return (
-    <table
-      className={props.classes.table}
+    <StyledTable
       {...props.attributes}
       {...nodeAttributes}
       onFocus={props.onFocus}
       onBlur={props.onBlur}
     >
       <tbody>{props.children}</tbody>
-    </table>
+    </StyledTable>
   );
-});
+};
 
 Table.propTypes = {
   attributes: PropTypes.object,
@@ -47,29 +58,26 @@ TableRow.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
 };
 
-const TableCell = withStyles(() => ({
-  td: {
-    minWidth: '25px',
-  },
-}))((props) => {
+const TableCell = (props) => {
   const Tag = props.node.data.get('header') ? 'th' : 'td';
-
   const nodeAttributes = dataToAttributes(props.node.data);
   delete nodeAttributes.header;
 
   return (
-    <Tag
+    <StyledTableCell
+      as={Tag}
+      node={props.node}
       {...props.attributes}
       {...nodeAttributes}
       colSpan={props.node.data.get('colspan')}
-      className={props.classes[Tag]}
+      data-cell-type={Tag}
       onFocus={props.onFocus}
       onBlur={props.onBlur}
     >
       {props.children}
-    </Tag>
+    </StyledTableCell>
   );
-});
+};
 
 TableCell.propTypes = {
   attributes: PropTypes.object,

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { Button } from '../toolbar/toolbar-buttons';
 import { DoneButton } from '../toolbar/done-button';
-import BorderAll from '@material-ui/icons/BorderAll';
+import BorderAll from '@mui/icons-material/BorderAll';
 import { ToolbarButton } from '../toolbar/default-toolbar';
 
 import { AddRow, AddColumn, RemoveColumn, RemoveRow, RemoveTable } from './icons';
@@ -11,6 +11,16 @@ import debug from 'debug';
 
 const log = debug('@pie-lib:editable-html:plugins:table-toolbar');
 
+const TableToolbarContainer = styled('div')({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'space-between',
+});
+
+const ToolbarButtons = styled('div')({
+  display: 'flex',
+});
+
 export class TableToolbar extends React.Component {
   static propTypes = {
     plugins: PropTypes.array.isRequired,
@@ -24,7 +34,6 @@ export class TableToolbar extends React.Component {
     onToggleBorder: PropTypes.func.isRequired,
     hasBorder: PropTypes.bool,
     onDone: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired,
   };
 
   static defaultProps = {
@@ -52,7 +61,6 @@ export class TableToolbar extends React.Component {
       onRemoveTable,
       onToggleBorder,
       hasBorder,
-      classes,
     } = this.props;
     log('[render] hasBorder:', hasBorder);
 
@@ -78,8 +86,8 @@ export class TableToolbar extends React.Component {
     );
 
     return (
-      <div className={classes.tableToolbar}>
-        <div className={classes.toolbarButtons}>
+      <TableToolbarContainer>
+        <ToolbarButtons>
           <Button onClick={onAddRow}>
             <AddRow />
           </Button>
@@ -107,7 +115,7 @@ export class TableToolbar extends React.Component {
           <Button onClick={onToggleBorder} active={hasBorder}>
             <BorderAll />
           </Button>
-        </div>
+        </ToolbarButtons>
         {filteredPlugins.respAreaPlugin && (
           <ToolbarButton
             key={'plugin-response-area'}
@@ -118,19 +126,9 @@ export class TableToolbar extends React.Component {
           />
         )}
         <DoneButton onClick={this.onDone} />
-      </div>
+      </TableToolbarContainer>
     );
   }
 }
 
-const styles = () => ({
-  tableToolbar: {
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'space-between',
-  },
-  toolbarButtons: {
-    display: 'flex',
-  },
-});
-export default withStyles(styles)(TableToolbar);
+export default TableToolbar;

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import Collapse from '@material-ui/core/Collapse';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
+import Collapse from '@mui/material/Collapse';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
 
 export const AlignLeft = () => (
   <svg width="20" height="20" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">

package/src/plugins/toolbar/__tests__/default-toolbar.test.jsx

@@ -10,7 +10,7 @@ import renderer from 'react-test-renderer';
 
 mockMathInput();
 
-jest.mock('@material-ui/core/IconButton', () => {
+jest.mock('@mui/material/IconButton', () => {
   return (props) => <div className={props.className} style={props.style} ariaLabel={props['aria-label']} />;
 });
 

package/src/plugins/toolbar/__tests__/toolbar.test.jsx

@@ -9,7 +9,7 @@ import renderer from 'react-test-renderer';
 
 mockMathInput();
 
-jest.mock('@material-ui/core/IconButton', () => {
+jest.mock('@mui/material/IconButton', () => {
   return (props) => <div className={props.className} style={props.style} ariaLabel={props['aria-label']} />;
 });
 

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

@@ -4,13 +4,25 @@ import React from 'react';
 import SlatePropTypes from 'slate-prop-types';
 
 import { hasBlock, hasMark } from '../utils';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
 import { Button, MarkButton } from './toolbar-buttons';
 import debug from 'debug';
 
 const log = debug('@pie-lib:editable-html:plugins:toolbar');
 
+const DefaultToolbarContainer = styled('div')({
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+});
+
+const ButtonsContainer = styled('div')({
+  alignItems: 'center',
+  display: 'flex',
+  width: '100%',
+});
+
 export const ToolbarButton = (props) => {
   const onToggle = () => {
     const c = props.onToggle(props.value.change(), props);
@@ -89,7 +101,6 @@ export const DefaultToolbar = ({
   onChange,
   getFocusedValue,
   onDone,
-  classes,
   showDone,
   deletable,
   isHtmlMode,
@@ -149,8 +160,8 @@ export const DefaultToolbar = ({
   };
 
   return (
-    <div className={classes.defaultToolbar} onFocus={handleFocus} tabIndex="1" onBlur={onBlur}>
-      <div className={classes.buttonsContainer}>
+    <DefaultToolbarContainer onFocus={handleFocus} tabIndex="1" onBlur={onBlur}>
+      <ButtonsContainer>
         {filtered.map((p, index) => {
           return (
             <ToolbarButton
@@ -163,14 +174,13 @@ export const DefaultToolbar = ({
             />
           );
         })}
-      </div>
+      </ButtonsContainer>
       {showDone && !deletable && <DoneButton doneButtonRef={doneButtonRef} onClick={onDone} />}
-    </div>
+    </DefaultToolbarContainer>
   );
 };
 
 DefaultToolbar.propTypes = {
-  classes: PropTypes.object.isRequired,
   plugins: PropTypes.array.isRequired,
   pluginProps: PropTypes.object,
   value: SlatePropTypes.value.isRequired,
@@ -190,17 +200,4 @@ DefaultToolbar.defaultProps = {
   pluginProps: {},
 };
 
-const toolbarStyles = () => ({
-  defaultToolbar: {
-    display: 'flex',
-    width: '100%',
-    justifyContent: 'space-between',
-  },
-  buttonsContainer: {
-    alignItems: 'center',
-    display: 'flex',
-    width: '100%',
-  },
-});
-
-export default withStyles(toolbarStyles)(DefaultToolbar);
+export default DefaultToolbar;

package/src/plugins/toolbar/done-button.jsx

@@ -1,38 +1,32 @@
 import React from 'react';
 
-import IconButton from '@material-ui/core/IconButton';
-import Check from '@material-ui/icons/Check';
-import { withStyles } from '@material-ui/core/styles';
+import IconButton from '@mui/material/IconButton';
+import Check from '@mui/icons-material/Check';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 
-export const RawDoneButton = ({ classes, onClick, doneButtonRef }) => (
-  <IconButton
+const StyledIconButton = styled(IconButton)({
+  verticalAlign: 'top',
+  width: '28px',
+  height: '28px',
+  color: 'var(--editable-html-toolbar-check, #00bb00)',
+  padding: '4px',
+});
+
+export const RawDoneButton = ({ onClick, doneButtonRef }) => (
+  <StyledIconButton
     aria-label="Done"
-    className={classes.iconRoot}
     buttonRef={doneButtonRef}
     onClick={onClick}
-    classes={{
-      label: classes.label,
-      root: classes.iconRoot,
-    }}
+    size="large"
   >
     <Check />
-  </IconButton>
+  </StyledIconButton>
 );
 
 RawDoneButton.propTypes = {
-  classes: PropTypes.object.isRequired,
   onClick: PropTypes.func,
   doneButtonRef: PropTypes.func,
 };
 
-const styles = {
-  iconRoot: {
-    verticalAlign: 'top',
-    width: '28px',
-    height: '28px',
-    color: 'var(--editable-html-toolbar-check, #00bb00)',
-    padding: '4px',
-  },
-};
-export const DoneButton = withStyles(styles)(RawDoneButton);
+export const DoneButton = RawDoneButton;