@pie-lib/editable-html-tip-tap 1.0.20 → 1.0.21-next.6057

package/src/components/TiptapContainer.jsx

@@ -1,17 +1,136 @@
 import React, { useEffect, useMemo } from 'react';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-
-import styles from '../styles/editorContainerStyles';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
 import { valueToSize } from '../utils/size';
 
 import StyledMenuBar from './MenuBar';
 
+const StyledRoot = styled('div', {
+  shouldForwardProp: (prop) => !['noBorder', 'error'].includes(prop),
+})(({ theme, noBorder, error }) => ({
+  position: 'relative',
+  padding: '0px',
+  border: noBorder ? 'none' : '1px solid #ccc',
+  borderRadius: '4px',
+  cursor: 'text',
+  '& [data-slate-editor="true"]': {
+    wordBreak: 'break-word',
+    overflow: 'visible',
+    maxHeight: '500px',
+    padding: '5px',
+  },
+  '&:first-child': {
+    marginTop: 0,
+  },
+  '& ul, & ol': {
+    padding: '0 1rem',
+    margin: '1.25rem 1rem 1.25rem 0.4rem',
+  },
+  '& ul li p, & ol li p': {
+    marginTop: '0.25em',
+    marginBottom: '0.25em',
+  },
+  '& h1, & h2, & h3, & h4, & h5, & h6': {
+    lineHeight: 1.1,
+    marginTop: '2.5rem',
+    textWrap: 'pretty',
+  },
+  '& h1, & h2': {
+    marginTop: '3.5rem',
+    marginBottom: '1.5rem',
+  },
+  '& h1': {
+    fontSize: '1.4rem',
+  },
+  '& h2': {
+    fontSize: '1.2rem',
+  },
+  '& h3': {
+    fontSize: '1.1rem',
+  },
+  '& h4, & h5, & h6': {
+    fontSize: '1rem',
+  },
+  '& code': {
+    backgroundColor: 'var(--purple-light)',
+    borderRadius: '0.4rem',
+    color: 'var(--black)',
+    fontSize: '0.85rem',
+    padding: '0.25em 0.3em',
+  },
+  '& pre': {
+    background: 'var(--black)',
+    borderRadius: '0.5rem',
+    color: 'var(--white)',
+    fontFamily: '\'JetBrainsMono\', monospace',
+    margin: '1.5rem 0',
+    padding: '0.75rem 1rem',
+    '& code': {
+      background: 'none',
+      color: 'inherit',
+      fontSize: '0.8rem',
+      padding: 0,
+    },
+  },
+  '& blockquote': {
+    borderLeft: '3px solid var(--gray-3)',
+    margin: '1.5rem 0',
+    paddingLeft: '1rem',
+  },
+  '& hr': {
+    border: 'none',
+    borderTop: '1px solid var(--gray-2)',
+    margin: '2rem 0',
+  },
+  '& table': {
+    tableLayout: 'fixed',
+    width: '100%',
+    borderCollapse: 'collapse',
+    color: color.text(),
+    backgroundColor: color.background(),
+  },
+  '& table:not([border="1"]) tr': {
+    borderTop: '1px solid #dfe2e5',
+  },
+  '& td, th': {
+    padding: '.6em 1em',
+    textAlign: 'center',
+  },
+  '& table:not([border="1"]) td, th': {
+    border: '1px solid #dfe2e5',
+  },
+  ...(error && {
+    border: `2px solid ${theme.palette.error.main} !important`,
+  }),
+}));
+
+const StyledEditorHolder = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'disableScrollbar',
+})(({ disableScrollbar }) => ({
+  position: 'relative',
+  padding: '0px',
+  overflowY: 'auto',
+  color: color.text(),
+  backgroundColor: color.background(),
+  ...(disableScrollbar && {
+    '&::-webkit-scrollbar': {
+      display: 'none',
+    },
+    scrollbarWidth: 'none',
+    '-ms-overflow-style': 'none',
+  }),
+}));
+
+const StyledChildren = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'noPadding',
+})(({ noPadding }) => ({
+  padding: noPadding ? 0 : '10px 16px',
+}));
+
 function TiptapContainer(props) {
   const {
     editor,
     disabled,
-    classes,
     children,
     disableScrollbar,
     activePlugins,
@@ -26,10 +145,6 @@ function TiptapContainer(props) {
     maxHeight,
   } = props;
 
-  const holderNames = classNames(classes.editorHolder, {
-    [classes.disabledScrollbar]: disableScrollbar,
-  });
-
   useEffect(() => {
     if (editor && autoFocus) {
       Promise.resolve().then(() => {
@@ -51,29 +166,15 @@ function TiptapContainer(props) {
   );
 
   return (
-    <div
-      className={classNames(
-        {
-          [classes.noBorder]: toolbarOpts && toolbarOpts.noBorder,
-          [classes.error]: toolbarOpts && toolbarOpts.error,
-        },
-        classes.root,
-        props.className,
-      )}
+    <StyledRoot
+      noBorder={toolbarOpts && toolbarOpts.noBorder}
+      error={toolbarOpts && toolbarOpts.error}
+      className={props.className}
       style={{ width: sizeStyle.width, minWidth: sizeStyle.minWidth, maxWidth: sizeStyle.maxWidth }}
     >
-      <div className={holderNames}>
-        <div
-          className={classNames(
-            {
-              [classes.noPadding]: toolbarOpts && toolbarOpts.noPadding,
-            },
-            classes.children,
-          )}
-        >
-          {children}
-        </div>
-      </div>
+      <StyledEditorHolder disableScrollbar={disableScrollbar}>
+        <StyledChildren noPadding={toolbarOpts && toolbarOpts.noPadding}>{children}</StyledChildren>
+      </StyledEditorHolder>
 
       {editor && (
         <StyledMenuBar
@@ -84,10 +185,8 @@ function TiptapContainer(props) {
           onChange={props.onChange}
         />
       )}
-    </div>
+    </StyledRoot>
   );
 }
 
-const EditorContainer = withStyles(styles)(TiptapContainer);
-
-export default EditorContainer;
+export default TiptapContainer;

package/src/components/characters/custom-popper.js

@@ -1,34 +1,24 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import Popper from '@material-ui/core/Popper';
-import Typography from '@material-ui/core/Typography';
+import { styled } from '@mui/material/styles';
+import Popper from '@mui/material/Popper';
+import Typography from '@mui/material/Typography';
 
-const styles = () => ({
-  popover: {
-    background: '#fff',
-    padding: '10px',
-    pointerEvents: 'none',
-    zIndex: 99999,
-  },
-  paper: {
-    padding: 20,
-    height: 'auto',
-    width: 'auto',
-  },
-  typography: {
-    fontSize: 50,
-    textAlign: 'center',
-  },
+const StyledPopper = styled(Popper)({
+  background: '#fff',
+  padding: '10px',
+  pointerEvents: 'none',
+  zIndex: 99999,
 });
 
-const CustomPopper = withStyles(styles)(({ classes, children, ...props }) => (
-  <Popper
+const StyledTypography = styled(Typography)({
+  fontSize: 50,
+  textAlign: 'center',
+});
+
+const CustomPopper = ({ children, ...props }) => (
+  <StyledPopper
     id="mouse-over-popover"
     open
-    className={classes.popover}
-    classes={{
-      paper: classes.paper,
-    }}
     anchorOrigin={{
       vertical: 'bottom',
       horizontal: 'left',
@@ -41,8 +31,8 @@ const CustomPopper = withStyles(styles)(({ classes, children, ...props }) => (
     disableAutoFocus
     {...props}
   >
-    <Typography classes={{ root: classes.typography }}>{children}</Typography>
-  </Popper>
-));
+    <StyledTypography>{children}</StyledTypography>
+  </StyledPopper>
+);
 
 export default CustomPopper;

package/src/components/common/done-button.jsx

@@ -1,38 +1,27 @@
 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
-    aria-label="Done"
-    className={classes.iconRoot}
-    buttonRef={doneButtonRef}
-    onClick={onClick}
-    classes={{
-      label: classes.label,
-      root: classes.iconRoot,
-    }}
-  >
+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" buttonRef={doneButtonRef} onClick={onClick}>
     <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;

package/src/components/common/toolbar-buttons.jsx

@@ -1,42 +1,33 @@
 import React from 'react';
 import debug from 'debug';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 
-const styles = (theme) => ({
-  button: {
-    color: 'grey',
-    display: 'inline-flex',
-    padding: '2px',
-    background: 'none',
-    border: 'none',
-    cursor: 'pointer',
-    '&:hover': {
-      color: 'black',
-    },
-    '&:focus': {
-      outline: `2px solid ${theme.palette.grey[700]}`,
-    },
+const StyledButton = styled('button', {
+  shouldForwardProp: (prop) => !['active', 'disabled', 'extraStyles'].includes(prop),
+})(({ theme, active, disabled }) => ({
+  color: active ? 'black' : 'grey',
+  display: 'inline-flex',
+  padding: '2px',
+  background: 'none',
+  border: 'none',
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  '&:hover': {
+    color: disabled ? 'grey' : 'black',
   },
-  active: {
-    color: 'black',
+  '&:focus': {
+    outline: `2px solid ${theme.palette.grey[700]}`,
   },
-  disabled: {
+  ...(disabled && {
     opacity: 0.7,
-    cursor: 'not-allowed',
-    '& :hover': {
-      color: 'grey',
-    },
-  },
-});
+  }),
+}));
 
 const log = debug('pie-elements:editable-html:raw-button');
 
 export class RawButton extends React.Component {
   static propTypes = {
     onClick: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired,
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
     active: PropTypes.bool,
     disabled: PropTypes.bool,
@@ -64,31 +55,26 @@ export class RawButton extends React.Component {
   };
 
   render() {
-    const { active, classes, children, disabled, extraStyles, ariaLabel } = this.props;
-
-    const names = classNames(classes.button, {
-      [classes.active]: active,
-      [classes.disabled]: disabled,
-    });
+    const { active, children, disabled, extraStyles, ariaLabel } = this.props;
 
     return (
-      <button
+      <StyledButton
         style={extraStyles}
-        className={names}
+        active={active}
+        disabled={disabled}
         onMouseDown={this.onClick}
         onKeyDown={this.onKeyDown}
-        disabled={disabled}
         aria-label={ariaLabel}
         aria-pressed={active}
         tabIndex={0}
       >
         {children}
-      </button>
+      </StyledButton>
     );
   }
 }
 
-export const Button = withStyles(styles)(RawButton);
+export const Button = RawButton;
 
 export class RawMarkButton extends React.Component {
   static propTypes = {
@@ -96,7 +82,6 @@ export class RawMarkButton extends React.Component {
     mark: PropTypes.string,
     label: PropTypes.string.isRequired,
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-    classes: PropTypes.object.isRequired,
     active: PropTypes.bool,
   };
 
@@ -117,12 +102,11 @@ export class RawMarkButton extends React.Component {
   };
 
   render() {
-    const { classes, children, active, label } = this.props;
+    const { children, active, label } = this.props;
 
-    const names = classNames(classes.button, active && classes.active);
     return (
-      <button
-        className={names}
+      <StyledButton
+        active={active}
         onMouseDown={this.onToggle}
         aria-pressed={active}
         onKeyDown={this.onKeyDown}
@@ -130,9 +114,9 @@ export class RawMarkButton extends React.Component {
         tabIndex={0}
       >
         {children}
-      </button>
+      </StyledButton>
     );
   }
 }
 
-export const MarkButton = withStyles(styles)(RawMarkButton);
+export const MarkButton = RawMarkButton;

package/src/components/icons/CssIcon.jsx

@@ -1,17 +1,15 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
-const styles = (theme) => ({
-  icon: {
-    fontFamily: 'Cerebri Sans, Arial, sans-serif',
-    fontSize: theme.typography.fontSize,
-    fontWeight: 'bold',
-    lineHeight: '14px',
-    position: 'relative',
-    whiteSpace: 'nowrap',
-  },
-});
+const StyledCssIcon = styled('div')(({ theme }) => ({
+  fontFamily: 'Cerebri Sans, Arial, sans-serif',
+  fontSize: theme.typography.fontSize,
+  fontWeight: 'bold',
+  lineHeight: '14px',
+  position: 'relative',
+  whiteSpace: 'nowrap',
+}));
 
-const CssIcon = ({ classes }) => <div className={classes.icon}>CSS</div>;
+const CssIcon = () => <StyledCssIcon>CSS</StyledCssIcon>;
 
-export default withStyles(styles)(CssIcon);
+export default CssIcon;

package/src/components/icons/RespArea.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/components/icons/TableIcons.jsx

@@ -1,52 +1,51 @@
 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/components/icons/TextAlign.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/components/image/AltDialog.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import DialogContent from '@material-ui/core/DialogContent';
-import ArrowBackIos from '@material-ui/icons/ArrowBackIos';
-import TextField from '@material-ui/core/TextField';
-import DialogActions from '@material-ui/core/DialogActions';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import ArrowBackIos from '@mui/icons-material/ArrowBackIos';
+import TextField from '@mui/material/TextField';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
 import PropTypes from 'prop-types';
 
 export class AltDialog extends React.Component {