shardegger/storycove
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bugfixes, and logging cleanup

Browse Source
This commit is contained in:
Stefan Hardegger
2025-09-21 14:51:21 +02:00
parent 58bb7f8229
commit 0101c0ca2c
11 changed files with 271 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/components/stories/PortableTextEditorNew.tsx
View File

@@ -16,6 +16,7 @@ import { PortableText } from '@portabletext/react';
import Button from '../ui/Button';
import { sanitizeHtmlSync } from '../../lib/sanitization';
import { editorSchema } from '../../lib/portabletext/editorSchema';
import { debug } from '../../lib/debug';
interface PortableTextEditorProps {
value: string; // HTML value for compatibility - will be converted
@@ -394,13 +395,13 @@ function EditorContent({
// Sync HTML value with prop changes
useEffect(() => {
console.log('🔄 Editor value changed:', { valueLength: value?.length, valuePreview: value?.substring(0, 100) });
debug.log('🔄 Editor value changed:', { valueLength: value?.length, valuePreview: value?.substring(0, 100) });
setPortableTextValue(htmlToPortableTextBlocks(value));
}, [value]);
// Debug: log when portableTextValue changes
useEffect(() => {
console.log('📝 Portable text blocks updated:', { blockCount: portableTextValue.length, blocks: portableTextValue });
debug.log('📝 Portable text blocks updated:', { blockCount: portableTextValue.length, blocks: portableTextValue });
}, [portableTextValue]);
// Add a ref to the editor container for direct paste handling
@@ -409,13 +410,13 @@ function EditorContent({
// Global paste event listener to catch ALL paste events
useEffect(() => {
const handleGlobalPaste = (event: ClipboardEvent) => {
console.log('🌍 Global paste event captured');
debug.log('🌍 Global paste event captured');
// Check if the paste is happening within our editor
const target = event.target as Element;
const isInEditor = editorContainerRef.current?.contains(target);
console.log('📋 Paste details:', {
debug.log('📋 Paste details:', {
isInEditor,
targetTag: target?.tagName,
targetClasses: target?.className,
@@ -426,7 +427,7 @@ function EditorContent({
const htmlData = event.clipboardData.getData('text/html');
const textData = event.clipboardData.getData('text/plain');
console.log('📋 Clipboard contents:', {
debug.log('📋 Clipboard contents:', {
htmlLength: htmlData.length,
textLength: textData.length,
hasImages: htmlData.includes('<img'),
@@ -434,7 +435,7 @@ function EditorContent({
});
if (htmlData && htmlData.includes('<img')) {
console.log('📋 Images detected in paste! Attempting to process...');
debug.log('📋 Images detected in paste! Attempting to process...');
// Prevent default paste to handle it completely ourselves
event.preventDefault();
@@ -443,7 +444,7 @@ function EditorContent({
// Convert the pasted HTML to our blocks maintaining order
const pastedBlocks = htmlToPortableTextBlocks(htmlData);
console.log('📋 Converted blocks:', pastedBlocks.map(block => ({
debug.log('📋 Converted blocks:', pastedBlocks.map(block => ({
type: block._type,
key: block._key,
...(block._type === 'image' ? { src: (block as any).src, alt: (block as any).alt } : {}),
@@ -457,7 +458,7 @@ function EditorContent({
const updatedBlocks = [...prev, ...pastedBlocks];
const html = portableTextToHtml(updatedBlocks);
onChange(html);
console.log('📋 Added structured blocks maintaining order:', { pastedCount: pastedBlocks.length, totalBlocks: updatedBlocks.length });
debug.log('📋 Added structured blocks maintaining order:', { pastedCount: pastedBlocks.length, totalBlocks: updatedBlocks.length });
return updatedBlocks;
});
}, 10);
@@ -476,7 +477,7 @@ function EditorContent({
// Handle paste events directly on the editor container (backup approach)
const handleContainerPaste = useCallback((_event: React.ClipboardEvent) => {
console.log('📦 Container paste handler triggered');
debug.log('📦 Container paste handler triggered');
// This might not be reached if global handler prevents default
}, []);
@@ -526,11 +527,11 @@ function EditorContent({
const renderBlock: RenderBlockFunction = useCallback((props) => {
const { schemaType, value, children } = props;
console.log('🎨 Rendering block:', { schemaType: schemaType.name, valueType: value?._type, value });
debug.log('🎨 Rendering block:', { schemaType: schemaType.name, valueType: value?._type, value });
// Handle image blocks
if (schemaType.name === 'image' && isImageBlock(value)) {
console.log('🖼️ Rendering image block:', value);
debug.log('🖼️ Rendering image block:', value);
return (
<div className="my-4 p-3 border border-dashed border-gray-300 rounded-lg bg-gray-50">
<div className="flex items-center gap-2 mb-2">
@@ -654,7 +655,7 @@ export default function PortableTextEditorNew({
storyId,
enableImageProcessing = false
}: PortableTextEditorProps) {
console.log('🎯 Portable Text Editor loaded!', {
debug.log('🎯 Portable Text Editor loaded!', {
valueLength: value?.length,
enableImageProcessing,
hasStoryId: !!storyId