@jx3box/jx3box-editor 2.2.47 → 3.0.0

package/src/assets/js/katex.js

@@ -0,0 +1,211 @@
+import $ from 'jquery';
+import katex from 'katex';
+import 'katex/dist/katex.min.css';
+
+function renderKatexBlock(selector = ".w-latex") {
+    try {
+        $(selector).each(function() {
+            const $katex = $(this);
+
+            // 避免重复渲染
+            if ($katex.data('katex-rendered')) return;
+
+            let raw = $katex.html();
+
+            // 统一处理换行符
+            raw = raw
+                .replace(/\\\\\s*<br\s*\/?>/gi, '\\\\')
+                .replace(/\\\s*<br\s*\/?>/gi, '\\\\')
+                .replace(/<br\s*\/?>/gi, '\\\\')
+                .replace(/<[^>]+>/g, '');
+
+            // 解码HTML实体
+            raw = $('<div>').html(raw).text().trim();
+
+            try {
+                katex.render(raw, $katex.get(0), {
+                    displayMode: true,
+                    throwOnError: false,
+                    strict: false
+                });
+                $katex.data('katex-rendered', true);
+            } catch (e) {
+                console.error('KaTeX render error:', e.message, raw);
+            }
+        });
+    } catch (e) {
+        console.error('KaTeX block render error:', e);
+    }
+}
+
+function renderKatexInline(container = document.body) {
+    // 改进的正则：不匹配换行符，支持转义
+    const inlineRegex = /(?<!\\)(\\\((.+?)\\\)|(?<!\\)\$([^\n$]+?)(?<!\\)\$)/g;
+
+    const walker = document.createTreeWalker(
+        container,
+        NodeFilter.SHOW_TEXT,
+        {
+            acceptNode: function (node) {
+                // 跳过已渲染的节点
+                if (
+                    node.parentNode &&
+                    (node.parentNode.classList?.contains('katex') ||
+                     node.parentNode.closest("pre, code, .katex"))
+                ) {
+                    return NodeFilter.FILTER_REJECT;
+                }
+
+                const value = node.nodeValue || '';
+                if (value.includes("\\(") || value.includes("$")) {
+                    return NodeFilter.FILTER_ACCEPT;
+                }
+                return NodeFilter.FILTER_REJECT;
+            },
+        }
+    );
+
+    const nodesToReplace = [];
+    while (walker.nextNode()) {
+        nodesToReplace.push(walker.currentNode);
+    }
+
+    nodesToReplace.forEach((node) => {
+        const text = node.nodeValue;
+        const frag = document.createDocumentFragment();
+        let lastIndex = 0;
+
+        // 重置正则状态
+        inlineRegex.lastIndex = 0;
+
+        const matches = [...text.matchAll(inlineRegex)];
+
+        matches.forEach((match) => {
+            const fullMatch = match[0];
+            const parenContent = match[2];
+            const dollarContent = match[3];
+            const raw = parenContent || dollarContent;
+            const matchStart = match.index;
+
+            // 添加匹配前的文本
+            if (matchStart > lastIndex) {
+                frag.appendChild(document.createTextNode(text.slice(lastIndex, matchStart)));
+            }
+
+            try {
+                const span = document.createElement("span");
+                span.className = "katex-inline";
+                span.innerHTML = katex.renderToString(raw, {
+                    displayMode: false,
+                    throwOnError: false,
+                    strict: false,
+                    trust: true
+                });
+                frag.appendChild(span);
+            } catch (e) {
+                frag.appendChild(document.createTextNode(fullMatch));
+                console.error("Inline render error:", raw, e.message);
+            }
+
+            lastIndex = matchStart + fullMatch.length;
+        });
+
+        // 添加剩余文本
+        if (lastIndex < text.length) {
+            frag.appendChild(document.createTextNode(text.slice(lastIndex)));
+        }
+
+        if (frag.hasChildNodes()) {
+            node.parentNode.replaceChild(frag, node);
+        }
+    });
+}
+
+function renderKatexDisplayBlock(container = document.body) {
+    // 使用非贪婪匹配，允许多行但不跨过多段落
+    const blockRegex = /(?<!\\)(\$\$([\s\S]+?)\$\$|(?<!\\)\\\[([\s\S]+?)\\\])/g;
+
+    const walker = document.createTreeWalker(
+        container,
+        NodeFilter.SHOW_TEXT,
+        {
+            acceptNode: function (node) {
+                // 跳过已渲染的节点
+                if (
+                    node.parentNode &&
+                    (node.parentNode.classList?.contains('katex') ||
+                     node.parentNode.closest("pre, code, .katex"))
+                ) {
+                    return NodeFilter.FILTER_REJECT;
+                }
+
+                const value = node.nodeValue || '';
+                if (value.includes("$$") || value.includes("\\[")) {
+                    return NodeFilter.FILTER_ACCEPT;
+                }
+                return NodeFilter.FILTER_REJECT;
+            },
+        }
+    );
+
+    const nodesToReplace = [];
+    while (walker.nextNode()) {
+        nodesToReplace.push(walker.currentNode);
+    }
+
+    nodesToReplace.forEach((node) => {
+        const text = node.nodeValue;
+        const frag = document.createDocumentFragment();
+        let lastIndex = 0;
+
+        // 重置正则状态
+        blockRegex.lastIndex = 0;
+
+        const matches = [...text.matchAll(blockRegex)];
+
+        matches.forEach((match) => {
+            const fullMatch = match[0];
+            const dollarContent = match[2];
+            const bracketContent = match[3];
+            const raw = (dollarContent || bracketContent).trim();
+            const matchStart = match.index;
+
+            // 添加匹配前的文本
+            if (matchStart > lastIndex) {
+                frag.appendChild(document.createTextNode(text.slice(lastIndex, matchStart)));
+            }
+
+            try {
+                const div = document.createElement("div");
+                div.className = "katex-block";
+                div.innerHTML = katex.renderToString(raw, {
+                    displayMode: true,
+                    throwOnError: false,
+                    strict: false,
+                    trust: true
+                });
+                frag.appendChild(div);
+            } catch (e) {
+                frag.appendChild(document.createTextNode(fullMatch));
+                console.error("Block render error:", raw, e.message);
+            }
+
+            lastIndex = matchStart + fullMatch.length;
+        });
+
+        // 添加剩余文本
+        if (lastIndex < text.length) {
+            frag.appendChild(document.createTextNode(text.slice(lastIndex)));
+        }
+
+        if (frag.hasChildNodes()) {
+            node.parentNode.replaceChild(frag, node);
+        }
+    });
+}
+
+export default function renderKatexAll(container = document.body) {
+    renderKatexBlock(".w-latex");
+    renderKatexDisplayBlock(container);
+    renderKatexInline(container);
+}

