hs-react-native-custom-markdown 0.0.3 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@ A lightweight React Native component to render custom markdown content, includin
|
|
|
5
5
|
## ✨ Features
|
|
6
6
|
|
|
7
7
|
- Parses and renders markdown content
|
|
8
|
-
- Supports custom image resolution logic
|
|
8
|
+
- Supports custom image resolution logic
|
|
9
9
|
- Optimized for React Native apps
|
|
10
10
|
- Written in TypeScript
|
|
11
11
|
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { StyleProp, TextStyle, ViewStyle, ImageStyle } from 'react-native';
|
|
3
|
+
type MarkdownStyle = StyleProp<TextStyle | ViewStyle | ImageStyle>;
|
|
2
4
|
type CustomMarkdownProps = {
|
|
3
5
|
content: string;
|
|
4
|
-
styles?: Partial<typeof defaultStyles
|
|
6
|
+
styles?: Partial<Record<keyof typeof defaultStyles, MarkdownStyle>>;
|
|
5
7
|
resolveImageSource?: (path: string) => any;
|
|
6
8
|
};
|
|
7
9
|
declare const CustomMarkdown: React.FC<CustomMarkdownProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomMarkdown.d.ts","sourceRoot":"","sources":["../../src/CustomMarkdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAc,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CustomMarkdown.d.ts","sourceRoot":"","sources":["../../src/CustomMarkdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAc,MAAM,OAAO,CAAC;AACnC,OAAO,EAML,SAAS,EACT,SAAS,EACT,SAAS,EACT,UAAU,EACX,MAAM,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG,SAAS,CAAC,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAEnE,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC;IACpE,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC;CAC5C,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkNjD,CAAC;AAEF,eAAe,cAAc,CAAC;AAE9B,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FjB,CAAC"}
|
|
@@ -6,12 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
7
|
const react_native_1 = require("react-native");
|
|
8
8
|
const CustomMarkdown = ({ content, styles = {}, resolveImageSource, }) => {
|
|
9
|
-
const
|
|
9
|
+
const getMergedStyle = (key) => {
|
|
10
|
+
return [defaultStyles[key], styles[key]];
|
|
11
|
+
};
|
|
10
12
|
const parseInlineMarkdown = (text) => {
|
|
11
13
|
const elements = [];
|
|
12
14
|
let remaining = text;
|
|
13
15
|
let index = 0;
|
|
14
|
-
const applyRegex = (regex,
|
|
16
|
+
const applyRegex = (regex, styleKey, isLink = false, isCode = false, isHtmlTag = false, renderText) => {
|
|
15
17
|
const match = regex.exec(remaining);
|
|
16
18
|
if (match) {
|
|
17
19
|
const [full, inner, link] = match;
|
|
@@ -20,17 +22,17 @@ const CustomMarkdown = ({ content, styles = {}, resolveImageSource, }) => {
|
|
|
20
22
|
if (before)
|
|
21
23
|
elements.push(before);
|
|
22
24
|
if (isLink) {
|
|
23
|
-
elements.push(<react_native_1.Text key={`link-${index++}`} style={
|
|
25
|
+
elements.push(<react_native_1.Text key={`link-${index++}`} style={getMergedStyle(styleKey)} onPress={() => react_native_1.Linking.openURL(link)}>
|
|
24
26
|
{inner}
|
|
25
27
|
</react_native_1.Text>);
|
|
26
28
|
}
|
|
27
29
|
else if (isHtmlTag && renderText) {
|
|
28
|
-
elements.push(<react_native_1.Text key={`html-${index++}`} style={
|
|
30
|
+
elements.push(<react_native_1.Text key={`html-${index++}`} style={getMergedStyle(styleKey)}>
|
|
29
31
|
{renderText(inner)}
|
|
30
32
|
</react_native_1.Text>);
|
|
31
33
|
}
|
|
32
34
|
else {
|
|
33
|
-
elements.push(<react_native_1.Text key={`styled-${index++}`} style={
|
|
35
|
+
elements.push(<react_native_1.Text key={`styled-${index++}`} style={getMergedStyle(styleKey)}>
|
|
34
36
|
{inner}
|
|
35
37
|
</react_native_1.Text>);
|
|
36
38
|
}
|
|
@@ -41,19 +43,24 @@ const CustomMarkdown = ({ content, styles = {}, resolveImageSource, }) => {
|
|
|
41
43
|
};
|
|
42
44
|
while (remaining.length) {
|
|
43
45
|
const patterns = [
|
|
44
|
-
{ regex: /\*\*\*(.*?)\*\*\*/g, style: [
|
|
45
|
-
{ regex: /\*\*(.*?)\*\*/g, style:
|
|
46
|
-
{ regex: /_(.*?)_/g, style:
|
|
47
|
-
{ regex: /`([^`]+)`/g, style:
|
|
48
|
-
{ regex: /\[(.*?)\]\((.*?)\)/g, style:
|
|
49
|
-
{ regex: /<b>(.*?)<\/b>/i, style:
|
|
50
|
-
{ regex: /<i>(.*?)<\/i>/i, style:
|
|
51
|
-
{ regex: /<u>(.*?)<\/u>/i, style:
|
|
52
|
-
{
|
|
46
|
+
{ regex: /\*\*\*(.*?)\*\*\*/g, style: ['bold', 'italic'] },
|
|
47
|
+
{ regex: /\*\*(.*?)\*\*/g, style: ['bold'] },
|
|
48
|
+
{ regex: /_(.*?)_/g, style: ['italic'] },
|
|
49
|
+
{ regex: /`([^`]+)`/g, style: ['code'], isCode: true },
|
|
50
|
+
{ regex: /\[(.*?)\]\((.*?)\)/g, style: ['link'], isLink: true },
|
|
51
|
+
{ regex: /<b>(.*?)<\/b>/i, style: ['bold'], isHtmlTag: true },
|
|
52
|
+
{ regex: /<i>(.*?)<\/i>/i, style: ['italic'], isHtmlTag: true },
|
|
53
|
+
{ regex: /<u>(.*?)<\/u>/i, style: ['underline'], isHtmlTag: true },
|
|
54
|
+
{
|
|
55
|
+
regex: /<br\s*\/?>/i,
|
|
56
|
+
style: ['paragraph'],
|
|
57
|
+
isHtmlTag: true,
|
|
58
|
+
renderText: () => '\n',
|
|
59
|
+
},
|
|
53
60
|
];
|
|
54
61
|
let matched = false;
|
|
55
62
|
for (const pattern of patterns) {
|
|
56
|
-
if (applyRegex(pattern.regex, pattern.style, pattern.isLink, pattern.isCode, pattern.isHtmlTag, pattern.renderText)) {
|
|
63
|
+
if (applyRegex(pattern.regex, pattern.style[0], pattern.isLink, pattern.isCode, pattern.isHtmlTag, pattern.renderText)) {
|
|
57
64
|
matched = true;
|
|
58
65
|
break;
|
|
59
66
|
}
|
|
@@ -74,8 +81,8 @@ const CustomMarkdown = ({ content, styles = {}, resolveImageSource, }) => {
|
|
|
74
81
|
if (line.trim() === '```') {
|
|
75
82
|
inCodeBlock = !inCodeBlock;
|
|
76
83
|
if (!inCodeBlock) {
|
|
77
|
-
result.push(<react_native_1.View key={`code-${index}`} style={
|
|
78
|
-
<react_native_1.Text style={
|
|
84
|
+
result.push(<react_native_1.View key={`code-${index}`} style={getMergedStyle('codeBlock')}>
|
|
85
|
+
<react_native_1.Text style={getMergedStyle('code')}>
|
|
79
86
|
{codeBlockContent.join('\n')}
|
|
80
87
|
</react_native_1.Text>
|
|
81
88
|
</react_native_1.View>);
|
|
@@ -87,64 +94,55 @@ const CustomMarkdown = ({ content, styles = {}, resolveImageSource, }) => {
|
|
|
87
94
|
codeBlockContent.push(line);
|
|
88
95
|
return;
|
|
89
96
|
}
|
|
90
|
-
// Image
|
|
91
97
|
const imgMatch = line.match(/!\[(.*?)\]\((.*?)\)/);
|
|
92
98
|
if (imgMatch) {
|
|
93
99
|
const altText = imgMatch[1];
|
|
94
100
|
const imgPath = imgMatch[2];
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
}
|
|
99
|
-
else {
|
|
100
|
-
source = { uri: imgPath }; // fallback: remote URL
|
|
101
|
-
}
|
|
102
|
-
result.push(<react_native_1.Image key={`img-${index}`} source={source} style={mergedStyles.image} accessibilityLabel={altText}/>);
|
|
101
|
+
const source = resolveImageSource
|
|
102
|
+
? resolveImageSource(imgPath)
|
|
103
|
+
: { uri: imgPath };
|
|
104
|
+
result.push(<react_native_1.Image key={`img-${index}`} source={source} style={getMergedStyle('image')} accessibilityLabel={altText}/>);
|
|
103
105
|
return;
|
|
104
106
|
}
|
|
105
|
-
// Heading
|
|
106
107
|
const headingMatch = line.match(/^(#{1,6})\s+(.*)/);
|
|
107
108
|
if (headingMatch) {
|
|
108
109
|
const level = headingMatch[1].length;
|
|
109
110
|
const headingText = headingMatch[2];
|
|
110
111
|
const styleKey = `heading${level}`;
|
|
111
|
-
result.push(<react_native_1.Text key={`heading-${index}`} style={
|
|
112
|
+
result.push(<react_native_1.Text key={`heading-${index}`} style={getMergedStyle(styleKey)}>
|
|
112
113
|
{headingText}
|
|
113
114
|
</react_native_1.Text>);
|
|
114
115
|
return;
|
|
115
116
|
}
|
|
116
|
-
// Blockquote
|
|
117
117
|
if (line.startsWith('>')) {
|
|
118
|
-
result.push(<react_native_1.View key={`quote-${index}`} style={
|
|
119
|
-
<react_native_1.Text style={
|
|
118
|
+
result.push(<react_native_1.View key={`quote-${index}`} style={getMergedStyle('blockquoteContainer')}>
|
|
119
|
+
<react_native_1.Text style={getMergedStyle('blockquoteText')}>
|
|
120
120
|
{line.replace(/^>\s?/, '')}
|
|
121
121
|
</react_native_1.Text>
|
|
122
122
|
</react_native_1.View>);
|
|
123
123
|
return;
|
|
124
124
|
}
|
|
125
|
-
// Bullet list
|
|
126
125
|
if (line.trim().startsWith('- ')) {
|
|
127
|
-
result.push(<react_native_1.View key={`list-${index}`} style={
|
|
128
|
-
<react_native_1.Text style={
|
|
129
|
-
<react_native_1.Text style={
|
|
126
|
+
result.push(<react_native_1.View key={`list-${index}`} style={getMergedStyle('bulletRow')}>
|
|
127
|
+
<react_native_1.Text style={getMergedStyle('bullet')}>{'\u2022'}</react_native_1.Text>
|
|
128
|
+
<react_native_1.Text style={getMergedStyle('listText')}>
|
|
130
129
|
{parseInlineMarkdown(line.replace('- ', ''))}
|
|
131
130
|
</react_native_1.Text>
|
|
132
131
|
</react_native_1.View>);
|
|
133
132
|
return;
|
|
134
133
|
}
|
|
135
|
-
// Numbered list
|
|
136
134
|
const numberedMatch = line.trim().match(/^(\d+)\.\s+(.*)/);
|
|
137
135
|
if (numberedMatch) {
|
|
138
|
-
result.push(<react_native_1.View key={`list-num-${index}`} style={
|
|
139
|
-
<react_native_1.Text style={
|
|
140
|
-
<react_native_1.Text style={
|
|
136
|
+
result.push(<react_native_1.View key={`list-num-${index}`} style={getMergedStyle('bulletRow')}>
|
|
137
|
+
<react_native_1.Text style={getMergedStyle('bullet')}>{numberedMatch[1] + '.'}</react_native_1.Text>
|
|
138
|
+
<react_native_1.Text style={getMergedStyle('listText')}>
|
|
141
139
|
{parseInlineMarkdown(numberedMatch[2])}
|
|
142
140
|
</react_native_1.Text>
|
|
143
141
|
</react_native_1.View>);
|
|
144
142
|
return;
|
|
145
143
|
}
|
|
146
144
|
if (line.trim()) {
|
|
147
|
-
result.push(<react_native_1.Text key={`text-${index}`} style={
|
|
145
|
+
result.push(<react_native_1.Text key={`text-${index}`} style={getMergedStyle('paragraph')}>
|
|
148
146
|
{parseInlineMarkdown(line)}
|
|
149
147
|
</react_native_1.Text>);
|
|
150
148
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hs-react-native-custom-markdown",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
4
4
|
"description": "A React Native component to render custom markdown content.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
],
|
|
17
17
|
"repository": {
|
|
18
18
|
"type": "git",
|
|
19
|
-
"url": "https://github.com/HerikaAFIDigital/custom-markdown-converter.git"
|
|
19
|
+
"url": "git+https://github.com/HerikaAFIDigital/custom-markdown-converter.git"
|
|
20
20
|
},
|
|
21
21
|
"files": [
|
|
22
22
|
"dist",
|