Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Grid-Based Image Layout (1, 2, 3 per Row) #2430

Open
1 task done
kaushikcrypticalinfo opened this issue Jan 10, 2025 · 0 comments
Open
1 task done
Labels
question Further information is requested

Comments

@kaushikcrypticalinfo
Copy link

kaushikcrypticalinfo commented Jan 10, 2025

Is there an existing issue for this?

The question

Feature Request: Grid-Based Image Layout (1, 2, 3 per Row)

Description:

I'm working on a feature for the Flutter Quill editor where clicking on an inserted image should open a bottom sheet with options to set the image layout in a grid format. The options are:

  • 1 per row: A single image spans the entire width of the editor.
  • 2 per row: Two images appear side by side in the same row, equally spaced and sized.
  • 3 per row: Three images appear side by side in the same row, equally spaced and sized.

Desired Behavior:

  • Detect when an image in the editor is clicked to open a bottom sheet with these layout options.
  • Dynamically adjust the editor content to display the images in the selected grid format (e.g., multiple images per row).
  • Allow setting a specific size for single images (1 per row layout).
  • Provide an option to apply the selected layout and size to all images in the editor.

Questions:

  1. Is there a built-in mechanism in the Flutter Quill package to manage grid layouts for images or other embed blocks?
  2. If not, what's the best approach to implement this? Should I use custom embed attributes or modify the document's delta directly?
  3. How can I group images together in rows (e.g., two or three images per row) while maintaining the editor's styling and structure?
  4. Are there any examples or recommendations for implementing custom layout features like this in the Quill editor?
  5. How can I store and apply specific size settings for single images?
  6. What's the recommended way to iterate through all images in the document and apply the selected layout and size?

Example Use Case:

This feature would be useful for creating image galleries or layouts within the editor, allowing users to control how images are displayed and arranged. It would also enable setting specific sizes for individual images and applying layout changes to all images for consistency.

Additional Context:

I'm using the flutter_quill package in my Flutter application.

Screenshot 2025-01-10 at 3 38 04 PM

Thank you for your help!

@kaushikcrypticalinfo kaushikcrypticalinfo added the question Further information is requested label Jan 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

1 participant