From 2fb51fe37c7d36394d00b391e19ae2fa10a7240e Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Thu, 20 Aug 2015 15:52:20 +0900
Subject: [PATCH] =?UTF-8?q?Note=E3=81=8B=E3=82=89=E5=A4=96=E9=83=A8Link?=
 =?UTF-8?q?=E3=82=92=E9=96=8B=E3=81=8F=E3=81=A8=E3=81=8D=E3=81=ABBrowser?=
 =?UTF-8?q?=E3=82=92=E4=BD=BF=E3=81=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 browser/main/Components/MarkdownPreview.jsx   | 43 +++++++++++++++++++
 browser/main/Components/NoteForm.jsx          |  5 ++-
 .../main/Components/PlanetArticleDetail.jsx   |  6 +--
 3 files changed, 49 insertions(+), 5 deletions(-)
 create mode 100644 browser/main/Components/MarkdownPreview.jsx

diff --git a/browser/main/Components/MarkdownPreview.jsx b/browser/main/Components/MarkdownPreview.jsx
new file mode 100644
index 00000000..80df45c5
--- /dev/null
+++ b/browser/main/Components/MarkdownPreview.jsx
@@ -0,0 +1,43 @@
+var React = require('react')
+
+var Markdown = require('../Mixins/Markdown')
+var ExternalLink = require('../Mixins/ExternalLink')
+
+module.exports = React.createClass({
+  mixins: [Markdown, ExternalLink],
+  propTypes: {
+    className: React.PropTypes.string,
+    content: React.PropTypes.string
+  },
+  componentDidMount: function () {
+    this.addListener()
+  },
+  componentDidUpdate: function () {
+    this.addListener()
+  },
+  componentWillUnmount: function () {
+    this.removeListener()
+  },
+  componentWillUpdate: function () {
+    this.removeListener()
+  },
+  addListener: function () {
+    var anchors = React.findDOMNode(this).querySelectorAll('a')
+
+    for (var i = 0; i < anchors.length; i++) {
+      anchors[i].addEventListener('click', this.openExternal)
+    }
+  },
+  removeListener: function () {
+    var anchors = React.findDOMNode(this).querySelectorAll('a')
+
+    for (var i = 0; i < anchors.length; i++) {
+      anchors[i].removeEventListener('click', this.openExternal)
+    }
+  },
+  render: function () {
+    return (
+      <div className={'MarkdownPreview' + (this.props.className != null ? ' ' + this.props.className : '')} dangerouslySetInnerHTML={{__html: ' ' + this.markdown(this.props.content)}}/>
+    )
+  }
+})
diff --git a/browser/main/Components/NoteForm.jsx b/browser/main/Components/NoteForm.jsx
index 867250d9..0f805dbb 100644
--- a/browser/main/Components/NoteForm.jsx
+++ b/browser/main/Components/NoteForm.jsx
@@ -10,6 +10,7 @@ var Markdown = require('../Mixins/Markdown')
 var PlanetStore = require('../Stores/PlanetStore')
 
 var CodeEditor = require('./CodeEditor')
+var MarkdownPreview = require('./MarkdownPreview')
 
 var getOptions = function (input, callback) {
   Hq.searchTag(input)
@@ -33,7 +34,7 @@ var EDIT_MODE = 0
 var PREVIEW_MODE = 1
 
 module.exports = React.createClass({
-  mixins: [LinkedState, ReactRouter.State, Markdown],
+  mixins: [LinkedState, Markdown],
   propTypes: {
     planet: React.PropTypes.object,
     close: React.PropTypes.func,
@@ -108,7 +109,7 @@ module.exports = React.createClass({
     ) : (
       <div className='form-group relative'>
         <div className='previewMode'>Preview mode</div>
-        <div className='marked' dangerouslySetInnerHTML={{__html: ' ' + this.markdown(this.state.note.content)}}></div>
+        <MarkdownPreview className='marked' content={this.state.note.content}/>
       </div>
     )
 
diff --git a/browser/main/Components/PlanetArticleDetail.jsx b/browser/main/Components/PlanetArticleDetail.jsx
index 224c5988..1594fef7 100644
--- a/browser/main/Components/PlanetArticleDetail.jsx
+++ b/browser/main/Components/PlanetArticleDetail.jsx
@@ -7,13 +7,13 @@ var CodeEditModal = require('../Components/CodeEditModal')
 var CodeDeleteModal = require('../Components/CodeDeleteModal')
 var NoteEditModal = require('../Components/NoteEditModal')
 var NoteDeleteModal = require('../Components/NoteDeleteModal')
+var MarkdownPreview = require('../Components/MarkdownPreview')
 
 var Modal = require('../Mixins/Modal')
 var ForceUpdate = require('../Mixins/ForceUpdate')
-var Markdown = require('../Mixins/Markdown')
 
 module.exports = React.createClass({
-  mixins: [ForceUpdate(60000), Markdown, Modal],
+  mixins: [ForceUpdate(60000), Modal],
   propTypes: {
     article: React.PropTypes.object,
     showOnlyWithTag: React.PropTypes.func,
@@ -91,7 +91,7 @@ module.exports = React.createClass({
         </div>
         <div className='viewer-body'>
           <div className='tags'><i className='fa fa-tags'/>{tags}</div>
-          <div className='content' dangerouslySetInnerHTML={{__html: ' ' + this.markdown(article.content)}}></div>
+          <MarkdownPreview className='content' content={article.content}/>
         </div>
       </div>
     )