<template>
  <div class="md-preview">
    <div v-html="renderedMarkdown" class="markdown-body"></div>
  </div>
</template>

<script>
import { marked } from '@/utils/markedExtensions'

function sanitizeHtml(html) {
  return html
    .replace(/<script[\s\S]*?<\/script>/gi, '')
    .replace(/<script[^>]*>/gi, '')
    .replace(/\son\w+\s*=\s*("[^"]*"|'[^']*'|[^\s>]*)/gi, '')
    .replace(/javascript\s*:/gi, 'blocked:')
    .replace(/<iframe[\s\S]*?<\/iframe>/gi, '')
    .replace(/<object[\s\S]*?<\/object>/gi, '')
    .replace(/<embed[^>]*>/gi, '')
    .replace(/<form[\s\S]*?<\/form>/gi, '')
}

export default {
  name: 'MarkdownPreview',
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  computed: {
    renderedMarkdown() {
      return sanitizeHtml(marked(this.content))
    }
  }
}
</script>

<style scoped>
.md-preview {
  padding: 20px;
  background: white;
  border-radius: 8px;
  min-height: 200px;
}
</style>