diff --git a/src/toRedactor.tsx b/src/toRedactor.tsx index b8791d6..442d5c2 100644 --- a/src/toRedactor.tsx +++ b/src/toRedactor.tsx @@ -118,6 +118,46 @@ const ELEMENT_TYPES: IJsonToHtmlElementTags = { } else if (extraAttrs?.displayType === 'asset') { return `${child}` } + + else if (extraAttrs?.displayType === "display") { + const anchor = jsonBlock?.["attrs"]?.["link"]; + + const caption = jsonBlock?.["attrs"]?.["asset-caption"]; + const position = jsonBlock?.["attrs"]?.["position"]; + const inline = jsonBlock?.["attrs"]?.["inline"] + + attrs = ` src="${jsonBlock?.["attrs"]?.["asset-link"]}"` + attrs; + let img = ``; + + if (anchor) { + const target = jsonBlock?.["attrs"]?.["target"]; + let anchorAttrs = `href="${anchor}"`; + if (target) { + anchorAttrs = `${anchorAttrs} target="${target}"`; + } + img = `${img}`; + } + + if (caption || (position && position !== "none")) { + const figcaption = `
${caption}
`; + let figureAttrs = ``; + + if (position && position !== "none") { + const style = Object.entries(jsonBlock["attrs"]["style"]) + .map((entry) => entry.join(":")) + .join(";"); + + if (style) figureAttrs = ` style="${style}"`; + } + img = `${img}${ + caption ? figcaption : "" + }`; + } + if(inline){ + img = `${img}` + } + return `${img}`; + } return `${child}` }, inlineCode: (attrs: any, child: any) => {