@hero-design/rn 8.108.2 → 8.109.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3373) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3326) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -8,16 +8,10 @@ node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/sr
 node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/src/selection/filter.js -> node_modules/d3-selection/src/selection/index.js
 ...and 12 more
 (!) [plugin replace] @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
-(!) [plugin typescript] src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx (61:35): @rollup/plugin-typescript TS2307: Cannot find module '../../../../types' or its corresponding type declarations.
-/home/runner/work/hero-design/hero-design/packages/rn/src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx:61:35
-
-61 import { RichTextEditorRef } from '../../../../types';
-                                     ~~~~~~~~~~~~~~~~~~~
-
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 1m 12.7s
+created lib/index.js, es/index.js in 1m 12.1s
 
 /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_AU.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_CA.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/index.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/types.ts → ., ....
 (!) Generated empty chunks
 "locales/types" and "locales/types"
-created ., . in 23.9s
+created ., . in 20.9s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.109.0
+
+### Minor Changes
+
+- [#4220](https://github.com/Thinkei/hero-design/pull/4220) [`c7a8a34a159cec6ce2097614ae47c6d6a575a794`](https://github.com/Thinkei/hero-design/commit/c7a8a34a159cec6ce2097614ae47c6d6a575a794) Thanks [@khoaddtran](https://github.com/khoaddtran)! - [RichTextEditor] Introduce RichTextEditor.Base and `useRichTextEditorEvents` hook
+
 ## 8.108.2
 
 ### Patch Changes

package/es/index.js

@@ -28364,9 +28364,11 @@ var ToolbarEvents;
   ToolbarEvents["HeadingOne"] = "heading-one";
   ToolbarEvents["HeadingTwo"] = "heading-two";
 })(ToolbarEvents || (ToolbarEvents = {}));
-
-var emitter = new EventEmitter();
-emitter.setMaxListeners(20);
+var EditorEvents;
+(function (EditorEvents) {
+  EditorEvents["EditorFocus"] = "editor-focus";
+  EditorEvents["EditorBlur"] = "editor-blur";
+})(EditorEvents || (EditorEvents = {}));
 
 var StyledToolbarButton = index$c(TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
@@ -28412,6 +28414,40 @@ var on = function on(emitter, eventName, listener) {
   };
 };
 
+var emitter = new 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 = useCallback(function (event) {
+    return "".concat(editorName, "/").concat(event);
+  }, [editorName]);
+  var subscribeToEvents = useCallback(function (eventName, onEvent) {
+    return on(emitter, normalizeEventName(eventName), function (eventData) {
+      onEvent(eventData);
+    });
+  }, [normalizeEventName]);
+  var emitEvent = 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,
@@ -28481,14 +28517,14 @@ var EditorToolbar = function EditorToolbar(_ref2) {
     _useState4 = _slicedToArray(_useState3, 2),
     toolbarButtonArray = _useState4[0],
     setToolbarButtonArray = _useState4[1];
-  var normalizeEventName = useCallback(function (event) {
-    return "".concat(name, "/").concat(event);
-  }, [name]);
+  var _useRichTextEditorEve = useRichTextEditorEvents(name),
+    emitEvent = _useRichTextEditorEve.emitEvent,
+    subscribeToEvents = _useRichTextEditorEve.subscribeToEvents;
   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 () {
@@ -28531,7 +28567,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
         });
@@ -28553,7 +28592,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 = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     search = _useState2[0],
@@ -28586,7 +28625,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',
@@ -47311,8 +47350,7 @@ var StyledWebView = index$c(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
   };
 });
 
@@ -47324,13 +47362,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,
@@ -47338,18 +47376,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 = useRef(null);
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -47359,18 +47394,6 @@ var RichTextEditor = function RichTextEditor(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     isFocused = _useState4[0],
     setIsFocused = _useState4[1];
-  var isEmptyValue = useMemo(function () {
-    return libExports.isEmptyContent(value);
-  }, [value]);
-  var state = 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);
   };
@@ -47379,45 +47402,6 @@ var RichTextEditor = function RichTextEditor(_ref) {
       postMessage(webview.current, message);
     }
   };
