@hailin-zheng/editor-core 2.1.18 → 2.1.20

package/index-cjs.js

@@ -275,8 +275,6 @@ class RenderObject {
         this.margin = new MarginProps();
         this.padding = new PaddingProps();
     }
-    pagePaintCompleted(e) {
-    }
     destroy() {
         //this.parent = null;
         //this.margin = null;
@@ -582,6 +580,16 @@ class CommonUtil {
         }
         return str;
     }
+    //随机生成rgb颜色
+    static randomRgbColor(opacity = -1) {
+        let r = Math.floor(Math.random() * 256); //随机生成256以内r值
+        let g = Math.floor(Math.random() * 256); //随机生成256以内g值
+        let b = Math.floor(Math.random() * 256); //随机生成256以内b值
+        if (opacity === -1) {
+            return `rgb(${r},${g},${b})`; //返回rgb(r,g,b)格式颜色
+        }
+        return `rgba(${r},${g},${b},${opacity})`; //返回rgba(r,g,b,a)格式颜色
+    }
     /**
      * 判断一个数值是否在另一个数值的增益区间中
      * @param val
@@ -1101,6 +1109,40 @@ class SubjectSubscription$1 extends Subscription$1 {
 function fromEvent(dom, type) {
     return new DOMEventSource(dom, type);
 }
+class EventBus {
+    subs = new Map();
+    on(event, handler) {
+        let handlers = this.subs.get(event);
+        if (!handlers) {
+            handlers = [];
+            this.subs.set(event, handlers);
+        }
+        const sub = new Subject$1();
+        sub.subscribe(handler);
+        handlers.push(sub);
+    }
+    off(event) {
+        const subs = this.subs.get(event);
+        if (subs) {
+            subs.forEach(item => item.unsubscribe());
+        }
+        this.subs.delete(event);
+    }
+    emit(event, data) {
+        const subs = this.subs.get(event);
+        if (subs) {
+            subs.forEach(item => item.next(data));
+        }
+    }
+    clear() {
+        this.subs.forEach((subs) => {
+            subs.forEach((sub) => {
+                sub.unsubscribe();
+            });
+        });
+        this.subs.clear();
+    }
+}
 
 class Rect {
     x = 0;
@@ -1705,17 +1747,7 @@ class ViewOptions {
     //两个页的间距
     docSpace = 0;
     //是否显示审阅窗口
-    _showReviewWindow = false;
-    get showReviewWindow() {
-        return this._showReviewWindow;
-    }
-    set showReviewWindow(value) {
-        if (value === this._showReviewWindow) {
-            return;
-        }
-        this._showReviewWindow = value;
-        // this.onChange.next();
-    }
+    showReviewWindow = false;
     //审阅窗口宽度
     reviewWindowWidth = 200;
     //缩放
@@ -2218,6 +2250,32 @@ class PictureProps extends INotifyPropertyChanged {
         return props;
     }
 }
+class SVGProps extends INotifyPropertyChanged {
+    title;
+    width = 5;
+    height = 5;
+    value;
+    clone(dest) {
+        const clone = dest ?? new SVGProps();
+        super.cloneAttachedProperty(clone);
+        clone.width = this.width;
+        clone.height = this.height;
+        clone.value = this.value;
+        clone.title = this.title;
+        return clone;
+    }
+    getSerializeProps(viewOptions) {
+        const props = {
+            width: this.width,
+            height: this.height,
+            value: this.value,
+        };
+        if (this.title) {
+            props['title'] = this.title;
+        }
+        return props;
+    }
+}
 class DataDecorateProps extends INotifyPropertyChanged {
     content;
     size;
@@ -2400,32 +2458,47 @@ class CommContentProps extends INotifyPropertyChanged {
     createId;
     createName;
     createDate;
+    text;
     clone(dest) {
         const clone = dest ?? new CommContentProps();
         super.cloneAttachedProperty(clone);
         clone.id = this.id;
+        clone.text = this.text;
         return clone;
     }
     getSerializeProps(viewOptions) {
         return {
-            id: this.id
+            id: this.id,
+            text: this.text
         };
     }
 }
 class CommProps extends INotifyPropertyChanged {
     id;
     markType;
+    text;
+    userId;
+    userName;
+    date;
     clone(dest) {
         const clone = dest ?? new CommProps();
         super.cloneAttachedProperty(clone);
         clone.id = this.id;
         clone.markType = this.markType;
+        clone.text = this.text;
+        clone.userId = this.userId;
+        clone.userName = this.userName;
+        clone.date = this.date;
         return clone;
     }
     getSerializeProps(viewOptions) {
         return {
             id: this.id,
-            markType: this.markType
+            markType: this.markType,
+            text: this.text,
+            userId: this.userId,
+            userName: this.userName,
+            date: this.date
         };
     }
 }
@@ -2753,76 +2826,11 @@ class CommsContainerElement extends BlockContainerElement {
         }
         return clone;
     }
-    markPairs = [];
-    /**
-     * 清除所有的批注标识组合
-     */
-    clearMarkItems() {
-        this.markPairs.length = 0;
-    }
-    identifyCommMark(markElement) {
-        const { id } = markElement.props;
-        let matchItem = this.markPairs.find(item => item.id === id);
-        if (!matchItem) {
-            matchItem = { id };
-            this.markPairs.push(matchItem);
-        }
-        matchItem[markElement.props.markType] = markElement;
-    }
-    /**
-     * 根据id，移除批注标记以及批注内容
-     * @param id
-     */
-    removeCommMark(id) {
-        const matchIndex = this.markPairs.findIndex(item => item.id === id);
-        if (matchIndex >= 0) {
-            const matchItem = this.markPairs[matchIndex];
-            matchItem.start?.remove();
-            matchItem.end?.remove();
-            this.markPairs.splice(matchIndex, 1);
-        }
-        const commContent = this.getCommContent(id);
-        if (commContent) {
-            commContent.remove();
-        }
-    }
-    /**
-     * 清除所有批注
-     */
-    clearAllComms() {
-        for (let i = 0; i < this.markPairs.length; i++) {
-            const { start, end } = this.markPairs[i];
-            if (start) {
-                start.remove();
-            }
-            if (end) {
-                end.remove();
-            }
-        }
-        this.clearItems();
-    }
-    getCommContent(id) {
-        for (let i = 0; i < this.length; i++) {
-            const commContent = this.getChild(i);
-            if (commContent.props.id === id) {
-                return commContent;
-            }
-        }
-        return null;
-    }
 }
 class CommsContainerRenderObject extends BlockContainerRenderObject {
     //批注内容是否已经重组,只要重新绘制的时候组合一次即可
     isMeasureComm;
-    selectedSet;
-    commentRangeStatus = [];
     commsMarks = [];
-    render(e) {
-        if (this.rect.height === 0) {
-            return;
-        }
-        e.render.contentContext.strokeRect(e.position.x, e.position.y, this.rect.width, this.rect.height, 'black', 0.5);
-    }
     clone() {
         const clone = new CommsContainerRenderObject(this.element);
         clone.rect = ElementUtil.cloneRect(this.rect);
@@ -2903,9 +2911,6 @@ class DataDecorateElement extends LeafElement {
     }
 }
 class DataDecorateRenderObject extends LeafRenderObject {
-    render(e) {
-        this.renderDecorRect(e.render, e.position);
-    }
     renderDecorRect(ctx, position) {
         if (ctx.drawMode === 'print') {
             return;
@@ -3115,10 +3120,6 @@ class ParagraphElement extends BlockContentElement {
     }
 }
 class ParagraphRenderObject extends MuiltBlockLineRenderObject {
-    render(e) {
-        e.nextRender();
-        this.drawProjectNumber(e.render, e.docCtx.viewOptions, e);
-    }
     /**
      * 绘制项目符号
      */
@@ -3196,8 +3197,6 @@ class ParagraphLineRectRenderObject extends BlockLineRectRenderObject {
     baseTopLine = 0;
     baseBottomLine = 0;
     startX = 0;
-    render(e) {
-    }
     clone() {
         const cloneRender = new ParagraphLineRectRenderObject(this.element);
         cloneRender.rect = ElementUtil.cloneRect(this.rect);
@@ -3271,7 +3270,7 @@ class DocumentElement extends BlockContainerElement {
     bodyElement;
     headerElement;
     footerElement;
-    commentsContainerElement;
+    //commentsContainerElement!: CommsContainerElement;
     headerEditState = false;
     constructor() {
         super('doc');
@@ -3349,6 +3348,49 @@ class DocumentElement extends BlockContainerElement {
         ss.clear();
         this.refreshView();
     }
+    markPairs = [];
+    /**
+     * 清除所有的批注标识组合
+     */
+    clearMarkItems() {
+        this.markPairs.length = 0;
+    }
+    identifyCommMark(markElement) {
+        const { id } = markElement.props;
+        let matchItem = this.markPairs.find(item => item.id === id);
+        if (!matchItem) {
+            matchItem = { id };
+            this.markPairs.push(matchItem);
+        }
+        matchItem[markElement.props.markType] = markElement;
+    }
+    /**
+     * 根据id，移除批注标记以及批注内容
+     * @param id
+     */
+    removeCommMark(id) {
+        const matchIndex = this.markPairs.findIndex(item => item.id === id);
+        if (matchIndex >= 0) {
+            const matchItem = this.markPairs[matchIndex];
+            matchItem.start?.remove();
+            matchItem.end?.remove();
+            this.markPairs.splice(matchIndex, 1);
+        }
+    }
+    /**
+     * 清除所有批注
+     */
+    clearAllComms() {
+        for (let i = 0; i < this.markPairs.length; i++) {
+            const { start, end } = this.markPairs[i];
+            if (start) {
+                start.remove();
+            }
+            if (end) {
+                end.remove();
+            }
+        }
+    }
 }
 class DocumentRenderObject extends BlockContainerRenderObject {
     constructor(ele) {
@@ -3356,21 +3398,6 @@ class DocumentRenderObject extends BlockContainerRenderObject {
     }
     headerLine;
     footerLine;
-    render(e) {
-        const { render, position, docCtx: { viewOptions } } = e;
-        const { width: docWidth, height: docHeight } = viewOptions.docPageSettings;
-        render.overlaysContext.fillRect(position.x, position.y, docWidth, this.rect.height, 'white', 5, 'black');
-        e.render.tran(() => {
-            e.render.contentContext.ctx.fillStyle = e.docCtx.viewOptions.defaultColor;
-            this.checkPrintMode(e);
-            e.nextRender();
-            this.drawCopyRight(viewOptions, render, position);
-            this.drawDocPageNum(render, viewOptions, position);
-            //绘制文档边距线
-            this.drawMarginLine(position, render, docWidth, docHeight);
-            this.drawWatermark(render, viewOptions, position);
-        });
-    }
     /**
      * 打印模式检查
      * 如果是续打模式，需要进行裁剪打印范围，页眉页脚都不需要打印
@@ -3806,45 +3833,6 @@ function getCurrOptions(ele) {
     return doc?.viewOptions;
 }
 class DataElementRenderObject extends InlineGroupRenderObject {
-    render(e) {
-        const { render, position, docCtx: { viewOptions } } = e;
-        this.paintPos = e.position;
-        //数据元不打印
-        if (!this.element.props.printable && render.drawMode === 'print') {
-            return;
-        }
-        render.contentContext.tran(() => {
-            //绘制数据元区域底色
-            let bgColor = '';
-            if (this.element.isMouseenter) {
-                bgColor = this.element.props.editable ? viewOptions.dataEleOverlaysColor : viewOptions.dataEleReadOnlyOverlayColor;
-            }
-            if (this.element.isFocused) {
-                bgColor = e.docCtx.viewOptions.dataEleFocusedBgColor;
-            }
-            if (this.element.errorTip) {
-                bgColor = viewOptions.dataEleErrorBgColor;
-            }
-            if (bgColor) {
-                render.contentContext.fillRect(position.x, position.y, this.rect.width, this.rect.height, bgColor);
-            }
-            if (this.element.props.secretBrowse && viewOptions.secretBrowse) {
-                render.contentContext.ctx.filter = "blur(10px)";
-            }
-            if (this.element.props.underline) {
-                const y = position.y + 2 + this.rect.height;
-                render.contentContext.strokeLines([{ x: position.x, y }, {
-                        x: position.x + this.rect.width,
-                        y
-                    }], 1, '#595959');
-            }
-            e.nextRender();
-            this.drawCaption(e);
-        });
-        e.render.onRenderCompleted.subscribe(() => {
-            drawDecorator(e, this);
-        });
-    }
     exportHTML(event) {
         const node = super.exportHTML(event);
         exportDecoratorHTML(event, this);
@@ -4130,15 +4118,6 @@ class DocumentBodyElement extends BlockContainerElement {
     }
 }
 class DocumentBodyRenderObject extends MuiltBlockLineRenderObject {
-    render(e) {
-        const { render, position } = e;
-        render.tran(() => {
-            if (this.element.disableClick && render.drawMode === 'view') {
-                render.contentContext.setGlobalAlpha(0.5);
-            }
-            e.nextRender();
-        });
-    }
     clone(cloneData = true) {
         const cloneRender = new DocumentBodyRenderObject(this.element);
         cloneRender.rect = ElementUtil.cloneRect(this.rect);
@@ -4208,22 +4187,6 @@ class DocumentFooterElement extends BlockContainerElement {
     }
 }
 class DocumentFooterRenderObject extends BlockContainerRenderObject {
-    render(e) {
-        const { render, position } = e;
-        render.tran(() => {
-            //判断页眉是否为输入内容
-            const isFooterEmpty = ElementUtil.checkEmptyRenderContent(this);
-            if (this.element.disableClick && render.drawMode === 'view') {
-                if (isFooterEmpty) {
-                    render.contentContext.setGlobalAlpha(0);
-                }
-                else {
-                    render.contentContext.setGlobalAlpha(0.5);
-                }
-            }
-            e.nextRender();
-        });
-    }
     clone() {
         const cloneRender = new DocumentFooterRenderObject(this.element);
         cloneRender.rect = ElementUtil.cloneRect(this.rect);
@@ -4304,27 +4267,6 @@ class DocumentHeaderElement extends BlockContainerElement {
     }
 }
 class DocumentHeaderRenderObject extends BlockContainerRenderObject {
-    render(e) {
-        const { render, position } = e;
-        render.tran(() => {
-            //判断页眉是否为输入内容
-            const isHeaderEmpty = ElementUtil.checkEmptyRenderContent(this);
-            //存在输入内容时，绘制页眉-页体分割线
-            if (!isHeaderEmpty || !this.element.disableClick) {
-                const headerLineY = this.rect.height;
-                render.contentContext.drawHoriLine(position.x, position.y + headerLineY, this.rect.width, 'black', 0.5);
-            }
-            if (this.element.disableClick && render.drawMode === 'view') {
-                if (isHeaderEmpty) {
-                    render.contentContext.setGlobalAlpha(0);
-                }
-                else {
-                    render.contentContext.setGlobalAlpha(0.5);
-                }
-            }
-            e.nextRender();
-        });
-    }
     clone() {
         const cloneRender = new DocumentHeaderRenderObject(this.element);
         cloneRender.rect = ElementUtil.cloneRect(this.rect);
@@ -4404,13 +4346,6 @@ class PSymbolElement extends LeafElement {
     }
 }
 class PSymbolRenderObject extends LeafRenderObject {
-    render(e) {
-        const { render, position } = e;
-        if (render.drawMode === 'print' || !e.docCtx.viewOptions.showParaSymbol) {
-            return;
-        }
-        render.contentContext.drawText('↩', this.element.textProps, position.x, position.y, 20, this.rect.height);
-    }
     exportHTML(event) {
         if (!event.options.showEnterSymbol || event.mode === 'print') {
             return null;
@@ -4523,22 +4458,6 @@ class TableCellElement extends BlockContainerElement {
     }
 }
 class TableCellRenderObject extends InlineMuiltBlockLineRenderObject {
-    render(e) {
-        const { render, position } = e;
-        render.tran(() => {
-            render.contentContext.clip(position.x, position.y, this.rect.width, this.rect.height);
-            const { hMerge, vMerge, backgroundColor, diagonal } = this.element.props;
-            if (hMerge === 'continue' || vMerge === 'continue') {
-                render.contentContext.setGlobalAlpha(0);
-                render.overlaysContext.setGlobalAlpha(0);
-            }
-            if (backgroundColor && this.rect.width && this.rect.height) {
-                render.contentContext.fillRect(position.x, position.y, this.rect.width, this.rect.height, backgroundColor);
-            }
-            this.renderDiagonal(render, diagonal, position);
-            e.nextRender();
-        });
-    }
     /**
      * 绘制对角线
      * @private
@@ -4706,9 +4625,7 @@ class TableRowRenderObject extends MuiltBlockLineRenderObject {
     //被截断的行是否需要重新计算高度
     remeasureState = true;
     //当前行是否存在合并单元格
-    hasMergeCells = false;
-    render(e) {
-    }
+    hasMergeCells = undefined;
     clone() {
         const cloneRender = new TableRowRenderObject(this.element);
         cloneRender.remeasureState = this.remeasureState;
@@ -4737,17 +4654,6 @@ class DocumentContainerRender extends BlockContainerRenderObject {
     constructor() {
         super(null);
     }
-    render(e) {
-        const { render, nextRender, docCtx: { viewOptions } } = e;
-        const { viewSettings, docPageSettings, viewBackcolor, scale } = viewOptions;
-        render.clear();
-        //render.overlaysContext.fillRect(0,  0, viewSettings.width, viewSettings.height, viewBackcolor);
-        render.tran(() => {
-            render.overlaysContext.ctx.scale(scale, scale);
-            render.contentContext.ctx.scale(scale, scale);
-            nextRender();
-        });
-    }
     clone() {
         throw new Error("Method not implemented.");
     }
@@ -4864,17 +4770,6 @@ class TextGroupElement extends LeafElement {
 }
 class TextGroupRenderObject extends LeafRenderObject {
     textMeasures;
-    render(e) {
-        const { render, position } = e;
-        //null-text不打印
-        if (render.drawMode === 'print' && this.element.isDecorate) {
-            return;
-        }
-        if (this.element.props.border) {
-            render.contentContext.strokeRect(position.x, position.y, this.rect.width, this.rect.height);
-        }
-        render.contentContext.drawTextUnits(this, position.x, position.y + (this.rect.height - this.element.props.fontSize) / 2);
-    }
     constructor(element) {
         super(element);
     }
@@ -5345,7 +5240,7 @@ class DocumentCursor {
 }
 
 class RangeUtil {
-    static getSelctionRange(startControl, startOffset, endControl, endOffset, ancestorCommonControl) {
+    static getSectionRange(startControl, startOffset, endControl, endOffset, ancestorCommonControl) {
         if (ancestorCommonControl instanceof TableElement || ancestorCommonControl instanceof TableRowElement) {
             const tbElement = ancestorCommonControl instanceof TableElement ? ancestorCommonControl : ancestorCommonControl.parent;
             return this.getTableSelectionRange(startControl, startOffset, endControl, endOffset, tbElement);
@@ -5424,7 +5319,7 @@ class RangeUtil {
                         });
                     }
                     else {
-                        const cellRange = this.getSelctionRange(cellFirstLeafElement, 0, cellLastLeafElement, 1, cell);
+                        const cellRange = this.getSectionRange(cellFirstLeafElement, 0, cellLastLeafElement, 1, cell);
                         cellRanges.push(cellRange);
                     }
                 }
@@ -6590,56 +6485,6 @@ class TableRenderObject extends MuiltBlockLineRenderObject {
     setRenderWidth(maxWidth) {
         super.setRenderWidth(maxWidth);
     }
-    render(e) {
-        const { render, position } = e;
-        //绘制表格线
-        const border = this.element.props.border;
-        if (border === 'none') {
-            return;
-        }
-        const lineDash = border === 'dashed' ? [2, 2] : [];
-        for (let i = 0; i < this.length; i++) {
-            const rowRender = this.getChild(i);
-            const rowPos = { x: rowRender.rect.x + position.x, y: rowRender.rect.y + position.y };
-            for (let j = 0; j < rowRender.length; j++) {
-                const cellRender = rowRender.getChild(j);
-                const cellPos = { x: cellRender.rect.x + rowPos.x, y: cellRender.rect.y + rowPos.y };
-                //绘制单元格上边框
-                if (i === 0) {
-                    //ctx.contentContext.fillRect(cellPos.x, cellPos.y, cellRender.rect.width, 1);
-                    render.contentContext.fillLines([{ x: cellPos.x, y: cellPos.y }, {
-                            x: cellPos.x + cellRender.rect.width,
-                            y: cellPos.y
-                        }], 1, '#000', lineDash);
-                    //this.drawLine(ctx, { x: cellPos.x, y: cellPos.y }, { x: cellPos.x + cellRender.rect.width, y: cellPos.y });
-                }
-                //绘制左边框
-                if (j === 0) {
-                    //ctx.contentContext.fillRect(cellPos.x, cellPos.y, 1, cellRender.rect.height);
-                    render.contentContext.fillLines([{ x: cellPos.x, y: cellPos.y }, {
-                            x: cellPos.x,
-                            y: cellPos.y + cellRender.rect.height
-                        }], 1, '#000', lineDash);
-                    //this.drawLine(ctx, { x: cellPos.x, y: cellPos.y }, { x: cellPos.x, y: cellPos.y + cellRender.rect.height });
-                }
-                //绘制右边框
-                //ctx.contentContext.fillRect(cellPos.x + cellRender.rect.width, cellPos.y, 1, cellRender.rect.height);
-                render.contentContext.fillLines([{
-                        x: cellPos.x + cellRender.rect.width,
-                        y: cellPos.y
-                    }, { x: cellPos.x + cellRender.rect.width, y: cellPos.y + cellRender.rect.height }], 1, '#000', lineDash);
-                //this.drawLine(ctx, { x: cellPos.x + cellRender.rect.width, y: cellPos.y }, { x: cellPos.x + cellRender.rect.width, y: cellPos.y + cellRender.rect.height });
-                //绘制下边框
-                //ctx.contentContext.fillRect(cellPos.x, cellPos.y + cellRender.rect.height, cellRender.rect.width, 1);
-                render.contentContext.fillLines([{
-                        x: cellPos.x,
-                        y: cellPos.y + cellRender.rect.height
-                    }, { x: cellPos.x + cellRender.rect.width, y: cellPos.y + cellRender.rect.height }], 1, '#000', lineDash);
-                //this.drawLine(ctx, { x: cellPos.x, y: cellPos.y + cellRender.rect.height }, { x: cellPos.x + cellRender.rect.width, y: cellPos.y + cellRender.rect.height });
-                //cellRender.beginRender(ctx, { x: position.x + cellRender.offsetX, y: position.y + cellRender.offsetY });
-            }
-        }
-    }
     exportTableBorder() {
         //绘制表格线
         const border = this.element.props.border;
@@ -6924,10 +6769,7 @@ class CheckBoxFactory extends ElementFactory {
     }
 }
 class CheckBoxRenderObject extends LeafRenderObject {
-    render(e) {
-        e.render.contentContext.drawCheckBox(e.position.x + 2, e.position.y, this.element.props.size, this.element.props.size, this.element.props.isChecked);
-    }
-    clone(cloneData = true) {
+    clone() {
         const clone = new CheckBoxRenderObject(this.element);
         clone.rect = ElementUtil.cloneRect(this.rect);
         return clone;
@@ -7026,34 +6868,6 @@ class CommContentElement extends CommContentBaseElement {
     }
 }
 class CommContentRenderObject extends CommContentBaseRenderObject {
-    render(e) {
-        let borderColor = this.element.focus ? '#fa8c16' : '#ffd591';
-        e.render.contentContext.strokeRect(e.position.x, e.position.y, this.rect.width, this.rect.height, borderColor);
-        e.render.contentContext.fillRect(e.position.x, e.position.y, 8, this.rect.height, '#871400');
-        const docRender = ElementUtil.getParentRender(this.commMarkRender.render, DocumentRenderObject);
-        //获取审阅标记的绘制坐标
-        let commMarkPos = ElementUtil.getRenderAbsolutePaintPos(this.commMarkRender.render, {
-            x: 0,
-            y: -e.docCtx.viewOptions.pageOffset.y
-        });
-        const commMarkLinePos = ElementUtil.getParaLinePos(this.commMarkRender.render, commMarkPos);
-        commMarkPos.y = commMarkLinePos.y + 2;
-        const docRenderPos = ElementUtil.getRenderAbsolutePaintPos(docRender, {
-            x: 0,
-            y: -e.docCtx.viewOptions.pageOffset.y
-        });
-        const marginLeft = commMarkPos.x - docRenderPos.x - docRender.padding.left;
-        const marginRight = e.docCtx.viewOptions.docPageSettings.width - marginLeft - docRender.padding.right * 2;
-        e.render.overlaysContext.drawDashLine([commMarkPos, {
-                x: commMarkPos.x + marginRight,
-                y: commMarkPos.y
-            }], [1, 1], 'red');
-        e.render.overlaysContext.drawDashLine([{
-                x: commMarkPos.x + marginRight,
-                y: commMarkPos.y
-            }, e.position], [1, 1], 'red');
-        this.renderTitle(e.render, e.position);
-    }
     exportHTML(event) {
         const t = super.exportHTML(event);
         t.children = [];
@@ -7263,26 +7077,56 @@ class CommentsUtil {
     }
 }
 
-class CommentElement extends LeafElement {
-    constructor() {
-        super('comm');
-        this.isDecorate = true;
-        this.disableClick = true;
-        this.props = new CommProps();
-    }
-    createRenderObject() {
-        const render = new CommentRenderObject(this);
-        render.rect.width = 0;
-        render.rect.height = 14;
-        return render;
-    }
-    serialize(viewOptions) {
-        if (this.isDecorate) {
-            return null;
-        }
-        return {
-            type: this.type,
-            props: {
+let activeEditorContext = null;
+function setActiveEditorContext(ctx) {
+    activeEditorContext = ctx;
+}
+function getActiveEditorContext() {
+    return activeEditorContext;
+}
+function createSignal(state) {
+    let _state = state;
+    const activeCtx = activeEditorContext;
+    const signal = {
+        get value() {
+            return _state;
+        },
+        set value(v) {
+            if (v === _state) {
+                return;
+            }
+            _state = v;
+            signal.onChange();
+        },
+        onChange: () => {
+            activeCtx?.onChange();
+        }
+    };
+    return signal;
+}
+
+class CommentElement extends LeafElement {
+    color;
+    constructor() {
+        super('comm');
+        this.isDecorate = true;
+        this.disableClick = true;
+        this.props = new CommProps();
+        this.color = CommonUtil.randomRgbColor(0.5);
+    }
+    createRenderObject() {
+        const render = new CommentRenderObject(this);
+        render.rect.width = 0;
+        render.rect.height = 14;
+        return render;
+    }
+    serialize(viewOptions) {
+        if (this.isDecorate) {
+            return null;
+        }
+        return {
+            type: this.type,
+            props: {
                 ...this.props.getSerializeProps(viewOptions)
             }
         };
@@ -7294,16 +7138,6 @@ class CommentElement extends LeafElement {
     }
 }
 class CommentRenderObject extends LeafRenderObject {
-    //renderPos!: Position;
-    render(e) {
-        // if (!e.docCtx.viewOptions.showReviewWindow) {
-        //     return;
-        // }
-        // this.renderPos = e.position;
-        // const paraLinePos = ElementUtil.getParaLinePos(this, {x: e.position.x, y: e.position.y});
-        // const color = '#ff4d4f';
-        // e.render.contentContext.fillRect(e.position.x - 1, paraLinePos.y, 2, paraLinePos.height, color)
-    }
     exportHTML(event) {
         const renderPos = { ...event.relativePagePos };
         const paraLinePos = ElementUtil.getParaLinePos(this, { x: renderPos.x, y: renderPos.y });
@@ -7321,6 +7155,7 @@ class CommentRenderObject extends LeafRenderObject {
                     }
                 }
             }];
+        this.createCommentTips(event);
         return t;
     }
     clone() {
@@ -7328,6 +7163,90 @@ class CommentRenderObject extends LeafRenderObject {
         clone.rect = ElementUtil.cloneRect(this.rect);
         return clone;
     }
+    createCommentTips(event) {
+        if (this.element.props.markType === 'end') {
+            return;
+        }
+        if (this.element.paintRenders.indexOf(this) !== 0) {
+            return;
+        }
+        const appCtx = getActiveEditorContext();
+        const opType = '批注：';
+        const content = this.element.props.text;
+        const left = 5;
+        let sel = 'div.tg-container';
+        const node = {
+            sel,
+            key: this.element.props.id,
+            data: {
+                style: {
+                    left: `${left}px`,
+                    top: `${event.globalPos.y}px`
+                },
+                on: {
+                    click: (e) => {
+                        e.stopPropagation();
+                        appCtx?.emit('comment-click', {
+                            ...this.element.props
+                        });
+                        //this.showCommentRange(appCtx!);
+                    },
+                    dblclick: (e) => {
+                        e.stopPropagation();
+                        appCtx?.emit('comment-dblclick', {
+                            ...this.element.props
+                        });
+                    }
+                }
+            },
+            children: [{
+                    sel: 'div.header',
+                    data: {},
+                    children: [{
+                            sel: 'span.header-user',
+                            data: {},
+                            text: this.element.props.userName,
+                        }, {
+                            sel: 'span.header-date',
+                            data: {},
+                            text: this.element.props.date,
+                        }]
+                }, {
+                    sel: 'div.content',
+                    data: {},
+                    text: opType + content
+                }, {
+                    sel: 'div.bg',
+                    data: {
+                        style: {
+                            background: this.element.color
+                        }
+                    }
+                }]
+        };
+        event.addChangeTips(node);
+        // <div class="container">
+        // <div class="header">
+        // <span class="header-user">张三</span>
+        //     <span class="header-date">2023.1.21 16:06</span>
+        // </div>
+        // <div class="content">修改了字符串</div>
+        //     </div>
+    }
+    /**
+     * 显示批注范围
+     * @private
+     */
+    showCommentRange(appCtx) {
+        const doc = ElementUtil.getParent(this.element, (item) => item.type === 'doc');
+        const commPair = doc.treeFilter(item => item instanceof CommentElement && item.props.id === this.element.props.id);
+        if (commPair.length === 2) {
+            const range = new SelectionRange();
+            range.setStart(commPair[0], 0);
+            range.setEnd(commPair[1], 1);
+            appCtx.selectionState.addRange(range);
+        }
+    }
 }
 class CommentFactory extends ElementFactory {
     match(type) {
@@ -7338,6 +7257,7 @@ class CommentFactory extends ElementFactory {
         const props = data.props;
         ele.props.id = props.id;
         ele.props.markType = props.markType;
+        ele.props.text = props.text;
         return ele;
     }
 }
@@ -7383,31 +7303,6 @@ class ValidateElement extends CommContentBaseElement {
     }
 }
 class ValidateRenderObject extends CommContentBaseRenderObject {
-    render(e) {
-        let borderColor = this.element.focus ? '#fa8c16' : '#ffd591';
-        e.render.contentContext.strokeRect(e.position.x, e.position.y, this.rect.width, this.rect.height, borderColor);
-        e.render.contentContext.fillRect(e.position.x, e.position.y, 8, this.rect.height, '#871400');
-        const docRender = ElementUtil.getParentRender(this.commMarkRender.render, DocumentRenderObject);
-        //获取审阅标记的绘制坐标
-        let commMarkPos = ElementUtil.getRenderAbsolutePaintPos(this.commMarkRender.render, {
-            x: 0,
-            y: -e.docCtx.viewOptions.pageOffset.y
-        });
-        const commMarkLinePos = ElementUtil.getParaLinePos(this.commMarkRender.render, commMarkPos);
-        commMarkPos.y = commMarkLinePos.y + 2;
-        const docRenderPos = ElementUtil.getRenderAbsolutePaintPos(docRender, { x: 0, y: -e.docCtx.viewOptions.pageOffset.y });
-        const marginLeft = commMarkPos.x - docRenderPos.x - docRender.padding.left;
-        const marginRight = e.docCtx.viewOptions.docPageSettings.width - marginLeft - docRender.padding.right * 2;
-        e.render.overlaysContext.drawDashLine([commMarkPos, {
-                x: commMarkPos.x + marginRight,
-                y: commMarkPos.y
-            }], [1, 1], 'red');
-        e.render.overlaysContext.drawDashLine([{
-                x: commMarkPos.x + marginRight,
-                y: commMarkPos.y
-            }, e.position], [1, 1], 'red');
-        this.renderTitle(e.render, e.position);
-    }
     renderTitle(ctx, position) {
         const topPadding = 24;
         const textProps = new TextProps();
@@ -8333,40 +8228,11 @@ class DataElementBarcode extends DataElementLeaf {
     }
 }
 class DataElementBarcodeRenderObject extends ResizeLeafRenderObject {
-    render(e) {
-        // const barcodeEle = this.element as DataElementBarcode;
-        // barcodeEle.drawBarcode(e.render, e.position);
-    }
     clone() {
         const clone = new DataElementBarcodeRenderObject(this.element);
         clone.rect = ElementUtil.cloneRect(this.rect);
         return clone;
     }
-    pagePaintCompleted(e) {
-        if (this.element.isFocused) {
-            const { render, position: pos } = e;
-            const { width, height } = this.rect;
-            render.contentContext.strokeRect(pos.x, pos.y, this.rect.width, this.rect.height, '#1890ff', 0.5);
-            this.drawResizeCircle(render, pos.x, pos.y);
-            this.drawResizeCircle(render, pos.x + width, pos.y);
-            this.drawResizeCircle(render, pos.x, pos.y + height);
-            this.drawResizeCircle(render, pos.x + width, pos.y + height);
-            this.drawResizeCircle(render, pos.x + (Math.floor(width / 2)), pos.y);
-            this.drawResizeCircle(render, pos.x + (Math.floor(width / 2)), pos.y + height);
-            this.drawResizeCircle(render, pos.x, pos.y + (Math.floor(height / 2)));
-            this.drawResizeCircle(render, pos.x + width, pos.y + (Math.floor(height / 2)));
-        }
-    }
-    drawResizeCircle(ctx, x, y) {
-        const ctxNative = ctx.contentContext.ctx;
-        ctxNative.save();
-        ctxNative.fillStyle = '#69c0ff';
-        ctxNative.beginPath();
-        ctxNative.arc(x, y, Math.floor(4 / 5 * 4), 0, 2 * Math.PI);
-        ctxNative.closePath();
-        ctxNative.fill();
-        ctxNative.restore();
-    }
     exportHTML(event) {
         const t = super.exportHTML(event);
         if (this.element.props.type === 'qrcode') {
@@ -8531,27 +8397,6 @@ class DataElementCheckRenderObject extends LeafRenderObject {
         cloneRender.rect = ElementUtil.cloneRect(this.rect);
         return cloneRender;
     }
-    render(e) {
-        const { render, position } = e;
-        const element = this.element;
-        if (element.props.drawStateChar) {
-            const font = `${element.props.size - 2}px 微软雅黑`;
-            const str = element.props.checked ? element.props.trueChar : element.props.falseChar;
-            const color = element.props.checked ? element.props.trueStateColor : element.props.falseStateColor;
-            e.render.contentContext.drawText2(str, font, color, position.x, position.y, element.props.size, element.props.size);
-            if (element.props.border) {
-                e.render.contentContext.strokeRect(position.x + 2, position.y, element.props.size, element.props.size);
-            }
-        }
-        else {
-            if (element.props.multiSelect) {
-                render.contentContext.drawCheckBox(position.x + 2, position.y, element.props.size, element.props.size, element.props.checked);
-            }
-            else {
-                render.contentContext.drawRadioBox(position.x + 2, position.y, element.props.size, element.props.size, element.props.checked);
-            }
-        }
-    }
     exportHTML(event) {
         const t = super.exportHTML(event);
         const props = this.element.props;
@@ -8842,12 +8687,6 @@ class DataElementGroupElement extends InlineGroupInputElement {
     }
 }
 class DataElementGroupRenderObject extends InlineGroupRenderObject {
-    render(e) {
-        this.paintPos = e.position;
-        e.render.onRenderCompleted.subscribe(() => {
-            drawDecorator(e, this);
-        });
-    }
     clone() {
         const cloneRender = new DataElementGroupRenderObject(this.element);
         cloneRender.rect = ElementUtil.cloneRect(this.rect);
@@ -8901,18 +8740,6 @@ class DataElementImage extends DataElementLeaf {
         this.props.clone(clone.props);
         return clone;
     }
-    loadImage(ctx) {
-        if (this.status === 'no') {
-            this.status = 'loading';
-            const onCallback = (status) => {
-                this.status = status;
-                if (status === 'completed') {
-                    this.refreshView();
-                }
-            };
-            ctx.imageLoader.loadImage(this.props.src, onCallback);
-        }
-    }
     destroy() {
         super.destroy();
     }
@@ -8927,70 +8754,11 @@ class DataElementImage extends DataElementLeaf {
     }
 }
 class DataImageRenderObject extends ResizeLeafRenderObject {
-    render(e) {
-        const { render, position, docCtx } = e;
-        const dataImgElement = this.element;
-        const picProps = dataImgElement.props;
-        if (dataImgElement.status === 'no') {
-            dataImgElement.loadImage(docCtx);
-            return;
-        }
-        if (dataImgElement.status === 'completed') {
-            const imageSource = docCtx.imageLoader.getImage(picProps.src);
-            if (!imageSource) {
-                return;
-            }
-            if (picProps.border === 'all') {
-                render.contentContext.strokeRect(position.x, position.y, this.rect.width, this.rect.height, 'black');
-            }
-            render.contentContext.ctx.drawImage(imageSource, 0, 0, imageSource.naturalWidth, imageSource.naturalHeight, position.x + 2, position.y + 2, picProps.width, picProps.height);
-        }
-        if (render.drawMode === 'view') {
-            let { x, y } = position;
-            const { width, height } = this.rect;
-            const lineWidth = 5;
-            const paintColor = '#0050b3';
-            render.contentContext.strokeLines([{ x: x + lineWidth, y }, { x, y }, { x, y: y + height }, {
-                    x: x + lineWidth,
-                    y: y + height
-                }], 1, paintColor);
-            x = x + width;
-            render.contentContext.strokeLines([{ x: x - lineWidth, y }, { x, y }, { x, y: y + height }, {
-                    x: x - lineWidth,
-                    y: y + height
-                }], 1, paintColor);
-        }
-    }
     clone() {
         const clone = new DataImageRenderObject(this.element);
         clone.rect = ElementUtil.cloneRect(this.rect);
         return clone;
     }
-    pagePaintCompleted(e) {
-        if (this.element.isFocused) {
-            const { render, position: pos } = e;
-            const { width, height } = this.rect;
-            render.contentContext.strokeRect(pos.x, pos.y, this.rect.width, this.rect.height, '#1890ff', 0.5);
-            this.drawResizeCircle(render, pos.x, pos.y);
-            this.drawResizeCircle(render, pos.x + width, pos.y);
-            this.drawResizeCircle(render, pos.x, pos.y + height);
-            this.drawResizeCircle(render, pos.x + width, pos.y + height);
-            this.drawResizeCircle(render, pos.x + (Math.floor(width / 2)), pos.y);
-            this.drawResizeCircle(render, pos.x + (Math.floor(width / 2)), pos.y + height);
-            this.drawResizeCircle(render, pos.x, pos.y + (Math.floor(height / 2)));
-            this.drawResizeCircle(render, pos.x + width, pos.y + (Math.floor(height / 2)));
-        }
-    }
-    drawResizeCircle(ctx, x, y) {
-        const ctxNative = ctx.contentContext.ctx;
-        ctxNative.save();
-        ctxNative.fillStyle = '#69c0ff';
-        ctxNative.beginPath();
-        ctxNative.arc(x, y, Math.floor(4 / 5 * 4), 0, 2 * Math.PI);
-        ctxNative.closePath();
-        ctxNative.fill();
-        ctxNative.restore();
-    }
     exportHTML(event) {
         const t = super.exportHTML(event);
         t.children = [{
@@ -9226,13 +8994,6 @@ class BreakElement extends LeafElement {
     }
 }
 class BreakRenderObject extends LeafRenderObject {
-    render(e) {
-        const { render, position } = e;
-        if (render.drawMode === 'print') {
-            return;
-        }
-        render.contentContext.drawText('↓', this.element.textProps, position.x, position.y, 20, this.rect.height);
-    }
     exportHTML(event) {
         if (!event.options.showEnterSymbol || event.mode === 'print') {
             return null;
@@ -9398,8 +9159,6 @@ class FillNullSpaceRenderObject extends LeafRenderObject {
         super(null);
         this.disableClick = true;
     }
-    render(e) {
-    }
     clone() {
         const clone = new FillNullSpaceRenderObject();
         clone.rect = ElementUtil.cloneRect(this.rect);
@@ -9460,11 +9219,6 @@ class DocumentBodyPartElement extends BlockContainerElement {
     }
 }
 class DocumentBodyPartRenderObject extends MuiltBlockLineRenderObject {
-    render(e) {
-        const { render, position } = e;
-        const bgColor = (this.element.isFocused || this.element.isMouseenter) ? '#d9d9d9' : '#ffffff';
-        render.overlaysContext.fillRect(position.x - 2, position.y - 2, this.rect.width + 4, this.rect.height + 4, bgColor, 5, 'black');
-    }
     clone(cloneData = true) {
         const cloneRender = new DocumentBodyPartRenderObject(this.element);
         cloneRender.rect = ElementUtil.cloneRect(this.rect);
@@ -9604,9 +9358,6 @@ function getMHItem(kind) {
     return mhLayoutItems[kindIndex];
 }
 class DataRenderMH extends LeafRenderObject {
-    render(e) {
-        renderMH(this.element, e.render, e.position, true);
-    }
     exportHTML(event) {
         const t = super.exportHTML(event);
         const children = [];
@@ -9836,80 +9587,16 @@ class PictureElement extends LeafElement {
         this.props.clone(clone.props);
         return clone;
     }
-    loadImage(ctx) {
-        if (this.status === 'no') {
-            this.status = 'loading';
-            //this.imageSource = new Image();
-            //this.imageSource.src = this.props.src;
-            // const onload = (e: any) => {
-            //     this.isLoad = 'completed';
-            //     this.refreshView('appearance');
-            // };
-            // const onerror = (e: any) => {
-            //     this.isLoad = 'error';
-            //     console.error(e);
-            // };
-            const onCallback = (status) => {
-                this.status = status;
-                if (status === 'completed') {
-                    this.refreshView();
-                }
-            };
-            ctx.imageLoader.loadImage(this.props.src, onCallback);
-        }
-    }
     destroy() {
         super.destroy();
     }
 }
 class PictureRenderObject extends ResizeLeafRenderObject {
-    render(e) {
-        const { render, position, docCtx } = e;
-        const picElement = this.element;
-        const picProps = picElement.props;
-        if (picElement.status === 'no') {
-            picElement.loadImage(docCtx);
-            return;
-        }
-        if (picElement.status === 'completed') {
-            const imageSource = docCtx.imageLoader.getImage(picProps.src);
-            if (!imageSource) {
-                return;
-            }
-            if (picProps.border === 'all') {
-                render.contentContext.strokeRect(position.x, position.y, this.rect.width, this.rect.height, 'black');
-            }
-            render.contentContext.ctx.drawImage(imageSource, 0, 0, imageSource.naturalWidth, imageSource.naturalHeight, position.x + 2, position.y + 2, picProps.width, picProps.height);
-        }
-    }
     clone() {
         const clone = new PictureRenderObject(this.element);
         clone.rect = ElementUtil.cloneRect(this.rect);
         return clone;
     }
-    pagePaintCompleted(e) {
-        if (this.element.isFocused) {
-            const { render, position: pos } = e;
-            const { width, height } = this.rect;
-            render.contentContext.strokeRect(pos.x, pos.y, width, height, '#1890ff', 0.5);
-            this.drawResizeCircle(render, pos.x, pos.y);
-            this.drawResizeCircle(render, pos.x + width, pos.y);
-            this.drawResizeCircle(render, pos.x, pos.y + height);
-            this.drawResizeCircle(render, pos.x + width, pos.y + height);
-            this.drawResizeCircle(render, pos.x + (Math.floor(width / 2)), pos.y);
-            this.drawResizeCircle(render, pos.x + (Math.floor(width / 2)), pos.y + height);
-            this.drawResizeCircle(render, pos.x, pos.y + (Math.floor(height / 2)));
-            this.drawResizeCircle(render, pos.x + width, pos.y + (Math.floor(height / 2)));
-        }
-    }
-    drawResizeCircle(ctx, x, y) {
-        const ctxNative = ctx.contentContext.ctx;
-        ctxNative.fillStyle = '#69c0ff';
-        ctxNative.beginPath();
-        ctxNative.arc(x, y, Math.floor(4 / 5 * 4), 0, 2 * Math.PI);
-        ctxNative.closePath();
-        ctxNative.fill();
-    }
     exportHTML(event) {
         const picElement = this.element;
         const picProps = picElement.props;
@@ -10041,10 +9728,6 @@ class RadioBoxFactory extends ElementFactory {
     }
 }
 class RadioBoxRenderObject extends LeafRenderObject {
-    render(e) {
-        const { render, position } = e;
-        render.contentContext.drawRadioBox(position.x + 2, position.y, this.element.props.size, this.element.props.size, this.element.props.isChecked);
-    }
     clone(cloneData = true) {
         const clone = new RadioBoxRenderObject(this.element);
         clone.rect = ElementUtil.cloneRect(this.rect);
@@ -10083,13 +9766,6 @@ class PageBreakElement extends LeafElement {
     }
 }
 class PageBreakRenderObject extends LeafRenderObject {
-    render(e) {
-        const { render, position } = e;
-        if (render.drawMode === 'print') {
-            return;
-        }
-        render.contentContext.drawText('↩', this.element.textProps, position.x, position.y, 20, this.rect.height);
-    }
     clone() {
         const render = new PageBreakRenderObject(this.element);
         render.rect = ElementUtil.cloneRect(this.rect);
@@ -10126,13 +9802,6 @@ class TabElement extends LeafElement {
     }
 }
 class TabRenderObject extends LeafRenderObject {
-    render(e) {
-        const { render, position } = e;
-        if (render.drawMode === 'print') {
-            return;
-        }
-        //render.contentContext.fillRect(position.x,position.y,this.rect.width,this.rect.height,'red');
-    }
     clone() {
         const render = new TabRenderObject(this.element);
         render.rect = ElementUtil.cloneRect(this.rect);
@@ -10698,42 +10367,151 @@ class TableSplitCell {
     }
 }
 
-class ElementSerialize {
-    /**
-     * 将当前文档对象构建并输出到标准的JSON对象
-     * @param element
-     * @param viewOptions
-     */
-    static serialize(element, viewOptions) {
-        const result = element.serialize(viewOptions);
-        if (!result) {
-            return null;
-        }
-        if (result.complete) {
-            return result;
-        }
-        if (element instanceof BranchElement) {
-            result.children = [];
-            let prevEle = null;
-            for (let i = 0; i < element.length; i++) {
-                const child = element.getChild(i);
-                const serializeChild = this.serialize(child, viewOptions);
-                if (child.type === 'text' && prevEle && prevEle.ele.type === 'text') {
-                    if (child.props.equals(prevEle.ele.props)) {
-                        prevEle.props.content += serializeChild.content;
-                        continue;
-                    }
-                }
-                if (serializeChild) {
-                    delete serializeChild.complete;
-                    serializeChild.props = serializeChild.props || {};
-                    if (Object.keys(serializeChild.props).length === 0) {
-                        delete serializeChild.props;
-                    }
-                    if (serializeChild.children && serializeChild.children.length === 0) {
-                        delete serializeChild.children;
-                    }
-                    result.children.push(serializeChild);
+class SVGElement extends LeafElement {
+    resizeable = true;
+    constructor() {
+        super('svg');
+        this.props = new SVGProps();
+        //this.addPropValueChangedSub(this.props);
+        this.cursorType = 'move';
+        this.focusable = true;
+    }
+    createRenderObject() {
+        const render = new SVGRenderObject(this);
+        render.rect.width = this.props.width;
+        render.rect.height = this.props.height;
+        return render;
+    }
+    serialize(options) {
+        return {
+            type: 'svg',
+            props: {
+                ...this.props.getSerializeProps(options)
+            }
+        };
+    }
+    clone(data) {
+        const clone = new SVGElement();
+        this.props.clone(clone.props);
+        return clone;
+    }
+    destroy() {
+        super.destroy();
+    }
+}
+class SVGRenderObject extends ResizeLeafRenderObject {
+    clone() {
+        const clone = new SVGRenderObject(this.element);
+        clone.rect = ElementUtil.cloneRect(this.rect);
+        return clone;
+    }
+    drawResizeCircle(ctx, x, y) {
+        const ctxNative = ctx.contentContext.ctx;
+        ctxNative.fillStyle = '#69c0ff';
+        ctxNative.beginPath();
+        ctxNative.arc(x, y, Math.floor(4 / 5 * 4), 0, 2 * Math.PI);
+        ctxNative.closePath();
+        ctxNative.fill();
+    }
+    exportHTML(event) {
+        const props = this.element.props;
+        const t = super.exportHTML(event);
+        t.children = [{
+                sel: 'svg',
+                data: {
+                    ns: "http://www.w3.org/2000/svg",
+                    attrs: {
+                        width: this.rect.width,
+                        height: this.rect.height
+                    }
+                },
+                children: [{
+                        sel: 'image',
+                        data: {
+                            ns: "http://www.w3.org/2000/svg",
+                            attrs: {
+                                "xlink:href": props.value,
+                                width: Math.min(this.rect.width, this.rect.height),
+                                height: Math.min(this.rect.width, this.rect.height)
+                            }
+                        }
+                    }]
+            }];
+        //绘制拖动圆圈
+        if (this.element.isFocused) {
+            const { width, height } = this.rect;
+            const circlePoints = [{ x: 0, y: 0 }, { x: width, y: 0 }, { x: 0, y: height }, { x: width, y: height }, { x: Math.floor(width / 2), y: 0 }, { x: Math.floor(width / 2), y: height }, { x: 0, y: Math.floor(height / 2) }, { x: width, y: Math.floor(height / 2) }];
+            circlePoints.forEach((p) => {
+                t.children.push({
+                    sel: 'circle',
+                    data: {
+                        ns: "http://www.w3.org/2000/svg",
+                        attrs: {
+                            cx: p.x,
+                            cy: p.y,
+                            r: Math.floor(4 / 5 * 4),
+                            fill: '#69c0ff'
+                        }
+                    }
+                });
+            });
+        }
+        return t;
+    }
+}
+class SVGFactory extends ElementFactory {
+    match(type) {
+        return type === 'svg';
+    }
+    createElement(data) {
+        const props = data.props;
+        const pic = new SVGElement();
+        const picProps = pic.props;
+        picProps.width = props.width;
+        picProps.height = props.height;
+        picProps.value = props.value;
+        picProps.title = props.title;
+        pic.props = picProps;
+        return pic;
+    }
+}
+
+class ElementSerialize {
+    /**
+     * 将当前文档对象构建并输出到标准的JSON对象
+     * @param element
+     * @param viewOptions
+     */
+    static serialize(element, viewOptions) {
+        const result = element.serialize(viewOptions);
+        if (!result) {
+            return null;
+        }
+        if (result.complete) {
+            return result;
+        }
+        if (element instanceof BranchElement) {
+            result.children = [];
+            let prevEle = null;
+            for (let i = 0; i < element.length; i++) {
+                const child = element.getChild(i);
+                const serializeChild = this.serialize(child, viewOptions);
+                if (child.type === 'text' && prevEle && prevEle.ele.type === 'text') {
+                    if (child.props.equals(prevEle.ele.props)) {
+                        prevEle.props.content += serializeChild.content;
+                        continue;
+                    }
+                }
+                if (serializeChild) {
+                    delete serializeChild.complete;
+                    serializeChild.props = serializeChild.props || {};
+                    if (Object.keys(serializeChild.props).length === 0) {
+                        delete serializeChild.props;
+                    }
+                    if (serializeChild.children && serializeChild.children.length === 0) {
+                        delete serializeChild.children;
+                    }
+                    result.children.push(serializeChild);
                     prevEle = { ele: child, props: serializeChild };
                 }
             }
@@ -10750,6 +10528,9 @@ class ElementSerialize {
         if (element instanceof TextGroupElement && !element.isDecorate) {
             return element.text;
         }
+        if (element instanceof PSymbolElement) {
+            return '\n';
+        }
         if (element instanceof BranchElement) {
             const items = [];
             for (let i = 0; i < element.length; i++) {
@@ -10900,32 +10681,6 @@ class TrackRunRenderObject extends InlineGroupRenderObject {
     constructor(ele) {
         super(ele);
     }
-    render(e) {
-        const { render, position, docCtx: { viewOptions } } = e;
-        render.tran(() => {
-            let fillColor = viewOptions.showTrackChanges ? this.element.type === 'ins-run' ? viewOptions.trackInsColor : viewOptions.trackDelColor : '';
-            if (fillColor) {
-                render.contentContext.ctx.fillStyle = fillColor;
-            }
-            e.nextRender();
-        });
-        const { x, y } = position;
-        //不显示痕迹
-        if (!viewOptions.showTrackChanges) {
-            return;
-        }
-        const color = this.element.type === 'ins-run' ? 'green' : 'red';
-        for (let i = 0; i < this.length; i++) {
-            const childRender = this.getChild(i);
-            const { rect } = childRender;
-            if (childRender.element && childRender.element.type === 'del-run') {
-                continue;
-            }
-            let lineY = y + rect.y + rect.height;
-            lineY = this.element.type === 'ins-run' ? lineY : lineY - rect.height / 2;
-            render.contentContext.drawHoriLine(x + rect.x, lineY, rect.width, color, 1);
-        }
-    }
     exportHTML(event) {
         const { options } = event;
         const t = super.exportHTML(event);
@@ -12488,9 +12243,9 @@ class ElementUtil {
             return this.getTextRenderOffset(render, x);
         }
         else {
-            if (render.element && render.element.type === 'psym') {
-                return 0;
-            }
+            // if (render.element && render.element.type === 'psym') {
+            //     return 0;
+            // }
             return (render.rect.width / 2) >= x ? 0 : 1;
         }
     }
@@ -13220,12 +12975,12 @@ class ElementPaint {
                 }
             }
         });
-        docContainer.render({
-            render: this.renderCtx,
-            position: { x: docContainer.rect.x, y: docContainer.rect.y },
-            nextRender: nextRenderFn,
-            docCtx: this.docCtx
-        });
+        // docContainer.render({
+        //     render: this.renderCtx,
+        //     position: { x: docContainer.rect.x, y: docContainer.rect.y },
+        //     nextRender: nextRenderFn,
+        //     docCtx: this.docCtx
+        // })
         nextRenderFn();
         const { scale, viewSettings: { width, height } } = this.viewOptions;
         while (this.renderCtx.onRenderCompleted.subs.length > 0) {
@@ -13254,25 +13009,25 @@ class ElementPaint {
                         this.drawRenderObject(child, currPosition, inViewPort);
                     }
                 });
-                const renderData = {
+                ({
                     position: currPosition,
                     nextRender: nextRenderFn,
                     render: this.renderCtx,
                     docCtx: this.docCtx
-                };
-                renderObject.render(renderData);
+                });
+                //renderObject.render(renderData);
                 nextRenderFn();
             }
         }
         else if (renderObject instanceof LeafRenderObject) {
             if (inViewPort) {
-                const renderData = {
+                ({
                     position: currPosition,
                     nextRender: () => { },
                     render: this.renderCtx,
                     docCtx: this.docCtx
-                };
-                renderObject.render(renderData);
+                });
+                //renderObject.render(renderData);
             }
         }
         //处理选中拖蓝
@@ -13297,42 +13052,42 @@ class ElementPaint {
                 this.renderCtx.contentContext.fillRect(currPosition.x, currPosition.y, renderObject.rect.width, renderObject.rect.height, this.viewOptions.selectionOverlaysColor);
             }
         }
-        if (inViewPort && this.viewOptions.showReviewWindow && this.docCtx.document.commentsContainerElement.cacheRender.selectedSet.has(element)) {
-            if (renderObject instanceof LeafRenderObject || renderObject instanceof DataElementRenderObject) {
-                const measureCommContainer = this.docCtx.document.commentsContainerElement.cacheRender;
-                const range = measureCommContainer.selectedSet.get(element);
-                if (range.isFullSelected) {
-                    let commentRangePaintColor = '#ffd591';
-                    for (let i = 0; i < measureCommContainer.commentRangeStatus.length; i++) {
-                        const commentRangeStatus = measureCommContainer.commentRangeStatus[i];
-                        if (commentRangeStatus.commContent.focus) {
-                            if (RangeUtil.checkElementFullInRange(commentRangeStatus.range, element)) {
-                                commentRangePaintColor = '#fa8c16';
-                            }
-                        }
-                    }
-                    const overlayRect = { x: currPosition.x, y: currPosition.y, width: rw, height: rh };
-                    const paraLinePos = ElementUtil.getParaLinePos(renderObject, {
-                        x: currPosition.x,
-                        y: currPosition.y
-                    });
-                    this.renderCtx.overlaysContext.fillRect(overlayRect.x, paraLinePos.y, overlayRect.width, paraLinePos.height, commentRangePaintColor);
-                }
-            }
-        }
+        // if (inViewPort && this.viewOptions.showReviewWindow && (<CommsContainerRenderObject>this.docCtx.document.commentsContainerElement.cacheRender).selectedSet.has(element)) {
+        //     if (renderObject instanceof LeafRenderObject || renderObject instanceof DataElementRenderObject) {
+        //         const measureCommContainer=<CommsContainerRenderObject>this.docCtx.document.commentsContainerElement.cacheRender;
+        //         const range = measureCommContainer.selectedSet.get(element) as SelectionContentRange;
+        //         if (range.isFullSelected) {
+        //             let commentRangePaintColor = '#ffd591';
+        //             for (let i = 0; i < measureCommContainer.commentRangeStatus.length; i++) {
+        //                 const commentRangeStatus = measureCommContainer.commentRangeStatus[i];
+        //                 if (commentRangeStatus.commContent.focus) {
+        //                     if (RangeUtil.checkElementFullInRange(commentRangeStatus.range, element)) {
+        //                         commentRangePaintColor = '#fa8c16';
+        //                     }
+        //                 }
+        //             }
+        //             const overlayRect = { x: currPosition.x, y: currPosition.y, width: rw, height: rh };
+        //             const paraLinePos = ElementUtil.getParaLinePos(renderObject, {
+        //                 x: currPosition.x,
+        //                 y: currPosition.y
+        //             });
+        //             this.renderCtx.overlaysContext.fillRect(overlayRect.x, paraLinePos.y, overlayRect.width, paraLinePos.height, commentRangePaintColor);
+        //         }
+        //     }
+        // }
     }
     /**
      * 触发页面绘制结束事件
      */
     invokedPagePaintCompleted(renderObject, parent) {
-        const { x: rx, y: ry, width: rw, height: rh } = renderObject.rect;
-        const currPosition = { x: rx + parent.x, y: ry + parent.y };
-        renderObject.pagePaintCompleted({ render: this.renderCtx, position: currPosition, docCtx: this.docCtx });
-        if (renderObject instanceof BranchRenderObject) {
-            for (let i = 0; i < renderObject.length; i++) {
-                this.invokedPagePaintCompleted(renderObject.getChild(i), currPosition);
-            }
-        }
+        // const { x: rx, y: ry, width: rw, height: rh } = renderObject.rect;
+        // const currPosition = { x: rx + parent.x, y: ry + parent.y };
+        // renderObject.pagePaintCompleted({ render: this.renderCtx, position: currPosition, docCtx: this.docCtx })
+        // if (renderObject instanceof BranchRenderObject) {
+        //     for (let i = 0; i < renderObject.length; i++) {
+        //         this.invokedPagePaintCompleted(renderObject.getChild(i), currPosition);
+        //     }
+        // }
     }
     static drawPage(renderCtx, docCtx, renderObject, parent) {
         const { x: rx, y: ry } = renderObject.rect;
@@ -13344,266 +13099,60 @@ class ElementPaint {
                     this.drawPage(renderCtx, docCtx, child, currPosition);
                 }
             });
-            const renderData = {
-                position: currPosition,
-                nextRender: nextRenderFn,
-                render: renderCtx,
-                docCtx
-            };
-            renderObject.render(renderData);
+            //renderObject.render(renderData);
             nextRenderFn();
         }
-        else if (renderObject instanceof LeafRenderObject) {
-            const renderData = {
-                position: currPosition,
-                nextRender: () => { },
-                render: renderCtx,
-                docCtx: docCtx
-            };
-            renderObject.render(renderData);
-        }
     }
 }
 
-/**
- * 用于处理选区拖蓝
- */
-class SelectionOverlays {
-    selectionState;
-    selectionRange;
-    selectedSets = new Map();
-    constructor(selectionState) {
-        this.selectionState = selectionState;
-    }
-    getSelectionTreeData() {
-        let { ancestorCommonControl, startControl, startOffset, endControl, endOffset, collapsed } = this.selectionState;
-        this.selectedSets.clear();
-        if (this.selectionRange) {
-            this.selectionRange.selectedChildren.length = 0;
-        }
-        this.selectionRange = null;
-        if (!startControl || !endControl || !ancestorCommonControl) {
-            //this.selectionRange?.selectedChildren.length=0;
-            this.selectionState.selectedRange = null;
-            return;
-        }
-        if (collapsed) {
-            const commonRange = RangeUtil.getSelctionRange(startControl, startOffset, endControl, endOffset, ancestorCommonControl);
-            this.selectionState.selectedRange = commonRange;
-            this.selectedSets.clear();
-            return;
-        }
-        const fixStartElement = this.fixStartSelectionElement(startControl, startOffset, ancestorCommonControl);
-        startControl = fixStartElement.element;
-        startOffset = fixStartElement.offset;
-        const fixEndElement = this.fixEndSelectionElement(endControl, endOffset, ancestorCommonControl);
-        endControl = fixEndElement.element;
-        endOffset = fixEndElement.offset;
-        const commonRange = RangeUtil.getSelctionRange(startControl, startOffset, endControl, endOffset, ancestorCommonControl);
-        //console.log(commonRange);
-        this.selectionRange = commonRange;
-        this.convertSelectRangeToSet();
-        this.selectionState.selectedRange = commonRange;
-    }
-    convertSelectRangeToSet() {
-        this.selectedSets.clear();
-        if (this.selectionRange) {
-            SelectionOverlays.addToSets(this.selectionRange, this.selectedSets);
-        }
+class DocumentEvalFunc {
+    docCtx;
+    constructor(docCtx) {
+        this.docCtx = docCtx;
     }
-    static addToSets(range, set) {
-        set.set(range.target, range);
-        for (let i = 0; i < range.selectedChildren.length; i++) {
-            //单元格全部选中效果，单元格整个拖蓝即可
-            if (range.isFullSelected && range.target.type === 'tbc') {
-                continue;
+    scriptsFunc;
+    /**
+     * 实例化动态脚本
+     */
+    initScripts(scripts) {
+        this.destroyScripts();
+        if (scripts) {
+            try {
+                const func = new Function("docCtx", scripts);
+                this.scriptsFunc = func(this.docCtx);
+            }
+            catch (e) {
+                console.error("自定义标本解析错误", e);
             }
-            this.addToSets(range.selectedChildren[i], set);
         }
+        // const func = (docCtx: DocumentContext) => {
+        //     const sexELe = docCtx.getControlById('NqoYI')
+        //     const dyEle = docCtx.getControlById('gTuBI');
+        //     return () => {
+        //         if (sexELe && dyEle) {
+        //             const sexValue = sexELe.getValue();
+        //             const dyValue = sexValue === '1' ? '男的吗' : sexValue === '2' ? '女的吗' : '难道是人妖吗';
+        //             dyEle.setValue(dyValue);
+        //         }
+        //     };
+        // };
     }
     /**
-     * 添加到批注集合
-     * @param range
-     * @param set
+     * 销毁动态脚本实例
      */
-    static addToCommentSets(range, set) {
-        set.set(range.target, range);
-        for (let i = 0; i < range.selectedChildren.length; i++) {
-            this.addToCommentSets(range.selectedChildren[i], set);
+    destroyScripts() {
+        if (this.scriptsFunc) {
+            this.scriptsFunc = null;
         }
     }
     /**
-     * 修正开始选区内容
-     * 1.如果当前选区开始于表格内容，结束选区位于表格外，则需要开始选区内容重定位到单元格第一个元素
-     */
-    fixStartSelectionElement(element, offset, ancestorCommonControl) {
-        if (!(ancestorCommonControl instanceof TableElement)) {
-            const lookupParentCell = ElementUtil.getParentByType(element, TableCellElement);
-            if (lookupParentCell) {
-                if (!lookupParentCell.parent || !lookupParentCell.parent.parent) ;
-                const lookupParentTbIndex = ElementUtil.getControlIndex(lookupParentCell.parent.parent);
-                const ancestorCommonControlIndex = ElementUtil.getControlIndex(ancestorCommonControl);
-                if (ancestorCommonControlIndex < lookupParentTbIndex) {
-                    const rowFirstLeafElement = ElementUtil.getFirstLeafElement(lookupParentCell.parent);
-                    if (!rowFirstLeafElement) {
-                        throw new Error('当前元素处于表格内元素，未能定位到当前单元格首个元素');
-                    }
-                    return {
-                        element: rowFirstLeafElement,
-                        offset: 0
-                    };
-                }
-            }
-        }
-        return { element, offset };
-    }
-    /**
-     * 修正开始选区内容
-     * 1.如果当前选区开始于表格内容，结束选区位于表格外，则需要开始选区内容重定位到单元格第一个元素
-     */
-    fixEndSelectionElement(element, offset, ancestorCommonControl) {
-        if (!(ancestorCommonControl instanceof TableElement)) {
-            const lookupParentCell = ElementUtil.getParentByType(element, TableCellElement);
-            if (lookupParentCell) {
-                const lookupParentTbIndex = ElementUtil.getControlIndex(lookupParentCell.parent.parent);
-                const ancestorCommonControlIndex = ElementUtil.getControlIndex(ancestorCommonControl);
-                if (ancestorCommonControlIndex < lookupParentTbIndex) {
-                    const rowLastLeafElement = ElementUtil.getLastLeafElement(lookupParentCell.parent);
-                    if (!rowLastLeafElement) {
-                        ElementUtil.getLastLeafElement(lookupParentCell.parent);
-                        throw new Error('当前元素处于表格内元素，未能定位到当前单元格首个元素');
-                    }
-                    return {
-                        element: rowLastLeafElement,
-                        offset: 1
-                    };
-                }
-            }
-        }
-        return { element, offset };
-    }
-}
-
-class DocumentEvalFunc {
-    docCtx;
-    constructor(docCtx) {
-        this.docCtx = docCtx;
-    }
-    scriptsFunc;
-    /**
-     * 实例化动态脚本
-     */
-    initScripts(scripts) {
-        this.destroyScripts();
-        if (scripts) {
-            try {
-                const func = new Function("docCtx", scripts);
-                this.scriptsFunc = func(this.docCtx);
-            }
-            catch (e) {
-                console.error("自定义标本解析错误", e);
-            }
-        }
-        // const func = (docCtx: DocumentContext) => {
-        //     const sexELe = docCtx.getControlById('NqoYI')
-        //     const dyEle = docCtx.getControlById('gTuBI');
-        //     return () => {
-        //         if (sexELe && dyEle) {
-        //             const sexValue = sexELe.getValue();
-        //             const dyValue = sexValue === '1' ? '男的吗' : sexValue === '2' ? '女的吗' : '难道是人妖吗';
-        //             dyEle.setValue(dyValue);
-        //         }
-        //     };
-        // };
-    }
-    /**
-     * 销毁动态脚本实例
-     */
-    destroyScripts() {
-        if (this.scriptsFunc) {
-            this.scriptsFunc = null;
-        }
-    }
-    /**
-     * 触发动态脚本
+     * 触发动态脚本
      */
     invokedScripts() {
         this.scriptsFunc?.();
     }
 }
 
-class DocumentImagesBaseLoader {
-    images = [];
-    clear() {
-        this.images.length = 0;
-    }
-    loadImage(src, onCallback) {
-        if (!src) {
-            return;
-        }
-        //已经存在的资源不需要重新加载
-        let matchItem = this.images.find(item => item.src === src);
-        if (matchItem) {
-            if (matchItem.loadStatus === 'no') {
-                matchItem.cbs.push(onCallback);
-            }
-            else {
-                onCallback(matchItem.loadStatus);
-            }
-            return;
-        }
-        const task = this.createRequestImage(src);
-        const imgItem = {
-            ele: undefined,
-            src,
-            cbs: [onCallback],
-            loadStatus: 'no',
-            task
-        };
-        this.images.push(imgItem);
-        // if (this.viewOptions.resourceMode === 'immediate') {
-        //     ele.onload = (e) => { this.invokeImgLoad(src, 'completed'); };
-        //     ele.onerror = (e) => { this.invokeImgLoad(src, 'error'); };
-        // }
-    }
-    invokeImgLoad(src, status, data) {
-        const img = this.images.find(item => item.src === src);
-        if (img) {
-            img.loadStatus = status;
-            img.cbs.forEach(cb => cb(status));
-            img.ele = data;
-        }
-    }
-    getLoadTasks() {
-        return this.images.map(item => item.task);
-    }
-    getImage(src) {
-        const img = this.images.find(item => item.src === src);
-        return img?.ele;
-    }
-    /**
-     * 判断图片是否都已经加载完毕
-     * 用于打印时判断，如果当前图片没有加载完毕就打印，图片是打印不出来
-     * @returns
-     */
-    imagesLoadCompleted() {
-        if (this.images.length === 0) {
-            return true;
-        }
-        return this.images.every(item => ['completed', 'error'].includes(item.loadStatus));
-    }
-}
-class DocumentImagesLoader extends DocumentImagesBaseLoader {
-    createRequestImage(url) {
-        const ele = new Image();
-        ele.src = url;
-        return new Promise((r, i) => {
-            ele.onload = (e) => { this.invokeImgLoad(url, 'completed', ele); r(); };
-            ele.onerror = (e) => { this.invokeImgLoad(url, 'error', ele); r(); };
-        });
-    }
-}
-
 /**
  * 当前打开的文档的上下文信息，当前文档所有的属性设置都暴露在上下文中
  */
@@ -13616,7 +13165,7 @@ class EditorContext {
     //文档刷新的订阅事件
     //refSub!: Subscription;
     syncRefresh;
-    imageLoader;
+    //imageLoader: IImageLoader;
     dynamicFunc;
     docChange;
     clearPrevDocCb;
@@ -13626,7 +13175,7 @@ class EditorContext {
         this.selectionState = selectionState;
         this.viewOptions = viewOptions;
         this.dynamicFunc = new DocumentEvalFunc(this);
-        this.imageLoader = new DocumentImagesLoader();
+        //this.imageLoader = new DocumentImagesLoader();
         this.selectionState.onChangedEvent.subscribe(() => {
             this.syncRefresh?.();
         });
@@ -13667,7 +13216,7 @@ class EditorContext {
     }
     clear() {
         this.selectionState.clear();
-        this.imageLoader.clear();
+        //this.imageLoader.clear();
         this.dynamicFunc.destroyScripts();
         this.isDirty = false;
     }
@@ -13709,7 +13258,7 @@ class EditorContext {
         this.document.destroy();
         this.clearPrevDocCb?.();
         //this.ele_types_handlers.length = 0;
-        this.imageLoader.clear();
+        //this.imageLoader.clear();
         this._document = null;
     }
     /**
@@ -13744,6 +13293,17 @@ class EditorContext {
         return this._document.modifyFlag === exports.ModifyFlag.None ? 'appearance' : 'content';
     }
 }
+// export interface IImageLoader {
+//     clear(): void;
+//
+//     loadImage(src: string, onCallback: (status: ImgLoadStatus) => void): void;
+//
+//     getImage(src: string): HTMLImageElement | undefined;
+//
+//     imagesLoadCompleted(): boolean;
+//
+//     getLoadTasks(): Array<Promise<void>>;
+// }
 /**
  * 文档上下文
  */
@@ -14637,13 +14197,139 @@ class ParagraphMeasure {
     }
 }
 
+/**
+ * 用于处理选区拖蓝
+ */
+class SelectionOverlays {
+    selectionState;
+    selectionRange;
+    //选区对象集合
+    selectionEleSets = new Map();
+    //批注对象集合
+    commRangeSets = new Map();
+    constructor(selectionState) {
+        this.selectionState = selectionState;
+    }
+    getSelectionTreeData() {
+        let { ancestorCommonControl, startControl, startOffset, endControl, endOffset, collapsed } = this.selectionState;
+        this.selectionEleSets.clear();
+        if (this.selectionRange) {
+            this.selectionRange.selectedChildren.length = 0;
+        }
+        this.selectionRange = null;
+        if (!startControl || !endControl || !ancestorCommonControl) {
+            //this.selectionRange?.selectedChildren.length=0;
+            this.selectionState.selectedRange = null;
+            return;
+        }
+        if (collapsed) {
+            const commonRange = RangeUtil.getSectionRange(startControl, startOffset, endControl, endOffset, ancestorCommonControl);
+            this.selectionState.selectedRange = commonRange;
+            this.selectionEleSets.clear();
+            return;
+        }
+        const fixStartElement = this.fixStartSelectionElement(startControl, startOffset, ancestorCommonControl);
+        startControl = fixStartElement.element;
+        startOffset = fixStartElement.offset;
+        const fixEndElement = this.fixEndSelectionElement(endControl, endOffset, ancestorCommonControl);
+        endControl = fixEndElement.element;
+        endOffset = fixEndElement.offset;
+        const commonRange = RangeUtil.getSectionRange(startControl, startOffset, endControl, endOffset, ancestorCommonControl);
+        //console.log(commonRange);
+        this.selectionRange = commonRange;
+        this.convertSelectRangeToSet();
+        this.selectionState.selectedRange = commonRange;
+    }
+    convertSelectRangeToSet() {
+        this.selectionEleSets.clear();
+        if (this.selectionRange) {
+            SelectionOverlays.addToSets(this.selectionRange, this.selectionEleSets);
+        }
+    }
+    static addToSets(range, set) {
+        set.set(range.target, range);
+        for (let i = 0; i < range.selectedChildren.length; i++) {
+            //单元格全部选中效果，单元格整个拖蓝即可
+            if (range.isFullSelected && range.target.type === 'tbc') {
+                continue;
+            }
+            this.addToSets(range.selectedChildren[i], set);
+        }
+    }
+    /**
+     * 添加到批注集合
+     * @param range
+     * @param set
+     * @param rangeColor 用以显示批注区间的颜色
+     */
+    static addToCommentSets(range, set, rangeColor) {
+        range['rangeColor'] = rangeColor;
+        set.set(range.target, range);
+        for (let i = 0; i < range.selectedChildren.length; i++) {
+            this.addToCommentSets(range.selectedChildren[i], set, rangeColor);
+        }
+    }
+    /**
+     * 修正开始选区内容
+     * 1.如果当前选区开始于表格内容，结束选区位于表格外，则需要开始选区内容重定位到单元格第一个元素
+     */
+    fixStartSelectionElement(element, offset, ancestorCommonControl) {
+        if (!(ancestorCommonControl instanceof TableElement)) {
+            const lookupParentCell = ElementUtil.getParentByType(element, TableCellElement);
+            if (lookupParentCell) {
+                if (!lookupParentCell.parent || !lookupParentCell.parent.parent) ;
+                const lookupParentTbIndex = ElementUtil.getControlIndex(lookupParentCell.parent.parent);
+                const ancestorCommonControlIndex = ElementUtil.getControlIndex(ancestorCommonControl);
+                if (ancestorCommonControlIndex < lookupParentTbIndex) {
+                    const rowFirstLeafElement = ElementUtil.getFirstLeafElement(lookupParentCell.parent);
+                    if (!rowFirstLeafElement) {
+                        throw new Error('当前元素处于表格内元素，未能定位到当前单元格首个元素');
+                    }
+                    return {
+                        element: rowFirstLeafElement,
+                        offset: 0
+                    };
+                }
+            }
+        }
+        return { element, offset };
+    }
+    /**
+     * 修正开始选区内容
+     * 1.如果当前选区开始于表格内容，结束选区位于表格外，则需要开始选区内容重定位到单元格第一个元素
+     */
+    fixEndSelectionElement(element, offset, ancestorCommonControl) {
+        if (!(ancestorCommonControl instanceof TableElement)) {
+            const lookupParentCell = ElementUtil.getParentByType(element, TableCellElement);
+            if (lookupParentCell) {
+                const lookupParentTbIndex = ElementUtil.getControlIndex(lookupParentCell.parent.parent);
+                const ancestorCommonControlIndex = ElementUtil.getControlIndex(ancestorCommonControl);
+                if (ancestorCommonControlIndex < lookupParentTbIndex) {
+                    const rowLastLeafElement = ElementUtil.getLastLeafElement(lookupParentCell.parent);
+                    if (!rowLastLeafElement) {
+                        ElementUtil.getLastLeafElement(lookupParentCell.parent);
+                        throw new Error('当前元素处于表格内元素，未能定位到当前单元格首个元素');
+                    }
+                    return {
+                        element: rowLastLeafElement,
+                        offset: 1
+                    };
+                }
+            }
+        }
+        return { element, offset };
+    }
+}
+
 class DocumentArrange {
     docCtx;
     renderCtx;
+    seo;
     options;
-    constructor(docCtx, renderCtx) {
+    constructor(docCtx, renderCtx, seo) {
         this.docCtx = docCtx;
         this.renderCtx = renderCtx;
+        this.seo = seo;
         this.options = this.docCtx.viewOptions;
     }
     /**
@@ -14665,24 +14351,25 @@ class DocumentArrange {
                 parser: new DynamicContextParser(doc, this.docCtx.selectionState),
                 createParaFn: () => this.createDefaultPara()
             };
-            doc.commentsContainerElement.clearMarkItems();
+            doc.clearMarkItems();
             this.clearPaintCache(doc, data);
-            this.docCtx.viewOptions.showReviewWindow = this.docCtx.document.commentsContainerElement.markPairs.length > 0;
+            //this.docCtx.viewOptions.showReviewWindow = this.docCtx.document.commentsContainerElement.markPairs.length > 0;
             const docRenders = this.arrangeDoc();
             this.setMeasureCompletedModifyFlag(doc);
             this.cacheDocRenders(docRenders);
+            this.generateCommRange();
             return docRenders;
         });
     }
-    commentsRender;
+    //commentsRender!: CommsContainerRenderObject;
     arrangeDoc() {
         const doc = this.docCtx.document;
         const docRender = doc.createRenderObject();
         const innerRect = docRender.getInnerRect();
         const headerRender = this.measureControl(doc.headerElement, innerRect.width);
         const footerRender = this.measureControl(doc.footerElement, innerRect.width);
-        const commentsRender = this.measureControl(doc.commentsContainerElement, this.options.reviewWindowWidth);
-        this.commentsRender = commentsRender;
+        //const commentsRender = this.measureControl(doc.commentsContainerElement, this.options.reviewWindowWidth) as CommsContainerRenderObject;
+        //this.commentsRender = commentsRender;
         const { headerLine, footerLine } = docRender;
         let bodyMarginTop = headerLine + headerRender.rect.height + 6;
         let bodyMarginBottom = footerLine + footerRender.rect.height;
@@ -14777,15 +14464,15 @@ class DocumentArrange {
             cloneFooterRender.rect.x = limitRect.x;
             cloneFooterRender.rect.y = documentRender.rect.height - bodyMarginBottom;
             currColumn === 0 && documentRender.addChild(cloneFooterRender);
-            //审阅模式，添加审阅窗口
-            if (this.options.showReviewWindow && commentsRender) {
-                const commentsContainer = this.createRenderObject(commentsRender.element);
-                commentsContainer.padding.top = bodyMarginTop;
-                commentsContainer.rect.height = documentRender.rect.height;
-                documentRender.addChild(commentsContainer);
-                commentsContainer.rect.x = documentRender.rect.x + documentRender.rect.width;
-                documentRender.rect.width += this.options.reviewWindowWidth;
-            }
+            // //审阅模式，添加审阅窗口
+            // if (this.options.showReviewWindow && commentsRender) {
+            //     const commentsContainer = this.createRenderObject(commentsRender.element) as CommsContainerRenderObject;
+            //     commentsContainer.padding.top = bodyMarginTop;
+            //     commentsContainer.rect.height = documentRender.rect.height;
+            //     documentRender.addChild(commentsContainer);
+            //     commentsContainer.rect.x = documentRender.rect.x + documentRender.rect.width;
+            //     documentRender.rect.width += this.options.reviewWindowWidth;
+            // }
             currColumn++;
             if (currColumn === docColumns) {
                 currColumn = 0;
@@ -14813,8 +14500,7 @@ class DocumentArrange {
         }
         if (element instanceof BlockContentElement) {
             const pRange = new ParagraphMeasure(this.options, this.renderCtx);
-            const innerLineRects = pRange.measureParagraph(element, maxWidth);
-            return innerLineRects;
+            return pRange.measureParagraph(element, maxWidth);
         }
         else if (element instanceof BlockContainerElement) {
             const renders = [];
@@ -14952,7 +14638,6 @@ class DocumentArrange {
      * 切割渲染元素
      * @param tbRender 被切割的对象
      * @param limitHeight
-     * @param addFunc
      * @returns
      */
     cutTable(tbRender, limitHeight) {
@@ -14980,8 +14665,13 @@ class DocumentArrange {
         let currRow = rows[j];
         const cutRows = [];
         while (currRow) {
+            const minHeight = currRow.element.props.minHeight;
             const rowContentHeight = this.getBlockLineHeight(currRow);
             if (rowContentHeight + sumHeight > limitHeight) {
+                //行存在最小高度，且当前行内容的高度小于最小高度，且当前行跨页的情况下，不截断该行
+                if (minHeight > 0 && minHeight > rowContentHeight) {
+                    break;
+                }
                 //限制的外框尺寸
                 const availHeight = limitHeight - sumHeight;
                 const limitRenderInnerHeight = ElementUtil.innerRectMaxHeight(tbRender, availHeight);
@@ -15222,7 +14912,7 @@ class DocumentArrange {
     }
     identifyComment(ele) {
         if (ele instanceof CommentElement) {
-            this.docCtx.document.commentsContainerElement.identifyCommMark(ele);
+            this.docCtx.document.identifyCommMark(ele);
         }
     }
     cacheDoc;
@@ -15233,6 +14923,22 @@ class DocumentArrange {
         });
         this.cacheDoc = null;
     }
+    /**
+     * 生成批注区间信息
+     * @param renderTree
+     */
+    generateCommRange() {
+        this.seo.commRangeSets.clear();
+        const commMarks = this.docCtx.document.markPairs;
+        for (let i = 0; i < commMarks.length; i++) {
+            const commMark = commMarks[i];
+            if (commMark.start && commMark.end) {
+                const ancestor = DocumentSelection.getAncestorCommonControl(commMark.start, commMark.end);
+                const range = RangeUtil.getSectionRange(commMark.start, 0, commMark.end, 1, ancestor);
+                SelectionOverlays.addToCommentSets(range, this.seo.commRangeSets, commMark.start.color);
+            }
+        }
+    }
     cacheRenders(renderTree) {
         if (renderTree.element) {
             renderTree.element.paintRenders.push(renderTree);
@@ -15705,644 +15411,157 @@ class ElementMeasure {
             if (this.containPostPunctuation(render.textMeasures[i + 1]?.char)) {
                 i--;
             }
-            else {
-                i++;
-            }
-        }
-        else {
-            if (i > 1 && this.containPostPunctuation(render.textMeasures[i]?.char)) {
-                i--;
-            }
-        }
-        return i;
-    }
-    /**
-     * 是否包含后置标点
-     * @param str
-     * @returns
-     */
-    containPostPunctuation(str) {
-        return '!),.:;?]}¨·ˇˉ―‖’”…∶、。〃々〉》」』】〕〗！＂＇），．：；？］｀｜｝～￠'.indexOf(str) > -1;
-    }
-    //是否包含前置标点
-    containLeadingPunctuation(str) {
-        return '‘“〈《「『【〔〖（［｛￡'.indexOf(str) > -1;
-    }
-    /**
-     * 文本开头是否包含后置标点
-     * @param render
-     * @returns
-     */
-    containerStartSymbolInTextStart(render) {
-        //return false;
-        if (render instanceof TextGroupRenderObject) {
-            if (render.textMeasures.length > 0) {
-                return this.containPostPunctuation(render.textMeasures[0].char);
-            }
-        }
-        return false;
-    }
-    cutFillNullRender(render, limitWidth) {
-        if (limitWidth === 0) {
-            return { firstItem: null, lastItem: null };
-        }
-        if (render.rect.width > limitWidth) {
-            const cutRender = new FillNullSpaceRenderObject();
-            cutRender.rect.width = limitWidth;
-            cutRender.rect.height = render.rect.height;
-            render.rect.width = render.rect.width - limitWidth;
-            return { firstItem: cutRender, lastItem: render };
-        }
-        else {
-            return { firstItem: render, lastItem: null };
-        }
-    }
-    /**
-     * 行内编组元素超出行内可用空间，需要根据剩余空间长度进行截断
-     */
-    cutInlineGroupRenderItem(render, limitWidth, emptyLine, inCloseBody) {
-        const cutRender = render.element.createRenderObject({ options: this.options, renderCtx: this.renderCtx });
-        let x = 0;
-        let br = false;
-        const items = [...render.getItems()];
-        for (let i = 0; i < items.length; i++) {
-            const child = items[i];
-            if (child instanceof LeafRenderObject) {
-                if (x + child.rect.width > limitWidth) {
-                    const { firstItem, lastItem, br: childBr } = this.cutRenderItem(child, items[i + 1], limitWidth - x, emptyLine && cutRender.length === 0, inCloseBody);
-                    if (firstItem) {
-                        cutRender.addChild(firstItem);
-                    }
-                    br = childBr || br;
-                    break;
-                }
-                else {
-                    render.removeChild(child);
-                    cutRender.addChild(child);
-                }
-                //软换行符
-                if (child.element && child.element.type === 'br') {
-                    br = true;
-                    break;
-                }
-            }
-            else if (child instanceof InlineGroupRenderObject) {
-                if (x + child.rect.width > limitWidth) {
-                    const { firstItem, br: childBr } = this.cutInlineGroupRenderItem(child, limitWidth - x, emptyLine && cutRender.length === 0, inCloseBody);
-                    if (firstItem) {
-                        cutRender.addChild(firstItem);
-                    }
-                    br = childBr || br;
-                    break;
-                }
-                else {
-                    render.removeChild(child);
-                    cutRender.addChild(child);
-                }
-            }
-            x += child.rect.width;
-        }
-        if (!cutRender.length) {
-            return { firstItem: null, lastItem: null };
-        }
-        ElementUtil.remeasureInlineGroupRender(cutRender);
-        ElementUtil.remeasureInlineGroupRender(render);
-        return { firstItem: cutRender, lastItem: render.length ? render : null, br };
-    }
-    /**
-     * 修改测量完毕后的元素状态
-     * @param ele
-     */
-    setMeasureCompletedModifyFlag(ele) {
-        if (ele instanceof BranchElement) {
-            for (let i = 0; i < ele.length; i++) {
-                this.setMeasureCompletedModifyFlag(ele.getChild(i));
-            }
-        }
-        ele.modifyFlag = exports.ModifyFlag.None;
-    }
-    clearPaintCache(ele, data) {
-        ele.beginMeasure(data);
-        if (ele instanceof BranchElement) {
-            for (let i = 0; i < ele.length; i++) {
-                this.clearPaintCache(ele.getChild(i), data);
-            }
-        }
-    }
-    endMeasures(ele) {
-        if (ele instanceof BranchElement) {
-            for (let i = 0; i < ele.length; i++) {
-                this.endMeasures(ele.getChild(i));
-            }
-        }
-    }
-}
-
-class ElementRenderCut {
-    options;
-    renderContext;
-    constructor(options, renderContext) {
-        this.options = options;
-        this.renderContext = renderContext;
-    }
-    cutPage(documentRender, documentElement) {
-        if (this.options.fullPageView) {
-            return this.getFullViewDocRender(documentRender, documentElement);
-        }
-        const headerRender = documentRender.getChild(0);
-        const bodyRender = documentRender.getChild(1).clone();
-        const footerRender = documentRender.getChild(2);
-        const commentsRender = documentRender.getChild(3);
-        const { headerLine, footerLine } = documentRender;
-        let bodyMarginTop = headerLine + headerRender.rect.height + 6;
-        let bodyMarginBottom = footerLine + footerRender.rect.height;
-        const { top: bodyTop, bottom: bodyBottom } = documentRender.padding;
-        bodyMarginTop = bodyMarginTop > bodyTop ? bodyMarginTop : bodyTop;
-        bodyMarginBottom = bodyMarginBottom > bodyBottom ? bodyMarginBottom : bodyBottom;
-        documentRender.padding.top = bodyMarginTop;
-        documentRender.padding.bottom = bodyMarginBottom;
-        const bodyLimitRect = this.getDocInnerRect(documentRender);
-        const bodyArray = [];
-        let { emptyBody: pageBodyRender, innerRect: bodyInnerLimitRect } = this.createEmptyBodyRender(bodyRender, bodyLimitRect);
-        bodyArray.push(pageBodyRender);
-        const createBodyHolder = () => {
-            const { emptyBody, innerRect } = this.createEmptyBodyRender(bodyRender, bodyLimitRect);
-            pageBodyRender = emptyBody;
-            bodyInnerLimitRect = innerRect;
-            bodyArray.push(pageBodyRender);
-        };
-        const appendToBody = (item) => {
-            item.rect.y = bodyInnerLimitRect.height + item.margin.top;
-            pageBodyRender.addChild(item);
-            bodyInnerLimitRect.height += item.rect.height + item.margin.top + item.margin.bottom;
-            //上一个元素的bottom-margin
-            //bodyInnerLimitRect.prevMargin = item.margin.bottom;
-            ElementUtil.updateRenderHeightByInnerRect(pageBodyRender, bodyInnerLimitRect);
-        };
-        let i = 0;
-        let cloneBlockContentRender = bodyRender.getChild(i);
-        while (cloneBlockContentRender) {
-            if (bodyInnerLimitRect.maxHeight - bodyInnerLimitRect.height - cloneBlockContentRender.rect.height - cloneBlockContentRender.margin.bottom - cloneBlockContentRender.margin.top < 0) {
-                //限制的外框尺寸
-                const bodyAvailHeight = bodyInnerLimitRect.maxHeight - bodyInnerLimitRect.height - cloneBlockContentRender.margin.bottom - cloneBlockContentRender.margin.top;
-                //限制的内框尺寸
-                const limitRenderInnterHeight = ElementUtil.innerRectMaxHeight(cloneBlockContentRender, bodyAvailHeight);
-                const cutRenderObject = this.cutRenderItem(cloneBlockContentRender, limitRenderInnterHeight);
-                //至少有一个块级行元素被切割出来
-                if (cutRenderObject) {
-                    appendToBody(cutRenderObject);
-                }
-                createBodyHolder();
-            }
-            else {
-                appendToBody(cloneBlockContentRender);
-                if (++i < bodyRender.length) {
-                    cloneBlockContentRender = bodyRender.getChild(i);
-                }
-                else {
-                    cloneBlockContentRender = null;
-                }
-            }
-        }
-        const docPages = [];
-        let pageY = this.options.docSpace;
-        for (let i = 0; i < bodyArray.length; i++) {
-            const body = bodyArray[i];
-            const documentRender = documentElement.createRenderObject();
-            docPages.push(documentRender);
-            documentRender.rect.y = pageY;
-            const limitRect = documentRender.getInnerRect();
-            const cloneHeaderRender = headerRender.clone();
-            cloneHeaderRender.rect.x = limitRect.x;
-            cloneHeaderRender.rect.y = headerLine;
-            documentRender.addChild(cloneHeaderRender);
-            body.rect.x = limitRect.x;
-            body.rect.y = bodyMarginTop;
-            body.rect.height = bodyInnerLimitRect.maxHeight;
-            documentRender.addChild(body);
-            pageY += documentRender.rect.height + this.options.docSpace;
-            const cloneFooterRender = footerRender.clone();
-            cloneFooterRender.rect.x = limitRect.x;
-            cloneFooterRender.rect.y = documentRender.rect.height - bodyMarginBottom;
-            documentRender.addChild(cloneFooterRender);
-            //审阅模式，添加审阅窗口
-            if (this.options.showReviewWindow && commentsRender) {
-                const commentsContainer = commentsRender.element.createRenderObject({
-                    options: this.options,
-                    renderCtx: this.renderContext
-                });
-                commentsContainer.padding.top = bodyMarginTop;
-                commentsContainer.rect.height = documentRender.rect.height;
-                documentRender.addChild(commentsContainer);
-                commentsContainer.rect.x = documentRender.rect.x + documentRender.rect.width;
-                documentRender.rect.width += this.options.reviewWindowWidth;
-            }
-        }
-        return docPages;
-    }
-    getDocInnerRect(documentRender) {
-        const render = documentRender.element.createRenderObject({
-            options: this.options,
-            renderCtx: this.renderContext
-        });
-        render.padding = documentRender.padding;
-        return render.getInnerRect();
-    }
-    getFullViewDocRender(documentRender, documentElement) {
-        const commentsRender = documentRender.getChild(3);
-        const commentsContainer = commentsRender.element.createRenderObject({
-            options: this.options,
-            renderCtx: this.renderContext
-        });
-        documentRender.rect.height -= commentsContainer.rect.height;
-        const bodyRender = documentRender.getChild(1);
-        if (this.options.showReviewWindow) {
-            documentRender.removeChild(commentsRender);
-            documentRender.addChild(commentsContainer);
-            commentsContainer.padding.top = bodyRender.rect.y;
-            commentsContainer.rect.height = documentRender.rect.height;
-            commentsContainer.rect.x = documentRender.rect.x + documentRender.rect.width;
-            documentRender.rect.width += this.options.reviewWindowWidth;
-        }
-        return [documentRender];
-    }
-    createEmptyBodyRender(bodyRender, limitRect) {
-        const pageBodyRender = bodyRender.element.createRenderObject({
-            options: this.options,
-            renderCtx: this.renderContext
-        });
-        pageBodyRender.rect.width = limitRect.width;
-        const bodyInnerLimitRect = pageBodyRender.getInnerRect();
-        if (this.options.fullPageView) {
-            bodyInnerLimitRect.height = Number.MAX_VALUE;
-        }
-        return {
-            emptyBody: pageBodyRender,
-            innerRect: { ...bodyInnerLimitRect, prevMargin: 0, maxWidth: limitRect.width, maxHeight: limitRect.height }
-        };
-    }
-    /**
-     * 切割渲染元素
-     * @param render 被切割的对象
-     * @param limitHeight
-     * @returns
-     */
-    cutRenderItem(render, limitHeight) {
-        if (render instanceof TableRowRenderObject) {
-            return this.cutRowRenderItem(render, limitHeight);
-        }
-        if (render instanceof TableRenderObject) {
-            return this.cutTable(render, limitHeight);
-        }
-        const cloneRender = render.element.createRenderObject({
-            options: this.options,
-            renderCtx: this.renderContext
-        });
-        cloneRender.setRenderWidth(render.rect.width);
-        if (render instanceof MuiltBlockLineRenderObject) {
-            let sumHeight = 0;
-            const children = [...render.getItems()];
-            let j = 0;
-            let blockLine = children[j];
-            while (blockLine) {
-                //sumHeight = ElementUtil.remeasure(cloneRender);
-                const calcBlockLineHeight = this.getBlockLineHeight(blockLine);
-                if (calcBlockLineHeight + sumHeight > limitHeight) {
-                    if (blockLine instanceof MuiltBlockLineRenderObject) {
-                        //限制的外框尺寸
-                        const availHeight = limitHeight - sumHeight;
-                        //限制的内框尺寸
-                        const limitRenderInnterHeight = ElementUtil.innerRectMaxHeight(render, availHeight);
-                        const cutRenderObject = this.cutRenderItem(blockLine, limitRenderInnterHeight);
-                        if (cutRenderObject) {
-                            cloneRender.addChild(cutRenderObject);
-                            sumHeight += cutRenderObject.rect.height;
-                            blockLine = children[++j];
-                            break;
-                        }
-                        else {
-                            break;
-                        }
-                    }
-                    else {
-                        break;
-                    }
-                }
-                else {
-                    render.removeChild(blockLine);
-                    cloneRender.addChild(blockLine);
-                    sumHeight += blockLine.rect.height;
-                    blockLine = children[++j];
-                }
-            }
-            ElementUtil.remeasure(cloneRender);
-            ElementUtil.remeasure(render);
-            if (cloneRender.length === 0) {
-                return null;
-            }
-            else {
-                return cloneRender;
-            }
-        }
-        else {
-            throw new Error('未实现');
-        }
-    }
-    /**
-     * 切割渲染元素
-     * @param tbRender 被切割的对象
-     * @param limitHeight
-     * @param addFunc
-     * @returns
-     */
-    cutTable(tbRender, limitHeight) {
-        const cloneTbRender = tbRender.element.createRenderObject();
-        cloneTbRender.setRenderWidth(tbRender.rect.width);
-        let sumHeight = 0;
-        const rows = [...tbRender.getItems()];
-        //获取跨页需要重复显示的行
-        const headerRows = this.getHeaderRows(tbRender);
-        //跨页头的高度
-        const headerHeight = headerRows.reduce((prev, curr) => prev + curr.rect.height, 0);
-        if (headerHeight > limitHeight) {
-            return null;
-        }
-        const copyHeaderRows = headerRows.map(item => item.clone());
-        //获取最后一个截断行,需要根据截断行判断最后一个截断的行位置
-        const cutOffRows = rows.filter(row => limitHeight >= row.rect.y && limitHeight <= row.rect.y + row.rect.height)
-            .map((row) => ({ rowIndex: row.element.getIndex(), row }))
-            .sort((first, second) => second.rowIndex - first.rowIndex);
-        if (cutOffRows.length === 0) {
-            throw new Error('无法获取截断行');
-        }
-        const joinRow = cutOffRows[0].row;
-        let j = 0;
-        let currRow = rows[j];
-        const cutRows = [];
-        while (currRow) {
-            const rowContentHeight = this.getBlockLineHeight(currRow);
-            if (rowContentHeight + sumHeight > limitHeight) {
-                if (currRow instanceof MuiltBlockLineRenderObject) {
-                    //限制的外框尺寸
-                    const availHeight = limitHeight - sumHeight;
-                    //限制的内框尺寸
-                    const limitRenderInnterHeight = ElementUtil.innerRectMaxHeight(tbRender, availHeight);
-                    const cutRow = this.cutRowRenderItem(currRow, limitRenderInnterHeight);
-                    if (cutRow) {
-                        cloneTbRender.addChild(cutRow);
-                        sumHeight += cutRow.rect.height;
-                        cutRows.push(currRow);
-                        if (currRow === joinRow) {
-                            break;
-                        }
-                        currRow = rows[++j];
-                    }
-                    else {
-                        break;
-                    }
-                }
-                else {
-                    break;
-                }
-            }
-            else {
-                tbRender.removeChild(currRow);
-                cloneTbRender.addChild(currRow);
-                sumHeight += currRow.rect.height;
-                currRow = rows[++j];
-            }
-        }
-        this.fixCutTable(tbRender, cutRows);
-        ElementUtil.remeasure(cloneTbRender);
-        //存在跨页需要重复显示的行头，则需要重新放置行头
-        if (copyHeaderRows.length) {
-            copyHeaderRows.forEach((r, i) => tbRender.insertChild(r, i));
-        }
-        ElementUtil.remeasure(tbRender);
-        if (cloneTbRender.length === 0) {
-            return null;
-        }
-        else {
-            return cloneTbRender;
-        }
-    }
-    cutRowRenderItem(render, limitHeight) {
-        if (render.element.props.minHeight > 0 && render.rect.height > limitHeight) {
-            return null;
-        }
-        const cloneRowRender = render.element.createRenderObject();
-        cloneRowRender.rect.width = render.rect.width;
-        render.remeasureState = true;
-        //cloneRowRender.rect.maxWidth = render.rect.height;
-        const cellRenders = [...render.getItems()];
-        const cutCellRenders = [];
-        for (let i = 0; i < cellRenders.length; i++) {
-            const cellRender = cellRenders[i];
-            this.markMergeRowRenderDirty(cellRender);
-            if (cellRender.rect.height > limitHeight) {
-                //限制的内框尺寸
-                const limitCellHeight = ElementUtil.innerRectMaxHeight(cellRender, limitHeight);
-                const cutCellRender = this.cutRenderItem(cellRender, limitCellHeight);
-                if (cutCellRender) {
-                    cutCellRenders.push(cutCellRender);
-                }
-                else {
-                    cutCellRenders.push(null);
-                }
-            }
-            else {
-                const cloneCellRender = cellRender;
-                render.removeChild(cellRender);
-                cutCellRenders.push(cloneCellRender);
-            }
-        }
-        ElementUtil.remeasure(render);
-        if (cutCellRenders.filter(item => item).length === 0) {
-            return null;
-        }
-        else {
-            //补齐单元格
-            for (let i = 0; i < cutCellRenders.length; i++) {
-                let cellRender = cutCellRenders[i];
-                if (!cellRender) {
-                    cellRender = cellRenders[i].element.createRenderObject({
-                        options: this.options,
-                        renderCtx: this.renderContext
-                    });
-                    cellRender.rect = ElementUtil.cloneRect(cellRenders[i].rect);
-                    ElementUtil.remeasure(cellRender);
-                }
-                cloneRowRender.addChild(cellRender);
-            }
-            ElementUtil.remeasure(cloneRowRender);
-            return cloneRowRender;
-        }
-    }
-    /**
-     * 标记合并单元格所在行需要重新计算
-     * @param cellRender
-     * @private
-     */
-    markMergeRowRenderDirty(cellRender) {
-        const cellEle = cellRender.element;
-        if (cellEle.props.vMerge !== 'restart') {
-            return;
-        }
-        const rowRender = cellRender.parent;
-        rowRender.element;
-        const tb = rowRender.parent;
-        const cellYPos = cellRender.rect.y;
-        for (let i = rowRender.getIndex() + 1; i < tb.length; i++) {
-            const nextRowRender = tb.getChild(i);
-            if (nextRowRender.rect.y <= cellYPos) {
-                nextRowRender.remeasureState = true;
-                nextRowRender.getItems().forEach(item => {
-                    this.markMergeRowRenderDirty(item);
-                });
-            }
-            else {
-                break;
-            }
-        }
-    }
-    /**
-     * 修复->已经截断的合并单元格要向下移动到合适的位置
-     * @param tbRender
-     * @param cutRows
-     * @returns
-     */
-    fixCutTable(tbRender, cutRows) {
-        if (!cutRows.length) {
-            return;
-        }
-        const tbEle = tbRender.element;
-        const belowMergeRows = new Set();
-        for (let i = 0; i < tbRender.length; i++) {
-            const row = tbRender.getChild(i);
-            const nextRow = tbRender.getChild(i + 1);
-            if (!nextRow) {
-                break;
-            }
-            if (!cutRows.some(item => item === row)) {
-                break;
-            }
-            if (row.length === tbEle.getColsCount()) {
-                break;
-            }
-            if (this.checkFullRow(row)) {
-                break;
-            }
-            for (let j = 0; j < row.length; j++) {
-                const cell = row.getChild(j);
-                const cellEle = cell.element;
-                const colIndex = cellEle.getIndex();
-                if (!this.existsCellRender(nextRow, colIndex)) {
-                    const insertColIndex = this.getRowInsertCellIndex(cell, nextRow);
-                    if (insertColIndex === -1) {
-                        this.getRowInsertCellIndex(cell, nextRow);
-                        throw new Error('未在紧挨下方找到可以放置的位置');
-                    }
-                    //row.removeChild(cell);
-                    nextRow.insertChild(cell, insertColIndex);
-                    belowMergeRows.add(row);
-                    ElementUtil.remeasure(nextRow);
-                }
+            else {
+                i++;
             }
         }
-        if (belowMergeRows.size) {
-            for (const row of belowMergeRows) {
-                tbRender.removeChild(row);
-                row.clear();
+        else {
+            if (i > 1 && this.containPostPunctuation(render.textMeasures[i]?.char)) {
+                i--;
             }
-            ElementUtil.remeasure(tbRender);
         }
+        return i;
     }
     /**
-     * 校验当前是否是一个完整的行，没有Null单元格，检查当前是否还需要向下合并
-     * @param row
+     * 是否包含后置标点
+     * @param str
+     * @returns
      */
-    checkFullRow(row) {
-        let x = 0;
-        for (let i = 0; i < row.length; i++) {
-            const cell = row.getChild(i);
-            if (cell.rect.x !== x) {
-                return false;
-            }
-            x += cell.rect.width;
-        }
-        return x === row.rect.width;
+    containPostPunctuation(str) {
+        return '!),.:;?]}¨·ˇˉ―‖’”…∶、。〃々〉》」』】〕〗！＂＇），．：；？］｀｜｝～￠'.indexOf(str) > -1;
     }
-    existsCellRender(rowRender, cellIndex) {
-        for (let i = 0; i < rowRender.length; i++) {
-            const cellRender = rowRender.getChild(i);
-            const cellEle = cellRender.element;
-            if (cellEle.getIndex() === cellIndex) {
-                return true;
+    //是否包含前置标点
+    containLeadingPunctuation(str) {
+        return '‘“〈《「『【〔〖（［｛￡'.indexOf(str) > -1;
+    }
+    /**
+     * 文本开头是否包含后置标点
+     * @param render
+     * @returns
+     */
+    containerStartSymbolInTextStart(render) {
+        //return false;
+        if (render instanceof TextGroupRenderObject) {
+            if (render.textMeasures.length > 0) {
+                return this.containPostPunctuation(render.textMeasures[0].char);
             }
         }
         return false;
     }
-    getBlockLineHeight(render) {
-        if (render instanceof TableRowRenderObject) {
-            let maxCellHeight = 0;
-            for (let i = 0; i < render.length; i++) {
-                const itemHeight = render.getChild(i).rect.height;
-                if (itemHeight > maxCellHeight) {
-                    maxCellHeight = itemHeight;
+    cutFillNullRender(render, limitWidth) {
+        if (limitWidth === 0) {
+            return { firstItem: null, lastItem: null };
+        }
+        if (render.rect.width > limitWidth) {
+            const cutRender = new FillNullSpaceRenderObject();
+            cutRender.rect.width = limitWidth;
+            cutRender.rect.height = render.rect.height;
+            render.rect.width = render.rect.width - limitWidth;
+            return { firstItem: cutRender, lastItem: render };
+        }
+        else {
+            return { firstItem: render, lastItem: null };
+        }
+    }
+    /**
+     * 行内编组元素超出行内可用空间，需要根据剩余空间长度进行截断
+     */
+    cutInlineGroupRenderItem(render, limitWidth, emptyLine, inCloseBody) {
+        const cutRender = render.element.createRenderObject({ options: this.options, renderCtx: this.renderCtx });
+        let x = 0;
+        let br = false;
+        const items = [...render.getItems()];
+        for (let i = 0; i < items.length; i++) {
+            const child = items[i];
+            if (child instanceof LeafRenderObject) {
+                if (x + child.rect.width > limitWidth) {
+                    const { firstItem, lastItem, br: childBr } = this.cutRenderItem(child, items[i + 1], limitWidth - x, emptyLine && cutRender.length === 0, inCloseBody);
+                    if (firstItem) {
+                        cutRender.addChild(firstItem);
+                    }
+                    br = childBr || br;
+                    break;
+                }
+                else {
+                    render.removeChild(child);
+                    cutRender.addChild(child);
+                }
+                //软换行符
+                if (child.element && child.element.type === 'br') {
+                    br = true;
+                    break;
                 }
             }
-            return maxCellHeight;
+            else if (child instanceof InlineGroupRenderObject) {
+                if (x + child.rect.width > limitWidth) {
+                    const { firstItem, br: childBr } = this.cutInlineGroupRenderItem(child, limitWidth - x, emptyLine && cutRender.length === 0, inCloseBody);
+                    if (firstItem) {
+                        cutRender.addChild(firstItem);
+                    }
+                    br = childBr || br;
+                    break;
+                }
+                else {
+                    render.removeChild(child);
+                    cutRender.addChild(child);
+                }
+            }
+            x += child.rect.width;
         }
-        return render.rect.height;
+        if (!cutRender.length) {
+            return { firstItem: null, lastItem: null };
+        }
+        ElementUtil.remeasureInlineGroupRender(cutRender);
+        ElementUtil.remeasureInlineGroupRender(render);
+        return { firstItem: cutRender, lastItem: render.length ? render : null, br };
     }
-    getRowInsertCellIndex(sourceCell, destRow) {
-        for (let i = 0; i < destRow.length; i++) {
-            const cell = destRow.getChild(i);
-            const rect = cell.rect;
-            if (sourceCell.rect.x < rect.x) {
-                return i;
+    /**
+     * 修改测量完毕后的元素状态
+     * @param ele
+     */
+    setMeasureCompletedModifyFlag(ele) {
+        if (ele instanceof BranchElement) {
+            for (let i = 0; i < ele.length; i++) {
+                this.setMeasureCompletedModifyFlag(ele.getChild(i));
             }
         }
-        const lastCell = destRow.getChild(destRow.length - 1);
-        if (sourceCell.rect.x >= lastCell.rect.x + lastCell.rect.width) {
-            return destRow.length;
-        }
-        return -1;
+        ele.modifyFlag = exports.ModifyFlag.None;
     }
-    getHeaderRows(tb) {
-        const rows = [];
-        for (let i = 0; i < tb.length; i++) {
-            const rowRender = tb.getChild(i);
-            const rowEle = rowRender.element;
-            if (rowEle.props.headerRow) {
-                rows.push(rowRender);
+    clearPaintCache(ele, data) {
+        ele.beginMeasure(data);
+        if (ele instanceof BranchElement) {
+            for (let i = 0; i < ele.length; i++) {
+                this.clearPaintCache(ele.getChild(i), data);
             }
-            else {
-                break;
+        }
+    }
+    endMeasures(ele) {
+        if (ele instanceof BranchElement) {
+            for (let i = 0; i < ele.length; i++) {
+                this.endMeasures(ele.getChild(i));
             }
         }
-        return rows;
     }
 }
 
 class DocumentPaint {
     renderContext;
     docCtx;
-    selectedSets;
+    seo;
     elementMeasure;
-    elementRenderCut;
+    //elementRenderCut: ElementRenderCut;
     elementPaint;
     docPages;
     docContainer;
     //commsContainer!: CommsContainerRenderObject;
     viewOptions;
-    constructor(renderContext, docCtx, selectedSets) {
+    constructor(renderContext, docCtx, seo) {
         this.renderContext = renderContext;
         this.docCtx = docCtx;
-        this.selectedSets = selectedSets;
+        this.seo = seo;
         this.viewOptions = this.docCtx.viewOptions;
         this.elementMeasure = new ElementMeasure(this.docCtx, this.renderContext);
-        this.elementRenderCut = new ElementRenderCut(this.viewOptions, this.renderContext);
+        //this.elementRenderCut = new ElementRenderCut(this.viewOptions, this.renderContext);
         this.elementPaint = new ElementPaint(this.renderContext, this.docCtx);
     }
     rePages() {
@@ -16361,7 +15580,7 @@ class DocumentPaint {
         // //console.timeEnd('排版计时');
         // //console.time('断页计时');
         // const docPages = this.elementRenderCut.cutPage(documentRender, this.docCtx.document);
-        const newMeasure = new DocumentArrange(this.docCtx, this.renderContext);
+        const newMeasure = new DocumentArrange(this.docCtx, this.renderContext, this.seo);
         const docPages = newMeasure.measureDoc();
         // this.commsContainer = newMeasure.commentsRender as CommsContainerRenderObject;
         // if (this.commsContainer) {
@@ -16458,7 +15677,7 @@ class DocumentPaint {
         }
     }
     refreshView() {
-        this.elementPaint.drawPages(this.docContainer, this.selectedSets);
+        this.elementPaint.drawPages(this.docContainer, this.seo.selectionEleSets);
     }
     getDocPages() {
         return this.docPages;
@@ -16473,31 +15692,31 @@ class DocumentPaint {
         if (!this.viewOptions.showReviewWindow) {
             return;
         }
-        const cce = this.docCtx.document.commentsContainerElement;
-        const set = new Map();
-        const commentRangeStatus = [];
-        for (let i = 0; i < cce.length; i++) {
-            const commContent = cce.getChild(i);
-            const commMarkPair = cce.markPairs.find(item => item.id === commContent.props.id);
-            if (commMarkPair) {
-                if (commMarkPair.start) {
-                    commContent.startMark = commMarkPair.start;
-                }
-                if (commMarkPair.end) {
-                    commContent.endMark = commMarkPair.end;
-                }
-            }
-            const { startMark, endMark, props: { id }, focus } = commContent;
-            const ancestorCommonControl = DocumentSelection.getAncestorCommonControl(startMark, endMark);
-            const commonRange = RangeUtil.getSelctionRange(startMark, 0, endMark, 1, ancestorCommonControl);
-            SelectionOverlays.addToCommentSets(commonRange, set);
-            commentRangeStatus.push({
-                commContent,
-                range: commonRange
-            });
-        }
-        cce.cacheRender.selectedSet = set;
-        cce.cacheRender.commentRangeStatus = commentRangeStatus;
+        // const cce = this.docCtx.document.commentsContainerElement;
+        // const set = new Map<Element, SelectionContentRange>();
+        // const commentRangeStatus: Array<CommentRangeStatus> = [];
+        // for (let i = 0; i < cce.length; i++) {
+        //     const commContent = cce.getChild(i) as CommContentElement;
+        //     const commMarkPair = cce.markPairs.find(item => item.id === commContent.props.id);
+        //     if (commMarkPair) {
+        //         if (commMarkPair.start) {
+        //             commContent.startMark = commMarkPair.start;
+        //         }
+        //         if (commMarkPair.end) {
+        //             commContent.endMark = commMarkPair.end;
+        //         }
+        //     }
+        //     const {startMark, endMark, props: {id}, focus} = commContent;
+        //     const ancestorCommonControl = DocumentSelection.getAncestorCommonControl(startMark, endMark);
+        //     const commonRange = RangeUtil.getSectionRange(startMark, 0, endMark, 1, ancestorCommonControl);
+        //     SelectionOverlays.addToCommentSets(commonRange, set);
+        //     commentRangeStatus.push({
+        //         commContent,
+        //         range: commonRange
+        //     })
+        // }
+        // (<CommsContainerRenderObject>cce.cacheRender).selectedSet = set;
+        // (<CommsContainerRenderObject>cce.cacheRender).commentRangeStatus = commentRangeStatus;
     }
 }
 
@@ -16536,8 +15755,6 @@ class PermanentTeethElement extends LeafElement {
     }
 }
 class PermanentTeethRenderObject extends LeafRenderObject {
-    render(e) {
-    }
     clone() {
         const clone = new PermanentTeethRenderObject(this.element);
         clone.rect = ElementUtil.cloneRect(this.rect);
@@ -16669,6 +15886,7 @@ class ElementReader {
         this.addFactory(PageBreakFactory);
         this.addFactory(TabFactory);
         this.addFactory(PermanentTeethFactory);
+        this.addFactory(SVGFactory);
         // this.registerReadFunc<TrackRunProps>('ins-run', (data) => {
         //     const props = new TrackRunProps(data.type);
         //     props.userId = data.userId;
@@ -16697,15 +15915,15 @@ class ElementReader {
         document.bodyElement = document.find((item) => item instanceof DocumentBodyElement);
         document.headerElement = document.find((item) => item instanceof DocumentHeaderElement);
         document.footerElement = document.find((item) => item instanceof DocumentFooterElement);
-        document.commentsContainerElement = document.find((item) => item instanceof CommsContainerElement);
-        if (!document.commentsContainerElement) {
-            document.commentsContainerElement = new CommsContainerElement();
-        }
+        // document.commentsContainerElement = document.find((item) => item instanceof CommsContainerElement) as CommsContainerElement;
+        // if (!document.commentsContainerElement) {
+        //     document.commentsContainerElement = new CommsContainerElement();
+        // }
         document.clearItems();
         document.addChild(document.headerElement);
         document.addChild(document.bodyElement);
         document.addChild(document.footerElement);
-        document.addChild(document.commentsContainerElement);
+        //document.addChild(document.commentsContainerElement);
         this.docCtx.document = document;
         document.viewOptions = this.docCtx.viewOptions;
         const width = Math.floor(document.props.width * this.docCtx.viewOptions.mmToPixelsRatio);
@@ -16713,7 +15931,7 @@ class ElementReader {
         this.docCtx.viewOptions.docPageSettings = new PageOptions(width, height, document.props.orient);
         //this.viewOptions.viewSettings.width = this.viewOptions.docPageSettings.width + 10;
     }
-    readElement(data) {
+    readElement(data, strictMode = false) {
         if (typeof data === 'string') {
             data = JSON.parse(data);
         }
@@ -16728,19 +15946,27 @@ class ElementReader {
                     const children = data.children || [];
                     for (const child of children) {
                         //element.addChild(this.readElement(child));
-                        childArr.push(this.readElement(child));
+                        const childEle = this.readElement(child);
+                        childEle && childArr.push(childEle);
                     }
                 }
                 factory.readCompleted(element, childArr);
                 return element;
             }
         }
-        throw new Error('未知的元素类型:' + type);
+        if (strictMode) {
+            throw new Error('未知的元素类型:' + type, data);
+        }
+        else {
+            console.error('未知的元素类型:' + type, data);
+            return null;
+        }
     }
-    // propsReadFuncs: Map<string, (data: any) => any> = new Map();
-    // registerReadFunc<T>(propName: string, func: (data: T) => T): void {
-    //     this.propsReadFuncs.set(propName, func);
-    // }
+    /**
+     * 读取扩展属性
+     * @param data
+     * @param element
+     */
     readExtendsProps(data, element) {
         if (!data.props) {
             return;
@@ -17801,7 +17027,10 @@ class DocumentEvent {
         if (renderObject instanceof LeafRenderObject) {
             if (CommonUtil.isInsideRectByPosition(renderObjectRect, hitPos)) {
                 const x = hitPos.x - renderObjectRect.x;
-                const offset = ElementUtil.getHitRenderOffset(renderObject, x);
+                let offset = ElementUtil.getHitRenderOffset(renderObject, x);
+                if (!this.ismousedown && renderObject.element && renderObject.element.type === 'psym') {
+                    offset = 0;
+                }
                 return {
                     render: renderObject,
                     offset,
@@ -17893,7 +17122,10 @@ class DocumentEvent {
                 else {
                     x = position.x - adjacentRender.rect.x;
                 }
-                const offset = ElementUtil.getHitRenderOffset(adjacentRender.render, x);
+                let offset = ElementUtil.getHitRenderOffset(adjacentRender.render, x);
+                if (!this.ismousedown && renderObject.element && renderObject.element.type === 'psym') {
+                    offset = 0;
+                }
                 return {
                     render: adjacentRender.render,
                     absoluteRenderRect: adjacentRender.rect,
@@ -17983,6 +17215,7 @@ class DocumentEvent {
             startHitInfo: this.startHitInfo,
             endHitInfo: this.endHitInfo
         });
+        console.log(this.endHitInfo);
     }
     /**
      * 获取鼠标所在的渲染元素对象
@@ -19588,7 +18821,7 @@ class DocumentChange {
             return paragraph;
         }
         const last = ElementUtil.getLastLeafElement(paragraph);
-        const selectedParaRange = RangeUtil.getSelctionRange(startControl, startOffset, last, 1, paragraph);
+        const selectedParaRange = RangeUtil.getSectionRange(startControl, startOffset, last, 1, paragraph);
         selectedParaRange.isFullSelected = false;
         const breakPara = ElementUtil.cloneRange(selectedParaRange, true);
         ElementUtil.fixParagraphContent(paragraph);
@@ -20210,22 +19443,26 @@ class DocumentChange {
         const id = nanoid.nanoid(5);
         const startCommMark = new CommentElement();
         startCommMark.props.id = id;
+        startCommMark.props.userId = this.viewOptions.editUser.id;
+        startCommMark.props.userName = this.viewOptions.editUser.name;
+        startCommMark.props.date = CommonUtil.formatNow('YYYY-MM-DD HH:mm:ss');
         startCommMark.props.markType = 'start';
         const endCommMark = new CommentElement();
         endCommMark.props.id = id;
         endCommMark.props.markType = 'end';
         this.insertElement(endControl, endOffset, [endCommMark]);
         this.insertElement(startControl, startOffset, [startCommMark]);
-        const commContent = new CommContentElement();
-        commContent.props.id = id;
-        commContent.props.createId = this.viewOptions.editUser.id;
-        commContent.props.createName = this.viewOptions.editUser.name;
-        commContent.props.createDate = new Date();
-        const pos = this.docComment.getCommMarkIndex(startCommMark);
-        if (pos < 0) {
-            throw new Error('获取插入的批注位置不正确');
-        }
-        this.docCtx.document.commentsContainerElement.addChild(commContent, pos);
+        startCommMark.props.text = '插入测试批注信息' + new Date();
+        // const commContent = new CommContentElement();
+        // commContent.props.id = id;
+        // commContent.props.createId = this.viewOptions.editUser.id;
+        // commContent.props.createName = this.viewOptions.editUser.name;
+        // commContent.props.createDate = new Date();
+        // const pos = this.docComment.getCommMarkIndex(startCommMark);
+        // if (pos < 0) {
+        //     throw new Error('获取插入的批注位置不正确');
+        // }
+        // this.docCtx.document.commentsContainerElement.addChild(commContent, pos);
         this.selectionState.clear();
     }
     validate() {
@@ -20249,8 +19486,8 @@ class DocumentChange {
             validateElement.props.title = caption + '验证';
             validateElement.props.id = id;
             validateElement.setContent(item.error);
-            const pos = this.docComment.getCommMarkIndex(startCommMark);
-            this.docCtx.document.commentsContainerElement.addChild(validateElement, pos);
+            this.docComment.getCommMarkIndex(startCommMark);
+            //this.docCtx.document.commentsContainerElement.addChild(validateElement, pos);
         });
         this.docCtx.selectionState.clear();
         return false;
@@ -20676,7 +19913,6 @@ class DocumentComment {
         // }
         // this.commMarkList = commList;
         // this.commContentList = commContentList;
-        this.docCtx.viewOptions.showReviewWindow = this.docCtx.document.commentsContainerElement.markPairs.length > 0;
         this.isDirty = false;
     }
     /**
@@ -20712,28 +19948,46 @@ class DocumentComment {
             if (!endRange) {
                 return;
             }
-            const commPairs = [];
-            const markPairs = this.docCtx.document.commentsContainerElement.markPairs;
-            for (let i = 0; i < markPairs.length; i++) {
-                const { start: startMark, end: endMark } = markPairs[i];
-                if (!startMark || !endMark) {
-                    continue;
-                }
-                const commPair = {
-                    startMark,
-                    endMark,
-                    startMarkStatus: RangeUtil.checkElementFullInRange(selectedRange, startMark),
-                    endMarkStatus: RangeUtil.checkElementFullInRange(selectedRange, endMark),
-                };
-                commPairs.push(commPair);
-            }
-            for (let i = 0; i < commPairs.length; i++) {
-                const commPair = commPairs[i];
-                if (commPair.endMarkStatus) {
-                    this.removeComment(commPair.endMark.props.id);
+            const selectedComms = [];
+            RangeUtil.recursionTraversalRangeHandler(selectedRange, (range) => {
+                if (range.target instanceof CommentElement && range.isFullSelected) {
+                    selectedComms.push(range.target);
                 }
-                else if (commPair.startMarkStatus) ;
+            });
+            if (selectedComms.length > 0) {
+                const ids = selectedComms.map(item => item.props.id);
+                const commList = this.docCtx.document.treeFilter(item => item.type === 'comm' && ids.indexOf(item.props.id) >= 0);
+                commList.forEach(item => item.remove());
+                return;
             }
+            return;
+            //     const commPairs: Array<CommMarkSelectedStatus> = [];
+            //     const markPairs = this.docCtx.document.commentsContainerElement.markPairs;
+            //     for (let i = 0; i < markPairs.length; i++) {
+            //         const {start: startMark, end: endMark} = markPairs[i];
+            //         if (!startMark || !endMark) {
+            //             continue;
+            //         }
+            //         const commPair: CommMarkSelectedStatus = {
+            //             startMark,
+            //             endMark,
+            //             startMarkStatus: RangeUtil.checkElementFullInRange(selectedRange, startMark),
+            //             endMarkStatus: RangeUtil.checkElementFullInRange(selectedRange, endMark),
+            //         };
+            //         commPairs.push(commPair)
+            //     }
+            //
+            //     for (let i = 0; i < commPairs.length; i++) {
+            //         const commPair = commPairs[i];
+            //         if (commPair.endMarkStatus) {
+            //             this.removeComment(commPair.endMark.props.id);
+            //         } else if (commPair.startMarkStatus) {
+            //             // const newStartMark = new CommentElement();
+            //             // newStartMark.props.id = commPair.startMark.props.id;
+            //             // commPair.startMark.isDecorate = false;
+            //             // DocumentChange.insertElement(endRange.target, endRange.endOffset, [newStartMark]);
+            //         }
+            //     }
         }
     }
     /**
@@ -20741,7 +19995,7 @@ class DocumentComment {
      * @param id
      */
     removeComment(id) {
-        this.docCtx.document.commentsContainerElement.removeCommMark(id);
+        this.docCtx.document.removeCommMark(id);
     }
     getCommMarkIndex(commMark) {
         const markType = commMark.props.markType;
@@ -20753,7 +20007,7 @@ class DocumentComment {
      * 清除所有批注
      */
     clearAllComments() {
-        this.docCtx.document.commentsContainerElement.clearAllComms();
+        this.docCtx.document.clearAllComms();
         this.docCtx.selectionState.clear();
     }
     /**
@@ -21179,15 +20433,15 @@ class ElementTrackManage {
 
 class DocumentSvg {
     viewOptions;
-    selectedSets;
+    sso;
     renderCtx;
     highlights = [];
     mode = "view";
     //当前页位置
     pagePos;
-    constructor(viewOptions, selectedSets, renderCtx) {
+    constructor(viewOptions, sso, renderCtx) {
         this.viewOptions = viewOptions;
-        this.selectedSets = selectedSets;
+        this.sso = sso;
         this.renderCtx = renderCtx;
     }
     getVNode(render, selectionRects, parentPos) {
@@ -21197,22 +20451,8 @@ class DocumentSvg {
             width: render.rect.width,
             height: render.rect.height
         };
-        if (this.selectedSets.has(render.element)) {
-            const range = this.selectedSets.get(render.element);
-            if (render.element && render instanceof LeafRenderObject) {
-                if (range.isFullSelected) {
-                    selectionRects.push(currPos);
-                }
-                else {
-                    if (render.element instanceof TextGroupElement && range.endOffset > range.startOffset) {
-                        const { startX, endX } = ElementUtil.getTextRenderHorX(render, range.startOffset, range.endOffset);
-                        const width = endX - startX;
-                        const x = currPos.x + startX;
-                        selectionRects.push({ x, y: currPos.y, width, height: currPos.height });
-                    }
-                }
-            }
-        }
+        //处理选区遮罩
+        this.createSelectionRect(render, selectionRects, currPos);
         //审阅窗口重新计算位置
         if (this.viewOptions.showReviewWindow && render instanceof CommsContainerRenderObject) {
             CommentsUtil.arrangeComments(render);
@@ -21276,12 +20516,18 @@ class DocumentSvg {
             if (selectionRectsTemp.length > 0) {
                 const startX = selectionRectsTemp[0].x;
                 const endX = selectionRectsTemp[selectionRectsTemp.length - 1].x + selectionRectsTemp[selectionRectsTemp.length - 1].width;
-                selectionRects.push({ x: startX, y: currPos.y, width: endX - startX, height: currPos.height });
+                selectionRects.push({
+                    x: startX,
+                    y: currPos.y,
+                    width: endX - startX,
+                    height: currPos.height,
+                    color: selectionRectsTemp[0].color
+                });
                 selectionRectsTemp.length = 0;
             }
         }
         else if (render instanceof TableCellRenderObject) {
-            if (this.selectedSets.has(render.element) && this.selectedSets.get(render.element)?.isFullSelected) {
+            if (this.sso.selectionEleSets.has(render.element) && this.sso.selectionEleSets.get(render.element)?.isFullSelected) {
                 selectionRects.push(currPos);
                 selectionRectsTemp.length = 0;
             }
@@ -21323,11 +20569,39 @@ class DocumentSvg {
         }
         return currVNode;
     }
+    createSelectionRect(render, selectionRects, currPos) {
+        const items = [this.sso.selectionEleSets, this.sso.commRangeSets];
+        for (const item of items) {
+            if (item.has(render.element)) {
+                const range = item.get(render.element);
+                if (render.element && render instanceof LeafRenderObject) {
+                    if (range.isFullSelected) {
+                        selectionRects.push({ ...currPos, color: range['rangeColor'] });
+                    }
+                    else {
+                        if (render.element instanceof TextGroupElement && range.endOffset > range.startOffset) {
+                            const { startX, endX } = ElementUtil.getTextRenderHorX(render, range.startOffset, range.endOffset);
+                            const width = endX - startX;
+                            const x = currPos.x + startX;
+                            // @ts-ignore
+                            selectionRects.push({
+                                x,
+                                y: currPos.y,
+                                width,
+                                height: currPos.height,
+                                color: range['rangeColor']
+                            });
+                        }
+                    }
+                }
+            }
+        }
+    }
     getHTMLVNode(docRenders) {
         this.counterMap = {};
-        const pageNodes = docRenders.filter(item => this.checkInViewBox(item)).map(item => {
+        return docRenders.filter(item => this.checkInViewBox(item)).map(item => {
             const pageSvg = this.getPageSvgVNode(item);
-            const pageUnit = {
+            return {
                 sel: 'div.page-unit',
                 data: {
                     style: {
@@ -21342,9 +20616,7 @@ class DocumentSvg {
                 },
                 children: [pageSvg]
             };
-            return pageUnit;
         });
-        return pageNodes;
     }
     /**
      * 判断当前元素是否在视窗内
@@ -21382,7 +20654,7 @@ class DocumentSvg {
                 ns: 'http://www.w3.org/2000/svg',
                 attrs: {
                     stroke: 'none',
-                    fill: 'rgb(85,165,255)',
+                    fill: item.color ?? 'rgb(85,165,255)',
                     'paint-order': 'stroke fill markers',
                     d: `M${item.x} ${item.y} L${item.x + item.width} ${item.y} L${item.x + item.width} ${item.y + item.height} L${item.x} ${item.y + item.height} Z`,
                     'fill-opacity': '0.5'
@@ -26392,7 +25664,10 @@ class DocumentPrintOffscreenBase {
         const ss = new SelectionState();
         this.docCtx = new EditorContext(ss, this.viewOptions);
         this.renderCtx = this.createRenderCtx(ctx, this.viewOptions, this.docCtx);
-        this.documentPaint = new DocumentPaint(this.renderCtx, this.docCtx, new Map());
+        this.documentPaint = new DocumentPaint(this.renderCtx, this.docCtx, {
+            selectionEleSets: new Map(),
+            commRangeSets: new Map()
+        });
         this.elementReader = new ElementReader(this.docCtx);
         this.docCtx.syncRefresh = () => {
         };
@@ -26407,8 +25682,8 @@ class DocumentPrintOffscreenBase {
     //     const docProps = this.docCtx.document.props;
     //     printNodes(canvasNodes, {...docProps});
     // }
-    async print(data, ranges = null) {
-        await this.prepare(data);
+    print(data, ranges = null) {
+        this.prepare(data);
         const canvasNodes = this.getSvgNodes(this.documentPaint.docPages, ranges);
         if (!canvasNodes.length) {
             console.warn('无可打印页');
@@ -26423,7 +25698,7 @@ class DocumentPrintOffscreenBase {
     /**
      * 续打
      */
-    async printForContinuation(data, options) {
+    printForContinuation(data, options) {
         this.afterRenderEvent.subscribe((event) => {
             const { index, renderCtx, docRender, pageSvgVNode } = event;
             if (index === options.startDocIndex && options.startY !== 0) {
@@ -26437,7 +25712,7 @@ class DocumentPrintOffscreenBase {
                 pageSvgVNode.data.attrs['clip-path'] = `url(#${'page-clip-' + index})`;
             }
         });
-        await this.prepare(data);
+        this.prepare(data);
         const printRanges = new Array(this.documentPaint.docPages.length).fill(0).map((item, index) => index).filter(index => index >= options.startDocIndex);
         let svgNodes = this.getSvgNodes(this.documentPaint.docPages, printRanges);
         if (!svgNodes.length) {
@@ -26462,8 +25737,8 @@ class DocumentPrintOffscreenBase {
     //     }
     //     return canvasNodes.map(node => node.toDataURL());
     // }
-    async getPrintNodes(data, ranges = null) {
-        await this.prepare(data);
+    getPrintNodes(data, ranges = null) {
+        this.prepare(data);
         const canvasNodes = this.getSvgNodes(this.documentPaint.docPages, ranges);
         return canvasNodes;
     }
@@ -26474,11 +25749,11 @@ class DocumentPrintOffscreenBase {
      * 读取数据，排版
      * @param data
      */
-    async prepare(data) {
+    prepare(data) {
         //将doc的json格式数据读取转化为DocumentElement的树
         this.elementReader.read(data);
         this.documentPaint.rePages();
-        await Promise.all(this.docCtx.imageLoader.getLoadTasks());
+        //await Promise.all(this.docCtx.imageLoader.getLoadTasks());
         const { scale, docPageSettings: { width, height } } = this.viewOptions;
         this.renderCtx.update({ scale, width, height });
         ElementUtil.setCanvasProps(this.renderCtx.mainContext.ctx.canvas, this.renderCtx.mainContext.ctx, {
@@ -26513,7 +25788,10 @@ class DocumentPrintOffscreenBase {
     //     return canvasList;
     // }
     getSvgNodes(docRenders, printRanges = null) {
-        const docSvgHelper = new DocumentSvg(this.viewOptions, new Map(), this.renderCtx); //.getHTMLVNode(docRenders) as Array<EditorVNodeObject>;
+        const docSvgHelper = new DocumentSvg(this.viewOptions, {
+            selectionEleSets: new Map,
+            commRangeSets: new Map()
+        }, this.renderCtx); //.getHTMLVNode(docRenders) as Array<EditorVNodeObject>;
         docSvgHelper.mode = 'print';
         const patch = init([
             modules.class,
@@ -26557,31 +25835,6 @@ class DocumentPrintOffscreen extends DocumentPrintOffscreenBase {
     }
 }
 
-let activeEditorContext = null;
-function setActiveEditorContext(ctx) {
-    activeEditorContext = ctx;
-}
-function createSignal(state) {
-    let _state = state;
-    const activeCtx = activeEditorContext;
-    const signal = {
-        get value() {
-            return _state;
-        },
-        set value(v) {
-            if (v === _state) {
-                return;
-            }
-            _state = v;
-            signal.onChange();
-        },
-        onChange: () => {
-            activeCtx?.onChange();
-        }
-    };
-    return signal;
-}
-
 /**
  * 渲染日历虚拟节点处理类
  */
@@ -27450,6 +26703,8 @@ class DocEditor {
     onDestroy = new Subject$1();
     beforeNodePatch = new Subject$1();
     afterNodePatch = new Subject$1();
+    //自定义事件传递消息
+    eventBus;
     editInput;
     scrollContainer;
     constructor(svgContainer) {
@@ -27480,13 +26735,14 @@ class DocEditor {
         this.renderContext.init({ width: 500, height: 500, scale: 1 });
         this.selectionState = this.documentSelection.selectionState;
         this.selectionOverlays = new SelectionOverlays(this.documentSelection.selectionState);
-        this.documentPaint = new DocumentPaint(this.renderContext, this.docCtx, this.selectionOverlays.selectedSets);
+        this.documentPaint = new DocumentPaint(this.renderContext, this.docCtx, this.selectionOverlays);
         this.documentInput = new DocumentInput(this.docCtx);
         this.docComment = new DocumentComment(this.docCtx);
         this.elementReader = new ElementReader(this.docCtx);
         this.documentChange = new DocumentChange(this.elementReader, this.docCtx, this.docComment, this.documentInput);
         this.documentEvent = new DocumentEvent(this.documentPaint, this.docCtx, this.documentInput);
         this.historyMange = new ElementTrackManage(this.docCtx, this.elementReader);
+        this.eventBus = new EventBus();
         this.createPatch();
         this.documentEvent.hitInfoChanged.subscribe((hitInfo) => {
             this.hitInfoChanged(hitInfo);
@@ -28071,6 +27327,7 @@ class DocEditor {
         this.docCtx.destroy();
         this.documentEvent.clearSubEvent();
         this.selectionState.destroy();
+        this.eventBus.clear();
         this.destroyDOM();
         this.flushTask = null;
         Object.keys(this).forEach(key => {
@@ -28584,7 +27841,7 @@ class DocEditor {
                 this.tipContainer = tipsContainer;
                 docContent.data.style.height = this.documentPaint.getDocumentContainerHeight().height + 'px';
                 const docRenders = this.documentPaint.docContainer.getItems();
-                const svgGenerator = new DocumentSvg(this.viewOptions, this.selectionOverlays.selectedSets, this.renderContext);
+                const svgGenerator = new DocumentSvg(this.viewOptions, this.selectionOverlays, this.renderContext);
                 const vNode = svgGenerator.getHTMLVNode(docRenders);
                 const children = docContent.children;
                 children.push(tipsContainer);
@@ -28891,7 +28148,7 @@ class DocEditor {
         rule.setRuleOptions({ width: this.viewOptions.docPageSettings.width, pagePL, pagePR, docLeft });
     }
     version() {
-        return "2.1.18";
+        return "2.1.20";
     }
     switchPageHeaderEditor() {
         this.docCtx.document.switchPageHeaderEditor(this.selectionState, null);
@@ -28899,7 +28156,10 @@ class DocEditor {
     getTextContent() {
         const paras = this.docCtx.document.treeFilter(item => item instanceof ParagraphElement);
         const paraTexts = paras.map(item => ElementSerialize.serializeString(item, { all: false }));
-        return paraTexts.join('\n');
+        return paraTexts.join('');
+    }
+    emit(event, args) {
+        this.eventBus.emit(event, args);
     }
 }
 
@@ -29172,8 +28432,6 @@ exports.DocumentFooterRenderObject = DocumentFooterRenderObject;
 exports.DocumentHeaderElement = DocumentHeaderElement;
 exports.DocumentHeaderFactory = DocumentHeaderFactory;
 exports.DocumentHeaderRenderObject = DocumentHeaderRenderObject;
-exports.DocumentImagesBaseLoader = DocumentImagesBaseLoader;
-exports.DocumentImagesLoader = DocumentImagesLoader;
 exports.DocumentInput = DocumentInput;
 exports.DocumentPaint = DocumentPaint;
 exports.DocumentPrintOffscreen = DocumentPrintOffscreen;
@@ -29191,6 +28449,7 @@ exports.ElementPaint = ElementPaint;
 exports.ElementReader = ElementReader;
 exports.ElementSerialize = ElementSerialize;
 exports.ElementUtil = ElementUtil;
+exports.EventBus = EventBus;
 exports.EventMap = EventMap;
 exports.EventSourceCore = EventSourceCore$1;
 exports.FillNullSpaceElement = FillNullSpaceElement;
@@ -29244,6 +28503,10 @@ exports.RenderContext = RenderContext;
 exports.RenderObject = RenderObject;
 exports.ResizeLeafRenderObject = ResizeLeafRenderObject;
 exports.RunElementFactory = RunElementFactory;
+exports.SVGElement = SVGElement;
+exports.SVGFactory = SVGFactory;
+exports.SVGProps = SVGProps;
+exports.SVGRenderObject = SVGRenderObject;
 exports.SelectionOverlays = SelectionOverlays;
 exports.SelectionRange = SelectionRange;
 exports.SelectionState = SelectionState;