@jackuait/blok 0.21.0 → 0.22.0

package/src/components/modules/paste/notion-blocks-v3.ts

@@ -20,7 +20,7 @@
  * correctly-nested block tree.
  */
 
-import { colorVarName } from '../../shared/color-presets';
+import { COLOR_PRESETS, colorVarName } from '../../shared/color-presets';
 import { DEFAULT_EMOJI } from '../../../tools/callout/constants';
 import { DEFAULT_LANGUAGE, LANGUAGES } from '../../../tools/code/constants';
 import { matchEmbedService } from '../../../tools/link/registry';
@@ -151,6 +151,17 @@ export function parseNotionBlocksV3(json: string): NotionParsedBlock[] | null {
 
     result.push(block);
 
+    // Blok's callout keeps its body in CHILD blocks, so the callout's own inline
+    // title line becomes a child paragraph (emitted before its `content`
+    // children), matching what a native callout copy carries.
+    if (value.type === 'callout') {
+      const calloutTitle = richText(value.properties?.title, byId);
+
+      if (calloutTitle.length > 0) {
+        result.push({ id: `${id}:callout-body`, tool: 'paragraph', data: { text: calloutTitle }, parentId: id });
+      }
+    }
+
     children.forEach((childId) => walk(childId, id));
   };
 
@@ -328,7 +339,10 @@ function mapValue(value: NotionValue, byId: Map<string, NotionValue>): Mapped |
       const emoji = typeof format.page_icon === 'string' && format.page_icon.length > 0 ? format.page_icon : DEFAULT_EMOJI;
       const { textColor, backgroundColor } = parseBlockColor(format.block_color);
 
-      return { tool: 'callout', data: { emoji, text, textColor, backgroundColor } };
+      // No inline `text`: Blok's callout stores its body in CHILD blocks, so the
+      // callout's title line is emitted as a child paragraph by `walk` (and a
+      // stray `data.text` would be silently discarded by the callout tool).
+      return { tool: 'callout', data: { emoji, textColor, backgroundColor } };
     }
     case 'page':
       // A `page` block inside content is a SUB-PAGE reference: its body lives on
@@ -862,11 +876,21 @@ function buildColourStyle(colourFlags: unknown[]): string {
   return parts.join('; ');
 }
 
