@pie-lib/editable-html 10.0.0-beta.4 → 10.0.0-beta.6

package/src/plugins/math/index.jsx

@@ -4,7 +4,7 @@ import { ReactEditor } from 'slate-react';
 import { jsx } from 'slate-hyperscript';
 import Functions from '@material-ui/icons/Functions';
 import { MathPreview, MathToolbar } from '@pie-lib/math-toolbar';
-import { wrapMath, unWrapMath } from '@pie-lib/math-rendering';
+import { wrapMath, unWrapMath, mmlToLatex, renderMath } from '@pie-lib/math-rendering';
 import debug from 'debug';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
@@ -15,22 +15,23 @@ const log = debug('@pie-lib:editable-html:plugins:math');
 const TEXT_NODE = 3;
 
 function generateAdditionalKeys(keyData = []) {
-  return keyData.map(key => ({
+  return keyData.map((key) => ({
     name: key,
     latex: key,
     write: key,
-    label: key
+    label: key,
   }));
 }
 
+// eslint-disable-next-line react/display-name
 export const CustomToolbarComp = React.memo(
-  props => {
+  (props) => {
     const { node, nodePath, onFocus, onBlur, onClick, editor } = props;
     const { pluginProps } = props || {};
     const { math } = pluginProps || {};
     const { keypadMode, customKeys, controlledKeypadMode = true } = math || {};
 
-    const onDone = latex => {
+    const onDone = (latex) => {
       const update = {
         ...node.data,
         latex
@@ -67,16 +68,14 @@ export const CustomToolbarComp = React.memo(
     const { node, pluginProps: { math: { keypadMode, controlledKeypadMode } = {} } = {} } = prev;
     const {
       node: nodeNext,
-      pluginProps: {
-        math: { keypadMode: keypadModeNext, controlledKeypadMode: controlledKeypadModeNext } = {}
-      } = {}
+      pluginProps: { math: { keypadMode: keypadModeNext, controlledKeypadMode: controlledKeypadModeNext } = {} } = {},
     } = next;
     const keypadModeChanged = keypadMode !== keypadModeNext;
     const controlledKeypadModeChanged = controlledKeypadMode !== controlledKeypadModeNext;
 
     const equal = isEqual(node, nodeNext);
     return equal && !keypadModeChanged && !controlledKeypadModeChanged;
-  }
+  },
 );
 
 CustomToolbarComp.propTypes = {
@@ -96,12 +95,17 @@ CustomToolbarComp.propTypes = {
   onToolbarDone: PropTypes.func,
   onFocus: PropTypes.func,
   onClick: PropTypes.func,
-  onBlur: PropTypes.func
+  onBlur: PropTypes.func,
 };
 
 const mathTypes = ['math', 'mathml'];
 
-export default function MathPlugin() {
+export default function MathPlugin(opts) {
+  MathPlugin.mathMlOptions = {
+    mmlOutput: opts.mmlOutput,
+    mmlEditing: opts.mmlEditing,
+  };
+
   return {
     name: 'math',
     toolbar: {
@@ -119,7 +123,7 @@ export default function MathPlugin() {
        * @param onDone {(change?: Slate.Change, finishEditing :boolea) => void} - a function to call once the toolbar
        *   has made any changes, call with the node.key and a data object.
        */
-      CustomToolbarComp
+      CustomToolbarComp,
     },
     rules: editor => {
       const { isVoid, isInline } = editor;
@@ -136,19 +140,19 @@ export default function MathPlugin() {
     },
     supports: node => mathTypes.includes(node.type),
     schema: {
-      document: { match: [{ type: 'math' }] }
+      document: { match: [{ type: 'math' }] },
     },
 
     pluginStyles: (node, parentNode, p) => {
       if (p) {
         return {
           position: 'absolute',
-          top: 'initial'
+          top: 'initial',
         };
       }
     },
 
-    renderNode: props => {
+    renderNode: (props) => {
       if (props.node.type === 'math') {
         log('[renderNode]: data:', props.node.data);
         return <MathPreview {...props} />;
@@ -167,7 +171,7 @@ export default function MathPlugin() {
           </span>
         );
       }
-    }
+    },
   };
 }
 
@@ -175,22 +179,28 @@ MathPlugin.ROUND_BRACKETS = 'round_brackets';
 MathPlugin.SQUARE_BRACKETS = 'square_brackets';
 MathPlugin.DOLLAR = 'dollar';
 MathPlugin.DOUBLE_DOLLAR = 'double_dollar';
+MathPlugin.mathMlOptions = {};
+
+MathPlugin.propTypes = {
+  attributes: PropTypes.object,
+  node: PropTypes.node,
+};
 
 export const inlineMath = () => ({
   type: 'math',
   data: {
-    latex: ''
+    latex: '',
   },
-  children: [{ text: '' }]
+  children: [{ text: '' }],
 });
 
-const htmlDecode = input => {
+const htmlDecode = (input) => {
   const doc = new DOMParser().parseFromString(input, 'text/html');
 
   return doc.documentElement.textContent;
 };
 
-const getTagName = el => {
+const getTagName = (el) => {
   return ((el && el.tagName) || '').toLowerCase();
 };
 
@@ -201,7 +211,7 @@ const getTagName = el => {
  * @param input
  * @returns {*}
  */
-const lessThanHandling = input => {
+const lessThanHandling = (input) => {
   const arrowSplit = input.split('<');
 
   // if we don't have at least 2 characters there's no point in checking
@@ -234,8 +244,7 @@ export const serialization = {
      * an inline child and the block is of type block
      * This is for legacy content only since our math rendering is valid for the core slate rules
      */
-    const hasMathChild =
-      BLOCK_TAGS[tagName] && el.childNodes.length === 1 && getTagName(el.firstChild) === 'math';
+    const hasMathChild = BLOCK_TAGS[tagName] && el.childNodes.length === 1 && getTagName(el.firstChild) === 'math';
     log('[deserialize] name: ', tagName);
 
     /**
@@ -244,11 +253,25 @@ export const serialization = {
     if (tagName === 'math' || (el.dataset && el.dataset.type === 'mathml') || hasMathChild) {
       const newHtml = hasMathChild ? el.innerHTML : el.outerHTML;
 
+      if (MathPlugin.mathMlOptions.mmlEditing) {
+        const htmlToUse = mmlToLatex(newHtml);
+        const latex = htmlDecode(htmlToUse);
+        const { unwrapped, wrapType } = unWrapMath(latex);
+
+        return jsx('element', {
+          type: 'math',
+          data: {
+            latex: unwrapped,
+            wrapper: wrapType,
+          },
+        });
+      }
+
       return jsx('element', {
         type: 'mathml',
         data: {
-          html: newHtml
-        }
+          html: newHtml,
+        },
       });
     }
 
@@ -271,8 +294,8 @@ export const serialization = {
         type: 'math',
         data: {
           latex: unwrapped,
-          wrapper: wrapType
-        }
+          wrapper: wrapType,
+        },
       });
     }
   },
@@ -281,6 +304,26 @@ export const serialization = {
       const { latex, wrapper } = object.data || {};
       log('[serialize] latex: ', latex);
       const decoded = htmlDecode(lessThanHandling(latex));
+
+      if (MathPlugin.mathMlOptions.mmlOutput) {
+        const res = renderMath(`<span data-latex="" data-raw="${decoded}">${wrapMath(decoded, wrapper)}</span>`);
+        const newLatex = mmlToLatex(res);
+
+        // we need to remove all the spaces from the latex to be able to compare it
+        const strippedL = latex.replace(/\s/g, '');
+        const strippedNewL = newLatex.replace(/\s/g, '');
+
+        // we check if the latex keeps his form after being converted to mathml and back to latex
+        // if it does we can safely convert it to mathml
+        if (isEqual(strippedL, strippedNewL)) {
+          return <span data-type="mathml" dangerouslySetInnerHTML={{ __html: res }} />;
+        } else {
+          // if it doesn't we keep the latex version
+          console.log('This latex can not be safely converted to mathml:', latex, 'so we will keep the latex version!!!');
+          console.warn('This latex can not be safely converted to mathml:', latex, 'so we will keep the latex version!!!');
+        }
+      }
+
       return (
         <span data-latex="" data-raw={decoded}>
           {wrapMath(decoded, wrapper)}
@@ -296,5 +339,5 @@ export const serialization = {
 
       return <span data-type="mathml" dangerouslySetInnerHTML={{ __html: html }} />;
     }
-  }
+  },
 };

package/src/plugins/media/index.jsx

@@ -18,10 +18,10 @@ const log = debug('@pie-lib:editable-html:plugins:image');
 const removeDialogs = () => {
   const prevDialogs = document.querySelectorAll('.insert-media-dialog');
 
-  prevDialogs.forEach(s => s.remove());
+  prevDialogs.forEach((s) => s.remove());
 };
 
-export const insertDialog = props => {
+export const insertDialog = (props) => {
   const newEl = document.createElement('div');
   const { type, callback, opts, ...rest } = props;
   const initialBodyOverflow = document.body.style.overflow;
@@ -95,9 +95,9 @@ export default function MediaPlugin(type, opts) {
           starts: undefined,
           src: undefined,
           url: undefined,
-          width: undefined
+          width: undefined,
         },
-        children: [{ text: '' }]
+        children: [{ text: '' }],
       };
 
       editor.insertNode(inline);
@@ -323,11 +323,11 @@ export const serialization = {
       'data-ends': ends,
       'data-starts': starts,
       'data-title': title,
-      'data-url': url
+      'data-url': url,
     };
     const props = {
       ...style,
-      src
+      src,
     };
 
     if (tag === 'audio') {
@@ -349,5 +349,5 @@ export const serialization = {
         {...props}
       />
     );
-  }
+  },
 };

package/src/plugins/media/media-dialog.js

@@ -18,7 +18,7 @@ import ActionDelete from '@material-ui/icons/Delete';
 
 const log = debug('@pie-lib:editable-html:plugins:media:dialog');
 
-const matchYoutubeUrl = url => {
+const matchYoutubeUrl = (url) => {
   if (!url) {
     return false;
   }
@@ -30,13 +30,13 @@ const matchYoutubeUrl = url => {
   return false;
 };
 
-const matchVimeoUrl = url =>
+const matchVimeoUrl = (url) =>
   url &&
   /(http|https)?:\/\/(www\.)?(player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|)(video\/)?(\d+)(?:|\/\?)/.test(
-    url
+    url,
   );
 
-const matchSoundCloudUrl = url => {
+const matchSoundCloudUrl = (url) => {
   if (!url) {
     return false;
   }
@@ -45,12 +45,12 @@ const matchSoundCloudUrl = url => {
   return url.match(regexp) && url.match(regexp)[2];
 };
 
-const makeApiRequest = url => {
-  return new Promise(resolve => {
+const makeApiRequest = (url) => {
+  return new Promise((resolve) => {
     try {
       fetch(`https://soundcloud.com/oembed?format=json&url=${url}`)
-        .then(response => response.json())
-        .then(json => {
+        .then((response) => response.json())
+        .then((json) => {
           const d = document.createElement('div');
 
           d.innerHTML = json.html;
@@ -59,7 +59,7 @@ const makeApiRequest = url => {
 
           resolve(iframe.src);
         })
-        .catch(err => {
+        .catch((err) => {
           resolve('');
           log(err);
         });
@@ -71,7 +71,7 @@ const makeApiRequest = url => {
 
 const typeMap = {
   video: 'Video',
-  audio: 'Audio'
+  audio: 'Audio',
 };
 
 export class MediaDialog extends React.Component {
@@ -83,7 +83,7 @@ export class MediaDialog extends React.Component {
     handleClose: PropTypes.func,
     uploadSoundSupport: PropTypes.shape({
       add: PropTypes.func,
-      delete: PropTypes.func
+      delete: PropTypes.func,
     }),
     type: PropTypes.string,
     src: PropTypes.string,
@@ -92,7 +92,7 @@ export class MediaDialog extends React.Component {
     starts: PropTypes.number,
     ends: PropTypes.number,
     height: PropTypes.number,
-    width: PropTypes.number
+    width: PropTypes.number,
   };
 
   constructor(props) {
@@ -114,8 +114,8 @@ export class MediaDialog extends React.Component {
       fileUpload: {
         loading: false,
         url: '',
-        error: null
-      }
+        error: null,
+      },
     };
   }
 
@@ -123,8 +123,8 @@ export class MediaDialog extends React.Component {
     if (this.props.url) {
       this.urlChange({
         target: {
-          value: this.props.url
-        }
+          value: this.props.url,
+        },
       });
     }
   }
@@ -171,20 +171,20 @@ export class MediaDialog extends React.Component {
     this.setState({ formattedUrl: null, updating: true }, callback);
   };
 
-  handleStateChange = newState => this.setState(newState, this.formatUrl);
+  handleStateChange = (newState) => this.setState(newState, this.formatUrl);
 
-  urlChange = e => {
+  urlChange = (e) => {
     const { value } = e.target || {};
     const { type } = this.props;
 
     if (type && type === 'audio') {
       if (matchSoundCloudUrl(value)) {
         makeApiRequest(value)
-          .then(urlToUse => {
+          .then((urlToUse) => {
             this.handleStateChange({
               urlToUse,
               invalid: !urlToUse,
-              url: value || ''
+              url: value || '',
             });
           })
           .catch(log);
@@ -203,7 +203,7 @@ export class MediaDialog extends React.Component {
         this.handleStateChange({
           urlToUse,
           url: value || '',
-          invalid: false
+          invalid: false,
         });
 
         return;
@@ -219,7 +219,7 @@ export class MediaDialog extends React.Component {
           urlToUse,
           url: value || '',
           ends: null,
-          invalid: false
+          invalid: false,
         });
 
         return;
@@ -229,13 +229,13 @@ export class MediaDialog extends React.Component {
     this.handleStateChange({
       urlToUse: '',
       url: '',
-      invalid: true
+      invalid: true,
     });
   };
 
-  changeHandler = type => e => this.handleStateChange({ [type]: e.target.value });
+  changeHandler = (type) => (e) => this.handleStateChange({ [type]: e.target.value });
 
-  handleDone = val => {
+  handleDone = (val) => {
     const { handleClose } = this.props;
     const { tabValue, fileUpload } = this.state;
     const isInsertURL = tabValue === 0;
@@ -257,25 +257,25 @@ export class MediaDialog extends React.Component {
         width,
         url,
         urlToUse,
-        src: formattedUrl
+        src: formattedUrl,
       });
     } else {
       handleClose(val, {
         tag: 'audio',
-        src: fileUpload.url
+        src: fileUpload.url,
       });
     }
   };
 
-  handleUploadFile = async e => {
+  handleUploadFile = async (e) => {
     e.preventDefault();
 
     this.setState({
       fileUpload: {
         ...this.state.fileUpload,
         error: null,
-        loading: true
-      }
+        loading: true,
+      },
     });
 
     const fileChosen = e.target.files[0];
@@ -288,8 +288,8 @@ export class MediaDialog extends React.Component {
       this.setState({
         fileUpload: {
           ...this.state.fileUpload,
-          url: dataURL
-        }
+          url: dataURL,
+        },
       });
     };
     reader.readAsDataURL(fileChosen);
@@ -305,32 +305,32 @@ export class MediaDialog extends React.Component {
             fileUpload: {
               ...this.state.fileUpload,
               loading: false,
-              error: err
-            }
+              error: err,
+            },
           });
         } else {
           this.setState({
             fileUpload: {
               ...this.state.fileUpload,
               loading: false,
-              url: src
-            }
+              url: src,
+            },
           });
         }
-      }
+      },
     });
   };
 
   handleRemoveFile = async () => {
-    this.props.uploadSoundSupport.delete(this.state.fileUpload.url, err => {
+    this.props.uploadSoundSupport.delete(this.state.fileUpload.url, (err) => {
       if (err) {
         //eslint-disable-next-line
         console.log(err);
         this.setState({
           fileUpload: {
             ...this.state.fileUpload,
-            error: err
-          }
+            error: err,
+          },
         });
       }
     });
@@ -340,36 +340,23 @@ export class MediaDialog extends React.Component {
       fileUpload: {
         ...this.state.fileUpload,
         loading: false,
-        url: ''
-      }
+        url: '',
+      },
     });
   };
 
   render() {
     const { classes, open, disablePortal, type, edit, uploadSoundSupport } = this.props;
-    const {
-      ends,
-      height,
-      invalid,
-      starts,
-      width,
-      url,
-      formattedUrl,
-      updating,
-      tabValue,
-      fileUpload
-    } = this.state;
+    const { ends, height, invalid, starts, width, url, formattedUrl, updating, tabValue, fileUpload } = this.state;
     const isYoutube = matchYoutubeUrl(url);
     const isInsertURL = tabValue === 0;
     const isUploadMedia = tabValue === 1;
-    const submitIsDisabled = isInsertURL
-      ? invalid || url === null || url === undefined
-      : !fileUpload.url;
+    const submitIsDisabled = isInsertURL ? invalid || url === null || url === undefined : !fileUpload.url;
 
     return (
       <Dialog
         classes={{
-          paper: classes.paper
+          paper: classes.paper,
         }}
         disablePortal={disablePortal}
         open={open}
@@ -387,9 +374,7 @@ export class MediaDialog extends React.Component {
                   this.setState({ tabValue: value });
                 }}
               >
-                <MuiTab
-                  label={type === 'video' ? 'Insert YouTube or Vimeo URL' : 'Insert SoundCloud URL'}
-                />
+                <MuiTab label={type === 'video' ? 'Insert YouTube or Vimeo URL' : 'Insert SoundCloud URL'} />
                 {uploadSoundSupport?.add && uploadSoundSupport?.delete && type !== 'video' ? (
                   <MuiTab label="Upload file" />
                 ) : null}
@@ -413,7 +398,7 @@ export class MediaDialog extends React.Component {
                 {type === 'video' && (
                   <DialogContent
                     classes={{
-                      root: classes.properties
+                      root: classes.properties,
                     }}
                   >
                     <DialogContentText>Video Properties</DialogContentText>
@@ -453,7 +438,7 @@ export class MediaDialog extends React.Component {
                   <React.Fragment>
                     <DialogContent
                       classes={{
-                        root: classes.properties
+                        root: classes.properties,
                       }}
                     >
                       <TextField
@@ -492,25 +477,14 @@ export class MediaDialog extends React.Component {
                         <audio controls="controls">
                           <source type="audio/mp3" src={fileUpload.url} />
                         </audio>
-                        <IconButton
-                          aria-label="delete"
-                          className={classes.deleteIcon}
-                          onClick={this.handleRemoveFile}
-                        >
+                        <IconButton aria-label="delete" className={classes.deleteIcon} onClick={this.handleRemoveFile}>
                           <ActionDelete />
                         </IconButton>
                       </div>
-                      {fileUpload.loading ? (
-                        <Typography variant="subheading">Loading...</Typography>
-                      ) : null}
+                      {fileUpload.loading ? <Typography variant="subheading">Loading...</Typography> : null}
                     </>
                   ) : !fileUpload.loading ? (
-                    <input
-                      accept="audio/*"
-                      className={classes.input}
-                      onChange={this.handleUploadFile}
-                      type="file"
-                    />
+                    <input accept="audio/*" className={classes.input} onChange={this.handleUploadFile} type="file" />
                   ) : null}
                   {!!fileUpload.error && (
                     <Typography className={classes.error} variant="caption">
@@ -535,35 +509,35 @@ export class MediaDialog extends React.Component {
   }
 }
 
-const styles = () => ({
+const styles = (theme) => ({
   paper: {
-    minWidth: '500px'
+    minWidth: '500px',
   },
   properties: {
-    padding: 0
+    padding: 0,
   },
   row: {
     display: 'flex',
-    flexDirection: 'space-between'
+    flexDirection: 'space-between',
   },
   rowItem: {
-    marginRight: '12px',
-    cursor: 'pointer'
+    marginRight: theme.spacing.unit * 1.5,
+    cursor: 'pointer',
   },
   active: {
     color: color.primary(),
-    borderBottom: `2px solid ${color.primary()}`
+    borderBottom: `2px solid ${color.primary()}`,
   },
   uploadInput: {
-    marginTop: '12px'
+    marginTop: theme.spacing.unit * 1.5,
   },
   error: {
-    marginTop: '12px',
-    color: 'red'
+    marginTop: theme.spacing.unit * 1.5,
+    color: theme.palette.error.main,
   },
   deleteIcon: {
-    marginLeft: '12px'
-  }
+    marginLeft: theme.spacing.unit * 1.5,
+  },
 });
 
 export default withStyles(styles)(MediaDialog);