[SuperEditor] Make it easy to style non-text elements in document components

[Jethro87]

If document components are being overhauled (as per #1002), this may be part of that issue.

We display documents in several parts of our app with vastly different styling applied. For example, we have "normal" and "mini" stylesheets that we pass to Super Editor and Super Reader. Where the "normal" stylesheet might apply a textStyle with a fontSize: 16, the "mini" stylesheet might apply fontSize: 6.

This works fine for text. But there are two situations we've come across where the component looks bad with the "mini" stylesheet applied, and they're both caused by hardcoded sizing of the component's non-text elements.

For example, the UnorderedListItemComponent contains a dotBuilder that has these values:

Widget _defaultUnorderedListItemDotBuilder(BuildContext context, UnorderedListItemComponent component) {
  return Align(
    alignment: Alignment.centerRight,
    child: Container(
      width: 4,
      height: 4,
      margin: const EdgeInsets.only(right: 10),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: component.styleBuilder({}).color,
      ),
    ),
  );
}

With our "mini" stylesheet, the Container and margin are much too big.

Another example is a custom BlockquoteWithStyleComponent we've created that adds a vertical line to the left of the text. Here's what that looks like:

return IgnorePointer(
      child: Container(
        margin: const EdgeInsets.symmetric(vertical: 16),
        padding: const EdgeInsets.symmetric(horizontal: 16),
        decoration: BoxDecoration(
          // borderRadius: borderRadius,
          color: backgroundColor,
          border: Border(
            left: BorderSide(
              color: Theme.of(context).dividerColor,
              width: 4.0,
            ),
          ),
        ),
        child: TextComponent(
          key: textKey,
          text: text,
          textStyleBuilder: styleBuilder,
          textSelection: textSelection,
          selectionColor: selectionColor,
          highlightWhenEmpty: highlightWhenEmpty,
          showDebugPaint: showDebugPaint,
        ),
      ),
    );

With our "mini" stylesheet, thepadding and BorderSide are much too big.

I could create "mini" versions of these components with hardcoded non-text elements, but I'm wondering if there's a better way, now, or as part of #1002. Thanks.