Save Customized Block in LePatron

omar-bear commented 1 year ago

Feature: Save Customized Block in LePatron

Description:

The primary goal of this feature is to allow users of LePatron to save an existing block after customizing it. This will enable them to add it to their predefined block library for future reuse.

Implementation Details:

Directory:

packages/editor/src/js/ext

Steps:

Modal for Saving Block Attributes: create a new file save-block-modal based on the other modals in the editor, for example: packages/editor/src/js/vue/components/send-test/test-modal.js
- Path: packages/editor/src/js/ext/save-block-modal.js
- Task:
  - Upon clicking the save button, a modal will pop up.
  - The modal will have two text input fields:
  - Name (mandatory)
  - Category (optional)
  - The "Save" button within the modal will be disabled initially.
Integrate Save Button in block-wysiwyg.tmpl.html:
- Path: packages/editor/src/tmpl/block-wysiwyg.tmpl.html
- Task:
  - Add a new button with a Font Awesome icon for saving the block.
  - This button will be placed alongside other block tools like delete, duplicate, etc.
Control Button Behavior in viewmodel.js: in this file we already defined the role of the buttons duplicate and delete and here we need to define the behavior of save block button
- Path: packages/editor/src/js/viewmodel.js
- Task:
  - Define the behavior of the save button.
  - When clicked, it should trigger the modal from save-block-modal.js.

Acceptance Criteria:

A new "Save" button is present in the central block editor.
Clicking the "Save" button opens a modal with fields for "Name" and "Category".

Result:

Example after saving the block:

Save Block Example

FlorianGille commented 1 year ago

If you can also add the translation for the text when we are hovering the button to save (with the download icon), check the public/lang/mosaico-fr.json file.