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
2025-08-03 22:04:25 +07:00
parent 7afb83753c
commit e1bc8d193d
18 changed files with 5339 additions and 10 deletions

View File

@@ -9,6 +9,7 @@ import Base64Tool from './pages/Base64Tool';
import CsvJsonTool from './pages/CsvJsonTool';
import BeautifierTool from './pages/BeautifierTool';
import DiffTool from './pages/DiffTool';
import HtmlPreviewTool from './pages/HtmlPreviewTool';
import './index.css';
function App() {
@@ -24,6 +25,7 @@ function App() {
<Route path="/csv-json" element={<CsvJsonTool />} />
<Route path="/beautifier" element={<BeautifierTool />} />
<Route path="/diff" element={<DiffTool />} />
<Route path="/html-preview" element={<HtmlPreviewTool />} />
</Routes>
</Layout>
</Router>