@commonpub/layer 0.74.0 → 0.76.0

package/components/CpubMarkdown.vue

@@ -11,16 +11,27 @@
  */
 import { markdownToBlockTuples } from '@commonpub/editor';
 import type { BlockTuple } from '@commonpub/editor';
+import { sanitizeRichHtml } from '../composables/useSanitize';
 
 const props = defineProps<{
   /** Markdown source (may contain inline/block HTML — passed through). */
   source?: string | null;
+  /**
+   * Render mode. `markdown` (default) runs the Markdown pipeline; `html` renders
+   * the source as the author's raw HTML through the permissive (script-free)
+   * sanitizer. The HTML path is also cheaper, so large bodies render instantly
+   * (no synchronous Markdown parse) on both SSR and client.
+   */
+  format?: 'markdown' | 'html' | null;
 }>();
 
 const trimmed = computed(() => (props.source ?? '').trim());
+const isHtml = computed(() => props.format === 'html');
+
+const richHtml = computed(() => (isHtml.value && trimmed.value ? sanitizeRichHtml(trimmed.value) : ''));
 
 const blocks = computed<BlockTuple[]>(() => {
-  if (!trimmed.value) return [];
+  if (isHtml.value || !trimmed.value) return [];
   try {
     return markdownToBlockTuples(trimmed.value);
   } catch {
@@ -30,8 +41,11 @@ const blocks = computed<BlockTuple[]>(() => {
 </script>
 
 <template>
+  <!-- eslint-disable vue/no-v-html -- author HTML, sanitized via sanitizeRichHtml (script-free allowlist) -->
+  <div v-if="isHtml && richHtml" class="cpub-md cpub-md-html" v-html="richHtml" />
+  <!-- eslint-enable vue/no-v-html -->
   <BlocksBlockContentRenderer
-    v-if="blocks.length"
+    v-else-if="blocks.length"
     :blocks="(blocks as [string, Record<string, unknown>][])"
     class="cpub-prose cpub-md"
   />

package/components/FormatToggle.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+/**
+ * Compact Markdown / HTML segmented toggle for a single rich-text field.
+ * Used inline beside a field label so each field's render mode is set
+ * independently. `html` mode renders the author's raw HTML (script-free).
+ */
+const model = defineModel<'markdown' | 'html'>({ default: 'markdown' });
+</script>
+
+<template>
+  <div class="cpub-fmt-toggle" role="radiogroup" aria-label="Field format">
+    <button
+      type="button"
+      class="cpub-fmt-opt"
+      :class="{ 'cpub-fmt-active': model === 'markdown' }"
+      :aria-pressed="model === 'markdown'"
+      @click="model = 'markdown'"
+    >Markdown</button>
+    <button
+      type="button"
+      class="cpub-fmt-opt"
+      :class="{ 'cpub-fmt-active': model === 'html' }"
+      :aria-pressed="model === 'html'"
+      @click="model = 'html'"
+    >HTML</button>
+  </div>
+</template>
+
+<style scoped>
+.cpub-fmt-toggle {
+  display: inline-flex;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface2);
+}
+.cpub-fmt-opt {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 3px 10px;
+  background: transparent;
+  color: var(--text-faint);
+  border: none;
+  cursor: pointer;
+}
+.cpub-fmt-opt + .cpub-fmt-opt {
+  border-left: var(--border-width-default) solid var(--border);
+}
+.cpub-fmt-active {
+  background: var(--accent);
+  color: var(--accent-contrast, #fff);
+}
+.cpub-fmt-opt:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+</style>

package/components/contest/ContestPrizes.vue

@@ -2,8 +2,9 @@
 interface Prize { place?: number; category?: string; title?: string; description?: string; value?: string }
 defineProps<{
   prizes: Prize[];
-  /** Optional Markdown intro shown above the prize cards (section-level, not per-prize). */
+  /** Optional intro shown above the prize cards (section-level, not per-prize). */
   description?: string | null;
+  format?: 'markdown' | 'html' | null;
 }>();
 
 function prizeLabel(prize: Prize): string {
@@ -37,7 +38,7 @@ function prizeIcon(prize: Prize): string {
     <div class="cpub-sec-head">
       <h2><i class="fa fa-trophy" style="color: var(--yellow);"></i> Prizes</h2>
     </div>
-    <CpubMarkdown v-if="description" :source="description" class="cpub-prizes-intro" />
+    <CpubMarkdown v-if="description" :source="description" :format="format" class="cpub-prizes-intro" />
     <div v-if="prizes.length" class="cpub-prize-grid">
       <div
         v-for="(prize, i) in prizes"

package/components/contest/ContestRules.vue

@@ -8,6 +8,7 @@
  */
 defineProps<{
   rules: string;
+  format?: 'markdown' | 'html' | null;
 }>();
 </script>
 
@@ -17,7 +18,7 @@ defineProps<{
       <h2><i class="fa fa-file-lines" style="color: var(--purple);"></i> Rules</h2>
     </div>
     <div class="cpub-rules-card">
-      <CpubMarkdown :source="rules" />
+      <CpubMarkdown :source="rules" :format="format" />
     </div>
   </div>
 </template>

package/composables/useSanitize.ts

@@ -115,7 +115,127 @@ export function sanitizeBlockHtml(html: string): string {
   return result;
 }
 
+// ---------------------------------------------------------------------------
+// Rich HTML mode (the opt-in "Full HTML" content format, e.g. contest pages).
+//
+// A deliberately PERMISSIVE but still DEFAULT-DENY allowlist: it renders an
+// author's presentational HTML verbatim — layout tags, inline CSS, SVG icons —
+// while never permitting script execution. Anything not on the allowlist is
+// dropped, so `<script>`, `<iframe>`, `<object>`, `<style>`, `on*` handlers and
+// `javascript:` URLs cannot get through. Authoring is gated to trusted
+// (staff/admin) contest creators and is opt-in per contest. Tag/attr NAME case
+// is preserved on output so case-sensitive SVG names (viewBox, linearGradient)
+// survive. The `style` attribute is allowed but its value is scrubbed of the
+// exfil/script vectors (url(), expression(), javascript:, @import, behavior).
+// ---------------------------------------------------------------------------
+
+const RICH_ALLOWED_ELEMENTS = new Set([
+  'div', 'section', 'article', 'aside', 'header', 'footer', 'main', 'nav', 'figure', 'figcaption', 'address',
+  'p', 'span', 'br', 'hr', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+  'blockquote', 'pre', 'code', 'kbd', 'samp', 'var', 'cite', 'q', 'wbr', 'small', 'mark', 'abbr', 'time', 'sub', 'sup',
+  'em', 'strong', 'b', 'i', 'u', 's', 'del', 'ins',
+  'ul', 'ol', 'li', 'dl', 'dt', 'dd',
+  'a', 'img', 'picture', 'source',
+  'table', 'caption', 'colgroup', 'col', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td',
+  'details', 'summary', 'button',
+  // SVG (lowercased for the allowlist check; original case preserved on output)
+  'svg', 'g', 'path', 'circle', 'ellipse', 'line', 'polyline', 'polygon', 'rect', 'defs',
+  'lineargradient', 'radialgradient', 'stop', 'text', 'tspan', 'use', 'symbol', 'clippath', 'mask', 'pattern', 'marker',
+]);
+
+// Attributes allowed on any rich element (lowercased). `aria-*`/`data-*` are
+// allowed by prefix; per-tag extras and `style` are handled separately.
+const RICH_GLOBAL_ATTRS = new Set([
+  'class', 'id', 'title', 'role', 'lang', 'dir', 'slot', 'tabindex', 'hidden', 'datetime', 'open',
+  // SVG presentation
+  'viewbox', 'xmlns', 'version', 'preserveaspectratio', 'transform', 'opacity',
+  'fill', 'fill-opacity', 'fill-rule', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin',
+  'stroke-dasharray', 'stroke-dashoffset', 'stroke-opacity', 'stroke-miterlimit', 'clip-rule', 'clip-path', 'mask',
+  'cx', 'cy', 'r', 'rx', 'ry', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'dx', 'dy', 'd', 'points', 'width', 'height',
+  'offset', 'stop-color', 'stop-opacity', 'gradientunits', 'gradienttransform', 'spreadmethod', 'patternunits',
+  'text-anchor', 'dominant-baseline', 'font-size', 'font-family', 'font-weight', 'letter-spacing',
+  'marker-start', 'marker-mid', 'marker-end',
+]);
+
+const RICH_PER_TAG_ATTRS: Record<string, Set<string>> = {
+  a: new Set(['href', 'rel', 'target', 'name']),
+  img: new Set(['src', 'alt', 'loading', 'decoding']),
+  source: new Set(['type', 'media', 'sizes']),
+  td: new Set(['colspan', 'rowspan', 'headers']),
+  th: new Set(['colspan', 'rowspan', 'headers', 'scope']),
+  ol: new Set(['start', 'type', 'reversed']),
+  col: new Set(['span']),
+  colgroup: new Set(['span']),
+  button: new Set(['type']),
+  use: new Set(['href']),
+};
+
+const RICH_URL_ATTRS = new Set(['href', 'src', 'xlink:href']);
+// CSS constructs that can fetch, exfiltrate, or execute — stripped per-declaration.
+const STYLE_DECL_BLOCKLIST = /expression\s*\(|javascript:|vbscript:|behavior\s*:|-moz-binding|@import|url\s*\(/i;
+
+function sanitizeStyleAttr(value: string): string {
+  return value
+    .split(';')
+    .filter((decl) => decl.trim() && !STYLE_DECL_BLOCKLIST.test(decl))
+    .join(';');
+}
+
+/** Sanitize author HTML for "full HTML" rendering — permissive but script-free. */
+export function sanitizeRichHtml(html: string): string {
+  if (!html || typeof html !== 'string') return '';
+
+  let result = html.replace(/<!--[\s\S]*?-->/g, '');
+
+  // Remove raw-text / active elements WITH their contents, so script/style/embed
+  // bodies don't leak through as visible text or execute. The tag pass below
+  // also drops these by allowlist, but only the open/close tags — this strips
+  // the inner payload (e.g. `<script>code</script>` → '' rather than `code`).
+  result = result.replace(/<(script|style|noscript|template|iframe|object|embed)\b[^>]*>[\s\S]*?<\/\1>/gi, '');
+
+  result = result.replace(/<\/?([a-zA-Z][a-zA-Z0-9:-]*)\b([^>]*)?\/?>/g, (match, rawTag: string, attrs?: string) => {
+    const tag = rawTag.toLowerCase();
+    if (!RICH_ALLOWED_ELEMENTS.has(tag)) return '';
+    if (match.startsWith('</')) return `</${rawTag}>`;
+
+    const safeAttrs: string[] = [];
+    if (attrs) {
+      const attrRegex = /([a-zA-Z_:][\w:.-]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|(\S+)))?/g;
+      let attrMatch: RegExpExecArray | null;
+      while ((attrMatch = attrRegex.exec(attrs)) !== null) {
+        const rawName = attrMatch[1]!;
+        const name = rawName.toLowerCase();
+        const value = attrMatch[2] ?? attrMatch[3] ?? attrMatch[4] ?? '';
+
+        if (name.startsWith('on')) continue; // event handlers never allowed
+        const allowed =
+          name === 'style' ||
+          RICH_GLOBAL_ATTRS.has(name) ||
+          name.startsWith('aria-') ||
+          name.startsWith('data-') ||
+          (RICH_PER_TAG_ATTRS[tag]?.has(name) ?? false);
+        if (!allowed) continue;
+
+        if (RICH_URL_ATTRS.has(name) && !isSafeUrl(value)) continue;
+
+        if (name === 'style') {
+          const cleaned = sanitizeStyleAttr(value);
+          if (cleaned) safeAttrs.push(`style="${escapeAttrValue(cleaned)}"`);
+          continue;
+        }
+        safeAttrs.push(`${rawName}="${escapeAttrValue(value)}"`);
+      }
+    }
+
+    const attrsStr = safeAttrs.length > 0 ? ' ' + safeAttrs.join(' ') : '';
+    const selfClose = match.endsWith('/>') ? ' /' : '';
+    return `<${rawTag}${attrsStr}${selfClose}>`;
+  });
+
+  return result;
+}
+
 /** Composable wrapper for template use */
-export function useSanitize(): { sanitize: (html: string) => string } {
-  return { sanitize: sanitizeBlockHtml };
+export function useSanitize(): { sanitize: (html: string) => string; sanitizeRich: (html: string) => string } {
+  return { sanitize: sanitizeBlockHtml, sanitizeRich: sanitizeRichHtml };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.74.0",
+  "version": "0.76.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -53,17 +53,17 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
+    "@commonpub/auth": "0.8.0",
     "@commonpub/config": "0.22.1",
-    "@commonpub/protocol": "0.13.0",
-    "@commonpub/explainer": "0.7.15",
-    "@commonpub/schema": "0.41.0",
+    "@commonpub/docs": "0.6.3",
+    "@commonpub/editor": "0.7.12",
     "@commonpub/learning": "0.5.2",
+    "@commonpub/schema": "0.43.0",
+    "@commonpub/protocol": "0.13.0",
+    "@commonpub/server": "2.86.0",
     "@commonpub/ui": "0.13.1",
-    "@commonpub/server": "2.84.1",
-    "@commonpub/auth": "0.8.0",
-    "@commonpub/docs": "0.6.3",
-    "@commonpub/theme-studio": "0.6.1",
-    "@commonpub/editor": "0.7.12"
+    "@commonpub/explainer": "0.7.15",
+    "@commonpub/theme-studio": "0.6.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/contests/[slug]/edit.vue

@@ -29,6 +29,10 @@ function slugify(s: string): string {
 const subheading = ref('');
 const description = ref('');
 const rules = ref('');
+// Per-field render mode: Markdown (default) or raw HTML, independent per field.
+const descriptionFormat = ref<'markdown' | 'html'>('markdown');
+const rulesFormat = ref<'markdown' | 'html'>('markdown');
+const prizesDescriptionFormat = ref<'markdown' | 'html'>('markdown');
 const bannerUrl = ref('');
 const coverImageUrl = ref('');
 const startDate = ref('');
@@ -86,6 +90,9 @@ watch(contest, (c) => {
   subheading.value = c.subheading ?? '';
   description.value = c.description ?? '';
   rules.value = c.rules ?? '';
+  descriptionFormat.value = (c.descriptionFormat as 'markdown' | 'html') ?? 'markdown';
+  rulesFormat.value = (c.rulesFormat as 'markdown' | 'html') ?? 'markdown';
+  prizesDescriptionFormat.value = (c.prizesDescriptionFormat as 'markdown' | 'html') ?? 'markdown';
   bannerUrl.value = c.bannerUrl ?? '';
   coverImageUrl.value = c.coverImageUrl ?? '';
   startDate.value = c.startDate ? new Date(c.startDate).toISOString().slice(0, 16) : '';
@@ -124,7 +131,7 @@ watch(contest, (c) => {
 // Mark the form dirty on any post-hydration edit (gives the save bar its
 // "unsaved changes" cue). Worst case (timing) is a harmless early "dirty".
 watch(
-  [title, slugInput, subheading, description, rules, bannerUrl, coverImageUrl, startDate, endDate, judgingEndDate,
+  [title, slugInput, subheading, description, rules, descriptionFormat, rulesFormat, prizesDescriptionFormat, bannerUrl, coverImageUrl, startDate, endDate, judgingEndDate,
     communityVotingEnabled, judgingVisibility, eligibleContentTypes, maxEntriesPerUser, visibility, visibleToRoles,
     showPrizes, stages, currentStageIdRef, prizesDescription, prizes, criteria],
   () => { if (!hydratingForm) formDirty.value = true; },
@@ -195,6 +202,9 @@ async function handleSave(): Promise<void> {
         subheading: subheading.value || undefined,
         description: description.value || undefined,
         rules: rules.value || undefined,
+        descriptionFormat: descriptionFormat.value,
+        rulesFormat: rulesFormat.value,
+        prizesDescriptionFormat: prizesDescriptionFormat.value,
         bannerUrl: bannerUrl.value || undefined,
         coverImageUrl: coverImageUrl.value || undefined,
         startDate: startDate.value ? new Date(startDate.value).toISOString() : undefined,
@@ -348,14 +358,20 @@ async function transitionStatus(newStatus: string): Promise<void> {
           <p class="cpub-form-hint">Short plain-text tagline shown under the title in the hero. The Description below is the full body.</p>
         </div>
         <div class="cpub-form-field">
-          <label class="cpub-form-label">Description</label>
+          <div class="cpub-field-head">
+            <label class="cpub-form-label">Description</label>
+            <FormatToggle v-model="descriptionFormat" />
+          </div>
           <textarea v-model="description" class="cpub-form-textarea" rows="4" maxlength="50000" />
-          <p class="cpub-form-hint">Supports Markdown (headings, lists, bold, links) and inline HTML. Shown formatted on the contest page.</p>
+          <p class="cpub-form-hint">{{ descriptionFormat === 'html' ? 'Rendered as your raw HTML, CSS, and SVG (scripts removed for safety).' : 'Supports Markdown (headings, lists, bold, links) and inline HTML.' }} Shown formatted on the contest page.</p>
         </div>
         <div class="cpub-form-field">
-          <label class="cpub-form-label">Rules</label>
+          <div class="cpub-field-head">
+            <label class="cpub-form-label">Rules</label>
+            <FormatToggle v-model="rulesFormat" />
+          </div>
           <textarea v-model="rules" class="cpub-form-textarea" rows="6" maxlength="50000" placeholder="One rule per line, or full Markdown" />
-          <p class="cpub-form-hint">Supports Markdown. Plain one-rule-per-line text is rendered as a numbered list.</p>
+          <p class="cpub-form-hint">{{ rulesFormat === 'html' ? 'Rendered as your raw HTML, CSS, and SVG (scripts removed for safety).' : 'Supports Markdown. Plain one-rule-per-line text renders as a list.' }}</p>
         </div>
         <div class="cpub-form-field">
           <ImageUpload v-model="bannerUrl" purpose="banner" label="Banner Image" hint="Wide hero image across the top of the contest page (~4:1)." />
@@ -442,9 +458,12 @@ async function transitionStatus(newStatus: string): Promise<void> {
         <p v-if="!showPrizes" class="cpub-form-hint">The Prizes tab is hidden, any prizes below are saved but not shown to visitors.</p>
         <p class="cpub-form-hint">Every field is optional. Use <strong>place</strong> for ranked prizes, a <strong>category</strong> for themed awards, or just a <strong>description</strong>, whatever fits. Cash value is optional.</p>
         <div class="cpub-form-field">
-          <label class="cpub-form-label">Prizes overview (optional)</label>
-          <textarea v-model="prizesDescription" class="cpub-form-textarea" rows="3" maxlength="50000" placeholder="Intro shown above the prize cards. Supports Markdown." />
-          <p class="cpub-form-hint">Markdown intro displayed on the Prizes tab, above the individual prizes.</p>
+          <div class="cpub-field-head">
+            <label class="cpub-form-label">Prizes overview (optional)</label>
+            <FormatToggle v-model="prizesDescriptionFormat" />
+          </div>
+          <textarea v-model="prizesDescription" class="cpub-form-textarea" rows="3" maxlength="50000" placeholder="Intro shown above the prize cards." />
+          <p class="cpub-form-hint">{{ prizesDescriptionFormat === 'html' ? 'Rendered as your raw HTML, CSS, and SVG (scripts removed for safety).' : 'Markdown intro' }} displayed on the Prizes tab, above the individual prizes.</p>
         </div>
         <div v-for="(prize, i) in prizes" :key="i" class="cpub-prize-row">
           <div class="cpub-prize-header">
@@ -660,6 +679,7 @@ async function transitionStatus(newStatus: string): Promise<void> {
 .cpub-form-section { border: var(--border-width-default) solid var(--border); background: var(--surface); padding: 20px; box-shadow: var(--shadow-md); }
 .cpub-form-section-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
 .cpub-form-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
+.cpub-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
 .cpub-form-field:last-child { margin-bottom: 0; }
 .cpub-form-input, .cpub-form-textarea { width: 100%; padding: var(--space-2) var(--space-3); border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: var(--text-sm); font-family: var(--font-sans); }
 .cpub-form-input:focus, .cpub-form-textarea:focus { border-color: var(--accent); outline: none; box-shadow: var(--shadow-accent); }

package/pages/contests/[slug]/index.vue

@@ -7,7 +7,9 @@ const toast = useToast();
 const { extract: extractError } = useApiError();
 const { isAuthenticated, isAdmin, user } = useAuth();
 
-const { data: contest } = useLazyFetch(`/api/contests/${slug}`);
+// Blocking fetch (not lazy) so the description/rules render server-side and are
+// present on first paint — no empty flash while the client fetches + renders.
+const { data: contest } = await useFetch(`/api/contests/${slug}`);
 const { data: apiEntriesData, refresh: refreshEntries } = useLazyFetch<{ items: Serialized<ContestEntryItem>[]; total: number }>(`/api/contests/${slug}/entries`);
 const { data: judgesData, refresh: refreshJudges } = useLazyFetch<ContestJudgeItem[]>(`/api/contests/${slug}/judges`);
 
@@ -310,7 +312,7 @@ async function withdrawEntry(entryId: string): Promise<void> {
             <div class="cpub-about-section">
               <div class="cpub-sec-head"><h2><i class="fa fa-circle-info" style="color: var(--accent);"></i> About This Contest</h2></div>
               <div class="cpub-about-card">
-                <CpubMarkdown v-if="c?.description" :source="c.description" />
+                <CpubMarkdown v-if="c?.description" :source="c.description" :format="c?.descriptionFormat" />
                 <p v-else>No description available for this contest.</p>
               </div>
             </div>
@@ -319,12 +321,12 @@ async function withdrawEntry(entryId: string): Promise<void> {
 
           <!-- RULES -->
           <div v-show="activeTab === 'rules'" id="cpub-panel-rules" role="tabpanel" aria-labelledby="cpub-tab-rules" tabindex="0">
-            <ContestRules v-if="c?.rules" :rules="c.rules" />
+            <ContestRules v-if="c?.rules" :rules="c.rules" :format="c?.rulesFormat" />
           </div>
 
           <!-- PRIZES -->
           <div v-show="activeTab === 'prizes'" id="cpub-panel-prizes" role="tabpanel" aria-labelledby="cpub-tab-prizes" tabindex="0">
-            <ContestPrizes v-if="c?.showPrizes !== false && (c?.prizes?.length || c?.prizesDescription)" :prizes="c?.prizes ?? []" :description="c?.prizesDescription" />
+            <ContestPrizes v-if="c?.showPrizes !== false && (c?.prizes?.length || c?.prizesDescription)" :prizes="c?.prizes ?? []" :description="c?.prizesDescription" :format="c?.prizesDescriptionFormat" />
           </div>
 
           <!-- ENTRIES -->

package/pages/contests/create.vue

@@ -20,6 +20,9 @@ watch(title, (t) => { if (!slugTouched.value) slug.value = slugify(t); });
 const subheading = ref('');
 const description = ref('');
 const rules = ref('');
+const descriptionFormat = ref<'markdown' | 'html'>('markdown');
+const rulesFormat = ref<'markdown' | 'html'>('markdown');
+const prizesDescriptionFormat = ref<'markdown' | 'html'>('markdown');
 const bannerUrl = ref('');
 const coverImageUrl = ref('');
 const startDate = ref('');
@@ -110,6 +113,9 @@ async function handleCreate(): Promise<void> {
         subheading: subheading.value || undefined,
         description: description.value || undefined,
         rules: rules.value || undefined,
+        descriptionFormat: descriptionFormat.value,
+        rulesFormat: rulesFormat.value,
+        prizesDescriptionFormat: prizesDescriptionFormat.value,
         bannerUrl: bannerUrl.value || undefined,
         coverImageUrl: coverImageUrl.value || undefined,
         startDate: new Date(startDate.value).toISOString(),
@@ -186,14 +192,20 @@ function prizeLabel(prize: Prize): string {
           <p class="cpub-form-hint">Short plain-text tagline shown under the title in the hero. The Description below is the full body.</p>
         </div>
         <div class="cpub-form-field">
-          <label for="contest-desc" class="cpub-form-label">Description</label>
+          <div class="cpub-field-head">
+            <label for="contest-desc" class="cpub-form-label">Description</label>
+            <FormatToggle v-model="descriptionFormat" />
+          </div>
           <textarea id="contest-desc" v-model="description" class="cpub-form-textarea" rows="4" maxlength="50000" placeholder="Describe your contest. Supports Markdown, # headings, - lists, **bold**, [links](url)…" />
-          <p class="cpub-form-hint">Supports Markdown (headings, lists, bold, links) and inline HTML. Shown formatted on the contest page.</p>
+          <p class="cpub-form-hint">{{ descriptionFormat === 'html' ? 'Rendered as your raw HTML, CSS, and SVG (scripts removed for safety).' : 'Supports Markdown (headings, lists, bold, links) and inline HTML.' }} Shown formatted on the contest page.</p>
         </div>
         <div class="cpub-form-field">
-          <label for="contest-rules" class="cpub-form-label">Rules</label>
+          <div class="cpub-field-head">
+            <label for="contest-rules" class="cpub-form-label">Rules</label>
+            <FormatToggle v-model="rulesFormat" />
+          </div>
           <textarea id="contest-rules" v-model="rules" class="cpub-form-textarea" rows="6" maxlength="50000" placeholder="Contest rules and requirements. Supports Markdown, one rule per line, or full Markdown." />
-          <p class="cpub-form-hint">Supports Markdown. Plain one-rule-per-line text is rendered as a numbered list.</p>
+          <p class="cpub-form-hint">{{ rulesFormat === 'html' ? 'Rendered as your raw HTML, CSS, and SVG (scripts removed for safety).' : 'Supports Markdown. Plain one-rule-per-line text renders as a list.' }}</p>
         </div>
         <div class="cpub-form-field">
           <ImageUpload v-model="bannerUrl" purpose="banner" label="Banner Image" hint="Wide hero image across the top of the contest page (~4:1)." />
@@ -335,9 +347,12 @@ function prizeLabel(prize: Prize): string {
 
         <p class="cpub-form-hint">Contests don't need prizes, leave this empty to skip them entirely. If you do add prizes, every field is optional: use <strong>place</strong> for ranked prizes (1st/2nd/3rd), a <strong>category</strong> for themed awards (e.g. "Best in Show"), or just a <strong>description</strong>. Cash value is optional.</p>
         <div class="cpub-form-field">
-          <label for="prizes-desc" class="cpub-form-label">Prizes overview (optional)</label>
-          <textarea id="prizes-desc" v-model="prizesDescription" class="cpub-form-textarea" rows="3" maxlength="50000" placeholder="Intro shown above the prize cards. Supports Markdown." />
-          <p class="cpub-form-hint">Markdown intro displayed on the Prizes tab, above the individual prizes.</p>
+          <div class="cpub-field-head">
+            <label for="prizes-desc" class="cpub-form-label">Prizes overview (optional)</label>
+            <FormatToggle v-model="prizesDescriptionFormat" />
+          </div>
+          <textarea id="prizes-desc" v-model="prizesDescription" class="cpub-form-textarea" rows="3" maxlength="50000" placeholder="Intro shown above the prize cards." />
+          <p class="cpub-form-hint">{{ prizesDescriptionFormat === 'html' ? 'Rendered as your raw HTML, CSS, and SVG (scripts removed for safety).' : 'Markdown intro' }} displayed on the Prizes tab, above the individual prizes.</p>
         </div>
         <div v-for="(prize, idx) in prizes" :key="idx" class="cpub-prize-card">
           <div class="cpub-prize-header">
@@ -404,6 +419,7 @@ function prizeLabel(prize: Prize): string {
 .cpub-form-section-header .cpub-form-section-title { margin-bottom: 0; }
 
 .cpub-form-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
+.cpub-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
 .cpub-form-field:last-child { margin-bottom: 0; }
 .cpub-form-input, .cpub-form-textarea { width: 100%; padding: var(--space-2) var(--space-3); border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: var(--text-sm); font-family: var(--font-sans); }
 .cpub-form-input:focus, .cpub-form-textarea:focus { border-color: var(--accent); outline: none; box-shadow: var(--shadow-accent); }