@hailin-zheng/editor-core 2.1.28 → 2.2.0

package/index-cjs.js

@@ -980,7 +980,7 @@ function getExactDiffProps(oldProps, newProps) {
     });
     return obj;
 }
-function generatePatch(doc) {
+function generatePatch(doc, clear = true) {
     const insertOpsMap = new Map();
     const formatOpsMap = new Map();
     const patches = [];
@@ -1006,6 +1006,9 @@ function generatePatch(doc) {
             }
             formatOpsMap.set(ele, op);
         }
+        if ('insert' in op.ops) {
+            insertOpsMap.set(ele, op);
+        }
         // if ('insert' in op.ops) {
         //     op.ops.insert = ele.clone(true);
         //     const log = getOpsLog(ele, op.ops);
@@ -1013,17 +1016,17 @@ function generatePatch(doc) {
         //     op.prevIndex = log.prevIndex;
         //     op.parentIndex = log.parentIndex;
         // }
-        if ('insert' in op.ops) {
-            const prevEle = ElementUtil.getPrevSiblingElement(ele);
-            op.ops.insert = ele.clone(true);
-            op.index = ElementUtil.getControlIndex(ele, true);
-            op.parentIndex = ElementUtil.getControlIndex(ele.parent, true);
-            op.prevIndex = prevEle ? ElementUtil.getControlIndex(prevEle, true) : -1;
-        }
+        // if ('insert' in op.ops) {
+        //     const prevEle = ElementUtil.getPrevSiblingElement(ele);
+        //     op.ops.insert = ele.clone(true);
+        //     op.index = ElementUtil.getControlIndex(ele, true);
+        //     op.parentIndex = ElementUtil.getControlIndex(ele.parent, true);
+        //     op.prevIndex = prevEle ? ElementUtil.getControlIndex(prevEle, true) : -1;
+        // }
         patches.push({ index: op.index, parentIndex: op.parentIndex, prevIndex: op.prevIndex, ops: op.ops });
     }
     //清空
-    ops.length = 0;
+    clear && (ops.length = 0);
     return patches;
 }
 /**
@@ -1054,11 +1057,11 @@ function mergeDiffProps(prevFormat, currFormat) {
 /**
  * 订阅者
  */
