Snippet Widgets Interface

Terminology:

Term	Definition
gutter	a CodeMirror concept – examples would be the line numbers gutter or code folding gutter
line widget	a CodeMirror concept that is a widget either above or below a line of code in the CodeMirror instance
snippet	HB’s integrated snippets, such as images, class tables, monsters, etc…
widget	a small utility that performs a function

Description

While discussing things with the DOMT team, one of the biggest topics that came up was snippet options. The overall concept stemmed from there being a solid number of users who are very unfamiliar with HTML/CSS, and having a UI to edit snippets would be really beneficial to them.

The DOMT team was initially thinking something akin to GMB’s snippet modal, but this would allow for after-insertion editing as well as initial editing (the editor could be set up to open itself when a snippet is inserted).

Thoughts

Some ideas for what this could look like:

• A gutter or line widget that when clicked will create a line widget that will allow for UI-based editing of the snippet
• Examples snippet options that could be made editable
  • LInk URLs/text
  • Inserting/removing frame/decoration/wide/other classes for known div types (monster, classTable, artist, note, etc…)
  • Values for vertical and horizontal spacing
  • Image height, width, position, URL, and alt text
  • Watercolor image selector and color picker
• In chatting with @calculuschild, we realized it could be implemented in such a way that different document themes (tba) have different widgets available to them, and users could create their own widgets. A configurable approach would be ideal here, despite that being a bit more complicated from a programming perspective.

Working proof of concept: https://github.com/jeddai/homebrewery/pull/1 Videos: monster/table frame, artist credit position

Important Notes

CodeMirror handles line widgets normally by passing in dom elements. We do not want to do this, as the redraw process behind the scenes results in a new instance of the DOM elements and focus will be lost. This can be handled by the ReactDOM render method by rendering initially to a parent element and subsequently back into the widget’s DOM node. This will allow for consistent editing of text/number inputs, sliders, or any other input types we want to include.

Any react components or fragments can be rendered into the element with the method described above, which should allow for external-to-HB components such as color pickers and more detailed components like image pickers.

[G-Ambatte]

Random thought: if we scan the text for {{monster to replace with the output of a monster Snippet function, then this is essentially the same functionality as the proposed Brew Variable system. So Advanced Snippets could leverage the find/replace functionality of Brew Vars.

[ericscheid]

Mentioned in variables discussion: https://github.com/naturalcrit/homebrewery/discussions/1400#discussioncomment-3090819 … TL;DR: declaring locally scoped variables could simplify the scanning/parsing involved.

So, instead of scanning for “Armor Class” in a monster block (and failing because someone translated that to french), scan for a variable name (e.g. scan for[_.AC]:=) and updating the variable value (i.e. the text that comes after :=). Then the insertion of the new AC value gets handled by the variables functionality.