@limetech/lime-elements 38.12.5 → 38.13.0

package/dist/esm/limel-markdown.entry.js

@@ -1,24 +1,58 @@
 import { r as registerInstance, h } from './index-2714248e.js';
-import { m as markdownToHTML } from './markdown-parser-ecdce41c.js';
+import { m as markdownToHTML } from './markdown-parser-1c1fdedc.js';
 import { g as globalConfig } from './config-656a588f.js';
 import './_commonjsHelpers-9b95d21f.js';
 
+class ImageIntersectionObserver {
+  /**
+   * @param containerElement - The element containing images to observe.
+   */
+  constructor(containerElement) {
+    this.handleIntersection = (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const img = entry.target;
+          const dataSrc = img.getAttribute('data-src');
+          if (dataSrc) {
+            img.setAttribute('src', dataSrc);
+            img.removeAttribute('data-src');
+          }
+          this.observer.unobserve(img);
+        }
+      });
+    };
+    this.observer = new IntersectionObserver(this.handleIntersection);
+    const images = containerElement.querySelectorAll('img');
+    images.forEach((img) => {
+      this.observer.observe(img);
+    });
+  }
+  disconnect() {
+    this.observer.disconnect();
+  }
+}
+
 const markdownCss = "@charset \"UTF-8\";code{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-size:0.8125rem;letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:0.875rem}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:0.875rem;word-break:break-word}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:\"\";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0}:host(limel-markdown:not(.no-table-styles)) tbody{border:1px solid rgb(var(--contrast-400));border-radius:0.25rem}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:0.875rem}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}table{display:block;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}blockquote{position:relative;font-weight:100;font-size:0.875rem;max-width:100%;line-height:1.4;margin:0;padding:0.5rem 1.25rem;border-radius:0.05rem 0.75rem;background-color:rgb(var(--contrast-300))}blockquote:before,blockquote:after{position:absolute;font-size:2.75rem;opacity:0.4}blockquote:before{content:\"“\";left:0;top:-0.75rem}blockquote:after{content:\"”\";right:0;bottom:-2rem}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:0.875rem;margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}img{max-width:100%;border-radius:0.25rem}kbd{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-weight:600;color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-200));white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:normal;padding:0.125rem 0.5rem;margin:0 0.25rem;box-shadow:var(--button-shadow-normal), 0 0.03125rem 0.21875rem 0 rgba(var(--contrast-100), 0.5) inset;border-radius:0.125rem;border-style:solid;border-color:rgba(var(--contrast-600), 0.8);border-width:0 1px 0.125rem 1px}:host(limel-markdown.adjust-for-table-cell) img{max-height:1.25rem;vertical-align:middle}:host(limel-markdown.adjust-for-table-cell) p{display:inline}:host(limel-markdown.adjust-for-table-cell) h1,:host(limel-markdown.adjust-for-table-cell) h2,:host(limel-markdown.adjust-for-table-cell) h3,:host(limel-markdown.adjust-for-table-cell) h4,:host(limel-markdown.adjust-for-table-cell) h5,:host(limel-markdown.adjust-for-table-cell) h6{display:inline-block;vertical-align:bottom;font-size:0.875rem;margin:0 0.25rem 0 0;letter-spacing:normal;font-weight:500}:host(limel-markdown.adjust-for-table-cell) h1:before,:host(limel-markdown.adjust-for-table-cell) h2:before,:host(limel-markdown.adjust-for-table-cell) h3:before,:host(limel-markdown.adjust-for-table-cell) h4:before,:host(limel-markdown.adjust-for-table-cell) h5:before,:host(limel-markdown.adjust-for-table-cell) h6:before{opacity:0.6;vertical-align:middle;font-size:0.5rem;border-radius:0.25rem 0 0 0.25rem;padding:0.25rem;padding-right:2rem;margin-right:-1.75rem;background:linear-gradient(to right, rgb(var(--contrast-800), 0.6), rgb(var(--contrast-800), 0))}:host(limel-markdown.adjust-for-table-cell) h1:before{content:\"H1\"}:host(limel-markdown.adjust-for-table-cell) h2:before{content:\"H2\"}:host(limel-markdown.adjust-for-table-cell) h3:before{content:\"H3\"}:host(limel-markdown.adjust-for-table-cell) h4:before{content:\"H4\"}:host(limel-markdown.adjust-for-table-cell) h5:before{content:\"H5\"}:host(limel-markdown.adjust-for-table-cell) h6:before{content:\"H6\"}:host(limel-markdown.adjust-for-table-cell) pre{margin:0}:host(limel-markdown.adjust-for-table-cell) pre>code{padding:0.125rem;margin:0}:host(limel-markdown.adjust-for-table-cell) dl{margin:0}:host(limel-markdown.adjust-for-table-cell) dl dt,:host(limel-markdown.adjust-for-table-cell) dl dd{padding:0.00625rem 0.125rem}hr{border-top:1px solid rgb(var(--contrast-700))}.MsoNormal{margin:0}";
 
 const Markdown = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.imageIntersectionObserver = null;
     this.value = undefined;
     this.whitelist = globalConfig.markdownWhitelist;
