@twelvemonday/blog-editor 1.0.3

package/README.md

@@ -0,0 +1,104 @@
+# @twelvemonday/blog-editor
+
+WordPress-style block blog editor for React. Drag-and-drop blocks, rich paste, SEO panel, image resize, custom theming, and HTML serialization.
+
+Published by [Twelve Monday](https://12monday.net).
+
+## Install
+
+```bash
+npm install @twelvemonday/blog-editor
+```
+
+Peer dependencies:
+
+```bash
+npm install react react-dom @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities lucide-react
+```
+
+## Image upload (`onUploadImage`)
+
+Editor **kahan upload kare** ye tum decide karte ho. Sirf ek function pass karo — editor `File` bhejega, tum URL return karo.
+
+Works for **featured image** and **image blocks**.
+
+```tsx
+<BlogEditor
+  onUploadImage={async (file) => {
+    // S3, Cloudinary, apni API — jo marzi
+    const form = new FormData();
+    form.append('file', file);
+    const res = await fetch('https://your-api.com/upload', { method: 'POST', body: form });
+    const { url } = await res.json();
+    return url; // public image URL string
+  }}
+  // ...
+/>
+```
+
+Agar `onUploadImage` nahi doge to file picker hide rahega — user image **URL** se add kar sakta hai.
+
+`uploadFile` prop ab deprecated hai — `onUploadImage` use karo.
+
+## Quick start
+
+```tsx
+'use client';
+
+import '@twelvemonday/blog-editor/styles.css';
+import { BlogEditor, type EditorDocument } from '@twelvemonday/blog-editor';
+
+export function AdminEditor({ post }: { post: EditorDocument }) {
+  return (
+    <BlogEditor
+      initial={post}
+      backHref="/admin/posts"
+      previewUrl={(slug) => `/blogs/${slug}`}
+      siteName="My Site"
+      baseUrl="https://example.com"
+      theme={{ primary: '#04644A', primaryHover: '#035239' }}
+      onUploadImage={async (file) => {
+        const form = new FormData();
+        form.append('file', file);
+        const res = await fetch('/api/upload', { method: 'POST', body: form });
+        const { url } = await res.json();
+        return url;
+      }}
+      onSave={async (doc) => {
+        await fetch('/api/posts', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(doc),
+        });
+        return { slug: doc.slug };
+      }}
+    />
+  );
+}
+```
+
+## Theming
+
+| Key | Default | Description |
+|-----|---------|-------------|
+| `primary` | `#04644A` | Buttons, accents, focus |
+| `primaryHover` | `#035239` | Primary hover |
+| `primaryMuted` | `#f0fdf4` | Light backgrounds |
+| `background` | `#f0f0f1` | Editor chrome |
+| `surface` | `#ffffff` | Canvas / panels |
+
+## HTML utilities
+
+```ts
+import { htmlToBlocks, blocksToHtml } from '@twelvemonday/blog-editor';
+```
+
+## Tailwind
+
+```css
+@source "../node_modules/@twelvemonday/blog-editor/dist/**/*.js";
+```
+
+## License
+
+MIT