@withwiz/block-editor 0.1.0

package/README.md

@@ -0,0 +1,219 @@
+# @withwiz/block-editor
+
+Block-based content editor for web publishing. A React component library providing a flexible, configurable block editor with 22 built-in block types, serialization, and HTML rendering.
+
+## Features
+
+- 22 built-in block types (text, images, quotes, stats, timelines, and more)
+- Drag-and-drop block reordering
+- Category-based block filtering
+- Two operation modes: serialized (HTML string) or raw (block array)
+- Image upload with resize support
+- Artist/bio editor component
+- HTML renderer for preview and server-side rendering
+- TypeScript support with full type definitions
+- CSS themes included
+
+## Installation
+
+```bash
+npm install @withwiz/block-editor
+```
+
+> **Peer dependency:** React 18 or higher is required.
+
+## Quick Start
+
+```tsx
+import { BlockEditor, BlockEditorProvider, BUILT_IN_BLOCKS } from "@withwiz/block-editor";
+import "@withwiz/block-editor/styles/editor.css";
+
+const config = {
+  blocks: BUILT_IN_BLOCKS,
+  marker: "nbe-blocks:",
+  cssPrefix: "nbe-pvb",
+};
+
+function MyEditor() {
+  const [content, setContent] = useState("");
+
+  return (
+    <BlockEditorProvider uploadFn={myUploadFn}>
+      <BlockEditor
+        config={config}
+        content={content}
+        onChange={setContent}
+      />
+    </BlockEditorProvider>
+  );
+}
+```
+
+## Built-in Block Types
+
+| Type | Label | Description |
+|------|-------|-------------|
+| `lead` | Lead paragraph | Opening paragraph summarizing key content |
+| `paragraph` | Paragraph | Body text |
+| `subheading` | Subheading | Section divider heading |
+| `subheading-label` | Subheading + Label | Subheading with a small label above |
+| `divider` | Divider | Visual separator between sections |
+| `spacer` | Spacer | Adjustable blank space |
+| `img-full` | Full-width image | Image spanning the full page width |
+| `img-inline` | Inline image | Image within body width, resizable |
+| `img-pair` | Image pair | Two images side by side |
+| `gallery` | Gallery (3) | Three square images in a row |
+| `img-text` | Person intro | Profile photo + name, role, bio |
+| `quote` | Quote | Interview or speech highlight |
+| `quote-large` | Large quote | Centered oversized pull quote |
+| `stats` | Number highlight | Key figures (e.g. 3 shows, 1,200 attendees) |
+| `infobox` | Info box | Key–value information table |
+| `callout` | Callout | Important notice for readers |
+| `numcards` | Numbered cards | Sequentially numbered guide cards (01, 02, 03…) |
+| `qa` | Q&A | Interview-style question and answer |
+| `press-list` | Press list | Media coverage list (outlet, date, title, link) |
+| `timeline` | Timeline | Chronological event sequence |
+| `video` | Video | Embedded YouTube video |
+| `cta` | CTA button | Call-to-action button |
+
+## API Reference
+
+### `<BlockEditor />`
+
+The main editor component. Operates in two modes:
+
+**Serialized mode** (recommended for database persistence):
+
+```tsx
+<BlockEditor
+  config={config}
+  content={serializedHtmlString}
+  onChange={(html) => saveToDb(html)}
+/>
+```
+
+**Raw mode** (for custom serialization):
+
+```tsx
+<BlockEditor
+  config={config}
+  blocks={blockArray}
+  onBlocksChange={(blocks) => setBlocks(blocks)}
+/>
+```
+
+**Props:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `config` | `BlockEditorConfig` | Editor configuration |
+| `content` | `string` | *(Serialized mode)* HTML+marker string |
+| `onChange` | `(html: string) => void` | *(Serialized mode)* Called on change |
+| `blocks` | `BlockData[]` | *(Raw mode)* Block array |
+| `onBlocksChange` | `(blocks: BlockData[]) => void` | *(Raw mode)* Called on change |
+| `category` | `string` | Current category (with `enableCategoryFilter`) |
+| `onImageUploaded` | `(key: string) => void` | Track uploaded image keys |
+| `onModeChange` | `(mode: "template" \| "sample") => void` | Template/sample load notification |
+
+### `<BlockRenderer />`
+
+Read-only block renderer for preview or published content.
+
+```tsx
+import { BlockRenderer } from "@withwiz/block-editor/components/BlockRenderer";
+
+<BlockRenderer blocks={blocks} config={config} />
+```
+
+### `<ArtistEditor />`
+
+Specialized editor for artist bio pages with main image and gallery.
+
+```tsx
+import { ArtistEditor } from "@withwiz/block-editor/components/ArtistEditor";
+import "@withwiz/block-editor/styles/artist.css";
+
+<ArtistEditor value={bioData} onChange={setBioData} />
+```
+
+### `<BlockEditorProvider />`
+
+Context provider for image upload and error handling.
+
+```tsx
+import { BlockEditorProvider } from "@withwiz/block-editor/context/BlockEditorProvider";
+
+<BlockEditorProvider
+  uploadFn={async (file) => ({ url: "https://...", key: "file-key" })}
+  onError={(msg) => console.error(msg)}
+>
+  {children}
+</BlockEditorProvider>
+```
+
+### `BlockEditorConfig`
+
+```ts
+interface BlockEditorConfig {
+  blocks: BlockDef[];              // Available block types
+  marker: string;                  // Serialization marker (e.g. "nbe-blocks:")
+  cssPrefix: string;               // CSS class prefix for rendered HTML
+  enableDragDrop?: boolean;        // Enable drag-and-drop (default: true)
+  enableCategoryFilter?: boolean;  // Enable category filtering (default: false)
+  categories?: string[];           // Category list
+  catClasses?: Record<string, string>;  // Category → CSS class mapping
+  templates?: Record<string, Omit<BlockData, "id">[]>;
+  samples?: Record<string, Omit<BlockData, "id">[]>;
+}
+```
+
+### Core Utilities
+
+```ts
+import { createSerializer } from "@withwiz/block-editor/core/serializer";
+import { createHtmlRenderer, h, nl2br } from "@withwiz/block-editor/core/html-renderer";
+import { resizeImageIfNeeded, validateImageFile } from "@withwiz/block-editor/core/image-resize";
+```
+
+### Hooks
+
+```ts
+import { useImageDropZone } from "@withwiz/block-editor/hooks/useImageDropZone";
+```
+
+## Styles
+
+Three CSS files are included:
+
+```ts
+import "@withwiz/block-editor/styles/editor.css";   // Editor UI styles
+import "@withwiz/block-editor/styles/preview.css";  // Published content styles
+import "@withwiz/block-editor/styles/artist.css";   // Artist editor styles
+```
+
+## Custom Block Types
+
+You can extend or replace the built-in blocks with custom `BlockDef` objects:
+
+```ts
+import { BUILT_IN_BLOCKS } from "@withwiz/block-editor";
+import type { BlockDef } from "@withwiz/block-editor/types";
+
+const customBlock: BlockDef = {
+  type: "my-block",
+  label: "My Block",
+  icon: "★",
+  desc: "A custom block type",
+  createEmpty: (id) => ({ id, type: "my-block", text: "" }),
+};
+
+const config = {
+  blocks: [...BUILT_IN_BLOCKS, customBlock],
+  marker: "nbe-blocks:",
+  cssPrefix: "nbe-pvb",
+};
+```
+
+## License
+
+MIT

