mattermost-mobile/app/components/markdown/transform.ts

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import {Node, type NodeType} from 'commonmark';
import urlParse from 'url-parse';

import {DeepLink} from '@constants';
import {parseDeepLink} from '@utils/deep_link';
import {escapeRegex} from '@utils/markdown';
import {safeDecodeURIComponent} from '@utils/url';

import type {HighlightWithoutNotificationKey, SearchPattern, UserMentionKey} from '@typings/global/markdown';
import type {DeepLinkChannel, DeepLinkPermalink} from '@typings/launch';

/* eslint-disable no-underscore-dangle */

const cjkPattern = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf\uac00-\ud7a3]/;

// Combines adjacent text nodes into a single text node to make further transformation easier
export function combineTextNodes(ast: any) {
    const walker = ast.walker();

    let e;
    while ((e = walker.next())) {
        if (!e.entering) {
            continue;
        }

        const node = e.node;

        if (node.type !== 'text') {
            continue;
        }

        while (node._next && node._next.type === 'text') {
            const next = node._next;

            node.literal += next.literal;

            node._next = next._next;
            if (node._next) {
                node._next._prev = node;
            }

            if (node._parent._lastChild === next) {
                node._parent._lastChild = node;
            }
        }

        // Resume parsing after the current node since otherwise the walker would continue to parse any old text nodes
        // that have been merged into this one
        walker.resumeAt(node, false);
    }

    return ast;
}

// Add indices to the items of every list
export function addListItemIndices(ast: any) {
    const walker = ast.walker();

    let e;
    while ((e = walker.next())) {
        if (e.entering) {
            const node = e.node;

            if (node.type === 'list') {
                let i = node.listStart == null ? 1 : node.listStart; // List indices match what would be displayed in the UI

                for (let child = node.firstChild; child; child = child.next) {
                    child.index = i;

                    i += 1;
                }
            }
        }
    }

    return ast;
}

// Take all images that aren't inside of tables and move them to be children of the root document node.
// When this happens, their parent nodes are split into two, if necessary, with the version that follows
// the image having its "continue" field set to true to indicate that things like bullet points don't
// need to be rendered.
export function pullOutImages(ast: any) {
    const walker = ast.walker();

    let e;
    while ((e = walker.next())) {
        if (!e.entering) {
            continue;
        }

        const node = e.node;

        // Skip tables because we'll render images inside of those as links
        if (node.type === 'table') {
            walker.resumeAt(node, false);
            continue;
        }

        if (node.type === 'image' && node.parent?.type !== 'document') {
            pullOutImage(node);
        }
    }

    return ast;
}

function pullOutImage(image: any) {
    const parent = image.parent;

    if (parent?.type === 'link') {
        image.linkDestination = parent.destination;
    }
}

export function highlightMentions(ast: Node, mentionKeys: UserMentionKey[]) {
    const walker = ast.walker();

    const patterns = mentionKeysToPatterns(mentionKeys);

    let e;
    while ((e = walker.next())) {
        if (!e.entering) {
            continue;
        }

        const node = e.node;

        if (node.type === 'text' && node.literal) {
            const {index, length} = getFirstMatch(node.literal, patterns);

            if (index === -1) {
                continue;
            }

            const mentionNode = highlightTextNode(node, index, index + length, 'mention_highlight');

            // Resume processing on the next node after the mention node which may include any remaining text
            // that was part of this one
            walker.resumeAt(mentionNode, false);
        } else if (node.type === 'at_mention') {
            const matches = mentionKeys.some((mention) => {
                const mentionName = '@' + node.mentionName;
                const flags = mention.caseSensitive ? '' : 'i';
                const pattern = new RegExp(`@${escapeRegex(mention.key.replace('@', ''))}\\.?\\b`, flags);

                return pattern.test(mentionName);
            });

            if (!matches) {
                continue;
            }

            const wrapper = new Node('mention_highlight');
            wrapNode(wrapper, node);

            // Skip processing the wrapper to prevent checking this node again as its child
            walker.resumeAt(wrapper, false);
        }
    }

    return ast;
}

export function mentionKeysToPatterns(mentionKeys: UserMentionKey[]) {
    return mentionKeys.filter((mention) => mention.key.trim() !== '').map((mention) => {
        const flags = mention.caseSensitive ? '' : 'i';
        let pattern;
        if (cjkPattern.test(mention.key)) {
            pattern = new RegExp(`${escapeRegex(mention.key)}`, flags);
        } else {
            pattern = new RegExp(`\\b${escapeRegex(mention.key)}(?=_*\\b)`, flags);
        }

        return pattern;
    });
}

