Update flutter_quill_extensions

CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file.
 
 ## 8.5.4
 - The `mobileWidth`, `mobileHeight`, `mobileMargin` and `mobileAlignment` is now deprecated in `flutter_quill`, they are are now defined in `flutter_quill_extensions`
+- Deprecate `replaceStyleStringWithSize` function which is in `string.dart`
+- Deprecate `alignment`, and `margin` as they don't confirm to offical Quill JS
 
 ## 8.5.3
 - Update doc

flutter_quill_extensions/CHANGELOG.md

@@ -1,3 +1,11 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## 0.6.10
+- Update deprecated members from `flutter_quill`
+- Update doc and `README.md`
+
 ## 0.6.9
 - Remove duplicated class
 - Drop the support for `QuillEditorFormulaEmbedBuilder` for now as it's not usable, we are working on providing a fixes

flutter_quill_extensions/lib/logic/extensions/attribute.dart

@@ -11,4 +11,20 @@ class MobileHeightAttribute extends Attribute<String?> {
       : super('mobileHeight', AttributeScope.ignore, val);
 }
 
-extension AttributeExt on Attribute {}
+class MobileMarginAttribute extends Attribute<String?> {
+  const MobileMarginAttribute(String? val)
+      : super('mobileMargin', AttributeScope.ignore, val);
+}
+
+class MobileAlignmentAttribute extends Attribute<String?> {
+  const MobileAlignmentAttribute(String? val)
+      : super('mobileAlignment', AttributeScope.ignore, val);
+}
+
+extension AttributeExt on Attribute {
+  static const MobileWidthAttribute mobileWidth = MobileWidthAttribute(null);
+  static const MobileHeightAttribute mobileHeight = MobileHeightAttribute(null);
+  static const MobileMarginAttribute mobileMargin = MobileMarginAttribute(null);
+  static const MobileAlignmentAttribute mobileAlignment =
+      MobileAlignmentAttribute(null);
+}

flutter_quill_extensions/lib/logic/utils/string.dart

@@ -0,0 +1,38 @@
+import 'package:flutter_quill/flutter_quill.dart' show Attribute;
+
+import '../extensions/attribute.dart';
+
+String replaceStyleStringWithSize(
+  String cssStyle, {
+  required double width,
+  required double height,
+  required bool isMobile,
+}) {
+  final result = <String, String>{};
+  final pairs = cssStyle.split(';');
+  for (final pair in pairs) {
+    final index = pair.indexOf(':');
+    if (index < 0) {
+      continue;
+    }
+    final key = pair.substring(0, index).trim();
+    result[key] = pair.substring(index + 1).trim();
+  }
+
+  if (isMobile) {
+    result[AttributeExt.mobileWidth.key] = width.toString();
+    result[AttributeExt.mobileHeight.key] = height.toString();
+  } else {
+    result[Attribute.width.key] = width.toString();
+    result[Attribute.height.key] = height.toString();
+  }
+  final sb = StringBuffer();
+  for (final pair in result.entries) {
+    sb
+      ..write(pair.key)
+      ..write(': ')
+      ..write(pair.value)
+      ..write('; ');
+  }
+  return sb.toString();
+}

flutter_quill_extensions/lib/presentation/embeds/editor/image/image.dart

@@ -1,5 +1,3 @@
-// ignore_for_file: deprecated_member_use
-
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_quill/extensions.dart' as base;
@@ -7,6 +5,7 @@ import 'package:flutter_quill/flutter_quill.dart' hide OptionalSize;
 
 import '../../../../logic/models/config/shared_configurations.dart';
 import '../../../models/config/editor/image/image.dart';
+import '../../../utils/utils.dart';
 import '../../widgets/image.dart';
 import 'image_menu.dart';
 
@@ -34,7 +33,7 @@ class QuillEditorImageEmbedBuilder extends EmbedBuilder {
     assert(!kIsWeb, 'Please provide image EmbedBuilder for Web');
 
     final imageSource = standardizeImageUrl(node.value.data);
-    final ((imageSize), margin, alignment) = _getImageAttributes(node);
+    final ((imageSize), margin, alignment) = getElementAttributes(node);
 
     final width = imageSize.width;
     final height = imageSize.height;
@@ -147,112 +146,3 @@ class QuillEditorImageEmbedBuilder extends EmbedBuilder {
     );
   }
 }
