diff --git a/packages/core/ui/html-view/html-view-common.ts b/packages/core/ui/html-view/html-view-common.ts index ffeac7d608..98bb11da1f 100644 --- a/packages/core/ui/html-view/html-view-common.ts +++ b/packages/core/ui/html-view/html-view-common.ts @@ -1,8 +1,6 @@ -import { CssProperty } from '../core/properties'; -import { View, CSSType } from '../core/view'; +import { View, CSSType } from '../core/view'; import { booleanConverter } from '../core/view-base'; import { Property } from '../core/properties'; -import { Style } from '../styling/style'; import { Color } from '../../color'; import { HtmlView as HtmlViewDefinition } from '.'; @@ -30,10 +28,9 @@ export const selectableProperty = new Property({ }); selectableProperty.register(HtmlViewBase); -export const linkColorProperty = new CssProperty({ +export const linkColorProperty = new Property({ name: 'linkColor', - cssName: 'link-color', equalityComparer: Color.equals, valueConverter: (value) => new Color(value), }); -linkColorProperty.register(Style); +linkColorProperty.register(HtmlViewBase); diff --git a/packages/core/ui/html-view/index.d.ts b/packages/core/ui/html-view/index.d.ts index 5baea7793d..5e3f08331f 100644 --- a/packages/core/ui/html-view/index.d.ts +++ b/packages/core/ui/html-view/index.d.ts @@ -1,5 +1,6 @@ import { View } from '../core/view'; import { Property } from '../core/properties'; +import { Color } from '../../color'; /** * 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 { } export const htmlProperty: Property; +export const selectableProperty: Property; +export const linkColorProperty: Property; diff --git a/packages/core/ui/html-view/index.ios.ts b/packages/core/ui/html-view/index.ios.ts index 2c135020ad..730e1a0c8c 100644 --- a/packages/core/ui/html-view/index.ios.ts +++ b/packages/core/ui/html-view/index.ios.ts @@ -11,17 +11,16 @@ const majorVersion = iOSNativeHelper.MajorVersion; export class HtmlView extends HtmlViewBase { nativeViewProtected: UITextView; - private currentHtml: string; public createNativeView() { - const view = UITextView.new(); - view.scrollEnabled = false; - view.editable = false; - view.selectable = true; - view.userInteractionEnabled = true; - view.dataDetectorTypes = UIDataDetectorTypes.All; - - return view; + const nativeView = UITextView.new(); + nativeView.scrollEnabled = false; + nativeView.editable = false; + nativeView.selectable = true; + nativeView.userInteractionEnabled = true; + nativeView.dataDetectorTypes = UIDataDetectorTypes.All; + + return nativeView; } public initNativeView(): void { @@ -60,24 +59,37 @@ export class HtmlView extends HtmlViewBase { } private renderWithStyles() { - let html = this.currentHtml; - const styles = []; - if (this.nativeViewProtected.font) { - styles.push(`font-family: '${this.nativeViewProtected.font.fontName}';`); - styles.push(`font-size: ${this.nativeViewProtected.font.pointSize}px;`); + const bodyStyles: string[] = []; + + let htmlContent = this.html ?? ''; + + htmlContent += '`; + + htmlContent += `body {${bodyStyles.join('')}}`; + + if (this.linkColor) { + htmlContent += `a, a:link, a:visited { color: ${this.linkColor.hex} !important; }`; } - const htmlString = NSString.stringWithString(html + ''); + + htmlContent += ''; + + const htmlString = NSString.stringWithString(htmlContent); const nsData = htmlString.dataUsingEncoding(NSUnicodeStringEncoding); - this.nativeViewProtected.attributedText = NSAttributedString.alloc().initWithDataOptionsDocumentAttributesError(nsData, { [NSDocumentTypeDocumentAttribute]: NSHTMLTextDocumentType }, null); + const attributes = NSDictionary.dictionaryWithObjectForKey(NSHTMLTextDocumentType, NSDocumentTypeDocumentAttribute); - if (majorVersion >= 13 && UIColor.labelColor) { + this.nativeViewProtected.attributedText = NSAttributedString.alloc().initWithDataOptionsDocumentAttributesError(nsData, attributes, null); + + if (!this.style.color && majorVersion >= 13 && UIColor.labelColor) { this.nativeViewProtected.textColor = UIColor.labelColor; } } @@ -86,7 +98,6 @@ export class HtmlView extends HtmlViewBase { return ''; } [htmlProperty.setNative](value: string) { - this.currentHtml = value; this.renderWithStyles(); } @@ -106,14 +117,10 @@ export class HtmlView extends HtmlViewBase { this.renderWithStyles(); } - [linkColorProperty.getDefault](): UIColor { - return this.nativeViewProtected.linkTextAttributes[NSForegroundColorAttributeName]; - } [linkColorProperty.setNative](value: Color | UIColor) { - const color = value instanceof Color ? value.ios : value; - const linkTextAttributes = NSDictionary.dictionaryWithObjectForKey(color, NSForegroundColorAttributeName); - this.nativeViewProtected.linkTextAttributes = linkTextAttributes; + this.renderWithStyles(); } + [fontInternalProperty.getDefault](): UIFont { return this.nativeViewProtected.font; } diff --git a/packages/core/ui/text-base/index.d.ts b/packages/core/ui/text-base/index.d.ts index fdefb6b436..9192ec579e 100644 --- a/packages/core/ui/text-base/index.d.ts +++ b/packages/core/ui/text-base/index.d.ts @@ -6,6 +6,7 @@ import { Property, CssProperty, InheritedCssProperty } from '../core/properties' import { CoreTypes } from '../../core-types'; import { ShadowCSSValues } from '../styling/css-shadow'; import { StrokeCSSValues } from '../styling/css-stroke'; +import { FontStyleType, FontWeightType } from '../styling/font-interfaces'; /** * @nsView TextBase @@ -31,6 +32,13 @@ export class TextBase extends View implements AddChildFromBuilder { */ formattedText: FormattedString; + /** + * Gets or sets font-family style property. + * + * @nsProperty + */ + fontFamily: string; + /** * Gets or sets font-size style property. * @@ -38,6 +46,20 @@ export class TextBase extends View implements AddChildFromBuilder { */ fontSize: number; + /** + * Gets or sets font-style style property. + * + * @nsProperty + */ + fontStyle: FontStyleType; + + /** + * Gets or sets font-weight style property. + * + * @nsProperty + */ + fontWeight: FontWeightType; + /** * Gets or sets letterSpace style property. *