@storybook/addon-ondevice-notes 7.6.17 → 7.6.18
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/package.json +3 -3
- package/dist/components/Markdown/Markdown.d.ts +0 -19
- package/dist/components/Markdown/Markdown.js +0 -35
- package/dist/components/Markdown/rules.d.ts +0 -177
- package/dist/components/Markdown/rules.js +0 -238
- package/dist/components/Markdown/styles.d.ts +0 -6
- package/dist/components/Markdown/styles.js +0 -138
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-ondevice-notes",
|
|
3
|
-
"version": "7.6.
|
|
3
|
+
"version": "7.6.18",
|
|
4
4
|
"description": "Write notes for your react-native Storybook stories.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"addon",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"@storybook/client-logger": "^7.6.13",
|
|
33
33
|
"@storybook/core-events": "^7.6.13",
|
|
34
34
|
"@storybook/manager-api": "^7.6.13",
|
|
35
|
-
"@storybook/react-native-theming": "^7.6.
|
|
35
|
+
"@storybook/react-native-theming": "^7.6.18",
|
|
36
36
|
"react-native-markdown-display": "6.1.6"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"publishConfig": {
|
|
46
46
|
"access": "public"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "00cfaa848e74361513c0ea2275f58eed267c35f1"
|
|
49
49
|
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* mostly based on code from https://github.com/CharlesMangwa/react-native-simple-markdown
|
|
3
|
-
*/
|
|
4
|
-
import React from 'react';
|
|
5
|
-
import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
|
|
6
|
-
export type Props = {
|
|
7
|
-
children?: string;
|
|
8
|
-
errorHandler?: (errors: any[], children: string) => void;
|
|
9
|
-
styles?: {
|
|
10
|
-
view?: ViewStyle;
|
|
11
|
-
text?: TextStyle;
|
|
12
|
-
image?: ImageStyle;
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
export type DefaultProps = Props & {
|
|
16
|
-
styles: Object;
|
|
17
|
-
};
|
|
18
|
-
declare const _default: React.MemoExoticComponent<({ children, errorHandler }: Props) => import("react/jsx-runtime").JSX.Element>;
|
|
19
|
-
export default _default;
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
-
/**
|
|
8
|
-
* mostly based on code from https://github.com/CharlesMangwa/react-native-simple-markdown
|
|
9
|
-
*/
|
|
10
|
-
const react_1 = __importDefault(require("react"));
|
|
11
|
-
const react_native_1 = require("react-native");
|
|
12
|
-
const simple_markdown_1 = __importDefault(require("simple-markdown"));
|
|
13
|
-
// @ts-ignore
|
|
14
|
-
const rules_1 = __importDefault(require("./rules"));
|
|
15
|
-
const styles_1 = require("./styles");
|
|
16
|
-
const Markdown = ({ children = '', errorHandler }) => {
|
|
17
|
-
const styles = (0, styles_1.useThemedStyles)();
|
|
18
|
-
const _renderContent = () => {
|
|
19
|
-
try {
|
|
20
|
-
const rules = (0, rules_1.default)(styles);
|
|
21
|
-
// @TODO: Add another \n?
|
|
22
|
-
const blockSource = `${children}\n\n`;
|
|
23
|
-
const tree = simple_markdown_1.default.parserFor(rules)(blockSource, {
|
|
24
|
-
inline: false,
|
|
25
|
-
});
|
|
26
|
-
return simple_markdown_1.default.outputFor(rules, 'react')(tree);
|
|
27
|
-
}
|
|
28
|
-
catch (errors) {
|
|
29
|
-
errorHandler ? errorHandler(errors, children) : console.error(errors);
|
|
30
|
-
}
|
|
31
|
-
return null;
|
|
32
|
-
};
|
|
33
|
-
return (0, jsx_runtime_1.jsx)(react_native_1.View, { children: _renderContent() });
|
|
34
|
-
};
|
|
35
|
-
exports.default = react_1.default.memo(Markdown);
|
|
@@ -1,177 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { Image, Text, View, TextStyle, ViewStyle, ImageStyle, StyleProp } from 'react-native';
|
|
3
|
-
import SimpleMarkdown, { Output, ReactElements, State, SingleASTNode } from 'simple-markdown';
|
|
4
|
-
interface Styles {
|
|
5
|
-
[key: string]: StyleProp<ViewStyle | TextStyle | ImageStyle>;
|
|
6
|
-
}
|
|
7
|
-
declare const _default: (styles: Styles) => {
|
|
8
|
-
autolink: {
|
|
9
|
-
react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
|
|
10
|
-
order: number;
|
|
11
|
-
match: SimpleMarkdown.MatchFunction;
|
|
12
|
-
quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
|
|
13
|
-
parse: SimpleMarkdown.SingleNodeParseFunction;
|
|
14
|
-
html: SimpleMarkdown.HtmlNodeOutput;
|
|
15
|
-
};
|
|
16
|
-
blockQuote: {
|
|
17
|
-
react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").ViewProps, View>;
|
|
18
|
-
order: number;
|
|
19
|
-
match: SimpleMarkdown.MatchFunction;
|
|
20
|
-
quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
|
|
21
|
-
parse: SimpleMarkdown.SingleNodeParseFunction;
|
|
22
|
-
html: SimpleMarkdown.HtmlNodeOutput;
|
|
23
|
-
};
|
|
24
|
-
br: {
|
|
25
|
-
react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
|
|
26
|
-
order: number;
|
|
27
|
-
match: SimpleMarkdown.MatchFunction;
|
|
28
|
-
quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
|
|
29
|
-
parse: SimpleMarkdown.SingleNodeParseFunction;
|
|
30
|
-
html: SimpleMarkdown.HtmlNodeOutput;
|
|
31
|
-
};
|
|
32
|
-
codeBlock: {
|
|
33
|
-
react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
|
|
34
|
-
order: number;
|
|
35
|
-
match: SimpleMarkdown.MatchFunction;
|
|
36
|
-
quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
|
|
37
|
-
parse: SimpleMarkdown.SingleNodeParseFunction;
|
|
38
|
-
html: SimpleMarkdown.HtmlNodeOutput;
|
|
39
|
-
};
|
|
40
|
-
del: {
|
|
41
|
-
react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
|
|
42
|
-
order: number;
|
|
43
|
-
match: SimpleMarkdown.MatchFunction;
|
|
44
|
-
quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
|
|
45
|
-
parse: SimpleMarkdown.SingleNodeParseFunction;
|
|
46
|
-
html: SimpleMarkdown.HtmlNodeOutput;
|
|
47
|
-
};
|
|
48
|
-
em: {
|
|
49
|
-
react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
|
|
50
|
-
order: number;
|
|
51
|
-
match: SimpleMarkdown.MatchFunction;
|
|
52
|
-
quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
|
|
53
|
-
parse: SimpleMarkdown.SingleNodeParseFunction;
|
|
54
|
-
html: SimpleMarkdown.HtmlNodeOutput;
|
|
55
|
-
};
|
|
56
|
-
heading: {
|
|
57
|
-
react: (node: SingleASTNode, output: Output<ReactElements>, parentState: State) => import("react").CElement<import("react-native").TextProps, Text>;
|
|
58
|
-
order: number;
|
|
59
|
-
match: SimpleMarkdown.MatchFunction;
|
|
60
|
-
quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
|
|
61
|
-
parse: SimpleMarkdown.SingleNodeParseFunction;
|
|
62
|
-
html: SimpleMarkdown.HtmlNodeOutput;
|
|
63
|
-
};
|
|
64
|
-
hr: {
|
|
65
|
-
react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").ViewProps, View>;
|
|
66
|
-
order: number;
|
|
67
|
-
match: SimpleMarkdown.MatchFunction;
|
|
68
|
-
quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
|
|
69
|
-
parse: SimpleMarkdown.SingleNodeParseFunction;
|
|
70
|
-
html: SimpleMarkdown.HtmlNodeOutput;
|
|
71
|
-
};
|
|
72
|
-
image: {
|
|
73
|
-
react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").ImageProps, Image>;
|
|
74
|
-
order: number;
|
|
75
|
-
match: SimpleMarkdown.MatchFunction;
|
|
76
|
-
quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
|
|
77
|
-
parse: SimpleMarkdown.SingleNodeParseFunction;
|
|
78
|
-
html: SimpleMarkdown.HtmlNodeOutput;
|
|
79
|
-
};
|
|
80
|
-
inlineCode: {
|
|
81
|
-
react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
|
|
82
|
-
order: number;
|
|
83
|
-
match: SimpleMarkdown.MatchFunction;
|
|
84
|
-
quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
|
|
85
|
-
parse: SimpleMarkdown.SingleNodeParseFunction;
|
|
86
|
-
html: SimpleMarkdown.HtmlNodeOutput;
|
|
87
|
-
};
|
|
88
|
-
link: {
|
|
89
|
-
react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
|
|
90
|
-
order: number;
|
|
91
|
-
match: SimpleMarkdown.MatchFunction;
|
|
92
|
-
quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
|
|
93
|
-
parse: SimpleMarkdown.SingleNodeParseFunction;
|
|
94
|
-
html: SimpleMarkdown.HtmlNodeOutput;
|
|
95
|
-
};
|
|
96
|
-
list: {
|
|
97
|
-
react: (node: {
|
|
98
|
-
items: Array<SingleASTNode>;
|
|
99
|
-
ordered: boolean;
|
|
100
|
-
}, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").ViewProps, View>;
|
|
101
|
-
order: number;
|
|
102
|
-
match: SimpleMarkdown.MatchFunction;
|
|
103
|
-
quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
|
|
104
|
-
parse: SimpleMarkdown.SingleNodeParseFunction;
|
|
105
|
-
html: SimpleMarkdown.HtmlNodeOutput;
|
|
106
|
-
};
|
|
107
|
-
newline: {
|
|
108
|
-
react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
|
|
109
|
-
order: number;
|
|
110
|
-
match: SimpleMarkdown.MatchFunction;
|
|
111
|
-
quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
|
|
112
|
-
parse: SimpleMarkdown.SingleNodeParseFunction;
|
|
113
|
-
html: SimpleMarkdown.HtmlNodeOutput;
|
|
114
|
-
};
|
|
115
|
-
paragraph: {
|
|
116
|
-
react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").ViewProps, View>;
|
|
117
|
-
order: number;
|
|
118
|
-
match: SimpleMarkdown.MatchFunction;
|
|
119
|
-
quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
|
|
120
|
-
parse: SimpleMarkdown.SingleNodeParseFunction;
|
|
121
|
-
html: SimpleMarkdown.HtmlNodeOutput;
|
|
122
|
-
};
|
|
123
|
-
strong: {
|
|
124
|
-
react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
|
|
125
|
-
order: number;
|
|
126
|
-
match: SimpleMarkdown.MatchFunction;
|
|
127
|
-
quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
|
|
128
|
-
parse: SimpleMarkdown.SingleNodeParseFunction;
|
|
129
|
-
html: SimpleMarkdown.HtmlNodeOutput;
|
|
130
|
-
};
|
|
131
|
-
table: {
|
|
132
|
-
react: (node: {
|
|
133
|
-
header: Array<SingleASTNode>;
|
|
134
|
-
cells: Array<Array<SingleASTNode>>;
|
|
135
|
-
}, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").ViewProps, View>;
|
|
136
|
-
order: number;
|
|
137
|
-
match: SimpleMarkdown.MatchFunction;
|
|
138
|
-
quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
|
|
139
|
-
parse: SimpleMarkdown.SingleNodeParseFunction;
|
|
140
|
-
html: SimpleMarkdown.HtmlNodeOutput;
|
|
141
|
-
};
|
|
142
|
-
text: {
|
|
143
|
-
react: (node: SingleASTNode, output: Output<ReactElements>, parentState: State) => import("react").CElement<import("react-native").TextProps, Text>;
|
|
144
|
-
order: number;
|
|
145
|
-
match: SimpleMarkdown.MatchFunction;
|
|
146
|
-
quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
|
|
147
|
-
parse: SimpleMarkdown.SingleNodeParseFunction;
|
|
148
|
-
html: SimpleMarkdown.HtmlNodeOutput;
|
|
149
|
-
};
|
|
150
|
-
u: {
|
|
151
|
-
react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
|
|
152
|
-
order: number;
|
|
153
|
-
match: SimpleMarkdown.MatchFunction;
|
|
154
|
-
quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
|
|
155
|
-
parse: SimpleMarkdown.SingleNodeParseFunction;
|
|
156
|
-
html: SimpleMarkdown.HtmlNodeOutput;
|
|
157
|
-
};
|
|
158
|
-
url: {
|
|
159
|
-
react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
|
|
160
|
-
order: number;
|
|
161
|
-
match: SimpleMarkdown.MatchFunction;
|
|
162
|
-
quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
|
|
163
|
-
parse: SimpleMarkdown.SingleNodeParseFunction;
|
|
164
|
-
html: SimpleMarkdown.HtmlNodeOutput;
|
|
165
|
-
};
|
|
166
|
-
Array: SimpleMarkdown.DefaultArrayRule;
|
|
167
|
-
nptable: SimpleMarkdown.DefaultInRule;
|
|
168
|
-
lheading: SimpleMarkdown.DefaultInRule;
|
|
169
|
-
fence: SimpleMarkdown.DefaultInRule;
|
|
170
|
-
def: SimpleMarkdown.LenientInOutRule;
|
|
171
|
-
tableSeparator: SimpleMarkdown.DefaultInRule;
|
|
172
|
-
escape: SimpleMarkdown.DefaultInRule;
|
|
173
|
-
mailto: SimpleMarkdown.DefaultInRule;
|
|
174
|
-
reflink: SimpleMarkdown.DefaultInRule;
|
|
175
|
-
refimage: SimpleMarkdown.DefaultInRule;
|
|
176
|
-
};
|
|
177
|
-
export default _default;
|
|
@@ -1,238 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
/**
|
|
7
|
-
* mostly based on code from https://github.com/CharlesMangwa/react-native-simple-markdown
|
|
8
|
-
*/
|
|
9
|
-
const react_1 = require("react");
|
|
10
|
-
const react_native_1 = require("react-native");
|
|
11
|
-
const simple_markdown_1 = __importDefault(require("simple-markdown"));
|
|
12
|
-
exports.default = (styles) => ({
|
|
13
|
-
...simple_markdown_1.default.defaultRules,
|
|
14
|
-
autolink: {
|
|
15
|
-
...simple_markdown_1.default.defaultRules.autolink,
|
|
16
|
-
react: (node, output, state) => {
|
|
17
|
-
state.withinText = true;
|
|
18
|
-
return (0, react_1.createElement)(react_native_1.Text, {
|
|
19
|
-
key: state.key,
|
|
20
|
-
style: styles.link,
|
|
21
|
-
onPress: () => null,
|
|
22
|
-
}, output(node.content, state));
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
blockQuote: {
|
|
26
|
-
...simple_markdown_1.default.defaultRules.blockQuote,
|
|
27
|
-
react: (node, output, state) => {
|
|
28
|
-
state.withinText = true;
|
|
29
|
-
const blockBar = (0, react_1.createElement)(react_native_1.View, {
|
|
30
|
-
key: state.key,
|
|
31
|
-
style: [styles.blockQuoteSectionBar, styles.blockQuoteBar],
|
|
32
|
-
});
|
|
33
|
-
const blockText = (0, react_1.createElement)(react_native_1.Text, {
|
|
34
|
-
key: state.key,
|
|
35
|
-
style: styles.blockQuoteText,
|
|
36
|
-
}, output(node.content, state));
|
|
37
|
-
return (0, react_1.createElement)(react_native_1.View, {
|
|
38
|
-
key: state.key,
|
|
39
|
-
style: [styles.blockQuoteSection, styles.blockQuote],
|
|
40
|
-
}, [blockBar, blockText]);
|
|
41
|
-
},
|
|
42
|
-
},
|
|
43
|
-
br: {
|
|
44
|
-
...simple_markdown_1.default.defaultRules.br,
|
|
45
|
-
react: (node, output, state) => {
|
|
46
|
-
return (0, react_1.createElement)(react_native_1.Text, {
|
|
47
|
-
key: state.key,
|
|
48
|
-
style: styles.br,
|
|
49
|
-
}, '\n\n');
|
|
50
|
-
},
|
|
51
|
-
},
|
|
52
|
-
codeBlock: {
|
|
53
|
-
...simple_markdown_1.default.defaultRules.codeBlock,
|
|
54
|
-
react: (node, output, state) => {
|
|
55
|
-
state.withinText = true;
|
|
56
|
-
return (0, react_1.createElement)(react_native_1.Text, {
|
|
57
|
-
key: state.key,
|
|
58
|
-
style: styles.codeBlock,
|
|
59
|
-
}, null);
|
|
60
|
-
},
|
|
61
|
-
},
|
|
62
|
-
del: {
|
|
63
|
-
...simple_markdown_1.default.defaultRules.del,
|
|
64
|
-
react: (node, output, state) => {
|
|
65
|
-
state.withinText = true;
|
|
66
|
-
return (0, react_1.createElement)(react_native_1.Text, {
|
|
67
|
-
key: state.key,
|
|
68
|
-
style: styles.del,
|
|
69
|
-
}, output(node.content, state));
|
|
70
|
-
},
|
|
71
|
-
},
|
|
72
|
-
em: {
|
|
73
|
-
...simple_markdown_1.default.defaultRules.em,
|
|
74
|
-
react: (node, output, state) => {
|
|
75
|
-
state.withinText = true;
|
|
76
|
-
return (0, react_1.createElement)(react_native_1.Text, {
|
|
77
|
-
key: state.key,
|
|
78
|
-
style: styles.em,
|
|
79
|
-
}, output(node.content, state));
|
|
80
|
-
},
|
|
81
|
-
},
|
|
82
|
-
heading: {
|
|
83
|
-
...simple_markdown_1.default.defaultRules.heading,
|
|
84
|
-
react: (node, output, parentState) => {
|
|
85
|
-
const state = { ...parentState };
|
|
86
|
-
state.withinText = true;
|
|
87
|
-
const stylesToApply = [styles.heading, styles[`heading${node.level}`]];
|
|
88
|
-
state.stylesToApply = stylesToApply;
|
|
89
|
-
return (0, react_1.createElement)(react_native_1.Text, {
|
|
90
|
-
key: state.key,
|
|
91
|
-
style: stylesToApply,
|
|
92
|
-
}, output(node.content, state));
|
|
93
|
-
},
|
|
94
|
-
},
|
|
95
|
-
hr: {
|
|
96
|
-
...simple_markdown_1.default.defaultRules.hr,
|
|
97
|
-
react: (node, output, state) => (0, react_1.createElement)(react_native_1.View, { key: state.key, style: styles.hr }),
|
|
98
|
-
},
|
|
99
|
-
image: {
|
|
100
|
-
...simple_markdown_1.default.defaultRules.image,
|
|
101
|
-
react: (node, output, state) => (0, react_1.createElement)(react_native_1.Image, {
|
|
102
|
-
key: state.key,
|
|
103
|
-
resizeMode: 'contain',
|
|
104
|
-
source: { uri: node.target },
|
|
105
|
-
style: (node.target.match(/youtu|vimeo/) ? styles.video : styles.image),
|
|
106
|
-
//styles.resizeMode ? styles.resizeMode :
|
|
107
|
-
}),
|
|
108
|
-
},
|
|
109
|
-
inlineCode: {
|
|
110
|
-
...simple_markdown_1.default.defaultRules.inlineCode,
|
|
111
|
-
react: (node, output, state) => {
|
|
112
|
-
state.withinText = true;
|
|
113
|
-
return (0, react_1.createElement)(react_native_1.Text, {
|
|
114
|
-
key: state.key,
|
|
115
|
-
style: styles.inlineCode,
|
|
116
|
-
}, node.content);
|
|
117
|
-
},
|
|
118
|
-
},
|
|
119
|
-
link: {
|
|
120
|
-
...simple_markdown_1.default.defaultRules.link,
|
|
121
|
-
react: (node, output, state) => {
|
|
122
|
-
state.withinText = true;
|
|
123
|
-
const openUrl = (url) => {
|
|
124
|
-
react_native_1.Linking.openURL(url).catch((error) => console.warn('An error occurred: ', error));
|
|
125
|
-
};
|
|
126
|
-
return (0, react_1.createElement)(react_native_1.Text, {
|
|
127
|
-
style: node.target.match(/@/) ? styles.mailTo : styles.link,
|
|
128
|
-
key: state.key,
|
|
129
|
-
onPress: () => openUrl(node.target),
|
|
130
|
-
}, output(node.content, state));
|
|
131
|
-
},
|
|
132
|
-
},
|
|
133
|
-
list: {
|
|
134
|
-
...simple_markdown_1.default.defaultRules.list,
|
|
135
|
-
react: (node, output, state) => {
|
|
136
|
-
const items = node.items.map((item, i) => {
|
|
137
|
-
let bullet;
|
|
138
|
-
if (node.ordered) {
|
|
139
|
-
bullet = (0, react_1.createElement)(react_native_1.Text, { key: state.key, style: styles.listItemNumber }, `${i + 1} . `);
|
|
140
|
-
}
|
|
141
|
-
else {
|
|
142
|
-
bullet = (0, react_1.createElement)(react_native_1.Text, { key: state.key, style: styles.listItemBullet }, '\u2022 ');
|
|
143
|
-
}
|
|
144
|
-
const listItemText = (0, react_1.createElement)(react_native_1.Text, { key: state.key + 1, style: styles.listItemText }, output(item, state));
|
|
145
|
-
return (0, react_1.createElement)(react_native_1.View, {
|
|
146
|
-
key: i,
|
|
147
|
-
style: styles.listItem,
|
|
148
|
-
}, [bullet, listItemText]);
|
|
149
|
-
});
|
|
150
|
-
return (0, react_1.createElement)(react_native_1.View, { key: state.key, style: styles.list }, items);
|
|
151
|
-
},
|
|
152
|
-
},
|
|
153
|
-
newline: {
|
|
154
|
-
...simple_markdown_1.default.defaultRules.newline,
|
|
155
|
-
react: (node, output, state) => (0, react_1.createElement)(react_native_1.Text, {
|
|
156
|
-
key: state.key,
|
|
157
|
-
style: styles.newline,
|
|
158
|
-
}, '\n'),
|
|
159
|
-
},
|
|
160
|
-
paragraph: {
|
|
161
|
-
...simple_markdown_1.default.defaultRules.paragraph,
|
|
162
|
-
react: (node, output, state) => (0, react_1.createElement)(react_native_1.View, {
|
|
163
|
-
key: state.key,
|
|
164
|
-
style: styles.paragraph,
|
|
165
|
-
}, output(node.content, state)),
|
|
166
|
-
},
|
|
167
|
-
strong: {
|
|
168
|
-
...simple_markdown_1.default.defaultRules.strong,
|
|
169
|
-
react: (node, output, state) => {
|
|
170
|
-
state.withinText = true;
|
|
171
|
-
return (0, react_1.createElement)(react_native_1.Text, {
|
|
172
|
-
key: state.key,
|
|
173
|
-
style: styles.strong,
|
|
174
|
-
}, output(node.content, state));
|
|
175
|
-
},
|
|
176
|
-
},
|
|
177
|
-
table: {
|
|
178
|
-
...simple_markdown_1.default.defaultRules.table,
|
|
179
|
-
react: (node, output, state) => {
|
|
180
|
-
const headers = node.header.map((content, i) => (0, react_1.createElement)(react_native_1.Text, {
|
|
181
|
-
style: styles.tableHeaderCell,
|
|
182
|
-
key: i,
|
|
183
|
-
}, output(content, state)));
|
|
184
|
-
const header = (0, react_1.createElement)(react_native_1.View, { style: styles.tableHeader }, headers);
|
|
185
|
-
const rows = node.cells.map((row, r) => {
|
|
186
|
-
const cells = row.map((content, c) => (0, react_1.createElement)(react_native_1.View, {
|
|
187
|
-
key: c,
|
|
188
|
-
style: styles.tableRowCell,
|
|
189
|
-
}, output(content, state)));
|
|
190
|
-
const rowStyles = [styles.tableRow];
|
|
191
|
-
node.cells.length - 1 === r ? rowStyles.push(styles.tableRowLast) : null;
|
|
192
|
-
return (0, react_1.createElement)(react_native_1.View, { key: r, style: rowStyles }, cells);
|
|
193
|
-
});
|
|
194
|
-
return (0, react_1.createElement)(react_native_1.View, { key: state.key, style: styles.table }, [header, rows]);
|
|
195
|
-
},
|
|
196
|
-
},
|
|
197
|
-
text: {
|
|
198
|
-
...simple_markdown_1.default.defaultRules.text,
|
|
199
|
-
react: (node, output, parentState) => {
|
|
200
|
-
const state = { ...parentState };
|
|
201
|
-
// Breaking words up in order to allow for text reflowing in flexbox
|
|
202
|
-
// let words = node.content.split(' ');
|
|
203
|
-
// words = words.map((word: string, i: number) => {
|
|
204
|
-
// i !== words.length - 1 ? (word = `${word} `) : null;
|
|
205
|
-
const textStyles = [styles.text];
|
|
206
|
-
// !state.withinText ? textStyles.push(styles.plainText) : null;
|
|
207
|
-
// state.stylesToApply ? textStyles.push(state.stylesToApply) : null;
|
|
208
|
-
return (0, react_1.createElement)(react_native_1.Text, {
|
|
209
|
-
key: state.key,
|
|
210
|
-
style: textStyles,
|
|
211
|
-
}, node.content);
|
|
212
|
-
},
|
|
213
|
-
},
|
|
214
|
-
u: {
|
|
215
|
-
...simple_markdown_1.default.defaultRules.u,
|
|
216
|
-
react: (node, output, state) => {
|
|
217
|
-
state.withinText = true;
|
|
218
|
-
return (0, react_1.createElement)(react_native_1.Text, {
|
|
219
|
-
key: state.key,
|
|
220
|
-
style: styles.u,
|
|
221
|
-
}, output(node.content, state));
|
|
222
|
-
},
|
|
223
|
-
},
|
|
224
|
-
url: {
|
|
225
|
-
...simple_markdown_1.default.defaultRules.url,
|
|
226
|
-
react: (node, output, state) => {
|
|
227
|
-
state.withinText = true;
|
|
228
|
-
const openURL = (url) => {
|
|
229
|
-
react_native_1.Linking.openURL(url).catch((error) => console.warn('An error occurred: ', error));
|
|
230
|
-
};
|
|
231
|
-
return (0, react_1.createElement)(react_native_1.Text, {
|
|
232
|
-
key: state.key,
|
|
233
|
-
style: styles.url,
|
|
234
|
-
onPress: () => openURL(node.target),
|
|
235
|
-
}, output(node.content, state));
|
|
236
|
-
},
|
|
237
|
-
},
|
|
238
|
-
});
|
|
@@ -1,138 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useThemedStyles = void 0;
|
|
4
|
-
/**
|
|
5
|
-
* mostly based on code from https://github.com/CharlesMangwa/react-native-simple-markdown
|
|
6
|
-
*/
|
|
7
|
-
const react_native_theming_1 = require("@storybook/react-native-theming");
|
|
8
|
-
const react_1 = require("react");
|
|
9
|
-
const useThemedStyles = () => {
|
|
10
|
-
const theme = (0, react_native_theming_1.useTheme)();
|
|
11
|
-
const styles = (0, react_1.useMemo)(() => ({
|
|
12
|
-
blockQuoteSection: {
|
|
13
|
-
flexDirection: 'row',
|
|
14
|
-
},
|
|
15
|
-
blockQuoteSectionBar: {
|
|
16
|
-
width: 3,
|
|
17
|
-
backgroundColor: '#DDDDDD',
|
|
18
|
-
marginRight: 15,
|
|
19
|
-
},
|
|
20
|
-
codeBlock: {
|
|
21
|
-
fontWeight: '500',
|
|
22
|
-
},
|
|
23
|
-
del: {
|
|
24
|
-
textDecorationLine: 'line-through',
|
|
25
|
-
},
|
|
26
|
-
em: {
|
|
27
|
-
fontStyle: 'italic',
|
|
28
|
-
},
|
|
29
|
-
heading: {
|
|
30
|
-
fontWeight: '200',
|
|
31
|
-
},
|
|
32
|
-
heading1: {
|
|
33
|
-
fontSize: 32,
|
|
34
|
-
},
|
|
35
|
-
heading2: {
|
|
36
|
-
fontSize: 24,
|
|
37
|
-
},
|
|
38
|
-
heading3: {
|
|
39
|
-
fontSize: 18,
|
|
40
|
-
},
|
|
41
|
-
heading4: {
|
|
42
|
-
fontSize: 16,
|
|
43
|
-
},
|
|
44
|
-
heading5: {
|
|
45
|
-
fontSize: 13,
|
|
46
|
-
},
|
|
47
|
-
heading6: {
|
|
48
|
-
fontSize: 11,
|
|
49
|
-
},
|
|
50
|
-
hr: {
|
|
51
|
-
backgroundColor: '#cccccc',
|
|
52
|
-
},
|
|
53
|
-
image: {
|
|
54
|
-
width: 320,
|
|
55
|
-
height: 320,
|
|
56
|
-
},
|
|
57
|
-
inlineCode: {
|
|
58
|
-
backgroundColor: '#eeeeee',
|
|
59
|
-
borderColor: '#dddddd',
|
|
60
|
-
borderRadius: 3,
|
|
61
|
-
borderWidth: 1,
|
|
62
|
-
fontWeight: 'bold',
|
|
63
|
-
},
|
|
64
|
-
link: {
|
|
65
|
-
textDecorationLine: 'underline',
|
|
66
|
-
},
|
|
67
|
-
list: { width: '100%' },
|
|
68
|
-
listItem: {
|
|
69
|
-
flexDirection: 'row',
|
|
70
|
-
alignItems: 'center',
|
|
71
|
-
width: '100%',
|
|
72
|
-
},
|
|
73
|
-
listItemNumber: {
|
|
74
|
-
fontWeight: 'bold',
|
|
75
|
-
color: theme.text.primaryColor,
|
|
76
|
-
},
|
|
77
|
-
listItemBullet: {
|
|
78
|
-
fontWeight: 'bold',
|
|
79
|
-
color: theme.text.primaryColor,
|
|
80
|
-
},
|
|
81
|
-
mailTo: {
|
|
82
|
-
textDecorationLine: 'underline',
|
|
83
|
-
},
|
|
84
|
-
paragraph: {
|
|
85
|
-
flexDirection: 'row',
|
|
86
|
-
alignItems: 'flex-start',
|
|
87
|
-
justifyContent: 'flex-start',
|
|
88
|
-
},
|
|
89
|
-
listItemText: {
|
|
90
|
-
flexDirection: 'row',
|
|
91
|
-
justifyContent: 'flex-start',
|
|
92
|
-
alignItems: 'flex-start',
|
|
93
|
-
color: theme.text.primaryColor,
|
|
94
|
-
},
|
|
95
|
-
strong: {
|
|
96
|
-
fontWeight: 'bold',
|
|
97
|
-
},
|
|
98
|
-
table: {
|
|
99
|
-
borderWidth: 1,
|
|
100
|
-
borderColor: theme.text.primaryColor,
|
|
101
|
-
borderRadius: 3,
|
|
102
|
-
},
|
|
103
|
-
tableHeader: {
|
|
104
|
-
backgroundColor: theme.text.primaryColor,
|
|
105
|
-
flexDirection: 'row',
|
|
106
|
-
justifyContent: 'space-around',
|
|
107
|
-
},
|
|
108
|
-
tableHeaderCell: {
|
|
109
|
-
color: theme.backgroundColor,
|
|
110
|
-
fontWeight: 'bold',
|
|
111
|
-
padding: 5,
|
|
112
|
-
},
|
|
113
|
-
tableRow: {
|
|
114
|
-
borderBottomWidth: 1,
|
|
115
|
-
borderColor: theme.text.primaryColor,
|
|
116
|
-
flexDirection: 'row',
|
|
117
|
-
justifyContent: 'space-around',
|
|
118
|
-
},
|
|
119
|
-
tableRowLast: {
|
|
120
|
-
borderColor: 'transparent',
|
|
121
|
-
},
|
|
122
|
-
tableRowCell: {
|
|
123
|
-
padding: 5,
|
|
124
|
-
},
|
|
125
|
-
text: {
|
|
126
|
-
color: theme.text.primaryColor,
|
|
127
|
-
},
|
|
128
|
-
u: {
|
|
129
|
-
textDecorationLine: 'underline',
|
|
130
|
-
},
|
|
131
|
-
video: {
|
|
132
|
-
width: 300,
|
|
133
|
-
height: 300,
|
|
134
|
-
},
|
|
135
|
-
}), [theme.backgroundColor, theme.text.primaryColor]);
|
|
136
|
-
return styles;
|
|
137
|
-
};
|
|
138
|
-
exports.useThemedStyles = useThemedStyles;
|