SpenEmbed configuration

Author: amantoux

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

@@ -25,6 +25,7 @@ class EditableTextBlock extends StatelessWidget {
   final bool enableInteractiveSelection;
   final bool hasFocus;
   final FleatherEmbedBuilder embedBuilder;
+  final Map<String, FleatherSpanEmbedConfiguration> spanEmbedConfigurations;
   final LinkActionPicker linkActionPicker;
   final ValueChanged<String?>? onLaunchUrl;
   final EdgeInsets? contentPadding;
@@ -42,6 +43,7 @@ class EditableTextBlock extends StatelessWidget {
     required this.enableInteractiveSelection,
     required this.hasFocus,
     required this.embedBuilder,
+    required this.spanEmbedConfigurations,
     required this.linkActionPicker,
     this.onLaunchUrl,
     this.contentPadding,
@@ -84,6 +86,7 @@ class EditableTextBlock extends StatelessWidget {
             readOnly: readOnly,
             controller: controller,
             embedBuilder: embedBuilder,
+            spanEmbedConfigurations: spanEmbedConfigurations,
             linkActionPicker: linkActionPicker,
             onLaunchUrl: onLaunchUrl,
             textWidthBasis: textWidthBasis,

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

@@ -79,6 +79,36 @@ Widget defaultSpellCheckMenuBuilder(
 typedef FleatherEmbedBuilder = Widget Function(
     BuildContext context, EmbedNode node);
 
+/// Special configuration for [SpanEmbed]s
+class FleatherSpanEmbedConfiguration {
+  const FleatherSpanEmbedConfiguration(this.embedBuilder,
+      {this.placeholderAlignment = PlaceholderAlignment.bottom,
+      this.textBaseline,
+      this.textStyle});
+
+  final FleatherEmbedBuilder embedBuilder;
+
+  /// How the placeholder aligns vertically with the text.
+  ///
+  /// See [ui.PlaceholderAlignment] for details on each mode.
+  final PlaceholderAlignment placeholderAlignment;
+
+  /// The [TextBaseline] to align against when using [ui.PlaceholderAlignment.baseline],
+  /// [ui.PlaceholderAlignment.aboveBaseline], and [ui.PlaceholderAlignment.belowBaseline].
+  ///
+  /// This is ignored when using other alignment modes.
+  final TextBaseline? textBaseline;
+
+  /// The [TextStyle] to apply to this span.
+  ///
+  /// The [style] is also applied to any child spans when this is an instance
+  /// of [TextSpan].
+  ///
+  /// A [TextStyle] may be provided with the [style] property, but only the
+  /// decoration, foreground, background, and spacing options will be used.
+  final TextStyle? textStyle;
+}
+
 /// Default implementation of a builder function for embeddable objects in
 /// Fleather.
 ///
@@ -255,6 +285,13 @@ class FleatherEditor extends StatefulWidget {
   /// Defaults to [defaultFleatherEmbedBuilder].
   final FleatherEmbedBuilder embedBuilder;
 
+  /// Available configuration for [SpanEmbed]s.
+  /// If no configuration of found for a [SpanEmbed], builder will fallback to
+  /// [embedBuilder].
+  ///
+  /// Defaults to `{}`
+  final Map<String, FleatherSpanEmbedConfiguration> spanEmbedConfigurations;
+
   /// Configuration that details how spell check should be performed.
   ///
   /// Specifies the [SpellCheckService] used to spell check text input and the
@@ -331,6 +368,7 @@ class FleatherEditor extends StatefulWidget {
       this.clipboardStatus,
       this.contextMenuBuilder = defaultContextMenuBuilder,
       this.embedBuilder = defaultFleatherEmbedBuilder,
+      this.spanEmbedConfigurations = const {},
       this.linkActionPickerDelegate = defaultLinkActionPickerDelegate,
       this.textSelectionControls});
 
@@ -505,6 +543,7 @@ class _FleatherEditorState extends State<FleatherEditor>
       scrollPhysics: widget.scrollPhysics,
       onLaunchUrl: widget.onLaunchUrl,
       embedBuilder: widget.embedBuilder,
+      spanEmbedConfigurations: widget.spanEmbedConfigurations,
       spellCheckConfiguration: widget.spellCheckConfiguration,
       linkActionPickerDelegate: widget.linkActionPickerDelegate,
       clipboardManager: widget.clipboardManager,
@@ -618,6 +657,7 @@ class RawEditor extends StatefulWidget {
     this.contextMenuBuilder = defaultContextMenuBuilder,
     this.spellCheckConfiguration,
     this.embedBuilder = defaultFleatherEmbedBuilder,
+    this.spanEmbedConfigurations = const {},
     this.linkActionPickerDelegate = defaultLinkActionPickerDelegate,
   })  : assert(maxHeight == null || maxHeight > 0),
         assert(minHeight == null || minHeight >= 0),
@@ -800,6 +840,8 @@ class RawEditor extends StatefulWidget {
   /// Defaults to [defaultFleatherEmbedBuilder].
   final FleatherEmbedBuilder embedBuilder;
 
+  final Map<String, FleatherSpanEmbedConfiguration> spanEmbedConfigurations;
+
   final LinkActionPickerDelegate linkActionPickerDelegate;
 
   final ClipboardManager clipboardManager;
@@ -1843,6 +1885,7 @@ class RawEditorState extends EditorState
               readOnly: widget.readOnly,
               controller: widget.controller,
               embedBuilder: widget.embedBuilder,
+              spanEmbedConfigurations: widget.spanEmbedConfigurations,
               linkActionPicker: _linkActionPicker,
               onLaunchUrl: widget.onLaunchUrl,
               textWidthBasis: widget.textWidthBasis,
@@ -1870,6 +1913,7 @@ class RawEditorState extends EditorState
                 ? const EdgeInsets.all(16.0)
                 : null,
             embedBuilder: widget.embedBuilder,
+            spanEmbedConfigurations: widget.spanEmbedConfigurations,
             linkActionPicker: _linkActionPicker,
             onLaunchUrl: widget.onLaunchUrl,
           ),

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

@@ -172,6 +172,13 @@ class FleatherField extends StatefulWidget {
   /// Defaults to [defaultFleatherEmbedBuilder].
   final FleatherEmbedBuilder embedBuilder;
 
+  /// Available configuration for [SpanEmbed]s.
+  /// If no configuration of found for a [SpanEmbed], builder will fallback to
+  /// [embedBuilder].
+  ///
+  /// Defaults to `{}`
+  final Map<String, FleatherSpanEmbedConfiguration> spanEmbedConfigurations;
+
   /// Builds the text selection toolbar when requested by the user.
   ///
   /// Defaults to [defaultContextMenuBuilder].
@@ -212,6 +219,7 @@ class FleatherField extends StatefulWidget {
     this.contextMenuBuilder = defaultContextMenuBuilder,
     this.spellCheckConfiguration,
     this.embedBuilder = defaultFleatherEmbedBuilder,
+    this.spanEmbedConfigurations = const {},
     this.clipboardManager = const PlainTextClipboardManager(),
   });
 
@@ -281,6 +289,7 @@ class _FleatherFieldState extends State<FleatherField> {
       scrollPhysics: widget.scrollPhysics,
       onLaunchUrl: widget.onLaunchUrl,
       embedBuilder: widget.embedBuilder,
+      spanEmbedConfigurations: widget.spanEmbedConfigurations,
       spellCheckConfiguration: widget.spellCheckConfiguration,
       contextMenuBuilder: widget.contextMenuBuilder,
       clipboardManager: widget.clipboardManager,

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

@@ -24,6 +24,7 @@ class TextLine extends StatefulWidget {
   final bool readOnly;
   final FleatherController controller;
   final FleatherEmbedBuilder embedBuilder;
+  final Map<String, FleatherSpanEmbedConfiguration> spanEmbedConfigurations;
   final ValueChanged<String?>? onLaunchUrl;
   final LinkActionPicker linkActionPicker;
   final TextWidthBasis textWidthBasis;
@@ -34,6 +35,7 @@ class TextLine extends StatefulWidget {
     required this.readOnly,
     required this.controller,
     required this.embedBuilder,
+    required this.spanEmbedConfigurations,
     required this.onLaunchUrl,
     required this.linkActionPicker,
     required this.textWidthBasis,
@@ -174,6 +176,16 @@ class _TextLineState extends State<TextLine> {
 
   InlineSpan _segmentToTextSpan(Node segment, FleatherThemeData theme) {
     if (segment is EmbedNode) {
+      final spanConfiguration =
+          widget.spanEmbedConfigurations[segment.value.type];
+      if (spanConfiguration != null) {
+        return WidgetSpan(
+            child: EmbedProxy(
+                child: spanConfiguration.embedBuilder(context, segment)),
+            alignment: spanConfiguration.placeholderAlignment,
+            baseline: spanConfiguration.textBaseline,
+            style: spanConfiguration.textStyle);
+      }
       return WidgetSpan(
           child: EmbedProxy(child: widget.embedBuilder(context, segment)));
     }