@pie-lib/editable-html 10.0.0-beta.7 → 10.0.0

package/src/index.jsx

@@ -1,8 +1,7 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { useSlate } from 'slate-react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Editor, { DEFAULT_PLUGINS, ALL_PLUGINS } from './editor';
-import { htmlToValue, valueToHtml } from './new-serialization';
+import { htmlToValue, valueToHtml } from './serialization';
 import { parseDegrees } from './parse-html';
 import debug from 'debug';
 import { Range } from 'slate';
@@ -13,43 +12,87 @@ const log = debug('@pie-lib:editable-html');
  */
 export { htmlToValue, valueToHtml, Editor, DEFAULT_PLUGINS, ALL_PLUGINS };
 
-const useConstructor = (callback = () => {}) => {
-  const [hasBeenCalled, setHasBeenCalled] = useState(false);
+/**
+ * Wrapper around the editor that exposes a `markup` and `onChange(markup:string)` api.
+ * Because of the mismatch between the markup and the `Value` we need to convert the incoming markup to a value and
+ * 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.
+ */
 
-  if (hasBeenCalled) {
-    return;
+const reduceMultipleBrs = (markup) => {
+  try {
+    return markup.replace(/(<br\s*\/?>){3,}/gi, '<br>');
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log("Couldn't remove <br/> tags: ", e);
   }
 
-  callback();
-  setHasBeenCalled(true);
+  return markup;
 };
 
-const EditableHtml = React.forwardRef((props, forwardedRef) => {
-  const editorRef = useRef(null);
-  const rootRef = useRef(null);
-  const [value, setValue] = useState();
+export default class EditableHtml extends React.Component {
+  static propTypes = {
+    error: PropTypes.any,
+    onChange: PropTypes.func.isRequired,
+    onDone: PropTypes.func,
+    markup: PropTypes.string.isRequired,
+    allowValidation: PropTypes.bool,
+    toolbarOpts: PropTypes.object,
+  };
+
+  static defaultProps = {
+    onDone: () => {},
+    allowValidation: false,
+  };
 
-  useConstructor(() => {
+  constructor(props) {
+    super(props);
     const v = htmlToValue(props.markup);
-    setValue(v);
-  });
+    this.state = {
+      value: v,
+    };
+  }
+
+  // eslint-disable-next-line react/no-deprecated
+  componentWillReceiveProps(props) {
+    if (!props.allowValidation && props.markup === this.props.markup) {
+      return;
+    }
+
+    const v = htmlToValue(reduceMultipleBrs(props.markup));
+    const current = htmlToValue(reduceMultipleBrs(this.props.markup));
+
+    if (v.equals && !v.equals(current)) {
+      this.setState({ value: v });
+    }
+  }
+
+  runSerializationOnMarkup = () => {
+    if (!this.props.markup) {
+      return;
+    }
+
+    const v = htmlToValue(reduceMultipleBrs(this.props.markup));
 
-  const onChange = (value, done) => {
+    this.setState({ value: v });
+  };
+
+  onChange = (value, done) => {
     const html = valueToHtml(value);
     const htmlParsed = parseDegrees(html);
 
     log('value as html: ', html);
 
-    if (html !== props.markup) {
-      props.onChange(htmlParsed);
+    if (html !== this.props.markup) {
+      this.props.onChange(htmlParsed);
     }
 
     if (done) {
-      props.onDone(htmlParsed);
+      this.props.onDone(htmlParsed);
     }
   };
 
-  const focus = (position, node, select = false) => {
+  focus = (position, node, select = false) => {
     if (this.editorRef) {
       this.editorRef.change((c) => {
         const lastText = node ? c.value.document.getNextText(node.key) : c.value.document.getLastText();
@@ -84,48 +127,39 @@ const EditableHtml = React.forwardRef((props, forwardedRef) => {
     }
   };
 
-  const { toolbarOpts, error } = props;
-
-  if (toolbarOpts) {
-    toolbarOpts.error = error;
-  }
-
-  const newProps = {
-    ...props,
-    markup: null,
-    value,
-    onChange,
-    focus,
+  finishEditing = () => {
+    if (this.editorRef) {
+      this.editorRef.props.onEditingDone();
+    }
   };
 
-  return (
-    <Editor
-      {...newProps}
-      onRef={(ref) => {
-        if (ref) {
-          rootRef.current = ref;
+  render() {
+    const { value } = this.state;
+    const { toolbarOpts, error } = this.props;
 
-          if (forwardedRef) {
-            forwardedRef(ref);
-          }
-        }
-      }}
-      editorRef={(ref) => ref && (editorRef.current = ref)}
-    />
-  );
-});
-
-EditableHtml.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  onDone: PropTypes.func,
-  onEditor: PropTypes.func,
-  markup: PropTypes.string.isRequired,
-  allowValidation: PropTypes.bool,
-};
-
-EditableHtml.defaultProps = {
-  onDone: () => {},
-  allowValidation: false,
-};
+    if (toolbarOpts) {
+      toolbarOpts.error = error;
+    }
 
-export default EditableHtml;
+    const props = {
+      ...this.props,
+      markup: null,
+      value,
+      onChange: this.onChange,
+      focus: this.focus,
+      runSerializationOnMarkup: this.runSerializationOnMarkup,
+    };
+
+    return (
+      <Editor
+        onRef={(ref) => {
+          if (ref) {
+            this.rootRef = ref;
+          }
+        }}
+        editorRef={(ref) => ref && (this.editorRef = ref)}
+        {...props}
+      />
+    );
+  }
+}

package/src/plugins/characters/index.jsx

@@ -1,8 +1,5 @@
 import React from 'react';
-import { ReactEditor } from 'slate-react';
-import { Editor } from 'slate';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
 import debug from 'debug';
 import get from 'lodash/get';
 
@@ -11,6 +8,7 @@ import { PureToolbar } from '@pie-lib/math-toolbar';
 import CustomPopper from './custom-popper';
 import { insertSnackBar } from '../respArea/utils';
 import { characterIcons, spanishConfig, specialConfig } from './utils';
+import PropTypes from 'prop-types';
 const log = debug('@pie-lib:editable-html:plugins:characters');
 
 const removePopOvers = () => {
@@ -28,7 +26,7 @@ export const removeDialogs = () => {
   removePopOvers();
 };
 
-const insertDialog = ({ editor, callback, opts }) => {
+const insertDialog = ({ editorDOM, value, callback, opts }) => {
   const newEl = document.createElement('div');
 
   log('[characters:insertDialog]');
@@ -108,7 +106,6 @@ const insertDialog = ({ editor, callback, opts }) => {
     // so right after mouseup, the click will be triggered
     if (firstCallMade) {
       const focusIsInModals = newEl.contains(e.target) || (popoverEl && popoverEl.contains(e.target));
-      const editorDOM = ReactEditor.toDOMNode(editor, editor);
       const focusIsInEditor = editorDOM.contains(e.target);
 
       if (!(focusIsInModals || focusIsInEditor)) {
@@ -173,8 +170,7 @@ const insertDialog = ({ editor, callback, opts }) => {
   );
 
   ReactDOM.render(el, newEl, () => {
-    const [nodeAtSelection] = Editor.node(editor, editor.selection);
-    const cursorItem = ReactEditor.toDOMNode(editor, nodeAtSelection);
+    const cursorItem = document.querySelector(`[data-key="${value.anchorKey}"]`);
 
     if (cursorItem) {
       const bodyRect = document.body.getBoundingClientRect();
@@ -241,21 +237,30 @@ export default function CharactersPlugin(opts) {
     name: 'characters',
     toolbar: {
       icon: <CharacterIcon letter={opts.characterIcon || characterIcons[opts.language] || 'ñ'} />,
-      onClick: (editor) => {
+      onClick: (value, onChange, getFocusedValue) => {
+        const editorDOM = document.querySelector(`[data-key="${value.document.key}"]`);
+        let valueToUse = value;
         const callback = (char, focus) => {
+          valueToUse = getFocusedValue();
+
           if (char) {
-            log('[characters:insert]: ', char);
-            editor.insertText(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) {
-            ReactEditor.focus(editor);
+            if (editorDOM) {
+              editorDOM.focus();
+            }
           }
         };
 
-        insertDialog({ editor, callback, opts });
+        insertDialog({ editorDOM, value: valueToUse, callback, opts });
       },
     },
 

package/src/plugins/html/icons/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = (theme) => ({
+  icon: {
+    fontFamily: 'Cerebri Sans, Arial, sans-serif',
+    fontSize: theme.typography.fontSize,
+    fontWeight: 'bold',
+    lineHeight: '14px',
+    position: 'relative',
+    whiteSpace: 'nowrap',
+  },
+});
+
+const HtmlModeIcon = ({ classes, isHtmlMode }) => (
+  <div className={classes.icon}>{isHtmlMode ? 'Exit <HTML> mode' : '<HTML>'}</div>
+);
+
+export default withStyles(styles)(HtmlModeIcon);

package/src/plugins/html/index.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import HtmlModeIcon from './icons';
+import { htmlToValue, valueToHtml } from './../../serialization';
+
+const toggleToRichText = (value, onChange) => {
+  const plainText = value.document.text;
+  const slateValue = htmlToValue(plainText);
+
+  const change = value
+    .change()
+    .selectAll()
+    .delete()
+    .insertFragment(slateValue.document);
+  onChange(change);
+};
+
+export default function HtmlPlugin(opts) {
+  const { isHtmlMode, isEdited, toggleHtmlMode, handleAlertDialog } = opts;
+
+  const handleHtmlModeOn = (value, onChange) => {
+    const dialogProps = {
+      title: 'Warning',
+      text: 'Returning to rich text mode may cause edits to be lost.',
+      onConfirm: () => {
+        toggleToRichText(value, onChange);
+        handleAlertDialog(false);
+      },
+      onClose: () => {
+        handleAlertDialog(false);
+      },
+    };
+
+    handleAlertDialog(true, dialogProps);
+  };
+
+  const handleHtmlModeOff = (value, onChange) => {
+    const change = value
+      .change()
+      .selectAll()
+      .delete()
+      .insertText(valueToHtml(value));
+    onChange(change);
+  };
+
+  return {
+    name: 'html',
+    toolbar: {
+      icon: <HtmlModeIcon isHtmlMode={isHtmlMode} />,
+      buttonStyles: {
+        margin: '0 20px 0 auto',
+      },
+      type: 'html',
+      onClick: (value, onChange) => {
+        if (isHtmlMode) {
+          if (isEdited) {
+            handleHtmlModeOn(value, onChange);
+          } else {
+            toggleToRichText(value, onChange);
+          }
+        } else {
+          handleHtmlModeOff(value, onChange);
+        }
+
+        toggleHtmlMode();
+      },
+    },
+  };
+}

package/src/plugins/image/component.jsx

@@ -1,12 +1,10 @@
-import React from 'react';
+import LinearProgress from '@material-ui/core/LinearProgress';
 import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 import debug from 'debug';
-import isEqual from 'lodash/isEqual';
-import cloneDeep from 'lodash/cloneDeep';
-import LinearProgress from '@material-ui/core/LinearProgress';
 import { withStyles } from '@material-ui/core/styles';
-import { Editor } from 'slate';
+import SlatePropTypes from 'slate-prop-types';
 
 const log = debug('@pie-lib:editable-html:plugins:image:component');
 
@@ -14,12 +12,7 @@ const size = (s) => (s ? `${s}px` : 'auto');
 
 export class Component extends React.Component {
   static propTypes = {
-    node: PropTypes.shape({
-      type: PropTypes.string,
-      children: PropTypes.array,
-      data: PropTypes.object,
-    }).isRequired,
-    focused: PropTypes.bool,
+    node: SlatePropTypes.node.isRequired,
     editor: PropTypes.shape({
       change: PropTypes.func.isRequired,
       value: PropTypes.object,
@@ -50,27 +43,17 @@ export class Component extends React.Component {
   applySizeData = () => {
     const { node, editor } = this.props;
 
-    let update = cloneDeep(node.data);
-
-    const w = update.width;
+    let update = node.data;
 
+    const w = update.get('width');
     if (w) {
-      update = update.resizePercent = this.getPercentFromWidth(w);
+      update = update.set('resizePercent', this.getPercentFromWidth(w));
     }
 
     log('[applySizeData] update: ', update);
 
-    if (editor.selection && !isEqual(update, node.data)) {
-      const nodePath = Editor.path(editor, editor.selection);
-
-      editor.apply({
-        type: 'set_node',
-        path: nodePath,
-        properties: {
-          data: node.data,
-        },
-        newProperties: { data: update },
-      });
+    if (!update.equals(node.data)) {
+      editor.change((c) => c.setNodeByKey(node.key, { data: update }));
     }
   };
 
@@ -95,8 +78,8 @@ export class Component extends React.Component {
 
   getSize(data) {
     return {
-      width: size(data.width),
-      height: size(data.height),
+      width: size(data.get('width')),
+      height: size(data.get('height')),
       objectFit: 'contain',
     };
   }
@@ -133,22 +116,13 @@ export class Component extends React.Component {
 
       const { node, editor } = this.props;
 
-      const update = cloneDeep(node.data);
-
-      update.width = width;
-      update.height = height;
+      let update = node.data;
 
-      if (editor.selection && !isEqual(update, node.data)) {
-        const nodePath = Editor.path(editor, editor.selection);
+      update = update.set('width', width);
+      update = update.set('height', height);
 
-        editor.apply({
-          type: 'set_node',
-          path: nodePath,
-          properties: {
-            data: node.data,
-          },
-          newProperties: { data: update },
-        });
+      if (!update.equals(node.data)) {
+        editor.change((c) => c.setNodeByKey(node.key, { data: update }));
       }
     }
   };
@@ -227,10 +201,14 @@ export class Component extends React.Component {
   };
 
   render() {
-    const { node, focused, classes, attributes, children, onFocus } = this.props;
-    const active = focused;
-    const { alignment, alt, deleteStatus, loaded, percent, src } = node.data;
-    const isLoaded = loaded !== false;
+    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 loaded = node.data.get('loaded') !== false;
+    const deleteStatus = node.data.get('deleteStatus');
+    const alignment = node.data.get('alignment');
+    const percent = node.data.get('percent');
+    const alt = node.data.get('alt');
     let justifyContent;
 
     switch (alignment) {
@@ -256,22 +234,22 @@ export class Component extends React.Component {
 
     log('[render] style:', size);
 
-    const className = classNames(classes.root, {
-      [classes.loading]: !isLoaded,
-      [classes.pendingDelete]: deleteStatus === 'pending',
-    });
+    const className = classNames(
+      classes.root,
+      !loaded && classes.loading,
+      deleteStatus === 'pending' && classes.pendingDelete,
+    );
 
-    const progressClasses = classNames(classes.progress, {
-      [classes.hideProgress]: isLoaded,
-    });
+    const progressClasses = classNames(classes.progress, loaded && classes.hideProgress);
 
-    return (
-      <div onFocus={onFocus} className={className} style={{ justifyContent }} {...attributes}>
-        {children}
+    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} />
         <div className={classes.imageContainer}>
           <img
-            className={classNames(classes.image, { [classes.active]: active })}
+            {...attributes}
+            className={classNames(classes.image, active && classes.active)}
             ref={(ref) => {
               this.img = ref;
             }}
@@ -287,8 +265,9 @@ export class Component extends React.Component {
             className={classNames(classes.resize, 'resize')}
           />
         </div>
-      </div>
-    );
+      </div>,
+      <span key={'sp2'}>&nbsp;</span>,
+    ];
   }
 }
 
@@ -328,7 +307,6 @@ const styles = (theme) => ({
     border: `solid 1px ${theme.palette.common.white}`,
     display: 'flex',
     transition: 'opacity 200ms linear',
-    width: '100%',
   },
   delete: {
     position: 'absolute',