37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
|
import { useStateValue } from "@guanghechen/react-viewmodel";
|
||
|
|
import type { Definition, ImageReference } from "@yozora/ast";
|
||
|
|
import React from "react";
|
||
|
|
import { useNodeRendererContext, type INodeRenderer, astClasses } from "../context";
|
||
|
|
import { ImageRendererInner } from "./inner/ImageRendererInner";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Render `imageReference`.
|
||
|
|
*
|
||
|
|
* @see https://www.npmjs.com/package/@yozora/ast#imageReference
|
||
|
|
* @see https://www.npmjs.com/package/@yozora/tokenizer-image-reference
|
||
|
|
*/
|
||
|
|
export const ImageReferenceRenderer: INodeRenderer<ImageReference> = props => {
|
||
|
|
const { viewmodel } = useNodeRendererContext();
|
||
|
|
const definitionMap: Readonly<Record<string, Definition>> = useStateValue(
|
||
|
|
viewmodel.definitionMap$,
|
||
|
|
);
|
||
|
|
const { alt, srcSet, sizes, loading } = props as ImageReference &
|
||
|
|
React.ImgHTMLAttributes<HTMLElement>;
|
||
|
|
|
||
|
|
const definition = definitionMap[props.identifier];
|
||
|
|
const src: string = definition?.url ?? "";
|
||
|
|
const title: string | undefined = definition?.title;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ImageRendererInner
|
||
|
|
alt={alt}
|
||
|
|
src={src}
|
||
|
|
title={title}
|
||
|
|
srcSet={srcSet}
|
||
|
|
sizes={sizes}
|
||
|
|
loading={loading}
|
||
|
|
className={astClasses.imageReference}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|