From c2e52c606f596529214c55cab647783096ed3cf5 Mon Sep 17 00:00:00 2001
From: bdc4 <17170670+bdc4@users.noreply.github.com>
Date: Thu, 25 Jun 2020 16:42:46 -0700
Subject: [PATCH] Added Rich Text Editor and minor tweaks (#416)

* Added Character Sheet Vue

* Added Placeholder Skills and Stats tables

* Updates to Stats table formatting

* Added profeciency and styling to skills table

* added races, classes, subclasses

* added dynamic ability scores

* fixed dynamic ability score logic to use watch

* Working on profeciency checkbox bug

* fixed checkbox bug and generalized stats table

* update skills to be dynamically populated

* added image url picker

* Added saving and loading

* Character Builder BETA (initial build) (#1)

* Added Character Sheet Vue

* Added Placeholder Skills and Stats tables

* Updates to Stats table formatting

* Added profeciency and styling to skills table

* added races, classes, subclasses

* added dynamic ability scores

* fixed dynamic ability score logic to use watch

* Working on profeciency checkbox bug

* fixed checkbox bug and generalized stats table

* update skills to be dynamically populated

* added image url picker

* Added saving and loading

* Added backgrounds import

* Added tabs and weapons logic

* Move save load into component

* fixed loading character bug

* Got live save/load working with some cache bug

* Fixed cache bug

* added delete weapon functionality

* Added start of powers header

* Added max tech point calculations

* added tech point limit

* Added Caster Atribute

* Added flex ordering to powers

* Added biotics header info

* Added Sentinel logic

* added spell lookup

* updated weapons and armor to match power architecture

* Added character info tab searching

* added vertical tabbing in character info

* added vertical tab styling

* added "other" section

* style updates

* added max hp

* Added barrier filtering by class

* Character Builder v1.0

* Added Character Sheet Vue

* Added Placeholder Skills and Stats tables

* Updates to Stats table formatting

* Added profeciency and styling to skills table

* added races, classes, subclasses

* added dynamic ability scores

* fixed dynamic ability score logic to use watch

* Working on profeciency checkbox bug

* fixed checkbox bug and generalized stats table

* update skills to be dynamically populated

* added image url picker

* Added saving and loading

* Added backgrounds import

* Added tabs and weapons logic

* Move save load into component

* fixed loading character bug

* Got live save/load working with some cache bug

* Fixed cache bug

* added delete weapon functionality

* Added start of powers header

* Added max tech point calculations

* added tech point limit

* Added Caster Atribute

* Added flex ordering to powers

* Added biotics header info

* Added Sentinel logic

* added spell lookup

* updated weapons and armor to match power architecture

* Added character info tab searching

* added vertical tabbing in character info

* added vertical tab styling

* added "other" section

* style updates

* added max hp

* Added barrier filtering by class

* installed tiptap-vuetify 1.0.0

* added traits wysiwyg

* generalized code into DocumentCollector.vue component

* Added class features and dynamic template calc

* Added all document collectors

* Bug fixes for document collector

* level validation and moved barrier usage

* added import warning and some object validation
---
 .../character_builder/CharacterSaveLoad.vue   |  22 +-
 .../character_builder/CharacterSheet.vue      | 208 ++++++++-------
 .../character_builder/DocumentCollector.vue   | 113 ++++++++
 components/character_builder/Editor.vue       |  84 ++++++
 nuxt.config.js                                |   3 +-
 package-lock.json                             | 250 ++++++++++++++++++
 package.json                                  |   3 +-
 plugins/TiptapVuetify.js                      |  18 ++
 plugins/vuetify.js                            |  16 +-
 store/character_builder/index.js              |   6 +
 10 files changed, 617 insertions(+), 106 deletions(-)
 create mode 100644 components/character_builder/DocumentCollector.vue
 create mode 100644 components/character_builder/Editor.vue
 create mode 100644 plugins/TiptapVuetify.js

diff --git a/components/character_builder/CharacterSaveLoad.vue b/components/character_builder/CharacterSaveLoad.vue
index e0ad612e..b40dfc44 100644
--- a/components/character_builder/CharacterSaveLoad.vue
+++ b/components/character_builder/CharacterSaveLoad.vue
@@ -2,7 +2,22 @@
   div
     v-btn(@click="saveFile()") Export Character Sheet
     input(type="file" ref="file" style="display: none" @change="loadTextFromFile" @load="character = $event")
-    v-btn(@click="$refs.file.click()") Import Character Sheet
+    
+    v-dialog(v-model="dialog" width="500")
+      template(v-slot:activator="{on}")
+        v-btn(v-on="on") Import Character Sheet
+      
+      v-card
+        v-card-title(primary-title)
+          h1 Warning!!
+        v-card-text()
+         p Importing a character will overwrite your currently open character.
+         p Are you sure you want to continue?
+        v-divider
+        v-card-actions
+          v-btn(color="primary" @click="dialog = false;") No
+          v-btn(@click="$refs.file.click(); dialog = false;") Yes
+
 </template>
 
 <script>
@@ -13,6 +28,11 @@
         default: () => {return {} }
       }
     },
