Skip to content

Commit 4720348

Browse files
ApayRusApayRus
committed
implemented inlineText type of content
1 parent 861f073 commit 4720348

File tree

8 files changed

+241
-5
lines changed

8 files changed

+241
-5
lines changed

‎content/audios/intext/دفتر, دفاتر.mp3

38.3 KB
Binary file not shown.

‎content/audios/intext/كتاب, كتب.mp3

36.4 KB
Binary file not shown.

‎content/content.md

+20
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,26 @@ website: github.com/Aparus/ulla
3030
اَنَا صَغِيرٌ.
3131
نَحْنُ صِغَارٌ.
3232

33+
## Theory lesson
34+
35+
### Grammar [text]
36+
37+
#### This is first h4 header
38+
39+
And this is the paragraph with some of text. It aims to show you power of using markdown everywhere.
40+
41+
- with list
42+
- with **bold**, _italic_, ~~deleted~~
43+
- with some smart content
44+
45+
#### this is second h4 header
46+
47+
Here we provide some [link](https://google.com).
48+
49+
Here is a word with interactivity [[كتاب, كتب]]. And also: [[دفتر, دفاتر]].
50+
51+
And here is some ![image](https://m.media-amazon.com/images/I/416VUDuqTML._SY346_.jpg)
52+
3353
## اَلدَّرْسُ الثَّانِي 2
3454

3555
### words

‎content/content.ru.md

+18
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,24 @@ website: github.com/Aparus/ulla
3030
я маленький.
3131
мы маленькие.
3232

33+
## Теоретический урок
34+
35+
### Грамматика [text]
36+
37+
#### This is first h4 header
38+
39+
And this is the paragraph with some of text. It aims to show you power of using markdown everywhere.
40+
41+
- with list
42+
- with **bold**, _italic_, ~~deleted~~
43+
- with some smart content
44+
45+
#### this is second h4 header
46+
47+
Here we provide some [link](https://google.com).
48+
49+
And here is some ![image](https://m.media-amazon.com/images/I/416VUDuqTML._SY346_.jpg)
50+
3351
## Урок второй
3452

3553
### words

‎package-lock.json

+127
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,12 @@
2929
"react-native-elements": "^2.3.2",
3030
"react-native-gesture-handler": "~1.7.0",
3131
"react-native-reanimated": "~1.13.0",
32+
"react-native-render-html": "^4.2.4",
3233
"react-native-safe-area-context": "3.1.4",
3334
"react-native-screens": "~2.10.1",
3435
"react-native-unimodules": "~0.11.0",
3536
"react-native-web": "^0.14.4",
37+
"react-native-webview": "^11.0.0",
3638
"react-redux": "^7.2.1",
3739
"redux": "^4.0.5",
3840
"yaml": "^1.10.0"

‎src/components/contentTypes/InText.jsx

+53-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,61 @@
11
import React from 'react'
2-
import { ScrollView, View, TouchableOpacity, Alert } from 'react-native'
3-
import { Text, Image, Header, colors } from 'react-native-elements'
2+
import {
3+
ScrollView,
4+
View,
5+
TouchableOpacity,
6+
Alert,
7+
useWindowDimensions
8+
} from 'react-native'
9+
import { Image, Header, colors, Text } from 'react-native-elements'
10+
import marked from 'marked'
11+
import HTML from 'react-native-render-html'
12+
import audios from '../../../assets/audios'
13+
import { playAudio } from '../../utils/media'
14+
import { convertInTextShortcutIntoTags } from '../../utils/manageTextContent'
15+
16+
function InText(props) {
17+
const {
18+
subchapterDoc,
19+
subchapterTrDoc = {},
20+
globalStyles,
21+
chapterId,
22+
showTranslation
23+
} = props
24+
25+
const { content } = subchapterDoc
26+
27+
let html = marked(content)
28+
const contentWidth = useWindowDimensions().width
29+
30+
const handlePress = (text, path) => () => {
31+
const fileName = path || text
32+
playAudio(fileName, audios['intext'])
33+
}
34+
35+
html = convertInTextShortcutIntoTags(html)
36+
37+
const inTextRenderer = htmlAttribs => {
38+
const { text, path } = htmlAttribs
39+
return (
40+
<Text
41+
onPress={handlePress(text, path)}
42+
style={[globalStyles.body2, { color: 'darkblue' }]}
43+
key={`intext-${text}`}
44+
>
45+
{text}
46+
</Text>
47+
)
48+
}
449

5-
function OneLineOneFile() {
650
return (
751
<View>
8-
<Text>in text</Text>
52+
<HTML
53+
renderers={{ intext: { renderer: inTextRenderer, wrapper: 'Text' } }}
54+
html={html}
55+
contentWidth={contentWidth}
56+
/>
957
</View>
1058
)
1159
}
1260

13-
export default OneLineOneFile
61+
export default InText

‎src/utils/manageTextContent.js

+21
Original file line numberDiff line numberDiff line change
@@ -58,4 +58,25 @@ export const getTrChapters = trLang => {
5858
console.log('translation error, ', e)
5959
return {}
6060
}
61+
}
62+
63+
/**
64+
*
65+
* @param {string} htmlText - multiline text
66+
* @returns {string}
67+
* @example
68+
* const exampleText = 'There is some text with [[ sounded word ]] or [[sounded phrase | path to file]]'
69+
* convertInTextShortcutIntoTags(exampleText)
70+
* // 'There is some text with <inText text="sounded word" path="" /> or <inText text="sounded phrase" path="path to file" />'
71+
* // () ===> <inText text="some text" path="path to file" />
72+
*/
73+
export const convertInTextShortcutIntoTags = htmlText => {
74+
const inTextShortcutTemplate = new RegExp(
75+
/\[\[\s*(.+?)\s*(\|\s*(.+?)\s*)?\]\]/gm
76+
) // [[ sounded word ]] or [[sounded phrase | path to file]]
77+
78+
return htmlText.replace(
79+
inTextShortcutTemplate,
80+
'<intext text="$1" path="$3"></intext>'
81+
)
6182
}

0 commit comments

Comments
 (0)