Vue Vuex Contentediatble 2.0

Vue Vuex Contentediatble 2.0

by D7460N

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.8/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.0.0/vuex.min.js"></script>
<div id="component1" class="component">
    <h1>Component 1</h1>
    <p>Display:</p>
    <div id="display">
       {{ getContent }}    
    </div>
    <br>
    <p>Edit Here:</p>
    <div contenteditable="true"
         :value="getContent"
         v-html="getContent"
         @click="changeFocus(true)"
         @keyup="setContent"
         @blur="changeFocus(false)"
         id="contenteditable1"
         class="contenteditable">
    </div>
</div>

<div id="component2" class="component">
    <h1>Component 2</h1>
    <p>Display:</p>
    <div id="display">
       {{ getContent }}    
    </div>
    <br>
    <p>Edit Here:</p>
    <div contenteditable="true"
         :value="getContent"
         v-once
         v-html="getContent"
         @click="changeFocus(true)"
         @keyup="setContent"
         @blur="changeFocus(false)"
         id="contenteditable2"
         class="contenteditable">
    </div>
</div>

CSS

#display {
  background: rgba(0,0,0,0.1);
  padding: 20px;
  box-sizing: border-box;
}
h1 {
  font-size: 18px;
}
p {
  margin-bottom: 3px;
}
.component {
  padding: 10px;
  box-sizing: border-box;
}
.contenteditable {
  padding: 20px;
  margin-bottom: 20px;
}
#contenteditable1 {
  background: rgba(0,100,0,0.15)
}
#contenteditable2 {
  background: rgba(100,0,0,0.15)
}

JavaScript

let contenteditable1 = {
		'content': 'Works just fine with no HTML in div. Edit this and the caret will NOT jump unless you add HTML somehow. (i.e. hit return, bold, italicize, etc...)',
    'focused': false
	};
  
  let contenteditable2 = {
		'content': 'Try editing here.<div>Caret / Cursor NO LONGER jumps on input,</div> <div>because v-once prevents re-render.</div>',
    'focused': false
	};

	let store = new Vuex.Store({
		state: contenteditable1,
		mutations: {
			change_content: function(state, content){
				state.content = content;
			},
      change_focus: function(state, focusBool){
				state.focused = focusBool;
			}
		}
	});
	
	new Vue({
		el: '#component1',
		store: store,
    computed: {
    	getContent: function( state ) { 
					return this.$store.state.content
			}
    },
    methods: {
	    setContent: function( state, event ){       
          store.commit('change_content', this.$el.children[5].innerHTML)
			},
      changeFocus: function( focusBool ){
          store.commit('change_focus', focusBool)
			}
    }
	});

	let store2 = new Vuex.Store({
		state: contenteditable2,
		mutations: {
			change_content: function(state, content){
				state.content = content;
			},
      change_focus: function(state, focusBool){
				state.focused = focusBool;
			}
		}   
	});

	new Vue({
		el: '#component2',
		store: store2,
    watch: {
      // whenever question changes, this function will run
      focused: function () {
        return
      }
  	},
    computed: {
    	getContent: function( state ) { 
					return this.$store.state.content
			}
    },
    methods: {
	    setContent: function( state, event ){
					store2.commit('change_content', this.$el.children[5].innerHTML)
			},
      changeFocus: function( focusBool ){
      		//console.log(store2.state.focused)
          store2.commit('change_focus', focusBool)
			}
    }
	});