+    data: function() {
+      return {
+        dialog: false
+      }
+    },
     methods: {
       saveFile: function() {
         const data = JSON.stringify(this.character);
diff --git a/components/character_builder/CharacterSheet.vue b/components/character_builder/CharacterSheet.vue
index 4cf24224..cc36c681 100644
--- a/components/character_builder/CharacterSheet.vue
+++ b/components/character_builder/CharacterSheet.vue
@@ -8,7 +8,7 @@
           v-text-field(v-model="character.name" label="Character Name")
 
         v-flex(xs4)
-          save-load(:character="character" @load="character = $event")
+          save-load(:character="character" @load="loadCharacterFromFile($event)")
 
         v-flex(xs4)
           img(title="Mass Effect 5e Logo" src="/images/me5e_logo_450w.png" alt="Mass Effect 5e logo")
@@ -17,54 +17,52 @@
       v-layout
         // Mods and class info
         v-flex(xs9)
+          // Row 1
           v-layout(row)
             v-flex
-              v-text-field(v-model="character.level" label="Level")
-
+              v-text-field(v-model="character.level" label="Level" type="number" :min="1" :max="20"
+              :rules="[v => (v <= 20 && v >= 1) || 'Level must be between 1-20']") 
             v-flex
               v-select(v-model="character.race" :items="races" label="Race")
-
             v-flex
               v-select(v-model="character.class" :items="$options.class_data" item-text="name" label="Class" return-object)
-
             v-flex
               v-select(v-model="character.subclass" :items="character.class.subclasses" item-text="name" label="Sub-Class" return-object)
-
             v-flex
               v-select(v-model="character.background" :items="backgrounds" item-text="name" label="Background" return-object)
-
+          // Row 2
           v-layout(row)
-            v-flex
-              v-text-field(v-model="character.max_health" label="Max HP")
-
             v-flex
               v-text-field(v-model="character.ac" label="AC")
-
             v-flex
               v-text-field(v-model="character.initiative" label="Initiative")
-
             v-flex
               v-text-field(v-model="character.movement" label="Movement")
-
             v-flex
               v-text-field(v-model="characterProf" label="Proficiency")
-
             v-flex
               v-text-field(v-model="character.xp" label="XP")
-
-          v-layout(row)
+          // Health, Shields, Barrier
+          v-layout.counter-area(row)
             v-flex
               v-card
                 character-power-counter(label="Health" :value="character.health" :max-value="Number(character.max_health)"
-                  @change="character.health = $event" :show-min="false" :show-max="true")
+                  @change="character.health = $event" :show-min="false")
+                v-text-field(style="padding: 30px 30px 0;" v-model="character.max_health" label="Max HP")
             v-flex
               v-card
-                character-power-counter(label="Shields" :value="character.shields" :max-value="5"
-                  @change="character.shields = $event" :show-min="false" :show-max="true")
+                character-power-counter(label="Shields" :value="character.shields" :max-value="Number(character.max_shields)"
+                  @change="character.shields = $event" :show-min="false")
+                v-text-field(style="padding: 30px 30px 0;" v-model="character.max_shields" label="Max Shields")
+
             v-flex(v-if="hasPowers(bioticPowers) || character.class.id == 'sentinel'")
               v-card
                 character-power-counter(label="Barrier Ticks" :value="character.barrier_ticks" :max-value="character.class.progression[character.level-1].barrierTicks || 0"
-                  @change="character.barrier_ticks = $event" :show-min="false" :show-max="true")
+                  @change="character.barrier_ticks = $event" :show-min="false")
+                character-power-counter(label="Barrier Uses Remaining" :value="character.barrier_uses"
+                    :max-value="character.class.progression[character.level-1].barrierUses || 0" :show-min="false"
+                    @change="character.barrier_uses = $event")
+                
 
         // Character Image
         v-flex(xs3)
@@ -171,86 +169,70 @@
                 v-layout(row)
                   v-flex(md2)
                     v-stepper-step(editable step="traits" edit-icon="mdi-checkbox-blank-circle") Traits
-                    v-stepper-step(editable step="class-features") Class Features
+                    v-stepper-step(editable step="class_features") Class Features
                     v-stepper-step(editable step="feats") Feats
                     v-stepper-step(editable step="backgrounds") Backgrounds
                     v-stepper-step(editable step="other") Other
 
                   v-flex(md10 style="min-height: 200px;")
                     v-stepper-content(step="traits" v-if="selected_character_info_tab == 'traits'")
-                      h3 Traits
-                      br
-                      v-autocomplete(v-model="character.traits" label="Selected Traits" :items="racial_traits" item-text="title" return-object multiple)
-                      racial-trait.text-xs-left(v-for="trait in character.traits" v-bind:key="trait.id" v-bind:id="trait.id")
-
-                    v-stepper-content(step="class-features" v-if="selected_character_info_tab == 'class-features'")
-                        h3 Class Features
-                        br
-                        v-autocomplete(v-model="character.class_features" label="Selected Class Features" :items="class_features" item-text="name" return-object multiple)
-                        class-feature.text-xs-left(v-for="feature in character.class_features" v-bind:key="feature.id" v-bind:id="feature.id")
+                      document-collector(
+                        heading="Traits"
+                        type="traits"
+                        :docs="character_traits"
+                        :character_table="character.traits"
+                        item-text="title"
+                        v-on:traits:add="character.traits.push($event)"
+                        v-on:traits:modify="character.traits[$event.index] = $event.html; updateCharacter();"
+                        v-on:traits:remove="character.traits.splice($event.index, 1); updateCharacter();"
+                      )
+
+                    v-stepper-content(step="class_features" v-if="selected_character_info_tab == 'class_features'")
+                      document-collector(
+                        heading="Class Features"
+                        type="class_features"
+                        :docs="class_features"
+                        :character_table="character.class_features"
+                        item-text="name"
+                        v-on:class_features:add="character.class_features.push($event)"
+                        v-on:class_features:modify="character.class_features[$event.index] = $event.html; updateCharacter();"
+                        v-on:class_features:remove="character.class_features.splice($event.index, 1); updateCharacter();"
+                      )
 
                     v-stepper-content(step="feats" v-if="selected_character_info_tab == 'feats'")
