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

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

@@ -3,13 +3,132 @@ import Toolbar from './toolbar';
 import classNames from 'classnames';
 import debug from 'debug';
 import { primary } from '../../theme';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import SlatePropTypes from 'slate-prop-types';
 import { color } from '@pie-lib/render-ui';
 
 const log = debug('@pie-lib:editable-html:plugins:toolbar:editor-and-toolbar');
 
+const Root = 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',
+  borderColor: error ? `${theme.palette.error.main} !important` : undefined,
+  borderWidth: error ? '2px !important' : undefined,
+  '& [data-slate-editor="true"]': {
+    wordBreak: 'break-word',
+    overflow: 'visible',
+    maxHeight: '500px',
+    // needed in order to be able to put the focus before a void element when it is the first one in the editor
+    padding: '5px',
+  },
+}));
+
+const EditorHolder = styled('div', {
+  shouldForwardProp: (prop) => !['inFocus', 'readOnly', 'disableUnderline', 'disableScrollbar'].includes(prop),
+})(({ theme, inFocus, readOnly, disableUnderline, disableScrollbar }) => ({
+  position: 'relative',
+  padding: '0px',
+  overflowY: 'auto',
+  color: color.text(),
+  backgroundColor: color.background(),
+  ...(disableScrollbar && {
+    '&::-webkit-scrollbar': {
+      display: 'none',
+    },
+    scrollbarWidth: 'none',
+    '-ms-overflow-style': 'none',
+  }),
+  ...(!disableUnderline && {
+    '&::before': {
+      left: '0',
+      right: '0',
+      bottom: '0',
+      height: '1px',
+      content: '""',
+      position: 'absolute',
+      transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+      pointerEvents: 'none',
+      backgroundColor: 'rgba(0, 0, 0, 0.42)',
+    },
+    '&::after': {
+      left: '0',
+      right: '0',
+      bottom: '0',
+      height: '1px',
+      content: '""',
+      position: 'absolute',
+      transform: 'scaleX(0)',
+      transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 200ms linear',
+      backgroundColor: 'rgba(0, 0, 0, 0.42)',
+    },
+    '&:focus': {
+      '&::after': {
+        transform: 'scaleX(1)',
+        backgroundColor: primary,
+        height: '2px',
+      },
+    },
+    '&:hover': {
+      '&::after': {
+        transform: 'scaleX(1)',
+        backgroundColor: theme.palette.common.black,
+        height: '2px',
+      },
+    },
+  }),
+  ...(readOnly && {
+    '&::before': {
+      background: 'transparent',
+      backgroundSize: '5px 1px',
+      backgroundImage: 'linear-gradient(to right, rgba(0, 0, 0, 0.42) 33%, transparent 0%)',
+      backgroundRepeat: 'repeat-x',
+      backgroundPosition: 'left top',
+    },
+    '&::after': {
+      left: '0',
+      right: '0',
+      bottom: '0',
+      height: '1px',
+      content: '""',
+      position: 'absolute',
+      transform: 'scaleX(0)',
+      transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 0ms linear',
+      backgroundColor: 'rgba(0, 0, 0, 0)',
+    },
+    '&:hover': {
+      '&::after': {
+        transform: 'scaleX(0)',
+        backgroundColor: theme.palette.common.black,
+        height: '2px',
+      },
+    },
+  }),
+  ...(inFocus && {
+    '&::after': {
+      transform: 'scaleX(1)',
+      backgroundColor: primary,
+      height: '2px',
+    },
+    '&:hover': {
+      '&::after': {
+        backgroundColor: primary,
+      },
+    },
+  }),
+}));
+
+const ChildrenContainer = styled('div', {
+  shouldForwardProp: (prop) => !['noPadding'].includes(prop),
+})(({ noPadding }) => ({
+  padding: noPadding ? 0 : '10px 16px',
+}));
+
 export class EditorAndToolbar extends React.Component {
   static propTypes = {
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
@@ -25,7 +144,6 @@ export class EditorAndToolbar extends React.Component {
     disableScrollbar: PropTypes.bool,
     disableUnderline: PropTypes.bool,
     autoWidth: PropTypes.bool,
-    classes: PropTypes.object.isRequired,
     pluginProps: PropTypes.object,
     toolbarOpts: PropTypes.shape({
       position: PropTypes.oneOf(['bottom', 'top']),
@@ -42,7 +160,6 @@ export class EditorAndToolbar extends React.Component {
 
   render() {
     const {
-      classes,
       children,
       value,
       plugins,
@@ -66,13 +183,6 @@ export class EditorAndToolbar extends React.Component {
 
     let inFocus = value.isFocused || (focusedNode !== null && focusedNode !== undefined) || focusToolbar;
 
-    const holderNames = classNames(classes.editorHolder, {
-      [classes.editorInFocus]: inFocus,
-      [classes.readOnly]: readOnly,
-      [classes.disabledUnderline]: disableUnderline,
-      [classes.disabledScrollbar]: disableScrollbar,
-    });
-
     let clonedChildren = children;
 
     if (typeof children !== 'string') {
@@ -84,27 +194,20 @@ export class EditorAndToolbar extends React.Component {
     log('[render] inFocus: ', inFocus, 'value.isFocused:', value.isFocused, 'focused node: ', focusedNode);
 
     return (
-      <div
-        className={classNames(
-          {
-            [classes.noBorder]: toolbarOpts && toolbarOpts.noBorder,
-            [classes.error]: toolbarOpts && toolbarOpts.error,
-          },
-          classes.root,
-        )}
+      <Root
+        noBorder={toolbarOpts && toolbarOpts.noBorder}
+        error={toolbarOpts && toolbarOpts.error}
       >
-        <div className={holderNames}>
-          <div
-            className={classNames(
-              {
-                [classes.noPadding]: toolbarOpts && toolbarOpts.noPadding,
-              },
-              classes.children,
-            )}
-          >
+        <EditorHolder
+          inFocus={inFocus}
+          readOnly={readOnly}
+          disableUnderline={disableUnderline}
+          disableScrollbar={disableScrollbar}
+        >
+          <ChildrenContainer noPadding={toolbarOpts && toolbarOpts.noPadding}>
             {clonedChildren}
-          </div>
-        </div>
+          </ChildrenContainer>
+        </EditorHolder>
 
         <Toolbar
           autoWidth={autoWidth}
@@ -123,135 +226,9 @@ export class EditorAndToolbar extends React.Component {
           pluginProps={pluginProps}
           toolbarOpts={toolbarOpts}
         />
-      </div>
+      </Root>
     );
   }
 }
 
-const style = (theme) => ({
-  root: {
-    position: 'relative',
-    padding: '0px',
-    border: '1px solid #ccc',
-    borderRadius: '4px',
-    cursor: 'text',
-    '& [data-slate-editor="true"]': {
-      wordBreak: 'break-word',
-      overflow: 'visible',
-      maxHeight: '500px',
-      // needed in order to be able to put the focus before a void element when it is the first one in the editor
-      padding: '5px',
-    },
-  },
-  children: {
-    padding: '10px 16px',
-  },
-  editorHolder: {
-    position: 'relative',
-    padding: '0px',
-    overflowY: 'auto',
-    color: color.text(),
-    backgroundColor: color.background(),
-    '&::before': {
-      left: '0',
-      right: '0',
-      bottom: '0',
-      height: '1px',
-      content: '""',
-      position: 'absolute',
-      transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-      pointerEvents: 'none',
-      backgroundColor: 'rgba(0, 0, 0, 0.42)',
-    },
-    '&::after': {
-      left: '0',
-      right: '0',
-      bottom: '0',
-      height: '1px',
-      content: '""',
-      position: 'absolute',
-      transform: 'scaleX(0)',
-      transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 200ms linear',
-      backgroundColor: 'rgba(0, 0, 0, 0.42)',
-    },
-    '&:focus': {
-      '&::after': {
-        transform: 'scaleX(1)',
-        backgroundColor: primary,
-        height: '2px',
-      },
-    },
-    '&:hover': {
-      '&::after': {
-        transform: 'scaleX(1)',
-        backgroundColor: theme.palette.common.black,
-        height: '2px',
-      },
-    },
-  },
-  disabledUnderline: {
-    '&::before': {
-      display: 'none',
-    },
-    '&::after': {
-      display: 'none',
-    },
-  },
-  disabledScrollbar: {
-    '&::-webkit-scrollbar': {
-      display: 'none',
-    },
-    scrollbarWidth: 'none',
-    '-ms-overflow-style': 'none',
-  },
-  readOnly: {
-    '&::before': {
-      background: 'transparent',
-      backgroundSize: '5px 1px',
-      backgroundImage: 'linear-gradient(to right, rgba(0, 0, 0, 0.42) 33%, transparent 0%)',
-      backgroundRepeat: 'repeat-x',
-      backgroundPosition: 'left top',
-    },
-    '&::after': {
-      left: '0',
-      right: '0',
-      bottom: '0',
-      height: '1px',
-      content: '""',
-      position: 'absolute',
-      transform: 'scaleX(0)',
-      transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 0ms linear',
-      backgroundColor: 'rgba(0, 0, 0, 0)',
-    },
-    '&:hover': {
-      '&::after': {
-        transform: 'scaleX(0)',
-        backgroundColor: theme.palette.common.black,
-        height: '2px',
-      },
-    },
-  },
-  editorInFocus: {
-    '&::after': {
-      transform: 'scaleX(1)',
-      backgroundColor: primary,
-      height: '2px',
-    },
-    '&:hover': {
-      '&::after': {
-        backgroundColor: primary,
-      },
-    },
-  },
-  error: {
-    border: `2px solid ${theme.palette.error.main} !important`,
-  },
-  noBorder: {
-    border: 'none',
-  },
-  noPadding: {
-    padding: 0,
-  },
-});
-
-export default withStyles(style)(EditorAndToolbar);
+export default EditorAndToolbar;

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

@@ -1,42 +1,32 @@
 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, extraStyles }) => ({
+  color: active ? 'black' : 'grey',
+  display: 'inline-flex',
+  padding: '2px',
+  background: 'none',
+  border: 'none',
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  opacity: disabled ? 0.7 : 1,
+  '&:hover': {
+    color: disabled ? 'grey' : 'black',
   },
-  active: {
-    color: 'black',
+  '&:focus': {
+    outline: `2px solid ${theme.palette.grey[700]}`,
   },
-  disabled: {
-    opacity: 0.7,
-    cursor: 'not-allowed',
-    '& :hover': {
-      color: 'grey',
-    },
-  },
-});
+  ...extraStyles,
+}));
 
 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 +54,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
-        style={extraStyles}
-        className={names}
+      <StyledButton
+        active={active}
+        disabled={disabled}
+        extraStyles={extraStyles}
         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 +81,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 +101,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 +113,9 @@ export class RawMarkButton extends React.Component {
         tabIndex={0}
       >
         {children}
-      </button>
+      </StyledButton>
     );
   }
 }
 
-export const MarkButton = withStyles(styles)(RawMarkButton);
+export const MarkButton = RawMarkButton;

package/src/plugins/toolbar/toolbar.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Change } from 'slate';
-import Delete from '@material-ui/icons/Delete';
-import IconButton from '@material-ui/core/IconButton';
+import Delete from '@mui/icons-material/Delete';
+import IconButton from '@mui/material/IconButton';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import debug from 'debug';
@@ -11,13 +11,51 @@ import debounce from 'lodash/debounce';
 import { DoneButton } from './done-button';
 
 import { findSingleNode, findParentNode } from '../utils';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import DefaultToolbar from './default-toolbar';
 import { removeDialogs as removeCharacterDialogs } from '../characters';
 import { PIE_TOOLBAR__CLASS } from '../../constants';
 
 const log = debug('@pie-lib:editable-html:plugins:toolbar');
 
+const StyledToolbar = styled('div', {
+  shouldForwardProp: (prop) => !['hasDoneButton', 'position', 'alignment', 'focused', 'autoWidth', 'hidden'].includes(prop),
+})(({ hasDoneButton, position, alignment, focused, autoWidth, hidden }) => ({
+  position: 'absolute',
+  zIndex: 10,
+  cursor: 'pointer',
+  justifyContent: 'space-between',
+  background: 'var(--editable-html-toolbar-bg, #efefef)',
+  minWidth: hasDoneButton ? '280px' : '265px',
+  margin: '5px 0 0 0',
+  padding: '2px',
+  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)',
+  boxSizing: 'border-box',
+  display: 'flex',
+  opacity: focused ? 1 : 0,
+  pointerEvents: focused ? 'auto' : 'none',
+  top: position === 'top' ? '-45px' : 'auto',
+  right: alignment === 'right' ? 0 : 'auto',
+  width: autoWidth ? 'auto' : '100%',
+  visibility: hidden ? 'hidden' : 'visible',
+}));
+
+const SharedContainer = styled('div')({
+  display: 'flex',
+});
+
+const StyledIconButton = styled(IconButton)({
+  width: '28px',
+  height: '28px',
+  padding: '4px',
+  verticalAlign: 'top',
+});
+
+const StyledLabel = styled('div')({
+  color: 'var(--editable-html-toolbar-check, #00bb00)',
+});
+
 const getCustomToolbar = (plugin, node, value, handleDone, getFocusedValue, onDataChange) => {
   if (!plugin) {
     return;
@@ -141,7 +179,6 @@ export class Toolbar extends React.Component {
 
   render() {
     const {
-      classes,
       plugins,
       pluginProps,
       toolbarOpts,
@@ -223,20 +260,21 @@ export class Toolbar extends React.Component {
     const defaultToolbarShowDone = !toolbarOpts || toolbarOpts.showDone !== false;
 
     const hasDoneButton = defaultToolbarShowDone || customToolbarShowDone;
-
-    const names = classNames(classes.toolbar, PIE_TOOLBAR__CLASS, {
-      [classes.toolbarWithNoDone]: !hasDoneButton,
-      [classes.toolbarTop]: toolbarOpts.position === 'top',
-      [classes.toolbarRight]: toolbarOpts.alignment === 'right',
-      [classes.focused]: toolbarOpts.alwaysVisible || isFocused,
-      [classes.autoWidth]: autoWidth,
-      [classes.fullWidth]: !autoWidth,
-      [classes.hidden]: toolbarOpts.isHidden === true,
-    });
     const customStyles = toolbarOpts.minWidth !== undefined ? { minWidth: toolbarOpts.minWidth } : {};
 
     return (
-      <div className={names} style={{ ...extraStyles, ...customStyles }} onClick={this.onClick} ref={toolbarRef}>
+      <StyledToolbar
+        className={PIE_TOOLBAR__CLASS}
+        hasDoneButton={hasDoneButton}
+        position={toolbarOpts.position}
+        alignment={toolbarOpts.alignment}
+        focused={toolbarOpts.alwaysVisible || isFocused}
+        autoWidth={autoWidth}
+        hidden={toolbarOpts.isHidden === true}
+        style={{ ...extraStyles, ...customStyles }}
+        onClick={this.onClick}
+        ref={toolbarRef}
+      >
         {CustomToolbar ? (
           <CustomToolbar
             node={node}
@@ -262,77 +300,21 @@ export class Toolbar extends React.Component {
             onBlur={onBlur}
           />
         )}
-
-        <div className={classes.shared}>
+        <SharedContainer>
           {deletable && (
-            <IconButton
+            <StyledIconButton
               aria-label="Delete"
-              className={classes.iconRoot}
               onMouseDown={(e) => this.onDeleteMouseDown(e, plugin, node, value, onChange)}
-              classes={{
-                root: classes.iconRoot,
-              }}
+              size="large"
             >
               <Delete />
-            </IconButton>
+            </StyledIconButton>
           )}
           {customToolbarShowDone && <DoneButton doneButtonRef={doneButtonRef} onClick={handleDone} />}
-        </div>
-      </div>
+        </SharedContainer>
+      </StyledToolbar>
     );
   }
 }
 
-const style = {
-  toolbar: {
-    position: 'absolute',
-    zIndex: 10,
-    cursor: 'pointer',
-    justifyContent: 'space-between',
-    background: 'var(--editable-html-toolbar-bg, #efefef)',
-    minWidth: '280px',
-    margin: '5px 0 0 0',
-    padding: '2px',
-    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)',
-    boxSizing: 'border-box',
-    display: 'flex',
-    opacity: 0,
-    pointerEvents: 'none',
-  },
-  toolbarWithNoDone: {
-    minWidth: '265px',
-  },
-  toolbarTop: {
-    top: '-45px',
-  },
-  toolbarRight: {
-    right: 0,
-  },
-  fullWidth: {
-    width: '100%',
-  },
-  hidden: {
-    visibility: 'hidden',
-  },
-  autoWidth: {
-    width: 'auto',
-  },
-  focused: {
-    opacity: 1,
-    pointerEvents: 'auto',
-  },
-  iconRoot: {
-    width: '28px',
-    height: '28px',
-    padding: '4px',
-    verticalAlign: 'top',
-  },
-  label: {
-    color: 'var(--editable-html-toolbar-check, #00bb00)',
-  },
-  shared: {
-    display: 'flex',
-  },
-};
-export default withStyles(style, { index: 1000 })(Toolbar);
+export default Toolbar;