Refactor importHTML

[raineorshine]

importHTML currently converts HTML directly into thought updates. Instead, break it up into two distinct functions that can be used independently as well as in a pipeline.

1. Convert HTML to JSON (lossy) - Responsible for parsing the HTML and converting it to a strict hierarchy.
2. Convert JSON to thought updates (lossless)

[pushkov-fedor]

@raineorshine, hi! I would like to take it. Could you explain please, when we use this function and how HTML input and JSON output look like?

I've found this example in importText.

[ { scope: 'fruits',
    children:
     [ { scope: '  apple',
         children:
          [ { scope: '    gala', children: [] },
            { scope: '    pink lady', children: [] } ] },
       { scope: '  pear', children: [] },
       { scope: '  cherry',
         children: [ { scope: '    white', children: [] } ] } ] },
 { scope: 'veggies',
    children:
     [ { scope: '  kale',
         children: [ { scope: '    red russian', children: [] } ] },
       { scope: '  cabbage', children: [] },
       { scope: '  radish', children: [] } ] } ]
 to:
 <li>fruits<ul>
 <li>apple<ul>
 <li>gala</li>
 <li>pink lady</li>
 </ul></li>
 <li>pear</li>
 ...
 </ul></li>

Do we get such JSON output (as input in this example), when we import HTML?

[raineorshine]

@raineorshine, hi! I would like to take it. Could you explain please, when we use this function

This question is best answered by searching the code base for "importHtml". You'll notice that it is only called in importText. importText is called in a few places, but most importantly, in onPaste. When the user pastes text, we have to do some regex matches to determine if it is plain text or actually HTML.

how HTML input and JSON output look like?
Do we get such JSON output (as input in this example), when we import HTML?

The input may be any string of HTML. I think the jex-block-parser format that you showed in your example would work fine for the JSON output format.

So the function signatures, excluding options, would look like this:

export interface Block {
  scope: string,
  children: Block[],
}
interface ThoughtUpdates {
  thoughtIndexUpdates: GenericObject<Lexeme>,
  contextIndexUpdates: GenericObject<ParentEntry>,
}

htmlToJsonBlocks: (html: string) => Block[]
importJsonBlocks: (thoughtsRanked: Path, blocks: Block[]) => ThoughtUpdates
importText: (thoughtsRanked: Path, inputText: string) => ThoughtUpdates

Note that importText is still an action-creator that has the side effect of dispatching asynchronous actions.