@commonpub/layer 0.74.0 → 0.75.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/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.75.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/config": "0.22.1",
-    "@commonpub/protocol": "0.13.0",
-    "@commonpub/explainer": "0.7.15",
-    "@commonpub/schema": "0.41.0",
-    "@commonpub/learning": "0.5.2",
-    "@commonpub/ui": "0.13.1",
-    "@commonpub/server": "2.84.1",
     "@commonpub/auth": "0.8.0",
     "@commonpub/docs": "0.6.3",
+    "@commonpub/learning": "0.5.2",
+    "@commonpub/server": "2.85.0",
     "@commonpub/theme-studio": "0.6.1",
-    "@commonpub/editor": "0.7.12"
+    "@commonpub/config": "0.22.1",
+    "@commonpub/explainer": "0.7.15",
+    "@commonpub/schema": "0.42.0",
+    "@commonpub/ui": "0.13.1",
+    "@commonpub/editor": "0.7.12",
+    "@commonpub/protocol": "0.13.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

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

@@ -29,6 +29,8 @@ function slugify(s: string): string {
 const subheading = ref('');
 const description = ref('');
 const rules = ref('');
+// Render mode for description/rules/prizes overview: Markdown (default) or raw HTML.
+const contentFormat = ref<'markdown' | 'html'>('markdown');
 const bannerUrl = ref('');
 const coverImageUrl = ref('');
 const startDate = ref('');
@@ -86,6 +88,7 @@ watch(contest, (c) => {
   subheading.value = c.subheading ?? '';
   description.value = c.description ?? '';
   rules.value = c.rules ?? '';
+  contentFormat.value = (c.contentFormat 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 +127,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, contentFormat, bannerUrl, coverImageUrl, startDate, endDate, judgingEndDate,
     communityVotingEnabled, judgingVisibility, eligibleContentTypes, maxEntriesPerUser, visibility, visibleToRoles,
     showPrizes, stages, currentStageIdRef, prizesDescription, prizes, criteria],
   () => { if (!hydratingForm) formDirty.value = true; },
@@ -195,6 +198,7 @@ async function handleSave(): Promise<void> {
         subheading: subheading.value || undefined,
         description: description.value || undefined,
         rules: rules.value || undefined,
+        contentFormat: contentFormat.value,
         bannerUrl: bannerUrl.value || undefined,
         coverImageUrl: coverImageUrl.value || undefined,
         startDate: startDate.value ? new Date(startDate.value).toISOString() : undefined,
@@ -347,10 +351,21 @@ async function transitionStatus(newStatus: string): Promise<void> {
           <input v-model="subheading" type="text" maxlength="300" class="cpub-form-input" placeholder="One-line tagline shown in the contest header" />
           <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">Content format</label>
+          <div class="cpub-type-options" role="radiogroup" aria-label="Content format">
+            <label class="cpub-form-check"><input v-model="contentFormat" type="radio" value="markdown" /> <span>Markdown</span></label>
+            <label class="cpub-form-check"><input v-model="contentFormat" type="radio" value="html" /> <span>Full HTML</span></label>
+          </div>
+          <p class="cpub-form-hint">
+            Applies to Description, Rules, and the Prizes overview. <strong>Markdown</strong> supports headings, lists, links, and safe inline HTML.
+            <strong>Full HTML</strong> renders your raw HTML, CSS, and SVG as-is (scripts and event handlers are removed for safety).
+          </p>
+        </div>
         <div class="cpub-form-field">
           <label class="cpub-form-label">Description</label>
           <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">{{ contentFormat === 'html' ? 'Rendered as full HTML/CSS/SVG.' : '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>

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?.contentFormat" />
                 <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?.contentFormat" />
           </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?.contentFormat" />
           </div>
 
           <!-- ENTRIES -->

package/pages/contests/create.vue

@@ -20,6 +20,7 @@ watch(title, (t) => { if (!slugTouched.value) slug.value = slugify(t); });
 const subheading = ref('');
 const description = ref('');
 const rules = ref('');
+const contentFormat = ref<'markdown' | 'html'>('markdown');
 const bannerUrl = ref('');
 const coverImageUrl = ref('');
 const startDate = ref('');
@@ -110,6 +111,7 @@ async function handleCreate(): Promise<void> {
         subheading: subheading.value || undefined,
         description: description.value || undefined,
         rules: rules.value || undefined,
+        contentFormat: contentFormat.value,
         bannerUrl: bannerUrl.value || undefined,
         coverImageUrl: coverImageUrl.value || undefined,
         startDate: new Date(startDate.value).toISOString(),
@@ -185,10 +187,21 @@ function prizeLabel(prize: Prize): string {
           <input id="contest-subheading" v-model="subheading" type="text" maxlength="300" class="cpub-form-input" placeholder="One-line tagline shown in the contest header" />
           <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">Content format</label>
+          <div class="cpub-type-options" role="radiogroup" aria-label="Content format">
+            <label class="cpub-form-check"><input v-model="contentFormat" type="radio" value="markdown" /> <span>Markdown</span></label>
+            <label class="cpub-form-check"><input v-model="contentFormat" type="radio" value="html" /> <span>Full HTML</span></label>
+          </div>
+          <p class="cpub-form-hint">
+            Applies to Description, Rules, and the Prizes overview. <strong>Markdown</strong> supports headings, lists, links, and safe inline HTML.
+            <strong>Full HTML</strong> renders your raw HTML, CSS, and SVG as-is (scripts and event handlers are removed for safety).
+          </p>
+        </div>
         <div class="cpub-form-field">
           <label for="contest-desc" class="cpub-form-label">Description</label>
           <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">{{ contentFormat === 'html' ? 'Rendered as full HTML/CSS/SVG.' : '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>