-                      h3 Feats
-                      br
-                      v-autocomplete(v-model="character.feats" label="Selected Feats" :items="feats" item-text="name" return-object multiple)
-                      v-expansion-panel.my-5
-                        v-expansion-panel-content(v-for="feat in character.feats" :key="feat.id")
-                          div(slot="header")
-                            v-layout
-                              v-flex.xs2.sm1
-                                v-avatar(:class="[feat.new ? 'deep-purple' : 'deep-orange']" size="30px")
-                                  span(v-if="feat.new").white--text New
-                                  span(v-else).white--text PHB
-                              v-flex.xs10.sm5.lg2.pt-1
-                                strong {{ feat.name }}
-                              v-flex.hidden-md-and-down.lg3
-                                div(v-if="feat.prerequisite") {{ feat.prerequisite }}
-                                div(v-else) -
-                              v-flex.hidden-xs-only.sm6.lg6 {{ feat.note }}
-                          v-card
-                            v-card-text.grey.lighten-3
-                              p.display-1.font-weight-thin {{ feat.name }}
-                              div(v-if="feat.prerequisite")
-                                p #[strong Prerequisite]: #[em {{ feat.prerequisite }}]
-                              markdown-file(:id="feat.id" itemType="feats")
+                      document-collector(
+                        heading="Feats"
+                        type="feats"
+                        :docs="feats"
+                        :character_table="character.feats"
+                        item-text="name"
+                        v-on:feats:add="character.feats.push($event)"
+                        v-on:feats:modify="character.feats[$event.index] = $event.html; updateCharacter();"
+                        v-on:feats:remove="character.feats.splice($event.index, 1); updateCharacter();"
+                      )
 
                     v-stepper-content(step="backgrounds" v-if="selected_character_info_tab == 'backgrounds'")
-                      h3 Backgrounds
-                      br
-                      v-autocomplete(v-model="character.backgrounds" label="Selected Backgrounds" :items="backgrounds" item-text="name" return-object multiple)
-                      v-expansion-panel.mb-2
-                        v-expansion-panel-content(v-for="item in character.backgrounds" v-bind:key="item.id").large-panel
-                          div(slot="header") {{ item.name }}
-                          v-card.grey.lighten-3
-                            v-card-text
-                              p.display-1.font-weight-thin {{ item.name }}
-                              markdown-file(:id="item.id" itemType="backgrounds")
-
+                      document-collector(
+                          heading="Backgrounds"
+                          type="backgrounds"
+                          :docs="backgrounds"
+                          :character_table="character.backgrounds"
+                          item-text="name"
+                          v-on:backgrounds:add="character.backgrounds.push($event)"
+                          v-on:backgrounds:modify="character.backgrounds[$event.index] = $event.html; updateCharacter();"
+                          v-on:backgrounds:remove="character.backgrounds.splice($event.index, 1); updateCharacter();"
+                        )
+                    
                     v-stepper-content.text-xs-left(step="other" v-if="selected_character_info_tab == 'other'")
-                      h3 Other
-                      br
-                      v-sheet(color="grey")
-                        v-expansion-panel
-                          v-expansion-panel-content(v-for="(info, ind) in character.other_info" :key="ind")
-                            template(v-slot:header)
-                              div.title {{info.title}}
-                            v-card
-                              v-card-text {{info.description}}
-                              v-card-actions(style="float: right;")
-                                v-btn(icon color="primary"
-                                @click="character.other_info.splice(ind, 1)")
-                                  v-icon delete
-
-                          v-expansion-panel-content
-                            template(v-slot:header)
-                                div + Add Info
-                            v-card
-                              v-card-text
-                                v-text-field(v-model="other_info.title" label="Title")
-                                v-text-field(v-model="other_info.description" label="Description")
-                              v-card-actions(style="float: right;")
-                                v-btn(@click="character.other_info.push({title: other_info.title, description: other_info.description})") Save
-
+                      document-collector(
+                          heading="Other"
+                          type="other"
+                          :show-search="false"
+                          :character_table="character.other_info"
+                          v-on:other:add="character.other_info.push($event)"
+                          v-on:other:modify="character.other_info[$event.index] = $event.html; updateCharacter();"
+                          v-on:other:remove="character.other_info.splice($event.index, 1); updateCharacter();"
+                        )
 
           v-tab-item(key="powers")
             div(class="item-area")
