@pie-lib/editable-html 9.2.6-next.2 → 9.2.7

package/src/plugins/image/component.jsx

@@ -8,34 +8,34 @@ import SlatePropTypes from 'slate-prop-types';
 
 const log = debug('@pie-lib:editable-html:plugins:image:component');
 
-const size = s => (s ? `${s}px` : 'auto');
+const size = (s) => (s ? `${s}px` : 'auto');
 
 export class Component extends React.Component {
   static propTypes = {
     node: SlatePropTypes.node.isRequired,
     editor: PropTypes.shape({
       change: PropTypes.func.isRequired,
-      value: PropTypes.object
+      value: PropTypes.object,
     }).isRequired,
     classes: PropTypes.object.isRequired,
     attributes: PropTypes.object,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     maxImageWidth: PropTypes.number,
-    maxImageHeight: PropTypes.number
+    maxImageHeight: PropTypes.number,
   };
 
-  getWidth = percent => {
+  getWidth = (percent) => {
     const multiplier = percent / 100;
     return this.img.naturalWidth * multiplier;
   };
 
-  getHeight = percent => {
+  getHeight = (percent) => {
     const multiplier = percent / 100;
     return this.img.naturalHeight * multiplier;
   };
 
-  getPercentFromWidth = width => {
+  getPercentFromWidth = (width) => {
     var floored = (width / this.img.naturalWidth) * 4;
     return parseInt(floored.toFixed(0) * 25, 10);
   };
@@ -53,7 +53,7 @@ export class Component extends React.Component {
     log('[applySizeData] update: ', update);
 
     if (!update.equals(node.data)) {
-      editor.change(c => c.setNodeByKey(node.key, { data: update }));
+      editor.change((c) => c.setNodeByKey(node.key, { data: update }));
     }
   };
 
@@ -80,7 +80,7 @@ export class Component extends React.Component {
     return {
       width: size(data.get('width')),
       height: size(data.get('height')),
-      objectFit: 'contain'
+      objectFit: 'contain',
     };
   }
 
@@ -95,23 +95,23 @@ export class Component extends React.Component {
     if (!box.style.width || box.style.width === 'auto') {
       const dimensions = {
         width: (box && box.naturalWidth) || 100,
-        height: (box && box.naturalHeight) || 100
+        height: (box && box.naturalHeight) || 100,
       };
 
       const { width, height } = this.updateImageDimensions(
         dimensions,
         {
           width: dimensions.width < maxImageWidth ? dimensions.width : maxImageWidth,
-          height: dimensions.height < maxImageHeight ? dimensions.height : maxImageHeight
+          height: dimensions.height < maxImageHeight ? dimensions.height : maxImageHeight,
         },
-        true
+        true,
       );
 
       box.style.width = `${width}px`;
       box.style.height = `${height}px`;
 
       this.setState({
-        dimensions: { height: height, width: width }
+        dimensions: { height: height, width: width },
       });
 
       const { node, editor } = this.props;
@@ -122,26 +122,26 @@ export class Component extends React.Component {
       update = update.set('height', height);
 
       if (!update.equals(node.data)) {
-        editor.change(c => c.setNodeByKey(node.key, { data: update }));
+        editor.change((c) => c.setNodeByKey(node.key, { data: update }));
       }
     }
   };
 
-  startResizing = e => {
+  startResizing = (e) => {
     const bounds = e.target.getBoundingClientRect();
     const box = this.img;
     const dimensions = {
       width: (box && box.naturalWidth) || 100,
-      height: (box && box.naturalHeight) || 100
+      height: (box && box.naturalHeight) || 100,
     };
 
     const { width, height } = this.updateImageDimensions(
       dimensions,
       {
         width: e.clientX - bounds.left,
-        height: e.clientY - bounds.top
+        height: e.clientY - bounds.top,
       },
-      true
+      true,
     );
 
     const hasMinimumWidth = width > 50 && height > 50;
@@ -152,7 +152,7 @@ export class Component extends React.Component {
       box.style.height = `${height}px`;
 
       this.setState({
-        dimensions: { height: height, width: width }
+        dimensions: { height: height, width: width },
       });
 
       const { node, editor } = this.props;
@@ -163,7 +163,7 @@ export class Component extends React.Component {
       update = update.set('height', height);
 
       if (!update.equals(node.data)) {
-        editor.change(c => c.setNodeByKey(node.key, { data: update }));
+        editor.change((c) => c.setNodeByKey(node.key, { data: update }));
       }
     }
   };
@@ -182,21 +182,21 @@ export class Component extends React.Component {
         // if we want to change image height => we update the width accordingly
         return {
           width: nextDim.height * imageAspectRatio,
-          height: nextDim.height
+          height: nextDim.height,
         };
       }
 
       // if we want to change image width => we update the height accordingly
       return {
         width: nextDim.width,
-        height: nextDim.width / imageAspectRatio
+        height: nextDim.width / imageAspectRatio,
       };
     }
 
     // if we don't want to keep aspect ratio, we just update both values
     return {
       width: nextDim.width,
-      height: nextDim.height
+      height: nextDim.height,
     };
   };
 
@@ -239,7 +239,7 @@ export class Component extends React.Component {
     const className = classNames(
       classes.root,
       !loaded && classes.loading,
-      deleteStatus === 'pending' && classes.pendingDelete
+      deleteStatus === 'pending' && classes.pendingDelete,
     );
 
     const progressClasses = classNames(classes.progress, loaded && classes.hideProgress);
@@ -247,16 +247,12 @@ export class Component extends React.Component {
     return [
       <span key={'sp1'}>&nbsp;</span>,
       <div key={'comp'} onFocus={onFocus} className={className} style={{ justifyContent }}>
-        <LinearProgress
-          mode="determinate"
-          value={percent > 0 ? percent : 0}
-          className={progressClasses}
-        />
+        <LinearProgress mode="determinate" value={percent > 0 ? percent : 0} className={progressClasses} />
         <div className={classes.imageContainer}>
           <img
             {...attributes}
             className={classNames(classes.image, active && classes.active)}
-            ref={ref => {
+            ref={(ref) => {
               this.img = ref;
             }}
             src={src}
@@ -265,23 +261,23 @@ export class Component extends React.Component {
             alt={alt}
           />
           <div
-            ref={ref => {
+            ref={(ref) => {
               this.resize = ref;
             }}
             className={classNames(classes.resize, 'resize')}
           />
         </div>
       </div>,
-      <span key={'sp2'}>&nbsp;</span>
+      <span key={'sp2'}>&nbsp;</span>,
     ];
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   portal: {
     position: 'absolute',
     opacity: 0,
-    transition: 'opacity 200ms linear'
+    transition: 'opacity 200ms linear',
   },
   floatingButtonRow: {
     backgroundColor: 'white',
@@ -290,33 +286,33 @@ const styles = theme => ({
     padding: '10px',
     border: 'solid 1px #eeeeee',
     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)'
+      '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)',
   },
   progress: {
     position: 'absolute',
     left: '0',
     width: 'fit-content',
     top: '0%',
-    transition: 'opacity 200ms linear'
+    transition: 'opacity 200ms linear',
   },
   hideProgress: {
-    opacity: 0
+    opacity: 0,
   },
   loading: {
-    opacity: 0.3
+    opacity: 0.3,
   },
   pendingDelete: {
-    opacity: 0.3
+    opacity: 0.3,
   },
   root: {
     position: 'relative',
     border: 'solid 1px white',
     display: 'flex',
-    transition: 'opacity 200ms linear'
+    transition: 'opacity 200ms linear',
   },
   delete: {
     position: 'absolute',
-    right: 0
+    right: 0,
   },
   imageContainer: {
     position: 'relative',
@@ -325,11 +321,11 @@ const styles = theme => ({
     alignItems: 'center',
 
     '&&:hover > .resize': {
-      display: 'block'
-    }
+      display: 'block',
+    },
   },
   active: {
-    border: `solid 1px ${theme.palette.primary.main}`
+    border: `solid 1px ${theme.palette.primary.main}`,
   },
   resize: {
     backgroundColor: theme.palette.primary.main,
@@ -339,11 +335,11 @@ const styles = theme => ({
     borderRadius: 8,
     marginLeft: '5px',
     marginRight: '10px',
-    display: 'none'
+    display: 'none',
   },
   drawableHeight: {
-    minHeight: 350
-  }
+    minHeight: 350,
+  },
 });
 
 export default withStyles(styles)(Component);

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

@@ -21,7 +21,7 @@ const AlignmentButton = ({ alignment, active, onClick }) => {
 AlignmentButton.propTypes = {
   alignment: PropTypes.string.isRequired,
   active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
 };
 
 export class ImageToolbar extends React.Component {
@@ -31,16 +31,16 @@ export class ImageToolbar extends React.Component {
     alignment: PropTypes.string,
     alt: PropTypes.string,
     imageLoaded: PropTypes.bool,
-    disableImageAlignmentButtons: PropTypes.bool
+    disableImageAlignmentButtons: PropTypes.bool,
   };
 
-  onAltTextDone = newAlt => {
+  onAltTextDone = (newAlt) => {
     log('[onAltTextDone]: alt:', newAlt);
 
     this.props.onChange({ alt: newAlt });
   };
 
-  onAlignmentClick = alignment => {
+  onAlignmentClick = (alignment) => {
     log('[onAlignmentClick]: alignment:', alignment);
     this.props.onChange({ alignment });
   };
@@ -62,29 +62,17 @@ export class ImageToolbar extends React.Component {
       <div className={classes.holder}>
         {!disableImageAlignmentButtons && (
           <>
-            <AlignmentButton
-              alignment={'left'}
-              active={alignment === 'left'}
-              onClick={this.onAlignmentClick}
-            />
-            <AlignmentButton
-              alignment={'center'}
-              active={alignment === 'center'}
-              onClick={this.onAlignmentClick}
-            />
-            <AlignmentButton
-              alignment={'right'}
-              active={alignment === 'right'}
-              onClick={this.onAlignmentClick}
-            />
+            <AlignmentButton alignment={'left'} active={alignment === 'left'} onClick={this.onAlignmentClick} />
+            <AlignmentButton alignment={'center'} active={alignment === 'center'} onClick={this.onAlignmentClick} />
+            <AlignmentButton alignment={'right'} active={alignment === 'right'} onClick={this.onAlignmentClick} />
           </>
         )}
         <span
           className={classNames({
             [classes.disabled]: !imageLoaded,
-            [classes.altButton]: !disableImageAlignmentButtons
+            [classes.altButton]: !disableImageAlignmentButtons,
           })}
-          onMouseDown={event => imageLoaded && this.renderDialog(event)}
+          onMouseDown={(event) => imageLoaded && this.renderDialog(event)}
         >
           Alt text
         </span>
@@ -93,20 +81,20 @@ export class ImageToolbar extends React.Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   holder: {
     paddingLeft: theme.spacing.unit,
     display: 'flex',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   disabled: {
-    opacity: 0.5
+    opacity: 0.5,
   },
   altButton: {
     borderLeft: '1px solid grey',
     paddingLeft: 8,
-    marginLeft: 4
-  }
+    marginLeft: 4,
+  },
 });
 
 export default withStyles(styles)(ImageToolbar);

package/src/plugins/image/index.jsx

@@ -19,23 +19,23 @@ export default function ImagePlugin(opts) {
         isVoid: true,
         data: {
           loaded: false,
-          src: undefined
-        }
+          src: undefined,
+        },
       });
 
       const change = value.change().insertInline(inline);
       onChange(change);
-      opts.insertImageRequested(getValue => new InsertImageHandler(inline, getValue, onChange));
+      opts.insertImageRequested((getValue) => new InsertImageHandler(inline, getValue, onChange));
     },
-    supports: node => node.object === 'inline' && node.type === 'image',
+    supports: (node) => node.object === 'inline' && node.type === 'image',
     customToolbar: (node, value, onToolbarDone) => {
       const alignment = node.data.get('alignment');
       const alt = node.data.get('alt');
       const imageLoaded = node.data.get('loaded') !== false;
-      const onChange = newValues => {
+      const onChange = (newValues) => {
         const update = {
           ...node.data.toObject(),
-          ...newValues
+          ...newValues,
         };
 
         const change = value.change().setNodeByKey(node.key, { data: update });
@@ -53,7 +53,7 @@ export default function ImagePlugin(opts) {
       );
       return Tb;
     },
-    showDone: true
+    showDone: true,
   };
 
   return {
@@ -72,9 +72,7 @@ export default function ImagePlugin(opts) {
             change = v.change().removeNodeByKey(node.key);
           } else {
             log('[error]: ', err);
-            change = v
-              .change()
-              .setNodeByKey(node.key, node.data.merge(Data.create({ deleteStatus: 'failed' })));
+            change = v.change().setNodeByKey(node.key, node.data.merge(Data.create({ deleteStatus: 'failed' })));
           }
           onChange(change);
         });
@@ -83,8 +81,8 @@ export default function ImagePlugin(opts) {
         onChange(change);
       }
     },
-    stopReset: value => {
-      const imgPendingInsertion = value.document.findDescendant(n => {
+    stopReset: (value) => {
+      const imgPendingInsertion = value.document.findDescendant((n) => {
         if (n.type !== 'image') {
           return;
         }
@@ -101,21 +99,21 @@ export default function ImagePlugin(opts) {
             onFocus: opts.onFocus,
             onBlur: opts.onBlur,
             maxImageWidth: opts.maxImageWidth,
-            maxImageHeight: opts.maxImageHeight
+            maxImageHeight: opts.maxImageHeight,
           },
-          props
+          props,
         );
         return <ImageComponent {...all} />;
       }
     },
-    normalizeNode: node => {
+    normalizeNode: (node) => {
       const textNodeMap = {};
       const updateNodesArray = [];
       let index = 0;
 
       if (node.object !== 'document') return;
 
-      node.findDescendant(d => {
+      node.findDescendant((d) => {
         if (d.object === 'text') {
           textNodeMap[index] = d;
         }
@@ -131,12 +129,12 @@ export default function ImagePlugin(opts) {
 
       if (!updateNodesArray.length) return;
 
-      return change => {
+      return (change) => {
         change.withoutNormalization(() => {
-          updateNodesArray.forEach(n => change.insertTextByKey(n.key, 0, ' '));
+          updateNodesArray.forEach((n) => change.insertTextByKey(n.key, 0, ' '));
         });
       };
-    }
+    },
   };
 }
 
@@ -161,8 +159,8 @@ export const serialization = {
         margin: el.style.margin,
         justifyContent: el.style.justifyContent,
         alignment: el.getAttribute('alignment'),
-        alt: el.getAttribute('alt')
-      }
+        alt: el.getAttribute('alt'),
+      },
     };
     log('return object: ', out);
     return out;
@@ -216,9 +214,9 @@ export const serialization = {
       src,
       style,
       alignment,
-      alt
+      alt,
     };
 
     return <img {...props} />;
-  }
+  },
 };

package/src/plugins/index.jsx

@@ -29,10 +29,10 @@ function MarkHotkey(options) {
       isMark: true,
       type,
       icon,
-      onToggle: change => {
+      onToggle: (change) => {
         log('[onToggleMark] type: ', type);
         return change.toggleMark(type);
-      }
+      },
     },
     renderMark(props) {
       if (props.mark.type === type) {
@@ -50,7 +50,7 @@ function MarkHotkey(options) {
       // Toggle the mark `type`.
       change.toggleMark(type);
       return true;
-    }
+    },
   };
 }
 
@@ -68,10 +68,10 @@ export const ALL_PLUGINS = [
   'table',
   'video',
   'audio',
-  'responseArea'
+  'responseArea',
 ];
 
-export const DEFAULT_PLUGINS = ALL_PLUGINS.filter(plug => plug !== 'responseArea');
+export const DEFAULT_PLUGINS = ALL_PLUGINS.filter((plug) => plug !== 'responseArea');
 
 export const buildPlugins = (activePlugins, opts) => {
   log('[buildPlugins] opts: ', opts);
@@ -82,9 +82,7 @@ export const buildPlugins = (activePlugins, opts) => {
   const imagePlugin = opts.image && opts.image.onDelete && ImagePlugin(opts.image);
   const mathPlugin = MathPlugin(opts.math);
   const respAreaPlugin =
-    opts.responseArea &&
-    opts.responseArea.type &&
-    RespAreaPlugin(opts.responseArea, compact([mathPlugin]));
+    opts.responseArea && opts.responseArea.type && RespAreaPlugin(opts.responseArea, compact([mathPlugin]));
 
   return compact([
     addIf('table', TablePlugin(opts.table, compact([imagePlugin, mathPlugin, respAreaPlugin]))),
@@ -97,19 +95,19 @@ export const buildPlugins = (activePlugins, opts) => {
         key: '~',
         type: 'strikethrough',
         icon: <Strikethrough />,
-        tag: 'del'
-      })
+        tag: 'del',
+      }),
     ),
     addIf('underline', MarkHotkey({ key: 'u', type: 'underline', icon: <Underline />, tag: 'u' })),
     addIf('image', imagePlugin),
     addIf('video', MediaPlugin('video', opts.media)),
     addIf('audio', MediaPlugin('audio', opts.media)),
     addIf('math', mathPlugin),
-    ...opts.languageCharacters.map(config => addIf('languageCharacters', CharactersPlugin(config))),
+    ...opts.languageCharacters.map((config) => addIf('languageCharacters', CharactersPlugin(config))),
     addIf('bulleted-list', List({ key: 'l', type: 'ul_list', icon: <BulletedListIcon /> })),
     addIf('numbered-list', List({ key: 'n', type: 'ol_list', icon: <NumberedListIcon /> })),
     ToolbarPlugin(opts.toolbar),
     SoftBreakPlugin({ shift: true }),
-    addIf('responseArea', respAreaPlugin)
+    addIf('responseArea', respAreaPlugin),
   ]);
 };

package/src/plugins/list/index.jsx

@@ -10,7 +10,7 @@ const log = debug('@pie-lib:editable-html:plugins:list');
 const b = (type, next, childNodes) => ({
   object: 'block',
   type,
-  nodes: next(childNodes)
+  nodes: next(childNodes),
 });
 
 export const serialization = {
@@ -43,17 +43,17 @@ export const serialization = {
     if (object.type === 'ol_list') {
       return <ol>{children}</ol>;
     }
-  }
+  },
 };
 
 const createEditList = () => {
   const core = EditList({
-    typeDefault: 'span'
+    typeDefault: 'span',
   });
 
   // fix outdated schema
   if (core.schema && core.schema.blocks) {
-    Object.keys(core.schema.blocks).forEach(key => {
+    Object.keys(core.schema.blocks).forEach((key) => {
       const block = core.schema.blocks[key];
 
       if (block.parent) {
@@ -73,7 +73,7 @@ const createEditList = () => {
   /**
    * Returns the highest list of blocks that cover the current selection
    */
-  const getHighestSelectedBlocks = value => {
+  const getHighestSelectedBlocks = (value) => {
     const range = value.selection;
     const document = value.document;
 
@@ -111,7 +111,7 @@ const createEditList = () => {
         });
       } else if (node.type !== 'list_item') {
         change.wrapBlockByKey(node.key, 'list_item', {
-          normalize: false
+          normalize: false,
         });
       }
     });
@@ -122,13 +122,13 @@ const createEditList = () => {
   return core;
 };
 
-export default options => {
+export default (options) => {
   const { type, icon } = options;
 
   const core = createEditList();
 
   // eslint-disable-next-line react/display-name
-  core.renderNode = props => {
+  core.renderNode = (props) => {
     const { node, attributes, children } = props;
 
     switch (node.type) {
@@ -162,13 +162,13 @@ export default options => {
         const change = value.change().call(core.changes.wrapInList, type);
         onChange(change);
       }
-    }
+    },
   };
 
   core.renderNode.propTypes = {
     node: PropTypes.object,
     attributes: PropTypes.object,
-    children: PropTypes.func
+    children: PropTypes.func,
   };
 
   return core;