From a7fafd79253c22f1bf466c72897a73f1a2019ce4 Mon Sep 17 00:00:00 2001
From: Fabrizio Bertoglio <fabrizio.bertoglio@gmail.com>
Date: Sun, 19 May 2024 09:59:32 +0800
Subject: [PATCH 1/3] minimum example

---
 example/src/App.tsx | 189 ++------------------------------------------
 1 file changed, 7 insertions(+), 182 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 473126c6..a16edeff 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,197 +1,22 @@
 import * as React from 'react';
 
-import {Button, Platform, StyleSheet, Text, View} from 'react-native';
-
+import {StyleSheet, View} from 'react-native';
 import {MarkdownTextInput} from '@expensify/react-native-live-markdown';
-import type {TextInput} from 'react-native';
-
-const DEFAULT_TEXT = ['Hello, *world*!', 'https://expensify.com', '# Lorem ipsum', '> Hello world', '`foo`', '```\nbar\n```', '@here', '@someone@swmansion.com', '#room-mention'].join('\n');
-
-function isWeb() {
-  return Platform.OS === 'web';
-}
-
-function getPlatform() {
-  if (isWeb()) {
-    return 'web';
-  }
-  // @ts-expect-error it works
-  return Platform.constants.systemName || Platform.constants.Brand;
-}
-
-function getPlatformVersion() {
-  return Platform.Version;
-}
-
-function getBundle() {
-  return __DEV__ ? 'dev' : 'production';
-}
-
-function getRuntime() {
-  if ('HermesInternal' in global) {
-    const version =
-      // @ts-expect-error this is fine
-      // eslint-disable-next-line es/no-optional-chaining
-      global.HermesInternal?.getRuntimeProperties?.()['OSS Release Version'];
-    return `Hermes (${version})`;
-  }
-  if ('_v8runtime' in global) {
-    // @ts-expect-error this is fine
-    // eslint-disable-next-line no-underscore-dangle
-    const version = global._v8runtime().version;
-    return `V8 (${version})`;
-  }
-  return 'JSC';
-}
-
-function getArchitecture() {
-  return 'nativeFabricUIManager' in global ? 'Fabric' : 'Paper';
-}
-
-function getReactNativeVersion() {
-  const {major, minor, patch} = Platform.constants.reactNativeVersion;
-  return `${major}.${minor}.${patch}`;
-}
-
-function getRandomColor() {
-  return `#${Math.floor(Math.random() * 16777215)
-    .toString(16)
-    .padStart(6, '0')}`;
-}
 
 export default function App() {
-  const [value, setValue] = React.useState(DEFAULT_TEXT);
-  const [markdownStyle, setMarkdownStyle] = React.useState({});
-  const [selection, setSelection] = React.useState({start: 0, end: 0});
-
-  // TODO: use MarkdownTextInput ref instead of TextInput ref
-  const ref = React.useRef<TextInput>(null);
-
   return (
-    <View style={styles.container}>
-      <View style={styles.platform}>
-        <Text>
-          Platform: {getPlatform()} {getPlatformVersion()}
-        </Text>
-        <Text>Bundle: {getBundle()}</Text>
-        {!isWeb() && (
-          <>
-            <Text>Architecture: {getArchitecture()}</Text>
-            <Text>RN version: {getReactNativeVersion()}</Text>
-            <Text>RN runtime: {getRuntime()}</Text>
-          </>
-        )}
-      </View>
-      {/* <Text>MarkdownTextInput singleline</Text>
-      <MarkdownTextInput
-        autoCapitalize="none"
-        value={value}
-        onChangeText={setValue}
-        style={styles.input}
-      /> */}
-      <Text>MarkdownTextInput multiline</Text>
-      <MarkdownTextInput
-        multiline
-        autoCapitalize="none"
-        value={value}
-        onChangeText={setValue}
-        style={styles.input}
-        ref={ref}
-        markdownStyle={markdownStyle}
-        placeholder="Type here..."
-        onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
-        selection={selection}
-      />
-      {/* <Text>TextInput singleline</Text>
-      <TextInput
-        autoCapitalize="none"
-        value={value}
-        onChangeText={setValue}
-        style={styles.input}
-      /> */}
-      {/* <Text>TextInput multiline</Text>
-      <TextInput
-        multiline
-        autoCapitalize="none"
-        value={value}
-        onChangeText={setValue}
-        style={styles.input}
-      /> */}
-      <Text style={styles.text}>{JSON.stringify(value)}</Text>
-      <Button
-        title="Focus"
-        onPress={() => {
-          if (!ref.current) {
-            return;
-          }
-          ref.current.focus();
-        }}
-      />
-      <Button
-        title="Blur"
-        onPress={() => {
-          if (!ref.current) {
-            return;
-          }
-          ref.current.blur();
-        }}
-      />
-      <Button
-        title="Reset"
-        onPress={() => {
-          setValue(DEFAULT_TEXT);
-          setMarkdownStyle({});
-        }}
-      />
-      <Button
-        title="Clear"
-        onPress={() => setValue('')}
-      />
-      <Button
-        title="Change style"
-        onPress={() =>
-          setMarkdownStyle({
-            link: {
-              color: getRandomColor(),
-            },
-          })
-        }
-      />
-      <Button
-        title="Change selection"
-        onPress={() => {
-          if (!ref.current) {
-            return;
-          }
-          ref.current.focus();
-          setSelection({start: 0, end: 20});
-        }}
-      />
+    <View style={{marginTop: 200}}>
+      <MarkdownTextInput style={styles.input} />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    marginTop: 60,
-  },
-  platform: {
-    alignItems: 'center',
-    marginBottom: 20,
-  },
   input: {
-    fontSize: 20,
-    width: 300,
-    padding: 5,
-    borderColor: 'gray',
+    lineHeight: 25,
+    height: 25,
+    fontSize: 15,
     borderWidth: 1,
-    textAlignVertical: 'top',
-  },
-  text: {
-    fontFamily: 'Courier New',
-    marginTop: 10,
-    height: 100,
+    overflow: 'hidden',
   },
 });

