Skip to content

Commit ff70b21

Browse files
author
Igor Canedo
committed
fix single link in a paragraph not rendering properly
1 parent fa9a0de commit ff70b21

File tree

4 files changed

+216
-1
lines changed

4 files changed

+216
-1
lines changed

‎sample/__tests__/__snapshots__/RNDraftJSRender.test.js.snap‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,85 @@ exports[`renders correctly with contentState 1`] = `
118118
</Text>
119119
</Text>
120120
</View>
121+
<View>
122+
<Text
123+
accessible={true}
124+
allowFontScaling={true}
125+
ellipsizeMode="tail"
126+
style={
127+
Array [
128+
Object {
129+
"fontSize": 14,
130+
"fontWeight": "normal",
131+
},
132+
undefined,
133+
]
134+
}
135+
>
136+
<Text
137+
accessible={true}
138+
allowFontScaling={true}
139+
ellipsizeMode="tail"
140+
onPress={[Function]}
141+
style={
142+
Array [
143+
Object {
144+
"textDecorationLine": "underline",
145+
},
146+
undefined,
147+
]
148+
}
149+
>
150+
Etiam
151+
</Text>
152+
<Text
153+
accessible={true}
154+
allowFontScaling={true}
155+
ellipsizeMode="tail"
156+
>
157+
ultricies nisi vel augue.
158+
</Text>
159+
</Text>
160+
</View>
161+
<View>
162+
<Text
163+
accessible={true}
164+
allowFontScaling={true}
165+
ellipsizeMode="tail"
166+
style={
167+
Array [
168+
Object {
169+
"fontSize": 14,
170+
"fontWeight": "normal",
171+
},
172+
undefined,
173+
]
174+
}
175+
>
176+
<Text
177+
accessible={true}
178+
allowFontScaling={true}
179+
ellipsizeMode="tail"
180+
style={
181+
Array [
182+
Object {
183+
"fontWeight": "bold",
184+
},
185+
undefined,
186+
]
187+
}
188+
>
189+
Etiam
190+
</Text>
191+
<Text
192+
accessible={true}
193+
allowFontScaling={true}
194+
ellipsizeMode="tail"
195+
>
196+
ultricies nisi vel augue.
197+
</Text>
198+
</Text>
199+
</View>
121200
<View>
122201
<Text
123202
accessible={true}
@@ -891,6 +970,89 @@ exports[`renders correctly with contentState and customStyle 1`] = `
891970
</Text>
892971
</Text>
893972
</View>
973+
<View>
974+
<Text
975+
accessible={true}
976+
allowFontScaling={true}
977+
ellipsizeMode="tail"
978+
style={
979+
Array [
980+
Object {
981+
"fontSize": 14,
982+
"fontWeight": "normal",
983+
},
984+
Object {
985+
"fontSize": 18,
986+
},
987+
]
988+
}
989+
>
990+
<Text
991+
accessible={true}
992+
allowFontScaling={true}
993+
ellipsizeMode="tail"
994+
onPress={[Function]}
995+
style={
996+
Array [
997+
Object {
998+
"textDecorationLine": "underline",
999+
},
1000+
undefined,
1001+
]
1002+
}
1003+
>
1004+
Etiam
1005+
</Text>
1006+
<Text
1007+
accessible={true}
1008+
allowFontScaling={true}
1009+
ellipsizeMode="tail"
1010+
>
1011+
ultricies nisi vel augue.
1012+
</Text>
1013+
</Text>
1014+
</View>
1015+
<View>
1016+
<Text
1017+
accessible={true}
1018+
allowFontScaling={true}
1019+
ellipsizeMode="tail"
1020+
style={
1021+
Array [
1022+
Object {
1023+
"fontSize": 14,
1024+
"fontWeight": "normal",
1025+
},
1026+
Object {
1027+
"fontSize": 18,
1028+
},
1029+
]
1030+
}
1031+
>
1032+
<Text
1033+
accessible={true}
1034+
allowFontScaling={true}
1035+
ellipsizeMode="tail"
1036+
style={
1037+
Array [
1038+
Object {
1039+
"fontWeight": "bold",
1040+
},
1041+
undefined,
1042+
]
1043+
}
1044+
>
1045+
Etiam
1046+
</Text>
1047+
<Text
1048+
accessible={true}
1049+
allowFontScaling={true}
1050+
ellipsizeMode="tail"
1051+
>
1052+
ultricies nisi vel augue.
1053+
</Text>
1054+
</Text>
1055+
</View>
8941056
<View>
8951057
<Text
8961058
accessible={true}

‎sample/__tests__/flatAttributesList.test.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,21 @@ describe('only inlineStyleRanges', () => {
5656
});
5757

5858
describe('only entityRanges', () => {
59+
it('with one link renders correctly', () => {
60+
const mock = [{
61+
key: 0,
62+
offset: 0,
63+
length: 15,
64+
}];
65+
const expected = [{
66+
key: 0,
67+
offset: 0,
68+
length: 15,
69+
style: 'link',
70+
}];
71+
const result = flatAttributesList(mock);
72+
expect(result).toEqual(expected);
73+
});
5974
it('links doesnt change offset but receive link style', () => {
6075
const mock = [{
6176
key: 0,

‎sample/src/resourceMock.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,36 @@
3434
"entityRanges": [],
3535
"data": {}
3636
},
37+
{
38+
"key": "5r864123",
39+
"text": "Etiam ultricies nisi vel augue.",
40+
"type": "unstyled",
41+
"depth": 0,
42+
"inlineStyleRanges": [],
43+
"entityRanges": [
44+
{
45+
"offset": 0,
46+
"length": 5,
47+
"key": 0
48+
}
49+
],
50+
"data": {}
51+
},
52+
{
53+
"key": "5r8641253",
54+
"text": "Etiam ultricies nisi vel augue.",
55+
"type": "unstyled",
56+
"depth": 0,
57+
"inlineStyleRanges": [
58+
{
59+
"offset": 0,
60+
"length": 5,
61+
"style": "BOLD"
62+
}
63+
],
64+
"entityRanges": [],
65+
"data": {}
66+
},
3767
{
3868
"key": "5r8641",
3969
"text": "Etiam ultricies nisi vel augue.",

‎src/flatAttributesList.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
// @flow
88

99
const sortInteger = (a: number, b: number): number => a - b;
10+
const isLink = (element: Object): boolean => Object.prototype.hasOwnProperty.call(element, 'key');
1011

1112
const convertStylesIntoNumbers = (styles: Array<Object>): Array<number> => {
1213
const numbers = [];
@@ -35,7 +36,7 @@ const addTypeToSegments = (
3536
originalStyles.forEach((style: Object) => {
3637
const length = segment[0] + segment[1];
3738
if (length > style.offset && length <= style.offset + style.length) {
38-
if (Object.prototype.hasOwnProperty.call(style, 'key')) {
39+
if (isLink(style)) {
3940
types.push('link');
4041
segment.push(style.key);
4142
} else {
@@ -64,8 +65,15 @@ const isOverlap = (styles: Array<Object>): any => {
6465
return found;
6566
};
6667

68+
const checkSingleLinkElement = (item: Object) => {
69+
if (isLink(item)) {
70+
Object.assign(item, { style: 'link' });
71+
}
72+
};
73+
6774
const flatAttributesList = (attrsList: Array<Object>): Array<Object> => {
6875
if (attrsList.length === 1 || !isOverlap(attrsList)) {
76+
checkSingleLinkElement(attrsList[0]);
6977
return attrsList;
7078
}
7179
const numbersList = convertStylesIntoNumbers(attrsList);

0 commit comments

Comments
 (0)