@kubex/zinc 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/bulk-actions/bulk-actions.component.ts

@@ -1,8 +1,15 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {FormControlController} from "../../internal/form";
+import {litToHTML} from "../../utilities/lit-to-html";
 import {property, query} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
+import ZnButton from "../button";
+import ZnInput from "../input";
+import ZnOption from "../option";
+import ZnSelect from "../select";
+import type {ZnChangeEvent} from "../../events/zn-change";
+import type {ZnInputEvent} from "../../events/zn-input";
 
 import styles from './bulk-actions.scss';
 
@@ -29,7 +36,10 @@ export interface BulkActionItem {
  * @status experimental
  * @since 1.0
  *
- * @dependency zn-example
+ * @dependency zn-button
+ * @dependency zn-input
+ * @dependency zn-option
+ * @dependency zn-select
  *
  * @event zn-event-name - Emitted as an example.
  *
@@ -42,9 +52,15 @@ export interface BulkActionItem {
  */
 export default class ZnBulkActions extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-button': ZnButton,
+    'zn-input': ZnInput,
+    'zn-option': ZnOption,
+    'zn-select': ZnSelect,
+  };
 
   @query('.bulk-actions') container: HTMLDivElement;
-  @query('.add-rule') addRule: HTMLSelectElement;
+  @query('.add-rule') addRule: ZnSelect;
   @query('input#main-input') input: HTMLInputElement;
 
   @property() name: string;
@@ -73,12 +89,13 @@ export default class ZnBulkActions extends ZincElement {
       <div class="${classMap({
         'bulk-actions': true
       })}">
-        <select class="add-rule" @change="${this._addRule}">
-          <option value="">Select Filter</option>
+        <zn-select class="add-rule" placeholder="Select Filter" @zn-change="${this._addRule}">
           ${this.actions.map((item: BulkActionItem) => html`
-            <option value="${item.id}">${item.name.charAt(0).toUpperCase() + item.name.slice(1)}</option>`)}
-        </select>
-        <input id="main-input" name="${this.name}" value="${this.value}" type="hidden">
+            <zn-option value="${item.id}">
+              ${item.name.charAt(0).toUpperCase() + item.name.slice(1)}
+            </zn-option>`)}
+        </zn-select>
+        <input id="main-input" name="${this.name}" value="${this.value}" hidden>
       </div>
     `;
   }
@@ -95,8 +112,9 @@ export default class ZnBulkActions extends ZincElement {
     this.value = btoa(JSON.stringify(data));
   }
 