From 832229f4d8d6eb244fe3670e5dc27b297e1e542b Mon Sep 17 00:00:00 2001
From: Fabrizio Bertoglio <fabrizio.bertoglio@gmail.com>
Date: Sun, 19 May 2024 10:06:46 +0800
Subject: [PATCH 2/3] Fabric implementation of
 https://github.com/facebook/react-native/pull/38359

---
 ios/RCTMarkdownUtils.mm | 45 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/ios/RCTMarkdownUtils.mm b/ios/RCTMarkdownUtils.mm
index 879d5cac..f188429a 100644
--- a/ios/RCTMarkdownUtils.mm
+++ b/ios/RCTMarkdownUtils.mm
@@ -136,6 +136,8 @@ - (NSAttributedString *)parseMarkdown:(nullable NSAttributedString *)input withA
             }
         }];
 
+        RCTApplyBaselineOffset(attributedString);
+
         [attributedString endEditing];
 
         _prevInputString = inputString;
@@ -148,4 +150,47 @@ - (NSAttributedString *)parseMarkdown:(nullable NSAttributedString *)input withA
     }
 }
 
+static void RCTApplyBaselineOffset(NSMutableAttributedString *attributedText)
+{
+  __block CGFloat maximumLineHeight = 0;
+
+  [attributedText enumerateAttribute:NSParagraphStyleAttributeName
+                             inRange:NSMakeRange(0, attributedText.length)
+                             options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired
+                          usingBlock:^(NSParagraphStyle *paragraphStyle, __unused NSRange range, __unused BOOL *stop) {
+    if (!paragraphStyle) {
+      return;
+    }
+
+    maximumLineHeight = MAX(paragraphStyle.maximumLineHeight, maximumLineHeight);
+  }];
+
+  if (maximumLineHeight == 0) {
+    // `lineHeight` was not specified, nothing to do.
+    return;
+  }
+
+  __block CGFloat maximumFontLineHeight = 0;
+
+  [attributedText enumerateAttribute:NSFontAttributeName
+                             inRange:NSMakeRange(0, attributedText.length)
+                             options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired
+                          usingBlock:^(UIFont *font, NSRange range, __unused BOOL *stop) {
+    if (!font) {
+      return;
+    }
+
+    maximumFontLineHeight = MAX(font.lineHeight, maximumFontLineHeight);
+  }];
+
+  if (maximumLineHeight < maximumFontLineHeight) {
+    return;
+  }
+
+  CGFloat baseLineOffset = (maximumLineHeight - maximumFontLineHeight) / 2.0;
+  [attributedText addAttribute:NSBaselineOffsetAttributeName
+                         value:@(baseLineOffset)
+                         range:NSMakeRange(0, attributedText.length)];
+}
+
 @end

From de76218c16ffa888eac46b44f72b10257f005805 Mon Sep 17 00:00:00 2001
From: Fabrizio Bertoglio <fabrizio.bertoglio@gmail.com>
Date: Sun, 19 May 2024 10:14:45 +0800
Subject: [PATCH 3/3] remove changes to example

---
 example/src/App.tsx | 189 ++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 182 insertions(+), 7 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index a16edeff..473126c6 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,22 +1,197 @@
 import * as React from 'react';
 
-import {StyleSheet, View} from 'react-native';
+import {Button, Platform, StyleSheet, Text, View} from 'react-native';
+
 import {MarkdownTextInput} from '@expensify/react-native-live-markdown';