-  var _React$useState = React__default.useState({
-      height: 0,
-      width: 0
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    inputSize = _React$useState2[0],
-    setInputSize = _React$useState2[1];
-  var focusAnimation = useRef(new Animated.Value(0)).current;
-  useEffect(function () {
-    Animated.timing(focusAnimation, {
-      toValue: isFocused || !isEmptyValue ? 1 : 0,
-      duration: LABEL_ANIMATION_DURATION,
-      easing: Easing.bezier(0.4, 0, 0.2, 1),
-      useNativeDriver: true
-    }).start();
-  }, [focusAnimation, isEmptyValue, isFocused]);
-  var onLayout = 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
-      });
-    });
-  }, []);
-  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 = 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      ");
@@ -47451,7 +47435,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
       }
     });
   }, []);
-  useImperativeHandle(forwardedRef, function () {
+  useImperativeHandle(editorRef, function () {
     return {
       requestBlur: requestBlur,
       insertNodes: insertNodes,
@@ -47499,9 +47483,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':
@@ -47519,7 +47507,107 @@ var RichTextEditor = function RichTextEditor(_ref) {
         handleEditorLayoutEvent(messageData);
         break;
     }
+  }, [onFocus, onBlur]);
+  return /*#__PURE__*/React__default.createElement(TouchableWithoutFeedback, {
+    onPress: function onPress(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledWebView, {
+    hideKeyboardAccessoryView: true,
+    ref: webview,
+    testID: testID,
+    source: {
+      html: html
+    },
+    onMessage: onMessage,
+    scrollEnabled: false,
+    originWhitelist: ['*'],
+    keyboardDisplayRequiresUserAction: false,
+    style: StyleSheet$1.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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
+  var isEmptyValue = useMemo(function () {
+    return libExports.isEmptyContent(value);
+  }, [value]);
+  var state = useMemo(function () {
+    if (error) {
+      return 'error';
+    }
+    if (isEmptyValue) {
+      return 'filled';
+    }
+    return 'default';
+  }, [isFocused, error, isEmptyValue]);
+  var _React$useState = React__default.useState({
+      height: 0,
+      width: 0
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    inputSize = _React$useState2[0],
+    setInputSize = _React$useState2[1];
+  var focusAnimation = useRef(new Animated.Value(0)).current;
+  useEffect(function () {
+    Animated.timing(focusAnimation, {
+      toValue: isFocused || !isEmptyValue ? 1 : 0,
+      duration: LABEL_ANIMATION_DURATION,
+      easing: Easing.bezier(0.4, 0, 0.2, 1),
+      useNativeDriver: true
+    }).start();
+  }, [focusAnimation, isEmptyValue, isFocused]);
+  var onLayout = 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 = useCallback(function () {
+    onFocus === null || onFocus === void 0 || onFocus();
+    setIsFocused(true);
+  }, [onFocus]);
+  var handleEditorBlur = useCallback(function () {
+    onBlur === null || onBlur === void 0 || onBlur();
+    setIsFocused(false);
+  }, [onBlur]);
   return /*#__PURE__*/React__default.createElement(StyledContainer$6, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(StyledLabelContainerInsideTextInput, {
@@ -47561,27 +47649,22 @@ var RichTextEditor = function RichTextEditor(_ref) {
     themeState: state,
     themeFocused: isFocused
   }), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, {
-    style: {
-      height: webviewHeight
-    },
     testID: "webViewWrapper"
-  }, /*#__PURE__*/React__default.createElement(TouchableWithoutFeedback, {
-    onPress: function onPress(e) {
-      return e.stopPropagation();
-    }
-  }, /*#__PURE__*/React__default.createElement(StyledWebView, {
-    ref: webview,
+  }, /*#__PURE__*/React__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__default.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default.createElement(StyledErrorAndMaxLengthContainer, null, error ? /*#__PURE__*/React__default.createElement(StyledErrorContainer$2, null, /*#__PURE__*/React__default.createElement(Icon, {
+    onChange: onChange,
+    autoFocus: autoFocus,
+    editorRef: forwardedRef,
+    placeholder: placeholder,
+    onBlur: handleEditorBlur,
+    onFocus: handleEditorFocus,
+    onCursorChange: onCursorChange
+  }))), /*#__PURE__*/React__default.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default.createElement(StyledErrorAndMaxLengthContainer, null, error ? /*#__PURE__*/React__default.createElement(StyledErrorContainer$2, null, /*#__PURE__*/React__default.createElement(Icon, {
     testID: "input-error-icon",
     icon: "circle-info",
     size: "xsmall",
@@ -47598,8 +47681,12 @@ var RichTextEditorWithRef = /*#__PURE__*/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;