koguma 0.6.6 → 2.0.0

package/src/media/index.ts

@@ -1,5 +1,8 @@
 /**
  * Media handlers — upload to and serve from R2.
+ *
+ * Asset metadata is stored as a JSON blob in the `assets` table:
+ *   { title, url, content_type, width, height, file_size }
  */
 import type { Context } from 'hono';
 
@@ -56,6 +59,30 @@ function buildKey(id: string, fileName: string): string {
   return `${id}${ext ? '.' + ext : ''}`;
 }
 
+// ── Asset data helpers ──────────────────────────────────────────────────────
+
+interface AssetData {
+  title: string;
+  url: string;
+  content_type: string;
+  width: number | null;
+  height: number | null;
+  file_size: number | null;
+}
+
+/** Parse the JSON `data` column from an assets row. */
+function parseAssetData(
+  row: Record<string, unknown>
+): AssetData & { id: string; created_at: unknown; updated_at: unknown } {
+  const data = typeof row.data === 'string' ? JSON.parse(row.data) : row.data;
+  return {
+    id: row.id as string,
+    created_at: row.created_at,
+    updated_at: row.updated_at,
+    ...data
+  };
+}
+
 // ── Handlers ────────────────────────────────────────────────────────────────
 
 /** Serve a media file from R2 */
@@ -75,7 +102,7 @@ export async function serveMedia(c: Context): Promise<Response> {
   });
 }
 
