@anyblock/remark-any-block 1.0.0-beta1

package/README.md

@@ -0,0 +1,41 @@
+# AnyBlock Remark Plugin
+
+## remark-any-block 使用
+
+详见 github *any-block* 组织下的 *Remark Demo* 仓库
+
+暂时不属于完全通用的 Remark 插件 (doing, 或者你自己改改), 当前该插件测试于 Quartz V4 版本
+
+## 构建
+
+构建就简单的 `pnpm build`
+
+(仅自用) 构建、上传npm:
+
+```bash
+# $ pnpm build # 设置了prepublishOnly，不需要先手动编译。但是你可以手动执行这一步，来检查编译是否正常
+
+$ npm adduser  # 先登录，在vscode里他会让我打开浏览器来登录
+Username: ...
+Password: ...
+
+$ npm publish  # 上传 (注意不要重名、npm账号可能需要邮箱验证)
+               # 如果设置了 package.json::script.prepublishOnly，会先执行 (一般是build)
+               # 这一步会将当前文件夹内容都上传到npm中名为 `<package.json 里 name@version>` 的包里
+               # 如果没有对应包，会自动创建
+
+# or 或
+$ npm publish --tag beta  # 如果使用测试或beta版本 (包含 `-tagname`)，如 `-beta` 
+                          # 需要 添加 `--tag <tagname>`，如 `--tag beta`
+```
+
+> [!warning]
+> 补丁: 2025-12-09 开始不再能使用长期验证方式，得用 `npm login`
+> 
+> 否则报错: 
+> ```bash
+> npm error code E403
+> npm error 403 403 Forbidden - PUT https://registry.npmjs.org/... - Two-factor authentication or granular access token with bypass 2fa enabled is required to publish packages.
+> ```
+> 
+> 详见: https://github.blog/changelog/2025-12-09-npm-classic-tokens-revoked-session-based-auth-and-cli-token-management-now-available/

package/anyblock.ts

