Package Exports

@crashbytes/contentful-richtext-editor
@crashbytes/contentful-richtext-editor/dist/index.esm.js
@crashbytes/contentful-richtext-editor/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@crashbytes/contentful-richtext-editor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Contentful Rich Text 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
✅ Automatic Configuration - Reads Contentful field settings to auto-configure the editor (NEW in v2.0)
✅ 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
✅ 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

📦 Installation

npm install @crashbytes/contentful-richtext-editor

🚀 Quick Start

Basic Usage

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;

Automatic Configuration (NEW in v2.0)

The editor can automatically configure itself based on your Contentful field settings:

import { 
  ContentfulRichTextEditor,
  fetchContentfulFieldConfig 
} from '@crashbytes/contentful-richtext-editor';
import '@crashbytes/contentful-richtext-editor/dist/index.css';

function AutoConfiguredEditor() {
  const [fieldConfig, setFieldConfig] = useState();

  useEffect(() => {
    // Fetch configuration from Contentful Management API
    fetchContentfulFieldConfig(
      'your-space-id',
      'your-content-type-id', 
      'your-field-id',
      'your-management-token'
    ).then(setFieldConfig);
  }, []);

  return (
    <ContentfulRichTextEditor
      fieldConfiguration={fieldConfig}
      placeholder="Auto-configured based on Contentful settings!"
      onChange={handleChange}
    />
  );
}

Advanced Usage with Embeds

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;
  };

  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"
    />
  );
}

Minimal Configuration

<ContentfulRichTextEditor
  placeholder="Simple editor..."
  disabledFeatures={['table', 'embed', 'quote']}
  theme="minimal"
  readonly={false}
  showBorder={false}
  onChange={handleChange}
/>

With Initial Content

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