From 5d23fc26e4ca6c430f01aa0a315fd601414e0221 Mon Sep 17 00:00:00 2001 From: Ihsan Ullah Date: Sat, 19 Aug 2023 13:38:49 +0500 Subject: [PATCH 1/4] markdown, html and latex rendered properly in compettion pages, competition pages view in editor, registration model, phase description --- src/static/js/ours/latex_markdown_html.js | 55 +++++++++++++++++++ .../competitions/detail/_registration.tag | 6 +- src/static/riot/competitions/detail/_tabs.tag | 25 ++++----- .../riot/competitions/editor/_pages.tag | 6 +- src/templates/base.html | 7 +++ 5 files changed, 84 insertions(+), 15 deletions(-) create mode 100644 src/static/js/ours/latex_markdown_html.js diff --git a/src/static/js/ours/latex_markdown_html.js b/src/static/js/ours/latex_markdown_html.js new file mode 100644 index 000000000..378c927f5 --- /dev/null +++ b/src/static/js/ours/latex_markdown_html.js @@ -0,0 +1,55 @@ +// // Function to render Markdown and HTML content and return updated content +// function renderMarkdownAndHTML(content) { +// const parsedHtml = new DOMParser().parseFromString(marked(content), "text/html"); +// return parsedHtml.body.childNodes; +// } + + +// // Function to render LaTeX formulas using KaTeX and return updated content +// function renderLatexInContent(content) { +// const parsedHtml = new DOMParser().parseFromString(content, "text/html"); +// const traverseAndRender = (node) => { +// if (node.nodeType === Node.ELEMENT_NODE) { +// const latexPattern = /\$\$([\s\S]*?)\$\$|\$([^\$\n]*?)\$/g; +// const hasLatex = latexPattern.test(node.textContent); +// if (hasLatex) { +// const tempDiv = document.createElement('div'); +// tempDiv.innerHTML = node.innerHTML.replace(latexPattern, (_, formula1, formula2) => { +// const formula = formula1 || formula2; +// return katex.renderToString(formula, { throwOnError: false }); +// }); +// node.innerHTML = tempDiv.innerHTML; +// } +// } +// node.childNodes.forEach(traverseAndRender); +// }; +// traverseAndRender(parsedHtml.body); +// return parsedHtml.body.innerHTML; +// } + + + +function renderMarkdownWithLatex(content) { + const parsedHtml = new DOMParser().parseFromString(marked(content), "text/html"); + + const traverseAndRenderLatex = (node) => { + if (node.nodeType === Node.ELEMENT_NODE) { + const latexPattern = /\$\$([\s\S]*?)\$\$|\$([^\$\n]*?)\$/g; + const hasLatex = latexPattern.test(node.textContent); + if (hasLatex) { + const tempDiv = document.createElement('div'); + tempDiv.innerHTML = node.innerHTML.replace(latexPattern, (_, formula1, formula2) => { + const formula = formula1 || formula2; + return katex.renderToString(formula, { throwOnError: false }); + }); + node.innerHTML = tempDiv.innerHTML; + } + } + + node.childNodes.forEach(traverseAndRenderLatex); + }; + + traverseAndRenderLatex(parsedHtml.body); + + return parsedHtml.body.childNodes; +} \ No newline at end of file diff --git a/src/static/riot/competitions/detail/_registration.tag b/src/static/riot/competitions/detail/_registration.tag index 224341018..6bfe16511 100644 --- a/src/static/riot/competitions/detail/_registration.tag +++ b/src/static/riot/competitions/detail/_registration.tag @@ -72,7 +72,11 @@ CODALAB.events.on('competition_loaded', (competition) => { self.competition_id = competition.id if (self.refs.terms_content) { - self.refs.terms_content.innerHTML = render_markdown(competition.terms) + const rendered_content = renderMarkdownWithLatex(competition.terms) + self.refs.terms_content.innerHTML = "" + rendered_content.forEach(node => { + self.refs.terms_content.appendChild(node.cloneNode(true)); // Append each node + }); } self.registration_auto_approve = competition.registration_auto_approve self.status = competition.participant_status diff --git a/src/static/riot/competitions/detail/_tabs.tag b/src/static/riot/competitions/detail/_tabs.tag index 09647588c..d7de99ab7 100644 --- a/src/static/riot/competitions/detail/_tabs.tag +++ b/src/static/riot/competitions/detail/_tabs.tag @@ -318,16 +318,21 @@ self.update() _.forEach(self.competition.pages, (page, index) => { - if (self.isHTML(page.content)){ - $(`#page_${index}`)[0].innerHTML = sanitize_HTML(page.content) - }else{ - $(`#page_${index}`)[0].innerHTML = render_markdown(page.content) - } - + // Render html pages + const rendered_content = renderMarkdownWithLatex(page.content) + $(`#page_${index}`)[0].innerHTML = "" + rendered_content.forEach(node => { + $(`#page_${index}`)[0].appendChild(node.cloneNode(true)); // Append each node + }); }) _.forEach(self.competition.phases, (phase, index) => { - $(`#phase_${index}`)[0].innerHTML = render_markdown(phase.description) + // Render phase description + const rendered_content = renderMarkdownWithLatex(phase.description) + $(`#phase_${index}`)[0].innerHTML = "" + rendered_content.forEach(node => { + $(`#phase_${index}`)[0].appendChild(node.cloneNode(true)); // Append each node + }); }) _.delay(() => { self.loading = false @@ -355,12 +360,6 @@ CODALAB.events.trigger('phase_selected', data) } } - // To check if page content has HTML - // Return true if content is html - // Return false if content is not html i.e. MarkDown - self.isHTML = function (page_content) { - return /<(?=.*? .*?\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\/\1>/i.test(page_content); - } self.update() diff --git a/src/static/riot/competitions/editor/_pages.tag b/src/static/riot/competitions/editor/_pages.tag index 45b56d6b2..369f7fcc0 100644 --- a/src/static/riot/competitions/editor/_pages.tag +++ b/src/static/riot/competitions/editor/_pages.tag @@ -159,7 +159,11 @@ self.view_page = function (page_index) { self.selected_page_index = page_index $(self.refs.view_modal).modal('show') - self.refs.page_content.innerHTML = render_markdown(self.pages[page_index].content) + const rendered_content = renderMarkdownWithLatex(self.pages[page_index].content) + self.refs.page_content.innerHTML = "" + rendered_content.forEach(node => { + self.refs.page_content.appendChild(node.cloneNode(true)); // Append each node + }); } self.form_updated = function () { diff --git a/src/templates/base.html b/src/templates/base.html index c65de9078..f024ec15e 100644 --- a/src/templates/base.html +++ b/src/templates/base.html @@ -23,6 +23,9 @@ + + + {% block extra_head %} {% endblock %} @@ -357,6 +360,10 @@