package/dist/blocks/built-in.d.ts

@@ -0,0 +1,6 @@
+import type { BlockData, BlockDef } from "../types";
+/** Standalone factory for creating an empty block by type */
+export declare function createEmptyBlock(type: string, id: number): BlockData;
+export declare const BUILT_IN_BLOCKS: BlockDef[];
+/** Lookup helper: type → BlockDef */
+export declare function getBlockDef(type: string): BlockDef | undefined;

package/dist/blocks/built-in.js

@@ -0,0 +1,11 @@
+import {
+  BUILT_IN_BLOCKS,
+  createEmptyBlock,
+  getBlockDef
+} from "../chunk-EERQYNER.js";
+import "../chunk-N3ETBM74.js";
+export {
+  BUILT_IN_BLOCKS,
+  createEmptyBlock,
+  getBlockDef
+};

package/dist/chunk-3R3HAGQL.js

@@ -0,0 +1,102 @@
+// src/core/image-resize.ts
+var RESIZE_THRESHOLD = 10 * 1024 * 1024;
+var ABSOLUTE_MAX_SIZE = 50 * 1024 * 1024;
+var SKIP_RESIZE_TYPES = ["image/gif"];
+var ALLOWED_IMAGE_TYPES = ["image/jpeg", "image/png", "image/webp", "image/gif"];
+async function resizeImageIfNeeded(file) {
+  const originalSize = file.size;
+  if (file.size <= RESIZE_THRESHOLD) {
+    return { file, wasResized: false, originalSize, newSize: originalSize };
+  }
+  if (SKIP_RESIZE_TYPES.includes(file.type)) {
+    return { file, wasResized: false, originalSize, newSize: originalSize };
+  }
+  const img = await loadImage(file);
+  const { width, height } = img;
+  const outputMime = file.type === "image/png" ? "image/jpeg" : file.type || "image/jpeg";
+  const qualitySteps = [0.85, 0.75, 0.65, 0.55, 0.5];
+  for (const quality of qualitySteps) {
+    const blob = await canvasToBlob(img, width, height, outputMime, quality);
+    if (blob.size <= RESIZE_THRESHOLD) {
+      return toResult(blob, file.name, outputMime, originalSize);
+    }
+  }
+  const scaleSteps = [0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3];
+  for (const scale of scaleSteps) {
+    const newW = Math.round(width * scale);
+    const newH = Math.round(height * scale);
+    const blob = await canvasToBlob(img, newW, newH, outputMime, 0.75);
+    if (blob.size <= RESIZE_THRESHOLD) {
+      return toResult(blob, file.name, outputMime, originalSize);
+    }
+  }
+  const finalW = Math.round(width * 0.3);
+  const finalH = Math.round(height * 0.3);
+  const finalBlob = await canvasToBlob(img, finalW, finalH, outputMime, 0.5);
+  return toResult(finalBlob, file.name, outputMime, originalSize);
+}
+function validateImageFile(file) {
+  if (!ALLOWED_IMAGE_TYPES.includes(file.type)) {
+    const allowed = ALLOWED_IMAGE_TYPES.map((t) => t.split("/")[1]).join(", ");
+    return `\uC9C0\uC6D0\uD558\uC9C0 \uC54A\uB294 \uD30C\uC77C \uD615\uC2DD\uC785\uB2C8\uB2E4. (\uD5C8\uC6A9: ${allowed})`;
+  }
+  if (file.size > ABSOLUTE_MAX_SIZE) {
+    return `\uD30C\uC77C \uD06C\uAE30\uAC00 \uB108\uBB34 \uD07D\uB2C8\uB2E4. (${(file.size / 1024 / 1024).toFixed(0)}MB, \uCD5C\uB300 50MB)`;
+  }
+  if (SKIP_RESIZE_TYPES.includes(file.type) && file.size > RESIZE_THRESHOLD) {
+    return `GIF \uD30C\uC77C\uC740 10MB \uC774\uD558\uB9CC \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4. (${(file.size / 1024 / 1024).toFixed(1)}MB)`;
+  }
+  return null;
+}
+function loadImage(file) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const url = URL.createObjectURL(file);
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      resolve(img);
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("\uC774\uBBF8\uC9C0 \uB85C\uB4DC\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4."));
+    };
+    img.src = url;
+  });
+}
+function canvasToBlob(img, width, height, mime, quality) {
+  return new Promise((resolve, reject) => {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      reject(new Error("\uC774\uBBF8\uC9C0 \uCC98\uB9AC\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4."));
+      return;
+    }
+    if (mime === "image/jpeg") {
+      ctx.fillStyle = "#FFFFFF";
+      ctx.fillRect(0, 0, width, height);
+    }
+    ctx.drawImage(img, 0, 0, width, height);
+    canvas.toBlob(
+      (blob) => {
+        if (blob) resolve(blob);
+        else reject(new Error("\uC774\uBBF8\uC9C0 \uBCC0\uD658\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4."));
+      },
+      mime,
+      quality
+    );
+  });
+}
+function toResult(blob, originalName, mime, originalSize) {
+  const ext = mime === "image/jpeg" ? ".jpg" : mime === "image/webp" ? ".webp" : ".png";
+  const baseName = originalName.replace(/\.[^.]+$/, "");
+  const file = new File([blob], `${baseName}${ext}`, { type: mime });
+  return { file, wasResized: true, originalSize, newSize: blob.size };
+}
+
+export {
+  ALLOWED_IMAGE_TYPES,
+  resizeImageIfNeeded,
+  validateImageFile
+};

