draftify-react 0.1.2 → 0.1.4

package/README.md

@@ -0,0 +1,190 @@
+# Draftify React ✨
+
+**A ready-to-use React editor built on top of Draftify**
+
+`draftify-react` is a **fully styled, production-ready React editor** powered by the `draftify` core engine. It provides an out-of-the-box editing experience while preserving the structured, schema-driven philosophy of Draftify.
+
+This package focuses purely on **UI and interaction**.
+All document logic lives in `draftify`.
+
+---
+
+## ⚠️ Important Dependency Notice
+
+`draftify-react` **does not work on its own**.
+
+It requires the core engine:
+
+```bash
+npm install draftify
+npm install draftify-react
+```
+
+`draftify-react` consumes and manipulates Draftify documents internally, so both packages must be installed.
+
+---
+
+## Features
+
+- ✅ Ready-to-use rich editor
+- ✅ Built on top of `draftify`
+- ✅ Precompiled CSS (no Tailwind setup required)
+- ✅ Tailwind v4 compatible
+- ✅ Drag & drop block reordering
+- ✅ Document metadata handling
+- ✅ Preview & editor modes
+- ✅ Clipboard, export & formatting support
+- ✅ Zero configuration required to start
+
+---
+
+## Installation
+
+```bash
+npm install draftify draftify-react
+```
+
+---
+
+## Basic Usage
+
+```jsx
+import DraftifyReact from "draftify-react";
+import "draftify-react/styles.css";
+
+export default function App() {
+  return (
+    <div>
+      <DraftifyReact />
+    </div>
+  );
+}
+```
+
+That’s all you need for a working editor.
+
+---
+
+## Styling (Required)
+
+`draftify-react` ships with **precompiled CSS**.
+
+You must import it **once** in your app:
+
+```css
+@import "draftify-react/styles.css";
+```
+
+### Tailwind v4 Users
+
+If your project uses Tailwind v4, no extra configuration is required.
+All Draftify styles are already compiled and scoped.
+
+---
+
+## Editor Behavior
+
+The editor supports:
+
+- Multiple block types
+- Inline editing
+- Drag & drop ordering
+- Preview vs edit mode
+- Copy / export helpers
+- Metadata prompts (title, description, author)
+
+All content is internally represented using Draftify’s schema.
+
+---
+
+## Hooks API
+
+### `useDraftifyReact`
+
+```ts
+import { useDraftifyReact } from "draftify-react";
+```
+
+This hook powers the editor internally and exposes:
+
+- Document state
+- Block data
+- Block creation & modification helpers
+- Drag & drop handlers
+- UI state helpers
+
+> Advanced users can build **custom editors or wrappers** using this hook.
+
+---
+
+## Project Structure
+
+```
+draftify-react/
+├─ dist/
+│  ├─ draftify-react.es.js
+│  ├─ draftify-react.umd.js
+│  └─ draftify-react.css
+│
+├─ index.d.ts
+├─ package.json
+└─ README.md
+```
+
+The distributed package contains only what is required at runtime.
+
+---
+
+## Exports
+
+```ts
+import DraftifyReact from "draftify-react";
+import { useDraftifyReact } from "draftify-react";
+```
+
+Styles:
+
+```css
+@import "draftify-react/styles.css";
+```
+
+---
+
+## Why This Package Exists
+
+Draftify was designed with separation of concerns in mind.
+
+- `draftify` → **logic, schema, validation, export**
+- `draftify-react` → **UI, interactions, visuals**
+
+This allows:
+
+- Custom editors without UI constraints
+- Backend usage of Draftify
+- Independent evolution of UI and logic
+
+---
+
+## When to Use `draftify-react`
+
+Use this package if you want:
+
+- A complete editor without building UI
+- Fast integration into a React project
+- A clean abstraction over Draftify’s internals
+
+If you want to build your own editor UI, use `draftify` directly.
+
+---
+
+## Compatibility
+
+- React ≥ 18
+- Tailwind v4 supported
+- ESM & UMD builds included
+
+---
+
+## License
+
+MIT © 2025 Draftify Team