viewof palette = { let key = new URL(document.baseURI).pathname.substring(1).replace('/', '-') //unique cookie key for this notebook url // functions for processing text const isColor = (strColor) => { // checks to see if string is a valid HTML color const s = new Option().style; s.color = strColor; return s.color !== ''; } const parse = (s) => { // processes the input text into section that are valid HTML colors let sLength = s.length // length of string let A = [] // the array s is going to be parse into. Each element is going to be ({ string, startIndex, endIndex }) let left = 0, right = 0 // counts the number of left ( and right ) parentheses let char = '' // current character in the string let skip = [ `#` ] // characters skipped in phrase let cut = [ ',', ' ', '\n', 'x', `[`, `]`, `'`, `"`, `;` ] // characters that cut string into section if not in a parenthesis let section = '' // current string section being constructed one by one. Gets reset every section let startIndex = 0, endIndex = 0 // where the section begins and ends so the

 tag can be inserted with color highlighted  tags
    let fillColor = '', textColor = '' // color of highlight and text
    let keep = false // for testing if string is a valid HTML color

    for( let i=0; i<=sLength; i++ ){ // step for each character of the string
      char = s.charAt(i)

      // count how many left and right parentheses we have seen
      if( char ==='(' ) left++
      if( char ===')' ) right++
      
      if( left != 0 ){ // dealing with a parenthesis section
        section += char
        if( left === right ){ // resets parenthesis count
          left = 0
          right = 0
        }
        
      }else{ // not dealing with a parenthesis section
        if( skip.includes(char) ){
          // do nothing
        }else if( cut.includes(char) || i==sLength ){ // cut section
          //test to see if section is a valid HTML color
          keep = true
          if( isColor(section) ){
            fillColor = d3.color( section ).hex()
          }else if( isColor('#'+section)){
            fillColor = d3.color( '#'+section ).hex()
          }else{
            keep = false
          }

          // if it is a valid color, add it to the array
          if( keep ){
            if( d3.lab(d3.color(fillColor)).l > 65 ){
              textColor = '#000000'
            }else{
              textColor = '#FFFFFF'
            }
            A.push(
              ({string:section, startIndex:startIndex, endIndex:i, fillColor:fillColor, textColor:textColor})
            )
          }
          startIndex = i+1
          section = ''
        }else{ // if no skips or cuts, add character to section string
          section += char
        }
      }
      
    }

    return A
  }

  
  function resizeTextarea() {
      var textarea = document.getElementById("textArea_editing");
      if( textarea != null){
        textarea.style.height = "auto"; // Reset height to auto to get accurate scrollHeight
        textarea.style.height = (1*textarea.scrollHeight-19) + "px"; // Set the height to the scrollHeight
    }
  }
  function updatePre(text){
    if( document.getElementById('textArea_highlight') != null){ document.getElementById('textArea_highlight').innerHTML = text}
  }
  let formatPre = (text, highlight) => {
    for( let i = highlight.length-1; i>=0; i--){
      text = text.slice(0, highlight[i].startIndex)
        + ''
        + text.slice(highlight[i].startIndex, highlight[i].endIndex)
        + ''
        + text.slice(highlight[i].endIndex);
    }
    return text
  }

  // HTML element
  let savedText = localStorage.getItem(key)
  if(savedText === null || savedText == ''){savedText = `AntiqueWhite  756969  333  #dfd
rgb(230, 0, 153)  hsl(150, 30%, 60%)`}
  let form = html`
  
    
    
    
    
    
    ${formatPre(savedText, parse(savedText))}
    ${savedText}
  `;
  
  let output
  form.oninput = () => {
    localStorage.setItem(key, form.palleteInput.value);
    resizeTextarea() 
    output = parse(form.palleteInput.value)
    updatePre(formatPre(form.palleteInput.value, output))
    form.value = output.map( e => e.fillColor )
  };
  form.oninput();
  
  addEventListener("resize", (event) => { resizeTextarea() });
  
  return form;
}