@crashbytes/contentful-richtext-editor 1.0.9 → 1.0.11

package/README.md

@@ -1,533 +1,179 @@
-# Contentful Rich Text Editor
+# Release v2.0.0 - Major Feature Update 🎉
 
-A React component that provides a rich text editor compatible with Contentful's Rich Text field type, with automatic configuration based on Contentful field settings.
+## 🚀 What's New
 
-## Features
+This major release introduces **automatic configuration** from Contentful field settings, significantly enhancing the developer experience and ensuring your editor UI always matches your Contentful configuration.
 
-- 🔄 **Automatic Configuration**: Reads Contentful field validation settings to automatically enable/disable editor features
-- 📝 **Rich Text Support**: Full support for headings, lists, tables, quotes, and text formatting
-- 🔗 **Hyperlinks**: Configurable link support with URL validation
-- 📎 **Embeds**: Support for embedded entries, assets, and inline entries
-- 🎨 **Themes**: Multiple built-in themes (contentful, minimal, default)
-- ♿ **Accessibility**: Built with accessibility in mind
-- 🔧 **Customizable**: Extensive configuration options and styling hooks
-- 📱 **Responsive**: Works well on mobile and desktop
-- ⌨️ **Keyboard Shortcuts**: Built-in shortcuts for common actions
-- 🔍 **TypeScript**: Full TypeScript support with comprehensive type definitions
+### ✨ Major New Features
 
-## Installation
+- **🔄 Automatic Contentful Configuration**: The editor now reads your Contentful field validation settings and automatically enables/disables toolbar features
+- **📝 Inline Entry Support**: Added support for inline embedded entries (as configured in Contentful)
+- **⌨️ Keyboard Shortcuts**: Built-in shortcuts for common actions (`Cmd/Ctrl + Shift + E` for entries, `Cmd/Ctrl + Shift + A` for assets, etc.)
+- **🔍 Enhanced TypeScript Support**: Comprehensive type definitions and better developer experience
+- **📊 Content Analysis Utilities**: New utilities for word counting, plain text extraction, and content validation
 
-```bash
-npm install @your-org/contentful-rich-text-editor
-# or
-yarn add @your-org/contentful-rich-text-editor
-```
-
-## Dependencies
-
-This component requires the following peer dependencies:
-
-```bash
-npm install react @tiptap/react @tiptap/starter-kit @contentful/rich-text-types
-```
-
-## Quick Start
-
-### Basic Usage
-
-```tsx
-import React, { useState } from 'react';
-import { ContentfulRichTextEditor } from '@your-org/contentful-rich-text-editor';
-import { Document } from '@contentful/rich-text-types';
-
-function MyEditor() {
-  const [content, setContent] = useState<Document>();
-
-  return (
-    <ContentfulRichTextEditor
-      initialValue={content}
-      onChange={setContent}
-      placeholder="Start writing..."
-    />
-  );
-}
-```
-
-### With Contentful Configuration
-
-```tsx
-import React, { useEffect, useState } from 'react';
-import { 
-  ContentfulRichTextEditor,
-  fetchContentfulFieldConfig,
-  ContentfulFieldConfiguration 
-} from '@your-org/contentful-rich-text-editor';
-
-function ContentfulEditor() {
-  const [fieldConfig, setFieldConfig] = useState<ContentfulFieldConfiguration>();
-
-  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}
-      onChange={(doc) => console.log('Content changed:', doc)}
-      onEmbedEntry={handleEmbedEntry}
-      onEmbedAsset={handleEmbedAsset}
-      placeholder="Start writing..."
-    />
-  );
-}
-```
-
-## API Reference
-
-### ContentfulRichTextEditor Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `initialValue` | `Document` | `undefined` | Initial Contentful rich text document |
-| `onChange` | `(document: Document) => void` | `undefined` | Callback when content changes |
-| `onEmbedEntry` | `() => Promise<any>` | `undefined` | Callback for embedding entries |
-| `onEmbedAsset` | `() => Promise<any>` | `undefined` | Callback for embedding assets |
-| `onEmbedInlineEntry` | `() => Promise<any>` | `undefined` | Callback for embedding inline entries |
-| `fieldConfiguration` | `ContentfulFieldConfiguration` | `undefined` | Contentful field validation config |
-| `readonly` | `boolean` | `false` | Whether editor is read-only |
-| `placeholder` | `string` | `'Start writing...'` | Placeholder text |
-| `theme` | `'contentful' \| 'minimal' \| 'default'` | `'contentful'` | Editor theme |
-| `className` | `string` | `''` | Additional CSS classes |
-| `availableHeadings` | `Array<1\|2\|3\|4\|5\|6>` | `[1,2,3,4,5,6]` | Available heading levels (fallback) |
-| `availableMarks` | `Array<'bold'\|'italic'\|'underline'>` | `['bold','italic','underline']` | Available text marks (fallback) |
-| `disabledFeatures` | `Array<string>` | `[]` | Manually disabled features (fallback) |
-
-### Configuration Types
+### 🔧 Enhanced Features
 
