@expensify/react-native-live-markdown 0.1.60 → 0.1.62

package/src/MarkdownTextInput.web.tsx

@@ -310,9 +310,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         return;
       }
 
-      const hostNode = (divRef.current.firstChild as HTMLElement) ?? divRef.current;
-      const newWidth = hostNode.offsetWidth;
-      const newHeight = hostNode.offsetHeight;
+      const {offsetWidth: newWidth, offsetHeight: newHeight} = divRef.current;
 
       if (newHeight !== dimensions.current?.height || newWidth !== dimensions.current.width) {
         dimensions.current = {height: newHeight, width: newWidth};
@@ -569,6 +567,11 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       }
     }, [autoFocus]);
 
+    useEffect(() => {
+      // update content size when the input styles change
+      handleContentSizeChange();
+    }, [handleContentSizeChange, inputStyles]);
+
     useEffect(() => {
       if (!divRef.current || !selection || (contentSelection.current && selection.start === contentSelection.current.start && selection.end === contentSelection.current.end)) {
         return;

package/src/MarkdownTextInputDecoratorViewNativeComponent.ts

@@ -42,6 +42,10 @@ interface MarkdownStyle {
     color: ColorValue;
     backgroundColor: ColorValue;
   };
+  mentionReport: {
+    color: ColorValue;
+    backgroundColor: ColorValue;
+  };
 }
 
 interface NativeProps extends ViewProps {

package/src/styleUtils.ts

@@ -52,6 +52,10 @@ function makeDefaultMarkdownStyle(): MarkdownStyle {
       color: 'blue',
       backgroundColor: 'cyan',
     },
+    mentionReport: {
+      color: 'red',
+      backgroundColor: 'pink',
+    },
   };
 }
 

package/src/web/parserUtils.ts

@@ -4,7 +4,7 @@ import * as BrowserUtils from './browserUtils';
 
 type PartialMarkdownStyle = StyleUtilsTypes.PartialMarkdownStyle;
 
-type MarkdownType = 'bold' | 'italic' | 'strikethrough' | 'emoji' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax' | 'mention-here' | 'mention-user';
+type MarkdownType = 'bold' | 'italic' | 'strikethrough' | 'emoji' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax' | 'mention-here' | 'mention-user' | 'mention-report';
 
 type MarkdownRange = {
   type: MarkdownType;
@@ -42,6 +42,9 @@ function addStyling(targetElement: HTMLElement, type: MarkdownType, markdownStyl
     case 'mention-user':
       Object.assign(node.style, markdownStyle.mentionUser);
       break;
+    case 'mention-report':
+      Object.assign(node.style, markdownStyle.mentionReport);
+      break;
     case 'link':
       Object.assign(node.style, {
         ...markdownStyle.link,