-/** Upload a media file to R2 + register in _assets table */
+/** Upload a media file to R2 + register in assets table */
 export async function uploadMedia(c: Context): Promise<Response> {
   const media = (c.env as Record<string, R2Bucket>).MEDIA;
   const db = (c.env as Record<string, D1Database>).DB;
@@ -89,21 +116,21 @@ export async function uploadMedia(c: Context): Promise<Response> {
   const { width, height } = await processAndUploadFile(media, file, key);
 
   const url = `/api/media/${key}`;
+  const assetData: AssetData = {
+    title: title || file.name,
+    url,
+    content_type: file.type,
+    width,
+    height,
+    file_size: file.size
+  };
+
   await db
-    .prepare(
-      `INSERT INTO _assets (id, title, url, content_type, file_size, width, height) VALUES (?, ?, ?, ?, ?, ?, ?)`
-    )
-    .bind(id, title || file.name, url, file.type, file.size, width, height)
+    .prepare('INSERT INTO assets (id, data) VALUES (?, ?)')
+    .bind(id, JSON.stringify(assetData))
     .run();
 
-  return c.json({
-    id,
-    url,
-    title: title || file.name,
-    contentType: file.type,
-    width,
-    height
-  });
+  return c.json({ id, ...assetData });
 }
 
 /** List all media assets (lazy-backfills file_size from R2 when null) */
@@ -111,25 +138,37 @@ export async function listMedia(c: Context): Promise<Response> {
   const db = (c.env as Record<string, D1Database>).DB;
   const media = (c.env as Record<string, R2Bucket>).MEDIA;
   const result = await db
-    .prepare('SELECT * FROM _assets ORDER BY created_at DESC')
+    .prepare('SELECT * FROM assets ORDER BY created_at DESC')
     .all();
 
-  const assets = (result.results ?? []) as Record<string, unknown>[];
+  const rows = (result.results ?? []) as Record<string, unknown>[];
+  const assets = rows.map(parseAssetData);
 
   // Lazy backfill: look up file_size from R2 for any assets missing it
   const needsBackfill = assets.filter(a => a.file_size == null && a.url);
   if (needsBackfill.length > 0) {
     const backfillPromise = Promise.all(
       needsBackfill.map(async asset => {
-        const key = (asset.url as string).replace('/api/media/', '');
+        const key = asset.url.replace('/api/media/', '');
         try {
           const head = await media.head(key);
           if (head) {
             asset.file_size = head.size;
-            await db
-              .prepare('UPDATE _assets SET file_size = ? WHERE id = ?')
-              .bind(head.size, asset.id)
-              .run();
+            // Update the JSON blob in DB
+            const row = rows.find(r => r.id === asset.id);
+            if (row) {
+              const data =
+                typeof row.data === 'string'
+                  ? JSON.parse(row.data as string)
+                  : row.data;
+              data.file_size = head.size;
+              await db
+                .prepare(
+                  "UPDATE assets SET data = ?, updated_at = datetime('now') WHERE id = ?"
+                )
+                .bind(JSON.stringify(data), asset.id)
+                .run();
+            }
           }
         } catch {
           // R2 lookup failed — skip, will retry on next list
@@ -153,30 +192,43 @@ export async function renameMedia(c: Context): Promise<Response> {
     return c.json({ error: 'title is required' }, 400);
   }
 
-  const result = await db
-    .prepare('UPDATE _assets SET title = ? WHERE id = ?')
-    .bind(title.trim(), id)
+  const row = await db
+    .prepare('SELECT * FROM assets WHERE id = ?')
+    .bind(id)
+    .first();
+  if (!row) return c.notFound();
+
+  const data =
+    typeof row.data === 'string' ? JSON.parse(row.data as string) : row.data;
+  data.title = title.trim();
+
+  await db
+    .prepare(
+      "UPDATE assets SET data = ?, updated_at = datetime('now') WHERE id = ?"
+    )
+    .bind(JSON.stringify(data), id)
     .run();
 
-  if (!result.meta.changes) return c.notFound();
   return c.json({ ok: true, id, title: title.trim() });
 }
 
-/** Delete a media asset from R2 and _assets table */
+/** Delete a media asset from R2 and assets table */
 export async function deleteMedia(c: Context): Promise<Response> {
   const media = (c.env as Record<string, R2Bucket>).MEDIA;
   const db = (c.env as Record<string, D1Database>).DB;
   const id = c.req.param('id');
 
-  const asset = await db
-    .prepare('SELECT * FROM _assets WHERE id = ?')
+  const row = await db
+    .prepare('SELECT * FROM assets WHERE id = ?')
     .bind(id)
     .first();
-  if (!asset) return c.notFound();
+  if (!row) return c.notFound();
 
-  const key = (asset.url as string).replace('/api/media/', '');
+  const data =
+    typeof row.data === 'string' ? JSON.parse(row.data as string) : row.data;
+  const key = (data.url as string).replace('/api/media/', '');
   await media.delete(key);
-  await db.prepare('DELETE FROM _assets WHERE id = ?').bind(id).run();
+  await db.prepare('DELETE FROM assets WHERE id = ?').bind(id).run();
 
   return c.json({ ok: true });
 }
@@ -185,12 +237,12 @@ export async function deleteMedia(c: Context): Promise<Response> {
 export async function getMedia(c: Context): Promise<Response> {
   const db = (c.env as Record<string, D1Database>).DB;
   const id = c.req.param('id');
-  const asset = await db
-    .prepare('SELECT * FROM _assets WHERE id = ?')
+  const row = await db
+    .prepare('SELECT * FROM assets WHERE id = ?')
     .bind(id)
     .first();
-  if (!asset) return c.notFound();
-  return c.json(asset);
+  if (!row) return c.notFound();
+  return c.json(parseAssetData(row));
 }
 
 /** Replace an existing asset's file (keeps the same DB row ID) */
@@ -200,7 +252,7 @@ export async function replaceMedia(c: Context): Promise<Response> {
   const id = c.req.param('id');
 
   const existing = await db
-    .prepare('SELECT * FROM _assets WHERE id = ?')
+    .prepare('SELECT * FROM assets WHERE id = ?')
     .bind(id)
     .first();
   if (!existing) return c.notFound();
@@ -209,8 +261,13 @@ export async function replaceMedia(c: Context): Promise<Response> {
   if ('error' in parsed) return c.json({ error: parsed.error }, parsed.status);
   const { file } = parsed;
 
+  const data =
+    typeof existing.data === 'string'
+      ? JSON.parse(existing.data as string)
+      : existing.data;
+
   // Delete old R2 object
-  const oldKey = (existing.url as string).replace('/api/media/', '');
+  const oldKey = (data.url as string).replace('/api/media/', '');
   await media.delete(oldKey);
 
   // Upload new file
@@ -218,7 +275,7 @@ export async function replaceMedia(c: Context): Promise<Response> {
   const { width, height } = await processAndUploadFile(media, file, newKey);
 
   // Update title extension if the file type changed (e.g., photo.jpg → photo.webp)
-  const oldTitle = existing.title as string;
+  const oldTitle = data.title as string;
   const newExt = file.name.split('.').pop();
   const updatedTitle =
     newExt && /\.\w+$/.test(oldTitle)
@@ -226,20 +283,21 @@ export async function replaceMedia(c: Context): Promise<Response> {
       : oldTitle;
 
   const newUrl = `/api/media/${newKey}`;
-  await db
-    .prepare(
-      `UPDATE _assets SET title = ?, url = ?, content_type = ?, file_size = ?, width = ?, height = ?, updated_at = datetime('now') WHERE id = ?`
-    )
-    .bind(updatedTitle, newUrl, file.type, file.size, width, height, id)
-    .run();
-
-  return c.json({
-    id,
+  const updatedData: AssetData = {
     title: updatedTitle,
     url: newUrl,
     content_type: file.type,
     file_size: file.size,
     width,
     height
-  });
+  };
+
+  await db
+    .prepare(
+      "UPDATE assets SET data = ?, updated_at = datetime('now') WHERE id = ?"
+    )
+    .bind(JSON.stringify(updatedData), id)
+    .run();
+
+  return c.json({ id, ...updatedData });
 }

package/src/react/Markdown.test.tsx

@@ -0,0 +1,195 @@
+/**
+ * Markdown.test.tsx — component rendering tests
+ *
+ * Tests the <Markdown> component using @testing-library/react.
+ * Environment: happy-dom (configured in bunfig.toml)
+ */
+import { describe, test, expect, afterEach } from 'bun:test';
+import { cleanup, render, screen } from '@testing-library/react';
+import { Markdown } from './Markdown.tsx';
+
+afterEach(() => cleanup());
+
+// ── null / empty ──────────────────────────────────────────────────────
+
+describe('<Markdown> — null/empty', () => {
+  test('renders nothing for null', () => {
+    const { container } = render(<Markdown content={null} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  test('renders nothing for undefined', () => {
+    const { container } = render(<Markdown content={undefined} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  test('renders nothing for empty string', () => {
+    const { container } = render(<Markdown content='' />);
+    expect(container.firstChild).toBeNull();
+  });
+});
+
+// ── Wrapper ───────────────────────────────────────────────────────────
+
+describe('<Markdown> — className', () => {
+  test('applies className to wrapper div', () => {
+    const { container } = render(
+      <Markdown content='Hello' className='prose' />
+    );
+    expect(container.querySelector('.prose')).not.toBeNull();
+  });
+});
+
+// ── Headings ──────────────────────────────────────────────────────────
+
+describe('<Markdown> — headings', () => {
+  test('# renders <h1>', () => {
+    const { container } = render(<Markdown content='# Hello' />);
+    expect(container.querySelector('h1')).not.toBeNull();
+    expect(container.querySelector('h1')?.textContent).toBe('Hello');
+  });
+
+  test('## renders <h2>', () => {
+    const { container } = render(<Markdown content='## Sub' />);
+    expect(container.querySelector('h2')).not.toBeNull();
+  });
+});
+
+// ── Text formatting ───────────────────────────────────────────────────
+
+describe('<Markdown> — text formatting', () => {
+  test('**bold** renders <strong>', () => {
+    const { container } = render(<Markdown content='**bold**' />);
+    expect(container.querySelector('strong')).not.toBeNull();
+  });
+
+  test('*italic* renders <em>', () => {
+    const { container } = render(<Markdown content='*italic*' />);
+    expect(container.querySelector('em')).not.toBeNull();
+  });
+
+  test('`code` renders <code>', () => {
+    const { container } = render(<Markdown content='`code`' />);
+    expect(container.querySelector('code')).not.toBeNull();
+  });
+
+  test('~~strikethrough~~ renders <del> (GFM)', () => {
+    const { container } = render(<Markdown content='~~strike~~' />);
+    expect(container.querySelector('del')).not.toBeNull();
+  });
+});
+
+// ── Links ─────────────────────────────────────────────────────────────
+
+describe('<Markdown> — links', () => {
+  test('[text](url) renders <a>', () => {
+    const { container } = render(
+      <Markdown content='[Example](https://example.com)' />
+    );
+    const link = container.querySelector('a');
+    expect(link?.getAttribute('href')).toBe('https://example.com');
+    expect(link?.textContent).toBe('Example');
+  });
+});
+
+// ── Lists ─────────────────────────────────────────────────────────────
+
+describe('<Markdown> — lists', () => {
+  test('- item renders <ul><li>', () => {
+    const { container } = render(
+      <Markdown content={`- Item one\n- Item two`} />
+    );
+    expect(container.querySelector('ul')).not.toBeNull();
+    expect(container.querySelectorAll('li').length).toBe(2);
+  });
+
+  test('1. item renders <ol><li>', () => {
+    const { container } = render(<Markdown content={`1. First\n2. Second`} />);
+    expect(container.querySelector('ol')).not.toBeNull();
+  });
+
+  test('task list renders checkboxes (GFM)', () => {
+    const { container } = render(
+      <Markdown content={`- [x] Done\n- [ ] Todo`} />
+    );
+    const checkboxes = container.querySelectorAll('input[type="checkbox"]');
+    expect(checkboxes.length).toBe(2);
+  });
+});
+
+// ── Blockquote ────────────────────────────────────────────────────────
+
+describe('<Markdown> — blockquote', () => {
+  test('> renders blockquote', () => {
+    const { container } = render(<Markdown content='> A wise quote' />);
+    expect(container.querySelector('blockquote')).not.toBeNull();
+  });
+});
+
+// ── Code block ────────────────────────────────────────────────────────
+
+describe('<Markdown> — code block', () => {
+  test('fenced code renders <pre><code>', () => {
+    const { container } = render(
+      <Markdown content={'```ts\nconst x = 1\n```'} />
+    );
+    expect(container.querySelector('pre')).not.toBeNull();
+    expect(container.querySelector('code')).not.toBeNull();
+    expect(container.querySelector('code')?.textContent).toContain(
+      'const x = 1'
+    );
+  });
+});
+
+// ── Image ─────────────────────────────────────────────────────────────
+
+describe('<Markdown> — image', () => {
+  test('![alt](url) renders <img>', () => {
+    const { container } = render(
+      <Markdown content='![A cat](https://example.com/cat.jpg)' />
+    );
+    const img = container.querySelector('img');
+    expect(img?.getAttribute('src')).toBe('https://example.com/cat.jpg');
+    expect(img?.getAttribute('alt')).toBe('A cat');
+  });
+});
+
+// ── HR ────────────────────────────────────────────────────────────────
+
+describe('<Markdown> — hr', () => {
+  test('--- renders <hr>', () => {
+    const { container } = render(
+      <Markdown content={`Above\n\n---\n\nBelow`} />
+    );
+    expect(container.querySelector('hr')).not.toBeNull();
+  });
+});
+
+// ── Table (GFM) ──────────────────────────────────────────────────────
+
+describe('<Markdown> — table (GFM)', () => {
+  test('pipe table renders <table>', () => {
+    const md = '| Name | Age |\n| --- | --- |\n| Alice | 30 |';
+    const { container } = render(<Markdown content={md} />);
+    expect(container.querySelector('table')).not.toBeNull();
+    expect(container.querySelector('th')?.textContent).toBe('Name');
+    expect(container.querySelector('td')?.textContent).toBe('Alice');
+  });
+});
+
+// ── Component overrides ──────────────────────────────────────────────
+
+describe('<Markdown> — component overrides', () => {
+  test('custom heading component renders', () => {
+    render(
+      <Markdown
+        content='# Custom'
+        components={{
+          h1: ({ children }) => <h1 data-testid='custom-h1'>{children}</h1>
+        }}
+      />
+    );
+    expect(screen.getByTestId('custom-h1')).not.toBeNull();
+    expect(screen.getByTestId('custom-h1').textContent).toBe('Custom');
+  });
+});

package/src/react/Markdown.tsx

@@ -0,0 +1,40 @@
+/**
+ * <Markdown> — renders a markdown string as semantic HTML using React components.
+ *
+ * Simple usage:
+ *   <Markdown content={data.body} className="prose" />
+ *
+ * Advanced usage with element overrides:
+ *   <Markdown content={data.body} components={{ h1: ({children}) => <h1 className="text-4xl">{children}</h1> }} />
+ *
+ * GFM (tables, strikethrough, task lists, autolinks) is enabled by default
+ * to match the Milkdown editor's output.
+ */
+import type { ReactNode } from 'react';
+import ReactMarkdown from 'react-markdown';
+import type { Components } from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+export interface MarkdownProps {
+  content: string | null | undefined;
+  /** Applied to the wrapper div */
+  className?: string;
+  /** Per-element component overrides — uses react-markdown's Components type */
+  components?: Components;
+}
+
+export function Markdown({
+  content,
+  className,
+  components
+}: MarkdownProps): ReactNode {
+  if (!content) return null;
+
+  return (
+    <div className={className}>
+      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/src/react/index.ts

@@ -4,31 +4,15 @@
  * Hooks:
  *   import { useEntry, useEntries } from "koguma/react";
  *
- * Rich text renderer:
- *   import { RichText } from "koguma/react";
+ * Markdown renderer:
+ *   import { Markdown } from "koguma/react";
  */
 
 // Data fetching hooks
 export { useEntry, useEntries } from './hooks.ts';
 export type { UseEntryResult, UseEntriesResult } from './hooks.ts';
 
-// Rich text renderer
-export { RichText } from './RichText.tsx';
-export type { RichTextProps } from './RichText.tsx';
-export type {
-  RichTextComponents,
-  ParagraphProps,
-  HeadingProps,
-  ListProps,
-  ListItemProps,
-  QuoteProps,
-  CodeBlockProps,
-  ImageBlockProps,
-  HrProps,
-  TableProps,
-  LayoutProps,
-  CustomBlockProps,
-  LinkProps,
-  InlineImageProps,
-  CustomInlineProps
-} from './types.ts';
+// Markdown renderer
+export { Markdown } from './Markdown.tsx';
+export type { MarkdownProps } from './Markdown.tsx';
+export type { MarkdownComponents } from './types.ts';

package/src/react/types.ts

@@ -1,114 +1,5 @@
 /**
- * RichTextComponents — per-element override types for <RichText>.
- *
- * All overrides are optional. Provide only the elements you need to customize.
- * The default renderer produces unstyled semantic HTML for all node types.
+ * Re-export react-markdown's Components type for convenience.
+ * Users can import this from 'koguma/react' to type their component overrides.
  */
-import type {
-  KogumaBlockNode,
-  KogumaInlineNode,
-  KogumaListItem,
-  KogumaTableRow
-} from '../config/types.ts';
-import type { ReactNode } from 'react';
-
-// ── Block component props ────────────────────────────────────────────
-
-export interface ParagraphProps {
-  node: Extract<KogumaBlockNode, { type: 'paragraph' }>;
-  children: ReactNode;
-}
-
-export interface HeadingProps {
-  node: Extract<KogumaBlockNode, { type: 'heading' }>;
-  children: ReactNode;
-}
-
-export interface ListProps {
-  node: Extract<KogumaBlockNode, { type: 'list' }>;
-  /** Rendered list items */
-  children: ReactNode;
-}
-
-export interface ListItemProps {
-  item: KogumaListItem;
-  /** Rendered inline content of this item */
-  children: ReactNode;
-  /** Pre-rendered nested list, if any — render it inside your <li> */
-  nestedList: ReactNode | null;
-}
-
-export interface QuoteProps {
-  node: Extract<KogumaBlockNode, { type: 'quote' }>;
-  children: ReactNode;
-}
-
-export interface CodeBlockProps {
-  node: Extract<KogumaBlockNode, { type: 'code' }>;
-}
-
-export interface ImageBlockProps {
-  node: Extract<KogumaBlockNode, { type: 'image' }>;
-}
-
-export interface HrProps {
-  node: Extract<KogumaBlockNode, { type: 'hr' }>;
-}
-
-export interface TableProps {
-  node: Extract<KogumaBlockNode, { type: 'table' }>;
-  rows: KogumaTableRow[];
-}
-
-export interface LayoutProps {
-  node: Extract<KogumaBlockNode, { type: 'layout' }>;
-  /** Pre-rendered columns — render each as a column container */
-  columns: ReactNode[];
-}
-
-export interface CustomBlockProps {
-  node: Extract<KogumaBlockNode, { type: 'custom' }>;
-  name: string;
-  data: Record<string, unknown>;
-}
-
-// ── Inline component props ───────────────────────────────────────────
-
-export interface LinkProps {
-  node: Extract<KogumaInlineNode, { type: 'link' }>;
-  children: ReactNode;
-}
-
-export interface InlineImageProps {
-  node: Extract<KogumaInlineNode, { type: 'inline-image' }>;
-}
-
-export interface CustomInlineProps {
-  node: Extract<KogumaInlineNode, { type: 'custom' }>;
-  name: string;
-  data: Record<string, unknown>;
-}
-
-// ── Component override map ───────────────────────────────────────────
-
-export interface RichTextComponents {
-  // Block overrides
-  paragraph?: (props: ParagraphProps) => ReactNode;
-  heading?: (props: HeadingProps) => ReactNode;
-  list?: (props: ListProps) => ReactNode;
-  listItem?: (props: ListItemProps) => ReactNode;
-  quote?: (props: QuoteProps) => ReactNode;
-  code?: (props: CodeBlockProps) => ReactNode;
-  image?: (props: ImageBlockProps) => ReactNode;
-  hr?: (props: HrProps) => ReactNode;
-  table?: (props: TableProps) => ReactNode;
-  layout?: (props: LayoutProps) => ReactNode;
-  // Catches any block-level custom node (tweet, youtube, etc.)
-  customBlock?: (props: CustomBlockProps) => ReactNode;
-
-  // Inline overrides
-  link?: (props: LinkProps) => ReactNode;
-  inlineImage?: (props: InlineImageProps) => ReactNode;
-  // Catches any inline custom node (hashtag, mention, etc.)
-  customInline?: (props: CustomInlineProps) => ReactNode;
-}
+export type { Components as MarkdownComponents } from 'react-markdown';