Step 6 of remaking the example

.github/workflows/main.yml

@@ -31,9 +31,6 @@ jobs:
  - name: Install quill_html_converter dependencies
  run: flutter pub get -C packages/quill_html_converter
 
- - name: Install old_example dependencies
- run: flutter pub get -C old_example
-
  - name: Run flutter analysis
  run: flutter analyze
 

.gitignore

@@ -78,4 +78,6 @@ example/ios/Podfile.lock
 pubspec.lock
 
 # For local development
-pubspec_overrides.yaml
+pubspec_overrides.yaml
+
+old_example

.pubignore

@@ -10,4 +10,4 @@ example/.fvm/
 example/build/
 example/.dart_tool/
 
-scripts/
+scripts/

example/android/app/src/main/AndroidManifest.xml

@@ -40,6 +40,7 @@
  <category android:name="android.intent.category.LAUNCHER" />
  </intent-filter>
  </activity>
+ <!-- For `image_cropper` plugin -->
  <activity
  android:name="com.yalantis.ucrop.UCropActivity"
  android:screenOrientation="portrait"

example/lib/main.dart

@@ -18,6 +18,7 @@ import 'presentation/quill/quill_screen.dart';
 import 'presentation/quill/samples/quill_default_sample.dart';
 import 'presentation/quill/samples/quill_images_sample.dart';
 import 'presentation/quill/samples/quill_text_sample.dart';
+import 'presentation/quill/samples/quill_videos_sample.dart';
 import 'presentation/settings/cubit/settings_cubit.dart';
 import 'presentation/settings/widgets/settings_screen.dart';
 
@@ -101,8 +102,10 @@ class MyApp extends StatelessWidget {
  document: Document.fromJson(quillImagesSample),
  ),
  ),
