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

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

@@ -1,228 +0,0 @@
-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="ai-ui-sdk-icon ai-ui-sdk-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="ai-ui-sdk-icon ai-ui-sdk-qiehuan g-mr-4 g-text-16"></i>切换代码模式';
-                } else {
-                    editor.changeMode("markdown");
-                    modeSwitchEl.dataset.mode = "markdown";
-                    modeSwitchEl.innerHTML = '<i class="ai-ui-sdk-icon ai-ui-sdk-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 handleStopEvent = (event)=>{
-            event.preventDefault();
-            event.stopPropagation();
-            event.stopImmediatePropagation();
-        };
-        const handleDisabled = ()=>{
-            const root = editorRef.value;
-            const editContent = root.querySelector('.ww-mode [contenteditable]');
-            const toolbar = root.querySelector('.toastui-editor-toolbar');
-            // 禁用事件
-            if (root) {
-                if (props.disabled) {
-                    root.addEventListener('beforeinput', handleStopEvent, true);
-                    root.addEventListener('input', handleStopEvent, true);
-                    root.addEventListener('paste', handleStopEvent, true);
-                    root.addEventListener('cut', handleStopEvent, true);
-                    root.addEventListener('drop', handleStopEvent, true);
-                    root.addEventListener('compositionstart', handleStopEvent, true);
-                } else {
-                    root.removeEventListener('beforeinput', handleStopEvent, true);
-                    root.removeEventListener('input', handleStopEvent, true);
-                    root.removeEventListener('paste', handleStopEvent, true);
-                    root.removeEventListener('cut', handleStopEvent, true);
-                    root.removeEventListener('drop', handleStopEvent, true);
-                    root.removeEventListener('compositionstart', handleStopEvent, 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.ts.js

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