hero-editor 1.16.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hero-editor",
-  "version": "1.16.0",
+  "version": "2.0.0",
   "description": "",
   "main": "dist/lib.js",
   "scripts": {
@@ -13,21 +13,22 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.10.2",
-    "@babel/preset-env": "^7.10.2",
-    "@babel/preset-react": "^7.10.1",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
     "@testing-library/react": "^10.2.1",
     "@testing-library/react-hooks": "^3.3.0",
     "@webpack-cli/serve": "^2.0.5",
-    "babel-jest": "^26.0.1",
-    "babel-loader": "^8.1.0",
-    "jest": "^26.0.1",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.2.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-test-renderer": "^16.13.1",
     "webpack": "^5.95.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.1.0"
+    "webpack-dev-server": "^5.2.1"
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.4.0",
@@ -40,5 +41,8 @@
   "peerDependencies": {
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
+  },
+  "jest": {
+    "testEnvironment": "jsdom"
   }
 }

package/src/constants.js

@@ -37,6 +37,7 @@ const EMPTY_VALUE = [
 
 // Link actions
 const ADD_LINK = 'add-link';
+const REQUEST_UPSERT_LINK = 'request-upsert-link';
 
 export {
   EMPTY_VALUE,
@@ -61,4 +62,5 @@ export {
   EDITOR_DELETE_BACKWARD,
   EDITOR_BUILT_IN_METHOD,
   EDITOR_READ_ONLY,
+  REQUEST_UPSERT_LINK,
 };

package/src/helpers/apply.js

@@ -1,3 +1,6 @@
-const apply = (args = []) => (func) => func(...args);
+const apply =
+  (args = []) =>
+  (func) =>
+    func(...args);
 
 export default apply;

package/src/helpers/compose.js

@@ -1,4 +1,6 @@
-const compose = (...funcs) => (arg) =>
-  funcs.reduceRight((composed, f) => (f ? f(composed) : composed), arg);
+const compose =
+  (...funcs) =>
+  (arg) =>
+    funcs.reduceRight((composed, f) => (f ? f(composed) : composed), arg);
 
 export default compose;

package/src/helpers/flow.js

@@ -1,4 +1,6 @@
-const flow = (...funcs) => (arg) =>
-  funcs.reduce((composed, f) => (f ? f(composed) : composed), arg);
+const flow =
+  (...funcs) =>
+  (arg) =>
+    funcs.reduce((composed, f) => (f ? f(composed) : composed), arg);
 
 export default flow;

package/src/helpers/why.js

@@ -1,5 +1,13 @@
 // lmao
 const y = (f) =>
-  ((g) => (...a) => f(g(g))(...a))((g) => (...a) => f(g(g))(...a));
+  (
+    (g) =>
+    (...a) =>
+      f(g(g))(...a)
+  )(
+    (g) =>
+      (...a) =>
+        f(g(g))(...a),
+  );
 
 export default y;

package/src/lib.js

@@ -1,4 +1,10 @@
-import React, { useMemo, useEffect, useRef, useState } from 'react';
+import React, {
+  useMemo,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+} from 'react';
 import { createEditor, Editor, Transforms } from 'slate';
 import { Slate, Editable, withReact } from 'slate-react';
 import { withHistory } from 'slate-history';
@@ -81,6 +87,14 @@ const HeroEditor = ({
     )(),
   );
 
+  const getToolbarState = useCallback(() => {
+    return plugins.reduce((acc, plugin) => {
+      if (plugin.isActive) {
+        acc[plugin.name] = plugin.isActive(editor);
+      }
+      return acc;
+    }, {});
+  }, [editor, plugins]);
   const renderLeaf = useMemo(() => composeRenderLeaf(plugins), [plugins]);
 
   const renderElement = useMemo(() => composeRenderElement(plugins), [plugins]);
@@ -142,7 +156,11 @@ const HeroEditor = ({
         initialValue={initialValue || value}
         onChange={(value) => {
           onChange(value);
-          postMessage(EDITOR_CHANGE, { value }, editor);
+          postMessage(
+            EDITOR_CHANGE,
+            { value, toolbarState: getToolbarState() },
+            editor,
+          );
         }}
       >
         {showToolbar ? <Toolbar>{toolBarButtons}</Toolbar> : null}

package/src/plugins/bold.js

@@ -42,4 +42,5 @@ export default () =>
     renderLeaf,
     handleMessage,
     ToolbarButton,
+    isActive: (editor) => isMarkActive(editor, BOLD),
   });

package/src/plugins/bulletedList.js

@@ -57,4 +57,5 @@ export default () =>
     renderElement,
     handleMessage,
     ToolbarButton,
+    isActive: (editor) => isBlockActive(editor, BULLETED_LIST),
   });

