@blueking/ai-ui-sdk 0.3.0-beta.9 → 0.4.1-beta.1

package/dist/components/render-file-card/index.vue.css

@@ -1,21 +1,21 @@
 
-.upload-file-home[data-v-va29d2jc] {
+.upload-file-home[data-v-n0hl9fem] {
   position: relative;
   background: #FFFFFF;
   border: 1px solid #DCDEE5;
   border-radius: 4px;
   padding: 12px 12px 10px 12px;
 }
-.upload-file-home[data-v-va29d2jc]:hover {
+.upload-file-home[data-v-n0hl9fem]:hover {
     border: 1px solid #3A84FF;
 }
-.upload-file-home:hover .file-icons[data-v-va29d2jc] {
+.upload-file-home:hover .file-icons[data-v-n0hl9fem] {
       display: flex;
 }
-.upload-file-home .file-icon[data-v-va29d2jc] {
+.upload-file-home .file-icon[data-v-n0hl9fem] {
     font-size: 32px;
 }
-.upload-file-home .file-content[data-v-va29d2jc] {
+.upload-file-home .file-content[data-v-n0hl9fem] {
     font-size: 12px;
     flex: 1;
     align-items: flex-start;
@@ -23,28 +23,28 @@
     font-weight: normal;
     width: 0;
 }
-.upload-file-home .file-content .file-name[data-v-va29d2jc] {
+.upload-file-home .file-content .file-name[data-v-n0hl9fem] {
       width: 100%;
       font-size: 14px;
       line-height: 20px;
 }
-.upload-file-home .file-content .file-size[data-v-va29d2jc] {
+.upload-file-home .file-content .file-size[data-v-n0hl9fem] {
       font-size: 12px;
       color: #979BA5;
       line-height: 20px;
 }
-.upload-file-home .file-icons[data-v-va29d2jc] {
+.upload-file-home .file-icons[data-v-n0hl9fem] {
     display: none;
     color: #979BA5;
 }
-.upload-file-home .file-icons .bkaidev-icon[data-v-va29d2jc] {
+.upload-file-home .file-icons .ai-ui-sdk-icon[data-v-n0hl9fem]  {
       cursor: pointer;
       margin-right: 15px;
       font-size: 16px;
 }
-.upload-file-home .file-icons .bkaidev-icon[data-v-va29d2jc]:hover {
+.upload-file-home .file-icons .ai-ui-sdk-icon[data-v-n0hl9fem]:hover {
         color: #3A84FF;
 }
-.upload-file-home .file-icons .bkaidev-delete[data-v-va29d2jc] {
+.upload-file-home .file-icons .ai-ui-sdk-delete[data-v-n0hl9fem] {
       margin: 0;
 }

package/dist/components/render-file-card/index.vue.d.ts

@@ -14,7 +14,7 @@ declare const __VLS_export: <T extends IFileInfo>(__VLS_props: NonNullable<Await
     };
     emit: (event: "delete", file: T) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/render-file-card/index.vue.js

@@ -1,5 +1,5 @@
 import script from './index.script.vue.js.js';
-script.__scopeId = "data-v-va29d2jc";
+script.__scopeId = "data-v-n0hl9fem";
 script.__file = "./src/components/render-file-card/index.vue";
 import './index.vue.css';
 export default script;

package/dist/components/render-file-type-icon/index.script.vue.js.js

@@ -13,7 +13,8 @@ export default /*@__PURE__*/ _defineComponent({
             html: 'ai-ui-sdk-icon ai-ui-sdk-wangye',
             csv: 'ai-ui-sdk-icon ai-ui-sdk-excel',
             xlsx: 'ai-ui-sdk-icon ai-ui-sdk-excel',
-            folder: 'ai-ui-sdk-icon ai-ui-sdk-folder-fill'
+            folder: 'ai-ui-sdk-icon ai-ui-sdk-folder-fill',
+            zip: 'ai-ui-sdk-icon ai-ui-sdk-archive-line'
         };
         return (_ctx, _cache)=>{
             return _openBlock(), _createElementBlock("i", {

package/dist/components/render-file-type-icon/index.vue.css

@@ -1,16 +1,19 @@
 
-.ai-ui-sdk-icon.ai-ui-sdk-pdf[data-v-yfk4rm97] {
+.ai-ui-sdk-icon.ai-ui-sdk-pdf[data-v-sj03qyo9] {
   color: #EA3636;
 }
-.ai-ui-sdk-icon.ai-ui-sdk-doc-2[data-v-yfk4rm97], .ai-ui-sdk-icon.ai-ui-sdk-ppt-2[data-v-yfk4rm97], .ai-ui-sdk-icon.ai-ui-sdk-markdown[data-v-yfk4rm97] {
+.ai-ui-sdk-icon.ai-ui-sdk-doc-2[data-v-sj03qyo9], .ai-ui-sdk-icon.ai-ui-sdk-ppt-2[data-v-sj03qyo9], .ai-ui-sdk-icon.ai-ui-sdk-markdown[data-v-sj03qyo9] {
   color: #3A84FF;
 }
-.ai-ui-sdk-icon.ai-ui-sdk-folder-fill[data-v-yfk4rm97] {
+.ai-ui-sdk-icon.ai-ui-sdk-folder-fill[data-v-sj03qyo9] {
   color: #C4C6CC;
 }
-.ai-ui-sdk-icon.ai-ui-sdk-excel[data-v-yfk4rm97] {
+.ai-ui-sdk-icon.ai-ui-sdk-archive-line[data-v-sj03qyo9] {
+  color: #979BA5;
+}
+.ai-ui-sdk-icon.ai-ui-sdk-excel[data-v-sj03qyo9] {
   color: #2DCB56;
 }
-.ai-ui-sdk-icon.ai-ui-sdk-wangye[data-v-yfk4rm97] {
+.ai-ui-sdk-icon.ai-ui-sdk-wangye[data-v-sj03qyo9] {
   color: #14A568;
 }

package/dist/components/render-file-type-icon/index.vue.js

@@ -1,5 +1,5 @@
 import script from './index.script.vue.js.js';
-script.__scopeId = "data-v-yfk4rm97";
+script.__scopeId = "data-v-sj03qyo9";
 script.__file = "./src/components/render-file-type-icon/index.vue";
 import './index.vue.css';
 export default script;

package/dist/components/render-generate-tag/index.script.vue.js.js

@@ -29,13 +29,13 @@ export default /*@__PURE__*/ _defineComponent({
         const props = __props;
         const getIconClass = (generateType)=>{
             if (generateType === EnumCharacter.Public) {
-                return 'bkaidev-icon bkaidev-suoyoukongjiangongkai';
+                return 'ai-ui-sdk-icon ai-ui-sdk-suoyoukongjiangongkai';
             }
             if (generateType === EnumCharacter.Space) {
-                return 'bkaidev-icon bkaidev-guanlikongjian-3';
+                return 'ai-ui-sdk-icon ai-ui-sdk-benkongjiangongkai';
             }
             if (generateType === EnumCharacter.User) {
-                return 'bkaidev-icon bkaidev-lock-2';
+                return 'ai-ui-sdk-icon ai-ui-sdk-lock-2';
             }
             return '';
         };

package/dist/components/render-generate-tag/index.vue.css

@@ -1,22 +1,22 @@
 
-.generate-type-tag[data-v-9dk0klcf] {
+.generate-type-tag[data-v-c2flc5rt] {
   border-radius: 2px;
   text-align: left;
   white-space: nowrap;
 }
-.generate-type-tag.public[data-v-9dk0klcf] {
+.generate-type-tag.public[data-v-c2flc5rt] {
     color: #2CAF5E;
     background-color: #DAF6E5;
 }
-.generate-type-tag.public[data-v-9dk0klcf]:hover {
+.generate-type-tag.public[data-v-c2flc5rt]:hover {
       color: #299E56;
       background-color: #CBF0DA;
 }
-.generate-type-tag.space[data-v-9dk0klcf] {
+.generate-type-tag.space[data-v-c2flc5rt] {
     color: #45A0A5;
     background-color: #D8F4F5;
 }
-.generate-type-tag.space[data-v-9dk0klcf]:hover {
+.generate-type-tag.space[data-v-c2flc5rt]:hover {
       color: #388A8E;
       background-color: #B6E7E9;
 }

package/dist/components/render-generate-tag/index.vue.js

@@ -1,5 +1,5 @@
 import script from './index.script.vue.js.js';
-script.__scopeId = "data-v-9dk0klcf";
+script.__scopeId = "data-v-c2flc5rt";
 script.__file = "./src/components/render-generate-tag/index.vue";
 import './index.vue.css';
 export default script;

package/dist/components/render-header/index.script.vue.js.js

@@ -15,7 +15,7 @@ const _hoisted_4 = [
 ];
 const _hoisted_5 = {
     key: 0,
-    class: "bkaidev-icon bkaidev-info-line g-text-14 g-ml-4 !g-cursor-pointer"
+    class: "ai-ui-sdk-icon ai-ui-sdk-info-line g-text-14 g-ml-4 !g-cursor-pointer"
 };
 export default /*@__PURE__*/ _defineComponent({
     props: {

package/dist/components/render-header/index.vue.css

@@ -1,13 +1,13 @@
 
-.header-home[data-v-tkybkfkx] {
+.header-home[data-v-sjtvkcje] {
   width: 100%;
   background: #FFFFFF;
   box-shadow: 0 3px 4px 0 #0000000a;
 }
-.render-tab[data-v-tkybkfkx] {
+.render-tab[data-v-sjtvkcje] {
   border-bottom: 2px solid transparent;
 }
-.render-tab.active[data-v-tkybkfkx] {
+.render-tab.active[data-v-sjtvkcje] {
     color: #3A84FF;
     border-bottom: 2px solid #3A84FF;
 }

package/dist/components/render-header/index.vue.js

@@ -1,5 +1,5 @@
 import script from './index.script.vue.js.js';
-script.__scopeId = "data-v-tkybkfkx";
+script.__scopeId = "data-v-sjtvkcje";
 script.__file = "./src/components/render-header/index.vue";
 import './index.vue.css';
 export default script;

package/dist/components/render-knowledge/icon/index.script.vue.js.js

@@ -16,13 +16,13 @@ export default /*@__PURE__*/ _defineComponent({
                 style: _normalizeStyle({
                     fontSize: `${__props.size}px`
                 }),
-                class: "bkaidev-icon bkaidev-quanbu-xuanzhong"
+                class: "ai-ui-sdk-icon ai-ui-sdk-quanbu-xuanzhong"
             }, null, 4 /* STYLE */ )) : __props.data.pathType === _unref(KnowledgePathType).Folder ? (_openBlock(), _createElementBlock("i", {
                 key: 1,
                 style: _normalizeStyle({
                     fontSize: `${__props.size}px`
                 }),
-                class: "bkaidev-icon bkaidev-folder-fill"
+                class: "ai-ui-sdk-icon ai-ui-sdk-folder-fill"
             }, null, 4 /* STYLE */ )) : __props.data.pathType === _unref(KnowledgePathType).File ? (_openBlock(), _createBlock(RenderFileTypeIcon, {
                 key: 2,
                 type: __props.data.fileType,
@@ -34,7 +34,7 @@ export default /*@__PURE__*/ _defineComponent({
                 "style"
             ])) : (_openBlock(), _createElementBlock("i", {
                 key: 3,
-                class: "bkaidev-icon bkaidev-zhishikufenlei",
+                class: "ai-ui-sdk-icon ai-ui-sdk-zhishikufenlei",
                 style: _normalizeStyle({
                     fontSize: `${__props.size}px`
                 })

package/dist/components/render-knowledge/icon/index.vue.css

@@ -1,4 +1,4 @@
 
-.bkaidev-icon[data-v-9v0i57m8] {
+.ai-ui-sdk-icon[data-v-qs9ithgj] {
   color: #979ba5;
 }

package/dist/components/render-knowledge/icon/index.vue.js

@@ -1,5 +1,5 @@
 import script from './index.script.vue.js.js';
-script.__scopeId = "data-v-9v0i57m8";
+script.__scopeId = "data-v-qs9ithgj";
 script.__file = "./src/components/render-knowledge/icon/index.vue";
 import './index.vue.css';
 export default script;

package/dist/components/render-knowledge/search/index.vue.d.ts

@@ -4,7 +4,7 @@ interface IProps {
     search: IKnowledgeListParam['searchbox'];
     isSimple?: boolean;
     isShowTagSearch?: boolean;
-    apiPrefix: string;
+    apiPrefix?: string;
     spaceId?: string;
     module?: Module;
     memberUrl: string;

package/dist/components/render-knowledgebase/search/index.vue.d.ts

@@ -4,7 +4,7 @@ interface IProps {
     search: IKnowledgebaseListParam;
     isShowAllSearchOptions?: boolean;
     isShowTagSearch?: boolean;
-    apiPrefix: string;
+    apiPrefix?: string;
     spaceId?: string;
     module?: Module;
     memberUrl: string;

package/dist/components/render-like/index.vue.css

@@ -1,20 +1,20 @@
 
-.dislike-icon[data-v-pnamgelt] {
+.dislike-icon[data-v-nuqw3hrv] {
   transform: rotateX(180deg);
 }
-.option-items[data-v-pnamgelt] {
+.option-items[data-v-nuqw3hrv] {
   padding: 1px 8px;
   background-color: #F0F1F5;
   line-height: 22px;
   border-radius: 2px;
 }
-.option-items[data-v-pnamgelt]:hover {
+.option-items[data-v-nuqw3hrv]:hover {
     background-color: #E1ECFF;
     color: #3A84FF;
 }
-.option-items-selected[data-v-pnamgelt]{
+.option-items-selected[data-v-nuqw3hrv]{
   background-color: #E1ECFF;
 }
-[data-v-pnamgelt] .bk-form-item {
+[data-v-nuqw3hrv] .bk-form-item {
   margin-bottom: 17px;
 }

package/dist/components/render-like/index.vue.js

@@ -1,5 +1,5 @@
 import script from './index.script.vue.js.js';
-script.__scopeId = "data-v-pnamgelt";
+script.__scopeId = "data-v-nuqw3hrv";
 script.__file = "./src/components/render-like/index.vue";
 import './index.vue.css';
 export default script;

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

@@ -83,18 +83,18 @@ export default defineComponent({
             // 切换模式按钮
             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.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="bkaidev-icon bkaidev-qiehuan g-mr-4 g-text-16"></i>切换代码模式';
+                    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="bkaidev-icon bkaidev-qiehuan g-mr-4 g-text-16"></i>切换富文本模式';
+                    modeSwitchEl.innerHTML = '<i class="ai-ui-sdk-icon ai-ui-sdk-qiehuan g-mr-4 g-text-16"></i>切换富文本模式';
                 }
             });
             // 全屏按钮复用 use-click-proxy 的全局 full-screen 代理。
@@ -169,31 +169,31 @@ export default defineComponent({
             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) {
-                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);
+                    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', 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);
+                    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) {

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

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

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

@@ -1,3 +1,4 @@
+import { filterXss } from '@blueking/xss-filter';
 const NUMERIC_PROPS = new Set([
     'height',
     'top',
@@ -48,6 +49,10 @@ const SAFE_COLOR_KEYWORDS = new Set([
     'pink',
     'brown'
 ]);
+const SAFE_ATTRIBUTES = new Set([
+    'data-nodeid',
+    'data-clipboard-text'
+]);
 const isSafeCssValue = (value)=>{
     return !DANGEROUS_CSS_VALUE_RE.test(value);
 };
@@ -117,3 +122,94 @@ export const filterCSS = (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/view.postcss.css

@@ -35,21 +35,21 @@
   }
 
   .aidev-markdown-preview .toastui-editor-contents h1, .toastui-editor .toastui-editor-contents h1, .toastui-editor-md-preview .toastui-editor-contents h1 {
-    margin: 32px 0 20px;
+    margin: 36px 0 20px;
     border-bottom: 2px solid #eaecef;
   }
 
   .aidev-markdown-preview .toastui-editor-contents h2, .toastui-editor .toastui-editor-contents h2, .toastui-editor-md-preview .toastui-editor-contents h2 {
-    margin: 24px 0 16px;
+    margin: 32px 0 16px;
     border-bottom: 1px solid #eaecef;
   }
 
   .aidev-markdown-preview .toastui-editor-contents h3, .toastui-editor .toastui-editor-contents h3, .toastui-editor-md-preview .toastui-editor-contents h3 {
-    margin: 18px 0 12px;
+    margin: 24px 0 12px;
   }
 
   .aidev-markdown-preview .toastui-editor-contents h4, .toastui-editor .toastui-editor-contents h4, .toastui-editor-md-preview .toastui-editor-contents h4 {
-    margin: 14px 0 8px;
+    margin: 18px 0 8px;
   }
 
   .aidev-markdown-preview .toastui-editor-contents h5,
@@ -58,7 +58,7 @@
   .toastui-editor .toastui-editor-contents h6,
   .toastui-editor-md-preview .toastui-editor-contents h5,
   .toastui-editor-md-preview .toastui-editor-contents h6 {
-    margin: 10px 0 4px;
+    margin: 14px 0 4px;
   }
 
   .aidev-markdown-preview .toastui-editor-contents i, .toastui-editor .toastui-editor-contents i, .toastui-editor-md-preview .toastui-editor-contents i {

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

@@ -27,10 +27,9 @@ function _object_spread(target) {
     return target;
 }
 import { defineComponent, h, onMounted, onUnmounted, ref, watch } from 'vue';
-import { filterXss } from '@blueking/xss-filter';
 import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
 import { commonConfig } from './common.ts.js';
-import { filterCSS } from './filter-css.ts.js';
+import { escapeHtml } from './filter-css.ts.js';
 import '@toast-ui/editor/dist/toastui-editor-viewer.css';
 import './view.postcss.css';
 export default defineComponent({
@@ -54,96 +53,11 @@ export default defineComponent({
             viewer = new Viewer(_object_spread({
                 el: viewerRef.value,
                 initialValue: props.value,
-                customHTMLSanitizer: (html)=>filterCSS(filterXss(html, {
-                        whiteList: {
-                            a: [
-                                'href',
-                                'target',
-                                'class',
-                                'title',
-                                'rel'
-                            ],
-                            section: [
-                                'class'
-                            ],
-                            i: [
-                                'class'
-                            ],
-                            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'
-                            ]
-                        },
-                        css: false,
-                        onTagAttr: (_tag, name, value)=>{
-                            if (name === 'data-nodeid') {
-                                return `${name}="${value}"`;
-                            }
-                            return undefined;
-                        }
-                    }))
+                customHTMLSanitizer: escapeHtml
             }, commonConfig));
+            viewer.eventEmitter.listen('updatePreview', (editResult)=>{
+                editResult.forEach((item)=>viewer.preview.replaceRangeNodes(item));
+            });
         };
         const handleDestroy = ()=>{
             viewer.destroy();