@pie-lib/editable-html 7.22.5 → 8.1.0

package/src/editor.jsx

@@ -1,16 +1,17 @@
-import { Editor as SlateEditor, findNode } from 'slate-react';
+import { Editor as SlateEditor, findNode, getEventRange, getEventTransfer } from 'slate-react';
 import SlateTypes from 'slate-prop-types';
 
 import isEqual from 'lodash/isEqual';
 import * as serialization from './serialization';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Value, Block } from 'slate';
+import { Value, Block, Inline } from 'slate';
 import { buildPlugins, ALL_PLUGINS, DEFAULT_PLUGINS } from './plugins';
 import debug from 'debug';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import { color } from '@pie-lib/render-ui';
+import { getBase64 } from './serialization';
 
 export { ALL_PLUGINS, DEFAULT_PLUGINS, serialization };
 
@@ -30,6 +31,8 @@ const defaultResponseAreaProps = {
   onHandleAreaChange: () => {}
 };
 
+const defaultLanguageCharactersProps = [];
+
 const createToolbarOpts = toolbarOpts => {
   return {
     ...defaultToolbarOpts,
@@ -49,6 +52,7 @@ export class Editor extends React.Component {
     focus: PropTypes.func.isRequired,
     value: SlateTypes.value.isRequired,
     imageSupport: PropTypes.object,
+    charactersLimit: PropTypes.number,
     width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -72,6 +76,13 @@ export class Editor extends React.Component {
       respAreaToolbar: PropTypes.func,
       onHandleAreaChange: PropTypes.func
     }),
+    languageCharactersProps: PropTypes.arrayOf(
+      PropTypes.shape({
+        language: PropTypes.string,
+        characterIcon: PropTypes.string,
+        characters: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))
+      })
+    ),
     toolbarOpts: PropTypes.shape({
       position: PropTypes.oneOf(['bottom', 'top']),
       alignment: PropTypes.oneOf(['left', 'right']),
@@ -87,7 +98,9 @@ export class Editor extends React.Component {
         new Error(`Invalid values: ${values}, values must be one of [${ALL_PLUGINS.join(',')}]`)
       );
     }),
