new editor
This commit is contained in:
Stefan Hardegger
892
frontend/src/components/stories/SlateEditor.tsx
Normal file
892
frontend/src/components/stories/SlateEditor.tsx
Normal file
@@ -0,0 +1,892 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useCallback, useMemo } from 'react';
|
||||
import {
|
||||
createEditor,
|
||||
Descendant,
|
||||
Element as SlateElement,
|
||||
Node as SlateNode,
|
||||
Transforms,
|
||||
Editor,
|
||||
Range
|
||||
} from 'slate';
|
||||
import {
|
||||
Slate,
|
||||
Editable,
|
||||
withReact,
|
||||
ReactEditor,
|
||||
RenderElementProps,
|
||||
RenderLeafProps,
|
||||
useSlate as useEditor
|
||||
} from 'slate-react';
|
||||
import { withHistory } from 'slate-history';
|
||||
import Button from '../ui/Button';
|
||||
import { sanitizeHtmlSync } from '../../lib/sanitization';
|
||||
import { debug } from '../../lib/debug';
|
||||
|
||||
interface SlateEditorProps {
|
||||
value: string; // HTML value for compatibility with existing code
|
||||
onChange: (value: string) => void; // Returns HTML for compatibility
|
||||
placeholder?: string;
|
||||
error?: string;
|
||||
storyId?: string;
|
||||
enableImageProcessing?: boolean;
|
||||
}
|
||||
|
||||
// Custom types for our editor
|
||||
type CustomElement = {
|
||||
type: 'paragraph' | 'heading-one' | 'heading-two' | 'heading-three' | 'blockquote' | 'image' | 'code-block';
|
||||
children: CustomText[];
|
||||
src?: string; // for images
|
||||
alt?: string; // for images
|
||||
caption?: string; // for images
|
||||
language?: string; // for code blocks
|
||||
};
|
||||
|
||||
type CustomText = {
|
||||
text: string;
|
||||
bold?: boolean;
|
||||
italic?: boolean;
|
||||
underline?: boolean;
|
||||
strikethrough?: boolean;
|
||||
code?: boolean;
|
||||
};
|
||||
|
||||
declare module 'slate' {
|
||||
interface CustomTypes {
|
||||
Editor: ReactEditor;
|
||||
Element: CustomElement;
|
||||
Text: CustomText;
|
||||
}
|
||||
}
|
||||
|
||||
// HTML to Slate conversion - preserves mixed content order
|
||||
const htmlToSlate = (html: string): Descendant[] => {
|
||||
if (!html || html.trim() === '') {
|
||||
return [{ type: 'paragraph', children: [{ text: '' }] }];
|
||||
}
|
||||
|
||||
const sanitizedHtml = sanitizeHtmlSync(html);
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(sanitizedHtml, 'text/html');
|
||||
|
||||
const nodes: Descendant[] = [];
|
||||
|
||||
// Process all nodes in document order to maintain sequence
|
||||
const processChildNodes = (parentNode: Node): Descendant[] => {
|
||||
const results: Descendant[] = [];
|
||||
|
||||
Array.from(parentNode.childNodes).forEach(node => {
|
||||
if (node.nodeType === Node.ELEMENT_NODE) {
|
||||
const element = node as Element;
|
||||
|
||||
switch (element.tagName.toLowerCase()) {
|
||||
case 'h1':
|
||||
results.push({
|
||||
type: 'heading-one',
|
||||
children: [{ text: element.textContent || '' }]
|
||||
});
|
||||
break;
|
||||
case 'h2':
|
||||
results.push({
|
||||
type: 'heading-two',
|
||||
children: [{ text: element.textContent || '' }]
|
||||
});
|
||||
break;
|
||||
case 'h3':
|
||||
results.push({
|
||||
type: 'heading-three',
|
||||
children: [{ text: element.textContent || '' }]
|
||||
});
|
||||
break;
|
||||
case 'blockquote':
|
||||
results.push({
|
||||
type: 'blockquote',
|
||||
children: [{ text: element.textContent || '' }]
|
||||
});
|
||||
break;
|
||||
case 'img':
|
||||
const img = element as HTMLImageElement;
|
||||
results.push({
|
||||
type: 'image',
|
||||
src: img.src || img.getAttribute('src') || '',
|
||||
alt: img.alt || img.getAttribute('alt') || '',
|
||||
caption: img.title || img.getAttribute('title') || '',
|
||||
children: [{ text: '' }] // Images need children in Slate
|
||||
});
|
||||
break;
|
||||
case 'pre':
|
||||
const codeEl = element.querySelector('code');
|
||||
const code = codeEl ? codeEl.textContent || '' : element.textContent || '';
|
||||
const language = codeEl?.className?.replace('language-', '') || '';
|
||||
results.push({
|
||||
type: 'code-block',
|
||||
language,
|
||||
children: [{ text: code }]
|
||||
});
|
||||
break;
|
||||
case 'p':
|
||||
case 'div':
|
||||
// Check if this paragraph contains mixed content (text + images)
|
||||
if (element.querySelector('img')) {
|
||||
// Process mixed content - handle both text and images in order
|
||||
results.push(...processChildNodes(element));
|
||||
} else {
|
||||
const text = element.textContent || '';
|
||||
if (text.trim()) {
|
||||
results.push({
|
||||
type: 'paragraph',
|
||||
children: [{ text }]
|
||||
});
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'br':
|
||||
// Handle line breaks by creating empty paragraphs
|
||||
results.push({
|
||||
type: 'paragraph',
|
||||
children: [{ text: '' }]
|
||||
});
|
||||
break;
|
||||
default:
|
||||
// For other elements, try to extract text or recurse
|
||||
const text = element.textContent || '';
|
||||
if (text.trim()) {
|
||||
results.push({
|
||||
type: 'paragraph',
|
||||
children: [{ text }]
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
} else if (node.nodeType === Node.TEXT_NODE) {
|
||||
const text = node.textContent || '';
|
||||
if (text.trim()) {
|
||||
results.push({
|
||||
type: 'paragraph',
|
||||
children: [{ text: text.trim() }]
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return results;
|
||||
};
|
||||
|
||||
// Process all content
|
||||
nodes.push(...processChildNodes(doc.body));
|
||||
|
||||
// Fallback for simple text content
|
||||
if (nodes.length === 0 && doc.body.textContent?.trim()) {
|
||||
const text = doc.body.textContent.trim();
|
||||
const lines = text.split('\n').filter(line => line.trim());
|
||||
lines.forEach(line => {
|
||||
nodes.push({
|
||||
type: 'paragraph',
|
||||
children: [{ text: line.trim() }]
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return nodes.length > 0 ? nodes : [{ type: 'paragraph', children: [{ text: '' }] }];
|
||||
};
|
||||
|
||||
// Slate to HTML conversion
|
||||
const slateToHtml = (nodes: Descendant[]): string => {
|
||||
const htmlParts: string[] = [];
|
||||
|
||||
nodes.forEach(node => {
|
||||
if (SlateElement.isElement(node)) {
|
||||
const element = node as CustomElement;
|
||||
const text = SlateNode.string(node);
|
||||
|
||||
switch (element.type) {
|
||||
case 'heading-one':
|
||||
htmlParts.push(`<h1>${text}</h1>`);
|
||||
break;
|
||||
case 'heading-two':
|
||||
htmlParts.push(`<h2>${text}</h2>`);
|
||||
break;
|
||||
case 'heading-three':
|
||||
htmlParts.push(`<h3>${text}</h3>`);
|
||||
break;
|
||||
case 'blockquote':
|
||||
htmlParts.push(`<blockquote>${text}</blockquote>`);
|
||||
break;
|
||||
case 'image':
|
||||
const attrs: string[] = [];
|
||||
if (element.src) attrs.push(`src="${element.src}"`);
|
||||
if (element.alt) attrs.push(`alt="${element.alt}"`);
|
||||
if (element.caption) attrs.push(`title="${element.caption}"`);
|
||||
htmlParts.push(`<img ${attrs.join(' ')} />`);
|
||||
break;
|
||||
case 'code-block':
|
||||
const langClass = element.language ? ` class="language-${element.language}"` : '';
|
||||
const escapedText = text
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
htmlParts.push(`<pre><code${langClass}>${escapedText}</code></pre>`);
|
||||
break;
|
||||
case 'paragraph':
|
||||
default:
|
||||
htmlParts.push(text ? `<p>${text}</p>` : '<p></p>');
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const html = htmlParts.join('\n');
|
||||
return sanitizeHtmlSync(html);
|
||||
};
|
||||
|
||||
// Custom plugin to handle images
|
||||
const withImages = (editor: ReactEditor) => {
|
||||
const { insertData, isVoid } = editor;
|
||||
|
||||
editor.isVoid = element => {
|
||||
return element.type === 'image' ? true : isVoid(element);
|
||||
};
|
||||
|
||||
editor.insertData = (data) => {
|
||||
const html = data.getData('text/html');
|
||||
|
||||
if (html && html.includes('<img')) {
|
||||
debug.log('📋 Image paste detected in Slate editor');
|
||||
|
||||
// Convert HTML to Slate nodes maintaining order
|
||||
const slateNodes = htmlToSlate(html);
|
||||
|
||||
// Insert all nodes in sequence
|
||||
slateNodes.forEach(node => {
|
||||
Transforms.insertNodes(editor, node);
|
||||
});
|
||||
|
||||
debug.log(`📋 Inserted ${slateNodes.length} nodes from pasted HTML`);
|
||||
return;
|
||||
}
|
||||
|
||||
insertData(data);
|
||||
};
|
||||
|
||||
return editor;
|
||||
};
|
||||
|
||||
// Interactive Image Component
|
||||
const ImageElement = ({ attributes, element, children }: {
|
||||
attributes: any;
|
||||
element: CustomElement;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
const editor = useEditor();
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editUrl, setEditUrl] = useState(element.src || '');
|
||||
const [editAlt, setEditAlt] = useState(element.alt || '');
|
||||
const [editCaption, setEditCaption] = useState(element.caption || '');
|
||||
|
||||
const handleDelete = () => {
|
||||
const path = ReactEditor.findPath(editor, element);
|
||||
Transforms.removeNodes(editor, { at: path });
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
const path = ReactEditor.findPath(editor, element);
|
||||
const newProperties: Partial<CustomElement> = {
|
||||
src: editUrl,
|
||||
alt: editAlt,
|
||||
caption: editCaption,
|
||||
};
|
||||
Transforms.setNodes(editor, newProperties, { at: path });
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setEditUrl(element.src || '');
|
||||
setEditAlt(element.alt || '');
|
||||
setEditCaption(element.caption || '');
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<div {...attributes} contentEditable={false} className="my-4">
|
||||
<div className="border border-blue-300 rounded-lg p-4 bg-blue-50">
|
||||
<h4 className="font-medium text-blue-900 mb-3">Edit Image</h4>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-blue-800 mb-1">
|
||||
Image URL *
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
value={editUrl}
|
||||
onChange={(e) => setEditUrl(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-blue-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="https://example.com/image.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-blue-800 mb-1">
|
||||
Alt Text
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editAlt}
|
||||
onChange={(e) => setEditAlt(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-blue-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="Describe the image"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-blue-800 mb-1">
|
||||
Caption
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editCaption}
|
||||
onChange={(e) => setEditCaption(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-blue-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="Image caption"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 mt-4">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
className="px-3 py-1 bg-gray-300 text-gray-700 text-sm rounded hover:bg-gray-400 focus:ring-2 focus:ring-gray-500"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div {...attributes} contentEditable={false} className="my-4">
|
||||
<div
|
||||
className="relative border border-gray-200 rounded-lg overflow-hidden bg-white shadow-sm group hover:shadow-md transition-shadow focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500"
|
||||
tabIndex={0}
|
||||
onKeyDown={(event) => {
|
||||
// Handle delete/backspace on focused image
|
||||
if (event.key === 'Delete' || event.key === 'Backspace') {
|
||||
event.preventDefault();
|
||||
handleDelete();
|
||||
}
|
||||
// Handle Enter to edit
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
setIsEditing(true);
|
||||
}
|
||||
}}
|
||||
onClick={() => {
|
||||
// Focus the image element when clicked
|
||||
const path = ReactEditor.findPath(editor, element);
|
||||
const start = Editor.start(editor, path);
|
||||
Transforms.select(editor, start);
|
||||
}}
|
||||
>
|
||||
{/* Control buttons - show on hover */}
|
||||
<div className="absolute top-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity z-10">
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
onClick={() => setIsEditing(true)}
|
||||
className="p-1 bg-white rounded-full shadow-sm hover:bg-blue-50 border border-gray-200 text-blue-600 hover:text-blue-700"
|
||||
title="Edit image"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
className="p-1 bg-white rounded-full shadow-sm hover:bg-red-50 border border-gray-200 text-red-600 hover:text-red-700"
|
||||
title="Delete image"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{element.src ? (
|
||||
<>
|
||||
<img
|
||||
src={element.src}
|
||||
alt={element.alt || ''}
|
||||
className="w-full h-auto max-h-96 object-contain cursor-pointer"
|
||||
onDoubleClick={() => setIsEditing(true)}
|
||||
onError={(e) => {
|
||||
// Fallback to text block if image fails to load
|
||||
const target = e.target as HTMLImageElement;
|
||||
const parent = target.parentElement;
|
||||
if (parent) {
|
||||
parent.innerHTML = `
|
||||
<div class="p-3 border border-dashed border-red-300 rounded-lg bg-red-50">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-lg">⚠️</span>
|
||||
<span class="font-medium text-red-700">Image failed to load</span>
|
||||
</div>
|
||||
<div class="text-sm text-red-600 space-y-1">
|
||||
<p><strong>Source:</strong> ${element.src}</p>
|
||||
${element.alt ? `<p><strong>Alt:</strong> ${element.alt}</p>` : ''}
|
||||
${element.caption ? `<p><strong>Caption:</strong> ${element.caption}</p>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{(element.alt || element.caption) && (
|
||||
<div className="p-2 bg-gray-50 border-t border-gray-200">
|
||||
<div className="text-sm text-gray-600">
|
||||
{element.caption && (
|
||||
<p className="font-medium">{element.caption}</p>
|
||||
)}
|
||||
{element.alt && element.alt !== element.caption && (
|
||||
<p className="italic">{element.alt}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* External image indicator */}
|
||||
{element.src.startsWith('http') && (
|
||||
<div className="absolute top-2 right-2">
|
||||
<div className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full flex items-center gap-1">
|
||||
<span>🌐</span>
|
||||
<span>External</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="p-3 border border-dashed border-gray-300 rounded-lg bg-gray-50">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-lg">🖼️</span>
|
||||
<span className="font-medium text-gray-700">Image (No Source)</span>
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 space-y-1">
|
||||
{element.alt && <p><strong>Alt:</strong> {element.alt}</p>}
|
||||
{element.caption && <p><strong>Caption:</strong> {element.caption}</p>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Component for rendering elements
|
||||
const Element = ({ attributes, children, element }: RenderElementProps) => {
|
||||
const customElement = element as CustomElement;
|
||||
|
||||
switch (customElement.type) {
|
||||
case 'heading-one':
|
||||
return <h1 {...attributes} className="text-3xl font-bold mb-4">{children}</h1>;
|
||||
case 'heading-two':
|
||||
return <h2 {...attributes} className="text-2xl font-bold mb-3">{children}</h2>;
|
||||
case 'heading-three':
|
||||
return <h3 {...attributes} className="text-xl font-bold mb-3">{children}</h3>;
|
||||
case 'blockquote':
|
||||
return <blockquote {...attributes} className="border-l-4 border-gray-300 pl-4 italic my-4">{children}</blockquote>;
|
||||
case 'image':
|
||||
return (
|
||||
<ImageElement
|
||||
attributes={attributes}
|
||||
element={customElement}
|
||||
children={children}
|
||||
/>
|
||||
);
|
||||
case 'code-block':
|
||||
return (
|
||||
<pre {...attributes} className="my-4 p-3 bg-gray-100 rounded-lg overflow-x-auto">
|
||||
<code className="text-sm font-mono">{children}</code>
|
||||
</pre>
|
||||
);
|
||||
default:
|
||||
return <p {...attributes} className="mb-2">{children}</p>;
|
||||
}
|
||||
};
|
||||
|
||||
// Component for rendering leaves (text formatting)
|
||||
const Leaf = ({ attributes, children, leaf }: RenderLeafProps) => {
|
||||
const customLeaf = leaf as CustomText;
|
||||
|
||||
if (customLeaf.bold) {
|
||||
children = <strong>{children}</strong>;
|
||||
}
|
||||
|
||||
if (customLeaf.italic) {
|
||||
children = <em>{children}</em>;
|
||||
}
|
||||
|
||||
if (customLeaf.underline) {
|
||||
children = <u>{children}</u>;
|
||||
}
|
||||
|
||||
if (customLeaf.strikethrough) {
|
||||
children = <s>{children}</s>;
|
||||
}
|
||||
|
||||
if (customLeaf.code) {
|
||||
children = <code className="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono">{children}</code>;
|
||||
}
|
||||
|
||||
return <span {...attributes}>{children}</span>;
|
||||
};
|
||||
|
||||
// Toolbar component
|
||||
const Toolbar = ({ editor }: { editor: ReactEditor }) => {
|
||||
type MarkFormat = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'code';
|
||||
|
||||
const isMarkActive = (format: MarkFormat) => {
|
||||
const marks = Editor.marks(editor);
|
||||
return marks ? marks[format] === true : false;
|
||||
};
|
||||
|
||||
const toggleMark = (format: MarkFormat) => {
|
||||
const isActive = isMarkActive(format);
|
||||
if (isActive) {
|
||||
Editor.removeMark(editor, format);
|
||||
} else {
|
||||
Editor.addMark(editor, format, true);
|
||||
}
|
||||
};
|
||||
|
||||
const isBlockActive = (format: CustomElement['type']) => {
|
||||
const { selection } = editor;
|
||||
if (!selection) return false;
|
||||
|
||||
const [match] = Array.from(
|
||||
Editor.nodes(editor, {
|
||||
at: Editor.unhangRange(editor, selection),
|
||||
match: n =>
|
||||
!Editor.isEditor(n) &&
|
||||
SlateElement.isElement(n) &&
|
||||
n.type === format,
|
||||
})
|
||||
);
|
||||
|
||||
return !!match;
|
||||
};
|
||||
|
||||
const toggleBlock = (format: CustomElement['type']) => {
|
||||
const isActive = isBlockActive(format);
|
||||
|
||||
Transforms.setNodes(
|
||||
editor,
|
||||
{ type: isActive ? 'paragraph' : format },
|
||||
{ match: n => SlateElement.isElement(n) && Editor.isBlock(editor, n) }
|
||||
);
|
||||
};
|
||||
|
||||
const insertImage = () => {
|
||||
const url = prompt('Enter image URL:', 'https://');
|
||||
if (url && url.trim() !== 'https://') {
|
||||
const imageNode: CustomElement = {
|
||||
type: 'image',
|
||||
src: url.trim(),
|
||||
alt: '',
|
||||
caption: '',
|
||||
children: [{ text: '' }],
|
||||
};
|
||||
|
||||
Transforms.insertNodes(editor, imageNode);
|
||||
// Add a paragraph after the image
|
||||
Transforms.insertNodes(editor, {
|
||||
type: 'paragraph',
|
||||
children: [{ text: '' }],
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 p-2 theme-card border theme-border rounded-t-lg">
|
||||
<div className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">
|
||||
✨ Slate.js Editor
|
||||
</div>
|
||||
|
||||
{/* Block type buttons */}
|
||||
<div className="flex items-center gap-1 border-r pr-2 mr-2">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => toggleBlock('paragraph')}
|
||||
className={isBlockActive('paragraph') ? 'theme-accent-bg text-white' : ''}
|
||||
title="Normal paragraph"
|
||||
>
|
||||
P
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => toggleBlock('heading-one')}
|
||||
className={`text-lg font-bold ${isBlockActive('heading-one') ? 'theme-accent-bg text-white' : ''}`}
|
||||
title="Heading 1"
|
||||
>
|
||||
H1
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => toggleBlock('heading-two')}
|
||||
className={`text-base font-bold ${isBlockActive('heading-two') ? 'theme-accent-bg text-white' : ''}`}
|
||||
title="Heading 2"
|
||||
>
|
||||
H2
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => toggleBlock('heading-three')}
|
||||
className={`text-sm font-bold ${isBlockActive('heading-three') ? 'theme-accent-bg text-white' : ''}`}
|
||||
title="Heading 3"
|
||||
>
|
||||
H3
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Text formatting buttons */}
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => toggleMark('bold')}
|
||||
className={`font-bold ${isMarkActive('bold') ? 'theme-accent-bg text-white' : ''}`}
|
||||
title="Bold (Ctrl+B)"
|
||||
>
|
||||
B
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => toggleMark('italic')}
|
||||
className={`italic ${isMarkActive('italic') ? 'theme-accent-bg text-white' : ''}`}
|
||||
title="Italic (Ctrl+I)"
|
||||
>
|
||||
I
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => toggleMark('underline')}
|
||||
className={`underline ${isMarkActive('underline') ? 'theme-accent-bg text-white' : ''}`}
|
||||
title="Underline"
|
||||
>
|
||||
U
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => toggleMark('strikethrough')}
|
||||
className={`line-through ${isMarkActive('strikethrough') ? 'theme-accent-bg text-white' : ''}`}
|
||||
title="Strike-through"
|
||||
>
|
||||
S
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Image insertion button */}
|
||||
<div className="flex items-center gap-1 border-l pl-2 ml-2">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={insertImage}
|
||||
className="text-green-600 hover:bg-green-50"
|
||||
title="Insert Image"
|
||||
>
|
||||
🖼️
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function SlateEditor({
|
||||
value,
|
||||
onChange,
|
||||
placeholder = 'Write your story here...',
|
||||
error,
|
||||
storyId,
|
||||
enableImageProcessing = false
|
||||
}: SlateEditorProps) {
|
||||
const [isScrollable, setIsScrollable] = useState(true);
|
||||
|
||||
// Create editor with plugins
|
||||
const editor = useMemo(
|
||||
() => withImages(withHistory(withReact(createEditor()))),
|
||||
[]
|
||||
);
|
||||
|
||||
// Convert HTML to Slate format for initial value
|
||||
const initialValue = useMemo(() => {
|
||||
debug.log('🚀 Slate Editor initializing with HTML:', { htmlLength: value?.length });
|
||||
return htmlToSlate(value);
|
||||
}, [value]);
|
||||
|
||||
// Handle changes
|
||||
const handleChange = useCallback((newValue: Descendant[]) => {
|
||||
// Convert back to HTML and call onChange
|
||||
const html = slateToHtml(newValue);
|
||||
onChange(html);
|
||||
|
||||
debug.log('📝 Slate Editor changed:', {
|
||||
htmlLength: html.length,
|
||||
nodeCount: newValue.length
|
||||
});
|
||||
}, [onChange]);
|
||||
|
||||
debug.log('🎯 Slate Editor loaded!', {
|
||||
valueLength: value?.length,
|
||||
enableImageProcessing,
|
||||
hasStoryId: !!storyId
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<Slate editor={editor} initialValue={initialValue} onChange={handleChange}>
|
||||
<Toolbar editor={editor} />
|
||||
<div className="border theme-border rounded-b-lg overflow-hidden">
|
||||
<Editable
|
||||
className={`p-3 focus:outline-none focus:ring-0 resize-none ${
|
||||
isScrollable
|
||||
? 'h-[400px] overflow-y-auto'
|
||||
: 'min-h-[300px]'
|
||||
}`}
|
||||
placeholder={placeholder}
|
||||
renderElement={Element}
|
||||
renderLeaf={Leaf}
|
||||
onKeyDown={(event) => {
|
||||
// Handle delete/backspace for selected content (including images)
|
||||
if (event.key === 'Delete' || event.key === 'Backspace') {
|
||||
const { selection } = editor;
|
||||
if (!selection) return;
|
||||
|
||||
// If there's an expanded selection, let Slate handle it naturally
|
||||
// This will delete all selected content including images
|
||||
if (!Range.isCollapsed(selection)) {
|
||||
// Slate will handle this automatically, including void elements
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle single point deletions near images
|
||||
const { anchor } = selection;
|
||||
|
||||
if (event.key === 'Delete') {
|
||||
// Delete key - check if next node is an image
|
||||
try {
|
||||
const [nextNode] = Editor.next(editor, { at: anchor }) || [];
|
||||
if (nextNode && SlateElement.isElement(nextNode) && nextNode.type === 'image') {
|
||||
event.preventDefault();
|
||||
const path = ReactEditor.findPath(editor, nextNode);
|
||||
Transforms.removeNodes(editor, { at: path });
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
// Ignore navigation errors at document boundaries
|
||||
}
|
||||
} else if (event.key === 'Backspace') {
|
||||
// Backspace key - check if previous node is an image
|
||||
try {
|
||||
const [prevNode] = Editor.previous(editor, { at: anchor }) || [];
|
||||
if (prevNode && SlateElement.isElement(prevNode) && prevNode.type === 'image') {
|
||||
event.preventDefault();
|
||||
const path = ReactEditor.findPath(editor, prevNode);
|
||||
Transforms.removeNodes(editor, { at: path });
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
// Ignore navigation errors at document boundaries
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handle keyboard shortcuts
|
||||
if (!event.ctrlKey && !event.metaKey) return;
|
||||
|
||||
switch (event.key) {
|
||||
case 'b': {
|
||||
event.preventDefault();
|
||||
const marks = Editor.marks(editor);
|
||||
const isActive = marks ? marks.bold === true : false;
|
||||
if (isActive) {
|
||||
Editor.removeMark(editor, 'bold');
|
||||
} else {
|
||||
Editor.addMark(editor, 'bold', true);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'i': {
|
||||
event.preventDefault();
|
||||
const marks = Editor.marks(editor);
|
||||
const isActive = marks ? marks.italic === true : false;
|
||||
if (isActive) {
|
||||
Editor.removeMark(editor, 'italic');
|
||||
} else {
|
||||
Editor.addMark(editor, 'italic', true);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'a': {
|
||||
// Handle Ctrl+A / Cmd+A to select all
|
||||
event.preventDefault();
|
||||
Transforms.select(editor, {
|
||||
anchor: Editor.start(editor, []),
|
||||
focus: Editor.end(editor, []),
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="text-xs theme-text">
|
||||
<p>
|
||||
<strong>Slate.js Editor:</strong> Rich text editor with advanced image paste handling.
|
||||
{isScrollable ? ' Fixed height with scrolling.' : ' Auto-expanding height.'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => setIsScrollable(!isScrollable)}
|
||||
className={isScrollable ? 'theme-accent-bg text-white' : ''}
|
||||
title={isScrollable ? 'Switch to auto-expand mode' : 'Switch to scrollable mode'}
|
||||
>
|
||||
{isScrollable ? '📜' : '📏'}
|
||||
</Button>
|
||||
</div>
|
||||
</Slate>
|
||||
|
||||
{error && (
|
||||
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user