qiling-web-markdown 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 炼器师
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,33 @@
-# Temporary Holding Version
+# qiling-web-markdown
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+QiLing Web Markdown 拓展包。可注册渲染器的 Markdown 渲染组件。
+
+## 安装
+
+```bash
+npm install qiling-web qiling-web-markdown
+# 或
+bun add qiling-web qiling-web-markdown
+```
+
+> `qiling-web-markdown` 通过 peer dependency 使用 `qiling-web`，请同时安装核心包。
+
+## 使用
+
+```js
+import 'qiling-web'
+import 'qiling-web-markdown'
+
+// 导入即注册：ql-markdown
+```
+
+组件标签：`ql-markdown`。
+
+## 文档
+
+- [QiLing Web 文档](https://gitee.com/i-o-i/qiling-web)
+- [源码仓库](https://gitee.com/i-o-i/qiling-web)
+
+## License
+
+MIT

package/dist/index.js

@@ -0,0 +1,28 @@
+import{Registry as m}from"qiling-web/internal";import{QlElement as g}from"qiling-web";class r extends g{constructor(){super(...arguments);this.layout={type:"div",ref:"box"};this.actions={sync(){let t=this.$("div");if(!t)return;let o=r.renderers.get(r.defaultRenderer);if(!o){t.textContent=`未注册 Markdown 渲染器：${r.defaultRenderer}`;return}t.innerHTML=o(this.getProp("source")),r.wrapOverflow(t)}}}static renderers=new Map;static{r.register("simple",r.simpleRenderer)}static register(t,o){r.renderers.set(t,o)}static use(t){if(!r.renderers.has(t))throw Error(`未注册的 Markdown 渲染器：${t}`);r.defaultRenderer=t}static markdownRenderers(){return[...r.renderers.keys()]}static defaultRenderer="simple";static tag="ql-markdown";static props={source:{type:"string",default:"",description:"Markdown 原文"}};static styles=`
+    :host { display: block; font-size: var(--ql-font-size-md); line-height: 1.75; color: var(--ql-color-fg); }
+    :where(h1, h2, h3, h4, h5, h6) { margin: 16px 0 8px; line-height: 1.35; }
+    :where(h1) { font-size: var(--ql-font-size-2xl); }
+    :where(h2) { font-size: var(--ql-font-size-xl); padding-bottom: 6px; border-bottom: 1px solid var(--ql-color-border); }
+    :where(h3) { font-size: var(--ql-font-size-lg); }
+    :where(p) { margin: 0 0 12px; }
+    :where(ul, ol) { margin: 0 0 12px; padding-left: 22px; }
+    :where(li) { margin-bottom: 4px; }
+    :where(code) {
+      padding: 1px 5px;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      font-size: .9em;
+      background: var(--ql-color-bg-subtle);
+      border-radius: var(--ql-radius-sm);
+    }
+    :where(pre) { margin: 0 0 12px; padding: var(--ql-space-3); overflow-x: auto; background: var(--ql-color-bg-subtle); border-radius: var(--ql-radius-md); }
+    :where(pre code) { padding: 0; background: none; }
+    :where(blockquote) { margin: 0 0 12px; padding: 4px 14px; color: var(--ql-color-fg-muted); border-left: 3px solid var(--ql-color-border-strong); }
+    :where(a) { color: var(--ql-color-primary); }
+    :where(hr) { margin: 18px 0; border: 0; border-top: 1px solid var(--ql-color-border); }
+    :where(table) { width: 100%; margin: 0 0 12px; border-collapse: collapse; font-size: var(--ql-font-size-sm); }
+    :where(th, td) { padding: 6px 10px; text-align: left; border: 1px solid var(--ql-color-border); }
+    :where(th) { background: var(--ql-color-bg-subtle); }
+  `;static effects={source(){this.actions.sync()}};static wrapOverflow(t){for(let o of t.querySelectorAll("pre, table")){if(o.parentElement?.tagName.toLowerCase()==="ql-scroll")continue;let e=document.createElement("ql-scroll");e.setAttribute("axis","x"),e.setAttribute("padding","none"),o.style.width="max-content",o.style.minWidth="100%",o.replaceWith(e),e.append(o)}}static simpleRenderer(t){let o=t.split(/\r?\n/),e=[],n=null,p=null,d=[],s=()=>{if(p)e.push(`</${p}>`),p=null},h=()=>{if(!d.length)return;let i=d.map((l)=>l.replace(/^\||\|$/g,"").split("|").map((c)=>c.trim())),[a,,...u]=i;if(a){e.push("<table><thead><tr>");for(let l of a)e.push(`<th>${r.inline(l)}</th>`);e.push("</tr></thead><tbody>");for(let l of u){e.push("<tr>");for(let c of l)e.push(`<td>${r.inline(c)}</td>`);e.push("</tr>")}e.push("</tbody></table>")}d=[]};for(let i of o){if(/^\s*```/.test(i)){if(h(),s(),n)e.push(`<pre><code>${r.escapeHtml(n.join(`
+`))}</code></pre>`),n=null;else n=[];continue}if(n){n.push(i);continue}if(/^\s*\|.*\|\s*$/.test(i)){s(),d.push(i.trim());continue}if(h(),!i.trim()){s();continue}let a=/^(#{1,6})\s+(.*)$/.exec(i);if(a){s();let f=a[1].length;e.push(`<h${f}>${r.inline(a[2])}</h${f}>`);continue}if(/^\s*([-*_])\s*\1\s*\1[\s-*_]*$/.test(i)){s(),e.push("<hr/>");continue}let u=/^\s*>\s?(.*)$/.exec(i);if(u){s(),e.push(`<blockquote>${r.inline(u[1])}</blockquote>`);continue}let l=/^\s*[-*+]\s+(.*)$/.exec(i);if(l){if(p!=="ul")s(),e.push("<ul>"),p="ul";e.push(`<li>${r.inline(l[1])}</li>`);continue}let c=/^\s*\d+\.\s+(.*)$/.exec(i);if(c){if(p!=="ol")s(),e.push("<ol>"),p="ol";e.push(`<li>${r.inline(c[1])}</li>`);continue}s(),e.push(`<p>${r.inline(i)}</p>`)}if(h(),s(),n)e.push(`<pre><code>${r.escapeHtml(n.join(`
+`))}</code></pre>`);return e.join(`
+`)}static inline(t){return r.escapeHtml(t).replace(/`([^`]+)`/g,"<code>$1</code>").replace(/\*\*([^*]+)\*\*/g,"<strong>$1</strong>").replace(/(^|[^*])\*([^*]+)\*/g,"$1<em>$2</em>").replace(/\[([^\]]+)\]\(([^)\s]+)\)/g,'<a href="$2" target="_blank" rel="noreferrer">$1</a>')}static escapeHtml(t){return t.replace(/[&<>"]/g,(o)=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"})[o])}}m.define(r);export{r as QlMarkdown};

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+import { QlMarkdown } from './ql-markdown';
+export { QlMarkdown };
+export type { MarkdownRenderer } from './types';

package/dist/types/ql-markdown.d.ts

@@ -0,0 +1,47 @@
+import type { EffectMap } from 'qiling-web';
+import type { GroupMethod } from 'qiling-web';
+import { QlElement } from 'qiling-web';
+import type { PropSchema } from 'qiling-web';
+import type { MarkdownRenderer } from './types';
+/**
+ * Markdown 渲染（**适配层**）。
+ *
+ * 内置一个极简渲染器（零依赖，覆盖标题/列表/代码块/引用/行内样式/链接）；
+ * 需要完整 CommonMark、表格、脚注时，用 `registerMarkdownRenderer` 接 markdown-it，**页面不用改**。
+ *
+ * 安全：**内置渲染器对原文一律转义**，只输出受控标签；接入外部渲染器时应自行 sanitize。
+ */
+export declare class QlMarkdown extends QlElement {
+    private static readonly renderers;
+    /** 注册渲染器 */
+    static register(name: string, renderer: MarkdownRenderer): void;
+    /** 切换全局渲染器（需先注册） */
+    static use(name: string): void;
+    static markdownRenderers(): string[];
+    private static defaultRenderer;
+    static tag: string;
+    static props: PropSchema;
+    source: string;
+    static styles: string;
+    /** 内部结构：一个容器（渲染结果由 `actions.sync` 注入） */
+    layout: {
+        type: string;
+        ref: string;
+    };
+    /** `source` 变化 → 重算（挂载时也会执行一次，故动作幂等） */
+    static effects: EffectMap;
+    /** 3. 操作：业务动作。**不挂 `Ql.desc()` 即内部方法**，不对外暴露 */
+    actions: Record<string, GroupMethod>;
+    private static wrapOverflow;
+    private static simpleRenderer;
+    /** 行内样式：先转义，再套受控标签 */
+    private static inline;
+    private static escapeHtml;
+}
+/**
+ * 代码块与表格的**横向滚动**交给 ql-scroll。
+ *
+ * 原生滚动条在 Shadow DOM 内无法自绘（::-webkit-scrollbar 对 shadow 内的滚动容器
+ * 不生效，实测踩到），只能退回浏览器默认的 15px 粗条，与 ql-scroll 的 4px 胶囊滑块
+ * 对不上。包一层 ql-scroll 后，横向滚动条与页面其余部分完全一致。
+ */

package/dist/types/types.d.ts

@@ -0,0 +1,2 @@
+/** Markdown 渲染器 */
+export type MarkdownRenderer = (source: string) => string;

package/package.json

@@ -1,6 +1,57 @@
 {
   "name": "qiling-web-markdown",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "QiLing UI 拓展组件：Markdown 渲染",
+  "type": "module",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "sideEffects": [
+    "./dist/index.js"
+  ],
+  "peerDependencies": {
+    "qiling-web": "^0.1.1"
+  },
+  "devDependencies": {
+    "qiling-web": "workspace:*"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "bun run clean && bun run build:ui && bun run build:types",
+    "build:ui": "bun build src/index.ts --outdir=dist --target=browser --format=esm --minify --splitting --entry-naming=index.js --chunk-naming=chunk-[hash].js --min-chunk-size=16384 --external qiling-web --external qiling-web/internal",
+    "build:types": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "prepublishOnly": "bun run build && bun run typecheck"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitee.com/i-o-i/qiling-web.git",
+    "directory": "packages/qiling-web-markdown"
+  },
+  "homepage": "https://gitee.com/i-o-i/qiling-web",
+  "bugs": {
+    "url": "https://gitee.com/i-o-i/qiling-web/issues"
+  },
+  "keywords": [
+    "qiling",
+    "qiling-web",
+    "web-components",
+    "ui",
+    "framework"
+  ],
+  "author": {
+    "name": "炼器师"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}