@jx3box/jx3box-editor 3.2.2 → 3.2.4

package/config/global.less

@@ -2,6 +2,7 @@
 // 旧主题色
 // @primary:#0366d6;
 @primary:#4f46e5;
+@v4yellow: #f5bd1e;
 
 // 文字颜色（黑底、白底）
 @color: #3d454d;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-editor",
-    "version": "3.2.2",
+    "version": "3.2.4",
     "description": "JX3BOX Article & Editor",
     "main": "index.js",
     "scripts": {
@@ -15,11 +15,11 @@
     "dependencies": {
         "@element-plus/icons-vue": "^2.0.10",
         "@imengyu/vue3-context-menu": "^1.5.4",
-        "@jx3box/jx3box-common": "^9.2.4",
-        "@jx3box/jx3box-data": "^3.9.5",
-        "@jx3box/jx3box-emotion": "^1.3.1",
-        "@jx3box/jx3box-macro": "^1.0.4",
-        "@jx3box/jx3box-talent": "^1.3.14",
+        "@jx3box/jx3box-common": "^9.2.1",
+        "@jx3box/jx3box-data": "^3.9.4",
+        "@jx3box/jx3box-emotion": "^1.3.0",
+        "@jx3box/jx3box-macro": "^1.0.3",
+        "@jx3box/jx3box-talent": "^1.3.13",
         "@tinymce/tinymce-vue": "^5.0.0",
         "axios": "^0.19.2",
         "cheerio": "^1.1.2",
@@ -89,6 +89,6 @@
     },
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/iruxu/iruxu-editor.git"
+        "url": "git+https://github.com/JX3BOX/jx3box-editor.git"
     }
 }

package/src/assets/css/tinymce/h.less

@@ -32,12 +32,11 @@
 
     h4 {
         font-size: 15px;
-        padding: 8px 10px;
+        padding: 8px 10px 8px 20px;
 
         background-color: #fafbfc;
         border-radius: 6px;
-        border-left:4px solid @primary;
-
+        // border-left:4px solid @primary;
 
         position: relative;
         overflow: hidden;
@@ -45,17 +44,39 @@
         // border: 1px solid @primary;
         &::before {
             content: "";
-            font-size: 20px;
             display: block;
             position: absolute;
-            width: 80px;
-            height: 3px;
-            top: 0;
-            left: 15px;
-            // background-color: @primary;
+            width: 5px;
+            height: 60%;
+            top: 50%;
+            transform: translateY(-50%);
+            left: 10px;
+            background-color: @primary;
+            border-radius: 10px;
+            transition: all 0.2s ease;
             // border-bottom-right-radius: 20px;
             // border-bottom-left-radius: 20px;
         }
+        // &::after {
+        //     content: "";
+        //     display: block;
+        //     position: absolute;
+        //     width: 5px;
+        //     height: 60%;
+        //     top: 50%;
+        //     transform: translateY(-50%);
+        //     left: 10px;
+        //     background-color: @v4yellow;
+        //     border-radius: 10px;
+        //     z-index: 2;
+        //     display: none;
+        // }
+
+        &:hover {
+            &::before {
+                background-color: @v4yellow;
+            }
+        }
     }
 
     h5 {
@@ -74,6 +95,11 @@
             bottom: -1px;
             left: 0;
         }