-  private _addRule(event: Event | null, value: string = "") {
-    const id = value ? value : event ? (event.target as HTMLSelectElement).value : '';
+  private _addRule(event: Event | null, value: string = "", pos?: number) {
+    const target = event?.target as ZnSelect;
+    const id = value ? value : target?.value || '';
     if (id === '') return;
 
     const filter = this.actions.find(item => item.id === id);
@@ -109,104 +127,154 @@ export default class ZnBulkActions extends ZincElement {
       value: ''
     });
 
-    const row = document.createElement('div');
-    row.classList.add('query-builder__row');
-    row.id = uniqueId;
-
-    const select = document.createElement('select');
-    this.actions.forEach(item => {
-      const option = document.createElement('option');
-      option.value = item.id;
-      option.text = item.name.charAt(0).toUpperCase() + item.name.slice(1);
-      option.selected = item.id === filter.id;
-      select.appendChild(option);
-    });
-    select.addEventListener('change', (e: Event) => this._changeRule(uniqueId, e));
-    select.classList.add('query-builder__key');
+    const keySelect = html`
+      <zn-select class="query-builder__key"
+                 @zn-change="${(e: ZnChangeEvent) => this._changeRule(uniqueId, e)}"
+                 value="${filter.id}">
+        ${this.actions.map((item: BulkActionItem) => html`
+          <zn-option value="${item.id}">
+            ${item.name.charAt(0).toUpperCase() + item.name.slice(1)}
+          </zn-option>
+        `)}
+      </zn-select>
+    `;
 
-    row.appendChild(select);
+    const input = this._createInput(uniqueId, filter);
+
+    const remove = html`
+      <zn-button class="query-builder__remove"
+                 icon="delete"
+                 icon-size="24"
+                 color="transparent"
+                 size="square"
+                 @click="${(e: Event) => this._removeRule(uniqueId, e)}">
+      </zn-button>`;
+
+    const wrapper = html`
+      <div class="query-builder__wrapper">
+        ${input}
+        ${remove}
+      </div>
+    `;
 
-    let input: HTMLSelectElement | HTMLInputElement | HTMLDivElement;
-    if (filter.options) {
-      input = document.createElement('select');
-      const options = Object.keys(filter.options);
-      options.forEach((item: string) => {
-        const option = document.createElement('option');
-        option.value = item;
-        option.text = filter.options ? (filter.options[item]) : '';
-        input.appendChild(option);
-      });
-      this._updateValue(uniqueId, {target: input});
-      input.addEventListener('change', (e: Event) => this._updateValue(uniqueId, e));
-    } else if (filter.type === 'bool' || filter.type === 'boolean') {
-      input = document.createElement('select');
-      const option1 = document.createElement('option');
-      option1.value = '1';
-      option1.text = 'True';
-      input.appendChild(option1);
-      const option2 = document.createElement('option');
-      option2.value = '0';
-      option2.text = 'False';
-      input.appendChild(option2);
-      input.addEventListener('change', (e: Event) => this._updateValue(uniqueId, e));
-    } else if (filter.type === 'number') {
-      input = document.createElement('input');
-      input.setAttribute('type', 'number');
-      input.addEventListener('input', (e: Event) => this._updateValue(uniqueId, e));
-    } else if (filter.type === 'date') {
-      input = document.createElement('input');
-      input.setAttribute('type', 'date');
-      input.addEventListener('input', (e: Event) => this._updateValue(uniqueId, e));
+    const rowElement = html`
+      <div id="${uniqueId}" class="query-builder__row">
+        ${keySelect}
+        ${wrapper}
+      </div>
+    `;
+
+    const row = litToHTML<HTMLDivElement>(rowElement);
+    if (!row) return;
+
+    if (pos !== undefined) {
+      this.container.insertBefore(row, this.container.children[pos]);
     } else {
-      input = document.createElement('input');
-      input.setAttribute('type', 'text');
-      input.addEventListener('input', (e: Event) => this._updateValue(uniqueId, e));
+      this.container.insertBefore(row, this.addRule);
     }
 
-    input.classList.add('query-builder__value');
-    const wrapper = document.createElement('div');
-    wrapper.classList.add('query-builder__wrapper');
-    wrapper.appendChild(input);
-    row.appendChild(wrapper);
-
-    const remove = document.createElement('zn-button');
-    remove.setAttribute('icon', 'delete');
-    remove.setAttribute('icon-size', '24');
-    remove.setAttribute('color', 'transparent');
-    remove.setAttribute('size', 'square');
-    remove.addEventListener('click', (e: Event) => this._removeRule(uniqueId, e));
-    remove.classList.add('query-builder__remove');
-    row.appendChild(remove);
-
-    this.container.insertBefore(row, this.addRule);
+    // Reset back to default placeholder
     this.addRule.value = '';
+    this.addRule.displayLabel = '';
+    if (this.addRule.selectedOptions?.length) {
+      this.addRule.selectedOptions[0].selected = false;
+    }
+
     this._handleChange();
   }
 
-  private _updateValue(id: string, event: Event | { target: HTMLSelectElement | HTMLInputElement | HTMLDivElement }) {
+  private _createInput(uniqueId: string, filter: BulkActionItem): ZnSelect | ZnInput | null {
+    if (filter.options) {
+      const input = html`
+        <zn-select class="query-builder__value"
+                   @zn-change="${(e: ZnChangeEvent) => this._updateValue(uniqueId, e)}">
+          ${Object.keys(filter.options).map(key => html`
+            <zn-option value="${key}">
+              ${filter.options ? filter.options[key] : ''}
+            </zn-option>
+          `)}
+        </zn-select>`;
+      const el = litToHTML<ZnSelect>(input);
+      if (el) {
+        // initialize with current selection
+        this._updateValue(uniqueId, {target: el} as unknown as Event);
+      }
+      return el;
+    }
+
+    if (filter.type === 'bool' || filter.type === 'boolean') {
+      const input = html`
+        <zn-select class="query-builder__value"
+                   @zn-change="${(e: ZnChangeEvent) => this._updateValue(uniqueId, e)}">
+          <zn-option value="1">True</zn-option>
+          <zn-option value="0">False</zn-option>
+        </zn-select>`;
+      return litToHTML<ZnSelect>(input);
+    }
+
+    if (filter.type === 'number') {
+      const input = html`
+        <zn-input type="number"
+                  class="query-builder__value"
+                  @zn-input="${(e: ZnInputEvent) => this._updateValue(uniqueId, e)}">
+        </zn-input>`;
+      return litToHTML<ZnInput>(input);
+    }
+
+    if (filter.type === 'date') {
+      const input = html`
+        <zn-input type="date"
+                  class="query-builder__value"
+                  @zn-input="${(e: ZnInputEvent) => this._updateValue(uniqueId, e)}">
+        </zn-input>`;
+      return litToHTML<ZnInput>(input);
+    }
+
+    const input = html`
+      <zn-input type="text"
+                class="query-builder__value"
+                @zn-input="${(e: ZnInputEvent) => this._updateValue(uniqueId, e)}">
+      </zn-input>`;
+    return litToHTML<ZnInput>(input);
+  }
+
+  private _updateValue(id: string, event: Event | { target: ZnSelect | ZnInput | HTMLDivElement }) {
     const filter = this._selectedRules.get(id);
     if (!filter) return;
 
-    const input = event.target as HTMLSelectElement | HTMLInputElement;
-    filter.value = input.value;
+    const input = event.target as ZnSelect | ZnInput;
+    filter.value = input.value as string;
 
     this._selectedRules.set(id, filter);
     this._handleChange();
   }
 
-  private _changeRule(id: string, event: Event) {
+  private _getRulePosition(id: string): number {
+    const rules = this.container.querySelectorAll('.query-builder__row');
+    let position: number = -1;
+    rules.forEach((item, index) => {
+      if ((item as HTMLDivElement).id === id) {
+        position = index;
+      }
+    });
+    return position;
+  }
+
+  private _changeRule(id: string, event: ZnChangeEvent) {
     // remove the element from the dom
-    const button = event.target as HTMLSelectElement;
-    button.parentElement?.remove();
+    const pos: number = this._getRulePosition(id);
+    const select = event.target as ZnSelect;
+    select.popup.active = false;
+    select?.parentElement?.remove();
     // recreate the element based on the selected value;
-    this._removeRule(id, event);
-    this._addRule(event);
+    this._removeRule(id, event as unknown as Event);
+    this._addRule(event as unknown as Event, '', pos);
   }
 
   private _removeRule(id: string, event: Event) {
     this._selectedRules.delete(id);
-    const button = event.target as HTMLButtonElement;
-    button.parentElement?.remove();
+    const button = event.target as ZnButton;
+    button?.closest('.query-builder__row')?.remove();
     this._handleChange();
   }
 

package/src/components/bulk-actions/bulk-actions.scss

@@ -40,7 +40,9 @@
   }
 
   &__wrapper {
+    display: flex;
     width: 100%;
+    gap: 10px;
   }
 
   &__date {

package/src/components/chart/chart.component.ts

@@ -1,5 +1,5 @@
-import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
-import { property } from 'lit/decorators.js';
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
 import ApexCharts from "apexcharts";
 import ZincElement from '../../internal/zinc-element';
 
@@ -26,21 +26,22 @@ export default class ZnChart extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
   @property() type: 'area' | 'bar' | 'line' = 'bar';
-  @property({ type: Array }) data: any[] = [];
-  @property({ type: Array }) categories: string | string[] = '';
+  @property({type: Array}) data: any[] = [];
+  @property({type: Array}) categories: string | string[] = '';
 
   @property() xAxis: string;
-  @property({ type: Number, attribute: 'd-size' }) datapointSize: number = 1;
+  @property({type: Number, attribute: 'd-size'}) datapointSize: number = 1;
+  @property({type: Boolean}) stacked = false;
 
   // Live
-  @property({ type: Boolean }) live = false;
-  @property({ attribute: 'data-url' }) dataUrl = '';
-  @property({ attribute: 'live-interval', type: Number }) liveInterval = 1000;
-  @property({ type: Number, reflect: true }) height = 300;
+  @property({type: Boolean}) live = false;
+  @property({attribute: 'data-url'}) dataUrl = '';
+  @property({attribute: 'live-interval', type: Number}) liveInterval = 1000;
+  @property({type: Number, reflect: true}) height = 300;
 
-  @property({ attribute: 'enable-animations', type: Boolean }) enableAnimations = false;
+  @property({attribute: 'enable-animations', type: Boolean}) enableAnimations = false;
 
-  @property({ attribute: 'y-axis-append' }) yAxisAppend: string;
+  @property({attribute: 'y-axis-append'}) yAxisAppend: string;
 
   private chart: ApexCharts;
 
@@ -54,10 +55,11 @@ export default class ZnChart extends ZincElement {
       animations: this.enableAnimations,
       chart: {
         type: this.type,
-        toolbar: { show: false },
+        toolbar: {show: false},
         foreColor: theme == 'dark' ? "rgb(149, 163, 184)" : "rgb(123, 112, 151)",
         height: this.height + 'px',
         fontFamily: '"Inter", sans',
+        stacked: this.stacked,
         zoom: {
           enabled: false
         },

package/src/components/cols/cols.component.ts

@@ -25,7 +25,6 @@ import styles from './cols.scss';
 export default class ZnCols extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
-
   @property({reflect: true, attribute: 'layout'}) layout: string = '';
 
   @property({attribute: 'mc', type: Number, reflect: true}) maxColumns: number = 0;
@@ -35,7 +34,11 @@ export default class ZnCols extends ZincElement {
   @property({type: Boolean}) border: boolean = false;
 
   @property({type: Boolean}) pad: boolean;
+
+  @property({type: Boolean}) divide: boolean = false;
+
   @property({attribute: 'pad-x', type: Boolean}) padX: boolean;
+
   @property({attribute: 'pad-y', type: Boolean}) padY: boolean;
 
   render() {
@@ -47,7 +50,7 @@ export default class ZnCols extends ZincElement {
 
     this.layout = layout.join(',');
 
-    this.maxColumns = Math.min(5, layout.reduce((a, b) => a + b, 0));
+    this.maxColumns = layout.reduce((a, b) => a + b, 0);
 
     const prefix = 'zn-col-';
     this.querySelectorAll(':scope > *').forEach((element: HTMLElement, index) => {
@@ -66,7 +69,8 @@ export default class ZnCols extends ZincElement {
         'cols--pad': this.pad,
         'cols--pad-x': this.padX,
         'cols--pad-y': this.padY,
-        [`cols--layout-${this.layout.replace(',', '')}`]: !!this.layout,
+        'cols--divide': this.divide,
+        [`cols--layout-${this.layout.replaceAll(',', '')}`]: !!this.layout,
         [`cols--mc-${this.maxColumns}`]: !!this.maxColumns,
       })}">
         <slot></slot>

package/src/components/cols/cols.scss

@@ -26,20 +26,10 @@
     }
   }
 
-  &--mc-2 {
-    --col-width: 40%;
-  }
-
-  &--mc-3 {
-    --col-width: 30%;
-  }
-
-  &--mc-4 {
-    --col-width: 23%;
-  }
-
-  &--mc-5 {
-    --col-width: 18%;
+  @for $i from 1 through 12 {
+    &--mc-#{$i} {
+      --col-width: calc(100% / #{$i + 1});
+    }
   }
 
   &--layout-121 {
@@ -54,6 +44,24 @@
     }
   }
 
+  &--divide {
+    ::slotted(*:not(:last-child)) {
+      position: relative;
+
+      &:after {
+        content: "";
+        position: absolute;
+        display: block;
+        width: 1px;
+        top: 0;
+        height: 100%;
+        max-height: 100%;
+        right: calc((var(--zn-spacing-small) / 2) * -1);
+        background-color: rgb(var(--zn-border-color));
+      }
+    }
+  }
+
   &--no-gap {
     gap: 0;
   }

package/src/components/content-block/content-block.component.ts

@@ -28,6 +28,7 @@ export default class ContentBlock extends ZincElement {
 
   @property({type: Boolean, reflect: true}) outbound = false;
   @property({type: Boolean, reflect: true}) short = false;
+  @property({attribute: 'default-display', reflect: true}) defaultDisplay: 'text' | 'html' = 'text';
 
   @queryAssignedNodes({slot: 'html', flatten: true}) htmlNodes!: Node[];
 
@@ -37,49 +38,82 @@ export default class ContentBlock extends ZincElement {
 
   private _textRows: TextRow[] = [];
 
+  private _themeChangeObserver?: MutationObserver;
+
   connectedCallback() {
     super.connectedCallback();
     this.iframe.then((iframe) => {
-      if (iframe.contentDocument) {
+      const rebuild = () => {
         const div = this.htmlNodes[0] as HTMLDivElement;
-        if (div) {
-          let convertedHtml = div?.innerHTML ?? '';
-          convertedHtml = convertedHtml.replace(/ /g, ' ');
-          convertedHtml = convertedHtml.replace(/&lt;/g, '<');
-          convertedHtml = convertedHtml.replace(/&gt;/g, '>');
-          convertedHtml = convertedHtml.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
-
-          const baseStyles = "<style>body,html{padding: 0; margin: 0; font-size: 13px; font-family: Arial;}img{max-width:100%; max-height: 500px;}</style>";
-          iframe.srcdoc = baseStyles + convertedHtml;
-        }
-      }
+        if (!div) return;
+
+        let convertedHtml = div?.innerHTML ?? '';
+        convertedHtml = convertedHtml.replace(/&nbsp;/g, ' ');
+        convertedHtml = convertedHtml.replace(/&lt;/g, '<');
+        convertedHtml = convertedHtml.replace(/&gt;/g, '>');
+        convertedHtml = convertedHtml.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+
+        const themeAttr = document.documentElement.getAttribute('t') || document.body.getAttribute('t') || '';
+
+        // Pull stylesheet links from host to inherit Zinc styles
+        const linkTags = Array.from(document.head.querySelectorAll('link[rel="stylesheet"]'))
+          .map((element: Element) => {
+            const href = (element as HTMLLinkElement).getAttribute('href') || (element as HTMLLinkElement).href || '';
+            return href ? `<link rel="stylesheet" href="${href}">` : '';
+          })
+          .join('');
+
+        const baseStyles = `<style>
+          html, body {
+            background-color: var(--zn-panel-background-color);
+            container-type: size;
+            margin: 0;
+          }
 
-      iframe.addEventListener("load", () => {
-        // Save original styles
-        const originalDisplay = iframe.style.display;
-        const originalVisibility = iframe.style.visibility;
-        const originalPosition = iframe.style.position;
-
-        // Make iframe render but stay hidden
-        iframe.style.display = 'block';
-        iframe.style.visibility = 'hidden';
-        iframe.style.position = 'absolute';
-
-        setTimeout(() => {
-          const iframeBody = iframe.contentDocument?.body;
-          if (iframeBody) {
-            const height = iframeBody.scrollHeight;
-            iframe.style.height = `${height + 30}px`;
+          hr {
+            height: 0;
+            border: none;
+            border-top: 1px solid rgb(var(--zn-border-color));
           }
-          // Restore original styles
-          iframe.style.display = originalDisplay;
-          iframe.style.visibility = originalVisibility;
-          iframe.style.position = originalPosition;
-        }, 50);
-      });
+
+          code, kbd, samp, pre, .mono {
+            font-family: var(--zn-font-family-mono),sans-serif;
+            font-size: 1em;
+          }
+
+          small {
+            font-size: 80%;
+          }
+        </style>`;
+
+        const head = `${linkTags}${baseStyles}`;
+        const htmlAttrs = `${themeAttr ? ` t="${themeAttr}"` : ''}`;
+        const baseHref = document.baseURI || window.location.href;
+
+        iframe.srcdoc = `<!doctype html><html${htmlAttrs}><head><base href="${baseHref}" target="_blank">${head}</head><body>${convertedHtml}</body></html>`;
+      };
+
+      rebuild();
+
+      // Observe theme changes on both attribute and theme classes on html and body
+      this._themeChangeObserver = new MutationObserver(() => rebuild());
+      this._themeChangeObserver.observe(document.documentElement, {attributes: true, attributeFilter: ['t', 'class']});
+      this._themeChangeObserver.observe(document.body, {attributes: true, attributeFilter: ['t', 'class']});
+
+      const doc = iframe.contentDocument;
+      if (!doc) return;
+
+      iframe.style.height = (75 + doc.body.scrollHeight) + 'px';
+      iframe.style.width = '100%';
+      iframe.style.border = '0';
     });
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._themeChangeObserver?.disconnect();
+  }
+
   private _collapseContent(e: Event) {
     const target = e.target as HTMLElement;
     const headerClick = target.classList.contains('content-block-header') ||
@@ -130,6 +164,7 @@ export default class ContentBlock extends ZincElement {
     const hasTextSlot = this.hasSlotController.test('text');
     const hasHtmlSlot = this.hasSlotController.test('html');
     const showActions = hasTextSlot && hasHtmlSlot;
+    const initialShowHtml = hasHtmlSlot && (!hasTextSlot || this.defaultDisplay === 'html');
 
     return html`
       <zn-panel flush tabbed class="${classMap({
@@ -167,10 +202,10 @@ export default class ContentBlock extends ZincElement {
         </zn-header>
 
         <zn-sp no-gap>
-          <iframe class="hidden" title="Content block HTML preview"></iframe>
+          <iframe class="${classMap({'hidden': !initialShowHtml})}" title="Content block HTML preview"></iframe>
           <slot class="html-content" name="html" style="display: none;"></slot>
           <slot name="text" style="display: none;"></slot>
-          <div class="text-content">
+          <div class="${classMap({'text-content': true, 'hidden': initialShowHtml})}">
             ${text.map((section) => html`
               ${section.type === 'reply' ? html`
                 <div class="toggle-reply" @click="${this.showReply}">...</div>` : ''}
@@ -220,6 +255,7 @@ export default class ContentBlock extends ZincElement {
         if (row.startsWith('Sent from')) type = 'reply';
         if (row.trim() === '' && previousType === 'reply') type = 'reply';
         if (type === 'reply' && row.startsWith('>')) row = row.substring(1).trim();
+        row = this.transformLineForImages(row);
 
         if (previousType === type) {
           if (textRows.length === 0) {
@@ -239,6 +275,36 @@ export default class ContentBlock extends ZincElement {
     return this._textRows;
   }
 
+  private transformLineForImages(line: string): string {
+    let out = line;
+
+    // Replace Markdown image syntax ![alt](url) for http(s)
+    const mdHttpImg = /!\[([^\]]*)\]\((https?:\/\/[^\s)]+?\.(?:png|jpe?g|gif|webp|bmp|svg))\)/gi;
+    out = out.replace(mdHttpImg, (_match, alt, url) => {
+      return `<img src="${url}" alt="${alt || 'image'}" loading="lazy" style="max-width:100%;max-height:500px;">`;
+    });
+
+    // Replace Markdown image syntax with data URI (base64)
+    const mdDataImg = /!\[([^\]]*)\]\((data:image\/[a-zA-Z0-9.+-]+;base64,[A-Za-z0-9+/=]+)\)/gi;
+    out = out.replace(mdDataImg, (_match, alt, url) => {
+      return `<img src="${url}" alt="${alt || 'image'}" loading="lazy" style="max-width:100%;max-height:500px;">`;
+    });
+
+    // Replace bare http(s) image URLs with <img>
+    const httpImg = /(https?:\/\/[^\s]+?\.(?:png|jpe?g|gif|webp|bmp|svg))(?!\S)/gi;
+    out = out.replace(httpImg, (_m, url) => {
+      return `<img src="${url}" alt="image" loading="lazy" style="max-width:100%;max-height:500px;">`;
+    });
+
+    // Replace bare data URI images with <img>
+    const dataImg = /(data:image\/[a-zA-Z0-9.+-]+;base64,[A-Za-z0-9+/=]+)(?!\S)/gi;
+    out = out.replace(dataImg, (_m, url) => {
+      return `<img src="${url}" alt="image" loading="lazy" style="max-width:100%;max-height:500px;">`;
+    });
+
+    return out;
+  }
+
   showReply(e: MouseEvent) {
     const target = e.target as HTMLElement;
     const nextElement = target.nextElementSibling;