@jackuait/blok 0.16.1 → 0.18.0

package/src/tools/image/index.ts

@@ -33,6 +33,8 @@ import {
 } from '../../components/icons';
 import { DEFAULT_CAPTION_PLACEHOLDER, URL_PATTERN } from './constants';
 import { renderEmptyState, type EmptyStateElement } from './empty-state';
+import { uploadErrorMessage } from '../../components/utils/upload-error-message';
+import { pickDisplayMaxSize } from '../../components/utils/max-size';
 import { renderErrorState } from './error-state';
 import { ImageError } from './errors';
 import { attachResizeHandle, type ResizeEdge } from './resizer';
@@ -50,6 +52,8 @@ import { openAltPopover } from './alt-popover';
 import { probeImageDimensions } from './probe-dimensions';
 import { renderUploadingState, type UploadingStateElement } from './uploading-state';
 import { Uploader, type UploadResult } from './uploader';
+import { convertGifToWebm } from './gif-to-webm';
+import { resolveConvertedUploader } from './converted-uploader';
 
 type ToolState = 'EMPTY' | 'LOADING' | 'RENDERED' | 'ERROR';
 
@@ -83,6 +87,7 @@ export class ImageTool implements BlockTool {
   private brokenImage = false;
   private retrying = false;
   private reloadAttempts = 0;
+  private converting = false;
 
   constructor(options: BlockToolConstructorOptions<ImageData, ImageConfig>) {
     this.api = options.api;
@@ -153,7 +158,11 @@ export class ImageTool implements BlockTool {
   public onPaste(event: PasteEvent): void {
     if (event.type === 'pattern') {
       const detail = (event as PatternPasteEvent).detail;
-      this.applyResult({ url: detail.data });
+      if (this.shouldConvertGifUrl(detail.data)) {
+        this.startUrl(detail.data);
+      } else {
+        this.applyResult({ url: detail.data });
+      }
       return;
     }
     if (event.type === 'tag') {
@@ -174,6 +183,18 @@ export class ImageTool implements BlockTool {
   };
 
   private startUpload(file: File): void {
+    if (this.shouldConvertGif(file.type)) {
+      void this.convertGifToVideoBlock(file).then((handled) => {
+        if (!handled) this.uploadImageFile(file);
+      });
+      return;
+    }
+    this.uploadImageFile(file);
+  }
+
+  /** Existing upload body, extracted verbatim. */
+  private uploadImageFile(file: File): void {
+    this.converting = false;
     this.lastFileName = file.name;
     this.lastSource = { kind: 'file', file };
     this.state = 'LOADING';
@@ -186,7 +207,67 @@ export class ImageTool implements BlockTool {
       .catch((err) => this.applyError(err));
   }
 
+  private shouldConvertGif(mimeType: string): boolean {
+    return this.config.convertGifToVideo !== false && mimeType === 'image/gif';
+  }
+
+  /**
+   * Try to convert a GIF to a looping WebM video block. Returns true only when
+   * the block was swapped; false means the caller should keep the GIF (image).
+   */
+  private async convertGifToVideoBlock(file: File): Promise<boolean> {
+    this.converting = true;
+    this.state = 'LOADING';
+    this.errorMessage = null;
+    this.brokenImage = false;
+    this.lastFileName = file.name;
+    this.renderState();
+    try {
+      const blob = await convertGifToWebm(await file.arrayBuffer(), { onProgress: this.reportProgress });
+      if (!blob) { this.converting = false; return false; }
+      const webm = new File([blob], file.name.replace(/\.gif$/i, '.webm'), { type: 'video/webm' });
+      const url = await this.uploadConverted(webm);
+      if (url === null) { this.converting = false; return false; }
+      this.converting = false;
+      return this.swapToVideoBlock(url, webm.name);
+    } catch {
+      this.converting = false;
+      return false;
+    }
+  }
+
+  private async uploadConverted(file: File): Promise<string | null> {
+    const upload = resolveConvertedUploader(this.api, this.config);
+    if (upload) {
+      const res = await upload(file, { onProgress: this.reportProgress });
+      return res.url;
+    }
+    return URL.createObjectURL(file);
+  }
+
+  private swapToVideoBlock(url: string, fileName: string): boolean {
+    const index = this.api.blocks.getBlockIndex(this.block.id);
+    if (index === undefined) return false;
+    this.api.blocks.insert(
+      'video',
+      { url, autoplay: true, loop: true, mimeType: 'video/webm', fileName },
+      {}, index, false, true,
+    );
+    return true;
+  }
+
   private startUrl(url: string): void {
+    if (this.shouldConvertGifUrl(url)) {
+      void this.convertGifUrlToVideoBlock(url).then((handled) => {
+        if (!handled) this.loadImageUrl(url);
+      });
+      return;
+    }
+    this.loadImageUrl(url);
+  }
+
+  /** Existing startUrl body, extracted verbatim. */
+  private loadImageUrl(url: string): void {
     this.lastFileName = null;
     this.lastSource = { kind: 'url', url };
     this.state = 'LOADING';
@@ -199,6 +280,41 @@ export class ImageTool implements BlockTool {
       .catch((err) => this.applyError(err));
   }
 
+  private shouldConvertGifUrl(url: string): boolean {
+    return this.config.convertGifToVideo !== false && /\.gif(\?|#|$)/i.test(url);
+  }
+
+  private async convertGifUrlToVideoBlock(url: string): Promise<boolean> {
+    const bytes = await this.fetchGifBytes(url);
+    if (!bytes) return false;
+    this.converting = true;
+    this.state = 'LOADING';
+    this.errorMessage = null;
+    this.renderState();
+    try {
+      const blob = await convertGifToWebm(bytes, { onProgress: this.reportProgress });
+      if (!blob) { this.converting = false; return false; }
+      const webm = new File([blob], 'animation.webm', { type: 'video/webm' });
+      const uploadedUrl = await this.uploadConverted(webm);
+      if (uploadedUrl === null) { this.converting = false; return false; }
+      this.converting = false;
+      return this.swapToVideoBlock(uploadedUrl, webm.name);
+    } catch {
+      this.converting = false;
+      return false;
+    }
+  }
+
+  private async fetchGifBytes(url: string): Promise<ArrayBuffer | null> {
+    try {
+      const res = await fetch(url);
+      if (!res.ok) return null;
+      return await res.arrayBuffer();
+    } catch {
+      return null; // CORS / network → keep the GIF as an image URL
+    }
+  }
+
   private retryLastSource(): void {
     const source = this.lastSource;
     if (!source) {
@@ -231,7 +347,12 @@ export class ImageTool implements BlockTool {
 
   private applyError(err: unknown): void {
     this.state = 'ERROR';
-    this.errorMessage = err instanceof Error ? err.message : this.api.i18n.t('tools.image.errorUploadFailed');
+    this.errorMessage = err instanceof ImageError
+      ? uploadErrorMessage(err, (key) => this.api.i18n.t(key), {
+        tooLarge: 'tools.image.errorFileTooLarge',
+        generic: 'tools.image.errorUploadFailed',
+      })
+      : this.api.i18n.t('tools.image.errorUploadFailed');
     this.brokenImage = false;
     this.retrying = false;
     this.renderState();
@@ -565,7 +686,7 @@ export class ImageTool implements BlockTool {
       onFile: (file) => this.startUpload(file),
       onUrl: (url) => this.startUrl(url),
       acceptTypes: this.config.types,
-      maxSize: this.config.maxSize,
+      maxSize: pickDisplayMaxSize(this.config.maxSize),
       i18n: this.api.i18n,
     });
     this.emptyStateEl = el;
@@ -578,6 +699,7 @@ export class ImageTool implements BlockTool {
       fileName: this.lastFileName ?? this.api.i18n.t('tools.image.uploading'),
       onCancel: () => this.transitionToEmpty(),
       i18n: this.api.i18n,
+      ...(this.converting ? { statusLabel: this.api.i18n.t('tools.image.converting') } : {}),
     });
     this.uploadingEl = el;
     this.root.appendChild(el);

package/src/tools/image/resizer.ts

@@ -41,13 +41,26 @@ export function clampPercent(value: number, minPercent: number = MIN_WIDTH_PERCE
   return value;
 }
 
+export interface WidthResult {
+  /** The clamped width as a percent of the container. */
+  percent: number;
+  /**
+   * True when the drag wanted to shrink past the lower floor and was pinned
+   * there — used to surface a "can't go smaller" cue to the user.
+   */
+  clampedToMin: boolean;
+}
+
 /**
  * Pointer follows the dragged edge; width grows around the alignment anchor.
  * Center (frac 0.5) → both edges move → width delta = 2× pointer delta.
  * Edge-anchored (frac 0 or 1) → single side grows → width delta = 1× pointer delta.
+ *
+ * Returns the clamped percent plus whether it hit the lower floor, so callers
+ * can animate a resistance cue when the player refuses to shrink further.
  */
-export function computeWidthPercent(input: ComputeWidthInput): number {
-  if (input.containerWidth <= 0) return clampPercent(0);
+export function computeWidthResult(input: ComputeWidthInput): WidthResult {
+  if (input.containerWidth <= 0) return { percent: clampPercent(0), clampedToMin: true };
   const frac = input.alignFrac ?? 0;
   const denom = input.edge === 'right' ? 1 - frac : frac;
   const multiplier = denom === 0 ? 1 : 1 / denom;
@@ -57,9 +70,23 @@ export function computeWidthPercent(input: ComputeWidthInput): number {
   const minPercent = input.minWidthPx !== undefined
     ? Math.round((input.minWidthPx / input.containerWidth) * 100)
     : MIN_WIDTH_PERCENT;
-  return clampPercent(Math.round((nextWidth / input.containerWidth) * 100), minPercent);
+  const floor = Math.min(Math.max(minPercent, MIN_WIDTH_PERCENT), MAX_WIDTH_PERCENT);
+  const raw = Math.round((nextWidth / input.containerWidth) * 100);
+  return { percent: clampPercent(raw, minPercent), clampedToMin: raw < floor };
 }
 
+export function computeWidthPercent(input: ComputeWidthInput): number {
+  return computeWidthResult(input).percent;
+}
+
+/**
+ * Marker set on the figure while a drag is pinned at the lower floor. Shared
+ * resize-cue CSS keys off it to recoil the player/image/embed and neutralise
+ * the dragged handle, so every resizable tool gets the "can't shrink further"
+ * feedback for free.
+ */
+export const RESIZE_BLOCKED_ATTR = 'data-resize-blocked';
+
 export interface AttachResizeHandleOptions {
   handle: HTMLElement;
   figure: HTMLElement;
@@ -103,7 +130,7 @@ export function attachResizeHandle(opts: AttachResizeHandleOptions): () => void
 
   const onMove = (event: PointerEvent): void => {
     if (!state.active) return;
-    const next = computeWidthPercent({
+    const result = computeWidthResult({
       edge: opts.edge,
       containerWidth: state.containerWidth,
       startWidth: state.startWidth,
@@ -112,13 +139,19 @@ export function attachResizeHandle(opts: AttachResizeHandleOptions): () => void
       alignFrac,
       minWidthPx: opts.minWidthPx,
     });
-    state.lastPercent = next;
-    opts.onPreview(next);
+    state.lastPercent = result.percent;
+    if (result.clampedToMin) {
+      opts.figure.setAttribute(RESIZE_BLOCKED_ATTR, 'true');
+    } else {
+      opts.figure.removeAttribute(RESIZE_BLOCKED_ATTR);
+    }
+    opts.onPreview(result.percent);
   };
 
   const onUp = (event: PointerEvent): void => {
     if (!state.active) return;
     state.active = false;
+    opts.figure.removeAttribute(RESIZE_BLOCKED_ATTR);
     opts.handle.releasePointerCapture(event.pointerId);
     if (state.lastPercent !== undefined) opts.onCommit(state.lastPercent);
   };

package/src/tools/image/uploader.ts

@@ -1,4 +1,6 @@
 import type { ImageConfig } from '../../../types/tools/image';
+import { resolveMaxSize } from '../../components/utils/max-size';
+import { matchesMime } from '../../components/utils/mime-match';
 import { DEFAULT_MAX_SIZE, DEFAULT_MIME_TYPES } from './constants';
 import { ImageError } from './errors';
 
@@ -87,9 +89,9 @@ export class Uploader {
 
   private validateFile(file: File): void {
     const types = this.config.types ?? [...DEFAULT_MIME_TYPES];
-    const maxSize = this.config.maxSize ?? DEFAULT_MAX_SIZE;
+    const maxSize = resolveMaxSize(this.config.maxSize, file.type, DEFAULT_MAX_SIZE);
 
-    if (!types.includes(file.type)) {
+    if (!matchesMime(file.type, types)) {
       throw new ImageError('UNSUPPORTED_TYPE', file.type || 'unknown');
     }
     if (file.size > maxSize) {

package/src/tools/image/uploading-state.ts

@@ -5,6 +5,7 @@ import { tr } from './i18n';
 export interface UploadingStateOptions {
   fileName: string;
   sizeLabel?: string;
+  statusLabel?: string;
   onCancel?(): void;
   i18n?: I18nInstance;
 }
@@ -33,7 +34,7 @@ export function renderUploadingState(opts: UploadingStateOptions): UploadingStat
 
   const label = document.createElement('span');
   label.className = 'blok-image-uploading__label';
-  label.textContent = tr(opts.i18n, 'tools.image.uploadingLabel');
+  label.textContent = opts.statusLabel ?? tr(opts.i18n, 'tools.image.uploadingLabel');
 
   const name = document.createElement('span');
   name.className = 'blok-image-uploading__filename';

package/src/tools/index.ts

@@ -33,6 +33,8 @@ export { Quote } from './quote';
 export { CodeTool as Code } from './code';
 export { ImageTool as Image } from './image';
 export { FileTool as File } from './file';
+export { AudioTool as Audio } from './audio';
+export { VideoTool as Video } from './video';
 export { ColumnList } from './column-list';
 export { Column } from './column';
 export { Columns } from './columns';
@@ -65,6 +67,8 @@ export const defaultBlockTools = {
   code: { inlineToolbar: false },
   image: {},
   file: {},
+  audio: {},
+  video: {},
   column_list: {},
   column: {},
   embed: {},

package/src/tools/video/constants.ts

@@ -0,0 +1,19 @@
+// Accept any video type by default; consumers restrict via the `types` config.
+export const DEFAULT_MIME_TYPES = ['video/*'] as const;
+
+export const DEFAULT_MAX_SIZE = 100 * 1024 * 1024; // 100 MiB
+
+export const DEFAULT_CAPTION_PLACEHOLDER = 'Write a caption…';
+
+export const MIN_WIDTH_PERCENT = 10;
+export const MAX_WIDTH_PERCENT = 100;
+
+/**
+ * Hard floor for the player's pixel width. Below this the inline controls
+ * (volume slider, timecode, scrubber, view-mode buttons) crush together, so the
+ * resize handle clamps here instead of the global 10% percent floor.
+ */
+export const MIN_WIDTH_PX = 440;
+
+/** Direct links to a playable video file. */
+export const URL_PATTERN = /^https?:\/\/\S+\.(mp4|webm|ogg|mov|m4v)(\?\S*)?$/i;