@crashbytes/contentful-richtext-editor 1.0.3 → 1.0.6

package/README.md

@@ -24,105 +24,126 @@ A modern, Tiptap-based rich text editor that's fully compatible with Contentful'
 
 ## Installation
 
-    npm install @crashbytes/contentful-richtext-editor
+```bash
+npm install @crashbytes/contentful-richtext-editor
+```
 
 ## 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;
+```jsx
+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();
+
+  const handleChange = (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
 
-    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"
-        />
-      );
-    }
+```jsx
+import { ContentfulRichTextEditor } from '@crashbytes/contentful-richtext-editor';
+import '@crashbytes/contentful-richtext-editor/dist/index.css';
 
-### Customizing Features
+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="Simple editor..."
-      disabledFeatures={['table', 'embed', 'quote']}
-      theme="minimal"
-      readonly={false}
-      onChange={handleChange}
+      placeholder="Write your travel tip..."
+      onChange={(doc) => saveToContentful(doc)}
+      onEmbedEntry={handleEmbedEntry}
+      onEmbedAsset={handleEmbedAsset}
+      theme="contentful"
     />
+  );
+}
+```
+
+### Customizing Features
+
+```jsx
+<ContentfulRichTextEditor
+  placeholder="Simple editor..."
+  disabledFeatures={['table', 'embed', 'quote']}
+  theme="minimal"
+  readonly={false}
+  onChange={handleChange}
+/>
+```
+
+### Controlling Available Headings and Formatting
+
+```jsx
+<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
 
-    import { createEmptyDocument } from '@crashbytes/contentful-richtext-editor';
+```jsx
+import { createEmptyDocument } from '@crashbytes/contentful-richtext-editor';
 
-    const initialContent = {
-      nodeType: 'document',
+const initialContent = {
+  nodeType: 'document',
+  data: {},
+  content: [
+    {
+      nodeType: 'paragraph',
       data: {},
       content: [
         {
-          nodeType: 'paragraph',
-          data: {},
-          content: [
-            {
-              nodeType: 'text',
-              value: 'Hello world!',
-              marks: [{ type: 'bold' }],
-              data: {}
-            }
-          ]
+          nodeType: 'text',
+          value: 'Hello world!',
+          marks: [{ type: 'bold' }],
+          data: {}
         }
       ]
-    };
+    }
+  ]
+};
 
-    <ContentfulRichTextEditor
-      initialValue={initialContent}
-      onChange={handleChange}
-    />
+<ContentfulRichTextEditor
+  initialValue={initialContent}
+  onChange={handleChange}
+/>
+```
 
 ## API Reference
 
@@ -139,6 +160,8 @@ A modern, Tiptap-based rich text editor that's fully compatible with Contentful'
 | `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
 
@@ -156,44 +179,50 @@ You can disable specific features by passing them in the `disabledFeatures` arra
 
 ### Utility Functions
 
-    import { 
-      contentfulToTiptap, 
-      tiptapToContentful,
-      validateContentfulDocument,
-      createEmptyDocument 
-    } from '@crashbytes/contentful-richtext-editor';
+```jsx
+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:
 
-    import '@crashbytes/contentful-richtext-editor/dist/index.css';
+```jsx
+import '@crashbytes/contentful-richtext-editor/dist/index.css';
+```
 
 ### Custom Styling
 
 You can override the default styles by targeting the CSS classes:
 
-    .contentful-editor {
-      border: 2px solid #your-color;
-    }
+```css
+.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
 
@@ -208,36 +237,40 @@ Standard rich text editor appearance with serif fonts.
 
 ## Integration with Next.js
 
-    // 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>
-      );
-    }
+```jsx
+// 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:
 
-    import type { 
-      Document, 
-      Block, 
-      Inline, 
-      Text,
-      ContentfulRichTextEditorProps 
-    } from '@crashbytes/contentful-richtext-editor';
+```tsx
+import type { 
+  Document, 
+  Block, 
+  Inline, 
+  Text,
+  ContentfulRichTextEditorProps 
+} from '@crashbytes/contentful-richtext-editor';
+```
 
 ## Browser Support
 

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