Lots of problems with Text widget when trying to use bullets and numbering

[FranklinAlexander]

I am having a lot of problems with the Text widget when trying to using numbering and bullets:

1. It is impossible to resume numbering for an ordered list if any of the numbered items have bullets. The number ALWAYS restarts at 1 on the next item and I can't find any way to fix this. 

2. There doesn't seem to be any way to change the font color of the numbering so it matches the text. If I highlight all of the text (including the numbering) only the text will change to the selected font color, the numbers remain white and are invisible on a white background. I was able to use custom styling to get the numbers the desired color, but shouldn't have to do that. 

3. A couple of things that are of lesser importance, but can be a little annoying:

    a. It would be nice to be able to embed an Image widget inside of a Text widget

    b. It would be nice to have some control over the numbering/bullet indents.

I know the obvious solution to most of the issues above would be to use a Text widget for every paragraph or bulleted item. As a practice, I normally embed my Text widgets into a Fixed panel because it adds some flexibility such as padding for the text and the ability to add images. In summation, I end up using a LOT of widgets which can make positioning and styling complicated, instead of being able to create the desired content using a single Text widget. The other issue with this solution is that you loose any ability for text overflow so not good if you need to display a lot of information and scrolling is required.

[FranklinAlexander · Accepted solution]

Just wanted to pass this along in case anyone found it useful, but my solution to this was to create a new widget for the sole purpose of adding html to a fixed panel. This way I can do whatever I want and it actually took less time than fighting with the Text widget to get it to do something it wasn't designed to do. 

I did this in about a day and a half:

      

I have two scroll bars (vertical and horizontal) that act independently of each other, the vertical scroll is hidden when the mouse is over the image so you can scroll horizontally without the parent div moving.

Here is the code:

import { React, type AllWidgetProps } from 'jimu-core'
import { type IMConfig } from '../config'

let isMouseover = false
let headerLinks, aboutText

export default class Widget extends React.PureComponent<AllWidgetProps<{}>, any> {

  handleWheelScroll(evt) {    
    //headerLinks = document.querySelector(".about-headerLinks")
    headerLinks.scrollLeft+=evt.deltaY>0?100:-100   
  }

  addHoverEvents(evt) {
    aboutText = document.querySelector(".About-text")
    aboutText.style.overflowY = "auto"
    console.log("About text ", aboutText)
    headerLinks = document.querySelector(".about-headerLinks")
    headerLinks.addEventListener("mouseover", function(evt) {
      isMouseover = true
      console.log("Mouseover = ", isMouseover)
      aboutText.style.overflowY = "hidden"
    })

    headerLinks.addEventListener("mouseleave", function(evt) {
      isMouseover = false
      console.log("Mouseover = ", isMouseover)
      aboutText.style.overflowY = "auto"
    })
    
  }


  render() {

    const content = (
      <div className="About-text jimu-widget" onLoad={this.addHoverEvents} style={{color:"#000000", fontSize:"14px", padding: "10px"}}>
        <div className="about-overview" style={{}}>
          <p style={{fontSize:"18px", borderBottom:"2px solid rgba(200,200,200,0.5)"}}><b>Overview</b></p>          
          <p>The application header contains three links as indicated in the graphic below</p>
          <p className="about-headerLinks" onWheel={this.handleWheelScroll} ><img className="about-image header-links-img" src="/resources/about-images/HeaderLinks.png"></img></p>   
          <p>Refer to the <b>Helpful hints</b> panel for an overview of the application widgets and navigation. </p>
          <p>Select the <b>Boat ramp search</b> link to interact with the Florida open boat ramp database by 
            filtering the boat ramps by criteria, searching boat ramps by attributes, and finding ramps by location.</p>
          <p>Select the <b>Boat ramp info</b> link to obtain detailed information about a selected boat ramp.</p>
        </div>
        <div className="about-details">
          <p style={{fontSize:"18px", borderBottom:"2px solid rgba(200,200,200,0.5)"}}><b>More Details</b></p>
          <p><img className="about-image viewsNav-img" src="/resources/about-images/ViewsNavWidget.png"></img></p>
          <p>The <b>Boat ramp search</b> panel contains widgets for interacting with the boat ramp database. </p>
          <ul>
            <li>From the <b>Filters</b> tab, the database can be filtered by 6 criteria. 
              Filtered ramps are listed in the bottom panel and can be selected for more info and to zoom in to the ramp on the map.</li>
            <li>From the <b>Attributes</b> tab, the database can be searched by Ramp name, Waterbody name, and Primary management entity. 
              The widget will not filter the data. If a filter as been applied in the Filters tab, 
              only the filtered records will be available for search.</li>
            <li>From the <b>Location</b> tab, ramps can be located by a given distance from a map location or area, 
              a provided address, or your location. 
              For the latter option, the browser location service must be enabled.</li>
          </ul>
          <p>The <b>Attribute Table</b> <img className="about-image tableIcon-img" src="/resources/about-images/TableIcon_clean.png"></img>
            can be opened from the bottom of the screen to provide a view to the database and scroll through the records. 
            Selecting a record zooms in to the boat ramp on the map and opens the <b>Boat ramp info</b> panel. 
            The table data can be searched by ramp name and waterbody name.</p>
          <p>Lastly, clicking on any feature in the map will open the <b>Boat ramp info</b> panel for that feature.</p>
        </div>
      </div>
    )
    return (content)
  }   
}