PLT-327: Add help text for Markdown

7 files changed, 125 insertions, 14 deletions

diff --git a/web/react/components/docs.jsx b/web/react/components/docs.jsx
new file mode 100644
index 000000000..68baa6dad
--- /dev/null
+++ b/web/react/components/docs.jsx
@@ -0,0 +1,41 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+const TextFormatting = require('../utils/text_formatting.jsx');
+const UserStore = require('../stores/user_store.jsx');
+
+export default class Docs extends React.Component {
+    constructor(props) {
+        super(props);
+        UserStore.setCurrentUser(global.window.mm_user || {});
+
+        this.state = {text: ''};
+        const errorState = {text: '## 404'};
+
+        if (props.site) {
+            $.get('/static/help/' + props.site + '.md').then((response) => {
+                this.setState({text: response});
+            }, () => {
+                this.setState(errorState);
+            });
+        } else {
+            this.setState(errorState);
+        }
+    }
+
+    render() {
+        return (
+            <div
+                dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.state.text)}}
+            >
+            </div>
+        );
+    }
+}
+
+Docs.defaultProps = {
+    site: ''
+};
+Docs.propTypes = {
+    site: React.PropTypes.string
+};
diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx
index e6530b941..1a5269baa 100644
--- a/web/react/components/textbox.jsx
+++ b/web/react/components/textbox.jsx
@@ -295,6 +295,13 @@ export default class Textbox extends React.Component {
         this.resize();
     }
 
+    showHelp(e) {
+        e.preventDefault();
+        e.target.blur();
+
+        global.window.open('/docs/Messaging');
+    }
+
     render() {
         const previewLinkVisible = this.props.messageText.length > 0;
 
@@ -336,11 +343,17 @@ export default class Textbox extends React.Component {
                 >
                 </div>
                 <a
+                    onClick={this.showHelp}
+                    className='textbox-help-link'
+                >
+                    {'Help'}
+                </a>
+                <a
                     style={{visibility: previewLinkVisible ? 'visible' : 'hidden'}}
                     onClick={this.showPreview}
                     className='textbox-preview-link'
                 >
-                    {this.state.preview ? 'Edit message' : 'Preview'}
+                    {this.state.preview ? 'Edit' : 'Preview'}
                 </a>
             </div>
         );
diff --git a/web/react/pages/docs.jsx b/web/react/pages/docs.jsx
new file mode 100644
index 000000000..ed2b6d0c9
--- /dev/null
+++ b/web/react/pages/docs.jsx
@@ -0,0 +1,16 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var Docs = require('../components/docs.jsx');
+
+function setupDocumentationPage(props) {
+    ReactDOM.render(
+        <Docs
+            site={props.Site}
+        />,
+        document.getElementById('docs')
+    );
+}
+
+global.window.mm_user = global.window.mm_user || {};
+global.window.setup_documentation_page = setupDocumentationPage;
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 5a7d79afe..fad6f5074 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -47,20 +47,25 @@ body.ios {
 
 .textarea-wrapper {
 	position:relative;
-	.textbox-preview-area {
-		position: absolute;
-		z-index: 2;
-		top: 0;
-		left: 0;
-		box-shadow: none;
-	}
-	.textbox-preview-link {
-		position: absolute;
-		z-index: 3;
-		bottom: -23px;
-		right: 0;
+    .textbox-preview-area {
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        box-shadow: none;
+    }
+	.textbox-preview-link, .textbox-help-link {
+        position: absolute;
+        z-index: 3;
+        bottom: -23px;
 		font-size: 13px;
-		cursor: pointer;
+        cursor: pointer;
+    }
+    .textbox-preview-link {
+        right: 45px;
+    }
+	.textbox-help-link {
+		right: 0;
 	}
 	min-height:36px;
 }
diff --git a/web/static/help/Messaging.md b/web/static/help/Messaging.md
new file mode 120000
index 000000000..f74c0b879
--- /dev/null
+++ b/web/static/help/Messaging.md
@@ -0,0 +1 @@
+../../../doc/help/Messaging.md
\ No newline at end of file
diff --git a/web/templates/docs.html b/web/templates/docs.html
new file mode 100644
index 000000000..21659e810
--- /dev/null
+++ b/web/templates/docs.html
@@ -0,0 +1,24 @@
+{{define "docs"}}
+<!DOCTYPE html>
+<html>
+{{template "head" . }}
+<body class="white">
+<div class="container-fluid">
+    <div class="inner__wrap">
+        <div class="row content">
+            <div class="col-sm-12">
+                <div id="docs"></div>
+            </div>
+            <div class="footer-push"></div>
+        </div>
+        <div class="row footer">
+            {{template "footer" . }}
+        </div>
+    </div>
+</div>
+<script>
+    window.setup_documentation_page({{ .Props }});
+</script>
+</body>
+</html>
+{{end}}
diff --git a/web/web.go b/web/web.go
index 02ceb69ba..477bd8b27 100644
--- a/web/web.go
+++ b/web/web.go
@@ -80,6 +80,8 @@ func InitWeb() {
 
 	mainrouter.Handle("/hooks/{id:[A-Za-z0-9]+}", api.ApiAppHandler(incomingWebhook)).Methods("POST")
 
+	mainrouter.Handle("/docs/{doc:[A-Za-z0-9]+}", api.AppHandlerIndependent(docs)).Methods("GET")
+
 	// ----------------------------------------------------------------------------------------------
 	// *ANYTHING* team specific should go below this line
 	// ----------------------------------------------------------------------------------------------
@@ -494,6 +496,15 @@ func findTeam(c *api.Context, w http.ResponseWriter, r *http.Request) {
 	page.Render(c, w)
 }
 
+func docs(c *api.Context, w http.ResponseWriter, r *http.Request) {
+	params := mux.Vars(r)
+	doc := params["doc"]
+
+	page := NewHtmlTemplatePage("docs", "Documentation")
+	page.Props["Site"] = doc
+	page.Render(c, w)
+}
+
 func resetPassword(c *api.Context, w http.ResponseWriter, r *http.Request) {
 	isResetLink := true
 	hash := r.URL.Query().Get("h")