Merge pull request #121 from support-project/feature/issue116_slide

#116 スライドや動画を記事に表示できるように
support-project · Oct 26, 2015 · 1a25a43 · 1a25a43
2 parents 960701a + ba0a3c6
commit 1a25a43
Show file tree

Hide file tree

Showing 14 changed files with 155 additions and 26 deletions.
diff --git a/bower.json b/bower.json
@@ -18,7 +18,8 @@
     "echojs": "1.6.0",
     "notify.js": "1.2.5",
     "emoji-parser": "0.1.1",
-    "bluebird": "2.10.2"
+    "bluebird": "2.10.2",
+    "jquery-oembed-all": "nfl/jquery-oembed-all"
   },
   "devDependencies": {}
 }
diff --git a/pom.xml b/pom.xml
@@ -117,6 +117,11 @@
 			<version>4.3.1</version>
 		</dependency>
 
+		<dependency>
+			<groupId>io.github.gitbucket</groupId>
+			<artifactId>markedj</artifactId>
+			<version>1.0.4-SNAPSHOT</version>
+		</dependency>
 
 	</dependencies>
 

diff --git a/src/main/java/org/support/project/knowledge/logic/MarkdownLogic.java b/src/main/java/org/support/project/knowledge/logic/MarkdownLogic.java
@@ -1,5 +1,8 @@
 package org.support.project.knowledge.logic;
 
+import io.github.gitbucket.markedj.Marked;
+import io.github.gitbucket.markedj.Options;
+
 import java.io.IOException;
 import java.io.InputStreamReader;
 import java.io.Reader;