package/src/assets/js/renderImgPreview.js

@@ -0,0 +1,49 @@
+import $ from "jquery";
+import "viewerjs/dist/viewer.css";
+import Viewer from "viewerjs";
+
+const viewerMap = new WeakMap();
+
+function initViewer(ele) {
+    if (!ele) return null;
+    if (viewerMap.has(ele)) return viewerMap.get(ele);
+    const viewer = new Viewer(ele, {
+        toolbar: false,
+        navbar: false,
+    });
+    viewerMap.set(ele, viewer);
+    return viewer;
+}
+
+export function getImgViewer(ele) {
+    return viewerMap.get(ele) || null;
+}
+
+export function showImgPreview(ele) {
+    const viewer = initViewer(ele);
+    if (viewer) viewer.show();
+    return viewer;
+}
+
+export default function renderImgPreview(rootEl, selector = "img") {
+    if (!rootEl) return;
+
+    const $root = $(rootEl);
+    const imgs = $root
+        .find(selector)
+        .filter(function () {
+            const src = $(this).attr("src");
+            if (!src) return false;
+            // 保留本项目的业务规则：表情图片不启用预览
+            if (this.classList && this.classList.contains("e-jx3-emotion-img"))
+                return false;
+            // 业务规则：图标不启用预览
+            if (this.classList && this.classList.contains("e-jx3-icon"))
+                return false;
+            return true;
+        });
+
+    imgs.each((_, ele) => {
+        initViewer(ele);
+    });
+}

package/{assets → src/assets}/js/xss.js

