@pie-lib/editable-html 9.2.6-next.4 → 9.2.7

package/src/index.jsx

@@ -18,7 +18,7 @@ export { htmlToValue, valueToHtml, Editor, DEFAULT_PLUGINS, ALL_PLUGINS };
  * `markup` api whilst avoiding the serialization mismatch. We should be making better use of schemas w/ normalize.
  */
 
-const reduceMultipleBrs = markup => {
+const reduceMultipleBrs = (markup) => {
   try {
     return markup.replace(/(<br\s*\/?>){3,}/gi, '<br>');
   } catch (e) {
@@ -33,19 +33,19 @@ export default class EditableHtml extends React.Component {
     onChange: PropTypes.func.isRequired,
     onDone: PropTypes.func,
     markup: PropTypes.string.isRequired,
-    allowValidation: PropTypes.bool
+    allowValidation: PropTypes.bool,
   };
 
   static defaultProps = {
     onDone: () => {},
-    allowValidation: false
+    allowValidation: false,
   };
 
   constructor(props) {
     super(props);
     const v = htmlToValue(props.markup);
     this.state = {
-      value: v
+      value: v,
     };
   }
 
@@ -80,13 +80,9 @@ export default class EditableHtml extends React.Component {
 
   focus = (position, node) => {
     if (this.editorRef) {
-      this.editorRef.change(c => {
-        const lastText = node
-          ? c.value.document.getNextText(node.key)
-          : c.value.document.getLastText();
-        const editorDOM = document.querySelector(
-          `[data-key="${this.editorRef.value.document.key}"]`
-        );
+      this.editorRef.change((c) => {
+        const lastText = node ? c.value.document.getNextText(node.key) : c.value.document.getLastText();
+        const editorDOM = document.querySelector(`[data-key="${this.editorRef.value.document.key}"]`);
 
         if (editorDOM !== document.activeElement) {
           document.activeElement.blur();
@@ -95,10 +91,7 @@ export default class EditableHtml extends React.Component {
         c.focus();
 
         if (position === 'end' && lastText) {
-          c.moveFocusTo(lastText.key, lastText.text?.length).moveAnchorTo(
-            lastText.key,
-            lastText.text?.length
-          );
+          c.moveFocusTo(lastText.key, lastText.text?.length).moveAnchorTo(lastText.key, lastText.text?.length);
         }
 
         if (position === 'beginning' && lastText) {
@@ -127,17 +120,17 @@ export default class EditableHtml extends React.Component {
       markup: null,
       value,
       onChange: this.onChange,
-      focus: this.focus
+      focus: this.focus,
     };
 
     return (
       <Editor
-        onRef={ref => {
+        onRef={(ref) => {
           if (ref) {
             this.rootRef = ref;
           }
         }}
-        editorRef={ref => ref && (this.editorRef = ref)}
+        editorRef={(ref) => ref && (this.editorRef = ref)}
         {...props}
       />
     );

package/src/parse-html.js

@@ -1,4 +1,4 @@
-export const parseDegrees = html =>
+export const parseDegrees = (html) =>
   html
     // removes \(   use case: 50°
     .replace(/\\[(]/g, '')

package/src/plugins/characters/custom-popper.js

@@ -8,17 +8,17 @@ const styles = () => ({
     background: '#fff',
     padding: '10px',
     pointerEvents: 'none',
-    zIndex: 99999
+    zIndex: 99999,
   },
   paper: {
     padding: 20,
     height: 'auto',
-    width: 'auto'
+    width: 'auto',
   },
   typography: {
     fontSize: 50,
-    textAlign: 'center'
-  }
+    textAlign: 'center',
+  },
 });
 
 const CustomPopper = withStyles(styles)(({ classes, children, ...props }) => (
@@ -27,15 +27,15 @@ const CustomPopper = withStyles(styles)(({ classes, children, ...props }) => (
     open
     className={classes.popover}
     classes={{
-      paper: classes.paper
+      paper: classes.paper,
     }}
     anchorOrigin={{
       vertical: 'bottom',
-      horizontal: 'left'
+      horizontal: 'left',
     }}
     transformOrigin={{
       vertical: 'top',
-      horizontal: 'left'
+      horizontal: 'left',
     }}
     disableRestoreFocus
     disableAutoFocus

package/src/plugins/characters/index.jsx

@@ -14,14 +14,14 @@ const removePopOvers = () => {
   const prevPopOvers = document.querySelectorAll('#mouse-over-popover');
 
   log('[characters:removePopOvers]');
-  prevPopOvers.forEach(s => s.remove());
+  prevPopOvers.forEach((s) => s.remove());
 };
 
 export const removeDialogs = () => {
   const prevDialogs = document.querySelectorAll('.insert-character-dialog');
 
   log('[characters:removeDialogs]');
-  prevDialogs.forEach(s => s.remove());
+  prevDialogs.forEach((s) => s.remove());
   removePopOvers();
 };
 
@@ -60,7 +60,7 @@ const insertDialog = ({ editorDOM, value, callback, opts }) => {
 
       return obj;
     },
-    { rows: configToUse.characters.length, columns: 0 }
+    { rows: configToUse.characters.length, columns: 0 },
   );
 
   let popoverEl;
@@ -91,7 +91,7 @@ const insertDialog = ({ editorDOM, value, callback, opts }) => {
 
         <div style={infoStyle}>{el.unicode}</div>
       </CustomPopper>,
-      popoverEl
+      popoverEl,
     );
 
     document.body.appendChild(newEl);
@@ -99,13 +99,12 @@ const insertDialog = ({ editorDOM, value, callback, opts }) => {
 
   let firstCallMade = false;
 
-  const listener = e => {
+  const listener = (e) => {
     // this will be triggered right after setting it because
     // 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 focusIsInEditor = editorDOM.contains(e.target);
 
       if (!(focusIsInModals || focusIsInEditor)) {
@@ -123,7 +122,7 @@ const insertDialog = ({ editorDOM, value, callback, opts }) => {
     document.body.removeEventListener('click', listener);
   };
 
-  const handleChange = val => {
+  const handleChange = (val) => {
     if (typeof val === 'string') {
       callback(val, true);
     }
@@ -139,7 +138,7 @@ const insertDialog = ({ editorDOM, value, callback, opts }) => {
       additionalKeys={configToUse.characters.reduce((arr, n) => {
         arr = [
           ...arr,
-          ...n.map(k => ({
+          ...n.map((k) => ({
             name: get(k, 'name') || k,
             write: get(k, 'write') || k,
             label: get(k, 'label') || k,
@@ -149,15 +148,15 @@ const insertDialog = ({ editorDOM, value, callback, opts }) => {
               ...(k.extraProps || {}),
               style: {
                 ...(k.extraProps || {}).style,
-                border: '1px solid #000'
-              }
+                border: '1px solid #000',
+              },
             },
             ...(configToUse.hasPreview
               ? {
-                  actions: { onMouseEnter: ev => renderPopOver(ev, k), onMouseLeave: closePopOver }
+                  actions: { onMouseEnter: (ev) => renderPopOver(ev, k), onMouseLeave: closePopOver },
                 }
-              : {})
-          }))
+              : {}),
+          })),
         ];
 
         return arr;
@@ -180,10 +179,7 @@ const insertDialog = ({ editorDOM, value, callback, opts }) => {
       newEl.style.top = `${boundRect.top + Math.abs(bodyRect.top) - newEl.offsetHeight - 10}px`;
       newEl.style.zIndex = 99999;
 
-      const leftValue = `${boundRect.left +
-        Math.abs(bodyRect.left) +
-        cursorItem.offsetWidth +
-        10}px`;
+      const leftValue = `${boundRect.left + Math.abs(bodyRect.left) + cursorItem.offsetWidth + 10}px`;
 
       const rightValue = `${boundRect.x}px`;
 
@@ -214,7 +210,7 @@ const CharacterIcon = ({ letter }) => (
   <div
     style={{
       fontSize: '25px',
-      lineHeight: '15px'
+      lineHeight: '15px',
     }}
   >
     {letter}
@@ -234,9 +230,7 @@ export default function CharactersPlugin(opts) {
           valueToUse = getFocusedValue();
 
           if (char) {
-            const change = valueToUse
-              .change()
-              .insertTextByKey(valueToUse.anchorKey, valueToUse.anchorOffset, char);
+            const change = valueToUse.change().insertTextByKey(valueToUse.anchorKey, valueToUse.anchorOffset, char);
 
             valueToUse = change.value;
             log('[characters:insert]: ', value);
@@ -253,16 +247,16 @@ export default function CharactersPlugin(opts) {
         };
 
         insertDialog({ editorDOM, value: valueToUse, callback, opts });
-      }
+      },
     },
 
     pluginStyles: (node, parentNode, p) => {
       if (p) {
         return {
           position: 'absolute',
-          top: 'initial'
+          top: 'initial',
         };
       }
-    }
+    },
   };
 }