office-viewer 0.1.3 → 0.1.4

package/README.md

@@ -20,7 +20,7 @@ docx 渲染器，原理是将 docx 里的 xml 格式转成 html
 - [官方规范](https://www.ecma-international.org/publications-and-standards/standards/ecma-376/)
 - [标签的在线文档](http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/index.html)
 
-日常开发可以使用 [OOXML viewer](https://marketplace.visualstudio.com/items?itemName=yuenm18.office-viewer) 插件查看
+日常开发可以使用 [OOXML viewer](https://marketplace.visualstudio.com/items?itemName=yuenm18.ooxml-viewer) 插件查看
 
 开发过程啊参考了
 

package/esm/Word.js

@@ -22,6 +22,7 @@ import { parseEndnotes } from './parse/parseEndnotes.js';
 import { renderNotes } from './render/renderNotes.js';
 import { printIframe } from './util/print.js';
 import { Settings } from './openxml/Settings.js';
+import { get } from './util/get.js';
 
 var defaultRenderOptions = {
     classPrefix: 'docx-viewer',
@@ -43,8 +44,8 @@ var defaultRenderOptions = {
     renderHeader: true,
     renderFooter: true,
     data: {},
-    evalVar: function (t) {
-        return t;
+    evalVar: function (path, data) {
+        return get(data, path);
     }
 };
 var Word = /** @class */ (function () {
@@ -293,17 +294,19 @@ var Word = /** @class */ (function () {
      * 进行单个文本替换
      */
     Word.prototype.replaceText = function (text) {
+        var _this = this;
         if (this.renderOptions.enableVar === false) {
             return text;
         }
         var data = this.renderOptions.data;
         if (text.indexOf('{{') !== -1) {
-            text = text.replace(/^{{/g, '').replace(/}}$/g, '');
-            var result = this.renderOptions.evalVar(text, data);
-            if (typeof result === 'undefined') {
-                return '';
-            }
-            return String(result);
+            text = text.replace(/{{([^}]+)}}/g, function (all, group) {
+                var result = _this.renderOptions.evalVar(group, data);
+                if (typeof result === 'undefined') {
+                    return '';
+                }
+                return String(result);
+            });
         }
         return text;
     };
@@ -416,18 +419,21 @@ var Word = /** @class */ (function () {
      * 获取主题色
      */
     Word.prototype.getThemeColor = function (name) {
-        var _a, _b, _c;
+        var _a, _b;
         if (this.settings.clrSchemeMapping) {
             name = this.settings.clrSchemeMapping[name] || name;
         }
         if (this.themes && this.themes.length > 0) {
             var theme = this.themes[0];
-            var color = (_c = (_b = (_a = theme.themeElements) === null || _a === void 0 ? void 0 : _a.clrScheme) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c[name];
+            var colors = (_b = (_a = theme.themeElements) === null || _a === void 0 ? void 0 : _a.clrScheme) === null || _b === void 0 ? void 0 : _b.colors;
+            var color = colors === null || colors === void 0 ? void 0 : colors[name];
             if (color) {
                 return color;
             }
             else {
+                // 找不到可能是从其它地方拷贝过来的，这时取 accent1
                 console.warn('unknown theme color: ' + name);
+                return (colors === null || colors === void 0 ? void 0 : colors['accent1']) || '';
             }
         }
         return '';

package/esm/openxml/drawing/Drawing.d.ts

@@ -5,6 +5,7 @@ import { CSSStyle } from './../Style';
 import Word from '../../Word';
 import { Pic } from './Pic';
 import { WPS } from '../word/wps/WPS';
+import { WPG } from '../word/wps/WPG';
 /**
  * drawing 在文档中的位置，目前有两种情况，child 和 anchor
  */
@@ -24,6 +25,7 @@ export interface Anchor {
 export declare class Drawing {
     pic?: Pic;
     wps?: WPS;
+    wpg?: WPG;
     diagram?: ConstrainDOMStringParameters;
     position: Position;
     anchor?: Anchor;

package/esm/openxml/drawing/Drawing.js

@@ -4,6 +4,7 @@ import { getAttrNumber, getAttrBoolean } from '../../OpenXML.js';
 import { Pic } from './Pic.js';
 import { WPS } from '../word/wps/WPS.js';
 import { Diagram } from './diagram/Diagram.js';
+import { WPG } from '../word/wps/WPG.js';
 
 /**
  * 目前图片和 textbox 都会依赖这个
@@ -123,6 +124,9 @@ var Drawing = /** @class */ (function () {
                                     case 'wps:wsp':
                                         drawing.wps = WPS.fromXML(word, graphicDataChild);
                                         break;
+                                    case 'wpg:wgp':
+                                        drawing.wpg = WPG.fromXML(word, graphicDataChild);
+                                        break;
                                     case 'dgm:relIds':
                                         // 这个是 diagram 的关系
                                         // http://webapp.docx4java.org/OnlineDemo/ecma376/DrawingML/relIds.html

package/esm/openxml/drawing/Transform.d.ts

@@ -13,6 +13,8 @@ export interface Ext {
 export declare class Transform {
     off?: Off;
     ext?: Ext;
+    chOff?: Off;
+    chExt?: Ext;
     rot?: number;
     static fromXML(word: Word, element: Element): Transform;
 }

package/esm/openxml/drawing/Transform.js

@@ -1,3 +1,4 @@
+import { __values } from 'tslib';
 import { parseSize, LengthUsage, convertAngle } from '../../parse/parseSize.js';
 
 /**
@@ -7,20 +8,48 @@ var Transform = /** @class */ (function () {
     function Transform() {
     }
     Transform.fromXML = function (word, element) {
+        var e_1, _a;
         var transform = new Transform();
-        var off = element.getElementsByTagName('a:off').item(0);
-        if (off) {
-            transform.off = {
-                x: parseSize(off, 'x', LengthUsage.Emu),
-                y: parseSize(off, 'y', LengthUsage.Emu)
-            };
+        try {
+            for (var _b = __values(element.children), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var child = _c.value;
+                var tagName = child.tagName;
+                switch (tagName) {
+                    case 'a:off':
+                        transform.off = {
+                            x: parseSize(child, 'x', LengthUsage.Emu),
+                            y: parseSize(child, 'y', LengthUsage.Emu)
+                        };
+                        break;
+                    case 'a:ext':
+                        transform.ext = {
+                            cx: parseSize(child, 'cx', LengthUsage.Emu),
+                            cy: parseSize(child, 'cy', LengthUsage.Emu)
+                        };
+                        break;
+                    case 'a:chOff':
+                        transform.chOff = {
+                            x: parseSize(child, 'x', LengthUsage.Emu),
+                            y: parseSize(child, 'y', LengthUsage.Emu)
+                        };
+                        break;
+                    case 'a:chExt':
+                        transform.chExt = {
+                            cx: parseSize(child, 'cx', LengthUsage.Emu),
+                            cy: parseSize(child, 'cy', LengthUsage.Emu)
+                        };
+                        break;
+                    default:
+                        console.warn('Transform: Unknown tag ', tagName, child);
+                }
+            }
         }
-        var ext = element.getElementsByTagName('a:ext').item(0);
-        if (ext) {
-            transform.ext = {
-                cx: parseSize(ext, 'cx', LengthUsage.Emu),
-                cy: parseSize(ext, 'cy', LengthUsage.Emu)
-            };
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
         }
         var rot = element.getAttribute('rot');
         if (rot) {

package/esm/openxml/word/Tab.d.ts

@@ -1,7 +1,7 @@
 import Word from '../../Word';
 import { ST_TabJc, ST_TabTlc } from '../Types';
 export declare class Tab {
-    type: ST_TabJc;
+    type: ST_TabJc | 'left';
     pos: string;
     leader?: ST_TabTlc;
     static fromXML(word: Word, element: Element): Tab;

package/esm/openxml/word/wps/WPG.d.ts

@@ -1,5 +1,14 @@
 /**
- * 图形组，目前还不不支持
+ * 图形组，目前是当成 wps 用了
  */
+import { WPS } from './WPS';
+import Word from '../../../Word';
+import { ShapePr } from '../../drawing/ShapeProperties';
+import { Pic } from '../../drawing/Pic';
 export declare class WPG {
+    wps: WPS[];
+    wpg: WPG[];
+    spPr?: ShapePr;
+    pic?: Pic;
+    static fromXML(word: Word, element: Element): WPG;
 }

package/esm/openxml/word/wps/WPG.js

@@ -0,0 +1,56 @@
+import { __values } from 'tslib';
+import { WPS } from './WPS.js';
+import { ShapePr } from '../../drawing/ShapeProperties.js';
+import { Pic } from '../../drawing/Pic.js';
+
+/**
+ * 图形组，目前是当成 wps 用了
+ */
+var WPG = /** @class */ (function () {
+    function WPG() {
+    }
+    WPG.fromXML = function (word, element) {
+        var e_1, _a;
+        var wpg = new WPG();
+        var wps = [];
+        wpg.wps = wps;
+        wpg.wpg = [];
+        try {
+            for (var _b = __values(element.children), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var child = _c.value;
+                var tagName = child.tagName;
+                switch (tagName) {
+                    case 'wpg:cNvGrpSpPr':
+                        // 和展现无关
+                        break;
+                    case 'wpg:grpSpPr':
+                        wpg.spPr = ShapePr.fromXML(word, child);
+                        break;
+                    case 'wps:wsp':
+                        wps.push(WPS.fromXML(word, child));
+                        break;
+                    case 'pic:pic':
+                        wpg.pic = Pic.fromXML(word, child);
+                        break;
+                    case 'wpg:grpSp':
+                        // 组合中的组合
+                        wpg.wpg.push(WPG.fromXML(word, child));
+                        break;
+                    default:
+                        console.warn('WPS: Unknown tag ', tagName, child);
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return wpg;
+    };
+    return WPG;
+}());
+
+export { WPG };

package/esm/openxml/word/wps/WPS.js

@@ -84,6 +84,7 @@ var WPS = /** @class */ (function () {
                 var tagName = child.tagName;
                 switch (tagName) {
                     case 'wps:cNvSpPr':
+                    case 'wps:cNvPr':
                         // 和展现无关
                         break;
                     case 'wps:spPr':

package/esm/render/renderDrawing.js

@@ -10,8 +10,9 @@ import { renderCustGeom } from './renderCustGeom.js';
 /**
  * 渲染图片
  */
-function renderPic(pic, word, drawing) {
-    var _a, _b;
+function renderPic(pic, word, wpg) {
+    var _a, _b, _c;
+    if (wpg === void 0) { wpg = null; }
     var blip = (_a = pic.blipFill) === null || _a === void 0 ? void 0 : _a.blip;
     if (blip && blip.src) {
         var img = document.createElement('img');
@@ -31,15 +32,27 @@ function renderPic(pic, word, drawing) {
         }
         var xfrm = (_b = pic.spPr) === null || _b === void 0 ? void 0 : _b.xfrm;
         if (xfrm) {
-            var off = xfrm.off;
-            if (off) {
-                img.style.left = off.x;
-                img.style.top = off.y;
+            if (wpg) {
+                var rect = getRectInGroup(xfrm, (_c = wpg.spPr) === null || _c === void 0 ? void 0 : _c.xfrm);
+                if (rect) {
+                    img.style.position = 'absolute';
+                    img.style.left = rect.left + 'px';
+                    img.style.top = rect.top + 'px';
+                    img.style.width = rect.width + 'px';
+                    img.style.height = rect.height + 'px';
+                }
             }
-            var ext = xfrm.ext;
-            if (ext) {
-                img.style.width = ext.cx;
-                img.style.height = ext.cy;
+            else {
+                var off = xfrm.off;
+                if (off) {
+                    img.style.left = off.x;
+                    img.style.top = off.y;
+                }
+                var ext = xfrm.ext;
+                if (ext) {
+                    img.style.width = ext.cx;
+                    img.style.height = ext.cy;
+                }
             }
             if (xfrm.rot) {
                 img.style.transform = "rotate(".concat(xfrm.rot, "deg)");
@@ -49,6 +62,162 @@ function renderPic(pic, word, drawing) {
     }
     return null;
 }
+/**
+ * 获取在 group 中的位置
+ * @param xfrm 元素的位置定义
+ *  @param groupXfrm 分组中的位置定义
+ */
+function getRectInGroup(xfrm, groupXfrm) {
+    var off = xfrm.off;
+    var width = parseFloat(xfrm.ext.cx.replace('px', ''));
+    var height = parseFloat(xfrm.ext.cy.replace('px', ''));
+    if (off && groupXfrm.chOff && groupXfrm.ext && groupXfrm.chExt) {
+        // 先算缩放比
+        var scaleX = parseFloat(groupXfrm.ext.cx.replace('px', '')) /
+            parseFloat(groupXfrm.chExt.cx.replace('px', ''));
+        var scaleY = parseFloat(groupXfrm.ext.cy.replace('px', '')) /
+            parseFloat(groupXfrm.chExt.cy.replace('px', ''));
+        var groupOffX = parseFloat(groupXfrm.chOff.x.replace('px', ''));
+        var groupOffY = parseFloat(groupXfrm.chOff.y.replace('px', ''));
+        var x = parseFloat(off.x.replace('px', ''));
+        var y = parseFloat(off.y.replace('px', ''));
+        return {
+            left: scaleX * (x - groupOffX),
+            top: scaleY * (y - groupOffY),
+            width: scaleX * width,
+            height: scaleY * height
+        };
+    }
+    return null;
+}
+/**
+ * 渲染文本框
+ */
+function renderWps(word, container, wps, wpg) {
+    var e_1, _a;
+    var _b;
+    if (wpg === void 0) { wpg = null; }
+    var wpsStyle = wps.wpsStyle;
+    var spPr = wps.spPr;
+    applyStyle(container, wps.style);
+    if (wpsStyle === null || wpsStyle === void 0 ? void 0 : wpsStyle.fontColor) {
+        container.style.color = wpsStyle.fontColor;
+    }
+    if (spPr === null || spPr === void 0 ? void 0 : spPr.xfrm) {
+        var ext = spPr.xfrm.ext;
+        if (ext) {
+            var width = parseFloat(ext.cx.replace('px', ''));
+            var height = parseFloat(ext.cy.replace('px', ''));
+            // 在分组中的计算方式不一样，另外在分组中还需要绝对定位
+            // 这个计算方法在官方文档里没找到
+            if (wpg) {
+                container.style.position = 'absolute';
+                var rect = getRectInGroup(spPr.xfrm, (_b = wpg.spPr) === null || _b === void 0 ? void 0 : _b.xfrm);
+                if (rect) {
+                    container.style.left = rect.left + 'px';
+                    container.style.top = rect.top + 'px';
+                    width = rect.width;
+                    height = rect.height;
+                }
+            }
+            container.style.width = width + 'px';
+            container.style.height = height + 'px';
+            if (spPr.geom) {
+                appendChild(container, renderGeom(spPr.geom, spPr, width, height, wps.wpsStyle));
+            }
+            if (spPr.custGeom) {
+                appendChild(container, renderCustGeom(spPr.custGeom, spPr, width, height, wps.wpsStyle));
+            }
+        }
+        if (spPr.xfrm.rot) {
+            container.style.transform = "rotate(".concat(spPr.xfrm.rot, "deg)");
+        }
+    }
+    var txbxContent = wps.txbxContent;
+    if (txbxContent.length) {
+        // 为了实现垂直居中，将父容器改成 table 布局
+        var textContainer = document.createElement('div');
+        textContainer.dataset.name = 'textContainer';
+        container.style.display = 'table';
+        textContainer.style.display = 'table-cell';
+        textContainer.style.verticalAlign = 'middle';
+        if (wps.style && wps.style['vertical-align']) {
+            textContainer.style.verticalAlign = wps.style['vertical-align'];
+            // 容器的 vertical-align 需要去掉，虽然也不影响
+            container.style.verticalAlign = '';
+        }
+        appendChild(container, textContainer);
+        try {
+            for (var txbxContent_1 = __values(txbxContent), txbxContent_1_1 = txbxContent_1.next(); !txbxContent_1_1.done; txbxContent_1_1 = txbxContent_1.next()) {
+                var txbxContentChild = txbxContent_1_1.value;
+                if (txbxContentChild instanceof Paragraph) {
+                    appendChild(textContainer, renderParagraph(word, txbxContentChild));
+                }
+                else if (txbxContentChild instanceof Table) {
+                    appendChild(textContainer, renderTable(word, txbxContentChild));
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (txbxContent_1_1 && !txbxContent_1_1.done && (_a = txbxContent_1.return)) _a.call(txbxContent_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    }
+}
+function renderWpg(word, wpg) {
+    var e_2, _a, e_3, _b;
+    var _c, _d;
+    var container = document.createElement('div');
+    var wpgContainer = document.createElement('div');
+    var spPr = wpg.spPr;
+    if (spPr === null || spPr === void 0 ? void 0 : spPr.xfrm) {
+        var ext = (_c = spPr === null || spPr === void 0 ? void 0 : spPr.xfrm) === null || _c === void 0 ? void 0 : _c.ext;
+        if (ext) {
+            wpgContainer.style.width = ext.cx;
+            wpgContainer.style.height = ext.cy;
+        }
+        var rot = (_d = spPr === null || spPr === void 0 ? void 0 : spPr.xfrm) === null || _d === void 0 ? void 0 : _d.rot;
+        if (rot) {
+            wpgContainer.style.transform = "rotate(".concat(rot, "deg)");
+        }
+    }
+    try {
+        for (var _e = __values(wpg.wps), _f = _e.next(); !_f.done; _f = _e.next()) {
+            var wps = _f.value;
+            var wpsContainer = document.createElement('div');
+            renderWps(word, wpsContainer, wps, wpg);
+            appendChild(wpgContainer, wpsContainer);
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    try {
+        for (var _g = __values(wpg.wpg), _h = _g.next(); !_h.done; _h = _g.next()) {
+            var childWpg = _h.value;
+            appendChild(container, renderWpg(word, childWpg));
+        }
+    }
+    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+    finally {
+        try {
+            if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
+        }
+        finally { if (e_3) throw e_3.error; }
+    }
+    if (wpg.pic) {
+        appendChild(wpgContainer, renderPic(wpg.pic, word, wpg));
+    }
+    appendChild(container, wpgContainer);
+    return container;
+}
 /**
  * 渲染图片，目前只支持 picture
  * http://officeopenxml.com/drwOverview.php
@@ -56,7 +225,6 @@ function renderPic(pic, word, drawing) {
  *
  */
 function renderDrawing(word, drawing, inHeader) {
-    var e_1, _a;
     var container = document.createElement('div');
     if (drawing.position === 'inline') {
         container.style.display = 'inline-block';
@@ -72,66 +240,10 @@ function renderDrawing(word, drawing, inHeader) {
     container.dataset.id = drawing.id || '';
     container.dataset.name = drawing.name || '';
     if (drawing.wps) {
-        var wps = drawing.wps;
-        var wpsStyle = wps.wpsStyle;
-        var spPr = wps.spPr;
-        applyStyle(container, wps.style);
-        if (wpsStyle === null || wpsStyle === void 0 ? void 0 : wpsStyle.fontColor) {
-            container.style.color = wpsStyle.fontColor;
-        }
-        if (spPr === null || spPr === void 0 ? void 0 : spPr.xfrm) {
-            var ext = spPr.xfrm.ext;
-            if (ext) {
-                container.style.width = ext.cx;
-                container.style.height = ext.cy;
-                if (spPr.geom) {
-                    var width = parseFloat(ext.cx.replace('px', ''));
-                    var height = parseFloat(ext.cy.replace('px', ''));
-                    appendChild(container, renderGeom(spPr.geom, spPr, width, height, wps.wpsStyle));
-                }
-                if (spPr.custGeom) {
-                    var width = parseFloat(ext.cx.replace('px', ''));
-                    var height = parseFloat(ext.cy.replace('px', ''));
-                    appendChild(container, renderCustGeom(spPr.custGeom, spPr, width, height, wps.wpsStyle));
-                }
-            }
-            if (spPr.xfrm.rot) {
-                container.style.transform = "rotate(".concat(spPr.xfrm.rot, "deg)");
-            }
-        }
-        var txbxContent = wps.txbxContent;
-        if (txbxContent.length) {
-            // 为了实现垂直居中，将父容器改成 table 布局
-            var textContainer = document.createElement('div');
-            textContainer.dataset.name = 'textContainer';
-            container.style.display = 'table';
-            textContainer.style.display = 'table-cell';
-            textContainer.style.verticalAlign = 'middle';
-            if (wps.style && wps.style['vertical-align']) {
-                textContainer.style.verticalAlign = wps.style['vertical-align'];
-                // 容器的 vertical-align 需要去掉，虽然也不影响
-                container.style.verticalAlign = '';
-            }
-            appendChild(container, textContainer);
-            try {
-                for (var txbxContent_1 = __values(txbxContent), txbxContent_1_1 = txbxContent_1.next(); !txbxContent_1_1.done; txbxContent_1_1 = txbxContent_1.next()) {
-                    var txbxContentChild = txbxContent_1_1.value;
-                    if (txbxContentChild instanceof Paragraph) {
-                        appendChild(textContainer, renderParagraph(word, txbxContentChild));
-                    }
-                    else if (txbxContentChild instanceof Table) {
-                        appendChild(textContainer, renderTable(word, txbxContentChild));
-                    }
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (txbxContent_1_1 && !txbxContent_1_1.done && (_a = txbxContent_1.return)) _a.call(txbxContent_1);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-        }
+        renderWps(word, container, drawing.wps);
+    }
+    if (drawing.wpg) {
+        appendChild(container, renderWpg(word, drawing.wpg));
     }
     // 如果没内容就不渲染了，避免高度导致撑开父节点
     if (container.children.length === 0) {

package/esm/render/renderParagraph.js

@@ -8,15 +8,17 @@ import { renderHyperLink } from './renderHyperLink.js';
 import { renderBookmarkStart } from './renderBookmark.js';
 import { renderNumbering } from './renderNumbering.js';
 import { setElementStyle } from './setElementStyle.js';
+import { renderTab } from './renderTab.js';
 import { OMath } from '../openxml/math/OMath.js';
 import { renderOMath } from './renderMath.js';
+import { Tab } from '../openxml/word/Tab.js';
 
 /**
  * 渲染段落
  * @param renderEmptySpace 如果是 true 的话，当内容为空时会自动加上  
  */
 function renderParagraph(word, paragraph, renderEmptySpace, inHeader) {
-    var e_1, _a;
+    var e_1, _a, e_2, _b, e_3, _c;
     if (renderEmptySpace === void 0) { renderEmptySpace = true; }
     if (inHeader === void 0) { inHeader = false; }
     word.currentParagraph = paragraph;
@@ -31,9 +33,50 @@ function renderParagraph(word, paragraph, renderEmptySpace, inHeader) {
         appendChild(p, renderNumbering(p, word, properties.numPr));
     }
     var inFldChar = false;
+    if (properties.tabs && properties.tabs.length) {
+        // 目前只支持渲染第一个，因为第二个位置取决于前面内容位置，挺麻烦
+        // 虽然目前这个实现很 hack，但可以支持常见情况
+        appendChild(p, renderTab(word, properties.tabs[0], true));
+        // 同时删掉第一个 run 中的 tab
+        var done = false;
+        try {
+            for (var _d = __values(paragraph.children), _e = _d.next(); !_e.done; _e = _d.next()) {
+                var child = _e.value;
+                if (done) {
+                    break;
+                }
+                if (child instanceof Run) {
+                    try {
+                        for (var _f = (e_2 = void 0, __values(child.children)), _g = _f.next(); !_g.done; _g = _f.next()) {
+                            var runChild = _g.value;
+                            if (runChild instanceof Tab) {
+                                child.children.splice(child.children.indexOf(runChild), 1);
+                                done = true;
+                                break;
+                            }
+                        }
+                    }
+                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                    finally {
+                        try {
+                            if (_g && !_g.done && (_b = _f.return)) _b.call(_f);
+                        }
+                        finally { if (e_2) throw e_2.error; }
+                    }
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    }
     try {
-        for (var _b = __values(paragraph.children), _c = _b.next(); !_c.done; _c = _b.next()) {
-            var child = _c.value;
+        for (var _h = __values(paragraph.children), _j = _h.next(); !_j.done; _j = _h.next()) {
+            var child = _j.value;
             if (child instanceof Run) {
                 if (child.fldChar === 'begin') {
                     inFldChar = true;
@@ -58,12 +101,12 @@ function renderParagraph(word, paragraph, renderEmptySpace, inHeader) {
             }
         }
     }
-    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    catch (e_3_1) { e_3 = { error: e_3_1 }; }
     finally {
         try {
-            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            if (_j && !_j.done && (_c = _h.return)) _c.call(_h);
         }
-        finally { if (e_1) throw e_1.error; }
+        finally { if (e_3) throw e_3.error; }
     }
     // 空行自动加个空格，不然会没高度
     if (p.innerHTML === '' && renderEmptySpace) {