@mintlify/common/dist/mdx/plugins/rehype/rehypeZoomImages.js

Commonly shared code within Mintlify

import { u } from 'unist-builder';
import { visit } from 'unist-util-visit';
const isInsideTile = (parent) => {
    if (parent && 'name' in parent && parent.name === 'Tile') {
        return true;
    }
    return false;
};
export const rehypeZoomImages = () => (tree) => {
    visit(tree, 'mdxJsxFlowElement', (node, index, parent) => {
        if (node.name === 'img' ||
            node.name === 'picture' ||
            node.name === 'figure' ||
            node.name === 'iframe') {
            const noZoom = node.attributes.find((attr) => attr.type === 'mdxJsxAttribute' && attr.name === 'noZoom');
            const shouldSkipZoom = noZoom || isInsideTile(parent);
            if (parent && index != null) {
                // For img elements, replace with OptimizedImage (it applies Zoom internally)
                if (node.name === 'img' && !shouldSkipZoom) {
                    const optimizedImg = u('mdxJsxFlowElement', {
                        name: 'OptimizedImage',
                        attributes: node.attributes,
                    }, []);
                    parent.children.splice(index, 1, optimizedImg);
                }
                else if (!shouldSkipZoom) {
                    parent.children.splice(index, 1, u('element', {
                        tagName: 'ZoomImage',
                        properties: {},
                    }, [node]));
                }
                if (node.name === 'iframe') {
                    parent.children.splice(index, 1, u('mdxJsxFlowElement', { name: 'OptimizedFrame', attributes: node.attributes }, []));
                }
            }
        }
    });
};