Tính năng Resize & Text Wrapping cho Hình ảnh

import Image from '@tiptap/extension-image'
import { ReactNodeViewRenderer } from '@tiptap/react'
import { ImageNodeView } from '../components/ImageNodeView'

export const CustomImage = Image.extend({
  addAttributes() {
    return {
      ...this.parent?.(),
      width: {
        default: 400,
        parseHTML: element => parseInt(element.getAttribute('width') || element.style.width, 10) || 400,
        renderHTML: attributes => ({
          width: attributes.width,
          style: `width: ${attributes.width}px;`
        })
      },
      height: {
        default: 300,
        parseHTML: element => parseInt(element.getAttribute('height') || element.style.height, 10) || 300,
        renderHTML: attributes => ({
          height: attributes.height,
          style: `height: ${attributes.height}px;`
        })
      },
      align: {
        default: 'center',
        parseHTML: element => element.getAttribute('data-align') || 'center',
        renderHTML: attributes => ({ 'data-align': attributes.align })
      },
      wrap: {
        default: 'inline',
        parseHTML: element => element.getAttribute('data-wrap') || 'inline',
        renderHTML: attributes => ({ 'data-wrap': attributes.wrap })
      }
    }
  },
  inline: true, // Cho phép inline để float hoạt động
  group: 'inline',
  addNodeView() {
    return ReactNodeViewRenderer(ImageNodeView)
  }
})

import React, { useRef } from 'react'
import { NodeViewWrapper, NodeViewProps } from '@tiptap/react'

export const ImageNodeView = ({ node, updateAttributes, selected }: NodeViewProps) => {
  const { src, width, height, align, wrap } = node.attrs
  const imgRef = useRef<HTMLImageElement>(null)

  const handleResize = (direction: string, event: React.MouseEvent) => {
    event.preventDefault()
    event.stopPropagation()

    const startX = event.clientX
    const startY = event.clientY
    const startWidth = width
    const startHeight = height
    const aspectRatio = startWidth / startHeight

    const onMouseMove = (moveEvent: MouseEvent) => {
      const deltaX = moveEvent.clientX - startX
      let newWidth = startWidth

      if (direction.includes('Right')) {
        newWidth = startWidth + deltaX
      } else {
        newWidth = startWidth - deltaX
      }

      newWidth = Math.max(50, newWidth) // Kích thước tối thiểu
      const newHeight = Math.round(newWidth / aspectRatio)

      updateAttributes({
        width: newWidth,
        height: newHeight
      })
    }

    const onMouseUp = () => {
      document.removeEventListener('mousemove', onMouseMove)
      document.removeEventListener('mouseup', onMouseUp)
    }

    document.addEventListener('mousemove', onMouseMove)
    document.addEventListener('mouseup', onMouseUp)
  }

  // Tạo các class CSS động dựa trên align và wrap
  const wrapperStyle: React.CSSProperties = {
    display: wrap === 'inline' ? 'inline-block' : 'block',
    float: wrap === 'square' ? (align === 'center' ? 'none' : align) : 'none',
    textAlign: wrap === 'top-bottom' ? align : undefined,
    margin: '10px',
    position: 'relative',
  }

  return (
    <NodeViewWrapper className="image-node-view-wrapper" style={wrapperStyle}>
      <div className={`image-container ${selected ? 'is-selected' : ''}`} style={{ display: 'inline-block', position: 'relative' }}>
        <img ref={imgRef} src={src} style={{ width: `${width}px`, height: `${height}px`, display: 'block' }} alt="" />
        
        {selected && (
          <>
            <div className="resize-handle top-left" onMouseDown={e => handleResize('topLeft', e)} />
            <div className="resize-handle top-right" onMouseDown={e => handleResize('topRight', e)} />
            <div className="resize-handle bottom-left" onMouseDown={e => handleResize('bottomLeft', e)} />
            <div className="resize-handle bottom-right" onMouseDown={e => handleResize('bottomRight', e)} />
            
            <!-- Nút bấm nổi (Bubble Menu) thay đổi align / wrap -->
            <div className="image-toolbar" contentEditable={false}>
              <button onClick={() => updateAttributes({ wrap: 'inline' })} className={wrap === 'inline' ? 'active' : ''}>Inline</button>
              <button onClick={() => updateAttributes({ wrap: 'square' })} className={wrap === 'square' ? 'active' : ''}>Wrap Text</button>
              <button onClick={() => updateAttributes({ wrap: 'top-bottom' })} className={wrap === 'top-bottom' ? 'active' : ''}>Break Text</button>
              |
              <button onClick={() => updateAttributes({ align: 'left' })} className={align === 'left' ? 'active' : ''}>Left</button>
              <button onClick={() => updateAttributes({ align: 'center' })} className={align === 'center' ? 'active' : ''}>Center</button>
              <button onClick={() => updateAttributes({ align: 'right' })} className={align === 'right' ? 'active' : ''}>Right</button>
            </div>
          </>
        )}
      </div>
    </NodeViewWrapper>
  )
}

/* Khung viền và handle resize cho hình ảnh khi được chọn */
.image-node-view-wrapper .image-container.is-selected {
  outline: 2px solid var(--leandix-accent);
}

.image-node-view-wrapper .resize-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--leandix-accent);
  border: 1px solid #fff;
  border-radius: 50%;
  z-index: 10;
}

.image-node-view-wrapper .resize-handle.top-left { top: -4px; left: -4px; cursor: nwse-resize; }
.image-node-view-wrapper .resize-handle.top-right { top: -4px; right: -4px; cursor: nesw-resize; }
.image-node-view-wrapper .resize-handle.bottom-left { bottom: -4px; left: -4px; cursor: nesw-resize; }
.image-node-view-wrapper .resize-handle.bottom-right { bottom: -4px; right: -4px; cursor: nwse-resize; }

/* Toolbar điều hướng nổi phía trên hình ảnh */
.image-node-view-wrapper .image-toolbar {
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  padding: 4px 8px;
  border-radius: 6px;
  display: flex;
  gap: 6px;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.image-node-view-wrapper .image-toolbar button {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 11px;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
}

.image-node-view-wrapper .image-toolbar button:hover {
  background-color: var(--border-color);
  color: var(--text-primary);
}

.image-node-view-wrapper .image-toolbar button.active {
  background-color: var(--accent);
  color: #fff;
}