@king-design/vue 3.7.0 → 3.8.0-beta.0

package/components/xmarkdown/index.spec.js

@@ -0,0 +1,1666 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import { Component, createVNode } from 'intact-vue-next';
+import mermaid from 'mermaid/dist/mermaid.min.js';
+import { dispatchEvent, mount, unmount, wait } from '../../test/utils';
+import { XMarkdown } from '.';
+import { createStreamingTailCache, splitMarkdownForStreaming } from './markdown';
+describe('XMarkdown', function () {
+  function waitFor(_x, _x2, _x3) {
+    return _waitFor.apply(this, arguments);
+  }
+  function _waitFor() {
+    _waitFor = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee29(check, retries, interval) {
+      var i;
+      return _regeneratorRuntime.wrap(function _callee29$(_context60) {
+        while (1) switch (_context60.prev = _context60.next) {
+          case 0:
+            if (retries === void 0) {
+              retries = 30;
+            }
+            if (interval === void 0) {
+              interval = 20;
+            }
+            i = 0;
+          case 3:
+            if (!(i < retries)) {
+              _context60.next = 11;
+              break;
+            }
+            if (!check()) {
+              _context60.next = 6;
+              break;
+            }
+            return _context60.abrupt("return", true);
+          case 6:
+            _context60.next = 8;
+            return wait(interval);
+          case 8:
+            i++;
+            _context60.next = 3;
+            break;
+          case 11:
+            return _context60.abrupt("return", check());
+          case 12:
+          case "end":
+            return _context60.stop();
+        }
+      }, _callee29);
+    }));
+    return _waitFor.apply(this, arguments);
+  }
+  afterEach(function () {
+    sinon.restore();
+    unmount();
+  });
+  it('should render markdown blocks, code toolbar and formula', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var Demo, _mount, element, ready;
+    return _regeneratorRuntime.wrap(function _callee$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component) {
+            _inheritsLoose(Demo, _Component);
+            function Demo() {
+              var _context;
+              var _this;
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+              }
+              _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+              _this.XMarkdown = XMarkdown;
+              return _this;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: ['# 标题', '', '> 引用内容', '', '$E = mc^2$', '', '| A | B |', '| --- | --- |', '| 1 | 2 |', '', '```ts', 'const value = 1;', '```'].join('\n')
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown content={this.get('content')} />\n            ";
+          _mount = mount(Demo), element = _mount[1];
+          _context2.next = 5;
+          return waitFor(function () {
+            return !!element.querySelector('.k-xmarkdown-code-toolbar') && !!element.querySelector('.katex');
+          }, 60, 20);
+        case 5:
+          ready = _context2.sent;
+          expect(ready).to.be.true;
+          expect(element.querySelector('.k-xmarkdown-content h1')).not.to.eql(null);
+          expect(element.querySelector('.k-xmarkdown-content').textContent).to.contain('标题');
+          expect(element.querySelector('.k-xmarkdown-content blockquote').textContent).to.contain('引用内容');
+          expect(element.querySelector('.k-xmarkdown-content table')).not.to.eql(null);
+          expect(element.querySelector('.k-xmarkdown-table-wrap table')).not.to.eql(null);
+          expect(element.querySelector('.k-xmarkdown-code-toolbar')).not.to.eql(null);
+          expect(element.querySelector('.katex')).not.to.eql(null);
+        case 14:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee);
+  })));
+  it('should sanitize raw html by default', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var Demo, _mount2, element;
+    return _regeneratorRuntime.wrap(function _callee2$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component2) {
+            _inheritsLoose(Demo, _Component2);
+            function Demo() {
+              var _context3;
+              var _this2;
+              for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                args[_key2] = arguments[_key2];
+              }
+              _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context3 = [this]).call(_context3, args)) || this;
+              _this2.XMarkdown = XMarkdown;
+              return _this2;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown content={'<script>alert(1)</script><b>safe</b>'} />\n            ";
+          _mount2 = mount(Demo), element = _mount2[1];
+          _context4.next = 5;
+          return wait(40);
+        case 5:
+          expect(element.querySelector('script')).to.eql(null);
+          expect(element.querySelector('b')).to.eql(null);
+          expect(element.querySelector('.k-xmarkdown-content').textContent).to.contain('safe');
+        case 8:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee2);
+  })));
+  it('should ignore empty loading and empty slots', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var Demo, _mount3, element;
+    return _regeneratorRuntime.wrap(function _callee3$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component3) {
+            _inheritsLoose(Demo, _Component3);
+            function Demo() {
+              var _context5;
+              var _this3;
+              for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                args[_key3] = arguments[_key3];
+              }
+              _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context5 = [this]).call(_context5, args)) || this;
+              _this3.XMarkdown = XMarkdown;
+              return _this3;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <div>\n                    <XMarkdown className=\"empty-loading\" loading>\n                        <b:loading>\n                            <span v-if={false} class=\"empty-loading-slot\">loading</span>\n                        </b:loading>\n                    </XMarkdown>\n                    <XMarkdown className=\"empty-empty\">\n                        <b:empty>\n                            <span v-if={false} class=\"empty-empty-slot\">empty</span>\n                        </b:empty>\n                    </XMarkdown>\n                </div>\n            ";
+          _mount3 = mount(Demo), element = _mount3[1];
+          expect(element.querySelector('.empty-loading .k-xmarkdown-loading')).not.to.eql(null);
+          expect(element.querySelector('.empty-loading-slot')).to.eql(null);
+          expect(element.querySelector('.empty-empty .k-xmarkdown-empty')).to.eql(null);
+        case 6:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee3);
+  })));
+  it('should render paragraph text with 12px font size', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var Demo, _mount4, element, paragraph;
+    return _regeneratorRuntime.wrap(function _callee4$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component4) {
+            _inheritsLoose(Demo, _Component4);
+            function Demo() {
+              var _context7;
+              var _this4;
+              for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+                args[_key4] = arguments[_key4];
+              }
+              _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context7 = [this]).call(_context7, args)) || this;
+              _this4.XMarkdown = XMarkdown;
+              return _this4;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown content=\"\u6B63\u6587\u5185\u5BB9\" />\n            ";
+          _mount4 = mount(Demo), element = _mount4[1];
+          _context8.next = 5;
+          return wait(20);
+        case 5:
+          paragraph = element.querySelector('.k-xmarkdown-content p');
+          expect(getComputedStyle(paragraph).fontSize).to.eql('12px');
+        case 7:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee4);
+  })));
+  it('should render code and table text with 12px font size', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var Demo, _mount5, element, ready, inlineCode, codeBlock, table, tableCell;
+    return _regeneratorRuntime.wrap(function _callee5$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component5) {
+            _inheritsLoose(Demo, _Component5);
+            function Demo() {
+              var _context9;
+              var _this5;
+              for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+                args[_key5] = arguments[_key5];
+              }
+              _this5 = _Component5.call.apply(_Component5, _concatInstanceProperty(_context9 = [this]).call(_context9, args)) || this;
+              _this5.XMarkdown = XMarkdown;
+              return _this5;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: ['正文 `inlineCode`', '', '| A | B |', '| --- | --- |', '| 1 | 2 |', '', '```ts', 'const value = 1;', '```'].join('\n')
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown content={this.get('content')} />\n            ";
+          _mount5 = mount(Demo), element = _mount5[1];
+          _context10.next = 5;
+          return waitFor(function () {
+            return !!element.querySelector('.k-xmarkdown-code-block');
+          });
+        case 5:
+          ready = _context10.sent;
+          expect(ready).to.be.true;
+          inlineCode = element.querySelector('.k-xmarkdown-inline-code');
+          codeBlock = element.querySelector('.k-xmarkdown-code-block pre');
+          table = element.querySelector('.k-xmarkdown-table-wrap > table');
+          tableCell = element.querySelector('.k-xmarkdown-table-wrap td');
+          expect(getComputedStyle(inlineCode).fontSize).to.eql('12px');
+          expect(getComputedStyle(codeBlock).fontSize).to.eql('12px');
+          expect(getComputedStyle(table).fontSize).to.eql('12px');
+          expect(getComputedStyle(tableCell).fontSize).to.eql('12px');
+        case 15:
+        case "end":
+          return _context10.stop();
+      }
+    }, _callee5);
+  })));
+  it('should copy code and emit codeCopy', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var writeText, Demo, _mount6, instance, element, ready, button, block;
+    return _regeneratorRuntime.wrap(function _callee6$(_context12) {
+      while (1) switch (_context12.prev = _context12.next) {
+        case 0:
+          writeText = sinon.stub().resolves();
+          Object.defineProperty(navigator, 'clipboard', {
+            value: {
+              writeText: writeText
+            },
+            configurable: true
+          });
+          Demo = /*#__PURE__*/function (_Component6) {
+            _inheritsLoose(Demo, _Component6);
+            function Demo() {
+              var _context11;
+              var _this6;
+              for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+                args[_key6] = arguments[_key6];
+              }
+              _this6 = _Component6.call.apply(_Component6, _concatInstanceProperty(_context11 = [this]).call(_context11, args)) || this;
+              _this6.XMarkdown = XMarkdown;
+              return _this6;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: '```ts\nconst value = 1;\n```',
+                copiedCode: ''
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={this.get('content')}\n                    ev-codeCopy={(code) => this.set('copiedCode', code)}\n                />\n            ";
+          _mount6 = mount(Demo), instance = _mount6[0], element = _mount6[1];
+          _context12.next = 7;
+          return waitFor(function () {
+            return !!element.querySelector('[data-kpc-action="copy-code"]');
+          });
+        case 7:
+          ready = _context12.sent;
+          expect(ready).to.be.true;
+          button = element.querySelector('[data-kpc-action="copy-code"]');
+          block = button.closest('[data-kpc-code-block="true"]');
+          dispatchEvent(button, 'click');
+          _context12.next = 14;
+          return wait(30);
+        case 14:
+          expect(writeText.calledOnce).to.be.true;
+          expect(writeText.firstCall.args[0]).to.eql('const value = 1;');
+          expect(instance.get('copiedCode')).to.eql('const value = 1;');
+          expect(button.getAttribute('title')).to.eql('已复制');
+          expect(block.dataset.kpcSource).to.eql(undefined);
+          expect(block.dataset.kpcBlockId).to.not.eql(undefined);
+        case 20:
+        case "end":
+          return _context12.stop();
+      }
+    }, _callee6);
+  })));
+  it('should keep unsupported languages as code blocks without syntax highlighting', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var Demo, _mount7, element, ready, block, language, code;
+    return _regeneratorRuntime.wrap(function _callee7$(_context14) {
+      while (1) switch (_context14.prev = _context14.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component7) {
+            _inheritsLoose(Demo, _Component7);
+            function Demo() {
+              var _context13;
+              var _this7;
+              for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+                args[_key7] = arguments[_key7];
+              }
+              _this7 = _Component7.call.apply(_Component7, _concatInstanceProperty(_context13 = [this]).call(_context13, args)) || this;
+              _this7.XMarkdown = XMarkdown;
+              return _this7;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: '```unknownlang\n++>---.\n```'
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown content={this.get('content')} />\n            ";
+          _mount7 = mount(Demo), element = _mount7[1];
+          _context14.next = 5;
+          return waitFor(function () {
+            return !!element.querySelector('.k-xmarkdown-code-block');
+          });
+        case 5:
+          ready = _context14.sent;
+          expect(ready).to.be.true;
+          block = element.querySelector('.k-xmarkdown-code-block');
+          language = block.querySelector('.k-xmarkdown-code-language');
+          code = block.querySelector('pre code');
+          expect(language.textContent).to.eql('unknownlang');
+          expect(code.textContent).to.contain('++>---.');
+          expect(code.className).to.eql('hljs');
+        case 13:
+        case "end":
+          return _context14.stop();
+      }
+    }, _callee7);
+  })));
+  it('should hide code toolbar when showCodeHeader is false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var Demo, _mount8, element, ready;
+    return _regeneratorRuntime.wrap(function _callee8$(_context16) {
+      while (1) switch (_context16.prev = _context16.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component8) {
+            _inheritsLoose(Demo, _Component8);
+            function Demo() {
+              var _context15;
+              var _this8;
+              for (var _len8 = arguments.length, args = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
+                args[_key8] = arguments[_key8];
+              }
+              _this8 = _Component8.call.apply(_Component8, _concatInstanceProperty(_context15 = [this]).call(_context15, args)) || this;
+              _this8.XMarkdown = XMarkdown;
+              return _this8;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: '```ts\nconst value = 1;\n```'
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={this.get('content')}\n                    showCodeHeader={false}\n                />\n            ";
+          _mount8 = mount(Demo), element = _mount8[1];
+          _context16.next = 5;
+          return waitFor(function () {
+            return !!element.querySelector('.k-xmarkdown-code-block');
+          });
+        case 5:
+          ready = _context16.sent;
+          expect(ready).to.be.true;
+          expect(element.querySelector('.k-xmarkdown-code-toolbar')).to.eql(null);
+          expect(element.querySelector('.k-xmarkdown-code-body')).to.eql(null);
+          expect(element.querySelector('pre code').textContent).to.contain('const value = 1;');
+        case 10:
+        case "end":
+          return _context16.stop();
+      }
+    }, _callee8);
+  })));
+  it('should render mermaid blocks, support zoom controls and toggle source view', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var renderAsync, Demo, _mount9, element, ready, block, root, content, mermaidBody, viewport, diagramToggle, zoomIn, initialScale, resetZoom, toggle;
+    return _regeneratorRuntime.wrap(function _callee9$(_context18) {
+      while (1) switch (_context18.prev = _context18.next) {
+        case 0:
+          sinon.stub(mermaid, 'initialize');
+          renderAsync = sinon.stub(mermaid, 'renderAsync').resolves('<svg class="mock-mermaid" viewBox="0 0 200 120"><text>diagram</text></svg>');
+          Demo = /*#__PURE__*/function (_Component9) {
+            _inheritsLoose(Demo, _Component9);
+            function Demo() {
+              var _context17;
+              var _this9;
+              for (var _len9 = arguments.length, args = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
+                args[_key9] = arguments[_key9];
+              }
+              _this9 = _Component9.call.apply(_Component9, _concatInstanceProperty(_context17 = [this]).call(_context17, args)) || this;
+              _this9.XMarkdown = XMarkdown;
+              return _this9;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: '```mermaid\nflowchart TD\nA-->B\n```'
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown content={this.get('content')} />\n            ";
+          _mount9 = mount(Demo), element = _mount9[1];
+          _context18.next = 7;
+          return waitFor(function () {
+            return !!element.querySelector('[data-kpc-mermaid="true"] svg');
+          });
+        case 7:
+          ready = _context18.sent;
+          expect(ready).to.be.true;
+          block = element.querySelector('[data-kpc-mermaid="true"]');
+          root = element.matches('.k-xmarkdown') ? element : element.querySelector('.k-xmarkdown');
+          content = root.querySelector('.k-xmarkdown-content');
+          mermaidBody = block.querySelector('.k-xmarkdown-mermaid-body');
+          viewport = block.querySelector('.k-xmarkdown-mermaid-viewport');
+          expect(block.querySelector('.mock-mermaid')).not.to.eql(null);
+          expect(renderAsync.firstCall.args[0]).to.match(/^kpc-xmarkdown-mermaid-[a-z0-9]+-xmarkdown-block-0$/);
+          expect(block.dataset.kpcSource).to.eql(undefined);
+          expect(block.dataset.kpcBlockId).to.not.eql(undefined);
+          expect(getComputedStyle(root).maxWidth).to.eql('100%');
+          expect(getComputedStyle(content).maxWidth).to.eql('100%');
+          expect(getComputedStyle(block).maxWidth).to.eql('100%');
+          expect(getComputedStyle(mermaidBody).maxWidth).to.eql('100%');
+          expect(getComputedStyle(viewport).maxWidth).to.eql('100%');
+          diagramToggle = block.querySelector('[data-kpc-action="set-mermaid-view-diagram"]');
+          expect(diagramToggle.getAttribute('aria-pressed')).to.eql('true');
+          zoomIn = block.querySelector('[data-kpc-action="zoom-mermaid-in"]');
+          initialScale = Number(block.dataset.kpcScale || '1');
+          dispatchEvent(zoomIn, 'click');
+          _context18.next = 30;
+          return wait(40);
+        case 30:
+          expect(Number(block.dataset.kpcScale)).to.be.greaterThan(initialScale);
+          expect(block.querySelector('svg').style.width).not.to.eql('');
+          resetZoom = block.querySelector('[data-kpc-action="reset-mermaid-zoom"]');
+          dispatchEvent(resetZoom, 'click');
+          _context18.next = 36;
+          return wait(40);
+        case 36:
+          expect(Number(block.dataset.kpcScale)).to.eql(initialScale);
+          toggle = block.querySelector('[data-kpc-action="set-mermaid-view-source"]');
+          dispatchEvent(toggle, 'click');
+          _context18.next = 41;
+          return wait(20);
+        case 41:
+          expect(block.dataset.kpcView).to.eql('source');
+          expect(toggle.dataset.kpcSelected).to.eql('true');
+          expect(toggle.getAttribute('aria-pressed')).to.eql('true');
+        case 44:
+        case "end":
+          return _context18.stop();
+      }
+    }, _callee9);
+  })));
+  it('should render mermaid fences as plain code blocks when enableMermaid is false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var Demo, _mount10, element, ready;
+    return _regeneratorRuntime.wrap(function _callee10$(_context20) {
+      while (1) switch (_context20.prev = _context20.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component10) {
+            _inheritsLoose(Demo, _Component10);
+            function Demo() {
+              var _context19;
+              var _this10;
+              for (var _len10 = arguments.length, args = new Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
+                args[_key10] = arguments[_key10];
+              }
+              _this10 = _Component10.call.apply(_Component10, _concatInstanceProperty(_context19 = [this]).call(_context19, args)) || this;
+              _this10.XMarkdown = XMarkdown;
+              return _this10;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: '```mermaid\nflowchart TD\nA-->B\n```'
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    enableMermaid={false}\n                    content={this.get('content')}\n                />\n            ";
+          _mount10 = mount(Demo), element = _mount10[1];
+          _context20.next = 5;
+          return waitFor(function () {
+            return !!element.querySelector('.k-xmarkdown-code-block');
+          });
+        case 5:
+          ready = _context20.sent;
+          expect(ready).to.be.true;
+          expect(element.querySelector('[data-kpc-mermaid="true"]')).to.eql(null);
+          expect(element.querySelector('.k-xmarkdown-code-language').textContent).to.eql('mermaid');
+          expect(element.querySelector('pre code').textContent).to.contain('flowchart TD');
+        case 10:
+        case "end":
+          return _context20.stop();
+      }
+    }, _callee10);
+  })));
+  it('should merge custom mermaidConfig when rendering mermaid', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var initialize, Demo, _mount11, element, ready;
+    return _regeneratorRuntime.wrap(function _callee11$(_context22) {
+      while (1) switch (_context22.prev = _context22.next) {
+        case 0:
+          initialize = sinon.stub(mermaid, 'initialize');
+          sinon.stub(mermaid, 'renderAsync').resolves('<svg class="mock-mermaid-config" viewBox="0 0 200 120"><text>diagram</text></svg>');
+          Demo = /*#__PURE__*/function (_Component11) {
+            _inheritsLoose(Demo, _Component11);
+            function Demo() {
+              var _context21;
+              var _this11;
+              for (var _len11 = arguments.length, args = new Array(_len11), _key11 = 0; _key11 < _len11; _key11++) {
+                args[_key11] = arguments[_key11];
+              }
+              _this11 = _Component11.call.apply(_Component11, _concatInstanceProperty(_context21 = [this]).call(_context21, args)) || this;
+              _this11.XMarkdown = XMarkdown;
+              return _this11;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: '```mermaid\nflowchart TD\nA-->B\n```',
+                mermaidConfig: {
+                  theme: 'base',
+                  themeVariables: {
+                    primaryColor: '#fff4cc'
+                  }
+                }
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={this.get('content')}\n                    mermaidConfig={this.get('mermaidConfig')}\n                />\n            ";
+          _mount11 = mount(Demo), element = _mount11[1];
+          _context22.next = 7;
+          return waitFor(function () {
+            return !!element.querySelector('.mock-mermaid-config');
+          });
+        case 7:
+          ready = _context22.sent;
+          expect(ready).to.be.true;
+          expect(initialize.calledOnce).to.be.true;
+          expect(initialize.firstCall.args[0].startOnLoad).to.be.false;
+          expect(initialize.firstCall.args[0].securityLevel).to.eql('strict');
+          expect(initialize.firstCall.args[0].theme).to.eql('base');
+          expect(initialize.firstCall.args[0].themeVariables.primaryColor).to.eql('#fff4cc');
+        case 14:
+        case "end":
+          return _context22.stop();
+      }
+    }, _callee11);
+  })));
+  it('should rerender mermaid when mermaidConfig changes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
+    var initialize, renderAsync, Demo, _mount12, instance, element, ready, rerendered;
+    return _regeneratorRuntime.wrap(function _callee12$(_context24) {
+      while (1) switch (_context24.prev = _context24.next) {
+        case 0:
+          initialize = sinon.stub(mermaid, 'initialize');
+          renderAsync = sinon.stub(mermaid, 'renderAsync').resolves('<svg class="mock-mermaid-update-config" viewBox="0 0 200 120"><text>diagram</text></svg>');
+          Demo = /*#__PURE__*/function (_Component12) {
+            _inheritsLoose(Demo, _Component12);
+            function Demo() {
+              var _context23;
+              var _this12;
+              for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
+                args[_key12] = arguments[_key12];
+              }
+              _this12 = _Component12.call.apply(_Component12, _concatInstanceProperty(_context23 = [this]).call(_context23, args)) || this;
+              _this12.XMarkdown = XMarkdown;
+              return _this12;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: '```mermaid\nflowchart TD\nA-->B\n```',
+                mermaidConfig: {
+                  theme: 'base',
+                  themeVariables: {
+                    primaryColor: '#e8f3ff'
+                  }
+                }
+              };
+            };
+            var _proto = Demo.prototype;
+            _proto.updateConfig = function updateConfig() {
+              this.set('mermaidConfig.themeVariables.primaryColor', '#fff4cc');
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <div>\n                    <XMarkdown\n                        content={this.get('content')}\n                        mermaidConfig={this.get('mermaidConfig')}\n                    />\n                </div>\n            ";
+          _mount12 = mount(Demo), instance = _mount12[0], element = _mount12[1];
+          _context24.next = 7;
+          return waitFor(function () {
+            return !!element.querySelector('.mock-mermaid-update-config');
+          });
+        case 7:
+          ready = _context24.sent;
+          expect(ready).to.be.true;
+          expect(initialize.callCount).to.eql(1);
+          expect(renderAsync.callCount).to.eql(1);
+          expect(initialize.firstCall.args[0].themeVariables.primaryColor).to.eql('#e8f3ff');
+          instance.updateConfig();
+          _context24.next = 15;
+          return waitFor(function () {
+            return initialize.callCount === 2 && renderAsync.callCount === 2;
+          }, 60, 20);
+        case 15:
+          rerendered = _context24.sent;
+          expect(rerendered).to.be.true;
+          expect(initialize.secondCall.args[0].themeVariables.primaryColor).to.eql('#fff4cc');
+        case 18:
+        case "end":
+          return _context24.stop();
+      }
+    }, _callee12);
+  })));
+  it('should generate different mermaid render ids for sibling markdown instances with same content', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+    var _context26;
+    var renderAsync, Demo, _mount13, element, ready, renderIds, firstMatch;
+    return _regeneratorRuntime.wrap(function _callee13$(_context27) {
+      while (1) switch (_context27.prev = _context27.next) {
+        case 0:
+          sinon.stub(mermaid, 'initialize');
+          renderAsync = sinon.stub(mermaid, 'renderAsync').resolves('<svg class="mock-mermaid-duplicate" viewBox="0 0 200 120"><text>diagram</text></svg>');
+          Demo = /*#__PURE__*/function (_Component13) {
+            _inheritsLoose(Demo, _Component13);
+            function Demo() {
+              var _context25;
+              var _this13;
+              for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
+                args[_key13] = arguments[_key13];
+              }
+              _this13 = _Component13.call.apply(_Component13, _concatInstanceProperty(_context25 = [this]).call(_context25, args)) || this;
+              _this13.XMarkdown = XMarkdown;
+              return _this13;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: '```mermaid\nflowchart TD\nA-->B\n```'
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <div class=\"xmarkdown-mermaid-duplicate-demo\">\n                    <XMarkdown content={this.get('content')} />\n                    <XMarkdown content={this.get('content')} />\n                </div>\n            ";
+          _mount13 = mount(Demo), element = _mount13[1];
+          _context27.next = 7;
+          return waitFor(function () {
+            return element.querySelectorAll('.mock-mermaid-duplicate').length === 2;
+          });
+        case 7:
+          ready = _context27.sent;
+          expect(ready).to.be.true;
+          expect(renderAsync.callCount).to.eql(2);
+          renderIds = _mapInstanceProperty(_context26 = renderAsync.args).call(_context26, function (args) {
+            return args[0];
+          });
+          expect(renderIds[0]).to.not.eql(renderIds[1]);
+          firstMatch = /^kpc-xmarkdown-mermaid-([a-z0-9]+)-xmarkdown-block-0$/.exec(renderIds[0]);
+          expect(firstMatch).to.not.eql(null);
+          expect(renderIds[1]).to.eql("kpc-xmarkdown-mermaid-" + firstMatch[1] + "-1-xmarkdown-block-0");
+        case 15:
+        case "end":
+          return _context27.stop();
+      }
+    }, _callee13);
+  })));
+  it('should render complex mermaid demo content with lightweight stubbed output', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+    var renderAsync, complexMermaidContent, Demo, _mount14, element, ready, block;
+    return _regeneratorRuntime.wrap(function _callee14$(_context29) {
+      while (1) switch (_context29.prev = _context29.next) {
+        case 0:
+          sinon.stub(mermaid, 'initialize');
+          renderAsync = sinon.stub(mermaid, 'renderAsync').resolves('<svg class="mock-mermaid-demo" viewBox="0 0 320 180"><text>demo</text></svg>');
+          complexMermaidContent = ['```mermaid', 'flowchart LR', '    A[需求输入] --> B{方案评审}', '    B -->|通过| C[组件设计]', '    B -->|补充信息| D[补充需求]', '    D --> B', '', '    C --> E[交互定义]', '    C --> F[渲染实现]', '    E --> G[边界校验]', '    F --> H[发版验证]', '', '    G --> H', '```'].join('\n');
+          Demo = /*#__PURE__*/function (_Component14) {
+            _inheritsLoose(Demo, _Component14);
+            function Demo() {
+              var _context28;
+              var _this14;
+              for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
+                args[_key14] = arguments[_key14];
+              }
+              _this14 = _Component14.call.apply(_Component14, _concatInstanceProperty(_context28 = [this]).call(_context28, args)) || this;
+              _this14.XMarkdown = XMarkdown;
+              return _this14;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: complexMermaidContent
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown content={this.get('content')} />\n            ";
+          _mount14 = mount(Demo), element = _mount14[1];
+          _context29.next = 8;
+          return waitFor(function () {
+            return !!element.querySelector('.mock-mermaid-demo');
+          });
+        case 8:
+          ready = _context29.sent;
+          expect(ready).to.be.true;
+          block = element.querySelector('[data-kpc-mermaid="true"]');
+          expect(block.querySelector('.mock-mermaid-demo')).not.to.eql(null);
+          expect(renderAsync.calledOnce).to.be.true;
+          expect(renderAsync.firstCall.args[1]).to.contain('A[需求输入] --> B{方案评审}');
+          expect(renderAsync.firstCall.args[1]).to.contain('G --> H');
+          expect(block.querySelector('.k-xmarkdown-code-language').textContent).to.eql('Mermaid');
+          expect(block.querySelector('[data-kpc-action="copy-mermaid"]')).not.to.eql(null);
+          expect(block.querySelector('.k-xmarkdown-mermaid-source code').textContent).to.contain('组件设计');
+        case 18:
+        case "end":
+          return _context29.stop();
+      }
+    }, _callee14);
+  })));
+  it('should support typing and streaming completion', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+    var Demo, _mount15, instance, element, hasTail, i, _i, rendered;
+    return _regeneratorRuntime.wrap(function _callee15$(_context31) {
+      while (1) switch (_context31.prev = _context31.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component15) {
+            _inheritsLoose(Demo, _Component15);
+            function Demo() {
+              var _context30;
+              var _this15;
+              for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
+                args[_key15] = arguments[_key15];
+              }
+              _this15 = _Component15.call.apply(_Component15, _concatInstanceProperty(_context30 = [this]).call(_context30, args)) || this;
+              _this15.XMarkdown = XMarkdown;
+              return _this15;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: '# 标题\n\n- alpha\n- beta',
+                streaming: true,
+                typingCount: 0,
+                completeCount: 0
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={this.get('content')}\n                    streaming={this.get('streaming')}\n                    typing={{interval: 16, step: 2}}\n                    ev-typing={() => this.set('typingCount', this.get('typingCount') + 1)}\n                    ev-typingComplete={() => this.set('completeCount', this.get('completeCount') + 1)}\n                />\n            ";
+          _mount15 = mount(Demo), instance = _mount15[0], element = _mount15[1];
+          hasTail = false;
+          i = 0;
+        case 5:
+          if (!(i < 10)) {
+            _context31.next = 14;
+            break;
+          }
+          _context31.next = 8;
+          return wait(20);
+        case 8:
+          hasTail = !!element.querySelector('[data-kpc-xmarkdown-tail="true"]');
+          if (!hasTail) {
+            _context31.next = 11;
+            break;
+          }
+          return _context31.abrupt("break", 14);
+        case 11:
+          i++;
+          _context31.next = 5;
+          break;
+        case 14:
+          expect(hasTail).to.be.true;
+          expect(instance.get('typingCount')).to.be.greaterThan(0);
+          expect(instance.get('completeCount')).to.eql(0);
+          instance.set('streaming', false);
+          _i = 0;
+        case 19:
+          if (!(_i < 20 && instance.get('completeCount') === 0)) {
+            _context31.next = 25;
+            break;
+          }
+          _context31.next = 22;
+          return wait(20);
+        case 22:
+          _i++;
+          _context31.next = 19;
+          break;
+        case 25:
+          _context31.next = 27;
+          return waitFor(function () {
+            return element.querySelectorAll('.k-xmarkdown-content li').length === 2;
+          });
+        case 27:
+          rendered = _context31.sent;
+          expect(instance.get('completeCount')).to.eql(1);
+          expect(rendered).to.be.true;
+          expect(element.querySelector('.k-xmarkdown-content h1')).not.to.eql(null);
+          expect(element.querySelector('.k-xmarkdown-content').textContent).to.contain('标题');
+          expect(element.querySelectorAll('.k-xmarkdown-content li').length).to.eql(2);
+        case 33:
+        case "end":
+          return _context31.stop();
+      }
+    }, _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) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component16) {
+            _inheritsLoose(Demo, _Component16);
+            function Demo() {
+              var _context32;
+              var _this16;
+              for (var _len16 = arguments.length, args = new Array(_len16), _key16 = 0; _key16 < _len16; _key16++) {
+                args[_key16] = arguments[_key16];
+              }
+              _this16 = _Component16.call.apply(_Component16, _concatInstanceProperty(_context32 = [this]).call(_context32, args)) || this;
+              _this16.XMarkdown = XMarkdown;
+              return _this16;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: '# 标题\n\n一段稳定的话。\n\n',
+                streaming: true
+              };
+            };
+            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;
+          return waitFor(function () {
+            return !!element.querySelector('.k-xmarkdown-stable h1');
+          });
+        case 5:
+          ready = _context33.sent;
+          expect(ready).to.be.true;
+          stableContainer = element.querySelector('.k-xmarkdown-stable');
+          tailContainer = element.querySelector('.k-xmarkdown-tail');
+          expect(stableContainer).not.to.eql(null);
+          expect(tailContainer).not.to.eql(null);
+          expect(stableContainer.querySelector('h1')).not.to.eql(null);
+          expect(tailContainer.innerHTML).to.eql('');
+          h1 = stableContainer.querySelector('h1');
+          paragraph = stableContainer.querySelector('p');
+          h1.__kpcStableProbe = 'kept';
+          paragraph.__kpcStableParagraphProbe = 'kept';
+          instance.set('content', '# 标题\n\n一段稳定的话。\n\n# 新标题');
+          _context33.next = 20;
+          return waitFor(function () {
+            return !!tailContainer.querySelector('[data-kpc-xmarkdown-tail="true"]');
+          }, 30, 20);
+        case 20:
+          hasTail = _context33.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;
+          return waitFor(function () {
+            return !tailContainer.querySelector('[data-kpc-xmarkdown-tail="true"]') && stableContainer.querySelectorAll('h1').length === 2;
+          }, 30, 20);
+        case 29:
+          promoted = _context33.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();
+      }
+    }, _callee16);
+  })));
+  it('should keep previous stable DOM across multiple append-only promotions', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
+    var Demo, _mount17, instance, element, ready, stableContainer, tailContainer, firstHeading, firstParagraph, firstTailReady, firstPromotionReady, secondHeading, secondParagraph, secondTailReady, secondPromotionReady;
+    return _regeneratorRuntime.wrap(function _callee17$(_context35) {
+      while (1) switch (_context35.prev = _context35.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component17) {
+            _inheritsLoose(Demo, _Component17);
+            function Demo() {
+              var _context34;
+              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(_context34 = [this]).call(_context34, args)) || this;
+              _this17.XMarkdown = XMarkdown;
+              return _this17;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: '# 标题\n\n第一段稳定内容。\n\n',
+                streaming: true
+              };
+            };
+            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), instance = _mount17[0], element = _mount17[1];
+          _context35.next = 5;
+          return waitFor(function () {
+            return !!element.querySelector('.k-xmarkdown-stable h1');
+          });
+        case 5:
+          ready = _context35.sent;
+          expect(ready).to.be.true;
+          stableContainer = element.querySelector('.k-xmarkdown-stable');
+          tailContainer = element.querySelector('.k-xmarkdown-tail');
+          firstHeading = stableContainer.querySelector('h1');
+          firstParagraph = stableContainer.querySelector('p');
+          firstHeading.__kpcFirstStableHeading = 'kept';
+          firstParagraph.__kpcFirstStableParagraph = 'kept';
+          instance.set('content', '# 标题\n\n第一段稳定内容。\n\n# 第二个标题');
+          _context35.next = 16;
+          return waitFor(function () {
+            return !!tailContainer.querySelector('[data-kpc-xmarkdown-tail="true"]');
+          }, 30, 20);
+        case 16:
+          firstTailReady = _context35.sent;
+          expect(firstTailReady).to.be.true;
+          instance.set('content', '# 标题\n\n第一段稳定内容。\n\n# 第二个标题\n\n第二段稳定内容。\n\n');
+          _context35.next = 21;
+          return waitFor(function () {
+            return stableContainer.querySelectorAll('h1').length === 2;
+          }, 30, 20);
+        case 21:
+          firstPromotionReady = _context35.sent;
+          expect(firstPromotionReady).to.be.true;
+          expect(stableContainer.querySelector('h1').__kpcFirstStableHeading).to.eql('kept');
+          expect(stableContainer.querySelector('p').__kpcFirstStableParagraph).to.eql('kept');
+          secondHeading = stableContainer.querySelectorAll('h1')[1];
+          secondParagraph = stableContainer.querySelectorAll('p')[1];
+          secondHeading.__kpcSecondStableHeading = 'kept';
+          secondParagraph.__kpcSecondStableParagraph = 'kept';
+          instance.set('content', '# 标题\n\n第一段稳定内容。\n\n# 第二个标题\n\n第二段稳定内容。\n\n## 第三个标题');
+          _context35.next = 32;
+          return waitFor(function () {
+            return !!tailContainer.querySelector('[data-kpc-xmarkdown-tail="true"]');
+          }, 30, 20);
+        case 32:
+          secondTailReady = _context35.sent;
+          expect(secondTailReady).to.be.true;
+          instance.set('content', '# 标题\n\n第一段稳定内容。\n\n# 第二个标题\n\n第二段稳定内容。\n\n## 第三个标题\n\n第三段稳定内容。');
+          _context35.next = 37;
+          return waitFor(function () {
+            return stableContainer.querySelectorAll('h1').length === 2 && stableContainer.querySelectorAll('h2').length === 1;
+          }, 30, 20);
+        case 37:
+          secondPromotionReady = _context35.sent;
+          expect(secondPromotionReady).to.be.true;
+          expect(stableContainer.querySelector('h1').__kpcFirstStableHeading).to.eql('kept');
+          expect(stableContainer.querySelector('p').__kpcFirstStableParagraph).to.eql('kept');
+          expect(stableContainer.querySelectorAll('h1')[1].__kpcSecondStableHeading).to.eql('kept');
+          expect(stableContainer.querySelectorAll('p')[1].__kpcSecondStableParagraph).to.eql('kept');
+        case 43:
+        case "end":
+          return _context35.stop();
+      }
+    }, _callee17);
+  })));
+  it('should put unclosed block-level formula into tail container during streaming', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
+    var Demo, _mount18, instance, element, ready, stableContainer, tailContainer, formulaRendered;
+    return _regeneratorRuntime.wrap(function _callee18$(_context37) {
+      while (1) switch (_context37.prev = _context37.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component18) {
+            _inheritsLoose(Demo, _Component18);
+            function Demo() {
+              var _context36;
+              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(_context36 = [this]).call(_context36, args)) || this;
+              _this18.XMarkdown = XMarkdown;
+              return _this18;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                // $$ 后面没有闭合的 $$
+                content: '# 标题\n\n$$\n\\operatorname{score}(x)=\\sum_{i=1}^{n}',
+                streaming: true
+              };
+            };
+            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;
+          return waitFor(function () {
+            return !!element.querySelector('.k-xmarkdown-stable h1');
+          });
+        case 5:
+          ready = _context37.sent;
+          expect(ready).to.be.true;
+          stableContainer = element.querySelector('.k-xmarkdown-stable');
+          tailContainer = element.querySelector('.k-xmarkdown-tail'); // 标题应该在 stable 中
+          expect(stableContainer.querySelector('h1')).not.to.eql(null);
+          // 块级公式 $$ 应该在 tail 中（因为未闭合）
+          expect(tailContainer.textContent).to.contain('$$');
+          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$$');
+          _context37.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 = _context37.sent;
+          expect(formulaRendered).to.be.true;
+        case 17:
+        case "end":
+          return _context37.stop();
+      }
+    }, _callee18);
+  })));
+  it('should keep incomplete inline tokens in tail cache during streaming', function () {
+    var cache = createStreamingTailCache();
+    var result = splitMarkdownForStreaming('请看[文', cache);
+    expect(result.stableSource).to.eql('请看');
+    expect(result.tailText).to.eql('[文');
+    result = splitMarkdownForStreaming('请看[文档](https://example.com)', cache);
+    expect(result.stableSource).to.eql('请看[文档](https://example.com)');
+    expect(result.tailText).to.eql('');
+    result = splitMarkdownForStreaming('请看[文档](https://example.com)\n<notice-card tit', cache);
+    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 _callee19() {
+    var Demo, _mount19, element, ready;
+    return _regeneratorRuntime.wrap(function _callee19$(_context39) {
+      while (1) switch (_context39.prev = _context39.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component19) {
+            _inheritsLoose(Demo, _Component19);
+            function Demo() {
+              var _context38;
+              var _this19;
+              for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
+                args[_key19] = arguments[_key19];
+              }
+              _this19 = _Component19.call.apply(_Component19, _concatInstanceProperty(_context38 = [this]).call(_context38, args)) || this;
+              _this19.XMarkdown = XMarkdown;
+              return _this19;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: ['<mark data-track="demo-mark">safe</mark>', '<notice-card title="发布建议">先补文档，再补单测。</notice-card>'].join('\n'),
+                sanitizeOptions: {
+                  ADD_TAGS: ['notice-card'],
+                  ADD_ATTR: ['title', 'data-track']
+                }
+              };
+            };
+            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            ";
+          _mount19 = mount(Demo), element = _mount19[1];
+          _context39.next = 5;
+          return waitFor(function () {
+            return !!element.querySelector('notice-card');
+          });
+        case 5:
+          ready = _context39.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 _context39.stop();
+      }
+    }, _callee19);
+  })));
+  it('should keep formula text when enableFormula is false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
+    var Demo, _mount20, element;
+    return _regeneratorRuntime.wrap(function _callee20$(_context41) {
+      while (1) switch (_context41.prev = _context41.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component20) {
+            _inheritsLoose(Demo, _Component20);
+            function Demo() {
+              var _context40;
+              var _this20;
+              for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
+                args[_key20] = arguments[_key20];
+              }
+              _this20 = _Component20.call.apply(_Component20, _concatInstanceProperty(_context40 = [this]).call(_context40, args)) || this;
+              _this20.XMarkdown = XMarkdown;
+              return _this20;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    enableFormula={false}\n                    content={'$E = mc^2$'}\n                />\n            ";
+          _mount20 = mount(Demo), element = _mount20[1];
+          _context41.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 _context41.stop();
+      }
+    }, _callee20);
+  })));
+  it('should support custom formulaDelimiters and formulaMacros', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
+    var Demo, _mount21, element, ready;
+    return _regeneratorRuntime.wrap(function _callee21$(_context43) {
+      while (1) switch (_context43.prev = _context43.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component21) {
+            _inheritsLoose(Demo, _Component21);
+            function Demo() {
+              var _context42;
+              var _this21;
+              for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
+                args[_key21] = arguments[_key21];
+              }
+              _this21 = _Component21.call.apply(_Component21, _concatInstanceProperty(_context42 = [this]).call(_context42, args)) || this;
+              _this21.XMarkdown = XMarkdown;
+              return _this21;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                formulaMacros: {
+                  '\\\\RR': '\\\\mathbb{R}'
+                }
+              };
+            };
+            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            ";
+          _mount21 = mount(Demo), element = _mount21[1];
+          _context43.next = 5;
+          return waitFor(function () {
+            return !!element.querySelector('.katex');
+          }, 60, 20);
+        case 5:
+          ready = _context43.sent;
+          expect(ready).to.be.true;
+          expect(element.querySelector('.k-xmarkdown-content').textContent).not.to.contain('\\[');
+        case 8:
+        case "end":
+          return _context43.stop();
+      }
+    }, _callee21);
+  })));
+  it('should support tagAttrs and tagRenderers for custom tags', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
+    var _context45;
+    var Demo, _mount22, element, ready, link;
+    return _regeneratorRuntime.wrap(function _callee22$(_context46) {
+      while (1) switch (_context46.prev = _context46.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component22) {
+            _inheritsLoose(Demo, _Component22);
+            function Demo() {
+              var _context44;
+              var _this22;
+              for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
+                args[_key22] = arguments[_key22];
+              }
+              _this22 = _Component22.call.apply(_Component22, _concatInstanceProperty(_context44 = [this]).call(_context44, args)) || this;
+              _this22.XMarkdown = XMarkdown;
+              _this22.tagAttrs = {
+                a: function a() {
+                  return {
+                    className: 'xmarkdown-enhanced-link',
+                    'data-track': 'demo-link'
+                  };
+                }
+              };
+              _this22.tagRenderers = {
+                'notice-card': function noticeCard(context) {
+                  return createVNode('section', {
+                    className: 'xmarkdown-custom-card'
+                  }, [createVNode('h4', {
+                    className: 'xmarkdown-custom-card-title'
+                  }, context.attrs.title || '提示'), createVNode('div', {
+                    className: 'xmarkdown-custom-card-body'
+                  }, context.textContent)]);
+                },
+                table: function table() {
+                  return createVNode('section', {
+                    className: 'xmarkdown-custom-table'
+                  }, 'custom table');
+                }
+              };
+              return _this22;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: ['# 标签增强示例', '', '<notice-card title="发布建议">先补 Demo，再补单测。</notice-card>', '', '| 阶段 | 状态 |', '| --- | --- |', '| 联调 | 进行中 |', '', '更多信息请查看 [文档](https://example.com)。'].join('\n'),
+                sanitizeOptions: {
+                  ADD_TAGS: ['notice-card'],
+                  ADD_ATTR: ['title']
+                }
+              };
+            };
+            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            ";
+          _mount22 = mount(Demo), element = _mount22[1];
+          _context46.next = 5;
+          return waitFor(function () {
+            return !!element.querySelector('.xmarkdown-custom-card');
+          });
+        case 5:
+          ready = _context46.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(_context45 = _Array$from(element.querySelector('.k-xmarkdown-stable').children)).call(_context45, function (item) {
+            return item.tagName.toLowerCase();
+          })).to.eql(['h1', 'section', 'div', 'p']);
+          expect(element.querySelector('.k-xmarkdown-stable p:empty')).to.eql(null);
+          link = element.querySelector('.xmarkdown-enhanced-link');
+          expect(link.getAttribute('data-track')).to.eql('demo-link');
+          expect(link.getAttribute('target')).to.eql('_blank');
+          expect(link.getAttribute('rel')).to.eql('noopener noreferrer');
+        case 18:
+        case "end":
+          return _context46.stop();
+      }
+    }, _callee22);
+  })));
+  it('should support codeBlockRenderers for code blocks and mermaid blocks', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
+    var initialize, renderAsync, codeContexts, mermaidContexts, Demo, _mount23, element, ready;
+    return _regeneratorRuntime.wrap(function _callee23$(_context48) {
+      while (1) switch (_context48.prev = _context48.next) {
+        case 0:
+          initialize = sinon.stub(mermaid, 'initialize');
+          renderAsync = sinon.stub(mermaid, 'renderAsync');
+          codeContexts = [];
+          mermaidContexts = [];
+          Demo = /*#__PURE__*/function (_Component23) {
+            _inheritsLoose(Demo, _Component23);
+            function Demo() {
+              var _context47;
+              var _this23;
+              for (var _len23 = arguments.length, args = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
+                args[_key23] = arguments[_key23];
+              }
+              _this23 = _Component23.call.apply(_Component23, _concatInstanceProperty(_context47 = [this]).call(_context47, args)) || this;
+              _this23.XMarkdown = XMarkdown;
+              _this23.codeBlockRenderers = {
+                ts: function ts(context) {
+                  codeContexts.push(context);
+                  return createVNode('section', {
+                    className: 'xmarkdown-custom-code-block'
+                  }, [createVNode('span', {
+                    className: 'xmarkdown-custom-code-title'
+                  }, context.blockType + ":" + context.language), createVNode('pre', {
+                    className: 'xmarkdown-custom-code-body'
+                  }, context.source)]);
+                },
+                mermaid: function mermaid(context) {
+                  mermaidContexts.push(context);
+                  return createVNode('section', {
+                    className: 'xmarkdown-custom-mermaid-block'
+                  }, [createVNode('h4', {
+                    className: 'xmarkdown-custom-mermaid-title'
+                  }, 'custom mermaid'), createVNode('code', {
+                    className: 'xmarkdown-custom-mermaid-body'
+                  }, context.source)]);
+                }
+              };
+              return _this23;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: ['```ts', 'const value: number = 1;', '```', '', '```mermaid', 'flowchart TD', 'A-->B', '```'].join('\n')
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={this.get('content')}\n                    codeBlockRenderers={this.codeBlockRenderers}\n                />\n            ";
+          _mount23 = mount(Demo), element = _mount23[1];
+          _context48.next = 9;
+          return waitFor(function () {
+            return !!element.querySelector('.xmarkdown-custom-code-block') && !!element.querySelector('.xmarkdown-custom-mermaid-block');
+          });
+        case 9:
+          ready = _context48.sent;
+          expect(ready).to.be.true;
+          expect(initialize.called).to.be.false;
+          expect(renderAsync.called).to.be.false;
+          expect(codeContexts[0].language).to.eql('ts');
+          expect(codeContexts[0].normalizedLanguage).to.eql('typescript');
+          expect(codeContexts[0].blockType).to.eql('code');
+          expect(mermaidContexts[0].language).to.eql('mermaid');
+          expect(mermaidContexts[0].blockType).to.eql('mermaid');
+          expect(element.querySelector('[data-kpc-mermaid="true"]')).to.eql(null);
+          expect(element.querySelector('.k-xmarkdown-code-toolbar')).to.eql(null);
+        case 20:
+        case "end":
+          return _context48.stop();
+      }
+    }, _callee23);
+  })));
+  it('should refresh renderer when codeBlockRenderers change', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
+    var Demo, _mount24, instance, element, initialReady, refreshed;
+    return _regeneratorRuntime.wrap(function _callee24$(_context50) {
+      while (1) switch (_context50.prev = _context50.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component24) {
+            _inheritsLoose(Demo, _Component24);
+            function Demo() {
+              var _context49;
+              var _this24;
+              for (var _len24 = arguments.length, args = new Array(_len24), _key24 = 0; _key24 < _len24; _key24++) {
+                args[_key24] = arguments[_key24];
+              }
+              _this24 = _Component24.call.apply(_Component24, _concatInstanceProperty(_context49 = [this]).call(_context49, args)) || this;
+              _this24.XMarkdown = XMarkdown;
+              return _this24;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: '```ts\nconst value = 1;\n```',
+                codeBlockRenderers: undefined
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={this.get('content')}\n                    codeBlockRenderers={this.get('codeBlockRenderers')}\n                />\n            ";
+          _mount24 = mount(Demo), instance = _mount24[0], element = _mount24[1];
+          _context50.next = 5;
+          return waitFor(function () {
+            return !!element.querySelector('.k-xmarkdown-code-toolbar');
+          });
+        case 5:
+          initialReady = _context50.sent;
+          expect(initialReady).to.be.true;
+          expect(element.querySelector('.xmarkdown-refresh-code-block')).to.eql(null);
+          instance.set('codeBlockRenderers', {
+            ts: function ts(context) {
+              return createVNode('section', {
+                className: 'xmarkdown-refresh-code-block'
+              }, context.source);
+            }
+          });
+          _context50.next = 11;
+          return waitFor(function () {
+            return !!element.querySelector('.xmarkdown-refresh-code-block');
+          });
+        case 11:
+          refreshed = _context50.sent;
+          expect(refreshed).to.be.true;
+          expect(element.querySelector('.k-xmarkdown-code-toolbar')).to.eql(null);
+        case 14:
+        case "end":
+          return _context50.stop();
+      }
+    }, _callee24);
+  })));
+  it('should support plugins for markdown extension and render tree transform', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
+    var Demo, _mount25, element, ready;
+    return _regeneratorRuntime.wrap(function _callee25$(_context52) {
+      while (1) switch (_context52.prev = _context52.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component25) {
+            _inheritsLoose(Demo, _Component25);
+            function Demo() {
+              var _context51;
+              var _this25;
+              for (var _len25 = arguments.length, args = new Array(_len25), _key25 = 0; _key25 < _len25; _key25++) {
+                args[_key25] = arguments[_key25];
+              }
+              _this25 = _Component25.call.apply(_Component25, _concatInstanceProperty(_context51 = [this]).call(_context51, args)) || this;
+              _this25.XMarkdown = XMarkdown;
+              _this25.plugins = [{
+                extendMarkdown: function extendMarkdown(markdown) {
+                  markdown.core.ruler.push('xmarkdown-heading-plugin', function (state) {
+                    state.tokens.forEach(function (token) {
+                      if (token.type === 'heading_open') {
+                        token.attrPush(['data-plugin-source', 'markdown-it']);
+                      }
+                    });
+                  });
+                }
+              }, {
+                transformRenderTree: function transformRenderTree(nodes) {
+                  return _mapInstanceProperty(nodes).call(nodes, function (node) {
+                    if (node.type !== 'element' || node.tag !== 'blockquote') {
+                      return node;
+                    }
+                    return _extends({}, node, {
+                      attrs: _extends({}, node.attrs, {
+                        'data-plugin-transform': 'render-tree'
+                      })
+                    });
+                  });
+                }
+              }];
+              return _this25;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: ['# 插件标题', '', '> 插件引用'].join('\n')
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={this.get('content')}\n                    plugins={this.plugins}\n                />\n            ";
+          _mount25 = mount(Demo), element = _mount25[1];
+          _context52.next = 5;
+          return waitFor(function () {
+            return !!element.querySelector('.k-xmarkdown-content blockquote');
+          });
+        case 5:
+          ready = _context52.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 _context52.stop();
+      }
+    }, _callee25);
+  })));
+  it('should refresh renderer when plugins change', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee26() {
+    var Demo, _mount26, instance, element, initialReady, refreshed;
+    return _regeneratorRuntime.wrap(function _callee26$(_context54) {
+      while (1) switch (_context54.prev = _context54.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component26) {
+            _inheritsLoose(Demo, _Component26);
+            function Demo() {
+              var _context53;
+              var _this26;
+              for (var _len26 = arguments.length, args = new Array(_len26), _key26 = 0; _key26 < _len26; _key26++) {
+                args[_key26] = arguments[_key26];
+              }
+              _this26 = _Component26.call.apply(_Component26, _concatInstanceProperty(_context53 = [this]).call(_context53, args)) || this;
+              _this26.XMarkdown = XMarkdown;
+              return _this26;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                plugins: []
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={'# \u63D2\u4EF6\u5237\u65B0'}\n                    plugins={this.get('plugins')}\n                />\n            ";
+          _mount26 = mount(Demo), instance = _mount26[0], element = _mount26[1];
+          _context54.next = 5;
+          return waitFor(function () {
+            return !!element.querySelector('h1');
+          });
+        case 5:
+          initialReady = _context54.sent;
+          expect(initialReady).to.be.true;
+          expect(element.querySelector('h1').getAttribute('data-refresh-plugin')).to.eql(null);
+          instance.set('plugins', [{
+            extendMarkdown: function extendMarkdown(markdown) {
+              markdown.core.ruler.push('xmarkdown-refresh-plugin', function (state) {
+                state.tokens.forEach(function (token) {
+                  if (token.type === 'heading_open') {
+                    token.attrPush(['data-refresh-plugin', 'updated']);
+                  }
+                });
+              });
+            }
+          }]);
+          _context54.next = 11;
+          return waitFor(function () {
+            return element.querySelector('h1').getAttribute('data-refresh-plugin') === 'updated';
+          });
+        case 11:
+          refreshed = _context54.sent;
+          expect(refreshed).to.be.true;
+        case 13:
+        case "end":
+          return _context54.stop();
+      }
+    }, _callee26);
+  })));
+  it('should support plugins transforming citation markers from business data', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee27() {
+    var citations, Demo, transformCitationNodes, splitCitationText, _mount27, element, ready;
+    return _regeneratorRuntime.wrap(function _callee27$(_context57) {
+      while (1) switch (_context57.prev = _context57.next) {
+        case 0:
+          splitCitationText = function _splitCitationText(text) {
+            var nextNodes = [];
+            var pattern = /\[(\d+)\]/g;
+            var lastIndex = 0;
+            var match;
+            while (match = pattern.exec(text)) {
+              var index = Number(match[1]);
+              var citation = citations[index - 1];
+              if (match.index > lastIndex) {
+                nextNodes.push({
+                  type: 'text',
+                  content: _sliceInstanceProperty(text).call(text, lastIndex, match.index)
+                });
+              }
+              nextNodes.push(citation ? {
+                type: 'element',
+                tag: 'a',
+                attrs: {
+                  href: citation.link,
+                  'data-citation-index': String(index)
+                },
+                children: [{
+                  type: 'text',
+                  content: String(index)
+                }]
+              } : {
+                type: 'text',
+                content: match[0]
+              });
+              lastIndex = match.index + match[0].length;
+            }
+            if (!nextNodes.length) {
+              return [{
+                type: 'text',
+                content: text
+              }];
+            }
+            if (lastIndex < text.length) {
+              nextNodes.push({
+                type: 'text',
+                content: _sliceInstanceProperty(text).call(text, lastIndex)
+              });
+            }
+            return nextNodes;
+          };
+          transformCitationNodes = function _transformCitationNod(nodes, appendSection) {
+            var _context56;
+            if (appendSection === void 0) {
+              appendSection = false;
+            }
+            var nextNodes = [];
+            nodes.forEach(function (node) {
+              if (node.type === 'text') {
+                nextNodes.push.apply(nextNodes, splitCitationText(node.content));
+                return;
+              }
+              if (node.type !== 'element') {
+                nextNodes.push(node);
+                return;
+              }
+              nextNodes.push(_extends({}, node, {
+                children: transformCitationNodes(node.children)
+              }));
+            });
+            if (!appendSection || !citations.length) return nextNodes;
+            return _concatInstanceProperty(_context56 = []).call(_context56, nextNodes, [{
+              type: 'element',
+              tag: 'section',
+              attrs: {
+                'data-citation-section': 'true'
+              },
+              children: [{
+                type: 'text',
+                content: "Sources: " + citations.length
+              }]
+            }]);
+          };
+          citations = [{
+            title: '引用来源一',
+            link: 'https://example.com/source-1'
+          }];
+          Demo = /*#__PURE__*/function (_Component27) {
+            _inheritsLoose(Demo, _Component27);
+            function Demo() {
+              var _context55;
+              var _this27;
+              for (var _len27 = arguments.length, args = new Array(_len27), _key27 = 0; _key27 < _len27; _key27++) {
+                args[_key27] = arguments[_key27];
+              }
+              _this27 = _Component27.call.apply(_Component27, _concatInstanceProperty(_context55 = [this]).call(_context55, args)) || this;
+              _this27.XMarkdown = XMarkdown;
+              _this27.plugins = [{
+                transformRenderTree: function transformRenderTree(nodes) {
+                  return transformCitationNodes(nodes, true);
+                }
+              }];
+              return _this27;
+            }
+            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            ";
+          _mount27 = mount(Demo), element = _mount27[1];
+          _context57.next = 8;
+          return waitFor(function () {
+            return !!element.querySelector('[data-citation-index="1"]');
+          });
+        case 8:
+          ready = _context57.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');
+          expect(element.querySelector('.k-xmarkdown-content').textContent).to.contain('[2]');
+          expect(element.querySelector('[data-citation-section="true"]').textContent).to.contain('Sources: 1');
+        case 14:
+        case "end":
+          return _context57.stop();
+      }
+    }, _callee27);
+  })));
+  it('should avoid duplicate markdown rendering during initial mount', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee28() {
+    var transformRenderTree, Demo, _mount28, element, ready;
+    return _regeneratorRuntime.wrap(function _callee28$(_context59) {
+      while (1) switch (_context59.prev = _context59.next) {
+        case 0:
+          transformRenderTree = sinon.spy(function (nodes) {
+            return nodes;
+          });
+          Demo = /*#__PURE__*/function (_Component28) {
+            _inheritsLoose(Demo, _Component28);
+            function Demo() {
+              var _context58;
+              var _this28;
+              for (var _len28 = arguments.length, args = new Array(_len28), _key28 = 0; _key28 < _len28; _key28++) {
+                args[_key28] = arguments[_key28];
+              }
+              _this28 = _Component28.call.apply(_Component28, _concatInstanceProperty(_context58 = [this]).call(_context58, args)) || this;
+              _this28.XMarkdown = XMarkdown;
+              _this28.plugins = [{
+                transformRenderTree: transformRenderTree
+              }];
+              return _this28;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { XMarkdown } = this;\n                <XMarkdown\n                    content={'# \u521D\u59CB\u5316\u6E32\u67D3'}\n                    plugins={this.plugins}\n                />\n            ";
+          _mount28 = mount(Demo), element = _mount28[1];
+          _context59.next = 6;
+          return waitFor(function () {
+            return !!element.querySelector('h1');
+          });
+        case 6:
+          ready = _context59.sent;
+          expect(ready).to.be.true;
+          expect(transformRenderTree.callCount).to.eql(1);
+        case 9:
+        case "end":
+          return _context59.stop();
+      }
+    }, _callee28);
+  })));
+});