@2kog/pkg-editor 0.0.1

package/src/assets/js/katex.js

@@ -0,0 +1,192 @@
+import $ from 'jquery';
+import katex from 'katex';
+import 'katex/dist/katex.min.css';
+
+function renderKatexBlock(selector = ".w-latex") {
+    try {
+        // eslint-disable-next-line no-unused-vars
+        $(selector).each(function(i, ele) {
+            let $katex = $(this);
+
+            // 获取原始HTML内容
+            let raw = $katex.html();
+
+            // 处理各种换行组合：
+            // 1. \\<br /> 或 \\<br> -> \\
+            raw = raw.replace(/\\\\\s*<br\s*\/?>/gi, '\\\\');
+            // 2. \<br /> 或 \<br> -> \\
+            raw = raw.replace(/\\\s*<br\s*\/?>/gi, '\\\\');
+            // 3. 单独的 <br /> -> \\
+            raw = raw.replace(/<br\s*\/?>/gi, '\\\\');
+
+            // 移除其他HTML标签但保留内容
+            raw = raw.replace(/<[^>]+>/g, '');
+
+            // 解码HTML实体（如 &nbsp; -> 空格）
+            raw = $('<div>').html(raw).text();
+
+            // 清理多余的空白字符
+            raw = raw.trim();
+
+            console.log('Original HTML:', $katex.html());
+            console.log('Processed LaTeX:', raw);
+
+            katex.render(raw, $katex.get(0), { displayMode: true });
+        });
+    } catch (e) {
+        console.error('KaTeX render error:', e);
+        console.error('Failed content:', $(this).html());
+    }
+}
+
+function renderKatexInline(container = document.body) {
+    // 支持 \(...\) 和 $...$ 两种行内语法
+    // 改进正则表达式，更好地匹配单美元符号
+    const inlineRegex = /(\\\((.+?)\\\)|\$([^$]+?)\$)/g;
+
+    const walker = document.createTreeWalker(
+        container,
+        NodeFilter.SHOW_TEXT,
+        {
+            acceptNode: function (node) {
+                if (
+                    node.parentNode &&
+                    !node.parentNode.closest("pre") &&
+                    (node.nodeValue.includes("\\(") || node.nodeValue.includes("$"))
+                ) {
+                    return NodeFilter.FILTER_ACCEPT;
+                }
+                return NodeFilter.FILTER_REJECT;
+            },
+        }
+    );
+
+    const nodesToReplace = [];
+    while (walker.nextNode()) {
+        nodesToReplace.push(walker.currentNode);
+    }
+
+    console.log('Inline processing nodes:', nodesToReplace.length);
+
+    nodesToReplace.forEach((node) => {
+        const text = node.nodeValue;
+        const frag = document.createDocumentFragment();
+        let lastIndex = 0;
+        let match;
+
+        console.log('Processing text:', text);
+
+        while ((match = inlineRegex.exec(text))) {
+            const fullMatch = match[0];
+            const parenContent = match[2]; // \(...\)的内容
+            const dollarContent = match[3]; // $...$的内容
+            const raw = parenContent || dollarContent;
+            const matchStart = match.index;
+
+            console.log('Found inline match:', fullMatch, 'Raw:', raw);
+
+            // 添加匹配前文本
+            frag.appendChild(document.createTextNode(text.slice(lastIndex, matchStart)));
+
+            try {
+                const span = document.createElement("span");
+                // 处理JavaScript字符串中的双反斜杠转义
+                const processedRaw = raw.replace(/\\\\/g, '\\');
+                console.log('Rendering inline:', processedRaw);
+                // 添加更多选项确保正确渲染
+                span.innerHTML = katex.renderToString(processedRaw, {
+                    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);
+            }
+
+            lastIndex = inlineRegex.lastIndex;
+        }
+
+        // 剩余文本
+        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*\$\$|\\\[\s*([\s\S]+?)\s*\\\])/g;
+
+    const walker = document.createTreeWalker(
+        container,
+        NodeFilter.SHOW_TEXT,
+        {
+            acceptNode: function (node) {
+                if (
+                    node.parentNode &&
+                    !node.parentNode.closest("pre") &&
+                    (node.nodeValue.includes("$$") || node.nodeValue.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;
+        let match;
+
+        while ((match = blockRegex.exec(text))) {
+            const fullMatch = match[0];
+            const dollarContent = match[2]; // $$...$$的内容
+            const bracketContent = match[3]; // \[...\]的内容
+            const raw = dollarContent || bracketContent;
+            const matchStart = match.index;
+
+            // 添加匹配前文本
+            frag.appendChild(document.createTextNode(text.slice(lastIndex, matchStart)));
+
+            try {
+                const div = document.createElement("div");
+                // 处理JavaScript字符串中的双反斜杠转义
+                const processedRaw = raw.replace(/\\\\/g, '\\');
+                div.innerHTML = katex.renderToString(processedRaw, { displayMode: true });
+                frag.appendChild(div);
+            } catch (e) {
+                frag.appendChild(document.createTextNode(fullMatch));
+                console.error("Block render error:", raw, e);
+            }
+
+            lastIndex = blockRegex.lastIndex;
+        }
+
+        // 添加剩余文本
+        if (lastIndex < text.length) {
+            frag.appendChild(document.createTextNode(text.slice(lastIndex)));
+        }
+
+        node.parentNode.replaceChild(frag, node);
+    });
+}
+
+export default function renderKatexAll(container = document.body) {
+    renderKatexBlock(".w-latex");
+    renderKatexDisplayBlock(container);
+    renderKatexInline(container);
+}

package/src/assets/js/nextpage.js

@@ -0,0 +1,4 @@
+function splitPages(str) {
+    return (str && str.split("<!--nextpage-->")) || "";
+}
+export default splitPages;

package/src/assets/js/pswp.js

@@ -0,0 +1,67 @@
+import $ from "jquery";
+import PhotoSwipe from "photoswipe";
+import PhotoSwipeUI_Default from "photoswipe/dist/photoswipe-ui-default";
+import "photoswipe/dist/photoswipe.css";
+import "photoswipe/dist/default-skin/default-skin.css";
+import tpl from "./pswp_template.js";
+// https://photoswipe.com/documentation/options.html
+
+class Gallery {
+    constructor(options) {
+        this._picbox = "";
+        this.options = options || {
+            bgOpacity: 0.8,
+            shareEl: false,
+            zoomEl: false,
+            closeOnScroll: false,
+        };
+        this.bucket = [];
+        this.items = [];
+        this.pswp = "";
+    }
+    init($root, $selector = "img") {
+        // 创建容器
+        let isExist = document.querySelectorAll(".pswp").length;
+        if (!isExist) $("body").append(tpl);
+        this._picbox = document.querySelectorAll(".pswp")[0];
+
+        //fix需要清空,可能替换内容重复渲染
+        this.bucket = [];
+        this.items = [];
+
+        // 缓存图片序列
+        $($root)
+            .find($selector + ":visible")
+            .each((i, $pic) => {
+                this.bucket.push($pic);
+                this.items.push({
+                    $el: $pic,
+                    src: $pic.src,
+                    w: $pic.naturalWidth || $pic.width || 400,
+                    h: $pic.naturalHeight || $pic.height || 400,
+                });
+            });
+
+        // 绑定事件
+        $($root)
+            .find($selector)
+            .on("click", (e) => {
+                this.open(e.target);
+            });
+    }
+    open(target) {
+        let i = this.bucket.indexOf(target);
+        //可能为0
+        if (i > -1) {
+            let _options = Object.assign(this.options, {
+                index: i,
+            });
+            // 需要在每次调用时重新初始化，因为关闭按钮会自动销毁实例
+            let pswp = new PhotoSwipe(this._picbox, PhotoSwipeUI_Default, this.items, _options);
+
+            pswp.init();
+        }
+    }
+}
+
+export default new Gallery();

package/src/assets/js/pswp_template.js

@@ -0,0 +1,66 @@
+export default `<!-- Root element of PhotoSwipe. Must have class pswp. -->
+<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+
+    <!-- Background of PhotoSwipe. 
+         It's a separate element as animating opacity is faster than rgba(). -->
+    <div class="pswp__bg"></div>
+
+    <!-- Slides wrapper with overflow:hidden. -->
+    <div class="pswp__scroll-wrap">
+
+        <!-- Container that holds slides. 
+            PhotoSwipe keeps only 3 of them in the DOM to save memory.
+            Don't modify these 3 pswp__item elements, data is added later on. -->
+        <div class="pswp__container">
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+        </div>
+
+        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
+        <div class="pswp__ui pswp__ui--hidden">
+
+            <div class="pswp__top-bar">
+
+                <!--  Controls are self-explanatory. Order can be changed. -->
+
+                <div class="pswp__counter"></div>
+
+                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+
+                <button class="pswp__button pswp__button--share" title="Share"></button>
+
+                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
+
+                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+
+                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
+                <!-- element will get class pswp__preloader--active when preloader is running -->
+                <div class="pswp__preloader">
+                    <div class="pswp__preloader__icn">
+                      <div class="pswp__preloader__cut">
+                        <div class="pswp__preloader__donut"></div>
+                      </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+                <div class="pswp__share-tooltip"></div> 
+            </div>
+
+            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
+            </button>
+
+            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
+            </button>
+
+            <div class="pswp__caption">
+                <div class="pswp__caption__center"></div>
+            </div>
+
+        </div>
+
+    </div>
+
+</div>`;

package/src/assets/js/renderImgPreview.js

@@ -0,0 +1,18 @@
+import $ from "jquery";
+import "viewerjs/dist/viewer.css";
+import Viewer from "viewerjs";
+
+function renderImgPreview(selector = ".c-article img") {
+    // 获取src不为空的图片
+    let imgs = $(selector).filter(function () {
+        return $(this).attr("src") != "";
+    });
+    imgs.each((i, ele) => {
+        new Viewer(ele, {
+            toolbar: false,
+            navbar: false,
+        });
+    });
+}
+
+export default renderImgPreview;