hs-react-native-custom-markdown 0.0.1

package/README.md

@@ -0,0 +1,97 @@
+This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
+
+# Getting Started
+
+> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding.
+
+## Step 1: Start Metro
+
+First, you will need to run **Metro**, the JavaScript build tool for React Native.
+
+To start the Metro dev server, run the following command from the root of your React Native project:
+
+```sh
+# Using npm
+npm start
+
+# OR using Yarn
+yarn start
+```
+
+## Step 2: Build and run your app
+
+With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:
+
+### Android
+
+```sh
+# Using npm
+npm run android
+
+# OR using Yarn
+yarn android
+```
+
+### iOS
+
+For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).
+
+The first time you create a new project, run the Ruby bundler to install CocoaPods itself:
+
+```sh
+bundle install
+```
+
+Then, and every time you update your native dependencies, run:
+
+```sh
+bundle exec pod install
+```
+
+For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
+
+```sh
+# Using npm
+npm run ios
+
+# OR using Yarn
+yarn ios
+```
+
+If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.
+
+This is one way to run your app — you can also build it directly from Android Studio or Xcode.
+
+## Step 3: Modify your app
+
+Now that you have successfully run the app, let's make changes!
+
+Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh).
+
+When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:
+
+- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS).
+- **iOS**: Press <kbd>R</kbd> in iOS Simulator.
+
+## Congratulations! :tada:
+
+You've successfully run and modified your React Native App. :partying_face:
+
+### Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
+- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).
+
+# Troubleshooting
+
+If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+
+# Learn More
+
+To learn more about React Native, take a look at the following resources:
+
+- [React Native Website](https://reactnative.dev) - learn more about React Native.
+- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
+- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
+- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
+- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import CustomMarkdown from './src/CustomMarkdown';
+export default CustomMarkdown;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,sBAAsB,CAAC;AAClD,eAAe,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const CustomMarkdown_1 = __importDefault(require("./src/CustomMarkdown"));
+exports.default = CustomMarkdown_1.default;

package/dist/src/CustomMarkdown.d.ts

@@ -0,0 +1,103 @@
+import React from 'react';
+type CustomMarkdownProps = {
+    content: string;
+    styles?: Partial<typeof defaultStyles>;
+    resolveImageSource?: (path: string) => any;
+};
+declare const CustomMarkdown: React.FC<CustomMarkdownProps>;
+export default CustomMarkdown;
+declare const defaultStyles: {
+    paragraph: {
+        fontSize: number;
+        lineHeight: number;
+        color: string;
+        marginBottom: number;
+    };
+    heading1: {
+        fontSize: number;
+        fontWeight: "bold";
+        marginVertical: number;
+    };
+    heading2: {
+        fontSize: number;
+        fontWeight: "bold";
+        marginVertical: number;
+    };
+    heading3: {
+        fontSize: number;
+        fontWeight: "bold";
+        marginVertical: number;
+    };
+    heading4: {
+        fontSize: number;
+        fontWeight: "bold";
+        marginVertical: number;
+    };
+    heading5: {
+        fontSize: number;
+        fontWeight: "bold";
+        marginVertical: number;
+    };
+    heading6: {
+        fontSize: number;
+        fontWeight: "bold";
+        marginVertical: number;
+    };
+    bold: {
+        fontWeight: "bold";
+    };
+    italic: {
+        fontStyle: "italic";
+    };
+    underline: {
+        textDecorationLine: "underline";
+    };
+    code: {
+        backgroundColor: string;
+        padding: number;
+        borderRadius: number;
+    };
+    codeBlock: {
+        backgroundColor: string;
+        padding: number;
+        borderRadius: number;
+        marginVertical: number;
+    };
+    blockquoteContainer: {
+        borderLeftWidth: number;
+        borderLeftColor: string;
+        paddingLeft: number;
+        marginVertical: number;
+    };
+    blockquoteText: {
+        fontStyle: "italic";
+        color: string;
+    };
+    bulletRow: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+        marginBottom: number;
+    };
+    bullet: {
+        fontSize: number;
+        lineHeight: number;
+        marginRight: number;
+        fontWeight: "bold";
+    };
+    listText: {
+        flex: number;
+        fontSize: number;
+        lineHeight: number;
+    };
+    link: {
+        color: string;
+        textDecorationLine: "underline";
+    };
+    image: {
+        width: "100%";
+        height: number;
+        resizeMode: "contain";
+        marginVertical: number;
+    };
+};
+//# sourceMappingURL=CustomMarkdown.d.ts.map

package/dist/src/CustomMarkdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomMarkdown.d.ts","sourceRoot":"","sources":["../../src/CustomMarkdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAc,MAAM,OAAO,CAAC;AASnC,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC,OAAO,aAAa,CAAC,CAAC;IACvC,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC;CAC5C,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAoNjD,CAAC;AAEF,eAAe,cAAc,CAAC;AAE9B,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FjB,CAAC"}

package/dist/src/CustomMarkdown.js

