Add superscript and subscript

packages/fleather/lib/src/widgets/controller.dart

@@ -19,6 +19,7 @@ List<String> _toggleableStyleKeys = [
   ParchmentAttribute.inlineCode.key,
   ParchmentAttribute.backgroundColor.key,
   ParchmentAttribute.foregroundColor.key,
+  ParchmentAttribute.script.key,
 ];
 
 class FleatherController extends ChangeNotifier {

packages/fleather/lib/src/widgets/editor_toolbar.dart

@@ -843,6 +843,7 @@ class FleatherToolbar extends StatefulWidget implements PreferredSizeWidget {
     bool hideBackgroundColor = false,
     bool hideForegroundColor = false,
     bool hideInlineCode = false,
+    bool hideScript = false,
     bool hideHeadingStyle = false,
     bool hideIndentation = false,
     bool hideListNumbers = false,
@@ -970,6 +971,27 @@ class FleatherToolbar extends StatefulWidget implements PreferredSizeWidget {
 
       /// ################################################################
 
+      Visibility(
+          visible: !hideScript,
+          child: ToggleStyleButton(
+            attribute: ParchmentAttribute.superscript,
+            icon: Icons.superscript,
+            controller: controller,
+          )),
+      Visibility(
+          visible: !hideScript,
+          child: ToggleStyleButton(
+            attribute: ParchmentAttribute.subscript,
+            icon: Icons.subscript,
+            controller: controller,
+          )),
+      Visibility(
+          visible: !hideScript,
+          child: VerticalDivider(
+              indent: 16, endIndent: 16, color: Colors.grey.shade400)),
+
+      /// ################################################################
+
       Visibility(
           visible: !hideDirection,
           child: ToggleStyleButton(

packages/fleather/lib/src/widgets/text_line.dart

@@ -313,6 +313,12 @@ class _TextLineState extends State<TextLine> {
         result = result.copyWith(color: Color(foregroundColor.value!));
       }
     }
+    if (nodeStyle.containsSame(ParchmentAttribute.superscript)) {
+      result = _mergeTextStyleWithDecoration(result, theme.superscript);
+    } else if (nodeStyle.containsSame(ParchmentAttribute.subscript)) {
+      result = _mergeTextStyleWithDecoration(result, theme.subscript);
+    }
+
     return result;
   }
 

packages/fleather/lib/src/widgets/theme.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
 import 'package:parchment/parchment.dart';
 
@@ -74,6 +76,12 @@ class FleatherThemeData {
   /// Style of links in text.
   final TextStyle link;
 
+  /// Style of superscript text.
+  final TextStyle superscript;
+
+  /// Style of subscript text.
+  final TextStyle subscript;
+
   /// Default style theme for regular paragraphs of text.
   final TextBlockTheme paragraph; // spacing: top: 6, bottom: 10
 
@@ -121,6 +129,8 @@ class FleatherThemeData {
     required this.lists,
     required this.quote,
     required this.code,
+    required this.superscript,
+    required this.subscript,
   });
 
   factory FleatherThemeData.fallback(BuildContext context) {
@@ -262,6 +272,8 @@ class FleatherThemeData {
           borderRadius: BorderRadius.circular(2),
         ),
       ),
+      superscript: const TextStyle(fontFeatures: [FontFeature.superscripts()]),
+      subscript: const TextStyle(fontFeatures: [FontFeature.subscripts()]),
     );
   }
 
@@ -271,6 +283,8 @@ class FleatherThemeData {
     TextStyle? underline,
     TextStyle? strikethrough,
     TextStyle? link,
+    TextStyle? superscript,
+    TextStyle? subscript,
     InlineCodeThemeData? inlineCode,
     TextBlockTheme? paragraph,
     TextBlockTheme? heading1,
@@ -300,6 +314,8 @@ class FleatherThemeData {
       lists: lists ?? this.lists,
       quote: quote ?? this.quote,
       code: code ?? this.code,
+      superscript: superscript ?? this.superscript,
+      subscript: subscript ?? this.subscript,
     );
   }
 

packages/fleather/test/widgets/editor_input_client_mixin_deltas_test.dart

@@ -106,32 +106,35 @@ void main() {
       when(() => editorState.textEditingValue)
           .thenReturn(initialTextEditingValue);
       when(() => editorState.themeData).thenReturn(FleatherThemeData(
-          bold: const TextStyle(),
-          italic: const TextStyle(),
-          underline: const TextStyle(),
-          strikethrough: const TextStyle(),
-          inlineCode: InlineCodeThemeData(style: const TextStyle()),
-          link: const TextStyle(),
-          paragraph: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing()),
-          heading1: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing()),
-          heading2: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing()),
-          heading3: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing()),
-          heading4: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing()),
-          heading5: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing()),
-          heading6: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing()),
-          lists: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing()),
-          quote: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing()),
-          code: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing())));
+        bold: const TextStyle(),
+        italic: const TextStyle(),
+        underline: const TextStyle(),
+        strikethrough: const TextStyle(),
+        inlineCode: InlineCodeThemeData(style: const TextStyle()),
+        link: const TextStyle(),
+        paragraph: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        heading1: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        heading2: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        heading3: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        heading4: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        heading5: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        heading6: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        lists: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        quote: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        code: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        superscript: const TextStyle(),
+        subscript: const TextStyle(),
+      ));
       when(() => rawEditor.controller).thenReturn(controller);
       when(() => rawEditor.readOnly).thenReturn(false);
       when(() => rawEditor.keyboardAppearance).thenReturn(Brightness.light);

packages/parchment/lib/src/document/attributes.dart

@@ -99,6 +99,7 @@ class ParchmentAttribute<T> implements ParchmentAttributeBuilder<T> {
     ParchmentAttribute.direction.key: ParchmentAttribute.direction,
     ParchmentAttribute.alignment.key: ParchmentAttribute.alignment,
     ParchmentAttribute.indent.key: ParchmentAttribute.indent,
+    ParchmentAttribute.script.key: ParchmentAttribute.script,
   };
 
   // Inline attributes
@@ -128,6 +129,16 @@ class ParchmentAttribute<T> implements ParchmentAttributeBuilder<T> {
   // ignore: const_eval_throws_exception
   static const link = LinkAttributeBuilder._();
 
+  /// Script style attribute.
+  // ignore: const_eval_throws_exception
+  static const script = _ScriptAttributeBuilder._();
+
+  /// Alias for [ParchmentAttribute.script.superscript].
+  static ParchmentAttribute<String> get superscript => script.superscript;
+
+  /// Alias for [ParchmentAttribute.script.subscript].
+  static ParchmentAttribute<String> get subscript => script.subscript;
+
   // Line attributes
 
   /// Heading style attribute.
@@ -433,6 +444,20 @@ class _InlineCodeAttribute extends ParchmentAttribute<bool> {
       : super._('c', ParchmentAttributeScope.inline, true);
 }
 
+/// Builder for super/sub script style attributes.
+class _ScriptAttributeBuilder extends ParchmentAttributeBuilder<String> {
+  const _ScriptAttributeBuilder._()
+      : super._('script', ParchmentAttributeScope.inline);
+
+  /// Creates a subscript attribute.
+  ParchmentAttribute<String> get superscript =>
+      ParchmentAttribute<String>._(key, scope, 'super');
+
+  /// Creates a superscript attribute.
+  ParchmentAttribute<String> get subscript =>
+      ParchmentAttribute<String>._(key, scope, 'sub');
+}
+
 /// Builder for color-based style attributes.
 ///
 /// Useful in scenarios when a color attribute value is not known upfront.