42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import * as htmlparser2 from "htmlparser2";
|
|
|
|
import type { Mention, Tag } from "@/lib/api/entities/activity";
|
|
import type { CustomEmoji } from "@/lib/api/entities/custom_emoji";
|
|
import { Text, type ChildNode, Element } from "domhandler";
|
|
|
|
interface Props {
|
|
content: string;
|
|
emoji: CustomEmoji[];
|
|
tags?: Tag[];
|
|
mentions?: Mention[];
|
|
}
|
|
|
|
const parser = new DOMParser();
|
|
|
|
export default function HTMLContent(props: Props) {
|
|
let { content } = props;
|
|
// emoji are always in their shortcode form
|
|
props.emoji.forEach((emoji) => {
|
|
content = content.replace(new RegExp(`:${emoji.shortcode}:`, "g"), customEmojiElement(emoji));
|
|
});
|
|
|
|
const dom = htmlparser2.parseDocument(content);
|
|
const elements = parseElement(dom.children);
|
|
|
|
console.log(dom);
|
|
|
|
return elements;
|
|
}
|
|
|
|
const customEmojiElement = (emoji: CustomEmoji) => {
|
|
const elem = document.createElement("x-emoji");
|
|
elem.setAttribute("emoji", emoji.shortcode);
|
|
return elem.outerHTML;
|
|
};
|
|
|
|
function parseElement(elems: ChildNode[]) {
|
|
const out = [];
|
|
for (const elem of elems) {
|
|
if (elem instanceof Text) out.push(<>{elem.data}</>);
|
|
}
|
|
}
|