@expensify/react-native-live-markdown 0.1.3

package/src/MarkdownTextInput.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import {Platform, StyleSheet, TextInput, processColor} from 'react-native';
+import type {TextInputProps} from 'react-native';
+
+import type * as MarkdownTextInputDecoractorView from './MarkdownTextInputDecoratorViewNativeComponent';
+import MarkdownTextInputDecoratorViewNativeComponent from './MarkdownTextInputDecoratorViewNativeComponent';
+
+type MarkdownStyle = MarkdownTextInputDecoractorView.MarkdownStyle;
+
+const FONT_FAMILY_MONOSPACE = Platform.select({
+  ios: 'Courier',
+  default: 'monospace',
+});
+
+function makeDefaultMarkdownStyle(): MarkdownStyle {
+  return {
+    syntax: {
+      color: 'gray',
+    },
+    link: {
+      color: 'blue',
+    },
+    h1: {
+      fontSize: 25,
+    },
+    blockquote: {
+      borderColor: 'gray',
+      borderWidth: 6,
+      marginLeft: 6,
+      paddingLeft: 6,
+    },
+    code: {
+      fontFamily: FONT_FAMILY_MONOSPACE,
+      color: 'black',
+      backgroundColor: 'lightgray',
+    },
+    pre: {
+      fontFamily: FONT_FAMILY_MONOSPACE,
+      color: 'black',
+      backgroundColor: 'lightgray',
+    },
+    mentionHere: {
+      color: 'green',
+      backgroundColor: 'lime',
+    },
+    mentionUser: {
+      color: 'blue',
+      backgroundColor: 'cyan',
+    },
+  };
+}
+
+type PartialMarkdownStyle = Partial<{
+  [K in keyof MarkdownStyle]: Partial<MarkdownStyle[K]>;
+}>;
+
+function mergeMarkdownStyleWithDefault(input: PartialMarkdownStyle | undefined): MarkdownStyle {
+  const output = makeDefaultMarkdownStyle();
+
+  if (input !== undefined) {
+    Object.keys(input).forEach((key) => {
+      if (!(key in output)) {
+        return;
+      }
+      Object.assign(output[key as keyof MarkdownStyle], input[key as keyof MarkdownStyle]);
+    });
+  }
+
+  return output;
+}
+
+function processColorsInMarkdownStyle(input: MarkdownStyle): MarkdownStyle {
+  const output = JSON.parse(JSON.stringify(input));
+
+  Object.keys(output).forEach((key) => {
+    const obj = output[key];
+    Object.keys(obj).forEach((prop) => {
+      // TODO: use ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes'
+      if (!(prop === 'color' || prop.endsWith('Color'))) {
+        return;
+      }
+      obj[prop] = processColor(obj[prop]);
+    });
+  });
+
+  return output as MarkdownStyle;
+}
+
+function processMarkdownStyle(input: PartialMarkdownStyle | undefined): MarkdownStyle {
+  return processColorsInMarkdownStyle(mergeMarkdownStyleWithDefault(input));
+}
+
+interface MarkdownTextInputProps extends TextInputProps {
+  markdownStyle?: PartialMarkdownStyle;
+}
+
+const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>((props, ref) => {
+  const IS_FABRIC = 'nativeFabricUIManager' in global;
+
+  const markdownStyle = React.useMemo(() => processMarkdownStyle(props.markdownStyle), [props.markdownStyle]);
+
+  return (
+    <>
+      <TextInput
+        {...props}
+        ref={ref}
+      />
+      <MarkdownTextInputDecoratorViewNativeComponent
+        style={IS_FABRIC ? styles.farAway : styles.displayNone}
+        markdownStyle={markdownStyle}
+      />
+    </>
+  );
+});
+
+const styles = StyleSheet.create({
+  displayNone: {
+    display: 'none',
+  },
+  farAway: {
+    position: 'absolute',
+    top: 1e8,
+    left: 1e8,
+  },
+});
+
+export type {PartialMarkdownStyle as MarkdownStyle, MarkdownTextInputProps};
+
+export default MarkdownTextInput;

package/src/MarkdownTextInput.web.tsx

@@ -0,0 +1,24 @@
+import {TextInput} from 'react-native';
+
+import React from 'react';
+import type {TextInputProps} from 'react-native';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface MarkdownTextInputProps extends TextInputProps {
+  // nothing here
+}
+
+// eslint-disable-next-line arrow-body-style
+const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>((props, ref) => {
+  // TODO: add web implementation here
+  return (
+    <TextInput
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+export default MarkdownTextInput;
+
+export type {MarkdownTextInputProps};

package/src/MarkdownTextInputDecoratorViewNativeComponent.ts

@@ -0,0 +1,48 @@
+import type {ColorValue, ViewProps} from 'react-native';
+
+import type {Float} from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+interface MarkdownStyle {
+  syntax: {
+    color: ColorValue;
+  };
+  link: {
+    color: ColorValue;
+  };
+  h1: {
+    fontSize: Float;
+  };
+  blockquote: {
+    borderColor: ColorValue;
+    borderWidth: Float;
+    marginLeft: Float;
+    paddingLeft: Float;
+  };
+  code: {
+    fontFamily: string;
+    color: ColorValue;
+    backgroundColor: ColorValue;
+  };
+  pre: {
+    fontFamily: string;
+    color: ColorValue;
+    backgroundColor: ColorValue;
+  };
+  mentionHere: {
+    color: ColorValue;
+    backgroundColor: ColorValue;
+  };
+  mentionUser: {
+    color: ColorValue;
+    backgroundColor: ColorValue;
+  };
+}
+
+interface NativeProps extends ViewProps {
+  markdownStyle: MarkdownStyle;
+}
+
+export default codegenNativeComponent<NativeProps>('MarkdownTextInputDecoratorView');
+
+export type {MarkdownStyle};

package/src/index.tsx

@@ -0,0 +1,2 @@
+export {default as MarkdownTextInput} from './MarkdownTextInput';
+export type {MarkdownTextInputProps, MarkdownStyle} from './MarkdownTextInput';