-```tsx
-interface ContentfulFieldConfiguration {
-  validations?: Array<{
-    enabledMarks?: string[];
-    enabledNodeTypes?: string[];
-  }>;
-  settings?: {
-    helpText?: string;
-  };
-}
-```
-
-### Supported Node Types
-
-- `paragraph` - Regular paragraphs
-- `heading-1` through `heading-6` - Headings
-- `unordered-list`, `ordered-list` - Lists
-- `blockquote` - Quotes
-- `table` - Tables
-- `hyperlink` - Links
-- `embedded-entry-block` - Block-level entry embeds
-- `embedded-asset-block` - Block-level asset embeds
-- `embedded-entry-inline` - Inline entry embeds
-- `hr` - Horizontal rules
-
-### Supported Marks
+- **Smart Toolbar**: Toolbar buttons now appear/disappear based on your Contentful field configuration
+- **Better Error Handling**: Improved error messages and validation
+- **Performance Optimizations**: Faster rendering and better memory usage
+- **Accessibility Improvements**: Enhanced ARIA support and keyboard navigation
 
-- `bold` - Bold text
-- `italic` - Italic text
-- `underline` - Underlined text
-- `code` - Inline code
+### 🎨 Developer Experience
 
-## Configuration Examples
+- **Configuration Parser**: New utility to parse Contentful field settings
+- **Mock Configuration**: Easy testing with `createMockFieldConfig()`
+- **Backward Compatibility**: Existing manual configuration still works
+- **Comprehensive Documentation**: Updated with examples and API reference
 
-### Mock Configuration for Testing
-
-```tsx
-import { createMockFieldConfig } from '@your-org/contentful-rich-text-editor';
-
-const mockConfig = createMockFieldConfig({
-  enabledMarks: ['bold', 'italic'],
-  enabledNodeTypes: [
-    'paragraph',
-    'heading-1',
-    'heading-2',
-    'unordered-list',
-    'hyperlink',
-    'embedded-entry-block'
-  ]
-});
+## 🛠️ Installation
 
-<ContentfulRichTextEditor fieldConfiguration={mockConfig} />
+```bash
+npm install @crashbytes/contentful-richtext-editor@2.0.0
 ```
 
-### Manual Configuration (Legacy)
+## 🔄 Migration from v1.x
 
+### Automatic Configuration (Recommended)
 ```tsx
+// Before (v1.x)
 <ContentfulRichTextEditor
   availableHeadings={[1, 2, 3]}
   availableMarks={['bold', 'italic']}
-  disabledFeatures={['table', 'embed']}
+  disabledFeatures={['table']}
 />
-```
-
-## Styling
-
-The editor comes with built-in CSS classes that you can override:
-
-```css
-/* Main editor container */
-.contentful-editor {
-  border: 1px solid #d3dce6;
-  border-radius: 6px;
-}
 
