Include editing capabilities

README.md

@@ -1,6 +1,6 @@
 # Markdown Preview for Alfresco Share
 
-This module adds a markdown preview to Alfresco Share:
+This module adds a markdown preview and edit button to Alfresco Share:
 
 ![](markdown-preview.png)
 
@@ -13,12 +13,19 @@ You will need:
 * Parashift's alfresco amp plugin from here: https://bitbucket.org/parashift/alfresco-amp-plugin
 * Run `gradle amp` from the `share` and `repo` directories
 
-### Installing to Alfresco
+## Installing to Alfresco
 
 * Deploy the amp to both the repo and share end using alfresco-mmt or other methods
 
-### Usage
+## Usage
 
-The usage is automatic.
+### Previewing a Markdown document
 
-Any documents with the mime type `text/x-markdown` will display within the document details view.
+* Navigate to the document details page of a markdown document
+
+
+### Editing a Markdown document
+
+* Find a markdown document within the document library
+* Select `Edit Markdown`
+* When you are finished, select `Save Markdown`

repo/build.gradle

@@ -20,7 +20,7 @@ allprojects {
     }
 }
 
-version = "1.0.0"
+version = "1.1.0"
 
 ext {
     alfresco = [:]

share/build.gradle

@@ -30,7 +30,7 @@ configurations {
     all*.exclude group: 'maven-plugins'
 }
 
-version = "1.0.0"
+version = "1.1.0"
 
 ext {
     alfresco = [:]

share/src/main/resources/META-INF/components/markdown-edit.css

@@ -0,0 +1,35 @@
+.markdown-section {
+    overflow: hidden;
+    border: 1px solid #ccc !important;
+    background-color: #fff;
+    margin: 10px 0;
+    box-shadow: 0.33px 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.markdown-section .markdown-body {
+    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
+    box-sizing: border-box;         /* Opera/IE 8+ */
+    border: 0px;
+    overflow-x: auto;
+
+}
+
+.markdown-editor, .markdown-preview {
+    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
+    box-sizing: border-box;         /* Opera/IE 8+ */
+    float: left;
+    width: 50%;
+    padding: 5px;
+}
+
+
+.markdown-text {
+    width: 100% !important;
+}
+
+
+.markdown-section h1 {
+    border-bottom: 3px solid #ccc;
+}

share/src/main/resources/META-INF/components/markdown-edit.js

@@ -0,0 +1,96 @@
+require(["dojo/dom", "dojo/query", "dojo/on", "dojo/request", "showdown", "dojo/domReady!"], function(dom, query, on, request, showdown){
+
+    function resizeFrame(elem) {
+         elem.style.height = (window.innerHeight - 280) + "px";
+    }
+
+    function getURLParameter(name) {
+      return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null
+    }
+
+    var nodePath = getURLParameter("nodeRef").replace(":/","");
+
+    request.get(Alfresco.constants.PROXY_URI_RELATIVE + "/slingshot/doclib2/node/" + nodePath,{ handleAs: "json"}).then(function(nodeData) {
+
+
+        var locationPath = Alfresco.constants.PROXY_URI_RELATIVE + "markdown" + nodeData.item.location.repoPath + "/";
+
+        //Once we have the content, let's create a converter and add the html to the div element
+        var converter = new showdown.Converter({
+            extensions: [
+                function() {
+                    return [{
+                        type: 'output',
+                        filter: function(source) {
+                            return source.replace(/<img src="([^"]*)"/g, function(match, src) {
+
+                                if(src.startsWith("http")) {
+                                    //if this includes external links, then don't change it.
+                                    return match;
+                                } else {
+                                    //if it's a relative link, we need to use our webscript
+                                    return "<img src=\"" + locationPath + src + "\"";
+                                }
+                            });
+                        }
+                    }]
+                }
+            ]
+
+        });
+
+        var editorFrame = dom.byId("md-text");
+        var previewFrame = dom.byId("md-body");
+        var saveBack = dom.byId("markdownSaveback");
+
+        resizeFrame(editorFrame);
+        resizeFrame(previewFrame);
+
+
+        on(window, "resize", function() {
+            resizeFrame(editorFrame);
+            resizeFrame(previewFrame);
+        });
+
+        function updateMarkdown() {
+
+            previewFrame.innerHTML = converter.makeHtml(editorFrame.value);
+        }
+
+        on(editorFrame, "change", updateMarkdown);
+        on(editorFrame, "keyup", updateMarkdown);
+        on(editorFrame, "paste", updateMarkdown);
+
+        request.get(Alfresco.constants.PROXY_URI_RELATIVE + "/api/node/content/" + nodePath).then(function(nodeContent) {
+            editorFrame.value = nodeContent;
+            updateMarkdown();
+        });
+
+
+        on(saveBack, "click", function() {
+
+            var postHeaders = {
+                "Content-Type" : "application/json"
+            }
+
+            if (Alfresco.util.CSRFPolicy && Alfresco.util.CSRFPolicy.isFilterEnabled()) {
+                postHeaders[Alfresco.util.CSRFPolicy.getHeader()] = Alfresco.util.CSRFPolicy.getToken();
+            }
+
+            request.post(Alfresco.constants.PROXY_URI_RELATIVE + "api/node/" + nodePath + "/formprocessor", {
+                headers: postHeaders,
+                data : JSON.stringify({
+                    prop_cm_content : editorFrame.value
+                })
+            }).then(function() {
+                Alfresco.util.PopupManager.displayMessage({"text": "Update Submitted"});
+            }, function (err) {
+                //Tries to find the exception from the error page and send a prompt
+                Alfresco.util.PopupManager.displayPrompt({"title": "Error Updating Alfresco"});
+            });
+
+        });
+
+    });
+
+});

