cyber/src/pages/demoPages/podExercise/QuestionText.vue

<template>
  <general-renderer :content-input="processedText" class="question-text"></general-renderer>
<!--  <div v-html="processedText" class="question-text"></div>-->
</template>

<script setup>
import { computed } from 'vue';
import GeneralRenderer from "../../../components/GeneralRenderer.vue";

const props = defineProps({
  text: {
    type: String,
    required: true
  },
  medias: {
    type: Object,
    required: true
  }
});

const mediaRegex = /<media i(\d+)>/g;

function replaceMedia(text, medias) {
  return text.replace(mediaRegex, (match, id) => {
    const mediaKey = `m${id}`;
    if (medias[mediaKey]) {
      const [type, url, width, height] = medias[mediaKey];
      if (type === 'image') {
        return `<img class="pod-image" src="${url}" width="100%" height="auto" alt="Question Image" />`;
      }
    }
    return '';
  });
}

const processedText = computed(() => replaceMedia(props.text, props.medias));
</script>

<style scoped>

</style>