diff --git a/client/package.json b/client/package.json index 2ccea43f22ce..58cbe2381796 100644 --- a/client/package.json +++ b/client/package.json @@ -80,6 +80,7 @@ "jquery-mousewheel": "^3.1.13", "jquery-ui": "^1.13.2", "jspdf": "^2.5.1", + "katex": "^0.16.22", "linkify-html": "^4.1.1", "linkifyjs": "^4.1.1", "lodash.isequal": "^4.5.0", diff --git a/client/src/components/Markdown/Editor/templates.yml b/client/src/components/Markdown/Editor/templates.yml index 73f0ebc315bb..2ac1a0ebfae1 100644 --- a/client/src/components/Markdown/Editor/templates.yml +++ b/client/src/components/Markdown/Editor/templates.yml @@ -27,6 +27,16 @@ Markdown: - First item - Second item - Third item + - title: "Equation Inline" + description: "Mathematics using KaTeX" + cell: + name: "markdown" + content: $c = \sqrt{a^2 + b^2}$ + - title: "Equation Block" + description: "Mathematics using KaTeX" + cell: + name: "markdown" + content: $$c = \sqrt{a^2 + b^2}$$ Galaxy: - title: "Collection" diff --git a/client/src/components/Markdown/Sections/MarkdownDefault.vue b/client/src/components/Markdown/Sections/MarkdownDefault.vue index ba7910a0a260..d3d51e3411ac 100644 --- a/client/src/components/Markdown/Sections/MarkdownDefault.vue +++ b/client/src/components/Markdown/Sections/MarkdownDefault.vue @@ -4,12 +4,16 @@ import MarkdownIt from "markdown-it"; import markdownItRegexp from "markdown-it-regexp"; import { computed } from "vue"; +//@ts-ignore +import markdownItKatex from "./Plugins/markdown-it-katex"; + const mdNewline = markdownItRegexp(/
/, () => { return "

"; }); const md = MarkdownIt(); md.use(mdNewline); +md.use(markdownItKatex, { throwOnError: false }); const props = defineProps<{ content: string; diff --git a/client/src/components/Markdown/Sections/Plugins/markdown-it-katex.js b/client/src/components/Markdown/Sections/Plugins/markdown-it-katex.js new file mode 100644 index 000000000000..bb9b3a754e26 --- /dev/null +++ b/client/src/components/Markdown/Sections/Plugins/markdown-it-katex.js @@ -0,0 +1,226 @@ +/* +Like markdown-it-simplemath, this is a stripped down, simplified version of: +https://github.com/runarberg/markdown-it-math + +It differs in that it takes (a subset of) LaTeX as input and relies on KaTeX +for rendering output. +*/ + +import "katex/dist/katex.min.css"; + +import katex from "katex"; + +// Test if potential opening or closing delimieter +// Assumes that there is a "$" at state.src[pos] +function isValidDelim(state, pos) { + const max = state.posMax; + const nextChar = pos + 1 <= max ? state.src.charCodeAt(pos + 1) : -1; + const prevChar = pos > 0 ? state.src.charCodeAt(pos - 1) : -1; + + let can_close = true; + let can_open = true; + + // Check non-whitespace conditions for opening and closing, and + // check that closing delimeter isn't followed by a number + if ( + prevChar === 0x20 /* " " */ || + prevChar === 0x09 /* \t */ || + (nextChar >= 0x30 /* "0" */ && nextChar <= 0x39) /* "9" */ + ) { + can_close = false; + } + if (nextChar === 0x20 /* " " */ || nextChar === 0x09 /* \t */) { + can_open = false; + } + + return { + can_open: can_open, + can_close: can_close, + }; +} + +function math_inline(state, silent) { + let match; + let res; + let pos; + let esc_count; + + if (state.src[state.pos] !== "$") { + return false; + } + + res = isValidDelim(state, state.pos); + if (!res.can_open) { + if (!silent) { + state.pending += "$"; + } + state.pos += 1; + return true; + } + + // First check for and bypass all properly escaped delimieters + // This loop will assume that the first leading backtick can not + // be the first character in state.src, which is known since + // we have found an opening delimieter already. + const start = state.pos + 1; + match = start; + while ((match = state.src.indexOf("$", match)) !== -1) { + // Found potential $, look for escapes, pos will point to + // first non escape when complete + pos = match - 1; + while (state.src[pos] === "\\") { + pos -= 1; + } + + // Even number of escapes, potential closing delimiter found + if ((match - pos) % 2 == 1) { + break; + } + match += 1; + } + + // No closing delimter found. Consume $ and continue. + if (match === -1) { + if (!silent) { + state.pending += "$"; + } + state.pos = start; + return true; + } + + // Check if we have empty content, ie: $$. Do not parse. + if (match - start === 0) { + if (!silent) { + state.pending += "$$"; + } + state.pos = start + 1; + return true; + } + + // Check for valid closing delimiter + res = isValidDelim(state, match); + if (!res.can_close) { + if (!silent) { + state.pending += "$"; + } + state.pos = start; + return true; + } + + if (!silent) { + const token = state.push("math_inline", "math", 0); + token.markup = "$"; + token.content = state.src.slice(start, match); + } + + state.pos = match + 1; + return true; +} + +function math_block(state, start, end, silent) { + let firstLine; + let lastLine; + let next; + let lastPos; + let found = false; + let pos = state.bMarks[start] + state.tShift[start]; + let max = state.eMarks[start]; + + if (pos + 2 > max) { + return false; + } + if (state.src.slice(pos, pos + 2) !== "$$") { + return false; + } + + pos += 2; + firstLine = state.src.slice(pos, max); + + if (silent) { + return true; + } + if (firstLine.trim().slice(-2) === "$$") { + // Single line expression + firstLine = firstLine.trim().slice(0, -2); + found = true; + } + + for (next = start; !found; ) { + next++; + + if (next >= end) { + break; + } + + pos = state.bMarks[next] + state.tShift[next]; + max = state.eMarks[next]; + + if (pos < max && state.tShift[next] < state.blkIndent) { + // non-empty line with negative indent should stop the list: + break; + } + + if (state.src.slice(pos, max).trim().slice(-2) === "$$") { + lastPos = state.src.slice(0, max).lastIndexOf("$$"); + lastLine = state.src.slice(pos, lastPos); + found = true; + } + } + + state.line = next + 1; + + const token = state.push("math_block", "math", 0); + token.block = true; + token.content = + (firstLine && firstLine.trim() ? firstLine + "\n" : "") + + state.getLines(start + 1, next, state.tShift[start], true) + + (lastLine && lastLine.trim() ? lastLine : ""); + token.map = [start, state.line]; + token.markup = "$$"; + return true; +} + +export default function (md, options) { + // Default options + options = options || {}; + + // set KaTeX as the renderer for markdown-it-simplemath + const katexInline = function (latex) { + options.displayMode = false; + try { + return katex.renderToString(latex, options); + } catch (error) { + if (options.throwOnError) { + console.log(error); + } + return latex; + } + }; + + const inlineRenderer = function (tokens, idx) { + return katexInline(tokens[idx].content); + }; + + const katexBlock = function (latex) { + options.displayMode = true; + try { + return "

" + katex.renderToString(latex, options) + "

"; + } catch (error) { + if (options.throwOnError) { + console.log(error); + } + return latex; + } + }; + + const blockRenderer = function (tokens, idx) { + return katexBlock(tokens[idx].content) + "\n"; + }; + + md.inline.ruler.after("escape", "math_inline", math_inline); + md.block.ruler.after("blockquote", "math_block", math_block, { + alt: ["paragraph", "reference", "blockquote", "list"], + }); + md.renderer.rules.math_inline = inlineRenderer; + md.renderer.rules.math_block = blockRenderer; +} diff --git a/client/src/components/PageDisplay/pageTemplate.yml b/client/src/components/PageDisplay/pageTemplate.yml index 85410a8ba5be..ba3ac0c7aa20 100644 --- a/client/src/components/PageDisplay/pageTemplate.yml +++ b/client/src/components/PageDisplay/pageTemplate.yml @@ -1,4 +1,4 @@ content: | #### Your Page Title - Welcome to Galaxy Pages — a *Markdown* space where you can add text, Galaxy components like Tables, Datasets, and Visualizations to create rich, Interactive Pages. \ No newline at end of file + Welcome to Galaxy Pages — a *Markdown* space where you can add text, mathematical equations, Galaxy components like Tables, Datasets, and Visualizations to create rich, Interactive Pages. \ No newline at end of file diff --git a/client/yarn.lock b/client/yarn.lock index c91db9b66b5d..b8946175d439 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -4463,6 +4463,11 @@ commander@^12.0.0, commander@^12.1.0: resolved "https://registry.yarnpkg.com/commander/-/commander-12.1.0.tgz#01423b36f501259fdaac4d0e4d60c96c991585d3" integrity sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA== +commander@^8.3.0: + version "8.3.0" + resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66" + integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww== + compressible@~2.0.16: version "2.0.18" resolved "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz" @@ -8065,6 +8070,13 @@ karma-safari-launcher@^1.0.0: resolved "https://registry.yarnpkg.com/karma-safari-launcher/-/karma-safari-launcher-1.0.0.tgz#96982a2cc47d066aae71c553babb28319115a2ce" integrity sha512-qmypLWd6F2qrDJfAETvXDfxHvKDk+nyIjpH9xIeI3/hENr0U3nuqkxaftq73PfXZ4aOuOChA6SnLW4m4AxfRjQ== +katex@^0.16.22: + version "0.16.22" + resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.22.tgz#d2b3d66464b1e6d69e6463b28a86ced5a02c5ccd" + integrity sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg== + dependencies: + commander "^8.3.0" + kind-of@^3.0.2: version "3.2.2" resolved "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz"