#12159

#12159

.gitignore

@@ -11,6 +11,8 @@
 !nb-configuration.xml
 !.travis.yml
 !Dockerfile
+!gulpfile.js
+!package.json
 
 src/main/webapp/skins/*
 !src/main/webapp/skins/mobile

gulpfile.js

+/*
+ * Symphony - A modern community (forum/SNS/blog) platform written in Java.
+ * Copyright (C) 2012-2016,  b3log.org & hacpai.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * @file frontend tool.
+ * 
+ * @author <a href="mailto:liliyuan@fangstar.net">Liyuan Li</a>
+ * @version 1.3.2.0, Oct 8, 2016 
+ */
+
+'use strict';
+
+var gulp = require("gulp");
+var concat = require('gulp-concat');
+var uglify = require('gulp-uglify');
+var cleanCSS = require('gulp-clean-css');
+
+gulp.task('build', function () {
+    // min css
+    gulp.src('./src/main/webapp/js/lib/editor/codemirror.css')
+            .pipe(cleanCSS())
+            .pipe(concat('codemirror.min.css'))
+            .pipe(gulp.dest('./src/main/webapp/js/lib/editor/'));
+    
+    // concat js
+    var jsJqueryUpload = ['./src/main/webapp/js/lib/jquery/jquery.min.js',
+        './src/main/webapp/js/lib/jquery/file-upload-9.10.1/vendor/jquery.ui.widget.js',
+        './src/main/webapp/js/lib/jquery/file-upload-9.10.1/jquery.iframe-transport.js',
+        './src/main/webapp/js/lib/jquery/file-upload-9.10.1/jquery.fileupload.js',
+        './src/main/webapp/js/lib/jquery/jquery.bowknot.min.js',
+        './src/main/webapp/js/lib/tiny_mce/tiny_mce.js',
+        './src/main/webapp/js/lib/KindEditor/kindeditor-min.js',
+        // codemirror
+        './src/main/webapp/js/lib/CodeMirrorEditor/codemirror.js',
+        './src/main/webapp/js/lib/editor/placeholder.js',
+        './src/main/webapp/js/overwrite/codemirror/addon/hint/show-hint.js',
+        './src/main/webapp/js/lib/CodeMirrorEditor/editor.js',
+        './src/main/webapp/js/lib/to-markdown.js',
+        './src/main/webapp/js/lib/highlight.js-9.6.0/highlight.pack.js'];
+    gulp.src(jsJqueryUpload)
+            .pipe(uglify())
+            .pipe(concat('admin-lib.min.js'))
+            .pipe(gulp.dest('./src/main/webapp/js/lib/compress/'));
+
+});
\ No newline at end of file

package.json

+{
+  "name": "Symphony",
+  "version": "1.3.0",
+  "description": "A real-time community forum written in Java. Java 实时社区论坛。 https://hacpai.com ",
+  "homepage": "https://github.com/b3log/symphony",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/b3log/symphony.git"
+  },
+  "bugs": {
+    "url": "https://github.com/b3log/symphony/issues"
+  },
+  "license": "Apache License",
+  "private": true,
+  "author": "Daniel <dl882509@gmail.com> (http://88250.b3log.org) & Vanessa <lly219@gmail.com> (http://vanessa.b3log.org)",
+  "maintainers": [
+    {
+      "name": "Daniel",
+      "email": "dl88250@gmail.com"
+    },
+    {
+      "name": "Vanessa",
+      "email": "lly219@gmail.com"
+    }
+  ],
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-concat": "2.6.0",
+    "gulp-uglify": "^2.0.0",
+    "gulp-clean-css": "^2.0.13"
+  }
+}

src/main/java/org/b3log/solo/processor/console/ArticleConsole.java

