add superscript and subscript styles (#1194)

lib/src/models/documents/attribute.dart

@@ -19,6 +19,8 @@ class Attribute<T> {
 
   static final Map<String, Attribute> _registry = LinkedHashMap.of({
     Attribute.bold.key: Attribute.bold,
+    Attribute.subscript.key: Attribute.subscript,
+    Attribute.superscript.key: Attribute.superscript,
     Attribute.italic.key: Attribute.italic,
     Attribute.small.key: Attribute.small,
     Attribute.underline.key: Attribute.underline,
@@ -48,6 +50,10 @@ class Attribute<T> {
 
   static const BoldAttribute bold = BoldAttribute();
 
+  static final ScriptAttribute subscript = ScriptAttribute(ScriptAttributes.sub);
+
+  static final ScriptAttribute superscript = ScriptAttribute(ScriptAttributes.sup);
+
   static const ItalicAttribute italic = ItalicAttribute();
 
   static const SmallAttribute small = SmallAttribute();
@@ -108,6 +114,8 @@ class Attribute<T> {
 
   static final Set<String> inlineKeys = {
     Attribute.bold.key,
+    Attribute.subscript.key,
+    Attribute.superscript.key,
     Attribute.italic.key,
     Attribute.small.key,
     Attribute.underline.key,
@@ -356,10 +364,9 @@ class TokenAttribute extends Attribute<String> {
   const TokenAttribute(String val) : super('token', AttributeScope.IGNORE, val);
 }
 
-// `script` is supposed to be inline attribute but it is not supported yet
 class ScriptAttribute extends Attribute<String?> {
   ScriptAttribute(ScriptAttributes? val)
-      : super('script', AttributeScope.IGNORE, val?.value);
+      : super('script', AttributeScope.INLINE, val?.value);
 }
 
 enum ScriptAttributes {

lib/src/widgets/default_styles.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'dart:ui';
 
 import '../models/documents/attribute.dart';
 import '../models/documents/style.dart';
@@ -141,6 +142,8 @@ class DefaultStyles {
     this.h3,
     this.paragraph,
     this.bold,
+    this.subscript,
+    this.superscript,
     this.italic,
     this.small,
     this.underline,
@@ -165,6 +168,8 @@ class DefaultStyles {
   final DefaultTextBlockStyle? h3;
   final DefaultTextBlockStyle? paragraph;
   final TextStyle? bold;
+  final TextStyle? subscript;
+  final TextStyle? superscript;
   final TextStyle? italic;
   final TextStyle? small;
   final TextStyle? underline;
@@ -244,6 +249,8 @@ class DefaultStyles {
         paragraph: DefaultTextBlockStyle(baseStyle, const VerticalSpacing(0, 0),
             const VerticalSpacing(0, 0), null),
         bold: const TextStyle(fontWeight: FontWeight.bold),
+        subscript: TextStyle(fontFeatures: [FontFeature.subscripts()]),
+        superscript: TextStyle(fontFeatures: [FontFeature.superscripts()]),
         italic: const TextStyle(fontStyle: FontStyle.italic),
         small: const TextStyle(fontSize: 12),
         underline: const TextStyle(decoration: TextDecoration.underline),
@@ -317,6 +324,8 @@ class DefaultStyles {
         h3: other.h3 ?? h3,
         paragraph: other.paragraph ?? paragraph,
         bold: other.bold ?? bold,
+        subscript: other.subscript ?? subscript,
+        superscript: other.superscript ?? superscript,
         italic: other.italic ?? italic,
         small: other.small ?? small,
         underline: other.underline ?? underline,

lib/src/widgets/text_line.dart

@@ -352,6 +352,14 @@ class _TextLineState extends State<TextLine> {
       }
     });
 
+    if (nodeStyle.containsKey(Attribute.script.key)) {
+      if (nodeStyle.attributes.values.contains(Attribute.subscript)) {
+        res = _merge(res, defaultStyles.subscript!);
+      }else if (nodeStyle.attributes.values.contains(Attribute.superscript)) {
+        res = _merge(res, defaultStyles.superscript!);
+      }
+    }
+
     if (nodeStyle.containsKey(Attribute.inlineCode.key)) {
       res = _merge(res, defaultStyles.inlineCode!.styleFor(lineStyle));
     }

lib/src/widgets/toolbar.dart

@@ -103,6 +103,8 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
     bool showRedo = true,
     bool showDirection = false,
     bool showSearchButton = true,
+    bool showSubscript = true,
+    bool showSuperscript = true,
     List<QuillCustomButton> customButtons = const [],
 
     ///Map of font sizes in string
@@ -208,6 +210,8 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
           ToolbarButtons.fontFamily: 'Font family'.i18n,
           ToolbarButtons.fontSize: 'Font size'.i18n,
           ToolbarButtons.bold: 'Bold'.i18n,
+          ToolbarButtons.subscript: 'Subscript'.i18n,
+          ToolbarButtons.superscript: 'Superscript'.i18n,
           ToolbarButtons.italic: 'Italic'.i18n,
           ToolbarButtons.small: 'Small'.i18n,
           ToolbarButtons.underline: 'Underline'.i18n,
@@ -296,6 +300,29 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             iconTheme: iconTheme,
             afterButtonPressed: afterButtonPressed,
           ),
+
+        if (showSubscript)
+          ToggleStyleButton(
+            attribute: Attribute.subscript,
+            icon: Icons.subscript,
+            iconSize: toolbarIconSize,
+            tooltip: buttonTooltips[ToolbarButtons.subscript],
+            controller: controller,
+            iconTheme: iconTheme,
+            afterButtonPressed: afterButtonPressed,
+          ),
+
+        if (showSuperscript)
+          ToggleStyleButton(
+            attribute: Attribute.superscript,
+            icon: Icons.superscript,
+            iconSize: toolbarIconSize,
+            tooltip: buttonTooltips[ToolbarButtons.superscript],
+            controller: controller,
+            iconTheme: iconTheme,
+            afterButtonPressed: afterButtonPressed,
+          ),
+
         if (showItalicButton)
           ToggleStyleButton(
             attribute: Attribute.italic,

lib/src/widgets/toolbar/enum.dart

@@ -4,6 +4,8 @@ enum ToolbarButtons {
   fontFamily,
   fontSize,
   bold,
+  subscript,
+  superscript,
   italic,
   small,
   underline,

lib/src/widgets/toolbar/toggle_style_button.dart

@@ -105,7 +105,7 @@ class _ToggleStyleButtonState extends State<ToggleStyleButton> {
   }
 
   bool _getIsToggled(Map<String, Attribute> attrs) {
-    if (widget.attribute.key == Attribute.list.key) {
+    if (widget.attribute.key == Attribute.list.key || widget.attribute.key == Attribute.script.key) {
       final attribute = attrs[widget.attribute.key];
       if (attribute == null) {
         return false;