Release v1.1.6 - Render form description as markdown

- Fix #63: form description on the public response page now renders
  as markdown instead of plain text — headings, lists, links and
  inline formatting display correctly
- Add explicit typography styles for h1-h6, lists, links, code,
  blockquotes in the in-editor preview, section descriptions and
  the form description so they survive Nextcloud's CSS resets

Author: Sam428-png

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to FormVox will be documented in this file.
 
+## [1.1.6] - 2026-05-05
+
+### Fixed
+- **Form description rendered as plain text on the public form** — The form description on the public response page now renders as markdown instead of literal text with the raw `#`/`*` characters and collapsed newlines. Headings, lists, links, code, and blockquotes in the form description, section descriptions, and the in-editor markdown preview all render with proper visual styling. ([#63](https://github.com/nextcloud/formvox/issues/63))
+
 ## [1.1.5] - 2026-05-04
 
 ### Added

appinfo/info.xml

@@ -35,7 +35,7 @@
 * Expense declarations
 * Data collection with privacy requirements
     ]]></description>
-    <version>1.1.5</version>
+    <version>1.1.6</version>
     <licence>agpl</licence>
     <author mail="info@voxcommons.com">Sam Ditmeijer</author>
     <author mail="info@voxcommons.com">Rik Dekker</author>

js/formvox-editor.js

@@ -1,6 +1,6 @@
 {
   "name": "formvox",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "File-based forms and polls for Nextcloud",
   "scripts": {
     "build": "webpack",

js/formvox-public.js

@@ -281,6 +281,21 @@ export default {
     .editor-preview, .editor-preview-side {
       background: var(--color-main-background);
       color: var(--color-main-text);
+      padding: 12px 16px;
+
+      h1 { font-size: 1.6em; font-weight: 700; margin: 0.5em 0 0.3em; }
+      h2 { font-size: 1.35em; font-weight: 700; margin: 0.5em 0 0.3em; }
+      h3 { font-size: 1.15em; font-weight: 700; margin: 0.5em 0 0.3em; }
+      h4, h5, h6 { font-weight: 700; margin: 0.5em 0 0.3em; }
+      p { margin: 0.4em 0; }
+      ul { list-style: disc; padding-left: 1.5em; margin: 0.4em 0; }
+      ol { list-style: decimal; padding-left: 1.5em; margin: 0.4em 0; }
+      li { margin: 0.2em 0; }
+      a { color: var(--color-primary-element); text-decoration: underline; }
+      code { background: var(--color-background-hover); padding: 2px 4px; border-radius: 3px; font-family: monospace; }
+      pre { background: var(--color-background-hover); padding: 8px; border-radius: 4px; overflow-x: auto; }
+      blockquote { border-left: 3px solid var(--color-border); padding-left: 12px; color: var(--color-text-maxcontrast); margin: 0.4em 0; }
+      img { max-width: 100%; height: auto; }
     }
   }
 }

package.json

@@ -68,7 +68,7 @@
 
       <div class="form-header">
         <h1>{{ form.title }}</h1>
-        <p v-if="form.description" class="form-description">{{ form.description }}</p>
+        <div v-if="form.description" class="form-description" v-html="renderMarkdown(form.description)" />
       </div>
 
       <div
@@ -1153,9 +1153,37 @@ export default {
     color: var(--color-text-maxcontrast);
     font-size: 16px;
     margin: 0;
+
+    h1 { font-size: 1.6em; font-weight: 700; margin: 0.5em 0 0.3em; color: var(--color-main-text); }
+    h2 { font-size: 1.35em; font-weight: 700; margin: 0.5em 0 0.3em; color: var(--color-main-text); }
+    h3 { font-size: 1.15em; font-weight: 700; margin: 0.5em 0 0.3em; color: var(--color-main-text); }
+    h4, h5, h6 { font-weight: 700; margin: 0.5em 0 0.3em; color: var(--color-main-text); }
+    p { margin: 0.4em 0; }
+    ul { list-style: disc; padding-left: 1.5em; margin: 0.4em 0; }
+    ol { list-style: decimal; padding-left: 1.5em; margin: 0.4em 0; }
+    li { margin: 0.2em 0; }
+    a { color: var(--color-primary-element); text-decoration: underline; }
+    code { background: var(--color-background-hover); padding: 2px 4px; border-radius: 3px; font-family: monospace; }
+    pre { background: var(--color-background-hover); padding: 8px; border-radius: 4px; overflow-x: auto; }
+    blockquote { border-left: 3px solid var(--color-border); padding-left: 12px; margin: 0.4em 0; }
   }
 }
 
+.section-description {
+  h1 { font-size: 1.6em; font-weight: 700; margin: 0.5em 0 0.3em; }
+  h2 { font-size: 1.35em; font-weight: 700; margin: 0.5em 0 0.3em; }
+  h3 { font-size: 1.15em; font-weight: 700; margin: 0.5em 0 0.3em; }
+  h4, h5, h6 { font-weight: 700; margin: 0.5em 0 0.3em; }
+  p { margin: 0.4em 0; }
+  ul { list-style: disc; padding-left: 1.5em; margin: 0.4em 0; }
+  ol { list-style: decimal; padding-left: 1.5em; margin: 0.4em 0; }
+  li { margin: 0.2em 0; }
+  a { color: var(--color-primary-element); text-decoration: underline; }
+  code { background: var(--color-background-hover); padding: 2px 4px; border-radius: 3px; font-family: monospace; }
+  pre { background: var(--color-background-hover); padding: 8px; border-radius: 4px; overflow-x: auto; }
+  blockquote { border-left: 3px solid var(--color-border); padding-left: 12px; margin: 0.4em 0; }
+}
+
 .page-indicator {
   text-align: center;
   color: var(--color-text-maxcontrast);