Added support for UML charts
This commit is contained in:
benweet
parent
274c9457b9
commit
fd901e07ba
@ -27,6 +27,12 @@
|
||||
"rangy": "~1.2.3",
|
||||
"google-diff-match-patch-js": "~1.0.0",
|
||||
"jsondiffpatch": "https://github.com/benweet/jsondiffpatch.git#fb9dddf7cd076d8ec89d376c0e9de9223e9888f9",
|
||||
"hammerjs": "~1.0.10"
|
||||
"hammerjs": "~1.0.10",
|
||||
"raphael": "~2.1.2",
|
||||
"js-sequence-diagrams": "https://github.com/bramp/js-sequence-diagrams.git#1.0.4",
|
||||
"flowchart": "https://github.com/adrai/flowchart.js.git#~1.2.10"
|
||||
},
|
||||
"resolutions": {
|
||||
"js-sequence-diagrams": "1.0.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,12 +3,16 @@ define([
|
||||
"jquery",
|
||||
"underscore",
|
||||
"utils",
|
||||
"logger",
|
||||
"classes/Extension",
|
||||
"text!html/markdownExtraSettingsBlock.html",
|
||||
'google-code-prettify',
|
||||
'highlightjs',
|
||||
'crel',
|
||||
'sequence-diagram',
|
||||
'flow-chart',
|
||||
'pagedown-extra',
|
||||
], function($, _, utils, Extension, markdownExtraSettingsBlockHTML, prettify, hljs) {
|
||||
], function($, _, utils, logger, Extension, markdownExtraSettingsBlockHTML, prettify, hljs, crel, sequenceDiagram, flowChart) {
|
||||
|
||||
var markdownExtra = new Extension("markdownExtra", "Markdown Extra", true);
|
||||
markdownExtra.settingsBlock = markdownExtraSettingsBlockHTML;
|
||||
@ -67,6 +71,11 @@ define([
|
||||
eventMgr = eventMgrParameter;
|
||||
};
|
||||
|
||||
var previewContentsElt;
|
||||
markdownExtra.onReady = function() {
|
||||
previewContentsElt = document.getElementById('preview-contents');
|
||||
};
|
||||
|
||||
markdownExtra.onPagedownConfigure = function(editor) {
|
||||
var converter = editor.getConverter();
|
||||
if(markdownExtra.config.intraword === true) {
|
||||
@ -86,14 +95,49 @@ define([
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
var extraOptions = {
|
||||
extensions: markdownExtra.config.extensions
|
||||
};
|
||||
|
||||
function doSequenceDiagrams() {
|
||||
_.each(previewContentsElt.querySelectorAll('.prettyprint > .language-sequence'), function(elt) {
|
||||
try {
|
||||
var diagram = sequenceDiagram.parse(elt.textContent);
|
||||
var preElt = elt.parentNode;
|
||||
var containerElt = crel('div', {
|
||||
class: 'sequence-diagram'
|
||||
});
|
||||
preElt.parentNode.replaceChild(containerElt, preElt);
|
||||
diagram.drawSVG(containerElt, {
|
||||
theme: 'simple'
|
||||
});
|
||||
}
|
||||
catch(e) {
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
_.each(previewContentsElt.querySelectorAll('.prettyprint > .language-flow'), function(elt) {
|
||||
try {
|
||||
var chart = flowChart.parse(elt.textContent);
|
||||
var preElt = elt.parentNode;
|
||||
var containerElt = crel('div', {
|
||||
class: 'flow-chart'
|
||||
});
|
||||
preElt.parentNode.replaceChild(containerElt, preElt);
|
||||
chart.drawSVG(containerElt, {
|
||||
'line-width': 2
|
||||
});
|
||||
}
|
||||
catch(e) {
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
if(markdownExtra.config.highlighter == "highlight") {
|
||||
extraOptions.highlighter = "prettify";
|
||||
var previewContentsElt = document.getElementById('preview-contents');
|
||||
editor.hooks.chain("onPreviewRefresh", function() {
|
||||
doSequenceDiagrams();
|
||||
_.each(previewContentsElt.querySelectorAll('.prettyprint > code'), function(elt) {
|
||||
!elt.highlighted && hljs.highlightBlock(elt);
|
||||
elt.highlighted = true;
|
||||
@ -102,10 +146,13 @@ define([
|
||||
}
|
||||
else if(markdownExtra.config.highlighter == "prettify") {
|
||||
extraOptions.highlighter = "prettify";
|
||||
editor.hooks.chain("onPreviewRefresh", prettify.prettyPrint);
|
||||
editor.hooks.chain("onPreviewRefresh", function() {
|
||||
doSequenceDiagrams();
|
||||
prettify.prettyPrint();
|
||||
});
|
||||
}
|
||||
Markdown.Extra.init(converter, extraOptions);
|
||||
};
|
||||
|
||||
return markdownExtra;
|
||||
});
|
||||
});
|
||||
|
||||
@ -16,7 +16,8 @@ Prism.languages.md = (function() {
|
||||
md['pre gfm'] = {
|
||||
pattern: /^ {0,3}`{3}.*?\n(.*?\n)*? {0,3}`{3} *$/gm,
|
||||
inside: {
|
||||
"md md-pre": /`{3}/
|
||||
"md md-pre": /`{3}/,
|
||||
lf: /\n/gm,
|
||||
}
|
||||
};
|
||||
md['h1 alt'] = {
|
||||
|
||||
@ -60,7 +60,11 @@ requirejs.config({
|
||||
diff_match_patch: 'bower-libs/google-diff-match-patch-js/diff_match_patch',
|
||||
diff_match_patch_uncompressed: 'bower-libs/google-diff-match-patch-js/diff_match_patch_uncompressed',
|
||||
jsondiffpatch: 'bower-libs/jsondiffpatch/build/bundle',
|
||||
hammerjs: 'bower-libs/hammerjs/hammer'
|
||||
hammerjs: 'bower-libs/hammerjs/hammer',
|
||||
'sequence-diagram': 'bower-libs/js-sequence-diagrams/build/sequence-diagram-min',
|
||||
raphael: 'bower-libs/raphael/raphael',
|
||||
'flow-chart': 'bower-libs/flowchart/release/flowchart.amd-1.2.10.min',
|
||||
flowchart: 'bower-libs/flowchart/release/flowchart-1.2.10.min'
|
||||
},
|
||||
shim: {
|
||||
underscore: {
|
||||
@ -144,7 +148,17 @@ requirejs.config({
|
||||
],
|
||||
'pagedown-extra': [
|
||||
'libs/Markdown.Converter'
|
||||
]
|
||||
],
|
||||
'sequence-diagram': {
|
||||
deps: [
|
||||
'underscore',
|
||||
'raphael'
|
||||
],
|
||||
exports: 'Diagram'
|
||||
},
|
||||
'flow-chart': [
|
||||
'raphael'
|
||||
],
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -130,6 +130,23 @@ hr {
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
.sequence-diagram, .flow-chart {
|
||||
text-align: center;
|
||||
text {
|
||||
font-size: 1em !important;
|
||||
font-family: @font-family-sans-serif !important;
|
||||
}
|
||||
[fill="#ffffff"] {
|
||||
fill: none;
|
||||
}
|
||||
[stroke="#000000"] {
|
||||
stroke: @text-color;
|
||||
}
|
||||
[fill="#000"], [fill="#000000"], [fill="black"] {
|
||||
fill: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
code, pre {
|
||||
font-family: @font-family-monospace;
|
||||
font-size: 0.9em;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user