- DefaultScreen.videosSample => throw UnimplementedError(
- 'Not implemented for now',
+ DefaultScreen.videosSample => QuillScreen(
+ args: QuillScreenArgs(
+ document: Document.fromJson(quillVideosSample),
+ ),
  ),
  DefaultScreen.textSample => QuillScreen(
  args: QuillScreenArgs(

example/lib/presentation/home/widgets/home_screen.dart

@@ -10,6 +10,7 @@ import '../../quill/quill_screen.dart';
 import '../../quill/samples/quill_default_sample.dart';
 import '../../quill/samples/quill_images_sample.dart';
 import '../../quill/samples/quill_text_sample.dart';
+import '../../quill/samples/quill_videos_sample.dart';
 import '../../settings/widgets/settings_screen.dart';
 import 'example_item.dart';
 
@@ -100,7 +101,12 @@ class HomeScreen extends StatelessWidget {
  ),
  text: 'If you want to see how the editor work with videos, '
  'see any samples or you are working on it',
- onPressed: () {},
+ onPressed: () => Navigator.of(context).pushNamed(
+ QuillScreen.routeName,
+ arguments: QuillScreenArgs(
+ document: Document.fromJson(quillVideosSample),
+ ),
+ ),
  ),
  HomeScreenExampleItem(
  title: 'Text',

example/lib/presentation/quill/quill_editor.dart

@@ -0,0 +1,94 @@
+import 'package:cached_network_image/cached_network_image.dart'
+ show CachedNetworkImageProvider;
+import 'package:desktop_drop/desktop_drop.dart' show DropTarget;
+import 'package:flutter/material.dart';
+import 'package:flutter_quill/extensions.dart' show isAndroid, isIOS, isWeb;
+import 'package:flutter_quill/flutter_quill.dart';
+import 'package:flutter_quill_extensions/flutter_quill_extensions.dart';
+import 'package:flutter_quill_extensions/presentation/embeds/widgets/image.dart'
+ show getImageProviderByImageSource, imageFileExtensions;
+
+import '../extensions/scaffold_messenger.dart';
+
+class MyQuillEditor extends StatelessWidget {
+ const MyQuillEditor({
+ required this.configurations,
+ required this.scrollController,
+ required this.focusNode,
+ super.key,
+ });
+
+ final QuillEditorConfigurations configurations;
+ final ScrollController scrollController;
+ final FocusNode focusNode;
+
+ @override
+ Widget build(BuildContext context) {
+ return QuillEditor(
+ scrollController: scrollController,
+ focusNode: focusNode,
+ configurations: configurations.copyWith(
+ scrollable: true,
+ placeholder: 'Start writting your notes...',
+ padding: const EdgeInsets.all(16),
+ embedBuilders: isWeb()
+ ? FlutterQuillEmbeds.editorWebBuilders()
+ : FlutterQuillEmbeds.editorBuilders(
+ imageEmbedConfigurations: QuillEditorImageEmbedConfigurations(
+ imageErrorWidgetBuilder: (context, error, stackTrace) {
+ return Text(
+ 'Error while loading an image: ${error.toString()}',
+ );
+ },
+ imageProviderBuilder: (imageUrl) {
+ // cached_network_image is supported
+ // only for Android, iOS and web
+
+ // We will use it only if image from network
+ if (isAndroid(supportWeb: false) ||
+ isIOS(supportWeb: false) ||
+ isWeb()) {
+ if (isHttpBasedUrl(imageUrl)) {
+ return CachedNetworkImageProvider(
+ imageUrl,
+ );
+ }
+ }
+ return getImageProviderByImageSource(
+ imageUrl,
+ imageProviderBuilder: null,
+ assetsPrefix: QuillSharedExtensionsConfigurations.get(
+ context: context)
+ .assetsPrefix,
+ );
+ },
+ ),
+ ),
+ builder: (context, rawEditor) {
+ // The `desktop_drop` plugin doesn't support iOS platform for now
+ if (isIOS(supportWeb: false)) {
+ return rawEditor;
+ }
+ return DropTarget(
+ onDragDone: (details) {
+ final scaffoldMessenger = ScaffoldMessenger.of(context);
+ final file = details.files.first;
+ final isSupported = imageFileExtensions.any(file.name.endsWith);
+ if (!isSupported) {
+ scaffoldMessenger.showText(
+ 'Only images are supported right now: ${file.mimeType}, ${file.name}, ${file.path}, $imageFileExtensions',
+ );
+ return;
+ }
+ context.requireQuillController.insertImageBlock(
+ imageSource: file.path,
+ );
+ scaffoldMessenger.showText('Image is inserted.');
+ },
+ child: rawEditor,
+ );
+ },
+ ),
+ );
+ }
+}

example/lib/presentation/quill/quill_screen.dart

@@ -1,21 +1,17 @@
-import 'dart:io';
+import 'dart:convert' show jsonEncode;
 
-import 'package:cached_network_image/cached_network_image.dart';
-import 'package:desktop_drop/desktop_drop.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_quill/extensions.dart';
 import 'package:flutter_quill/flutter_quill.dart';
-import 'package:flutter_quill_extensions/flutter_quill_extensions.dart';
-import 'package:flutter_quill_extensions/presentation/embeds/widgets/image.dart'
- show getImageProviderByImageSource, imageFileExtensions;
-import 'package:image_cropper/image_cropper.dart';
-import 'package:path/path.dart' as path;
-import 'package:path_provider/path_provider.dart';
+import 'package:flutter_quill_extensions/flutter_quill_extensions.dart'
+ show FlutterQuillEmbeds, QuillSharedExtensionsConfigurations;
+
 import 'package:quill_html_converter/quill_html_converter.dart';
 import 'package:share_plus/share_plus.dart' show Share;
 
 import '../extensions/scaffold_messenger.dart';
 import '../shared/widgets/home_screen_button.dart';
+import 'quill_editor.dart';
+import 'quill_toolbar.dart';
 
 @immutable
 class QuillScreenArgs {
@@ -40,6 +36,8 @@ class QuillScreen extends StatefulWidget {
 
 class _QuillScreenState extends State<QuillScreen> {
  final _controller = QuillController.basic();
+ final _editorFocusNode = FocusNode();
+ final _editorScrollController = ScrollController();
  var _isReadOnly = false;
 
  @override
@@ -48,62 +46,12 @@ class _QuillScreenState extends State<QuillScreen> {
  _controller.document = widget.args.document;
  }
 
- Future<void> onImageInsertWithCropping(
- String image, QuillController controller) async {
- final croppedFile = await ImageCropper().cropImage(
- sourcePath: image,
- aspectRatioPresets: [
- CropAspectRatioPreset.square,
- CropAspectRatioPreset.ratio3x2,
- CropAspectRatioPreset.original,
- CropAspectRatioPreset.ratio4x3,
- CropAspectRatioPreset.ratio16x9
- ],
- uiSettings: [
- AndroidUiSettings(
- toolbarTitle: 'Cropper',
- toolbarColor: Colors.deepOrange,
- toolbarWidgetColor: Colors.white,
- initAspectRatio: CropAspectRatioPreset.original,
- lockAspectRatio: false,
- ),
- IOSUiSettings(
- title: 'Cropper',
- ),
- WebUiSettings(
- context: context,
- ),
- ],
- );
- final newImage = croppedFile?.path;
- if (newImage == null) {
- return;
- }
- if (isWeb()) {
- controller.insertImageBlock(imageSource: newImage);
- return;
- }
- final newSavedImage = await saveImage(File(newImage));
- controller.insertImageBlock(imageSource: newSavedImage);
- }
-
- Future<void> onImageInsert(String image, QuillController controller) async {
- if (isWeb()) {
- controller.insertImageBlock(imageSource: image);
- return;
- }
- final newSavedImage = await saveImage(File(image));
- controller.insertImageBlock(imageSource: newSavedImage);
- }
-
- /// Copies the picked file from temporary cache to applications directory
- Future<String> saveImage(File file) async {
- final appDocDir = await getApplicationDocumentsDirectory();
- final copiedFile = await file.copy(path.join(
- appDocDir.path,
- '${DateTime.now().toIso8601String()}${path.extension(file.path)}',
- ));
- return copiedFile.path;
+ @override
+ void dispose() {
+ _controller.dispose();
+ _editorFocusNode.dispose();
+ _editorScrollController.dispose();
+ super.dispose();
  }
 
  @override
@@ -137,6 +85,18 @@ class _QuillScreenState extends State<QuillScreen> {
  },
  icon: const Icon(Icons.share),
  ),
+ IconButton(
+ tooltip: 'Print to log',
+ onPressed: () {
+ print(
+ jsonEncode(_controller.document.toDelta().toJson()),
+ );
+ ScaffoldMessenger.of(context).showText(
+ 'The quill delta json has been printed to the log.',
+ );
+ },
+ icon: const Icon(Icons.print),
+ ),
  const HomeScreenButton(),
  ],
  ),
@@ -155,95 +115,16 @@ class _QuillScreenState extends State<QuillScreen> {
  ),
  child: Column(
  children: [
- if (!_isReadOnly)
- QuillToolbar(
- configurations: QuillToolbarConfigurations(
- embedButtons: FlutterQuillEmbeds.toolbarButtons(
- imageButtonOptions: QuillToolbarImageButtonOptions(
- imageButtonConfigurations:
- QuillToolbarImageConfigurations(
- onImageInsertCallback: isAndroid(supportWeb: false) ||
- isIOS(supportWeb: false) ||
- isWeb()
- ? onImageInsertWithCropping
- : onImageInsert,
- ),
- ),
- ),
- ),
- ),
+ if (!_isReadOnly) const MyQuillToolbar(),
  Builder(
  builder: (context) {
  return Expanded(
- child: QuillEditor.basic(
+ child: MyQuillEditor(
  configurations: QuillEditorConfigurations(
- scrollable: true,
  readOnly: _isReadOnly,
- placeholder: 'Start writting your notes...',
- padding: const EdgeInsets.all(16),
- embedBuilders: isWeb()
- ? FlutterQuillEmbeds.editorWebBuilders()
- : FlutterQuillEmbeds.editorBuilders(
- imageEmbedConfigurations:
- QuillEditorImageEmbedConfigurations(
- imageErrorWidgetBuilder:
- (context, error, stackTrace) {
- return Text(
- 'Error while loading an image: ${error.toString()}',
- );
- },
- imageProviderBuilder: (imageUrl) {
- // cached_network_image is supported
- // only for Android, iOS and web
-
- // We will use it only if image from network
- if (isAndroid(supportWeb: false) ||
- isIOS(supportWeb: false) ||
- isWeb()) {
- if (isHttpBasedUrl(imageUrl)) {
- return CachedNetworkImageProvider(
- imageUrl,
- );
- }
- }
- return getImageProviderByImageSource(
- imageUrl,
- imageProviderBuilder: null,
- assetsPrefix:
- QuillSharedExtensionsConfigurations.get(
- context: context)
- .assetsPrefix,
- );
- },
- ),
- ),
- builder: (context, rawEditor) {
- // The `desktop_drop` plugin doesn't support iOS platform for now
- if (isIOS(supportWeb: false)) {
- return rawEditor;
- }
- return DropTarget(
- onDragDone: (details) {
- final scaffoldMessenger =
- ScaffoldMessenger.of(context);
- final file = details.files.first;
- final isSupported = imageFileExtensions
- .any((ext) => file.name.endsWith(ext));
- if (!isSupported) {
- scaffoldMessenger.showText(
- 'Only images are supported right now: ${file.mimeType}, ${file.name}, ${file.path}, $imageFileExtensions',
- );
- return;
- }
- _controller.insertImageBlock(
- imageSource: file.path,
- );
- scaffoldMessenger.showText('Image is inserted.');
- },
- child: rawEditor,
- );
- },
  ),
+ scrollController: _editorScrollController,
+ focusNode: _editorFocusNode,
  ),
  );
  },