@king-design/vue 3.8.0-beta.1 → 3.8.0-beta.2

package/components/xmarkdown/index.spec.js

@@ -17,10 +17,10 @@ describe('XMarkdown', function () {
     return _waitFor.apply(this, arguments);
   }
   function _waitFor() {
-    _waitFor = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee32(check, retries, interval) {
+    _waitFor = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee34(check, retries, interval) {
       var i;
-      return _regeneratorRuntime.wrap(function _callee32$(_context66) {
-        while (1) switch (_context66.prev = _context66.next) {
+      return _regeneratorRuntime.wrap(function _callee34$(_context71) {
+        while (1) switch (_context71.prev = _context71.next) {
           case 0:
             if (retries === void 0) {
               retries = 30;
@@ -31,28 +31,28 @@ describe('XMarkdown', function () {
             i = 0;
           case 3:
             if (!(i < retries)) {
-              _context66.next = 11;
+              _context71.next = 11;
               break;
             }
             if (!check()) {
-              _context66.next = 6;
+              _context71.next = 6;
               break;
             }
-            return _context66.abrupt("return", true);
+            return _context71.abrupt("return", true);
           case 6:
-            _context66.next = 8;
+            _context71.next = 8;
             return wait(interval);
           case 8:
             i++;
-            _context66.next = 3;
+            _context71.next = 3;
             break;
           case 11:
-            return _context66.abrupt("return", check());
+            return _context71.abrupt("return", check());
           case 12:
           case "end":
-            return _context66.stop();
+            return _context71.stop();
         }
-      }, _callee32);
+      }, _callee34);
     }));
     return _waitFor.apply(this, arguments);
   }
@@ -814,11 +814,12 @@ describe('XMarkdown', function () {
       }
     }, _callee15);
   })));
