118 lines
3.9 KiB
Markdown
118 lines
3.9 KiB
Markdown
# Portable Text Editor Setup Instructions
|
|
|
|
## Current Status
|
|
|
|
⚠️ **Temporarily Reverted to Original Editor**
|
|
|
|
Due to npm cache permission issues preventing Docker builds, I've temporarily reverted the imports back to `RichTextEditor`. The Portable Text implementation is complete and ready to activate once the npm issue is resolved.
|
|
|
|
## Files Ready for Portable Text
|
|
|
|
- ✅ `PortableTextEditor.tsx` - Complete implementation
|
|
- ✅ `schema.ts` - Portable Text schema
|
|
- ✅ `conversion.ts` - HTML ↔ Portable Text conversion
|
|
- ✅ `package.json.with-portabletext` - Updated dependencies
|
|
|
|
## Docker Build Issue Resolution
|
|
|
|
The error `npm ci` requires `package-lock.json` but npm cache permissions prevent generating it.
|
|
|
|
### Solution Steps:
|
|
|
|
1. **Fix npm permissions:**
|
|
```bash
|
|
sudo chown -R $(whoami) ~/.npm
|
|
```
|
|
|
|
2. **Switch to Portable Text setup:**
|
|
```bash
|
|
cd frontend
|
|
mv package.json package.json.original
|
|
mv package.json.with-portabletext package.json
|
|
npm install # This will generate package-lock.json
|
|
```
|
|
|
|
3. **Update component imports** (change RichTextEditor → PortableTextEditor):
|
|
```typescript
|
|
// In src/app/add-story/page.tsx and src/app/stories/[id]/edit/page.tsx
|
|
import PortableTextEditor from '../../components/stories/PortableTextEditor';
|
|
// And update the JSX to use <PortableTextEditor ... />
|
|
```
|
|
|
|
4. **Build and test:**
|
|
```bash
|
|
npm run build
|
|
docker-compose build
|
|
```
|
|
|
|
## Implementation Complete
|
|
|
|
✅ **Portable Text Schema** - Defines formatting options matching the original editor
|
|
✅ **HTML ↔ Portable Text Conversion** - Seamless conversion between formats
|
|
✅ **Sanitization Integration** - Uses existing sanitization strategy
|
|
✅ **Component Replacement** - PortableTextEditor replaces RichTextEditor
|
|
✅ **Image Processing** - Maintains existing image processing functionality
|
|
✅ **Toolbar** - All formatting buttons from original editor
|
|
✅ **Keyboard Shortcuts** - Ctrl+B, Ctrl+I, Ctrl+Shift+1-6
|
|
|
|
## Features Maintained
|
|
|
|
### 1. **Formatting Options**
|
|
- Bold, Italic, Underline, Strike, Code
|
|
- Headings H1-H6
|
|
- Paragraphs and Blockquotes
|
|
- All original toolbar buttons
|
|
|
|
### 2. **Visual & HTML Modes**
|
|
- Visual mode: Structured Portable Text editing
|
|
- HTML mode: Direct HTML editing (fallback)
|
|
- Live preview in HTML mode
|
|
|
|
### 3. **Image Processing**
|
|
- Existing image processing pipeline maintained
|
|
- Background image download and conversion
|
|
- Processing status indicators
|
|
- Warning system
|
|
|
|
### 4. **Paste Handling**
|
|
- Rich text paste from websites
|
|
- Image processing during paste
|
|
- HTML sanitization
|
|
- Structured content conversion
|
|
|
|
### 5. **Maximization & Resizing**
|
|
- Fullscreen editing mode
|
|
- Resizable editor height
|
|
- Keyboard shortcuts (Escape to exit)
|
|
|
|
## Benefits of Portable Text
|
|
|
|
1. **Structured Content** - Content is stored as JSON, not just HTML
|
|
2. **Future-Proof** - Easy to export/migrate content
|
|
3. **Better Search** - Structured content works better with Typesense
|
|
4. **Extensible** - Easy to add custom block types (images, etc.)
|
|
5. **Sanitization** - Inherently safer than HTML parsing
|
|
|
|
## Next Steps
|
|
|
|
1. Install the npm packages using one of the methods above
|
|
2. Test the editor functionality
|
|
3. Verify image processing works correctly
|
|
4. Optional: Add custom image block types for enhanced image handling
|
|
|
|
## File Structure
|
|
|
|
```
|
|
frontend/src/
|
|
├── components/stories/
|
|
│ ├── PortableTextEditor.tsx # New editor component
|
|
│ └── RichTextEditor.tsx # Original (can be removed after testing)
|
|
├── lib/portabletext/
|
|
│ ├── schema.ts # Portable Text schema and types
|
|
│ └── conversion.ts # HTML ↔ Portable Text conversion
|
|
└── app/
|
|
├── add-story/page.tsx # Updated to use PortableTextEditor
|
|
└── stories/[id]/edit/page.tsx # Updated to use PortableTextEditor
|
|
```
|
|
|
|
The implementation is backward compatible and maintains all existing functionality while providing the benefits of structured content editing. |