[SuperEditor] Weird list item indentation when list items have different font sizes

[angelosilvestre]

Package Version
super_editor, GitHub, main branch
Which package and version are you using? E.g., "super_editor, GitHub, stable branch"

To Reproduce

1. Run the example_docs app with a document containing list items with different font sizes
2. See the output

Minimal Reproduction Code

Apply these changes

diff --git a/super_editor/example_docs/lib/app.dart b/super_editor/example_docs/lib/app.dart
index 747e7bfb..def5118b 100644
--- a/super_editor/example_docs/lib/app.dart
+++ b/super_editor/example_docs/lib/app.dart
@@ -205,27 +205,42 @@ class _AppHeaderPane extends StatelessWidget {
 MutableDocument _createInitialDocument() {
   return MutableDocument(
     nodes: [
-      ParagraphNode(
-        id: Editor.createNodeId(),
-        text: AttributedText("Welcome to a Super Editor version of Docs!"),
-        metadata: {
-          "blockType": header1Attribution,
-        },
-      ),
-      ParagraphNode(
-        id: Editor.createNodeId(),
-        text: AttributedText("By: The Super Editor Team"),
-      ),
-      ParagraphNode(
-        id: Editor.createNodeId(),
-        text: AttributedText(
-            "This is an example document editor experience, which is meant to mimic the UX of Google Docs. We created this example app to ensure that common desktop word processing UX can be built with Super Editor."),
-      ),
-      ParagraphNode(
-        id: Editor.createNodeId(),
-        text: AttributedText(
-            "A typical desktop word processor is comprised of a pane at the top of the window, which includes some combination of information about the current document, as well as toolbars that present editing options. The remainder of the window is filled by an editable document."),
-      ),
+      _createListItemNode(text: 'Font size of 8', fontSize: 8),
+      _createListItemNode(text: 'Font size of 12', fontSize: 12),
+      _createListItemNode(text: 'Font size of 14', fontSize: 14),
+      _createListItemNode(text: 'Font size of 16', fontSize: 16),
+      _createListItemNode(text: 'Font size of 18', fontSize: 18),
+      _createListItemNode(text: 'Font size of 20', fontSize: 20),
+      _createListItemNode(text: 'Font size of 24', fontSize: 24),
+      _createListItemNode(text: 'Font size of 30', fontSize: 30),
+      _createListItemNode(text: 'Font size of 36', fontSize: 36),
+      _createListItemNode(text: 'Font size of 40', fontSize: 40),
     ],
   );
 }
+
+ListItemNode _createListItemNode({
+  required String text,
+  required double fontSize,
+  ListItemType listItemType = ListItemType.ordered,
+}) {
+  return ListItemNode(
+    id: Editor.createNodeId(),
+    itemType: listItemType,
+    text: AttributedText(
+      text,
+      AttributedSpans(attributions: [
+        SpanMarker(
+          attribution: FontSizeAttribution(fontSize),
+          offset: 0,
+          markerType: SpanMarkerType.start,
+        ),
+        SpanMarker(
+          attribution: FontSizeAttribution(fontSize),
+          offset: text.length - 1,
+          markerType: SpanMarkerType.end,
+        ),
+      ]),
+    ),
+  );
+}

Actual behavior
Indentation looks weird:

Expected behavior
It should right-align the numerals, like in Apple Notes:

Platform
Any platform

Flutter version

• Flutter (Channel master, 3.22.0-12.0.pre.10, on macOS 14.4.1  23E224 darwin-arm64, locale en-BR)
• Flutter version 3.22.0-12.0.pre.10 
• Framework revision 38dcca9081 (5 days ago), 2024-04-15:26:15 +0000
• Engine revision 07ae93c9b7
• Dart version 3.5.0 (build 3.5.0-56.0.dev)
• DevTools version 2.35.0-dev.8

Additional Context

To accomplish that, we could have each list item take its font, font size, font style, and then immediately measure every numeral in the font: 0-9. That list item takes the widest value and multiplies it by the number of numerals used by that list item. Then all list items respect the widest value. We can cache the measurement so that the same font, at the same size, with the same style never needs to re-measure.