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

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

@@ -102,15 +102,14 @@ export class MediaDialog extends React.Component {
 
     this.state = {
       ends: ends || 0,
-      url: url || '',
-      urlToUse: urlToUse || '',
-      formattedUrl: src || '',
+      url: url,
+      urlToUse: urlToUse,
+      formattedUrl: src,
       height: height || 315,
       invalid: false,
       starts: starts || 0,
       width: width || 560,
       tabValue: 0,
-      updating: false,
       fileUpload: {
         loading: false,
         url: '',
@@ -133,7 +132,7 @@ export class MediaDialog extends React.Component {
     const { url, urlToUse, starts, ends } = this.state;
     const isYoutube = matchYoutubeUrl(url);
     const isVimeo = matchVimeoUrl(url);
-    let formattedUrl = urlToUse || '';
+    let formattedUrl = urlToUse;
 
     if ((isYoutube || isVimeo) && urlToUse) {
       const params = [];
@@ -184,7 +183,7 @@ export class MediaDialog extends React.Component {
             this.handleStateChange({
               urlToUse,
               invalid: !urlToUse,
-              url: value || '',
+              url: value,
             });
           })
           .catch(log);
@@ -202,7 +201,7 @@ export class MediaDialog extends React.Component {
 
         this.handleStateChange({
           urlToUse,
-          url: value || '',
+          url: value,
           invalid: false,
         });
 
@@ -217,7 +216,7 @@ export class MediaDialog extends React.Component {
 
         this.handleStateChange({
           urlToUse,
-          url: value || '',
+          url: value,
           ends: null,
           invalid: false,
         });
@@ -227,8 +226,8 @@ export class MediaDialog extends React.Component {
     }
 
     this.handleStateChange({
-      urlToUse: '',
-      url: '',
+      urlToUse: null,
+      url: null,
       invalid: true,
     });
   };

package/src/plugins/media/media-wrapper.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { makeStyles } from '@material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
-const useStyles = makeStyles(() => ({
+const useStyles = withStyles(() => ({
   root: {
     position: 'relative',
   },
@@ -13,33 +13,31 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const MediaWrapper = React.forwardRef((props, ref) => {
-  const { children, width, attributes, ...rest } = props;
-  const classes = useStyles(props);
+class MediaWrapper extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object,
+    children: PropTypes.array,
+    editor: PropTypes.bool,
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  };
 
-  return (
-    <span
-      className={classNames(classes.root, {
-        [classes.editor]: editor,
-      })}
-      ref={ref}
-      {...rest}
-      {...attributes}
-      contentEditable={false}
-      style={{
-        width: width || 300,
-      }}
-    >
-      {children}
-    </span>
-  );
-});
+  render() {
+    const { editor, classes, children, width, ...rest } = this.props;
 
-MediaWrapper.propTypes = {
-  attributes: PropTypes.object,
-  classes: PropTypes.object,
-  children: PropTypes.array,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-};
+    return (
+      <span
+        className={classNames(classes.root, {
+          [classes.editor]: editor,
+        })}
+        {...rest}
+        style={{
+          width: width || 300,
+        }}
+      >
+        {children}
+      </span>
+    );
+  }
+}
 
-export default MediaWrapper;
+export default useStyles(MediaWrapper);

package/src/plugins/respArea/drag-in-the-blank/index.jsx

@@ -9,7 +9,7 @@ export const onValueChange = (nodeProps, n, value) => {
   change.setNodeByKey(n.key, {
     data: {
       ...value,
-      index: n.data.index,
+      index: n.data.get('index'),
     },
   });
 
@@ -21,11 +21,11 @@ export const onValueChange = (nodeProps, n, value) => {
 export const onRemoveResponse = (nodeProps, value) => {
   const val = nodeProps.editor.value;
   const change = val.change();
-  const dragInTheBlank = val.document.findDescendant((n) => n.data && n.data.index === value.index);
+  const dragInTheBlank = val.document.findDescendant((n) => n.data && n.data.get('index') === value.index);
 
   change.setNodeByKey(dragInTheBlank.key, {
     data: {
-      index: dragInTheBlank.data.index,
+      index: dragInTheBlank.data.get('index'),
     },
   });
 
@@ -35,7 +35,7 @@ export const onRemoveResponse = (nodeProps, value) => {
 };
 
 const DragDrop = (props) => {
-  const { attributes, children, data, n, nodeProps, opts } = props;
+  const { attributes, data, n, nodeProps, opts } = props;
   const { inTable } = data;
 
   return (
@@ -60,7 +60,6 @@ const DragDrop = (props) => {
         removeResponse={(value) => onRemoveResponse(nodeProps, value)}
       >
         {nodeProps.children}
-        {children}
       </DragDropTile>
     </span>
   );

package/src/plugins/respArea/explicit-constructed-response/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const ExplicitConstructedResponse = (props) => {
-  const { attributes, children, value, error } = props;
+  const { attributes, value, error } = props;
 
   return (
     <span
@@ -33,7 +33,6 @@ const ExplicitConstructedResponse = (props) => {
           __html: value || '<div>&nbsp;</div>',
         }}
       />
-      {children}
     </span>
   );
 };

package/src/plugins/respArea/index.jsx

@@ -1,11 +1,7 @@
 import React from 'react';
-import { Node as SlateNode } from 'slate';
-import { jsx } from 'slate-hyperscript';
 import debug from 'debug';
-
-import cloneDeep from 'lodash/cloneDeep';
-import isEqual from 'lodash/isEqual';
 import isUndefined from 'lodash/isUndefined';
+
 import InlineDropdown from './inline-dropdown';
 import DragInTheBlank from './drag-in-the-blank';
 import ExplicitConstructedResponse from './explicit-constructed-response';
@@ -30,30 +26,24 @@ export default function ResponseAreaPlugin(opts) {
     buttonStyles: {
       margin: '0 20px 0 auto',
     },
-    onClick: (editor) => {
+    onClick: (value, onChange) => {
       log('[toolbar] onClick');
-      const currentRespAreaList = [];
-      const descendants = Array.from(SlateNode.descendants(editor, { reverse: true })).map(([d]) => d);
-
-      descendants.forEach((d) => {
-        if (isOfCurrentType(d)) {
-          currentRespAreaList.push(d);
-        }
-      });
+      const change = value.change();
+      const currentRespAreaList = change.value.document.filterDescendants(isOfCurrentType);
 
-      if (currentRespAreaList.length >= opts.maxResponseAreas) {
+      if (currentRespAreaList.size >= opts.maxResponseAreas) {
         return;
       }
 
       const type = opts.type.replace(/-/g, '_');
       const prevIndex = lastIndexMap[type];
-      const newIndex = !prevIndex ? 0 : prevIndex + 1;
+      const newIndex = prevIndex === 0 ? prevIndex : prevIndex + 1;
       const newInline = getDefaultElement(opts, newIndex);
 
       lastIndexMap[type] += 1;
 
       if (newInline) {
-        /*        if (change.value.selection.startKey || change.value.selection.endKey) {
+        if (change.value.selection.startKey || change.value.selection.endKey) {
           change.insertInline(newInline);
         } else {
           // If the markup is empty and there's no focus
@@ -79,76 +69,19 @@ export default function ResponseAreaPlugin(opts) {
           if (nextText) {
             change.moveFocusTo(nextText.key, 0).moveAnchorTo(nextText.key, 0);
           }
-        }*/
-        editor.insertNode(newInline);
+        }
+
+        onChange(change);
       }
     },
     customToolbar: opts.respAreaToolbar,
+    supports: (node) => node.object === 'inline' && elTypesArray.indexOf(node.type) >= 0,
     showDone: false,
   };
 
   return {
     name: 'response_area',
     toolbar,
-    rules: (editor) => {
-      const { isVoid, isInline, onChange } = editor;
-
-      editor.isVoid = (element) => {
-        return elTypesArray.includes(element.type) ? true : isVoid(element);
-      };
-
-      editor.isInline = (element) => {
-        return elTypesArray.includes(element.type) ? true : isInline(element);
-      };
-
-      let oldEditor = cloneDeep(editor);
-
-      editor.onChange = (options) => {
-        const descendants = Array.from(SlateNode.descendants(editor, { reverse: true })).map(([d]) => d);
-        const type = opts.type.replace(/-/g, '_');
-
-        if (isUndefined(lastIndexMap[type])) {
-          lastIndexMap[type] = 0;
-
-          descendants.forEach((d) => {
-            if (d.type === type) {
-              const newIndex = parseInt(d.data.index, 10);
-
-              if (newIndex > lastIndexMap[type]) {
-                lastIndexMap[type] = newIndex;
-              }
-            }
-          });
-        }
-
-        if (isEqual(editor, oldEditor)) {
-          return;
-        }
-
-        const oldDescendants = Array.from(SlateNode.descendants(oldEditor, { reverse: true })).map(([d]) => d);
-        const currentRespAreaList = descendants.filter(isOfCurrentType);
-        const oldRespAreaList = oldDescendants.filter(isOfCurrentType);
-
-        toolbar.disabled = currentRespAreaList.length >= opts.maxResponseAreas;
-
-        const arrayToFilter =
-          oldRespAreaList.length > currentRespAreaList.length ? oldRespAreaList : currentRespAreaList;
-        const arrayToUseForFilter = arrayToFilter === oldRespAreaList ? currentRespAreaList : oldRespAreaList;
-
-        const elementsWithChangedStatus = arrayToFilter.filter(
-          (d) => !arrayToUseForFilter.find((e) => e.data.index === d.data.index),
-        );
-
-        if (elementsWithChangedStatus.length && oldRespAreaList.length > currentRespAreaList.length) {
-          opts.onHandleAreaChange(elementsWithChangedStatus);
-        }
-
-        oldEditor = cloneDeep(editor);
-        onChange(options);
-      };
-
-      return editor;
-    },
     filterPlugins: (node, plugins) => {
       if (node.type === 'explicit_constructed_response' || node.type === 'drag_in_the_blank') {
         return [];
@@ -156,22 +89,18 @@ export default function ResponseAreaPlugin(opts) {
 
       return plugins.filter((p) => p.name !== 'response_area');
     },
-    deleteNode: (e, node, nodePath, editor, onChange) => {
+    deleteNode: (e, node, value, onChange) => {
       e.preventDefault();
 
-      editor.apply({
-        type: 'remove_node',
-        path: nodePath,
-      });
+      const change = value.change().removeNodeByKey(node.key);
 
-      onChange(editor);
+      onChange(change);
     },
-    supports: (node) => elTypesArray.indexOf(node.type) >= 0,
     renderNode(props) {
-      const { attributes, node } = props;
+      const { attributes, node: n } = props;
 
-      if (node.type === 'explicit_constructed_response') {
-        const { data } = node;
+      if (n.type === 'explicit_constructed_response') {
+        const data = n.data.toJSON();
         let error;
 
         if (opts.error) {
@@ -183,30 +112,61 @@ export default function ResponseAreaPlugin(opts) {
             attributes={attributes}
             value={data.value}
             error={error && error[data.index] && error[data.index][0]}
-          >
-            {props.children}
-          </ExplicitConstructedResponse>
+          />
         );
       }
 
-      if (node.type === 'drag_in_the_blank') {
-        const { data } = node;
+      if (n.type === 'drag_in_the_blank') {
+        const data = n.data.toJSON();
 
-        return (
-          <DragInTheBlank attributes={attributes} data={data} n={node} nodeProps={props} opts={opts}>
-            {props.children}
-          </DragInTheBlank>
-        );
+        return <DragInTheBlank attributes={attributes} data={data} n={n} nodeProps={props} opts={opts} />;
       }
 
-      if (node.type === 'inline_dropdown') {
-        const { data } = node;
+      if (n.type === 'inline_dropdown') {
+        const data = n.data.toJSON();
 
-        return (
-          <InlineDropdown attributes={attributes} selectedItem={data.value}>
-            {props.children}
-          </InlineDropdown>
-        );
+        return <InlineDropdown attributes={attributes} selectedItem={data.value} />;
+      }
+    },
+    onChange(change, editor) {
+      const type = opts.type.replace(/-/g, '_');
+
+      if (isUndefined(lastIndexMap[type])) {
+        lastIndexMap[type] = 0;
+
+        change.value.document.forEachDescendant((d) => {
+          if (d.type === type) {
+            const newIndex = parseInt(d.data.get('index'), 10);
+
+            if (newIndex > lastIndexMap[type]) {
+              lastIndexMap[type] = newIndex;
+            }
+          }
+        });
+      }
+
+      if (!editor.value) {
+        return;
+      }
+
+      const currentRespAreaList = change.value.document.filterDescendants(isOfCurrentType);
+      const oldRespAreaList = editor.value.document.filterDescendants(isOfCurrentType);
+
+      if (currentRespAreaList.size >= opts.maxResponseAreas) {
+        toolbar.disabled = true;
+      } else {
+        toolbar.disabled = false;
+      }
+
+      const arrayToFilter = oldRespAreaList.size > currentRespAreaList.size ? oldRespAreaList : currentRespAreaList;
+      const arrayToUseForFilter = arrayToFilter === oldRespAreaList ? currentRespAreaList : oldRespAreaList;
+
+      const elementsWithChangedStatus = arrayToFilter.filter(
+        (d) => !arrayToUseForFilter.find((e) => e.data.get('index') === d.data.get('index')),
+      );
+
+      if (elementsWithChangedStatus.size && oldRespAreaList.size > currentRespAreaList.size) {
+        opts.onHandleAreaChange(elementsWithChangedStatus);
       }
     },
     onDrop(event, change, editor) {
@@ -226,47 +186,57 @@ export const serialization = {
 
     switch (type) {
       case 'inline_dropdown':
-        return jsx('element', {
+        return {
+          object: 'inline',
           type: 'inline_dropdown',
+          isVoid: true,
           data: {
             index: el.dataset.index,
             value: el.dataset.value,
           },
-        });
+        };
       case 'explicit_constructed_response':
-        return jsx('element', {
+        return {
+          object: 'inline',
           type: 'explicit_constructed_response',
+          isVoid: true,
           data: {
             index: el.dataset.index,
             value: el.dataset.value,
           },
-        });
+        };
       case 'drag_in_the_blank':
-        return jsx('element', {
+        return {
+          object: 'inline',
           type: 'drag_in_the_blank',
+          isVoid: true,
           data: {
             index: el.dataset.index,
             id: el.dataset.id,
             value: el.dataset.value,
             inTable: el.dataset.inTable,
           },
-        });
+        };
     }
   },
   serialize(object) {
+    if (object.object !== 'inline') {
+      return;
+    }
+
     switch (object.type) {
       case 'inline_dropdown': {
-        const data = object.data;
+        const data = object.data.toJSON();
 
         return <span data-type="inline_dropdown" data-index={data.index} data-value={data.value} />;
       }
       case 'explicit_constructed_response': {
-        const data = object.data;
+        const data = object.data.toJSON();
 
         return <span data-type="explicit_constructed_response" data-index={data.index} data-value={data.value} />;
       }
       case 'drag_in_the_blank': {
-        const data = object.data;
+        const data = object.data.toJSON();
 
         return (
           <span

package/src/plugins/respArea/inline-dropdown/index.jsx

@@ -2,14 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Chevron } from '../icons';
 
-const InlineDropdown = ({ attributes, children, selectedItem }) => {
+const InlineDropdown = ({ attributes, selectedItem }) => {
+  // TODO: Investigate
   // Needed because items with values inside have different positioning for some reason
   const html = selectedItem || '<div>&nbsp</div>';
 
   return (
     <span
       {...attributes}
-      contentEditable={false}
       style={{
         display: 'inline-flex',
         height: '50px',
@@ -29,7 +29,6 @@ const InlineDropdown = ({ attributes, children, selectedItem }) => {
           position: 'relative',
         }}
       >
-        {children}
         <div
           style={{
             flex: 1,

package/src/plugins/respArea/utils.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Inline } from 'slate';
 import Snackbar from '@material-ui/core/Snackbar';
 
 export const isNumber = (val) => !isNaN(parseFloat(val)) && isFinite(val);
@@ -33,31 +34,35 @@ export const insertSnackBar = (message) => {
   }, 2000);
 };
 
-export const defaultECR = (index) => ({
-  type: 'explicit_constructed_response',
-  children: [{ text: '' }],
-  data: {
-    index,
-  },
-});
+export const defaultECR = (index) =>
+  Inline.create({
+    type: 'explicit_constructed_response',
+    isVoid: true,
+    data: {
+      index,
+    },
+  });
 
-export const defaultDIB = (opts, index) => ({
-  type: 'drag_in_the_blank',
-  children: [{ text: '' }],
-  data: {
-    index,
-    duplicates: opts.options.duplicates,
-    value: null,
-  },
-});
+export const defaultDIB = (opts, index) =>
+  Inline.create({
+    type: 'drag_in_the_blank',
+    isVoid: true,
+    data: {
+      index,
+      duplicates: opts.options.duplicates,
+      value: null,
+    },
+  });
 
-export const defaultIDD = (index) => ({
-  type: 'inline_dropdown',
-  children: [{ text: '' }],
-  data: {
-    index,
-  },
-});
+export const defaultIDD = (index) =>
+  Inline.create({
+    object: 'inline',
+    type: 'inline_dropdown',
+    isVoid: true,
+    data: {
+      index,
+    },
+  });
 
 export const getDefaultElement = (opts, index) => {
   switch (opts.type) {