@pie-lib/editable-html 7.17.4-next.53 → 7.17.4-next.556

package/lib/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/theme.js"],"names":["primary"],"mappings":";;;;;;AAAO,IAAMA,OAAO,GAAG,SAAhB","sourcesContent":["export const primary = '#304ffe';\n"],"file":"theme.js"}
+{"version":3,"file":"theme.js","names":["primary"],"sources":["../src/theme.js"],"sourcesContent":["export const primary = '#304ffe';\n"],"mappings":";;;;;;AAAO,IAAMA,OAAO,GAAG,SAAhB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html",
-  "version": "7.17.4-next.53+3034d18f",
+  "version": "7.17.4-next.556+f3344f79",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -11,9 +11,9 @@
     "@material-ui/icons": "^3.0.2",
     "@material-ui/styles": "^3.0.0-alpha.10",
     "@pie-lib/drag": "^1.1.52",
-    "@pie-lib/math-rendering": "^2.3.9",
-    "@pie-lib/math-toolbar": "^1.8.0",
-    "@pie-lib/render-ui": "^4.12.0",
+    "@pie-lib/math-rendering": "^2.5.0",
+    "@pie-lib/math-toolbar": "^1.11.0",
+    "@pie-lib/render-ui": "^4.13.4",
     "change-case": "^3.0.2",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
@@ -29,6 +29,7 @@
     "slate-edit-list": "^0.11.3",
     "slate-edit-table": "^0.17.0",
     "slate-html-serializer": "^0.6.12",
+    "slate-plain-serializer": "^0.5.26",
     "slate-prop-types": "^0.4.38",
     "slate-react": "^0.14.3",
     "slate-schema-violations": "^0.1.39",
@@ -36,7 +37,7 @@
     "to-style": "^1.3.3"
   },
   "devDependencies": {
-    "@pie-framework/mathquill": "^1.1.2",
+    "@pie-framework/mathquill": "^1.1.3",
     "react": "^16.8.1",
     "react-dom": "^16.9.0"
   },
@@ -46,6 +47,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3034d18f8b084e72b2791c5afe5bc0eb179a48e6",
+  "gitHead": "f3344f79f8507c03371c2e1c957b8a9e9f2c266f",
   "scripts": {}
 }

package/src/editor.jsx

@@ -1,16 +1,19 @@
-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 Plain from 'slate-plain-serializer';
+
+import { getBase64 } from './serialization';
 
 export { ALL_PLUGINS, DEFAULT_PLUGINS, serialization };
 
@@ -24,6 +27,14 @@ const defaultToolbarOpts = {
   doneOn: 'blur'
 };
 
