From 9e20f00007dc85ad4463d7363b1a4f088e291ffc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D0=B0=D1=82=D0=BE=D0=BB=D0=B8=D0=B9=20=D0=9A?= =?UTF-8?q?=D0=B0=D0=B2=D0=B5=D1=80=D0=B8=D0=BD?= Date: Mon, 10 Oct 2022 13:50:22 +0300 Subject: [PATCH] fix: fix kroki prerendering for the markdown editor --- client/components/editor/editor-markdown.vue | 8 ++ client/components/editor/markdown/kroki.js | 141 +++++++++++++++++++ 2 files changed, 149 insertions(+) create mode 100644 client/components/editor/markdown/kroki.js diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue index 6134524d..bf5bb679 100644 --- a/client/components/editor/editor-markdown.vue +++ b/client/components/editor/editor-markdown.vue @@ -240,6 +240,7 @@ import underline from '../../libs/markdown-it-underline' import 'katex/dist/contrib/mhchem' import twemoji from 'twemoji' import plantuml from './markdown/plantuml' +import kroki from './markdown/kroki' // Prism (Syntax Highlighting) import Prism from 'prismjs' @@ -342,6 +343,13 @@ md.renderer.rules.blockquote_open = injectLineNumbers // TODO: Use same options as defined in backend plantuml.init(md, {}) +// ======================================== +// KROKI +// ======================================== + +// TODO: Use same options as defined in backend +kroki.init(md, {}) + // ======================================== // KATEX // ======================================== diff --git a/client/components/editor/markdown/kroki.js b/client/components/editor/markdown/kroki.js new file mode 100644 index 00000000..ad562215 --- /dev/null +++ b/client/components/editor/markdown/kroki.js @@ -0,0 +1,141 @@ +const zlib = require('zlib') + +// ------------------------------------ +// Markdown - Kroki Preprocessor +// ------------------------------------ + +module.exports = { + init (mdinst, conf) { + mdinst.use((md, opts) => { + const openMarker = opts.openMarker || '```kroki' + const openChar = openMarker.charCodeAt(0) + const closeMarker = opts.closeMarker || '```' + const closeChar = closeMarker.charCodeAt(0) + const server = opts.server || 'https://kroki.io' + + md.block.ruler.before('fence', 'kroki', (state, startLine, endLine, silent) => { + let nextLine + let markup + let params + let token + let i + let autoClosed = false + let start = state.bMarks[startLine] + state.tShift[startLine] + let max = state.eMarks[startLine] + + // Check out the first character quickly, + // this should filter out most of non-uml blocks + // + if (openChar !== state.src.charCodeAt(start)) { return false } + + // Check out the rest of the marker string + // + for (i = 0; i < openMarker.length; ++i) { + if (openMarker[i] !== state.src[start + i]) { return false } + } + + markup = state.src.slice(start, start + i) + params = state.src.slice(start + i, max) + + // Since start is found, we can report success here in validation mode + // + if (silent) { return true } + + // Search for the end of the block + // + nextLine = startLine + + for (;;) { + nextLine++ + if (nextLine >= endLine) { + // unclosed block should be autoclosed by end of document. + // also block seems to be autoclosed by end of parent + break + } + + start = state.bMarks[nextLine] + state.tShift[nextLine] + max = state.eMarks[nextLine] + + if (start < max && state.sCount[nextLine] < state.blkIndent) { + // non-empty line with negative indent should stop the list: + // - ``` + // test + break + } + + if (closeChar !== state.src.charCodeAt(start)) { + // didn't find the closing fence + continue + } + + if (state.sCount[nextLine] > state.sCount[startLine]) { + // closing fence should not be indented with respect of opening fence + continue + } + + let closeMarkerMatched = true + for (i = 0; i < closeMarker.length; ++i) { + if (closeMarker[i] !== state.src[start + i]) { + closeMarkerMatched = false + break + } + } + + if (!closeMarkerMatched) { + continue + } + + // make sure tail has spaces only + if (state.skipSpaces(start + i) < max) { + continue + } + + // found! + autoClosed = true + break + } + + let contents = state.src + .split('\n') + .slice(startLine + 1, nextLine) + .join('\n') + // We generate a token list for the alt property, to mimic what the image parser does. + let altToken = [] + // Remove leading space if any. + let alt = params ? params.slice(1) : 'uml diagram' + state.md.inline.parse( + alt, + state.md, + state.env, + altToken + ) + + let firstlf = contents.indexOf('\n') + if (firstlf === -1) firstlf = undefined + let diagramType = contents.substring(0, firstlf) + contents = contents.substring(firstlf + 1) + + let result = zlib.deflateSync(contents).toString('base64').replace(/\+/g, '-').replace(/\//g, '_') + token = state.push('kroki', 'img', 0) + // alt is constructed from children. No point in populating it here. + token.attrs = [ [ 'src', `${server}/${diagramType}/svg/${result}` ], [ 'alt', '' ], ['class', 'uml-diagram'] ] + token.block = true + token.children = altToken + token.info = params + token.map = [ startLine, nextLine ] + token.markup = markup + + state.line = nextLine + (autoClosed ? 1 : 0) + + return true + }, { + alt: [ 'paragraph', 'reference', 'blockquote', 'list' ] + }) + md.renderer.rules.kroki = md.renderer.rules.image + }, { + openMarker: conf.openMarker, + closeMarker: conf.closeMarker, + server: conf.server + }) + } +}