@limetech/lime-elements 38.12.4 → 38.13.0

package/dist/collection/components/ai-avatar/ai-avatar.css

@@ -26,7 +26,6 @@
 
 .core,
 .orbitals {
-  mix-blend-mode: overlay;
   position: absolute;
   z-index: 10;
   inset: 0;
@@ -35,18 +34,22 @@
   align-items: center;
   justify-content: center;
   aspect-ratio: 1;
-  width: clamp(0.375rem, 20%, 3.5rem);
   border-radius: 50%;
 }
 
 .core {
+  opacity: 0.8;
+  width: 70%;
   animation: breathe 3s ease infinite;
   animation-play-state: var(--ai-avatar-animation-play-state, paused);
-  background-color: rgb(var(--color-glaucous-lighter));
+  background-color: inherit;
   box-shadow: var(--shadow-depth-8);
+  backdrop-filter: blur(1rem);
 }
 
 .orbitals {
+  mix-blend-mode: overlay;
+  width: clamp(0.375rem, 20%, 3.5rem);
   animation: rotate 5s linear infinite;
   animation-play-state: var(--ai-avatar-animation-play-state, paused);
   transition: opacity 0.2s ease;
@@ -91,7 +94,7 @@
     transform: scale(1);
   }
   50% {
-    transform: scale(0.7);
+    transform: scale(0.9);
   }
 }
 @keyframes rotate {

package/dist/collection/components/markdown/allowed-css-properties.js

@@ -10,5 +10,8 @@ export const allowedCssProperties = [
   'text-decoration-thickness',
   'text-decoration',
   'width',
+  'height',
+  'min-width',
+  'min-height',
 ];
 //# sourceMappingURL=allowed-css-properties.js.map

package/dist/collection/components/markdown/allowed-css-properties.js.map

@@ -1 +1 @@
-{"version":3,"file":"allowed-css-properties.js","sourceRoot":"","sources":["../../../src/components/markdown/allowed-css-properties.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG;EAChC,kBAAkB;EAClB,OAAO;EACP,YAAY;EACZ,aAAa;EACb,uBAAuB;EACvB,sBAAsB;EACtB,0BAA0B;EAC1B,uBAAuB;EACvB,2BAA2B;EAC3B,iBAAiB;EACjB,OAAO;CACV,CAAC","sourcesContent":["export const allowedCssProperties = [\n    'background-color',\n    'color',\n    'font-style',\n    'font-weight',\n    'text-decoration-color',\n    'text-decoration-line',\n    'text-decoration-skip-ink',\n    'text-decoration-style',\n    'text-decoration-thickness',\n    'text-decoration',\n    'width',\n];\n"]}
+{"version":3,"file":"allowed-css-properties.js","sourceRoot":"","sources":["../../../src/components/markdown/allowed-css-properties.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG;EAChC,kBAAkB;EAClB,OAAO;EACP,YAAY;EACZ,aAAa;EACb,uBAAuB;EACvB,sBAAsB;EACtB,0BAA0B;EAC1B,uBAAuB;EACvB,2BAA2B;EAC3B,iBAAiB;EACjB,OAAO;EACP,QAAQ;EACR,WAAW;EACX,YAAY;CACf,CAAC","sourcesContent":["export const allowedCssProperties = [\n    'background-color',\n    'color',\n    'font-style',\n    'font-weight',\n    'text-decoration-color',\n    'text-decoration-line',\n    'text-decoration-skip-ink',\n    'text-decoration-style',\n    'text-decoration-thickness',\n    'text-decoration',\n    'width',\n    'height',\n    'min-width',\n    'min-height',\n];\n"]}

package/dist/collection/components/markdown/image-intersection-observer.js

@@ -0,0 +1,29 @@
+export 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();
+  }
+}
+//# sourceMappingURL=image-intersection-observer.js.map

package/dist/collection/components/markdown/image-intersection-observer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-intersection-observer.js","sourceRoot":"","sources":["../../../src/components/markdown/image-intersection-observer.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,yBAAyB;EAGlC;;KAEG;EACH,YAAmB,gBAA6B;IAa/B,uBAAkB,GAAG,CAClC,OAAoC,EACtC,EAAE;MACA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;QACtB,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;MACL,CAAC,CAAC,CAAC;IACP,CAAC,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,EAAE,EAAE;MACnB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAC/B,CAAC,CAAC,CAAC;EACP,CAAC;EAEM,UAAU;IACb,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;EAC/B,CAAC;CAmBJ","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"]}

package/dist/collection/components/markdown/image-markdown-plugin.js

@@ -0,0 +1,28 @@
+import { visit } from 'unist-util-visit';
+/**
+ * Creates a unified.js plugin that transforms image elements for lazy loading
+ *
+ * @param lazyLoadImages - Whether to enable lazy loading for images
+ * @returns A unified.js plugin function
+ */
+export function createLazyLoadImagesPlugin(lazyLoadImages = false) {
+  return () => {
+    if (!lazyLoadImages) {
+      return (tree) => tree;
+    }
+    return (tree) => {
+      visit(tree, 'element', (node) => {
+        if (node.tagName === 'img') {
+          node.properties = node.properties || {};
+          node.properties.loading = 'lazy';
+          if (node.properties.src) {
+            node.properties['data-src'] = node.properties.src;
+            node.properties.src = undefined;
+          }
+        }
+      });
+      return tree;
+    };
+  };
+}
+//# sourceMappingURL=image-markdown-plugin.js.map

package/dist/collection/components/markdown/image-markdown-plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-markdown-plugin.js","sourceRoot":"","sources":["../../../src/components/markdown/image-markdown-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAIzC;;;;;GAKG;AACH,MAAM,UAAU,0BAA0B,CAAC,cAAc,GAAG,KAAK;EAC7D,OAAO,GAAgB,EAAE;IACrB,IAAI,CAAC,cAAc,EAAE;MACjB,OAAO,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC;KAC/B;IAED,OAAO,CAAC,IAAU,EAAE,EAAE;MAClB,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,CAAC,IAAS,EAAE,EAAE;QACjC,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE;UACxB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC;UACxC,IAAI,CAAC,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC;UAEjC,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE;YACrB,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC;YAClD,IAAI,CAAC,UAAU,CAAC,GAAG,GAAG,SAAS,CAAC;WACnC;SACJ;MACL,CAAC,CAAC,CAAC;MAEH,OAAO,IAAI,CAAC;IAChB,CAAC,CAAC;EACN,CAAC,CAAC;AACN,CAAC","sourcesContent":["import { visit } from 'unist-util-visit';\nimport { Node } from 'unist';\nimport { Plugin, Transformer } from 'unified';\n\n/**\n * Creates a unified.js plugin that transforms image elements for lazy loading\n *\n * @param lazyLoadImages - Whether to enable lazy loading for images\n * @returns A unified.js plugin function\n */\nexport function createLazyLoadImagesPlugin(lazyLoadImages = false): Plugin {\n    return (): Transformer => {\n        if (!lazyLoadImages) {\n            return (tree: Node) => tree;\n        }\n\n        return (tree: Node) => {\n            visit(tree, 'element', (node: any) => {\n                if (node.tagName === 'img') {\n                    node.properties = node.properties || {};\n                    node.properties.loading = 'lazy';\n\n                    if (node.properties.src) {\n                        node.properties['data-src'] = node.properties.src;\n                        node.properties.src = undefined;\n                    }\n                }\n            });\n\n            return tree;\n        };\n    };\n}\n"]}

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

@@ -9,6 +9,7 @@ import rehypeStringify from 'rehype-stringify';
 import rehypeRaw from 'rehype-raw';
 import { visit } from 'unist-util-visit';
 import { sanitizeStyle } from './sanitize-style';
+import { createLazyLoadImagesPlugin } from './image-markdown-plugin';
 /**
  * Takes a string as input and returns a new string
  * where the text has been converted to HTML.
@@ -42,6 +43,7 @@ export async function markdownToHTML(text, options) {
       visit(tree, 'element', sanitizeStyle);
     };
   })
+    .use(createLazyLoadImagesPlugin(options === null || options === void 0 ? void 0 : options.lazyLoadImages))
     .use(rehypeStringify)
     .process(text);
   return file.toString();

package/dist/collection/components/markdown/markdown-parser.js.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-parser.js","sourceRoot":"","sources":["../../../src/components/markdown/markdown-parser.ts"],"names":[],"mappings":"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","sourcesContent":["import { unified } from 'unified';\nimport remarkParse from 'remark-parse';\nimport remarkRehype from 'remark-rehype';\nimport remarkGfm from 'remark-gfm';\nimport rehypeParse from 'rehype-parse';\nimport rehypeExternalLinks from 'rehype-external-links';\nimport rehypeSanitize, { defaultSchema } from 'rehype-sanitize';\nimport rehypeStringify from 'rehype-stringify';\nimport rehypeRaw from 'rehype-raw';\nimport { visit } from 'unist-util-visit';\nimport { sanitizeStyle } from './sanitize-style';\nimport { Node } from 'unist';\nimport { Schema } from 'rehype-sanitize/lib';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\n\n/**\n * Takes a string as input and returns a new string\n * where the text has been converted to HTML.\n *\n * If the text is formatted with .md markdown, it will\n * be transformed to HTML.\n *\n * If the text already is in HTML it will be sanitized and\n * \"dangerous\" tags such as <script> will be removed.\n *\n * @param text - The string to convert.\n * @param options - Options for the conversions.\n * @returns The resulting HTML.\n */\nexport async function markdownToHTML(\n    text: string,\n    options?: MarkdownToHTMLOptions,\n): Promise<string> {\n    if (options?.forceHardLineBreaks) {\n        text = text.replace(/(?<!\\\\)([\\n\\r])/g, '  $1');\n    }\n\n    const file = await unified()\n        .use(remarkParse)\n        .use(remarkGfm)\n        .use(remarkRehype, { allowDangerousHtml: true })\n        .use(rehypeExternalLinks, { target: '_blank' })\n        .use(rehypeRaw)\n        .use(rehypeSanitize, {\n            ...getWhiteList(options?.whitelist ?? []),\n        })\n        .use(() => {\n            return (tree: Node) => {\n                // Run the sanitizeStyle function on all elements, to sanitize\n                // the value of the `style` attribute, if there is one.\n                visit(tree, 'element', sanitizeStyle);\n            };\n        })\n        .use(rehypeStringify)\n        .process(text);\n\n    return file.toString();\n}\n\n/**\n * Sanitizes a given HTML string by removing dangerous tags and attributes.\n *\n * @param html - The string containing HTML to sanitize.\n * @param whitelist - Optional whitelist of custom components.\n * @returns The sanitized HTML string.\n */\nexport async function sanitizeHTML(\n    html: string,\n    whitelist?: CustomElementDefinition[],\n): Promise<string> {\n    const file = await unified()\n        .use(rehypeParse)\n        .use(rehypeSanitize, {\n            ...getWhiteList(whitelist ?? []),\n        })\n        .use(() => {\n            return (tree: Node) => {\n                // Run the sanitizeStyle function on all elements, to sanitize\n                // the value of the `style` attribute, if there is one.\n                visit(tree, 'element', sanitizeStyle);\n            };\n        })\n        .use(rehypeStringify)\n        .process(html);\n\n    return file.toString();\n}\n\nfunction getWhiteList(allowedComponents: CustomElementDefinition[]): Schema {\n    const defaultSchemaClone = [...(defaultSchema.attributes['*'] ?? [])];\n    const asteriskAttributeWhitelist = defaultSchemaClone.filter((attr) => {\n        return attr !== 'height';\n    });\n    asteriskAttributeWhitelist.push('style');\n\n    const whitelist: Schema = {\n        ...defaultSchema,\n        tagNames: [\n            ...(defaultSchema.tagNames || []),\n            ...allowedComponents.map((component) => component.tagName),\n        ],\n        attributes: {\n            ...defaultSchema.attributes,\n            p: [\n                ...(defaultSchema.attributes.p ?? []),\n                ['className', 'MsoNormal'],\n            ], // Allow the class 'MsoNormal' on <p> elements\n            '*': asteriskAttributeWhitelist,\n        },\n    };\n\n    for (const component of allowedComponents) {\n        whitelist.attributes[component.tagName] = component.attributes;\n    }\n\n    return whitelist;\n}\n\n/**\n * Options for markdownToHTML.\n */\nexport interface MarkdownToHTMLOptions {\n    /**\n     * Set to `true` to convert all soft line breaks to hard line breaks.\n     */\n    forceHardLineBreaks?: boolean;\n    whitelist?: CustomElementDefinition[];\n}\n"]}
+{"version":3,"file":"markdown-parser.js","sourceRoot":"","sources":["../../../src/components/markdown/markdown-parser.ts"],"names":[],"mappings":"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","sourcesContent":["import { unified } from 'unified';\nimport remarkParse from 'remark-parse';\nimport remarkRehype from 'remark-rehype';\nimport remarkGfm from 'remark-gfm';\nimport rehypeParse from 'rehype-parse';\nimport rehypeExternalLinks from 'rehype-external-links';\nimport rehypeSanitize, { defaultSchema } from 'rehype-sanitize';\nimport rehypeStringify from 'rehype-stringify';\nimport rehypeRaw from 'rehype-raw';\nimport { visit } from 'unist-util-visit';\nimport { sanitizeStyle } from './sanitize-style';\nimport { Node } from 'unist';\nimport { Schema } from 'rehype-sanitize/lib';\nimport { createLazyLoadImagesPlugin } from './image-markdown-plugin';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\n\n/**\n * Takes a string as input and returns a new string\n * where the text has been converted to HTML.\n *\n * If the text is formatted with .md markdown, it will\n * be transformed to HTML.\n *\n * If the text already is in HTML it will be sanitized and\n * \"dangerous\" tags such as <script> will be removed.\n *\n * @param text - The string to convert.\n * @param options - Options for the conversions.\n * @returns The resulting HTML.\n */\nexport async function markdownToHTML(\n    text: string,\n    options?: MarkdownToHTMLOptions,\n): Promise<string> {\n    if (options?.forceHardLineBreaks) {\n        text = text.replace(/(?<!\\\\)([\\n\\r])/g, '  $1');\n    }\n\n    const file = await unified()\n        .use(remarkParse)\n        .use(remarkGfm)\n        .use(remarkRehype, { allowDangerousHtml: true })\n        .use(rehypeExternalLinks, { target: '_blank' })\n        .use(rehypeRaw)\n        .use(rehypeSanitize, {\n            ...getWhiteList(options?.whitelist ?? []),\n        })\n        .use(() => {\n            return (tree: Node) => {\n                // Run the sanitizeStyle function on all elements, to sanitize\n                // the value of the `style` attribute, if there is one.\n                visit(tree, 'element', sanitizeStyle);\n            };\n        })\n        .use(createLazyLoadImagesPlugin(options?.lazyLoadImages))\n        .use(rehypeStringify)\n        .process(text);\n\n    return file.toString();\n}\n\n/**\n * Sanitizes a given HTML string by removing dangerous tags and attributes.\n *\n * @param html - The string containing HTML to sanitize.\n * @param whitelist - Optional whitelist of custom components.\n * @returns The sanitized HTML string.\n */\nexport async function sanitizeHTML(\n    html: string,\n    whitelist?: CustomElementDefinition[],\n): Promise<string> {\n    const file = await unified()\n        .use(rehypeParse)\n        .use(rehypeSanitize, {\n            ...getWhiteList(whitelist ?? []),\n        })\n        .use(() => {\n            return (tree: Node) => {\n                // Run the sanitizeStyle function on all elements, to sanitize\n                // the value of the `style` attribute, if there is one.\n                visit(tree, 'element', sanitizeStyle);\n            };\n        })\n        .use(rehypeStringify)\n        .process(html);\n\n    return file.toString();\n}\n\nfunction getWhiteList(allowedComponents: CustomElementDefinition[]): Schema {\n    const defaultSchemaClone = [...(defaultSchema.attributes['*'] ?? [])];\n    const asteriskAttributeWhitelist = defaultSchemaClone.filter((attr) => {\n        return attr !== 'height';\n    });\n    asteriskAttributeWhitelist.push('style');\n\n    const whitelist: Schema = {\n        ...defaultSchema,\n        tagNames: [\n            ...(defaultSchema.tagNames || []),\n            ...allowedComponents.map((component) => component.tagName),\n        ],\n        attributes: {\n            ...defaultSchema.attributes,\n            p: [\n                ...(defaultSchema.attributes.p ?? []),\n                ['className', 'MsoNormal'],\n            ], // Allow the class 'MsoNormal' on <p> elements\n            '*': asteriskAttributeWhitelist,\n        },\n    };\n\n    for (const component of allowedComponents) {\n        whitelist.attributes[component.tagName] = component.attributes;\n    }\n\n    return whitelist;\n}\n\n/**\n * Options for markdownToHTML.\n */\nexport interface MarkdownToHTMLOptions {\n    /**\n     * Set to `true` to convert all soft line breaks to hard line breaks.\n     */\n    forceHardLineBreaks?: boolean;\n    whitelist?: CustomElementDefinition[];\n    lazyLoadImages?: boolean;\n}\n"]}

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

@@ -1,6 +1,7 @@
 import { h } from '@stencil/core';
 import { markdownToHTML } from './markdown-parser';
 import { globalConfig } from '../../global/config';
+import { ImageIntersectionObserver } from './image-intersection-observer';
 /**
  * The Markdown component receives markdown syntax
  * and renders it as HTML.
@@ -22,17 +23,22 @@ import { globalConfig } from '../../global/config';
  */
 export class Markdown {
   constructor() {
+    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
@@ -42,11 +48,25 @@ export class Markdown {
   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 is() { return "limel-markdown"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -101,6 +121,24 @@ export class Markdown {
           "text": "Whitelisted html elements.\n\nAny custom element added here will not be sanitized and thus rendered.\nCan also be set via `limel-config`. Setting this property will override\nthe global config."
         },
         "defaultValue": "globalConfig.markdownWhitelist"
+      },
+      "lazyLoadImages": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable lazy loading for images"
+        },
+        "attribute": "lazy-load-images",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"markdown.js","sourceRoot":"","sources":["../../../src/components/markdown/markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;;;;;;;;GAkBG;AAMH,MAAM,OAAO,QAAQ;;;qBAmBb,YAAY,CAAC,iBAAiB;;EAG3B,KAAK,CAAC,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;MACZ,sCAAsC;MACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACxB;EACL,CAAC;EAEM,KAAK,CAAC,gBAAgB;IACzB,IAAI,CAAC,WAAW,EAAE,CAAC;EACvB,CAAC;EAIM,MAAM;IACT,OAAO;MACH,WACI,EAAE,EAAC,UAAU,EACb,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,GACxD;KACL,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["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":"markdown.js","sourceRoot":"","sources":["../../../src/components/markdown/markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAC;AAE1E;;;;;;;;;;;;;;;;;;GAkBG;AAMH,MAAM,OAAO,QAAQ;;IAgDT,8BAAyB,GAAqC,IAAI,CAAC;;qBA7BvE,YAAY,CAAC,iBAAiB;0BAMV,KAAK;;EAGtB,KAAK,CAAC,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;MACZ,sCAAsC;MACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACxB;EACL,CAAC;EAKM,KAAK,CAAC,gBAAgB;IACzB,IAAI,CAAC,WAAW,EAAE,CAAC;EACvB,CAAC;EAEM,oBAAoB;IACvB,IAAI,CAAC,gCAAgC,EAAE,CAAC;EAC5C,CAAC;EAEM,MAAM;IACT,OAAO;MACH,WACI,EAAE,EAAC,UAAU,EACb,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,GACxD;KACL,CAAC;EACN,CAAC;EAEO,8BAA8B;IAClC,IAAI,IAAI,CAAC,cAAc,EAAE;MACrB,IAAI,CAAC,yBAAyB,GAAG,IAAI,yBAAyB,CAC1D,IAAI,CAAC,WAAW,CACnB,CAAC;KACL;EACL,CAAC;EAEO,gCAAgC;IACpC,IAAI,IAAI,CAAC,yBAAyB,EAAE;MAChC,IAAI,CAAC,yBAAyB,CAAC,UAAU,EAAE,CAAC;MAC5C,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC;KACzC;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["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"]}

package/dist/collection/components/text-editor/prosemirror-adapter/plugins/image/node.js

@@ -6,6 +6,13 @@ export function getImageNode(language) {
 export function getImageNodeMarkdownSerializer(language) {
   return { image: createImageNodeMarkdownSerializer(language) };
 }
+export 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.
@@ -24,16 +31,16 @@ export 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);
   };
 }
@@ -44,16 +51,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 (maxWidth) {
-    style.push(`max-width: ${maxWidth};`);
+  if (attrs.minWidth) {
+    style.push(`min-width: ${attrs.minWidth};`);
   }
-  const styleAttribute = style.length > 0 ? ` style="${style.join(' ')}"` : '';
-  return `<img src="${src}" alt="${alt}"${styleAttribute} />`;
+  if (attrs.maxWidth) {
+    style.push(`max-width: ${attrs.maxWidth};`);
+  }
+  const styleAttribute = style.length > 0 ? ` style="${style.join('')}"` : '';
+  return `<img src="${attrs.src}" alt="${attrs.alt}"${styleAttribute} />`;
 }
 function createImageNodeSpec(language) {
   return {
@@ -63,7 +79,10 @@ function createImageNodeSpec(language) {
       src: { default: '' },
       alt: { default: '' },
       fileInfoId: { default: '' },
+      height: { default: '' },
       width: { default: '' },
+      minHeight: { default: '' },
+      minWidth: { default: '' },
       maxWidth: { default: '100%' },
       state: { default: 'success' },
     },
@@ -121,16 +140,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;
 }
 //# sourceMappingURL=node.js.map

package/dist/collection/components/text-editor/prosemirror-adapter/plugins/image/node.js.map

@@ -1 +1 @@
-{"version":3,"file":"node.js","sourceRoot":"","sources":["../../../../../../src/components/text-editor/prosemirror-adapter/plugins/image/node.ts"],"names":[],"mappings":"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","sourcesContent":["import { NodeSpec, Node, DOMOutputSpec } from 'prosemirror-model';\nimport { EditorImageState } from '../../../text-editor.types';\nimport { MarkdownSerializerState } from 'prosemirror-markdown';\nimport { Languages } from '../../../../date-picker/date.types';\nimport translate from '../../../../../global/translations';\n\nexport const imageCache = new Map<string, HTMLImageElement>();\n\ntype MarkdownSerializerFunction = (\n    state: MarkdownSerializerState,\n    node: Node,\n) => void;\n\nexport function getImageNode(language: Languages): Record<string, NodeSpec> {\n    return { image: createImageNodeSpec(language) };\n}\n\nexport function getImageNodeMarkdownSerializer(\n    language: Languages,\n): Record<string, MarkdownSerializerFunction> {\n    return { image: createImageNodeMarkdownSerializer(language) };\n}\n\n/**\n * Recursively checks if a ProseMirror node or\n * any of its child nodes is an image node.\n */\nexport function hasImageNode(node: Node): boolean {\n    if (node.type.name === 'image') {\n        return true;\n    }\n\n    for (let i = 0; i < node.childCount; i++) {\n        const childNode = node.child(i);\n        if (hasImageNode(childNode)) {\n            return true;\n        }\n    }\n\n    return false;\n}\n\nfunction createImageNodeMarkdownSerializer(\n    language: Languages,\n): MarkdownSerializerFunction {\n    return (markdownSerializerState: MarkdownSerializerState, node: Node) => {\n        const { state, alt, src, width, maxWidth } = node.attrs;\n\n        if (!isEditorImageState(state)) {\n            return;\n        }\n\n        if (state === 'success') {\n            const imageHTML = getImageHTML(src, alt, width, maxWidth);\n            markdownSerializerState.write(imageHTML);\n\n            return;\n        }\n\n        const statusHTML = getStatusHTML(state, alt, language);\n        markdownSerializerState.write(statusHTML);\n    };\n}\n\nfunction getStatusHTML(\n    state: EditorImageState,\n    alt: string,\n    language: Languages,\n): string {\n    const key = state === 'failed' ? 'failed' : 'loading';\n    const text = translate.get(`editor-image-view.${key}`, language, {\n        filename: alt || 'file',\n    });\n\n    return `<span>${text}</span>`;\n}\n\nfunction getImageHTML(\n    src: string,\n    alt: string,\n    width: string,\n    maxWidth: string,\n): string {\n    const style = [];\n\n    if (width) {\n        style.push(`width: ${width};`);\n    }\n\n    if (maxWidth) {\n        style.push(`max-width: ${maxWidth};`);\n    }\n\n    const styleAttribute =\n        style.length > 0 ? ` style=\"${style.join(' ')}\"` : '';\n\n    return `<img src=\"${src}\" alt=\"${alt}\"${styleAttribute} />`;\n}\n\nexport interface ImageNodeAttrs {\n    src: string;\n    alt: string;\n    state: EditorImageState;\n    fileInfoId: string | number;\n    width?: string;\n    maxWidth?: string;\n}\n\nfunction createImageNodeSpec(language: Languages): NodeSpec {\n    return {\n        group: 'inline',\n        inline: true,\n        attrs: {\n            src: { default: '' },\n            alt: { default: '' },\n            fileInfoId: { default: '' },\n            width: { default: '' },\n            maxWidth: { default: '100%' },\n            state: { default: 'success' },\n        },\n        toDOM: (node): DOMOutputSpec => {\n            if (!isEditorImageState(node.attrs.state)) {\n                return;\n            }\n\n            if (node.attrs.state === 'success') {\n                return getOrCreateImageElement(node.attrs.fileInfoId, node);\n            }\n\n            return createStatusSpanForState(node.attrs.state, node, language);\n        },\n        parseDOM: [\n            {\n                tag: 'img',\n                getAttrs: (dom: HTMLElement): ImageNodeAttrs => {\n                    return {\n                        src: dom.getAttribute('src') || '',\n                        alt: dom.getAttribute('alt') || 'file',\n                        width: dom.style.width || '',\n                        maxWidth: '100%',\n                        state: 'success',\n                        fileInfoId: crypto.randomUUID(),\n                    };\n                },\n            },\n        ],\n    };\n}\n\nfunction isEditorImageState(state: unknown): state is EditorImageState {\n    return state === 'loading' || state === 'failed' || state === 'success';\n}\n\nfunction getOrCreateImageElement(\n    fileInfoId: string,\n    node: Node,\n): HTMLImageElement {\n    let img = imageCache.get(fileInfoId);\n\n    if (img) {\n        updateImageElement(img, node);\n    } else {\n        img = createImageElement(node);\n        imageCache.set(fileInfoId, img);\n    }\n\n    return img;\n}\n\nfunction createStatusSpanForState(\n    state: EditorImageState,\n    node: Node,\n    language: Languages,\n): HTMLSpanElement {\n    const statusKey = state === 'failed' ? 'failed' : 'loading';\n\n    return createStatusSpan(statusKey, node, language);\n}\n\nfunction createStatusSpan(\n    key: string,\n    node: Node,\n    language: Languages,\n): HTMLSpanElement {\n    const text = translate.get(`editor-image-view.${key}`, language, {\n        filename: node.attrs.alt || 'file',\n    });\n    const span = document.createElement('span');\n    span.textContent = text;\n\n    return span;\n}\n\nfunction updateImageElement(\n    img: HTMLImageElement,\n    node: Node,\n): HTMLImageElement {\n    img.alt = node.attrs.alt;\n    img.style.maxWidth = node.attrs.maxWidth;\n    img.style.width = node.attrs.width;\n\n    return img;\n}\n\nfunction createImageElement(node: Node): HTMLImageElement {\n    const img = document.createElement('img');\n    img.src = node.attrs.src;\n    img.alt = node.attrs.alt;\n    img.style.maxWidth = node.attrs.maxWidth;\n    img.style.width = node.attrs.width;\n\n    return img;\n}\n"]}
+{"version":3,"file":"node.js","sourceRoot":"","sources":["../../../../../../src/components/text-editor/prosemirror-adapter/plugins/image/node.ts"],"names":[],"mappings":"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","sourcesContent":["import { NodeSpec, Node, DOMOutputSpec } from 'prosemirror-model';\nimport { EditorImageState } from '../../../text-editor.types';\nimport { MarkdownSerializerState } from 'prosemirror-markdown';\nimport { Languages } from '../../../../date-picker/date.types';\nimport translate from '../../../../../global/translations';\n\nexport const imageCache = new Map<string, HTMLImageElement>();\n\ntype MarkdownSerializerFunction = (\n    state: MarkdownSerializerState,\n    node: Node,\n) => void;\n\nexport function getImageNode(language: Languages): Record<string, NodeSpec> {\n    return { image: createImageNodeSpec(language) };\n}\n\nexport function getImageNodeMarkdownSerializer(\n    language: Languages,\n): Record<string, MarkdownSerializerFunction> {\n    return { image: createImageNodeMarkdownSerializer(language) };\n}\n\nexport function applyImageStyles(img: HTMLImageElement, node: Node) {\n    img.style.height = node.attrs.height;\n    img.style.width = node.attrs.width;\n    img.style.minHeight = node.attrs.minHeight;\n    img.style.minWidth = node.attrs.minWidth;\n    img.style.maxWidth = node.attrs.maxWidth;\n}\n\n/**\n * Recursively checks if a ProseMirror node or\n * any of its child nodes is an image node.\n */\nexport function hasImageNode(node: Node): boolean {\n    if (node.type.name === 'image') {\n        return true;\n    }\n\n    for (let i = 0; i < node.childCount; i++) {\n        const childNode = node.child(i);\n        if (hasImageNode(childNode)) {\n            return true;\n        }\n    }\n\n    return false;\n}\n\nfunction createImageNodeMarkdownSerializer(\n    language: Languages,\n): MarkdownSerializerFunction {\n    return (markdownSerializerState: MarkdownSerializerState, node: Node) => {\n        const state = node.attrs.state;\n        if (!isEditorImageState(state)) {\n            return;\n        }\n\n        if (state === 'success') {\n            const imageHTML = getImageHTML(node.attrs as ImageNodeAttrs);\n            markdownSerializerState.write(imageHTML);\n\n            return;\n        }\n\n        const statusHTML = getStatusHTML(state, node.attrs.alt, language);\n        markdownSerializerState.write(statusHTML);\n    };\n}\n\nfunction getStatusHTML(\n    state: EditorImageState,\n    alt: string,\n    language: Languages,\n): string {\n    const key = state === 'failed' ? 'failed' : 'loading';\n    const text = translate.get(`editor-image-view.${key}`, language, {\n        filename: alt || 'file',\n    });\n\n    return `<span>${text}</span>`;\n}\n\nfunction getImageHTML(attrs: ImageNodeAttrs): string {\n    const style = [];\n\n    if (attrs.height) {\n        style.push(`height: ${attrs.height};`);\n    }\n\n    if (attrs.width) {\n        style.push(`width: ${attrs.width};`);\n    }\n\n    if (attrs.minHeight) {\n        style.push(`min-height: ${attrs.minHeight};`);\n    }\n\n    if (attrs.minWidth) {\n        style.push(`min-width: ${attrs.minWidth};`);\n    }\n\n    if (attrs.maxWidth) {\n        style.push(`max-width: ${attrs.maxWidth};`);\n    }\n\n    const styleAttribute = style.length > 0 ? ` style=\"${style.join('')}\"` : '';\n\n    return `<img src=\"${attrs.src}\" alt=\"${attrs.alt}\"${styleAttribute} />`;\n}\n\nexport interface ImageNodeAttrs {\n    src: string;\n    alt: string;\n    state: EditorImageState;\n    fileInfoId: string | number;\n    height?: string;\n    width?: string;\n    minHeight?: string;\n    minWidth?: string;\n    maxWidth?: string;\n}\n\nfunction createImageNodeSpec(language: Languages): NodeSpec {\n    return {\n        group: 'inline',\n        inline: true,\n        attrs: {\n            src: { default: '' },\n            alt: { default: '' },\n            fileInfoId: { default: '' },\n            height: { default: '' },\n            width: { default: '' },\n            minHeight: { default: '' },\n            minWidth: { default: '' },\n            maxWidth: { default: '100%' },\n            state: { default: 'success' },\n        },\n        toDOM: (node): DOMOutputSpec => {\n            if (!isEditorImageState(node.attrs.state)) {\n                return;\n            }\n\n            if (node.attrs.state === 'success') {\n                return getOrCreateImageElement(node.attrs.fileInfoId, node);\n            }\n\n            return createStatusSpanForState(node.attrs.state, node, language);\n        },\n        parseDOM: [\n            {\n                tag: 'img',\n                getAttrs: (dom: HTMLElement): ImageNodeAttrs => {\n                    return {\n                        src: dom.getAttribute('src') || '',\n                        alt: dom.getAttribute('alt') || 'file',\n                        width: dom.style.width || '',\n                        maxWidth: '100%',\n                        state: 'success',\n                        fileInfoId: crypto.randomUUID(),\n                    };\n                },\n            },\n        ],\n    };\n}\n\nfunction isEditorImageState(state: unknown): state is EditorImageState {\n    return state === 'loading' || state === 'failed' || state === 'success';\n}\n\nfunction getOrCreateImageElement(\n    fileInfoId: string,\n    node: Node,\n): HTMLImageElement {\n    let img = imageCache.get(fileInfoId);\n\n    if (img) {\n        updateImageElement(img, node);\n    } else {\n        img = createImageElement(node);\n        imageCache.set(fileInfoId, img);\n    }\n\n    return img;\n}\n\nfunction createStatusSpanForState(\n    state: EditorImageState,\n    node: Node,\n    language: Languages,\n): HTMLSpanElement {\n    const statusKey = state === 'failed' ? 'failed' : 'loading';\n\n    return createStatusSpan(statusKey, node, language);\n}\n\nfunction createStatusSpan(\n    key: string,\n    node: Node,\n    language: Languages,\n): HTMLSpanElement {\n    const text = translate.get(`editor-image-view.${key}`, language, {\n        filename: node.attrs.alt || 'file',\n    });\n    const span = document.createElement('span');\n    span.textContent = text;\n\n    return span;\n}\n\nfunction updateImageElement(\n    img: HTMLImageElement,\n    node: Node,\n): HTMLImageElement {\n    img.alt = node.attrs.alt;\n    applyImageStyles(img, node);\n\n    return img;\n}\n\nfunction createImageElement(node: Node): HTMLImageElement {\n    const img = document.createElement('img');\n    img.src = node.attrs.src;\n    img.alt = node.attrs.alt;\n    applyImageStyles(img, node);\n\n    return img;\n}\n"]}

package/dist/collection/components/text-editor/prosemirror-adapter/plugins/image/view.js

@@ -1,5 +1,6 @@
 import { Plugin } from 'prosemirror-state';
 import translate from '../../../../../global/translations';
+import { applyImageStyles } from './node';
 const MIN_WIDTH = 10;
 export const createImageViewPlugin = (language) => {
   return new Plugin({
@@ -50,7 +51,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);
@@ -115,19 +116,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();

package/dist/collection/components/text-editor/prosemirror-adapter/plugins/image/view.js.map

@@ -1 +1 @@
-{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../../../src/components/text-editor/prosemirror-adapter/plugins/image/view.ts"],"names":[],"mappings":"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","sourcesContent":["import { EditorView, NodeView } from 'prosemirror-view';\nimport { Node } from 'prosemirror-model';\nimport { Plugin } from 'prosemirror-state';\nimport { EditorImageState } from '../../../text-editor.types';\nimport translate from '../../../../../global/translations';\nimport { Languages } from '../../../../date-picker/date.types';\n\nconst MIN_WIDTH = 10;\n\nexport const createImageViewPlugin = (language: Languages) => {\n    return new Plugin({\n        props: {\n            nodeViews: {\n                image: (node, view, getPos) => {\n                    return new ImageView(node, view, getPos, language);\n                },\n            },\n        },\n    });\n};\n\nclass ImageView implements NodeView {\n    node: Node;\n    view: EditorView;\n    getPos: () => number;\n    dom: HTMLDivElement;\n    img: HTMLImageElement;\n    language: Languages;\n\n    public constructor(\n        node: Node,\n        view: EditorView,\n        getPos: () => number,\n        language: Languages,\n    ) {\n        this.node = node;\n        this.view = view;\n        this.getPos = getPos;\n        this.language = language;\n\n        this.dom = document.createElement('div');\n        this.dom.className = `image-wrapper state-${node.attrs.state}`;\n\n        this.img = document.createElement('img');\n        this.img.src = node.attrs.src;\n        this.img.alt = node.attrs.alt;\n        this.img.style.maxWidth = node.attrs.maxWidth;\n        this.img.style.width = node.attrs.width;\n\n        this.dom.appendChild(this.img);\n\n        this.transitionBetweenStates();\n    }\n\n    private createResizeHandle = (position: 'bottom-right' | 'top-left') => {\n        const handle = document.createElement('div');\n        handle.className = `resize-handle ${position}`;\n        handle.setAttribute('role', 'slider');\n        handle.setAttribute(\n            'aria-label',\n            translate.get('editor-image-view.resize-handle', this.language),\n        );\n        handle.setAttribute('tabindex', '0');\n        handle.setAttribute('aria-valuemin', MIN_WIDTH.toString());\n        handle.setAttribute('aria-valuenow', this.img.offsetWidth.toString());\n        handle.setAttribute('aria-valuetext', `${this.img.offsetWidth} pixels`);\n        handle.setAttribute('aria-grabbed', 'false');\n\n        handle.addEventListener('pointerdown', (e: PointerEvent) => {\n            handle.setAttribute('aria-grabbed', 'true');\n            this.onResizeStart(e, position);\n        });\n\n        return handle;\n    };\n\n    private onResizeStart = (\n        event: PointerEvent,\n        position: 'bottom-right' | 'top-left',\n    ) => {\n        event.preventDefault();\n        const handle = event.target as HTMLElement;\n\n        const startX = event.clientX;\n        const startWidth = this.img.offsetWidth;\n\n        const onPointerMove = (e: PointerEvent) => {\n            const delta = e.clientX - startX;\n            const widthDelta = position === 'top-left' ? -delta : delta;\n            const newWidth = Math.max(MIN_WIDTH, startWidth + widthDelta);\n\n            this.img.style.width = `${newWidth}px`;\n\n            const handles = this.dom.querySelectorAll('.resize-handle');\n            handles.forEach((resizeHandle) => {\n                resizeHandle.setAttribute('aria-valuenow', newWidth.toString());\n                resizeHandle.setAttribute(\n                    'aria-valuetext',\n                    `${newWidth} pixels`,\n                );\n            });\n        };\n\n        const onPointerUp = () => {\n            window.removeEventListener('pointermove', onPointerMove);\n            window.removeEventListener('pointerup', onPointerUp);\n            handle.setAttribute('aria-grabbed', 'false');\n\n            this.view.dispatch(\n                this.view.state.tr.setNodeMarkup(this.getPos(), undefined, {\n                    ...this.node.attrs,\n                    width: this.img.style.width,\n                    height: this.node.attrs.height,\n                }),\n            );\n        };\n\n        window.addEventListener('pointermove', onPointerMove);\n        window.addEventListener('pointerup', onPointerUp);\n    };\n\n    private createLoadingState = () => {\n        this.dom.setAttribute('aria-live', 'polite');\n        this.dom.setAttribute('aria-busy', 'true');\n        this.dom.setAttribute(\n            'aria-label',\n            translate.get('editor-image-view.loading', this.language, {\n                filename: this.node.attrs.alt || 'file',\n            }),\n        );\n\n        const spinnerElement = document.createElement('limel-linear-progress');\n        spinnerElement.setAttribute('indeterminate', 'true');\n        this.dom.appendChild(spinnerElement);\n    };\n\n    private createSuccessState = () => {\n        this.dom.setAttribute('aria-live', 'polite');\n        this.dom.setAttribute('aria-busy', 'false');\n        this.dom.setAttribute(\n            'aria-label',\n            translate.get('editor-image-view.success', this.language, {\n                filename: this.node.attrs.alt || 'file',\n            }),\n        );\n\n        const bottomRightHandle = this.createResizeHandle('bottom-right');\n        const topLeftHandle = this.createResizeHandle('top-left');\n\n        this.dom.appendChild(bottomRightHandle);\n        this.dom.appendChild(topLeftHandle);\n    };\n\n    private createFailedState = () => {\n        this.dom.setAttribute('aria-live', 'assertive');\n        this.dom.setAttribute('aria-busy', 'false');\n        this.dom.setAttribute(\n            'aria-label',\n            translate.get('editor-image-view.failed', this.language, {\n                filename: this.node.attrs.alt || 'file',\n            }),\n        );\n    };\n\n    private cleanUpPreviousState = () => {\n        Array.from(this.dom.childNodes).forEach((child) => {\n            if (!(child instanceof HTMLImageElement)) {\n                child.remove();\n            }\n        });\n    };\n\n    private transitionBetweenStates = () => {\n        this.cleanUpPreviousState();\n        this.dom.className = `image-wrapper state-${this.node.attrs.state}`;\n\n        const stateHandlers: Record<EditorImageState, () => void> = {\n            loading: this.createLoadingState,\n            success: this.createSuccessState,\n            failed: this.createFailedState,\n        };\n\n        const state: EditorImageState = this.node.attrs.state;\n        stateHandlers[state]?.();\n    };\n\n    private transitioningBetweenSuccessStates = (newNode: Node): boolean => {\n        return (\n            this.node.attrs.state === 'success' &&\n            newNode.attrs.state === 'success'\n        );\n    };\n\n    // Ensure that the existing NodeView is reused rather than recreated.\n    // Recreating the NodeView will cause flickering between states.\n    public update(node: Node): boolean {\n        if (!this.transitioningBetweenSuccessStates(node)) {\n            this.img.src = node.attrs.src;\n            this.img.alt = node.attrs.alt;\n            this.img.style.maxWidth = node.attrs.maxWidth;\n            this.img.style.width = node.attrs.width;\n        }\n\n        this.node = node;\n        this.transitionBetweenStates();\n\n        return true;\n    }\n}\n"]}
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../../../src/components/text-editor/prosemirror-adapter/plugins/image/view.ts"],"names":[],"mappings":"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","sourcesContent":["import { EditorView, NodeView } from 'prosemirror-view';\nimport { Node } from 'prosemirror-model';\nimport { Plugin } from 'prosemirror-state';\nimport { EditorImageState } from '../../../text-editor.types';\nimport translate from '../../../../../global/translations';\nimport { Languages } from '../../../../date-picker/date.types';\nimport { applyImageStyles } from './node';\n\nconst MIN_WIDTH = 10;\n\nexport const createImageViewPlugin = (language: Languages) => {\n    return new Plugin({\n        props: {\n            nodeViews: {\n                image: (node, view, getPos) => {\n                    return new ImageView(node, view, getPos, language);\n                },\n            },\n        },\n    });\n};\n\nclass ImageView implements NodeView {\n    node: Node;\n    view: EditorView;\n    getPos: () => number;\n    dom: HTMLDivElement;\n    img: HTMLImageElement;\n    language: Languages;\n\n    public constructor(\n        node: Node,\n        view: EditorView,\n        getPos: () => number,\n        language: Languages,\n    ) {\n        this.node = node;\n        this.view = view;\n        this.getPos = getPos;\n        this.language = language;\n\n        this.dom = document.createElement('div');\n        this.dom.className = `image-wrapper state-${node.attrs.state}`;\n\n        this.img = document.createElement('img');\n        this.img.src = node.attrs.src;\n        this.img.alt = node.attrs.alt;\n        applyImageStyles(this.img, node);\n\n        this.img.onload = () => {\n            this.persistDimensions();\n        };\n\n        this.dom.appendChild(this.img);\n\n        this.transitionBetweenStates();\n    }\n\n    private persistDimensions() {\n        this.view.dispatch(\n            this.view.state.tr.setNodeMarkup(this.getPos(), undefined, {\n                ...this.node.attrs,\n                height: `${this.img.offsetHeight}px`,\n                width: `${this.img.offsetWidth}px`,\n                minHeight: `${this.img.offsetHeight}px`,\n                minWidth: `${this.img.offsetWidth}px`,\n            }),\n        );\n    }\n\n    private createResizeHandle = (position: 'bottom-right' | 'top-left') => {\n        const handle = document.createElement('div');\n        handle.className = `resize-handle ${position}`;\n        handle.setAttribute('role', 'slider');\n        handle.setAttribute(\n            'aria-label',\n            translate.get('editor-image-view.resize-handle', this.language),\n        );\n        handle.setAttribute('tabindex', '0');\n        handle.setAttribute('aria-valuemin', MIN_WIDTH.toString());\n        handle.setAttribute('aria-valuenow', this.img.offsetWidth.toString());\n        handle.setAttribute('aria-valuetext', `${this.img.offsetWidth} pixels`);\n        handle.setAttribute('aria-grabbed', 'false');\n\n        handle.addEventListener('pointerdown', (e: PointerEvent) => {\n            handle.setAttribute('aria-grabbed', 'true');\n            this.onResizeStart(e, position);\n        });\n\n        return handle;\n    };\n\n    private onResizeStart = (\n        event: PointerEvent,\n        position: 'bottom-right' | 'top-left',\n    ) => {\n        event.preventDefault();\n        const handle = event.target as HTMLElement;\n\n        const startX = event.clientX;\n        const startWidth = this.img.offsetWidth;\n\n        const onPointerMove = (e: PointerEvent) => {\n            const delta = e.clientX - startX;\n            const widthDelta = position === 'top-left' ? -delta : delta;\n            const newWidth = Math.max(MIN_WIDTH, startWidth + widthDelta);\n\n            this.img.style.width = `${newWidth}px`;\n\n            const handles = this.dom.querySelectorAll('.resize-handle');\n            handles.forEach((resizeHandle) => {\n                resizeHandle.setAttribute('aria-valuenow', newWidth.toString());\n                resizeHandle.setAttribute(\n                    'aria-valuetext',\n                    `${newWidth} pixels`,\n                );\n            });\n        };\n\n        const onPointerUp = () => {\n            window.removeEventListener('pointermove', onPointerMove);\n            window.removeEventListener('pointerup', onPointerUp);\n            handle.setAttribute('aria-grabbed', 'false');\n\n            this.persistDimensions();\n        };\n\n        window.addEventListener('pointermove', onPointerMove);\n        window.addEventListener('pointerup', onPointerUp);\n    };\n\n    private createLoadingState = () => {\n        this.dom.setAttribute('aria-live', 'polite');\n        this.dom.setAttribute('aria-busy', 'true');\n        this.dom.setAttribute(\n            'aria-label',\n            translate.get('editor-image-view.loading', this.language, {\n                filename: this.node.attrs.alt || 'file',\n            }),\n        );\n\n        const spinnerElement = document.createElement('limel-linear-progress');\n        spinnerElement.setAttribute('indeterminate', 'true');\n        this.dom.appendChild(spinnerElement);\n    };\n\n    private createSuccessState = () => {\n        this.dom.setAttribute('aria-live', 'polite');\n        this.dom.setAttribute('aria-busy', 'false');\n        this.dom.setAttribute(\n            'aria-label',\n            translate.get('editor-image-view.success', this.language, {\n                filename: this.node.attrs.alt || 'file',\n            }),\n        );\n\n        const bottomRightHandle = this.createResizeHandle('bottom-right');\n        const topLeftHandle = this.createResizeHandle('top-left');\n\n        this.dom.appendChild(bottomRightHandle);\n        this.dom.appendChild(topLeftHandle);\n    };\n\n    private createFailedState = () => {\n        this.dom.setAttribute('aria-live', 'assertive');\n        this.dom.setAttribute('aria-busy', 'false');\n        this.dom.setAttribute(\n            'aria-label',\n            translate.get('editor-image-view.failed', this.language, {\n                filename: this.node.attrs.alt || 'file',\n            }),\n        );\n    };\n\n    private cleanUpPreviousState = () => {\n        Array.from(this.dom.childNodes).forEach((child) => {\n            if (!(child instanceof HTMLImageElement)) {\n                child.remove();\n            }\n        });\n    };\n\n    private transitionBetweenStates = () => {\n        this.cleanUpPreviousState();\n        this.dom.className = `image-wrapper state-${this.node.attrs.state}`;\n\n        const stateHandlers: Record<EditorImageState, () => void> = {\n            loading: this.createLoadingState,\n            success: this.createSuccessState,\n            failed: this.createFailedState,\n        };\n\n        const state: EditorImageState = this.node.attrs.state;\n        stateHandlers[state]?.();\n    };\n\n    private transitioningBetweenSuccessStates = (newNode: Node): boolean => {\n        return (\n            this.node.attrs.state === 'success' &&\n            newNode.attrs.state === 'success'\n        );\n    };\n\n    // Ensure that the existing NodeView is reused rather than recreated.\n    // Recreating the NodeView will cause flickering between states.\n    public update(node: Node): boolean {\n        if (!this.transitioningBetweenSuccessStates(node)) {\n            this.img.src = node.attrs.src;\n            this.img.alt = node.attrs.alt;\n            applyImageStyles(this.img, node);\n        }\n\n        this.node = node;\n        this.transitionBetweenStates();\n\n        return true;\n    }\n}\n"]}