PronounsPage/app/components/MarkSus.vue

<template>
    <span>
        <!-- eslint-disable-next-line -->
        <span v-show="!$multiIsGranted(['users', 'community']) || !hasSus" ref="original">
            <slot ref="original"></slot>
        </span>
        <span v-show="$multiIsGranted(['users', 'community']) && hasSus" ref="marked"></span>
    </span>
</template>

<script>
export default {
    emits: ['hasSus'],
    data() {
        return {
            moderation: null,
            hasSus: false,
        };
    },
    async mounted() {
        if (!$multiIsGranted(['users', 'community'])) {
            return;
        }
        this.moderation = await $fetch('/api/admin/moderation');

        this.update();

        const observer = new MutationObserver(this.update);
        observer.observe(this.$refs.original, {
            childList: true,
            subtree: true,
        });
        this.observer = observer;
    },
    beforeUnmount() {
        this.observer.disconnect();
    },
    methods: {
        update() {
            if (!this.moderation) {
                return;
            }

            let html = this.$refs.original.innerHTML;
            for (const sus of this.moderation.susRegexes) {
                html = html.replace(new RegExp(sus, 'gi'), (m) => {
                    if (m === 'map') {
                        // most probably an icon, skip
                        return m;
                    }
                    this.hasSus = true;
                    this.$emit('hasSus');
                    return `<mark>${m}</mark>`;
                });
            }
            this.$refs.marked.innerHTML = html;
        },
    },
};
</script>