package/dist/chunk-62BAOSP6.js

@@ -0,0 +1,100 @@
+// src/core/html-renderer.ts
+function h(s) {
+  return (s || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function nl2br(s) {
+  return h(s).replace(/\n/g, "<br>");
+}
+function createHtmlRenderer(prefix, catClass) {
+  const p = prefix;
+  const cc = catClass || "";
+  function renderBlock(b) {
+    var _a, _b, _c, _d;
+    switch (b.type) {
+      case "lead":
+        return b.text ? `<div class="${p}-lead">${nl2br(b.text)}</div>` : "";
+      case "paragraph":
+        return b.text ? `<p class="${p}-p">${nl2br(b.text)}</p>` : "";
+      case "subheading":
+        return b.text ? `<div class="${p}-sh">${h(b.text)}</div>` : "";
+      case "subheading-label":
+        if (b.en) {
+          return `<div class="${p}-sh-en">${h(b.en)}</div>${b.text ? `<div class="${p}-sh">${h(b.text)}</div>` : ""}`;
+        }
+        return b.text ? `<div class="${p}-sh">${h(b.text)}</div>` : "";
+      case "divider":
+        return `<div class="${p}-hr"></div>`;
+      case "spacer": {
+        const sh = b.size === "small" ? 16 : b.size === "large" ? 56 : 32;
+        return `<div style="height:${sh}px"></div>`;
+      }
+      case "img-full":
+        return b.src ? `<div class="${p}-imgf"><img src="${b.src}" alt="">${b.cap ? `<div class="${p}-cap">${h(b.cap)}</div>` : ""}</div>` : "";
+      case "img-inline":
+        if (!b.src) return "";
+        {
+          const w = b.size === "small" ? "50%" : b.size === "medium" ? "70%" : "100%";
+          return `<div class="${p}-imgi" style="width:${w}"><img src="${b.src}" alt="">${b.cap ? `<div class="${p}-cap">${h(b.cap)}</div>` : ""}</div>`;
+        }
+      case "img-pair":
+        return b.src1 || b.src2 ? `<div class="${p}-pair">${b.src1 ? `<img src="${b.src1}" alt="">` : ""}${b.src2 ? `<img src="${b.src2}" alt="">` : ""}${b.cap ? `<div class="${p}-cap">${h(b.cap)}</div>` : ""}</div>` : "";
+      case "gallery":
+        return `<div class="${p}-gal">${b.src1 ? `<img src="${b.src1}" alt="">` : ""}${b.src2 ? `<img src="${b.src2}" alt="">` : ""}${b.src3 ? `<img src="${b.src3}" alt="">` : ""}${b.cap ? `<div class="${p}-cap">${h(b.cap)}</div>` : ""}</div>`;
+      case "img-text":
+        return b.src || b.name ? `<div class="${p}-prof">${b.src ? `<img src="${b.src}" alt="">` : ""}<div>${b.name ? `<div class="${p}-nm">${h(b.name)}</div>` : ""}${b.role ? `<div class="${p}-rl">${h(b.role)}</div>` : ""}${b.bio ? `<div class="${p}-bio">${nl2br(b.bio)}</div>` : ""}</div></div>` : "";
+      case "quote":
+        return b.text ? `<div class="${p}-q"><p>${nl2br(b.text)}</p>${b.attr ? `<div class="${p}-at">${h(b.attr)}</div>` : ""}</div>` : "";
+      case "quote-large":
+        return b.text ? `<div class="${p}-ql"><div class="${p}-mk">&ldquo;</div><p>${nl2br(b.text)}</p>${b.attr ? `<div class="${p}-at">${h(b.attr)}</div>` : ""}</div>` : "";
+      case "stats":
+        if (!((_a = b.items) == null ? void 0 : _a.length)) return "";
+        return `<div class="${p}-stats">${b.items.map((it) => `<div class="${p}-stat"><div class="${p}-n">${h(it.num || "\u2014")}</div><div class="${p}-l">${h(it.label || "")}</div></div>`).join("")}</div>`;
+      case "infobox": {
+        let out = `<div class="${p}-ib"><div class="${p}-lbl${cc ? ` ${cc}` : ""}">${h(b.label || "Info")}</div>`;
+        if (b.items) for (const it of b.items) {
+          if (it.k || it.v) out += `<strong>${h(it.k)}</strong> &middot; ${h(it.v)}<br>`;
+        }
+        return out + `</div>`;
+      }
+      case "callout":
+        return b.text ? `<div class="${p}-co">${b.title ? `<div class="${p}-ct">${h(b.title)}</div>` : ""}<p>${nl2br(b.text)}</p></div>` : "";
+      case "numcards":
+        if (!((_b = b.items) == null ? void 0 : _b.length)) return "";
+        return `<div class="${p}-nc">${b.items.map((it, i) => `<div class="${p}-nci"><div class="${p}-num">${String(i + 1).padStart(2, "0")}</div>${it.title ? `<h3>${h(it.title)}</h3>` : ""}${it.desc ? `<p>${h(it.desc)}</p>` : ""}</div>`).join("")}</div>`;
+      case "qa":
+        return b.q || b.a ? `<div class="${p}-qa"><div class="${p}-qai">${b.q ? `<div class="${p}-qaq">${h(b.q)}</div>` : ""}${b.a ? `<p class="${p}-qaa">${nl2br(b.a)}</p>` : ""}</div></div>` : "";
+      case "press-list":
+        if (!((_c = b.items) == null ? void 0 : _c.length)) return "";
+        {
+          let out = `<div class="${p}-pl">`;
+          for (const it of b.items) {
+            if (!it.src && !it.title) continue;
+            out += `<div class="${p}-pli"><div class="${p}-src">${h(it.src)}<span class="${p}-pd">${h(it.date)}</span></div><div><div class="${p}-ptt">${h(it.title)}</div><div class="${p}-pex">${h(it.ex)}</div>${it.link ? `<a class="${p}-plk" href="${h(it.link)}" target="_blank" rel="noopener noreferrer">\uC6D0\uBB38 \uBCF4\uAE30 &rarr;</a>` : ""}</div></div>`;
+          }
+          return out + `</div>`;
+        }
+      case "timeline":
+        if (!((_d = b.items) == null ? void 0 : _d.length)) return "";
+        return `<div class="${p}-tl">${b.items.map((it) => `<div class="${p}-tli">${it.date ? `<div class="${p}-td">${h(it.date)}</div>` : ""}${it.title ? `<div class="${p}-tt">${h(it.title)}</div>` : ""}${it.desc ? `<p>${h(it.desc)}</p>` : ""}</div>`).join("")}</div>`;
+      case "video":
+        return b.url ? `<div class="${p}-vid"><div class="${p}-vw"><iframe src="${b.url}" allowfullscreen></iframe></div>${b.cap ? `<div class="${p}-cap">${h(b.cap)}</div>` : ""}</div>` : "";
+      case "cta":
+        return b.text || b.label ? `<div class="${p}-cta${cc ? ` ${cc}` : ""}"><p>${h(b.text || "")}</p>${b.label ? `<a class="${p}-cta-btn" href="${b.url || "#"}">${h(b.label)}</a>` : ""}</div>` : "";
+      default:
+        return "";
+    }
+  }
+  function renderBlocks(blocks) {
+    return blocks.map(renderBlock).filter(Boolean).join("\n");
+  }
+  function renderBlocksWrapped(blocks) {
+    return `<div class="${p}-body">${renderBlocks(blocks)}</div>`;
+  }
+  return { renderBlock, renderBlocks, renderBlocksWrapped };
+}
+
+export {
+  h,
+  nl2br,
+  createHtmlRenderer
+};