feat(input): show per-element hint in empty Placeholder field#67
Merged
Conversation
Every input variant factory in `default-blocks.ts` shipped with a canned `placeholder.text` (e.g. "Enter some text", "name@example.com"). When the user opened the Edit Input panel, that same string appeared twice on screen at once — once as the value of the editor's Placeholder field, and again as the placeholder overlay slack-blocks-to-jsx renders inside the preview textarea — which read as a bug. Drop the placeholder defaults from every input variant in both `defaultPalette` and `legacyInputVariants`, and instead surface a per-element-type example as the editor Input's own `placeholder=` attribute via a new `example` prop on the shared `PlaceholderField`. This matches how every other editor field already gives a hint (`placeholder="e.g. Email address"`, etc.) and how Slack's own Block Kit Builder behaves out of the box. Section/Actions accessory placeholders are left as-is because those editors don't expose a Placeholder field, so they can't manifest the duplication. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
block-kitchen | 20dd043 | Commit Preview URL Branch Preview URL |
May 17 2026, 03:25 PM |
Reverts the `default-blocks.ts` half of the previous commit. The
factory-supplied `placeholder.text` strings are kept after all: the
primary use of block-kitchen is producing JSON the user copies into
their Slack app, and shipping a fully-populated placeholder gives
customers a working starting point they can edit rather than an empty
field they must remember to fill in.
What the previous commit perceived as a duplication bug ("same string
in the editor field and the preview overlay at once") is just the
editor honestly reflecting the model: the form shows the current
value, the preview renders it. They're supposed to match.
Keeps the `PlaceholderField` `example` prop and per-call-site hints
from the previous commit — those now serve as the greyed `e.g. ...`
hint that appears only when the user has cleared the placeholder
value, so the editor still has a useful affordance when empty without
hiding any model state.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
zhawtof
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Add an
exampleprop to the sharedPlaceholderFieldininput-editor.tsxso each input element type shows a per-type greyede.g. …hint when the editor's Placeholder field is empty.Why
When a customer drops in an input block, the factory still pre-populates
placeholder.text("Enter some text","name@example.com","Select a date", etc.) — keeping that default is the point of the tool, since the primary output is JSON the customer copies into their Slack app. But if the customer clears the placeholder, the editor field went blank with no affordance for what to type back.Now: when the field is empty, an
e.g. …hint appears (matching the convention every other field in the editor — Label, Action ID, Min/Max, etc. — already uses). When the field has a value (the factory default or anything the user typed), the hint is hidden and the value shows normally. No behavior change in the exported JSON.Files touched
src/components/editors/input-editor.tsx—PlaceholderFieldaccepts an optionalexampleprop, threaded through 17 call sites with element-type-appropriate examples. The plain-text editor toggles between"e.g. Enter some text"and"e.g. Enter a longer description"based onelement.multiline.History (in case the commit log is confusing)
This PR has two commits:
default-blocks.ts, on the theory that the editor field and preview overlay showing the same string looked like a bug.PlaceholderFieldexample-prop infrastructure from commit 1 is kept, since it's a strict UX improvement.Net diff vs main:
input-editor.tsxonly.Test plan
pnpm typecheckpnpm lintpnpm test(211/211)e.g. …hint.🤖 Generated with Claude Code