-
-(
-  OptionalSize imageSize,
-  double? margin,
-  Alignment alignment,
-) _getImageAttributes(
-  Node node,
-) {
-  var imageSize = const OptionalSize(null, null);
-  var imageAlignment = Alignment.center;
-  double? imageMargin;
-
-  // Usually double value
-  final heightValue = double.tryParse(
-      node.style.attributes[Attribute.height.key]?.value.toString() ?? '');
-  final widthValue = double.tryParse(
-      node.style.attributes[Attribute.width.key]?.value.toString() ?? '');
-
-  if (heightValue != null) {
-    imageSize = imageSize.copyWith(
-      height: heightValue,
-    );
-  }
-  if (widthValue != null) {
-    imageSize = imageSize.copyWith(
-      width: widthValue,
-    );
-  }
-
-  final cssStyle = node.style.attributes['style'];
-
-  if (cssStyle != null) {
-    final attrs = base.isMobile(supportWeb: false)
-        ? base.parseKeyValuePairs(cssStyle.value.toString(), {
-            Attribute.mobileWidth,
-            Attribute.mobileHeight,
-            Attribute.mobileMargin,
-            Attribute.mobileAlignment,
-          })
-        : base.parseKeyValuePairs(cssStyle.value.toString(), {
-            Attribute.width.key,
-            Attribute.height.key,
-            Attribute.margin,
-            Attribute.alignment,
-          });
-    if (attrs.isEmpty) {
-      return (imageSize, imageMargin, imageAlignment);
-    }
-
-    // It css value as string but we will try to support it anyway
-
-    // TODO: This could be improved much better
-    final cssHeightValue = double.tryParse(((base.isMobile(supportWeb: false)
-                ? attrs[Attribute.mobileHeight]
-                : attrs[Attribute.height.key]) ??
-            '')
-        .replaceFirst('px', ''));
-    final cssWidthValue = double.tryParse(((!base.isMobile(supportWeb: false)
-                ? attrs[Attribute.width.key]
-                : attrs[Attribute.mobileWidth]) ??
-            '')
-        .replaceFirst('px', ''));
-
-    if (cssHeightValue != null) {
-      imageSize = imageSize.copyWith(height: cssHeightValue);
-    }
-    if (cssWidthValue != null) {
-      imageSize = imageSize.copyWith(width: cssWidthValue);
-    }
-
-    imageAlignment = base.getAlignment(base.isMobile(supportWeb: false)
-        ? attrs[Attribute.mobileAlignment]
-        : attrs[Attribute.alignment]);
-    final margin = (base.isMobile(supportWeb: false)
-        ? double.tryParse(Attribute.mobileMargin)
-        : double.tryParse(Attribute.margin));
-    if (margin != null) {
-      imageMargin = margin;
-    }
-  }
-
-  return (imageSize, imageMargin, imageAlignment);
-}
-
-@immutable
-class OptionalSize {
-  const OptionalSize(
-    this.width,
-    this.height,
-  );
-
-  /// If non-null, requires the child to have exactly this width.
-  /// If null, the child is free to choose its own width.
-  final double? width;
-
-  /// If non-null, requires the child to have exactly this height.
-  /// If null, the child is free to choose its own height.
-  final double? height;
-
-  OptionalSize copyWith({
-    double? width,
-    double? height,
-  }) {
-    return OptionalSize(
-      width ?? this.width,
-      height ?? this.height,
-    );
-  }
-}

flutter_quill_extensions/lib/presentation/embeds/editor/image/image_menu.dart

@@ -1,13 +1,13 @@
 import 'package:flutter/cupertino.dart' show showCupertinoModalPopup;
 import 'package:flutter/material.dart';
-import 'package:flutter_quill/extensions.dart'
-    show isDesktop, isMobile, replaceStyleStringWithSize;
+import 'package:flutter_quill/extensions.dart' show isDesktop, isMobile;
 import 'package:flutter_quill/flutter_quill.dart'
     show ImageUrl, QuillController, StyleAttribute, getEmbedNode;
 import 'package:flutter_quill/translations.dart';
 
 import '../../../../logic/models/config/shared_configurations.dart';
 import '../../../../logic/services/image_saver/s_image_saver.dart';
+import '../../../../logic/utils/string.dart';
 import '../../../models/config/editor/image/image.dart';
 import '../../../utils/utils.dart';
 import '../../widgets/image.dart' show ImageTapWrapper, getImageStyleString;

flutter_quill_extensions/lib/presentation/embeds/editor/video/video.dart

@@ -32,13 +32,26 @@ class QuillEditorVideoEmbedBuilder extends EmbedBuilder {
     final videoUrl = node.value.data;
     if (isYouTubeUrl(videoUrl)) {
       return YoutubeVideoApp(
-          videoUrl: videoUrl, context: context, readOnly: readOnly);
+        videoUrl: videoUrl,
+        context: context,
+        readOnly: readOnly,
+      );
     }
