Fix HTML Preview Tool critical bugs: PreviewFrame ref and click handler
- Fixed missing ref={previewFrameRef} on first PreviewFrame component (line 336)
* This was causing 'PreviewFrame API not available' errors during save operations
* Both fullscreen and normal mode PreviewFrame instances now have proper ref connection
- Fixed click handler attachment bug in setupInspectModeStyles function
* Click handler was being skipped when styles were already injected
* Now always attaches click handler when inspect mode is activated
* Added proper cleanup to prevent duplicate event listeners
- Fixed variable scope issues in PreviewFrame.fresh.js
* styleElement and cursorStyleElement now properly scoped for cleanup function
* Added references to existing elements when styles already present
- Removed unused variables and fixed eslint warnings
* Removed unused indentSize variable in BeautifierTool.js
* Removed unused onSave and onDomUpdate props in PreviewFrame.fresh.js
* Fixed unnecessary escape character in script tag
These fixes restore the Enhanced Option A DOM manipulation architecture:
- Inspector sidebar should now appear when clicking elements in inspect mode
- Save functionality should work without 'PreviewFrame ref not available' errors
- Live editing of element properties should work through PreviewFrame API
- Iframe refresh prevention during inspector operations maintained
This commit is contained in:
dwindown
132
src/pages/components/Toolbar.js
Normal file
132
src/pages/components/Toolbar.js
Normal file
@@ -0,0 +1,132 @@
|
||||
import React from 'react';
|
||||
import { RefreshCw, Monitor, Tablet, Smartphone, Inspect, Maximize2, Minimize2, Code } from 'lucide-react';
|
||||
|
||||
const Toolbar = ({
|
||||
selectedDevice,
|
||||
setSelectedDevice,
|
||||
isInspectModeActive,
|
||||
setInspectMode,
|
||||
isFullscreen,
|
||||
onRefresh,
|
||||
onToggleFullscreen,
|
||||
onToggleSidebar,
|
||||
showSidebar,
|
||||
cleanupInspectorState,
|
||||
inspectedElementInfo
|
||||
}) => {
|
||||
const handleDeviceChange = (device) => {
|
||||
if (!isFullscreen && (device === 'desktop' || device === 'tablet')) {
|
||||
onToggleFullscreen(device);
|
||||
} else {
|
||||
setSelectedDevice(device);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInspectToggle = () => {
|
||||
if (isInspectModeActive) {
|
||||
// If already in inspect mode, just turn it off
|
||||
cleanupInspectorState();
|
||||
} else {
|
||||
// Activate inspect mode (no need to cleanup when activating)
|
||||
console.log('🎯 TOOLBAR: Activating inspect mode');
|
||||
setInspectMode(true);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Left side - Code toggle (fullscreen only) */}
|
||||
<div className="flex items-center space-x-2">
|
||||
{isFullscreen && (
|
||||
<button
|
||||
onClick={onToggleSidebar}
|
||||
className={`p-2 rounded-md transition-colors ${
|
||||
showSidebar
|
||||
? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
|
||||
: 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||||
}`}
|
||||
title="Toggle Code Sidebar"
|
||||
>
|
||||
<Code className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Center - Preview controls */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
className="p-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
|
||||
title="Refresh Preview"
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<div className="flex bg-gray-100 dark:bg-gray-700 rounded-md p-1">
|
||||
<button
|
||||
onClick={() => handleDeviceChange('desktop')}
|
||||
className={`p-2 rounded transition-colors ${
|
||||
selectedDevice === 'desktop'
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||||
}`}
|
||||
title="Desktop View"
|
||||
>
|
||||
<Monitor className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeviceChange('tablet')}
|
||||
className={`p-2 rounded transition-colors ${
|
||||
selectedDevice === 'tablet'
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||||
}`}
|
||||
title="Tablet View"
|
||||
>
|
||||
<Tablet className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeviceChange('mobile')}
|
||||
className={`p-2 rounded transition-colors ${
|
||||
selectedDevice === 'mobile'
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||||
}`}
|
||||
title="Mobile View"
|
||||
>
|
||||
<Smartphone className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isFullscreen && (
|
||||
<button
|
||||
onClick={handleInspectToggle}
|
||||
className={`p-2 rounded-md transition-colors ${
|
||||
isInspectModeActive
|
||||
? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
|
||||
: 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||||
}`}
|
||||
title="Inspect Element"
|
||||
>
|
||||
<Inspect className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right side - Fullscreen toggle */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<button
|
||||
onClick={() => onToggleFullscreen()}
|
||||
className="p-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
|
||||
title={isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
|
||||
>
|
||||
{isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Toolbar;
|
||||
Reference in New Issue
Block a user