@record-evolution/widget-markdown 1.0.9 → 1.0.11

package/dist/widget-markdown.js

@@ -5550,7 +5550,7 @@ te.registerLanguage("css", Ii);
 te.registerLanguage("plaintext", vi);
 let le = class extends qe {
   constructor() {
-    super(), this.version = "1.0.9", this.marked = new Yn(
+    super(), this.version = "1.0.11", this.marked = new Yn(
       hi({
         emptyLangClass: "hljs",
         langPrefix: "hljs language-",
@@ -5568,8 +5568,7 @@ let le = class extends qe {
     this.registerTheme(this.theme);
   }
   registerTheme(t) {
-    const e = getComputedStyle(this).getPropertyValue("--re-text-color").trim(), n = getComputedStyle(this).getPropertyValue("--re-tile-background-color").trim();
-    this.themeBgColor = n || this.theme?.theme_object?.backgroundColor, this.themeTitleColor = e || this.theme?.theme_object?.title?.textStyle?.color, this.themeSubtitleColor = e || this.theme?.theme_object?.title?.subtextStyle?.color || this.themeTitleColor;
+    this.themeBgColor = `var(--re-tile-background-color, ${this.theme?.theme_object?.backgroundColor || "transparent"})`, this.themeTitleColor = `var(--re-text-color, ${this.theme?.theme_object?.title?.textStyle?.color || "inherit"})`, this.themeSubtitleColor = `var(--re-text-color, ${this.theme?.theme_object?.title?.subtextStyle?.color || this.theme?.theme_object?.title?.textStyle?.color || "inherit"})`;
   }
   /**
    * Converts {{variableName}} to spans with data attributes for efficient updating.
@@ -5582,22 +5581,28 @@ let le = class extends qe {
    * Updates variable spans in the rendered DOM without recreating the entire structure.
    */
   updated(t) {
-    super.updated(t), t.has("inputData") && this.shadowRoot?.querySelectorAll(".md-var")?.forEach((n) => {
-      const o = n.getAttribute("data-var");
-      if (o) {
-        const s = this.inputData?.data?.find((i) => i.label === o)?.value;
-        if (s == null)
-          n.textContent = "";
-        else if (typeof s == "object")
-          try {
-            n.textContent = JSON.stringify(s);
-          } catch {
-            n.textContent = "";
-          }
-        else
-          n.textContent = String(s);
+    if (super.updated(t), t.has("inputData")) {
+      if (!this.inputData?.verticalScroll) {
+        const n = this.shadowRoot?.querySelector(".wrapper");
+        n && (n.scrollTop = 0);
       }
-    });
+      this.shadowRoot?.querySelectorAll(".md-var")?.forEach((n) => {
+        const o = n.getAttribute("data-var");
+        if (o) {
+          const s = this.inputData?.data?.find((i) => i.label === o)?.value;
+          if (s == null)
+            n.textContent = "";
+          else if (typeof s == "object")
+            try {
+              n.textContent = JSON.stringify(s);
+            } catch {
+              n.textContent = "";
+            }
+          else
+            n.textContent = String(s);
+        }
+      });
+    }
   }
   render() {
     const t = String(this.inputData?.markdown ?? "");
@@ -5607,7 +5612,11 @@ let le = class extends qe {
       this.cachedHtmlTemplate = this.marked.parse(e);
     }
     return fo`
-            <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}>
                     ${To(this.cachedHtmlTemplate ?? "")}
                 </div>
@@ -5636,7 +5645,10 @@ le.styles = [
                 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
@@ -5664,6 +5676,10 @@ le.styles = [
                 background-color: color-mix(in srgb, currentColor 55%, transparent);
             }
 
+            .wrapper[scrollable] {
+                overflow-y: auto;
+            }
+
             h2 {
                 margin: 0;
                 padding: 0px;
@@ -5710,7 +5726,7 @@ ye([
   Ye()
 ], le.prototype, "lastMarkdown", 2);
 le = ye([
-  Pi("widget-markdown-1.0.9")
+  Pi("widget-markdown-1.0.11")
 ], le);
 export {
   le as WidgetMarkdown