# 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

- Spaces → hyphens: "My Section" becomes "my-section"
- Lowercase: "PRICING" becomes "pricing"
- Special chars removed: "contact!" becomes "contact"
- Underscores preserved: "section_1" stays "section_1"

## Test 4: Preview Mode

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

Expected:

- Icon hidden ✅
- Input field hidden ✅
- Dashed border hidden ✅
- Content flows as if anchor doesn't exist ✅