import MarkdownIt from 'markdown-it'; // import hljs from 'highlight.js'; import * as entities from 'entities'; import MarkdownFixer from './PreProcessor/MarkdownFixer'; import Linker from './PreProcessor/Linker'; import ImageExpander from './PreProcessor/ImageExpander'; import XssFilter from './PreProcessor/XssFilter'; import Tsv2Table from './LangProcessor/Tsv2Table'; import Template from './LangProcessor/Template'; import PlantUML from './LangProcessor/PlantUML'; export default class GrowiRenderer { constructor(crowi) { this.crowi = crowi; this.md = new MarkdownIt(); this.configure(this.crowi.getConfig()); this.configurePlugins(this.crowi.getConfig()); this.preProcessors = [ new Linker(crowi), new ImageExpander(crowi), new XssFilter(crowi), ]; this.postProcessors = [ ]; this.langProcessors = { 'tsv': new Tsv2Table(crowi), 'tsv-h': new Tsv2Table(crowi, {header: true}), 'template': new Template(crowi), 'plantuml': new PlantUML(crowi), }; this.configure = this.configure.bind(this); this.parseMarkdown = this.parseMarkdown.bind(this); this.codeRenderer = this.codeRenderer.bind(this); } /** * configure markdown-it * @param {any} config */ configure(config) { this.md.set({ html: true, linkify: true, breaks: config.isEnabledLineBreaks, }); } /** * configure markdown-it plugins * @param {any} config */ configurePlugins(config) { this.md .use(require('markdown-it-emoji')) .use(require('markdown-it-mathjax')()); // integrate markdown-it-emoji and emojione this.md.renderer.rules.emoji = (token, idx) => { const shortname = `:${token[idx].markup}:`; return emojione.shortnameToImage(shortname); }; } preProcess(markdown, dom) { for (let i = 0; i < this.preProcessors.length; i++) { if (!this.preProcessors[i].process) { continue; } markdown = this.preProcessors[i].process(markdown, dom); } return markdown; } postProcess(html, dom) { for (let i = 0; i < this.postProcessors.length; i++) { if (!this.postProcessors[i].process) { continue; } html = this.postProcessors[i].process(html, dom); } return html; } codeRenderer(code, lang, escaped) { let result = '', hl; // if (lang) { // const langAndFn = lang.split(':'); // const langPattern = langAndFn[0]; // const langFn = langAndFn[1] || null; // if (this.langProcessors[langPattern]) { // return this.langProcessors[langPattern].process(code, lang); // } // try { // hl = hljs.highlight(langPattern, code); // result = hl.value; // escaped = true; // } catch (e) { // result = code; // } // result = (escape ? result : entities.encodeHTML(result)); // let citeTag = ''; // if (langFn) { // citeTag = `${langFn}`; // } // return `
${citeTag}${result}\n
\n`; // } // no lang specified return `
${entities.encodeHTML(code)}\n
`; } parseMarkdown(markdown, dom, markedOpts) { let parsed = ''; /* const markedRenderer = new marked.Renderer(); markedRenderer.code = this.codeRenderer; try { // concat let concatMarkedOpts = Object.assign({ gfm: true, tables: true, breaks: true, pedantic: false, sanitize: false, smartLists: true, smartypants: false, renderer: markedRenderer, }, markedOpts); marked.setOptions(concatMarkedOpts); // override marked.Lexer.lex = function(src, options) { var lexer = new marked.Lexer(options); // this is maybe not an official way if (lexer.rules) { lexer.rules.fences = /^ *(`{3,}|~{3,})[ \.]*([^\r\n]+)? *\n([\s\S]*?)\s*\1 *(?:\n+|$)/; } return lexer.lex(src); }; parsed = marked(markdown); } catch (e) { console.log(e, e.stack); } */ parsed = this.md.render(markdown); return parsed; } /** * render * * @param {string} markdown * @param {Element} dom * @returns * * @memberOf CrowiRenderer */ render(markdown, dom) { let html = ''; html = this.parseMarkdown(markdown, dom); html = this.postProcess(html, dom); return html; } }