<template>
  <div v-html="markdownToHTML(trimmedRaw)" class="markdown-content"></div>
</template>

<script>
import { markdownToHTML } from "@/utils/markdown";
export default {
  name: "MarkdownText",
  props: {
    raw: String
  },
  data() {
    return {
      trimmedRaw: ""
    };
  },
  methods: {
    markdownToHTML
  },
  mounted() {
    this.trimmedRaw = this.raw.trim();
  },
};
</script>

<style lang="scss">
.markdown-content {
  word-break: break-all;
  white-space: pre-wrap;
  margin-top: 16px;

  p {
    margin-bottom: 0;
  }

  img {
    max-width: 80%;
  }
}
</style>