axiom-editor 1.0.1 → 1.0.2

package/README.md

@@ -0,0 +1,127 @@
+# AxiomEditor
+
+A premium, modular narrative architecture block editor built on React, Tiptap, and Tailwind CSS. 
+
+AxiomEditor provides a ready-to-use monolithic editor wrapper while remaining completely modular, allowing developers to construct custom editing layouts by arranging the core providers, toolbars, and canvas elements.
+
+---
+
+## Features
+
+- 📝 **Tiptap Core Integration:** Clean, extensible rich-text editing.
+- 🎨 **Themeable Design System:** Easily toggle between dark, light, or custom color schemes using CSS Custom Properties (CSS variables).
+- 🧩 **Modular Architecture:** Arrange toolbars, scroll windows, and modals wherever they fit best in your layout.
+- 🖋️ **Advanced Multi-Color Styling:** Highlight, bold, underline, or strike-through words with custom colors concurrently.
+- 🖼️ **Media Embeds:** Built-in support for YouTube, X (Twitter), Instagram, and inline image uploads.
+- 🤖 **Developer AST Output:** Export and render raw serialized JSON nodes dynamically.
+
+---
+
+## Installation
+
+Install the package and its peer dependencies in your React project:
+
+```bash
+npm install axiom-editor lucide-react react react-dom
+```
+
+---
+
+## Quick Start
+
+Import the editor and its stylesheet, and mount it in your React application:
+
+```tsx
+import React, { useState } from 'react';
+import { AxiomEditor } from 'axiom-editor';
+import 'axiom-editor/style.css'; // Don't forget to import the CSS!
+
+function App() {
+  const [content, setContent] = useState('<p>Welcome to AxiomEditor!</p>');
+
+  return (
+    <div style={{ padding: '2rem', background: '#121212' }}>
+      <AxiomEditor 
+        initialContent={content}
+        onChange={(json, html) => setContent(html)}
+      />
+    </div>
+  );
+}
+```
+
+---
+
+## Custom Theming
+
+AxiomEditor is styled using Tailwind classes mapped internally to CSS custom properties. By default, it runs in a sleek dark theme. 
+
+To change the theme or create your own, simply target the `.axiom-editor-wrapper` selector in your own CSS and override the custom properties:
+
+### Example: Light Mode Theme
+```css
+.axiom-editor-wrapper {
+  --axiom-bg: #ffffff;          /* Editor background */
+  --axiom-bg-card: #f4f4f5;     /* Dropdown backgrounds */
+  --axiom-text: #09090b;        /* Main text color */
+  --axiom-text-muted: #71717a;  /* Subtitles & placeholders */
+  --axiom-border: #e4e4e7;      /* Borders & dividers */
+  --axiom-primary: #ef4444;     /* Active highlights & accents */
+}
+```
+
+---
+
+## Modular UI Composition
+
+If you do not want the standard top-toolbar layout, you can arrange the modular components inside the `AxiomEditorProvider` block:
+
+```tsx
+import { 
+  AxiomEditorProvider, 
+  AxiomToolbar, 
+  AxiomContent, 
+  MediaMenu 
+} from 'axiom-editor';
+
+function CustomEditor() {
+  return (
+    <AxiomEditorProvider initialContent="...">
+      <div className="my-custom-layout">
+        {/* Render editor canvas first, then toolbar on bottom */}
+        <AxiomContent />
+        <AxiomToolbar />
+        <MediaMenu />
+      </div>
+    </AxiomEditorProvider>
+  );
+}
+```
+
+---
+
+## API Reference
+
+### `<AxiomEditor />`
+Out-of-the-box wrapper for ease-of-use.
+- `initialContent`: `string | JSONContent` - Initial document value.
+- `onChange`: `(json: JSONContent, html: string) => void` - Triggers when text changes.
+- `uploadImage`: `(file: File) => Promise<string>` - Async hook for uploading images.
+
+### `<AxiomEditorProvider />`
+Manages Tiptap instances and state. Essential for modular composition.
+
+### `<AxiomContent />`
+The text editing canvas. Automatically handles text scrolling and caps at 650px.
+
+### `<AxiomToolbar />`
+The responsive text formatting and media-insertion toolbar.
+
+### `<AxiomJSONRenderer />`
+A fast React component to render serialized Tiptap JSON AST directly to elements.
+
+---
+
+## License
+
+MIT © Axiom Editor Team