react-native-htmlview

react-native-htmlview copied to clipboard

Hi All,

Is this even possible? I could not figure it out. But it seems it is not rendering nested ul's within ul > li nodes.

Suggestions?

Best, Joe

It's possible, but it's not very elegant! For example,

    const htmlContent = `<ul><li>One</li><li><ul><li>Nested one</li></ul></li></ul>`

produces something like:

  - One
  - - Nested one

with a double bullet.

Hi @richchurcher have you find other solution to come over this issue?

Nope, not so far! Haven't spent any time on it though. PRs definitely welcome :smile:

So you would rather a nested <ul> just indent with one bullet like an <li> child and have its children indent in a similar manner? This is what Github does btw.

List
• Item 1
SubList
• SubItem1
• SubItem2
Sublist2
• PrettyDeepNesting
• PrettyDeepNesting2

So it seems like it has a few different styles for different levels of nesting. Sorry about the multiple updates. It took awhile to get that straight on zero sleep.

I have done this locally to add the possibility of having 2 levels of lists :

diff --git a/htmlToElement.js b/htmlToElement.js
index fc9151d..9fbe47e 100644
--- a/htmlToElement.js
+++ b/htmlToElement.js
@@ -9,6 +9,7 @@ const defaultOpts = {
   lineBreak: '\n',
   paragraphBreak: '\n\n',
   bullet: '\u2022 ',
+  bulletL2: '            \u2023 ',
   TextComponent: Text,
   textComponentProps: null,
   NodeComponent: Text,
@@ -49,7 +50,7 @@ export default function htmlToElement(rawHtml, customOpts = {}, done) {
     return {...parentStyle, ...style};
   }
 
-  function domToElement(dom, parent) {
+  function domToElement(dom, parent, grandparent) {
     if (!dom) return null;
 
     const renderNode = opts.customRenderer;
@@ -128,18 +129,22 @@ export default function htmlToElement(rawHtml, customOpts = {}, done) {
           const defaultStyle = opts.textComponentProps ? opts.textComponentProps.style : null;
           const customStyle = inheritedStyle(parent);
 
+          const level2 = grandparent && grandparent.name === 'li'
+          if (level2) {
+            linebreakBefore = opts.lineBreak;
+          }
+
           if (parent.name === 'ol') {
             listItemPrefix = (<TextComponent style={[defaultStyle, customStyle]}>
               {`${orderedListCounter++}. `}
             </TextComponent>);
           } else if (parent.name === 'ul') {
             listItemPrefix = (<TextComponent style={[defaultStyle, customStyle]}>
-              {opts.bullet}
+              {level2 ? opts.bulletL2 : opts.bullet}
             </TextComponent>);
           }
-          if (opts.addLineBreaks && index < list.length - 1) {
-            linebreakAfter = opts.lineBreak;
-          }
+
+          linebreakAfter = opts.lineBreak;
         }
 
         const {NodeComponent, styles} = opts;
@@ -154,7 +159,7 @@ export default function htmlToElement(rawHtml, customOpts = {}, done) {
           >
             {linebreakBefore}
             {listItemPrefix}
-            {domToElement(node.children, node)}
+            {domToElement(node.children, node, parent)}
             {linebreakAfter}
           </NodeComponent>
         );

This would be useful as well when needing to style something like – which right now I don't think it's possible:

<a href="#url">
  <strong>
    <em>
      Link in bold and italic.
    </em>
  </strong>
</a>

Or is it? 🤔