-/** Map a Notion `block_color` to callout `{ textColor, backgroundColor }` names. */
+/** The set of colour preset names Blok recognises (its callout/marker palette). */
+const BLOK_COLOR_NAMES = new Set(COLOR_PRESETS.map((preset) => preset.name));
+
+/**
+ * Map a Notion `block_color` to callout `{ textColor, backgroundColor }` names.
+ * Names outside Blok's preset palette collapse to `null`: the callout tool
+ * builds `var(--blok-color-<name>-…)` from the name verbatim, so an unrecognised
+ * name yields an undefined custom property that silently drops the colour AND
+ * the callout's border. Notion's palette already aligns with Blok's, so this is
+ * a safety clamp rather than a remap.
+ */
 function parseBlockColor(token: unknown): { textColor: string | null; backgroundColor: string | null } {
   const colour = parseNotionColour(token);
 
-  if (colour === null) {
+  if (colour === null || !BLOK_COLOR_NAMES.has(colour.name)) {
     return { textColor: null, backgroundColor: null };
   }
 

package/src/components/utils/media-empty-state.ts

@@ -1,3 +1,4 @@
+import type { MediaSource } from '../../../types/tools/media-source';
 import {
   IconArrowDownLine,
   IconArrowUp,
@@ -48,6 +49,15 @@ export interface MediaEmptyStateOptions {
   labels: MediaEmptyStateLabels;
   onFile(file: File): void;
   onUrl(url: string): void;
+  /**
+   * Which insert sources to expose:
+   * - `'both'` (default): show the Upload and Link tabs.
+   * - `'upload'`: file upload only — the Link tab and URL bar are hidden.
+   * - `'url'`: link/embed only — the Upload dropzone, file picker, and
+   *   drag/paste-to-upload affordances are hidden.
+   * With a single source the tablist is omitted entirely.
+   */
+  sources?: MediaSource;
   /**
    * How the panel transitions when switching Upload/Link tabs:
    * - `'reflow'` (default): ease the panel height between the two layouts and
@@ -64,6 +74,9 @@ export interface MediaEmptyStateOptions {
 
 export type MediaEmptyStateSwap = 'reflow' | 'slide' | 'none';
 
+/** Re-exported from the public type so the renderer and tools share one source. */
+export type { MediaSource };
+
 const MIME_LABELS: Record<string, string> = {
   'image/jpeg': 'JPG',
   'image/jpg': 'JPG',
@@ -213,6 +226,10 @@ export function renderMediaEmptyState(opts: MediaEmptyStateOptions): MediaEmptyS
 
   const swapMode: MediaEmptyStateSwap = opts.swap ?? 'reflow';
 
+  const source: MediaSource = opts.sources ?? 'both';
+  const showUpload = source !== 'url';
+  const showEmbed = source !== 'upload';
+
   const root = document.createElement('div') as unknown as MediaEmptyStateElement;
   root.className = 'blok-media-empty';
   root.setAttribute('data-blok-media-empty-state', '');
@@ -233,17 +250,27 @@ export function renderMediaEmptyState(opts: MediaEmptyStateOptions): MediaEmptyS
   panel.setAttribute('data-panel-host', '');
   panel.setAttribute('role', 'tabpanel');
 
+  const initialKind: SourceKind = showUpload ? 'upload' : 'embed';
+
   const tabs = document.createElement('div');
   tabs.className = 'blok-media-empty__tabs';
   tabs.setAttribute('role', 'tablist');
   tabs.setAttribute('aria-label', labels.sourceAria);
-  const uploadTab = makeTab('upload', labels.upload, panel.id, true);
-  const embedTab = makeTab('embed', labels.embed, panel.id, false);
-  tabs.append(uploadTab, embedTab);
-  panel.setAttribute('aria-labelledby', uploadTab.id);
-
-  const tabList = [uploadTab, embedTab];
-  const tabKinds: SourceKind[] = ['upload', 'embed'];
+  const tabList: HTMLButtonElement[] = [];
+  const tabKinds: SourceKind[] = [];
+  if (showUpload) {
+    const uploadTab = makeTab('upload', labels.upload, panel.id, true);
+    tabs.append(uploadTab);
+    tabList.push(uploadTab);
+    tabKinds.push('upload');
+  }
+  if (showEmbed) {
+    const embedTab = makeTab('embed', labels.embed, panel.id, !showUpload);
+    tabs.append(embedTab);
+    tabList.push(embedTab);
+    tabKinds.push('embed');
+  }
+  panel.setAttribute('aria-labelledby', tabList[0].id);
 
   const dropOverlay = document.createElement('div');
   dropOverlay.className = 'blok-media-empty__drop-overlay';
@@ -456,53 +483,59 @@ export function renderMediaEmptyState(opts: MediaEmptyStateOptions): MediaEmptyS
     }
   });
 
-  card.addEventListener('paste', (ev) => {
-    if (card.getAttribute('data-active-tab') !== 'upload') return;
-    const clip = ev.clipboardData;
-    if (!clip) return;
-    for (const item of Array.from(clip.items)) {
-      if (item.kind !== 'file') continue;
-      const file = item.getAsFile();
-      if (file && (!types.length || matchesMime(file.type, types))) {
-        ev.preventDefault();
-        opts.onFile(file);
-        return;
+  // File-based affordances (paste/drag/drop) only apply when upload is enabled.
+  if (showUpload) {
+    card.addEventListener('paste', (ev) => {
+      if (card.getAttribute('data-active-tab') !== 'upload') return;
+      const clip = ev.clipboardData;
+      if (!clip) return;
+      for (const item of Array.from(clip.items)) {
+        if (item.kind !== 'file') continue;
+        const file = item.getAsFile();
+        if (file && (!types.length || matchesMime(file.type, types))) {
+          ev.preventDefault();
+          opts.onFile(file);
+          return;
+        }
       }
-    }
-  });
+    });
 
-  const drag = { depth: 0 };
-  card.addEventListener('dragenter', (ev) => {
-    if (!ev.dataTransfer?.types.includes('Files')) return;
-    ev.preventDefault();
-    drag.depth += 1;
-    card.classList.add('is-dragover');
-  });
-  card.addEventListener('dragover', (ev) => {
-    const dt = ev.dataTransfer;
-    if (!dt?.types.includes('Files')) return;
-    ev.preventDefault();
-    dt.dropEffect = 'copy';
-  });
-  card.addEventListener('dragleave', () => {
-    drag.depth = Math.max(0, drag.depth - 1);
-    if (drag.depth === 0) card.classList.remove('is-dragover');
-  });
-  card.addEventListener('drop', (ev) => {
-    ev.preventDefault();
-    drag.depth = 0;
-    card.classList.remove('is-dragover');
-    const file = ev.dataTransfer?.files?.[0];
-    if (file) opts.onFile(file);
-  });
+    const drag = { depth: 0 };
+    card.addEventListener('dragenter', (ev) => {
+      if (!ev.dataTransfer?.types.includes('Files')) return;
+      ev.preventDefault();
+      drag.depth += 1;
+      card.classList.add('is-dragover');
+    });
+    card.addEventListener('dragover', (ev) => {
+      const dt = ev.dataTransfer;
+      if (!dt?.types.includes('Files')) return;
+      ev.preventDefault();
+      dt.dropEffect = 'copy';
+    });
+    card.addEventListener('dragleave', () => {
+      drag.depth = Math.max(0, drag.depth - 1);
+      if (drag.depth === 0) card.classList.remove('is-dragover');
+    });
+    card.addEventListener('drop', (ev) => {
+      ev.preventDefault();
+      drag.depth = 0;
+      card.classList.remove('is-dragover');
+      const file = ev.dataTransfer?.files?.[0];
+      if (file) opts.onFile(file);
+    });
+  }
 
   const header = document.createElement('div');
   header.className = 'blok-media-empty__header';
-  header.append(label, tabs);
+  // A single source needs no tablist — show just the caption.
+  if (tabList.length > 1) header.append(label, tabs);
+  else header.append(label);
 
-  card.append(header, panel, dropOverlay);
+  card.append(header, panel);
+  if (showUpload) card.append(dropOverlay);
   root.append(card, error);
-  activate('upload');
+  activate(initialKind);
 
   root.setError = (message: string | null): void => {
     if (!message) {

package/src/tools/audio/empty-state.ts

@@ -3,6 +3,7 @@ import { tr } from './i18n';
 import {
   renderMediaEmptyState,
   type MediaEmptyStateElement,
+  type MediaSource,
 } from '../../components/utils/media-empty-state';
 import type { I18nInstance } from '../../components/utils/tools';
 
@@ -13,6 +14,8 @@ export interface EmptyStateOptions {
   acceptTypes?: string[];
   /** Max file size in bytes — surfaced in the formats hint when set. */
   maxSize?: number;
+  /** Which insert sources to expose. Default `'both'`. */
+  sources?: MediaSource;
   i18n?: I18nInstance;
 }
 
@@ -23,6 +26,7 @@ export function renderEmptyState(opts: EmptyStateOptions): EmptyStateElement {
   return renderMediaEmptyState({
     acceptTypes: opts.acceptTypes ?? [...DEFAULT_MIME_TYPES],
     maxSize: opts.maxSize,
+    sources: opts.sources,
     onFile: opts.onFile,
     onUrl: opts.onUrl,
     labels: {

package/src/tools/audio/index.ts

@@ -118,11 +118,14 @@ export class AudioTool implements BlockTool {
   }
 
   public onPaste(event: PasteEvent): void {
+    const sources = this.config.sources;
     if (event.type === 'pattern') {
+      if (sources === 'upload') return;
       this.applyResult({ url: (event as PatternPasteEvent).detail.data });
       return;
     }
     if (event.type === 'file') {
+      if (sources === 'url') return;
       this.startUpload((event as FilePasteEvent).detail.file);
     }
   }
@@ -364,6 +367,7 @@ export class AudioTool implements BlockTool {
       onUrl: (url) => this.startUrl(url),
       acceptTypes: this.config.types,
       maxSize: pickDisplayMaxSize(this.config.maxSize),
+      sources: this.config.sources,
       i18n: this.api.i18n,
     });
     this.root.appendChild(el);

package/src/tools/file/empty-state.ts

@@ -1,6 +1,7 @@
 import {
   renderMediaEmptyState,
   type MediaEmptyStateElement,
+  type MediaSource,
 } from '../../components/utils/media-empty-state';
 import type { I18nInstance } from '../../components/utils/tools';
 
@@ -11,6 +12,8 @@ export interface EmptyStateOptions {
   acceptTypes: string[];
   /** Max file size in bytes — surfaced in the formats hint when set. */
   maxSize?: number;
+  /** Which insert sources to expose. Default `'both'`. */
+  sources?: MediaSource;
   i18n: I18nInstance;
   onFile(file: File): void;
   onUrl(url: string): void;
@@ -21,6 +24,7 @@ export function renderEmptyState(opts: EmptyStateOptions): EmptyStateElement {
   return renderMediaEmptyState({
     acceptTypes: opts.acceptTypes,
     maxSize: opts.maxSize,
+    sources: opts.sources,
     onFile: opts.onFile,
     onUrl: opts.onUrl,
     labels: {

package/src/tools/file/index.ts

@@ -98,6 +98,7 @@ export class FileTool implements BlockTool {
 
   public onPaste(event: PasteEvent): void {
     if (event.type === 'file') {
+      if (this.config.sources === 'url') return;
       this.startUpload((event as FilePasteEvent).detail.file);
     }
   }
@@ -346,6 +347,7 @@ export class FileTool implements BlockTool {
   private buildEmpty(): EmptyStateElement {
     return renderEmptyState({
       acceptTypes: this.config.types ?? [],
+      sources: this.config.sources,
       i18n: this.api.i18n,
       onFile: (file) => this.startUpload(file),
       onUrl: (url) => this.startUrl(url),

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

@@ -3,6 +3,7 @@ import { tr } from './i18n';
 import {
   renderMediaEmptyState,
   type MediaEmptyStateElement,
+  type MediaSource,
 } from '../../components/utils/media-empty-state';
 import type { I18nInstance } from '../../components/utils/tools';
 
@@ -13,6 +14,8 @@ export interface EmptyStateOptions {
   acceptTypes?: string[];
   /** Max file size in bytes — surfaced in the formats hint when set. */
   maxSize?: number;
+  /** Which insert sources to expose. Default `'both'`. */
+  sources?: MediaSource;
   uploadLabel?: string;
   embedLabel?: string;
   embedPlaceholder?: string;
@@ -27,6 +30,7 @@ export function renderEmptyState(opts: EmptyStateOptions): EmptyStateElement {
   return renderMediaEmptyState({
     acceptTypes: opts.acceptTypes ?? [...DEFAULT_MIME_TYPES],
     maxSize: opts.maxSize,
+    sources: opts.sources,
     onFile: opts.onFile,
     onUrl: opts.onUrl,
     labels: {

package/src/tools/image/index.ts

@@ -156,7 +156,9 @@ export class ImageTool implements BlockTool {
   }
 
   public onPaste(event: PasteEvent): void {
+    const sources = this.config.sources;
     if (event.type === 'pattern') {
+      if (sources === 'upload') return;
       const detail = (event as PatternPasteEvent).detail;
       if (this.shouldConvertGifUrl(detail.data)) {
         this.startUrl(detail.data);
@@ -166,6 +168,7 @@ export class ImageTool implements BlockTool {
       return;
     }
     if (event.type === 'tag') {
+      if (sources === 'upload') return;
       const node = (event as HTMLPasteEvent).detail.data;
       const src = node?.getAttribute?.('src') ?? '';
       if (!src) return;
@@ -173,6 +176,7 @@ export class ImageTool implements BlockTool {
       return;
     }
     if (event.type === 'file') {
+      if (sources === 'url') return;
       const detail = (event as FilePasteEvent).detail;
       this.startUpload(detail.file);
     }
@@ -687,6 +691,7 @@ export class ImageTool implements BlockTool {
       onUrl: (url) => this.startUrl(url),
       acceptTypes: this.config.types,
       maxSize: pickDisplayMaxSize(this.config.maxSize),
+      sources: this.config.sources,
       i18n: this.api.i18n,
     });
     this.emptyStateEl = el;

package/src/tools/video/empty-state.ts

@@ -3,6 +3,7 @@ import { tr } from './i18n';
 import {
   renderMediaEmptyState,
   type MediaEmptyStateElement,
+  type MediaSource,
 } from '../../components/utils/media-empty-state';
 import type { I18nInstance } from '../../components/utils/tools';
 
@@ -13,6 +14,8 @@ export interface EmptyStateOptions {
   acceptTypes?: string[];
   /** Max file size in bytes — surfaced in the formats hint when set. */
   maxSize?: number;
+  /** Which insert sources to expose. Default `'both'`. */
+  sources?: MediaSource;
   i18n?: I18nInstance;
 }
 
@@ -23,6 +26,7 @@ export function renderEmptyState(opts: EmptyStateOptions): EmptyStateElement {
   return renderMediaEmptyState({
     acceptTypes: opts.acceptTypes ?? [...DEFAULT_MIME_TYPES],
     maxSize: opts.maxSize,
+    sources: opts.sources,
     onFile: opts.onFile,
     onUrl: opts.onUrl,
     labels: {

package/src/tools/video/index.ts

@@ -112,11 +112,14 @@ export class VideoTool implements BlockTool {
   }
 
   public onPaste(event: PasteEvent): void {
+    const sources = this.config.sources;
     if (event.type === 'pattern') {
+      if (sources === 'upload') return;
       this.applyResult({ url: (event as PatternPasteEvent).detail.data });
       return;
     }
     if (event.type === 'file') {
+      if (sources === 'url') return;
       this.startUpload((event as FilePasteEvent).detail.file);
     }
   }
@@ -322,6 +325,7 @@ export class VideoTool implements BlockTool {
       onUrl: (url) => this.startUrl(url),
       acceptTypes: this.config.types,
       maxSize: pickDisplayMaxSize(this.config.maxSize),
+      sources: this.config.sources,
       i18n: this.api.i18n,
     });
     this.root.appendChild(el);

package/types/tools/audio.d.ts

@@ -1,5 +1,6 @@
 import { BlockToolData } from './block-tool-data';
 import { MaxSizeConfig } from './max-size';
+import { MediaSource } from './media-source';
 
 export type AudioAlignment = 'left' | 'center' | 'right';
 
@@ -36,5 +37,10 @@ export interface AudioConfig {
    */
   types?: string[];
   maxSize?: MaxSizeConfig;
+  /**
+   * Restrict how audio may be added. Default `'both'` (Upload + Link).
+   * Use `'upload'` for file-only or `'url'` for link-only. See {@link MediaSource}.
+   */
+  sources?: MediaSource;
   captionPlaceholder?: string;
 }

package/types/tools/file.d.ts

@@ -1,5 +1,6 @@
 import { BlockToolData } from './block-tool-data';
 import { MaxSizeConfig } from './max-size';
+import { MediaSource } from './media-source';
 
 /** Persisted data shape for the File block tool. */
 export interface FileData extends BlockToolData {
@@ -69,6 +70,11 @@ export interface FileConfig {
    * unlimited. See {@link MaxSizeConfig}.
    */
   maxSize?: MaxSizeConfig;
+  /**
+   * Restrict how a file may be added. Default `'both'` (Upload + Link).
+   * Use `'upload'` for file-only or `'url'` for link-only. See {@link MediaSource}.
+   */
+  sources?: MediaSource;
   /** Caption placeholder. */
   captionPlaceholder?: string;
 }

package/types/tools/image.d.ts

@@ -1,5 +1,6 @@
 import { BlockToolData } from './block-tool-data';
 import { MaxSizeConfig } from './max-size';
+import { MediaSource } from './media-source';
 
 /** Horizontal alignment of the image within its container. */
 export type ImageAlignment = 'left' | 'center' | 'right';
@@ -88,6 +89,11 @@ export interface ImageConfig {
    * type with `'*'` as the fallback. Default 30 MiB. See {@link MaxSizeConfig}.
    */
   maxSize?: MaxSizeConfig;
+  /**
+   * Restrict how an image may be added. Default `'both'` (Upload + Link).
+   * Use `'upload'` for file-only or `'url'` for link-only. See {@link MediaSource}.
+   */
+  sources?: MediaSource;
   /**
    * Auto-convert animated GIFs to a looping WebM video block on insert.
    * Default true. Set false to keep GIFs as image blocks.

package/types/tools/media-source.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Which insert sources a media tool (image, video, audio, file) exposes in its
+ * empty state.
+ *
+ * - `'both'` (default): offer both file Upload and Link (URL/embed) tabs.
+ * - `'upload'`: file upload only — the Link tab and URL bar are hidden.
+ * - `'url'`: link/embed only — the Upload dropzone, file picker, and
+ *   drag/paste-to-upload affordances are hidden.
+ *
+ * With a single source the tab switcher is omitted entirely.
+ */
+export type MediaSource = 'upload' | 'url' | 'both';

package/types/tools/video.d.ts

@@ -1,5 +1,6 @@
 import { BlockToolData } from './block-tool-data';
 import { MaxSizeConfig } from './max-size';
+import { MediaSource } from './media-source';
 
 /** Horizontal alignment of the video within its container. */
 export type VideoAlignment = 'left' | 'center' | 'right';
@@ -68,6 +69,11 @@ export interface VideoConfig {
    * type with `'*'` as the fallback. Default 100 MiB. See {@link MaxSizeConfig}.
    */
   maxSize?: MaxSizeConfig;
+  /**
+   * Restrict how a video may be added. Default `'both'` (Upload + Link).
+   * Use `'upload'` for file-only or `'url'` for link-only. See {@link MediaSource}.
+   */
+  sources?: MediaSource;
   /** Caption placeholder. Default "Write a caption…" */
   captionPlaceholder?: string;
   /** Ambient glow intensity behind every player. Default 'minimal'. */

package/types/tools-entry.d.ts

@@ -61,6 +61,7 @@ export { ImageData, ImageConfig, ImageUploader, ImageAlignment, ImageSize, Image
 export { FileData, FileConfig, FileUploader, FileUploadContext, FileUploadResult } from './tools/file';
 export { AudioData, AudioConfig, AudioUploader, AudioUploadContext, AudioAlignment } from './tools/audio';
 export { VideoData, VideoConfig, VideoUploader, VideoUploadContext, VideoAlignment, VideoGlow } from './tools/video';
+export { MediaSource } from './tools/media-source';
 export { ColumnListData } from './tools/column-list';
 export { ColumnData } from './tools/column';