@pie-lib/editable-html 9.5.13 → 10.0.0-beta.1

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

@@ -9,8 +9,8 @@ export const onValueChange = (nodeProps, n, value) => {
   change.setNodeByKey(n.key, {
     data: {
       ...value,
-      index: n.data.get('index'),
-    },
+      index: n.data.get('index')
+    }
   });
 
   nodeProps.editor.props.onChange(change, () => {
@@ -21,12 +21,14 @@ 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.get('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.get('index'),
-    },
+      index: dragInTheBlank.data.get('index')
+    }
   });
 
   nodeProps.editor.props.onChange(change, () => {
@@ -34,8 +36,8 @@ export const onRemoveResponse = (nodeProps, value) => {
   });
 };
 
-const DragDrop = (props) => {
-  const { attributes, data, n, nodeProps, opts } = props;
+const DragDrop = props => {
+  const { attributes, children, data, n, nodeProps, opts } = props;
   const { inTable } = data;
 
   return (
@@ -47,7 +49,7 @@ const DragDrop = (props) => {
         minWidth: '178px',
         position: 'relative',
         margin: inTable ? '10px' : '0 10px',
-        cursor: 'pointer',
+        cursor: 'pointer'
       }}
     >
       <DragDropTile
@@ -56,10 +58,11 @@ const DragDrop = (props) => {
         targetId="0"
         value={data}
         duplicates={opts.options.duplicates}
-        onChange={(value) => onValueChange(nodeProps, n, value)}
-        removeResponse={(value) => onRemoveResponse(nodeProps, value)}
+        onChange={value => onValueChange(nodeProps, n, value)}
+        removeResponse={value => onRemoveResponse(nodeProps, value)}
       >
         {nodeProps.children}
+        {children}
       </DragDropTile>
     </span>
   );
@@ -70,7 +73,7 @@ DragDrop.propTypes = {
   data: PropTypes.object,
   n: PropTypes.object,
   nodeProps: PropTypes.object,
-  opts: PropTypes.object,
+  opts: PropTypes.object
 };
 
 export default DragDrop;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const ExplicitConstructedResponse = (props) => {
-  const { attributes, value, error } = props;
+const ExplicitConstructedResponse = props => {
+  const { attributes, children, value, error } = props;
 
   return (
     <span
@@ -13,7 +13,7 @@ const ExplicitConstructedResponse = (props) => {
         minWidth: '178px',
         position: 'relative',
         margin: '0 5px',
-        cursor: 'pointer',
+        cursor: 'pointer'
       }}
     >
       <div
@@ -27,19 +27,20 @@ const ExplicitConstructedResponse = (props) => {
           boxSizing: 'border-box',
           borderRadius: '3px',
           overflow: 'hidden',
-          padding: '8px',
+          padding: '8px'
         }}
         dangerouslySetInnerHTML={{
-          __html: value || '<div>&nbsp;</div>',
+          __html: value || '<div>&nbsp;</div>'
         }}
       />
+      {children}
     </span>
   );
 };
 
 ExplicitConstructedResponse.propTypes = {
   attributes: PropTypes.object,
-  value: PropTypes.string,
+  value: PropTypes.string
 };
 
 export default ExplicitConstructedResponse;

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

@@ -4,23 +4,20 @@ import ChevronRight from '@material-ui/icons/ChevronRight';
 import MoreVert from '@material-ui/icons/MoreVert';
 import { withStyles } from '@material-ui/core/styles';
 
-const getRotate = (direction) => {
+const getRotate = direction => {
   switch (direction) {
     case 'down':
       return 90;
-
     case 'up':
       return -90;
-
     case 'left':
       return 180;
-
     default:
       return 0;
   }
 };
 
-export const Chevron = (props) => {
+export const Chevron = props => {
   const { direction, style } = props;
   const rotate = getRotate(direction);
 
@@ -28,7 +25,7 @@ export const Chevron = (props) => {
     <ChevronRight
       style={{
         transform: `rotate(${rotate}deg)`,
-        ...style,
+        ...style
       }}
     />
   );
@@ -36,7 +33,7 @@ export const Chevron = (props) => {
 
 Chevron.propTypes = {
   direction: PropTypes.string,
-  style: PropTypes.object,
+  style: PropTypes.object
 };
 
 export const GripIcon = ({ style }) => {
@@ -44,7 +41,7 @@ export const GripIcon = ({ style }) => {
     <span style={style}>
       <MoreVert
         style={{
-          margin: '0 -16px',
+          margin: '0 -16px'
         }}
       />
       <MoreVert />
@@ -53,19 +50,19 @@ export const GripIcon = ({ style }) => {
 };
 
 GripIcon.propTypes = {
-  style: PropTypes.object,
+  style: PropTypes.object
 };
 
-export const ToolbarIcon = withStyles((theme) => ({
+export const ToolbarIcon = withStyles({
   icon: {
     fontFamily: 'Cerebri Sans !important',
-    fontSize: theme.typography.fontSize,
+    fontSize: '14px',
     fontWeight: 'bold',
     lineHeight: '14px',
     position: 'relative',
     top: '7px',
     width: '110px',
     height: '28px',
-    whiteSpace: 'nowrap',
-  },
-}))(({ classes }) => <div className={classes.icon}>+ Response Area</div>);
+    whiteSpace: 'nowrap'
+  }
+})(({ classes }) => <div className={classes.icon}>+ Response Area</div>);

package/src/plugins/respArea/index.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
+import { Node as SlateNode } from 'slate';
+import { jsx } from 'slate-hyperscript';
 import debug from 'debug';
-import isUndefined from 'lodash/isUndefined';
 
+import isUndefined from 'lodash/isUndefined';
 import InlineDropdown from './inline-dropdown';
 import DragInTheBlank from './drag-in-the-blank';
 import ExplicitConstructedResponse from './explicit-constructed-response';
@@ -14,36 +16,44 @@ const lastIndexMap = {};
 const elTypesMap = {
   'inline-dropdown': 'inline_dropdown',
   'explicit-constructed-response': 'explicit_constructed_response',
-  'drag-in-the-blank': 'drag_in_the_blank',
+  'drag-in-the-blank': 'drag_in_the_blank'
 };
 const elTypesArray = Object.values(elTypesMap);
 
 export default function ResponseAreaPlugin(opts) {
-  const isOfCurrentType = (d) => d.type === opts.type || d.type === elTypesMap[opts.type];
+  const isOfCurrentType = d => d.type === opts.type || d.type === elTypesMap[opts.type];
 
   const toolbar = {
     icon: <ToolbarIcon />,
     buttonStyles: {
-      margin: '0 20px 0 auto',
+      margin: '0 20px 0 auto'
     },
-    onClick: (value, onChange) => {
+    onClick: editor => {
       log('[toolbar] onClick');
-      const change = value.change();
-      const currentRespAreaList = change.value.document.filterDescendants(isOfCurrentType);
+      const currentRespAreaList = [];
+      const descendants = SlateNode.descendants(editor, {
+        reverse: true
+      });
+
+      for (const [descendant, descendantPath] of descendants) {
+        if (isOfCurrentType(descendant, descendantPath)) {
+          currentRespAreaList.push(descendant);
+        }
+      }
 
-      if (currentRespAreaList.size >= opts.maxResponseAreas) {
+      if (currentRespAreaList.length >= opts.maxResponseAreas) {
         return;
       }
 
       const type = opts.type.replace(/-/g, '_');
       const prevIndex = lastIndexMap[type];
-      const newIndex = prevIndex === 0 ? prevIndex : prevIndex + 1;
+      const newIndex = !prevIndex ? 0 : 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
@@ -69,25 +79,36 @@ export default function ResponseAreaPlugin(opts) {
           if (nextText) {
             change.moveFocusTo(nextText.key, 0).moveAnchorTo(nextText.key, 0);
           }
-        }
-
-        onChange(change);
+        }*/
+        editor.insertNode(newInline);
       }
     },
     customToolbar: opts.respAreaToolbar,
-    supports: (node) => node.object === 'inline' && elTypesArray.indexOf(node.type) >= 0,
-    showDone: false,
+    showDone: false
   };
 
   return {
     name: 'response_area',
     toolbar,
+    rules: editor => {
+      const { isVoid, isInline } = editor;
+
+      editor.isVoid = element => {
+        return elTypesArray.includes(element.type) ? true : isVoid(element);
+      };
+
+      editor.isInline = element => {
+        return elTypesArray.includes(element.type) ? true : isInline(element);
+      };
+
+      return editor;
+    },
     filterPlugins: (node, plugins) => {
       if (node.type === 'explicit_constructed_response' || node.type === 'drag_in_the_blank') {
         return [];
       }
 
-      return plugins.filter((p) => p.name !== 'response_area');
+      return plugins.filter(p => p.name !== 'response_area');
     },
     deleteNode: (e, node, value, onChange) => {
       e.preventDefault();
@@ -96,11 +117,12 @@ export default function ResponseAreaPlugin(opts) {
 
       onChange(change);
     },
+    supports: node => elTypesArray.indexOf(node.type) >= 0,
     renderNode(props) {
-      const { attributes, node: n } = props;
+      const { attributes, node } = props;
 
-      if (n.type === 'explicit_constructed_response') {
-        const data = n.data.toJSON();
+      if (node.type === 'explicit_constructed_response') {
+        const { data } = node;
         let error;
 
         if (opts.error) {
@@ -112,20 +134,36 @@ export default function ResponseAreaPlugin(opts) {
             attributes={attributes}
             value={data.value}
             error={error && error[data.index] && error[data.index][0]}
-          />
+          >
+            {props.children}
+          </ExplicitConstructedResponse>
         );
       }
 
-      if (n.type === 'drag_in_the_blank') {
-        const data = n.data.toJSON();
+      if (node.type === 'drag_in_the_blank') {
+        const { data } = node;
 
-        return <DragInTheBlank attributes={attributes} data={data} n={n} nodeProps={props} opts={opts} />;
+        return (
+          <DragInTheBlank
+            attributes={attributes}
+            data={data}
+            n={node}
+            nodeProps={props}
+            opts={opts}
+          >
+            {props.children}
+          </DragInTheBlank>
+        );
       }
 
-      if (n.type === 'inline_dropdown') {
-        const data = n.data.toJSON();
+      if (node.type === 'inline_dropdown') {
+        const { data } = node;
 
-        return <InlineDropdown attributes={attributes} selectedItem={data.value} />;
+        return (
+          <InlineDropdown attributes={attributes} selectedItem={data.value}>
+            {props.children}
+          </InlineDropdown>
+        );
       }
     },
     onChange(change, editor) {
@@ -134,7 +172,7 @@ export default function ResponseAreaPlugin(opts) {
       if (isUndefined(lastIndexMap[type])) {
         lastIndexMap[type] = 0;
 
-        change.value.document.forEachDescendant((d) => {
+        change.value.document.forEachDescendant(d => {
           if (d.type === type) {
             const newIndex = parseInt(d.data.get('index'), 10);
 
@@ -158,11 +196,13 @@ export default function ResponseAreaPlugin(opts) {
         toolbar.disabled = false;
       }
 
-      const arrayToFilter = oldRespAreaList.size > currentRespAreaList.size ? oldRespAreaList : currentRespAreaList;
-      const arrayToUseForFilter = arrayToFilter === oldRespAreaList ? currentRespAreaList : oldRespAreaList;
+      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')),
+        d => !arrayToUseForFilter.find(e => e.data.get('index') === d.data.get('index'))
       );
 
       if (elementsWithChangedStatus.size && oldRespAreaList.size > currentRespAreaList.size) {
@@ -171,12 +211,12 @@ export default function ResponseAreaPlugin(opts) {
     },
     onDrop(event, change, editor) {
       const closestEl = event.target.closest('[data-key]');
-      const inline = editor.value.document.findDescendant((d) => d.key === closestEl.dataset.key);
+      const inline = editor.value.document.findDescendant(d => d.key === closestEl.dataset.key);
 
       if (inline.type === 'drag_in_the_blank') {
         return false;
       }
-    },
+    }
   };
 }
 
@@ -186,37 +226,31 @@ export const serialization = {
 
     switch (type) {
       case 'inline_dropdown':
-        return {
-          object: 'inline',
+        return jsx('element', {
           type: 'inline_dropdown',
-          isVoid: true,
           data: {
             index: el.dataset.index,
-            value: el.dataset.value,
-          },
-        };
+            value: el.dataset.value
+          }
+        });
       case 'explicit_constructed_response':
-        return {
-          object: 'inline',
+        return jsx('element', {
           type: 'explicit_constructed_response',
-          isVoid: true,
           data: {
             index: el.dataset.index,
-            value: el.dataset.value,
-          },
-        };
+            value: el.dataset.value
+          }
+        });
       case 'drag_in_the_blank':
-        return {
-          object: 'inline',
+        return jsx('element', {
           type: 'drag_in_the_blank',
-          isVoid: true,
           data: {
             index: el.dataset.index,
             id: el.dataset.id,
             value: el.dataset.value,
-            inTable: el.dataset.inTable,
-          },
-        };
+            inTable: el.dataset.inTable
+          }
+        });
     }
   },
   serialize(object) {
@@ -233,7 +267,13 @@ export const serialization = {
       case 'explicit_constructed_response': {
         const data = object.data.toJSON();
 
-        return <span data-type="explicit_constructed_response" data-index={data.index} data-value={data.value} />;
+        return (
+          <span
+            data-type="explicit_constructed_response"
+            data-index={data.index}
+            data-value={data.value}
+          />
+        );
       }
       case 'drag_in_the_blank': {
         const data = object.data.toJSON();
@@ -249,5 +289,5 @@ export const serialization = {
         );
       }
     }
-  },
+  }
 };

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

@@ -2,19 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Chevron } from '../icons';
 
-const InlineDropdown = ({ attributes, selectedItem }) => {
-  // TODO: Investigate
+const InlineDropdown = ({ attributes, children, selectedItem }) => {
   // 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',
         margin: '0 5px',
-        cursor: 'pointer',
+        cursor: 'pointer'
       }}
     >
       <div
@@ -26,9 +26,10 @@ const InlineDropdown = ({ attributes, selectedItem }) => {
           border: '1px solid #C0C3CF',
           boxSizing: 'border-box',
           borderRadius: '3px',
-          position: 'relative',
+          position: 'relative'
         }}
       >
+        {children}
         <div
           style={{
             flex: 1,
@@ -36,10 +37,10 @@ const InlineDropdown = ({ attributes, selectedItem }) => {
             padding: '0 25px 0 8px',
             whiteSpace: 'nowrap',
             textOverflow: 'ellipsis',
-            lineHeight: '35px',
+            lineHeight: '35px'
           }}
           dangerouslySetInnerHTML={{
-            __html: html,
+            __html: html
           }}
         />
         <Chevron
@@ -47,7 +48,7 @@ const InlineDropdown = ({ attributes, selectedItem }) => {
           style={{
             position: 'absolute',
             top: '5px',
-            right: '5px',
+            right: '5px'
           }}
         />
       </div>
@@ -57,7 +58,7 @@ const InlineDropdown = ({ attributes, selectedItem }) => {
 
 InlineDropdown.propTypes = {
   attributes: PropTypes.object,
-  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
 };
 
 export default InlineDropdown;

package/src/plugins/respArea/utils.jsx

@@ -1,14 +1,11 @@
 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);
-
-export const insertSnackBar = (message) => {
+export const insertSnackBar = message => {
   const prevSnacks = document.querySelectorAll('.response-area-alert');
 
-  prevSnacks.forEach((s) => s.remove());
+  prevSnacks.forEach(s => s.remove());
 
   const newEl = document.createElement('div');
 
@@ -19,7 +16,7 @@ export const insertSnackBar = (message) => {
       anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
       open={true}
       ContentProps={{
-        'aria-describedby': 'message-id',
+        'aria-describedby': 'message-id'
       }}
       message={<span id="message-id">{message}</span>}
     />
@@ -34,44 +31,38 @@ export const insertSnackBar = (message) => {
   }, 2000);
 };
 
-export const defaultECR = (index) =>
-  Inline.create({
-    type: 'explicit_constructed_response',
-    isVoid: true,
-    data: {
-      index,
-    },
-  });
+export const defaultECR = index => ({
+  type: 'explicit_constructed_response',
+  children: [{ text: '' }],
+  data: {
+    index
+  }
+});
 
-export const defaultDIB = (opts, index) =>
-  Inline.create({
-    type: 'drag_in_the_blank',
-    isVoid: true,
-    data: {
-      index,
-      duplicates: opts.options.duplicates,
-      value: null,
-    },
-  });
+export const defaultDIB = (opts, index) => ({
+  type: 'drag_in_the_blank',
+  children: [{ text: '' }],
+  data: {
+    index,
+    duplicates: opts.options.duplicates,
+    value: null
+  }
+});
 
-export const defaultIDD = (index) =>
-  Inline.create({
-    object: 'inline',
-    type: 'inline_dropdown',
-    isVoid: true,
-    data: {
-      index,
-    },
-  });
+export const defaultIDD = index => ({
+  type: 'inline_dropdown',
+  children: [{ text: '' }],
+  data: {
+    index
+  }
+});
 
 export const getDefaultElement = (opts, index) => {
   switch (opts.type) {
     case 'explicit-constructed-response':
       return defaultECR(index);
-
     case 'drag-in-the-blank':
       return defaultDIB(opts, index);
-
     default:
       // inline-dropdown
       return defaultIDD(index);