@blueking/ai-ui-sdk 0.4.0-beta.1 → 0.4.1-beta.2

package/dist/components/render-markdown/filter-css.ts.js

@@ -0,0 +1,215 @@
+import { filterXss } from '@blueking/xss-filter';
+const NUMERIC_PROPS = new Set([
+    'height',
+    'top',
+    'bottom',
+    'margin-right',
+    'margin-left',
+    'border-bottom-width',
+    'width',
+    'min-width',
+    'font-size'
+]);
+const COLOR_PROPS = new Set([
+    'color',
+    'background-color'
+]);
+const FONT_WEIGHT_PROPS = new Set([
+    'font-weight'
+]);
+const VERTICAL_ALIGN_VALUES = new Set([
+    'baseline',
+    'middle',
+    'sub',
+    'super',
+    'text-top',
+    'text-bottom',
+    'top',
+    'bottom'
+]);
+const DANGEROUS_CSS_VALUE_RE = /(url\s*\(|expression\s*\(|javascript\s*:|vbscript\s*:|data\s*:|@import|var\s*\(|calc\s*\()/i;
+const NUMERIC_VALUE_RE = /^-?\d+(\.\d+)?(em|px|rem|%)?$/i;
+const FONT_WEIGHT_VALUE_RE = /^(normal|bold|bolder|lighter|[1-9]00)$/i;
+const HEX_COLOR_RE = /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+const RGB_COLOR_RE = /^rgba?\(\s*((25[0-5]|2[0-4]\d|1?\d?\d)\s*,\s*){2}(25[0-5]|2[0-4]\d|1?\d?\d)(\s*,\s*(0|1|0?\.\d+))?\s*\)$/i;
+const HSL_COLOR_RE = /^hsla?\(\s*(360|3[0-5]\d|[12]?\d?\d)\s*,\s*(100|[1-9]?\d)%\s*,\s*(100|[1-9]?\d)%(\s*,\s*(0|1|0?\.\d+))?\s*\)$/i;
+const SAFE_COLOR_KEYWORDS = new Set([
+    'transparent',
+    'currentcolor',
+    'black',
+    'white',
+    'red',
+    'green',
+    'blue',
+    'gray',
+    'grey',
+    'yellow',
+    'orange',
+    'purple',
+    'pink',
+    'brown'
+]);
+const SAFE_ATTRIBUTES = new Set([
+    'data-nodeid',
+    'data-clipboard-text'
+]);
+const isSafeCssValue = (value)=>{
+    return !DANGEROUS_CSS_VALUE_RE.test(value);
+};
+const isSafeNumericValue = (value)=>{
+    return NUMERIC_VALUE_RE.test(value);
+};
+const isSafeFontWeightValue = (value)=>{
+    if (!FONT_WEIGHT_VALUE_RE.test(value)) return false;
+    const num = Number(value);
+    if (Number.isNaN(num)) return true;
+    return num >= 100 && num <= 900 && num % 100 === 0;
+};
+const isSafeColorValue = (value)=>{
+    const normalized = value.trim().toLowerCase();
+    if (!isSafeCssValue(normalized)) return false;
+    if (SAFE_COLOR_KEYWORDS.has(normalized)) return true;
+    if (HEX_COLOR_RE.test(normalized)) return true;
+    if (RGB_COLOR_RE.test(normalized)) return true;
+    if (HSL_COLOR_RE.test(normalized)) return true;
+    return false;
+};
+const isSafeVerticalAlignValue = (value)=>{
+    const normalized = value.trim().toLowerCase();
+    return VERTICAL_ALIGN_VALUES.has(normalized) || isSafeNumericValue(normalized);
+};
+export const filterStyle = (style)=>{
+    return style.split(';').map((item)=>item.trim()).filter(Boolean).map((item)=>{
+        const [rawProp, ...rest] = item.split(':');
+        const prop = rawProp === null || rawProp === void 0 ? void 0 : rawProp.trim().toLowerCase();
+        const value = rest.join(':').trim();
+        return {
+            prop,
+            value,
+            normalizedValue: value.toLowerCase()
+        };
+    }).filter(({ prop, value, normalizedValue })=>{
+        if (!prop || !value) return false;
+        if (!isSafeCssValue(normalizedValue)) return false;
+        if (NUMERIC_PROPS.has(prop)) {
+            return isSafeNumericValue(normalizedValue);
+        }
+        if (COLOR_PROPS.has(prop)) {
+            return isSafeColorValue(normalizedValue);
+        }
+        if (FONT_WEIGHT_PROPS.has(prop)) {
+            return isSafeFontWeightValue(normalizedValue);
+        }
+        if (prop === 'vertical-align') {
+            return isSafeVerticalAlignValue(normalizedValue);
+        }
+        return false;
+    }).map(({ prop, value })=>`${prop}: ${value}`).join('; ');
+};
+export const cleanStyleAfterXss = (root)=>{
+    root.querySelectorAll('[style]').forEach((el)=>{
+        const nextStyle = filterStyle(el.getAttribute('style') || '');
+        if (nextStyle) {
+            el.setAttribute('style', nextStyle);
+        } else {
+            el.removeAttribute('style');
+        }
+    });
+};
+export const filterCSS = (html)=>{
+    const template = document.createElement('template');
+    template.innerHTML = html;
+    cleanStyleAfterXss(template.content);
+    return template.innerHTML;
+};
+export const escapeHtml = (html)=>{
+    return filterCSS(filterXss(html, {
+        whiteList: {
+            a: [
+                'href',
+                'target',
+                'class',
+                'title',
+                'rel'
+            ],
+            section: [
+                'class'
+            ],
+            i: [
+                'class',
+                'title'
+            ],
+            span: [
+                'class',
+                'style',
+                'data-variable-index',
+                'aria-hidden'
+            ],
+            div: [
+                'class',
+                'style'
+            ],
+            svg: [
+                'class'
+            ],
+            use: [
+                'href'
+            ],
+            ul: [
+                'class'
+            ],
+            li: [
+                'class',
+                'title'
+            ],
+            p: [
+                'class'
+            ],
+            br: [],
+            strong: [
+                'class'
+            ],
+            b: [
+                'class'
+            ],
+            em: [
+                'class'
+            ],
+            code: [
+                'class'
+            ],
+            pre: [
+                'class'
+            ],
+            blockquote: [
+                'class'
+            ],
+            table: [
+                'class'
+            ],
+            thead: [
+                'class'
+            ],
+            tbody: [
+                'class'
+            ],
+            tr: [
+                'class'
+            ],
+            th: [
+                'class',
+                'align'
+            ],
+            td: [
+                'class',
+                'align'
+            ]
+        },
+        onTagAttr (tag, name, value) {
+            if (SAFE_ATTRIBUTES.has(name)) {
+                return `${name}="${value}"`;
+            }
+        },
+        css: false
+    }));
+};

package/dist/components/render-markdown/katex.d.ts

@@ -0,0 +1,83 @@
+import { type KatexOptions } from 'katex';
+import 'katex/dist/katex.min.css';
+type MdNode = {
+    literal?: string;
+    type?: string;
+    parent?: MdNode | null;
+};
+export interface TuiKatexOptions {
+    /**
+     * 兼容 100% 写法。
+     * 标准 LaTeX 应该写 100\%
+     */
+    autoEscapePercent?: boolean;
+    /**
+     * 是否支持 $E=mc^2$。
+     * 如果业务里经常出现 $100 这种价格，建议设为 false。
+     */
+    enableSingleDollar?: boolean;
+    katexOptions?: KatexOptions;
+}
+export declare function normalizeLatex(input: string, options?: TuiKatexOptions): string;
+export declare function renderKatexToHtml(latex: string, displayMode?: boolean, options?: TuiKatexOptions): string;
+export declare function createTuiKatexCustomRenderer(options?: TuiKatexOptions): {
+    paragraph(_node: MdNode, context: any): any;
+    text(node: MdNode): {
+        type: "text";
+        content: string;
+    } | {
+        type: "html";
+        content: string;
+    };
+    softbreak(_node: MdNode, context: any): any;
+    linebreak(_node: MdNode, context: any): any;
+    /**
+     * 支持 TUI custom block:
+     *
+     * $$katex
+     * \frac{15}{5000}\times 100\%=0.3\%
+     * $$
+     */
+    katex: (node: MdNode) => ({
+        type: "openTag";
+        tagName: string;
+        outerNewLine: boolean;
+        classNames: string[];
+        content?: undefined;
+    } | {
+        type: "html";
+        content: string;
+        tagName?: undefined;
+        outerNewLine?: undefined;
+        classNames?: undefined;
+    } | {
+        type: "closeTag";
+        tagName: string;
+        outerNewLine: boolean;
+        classNames?: undefined;
+        content?: undefined;
+    })[];
+    /**
+     * 这里 latex 也按数学公式处理，不走 latex.js。
+     */
+    latex: (node: MdNode) => ({
+        type: "openTag";
+        tagName: string;
+        outerNewLine: boolean;
+        classNames: string[];
+        content?: undefined;
+    } | {
+        type: "html";
+        content: string;
+        tagName?: undefined;
+        outerNewLine?: undefined;
+        classNames?: undefined;
+    } | {
+        type: "closeTag";
+        tagName: string;
+        outerNewLine: boolean;
+        classNames?: undefined;
+        content?: undefined;
+    })[];
+};
+export {};

package/dist/components/render-markdown/katex.ts.js

@@ -0,0 +1,309 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+import katex from 'katex';
+import 'katex/dist/katex.min.css';
+const defaultKatexOptions = {
+    throwOnError: false,
+    strict: 'ignore',
+    trust: false,
+    output: 'html'
+};
+const CODE_NODE_TYPES = new Set([
+    'code',
+    'codeBlock',
+    'htmlBlock',
+    'htmlInline'
+]);
+function isEscaped(value, index) {
+    let count = 0;
+    let i = index - 1;
+    while(i >= 0 && value[i] === '\\'){
+        count += 1;
+        i -= 1;
+    }
+    return count % 2 === 1;
+}
+function findUnescaped(value, search, fromIndex) {
+    let index = value.indexOf(search, fromIndex);
+    while(index !== -1){
+        if (!isEscaped(value, index)) return index;
+        index = value.indexOf(search, index + search.length);
+    }
+    return -1;
+}
+function isInCodeNode(node) {
+    let current = node;
+    while(current){
+        if (current.type && CODE_NODE_TYPES.has(current.type)) {
+            return true;
+        }
+        current = current.parent;
+    }
+    return false;
+}
+export function normalizeLatex(input, options = {}) {
+    let value = input.trim();
+    if (options.autoEscapePercent !== false) {
+        value = value.replace(/(^|[^\\])%/g, '$1\\%');
+    }
+    return value;
+}
+export function renderKatexToHtml(latex, displayMode = true, options = {}) {
+    return katex.renderToString(normalizeLatex(latex, options), _object_spread(_object_spread_props(_object_spread({}, defaultKatexOptions), {
+        displayMode
+    }), options.katexOptions || {}));
+}
+export function createTuiKatexCustomRenderer(options = {}) {
+    let mathState = null;
+    function toArray(value) {
+        return Array.isArray(value) ? value : [
+            value
+        ];
+    }
+    function findNextOpen(value, fromIndex) {
+        const candidates = [];
+        const dollarBlock = findUnescaped(value, '$$', fromIndex);
+        if (dollarBlock !== -1) {
+            candidates.push({
+                index: dollarBlock,
+                open: '$$',
+                close: '$$',
+                display: true
+            });
+        }
+        const bracketBlock = findUnescaped(value, '\\[', fromIndex);
+        if (bracketBlock !== -1) {
+            candidates.push({
+                index: bracketBlock,
+                open: '\\[',
+                close: '\\]',
+                display: true
+            });
+        }
+        const bracketInline = findUnescaped(value, '\\(', fromIndex);
+        if (bracketInline !== -1) {
+            candidates.push({
+                index: bracketInline,
+                open: '\\(',
+                close: '\\)',
+                display: false
+            });
+        }
+        if (options.enableSingleDollar !== false) {
+            let singleDollar = findUnescaped(value, '$', fromIndex);
+            while(singleDollar !== -1 && (value[singleDollar - 1] === '$' || value[singleDollar + 1] === '$')){
+                singleDollar = findUnescaped(value, '$', singleDollar + 1);
+            }
+            if (singleDollar !== -1) {
+                candidates.push({
+                    index: singleDollar,
+                    open: '$',
+                    close: '$',
+                    display: false
+                });
+            }
+        }
+        if (!candidates.length) return null;
+        return candidates.sort((a, b)=>{
+            if (a.index !== b.index) return a.index - b.index;
+            return b.open.length - a.open.length;
+        })[0];
+    }
+    function processText(value) {
+        let html = '';
+        let index = 0;
+        let hasMath = false;
+        while(index < value.length){
+            if (mathState) {
+                hasMath = true;
+                const closeIndex = findUnescaped(value, mathState.close, index);
+                if (closeIndex === -1) {
+                    mathState.content += value.slice(index);
+                    return {
+                        html,
+                        hasMath
+                    };
+                }
+                mathState.content += value.slice(index, closeIndex);
+                try {
+                    html += renderKatexToHtml(mathState.content, mathState.display, options);
+                } catch (e) {
+                    html += `${mathState.open}${mathState.content}${mathState.close}`;
+                }
+                index = closeIndex + mathState.close.length;
+                mathState = null;
+                continue;
+            }
+            const nextOpen = findNextOpen(value, index);
+            if (!nextOpen) {
+                html += value.slice(index);
+                break;
+            }
+            hasMath = true;
+            html += value.slice(index, nextOpen.index);
+            mathState = {
+                open: nextOpen.open,
+                close: nextOpen.close,
+                display: nextOpen.display,
+                content: ''
+            };
+            index = nextOpen.index + nextOpen.open.length;
+        }
+        return {
+            html,
+            hasMath
+        };
+    }
+    function flushUnclosedMath() {
+        if (!mathState) return '';
+        const raw = `${mathState.open}${mathState.content}`;
+        mathState = null;
+        return raw;
+    }
+    function renderBlock(node) {
+        let html = '';
+        try {
+            html = renderKatexToHtml(node.literal || '', true, options);
+        } catch (error) {
+            html = `<pre><code>${String(error)}</code></pre>`;
+        }
+        return [
+            {
+                type: 'openTag',
+                tagName: 'div',
+                outerNewLine: true,
+                classNames: [
+                    'tui-katex-block'
+                ]
+            },
+            {
+                type: 'html',
+                content: html
+            },
+            {
+                type: 'closeTag',
+                tagName: 'div',
+                outerNewLine: true
+            }
+        ];
+    }
+    const renderer = {
+        paragraph (_node, context) {
+            if (context.entering) {
+                mathState = null;
+                return context.origin();
+            }
+            const pending = flushUnclosedMath();
+            const origin = context.origin();
+            if (!pending) return origin;
+            return [
+                {
+                    type: 'html',
+                    content: pending
+                },
+                ...toArray(origin)
+            ];
+        },
+        text (node) {
+            const value = node.literal || '';
+            if (isInCodeNode(node)) {
+                return {
+                    type: 'text',
+                    content: value
+                };
+            }
+            const result = processText(value);
+            if (!result.hasMath) {
+                return {
+                    type: 'text',
+                    content: value
+                };
+            }
+            return {
+                type: 'html',
+                content: result.html
+            };
+        },
+        softbreak (_node, context) {
+            if (mathState) {
+                mathState.content += '\n';
+                return {
+                    type: 'text',
+                    content: ''
+                };
+            }
+            return context.origin();
+        },
+        linebreak (_node, context) {
+            if (mathState) {
+                mathState.content += '\n';
+                return {
+                    type: 'text',
+                    content: ''
+                };
+            }
+            return context.origin();
+        },
+        /**
+     * 支持 TUI custom block:
+     *
+     * $$katex
+     * \frac{15}{5000}\times 100\%=0.3\%
+     * $$
+     */ katex: renderBlock,
+        /**
+     * 这里 latex 也按数学公式处理，不走 latex.js。
+     */ latex: renderBlock
+    };
+    return renderer;
+}

package/dist/components/render-markdown/mark-down-code-copy.d.ts

@@ -0,0 +1,7 @@
+import type Prism from 'prismjs';
+import type { PluginContext, PluginInfo } from '@toast-ui/editor';
+export type PrismHighlighter = typeof Prism;
+export interface MarkDownCodeCopyPluginOptions {
+    highlighter?: PrismHighlighter;
+}
+export declare const MarkDownCodeCopyPlugin: (_context: PluginContext, options?: MarkDownCodeCopyPluginOptions) => PluginInfo;

package/dist/components/render-markdown/mark-down-code-copy.ts.js

@@ -0,0 +1,73 @@
+const BACKTICK_COUNT = 3;
+// 给块级代码增加右上角复制按钮，同时保留 Prism 语法高亮。
+export const MarkDownCodeCopyPlugin = (_context, options = {})=>({
+        toHTMLRenderers: {
+            codeBlock (markdownNode) {
+                const node = markdownNode;
+                const infoWords = node.info ? node.info.split(/\s+/) : [];
+                const language = infoWords[0];
+                const preClasses = [];
+                const codeAttrs = {};
+                const tokens = [];
+                if (node.fenceLength > BACKTICK_COUNT) {
+                    codeAttrs['data-backticks'] = node.fenceLength;
+                }
+                if (language) {
+                    preClasses.push(`lang-${language}`);
+                    codeAttrs['data-language'] = language;
+                }
+                var _node_literal;
+                tokens.push({
+                    type: 'openTag',
+                    tagName: 'pre',
+                    classNames: [
+                        ...preClasses,
+                        'markdown-code-copy-wrap'
+                    ]
+                }, {
+                    type: 'openTag',
+                    tagName: 'i',
+                    classNames: [
+                        'ai-ui-sdk-icon',
+                        'ai-ui-sdk-copy',
+                        'markdown-code-copy-button',
+                        'click-copy'
+                    ],
+                    attributes: {
+                        'data-clipboard-text': encodeURIComponent((_node_literal = node.literal) !== null && _node_literal !== void 0 ? _node_literal : ''),
+                        title: '复制代码'
+                    }
+                }, {
+                    type: 'closeTag',
+                    tagName: 'i'
+                }, {
+                    type: 'openTag',
+                    tagName: 'code',
+                    attributes: codeAttrs
+                });
+                const highlighter = options.highlighter;
+                const registeredLang = language && (highlighter === null || highlighter === void 0 ? void 0 : highlighter.languages[language]);
+                if (language && registeredLang) {
+                    var _node_literal1;
+                    tokens.push({
+                        type: 'html',
+                        content: highlighter.highlight((_node_literal1 = node.literal) !== null && _node_literal1 !== void 0 ? _node_literal1 : '', registeredLang, language)
+                    });
+                } else {
+                    var _node_literal2;
+                    tokens.push({
+                        type: 'text',
+                        content: (_node_literal2 = node.literal) !== null && _node_literal2 !== void 0 ? _node_literal2 : ''
+                    });
+                }
+                tokens.push({
+                    type: 'closeTag',
+                    tagName: 'code'
+                }, {
+                    type: 'closeTag',
+                    tagName: 'pre'
+                });
+                return tokens;
+            }
+        }
+    });