-    return VideoApp(
-      videoUrl: videoUrl,
-      context: context,
-      readOnly: readOnly,
-      onVideoInit: configurations.onVideoInit,
+    final ((imageSize), margin, alignment) = getElementAttributes(node);
+
+    final width = imageSize.width;
+    final height = imageSize.height;
+    return Container(
+      width: width,
+      height: height,
+      margin: EdgeInsets.all(margin ?? 0.0),
+      alignment: alignment,
+      child: VideoApp(
+        videoUrl: videoUrl,
+        context: context,
+        readOnly: readOnly,
+        onVideoInit: configurations.onVideoInit,
+      ),
     );
   }
 }

flutter_quill_extensions/lib/presentation/embeds/widgets/image.dart

@@ -50,7 +50,7 @@ ImageProvider getImageProviderByImageSource(
   }
 
   if (imageSource.startsWith(assetsPrefix)) {
-    // TODO: This impl needs to be improved
+    // TODO: This impl could be improved
     return AssetImage(imageSource);
   }
   return FileImage(File(imageSource));

flutter_quill_extensions/lib/presentation/embeds/widgets/video_app.dart

@@ -6,6 +6,8 @@ import 'package:flutter_quill/flutter_quill.dart';
 import 'package:url_launcher/url_launcher.dart';
 import 'package:video_player/video_player.dart';
 