-/* Toolbar */
-.contentful-toolbar {
-  background: #f7f9fa;
-  border-bottom: 1px solid #d3dce6;
-}
-
-/* Content area */
-.contentful-editor-content {
-  padding: 16px;
-  min-height: 200px;
-}
-
-/* Embedded content */
-.contentful-embedded-entry {
-  background: #f0f8ff;
-  border: 1px dashed #2e75d4;
-  padding: 8px;
-  border-radius: 4px;
-}
-
-/* Inline embedded content */
-.contentful-inline-embedded-entry {
-  background: #e8f4fd;
-  padding: 2px 4px;
-  border-radius: 3px;
-  font-weight: 600;
-}
-
-/* Tables */
-.contentful-table {
-  border-collapse: collapse;
-  width: 100%;
-  margin: 1em 0;
-}
-
-.contentful-table-header {
-  background: #f7f9fa;
-  font-weight: 600;
-}
-
-/* Lists */
-.contentful-bullet-list,
-.contentful-ordered-list {
-  margin: 1em 0;
-  padding-left: 1.5em;
-}
-
-/* Quotes */
-.contentful-blockquote {
-  border-left: 4px solid #2e75d4;
-  margin: 1em 0;
-  padding-left: 1em;
-  font-style: italic;
-}
-```
-
-## Advanced Usage
-
-### Custom Embed Handlers
-
-```tsx
-const handleEmbedEntry = async () => {
-  // Open your entry selector modal/component
-  const selectedEntry = await openEntrySelector();
-  return {
-    sys: { id: selectedEntry.id, type: 'Entry' },
-    fields: { title: selectedEntry.title }
-  };
-};
-
-const handleEmbedAsset = async () => {
-  const selectedAsset = await openAssetSelector();
-  return {
-    sys: { id: selectedAsset.id, type: 'Asset' },
-    fields: { 
-      title: selectedAsset.title,
-      file: { url: selectedAsset.url }
-    }
-  };
-};
-
-const handleEmbedInlineEntry = async () => {
-  const selectedEntry = await openInlineEntrySelector();
-  return {
-    sys: { id: selectedEntry.id, type: 'Entry' },
-    fields: { name: selectedEntry.name }
-  };
-};
+// After (v2.x) - Automatically configured!
+<ContentfulRichTextEditor
+  fieldConfiguration={contentfulFieldConfig}
+  onEmbedInlineEntry={handleInlineEntry} // New!
+/>
 ```
 
-### Keyboard Shortcuts
-
-- `Ctrl/Cmd + B` - Bold
-- `Ctrl/Cmd + I` - Italic  
-- `Ctrl/Cmd + U` - Underline
-- `Ctrl/Cmd + K` - Add link
-- `Ctrl/Cmd + Shift + E` - Embed entry
-- `Ctrl/Cmd + Shift + A` - Embed asset
-- `Ctrl/Cmd + Shift + I` - Embed inline entry
-- `Ctrl/Cmd + Z` - Undo
-- `Ctrl/Cmd + Y` / `Ctrl/Cmd + Shift + Z` - Redo
-
-### Content Validation and Analysis
-
+### New Props Available
 ```tsx
-import { 
-  validateContentfulDocument,
-  extractPlainText,
-  countWords,
-  findEmbeddedContent 
-} from '@your-org/contentful-rich-text-editor';
-
-const handleChange = (document: Document) => {
-  // Validate document structure
-  if (validateContentfulDocument(document)) {
-    console.log('Document is valid');
-  }
-  
-  // Extract plain text
-  const plainText = extractPlainText(document);
-  console.log('Plain text:', plainText);
-  
-  // Count words
-  const wordCount = countWords(document);
-  console.log('Word count:', wordCount);
+interface ContentfulRichTextEditorProps {
+  // New in v2.0
+  fieldConfiguration?: ContentfulFieldConfiguration;
+  onEmbedInlineEntry?: () => Promise<any> | void;
   
-  // Find embedded content
-  const embedded = findEmbeddedContent(document);
-  console.log('Embedded content:', embedded);
-  
-  saveDocument(document);
-};
+  // Existing props still work (backward compatible)
+  availableHeadings?: Array<1 | 2 | 3 | 4 | 5 | 6>;
+  availableMarks?: Array<'bold' | 'italic' | 'underline'>;
+  disabledFeatures?: Array<string>;
+}
 ```
 
-### Content Sanitization
-
+### Fetching Configuration from Contentful
 ```tsx
