|
@@ -1,21 +1,12 @@
|
|
// const _text_styles_ = ["bold", "underline", "italic", "sup", "sub"];
|
|
// const _text_styles_ = ["bold", "underline", "italic", "sup", "sub"];
|
|
|
|
|
|
-let _isPreview = true;
|
|
|
|
-let _container;
|
|
|
|
-
|
|
|
|
-function transformToLocalResourcePath(value) {
|
|
|
|
- return value;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
/**
|
|
/**
|
|
* 将富文本 JSON 渲染到指定的元素中
|
|
* 将富文本 JSON 渲染到指定的元素中
|
|
*
|
|
*
|
|
* @param {RichTextJSON} body
|
|
* @param {RichTextJSON} body
|
|
* @param {HTMLDivElement} container
|
|
* @param {HTMLDivElement} container
|
|
*/
|
|
*/
|
|
-export function renderRichText(body, container, isPreview = true) {
|
|
|
|
- _isPreview = isPreview;
|
|
|
|
- _container = container;
|
|
|
|
|
|
+export function renderRichText(body, container) {
|
|
let sections = body?.sections || [];
|
|
let sections = body?.sections || [];
|
|
let nodes = [];
|
|
let nodes = [];
|
|
sections.forEach((section) => {
|
|
sections.forEach((section) => {
|
|
@@ -57,14 +48,6 @@ function renderBlock(block, inline) {
|
|
// let classList = node.classList
|
|
// let classList = node.classList
|
|
let node;
|
|
let node;
|
|
if (block.type === "text") {
|
|
if (block.type === "text") {
|
|
- // classList.add('text')
|
|
|
|
- // if (block.param != undefined) {
|
|
|
|
- // _text_styles_.forEach(style => {
|
|
|
|
- // if (block.param[style] === true) {
|
|
|
|
- // classList.add(style)
|
|
|
|
- // }
|
|
|
|
- // })
|
|
|
|
- // }
|
|
|
|
if (
|
|
if (
|
|
block.param &&
|
|
block.param &&
|
|
["underline", "bold", "italic"].some((item) => block.param[item])
|
|
["underline", "bold", "italic"].some((item) => block.param[item])
|
|
@@ -98,47 +81,17 @@ function renderBlock(block, inline) {
|
|
} else {
|
|
} else {
|
|
node = document.createTextNode(block.value);
|
|
node = document.createTextNode(block.value);
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ // TODO: 兼容旧版填空题答题点做的修改,后续可以删除
|
|
|
|
+ if (block.param && block.param.display) {
|
|
|
|
+ node.style.display = block.param.display;
|
|
|
|
+ }
|
|
} else if (block.type === "image") {
|
|
} else if (block.type === "image") {
|
|
- // classList.add("image");
|
|
|
|
- // classList.add("loading");
|
|
|
|
node = document.createElement("img");
|
|
node = document.createElement("img");
|
|
- // node.setAttribute("title", "could be a length of audio");
|
|
|
|
- // node.addEventListener("click", (ev) => {
|
|
|
|
- // // console.log(ev);
|
|
|
|
- // const shift = ev.shiftKey;
|
|
|
|
- // node.setAttribute(
|
|
|
|
- // "width",
|
|
|
|
- // +getComputedStyle(node).width.replace("px", "") +
|
|
|
|
- // (shift ? 1 : -1) +
|
|
|
|
- // "px"
|
|
|
|
- // );
|
|
|
|
- // });
|
|
|
|
- if (!_isPreview) {
|
|
|
|
- const __container = _container; // because of ES modules static binding
|
|
|
|
- node.addEventListener("wheel", (ev) => {
|
|
|
|
- // ev.stopPropagation();
|
|
|
|
- // console.log(ev);
|
|
|
|
- const shift = ev.deltaY > 0;
|
|
|
|
- const newWidth =
|
|
|
|
- +getComputedStyle(node).width.replace("px", "") + (shift ? 1 : -1);
|
|
|
|
- // console.log(newWidth, ev.target.naturalWidth);
|
|
|
|
- if (newWidth >= 16 && newWidth <= ev.target.naturalWidth) {
|
|
|
|
- node.setAttribute("width", newWidth);
|
|
|
|
- // console.log(newWidth);
|
|
|
|
- __container.dispatchEvent(new Event("input"));
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
if (inline === true) {
|
|
if (inline === true) {
|
|
node.classList.add("inline");
|
|
node.classList.add("inline");
|
|
}
|
|
}
|
|
-
|
|
|
|
- if (block.value.startsWith("./")) {
|
|
|
|
- node.src = transformToLocalResourcePath(block.value);
|
|
|
|
- } else {
|
|
|
|
- node.src = block.value;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
|
|
+ node.src = block.value;
|
|
node.dataset.isImage = true;
|
|
node.dataset.isImage = true;
|
|
// 公式latex表达式
|
|
// 公式latex表达式
|
|
if (block.latex) node.dataset.latex = block.latex;
|
|
if (block.latex) node.dataset.latex = block.latex;
|
|
@@ -153,40 +106,11 @@ function renderBlock(block, inline) {
|
|
node.dataset.isAnswerPoint = true;
|
|
node.dataset.isAnswerPoint = true;
|
|
node.dataset.order = block.value;
|
|
node.dataset.order = block.value;
|
|
} else if (block.type === "audio") {
|
|
} else if (block.type === "audio") {
|
|
- // classList.add("audio");
|
|
|
|
- // let audio = node.appendChild(new Audio());
|
|
|
|
- // audio.src = block.value;
|
|
|
|
- // audio.controls = true;
|
|
|
|
- // span 可以被追加文本内容,不好
|
|
|
|
- // node = document.createElement("span");
|
|
|
|
- // node.className = "audio";
|
|
|
|
- // node.dataset["src"] = block.value;
|
|
|
|
- // node.innerHTML = "▶";
|
|
|
|
- // // md5 src?
|
|
|
|
- // node.id = "what";
|
|
|
|
- // var sheet = window.document.styleSheets[0];
|
|
|
|
- // sheet.insertRule(
|
|
|
|
- // `#what::after{content: "1:03"; font-size: 11px;}`,
|
|
|
|
- // sheet.cssRules.length
|
|
|
|
- // );
|
|
|
|
-
|
|
|
|
- if (_isPreview) {
|
|
|
|
- node = document.createElement("audio");
|
|
|
|
- node.className = "audio";
|
|
|
|
- node.src = transformToLocalResourcePath(block.value);
|
|
|
|
- node.controls = true;
|
|
|
|
- node.controlsList = "nodownload";
|
|
|
|
- } else {
|
|
|
|
- node = document.createElement("img");
|
|
|
|
- node.className = "audio";
|
|
|
|
- node.src = "/img/editor/text_audio.png";
|
|
|
|
- node.dataset.audioSrc = transformToLocalResourcePath(block.value);
|
|
|
|
- node.dataset.isAudio = true;
|
|
|
|
- node.dataset.duration = block.param.duration;
|
|
|
|
- const mDuration = require("moment").unix(0);
|
|
|
|
- mDuration.second(block.param.duration);
|
|
|
|
- node.title = mDuration.format("mm:ss");
|
|
|
|
- }
|
|
|
|
|
|
+ node = document.createElement("audio");
|
|
|
|
+ node.className = "audio";
|
|
|
|
+ node.src = block.value;
|
|
|
|
+ node.controls = true;
|
|
|
|
+ node.controlsList = "nodownload";
|
|
}
|
|
}
|
|
|
|
|
|
return node;
|
|
return node;
|