Inline Suggestion Card
Text editor surface showing an AI ghost-text completion with Tab to accept and Esc to dismiss keyboard hints and an authorship notice.
Text editor surface showing an AI ghost-text completion with Tab to accept and Esc to dismiss keyboard hints and an authorship notice.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Inline Suggestion Card is the ghost-text accept pattern: an editor surface for an H2 Strategy Update draft shows the user typed text in foreground weight followed by the AI completion in muted italic, strengthening our integration ecosystem by partnering with three new platforms before year end, with a blinking cursor at the end. Tab to accept and Esc to dismiss are rendered as keyboard badges in the action bar. An authorship note below reads: Suggestions are drafts only. You are the author. Review every accepted completion before publishing.
TYPED and SUGGESTION are string constants; the ghost span and cursor are plain inline elements so the open state is a faithful static representation of the real interaction.
Reach for this block in a text editor or rich document feature where an AI writes a completion for the user to accept or discard. Wire Tab and Esc to your suggestion accept and clear handlers and swap the SUGGESTION constant for your model response.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the inline document compose helper. Other suggestion surfaces:
Tip: the authorship note is the line that keeps the feature honest; omitting it shifts perceived responsibility to the AI and that matters when the text will be published.