@pie-lib/editable-html 9.5.13 → 10.0.0-beta.1

package/src/plugins/characters/index.jsx

@@ -8,24 +8,26 @@ 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();
 };
 
-const insertDialog = ({ editorDOM, value, callback, opts }) => {
+const insertDialog = ({ editor, callback, opts }) => {
   const newEl = document.createElement('div');
 
   log('[characters:insertDialog]');
@@ -60,7 +62,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 +93,7 @@ const insertDialog = ({ editorDOM, value, callback, opts }) => {
 
         <div style={infoStyle}>{el.unicode}</div>
       </CustomPopper>,
-      popoverEl,
+      popoverEl
     );
 
     document.body.appendChild(newEl);
@@ -99,12 +101,14 @@ 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 editorDOM = ReactEditor.toDOMNode(editor, editor);
       const focusIsInEditor = editorDOM.contains(e.target);
 
       if (!(focusIsInModals || focusIsInEditor)) {
@@ -122,7 +126,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);
     }
@@ -138,7 +142,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,
@@ -148,15 +152,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;
@@ -168,7 +172,8 @@ const insertDialog = ({ editorDOM, value, callback, opts }) => {
   );
 
   ReactDOM.render(el, newEl, () => {
-    const cursorItem = document.querySelector(`[data-key="${value.anchorKey}"]`);
+    const [nodeAtSelection] = Editor.node(editor, editor.selection);
+    const cursorItem = ReactEditor.toDOMNode(editor, nodeAtSelection);
 
     if (cursorItem) {
       const bodyRect = document.body.getBoundingClientRect();
@@ -179,7 +184,10 @@ 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`;
 
@@ -210,7 +218,7 @@ const CharacterIcon = ({ letter }) => (
   <div
     style={{
       fontSize: '25px',
-      lineHeight: '15px',
+      lineHeight: '15px'
     }}
   >
     {letter}
@@ -223,40 +231,31 @@ export default function CharactersPlugin(opts) {
     name: 'characters',
     toolbar: {
       icon: <CharacterIcon letter={opts.characterIcon || characterIcons[opts.language] || 'ñ'} />,
-      onClick: (value, onChange, getFocusedValue) => {
-        const editorDOM = document.querySelector(`[data-key="${value.document.key}"]`);
-        let valueToUse = value;
+      onClick: editor => {
         const callback = (char, focus) => {
-          valueToUse = getFocusedValue();
-
           if (char) {
-            const change = valueToUse.change().insertTextByKey(valueToUse.anchorKey, valueToUse.anchorOffset, char);
-
-            valueToUse = change.value;
-            log('[characters:insert]: ', value);
-            onChange(change);
+            log('[characters:insert]: ', char);
+            editor.insertText(char);
           }
 
           log('[characters:click]');
 
           if (focus) {
-            if (editorDOM) {
-              editorDOM.focus();
-            }
+            ReactEditor.focus(editor);
           }
         };
 
-        insertDialog({ editorDOM, value: valueToUse, callback, opts });
-      },
+        insertDialog({ editor, callback, opts });
+      }
     },
 
     pluginStyles: (node, parentNode, p) => {
       if (p) {
         return {
           position: 'absolute',
-          top: 'initial',
+          top: 'initial'
         };
       }
-    },
+    }
   };
 }