require('prismjs/themes/prism.css');
require('prismjs/components/prism-wiki');
require('prismjs/components/prism-haskell');
require('prismjs/components/prism-go');
require('prismjs/components/prism-typescript');
require('prismjs/components/prism-jsx');
import Prism from 'prismjs';
import hljs from 'highlight.js';
import PDFObject from 'pdfobject';
import S from 'string';
import { saveAs } from 'file-saver';
require('./common');
require('../vendor/md-toc');
//auto update last change
window.createtime = null;
window.lastchangetime = null;
window.lastchangeui = {
status: $(".ui-status-lastchange"),
time: $(".ui-lastchange"),
user: $(".ui-lastchangeuser"),
nouser: $(".ui-no-lastchangeuser")
}
const ownerui = $(".ui-owner");
export function updateLastChange() {
if (!lastchangeui) return;
if (createtime) {
if (createtime && !lastchangetime) {
lastchangeui.status.text('created');
} else {
lastchangeui.status.text('changed');
}
const time = lastchangetime || createtime;
lastchangeui.time.html(moment(time).fromNow());
lastchangeui.time.attr('title', moment(time).format('llll'));
}
}
setInterval(updateLastChange, 60000);
window.lastchangeuser = null;
window.lastchangeuserprofile = null;
export function updateLastChangeUser() {
if (lastchangeui) {
if (lastchangeuser && lastchangeuserprofile) {
const icon = lastchangeui.user.children('i');
icon.attr('title', lastchangeuserprofile.name).tooltip('fixTitle');
if (lastchangeuserprofile.photo)
icon.attr('style', `background-image:url(${lastchangeuserprofile.photo})`);
lastchangeui.user.show();
lastchangeui.nouser.hide();
} else {
lastchangeui.user.hide();
lastchangeui.nouser.show();
}
}
}
window.owner = null;
window.ownerprofile = null;
export function updateOwner() {
if (ownerui) {
if (owner && ownerprofile && owner !== lastchangeuser) {
const icon = ownerui.children('i');
icon.attr('title', ownerprofile.name).tooltip('fixTitle');
const styleString = `background-image:url(${ownerprofile.photo})`;
if (ownerprofile.photo && icon.attr('style') !== styleString)
icon.attr('style', styleString);
ownerui.show();
} else {
ownerui.hide();
}
}
}
//get title
function getTitle(view) {
let title = "";
if (md && md.meta && md.meta.title && (typeof md.meta.title == "string" || typeof md.meta.title == "number")) {
title = md.meta.title;
} else {
const h1s = view.find("h1");
if (h1s.length > 0) {
title = h1s.first().text();
} else {
title = null;
}
}
return title;
}
//render title
export function renderTitle(view) {
let title = getTitle(view);
if (title) {
title += ' - HackMD';
} else {
title = 'HackMD - Collaborative markdown notes';
}
return title;
}
//render filename
export function renderFilename(view) {
let filename = getTitle(view);
if (!filename) {
filename = 'Untitled';
}
return filename;
}
// render tags
export function renderTags(view) {
const tags = [];
const rawtags = [];
if (md && md.meta && md.meta.tags && (typeof md.meta.tags == "string" || typeof md.meta.tags == "number")) {
const metaTags = (`${md.meta.tags}`).split(',');
for (var i = 0; i < metaTags.length; i++) {
const text = metaTags[i].trim();
if (text) rawtags.push(text);
}
} else {
view.find('h6').each((key, value) => {
if (/^tags/gmi.test($(value).text())) {
const codes = $(value).find("code");
for (let i = 0; i < codes.length; i++) {
const text = codes[i].innerHTML.trim();
if (text) rawtags.push(text);
}
}
});
}
for (var i = 0; i < rawtags.length; i++) {
let found = false;
for (let j = 0; j < tags.length; j++) {
if (tags[j] == rawtags[i]) {
found = true;
break;
}
}
if (!found)
tags.push(rawtags[i]);
}
return tags;
}
function slugifyWithUTF8(text) {
let newText = S(text.toLowerCase()).trim().stripTags().dasherize().s;
newText = newText.replace(/([\!\"\#\$\%\&\'\(\)\*\+\,\.\/\:\;\<\=\>\?\@\[\\\]\^\`\{\|\}\~])/g, '');
return newText;
}
export function isValidURL(str) {
const pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
'(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
if (!pattern.test(str)) {
return false;
} else {
return true;
}
}
//parse meta
export function parseMeta(md, edit, view, toc, tocAffix) {
let lang = null;
let dir = null;
let breaks = true;
if (md && md.meta) {
const meta = md.meta;
lang = meta.lang;
dir = meta.dir;
breaks = meta.breaks;
}
//text language
if (lang && typeof lang == "string") {
view.attr('lang', lang);
toc.attr('lang', lang);
tocAffix.attr('lang', lang);
if (edit)
edit.attr('lang', lang);
} else {
view.removeAttr('lang');
toc.removeAttr('lang');
tocAffix.removeAttr('lang');
if (edit)
edit.removeAttr('lang', lang);
}
//text direction
if (dir && typeof dir == "string") {
view.attr('dir', dir);
toc.attr('dir', dir);
tocAffix.attr('dir', dir);
} else {
view.removeAttr('dir');
toc.removeAttr('dir');
tocAffix.removeAttr('dir');
}
//breaks
if (typeof breaks === 'boolean' && !breaks) {
md.options.breaks = false;
} else {
md.options.breaks = true;
}
}
window.viewAjaxCallback = null;
//regex for extra tags
const spaceregex = /\s*/;
const notinhtmltagregex = /(?![^<]*>|[^<>]*<\/)/;
let coloregex = /\[color=([#|\(|\)|\s|\,|\w]*?)\]/;
coloregex = new RegExp(coloregex.source + notinhtmltagregex.source, "g");
let nameregex = /\[name=(.*?)\]/;
let timeregex = /\[time=([:|,|+|-|\(|\)|\s|\w]*?)\]/;
const nameandtimeregex = new RegExp(nameregex.source + spaceregex.source + timeregex.source + notinhtmltagregex.source, "g");
nameregex = new RegExp(nameregex.source + notinhtmltagregex.source, "g");
timeregex = new RegExp(timeregex.source + notinhtmltagregex.source, "g");
function replaceExtraTags(html) {
html = html.replace(coloregex, '');
html = html.replace(nameandtimeregex, ' $1 $2');
html = html.replace(nameregex, ' $1');
html = html.replace(timeregex, ' $1');
return html;
}
if (typeof mermaid !== 'undefined' && mermaid) mermaid.startOnLoad = false;
//dynamic event or object binding here
export function finishView(view) {
//todo list
const lis = view.find('li.raw').removeClass("raw").sortByDepth().toArray();
for (let li of lis) {
let html = $(li).clone()[0].innerHTML;
const p = $(li).children('p');
if (p.length == 1) {
html = p.html();
li = p[0];
}
html = replaceExtraTags(html);
li.innerHTML = html;
let disabled = 'disabled';
if(typeof editor !== 'undefined' && havePermission())
disabled = '';
if (/^\s*\[[x ]\]\s*/.test(html)) {
li.innerHTML = html.replace(/^\s*\[ \]\s*/, ``)
.replace(/^\s*\[x\]\s*/, ``);
li.setAttribute('class', 'task-list-item');
}
if (typeof editor !== 'undefined' && havePermission())
$(li).find('input').change(toggleTodoEvent);
//color tag in list will convert it to tag icon with color
const tag_color = $(li).closest('ul').find(".color");
tag_color.each((key, value) => {
$(value).addClass('fa fa-tag').css('color', $(value).attr('data-color'));
});
}
//youtube
view.find("div.youtube.raw").removeClass("raw")
.click(function () {
imgPlayiframe(this, '//www.youtube.com/embed/');
});
//vimeo
view.find("div.vimeo.raw").removeClass("raw")
.click(function () {
imgPlayiframe(this, '//player.vimeo.com/video/');
})
.each((key, value) => {
$.ajax({
type: 'GET',
url: `//vimeo.com/api/v2/video/${$(value).attr('data-videoid')}.json`,
jsonp: 'callback',
dataType: 'jsonp',
success(data) {
const thumbnail_src = data[0].thumbnail_large;
const image = ``;
$(value).prepend(image);
if(viewAjaxCallback) viewAjaxCallback();
}
});
});
//gist
view.find("code[data-gist-id]").each((key, value) => {
if ($(value).children().length == 0)
$(value).gist(viewAjaxCallback);
});
//sequence diagram
const sequences = view.find("div.sequence-diagram.raw").removeClass("raw");
sequences.each((key, value) => {
try {
var $value = $(value);
const $ele = $(value).parent().parent();
const sequence = $value;
sequence.sequenceDiagram({
theme: 'simple'
});
$ele.addClass('sequence-diagram');
$value.children().unwrap().unwrap();
const svg = $ele.find('> svg');
svg[0].setAttribute('viewBox', `0 0 ${svg.attr('width')} ${svg.attr('height')}`);
svg[0].setAttribute('preserveAspectRatio', 'xMidYMid meet');
} catch (err) {
$value.unwrap();
console.warn(err);
}
});
//flowchart
const flow = view.find("div.flow-chart.raw").removeClass("raw");
flow.each((key, value) => {
try {
var $value = $(value);
const $ele = $(value).parent().parent();
const chart = flowchart.parse($value.text());
$value.html('');
chart.drawSVG(value, {
'line-width': 2,
'fill': 'none',
'font-size': '16px',
'font-family': "'Andale Mono', monospace"
});
$ele.addClass('flow-chart');
$value.children().unwrap().unwrap();
} catch (err) {
$value.unwrap();
console.warn(err);
}
});
//graphviz
const Viz = require("viz.js");
const graphvizs = view.find("div.graphviz.raw").removeClass("raw");
graphvizs.each((key, value) => {
try {
var $value = $(value);
const $ele = $(value).parent().parent();
const graphviz = Viz($value.text());
if (!graphviz) throw Error('viz.js output empty graph');
$value.html(graphviz);
$ele.addClass('graphviz');
$value.children().unwrap().unwrap();
} catch (err) {
$value.unwrap();
console.warn(err);
}
});
//mermaid
const mermaids = view.find("div.mermaid.raw").removeClass("raw");
mermaids.each((key, value) => {
try {
var $value = $(value);
const $ele = $(value).closest('pre');
let mermaidError = null;
mermaid.parseError = (err, hash) => {
mermaidError = err;
};
if (mermaidAPI.parse($value.text())) {
$ele.addClass('mermaid');
$ele.html($value.text());
mermaid.init(undefined, $ele);
} else {
$value.unwrap();
console.warn(mermaidError);
}
} catch (err) {
$value.unwrap();
console.warn(err);
}
});
//image href new window(emoji not included)
const images = view.find("img.raw[src]").removeClass("raw");
images.each((key, value) => {
// if it's already wrapped by link, then ignore
const $value = $(value);
$value[0].onload = e => {
if(viewAjaxCallback) viewAjaxCallback();
};
});
//blockquote
const blockquote = view.find("blockquote.raw").removeClass("raw");
const blockquote_p = blockquote.find("p");
blockquote_p.each((key, value) => {
let html = $(value).html();
html = replaceExtraTags(html);
$(value).html(html);
});
//color tag in blockquote will change its left border color
const blockquote_color = blockquote.find(".color");
blockquote_color.each((key, value) => {
$(value).closest("blockquote").css('border-left-color', $(value).attr('data-color'));
});
//slideshare
view.find("div.slideshare.raw").removeClass("raw")
.each((key, value) => {
$.ajax({
type: 'GET',
url: `//www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/${$(value).attr('data-slideshareid')}&format=json`,
jsonp: 'callback',
dataType: 'jsonp',
success(data) {
const $html = $(data.html);
const iframe = $html.closest('iframe');
const caption = $html.closest('div');
const inner = $('
${highlighted}
\n`;
};
/* Defined regex markdown it plugins */
import Plugin from 'markdown-it-regexp';
//youtube
const youtubePlugin = new Plugin(
// regexp to match
/{%youtube\s*([\d\D]*?)\s*%}/,
(match, utils) => {
const videoid = match[1];
if (!videoid) return;
const div = $('');
div.attr('data-videoid', videoid);
const thumbnail_src = `//img.youtube.com/vi/${videoid}/hqdefault.jpg`;
const image = `
`;
return code;
}
);
//TOC
const tocPlugin = new Plugin(
// regexp to match
/^\[TOC\]$/i,
(match, utils) => ''
);
//slideshare
const slidesharePlugin = new Plugin(
// regexp to match
/{%slideshare\s*([\d\D]*?)\s*%}/,
(match, utils) => {
const slideshareid = match[1];
const div = $('');
div.attr('data-slideshareid', slideshareid);
return div[0].outerHTML;
}
);
//speakerdeck
const speakerdeckPlugin = new Plugin(
// regexp to match
/{%speakerdeck\s*([\d\D]*?)\s*%}/,
(match, utils) => {
const speakerdeckid = match[1];
const div = $('');
div.attr('data-speakerdeckid', speakerdeckid);
return div[0].outerHTML;
}
);
//pdf
const pdfPlugin = new Plugin(
// regexp to match
/{%pdf\s*([\d\D]*?)\s*%}/,
(match, utils) => {
const pdfurl = match[1];
if (!isValidURL(pdfurl)) return match[0];
const div = $('');
div.attr('data-pdfurl', pdfurl);
return div[0].outerHTML;
}
);
//yaml meta, from https://github.com/eugeneware/remarkable-meta
function get(state, line) {
const pos = state.bMarks[line];
const max = state.eMarks[line];
return state.src.substr(pos, max - pos);
}
function meta(state, start, end, silent) {
if (start !== 0 || state.blkIndent !== 0) return false;
if (state.tShift[start] < 0) return false;
if (!get(state, start).match(/^---$/)) return false;
const data = [];
for (var line = start + 1; line < end; line++) {
const str = get(state, line);
if (str.match(/^(\.{3}|-{3})$/)) break;
if (state.tShift[line] < 0) break;
data.push(str);
}
if (line >= end) return false;
try {
md.meta = jsyaml.safeLoad(data.join('\n')) || {};
} catch(err) {
console.warn(err);
return false;
}
state.line = line + 1;
return true;
}
function metaPlugin(md) {
md.meta = md.meta || {};
md.block.ruler.before('code', 'meta', meta, {
alt: []
});
}
md.use(metaPlugin);
md.use(youtubePlugin);
md.use(vimeoPlugin);
md.use(gistPlugin);
md.use(tocPlugin);
md.use(slidesharePlugin);
md.use(speakerdeckPlugin);
md.use(pdfPlugin);
export default {
md
};