-
-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Open
Description
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Chrome 143.0.7499.41
Reproducible demo link
https://jsfiddle.net/mghzw41k/2/
Describe the bug
On preview mode, anchor links with hash navigation (e.g., href="#section") don't work.
The default browser navigation behavior is prevented, even though preview mode should (I think) allow normal page interactions.
How to reproduce the bug?
- Initialize GrapesJS editor
- Add content with an anchor link pointing to a section:
<a href="#about">Go to About</a> - Add a target section:
<section id="about">About Section</section> - Enter preview mode
- Click the anchor link
Expected Behavior:
The preview page should scroll to the target section when clicking the anchor link, as it would in a normal browser.
Actual Behavior:
Nothing happens when clicking the anchor link. The default navigation behavior is prevented.
JSFiddle Code
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/grapes.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/grapes.min.css">
<div id="gjs"></div>const editor = grapesjs.init({
container: '#gjs',
});
editor.on('load', () => {
editor.setComponents(`
<div>
<a href="#about" style="display: inline-block; padding: 10px; background: #007bff; color: white; text-decoration: none; border-radius: 4px;">Click to nav to About</a>
</div>
<div style="height:1000px;background:red;">
<span>... Spacing ...</span>
</div>
<section id="about" style="padding: 20px; background: #f0f0f0;">
<h2>About Me</h2>
<p>This is the about section that the button should navigate to.</p>
</section>
`);
});Code of Conduct
- I agree to follow this project's Code of Conduct
Metadata
Metadata
Assignees
Labels
No labels