src/components/preview/index.tsx

import style from "./style.module.scss";
import {useMemo} from "preact/hooks";
import {smileysMap} from "../../utils/smileys";

// const blocks = {
//     text: "text",
//     img: "img",
// }
//
// type Segment = {
//     type: keyof typeof blocks,
//     content: string,
// }


export function Preview(props: {
    raw: string,
}) {
    // console.log(parseRaw(props.raw))

    // const segments = useMemo(() => {
    //     return parseRaw(props.raw);
    // }, [props.raw]);

    const html = useMemo(() => {
        // console.log(escapeHtml(props.raw))
        const escaped = escapeHtml(props.raw);
        // const withBr = escaped.replace(/\n/g, '<br/>')
        // console.log(withBr)
        return injectHTML(escaped).replace(/\n/g, '<br/>')
    }, [props.raw]);

    return (
        <div className={style.wrapper} dangerouslySetInnerHTML={{__html: html}}/>
    )
    //
    // return (
    //     <div className={style.wrapper}>
    //         {segments.map(seg => {
    //             if (seg.type === blocks.text) {
    //                 return seg.content
    //             }
    //
    //             if (seg.type === blocks.img) {
    //                 return <img width="68" height="51" alt="noelshak" src={seg.content}/>
    //             }
    //         })}
    //     </div>
    // )
}

const jvcodeMap: [RegExp, string | ((reg: RegExp, raw: string) => string)][] = [
    // [/(https?:\/\/image\.noelshack\.com\/\S+)/g]: "<img width=\"68\" height=\"51\" alt=\"noelshak\" src=\"$1\"/>"
    [ // Stickers
        /(^| )https?:\/\/image\.noelshack\.com\/(?:fichiers|minis)(\S+)/gm,
        "$1<img width=\"68\" height=\"51\" alt=\"noelshak\" src=\"https://image.noelshack.com/minis/$2\"/>"
    ],
    [ // Vocaroo
        /(^| )https:\/\/vocaroo.com\/(.+)/gm,
        "$1<div><iframe width=\"300\" height=\"60\" src=\"https://vocaroo.com/embed/$2?autoplay=0\" frameborder=\"0\" allow=\"autoplay\"></iframe></div>"
    ],
    [ // Citations
        /^(?:&gt;.*(?:\n&gt;.*)*)/g,
        (reg, raw) => {
            // return raw
            const match = reg.exec(raw);
            if (!match) return raw;

            console.log(match);
            const index = match.index;
            const length = match[0].length;

            return raw.substring(0, index) + `<blockquote>${match[0].replace(/^&gt;/gm, "")}</blockquote>` + raw.substring(index + length);
            // console.log(match)
            // const content = match[0].replace(/^>/gm, "");
            // return `<blockquote>${content}</blockquote>`;
        }
    ],
    [ // Spoil
        /&lt;spoil&gt;(.*?)&lt;\/spoil&gt;/gm,
        (reg, raw) => { // Citations
            return raw.replace(reg, (_, matched) => {
                const randomId = (Math.random() + 1).toString(36).substring(2);
                return `<span class="bloc-spoil-jv"><input type="checkbox" id="${randomId}" class="open-spoil"><label class="barre-head" for="${randomId}"><span class="txt-spoil">Spoil</span></label><span class="contenu-spoil">${matched}</span></span>`;
            });
        }
    ],
    [ // Regular links
        /(^| )(https?:\/\/\S+)/gm,
        "$1<a href=\"$2\" target=\"_blank\">$2</a>"
    ],

    // Generate regexes for smileys
    // ...smileysMap.map((maping) => {
    //     return [new RegExp(
    //         Object.keys(smileysMap).map(s => (
    //             "(?:(?:^| )" + s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ")"
    //         )).join("|"), "gm"
    //     ), `<img src="${maping[1]}" width="16" height="16" alt=""/>`]
    // })
    // (() => {
    //     new RegExp(
    //         smileysMap.map((mapping) => (
    //             "(?:(?:^| )" + s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ")"
    //         )).join("|"), "gm"
    //     )
    //     return [/(https?:\/\/image\.noelshack\.com\/\S+)/g, "<img width=\"68\" height=\"51\" alt=\"noelshak\" src=\"$1\"/>"]
    // })()
    ...smileysMap.map(mapping => {
        return [
            new RegExp("(?:(^| )" + mapping[0].replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ")", "gm"),
            `$1<img src="https://image.jeuxvideo.com/smileys_img/${mapping[1]}.gif" alt="${mapping[0]}"/>`
        ];
    })
];

// console.log(jvcodeMap)

function injectHTML(input: string): string {
    let previousInput;
    // console.log(Object.entries(jvcodeMap))
    do {
        previousInput = input; // Keep track of input before replacements
        for (const [regex, htmlOrFunc] of jvcodeMap) {
            // const regex = new RegExp(bbCode, 'gi');
            // console.log(regex, html, input)
            if (htmlOrFunc instanceof Function) {
                input = htmlOrFunc(regex, input);
            } else {
                input = input.replace(regex, htmlOrFunc as string);
            }
        }
        // } while (input !== previousInput); // Repeat until no more replacements
    } while (false); // Repeat until no more replacements

    // console.log(input)
    return input;
}

function escapeHtml(unsafe: string): string {
    // unsafe.re
    return unsafe
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

// function parseRaw(raw: string): Segment[] {
//     // Regex pour capturer les URLs (HTTP, HTTPS)
//     const urlRegex = /(https?:\/\/[^\s]+)/g;
//
//     // Découper le texte en utilisant la regex, en gardant les URLs comme blocs séparés
//     return raw.split(urlRegex).filter(seg => seg !== "").map(seg => {
//         return {
//             type: seg.includes(".png") || seg.includes(".jpg") ? blocks.img : blocks.text,
//             content: seg,
//         }
//     });
// }