Experimental Mermaid integration document section type

WIP and not hopeful

domain/section/mermaid/mermaid.go

@@ -0,0 +1,55 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+package mermaid
+
+import (
+	"net/http"
+
+	"github.com/documize/community/core/env"
+	"github.com/documize/community/domain"
+	"github.com/documize/community/domain/section/provider"
+)
+
+// Provider represents Mermaid Diagram
+type Provider struct {
+	Runtime *env.Runtime
+	Store   *domain.Store
+}
+
+// Meta describes us
+func (*Provider) Meta() provider.TypeMeta {
+	section := provider.TypeMeta{}
+
+	section.ID = "f1067a60-45e5-40b5-89f6-aa3b03dd7f35"
+	section.Title = "Mermaid Diagram"
+	section.Description = "Diagrams generated from textual descriptions"
+	section.ContentType = "mermaid"
+	section.PageType = "tab"
+	section.Order = 9990
+
+	return section
+}
+
+// Command stub.
+func (*Provider) Command(ctx *provider.Context, w http.ResponseWriter, r *http.Request) {
+	provider.WriteEmpty(w)
+}
+
+// Render returns data as-is (HTML).
+func (*Provider) Render(ctx *provider.Context, config, data string) string {
+	return data
+}
+
+// Refresh just sends back data as-is.
+func (*Provider) Refresh(ctx *provider.Context, config, data string) string {
+	return data
+}

gui/.eslintrc.js

