@blueking/ai-ui-sdk 0.2.0-beta.9 → 0.2.2

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

@@ -0,0 +1,228 @@
+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;
+}
+import { defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import Editor from '@toast-ui/editor';
+import { commonConfig } from './common.ts.js';
+import '@toast-ui/editor/dist/toastui-editor.css';
+import './edit.postcss.css';
+var EditorMode;
+(function(EditorMode) {
+    EditorMode["Markdown"] = "markdown";
+    EditorMode["Wysiwyg"] = "wysiwyg";
+})(EditorMode || (EditorMode = {}));
+export default defineComponent({
+    props: {
+        modelValue: {
+            type: String
+        },
+        placeholder: {
+            type: String
+        },
+        height: {
+            type: String,
+            default: '500px'
+        },
+        disabled: {
+            type: Boolean
+        },
+        fontSize: {
+            type: String,
+            default: '14px'
+        },
+        backgroundColor: {
+            type: String,
+            default: '#fff'
+        },
+        mode: {
+            type: String,
+            default: "wysiwyg"
+        },
+        isSimpleToolbar: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: {
+        'update:modelValue': (value)=>value
+    },
+    setup (props, { emit }) {
+        const editorRef = ref();
+        let editor;
+        const handleChange = ()=>{
+            const value = (editor === null || editor === void 0 ? void 0 : editor.getMarkdown()) || '';
+            emit('update:modelValue', value);
+        };
+        const handleInit = ()=>{
+            const defaultMode = props.mode || "wysiwyg";
+            // 切换模式按钮
+            const modeSwitchEl = document.createElement('section');
+            modeSwitchEl.className = 'toastui-editor-toolbar-custom-button g-cursor-pointer g-ml-4';
+            modeSwitchEl.innerHTML = '<i class="bkaidev-icon bkaidev-qiehuan g-mr-4 g-text-16"></i>切换代码模式';
+            modeSwitchEl.dataset.mode = defaultMode;
+            modeSwitchEl.addEventListener('click', ()=>{
+                const mode = modeSwitchEl.dataset.mode;
+                if (mode === "markdown") {
+                    editor.changeMode("wysiwyg");
+                    modeSwitchEl.dataset.mode = "wysiwyg";
+                    modeSwitchEl.innerHTML = '<i class="bkaidev-icon bkaidev-qiehuan g-mr-4 g-text-16"></i>切换代码模式';
+                } else {
+                    editor.changeMode("markdown");
+                    modeSwitchEl.dataset.mode = "markdown";
+                    modeSwitchEl.innerHTML = '<i class="bkaidev-icon bkaidev-qiehuan g-mr-4 g-text-16"></i>切换富文本模式';
+                }
+            });
+            // 全屏按钮复用 use-click-proxy 的全局 full-screen 代理。
+            const fullScreenEl = document.createElement('section');
+            fullScreenEl.className = 'toastui-editor-toolbar-custom-button g-cursor-pointer g-ml-12';
+            fullScreenEl.innerHTML = [
+                '<span class="click-full-screen">',
+                '<i class="ai-ui-sdk-icon ai-ui-sdk-full-screen g-mr-4 g-text-14"></i>全屏',
+                '</span>',
+                '<span class="click-un-full-screen">',
+                '<i class="ai-ui-sdk-icon ai-ui-sdk-un-full-screen g-mr-4 g-text-14"></i>取消全屏',
+                '</span>'
+            ].join('');
+            // 初始化编辑器
+            editor = new Editor(_object_spread({
+                el: editorRef.value,
+                initialEditType: defaultMode,
+                previewStyle: 'vertical',
+                hideModeSwitch: true,
+                autofocus: false,
+                toolbarItems: [
+                    [
+                        'heading',
+                        'bold',
+                        'italic',
+                        'strike'
+                    ],
+                    ...props.isSimpleToolbar ? [] : [
+                        [
+                            'hr',
+                            'quote'
+                        ],
+                        [
+                            'ul',
+                            'ol',
+                            'task',
+                            'indent',
+                            'outdent'
+                        ],
+                        [
+                            'table',
+                            'image',
+                            'link'
+                        ],
+                        [
+                            'code',
+                            'codeblock'
+                        ]
+                    ],
+                    [
+                        ...props.isSimpleToolbar ? [] : [
+                            {
+                                name: 'modeSwitch',
+                                el: modeSwitchEl
+                            }
+                        ],
+                        {
+                            name: 'fullScreen',
+                            el: fullScreenEl
+                        }
+                    ]
+                ],
+                placeholder: props.placeholder,
+                initialValue: props.modelValue || '',
+                height: props.height,
+                events: {
+                    change: handleChange
+                }
+            }, commonConfig));
+        };
+        const handleDestroy = ()=>{
+            editor.destroy();
+            editor = null;
+        };
+        const handleDisabled = ()=>{
+            const root = editorRef.value;
+            const editContent = root.querySelector('.ww-mode [contenteditable]');
+            const toolbar = root.querySelector('.toastui-editor-toolbar');
+            // 禁用事件
+            if (root) {
+                const stopEvent = (event)=>{
+                    event.preventDefault();
+                    event.stopPropagation();
+                    event.stopImmediatePropagation();
+                };
+                if (props.disabled) {
+                    root.addEventListener('beforeinput', stopEvent, true);
+                    root.addEventListener('input', stopEvent, true);
+                    root.addEventListener('paste', stopEvent, true);
+                    root.addEventListener('cut', stopEvent, true);
+                    root.addEventListener('drop', stopEvent, true);
+                    root.addEventListener('compositionstart', stopEvent, true);
+                } else {
+                    root.removeEventListener('beforeinput', stopEvent, true);
+                    root.removeEventListener('input', stopEvent, true);
+                    root.removeEventListener('paste', stopEvent, true);
+                    root.removeEventListener('cut', stopEvent, true);
+                    root.removeEventListener('drop', stopEvent, true);
+                    root.removeEventListener('compositionstart', stopEvent, true);
+                }
+            }
+            if (editContent) {
+                // 设置样式
+                editContent.setAttribute('contenteditable', String(!props.disabled));
+                editContent.style.cursor = props.disabled ? 'not-allowed' : 'auto';
+            }
+            if (toolbar) {
+                toolbar.style.pointerEvents = props.disabled ? 'none' : 'auto';
+            }
+        };
+        watch(()=>props.modelValue, (value)=>{
+            if (!editor) return;
+            if (value !== editor.getMarkdown()) {
+                editor.setMarkdown(value || '');
+            }
+        });
+        onMounted(()=>{
+            handleInit();
+            handleDisabled();
+        });
+        onBeforeUnmount(handleDestroy);
+        watch(()=>props.disabled, handleDisabled);
+        return ()=>h('section', {
+                ref: editorRef,
+                class: `full-screen-wrap ${props.disabled ? 'is-disabled' : ''}`,
+                style: {
+                    backgroundColor: props.backgroundColor
+                }
+            });
+    }
+});

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

@@ -0,0 +1,3 @@
+export declare const filterStyle: (style: string) => string;
+export declare const cleanStyleAfterXss: (root: DocumentFragment) => void;
+export declare const filterCSS: (html: string) => string;

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

@@ -0,0 +1,119 @@
+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 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;
+};

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 {};