export function highlightWithoutNotification(ast: Node, highlightKeys: HighlightWithoutNotificationKey[]) {
    const walker = ast.walker();

    const patterns = highlightKeysToPatterns(highlightKeys);

    let e;
    while ((e = walker.next())) {
        if (!e.entering) {
            continue;
        }

        const node = e.node;
        if (node.type === 'text' && node.literal) {
            const {index, length} = getFirstMatch(node.literal, patterns);

            // If the text node doesn't match any of the patterns, skip the loop
            if (index === -1) {
                continue;
            }

            const matchNode = highlightTextNode(node, index, index + length, 'highlight_without_notification');

            // Resume processing on the next node after the match node which may include any remaining text
            // that was part of this one
            walker.resumeAt(matchNode, false);
        }
    }
    return ast;
}

export function highlightKeysToPatterns(highlightKeys: HighlightWithoutNotificationKey[]) {
    if (highlightKeys.length === 0) {
        return [];
    }

    return highlightKeys.
        filter((highlight) => highlight.key.trim() !== '').
        sort((a, b) => b.key.length - a.key.length).
        map(({key}) => {
            if (cjkPattern.test(key)) {
                // If the key contains Chinese, Japanese, Korean or Russian characters, don't mark word boundaries
                return new RegExp(`${escapeRegex(key)}`, 'gi');
            }

            // If the key contains only English characters, mark word boundaries
            return new RegExp(`(^|\\b)(${escapeRegex(key)})(?=_*\\b)`, 'gi');
        });
}

export function highlightSearchPatterns(ast: Node, searchPatterns: SearchPattern[]) {
    const walker = ast.walker();

    let e;
    while ((e = walker.next())) {
        if (!e.entering) {
            continue;
        }

        const node = e.node;
        if ((node.type === 'text' || node.type === 'code') && node.literal) {
            for (const patternPattern of searchPatterns) {
                const {index, length} = getFirstMatch(node.literal, [patternPattern.pattern]);

                // TODO we might need special handling here for if the search term is part of a hashtag

                if (index === -1) {
                    continue;
                }

                const matchNode = highlightTextNode(node, index, index + length, 'search_highlight');

                // Resume processing on the next node after the match node which may include any remaining text
                // that was part of this one
                walker.resumeAt(matchNode, false);
            }
        }
    }

    return ast;
}

// Given a string and an array of regexes, returns the index and length of the first match.
export function getFirstMatch(str: string, patterns: RegExp[]) {
    let firstMatchIndex = -1;
    let firstMatchLength = -1;

    for (const pattern of patterns) {
        let matchResult;
        if (pattern.global || pattern.sticky) {
            // Since regex objects are stateful in global or sticky flags, we need to reset
            const regex = new RegExp(pattern.source, pattern.flags);
            matchResult = regex.exec(str);
        } else {
            matchResult = pattern.exec(str);
        }

        if (!matchResult || matchResult[0] === '') {
            continue;
        }

        if (firstMatchIndex === -1 || matchResult.index < firstMatchIndex) {
            firstMatchIndex = matchResult.index;
            firstMatchLength = matchResult[0].length;
        }
    }

    return {
        index: firstMatchIndex,
        length: firstMatchLength,
    };
}

// Given a text node, start/end indices, and a highlight node type, splits it into up to three nodes:
// the text before the highlight (if any exists), the highlighted text, and the text after the highlight
// the end of the highlight (if any exists). Returns a node containing the highlighted text.
export function highlightTextNode(node: Node, start: number, end: number, type: NodeType) {
    const literal = node.literal;
    node.literal = literal!.substring(start, end);

    // Start by wrapping the node and then re-insert any non-highlighted code around it
    const highlighted = new Node(type);
    wrapNode(highlighted, node);

    if (start !== 0) {
        const before = new Node('text');
        before.literal = literal!.substring(0, start);

        highlighted.insertBefore(before);
    }

    if (end !== literal!.length) {
        const after = new Node('text');
        after.literal = literal!.substring(end);

        highlighted.insertAfter(after);
    }

    return highlighted;
}

// Wraps a given node in another node of the given type. The wrapper will take the place of
// the node in the AST relative to its parents and siblings, and it will have the node as
// its only child.
function wrapNode(wrapper: any, node: any) {
    // Set parent and update parent's children if necessary
    wrapper._parent = node._parent;
    if (node._parent._firstChild === node) {
        node._parent._firstChild = wrapper;
    }
    if (node._parent._lastChild === node) {
        node._parent._lastChild = wrapper;
    }

    // Set siblings and update those if necessary
    wrapper._prev = node._prev;
    node._prev = null;
    if (wrapper._prev) {
        wrapper._prev._next = wrapper;
    }

    wrapper._next = node._next;
    node._next = null;
    if (wrapper._next) {
        wrapper._next._prev = wrapper;
    }

    // Make node a child of wrapper
    wrapper._firstChild = node;
    wrapper._lastChild = node;
    node._parent = wrapper;
}

