import { NodeViewWrapper, type NodeViewProps } from '@tiptap/react';

// 相对路径(库内) -> vaultasset:// 可加载 URL；远程/数据 URL 原样透传
function toDisplaySrc(src: string): string {
  if (!src) return '';
  if (/^(https?:|file:|data:|blob:|vaultasset:)/i.test(src)) return src;
  return 'vaultasset://vault/' + encodeURI(src);
}

// FR-E6：图片节点视图——相对路径自动转 vaultasset:// 展示，存储保持相对路径可移植
export function ImageView({ node, selected }: NodeViewProps) {
  const src = (node.attrs.src as string) || '';
  const display = toDisplaySrc(src);
  return (
    <NodeViewWrapper as="div" className="img-nodeview" style={{ textAlign: 'center', margin: '0.6em 0', outline: selected ? '2px solid #4a6a8a' : 'none' }}>
      <img src={display} alt={(node.attrs.alt as string) || ''} title={(node.attrs.title as string) || ''} style={{ maxWidth: '100%', borderRadius: 4 }} draggable={false} />
    </NodeViewWrapper>
  );
}