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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html",
-  "version": "10.0.0-beta.6",
+  "version": "10.0.0-beta.7",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",

package/src/components.js

@@ -12,14 +12,14 @@ export const Button = React.forwardRef(({ className, active, reversed, ...props
         cursor: pointer;
 
         color: ${reversed ? (active ? 'white' : '#aaa') : active ? 'black' : '#ccc'};
-      `
+      `,
     )}
   />
 ));
 
 export const EditorValue = React.forwardRef(({ className, value, ...props }, ref) => {
   const textLines = value.document.nodes
-    .map(node => node.text)
+    .map((node) => node.text)
     .toArray()
     .join('\n');
   return (
@@ -30,7 +30,7 @@ export const EditorValue = React.forwardRef(({ className, value, ...props }, ref
         className,
         css`
           margin: 30px -20px 0;
-        `
+        `,
       )}
     >
       <div
@@ -72,7 +72,7 @@ export const Icon = React.forwardRef(({ className, ...props }, ref) => (
       css`
         font-size: 18px;
         vertical-align: text-bottom;
-      `
+      `,
     )}
   />
 ));
@@ -89,7 +89,7 @@ export const Instruction = React.forwardRef(({ className, ...props }, ref) => (
         padding: 10px 20px;
         font-size: 14px;
         background: #f8f8e8;
-      `
+      `,
     )}
   />
 ));
@@ -108,7 +108,7 @@ export const Menu = React.forwardRef(({ className, ...props }, ref) => (
         & > * + * {
           margin-left: 15px;
         }
-      `
+      `,
     )}
   />
 ));
@@ -129,7 +129,7 @@ export const Toolbar = React.forwardRef(({ className, ...props }, ref) => (
         margin: 0 -20px;
         border-bottom: 2px solid #eee;
         margin-bottom: 20px;
-      `
+      `,
     )}
   />
 ));

package/src/editor.jsx

@@ -1,10 +1,5 @@
 import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
-import {
-  Editor as OldSlateEditor,
-  findNode,
-  getEventRange,
-  getEventTransfer,
-} from 'slate-react';
+import { Editor as OldSlateEditor, findNode, getEventRange, getEventTransfer } from 'slate-react';
 import RootRef from '@material-ui/core/RootRef';
 
 import isEqual from 'lodash/isEqual';
@@ -37,7 +32,7 @@ const HOTKEYS = {
   'mod+b': 'bold',
   'mod+i': 'italic',
   'mod+u': 'underline',
-  'mod+`': 'code'
+  'mod+`': 'code',
 };
 
 const LIST_TYPES = ['numbered-list', 'bulleted-list'];
@@ -51,23 +46,23 @@ const initialValue = [
         type: 'math',
         data: {
           latex: '\\frac{1}{2}',
-          wrapper: 'round_brackets'
+          wrapper: 'round_brackets',
         },
         children: [
           {
-            text: '\\(\\frac{1}{2}\\)'
-          }
-        ]
-      }
-    ]
-  }
+            text: '\\(\\frac{1}{2}\\)',
+          },
+        ],
+      },
+    ],
+  },
 ];
 