+        &:hover{
+            &::after {
+                background-color: @v4yellow;
+            }
+        }
     }
 
     h6 {

package/src/assets/css/tinymce/nextpage.less

@@ -24,6 +24,7 @@
     max-width: 100%;
     overflow-x: auto;
     text-align: center;
+    justify-content: center;
 
     .el-pager{
         margin:0;

package/src/assets/css/tinymce/table.less

@@ -12,17 +12,17 @@
         line-height:2.2;
         color:@color;
 
-        td,
-        th {
+        td,th {
             padding: 6px 10px;
-        }
-        td {
             border: 1px solid #eee;
         }
         th {
             background-color: #fafbfc;
             font-weight: 500;
         }
+        tr{
+            background-color:#fff;
+        }
         tr:nth-child(2n + 1) {
             background-color: #fafbfc;
         }

package/src/assets/js/katex.js

@@ -2,6 +2,181 @@ import $ from 'jquery';
 import katex from 'katex';
 import 'katex/dist/katex.min.css';
 
+function isEscaped(text, index) {
+    let count = 0;
+    for (let i = index - 1; i >= 0 && text[i] === '\\'; i--) {
+        count++;
+    }
+    return count % 2 === 1;
+}
+
+function findUnescaped(text, token, start) {
+    let index = start;
+    while (index < text.length) {
+        const found = text.indexOf(token, index);
+        if (found === -1) return -1;
+        if (!isEscaped(text, found)) return found;
+        index = found + token.length;
+    }
+    return -1;
+}
+
+function getTextNodes(container, shouldAccept) {
+    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;
+                }
+
+                return shouldAccept(node.nodeValue || '') ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+            },
+        }
+    );
+
+    const nodesToReplace = [];
+    while (walker.nextNode()) {
+        nodesToReplace.push(walker.currentNode);
+    }
+    return nodesToReplace;
+}
+
+function collectInlineMatches(text) {
+    const matches = [];
+    let index = 0;
+
+    while (index < text.length) {
+        const parenStart = text.indexOf('\\(', index);
+        const dollarStart = text.indexOf('$', index);
+        const candidates = [parenStart, dollarStart].filter((value) => value !== -1 && !isEscaped(text, value));
+        const start = candidates.length ? Math.min(...candidates) : -1;
+        if (start === -1) break;
+
+        if (text.slice(start, start + 2) === '\\(') {
+            const end = findUnescaped(text, '\\)', start + 2);
+            if (end !== -1) {
+                const raw = text.slice(start + 2, end);
+                if (raw && !raw.includes('\n')) {
+                    matches.push({
+                        start,
+                        end: end + 2,
+                        raw,
+                        full: text.slice(start, end + 2),
+                    });
+                }
+                index = end + 2;
+                continue;
+            }
+        } else if (text[start] === '$' && text[start + 1] !== '$') {
+            const end = findUnescaped(text, '$', start + 1);
+            if (end !== -1 && text[end + 1] !== '$') {
+                const raw = text.slice(start + 1, end);
+                if (raw && !raw.includes('\n')) {
+                    matches.push({
+                        start,
+                        end: end + 1,
+                        raw,
+                        full: text.slice(start, end + 1),
+                    });
+                }
+                index = end + 1;
+                continue;
+            }
+        }
+
+        index = start + 1;
+    }
+
+    return matches;
+}
+
+function collectBlockMatches(text) {
+    const matches = [];
+    let index = 0;
+
+    while (index < text.length) {
+        const dollarStart = text.indexOf('$$', index);
+        const bracketStart = text.indexOf('\\[', index);
+        const candidates = [dollarStart, bracketStart].filter((value) => value !== -1 && !isEscaped(text, value));
+        const start = candidates.length ? Math.min(...candidates) : -1;
+        if (start === -1) break;
+
+        if (text.slice(start, start + 2) === '$$') {
+            const end = findUnescaped(text, '$$', start + 2);
+            if (end !== -1) {
+                const raw = text.slice(start + 2, end).trim();
+                if (raw) {
+                    matches.push({
+                        start,
+                        end: end + 2,
+                        raw,
+                        full: text.slice(start, end + 2),
+                    });
+                }
+                index = end + 2;
+                continue;
+            }
+        } else if (text.slice(start, start + 2) === '\\[') {
+            const end = findUnescaped(text, '\\]', start + 2);
+            if (end !== -1) {
+                const raw = text.slice(start + 2, end).trim();
+                if (raw) {
+                    matches.push({
+                        start,
+                        end: end + 2,
+                        raw,
+                        full: text.slice(start, end + 2),
+                    });
+                }
+                index = end + 2;
+                continue;
+            }
+        }
+
+        index = start + 1;
+    }
+
+    return matches;
+}
+
+function replaceTextNode(node, matches, renderMatch, logPrefix) {
+    if (!matches.length) return;
+
+    const text = node.nodeValue || '';
+    const frag = document.createDocumentFragment();
+    let lastIndex = 0;
+
+    matches.forEach((match) => {
+        if (match.start > lastIndex) {
+            frag.appendChild(document.createTextNode(text.slice(lastIndex, match.start)));
+        }
+
+        try {
+            frag.appendChild(renderMatch(match.raw));
+        } catch (e) {
+            frag.appendChild(document.createTextNode(match.full));
+            console.error(logPrefix, match.raw, e.message);
+        }
+
+        lastIndex = match.end;
+    });
+
+    if (lastIndex < text.length) {
+        frag.appendChild(document.createTextNode(text.slice(lastIndex)));
+    }
+
+    if (frag.hasChildNodes()) {
+        node.parentNode.replaceChild(frag, node);
+    }
+}
+
 function renderKatexBlock(selector = ".w-latex") {
     try {
         $(selector).each(function() {
@@ -39,60 +214,11 @@ function renderKatexBlock(selector = ".w-latex") {
 }
 
 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 {
+    getTextNodes(container, (value) => value.includes("\\(") || value.includes("$")).forEach((node) => {
+        replaceTextNode(
+            node,
+            collectInlineMatches(node.nodeValue || ''),
+            (raw) => {
                 const span = document.createElement("span");
                 span.className = "katex-inline";
                 span.innerHTML = katex.renderToString(raw, {
@@ -101,81 +227,19 @@ function renderKatexInline(container = document.body) {
                     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);
-        }
+                return span;
+            },
+            "Inline render error:"
+        );
     });
 }
 
 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 {
+    getTextNodes(container, (value) => value.includes("$$") || value.includes("\\[")).forEach((node) => {
+        replaceTextNode(
+            node,
+            collectBlockMatches(node.nodeValue || ''),
+            (raw) => {
                 const div = document.createElement("div");
                 div.className = "katex-block";
                 div.innerHTML = katex.renderToString(raw, {
@@ -184,23 +248,10 @@ function renderKatexDisplayBlock(container = document.body) {
                     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);
-        }
+                return div;
+            },
+            "Block render error:"
+        );
     });
 }