From f2f9f27086beb4043f82dea5ace8f133dbf69f8e Mon Sep 17 00:00:00 2001
From: caishi <1149225589@qq.com>
Date: Sat, 9 May 2020 09:43:44 +0800
Subject: [PATCH] markded
---
src/common/marked.js | 123 +++++++++++++++++++++
src/components/render-html.jsx | 37 ++++++-
src/modules/user/usersInfo/InfosPackage.js | 33 ++----
3 files changed, 165 insertions(+), 28 deletions(-)
create mode 100644 src/common/marked.js
diff --git a/src/common/marked.js b/src/common/marked.js
new file mode 100644
index 00000000..681a2420
--- /dev/null
+++ b/src/common/marked.js
@@ -0,0 +1,123 @@
+import marked from 'marked'
+import { escape, unescape } from 'marked/src/helpers'
+import { renderToString } from 'katex';
+
+const latexRegex = /\$+([^\$\n]+?)\$+/g
+//兼容之前的 ##标题式写法
+const headingRegex = /^ *(#{1,6}) *([^\n]+?) *(?:#+ *)?(?:\n+|$)/
+let toc = []
+let ctx = [""]
+
+export function cleanToc() {
+ toc = []
+ ctx = [""]
+}
+
+function buildToc(coll, k, level, ctx) {
+ if (k >= coll.length || coll[k].level <= level) { return k }
+ var node = coll[k]
+ ctx.push("- " + node.text + "")
+ k++
+ var childCtx = []
+ k = buildToc(coll, k, node.level, childCtx)
+ if (childCtx.length > 0) {
+ ctx.push("
")
+ childCtx.forEach(function (idm) {
+ ctx.push(idm)
+ });
+ ctx.push("
")
+ }
+ ctx.push(" ")
+ k = buildToc(coll, k, level, ctx)
+ return k
+}
+
+export function getTocContent() {
+ buildToc(toc, 0, 0, ctx)
+ ctx.push("
")
+ return ctx.join("")
+}
+
+const tokenizer = {
+ heading(src) {
+ const cap = headingRegex.exec(src);
+ if (cap) {
+ return {
+ type: 'heading',
+ raw: cap[0],
+ depth: cap[1].length,
+ text: cap[2]
+ };
+ }
+ },
+ codespan(src) {
+ const cap = this.rules.inline.code.exec(src);
+ if (cap) {
+ let text = cap[2].replace(/\n/g, ' ');
+ const hasNonSpaceChars = /[^ ]/.test(text);
+ const hasSpaceCharsOnBothEnds = text.startsWith(' ') && text.endsWith(' ');
+ if (hasNonSpaceChars && hasSpaceCharsOnBothEnds) {
+ text = text.substring(1, text.length - 1)
+ }
+ let match = text.match(latexRegex)
+ if (match) {
+ text = text.replace(latexRegex, (_, $1) => {
+ return renderToString(unescape($1))
+ })
+ } else {
+ text = escape(text, true);
+ }
+ return {
+ type: 'codespan',
+ raw: cap[0],
+ text
+ }
+ }
+ }
+}
+
+const renderer = {
+ code(code, infostring, escaped) {
+ const lang = (infostring || '').match(/\S*/)[0];
+ if (!lang) {
+ return '
'
+ + (escaped ? code : escape(code, true))
+ + '
';
+ }
+
+ if (['latex', 'katex', 'math'].indexOf(lang) >= 0) {
+ return `${renderToString(unescape(code))}
`
+ } else {
+ return `${escaped ? code : escape(code, true)}
\n`
+ }
+ }
+ , paragraph(text) {
+ let match = text.match(latexRegex)
+ if (match) {
+ text = text.replace(latexRegex, (_, $1) => {
+ return renderToString(unescape($1))
+ })
+ }
+ return '' + text + '
\n';
+ },
+ heading(text, level, raw, slugger) {
+ let anchor = this.options.headerPrefix + raw.toLowerCase().replace(/[^\w\\u4e00-\\u9fa5]]+/g, '-');
+ toc.push({
+ anchor: anchor,
+ level: level,
+ text: text
+ })
+ return '' + text + ''
+ }
+}
+
+marked.setOptions({
+ silent: true,
+ smartypants: true,
+ gfm: true,
+ pedantic: false
+})
+
+marked.use({ tokenizer, renderer });
+
+export default marked
\ No newline at end of file
diff --git a/src/components/render-html.jsx b/src/components/render-html.jsx
index 0620be18..6097fb25 100644
--- a/src/components/render-html.jsx
+++ b/src/components/render-html.jsx
@@ -1,21 +1,48 @@
import React, { useEffect, useRef } from 'react'
import 'katex/dist/katex.min.css';
-import { exportMdtoHtml } from 'educoder'
+
+import marked, { getTocContent, cleanToc } from '../common/marked'
let preRegex = /]*>/g
+
export default ({ value = '', is_md = true, className, style = {} }) => {
- let html = is_md ? exportMdtoHtml(value) : value
- console.log(html, '----========')
+ let str = String(value)
+ let html = is_md ? marked(str) : value
+ if (str.match(/\[TOC\]/)) {
+ html = html.replace("[TOC]
", getTocContent())
+ cleanToc()
+ }
+
html = html.replace(/▁/g, "▁▁▁")
const el = useRef()
+ function onAncherHandler(e) {
+ let target = e.target
+ if (target.tagName.toUpperCase() === 'A') {
+ let ancher = target.getAttribute('href')
+ if (ancher.startsWith('#')) {
+ e.preventDefault()
+ let viewEl = document.getElementById(ancher.replace('#', ''))
+ if (viewEl) {
+ viewEl.parentNode.scrollTop = viewEl.offsetTop
+ }
+ }
+ }
+ }
+
useEffect(() => {
if (el.current && html) {
if (html.match(preRegex)) {
window.PR.prettyPrint()
}
}
- }, [html, el.current])
+ if (el.current) {
+ el.current.addEventListener('click', onAncherHandler)
+ return () => {
+ el.current.removeEventListener('click', onAncherHandler)
+ }
+ }
+ }, [html, el.current, onAncherHandler])
- return ()
+ return ()
}
\ No newline at end of file
diff --git a/src/modules/user/usersInfo/InfosPackage.js b/src/modules/user/usersInfo/InfosPackage.js
index 18980c3f..57e9c1ea 100644
--- a/src/modules/user/usersInfo/InfosPackage.js
+++ b/src/modules/user/usersInfo/InfosPackage.js
@@ -190,31 +190,31 @@ class InfosPackage extends Component {
{
- category == "manage" ?
+ category === "manage" ?
: category == "bidden" ?
+ : category === "bidden" ?
: ""
}
@@ -223,14 +223,6 @@ class InfosPackage extends Component {
发布时间
- {/*bidden_status: "pending"*/}
-
- {/*category_id: 2*/}
-
- {/*status: "published"*/}
-
- {/*type: "bidden"*/}
-
{data === undefined ? : data.project_packages.length === 0 ? : data.project_packages.map((item, key) => {
return (
@@ -295,27 +287,22 @@ class InfosPackage extends Component {
: "" : ""}
-
- {category == "manage" ? item.operation.can_edit === true && item.operation.can_delete === false ?
+ {category === "manage" ? item.operation.can_edit === true && item.operation.can_delete === false ?
: "" : ""}
-
-
)
})}
-
{
totalCount > 20 &&
}
-
)