stream-chat-react/dist/components/Message/renderText/remarkPlugins/imageToLink.js

React components to create chat conversations or livestream style chat

import { SKIP, visit } from 'unist-util-visit';
const text = (value) => ({ type: 'text', value });
/**
 * Converts image Markdown links (![Minion](https://octodex.github.com/images/minion.png))
 * to HTML <a href={url}>{url | title | alt}</a>
 *
 * By default, the anchor text content is the image url so that image preview can be generated / enriched on the server.
 * @param getTextLabelFrom
 */
export function imageToLink({ getTextLabelFrom = 'url' } = {}) {
    return (tree) => {
        const visitor = (node, index, parent) => {
            if (parent == null || index == null)
                return;
            const label = node[getTextLabelFrom] ?? node.url; // node.alt || node.title || node.url;
            const link = {
                children: [text(label)],
                title: node.title ?? node.alt ?? node.url,
                type: 'link',
                url: node.url,
            };
            parent.children.splice(index, 1, link);
            return [SKIP, index + 1];
        };
        visit(tree, 'image', visitor);
    };
}