@limetech/lime-elements 39.39.1 → 39.41.0

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

@@ -1,21 +1,39 @@
+import { isInlineImageTag, } from "../../../text-editor.types";
 import translate from "../../../../../global/translations";
 export const imageCache = new Map();
+export const IMAGE_ID_ATTRIBUTE = 'image-id';
 /**
- *
+ * The attribute names accepted for an inline-image tag. Backs the sanitizer
+ * whitelist built in `buildContentWhitelist`, so a stored tag keeps these
+ * attributes through parsing. The serializers here enumerate their own output
+ * attributes separately and are not driven by this list.
+ */
+export const INLINE_IMAGE_ATTRIBUTES = [
+    IMAGE_ID_ATTRIBUTE,
+    'width',
+    'height',
+    'alt',
+];
+/**
+ * Builds the `image` NodeSpec, wired for inline-image parsing/serialization
+ * when `inlineImages` is configured.
  * @param language
+ * @param inlineImages
  */
-export function getImageNode(language) {
-    return { image: createImageNodeSpec(language) };
+export function getImageNode(language, inlineImages) {
+    return { image: createImageNodeSpec(language, inlineImages) };
 }
 /**
- *
+ * Builds the markdown serializer for the `image` node, emitting the inline-image
+ * tag when `inlineImages` is configured and a `<img>` otherwise.
  * @param language
+ * @param inlineImages
  */
-export function getImageNodeMarkdownSerializer(language) {
-    return { image: createImageNodeMarkdownSerializer(language) };
+export function getImageNodeMarkdownSerializer(language, inlineImages) {
+    return { image: createImageNodeMarkdownSerializer(language, inlineImages) };
 }
 /**
- *
+ * Applies the node's stored dimensions to a rendered `<img>` element.
  * @param img
  * @param node
  */
@@ -27,8 +45,8 @@ export function applyImageStyles(img, node) {
     img.style.maxWidth = node.attrs.maxWidth;
 }
 /**
- * Recursively checks if a ProseMirror node or
- * any of its child nodes is an image node.
+ * Recursively checks if a ProseMirror node or any of its descendants is an
+ * image node.
  * @param node
  */
 export function hasImageNode(node) {
@@ -43,14 +61,20 @@ export function hasImageNode(node) {
     }
     return false;
 }
-function createImageNodeMarkdownSerializer(language) {
+function createImageNodeMarkdownSerializer(language, inlineImages) {
     return (markdownSerializerState, node) => {
         const state = node.attrs.state;
         if (!isEditorImageState(state)) {
             return;
         }
         if (state === 'success') {
-            const imageHTML = getImageHTML(node.attrs);
+            const attrs = node.attrs;
+            const tag = inlineImages && isInlineImageTag(inlineImages)
+                ? inlineImages
+                : undefined;
+            const imageHTML = tag && attrs.imageId
+                ? getInlineImageHTML(attrs, tag.tagName)
+                : getImageHTML(attrs);
             markdownSerializerState.write(imageHTML);
             return;
         }
@@ -58,6 +82,44 @@ function createImageNodeMarkdownSerializer(language) {
         markdownSerializerState.write(statusHTML);
     };
 }
+function escapeAttributeValue(value) {
+    return value
+        .replaceAll('&', '&amp;')
+        .replaceAll('"', '&quot;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;');
+}
+// Dimensions are emitted as CSS-unit strings (e.g. `width="300px"`), matching
+// what `applyImageStyles` reads back when the tag is re-parsed inside the
+// editor. The external renderer of this microformat (the `limebb-inline-image`
+// building block) must therefore treat `width`/`height` as CSS lengths, not as
+// bare HTML pixel counts.
+function getInlineImageHTML(attrs, tag) {
+    var _a;
+    const attributes = [
+        `${IMAGE_ID_ATTRIBUTE}="${escapeAttributeValue((_a = attrs.imageId) !== null && _a !== void 0 ? _a : '')}"`,
+        attrs.width ? `width="${escapeAttributeValue(attrs.width)}"` : '',
+        attrs.height ? `height="${escapeAttributeValue(attrs.height)}"` : '',
+        attrs.alt ? `alt="${escapeAttributeValue(attrs.alt)}"` : '',
+    ].filter(Boolean);
+    return `<${tag} ${attributes.join(' ')}></${tag}>`;
+}
+function buildInlineImageDOMAttrs(attrs) {
+    var _a;
+    const result = {
+        [IMAGE_ID_ATTRIBUTE]: (_a = attrs.imageId) !== null && _a !== void 0 ? _a : '',
+    };
+    if (attrs.alt) {
+        result.alt = attrs.alt;
+    }
+    if (attrs.width) {
+        result.width = attrs.width;
+    }
+    if (attrs.height) {
+        result.height = attrs.height;
+    }
+    return result;
+}
 function getStatusHTML(state, alt, language) {
     const key = state === 'failed' ? 'failed' : 'loading';
     const text = translate.get(`editor-image-view.${key}`, language, {
@@ -66,26 +128,23 @@ function getStatusHTML(state, alt, language) {
     return `<span>${text}</span>`;
 }
 function getImageHTML(attrs) {
-    const style = [];
-    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 (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} />`;
+    const dimensions = [
+        ['height', attrs.height],
+        ['width', attrs.width],
+        ['min-height', attrs.minHeight],
+        ['min-width', attrs.minWidth],
+        ['max-width', attrs.maxWidth],
+    ];
+    const style = dimensions
+        .filter(([, value]) => value)
+        .map(([property, value]) => `${property}: ${value};`)
+        .join('');
+    const styleAttribute = style
+        ? ` style="${escapeAttributeValue(style)}"`
+        : '';
+    return `<img src="${escapeAttributeValue(attrs.src)}" alt="${escapeAttributeValue(attrs.alt)}"${styleAttribute} />`;
 }
-function createImageNodeSpec(language) {
+function createImageNodeSpec(language, inlineImages) {
     return {
         group: 'inline',
         inline: true,
@@ -93,6 +152,7 @@ function createImageNodeSpec(language) {
             src: { default: '' },
             alt: { default: '' },
             fileInfoId: { default: '' },
+            imageId: { default: '' },
             height: { default: '' },
             width: { default: '' },
             minHeight: { default: '' },
@@ -100,33 +160,79 @@ function createImageNodeSpec(language) {
             maxWidth: { default: '100%' },
             state: { default: 'success' },
         },
-        toDOM: (node) => {
-            if (!isEditorImageState(node.attrs.state)) {
-                return;
-            }
-            if (node.attrs.state === 'success') {
-                return getOrCreateImageElement(node.attrs.fileInfoId, node);
-            }
+        toDOM: createImageToDOM(language, inlineImages),
+        parseDOM: createImageParseDOM(inlineImages),
+    };
+}
+function createImageToDOM(language, inlineImages) {
+    return (node) => {
+        if (!isEditorImageState(node.attrs.state)) {
+            return;
+        }
+        if (node.attrs.state !== 'success') {
             return createStatusSpanForState(node.attrs.state, node, language);
-        },
-        parseDOM: [
-            {
-                tag: 'img',
-                getAttrs: (dom) => {
-                    return {
-                        src: dom.getAttribute('src') || '',
-                        alt: dom.getAttribute('alt') || 'file',
-                        width: dom.style.width || '',
-                        height: dom.style.height || '',
-                        maxWidth: '100%',
-                        state: 'success',
-                        fileInfoId: crypto.randomUUID(),
-                    };
-                },
-            },
-        ],
+        }
+        // Emit the inline-image tag for HTML serialization and clipboard;
+        // on-screen rendering comes from the NodeView, not this.
+        const tag = inlineImages && isInlineImageTag(inlineImages)
+            ? inlineImages
+            : undefined;
+        if (tag && node.attrs.imageId) {
+            return [
+                tag.tagName,
+                buildInlineImageDOMAttrs(node.attrs),
+            ];
+        }
+        return getOrCreateImageElement(node.attrs.fileInfoId, node);
     };
 }
+function createImageParseDOM(inlineImages) {
+    const rules = [];
+    const tag = inlineImages && isInlineImageTag(inlineImages)
+        ? inlineImages
+        : undefined;
+    if (tag) {
+        rules.push({
+            tag: tag.tagName,
+            getAttrs: (dom) => {
+                const imageId = dom.getAttribute(IMAGE_ID_ATTRIBUTE);
+                // Skip malformed tags without an id; parsing them would
+                // produce a broken image from an empty getUrl('').
+                if (!imageId) {
+                    return false;
+                }
+                return {
+                    src: tag.getUrl(imageId),
+                    // Preserve an absent alt as empty so an id-only tag
+                    // serializes back to the same markup instead of gaining
+                    // a synthetic alt, keeping the round-trip stable.
+                    alt: dom.getAttribute('alt') || '',
+                    imageId: imageId,
+                    width: dom.getAttribute('width') || '',
+                    height: dom.getAttribute('height') || '',
+                    maxWidth: '100%',
+                    state: 'success',
+                    fileInfoId: crypto.randomUUID(),
+                };
+            },
+        });
+    }
+    rules.push({
+        tag: 'img',
+        getAttrs: (dom) => {
+            return {
+                src: dom.getAttribute('src') || '',
+                alt: dom.getAttribute('alt') || 'file',
+                width: dom.style.width || '',
+                height: dom.style.height || '',
+                maxWidth: '100%',
+                state: 'success',
+                fileInfoId: crypto.randomUUID(),
+            };
+        },
+    });
+    return rules;
+}
 function isEditorImageState(state) {
     return state === 'loading' || state === 'failed' || state === 'success';
 }

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

@@ -119,7 +119,12 @@ class ImageView {
         this.img.alt = node.attrs.alt;
         applyImageStyles(this.img, node);
         this.img.addEventListener('load', () => {
-            this.persistDimensions();
+            // Only measure a freshly inserted image. Re-measuring one that
+            // already has a width would rewrite it against the current
+            // container size and emit a spurious change event on every load.
+            if (!this.node.attrs.width) {
+                this.persistDimensions();
+            }
         });
         this.dom.append(this.img);
         this.transitionBetweenStates();

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

@@ -24,6 +24,7 @@ import { createMenuStateTrackingPlugin } from "./plugins/menu-state-tracking-plu
 import { createActionBarInteractionPlugin } from "./plugins/menu-action-interaction-plugin";
 import { createNodeSpec } from "../utils/plugin-factory";
 import { createTriggerPlugin } from "./plugins/trigger/factory";
+import { isInlineImageTag, } from "../text-editor.types";
 import { getTableNodes, getTableEditingPlugins } from "./plugins/table-plugin";
 import { getImageNode, imageCache } from "./plugins/image/node";
 import { getMetadataFromDoc, hasMetadataChanged, } from "../utils/metadata-utils";
@@ -270,6 +271,7 @@ export class ProsemirrorAdapter {
     }
     componentWillLoad() {
         this.getActionBarItems();
+        this.validatedInlineImages = this.validateInlineImages();
         this.setupContentConverter();
     }
     componentDidLoad() {
@@ -295,7 +297,7 @@ export class ProsemirrorAdapter {
         (_e = this.view) === null || _e === void 0 ? void 0 : _e.destroy();
     }
     render() {
-        return (h(Host, { key: '46d850f4bcc3d64ba180276ec9080f2b5b38470e', onFocus: this.handleFocus }, h("div", { key: '7695f4a898726c5e2db5d18257dda0e2e1616ed7', id: "editor" }), this.renderToolbar(), this.renderLinkMenu()));
+        return (h(Host, { key: '27949dced1fd61d1a80c42f58cf1699f05acb52e', onFocus: this.handleFocus }, h("div", { key: '75e941459326f0fb8f8d5042becd570e06cd99fa', id: "editor" }), this.renderToolbar(), this.renderLinkMenu()));
     }
     renderToolbar() {
         if (this.actionBarItems.length === 0 || this.ui === 'no-toolbar') {
@@ -309,12 +311,26 @@ export class ProsemirrorAdapter {
         }
         return (h("limel-portal", { containerId: this.portalId, visible: this.isLinkMenuOpen, openDirection: "top", inheritParentWidth: true, anchor: this.actionBarElement }, h("limel-text-editor-link-menu", { link: this.link, isOpen: this.isLinkMenuOpen, onLinkChange: this.handleLinkChange, onCancel: this.handleCancelLinkMenu, onSave: this.handleSaveLinkMenu })));
     }
+    validateInlineImages() {
+        const config = this.inlineImages;
+        // Require a hyphen: the tag name becomes a sanitizer whitelist key, so a
+        // built-in like `img` would hijack its rules and strip `src` from every
+        // real image. Custom element names always have a hyphen; built-ins never.
+        const isValidTagName = (name) => /^[a-z][a-z0-9._-]*$/.test(name) && name.includes('-');
+        if (config &&
+            isInlineImageTag(config) &&
+            !isValidTagName(config.tagName)) {
+            console.error(`inlineImages.tagName "${config.tagName}" is not a valid custom element name; ignoring inlineImages config.`);
+            return undefined;
+        }
+        return config;
+    }
     setupContentConverter() {
         if (this.contentType === 'markdown') {
-            this.contentConverter = new MarkdownConverter(this.customElements, this.language);
+            this.contentConverter = new MarkdownConverter(this.customElements, this.language, this.validatedInlineImages);
         }
         else if (this.contentType === 'html') {
-            this.contentConverter = new HTMLConverter(this.customElements);
+            this.contentConverter = new HTMLConverter(this.customElements, this.validatedInlineImages);
         }
         else {
             throw new Error(`Unsupported content type: ${this.contentType}. Only 'markdown' and 'html' are supported.`);
@@ -347,7 +363,7 @@ export class ProsemirrorAdapter {
         if (this.contentType === 'html') {
             nodes = nodes.append(getTableNodes());
         }
-        nodes = nodes.append(getImageNode(this.language));
+        nodes = nodes.append(getImageNode(this.language, this.validatedInlineImages));
         return new Schema({
             nodes: nodes,
             marks: schema.spec.marks.append({
@@ -375,7 +391,7 @@ export class ProsemirrorAdapter {
                 keymap(this.menuCommandFactory.buildKeymap()),
                 createTriggerPlugin(this.triggerCharacters, this.contentConverter),
                 createLinkPlugin(this.handleNewLinkSelection),
-                createImageInserterPlugin(this.imagePasted.emit),
+                createImageInserterPlugin(this.imagePasted.emit, this.validatedInlineImages),
                 createImageViewPlugin(this.language),
                 createMenuStateTrackingPlugin(editorMenuTypesArray, this.menuCommandFactory, this.updateActiveActionBarItems),
                 createActionBarInteractionPlugin(this.menuCommandFactory),
@@ -555,6 +571,36 @@ export class ProsemirrorAdapter {
                 "setter": false,
                 "defaultValue": "[]"
             },
+            "inlineImages": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "InlineImages",
+                    "resolved": "InlineImageSrc | InlineImageTag",
+                    "references": {
+                        "InlineImages": {
+                            "location": "import",
+                            "path": "../text-editor.types",
+                            "id": "src/components/text-editor/text-editor.types.ts::InlineImages",
+                            "referenceLocation": "InlineImages"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "private",
+                            "text": undefined
+                        }, {
+                            "name": "alpha",
+                            "text": undefined
+                        }],
+                    "text": "Configures inline image support. When set, the editor owns the paste +\nupload lifecycle and persists images either as the configured tag\ncarrying only a file id (`InlineImageTag`), or as a plain `<img src>`\n(`InlineImageSrc`)."
+                },
+                "getter": false,
+                "setter": false
+            },
             "triggerCharacters": {
                 "type": "unknown",
                 "mutable": false,

package/dist/collection/components/text-editor/text-editor.js

@@ -14,8 +14,8 @@ import { createRandomString } from "../../util/random-string";
  * @exampleComponent limel-example-text-editor-with-markdown
  * @exampleComponent limel-example-text-editor-with-html
  * @exampleComponent limel-example-text-editor-with-tables
- * @exampleComponent limel-example-text-editor-with-inline-images-file-storage
  * @exampleComponent limel-example-text-editor-with-inline-images-base64
+ * @exampleComponent limel-example-text-editor-with-inline-images-custom-tag
  * @exampleComponent limel-example-text-editor-allow-resize
  * @exampleComponent limel-example-text-editor-size
  * @exampleComponent limel-example-text-editor-ui
@@ -175,13 +175,13 @@ export class TextEditor {
         await ((_a = this.adapterElement) === null || _a === void 0 ? void 0 : _a.clear());
     }
     render() {
-        return (h(Host, { key: '12f7643f82a4899efd112dc74e67fbd79be64d9f' }, h("limel-notched-outline", { key: '109e7c03874e141f073a05882ca48188adaced72', labelId: this.editorId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, this.renderEditor(), this.renderPlaceholder()), this.renderHelperLine()));
+        return (h(Host, { key: '14e06e648e7625dd05901740f172c0b93bd1b494' }, h("limel-notched-outline", { key: '81acfc60c0b5a59175c33163e9436d17f27a480a', labelId: this.editorId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, this.renderEditor(), this.renderPlaceholder()), this.renderHelperLine()));
     }
     renderEditor() {
         if (this.readonly) {
             return (h("limel-markdown", { slot: "content", value: this.value, "aria-controls": this.helperText ? this.helperTextId : undefined, id: this.editorId }));
         }
-        return (h("limel-prosemirror-adapter", { ref: (el) => (this.adapterElement = el), slot: "content", "aria-placeholder": this.placeholder, contentType: this.contentType, onChange: this.handleChange, onImagePasted: this.handleImagePasted, onImageRemoved: this.handleImageRemoved, onMetadataChange: this.handleMetadataChange, customElements: this.customElements, value: this.value, "aria-controls": this.helperText ? this.helperTextId : undefined, id: this.editorId, "aria-disabled": this.disabled, "aria-invalid": this.invalid, "aria-required": this.required, language: this.language, triggerCharacters: this.triggers, disabled: this.disabled, ui: this.ui }));
+        return (h("limel-prosemirror-adapter", { ref: (el) => (this.adapterElement = el), slot: "content", "aria-placeholder": this.placeholder, contentType: this.contentType, onChange: this.handleChange, onImagePasted: this.handleImagePasted, onImageRemoved: this.handleImageRemoved, onMetadataChange: this.handleMetadataChange, customElements: this.customElements, inlineImages: this.inlineImages, value: this.value, "aria-controls": this.helperText ? this.helperTextId : undefined, id: this.editorId, "aria-disabled": this.disabled, "aria-invalid": this.invalid, "aria-required": this.required, language: this.language, triggerCharacters: this.triggers, disabled: this.disabled, ui: this.ui }));
     }
     renderPlaceholder() {
         if (!this.placeholder || this.value) {
@@ -418,6 +418,36 @@ export class TextEditor {
                 "setter": false,
                 "defaultValue": "[]"
             },
+            "inlineImages": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "InlineImages",
+                    "resolved": "InlineImageSrc | InlineImageTag",
+                    "references": {
+                        "InlineImages": {
+                            "location": "import",
+                            "path": "./text-editor.types",
+                            "id": "src/components/text-editor/text-editor.types.ts::InlineImages",
+                            "referenceLocation": "InlineImages"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "private",
+                            "text": undefined
+                        }, {
+                            "name": "alpha",
+                            "text": undefined
+                        }],
+                    "text": "Configures inline image support: the editor owns the paste lifecycle and\nresize, the consumer owns upload, storage format, and URL resolution."
+                },
+                "getter": false,
+                "setter": false
+            },
             "triggers": {
                 "type": "unknown",
                 "mutable": false,

package/dist/collection/components/text-editor/text-editor.types.js

@@ -1 +1,10 @@
-export {};
+/**
+ * Narrows `InlineImages` to its tag shape, exposing `tagName`/`getUrl`.
+ *
+ * @param config - the inline-images configuration to test
+ * @returns whether images are persisted as a custom id-carrying element
+ * @alpha
+ */
+export function isInlineImageTag(config) {
+    return 'tagName' in config;
+}

package/dist/collection/components/text-editor/utils/content-type-converter.js

@@ -1 +1,30 @@
-export {};
+import { isInlineImageTag } from "../text-editor.types";
+import { INLINE_IMAGE_ATTRIBUTES } from "../prosemirror-adapter/plugins/image/node";
+/**
+ * Build the sanitization whitelist for editor content: the consumer's custom
+ * elements, plus (when inline images are configured) the inline-image tag so it
+ * survives parsing into an image node. Shared by all content converters.
+ *
+ * @param customNodes
+ * @param inlineImages
+ * @private
+ */
+export function buildContentWhitelist(customNodes, inlineImages) {
+    if (!inlineImages || !isInlineImageTag(inlineImages)) {
+        return customNodes;
+    }
+    // Guard the boundary independently of the upstream `validateInlineImages`
+    // check: the tag name becomes a sanitizer whitelist key, so a built-in like
+    // `img` (no hyphen) would hijack its rules and strip `src` from every real
+    // image. Custom element names always contain a hyphen; built-ins never do.
+    if (!inlineImages.tagName.includes('-')) {
+        return customNodes;
+    }
+    return [
+        ...customNodes,
+        {
+            tagName: inlineImages.tagName,
+            attributes: [...INLINE_IMAGE_ATTRIBUTES],
+        },
+    ];
+}

package/dist/collection/components/text-editor/utils/html-converter.js

@@ -1,3 +1,4 @@
+import { buildContentWhitelist, } from "./content-type-converter";
 import { sanitizeHTML } from "../../markdown/markdown-parser";
 import { DOMSerializer } from "prosemirror-model";
 import { hasImageNode } from "../prosemirror-adapter/plugins/image/node";
@@ -6,9 +7,9 @@ import { hasCustomElementNode } from "./has-custom-element-node";
  * @private
  */
 export class HTMLConverter {
-    constructor(plugins) {
+    constructor(plugins, inlineImages) {
         this.parseAsHTML = (text) => {
-            return sanitizeHTML(text, this.customNodes);
+            return sanitizeHTML(text, buildContentWhitelist(this.customNodes, this.inlineImages));
         };
         this.serialize = (view) => {
             if (view.state.doc.textContent.trim() === '' &&
@@ -21,5 +22,6 @@ export class HTMLConverter {
             return div.innerHTML;
         };
         this.customNodes = plugins;
+        this.inlineImages = inlineImages;
     }
 }

package/dist/collection/components/text-editor/utils/markdown-converter.js

@@ -1,3 +1,4 @@
+import { buildContentWhitelist, } from "./content-type-converter";
 import { MarkdownSerializer, defaultMarkdownSerializer, } from "prosemirror-markdown";
 import { markdownToHTML } from "../../markdown/markdown-parser";
 import { getImageNodeMarkdownSerializer, hasImageNode, } from "../prosemirror-adapter/plugins/image/node";
@@ -15,12 +16,12 @@ const createMarkdownSerializerFunction = (config) => {
         state.write(tagClose);
     };
 };
-const buildMarkdownSerializer = (plugins, language) => {
+const buildMarkdownSerializer = (plugins, language, inlineImages) => {
     const customNodes = {};
     for (const plugin of plugins) {
         customNodes[plugin.tagName] = createMarkdownSerializerFunction(plugin);
     }
-    const nodes = Object.assign(Object.assign(Object.assign({}, defaultMarkdownSerializer.nodes), getImageNodeMarkdownSerializer(language)), customNodes);
+    const nodes = Object.assign(Object.assign(Object.assign({}, defaultMarkdownSerializer.nodes), getImageNodeMarkdownSerializer(language, inlineImages)), customNodes);
     const marks = Object.assign(Object.assign({}, defaultMarkdownSerializer.marks), { strikethrough: {
             open: '~~',
             close: '~~',
@@ -33,9 +34,11 @@ const buildMarkdownSerializer = (plugins, language) => {
  * @private
  */
 export class MarkdownConverter {
-    constructor(plugins, language) {
+    constructor(plugins, language, inlineImages) {
         this.parseAsHTML = (text) => {
-            return markdownToHTML(text, { whitelist: this.customNodes });
+            return markdownToHTML(text, {
+                whitelist: buildContentWhitelist(this.customNodes, this.inlineImages),
+            });
         };
         this.serialize = (view) => {
             if (view.state.doc.textContent.trim() === '' &&
@@ -45,7 +48,8 @@ export class MarkdownConverter {
             }
             return this.markdownSerializer.serialize(view.state.doc);
         };
-        this.markdownSerializer = buildMarkdownSerializer(plugins, language);
+        this.markdownSerializer = buildMarkdownSerializer(plugins, language, inlineImages);
         this.customNodes = plugins;
+        this.inlineImages = inlineImages;
     }
 }

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 export { g as globalConfig } from './config-Dnt5w_Bp.js';
 export { _ as _mapLayout } from './layout-C4zsCPOF.js';
-export { E as EditorMenuTypes, L as LevelMapping, M as MouseButtons, e as editorMenuTypesArray } from './types-BWYo6dLf.js';
+export { E as EditorMenuTypes, L as LevelMapping, M as MouseButtons, e as editorMenuTypesArray, i as isInlineImageTag } from './types-C_Yu8dOg.js';
 export { r as resizeImage } from './image-resize-DPcww8rE.js';
 export { r as redrawComponents } from './dispatch-resize-event-z_E3sq3p.js';