@@ -0,0 +1,261 @@
+// import { unified } from 'unified';
+// import remarkParse from 'remark-parse';
+// import remarkRehype from 'remark-rehype';
+// import rehypeStringify from 'rehype-stringify';
+
+// import { remove } from "unist-util-remove"
+import { Plugin } from "unified"
+import { Root, RootContent, Paragraph, Text, Code, Html } from "mdast"
+import type { VFile } from "vfile"
+import { toMarkdown } from "mdast-util-to-markdown"
+import { visit } from "unist-util-visit"
+
+// 这里不想去依赖 Quartz 项目，所以用any。但是你可以去看具体的类型定义
+// import { type QuartzTransformerPlugin } from "../types"
+// import { type BuildCtx } from "../../util/ctx"
+type QuartzTransformerPlugin = any
+type BuildCtx = any
+
+// 1. Markdown-it
+import MarkdownIt from "markdown-it"
+const md = new MarkdownIt({
+  html: true, // 启用 HTML 标签解析
+  breaks: true // 将换行符转换为 <br> 标签
+})
+
+// 2. AnyBlock
+import { ABConvertManager } from "../ABConverter/ABConvertManager"
+import { ABCSetting, ABReg } from "../ABConverter/ABReg"
+import "../ABConverter/converter/abc_text"
+import "../ABConverter/converter/abc_code"
+import "../ABConverter/converter/abc_list"
+import "../ABConverter/converter/abc_c2list"
+import "../ABConverter/converter/abc_table"
+import "../ABConverter/converter/abc_dir_tree"
+import "../ABConverter/converter/abc_deco"
+import "../ABConverter/converter/abc_ex"
+import "../ABConverter/converter/abc_mdit_container"
+import "../ABConverter/converter/abc_echarts"
+import "../ABConverter/converter/abc_plantuml" // 可选建议：
+import "../ABConverter/converter/abc_mermaid"  // 可选建议：新版无额外依赖，旧版非 min 环境下 7.1MB
+import "../ABConverter/converter/abc_markmap"  // 可选建议：1.3MB
+
+import { jsdom_init } from "./jsdom_init"
+jsdom_init()
+
+/**
+ * 大部分选项是为了与 markdown-it 版本保持一致而保留的。
+ * 目前这些选项未被使用，但已预留用于未来的行为切换。
+ */
+export interface AnyBlockOptions {
+  // multiline: boolean;
+  // rowspan: boolean;
+  // headerless: boolean;
+  // multibody: boolean;
+  // autolabel: boolean;
+}
+
+/**
+ * 检测 `[header]` 段落
+ */
+function matchAbHeader(node: RootContent): string | null {
+  if (node.type !== "paragraph") return null;
+  const text = (node.children as RootContent[])
+    .map((c) => (c.type === "text" ? (c as Text).value : ""))
+    .join("");
+  const m = text.match(ABReg.reg_header);
+  return m && m[1] ? m[1] : null;
+}
+
+/**
+ * 检测 `:::container` 段落
+ * 匹配时返回 `{flag, type}`
+ */
+function matchContainerStart(node: RootContent):
+  | { flag: string; type: string }
+  | null {
+  if (node.type !== "paragraph") return null;
+  const text = (node.children as RootContent[])
+    .map((c) => (c.type === "text" ? (c as Text).value : ""))
+    .join("")
+    .trim();
+  const m = text.match(ABReg.reg_mdit_head);
+  if (!m || !m[3] || !m[4]) return null;
+  return { flag: m[3], type: m[4] };
+}
+
+/**
+ * 检测到一个 `:::` 结尾的段落
+ */
+function isContainerEnd(node: RootContent, flag: string): boolean {
+  if (node.type !== "paragraph") return false;
+  const text = (node.children as RootContent[])
+    .map((c) => (c.type === "text" ? (c as Text).value : ""))
+    .join("")
+    .trim();
+  return text === flag;
+}
+
+/**
+ * 将一组 mdast 节点序列化为 markdown 格式
+ */
+function nodesToMarkdown(nodes: RootContent[]): string {
+  return toMarkdown(
+    { type: "root", children: nodes } as unknown as Root,
+    { listItemIndent: "one" }
+  ).trimEnd();
+}
+
+/**
+ * remark 插件: 将任何特殊的 AnyBlock 语法转换为带有 `lang = "AnyBlock"` 属性的“代码”节点。
+ *
+ * - `[header]` + (list|heading|code|blockquote|table...)
+ * - `:::type ... :::`
+ */
+export const remark_anyblock_to_codeblock: Plugin<[Partial<AnyBlockOptions>?], Root> =
+  (_options = {}) =>
+  (tree) => {
+    const out: RootContent[] = [];
+    const children = [...tree.children] as RootContent[];
+
+    for (let i = 0; i < children.length; i++) {
+      const node = children[i];
+
+      // --- square-inline header flow ---
+      const header = matchAbHeader(node);
+      if (header) {
+        const body: RootContent[] = [];
+        let j = i + 1;
+        for (; j < children.length; j++) {
+          const n = children[j];
+          if (
+            n.type === "list" ||
+            n.type === "heading" ||
+            n.type === "code" ||
+            n.type === "blockquote" ||
+            n.type === "table"
+          ) {
+            body.push(n);
+            continue;
+          }
+          // stop when first non-matching block is hit
+          break;
+        }
+        if (body.length > 0) {
+          const codeValue = `[${header}]\n${nodesToMarkdown(body)}`;
+          out.push({
+            type: "code",
+            lang: "AnyBlock",
+            value: codeValue,
+            data: { markup: "[]" },
+          } as Code);
+          i = j - 1;
+          continue;
+        }
+      }
+
+      // --- ::: container flow ---
+      const container = matchContainerStart(node);
+      if (container) {
+        const body: RootContent[] = [];
+        let j = i + 1;
+        for (; j < children.length; j++) {
+          const n = children[j];
+          if (isContainerEnd(n, container.flag)) {
+            break;
+          }
+          body.push(n);
+        }
+        if (j < children.length) {
+          const codeValue = `[${container.type}]\n${nodesToMarkdown(body)}`;
+          out.push({
+            type: "code",
+            lang: "AnyBlock",
+            value: codeValue,
+            data: { markup: container.flag },
+          } as Code);
+          i = j; // skip closing line
+          continue;
+        }
+      }
+
+      // default passthrough
+      out.push(node);
+    }
+
+    (tree as Root).children = out;
+  }
+
+// 渲染 anyblock 代码块
+const remark_anyblock_render_codeblock = () => {
+  return (tree: Root, _file: VFile) => {
+    visit(tree, "code", (node: Code, index: number|undefined, parent: any|undefined) => { // 遍历所有的 code 类型节点
+      console.log("\nanyblock codeblock transformer visit:", node)
+      if (node.lang != "anyblock") return
+      if (!parent || !index) return
+
+      const lines = node.value.split("\n")
+      const head = lines.shift()
+      const headerMatch = head?.match(/\[(.*)\]/)
+      if (!headerMatch) return
+
+      const header = headerMatch[1];
+      const content = lines.join("\n").trimStart();
+      const markup = (node.data as any)?.markup ?? ""
+
+      const el: HTMLDivElement = document.createElement("div");
+      el.classList.add("ab-note", "drop-shadow");
+      ABConvertManager.autoABConvert(el, header, content, markup.startsWith(":::") ? "mdit" : "");
+
+      // new node
+      console.log("\nanyblock codeblock transformer visit2:", header, 'c==', content)
+      console.log("\nanyblock codeblock transformer visit3:", el.outerHTML, el)
+      const new_node: Html = {
+        type: 'html',
+        value: el.outerHTML,
+      }
+      parent.children.splice(index, 1, new_node)
+      // return 'skip'
+    })
+  }
+}
+
+{
+  // 定义环境条件
+  ABCSetting.env = "markdown-it"; // remark
+
+  // 定义默认渲染行为 // [!code hl] risk 同步适配异步，可能会存在问题
+  ABConvertManager.getInstance().redefine_renderMarkdown((markdown: string, el: HTMLElement):void => {
+    el.classList.add("markdown-rendered")
+    // el.textContent = markdown.replace('\n', '<br>'); return; // TODO 临时
+
+    // 只能阻塞
+    // const file = unified()
+    //   .use(remarkParse)
+    //   .use(remarkRehype)
+    //   .use(rehypeStringify);
+    // const file2: VFile = await file.process(markdown);
+    // const result: string = String(file);
+
+    const result = md.render(markdown);
+
+    // console.log('re-renderMarkdown:', markdown, '===>', result)
+    const el_child = document.createElement("div"); el.appendChild(el_child); el_child.innerHTML = result;
+  })
+}
+
+// 这是 Quartz 的 Transformer 插件定义
+export const transformer_anyblock: QuartzTransformerPlugin = (/*options: any*/) => {
+  return {
+    name: "AnyBlock",
+    markdownPlugins(_ctx: BuildCtx) {
+      return [
+        // remark_anyblock_to_codeblock,
+        remark_anyblock_render_codeblock, // last
+      ]
+    },
+    htmlPlugins(_ctx: BuildCtx) {
+      return []
+    }
+  }
+}

