@pie-lib/editable-html 7.17.4-next.42 → 7.17.4-next.423

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/media/media-dialog.js

@@ -348,7 +348,7 @@ export class MediaDialog extends React.Component {
             Cancel
           </Button>
           <Button
-            disabled={invalid || url === null}
+            disabled={invalid || url === null || url === undefined}
             onClick={() => this.handleDone(true)}
             color="primary"
           >

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

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import isUndefined from 'lodash/isUndefined';
 import { DragSource, DropTarget } from '@pie-lib/drag';
+import { color } from '@pie-lib/render-ui';
 import { renderMath } from '@pie-lib/math-rendering';
 import { withStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
@@ -20,6 +21,9 @@ const useStyles = withStyles(theme => ({
   },
   incorrect: {
     border: 'solid 1px red'
+  },
+  selected: {
+    border: `2px solid ${color.primaryDark()} !important`
   }
 }));
 
@@ -30,9 +34,32 @@ export class BlankContent extends React.Component {
     isDragging: PropTypes.bool,
     isOver: PropTypes.bool,
     dragItem: PropTypes.object,
-    value: PropTypes.object
+    value: PropTypes.object,
+    classes: PropTypes.object
   };
 
+  constructor(props) {
+    super(props);
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener('click', this.handleClick);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleClick);
+  }
+
+  handleClick(event) {
+    const { classes } = this.props;
+
+    if (this.elementRef) {
+      this.elementRef.className = this.elementRef.contains(event.target) ? classes.selected : '';
+    }
+  }
+
   componentDidUpdate() {
     if (this.elementRef) {
       renderMath(this.elementRef);

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',
@@ -39,7 +39,7 @@ const ExplicitConstructedResponse = props => {
 
 ExplicitConstructedResponse.propTypes = {
   attributes: PropTypes.object,
-  value: PropTypes.object
+  value: PropTypes.string
 };
 
 export default ExplicitConstructedResponse;

package/src/plugins/respArea/index.jsx

@@ -11,9 +11,16 @@ import { ToolbarIcon } from './icons';
 const log = debug('@pie-lib:editable-html:plugins:respArea');
 
 const lastIndexMap = {};
-const elTypesArray = ['inline_dropdown', 'explicit_constructed_response', 'drag_in_the_blank'];
+const elTypesMap = {
+  'inline-dropdown': 'inline_dropdown',
+  'explicit-constructed-response': 'explicit_constructed_response',
+  '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 toolbar = {
     icon: <ToolbarIcon />,
     buttonStyles: {
@@ -22,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;
@@ -35,6 +48,11 @@ export default function ResponseAreaPlugin(opts) {
         } else {
           // If the markup is empty and there's no focus
           const lastText = value.document.getLastText();
+
+          if (!lastText) {
+            return;
+
+          }
           const parentNode = value.document.getParent(lastText.key);
 
           if (parentNode) {
@@ -66,7 +84,7 @@ export default function ResponseAreaPlugin(opts) {
     name: 'response_area',
     toolbar,
     filterPlugins: (node, plugins) => {
-      if (node.type === 'explicit_constructed_response') {
+      if (node.type === 'explicit_constructed_response' || node.type === 'drag_in_the_blank') {
         return [];
       }
 
@@ -84,8 +102,19 @@ export default function ResponseAreaPlugin(opts) {
 
       if (n.type === 'explicit_constructed_response') {
         const data = n.data.toJSON();
+        let error;
+
+        if (opts.error) {
+          error = opts.error();
+        }
 
-        return <ExplicitConstructedResponse attributes={attributes} value={data.value} />;
+        return (
+          <ExplicitConstructedResponse
+            attributes={attributes}
+            value={data.value}
+            error={error && error[data.index] && error[data.index][0]}
+          />
+        );
       }
 
       if (n.type === 'drag_in_the_blank') {
@@ -102,7 +131,7 @@ export default function ResponseAreaPlugin(opts) {
         return <InlineDropdown attributes={attributes} selectedItem={data.value} />;
       }
     },
-    onChange(change) {
+    onChange(change, editor) {
       const type = opts.type.replace(/-/g, '_');
 
       if (isUndefined(lastIndexMap[type])) {
@@ -118,41 +147,32 @@ export default function ResponseAreaPlugin(opts) {
           }
         });
       }
-    },
-    normalizeNode: node => {
-      if (node.object !== 'document') {
+
+      if (!editor.value) {
         return;
       }
 
-      const addSpacesArray = [];
+      const currentRespAreaList = change.value.document.filterDescendants(isOfCurrentType);
+      const oldRespAreaList = editor.value.document.filterDescendants(isOfCurrentType);
 
-      const allElements = node.filterDescendants(d => elTypesArray.indexOf(d.type) >= 0);
+      if (currentRespAreaList.size >= opts.maxResponseAreas) {
+        toolbar.disabled = true;
+      } else {
+        toolbar.disabled = false;
+      }
 
-      allElements.forEach(el => {
-        const prevText = node.getPreviousText(el.key);
-        const lastCharIsNewLine = prevText.text[prevText.text.length - 1] === '\n';
+      const arrayToFilter =
+        oldRespAreaList.size > currentRespAreaList.size ? oldRespAreaList : currentRespAreaList;
+      const arrayToUseForFilter =
+        arrayToFilter === oldRespAreaList ? currentRespAreaList : oldRespAreaList;
 
-        if (prevText.text.length === 0 || lastCharIsNewLine) {
-          addSpacesArray.push({
-            nr: lastCharIsNewLine ? 1 : 2,
-            key: prevText.key
-          });
-        }
-      });
+      const elementsWithChangedStatus = arrayToFilter.filter(
+        d => !arrayToUseForFilter.find(e => e.data.get('index') === d.data.get('index'))
+      );
 
-      if (!addSpacesArray.length) {
-        return;
+      if (elementsWithChangedStatus.size && oldRespAreaList.size > currentRespAreaList.size) {
+        opts.onHandleAreaChange(elementsWithChangedStatus);
       }
-
-      return change => {
-        change.withoutNormalization(() => {
-          addSpacesArray.forEach(({ key, nr }) => {
-            const node = change.value.document.getNode(key);
-
-            change.insertTextByKey(key, node.text.length, '\u00A0'.repeat(nr));
-          });
-        });
-      };
     },
     onDrop(event, change, editor) {
       const closestEl = event.target.closest('[data-key]');

package/src/plugins/table/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import EditTable from 'slate-edit-table';
-import { Block, Inline } from 'slate';
+import { Block } from 'slate';
 import debug from 'debug';
 import GridOn from '@material-ui/icons/GridOn';
 import TableToolbar from './table-toolbar';
@@ -78,6 +78,20 @@ TableCell.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
 };
 
+export const moveFocusToBeginningOfTable = change => {
+  const addedTable = change.value.document.findDescendant(d => !!d.data && !!d.data.get('newTable'));
+
+  if (!addedTable) {
+    return;
+  }
+
+  change.collapseToStartOf(addedTable);
+
+  const update = addedTable.data.remove('newTable');
+
+  change.setNodeByKey(addedTable.key, { data: update });
+};
+
 export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
   const core = EditTable({
     typeContent: 'div'
@@ -117,12 +131,32 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
     return ancestors.findLast(p => p.type === 'table');
   };
 
+  core.utils.createTableWithOptions = (row, columns, extra) => {
+    const createdTable = core.utils.createTable(row, columns);
+    const newTable = Block.create({
+      ...createdTable.toJSON(),
+      ...extra
+    });
+
+    return newTable;
+  };
+
   core.toolbar = {
     icon: <GridOn />,
     onClick: (value, onChange) => {
       log('insert table');
-      const c = core.changes.insertTable(value.change(), 2, 2);
-      onChange(c);
+      const change = value.change();
+      const newTable = core.utils.createTableWithOptions(2, 2, {
+        data: {
+          border: '1',
+          newTable: true
+        }
+      });
+
+      change.insertBlock(newTable);
+
+      moveFocusToBeginningOfTable(change);
+      onChange(change);
     },
     supports: (node, value) =>
       node && node.object === 'block' && core.utils.isSelectionInTable(value),
@@ -132,7 +166,7 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
     customToolbar: (node, value, onToolbarDone) => {
       log('[customToolbar] node.data: ', node.data);
 
-      const tableBlock = core.utils.getTableBlock(value.document, node.key);
+      const tableBlock = core.utils.getTableBlock(value.document, node?.key);
       log('[customToolbar] tableBlock: ', tableBlock);
 
       const hasBorder = () =>
@@ -215,9 +249,16 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
       return;
     }
 
+    const tableAdded = node.findDescendant(d => d.data && d.data.get('newTable'));
+
+    if (!tableAdded) {
+      return;
+    }
+
+    const nodeToSearch = node.getParent(tableAdded.key) || node;
     let shouldAddTextAfterNode = false;
-    const indexToNotHaveTableOn = node.nodes.size - 1;
-    const indexOfLastTable = node.nodes.findLastIndex(d => d.type === 'table');
+    const indexToNotHaveTableOn = nodeToSearch.nodes.size - 1;
+    const indexOfLastTable = nodeToSearch.nodes.findLastIndex(d => d.type === 'table');
 
     // if the last table in the document is of type table, we need to do the change
     if (indexOfLastTable === indexToNotHaveTableOn) {
@@ -228,15 +269,13 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
       return;
     }
 
-    const tableNode = node.nodes.get(indexOfLastTable);
-
     return change => {
       if (shouldAddTextAfterNode) {
-        const tableJSON = tableNode.toJSON();
+        const tableJSON = tableAdded.toJSON();
 
         // we remove the table node because otherwise we can't add the empty block after it
         // we need a block that contains text in order to do it
-        change.removeNodeByKey(tableNode.key);
+        change.removeNodeByKey(tableAdded.key);
 
         const newBlock = Block.create({
           object: 'block',
@@ -256,12 +295,20 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
           if (prevText) {
             // we move focus to the previous text
             change
-              .moveFocusTo(prevText.key, prevText.text.length)
-              .moveAnchorTo(prevText.key, prevText.text.length);
+              .moveFocusTo(prevText.key, prevText.text?.length)
+              .moveAnchorTo(prevText.key, prevText.text?.length);
           }
 
           // we insert the table block between the first block with text and the last block with text
-          change.insertBlock(tableJSON);
+          change.insertBlock({
+            ...tableJSON,
+            data: {
+              ...tableJSON.data,
+              newTable: true
+            }
+          });
+
+          moveFocusToBeginningOfTable(change);
         });
       }
     };
@@ -282,7 +329,7 @@ export const parseStyleString = s => {
   return result;
 };
 
-export const reactAttributes = o => toStyleObject(o, { camelize: true });
+export const reactAttributes = o => toStyleObject(o, { camelize: true, addUnits: false });
 
 const attributesToMap = el => (acc, attribute) => {
   const value = el.getAttribute(attribute);

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

@@ -19,6 +19,7 @@ export class EditorAndToolbar extends React.Component {
     onChange: PropTypes.func.isRequired,
     onDone: PropTypes.func.isRequired,
     onDataChange: PropTypes.func,
+    toolbarRef: PropTypes.func,
     focusedNode: SlatePropTypes.node,
     readOnly: PropTypes.bool,
     disableUnderline: PropTypes.bool,
@@ -27,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
     })
   };
 
@@ -54,7 +56,8 @@ export class EditorAndToolbar extends React.Component {
       disableUnderline,
       pluginProps,
       toolbarOpts,
-      onDataChange
+      onDataChange,
+      toolbarRef
     } = this.props;
 
     const inFocus = value.isFocused || (focusedNode !== null && focusedNode !== undefined);
@@ -82,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>
@@ -95,6 +98,7 @@ export class EditorAndToolbar extends React.Component {
           onChange={onChange}
           onDone={onDone}
           onDataChange={onDataChange}
+          toolbarRef={toolbarRef}
           pluginProps={pluginProps}
           toolbarOpts={toolbarOpts}
         />
@@ -114,7 +118,8 @@ const style = {
       wordBreak: 'break-word',
       overflow: 'visible',
       maxHeight: '500px',
-      padding: '5px 0'
+      // needed in order to be able to put the focus before a void element when it is the first one in the editor
+      padding: '5px'
     }
   },
   children: {
@@ -211,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}>

package/src/plugins/toolbar/toolbar.jsx

@@ -1,13 +1,15 @@
-import { DoneButton } from './done-button';
+import React from 'react';
+import { Change } from 'slate';
 import Delete from '@material-ui/icons/Delete';
 import IconButton from '@material-ui/core/IconButton';
 import PropTypes from 'prop-types';
-import React from 'react';
 import classNames from 'classnames';
 import debug from 'debug';
 import SlatePropTypes from 'slate-prop-types';
 import debounce from 'lodash/debounce';
 
+import { DoneButton } from './done-button';
+
 import { findSingleNode, findParentNode } from '../utils';
 import { withStyles } from '@material-ui/core/styles';
 import DefaultToolbar from './default-toolbar';
@@ -43,6 +45,7 @@ export class Toolbar extends React.Component {
     plugin: PropTypes.object,
     onImageClick: PropTypes.func,
     onDone: PropTypes.func.isRequired,
+    toolbarRef: PropTypes.func.isRequired,
     classes: PropTypes.object.isRequired,
     isFocused: PropTypes.bool,
     autoWidth: PropTypes.bool,
@@ -52,6 +55,7 @@ export class Toolbar extends React.Component {
       position: PropTypes.oneOf(['bottom', 'top']),
       alignment: PropTypes.oneOf(['left', 'right']),
       alwaysVisible: PropTypes.bool,
+      ref: PropTypes.func,
       showDone: PropTypes.bool
     }),
     onDataChange: PropTypes.func
@@ -133,7 +137,8 @@ export class Toolbar extends React.Component {
       autoWidth,
       onChange,
       isFocused,
-      onDone
+      onDone,
+      toolbarRef
     } = this.props;
 
     const node = findSingleNode(value);
@@ -164,6 +169,11 @@ export class Toolbar extends React.Component {
     log('[render] plugin: ', plugin);
 
     const handleDone = (change, done) => {
+      // use handler only if this is an actual Slate Change
+      if (!(change instanceof Change)) {
+        return;
+      }
+
       let handler = onDone;
 
       if (plugin && plugin.toolbar && plugin.toolbar.customToolbar) {
@@ -223,7 +233,7 @@ export class Toolbar extends React.Component {
     });
 
     return (
-      <div className={names} style={extraStyles} onClick={this.onClick}>
+      <div className={names} style={extraStyles} onClick={this.onClick} ref={toolbarRef}>
         {CustomToolbar ? (
           <CustomToolbar
             node={node}

package/src/serialization.jsx

@@ -58,7 +58,16 @@ export const parseStyleString = s => {
   return result;
 };
 
-export const reactAttributes = o => toStyleObject(o, { camelize: true });
+export const getBase64 = file => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+  });
+};
+
+export const reactAttributes = o => toStyleObject(o, { camelize: true, addUnits: false });
 
 const attributesToMap = el => (acc, attribute) => {
   const value = el.getAttribute(attribute);
@@ -340,7 +349,7 @@ serializer.deserialize = function deserialize(html) {
 
   let i;
 
-  for (i = 0; i < 1000; i++) {
+  for (i = 0; i < 3000; i++) {
     json.schema.rules.push({
       match: { object: 'document' },
       nodes: [{ match: { object: 'block' } }]
@@ -356,7 +365,14 @@ serializer.deserialize = function deserialize(html) {
   return null;
 };
 
-export const htmlToValue = html => serializer.deserialize(html);
+export const htmlToValue = html => {
+  try {
+    return serializer.deserialize(html);
+  } catch (e) {
+    console.log("Couldn't parse html: ", e);
+    return {};
+  }
+};
 
 export const valueToHtml = value => serializer.serialize(value);