@crashbytes/contentful-richtext-editor 2.0.5 → 3.0.0

package/README.md

@@ -1,39 +1,46 @@
-# Contentful Rich Text Editor
+# @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.
+[![npm version](https://img.shields.io/npm/v/@crashbytes/contentful-richtext-editor.svg)](https://www.npmjs.com/package/@crashbytes/contentful-richtext-editor)
+[![npm downloads](https://img.shields.io/npm/dm/@crashbytes/contentful-richtext-editor.svg)](https://www.npmjs.com/package/@crashbytes/contentful-richtext-editor)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Security Audit](https://github.com/CrashBytes/contentful-richtext-editor/actions/workflows/security-audit.yml/badge.svg)](https://github.com/CrashBytes/contentful-richtext-editor/actions/workflows/security-audit.yml)
+[![React Compatibility](https://github.com/CrashBytes/contentful-richtext-editor/actions/workflows/react-compat.yml/badge.svg)](https://github.com/CrashBytes/contentful-richtext-editor/actions/workflows/react-compat.yml)
+[![npm package provenance](https://img.shields.io/badge/provenance-tracked-brightgreen)](https://www.npmjs.com/package/@crashbytes/contentful-richtext-editor)
+
+A modern, Tiptap v3-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.
+
+## 🔒 Security & Trust
+
+- ✅ **Zero Known Vulnerabilities** - Automated security audits via Dependabot
+- ✅ **Supply Chain Security** - Package published with npm provenance via Trusted Publishing
+- ✅ **CodeQL Analysis** - Continuous security scanning for vulnerabilities
+- ✅ **React 18 & 19 Compatible** - Automated compatibility testing
+- ✅ **Dependency Review** - Automated PR checks for vulnerable dependencies
+
+See our [Security Policy](SECURITY.md) for vulnerability reporting.
 
 ## ✨ Features
 
 - ✅ **Full Contentful Compatibility** - Seamless conversion between Contentful and Tiptap formats
-- ✅ **Automatic Configuration** - Reads Contentful field settings to auto-configure the editor *(NEW in v2.0)*
-- ✅ **Modern UI** - Clean, intuitive interface matching Contentful's design  
+- ✅ **Tiptap v3** - Built on the latest Tiptap v3 for better performance
+- ✅ **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
+- ✅ **Extensible** - Built on Tiptap v3 for easy customization
 - ✅ **Lightweight** - Tree-shakeable, only import what you need
 - ✅ **Responsive** - Works on desktop and mobile devices
-- ✅ **Keyboard Shortcuts** - Built-in shortcuts for common actions *(NEW in v2.0)*
-
-### 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
-- **Inline Entries**: Support for inline embedded entries *(NEW in v2.0)*
-- **Undo/Redo**: Full history support
+- ✅ **Optional Border Control** - Customize editor appearance with `showBorder` prop
 
-## 📦 Installation
+## 🚀 Installation
 
 ```bash
 npm install @crashbytes/contentful-richtext-editor
 ```
 
-## 🚀 Quick Start
+**Peer Dependencies:**
+- React 18.3.1+ or React 19.x
+- React DOM 18.3.1+ or React 19.x
 
-### Basic Usage
+## 📖 Quick Start
 
 ```tsx
 import React, { useState } from 'react';
@@ -56,6 +63,7 @@ function App() {
         placeholder="Start writing your content..."
         onChange={handleChange}
         initialValue={content}
+        showBorder={true} // Optional: control border visibility
       />
     </div>
   );
@@ -64,41 +72,55 @@ function App() {
 export default App;
 ```
 
-### Automatic Configuration (NEW in v2.0)
+## 🎨 Border Control
 
-The editor can automatically configure itself based on your Contentful field settings:
+Control the editor's border appearance with the `showBorder` prop:
 
 ```tsx
-import { 
-  ContentfulRichTextEditor,
-  fetchContentfulFieldConfig 
-} from '@crashbytes/contentful-richtext-editor';
-import '@crashbytes/contentful-richtext-editor/dist/index.css';
+// Default - with border (backward compatible)
+<ContentfulRichTextEditor />
 
-function AutoConfiguredEditor() {
-  const [fieldConfig, setFieldConfig] = useState();
+// Borderless editor for custom layouts
+<ContentfulRichTextEditor 
+  showBorder={false}
+  className="my-custom-editor"
+/>
 
-  useEffect(() => {
-    // Fetch configuration from Contentful Management API
-    fetchContentfulFieldConfig(
-      'your-space-id',
-      'your-content-type-id', 
-      'your-field-id',
-      'your-management-token'
-    ).then(setFieldConfig);
-  }, []);
+// Themed borderless editor
+<ContentfulRichTextEditor 
+  showBorder={false}
+  theme="minimal"
+/>
+```
 
-  return (
-    <ContentfulRichTextEditor
-      fieldConfiguration={fieldConfig}
-      placeholder="Auto-configured based on Contentful settings!"
-      onChange={handleChange}
-    />
-  );
+### Custom Styling with Borderless Mode
+
+```css
+/* Custom styling for borderless editor */
+.my-custom-editor {
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  border-radius: 8px;
+}
+
+.my-custom-editor .contentful-toolbar {
+  background: linear-gradient(45deg, #667eea, #764ba2);
 }
 ```
 
-### Advanced Usage with Embeds
+## 🎯 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
+
+## 🔧 Advanced Usage
+
+### With Contentful Integration
 
 ```tsx
 import { ContentfulRichTextEditor } from '@crashbytes/contentful-richtext-editor';
@@ -112,31 +134,25 @@ function ContentfulEditor() {
   };
 
   const handleEmbedAsset = async () => {
-    // Your logic to select a Contentful asset  
+    // Your logic to select a Contentful asset
     const asset = await openAssetSelector();
     return asset;
   };
 
-  const handleEmbedInlineEntry = async () => {
-    // NEW v2.0 - Your logic to select an inline entry
-    const entry = await openInlineEntrySelector();
-    return entry;
-  };
-
   return (
     <ContentfulRichTextEditor
       placeholder="Write your travel tip..."
       onChange={(doc) => saveToContentful(doc)}
       onEmbedEntry={handleEmbedEntry}
       onEmbedAsset={handleEmbedAsset}
-      onEmbedInlineEntry={handleEmbedInlineEntry}
       theme="contentful"
+      showBorder={true}
     />
   );
 }
 ```
 
-### Minimal Configuration
+### Customized Editor
 
 ```tsx
 <ContentfulRichTextEditor
@@ -149,58 +165,25 @@ function ContentfulEditor() {
 />
 ```
 
-### 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
-
-### ContentfulRichTextEditor Props
+## 📋 Props Reference
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `availableHeadings` | `Array<1\|2\|3\|4\|5\|6>` | `[1,2,3,4,5,6]` | Available heading levels (fallback when no fieldConfiguration) |
-| `availableMarks` | `Array<'bold'\|'italic'\|'underline'>` | `['bold','italic','underline']` | Available text formatting marks (fallback when no fieldConfiguration) |
-| `className` | `string` | `''` | Additional CSS classes |
-| `disabledFeatures` | `Array<string>` | `[]` | Features to disable |
-| `fieldConfiguration` | `ContentfulFieldConfiguration` | `undefined` | **NEW v2.0** - Contentful field validation config (takes precedence over manual settings) |
+| `showBorder` | `boolean` | `true` | Control editor border visibility |
 | `initialValue` | `Document` | `undefined` | Initial Contentful rich text document |
 | `onChange` | `(document: Document) => void` | `undefined` | Callback when content changes |
-| `onEmbedAsset` | `() => Promise<any> \| void` | `undefined` | Callback for embedding Contentful assets |
 | `onEmbedEntry` | `() => Promise<any> \| void` | `undefined` | Callback for embedding Contentful entries |
-| `onEmbedInlineEntry` | `() => Promise<any> \| void` | `undefined` | **NEW v2.0** - Callback for embedding inline entries |
+| `onEmbedAsset` | `() => Promise<any> \| void` | `undefined` | Callback for embedding Contentful assets |
+| `onEmbedInlineEntry` | `() => Promise<any> \| void` | `undefined` | Callback for embedding inline entries |
 | `placeholder` | `string` | `'Start writing...'` | Placeholder text |
 | `readonly` | `boolean` | `false` | Whether editor is read-only |
-| `showBorder` | `boolean` | `true` | Whether to show border around the editor |
+| `className` | `string` | `''` | Additional CSS classes |
 | `theme` | `'default' \| 'minimal' \| 'contentful'` | `'contentful'` | Visual theme |
+| `disabledFeatures` | `Array<string>` | `[]` | Features to disable |
+| `availableHeadings` | `Array<1 \| 2 \| 3 \| 4 \| 5 \| 6>` | `[1,2,3,4,5,6]` | Available heading levels |
+| `availableMarks` | `Array<'bold' \| 'italic' \| 'underline'>` | `['bold','italic','underline']` | Available text formatting |
 
-### Disabled Features
+## 🚫 Disabling Features
 
 You can disable specific features by passing them in the `disabledFeatures` array:
 
@@ -214,20 +197,6 @@ You can disable specific features by passing them in the `disabledFeatures` arra
 - `'table'` - Tables
 - `'embed'` - Embedded content
 
-### Configuration Types (NEW v2.0)
-
-```tsx
-interface ContentfulFieldConfiguration {
-  validations?: Array<{
-    enabledMarks?: string[];        // ['bold', 'italic', 'underline', 'code']
-    enabledNodeTypes?: string[];    // ['paragraph', 'heading-1', 'unordered-list', ...]
-  }>;
-  settings?: {
-    helpText?: string;
-  };
-}
-```
-
 ## 🛠️ Utility Functions
 
 ```tsx
@@ -236,47 +205,23 @@ import {
   tiptapToContentful,
   validateContentfulDocument,
   createEmptyDocument,
-  extractPlainText,        // NEW v2.0
-  countWords,             // NEW v2.0
-  findEmbeddedContent,    // NEW v2.0
-  sanitizeContentfulDocument // NEW v2.0
+  extractPlainText,
+  countWords,
+  findEmbeddedContent
 } from '@crashbytes/contentful-richtext-editor';
 
 // Convert between formats
 const tiptapJson = contentfulToTiptap(contentfulDocument);
 const contentfulDoc = tiptapToContentful(tiptapJson);
 
-// Validation
+// Validation and utilities
 const isValid = validateContentfulDocument(someDocument);
-
-// Create empty document
 const emptyDoc = createEmptyDocument();
-
-// NEW v2.0 - Content analysis
-const plainText = extractPlainText(contentfulDocument);
-const wordCount = countWords(contentfulDocument);
-const embedded = findEmbeddedContent(contentfulDocument);
-
-// NEW v2.0 - Sanitize content
-const sanitized = sanitizeContentfulDocument(
-  document,
-  ['paragraph', 'heading-1', 'unordered-list'], // allowed nodes
-  ['bold', 'italic'] // allowed marks
-);
+const plainText = extractPlainText(document);
+const wordCount = countWords(document);
+const embedded = findEmbeddedContent(document);
 ```
 
-## ⌨️ Keyboard Shortcuts (NEW v2.0)
-
-- `Cmd/Ctrl + B` - Bold
-- `Cmd/Ctrl + I` - Italic
-- `Cmd/Ctrl + U` - Underline
-- `Cmd/Ctrl + K` - Add/edit link
-- `Cmd/Ctrl + Shift + E` - Embed entry
-- `Cmd/Ctrl + Shift + A` - Embed asset
-- `Cmd/Ctrl + Shift + I` - Embed inline entry
-- `Cmd/Ctrl + Z` - Undo
-- `Cmd/Ctrl + Y` / `Cmd/Ctrl + Shift + Z` - Redo
-
 ## 🎨 Styling
 
 The editor comes with default styles that match Contentful's design. Import the CSS:
@@ -285,6 +230,8 @@ The editor comes with default styles that match Contentful's design. Import the
 import '@crashbytes/contentful-richtext-editor/dist/index.css';
 ```
 
+### Custom Styling
+
 You can override the default styles by targeting the CSS classes:
 
 ```css
@@ -300,27 +247,25 @@ You can override the default styles by targeting the CSS classes:
   font-family: 'Your Font', sans-serif;
 }
 
-/* NEW v2.0 - Inline entries */
-.contentful-inline-embedded-entry {
-  background: #e8f4fd;
-  padding: 2px 4px;
-  border-radius: 3px;
-  font-weight: 600;
+/* Borderless editor styling */
+.contentful-editor--borderless {
+  border: none;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 }
 ```
 
 ### Themes
 
-**`contentful`** (default)  
+**Contentful** (default)
 Matches Contentful's native editor appearance.
 
-**`minimal`**  
+**Minimal**  
 Clean, minimal design with reduced visual elements.
 
-**`default`**  
+**Default**
 Standard rich text editor appearance with serif fonts.
 
-## ⚛️ Next.js Integration
+## 🌐 Next.js Usage
 
 ```tsx
 // pages/editor.tsx or app/editor/page.tsx
@@ -337,13 +282,14 @@ export default function EditorPage() {
       <ContentfulEditor
         placeholder="Write something amazing..."
         onChange={(doc) => console.log(doc)}
+        showBorder={false}
       />
     </div>
   );
 }
 ```
 
-## 🔷 TypeScript Support
+## 📝 TypeScript Support
 
 This package is written in TypeScript and includes full type definitions. All Contentful rich text types are re-exported for convenience:
 
@@ -353,9 +299,7 @@ import type {
   Block,
   Inline,
   Text,
-  ContentfulRichTextEditorProps,
-  ContentfulFieldConfiguration,    // NEW v2.0
-  ParsedEditorConfig              // NEW v2.0
+  ContentfulRichTextEditorProps
 } from '@crashbytes/contentful-richtext-editor';
 ```
 
@@ -366,6 +310,51 @@ import type {
 - Safari 13+
 - Edge 80+
 
+## 🔄 Migration
+
+### From v2.x to v3.0.0
+
+**Good News:** The public API is unchanged! Upgrade with no code changes:
+
+```bash
+npm install @crashbytes/contentful-richtext-editor@latest
+```
+
+Your existing code continues to work:
+
+```tsx
+// This still works exactly the same
+<ContentfulRichTextEditor
+  placeholder="Start writing..."
+  onChange={handleChange}
+  initialValue={content}
+/>
+```
+
+**What Changed:** Internal upgrade to Tiptap v3 provides:
+- Better performance
+- Improved mobile support
+- Enhanced transaction handling
+- More efficient rendering
+
+See [CHANGELOG.md](CHANGELOG.md) for complete details.
+
+### From v2.0.3 to v2.0.4+
+No breaking changes! Simply update and optionally use the new `showBorder` prop.
+
+## 🔒 Security
+
+We take security seriously. This package:
+
+- ✅ **Automated Security Audits** - Weekly npm audit via GitHub Actions
+- ✅ **Dependabot** - Automated dependency updates for security patches
+- ✅ **CodeQL Analysis** - Advanced security vulnerability scanning
+- ✅ **Dependency Review** - Automated checks on every PR
+- ✅ **Trusted Publishing** - Package published with cryptographic provenance
+- ✅ **Supply Chain Verification** - npm provenance proves package source
+
+**Found a vulnerability?** Please report it via our [Security Policy](SECURITY.md).
+
 ## 🤝 Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.
@@ -376,6 +365,12 @@ Contributions are welcome! Please feel free to submit a Pull Request.
 4. Push to the branch (`git push origin feature/amazing-feature`)
 5. Open a Pull Request
 
+All PRs automatically run:
+- Security audits
+- Dependency vulnerability checks
+- React 18 & 19 compatibility tests
+- Full test suite (175 tests)
+
 ## 📄 License
 
 MIT © [CrashBytes](https://github.com/CrashBytes)
@@ -384,8 +379,17 @@ MIT © [CrashBytes](https://github.com/CrashBytes)
 
 - [@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
+- [@tiptap/react](https://www.npmjs.com/package/@tiptap/react) - The underlying editor framework (v3)
+
+## 📈 Version History
+
+- **v3.0.0** - Upgraded to Tiptap v3.15.3, added security enhancements
+- **v2.0.6** - Dependency updates, bug fixes
+- **v2.0.4** - Added optional border control with `showBorder` prop
+- **v2.0.3** - Package made publicly accessible
+- **v2.0.0** - Major feature update with automatic configuration
+- **v1.x** - Initial releases
 
 ---
 
-Made with ❤️ for the Contentful community
+Made with ❤️ for the Contentful community