@create-markdown/react 0.1.0

package/README.md

@@ -0,0 +1,122 @@
+# @create-markdown/react
+
+React components and hooks for @create-markdown.
+
+## Installation
+
+```bash
+# Using bun
+bun add @create-markdown/react
+
+# Using npm
+npm install @create-markdown/react
+
+# Using yarn
+yarn add @create-markdown/react
+```
+
+## Quick Start
+
+### Render Blocks
+
+```tsx
+import { BlockRenderer, useDocument, h1, paragraph } from '@create-markdown/react';
+
+function Editor() {
+  const doc = useDocument([
+    h1('Welcome'),
+    paragraph('Start editing...'),
+  ]);
+  
+  return <BlockRenderer blocks={doc.blocks} />;
+}
+```
+
+### Bidirectional Markdown
+
+```tsx
+import { BlockRenderer, useMarkdown } from '@create-markdown/react';
+
+function MarkdownEditor() {
+  const { markdown, blocks, setMarkdown } = useMarkdown('# Hello');
+  
+  return (
+    <div>
+      <textarea
+        value={markdown}
+        onChange={(e) => setMarkdown(e.target.value)}
+      />
+      <BlockRenderer blocks={blocks} />
+    </div>
+  );
+}
+```
+
+### Block Selection and Editing
+
+```tsx
+import { BlockRenderer, useDocument, useBlockEditor, BlockElement } from '@create-markdown/react';
+
+function Editor() {
+  const doc = useDocument();
+  const editor = useBlockEditor(doc);
+  
+  return (
+    <div>
+      {doc.blocks.map((block) => (
+        <div
+          key={block.id}
+          onClick={() => editor.selectBlock(block.id)}
+          style={{
+            border: editor.selectedBlockId === block.id ? '2px solid blue' : 'none'
+          }}
+        >
+          <BlockElement block={block} />
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+## Components
+
+### `BlockRenderer`
+
+Renders an array of blocks as React elements.
+
+```tsx
+<BlockRenderer
+  blocks={blocks}
+  className="my-editor"
+  customRenderers={{
+    codeBlock: MyCustomCodeBlock,
+  }}
+/>
+```
+
+### `BlockElement`
+
+Renders a single block.
+
+### `InlineContent`
+
+Renders inline content (text spans with styles).
+
+## Hooks
+
+### `useDocument(initialBlocks?, options?)`
+
+Full document state management with CRUD operations.
+
+### `useMarkdown(initialMarkdown?)`
+
+Bidirectional markdown/blocks state.
+
+### `useBlockEditor(documentHook)`
+
+Block selection and editing operations.
+
+## License
+
+MIT

package/dist/block-renderer.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @create-markdown/react - Block Renderer
+ * Render blocks as React elements
+ */
+import React from 'react';
+import type { Block, TextSpan, HeadingBlock, CodeBlockBlock, ImageBlock, TableBlock, CalloutBlock, CheckListBlock } from '@create-markdown/core';
+export interface BlockRendererProps {
+    /** Blocks to render */
+    blocks: Block[];
+    /** Custom class name for the container */
+    className?: string;
+    /** Custom renderers for specific block types */
+    customRenderers?: Partial<BlockRenderers>;
+}
+export interface BlockRenderers {
+    paragraph: React.ComponentType<{
+        block: Block;
+    }>;
+    heading: React.ComponentType<{
+        block: HeadingBlock;
+    }>;
+    bulletList: React.ComponentType<{
+        block: Block;
+    }>;
+    numberedList: React.ComponentType<{
+        block: Block;
+    }>;
+    checkList: React.ComponentType<{
+        block: CheckListBlock;
+    }>;
+    codeBlock: React.ComponentType<{
+        block: CodeBlockBlock;
+    }>;
+    blockquote: React.ComponentType<{
+        block: Block;
+    }>;
+    table: React.ComponentType<{
+        block: TableBlock;
+    }>;
+    image: React.ComponentType<{
+        block: ImageBlock;
+    }>;
+    divider: React.ComponentType<{
+        block: Block;
+    }>;
+    callout: React.ComponentType<{
+        block: CalloutBlock;
+    }>;
+}
+export interface SingleBlockProps {
+    block: Block;
+    customRenderers?: Partial<BlockRenderers>;
+}
+/**
+ * Renders: array of blocks as React elements
+ */
+export declare function BlockRenderer({ blocks, className, customRenderers, }: BlockRendererProps): React.ReactElement;
+/**
+ * Renders: single block
+ */
+export declare function BlockElement({ block, customRenderers, }: SingleBlockProps): React.ReactElement | null;
+interface InlineContentProps {
+    spans: TextSpan[];
+}
+/**
+ * Renders: inline content (text spans with styles)
+ */
+export declare function InlineContent({ spans }: InlineContentProps): React.ReactElement;
+export default BlockRenderer;
+//# sourceMappingURL=block-renderer.d.ts.map

package/dist/block-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-renderer.d.ts","sourceRoot":"","sources":["../src/block-renderer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EACR,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,UAAU,EACV,UAAU,EACV,YAAY,EACZ,cAAc,EACjB,MAAM,uBAAuB,CAAC;AAM/B,MAAM,WAAW,kBAAkB;IAC/B,uBAAuB;IACvB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,eAAe,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC7C;AAED,MAAM,WAAW,cAAc;IAC3B,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC,CAAC;IACjD,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,YAAY,CAAA;KAAE,CAAC,CAAC;IACtD,UAAU,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC,CAAC;IAClD,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC,CAAC;IACpD,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,cAAc,CAAA;KAAE,CAAC,CAAC;IAC1D,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,cAAc,CAAA;KAAE,CAAC,CAAC;IAC1D,UAAU,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC,CAAC;IAClD,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,UAAU,CAAA;KAAE,CAAC,CAAC;IAClD,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,UAAU,CAAA;KAAE,CAAC,CAAC;IAClD,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC,CAAC;IAC/C,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,YAAY,CAAA;KAAE,CAAC,CAAC;CACzD;AAED,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,eAAe,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC7C;AAMD;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC1B,MAAM,EACN,SAAS,EACT,eAAe,GAClB,EAAE,kBAAkB,GAAG,KAAK,CAAC,YAAY,CAYzC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,eAAe,GAClB,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA6C9C;AAMD,UAAU,kBAAkB;IACxB,KAAK,EAAE,QAAQ,EAAE,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,kBAAkB,GAAG,KAAK,CAAC,YAAY,CAQ/E;AAuRD,eAAe,aAAa,CAAC"}

package/dist/hooks.d.ts

@@ -0,0 +1,142 @@
+/**
+ * @create-markdown/react - Hooks
+ * State management hooks for document manipulation
+ */
+import type { Block, Document, DocumentOptions, TextSpan } from '@create-markdown/core';
+export interface UseDocumentReturn {
+    /** Current document state */
+    document: Document;
+    /** Blocks in the document */
+    blocks: Block[];
+    /** Insert: block at a specific index */
+    insertBlock: (block: Block, index?: number) => void;
+    /** Append: block to the end */
+    appendBlock: (block: Block) => void;
+    /** Remove: block by ID */
+    removeBlock: (blockId: string) => void;
+    /** Update: block by ID */
+    updateBlock: (blockId: string, updates: Partial<Omit<Block, 'id' | 'type'>>) => void;
+    /** Move: block to a new index */
+    moveBlock: (blockId: string, newIndex: number) => void;
+    /** Find: block by ID */
+    findBlock: (blockId: string) => Block | undefined;
+    /** Get: index of a block */
+    getBlockIndex: (blockId: string) => number;
+    /** Clear: all blocks */
+    clearBlocks: () => void;
+    /** Replace: entire document with new blocks */
+    setBlocks: (blocks: Block[]) => void;
+    /** Set: entire document */
+    setDocument: (doc: Document) => void;
+    /** Get: document as markdown */
+    toMarkdown: () => string;
+    /** Load: markdown into the document */
+    fromMarkdown: (markdown: string) => void;
+    /** Update: document metadata */
+    updateMeta: (meta: Partial<Document['meta']>) => void;
+}
+/**
+ * Hook for managing: document with blocks
+ *
+ * @example
+ * ```tsx
+ * function Editor() {
+ *   const { blocks, appendBlock, toMarkdown } = useDocument();
+ *
+ *   const addParagraph = () => {
+ *     appendBlock(paragraph('New paragraph'));
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <BlockRenderer blocks={blocks} />
+ *       <button onClick={addParagraph}>Add Paragraph</button>
+ *       <button onClick={() => console.log(toMarkdown())}>Export</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useDocument(initialBlocks?: Block[], options?: DocumentOptions): UseDocumentReturn;
+export interface UseMarkdownReturn {
+    /** Current markdown string */
+    markdown: string;
+    /** Parsed blocks */
+    blocks: Block[];
+    /** Update: markdown content */
+    setMarkdown: (markdown: string) => void;
+    /** Update: blocks (will update markdown too) */
+    setBlocks: (blocks: Block[]) => void;
+}
+/**
+ * Hook for bidirectional: markdown/blocks state
+ *
+ * @example
+ * ```tsx
+ * function MarkdownEditor() {
+ *   const { markdown, blocks, setMarkdown } = useMarkdown('# Hello');
+ *
+ *   return (
+ *     <div>
+ *       <textarea
+ *         value={markdown}
+ *         onChange={(e) => setMarkdown(e.target.value)}
+ *       />
+ *       <BlockRenderer blocks={blocks} />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useMarkdown(initialMarkdown?: string): UseMarkdownReturn;
+export interface UseBlockEditorReturn {
+    /** Current selected block ID */
+    selectedBlockId: string | null;
+    /** Current selected block */
+    selectedBlock: Block | undefined;
+    /** Select: block by ID */
+    selectBlock: (blockId: string | null) => void;
+    /** Select: next block */
+    selectNext: () => void;
+    /** Select: previous block */
+    selectPrevious: () => void;
+    /** Delete: selected block */
+    deleteSelected: () => void;
+    /** Update: selected block's content */
+    updateSelectedContent: (content: TextSpan[]) => void;
+    /** Duplicate: selected block */
+    duplicateSelected: () => void;
+    /** Move: selected block up */
+    moveSelectedUp: () => void;
+    /** Move: selected block down */
+    moveSelectedDown: () => void;
+}
+/**
+ * Hook for: block selection and editing operations
+ *
+ * @example
+ * ```tsx
+ * function Editor() {
+ *   const doc = useDocument();
+ *   const editor = useBlockEditor(doc);
+ *
+ *   return (
+ *     <div>
+ *       {doc.blocks.map((block) => (
+ *         <div
+ *           key={block.id}
+ *           onClick={() => editor.selectBlock(block.id)}
+ *           style={{
+ *             border: editor.selectedBlockId === block.id ? '2px solid blue' : 'none'
+ *           }}
+ *         >
+ *           <BlockElement block={block} />
+ *         </div>
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useBlockEditor(documentHook: UseDocumentReturn): UseBlockEditorReturn;
+//# sourceMappingURL=hooks.d.ts.map

package/dist/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"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"}