-import { sanitizeContentfulDocument } from '@your-org/contentful-rich-text-editor';
+import { fetchContentfulFieldConfig } from '@crashbytes/contentful-richtext-editor';
 
-// Sanitize content based on allowed features
-const sanitizedDocument = sanitizeContentfulDocument(
-  document,
-  ['paragraph', 'heading-1', 'heading-2', 'unordered-list'], // allowed nodes
-  ['bold', 'italic'] // allowed marks
+const fieldConfig = await fetchContentfulFieldConfig(
+  'space-id',
+  'content-type-id',
+  'field-id',
+  'management-token'
 );
 ```
 
-## Environment Variables
-
-For API integration, set these environment variables:
-
-```env
-REACT_APP_CONTENTFUL_SPACE_ID=your_space_id
-REACT_APP_CONTENTFUL_CONTENT_TYPE_ID=your_content_type_id
-REACT_APP_CONTENTFUL_FIELD_ID=your_rich_text_field_id
-REACT_APP_CONTENTFUL_MANAGEMENT_TOKEN=your_management_token
-```
-
-## Utilities
-
-### Configuration Parser
+## 📋 New Utilities
 
+### Content Analysis
 ```tsx
-import { parseContentfulFieldConfig } from '@your-org/contentful-rich-text-editor';
+import { 
+  extractPlainText, 
+  countWords, 
+  findEmbeddedContent,
+  sanitizeContentfulDocument 
+} from '@crashbytes/contentful-richtext-editor';
 
-const config = parseContentfulFieldConfig(fieldConfiguration);
-// Returns parsed configuration with boolean flags for each feature
-console.log(config.allowHyperlinks); // true/false
-console.log(config.availableHeadings); // [1, 2, 3]
-console.log(config.disabledFeatures); // ['table', 'embed']
+const plainText = extractPlainText(document);
+const wordCount = countWords(document);
+const embedded = findEmbeddedContent(document);
 ```
 
-### Content Transformation
-
+### Configuration Management
 ```tsx
 import { 
-  contentfulToTiptap, 
-  tiptapToContentful 
-} from '@your-org/contentful-rich-text-editor';
-
-// Convert between formats
-const tiptapContent = contentfulToTiptap(contentfulDocument);
-const contentfulContent = tiptapToContentful(tiptapDocument);
-```
-
-## TypeScript Support
+  parseContentfulFieldConfig,
+  createMockFieldConfig 
+} from '@crashbytes/contentful-richtext-editor';
 
-This package is written in TypeScript and includes full type definitions. All major types are exported:
+// Parse Contentful config
+const parsed = parseContentfulFieldConfig(fieldConfig);
 
-```tsx
-import type {
-  ContentfulRichTextEditorProps,
-  ContentfulFieldConfiguration,
-  ParsedEditorConfig,
-  EmbeddedEntry,
-  EmbeddedAsset,
-  ContentfulDocument,
-  TiptapDocument
-} from '@your-org/contentful-rich-text-editor';
+// Create mock for testing
+const mockConfig = createMockFieldConfig({
+  enabledMarks: ['bold', 'italic'],
+  enabledNodeTypes: ['paragraph', 'heading-1', 'unordered-list']
+});
 ```
 
-## Browser Support
+## ⌨️ New Keyboard Shortcuts
 
-- Chrome 60+
-- Firefox 55+
-- Safari 12+
-- Edge 79+
+- `Cmd/Ctrl + Shift + E` - Embed entry
+- `Cmd/Ctrl + Shift + A` - Embed asset  
+- `Cmd/Ctrl + Shift + I` - Embed inline entry
+- `Cmd/Ctrl + K` - Add/edit link
+- Standard formatting shortcuts (Bold, Italic, Underline)
 
-## Performance Considerations
+## 🐛 Bug Fixes
 
-- The editor uses React.memo internally for performance optimization
-- Large documents (>1000 nodes) may experience slower rendering
-- Consider implementing virtualization for very large content
-- Use the `readonly` prop when displaying content to improve performance
+- Fixed TypeScript compilation warnings
+- Improved link handling in complex nested structures
+- Fixed table rendering issues
+- Better handling of embedded content transformation
+- Resolved build process issues
 
-## Accessibility
+## 🔧 Technical Improvements
 
-The editor is built with accessibility in mind:
+- **Build System**: Improved Rollup configuration
+- **Type Safety**: Better TypeScript definitions throughout
+- **Performance**: Optimized re-renders and memory usage
+- **Code Quality**: Enhanced error boundaries and validation
 
-- Full keyboard navigation support
-- Screen reader compatible
-- ARIA labels and descriptions
-- High contrast mode support
-- Focus management
+## 📚 Documentation
 
-## Troubleshooting
+- **Complete API Reference**: Full documentation of all props and methods
+- **Usage Examples**: 5 different implementation examples
+- **Migration Guide**: Step-by-step upgrade instructions
+- **TypeScript Support**: Full type definitions and examples
 
-### Common Issues
+## 🎯 What's Next
 
-1. **Editor not loading**: Check that all peer dependencies are installed
-2. **Configuration not applying**: Ensure `fieldConfiguration` prop is properly set
-3. **Embed callbacks not working**: Verify that embed handlers return proper Contentful objects
-4. **Styling issues**: Check that CSS is properly imported and not conflicting
+We're already working on v2.1 with:
+- Real-time collaboration support
+- Advanced table editing features
+- Plugin system for custom extensions
+- More keyboard shortcuts and accessibility improvements
 
-### Debug Mode
+## 🤝 Contributing
 
-Enable debug logging:
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
 
-```tsx
-// Add to your component
-useEffect(() => {
-  if (process.env.NODE_ENV === 'development') {
-    window.contentfulEditorDebug = true;
-  }
-}, []);
-```
+## 📖 Full Documentation
 
-## Contributing
+- [README](README.md) - Complete setup and usage guide
+- [API Reference](docs/API.md) - Detailed prop and method documentation
+- [Examples](examples/) - Implementation examples
+- [Changelog](CHANGELOG.md) - Complete version history
 
-1. Fork the repository
-2. Create your feature branch (`git checkout -b feature/amazing-feature`)
-3. Commit your changes (`git commit -m 'Add amazing feature'`)
-4. Push to the branch (`git push origin feature/amazing-feature`)
-5. Open a Pull Request
+## 🔗 Links
 
-### Development Setup
+- **GitHub**: https://github.com/your-org/contentful-richtext-editor
+- **npm**: https://www.npmjs.com/package/@crashbytes/contentful-richtext-editor
+- **Issues**: https://github.com/your-org/contentful-richtext-editor/issues
+- **Discussions**: https://github.com/your-org/contentful-richtext-editor/discussions
 
-```bash
-# Clone the repo
-git clone https://github.com/your-org/contentful-rich-text-editor.git
+## 💝 Acknowledgments
 
-# Install dependencies
-npm install
+Special thanks to:
+- The Contentful team for their excellent Rich Text API
+- The TipTap team for the amazing editor framework
+- All early adopters and contributors who provided feedback
 
-# Start development server
-npm run dev
+---
 
-# Run tests
-npm test
-
-# Build for production
-npm run build
-```
+**Full Changelog**: https://github.com/your-org/contentful-richtext-editor/compare/v1.0.10...v2.0.0
 
-## License
-
-MIT License
-
-Copyright (c) 2024 [Your Name]
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-## Changelog
-
-### v2.0.0 - 2024-01-XX
-- ✨ **BREAKING**: Added automatic configuration from Contentful field settings
-- ✨ Added support for inline embedded entries
-- ✨ Added comprehensive utility functions (sanitization, analysis, validation)
-- ✨ Added keyboard shortcuts for embed actions
-- ✨ Enhanced TypeScript support with better type definitions
-- ✨ Added content analysis utilities (word count, plain text extraction)
-- 🔧 Improved accessibility with better ARIA support
-- 🔧 Better error handling and validation
-- 🔧 Performance optimizations
-- 🐛 Fixed link handling in complex nested structures
-- 🐛 Fixed table rendering issues
-- 🐛 Various bug fixes and improvements
-
-### v1.2.0 - 2023-12-XX
-- ✨ Added table support
-- ✨ Added themes (minimal, default, contentful)
-- 🔧 Improved toolbar layout and responsiveness
-- 🐛 Fixed undo/redo functionality
-
-### v1.1.0 - 2023-11-XX
-- ✨ Added embedded assets support
-- ✨ Added link functionality
-- 🔧 Improved content transformation
-- 🐛 Fixed list nesting issues
-
-### v1.0.0 - 2023-10-XX
-- 🎉 Initial release
-- ✨ Basic rich text editing
-- ✨ Contentful document format support
-- ✨ Embedded entries support
-- ✨ Manual configuration options
-
-## Support
-
-For support, please:
-
-1. Check the [documentation](https://github.com/your-org/contentful-rich-text-editor/docs)
-2. Search [existing issues](https://github.com/your-org/contentful-rich-text-editor/issues)
-3. Create a [new issue](https://github.com/your-org/contentful-rich-text-editor/issues/new) with detailed information
-
-## Related Projects
-
-- [@contentful/rich-text-renderer](https://github.com/contentful/rich-text) - Official Contentful rich text renderer
-- [@tiptap/react](https://tiptap.dev/) - The underlying editor framework
-- [Contentful Management API](https://www.contentful.com/developers/docs/references/content-management-api/) - For fetching field configurations
+**Happy editing! 🎉**

package/dist/index.css

@@ -1 +1 @@
-.contentful-editor{background:#fff;border:1px solid #d3dce6;border-radius:6px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}.contentful-editor--loading{align-items:center;color:#68737d;display:flex;justify-content:center;min-height:200px}.contentful-toolbar{background:#f7f9fa;border-bottom:1px solid #d3dce6;border-radius:6px 6px 0 0;padding:8px 12px}.contentful-toolbar,.contentful-toolbar__group{align-items:center;display:flex;gap:4px}.contentful-toolbar__group--right{margin-left:auto}.contentful-toolbar__separator{background:#d3dce6;height:24px;margin:0 8px;width:1px}.contentful-toolbar__select{background:#fff;border:1px solid #d3dce6;border-radius:4px;font-size:14px;min-width:120px;padding:4px 8px}.contentful-toolbar__select:focus{border-color:#2e75d4;box-shadow:0 0 0 2px rgba(46,117,212,.2);outline:none}.contentful-toolbar__button{align-items:center;background:transparent;border:1px solid transparent;border-radius:4px;cursor:pointer;display:flex;font-size:14px;height:32px;justify-content:center;line-height:1;min-width:32px;padding:6px 8px}.contentful-toolbar__button:hover{background:#e5ebed;border-color:#d3dce6}.contentful-toolbar__button:disabled{cursor:not-allowed;opacity:.5}.contentful-toolbar__button--active{background:#2e75d4;border-color:#2e75d4;color:#fff}.contentful-toolbar__button--active:hover{background:#1e5aa8;border-color:#1e5aa8}.contentful-toolbar__link-input{align-items:center;display:flex;gap:4px;margin-left:8px}.contentful-toolbar__link-input input{border:1px solid #d3dce6;border-radius:4px;font-size:14px;padding:4px 8px;width:200px}.contentful-toolbar__link-input input:focus{border-color:#2e75d4;box-shadow:0 0 0 2px rgba(46,117,212,.2);outline:none}.contentful-toolbar__link-input button{background:#fff;border:1px solid #d3dce6;border-radius:4px;cursor:pointer;font-size:12px;padding:4px 8px}.contentful-toolbar__embed-dropdown{position:relative}.contentful-toolbar__embed-button{background:#2e75d4;border:1px solid #2e75d4;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:6px 12px}.contentful-toolbar__embed-button:hover{background:#1e5aa8;border-color:#1e5aa8}.contentful-toolbar__embed-dropdown:hover .contentful-toolbar__embed-menu{display:block}.contentful-toolbar__embed-menu{background:#fff;border:1px solid #d3dce6;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15);display:none;min-width:120px;position:absolute;right:0;top:100%;z-index:100}.contentful-toolbar__embed-option{background:none;border:none;cursor:pointer;display:block;font-size:14px;padding:8px 12px;text-align:left;width:100%}.contentful-toolbar__embed-option:hover{background:#f7f9fa}.contentful-editor__content-wrapper{position:relative}.contentful-editor__content{min-height:200px}.contentful-editor-content{color:#2c3e50;font-size:16px;line-height:1.6;outline:none;padding:16px}.contentful-editor-content:empty:before{color:#68737d;content:attr(data-placeholder);pointer-events:none}.contentful-editor-content h1{font-size:2em;font-weight:600;line-height:1.2;margin:1em 0 .5em}.contentful-editor-content h2{font-size:1.5em;font-weight:600;line-height:1.3;margin:1em 0 .5em}.contentful-editor-content h3{font-size:1.25em;font-weight:600;line-height:1.4;margin:1em 0 .5em}.contentful-editor-content h4,.contentful-editor-content h5,.contentful-editor-content h6{font-size:1em;font-weight:600;line-height:1.5;margin:1em 0 .5em}.contentful-editor-content p{margin:0 0 1em}.contentful-editor-content p:last-child{margin-bottom:0}.contentful-bullet-list,.contentful-ordered-list{margin:1em 0;padding-left:1.5em}.contentful-bullet-list li,.contentful-ordered-list li{margin:.25em 0}.contentful-blockquote{border-left:4px solid #2e75d4;color:#68737d;font-style:italic;margin:1em 0;padding-left:1em}.contentful-link{color:#2e75d4;text-decoration:underline}.contentful-link:hover{color:#1e5aa8}.contentful-table{border:1px solid #d3dce6;border-collapse:collapse;margin:1em 0;width:100%}.contentful-table-cell,.contentful-table-header{border:1px solid #d3dce6;padding:8px 12px;text-align:left}.contentful-table-header{background:#f7f9fa;font-weight:600}.contentful-editor--minimal{border:none;border-radius:0}.contentful-editor--minimal .contentful-toolbar{background:#fff;border-bottom:1px solid #e1e8ed;border-radius:0}.contentful-editor--default .contentful-editor-content{font-family:Georgia,serif}.contentful-editor:focus-within{border-color:#2e75d4;box-shadow:0 0 0 2px rgba(46,117,212,.2)}@media (max-width:768px){.contentful-toolbar{flex-wrap:wrap}.contentful-toolbar__select{min-width:100px}.contentful-editor-content{font-size:14px;padding:12px}}
+.contentful-editor{background:#fff;border:1px solid #d3dce6;border-radius:6px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}.contentful-editor--borderless{border:none!important}.contentful-editor--loading{align-items:center;color:#68737d;display:flex;justify-content:center;min-height:200px}.contentful-toolbar{background:#f7f9fa;border-bottom:1px solid #d3dce6;border-radius:6px 6px 0 0;padding:8px 12px}.contentful-toolbar,.contentful-toolbar__group{align-items:center;display:flex;gap:4px}.contentful-toolbar__group--right{margin-left:auto}.contentful-toolbar__separator{background:#d3dce6;height:24px;margin:0 8px;width:1px}.contentful-toolbar__select{background:#fff;border:1px solid #d3dce6;border-radius:4px;font-size:14px;min-width:120px;padding:4px 8px}.contentful-toolbar__select:focus{border-color:#2e75d4;box-shadow:0 0 0 2px rgba(46,117,212,.2);outline:none}.contentful-toolbar__button{align-items:center;background:transparent;border:1px solid transparent;border-radius:4px;cursor:pointer;display:flex;font-size:14px;height:32px;justify-content:center;line-height:1;min-width:32px;padding:6px 8px}.contentful-toolbar__button:hover{background:#e5ebed;border-color:#d3dce6}.contentful-toolbar__button:disabled{cursor:not-allowed;opacity:.5}.contentful-toolbar__button--active{background:#2e75d4;border-color:#2e75d4;color:#fff}.contentful-toolbar__button--active:hover{background:#1e5aa8;border-color:#1e5aa8}.contentful-toolbar__link-input{align-items:center;display:flex;gap:4px;margin-left:8px}.contentful-toolbar__link-input input{border:1px solid #d3dce6;border-radius:4px;font-size:14px;padding:4px 8px;width:200px}.contentful-toolbar__link-input input:focus{border-color:#2e75d4;box-shadow:0 0 0 2px rgba(46,117,212,.2);outline:none}.contentful-toolbar__link-input button{background:#fff;border:1px solid #d3dce6;border-radius:4px;cursor:pointer;font-size:12px;padding:4px 8px}.contentful-toolbar__embed-dropdown{position:relative}.contentful-toolbar__embed-button{background:#2e75d4;border:1px solid #2e75d4;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:6px 12px}.contentful-toolbar__embed-button:hover{background:#1e5aa8;border-color:#1e5aa8}.contentful-toolbar__embed-dropdown:hover .contentful-toolbar__embed-menu{display:block}.contentful-toolbar__embed-menu{background:#fff;border:1px solid #d3dce6;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15);display:none;min-width:120px;position:absolute;right:0;top:100%;z-index:100}.contentful-toolbar__embed-option{background:none;border:none;cursor:pointer;display:block;font-size:14px;padding:8px 12px;text-align:left;width:100%}.contentful-toolbar__embed-option:hover{background:#f7f9fa}.contentful-editor__content-wrapper{position:relative}.contentful-editor__content{min-height:200px}.contentful-editor-content{color:#2c3e50;font-size:16px;line-height:1.6;outline:none;padding:16px}.contentful-editor-content:empty:before{color:#68737d;content:attr(data-placeholder);pointer-events:none}.contentful-editor-content h1{font-size:2em;font-weight:600;line-height:1.2;margin:1em 0 .5em}.contentful-editor-content h2{font-size:1.5em;font-weight:600;line-height:1.3;margin:1em 0 .5em}.contentful-editor-content h3{font-size:1.25em;font-weight:600;line-height:1.4;margin:1em 0 .5em}.contentful-editor-content h4,.contentful-editor-content h5,.contentful-editor-content h6{font-size:1em;font-weight:600;line-height:1.5;margin:1em 0 .5em}.contentful-editor-content p{margin:0 0 1em}.contentful-editor-content p:last-child{margin-bottom:0}.contentful-bullet-list,.contentful-ordered-list{margin:1em 0;padding-left:1.5em}.contentful-bullet-list li,.contentful-ordered-list li{margin:.25em 0}.contentful-blockquote{border-left:4px solid #2e75d4;color:#68737d;font-style:italic;margin:1em 0;padding-left:1em}.contentful-link{color:#2e75d4;text-decoration:underline}.contentful-link:hover{color:#1e5aa8}.contentful-table{border:1px solid #d3dce6;border-collapse:collapse;margin:1em 0;width:100%}.contentful-table-cell,.contentful-table-header{border:1px solid #d3dce6;padding:8px 12px;text-align:left}.contentful-table-header{background:#f7f9fa;font-weight:600}.contentful-editor--minimal{border:none;border-radius:0}.contentful-editor--minimal .contentful-toolbar{background:#fff;border-bottom:1px solid #e1e8ed;border-radius:0}.contentful-editor--default .contentful-editor-content{font-family:Georgia,serif}.contentful-editor:focus-within{border-color:#2e75d4;box-shadow:0 0 0 2px rgba(46,117,212,.2)}@media (max-width:768px){.contentful-toolbar{flex-wrap:wrap}.contentful-toolbar__select{min-width:100px}.contentful-editor-content{font-size:14px;padding:12px}}