@@ -0,0 +1,250 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const CustomMarkdown = ({ content, styles = {}, resolveImageSource, }) => {
+    const mergedStyles = Object.assign(Object.assign({}, defaultStyles), styles);
+    const parseInlineMarkdown = (text) => {
+        const elements = [];
+        let remaining = text;
+        let index = 0;
+        const applyRegex = (regex, style, isLink = false, isCode = false, isHtmlTag = false, renderText) => {
+            const match = regex.exec(remaining);
+            if (match) {
+                const [full, inner, link] = match;
+                const before = remaining.substring(0, match.index);
+                const after = remaining.substring(match.index + full.length);
+                if (before)
+                    elements.push(before);
+                if (isLink) {
+                    elements.push(<react_native_1.Text key={`link-${index++}`} style={style} onPress={() => react_native_1.Linking.openURL(link)}>
+              {inner}
+            </react_native_1.Text>);
+                }
+                else if (isHtmlTag && renderText) {
+                    elements.push(<react_native_1.Text key={`html-${index++}`} style={style}>
+              {renderText(inner)}
+            </react_native_1.Text>);
+                }
+                else {
+                    elements.push(<react_native_1.Text key={`styled-${index++}`} style={style}>
+              {inner}
+            </react_native_1.Text>);
+                }
+                remaining = after;
+                return true;
+            }
+            return false;
+        };
+        while (remaining.length) {
+            const patterns = [
+                { regex: /\*\*\*(.*?)\*\*\*/g, style: [mergedStyles.bold, mergedStyles.italic] },
+                { regex: /\*\*(.*?)\*\*/g, style: mergedStyles.bold },
+                { regex: /_(.*?)_/g, style: mergedStyles.italic },
+                { regex: /`([^`]+)`/g, style: mergedStyles.code, isCode: true },
+                { regex: /\[(.*?)\]\((.*?)\)/g, style: mergedStyles.link, isLink: true },
+                { regex: /<b>(.*?)<\/b>/i, style: mergedStyles.bold, isHtmlTag: true },
+                { regex: /<i>(.*?)<\/i>/i, style: mergedStyles.italic, isHtmlTag: true },
+                { regex: /<u>(.*?)<\/u>/i, style: mergedStyles.underline, isHtmlTag: true },
+                { regex: /<br\s*\/?>/i, style: mergedStyles.paragraph, isHtmlTag: true, renderText: () => '\n' },
+            ];
+            let matched = false;
+            for (const pattern of patterns) {
+                if (applyRegex(pattern.regex, pattern.style, pattern.isLink, pattern.isCode, pattern.isHtmlTag, pattern.renderText)) {
+                    matched = true;
+                    break;
+                }
+            }
+            if (!matched) {
+                elements.push(remaining);
+                break;
+            }
+        }
+        return <react_native_1.Text>{elements}</react_native_1.Text>;
+    };
+    const renderMarkdown = () => {
+        const lines = content.split('\n');
+        const result = [];
+        let inCodeBlock = false;
+        let codeBlockContent = [];
+        lines.forEach((line, index) => {
+            if (line.trim() === '```') {
+                inCodeBlock = !inCodeBlock;
+                if (!inCodeBlock) {
+                    result.push(<react_native_1.View key={`code-${index}`} style={mergedStyles.codeBlock}>
+              <react_native_1.Text style={mergedStyles.code}>
+                {codeBlockContent.join('\n')}
+              </react_native_1.Text>
+            </react_native_1.View>);
+                    codeBlockContent = [];
+                }
+                return;
+            }
+            if (inCodeBlock) {
+                codeBlockContent.push(line);
+                return;
+            }
+            // Image
+            const imgMatch = line.match(/!\[(.*?)\]\((.*?)\)/);
+            if (imgMatch) {
+                const altText = imgMatch[1];
+                const imgPath = imgMatch[2];
+                let source;
+                if (resolveImageSource) {
+                    source = resolveImageSource(imgPath);
+                }
+                else {
+                    source = { uri: imgPath }; // fallback: remote URL
+                }
+                result.push(<react_native_1.Image key={`img-${index}`} source={source} style={mergedStyles.image} accessibilityLabel={altText}/>);
+                return;
+            }
+            // Heading
+            const headingMatch = line.match(/^(#{1,6})\s+(.*)/);
+            if (headingMatch) {
+                const level = headingMatch[1].length;
+                const headingText = headingMatch[2];
+                const styleKey = `heading${level}`;
+                result.push(<react_native_1.Text key={`heading-${index}`} style={mergedStyles[styleKey]}>
+            {headingText}
+          </react_native_1.Text>);
+                return;
+            }
+            // Blockquote
+            if (line.startsWith('>')) {
+                result.push(<react_native_1.View key={`quote-${index}`} style={mergedStyles.blockquoteContainer}>
+            <react_native_1.Text style={mergedStyles.blockquoteText}>
+              {line.replace(/^>\s?/, '')}
+            </react_native_1.Text>
+          </react_native_1.View>);
+                return;
+            }
+            // Bullet list
+            if (line.trim().startsWith('- ')) {
+                result.push(<react_native_1.View key={`list-${index}`} style={mergedStyles.bulletRow}>
+            <react_native_1.Text style={mergedStyles.bullet}>{'\u2022'}</react_native_1.Text>
+            <react_native_1.Text style={mergedStyles.listText}>
+              {parseInlineMarkdown(line.replace('- ', ''))}
+            </react_native_1.Text>
+          </react_native_1.View>);
+                return;
+            }
+            // Numbered list
+            const numberedMatch = line.trim().match(/^(\d+)\.\s+(.*)/);
+            if (numberedMatch) {
+                result.push(<react_native_1.View key={`list-num-${index}`} style={mergedStyles.bulletRow}>
+            <react_native_1.Text style={mergedStyles.bullet}>{numberedMatch[1] + '.'}</react_native_1.Text>
+            <react_native_1.Text style={mergedStyles.listText}>
+              {parseInlineMarkdown(numberedMatch[2])}
+            </react_native_1.Text>
+          </react_native_1.View>);
+                return;
+            }
+            if (line.trim()) {
+                result.push(<react_native_1.Text key={`text-${index}`} style={mergedStyles.paragraph}>
+            {parseInlineMarkdown(line)}
+          </react_native_1.Text>);
+            }
+        });
+        return result;
+    };
+    return <react_native_1.View>{renderMarkdown()}</react_native_1.View>;
+};
+exports.default = CustomMarkdown;
+const defaultStyles = react_native_1.StyleSheet.create({
+    paragraph: {
+        fontSize: 16,
+        lineHeight: 24,
+        color: '#333',
+        marginBottom: 8,
+    },
+    heading1: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        marginVertical: 10,
+    },
+    heading2: {
+        fontSize: 22,
+        fontWeight: 'bold',
+        marginVertical: 8,
+    },
+    heading3: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        marginVertical: 6,
+    },
+    heading4: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        marginVertical: 4,
+    },
+    heading5: {
+        fontSize: 16,
+        fontWeight: 'bold',
+        marginVertical: 4,
+    },
+    heading6: {
+        fontSize: 14,
+        fontWeight: 'bold',
+        marginVertical: 2,
+    },
+    bold: {
+        fontWeight: 'bold',
+    },
+    italic: {
+        fontStyle: 'italic',
+    },
+    underline: {
+        textDecorationLine: 'underline',
+    },
+    code: {
+        backgroundColor: '#f4f4f4',
+        padding: 4,
+        borderRadius: 4,
+    },
+    codeBlock: {
+        backgroundColor: '#eee',
+        padding: 10,
+        borderRadius: 6,
+        marginVertical: 10,
+    },
+    blockquoteContainer: {
+        borderLeftWidth: 4,
+        borderLeftColor: '#ccc',
+        paddingLeft: 10,
+        marginVertical: 8,
+    },
+    blockquoteText: {
+        fontStyle: 'italic',
+        color: '#666',
+    },
+    bulletRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        marginBottom: 6,
+    },
+    bullet: {
+        fontSize: 16,
+        lineHeight: 24,
+        marginRight: 6,
+        fontWeight: 'bold',
+    },
+    listText: {
+        flex: 1,
+        fontSize: 16,
+        lineHeight: 24,
+    },
+    link: {
+        color: '#007AFF',
+        textDecorationLine: 'underline',
+    },
+    image: {
+        width: '100%',
+        height: 200,
+        resizeMode: 'contain',
+        marginVertical: 10,
+    },
+});

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "hs-react-native-custom-markdown",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "react-native": "dist/index.js",
+  "private": false,
+  "description": "A React Native component to render custom markdown content.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/HerikaAFIDigital/custom-markdown-converter.git"
+  },
+  "author": "Herika Sethi",
+  "license": "MIT",
+  "keywords": [
+    "react-native",
+    "markdown",
+    "custom-markdown",
+    "markdown-renderer"
+  ],
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "build": "tsc",
+    "lint": "eslint .",
+    "start": "react-native start",
+    "test": "jest"
+  },
+  "dependencies": {
+    "react": "19.1.0",
+    "react-native": "0.80.0",
+    "@react-native/new-app-screen": "0.80.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@react-native-community/cli": "19.0.0",
+    "@react-native-community/cli-platform-android": "19.0.0",
+    "@react-native-community/cli-platform-ios": "19.0.0",
+    "@react-native/babel-preset": "0.80.0",
+    "@react-native/eslint-config": "0.80.0",
+    "@react-native/metro-config": "0.80.0",
+    "@react-native/typescript-config": "0.80.0",
+    "@types/jest": "^29.5.13",
+    "@types/react": "^19.1.0",
+    "@types/react-test-renderer": "^19.1.0",
+    "eslint": "^8.19.0",
+    "jest": "^29.6.3",
+    "prettier": "2.8.8",
+    "react-test-renderer": "19.1.0",
+    "typescript": "5.0.4"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}