On the front page/hero page #25
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: RunicGateway/website#25
Reference in New Issue
Block a user
No description provided.
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
the text area. Love all the inputs but it needs a zoom or size adjustment. Like the text area i want to be able to make it smaller or bigger as a hole. As well as move it around which it might already do. Im not looking at it right now. I also dont remember if there is font color adjustment either. I basically wont to be able to do anything with the hero page.
Hero edit text box Text size needs to cal relative to the dragable size of th box itself auto scalling to be made more wysiwyg compatiable and comfortable
🧠 CLAUDE CODE PROMPT
You are working in an existing React-based hero page editor system.
FILE CONTEXT
The main file is:
HeroEditor.jsx
It already implements a full canvas editor with:
draggable elements (onElPointerDown)
resizable elements (onResizePointerDown)
scaled 1280x720 stage using scale
element system via HeroElement.jsx
text elements using:
type: 'text_block'
props: {
width,
lines: [{ text, tag, fontSize, color, weight }]
}
🎯 TASK
Implement true WYSIWYG font scaling for text_block elements so that text visually scales when the element is resized.
Right now:
resizing only affects props.width
font sizes are static per line
resizing does NOT affect typography
This breaks expected “design tool” behavior.
🔧 REQUIRED CHANGES
In text_block.props, support:
autoScale: true
fontScale: number
Default:
autoScale = true
fontScale = 1
2. Update resize handler in HeroEditor.jsx
Inside:
onResizePointerDown()
When el.type === 'text_block', compute and store a scale factor based on width:
Add logic:
Use base width = 600
Compute:
scale = newWidth / 600
Clamp:
scale = Math.max(0.5, Math.min(scale, 2.5))
Store:
updateProps(el.id, {
width: newWidth,
fontScale: scale
})
3. Update HeroElement.jsx (critical)
Find where text_block lines are rendered.
Currently font size is:
line.fontSize
Replace with:
const scale = element.props?.fontScale ?? 1
const size = Math.round((line.fontSize || 18) * scale)
Then apply:
style={{ fontSize: size }}
4. Ensure resize updates live
Font scaling must update:
while dragging resize handle
not only on mouse release
No debounce delay.
If a line explicitly defines:
line.fontSize
it should still be treated as the BASE size before scaling.
clamp fontScale between 0.5 and 2.5
prevent NaN values
do not break non-text elements
do not modify drag logic
🎯 ACCEPTANCE CRITERIA
After changes:
Resizing a text_block changes font size visually in real time
Smaller box → smaller text
Larger box → larger text
Text remains proportional to original design
No flicker or layout instability
Other element types unaffected
🧠 IMPORTANT CONTEXT
This is part of a larger hero page builder that already behaves like a canvas editor. This change is strictly about making text behave like a WYSIWYG design element (similar to Canva/Figma text boxes).
Do not refactor unrelated systems.