@yh-ui/components 1.0.9 → 1.0.16

package/dist/ai-artifacts/src/ai-artifacts.css

@@ -461,6 +461,8 @@ html.dark {
   flex-direction: column;
   z-index: 1001;
   overflow: hidden;
+  container-type: inline-size;
+  container-name: ai-artifacts;
   /* Theme adjustments */
   background: var(--yh-ai-artifacts-bg-color, var(--yh-bg-color-overlay));
   /* Inline mode */
@@ -626,6 +628,38 @@ html.dark {
   justify-content: space-between;
 }
 
+@container ai-artifacts (max-width: 720px) {
+  .yh-ai-artifacts__header {
+    flex-wrap: wrap;
+    gap: 12px;
+    align-items: flex-start;
+  }
+  .yh-ai-artifacts__actions {
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+  .yh-ai-artifacts__tabs {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+}
+@container ai-artifacts (max-width: 520px) {
+  .yh-ai-artifacts__tab {
+    flex: 1 1 0;
+    text-align: center;
+  }
+  .yh-ai-artifacts__version-bar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .yh-ai-artifacts__footer {
+    flex-direction: column;
+    gap: 4px;
+    align-items: flex-start;
+  }
+}
+
 .yh-slide-right-enter-active,
 .yh-slide-right-leave-active {
   transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

package/dist/ai-artifacts/src/ai-artifacts.vue

@@ -11,6 +11,7 @@ import { YhSpin } from "../../spin";
 import { useComponentTheme } from "@yh-ui/theme";
 import hljs from "../../highlight";
 import "highlight.js/styles/atom-one-dark.css";
+import { sanitizeHighlightedHtml } from "../../sanitize";
 defineOptions({
   name: "YhAiArtifacts"
 });
@@ -24,6 +25,7 @@ const { themeStyle } = useComponentTheme(
 );
 const internalMode = ref(props.mode);
 const currentVersionState = ref(props.data?.currentVersion || "");
+const escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 const echartsRef = ref(null);
 const echartsInstance = shallowRef(null);
 const echartsLoading = ref(false);
@@ -94,12 +96,14 @@ const highlightedCode = computed(() => {
   if (type === "echarts") lang = "json";
   if (lang && hljs.getLanguage(lang)) {
     try {
-      return hljs.highlight(content, { language: lang, ignoreIllegals: true }).value;
+      return sanitizeHighlightedHtml(
+        hljs.highlight(content, { language: lang, ignoreIllegals: true }).value
+      );
     } catch {
-      return content;
+      return sanitizeHighlightedHtml(escapeHtml(content));
     }
   }
-  return hljs.highlightAuto(content).value;
+  return sanitizeHighlightedHtml(hljs.highlightAuto(content).value);
 });
 const initECharts = async () => {
   const chartType = props.data?.type;
@@ -803,6 +807,8 @@ html.dark {
   flex-direction: column;
   z-index: 1001;
   overflow: hidden;
+  container-type: inline-size;
+  container-name: ai-artifacts;
   /* Theme adjustments */
   background: var(--yh-ai-artifacts-bg-color, var(--yh-bg-color-overlay));
   /* Inline mode */
@@ -968,6 +974,38 @@ html.dark {
   justify-content: space-between;
 }
 
+@container ai-artifacts (max-width: 720px) {
+  .yh-ai-artifacts__header {
+    flex-wrap: wrap;
+    gap: 12px;
+    align-items: flex-start;
+  }
+  .yh-ai-artifacts__actions {
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+  .yh-ai-artifacts__tabs {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+}
+@container ai-artifacts (max-width: 520px) {
+  .yh-ai-artifacts__tab {
+    flex: 1 1 0;
+    text-align: center;
+  }
+  .yh-ai-artifacts__version-bar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .yh-ai-artifacts__footer {
+    flex-direction: column;
+    gap: 4px;
+    align-items: flex-start;
+  }
+}
+
 .yh-slide-right-enter-active,
 .yh-slide-right-leave-active {
   transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

package/dist/ai-bubble/src/ai-bubble.vue

@@ -21,6 +21,7 @@ import { YhAiThoughtChain } from "../../ai-thought-chain";
 import MarkdownIt from "../../markdown-it";
 import hljs from "../../highlight";
 import "highlight.js/styles/atom-one-dark.css";
+import { sanitizeHighlightedHtml, sanitizeMarkup, sanitizeSvgMarkup } from "../../sanitize";
 defineOptions({
   name: "YhAiBubble"
 });
@@ -65,6 +66,28 @@ const escapeHtml = (str) => {
   };
   return str.replace(/[&<>"']/g, (char) => htmlEntities[char]);
 };
+const sanitizeBubbleHtml = (html) => {
+  if (!props.enableSanitizer) {
+    return html;
+  }
+  return sanitizeMarkup(html, {
+    allowedTags: [.../* @__PURE__ */ new Set([...props.allowedTags, "button", "sub", "sup"])],
+    allowedAttributes: [
+      .../* @__PURE__ */ new Set([
+        ...props.allowedAttributes,
+        "aria-label",
+        "data-code",
+        "data-id",
+        "data-lang",
+        "data-latex",
+        "role",
+        "tabindex"
+      ])
+    ],
+    allowedSchemes: props.allowedSchemes,
+    sanitizer: props.sanitizer
+  });
+};
 const getFileIcon = (url = "") => {
   const ext = url.split(".").pop()?.toLowerCase() || "";
   switch (ext) {
@@ -103,7 +126,7 @@ const initMermaid = async () => {
     mermaidModule.default.initialize({
       startOnLoad: false,
       theme: "default",
-      securityLevel: "loose",
+      securityLevel: "strict",
       flowchart: { curve: "basis", padding: 15 },
       sequence: { actorMargin: 50, boxMargin: 10 }
     });
@@ -117,18 +140,18 @@ const _renderMermaid = async (code) => {
   if (!mermaidModule) {
     await initMermaid();
   }
-  if (!mermaidModule) return `<pre class="mermaid-error">${code}</pre>`;
+  if (!mermaidModule) return `<pre class="mermaid-error">${escapeHtml(code)}</pre>`;
   mermaidLoading.value = true;
   mermaidError.value = null;
   try {
     const id = `mermaid-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
     const { svg } = await mermaidModule.default.render(id, code);
     mermaidLoading.value = false;
-    return svg;
+    return sanitizeSvgMarkup(svg);
   } catch (e) {
     mermaidLoading.value = false;
     mermaidError.value = e instanceof Error ? e.message : "Failed to render mermaid diagram";
-    return `<pre class="mermaid-error">${code}</pre>`;
+    return `<pre class="mermaid-error">${escapeHtml(code)}</pre>`;
   }
 };
 const expandedCodeBlocks = ref(/* @__PURE__ */ new Set());
@@ -445,7 +468,7 @@ const runCode = async (code, lang, id) => {
   }
   const triggerRender = () => {
     if (props.markdown && mdi.value && props.content) {
-      parsedContent.value = mdi.value.render(props.content);
+      parsedContent.value = sanitizeBubbleHtml(mdi.value.render(props.content));
     }
   };
   triggerRender();
@@ -462,7 +485,7 @@ const explainCode = async (code, lang) => {
   }
   return "";
 };
-const parsedContent = ref(props.content);
+const parsedContent = ref("");
 let renderRafId = null;
 let streamTimer = null;
 let streamPosition = 0;
@@ -567,12 +590,14 @@ const jsonHtml = computed(() => {
     const rawData = props.structuredData.data;
     const jsonString = typeof rawData === "string" ? rawData : JSON.stringify(rawData, null, 2);
     if (hljs.getLanguage("json")) {
-      return hljs.highlight(jsonString, {
-        language: "json",
-        ignoreIllegals: true
-      }).value;
+      return sanitizeHighlightedHtml(
+        hljs.highlight(jsonString, {
+          language: "json",
+          ignoreIllegals: true
+        }).value
+      );
     }
-    return jsonString;
+    return sanitizeHighlightedHtml(escapeHtml(jsonString));
   } catch (e) {
     console.warn("Failed to render JSON structured data:", e);
     return "";
@@ -831,13 +856,13 @@ const streamRender = (fullContent, mode, speed, interval) => {
     if (streamPosition < chunks.length) {
       streamBuffer += chunks[streamPosition];
       streamPosition++;
-      parsedContent.value = props.markdown && mdi.value ? mdi.value.render(streamBuffer) : streamBuffer;
+      parsedContent.value = props.markdown && mdi.value ? sanitizeBubbleHtml(mdi.value.render(streamBuffer)) : streamBuffer;
     } else {
       if (streamTimer) {
         clearInterval(streamTimer);
         streamTimer = null;
       }
-      parsedContent.value = props.markdown && mdi.value ? mdi.value.render(fullContent) : fullContent;
+      parsedContent.value = props.markdown && mdi.value ? sanitizeBubbleHtml(mdi.value.render(fullContent)) : fullContent;
       if (props.onStreamComplete) {
         props.onStreamComplete();
       }
@@ -856,7 +881,7 @@ watch(
         cancelAnimationFrame(renderRafId);
         renderRafId = null;
       }
-      parsedContent.value = props.markdown && mdi.value ? mdi.value.render(newContent || "") : newContent;
+      parsedContent.value = props.markdown && mdi.value ? sanitizeBubbleHtml(mdi.value.render(newContent || "")) : newContent;
       return;
     }
     if (props.streaming && props.typing) {
@@ -864,12 +889,12 @@ watch(
       return;
     }
     if (typeof requestAnimationFrame === "undefined") {
-      parsedContent.value = mdi.value ? mdi.value.render(newContent || "") : newContent;
+      parsedContent.value = mdi.value ? sanitizeBubbleHtml(mdi.value.render(newContent || "")) : newContent;
       return;
     }
     if (renderRafId) return;
     renderRafId = requestAnimationFrame(() => {
-      parsedContent.value = mdi.value ? mdi.value.render(newContent || "") : newContent;
+      parsedContent.value = mdi.value ? sanitizeBubbleHtml(mdi.value.render(newContent || "")) : newContent;
       renderRafId = null;
     });
   },

package/dist/ai-code-block/src/ai-code-block.css

@@ -465,6 +465,8 @@ html.dark {
   box-shadow: var(--yh-ai-code-block-shadow);
   font-family: var(--yh-font-family-mono);
   font-size: 14px;
+  container-type: inline-size;
+  container-name: ai-code-block;
 }
 .yh-ai-code-block__header {
   display: flex;
@@ -609,4 +611,42 @@ html.dark {
 
 .yh-ai-code-block.is-editing .yh-ai-code-block__header {
   background-color: #2d2d2d;
+}
+
+@container ai-code-block (max-width: 560px) {
+  .yh-ai-code-block__header {
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: flex-start;
+  }
+  .yh-ai-code-block__actions {
+    width: 100%;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    row-gap: 4px;
+  }
+  .yh-ai-code-block__line-numbers {
+    min-width: 32px;
+    padding: 12px 0;
+  }
+  .yh-ai-code-block__content {
+    padding: 12px 0;
+  }
+  .yh-ai-code-block__line {
+    padding: 0 12px;
+  }
+  .yh-ai-code-block__line.is-active {
+    padding-left: 10px;
+  }
+}
+@container ai-code-block (max-width: 420px) {
+  .yh-ai-code-block__header {
+    padding: 8px 12px;
+  }
+  .yh-ai-code-block__body {
+    font-size: 13px;
+  }
+  .yh-ai-code-block__editor-wrapper {
+    padding: 8px;
+  }
 }

package/dist/ai-code-block/src/ai-code-block.vue

@@ -8,6 +8,7 @@ import "highlight.js/styles/atom-one-dark.css";
 import { aiCodeBlockProps, aiCodeBlockEmits } from "./ai-code-block";
 import { useComponentTheme } from "@yh-ui/theme";
 import YhAiCodeEditor from "../../ai-code-editor";
+import { sanitizeHighlightedHtml } from "../../sanitize";
 defineOptions({
   name: "YhAiCodeBlock"
 });
@@ -21,6 +22,9 @@ function normalizeCodeLines(code) {
   if (!code) return "";
   return code.replace(/\\n/g, "\n").trim();
 }
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
 const copied = ref(false);
 const collapsed = ref(props.defaultCollapsed);
 const isEditing = ref(false);
@@ -50,7 +54,7 @@ const lineCount = computed(() => {
 });
 const highlightedCodeLines = computed(() => {
   if (!normalizedCode.value) return [];
-  let html = normalizedCode.value;
+  let html = escapeHtml(normalizedCode.value);
   try {
     if (props.highlight) {
       if (props.language && hljs.getLanguage(props.language)) {
@@ -67,7 +71,9 @@ const highlightedCodeLines = computed(() => {
   }
   return html.split("\n").map((line, idx) => {
     const isHighlighted = props.highlightLines.includes(idx + 1);
-    return `<div class="${ns.e("line")} ${isHighlighted ? "is-active" : ""}">${line === "" ? " " : line}</div>`;
+    return sanitizeHighlightedHtml(
+      `<div class="${ns.e("line")} ${isHighlighted ? "is-active" : ""}">${line === "" ? " " : line}</div>`
+    );
   });
 });
 const handleCopy = async () => {
@@ -663,6 +669,8 @@ html.dark {
   box-shadow: var(--yh-ai-code-block-shadow);
   font-family: var(--yh-font-family-mono);
   font-size: 14px;
+  container-type: inline-size;
+  container-name: ai-code-block;
 }
 .yh-ai-code-block__header {
   display: flex;
@@ -808,4 +816,42 @@ html.dark {
 .yh-ai-code-block.is-editing .yh-ai-code-block__header {
   background-color: #2d2d2d;
 }
+
+@container ai-code-block (max-width: 560px) {
+  .yh-ai-code-block__header {
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: flex-start;
+  }
+  .yh-ai-code-block__actions {
+    width: 100%;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    row-gap: 4px;
+  }
+  .yh-ai-code-block__line-numbers {
+    min-width: 32px;
+    padding: 12px 0;
+  }
+  .yh-ai-code-block__content {
+    padding: 12px 0;
+  }
+  .yh-ai-code-block__line {
+    padding: 0 12px;
+  }
+  .yh-ai-code-block__line.is-active {
+    padding-left: 10px;
+  }
+}
+@container ai-code-block (max-width: 420px) {
+  .yh-ai-code-block__header {
+    padding: 8px 12px;
+  }
+  .yh-ai-code-block__body {
+    font-size: 13px;
+  }
+  .yh-ai-code-block__editor-wrapper {
+    padding: 8px;
+  }
+}
 </style>

package/dist/ai-mermaid/src/ai-mermaid.cjs

@@ -4,6 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.aiMermaidProps = exports.aiMermaidEmits = void 0;
+exports.buildMermaidRenderSource = buildMermaidRenderSource;
+function buildMermaidRenderSource(code, config) {
+  const configStr = JSON.stringify({
+    ...(config || {}),
+    securityLevel: "strict"
+  });
+  return `%%{init: ${configStr}}%%
+${code}`;
+}
 const aiMermaidProps = exports.aiMermaidProps = {
   /** Mermaid 代码内容 */
   code: {

package/dist/ai-mermaid/src/ai-mermaid.css

@@ -466,6 +466,8 @@ html.dark {
   border-radius: 8px;
   overflow: hidden;
   box-sizing: border-box;
+  container-type: inline-size;
+  container-name: ai-mermaid;
 }
 .yh-ai-mermaid__header {
   display: flex;
@@ -590,6 +592,38 @@ html.dark {
   color: #f56c6c;
   font-size: 14px;
 }
+@container ai-mermaid (max-width: 640px) {
+  .yh-ai-mermaid__header, .yh-ai-mermaid__actions {
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: flex-start;
+  }
+  .yh-ai-mermaid__actions {
+    padding: 10px 12px;
+  }
+  .yh-ai-mermaid__render-tabs, .yh-ai-mermaid__action-buttons {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+  .yh-ai-mermaid__content {
+    padding: 12px;
+  }
+  .yh-ai-mermaid__code {
+    padding: 12px;
+  }
+}
+@container ai-mermaid (max-width: 420px) {
+  .yh-ai-mermaid__render-tab {
+    flex: 1 1 0;
+    justify-content: center;
+  }
+  .yh-ai-mermaid__action-buttons {
+    justify-content: flex-end;
+  }
+  .yh-ai-mermaid__graph {
+    text-align: left;
+  }
+}
 
 @keyframes rotate {
   from {

package/dist/ai-mermaid/src/ai-mermaid.d.ts

@@ -43,6 +43,7 @@ export interface MermaidActions {
 }
 /** 渲染类型 */
 export type RenderType = 'image' | 'code';
+export declare function buildMermaidRenderSource(code: string, config?: MermaidConfig): string;
 export declare const aiMermaidProps: {
     /** Mermaid 代码内容 */
     readonly code: {

package/dist/ai-mermaid/src/ai-mermaid.mjs

@@ -1,3 +1,11 @@
+export function buildMermaidRenderSource(code, config) {
+  const configStr = JSON.stringify({
+    ...config || {},
+    securityLevel: "strict"
+  });
+  return `%%{init: ${configStr}}%%
+${code}`;
+}
 export const aiMermaidProps = {
   /** Mermaid 代码内容 */
   code: {

package/dist/ai-mermaid/src/ai-mermaid.vue

@@ -2,9 +2,14 @@
 import { ref, computed, watch, shallowRef } from "vue";
 import { useNamespace, useLocale } from "@yh-ui/hooks";
 import { useComponentTheme } from "@yh-ui/theme";
-import { aiMermaidProps, aiMermaidEmits } from "./ai-mermaid";
+import {
+  aiMermaidProps,
+  aiMermaidEmits,
+  buildMermaidRenderSource
+} from "./ai-mermaid";
 import { YhIcon } from "../../icon";
 import { YhSpin } from "../../spin";
+import { sanitizeSvgMarkup } from "../../sanitize";
 defineOptions({
   name: "YhAiMermaid"
 });
@@ -57,17 +62,12 @@ const renderGraph = async () => {
     }
     module.initialize({
       startOnLoad: false,
-      securityLevel: "loose"
+      securityLevel: "strict"
     });
-    let processedCode = props.code;
-    if (props.config && Object.keys(props.config).length > 0) {
-      const configStr = JSON.stringify(props.config);
-      processedCode = `%%{init: ${configStr}}%%
-${processedCode}`;
-    }
+    const processedCode = buildMermaidRenderSource(props.code, props.config);
     const id = `mermaid-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
     const { svg } = await module.render(id, processedCode);
-    svgContent.value = svg;
+    svgContent.value = sanitizeSvgMarkup(svg);
     emit("ready");
   } catch (error) {
     console.error("Failed to render mermaid:", error);
@@ -716,6 +716,8 @@ html.dark {
   border-radius: 8px;
   overflow: hidden;
   box-sizing: border-box;
+  container-type: inline-size;
+  container-name: ai-mermaid;
 }
 .yh-ai-mermaid__header {
   display: flex;
@@ -840,6 +842,38 @@ html.dark {
   color: #f56c6c;
   font-size: 14px;
 }
+@container ai-mermaid (max-width: 640px) {
+  .yh-ai-mermaid__header, .yh-ai-mermaid__actions {
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: flex-start;
+  }
+  .yh-ai-mermaid__actions {
+    padding: 10px 12px;
+  }
+  .yh-ai-mermaid__render-tabs, .yh-ai-mermaid__action-buttons {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+  .yh-ai-mermaid__content {
+    padding: 12px;
+  }
+  .yh-ai-mermaid__code {
+    padding: 12px;
+  }
+}
+@container ai-mermaid (max-width: 420px) {
+  .yh-ai-mermaid__render-tab {
+    flex: 1 1 0;
+    justify-content: center;
+  }
+  .yh-ai-mermaid__action-buttons {
+    justify-content: flex-end;
+  }
+  .yh-ai-mermaid__graph {
+    text-align: left;
+  }
+}
 
 @keyframes rotate {
   from {

package/dist/ai-thought-chain/src/ai-thought-chain.css

@@ -455,6 +455,8 @@ html.dark {
   padding-left: 12px;
   max-width: 100%;
   transition: all 0.3s ease;
+  container-type: inline-size;
+  container-name: ai-thought-chain;
 }
 .yh-ai-thought-chain__progress-bar {
   height: 4px;
@@ -762,6 +764,32 @@ html.dark {
   white-space: pre-wrap;
 }
 
+@container ai-thought-chain (max-width: 560px) {
+  .yh-ai-thought-chain__add-node {
+    margin-left: 0;
+  }
+  .yh-ai-thought-chain__item-header {
+    flex-wrap: wrap;
+    height: auto;
+    row-gap: 6px;
+  }
+  .yh-ai-thought-chain__item-actions {
+    opacity: 1;
+    margin-left: 0;
+  }
+  .yh-ai-thought-chain__item-progress {
+    margin-left: 0;
+  }
+}
+@container ai-thought-chain (max-width: 420px) {
+  .yh-ai-thought-chain__content {
+    padding: 10px;
+  }
+  .yh-ai-thought-chain__item-content {
+    padding: 8px;
+  }
+}
+
 @keyframes yh-spin {
   100% {
     transform: rotate(360deg);

package/dist/ai-thought-chain/src/ai-thought-chain.vue

@@ -3,6 +3,7 @@ import { useNamespace, useLocale } from "@yh-ui/hooks";
 import { ref, computed, watch } from "vue";
 import { YhIcon } from "../../icon";
 import MarkdownIt from "../../markdown-it";
+import { sanitizeMarkup } from "../../sanitize";
 import { aiThoughtChainProps, aiThoughtChainEmits } from "./ai-thought-chain";
 import { useComponentTheme } from "@yh-ui/theme";
 defineOptions({
@@ -64,7 +65,7 @@ const displayTitle = computed(() => {
 });
 const renderMarkdown = (content) => {
   if (!props.markdown || !content) return content;
-  return md.render(content);
+  return sanitizeMarkup(md.render(content));
 };
 const getStatusIcon = (status = "none") => {
   switch (status) {
@@ -758,6 +759,8 @@ html.dark {
   padding-left: 12px;
   max-width: 100%;
   transition: all 0.3s ease;
+  container-type: inline-size;
+  container-name: ai-thought-chain;
 }
 .yh-ai-thought-chain__progress-bar {
   height: 4px;
@@ -1065,6 +1068,32 @@ html.dark {
   white-space: pre-wrap;
 }
 
+@container ai-thought-chain (max-width: 560px) {
+  .yh-ai-thought-chain__add-node {
+    margin-left: 0;
+  }
+  .yh-ai-thought-chain__item-header {
+    flex-wrap: wrap;
+    height: auto;
+    row-gap: 6px;
+  }
+  .yh-ai-thought-chain__item-actions {
+    opacity: 1;
+    margin-left: 0;
+  }
+  .yh-ai-thought-chain__item-progress {
+    margin-left: 0;
+  }
+}
+@container ai-thought-chain (max-width: 420px) {
+  .yh-ai-thought-chain__content {
+    padding: 10px;
+  }
+  .yh-ai-thought-chain__item-content {
+    padding: 8px;
+  }
+}
+
 @keyframes yh-spin {
   100% {
     transform: rotate(360deg);

package/dist/sanitize.cjs

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sanitizeHighlightedHtml = sanitizeHighlightedHtml;
+exports.sanitizeMarkup = sanitizeMarkup;
+exports.sanitizeSvgMarkup = sanitizeSvgMarkup;
+var _dompurify = _interopRequireDefault(require("dompurify"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DEFAULT_ALLOWED_SCHEMES = ["http", "https", "mailto", "tel"];
+const DEFAULT_HTML_TAGS = ["a", "blockquote", "br", "button", "code", "div", "em", "figcaption", "figure", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "img", "li", "ol", "p", "pre", "span", "strong", "sup", "sub", "table", "tbody", "td", "th", "thead", "tr", "ul"];
+const DEFAULT_HTML_ATTRIBUTES = ["alt", "aria-label", "class", "data-code", "data-id", "data-lang", "data-latex", "height", "href", "id", "rel", "role", "src", "style", "tabindex", "target", "title", "width"];
+const DEFAULT_SVG_TAGS = ["a", "br", "circle", "clipPath", "defs", "div", "ellipse", "foreignObject", "g", "line", "marker", "mask", "path", "pattern", "polygon", "polyline", "rect", "span", "stop", "style", "svg", "symbol", "text", "tspan", "use"];
+const DEFAULT_SVG_ATTRIBUTES = [...DEFAULT_HTML_ATTRIBUTES, "clip-path", "cx", "cy", "d", "dominant-baseline", "fill", "fill-opacity", "filter", "font-family", "font-size", "font-weight", "gradientTransform", "gradientUnits", "letter-spacing", "marker-end", "marker-mid", "marker-start", "mask", "offset", "opacity", "patternContentUnits", "patternTransform", "patternUnits", "points", "preserveAspectRatio", "r", "rx", "ry", "stroke", "stroke-dasharray", "stroke-linecap", "stroke-linejoin", "stroke-opacity", "stroke-width", "text-anchor", "transform", "viewBox", "x", "x1", "x2", "xlink:href", "xmlns", "xmlns:xlink", "xml:space", "y", "y1", "y2"];
+let purifier = null;
+let purifierWindow = null;
+function getPurifier() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  if (!purifier || purifierWindow !== window) {
+    purifier = (0, _dompurify.default)(window);
+    purifierWindow = window;
+  }
+  return purifier;
+}
+function normalizeSchemes(allowedSchemes) {
+  return (allowedSchemes?.length ? allowedSchemes : DEFAULT_ALLOWED_SCHEMES).map(scheme => scheme.toLowerCase());
+}
+function isAllowedUrl(value, allowedSchemes) {
+  const normalized = value.trim();
+  if (!normalized) {
+    return true;
+  }
+  if (normalized.startsWith("#") || normalized.startsWith("/") || normalized.startsWith("./") || normalized.startsWith("../")) {
+    return true;
+  }
+  if (normalized.startsWith("//")) {
+    return false;
+  }
+  const schemeMatch = normalized.match(/^([a-z][a-z0-9+.-]*):/i);
+  if (!schemeMatch) {
+    return true;
+  }
+  return allowedSchemes.includes(schemeMatch[1].toLowerCase());
+}
+function postProcessSanitizedMarkup(html, allowedSchemes) {
+  if (typeof document === "undefined") {
+    return html;
+  }
+  const template = document.createElement("template");
+  template.innerHTML = html;
+  for (const el of template.content.querySelectorAll("[href], [src], [xlink\\:href]")) {
+    for (const attributeName of ["href", "src", "xlink:href"]) {
+      const rawValue = el.getAttribute(attributeName);
+      if (!rawValue) {
+        continue;
+      }
+      if (!isAllowedUrl(rawValue, allowedSchemes)) {
+        el.removeAttribute(attributeName);
+      }
+    }
+    if (el instanceof HTMLAnchorElement && el.getAttribute("target") === "_blank") {
+      const relTokens = new Set((el.getAttribute("rel") || "").split(/\s+/).filter(Boolean));
+      relTokens.add("noopener");
+      relTokens.add("noreferrer");
+      el.setAttribute("rel", [...relTokens].join(" "));
+    }
+  }
+  return template.innerHTML;
+}
+function serverSideSanitize(html, allowedSchemes) {
+  let output = html.replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, "").replace(/<iframe[\s\S]*?>[\s\S]*?<\/iframe>/gi, "").replace(/<object[\s\S]*?>[\s\S]*?<\/object>/gi, "").replace(/<embed[\s\S]*?>/gi, "").replace(/\son[a-z-]+\s*=\s*(['"]).*?\1/gi, "").replace(/\son[a-z-]+\s*=\s*[^\s>]+/gi, "");
+  output = output.replace(/\s(href|src|xlink:href)\s*=\s*(['"])(.*?)\2/gi, (full, attrName, quote, rawValue) => isAllowedUrl(rawValue, allowedSchemes) ? full : ` ${attrName}=${quote}${quote}`);
+  return output;
+}
+function sanitizeMarkup(html, options = {}) {
+  const allowedSchemes = normalizeSchemes(options.allowedSchemes);
+  const source = options.sanitizer ? options.sanitizer(html) : html;
+  if (!source) {
+    return "";
+  }
+  const allowedTags = options.allowedTags ?? [...(options.profile === "svg" ? DEFAULT_SVG_TAGS : DEFAULT_HTML_TAGS)];
+  const allowedAttributes = options.allowedAttributes ?? [...(options.profile === "svg" ? DEFAULT_SVG_ATTRIBUTES : DEFAULT_HTML_ATTRIBUTES)];
+  const purifierInstance = getPurifier();
+  if (!purifierInstance) {
+    return serverSideSanitize(source, allowedSchemes);
+  }
+  const sanitized = purifierInstance.sanitize(source, {
+    ALLOWED_TAGS: allowedTags,
+    ALLOWED_ATTR: allowedAttributes,
+    ALLOW_DATA_ATTR: options.allowDataAttributes ?? true,
+    USE_PROFILES: options.profile === "svg" ? {
+      html: true,
+      svg: true,
+      svgFilters: true
+    } : {
+      html: true
+    }
+  });
+  return postProcessSanitizedMarkup(String(sanitized), allowedSchemes);
+}
+function sanitizeHighlightedHtml(html, options = {}) {
+  return sanitizeMarkup(html, {
+    ...options,
+    allowedTags: ["code", "div", "pre", "span"],
+    allowedAttributes: ["class"],
+    profile: "html"
+  });
+}
+function sanitizeSvgMarkup(svg, options = {}) {
+  return sanitizeMarkup(svg, {
+    ...options,
+    profile: "svg"
+  });
+}

package/dist/sanitize.d.ts

@@ -0,0 +1,13 @@
+type MarkupProfile = 'html' | 'svg';
+export interface SanitizeMarkupOptions {
+    allowedTags?: string[];
+    allowedAttributes?: string[];
+    allowedSchemes?: string[];
+    allowDataAttributes?: boolean;
+    profile?: MarkupProfile;
+    sanitizer?: ((html: string) => string) | undefined;
+}
+export declare function sanitizeMarkup(html: string, options?: SanitizeMarkupOptions): string;
+export declare function sanitizeHighlightedHtml(html: string, options?: Omit<SanitizeMarkupOptions, 'allowedTags' | 'allowedAttributes' | 'profile'>): string;
+export declare function sanitizeSvgMarkup(svg: string, options?: Omit<SanitizeMarkupOptions, 'profile'>): string;
+export {};

package/dist/sanitize.mjs

@@ -0,0 +1,240 @@
+import createDOMPurify from "dompurify";
+const DEFAULT_ALLOWED_SCHEMES = ["http", "https", "mailto", "tel"];
+const DEFAULT_HTML_TAGS = [
+  "a",
+  "blockquote",
+  "br",
+  "button",
+  "code",
+  "div",
+  "em",
+  "figcaption",
+  "figure",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "hr",
+  "img",
+  "li",
+  "ol",
+  "p",
+  "pre",
+  "span",
+  "strong",
+  "sup",
+  "sub",
+  "table",
+  "tbody",
+  "td",
+  "th",
+  "thead",
+  "tr",
+  "ul"
+];
+const DEFAULT_HTML_ATTRIBUTES = [
+  "alt",
+  "aria-label",
+  "class",
+  "data-code",
+  "data-id",
+  "data-lang",
+  "data-latex",
+  "height",
+  "href",
+  "id",
+  "rel",
+  "role",
+  "src",
+  "style",
+  "tabindex",
+  "target",
+  "title",
+  "width"
+];
+const DEFAULT_SVG_TAGS = [
+  "a",
+  "br",
+  "circle",
+  "clipPath",
+  "defs",
+  "div",
+  "ellipse",
+  "foreignObject",
+  "g",
+  "line",
+  "marker",
+  "mask",
+  "path",
+  "pattern",
+  "polygon",
+  "polyline",
+  "rect",
+  "span",
+  "stop",
+  "style",
+  "svg",
+  "symbol",
+  "text",
+  "tspan",
+  "use"
+];
+const DEFAULT_SVG_ATTRIBUTES = [
+  ...DEFAULT_HTML_ATTRIBUTES,
+  "clip-path",
+  "cx",
+  "cy",
+  "d",
+  "dominant-baseline",
+  "fill",
+  "fill-opacity",
+  "filter",
+  "font-family",
+  "font-size",
+  "font-weight",
+  "gradientTransform",
+  "gradientUnits",
+  "letter-spacing",
+  "marker-end",
+  "marker-mid",
+  "marker-start",
+  "mask",
+  "offset",
+  "opacity",
+  "patternContentUnits",
+  "patternTransform",
+  "patternUnits",
+  "points",
+  "preserveAspectRatio",
+  "r",
+  "rx",
+  "ry",
+  "stroke",
+  "stroke-dasharray",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "stroke-opacity",
+  "stroke-width",
+  "text-anchor",
+  "transform",
+  "viewBox",
+  "x",
+  "x1",
+  "x2",
+  "xlink:href",
+  "xmlns",
+  "xmlns:xlink",
+  "xml:space",
+  "y",
+  "y1",
+  "y2"
+];
+let purifier = null;
+let purifierWindow = null;
+function getPurifier() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  if (!purifier || purifierWindow !== window) {
+    purifier = createDOMPurify(window);
+    purifierWindow = window;
+  }
+  return purifier;
+}
+function normalizeSchemes(allowedSchemes) {
+  return (allowedSchemes?.length ? allowedSchemes : DEFAULT_ALLOWED_SCHEMES).map(
+    (scheme) => scheme.toLowerCase()
+  );
+}
+function isAllowedUrl(value, allowedSchemes) {
+  const normalized = value.trim();
+  if (!normalized) {
+    return true;
+  }
+  if (normalized.startsWith("#") || normalized.startsWith("/") || normalized.startsWith("./") || normalized.startsWith("../")) {
+    return true;
+  }
+  if (normalized.startsWith("//")) {
+    return false;
+  }
+  const schemeMatch = normalized.match(/^([a-z][a-z0-9+.-]*):/i);
+  if (!schemeMatch) {
+    return true;
+  }
+  return allowedSchemes.includes(schemeMatch[1].toLowerCase());
+}
+function postProcessSanitizedMarkup(html, allowedSchemes) {
+  if (typeof document === "undefined") {
+    return html;
+  }
+  const template = document.createElement("template");
+  template.innerHTML = html;
+  for (const el of template.content.querySelectorAll(
+    "[href], [src], [xlink\\:href]"
+  )) {
+    for (const attributeName of ["href", "src", "xlink:href"]) {
+      const rawValue = el.getAttribute(attributeName);
+      if (!rawValue) {
+        continue;
+      }
+      if (!isAllowedUrl(rawValue, allowedSchemes)) {
+        el.removeAttribute(attributeName);
+      }
+    }
+    if (el instanceof HTMLAnchorElement && el.getAttribute("target") === "_blank") {
+      const relTokens = new Set((el.getAttribute("rel") || "").split(/\s+/).filter(Boolean));
+      relTokens.add("noopener");
+      relTokens.add("noreferrer");
+      el.setAttribute("rel", [...relTokens].join(" "));
+    }
+  }
+  return template.innerHTML;
+}
+function serverSideSanitize(html, allowedSchemes) {
+  let output = html.replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, "").replace(/<iframe[\s\S]*?>[\s\S]*?<\/iframe>/gi, "").replace(/<object[\s\S]*?>[\s\S]*?<\/object>/gi, "").replace(/<embed[\s\S]*?>/gi, "").replace(/\son[a-z-]+\s*=\s*(['"]).*?\1/gi, "").replace(/\son[a-z-]+\s*=\s*[^\s>]+/gi, "");
+  output = output.replace(
+    /\s(href|src|xlink:href)\s*=\s*(['"])(.*?)\2/gi,
+    (full, attrName, quote, rawValue) => isAllowedUrl(rawValue, allowedSchemes) ? full : ` ${attrName}=${quote}${quote}`
+  );
+  return output;
+}
+export function sanitizeMarkup(html, options = {}) {
+  const allowedSchemes = normalizeSchemes(options.allowedSchemes);
+  const source = options.sanitizer ? options.sanitizer(html) : html;
+  if (!source) {
+    return "";
+  }
+  const allowedTags = options.allowedTags ?? [
+    ...options.profile === "svg" ? DEFAULT_SVG_TAGS : DEFAULT_HTML_TAGS
+  ];
+  const allowedAttributes = options.allowedAttributes ?? [
+    ...options.profile === "svg" ? DEFAULT_SVG_ATTRIBUTES : DEFAULT_HTML_ATTRIBUTES
+  ];
+  const purifierInstance = getPurifier();
+  if (!purifierInstance) {
+    return serverSideSanitize(source, allowedSchemes);
+  }
+  const sanitized = purifierInstance.sanitize(source, {
+    ALLOWED_TAGS: allowedTags,
+    ALLOWED_ATTR: allowedAttributes,
+    ALLOW_DATA_ATTR: options.allowDataAttributes ?? true,
+    USE_PROFILES: options.profile === "svg" ? { html: true, svg: true, svgFilters: true } : { html: true }
+  });
+  return postProcessSanitizedMarkup(String(sanitized), allowedSchemes);
+}
+export function sanitizeHighlightedHtml(html, options = {}) {
+  return sanitizeMarkup(html, {
+    ...options,
+    allowedTags: ["code", "div", "pre", "span"],
+    allowedAttributes: ["class"],
+    profile: "html"
+  });
+}
+export function sanitizeSvgMarkup(svg, options = {}) {
+  return sanitizeMarkup(svg, {
+    ...options,
+    profile: "svg"
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yh-ui/components",
-  "version": "1.0.9",
+  "version": "1.0.16",
   "description": "YH-UI Vue 3 Components",
   "type": "module",
   "sideEffects": [
@@ -37,12 +37,13 @@
   "dependencies": {
     "@webcontainer/api": "^1.6.1",
     "@floating-ui/dom": "^1.7.4",
-    "@yh-ui/hooks": "^1.0.9",
-    "@yh-ui/locale": "^1.0.9",
-    "@yh-ui/theme": "^1.0.9",
-    "@yh-ui/utils": "^1.0.9",
+    "@yh-ui/hooks": "^1.0.16",
+    "@yh-ui/locale": "^1.0.16",
+    "@yh-ui/theme": "^1.0.16",
+    "@yh-ui/utils": "^1.0.16",
     "async-validator": "^4.2.5",
     "dayjs": "^1.11.19",
+    "dompurify": "^3.3.3",
     "markdown-it": "^14.1.1",
     "monaco-editor": "^0.55.1",
     "xlsx": "^0.18.5",