I have been tasked to build a web interface that allows the user to drag, resize, cut/copy/paste, align, group, etc standard HTML elements including all FORM inputs (text, checkbox, radio, etc), and others (IMG, DIV, SPAN, etc) as well as custom HTML elements. The solution needs to provide all of the following:
- Handles around items when seletect
- Drag items around within a container
- Resize items by dragging handles for all 8 directions
- Lock resizing/dragging to horizontal or vertical by setting a flag or
pressing a modifier key - Provide snap-to-grid functionality including always-on and modifier key enabled
- Select multiple items and groups by holding a modifier key and/or
dragging a lasso around the desired items - Group and ungroup items (and recursively, other groups)
- Resize and move a group of items by dragging the group handles
- Move items up and down the Z index
- Align items to each other (center/left/right/middle/top/bottom) and
align to grid - Cut/copy/paste items and groups onto the container and into other
groups - Edit a group’s items by opening the group
- Attach hotkeys to common actions (copy/cut/paste/align/z-index…)
- Optional: rotate items and groups
See PowerPoint for an example of the desired functionality in moving/resizing/selecting elements.
First, I’m not sure what this functionality is called, as a group, other than “full WYSIWYG editor” so it’s nontrivial to search for libraries that provide all of it.
I have found partial solutions like interact.js and jQuery UI but they don’t offer the full functionality and require heavy modification.
To clarify, I am not looking for WYSIWYG editors like editor.js, quill, etc.
I am prepared to write this myself, but wanted to avoid reinventing the wheel if there is another library that already solves all (or most) of it.
Thank you for any advice.