Tiptap Editor with Modified Tag Structure

I'll revert to a simpler textarea-based editor while implementing your new tag structure format.

Textarea Editor with Modified Tag Structure

I've implemented a simpler textarea-based editor with your specified tag structure format. This version includes:

1. Modified Tag Structure

• Implemented the GroupedSourceOutputs type exactly as you specified

• Each tag now includes:

  • node_id (string)
  • value (tag name)
  • key (string)
  • data_type (DataTypes)
  • Group information

2. Simple Resizable Textarea

• Used TextareaAutosize for a clean, resizable textarea
• Added the resize-vertical class to allow manual resizing
• Maintained the visual tag rendering on top of the textarea

3. Visual Differentiation by Data Type

• Tags are color-coded based on their data type:

  • String: Blue
  • Number: Green
  • Boolean: Purple
  • Object: Orange
  • Array: Yellow

4. Drag and Drop Functionality

• Drag and drop tags from the bottom panel
• Each tag displays its value and data type
• Tags are organized by their group

5. Improved Tag Display

• Added tooltips showing tag details (type and key)
• Included data type badges on draggable tags
• Group headers with icons

This implementation gives you a clean, simple textarea that you can resize while maintaining all the functionality of the tag system with your specified data structure.