-class Subscription$1 {
+class Subscription {
     closed = false;
     once = false;
 }
-class EventSourceCore$1 {
+class EventSourceCore {
     closed = false;
     subs = [];
     next(data) {
@@ -1087,7 +1090,7 @@ class EventSourceCore$1 {
 /**
  * DOM事件处理
  */
-class DOMEventSource extends EventSourceCore$1 {
+class DOMEventSource extends EventSourceCore {
     dom;
     type;
     constructor(dom, type) {
@@ -1107,7 +1110,7 @@ class DOMEventSource extends EventSourceCore$1 {
         return sub;
     }
 }
-class DOMSubscription extends Subscription$1 {
+class DOMSubscription extends Subscription {
     listener;
     cancel;
     constructor(listener, cancel) {
@@ -1126,23 +1129,23 @@ class DOMSubscription extends Subscription$1 {
         this.cancel();
     }
 }
-class Subject$1 extends EventSourceCore$1 {
+class Subject extends EventSourceCore {
     subscribe(listener) {
-        const sub = new SubjectSubscription$1(listener, () => {
+        const sub = new SubjectSubscription(listener, () => {
             this.removeSub(sub);
         });
         this.addSub(sub);
         return sub;
     }
 }
-class OnceSubject extends Subject$1 {
+class OnceSubject extends Subject {
     subscribe(listener) {
         const sub = super.subscribe(listener);
         sub.once = true;
         return sub;
     }
 }
-class SubjectSubscription$1 extends Subscription$1 {
+class SubjectSubscription extends Subscription {
     listener;
     cancel;
     constructor(listener, cancel) {
@@ -1172,7 +1175,7 @@ class EventBus {
             handlers = [];
             this.subs.set(event, handlers);
         }
-        const sub = new Subject$1();
+        const sub = new Subject();
         sub.subscribe(handler);
         handlers.push(sub);
     }
@@ -1247,8 +1250,8 @@ class Element {
     modifyFlag = exports.ModifyFlag.Modify;
     isMouseenter;
     _eventMap;
-    _refreshEvent = new Subject$1();
-    _onChangeEvent = new Subject$1();
+    _refreshEvent = new Subject();
+    _onChangeEvent = new Subject();
     observers = new WeakMap();
     paintRenders = [];
     cacheRender;
@@ -1519,15 +1522,22 @@ class BranchElement extends Element {
         }, 0);
     }
     getSelfLength(pure) {
-        return 1 + this.chilren.reduce((prev, curr) => {
+        const len = 1 + this.chilren.reduce((prev, curr) => {
             return prev + curr.getSelfLength(pure);
         }, 0);
+        //fixed:block-container类型的元素，比如表格单元格，再插入元素的时候，内部没有
+        //段落，但是在文档排版时，会补充段落元素；因此在插入时，统计的index和len是有问题的
+        //因此在统计的时候，手动将数量修复
+        if (len === 1 && this instanceof BlockContainerElement) {
+            return 2;
+        }
+        return len;
     }
     treeFilter(predicate) {
         const items = [];
         for (let i = 0; i < this.length; i++) {
             const item = this.getChild(i);
-            if (predicate(item, i)) {
+            if (predicate(item)) {
                 items.push(item);
             }
             if (item instanceof BranchElement) {
@@ -1539,7 +1549,7 @@ class BranchElement extends Element {
     treeFind(predicate) {
         for (let i = 0; i < this.length; i++) {
             const item = this.getChild(i);
-            if (predicate(item, i)) {
+            if (predicate(item)) {
                 return item;
             }
             if (item instanceof BranchElement) {
@@ -1786,28 +1796,12 @@ class ViewOptions {
     defaultIndent = 20;
     //内容区宽度，受审阅窗口宽度影响
     get contentWidth() {
-        if (this.showReviewWindow) {
-            return this.docPageSettings.width + this.reviewWindowWidth;
-        }
-        return this.docPageSettings.width;
-    }
-    /**
-     * 内容区域的高度
-     * 同时限定canvas的最小宽度
-     */
-    get ContentWidth() {
-        let width = this.docPageSettings.width;
-        if (this.showReviewWindow) {
-            width = width + this.reviewWindowWidth;
-        }
-        return width;
+        return this.docPageSettings.width + this.reviewWindowWidth;
     }
     //两个页的间距
     docSpace = 0;
-    //是否显示审阅窗口
-    showReviewWindow = false;
     //审阅窗口宽度
-    reviewWindowWidth = 200;
+    reviewWindowWidth = 0;
     //缩放
     _scale = 1;
     get scale() {
@@ -1846,7 +1840,7 @@ class ViewOptions {
     editUser = { id: '', name: '' };
     //留痕区域的生效时间段，同一用户的留痕块在此时间外需要生成新的留痕块
     trackChangePeriod = 10;
-    onChange = new Subject$1();
+    onChange = new Subject();
     //打印模式，普通模式，续打模式
     printMode = 'normal';
     constructor() {
@@ -2915,65 +2909,6 @@ class BodyPartProps extends INotifyPropertyChanged {
     }
 }
 
-class CommsContainerElement extends BlockContainerElement {
-    constructor() {
-        super('comm-list');
-    }
-    createRenderObject(data) {
-        const render = new CommsContainerRenderObject(this);
-        render.rect.width = data.options.reviewWindowWidth;
-        return render;
-    }
-    serialize(viewOptions) {
-        return {
-            type: this.type,
-            props: {}
-        };
-    }
-    clone(data) {
-        const clone = new CommsContainerElement();
-        cloneElementBase(this, clone);
-        cloneChildren(this, clone, data);
-        return clone;
-    }
-}
-class CommsContainerRenderObject extends BlockContainerRenderObject {
-    //批注内容是否已经重组,只要重新绘制的时候组合一次即可
-    isMeasureComm;
-    commsMarks = [];
-    clone() {
-        const clone = new CommsContainerRenderObject(this.element);
-        clone.rect = ElementUtil.cloneRect(this.rect);
-        for (let i = 0; i < this.length; i++) {
-            clone.addChild(this.getChild(i).clone());
-        }
-        return clone;
-    }
-    exportSVG(event) {
-        const t = super.exportSVG(event);
-        t.children = [ElementUtil.createSvgEle('rect', {
-                x: 0,
-                y: 0,
-                width: this.rect.width,
-                height: this.rect.height,
-                fill: '#fafafa',
-                stroke: 'black',
-                'paint-order': 'stroke fill markers',
-                'stroke-width': 0.5,
-            })];
-        return t;
-    }
-}
-class CommentsFactory extends ElementFactory {
-    match(type) {
-        return type === "comm-list";
-    }
-    createElement(data) {
-        const commentsEle = new CommsContainerElement();
-        return commentsEle;
-    }
-}
-
 class DataDecorateElement extends LeafElement {
     dataEle;
     isPrefix;
@@ -3140,7 +3075,7 @@ class ParagraphElement extends BlockContentElement {
         super('p');
         this.props = new ParagraphProps();
         this.addEvent('BackspaceKey', (evt) => {
-            if (evt.selectionState.collapsed) {
+            if (evt.selectionState.editable && evt.selectionState.collapsed) {
                 const pFirstLeafElement = ElementUtil.getFirstLeafElement(this);
                 if (pFirstLeafElement === evt.source && evt.sourceOffset === 0) {
                     if (this.props.numberType >= 0) {
@@ -3156,7 +3091,7 @@ class ParagraphElement extends BlockContentElement {
         }, true);
         this.addEvent('ElementKeyDown', evt => {
             //当前存在缩进，点击tab
-            if (evt.sourceEvent.keyCode === 9) {
+            if (evt.selectionState.editable && evt.sourceEvent.keyCode === 9) {
                 const { startControl, startOffset } = evt.selectionState;
                 if (startOffset === 0 && startControl === this.getChild(0)) {
                     const defaultIndent = evt.ctx.viewOptions.defaultIndent;
@@ -3672,60 +3607,6 @@ class DocumentRenderObject extends BlockContainerRenderObject {
             render.contentContext.drawText(viewOptions.copyRightInfo, textP, position.x + 5, position.y + 5, 100, 12);
         }
     }
-    /**
-     * 绘制文档边距线
-     */
-    drawMarginLine(position, render, docWidth, docHeight) {
-        const padding = this.padding;
-        let paddingPos = { x: padding.left + position.x, y: padding.top + position.y };
-        const drawLineWidth = 0.5;
-        const lineWidth = 20;
-        render.overlaysContext.strokeLines([{ x: paddingPos.x - lineWidth, y: paddingPos.y }, paddingPos, {
-                x: paddingPos.x,
-                y: paddingPos.y - lineWidth
-            }], drawLineWidth);
-        paddingPos = { x: docWidth - padding.right + position.x, y: padding.top + position.y };
-        render.overlaysContext.strokeLines([{ x: paddingPos.x + lineWidth, y: paddingPos.y }, paddingPos, {
-                x: paddingPos.x,
-                y: paddingPos.y - lineWidth
-            }], drawLineWidth);
-        paddingPos = { x: padding.left + position.x, y: docHeight - this.padding.bottom + position.y };
-        render.overlaysContext.strokeLines([{ x: paddingPos.x - lineWidth, y: paddingPos.y }, paddingPos, {
-                x: paddingPos.x,
-                y: paddingPos.y + lineWidth
-            }], drawLineWidth);
-        paddingPos = { x: docWidth - padding.left + position.x, y: docHeight - this.padding.bottom + position.y };
-        render.overlaysContext.strokeLines([{ x: paddingPos.x + lineWidth, y: paddingPos.y }, paddingPos, {
-                x: paddingPos.x,
-                y: paddingPos.y + lineWidth
-            }], drawLineWidth);
-    }
-    /**
-     * 绘制水印
-     * @param ctx
-     * @param position
-     */
-    drawWatermark(ctx, viewOptions, position) {
-        if (viewOptions.watermark) {
-            const watermark = viewOptions.watermark;
-            ctx.contentContext.ctx.save();
-            ctx.contentContext.ctx.translate(position.x, position.y);
-            const { width, height } = this.rect;
-            const degrees = Math.atan(height / width) * 180 / Math.PI;
-            ctx.contentContext.ctx.rotate(degrees * Math.PI / 180);
-            ctx.contentContext.ctx.globalAlpha = 0.3;
-            const d = Math.sqrt(width * width + height * height);
-            const textProps = new TextProps();
-            textProps.color = "#000000";
-            textProps.fontName = '楷体';
-            textProps.fontSize = 60;
-            const textWidth = ctx.contentContext.measureText(watermark, textProps).width;
-            const x = d / 2 - textWidth / 2;
-            ctx.contentContext.ctx.font = textProps.getFont();
-            ctx.contentContext.ctx.fillText(watermark, x, 30);
-            ctx.contentContext.ctx.restore();
-        }
-    }
     clone() {
         throw new Error('未实现');
     }
@@ -3770,9 +3651,6 @@ class DocumentRenderObject extends BlockContainerRenderObject {
         return pageNumNode;
     }
     exportSVG(event) {
-        const padding = this.padding;
-        event.options.docPageSettings;
-        ({ x: padding.left, y: padding.top });
         const selection = {
             sel: "g",
             data: {
@@ -5470,7 +5348,8 @@ class TableUtil {
                     currCell.props.hMerge = null;
                 }
                 if (currCell !== startCell) {
-                    if (currCell.getChildLength() !== 2) {
+                    //单元格存在有效内容
+                    if (currCell.getChildLength() > 2) {
                         cellContents.push(...ElementUtil.getChildrenElements(currCell.clone(true)));
                         currCell.clearItems();
                     }
@@ -5535,6 +5414,9 @@ class TableUtil {
                         this.restoreCellMerge(cell);
                     }
                 }
+                else {
+                    break;
+                }
             }
         }
         if (hMerge === 'restart') {
@@ -5546,6 +5428,9 @@ class TableUtil {
                         this.restoreCellMerge(cell);
                     }
                 }
+                else {
+                    break;
+                }
             }
         }
         cell.props.hMerge = null;
@@ -6525,94 +6410,6 @@ class CommentContentFactory extends ElementFactory {
     }
 }
 
-class CommentsUtil {
-    static createCommentsImage(commWindow) {
-        const commContainer = commWindow.element.cacheRender;
-        commWindow.clear();
-        for (let i = 0; i < commContainer.length; i++) {
-            const commRender = commContainer.getChild(i);
-            const commEle = commRender.element;
-            const mapComm = commWindow.commsMarks.find(item => item.element.props.id === commEle.props.id);
-            if (mapComm) {
-                const commContentRender = commRender.clone();
-                commContentRender.rect.x = 0;
-                commContentRender.rect.y = 0;
-                commWindow.addChild(commContentRender);
-            }
-        }
-    }
-    static arrangeComments(commWindow) {
-        if (commWindow.isMeasureComm) {
-            return;
-        }
-        const commContainer = commWindow.element.cacheRender;
-        const commMap = [];
-        const docRender = ElementUtil.getParentRender(commWindow, DocumentRenderObject);
-        const docRenderPos = ElementUtil.getRenderAbsolutePaintPos(docRender);
-        for (let i = 0; i < commContainer.length; i++) {
-            const commRender = commContainer.getChild(i);
-            const commEle = commRender.element;
-            const mapComm = commWindow.commsMarks.find(item => item.element.props.id === commEle.props.id);
-            if (mapComm) {
-                const commRenderPos = ElementUtil.getRenderAbsolutePaintPos(mapComm);
-                const commPos = { x: commRenderPos.x - docRenderPos.x, y: commRenderPos.y - docRenderPos.y };
-                const commMarkLinePos = ElementUtil.getParaLinePos(mapComm, commPos);
-                commPos.y = commMarkLinePos.y + 2;
-                const commContentRender = commWindow.getItems().find(item => item.element === commRender.element);
-                //const commContentRender = commRender.clone() as CommContentBaseRenderObject<any>;
-                commContentRender.rect.x = 0;
-                commContentRender.rect.y = commPos.y;
-                //commWindow.addChild(commContentRender);
-                commMap.push({
-                    commMarkRender: mapComm,
-                    commMarkPos: commPos,
-                    commContentRender: commContentRender
-                });
-            }
-        }
-        let sumCommentHeight = 0;
-        for (let i = 0; i < commMap.length; i++) {
-            const map = commMap[i];
-            const prevRender = commMap[i - 1]?.commContentRender;
-            const { commContentRender } = map;
-            sumCommentHeight += commContentRender.rect.height + 5;
-            if (prevRender) {
-                const { y: prevY, height: prevHeight } = prevRender.rect;
-                if (commContentRender.rect.y < prevY + prevHeight) {
-                    commContentRender.rect.y = prevY + prevHeight + 5;
-                }
-            }
-            commContentRender.commMarkRender = { render: map.commMarkRender, pos: map.commMarkPos };
-        }
-        if (!commMap.length) {
-            return;
-        }
-        const lastCommentMap = commMap[commMap.length - 1];
-        const { commContentRender: lastCommContentRender } = lastCommentMap;
-        const { rect: lastRect } = lastCommContentRender;
-        //批注内容超出文档，需要重新排序
-        if (lastRect.y + lastRect.height > docRender.rect.height) {
-            //总内容小于容器高度,则进行倒排
-            //否则进行正排
-            if (sumCommentHeight < docRender.rect.height) {
-                lastRect.y = docRender.rect.height - lastRect.height;
-                for (let i = commMap.length - 1; i >= 0; i--) {
-                    const map = commMap[i];
-                    const prevRender = commMap[i + 1]?.commContentRender;
-                    const { commContentRender } = map;
-                    if (prevRender) {
-                        const { y: prevY } = prevRender.rect;
-                        if (commContentRender.rect.y + commContentRender.rect.height > prevY) {
-                            commContentRender.rect.y = prevY - commContentRender.rect.height - 5;
-                        }
-                    }
-                    commContentRender.commMarkRender = { render: map.commMarkRender, pos: map.commMarkPos };
-                }
-            }
-        }
-    }
-}
-
 let activeEditorContext = null;
 function setActiveEditorContext(ctx) {
     activeEditorContext = ctx;
@@ -6825,7 +6622,7 @@ class SelectionState {
     set endControl(value) {
         this._endControl = value;
     }
-    onChangedEvent = new Subject$1();
+    onChangedEvent = new Subject();
     startControlIndex;
     startOffset;
     endControlIndex;
@@ -7032,7 +6829,7 @@ class CommentElement extends LeafElement {
     color;
     constructor() {
         super('comm');
-        this.isDecorate = true;
+        //this.isDecorate = true;
         this.disableClick = true;
         this.props = new CommProps();
         this.color = CommonUtil.randomRgbColor(0.5);
@@ -7088,10 +6885,14 @@ class CommentRenderObject extends LeafRenderObject {
         if (this.element.paintRenders.indexOf(this) !== 0) {
             return;
         }
+        const { x, y } = event.globalPos;
+        const docRender = ElementUtil.getParentRender(this, DocumentRenderObject);
         const appCtx = getActiveEditorContext();
         const opType = '批注：';
         const content = this.element.props.text;
-        const left = 5;
+        let left = 5;
+        //显示在文档的右测
+        left += docRender.rect.x + docRender.rect.width + 20;
         let sel = 'div.tg-container';
         const node = {
             sel,
@@ -7099,7 +6900,10 @@ class CommentRenderObject extends LeafRenderObject {
             data: {
                 style: {
                     left: `${left}px`,
-                    top: `${event.globalPos.y}px`
+                    top: `${y}px`
+                },
+                dataset: {
+                    key: this.element.key
                 },
                 on: {
                     click: (e) => {
@@ -7142,6 +6946,43 @@ class CommentRenderObject extends LeafRenderObject {
                 }]
         };
         event.addChangeTips(node);
+        const triangleTipX = x + this.rect.width / 2;
+        const tipLineAWidth = docRender.rect.x + docRender.rect.width - triangleTipX;
+        const tipLineA = {
+            sel: 'div.doc-triangle-line',
+            data: {
+                style: {
+                    left: `${triangleTipX}px`,
+                    top: `${y + this.rect.height}px`,
+                    width: tipLineAWidth + 'px'
+                }
+            }
+        };
+        const tipLineB = {
+            sel: 'div.doc-triangle-line',
+            data: {
+                style: {
+                    left: `${triangleTipX + tipLineAWidth}px`,
+                    top: `${y + this.rect.height}px`,
+                    width: 20 + 'px'
+                },
+                dataset: {
+                    key: this.element.key
+                }
+            }
+        };
+        const triangleTip = {
+            sel: `div.doc-triangle`,
+            data: {
+                style: {
+                    left: `${triangleTipX}px`,
+                    top: `${y + this.rect.height * 2 / 3}px`
+                }
+            }
+        };
+        event.addChangeTips(triangleTip);
+        event.addChangeTips(tipLineA);
+        event.addChangeTips(tipLineB);
         // <div class="container">
         // <div class="header">
         // <span class="header-user">张三</span>
@@ -7175,10 +7016,72 @@ class CommentFactory extends ElementFactory {
         ele.props.id = props.id;
         ele.props.markType = props.markType;
         ele.props.text = props.text;
+        ele.props.userId = props.userId;
+        ele.props.userName = props.userName;
+        ele.props.date = props.date;
         return ele;
     }
 }
 
+class CommsContainerElement extends BlockContainerElement {
+    constructor() {
+        super('comm-list');
+    }
+    createRenderObject(data) {
+        const render = new CommsContainerRenderObject(this);
+        render.rect.width = data.options.reviewWindowWidth;
+        return render;
+    }
+    serialize(viewOptions) {
+        return {
+            type: this.type,
+            props: {}
+        };
+    }
+    clone(data) {
+        const clone = new CommsContainerElement();
+        cloneElementBase(this, clone);
+        cloneChildren(this, clone, data);
+        return clone;
+    }
+}
+class CommsContainerRenderObject extends BlockContainerRenderObject {
+    //批注内容是否已经重组,只要重新绘制的时候组合一次即可
+    isMeasureComm;
+    commsMarks = [];
+    clone() {
+        const clone = new CommsContainerRenderObject(this.element);
+        clone.rect = ElementUtil.cloneRect(this.rect);
+        for (let i = 0; i < this.length; i++) {
+            clone.addChild(this.getChild(i).clone());
+        }
+        return clone;
+    }
+    exportSVG(event) {
+        const t = super.exportSVG(event);
+        t.children = [ElementUtil.createSvgEle('rect', {
+                x: 0,
+                y: 0,
+                width: this.rect.width,
+                height: this.rect.height,
+                fill: '#fafafa',
+                stroke: 'black',
+                'paint-order': 'stroke fill markers',
+                'stroke-width': 0.5,
+            })];
+        return t;
+    }
+}
+class CommentsFactory extends ElementFactory {
+    match(type) {
+        return type === "comm-list";
+    }
+    createElement(data) {
+        const commentsEle = new CommsContainerElement();
+        return commentsEle;
+    }
+}
+
 /**
  * 数据元验证提示
  */
@@ -10626,7 +10529,7 @@ class TrackRunRenderObject extends InlineGroupRenderObject {
         if (fillColor) {
             t.data.attrs['fill'] = fillColor;
         }
-        this.createChangeTips(event);
+        this.createModifyTips(event);
         const { x, y } = event.relativePagePos;
         const color = this.element.type === 'ins-run' ? 'green' : 'red';
         if (this.element.type === 'del-run') {
@@ -10634,35 +10537,39 @@ class TrackRunRenderObject extends InlineGroupRenderObject {
             event.highlights.push(ElementUtil.getStrokeSvgPath(`M${x} ${delY} H${x + this.rect.width}`, 'red', 1));
             event.highlights.push(ElementUtil.getStrokeSvgPath(`M${x} ${delY + 4} H${x + this.rect.width}`, 'red', 1));
         }
-        if (this.element.gotFocus && event.options.showTrackChanges) {
+        if (this.element.gotFocus) {
             //起始位置
             if (this.element.paintRenders.indexOf(this) === 0) {
                 const pathPoints = [];
                 pathPoints.push({ x: x, y: y + this.rect.height / 3 });
                 pathPoints.push({ x, y });
                 pathPoints.push({ x: x + this.rect.width, y: y });
-                event.highlights.push(ElementUtil.getStrokeSvgPath(pathPoints, color, 2));
+                event.highlights.push(ElementUtil.getStrokeSvgPath(pathPoints, color, 1));
             }
             if (this.element.paintRenders.indexOf(this) === this.element.paintRenders.length - 1) {
                 const pathPoints = [];
                 pathPoints.push({ x: x, y: y + this.rect.height });
                 pathPoints.push({ x: x + this.rect.width, y: y + this.rect.height });
                 pathPoints.push({ x: x + this.rect.width, y: y + this.rect.height * 2 / 3 });
-                event.highlights.push(ElementUtil.getStrokeSvgPath(pathPoints, color, 2));
+                event.highlights.push(ElementUtil.getStrokeSvgPath(pathPoints, color, 1));
             }
         }
         return t;
     }
-    createChangeTips(event) {
+    createModifyTips(event) {
         if (this.element.paintRenders.indexOf(this) !== 0) {
             return;
         }
         if (!event.options.showTrackChangesTip) {
             return;
         }
+        const { x, y } = event.globalPos;
+        const docRender = ElementUtil.getParentRender(this, DocumentRenderObject);
         const opType = this.element.type === 'ins-run' ? '插入:' : '删除:';
         const content = ElementSerialize.serializeString(this.element, { all: true });
-        const left = this.element.gotFocus ? -10 : 5;
+        let left = this.element.gotFocus ? -10 : 5;
+        //显示在文档的右测
+        left += docRender.rect.x + docRender.rect.width + 20;
         let sel = 'div.tg-container';
         if (this.element.gotFocus) {
             sel += '.tg-container--selected';
@@ -10673,7 +10580,10 @@ class TrackRunRenderObject extends InlineGroupRenderObject {
             data: {
                 style: {
                     left: `${left}px`,
-                    top: `${event.globalPos.y}px`
+                    top: `${y}px`
+                },
+                dataset: {
+                    key: this.element.key
                 }
             },
             children: [{
@@ -10695,6 +10605,43 @@ class TrackRunRenderObject extends InlineGroupRenderObject {
                 }]
         };
         event.addChangeTips(node);
+        const triangleTipX = x + this.rect.width / 2;
+        const tipLineAWidth = docRender.rect.x + docRender.rect.width - triangleTipX;
+        const tipLineA = {
+            sel: 'div.doc-triangle-line',
+            data: {
+                style: {
+                    left: `${triangleTipX}px`,
+                    top: `${y + this.rect.height}px`,
+                    width: tipLineAWidth + 'px'
+                }
+            }
+        };
+        const tipLineB = {
+            sel: 'div.doc-triangle-line',
+            data: {
+                style: {
+                    left: `${triangleTipX + tipLineAWidth}px`,
+                    top: `${y + this.rect.height}px`,
+                    width: 20 + 'px'
+                },
+                dataset: {
+                    key: this.element.key
+                }
+            }
+        };
+        const triangleTip = {
+            sel: `div.doc-triangle`,
+            data: {
+                style: {
+                    left: `${triangleTipX}px`,
+                    top: `${y + this.rect.height * 2 / 3}px`
+                }
+            }
+        };
+        event.addChangeTips(triangleTip);
+        event.addChangeTips(tipLineA);
+        event.addChangeTips(tipLineB);
     }
     clone() {
         const cloneRender = new TrackRunRenderObject(this.element);
@@ -12075,9 +12022,6 @@ class ElementUtil {
         if (element instanceof DocumentHeaderElement) {
             return { type: 'header', target: element };
         }
-        if (element instanceof CommsContainerElement) {
-            return { type: 'review', target: element };
-        }
         return this.getElementRegionTarget(element.parent);
     }
     /**
@@ -12446,6 +12390,22 @@ class ElementUtil {
             delete ele.attribute[attr];
         }
     }
+    static getMatchItems(item, predicate) {
+        const items = [];
+        if (predicate(item)) {
+            items.push(item);
+        }
+        if (item instanceof BranchElement) {
+            for (let i = 0; i < item.length; i++) {
+                const child = item.getChild(i);
+                const matchItems = this.getMatchItems(child, predicate);
+                if (matchItems) {
+                    items.push(...matchItems);
+                }
+            }
+        }
+        return items;
+    }
 }
 
 exports.TextUnitsHolder = void 0;
@@ -12942,7 +12902,7 @@ class EditorContext {
     docChange;
     clearPrevDocCb;
     //绘制结束之后回调函数
-    paintedCallback;
+    nextViewFn;
     constructor(selectionState, viewOptions) {
         this.selectionState = selectionState;
         this.viewOptions = viewOptions;
@@ -12952,8 +12912,8 @@ class EditorContext {
             this.syncRefresh?.();
         });
     }
-    setPaintedCallback(cb) {
-        this.paintedCallback = cb;
+    onNextView(cb) {
+        this.nextViewFn = cb;
     }
     get document() {
         return this._document;
@@ -12981,6 +12941,7 @@ class EditorContext {
                 this.selectionState?.renderContainer?.destroy();
                 this.clear();
                 this._document.destroy();
+                clearTraces(this._document);
             }
             this.clearPrevDocCb = null;
             this.selectionState.startHitInfo = null;
@@ -14817,9 +14778,6 @@ class DocumentArrange {
         }
         for (let i = 0; i < renderTree.length; i++) {
             const currRender = renderTree.getChild(i);
-            if (currRender.element) {
-                this.cacheCommsRender(currRender);
-            }
             if (currRender instanceof BranchRenderObject) {
                 this.cacheRenders(currRender);
             }
@@ -14828,26 +14786,6 @@ class DocumentArrange {
             }
         }
     }
-    /**
-     * 缓存批注标志
-     * @private
-     */
-    cacheCommsRender(render) {
-        if (render.element && render.element.type === 'comm') {
-            const commElement = render.element;
-            if (commElement.props.markType === 'start') {
-                const currDocRender = this.cacheDoc;
-                const docCommContainer = currDocRender.getItems().find(item => item instanceof CommsContainerRenderObject);
-                if (docCommContainer) {
-                    docCommContainer.commsMarks.push(render);
-                }
-            }
-        }
-        if (render.element && render.element.type === 'comm-list') {
-            const commContainer = render;
-            CommentsUtil.createCommentsImage(commContainer);
-        }
-    }
     endMeasures(ele) {
         ele.endMeasure();
         if (ele instanceof BranchElement) {
@@ -14888,14 +14826,11 @@ class DocumentPaginator {
         this.docCtx.selectionState.renderContainer = this.docContainer;
         this.docContainer.rect.width = this.viewOptions.docPageSettings.width;
         const newMeasure = new DocumentArrange(this.docCtx, this.renderContext, this.seo);
-        const docPages = newMeasure.measureDoc();
-        this.setCommRangeMark();
-        this.docPages = docPages;
+        this.docPages = newMeasure.measureDoc();
         this.layoutPages();
     }
     /**
      * 文档页面显示布局
-     * @param pages
      */
     layoutPages() {
         if (!this.docContainer || !this.docPages) {
@@ -14978,39 +14913,6 @@ class DocumentPaginator {
     getDocContainer() {
         return this.docContainer;
     }
-    /***
-     * 设置审阅区间样式痕迹
-     */
-    setCommRangeMark() {
-        if (!this.viewOptions.showReviewWindow) {
-            return;
-        }
-        // 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;
-    }
 }
 
 class ElementReader {
@@ -15146,491 +15048,6 @@ class ElementReader {
     }
 }
 
-class Subscription {
-    closed = false;
-    once = false;
-}
-class EventSourceCore {
-    closed = false;
-    subs = [];
-    next(data) {
-        const subs = [...this.subs];
-        subs.forEach((sub) => {
-            sub.invoke(data);
-            if (sub.once) {
-                sub.unsubscribe();
-            }
-        });
-    }
-    addSub(sub) {
-        this.subs.push(sub);
-    }
-    removeSub(sub) {
-        const index = this.subs.indexOf(sub);
-        if (index >= 0) {
-            this.subs.splice(index, 1);
-        }
-    }
-    unsubscribe() {
-        this.subs.length = 0;
-        this.closed = true;
-    }
-}
-class Subject extends EventSourceCore {
-    subscribe(listener) {
-        const sub = new SubjectSubscription(listener, () => {
-            this.removeSub(sub);
-        });
-        this.addSub(sub);
-        return sub;
-    }
-    onceSubscribe(listener) {
-        const sub = this.subscribe(listener);
-        sub.once = true;
-        return sub;
-    }
-}
-class SubjectSubscription extends Subscription {
-    listener;
-    cancel;
-    constructor(listener, cancel) {
-        super();
-        this.listener = listener;
-        this.cancel = cancel;
-    }
-    invoke(data) {
-        if (this.closed) {
-            return;
-        }
-        this.listener(data);
-    }
-    unsubscribe() {
-        this.closed = true;
-        this.cancel();
-    }
-}
-
-var ModifyFlag;
-(function (ModifyFlag) {
-    ModifyFlag[ModifyFlag["None"] = 0] = "None";
-    ModifyFlag[ModifyFlag["Modify"] = 1] = "Modify";
-    ModifyFlag[ModifyFlag["Track"] = 2] = "Track";
-})(ModifyFlag || (ModifyFlag = {}));
-class NodeCore {
-    enableClip = true;
-    pointEvent = true;
-    allowHitTest = false;
-    hitTest(hitPos, currPos) {
-        return false;
-    }
-    get enable() {
-        return this._enable;
-    }
-    set enable(value) {
-        this.propertyChanged('enable', this._enable, value);
-    }
-    _enable = true;
-    enableFocus = false;
-    isFocused = false;
-    get cursor() {
-        return this._cursor;
-    }
-    set cursor(value) {
-        this.propertyChanged('cursor', this._cursor, value);
-        this._cursor = value;
-    }
-    _cursor = 'default';
-    get visible() {
-        return this._visible;
-    }
-    set visible(value) {
-        this.propertyChanged('visible', this._visible, value);
-        this._visible = value;
-    }
-    _visible = true;
-    get borderRadius() {
-        return this._borderRadius;
-    }
-    set borderRadius(value) {
-        this.propertyChanged('borderRadius', this._borderRadius, value);
-        this._borderRadius = value;
-    }
-    get width() {
-        return this._width;
-    }
-    set width(value) {
-        this.propertyChanged('width', this._width, value);
-        this._width = value;
-    }
-    get height() {
-        return this._height;
-    }
-    set height(value) {
-        this.propertyChanged('height', this._height, value);
-        this._height = value;
-    }
-    get x() {
-        return this._x;
-    }
-    set x(value) {
-        this.propertyChanged('x', this._x, value);
-        this._x = value;
-    }
-    get y() {
-        return this._y;
-    }
-    set y(value) {
-        this.propertyChanged('y', this._y, value);
-        this._y = value;
-    }
-    _minWidth = Number.NaN;
-    _minHeight = Number.NaN;
-    get minWidth() {
-        return this._minWidth;
-    }
-    set minWidth(value) {
-        this.propertyChanged('minWidth', this._minWidth, value);
-        this._minWidth = value;
-    }
-    get minHeight() {
-        return this._minHeight;
-    }
-    set minHeight(value) {
-        this.propertyChanged('minHeight', this._minHeight, value);
-        this._minHeight = value;
-    }
-    get bgColor() {
-        return this._bgColor;
-    }
-    set bgColor(value) {
-        this.propertyChanged('bgColor', this._bgColor, value);
-        this._bgColor = value;
-    }
-    _border = 0;
-    get border() {
-        return this._border;
-    }
-    set border(value) {
-        this.propertyChanged('border', this._border, Math.abs(value));
-        this._border = value;
-    }
-    _padding = 0;
-    get padding() {
-        return this._padding;
-    }
-    set padding(value) {
-        this.propertyChanged('padding', this._padding, Math.abs(value));
-        this._padding = value;
-    }
-    _borderRadius = 0;
-    _borderColor;
-    get borderColor() {
-        return this._borderColor;
-    }
-    set borderColor(value) {
-        this.propertyChanged('borderColor', this._borderColor, value);
-        this._borderColor = value;
-    }
-    _shadowBlur = 0;
-    _shadowColor;
-    get shadowBlur() {
-        return this._shadowBlur;
-    }
-    set shadowBlur(value) {
-        this.propertyChanged('shadowBlur', this._shadowBlur, value);
-        this._shadowBlur = value;
-    }
-    get shadowColor() {
-        return this._shadowColor;
-    }
-    set shadowColor(value) {
-        this.propertyChanged('shadowColor', this._shadowColor, value);
-        this._shadowColor = value;
-    }
-    _isMouseenter = false;
-    get isMouseenter() {
-        return this._isMouseenter;
-    }
-    set isMouseenter(value) {
-        this.propertyChanged('isMouseenter', this._isMouseenter, value);
-        this._isMouseenter = value;
-    }
-    _overflowHidden = true;
-    get overflowHidden() {
-        return this._overflowHidden;
-    }
-    set overflowHidden(value) {
-        this.propertyChanged('overflowHidden', this._overflowHidden, value);
-        this._overflowHidden = value;
-    }
-    outlineColor = '';
-    outlineStyle = 'none';
-    outlineWidth = 0;
-    _width = Number.NaN;
-    _height = Number.NaN;
-    _x = 0;
-    _y = 0;
-    //测量需要的大小
-    desiredSize;
-    //绘制的大小
-    renderSize;
-    //最终分配的大小
-    finalRect;
-    _bgColor;
-    _modifyFlag = ModifyFlag.Modify;
-    get modifyFlag() {
-        return this._modifyFlag;
-    }
-    set modifyFlag(value) {
-        this._modifyFlag = value;
-    }
-    onChangedEvent = new Subject();
-    listenerEvents = [];
-    parent;
-    propertyChanged(prop, old, newV) {
-        if (this._modifyFlag == ModifyFlag.Modify) {
-            return;
-        }
-        if (old === newV) {
-            return;
-        }
-        this.onChanged();
-    }
-    onChanged() {
-        if (this._modifyFlag == ModifyFlag.Modify) {
-            return;
-        }
-        this._modifyFlag = ModifyFlag.Modify;
-        // if (this.parent) {
-        //     this.parent.onChildChanged();
-        // }
-        this.onChangedEvent.next();
-    }
-    addEventListener(name, listener, useCapture = false) {
-        this.listenerEvents.push({
-            name,
-            listener: listener,
-            useCapture
-        });
-    }
-    removeEventListener(name, listener, useCapture = false) {
-        const index = this.listenerEvents.findIndex(item => item.name === name && item.listener === listener && item.useCapture === useCapture);
-        if (index >= 0) {
-            this.listenerEvents.splice(index, 1);
-        }
-    }
-    /**
-     * 父容器传入参数，子容器设置坐标位置
-     * @param e
-     * @param finalRect
-     */
-    arrange(e, finalRect) {
-        if (!this._visible) {
-            this.finalRect = { x: finalRect.x, y: finalRect.y, width: 0, height: 0 };
-            return;
-        }
-        const contentSize = this.getContentSize(finalRect.width, finalRect.height);
-        const finalSize = this.arrangeOverride(e, contentSize);
-        this.renderSize = this.getOuterSize({
-            width: Math.min(contentSize.width, finalSize.width),
-            height: Math.min(contentSize.height, finalSize.height)
-        });
-        this.finalRect = { x: finalRect.x, y: finalRect.y, width: this.renderSize.width, height: this.renderSize.height };
-    }
-    arrangeOverride(e, finalSize) {
-        return finalSize;
-    }
-    /**
-     * 测量阶段
-     * @param e
-     * @param availableSize
-     */
-    measure(e, availableSize) {
-        if (!this._visible) {
-            this.desiredSize = { width: 0, height: 0 };
-            return;
-        }
-        let width = 0, height = 0;
-        if (Number.isNaN(this._width)) {
-            width = availableSize.width;
-        }
-        else {
-            width = this.getPercentWidth(availableSize.width);
-        }
-        if (Number.isNaN(this._height)) {
-            height = availableSize.height;
-        }
-        else {
-            height = this.getPercentHeight(availableSize.height);
-        }
-        const measureSize = this.getOuterSize(this.measureOverride(e, this.getContentSize(width, height)));
-        if (Number.isNaN(this._width)) {
-            width = measureSize.width;
-        }
-        if (Number.isNaN(this._height)) {
-            height = measureSize.height;
-        }
-        this.desiredSize = { width, height };
-    }
-    getPercentWidth(val) {
-        if (typeof this._width === 'object') {
-            return val * this._width.value / 100;
-        }
-        else {
-            return this._width;
-        }
-    }
-    getPercentHeight(val) {
-        if (typeof this._height === 'object') {
-            return val * this._height.value / 100;
-        }
-        else {
-            return this._height;
-        }
-    }
-    /**
-     * 获取内容尺寸
-     * 元素模型为边框模型，元素的大小为默认包含边框大小，内容大小需要减去边框大小
-     * @private
-     * @param width
-     * @param height
-     */
-    getContentSize(width, height) {
-        return {
-            width: width - this._border * 2 - this._padding * 2,
-            height: height - this._border * 2 - this.padding * 2
-        };
-    }
-    /**
-     * 获取外部尺寸
-     * @param availableSize
-     * @private
-     */
-    getOuterSize(availableSize) {
-        return {
-            width: availableSize.width + this._border * 2 + this._padding * 2,
-            height: availableSize.height + this._border * 2 + this._padding * 2
-        };
-    }
-    /**
-     * 子元素需重写该方法
-     * @param e
-     * @param availableSize
-     */
-    measureOverride(e, availableSize) {
-        return availableSize;
-    }
-    preRender(e) {
-        return true;
-    }
-    attachedProp = {};
-    setAttachedProp(name, val) {
-        const key = name;
-        this.propertyChanged(key, this.attachedProp[key], val);
-        this.attachedProp[key] = val;
-    }
-    getAttachedPropValue(name) {
-        return this.attachedProp[name];
-    }
-    removeAttachedProp(name) {
-        this.propertyChanged(name, this.attachedProp[name], undefined);
-        delete this.attachedProp[name];
-    }
-    /**
-     * 绘制轮廓
-     */
-    renderOutline(renderCtx) {
-        drawOutline(this, renderCtx);
-        clipContent(this, renderCtx);
-        drawBorderline(this, renderCtx);
-        translate(renderCtx, this.finalRect.x, this.finalRect.y);
-        translate(renderCtx, this.border + this.padding, this.border + this.padding);
-    }
-}
-/**
- * 绘制边框
- * @param node
- * @param renderCtx
- */
-function drawBorderline(node, renderCtx) {
-    //renderCtx.contentContext.fillRect(node.x, node.y, node.finalRect.width, node.finalRect.height, node.bgColor);
-    if (!node.border) {
-        return;
-    }
-    let { finalRect: { x, y, width, height } } = node;
-    const ctx = renderCtx.ctx;
-    ctx.save();
-    ctx.fillStyle = node.borderColor;
-    ctx.beginPath();
-    ctx.moveTo(x, y);
-    ctx.lineTo(x + width, y);
-    ctx.lineTo(x + width, y + height);
-    ctx.lineTo(x, y + height);
-    ctx.lineTo(x, y);
-    ctx.closePath();
-    ctx.fill();
-    if (node.border) {
-        ctx.globalCompositeOperation = 'source-atop';
-        x += node.border;
-        y += node.border;
-        width -= node.border * 2;
-        height -= node.border * 2;
-        const bgColor = node.bgColor ? node.bgColor : 'white';
-        ctx.fillStyle = bgColor;
-        renderCtx.roundRect(x, y, width, height, node.borderRadius);
-    }
-    ctx.fill();
-    ctx.restore();
-    //裁剪子内容区域范围
-    node.enableClip && renderCtx.clipFunc(() => renderCtx.roundRect(x, y, width, height, node.borderRadius));
-}
-/**
- * 绘制外轮廓
- */
-function drawOutline(node, renderCtx) {
-    if (node.outlineWidth <= 0 || node.outlineStyle === 'none' || !node.outlineColor) {
-        return;
-    }
-    let { x, y, finalRect: { width, height } } = node;
-    x -= node.outlineWidth / 2;
-    y -= node.outlineWidth / 2;
-    width += node.outlineWidth;
-    height += node.outlineWidth;
-    renderCtx.strokeRect(x, y, width, height, node.outlineColor, node.outlineWidth, node.borderRadius);
-}
-function clipContent(node, renderCtx) {
-    const x = node.finalRect.x;
-    const y = node.finalRect.y;
-    const width = node.finalRect.width;
-    const height = node.finalRect.height;
-    renderCtx.ctx.lineWidth = 0;
-    //绘制背景
-    if (node.bgColor) {
-        renderCtx.fillRect(x, y, width, height, node.bgColor, node.shadowBlur, node.shadowColor, node.borderRadius);
-    }
-    //确定绘制裁剪范围
-    renderCtx.clipFunc(() => renderCtx.roundRect(x, y, width, height, node.borderRadius));
-}
-function translate(renderCtx, x, y) {
-    renderCtx.ctx.translate(x, y);
-}
-
-class RectNode extends NodeCore {
-    render(e) {
-        // const {render}=e;
-        // const ctx=render.contentContext.ctx;
-        //
-        // var gradient = ctx.createLinearGradient(0,0, this.finalRect.width,0);
-        //
-        // gradient.addColorStop(0, 'green');
-        // gradient.addColorStop(.5, 'cyan');
-        // gradient.addColorStop(1, 'blue');
-        //
-        // ctx.fillStyle=gradient;
-        // ctx.fill();
-    }
-}
-
 /**
  * 事件系统
  */
@@ -15648,13 +15065,13 @@ class DocumentEvent {
     focusedRect;
     //当前光标所在的元素
     currentMouseoverRender;
-    hitInfoChanged = new Subject$1();
-    clickEvent = new Subject$1();
-    dblClickEvent = new Subject$1();
-    tripleClickEvent = new Subject$1();
-    changeCursor = new Subject$1();
-    contextMenu = new Subject$1();
-    trackTipsChanged = new Subject$1();
+    hitInfoChanged = new Subject();
+    clickEvent = new Subject();
+    dblClickEvent = new Subject();
+    tripleClickEvent = new Subject();
+    changeCursor = new Subject();
+    contextMenu = new Subject();
+    trackTipsChanged = new Subject();
     //光标处于边框的绘制元素
     edgeRenderInfo;
     //当前鼠标所在的page-position
@@ -16874,119 +16291,6 @@ class DocumentEvent {
         //     }
         // }
     }
-    /**
-     * 开启打印区域
-     */
-    startPrintArea(editor) {
-        const cancelToken = {};
-        const startRect = new RectNode();
-        startRect.x = 0;
-        startRect.y = 0;
-        startRect.width = editor.width;
-        startRect.height = 0;
-        //设置半透明颜色
-        startRect.bgColor = this.viewOptions.selectPrintAreaBgColor;
-        startRect.pointEvent = false;
-        const endRect = new RectNode();
-        endRect.x = 0;
-        endRect.y = editor.finalRect.height;
-        endRect.width = editor.width;
-        endRect.height = 0;
-        //设置半透明颜色
-        endRect.bgColor = this.viewOptions.selectPrintAreaBgColor;
-        endRect.pointEvent = false;
-        let state = 'start';
-        editor.parent?.addChild(startRect);
-        editor.parent?.addChild(endRect);
-        let startY = 0, startDocIndex = 0, endY = 0, endDocIndex = 0;
-        const onMousemoveHandler = (evt) => {
-            const pos = evt.sourceHitPos;
-            if (state === 'start') {
-                startRect.height = pos.y;
-            }
-            else {
-                if (startRect.height + 5 > pos.y) {
-                    return;
-                }
-                endRect.y = pos.y;
-                endRect.height = editor.finalRect.height - pos.y;
-            }
-        };
-        const onKeydownHandler = (evt) => {
-            if (evt.sourceEvt.keyCode === 27) {
-                cancelToken.cancel?.();
-            }
-        };
-        const onClickHandler = (evt) => {
-            const pos = evt.sourceHitPos;
-            const hitDoc = this.getHitDocPage({ globalX: pos.x, globalY: pos.y });
-            if (!hitDoc) {
-                return;
-            }
-            const { docIndex, hitPagePos } = hitDoc;
-            if (state === 'start') {
-                startY = hitPagePos.y;
-                startDocIndex = docIndex;
-                state = 'end';
-            }
-            else {
-                if (startRect.height + 5 > pos.y) {
-                    return;
-                }
-                endY = hitPagePos.y;
-                endDocIndex = docIndex;
-                cancelToken.onFinish?.({
-                    startY,
-                    startDocIndex,
-                    endY,
-                    endDocIndex
-                });
-            }
-        };
-        editor.addEventListener('mousemove', onMousemoveHandler);
-        editor.addEventListener('keydown', onKeydownHandler);
-        editor.addEventListener('click', onClickHandler);
-        cancelToken.cancel = () => {
-            if (!startRect.parent) {
-                return;
-            }
-            startRect.parent?.removeChild(startRect);
-            endRect.parent?.removeChild(endRect);
-            editor.removeEventListener('mousemove', onMousemoveHandler);
-            editor.removeEventListener('keydown', onKeydownHandler);
-            editor.removeEventListener('click', onClickHandler);
-        };
-        return cancelToken;
-    }
-    clicks = 0;
-    timeout;
-    /**
-     * 处理三击事件
-     */
-    handleTripleClick() {
-        this.clicks++;
-        let curr = this;
-        if (this.clicks === 1) {
-            // 设置延时，等待第二次点击
-            this.timeout = setTimeout(function () {
-                curr.clicks = 0;
-            }, 300);
-        }
-        else if (this.clicks === 2) {
-            // 第二次点击后，清除延时
-            clearTimeout(curr.timeout);
-            // 设置延时，等待第三次点击
-            curr.timeout = setTimeout(function () {
-                curr.clicks = 0;
-            }, 300);
-        }
-        else if (curr.clicks === 3) {
-            // 第三次点击后，处理三击事件并清除延时
-            clearTimeout(curr.timeout);
-            this.tripleClickEvent.next();
-            this.clicks = 0;
-        }
-    }
     /**
      * 获取当前光标所在的数据元
      * @returns
@@ -17019,34 +16323,34 @@ class DocumentEvent {
 class DocumentInput {
     docCtx;
     //输入内容事件
-    onInputEvent = new Subject$1();
+    onInputEvent = new Subject();
     //backspace 键盘事件
-    onBackspaceEvent = new Subject$1();
+    onBackspaceEvent = new Subject();
     //delete 键盘事件
-    onDeleteEvent = new Subject$1();
+    onDeleteEvent = new Subject();
     //enter 键盘事件
-    onEnterEvent = new Subject$1();
+    onEnterEvent = new Subject();
     //左键
-    onLeftEvent = new Subject$1();
+    onLeftEvent = new Subject();
     //右键
-    onRightEvent = new Subject$1();
+    onRightEvent = new Subject();
     //复制
-    onCopyEvent = new Subject$1();
+    onCopyEvent = new Subject();
     //剪切
-    onCutEvent = new Subject$1();
+    onCutEvent = new Subject();
     //粘贴
-    onPasteEvent = new Subject$1();
+    onPasteEvent = new Subject();
     //插入换行符
-    onInsertBr = new Subject$1();
+    onInsertBr = new Subject();
     //ctrl+A 全选事件
-    onSelectAllEvent = new Subject$1();
+    onSelectAllEvent = new Subject();
     //home 事件
-    onHomeEvent = new Subject$1();
+    onHomeEvent = new Subject();
     //end 事件
-    onEndEvent = new Subject$1();
-    onUpEvent = new Subject$1();
-    onDownEvent = new Subject$1();
-    onTabKeyEvent = new Subject$1();
+    onEndEvent = new Subject();
+    onUpEvent = new Subject();
+    onDownEvent = new Subject();
+    onTabKeyEvent = new Subject();
     constructor(docCtx) {
         this.docCtx = docCtx;
     }
@@ -17234,7 +16538,7 @@ class DocumentChange {
         });
     }
     newInput(data) {
-        if (data.composition && data.data === '在') {
+        if (data.composition && data.data === '啊') {
             debugger;
         }
         const { startControl, startOffset, collapsed, enableTrackChanges } = this.selectionState;
@@ -17259,6 +16563,9 @@ class DocumentChange {
             const comp = data.compositionStartInfo;
             comp.element = newInput;
             comp.offset = 0;
+            //修正数据
+            if (data.composition)
+                this.documentInput.correctInputEle(newInput, newInput.text, 0);
             this.inputTextGroup(newInput, data);
             return;
         }
@@ -17310,7 +16617,7 @@ class DocumentChange {
             return true;
         };
         //利用回调完成后续的输入处理
-        this.docCtx.setPaintedCallback(cb);
+        this.docCtx.onNextView(cb);
     }
     /**
      * 当前元素是否在正确的留痕区域(ins-run、del-run)，情况分为以下情况
@@ -18439,7 +17746,7 @@ class DocumentChange {
             const cb = () => {
                 this.handlePasteContent({ text: pasteText, doc: pasteData }, this.selectionState);
             };
-            this.docCtx.setPaintedCallback(cb);
+            this.docCtx.onNextView(cb);
             return;
         }
         this.handlePasteContent({ text: pasteText, doc: pasteData }, this.selectionState);
@@ -19373,7 +18680,7 @@ class ElementTrackManage {
         if (!ssLog) {
             return;
         }
-        this.docCtx.setPaintedCallback(() => {
+        this.docCtx.onNextView(() => {
             const { startIndex, startOffset, endIndex, endOffset, editable } = ssLog;
             const range = new SelectionRange();
             const sc = this.getControl(startIndex, false);
@@ -19479,6 +18786,9 @@ class ElementTrackManage {
     getControl(index, pure = true) {
         return ElementUtil.getControlByIndex(this.docCtx.document, { currIndex: -1, index: index }, pure);
     }
+    getControlIndex(control) {
+        return ElementUtil.getControlIndex(control, true);
+    }
 }
 
 class DocumentSvg {
@@ -19494,7 +18804,7 @@ class DocumentSvg {
         this.sso = sso;
         this.renderCtx = renderCtx;
     }
-    getVNode(render, selectionRects, parentPos) {
+    getVNode(render, parentMaskRect, parentPos) {
         const currPos = {
             x: parentPos.x + render.rect.x,
             y: parentPos.y + render.rect.y,
@@ -19502,17 +18812,13 @@ class DocumentSvg {
             height: render.rect.height
         };
         //处理选区遮罩
-        this.createSelectionRect(render, selectionRects, currPos);
-        //审阅窗口重新计算位置
-        if (this.viewOptions.showReviewWindow && render instanceof CommsContainerRenderObject) {
-            CommentsUtil.arrangeComments(render);
-        }
-        const getChildNodes = (node, selectionRects) => {
+        this.createSelectionRect(render, parentMaskRect, currPos);
+        const getChildNodes = (node, selectionMask) => {
             if (node instanceof BranchRenderObject) {
                 const children = [];
                 for (let i = 0; i < node.length; i++) {
                     const child = node.getChild(i);
-                    const vNode = this.getVNode(child, selectionRects, currPos);
+                    const vNode = this.getVNode(child, selectionMask, currPos);
                     if (Array.isArray(vNode)) {
                         children.push(...vNode);
                     }
@@ -19522,14 +18828,12 @@ class DocumentSvg {
                 }
                 return children;
             }
-            else {
-                return null;
-            }
+            return null;
         };
-        let selectionRectsTemp = [];
+        let currMaskGroup = { selection: [], mask: [] };
         const vNodeOptions = {
             getChildNodes: (node) => {
-                return getChildNodes(node, selectionRectsTemp);
+                return getChildNodes(node, currMaskGroup);
             },
             options: this.viewOptions,
             highlights: [],
@@ -19549,7 +18853,7 @@ class DocumentSvg {
             this.highlights.push(...vNodeOptions.highlights);
         }
         if (currVNode && !currVNode.isCompleted) {
-            const childNodes = getChildNodes(render, selectionRectsTemp);
+            const childNodes = getChildNodes(render, currMaskGroup);
             if (childNodes) {
                 if (!currVNode.children) {
                     currVNode.children = [];
@@ -19563,26 +18867,22 @@ class DocumentSvg {
             }
         }
         if (render instanceof ParagraphLineRectRenderObject) {
-            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,
-                    color: selectionRectsTemp[0].color
-                });
-                selectionRectsTemp.length = 0;
+            if (currMaskGroup.selection.length > 0) {
+                this.combineParaLineSelection(parentMaskRect.selection, currMaskGroup.selection, currPos);
             }
         }
         else if (render instanceof TableCellRenderObject) {
             if (this.sso.selectionEleSets.has(render.element) && this.sso.selectionEleSets.get(render.element)?.isFullSelected) {
-                selectionRects.push(currPos);
-                selectionRectsTemp.length = 0;
+                parentMaskRect.selection.push(currPos);
+                currMaskGroup.selection.length = 0;
+            }
+            if (this.sso.commRangeSets.has(render.element) && this.sso.commRangeSets.get(render.element)?.isFullSelected) {
+                parentMaskRect.mask.push(currPos);
+                currMaskGroup.mask.length = 0;
             }
         }
-        selectionRects.push(...selectionRectsTemp);
+        parentMaskRect.selection.push(...currMaskGroup.selection);
+        parentMaskRect.mask.push(...currMaskGroup.mask);
         // if (currVNode && currVNode.data?.attrs?.transform) {
         //     currVNode.data.attrs.transform = `translate(${currVNode.data?.attrs?.transform.x},${currVNode.data?.attrs?.transform.y})`
         // }
@@ -19602,13 +18902,6 @@ class DocumentSvg {
                 if (line && !item.data.attrs.transform) {
                     item.data.attrs.transform = `translate(${translateX},${translateY})`;
                 }
-                // if (item && item.data?.attrs?.transform && typeof item.data?.attrs?.transform === 'object') {
-                //     item.data.attrs.transform = `translate(${item.data.attrs.transform.x + translateX},${item.data.attrs.transform.y + translateY})`
-                // } else {
-                //     if (line && !item.data.attrs.transform) {
-                //         item.data.attrs.transform = `translate(${translateX},${translateY})`;
-                //     }
-                // }
             });
             if (line) {
                 return currVNode.children;
@@ -19619,32 +18912,35 @@ 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']
-                            });
-                        }
+    createSelectionRect(render, selectionMask, currPos) {
+        const createMaskVNode = (range, selectionRects) => {
+            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;
+                        selectionRects.push({
+                            x,
+                            y: currPos.y,
+                            width,
+                            height: currPos.height,
+                            color: range['rangeColor']
+                        });
                     }
                 }
             }
+        };
+        if (this.sso.selectionEleSets.has(render.element)) {
+            const range = this.sso.selectionEleSets.get(render.element);
+            createMaskVNode(range, selectionMask.selection);
+        }
+        if (this.sso.commRangeSets.has(render.element)) {
+            const range = this.sso.commRangeSets.get(render.element);
+            createMaskVNode(range, selectionMask.mask);
         }
     }
     getHTMLVNode(docRenders) {
@@ -19693,12 +18989,13 @@ class DocumentSvg {
     }
     getPageSvgVNode(item) {
         this.highlights = [];
-        const rects = [];
+        const rects = { selection: [], mask: [] };
         this.pagePos = { x: item.rect.x, y: item.rect.y };
         const pageSvg = this.getVNode(item, rects, { x: -item.rect.x, y: -item.rect.y });
         const selectionNode = pageSvg.children?.find(item => item && item.data?.attrs?.id === 'selection');
-        const hightlightNode = pageSvg.children?.find(item => item && item.data?.attrs?.id === 'highlight');
-        selectionNode.children = rects.map(item => ({
+        const highlightNode = pageSvg.children?.find(item => item && item.data?.attrs?.id === 'highlight');
+        rects.selection = rects.selection.concat(rects.mask);
+        selectionNode.children = rects.selection.map(item => ({
             sel: 'path',
             data: {
                 ns: 'http://www.w3.org/2000/svg',
@@ -19711,7 +19008,7 @@ class DocumentSvg {
                 }
             }
         }));
-        hightlightNode.children = this.highlights;
+        highlightNode.children = this.highlights;
         return pageSvg;
     }
     counterMap = {};
@@ -19731,6 +19028,25 @@ class DocumentSvg {
     addChangeTips(tipVNode) {
         this.changeTips.push(tipVNode);
     }
+    /**
+     * 合并段落行选区
+     * @param parentMaskRect
+     * @param currMaskRect
+     * @param currPos
+     * @private
+     */
+    combineParaLineSelection(parentMaskRect, currMaskRect, currPos) {
+        const startX = currMaskRect[0].x;
+        const endX = currMaskRect[currMaskRect.length - 1].x + currMaskRect[currMaskRect.length - 1].width;
+        parentMaskRect.push({
+            x: startX,
+            y: currPos.y,
+            width: endX - startX,
+            height: currPos.height,
+            color: currMaskRect[0].color
+        });
+        currMaskRect.length = 0;
+    }
 }
 
 /**
@@ -19743,7 +19059,7 @@ class EditorCalendarVNode {
     currCalendarMode;
     selectedDate;
     currentDate = '';
-    onSetValue = new Subject$1();
+    onSetValue = new Subject();
     currTime;
     selectedTime;
     constructor(viewOptions) {
@@ -20564,6 +19880,154 @@ class DocRule {
     }
 }
 
+function calculateOverflow(rect, viewport) {
+    const overflow = rect.y + rect.height - (viewport.y + viewport.height);
+    return overflow > 0 ? overflow : 0;
+}
+function adjustRectangles(rectangles, startIndex, endIndex, overflow) {
+    for (let i = startIndex; i < endIndex; i++) {
+        const currentRect = rectangles[i];
+        currentRect.y -= overflow;
+    }
+}
+function placeRectangles(rectangles, viewport) {
+    // Step 1: 过滤视窗内的矩形并按y值排序
+    const sortedRectangles = rectangles
+        .filter(rect => rect.y + rect.height >= viewport.y &&
+        rect.y <= viewport.y + viewport.height)
+        .sort((a, b) => a.y - b.y);
+    // Step 2: 遍历并调整矩形位置
+    for (let i = 1; i < sortedRectangles.length; i++) {
+        const currentRect = sortedRectangles[i];
+        const prevRect = sortedRectangles[i - 1];
+        // Step 3: 调整重叠矩形的位置
+        if (currentRect.y < prevRect.y + prevRect.height) {
+            currentRect.y = prevRect.y + prevRect.height;
+        }
+        // Step 4: 处理超出视窗的情况
+        let overflow = calculateOverflow(currentRect, viewport);
+        if (overflow <= 0) {
+            continue;
+        }
+        //紧挨着的上级兄弟元素之间存在足够空间
+        const remainingSpace = currentRect.y - prevRect.y - prevRect.height;
+        if (remainingSpace > 0) {
+            if (remainingSpace >= overflow) {
+                currentRect.y -= overflow;
+                continue;
+            }
+            else {
+                overflow -= remainingSpace;
+                adjustRectangles(sortedRectangles, i - 1, i, remainingSpace);
+                currentRect.y -= remainingSpace;
+            }
+        }
+        const space = findSpace(sortedRectangles, viewport, i - 1, i, overflow);
+        //完全没有可用空间，后续元素按照顺序排列即可
+        if (space === overflow) {
+            const prevRect = sortedRectangles[i - 1];
+            sortedRectangles.filter((item, index) => index >= i).reduce((prev, curr) => { curr.y = prev.y + prev.height; return curr; }, prevRect);
+            break;
+        }
+        currentRect.y -= (overflow - space);
+    }
+    return sortedRectangles;
+}
+function findSpace(sortedRectangles, viewport, i, overflowIndex, overflow) {
+    for (let j = i; j >= 0; j--) {
+        let currentRect = sortedRectangles[j];
+        let aboveRect = sortedRectangles[j - 1];
+        if (aboveRect === undefined) {
+            aboveRect = { y: viewport.y, height: 0, width: 0, x: 0 };
+        }
+        const remainingSpace = currentRect.y - aboveRect.y - aboveRect.height;
+        //存在可用空间
+        if (remainingSpace > 0) {
+            if (remainingSpace >= overflow) {
+                adjustRectangles(sortedRectangles, j, overflowIndex, overflow);
+                return 0;
+            }
+            else {
+                overflow -= remainingSpace;
+                // 调整当前元素到溢出元素之间的元素的y值
+                adjustRectangles(sortedRectangles, j, overflowIndex, remainingSpace);
+                return findSpace(sortedRectangles, viewport, j - 1, overflowIndex, overflow);
+            }
+        }
+        else {
+            return findSpace(sortedRectangles, viewport, j - 1, overflowIndex, overflow);
+        }
+    }
+    return overflow;
+}
+/**
+ * 调整页面提示框位置，使其在视窗内的位置合理
+ */
+function adjustViewportElements(tipContainer, viewPort) {
+    viewPort.y /= viewPort.scale;
+    viewPort.height /= viewPort.scale;
+    const tipContainerEle = tipContainer.elm;
+    const tipContainerRect = tipContainerEle.getBoundingClientRect();
+    const children = tipContainer.children;
+    if (!children || children.length === 0) {
+        return;
+    }
+    const nativeEle = [];
+    for (let i = 0; i < children.length; i++) {
+        const item = children[i];
+        const elm = item.elm;
+        if (!elm.classList.contains("tg-container")) {
+            continue;
+        }
+        const runKey = elm.dataset['key'];
+        const lineElm = tipContainerEle.querySelector(`.doc-triangle-line[data-key='${runKey}']`);
+        const linePos = getEleAbsolutePos(lineElm);
+        const eleRect = { elm, lineElm, x: 0, y: 0, width: 0, height: 0, linePos };
+        nativeEle.push(eleRect);
+        const rect = elm.getBoundingClientRect();
+        eleRect.y = linePos.y;
+        eleRect.x = (rect.x - tipContainerRect.x) / viewPort.scale;
+        eleRect.width = rect.width / viewPort.scale;
+        eleRect.height = rect.height / viewPort.scale;
+    }
+    if (nativeEle.length) {
+        const sortedRectangles = placeRectangles(nativeEle, viewPort);
+        for (let i = 0; i < sortedRectangles.length; i++) {
+            const item = sortedRectangles[i];
+            item.elm.style.top = item.y + 'px';
+            const rotationAngle = calculateRotationAngle(item.linePos, item);
+            const distance = calculateDistance(item.linePos, item);
+            rotateDiv(item.lineElm, rotationAngle, distance);
+        }
+    }
+}
+function getEleAbsolutePos(elm) {
+    const topStr = elm.style.top;
+    const leftStr = elm.style.left;
+    return {
+        x: parseInt(leftStr.substring(0, leftStr.length - 2)),
+        y: parseInt(topStr.substring(0, topStr.length - 2))
+    };
+}
+function calculateRotationAngle(a, b) {
+    const deltaX = b.x - a.x;
+    const deltaY = b.y - a.y;
+    // 使用反正切函数计算旋转角度
+    const angleInRadians = Math.atan2(deltaY, deltaX);
+    // 将弧度转换为度数
+    const angleInDegrees = angleInRadians * (180 / Math.PI);
+    return angleInDegrees;
+}
+function rotateDiv(c, angle, distance) {
+    c.style.transform = `rotate(${angle}deg)`;
+    c.style.width = `${distance}px`;
+}
+function calculateDistance(a, b) {
+    const deltaX = b.x - a.x;
+    const deltaY = b.y - a.y;
+    return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+}
+
 class DocEditor {
     svgContainer;
     //private docContent!: HTMLElement;
@@ -20581,28 +20045,25 @@ class DocEditor {
     selectionOverlays;
     //private docRule: DocRule;
     historyMange;
-    selectionChanged = new Subject$1();
-    beforeRenderSubject = new Subject$1();
-    afterRenderSubject = new Subject$1();
-    onBeforeSetCursorSubject = new Subject$1();
-    contentChanged = new Subject$1();
-    onPatchVNodeSubject = new Subject$1();
+    selectionChanged = new Subject();
+    beforeRenderSubject = new Subject();
+    afterRenderSubject = new Subject();
+    onBeforeSetCursorSubject = new Subject();
+    contentChanged = new Subject();
+    onPatchVNodeSubject = new Subject();
     selectionState;
-    //显示右键菜单
-    onContextMenuItemChanged = new Subject$1();
-    onDblClickEvent = new Subject$1();
-    onClickEvent = new Subject$1();
-    onScrollViewEvent = new Subject$1();
+    onDblClickEvent = new Subject();
+    onClickEvent = new Subject();
     //文档改变事件:内容及样式，业务模块需要根据此事件，来追踪当前文档是否改变的状态
-    onDocChangedEvent = new Subject$1();
+    onDocChangedEvent = new Subject();
     //执行flushTask,refreshDoc之前，此时可以在文档计算排版之前改变内容
-    onBeforeRefreshDocument = new Subject$1();
+    onBeforeRefreshDocument = new Subject();
     //文档视图尺寸改变事件
-    onDocViewSizeChanged = new Subject$1();
+    onDocViewSizeChanged = new Subject();
     //编辑器销毁事件
-    onDestroy = new Subject$1();
-    beforeNodePatch = new Subject$1();
-    afterNodePatch = new Subject$1();
+    onDestroy = new Subject();
+    beforeNodePatch = new Subject();
+    afterNodePatch = new Subject();
     //自定义事件传递消息
     eventBus;
     editInput;
@@ -20617,7 +20078,6 @@ class DocEditor {
         this.viewOptions.drawCharRectColor = 'green';
         this.viewOptions.showLineRect = true;
         this.viewOptions.docSpace = 20;
-        this.viewOptions.reviewWindowWidth = 200;
         this.viewOptions.defaultFontName = '宋体';
         this.viewOptions.editorVersion = this.version();
         //this.viewOptions.scale = 2;
@@ -20803,11 +20263,13 @@ class DocEditor {
             return null;
         }
         this.flushTask = () => {
+            //读取变更记录，可能会同步影响文档内容
+            this.readDocChangeLog();
             this.refreshDocument();
             this.flushTask = null;
-            let cb = this.docCtx.paintedCallback;
+            let cb = this.docCtx.nextViewFn;
             if (cb) {
-                this.docCtx.setPaintedCallback(null);
+                this.docCtx.onNextView(null);
                 cb();
                 return;
             }
@@ -21238,7 +20700,7 @@ class DocEditor {
         this.onDocViewSizeChanged.unsubscribe();
         this.flushTask = null;
         Object.keys(this).forEach(key => {
-            if (this[key] instanceof Subject$1) {
+            if (this[key] instanceof Subject) {
                 this[key].unsubscribe();
             }
         });
@@ -21344,7 +20806,7 @@ class DocEditor {
     }
     /**
      * 设置段落样式
-     * @param newProps
+     * @param setterFunc
      */
     setParaStyleByFn(setterFunc) {
         DocumentChange.setParaStyle(this.selectionState, setterFunc);
@@ -21705,7 +21167,8 @@ class DocEditor {
             snabbdom.styleModule,
             snabbdom.classModule,
             snabbdom.attributesModule,
-            snabbdom.eventListenersModule
+            snabbdom.eventListenersModule,
+            snabbdom.datasetModule
         ]);
         setActiveEditorContext(this);
         const vNodeFunc = this.renderRoot();
@@ -21770,6 +21233,7 @@ class DocEditor {
                 children.push(tipsContainer);
                 children.push(...vNode);
                 tipsContainer.children?.push(...svgGenerator.changeTips);
+                this.updateTipLayoutWidth();
                 const sub = this.afterNodePatch.subscribe(() => {
                     this.updateTipLayoutAfterPatch();
                     sub.unsubscribe();
@@ -21779,42 +21243,50 @@ class DocEditor {
         };
     }
     /**
-     * 更新留痕提示框位置在文档渲染后
+     * 更新提示区域布局宽度，根据渲染的节点，判断是否需要设置提示区域宽度
      * @private
      */
-    updateTipLayoutAfterPatch() {
-        const children = this.tipContainer.children;
-        if (!children || children.length === 0) {
-            return;
-        }
-        let prevPos = { x: 0, y: -999999 };
-        const gap = 12;
-        for (let i = 0; i < children.length; i++) {
-            const item = children[i];
-            const elm = item.elm;
-            const topStr = elm.style.top;
-            let topPixs = Number.parseInt(topStr.substring(0, topStr.length - 2));
-            const rect = elm.getBoundingClientRect();
-            if (topPixs + gap < prevPos.y) {
-                topPixs = (prevPos.y + gap);
-                elm.style.top = topPixs + 'px';
+    updateTipLayoutWidth() {
+        const tipChildren = this.tipContainer?.children;
+        if (!tipChildren || !tipChildren.length) {
+            if (this.viewOptions.reviewWindowWidth > 0) {
+                this.viewOptions.reviewWindowWidth = 0;
+                //刷新页面
+                this.adjustPageLayout();
             }
-            if (topPixs - prevPos.y < gap) {
-                elm.style.top = (prevPos.y + gap) + 'px';
+        }
+        else {
+            if (this.viewOptions.reviewWindowWidth === 0) {
+                this.viewOptions.reviewWindowWidth = 250;
+                //刷新页面
+                this.adjustPageLayout();
             }
-            prevPos.y = topPixs + rect.height;
         }
     }
+    /**
+     * 更新留痕提示框位置在文档渲染后
+     * @private
+     */
+    updateTipLayoutAfterPatch() {
+        const viewBoxRect = {
+            x: this.viewOptions.pageOffset.x,
+            y: this.viewOptions.pageOffset.y,
+            width: this.viewOptions.viewSettings.width,
+            height: this.viewOptions.viewSettings.height,
+            scale: this.viewOptions.scale
+        };
+        adjustViewportElements(this.tipContainer, viewBoxRect);
+    }
     createChangeTipContainer() {
         const docRect = this.documentPaginator.docContainer.getItems()[0].rect;
-        const x = docRect.x + docRect.width + 20;
+        docRect.x + docRect.width + 20;
         return {
-            sel: 'div.tip-container',
+            sel: 'div.decorate-container',
             data: {
-                style: {
-                    left: x + 'px',
-                    top: '0px',
-                }
+            /* style: {
+                 left: x + 'px',
+                 top: '0px',
+             }*/
             },
             children: []
         };
@@ -21895,7 +21367,6 @@ class DocEditor {
                                         },
                                         on: {
                                             click: (evt) => {
-                                                console.log('dd');
                                                 onChangeHandler(item.code);
                                             }
                                         }
@@ -22063,7 +21534,7 @@ class DocEditor {
         rule.setRuleOptions({ width: this.viewOptions.docPageSettings.width, pagePL, pagePR, docLeft });
     }
     version() {
-        return "2.1.28";
+        return "2.2.0";
     }
     switchPageHeaderEditor() {
         this.docCtx.document.switchPageHeaderEditor(this.selectionState, null);
@@ -22143,6 +21614,36 @@ class DocEditor {
             ])
         ]);
     }
+    readDocChangeLog() {
+        //获取文档的变更日志
+        const ops = generatePatch(this.docCtx.document, false);
+        for (let i = 0; i < ops.length; i++) {
+            const op = ops[i];
+            if ('delete' in op.ops) {
+                const delItem = op.ops.delete;
+                //获取删除的批注元素
+                const getDelCommItems = ElementUtil.getMatchItems(delItem, (item) => item instanceof CommentElement);
+                const maps = {};
+                getDelCommItems.forEach(item => {
+                    let num = maps[item.props.id];
+                    if (num === undefined) {
+                        maps[item.props.id] = 1;
+                    }
+                    else {
+                        maps[item.props.id] = num + 1;
+                    }
+                });
+                //获取需要删除的批注元素
+                const keys = Object.keys(maps).filter(key => maps[key] === 1);
+                if (keys.length) {
+                    const commItems = this.docCtx.document.treeFilter(item => item instanceof CommentElement);
+                    const delCommItems = commItems.filter(item => keys.includes(item.props.id));
+                    delCommItems.forEach(item => item.remove());
+                    return true;
+                }
+            }
+        }
+    }
 }
 
 /**
@@ -27240,10 +26741,10 @@ class DocumentPrintOffscreenBase {
     docCtx;
     renderCtx;
     elementReader;
-    beforeRenderEvent = new Subject$1();
-    afterRenderEvent = new Subject$1();
-    beforePrint = new Subject$1();
-    afterPrint = new Subject$1();
+    beforeRenderEvent = new Subject();
+    afterRenderEvent = new Subject();
+    beforePrint = new Subject();
+    afterPrint = new Subject();
     constructor() {
         this.viewOptions = new ViewOptions();
         this.viewOptions.copyRightInfo = '万达信息电子病历编辑器,www.wondersgroup.com';
@@ -27557,7 +27058,6 @@ exports.CommentElement = CommentElement;
 exports.CommentFactory = CommentFactory;
 exports.CommentRenderObject = CommentRenderObject;
 exports.CommentsFactory = CommentsFactory;
-exports.CommentsUtil = CommentsUtil;
 exports.CommonUtil = CommonUtil;
 exports.CommsContainerElement = CommsContainerElement;
 exports.CommsContainerRenderObject = CommsContainerRenderObject;
@@ -27647,7 +27147,7 @@ exports.ElementSerialize = ElementSerialize;
 exports.ElementUtil = ElementUtil;
 exports.EventBus = EventBus;
 exports.EventMap = EventMap;
-exports.EventSourceCore = EventSourceCore$1;
+exports.EventSourceCore = EventSourceCore;
 exports.FillNullSpaceElement = FillNullSpaceElement;
 exports.FillNullSpaceRenderObject = FillNullSpaceRenderObject;
 exports.GetTrackTipsEvent = GetTrackTipsEvent;
@@ -27711,9 +27211,9 @@ exports.SVGRenderObject = SVGRenderObject;
 exports.SelectionOverlays = SelectionOverlays;
 exports.SelectionRange = SelectionRange;
 exports.SelectionState = SelectionState;
-exports.Subject = Subject$1;
-exports.SubjectSubscription = SubjectSubscription$1;
-exports.Subscription = Subscription$1;
+exports.Subject = Subject;
+exports.SubjectSubscription = SubjectSubscription;
+exports.Subscription = Subscription;
 exports.TabElement = TabElement;
 exports.TabFactory = TabFactory;
 exports.TabRenderObject = TabRenderObject;