hero-editor 1.9.11 → 1.9.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hero-editor",
-  "version": "1.9.11",
+  "version": "1.9.13",
   "description": "",
   "main": "dist/lib.js",
   "scripts": {
@@ -28,9 +28,10 @@
     "webpack-cli": "^3.3.11"
   },
   "dependencies": {
+    "@juggle/resize-observer": "^3.4.0",
     "is-url": "^1.2.4",
-    "slate": "^0.70.0",
-    "slate-react": "^0.70.0"
+    "slate": "^0.71.0",
+    "slate-react": "^0.71.0"
   },
   "peerDependencies": {
     "react": "^16.13.1",

package/src/lib.js

@@ -1,5 +1,5 @@
-import React, { useState, useMemo, useEffect, useRef } from 'react';
-import { createEditor } from 'slate';
+import React, { useMemo, useEffect, useRef } from 'react';
+import { createEditor, Editor, Transforms } from 'slate';
 import { Slate, Editable, withReact } from 'slate-react';
 import {
   composeRenderLeaf,
@@ -18,6 +18,12 @@ import {
   EDITOR_BLUR,
   EDITOR_LAYOUT,
 } from './constants';
+import { ResizeObserver } from '@juggle/resize-observer';
+import { isEmptyContent } from './helpers';
+
+if (!window.ResizeObserver) {
+  window.ResizeObserver = ResizeObserver;
+}
 
 const styles = {
   editorWrapper: {
@@ -84,6 +90,12 @@ const HeroEditor = ({
 
   const toolBarButtons = useMemo(() => getToolbarButtons(plugins), [plugins]);
 
+  useEffect(() => {
+    if (editor && autoFocus && !isEmptyContent(value)) {
+      Transforms.select(editor, Editor.end(editor, []));
+    }
+  }, []);
+
   useEffect(() => {
     const removeHandlers = addMessageListeners(editor)(plugins);
 
@@ -91,18 +103,30 @@ const HeroEditor = ({
   }, [plugins]);
 
   useEffect(() => {
-    const width = wrapper.current?.offsetWidth;
-    const height = wrapper.current?.offsetHeight;
-
-    if (
-      width !== wrapperLayout.current.width ||
-      height !== wrapperLayout.current.height
-    ) {
-      wrapperLayout.current = { width, height };
-      onLayout(wrapperLayout.current);
-      postMessage(EDITOR_LAYOUT, wrapperLayout.current, editor);
-    }
-  }, [value]);
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) {
+        return;
+      }
+
+      const { width, height } = entry.contentRect;
+      if (
+        width !== wrapperLayout.current.width ||
+        height !== wrapperLayout.current.height
+      ) {
+        wrapperLayout.current = { width, height };
+        onLayout(wrapperLayout.current);
+        postMessage(EDITOR_LAYOUT, wrapperLayout.current, editor);
+      }
+    });
+    observer.observe(wrapper.current);
+
+    return () => {
+      if (wrapper.current) {
+        observer.unobserve(wrapper.current);
+      }
+    };
+  }, []);
 
   return (
     <div