Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/smartface/html-to-text


https://github.com/smartface/html-to-text

Last synced: about 1 month ago
JSON representation

Awesome Lists containing this project

README

        

[![Twitter: @Smartface_io](https://img.shields.io/badge/contact-@Smartface_io-blue.svg?style=flat)](https://twitter.com/smartface_io)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/smartface/html-to-text/blob/master/LICENSE)
![npm version](https://img.shields.io/npm/v/@smartface/html-to-text.svg?style=flat)
[![Build Status](https://travis-ci.org/smartface/html-to-text.svg?branch=master)](https://travis-ci.org/smartface/html-to-text)

# ⛔️ DEPRECATED
This repository is only used internally via smartface services and will not receive new versions anymore. To use the conversion on Smartface Projects, refer to [this link](https://github.com/smartface/sf-extension-utils/blob/master/doc/html-to-text.md)

# html-to-text

You can convert html string to attributed strings for your textview component with this module

## Installation

npm i --save @smartface/html-to-text

## Usage & Example

```javascript
const TextView = require('sf-core/ui/textview');
const AttributedString = require("sf-core/ui/attributedstring");
const createAttributedStrings = require("@smartface/html-to-text");
const propFactory = require("@smartface/contx/lib/smartface/sfCorePropFactory").default;

var textView = new TextView();
var htmlSource = "Your attributed Strings

second
Third
";
var attributedStrings = createAttributedStrings(htmlSource);
textView.attributedText = attributedStrings.map(s => new AttributedString(propFactory(s)));
```

## Limitations & Rules

1. If you want to write **newline** character, you can use these tags **\
**, **\

** or use "\n".
- "attributed \
string"
- "attributed \
string\
"
- "attributed \n string"

2. You can use following html tags
- **br** → newline
- **div** → newline and general tag for styling
- **span** → general tag for styling
- **font** → has attribute as color(**color**), size(**font-size**) and face(**font-family**)
- **b** → bold style
- **u** → underline style
- **i** → italic style
- **a** → has attribute **href** for link.
- **s** → line-through
- **strike** → line-through

3. You can only use following css styles
- font.family-style → **font-family** → ```"font-family: Nunito-ExtraBold;"```
- font.italic → **font-style** → ```"font-style: italic;"```
- font.size → **font-size** → ```"font-size: 24px;" (24pt, 24dp)```
- font.bold → **font-weight** → ```"font-weight: bold;"```
- foregroundColor → **color** → ```"color: rgb(127, 125, 127);"```
- backgroundColor → **background-color** → ```"background-color: rgb(255, 125, 127);"```
- underline → **text-decoration-line** → ```"text-decoration-line: underline;"```
- strikethrough → **text-decoration-line** → ```"text-decoration-line: line-through;"```
- link → **href** → ```"click here "```
- ios.underlineColor → **text-decoration-color** → ```"text-decoration-color: rgba(255, 125, 128);"```
- ios.strikethroughColor → **text-decoration-color** → ```"text-decoration-color: rgba(24, 126, 168);"```

4. ⚠️ If you give **font-family** style, this style can overwrite **font-weight** and **font-style**.
- font-family: **Nunito-ExtraLightItalic**; → this overwrite **font-weight** as normal.