@record-evolution/widget-markdown 1.0.9 → 1.0.10

package/package.json

@@ -3,7 +3,7 @@
     "description": "Webcomponent widget-markdown following open-wc recommendations",
     "license": "MIT",
     "author": "widget-markdown",
-    "version": "1.0.9",
+    "version": "1.0.10",
     "engines": {
         "node": ">=24.9.0",
         "npm": ">=10.0.2"

package/src/definition-schema.d.ts

@@ -21,6 +21,10 @@ export type Variables = {
   value?: Value;
   [k: string]: unknown;
 }[];
+/**
+ * When enabled, content taller than the widget can be scrolled vertically and a scrollbar appears. When disabled (the default), the content is clipped at the bottom edge and cannot be scrolled — keep it off for short text that should always be fully visible, turn it on for long documents.
+ */
+export type EnableVerticalScrolling = boolean;
 
 /**
  * A markdown rendering widget for displaying formatted text with dynamic variable substitution. Use this widget for documentation, instructions, dynamic reports, or any rich text content on dashboards. Supports full Markdown syntax including headers, lists, tables, links, and code blocks. Variables can be embedded using {{variableName}} notation and bound to data sources for real-time updates. Ideal for creating contextual help, status summaries, or narrative text that incorporates live data values.
@@ -28,6 +32,7 @@ export type Variables = {
 export interface MarkdownConfiguration {
   markdown?: Markdown;
   data?: Variables;
+  verticalScroll?: EnableVerticalScrolling;
   [k: string]: unknown;
 }
 /**

package/src/definition-schema.json

@@ -45,6 +45,13 @@
                     }
                 }
             }
+        },
+        "verticalScroll": {
+            "title": "Enable Vertical Scrolling",
+            "description": "When enabled, content taller than the widget can be scrolled vertically and a scrollbar appears. When disabled (the default), the content is clipped at the bottom edge and cannot be scrolled — keep it off for short text that should always be fully visible, turn it on for long documents.",
+            "order": 3,
+            "dataDrivenDisabled": true,
+            "type": "boolean"
         }
     }
 }

package/src/widget-markdown.ts

@@ -111,6 +111,14 @@ export class WidgetMarkdown extends LitElement {
         super.updated(changedProperties)
 
         if (changedProperties.has('inputData')) {
+            // A wrapper left scrolled down stays scrolled once scrolling is switched
+            // off — overflow: hidden only stops the *user* from scrolling back. Reset
+            // it so turning the setting off always shows the top of the document.
+            if (!this.inputData?.verticalScroll) {
+                const wrapper = this.shadowRoot?.querySelector('.wrapper')
+                if (wrapper) wrapper.scrollTop = 0
+            }
+
             // Update only the variable spans
             const varSpans = this.shadowRoot?.querySelectorAll('.md-var')
             varSpans?.forEach((span) => {
@@ -158,7 +166,10 @@ export class WidgetMarkdown extends LitElement {
                 flex-direction: column;
                 width: 100%;
                 height: 100%;
-                overflow: auto;
+                overflow-x: auto;
+                /* Vertical scrolling is opt-in via the verticalScroll setting; by
+                   default overlong content is clipped rather than scrollable. */
+                overflow-y: hidden;
                 padding: 1cqh 1cqw;
                 box-sizing: border-box;
                 /* Derive scrollbar colors from the (inherited) text color so they
@@ -186,6 +197,10 @@ export class WidgetMarkdown extends LitElement {
                 background-color: color-mix(in srgb, currentColor 55%, transparent);
             }
 
+            .wrapper[scrollable] {
+                overflow-y: auto;
+            }
+
             h2 {
                 margin: 0;
                 padding: 0px;
@@ -222,7 +237,11 @@ export class WidgetMarkdown extends LitElement {
         }
 
         return html`
-            <div class="wrapper" style="background-color: ${this.themeBgColor}">
+            <div
+                class="wrapper"
+                ?scrollable=${this.inputData?.verticalScroll}
+                style="background-color: ${this.themeBgColor}"
+            >
                 <div class="paging markdown-body" ?active=${this.inputData?.markdown}>
                     ${unsafeHTML(this.cachedHtmlTemplate ?? '')}
                 </div>