feat: Object Editor Preview Mode & Mobile Optimizations
Major Enhancements: - Added Preview/Edit mode toggle to StructuredEditor component * Preview mode: Read-only view with full text visibility * Edit mode: Full editing capabilities with all controls * Toggle positioned below title, responsive on mobile * Works in both main ObjectEditor view and nested modals - Clickable nested data in Preview mode * JSON/serialized values are blue and clickable * Opens modal directly without switching to Edit mode * Hover effects and tooltips for better UX * No longer need edit mode just to explore structure Mobile Responsiveness Improvements: - Fixed all data load notices in ObjectEditor (URL, Paste, Open tabs) - Fixed all data load notices in TableEditor (URL, Paste, Open tabs) - Notices now stack vertically on mobile with proper spacing - Added break-words for long text, whitespace-nowrap for buttons - Dark mode colors added for better visibility Table Editor Fixes: - Fixed sticky header showing row underneath (top-[-1px]) - Made Export section header mobile responsive - Updated object modal footer layout: * Format info and properties combined on single line * Buttons moved to separate row below * Changed 'Apply Changes' to 'Save Changes' for consistency StructuredEditor Improvements: - Moved overflow-x handling from ObjectEditor to StructuredEditor - Now works consistently in main view and nested modals - Long strings scroll horizontally everywhere - 'Add Property' button hidden in Preview mode - Improved chevron colors for dark mode visibility Technical Changes: - StructuredEditor now manages its own editMode state - readOnly prop can still be passed from parent if needed - Proper conditional rendering for all UI elements - Consistent mobile-first responsive design patterns
This commit is contained in:
15
package-lock.json
generated
15
package-lock.json
generated
@@ -14,6 +14,7 @@
|
||||
"@codemirror/lang-html": "^6.4.9",
|
||||
"@codemirror/lang-javascript": "^6.2.4",
|
||||
"@codemirror/lang-json": "^6.0.2",
|
||||
"@codemirror/lang-sql": "^6.10.0",
|
||||
"@codemirror/search": "^6.5.11",
|
||||
"@codemirror/state": "^6.5.2",
|
||||
"@codemirror/theme-one-dark": "^6.1.3",
|
||||
@@ -2174,6 +2175,20 @@
|
||||
"@lezer/json": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-sql": {
|
||||
"version": "6.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-sql/-/lang-sql-6.10.0.tgz",
|
||||
"integrity": "sha512-6ayPkEd/yRw0XKBx5uAiToSgGECo/GY2NoJIHXIIQh1EVwLuKoU8BP/qK0qH5NLXAbtJRLuT73hx7P9X34iO4w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.0.0",
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@lezer/common": "^1.2.0",
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/language": {
|
||||
"version": "6.11.3",
|
||||
"license": "MIT",
|
||||
|
||||
Reference in New Issue
Block a user