markdown-it-any-block 3.2.10-beta5 → 3.2.11

package/README.md

@@ -10,6 +10,8 @@ markdown-it 版本的入口
 
 ```bash
 $ pnpm install -D markdown-it-any-block@latest
+
+# 或beta/测试版 (供开发者测试使用，不建议) pnpm install -D markdown-it-any-block@beta
 ```
 
 使用 (vuepress为例，其他使用markdown-it插件的类似)

package/dist/mdit-any-block.cjs

@@ -46,106 +46,6 @@ async function jsdom_init() {
   dom.window.scrollTo = () => {
   };
 }
-function container_plugin(md, name2, options) {
-  function validateDefault(params) {
-    return params.trim().split(" ", 2)[0] === name2;
-  }
-  function renderDefault(tokens, idx, _options, env, slf) {
-    if (tokens[idx].nesting === 1) {
-      tokens[idx].attrJoin("class", name2);
-    }
-    return slf.renderToken(tokens, idx, _options, env, slf);
-  }
-  options = options || {};
-  const min_markers = 3;
-  const marker_str = options.marker || ":";
-  const marker_char = marker_str.charCodeAt(0);
-  const marker_len = marker_str.length;
-  const validate = options.validate || validateDefault;
-  const render2 = options.render || renderDefault;
-  function container(state, startLine, endLine, silent) {
-    let pos;
-    let auto_closed = false;
-    let start = state.bMarks[startLine] + state.tShift[startLine];
-    let max = state.eMarks[startLine];
-    if (marker_char !== state.src.charCodeAt(start)) {
-      return false;
-    }
-    for (pos = start + 1; pos <= max; pos++) {
-      if (marker_str[(pos - start) % marker_len] !== state.src[pos]) {
-        break;
-      }
-    }
-    const marker_count = Math.floor((pos - start) / marker_len);
-    if (marker_count < min_markers) {
-      return false;
-    }
-    pos -= (pos - start) % marker_len;
-    const markup = state.src.slice(start, pos);
-    const params = state.src.slice(pos, max);
-    if (!validate(params, markup)) {
-      return false;
-    }
-    if (silent) {
-      return true;
-    }
-    let nextLine = startLine;
-    for (; ; ) {
-      nextLine++;
-      if (nextLine >= endLine) {
-        break;
-      }
-      start = state.bMarks[nextLine] + state.tShift[nextLine];
-      max = state.eMarks[nextLine];
-      if (start < max && state.sCount[nextLine] < state.blkIndent) {
-        break;
-      }
-      if (marker_char !== state.src.charCodeAt(start)) {
-        continue;
-      }
-      if (state.sCount[nextLine] - state.blkIndent >= 4) {
-        continue;
-      }
-      for (pos = start + 1; pos <= max; pos++) {
-        if (marker_str[(pos - start) % marker_len] !== state.src[pos]) {
-          break;
-        }
-      }
-      if (Math.floor((pos - start) / marker_len) < marker_count) {
-        continue;
-      }
-      pos -= (pos - start) % marker_len;
-      pos = state.skipSpaces(pos);
-      if (pos < max) {
-        continue;
-      }
-      auto_closed = true;
-      break;
-    }
-    const old_parent = state.parentType;
-    const old_line_max = state.lineMax;
-    state.parentType = "container";
-    state.lineMax = nextLine;
-    const token_o = state.push("container_" + name2 + "_open", "div", 1);
-    token_o.markup = markup;
-    token_o.block = true;
-    token_o.info = params;
-    token_o.map = [startLine, nextLine];
-    state.md.block.tokenize(state, startLine + 1, nextLine);
-    const token_c = state.push("container_" + name2 + "_close", "div", -1);
-    token_c.markup = state.src.slice(start, pos);
-    token_c.block = true;
-    state.parentType = old_parent;
-    state.lineMax = old_line_max;
-    state.line = nextLine + (auto_closed ? 1 : 0);
-    return true;
-  }
-  md.block.ruler.before("fence", "container_" + name2, container, {
-    alt: ["paragraph", "reference", "blockquote", "list"]
-  });
-  md.renderer.rules["container_" + name2 + "_open"] = render2;
-  md.renderer.rules["container_" + name2 + "_close"] = render2;
-}
 var ABConvert_IOEnum = /* @__PURE__ */ ((ABConvert_IOEnum2) => {
   ABConvert_IOEnum2["text"] = "string";
   ABConvert_IOEnum2["el"] = "HTMLElement";
@@ -2033,13 +1933,16 @@ class DirProcess {
    * 第一列等级为0、没有分叉
    */
   static dtdata2dt(list_tableInfo, div, modeT, is_folder = false) {
+    const div2 = document.createElement("div");
+    div.appendChild(div2);
+    div2.classList.add("ab-list-table-parent");
+    let table, thead, tbody;
     {
-      const table = document.createElement("table");
-      div.appendChild(table);
+      table = document.createElement("table");
+      div2.appendChild(table);
       table.classList.add("ab-table", "ab-list-table");
       if (is_folder) table.classList.add("ab-table-folder");
       if (modeT) table.setAttribute("modeT", "true");
-      let thead, tbody;
       {
         if (list_tableInfo[0].content.indexOf("< ") == 0) {
           thead = document.createElement("thead");
@@ -2095,10 +1998,12 @@ class DirProcess {
         td_cell.classList.add("ab-list-table-witharrow");
         ABConvertManager.getInstance().m_renderMarkdownFn(cell_item.content, td_cell);
       }
+    }
+    {
       const l_tr = tbody.querySelectorAll("tr");
       for (let i = 0; i < l_tr.length; i++) {
-        let targetEl = l_tr[i];
-        targetEl = targetEl.querySelector(":scope>td:first-child") ?? targetEl;
+        const tr = l_tr[i];
+        const targetEl = tr.querySelector(":scope>td:first-child") ?? tr;
         if (ABCSetting.env == "obsidian" || ABCSetting.env == "obsidian-min") {
           targetEl.onclick = () => {
             const tr_level = Number(tr.getAttribute("tr_level"));
@@ -2117,57 +2022,106 @@ class DirProcess {
             if (flag_do_fold) tr.setAttribute("is_fold", tr_isfold == "true" ? "false" : "true");
           };
         } else {
-          targetEl.setAttribute("onclick", `
-          const tr = (this.tagName == "TD") ? this.parentNode : this
-          const l_tr = tr.parentNode.querySelectorAll("tr")
-          const i = ${i}
-          const tr_level = Number(tr.getAttribute("tr_level"))
-          if (isNaN(tr_level)) return
-          const tr_isfold = tr.getAttribute("is_fold")
-          if (!tr_isfold) return
-          let flag_do_fold = false  // 防止折叠最小层
-          for (let j=i+1; j<l_tr.length; j++){
-            const tr2 = l_tr[j]
-            const tr_level2 = Number(tr2.getAttribute("tr_level"))
-            if (isNaN(tr_level2)) break
-            if (tr_level2<=tr_level) break
-            (tr_isfold == "true") ? tr2.style.display = "" : tr2.style.display = "none"
-            flag_do_fold = true
-          }
-          if (flag_do_fold) tr.setAttribute("is_fold", tr_isfold=="true"?"false":"true")
+          targetEl.setAttribute("onclick", `            const tr = (this.tagName == "TD") ? this.parentNode : this
+            const l_tr = tr.parentNode.querySelectorAll("tr")
+            const i = ${i}
+            
+            const tr_level = Number(tr.getAttribute("tr_level"))
+            if (isNaN(tr_level)) return
+            const tr_isfold = tr.getAttribute("is_fold")
+            if (!tr_isfold) return
+            let flag_do_fold = false  // 防止折叠最小层
+            for (let j=i+1; j<l_tr.length; j++){
+              const tr2 = l_tr[j]
+              const tr_level2 = Number(tr2.getAttribute("tr_level"))
+              if (isNaN(tr_level2)) break
+              if (tr_level2<=tr_level) break
+              (tr_isfold == "true") ? tr2.style.display = "" : tr2.style.display = "none"
+              flag_do_fold = true
+            }
+            if (flag_do_fold) tr.setAttribute("is_fold", tr_isfold=="true"?"false":"true")
           `);
         }
       }
+    }
+    {
       const btn = document.createElement("button");
-      table.appendChild(btn);
+      div2.appendChild(btn);
       btn.classList.add("ab-table-fold");
-      btn.textContent = "全部折叠/展开";
+      const svgStr_fold = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-fold-vertical-icon lucide-fold-vertical"><path d="M12 22v-6"/><path d="M12 8V2"/><path d="M4 12H2"/><path d="M10 12H8"/><path d="M16 12h-2"/><path d="M22 12h-2"/><path d="m15 19-3-3-3 3"/><path d="m15 5-3 3-3-3"/></svg>`;
+      const svgStr_unfold = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-unfold-vertical-icon lucide-unfold-vertical"><path d="M12 22v-6"/><path d="M12 8V2"/><path d="M4 12H2"/><path d="M10 12H8"/><path d="M16 12h-2"/><path d="M22 12h-2"/><path d="m15 19-3 3-3-3"/><path d="m15 5-3-3-3 3"/></svg>`;
       btn.setAttribute("is_fold", "false");
-      btn.onclick = () => {
-        const l_tr2 = table.querySelectorAll("tr");
-        for (let i = 0; i < l_tr2.length; i++) {
-          const tr2 = l_tr2[i];
-          (() => {
-            const tr_level = Number(tr2.getAttribute("tr_level"));
-            if (isNaN(tr_level)) return;
-            const tr_isfold = btn.getAttribute("is_fold");
-            if (!tr_isfold) return;
-            let flag_do_fold = false;
-            for (let j = i + 1; j < l_tr2.length; j++) {
-              const tr22 = l_tr2[j];
-              const tr_level2 = Number(tr22.getAttribute("tr_level"));
-              if (isNaN(tr_level2)) break;
-              if (tr_level2 <= tr_level) break;
-              tr_isfold == "true" ? tr22.style.display = "" : tr22.style.display = "none";
-              flag_do_fold = true;
-            }
-            if (flag_do_fold) tr2.setAttribute("is_fold", tr_isfold == "true" ? "false" : "true");
-          })();
-        }
-        if (btn.getAttribute("is_fold")) {
-          btn.setAttribute("is_fold", btn.getAttribute("is_fold") == "true" ? "false" : "true");
-        }
-      };
+      btn.innerHTML = svgStr_fold;
+      if (ABCSetting.env == "obsidian" || ABCSetting.env == "obsidian-min") {
+        btn.onclick = () => {
+          const l_tr = table.querySelectorAll("tr");
+          for (let i = 0; i < l_tr.length; i++) {
+            const tr = l_tr[i];
+            (() => {
+              const tr_level = Number(tr.getAttribute("tr_level"));
+              if (isNaN(tr_level)) return;
+              const tr_isfold = btn.getAttribute("is_fold");
+              if (!tr_isfold) return;
+              let flag_do_fold = false;
+              for (let j = i + 1; j < l_tr.length; j++) {
+                const tr2 = l_tr[j];
+                const tr_level2 = Number(tr2.getAttribute("tr_level"));
+                if (isNaN(tr_level2)) break;
+                if (tr_level2 <= tr_level) break;
+                tr_isfold == "true" ? tr2.style.display = "" : tr2.style.display = "none";
+                flag_do_fold = true;
+              }
+              if (flag_do_fold) tr.setAttribute("is_fold", tr_isfold == "true" ? "false" : "true");
+            })();
+          }
+          const is_all_fold = btn.getAttribute("is_fold");
+          if (is_all_fold == "true") {
+            btn.setAttribute("is_fold", "false");
+            btn.innerHTML = svgStr_fold;
+          } else {
+            btn.setAttribute("is_fold", "true");
+            btn.innerHTML = svgStr_unfold;
+          }
+        };
+      } else {
+        btn.setAttribute(
+          "onclick",
+          `          const btn = this;
+          const svgStr_fold = \`${svgStr_fold}\`;
+          const svgStr_unfold = \`${svgStr_unfold}\`;
+          const table = btn.parentNode?.querySelector("table");
+          if (!table) return;
+          
+          const l_tr = table.querySelectorAll("tr");
+          for (let i=0; i<l_tr.length; i++) {
+            const tr = l_tr[i]
+            ;(()=>{
+              const tr_level = Number(tr.getAttribute("tr_level"))
+              if (isNaN(tr_level)) return
+              const tr_isfold = btn.getAttribute("is_fold"); // [!code] tr->btn
+              if (!tr_isfold) return
+              let flag_do_fold = false  // 防止折叠最小层
+              for (let j=i+1; j<l_tr.length; j++){
+                const tr2 = l_tr[j]
+                const tr_level2 = Number(tr2.getAttribute("tr_level"))
+                if (isNaN(tr_level2)) break
+                if (tr_level2<=tr_level) break
+                (tr_isfold == "true") ? tr2.style.display = "" : tr2.style.display = "none"
+                flag_do_fold = true
+              }
+              if (flag_do_fold) tr.setAttribute("is_fold", tr_isfold=="true"?"false":"true")
+            })()
+          }
+          const is_all_fold = btn.getAttribute("is_fold")
+          if (is_all_fold=="true") {
+            btn.setAttribute("is_fold", "false"); btn.innerHTML = svgStr_fold;
+          }
+          else {
+            btn.setAttribute("is_fold", "true"); btn.innerHTML = svgStr_unfold;
+          }
+          `
+        );
+      }
     }
     return div;
   }
@@ -2438,36 +2392,32 @@ ABConvert.factory({
     const args = matchs[1].split(",").map(
       (arg) => /^\d*\.?\d+$/.test(arg.trim()) ? `${arg.trim()}%` : arg.trim()
     );
-    switch (true) {
-      case content.children[0].classList.contains("ab-col"): {
-        const sub_els = content.children[0].children;
-        if (sub_els.length == 0) return content;
-        for (let i = 0; i < Math.min(sub_els.length, args.length); i++) {
-          const sub_el = sub_els[i];
-          if (args[i].endsWith("%")) sub_el.style.flex = `0 1 ${args[i]}`;
-          else {
-            sub_el.style.width = args[i];
-            sub_el.style.flex = `0 0 auto`;
-          }
+    if (content.children[0].classList.contains("ab-col")) {
+      const sub_els = content.children[0].children;
+      if (sub_els.length == 0) return content;
+      for (let i = 0; i < Math.min(sub_els.length, args.length); i++) {
+        const sub_el = sub_els[i];
+        if (args[i].endsWith("%")) sub_el.style.flex = `0 1 ${args[i]}`;
+        else {
+          sub_el.style.width = args[i];
+          sub_el.style.flex = `0 0 auto`;
         }
-        return content;
-      }
-      case content.children[0].querySelector("table") !== null: {
-        const table = content.children[0].querySelector("table");
-        if (!table) return content;
-        table.style.tableLayout = "fixed";
-        table.style.width = args.some((arg) => arg.endsWith("%")) ? "100%" : "fit-content";
-        table.querySelectorAll("tr").forEach((row) => {
-          for (let i = 0; i < Math.min(row.children.length, args.length); i++) {
-            const cell = row.children[i];
-            cell.style.width = cell.style.minWidth = cell.style.maxWidth = args[i];
-          }
-        });
-        return content;
       }
-      default:
-        return content;
+      return content;
     }
+    const table = content.children[0].querySelector("table");
+    if (table !== null) {
+      table.style.tableLayout = "fixed";
+      table.style.width = args.some((arg) => arg.endsWith("%")) ? "100%" : "fit-content";
+      table.querySelectorAll("tr").forEach((row) => {
+        for (let i = 0; i < Math.min(row.children.length, args.length); i++) {
+          const cell = row.children[i];
+          cell.style.width = cell.style.minWidth = cell.style.maxWidth = args[i];
+        }
+      });
+      return content;
+    }
+    return content;
   }
 });
 ABConvert.factory({
@@ -2599,9 +2549,7 @@ ABConvert.factory({
     const origi_rowCount = origi_rows.length;
     const origi_colCount = origi_rows[0].cells.length;
     const trans_table = document.createElement("table");
-    content.appendChild(trans_table);
-    origi_table.classList.add("ab-transposition");
-    origi_table.classList.add("ab-table");
+    origi_table.classList.add("ab-transposition", "ab-table");
     origi_table.classList.forEach((className) => {
       trans_table.classList.add(className);
     });
@@ -2616,7 +2564,7 @@ ABConvert.factory({
         newCell.innerHTML = oldCell.innerHTML;
       }
     }
-    origi_table.remove();
+    origi_table.innerHTML = trans_table.innerHTML;
     return content;
   }
 });
@@ -2706,9 +2654,7 @@ ABConvert.factory({
       }
     }
     const trans_table = document.createElement("table");
-    content.appendChild(trans_table);
-    origi_table.classList.add("ab-transposition");
-    origi_table.classList.add("ab-table");
+    origi_table.classList.add("ab-transposition", "ab-table");
     origi_table.classList.forEach((className) => {
       trans_table.classList.add(className);
     });
@@ -2728,7 +2674,7 @@ ABConvert.factory({
         newCell.setAttribute("colIndex", String(cell.colIndex));
       }
     }
-    origi_table.remove();
+    origi_table.innerHTML = trans_table.innerHTML;
     return content;
   }
 });
@@ -2824,9 +2770,7 @@ ABConvert.factory({
     }
     const map_table2 = map_table;
     const trans_table = document.createElement("table");
-    content.appendChild(trans_table);
-    origi_table.classList.add("ab-transposition");
-    origi_table.classList.add("ab-table");
+    origi_table.classList.add("ab-transposition", "ab-table");
     origi_table.classList.forEach((className) => {
       trans_table.classList.add(className);
     });
@@ -2846,7 +2790,7 @@ ABConvert.factory({
         newCell.setAttribute("colIndex", String(cell.colIndex));
       }
     }
-    origi_table.remove();
+    origi_table.innerHTML = trans_table.innerHTML;
     return content;
   }
 });
@@ -42576,19 +42520,63 @@ function abSelector_squareInline(md, options) {
     }
   });
 }
-function abSelector_container_vuepress(md, options) {
-  md.use(container_plugin, "AnyBlockContainer", {
-    validate: function(params) {
-      return params.trim().toLowerCase().match(/^anyblock(.*)$/);
-    },
-    render: function(tokens, idx) {
-      var m = tokens[idx].info.trim().toLowerCase().match(/^anyblock(.*)$/);
-      if (tokens[idx].nesting === 1) {
-        return '<details class="any-block-debug"><summary>' + md.utils.escapeHtml(m[1]).trimStart() + "</summary>\n";
-      } else {
-        return "</details>\n";
+function abSelector_container(md, options) {
+  md.block.ruler.before("fence", "AnyBlockMditContainer", (state, startLine, endLine, silent) => {
+    const typeNames = ["mditABDemo"];
+    let start = state.bMarks[startLine];
+    let max = state.eMarks[startLine];
+    if (state.src[start] !== ":") return false;
+    let pos = start + 1;
+    while (pos <= max) {
+      if (state.src[pos] !== ":") break;
+      pos++;
+    }
+    const markerCount = pos - start;
+    if (markerCount < 3) return false;
+    const markup = state.src.slice(start, pos);
+    const ab_mdit_header = state.src.slice(pos, max);
+    if (!typeNames.includes(ab_mdit_header.split("|")[0].trim())) return false;
+    if (silent) return true;
+    const ab_startLine = startLine;
+    let nextLine = startLine;
+    let autoClosed = false;
+    let ab_content = "";
+    while (
+      // unclosed block should be auto closed by end of document.
+      // also block seems to be auto closed by end of parent
+      nextLine < endLine
+    ) {
+      nextLine++;
+      start = state.bMarks[nextLine];
+      max = state.eMarks[nextLine];
+      if (start < max && state.sCount[nextLine] < state.blkIndent)
+        break;
+      if (
+        // match start
+        state.src[start] === ":" && // closing fence should be indented less than 4 spaces
+        state.sCount[nextLine] - state.blkIndent < 4
+      ) {
+        for (pos = start + 1; pos <= max; pos++)
+          if (state.src[pos] !== ":") break;
+        if (pos - start >= markerCount) {
+          pos = state.skipSpaces(pos);
+          if (pos >= max) {
+            autoClosed = true;
+            break;
+          }
+        }
       }
+      ab_content += "\n" + state.src.substring(start, max);
     }
+    state.line = nextLine + (autoClosed ? 1 : 0);
+    const token = state.push("fence", "code", 0);
+    token.info = "AnyBlock";
+    token.content = `[${ab_mdit_header}]
+${ab_content}`;
+    token.map = [ab_startLine, nextLine];
+    token.markup = markup;
+    token.nesting = 0;
+    return true;
   });
 }
 function abRender_fence(md, options) {
@@ -42652,7 +42640,7 @@ function ab_mdit(md, options) {
   });
   ABCSetting.env = "vuepress";
   md.use(abSelector_squareInline);
-  md.use(abSelector_container_vuepress);
+  md.use(abSelector_container);
   md.use(abRender_fence);
 }
 exports.abConvertEvent = abConvertEvent;