diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e5ea065..a3b5dde5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +## [1.8.1] +* Support mobile custom size image. + ## [1.8.0] * Support entering link for image/video. diff --git a/README.md b/README.md index 09bbe984..98480679 100644 --- a/README.md +++ b/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). diff --git a/example/assets/sample_data.json b/example/assets/sample_data.json index 6fba6e1d..c89aa0a9 100644 --- a/example/assets/sample_data.json +++ b/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" } diff --git a/lib/src/widgets/editor.dart b/lib/src/widgets/editor.dart index 49bd20d6..5c3da465 100644 --- a/lib/src/widgets/editor.dart +++ b/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') diff --git a/pubspec.yaml b/pubspec.yaml index 942b1211..b412109f 100644 --- a/pubspec.yaml +++ b/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