@pie-lib/editable-html 7.22.5 → 8.1.0

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

@@ -1,5 +1,3 @@
-import { MarkButton } from '../toolbar/toolbar-buttons';
-
 import PropTypes from 'prop-types';
 import React from 'react';
 import debug from 'debug';
@@ -7,45 +5,17 @@ import { withStyles } from '@material-ui/core/styles';
 
 const log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');
 
-const PercentButton = ({ percent, active, onClick }) => {
-  const label = `${percent}%`;
-  return (
-    <MarkButton active={active} onToggle={() => onClick(percent)} label={label}>
-      {label}
-    </MarkButton>
-  );
-};
-
-PercentButton.propTypes = {
-  percent: PropTypes.number.isRequired,
-  active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired
-};
-
 export class ImageToolbar extends React.Component {
   static propTypes = {
-    percent: PropTypes.number.isRequired,
     onChange: PropTypes.func.isRequired,
     classes: PropTypes.object.isRequired
   };
 
-  onPercentClick = percent => {
-    log('[onPercentClick]: percent:', percent);
-    this.props.onChange(percent);
-  };
-
   render() {
-    const { classes, percent } = this.props;
+    // Don't remove toolbar since we will have other new buttons
+    const { classes } = this.props;
     return (
       <div className={classes.holder}>
-        <PercentButton percent={25} active={percent === 25} onClick={this.onPercentClick} />
-        <PercentButton percent={50} active={percent === 50} onClick={this.onPercentClick} />
-        <PercentButton active={percent === 75} percent={75} onClick={this.onPercentClick} />
-        <PercentButton
-          percent={100}
-          active={percent === 100 || !percent}
-          onClick={this.onPercentClick}
-        />
       </div>
     );
   }

package/src/plugins/image/index.jsx

@@ -90,7 +90,9 @@ export default function ImagePlugin(opts) {
           {
             onDelete: opts.onDelete,
             onFocus: opts.onFocus,
-            onBlur: opts.onBlur
+            onBlur: opts.onBlur,
+            maxImageWidth: opts.maxImageWidth,
+            maxImageHeight: opts.maxImageHeight,
           },
           props
         );

package/src/plugins/index.jsx

@@ -4,6 +4,7 @@ import BulletedListIcon from '@material-ui/icons/FormatListBulleted';
 import NumberedListIcon from '@material-ui/icons/FormatListNumbered';
 import ImagePlugin from './image';
 import MediaPlugin from './media';
+import CharactersPlugin from './characters';
 import Italic from '@material-ui/icons/FormatItalic';
 import MathPlugin from './math';
 import React from 'react';
@@ -63,6 +64,7 @@ export const ALL_PLUGINS = [
   'numbered-list',
   'image',
   'math',
+  'languageCharacters',
   'table',
   'video',
   'audio',
@@ -103,6 +105,7 @@ export const buildPlugins = (activePlugins, opts) => {
     addIf('video', MediaPlugin('video', opts.media)),
     addIf('audio', MediaPlugin('audio', opts.media)),
     addIf('math', mathPlugin),
+    ...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),

package/src/serialization.jsx

@@ -58,6 +58,15 @@ export const parseStyleString = s => {
   return result;
 };
 
+export const getBase64 = file => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+  });
+};
+
 export const reactAttributes = o => toStyleObject(o, { camelize: true, addUnits: false });
 
 const attributesToMap = el => (acc, attribute) => {