hero-editor 1.9.25 → 1.11.0

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "hero-editor",
-  "version": "1.9.25",
+  "version": "1.11.0",
   "description": "",
   "main": "dist/lib.js",
   "scripts": {
-    "build:lib": "webpack --config webpack.lib.js",
-    "build:app": "webpack --config webpack.app.js",
-    "dev": "webpack --config webpack.dev.js --watch",
+    "build:lib": "NODE_OPTIONS=\"--openssl-legacy-provider\" webpack --config webpack.lib.js",
+    "build:app": "NODE_OPTIONS=\"--openssl-legacy-provider\" webpack --config webpack.app.js",
+    "dev": "NODE_OPTIONS=\"--openssl-legacy-provider\" webpack --config webpack.dev.js --watch",
     "build": "yarn build:lib && yarn build:app",
     "test": "jest --verbose"
   },
@@ -32,8 +32,9 @@
   "dependencies": {
     "@juggle/resize-observer": "^3.4.0",
     "is-url": "^1.2.4",
-    "slate": "0.94.1",
-    "slate-react": "0.98.1"
+    "slate": "0.101.5",
+    "slate-react": "0.101.5",
+    "slate-history": "0.100.0"
   },
   "peerDependencies": {
     "react": "^16.13.1",

package/src/lib.js

@@ -1,6 +1,7 @@
-import React, { useMemo, useEffect, useRef } from 'react';
+import React, { useMemo, useEffect, useRef, useState } from 'react';
 import { createEditor, Editor, Transforms } from 'slate';
 import { Slate, Editable, withReact } from 'slate-react';
+import { withHistory } from 'slate-history';
 import {
   composeRenderLeaf,
   composeRenderElement,
@@ -70,24 +71,24 @@ const HeroEditor = ({
   const wrapper = useRef(null);
   const wrapperLayout = useRef({ width: 0, height: 0 });
 
-  const editorRef = useRef();
-  if (!editorRef.current)
-    editorRef.current = flow(
+  const [editor] = useState(() =>
+    flow(
       createEditor,
+      withHistory,
       withReact,
       withId(id),
       ...map(get('enhanceEditor'))(plugins),
-    )();
-  const editor = editorRef.current;
+    )(),
+  );
 
   const renderLeaf = useMemo(() => composeRenderLeaf(plugins), [plugins]);
 
   const renderElement = useMemo(() => composeRenderElement(plugins), [plugins]);
 
-  const renderCustom = useMemo(() => () => getCustomElements(editor)(plugins), [
-    plugins,
-    value,
-  ]);
+  const renderCustom = useMemo(
+    () => () => getCustomElements(editor)(plugins),
+    [plugins, value],
+  );
 
   const toolBarButtons = useMemo(() => getToolbarButtons(plugins), [plugins]);
 

package/src/plugins/editorResetter.js

@@ -1,16 +1,18 @@
-import { createPlugin, addMessageListener } from '../helpers';
+import { Transforms } from 'slate';
+
 import { EMPTY_VALUE } from '../constants';
+import { addMessageListener, createPlugin } from '../helpers';
 
 const name = 'editor-resetter';
-
 const handleMessage = addMessageListener(
   'reset',
   ({ editor, data = EMPTY_VALUE }) => {
-    editor.children = data;
-    editor.selection = {
-      anchor: { path: [0, 0], offset: 0 },
-      focus: { path: [0, 0], offset: 0 },
-    };
+    // Delete all editor content
+    editor.children.map(() => {
+      Transforms.delete(editor, { at: [0] });
+    });
+
+    Transforms.insertNodes(editor, data);
     editor.onChange();
   },
 );

package/src/plugins/mention.js

@@ -95,25 +95,27 @@ const MentionListWrapper = ({ renderMentionList }) => {
       ({ data }) => {
         const wrapperEl = wrapper.current;
 
-        if (data.target) {
-          const domRange = ReactEditor.toDOMRange(editor, data.target);
-          const rangeRect = domRange.getBoundingClientRect();
-          const editorRect = wrapperEl.parentElement.getBoundingClientRect();
-
-          const wrapperLeft = rangeRect.left - editorRect.left;
-          const wrapperRight = editorRect.right - rangeRect.right;
-
-          wrapperEl.style.display = 'block';
-          wrapperEl.style.top = `${rangeRect.top - editorRect.top + 20}px`;
-          if (wrapperEl.offsetWidth > editorRect.width - wrapperLeft) {
-            wrapperEl.style.left = 'unset';
-            wrapperEl.style.right = `${wrapperRight}px`;
+        if(wrapperEl) {
+          if (data.target) {
+            const domRange = ReactEditor.toDOMRange(editor, data.target);
+            const rangeRect = domRange.getBoundingClientRect();
+            const editorRect = wrapperEl.parentElement.getBoundingClientRect();
+  
+            const wrapperLeft = rangeRect.left - editorRect.left;
+            const wrapperRight = editorRect.right - rangeRect.right;
+  
+            wrapperEl.style.display = 'block';
+            wrapperEl.style.top = `${rangeRect.top - editorRect.top + 20}px`;
+            if (wrapperEl.offsetWidth > editorRect.width - wrapperLeft) {
+              wrapperEl.style.left = 'unset';
+              wrapperEl.style.right = `${wrapperRight}px`;
+            } else {
+              wrapperEl.style.left = `${wrapperLeft}px`;
+              wrapperEl.style.right = 'unset';
+            }
           } else {
-            wrapperEl.style.left = `${wrapperLeft}px`;
-            wrapperEl.style.right = 'unset';
+            wrapperEl.style.display = 'none';
           }
-        } else {
-          wrapperEl.style.display = 'none';
         }
 
         setSearch(data.search);