Anchor Editable Field Test

This page simulates the anchor behavior in the site builder.

Editor Mode

Test 1: Editor Mode (Default)

You should see the anchor with an editable text field below. Click on it to edit.

Content before anchor

⚓

Content after anchor

Test 2: Input Sync

Edit the text field above and watch the ID update here:

Current Anchor ID: anchor-1

Try typing: "My Section", "pricing!", "Contact_Us", etc.

Test 3: Sanitization Rules

Test 4: Preview Mode

Click "Toggle Preview Mode" above. The anchor should become completely invisible.

Expected: