Skip to content

Commit 640db95

Browse files
CatchABusCatchABus
authored
fix(ios): apply text color to HTMLView content (NativeScript#10708)
1 parent 8c4d7ca commit 640db95

File tree

4 files changed

+64
-35
lines changed

4 files changed

+64
-35
lines changed

‎packages/core/ui/html-view/html-view-common.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import { CssProperty } from '../core/properties';
2-
import { View, CSSType } from '../core/view';
1+
import { View, CSSType } from '../core/view';
32
import { booleanConverter } from '../core/view-base';
43
import { Property } from '../core/properties';
5-
import { Style } from '../styling/style';
64
import { Color } from '../../color';
75
import { HtmlView as HtmlViewDefinition } from '.';
86

@@ -30,10 +28,9 @@ export const selectableProperty = new Property<HtmlViewBase, boolean>({
3028
});
3129
selectableProperty.register(HtmlViewBase);
3230

33-
export const linkColorProperty = new CssProperty<Style, Color>({
31+
export const linkColorProperty = new Property<HtmlViewBase, Color>({
3432
name: 'linkColor',
35-
cssName: 'link-color',
3633
equalityComparer: Color.equals,
3734
valueConverter: (value) => new Color(value),
3835
});
39-
linkColorProperty.register(Style);
36+
linkColorProperty.register(HtmlViewBase);

‎packages/core/ui/html-view/index.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { View } from '../core/view';
22
import { Property } from '../core/properties';
3+
import { Color } from '../../color';
34

45
/**
56
* Represents a view with html content. Use this component instead WebView when you want to show just static HTML content.
@@ -39,3 +40,5 @@ export class HtmlView extends View {
3940
}
4041

4142
export const htmlProperty: Property<HtmlView, string>;
43+
export const selectableProperty: Property<HtmlView, boolean>;
44+
export const linkColorProperty: Property<HtmlView, Color>;

‎packages/core/ui/html-view/index.ios.ts‎

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,16 @@ const majorVersion = iOSNativeHelper.MajorVersion;
1111

1212
export class HtmlView extends HtmlViewBase {
1313
nativeViewProtected: UITextView;
14-
private currentHtml: string;
1514

1615
public createNativeView() {
17-
const view = UITextView.new();
18-
view.scrollEnabled = false;
19-
view.editable = false;
20-
view.selectable = true;
21-
view.userInteractionEnabled = true;
22-
view.dataDetectorTypes = UIDataDetectorTypes.All;
23-
24-
return view;
16+
const nativeView = UITextView.new();
17+
nativeView.scrollEnabled = false;
18+
nativeView.editable = false;
19+
nativeView.selectable = true;
20+
nativeView.userInteractionEnabled = true;
21+
nativeView.dataDetectorTypes = UIDataDetectorTypes.All;
22+
23+
return nativeView;
2524
}
2625

2726
public initNativeView(): void {
@@ -60,24 +59,37 @@ export class HtmlView extends HtmlViewBase {
6059
}
6160

6261
private renderWithStyles() {
63-
let html = this.currentHtml;
64-
const styles = [];
65-
if (this.nativeViewProtected.font) {
66-
styles.push(`font-family: '${this.nativeViewProtected.font.fontName}';`);
67-
styles.push(`font-size: ${this.nativeViewProtected.font.pointSize}px;`);
62+
const bodyStyles: string[] = [];
63+
64+
let htmlContent = this.html ?? '';
65+
66+
htmlContent += '<style>';
67+
68+
bodyStyles.push(`font-size: ${this.style.fontSize}px;`);
69+
70+
if (this.style.fontFamily) {
71+
bodyStyles.push(`font-family: '${this.style.fontFamily}';`);
6872
}
69-
if (this.nativeViewProtected.textColor) {
70-
const textColor = Color.fromIosColor(this.nativeViewProtected.textColor);
71-
styles.push(`color: ${textColor.hex};`);
73+
74+
if (this.style.color) {
75+
bodyStyles.push(`color: ${this.style.color.hex};`);
7276
}
73-
if (styles.length > 0) {
74-
html += `<style>body {${styles.join('')}}</style>`;
77+
78+
htmlContent += `body {${bodyStyles.join('')}}`;
79+
80+
if (this.linkColor) {
81+
htmlContent += `a, a:link, a:visited { color: ${this.linkColor.hex} !important; }`;
7582
}
76-
const htmlString = NSString.stringWithString(html + '');
83+
84+
htmlContent += '</style>';
85+
86+
const htmlString = NSString.stringWithString(htmlContent);
7787
const nsData = htmlString.dataUsingEncoding(NSUnicodeStringEncoding);
78-
this.nativeViewProtected.attributedText = NSAttributedString.alloc().initWithDataOptionsDocumentAttributesError(nsData, <any>{ [NSDocumentTypeDocumentAttribute]: NSHTMLTextDocumentType }, null);
88+
const attributes = NSDictionary.dictionaryWithObjectForKey(NSHTMLTextDocumentType, NSDocumentTypeDocumentAttribute);
7989

80-
if (majorVersion >= 13 && UIColor.labelColor) {
90+
this.nativeViewProtected.attributedText = NSAttributedString.alloc().initWithDataOptionsDocumentAttributesError(nsData, attributes, null);
91+
92+
if (!this.style.color && majorVersion >= 13 && UIColor.labelColor) {
8193
this.nativeViewProtected.textColor = UIColor.labelColor;
8294
}
8395
}
@@ -86,7 +98,6 @@ export class HtmlView extends HtmlViewBase {
8698
return '';
8799
}
88100
[htmlProperty.setNative](value: string) {
89-
this.currentHtml = value;
90101
this.renderWithStyles();
91102
}
92103

@@ -106,14 +117,10 @@ export class HtmlView extends HtmlViewBase {
106117
this.renderWithStyles();
107118
}
108119

109-
[linkColorProperty.getDefault](): UIColor {
110-
return this.nativeViewProtected.linkTextAttributes[NSForegroundColorAttributeName];
111-
}
112120
[linkColorProperty.setNative](value: Color | UIColor) {
113-
const color = value instanceof Color ? value.ios : value;
114-
const linkTextAttributes = NSDictionary.dictionaryWithObjectForKey(color, NSForegroundColorAttributeName);
115-
this.nativeViewProtected.linkTextAttributes = linkTextAttributes;
121+
this.renderWithStyles();
116122
}
123+
117124
[fontInternalProperty.getDefault](): UIFont {
118125
return this.nativeViewProtected.font;
119126
}

‎packages/core/ui/text-base/index.d.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Property, CssProperty, InheritedCssProperty } from '../core/properties'
66
import { CoreTypes } from '../../core-types';
77
import { ShadowCSSValues } from '../styling/css-shadow';
88
import { StrokeCSSValues } from '../styling/css-stroke';
9+
import { FontStyleType, FontWeightType } from '../styling/font-interfaces';
910

1011
/**
1112
* @nsView TextBase
@@ -31,13 +32,34 @@ export class TextBase extends View implements AddChildFromBuilder {
3132
*/
3233
formattedText: FormattedString;
3334

35+
/**
36+
* Gets or sets font-family style property.
37+
*
38+
* @nsProperty
39+
*/
40+
fontFamily: string;
41+
3442
/**
3543
* Gets or sets font-size style property.
3644
*
3745
* @nsProperty
3846
*/
3947
fontSize: number;
4048

49+
/**
50+
* Gets or sets font-style style property.
51+
*
52+
* @nsProperty
53+
*/
54+
fontStyle: FontStyleType;
55+
56+
/**
57+
* Gets or sets font-weight style property.
58+
*
59+
* @nsProperty
60+
*/
61+
fontWeight: FontWeightType;
62+
4163
/**
4264
* Gets or sets letterSpace style property.
4365
*

0 commit comments

Comments
 (0)