@@ -30,6 +33,7 @@ public class MarkdownLogic {
 
 	public static final int ENGINE_PEGDOWN = 1;
 	public static final int ENGINE_MARKEDJS = 2;
+	public static final int ENGINE_MARKEDJ = 3; // スライド表示用の独自拡張（デフォルト）
 
 	private ScriptEngine engine = null;
 	private boolean initEngine = false;
@@ -45,7 +49,7 @@ public static MarkdownLogic get() {
 	 * @throws ParseException
 	 */
 	public MarkDown markdownToHtml(String markdown) throws ParseException {
-		return markdownToHtml(markdown, ENGINE_PEGDOWN);
+		return markdownToHtml(markdown, ENGINE_MARKEDJ);
 	}
 	/**
 	 * マークダウンをパースしてHTMLを取得(エンジンを指定)
@@ -57,14 +61,17 @@ public MarkDown markdownToHtml(String markdown) throws ParseException {
 	public MarkDown markdownToHtml(String markdown, int engine) throws ParseException {
 		MarkDown result = new MarkDown();
 		if (engine == ENGINE_MARKEDJS) {
+			LOG.warn("marked.js parser was deprecated");
 			markdownToHtmlOnMarkedJs(markdown, result);
-		} else {
+		} else if (engine == ENGINE_PEGDOWN) {
+			LOG.warn("PegDown parser was deprecated");
 			markdownToHtmlOnPegDown(markdown, result);
+		} else {
+			markdownToHtmlOnMarkedJ(markdown, result);
 		}
 		return sanitize(markdown, result);
 	}
 
-
 	/**
 	 * サニタイジング
 	 * @param markdown
@@ -92,6 +99,29 @@ private MarkDown sanitize(String markdown, MarkDown result) throws ParseExceptio
 		}
 	}
 
+	/**
+	 * support-project/markedj (https://github.com/support-project/markedj) でマークダウンをパース
+	 * スライド表示の独自拡張を行っている
+	 * 
+	 * @param markdown
+	 * @param result
+	 */
+	private void markdownToHtmlOnMarkedJ(String markdown, MarkDown result) {
+		Date start = new Date();
+
+		result.setMarkdown(markdown);
+		String html = Marked.marked(markdown);
+		result.setHtml(html);
+		result.setParsed(true);
+
+		if (LOG.isDebugEnabled()) {
+			Date end = new Date();
+			// 以前、別のMarkdownパーサーのパースが凄く時間がかかったので、パース時間を出力している
+			LOG.debug("Parse time (MarkedJ): " + (end.getTime() - start.getTime()) + " [ms]");
+		}
+	}
+
+
 	/**
 	 * PegDownでMarkDownのパース
 	 * @param markdown

diff --git a/src/main/resources/appresource.properties b/src/main/resources/appresource.properties
@@ -465,6 +465,12 @@ knowledge.sample.markdown.74=require 'redcarpet'
 knowledge.sample.markdown.75=markdown = Redcarpet.new("Hello World!")
 knowledge.sample.markdown.76=puts markdown.to_html
 knowledge.sample.markdown.77=```
+knowledge.sample.markdown.78=#### Extended markdown syntax(Open Graph)
+knowledge.sample.markdown.79=- The part you want to put a web site introduction, to describe the [oembed WebSiteURL]
+knowledge.sample.markdown.80=\u0020\u0020\u0020- GitHub
+knowledge.sample.markdown.81=\u0020\u0020\u0020\u0020\u0020\u0020- [oembed https://github.com/support-project/knowledge]
+knowledge.sample.markdown.82=\u0020\u0020\u0020- SlideShare
+knowledge.sample.markdown.83=\u0020\u0020\u0020\u0020\u0020\u0020- [oembed http://www.slideshare.net/koda3/knowledge-information]
 knowledge.sample.markdown.501=#### More info
 knowledge.sample.markdown.502=- [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown/) 
 knowledge.sample.markdown.preview=Preview this sample

diff --git a/src/main/resources/appresource_ja.properties b/src/main/resources/appresource_ja.properties
@@ -465,6 +465,12 @@ knowledge.sample.markdown.74=require 'redcarpet'
 knowledge.sample.markdown.75=markdown = Redcarpet.new("Hello World!")
 knowledge.sample.markdown.76=puts markdown.to_html
 knowledge.sample.markdown.77=```
+knowledge.sample.markdown.78=#### 拡張Markdown syntax(Open Graph)
+knowledge.sample.markdown.79=- WebSiteの紹介を入れたい部分に[oembed WebSiteURL]を記載する
+knowledge.sample.markdown.80=\u0020\u0020\u0020- GitHub
+knowledge.sample.markdown.81=\u0020\u0020\u0020\u0020\u0020\u0020- [oembed https://github.com/support-project/knowledge]
+knowledge.sample.markdown.82=\u0020\u0020\u0020- SlideShare
+knowledge.sample.markdown.83=\u0020\u0020\u0020\u0020\u0020\u0020- [oembed http://www.slideshare.net/koda3/knowledge-information]
 knowledge.sample.markdown.501=#### さらに詳しく
 knowledge.sample.markdown.502=- [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown/) が参考になります
 knowledge.sample.markdown.preview=Sampleで確認

diff --git a/src/main/webapp/WEB-INF/views/commons/layout/commonHeader.jsp b/src/main/webapp/WEB-INF/views/commons/layout/commonHeader.jsp
@@ -36,5 +36,6 @@
 <link rel="stylesheet" href="<%= request.getContextPath() %>/bower/bootstrap/dist/css/bootstrap.min.css" />
 <link rel="stylesheet" href="<%= request.getContextPath() %>/bower/bootstrap/dist/css/bootstrap-theme.min.css" />
 <link rel="stylesheet" href="<%= request.getContextPath() %>/bower/font-awesome/css/font-awesome.min.css" />
+<link rel="stylesheet" href="<%= request.getContextPath() %>/bower/jquery-oembed-all/jquery.oembed.css" />
 
 
diff --git a/src/main/webapp/WEB-INF/views/commons/layout/commonScripts.jsp b/src/main/webapp/WEB-INF/views/commons/layout/commonScripts.jsp
@@ -23,6 +23,7 @@
 <script type="text/javascript" src="<%= request.getContextPath() %>/bower/bootbox/bootbox.js"></script>
 
 <script type="text/javascript" src="<%= request.getContextPath() %>/bower/notify.js/notify.js"></script>
+<script type="text/javascript" src="<%= request.getContextPath() %>/bower/jquery-oembed-all/jquery.oembed.js"></script>
 
 <!--[if lt IE 9]>
     <script src="<%= request.getContextPath() %>/bower/html5shiv/dist/html5shiv.min.js"></script>
@@ -173,8 +174,6 @@ window.onload = function() {
 }
 <% } %>
 
-
-
 </script>
 
 <!-- /scripts -->
diff --git a/src/main/webapp/WEB-INF/views/protect/knowledge/markdown.jsp b/src/main/webapp/WEB-INF/views/protect/knowledge/markdown.jsp
@@ -59,6 +59,13 @@
 <%= jspUtil.label("knowledge.sample.markdown.76") %>
 <%= jspUtil.label("knowledge.sample.markdown.77") %>
 
+<%= jspUtil.label("knowledge.sample.markdown.78") %>
+<%= jspUtil.label("knowledge.sample.markdown.79") %>
+<%= jspUtil.label("knowledge.sample.markdown.80") %>
+<%= jspUtil.label("knowledge.sample.markdown.81") %>
+<%= jspUtil.label("knowledge.sample.markdown.82") %>
+<%= jspUtil.label("knowledge.sample.markdown.83") %>
+
 <%= jspUtil.label("knowledge.sample.markdown.501") %>
 <%= jspUtil.label("knowledge.sample.markdown.502") %>
 

diff --git a/src/main/webapp/js/comment.js b/src/main/webapp/js/comment.js
@@ -123,7 +123,8 @@ var preview = function() {
 		.then(function() {
 			var content = emoji(jqObj.html().trim(), _CONTEXT + '/bower/emoji-parser/emoji', {classes: 'emoji-img'});
 			jqObj.html(content);
-			return;
+		}).then(function () {
+			jqObj.find('a.oembed').oembed();
 		});
 	});
 };

diff --git a/src/main/webapp/js/knowledge-edit.js b/src/main/webapp/js/knowledge-edit.js
@@ -377,10 +377,9 @@ var preview = function() {
 			var target = $('#preview');
 			var position = target.offset().top;
 			$("html, body").animate({scrollTop:position}, speed, "swing");
-			
-			return;
+		}).then(function () {
+			jqObj.find('a.oembed').oembed();
 		});
-
 	});
 };
 

diff --git a/src/main/webapp/js/knowledge-view.js b/src/main/webapp/js/knowledge-view.js
@@ -1,20 +1,16 @@
 $(document).ready(function(){
-	marked.setOptions({
-		langPrefix: '',
-		highlight: function(code, lang) {
-			console.log('[highlight]' + lang);
-			return code;
-		}
+	var jqObj = $('#content');
+	codeHighlight(jqObj)
+	.then(function() {console.log('finish codeHighlight.'); return;})
+	.then(function () {
+		//console.log($('#content').html());
+		var html = emoji(jqObj.html(), _CONTEXT + '/bower/emoji-parser/emoji', {classes: 'emoji-img'});
+		jqObj.html(html);
+		//console.log($('#content').html());
+	}).then(function () {
+		jqObj.find('a.oembed').oembed();
 	});
 
-	codeHighlight($('#content'))
-	.then(function() {console.log('finish codeHighlight.'); return;});
-
-	//console.log($('#content').html());
-	var html = emoji($('#content').html(), _CONTEXT + '/bower/emoji-parser/emoji', {classes: 'emoji-img'});
-	$('#content').html(html);
-	//console.log($('#content').html());
-
 	echo.init();
 
 	$('#commentsLink').click(function(){
@@ -39,7 +35,8 @@ $(document).ready(function(){
 		.then(function() {
 			var content = emoji(jqObj.html().trim(), _CONTEXT + '/bower/emoji-parser/emoji', {classes: 'emoji-img'});
 			jqObj.html(content);
-			return;
+		}).then(function () {
+			jqObj.find('a.oembed').oembed();
 		});
 	});
 	$('.arrow_answer').each(function(i, block) {
@@ -51,6 +48,8 @@ $(document).ready(function(){
 			var content = emoji(jqObj.html().trim(), _CONTEXT + '/bower/emoji-parser/emoji', {classes: 'emoji-img'});
 			jqObj.html(content);
 			return;
+		}).then(function () {
+			jqObj.find('a.oembed').oembed();
 		});
 	});
 
@@ -209,6 +208,8 @@ var preview = function() {
 			var content = emoji(jqObj.html().trim(), _CONTEXT + '/bower/emoji-parser/emoji', {classes: 'emoji-img'});
 			jqObj.html(content);
 			return;
+		}).then(function () {
+			jqObj.find('a.oembed').oembed();
 		});
 	});
 };
@@ -239,7 +240,8 @@ var previewans = function() {
 		.then(function() {
 			var content = emoji(jqObj.html().trim(), _CONTEXT + '/bower/emoji-parser/emoji', {classes: 'emoji-img'});
 			jqObj.html(content);
-			return;
+		}).then(function () {
+			jqObj.find('a.oembed').oembed();
 		});
 	});
 };

diff --git a/src/test/java/org/support/project/knowledge/logic/MarkdownLogicTest.java b/src/test/java/org/support/project/knowledge/logic/MarkdownLogicTest.java
@@ -209,4 +209,26 @@ public void test6() throws ParseException, UnsupportedEncodingException, IOExcep
 
 
 
+
+	@Test
+	@Order(order= 7)
+	public void testMarkdJ1() throws ParseException, UnsupportedEncodingException, IOException, TransformerFactoryConfigurationError, TransformerException {
+		String markdown = FileUtil.read(getClass().getResourceAsStream("markdown/markdj-1.md"));
+		String html = FileUtil.read(getClass().getResourceAsStream("markdown/result-markdj-1.txt"));
+		String result = MarkdownLogic.get().markdownToHtml(markdown, MarkdownLogic.ENGINE_MARKEDJ).getHtml();
+		try {
+			org.junit.Assert.assertArrayEquals(read(html), read(result));
+		} catch (AssertionError e) {
+			LOG.info("testMarkdJ1");
+			LOG.info("[Markdown] : " + markdown);
+			LOG.info("[Html]     : " + html);
+			LOG.info("[Parsed]   : " + result);
+			LOG.info("[Indent]   : " + SanitizingLogic.get().indent(result));
+			throw e;
+		}
+	}
+
+
+
+
 }
diff --git a/src/test/resources/org/support/project/knowledge/logic/markdown/markdj-1.md b/src/test/resources/org/support/project/knowledge/logic/markdown/markdj-1.md
@@ -0,0 +1,33 @@
+# テスト
+- 簡単なmarkdown
+- <font color="red">HTMLのタグを使える？</font>
+   - インデント
+   - 少しだけ複雑
+- どうなるか？
+
+## 見出し２
+- Javascriptで簡単にパースしていたけど、Java側で実行した方が制御しやすいね
+- 危険な<script>タグは使える？</script>
+
+### Script 
+<script>alert('hoge');</script>
+<span onblur="alert('hoge');">これ通る？</span>
+<p onblur="alert('hoge');">通らない</p>
+
+- PegDownProcessorだけだと、そのまま出力する（XSSでやばそう）
+- サニタイジングする
+
+```ruby:qiita.rb
+puts 'The best way to log and share programmers knowledge.'
+```
+
+```html
+<button>hogehoge</button>
+```
+
+```java
+private List<Object> params = new ArrayList<>();
+```
+
+
+
diff --git a/src/test/resources/org/support/project/knowledge/logic/markdown/result-markdj-1.txt b/src/test/resources/org/support/project/knowledge/logic/markdown/result-markdj-1.txt
@@ -0,0 +1,17 @@
+<h1 id="-">テスト</h1>
+<ul><li>簡単なmarkdown</li><li><font color="red">HTMLのタグを使える&#xff1f;</font><ul><li>インデント</li><li>少しだけ複雑</li></ul>
+</li><li>どうなるか&#xff1f;</li></ul>
+<h2 id="-">見出し&#xff12;</h2>
+<ul><li>Javascriptで簡単にパースしていたけど、Java側で実行した方が制御しやすいね</li><li>危険な</li></ul>
+<h3 id="script">Script</h3>
+<p>
+これ通る&#xff1f;</p>
+<p>通らない</p>
+
+<ul><li>PegDownProcessorだけだと、そのまま出力する&#xff08;XSSでやばそう&#xff09;</li><li>サニタイジングする</li></ul>
+<pre><code class="lang-ruby:qiita.rb">puts &#39;The best way to log and share programmers knowledge.&#39;
+</code></pre>
+<pre><code class="lang-html">&lt;button&gt;hogehoge&lt;/button&gt;
+</code></pre>
+<pre><code class="lang-java">private List&lt;Object&gt; params &#61; new ArrayList&lt;&gt;();
+</code></pre>