+import '../../../flutter_quill_extensions.dart';
+
 /// Widget for playing back video
 /// Refer to https://github.com/flutter/plugins/tree/master/packages/video_player/video_player
 class VideoApp extends StatefulWidget {
@@ -34,7 +36,7 @@ class VideoAppState extends State<VideoApp> {
   void initState() {
     super.initState();
 
-    _controller = widget.videoUrl.startsWith('http')
+    _controller = isHttpBasedUrl(widget.videoUrl)
         ? VideoPlayerController.networkUrl(Uri.parse(widget.videoUrl))
         : VideoPlayerController.file(File(widget.videoUrl))
       ..initialize().then((_) {
@@ -82,7 +84,6 @@ class VideoAppState extends State<VideoApp> {
 
     return Container(
       key: videoContainerKey,
-      // height: 300,
       child: InkWell(
         onTap: () {
           setState(() {

flutter_quill_extensions/lib/presentation/utils/utils.dart

@@ -1,6 +1,10 @@
 import 'dart:io' show File;
 
 import 'package:flutter/foundation.dart' show immutable;
+import 'package:flutter/widgets.dart' show Alignment;
+import 'package:flutter_quill/extensions.dart' as base;
+import 'package:flutter_quill/flutter_quill.dart' show Attribute, Node;
+import '../../logic/extensions/attribute.dart';
 import '../../logic/services/image_saver/s_image_saver.dart';
 import '../embeds/widgets/image.dart';
 
@@ -86,3 +90,112 @@ Future<SaveImageResult> saveImage({
     );
   }
 }
+
+(
+  OptionalSize imageSize,
+  double? margin,
+  Alignment alignment,
+) getElementAttributes(
+  Node node,
+) {
+  var imageSize = const OptionalSize(null, null);
+  var imageAlignment = Alignment.center;
+  double? imageMargin;
+
+  // Usually double value
+  final heightValue = double.tryParse(
+      node.style.attributes[Attribute.height.key]?.value.toString() ?? '');
+  final widthValue = double.tryParse(
+      node.style.attributes[Attribute.width.key]?.value.toString() ?? '');
+
+  if (heightValue != null) {
+    imageSize = imageSize.copyWith(
+      height: heightValue,
+    );
+  }
+  if (widthValue != null) {
+    imageSize = imageSize.copyWith(
+      width: widthValue,
+    );
+  }
+
+  final cssStyle = node.style.attributes['style'];
+
+  if (cssStyle != null) {
+    final attrs = base.isMobile(supportWeb: false)
+        ? base.parseKeyValuePairs(cssStyle.value.toString(), {
+            AttributeExt.mobileWidth.key,
+            AttributeExt.mobileHeight.key,
+            AttributeExt.mobileMargin.key,
+            AttributeExt.mobileAlignment.key,
+          })
+        : base.parseKeyValuePairs(cssStyle.value.toString(), {
+            Attribute.width.key,
+            Attribute.height.key,
+            'margin',
+            'alignment',
+          });
+    if (attrs.isEmpty) {
+      return (imageSize, imageMargin, imageAlignment);
+    }
+
+    // It css value as string but we will try to support it anyway
+
+    // TODO: This could be improved much better
+    final cssHeightValue = double.tryParse(((base.isMobile(supportWeb: false)
+                ? attrs[AttributeExt.mobileHeight.key]
+                : attrs[Attribute.height.key]) ??
+            '')
+        .replaceFirst('px', ''));
+    final cssWidthValue = double.tryParse(((!base.isMobile(supportWeb: false)
+                ? attrs[Attribute.width.key]
+                : attrs[AttributeExt.mobileWidth.key]) ??
+            '')
+        .replaceFirst('px', ''));
+
+    if (cssHeightValue != null) {
+      imageSize = imageSize.copyWith(height: cssHeightValue);
+    }
+    if (cssWidthValue != null) {
+      imageSize = imageSize.copyWith(width: cssWidthValue);
+    }
+
+    imageAlignment = base.getAlignment(base.isMobile(supportWeb: false)
+        ? attrs[AttributeExt.mobileAlignment.key]
+        : attrs['alignment']);
+    final margin = (base.isMobile(supportWeb: false)
+        ? double.tryParse(AttributeExt.mobileMargin.key)
+        : double.tryParse('margin'));
+    if (margin != null) {
+      imageMargin = margin;
+    }
+  }
+
+  return (imageSize, imageMargin, imageAlignment);
+}
+
+@immutable
+class OptionalSize {
+  const OptionalSize(
+    this.width,
+    this.height,
+  );
+
+  /// If non-null, requires the child to have exactly this width.
+  /// If null, the child is free to choose its own width.
+  final double? width;
+
+  /// If non-null, requires the child to have exactly this height.
+  /// If null, the child is free to choose its own height.
+  final double? height;
+
+  OptionalSize copyWith({
+    double? width,
+    double? height,
+  }) {
+    return OptionalSize(
+      width ?? this.width,
+      height ?? this.height,
+    );
+  }
+}

flutter_quill_extensions/lib/presentation/utils/web_utils.dart

@@ -28,8 +28,8 @@ import 'package:flutter_quill/flutter_quill.dart' show Attribute, Node;
     final attrs = base.parseKeyValuePairs(cssStyle.value.toString(), {
       Attribute.width.key,
       Attribute.height.key,
-      Attribute.margin,
-      Attribute.alignment,
+      'margin',
+      'alignment',
     });
     final cssHeightValue = attrs[Attribute.height.key];
     if (cssHeightValue != null) {

lib/src/l10n/extensions/localizations.dart

@@ -7,7 +7,7 @@ typedef FlutterQuillLocalizations = generated.FlutterQuillLocalizations;
 extension LocalizationsExt on BuildContext {
   /// Require the [FlutterQuillLocalizations] instance
   ///
-  /// `loc` is short for localizations
+  /// `loc` is short for `localizations`
   FlutterQuillLocalizations get loc {
     return FlutterQuillLocalizations.of(this) ??
         (throw UnimplementedError(

lib/src/models/documents/attribute.dart

@@ -121,8 +121,10 @@ class Attribute<T> extends Equatable {
   @Deprecated('This property is no logner used in flutter_quill')
   static const String mobileAlignment = 'mobileAlignment';
 
+  @Deprecated("Will be removed as it doesn't confirm to Quill js")
   static const String alignment = 'alignment';
 
+  @Deprecated("Will be removed as it doesn't confirm to Quill js")
   static const String margin = 'margin';
 
   static const ImageAttribute image = ImageAttribute(null);

lib/src/models/rules/insert.dart

@@ -520,6 +520,7 @@ class AutoFormatLinksRule extends InsertRule {
     try {
       final cand = (prev.data as String).split('\n').last.split(' ').last;
       final link = Uri.parse(cand);
+      // TODO: Can be improved a little
       if (!['https', 'http'].contains(link.scheme)) {
         return null;
       }

lib/src/utils/string.dart

@@ -19,6 +19,7 @@ Map<String, String> parseKeyValuePairs(String s, Set<String> targetKeys) {
   return result;
 }
 
+@Deprecated('This function is no longer used in flutter_quill')
 String replaceStyleStringWithSize(
   String cssStyle, {
   required double width,
@@ -37,11 +38,8 @@ String replaceStyleStringWithSize(
   }
 
   if (isMobile) {
-    // TODO: Will be updated soon.
-    // ignore: deprecated_member_use_from_same_package
-    result[Attribute.mobileWidth] = width.toString();
-    // ignore: deprecated_member_use_from_same_package
-    result[Attribute.mobileHeight] = height.toString();
+    result['mobileWidth'] = width.toString();
+    result['mobileHeight'] = height.toString();
   } else {
     result[Attribute.width.key] = width.toString();
     result[Attribute.height.key] = height.toString();