+    this.lazyLoadImages = false;
   }
   async textChanged() {
     var _a;
     try {
+      this.cleanupImageIntersectionObserver();
       const html = await markdownToHTML(this.value, {
         forceHardLineBreaks: true,
         whitelist: (_a = this.whitelist) !== null && _a !== void 0 ? _a : [],
+        lazyLoadImages: this.lazyLoadImages,
       });
       this.rootElement.innerHTML = html;
+      this.setupImageIntersectionObserver();
     }
     catch (error) {
       // eslint-disable-next-line no-console
@@ -28,11 +62,25 @@ const Markdown = class {
   async componentDidLoad() {
     this.textChanged();
   }
+  disconnectedCallback() {
+    this.cleanupImageIntersectionObserver();
+  }
   render() {
     return [
       h("div", { id: "markdown", ref: (el) => (this.rootElement = el) }),
     ];
   }
+  setupImageIntersectionObserver() {
+    if (this.lazyLoadImages) {
+      this.imageIntersectionObserver = new ImageIntersectionObserver(this.rootElement);
+    }
+  }
+  cleanupImageIntersectionObserver() {
+    if (this.imageIntersectionObserver) {
+      this.imageIntersectionObserver.disconnect();
+      this.imageIntersectionObserver = null;
+    }
+  }
   static get watchers() { return {
     "value": ["textChanged"]
   }; }

package/dist/esm/limel-markdown.entry.js.map

@@ -1 +1 @@
-{"file":"limel-markdown.entry.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,qoNAAqoN;;MC6B5oN,QAAQ;;;;qBAmBb,YAAY,CAAC,iBAAiB;;EAG3B,MAAM,WAAW;;IACpB,IAAI;MACA,MAAM,IAAI,GAAG,MAAM,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE;QAC1C,mBAAmB,EAAE,IAAI;QACzB,SAAS,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,EAAE;OAClC,CAAC,CAAC;MACH,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC;KACrC;IAAC,OAAO,KAAK,EAAE;;MAEZ,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACxB;GACJ;EAEM,MAAM,gBAAgB;IACzB,IAAI,CAAC,WAAW,EAAE,CAAC;GACtB;EAIM,MAAM;IACT,OAAO;MACH,WACI,EAAE,EAAC,UAAU,EACb,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,GACxD;KACL,CAAC;GACL;;;;;;;;;","names":[],"sources":["./src/components/markdown/markdown.scss?tag=limel-markdown&encapsulation=shadow","./src/components/markdown/markdown.tsx"],"sourcesContent":["/**\n* @prop --markdown-hyperlink-color: color of text for hyperlinks. Defaults to `--color-blue-dark`;\n* @prop --markdown-hyperlink-color--hovered: color of text for hyperlinks when hovered. Defaults to `--color-blue-default`;\n*/\n\n@forward './partial-styles/pre-code';\n@forward './partial-styles/headings';\n@forward './partial-styles/body-text';\n@forward './partial-styles/lists';\n@forward './partial-styles/tables';\n@forward './partial-styles/blockquotes';\n@forward './partial-styles/definition-lists';\n@forward './partial-styles/img';\n@forward './partial-styles/kbd';\n@forward './partial-styles/_adjust-for-table-cell';\n\n// body-text\nhr {\n    border-top: 1px solid rgb(var(--contrast-700));\n}\n\n.MsoNormal {\n    margin: 0;\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { globalConfig } from '../../global/config';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\n\n/**\n * The Markdown component receives markdown syntax\n * and renders it as HTML.\n *\n * @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-keys\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-composite\n * @exampleComponent limel-example-markdown-custom-component\n */\n@Component({\n    tag: 'limel-markdown',\n    styleUrl: 'markdown.scss',\n    shadow: true,\n})\nexport class Markdown {\n    /**\n     * The input text. Treated as GitHub Flavored Markdown, with the addition\n     * that any included HTML will be parsed and rendered as HTML, rather than\n     * as text.\n     */\n    @Prop()\n    public value: string;\n\n    /**\n     * Whitelisted html elements.\n     *\n     * Any custom element added here will not be sanitized and thus rendered.\n     * Can also be set via `limel-config`. Setting this property will override\n     * the global config.\n     * @alpha\n     */\n    @Prop()\n    public whitelist?: CustomElementDefinition[] =\n        globalConfig.markdownWhitelist;\n\n    @Watch('value')\n    public async textChanged() {\n        try {\n            const html = await markdownToHTML(this.value, {\n                forceHardLineBreaks: true,\n                whitelist: this.whitelist ?? [],\n            });\n            this.rootElement.innerHTML = html;\n        } catch (error) {\n            // eslint-disable-next-line no-console\n            console.error(error);\n        }\n    }\n\n    public async componentDidLoad() {\n        this.textChanged();\n    }\n\n    private rootElement: HTMLDivElement;\n\n    public render() {\n        return [\n            <div\n                id=\"markdown\"\n                ref={(el) => (this.rootElement = el as HTMLDivElement)}\n            />,\n        ];\n    }\n}\n"],"version":3}
+{"file":"limel-markdown.entry.js","mappings":";;;;;MAAa,yBAAyB;;;;EAMlC,YAAmB,gBAA6B;IAa/B,uBAAkB,GAAG,CAClC,OAAoC;MAEpC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK;QAClB,IAAI,KAAK,CAAC,cAAc,EAAE;UACtB,MAAM,GAAG,GAAG,KAAK,CAAC,MAA0B,CAAC;UAC7C,MAAM,OAAO,GAAG,GAAG,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;UAE7C,IAAI,OAAO,EAAE;YACT,GAAG,CAAC,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;YACjC,GAAG,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;WACnC;UAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;SAChC;OACJ,CAAC,CAAC;KACN,CAAC;IA5BE,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAElE,MAAM,MAAM,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;KAC9B,CAAC,CAAC;GACN;EAEM,UAAU;IACb,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;GAC9B;;;ACjBL,MAAM,WAAW,GAAG,qoNAAqoN;;MC8B5oN,QAAQ;;;IAgDT,8BAAyB,GAAqC,IAAI,CAAC;;qBA7BvE,YAAY,CAAC,iBAAiB;0BAMV,KAAK;;EAGtB,MAAM,WAAW;;IACpB,IAAI;MACA,IAAI,CAAC,gCAAgC,EAAE,CAAC;MAExC,MAAM,IAAI,GAAG,MAAM,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE;QAC1C,mBAAmB,EAAE,IAAI;QACzB,SAAS,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,EAAE;QAC/B,cAAc,EAAE,IAAI,CAAC,cAAc;OACtC,CAAC,CAAC;MAEH,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC;MAElC,IAAI,CAAC,8BAA8B,EAAE,CAAC;KACzC;IAAC,OAAO,KAAK,EAAE;;MAEZ,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACxB;GACJ;EAKM,MAAM,gBAAgB;IACzB,IAAI,CAAC,WAAW,EAAE,CAAC;GACtB;EAEM,oBAAoB;IACvB,IAAI,CAAC,gCAAgC,EAAE,CAAC;GAC3C;EAEM,MAAM;IACT,OAAO;MACH,WACI,EAAE,EAAC,UAAU,EACb,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,GACxD;KACL,CAAC;GACL;EAEO,8BAA8B;IAClC,IAAI,IAAI,CAAC,cAAc,EAAE;MACrB,IAAI,CAAC,yBAAyB,GAAG,IAAI,yBAAyB,CAC1D,IAAI,CAAC,WAAW,CACnB,CAAC;KACL;GACJ;EAEO,gCAAgC;IACpC,IAAI,IAAI,CAAC,yBAAyB,EAAE;MAChC,IAAI,CAAC,yBAAyB,CAAC,UAAU,EAAE,CAAC;MAC5C,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC;KACzC;GACJ;;;;;;;;;","names":[],"sources":["./src/components/markdown/image-intersection-observer.ts","./src/components/markdown/markdown.scss?tag=limel-markdown&encapsulation=shadow","./src/components/markdown/markdown.tsx"],"sourcesContent":["export class ImageIntersectionObserver {\n    private observer: IntersectionObserver;\n\n    /**\n     * @param containerElement - The element containing images to observe.\n     */\n    public constructor(containerElement: HTMLElement) {\n        this.observer = new IntersectionObserver(this.handleIntersection);\n\n        const images = containerElement.querySelectorAll('img');\n        images.forEach((img) => {\n            this.observer.observe(img);\n        });\n    }\n\n    public disconnect() {\n        this.observer.disconnect();\n    }\n\n    private readonly handleIntersection = (\n        entries: IntersectionObserverEntry[],\n    ) => {\n        entries.forEach((entry) => {\n            if (entry.isIntersecting) {\n                const img = entry.target as HTMLImageElement;\n                const dataSrc = img.getAttribute('data-src');\n\n                if (dataSrc) {\n                    img.setAttribute('src', dataSrc);\n                    img.removeAttribute('data-src');\n                }\n\n                this.observer.unobserve(img);\n            }\n        });\n    };\n}\n","/**\n* @prop --markdown-hyperlink-color: color of text for hyperlinks. Defaults to `--color-blue-dark`;\n* @prop --markdown-hyperlink-color--hovered: color of text for hyperlinks when hovered. Defaults to `--color-blue-default`;\n*/\n\n@forward './partial-styles/pre-code';\n@forward './partial-styles/headings';\n@forward './partial-styles/body-text';\n@forward './partial-styles/lists';\n@forward './partial-styles/tables';\n@forward './partial-styles/blockquotes';\n@forward './partial-styles/definition-lists';\n@forward './partial-styles/img';\n@forward './partial-styles/kbd';\n@forward './partial-styles/_adjust-for-table-cell';\n\n// body-text\nhr {\n    border-top: 1px solid rgb(var(--contrast-700));\n}\n\n.MsoNormal {\n    margin: 0;\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { globalConfig } from '../../global/config';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\nimport { ImageIntersectionObserver } from './image-intersection-observer';\n\n/**\n * The Markdown component receives markdown syntax\n * and renders it as HTML.\n *\n * @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-keys\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-composite\n * @exampleComponent limel-example-markdown-custom-component\n */\n@Component({\n    tag: 'limel-markdown',\n    styleUrl: 'markdown.scss',\n    shadow: true,\n})\nexport class Markdown {\n    /**\n     * The input text. Treated as GitHub Flavored Markdown, with the addition\n     * that any included HTML will be parsed and rendered as HTML, rather than\n     * as text.\n     */\n    @Prop()\n    public value: string;\n\n    /**\n     * Whitelisted html elements.\n     *\n     * Any custom element added here will not be sanitized and thus rendered.\n     * Can also be set via `limel-config`. Setting this property will override\n     * the global config.\n     * @alpha\n     */\n    @Prop()\n    public whitelist?: CustomElementDefinition[] =\n        globalConfig.markdownWhitelist;\n\n    /**\n     * Enable lazy loading for images\n     */\n    @Prop()\n    public lazyLoadImages = false;\n\n    @Watch('value')\n    public async textChanged() {\n        try {\n            this.cleanupImageIntersectionObserver();\n\n            const html = await markdownToHTML(this.value, {\n                forceHardLineBreaks: true,\n                whitelist: this.whitelist ?? [],\n                lazyLoadImages: this.lazyLoadImages,\n            });\n\n            this.rootElement.innerHTML = html;\n\n            this.setupImageIntersectionObserver();\n        } catch (error) {\n            // eslint-disable-next-line no-console\n            console.error(error);\n        }\n    }\n\n    private rootElement: HTMLDivElement;\n    private imageIntersectionObserver: ImageIntersectionObserver | null = null;\n\n    public async componentDidLoad() {\n        this.textChanged();\n    }\n\n    public disconnectedCallback() {\n        this.cleanupImageIntersectionObserver();\n    }\n\n    public render() {\n        return [\n            <div\n                id=\"markdown\"\n                ref={(el) => (this.rootElement = el as HTMLDivElement)}\n            />,\n        ];\n    }\n\n    private setupImageIntersectionObserver() {\n        if (this.lazyLoadImages) {\n            this.imageIntersectionObserver = new ImageIntersectionObserver(\n                this.rootElement,\n            );\n        }\n    }\n\n    private cleanupImageIntersectionObserver() {\n        if (this.imageIntersectionObserver) {\n            this.imageIntersectionObserver.disconnect();\n            this.imageIntersectionObserver = null;\n        }\n    }\n}\n"],"version":3}

package/dist/esm/limel-prosemirror-adapter.entry.js

@@ -8,7 +8,7 @@ import { d as isPrototype, g as getTag, e as baseUnary, n as nodeUtil, a as isBu
 import { g as getPrototype } from './_getPrototype-8096728a.js';
 import { i as isArray } from './isArray-80298bc7.js';
 import { i as isObjectLike } from './isObjectLike-38996507.js';
-import { d as decodeHTML, m as markdownToHTML, s as sanitizeHTML } from './markdown-parser-ecdce41c.js';
+import { d as decodeHTML, m as markdownToHTML, s as sanitizeHTML } from './markdown-parser-1c1fdedc.js';
 import { t as translate$1 } from './translations-489f20b3.js';
 import { c as createRandomString } from './random-string-e74dc48d.js';
 import { i as isItem } from './isItem-b0459122.js';
@@ -25911,6 +25911,13 @@ function getImageNode(language) {
 function getImageNodeMarkdownSerializer(language) {
   return { image: createImageNodeMarkdownSerializer(language) };
 }
+function applyImageStyles(img, node) {
+  img.style.height = node.attrs.height;
+  img.style.width = node.attrs.width;
+  img.style.minHeight = node.attrs.minHeight;
+  img.style.minWidth = node.attrs.minWidth;
+  img.style.maxWidth = node.attrs.maxWidth;
+}
 /**
  * Recursively checks if a ProseMirror node or
  * any of its child nodes is an image node.
@@ -25929,16 +25936,16 @@ function hasImageNode(node) {
 }
 function createImageNodeMarkdownSerializer(language) {
   return (markdownSerializerState, node) => {
-    const { state, alt, src, width, maxWidth } = node.attrs;
+    const state = node.attrs.state;
     if (!isEditorImageState(state)) {
       return;
     }
     if (state === 'success') {
-      const imageHTML = getImageHTML(src, alt, width, maxWidth);
+      const imageHTML = getImageHTML(node.attrs);
       markdownSerializerState.write(imageHTML);
       return;
     }
-    const statusHTML = getStatusHTML(state, alt, language);
+    const statusHTML = getStatusHTML(state, node.attrs.alt, language);
     markdownSerializerState.write(statusHTML);
   };
 }
@@ -25949,16 +25956,25 @@ function getStatusHTML(state, alt, language) {
   });
   return `<span>${text}</span>`;
 }
-function getImageHTML(src, alt, width, maxWidth) {
+function getImageHTML(attrs) {
   const style = [];
-  if (width) {
-    style.push(`width: ${width};`);
+  if (attrs.height) {
+    style.push(`height: ${attrs.height};`);
+  }
+  if (attrs.width) {
+    style.push(`width: ${attrs.width};`);
+  }
+  if (attrs.minHeight) {
+    style.push(`min-height: ${attrs.minHeight};`);
+  }
+  if (attrs.minWidth) {
+    style.push(`min-width: ${attrs.minWidth};`);
   }
-  if (maxWidth) {
-    style.push(`max-width: ${maxWidth};`);
+  if (attrs.maxWidth) {
+    style.push(`max-width: ${attrs.maxWidth};`);
   }
-  const styleAttribute = style.length > 0 ? ` style="${style.join(' ')}"` : '';
-  return `<img src="${src}" alt="${alt}"${styleAttribute} />`;
+  const styleAttribute = style.length > 0 ? ` style="${style.join('')}"` : '';
+  return `<img src="${attrs.src}" alt="${attrs.alt}"${styleAttribute} />`;
 }
 function createImageNodeSpec(language) {
   return {
@@ -25968,7 +25984,10 @@ function createImageNodeSpec(language) {
       src: { default: '' },
       alt: { default: '' },
       fileInfoId: { default: '' },
+      height: { default: '' },
       width: { default: '' },
+      minHeight: { default: '' },
+      minWidth: { default: '' },
       maxWidth: { default: '100%' },
       state: { default: 'success' },
     },
@@ -26026,16 +26045,14 @@ function createStatusSpan(key, node, language) {
 }
 function updateImageElement(img, node) {
   img.alt = node.attrs.alt;
-  img.style.maxWidth = node.attrs.maxWidth;
-  img.style.width = node.attrs.width;
+  applyImageStyles(img, node);
   return img;
 }
 function createImageElement(node) {
   const img = document.createElement('img');
   img.src = node.attrs.src;
   img.alt = node.attrs.alt;
-  img.style.maxWidth = node.attrs.maxWidth;
-  img.style.width = node.attrs.width;
+  applyImageStyles(img, node);
   return img;
 }
 
@@ -26509,7 +26526,7 @@ class ImageView {
         window.removeEventListener('pointermove', onPointerMove);
         window.removeEventListener('pointerup', onPointerUp);
         handle.setAttribute('aria-grabbed', 'false');
-        this.view.dispatch(this.view.state.tr.setNodeMarkup(this.getPos(), undefined, Object.assign(Object.assign({}, this.node.attrs), { width: this.img.style.width, height: this.node.attrs.height })));
+        this.persistDimensions();
       };
       window.addEventListener('pointermove', onPointerMove);
       window.addEventListener('pointerup', onPointerUp);
@@ -26574,19 +26591,23 @@ class ImageView {
     this.img = document.createElement('img');
     this.img.src = node.attrs.src;
     this.img.alt = node.attrs.alt;
-    this.img.style.maxWidth = node.attrs.maxWidth;
-    this.img.style.width = node.attrs.width;
+    applyImageStyles(this.img, node);
+    this.img.onload = () => {
+      this.persistDimensions();
+    };
     this.dom.appendChild(this.img);
     this.transitionBetweenStates();
   }
+  persistDimensions() {
+    this.view.dispatch(this.view.state.tr.setNodeMarkup(this.getPos(), undefined, Object.assign(Object.assign({}, this.node.attrs), { height: `${this.img.offsetHeight}px`, width: `${this.img.offsetWidth}px`, minHeight: `${this.img.offsetHeight}px`, minWidth: `${this.img.offsetWidth}px` })));
+  }
   // Ensure that the existing NodeView is reused rather than recreated.
   // Recreating the NodeView will cause flickering between states.
   update(node) {
     if (!this.transitioningBetweenSuccessStates(node)) {
       this.img.src = node.attrs.src;
       this.img.alt = node.attrs.alt;
-      this.img.style.maxWidth = node.attrs.maxWidth;
-      this.img.style.width = node.attrs.width;
+      applyImageStyles(this.img, node);
     }
     this.node = node;
     this.transitionBetweenStates();