-    className: PropTypes.string
+    className: PropTypes.string,
+    maxImageWidth: PropTypes.number,
+    maxImageHeight: PropTypes.number
   };
 
   static defaultProps = {
@@ -96,7 +109,8 @@ export class Editor extends React.Component {
     onBlur: () => {},
     onKeyDown: () => {},
     toolbarOpts: defaultToolbarOpts,
-    responseAreaProps: defaultResponseAreaProps
+    responseAreaProps: defaultResponseAreaProps,
+    languageCharactersProps: defaultLanguageCharactersProps
   };
 
   constructor(props) {
@@ -106,15 +120,19 @@ export class Editor extends React.Component {
       toolbarOpts: createToolbarOpts(props.toolbarOpts)
     };
 
+    this.onResize = () => {
+      props.onChange(this.state.value, true);
+    };
+
+    this.handlePlugins(this.props);
+  }
+
+  handlePlugins = props => {
     const normalizedResponseAreaProps = {
       ...defaultResponseAreaProps,
       ...props.responseAreaProps
     };
 
-    this.onResize = () => {
-      props.onChange(this.state.value, true);
-    };
-
     this.plugins = buildPlugins(props.activePlugins, {
       math: {
         onClick: this.onMathClick,
@@ -123,25 +141,27 @@ export class Editor extends React.Component {
       },
       image: {
         onDelete:
-          this.props.imageSupport &&
-          this.props.imageSupport.delete &&
+          props.imageSupport &&
+          props.imageSupport.delete &&
           ((src, done) => {
-            this.props.imageSupport.delete(src, e => {
+            props.imageSupport.delete(src, e => {
               done(e, this.state.value);
             });
           }),
         insertImageRequested:
-          this.props.imageSupport &&
+          props.imageSupport &&
           (getHandler => {
             /**
              * The handler is the object through which the outer context
              * communicates file upload events like: fileChosen, cancel, progress
              */
             const handler = getHandler(() => this.state.value);
-            this.props.imageSupport.add(handler);
+            props.imageSupport.add(handler);
           }),
         onFocus: this.onPluginFocus,
-        onBlur: this.onPluginBlur
+        onBlur: this.onPluginBlur,
+        maxImageWidth: this.props.maxImageWidth,
+        maxImageHeight: this.props.maxImageHeight
       },
       toolbar: {
         /**
@@ -151,7 +171,7 @@ export class Editor extends React.Component {
         disableUnderline: props.disableUnderline,
         autoWidth: props.autoWidthToolbar,
         onDone: () => {
-          const { nonEmpty } = this.props;
+          const { nonEmpty } = props;
 
           log('[onDone]');
           this.setState({ toolbarInFocus: false, focusedNode: null });
@@ -192,13 +212,14 @@ export class Editor extends React.Component {
           this.onPluginBlur();
         }
       },
+      languageCharacters: props.languageCharactersProps,
       media: {
         focus: this.focus,
         createChange: () => this.state.value.change(),
         onChange: this.onChange
       }
     });
-  }
+  };
 
   componentDidMount() {
     // onRef is needed to get the ref of the component because we export it using withStyles
@@ -232,6 +253,10 @@ export class Editor extends React.Component {
         toolbarOpts: newToolbarOpts
       });
     }
+
+    if (!isEqual(nextProps.languageCharactersProps, this.props.languageCharactersProps)) {
+      this.handlePlugins(nextProps);
+    }
   }
 
   componentDidUpdate() {
@@ -440,7 +465,20 @@ export class Editor extends React.Component {
 
   onChange = (change, done) => {
     log('[onChange]');
-    this.setState({ value: change.value }, () => {
+
+    const { value } = change;
+    const { charactersLimit } = this.props;
+
+    if (
+      value &&
+      value.document &&
+      value.document.text &&
+      value.document.text.length > charactersLimit
+    ) {
+      return;
+    }
+
+    this.setState({ value }, () => {
       log('[onChange], call done()');
 
       if (done) {
@@ -533,6 +571,42 @@ export class Editor extends React.Component {
     this.props.focus(position, node);
   };
 
+  onDropPaste = async (event, change, dropContext) => {
+    if (!this.props.imageSupport) {
+      return;
+    }
+    const editor = change.editor;
+    const transfer = getEventTransfer(event);
+    const file = transfer.files[0];
+
+    if (file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png') {
+      try {
+        log('[onDropPaste]');
+        const src = await getBase64(file);
+        const inline = Inline.create({
+          type: 'image',
+          isVoid: true,
+          data: {
+            loading: false,
+            src
+          }
+        });
+        if (dropContext) {
+          this.focus();
+        } else {
+          const range = getEventRange(event, editor);
+          if (range) {
+            change.select(range);
+          }
+        }
+        const ch = change.insertInline(inline);
+        this.onChange(ch);
+      } catch (err) {
+        log('[onDropPaste] error: ', err);
+      }
+    }
+  };
+
   render() {
     const {
       disabled,
@@ -581,6 +655,8 @@ export class Editor extends React.Component {
           onKeyDown={onKeyDown}
           onChange={this.onChange}
           onBlur={this.onBlur}
+          onDrop={(event, editor) => this.onDropPaste(event, editor, true)}
+          onPaste={(event, editor) => this.onDropPaste(event, editor)}
           onFocus={this.onFocus}
           onEditingDone={this.onEditingDone}
           focusedNode={focusedNode}

package/src/plugins/characters/custom-popover.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Popover from '@material-ui/core/Popover';
+import Typography from '@material-ui/core/Typography';
+
+const styles = () => ({
+  popover: {
+    pointerEvents: 'none',
+    zIndex: 99999
+  },
+  paper: {
+    padding: 20,
+    height: 'auto',
+    width: 'auto'
+  },
+  typography: {
+    fontSize: 50,
+    textAlign: 'center'
+  }
+});
+
+const CustomPopOver = withStyles(styles)(({ classes, children, ...props }) => (
+  <Popover
+    id="mouse-over-popover"
+    open
+    className={classes.popover}
+    classes={{
+      paper: classes.paper
+    }}
+    anchorOrigin={{
+      vertical: 'bottom',
+      horizontal: 'left'
+    }}
+    transformOrigin={{
+      vertical: 'top',
+      horizontal: 'left'
+    }}
+    disableRestoreFocus
+    {...props}
+  >
+    <Typography classes={{ root: classes.typography }}>{children}</Typography>
+  </Popover>
+));
+
+export default CustomPopOver;

package/src/plugins/characters/index.jsx

@@ -0,0 +1,237 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import debug from 'debug';
+import get from 'lodash/get';
+
+import { PureToolbar } from '@pie-lib/math-toolbar';
+
+import CustomPopOver from './custom-popover';
+import { insertSnackBar } from '../respArea/utils';
+import { characterIcons, spanishConfig, specialConfig } from './utils';
+const log = debug('@pie-lib:editable-html:plugins:characters');
+
+const removeDialogs = () => {
+  const prevDialogs = document.querySelectorAll('.insert-character-dialog');
+
+  log('[characters:removeDialogs]');
+  prevDialogs.forEach(s => s.remove());
+};
+
+const removePopOvers = () => {
+  const prevPopOvers = document.querySelectorAll('#mouse-over-popover');
+
+  log('[characters:removePopOvers]');
+  prevPopOvers.forEach(s => s.remove());
+};
+
+const insertDialog = ({ value, callback, opts }) => {
+  const newEl = document.createElement('div');
+  const initialBodyOverflow = document.body.style.overflow;
+
+  log('[characters:insertDialog]');
+
+  removeDialogs();
+
+  newEl.className = 'insert-character-dialog';
+  document.body.style.overflow = 'hidden';
+
+  let configToUse;
+
+  switch (true) {
+    case opts.language === 'spanish':
+      configToUse = spanishConfig;
+      break;
+    case opts.language === 'special':
+      configToUse = specialConfig;
+      break;
+    default:
+      configToUse = opts;
+  }
+
+  if (!configToUse.characters) {
+    insertSnackBar('No characters provided or language not recognized');
+    return;
+  }
+
+  const layoutForCharacters = configToUse.characters.reduce(
+    (obj, arr) => {
+      if (arr.length >= obj.columns) {
+        obj.columns = arr.length;
+      }
+
+      return obj;
+    },
+    { rows: configToUse.characters.length, columns: 0 }
+  );
+
+  let popoverEl;
+
+  const closePopOver = () => {
+    if (popoverEl) {
+      popoverEl.remove();
+    }
+
+    removePopOvers();
+  };
+
+  const renderPopOver = (event, el) => {
+    if (!event) {
+      return;
+    }
+
+    const infoStyle = { fontSize: '20px', lineHeight: '20px' };
+
+    closePopOver();
+
+    popoverEl = document.createElement('div');
+    ReactDOM.render(
+      <CustomPopOver onClose={closePopOver} anchorEl={event.currentTarget}>
+        <div>{el.label}</div>
+
+        <div style={infoStyle}>{el.description}</div>
+
+        <div style={infoStyle}>{el.unicode}</div>
+      </CustomPopOver>,
+      popoverEl
+    );
+
+    document.body.appendChild(newEl);
+  };
+
+  const handleClose = () => {
+    newEl.remove();
+    closePopOver();
+    document.body.style.overflow = initialBodyOverflow;
+    callback(undefined, true);
+  };
+
+  const handleChange = val => {
+    if (typeof val === 'string') {
+      callback(val);
+    }
+
+    if (configToUse.autoClose) {
+      handleClose();
+    }
+  };
+
+  const el = (
+    <PureToolbar
+      autoFocus
+      noDecimal
+      hideInput
+      noLatexHandling
+      layoutForKeyPad={layoutForCharacters}
+      additionalKeys={configToUse.characters.reduce((arr, n) => {
+        arr = [
+          ...arr,
+          ...n.map(k => ({
+            name: get(k, 'name') || k,
+            write: get(k, 'write') || k,
+            label: get(k, 'label') || k,
+            category: 'character',
+            extraClass: 'character',
+            ...(configToUse.hasPreview
+              ? {
+                  actions: { onMouseEnter: ev => renderPopOver(ev, k), onMouseLeave: closePopOver }
+                }
+              : {})
+          }))
+        ];
+
+        return arr;
+      }, [])}
+      keypadMode="language"
+      onChange={handleChange}
+      onDone={handleClose}
+    />
+  );
+
+  ReactDOM.render(el, newEl, () => {
+    const cursorItem = document.querySelector(`[data-key="${value.anchorKey}"]`);
+
+    if (cursorItem) {
+      const boundRect = cursorItem.getBoundingClientRect();
+
+      document.body.appendChild(newEl);
+      newEl.style.position = 'fixed';
+      newEl.style.top = `${boundRect.top - newEl.offsetHeight - 10}px`;
+      newEl.style.left = `${boundRect.left + cursorItem.offsetWidth + 10}px`;
+      newEl.style.zIndex = 99999;
+
+      let firstCallMade = false;
+
+      const listener = () => {
+        // this will be triggered right after setting it because
+        // this toolbar is added on the mousedown event
+        // so right after mouseup, the click will be triggered
+        if (firstCallMade) {
+          document.body.removeEventListener('click', listener);
+          handleClose();
+        } else {
+          firstCallMade = true;
+        }
+      };
+
+      if (configToUse.autoClose) {
+        document.body.addEventListener('click', listener);
+      }
+    }
+  });
+};
+
+const CharacterIcon = ({ letter }) => (
+  <div
+    style={{
+      fontSize: '25px',
+      lineHeight: '15px'
+    }}
+  >
+    {letter}
+  </div>
+);
+
+export default function CharactersPlugin(opts) {
+  removeDialogs();
+  return {
+    name: 'math',
+    toolbar: {
+      icon: <CharacterIcon letter={opts.characterIcon || characterIcons[opts.language] || 'ñ'} />,
+      onClick: (value, onChange) => {
+        let valueToUse = value;
+        const callback = (char, focus) => {
+          if (char) {
+            const change = valueToUse
+              .change()
+              .insertTextByKey(valueToUse.anchorKey, valueToUse.anchorOffset, char);
+
+            valueToUse = change.value;
+            log('[characters:insert]: ', value);
+            onChange(change);
+          }
+
+          log('[characters:click]');
+
+          if (focus) {
+            const editorDOM = document.querySelector(`[data-key="${valueToUse.document.key}"]`);
+
+            if (editorDOM) {
+              editorDOM.focus();
+            }
+          }
+        };
+
+        insertDialog({ value: valueToUse, callback, opts });
+      }
+    },
+
+    pluginStyles: (node, parentNode, p) => {
+      if (p) {
+        return {
+          position: 'absolute',
+          top: 'initial'
+        };
+      }
+    }
+  };
+}