-  it('should split rendered content into stable and tail containers and reuse stable DOM on streaming updates', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
-    var Demo, _mount16, instance, element, ready, stableContainer, tailContainer, h1, paragraph, hasTail, sameH1, promoted;
-    return _regeneratorRuntime.wrap(function _callee16$(_context33) {
-      while (1) switch (_context33.prev = _context33.next) {
+  it('should resume typing from previous rendered markdown after remount', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
+    var resumedContent, Demo, _mount16, instance, element, contentElement, initialText, continued;
+    return _regeneratorRuntime.wrap(function _callee16$(_context34) {
+      while (1) switch (_context34.prev = _context34.next) {
         case 0:
+          resumedContent = '# 标题\n\n一段稳定内容。';
           Demo = /*#__PURE__*/function (_Component16) {
             _inheritsLoose(Demo, _Component16);
             function Demo() {
@@ -831,6 +832,103 @@ describe('XMarkdown', function () {
               _this16.XMarkdown = XMarkdown;
               return _this16;
             }
+            Demo.defaults = function defaults() {
+              return {
+                resumedContent: resumedContent,
+                content: resumedContent
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={this.get('content')}\n                    streaming={true}\n                    typing={{interval: 16, step: 2, resumeFrom: this.get('resumedContent')}}\n                />\n            ";
+          _mount16 = mount(Demo), instance = _mount16[0], element = _mount16[1];
+          contentElement = element.querySelector('.k-xmarkdown-content');
+          initialText = contentElement.textContent || '';
+          expect(initialText).to.contain('标题');
+          expect(initialText).to.contain('一段稳定内容');
+          expect(initialText).not.to.contain('继续生成中');
+          instance.set({
+            content: resumedContent + "\n\n\u7EE7\u7EED\u751F\u6210\u4E2D"
+          });
+          _context34.next = 12;
+          return waitFor(function () {
+            var _context33;
+            return _includesInstanceProperty(_context33 = contentElement.textContent).call(_context33, '继续');
+          });
+        case 12:
+          continued = _context34.sent;
+          expect(continued).to.be.true;
+          expect(contentElement.textContent).to.contain('继续');
+        case 15:
+        case "end":
+          return _context34.stop();
+      }
+    }, _callee16);
+  })));
+  it('should support content resume mode before appending new markdown text', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
+    var Demo, _mount17, instance, element, ready, text;
+    return _regeneratorRuntime.wrap(function _callee17$(_context36) {
+      while (1) switch (_context36.prev = _context36.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component17) {
+            _inheritsLoose(Demo, _Component17);
+            function Demo() {
+              var _context35;
+              var _this17;
+              for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
+                args[_key17] = arguments[_key17];
+              }
+              _this17 = _Component17.call.apply(_Component17, _concatInstanceProperty(_context35 = [this]).call(_context35, args)) || this;
+              _this17.XMarkdown = XMarkdown;
+              return _this17;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: '# 标题\n\n已经渲染'
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={this.get('content')}\n                    streaming={true}\n                    typing={{interval: 16, step: 2, resumeFrom: 'content'}}\n                />\n            ";
+          _mount17 = mount(Demo), instance = _mount17[0], element = _mount17[1];
+          _context36.next = 5;
+          return waitFor(function () {
+            return !!element.querySelector('.k-xmarkdown-stable h1');
+          });
+        case 5:
+          ready = _context36.sent;
+          expect(ready).to.be.true;
+          expect(element.querySelector('.k-xmarkdown-content').textContent).to.contain('已经渲染');
+          instance.set('content', '# 标题\n\n已经渲染，继续生成');
+          _context36.next = 11;
+          return wait(20);
+        case 11:
+          text = element.querySelector('.k-xmarkdown-content').textContent || '';
+          expect(text).to.contain('已经渲染');
+          expect(text).not.to.contain('继续生成');
+        case 14:
+        case "end":
+          return _context36.stop();
+      }
+    }, _callee17);
+  })));
+  it('should split rendered content into stable and tail containers and reuse stable DOM on streaming updates', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
+    var Demo, _mount18, instance, element, ready, stableContainer, tailContainer, h1, paragraph, hasTail, sameH1, promoted;
+    return _regeneratorRuntime.wrap(function _callee18$(_context38) {
+      while (1) switch (_context38.prev = _context38.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component18) {
+            _inheritsLoose(Demo, _Component18);
+            function Demo() {
+              var _context37;
+              var _this18;
+              for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
+                args[_key18] = arguments[_key18];
+              }
+              _this18 = _Component18.call.apply(_Component18, _concatInstanceProperty(_context37 = [this]).call(_context37, args)) || this;
+              _this18.XMarkdown = XMarkdown;
+              return _this18;
+            }
             Demo.defaults = function defaults() {
               return {
                 content: '# 标题\n\n一段稳定的话。\n\n',
@@ -840,13 +938,13 @@ describe('XMarkdown', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={this.get('content')}\n                    streaming={this.get('streaming')}\n                />\n            ";
-          _mount16 = mount(Demo), instance = _mount16[0], element = _mount16[1];
-          _context33.next = 5;
+          _mount18 = mount(Demo), instance = _mount18[0], element = _mount18[1];
+          _context38.next = 5;
           return waitFor(function () {
             return !!element.querySelector('.k-xmarkdown-stable h1');
           });
         case 5:
-          ready = _context33.sent;
+          ready = _context38.sent;
           expect(ready).to.be.true;
           stableContainer = element.querySelector('.k-xmarkdown-stable');
           tailContainer = element.querySelector('.k-xmarkdown-tail');
@@ -859,49 +957,49 @@ describe('XMarkdown', function () {
           h1.__kpcStableProbe = 'kept';
           paragraph.__kpcStableParagraphProbe = 'kept';
           instance.set('content', '# 标题\n\n一段稳定的话。\n\n# 新标题');
-          _context33.next = 20;
+          _context38.next = 20;
           return waitFor(function () {
             return !!tailContainer.querySelector('[data-kpc-xmarkdown-tail="true"]');
           }, 30, 20);
         case 20:
-          hasTail = _context33.sent;
+          hasTail = _context38.sent;
           expect(hasTail).to.be.true;
           sameH1 = stableContainer.querySelector('h1');
           expect(sameH1.__kpcStableProbe).to.eql('kept');
           expect(tailContainer.querySelector('[data-kpc-xmarkdown-tail="true"]')).not.to.eql(null);
           expect(stableContainer.querySelector('[data-kpc-xmarkdown-tail="true"]')).to.eql(null);
           instance.set('content', '# 标题\n\n一段稳定的话。\n\n# 新标题\n\n第二段稳定的话。');
-          _context33.next = 29;
+          _context38.next = 29;
           return waitFor(function () {
             return !tailContainer.querySelector('[data-kpc-xmarkdown-tail="true"]') && stableContainer.querySelectorAll('h1').length === 2;
           }, 30, 20);
         case 29:
-          promoted = _context33.sent;
+          promoted = _context38.sent;
           expect(promoted).to.be.true;
           expect(stableContainer.querySelector('h1').__kpcStableProbe).to.eql('kept');
           expect(stableContainer.querySelector('p').__kpcStableParagraphProbe).to.eql('kept');
         case 33:
         case "end":
-          return _context33.stop();
+          return _context38.stop();
       }
-    }, _callee16);
+    }, _callee18);
   })));
-  it('should keep spacing before open code block while streaming', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
-    var Demo, _mount17, element, ready, codeBlock;
-    return _regeneratorRuntime.wrap(function _callee17$(_context35) {
-      while (1) switch (_context35.prev = _context35.next) {
+  it('should keep spacing before open code block while streaming', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
+    var Demo, _mount19, element, ready, codeBlock;
+    return _regeneratorRuntime.wrap(function _callee19$(_context40) {
+      while (1) switch (_context40.prev = _context40.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component17) {
-            _inheritsLoose(Demo, _Component17);
+          Demo = /*#__PURE__*/function (_Component19) {
+            _inheritsLoose(Demo, _Component19);
             function Demo() {
-              var _context34;
-              var _this17;
-              for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
-                args[_key17] = arguments[_key17];
+              var _context39;
+              var _this19;
+              for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
+                args[_key19] = arguments[_key19];
               }
-              _this17 = _Component17.call.apply(_Component17, _concatInstanceProperty(_context34 = [this]).call(_context34, args)) || this;
-              _this17.XMarkdown = XMarkdown;
-              return _this17;
+              _this19 = _Component19.call.apply(_Component19, _concatInstanceProperty(_context39 = [this]).call(_context39, args)) || this;
+              _this19.XMarkdown = XMarkdown;
+              return _this19;
             }
             Demo.defaults = function defaults() {
               return {
@@ -912,38 +1010,38 @@ describe('XMarkdown', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={this.get('content')}\n                    streaming={this.get('streaming')}\n                />\n            ";
-          _mount17 = mount(Demo), element = _mount17[1];
-          _context35.next = 5;
+          _mount19 = mount(Demo), element = _mount19[1];
+          _context40.next = 5;
           return waitFor(function () {
             return !!element.querySelector('.k-xmarkdown-tail > .k-xmarkdown-code-block');
           });
         case 5:
-          ready = _context35.sent;
+          ready = _context40.sent;
           expect(ready).to.be.true;
           codeBlock = element.querySelector('.k-xmarkdown-tail > .k-xmarkdown-code-block');
           expect(getComputedStyle(codeBlock).marginTop).to.eql('12px');
         case 9:
         case "end":
-          return _context35.stop();
+          return _context40.stop();
       }
-    }, _callee17);
+    }, _callee19);
   })));
-  it('should progressively fill table cells while streaming a new row', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
-    var Demo, _mount18, instance, element, ready, filled;
-    return _regeneratorRuntime.wrap(function _callee18$(_context37) {
-      while (1) switch (_context37.prev = _context37.next) {
+  it('should progressively fill table cells while streaming a new row', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
+    var Demo, _mount20, instance, element, ready, filled;
+    return _regeneratorRuntime.wrap(function _callee20$(_context42) {
+      while (1) switch (_context42.prev = _context42.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component18) {
-            _inheritsLoose(Demo, _Component18);
+          Demo = /*#__PURE__*/function (_Component20) {
+            _inheritsLoose(Demo, _Component20);
             function Demo() {
-              var _context36;
-              var _this18;
-              for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
-                args[_key18] = arguments[_key18];
+              var _context41;
+              var _this20;
+              for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
+                args[_key20] = arguments[_key20];
               }
-              _this18 = _Component18.call.apply(_Component18, _concatInstanceProperty(_context36 = [this]).call(_context36, args)) || this;
-              _this18.XMarkdown = XMarkdown;
-              return _this18;
+              _this20 = _Component20.call.apply(_Component20, _concatInstanceProperty(_context41 = [this]).call(_context41, args)) || this;
+              _this20.XMarkdown = XMarkdown;
+              return _this20;
             }
             Demo.defaults = function defaults() {
               return {
@@ -954,46 +1052,46 @@ describe('XMarkdown', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={this.get('content')}\n                    streaming={this.get('streaming')}\n                />\n            ";
-          _mount18 = mount(Demo), instance = _mount18[0], element = _mount18[1];
-          _context37.next = 5;
+          _mount20 = mount(Demo), instance = _mount20[0], element = _mount20[1];
+          _context42.next = 5;
           return waitFor(function () {
             return element.querySelectorAll('.k-xmarkdown-table-wrap td').length === 3;
           });
         case 5:
-          ready = _context37.sent;
+          ready = _context42.sent;
           expect(ready).to.be.true;
           instance.set('content', ['| A | B | C |', '| --- | --- | --- |', '| 1 | 2'].join('\n'));
-          _context37.next = 10;
+          _context42.next = 10;
           return waitFor(function () {
             var cells = element.querySelectorAll('.k-xmarkdown-table-wrap td');
             return cells.length === 3 && cells[1].textContent === '2';
           });
         case 10:
-          filled = _context37.sent;
+          filled = _context42.sent;
           expect(filled).to.be.true;
           expect(element.querySelector('.k-xmarkdown-tail [data-kpc-xmarkdown-tail="true"]')).to.eql(null);
         case 13:
         case "end":
-          return _context37.stop();
+          return _context42.stop();
       }
-    }, _callee18);
+    }, _callee20);
   })));
-  it('should keep previous stable DOM across multiple append-only promotions', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
-    var Demo, _mount19, instance, element, ready, stableContainer, tailContainer, firstHeading, firstParagraph, firstTailReady, firstPromotionReady, secondHeading, secondParagraph, secondTailReady, secondPromotionReady;
-    return _regeneratorRuntime.wrap(function _callee19$(_context39) {
-      while (1) switch (_context39.prev = _context39.next) {
+  it('should keep previous stable DOM across multiple append-only promotions', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
+    var Demo, _mount21, instance, element, ready, stableContainer, tailContainer, firstHeading, firstParagraph, firstTailReady, firstPromotionReady, secondHeading, secondParagraph, secondTailReady, secondPromotionReady;
+    return _regeneratorRuntime.wrap(function _callee21$(_context44) {
+      while (1) switch (_context44.prev = _context44.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component19) {
-            _inheritsLoose(Demo, _Component19);
+          Demo = /*#__PURE__*/function (_Component21) {
+            _inheritsLoose(Demo, _Component21);
             function Demo() {
-              var _context38;
-              var _this19;
-              for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
-                args[_key19] = arguments[_key19];
+              var _context43;
+              var _this21;
+              for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
+                args[_key21] = arguments[_key21];
               }
-              _this19 = _Component19.call.apply(_Component19, _concatInstanceProperty(_context38 = [this]).call(_context38, args)) || this;
-              _this19.XMarkdown = XMarkdown;
-              return _this19;
+              _this21 = _Component21.call.apply(_Component21, _concatInstanceProperty(_context43 = [this]).call(_context43, args)) || this;
+              _this21.XMarkdown = XMarkdown;
+              return _this21;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1004,13 +1102,13 @@ describe('XMarkdown', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={this.get('content')}\n                    streaming={this.get('streaming')}\n                />\n            ";
-          _mount19 = mount(Demo), instance = _mount19[0], element = _mount19[1];
-          _context39.next = 5;
+          _mount21 = mount(Demo), instance = _mount21[0], element = _mount21[1];
+          _context44.next = 5;
           return waitFor(function () {
             return !!element.querySelector('.k-xmarkdown-stable h1');
           });
         case 5:
-          ready = _context39.sent;
+          ready = _context44.sent;
           expect(ready).to.be.true;
           stableContainer = element.querySelector('.k-xmarkdown-stable');
           tailContainer = element.querySelector('.k-xmarkdown-tail');
@@ -1019,20 +1117,20 @@ describe('XMarkdown', function () {
           firstHeading.__kpcFirstStableHeading = 'kept';
           firstParagraph.__kpcFirstStableParagraph = 'kept';
           instance.set('content', '# 标题\n\n第一段稳定内容。\n\n# 第二个标题');
-          _context39.next = 16;
+          _context44.next = 16;
           return waitFor(function () {
             return !!tailContainer.querySelector('[data-kpc-xmarkdown-tail="true"]');
           }, 30, 20);
         case 16:
-          firstTailReady = _context39.sent;
+          firstTailReady = _context44.sent;
           expect(firstTailReady).to.be.true;
           instance.set('content', '# 标题\n\n第一段稳定内容。\n\n# 第二个标题\n\n第二段稳定内容。\n\n');
-          _context39.next = 21;
+          _context44.next = 21;
           return waitFor(function () {
             return stableContainer.querySelectorAll('h1').length === 2;
           }, 30, 20);
         case 21:
-          firstPromotionReady = _context39.sent;
+          firstPromotionReady = _context44.sent;
           expect(firstPromotionReady).to.be.true;
           expect(stableContainer.querySelector('h1').__kpcFirstStableHeading).to.eql('kept');
           expect(stableContainer.querySelector('p').__kpcFirstStableParagraph).to.eql('kept');
@@ -1041,20 +1139,20 @@ describe('XMarkdown', function () {
           secondHeading.__kpcSecondStableHeading = 'kept';
           secondParagraph.__kpcSecondStableParagraph = 'kept';
           instance.set('content', '# 标题\n\n第一段稳定内容。\n\n# 第二个标题\n\n第二段稳定内容。\n\n## 第三个标题');
-          _context39.next = 32;
+          _context44.next = 32;
           return waitFor(function () {
             return !!tailContainer.querySelector('[data-kpc-xmarkdown-tail="true"]');
           }, 30, 20);
         case 32:
-          secondTailReady = _context39.sent;
+          secondTailReady = _context44.sent;
           expect(secondTailReady).to.be.true;
           instance.set('content', '# 标题\n\n第一段稳定内容。\n\n# 第二个标题\n\n第二段稳定内容。\n\n## 第三个标题\n\n第三段稳定内容。');
-          _context39.next = 37;
+          _context44.next = 37;
           return waitFor(function () {
             return stableContainer.querySelectorAll('h1').length === 2 && stableContainer.querySelectorAll('h2').length === 1;
           }, 30, 20);
         case 37:
-          secondPromotionReady = _context39.sent;
+          secondPromotionReady = _context44.sent;
           expect(secondPromotionReady).to.be.true;
           expect(stableContainer.querySelector('h1').__kpcFirstStableHeading).to.eql('kept');
           expect(stableContainer.querySelector('p').__kpcFirstStableParagraph).to.eql('kept');
@@ -1062,26 +1160,26 @@ describe('XMarkdown', function () {
           expect(stableContainer.querySelectorAll('p')[1].__kpcSecondStableParagraph).to.eql('kept');
         case 43:
         case "end":
-          return _context39.stop();
+          return _context44.stop();
       }
-    }, _callee19);
+    }, _callee21);
   })));
-  it('should render typing suffix only when enabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
-    var Demo, _mount20, element;
-    return _regeneratorRuntime.wrap(function _callee20$(_context41) {
-      while (1) switch (_context41.prev = _context41.next) {
+  it('should render typing suffix only when enabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
+    var Demo, _mount22, element;
+    return _regeneratorRuntime.wrap(function _callee22$(_context46) {
+      while (1) switch (_context46.prev = _context46.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component20) {
-            _inheritsLoose(Demo, _Component20);
+          Demo = /*#__PURE__*/function (_Component22) {
+            _inheritsLoose(Demo, _Component22);
             function Demo() {
-              var _context40;
-              var _this20;
-              for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
-                args[_key20] = arguments[_key20];
+              var _context45;
+              var _this22;
+              for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
+                args[_key22] = arguments[_key22];
               }
-              _this20 = _Component20.call.apply(_Component20, _concatInstanceProperty(_context40 = [this]).call(_context40, args)) || this;
-              _this20.XMarkdown = XMarkdown;
-              return _this20;
+              _this22 = _Component22.call.apply(_Component22, _concatInstanceProperty(_context45 = [this]).call(_context45, args)) || this;
+              _this22.XMarkdown = XMarkdown;
+              return _this22;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1091,8 +1189,8 @@ describe('XMarkdown', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { XMarkdown } = this;\n                <div>\n                    <XMarkdown\n                        className=\"suffix-enabled\"\n                        content={this.get('content')}\n                        streaming={true}\n                        typing={{interval: 16, step: 2, suffix: true}}\n                    />\n                    <XMarkdown\n                        className=\"suffix-default\"\n                        content={this.get('content')}\n                        streaming={true}\n                        typing={{interval: 16, step: 2}}\n                    />\n                </div>\n            ";
-          _mount20 = mount(Demo), element = _mount20[1];
-          _context41.next = 5;
+          _mount22 = mount(Demo), element = _mount22[1];
+          _context46.next = 5;
           return waitFor(function () {
             return !!element.querySelector('.suffix-enabled .k-xmarkdown-typing-suffix');
           });
@@ -1101,26 +1199,26 @@ describe('XMarkdown', function () {
           expect(element.querySelector('.suffix-default .k-xmarkdown-typing-suffix')).to.eql(null);
         case 7:
         case "end":
-          return _context41.stop();
+          return _context46.stop();
       }
-    }, _callee20);
+    }, _callee22);
   })));
-  it('should put unclosed block-level formula into tail container during streaming', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
-    var Demo, _mount21, instance, element, ready, stableContainer, tailContainer, formulaRendered;
-    return _regeneratorRuntime.wrap(function _callee21$(_context43) {
-      while (1) switch (_context43.prev = _context43.next) {
+  it('should put unclosed block-level formula into tail container during streaming', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
+    var Demo, _mount23, instance, element, ready, stableContainer, tailContainer, formulaRendered;
+    return _regeneratorRuntime.wrap(function _callee23$(_context48) {
+      while (1) switch (_context48.prev = _context48.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component21) {
-            _inheritsLoose(Demo, _Component21);
+          Demo = /*#__PURE__*/function (_Component23) {
+            _inheritsLoose(Demo, _Component23);
             function Demo() {
-              var _context42;
-              var _this21;
-              for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
-                args[_key21] = arguments[_key21];
+              var _context47;
+              var _this23;
+              for (var _len23 = arguments.length, args = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
+                args[_key23] = arguments[_key23];
               }
-              _this21 = _Component21.call.apply(_Component21, _concatInstanceProperty(_context42 = [this]).call(_context42, args)) || this;
-              _this21.XMarkdown = XMarkdown;
-              return _this21;
+              _this23 = _Component23.call.apply(_Component23, _concatInstanceProperty(_context47 = [this]).call(_context47, args)) || this;
+              _this23.XMarkdown = XMarkdown;
+              return _this23;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1132,13 +1230,13 @@ describe('XMarkdown', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={this.get('content')}\n                    streaming={this.get('streaming')}\n                />\n            ";
-          _mount21 = mount(Demo), instance = _mount21[0], element = _mount21[1];
-          _context43.next = 5;
+          _mount23 = mount(Demo), instance = _mount23[0], element = _mount23[1];
+          _context48.next = 5;
           return waitFor(function () {
             return !!element.querySelector('.k-xmarkdown-stable h1');
           });
         case 5:
-          ready = _context43.sent;
+          ready = _context48.sent;
           expect(ready).to.be.true;
           stableContainer = element.querySelector('.k-xmarkdown-stable');
           tailContainer = element.querySelector('.k-xmarkdown-tail'); // 标题应该在 stable 中
@@ -1148,20 +1246,20 @@ describe('XMarkdown', function () {
           expect(tailContainer.querySelector('[data-kpc-xmarkdown-tail="true"]')).not.to.eql(null);
           // 闭合公式后，整个公式应该渲染在 stable 中
           instance.set('content', '# 标题\n\n$$\n\\operatorname{score}(x)=\\sum_{i=1}^{n}\n$$');
-          _context43.next = 15;
+          _context48.next = 15;
           return waitFor(function () {
             var _tailContainer$textCo;
             // 公式闭合后，tail 应该为空或没有 $$
             return tailContainer.innerHTML === '' || !((_tailContainer$textCo = tailContainer.textContent) != null && _includesInstanceProperty(_tailContainer$textCo).call(_tailContainer$textCo, '$$'));
           }, 30, 20);
         case 15:
-          formulaRendered = _context43.sent;
+          formulaRendered = _context48.sent;
           expect(formulaRendered).to.be.true;
         case 17:
         case "end":
-          return _context43.stop();
+          return _context48.stop();
       }
-    }, _callee21);
+    }, _callee23);
   })));
   it('should keep incomplete inline tokens in tail cache during streaming', function () {
     var cache = createStreamingTailCache();
@@ -1175,22 +1273,22 @@ describe('XMarkdown', function () {
     expect(result.stableSource).to.eql('请看[文档](https://example.com)\n');
     expect(result.tailText).to.eql('<notice-card tit');
   });
-  it('should render raw html when allowHtml and sanitizeOptions are enabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
-    var Demo, _mount22, element, ready;
-    return _regeneratorRuntime.wrap(function _callee22$(_context45) {
-      while (1) switch (_context45.prev = _context45.next) {
+  it('should render raw html when allowHtml and sanitizeOptions are enabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
+    var Demo, _mount24, element, ready;
+    return _regeneratorRuntime.wrap(function _callee24$(_context50) {
+      while (1) switch (_context50.prev = _context50.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component22) {
-            _inheritsLoose(Demo, _Component22);
+          Demo = /*#__PURE__*/function (_Component24) {
+            _inheritsLoose(Demo, _Component24);
             function Demo() {
-              var _context44;
-              var _this22;
-              for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
-                args[_key22] = arguments[_key22];
+              var _context49;
+              var _this24;
+              for (var _len24 = arguments.length, args = new Array(_len24), _key24 = 0; _key24 < _len24; _key24++) {
+                args[_key24] = arguments[_key24];
               }
-              _this22 = _Component22.call.apply(_Component22, _concatInstanceProperty(_context44 = [this]).call(_context44, args)) || this;
-              _this22.XMarkdown = XMarkdown;
-              return _this22;
+              _this24 = _Component24.call.apply(_Component24, _concatInstanceProperty(_context49 = [this]).call(_context49, args)) || this;
+              _this24.XMarkdown = XMarkdown;
+              return _this24;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1204,71 +1302,71 @@ describe('XMarkdown', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    allowHtml\n                    content={this.get('content')}\n                    sanitizeOptions={this.get('sanitizeOptions')}\n                />\n            ";
-          _mount22 = mount(Demo), element = _mount22[1];
-          _context45.next = 5;
+          _mount24 = mount(Demo), element = _mount24[1];
+          _context50.next = 5;
           return waitFor(function () {
             return !!element.querySelector('notice-card');
           });
         case 5:
-          ready = _context45.sent;
+          ready = _context50.sent;
           expect(ready).to.be.true;
           expect(element.querySelector('mark').getAttribute('data-track')).to.eql('demo-mark');
           expect(element.querySelector('notice-card').getAttribute('title')).to.eql('发布建议');
           expect(element.querySelector('notice-card').textContent).to.contain('先补文档，再补单测。');
         case 10:
         case "end":
-          return _context45.stop();
+          return _context50.stop();
       }
-    }, _callee22);
+    }, _callee24);
   })));
-  it('should keep formula text when enableFormula is false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
-    var Demo, _mount23, element;
-    return _regeneratorRuntime.wrap(function _callee23$(_context47) {
-      while (1) switch (_context47.prev = _context47.next) {
+  it('should keep formula text when enableFormula is false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
+    var Demo, _mount25, element;
+    return _regeneratorRuntime.wrap(function _callee25$(_context52) {
+      while (1) switch (_context52.prev = _context52.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component23) {
-            _inheritsLoose(Demo, _Component23);
+          Demo = /*#__PURE__*/function (_Component25) {
+            _inheritsLoose(Demo, _Component25);
             function Demo() {
-              var _context46;
-              var _this23;
-              for (var _len23 = arguments.length, args = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
-                args[_key23] = arguments[_key23];
+              var _context51;
+              var _this25;
+              for (var _len25 = arguments.length, args = new Array(_len25), _key25 = 0; _key25 < _len25; _key25++) {
+                args[_key25] = arguments[_key25];
               }
-              _this23 = _Component23.call.apply(_Component23, _concatInstanceProperty(_context46 = [this]).call(_context46, args)) || this;
-              _this23.XMarkdown = XMarkdown;
-              return _this23;
+              _this25 = _Component25.call.apply(_Component25, _concatInstanceProperty(_context51 = [this]).call(_context51, args)) || this;
+              _this25.XMarkdown = XMarkdown;
+              return _this25;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    enableFormula={false}\n                    content={'$E = mc^2$'}\n                />\n            ";
-          _mount23 = mount(Demo), element = _mount23[1];
-          _context47.next = 5;
+          _mount25 = mount(Demo), element = _mount25[1];
+          _context52.next = 5;
           return wait(60);
         case 5:
           expect(element.querySelector('.katex')).to.eql(null);
           expect(element.querySelector('.k-xmarkdown-content').textContent).to.contain('$E = mc^2$');
         case 7:
         case "end":
-          return _context47.stop();
+          return _context52.stop();
       }
-    }, _callee23);
+    }, _callee25);
   })));
-  it('should support custom formulaDelimiters and formulaMacros', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
-    var Demo, _mount24, element, ready;
-    return _regeneratorRuntime.wrap(function _callee24$(_context49) {
-      while (1) switch (_context49.prev = _context49.next) {
+  it('should support custom formulaDelimiters and formulaMacros', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee26() {
+    var Demo, _mount26, element, ready;
+    return _regeneratorRuntime.wrap(function _callee26$(_context54) {
+      while (1) switch (_context54.prev = _context54.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component24) {
-            _inheritsLoose(Demo, _Component24);
+          Demo = /*#__PURE__*/function (_Component26) {
+            _inheritsLoose(Demo, _Component26);
             function Demo() {
-              var _context48;
-              var _this24;
-              for (var _len24 = arguments.length, args = new Array(_len24), _key24 = 0; _key24 < _len24; _key24++) {
-                args[_key24] = arguments[_key24];
+              var _context53;
+              var _this26;
+              for (var _len26 = arguments.length, args = new Array(_len26), _key26 = 0; _key26 < _len26; _key26++) {
+                args[_key26] = arguments[_key26];
               }
-              _this24 = _Component24.call.apply(_Component24, _concatInstanceProperty(_context48 = [this]).call(_context48, args)) || this;
-              _this24.XMarkdown = XMarkdown;
-              return _this24;
+              _this26 = _Component26.call.apply(_Component26, _concatInstanceProperty(_context53 = [this]).call(_context53, args)) || this;
+              _this26.XMarkdown = XMarkdown;
+              return _this26;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1280,38 +1378,38 @@ describe('XMarkdown', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={'\\\\[f: \\\\RR \\\\to \\\\RR\\\\]'}\n                    formulaDelimiters={'brackets'}\n                    formulaMacros={this.get('formulaMacros')}\n                />\n            ";
-          _mount24 = mount(Demo), element = _mount24[1];
-          _context49.next = 5;
+          _mount26 = mount(Demo), element = _mount26[1];
+          _context54.next = 5;
           return waitFor(function () {
             return !!element.querySelector('.katex');
           }, 60, 20);
         case 5:
-          ready = _context49.sent;
+          ready = _context54.sent;
           expect(ready).to.be.true;
           expect(element.querySelector('.k-xmarkdown-content').textContent).not.to.contain('\\[');
         case 8:
         case "end":
-          return _context49.stop();
+          return _context54.stop();
       }
-    }, _callee24);
+    }, _callee26);
   })));
-  it('should support tagAttrs and tagRenderers for custom tags', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
-    var _context51;
-    var Demo, _mount25, element, ready, link;
-    return _regeneratorRuntime.wrap(function _callee25$(_context52) {
-      while (1) switch (_context52.prev = _context52.next) {
+  it('should support tagAttrs and tagRenderers for custom tags', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee27() {
+    var _context56;
+    var Demo, _mount27, element, ready, link;
+    return _regeneratorRuntime.wrap(function _callee27$(_context57) {
+      while (1) switch (_context57.prev = _context57.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component25) {
-            _inheritsLoose(Demo, _Component25);
+          Demo = /*#__PURE__*/function (_Component27) {
+            _inheritsLoose(Demo, _Component27);
             function Demo() {
-              var _context50;
-              var _this25;
-              for (var _len25 = arguments.length, args = new Array(_len25), _key25 = 0; _key25 < _len25; _key25++) {
-                args[_key25] = arguments[_key25];
+              var _context55;
+              var _this27;
+              for (var _len27 = arguments.length, args = new Array(_len27), _key27 = 0; _key27 < _len27; _key27++) {
+                args[_key27] = arguments[_key27];
               }
-              _this25 = _Component25.call.apply(_Component25, _concatInstanceProperty(_context50 = [this]).call(_context50, args)) || this;
-              _this25.XMarkdown = XMarkdown;
-              _this25.tagAttrs = {
+              _this27 = _Component27.call.apply(_Component27, _concatInstanceProperty(_context55 = [this]).call(_context55, args)) || this;
+              _this27.XMarkdown = XMarkdown;
+              _this27.tagAttrs = {
                 a: function a() {
                   return {
                     className: 'xmarkdown-enhanced-link',
@@ -1319,7 +1417,7 @@ describe('XMarkdown', function () {
                   };
                 }
               };
-              _this25.tagRenderers = {
+              _this27.tagRenderers = {
                 'notice-card': function noticeCard(context) {
                   return createVNode('section', {
                     className: 'xmarkdown-custom-card'
@@ -1335,7 +1433,7 @@ describe('XMarkdown', function () {
                   }, 'custom table');
                 }
               };
-              return _this25;
+              return _this27;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1349,20 +1447,20 @@ describe('XMarkdown', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    allowHtml\n                    content={this.get('content')}\n                    sanitizeOptions={this.get('sanitizeOptions')}\n                    tagAttrs={this.tagAttrs}\n                    tagRenderers={this.tagRenderers}\n                />\n            ";
-          _mount25 = mount(Demo), element = _mount25[1];
-          _context52.next = 5;
+          _mount27 = mount(Demo), element = _mount27[1];
+          _context57.next = 5;
           return waitFor(function () {
             return !!element.querySelector('.xmarkdown-custom-card');
           });
         case 5:
-          ready = _context52.sent;
+          ready = _context57.sent;
           expect(ready).to.be.true;
           expect(element.querySelector('notice-card')).to.eql(null);
           expect(element.querySelector('table')).to.eql(null);
           expect(element.querySelector('.xmarkdown-custom-card-title').textContent).to.eql('发布建议');
           expect(element.querySelector('.xmarkdown-custom-card-body').textContent).to.contain('先补 Demo，再补单测。');
           expect(element.querySelector('.xmarkdown-custom-table').textContent).to.contain('custom table');
-          expect(_mapInstanceProperty(_context51 = _Array$from(element.querySelector('.k-xmarkdown-stable').children)).call(_context51, function (item) {
+          expect(_mapInstanceProperty(_context56 = _Array$from(element.querySelector('.k-xmarkdown-stable').children)).call(_context56, function (item) {
             return item.tagName.toLowerCase();
           })).to.eql(['h1', 'section', 'div', 'p']);
           expect(element.querySelector('.k-xmarkdown-stable p:empty')).to.eql(null);
@@ -1372,30 +1470,30 @@ describe('XMarkdown', function () {
           expect(link.getAttribute('rel')).to.eql('noopener noreferrer');
         case 18:
         case "end":
-          return _context52.stop();
+          return _context57.stop();
       }
-    }, _callee25);
+    }, _callee27);
   })));
-  it('should support codeBlockRenderers for code blocks and mermaid blocks', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee26() {
-    var initialize, renderAsync, codeContexts, mermaidContexts, Demo, _mount26, element, ready;
-    return _regeneratorRuntime.wrap(function _callee26$(_context54) {
-      while (1) switch (_context54.prev = _context54.next) {
+  it('should support codeBlockRenderers for code blocks and mermaid blocks', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee28() {
+    var initialize, renderAsync, codeContexts, mermaidContexts, Demo, _mount28, element, ready;
+    return _regeneratorRuntime.wrap(function _callee28$(_context59) {
+      while (1) switch (_context59.prev = _context59.next) {
         case 0:
           initialize = sinon.stub(mermaid, 'initialize');
           renderAsync = sinon.stub(mermaid, 'renderAsync');
           codeContexts = [];
           mermaidContexts = [];
-          Demo = /*#__PURE__*/function (_Component26) {
-            _inheritsLoose(Demo, _Component26);
+          Demo = /*#__PURE__*/function (_Component28) {
+            _inheritsLoose(Demo, _Component28);
             function Demo() {
-              var _context53;
-              var _this26;
-              for (var _len26 = arguments.length, args = new Array(_len26), _key26 = 0; _key26 < _len26; _key26++) {
-                args[_key26] = arguments[_key26];
+              var _context58;
+              var _this28;
+              for (var _len28 = arguments.length, args = new Array(_len28), _key28 = 0; _key28 < _len28; _key28++) {
+                args[_key28] = arguments[_key28];
               }
-              _this26 = _Component26.call.apply(_Component26, _concatInstanceProperty(_context53 = [this]).call(_context53, args)) || this;
-              _this26.XMarkdown = XMarkdown;
-              _this26.codeBlockRenderers = {
+              _this28 = _Component28.call.apply(_Component28, _concatInstanceProperty(_context58 = [this]).call(_context58, args)) || this;
+              _this28.XMarkdown = XMarkdown;
+              _this28.codeBlockRenderers = {
                 ts: function ts(context) {
                   codeContexts.push(context);
                   return createVNode('section', {
@@ -1417,7 +1515,7 @@ describe('XMarkdown', function () {
                   }, context.source)]);
                 }
               };
-              return _this26;
+              return _this28;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1427,13 +1525,13 @@ describe('XMarkdown', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={this.get('content')}\n                    codeBlockRenderers={this.codeBlockRenderers}\n                />\n            ";
-          _mount26 = mount(Demo), element = _mount26[1];
-          _context54.next = 9;
+          _mount28 = mount(Demo), element = _mount28[1];
+          _context59.next = 9;
           return waitFor(function () {
             return !!element.querySelector('.xmarkdown-custom-code-block') && !!element.querySelector('.xmarkdown-custom-mermaid-block');
           });
         case 9:
-          ready = _context54.sent;
+          ready = _context59.sent;
           expect(ready).to.be.true;
           expect(initialize.called).to.be.false;
           expect(renderAsync.called).to.be.false;
@@ -1446,26 +1544,26 @@ describe('XMarkdown', function () {
           expect(element.querySelector('.k-xmarkdown-code-toolbar')).to.eql(null);
         case 20:
         case "end":
-          return _context54.stop();
+          return _context59.stop();
       }
-    }, _callee26);
+    }, _callee28);
   })));
-  it('should refresh renderer when codeBlockRenderers change', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee27() {
-    var Demo, _mount27, instance, element, initialReady, refreshed;
-    return _regeneratorRuntime.wrap(function _callee27$(_context56) {
-      while (1) switch (_context56.prev = _context56.next) {
+  it('should refresh renderer when codeBlockRenderers change', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee29() {
+    var Demo, _mount29, instance, element, initialReady, refreshed;
+    return _regeneratorRuntime.wrap(function _callee29$(_context61) {
+      while (1) switch (_context61.prev = _context61.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component27) {
-            _inheritsLoose(Demo, _Component27);
+          Demo = /*#__PURE__*/function (_Component29) {
+            _inheritsLoose(Demo, _Component29);
             function Demo() {
-              var _context55;
-              var _this27;
-              for (var _len27 = arguments.length, args = new Array(_len27), _key27 = 0; _key27 < _len27; _key27++) {
-                args[_key27] = arguments[_key27];
+              var _context60;
+              var _this29;
+              for (var _len29 = arguments.length, args = new Array(_len29), _key29 = 0; _key29 < _len29; _key29++) {
+                args[_key29] = arguments[_key29];
               }
-              _this27 = _Component27.call.apply(_Component27, _concatInstanceProperty(_context55 = [this]).call(_context55, args)) || this;
-              _this27.XMarkdown = XMarkdown;
-              return _this27;
+              _this29 = _Component29.call.apply(_Component29, _concatInstanceProperty(_context60 = [this]).call(_context60, args)) || this;
+              _this29.XMarkdown = XMarkdown;
+              return _this29;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1476,13 +1574,13 @@ describe('XMarkdown', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={this.get('content')}\n                    codeBlockRenderers={this.get('codeBlockRenderers')}\n                />\n            ";
-          _mount27 = mount(Demo), instance = _mount27[0], element = _mount27[1];
-          _context56.next = 5;
+          _mount29 = mount(Demo), instance = _mount29[0], element = _mount29[1];
+          _context61.next = 5;
           return waitFor(function () {
             return !!element.querySelector('.k-xmarkdown-code-toolbar');
           });
         case 5:
-          initialReady = _context56.sent;
+          initialReady = _context61.sent;
           expect(initialReady).to.be.true;
           expect(element.querySelector('.xmarkdown-refresh-code-block')).to.eql(null);
           instance.set('codeBlockRenderers', {
@@ -1492,36 +1590,36 @@ describe('XMarkdown', function () {
               }, context.source);
             }
           });
-          _context56.next = 11;
+          _context61.next = 11;
           return waitFor(function () {
             return !!element.querySelector('.xmarkdown-refresh-code-block');
           });
         case 11:
-          refreshed = _context56.sent;
+          refreshed = _context61.sent;
           expect(refreshed).to.be.true;
           expect(element.querySelector('.k-xmarkdown-code-toolbar')).to.eql(null);
         case 14:
         case "end":
-          return _context56.stop();
+          return _context61.stop();
       }
-    }, _callee27);
+    }, _callee29);
   })));
-  it('should support plugins for markdown extension and render tree transform', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee28() {
-    var Demo, _mount28, element, ready;
-    return _regeneratorRuntime.wrap(function _callee28$(_context58) {
-      while (1) switch (_context58.prev = _context58.next) {
+  it('should support plugins for markdown extension and render tree transform', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee30() {
+    var Demo, _mount30, element, ready;
+    return _regeneratorRuntime.wrap(function _callee30$(_context63) {
+      while (1) switch (_context63.prev = _context63.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component28) {
-            _inheritsLoose(Demo, _Component28);
+          Demo = /*#__PURE__*/function (_Component30) {
+            _inheritsLoose(Demo, _Component30);
             function Demo() {
-              var _context57;
-              var _this28;
-              for (var _len28 = arguments.length, args = new Array(_len28), _key28 = 0; _key28 < _len28; _key28++) {
-                args[_key28] = arguments[_key28];
+              var _context62;
+              var _this30;
+              for (var _len30 = arguments.length, args = new Array(_len30), _key30 = 0; _key30 < _len30; _key30++) {
+                args[_key30] = arguments[_key30];
               }
-              _this28 = _Component28.call.apply(_Component28, _concatInstanceProperty(_context57 = [this]).call(_context57, args)) || this;
-              _this28.XMarkdown = XMarkdown;
-              _this28.plugins = [{
+              _this30 = _Component30.call.apply(_Component30, _concatInstanceProperty(_context62 = [this]).call(_context62, args)) || this;
+              _this30.XMarkdown = XMarkdown;
+              _this30.plugins = [{
                 extendMarkdown: function extendMarkdown(markdown) {
                   markdown.core.ruler.push('xmarkdown-heading-plugin', function (state) {
                     state.tokens.forEach(function (token) {
@@ -1545,7 +1643,7 @@ describe('XMarkdown', function () {
                   });
                 }
               }];
-              return _this28;
+              return _this30;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1555,38 +1653,38 @@ describe('XMarkdown', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={this.get('content')}\n                    plugins={this.plugins}\n                />\n            ";
-          _mount28 = mount(Demo), element = _mount28[1];
-          _context58.next = 5;
+          _mount30 = mount(Demo), element = _mount30[1];
+          _context63.next = 5;
           return waitFor(function () {
             return !!element.querySelector('.k-xmarkdown-content blockquote');
           });
         case 5:
-          ready = _context58.sent;
+          ready = _context63.sent;
           expect(ready).to.be.true;
           expect(element.querySelector('h1').getAttribute('data-plugin-source')).to.eql('markdown-it');
           expect(element.querySelector('blockquote').getAttribute('data-plugin-transform')).to.eql('render-tree');
         case 9:
         case "end":
-          return _context58.stop();
+          return _context63.stop();
       }
-    }, _callee28);
+    }, _callee30);
   })));
-  it('should refresh renderer when plugins change', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee29() {
-    var Demo, _mount29, instance, element, initialReady, refreshed;
-    return _regeneratorRuntime.wrap(function _callee29$(_context60) {
-      while (1) switch (_context60.prev = _context60.next) {
+  it('should refresh renderer when plugins change', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee31() {
+    var Demo, _mount31, instance, element, initialReady, refreshed;
+    return _regeneratorRuntime.wrap(function _callee31$(_context65) {
+      while (1) switch (_context65.prev = _context65.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component29) {
-            _inheritsLoose(Demo, _Component29);
+          Demo = /*#__PURE__*/function (_Component31) {
+            _inheritsLoose(Demo, _Component31);
             function Demo() {
-              var _context59;
-              var _this29;
-              for (var _len29 = arguments.length, args = new Array(_len29), _key29 = 0; _key29 < _len29; _key29++) {
-                args[_key29] = arguments[_key29];
+              var _context64;
+              var _this31;
+              for (var _len31 = arguments.length, args = new Array(_len31), _key31 = 0; _key31 < _len31; _key31++) {
+                args[_key31] = arguments[_key31];
               }
-              _this29 = _Component29.call.apply(_Component29, _concatInstanceProperty(_context59 = [this]).call(_context59, args)) || this;
-              _this29.XMarkdown = XMarkdown;
-              return _this29;
+              _this31 = _Component31.call.apply(_Component31, _concatInstanceProperty(_context64 = [this]).call(_context64, args)) || this;
+              _this31.XMarkdown = XMarkdown;
+              return _this31;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1596,13 +1694,13 @@ describe('XMarkdown', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={'# \u63D2\u4EF6\u5237\u65B0'}\n                    plugins={this.get('plugins')}\n                />\n            ";
-          _mount29 = mount(Demo), instance = _mount29[0], element = _mount29[1];
-          _context60.next = 5;
+          _mount31 = mount(Demo), instance = _mount31[0], element = _mount31[1];
+          _context65.next = 5;
           return waitFor(function () {
             return !!element.querySelector('h1');
           });
         case 5:
-          initialReady = _context60.sent;
+          initialReady = _context65.sent;
           expect(initialReady).to.be.true;
           expect(element.querySelector('h1').getAttribute('data-refresh-plugin')).to.eql(null);
           instance.set('plugins', [{
@@ -1616,23 +1714,23 @@ describe('XMarkdown', function () {
               });
             }
           }]);
-          _context60.next = 11;
+          _context65.next = 11;
           return waitFor(function () {
             return element.querySelector('h1').getAttribute('data-refresh-plugin') === 'updated';
           });
         case 11:
-          refreshed = _context60.sent;
+          refreshed = _context65.sent;
           expect(refreshed).to.be.true;
         case 13:
         case "end":
-          return _context60.stop();
+          return _context65.stop();
       }
-    }, _callee29);
+    }, _callee31);
   })));
-  it('should support plugins transforming citation markers from business data', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee30() {
-    var citations, Demo, transformCitationNodes, splitCitationText, _mount30, element, ready;
-    return _regeneratorRuntime.wrap(function _callee30$(_context63) {
-      while (1) switch (_context63.prev = _context63.next) {
+  it('should support plugins transforming citation markers from business data', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee32() {
+    var citations, Demo, transformCitationNodes, splitCitationText, _mount32, element, ready;
+    return _regeneratorRuntime.wrap(function _callee32$(_context68) {
+      while (1) switch (_context68.prev = _context68.next) {
         case 0:
           splitCitationText = function _splitCitationText(text) {
             var nextNodes = [];
@@ -1680,7 +1778,7 @@ describe('XMarkdown', function () {
             return nextNodes;
           };
           transformCitationNodes = function _transformCitationNod(nodes, appendSection) {
-            var _context62;
+            var _context67;
             if (appendSection === void 0) {
               appendSection = false;
             }
@@ -1699,7 +1797,7 @@ describe('XMarkdown', function () {
               }));
             });
             if (!appendSection || !citations.length) return nextNodes;
-            return _concatInstanceProperty(_context62 = []).call(_context62, nextNodes, [{
+            return _concatInstanceProperty(_context67 = []).call(_context67, nextNodes, [{
               type: 'element',
               tag: 'section',
               attrs: {
@@ -1715,33 +1813,33 @@ describe('XMarkdown', function () {
             title: '引用来源一',
             link: 'https://example.com/source-1'
           }];
-          Demo = /*#__PURE__*/function (_Component30) {
-            _inheritsLoose(Demo, _Component30);
+          Demo = /*#__PURE__*/function (_Component32) {
+            _inheritsLoose(Demo, _Component32);
             function Demo() {
-              var _context61;
-              var _this30;
-              for (var _len30 = arguments.length, args = new Array(_len30), _key30 = 0; _key30 < _len30; _key30++) {
-                args[_key30] = arguments[_key30];
+              var _context66;
+              var _this32;
+              for (var _len32 = arguments.length, args = new Array(_len32), _key32 = 0; _key32 < _len32; _key32++) {
+                args[_key32] = arguments[_key32];
               }
-              _this30 = _Component30.call.apply(_Component30, _concatInstanceProperty(_context61 = [this]).call(_context61, args)) || this;
-              _this30.XMarkdown = XMarkdown;
-              _this30.plugins = [{
+              _this32 = _Component32.call.apply(_Component32, _concatInstanceProperty(_context66 = [this]).call(_context66, args)) || this;
+              _this32.XMarkdown = XMarkdown;
+              _this32.plugins = [{
                 transformRenderTree: function transformRenderTree(nodes) {
                   return transformCitationNodes(nodes, true);
                 }
               }];
-              return _this30;
+              return _this32;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={'\u6B63\u6587\u5F15\u7528[1][2]'}\n                    plugins={this.plugins}\n                />\n            ";
-          _mount30 = mount(Demo), element = _mount30[1];
-          _context63.next = 8;
+          _mount32 = mount(Demo), element = _mount32[1];
+          _context68.next = 8;
           return waitFor(function () {
             return !!element.querySelector('[data-citation-index="1"]');
           });
         case 8:
-          ready = _context63.sent;
+          ready = _context68.sent;
           expect(ready).to.be.true;
           expect(element.querySelectorAll('[data-citation-index]').length).to.eql(1);
           expect(element.querySelector('[data-citation-index="1"]').getAttribute('href')).to.eql('https://example.com/source-1');
@@ -1749,49 +1847,49 @@ describe('XMarkdown', function () {
           expect(element.querySelector('[data-citation-section="true"]').textContent).to.contain('Sources: 1');
         case 14:
         case "end":
-          return _context63.stop();
+          return _context68.stop();
       }
-    }, _callee30);
+    }, _callee32);
   })));
-  it('should avoid duplicate markdown rendering during initial mount', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee31() {
-    var transformRenderTree, Demo, _mount31, element, ready;
-    return _regeneratorRuntime.wrap(function _callee31$(_context65) {
-      while (1) switch (_context65.prev = _context65.next) {
+  it('should avoid duplicate markdown rendering during initial mount', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee33() {
+    var transformRenderTree, Demo, _mount33, element, ready;
+    return _regeneratorRuntime.wrap(function _callee33$(_context70) {
+      while (1) switch (_context70.prev = _context70.next) {
         case 0:
           transformRenderTree = sinon.spy(function (nodes) {
             return nodes;
           });
-          Demo = /*#__PURE__*/function (_Component31) {
-            _inheritsLoose(Demo, _Component31);
+          Demo = /*#__PURE__*/function (_Component33) {
+            _inheritsLoose(Demo, _Component33);
             function Demo() {
-              var _context64;
-              var _this31;
-              for (var _len31 = arguments.length, args = new Array(_len31), _key31 = 0; _key31 < _len31; _key31++) {
-                args[_key31] = arguments[_key31];
+              var _context69;
+              var _this33;
+              for (var _len33 = arguments.length, args = new Array(_len33), _key33 = 0; _key33 < _len33; _key33++) {
+                args[_key33] = arguments[_key33];
               }
-              _this31 = _Component31.call.apply(_Component31, _concatInstanceProperty(_context64 = [this]).call(_context64, args)) || this;
-              _this31.XMarkdown = XMarkdown;
-              _this31.plugins = [{
+              _this33 = _Component33.call.apply(_Component33, _concatInstanceProperty(_context69 = [this]).call(_context69, args)) || this;
+              _this33.XMarkdown = XMarkdown;
+              _this33.plugins = [{
                 transformRenderTree: transformRenderTree
               }];
-              return _this31;
+              return _this33;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={'# \u521D\u59CB\u5316\u6E32\u67D3'}\n                    plugins={this.plugins}\n                />\n            ";
-          _mount31 = mount(Demo), element = _mount31[1];
-          _context65.next = 6;
+          _mount33 = mount(Demo), element = _mount33[1];
+          _context70.next = 6;
           return waitFor(function () {
             return !!element.querySelector('h1');
           });
         case 6:
-          ready = _context65.sent;
+          ready = _context70.sent;
           expect(ready).to.be.true;
           expect(transformRenderTree.callCount).to.eql(1);
         case 9:
         case "end":
-          return _context65.stop();
+          return _context70.stop();
       }
-    }, _callee31);
+    }, _callee33);
   })));
 });