@@ -17,18 +17,60 @@ const EXTRA_TAGS = [
 
 // 必须顶层的 at-rule（你说不需要动画，但 keyframes 也可能被编辑器/作者写进来，留着更稳）
 const TOP_LEVEL_AT = new Set(["keyframes", "-webkit-keyframes", "font-face"]);
+const CSS_URL_ALLOWED_HOSTS = new Set(["cdn.jx3box.com"]);
+
+function unquoteCssUrl(raw = "") {
+    const s = String(raw).trim();
+    if (!s) return "";
+    if ((s.startsWith('"') && s.endsWith('"')) || (s.startsWith("'") && s.endsWith("'"))) {
+        return s.slice(1, -1).trim();
+    }
+    return s;
+}
+
+function isSafeCssUrl(url = "") {
+    const s = String(url).trim();
+    if (!s) return false;
+    if (/[\u0000-\u001F\u007F]/.test(s)) return false;
+    if (/^(javascript|vbscript|data|file):/i.test(s)) return false;
+
+    // 站内相对地址保留
+    if (/^(\/|\.\/|\.\.\/|#)/.test(s)) return true;
+
+    // 绝对地址与协议相对地址：仅允许白名单域名
+    try {
+        const normalized = s.startsWith("//") ? `https:${s}` : s;
+        const u = new URL(normalized);
+        if (!/^https?:$/i.test(u.protocol)) return false;
+        return CSS_URL_ALLOWED_HOSTS.has(u.hostname.toLowerCase());
+    } catch {
+        return false;
+    }
+}
+
+function sanitizeCssUrls(css = "") {
+    return String(css).replace(/url\s*\(\s*([^)]*?)\s*\)/gi, (all, rawUrl) => {
+        const clean = unquoteCssUrl(rawUrl);
+        if (!isSafeCssUrl(clean)) return "";
+        const escaped = clean.replace(/"/g, '\\"');
+        return `url("${escaped}")`;
+    });
+}
 
 function stripDangerousCss(css) {
     if (!css) return css;
     return css
         .replace(/@import\s+[^;]+;?/gi, "")
-        .replace(/url\s*\(\s*[^)]+\s*\)/gi, "")
-        .replace(/expression\s*\([^)]*\)/gi, "");
+        .replace(/expression\s*\([^)]*\)/gi, "")
+        .replace(/-moz-binding\s*:\s*[^;]+;?/gi, "")
+        .replace(/behavior\s*:\s*[^;]+;?/gi, "")
+        .replace(/@charset\s+[^;]+;?/gi, "");
 }
 
 // 暴力把 style 内容 nest 到 .c-article
 function nestCssBrutally(cssText, scope = ".c-article") {
     let css = stripDangerousCss(cssText || "");
+    css = sanitizeCssUrls(css);
     if (!css.trim()) return css;
 
     const root = postcss.parse(css, { parser: safeParser });
@@ -101,11 +143,12 @@ export default function sanitizeRichText(html) {
                 // 移除 on*
                 for (const k of Object.keys(out)) if (/^on/i.test(k)) delete out[k];
 
-                // style 属性：禁 @import / url(
+                // style 属性：禁 @import / expression，url() 仅保留安全协议
                 if (typeof out.style === "string" && out.style) {
                     let s = out.style;
                     s = s.replace(/@import\s+[^;]+;?/gi, "");
-                    s = s.replace(/url\s*\(\s*[^)]+\s*\)/gi, "");
+                    s = sanitizeCssUrls(s);
+                    s = s.replace(/expression\s*\([^)]*\)/gi, "");
                     s = s.replace(/;;+/g, ";").trim();
                     if (!s) delete out.style;
                     else out.style = s;
@@ -127,4 +170,4 @@ export default function sanitizeRichText(html) {
             },
         },
     });
-}
+}

package/src/components/Author.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- @圈人pop：作者卡片 -->
     <div class="w-author" v-loading="loading">
         <div class="w-author-wrapper el-popover" v-if="data" :style="{ backgroundImage: `url(${bg})` }">
             <div class="u-author">
@@ -20,9 +21,9 @@
                     </a>
                     <div class="u-extend">
                         <el-tooltip class="item" effect="dark" placement="top">
