@pie-lib/editable-html 7.17.4-next.42 → 7.17.4-next.423

package/src/plugins/image/component.jsx

@@ -20,7 +20,9 @@ export class Component extends React.Component {
     classes: PropTypes.object.isRequired,
     attributes: PropTypes.object,
     onFocus: PropTypes.func,
-    onBlur: PropTypes.func
+    onBlur: PropTypes.func,
+    maxImageWidth: PropTypes.number,
+    maxImageHeight: PropTypes.number
   };
 
   getWidth = percent => {
@@ -41,19 +43,11 @@ export class Component extends React.Component {
   applySizeData = () => {
     const { node, editor } = this.props;
 
-    const resizePercent = node.data.get('resizePercent');
-    log('[applySizeData]: resizePercent: ', resizePercent);
-
     let update = node.data;
 
-    if (resizePercent) {
-      update = update.set('width', this.getWidth(resizePercent));
-      update = update.set('height', this.getHeight(resizePercent));
-    } else {
-      const w = update.get('width');
-      if (w) {
-        update = update.set('resizePercent', this.getPercentFromWidth(w));
-      }
+    const w = update.get('width');
+    if (w) {
+      update = update.set('resizePercent', this.getPercentFromWidth(w));
     }
 
     log('[applySizeData] update: ', update);
@@ -63,8 +57,19 @@ export class Component extends React.Component {
     }
   };
 
+  initialiseResize = () => {
+    window.addEventListener('mousemove', this.startResizing, false);
+    window.addEventListener('mouseup', this.stopResizing, false);
+  };
+
   componentDidMount() {
     this.applySizeData();
+
+    const resizeHandle = this.resize;
+
+    if (resizeHandle) {
+      resizeHandle.addEventListener('mousedown', this.initialiseResize, false);
+    }
   }
 
   componentDidUpdate() {
@@ -79,14 +84,151 @@ export class Component extends React.Component {
     };
   }
 
+  loadImage = () => {
+    let { maxImageWidth, maxImageHeight } = this.props || {};
+    maxImageWidth = maxImageWidth || 700;
+    maxImageHeight = maxImageHeight || 900;
+
+    const box = this.img;
+
+    //on first load
+    if (!box.style.width || box.style.width === 'auto') {
+      const dimensions = {
+        width: (box && box.naturalWidth) || 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
+        },
+        true
+      );
+
+      box.style.width = `${width}px`;
+      box.style.height = `${height}px`;
+
+      this.setState({
+        dimensions: { height: height, width: width }
+      });
+
+      const { node, editor } = this.props;
+
+      let update = node.data;
+
+      update = update.set('width', width);
+      update = update.set('height', height);
+
+      if (!update.equals(node.data)) {
+        editor.change(c => c.setNodeByKey(node.key, { data: update }));
+      }
+    }
+  };
+
+  startResizing = e => {
+    const bounds = e.target.getBoundingClientRect();
+    const box = this.img;
+    const dimensions = {
+      width: (box && box.naturalWidth) || 100,
+      height: (box && box.naturalHeight) || 100
+    };
+
+    const { width, height } = this.updateImageDimensions(
+      dimensions,
+      {
+        width: e.clientX - bounds.left,
+        height: e.clientY - bounds.top
+      },
+      true
+    );
+
+    const hasMinimumWidth = width > 50 && height > 50;
+    const hasDimensionsConstraints = width <= 700 && height <= 900;
+
+    if (hasMinimumWidth && hasDimensionsConstraints && box) {
+      box.style.width = `${width}px`;
+      box.style.height = `${height}px`;
+
+      this.setState({
+        dimensions: { height: height, width: width }
+      });
+
+      const { node, editor } = this.props;
+
+      let update = node.data;
+
+      update = update.set('width', width);
+      update = update.set('height', height);
+
+      if (!update.equals(node.data)) {
+        editor.change(c => c.setNodeByKey(node.key, { data: update }));
+      }
+    }
+  };
+
+  stopResizing = () => {
+    window.removeEventListener('mousemove', this.startResizing, false);
+    window.removeEventListener('mouseup', this.stopResizing, false);
+  };
+
+  updateImageDimensions = (initialDim, nextDim, keepAspectRatio, resizeType) => {
+    // if we want to keep image aspect ratio
+    if (keepAspectRatio) {
+      const imageAspectRatio = initialDim.width / initialDim.height;
+
+      if (resizeType === 'height') {
+        // if we want to change image height => we update the width accordingly
+        return {
+          width: nextDim.height * imageAspectRatio,
+          height: nextDim.height
+        };
+      }
+
+      // if we want to change image width => we update the height accordingly
+      return {
+        width: nextDim.width,
+        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
+    };
+  };
+
   render() {
     const { node, editor, classes, attributes, onFocus } = this.props;
     const active = editor.value.isFocused && editor.value.selection.hasEdgeIn(node);
     const src = node.data.get('src');
-    const percent = node.data.get('percent');
     const loaded = node.data.get('loaded') !== false;
     const deleteStatus = node.data.get('deleteStatus');
+    const alignment = node.data.get('alignment');
+    const percent = node.data.get('percent');
+    let margin;
+    let justifyContent;
 
+    switch (alignment) {
+      case 'left':
+        justifyContent = 'flex-start';
+        margin = '0';
+        break;
+      case 'center':
+        justifyContent = 'center';
+        margin = '0 auto';
+        break;
+      case 'right':
+        justifyContent = 'flex-end';
+        margin = 'auto 0 0 auto ';
+        break;
+      default:
+        justifyContent = 'flex-start';
+        margin = '0';
+        break;
+    }
     log('[render] node.data:', node.data);
 
     const size = this.getSize(node.data);
@@ -95,7 +237,6 @@ export class Component extends React.Component {
 
     const className = classNames(
       classes.root,
-      active && classes.active,
       !loaded && classes.loading,
       deleteStatus === 'pending' && classes.pendingDelete
     );
@@ -104,13 +245,30 @@ export class Component extends React.Component {
 
     return [
       <span key={'sp1'}>&nbsp;</span>,
-      <div key={'comp'} onFocus={onFocus} className={className}>
+      <div key={'comp'} onFocus={onFocus} className={className} style={{ justifyContent }}>
         <LinearProgress
           mode="determinate"
           value={percent > 0 ? percent : 0}
           className={progressClasses}
         />
-        <img src={src} {...attributes} ref={r => (this.img = r)} style={size} />
+        <div className={classes.imageContainer}>
+          <img
+            {...attributes}
+            className={classNames(classes.image, active && classes.active)}
+            ref={ref => {
+              this.img = ref;
+            }}
+            src={src}
+            style={size}
+            onLoad={this.loadImage}
+          />
+          <div
+            ref={ref => {
+              this.resize = ref;
+            }}
+            className={classNames(classes.resize, 'resize')}
+          />
+        </div>
       </div>,
       <span key={'sp2'}>&nbsp;</span>
     ];
@@ -135,7 +293,7 @@ const styles = theme => ({
   progress: {
     position: 'absolute',
     left: '0',
-    width: '100%',
+    width: 'fit-content',
     top: '0%',
     transition: 'opacity 200ms linear'
   },
@@ -151,15 +309,38 @@ const styles = theme => ({
   root: {
     position: 'relative',
     border: 'solid 1px white',
-    display: 'inline-block',
+    display: 'flex',
     transition: 'opacity 200ms linear'
   },
-  active: {
-    border: `solid 1px ${theme.palette.primary.main}`
-  },
   delete: {
     position: 'absolute',
     right: 0
+  },
+  imageContainer: {
+    position: 'relative',
+    width: 'fit-content',
+    display: 'flex',
+    alignItems: 'center',
+
+    '&&:hover > .resize': {
+      display: 'block'
+    }
+  },
+  active: {
+    border: `solid 1px ${theme.palette.primary.main}`
+  },
+  resize: {
+    backgroundColor: theme.palette.primary.main,
+    cursor: 'col-resize',
+    height: '35px',
+    width: '5px',
+    borderRadius: 8,
+    marginLeft: '5px',
+    marginRight: '10px',
+    display: 'none'
+  },
+  drawableHeight: {
+    minHeight: 350
   }
 });
 

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

@@ -1,50 +1,55 @@
-import { MarkButton } from '../toolbar/toolbar-buttons';
-
 import PropTypes from 'prop-types';
 import React from 'react';
 import debug from 'debug';
 import { withStyles } from '@material-ui/core/styles';
+import { MarkButton } from '../toolbar/toolbar-buttons';
 
 const log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');
 
-const PercentButton = ({ percent, active, onClick }) => {
-  const label = `${percent}%`;
+const AlignmentButton = ({ alignment, active, onClick }) => {
   return (
-    <MarkButton active={active} onToggle={() => onClick(percent)} label={label}>
-      {label}
+    <MarkButton active={active} onToggle={() => onClick(alignment)} label={alignment}>
+      {alignment}
     </MarkButton>
   );
 };
 
-PercentButton.propTypes = {
-  percent: PropTypes.number.isRequired,
+AlignmentButton.propTypes = {
+  alignment: PropTypes.string.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);
+  onAlignmentClick = alignment => {
+    log('[onAlignmentClick]: alignment:', alignment);
+    this.props.onChange(alignment);
   };
 
   render() {
-    const { classes, percent } = this.props;
+    const { classes, alignment } = 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}
+        <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}
         />
       </div>
     );

package/src/plugins/image/index.jsx

@@ -29,19 +29,18 @@ export default function ImagePlugin(opts) {
     },
     supports: node => node.object === 'inline' && node.type === 'image',
     customToolbar: (node, value, onToolbarDone) => {
-      const percent = node.data.get('resizePercent');
-
-      const onChange = resizePercent => {
+      const alignment = node.data.get('alignment');
+      const onChange = alignment => {
         const update = {
           ...node.data.toObject(),
-          resizePercent
+          alignment
         };
 
         const change = value.change().setNodeByKey(node.key, { data: update });
         onToolbarDone(change, false);
       };
 
-      const Tb = () => <ImageToolbar percent={percent || 100} onChange={onChange} />;
+      const Tb = () => <ImageToolbar alignment={alignment || 'left'} onChange={onChange} />;
       return Tb;
     },
     showDone: true
@@ -90,7 +89,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
         );
@@ -135,7 +136,7 @@ export const serialization = {
     if (name !== 'img') return;
 
     log('deserialize: ', name);
-    const style = el.style || { width: '', height: '' };
+    const style = el.style || { width: '', height: '', margin: '', justifyContent: '' };
     const width = parseInt(style.width.replace('px', ''), 10) || null;
     const height = parseInt(style.height.replace('px', ''), 10) || null;
 
@@ -146,7 +147,10 @@ export const serialization = {
       data: {
         src: el.getAttribute('src'),
         width,
-        height
+        height,
+        margin: el.style.margin,
+        justifyContent: el.style.justifyContent,
+        alignment: el.getAttribute('alignment')
       }
     };
     log('return object: ', out);
@@ -159,6 +163,9 @@ export const serialization = {
     const src = data.get('src');
     const width = data.get('width');
     const height = data.get('height');
+    const alignment = data.get('alignment');
+    const margin = data.get('margin');
+    const justifyContent = data.get('margin');
     const style = {};
     if (width) {
       style.width = `${width}px`;
@@ -168,11 +175,35 @@ export const serialization = {
       style.height = `${height}px`;
     }
 
+    style.margin = margin;
+    style.justifyContent = justifyContent;
+
+    if (alignment) {
+      switch (alignment) {
+        case 'left':
+          style.justifyContent = 'flex-start';
+          style.margin = '0';
+          break;
+        case 'center':
+          style.justifyContent = 'center';
+          style.margin = '0 auto';
+          break;
+        case 'right':
+          style.justifyContent = 'flex-end';
+          style.margin = 'auto 0 0 auto';
+          break;
+        default:
+          style.justifyContent = 'flex-start';
+          break;
+      }
+    }
+
     style.objectFit = 'contain';
 
     const props = {
       src,
-      style
+      style,
+      alignment
     };
 
     return <img {...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,10 +105,11 @@ 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),
-    SoftBreakPlugin(),
+    SoftBreakPlugin({ shift: true }),
     addIf('responseArea', respAreaPlugin)
   ]);
 };

package/src/plugins/list/index.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { Data } from 'slate';
+import Immutable from 'immutable';
 import PropTypes from 'prop-types';
 import EditList from 'slate-edit-list';
 import debug from 'debug';
@@ -44,15 +46,12 @@ export const serialization = {
   }
 };
 
-export default options => {
-  const { type, icon } = options;
-
+const createEditList = () => {
   const core = EditList({
     typeDefault: 'span'
   });
 
   // fix outdated schema
-
   if (core.schema && core.schema.blocks) {
     Object.keys(core.schema.blocks).forEach(key => {
       const block = core.schema.blocks[key];
@@ -65,6 +64,69 @@ export default options => {
     });
   }
 
+  /**
+   * This override of the core.changes.wrapInList is needed because the version
+   * of immutable that we have does not support getting the element at a specific
+   * index with a square bracket (list[0]). We have to use the list.get function instead
+   */
+
+  /**
+   * Returns the highest list of blocks that cover the current selection
+   */
+  const getHighestSelectedBlocks = value => {
+    const range = value.selection;
+    const document = value.document;
+
+    const startBlock = document.getClosestBlock(range.startKey);
+    const endBlock = document.getClosestBlock(range.endKey);
+
+    if (startBlock === endBlock) {
+      return Immutable.List([startBlock]);
+    }
+
+    const ancestor = document.getCommonAncestor(startBlock.key, endBlock.key);
+    const startPath = ancestor.getPath(startBlock.key);
+    const endPath = ancestor.getPath(endBlock.key);
+
+    return ancestor.nodes.slice(startPath.get(0), endPath.get(0) + 1);
+  };
+
+  /**
+   * Wrap the blocks in the current selection in a new list. Selected
+   * lists are merged together.
+   */
+  core.changes.wrapInList = function(change, type, data) {
+    const selectedBlocks = getHighestSelectedBlocks(change.value);
+
+    // Wrap in container
+    change.wrapBlock({ type: type, data: Data.create(data) }, { normalize: false });
+
+    // Wrap in list items
+    selectedBlocks.forEach(function(node) {
+      if (core.utils.isList(node)) {
+        // Merge its items with the created list
+        node.nodes.forEach(function(_ref) {
+          const key = _ref.key;
+          return change.unwrapNodeByKey(key, { normalize: false });
+        });
+      } else if (node.type !== 'list_item') {
+        change.wrapBlockByKey(node.key, 'list_item', {
+          normalize: false
+        });
+      }
+    });
+
+    return change.normalize();
+  };
+
+  return core;
+};
+
+export default options => {
+  const { type, icon } = options;
+
+  const core = createEditList();
+
   // eslint-disable-next-line react/display-name
   core.renderNode = props => {
     const { node, attributes, children } = props;
@@ -88,7 +150,7 @@ export default options => {
         return false;
       }
       const current = core.utils.getCurrentList(value);
-      return current.type === type;
+      return current ? current.type === type : false;
     },
     onClick: (value, onChange) => {
       log('[onClick]', value);

package/src/plugins/math/index.jsx

@@ -143,42 +143,6 @@ export default function MathPlugin() {
 
         return <span {...props.attributes} dangerouslySetInnerHTML={{ __html: html }} />;
       }
-    },
-
-    normalizeNode: node => {
-      if (node.object !== 'document') {
-        return;
-      }
-
-      const addSpacesArray = [];
-
-      const allElements = node.filterDescendants(d => d.type === 'math');
-
-      allElements.forEach(el => {
-        const prevText = node.getPreviousText(el.key);
-        const lastCharIsNewLine = prevText.text[prevText.text.length - 1] === '\n';
-
-        if (prevText.text.length === 0 || lastCharIsNewLine) {
-          addSpacesArray.push({
-            nr: lastCharIsNewLine ? 1 : 2,
-            key: prevText.key
-          });
-        }
-      });
-
-      if (!addSpacesArray.length) {
-        return;
-      }
-
-      return change => {
-        change.withoutNormalization(() => {
-          addSpacesArray.forEach(({ key, nr }) => {
-            const node = change.value.document.getNode(key);
-
-            change.insertTextByKey(key, node.text.length, '\u00A0'.repeat(nr));
-          });
-        });
-      };
     }
   };
 }
@@ -208,6 +172,36 @@ const getTagName = el => {
   return ((el && el.tagName) || '').toLowerCase();
 };
 
+/**
+ * Makes sure that strings that contain stuff like:
+ * x<y are not transformed into x by the DOMParser because it thinks
+ * that <y is the start of a dom element tag
+ * @param input
+ * @returns {*}
+ */
+const lessThanHandling = input => {
+  const arrowSplit = input.split('<');
+
+  // if we don't have at least 2 characters there's no point in checking
+  if (input.length > 2) {
+    return arrowSplit.reduce((st, part) => {
+      /*
+       We check if this element resulted is:
+       div - continuation of a beginning of a HTML element
+       /div - closing of a HTML tag
+       br/> - beginning and closing of a html TAG
+       */
+      if (part.match(/<[a-zA-Z/][\s\S]*>/ig)) {
+        return `${st}${st ? '<' : ''}${part}`;
+      }
+
+      return `${st}${st ? '&lt;' : ''}${part}`;
+    }, '');
+  }
+
+  return input;
+};
+
 export const serialization = {
   deserialize(el) {
     const tagName = getTagName(el);
@@ -269,7 +263,7 @@ export const serialization = {
       const l = object.data.get('latex');
       const wrapper = object.data.get('wrapper');
       log('[serialize] latex: ', l);
-      const decoded = htmlDecode(l);
+      const decoded = htmlDecode(lessThanHandling(l));
       return (
         <span data-latex="" data-raw={decoded}>
           {wrapMath(decoded, wrapper)}