Support mobile custom size image

CHANGELOG.md

@@ -1,3 +1,6 @@
+## [1.8.1]
+* Support mobile custom size image.
+
 ## [1.8.0]
 * Support entering link for image/video.
 

README.md

@@ -96,6 +96,20 @@ Also it is required to provide `webImagePickImpl`, e.g. [Sample Page](https://gi
 
 It is required to provide `filePickImpl` for toolbar image button, e.g. [Sample Page](https://github.com/singerdmx/flutter-quill/blob/master/example/lib/pages/home_page.dart#L192).
 
+## Custom Size Image for Mobile
+
+Define `mobileWidth`, `mobileHeight` and `mobileMargin` as follows:
+```
+{
+      "insert": {
+         "image": "https://user-images.githubusercontent.com/122956/72955931-ccc07900-3d52-11ea-89b1-d468a6e2aa2b.png"
+      },
+      "attributes":{
+         "style":"mobileWidth: 50; mobileHeight: 50; mobileMargin: 10;"
+      }
+}
+```
+
 ## Migrate Zefyr Data
 
 Check out [code](https://github.com/jwehrle/zefyr_quill_convert) and [doc](https://docs.google.com/document/d/1FUSrpbarHnilb7uDN5J5DDahaI0v1RMXBjj4fFSpSuY/edit?usp=sharing).

example/assets/sample_data.json

@@ -1,4 +1,13 @@
 [
+   {
+      "insert": {
+         "image": "https://user-images.githubusercontent.com/122956/72955931-ccc07900-3d52-11ea-89b1-d468a6e2aa2b.png"
+      },
+      "attributes":{
+         "width":"230",
+         "style":"display: block; margin: auto; mobileWidth: 50; mobileHeight: 50; mobileMargin: 10;"
+      }
+   },
    {
       "insert":"Flutter Quill"
    },
@@ -8,15 +17,6 @@
       },
       "insert":"\n"
    },
-   {
-      "insert": {
-         "image": "https://user-images.githubusercontent.com/122956/72955931-ccc07900-3d52-11ea-89b1-d468a6e2aa2b.png"
-      },
-      "attributes":{
-         "width":"230",
-         "style":"display: block; margin: auto; mobileWidth: 5; mobileHeight: 5; mobileMargin: 1;"
-      }
-   },
    {
       "insert": {
          "video": "https://www.youtube.com/watch?v=V4hgdKhIqtc&list=PLbhaS_83B97s78HsDTtplRTEhcFsqSqIK&index=1"
@@ -525,6 +525,15 @@
       },
       "insert":"-patch"
    },
+   {
+      "insert": {
+         "image": "https://user-images.githubusercontent.com/122956/72955931-ccc07900-3d52-11ea-89b1-d468a6e2aa2b.png"
+      },
+      "attributes":{
+         "width":"230",
+         "style":"display: block; margin: auto;"
+      }
+   },
    {
       "insert": "\n"
    }

lib/src/widgets/editor.dart

@@ -112,7 +112,19 @@ Widget _defaultEmbedBuilder(
         final _attrs = parseKeyValuePairs(style.value.toString(),
             {'mobileWidth', 'mobileHeight', 'mobileMargin'});
         if (_attrs.isNotEmpty) {
-          // TODO: return image with custom width, height and margin
+          assert(_attrs.length == 3,
+              'mobileWidth, mobileHeight, mobileMargin must be specified');
+          final w = double.parse(_attrs['mobileWidth']!);
+          final h = double.parse(_attrs['mobileHeight']!);
+          final m = double.parse(_attrs['mobileMargin']!);
+          return Padding(
+              padding: EdgeInsets.all(m),
+              child: imageUrl.startsWith('http')
+                  ? Image.network(imageUrl, width: w, height: h)
+                  : isBase64(imageUrl)
+                      ? Image.memory(base64.decode(imageUrl),
+                          width: w, height: h)
+                      : Image.file(io.File(imageUrl), width: w, height: h));
         }
       }
       return imageUrl.startsWith('http')

pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_quill
 description: A rich text editor supporting mobile and web (Demo App @ bulletjournal.us)
-version: 1.8.0
+version: 1.8.1
 #author: bulletjournal
 homepage: https://bulletjournal.us/home/index.html
 repository: https://github.com/singerdmx/flutter-quill