fixes #26 where when multiple instances of the editor exists, a style change (e.g bold, list, italics, etc) on once instance was also updating the others. This fix generates a unique id for each instance that the update event checks to ensure only the correct instance is actually updated

Author: makkynz

src/MarkdownEditor.js

@@ -37,7 +37,8 @@ var MarkdownEditor = React.createClass({
   },
 
   getInitialState: function() {
-    return {content: this.props.initialContent, inEditMode: true};
+    var uniqueInstanceRef = Math.random().toString(36).substring(7)
+    return {content: this.props.initialContent, inEditMode: true, instanceRef: uniqueInstanceRef};
   },
 
   render: function() {
@@ -48,8 +49,9 @@ var MarkdownEditor = React.createClass({
       divContent = <MarkdownEditorContent styles={{styleMarkdownTextArea: this.props.styles.styleMarkdownTextArea}} 
                                           content={this.state.content} onChangeHandler={this.onChangeHandler}/>;
       if (this.props.editorTabs !== false){
+       
           editorMenu = <MarkdownEditorMenu styles={{styleMarkdownMenu: this.props.styles.styleMarkdownMenu}}
-                                            iconsSet={this.props.iconsSet}/>;
+                                            iconsSet={this.props.iconsSet} instanceRef={this.state.instanceRef}/>;
       }
     } else {
       divContent = <MarkdownEditorPreview styles={{styleMarkdownPreviewArea: this.props.styles.styleMarkdownPreviewArea}} 
@@ -92,7 +94,7 @@ var MarkdownEditor = React.createClass({
   handleMarkdowEditorStoreUpdated: function(markdownEditorStoreState) {
     var currentSelection = markdownEditorStoreState.currentSelection;
 
-    if (currentSelection != null) {
+    if (currentSelection != null && markdownEditorStoreState.instanceRef === this.state.instanceRef) {
       this.updateText(this.state.content, currentSelection, markdownEditorStoreState.action);
     }
   },
@@ -105,6 +107,7 @@ var MarkdownEditor = React.createClass({
   },
 
   updateText: function(text, selection, actionType) {
+    debugger;
     var token = this.generateMarkdownToken(actionType);
     var beforeSelectionContent = text.slice(0, selection.selectionStart);
     var afterSelectionContent = text.slice(selection.selectionEnd, text.length);

src/components/MarkdownEditorMenu.js

@@ -59,36 +59,36 @@ var MarkdownEditorMenu = React.createClass({
     }
   },
 
-  handleBoldButtonClick: function() {
-    MarkdownEditorActions.makeBold();
+  handleBoldButtonClick: function() {   
+    MarkdownEditorActions.makeBold(this.props.instanceRef);
   },
 
   handleImageButtonClick: function() {
-    MarkdownEditorActions.makeImage();
+    MarkdownEditorActions.makeImage(this.props.instanceRef);
   },
 
   handleItalicButtonClick: function() {
-    MarkdownEditorActions.makeItalic();
+    MarkdownEditorActions.makeItalic(this.props.instanceRef);
   },
 
   handleUnderlineButtonClick: function() {
-    MarkdownEditorActions.makeUnderline();
+    MarkdownEditorActions.makeUnderline(this.props.instanceRef);
   },
 
   handleHeaderButtonClick: function() {
-    MarkdownEditorActions.makeHeader();
+    MarkdownEditorActions.makeHeader(this.props.instanceRef);
   },
 
   handleSubHeaderButtonClick: function() {
-    MarkdownEditorActions.makeSubHeader();
+    MarkdownEditorActions.makeSubHeader(this.props.instanceRef);
   },
 
   handleLinkButtonClick: function() {
-    MarkdownEditorActions.makeLink();
+    MarkdownEditorActions.makeLink(this.props.instanceRef);
   },
 
   handleListButtonClick: function() {
-    MarkdownEditorActions.makeList();
+    MarkdownEditorActions.makeList(this.props.instanceRef);
   }
 });
 

src/stores/MarkdownEditorStore.js

@@ -4,6 +4,7 @@ var MarkdownSelectionActions = require('../actions/MarkdownSelectionActions');
 
 var MarkdownEditorStore = Reflux.createStore({
   init: function() {
+   
     this.currentSelection = null;
     this.listenTo(MarkdownEditorActions.makeBold, this.handleMakeBold);
     this.listenTo(MarkdownEditorActions.makeItalic, this.handleMakeItalic);
@@ -17,36 +18,36 @@ var MarkdownEditorStore = Reflux.createStore({
     this.listenTo(MarkdownEditorActions.setSelection, this.handleSetSelection);
   },
 
-  handleMakeBold: function() {
-    this.trigger({action: 'bold', currentSelection: this.currentSelection});
+  handleMakeBold: function(instanceRef) {    
+    this.trigger({action: 'bold', currentSelection: this.currentSelection, instanceRef: instanceRef});
   },
 
-  handleMakeItalic: function() {
-    this.trigger({action: 'italic', currentSelection: this.currentSelection});
+  handleMakeItalic: function(instanceRef) {
+    this.trigger({action: 'italic', currentSelection: this.currentSelection, instanceRef: instanceRef});
   },
 
-  handleMakeLink: function() {
-    this.trigger({action: 'link', currentSelection: this.currentSelection});
+  handleMakeLink: function(instanceRef) {
+    this.trigger({action: 'link', currentSelection: this.currentSelection, instanceRef: instanceRef});
   },
 
-  handleMakeUnderline: function() {
-    this.trigger({action: 'underline', currentSelection: this.currentSelection});
+  handleMakeUnderline: function(instanceRef) {
+    this.trigger({action: 'underline', currentSelection: this.currentSelection, instanceRef: instanceRef});
   },
 
-  handleMakeHeader: function() {
-    this.trigger({action: 'header', currentSelection: this.currentSelection});
+  handleMakeHeader: function(instanceRef) {
+    this.trigger({action: 'header', currentSelection: this.currentSelection, instanceRef: instanceRef});
   },
 
-  handleMakeSubHeader: function() {
-    this.trigger({action: 'subheader', currentSelection: this.currentSelection});
+  handleMakeSubHeader: function(instanceRef) {
+    this.trigger({action: 'subheader', currentSelection: this.currentSelection, instanceRef: instanceRef});
   },
 
-  handleMakeList: function() {
-    this.trigger({action: 'list', currentSelection: this.currentSelection});
+  handleMakeList: function(instanceRef) {
+    this.trigger({action: 'list', currentSelection: this.currentSelection, instanceRef: instanceRef});
   },
 
-  handleMakeImage: function() {
-    this.trigger({action: 'image', currentSelection: this.currentSelection});
+  handleMakeImage: function(instanceRef) {
+    this.trigger({action: 'image', currentSelection: this.currentSelection, instanceRef: instanceRef});
   },
 
   handleClearSelection: function() {