-const SlateEditor = editorProps => {
+const SlateEditor = (editorProps) => {
   const mounted = useRef(false);
   const { autoFocus, value, plugins, actionsRef, onEditingDone } = editorProps;
-  const renderElement = useCallback(props => <Element {...props} plugins={plugins} />, []);
-  const renderLeaf = useCallback(props => <Leaf {...props} />, []);
+  const renderElement = useCallback((props) => <Element {...props} plugins={plugins} />, []);
+  const renderLeaf = useCallback((props) => <Leaf {...props} />, []);
   const editor = useMemo(() => withPlugins(createEditor(), plugins), []);
   const [isFocused, setIsFocused] = useState(false);
   const editorRef = useRef(null);
@@ -108,7 +103,7 @@ const SlateEditor = editorProps => {
 
   window.editor = editor;
 
-  const onKeyDown = event => {
+  const onKeyDown = (event) => {
     if (event.key === 'Enter' && event.shiftKey === true) {
       editor.insertText('\n');
       event.preventDefault();
@@ -124,7 +119,7 @@ const SlateEditor = editorProps => {
     }
   };
   const onFocus = () => setIsFocused(true);
-  const onBlur = e => {
+  const onBlur = (e) => {
     setTimeout(() => {
       if (!editorRef.current || !editorRef.current.contains(document.activeElement)) {
         if (editorProps.onBlur) {
@@ -154,7 +149,7 @@ const SlateEditor = editorProps => {
       if (typeof onEditingDone === 'function') {
         onEditingDone(editor);
       }
-    }
+    },
   };
 
   if (actionsRef) {
@@ -190,29 +185,25 @@ const SlateEditor = editorProps => {
 };
 
 const toggleBlock = (editor, format) => {
-  const isActive = isBlockActive(
-    editor,
-    format,
-    TEXT_ALIGN_TYPES.includes(format) ? 'align' : 'type'
-  );
+  const isActive = isBlockActive(editor, format, TEXT_ALIGN_TYPES.includes(format) ? 'align' : 'type');
   const isList = LIST_TYPES.includes(format);
 
   Transforms.unwrapNodes(editor, {
-    match: n =>
+    match: (n) =>
       !Editor.isEditor(n) &&
       SlateElement.isElement(n) &&
       LIST_TYPES.includes(n.type) &&
       !TEXT_ALIGN_TYPES.includes(format),
-    split: true
+    split: true,
   });
   let newProperties;
   if (TEXT_ALIGN_TYPES.includes(format)) {
     newProperties = {
-      align: isActive ? undefined : format
+      align: isActive ? undefined : format,
     };
   } else {
     newProperties = {
-      type: isActive ? 'paragraph' : isList ? 'list_item' : format
+      type: isActive ? 'paragraph' : isList ? 'list_item' : format,
     };
   }
   Transforms.setNodes(editor, newProperties);
@@ -240,8 +231,8 @@ const isBlockActive = (editor, format, blockType = 'type') => {
   const [match] = Array.from(
     Editor.nodes(editor, {
       at: Editor.unhangRange(editor, selection),
-      match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n[blockType] === format
-    })
+      match: (n) => !Editor.isEditor(n) && SlateElement.isElement(n) && n[blockType] === format,
+    }),
   );
 
   return !!match;
@@ -252,16 +243,14 @@ const isMarkActive = (editor, format) => {
   return marks ? marks[format] === true : false;
 };
 
-const Element = props => {
+const Element = (props) => {
   const editor = useSlateStatic();
   const focused = useFocused();
   const { attributes, children, element, plugins } = props;
   const style = { textAlign: element.align };
 
   const nodeProps = { ...attributes, ...props, node: { ...element }, children };
-  const pluginToRender = plugins.find(
-    plugin => typeof plugin.supports === 'function' && plugin.supports(element)
-  );
+  const pluginToRender = plugins.find((plugin) => typeof plugin.supports === 'function' && plugin.supports(element));
 
   if (pluginToRender) {
     return pluginToRender.renderNode({ ...nodeProps, editor, focused });
@@ -309,7 +298,7 @@ const Element = props => {
         <div
           style={{
             ...style,
-            margin: 0
+            margin: 0,
           }}
           {...attributes}
         >
@@ -348,7 +337,7 @@ const BlockButton = ({ format, icon }) => {
   return (
     <Button
       active={isBlockActive(editor, format, TEXT_ALIGN_TYPES.includes(format) ? 'align' : 'type')}
-      onMouseDown={event => {
+      onMouseDown={(event) => {
         event.preventDefault();
         toggleBlock(editor, format);
       }}
@@ -363,7 +352,7 @@ const MarkButton = ({ format, icon }) => {
   return (
     <Button
       active={isMarkActive(editor, format)}
-      onMouseDown={event => {
+      onMouseDown={(event) => {
         event.preventDefault();
         toggleMark(editor, format);
       }}
@@ -417,8 +406,8 @@ export class EditorComponent extends React.Component {
       PropTypes.shape({
         type: PropTypes.string,
         children: PropTypes.array,
-        data: PropTypes.object
-      })
+        data: PropTypes.object,
+      }),
     ),
     imageSupport: PropTypes.object,
     mathMlOptions: PropTypes.shape({
@@ -673,14 +662,14 @@ export class EditorComponent extends React.Component {
     this.setState({ selectedNode: node });
   };
 
-  onEditingDone = editor => {
+  onEditingDone = (editor) => {
     log('[onEditingDone]');
     // this.setState({ stashedValue: null, focusedNode: null });
     log('[onEditingDone] value: ', this.state.value);
     this.props.onChange(editor, true);
   };
 
-  onDone = editor => {
+  onDone = (editor) => {
     const { nonEmpty } = this.props;
 
     log('[onDone]');
@@ -1078,14 +1067,14 @@ export class EditorComponent extends React.Component {
           spellCheck={spellCheck}
           className={classNames(
             {
-              [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder
+              [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder,
             },
-            classes.slateEditor
+            classes.slateEditor,
           )}
           style={{
             minHeight: sizeStyle.minHeight,
             height: sizeStyle.height,
-            maxHeight: sizeStyle.maxHeight
+            maxHeight: sizeStyle.maxHeight,
           }}
           pluginProps={pluginProps}
           toolbarOpts={toolbarOpts}
@@ -1096,14 +1085,10 @@ export class EditorComponent extends React.Component {
     );
 
     return (
-      <div
-        ref={ref => (this.wrapperRef = ref)}
-        style={{ width: sizeStyle.width }}
-        className={names}
-      >
+      <div ref={(ref) => (this.wrapperRef = ref)} style={{ width: sizeStyle.width }} className={names}>
         <OldSlateEditor
           plugins={this.plugins}
-          toolbarRef={r => {
+          toolbarRef={(r) => {
             if (r) {
               this.toolbarRef = r;
             }

package/src/index.jsx

@@ -101,7 +101,7 @@ const EditableHtml = React.forwardRef((props, forwardedRef) => {
   return (
     <Editor
       {...newProps}
-      onRef={ref => {
+      onRef={(ref) => {
         if (ref) {
           rootRef.current = ref;
 
@@ -110,7 +110,7 @@ const EditableHtml = React.forwardRef((props, forwardedRef) => {
           }
         }
       }}
-      editorRef={ref => ref && (editorRef.current = ref)}
+      editorRef={(ref) => ref && (editorRef.current = ref)}
     />
   );
 });
@@ -120,12 +120,12 @@ EditableHtml.propTypes = {
   onDone: PropTypes.func,
   onEditor: PropTypes.func,
   markup: PropTypes.string.isRequired,
-  allowValidation: PropTypes.bool
+  allowValidation: PropTypes.bool,
 };
 
 EditableHtml.defaultProps = {
   onDone: () => {},
-  allowValidation: false
+  allowValidation: false,
 };
 
 export default EditableHtml;

package/src/new-serialization.jsx

@@ -9,9 +9,9 @@ import { serialization as mediaSerialization } from './plugins/media';
 import { serialization as listSerialization } from './plugins/list';
 import { serialization as tableSerialization } from './plugins/table';
 import { serialization as responseAreaSerialization } from './plugins/respArea';
-import { Mark, Text, Value } from "slate";
-import { jsx } from "slate-hyperscript";
-import escapeHtml from "escape-html";
+import { Mark, Text, Value } from 'slate';
+import { jsx } from 'slate-hyperscript';
+import escapeHtml from 'escape-html';
 
 const log = debug('@pie-lib:editable-html:serialization');
 
@@ -32,7 +32,7 @@ export const BLOCK_TAGS = {
   h3: 'heading-three',
   h4: 'heading-four',
   h5: 'heading-five',
-  h6: 'heading-six'
+  h6: 'heading-six',
 };
 
 /**
@@ -48,10 +48,10 @@ export const MARK_TAGS = {
   s: 'strikethrough',
   del: 'strikethrough',
   code: 'code',
-  strong: 'bold'
+  strong: 'bold',
 };
 
-export const parseStyleString = s => {
+export const parseStyleString = (s) => {
   const regex = /([\w-]*)\s*:\s*([^;]*)/g;
   let match;
   const result = {};
@@ -61,18 +61,18 @@ export const parseStyleString = s => {
   return result;
 };
 
-export const getBase64 = file => {
+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);
+    reader.onerror = (error) => reject(error);
   });
 };
 
-export const reactAttributes = o => toStyleObject(o, { camelize: true, addUnits: false });
+export const reactAttributes = (o) => toStyleObject(o, { camelize: true, addUnits: false });
 
-const attributesToMap = el => (acc, attribute) => {
+const attributesToMap = (el) => (acc, attribute) => {
   const value = el.getAttribute(attribute);
   if (value) {
     if (attribute === 'style') {
@@ -116,9 +116,9 @@ const blocks = {
         /**
          * Here for rendering styles for all block elements
          */
-        data: { attributes: attributes.reduce(attributesToMap(el), {}) }
+        data: { attributes: attributes.reduce(attributesToMap(el), {}) },
       },
-      next(el.childNodes)
+      next(el.childNodes),
     );
   },
   serialize: (object, children) => {
@@ -136,7 +136,7 @@ const blocks = {
         return <Tag {...jsonData.attributes}>{children}</Tag>;
       }
     }
-  }
+  },
 };
 
 const marks = {
@@ -175,10 +175,10 @@ const marks = {
 
       return string;
     }
-  }
+  },
 };
 
-const findPreviousText = el => {
+const findPreviousText = (el) => {
   if (el.nodeName === '#text') {
     return el;
   }
@@ -217,7 +217,7 @@ export const TEXT_RULE = {
         return array;
       }, []);
     }
-  }
+  },
 };
 
 const RULES = [
@@ -229,7 +229,7 @@ const RULES = [
   responseAreaSerialization,
   TEXT_RULE,
   blocks,
-  marks
+  marks,
 ];
 
 function allWhitespace(node) {
@@ -240,7 +240,7 @@ function allWhitespace(node) {
 function defaultParseHtml(html) {
   if (typeof DOMParser === 'undefined') {
     throw new Error(
-      'The native `DOMParser` global which the `Html` serializer uses by default is not present in this environment. You must supply the `options.parseHtml` function instead.'
+      'The native `DOMParser` global which the `Html` serializer uses by default is not present in this environment. You must supply the `options.parseHtml` function instead.',
     );
   }
 
@@ -264,14 +264,14 @@ function defaultParseHtml(html) {
 const parseHtml =
   typeof window === 'undefined'
     ? () => ({
-        childNodes: []
+        childNodes: [],
       })
     : defaultParseHtml;
 
 const serializer = new TestSerializer({
   defaultBlock: 'div',
   rules: RULES,
-  parseHtml
+  parseHtml,
 });
 
 const _extends =
@@ -290,7 +290,7 @@ const _extends =
     return target;
   };
 
-export const htmlToValue = html => {
+export const htmlToValue = (html) => {
   try {
     return serializer.deserialize(html);
   } catch (e) {
@@ -299,7 +299,7 @@ export const htmlToValue = html => {
   }
 };
 
-export const valueToHtml = value => serializer.serialize(value);
+export const valueToHtml = (value) => serializer.serialize(value);
 
 /**
  *

package/src/plugins/characters/index.jsx

@@ -107,8 +107,7 @@ const insertDialog = ({ editor, callback, opts }) => {
     // this toolbar is added on the mousedown event
     // so right after mouseup, the click will be triggered
     if (firstCallMade) {
-      const focusIsInModals =
-        newEl.contains(e.target) || (popoverEl && popoverEl.contains(e.target));
+      const focusIsInModals = newEl.contains(e.target) || (popoverEl && popoverEl.contains(e.target));
       const editorDOM = ReactEditor.toDOMNode(editor, editor);
       const focusIsInEditor = editorDOM.contains(e.target);
 
@@ -242,7 +241,7 @@ export default function CharactersPlugin(opts) {
     name: 'characters',
     toolbar: {
       icon: <CharacterIcon letter={opts.characterIcon || characterIcons[opts.language] || 'ñ'} />,
-      onClick: editor => {
+      onClick: (editor) => {
         const callback = (char, focus) => {
           if (char) {
             log('[characters:insert]: ', char);

package/src/plugins/hotKeys/index.js

@@ -28,10 +28,10 @@ export default function MarkHotkey(options) {
       isMark: true,
       type,
       icon,
-      onToggle: editor => {
+      onToggle: (editor) => {
         log('[onToggleMark] type: ', type);
         toggleMark(editor, type);
-      }
+      },
     },
     renderMark(props) {
       if (props.mark.type === type) {
@@ -49,6 +49,6 @@ export default function MarkHotkey(options) {
       // Toggle the mark `type`.
       change.toggleMark(type);
       return true;
-    }
+    },
   };
 }

package/src/plugins/image/component.jsx

@@ -17,7 +17,7 @@ export class Component extends React.Component {
     node: PropTypes.shape({
       type: PropTypes.string,
       children: PropTypes.array,
-      data: PropTypes.object
+      data: PropTypes.object,
     }).isRequired,
     focused: PropTypes.bool,
     editor: PropTypes.shape({
@@ -67,9 +67,9 @@ export class Component extends React.Component {
         type: 'set_node',
         path: nodePath,
         properties: {
-          data: node.data
+          data: node.data,
         },
-        newProperties: { data: update }
+        newProperties: { data: update },
       });
     }
   };
@@ -262,17 +262,13 @@ export class Component extends React.Component {
     });
 
     const progressClasses = classNames(classes.progress, {
-      [classes.hideProgress]: isLoaded
+      [classes.hideProgress]: isLoaded,
     });
 
     return (
       <div onFocus={onFocus} className={className} style={{ justifyContent }} {...attributes}>
         {children}
-        <LinearProgress
-          mode="determinate"
-          value={percent > 0 ? percent : 0}
-          className={progressClasses}
-        />
+        <LinearProgress mode="determinate" value={percent > 0 ? percent : 0} className={progressClasses} />
         <div className={classes.imageContainer}>
           <img
             className={classNames(classes.image, { [classes.active]: active })}