@expensify/react-native-live-markdown 0.1.61 → 0.1.63

package/src/MarkdownTextInput.web.tsx

@@ -437,9 +437,13 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
         currentlyFocusedField.current = hostNode;
         setEventProps(e);
         if (divRef.current) {
-          const valueLength = value ? value.length : 0;
-          CursorUtils.setCursorPosition(divRef.current, contentSelection.current ? contentSelection.current.end : valueLength);
-          updateSelection(event);
+          if (contentSelection.current) {
+            CursorUtils.setCursorPosition(divRef.current, contentSelection.current.start, contentSelection.current.end);
+          } else {
+            const valueLength = value ? value.length : divRef.current.innerText.length;
+            CursorUtils.setCursorPosition(divRef.current, valueLength, null);
+          }
+          updateSelection(event, contentSelection.current);
         }
 
         if (onFocus) {

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/cursorUtils.ts

@@ -28,6 +28,11 @@ function setPrevText(target: HTMLElement) {
 }
 
 function setCursorPosition(target: HTMLElement, start: number, end: number | null = null) {
+  // We don't want to move the cursor if the target is not focused
+  if (target !== document.activeElement) {
+    return;
+  }
+
   const range = document.createRange();
   range.selectNodeContents(target);
 

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,