@crashbytes/contentful-richtext-editor 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,291 @@
+# @crashbytes/contentful-richtext-editor
+
+A modern, Tiptap-based rich text editor that's fully compatible with Contentful's rich text format. Provides the same editing experience as Contentful's native editor while maintaining perfect compatibility with Contentful's document structure.
+
+## Features
+
+✅ **Full Contentful Compatibility** - Seamless conversion between Contentful and Tiptap formats  
+✅ **Modern UI** - Clean, intuitive interface matching Contentful's design  
+✅ **TypeScript Support** - Complete type safety with Contentful's rich text types  
+✅ **Extensible** - Built on Tiptap v2 for easy customization  
+✅ **Lightweight** - Tree-shakeable, only import what you need  
+✅ **Responsive** - Works on desktop and mobile devices  
+
+## Supported Features
+
+- **Text Formatting**: Bold, italic, underline
+- **Headings**: H1 through H6
+- **Lists**: Ordered and unordered lists
+- **Links**: Hyperlinks with URL validation
+- **Tables**: Full table support with headers
+- **Quotes**: Blockquotes
+- **Embedded Content**: Callbacks for Contentful entries and assets
+- **Undo/Redo**: Full history support
+
+## Installation
+
+```bash
+npm install @crashbytes/contentful-richtext-editor
+```
+
+## Basic Usage
+
+```tsx
+import React, { useState } from 'react';
+import { ContentfulRichTextEditor } from '@crashbytes/contentful-richtext-editor';
+import '@crashbytes/contentful-richtext-editor/dist/index.css';
+import { Document } from '@contentful/rich-text-types';
+
+function App() {
+  const [content, setContent] = useState<Document>();
+
+  const handleChange = (document: Document) => {
+    setContent(document);
+    console.log('Contentful document:', document);
+  };
+
+  return (
+    <div>
+      <h1>My Rich Text Editor</h1>
+      <ContentfulRichTextEditor
+        placeholder="Start writing your content..."
+        onChange={handleChange}
+        initialValue={content}
+      />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Advanced Usage
+
+### With Contentful Entry/Asset Embedding
+
+```tsx
+import { ContentfulRichTextEditor } from '@crashbytes/contentful-richtext-editor';
+import '@crashbytes/contentful-richtext-editor/dist/index.css';
+
+function ContentfulEditor() {
+  const handleEmbedEntry = async () => {
+    // Your logic to select a Contentful entry
+    const entry = await openEntrySelector();
+    return entry;
+  };
+
+  const handleEmbedAsset = async () => {
+    // Your logic to select a Contentful asset
+    const asset = await openAssetSelector();
+    return asset;
+  };
+
+  return (
+    <ContentfulRichTextEditor
+      placeholder="Write your travel tip..."
+      onChange={(doc) => saveToContentful(doc)}
+      onEmbedEntry={handleEmbedEntry}
+      onEmbedAsset={handleEmbedAsset}
+      theme="contentful"
+    />
+  );
+}
+```
+
+### Customizing Features
+
+```tsx
+<ContentfulRichTextEditor
+  placeholder="Simple editor..."
+  disabledFeatures={['table', 'embed', 'quote']}
+  theme="minimal"
+  readonly={false}
+  onChange={handleChange}
+/>
+```
+
+### With Initial Content
+
+```tsx
+import { createEmptyDocument } from '@crashbytes/contentful-richtext-editor';
+
+const initialContent = {
+  nodeType: 'document',
+  data: {},
+  content: [
+    {
+      nodeType: 'paragraph',
+      data: {},
+      content: [
+        {
+          nodeType: 'text',
+          value: 'Hello world!',
+          marks: [{ type: 'bold' }],
+          data: {}
+        }
+      ]
+    }
+  ]
+};
+
+<ContentfulRichTextEditor
+  initialValue={initialContent}
+  onChange={handleChange}
+/>
+```
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `initialValue` | `Document` | `undefined` | Initial Contentful rich text document |
+| `onChange` | `(document: Document) => void` | `undefined` | Callback when content changes |
+| `onEmbedEntry` | `() => Promise<any> \| void` | `undefined` | Callback for embedding Contentful entries |
+| `onEmbedAsset` | `() => Promise<any> \| void` | `undefined` | Callback for embedding Contentful assets |
+| `placeholder` | `string` | `'Start writing...'` | Placeholder text |
+| `readonly` | `boolean` | `false` | Whether editor is read-only |
+| `className` | `string` | `''` | Additional CSS classes |
+| `theme` | `'default' \| 'minimal' \| 'contentful'` | `'contentful'` | Visual theme |
+| `disabledFeatures` | `Array<string>` | `[]` | Features to disable |
+
+### Disabled Features
+
+You can disable specific features by passing them in the `disabledFeatures` array:
+
+- `'bold'` - Bold text formatting
+- `'italic'` - Italic text formatting  
+- `'underline'` - Underline text formatting
+- `'link'` - Hyperlinks
+- `'lists'` - Ordered and unordered lists
+- `'headings'` - All heading levels
+- `'quote'` - Blockquotes
+- `'table'` - Tables
+- `'embed'` - Embedded content
+
+### Utility Functions
+
+```tsx
+import { 
+  contentfulToTiptap, 
+  tiptapToContentful,
+  validateContentfulDocument,
+  createEmptyDocument 
+} from '@crashbytes/contentful-richtext-editor';
+
+// Convert between formats
+const tiptapJson = contentfulToTiptap(contentfulDocument);
+const contentfulDoc = tiptapToContentful(tiptapJson);
+
+// Validation
+const isValid = validateContentfulDocument(someDocument);
+
+// Create empty document
+const emptyDoc = createEmptyDocument();
+```
+
+## Styling
+
+The editor comes with default styles that match Contentful's design. Import the CSS:
+
+```tsx
+import '@crashbytes/contentful-richtext-editor/dist/index.css';
+```
+
+### Custom Styling
+
+You can override the default styles by targeting the CSS classes:
+
+```css
+.contentful-editor {
+  border: 2px solid #your-color;
+}
+
+.contentful-toolbar {
+  background: #your-background;
+}
+
+.contentful-editor-content {
+  font-family: 'Your Font', sans-serif;
+}
+```
+
+## Themes
+
+### Contentful Theme (Default)
+Matches Contentful's native editor appearance.
+
+### Minimal Theme
+Clean, minimal design with reduced visual elements.
+
+### Default Theme  
+Standard rich text editor appearance with serif fonts.
+
+## Integration with Next.js
+
+```tsx
+// pages/editor.tsx or app/editor/page.tsx
+import dynamic from 'next/dynamic';
+
+const ContentfulEditor = dynamic(
+  () => import('@crashbytes/contentful-richtext-editor').then(mod => mod.ContentfulRichTextEditor),
+  { ssr: false }
+);
+
+export default function EditorPage() {
+  return (
+    <div>
+      <ContentfulEditor
+        placeholder="Write something amazing..."
+        onChange={(doc) => console.log(doc)}
+      />
+    </div>
+  );
+}
+```
+
+## TypeScript Support
+
+This package is written in TypeScript and includes full type definitions. All Contentful rich text types are re-exported for convenience:
+
+```tsx
+import type { 
+  Document, 
+  Block, 
+  Inline, 
+  Text,
+  ContentfulRichTextEditorProps 
+} from '@crashbytes/contentful-richtext-editor';
+```
+
+## Browser Support
+
+- Chrome 80+
+- Firefox 78+
+- Safari 13+
+- Edge 80+
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## License
+
+MIT © [CrashBytes](https://github.com/CrashBytes)
+
+## Related Packages
+
+- [@contentful/rich-text-react-renderer](https://www.npmjs.com/package/@contentful/rich-text-react-renderer) - For rendering Contentful rich text
+- [@contentful/rich-text-types](https://www.npmjs.com/package/@contentful/rich-text-types) - Contentful rich text type definitions
+- [@tiptap/react](https://www.npmjs.com/package/@tiptap/react) - The underlying editor framework
+
+---
+
+**Made with ❤️ for the Contentful community**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crashbytes/contentful-richtext-editor",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A Tiptap-based rich text editor compatible with Contentful's rich text format",
   "type": "module",
   "main": "dist/index.js",