@withwiz/block-editor 0.1.0

package/dist/components/BlockEditor.d.ts

@@ -0,0 +1,24 @@
+import type { BlockData, BlockEditorConfig } from "../types";
+interface SerializedMode {
+    /** Serialized HTML+marker string from DB */
+    content: string;
+    /** Called with HTML+marker string */
+    onChange: (html: string) => void;
+}
+interface RawMode {
+    /** Block array (for parent-managed serialization) */
+    blocks: BlockData[];
+    /** Called with updated block array */
+    onBlocksChange: (blocks: BlockData[]) => void;
+}
+type BlockEditorProps = (SerializedMode | RawMode) & {
+    config: BlockEditorConfig;
+    /** Current category (when enableCategoryFilter is true) */
+    category?: string;
+    /** Track uploaded image keys for orphan cleanup */
+    onImageUploaded?: (key: string) => void;
+    /** Template/sample load notification */
+    onModeChange?: (mode: "template" | "sample") => void;
+};
+export declare function BlockEditor(props: BlockEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/BlockEditor.js

@@ -0,0 +1,16 @@
+"use client";
+import {
+  BlockEditor
+} from "../chunk-CLC3FEL2.js";
+import "../chunk-EERQYNER.js";
+import "../chunk-62BAOSP6.js";
+import "../chunk-PPVXNJWI.js";
+import "../chunk-CJGZUEQO.js";
+import "../chunk-G6J2DCC5.js";
+import "../chunk-QR225IXX.js";
+import "../chunk-3R3HAGQL.js";
+import "../chunk-CYMYM7LP.js";
+import "../chunk-N3ETBM74.js";
+export {
+  BlockEditor
+};

package/dist/components/BlockRenderer.d.ts

@@ -0,0 +1,10 @@
+import type { BlockData } from "../types";
+interface BlockRendererProps {
+    block: BlockData;
+    updateBlock: (id: number, field: string, value: string) => void;
+    addSubItem: (id: number, type: string) => void;
+    removeSubItem: (id: number, idx: number) => void;
+    onImageUploaded?: (key: string) => void;
+}
+export declare function BlockRenderer({ block, updateBlock, addSubItem, removeSubItem, onImageUploaded }: BlockRendererProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/BlockRenderer.js

@@ -0,0 +1,12 @@
+"use client";
+import {
+  BlockRenderer
+} from "../chunk-CJGZUEQO.js";
+import "../chunk-G6J2DCC5.js";
+import "../chunk-QR225IXX.js";
+import "../chunk-3R3HAGQL.js";
+import "../chunk-CYMYM7LP.js";
+import "../chunk-N3ETBM74.js";
+export {
+  BlockRenderer
+};

package/dist/components/ImageUploadField.d.ts

@@ -0,0 +1,11 @@
+interface ImageUploadFieldProps {
+    blockId: number;
+    field: string;
+    src: string;
+    className?: string;
+    onUploadComplete: (blockId: number, field: string, url: string) => void;
+    onKeyTracked?: (key: string) => void;
+    onClear: (blockId: number, field: string) => void;
+}
+export declare function ImageUploadField({ blockId, field, src, className, onUploadComplete, onKeyTracked, onClear, }: ImageUploadFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ImageUploadField.js

@@ -0,0 +1,11 @@
+"use client";
+import {
+  ImageUploadField
+} from "../chunk-G6J2DCC5.js";
+import "../chunk-QR225IXX.js";
+import "../chunk-3R3HAGQL.js";
+import "../chunk-CYMYM7LP.js";
+import "../chunk-N3ETBM74.js";
+export {
+  ImageUploadField
+};

package/dist/context/BlockEditorProvider.d.ts

@@ -0,0 +1,21 @@
+import type { UploadFn, ErrorFn } from "../types";
+interface BlockEditorContextValue {
+    uploadImage: UploadFn;
+    onError: ErrorFn;
+    autoResize: boolean;
+    maxSizeMB: number;
+}
+interface BlockEditorProviderProps {
+    /** Upload function — project-specific (e.g. adminFetch → /api/upload) */
+    uploadImage: UploadFn;
+    /** Error handler — project-specific (e.g. toast.error) */
+    onError?: ErrorFn;
+    /** Auto-resize images over maxSizeMB (default: true) */
+    autoResize?: boolean;
+    /** Max image size in MB before auto-resize (default: 10) */
+    maxSizeMB?: number;
+    children: React.ReactNode;
+}
+export declare function BlockEditorProvider({ uploadImage, onError, autoResize, maxSizeMB, children, }: BlockEditorProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useBlockEditorContext(): BlockEditorContextValue;
+export {};

package/dist/context/BlockEditorProvider.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  BlockEditorProvider,
+  useBlockEditorContext
+} from "../chunk-CYMYM7LP.js";
+import "../chunk-N3ETBM74.js";
+export {
+  BlockEditorProvider,
+  useBlockEditorContext
+};

package/dist/core/html-renderer.d.ts

@@ -0,0 +1,13 @@
+import type { BlockData } from "../types";
+export declare function h(s: string): string;
+export declare function nl2br(s: string): string;
+/**
+ * Creates an HTML renderer with the given CSS class prefix.
+ * @param prefix - CSS class prefix (e.g. "nbe-pvb", "rm-bk")
+ * @param catClass - optional category CSS class for themed blocks (e.g. "onstage")
+ */
+export declare function createHtmlRenderer(prefix: string, catClass?: string): {
+    renderBlock: (b: BlockData) => string;
+    renderBlocks: (blocks: BlockData[]) => string;
+    renderBlocksWrapped: (blocks: BlockData[]) => string;
+};

package/dist/core/html-renderer.js

@@ -0,0 +1,11 @@
+import {
+  createHtmlRenderer,
+  h,
+  nl2br
+} from "../chunk-62BAOSP6.js";
+import "../chunk-N3ETBM74.js";
+export {
+  createHtmlRenderer,
+  h,
+  nl2br
+};

package/dist/core/image-resize.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Client-side image resizing utility using Canvas API.
+ * Automatically resizes images over the threshold while preserving aspect ratio.
+ */
+import type { ResizeResult } from "../types";
+export declare const ALLOWED_IMAGE_TYPES: string[];
+/**
+ * Resizes images over 10MB using Canvas API.
+ * Preserves aspect ratio with a two-stage strategy:
+ * - Stage 1: Quality adjustment only
+ * - Stage 2: Dimension reduction + quality
+ *
+ * GIF images are returned as-is (animation loss prevention).
+ */
+export declare function resizeImageIfNeeded(file: File): Promise<ResizeResult>;
+/** Validate image file type and size */
+export declare function validateImageFile(file: File): string | null;

package/dist/core/image-resize.js

@@ -0,0 +1,11 @@
+import {
+  ALLOWED_IMAGE_TYPES,
+  resizeImageIfNeeded,
+  validateImageFile
+} from "../chunk-3R3HAGQL.js";
+import "../chunk-N3ETBM74.js";
+export {
+  ALLOWED_IMAGE_TYPES,
+  resizeImageIfNeeded,
+  validateImageFile
+};

package/dist/core/serializer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Generic serializer factory.
+ * Creates serialize/deserialize functions for a given marker string.
+ * Data is stored as base64-encoded JSON inside HTML comments: <!-- {marker}{base64} -->
+ */
+export declare function createSerializer<T = unknown>(marker: string): {
+    serialize: (data: T) => string;
+    deserialize: (html: string) => T | null;
+};

package/dist/core/serializer.js

@@ -0,0 +1,7 @@
+import {
+  createSerializer
+} from "../chunk-PPVXNJWI.js";
+import "../chunk-N3ETBM74.js";
+export {
+  createSerializer
+};

package/dist/hooks/useImageDropZone.d.ts

@@ -0,0 +1,23 @@
+import { type DragEvent } from "react";
+import type { UploadResult } from "../types";
+interface UseImageDropZoneOptions {
+    multiple?: boolean;
+    maxFiles?: number;
+    onUpload: (result: UploadResult) => void;
+    onKeyTracked?: (key: string) => void;
+    disabled?: boolean;
+}
+export declare function useImageDropZone(options: UseImageDropZoneOptions): {
+    isDragOver: boolean;
+    isUploading: boolean;
+    isResizing: boolean;
+    error: string | null;
+    dragHandlers: {
+        onDragEnter: (e: DragEvent) => void;
+        onDragOver: (e: DragEvent) => void;
+        onDragLeave: (e: DragEvent) => void;
+        onDrop: (e: DragEvent) => void;
+    };
+    handleFileInput: (fileList: FileList | null) => Promise<void>;
+};
+export {};

package/dist/hooks/useImageDropZone.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  useImageDropZone
+} from "../chunk-QR225IXX.js";
+import "../chunk-3R3HAGQL.js";
+import "../chunk-CYMYM7LP.js";
+import "../chunk-N3ETBM74.js";
+export {
+  useImageDropZone
+};

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export type { BlockData, BlockDef, BlockEditorConfig, UploadResult, UploadFn, ErrorFn, ResizeResult, ArtistBioData, } from "./types";
+export { createSerializer } from "./core/serializer";
+export { createHtmlRenderer, h, nl2br } from "./core/html-renderer";
+export { resizeImageIfNeeded, validateImageFile, ALLOWED_IMAGE_TYPES } from "./core/image-resize";
+export { BUILT_IN_BLOCKS, createEmptyBlock, getBlockDef } from "./blocks/built-in";
+export { BlockEditorProvider, useBlockEditorContext } from "./context/BlockEditorProvider";
+export { BlockEditor } from "./components/BlockEditor";
+export { BlockRenderer } from "./components/BlockRenderer";
+export { ImageUploadField } from "./components/ImageUploadField";
+export { ArtistEditor } from "./components/ArtistEditor";
+export { useImageDropZone } from "./hooks/useImageDropZone";

package/dist/index.js

@@ -0,0 +1,57 @@
+import {
+  ArtistEditor
+} from "./chunk-VIJV6FLT.js";
+import {
+  BlockEditor
+} from "./chunk-CLC3FEL2.js";
+import {
+  BUILT_IN_BLOCKS,
+  createEmptyBlock,
+  getBlockDef
+} from "./chunk-EERQYNER.js";
+import {
+  createHtmlRenderer,
+  h,
+  nl2br
+} from "./chunk-62BAOSP6.js";
+import {
+  createSerializer
+} from "./chunk-PPVXNJWI.js";
+import {
+  BlockRenderer
+} from "./chunk-CJGZUEQO.js";
+import {
+  ImageUploadField
+} from "./chunk-G6J2DCC5.js";
+import {
+  useImageDropZone
+} from "./chunk-QR225IXX.js";
+import {
+  ALLOWED_IMAGE_TYPES,
+  resizeImageIfNeeded,
+  validateImageFile
+} from "./chunk-3R3HAGQL.js";
+import {
+  BlockEditorProvider,
+  useBlockEditorContext
+} from "./chunk-CYMYM7LP.js";
+import "./chunk-N3ETBM74.js";
+export {
+  ALLOWED_IMAGE_TYPES,
+  ArtistEditor,
+  BUILT_IN_BLOCKS,
+  BlockEditor,
+  BlockEditorProvider,
+  BlockRenderer,
+  ImageUploadField,
+  createEmptyBlock,
+  createHtmlRenderer,
+  createSerializer,
+  getBlockDef,
+  h,
+  nl2br,
+  resizeImageIfNeeded,
+  useBlockEditorContext,
+  useImageDropZone,
+  validateImageFile
+};

package/dist/types.d.ts

@@ -0,0 +1,67 @@
+export interface BlockData {
+    id: number;
+    type: string;
+    text?: string;
+    en?: string;
+    src?: string;
+    src1?: string;
+    src2?: string;
+    src3?: string;
+    cap?: string;
+    attr?: string;
+    name?: string;
+    role?: string;
+    bio?: string;
+    title?: string;
+    url?: string;
+    label?: string;
+    q?: string;
+    a?: string;
+    size?: string;
+    items?: Record<string, string>[];
+}
+export interface BlockDef {
+    type: string;
+    label: string;
+    icon: string;
+    desc?: string;
+    cats?: string[];
+    createEmpty: (id: number) => BlockData;
+}
+export interface UploadResult {
+    url: string;
+    key?: string;
+}
+export type UploadFn = (file: File) => Promise<UploadResult>;
+export type ErrorFn = (message: string) => void;
+export interface ResizeResult {
+    file: File;
+    wasResized: boolean;
+    originalSize: number;
+    newSize: number;
+}
+export interface BlockEditorConfig {
+    /** Available block definitions */
+    blocks: BlockDef[];
+    /** Serialization marker name (e.g. "nbe-blocks:") */
+    marker: string;
+    /** CSS class prefix for rendered HTML (e.g. "nbe-pvb") */
+    cssPrefix: string;
+    /** Enable drag-and-drop reordering (default: true) */
+    enableDragDrop?: boolean;
+    /** Enable category-based block filtering (default: false) */
+    enableCategoryFilter?: boolean;
+    /** Category list (required when enableCategoryFilter is true) */
+    categories?: string[];
+    /** Category → CSS class mapping for themed blocks */
+    catClasses?: Record<string, string>;
+    /** Category-keyed empty templates */
+    templates?: Record<string, Omit<BlockData, "id">[]>;
+    /** Category-keyed sample content */
+    samples?: Record<string, Omit<BlockData, "id">[]>;
+}
+export interface ArtistBioData {
+    text: string;
+    mainImage: string;
+    gallery: string[];
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@withwiz/block-editor",
+  "version": "0.1.0",
+  "description": "Block-based content editor for web publishing",
+  "private": false,
+  "files": ["dist", "styles"],
+  "typesVersions": {
+    "*": {
+      "*": ["./dist/*"]
+    }
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./types": "./dist/types.js",
+    "./blocks/built-in": "./dist/blocks/built-in.js",
+    "./components/BlockEditor": "./dist/components/BlockEditor.js",
+    "./components/BlockRenderer": "./dist/components/BlockRenderer.js",
+    "./components/ImageUploadField": "./dist/components/ImageUploadField.js",
+    "./components/ArtistEditor": "./dist/components/ArtistEditor.js",
+    "./context/BlockEditorProvider": "./dist/context/BlockEditorProvider.js",
+    "./core/serializer": "./dist/core/serializer.js",
+    "./core/html-renderer": "./dist/core/html-renderer.js",
+    "./core/image-resize": "./dist/core/image-resize.js",
+    "./hooks/useImageDropZone": "./dist/hooks/useImageDropZone.js",
+    "./styles/editor.css": "./styles/editor.css",
+    "./styles/preview.css": "./styles/preview.css",
+    "./styles/artist.css": "./styles/artist.css"
+  },
+  "scripts": {
+    "build": "tsup && tsc --emitDeclarationOnly --skipLibCheck",
+    "build:js": "tsup",
+    "build:types": "tsc --emitDeclarationOnly --skipLibCheck"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
+    "tsup": "^8.0.0",
+    "typescript": "^5"
+  }
+}