@aquera/nile-elements 1.9.5 → 1.9.6

package/dist/src/nile-rich-text-editor/nile-rte-image.js

@@ -0,0 +1,1073 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+let NileRteImage = class NileRteImage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.label = 'Image';
+        this.placeholder = 'Paste image link here';
+        this.altPlaceholder = 'Describe the image';
+        this.captionPlaceholder = 'Add a caption (optional)';
+        this.maxFileSize = 2 * 1024 * 1024;
+        this.uploadFromComputer = false;
+        this.srcValue = '';
+        this.altValue = '';
+        this.captionValue = '';
+        this.hasActiveImage = false;
+        this.uploadedFileName = '';
+        this.errorMessage = '';
+        this.popoverStyle = '';
+        this.selectionRange = null;
+        this.activeFigure = null;
+        this.ignoreBlur = false;
+        this.isApplying = false;
+        this.selectedFigure = null;
+        this.resizeOverlay = null;
+        this.dragStartX = 0;
+        this.dragStartWidth = 0;
+        this.dragDir = '';
+        this.isDragging = false;
+        this.trackingRaf = 0;
+        this.onEditorInput = () => {
+            // content edits can remove or reflow the figure
+            if (this.selectedFigure && !this.selectedFigure.isConnected) {
+                this.deselectImage();
+            }
+            else {
+                this.updateOverlayPosition();
+            }
+        };
+        this.onEditorImagePaste = (e) => {
+            if (this.disabled)
+                return;
+            const items = Array.from(e.clipboardData?.items ?? []);
+            const imageFiles = items
+                .filter(i => i.kind === 'file' && i.type.startsWith('image/'))
+                .map(i => i.getAsFile())
+                .filter((f) => !!f);
+            if (!imageFiles.length)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            for (const file of imageFiles) {
+                if (this.maxFileSize > 0 && file.size > this.maxFileSize) {
+                    console.warn(`nile-rte-image: pasted image "${file.name}" skipped — exceeds the ${this.maxFileSize} byte limit`);
+                    continue;
+                }
+                const reader = new FileReader();
+                reader.onload = () => {
+                    this.insertPastedImage(String(reader.result || ''), file.name.replace(/\.[^.]+$/, ''));
+                };
+                reader.readAsDataURL(file);
+            }
+        };
+        this.onScroll = () => {
+            this.closePopover();
+        };
+        this.onEditorImageClick = (e) => {
+            if (this.disabled)
+                return;
+            const target = e.target;
+            const figure = target.closest?.('figure.rte-image');
+            if (!figure || !this.editorEl.contains(figure)) {
+                this.deselectImage();
+                return;
+            }
+            e.preventDefault();
+            this.selectImage(figure);
+        };
+        this.onEditorImageDblClick = (e) => {
+            if (this.disabled)
+                return;
+            const target = e.target;
+            const figure = target.closest?.('figure.rte-image');
+            if (!figure || !this.editorEl.contains(figure))
+                return;
+            e.preventDefault();
+            this.openEditFor(figure);
+        };
+        this.onDocKeydown = (e) => {
+            if (!this.selectedFigure)
+                return;
+            if (e.key === 'Escape') {
+                this.deselectImage();
+                return;
+            }
+            if (e.key !== 'Backspace' && e.key !== 'Delete')
+                return;
+            // don't hijack deletions typed into inputs (e.g. the edit popover)
+            const target = e.target;
+            if (target?.closest?.('input, textarea, nile-input, nile-popover'))
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            const figure = this.selectedFigure;
+            this.deselectImage();
+            const parent = figure.parentNode;
+            figure.remove();
+            if (parent instanceof HTMLElement && !parent.hasChildNodes()) {
+                parent.innerHTML = '<br>';
+            }
+            this.emit('');
+        };
+        this.onSelectedImageLoad = () => {
+            this.updateOverlayPosition();
+        };
+        this.onDocMousedown = (e) => {
+            const target = e.target;
+            if (this.resizeOverlay?.contains(target))
+                return;
+            if (this.selectedFigure?.contains(target))
+                return;
+            // clicks on our own UI (toolbar image button, popover) must not clear the
+            // selection, otherwise pressing the toolbar button while an image is
+            // selected would drop into insert mode instead of edit mode
+            if (this.contains(target))
+                return;
+            this.deselectImage();
+        };
+        this.onAlignClick = (e) => {
+            if (!this.selectedFigure)
+                return;
+            const dir = e.currentTarget.dataset.dir || 'left';
+            if (dir === 'left') {
+                this.selectedFigure.removeAttribute('data-align');
+            }
+            else {
+                this.selectedFigure.setAttribute('data-align', dir);
+            }
+            this.syncAlignBar();
+            this.updateOverlayPosition();
+            const img = this.selectedFigure.querySelector('img');
+            this.emit(img?.getAttribute('src') || '');
+        };
+        this.onHandleMousedown = (e) => {
+            if (this.disabled || !this.selectedFigure)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            const img = this.selectedFigure.querySelector('img');
+            if (!img)
+                return;
+            // a full-width image can't be hand-resized — dragging implies a custom
+            // width, so drop back to default alignment first
+            if (this.selectedFigure.getAttribute('data-align') === 'justify') {
+                this.selectedFigure.removeAttribute('data-align');
+                this.syncAlignBar();
+            }
+            this.isDragging = true;
+            this.dragDir = e.currentTarget.dataset.dir || 'se';
+            this.dragStartX = e.clientX;
+            this.dragStartWidth = img.getBoundingClientRect().width;
+            document.addEventListener('mousemove', this.onDragMove);
+            document.addEventListener('mouseup', this.onDragEnd);
+        };
+        this.onDragMove = (e) => {
+            if (!this.isDragging || !this.selectedFigure)
+                return;
+            const img = this.selectedFigure.querySelector('img');
+            if (!img)
+                return;
+            const dx = e.clientX - this.dragStartX;
+            const growsRight = this.dragDir === 'ne' || this.dragDir === 'se';
+            let width = this.dragStartWidth + (growsRight ? dx : -dx);
+            const maxWidth = this.getEditorContentWidth();
+            width = Math.max(48, Math.min(width, maxWidth));
+            img.setAttribute('width', String(Math.round(width)));
+            this.updateOverlayPosition();
+        };
+        this.onDragEnd = () => {
+            if (!this.isDragging)
+                return;
+            this.isDragging = false;
+            document.removeEventListener('mousemove', this.onDragMove);
+            document.removeEventListener('mouseup', this.onDragEnd);
+            this.updateOverlayPosition();
+            const img = this.selectedFigure?.querySelector('img');
+            this.dispatchEvent(new CustomEvent('nile-image-changed', {
+                detail: {
+                    src: img?.getAttribute('src') || '',
+                    alt: img?.getAttribute('alt') || '',
+                    caption: this.selectedFigure?.querySelector('figcaption')?.textContent || '',
+                    width: img ? Number(img.getAttribute('width')) || null : null,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this.onOpen = () => {
+            if (this.disabled)
+                return;
+            if (this.selectedFigure) {
+                this.openEditFor(this.selectedFigure, this.getToolbarButtonRect());
+                return;
+            }
+            const sel = document.getSelection();
+            if (sel &&
+                sel.rangeCount > 0 &&
+                this.editorEl.contains(sel.getRangeAt(0).commonAncestorContainer)) {
+                this.selectionRange = sel.getRangeAt(0).cloneRange();
+            }
+            else {
+                const range = document.createRange();
+                range.selectNodeContents(this.editorEl);
+                range.collapse(false);
+                this.selectionRange = range;
+            }
+            this.activeFigure = null;
+            this.hasActiveImage = false;
+            this.srcValue = '';
+            this.altValue = '';
+            this.captionValue = '';
+            this.uploadedFileName = '';
+            this.errorMessage = '';
+            this.positionPopover(this.getToolbarButtonRect());
+            this.openPopover();
+            requestAnimationFrame(() => {
+                const input = this.querySelector('nile-input');
+                input?.focus();
+            });
+        };
+        this.onInputKeydown = (e) => {
+            if (e.key !== 'Escape' && e.key !== 'Enter')
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            if (e.key === 'Escape') {
+                this.closePopover();
+                return;
+            }
+            this.isApplying = true;
+            try {
+                this.applyImage();
+            }
+            finally {
+                this.isApplying = false;
+            }
+        };
+        this.onInputBlur = () => {
+            if (this.ignoreBlur || this.isApplying)
+                return;
+            requestAnimationFrame(() => {
+                if (this.ignoreBlur || this.isApplying)
+                    return;
+                const pop = this.querySelector('nile-popover');
+                if (pop?.matches(':focus-within'))
+                    return;
+                this.closePopover();
+            });
+        };
+        this.onSrcInput = (e) => {
+            this.srcValue = e.detail.value;
+            this.uploadedFileName = '';
+            this.errorMessage = '';
+        };
+        this.onAltInput = (e) => {
+            this.altValue = e.detail.value;
+        };
+        this.onCaptionInput = (e) => {
+            this.captionValue = e.detail.value;
+        };
+        this.onPopoverMousedown = () => {
+            this.ignoreBlur = true;
+        };
+        this.onPopoverMouseup = () => {
+            this.ignoreBlur = false;
+        };
+        this.onToolbarButtonMousedown = (e) => {
+            e.preventDefault();
+        };
+        this.onUploadClick = () => {
+            // keep the popover open while the OS file dialog steals focus
+            this.ignoreBlur = true;
+            const fileInput = this.querySelector('input[type="file"]');
+            fileInput?.click();
+            window.addEventListener('focus', () => {
+                setTimeout(() => {
+                    this.ignoreBlur = false;
+                }, 200);
+            }, { once: true });
+        };
+        this.onFileChange = (e) => {
+            const input = e.target;
+            const file = input.files?.[0];
+            input.value = '';
+            if (!file)
+                return;
+            if (!file.type.startsWith('image/')) {
+                this.errorMessage = 'Only image files are supported';
+                return;
+            }
+            if (this.maxFileSize > 0 && file.size > this.maxFileSize) {
+                const mb = (this.maxFileSize / (1024 * 1024)).toFixed(1);
+                this.errorMessage = `File is too large. Maximum size is ${mb} MB`;
+                return;
+            }
+            const reader = new FileReader();
+            reader.onload = () => {
+                this.srcValue = String(reader.result || '');
+                this.uploadedFileName = file.name;
+                this.errorMessage = '';
+                if (!this.altValue) {
+                    this.altValue = file.name.replace(/\.[^.]+$/, '');
+                }
+            };
+            reader.onerror = () => {
+                this.errorMessage = 'Could not read the selected file';
+            };
+            reader.readAsDataURL(file);
+        };
+        this.onApplyClick = () => {
+            this.isApplying = true;
+            this.applyImage();
+            this.isApplying = false;
+            this.ignoreBlur = false;
+        };
+        this.onRemoveClick = () => {
+            this.isApplying = true;
+            this.removeImage();
+            this.isApplying = false;
+            this.ignoreBlur = false;
+        };
+    }
+    createRenderRoot() {
+        return this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.injectCss(`
+      nile-popover.rte-image-popover::part(popover) {
+        min-width: 340px;
+        max-width: 420px;
+        background: white;
+        border: 1px solid var(--nile-colors-neutral-400, var(--ng-componentcolors-utility-gray-400));
+        border-radius: 8px;
+        padding: 0;
+        gap: 0;
+        overflow: hidden;
+        height: auto;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+      }
+
+      .image-popup-wrap {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding: 12px;
+      }
+
+      .image-popup-wrap nile-input {
+        width: 100%;
+      }
+
+      .image-popup-wrap .image-upload-row {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        width: 100%;
+      }
+
+      .image-popup-wrap .image-upload-row nile-button {
+        flex-shrink: 0;
+      }
+
+      .image-popup-wrap .image-upload-filename {
+        font-size: 12px;
+        color: var(--nile-colors-neutral-600, var(--ng-colors-text-secondary));
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 0;
+      }
+
+      .image-popup-wrap .image-error {
+        font-size: 12px;
+        color: var(--nile-colors-error-600, var(--ng-colors-text-error-primary-600));
+      }
+
+      .image-popup-wrap .image-divider-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));
+        font-size: 12px;
+      }
+
+      .image-popup-wrap .image-divider-row::before,
+      .image-popup-wrap .image-divider-row::after {
+        content: '';
+        flex: 1;
+        height: 1px;
+        background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
+      }
+
+      .image-popup-wrap .image-actions-row {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+        width: 100%;
+      }
+
+      nile-button.rte-image-button::part(base) {
+        border: none;
+        height: 32px;
+        width: 32px;
+      }
+
+      nile-rte-image input[type='file'] {
+        display: none;
+      }
+
+      .rte-image-resize-overlay {
+        position: fixed;
+        z-index: 999;
+        pointer-events: none;
+        border: 2px solid var(--nile-colors-primary-500, var(--ng-componentcolors-utility-blue-500));
+        border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md));
+        box-sizing: border-box;
+      }
+
+      .rte-image-resize-overlay .rte-resize-handle {
+        position: absolute;
+        width: 12px;
+        height: 12px;
+        background: var(--nile-colors-white-base, #fff);
+        border: 2px solid var(--nile-colors-primary-500, var(--ng-componentcolors-utility-blue-500));
+        border-radius: 50%;
+        pointer-events: auto;
+        box-sizing: border-box;
+      }
+
+      .rte-image-resize-overlay .rte-resize-handle[data-dir='nw'] { top: -7px; left: -7px; cursor: nwse-resize; }
+      .rte-image-resize-overlay .rte-resize-handle[data-dir='ne'] { top: -7px; right: -7px; cursor: nesw-resize; }
+      .rte-image-resize-overlay .rte-resize-handle[data-dir='sw'] { bottom: -7px; left: -7px; cursor: nesw-resize; }
+      .rte-image-resize-overlay .rte-resize-handle[data-dir='se'] { bottom: -7px; right: -7px; cursor: nwse-resize; }
+
+      .rte-image-resize-overlay .rte-image-align-bar {
+        position: absolute;
+        top: -44px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        gap: 2px;
+        padding: 4px;
+        background: var(--nile-colors-white-base, #fff);
+        border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        pointer-events: auto;
+      }
+
+      .rte-image-resize-overlay .rte-image-align-bar button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border: none;
+        background: transparent;
+        border-radius: 6px;
+        cursor: pointer;
+        padding: 0;
+      }
+
+      .rte-image-resize-overlay .rte-image-align-bar button:hover {
+        background: var(--nile-colors-neutral-200, var(--ng-componentcolors-utility-gray-200));
+      }
+
+      .rte-image-resize-overlay .rte-image-align-bar button[data-active] {
+        background: var(--nile-colors-primary-400, var(--ng-componentcolors-utility-blue-400));
+      }
+
+      .rte-image-resize-overlay .rte-image-align-bar button nile-icon {
+        pointer-events: none;
+      }
+
+      .rte-image-resize-overlay .rte-resize-size-label {
+        position: absolute;
+        bottom: -26px;
+        right: 0;
+        background: var(--nile-colors-dark-900, #101828);
+        color: #fff;
+        font-size: 11px;
+        line-height: 1;
+        padding: 4px 6px;
+        border-radius: 4px;
+        white-space: nowrap;
+        pointer-events: none;
+      }
+    `);
+    }
+    injectCss(cssText) {
+        if (this.querySelector('style[data-rte-image-style]'))
+            return;
+        const style = document.createElement('style');
+        style.setAttribute('data-rte-image-style', 'true');
+        style.textContent = cssText;
+        this.insertBefore(style, this.firstChild);
+    }
+    updated(changed) {
+        if (changed.has('editorEl')) {
+            const prev = changed.get('editorEl');
+            prev?.removeEventListener('click', this.onEditorImageClick);
+            prev?.removeEventListener('dblclick', this.onEditorImageDblClick);
+            prev?.removeEventListener('input', this.onEditorInput);
+            prev?.removeEventListener('paste', this.onEditorImagePaste);
+            this.editorEl?.addEventListener('click', this.onEditorImageClick);
+            this.editorEl?.addEventListener('dblclick', this.onEditorImageDblClick);
+            this.editorEl?.addEventListener('input', this.onEditorInput);
+            this.editorEl?.addEventListener('paste', this.onEditorImagePaste);
+        }
+        if (changed.has('disabled') && this.disabled) {
+            this.deselectImage();
+        }
+    }
+    disconnectedCallback() {
+        this.editorEl?.removeEventListener('click', this.onEditorImageClick);
+        this.editorEl?.removeEventListener('dblclick', this.onEditorImageDblClick);
+        this.editorEl?.removeEventListener('input', this.onEditorInput);
+        this.editorEl?.removeEventListener('paste', this.onEditorImagePaste);
+        window.removeEventListener('scroll', this.onScroll, true);
+        this.deselectImage();
+        super.disconnectedCallback();
+    }
+    insertPastedImage(src, alt) {
+        if (!src.startsWith('data:image/'))
+            return;
+        let range;
+        const sel = document.getSelection();
+        if (sel &&
+            sel.rangeCount > 0 &&
+            this.editorEl.contains(sel.getRangeAt(0).commonAncestorContainer)) {
+            range = sel.getRangeAt(0).cloneRange();
+        }
+        else {
+            range = document.createRange();
+            range.selectNodeContents(this.editorEl);
+            range.collapse(false);
+        }
+        const figure = this.buildFigure(src, alt);
+        this.insertFigureAt(range, figure);
+        this.emit(src);
+    }
+    isSafeSrc(src) {
+        return /^(https?:\/\/|data:image\/|blob:|\/)/i.test(src);
+    }
+    normalizeSrc(src) {
+        if (this.isSafeSrc(src))
+            return src;
+        if (/^[a-z][a-z0-9+.-]*:/i.test(src))
+            return '';
+        return `https://${src}`;
+    }
+    getSelectionRect() {
+        if (!this.selectionRange)
+            return null;
+        let rect = this.selectionRange.getBoundingClientRect();
+        if (rect.width === 0 && rect.height === 0) {
+            const span = document.createElement('span');
+            span.textContent = '\u200b';
+            const tempRange = this.selectionRange.cloneRange();
+            tempRange.insertNode(span);
+            rect = span.getBoundingClientRect();
+            span.remove();
+        }
+        return rect;
+    }
+    positionPopover(anchorRect) {
+        const rect = anchorRect ?? this.getSelectionRect();
+        if (!rect)
+            return;
+        const half = 170;
+        const centerX = Math.min(Math.max(rect.left + rect.width / 2, half + 8), window.innerWidth - half - 8);
+        this.popoverStyle = `
+      position: fixed;
+      top: ${rect.bottom + 8}px;
+      left: ${centerX}px;
+      transform: translateX(-50%);
+      z-index: 1000;
+    `;
+    }
+    openPopover() {
+        requestAnimationFrame(() => {
+            const pop = this.querySelector('nile-popover');
+            pop && (pop.isShow = true);
+            window.addEventListener('scroll', this.onScroll, true);
+        });
+    }
+    closePopover() {
+        const pop = this.querySelector('nile-popover');
+        pop && (pop.isShow = false);
+        window.removeEventListener('scroll', this.onScroll, true);
+        this.srcValue = '';
+        this.altValue = '';
+        this.captionValue = '';
+        this.uploadedFileName = '';
+        this.errorMessage = '';
+        this.selectionRange = null;
+        this.activeFigure = null;
+        this.hasActiveImage = false;
+        this.popoverStyle = '';
+    }
+    openEditFor(figure, anchorRect) {
+        const range = document.createRange();
+        range.selectNode(figure);
+        this.selectionRange = range;
+        this.activeFigure = figure;
+        this.hasActiveImage = true;
+        const img = figure.querySelector('img');
+        const figcaption = figure.querySelector('figcaption');
+        this.srcValue = img?.getAttribute('src') || '';
+        this.altValue = img?.getAttribute('alt') || '';
+        this.captionValue = figcaption?.textContent || '';
+        this.uploadedFileName = '';
+        this.errorMessage = '';
+        this.positionPopover(anchorRect ?? figure.getBoundingClientRect());
+        this.openPopover();
+    }
+    getToolbarButtonRect() {
+        const btn = this.querySelector('nile-button.rte-image-button');
+        return btn ? btn.getBoundingClientRect() : null;
+    }
+    // ---------- resize ----------
+    selectImage(figure) {
+        if (this.selectedFigure === figure) {
+            this.updateOverlayPosition();
+            return;
+        }
+        this.deselectImage();
+        this.selectedFigure = figure;
+        const img = figure.querySelector('img');
+        if (img && !img.complete) {
+            img.addEventListener('load', this.onSelectedImageLoad, { once: true });
+        }
+        this.buildOverlay();
+        this.syncAlignBar();
+        this.updateOverlayPosition();
+        this.startOverlayTracking();
+        document.addEventListener('mousedown', this.onDocMousedown, true);
+        document.addEventListener('keydown', this.onDocKeydown, true);
+    }
+    deselectImage() {
+        if (!this.selectedFigure && !this.resizeOverlay)
+            return;
+        this.selectedFigure = null;
+        this.resizeOverlay?.remove();
+        this.resizeOverlay = null;
+        this.isDragging = false;
+        this.stopOverlayTracking();
+        document.removeEventListener('mousedown', this.onDocMousedown, true);
+        document.removeEventListener('keydown', this.onDocKeydown, true);
+        document.removeEventListener('mousemove', this.onDragMove);
+        document.removeEventListener('mouseup', this.onDragEnd);
+    }
+    // re-sync the overlay to the image every frame while selected — this keeps
+    // it glued to the image through scrolling (any container), layout shifts,
+    // and image loads without needing to enumerate those events
+    startOverlayTracking() {
+        this.stopOverlayTracking();
+        const tick = () => {
+            if (!this.selectedFigure || !this.resizeOverlay)
+                return;
+            if (!this.selectedFigure.isConnected) {
+                this.deselectImage();
+                return;
+            }
+            this.updateOverlayPosition();
+            this.trackingRaf = requestAnimationFrame(tick);
+        };
+        this.trackingRaf = requestAnimationFrame(tick);
+    }
+    stopOverlayTracking() {
+        if (this.trackingRaf !== 0) {
+            cancelAnimationFrame(this.trackingRaf);
+            this.trackingRaf = 0;
+        }
+    }
+    buildOverlay() {
+        const overlay = document.createElement('div');
+        overlay.className = 'rte-image-resize-overlay';
+        for (const dir of ['nw', 'ne', 'sw', 'se']) {
+            const handle = document.createElement('div');
+            handle.className = 'rte-resize-handle';
+            handle.dataset.dir = dir;
+            handle.addEventListener('mousedown', this.onHandleMousedown);
+            overlay.appendChild(handle);
+        }
+        const label = document.createElement('span');
+        label.className = 'rte-resize-size-label';
+        overlay.appendChild(label);
+        const alignBar = document.createElement('div');
+        alignBar.className = 'rte-image-align-bar';
+        const alignments = [
+            { dir: 'left', icon: 'format_align_left', title: 'Align left' },
+            { dir: 'center', icon: 'format_align_middle', title: 'Align center' },
+            { dir: 'right', icon: 'format_align_right', title: 'Align right' },
+            { dir: 'justify', icon: 'format_align_justify', title: 'Full width' },
+        ];
+        for (const { dir, icon, title } of alignments) {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.dataset.dir = dir;
+            btn.title = title;
+            btn.setAttribute('aria-label', title);
+            btn.innerHTML = `<nile-icon name="${icon}" size="18"></nile-icon>`;
+            btn.addEventListener('mousedown', e => e.preventDefault());
+            btn.addEventListener('click', this.onAlignClick);
+            alignBar.appendChild(btn);
+        }
+        overlay.appendChild(alignBar);
+        // append to <body>: a transformed/filtered ancestor (drawer, modal,
+        // animated panel) would otherwise become the containing block for
+        // position:fixed and the overlay would render far from the image
+        document.body.appendChild(overlay);
+        this.resizeOverlay = overlay;
+    }
+    updateOverlayPosition() {
+        if (!this.resizeOverlay || !this.selectedFigure)
+            return;
+        const img = this.selectedFigure.querySelector('img');
+        if (!img) {
+            this.deselectImage();
+            return;
+        }
+        const rect = img.getBoundingClientRect();
+        this.resizeOverlay.style.top = `${rect.top}px`;
+        this.resizeOverlay.style.left = `${rect.left}px`;
+        this.resizeOverlay.style.width = `${rect.width}px`;
+        this.resizeOverlay.style.height = `${rect.height}px`;
+        // keep the align bar reachable: above the image by default, flipped to
+        // just inside the top edge when the image touches the viewport top
+        const bar = this.resizeOverlay.querySelector('.rte-image-align-bar');
+        if (bar) {
+            if (rect.top < 56) {
+                bar.style.top = '8px';
+            }
+            else {
+                bar.style.top = '-44px';
+            }
+        }
+        const label = this.resizeOverlay.querySelector('.rte-resize-size-label');
+        if (label) {
+            label.textContent = `${Math.round(rect.width)} × ${Math.round(rect.height)}`;
+            label.style.display = this.isDragging ? '' : 'none';
+        }
+    }
+    syncAlignBar() {
+        if (!this.resizeOverlay || !this.selectedFigure)
+            return;
+        const current = this.selectedFigure.getAttribute('data-align') || 'left';
+        this.resizeOverlay
+            .querySelectorAll('.rte-image-align-bar button')
+            .forEach(btn => {
+            btn.toggleAttribute('data-active', btn.dataset.dir === current);
+        });
+    }
+    getEditorContentWidth() {
+        const style = getComputedStyle(this.editorEl);
+        return (this.editorEl.clientWidth -
+            parseFloat(style.paddingLeft || '0') -
+            parseFloat(style.paddingRight || '0') || Infinity);
+    }
+    buildFigure(src, alt = '', caption = '') {
+        const figure = document.createElement('figure');
+        figure.className = 'rte-image';
+        figure.setAttribute('contenteditable', 'false');
+        const img = document.createElement('img');
+        img.src = src;
+        if (alt.trim())
+            img.alt = alt.trim();
+        figure.appendChild(img);
+        if (caption.trim()) {
+            const figcaption = document.createElement('figcaption');
+            figcaption.textContent = caption.trim();
+            figure.appendChild(figcaption);
+        }
+        return figure;
+    }
+    insertFigureAt(insertRange, figure) {
+        const sel = document.getSelection();
+        if (!sel)
+            return;
+        // a <figure> is not valid inside <p>/<h*>, so place it after the
+        // block that holds the caret instead of splitting it at the range
+        let block = null;
+        let n = insertRange.startContainer;
+        while (n && n !== this.editorEl) {
+            if (n instanceof HTMLElement &&
+                /^(P|H[1-6]|UL|OL|BLOCKQUOTE|PRE|TABLE|FIGURE|DIV)$/.test(n.tagName)) {
+                block = n;
+                break;
+            }
+            n = n.parentNode;
+        }
+        // an empty paragraph (the default '<p><br></p>' of a fresh editor) would
+        // otherwise remain above the image as a blank gap — take its place instead
+        const isEmptyBlock = block &&
+            /^(P|H[1-6])$/.test(block.tagName) &&
+            (block.textContent ?? '').replace(/\u200B/g, '').trim() === '' &&
+            !block.querySelector('img');
+        if (block?.parentNode) {
+            if (isEmptyBlock) {
+                block.parentNode.insertBefore(figure, block);
+                block.remove();
+            }
+            else {
+                block.parentNode.insertBefore(figure, block.nextSibling);
+            }
+        }
+        else {
+            this.editorEl.appendChild(figure);
+        }
+        // keep a paragraph after the image so typing can continue below it
+        let after = figure.nextElementSibling;
+        if (!after) {
+            const p = document.createElement('p');
+            p.innerHTML = '<br>';
+            figure.parentNode?.insertBefore(p, figure.nextSibling);
+            after = p;
+        }
+        const range = document.createRange();
+        range.setStart(after, 0);
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+    applyImage() {
+        const raw = this.srcValue.trim();
+        if (!raw) {
+            if (this.uploadFromComputer) {
+                this.errorMessage = 'Enter an image link or upload a file';
+            }
+            return;
+        }
+        const src = this.normalizeSrc(raw);
+        if (!src) {
+            this.errorMessage = 'Enter a valid image link';
+            return;
+        }
+        if (this.activeFigure) {
+            const img = this.activeFigure.querySelector('img');
+            if (img) {
+                img.src = src;
+                if (this.altValue.trim()) {
+                    img.alt = this.altValue.trim();
+                }
+                else {
+                    img.removeAttribute('alt');
+                }
+            }
+            let figcaption = this.activeFigure.querySelector('figcaption');
+            if (this.captionValue.trim()) {
+                if (!figcaption) {
+                    figcaption = document.createElement('figcaption');
+                    this.activeFigure.appendChild(figcaption);
+                }
+                figcaption.textContent = this.captionValue.trim();
+            }
+            else {
+                figcaption?.remove();
+            }
+            this.emit(src);
+            this.closePopover();
+            requestAnimationFrame(() => this.updateOverlayPosition());
+            return;
+        }
+        if (!(this.selectionRange instanceof Range))
+            return;
+        this.editorEl.focus();
+        const sel = document.getSelection();
+        if (!sel)
+            return;
+        sel.removeAllRanges();
+        sel.addRange(this.selectionRange);
+        const figure = this.buildFigure(src, this.altValue, this.captionValue);
+        this.insertFigureAt(this.selectionRange, figure);
+        this.emit(src);
+        this.closePopover();
+    }
+    removeImage() {
+        if (!this.activeFigure)
+            return;
+        this.deselectImage();
+        const parent = this.activeFigure.parentNode;
+        this.activeFigure.remove();
+        if (parent instanceof HTMLElement && !parent.hasChildNodes()) {
+            parent.innerHTML = '<br>';
+        }
+        this.emit('');
+        this.closePopover();
+    }
+    emit(src) {
+        this.dispatchEvent(new CustomEvent('nile-image-changed', {
+            detail: {
+                src,
+                alt: this.altValue.trim(),
+                caption: this.captionValue.trim(),
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        const iconColor = this.disabled
+            ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))'
+            : 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))';
+        return html `
+      <nile-lite-tooltip content=${this.label}>
+        <nile-button
+          variant="tertiary"
+          size="small"
+          ?disabled=${this.disabled}
+          @mousedown=${this.onToolbarButtonMousedown}
+          @click=${this.onOpen}
+          class="rte-image-button"
+        >
+          <nile-glyph name="image" color=${iconColor}></nile-glyph>
+        </nile-button>
+      </nile-lite-tooltip>
+
+      <nile-popover
+        class="rte-image-popover"
+        .arrow=${false}
+        style=${this.popoverStyle}
+        @mousedown=${this.onPopoverMousedown}
+        @mouseup=${this.onPopoverMouseup}
+      >
+        <div class="image-popup-wrap">
+          <nile-input
+            label="Image URL"
+            placeholder=${this.placeholder}
+            .value=${this.srcValue}
+            @nile-input=${this.onSrcInput}
+            @keydown=${this.onInputKeydown}
+            @nile-blur=${this.onInputBlur}
+          ></nile-input>
+
+          ${this.uploadFromComputer
+            ? html `
+                <div class="image-divider-row" part="divider">or</div>
+
+                <div class="image-upload-row" part="upload-row">
+                  <nile-button
+                    part="upload-button"
+                    size="small"
+                    variant="secondary"
+                    @click=${this.onUploadClick}
+                  >
+                    <nile-glyph name="upload" slot="prefix"></nile-glyph>
+                    Upload from computer
+                  </nile-button>
+                  ${this.uploadedFileName
+                ? html `<span class="image-upload-filename" part="upload-filename"
+                        >${this.uploadedFileName}</span
+                      >`
+                : null}
+                </div>
+                <input
+                  part="upload-input"
+                  type="file"
+                  accept="image/*"
+                  @change=${this.onFileChange}
+                />
+              `
+            : null}
+
+          ${this.errorMessage
+            ? html `<span class="image-error" part="error">${this.errorMessage}</span>`
+            : null}
+
+          <nile-input
+            label="Alt text"
+            placeholder=${this.altPlaceholder}
+            .value=${this.altValue}
+            @nile-input=${this.onAltInput}
+            @keydown=${this.onInputKeydown}
+            @nile-blur=${this.onInputBlur}
+            part="alt-input"
+          ></nile-input>
+
+          <nile-input
+            label="Caption"
+            placeholder=${this.captionPlaceholder}
+            .value=${this.captionValue}
+            @nile-input=${this.onCaptionInput}
+            @keydown=${this.onInputKeydown}
+            @nile-blur=${this.onInputBlur}
+            part="caption-input"
+          ></nile-input>
+
+          <div class="image-actions-row" part="actions-row">
+            ${this.hasActiveImage
+            ? html `
+                  <nile-button
+                    part="remove-button"
+                    size="small"
+                    variant="secondary"
+                    @click=${this.onRemoveClick}
+                  >
+                    Remove
+                  </nile-button>
+                `
+            : null}
+            <nile-button part="apply-button" size="small" variant="primary" @click=${this.onApplyClick}>
+              ${this.hasActiveImage ? 'Update' : 'Insert'}
+            </nile-button>
+          </div>
+        </div>
+      </nile-popover>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], NileRteImage.prototype, "editorEl", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileRteImage.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: true })
+], NileRteImage.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: true })
+], NileRteImage.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: true })
+], NileRteImage.prototype, "altPlaceholder", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: true })
+], NileRteImage.prototype, "captionPlaceholder", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'maxfilesize' })
+], NileRteImage.prototype, "maxFileSize", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'uploadfromcomputer' })
+], NileRteImage.prototype, "uploadFromComputer", void 0);
+__decorate([
+    state()
+], NileRteImage.prototype, "srcValue", void 0);
+__decorate([
+    state()
+], NileRteImage.prototype, "altValue", void 0);
+__decorate([
+    state()
+], NileRteImage.prototype, "captionValue", void 0);
+__decorate([
+    state()
+], NileRteImage.prototype, "hasActiveImage", void 0);
+__decorate([
+    state()
+], NileRteImage.prototype, "uploadedFileName", void 0);
+__decorate([
+    state()
+], NileRteImage.prototype, "errorMessage", void 0);
+__decorate([
+    state()
+], NileRteImage.prototype, "popoverStyle", void 0);
+NileRteImage = __decorate([
+    customElement('nile-rte-image')
+], NileRteImage);
+export { NileRteImage };
+//# sourceMappingURL=nile-rte-image.js.map