v0.2.0

Author: BunsDev

CHANGELOG.md

@@ -8,45 +8,64 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Planned
-- Additional markdown element builders (headings, lists, tables, etc.)
 - Frontmatter parsing support
 - Markdown validation utilities
+- Nested list support improvements
 
 ---
 
-## [0.1.1] - 2026-01-20
+## [0.2.0] - 2026-01-20
 
-### Added
-- Documentation for `VERSION` export
-- Documentation for default export usage
+### Added - Complete Block-Based Architecture
 
-### Fixed
-- Corrected Node.js version requirement to 20+ (was incorrectly stated as 18+)
-- Fixed repository URL inconsistencies across documentation
+This release introduces a complete block-based markdown notes system with zero dependencies.
 
-### Changed
-- Updated README with improved API documentation
+#### Core Types (`src/types/index.ts`)
+- `BlockType` union with 11 block types: paragraph, heading, bulletList, numberedList, checkList, codeBlock, blockquote, table, image, divider, callout
+- `Block<T>` generic interface with id, type, content, children, and props
+- `TextSpan` and `InlineStyle` for rich text formatting
+- `Document` interface for complete document representation
 
----
+#### Block Factory Functions (`src/core/blocks.ts`)
+- `createBlock()` - Generic block creator
+- `paragraph()`, `heading()`, `h1()`-`h6()` - Text blocks
+- `bulletList()`, `numberedList()`, `checkList()` - List blocks
+- `codeBlock()`, `blockquote()`, `divider()` - Structural blocks
+- `image()`, `table()`, `callout()` - Rich content blocks
+- Inline helpers: `bold()`, `italic()`, `code()`, `link()`, `strikethrough()`, `highlight()`
+
+#### Document Management (`src/core/document.ts`)
+- `createDocument()`, `emptyDocument()`, `cloneDocument()`
+- CRUD operations: `insertBlock()`, `appendBlock()`, `removeBlock()`, `updateBlock()`
+- Query operations: `findBlock()`, `getBlockIndex()`, `findBlocksByType()`
+- Bulk operations: `setBlocks()`, `clearBlocks()`, `filterBlocks()`, `mapBlocks()`
+
+#### Markdown Parser (`src/parsers/`)
+- `parse()` / `markdownToBlocks()` - Parse markdown strings to blocks
+- `markdownToDocument()` - Parse to full Document object
+- Line tokenizer with support for all common markdown constructs
+- Inline style parser with nesting support
+
+#### Markdown Serializer (`src/serializers/markdown.ts`)
+- `stringify()` / `blocksToMarkdown()` - Serialize blocks to markdown
+- `documentToMarkdown()` - Serialize Document objects
+- Configurable options: lineEnding, listIndent, headingStyle, codeBlockStyle
 
-## [0.1.0] - 2026-01-20
+#### React Components (`src/react/`) - Optional
+- `BlockRenderer` - Render blocks as React elements
+- `BlockElement` - Render single blocks with custom renderers
+- `InlineContent` - Render styled text spans
 
-### Added
-- Initial release of `create-markdown`
-- `createMarkdown()` function for creating markdown documents
-- `MarkdownOptions` interface with `strict` and `lineEnding` options
-- `MarkdownDocument` interface with `content` and `meta` properties
-- Dual ESM/CommonJS module support
-- Full TypeScript type definitions
-- Cross-platform line ending normalization
+#### React Hooks (`src/react/hooks.ts`) - Optional
+- `useDocument()` - Full document state management
+- `useMarkdown()` - Bidirectional markdown/blocks state
+- `useBlockEditor()` - Selection and editing operations
 
-### Technical
-- Built with Bun for fast builds
-- Zero runtime dependencies
-- Node.js 20+ support
+#### Convenience Functions
+- `fromMarkdown(markdown)` - Quick parse to Document
+- `toMarkdown(blocks)` - Quick serialize to string
 
 ---
 
-[Unreleased]: https://github.com/BunsDev/create-markdown/compare/v0.1.1...HEAD
-[0.1.1]: https://github.com/BunsDev/create-markdown/compare/v0.1.0...v0.1.1
-[0.1.0]: https://github.com/BunsDev/create-markdown/releases/tag/v0.1.0
+[Unreleased]: https://github.com/BunsDev/create-markdown/compare/v0.2.0...HEAD
+[0.2.0]: https://github.com/BunsDev/create-markdown/releases/tag/v0.2.0

