feat: Add contentInsertionConfiguration to editor and text input service

[stevenosse]

Description

This PR Adds support for contentInsertionConfiguration attribute that allows the usage of Android's image keyboard to Flutter.

See: https://api.flutter.dev/flutter/material/TextField/contentInsertionConfiguration.html

Impact

This will allow the handling of more complex clipboard contents pastes (like images), or insertion of gifs and stickers

Linked issue: #646

[CLAassistant]

All committers have signed the CLA.

[LucasXu0]

Suggested change

	allowedMimeTypes: widget.contentInsertionConfiguration == null
	? const <String>[]
	: widget.contentInsertionConfiguration!.allowedMimeTypes,
	allowedMimeTypes:
	widget.contentInsertionConfiguration?.allowedMimeTypes ?? [],

[LucasXu0]

typo?

[stevenosse]

I added it because of the "depend_on_referenced_packages" lint

[stevenosse]

removed

[LucasXu0]

Hi, @stevenosse. Thanks for contributing. Have you tried using the contentInsertionConfiguration in your application, or could you share a more specific use case?

[stevenosse]

Hi, @stevenosse. Thanks for contributing. Have you tried using the contentInsertionConfiguration in your application, or could you share a more specific use case?

Here is how it looks like:

screen-20240128-212248.1.online-video-cutter.com.mp4

On some Xiaomi devices, when a user takes a screenshot, it's added to their clipboard (on WhatsApp, they can select that image from their clipboard and it's sent as an image).
On my app, i want users to be able to add images from their clipboard to a note

[LucasXu0]

@stevenosse Nice inspiration. Could you also share your code sample for implementing the 'insert image from clipboard' feature here, so that other developers can refer to it?

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (3cd5602) 76.46% compared to head (87a7cb7) 76.48%.
Report is 4 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #691      +/-   ##
==========================================
+ Coverage   76.46%   76.48%   +0.02%     
==========================================
  Files         295      295              
  Lines       13094    13315     +221     
==========================================
+ Hits        10012    10184     +172     
- Misses       3082     3131      +49     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[stevenosse]

@stevenosse Nice inspiration. Could you also share your code sample for implementing the 'insert image from clipboard' feature here, so that other developers can refer to it?

Sure !
Here is the sample code:

AppFlowyEditor(
  editorStyle: editorStyle,
  editorState: editorState,
  editorScrollController: editorScrollController,
  blockComponentBuilders: blockComponentBuilders,
  showMagnifier: true,
  // showcase 3: customize the header and footer.
  header: Padding(
    padding: const EdgeInsets.only(bottom: 10.0),
    child: Image.asset(
      'assets/images/header.png',
    ),
  ),
  footer: const SizedBox(
    height: 100,
  ),
  /// Usage of content insertion configuration
  contentInsertionConfiguration: ContentInsertionConfiguration(
    allowedMimeTypes: ['image/gif', 'image/png'],
    onContentInserted: (content) async {
      if (content.data != null) {
        final tmpDir = await getTemporaryDirectory();
        final filename = path.basename(content.uri);
        final file = File('${tmpDir.path}/$filename');

        await file.writeAsBytes(content.data!);
        editorState.insertImageNode(file.path);
      }
    },
  ),
),