share/src/main/resources/alfresco/mdpreview-config.xml

@@ -1,3 +1,37 @@
 <alfresco-config>
-    <!-- Insert configuration here -->
+
+    <!-- not yet implemented
+    <config evaluator="string-compare" condition="DocumentLibrary">
+
+        <create-content>
+           <content id="markdown" label="create-content.md" type="pagelink" index="25">
+              <param name="page">markdown-edit?destination={nodeRef}</param>
+           </content>
+        </create-content>
+
+    </config>
+    -->
+
+    <config evaluator="string-compare" condition="DocLibActions">
+    <actions>
+        <action id="document-markdown-edit" type="pagelink" label="actions.document.markdown-edit">
+            <param name="page">markdown-edit?nodeRef={node.nodeRef}</param>
+            <permissions>
+                <permission allow="true">Write</permission>
+            </permissions>
+            <evaluator>evaluator.doclib.action.markdownMimetype</evaluator>
+            <evaluator>evaluator.doclib.action.editableByCurrentUser</evaluator>
+            <evaluator negate="true">evaluator.doclib.action.isLocked</evaluator>
+        </action>
+    </actions>
+    <actionGroups>
+        <actionGroup id="document-browse">
+            <action index="90" id="document-markdown-edit" />
+        </actionGroup>
+        <actionGroup id="document-details">
+            <action index="90" id="document-markdown-edit" />
+        </actionGroup>
+    </actionGroups>
+    </config>
+
 </alfresco-config>

share/src/main/resources/alfresco/messages/mdpreview.properties

@@ -0,0 +1,2 @@
+create-content.md=Markdown...
+actions.document.markdown-edit=Edit Markdown

share/src/main/resources/alfresco/site-data/pages/markdown-edit.xml

@@ -0,0 +1,9 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<page>
+   <title>Edit Markdown</title>
+   <title-id>page.markdown-edit.title</title-id>
+   <description>Edit Markdown</description>
+   <description-id>page.markdown-edit.description</description-id>
+   <template-instance>markdown-edit</template-instance>
+   <authentication>user</authentication>
+</page>

share/src/main/resources/alfresco/site-data/template-instances/markdown-edit.xml