export function parseTaskLists(ast: Node) {
    const walker = ast.walker();

    let e;
    while ((e = walker.next())) {
        if (!e.entering) {
            continue;
        }

        const node = e.node;

        if (node.type !== 'item') {
            continue;
        }

        if (node.firstChild?.type === 'paragraph' && node.firstChild?.firstChild?.type === 'text') {
            const paragraphNode = node.firstChild;
            const textNode = node.firstChild.firstChild;

            const literal = textNode.literal ?? '';

            const match = (/^ {0,3}\[( |x)\]\s/).exec(literal);
            if (match) {
                const checkbox = new Node('checkbox');
                checkbox.isChecked = match[1] === 'x';

                paragraphNode.prependChild(checkbox);

                textNode.literal = literal.substring(match[0].length);
            }
        }
    }

    return ast;
}

/**
 * Parse a citation URL to extract entity type and identifier.
 * Citation URLs must have view=citation as a query parameter.
 * Uses parseDeepLink for URL structural parsing.
 *
 * URL patterns:
 * - Post: /team/pl/postId?view=citation
 * - Channel: /team/channels/channelName?view=citation
 *
 * @param url - The URL to parse
 * @param serverUrl - Optional server URL to validate this is an internal link
 * @returns Parsed citation info or null if not a valid citation URL
 */
export function parseCitationUrl(url: string, serverUrl?: string): {entityType: string; entityId: string; linkUrl: string} | null {
    const decodedUrl = safeDecodeURIComponent(url);
    const parsedUrl = urlParse(decodedUrl, true);

    // Check if view=citation is a proper query parameter
    if (parsedUrl.query.view !== 'citation') {
        return null;
    }

    // If serverUrl is provided, validate this is an internal link
    if (serverUrl) {
        const parsedServerUrl = urlParse(serverUrl);
        const normalizedServerHost = parsedServerUrl.hostname.toLowerCase();
        const normalizedUrlHost = parsedUrl.hostname.toLowerCase();

        if (normalizedUrlHost !== normalizedServerHost) {
            return null;
        }

        if (parsedServerUrl.port && parsedUrl.port !== parsedServerUrl.port) {
            return null;
        }
    }

    // Use parseDeepLink to determine the entity type from the URL structure
    const deepLink = parseDeepLink(decodedUrl);

    switch (deepLink.type) {
        case DeepLink.Permalink: {
            const data = deepLink.data as DeepLinkPermalink;
            return {
                entityType: 'POST',
                entityId: data.postId,
                linkUrl: url,
            };
        }
        case DeepLink.Channel: {
            const data = deepLink.data as DeepLinkChannel;
            return {
                entityType: 'CHANNEL',
                entityId: data.channelName,
                linkUrl: url,
            };
        }
        default:
            return null;
    }
}

/**
 * Process markdown links with ?view=citation query parameter and
 * replace them with inline_entity_link nodes that will be rendered as clickable link icons.
 *
 * This handles the new citation format:
 * - [text](http://server/team/pl/postId?view=citation) -> post citation
 * - [text](http://server/team/channels/channelName?view=citation) -> channel citation
 * - [text](http://server/team?view=citation) -> team citation
 *
 * @param ast - The AST to process
 * @param serverUrl - Optional server URL to validate internal links only
 */
export function processInlineEntities(ast: Node, serverUrl?: string) {
    const walker = ast.walker();

    let e;
    while ((e = walker.next())) {
        if (!e.entering) {
            continue;
        }

        const node: any = e.node;

        // Look for link nodes with citation query parameter
        if (node.type !== 'link' || !node.destination) {
            continue;
        }

        const parsed = parseCitationUrl(node.destination, serverUrl);
        if (!parsed) {
            continue;
        }

        // Create the inline entity link node
        const entityNode: any = new Node('inline_entity_link' as any);
        entityNode.entityType = parsed.entityType;
        entityNode.entityId = parsed.entityId;
        entityNode.linkUrl = parsed.linkUrl;

        // Replace the link node with the entity node
        node.insertBefore(entityNode);
        node.unlink();

        // Resume at the entity node
        walker.resumeAt(entityNode, false);
    }

    return ast;
}