@limetech/lime-elements 39.12.4 → 39.12.5

package/dist/collection/components/markdown/markdown.js

@@ -3,6 +3,7 @@ import { markdownToHTML } from "./markdown-parser";
 import { globalConfig } from "../../global/config";
 import { ImageIntersectionObserver } from "./image-intersection-observer";
 import { hydrateCustomElements } from "./hydrate-custom-elements";
+import { morphChildren } from "./morph-dom";
 import { DEFAULT_MARKDOWN_WHITELIST } from "./default-whitelist";
 /**
  * The Markdown component receives markdown syntax
@@ -95,7 +96,7 @@ export class Markdown {
                 lazyLoadImages: this.lazyLoadImages,
                 removeEmptyParagraphs: this.removeEmptyParagraphs,
             });
-            this.rootElement.innerHTML = html;
+            morphChildren(this.rootElement, html);
             // Hydration parses JSON attribute values (e.g. link='{"href":"..."}')
             // into JS properties. URL sanitization happens here because
             // rehype-sanitize can't inspect values inside JSON strings.
@@ -119,7 +120,7 @@ export class Markdown {
         this.cleanupImageIntersectionObserver();
     }
     render() {
-        return (h(Host, { key: 'd3c5e71466ad7fa2723a0a44bc6ba6742e597ca1' }, h("div", { key: 'ff45056e1a3ad465bdea9026b0c9674d911607a2', id: "markdown", ref: (el) => (this.rootElement = el) })));
+        return (h(Host, { key: '9d88a42e047b6701215699ab5459af3275e51693' }, h("div", { key: '83a5801839318bf47eeacbf53e320e4628559bfa', id: "markdown", ref: (el) => (this.rootElement = el) })));
     }
     setupImageIntersectionObserver() {
         if (this.lazyLoadImages) {

package/dist/collection/components/markdown/morph-dom.js

@@ -0,0 +1,29 @@
+import morphdom from "morphdom";
+/**
+ * Morph the children of `container` to match the given HTML string.
+ *
+ * Uses morphdom to diff the existing DOM against the new HTML and apply
+ * only the minimum changes. This preserves existing DOM nodes (including
+ * custom elements with internal state) that haven't changed.
+ *
+ * @param container - The parent element whose children should be morphed.
+ * @param html - The new HTML content for the container's children.
+ */
+export function morphChildren(container, html = '') {
+    // morphdom's second argument must be a single root element. We wrap
+    // the new HTML in a <div> purely to satisfy that requirement — the
+    // tag name doesn't matter because childrenOnly makes morphdom skip
+    // the root and only diff the children. The container element itself
+    // is never compared or replaced, so it can be any element type.
+    try {
+        morphdom(container, `<div>${html}</div>`, {
+            childrenOnly: true,
+        });
+    }
+    catch (error) {
+        // Fall back to innerHTML so that content is at least visible,
+        // even though custom elements will be destroyed and recreated.
+        console.warn('morphdom failed, falling back to innerHTML:', error);
+        container.innerHTML = html;
+    }
+}