<template>
  <node-view-wrapper
    class="poem ma-4"
    data-drag-handle
  >
    <node-view-content
      class="content"
      dir="auto"
    />
  </node-view-wrapper>
</template>

<script>

import {NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
import MixinComponentPoem from 'vue-tiptap-katex-core/components/poem/mixin.js'

export default {
  name: 'TiptapInteractivePoem',
  components: {
    NodeViewWrapper,
    NodeViewContent
  },
  mixins: [MixinComponentPoem],
}
</script>

<style lang="scss">
.poem .content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.poem {
  width: 100%;
}
</style>
