@jackuait/blok 0.13.0 → 0.13.2

package/src/tools/image/index.ts

@@ -38,6 +38,7 @@ import { ImageError } from './errors';
 import { attachResizeHandle, type ResizeEdge } from './resizer';
 import { widthForAspectChange } from './crop-math';
 import {
+  applyAutoFull,
   openLightbox,
   renderCaptionRow,
   renderImage,
@@ -46,6 +47,7 @@ import {
 } from './ui';
 import { openCropModal } from './crop-modal';
 import { openAltPopover } from './alt-popover';
+import { probeImageDimensions } from './probe-dimensions';
 import { renderUploadingState, type UploadingStateElement } from './uploading-state';
 import { Uploader, type UploadResult } from './uploader';
 
@@ -71,6 +73,7 @@ export class ImageTool implements BlockTool {
   private lastSource: { kind: 'file'; file: File } | { kind: 'url'; url: string } | null = null;
   private brokenImage = false;
   private retrying = false;
+  private reloadAttempts = 0;
 
   constructor(options: BlockToolConstructorOptions<ImageData, ImageConfig>) {
     this.api = options.api;
@@ -101,6 +104,8 @@ export class ImageTool implements BlockTool {
     if (this.data.frame !== undefined) out.frame = this.data.frame;
     if (this.data.rounded !== undefined) out.rounded = this.data.rounded;
     if (this.data.captionVisible !== undefined) out.captionVisible = this.data.captionVisible;
+    if (this.data.naturalWidth !== undefined) out.naturalWidth = this.data.naturalWidth;
+    if (this.data.naturalHeight !== undefined) out.naturalHeight = this.data.naturalHeight;
     if (this.data.crop !== undefined) {
       const { x, y, w, h, shape } = this.data.crop;
       const isFull = x === 0 && y === 0 && w === 100 && h === 100;
@@ -155,6 +160,10 @@ export class ImageTool implements BlockTool {
     }
   }
 
+  private reportProgress = (percent: number): void => {
+    this.uploadingEl?.setProgress(percent);
+  };
+
   private startUpload(file: File): void {
     this.lastFileName = file.name;
     this.lastSource = { kind: 'file', file };
@@ -163,7 +172,7 @@ export class ImageTool implements BlockTool {
     this.brokenImage = false;
     this.renderState();
     void this.uploader
-      .handleFile(file)
+      .handleFile(file, { onProgress: this.reportProgress })
       .then((result) => this.applyResult(result))
       .catch((err) => this.applyError(err));
   }
@@ -176,7 +185,7 @@ export class ImageTool implements BlockTool {
     this.brokenImage = false;
     this.renderState();
     void this.uploader
-      .handleUrl(url)
+      .handleUrl(url, { onProgress: this.reportProgress })
       .then((result) => this.applyResult(result))
       .catch((err) => this.applyError(err));
   }
@@ -194,8 +203,8 @@ export class ImageTool implements BlockTool {
     );
     if (retryBtn) retryBtn.disabled = true;
     const promise = source.kind === 'file'
-      ? this.uploader.handleFile(source.file)
-      : this.uploader.handleUrl(source.url);
+      ? this.uploader.handleFile(source.file, { onProgress: this.reportProgress })
+      : this.uploader.handleUrl(source.url, { onProgress: this.reportProgress });
     void promise
       .then((result) => this.applyResult(result))
       .catch((err) => this.applyError(err));
@@ -230,6 +239,46 @@ export class ImageTool implements BlockTool {
     this.renderState();
   }
 
+  private cacheNaturalDimensions(imgEl: HTMLImageElement): void {
+    const w = imgEl.naturalWidth;
+    const h = imgEl.naturalHeight;
+    if (w <= 0 || h <= 0) return;
+    if (this.data.naturalWidth === w && this.data.naturalHeight === h) return;
+    this.data.naturalWidth = w;
+    this.data.naturalHeight = h;
+    this.block.dispatchChange();
+  }
+
+  private applyLoadingDimensions(figure: HTMLElement, imgEl: HTMLImageElement, width: number, height: number): void {
+    if (figure.getAttribute('data-loading') !== 'true') return;
+    figure.style.setProperty('aspect-ratio', `${width} / ${height}`);
+    figure.style.setProperty('min-height', '0px');
+    imgEl.style.setProperty('min-height', '0px');
+  }
+
+  private handleImgLoadFailure(imgEl: HTMLImageElement, figure: HTMLElement): void {
+    if (this.reloadAttempts >= 1) {
+      figure.removeAttribute('data-loading');
+      this.applyBrokenImage();
+      return;
+    }
+    this.reloadAttempts++;
+    figure.setAttribute('data-loading', 'true');
+    const src = this.data.url;
+    const cachedW = this.data.naturalWidth;
+    const cachedH = this.data.naturalHeight;
+    if (cachedW && cachedH) {
+      this.applyLoadingDimensions(figure, imgEl, cachedW, cachedH);
+    } else {
+      void probeImageDimensions(src).then((dims) => {
+        if (!dims) return;
+        this.applyLoadingDimensions(figure, imgEl, dims.width, dims.height);
+      });
+    }
+    imgEl.setAttribute('src', '');
+    imgEl.setAttribute('src', src);
+  }
+
   private retryBrokenImage(): void {
     this.brokenImage = false;
     this.errorMessage = null;
@@ -527,7 +576,10 @@ export class ImageTool implements BlockTool {
     if (!this.root) return;
     const isBroken = this.brokenImage;
     const el = renderErrorState({
-      title: isBroken ? this.api.i18n.t('tools.image.errorUnavailable') : undefined,
+      variant: isBroken ? 'broken' : 'upload',
+      title: isBroken
+        ? this.api.i18n.t('tools.image.errorImageFailedToLoad')
+        : this.api.i18n.t('tools.image.errorUploadFailedTitle'),
       message: this.errorMessage ?? undefined,
       onTryAgain: isBroken
         ? () => this.retryBrokenImage()
@@ -541,6 +593,9 @@ export class ImageTool implements BlockTool {
   private renderRendered(): void {
     if (!this.root) return;
     const figure = renderImage(this.data);
+    if (this.data.naturalWidth && this.data.naturalHeight) {
+      figure.style.setProperty('aspect-ratio', `${this.data.naturalWidth} / ${this.data.naturalHeight}`);
+    }
 
     const imgEl = figure.querySelector('img');
     // FLIP origin: the visible element. With an active crop that's the crop wrapper
@@ -549,7 +604,15 @@ export class ImageTool implements BlockTool {
     if (imgEl) {
       imgEl.style.cursor = 'zoom-in';
       imgEl.addEventListener('click', () => openLightbox({ url: this.data.url, alt: this.data.alt, fileName: this.data.fileName, crop: this.data.crop, origin: originEl, i18n: this.api.i18n, navigation: this.collectNavigation() }));
-      imgEl.addEventListener('error', () => this.applyBrokenImage(), { once: true });
+      this.reloadAttempts = 0;
+      imgEl.addEventListener('error', () => this.handleImgLoadFailure(imgEl, figure));
+      imgEl.addEventListener('load', () => {
+        figure.removeAttribute('data-loading');
+        figure.style.removeProperty('aspect-ratio');
+        figure.style.removeProperty('min-height');
+        imgEl.style.removeProperty('min-height');
+        this.cacheNaturalDimensions(imgEl);
+      });
       if (imgEl.complete && imgEl.naturalWidth === 0) {
         this.applyBrokenImage();
         return;
@@ -636,8 +699,19 @@ export class ImageTool implements BlockTool {
   }
 
   private observeOverlayWidth(figure: HTMLElement, overlay: HTMLElement): void {
-    const sync = (): void => updateOverlayCompact(overlay, figure.clientWidth);
+    const img = figure.querySelector<HTMLImageElement>('img');
+    const sync = (): void => {
+      if (this.root && img && img.naturalWidth > 0) {
+        const container = this.root.parentElement;
+        const containerWidth = container?.clientWidth ?? figure.clientWidth;
+        applyAutoFull(this.root, img, containerWidth);
+      }
+      updateOverlayCompact(overlay, figure.clientWidth, figure.clientHeight);
+    };
     sync();
+    if (img && !img.complete) {
+      img.addEventListener('load', sync, { once: true });
+    }
     if (typeof ResizeObserver === 'undefined') return;
     this.overlayResizeObserver = new ResizeObserver(sync);
     this.overlayResizeObserver.observe(figure);

package/src/tools/image/probe-dimensions.ts

@@ -0,0 +1,36 @@
+import { dimensionsFromSvg } from './dimensions-from-svg';
+import { dimensionsFromUrl } from './dimensions-from-url';
+
+type Dims = { width: number; height: number };
+
+function probeViaImage(url: string): Promise<Dims | null> {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = (): void => {
+      const width = img.naturalWidth;
+      const height = img.naturalHeight;
+      if (width > 0 && height > 0) {
+        resolve({ width, height });
+      } else {
+        resolve(null);
+      }
+    };
+    img.onerror = (): void => resolve(null);
+    img.src = url;
+  });
+}
+
+/**
+ * Resolve an image's intrinsic dimensions ahead of display.
+ * Tries synchronous URL/filename parsing first (common CDN hints),
+ * falls back to parsing SVG text, finally loads the image via `new Image()`.
+ * Returns null when no strategy succeeds or the image has no intrinsic size.
+ */
+export async function probeImageDimensions(url: string): Promise<Dims | null> {
+  if (!url) return null;
+  const fromUrl = dimensionsFromUrl(url);
+  if (fromUrl) return fromUrl;
+  const fromSvg = await dimensionsFromSvg(url);
+  if (fromSvg) return fromSvg;
+  return probeViaImage(url);
+}

package/src/tools/image/ui.ts

@@ -916,13 +916,57 @@ export interface OverlayState {
  * to comfortably fit the full row (roughly sm-size territory).
  */
 export const OVERLAY_COMPACT_THRESHOLD = 230;
+/**
+ * Below this figure height the overlay collapses too — a short image can't
+ * fit the ~46px toolbar row without colliding with the resize handles.
+ */
+export const OVERLAY_COMPACT_HEIGHT_THRESHOLD = 80;
+
+/**
+ * Predict whether an image would still render too short at full container
+ * width (data-size="full"). Used to force the layout to full + compact
+ * overlay for banner-shaped / tiny-natural images that otherwise collide
+ * with the resize handles and toolbar row.
+ */
+export function isTinyImage(
+  naturalWidth: number,
+  naturalHeight: number,
+  containerWidth: number,
+  heightThreshold: number = OVERLAY_COMPACT_HEIGHT_THRESHOLD
+): boolean {
+  if (naturalWidth <= 0 || naturalHeight <= 0 || containerWidth <= 0) return false;
+  const fullWidthHeight = containerWidth * (naturalHeight / naturalWidth);
+  return fullWidthHeight < heightThreshold;
+}
+
+/**
+ * Flag the block root for auto-full layout when the source image is too
+ * short to host the toolbar + resize handles at its default size. CSS keys
+ * off the attribute to override `data-size` and stretch the figure to the
+ * full container width.
+ */
+export function applyAutoFull(
+  root: HTMLElement,
+  img: Pick<HTMLImageElement, 'naturalWidth' | 'naturalHeight'>,
+  containerWidth: number
+): void {
+  if (isTinyImage(img.naturalWidth, img.naturalHeight, containerWidth)) {
+    root.setAttribute('data-auto-full', 'true');
+  } else {
+    root.removeAttribute('data-auto-full');
+  }
+}
 
 export function updateOverlayCompact(
   overlay: HTMLElement,
   width: number,
-  threshold: number = OVERLAY_COMPACT_THRESHOLD
+  height?: number,
+  threshold: number = OVERLAY_COMPACT_THRESHOLD,
+  heightThreshold: number = OVERLAY_COMPACT_HEIGHT_THRESHOLD
 ): void {
-  if (width > 0 && width < threshold) {
+  const tooNarrow = width > 0 && width < threshold;
+  const tooShort = height !== undefined && height > 0 && height < heightThreshold;
+  if (tooNarrow || tooShort) {
     overlay.setAttribute('data-compact', 'true');
   } else {
     overlay.removeAttribute('data-compact');

package/src/tools/image/uploader.ts

@@ -7,6 +7,10 @@ export interface UploadResult {
   fileName?: string;
 }
 
+export interface UploadOptions {
+  onProgress?: (percent: number) => void;
+}
+
 function parseUrl(raw: string): URL | null {
   try {
     return new URL(raw);
@@ -38,33 +42,33 @@ function dataUrlToFile(dataUrl: string): File {
 export class Uploader {
   constructor(private readonly config: ImageConfig) {}
 
-  public async handleUrl(raw: string): Promise<UploadResult> {
+  public async handleUrl(raw: string, options: UploadOptions = {}): Promise<UploadResult> {
     if (isImageDataUrl(raw)) {
-      return this.handleDataUrl(raw);
+      return this.handleDataUrl(raw, options);
     }
     this.validateUrl(raw);
     if (this.config.uploader?.uploadByUrl) {
-      return this.config.uploader.uploadByUrl(raw);
+      return this.config.uploader.uploadByUrl(raw, { onProgress: options.onProgress });
     }
 
     return { url: raw };
   }
 
-  public async handleFile(file: File): Promise<UploadResult> {
+  public async handleFile(file: File, options: UploadOptions = {}): Promise<UploadResult> {
     this.validateFile(file);
     if (this.config.uploader?.uploadByFile) {
-      return this.config.uploader.uploadByFile(file);
+      return this.config.uploader.uploadByFile(file, { onProgress: options.onProgress });
     }
 
     return { url: URL.createObjectURL(file), fileName: file.name };
   }
 
-  private async handleDataUrl(raw: string): Promise<UploadResult> {
+  private async handleDataUrl(raw: string, options: UploadOptions): Promise<UploadResult> {
     if (this.config.uploader?.uploadByUrl) {
-      return this.config.uploader.uploadByUrl(raw);
+      return this.config.uploader.uploadByUrl(raw, { onProgress: options.onProgress });
     }
     if (this.config.uploader?.uploadByFile) {
-      return this.handleFile(dataUrlToFile(raw));
+      return this.handleFile(dataUrlToFile(raw), options);
     }
 
     return { url: raw };

package/src/tools/table/table-cell-clipboard.ts

@@ -1,6 +1,7 @@
 import type { SanitizerConfig } from '../../../types/configs/sanitizer-config';
 import type { CellPlacement, ClipboardBlockData, TableCellsClipboard } from './types';
 import { mapToNearestPresetColor } from '../../components/utils/color-mapping';
+import { isDefaultDarkBackground, isDefaultWhiteBackground } from '../../components/modules/paste/google-docs-preprocessor';
 import { clean } from '../../components/utils/sanitizer';
 
 /** Attribute name used to embed clipboard data on the HTML table element. */
@@ -245,7 +246,11 @@ function sanitizeCellHtml(td: Element): string {
     const bgColor = bgMatch?.[1]?.trim();
 
     const hasColor = color !== undefined && !isDefaultBlack(color);
-    const hasBgColor = bgColor !== undefined && bgColor !== 'transparent';
+    // Filter resolved page bg (white/dark) so plain spans don't collapse onto gray preset.
+    const hasBgColor = bgColor !== undefined
+      && bgColor !== 'transparent'
+      && !isDefaultWhiteBackground(bgColor)
+      && !isDefaultDarkBackground(bgColor);
 
     if (!isBold && !isItalic && !hasColor && !hasBgColor) {
       continue;
@@ -282,7 +287,11 @@ function sanitizeCellHtml(td: Element): string {
     const bgColor = bgMatch?.[1]?.trim();
 
     const hasColor = color !== undefined && !isDefaultBlack(color) && color !== 'inherit';
-    const hasBgColor = bgColor !== undefined && bgColor !== 'transparent' && bgColor !== 'inherit';
+    const hasBgColor = bgColor !== undefined
+      && bgColor !== 'transparent'
+      && bgColor !== 'inherit'
+      && !isDefaultWhiteBackground(bgColor)
+      && !isDefaultDarkBackground(bgColor);
 
     if (!hasColor && !hasBgColor) {
       continue;
@@ -372,7 +381,12 @@ export function parseGenericHtmlTable(html: string): TableCellsClipboard | null
       const cellBgMatch = /background-color\s*:\s*([^;]+)/i.exec(tdStyle);
 
       if (cellBgMatch?.[1]) {
-        cell.color = mapToNearestPresetColor(cellBgMatch[1].trim(), 'bg');
+        const cellBg = cellBgMatch[1].trim();
+
+        // Skip resolved page bg (white/dark) so plain cells don't collapse onto gray preset.
+        if (!isDefaultWhiteBackground(cellBg) && !isDefaultDarkBackground(cellBg)) {
+          cell.color = mapToNearestPresetColor(cellBg, 'bg');
+        }
       }
 
       const cellTextColorMatch = /(?<![a-z-])color\s*:\s*([^;]+)/i.exec(tdStyle);

package/types/tools/image.d.ts

@@ -46,6 +46,20 @@ export interface ImageData extends BlockToolData {
   alt?: string;
   /** Original filename, when known */
   fileName?: string;
+  /** Intrinsic pixel width of the source image. Cached after first successful load. */
+  naturalWidth?: number;
+  /** Intrinsic pixel height of the source image. Cached after first successful load. */
+  naturalHeight?: number;
+}
+
+/**
+ * Context passed to consumer-supplied upload methods. Currently exposes
+ * an `onProgress(percent)` hook so the upload bar in the editor can
+ * reflect real upload progress (0–100). Optional — consumers that don't
+ * report progress simply ignore it.
+ */
+export interface ImageUploadContext {
+  onProgress?(percent: number): void;
 }
 
 /**
@@ -53,8 +67,8 @@ export interface ImageData extends BlockToolData {
  * the tool falls back to blob URLs (uploadByFile) or direct embed (uploadByUrl).
  */
 export interface ImageUploader {
-  uploadByFile?(file: File): Promise<{ url: string; fileName?: string }>;
-  uploadByUrl?(url: string): Promise<{ url: string }>;
+  uploadByFile?(file: File, ctx?: ImageUploadContext): Promise<{ url: string; fileName?: string }>;
+  uploadByUrl?(url: string, ctx?: ImageUploadContext): Promise<{ url: string }>;
 }
 
 /**