package/index.ts

@@ -0,0 +1,5 @@
+// JsDom。仅用于提供document对象支持 (如果Ob环境中则不需要，用ob自带document对象的)
+export { jsdom_init } from './jsdom_init'
+export { transformer_anyblock } from './anyblock'
+export { abConvertEvent } from '../ABConverter/ABConvertEvent'
+export { ABConvertManager } from '../ABConverter/ABConvertManager' // for client

package/jsdom_init.ts

@@ -0,0 +1,30 @@
+/**
+ * 初始化JSDOM
+ * 
+ * JsDom。仅用于提供document对象支持 (如果Ob等客户端渲染环境中则不需要，服务端渲染则需要)
+ */
+
+// import jsdom from "jsdom"
+
+export async function jsdom_init() {
+  const { default: jsdom } = await import('jsdom') // 废弃，要同步，避免docuemnt初始化不及时
+  const { JSDOM } = jsdom
+  const dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`, {
+    url: 'http://localhost/', // @warn 若缺少该行，则在mdit+build环境下，编译报错
+  });
+  global.Storage = dom.window.Storage;
+  global.window = dom.window as any
+  global.history = dom.window.history // @warn 若缺少该行，则在mdit+build环境下，编译报错：ReferenceError: history is not defined
+  global.document = dom.window.document
+  global.Node = dom.window.Node
+  global.NodeList = dom.window.NodeList
+  global.HTMLElement = dom.window.HTMLElement
+  global.HTMLDivElement = dom.window.HTMLDivElement
+  global.HTMLPreElement = dom.window.HTMLPreElement
+  global.HTMLQuoteElement = dom.window.HTMLQuoteElement
+  global.HTMLTableElement = dom.window.HTMLTableElement
+  global.HTMLUListElement = dom.window.HTMLUListElement
+  global.HTMLScriptElement = dom.window.HTMLScriptElement
+  dom.window.scrollTo = ()=>{} // @warn 若缺少该行，编译警告：Error: Not implemented: window.scrollTo
+  global.MutationObserver = dom.window.MutationObserver
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@anyblock/remark-any-block",
+  "version": "1.0.0-beta1",
+  "description": "You can flexibility to create a 'Block' by many means. It also provides many useful features, like `list to table`.",
+  "main": "index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "pnpm build_vite",
+    "build_vite": "pnpm copy_abc_style && vite build",
+    "prepublishOnly": "pnpm build",
+    "copy_abc_style": "copyfiles --flat ../../src/ABConverter/style/styles.css ./"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "packageManager": "pnpm@10.10.0",
+  "dependencies": {
+    "markdown-it": "^14.1.0",
+    "mdast": "^3.0.0",
+    "mdast-util-to-markdown": "^2.1.2",
+    "tslib": "^2.8.1",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0",
+    "vfile": "^6.0.3"
+  },
+  "devDependencies": {
+    "@types/jsdom": "^21.1.7",
+    "@types/markdown-it": "^14.1.2",
+    "copyfiles": "^2.4.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.7"
+  }
+}