Void elements like `img` hidden in Rivet Prose container

[jameswilson]

Describe the bug

There are styles defined in _prose.scss that conflict with eachother:

1. <img> elements are intended to be valid children of a rvt-prose container:

https://github.com/indiana-university/rivet-source/blob/c3825f1b9327b293370fbfffb61584bfef35b612/src/sass/utilities/_prose.scss#L48-L54

2. However, all empty elements (including void elements like <img> and <br> but not <hr>) are currently hidden:

https://github.com/indiana-university/rivet-source/blob/c3825f1b9327b293370fbfffb61584bfef35b612/src/sass/utilities/_prose.scss#L68-L70

Expected behavior

All void elements commonly used in prose, like <img> or <br> should not be hidden.

Relevant context (required)

Codepen demonstrating the behavior: https://codepen.io/jameswilson/full/QWRvoyj

PR here: https://github.com/indiana-university/rivet-source/issues/754

[jameswilson]

Potential approach for a fix:

.rvt-prose {
  >:empty:not(hr):not(br):not(img) {
    display: none
  }
}

[jameswilson]

I modified the PR to include more "phrasing" and "flow" elements that are also "void" elements.

.rvt-prose {
  > *:empty:not(area):not(br):not(embed):not(hr):not(img):not(input):not(wbr) {
    display: none;
  }
}

[jameswilson]

There is a shorter way to write it:

.rvt-prose {
  > *:empty:not(br,embed,hr,img,input,wbr) {
    display: none;
  }
}

We can also remove area because it needs a <map> ancestor tag, and for that reason will never match this CSS rule.

This has been updated in the PR https://github.com/indiana-university/rivet-source/issues/754