-                            <div slot="content">
+                            <template #content>
                                 <span class="u-tips">经验值：{{ data.experience }}</span>
-                            </div>
+                            </template>
                             <span
                                 class="u-level"
                                 :class="'lv-' + level"
@@ -43,7 +44,18 @@
             <!-- <div class="u-honor" :style="honorStyle" v-if="honor">{{ honor }}</div> -->
             <div class="u-trophy" v-if="hasTrophy">
                 <div class="u-medals" v-if="medals && medals.length">
-                    <medal :medals="medals" :showIcon="showMedalIcon"></medal>
+                    <div class="m-medal">
+                        <a
+                            v-for="item in medals"
+                            :key="item.id"
+                            :href="medalLink(item)"
+                            target="_blank"
+                            class="u-medal"
+                            :title="item.medal_desc"
+                        >
+                            <img class="u-medal-img" :src="showMedalIcon(item.medal)" />
+                        </a>
+                    </div>
                 </div>
             </div>
             <div class="u-teams" v-if="teams && teams.length">
@@ -57,25 +69,29 @@
 </template>
 
 <script>
-import { authorLink, getLink, getThumbnail } from "@jx3box/jx3box-common/js/utils";
-import { getUserInfo, getUserMedals, getUserPublicTeams } from "../../service/author";
-import { getDecoration, getDecorationJson } from "../../service/cms";
-import { __server, __imgPath, __userLevelColor, __cdn } from "@jx3box/jx3box-common/data/jx3box.json";
+import { authorLink, getLink, getMedalLink, getThumbnail } from "@jx3box/jx3box-common/js/utils";
+import { getUserInfo, getUserMedals, getUserPublicTeams } from "../service/author";
+import { getDecoration, getDecorationJson } from "../service/cms";
 import User from "@jx3box/jx3box-common/js/user";
-import { __userLevel } from "@jx3box/jx3box-common/data/jx3box.json";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import Avatar from "./Avatar.vue";
-import medal from "./medal.vue";
 const ATCARD_KEY = "decoration_atcard";
 const DECORATION_JSON = "decoration_json";
 const DECORATION_KEY = "decoration_me";
 const HONOR_KEY = "honor_me";
+
+const { __server, __imgPath, __userLevelColor, __cdn, __userLevel } = JX3BOX;
 export default {
     name: "Author",
     components: {
-        medal,
         Avatar,
     },
-    props: ["uid"],
+    props: {
+        uid: {
+            type: [String, Number],
+            required: true,
+        },
+    },
     data: () => ({
         data: null,
         medals: [],
@@ -249,7 +265,10 @@ export default {
         },
 
         showMedalIcon: function (val) {
-            return __imgPath + "image/medals/user/" + val + ".gif";
+            return __cdn + "/design/medals/user/" + val + ".gif";
+        },
+        medalLink: function ({ rank_id, medal_type = "rank" }) {
+            return getMedalLink(rank_id, medal_type);
         },
         showMedalDesc: function (item) {
             return item.medal_desc || medal_map[item.medal];
@@ -272,7 +291,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../assets/css/module/author.less";
+@import "../assets/css/module/author.less";
 .w-author {
     .w-author-wrapper {
         background-repeat: no-repeat;

package/src/components/Avatar.vue

@@ -9,11 +9,30 @@
 </template>
 
 <script>
-import { __server, __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import { showAvatar, authorLink } from "@jx3box/jx3box-common/js/utils";
+
+const { __server, __imgPath } = JX3BOX;
 export default {
     name: "Avatar",
-    props: ["uid", "url", "size", "frame"],
+    props: {
+        uid: {
+            type: [String, Number],
+            required: true,
+        },
+        url: {
+            type: String,
+            default: "",
+        },
+        frame: {
+            type: String,
+            default: "",
+        },
+        size: {
+            type: [String, Number],
+            default: "s",
+        },
+    },
     components: {},
     data: function() {
         return {
@@ -49,7 +68,7 @@ export default {
 }
 .c-avatar-pic {
     .db;
-    .full;
+    .size(100%);
     .r(100%);
 }
 .c-avatar-frame {