@hero-design/rn 8.108.2 → 8.109.0

package/lib/index.js

@@ -28393,9 +28393,11 @@ var ToolbarEvents;
   ToolbarEvents["HeadingOne"] = "heading-one";
   ToolbarEvents["HeadingTwo"] = "heading-two";
 })(ToolbarEvents || (ToolbarEvents = {}));
-
-var emitter = new events.EventEmitter();
-emitter.setMaxListeners(20);
+var EditorEvents;
+(function (EditorEvents) {
+  EditorEvents["EditorFocus"] = "editor-focus";
+  EditorEvents["EditorBlur"] = "editor-blur";
+})(EditorEvents || (EditorEvents = {}));
 
 var StyledToolbarButton = index$c(reactNative.TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
@@ -28441,6 +28443,40 @@ var on = function on(emitter, eventName, listener) {
   };
 };
 
+var emitter = new events.EventEmitter();
+emitter.setMaxListeners(20);
+
+/**
+ * Hook to subscribe to events for a rich text editor
+ * @param editorName - The name of the editor to subscribe to events for
+ * @returns An object with two functions: emitEvent and subscribeToEvents
+ * @example
+ * const { emitEvent, subscribeToEvents } = useRichTextEditorEvents('editorName');
+ * subscribeToEvents(EditorEvents.EditorFocus, () => {
+ *   console.log('Editor focused');
+ * });
+ * emitEvent({ type: EditorEvents.EditorFocus, data: null });
+ */
+var useRichTextEditorEvents = function useRichTextEditorEvents(editorName) {
+  var normalizeEventName = React.useCallback(function (event) {
+    return "".concat(editorName, "/").concat(event);
+  }, [editorName]);
+  var subscribeToEvents = React.useCallback(function (eventName, onEvent) {
+    return on(emitter, normalizeEventName(eventName), function (eventData) {
+      onEvent(eventData);
+    });
+  }, [normalizeEventName]);
+  var emitEvent = React.useCallback(function (_ref) {
+    var type = _ref.type,
+      data = _ref.data;
+    emit(emitter, normalizeEventName(type), data);
+  }, [normalizeEventName]);
+  return {
+    emitEvent: emitEvent,
+    subscribeToEvents: subscribeToEvents
+  };
+};
+
 var ToolbarButton = function ToolbarButton(_ref) {
   var icon = _ref.icon,
     onPress = _ref.onPress,
@@ -28510,14 +28546,14 @@ var EditorToolbar = function EditorToolbar(_ref2) {
     _useState4 = _slicedToArray(_useState3, 2),
     toolbarButtonArray = _useState4[0],
     setToolbarButtonArray = _useState4[1];
-  var normalizeEventName = React.useCallback(function (event) {
-    return "".concat(name, "/").concat(event);
-  }, [name]);
+  var _useRichTextEditorEve = useRichTextEditorEvents(name),
+    emitEvent = _useRichTextEditorEve.emitEvent,
+    subscribeToEvents = _useRichTextEditorEve.subscribeToEvents;
   React.useEffect(function () {
-    var removeFocusListener = on(emitter, normalizeEventName('editor-focus'), function () {
+    var removeFocusListener = subscribeToEvents(EditorEvents.EditorFocus, function () {
       return setShow(true);
     });
-    var removeBlurListener = on(emitter, normalizeEventName('editor-blur'), function () {
+    var removeBlurListener = subscribeToEvents(EditorEvents.EditorBlur, function () {
       return setShow(false);
     });
     return function () {
@@ -28560,7 +28596,10 @@ var EditorToolbar = function EditorToolbar(_ref2) {
           icon: config.icon,
           onPress: function onPress() {
             toggleToolbarButton(button);
-            emit(emitter, normalizeEventName(config.eventName), null);
+            emitEvent({
+              type: config.eventName,
+              data: null
+            });
           },
           selected: button.selected
         });
@@ -28582,7 +28621,7 @@ var isEmptyString = function isEmptyString(s) {
 var MentionList = function MentionList(_ref) {
   var eventPrefix = _ref.name,
     render = _ref.render;
-  var theme = useTheme$1();
+  var theme = useTheme();
   var _useState = React.useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     search = _useState2[0],
@@ -28615,7 +28654,7 @@ var MentionList = function MentionList(_ref) {
     var highlighted = options.highlighted,
       meta = options.meta;
     var highlightStyle = {
-      color: theme.colors.secondary,
+      color: theme.colors.primary,
       borderRadius: theme.__hd__.richTextEditor.radii.mention,
       padding: highlighted ? theme.__hd__.richTextEditor.space.mention : 0,
       background: highlighted ? theme.colors.highlightedSurface : 'transparent',
@@ -47340,8 +47379,7 @@ var StyledWebView = index$c(reactNativeWebview.WebView)(function (_ref2) {
     minHeight: theme.__hd__.richTextEditor.sizes.editorMinHeight,
     backgroundColor: 'transparent',
     textAlignVertical: 'center',
-    fontSize: theme.__hd__.textInput.fontSizes.text,
-    marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin
+    fontSize: theme.__hd__.textInput.fontSizes.text
   };
 });
 
@@ -47353,13 +47391,13 @@ var postMessage = function postMessage(element, message) {
   element.injectJavaScript("window.postMessage(".concat(messageString, ", '*');"));
 };
 
-var defaultValue = [{
+var defaultValue$1 = [{
   type: 'paragraph',
   children: [{
     text: ''
   }]
 }];
-var RichTextEditor = function RichTextEditor(_ref) {
+var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
   var _ref$autoFocus = _ref.autoFocus,
     autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
     name = _ref.name,
@@ -47367,18 +47405,15 @@ var RichTextEditor = function RichTextEditor(_ref) {
     placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
     onChange = _ref.onChange,
     onCursorChange = _ref.onCursorChange,
-    _ref$error = _ref.error,
-    error = _ref$error === void 0 ? '' : _ref$error,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
-    label = _ref.label,
-    helpText = _ref.helpText,
-    required = _ref.required,
     testID = _ref.testID,
-    forwardedRef = _ref.forwardedRef,
+    editorRef = _ref.editorRef,
     _ref$value = _ref.value,
-    value = _ref$value === void 0 ? defaultValue : _ref$value;
-  var theme = useTheme$1();
+    value = _ref$value === void 0 ? defaultValue$1 : _ref$value,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur;
+  var theme = useTheme();
   var webview = React.useRef(null);
   var _useState = React.useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -47388,18 +47423,6 @@ var RichTextEditor = function RichTextEditor(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     isFocused = _useState4[0],
     setIsFocused = _useState4[1];
-  var isEmptyValue = React.useMemo(function () {
-    return libExports.isEmptyContent(value);
-  }, [value]);
-  var state = React.useMemo(function () {
-    if (error) {
-      return 'error';
-    }
-    if (isEmptyValue) {
-      return 'filled';
-    }
-    return 'default';
-  }, [isFocused, error, isEmptyValue]);
   var normalizeEventName = function normalizeEventName(event) {
     return "".concat(name, "/").concat(event);
   };
@@ -47408,45 +47431,6 @@ var RichTextEditor = function RichTextEditor(_ref) {
       postMessage(webview.current, message);
     }
   };
-  var _React$useState = React__namespace.default.useState({
-      height: 0,
-      width: 0
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    inputSize = _React$useState2[0],
-    setInputSize = _React$useState2[1];
-  var focusAnimation = React.useRef(new reactNative.Animated.Value(0)).current;
-  React.useEffect(function () {
-    reactNative.Animated.timing(focusAnimation, {
-      toValue: isFocused || !isEmptyValue ? 1 : 0,
-      duration: LABEL_ANIMATION_DURATION,
-      easing: reactNative.Easing.bezier(0.4, 0, 0.2, 1),
-      useNativeDriver: true
-    }).start();
-  }, [focusAnimation, isEmptyValue, isFocused]);
-  var onLayout = React.useCallback(function (event) {
-    var _event$nativeEvent$la = event.nativeEvent.layout,
-      height = _event$nativeEvent$la.height,
-      width = _event$nativeEvent$la.width;
-    setInputSize(function (prev) {
-      return _objectSpread2(_objectSpread2({}, prev), {}, {
-        height: height,
-        width: width
-      });
-    });
-  }, []);
-  React.useEffect(function () {
-    var removeFocusListener = on(emitter, normalizeEventName('editor-focus'), function () {
-      return setIsFocused(true);
-    });
-    var removeBlurListener = on(emitter, normalizeEventName('editor-blur'), function () {
-      return setIsFocused(false);
-    });
-    return function () {
-      removeFocusListener();
-      removeBlurListener();
-    };
-  }, []);
   var html = React.useMemo(function () {
     var initialValueString = JSON.stringify(value);
     return "\n      <!DOCTYPE html>\n      <html>\n        <head>\n          <meta charset=\"utf-8\">\n          <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0\">\n          <style>\n            body {\n              margin: 0;\n            }\n          </style>\n        </head>\n        <body>\n          <div id=\"root\"></div>\n          <script>\n            window.__editorConfigs = {\n              placeholder: \"".concat(placeholder, "\",\n              initialValue: ").concat(initialValueString, ",\n              isAndroid: ").concat(isAndroid ? 'true' : 'false', ",\n              autoFocus: ").concat(autoFocus, ",\n              style: {\n                padding: '0 !important',\n                fontSize: ").concat(theme.__hd__.richTextEditor.fontSizes.editor, ",\n                color: '").concat(theme.__hd__.richTextEditor.colors.text, "'\n              }\n            };\n            ").concat(heroEditorApp, "\n          </script>\n        </body>\n      </html>\n      ");
@@ -47480,7 +47464,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
       }
     });
   }, []);
-  React.useImperativeHandle(forwardedRef, function () {
+  React.useImperativeHandle(editorRef, function () {
     return {
       requestBlur: requestBlur,
       insertNodes: insertNodes,
@@ -47528,9 +47512,13 @@ var RichTextEditor = function RichTextEditor(_ref) {
     var messageData = message === null || message === void 0 ? void 0 : message.data;
     switch (messageType) {
       case '@hero-editor/webview/editor-focus':
+        onFocus === null || onFocus === void 0 || onFocus();
+        setIsFocused(true);
         emit(emitter, normalizeEventName('editor-focus'), undefined);
         break;
       case '@hero-editor/webview/editor-blur':
+        onBlur === null || onBlur === void 0 || onBlur();
+        setIsFocused(false);
         emit(emitter, normalizeEventName('editor-blur'), undefined);
         break;
       case '@hero-editor/webview/mention-search':
@@ -47548,7 +47536,107 @@ var RichTextEditor = function RichTextEditor(_ref) {
         handleEditorLayoutEvent(messageData);
         break;
     }
+  }, [onFocus, onBlur]);
+  return /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableWithoutFeedback, {
+    onPress: function onPress(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledWebView, {
+    hideKeyboardAccessoryView: true,
+    ref: webview,
+    testID: testID,
+    source: {
+      html: html
+    },
+    onMessage: onMessage,
+    scrollEnabled: false,
+    originWhitelist: ['*'],
+    keyboardDisplayRequiresUserAction: false,
+    style: reactNative.StyleSheet.flatten([style, {
+      height: webviewHeight
+    }])
+  }));
+};
+
+var defaultValue = [{
+  type: 'paragraph',
+  children: [{
+    text: ''
+  }]
+}];
+var RichTextEditor = function RichTextEditor(_ref) {
+  var _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
+    name = _ref.name,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+    onChange = _ref.onChange,
+    onCursorChange = _ref.onCursorChange,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? '' : _ref$error,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    label = _ref.label,
+    helpText = _ref.helpText,
+    required = _ref.required,
+    testID = _ref.testID,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    forwardedRef = _ref.forwardedRef,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? defaultValue : _ref$value;
+  var theme = useTheme();
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
+  var isEmptyValue = React.useMemo(function () {
+    return libExports.isEmptyContent(value);
+  }, [value]);
+  var state = React.useMemo(function () {
+    if (error) {
+      return 'error';
+    }
+    if (isEmptyValue) {
+      return 'filled';
+    }
+    return 'default';
+  }, [isFocused, error, isEmptyValue]);
+  var _React$useState = React__namespace.default.useState({
+      height: 0,
+      width: 0
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    inputSize = _React$useState2[0],
+    setInputSize = _React$useState2[1];
+  var focusAnimation = React.useRef(new reactNative.Animated.Value(0)).current;
+  React.useEffect(function () {
+    reactNative.Animated.timing(focusAnimation, {
+      toValue: isFocused || !isEmptyValue ? 1 : 0,
+      duration: LABEL_ANIMATION_DURATION,
+      easing: reactNative.Easing.bezier(0.4, 0, 0.2, 1),
+      useNativeDriver: true
+    }).start();
+  }, [focusAnimation, isEmptyValue, isFocused]);
+  var onLayout = React.useCallback(function (event) {
+    var _event$nativeEvent$la = event.nativeEvent.layout,
+      height = _event$nativeEvent$la.height,
+      width = _event$nativeEvent$la.width;
+    setInputSize(function (prev) {
+      return _objectSpread2(_objectSpread2({}, prev), {}, {
+        height: height,
+        width: width
+      });
+    });
   }, []);
+  var handleEditorFocus = React.useCallback(function () {
+    onFocus === null || onFocus === void 0 || onFocus();
+    setIsFocused(true);
+  }, [onFocus]);
+  var handleEditorBlur = React.useCallback(function () {
+    onBlur === null || onBlur === void 0 || onBlur();
+    setIsFocused(false);
+  }, [onBlur]);
   return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$6, {
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(StyledLabelContainerInsideTextInput, {
@@ -47590,27 +47678,22 @@ var RichTextEditor = function RichTextEditor(_ref) {
     themeState: state,
     themeFocused: isFocused
   }), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputAndLabelContainer, {
-    style: {
-      height: webviewHeight
-    },
     testID: "webViewWrapper"
-  }, /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableWithoutFeedback, {
-    onPress: function onPress(e) {
-      return e.stopPropagation();
-    }
-  }, /*#__PURE__*/React__namespace.default.createElement(StyledWebView, {
-    ref: webview,
+  }, /*#__PURE__*/React__namespace.default.createElement(BaseRichTextEditor, {
+    name: name,
+    value: value,
+    style: [style, {
+      marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin
+    }],
     testID: "webview",
-    style: style,
-    originWhitelist: ['*'],
-    source: {
-      html: html
-    },
-    onMessage: onMessage,
-    scrollEnabled: false,
-    hideKeyboardAccessoryView: true,
-    keyboardDisplayRequiresUserAction: false
-  })))), /*#__PURE__*/React__namespace.default.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__namespace.default.createElement(StyledErrorAndMaxLengthContainer, null, error ? /*#__PURE__*/React__namespace.default.createElement(StyledErrorContainer$2, null, /*#__PURE__*/React__namespace.default.createElement(Icon, {
+    onChange: onChange,
+    autoFocus: autoFocus,
+    editorRef: forwardedRef,
+    placeholder: placeholder,
+    onBlur: handleEditorBlur,
+    onFocus: handleEditorFocus,
+    onCursorChange: onCursorChange
+  }))), /*#__PURE__*/React__namespace.default.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__namespace.default.createElement(StyledErrorAndMaxLengthContainer, null, error ? /*#__PURE__*/React__namespace.default.createElement(StyledErrorContainer$2, null, /*#__PURE__*/React__namespace.default.createElement(Icon, {
     testID: "input-error-icon",
     icon: "circle-info",
     size: "xsmall",
@@ -47627,8 +47710,12 @@ var RichTextEditorWithRef = /*#__PURE__*/React.forwardRef(function (props, ref)
 RichTextEditorWithRef.displayName = 'RichTextEditor';
 
 var index = Object.assign(RichTextEditorWithRef, {
+  Toolbar: EditorToolbar,
   MentionList: MentionList,
-  Toolbar: EditorToolbar
+  EditorEvents: EditorEvents,
+  ToolbarEvents: ToolbarEvents,
+  useRichTextEditorEvents: useRichTextEditorEvents,
+  Base: BaseRichTextEditor
 });
 
 var LAST_BREAKPOINT = 100;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.108.2",
+  "version": "8.109.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",