---
title: Shortcode Implementation Status: Wizard v2
date: unknown
---

# Shortcode Implementation Status: Wizard V2

# 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 specific `intent` or `color` attributes.
- **`[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.