koguma 0.6.6 → 2.0.0

package/src/react/RichText.tsx

@@ -1,350 +0,0 @@
-/**
- * <RichText> — renders a KogumaDocument as semantic HTML.
- *
- * Simple usage:
- *   <RichText doc={data.body} className="prose" />
- *
- * Advanced usage with element overrides:
- *   <RichText doc={data.body} components={{ heading: ..., listItem: ... }} />
- */
-import type { ReactNode, CSSProperties } from 'react';
-import type {
-  KogumaDocument,
-  KogumaBlockNode,
-  KogumaInlineNode,
-  KogumaListItem
-} from '../config/types.ts';
-import type { RichTextComponents } from './types.ts';
-
-export interface RichTextProps {
-  doc: KogumaDocument | null | undefined;
-  /** Applied to the wrapper div */
-  className?: string;
-  /** Per-element component overrides */
-  components?: Partial<RichTextComponents>;
-}
-
-export function RichText({
-  doc,
-  className,
-  components = {}
-}: RichTextProps): ReactNode {
-  if (!doc?.nodes?.length) return null;
-
-  return (
-    <div className={className}>
-      {doc.nodes.map((node, i) => (
-        <Block key={node.key ?? i} node={node} components={components} />
-      ))}
-    </div>
-  );
-}
-
-// ── Block renderer ───────────────────────────────────────────────────
-
-function Block({
-  node,
-  components
-}: {
-  node: KogumaBlockNode;
-  components: Partial<RichTextComponents>;
-}): ReactNode {
-  const inlines = (children: KogumaInlineNode[]) =>
-    children.map((n, i) => (
-      <Inline key={n.key ?? i} node={n} components={components} />
-    ));
-
-  switch (node.type) {
-    case 'paragraph': {
-      const children = inlines(node.children);
-      if (components.paragraph) {
-        return components.paragraph({ node, children });
-      }
-      return <p style={alignStyle(node.align)}>{children}</p>;
-    }
-
-    case 'heading': {
-      const children = inlines(node.children);
-      if (components.heading) {
-        return components.heading({ node, children });
-      }
-      const H = `h${node.level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-      return <H>{children}</H>;
-    }
-
-    case 'quote': {
-      const children = inlines(node.children);
-      if (components.quote) {
-        return components.quote({ node, children });
-      }
-      return <blockquote>{children}</blockquote>;
-    }
-
-    case 'list': {
-      const renderedItems = node.items.map((item, i) => (
-        <ListItemRenderer
-          key={item.key ?? i}
-          item={item}
-          components={components}
-        />
-      ));
-      if (components.list) {
-        return components.list({ node, children: renderedItems });
-      }
-      const ListTag = node.ordered ? 'ol' : 'ul';
-      return <ListTag>{renderedItems}</ListTag>;
-    }
-
-    case 'code': {
-      if (components.code) {
-        return components.code({ node });
-      }
-      return (
-        <pre>
-          <code
-            className={node.language ? `language-${node.language}` : undefined}>
-            {node.text}
-          </code>
-        </pre>
-      );
-    }
-
-    case 'image': {
-      if (components.image) {
-        return components.image({ node });
-      }
-      return (
-        <img
-          src={node.url}
-          alt={node.alt ?? ''}
-          width={node.width ?? undefined}
-          height={node.height ?? undefined}
-        />
-      );
-    }
-
-    case 'hr': {
-      if (components.hr) {
-        return components.hr({ node });
-      }
-      return <hr />;
-    }
-
-    case 'table': {
-      if (components.table) {
-        return components.table({ node, rows: node.rows });
-      }
-      return (
-        <table>
-          {node.rows.some(r => r.isHeader) && (
-            <thead>
-              {node.rows
-                .filter(r => r.isHeader)
-                .map((row, i) => (
-                  <tr key={row.key ?? i}>
-                    {row.cells.map((cell, j) => (
-                      <th key={cell.key ?? j}>
-                        {cell.children.map((n, k) => (
-                          <Inline
-                            key={n.key ?? k}
-                            node={n}
-                            components={components}
-                          />
-                        ))}
-                      </th>
-                    ))}
-                  </tr>
-                ))}
-            </thead>
-          )}
-          <tbody>
-            {node.rows
-              .filter(r => !r.isHeader)
-              .map((row, i) => (
-                <tr key={row.key ?? i}>
-                  {row.cells.map((cell, j) => (
-                    <td key={cell.key ?? j}>
-                      {cell.children.map((n, k) => (
-                        <Inline
-                          key={n.key ?? k}
-                          node={n}
-                          components={components}
-                        />
-                      ))}
-                    </td>
-                  ))}
-                </tr>
-              ))}
-          </tbody>
-        </table>
-      );
-    }
-
-    case 'layout': {
-      const renderedColumns = node.columns.map((col, _i) =>
-        col.map((block, j) => (
-          <Block key={block.key ?? j} node={block} components={components} />
-        ))
-      );
-      if (components.layout) {
-        return components.layout({
-          node,
-          columns: renderedColumns.map((col, _ci) => <div key={_ci}>{col}</div>)
-        });
-      }
-      return (
-        <div style={{ display: 'flex', gap: '1rem' }}>
-          {renderedColumns.map((col, i) => (
-            <div key={i} style={{ flex: 1 }}>
-              {col}
-            </div>
-          ))}
-        </div>
-      );
-    }
-
-    case 'custom': {
-      if (components.customBlock) {
-        return components.customBlock({
-          node,
-          name: node.name,
-          data: node.data
-        });
-      }
-      return null;
-    }
-  }
-}
-
-// ── List item renderer ───────────────────────────────────────────────
-
-function ListItemRenderer({
-  item,
-  components
-}: {
-  item: KogumaListItem;
-  components: Partial<RichTextComponents>;
-}): ReactNode {
-  const inlineChildren = item.children.map((n, i) => (
-    <Inline key={n.key ?? i} node={n} components={components} />
-  ));
-
-  const nestedList = item.nestedList ? (
-    <NestedList list={item.nestedList} components={components} />
-  ) : null;
-
-  if (components.listItem) {
-    return components.listItem({ item, children: inlineChildren, nestedList });
-  }
-
-  return (
-    <li>
-      {item.checked !== undefined && (
-        <input
-          type='checkbox'
-          checked={item.checked}
-          readOnly
-          style={{ marginRight: '0.4em' }}
-        />
-      )}
-      {inlineChildren}
-      {nestedList}
-    </li>
-  );
-}
-
-function NestedList({
-  list,
-  components
-}: {
-  list: { ordered: boolean; items: KogumaListItem[] };
-  components: Partial<RichTextComponents>;
-}): ReactNode {
-  const Tag = list.ordered ? 'ol' : 'ul';
-  return (
-    <Tag>
-      {list.items.map((item, i) => (
-        <ListItemRenderer
-          key={item.key ?? i}
-          item={item}
-          components={components}
-        />
-      ))}
-    </Tag>
-  );
-}
-
-// ── Inline renderer ──────────────────────────────────────────────────
-
-function Inline({
-  node,
-  components
-}: {
-  node: KogumaInlineNode;
-  components: Partial<RichTextComponents>;
-}): ReactNode {
-  switch (node.type) {
-    case 'text': {
-      let content: ReactNode = node.text;
-      if (node.bold) content = <strong>{content}</strong>;
-      if (node.italic) content = <em>{content}</em>;
-      if (node.underline) content = <u>{content}</u>;
-      if (node.strikethrough) content = <s>{content}</s>;
-      if (node.code) content = <code>{content}</code>;
-      if (node.superscript) content = <sup>{content}</sup>;
-      if (node.subscript) content = <sub>{content}</sub>;
-      return content;
-    }
-
-    case 'link': {
-      const children = node.children.map((n, i) => (
-        <Inline key={n.key ?? i} node={n} components={components} />
-      ));
-      if (components.link) {
-        return components.link({ node, children });
-      }
-      return (
-        <a
-          href={node.url}
-          target={node.newTab ? '_blank' : undefined}
-          rel={node.newTab ? 'noopener noreferrer' : undefined}>
-          {children}
-        </a>
-      );
-    }
-
-    case 'line-break':
-      return <br />;
-
-    case 'inline-image': {
-      if (components.inlineImage) {
-        return components.inlineImage({ node });
-      }
-      return (
-        <img
-          src={node.url}
-          alt={node.alt ?? ''}
-          style={{ display: 'inline' }}
-        />
-      );
-    }
-
-    case 'custom': {
-      if (components.customInline) {
-        return components.customInline({
-          node,
-          name: node.name,
-          data: node.data
-        });
-      }
-      return null;
-    }
-  }
-}
-
-// ── Helpers ──────────────────────────────────────────────────────────
-
-function alignStyle(align?: string): CSSProperties | undefined {
-  if (!align) return undefined;
-  return { textAlign: align as CSSProperties['textAlign'] };
-}

package/src/rich-text/index.ts

@@ -1,4 +0,0 @@
-export { lexicalToKoguma } from './lexical-to-koguma.ts';
-export { kogumaToLexical } from './koguma-to-lexical.ts';
-export { richTextToPlain } from './plain.ts';
-export type { PlainTextOptions } from './plain.ts';

package/src/rich-text/koguma-to-lexical.ts

@@ -1,340 +0,0 @@
-/**
- * koguma-to-lexical.ts — Converts KogumaDocument back to Lexical's SerializedEditorState.
- *
- * The inverse of lexicalToKoguma(). Used by the seed pipeline to store
- * content in the format D1/admin expects (Lexical JSON), rather than
- * the public-API KogumaDocument format.
- */
-import type {
-  KogumaDocument,
-  KogumaBlockNode,
-  KogumaInlineNode,
-  KogumaListItem
-} from '../config/types.ts';
-
-// ── Lexical format bitmask constants (mirror of lexical-to-koguma.ts) ──
-const IS_BOLD = 1;
-const IS_ITALIC = 2;
-const IS_STRIKETHROUGH = 4;
-const IS_UNDERLINE = 8;
-const IS_CODE = 16;
-const IS_SUBSCRIPT = 32;
-const IS_SUPERSCRIPT = 64;
-
-// ── Output types (Lexical serialized JSON) ──────────────────────────
-
-interface LexicalNode {
-  type: string;
-  version: number;
-  [k: string]: unknown;
-}
-
-// ── Main entry point ────────────────────────────────────────────────
-
-export function kogumaToLexical(doc: KogumaDocument): Record<string, unknown> {
-  return {
-    root: {
-      type: 'root',
-      children: doc.nodes.map(convertBlockNode),
-      direction: 'ltr',
-      format: '',
-      indent: 0,
-      version: 1
-    }
-  };
-}
-
-// ── Block node conversion ────────────────────────────────────────────
-
-function convertBlockNode(node: KogumaBlockNode): LexicalNode {
-  switch (node.type) {
-    case 'paragraph':
-      return {
-        type: 'paragraph',
-        version: 1,
-        children: (node.children ?? []).map(convertInlineNode),
-        direction: 'ltr',
-        format: alignToFormat(node.align),
-        indent: 0,
-        textFormat: 0,
-        textStyle: ''
-      };
-
-    case 'heading':
-      return {
-        type: 'heading',
-        version: 1,
-        tag: `h${node.level ?? 2}`,
-        children: (node.children ?? []).map(convertInlineNode),
-        direction: 'ltr',
-        format: '',
-        indent: 0,
-        textFormat: 0,
-        textStyle: ''
-      };
-
-    case 'quote':
-      return {
-        type: 'quote',
-        version: 1,
-        children: [
-          {
-            type: 'paragraph',
-            version: 1,
-            children: (node.children ?? []).map(convertInlineNode),
-            direction: 'ltr',
-            format: '',
-            indent: 0,
-            textFormat: 0,
-            textStyle: ''
-          }
-        ],
-        direction: 'ltr',
-        format: '',
-        indent: 0
-      };
-
-    case 'list':
-      return convertList(node);
-
-    case 'code':
-      return {
-        type: 'code',
-        version: 1,
-        language: node.language ?? null,
-        children: codeTextToHighlightNodes(node.text ?? ''),
-        direction: 'ltr',
-        format: '',
-        indent: 0
-      };
-
-    case 'image':
-      return {
-        type: 'image',
-        version: 1,
-        src: node.url ?? '',
-        altText: node.alt ?? '',
-        width: node.width ?? null,
-        height: node.height ?? null
-      };
-
-    case 'hr':
-      return {
-        type: 'horizontalrule',
-        version: 1
-      };
-
-    case 'table':
-      return convertTable(node);
-
-    case 'layout':
-      return convertLayout(node);
-
-    case 'custom':
-      return {
-        type: node.name ?? 'unknown',
-        version: 1,
-        ...(node.data ?? {})
-      };
-
-    default:
-      return {
-        type: 'paragraph',
-        version: 1,
-        children: [],
-        direction: 'ltr',
-        format: '',
-        indent: 0,
-        textFormat: 0,
-        textStyle: ''
-      };
-  }
-}
-
-// ── List conversion ──────────────────────────────────────────────────
-
-function convertList(node: KogumaBlockNode): LexicalNode {
-  const ordered = (node as any).ordered ?? false;
-  const listType = ordered ? 'number' : 'bullet';
-  const items = (node as any).items ?? [];
-
-  return {
-    type: 'list',
-    version: 1,
-    listType,
-    start: 1,
-    tag: ordered ? 'ol' : 'ul',
-    children: items.map((item: KogumaListItem, i: number) =>
-      convertListItem(item, listType, i + 1)
-    ),
-    direction: 'ltr',
-    format: '',
-    indent: 0
-  };
-}
-
-function convertListItem(
-  item: KogumaListItem,
-  listType: string,
-  value: number
-): LexicalNode {
-  const children: LexicalNode[] = (item.children ?? []).map(convertInlineNode);
-
-  if (item.nestedList) {
-    children.push(
-      convertList({
-        type: 'list',
-        ordered: item.nestedList.ordered,
-        items: item.nestedList.items
-      } as any)
-    );
-  }
-
-  return {
-    type: 'listitem',
-    version: 1,
-    value,
-    children,
-    checked: listType === 'check' ? (item.checked ?? false) : undefined,
-    direction: 'ltr',
-    format: '',
-    indent: 0
-  };
-}
-
-// ── Table conversion ─────────────────────────────────────────────────
-
-function convertTable(node: KogumaBlockNode): LexicalNode {
-  const rows = (node as any).rows ?? [];
-  return {
-    type: 'table',
-    version: 1,
-    children: rows.map((row: any) => ({
-      type: 'tablerow',
-      version: 1,
-      key: row.key,
-      children: (row.cells ?? []).map((cell: any) => ({
-        type: 'tablecell',
-        version: 1,
-        key: cell.key,
-        children: (cell.children ?? []).map(convertInlineNode)
-      }))
-    }))
-  };
-}
-
-// ── Layout conversion ────────────────────────────────────────────────
-
-function convertLayout(node: KogumaBlockNode): LexicalNode {
-  const columns = (node as any).columns ?? [];
-  return {
-    type: 'layoutcontainer',
-    version: 1,
-    children: columns.map((col: KogumaBlockNode[]) => ({
-      type: 'layoutitem',
-      version: 1,
-      children: col.map(convertBlockNode)
-    }))
-  };
-}
-
-// ── Inline node conversion ───────────────────────────────────────────
-
-function convertInlineNode(node: KogumaInlineNode): LexicalNode {
-  switch (node.type) {
-    case 'text': {
-      let format = 0;
-      if (node.bold) format |= IS_BOLD;
-      if (node.italic) format |= IS_ITALIC;
-      if (node.underline) format |= IS_UNDERLINE;
-      if (node.strikethrough) format |= IS_STRIKETHROUGH;
-      if (node.code) format |= IS_CODE;
-      if (node.subscript) format |= IS_SUBSCRIPT;
-      if (node.superscript) format |= IS_SUPERSCRIPT;
-
-      return {
-        type: 'text',
-        version: 1,
-        text: node.text ?? '',
-        format,
-        detail: 0,
-        mode: 'normal',
-        style: ''
-      };
-    }
-
-    case 'link':
-      return {
-        type: 'link',
-        version: 1,
-        url: node.url ?? '',
-        target: node.newTab ? '_blank' : null,
-        children: (node.children ?? []).map(convertInlineNode),
-        direction: 'ltr',
-        format: '',
-        indent: 0,
-        rel: null
-      };
-
-    case 'line-break':
-      return {
-        type: 'linebreak',
-        version: 1
-      };
-
-    case 'custom':
-      return {
-        type: node.name ?? 'unknown',
-        version: 1,
-        ...(node.data ?? {})
-      };
-
-    default:
-      return {
-        type: 'text',
-        version: 1,
-        text: (node as any).text ?? '',
-        format: 0,
-        detail: 0,
-        mode: 'normal',
-        style: ''
-      };
-  }
-}
-
-// ── Helpers ──────────────────────────────────────────────────────────
-
-function alignToFormat(align?: string): string | number {
-  switch (align) {
-    case 'left':
-      return 1;
-    case 'center':
-      return 2;
-    case 'right':
-      return 3;
-    case 'justify':
-      return 4;
-    default:
-      return '';
-  }
-}
-
-/** Convert plain code text to Lexical CodeHighlightNode children */
-function codeTextToHighlightNodes(text: string): LexicalNode[] {
-  const lines = text.split('\n');
-  const nodes: LexicalNode[] = [];
-
-  for (let i = 0; i < lines.length; i++) {
-    if (i > 0) {
-      nodes.push({ type: 'linebreak', version: 1 });
-    }
-    nodes.push({
-      type: 'code-highlight',
-      version: 1,
-      text: lines[i]!,
-      highlightType: null
-    });
-  }
-
-  return nodes;
-}