@@ -305,10 +287,6 @@
                           span Spell DC
                           span(style="text-transform: uppercase;") ({{character.power_attribute}})
                         td {{calcSpellDC(power_attribute)}}
-                  div
-                    character-power-counter(label="Barrier Uses Remaining" :value="character.barrier_uses"
-                    :max-value="character.class.progression[character.level-1].barrierUses || 0"
-                    @change="character.barrier_uses = $event")
 
                   div(v-for="(slot, ind) in spell_slots")
                     character-power-counter( :value="character.biotics.spell_slots[ind]" :max-value="Number(slot)" v-if="slot"
@@ -326,10 +304,6 @@
                       tr
                         td Spell Level
                         td {{spell_level_limit}}
-                  div
-                    character-power-counter(label="Barrier Uses Remaining" :value="character.barrier_uses"
-                    :max-value="character.class.progression[character.level-1].barrierUses || 0"
-                    @change="character.barrier_uses = $event")
 
                   div
                     character-power-counter(label="Spell Slots" :value="character.tech.tech_points" :max-value="spell_slots"
@@ -351,6 +325,12 @@
     font-size: 30px;
   }
 
+  .counter-area {
+    .v-card {
+      min-height: 180px;
+    }
+  }
+
   .item-area {
     padding-top: 20px;
   }
@@ -432,6 +412,8 @@ import SpellList from '~/components/spell/SpellList.vue'
 import ArmorList from '~/components/armor_set/ArmorSetList.vue'
 import RacialTrait from '~/components/race/RacialTrait.vue'
 import ClassFeature from '~/components/class/ClassFeature.vue'
+import DocumentCollector from '~/components/character_builder/DocumentCollector.vue';
+import Editor from '~/components/character_builder/Editor.vue';
 
 import AdeptData from "~/static/data/classes/adept.json";
 import EngineerData from "~/static/data/classes/engineer.json";
@@ -441,11 +423,12 @@ import SoldierData from "~/static/data/classes/soldier.json";
 import VanguardData from "~/static/data/classes/vanguard.json";
 
 export default {
-  components: {SaveLoad, CharacterPowerCounter, WeaponList, ArmorList, SpellList, RacialTrait, ClassFeature},
+  components: {SaveLoad, CharacterPowerCounter, WeaponList, ArmorList, SpellList, RacialTrait, ClassFeature, DocumentCollector, Editor},
   class_data: [AdeptData,EngineerData,InfiltratorData,SentinelData,SoldierData,VanguardData],
   data: () => ({
     image_picker: false,
     selected_character_info_tab: "traits",
+    selected_trait: "",
     pickWeapon: false,
     removeWeapon: false,
     classData: [AdeptData,EngineerData,InfiltratorData,SentinelData,SoldierData,VanguardData],
@@ -474,7 +457,8 @@ export default {
         {text: 'Prof',value: 'prof'},
         {text: 'Adv',value: 'advantage'}
       ]
-    }
+    },
+    componentKey: 0
   }),
 
   computed: {
@@ -484,7 +468,7 @@ export default {
     character_docs: function() {
       return this.getDocuments('character');
     },
-    racial_traits: function(){
+    character_traits: function(){
       return this.getDocuments('character','traits');
     },
     class_features: function(){
@@ -528,6 +512,9 @@ export default {
       } finally {
         return slots;
       }
+    },
+    character_level: function() {
+      return this.character.level;
     }
   },
 
@@ -536,20 +523,37 @@ export default {
       immediate: true,
       deep: true,
       handler: function() {
-        this.pickWeapon = false;
-        this.removeWeapon = false;
         if (this.character) {
           this.$store.commit('characterBuilder/save', this.character);
         }
       }
+    },
+    character_level:  function(newVal, oldVal) {
+      console.log("Character Level Changed")
+      this.character.level = Math.max(1, Math.min(newVal, 20));
     }
   },
 
   created() {
+    console.log("Character before create: ", this.character);
     this.character = this.$store.state.characterBuilder.character;
+    console.log("Character after create: ", this.character);
   },
 
   methods: {
+    loadCharacterFromFile: function(payload) {
+      var merge = {
+        ...this.character,
+        ...payload
+      }
+      this.character = merge;
+    },
+    updateCharacter: function() {
+      if (this.character) {
+        this.$store.commit('characterBuilder/save', this.character);
+      }
+      this.$forceUpdate();
+    },
     hasPowers: function(power_arr) {
       var c_id = this.character.class.id;
       var arr = power_arr;
diff --git a/components/character_builder/DocumentCollector.vue b/components/character_builder/DocumentCollector.vue
new file mode 100644
index 00000000..fce79e5b
--- /dev/null
+++ b/components/character_builder/DocumentCollector.vue
@@ -0,0 +1,113 @@
+<template lang="pug">
+  div
+    h3 {{heading}}
+    br
+    v-layout(v-if="showSearch")
+      v-flex
+        v-autocomplete(label="Search the documentation..." :items="docs" v-model="search.model"
+        :item-text="itemText" return-object)
+      v-flex
+        v-btn(
+          @click="addToTable(search.model); search.model = '';"
+          v-if="search.model != '' ") Add Selected Item
+    v-layout
+      v-expansion-panel.mb-2
+        v-expansion-panel-content(v-for="(item, ind) in character_table" :key="ind + '-' + type + getHeading(character_table[ind])").large-panel
+          div(slot="header") {{getHeading(character_table[ind])}}
+          v-card.grey.lighten-3
+            v-card-text
+              Editor(:content="item" :index="ind"
+                @update:content="modifyTable($event); $forceUpdate();"
+                @remove:content="removeFromTable($event); $forceUpdate();")
+    v-layout.xs-text-left()
+      v-btn(@click="addToTable(undefined, '<h1>New Item ' + (character_table.length+1) + '</h1>')") Add Custom Entry
+</template>
+
+<script>
+
+import Editor from '~/components/character_builder/Editor.vue';
+
+export default {
+  components: {Editor},
+  props: {
+    showSearch: {
+      type: Boolean,
+      default: () => {return true;}
+    },
+    template: {
+      type: String,
+      default: () => {return '<h1>Item not found in docs</h1>'}
+    },
+    heading: {
+      type: String,
+      default: () => {return "Please Specify a Heading Text"}
+    },
+    itemText: {
+      type: String,
+      default: () => {return "title"}
+    },
+    type: {
+      type: String,
+      default: () => {return "default"}
+    },
+    docs: {
+      type: Array,
+      default: () => {return []}
+    },
+    character_table: {
+      type: Array,
+      default: () => {return []}
+    }
+  },
+  data: function() {
+    return {
+      search: {
+        model: ''
+      }
+    }
+  },
+  computed: {
+    event: function() {
+      return this.type;
+    }
+  },
+  methods: {
+    // Bubbles up the value to the inherited character array (ie: traits)
+    addToTable: function(model, value) {
+      if (!value) {
+        try {
+          model = require(`~/static/data/${this.type}/${model.id}.md`);//'<h1>'+model.title+'</h1><p>'+model.body+'</p>'
+          value = '<h1>'+model.attributes.name+'</h1>'  + model.html;
+        } catch {
+          value = '<h1>Not Found</h1><p>Something went wrong when trying to add this item...</p>';
+        }
+      }
+      console.log("Payload for add event: ", value);
+      this.$emit(this.event+":add", value);
+    },
+    removeFromTable: function(event) {
+      console.log("Payload for remove event: ", event);
+      this.$emit(this.event+":remove", event);
+    },
+    modifyTable: function(event) {
+      console.log("Payload for modify event: ", event);
+      this.$emit(this.event+":modify", event);
+    },
+    // Grabs the text out of the first found tag in the html
+    getHeading: function(html) {
+      var heading = "No Heading Found";
+      try {
+        heading = /(?<=\>)(?!\<)(.*?)(?=\<)(?<!\>)/.exec(html)[0];
+      } catch {
+        heading = "No Heading Found";
+      }
+      const headingLength = 50;
+      if (heading.length > headingLength) {
+        heading = heading.substring(0, 50);
+        heading += "...";
+      }
+      return heading;
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/components/character_builder/Editor.vue b/components/character_builder/Editor.vue
new file mode 100644
index 00000000..99be1168
--- /dev/null
+++ b/components/character_builder/Editor.vue
@@ -0,0 +1,84 @@
+<template lang="pug">
+  ClientOnly
+    // Use the component in the right place of the template
+    div
+      div(v-if="editMode")
+        tiptap-vuetify(v-model="html" :extensions="extensions")
+        v-btn(color="success" @click="save()") Save
+        v-btn(color="primary" @click="remove()" style="float: right;")
+          v-icon delete
+          span Remove
+
+      div(v-if="!editMode")
+        div(v-html="html")
+        v-btn(v-if="!editMode" @click="editMode = true;") Edit
+    
+      
+
+</template>
+
+<script>
+// import the component and the necessary extensions
+import { TiptapVuetify, Heading, Bold, Italic, Strike, Underline, Code, CodeBlock, Paragraph, BulletList, OrderedList,
+  ListItem, Link, Blockquote, HardBreak, HorizontalRule, History
+} from 'tiptap-vuetify'
+
+export default {
+  // specify TiptapVuetify component in "components"
+  components: {TiptapVuetify},
+  props: {
+    content: {
+      type: String,
+      default: () => {return "Add Description Here!"}
+    },
+    index: {
+      type: Number,
+      default: () => {return -1}
+    }
+  },
+  data: function() {
+    return {
+      editMode: false,
+      // declare extensions you want to use
+      extensions: [
+        // you can specify options for extension
+        new Heading({
+          levels: [1, 2, 3]
+        }),
+        new Bold(),
+        new Italic(),
+        new Strike(),
+        new Underline(),
+        new Code(),
+        new CodeBlock(),
+        new Paragraph(),
+        new BulletList(),
+        new OrderedList(),
+        new ListItem(),
+        new Link(),
+        new Blockquote(),
+        new HardBreak(),
+        new HorizontalRule(),
+        new History()
+      ],
+      html: this.content
+    }
+  },
+  methods: {
+    save: function() {
+      this.$emit("update:content", {
+        index: this.index,
+        html: this.html
+      });
+      this.editMode = false;
+    },
+    remove: function() {
+      this.$emit("remove:content", {
+        index: this.index,
+        html: this.html
+      });
+      this.editMode = false;
+    }
+  }
+}
+</script>
diff --git a/nuxt.config.js b/nuxt.config.js
index 5a591470..eb32cde3 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -74,6 +74,7 @@ module.exports = {
   plugins: [
     '@/plugins/vuetify',
     { src: '@/plugins/persistentState.js', ssr: false },
+    { src: '@/plugins/TiptapVuetify', mode: 'client' },
     '@/plugins/filters/index.js',
     '@/plugins/vue2-filters',
     '@/plugins/globals'
@@ -146,7 +147,7 @@ module.exports = {
   ** Build configuration
   */
   build: {
-    transpile: ['vuetify/lib'],
+    transpile: ['vuetify/lib', 'tiptap-vuetify'],
     plugins: [new VuetifyLoaderPlugin()],
     loaders: {
       stylus: {
diff --git a/package-lock.json b/package-lock.json
index bde9255c..88d79efb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7296,6 +7296,14 @@
       "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
       "dev": true
     },
+    "fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "requires": {
+        "format": "^0.2.0"
+      }
+    },
     "fb-watchman": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",
@@ -7539,6 +7547,11 @@
         "mime-types": "^2.1.12"
       }
     },
+    "format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs="
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -8136,6 +8149,11 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "highlight.js": {
+      "version": "9.16.2",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.16.2.tgz",
+      "integrity": "sha512-feMUrVLZvjy0oC7FVJQcSQRqbBq9kwqnYE4+Kj9ZjbHh3g+BisiPgF49NyQbVLNdrL/qqZr3Ca9yOKwgn2i/tw=="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -10303,6 +10321,15 @@
       "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
       "dev": true
     },
+    "lowlight": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.13.1.tgz",
+      "integrity": "sha512-kQ71/T6RksEVz9AlPq07/2m+SU/1kGvt9k39UtvHX760u4SaWakaYH7hYgH5n6sTsCWk4MVYzUzLU59aN5CSmQ==",
+      "requires": {
+        "fault": "^1.0.0",
+        "highlight.js": "~9.16.0"
+      }
+    },
     "lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -11637,6 +11664,11 @@
         "word-wrap": "~1.2.3"
       }
     },
+    "orderedmap": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-1.1.1.tgz",
+      "integrity": "sha512-3Ux8um0zXbVacKUkcytc0u3HgC0b0bBLT+I60r2J/En72cI0nZffqrA7Xtf2Hqs27j1g82llR5Mhbd0Z1XW4AQ=="
+    },
     "os-browserify": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
@@ -13351,6 +13383,134 @@
         "signal-exit": "^3.0.2"
       }
     },
+    "prosemirror-collab": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-collab/-/prosemirror-collab-1.2.2.tgz",
+      "integrity": "sha512-tBnHKMLgy5Qmx9MYVcLfs3pAyjtcqYYDd9kp3y+LSiQzkhMQDfZSV3NXWe4Gsly32adSef173BvObwfoSQL5MA==",
+      "requires": {
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "prosemirror-commands": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.1.4.tgz",
+      "integrity": "sha512-kj4Qi+8h3EpJtZuuEDwZ9h2/QNGWDsIX/CzjmClxi9GhxWyBUMVUvIFk0mgdqHyX20lLeGmOpc0TLA5aPzgpWg==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-dropcursor": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.3.2.tgz",
+      "integrity": "sha512-4c94OUGyobGnwcQI70OXyMhE/9T4aTgjU+CHxkd5c7D+jH/J0mKM/lk+jneFVKt7+E4/M0D9HzRPifu8U28Thw==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0",
+        "prosemirror-view": "^1.1.0"
+      }
+    },
+    "prosemirror-gapcursor": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.1.5.tgz",
+      "integrity": "sha512-SjbUZq5pgsBDuV3hu8GqgIpZR5eZvGLM+gPQTqjVVYSMUCfKW3EGXTEYaLHEl1bGduwqNC95O3bZflgtAb4L6w==",
+      "requires": {
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-view": "^1.0.0"
+      }
+    },
+    "prosemirror-history": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.1.3.tgz",
+      "integrity": "sha512-zGDotijea+vnfnyyUGyiy1wfOQhf0B/b6zYcCouBV8yo6JmrE9X23M5q7Nf/nATywEZbgRLG70R4DmfSTC+gfg==",
+      "requires": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-transform": "^1.0.0",
+        "rope-sequence": "^1.3.0"
+      }
+    },
+    "prosemirror-inputrules": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.1.2.tgz",
+      "integrity": "sha512-Ja5Z3BWestlHYGvtSGqyvxMeB8QEuBjlHM8YnKtLGUXMDp965qdDV4goV8lJb17kIWHk7e7JNj6Catuoa3302g==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-keymap": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.1.3.tgz",
+      "integrity": "sha512-PRA4NzkUMzV/NFf5pyQ6tmlIHiW/qjQ1kGWUlV2rF/dvlOxtpGpTEjIMhWgLuMf+HiDEFnUEP7uhYXu+t+491g==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "prosemirror-model": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.9.1.tgz",
+      "integrity": "sha512-Qblh8pm1c7Ll64sYLauwwzjimo/tFg1zW3Q3IWhKRhvfOEgRKqa6dC5pRrAa+XHOIjBFEYrqbi52J5bqA2dV8Q==",
+      "requires": {
+        "orderedmap": "^1.1.0"
+      }
+    },
+    "prosemirror-schema-list": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.1.2.tgz",
+      "integrity": "sha512-dgM9PwtM4twa5WsgSYMB+J8bwjnR43DAD3L9MsR9rKm/nZR5Y85xcjB7gusVMSsbQ2NomMZF03RE6No6mTnclQ==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-state": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.3.3.tgz",
+      "integrity": "sha512-PLXh2VJsIgvlgSTH6I2Yg6vk1CzPDp21DFreVpQtDMY2S6WaMmrQgDTLRcsrD8X38v8Yc873H7+ogdGzyIPn+w==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-tables": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.0.0.tgz",
+      "integrity": "sha512-zFw5Us4G5Vdq0yIj8GiqZOGA6ud5UKpMKElux9O0HrfmhkuGa1jf1PCpz2R5pmIQJv+tIM24H1mox/ODBAX37Q==",
+      "requires": {
+        "prosemirror-keymap": "^1.1.2",
+        "prosemirror-model": "^1.8.1",
+        "prosemirror-state": "^1.3.1",
+        "prosemirror-transform": "^1.2.1",
+        "prosemirror-view": "^1.13.3"
+      }
+    },
+    "prosemirror-transform": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.2.6.tgz",
+      "integrity": "sha512-DyV6cRip8//GIHTrqBe2B7I8VjPFQZYuBuB4clpguq1SrS9lLponoBt/0XRWxETkCVsxYSvwE76X0zo6AZhwaw==",
+      "requires": {
+        "prosemirror-model": "^1.0.0"
+      }
+    },
+    "prosemirror-utils": {
+      "version": "0.9.6",
+      "resolved": "https://registry.npmjs.org/prosemirror-utils/-/prosemirror-utils-0.9.6.tgz",
+      "integrity": "sha512-UC+j9hQQ1POYfMc5p7UFxBTptRiGPR7Kkmbl3jVvU8VgQbkI89tR/GK+3QYC8n+VvBZrtAoCrJItNhWSxX3slA=="
+    },
+    "prosemirror-view": {
+      "version": "1.14.7",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.14.7.tgz",
+      "integrity": "sha512-ZCRbGAmJa0ORIY4xrDvOpxS/oAnph3egDauvQEI7SX4eex0zovUfC61I5X4AtPCaNN4JpLWEk60voCWi0cE2vA==",
+      "requires": {
+        "prosemirror-model": "^1.1.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
     "proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -14376,6 +14536,11 @@
         "inherits": "^2.0.1"
       }
     },
