20 lines
985 B
TypeScript
20 lines
985 B
TypeScript
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>
|
|
);
|
|
}
|