@limetech/lime-elements 39.40.0 → 39.42.0

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

@@ -1,9 +1,9 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BGxJfR2f.js';
-import { E as EditorMenuTypes, L as LevelMapping, M as MouseButtons, e as editorMenuTypesArray } from './types-BWYo6dLf.js';
+import { E as EditorMenuTypes, L as LevelMapping, i as isInlineImageTag, M as MouseButtons, e as editorMenuTypesArray } from './types-C_Yu8dOg.js';
 import { g as getLinkAttributes, m as markdownToHTML, s as sanitizeHTML } from './markdown-parser-Blt6ZFY0.js';
 import { h as cloneDeep } from './cloneDeep-CL7UD3mR.js';
+import { t as translate } from './translations-Cb9R_zmF.js';
 import { c as decodeHTML, e as decodeHTMLStrict } from './index-CbciMfiU.js';
-import { t as translate } from './translations-EPnIW0K5.js';
 import { c as createRandomString } from './random-string-JbKhhoXs.js';
 import { i as isItem } from './is-item-CrvUOVvg.js';
 import { c as createFileInfo } from './files-CZAZotms.js';
@@ -15829,6 +15829,307 @@ const menuTranslationIDs = {
     code: 'editor-menu.code',
 };
 
+const imageCache = new Map();
+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.
+ */
+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
+ */
+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
+ */
+function getImageNodeMarkdownSerializer(language, inlineImages) {
+    return { image: createImageNodeMarkdownSerializer(language, inlineImages) };
+}
+/**
+ * Applies the node's stored dimensions to a rendered `<img>` element.
+ * @param img
+ * @param node
+ */
+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 descendants is an
+ * image node.
+ * @param node
+ */
+function hasImageNode(node) {
+    if (node.type.name === 'image') {
+        return true;
+    }
+    for (let i = 0; i < node.childCount; i++) {
+        const childNode = node.child(i);
+        if (hasImageNode(childNode)) {
+            return true;
+        }
+    }
+    return false;
+}
+function createImageNodeMarkdownSerializer(language, inlineImages) {
+    return (markdownSerializerState, node) => {
+        const state = node.attrs.state;
+        if (!isEditorImageState(state)) {
+            return;
+        }
+        if (state === 'success') {
+            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;
+        }
+        const statusHTML = getStatusHTML(state, node.attrs.alt, 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, {
+        filename: alt || 'file',
+    });
+    return `<span>${text}</span>`;
+}
+function getImageHTML(attrs) {
+    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, inlineImages) {
+    return {
+        group: 'inline',
+        inline: true,
+        attrs: {
+            src: { default: '' },
+            alt: { default: '' },
+            fileInfoId: { default: '' },
+            imageId: { default: '' },
+            height: { default: '' },
+            width: { default: '' },
+            minHeight: { default: '' },
+            minWidth: { default: '' },
+            maxWidth: { default: '100%' },
+            state: { default: 'success' },
+        },
+        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);
+        }
+        // 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';
+}
+function getOrCreateImageElement(fileInfoId, node) {
+    let img = imageCache.get(fileInfoId);
+    if (img) {
+        updateImageElement(img, node);
+    }
+    else {
+        img = createImageElement(node);
+        imageCache.set(fileInfoId, img);
+    }
+    return img;
+}
+function createStatusSpanForState(state, node, language) {
+    const statusKey = state === 'failed' ? 'failed' : 'loading';
+    return createStatusSpan(statusKey, node, language);
+}
+function createStatusSpan(key, node, language) {
+    const text = translate.get(`editor-image-view.${key}`, language, {
+        filename: node.attrs.alt || 'file',
+    });
+    const span = document.createElement('span');
+    span.textContent = text;
+    return span;
+}
+function updateImageElement(img, node) {
+    img.alt = node.attrs.alt;
+    applyImageStyles(img, node);
+    return img;
+}
+function createImageElement(node) {
+    const img = document.createElement('img');
+    img.src = node.attrs.src;
+    img.alt = node.attrs.alt;
+    applyImageStyles(img, node);
+    return img;
+}
+
+/**
+ * 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
+ */
+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],
+        },
+    ];
+}
+
 /* eslint-disable no-bitwise */
 
 const decodeCache = {};
@@ -24671,173 +24972,6 @@ class MarkdownSerializerState {
     }
 }
 