+    "rope-sequence": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.2.tgz",
+      "integrity": "sha512-ku6MFrwEVSVmXLvy3dYph3LAMNS0890K7fabn+0YIRQ2T96T9F4gkFf0vf0WW0JUraNWwGRtInEpH7yO4tbQZg=="
+    },
     "rsvp": {
       "version": "4.8.5",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
@@ -15828,6 +15993,86 @@
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
       "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
     },
+    "tiptap": {
+      "version": "1.27.1",
+      "resolved": "https://registry.npmjs.org/tiptap/-/tiptap-1.27.1.tgz",
+      "integrity": "sha512-CwPMwKAKjAzsnkxZSISqDh73JmTZP3qpYn91k71WfIUZ7KUDkDt8gOKDrHMhaTJR2qMmuAChkkzd3OvBaBX+/Q==",
+      "requires": {
+        "prosemirror-commands": "1.1.4",
+        "prosemirror-dropcursor": "1.3.2",
+        "prosemirror-gapcursor": "1.1.5",
+        "prosemirror-inputrules": "1.1.2",
+        "prosemirror-keymap": "1.1.3",
+        "prosemirror-model": "1.9.1",
+        "prosemirror-state": "1.3.3",
+        "prosemirror-view": "1.14.7",
+        "tiptap-commands": "^1.13.1",
+        "tiptap-utils": "^1.9.1"
+      }
+    },
+    "tiptap-commands": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/tiptap-commands/-/tiptap-commands-1.13.1.tgz",
+      "integrity": "sha512-bniLSrnxId9zlcuwo4lVA4cmUgHpDzDhz5yw6ubDP0O++xtHl96me5E3lje8VAgBbMvP1txwwu6xSUp8xrAuXQ==",
+      "requires": {
+        "prosemirror-commands": "1.1.4",
+        "prosemirror-inputrules": "1.1.2",
+        "prosemirror-model": "1.9.1",
+        "prosemirror-schema-list": "1.1.2",
+        "prosemirror-state": "1.3.3",
+        "prosemirror-tables": "1.0.0",
+        "prosemirror-utils": "0.9.6",
+        "tiptap-utils": "^1.9.1"
+      }
+    },
+    "tiptap-extensions": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/tiptap-extensions/-/tiptap-extensions-1.29.1.tgz",
+      "integrity": "sha512-xwBvlGAN0W9+F5DB/s/pH8LcOaUq7WgPffv7KOGU26jmPKq8JAXXwZXn8DOmPYaRo9RscF0Tg9AADOM+0vcLkQ==",
+      "requires": {
+        "lowlight": "1.13.1",
+        "prosemirror-collab": "1.2.2",
+        "prosemirror-history": "1.1.3",
+        "prosemirror-model": "1.9.1",
+        "prosemirror-state": "1.3.3",
+        "prosemirror-tables": "1.0.0",
+        "prosemirror-transform": "1.2.5",
+        "prosemirror-utils": "0.9.6",
+        "prosemirror-view": "1.14.7",
+        "tiptap": "^1.27.1",
+        "tiptap-commands": "^1.13.1"
+      },
+      "dependencies": {
+        "prosemirror-transform": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.2.5.tgz",
+          "integrity": "sha512-eqeIaxWtUfOnpA1ERrXCuSIMzqIJtL9Qrs5uJMCjY5RMSaH5o4pc390SAjn/IDPeIlw6auh0hCCXs3wRvGnQug==",
+          "requires": {
+            "prosemirror-model": "^1.0.0"
+          }
+        }
+      }
+    },
+    "tiptap-utils": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/tiptap-utils/-/tiptap-utils-1.9.1.tgz",
+      "integrity": "sha512-E0tRFTNRYYwFRBhmSEjOUFmMnEyUD5rZ2QjiJaxf4ZXAPiUVy3gt2J7DqBjeP1q1FsmXkkkAHsxV+5hqX/lfFg==",
+      "requires": {
+        "prosemirror-model": "1.9.1",
+        "prosemirror-state": "1.3.3",
+        "prosemirror-tables": "1.0.0",
+        "prosemirror-utils": "0.9.6"
+      }
+    },
+    "tiptap-vuetify": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/tiptap-vuetify/-/tiptap-vuetify-1.7.0.tgz",
+      "integrity": "sha512-swUh50YahsjD/lsLv5oAaKdTGZ2OySyp/HjpugX/Snkacf+xWSUsn9ktCKX2xnTmzMliBySqN4m1ic7AQAVRkQ==",
+      "requires": {
+        "tiptap": "^1.14.0",
+        "tiptap-extensions": "^1.14.0"
+      }
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -16860,6 +17105,11 @@
         "browser-process-hrtime": "^1.0.0"
       }
     },
