@ant-design/agentic-ui 2.29.43 → 2.29.45

package/dist/MarkdownEditor/editor/style.js

@@ -56,9 +56,22 @@ import "./code.css";
 // 导入统一的标签样式配置
 import { TAG_STYLES } from "./tagStyles";
 var COMMENT_HIGHLIGHT_COLOR = 'var(--agentic-comment-highlight-color, rgba(21, 0, 255, 0.15))';
+/** Jinja 语法高亮 CSS 变量名，在 .ant-agentic-md-editor-content 上覆盖即可定制 */ var JINJA_CSS_VAR = {
+    variable: '--agentic-md-editor-color-jinja-variable',
+    tag: '--agentic-md-editor-color-jinja-tag',
+    comment: '--agentic-md-editor-color-jinja-comment',
+    keyword: '--agentic-md-editor-color-jinja-keyword',
+    string: '--agentic-md-editor-color-jinja-string',
+    number: '--agentic-md-editor-color-jinja-number',
+    filter: '--agentic-md-editor-color-jinja-filter',
+    variableName: '--agentic-md-editor-color-jinja-variable-name',
+    placeholder: '--agentic-md-editor-color-jinja-placeholder',
+    placeholderBg: '--agentic-md-editor-color-jinja-placeholder-bg',
+    delimiter: '--agentic-md-editor-color-jinja-delimiter'
+};
 var genStyle = function genStyle(token) {
-    var _obj;
-    return _obj = {
+    var _obj, _obj1;
+    return _obj1 = {
         // 拖拽手柄样式
         '[data-drag-handle]': {
             position: 'absolute',
@@ -172,7 +185,7 @@ var genStyle = function genStyle(token) {
                 marginLeft: '2px'
             }
         }
-    }, _define_property(_obj, token.componentCls, {
+    }, _define_property(_obj1, token.componentCls, (_obj = {
         boxSizing: 'border-box',
         caretColor: 'var(--color-primary-control-fill-primary)',
         color: 'inherit',
@@ -184,388 +197,355 @@ var genStyle = function genStyle(token) {
         position: 'relative',
         whiteSpace: 'pre-wrap',
         wordWrap: 'break-word',
-        fontSize: '15px',
-        '::-webkit-scrollbar': {
-            width: '8px',
-            height: '8px'
-        },
-        '::-webkit-scrollbar-thumb': {
-            backgroundColor: 'var(--color-gray-text-tertiary)',
-            borderRadius: '20px'
-        },
-        '&-edit': {
-            '> div.empty:first-child': {
-                '[data-slate-zero-width="n"]': {
-                    display: 'inline-block',
-                    minWidth: 20
-                },
-                '&::before': {
-                    cursor: 'text',
-                    content: 'attr(data-slate-placeholder)',
-                    color: 'rgba(0,0,0,0.45)',
-                    display: 'inline-block',
-                    position: 'absolute',
-                    width: 'max-content',
-                    maxWidth: '100%',
-                    fontSize: '1em',
-                    lineHeight: '21px',
-                    wordBreak: 'break-word',
-                    whiteSpace: 'wrap'
-                }
-            },
-            '> div.empty:first-child [data-slate-node="text"]': {
+        fontSize: '15px'
+    }, // Jinja 语法高亮，仅通过 CSS 变量定制（在 .ant-agentic-md-editor-content 上覆盖）
+    _define_property(_obj, JINJA_CSS_VAR.variable, 'var(--color-primary-control-fill-primary, #1677ff)'), _define_property(_obj, JINJA_CSS_VAR.tag, 'var(--color-orange-6, #d46b08)'), _define_property(_obj, JINJA_CSS_VAR.comment, 'var(--color-text-tertiary, rgba(0,0,0,0.25))'), _define_property(_obj, JINJA_CSS_VAR.keyword, '#5c4033'), _define_property(_obj, JINJA_CSS_VAR.string, 'var(--color-green-10, #10af74)'), _define_property(_obj, JINJA_CSS_VAR.number, 'var(--color-primary-10, #066ced)'), _define_property(_obj, JINJA_CSS_VAR.filter, 'var(--color-primary-8, #689ef0)'), _define_property(_obj, JINJA_CSS_VAR.variableName, 'var(--color-green-10, #10af74)'), _define_property(_obj, JINJA_CSS_VAR.placeholder, 'var(--color-primary-control-fill-primary, #1677ff)'), _define_property(_obj, JINJA_CSS_VAR.placeholderBg, 'var(--color-primary-bg-tip, rgba(0,102,255,0.08))'), _define_property(_obj, JINJA_CSS_VAR.delimiter, '#d4b84b'), _define_property(_obj, '::-webkit-scrollbar', {
+        width: '8px',
+        height: '8px'
+    }), _define_property(_obj, '::-webkit-scrollbar-thumb', {
+        backgroundColor: 'var(--color-gray-text-tertiary)',
+        borderRadius: '20px'
+    }), _define_property(_obj, '&-edit', {
+        '> div.empty:first-child': {
+            '[data-slate-zero-width="n"]': {
                 display: 'inline-block',
                 minWidth: 20
+            },
+            '&::before': {
+                cursor: 'text',
+                content: 'attr(data-slate-placeholder)',
+                color: 'rgba(0,0,0,0.45)',
+                display: 'inline-block',
+                position: 'absolute',
+                width: 'max-content',
+                maxWidth: '100%',
+                fontSize: '1em',
+                lineHeight: '21px',
+                wordBreak: 'break-word',
+                whiteSpace: 'wrap'
             }
         },
-        '&> *:first-child': {
-            marginTop: 0
-        },
-        '&-report': {
-            fontSize: '16px'
-        },
-        '& > .link': {
-            textDecoration: 'underline'
-        },
-        '& > .attach': {
-            padding: '3px 0'
-        },
-        '& >.attach:not(:last-child)': {
-            marginBottom: '0.3em'
-        },
-        '.attach .file': {
-            borderRadius: '12px',
-            borderWidth: '1px',
-            borderColor: 'rgb(229 231 235 / 1)',
-            backgroundColor: 'rgb(249 250 251 / 1)',
-            paddingTop: '0.5em',
-            paddingBottom: '0.5em',
-            paddingLeft: '0.75em',
-            paddingRight: '0.75em',
-            transitionDuration: '100ms'
-        },
-        '.attach .file.active': {
-            borderColor: 'rgb(0 0 0 / 0.5)'
-        },
-        "[data-fnc='fnc']": _object_spread({}, TAG_STYLES.fnc),
-        "[data-fnd='fnd']": _object_spread({}, TAG_STYLES.fnd),
-        '&:last-child': {
-            marginBottom: 0
-        },
-        'pre,code,kbd,samp': {
-            marginTop: '0',
-            marginBottom: '0',
-            fontFamily: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
-            fontSize: '0.9em',
-            wordWrap: 'normal'
-        },
-        'div[data-be="paragraph"]': {
-            position: 'relative',
-            font: 'var(--font-text-paragraph-lg)',
-            paddingTop: '0em',
-            display: 'block',
-            fontSize: '1em',
-            lineHeight: '1.5em',
-            margin: 'var(--margin-2x) 0'
-        },
-        'h1,h2,h3,h4,h5,h6': {
+        '> div.empty:first-child [data-slate-node="text"]': {
+            display: 'inline-block',
+            minWidth: 20
+        }
+    }), _define_property(_obj, '&> *:first-child', {
+        marginTop: 0
+    }), _define_property(_obj, '&-report', {
+        fontSize: '16px'
+    }), _define_property(_obj, '& > .link', {
+        textDecoration: 'underline'
+    }), _define_property(_obj, '& > .attach', {
+        padding: '3px 0'
+    }), _define_property(_obj, '& >.attach:not(:last-child)', {
+        marginBottom: '0.3em'
+    }), _define_property(_obj, '.attach .file', {
+        borderRadius: '12px',
+        borderWidth: '1px',
+        borderColor: 'rgb(229 231 235 / 1)',
+        backgroundColor: 'rgb(249 250 251 / 1)',
+        paddingTop: '0.5em',
+        paddingBottom: '0.5em',
+        paddingLeft: '0.75em',
+        paddingRight: '0.75em',
+        transitionDuration: '100ms'
+    }), _define_property(_obj, '.attach .file.active', {
+        borderColor: 'rgb(0 0 0 / 0.5)'
+    }), _define_property(_obj, "[data-fnc='fnc']", _object_spread({}, TAG_STYLES.fnc)), _define_property(_obj, "[data-fnd='fnd']", _object_spread({}, TAG_STYLES.fnd)), _define_property(_obj, '&:last-child', {
+        marginBottom: 0
+    }), _define_property(_obj, 'pre,code,kbd,samp', {
+        marginTop: '0',
+        marginBottom: '0',
+        fontFamily: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
+        fontSize: '0.9em',
+        wordWrap: 'normal'
+    }), _define_property(_obj, 'div[data-be="paragraph"]', {
+        position: 'relative',
+        font: 'var(--font-text-paragraph-lg)',
+        paddingTop: '0em',
+        display: 'block',
+        fontSize: '1em',
+        lineHeight: '1.5em',
+        margin: 'var(--margin-2x) 0'
+    }), _define_property(_obj, 'h1,h2,h3,h4,h5,h6', {
+        position: 'relative',
+        textWrap: 'balance',
+        '[data-drag-handle]': {
+            top: 'calc(3px + 0.05em) !important'
+        }
+    }), _define_property(_obj, "h1", {
+        fontSize: '30px',
+        lineHeight: '38px',
+        fontWeight: '600',
+        margin: 'var(--margin-8x) 0',
+        'a,span[data-url="url"]': {
+            fontSize: '30px',
+            fontWeight: '600'
+        }
+    }), _define_property(_obj, "h2", {
+        fontSize: '24px',
+        lineHeight: '32px',
+        fontWeight: '600',
+        marginTop: 'var(--margin-8x)',
+        marginBottom: 'var(--margin-4x)',
+        'a,span[data-url="url"]': {
+            fontSize: '24x',
+            fontWeight: '600'
+        }
+    }), _define_property(_obj, "h3", {
+        fontSize: '18px',
+        lineHeight: '26px',
+        fontWeight: '600',
+        marginTop: 'var(--margin-4x)',
+        marginBottom: 'var(--margin-2x)',
+        'a,span[data-url="url"]': {
+            fontSize: '18x',
+            fontWeight: '600'
+        }
+    }), _define_property(_obj, "h4", {
+        fontSize: '15px',
+        lineHeight: '24px',
+        fontWeight: '600',
+        marginTop: 'var(--margin-2x)',
+        'a,span[data-url="url"]': {
+            fontSize: '15x',
+            fontWeight: '600'
+        }
+    }), _define_property(_obj, "h5", {
+        fontSize: '15px',
+        lineHeight: '24px',
+        fontWeight: '600',
+        marginTop: 'var(--margin-2x)',
+        'a,span[data-url="url"]': {
+            fontSize: '15x',
+            fontWeight: '600'
+        }
+    }), _define_property(_obj, "h6", {
+        fontSize: '15px',
+        lineHeight: '24px',
+        fontWeight: '600',
+        marginTop: 'var(--margin-2x)',
+        'a,span[data-url="url"]': {
+            fontSize: '15x',
+            fontWeight: '600'
+        }
+    }), _define_property(_obj, 'a,span[data-url="url"]', {
+        lineHeight: '24px',
+        position: 'relative',
+        font: 'var(--font-text-body-lg)',
+        color: 'var(--color-gray-text-default)',
+        textDecoration: 'underline',
+        textDecorationColor: 'var(--color-gray-border-light);',
+        textUnderlineOffset: '4px',
+        cursor: 'pointer',
+        '&:hover': {
+            textDecorationColor: 'var(--color-gray-text-default)'
+        },
+        '&::after': {
+            content: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.666667,4L11.33333,4C11.70152,4,12,4.298477,12,4.666667L12,11.33333C12,11.70152,11.70152,12,11.33333,12C10.96514,12,10.66667,11.70152,10.66667,11.33333L10.66667,6.27614L5.13828,11.80453C5.01305,11.92976,4.843478,12,4.666667,12C4.298477,12,4,11.70152,4,11.33333C4,11.15652,4.0702379,10.98695,4.195262,10.861930000000001L9.72386,5.33333L4.666667,5.33333C4.298477,5.33333,4,5.03486,4,4.666667C4,4.298477,4.298477,4,4.666667,4Z' fill-rule='evenodd' fill='rgba(0,1,3,0.45)'/%3E%3C/svg%3E\")",
+            width: '16px',
+            height: '16px',
             position: 'relative',
-            textWrap: 'balance',
-            '[data-drag-handle]': {
-                top: 'calc(3px + 0.05em) !important'
-            }
+            marginLeft: '2px',
+            top: '3px',
+            pointerEvents: 'none'
         },
+        '&:hover::after': {
+            content: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.666667,4L11.33333,4C11.70152,4,12,4.298477,12,4.666667L12,11.33333C12,11.70152,11.70152,12,11.33333,12C10.96514,12,10.66667,11.70152,10.66667,11.33333L10.66667,6.27614L5.13828,11.80453C5.01305,11.92976,4.843478,12,4.666667,12C4.298477,12,4,11.70152,4,11.33333C4,11.15652,4.0702379,10.98695,4.195262,10.861930000001L9.72386,5.33333L4.666667,5.33333C4.298477,5.33333,4,5.03486,4,4.666667C4,4.298477,4.298477,4,4.666667,4Z' fill-rule='evenodd' fill='rgba(0,1,3,0.88)'/%3E%3C/svg%3E\")"
+        }
+    }), _define_property(_obj, 'ol,ul', {
+        paddingLeft: '1.8em',
+        marginTop: 'var(--margin-2x)',
+        marginBottom: 'var(--margin-4x)'
+    }), _define_property(_obj, "li", {
+        position: 'relative',
+        margin: 'var(--margin-2x) 0',
+        '&::marker': {
+            color: 'var(--color-gray-text-light)',
+            fontWeight: 600,
+            fontSize: '0.9rem',
+            lineHeight: 'var(--line-height-base)',
+            letterSpacing: 'var(--letter-spacing-base)',
+            fontFamily: 'var(--font-family-base)'
+        },
+        'ul, ol': {
+            margin: 0
+        }
+    }), _define_property(_obj, 'li:has(ul), li:has(ol), li:has(+ li ul), li:has(+ li ol), li:has(~ li ul), li:has(~ li ol)', {
+        marginTop: 'var(--margin-4x)'
+    }), _define_property(_obj, 'li:has(ul) ~ li, li:has(ol) ~ li', {
+        marginTop: 'var(--margin-4x)'
+    }), _define_property(_obj, 'li > p', {
+        marginTop: '1em'
+    }), _define_property(_obj, 'li + li', {
+        marginTop: '0.25em'
+    }), _define_property(_obj, "blockquote", {
+        display: 'flex',
+        padding: '8px 12px',
+        gap: '10px',
+        flexGrow: 1,
+        zIndex: 1,
+        fontSize: 'var(--font-size-base)',
+        fontWeight: 'normal',
+        lineHeight: '160%',
+        letterSpacing: 'normal',
+        position: 'relative',
+        color: 'var(--color-gray-text-secondary)',
+        margin: '0 !important',
+        '&:before': {
+            content: "''",
+            left: '0',
+            position: 'absolute',
+            top: '11px',
+            height: 'calc(100% - 22px)',
+            borderRadius: '4px',
+            width: '3px',
+            display: 'flex',
+            alignSelf: 'stretch',
+            zIndex: 0,
+            backgroundColor: 'var(--color-gray-control-fill-secondary)'
+        }
+    }), _define_property(_obj, '[data-be="media-container"], [data-be="image-container"]', {
+        display: 'flex',
+        minWidth: 0,
+        maxWidth: '100%'
+    }), _define_property(_obj, '@media screen and (max-width: 600px)', {
         h1: {
-            fontSize: '30px',
-            lineHeight: '38px',
-            fontWeight: '600',
-            margin: 'var(--margin-8x) 0',
-            'a,span[data-url="url"]': {
-                fontSize: '30px',
-                fontWeight: '600'
-            }
+            fontSize: '1.5em'
         },
         h2: {
-            fontSize: '24px',
-            lineHeight: '32px',
-            fontWeight: '600',
-            marginTop: 'var(--margin-8x)',
-            marginBottom: 'var(--margin-4x)',
-            'a,span[data-url="url"]': {
-                fontSize: '24x',
-                fontWeight: '600'
-            }
+            fontSize: '1.25em'
         },
         h3: {
-            fontSize: '18px',
-            lineHeight: '26px',
-            fontWeight: '600',
-            marginTop: 'var(--margin-4x)',
-            marginBottom: 'var(--margin-2x)',
-            'a,span[data-url="url"]': {
-                fontSize: '18x',
-                fontWeight: '600'
-            }
+            fontSize: '1.125em'
         },
         h4: {
-            fontSize: '15px',
-            lineHeight: '24px',
-            fontWeight: '600',
-            marginTop: 'var(--margin-2x)',
-            'a,span[data-url="url"]': {
-                fontSize: '15x',
-                fontWeight: '600'
-            }
+            fontSize: '1em'
         },
-        h5: {
-            fontSize: '15px',
-            lineHeight: '24px',
-            fontWeight: '600',
-            marginTop: 'var(--margin-2x)',
-            'a,span[data-url="url"]': {
-                fontSize: '15x',
-                fontWeight: '600'
-            }
+        'h1,h2': {
+            marginTop: '1em',
+            marginBottom: '1em'
         },
-        h6: {
-            fontSize: '15px',
-            lineHeight: '24px',
-            fontWeight: '600',
-            marginTop: 'var(--margin-2x)',
-            'a,span[data-url="url"]': {
-                fontSize: '15x',
-                fontWeight: '600'
-            }
-        },
-        'a,span[data-url="url"]': {
-            lineHeight: '24px',
-            position: 'relative',
-            font: 'var(--font-text-body-lg)',
-            color: 'var(--color-gray-text-default)',
-            textDecoration: 'underline',
-            textDecorationColor: 'var(--color-gray-border-light);',
-            textUnderlineOffset: '4px',
-            cursor: 'pointer',
-            '&:hover': {
-                textDecorationColor: 'var(--color-gray-text-default)'
-            },
-            '&::after': {
-                content: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.666667,4L11.33333,4C11.70152,4,12,4.298477,12,4.666667L12,11.33333C12,11.70152,11.70152,12,11.33333,12C10.96514,12,10.66667,11.70152,10.66667,11.33333L10.66667,6.27614L5.13828,11.80453C5.01305,11.92976,4.843478,12,4.666667,12C4.298477,12,4,11.70152,4,11.33333C4,11.15652,4.0702379,10.98695,4.195262,10.861930000000001L9.72386,5.33333L4.666667,5.33333C4.298477,5.33333,4,5.03486,4,4.666667C4,4.298477,4.298477,4,4.666667,4Z' fill-rule='evenodd' fill='rgba(0,1,3,0.45)'/%3E%3C/svg%3E\")",
-                width: '16px',
-                height: '16px',
-                position: 'relative',
-                marginLeft: '2px',
-                top: '3px',
-                pointerEvents: 'none'
-            },
-            '&:hover::after': {
-                content: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.666667,4L11.33333,4C11.70152,4,12,4.298477,12,4.666667L12,11.33333C12,11.70152,11.70152,12,11.33333,12C10.96514,12,10.66667,11.70152,10.66667,11.33333L10.66667,6.27614L5.13828,11.80453C5.01305,11.92976,4.843478,12,4.666667,12C4.298477,12,4,11.70152,4,11.33333C4,11.15652,4.0702379,10.98695,4.195262,10.861930000001L9.72386,5.33333L4.666667,5.33333C4.298477,5.33333,4,5.03486,4,4.666667C4,4.298477,4.298477,4,4.666667,4Z' fill-rule='evenodd' fill='rgba(0,1,3,0.88)'/%3E%3C/svg%3E\")"
-            }
+        'h3,h4,h5,h6': {
+            marginTop: '0.8em',
+            marginBottom: '0.8em'
         },
         'ol,ul': {
-            paddingLeft: '1.8em',
-            marginTop: 'var(--margin-2x)',
-            marginBottom: 'var(--margin-4x)'
-        },
-        li: {
-            position: 'relative',
-            margin: 'var(--margin-2x) 0',
-            '&::marker': {
-                color: 'var(--color-gray-text-light)',
-                fontWeight: 600,
-                fontSize: '0.9rem',
-                lineHeight: 'var(--line-height-base)',
-                letterSpacing: 'var(--letter-spacing-base)',
-                fontFamily: 'var(--font-family-base)'
-            },
-            'ul, ol': {
-                margin: 0
-            }
-        },
-        'li:has(ul), li:has(ol), li:has(+ li ul), li:has(+ li ol), li:has(~ li ul), li:has(~ li ol)': {
-            marginTop: 'var(--margin-4x)'
-        },
-        'li:has(ul) ~ li, li:has(ol) ~ li': {
-            marginTop: 'var(--margin-4x)'
-        },
-        'li > p': {
-            marginTop: '1em'
-        },
-        'li + li': {
-            marginTop: '0.25em'
+            paddingLeft: '1em'
         },
-        blockquote: {
-            display: 'flex',
-            padding: '8px 12px',
-            gap: '10px',
-            flexGrow: 1,
-            zIndex: 1,
-            fontSize: 'var(--font-size-base)',
-            fontWeight: 'normal',
-            lineHeight: '160%',
-            letterSpacing: 'normal',
-            position: 'relative',
-            color: 'var(--color-gray-text-secondary)',
-            margin: '0 !important',
-            '&:before': {
-                content: "''",
-                left: '0',
-                position: 'absolute',
-                top: '11px',
-                height: 'calc(100% - 22px)',
-                borderRadius: '4px',
-                width: '3px',
-                display: 'flex',
-                alignSelf: 'stretch',
-                zIndex: 0,
-                backgroundColor: 'var(--color-gray-control-fill-secondary)'
-            }
-        },
-        '[data-be="media-container"], [data-be="image-container"]': {
-            display: 'flex',
-            minWidth: 0,
-            maxWidth: '100%'
-        },
-        '@media screen and (max-width: 600px)': {
-            h1: {
-                fontSize: '1.5em'
-            },
-            h2: {
-                fontSize: '1.25em'
-            },
-            h3: {
-                fontSize: '1.125em'
-            },
-            h4: {
-                fontSize: '1em'
-            },
-            'h1,h2': {
-                marginTop: '1em',
-                marginBottom: '1em'
-            },
-            'h3,h4,h5,h6': {
-                marginTop: '0.8em',
-                marginBottom: '0.8em'
+        // 移动端图片和视频响应式样式
+        '[data-be="image"], [data-be="media"]': {
+            width: '100%',
+            maxWidth: '100%',
+            boxSizing: 'border-box',
+            overflow: 'hidden',
+            '[data-be="media-container"]': {
+                width: '100%',
+                maxWidth: '100%',
+                padding: '2px',
+                boxSizing: 'border-box'
             },
-            'ol,ul': {
-                paddingLeft: '1em'
+            'img, video': {
+                maxWidth: '100%',
+                height: 'auto',
+                display: 'block'
             },
-            // 移动端图片和视频响应式样式
-            '[data-be="image"], [data-be="media"]': {
-                width: '100%',
+            '[data-testid="resize-image-container"]': {
                 maxWidth: '100%',
-                boxSizing: 'border-box',
-                overflow: 'hidden',
-                '[data-be="media-container"]': {
-                    width: '100%',
-                    maxWidth: '100%',
-                    padding: '2px',
-                    boxSizing: 'border-box'
-                },
-                'img, video': {
-                    maxWidth: '100%',
-                    height: 'auto',
-                    display: 'block'
-                },
-                '[data-testid="resize-image-container"]': {
-                    maxWidth: '100%',
-                    width: '100% !important',
-                    boxSizing: 'border-box'
-                },
-                '[data-testid="video-element"]': {
-                    maxWidth: '100%',
-                    width: '100% !important',
-                    height: 'auto'
-                }
-            }
-        },
-        '[data-be]:not(p):not(data-be="list")': {
-            position: 'relative',
-            '*': {
-                outline: 'none',
+                width: '100% !important',
                 boxSizing: 'border-box'
+            },
+            '[data-testid="video-element"]': {
+                maxWidth: '100%',
+                width: '100% !important',
+                height: 'auto'
             }
-        },
-        '[data-be="list"] > ul': {
-            marginTop: '0.25em',
-            marginBottom: '0.25em'
-        },
-        '[data-be="chart"]': {
-            marginTop: '0.5em',
-            marginBottom: '0.5em'
-        },
-        '[data-be="card"]': {
-            marginTop: '0.5em',
-            marginBottom: '0.5em'
-        },
-        '& code&-inline-code': {
-            display: 'inline',
-            fontFamily: "'Roboto,Mono SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
-            margin: '1px 3px',
-            wordBreak: 'break-all',
-            font: 'var(--font-text-code-base)',
-            letterSpacing: 'normal',
-            color: 'var(--color-gray-text-default)',
-            alignItems: 'center',
-            padding: '4px 6px',
-            gap: '4px',
-            zIndex: 1,
-            borderRadius: '6px',
-            background: 'var(--color-gray-bg-tip)'
-        },
-        '& &-comment-comment': {
-            display: 'inline-block',
-            background: "linear-gradient(transparent 65%, ".concat(COMMENT_HIGHLIGHT_COLOR, ")"),
-            cursor: 'pointer'
-        },
-        '& &-comment-highlight': {
-            backgroundColor: COMMENT_HIGHLIGHT_COLOR,
-            borderBottom: 0,
-            cursor: 'pointer'
-        },
-        '& &-high-text': {
-            borderRadius: '12px'
-        },
-        '& &-m-html': {
-            color: 'rgba(0,0,0,0.45)'
-        },
-        '& &-jinja-variable': {
-            color: 'var(--color-primary-control-fill-primary, #1677ff)'
-        },
-        '& &-jinja-tag': {
-            color: 'var(--color-orange-6, #d46b08)'
-        },
-        '& &-jinja-comment': {
-            color: 'var(--color-text-tertiary, rgba(0,0,0,0.25))',
-            fontStyle: 'italic'
-        },
-        '&:not(:last-child)': {
-            marginBottom: '0.5em'
-        },
-        "h2 + [data-be='list'] ul": {
-            marginTop: '0'
-        },
-        "h2 + [data-be='list'] ol": {
-            marginTop: '0'
-        },
-        '[data-align="left"]': {
-            textAlign: 'left'
-        },
-        '[data-align="center"]': {
-            textAlign: 'center'
-        },
-        '[data-align="right"]': {
-            textAlign: 'right'
-        },
-        // 分割线
-        hr: {
-            border: 'none',
-            borderTop: '1px solid var(--color-gray-border-light)',
-            padding: '0',
-            height: '0',
-            margin: 'var(--margin-8x) 0'
         }
-    }), _define_property(_obj, "".concat(token.componentCls, "-compact"), {
+    }), _define_property(_obj, '[data-be]:not(p):not(data-be="list")', {
+        position: 'relative',
+        '*': {
+            outline: 'none',
+            boxSizing: 'border-box'
+        }
+    }), _define_property(_obj, '[data-be="list"] > ul', {
+        marginTop: '0.25em',
+        marginBottom: '0.25em'
+    }), _define_property(_obj, '[data-be="chart"]', {
+        marginTop: '0.5em',
+        marginBottom: '0.5em'
+    }), _define_property(_obj, '[data-be="card"]', {
+        marginTop: '0.5em',
+        marginBottom: '0.5em'
+    }), _define_property(_obj, '& code&-inline-code', {
+        display: 'inline',
+        fontFamily: "'Roboto,Mono SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
+        margin: '1px 3px',
+        wordBreak: 'break-all',
+        font: 'var(--font-text-code-base)',
+        letterSpacing: 'normal',
+        color: 'var(--color-gray-text-default)',
+        alignItems: 'center',
+        padding: '4px 6px',
+        gap: '4px',
+        zIndex: 1,
+        borderRadius: '6px',
+        background: 'var(--color-gray-bg-tip)'
+    }), _define_property(_obj, '& &-comment-comment', {
+        display: 'inline-block',
+        background: "linear-gradient(transparent 65%, ".concat(COMMENT_HIGHLIGHT_COLOR, ")"),
+        cursor: 'pointer'
+    }), _define_property(_obj, '& &-comment-highlight', {
+        backgroundColor: COMMENT_HIGHLIGHT_COLOR,
+        borderBottom: 0,
+        cursor: 'pointer'
+    }), _define_property(_obj, '& &-high-text', {
+        borderRadius: '12px'
+    }), _define_property(_obj, '& &-m-html', {
+        color: 'rgba(0,0,0,0.45)'
+    }), _define_property(_obj, '& &-jinja-variable', {
+        color: "var(".concat(JINJA_CSS_VAR.variable, ")")
+    }), _define_property(_obj, '& &-jinja-tag', {
+        color: "var(".concat(JINJA_CSS_VAR.tag, ")")
+    }), _define_property(_obj, '& &-jinja-comment', {
+        color: "var(".concat(JINJA_CSS_VAR.comment, ")"),
+        fontStyle: 'italic'
+    }), _define_property(_obj, '& &-jinja-keyword', {
+        color: "var(".concat(JINJA_CSS_VAR.keyword, ")")
+    }), _define_property(_obj, '& &-jinja-string', {
+        color: "var(".concat(JINJA_CSS_VAR.string, ")")
+    }), _define_property(_obj, '& &-jinja-number', {
+        color: "var(".concat(JINJA_CSS_VAR.number, ")")
+    }), _define_property(_obj, '& &-jinja-filter', {
+        color: "var(".concat(JINJA_CSS_VAR.filter, ")")
+    }), _define_property(_obj, '& &-jinja-variable-name', {
+        color: "var(".concat(JINJA_CSS_VAR.variableName, ")")
+    }), _define_property(_obj, '& &-jinja-placeholder', {
+        color: "var(".concat(JINJA_CSS_VAR.placeholder, ")"),
+        backgroundColor: "var(".concat(JINJA_CSS_VAR.placeholderBg, ")"),
+        borderRadius: '2px',
+        padding: '0 2px'
+    }), _define_property(_obj, '& &-jinja-delimiter', {
+        color: "var(".concat(JINJA_CSS_VAR.delimiter, ")")
+    }), _define_property(_obj, '&:not(:last-child)', {
+        marginBottom: '0.5em'
+    }), _define_property(_obj, "h2 + [data-be='list'] ul", {
+        marginTop: '0'
+    }), _define_property(_obj, "h2 + [data-be='list'] ol", {
+        marginTop: '0'
+    }), _define_property(_obj, '[data-align="left"]', {
+        textAlign: 'left'
+    }), _define_property(_obj, '[data-align="center"]', {
+        textAlign: 'center'
+    }), _define_property(_obj, '[data-align="right"]', {
+        textAlign: 'right'
+    }), // 分割线
+    _define_property(_obj, "hr", {
+        border: 'none',
+        borderTop: '1px solid var(--color-gray-border-light)',
+        padding: '0',
+        height: '0',
+        margin: 'var(--margin-8x) 0'
+    }), _obj)), _define_property(_obj1, "".concat(token.componentCls, "-compact"), {
         'div[data-be="paragraph"]': {
             paddingTop: '0px',
             paddingBottom: '0px',
@@ -575,13 +555,13 @@ var genStyle = function genStyle(token) {
             marginTop: '0.3em',
             marginBottom: '0.3em'
         }
-    }), _define_property(_obj, "@media (max-width: ".concat(MOBILE_BREAKPOINT, ")"), {
+    }), _define_property(_obj1, "@media (max-width: ".concat(MOBILE_BREAKPOINT, ")"), {
         'div[data-be="paragraph"]': {
             fontSize: '0.95em',
             lineHeight: '1.4em',
             margin: 'var(--margin-1x) 0'
         }
-    }), _obj;
+    }), _obj1;
 };
 var genSlideStyle = function genSlideStyle(token) {
     var _obj;