-const imageCache = new Map();
-/**
- *
- * @param language
- */
-function getImageNode(language) {
-    return { image: createImageNodeSpec(language) };
-}
-/**
- *
- * @param language
- */
-function getImageNodeMarkdownSerializer(language) {
-    return { image: createImageNodeMarkdownSerializer(language) };
-}
-/**
- *
- * @param img
- * @param node
- */
-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.
- * @param node
- */
-function hasImageNode(node) {
-    if (node.type.name === 'image') {
-        return true;
-    }
-    for (let i = 0; i < node.childCount; i++) {
-        const childNode = node.child(i);
-        if (hasImageNode(childNode)) {
-            return true;
-        }
-    }
-    return false;
-}
-function createImageNodeMarkdownSerializer(language) {
-    return (markdownSerializerState, node) => {
-        const state = node.attrs.state;
-        if (!isEditorImageState(state)) {
-            return;
-        }
-        if (state === 'success') {
-            const imageHTML = getImageHTML(node.attrs);
-            markdownSerializerState.write(imageHTML);
-            return;
-        }
-        const statusHTML = getStatusHTML(state, node.attrs.alt, language);
-        markdownSerializerState.write(statusHTML);
-    };
-}
-function getStatusHTML(state, alt, language) {
-    const key = state === 'failed' ? 'failed' : 'loading';
-    const text = translate.get(`editor-image-view.${key}`, language, {
-        filename: alt || 'file',
-    });
-    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} />`;
-}
-function createImageNodeSpec(language) {
-    return {
-        group: 'inline',
-        inline: true,
-        attrs: {
-            src: { default: '' },
-            alt: { default: '' },
-            fileInfoId: { default: '' },
-            height: { default: '' },
-            width: { default: '' },
-            minHeight: { default: '' },
-            minWidth: { default: '' },
-            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);
-            }
-            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(),
-                    };
-                },
-            },
-        ],
-    };
-}
-function isEditorImageState(state) {
-    return state === 'loading' || state === 'failed' || state === 'success';
-}
-function getOrCreateImageElement(fileInfoId, node) {
-    let img = imageCache.get(fileInfoId);
-    if (img) {
-        updateImageElement(img, node);
-    }
-    else {
-        img = createImageElement(node);
-        imageCache.set(fileInfoId, img);
-    }
-    return img;
-}
-function createStatusSpanForState(state, node, language) {
-    const statusKey = state === 'failed' ? 'failed' : 'loading';
-    return createStatusSpan(statusKey, node, language);
-}
-function createStatusSpan(key, node, language) {
-    const text = translate.get(`editor-image-view.${key}`, language, {
-        filename: node.attrs.alt || 'file',
-    });
-    const span = document.createElement('span');
-    span.textContent = text;
-    return span;
-}
-function updateImageElement(img, node) {
-    img.alt = node.attrs.alt;
-    applyImageStyles(img, node);
-    return img;
-}
-function createImageElement(node) {
-    const img = document.createElement('img');
-    img.src = node.attrs.src;
-    img.alt = node.attrs.alt;
-    applyImageStyles(img, node);
-    return img;
-}
-
 /**
  * Recursively checks if a ProseMirror node or
  * any of its child nodes is a registered custom element node.
@@ -24873,12 +25007,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: '~~',
@@ -24891,9 +25025,11 @@ const buildMarkdownSerializer = (plugins, language) => {
  * @private
  */
 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() === '' &&
@@ -24903,8 +25039,9 @@ 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;
     }
 }
 
@@ -24912,9 +25049,9 @@ class MarkdownConverter {
  * @private
  */
 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() === '' &&
@@ -24927,6 +25064,7 @@ class HTMLConverter {
             return div.innerHTML;
         };
         this.customNodes = plugins;
+        this.inlineImages = inlineImages;
     }
 }
 
@@ -25327,12 +25465,12 @@ const linkMarkSpec = {
 };
 
 const pluginKey = new PluginKey('imageInserterPlugin');
-const createImageInserterPlugin = (imagePastedCallback) => {
+const createImageInserterPlugin = (imagePastedCallback, inlineImages) => {
     return new Plugin({
         key: pluginKey,
         props: {
             handlePaste: (view, event, slice) => {
-                return processPasteEvent(view, event, slice);
+                return processPasteEvent(view, event, slice, inlineImages);
             },
             handleDOMEvents: {
                 imagePasted: (_, event) => {
@@ -25342,6 +25480,83 @@ const createImageInserterPlugin = (imagePastedCallback) => {
         },
     });
 };
+/**
+ * Runs the inline-image upload lifecycle: show a thumbnail, run the upload,
+ * then replace it with the resizable image (carrying the file id) or a failed
+ * state.
+ * @param view
+ * @param file
+ * @param base64Data
+ * @param fileInfo
+ * @param inlineImages
+ */
+const runInlineImageUpload = async (view, file, base64Data, fileInfo, inlineImages) => {
+    const upload = inlineImages.upload;
+    if (!upload) {
+        return;
+    }
+    const inserter = imageInserterFactory(view, base64Data, fileInfo);
+    inserter.insertThumbnail();
+    try {
+        const uploadResult = await upload(file);
+        replaceThumbnailWithInlineImage(view, fileInfo, uploadResult, inlineImages);
+    }
+    catch (error) {
+        console.error('Inline image upload failed', fileInfo.filename, error);
+        inserter.insertFailedThumbnail();
+    }
+};
+/**
+ * Walks the document for the image node correlated with `fileInfoId`, replaces
+ * it with a freshly built node, and dispatches the change. The transaction is
+ * only dispatched when a match is found.
+ * @param view
+ * @param fileInfoId
+ * @param buildNode - builds the replacement node from the matched node.
+ * @returns whether a matching node was found and replaced.
+ */
+const replaceImageNodeByFileInfoId = (view, fileInfoId, buildNode) => {
+    const { state, dispatch } = view;
+    const tr = state.tr;
+    let found = false;
+    state.doc.descendants((node, pos) => {
+        if (found) {
+            return false;
+        }
+        if (node.attrs.fileInfoId === fileInfoId) {
+            tr.replaceWith(pos, pos + node.nodeSize, buildNode(node));
+            found = true;
+            return false;
+        }
+    });
+    if (found) {
+        dispatch(tr);
+    }
+    return found;
+};
+const replaceThumbnailWithInlineImage = (view, fileInfo, uploadResult, inlineImages) => {
+    const { schema } = view.state;
+    // Tag shape: the upload result is a stored id resolved to a src and
+    // persisted as the id microformat. Src shape: the result is the src itself.
+    const tag = isInlineImageTag(inlineImages) ? inlineImages : undefined;
+    const replaced = replaceImageNodeByFileInfoId(view, fileInfo.id, () => {
+        var _a;
+        return schema.nodes.image.create({
+            src: tag ? tag.getUrl(uploadResult) : uploadResult,
+            alt: (_a = fileInfo.filename) !== null && _a !== void 0 ? _a : 'file',
+            imageId: tag ? uploadResult : '',
+            fileInfoId: fileInfo.id,
+            state: 'success',
+            maxWidth: '100%',
+        });
+    });
+    if (!replaced) {
+        // The thumbnail was removed (undo/delete) while the upload was in
+        // flight, so the successfully stored file now has nowhere to land and
+        // is orphaned in the backend.
+        console.warn('Inline image uploaded but its thumbnail is gone; the stored file is now orphaned', { uploadResult, filename: fileInfo.filename });
+    }
+};
 const imageInserterFactory = (view, base64Data, fileInfo) => {
     return {
         fileInfo: fileInfo,
@@ -25359,32 +25574,12 @@ const createThumbnailInserter = (view, base64Data, fileInfo) => () => {
     dispatch(transaction);
 };
 const createImageInserter = (view, fileInfo) => (src) => {
-    const { state, dispatch } = view;
-    const { schema } = state;
-    const tr = state.tr;
-    state.doc.descendants((node, pos) => {
-        if (node.attrs.fileInfoId === fileInfo.id) {
-            const imageNodeAttrs = createImageNodeAttrs(src !== null && src !== void 0 ? src : node.attrs.src, fileInfo, 'success');
-            const imageNode = schema.nodes.image.create(imageNodeAttrs);
-            tr.replaceWith(pos, pos + node.nodeSize, imageNode);
-            return false;
-        }
-    });
-    dispatch(tr);
+    const { schema } = view.state;
+    replaceImageNodeByFileInfoId(view, fileInfo.id, (matched) => schema.nodes.image.create(createImageNodeAttrs(src !== null && src !== void 0 ? src : matched.attrs.src, fileInfo, 'success')));
 };
 const createFailedThumbnailInserter = (view, fileInfo) => () => {
-    const { state, dispatch } = view;
-    const { schema } = state;
-    const tr = state.tr;
-    state.doc.descendants((node, pos) => {
-        if (node.attrs.fileInfoId === fileInfo.id) {
-            const imageNodeAttrs = createImageNodeAttrs(node.attrs.src, fileInfo, 'failed');
-            const errorPlaceholderNode = schema.nodes.image.create(imageNodeAttrs);
-            tr.replaceWith(pos, pos + node.nodeSize, errorPlaceholderNode);
-            return false;
-        }
-    });
-    dispatch(tr);
+    const { schema } = view.state;
+    replaceImageNodeByFileInfoId(view, fileInfo.id, (matched) => schema.nodes.image.create(createImageNodeAttrs(matched.attrs.src, fileInfo, 'failed')));
 };
 function createImageNodeAttrs(src, fileInfo, state) {
     return {
@@ -25454,14 +25649,15 @@ const filterImageNodes = (fragment) => {
  * @param view - The ProseMirror editor view.
  * @param event - The paste event.
  * @param slice
+ * @param inlineImages
  * @returns A boolean; True if an image file was pasted to prevent default paste behavior, otherwise false.
  */
-const processPasteEvent = (view, event, slice) => {
+const processPasteEvent = (view, event, slice, inlineImages) => {
     const clipboardData = event.clipboardData;
     if (!clipboardData) {
         return false;
     }
-    const isImageFilePasted = handlePastedImages(view, clipboardData);
+    const isImageFilePasted = handlePastedImages(view, clipboardData, inlineImages);
     const filteredSlice = new Slice(filterImageNodes(slice.content), slice.openStart, slice.openEnd);
     if (filteredSlice.content.childCount < slice.content.childCount) {
         const { state, dispatch } = view;
@@ -25476,9 +25672,10 @@ const processPasteEvent = (view, event, slice) => {
  *
  * @param view - The ProseMirror editor view
  * @param clipboardData - The clipboard data transfer object containing potential image files
+ * @param inlineImages
  * @returns True if at least one valid image file was found and processed, false otherwise
  */
-function handlePastedImages(view, clipboardData) {
+function handlePastedImages(view, clipboardData, inlineImages) {
     let isImageFilePasted = false;
     const files = [...(clipboardData.files || [])];
     for (const file of files) {
@@ -25486,8 +25683,19 @@ function handlePastedImages(view, clipboardData) {
             isImageFilePasted = true;
             const reader = new FileReader();
             reader.onloadend = () => {
+                const base64Data = reader.result;
+                const fileInfo = createFileInfo(file);
+                if (inlineImages) {
+                    // Once inline images are configured they own the paste
+                    // lifecycle; never fall back to the legacy imagePasted
+                    // event. Without an upload handler the paste is a no-op.
+                    if (inlineImages.upload) {
+                        runInlineImageUpload(view, file, base64Data, fileInfo, inlineImages);
+                    }
+                    return;
+                }
                 view.dom.dispatchEvent(new CustomEvent('imagePasted', {
-                    detail: imageInserterFactory(view, reader.result, createFileInfo(file)),
+                    detail: imageInserterFactory(view, base64Data, fileInfo),
                 }));
             };
             reader.readAsDataURL(file);
@@ -25651,7 +25859,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();
@@ -27619,6 +27832,7 @@ const ProsemirrorAdapter = class {
     }
     componentWillLoad() {
         this.getActionBarItems();
+        this.validatedInlineImages = this.validateInlineImages();
         this.setupContentConverter();
     }
     componentDidLoad() {
@@ -27644,7 +27858,7 @@ const ProsemirrorAdapter = class {
         (_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') {
@@ -27658,12 +27872,26 @@ const ProsemirrorAdapter = class {
         }
         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.`);
@@ -27696,7 +27924,7 @@ const ProsemirrorAdapter = class {
         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$1.spec.marks.append({
@@ -27724,7 +27952,7 @@ const ProsemirrorAdapter = class {
                 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),