chore: add preview of markdown lib fork for testing

Author: isekovanic

examples/SampleApp/yarn.lock

@@ -2041,6 +2041,18 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@khanacademy/[email protected]":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@khanacademy/perseus-utils/-/perseus-utils-2.1.0.tgz#a405f5e740e73a1345f2b172ff34260b6d87f57e"
+  integrity sha512-QgN9qW1hnoCGkErSVwCJ5SmWAqlcgXA3TvtMjsyv8LiYbAS4/ZMQOHIuq5P7u0t1i6tp02w7Qjbz/COsxyHg/A==
+
+"@khanacademy/simple-markdown@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@khanacademy/simple-markdown/-/simple-markdown-2.1.0.tgz#7fcbbcb4d0eda7d0dfb09c2ae35f0b9eb1e07dcf"
+  integrity sha512-U9yemDLqP3ehAhUdBhzVfZe9h10wWbkrIkfFf2ejSO/cUSFZwjt+KRfZtZK6q2HY+RkNYUjALDpwJu7LkrY1gw==
+  dependencies:
+    "@khanacademy/perseus-utils" "2.1.0"
+
 "@napi-rs/wasm-runtime@^0.2.11":
   version "0.2.11"
   resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.11.tgz#192c1610e1625048089ab4e35bc0649ce478500e"

package/package.json

@@ -68,6 +68,7 @@
   },
   "dependencies": {
     "@gorhom/bottom-sheet": "^5.1.8",
+    "@khanacademy/simple-markdown": "^2.1.0",
     "@ungap/structured-clone": "^1.3.0",
     "dayjs": "1.11.13",
     "emoji-regex": "^10.4.0",
@@ -77,7 +78,6 @@
     "lodash-es": "4.17.21",
     "mime-types": "^2.1.35",
     "path": "0.12.7",
-    "react-native-markdown-package": "1.8.2",
     "react-native-url-polyfill": "^2.0.0",
     "stream-chat": "^9.23.0",
     "use-sync-external-store": "^1.5.0"
@@ -112,11 +112,11 @@
     "@babel/core": "^7.27.4",
     "@babel/runtime": "^7.27.6",
     "@op-engineering/op-sqlite": "^14.0.3",
-    "@shopify/flash-list": "^2.1.0",
     "@react-native-community/eslint-config": "3.2.0",
     "@react-native-community/eslint-plugin": "1.3.0",
     "@react-native-community/netinfo": "^11.4.1",
     "@react-native/babel-preset": "0.79.3",
+    "@shopify/flash-list": "^2.1.0",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "13.2.0",
     "@types/better-sqlite3": "^7.6.13",

package/src/components/Message/MessageSimple/utils/markdown/index.tsx

@@ -0,0 +1,65 @@
+import React, { PropsWithChildren, useMemo } from 'react';
+import { View } from 'react-native';
+
+import SimpleMarkdown, {
+  OutputRules,
+  ParserRules,
+  ReactOutputRule,
+} from '@khanacademy/simple-markdown';
+import { isArray, isEqual, merge } from 'lodash';
+
+import { getLocalRules } from './rules';
+import styles from './styles';
+
+import { MarkdownStyle } from '../../../../../contexts';
+
+type DefaultRules = typeof SimpleMarkdown.defaultRules;
+
+export type MarkdownRules = Partial<DefaultRules>;
+
+export type MarkdownProps = {
+  onLink: (url: string) => Promise<void>;
+  rules: MarkdownRules;
+  styles: MarkdownStyle;
+};
+
+export type MarkdownOptions = Partial<Pick<MarkdownProps, 'onLink'>>;
+
+const Markdown = (props: PropsWithChildren<MarkdownProps>) => {
+  const { onLink, rules: rulesProp, styles: stylesProp, children } = props;
+
+  const mergedStyles = useMemo(() => merge({}, styles, stylesProp), [stylesProp]);
+  const localRules = useMemo(
+    () =>
+      merge(
+        {},
+        SimpleMarkdown.defaultRules,
+        { ...SimpleMarkdown.defaultRules },
+        getLocalRules(mergedStyles, { onLink }),
+        rulesProp,
+      ) as unknown as ParserRules,
+    [mergedStyles, onLink, rulesProp],
+  );
+
+  const parser = useMemo(() => SimpleMarkdown.parserFor(localRules), [localRules]);
+  const renderer = useMemo(
+    () => SimpleMarkdown.outputFor(localRules as unknown as OutputRules<ReactOutputRule>, 'react'),
+    [localRules],
+  );
+
+  const childText = useMemo(() => (isArray(children) ? children.join('') : children), [children]);
+
+  const toRender = useMemo(() => {
+    const blockSource = `${childText ?? ''}\n\n`;
+    return parser(blockSource, { inline: false });
+  }, [childText, parser]);
+
+  const tree = useMemo(() => renderer(toRender), [renderer, toRender]);
+
+  return <View style={[styles.view, stylesProp?.view]}>{tree}</View>;
+};
+
+const areEqual = (prevProps: PropsWithChildren, nextProps: PropsWithChildren) =>
+  isEqual(prevProps.children, nextProps.children);
+
+export default React.memo(Markdown, areEqual);