+    "w3c-keyname": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz",
+      "integrity": "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw=="
+    },
     "walker": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz",
diff --git a/package.json b/package.json
index c7aafc6c..703775d5 100644
--- a/package.json
+++ b/package.json
@@ -23,8 +23,9 @@
     "date-format-lite": "^17.7.0",
     "lunr": "^2.3.6",
     "nuxt": "^2.8.1",
+    "tiptap-vuetify": "^1.7.0",
     "vue2-filters": "^0.3.0",
-    "vuetify": "^1.5.16",
+    "vuetify": "^1.5.24",
     "vuetify-loader": "^1.0.8",
     "vuex-persistedstate": "^2.5.4"
   },
diff --git a/plugins/TiptapVuetify.js b/plugins/TiptapVuetify.js
new file mode 100644
index 00000000..3e2e443c
--- /dev/null
+++ b/plugins/TiptapVuetify.js
@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import { TiptapVuetifyPlugin } from 'tiptap-vuetify'
+import 'tiptap-vuetify/dist/main.css'
+
+Vue.use(TiptapVuetifyPlugin, {
+  // optional, default to 'md' (default vuetify icons before v2.0.0)
+  iconsGroup: 'md'
+})
+
+/*
+export default ({ app }) => {
+
+  Vue.use(TiptapVuetifyPlugin, {
+    vuetify: Vue.prototype.$vuetify,
+    iconsGroup: 'mdi'
+  })
+}
+*/
\ No newline at end of file
diff --git a/plugins/vuetify.js b/plugins/vuetify.js
index b171b77c..b6e548b1 100755
--- a/plugins/vuetify.js
+++ b/plugins/vuetify.js
@@ -1,5 +1,12 @@
 import Vue from 'vue'
