suggestion: background shading of blocks in editor

[ericscheid]

From https://www.reddit.com/r/homebrewery/comments/qum9t8/suggestion_would_love_if_the_editor_automatically/

I sometimes find myself getting lost/confused in piles of text, especially when scrolling through a large brew. Having some sort of subtle highlight which makes tables and notes different from other text would be awesome for readability. Ideally, having different types of tables highlight with their own color would be awesome (stat blocks in yellow, notes in purple or green, tables in green or orange, etc.) but even just one color for all of them would be helpful.

What if instead of basing the color on whether it is a table, or note, etc, the color matches the background color of the element (if background color property is set)?

So each note background in the editor matches the background of the rendered note in the preview pane (though in the editor the color would be at 15% opacity so it’s more subtle).

[ericscheid]

So, blocks that could be tinted in the editor are:

1. {{ curly blocks and spans }}
2. {{ curly blocks and spans with specific class names picking up the background from the css }}
3. | tables |
4. > blockquotes
5. direct html elements like <div> or <dl> (but deprecated)
6. <style> elements, as distinct from any old html elements, just so they can be easily spotted and possibly moved to the style editor instead
7. ```code blocks``` and `code spans`

Of these, # 2 might be tricky. Smexy as heck, but very tricky to implement. That said, we could trap for specific known classnames (e.g. {{monster or {{note) and hard-code specific backgrounds.

Note that # 4 already has styling in the editor of making the text green. The resulting <blockquote> html code that is generated doesn't have any css styling in the V3 phb53style.css file (it does in legacy render style).

[Gazook89]

Of these, # 2 might be tricky. Smexy as heck, but very tricky to implement. That said, we could trap for specific known classnames (e.g. {{monster or {{note) and hard-code specific backgrounds.

I think trapping for specific class names is good enough at least to start-- otherwise you'd have to find all the class names, then search the entire document + the style text for those style declarations, and then figure out which has precedence.

So if looking for specific class names, should it look only at the first position? {{note ... would apply the background for notes, but {{cover,note, ... would not? Another option is to search the whole line for specific class names, but then you run into issues if multiple "special" class names appear....just set the background based on the first match?

At this point I'm leaning towards using the first position only. So div blocks that start with the below patterns would trigger special styling:

• {{note -- light green
• {{descriptive -- light brown
• {{spellList -- light blue
• {{monster -- light orange
• {{toc -- light yellow

There are other block snippets that aren't included (such as .wide) but I'm not sure they need to have special backgrounds?

Also, there is a choice of adding the highlight into the line number gutter of the editor, rather than behind the text (or, in addition to behind the text). I don't think we would want to do this, but it's an option.

[calculuschild]

I imagine we could do this with some clever CSS variables in the theme files so that each class can change the highlighting depending on the theme.

My instinct is we should wait on getting Themes (and CodeMirror themes) working first and make sure we have a clear consensus before putting effort into a PR.

[dbolack-ab]

Is this still an idea going forward?

[5e-Cleric]

Is this still an idea going forward?

see last comment on #1855