Design an HTML editor with advanced class management

[synbe]

This issue involves creating an HTML editor with the following features:

1. Class Management:

   • Display all classes of the current HTML tag when hovering over it in the preview area.
   • List all classes in a sidebar, allowing the user to modify, delete, or add new classes.
   • Support adding new classes and previewing changes in real time.

2. Layout:

   • Split layout with the left side containing the HTML source code editor and toolbar, and the right side showing a live preview.

3. HTML Editing:

   • Allow inserting new <div> elements at the cursor position in the source code editor or wrapping selected text with a new <div>.
   • Enable inserting one or more classes from the class list at the cursor position in the source code editor.

4. Export Options:

   • Export or copy one, multiple, or all classes along with their CSS definitions.
   • Provide buttons to export the result as an image or a single HTML file.

5. Class Details:

   • Clicking a class name should display its CSS properties below, allowing modifications with real-time preview.

6. Dynamic Class Addition:

   • Support adding new classes directly in the source editor or through a dedicated button, with real-time preview.

7. UI/UX:

   • Ensure the layout is aesthetically pleasing and the operations are user-friendly.

This editor should leverage modern web technologies like JavaScript, CSS, and HTML. Libraries like CodeMirror (for the source editor) and html2canvas (for exporting as an image) may be used.