Edit lowercase b/i pairs and inspect a stack-checked preview. Structural errors retain the entire input literally; unsupported tags remain text with a notice.
Declare the small tag contract
The example supports only the lowercase, attribute-free pairs [b]/[/b] and [i]/[/i]. They must be balanced and properly nested. This limited contract lets the reader see exactly what has been checked.
CKEditor's BBCode documentation distinguishes BBCode output from HTML and notes that implementations vary across platforms. Its editor/plugin setup is not required for this independent example. BBCode output and platform differences
Keep an acceptance table beside the raw field:
| Raw case | Expected local treatment |
|---|---|
[b][i]Draft[/i][/b] |
Valid nesting: italic content inside bold content |
[b][i]Draft[/b][/i] |
Structure error: crossing closing tags |
[b]Draft |
Structure error: missing closing tag |
[spoiler]Draft[/spoiler] |
Unsupported tags retained as literal text, with a notice |
The unknown spoiler case is not a statement that no forum supports spoilers. It means this particular example does not. Attribute-bearing or uppercase forms likewise sit outside its declared support. Check a real forum's help before assuming that a tag unsupported here is unavailable there, or vice versa.
Report the mismatch without rewriting the source
For the crossing case, read the opening tags in order: b, then i. The next valid closing tag would be i, but the source closes b first. That gives the reader a specific mismatch to correct.
On a structural error, keep the raw input unchanged and show the entire input as literal text in the preview, with a diagnostic. Do not silently append closing tags, delete an unexpected token, or partially format the input into something that hides the mismatch. After the author corrects the source, a fresh check can evaluate the corrected version.
Treat HTML-looking input as text
The input might include the literal string <img src=x onerror=alert(1)>. The preview must display those characters as text. It must not create an image, fetch its source, or execute the event handler. That string is an inspection case here, not an instruction to run it.
Before pasting, compare the raw field with the structural preview line by line. A valid local nesting result does not add support for links, images, colors, or a forum-specific extension. Keep unsupported tag text intact so the destination preview can show how that forum handles it. Correct a crossing closing tag in the raw source, then run the check again; never copy a repaired-looking preview as a replacement source.
Try the worked example
Check the default post, try crossing closing tags, then correct the order. HTML-looking input stays visible characters. Select the raw field and copy it through your normal command; the preview is not the source to paste. The raw BBCode remains the authoritative post record.
Only the declared b/i subset is supported. No posting, saving, download, or target-forum parsing guarantee is provided.
Recreate this example
Build one complete self-contained HTML page for this task: edit b/i BBCode safely while preserving raw post text.
Use these exact original practice data and worked expectations: The default draft has two lines: [b]Workshop notes[/b] and [i]Bring a draft.[/i]. Check lowercase b/i pairs before previewing. Nested [b][i]Draft[/i][/b] is valid; crossing [b][i]Draft[/b][/i] fails. Unsupported spoiler tags remain literal. Limits: 10,000 UTF-16 code units and nesting depth 16.
Implement the following useful local interactions: Textarea,Check and Select raw text. Precheck balance/nesting before controlled strong/em/text node rendering. Raw HTML stays text. Any error shows entire input literally. Edits clear stale preview. Manual copying only, no clipboard success claim. Preserve the supplied source text and distinguish an uncomputed state, a successful local result, and an invalid or incomplete input. Update output only from the current input snapshot. An input edit must retire stale feedback until the reader runs the relevant action again. Do not silently invent missing values or replace a failing case with a success.
Design the page as a compact source-and-result developer workbench with readable code, labeled inputs, and a separate explanation area. Put a compact task heading, actual sample data, the main result, and usable controls early enough to be useful on a narrow screen. Use readable text of at least 16px, generous paragraph spacing, strong contrast, native labels, accessible buttons, and visible keyboard focus. Stack long records at 360px and wrap code without page-level horizontal overflow.
Use type=button and explicit querySelector-based click handlers rather than relying on form submission. If Enter is useful, handle it only on the relevant input and ignore isComposing. Keep effects within this open page; no remote dependencies, network calls, persistence, fake downloads, or automated sending. Only the declared b/i subset is supported. No posting, saving, download, or target-forum parsing guarantee is provided. Place worked explanations beside their data and identify teacher or synthetic examples clearly. Output only the complete HTML document, with inline styles and script and LF line endings.
Review the bounded BBCode structural editor in NOS
Use the destination forum’s actual preview before posting the copied source. Use the tag-contract explanation in NOS to review a crossing-tag example beside its correction, and revise eligible static usage instructions in visual editing mode if the closing order is unclear.