@@ -117,8 +117,7 @@ public class ArticleConsole {
 
         result.put(Keys.STATUS_CODE, true);
 
-        final JSONObject requestJSONObject = Requests.parseRequestJSONObject(request, response);
-        final String markdownText = requestJSONObject.getString("markdownText");
+        final String markdownText = request.getParameter("markdownText");
 
         if (Strings.isEmptyOrNull(markdownText)) {
             result.put("html", "");

src/main/webapp/admin-article.ftl

@@ -5,8 +5,10 @@
     </div>
     <div>
         <label>${content1Label}</label>
-        <textarea id="articleContent" name="articleContent"
+        <div>
+            <textarea id="articleContent" name="articleContent"
                   style="height: 500px;width:100%;"></textarea>
+        </div>
     </div>
     <div>
         <label>${uploadFileLabel}</label>
@@ -20,7 +22,9 @@
     </div>
     <div class="comment-content">
         <label>${abstract1Label}</label>
-        <textarea id="abstract" style="height: 200px;width: 100%;" name="abstract"></textarea>
+        <div>
+            <textarea id="abstract" style="height: 200px;width: 100%;" name="abstract"></textarea>
+        </div>
     </div>
     <div>
         <div class="left">

src/main/webapp/admin-index.ftl

@@ -7,7 +7,7 @@
         <link type="text/css" rel="stylesheet" href="${staticServePath}/css/default-base${miniPostfix}.css?${staticResourceVersion}" />
         <link type="text/css" rel="stylesheet" href="${staticServePath}/css/default-admin${miniPostfix}.css?${staticResourceVersion}" />
         <link type="text/css" rel="stylesheet" href="${staticServePath}/js/lib/CodeMirrorEditor/codemirror.min.css?${staticResourceVersion}" />
-        <link type="text/css" rel="stylesheet" href="${staticServePath}/js/lib/highlight/styles/github.css?${staticResourceVersion}" />
+        <link type="text/css" rel="stylesheet" href="${staticServePath}/js/lib/highlight.js-9.6.0/styles/github.css?${staticResourceVersion}" />
         <link rel="icon" type="image/png" href="${staticServePath}/favicon.png" />
     </head>
     <body onhashchange="admin.setCurByHash();">

src/main/webapp/css/default-admin.css

@@ -17,7 +17,7 @@
 * admin style
 *
 * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
-* @version 2.0.6.3, Sep 5, 2016
+* @version 2.1.6.3, Nov 8, 2016
 */
 
 /* start resset */
@@ -60,6 +60,124 @@ button.selected {
     font-weight: normal;
     font-style: normal;
 }
+
+.content-reset {
+    font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
+    word-wrap: break-word;
+    overflow: hidden;
+    line-height: 1.5; 
+}
+.content-reset ul,
+.content-reset ol {
+    padding-left: 2em;
+    margin-top: 0;
+    margin-bottom: 16px; 
+}
+.content-reset h1,
+.content-reset h2,
+.content-reset h3,
+.content-reset h4,
+.content-reset h5,
+.content-reset h6 {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+    line-height: 1.25; 
+}
+.content-reset h1 {
+    padding-bottom: 0.3em;
+    font-size: 2em; 
+}
+.content-reset h2 {
+    padding-bottom: 0.3em;
+    font-size: 1.5em; 
+}
+.content-reset h3 {
+    font-size: 1.25em; 
+}
+.content-reset h4 {
+    font-size: 1em; 
+}
+.content-reset h5 {
+    font-size: 0.875em; 
+}
+.content-reset h6 {
+    font-size: 0.85em; 
+}
+.content-reset p {
+    margin-top: 0;
+    margin-bottom: 16px; 
+}
+.content-reset blockquote {
+    padding: 0 1em;
+    color: #777;
+    border-left: 0.25em solid #ddd;
+    margin-bottom: 16px; 
+}
+.content-reset blockquote p {
+    margin: 0; 
+}
+.content-reset iframe {
+    border: 1px solid #ccc; 
+}
+.content-reset table {
+    width: 100%;
+    border: 1px solid #dedede;
+    margin: 15px auto;
+    border-collapse: collapse;
+    empty-cells: show; 
+}
+.content-reset thead {
+    text-align: center; 
+}
+.content-reset td,
+.content-reset th {
+    height: 35px;
+    border: 1px solid #dedede;
+    padding: 0 10px; 
+}
+.content-reset th {
+    font-weight: bold;
+    text-align: center !important;
+    background: rgba(158, 188, 226, 0.2); 
+}
+.content-reset tbody tr:nth-child(2n) {
+    background: rgba(158, 188, 226, 0.12); 
+}
+.content-reset tr:hover {
+    background: #efefef; 
+}
+.content-reset code {
+    padding: 0.2em 0.4em;
+    margin: 0;
+    font-size: 85%;
+    background-color: rgba(252, 41, 41, 0.12);
+    border-radius: 3px;
+    color: #d23f31;
+    font-family: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace; 
+}
+.content-reset pre > code {
+    padding: 0.5em;
+    border-radius: 0;
+    color: #333;
+    background-color: rgba(0, 0, 0, 0.04);
+    background-image: url(../images/code-bg.png);
+    background-size: 20px 20px;
+    border-radius: 5px; 
+}
+.content-reset kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    line-height: 10px;
+    color: #555;
+    vertical-align: middle;
+    background-color: #fcfcfc;
+    border: solid 1px #ccc;
+    border-bottom-color: #bbb;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #bbb; 
+}
 /* end reset */
 
 /* start ico */
@@ -343,7 +461,7 @@ a[class*=" icon-"]:hover {
     width: 100%;
     top: 0;
     background-color: #fff;
-    z-index: 1000;
+    z-index: 80;
 }
 
 #top>a {

src/main/webapp/js/admin/article.js

@@ -18,7 +18,7 @@
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
  * @author <a href="http://88250.b3log.org">Liang Ding</a>
- * @version 1.3.4.4, Jan 27, 2016
+ * @version 1.3.4.5, Nov 8, 2016
  */
 admin.article = {
     currentEditorType: '',
@@ -481,14 +481,14 @@ admin.article = {
         });
 
         // editor
-        admin.editors.articleEditor = new Editor({
+        admin.editors.articleEditor = new SoloEditor({
             id: "articleContent",
             kind: "all",
             fun: fun,
             height: 500
         });
 
-        admin.editors.abstractEditor = new Editor({
+        admin.editors.abstractEditor = new SoloEditor({
             id: "abstract",
             kind: "simple",
             height: 200

src/main/webapp/js/admin/editor.js

@@ -17,13 +17,13 @@
  * @fileoverview editor
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 1.1.0.4, May 30, 2015
+ * @version 1.1.0.5, Nov 8, 2016
  */
 
 admin.editors = {};
 
 /*
- * @description Create Editor can use all editor. 
+ * @description Create SoloEditor can use all editor. 
  *                e.g: TinyMCE, wnd 
  * @constructor
  * @param conf 编辑器初始化参数
@@ -33,7 +33,7 @@ admin.editors = {};
  * @param conf.type 编辑器种类
  * @param conf.codeMirrorLanguage codeMirror 编辑器当前解析语言
  */
-var Editor = function (conf) {
+var SoloEditor = function (conf) {
     this._defaults = {
         type: "tinyMCE",
         kind: "",
@@ -45,7 +45,7 @@ var Editor = function (conf) {
     this._init();
 };
 
-$.extend(Editor.prototype, {
+$.extend(SoloEditor.prototype, {
     /*
      * @description 初始化
      */

src/main/webapp/js/admin/pageList.js

@@ -18,7 +18,7 @@
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
  * @author <a href="http://88250.b3log.org">Liang Ding</a>
- * @version 1.1.2.4, May 30, 2015
+ * @version 1.1.2.5, Nov 8, 2016
  */
 
 /* page-list 相关操作 */
@@ -77,7 +77,7 @@ admin.pageList = {
         }
 
         admin.pageList.currentEditorType = Label.editorType;
-        admin.editors.pageEditor = new Editor({
+        admin.editors.pageEditor = new SoloEditor({
             language: language,
             kind: "all",
             id: "pageContent"

src/main/webapp/js/lib/CodeMirrorEditor/codemirror.css

@@ -12,7 +12,7 @@
 .CodeMirror-lines {
     padding: 4px 0; /* Vertical padding around content */
 }
-.CodeMirror pre {
+.CodeMirror-lines pre {
     padding: 0 4px; /* Horizontal padding of content */
 }
 
@@ -228,7 +228,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
     cursor: text;
     min-height: 1px; /* prevents collapsing before first draw */
 }
-.CodeMirror pre {
+.CodeMirror-lines pre {
     /* Reset some styles that the rest of the page might have set */
     -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
     border-width: 0;
@@ -322,7 +322,7 @@ div.CodeMirror-dragcursors {
 
 .CodeMirror-hints {
     position: absolute;
-    z-index: 10;
+    z-index: 100;
     overflow: hidden;
     list-style: none;
 
@@ -372,11 +372,6 @@ li.CodeMirror-hint-active {
         visibility: hidden;
     }
 }
-#revision .cm-s-default.CodeMirror {
-    border-radius: 0;
-    border: 0;
-    margin-bottom: 0;
-}
 
 .CodeMirror-merge-2pane .CodeMirror-merge-pane { 
     width: 49%;
@@ -575,9 +570,10 @@ span.CodeMirror-selectedtext { background: none; }
     border-right: 1px solid white;
     color: transparent;
     text-indent: -10px;
-    margin: 0 6px;
+    margin: 0 5px;
 }
-.editor-toolbar a.icon-fullscreen {
+.editor-toolbar a.icon-fullscreen,
+.editor-toolbar a.icon-contract {
     position: absolute;
     right: 0;
 }
@@ -606,7 +602,7 @@ span.CodeMirror-selectedtext { background: none; }
     top: 1px;
     padding: 0px 4px;
     left: 100%;
-    background: #FCFCFC;
+    background: #FDFDFD;
     z-index: 9999;
     overflow: auto;
     -webkit-transition: left 0.2s ease;
@@ -621,3 +617,18 @@ span.CodeMirror-selectedtext { background: none; }
 .editor-preview > p {
     margin-top: 0;
 }
+.CodeMirror-preview {
+    background-color: #FFF;
+    width: 50%;
+    top: 30px;
+    border-left: 1px solid #ccc;
+    border-radius: 0 0 3px;
+    border-top: 0;
+    overflow: hidden;
+    right: 0;
+    position: absolute;
+    box-shadow: 0 1px 2px rgba(0,0,0,.075) inset;
+    padding: 4px;
+    box-sizing: border-box;
+    overflow: auto;
+}

src/main/webapp/js/lib/CodeMirrorEditor/codemirror.js

@@ -1146,9 +1146,11 @@
   }
 
   function handlePaste(e, cm) {
-    var pasted = e.clipboardData && e.clipboardData.getData("text/html"); // NOTE: changed by Vanessa
-    if (pasted) {
-        pasted = Util.processClipBoard(pasted, cm); // NOTE: Vanessa add
+    // NOTE: start by Vanessa
+    if ((e.clipboardData && e.clipboardData.getData("text/html")) || e.clipboardData.items.length === 2) {
+      // fix mac: in browser, right click -> copy image, remove text/plain
+      var pasted = Util.processClipBoard(e.clipboardData, cm); 
+      // NOTE: end bu Vanessa
       e.preventDefault();
       if (!cm.isReadOnly() && !cm.options.disableInput)
         runInOp(cm, function() { applyTextInput(cm, pasted, 0, null, "paste"); });

src/main/webapp/js/lib/CodeMirrorEditor/editor.js

@@ -1018,10 +1018,11 @@
         'Cmd-B': toggleBold,
         'Cmd-I': toggleItalic,
         'Cmd-K': drawLink,
-        // 'Cmd-Alt-I': drawImage,
-        "Cmd-'": toggleBlockquote,
-        'Cmd-Alt-L': toggleOrderedList,
-        'Cmd-L': toggleUnOrderedList
+        "Cmd-E": toggleBlockquote,
+        'Shift-Cmd-L': toggleOrderedList,
+        'Cmd-L': toggleUnOrderedList,
+        'Cmd-D': togglePreview,
+        'Shift-Cmd-A': toggleFullScreen
     };
 
 
@@ -1107,8 +1108,60 @@
      * Toggle full screen of the editor.
      */
     function toggleFullScreen(editor) {
-        editor.codemirror.setOption("fullScreen", !editor.codemirror.getOption("fullScreen"));
-        editor.codemirror.focus();
+        var cm = editor.codemirror,
+        wrap = editor.codemirror.getWrapperElement();
+        
+        if ('icon-fullscreen' === editor.toolbar.fullscreen.className) {
+            editor.toolbar.fullscreen.className = 'icon-contract';
+            editor.toolbar.preview.style.display = 'none';
+            if (editor.toolbar.preview.className.indexOf('active') > -1) {
+                editor.toolbar.preview.click();
+            }
+
+            $(editor.element.parentElement).css({
+                'position': 'fixed',
+                'top': '0',
+                'z-index': '90',
+                'left': '0',
+                'right': '0'
+            });
+
+            cm.state.fullScreenRestore = {scrollTop: window.pageYOffset, scrollLeft: window.pageXOffset,
+                                          width: wrap.style.width, height: wrap.style.height};
+            wrap.style.width = "50%";
+            wrap.style.height = ($(window).height() - $('.editor-toolbar').outerHeight()) + 'px';
+            cm.refresh();
+            
+            $.ajax({
+                url: editor.options.html2mdURL,
+                type: "POST",
+                cache: false,
+                data: {
+                    markdownText: cm.getValue()
+                },
+                success: function (result, textStatus) {
+                    $(editor.element.parentElement).prepend('<div class="CodeMirror-preview content-reset" style="height:' 
+                + ($(window).height() - $('.editor-toolbar').outerHeight()) + 'px">' + result.html + '</div>');
+                    hljs.initHighlighting.called = false;
+                    hljs.initHighlighting();
+                }
+            });
+
+            return false;
+        }
+
+        editor.toolbar.fullscreen.className = 'icon-fullscreen';
+        editor.toolbar.preview.style.display = 'inline';
+        $(editor.element.parentElement).css({
+            'position': 'inherit'
+        });
+
+        $(editor.element.parentElement).find('.CodeMirror-preview').remove();    
+
+        var info = cm.state.fullScreenRestore;
+        wrap.style.width = info.width; 
+        wrap.style.height = info.height;
+        cm.refresh();
     }
 
 
@@ -1279,10 +1332,12 @@
         var text = cm.getValue();
 
         $.ajax({
-            url: latkeConfig.servePath + "/console/markdown/2html",
+            url: editor.options.html2mdURL,
             type: "POST",
             cache: false,
-            data: JSON.stringify({markdownText: text}),
+            data: {
+                markdownText: text
+            },
             success: function (result, textStatus) {
                 preview.innerHTML = result.html;
                 hljs.initHighlighting.called = false;
@@ -1648,5 +1703,5 @@
         toggleFullScreen(this);
     };
 
-    global.CodeMirrorEditor = Editor;
+    global.Editor = Editor;
 })(this);
\ No newline at end of file

src/main/webapp/js/lib/CodeMirrorEditor/fullscreen.js

-// CodeMirror, copyright (c) by Marijn Haverbeke and others
-// Distributed under an MIT license: http://codemirror.net/LICENSE
-
-(function(mod) {
-  if (typeof exports == "object" && typeof module == "object") // CommonJS
-    mod(require("../../lib/codemirror"));
-  else if (typeof define == "function" && define.amd) // AMD
-    define(["../../lib/codemirror"], mod);
-  else // Plain browser env
-    mod(CodeMirror);
-})(function(CodeMirror) {
-  "use strict";
-
-  CodeMirror.defineOption("fullScreen", false, function(cm, val, old) {
-    if (old == CodeMirror.Init) old = false;
-    if (!old == !val) return;
-    if (val) setFullscreen(cm);
-    else setNormal(cm);
-  });
-
-  function setFullscreen(cm) {
-    var wrap = cm.getWrapperElement();
-    cm.state.fullScreenRestore = {scrollTop: window.pageYOffset, scrollLeft: window.pageXOffset,
-                                  width: wrap.style.width, height: wrap.style.height};
-    wrap.style.width = "";
-    wrap.style.height = "auto";
-    wrap.className += " CodeMirror-fullscreen";
-    document.documentElement.style.overflow = "hidden";
-    cm.refresh();
-  }
-
-  function setNormal(cm) {
-    var wrap = cm.getWrapperElement();
-    wrap.className = wrap.className.replace(/\s*CodeMirror-fullscreen\b/, "");
-    document.documentElement.style.overflow = "";
-    var info = cm.state.fullScreenRestore;
-    wrap.style.width = info.width; wrap.style.height = info.height;
-    window.scrollTo(info.scrollLeft, info.scrollTop);
-    cm.refresh();
-  }
-});

src/main/webapp/js/lib/CodeMirrorEditor/placeholder.js

-// CodeMirror, copyright (c) by Marijn Haverbeke and others
-// Distributed under an MIT license: http://codemirror.net/LICENSE
-
-(function(mod) {
-  if (typeof exports == "object" && typeof module == "object") // CommonJS
-    mod(require("../../lib/codemirror"));
-  else if (typeof define == "function" && define.amd) // AMD
-    define(["../../lib/codemirror"], mod);
-  else // Plain browser env
-    mod(CodeMirror);
-})(function(CodeMirror) {
-  CodeMirror.defineOption("placeholder", "", function(cm, val, old) {
-    var prev = old && old != CodeMirror.Init;
-    if (val && !prev) {
-      cm.on("blur", onBlur);
-      cm.on("change", onChange);
-      onChange(cm);
-    } else if (!val && prev) {
-      cm.off("blur", onBlur);
-      cm.off("change", onChange);
-      clearPlaceholder(cm);
-      var wrapper = cm.getWrapperElement();
-      wrapper.className = wrapper.className.replace(" CodeMirror-empty", "");
-    }
-
-    if (val && !cm.hasFocus()) onBlur(cm);
-  });
-
-  function clearPlaceholder(cm) {
-    if (cm.state.placeholder) {
-      cm.state.placeholder.parentNode.removeChild(cm.state.placeholder);
-      cm.state.placeholder = null;
-    }
-  }
-  function setPlaceholder(cm) {
-    clearPlaceholder(cm);
-    var elt = cm.state.placeholder = document.createElement("pre");
-    elt.style.cssText = "height: 0; overflow: visible";
-    elt.className = "CodeMirror-placeholder";
-    var placeHolder = cm.getOption("placeholder")
-    if (typeof placeHolder == "string") placeHolder = document.createTextNode(placeHolder)
-    elt.appendChild(placeHolder)
-    cm.display.lineSpace.insertBefore(elt, cm.display.lineSpace.firstChild);
-  }
-
-  function onBlur(cm) {
-    if (isEmpty(cm)) setPlaceholder(cm);
-  }
-  function onChange(cm) {
-    var wrapper = cm.getWrapperElement(), empty = isEmpty(cm);
-    wrapper.className = wrapper.className.replace(" CodeMirror-empty", "") + (empty ? " CodeMirror-empty" : "");
-
-    if (empty) setPlaceholder(cm);
-    else clearPlaceholder(cm);
-  }
-
-  function isEmpty(cm) {
-    return (cm.lineCount() === 1) && (cm.getLine(0) === "");
-  }
-});