@limetech/lime-elements 39.40.0 → 39.42.0

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

@@ -1,13 +1,14 @@
 import { Plugin, PluginKey } from "prosemirror-state";
 import { createFileInfo } from "../../../../../util/files";
+import { isInlineImageTag, } from "../../../text-editor.types";
 import { Node, Slice, Fragment } from "prosemirror-model";
 export const pluginKey = new PluginKey('imageInserterPlugin');
-export const createImageInserterPlugin = (imagePastedCallback) => {
+export 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) => {
@@ -17,6 +18,83 @@ export 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 });
+    }
+};
 export const imageInserterFactory = (view, base64Data, fileInfo) => {
     return {
         fileInfo: fileInfo,
@@ -34,32 +112,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 {
@@ -129,14 +187,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;
@@ -151,9 +210,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) {
@@ -161,8 +221,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);

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;
+}