Skip to content
This repository has been archived by the owner on Jun 3, 2021. It is now read-only.

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

Open
wants to merge 14 commits into
base: master
Choose a base branch
from

Conversation

brucetoo
Copy link
Contributor

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

brucetoo and others added 9 commits December 25, 2018 17:38
…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
Copy link

weex-bot commented Jan 22, 2019

Fails
🚫 Failed to run assembleDebug task for android.
Messages
📖 android build verification finished.

Generated by 🚫 dangerJS

Copy link
Contributor

@YorkShen YorkShen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

  1. Add document for your component on the draft branch of the weex-site
  2. Why not useRichText which already exist to achieve? Is there any special reason?
  3. 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

@YorkShen YorkShen self-assigned this Jan 22, 2019
@brucetoo
Copy link
Contributor Author

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

  1. Add document for your component on the draft branch of the weex-site
  2. Why not useRichText which already exist to achieve? Is there any special reason?
  3. 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
Copy link
Contributor

YorkShen commented Jan 23, 2019

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
Copy link
Contributor Author

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
Copy link
Contributor

YorkShen commented Jan 25, 2019

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

@YorkShen
Copy link
Contributor

YorkShen commented Feb 21, 2019

@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
Copy link
Contributor Author

@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.

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this outcommented code left here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Member

janpio commented Feb 21, 2019

  • 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
Copy link
Contributor Author

brucetoo commented Feb 22, 2019

  • 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
Copy link
Contributor

YorkShen commented Feb 22, 2019

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

Copy link
Contributor

@YorkShen YorkShen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Thanks

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants