Shortcode Implementation Status: Wizard V2
This document tracks the visual representation of custom shortcodes within the Toast UI WYSIWYG editor via the widgetRules API.
Currently Implemented
| Shortcode | Visual Treatment in Editor | Notes |
|---|---|---|
[redact] |
Solid Black Bar | Provides immediate visual feedback of redacted content. |
[image] |
Metadata Badge | Shows camera icon + Alt/Caption + Size/Class metadata. |
[link] |
Link Badge | Shows a blue link icon and the linked text. |
[quote] |
Gray Badge (Basic) | Currently a simple "Quote Block" indicator. Needs more "stunning" treatment. |
Pending Implementation (Backlog)
The following shortcodes are handled by the backend (ShortcodeProcessor.php) but currently appear as raw text in the Wizard v2 editor:
Structural Elements
[figure]: Similar to[image]but often wraps inner content. Needs a visual block treatment.[typewriter],[sidebar],[note]: These are "alternate font" blocks. We could potentially apply a different font-family (monospaced) to these widgets.[infobox],[info]: These are warning/info boxes. Could be rendered with a dashed border and an info icon.[component]: A generic wrapper for specialized UI components (team bio, CTA, etc.).
Inline Styling
[align]: Centers or right-aligns text.[highlight],[color],[span]: These carry specificintentorcolorattributes.[redact](already done, but a good template for the others).
Future Visual Enhancements
1. Refined [quote] Widget
Instead of a small badge, we can render [quote] as a subtle blockquote with the author attribution visible in a "signature" style within the editor.
2. Live Hero/Cover Detection
In the editor, we can highlight if a path mentioned in an [image] or [figure] tag matches the currently assigned Hero or Cover image for the dossier.
3. "Stunning" Inline Styles
For [highlight] and [color], we can parse the attributes and apply the actual colors and intents directly to the widget in the WYSIWYG view, mirroring the final blog look.
4. Interactive Modals
The long-term vision is that clicking one of these widgets (especially [image]) will open a modal to edit its attributes (alt, caption, size) without touching the Markdown syntax manually.