@crashbytes/contentful-richtext-editor 1.0.2 → 1.0.5

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,22 +24,22 @@ A modern, Tiptap-based rich text editor that's fully compatible with Contentful'
 
 ## Installation
 
-```bash
+```
 npm install @crashbytes/contentful-richtext-editor
 ```
 
 ## Basic Usage
 
-```tsx
+```javascript
 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 [content, setContent] = useState();
 
-  const handleChange = (document: Document) => {
+  const handleChange = (document) => {
     setContent(document);
     console.log('Contentful document:', document);
   };
@@ -63,7 +63,7 @@ export default App;
 
 ### With Contentful Entry/Asset Embedding
 
-```tsx
+```javascript
 import { ContentfulRichTextEditor } from '@crashbytes/contentful-richtext-editor';
 import '@crashbytes/contentful-richtext-editor/dist/index.css';
 
@@ -94,7 +94,7 @@ function ContentfulEditor() {
 
 ### Customizing Features
 
-```tsx
+```javascript
 <ContentfulRichTextEditor
   placeholder="Simple editor..."
   disabledFeatures={['table', 'embed', 'quote']}
@@ -104,9 +104,20 @@ function ContentfulEditor() {
 />
 ```
 
+### Controlling Available Headings and Formatting
+
+```javascript
+<ContentfulRichTextEditor
+  placeholder="Limited editor..."
+  availableHeadings={[1, 2, 3]}  // Only H1, H2, H3
+  availableMarks={['bold', 'italic']}  // Only bold and italic, no underline
+  onChange={handleChange}
+/>
+```
+
 ### With Initial Content
 