-import Vuetify from 'vuetify/lib'
+import Vuetify, {
+  VApp, // required
+  VTooltip,
+  VToolbar,
+  VCard,
+  VIcon,
+  VBtn
+} from 'vuetify/lib'
 import colors from 'vuetify/es5/util/colors'
 
 Vue.use(Vuetify, {
@@ -11,5 +18,12 @@ Vue.use(Vuetify, {
     warning: colors.amber.base,
     error: colors.red.accent2,
     success: colors.green.base
+  },
+  components: {
+    VTooltip,
+    VToolbar,
+    VCard,
+    VIcon,
+    VBtn,
   }
 })
diff --git a/store/character_builder/index.js b/store/character_builder/index.js
index da06cec4..d70f0c30 100644
--- a/store/character_builder/index.js
+++ b/store/character_builder/index.js
@@ -3,6 +3,7 @@ export default {
   state: {
     // Default "empty" character data model
     character: {
+      version: "1.0.0",
       name: "New Character",
       image: "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png", 
       level: 1,
@@ -11,9 +12,14 @@ export default {
       subclass: "",
       background: "",
       other_info: [],
+      traits: [],
+      class_features: [],
+      feats: [],
+      backgrounds: [],
       health: 0,
       max_health: 5,
       shields: 0,
+      max_shields: 5,
       barrier_ticks: 0,
       stats: {
         str: 10, dex: 10, con: 10, int: 10, wis: 10, cha: 10