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

package/src/plugins/respArea/index.jsx

@@ -30,14 +30,12 @@ export default function ResponseAreaPlugin(opts) {
     buttonStyles: {
       margin: '0 20px 0 auto',
     },
-    onClick: editor => {
+    onClick: (editor) => {
       log('[toolbar] onClick');
       const currentRespAreaList = [];
-      const descendants = Array.from(SlateNode.descendants(editor, { reverse: true })).map(
-        ([d]) => d
-      );
+      const descendants = Array.from(SlateNode.descendants(editor, { reverse: true })).map(([d]) => d);
 
-      descendants.forEach(d => {
+      descendants.forEach((d) => {
         if (isOfCurrentType(d)) {
           currentRespAreaList.push(d);
         }
@@ -92,29 +90,27 @@ export default function ResponseAreaPlugin(opts) {
   return {
     name: 'response_area',
     toolbar,
-    rules: editor => {
+    rules: (editor) => {
       const { isVoid, isInline, onChange } = editor;
 
-      editor.isVoid = element => {
+      editor.isVoid = (element) => {
         return elTypesArray.includes(element.type) ? true : isVoid(element);
       };
 
-      editor.isInline = 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
-        );
+      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 => {
+          descendants.forEach((d) => {
             if (d.type === type) {
               const newIndex = parseInt(d.data.index, 10);
 
@@ -129,29 +125,21 @@ export default function ResponseAreaPlugin(opts) {
           return;
         }
 
-        const oldDescendants = Array.from(SlateNode.descendants(oldEditor, { reverse: true })).map(
-          ([d]) => d
-        );
+        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;
+          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)
+          (d) => !arrayToUseForFilter.find((e) => e.data.index === d.data.index),
         );
 
-        if (
-          elementsWithChangedStatus.length &&
-          oldRespAreaList.length > currentRespAreaList.length
-        ) {
+        if (elementsWithChangedStatus.length && oldRespAreaList.length > currentRespAreaList.length) {
           opts.onHandleAreaChange(elementsWithChangedStatus);
         }
 
@@ -173,12 +161,12 @@ export default function ResponseAreaPlugin(opts) {
 
       editor.apply({
         type: 'remove_node',
-        path: nodePath
+        path: nodePath,
       });
 
       onChange(editor);
     },
-    supports: node => elTypesArray.indexOf(node.type) >= 0,
+    supports: (node) => elTypesArray.indexOf(node.type) >= 0,
     renderNode(props) {
       const { attributes, node } = props;
 
@@ -205,13 +193,7 @@ export default function ResponseAreaPlugin(opts) {
         const { data } = node;
 
         return (
-          <DragInTheBlank
-            attributes={attributes}
-            data={data}
-            n={node}
-            nodeProps={props}
-            opts={opts}
-          >
+          <DragInTheBlank attributes={attributes} data={data} n={node} nodeProps={props} opts={opts}>
             {props.children}
           </DragInTheBlank>
         );
@@ -248,16 +230,16 @@ export const serialization = {
           type: 'inline_dropdown',
           data: {
             index: el.dataset.index,
-            value: el.dataset.value
-          }
+            value: el.dataset.value,
+          },
         });
       case 'explicit_constructed_response':
         return jsx('element', {
           type: 'explicit_constructed_response',
           data: {
             index: el.dataset.index,
-            value: el.dataset.value
-          }
+            value: el.dataset.value,
+          },
         });
       case 'drag_in_the_blank':
         return jsx('element', {
@@ -266,8 +248,8 @@ export const serialization = {
             index: el.dataset.index,
             id: el.dataset.id,
             value: el.dataset.value,
-            inTable: el.dataset.inTable
-          }
+            inTable: el.dataset.inTable,
+          },
         });
     }
   },

package/src/plugins/respArea/utils.jsx

@@ -33,12 +33,12 @@ export const insertSnackBar = (message) => {
   }, 2000);
 };
 
-export const defaultECR = index => ({
+export const defaultECR = (index) => ({
   type: 'explicit_constructed_response',
   children: [{ text: '' }],
   data: {
-    index
-  }
+    index,
+  },
 });
 
 export const defaultDIB = (opts, index) => ({
@@ -47,16 +47,16 @@ export const defaultDIB = (opts, index) => ({
   data: {
     index,
     duplicates: opts.options.duplicates,
-    value: null
-  }
+    value: null,
+  },
 });
 
-export const defaultIDD = index => ({
+export const defaultIDD = (index) => ({
   type: 'inline_dropdown',
   children: [{ text: '' }],
   data: {
-    index
-  }
+    index,
+  },
 });
 
 export const getDefaultElement = (opts, index) => {

package/src/plugins/table/index.jsx

@@ -14,7 +14,7 @@ import reduce from 'lodash/reduce';
 
 const log = debug('@pie-lib:editable-html:plugins:table');
 
-const Table = React.forwardRef(props => {
+const Table = React.forwardRef((props) => {
   const nodeAttributes = omit(dataToAttributes(props.element.data), 'newTable');
   const attrs = omit(props.attributes, 'newTable');
 
@@ -33,12 +33,12 @@ Table.propTypes = {
   node: PropTypes.shape({
     type: PropTypes.string,
     children: PropTypes.array,
-    data: PropTypes.object
+    data: PropTypes.object,
   }),
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
 };
 
-const TableRow = React.forwardRef(props => <tr {...props.attributes}>{props.children}</tr>);
+const TableRow = React.forwardRef((props) => <tr {...props.attributes}>{props.children}</tr>);
 
 TableRow.propTypes = {
   attributes: PropTypes.object,
@@ -47,22 +47,22 @@ TableRow.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
 };
 
-const TableBody = React.forwardRef(props => <tbody {...props.attributes}>{props.children}</tbody>);
+const TableBody = React.forwardRef((props) => <tbody {...props.attributes}>{props.children}</tbody>);
 
 TableBody.propTypes = {
   attributes: PropTypes.object,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
 };
 
 const useCellStyles = makeStyles({
   td: {
-    minWidth: '25px'
-  }
+    minWidth: '25px',
+  },
 });
 
-const TableCell = React.forwardRef(props => {
+const TableCell = React.forwardRef((props) => {
   const classes = useCellStyles();
   const { node } = props;
   const Tag = get(node, 'data.header') ? 'th' : 'td';
@@ -99,7 +99,7 @@ const getAncestorByType = (editor, type) => {
   }
 
   const ancestors = SlateNode.ancestors(editor, Editor.path(editor, editor.selection), {
-    reverse: true
+    reverse: true,
   });
 
   for (const [ancestor, ancestorPath] of ancestors) {
@@ -111,7 +111,7 @@ const getAncestorByType = (editor, type) => {
   return null;
 };
 
-const moveToBeginningOfTable = editor => {
+const moveToBeginningOfTable = (editor) => {
   const [tableBlock, tablePath] = getAncestorByType(editor, 'table');
   let firstTdPath;
 
@@ -129,10 +129,10 @@ const TABLE_TYPES = ['tbody', 'tr', 'td', 'table'];
 export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
   const core = {
     utils: {},
-    rules: editor => {
+    rules: (editor) => {
       const { normalizeNode } = editor;
 
-      editor.normalizeNode = entry => {
+      editor.normalizeNode = (entry) => {
         const [tableNode, tablePath] = entry;
         const tableParent = SlateNode.get(editor, tablePath.slice(0, -1));
 
@@ -140,7 +140,7 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
         if (SlateElement.isElement(tableNode) && tableNode.type === 'table') {
           const emptyBlock = {
             type: 'paragraph',
-            children: [{ text: '' }]
+            children: [{ text: '' }],
           };
           const tableIndex = tablePath.slice(-1)[0];
 
@@ -152,7 +152,7 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
             editor.apply({
               type: 'insert_node',
               path: beforeTablePath,
-              node: emptyBlock
+              node: emptyBlock,
             });
             editor.continueNormalization();
             return;
@@ -165,7 +165,7 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
             editor.apply({
               type: 'insert_node',
               path: afterTablePath,
-              node: emptyBlock
+              node: emptyBlock,
             });
             editor.continueNormalization();
             return;
@@ -178,8 +178,8 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
             Transforms.wrapNodes(editor, tBodyNode, {
               at: {
                 anchor: { path: [...tablePath, 0], offset: 0 },
-                focus: { path: [...tablePath, tableNode.children.length], offset: 0 }
-              }
+                focus: { path: [...tablePath, tableNode.children.length], offset: 0 },
+              },
             });
             editor.continueNormalization();
             return;
@@ -191,7 +191,7 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
       };
 
       return editor;
-    }
+    },
   };
 
   core.utils.createTable = (row = 2, columns = 2) => {
@@ -207,9 +207,9 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
           type: 'td',
           children: [
             {
-              text: ''
-            }
-          ]
+              text: '',
+            },
+          ],
         });
       }
 
@@ -221,15 +221,15 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
       children: [
         {
           type: 'tbody',
-          children: tableRows
-        }
-      ]
+          children: tableRows,
+        },
+      ],
     };
   };
 
-  core.utils.getTableBlock = editor => getAncestorByType(editor, 'table');
+  core.utils.getTableBlock = (editor) => getAncestorByType(editor, 'table');
 
-  core.utils.isSelectionInTable = editor => !!core.utils.getTableBlock(editor);
+  core.utils.isSelectionInTable = (editor) => !!core.utils.getTableBlock(editor);
 
   core.utils.createTableWithOptions = (row, columns, extra) => {
     const createdTable = core.utils.createTable(row, columns);
@@ -240,7 +240,7 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
 
   core.toolbar = {
     icon: <GridOn />,
-    onClick: editor => {
+    onClick: (editor) => {
       log('insert table');
       const newTable = core.utils.createTableWithOptions(2, 2, {
         data: {
@@ -276,9 +276,9 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
               type: 'td',
               children: [
                 {
-                  text: ''
-                }
-              ]
+                  text: '',
+                },
+              ],
             });
           }
 
@@ -312,16 +312,16 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
         if (tBodyNode) {
           const emptyTd = {
             type: 'td',
-            children: [{ text: '' }]
+            children: [{ text: '' }],
           };
           const trElements = Editor.nodes(editor, {
             at: tBodyPath, // Path of Editor
-            match: node => 'tr' === node.type
+            match: (node) => 'tr' === node.type,
           });
 
           for (const [trNode, nodePath] of trElements) {
             Transforms.insertNodes(editor, [emptyTd], {
-              at: [...nodePath, trNode.children.length]
+              at: [...nodePath, trNode.children.length],
             });
           }
         }
@@ -337,7 +337,7 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
           const columnIndex = currentPath[currentPath.length - 2];
           const trElements = Editor.nodes(editor, {
             at: tBodyPath, // Path of Editor
-            match: node => 'tr' === node.type
+            match: (node) => 'tr' === node.type,
           });
 
           for (const [trNode, nodePath] of trElements) {
@@ -354,7 +354,7 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
         editor.apply({
           type: 'remove_node',
           path: tablePath,
-          node: tableNode
+          node: tableNode,
         });
       };
 
@@ -362,7 +362,7 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
         const { data } = tableBlock;
         const update = {
           ...data,
-          border: hasBorder() ? '0' : '1'
+          border: hasBorder() ? '0' : '1',
         };
         const [, tablePath] = getAncestorByType(editor, 'table');
 
@@ -372,9 +372,9 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
           type: 'set_node',
           path: tablePath,
           properties: {
-            data: node.data
+            data: node.data,
           },
-          newProperties: { data: update }
+          newProperties: { data: update },
         });
       };
 
@@ -387,7 +387,7 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
         <TableToolbar
           editor={editor}
           plugins={toolbarPlugins}
-          onChange={c => onToolbarDone(c, false)}
+          onChange={(c) => onToolbarDone(c, false)}
           onAddRow={addRow}
           onRemoveRow={removeRow}
           onAddColumn={addColumn}
@@ -402,9 +402,9 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
     },
   };
 
-  core.supports = node => TABLE_TYPES.includes(node.type);
+  core.supports = (node) => TABLE_TYPES.includes(node.type);
 
-  const Node = props => {
+  const Node = (props) => {
     switch (props.node.type) {
       case 'table':
         return <Table {...props} onFocus={opts.onFocus} onBlur={opts.onBlur} />;
@@ -453,7 +453,7 @@ const attributesToMap = (el) => (acc, attribute) => {
   return acc;
 };
 
-const dataToAttributes = data => {
+const dataToAttributes = (data) => {
   return reduce(
     data,
     (acc, v, name) => {
@@ -462,7 +462,7 @@ const dataToAttributes = data => {
       }
       return acc;
     },
-    {}
+    {},
   );
 };
 
@@ -486,18 +486,18 @@ export const serialization = {
           'element',
           {
             type: 'table',
-            data: attributes.reduce(attributesToMap(el), {})
+            data: attributes.reduce(attributesToMap(el), {}),
           },
-          next(c)
+          next(c),
         );
       }
       case 'tbody': {
         return jsx(
           'element',
           {
-            type: 'tbody'
+            type: 'tbody',
           },
-          next(el.childNodes)
+          next(el.childNodes),
         );
       }
 
@@ -506,9 +506,9 @@ export const serialization = {
           'element',
           {
             type: 'th',
-            data: cellAttributes.reduce(attributesToMap(el), { header: true })
+            data: cellAttributes.reduce(attributesToMap(el), { header: true }),
           },
-          next(el.childNodes)
+          next(el.childNodes),
         );
       }
 
@@ -516,9 +516,9 @@ export const serialization = {
         return jsx(
           'element',
           {
-            type: 'tr'
+            type: 'tr',
           },
-          next(Array.from(el.children))
+          next(Array.from(el.children)),
         );
       }
 
@@ -527,9 +527,9 @@ export const serialization = {
           'element',
           {
             type: 'td',
-            data: cellAttributes.reduce(attributesToMap(el), { header: true })
+            data: cellAttributes.reduce(attributesToMap(el), { header: true }),
           },
-          next(el.childNodes)
+          next(el.childNodes),
         );
       }
     }
@@ -539,11 +539,7 @@ export const serialization = {
       case 'table': {
         const attributes = dataToAttributes(object.data);
 
-        return (
-          <table {...attributes}>
-            {children}
-          </table>
-        );
+        return <table {...attributes}>{children}</table>;
       }
       case 'tbody': {
         return <tbody>{children}</tbody>;

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

@@ -29,7 +29,7 @@ export class TableToolbar extends React.Component {
 
   static defaultProps = {
     plugins: [],
-    onChange: () => {}
+    onChange: () => {},
   };
 
   onDone = (e) => {
@@ -73,12 +73,7 @@ export class TableToolbar extends React.Component {
             <RemoveTable />
           </Button>
           {plugins.map((p, index) => (
-            <ToolbarButton
-              key={`plugin-${index}`}
-              editor={editor}
-              {...p.toolbar}
-              onChange={onChange}
-            />
+            <ToolbarButton key={`plugin-${index}`} editor={editor} {...p.toolbar} onChange={onChange} />
           ))}
           <Button onClick={onToggleBorder} active={hasBorder}>
             <BorderAll />

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

@@ -7,7 +7,7 @@ import { withStyles } from '@material-ui/core/styles';
 
 import { Button, MarkButton } from './toolbar-buttons';
 import debug from 'debug';
-import { Editor, Element as SlateElement } from "slate";
+import { Editor, Element as SlateElement } from 'slate';
 
 const log = debug('@pie-lib:editable-html:plugins:toolbar');
 
@@ -23,8 +23,8 @@ const isBlockActive = (editor, format) => {
   const [match] = Array.from(
     Editor.nodes(editor, {
       at: Editor.unhangRange(editor, selection),
-      match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
-    })
+      match: (n) => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format,
+    }),
   );
 
   return !!match;
@@ -48,9 +48,7 @@ export const ToolbarButton = (props) => {
     );
   } else {
     const { disabled } = props;
-    const isActive = props.isActive
-      ? props.isActive(editor, props.type)
-      : isBlockActive(editor, props.type);
+    const isActive = props.isActive ? props.isActive(editor, props.type) : isBlockActive(editor, props.type);
 
     log('[ToolbarButton] block:isActive: ', isActive);
 
@@ -79,7 +77,7 @@ ToolbarButton.propTypes = {
   buttonStyles: PropTypes.object,
 };
 
-const isActiveToolbarPlugin = (props) => plugin => {
+const isActiveToolbarPlugin = (props) => (plugin) => {
   const isDisabled = (props[plugin.name] || {}).disabled;
 
   return plugin && plugin.toolbar && !isDisabled;
@@ -128,8 +126,8 @@ DefaultToolbar.propTypes = {
     PropTypes.shape({
       type: PropTypes.string,
       children: PropTypes.array,
-      data: PropTypes.object
-    })
+      data: PropTypes.object,
+    }),
   ),
   onChange: PropTypes.func.isRequired,
   getFocusedValue: PropTypes.func.isRequired,