-```tsx
+```javascript
 import { createEmptyDocument } from '@crashbytes/contentful-richtext-editor';
 
 const initialContent = {
@@ -149,6 +160,8 @@ const initialContent = {
 | `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]` | Which heading levels to show |
+| `availableMarks` | `Array<'bold'\|'italic'\|'underline'>` | `['bold','italic','underline']` | Which text formatting options to show |
 
 ### Disabled Features
 
@@ -166,7 +179,7 @@ You can disable specific features by passing them in the `disabledFeatures` arra
 
 ### Utility Functions
 
-```tsx
+```javascript
 import { 
   contentfulToTiptap, 
   tiptapToContentful,
@@ -189,7 +202,7 @@ const emptyDoc = createEmptyDocument();
 
 The editor comes with default styles that match Contentful's design. Import the CSS:
 
-```tsx
+```javascript
 import '@crashbytes/contentful-richtext-editor/dist/index.css';
 ```
 
@@ -224,7 +237,7 @@ Standard rich text editor appearance with serif fonts.
 
 ## Integration with Next.js
 
-```tsx
+```javascript
 // pages/editor.tsx or app/editor/page.tsx
 import dynamic from 'next/dynamic';
 
@@ -249,7 +262,7 @@ export default function EditorPage() {
 
 This package is written in TypeScript and includes full type definitions. All Contentful rich text types are re-exported for convenience:
 
-```tsx
+```javascript
 import type { 
   Document, 
   Block, 

package/dist/components/ContentfulEditor.d.ts

@@ -20,6 +20,10 @@ export interface ContentfulRichTextEditorProps {
     disabledFeatures?: Array<'bold' | 'italic' | 'underline' | 'link' | 'lists' | 'headings' | 'quote' | 'table' | 'embed'>;
     /** Custom styling options */
     theme?: 'default' | 'minimal' | 'contentful';
+    /** Which heading levels to make available (1-6) */
+    availableHeadings?: Array<1 | 2 | 3 | 4 | 5 | 6>;
+    /** Which text formatting marks to make available */
+    availableMarks?: Array<'bold' | 'italic' | 'underline'>;
 }
 export declare const ContentfulRichTextEditor: React.FC<ContentfulRichTextEditorProps>;
 export default ContentfulRichTextEditor;

package/dist/components/Toolbar.d.ts

@@ -5,6 +5,8 @@ interface ToolbarProps {
     onEmbedEntry?: () => void;
     onEmbedAsset?: () => void;
     disabledFeatures?: Array<string>;
+    availableHeadings?: Array<1 | 2 | 3 | 4 | 5 | 6>;
+    availableMarks?: Array<'bold' | 'italic' | 'underline'>;
 }
 export declare const ContentfulToolbar: React.FC<ToolbarProps>;
 export {};

package/dist/index.esm.js

@@ -26529,10 +26529,11 @@ const Underline = Mark.create({
     },
 });
 
-const ContentfulToolbar = ({ editor, onEmbedEntry, onEmbedAsset, disabledFeatures = [] }) => {
+const ContentfulToolbar = ({ editor, onEmbedEntry, onEmbedAsset, disabledFeatures = [], availableHeadings = [1, 2, 3, 4, 5, 6], availableMarks = ['bold', 'italic', 'underline'] }) => {
     const [showLinkInput, setShowLinkInput] = useState(false);
     const [linkUrl, setLinkUrl] = useState('');
     const isDisabled = (feature) => disabledFeatures.includes(feature);
+    const isMarkAvailable = (mark) => availableMarks.includes(mark);
     const handleHeadingChange = (level) => {
         if (level === 0) {
             editor.chain().focus().setParagraph().run();
@@ -26561,14 +26562,15 @@ const ContentfulToolbar = ({ editor, onEmbedEntry, onEmbedAsset, disabledFeature
         editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
     };
     const getActiveHeading = () => {
-        for (let i = 1; i <= 6; i++) {
-            if (editor.isActive('heading', { level: i })) {
-                return `Heading ${i}`;
+        for (const level of availableHeadings) {
+            if (editor.isActive('heading', { level })) {
+                return `Heading ${level}`;
             }
         }
         return 'Normal text';
     };
-    return (jsxs("div", { className: "contentful-toolbar", children: [jsxs("div", { className: "contentful-toolbar__group", children: [!isDisabled('headings') && (jsxs("select", { className: "contentful-toolbar__select", value: getActiveHeading(), onChange: (e) => {
+    const hasHeadings = !isDisabled('headings') && availableHeadings.length > 0;
+    return (jsxs("div", { className: "contentful-toolbar", children: [jsxs("div", { className: "contentful-toolbar__group", children: [hasHeadings && (jsxs("select", { className: "contentful-toolbar__select", value: getActiveHeading(), onChange: (e) => {
                             const value = e.target.value;
                             if (value === 'Normal text') {
                                 handleHeadingChange(0);
@@ -26577,7 +26579,7 @@ const ContentfulToolbar = ({ editor, onEmbedEntry, onEmbedAsset, disabledFeature
                                 const level = parseInt(value.replace('Heading ', ''));
                                 handleHeadingChange(level);
                             }
-                        }, children: [jsx("option", { value: "Normal text", children: "Normal text" }), jsx("option", { value: "Heading 1", children: "Heading 1" }), jsx("option", { value: "Heading 2", children: "Heading 2" }), jsx("option", { value: "Heading 3", children: "Heading 3" }), jsx("option", { value: "Heading 4", children: "Heading 4" }), jsx("option", { value: "Heading 5", children: "Heading 5" }), jsx("option", { value: "Heading 6", children: "Heading 6" })] })), jsx("button", { className: "contentful-toolbar__button", onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: "Undo", children: "\u21B6" }), jsx("button", { className: "contentful-toolbar__button", onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: "Redo", children: "\u21B7" })] }), jsx("div", { className: "contentful-toolbar__separator" }), jsxs("div", { className: "contentful-toolbar__group", children: [!isDisabled('bold') && (jsx("button", { className: `contentful-toolbar__button ${editor.isActive('bold') ? 'contentful-toolbar__button--active' : ''}`, onClick: () => editor.chain().focus().toggleBold().run(), title: "Bold", children: jsx("strong", { children: "B" }) })), !isDisabled('italic') && (jsx("button", { className: `contentful-toolbar__button ${editor.isActive('italic') ? 'contentful-toolbar__button--active' : ''}`, onClick: () => editor.chain().focus().toggleItalic().run(), title: "Italic", children: jsx("em", { children: "I" }) })), !isDisabled('underline') && (jsx("button", { className: `contentful-toolbar__button ${editor.isActive('underline') ? 'contentful-toolbar__button--active' : ''}`, onClick: () => editor.chain().focus().toggleUnderline().run(), title: "Underline", children: jsx("u", { children: "U" }) })), jsx("button", { className: "contentful-toolbar__button", title: "More formatting options", children: "\u22EF" }), !isDisabled('link') && (jsxs(Fragment$1, { children: [jsx("button", { className: `contentful-toolbar__button ${editor.isActive('link') ? 'contentful-toolbar__button--active' : ''}`, onClick: handleLinkToggle, title: "Link", children: "\uD83D\uDD17" }), showLinkInput && (jsxs("div", { className: "contentful-toolbar__link-input", children: [jsx("input", { type: "url", value: linkUrl, onChange: (e) => setLinkUrl(e.target.value), placeholder: "Enter URL", onKeyDown: (e) => {
+                        }, children: [jsx("option", { value: "Normal text", children: "Normal text" }), availableHeadings.map(level => (jsxs("option", { value: `Heading ${level}`, children: ["Heading ", level] }, level)))] })), jsx("button", { className: "contentful-toolbar__button", onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: "Undo", children: "\u21B6" }), jsx("button", { className: "contentful-toolbar__button", onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: "Redo", children: "\u21B7" })] }), jsx("div", { className: "contentful-toolbar__separator" }), jsxs("div", { className: "contentful-toolbar__group", children: [!isDisabled('bold') && isMarkAvailable('bold') && (jsx("button", { className: `contentful-toolbar__button ${editor.isActive('bold') ? 'contentful-toolbar__button--active' : ''}`, onClick: () => editor.chain().focus().toggleBold().run(), title: "Bold", children: jsx("strong", { children: "B" }) })), !isDisabled('italic') && isMarkAvailable('italic') && (jsx("button", { className: `contentful-toolbar__button ${editor.isActive('italic') ? 'contentful-toolbar__button--active' : ''}`, onClick: () => editor.chain().focus().toggleItalic().run(), title: "Italic", children: jsx("em", { children: "I" }) })), !isDisabled('underline') && isMarkAvailable('underline') && (jsx("button", { className: `contentful-toolbar__button ${editor.isActive('underline') ? 'contentful-toolbar__button--active' : ''}`, onClick: () => editor.chain().focus().toggleUnderline().run(), title: "Underline", children: jsx("u", { children: "U" }) })), jsx("button", { className: "contentful-toolbar__button", title: "More formatting options", children: "\u22EF" }), !isDisabled('link') && (jsxs(Fragment$1, { children: [jsx("button", { className: `contentful-toolbar__button ${editor.isActive('link') ? 'contentful-toolbar__button--active' : ''}`, onClick: handleLinkToggle, title: "Link", children: "\uD83D\uDD17" }), showLinkInput && (jsxs("div", { className: "contentful-toolbar__link-input", children: [jsx("input", { type: "url", value: linkUrl, onChange: (e) => setLinkUrl(e.target.value), placeholder: "Enter URL", onKeyDown: (e) => {
                                             if (e.key === 'Enter') {
                                                 handleLinkSubmit();
                                             }
@@ -27268,59 +27270,63 @@ const createEmptyDocument = () => ({
     ],
 });
 
-const ContentfulRichTextEditor = ({ initialValue, onChange, onEmbedEntry, onEmbedAsset, className = '', readonly = false, placeholder = 'Start writing...', disabledFeatures = [], theme = 'contentful' }) => {
+const ContentfulRichTextEditor = ({ initialValue, onChange, onEmbedEntry, onEmbedAsset, className = '', readonly = false, placeholder = 'Start writing...', disabledFeatures = [], theme = 'contentful', availableHeadings = [1, 2, 3, 4, 5, 6], availableMarks = ['bold', 'italic', 'underline'] }) => {
+    // Build extensions array based on available features
+    const extensions = [];
+    // Add StarterKit with configuration
+    extensions.push(StarterKit.configure({
+        heading: {
+            levels: availableHeadings,
+        },
+        bold: availableMarks.includes('bold') ? {} : false,
+        italic: availableMarks.includes('italic') ? {} : false,
+        bulletList: {
+            HTMLAttributes: {
+                class: 'contentful-bullet-list',
+            },
+        },
+        orderedList: {
+            HTMLAttributes: {
+                class: 'contentful-ordered-list',
+            },
+        },
+        blockquote: {
+            HTMLAttributes: {
+                class: 'contentful-blockquote',
+            },
+        },
+    }));
+    // Add underline extension only if it's in availableMarks
+    if (availableMarks.includes('underline')) {
+        extensions.push(Underline);
+    }
+    // Add other extensions
+    extensions.push(Link.configure({
+        openOnClick: false,
+        HTMLAttributes: {
+            class: 'contentful-link',
+            rel: 'noopener noreferrer',
+        },
+    }), Table.configure({
+        resizable: true,
+        HTMLAttributes: {
+            class: 'contentful-table',
+        },
+    }), TableRow.configure({
+        HTMLAttributes: {
+            class: 'contentful-table-row',
+        },
+    }), TableHeader.configure({
+        HTMLAttributes: {
+            class: 'contentful-table-header',
+        },
+    }), TableCell.configure({
+        HTMLAttributes: {
+            class: 'contentful-table-cell',
+        },
+    }));
     const editor = useEditor({
-        extensions: [
-            StarterKit.configure({
-                heading: {
-                    levels: [1, 2, 3, 4, 5, 6],
-                },
-                bulletList: {
-                    HTMLAttributes: {
-                        class: 'contentful-bullet-list',
-                    },
-                },
-                orderedList: {
-                    HTMLAttributes: {
-                        class: 'contentful-ordered-list',
-                    },
-                },
-                blockquote: {
-                    HTMLAttributes: {
-                        class: 'contentful-blockquote',
-                    },
-                },
-            }),
-            Underline,
-            Link.configure({
-                openOnClick: false,
-                HTMLAttributes: {
-                    class: 'contentful-link',
-                    rel: 'noopener noreferrer',
-                },
-            }),
-            Table.configure({
-                resizable: true,
-                HTMLAttributes: {
-                    class: 'contentful-table',
-                },
-            }),
-            TableRow.configure({
-                HTMLAttributes: {
-                    class: 'contentful-table-row',
-                },
-            }),
-            TableHeader.configure({
-                HTMLAttributes: {
-                    class: 'contentful-table-header',
-                },
-            }),
-            TableCell.configure({
-                HTMLAttributes: {
-                    class: 'contentful-table-cell',
-                },
-            }),
-        ],
+        extensions,
         content: initialValue ? contentfulToTiptap(initialValue) : '',
         editable: !readonly,
         editorProps: {
@@ -27399,7 +27405,7 @@ const ContentfulRichTextEditor = ({ initialValue, onChange, onEmbedEntry, onEmbe
     if (!editor) {
         return (jsx("div", { className: `contentful-editor contentful-editor--loading ${className}`, children: jsx("div", { className: "contentful-editor__loading", children: "Loading editor..." }) }));
     }
-    return (jsxs("div", { className: `contentful-editor contentful-editor--${theme} ${className}`, children: [!readonly && (jsx(ContentfulToolbar, { editor: editor, onEmbedEntry: handleEmbedEntry, onEmbedAsset: handleEmbedAsset, disabledFeatures: disabledFeatures })), jsx("div", { className: "contentful-editor__content-wrapper", children: jsx(EditorContent, { editor: editor, className: "contentful-editor__content" }) })] }));
+    return (jsxs("div", { className: `contentful-editor contentful-editor--${theme} ${className}`, children: [!readonly && (jsx(ContentfulToolbar, { editor: editor, onEmbedEntry: handleEmbedEntry, onEmbedAsset: handleEmbedAsset, disabledFeatures: disabledFeatures, availableHeadings: availableHeadings, availableMarks: availableMarks })), jsx("div", { className: "contentful-editor__content-wrapper", children: jsx(EditorContent, { editor: editor, className: "contentful-editor__content" }) })] }));
 };
 
 export { ContentfulRichTextEditor, ContentfulToolbar, contentfulToTiptap, createEmptyDocument, tiptapToContentful, validateContentfulDocument };