+import type {TextInput} from 'react-native';
+
+const DEFAULT_TEXT = ['Hello, *world*!', 'https://expensify.com', '# Lorem ipsum', '> Hello world', '`foo`', '```\nbar\n```', '@here', '@someone@swmansion.com', '#room-mention'].join('\n');
+
+function isWeb() {
+  return Platform.OS === 'web';
+}
+
+function getPlatform() {
+  if (isWeb()) {
+    return 'web';
+  }
+  // @ts-expect-error it works
+  return Platform.constants.systemName || Platform.constants.Brand;
+}
+
+function getPlatformVersion() {
+  return Platform.Version;
+}
+
+function getBundle() {
+  return __DEV__ ? 'dev' : 'production';
+}
+
+function getRuntime() {
+  if ('HermesInternal' in global) {
+    const version =
+      // @ts-expect-error this is fine
+      // eslint-disable-next-line es/no-optional-chaining
+      global.HermesInternal?.getRuntimeProperties?.()['OSS Release Version'];
+    return `Hermes (${version})`;
+  }
+  if ('_v8runtime' in global) {
+    // @ts-expect-error this is fine
+    // eslint-disable-next-line no-underscore-dangle
+    const version = global._v8runtime().version;
+    return `V8 (${version})`;
+  }
+  return 'JSC';
+}
+
+function getArchitecture() {
+  return 'nativeFabricUIManager' in global ? 'Fabric' : 'Paper';
+}
+
+function getReactNativeVersion() {
+  const {major, minor, patch} = Platform.constants.reactNativeVersion;
+  return `${major}.${minor}.${patch}`;
+}
+
+function getRandomColor() {
+  return `#${Math.floor(Math.random() * 16777215)
+    .toString(16)
+    .padStart(6, '0')}`;
+}
 
 export default function App() {
+  const [value, setValue] = React.useState(DEFAULT_TEXT);
+  const [markdownStyle, setMarkdownStyle] = React.useState({});
+  const [selection, setSelection] = React.useState({start: 0, end: 0});
+
+  // TODO: use MarkdownTextInput ref instead of TextInput ref
+  const ref = React.useRef<TextInput>(null);
+
   return (
-    <View style={{marginTop: 200}}>
-      <MarkdownTextInput style={styles.input} />
+    <View style={styles.container}>
+      <View style={styles.platform}>
+        <Text>
+          Platform: {getPlatform()} {getPlatformVersion()}
+        </Text>
+        <Text>Bundle: {getBundle()}</Text>
+        {!isWeb() && (
+          <>
+            <Text>Architecture: {getArchitecture()}</Text>
+            <Text>RN version: {getReactNativeVersion()}</Text>
+            <Text>RN runtime: {getRuntime()}</Text>
+          </>
+        )}
+      </View>
+      {/* <Text>MarkdownTextInput singleline</Text>
+      <MarkdownTextInput
+        autoCapitalize="none"
+        value={value}
+        onChangeText={setValue}
+        style={styles.input}
+      /> */}
+      <Text>MarkdownTextInput multiline</Text>
+      <MarkdownTextInput
+        multiline
+        autoCapitalize="none"
+        value={value}
+        onChangeText={setValue}
+        style={styles.input}
+        ref={ref}
+        markdownStyle={markdownStyle}
+        placeholder="Type here..."
+        onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
+        selection={selection}
+      />
+      {/* <Text>TextInput singleline</Text>
+      <TextInput
+        autoCapitalize="none"
+        value={value}
+        onChangeText={setValue}
+        style={styles.input}
+      /> */}
+      {/* <Text>TextInput multiline</Text>
+      <TextInput
+        multiline
+        autoCapitalize="none"
+        value={value}
+        onChangeText={setValue}
+        style={styles.input}
+      /> */}
+      <Text style={styles.text}>{JSON.stringify(value)}</Text>
+      <Button
+        title="Focus"
+        onPress={() => {
+          if (!ref.current) {
+            return;
+          }
+          ref.current.focus();
+        }}
+      />
+      <Button
+        title="Blur"
+        onPress={() => {
+          if (!ref.current) {
+            return;
+          }
+          ref.current.blur();
+        }}
+      />
+      <Button
+        title="Reset"
+        onPress={() => {
+          setValue(DEFAULT_TEXT);
+          setMarkdownStyle({});
+        }}
+      />
+      <Button
+        title="Clear"
+        onPress={() => setValue('')}
+      />
+      <Button
+        title="Change style"
+        onPress={() =>
+          setMarkdownStyle({
+            link: {
+              color: getRandomColor(),
+            },
+          })
+        }
+      />
+      <Button
+        title="Change selection"
+        onPress={() => {
+          if (!ref.current) {
+            return;
+          }
+          ref.current.focus();
+          setSelection({start: 0, end: 20});
+        }}
+      />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    marginTop: 60,
+  },
+  platform: {
+    alignItems: 'center',
+    marginBottom: 20,
+  },
   input: {
-    lineHeight: 25,
-    height: 25,
-    fontSize: 15,
+    fontSize: 20,
+    width: 300,
+    padding: 5,
+    borderColor: 'gray',
     borderWidth: 1,
-    overflow: 'hidden',
+    textAlignVertical: 'top',
+  },
+  text: {
+    fontFamily: 'Courier New',
+    marginTop: 10,
+    height: 100,
   },
 });