@crashbytes/contentful-richtext-editor 1.0.2 → 1.0.3

package/README.md

@@ -4,12 +4,12 @@ A modern, Tiptap-based rich text editor that's fully compatible with Contentful'
 
 ## 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  
+- ✅ **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
 
@@ -24,115 +24,105 @@ A modern, Tiptap-based rich text editor that's fully compatible with Contentful'
 
 ## Installation
 
-```bash
-npm install @crashbytes/contentful-richtext-editor
-```
+    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;
-```
+    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;
-  };
+    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"
+        />
+      );
+    }
 
-  const handleEmbedAsset = async () => {
-    // Your logic to select a Contentful asset
-    const asset = await openAssetSelector();
-    return asset;
-  };
+### Customizing Features
 
-  return (
     <ContentfulRichTextEditor
-      placeholder="Write your travel tip..."
-      onChange={(doc) => saveToContentful(doc)}
-      onEmbedEntry={handleEmbedEntry}
-      onEmbedAsset={handleEmbedAsset}
-      theme="contentful"
+      placeholder="Simple editor..."
+      disabledFeatures={['table', 'embed', 'quote']}
+      theme="minimal"
+      readonly={false}
+      onChange={handleChange}
     />
-  );
-}
-```
-
-### 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';
+    import { createEmptyDocument } from '@crashbytes/contentful-richtext-editor';
 
-const initialContent = {
-  nodeType: 'document',
-  data: {},
-  content: [
-    {
-      nodeType: 'paragraph',
+    const initialContent = {
+      nodeType: 'document',
       data: {},
       content: [
         {
-          nodeType: 'text',
-          value: 'Hello world!',
-          marks: [{ type: 'bold' }],
-          data: {}
+          nodeType: 'paragraph',
+          data: {},
+          content: [
+            {
+              nodeType: 'text',
+              value: 'Hello world!',
+              marks: [{ type: 'bold' }],
+              data: {}
+            }
+          ]
         }
       ]
-    }
-  ]
-};
+    };
 
-<ContentfulRichTextEditor
-  initialValue={initialContent}
-  onChange={handleChange}
-/>
-```
+    <ContentfulRichTextEditor
+      initialValue={initialContent}
+      onChange={handleChange}
+    />
 
 ## API Reference
 
@@ -166,50 +156,44 @@ You can disable specific features by passing them in the `disabledFeatures` arra
 
 ### Utility Functions
 
-```tsx
-import { 
-  contentfulToTiptap, 
-  tiptapToContentful,
-  validateContentfulDocument,
-  createEmptyDocument 
-} from '@crashbytes/contentful-richtext-editor';
+    import { 
+      contentfulToTiptap, 
+      tiptapToContentful,
+      validateContentfulDocument,
+      createEmptyDocument 
+    } from '@crashbytes/contentful-richtext-editor';
 
-// Convert between formats
-const tiptapJson = contentfulToTiptap(contentfulDocument);
-const contentfulDoc = tiptapToContentful(tiptapJson);
+    // Convert between formats
+    const tiptapJson = contentfulToTiptap(contentfulDocument);
+    const contentfulDoc = tiptapToContentful(tiptapJson);
 
-// Validation
-const isValid = validateContentfulDocument(someDocument);
+    // Validation
+    const isValid = validateContentfulDocument(someDocument);
 
-// Create empty document
-const emptyDoc = createEmptyDocument();
-```
+    // 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';
-```
+    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-editor {
+      border: 2px solid #your-color;
+    }
 
-.contentful-toolbar {
-  background: #your-background;
-}
+    .contentful-toolbar {
+      background: #your-background;
+    }
 
-.contentful-editor-content {
-  font-family: 'Your Font', sans-serif;
-}
-```
+    .contentful-editor-content {
+      font-family: 'Your Font', sans-serif;
+    }
 
 ## Themes
 
@@ -224,40 +208,36 @@ 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>
-  );
-}
-```
+    // 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';
-```
+    import type { 
+      Document, 
+      Block, 
+      Inline, 
+      Text,
+      ContentfulRichTextEditorProps 
+    } from '@crashbytes/contentful-richtext-editor';
 
 ## Browser Support
 

package/package.json

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