frontend/src/views/ForumThread.vue

<template>
  <main class="section">
    <b-modal v-model="postModal">
      <div class="editor">
        <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
          <div class="menubar">

            <button
                class="menubar__button"
                :class="{ 'is-active': isActive.bold() }"
                @click="commands.bold"
            >
              <icon name="bold" />
            </button>

            <button
            class="menubar__button"
            :class="{ 'is-active': isActive.italic() }"
            @click="commands.italic"
            >
            <icon name="italic" />
            </button>

            <button
                class="menubar__button"
                :class="{ 'is-active': isActive.strike() }"
                @click="commands.strike"
            >
              <icon name="strike" />
            </button>

            <button
                class="menubar__button"
                :class="{ 'is-active': isActive.underline() }"
                @click="commands.underline"
            >
              <icon name="underline" />
            </button>

            <button
                class="menubar__button"
                :class="{ 'is-active': isActive.code() }"
                @click="commands.code"
            >
              <icon name="code" />
            </button>

            <button
                class="menubar__button"
                :class="{ 'is-active': isActive.paragraph() }"
                @click="commands.paragraph"
            >
              <icon name="paragraph" />
            </button>

            <button
                class="menubar__button"
                :class="{ 'is-active': isActive.heading({ level: 1 }) }"
                @click="commands.heading({ level: 1 })"
            >
              H1
            </button>

            <button
                class="menubar__button"
                :class="{ 'is-active': isActive.heading({ level: 2 }) }"
                @click="commands.heading({ level: 2 })"
            >
              H2
            </button>

            <button
                class="menubar__button"
                :class="{ 'is-active': isActive.heading({ level: 3 }) }"
                @click="commands.heading({ level: 3 })"
            >
              H3
            </button>

            <button
                class="menubar__button"
                :class="{ 'is-active': isActive.bullet_list() }"
                @click="commands.bullet_list"
            >
              <icon name="ul" />
            </button>

            <button
                class="menubar__button"
                :class="{ 'is-active': isActive.ordered_list() }"
                @click="commands.ordered_list"
            >
              <icon name="ol" />
            </button>

            <button
                class="menubar__button"
                :class="{ 'is-active': isActive.blockquote() }"
                @click="commands.blockquote"
            >
              <icon name="quote" />
            </button>

            <button
                class="menubar__button"
                :class="{ 'is-active': isActive.code_block() }"
                @click="commands.code_block"
            >
              <icon name="code" />
            </button>

            <button
                class="menubar__button"
                @click="commands.horizontal_rule"
            >
              <icon name="hr" />
            </button>

            <button
                class="menubar__button"
                @click="commands.undo"
            >
              <icon name="undo" />
            </button>

            <button
                class="menubar__button"
                @click="commands.redo"
            >
              <icon name="redo" />
            </button>

          </div>
        </editor-menu-bar>

        <editor-content class="editor__content" :editor="editor" />
      </div>
    </b-modal>
    <h1 class="title">{{thread.name}}&nbsp;<b-tag v-if="thread.locked">Locked</b-tag><b-button @click="replyToThread()"><i class="fas fa-reply-all"></i></b-button></h1>
    <div class="">
      <div class="column" v-for='(post) in thread.Posts' :key='"threadPost-" + post.id'>
        <article class="media box">
          <figure class="media-left">
            <p class="image is-64x64">
              <img :src="'https://cdn.kaverti.com/user/avatars/headshot/' + post.User.picture + '.png'">
            </p>
          </figure>
          <div class="media-content">
            <div class="content">
              <p>
                <strong>{{post.User.username}}</strong> <small>{{ post.createdAt | formatDate }}</small>
                <br>
              <p>
              <div v-html="post.content"></div>
            </div>
          </div>
          <div class="media-right">
            <b-button @click="replyToPost(post)"><i class="fas fa-reply"></i></b-button>
          </div>
        </article>
      </div>
    </div>
  </main>
</template>

<script>
import AjaxErrorHandler from ".././assets/js/errorHandler";
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import {
  Blockquote,
  CodeBlock,
  HardBreak,
  Heading,
  HorizontalRule,
  OrderedList,
  BulletList,
  ListItem,
  TodoItem,
  TodoList,
  Bold,
  Code,
  Italic,
  Link,
  Strike,
  Underline,
  History,
} from 'tiptap-extensions'
import Icon from '../components/EditorIcons'
export default {
  name: "ForumThread",
  components: {
    EditorContent,
    EditorMenuBar,
    Icon
  },
  data() {
    return {
      thread: [],
      responseContent: '',
      offset: 0,
      loading: true,
      editor: new Editor({
        extensions: [
          new Blockquote(),
          new BulletList(),
          new CodeBlock(),
          new HardBreak(),
          new Heading({ levels: [1, 2, 3] }),
          new HorizontalRule(),
          new ListItem(),
          new OrderedList(),
          new TodoItem(),
          new TodoList(),
          new Link(),
          new Bold(),
          new Code(),
          new Italic(),
          new Strike(),
          new Underline(),
          new History(),
        ],
        content: '<p>What do you have to say</p>'
      }),
      postModal: false
    }
  },
  methods: {
    replyToThread() {

    },
    replyToPost(post) {
      post
    },
    getThread(initial) {
      this.loading = true
      if(initial) {
        this.offset = 0
        this.thread = []
      }
      this.axios
          .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'forums/thread/' + this.$route.params.id)
          .then((res) => {
            if(initial) {
              this.thread = res.data
            } else {
              this.thread.Posts.push(...res.data.Posts)
            }
          })
          .catch((e) => {
            AjaxErrorHandler(this.$store)(e)
          })
    }
  },
  mounted () {
    this.getThread(true)
  },
  beforeDestroy() {
    this.editor.destroy()
  },
}
</script>