[GH-ISSUE #1868] [FR] Implement a cover plugin #730

New issue

Closed

opened 2026-03-23 20:40:19 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 20:40:19 +00:00

Owner

Originally created by @LucasXu0 on GitHub (Feb 17, 2023).
Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/1868

Description

Implement a cover plugin to support customizing the color, and image from assets or unsplash.

Add a cover plugin by following this documentation. https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/documentation/customizing.md#customizing-a-component
The cover plugin should contain two features: change the cover and delete the cover.
Define the plugin under this directory. frontend/app_flowy/lib/plugins/document/presentation/plugins

Example
Screenshot 2023-02-17 at 16 31 58
Screenshot 2023-02-17 at 16 32 01

Steps

define a node type called cover.
implement the change cover widget.
implement the CoverNodeWidgetBuilder.
register it in document_page.dart
test it by inserting it via slash command.

Impact

Improve the user experience.

Additional Context

Figma https://www.figma.com/file/X1R9i5HAFtJSNIKOPPW7yK/AppFlowy-%5BUI%5D%5BMaster%5D?node-id=862%3A407413&t=7sE2BUbfecLyhkux-0

Originally created by @LucasXu0 on GitHub (Feb 17, 2023). Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/1868 ### Description Implement a cover plugin to support customizing the color, and image from assets or [unsplash](https://unsplash.com/). 1. Add a cover plugin by following this documentation. https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/documentation/customizing.md#customizing-a-component 2. The cover plugin should contain two features: change the cover and delete the cover. 3. Define the plugin under this directory. `frontend/app_flowy/lib/plugins/document/presentation/plugins` Example <img width="505" alt="Screenshot 2023-02-17 at 16 31 58" src="https://user-images.githubusercontent.com/11863087/219593748-1d91d374-b4d5-4d58-b0f5-eecffb786159.png"> <img width="503" alt="Screenshot 2023-02-17 at 16 32 01" src="https://user-images.githubusercontent.com/11863087/219593769-ef936bef-5559-4b07-8525-ef9bc82a3893.png"> <img width="322" alt="Screenshot 2023-02-17 at 16 32 24" src="https://user-images.githubusercontent.com/11863087/219593780-a58bf995-ce83-496f-97aa-2ba50429cb57.png"> Steps 1. define a node type called `cover`. 2. implement the change cover widget. 3. implement the `CoverNodeWidgetBuilder`. 4. register it in `document_page.dart` 5. test it by inserting it via slash command. ### Impact Improve the user experience. ### Additional Context Figma https://www.figma.com/file/X1R9i5HAFtJSNIKOPPW7yK/AppFlowy-%5BUI%5D%5BMaster%5D?node-id=862%3A407413&t=7sE2BUbfecLyhkux-0