+const defaultResponseAreaProps = {
+  options: {},
+  respAreaToolbar: () => {},
+  onHandleAreaChange: () => {}
+};
+
+const defaultLanguageCharactersProps = [];
+
 const createToolbarOpts = toolbarOpts => {
   return {
     ...defaultToolbarOpts,
@@ -43,6 +54,11 @@ export class Editor extends React.Component {
     focus: PropTypes.func.isRequired,
     value: SlateTypes.value.isRequired,
     imageSupport: PropTypes.object,
+    uploadSoundSupport: PropTypes.shape({
+      add: PropTypes.func,
+      delete: PropTypes.func
+    }),
+    charactersLimit: PropTypes.number,
     width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -50,6 +66,7 @@ export class Editor extends React.Component {
     classes: PropTypes.object.isRequired,
     highlightShape: PropTypes.bool,
     disabled: PropTypes.bool,
+    spellCheck: PropTypes.bool,
     nonEmpty: PropTypes.bool,
     disableUnderline: PropTypes.bool,
     autoWidthToolbar: PropTypes.bool,
@@ -63,8 +80,15 @@ export class Editor extends React.Component {
       ]),
       options: PropTypes.object,
       respAreaToolbar: PropTypes.func,
-      onDelete: 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']),
@@ -80,15 +104,19 @@ 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 = {
     disableUnderline: true,
     onFocus: () => {},
     onBlur: () => {},
+    onKeyDown: () => {},
     toolbarOpts: defaultToolbarOpts,
-    onKeyDown: () => {}
+    responseAreaProps: defaultResponseAreaProps,
+    languageCharactersProps: defaultLanguageCharactersProps
   };
 
   constructor(props) {
@@ -102,6 +130,15 @@ export class Editor extends React.Component {
       props.onChange(this.state.value, true);
     };
 
+    this.handlePlugins(this.props);
+  }
+
+  handlePlugins = props => {
+    const normalizedResponseAreaProps = {
+      ...defaultResponseAreaProps,
+      ...props.responseAreaProps
+    };
+
     this.plugins = buildPlugins(props.activePlugins, {
       math: {
         onClick: this.onMathClick,
@@ -110,25 +147,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: {
         /**
@@ -138,13 +177,13 @@ 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 });
           this.editor.blur();
 
-          if (nonEmpty && this.state.value.startText.text.length === 0) {
+          if (nonEmpty && this.state.value.startText?.text?.length === 0) {
             this.resetValue(true).then(() => {
               this.onEditingDone();
             });
@@ -164,9 +203,12 @@ export class Editor extends React.Component {
         }
       },
       responseArea: {
-        type: props.responseAreaProps && props.responseAreaProps.type,
-        options: props.responseAreaProps && props.responseAreaProps.options,
-        respAreaToolbar: props.responseAreaProps && props.responseAreaProps.respAreaToolbar,
+        type: normalizedResponseAreaProps.type,
+        options: normalizedResponseAreaProps.options,
+        maxResponseAreas: normalizedResponseAreaProps.maxResponseAreas,
+        respAreaToolbar: normalizedResponseAreaProps.respAreaToolbar,
+        onHandleAreaChange: normalizedResponseAreaProps.onHandleAreaChange,
+        error: normalizedResponseAreaProps.error,
         onFocus: () => {
           log('[table:onFocus]...');
           this.onPluginFocus();
@@ -176,13 +218,15 @@ export class Editor extends React.Component {
           this.onPluginBlur();
         }
       },
+      languageCharacters: props.languageCharactersProps,
       media: {
         focus: this.focus,
         createChange: () => this.state.value.change(),
-        onChange: this.onChange
+        onChange: this.onChange,
+        uploadSoundSupport: props.uploadSoundSupport
       }
     });
-  }
+  };
 
   componentDidMount() {
     // onRef is needed to get the ref of the component because we export it using withStyles
@@ -216,6 +260,21 @@ export class Editor extends React.Component {
         toolbarOpts: newToolbarOpts
       });
     }
+
+    if (!isEqual(nextProps.languageCharactersProps, this.props.languageCharactersProps)) {
+      this.handlePlugins(nextProps);
+    }
+  }
+
+  componentDidUpdate() {
+    // The cursor is on a zero width element and when that is placed near void elements, it is not visible
+    // so we increase the width to at least 2px in order for the user to see it
+    const zeroWidthEls = document.querySelectorAll('[data-slate-zero-width="z"]');
+
+    Array.from(zeroWidthEls).forEach(el => {
+      el.style.minWidth = '2px';
+      el.style.display = 'inline-block';
+    });
   }
 
   onPluginBlur = e => {
@@ -277,7 +336,7 @@ export class Editor extends React.Component {
     }
 
     if (doneOn === 'blur') {
-      if (nonEmpty && this.state.value.startText.text.length === 0) {
+      if (nonEmpty && this.state.value.startText?.text?.length === 0) {
         this.resetValue(true).then(() => {
           this.onEditingDone();
           resolve();
@@ -298,7 +357,10 @@ export class Editor extends React.Component {
     log('[onBlur] node: ', node);
 
     return new Promise(resolve => {
-      this.setState({ focusedNode: node }, this.handleBlur.bind(this, resolve));
+      this.setState(
+        { preBlurValue: this.state.value, focusedNode: !node ? null : node },
+        this.handleBlur.bind(this, resolve)
+      );
       this.props.onBlur(event);
     });
   };
@@ -307,6 +369,8 @@ export class Editor extends React.Component {
     const editorDOM = document.querySelector(`[data-key="${this.state.value.document.key}"]`);
 
     setTimeout(() => {
+      const { value: stateValue } = this.state;
+
       if (!this.wrapperRef) {
         return;
       }
@@ -314,13 +378,17 @@ export class Editor extends React.Component {
       const editorElement =
         !editorDOM || document.activeElement.closest(`[class*="${editorDOM.className}"]`);
       const toolbarElement =
-        !this.toolbarRef || document.activeElement.closest(`[class*="${this.toolbarRef.className}"]`);
+        !this.toolbarRef ||
+        document.activeElement.closest(`[class*="${this.toolbarRef.className}"]`);
       const isInCurrentComponent =
         this.wrapperRef.contains(editorElement) || this.wrapperRef.contains(toolbarElement);
 
       if (!isInCurrentComponent) {
         editorDOM.removeEventListener('blur', this.handleDomBlur);
-        this.onBlur(e);
+
+        if (stateValue.isFocused) {
+          this.onBlur(e);
+        }
       }
     }, 50);
   };
@@ -412,7 +480,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) {
@@ -421,6 +502,14 @@ export class Editor extends React.Component {
     });
   };
 
+  getFocusedValue = () => {
+    if (this.state.value.isFocused) {
+      return this.state.value;
+    }
+
+    return this.state.preBlurValue;
+  };
+
   UNSAFE_componentWillReceiveProps(props) {
     if (!props.value.document.equals(this.props.value.document)) {
       this.setState({
@@ -505,9 +594,102 @@ export class Editor extends React.Component {
     this.props.focus(position, node);
   };
 
+  onDropPaste = async (event, change, dropContext) => {
+    const editor = change.editor;
+    const transfer = getEventTransfer(event);
+    const file = transfer.files && transfer.files[0];
+
+    const type = transfer.type;
+    const fragment = transfer.fragment;
+    const text = transfer.text;
+
+    if (
+      file &&
+      (file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png')
+    ) {
+      if (!this.props.imageSupport) {
+        return;
+      }
+      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);
+      }
+    } else if (type === 'fragment') {
+      change.insertFragment(fragment);
+    } else if (type === 'text' || type === 'html') {
+      if (!text) {
+        return;
+      }
+      const {
+        value: { document, selection, startBlock }
+      } = change;
+
+      if (startBlock.isVoid) {
+        return;
+      }
+
+      const defaultBlock = startBlock;
+      const defaultMarks = document.getInsertMarksAtRange(selection);
+      const frag = Plain.deserialize(text, {
+        defaultBlock,
+        defaultMarks
+      }).document;
+      change.insertFragment(frag);
+    }
+  };
+
+  renderPlaceholder = props => {
+    const { editor } = props;
+    const { document } = editor.value;
+
+    if (!editor.props.placeholder || document.text !== '' || document.nodes.size !== 1) {
+      return false;
+    }
+
+    return (
+      <span
+        contentEditable={false}
+        style={{
+          display: 'inline-block',
+          width: 'fit-content', // for centering the placeholder if text-align is set to center
+          maxWidth: '100%',
+          whiteSpace: 'nowrap',
+          opacity: '0.33',
+          pointerEvents: 'none',
+          userSelect: 'none'
+        }}
+      >
+        {editor.props.placeholder}
+      </span>
+    );
+  };
+
   render() {
     const {
       disabled,
+      spellCheck,
       highlightShape,
       classes,
       className,
@@ -515,6 +697,7 @@ export class Editor extends React.Component {
       pluginProps,
       onKeyDown
     } = this.props;
+
     const { value, focusedNode, toolbarOpts } = this.state;
 
     log('[render] value: ', value);
@@ -550,13 +733,22 @@ export class Editor extends React.Component {
           focus={this.focus}
           onKeyDown={onKeyDown}
           onChange={this.onChange}
+          getFocusedValue={this.getFocusedValue}
           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}
           normalize={this.normalize}
           readOnly={disabled}
-          className={classes.slateEditor}
+          spellCheck={spellCheck}
+          className={classNames(
+            {
+              [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder
+            },
+            classes.slateEditor
+          )}
           style={{
             minHeight: sizeStyle.minHeight,
             height: sizeStyle.height,
@@ -565,6 +757,7 @@ export class Editor extends React.Component {
           pluginProps={pluginProps}
           toolbarOpts={toolbarOpts}
           placeholder={placeholder}
+          renderPlaceholder={this.renderPlaceholder}
           onDataChange={this.changeData}
         />
       </div>
@@ -587,7 +780,7 @@ const styles = {
       color: color.text(),
       backgroundColor: color.background()
     },
-    '& tr': {
+    '& table:not([border="1"]) tr': {
       borderTop: '1px solid #dfe2e5'
       // TODO perhaps secondary color for background, for now disable
       // '&:nth-child(2n)': {
@@ -595,13 +788,18 @@ const styles = {
       // }
     },
     '& td, th': {
-      border: '1px solid #dfe2e5',
       padding: '.6em 1em',
       textAlign: 'center'
+    },
+    '& table:not([border="1"]) td, th': {
+      border: '1px solid #dfe2e5'
     }
   },
   toolbarOnTop: {
     marginTop: '45px'
+  },
+  noPadding: {
+    padding: '0 !important'
   }
 };
 

package/src/index.jsx

@@ -17,6 +17,17 @@ export { htmlToValue, valueToHtml, Editor, DEFAULT_PLUGINS, ALL_PLUGINS };
  * compare it. TODO: This is an interim fix, we'll need to strip back `Editor` and look how best to maintain the
  * `markup` api whilst avoiding the serialization mismatch. We should be making better use of schemas w/ normalize.
  */
+
+const reduceMultipleBrs = markup => {
+  try {
+    return markup.replace(/(<br\s*\/?>){3,}/gi, '<br>');
+  } catch (e) {
+    console.log("Couldn't remove <br/> tags: ", e);
+  }
+
+  return markup;
+};
+
 export default class EditableHtml extends React.Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
@@ -44,10 +55,10 @@ export default class EditableHtml extends React.Component {
       return;
     }
 
-    const v = htmlToValue(props.markup);
-    const current = htmlToValue(this.props.markup);
+    const v = htmlToValue(reduceMultipleBrs(props.markup));
+    const current = htmlToValue(reduceMultipleBrs(this.props.markup));
 
-    if (!v.equals(current)) {
+    if (v.equals && !v.equals(current)) {
       this.setState({ value: v });
     }
   }
@@ -84,9 +95,9 @@ export default class EditableHtml extends React.Component {
         c.focus();
 
         if (position === 'end' && lastText) {
-          c.moveFocusTo(lastText.key, lastText.text.length).moveAnchorTo(
+          c.moveFocusTo(lastText.key, lastText.text?.length).moveAnchorTo(
             lastText.key,
-            lastText.text.length
+            lastText.text?.length
           );
         }
 
@@ -105,6 +116,12 @@ export default class EditableHtml extends React.Component {
 
   render() {
     const { value } = this.state;
+    const { toolbarOpts, error } = this.props;
+
+    if (toolbarOpts) {
+      toolbarOpts.error = error;
+    }
+
     const props = {
       ...this.props,
       markup: null,

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

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