@@ -0,0 +1,13 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<template-instance>
+   <template-type>com/parashift/markdown-edit</template-type>
+   <components>
+
+      <!-- My Sites -->
+      <component>
+         <region-id>markdown-edit</region-id>
+         <url>/components/markdown-edit</url>
+      </component>
+
+   </components>
+</template-instance>

share/src/main/resources/alfresco/site-webscripts/com/parashift/markdown/edit/markdown-edit.get.desc.xml

@@ -0,0 +1,5 @@
+<webscript>
+   <shortname>Markdown Edit</shortname>
+   <description>Allows a user to edit Markdown</description>
+   <url>/components/markdown-edit</url>
+</webscript>

share/src/main/resources/alfresco/site-webscripts/com/parashift/markdown/edit/markdown-edit.get.head.ftl

@@ -0,0 +1,3 @@
+<#-- PLEASE NOTE:
+<#-- Use of .head.ftl WebScript files has now been deprecated from WebScripts that render Share Components.    -->
+<#-- Dependencies are now loaded through the use of the <@script> and <@link> tags in the main .html.ftl file.  -->

share/src/main/resources/alfresco/site-webscripts/com/parashift/markdown/edit/markdown-edit.get.html.ftl

@@ -0,0 +1,39 @@
+<@markup id="css" >
+    <#-- CSS Dependencies -->
+    <@link href="${url.context}/res/components/preview/MarkDown.css" group="markdown"/>
+    <@link href="${url.context}/res/components/markdown-edit.css" group="markdown"/>
+</@>
+
+<@markup id="js">
+    <#-- JavaScript Dependencies -->
+    <@script src="${url.context}/res/components/markdown-edit.js" group="markdown"/>
+</@>
+
+
+<@markup id="html">
+    <@uniqueIdDiv>
+
+    <div class="markdown-section">
+        <div class="markdown-editor" id="md-edit">
+            <h1>Editor:</h1>
+            <textarea class="markdown-text" id="md-text"></textarea>
+        </div>
+        <div class="markdown-preview" id="md-preview">
+            <h1>Preview:</h1>
+            <div class="markdown-body" id="md-body">
+            </div>
+        </div>
+    </div>
+
+    <div class="markdown-save-back">
+        <div class="form-buttons">
+            <span class="yui-button yui-submit-button alf-primary-button">
+                <span class="first-child">
+                    <button type="button" id="markdownSaveback">Save Markdown</button>
+                </span>
+            </span>
+        </div>
+    </div>
+
+    </@>
+</@>

share/src/main/resources/alfresco/templates/com/parashift/markdown-edit.ftl

@@ -0,0 +1,24 @@
+<#include "../../org/alfresco/include/alfresco-template.ftl" />
+<@templateHeader>
+</@>
+
+<@templateBody>
+   <@markup id="alf-hd">
+   <div id="alf-hd">
+      <@region scope="global" id="share-header" chromeless="true"/>
+   </div>
+   </@>
+   <@markup id="bd">
+   <div id="bd">
+               <@region id="markdown-edit" scope="template" />
+   </div>
+   </@>
+</@>
+
+<@templateFooter>
+   <@markup id="alf-ft">
+   <div id="alf-ft">
+      <@region id="footer" scope="global" />
+   </div>
+   </@>
+</@>

share/src/main/resources/alfresco/web-extension/mdpreview-context.xml

@@ -20,4 +20,20 @@
         </property>
     </bean>
 
+    <bean id="mdpreview.custom.resources" class="org.springframework.extensions.surf.util.ResourceBundleBootstrapComponent">
+        <property name="resourceBundles">
+            <list>
+                <value>alfresco.messages.mdpreview</value>
+            </list>
+        </property>
+    </bean>
+
+    <bean id="evaluator.doclib.action.markdownMimetype" parent="evaluator.doclib.action.isMimetype">
+       <property name="mimetypes">
+          <list>
+             <value>text/x-markdown</value>
+          </list>
+       </property>
+    </bean>
+
 </beans>