README.md

@@ -3,10 +3,19 @@
 [![npm version](https://img.shields.io/npm/v/create-markdown.svg)](https://www.npmjs.com/package/create-markdown)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-Markdown package to enable creating markdown interfaces seamlessly because it is complicated and annoying asf.
+A complete block-based markdown notes package with zero dependencies. Parse, create, and serialize markdown with full TypeScript support.
 
 📦 **[View on npm](https://www.npmjs.com/package/create-markdown)**
 
+## Features
+
+- 🧱 **Block-based architecture** - Work with structured blocks instead of raw strings
+- 🔄 **Bidirectional conversion** - Parse markdown to blocks, serialize blocks to markdown
+- 📝 **Rich inline styles** - Bold, italic, code, links, strikethrough, highlights
+- ⚛️ **React components** - Optional React bindings for rendering and editing
+- 🪶 **Zero dependencies** - Core package has no runtime dependencies
+- 🔒 **Full TypeScript** - Complete type definitions with generics
+
 ## Installation
 
 ```bash
@@ -23,73 +32,191 @@ yarn add create-markdown
 pnpm add create-markdown
 ```
 
-## Usage
+## Quick Start
 
-### ESM (recommended)
+### Parse Markdown to Blocks
 
 ```typescript
-import { createMarkdown } from 'create-markdown';
+import { parse } from 'create-markdown';
+
+const blocks = parse(`# Hello World
+
+This is **bold** and *italic* text.
+
+- Item one
+- Item two
+`);
 
-const doc = createMarkdown('# Hello World');
-console.log(doc.content);
+console.log(blocks);
+// [
+//   { type: 'heading', props: { level: 1 }, content: [...] },
+//   { type: 'paragraph', content: [...] },
+//   { type: 'bulletList', children: [...] }
+// ]
 ```
 
-### Default Export
+### Create Blocks Programmatically
 
 ```typescript
-import createMarkdown from 'create-markdown';
+import { h1, paragraph, bulletList, bold, italic, spans } from 'create-markdown';
+
+const blocks = [
+  h1('My Document'),
+  paragraph(spans(
+    bold('Important: '),
+    { text: 'This is ', styles: {} },
+    italic('really'),
+    { text: ' cool!', styles: {} }
+  )),
+  bulletList(['First item', 'Second item', 'Third item']),
+];
+```
+
+### Serialize Blocks to Markdown
 
-const doc = createMarkdown('# Hello World');
-console.log(doc.content);
+```typescript
+import { stringify, h1, paragraph, codeBlock } from 'create-markdown';
+
+const markdown = stringify([
+  h1('Hello'),
+  paragraph('World'),
+  codeBlock('console.log("Hi!");', 'javascript'),
+]);
+
+console.log(markdown);
+// # Hello
+//
+// World
+//
+// ```javascript
+// console.log("Hi!");
+// ```
 ```
 
-### CommonJS
+### Document Management
+
+```typescript
+import { 
+  createDocument, 
+  appendBlock, 
+  removeBlock, 
+  findBlock,
+  paragraph 
+} from 'create-markdown';
 
-```javascript
-const { createMarkdown } = require('create-markdown');
+// Create a document
+let doc = createDocument([paragraph('First paragraph')]);
 
-const doc = createMarkdown('# Hello World');
-console.log(doc.content);
+// Add a block
+doc = appendBlock(doc, paragraph('Second paragraph'));
+
+// Find a block
+const block = findBlock(doc, 'some-id');
+
+// Remove a block
+doc = removeBlock(doc, 'some-id');
 ```
 
-### With Options
+## React Components
+
+Optional React bindings are available via a separate import:
+
+```tsx
+import { BlockRenderer, useDocument, useMarkdown } from 'create-markdown/react';
+import { paragraph, h1 } from 'create-markdown/react';
+
+function Editor() {
+  const { blocks, appendBlock, toMarkdown } = useDocument();
+  
+  return (
+    <div>
+      <BlockRenderer blocks={blocks} />
+      <button onClick={() => appendBlock(paragraph('New paragraph'))}>
+        Add Paragraph
+      </button>
+      <button onClick={() => console.log(toMarkdown())}>
+        Export Markdown
+      </button>
+    </div>
+  );
+}
+
+function MarkdownEditor() {
+  const { markdown, blocks, setMarkdown } = useMarkdown('# Hello');
+  
+  return (
+    <div>
+      <textarea 
+        value={markdown} 
+        onChange={(e) => setMarkdown(e.target.value)} 
+      />
+      <BlockRenderer blocks={blocks} />
+    </div>
+  );
+}
+```
 
-```typescript
-import { createMarkdown, type MarkdownOptions } from 'create-markdown';
+## Block Types
+
+| Type | Factory Function | Description |
+|------|-----------------|-------------|
+| `paragraph` | `paragraph(content)` | Text paragraph |
+| `heading` | `heading(level, content)` or `h1`-`h6` | Heading levels 1-6 |
+| `bulletList` | `bulletList(items)` | Unordered list |
+| `numberedList` | `numberedList(items)` | Ordered list |
+| `checkList` | `checkList(items)` | Task list with checkboxes |
+| `codeBlock` | `codeBlock(code, language?)` | Fenced code block |
+| `blockquote` | `blockquote(content)` | Block quote |
+| `image` | `image(url, alt?)` | Image |
+| `divider` | `divider()` | Horizontal rule |
+| `table` | `table(headers, rows)` | Table with headers |
+| `callout` | `callout(type, content)` | Callout/admonition |
 
-const options: MarkdownOptions = {
-  strict: true,
-  lineEnding: '\n',
-};
+## Inline Styles
 
-const doc = createMarkdown('# My Document', options);
+```typescript
+import { bold, italic, code, link, strikethrough, highlight } from 'create-markdown';
+
+// Create styled text spans
+const content = [
+  bold('Bold text'),
+  italic('Italic text'),
+  code('inline code'),
+  link('Click here', 'https://example.com'),
+  strikethrough('deleted'),
+  highlight('highlighted'),
+];
 ```
 
-## API
+## API Reference
 
-### `createMarkdown(content?, options?)`
+### Parsing
 
-Creates a new markdown document.
+- `parse(markdown)` - Parse markdown string to blocks
+- `markdownToBlocks(markdown, options?)` - Full parser with options
+- `markdownToDocument(markdown)` - Parse to a Document object
 
-**Parameters:**
-- `content` (string, optional): Initial markdown content
-- `options` (MarkdownOptions, optional): Configuration options
-  - `strict` (boolean): Enable strict parsing mode
-  - `lineEnding` (string): Custom line ending (default: `'\n'`)
+### Serialization
 
-**Returns:** `MarkdownDocument`
-- `content` (string): Raw markdown content
-- `meta` (Record<string, unknown>): Document metadata
+- `stringify(blocks)` - Serialize blocks to markdown
+- `blocksToMarkdown(blocks, options?)` - Full serializer with options
+- `documentToMarkdown(doc)` - Serialize a Document
 
-### `VERSION`
+### Document Operations
 
-Package version string.
+- `createDocument(blocks?, options?)` - Create a new document
+- `insertBlock(doc, block, index?)` - Insert block at position
+- `appendBlock(doc, block)` - Add block at end
+- `removeBlock(doc, blockId)` - Remove block by ID
+- `updateBlock(doc, blockId, updates)` - Update block properties
+- `moveBlock(doc, blockId, newIndex)` - Reorder blocks
+- `findBlock(doc, blockId)` - Find block by ID
 
-```typescript
-import { VERSION } from 'create-markdown';
+### React Hooks
 
-console.log(VERSION); // '0.1.1'
-```
+- `useDocument(initialBlocks?)` - Full document state management
+- `useMarkdown(initialMarkdown?)` - Bidirectional markdown/blocks
+- `useBlockEditor(doc)` - Selection and editing operations
 
 ## Development
 
@@ -100,11 +227,8 @@ bun install
 # Build the package
 bun run build
 
-# Watch mode during development
-bun run dev
-
-# Clean build artifacts
-bun run clean
+# Type check
+bun run typecheck
 
 # Run the playground
 bun run playground
@@ -114,6 +238,7 @@ bun run playground
 
 - Node.js 20+
 - Bun 1.0+ (for development)
+- React 18+ (optional, for React components)
 
 ## Contributing