Image Components

This document describes two related image components: ImageView and ImageNodeView. The ImageView is a standalone component for displaying and editing images, while ImageNodeView is a wrapper that integrates with ProseMirror editor.

ImageView

A standalone image component that supports resizing and cropping operations.

Properties

Property	Type	Required	Default	Description
initialAttrs	ImageAttrs	Yes	-	Initial image attributes including source, dimensions, and crop settings
onResize	(scale: number) => void	No	-	Callback function when image is resized
onCrop	(crop: Crop) => void	No	-	Callback function when image is cropped
lastUpdated	string	No	-	Timestamp showing when the image was last updated
showControls	boolean	No	true	Whether to show edit controls (resize/crop)

ImageAttrs Interface

interface ImageAttrs {
  src: string;        // Image source URL
  width: number;      // Image width
  height: number;     // Image height
  cropX: number;      // Crop X position
  cropY: number;      // Crop Y position
  cropWidth: number;  // Crop width
  cropHeight: number; // Crop height
  scale: number;      // Image scale factor
}

Usage Example

import { ImageView } from './ImageNodeView';

const MyComponent = () => {
  const imageAttrs = {
    src: 'https://example.com/image.jpg',
    width: 800,
    height: 600,
    cropX: 0,
    cropY: 0,
    cropWidth: 800,
    cropHeight: 600,
    scale: 1
  };

  const handleResize = (scale: number) => {
    console.log('Image resized with scale:', scale);
    // Handle resize logic
  };

  const handleCrop = (crop: Crop) => {
    console.log('Image cropped:', crop);
    // Handle crop logic
  };

  return (
    <ImageView
      initialAttrs={imageAttrs}
      onResize={handleResize}
      onCrop={handleCrop}
      lastUpdated="2025-01-16 14:17:04"
      showControls={true}
    />
  );
};

ImageNodeView

A ProseMirror-specific wrapper component that integrates the ImageView with ProseMirror editor.

Properties

Property	Type	Required	Description
node	NodeViewComponentProps	Yes	ProseMirror node properties

Usage in ProseMirror

import { ImageNodeView } from './ImageNodeView';

// In your ProseMirror editor configuration
const reactNodeViews = {
  image: () => ({
    component: ImageNodeView,
    dom: document.createElement('div'),
    contentDOM: document.createElement('img')
  })
};

// In your editor component
const MyEditor = () => {
  return (
    <ProseMirror
      // ... other props
      nodeViews={reactNodeViews}
    >
      {/* ... editor content */}
    </ProseMirror>
  );
};

Features

• Resizable Images: Users can resize images while maintaining aspect ratio
• Image Cropping: Built-in cropping functionality with preview
• Last Updated Display: Optional timestamp display for backend synchronization
• Conditional Controls: Show/hide edit controls based on requirements
• ProseMirror Integration: Seamless integration with ProseMirror editor

Notes

• The ImageView component can be used independently of ProseMirror
• The ImageNodeView handles all ProseMirror-specific logic and state updates
• Both components support the same image manipulation features
• Edit controls (resize/crop) can be toggled using the showControls prop