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

package/src/index.jsx

@@ -5,6 +5,7 @@ import Editor, { DEFAULT_PLUGINS, ALL_PLUGINS } from './editor';
 import { htmlToValue, valueToHtml } from './new-serialization';
 import { parseDegrees } from './parse-html';
 import debug from 'debug';
+import { Range } from 'slate';
 
 const log = debug('@pie-lib:editable-html');
 /**
@@ -48,15 +49,11 @@ const EditableHtml = React.forwardRef((props, forwardedRef) => {
     }
   };
 
-  const focus = (position, node) => {
+  const focus = (position, node, select = false) => {
     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();
@@ -65,15 +62,24 @@ const EditableHtml = React.forwardRef((props, forwardedRef) => {
         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 (select) {
+            const range = Range.fromJSON({
+              anchorKey: lastText.key,
+              anchorOffset: 0,
+              focusKey: lastText.key,
+              focusOffset: lastText.text?.length,
+              isFocused: true,
+              isBackward: false,
+            });
+            c.select(range);
+          }
         }
 
         if (position === 'beginning' && lastText) {
           c.moveFocusTo(lastText.key, 0).moveAnchorTo(lastText.key, 0);
         }
+        editorDOM.focus();
       });
     }
   };
@@ -88,13 +94,14 @@ const EditableHtml = React.forwardRef((props, forwardedRef) => {
     ...props,
     markup: null,
     value,
-    onChange
+    onChange,
+    focus,
   };
 
   return (
     <Editor
       {...newProps}
-      onRef={ref => {
+      onRef={(ref) => {
         if (ref) {
           rootRef.current = ref;
 
@@ -103,7 +110,7 @@ const EditableHtml = React.forwardRef((props, forwardedRef) => {
           }
         }
       }}
-      editorRef={ref => ref && (editorRef.current = ref)}
+      editorRef={(ref) => ref && (editorRef.current = ref)}
     />
   );
 });
@@ -113,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/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

@@ -1,5 +1,8 @@
 import React from 'react';
+import { ReactEditor } from 'slate-react';
+import { Editor } from 'slate';
 import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
 import debug from 'debug';
 import get from 'lodash/get';
 
@@ -8,22 +11,20 @@ import { PureToolbar } from '@pie-lib/math-toolbar';
 import CustomPopper from './custom-popper';
 import { insertSnackBar } from '../respArea/utils';
 import { characterIcons, spanishConfig, specialConfig } from './utils';
-import { ReactEditor } from 'slate-react';
-import { Editor } from 'slate';
 const log = debug('@pie-lib:editable-html:plugins:characters');
 
 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();
 };
 
@@ -62,7 +63,7 @@ const insertDialog = ({ editor, callback, opts }) => {
 
       return obj;
     },
-    { rows: configToUse.characters.length, columns: 0 }
+    { rows: configToUse.characters.length, columns: 0 },
   );
 
   let popoverEl;
@@ -93,7 +94,7 @@ const insertDialog = ({ editor, callback, opts }) => {
 
         <div style={infoStyle}>{el.unicode}</div>
       </CustomPopper>,
-      popoverEl
+      popoverEl,
     );
 
     document.body.appendChild(newEl);
@@ -101,13 +102,12 @@ const insertDialog = ({ editor, 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 editorDOM = ReactEditor.toDOMNode(editor, editor);
       const focusIsInEditor = editorDOM.contains(e.target);
 
@@ -126,7 +126,7 @@ const insertDialog = ({ editor, callback, opts }) => {
     document.body.removeEventListener('click', listener);
   };
 
-  const handleChange = val => {
+  const handleChange = (val) => {
     if (typeof val === 'string') {
       callback(val, true);
     }
@@ -138,11 +138,12 @@ const insertDialog = ({ editor, callback, opts }) => {
       noDecimal
       hideInput
       noLatexHandling
+      hideDoneButtonBackground
       layoutForKeyPad={layoutForCharacters}
       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,
@@ -152,15 +153,15 @@ const insertDialog = ({ editor, 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,14 +181,19 @@ const insertDialog = ({ editor, callback, opts }) => {
       const boundRect = cursorItem.getBoundingClientRect();
 
       document.body.appendChild(newEl);
+
+      // when height of toolbar exceeds screen - can happen in scrollable contexts
+      let additionalTopOffset = 0;
+      if (boundRect.y < newEl.offsetHeight) {
+        additionalTopOffset = newEl.offsetHeight - boundRect.y + 10;
+      }
+
+      newEl.style.maxWidth = '500px';
       newEl.style.position = 'absolute';
-      newEl.style.top = `${boundRect.top + Math.abs(bodyRect.top) - newEl.offsetHeight - 10}px`;
+      newEl.style.top = `${boundRect.top + Math.abs(bodyRect.top) - newEl.offsetHeight - 10 + additionalTopOffset}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`;
 
@@ -218,20 +224,24 @@ const CharacterIcon = ({ letter }) => (
   <div
     style={{
       fontSize: '25px',
-      lineHeight: '15px'
+      lineHeight: '15px',
     }}
   >
     {letter}
   </div>
 );
 
+CharacterIcon.propTypes = {
+  letter: PropTypes.string,
+};
+
 export default function CharactersPlugin(opts) {
   removeDialogs();
   return {
     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);
@@ -246,16 +256,16 @@ export default function CharactersPlugin(opts) {
         };
 
         insertDialog({ editor, callback, opts });
-      }
+      },
     },
 
     pluginStyles: (node, parentNode, p) => {
       if (p) {
         return {
           position: 'absolute',
-          top: 'initial'
+          top: 'initial',
         };
       }
-    }
+    },
   };
 }