Add a new component to support Html tags(can custom tag's implement) #2071

brucetoo · 2019-01-22T10:38:44Z

Add a new component to support Html tags which named WxHtmlComponent . For now it's support render table,img,video and all textview supported html tags. And we can config what tags we care, even support header and footer view add in WxHtmlComponent .

Here is a full example:

<html-text :html-text="formatHtml"
           :html-option="htmlOption">
     <div> Any Header View</div>
     <div> Any Footer View</div>
</html-text>

Attributes

New component use in js named html-text, there are two attribute

html-text

The origin raw html text, looks like this, contains all kinds of rich text tags...
html-option

inner configs about how to render specified tag:
```
htmlOption: {
          image: { 
            resize: 'cover'
          },
          table: { 
            template: ''
          },
          tags:['img','table','video']
        },
```
- image
  
  img tag, how to handle image(like image's attribute )
- table
  
  table tag's html template to control how to render table,the default template can be found here. it's wrapped by WRAP_PARENT WebView default.
- tags
  
  tags array that will be handled, what show above is default three tags(img,table,video), you can add any specail tag in this array, and custom implement by native view.

Header&Footer

We can add header and footer in html-text, Only the direct first two subview can be parsed by WxHtmlComponent , which means the first one is Header, and the second one is Footer. but the header&footer view-self can be any of views as you wish.

Tag Click

There are default empty click listeners, and can be customed by overide getTagViewClickListener which contains many useful information

Why custom HtmlCompat

For now, the source cod of HtmlCompat have been moved in AndroidX,where there are few projects has integrated
The default interface HtmlCompat.TagHandler do not contains Attributes params in positon of start tag
The default css-style parse rules not support color named as agb, which already added here
The default quote style is extremely ugly,isn't it ? So let's make it as MarkDown looks like
The bullet span can't custom gap, bullet style etc..
CUSTOM BY USER IS LIMITED, that's the primary cause

How this works

The key thought of WxHtmlComponent is spitting origin raw html text by different tags, and use native view to render each tag. (That's because i can't find a good way to render table tag in html, if there exists, please contact me)

Can find the source code here

Here is a relation of mapping

`<img>..</img>,<img .../>`	getDefaultImageView
`<table> ..</table>`	getDefaultTabView
`<video ..>..</video>,<video ../>`	getDefaultVideo
`textView supported tag`	getDefaultTextView

…ri.getPath() with uri.getEncodedSchemeSpecificPart(). check the code comments for detail.

synchronize new commits in master

1. support <table> render by native webView,can custom html template 2. support <img> tag to render by any view(default with ImageView) 3. integrate HtmlCompat which extract from support library into weex with many changes 4. support extract any tags, and render by any custom view

1. optimize the rule of parse html attributes 2. add rgb color style support

2. add tags option config for user to custom more tag support(default contains <img>,<table>,<video>)

2、click listener callback add view-self

2、Optimise text new line("\n") situation(delete the last one,add to start position)

weex-bot · 2019-01-22T10:40:32Z

	Fails
🚫	Failed to run assembleDebug task for android.

	Messages
📖	android build verification finished.

Generated by 🚫 dangerJS

YorkShen

Sounds like you are writing a component to achieve Html.fromHtml, here is some advice

Add document for your component on the draft branch of the weex-site
Why not useRichText which already exist to achieve? Is there any special reason?
Though not forced, sending a an email to weex mailing list to discuss the feature would be great, as mailing list is where decisions are made in Apache community

brucetoo · 2019-01-23T02:09:11Z

Sounds like you are writing a component to achieve Html.fromHtml, here is some advice

Add document for your component on the draft branch of the weex-site

Why not useRichText which already exist to achieve? Is there any special reason?

Though not forced, sending a an email to weex mailing list to discuss the feature would be great, as mailing list is where decisions are made in Apache community

Thanks for your quick reply.
But as what describe before, this component is not just achieve Html.fromHtml, because the standard TextView can't implement all html tags, as the source code showing. As to do so, you can see the front comment Why custom HtmlCompat .

The WxHtmlComponent has two key points:

Html.fromHtml to handle all TextView supported Html Tag
The rest tags that can't be well done by TextView (eg: video,img) or no way to do( eg:table) we use native views to render which is primary reason to design this component.

It's totally different scenarios with inner component richtext . Where richtext is absorbed in providing a container name richtext to hold all inner components , but WxHtmlComponent focus on a single raw html string like <h1 id="Header1">Header1</h1><blockquote><p>引用块喽</p></blockquote><p><strong>粗体</strong></p><p><em>斜体</em></p><p><del>删除线</del></p><p><u>下划线</u></p><h3 id="bf9234ae">这是一个HEAR3</h3> and also support Header&Footer view in both top&bottom sides

BTW, The document detail already contains in the front comment. And i will follow the rules to add it in weex-site later.

YorkShen · 2019-01-23T03:44:12Z

BTW, The document detail already contains in the front comment. And i will follow the rules to add it in weex-site later.

Please update the document then I will read your PR, which may took days as there are lots of code changes.

brucetoo · 2019-01-23T10:24:25Z

BTW, The document detail already contains in the front comment. And i will follow the rules to add it in weex-site later.

Please update the document then I will read your PR, which may took days as there are lots of code changes.

Please check here

YorkShen · 2019-01-25T07:40:45Z

Thanks, I will review your PR and document when available, and it may take weeks as it's a huge change.

…ttributes, change to another way to support more styles

YorkShen · 2019-02-21T06:52:01Z

@brucetoo Sorry for my delay, there is just so many other issues that I have to deal with.

Could you please send an email to the mailing-list to share your feature? Maybe someone else could do the code review for you.

brucetoo · 2019-02-21T07:12:43Z

@brucetoo Sorry for my delay, there is just so many other issues that I have to deal with.

Could you please send an email to the mailing-list to share your feature? Maybe someone else could do the code review for you.

Already shared. but it's not that kind active as i thought.

janpio · 2019-02-21T12:53:00Z

android/commons/src/main/java/com/alibaba/weex/commons/adapter/ImageAdapter.java

-      WXSDKManager.getInstance().postOnUiThread(runnable, 0);
-    }
+      Picasso.with(view.getContext()).load(url).into(view);
+//    Runnable runnable = new Runnable() {


Why is this outcommented code left here?

I change this ImageAdapter because the origin has many conditions about how to display image. It's in demo project, so not the key core code

janpio · 2019-02-21T12:57:47Z

Travis tests are failing
Android only? iOS implementation planned or is there another alternative available there?
Is this all original code you wrote or are there also other, third party files added via this PR?

brucetoo · 2019-02-22T01:33:30Z

Travis tests are failing

Android only? iOS implementation planned or is there another alternative available there?

Is this all original code you wrote or are there also other, third party files added via this PR?

Travis tests error is not config NDK path,

* What went wrong:
A problem occurred configuring project ':commons'.
> Could not resolve all dependencies for configuration ':commons:_debugPublish'.
   > A problem occurred configuring project ':weex_sdk'.
      > NDK not configured. /usr/local/android-sdk/ndk-bundle
        Download it with SDK manager.

There are nothing changes in native code...so is this must be corrected？

Currently , Android Only !! (I'm not good at IOS ) Hope there are someone to make iOS implementation...
Some code modify from open source community, like HtmlCompat
And there already contains License in file head.

YorkShen · 2019-02-22T03:40:19Z

TravisCI is failed because of NDK environment on the TravisCI server, this can be ignored.

…situation

YorkShen

Please rebase to master branch, as there is a conflict.

Thanks

brucetoo and others added 9 commits December 25, 2018 17:38

[weex][android] fix the custom file ttf not work well, need replace u…

3647b59

…ri.getPath() with uri.getEncodedSchemeSpecificPart(). check the code comments for detail.

Merge pull request #1 from apache/master

249a6d1

synchronize new commits in master

[Android] Support RichText by a special way to render html string

df2bd63

1. optimize the rule of parse html attributes 2. add rgb color style support

1. support <video> render by native custom view

0fdf9fa

2. add tags option config for user to custom more tag support(default contains <img>,<table>,<video>)

1、improve image/text default implement

a259089

2、click listener callback add view-self

1、WxHtmlComponent add header&footer support

8e7c489

2、Optimise text new line("\n") situation(delete the last one,add to start position)

fix a problem cause render failed when text span's length is 0

10c5576

add tagName params in extended methods for better user control

6216165

brucetoo requested review from gubaojian and YorkShen as code owners January 22, 2019 10:38

YorkShen reviewed Jan 22, 2019

View reviewed changes

YorkShen self-assigned this Jan 22, 2019

fix extract font-size exception,cause by complicate style info

2478df1

brucetoo requested a review from Darin726 as a code owner February 12, 2019 06:49

brucetoo added 2 commits February 12, 2019 17:14

fix original htmlCompat style only can parse the standard formatted a…

dc2cdf7

…ttributes, change to another way to support more styles

add header&footer appear&disappear event support

e42a902

janpio mentioned this pull request Feb 21, 2019

[Android] Package names com.taobao.* and com.alibaba.*? #2148

Closed

janpio reviewed Feb 21, 2019

View reviewed changes

fix htmlOption NPE when only a part of options are configured

30cb2ca

fix bug that header view will be clipped(top margin problem) in some …

38f2688

…situation

YorkShen suggested changes Nov 1, 2019

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a new component to support Html tags(can custom tag's implement) #2071

Add a new component to support Html tags(can custom tag's implement) #2071

brucetoo commented Jan 22, 2019

weex-bot commented Jan 22, 2019 •

edited

Loading

YorkShen left a comment •

edited

Loading

brucetoo commented Jan 23, 2019

YorkShen commented Jan 23, 2019 •

edited

Loading

brucetoo commented Jan 23, 2019

YorkShen commented Jan 25, 2019 •

edited

Loading

YorkShen commented Feb 21, 2019 •

edited

Loading

brucetoo commented Feb 21, 2019

janpio Feb 21, 2019

brucetoo Feb 22, 2019

janpio commented Feb 21, 2019

brucetoo commented Feb 22, 2019 •

edited

Loading

YorkShen commented Feb 22, 2019 •

edited

Loading

YorkShen left a comment

Add a new component to support Html tags(can custom tag's implement) #2071

Are you sure you want to change the base?

Add a new component to support Html tags(can custom tag's implement) #2071

Conversation

brucetoo commented Jan 22, 2019

Attributes

Header&Footer

Tag Click

Why custom HtmlCompat

How this works

weex-bot commented Jan 22, 2019 • edited Loading

YorkShen left a comment • edited Loading

Choose a reason for hiding this comment

brucetoo commented Jan 23, 2019

YorkShen commented Jan 23, 2019 • edited Loading

brucetoo commented Jan 23, 2019

YorkShen commented Jan 25, 2019 • edited Loading

YorkShen commented Feb 21, 2019 • edited Loading

brucetoo commented Feb 21, 2019

janpio Feb 21, 2019

Choose a reason for hiding this comment

brucetoo Feb 22, 2019

Choose a reason for hiding this comment

janpio commented Feb 21, 2019

brucetoo commented Feb 22, 2019 • edited Loading

YorkShen commented Feb 22, 2019 • edited Loading

YorkShen left a comment

Choose a reason for hiding this comment

weex-bot commented Jan 22, 2019 •

edited

Loading

YorkShen left a comment •

edited

Loading

YorkShen commented Jan 23, 2019 •

edited

Loading

YorkShen commented Jan 25, 2019 •

edited

Loading

YorkShen commented Feb 21, 2019 •

edited

Loading

brucetoo commented Feb 22, 2019 •

edited

Loading

YorkShen commented Feb 22, 2019 •

edited

Loading