I require some minor updates to this codepen: [login to view URL]
It uses a custom implementation of Froala ([login to view URL]). You can find the API docs (options, methods, events) here: [login to view URL]
It is based on the drag and drop example here: [login to view URL], but uses a pallet on the left to drop onto the Froala editor on the right.
I need you to:
1. Correct the code so that items dropped from the left panel onto the right respect the "dragInline: false" option. At the moment these items will split exiting blocks (<p> tags etc) in the editor, which they should not. See: [login to view URL]
2. Build a simple plugin to handle these dropped elements using the Froala Plugin framework ([login to view URL]).
The plugin should create popup function on the "drop-box" class wrapper inserted so that:
- A placeholder is shown and fills the initial space in the editor whilst it is hovering but before the element is dropped.
- The dropped element can be resized on mouseover via dragging left/right handles on the X-axis
- The dropped element can be dragged between blocks (as per item 1) using an icon/handle within the div
- A click on the element creates a popup (the same style as the image popup menu), and the div can be set:
- inline or break text (as with images plugin)
- Align right/center/left (as with images plugin)
- A "values" button for secondary popup to edit:
- input label
- input ID
- input help text
- input placeholder
- or deleted
- When items are dropped into existing tables in the editor, the popup for the dropped item and not the table appears
3. Create a function so that the editor toolbar $(".fr-toolbar") has the option to be rendered in place of <div id="froala-toolbar"></div> and not part of the <div id="froala-editor"></div> element. This is so we can show it in another part of the screen if necessary.
4. Create a setting to turn the editor readonly (but keep the dropped form inputs editable). You should be able to look at [login to view URL]
5. We want to save both the data in the editor as <textarea> but also serialise values in the dropped in form inputs that other users will enter. Our approach is to save these as a single JSONb array next to the textarea. You don't need to do the backend, but you need to create the script that builds the array for the JSONb by looping through all the form inputs and saving the values.