CodaBench

+ + + + {% block extra_js %} {% endblock %} From aa83e4be49fe6e93607f5a07e261e6ae7b9640bb Mon Sep 17 00:00:00 2001 From: Ihsan Ullah Date: Sat, 19 Aug 2023 14:16:51 +0500 Subject: [PATCH 2/4] commented code removed --- src/static/js/ours/latex_markdown_html.js | 32 +---------------------- 1 file changed, 1 insertion(+), 31 deletions(-) diff --git a/src/static/js/ours/latex_markdown_html.js b/src/static/js/ours/latex_markdown_html.js index 378c927f5..b51a879f1 100644 --- a/src/static/js/ours/latex_markdown_html.js +++ b/src/static/js/ours/latex_markdown_html.js @@ -1,34 +1,4 @@ -// // Function to render Markdown and HTML content and return updated content -// function renderMarkdownAndHTML(content) { -// const parsedHtml = new DOMParser().parseFromString(marked(content), "text/html"); -// return parsedHtml.body.childNodes; -// } - - -// // Function to render LaTeX formulas using KaTeX and return updated content -// function renderLatexInContent(content) { -// const parsedHtml = new DOMParser().parseFromString(content, "text/html"); -// const traverseAndRender = (node) => { -// if (node.nodeType === Node.ELEMENT_NODE) { -// const latexPattern = /\$\$([\s\S]*?)\$\$|\$([^\$\n]*?)\$/g; -// const hasLatex = latexPattern.test(node.textContent); -// if (hasLatex) { -// const tempDiv = document.createElement('div'); -// tempDiv.innerHTML = node.innerHTML.replace(latexPattern, (_, formula1, formula2) => { -// const formula = formula1 || formula2; -// return katex.renderToString(formula, { throwOnError: false }); -// }); -// node.innerHTML = tempDiv.innerHTML; -// } -// } -// node.childNodes.forEach(traverseAndRender); -// }; -// traverseAndRender(parsedHtml.body); -// return parsedHtml.body.innerHTML; -// } - - - +// Function to render Markdown, HTML and Latex and return updated content function renderMarkdownWithLatex(content) { const parsedHtml = new DOMParser().parseFromString(marked(content), "text/html"); From 60e7cb819ebf4aeb0dccc68f08220d124664c3ea Mon Sep 17 00:00:00 2001 From: Ihsan Ullah Date: Sat, 19 Aug 2023 22:38:56 +0500 Subject: [PATCH 3/4] null content condition handled --- src/static/js/ours/latex_markdown_html.js | 23 +++++++++++++---------- src/templates/base.html | 2 +- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/static/js/ours/latex_markdown_html.js b/src/static/js/ours/latex_markdown_html.js index b51a879f1..4a0e645c2 100644 --- a/src/static/js/ours/latex_markdown_html.js +++ b/src/static/js/ours/latex_markdown_html.js @@ -1,25 +1,28 @@ // Function to render Markdown, HTML and Latex and return updated content function renderMarkdownWithLatex(content) { - const parsedHtml = new DOMParser().parseFromString(marked(content), "text/html"); + if(content === null){ + return [] + } + const parsedHtml = new DOMParser().parseFromString(marked(content), "text/html") const traverseAndRenderLatex = (node) => { if (node.nodeType === Node.ELEMENT_NODE) { - const latexPattern = /\$\$([\s\S]*?)\$\$|\$([^\$\n]*?)\$/g; - const hasLatex = latexPattern.test(node.textContent); + const latexPattern = /\$\$([\s\S]*?)\$\$|\$([^\$\n]*?)\$/g + const hasLatex = latexPattern.test(node.textContent) if (hasLatex) { - const tempDiv = document.createElement('div'); + const tempDiv = document.createElement('div') tempDiv.innerHTML = node.innerHTML.replace(latexPattern, (_, formula1, formula2) => { - const formula = formula1 || formula2; - return katex.renderToString(formula, { throwOnError: false }); + const formula = formula1 || formula2 + return katex.renderToString(formula, { throwOnError: false }) }); - node.innerHTML = tempDiv.innerHTML; + node.innerHTML = tempDiv.innerHTML } } - node.childNodes.forEach(traverseAndRenderLatex); + node.childNodes.forEach(traverseAndRenderLatex) }; - traverseAndRenderLatex(parsedHtml.body); + traverseAndRenderLatex(parsedHtml.body) - return parsedHtml.body.childNodes; + return parsedHtml.body.childNodes } \ No newline at end of file diff --git a/src/templates/base.html b/src/templates/base.html index f024ec15e..797849ce1 100644 --- a/src/templates/base.html +++ b/src/templates/base.html @@ -361,7 +361,7 @@

CodaBench

- + From 27b8892c119caa5a5f7cca9aa7b7c52d156c5ce1 Mon Sep 17 00:00:00 2001 From: Ihsan Ullah Date: Sat, 19 Aug 2023 23:58:51 +0500 Subject: [PATCH 4/4] marked lib version updated to fix issue of loading function --- src/templates/base.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/templates/base.html b/src/templates/base.html index 797849ce1..e6530429f 100644 --- a/src/templates/base.html +++ b/src/templates/base.html @@ -242,6 +242,10 @@

CodaBench

+ + + + @@ -360,9 +364,6 @@

CodaBench

- - - {% block extra_js %}