@@ -45,6 +45,7 @@ module.exports = {
   ],
   globals: {
     "is": true,
+    "mermaid": true,
     "_": true,
     "tinymce": true,
     "CodeMirror": true,

gui/app/components/section/mermaid/type-editor.js

@@ -0,0 +1,169 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import { computed, observer } from '@ember/object';
+import Component from '@ember/component';
+
+export default Component.extend({
+    isDirty: false,
+    diagramText: '',
+    diagramPreview: null,
+    config: null,
+
+	editorId: computed('page', function () {
+		let page = this.get('page');
+		return `mermaid-editor-${page.id}`;
+	}),
+	previewId: computed('page', function () {
+		let page = this.get('page');
+		return `mermaid-preview-${page.id}`;
+    }),
+    // generateDiagram: observer('diagramText', function() {
+    //     let txt = this.get('diagramText');
+    //     console.log('calc diaggram');
+
+    //     let self = this;
+    //     var cb = function(svg) {
+    //         return svg;
+    //         // self.set('diagramPreview', svg);
+    //     };
+
+    //     if (is.empty(this.get('diagramText'))) return '';
+
+    //     mermaid.render(this.get('previewId'), txt, cb);
+    // }),
+
+    keyUp() {
+        this.generateDiagram();
+    },
+
+    generateDiagram() {
+        console.log('calc diaggram');
+
+        let txt = this.get('diagramText');
+        if (is.empty(this.get('diagramText')))  this.set('diagramPreview', '');
+
+        let self = this;
+        var cb = function(svg) {
+            self.set('diagramPreview', svg);
+        };
+
+        mermaid.render(this.get('previewId'), txt, cb);
+    },
+    
+    didReceiveAttrs() {
+        this._super(...arguments);
+        let config = {};
+        mermaid.initialize({});
+        console.log('dra');
+
+		try {
+			config = JSON.parse(this.get('meta.config'));
+		} catch (e) {} // eslint-disable-line no-empty
+
+		if (is.empty(config)) {
+			config = {
+				txt: ""
+			};
+        }
+        
+        this.set('diagramText', config.txt);
+        this.set('config', config);
+
+        this.generateDiagram();
+    },
+
+	// onType: function() {
+	// 	debounce(this, this.generateDiagram, 350);
+    // }.observes('diagramText'),
+
+    actions: {
+        isDirty() {
+            return this.get('isDirty') || (this.get('diagramText') !== this.get('config.txt'));
+        },
+
+        onCancel() {
+            let cb = this.get('onCancel');
+            cb();
+        },
+
+        onAction(title) {
+            let page = this.get('page');
+            let meta = this.get('meta');
+
+            meta.set('config', JSON.stringify({ txt: this.get('diagramText') }));
+            meta.set('rawBody', this.get('diagramPreview'));
+            page.set('body', this.get('diagramPreview'));
+            page.set('title', title);
+
+            let cb = this.get('onAction');
+            cb(page, meta);
+        },
+
+        onInsertFlowchart() {
+            let txt  = `graph TB
+            c1-->a2
+            subgraph one
+            a1-->a2
+            end
+            subgraph two
+            b1-->b2
+            end
+            subgraph three
+            c1-->c2
+            end`;
+
+            // this.set('diagramPreview', null);
+            this.set('diagramText', txt);
+            this.generateDiagram();
+        },
+
+        onInsertSequence() {
+            let txt  = `sequenceDiagram
+            participant Alice
+            participant Bob
+            Alice->John: Hello John, how are you?
+            loop Healthcheck
+                John->John: Fight against hypochondria
+            end
+            Note right of John: Rational thoughts <br/>prevail...
+            John-->Alice: Great!
+            John->Bob: How about you?
+            Bob-->John: Jolly good!`;
+
+            // this.set('diagramPreview', null);
+            this.set('diagramText', txt);
+            this.generateDiagram();
+        },
+
+        onInsertGantt() {
+            let txt  = `gantt
+            dateFormat  YYYY-MM-DD
+            title Adding GANTT diagram functionality to mermaid
+            section A section
+            Completed task            :done,    des1, 2014-01-06,2014-01-08
+            Active task               :active,  des2, 2014-01-09, 3d
+            Future task               :         des3, after des2, 5d
+            Future task2               :         des4, after des3, 5d
+            section Critical tasks
+            Completed task in the critical line :crit, done, 2014-01-06,24h
+            Implement parser and jison          :crit, done, after des1, 2d
+            Create tests for parser             :crit, active, 3d
+            Future task in critical line        :crit, 5d
+            Create tests for renderer           :2d
+            Add to mermaid                      :1d`;
+
+            // this.set('diagramPreview', null);
+            this.set('diagramText', txt);
+            this.generateDiagram();
+        }
+    }
+});

gui/app/components/section/mermaid/type-renderer.js

@@ -0,0 +1,15 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import Component from '@ember/component';
+
+export default Component.extend({
+});

gui/app/styles/app.scss

@@ -28,6 +28,7 @@
 @import "section/markdown.scss";
 @import "section/table.scss";
 @import "section/code.scss";
+@import "section/mermaid.scss";
 @import "section/papertrail.scss";
 @import "section/wysiwyg.scss";
 

gui/app/styles/base.scss

@@ -23,7 +23,7 @@ body {
 	height: 100%;
 	min-height: 100%;
 	width: 100%;
-	overflow-y: scroll;
+	// overflow-y: scroll;
 }
 
 a {

gui/app/styles/section/mermaid.scss

@@ -0,0 +1,4 @@
+.section-mermaid-diagram {
+	margin: 0;
+	padding: 0;
+}

gui/app/templates/components/section/mermaid/type-editor.hbs

@@ -0,0 +1,30 @@
+{{#section/base-editor document=document folder=folder page=page tip="Concise name that describes the diagram" isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}}
+	<div class="section-mermaid-diagram">
+		<div class="container">
+			<div class="row">
+				<div class="col-12 col-sm-6">
+					<div class="form-group">
+						<label>Diagram Text&nbsp;&nbsp;&nbsp;</label> <a href="https://mermaidjs.github.io/" target="_blank">(Mermaid User Guide)</a>
+						<textarea rows=20 id={{editorId}} class="diagram-editor form-control mousetrap">{{diagramText}}</textarea>
+						<div class="mt-3">
+							<p>Insert sample diagrams:</p>
+							<p>
+								<button type="button" class="btn btn-light btn-sm" {{action 'onInsertFlowchart'}}>Flowchart</button>
+								<button type="button" class="btn btn-light btn-sm" {{action 'onInsertSequence'}}>Sequence</button>
+								<button type="button" class="btn btn-light btn-sm" {{action 'onInsertGantt'}}>Gantt</button>
+							</p>
+						</div>
+					</div>
+				</div>
+				<div class="col-12 col-sm-6">
+					<div class="form-group">
+						<label>Diagram Preview</label>
+						<div id={{previewId}}>
+							{{{diagramPreview}}}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+{{/section/base-editor}}

gui/app/templates/components/section/mermaid/type-renderer.hbs

@@ -0,0 +1,3 @@
+<div class="text-center">
+    {{{page.body}}}
+</div>