package/src/plugins/cursorTracker.js

@@ -2,20 +2,38 @@ import { ReactEditor } from 'slate-react';
 import { createPlugin, addMessageListener, postMessage } from '../helpers';
 import { EDITOR_CHANGE } from '../constants';
 
+const getCursorPosition = (domRange) => {
+  const rangeRect = domRange.getBoundingClientRect();
+  /**
+   * On mobile, slate insert a <br> node when adding a new line which causing the DOM range after <br /> not have a bounding client rect
+   * so we need to check if the start container is a <br> node and return the bounding client rect of it
+   */
+  if (domRange.collapsed && domRange.startContainer.nodeName === 'BR') {
+    return domRange.startContainer?.getBoundingClientRect();
+  }
+
+  return rangeRect;
+};
+
 const handleMessage = addMessageListener(EDITOR_CHANGE, ({ editor }) => {
   const { selection } = editor;
 
   if (selection) {
-    const domRange = ReactEditor.toDOMRange(editor, selection);
-    const rangeRect = domRange.getBoundingClientRect();
+    const domRange = ReactEditor.toDOMRange(editor, {
+      anchor: selection.focus,
+      focus: selection.focus,
+    });
+    const rangeRect = getCursorPosition(domRange);
+    if (!rangeRect) return;
 
     postMessage(
       'cursor-change',
       {
-        offset: undefined,
         position: {
           top: rangeRect.top,
           left: rangeRect.left,
+          bottom: rangeRect.bottom,
+          right: rangeRect.right,
         },
       },
       editor,

package/src/plugins/headingOne.js

@@ -54,4 +54,5 @@ export default () =>
     renderElement,
     handleMessage,
     ToolbarButton,
+    isActive: (editor) => isBlockActive(editor, HEADING_ONE),
   });

package/src/plugins/headingTwo.js

@@ -54,4 +54,5 @@ export default () =>
     renderElement,
     handleMessage,
     ToolbarButton,
+    isActive: (editor) => isBlockActive(editor, HEADING_TWO),
   });

package/src/plugins/italic.js

@@ -42,4 +42,5 @@ export default () =>
     renderLeaf,
     handleMessage,
     ToolbarButton,
+    isActive: (editor) => isMarkActive(editor, ITALIC),
   });

package/src/plugins/link.js

@@ -11,7 +11,7 @@ import {
   isLink,
   getUrlFromNode,
 } from '../helpers';
-import { LINK, ADD_LINK } from '../constants';
+import { LINK, ADD_LINK, REQUEST_UPSERT_LINK } from '../constants';
 import Toolbar from '../components/Toolbar';
 import Icon from '../components/Icon';
 
@@ -132,6 +132,7 @@ const LinkCustomWrapper = ({ renderLinkCustom }) => {
   useEffect(() => {
     const removeLinkCustomListener = addMessageListener(ADD_LINK, () => {
       setShowLinkCustom(true);
+      postMessage(REQUEST_UPSERT_LINK, getSelectedData(editor), editor);
     })(editor);
 
     return () => removeLinkCustomListener();
@@ -184,5 +185,6 @@ export default ({ renderLinkCustom, showToolbarButton } = {}) =>
     ToolbarButton: () => (
       <ToolbarButton showToolbarButton={showToolbarButton} />
     ),
+    isActive: (editor) => isBlockActive(editor, LINK),
     enhanceEditor,
   });

package/src/plugins/numberedList.js

@@ -60,4 +60,5 @@ export default () =>
     renderElement,
     handleMessage,
     ToolbarButton,
+    isActive: (editor) => isBlockActive(editor, NUMBERED_LIST),
   });

package/src/plugins/underline.js

@@ -45,4 +45,5 @@ export default () =>
     renderLeaf,
     handleMessage,
     ToolbarButton,
+    isActive: (editor) => isMarkActive(editor, UNDERLINE),
   });

package/src/transformers/react.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import { Text } from 'slate';
-import isUrl from 'is-url';
-import getUrl from '../helpers/getUrl';
 import y from '../helpers/why';
 import { getUrlFromNode } from '../helpers';