@pie-lib/editable-html 7.19.2 → 7.21.0

package/src/plugins/list/index.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { Data } from 'slate';
+import Immutable from 'immutable';
 import PropTypes from 'prop-types';
 import EditList from 'slate-edit-list';
 import debug from 'debug';
@@ -44,15 +46,12 @@ export const serialization = {
   }
 };
 
-export default options => {
-  const { type, icon } = options;
-
+const createEditList = () => {
   const core = EditList({
     typeDefault: 'span'
   });
 
   // fix outdated schema
-
   if (core.schema && core.schema.blocks) {
     Object.keys(core.schema.blocks).forEach(key => {
       const block = core.schema.blocks[key];
@@ -65,6 +64,69 @@ export default options => {
     });
   }
 
+  /**
+   * This override of the core.changes.wrapInList is needed because the version
+   * of immutable that we have does not support getting the element at a specific
+   * index with a square bracket (list[0]). We have to use the list.get function instead
+   */
+
+  /**
+   * Returns the highest list of blocks that cover the current selection
+   */
+  const getHighestSelectedBlocks = value => {
+    const range = value.selection;
+    const document = value.document;
+
+    const startBlock = document.getClosestBlock(range.startKey);
+    const endBlock = document.getClosestBlock(range.endKey);
+
+    if (startBlock === endBlock) {
+      return Immutable.List([startBlock]);
+    }
+
+    const ancestor = document.getCommonAncestor(startBlock.key, endBlock.key);
+    const startPath = ancestor.getPath(startBlock.key);
+    const endPath = ancestor.getPath(endBlock.key);
+
+    return ancestor.nodes.slice(startPath.get(0), endPath.get(0) + 1);
+  };
+
+  /**
+   * Wrap the blocks in the current selection in a new list. Selected
+   * lists are merged together.
+   */
+  core.changes.wrapInList = function(change, type, data) {
+    const selectedBlocks = getHighestSelectedBlocks(change.value);
+
+    // Wrap in container
+    change.wrapBlock({ type: type, data: Data.create(data) }, { normalize: false });
+
+    // Wrap in list items
+    selectedBlocks.forEach(function(node) {
+      if (core.utils.isList(node)) {
+        // Merge its items with the created list
+        node.nodes.forEach(function(_ref) {
+          const key = _ref.key;
+          return change.unwrapNodeByKey(key, { normalize: false });
+        });
+      } else if (node.type !== 'list_item') {
+        change.wrapBlockByKey(node.key, 'list_item', {
+          normalize: false
+        });
+      }
+    });
+
+    return change.normalize();
+  };
+
+  return core;
+};
+
+export default options => {
+  const { type, icon } = options;
+
+  const core = createEditList();
+
   // eslint-disable-next-line react/display-name
   core.renderNode = props => {
     const { node, attributes, children } = props;
@@ -88,7 +150,7 @@ export default options => {
         return false;
       }
       const current = core.utils.getCurrentList(value);
-      return current.type === type;
+      return current ? current.type === type : false;
     },
     onClick: (value, onChange) => {
       log('[onClick]', value);

package/src/plugins/media/index.jsx

@@ -20,14 +20,17 @@ const removeDialogs = () => {
 export const insertDialog = props => {
   const newEl = document.createElement('div');
   const { type, callback, ...rest } = props;
+  const initialBodyOverflow = document.body.style.overflow;
 
   removeDialogs();
 
   newEl.className = 'insert-media-dialog';
+  document.body.style.overflow = 'hidden';
 
   const handleClose = (val, data) => {
     callback(val, data);
     newEl.remove();
+    document.body.style.overflow = initialBodyOverflow;
   };
 
   const el = (

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, value } = props;
+  const { attributes, value, error } = props;
 
   return (
     <span
@@ -23,7 +23,7 @@ const ExplicitConstructedResponse = props => {
           minHeight: '36px',
           height: '36px',
           background: '#FFF',
-          border: '1px solid #C0C3CF',
+          border: `1px solid ${error ? 'red' : '#C0C3CF'}`,
           boxSizing: 'border-box',
           borderRadius: '3px',
           overflow: 'hidden',

package/src/plugins/respArea/index.jsx

@@ -19,6 +19,8 @@ const elTypesMap = {
 const elTypesArray = Object.values(elTypesMap);
 
 export default function ResponseAreaPlugin(opts) {
+  const isOfCurrentType = d => d.type === opts.type || d.type === elTypesMap[opts.type];
+
   const toolbar = {
     icon: <ToolbarIcon />,
     buttonStyles: {
@@ -27,6 +29,12 @@ export default function ResponseAreaPlugin(opts) {
     onClick: (value, onChange) => {
       log('[toolbar] onClick');
       const change = value.change();
+      const currentRespAreaList = change.value.document.filterDescendants(isOfCurrentType);
+
+      if (currentRespAreaList.size >= opts.maxResponseAreas) {
+        return;
+      }
+
       const type = opts.type.replace(/-/g, '_');
       const prevIndex = lastIndexMap[type];
       const newIndex = prevIndex === 0 ? prevIndex : prevIndex + 1;
@@ -90,7 +98,13 @@ export default function ResponseAreaPlugin(opts) {
       if (n.type === 'explicit_constructed_response') {
         const data = n.data.toJSON();
 
-        return <ExplicitConstructedResponse attributes={attributes} value={data.value} />;
+        return (
+          <ExplicitConstructedResponse
+            attributes={attributes}
+            value={data.value}
+            error={opts.error && opts.error[data.value]}
+          />
+        );
       }
 
       if (n.type === 'drag_in_the_blank') {
@@ -128,10 +142,15 @@ export default function ResponseAreaPlugin(opts) {
         return;
       }
 
-      const isOfCurrentType = d => d.type === opts.type || d.type === elTypesMap[opts.type];
       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 =

package/src/plugins/toolbar/default-toolbar.jsx

@@ -14,25 +14,32 @@ const log = debug('@pie-lib:editable-html:plugins:toolbar');
 export const ToolbarButton = props => {
   const onToggle = () => {
     const c = props.onToggle(props.value.change(), props);
+
     props.onChange(c);
   };
 
   if (props.isMark) {
     const isActive = hasMark(props.value, props.type);
+
     log('[ToolbarButton] mark:isActive: ', isActive);
+
     return (
       <MarkButton active={isActive} label={props.type} onToggle={onToggle} mark={props.type}>
         {props.icon}
       </MarkButton>
     );
   } else {
+    const { disabled } = props;
     const isActive = props.isActive
       ? props.isActive(props.value, props.type)
       : hasBlock(props.value, props.type);
+
     log('[ToolbarButton] block:isActive: ', isActive);
+
     return (
       <Button
         active={isActive}
+        disabled={disabled}
         onClick={() => props.onClick(props.value, props.onChange)}
         extraStyles={props.buttonStyles}
       >
@@ -44,6 +51,7 @@ export const ToolbarButton = props => {
 
 const isActiveToolbarPlugin = props => plugin => {
   const isDisabled = (props[plugin.name] || {}).disabled;
+
   return plugin && plugin.toolbar && !isDisabled;
 };
 

package/src/plugins/toolbar/editor-and-toolbar.jsx

@@ -28,7 +28,8 @@ export class EditorAndToolbar extends React.Component {
     pluginProps: PropTypes.object,
     toolbarOpts: PropTypes.shape({
       position: PropTypes.oneOf(['bottom', 'top']),
-      alwaysVisible: PropTypes.bool
+      alwaysVisible: PropTypes.bool,
+      error: PropTypes.string
     })
   };
 
@@ -84,7 +85,7 @@ export class EditorAndToolbar extends React.Component {
     );
 
     return (
-      <div className={classes.root}>
+      <div className={classNames(classes.root, toolbarOpts && toolbarOpts.error && classes.error)}>
         <div className={holderNames}>
           <div className={classes.children}>{clonedChildren}</div>
         </div>
@@ -215,6 +216,9 @@ const style = {
         backgroundColor: primary
       }
     }
+  },
+  error: {
+    border: '2px solid red'
   }
 };
 

package/src/plugins/toolbar/toolbar-buttons.jsx

@@ -15,6 +15,13 @@ const styles = () => ({
   },
   active: {
     color: 'black'
+  },
+  disabled: {
+    opacity: 0.7,
+    cursor: 'not-allowed',
+    '& :hover': {
+      color: 'grey'
+    }
   }
 });
 
@@ -26,6 +33,7 @@ export class RawButton extends React.Component {
     classes: PropTypes.object.isRequired,
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
     active: PropTypes.bool,
+    disabled: PropTypes.bool,
     extraStyles: PropTypes.object
   };
 
@@ -41,8 +49,11 @@ export class RawButton extends React.Component {
   };
 
   render() {
-    const { active, classes, children, extraStyles } = this.props;
-    const names = classNames(classes.button, active && classes.active);
+    const { active, classes, children, disabled, extraStyles } = this.props;
+    const names = classNames(classes.button, {
+      [classes.active]: active,
+      [classes.disabled]: disabled
+    });
 
     return (
       <div style={extraStyles} className={names} onMouseDown={this.onClick}>