@hailin-zheng/editor-core 2.2.20 → 2.2.21

package/index.js

@@ -4,7 +4,7 @@ import * as acor from 'acorn';
 import { generate } from 'astring';
 import estraverse from 'estraverse';
 import JsBarcode from 'jsbarcode';
-import { toVNode, init as init$1, styleModule, classModule, attributesModule, eventListenersModule, datasetModule, h } from 'snabbdom';
+import { toVNode, h, init as init$1, styleModule, classModule, attributesModule, eventListenersModule, datasetModule } from 'snabbdom';
 
 /**
  * 元素事件
@@ -336,7 +336,9 @@ class BranchRenderObject extends RenderObject {
         if (index < 0) {
             throw new Error('为查找到当前元素');
         }
-        if (child.parent === this) ;
+        if (child.parent === this) {
+            child.parent = null;
+        }
         this.children.splice(index, 1);
     }
     removeChildByIndex(index) {
@@ -771,6 +773,14 @@ class CommonUtil {
         }
         return val;
     }
+    static getKeyCombination(event) {
+        // 构建键盘组合字符串，包括修饰键
+        const modifiers = [event.ctrlKey ? "Ctrl" : "", event.shiftKey ? "Shift" : "", event.altKey ? "Alt" : "", event.metaKey ? "Meta" : ""].filter(Boolean).join("+");
+        // 根据修饰键的存在构建最终的键盘组合字符串
+        const key = event.key; // 直接使用 event.key 来获取按键实际字符
+        const keyCombination = modifiers.length > 0 ? `${modifiers}+${key}` : key;
+        return keyCombination;
+    }
 }
 
 const docOpsMap = new Map();
@@ -1249,6 +1259,7 @@ class Element {
     //加载完毕
     loaded;
     visibleExpr;
+    effectExpr;
     attribute;
     _parent;
     get parent() {
@@ -1293,6 +1304,8 @@ class Element {
         this.cacheRender = null;
         this.unsubscribe(this);
         this.disposed = true;
+        this.visibleExpr = null;
+        this.effectExpr = null;
     }
     addEvent(event, handle, useCapture = false) {
         if (!this._eventMap) {
@@ -1384,24 +1397,41 @@ class LeafElement extends Element {
         return 1;
     }
     pubOnChange(selfChange) {
-        if (this.modifyFlag === ModifyFlag.None) {
-            this.refreshView();
-        }
-        if (this.modifyFlag === ModifyFlag.Track && selfChange === 'tracker') {
-            return;
-        }
-        if (this.modifyFlag === ModifyFlag.Modify) {
-            return;
-        }
-        if (selfChange === 'tracker') {
-            if (this.modifyFlag === ModifyFlag.None) {
-                this.modifyFlag = ModifyFlag.Track;
-            }
-        }
-        else {
-            this.modifyFlag = ModifyFlag.Modify;
-        }
-        this._onChangeEvent.next();
+        invokeRefresh(this, selfChange);
+        // if (this.modifyFlag === ModifyFlag.None) {
+        //     this.refreshView();
+        // }
+        // if (this.modifyFlag === ModifyFlag.Track && selfChange === 'tracker') {
+        //     return;
+        // }
+        // if (this.modifyFlag === ModifyFlag.Modify) {
+        //     return;
+        // }
+        // if (selfChange === 'tracker') {
+        //     if (this.modifyFlag === ModifyFlag.None) {
+        //         this.modifyFlag = ModifyFlag.Track;
+        //     }
+        // } else {
+        //     this.modifyFlag = ModifyFlag.Modify;
+        // }
+        // this._onChangeEvent.next();
+    }
+}
+function invokeRefresh(ele, type) {
+    const doc = getParent(ele, (item) => item.type === 'doc');
+    if (doc) {
+        doc.invokeChange(ele, type);
+    }
+}
+function getParent(child, predicate) {
+    if (!child) {
+        return null;
+    }
+    if (predicate(child)) {
+        return child;
+    }
+    else {
+        return getParent(child.parent, predicate);
     }
 }
 /**
@@ -1426,10 +1456,10 @@ class BranchElement extends Element {
         //const refSub = child.refreshSubject.subscribe((data) => {
         //this.refreshSubject.next(data);
         // });
-        const onChangeSub = child.onChangeSubject.subscribe((data) => {
-            this.pubOnChange('tracker');
-        });
-        this.addsubscribe(child, onChangeSub);
+        // const onChangeSub = child.onChangeSubject.subscribe((data) => {
+        //     this.pubOnChange('tracker');
+        // });
+        //this.addsubscribe(child, onChangeSub);
         this.pubOnChange('self');
     }
     removeChild(child) {
@@ -1548,25 +1578,25 @@ class BranchElement extends Element {
         return null;
     }
     pubOnChange(selfChange) {
-        if (this.modifyFlag === ModifyFlag.Track && selfChange === 'tracker') {
-            return;
-        }
-        if (this.modifyFlag === ModifyFlag.Modify) {
-            return;
-        }
-        if (selfChange === 'tracker') {
-            if (this.modifyFlag === ModifyFlag.None) {
-                this.modifyFlag = ModifyFlag.Track;
-            }
-        }
-        else {
-            this.modifyFlag = ModifyFlag.Modify;
-            //clearChildrenRenderCache(this);
-            for (let i = 0; i < this.length; i++) {
-                this.getChild(i).pubOnChange('to-child');
-            }
-        }
-        this._onChangeEvent.next();
+        // if (this.modifyFlag === ModifyFlag.Track && selfChange === 'tracker') {
+        //     return;
+        // }
+        // if (this.modifyFlag === ModifyFlag.Modify) {
+        //     return;
+        // }
+        // if (selfChange === 'tracker') {
+        //     if (this.modifyFlag === ModifyFlag.None) {
+        //         this.modifyFlag = ModifyFlag.Track;
+        //     }
+        // } else {
+        //     this.modifyFlag = ModifyFlag.Modify;
+        //     //clearChildrenRenderCache(this);
+        //     for (let i = 0; i < this.length; i++) {
+        //         this.getChild(i).pubOnChange('to-child')
+        //     }
+        // }
+        // this._onChangeEvent.next();
+        invokeRefresh(this, selfChange);
     }
 }
 function clearChildrenRenderCache(ele) {
@@ -1758,8 +1788,6 @@ class ViewOptions {
     trackInsColor = '#ff4d4f';
     //删除-留痕块文本颜色
     trackDelColor = '#000';
-    showLineRect;
-    showCharRect;
     showTabChar;
     showSpaceChar;
     showLineBreak;
@@ -1767,7 +1795,6 @@ class ViewOptions {
     devMode = false;
     showParaSymbol = true;
     showDebug;
-    resourceMode = 'immediate';
     secretBrowse = false;
     //中文版式，处理中文换行；前置标点和后置标点
     chineseLayout = true;
@@ -1800,7 +1827,7 @@ class ViewOptions {
             return;
         }
         this._fullPageView = value;
-        this.onChange.next('force');
+        this.onChange.next();
     }
     //毫米和像素的转换比
     mmToPixelsRatio = 3.7795001220703126;
@@ -1849,7 +1876,7 @@ class ViewOptions {
             return;
         }
         this._showTrackChanges = value;
-        this.onChange.next('force');
+        this.onChange.next();
     }
     get showTrackChangesTip() {
         return this._showTrackChangesTip;
@@ -1859,7 +1886,7 @@ class ViewOptions {
             return;
         }
         this._showTrackChangesTip = value;
-        this.onChange.next('force');
+        this.onChange.next();
     }
     //医嘱打印模式，文字行模式,将表格多行对象转换为多个表格行对象
     textRowLineMode = false;
@@ -2929,7 +2956,7 @@ class DataDecorateElement extends LeafElement {
                 }
             }
         });
-        this.disableClick = !isPrefix;
+        //this.disableClick = !isPrefix;
         this.isDecorate = true;
     }
     createRenderObject(data) {
@@ -3035,6 +3062,9 @@ function parser(code, objects) {
             if (child.type === 'Identifier') {
                 const identifierName = child['name'];
                 if (identifierName.startsWith('$')) {
+                    //获取对象为"CallExpression", "MemberExpression"获取属性，例如$1.value
+                    parent?.type;
+                    `getObject('${identifierName.slice(1)})`;
                     child['name'] = `getObject('${identifierName.slice(1)}').value`;
                     objects?.push(identifierName.slice(1));
                 }
@@ -3061,6 +3091,11 @@ function parser(code, objects) {
             }
         }
     });
+    if (objects) {
+        const set = new Set(objects);
+        objects.length = 0;
+        objects.push(...set);
+    }
     return generate(node);
 }
 //判断代码的语句，如果最后一个语句不是return，那么加上return
@@ -3626,6 +3661,48 @@ class DocumentElement extends BlockContainerElement {
             }
         }
     }
+    onRefreshEvent = new Subject();
+    /**
+     * 元素内容或者属性发生改变，需要根据当前节点所在的树路径，设置脏标记，同时触发渲染
+     * @param ele
+     */
+    invokeChange(ele) {
+        const parents = ElementUtil.getParentElements(ele);
+        const pubLeafEle = (ele, eleChangeType) => {
+            if (ele.modifyFlag === ModifyFlag.Track && eleChangeType === 'tracker') {
+                return;
+            }
+            if (ele.modifyFlag === ModifyFlag.Modify) {
+                return;
+            }
+            if (eleChangeType === 'tracker') {
+                if (ele.modifyFlag === ModifyFlag.None) {
+                    ele.modifyFlag = ModifyFlag.Track;
+                }
+            }
+            else {
+                ele.modifyFlag = ModifyFlag.Modify;
+                if (ele instanceof BranchElement) {
+                    for (let i = 0; i < ele.length; i++) {
+                        const child = ele.getChild(i);
+                        if (child instanceof LeafElement) {
+                            pubLeafEle(child, 'to-child');
+                        }
+                        else if (child instanceof BranchElement) {
+                            pubLeafEle(child, 'to-child');
+                        }
+                        //this.getChild(i).pubOnChange('to-child')
+                    }
+                }
+            }
+        };
+        pubLeafEle(ele, 'self');
+        for (let i = 1; i < parents.length; i++) {
+            const parent = parents[i];
+            pubLeafEle(parent, 'tracker');
+        }
+        this.onRefreshEvent.next();
+    }
 }
 class DocumentRenderObject extends BlockContainerRenderObject {
     constructor(ele) {
@@ -4027,7 +4104,7 @@ class DataElementInlineGroup extends InlineGroupInputElement {
     }
     parserExpress;
     /**
-     * 解析可见性表达式
+     * 解析表达式
      * @param ele
      * @param execute
      * @private
@@ -4046,6 +4123,11 @@ class DataElementInlineGroup extends InlineGroupInputElement {
             const depEleMap = new Map();
             let compliedCode = parser(this.props.expression, depIdItems);
             compliedCode = addReturn(compliedCode);
+            this.parserExpress = {
+                compliedCode,
+                func: new Function(`with(this){ ${compliedCode} }`),
+                depItems: depEleMap
+            };
             if (depIdItems.length) {
                 depIdItems.forEach(dep => {
                     const refCtx = execute.getObject(dep);
@@ -4055,19 +4137,34 @@ class DataElementInlineGroup extends InlineGroupInputElement {
                         //当前有可能是checkbox数组
                         const refEles = Array.isArray(refEle) ? refEle : [refEle];
                         reactiveMode && refEles.forEach(item => {
+                            //避免死循环调用
+                            if (item === this) {
+                                return;
+                            }
                             //求值依赖元素更改的时候，发布当前元素重新计算的指令
                             item.onChangeSubject.subscribe(() => {
-                                this.pubOnChange('self');
+                                //this.pubOnChange('self');
+                                try {
+                                    data.onNextView(() => {
+                                        //当前元素可能被删除
+                                        const func = this.parserExpress.func;
+                                        if (!func) {
+                                            return;
+                                        }
+                                        const tempExecuter = execute.create();
+                                        tempExecuter.setCurrentCtx(this, this.parserExpress.depItems);
+                                        const fn = func.bind(tempExecuter);
+                                        fn();
+                                    });
+                                }
+                                catch (e) {
+                                    console.error(e, "表达式执行出错", this.parserExpress.compliedCode);
+                                }
                             });
                         });
                     }
                 });
             }
-            this.parserExpress = {
-                compliedCode,
-                func: new Function(`with(this){ ${compliedCode} }`),
-                depItems: depEleMap
-            };
         }
         catch (e) {
             console.error('解析表达式出错,parseEleExpression', this.props.expression);
@@ -4211,7 +4308,11 @@ function exportDataEleDecoratorSVG$1(event, r) {
     if (['all', 'outline'].includes(mode)) {
         color = event.options.dataEleOutlineColor;
         const verOffset = 0;
-        const renderPosMap = getCurrentParaGroupRenders(r).map(item => ({ pos: getRenderPosToDoc(item), render: item }));
+        const currParaGroupRenders = getCurrentParaGroupRenders(r);
+        if (currParaGroupRenders.indexOf(r) !== 0) {
+            return;
+        }
+        const renderPosMap = currParaGroupRenders.map(item => ({ pos: getRenderPosToDoc(item), render: item }));
         if (renderPosMap.length > 1) {
             const secondGroupRenderPos = renderPosMap[1].pos;
             if (secondGroupRenderPos.x + renderPosMap[1].render.rect.width > event.relativePagePos.x) {
@@ -4518,20 +4619,25 @@ class PSymbolRenderObject extends LeafRenderObject {
         if (!event.options.showEnterSymbol || event.mode === 'print') {
             return null;
         }
-        const font = `14px 宋体`;
-        const actualFontBoundingBoxAscent = event.renderCtx.mainContext.getActualFontBoundingBoxAscent(font);
+        // const font = `14px system-ui`
+        // const actualFontBoundingBoxAscent = event.renderCtx.mainContext.getActualFontBoundingBoxAscent(font);
         let y = this.rect.y;
-        //基线处理
-        y += actualFontBoundingBoxAscent ?? 0;
-        //行高处理
+        // //基线处理
+        //y += actualFontBoundingBoxAscent ?? 0;
+        // //行高处理
         y += (this.rect.height - 14) / 2;
-        return ElementUtil.createSvgText('↵', {
-            'font-family': '宋体',
-            'font-size': 14,
-            x: this.rect.x,
-            y: y,
-            fill: 'green'
-        });
+        return {
+            sel: 'image',
+            data: {
+                ns: 'http://www.w3.org/2000/svg',
+                attrs: {
+                    translate: { x: this.rect.x, y: y },
+                    width: 7,
+                    height: 7,
+                    href: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAAXNSR0IArs4c6QAAAqFJREFUeF7tnUEyA0EYhbubBXEJbkDKXtzETQwX4SYcwMIRHMOCGZWyUCSL7uf1/KK+rPu9P/V980dVaiZy4mUhcHh2+5DztGoty60Bzm8ngIDgKwMBCAgmEDyeDUBAMIHg8WwAAoIJBI9nAxAQTCB4PBuAgGACwePZAAQEEwgezwYgIJhA8Hg2AAHBBILHswEICCYQPJ4NQEAwgeDxbAACggkEj2cDEBBMIHj8TmzA0fL2akrjRSurcUw3r8/DS2tuzvM7IWCxHO5SyletYMZxOkFAK7Ut5xGwCWXWm3MRgADDHm+v4G9AN7R1xQio49TtFAK6oa0rRkAdp26nENANbV0xAuo4dTuFgG5o64oRUMep2ykEdENbVzyrgIPT4biU/FD31r6dOhYyiS/jflA7OB9WZZQEKPwR8JMaAjavo3k/gtiADQMIkD7cfCEE+FhKTQiQsPlCCPCxlJoQIGHzhRDgYyk1IUDC5gshwMdSakKAhM0XkgWsv1hrfRt7paymNN215tTzY5ku01v607cmlpKuU8rtv5q4WN5MKhhyXwTWF8nr0/DYyiQjoBXZ9vMI8HCUWxAgo/MEEeDhKLcgQEbnCSLAw1FuQYCMzhNEgIej3IIAGZ0niAAPR7kFATI6TxABHo5yyy8ErJ/dVV7tz/sqUz4z072enSepPkwuPabKnXE+qQjwsZSaECBh84UQ4GMpNSFAwuYLIcDHUmpCgITNF0KAj6XUhAAJmy+EAB9LqQkBEjZfCAE+llITAiRsvpAmYH0/6X5qvqc0v5dr5b9O78KD2qoSSYA67D//aJ/KBAEqOVMOASaQag0CVHKmHAJMINUaBKjkTDkEmECqNQhQyZlyCDCBVGsQoJIz5RBgAqnWIEAlZ8ohwARSrfkASRnMwxkWAWQAAAAASUVORK5CYII=",
+                }
+            }
+        };
     }
     //绘制段落符号
     clone() {
@@ -8771,26 +8877,32 @@ class BreakRenderObject extends LeafRenderObject {
         if (!event.options.showEnterSymbol || event.mode === 'print') {
             return null;
         }
-        // return ElementUtil.createSvgText( '↓',{ 'dominant-baseline': 'hanging',
-        //     'font-family': 'Courier',
-        //     'font-size': this.rect.height,
-        //     x: this.rect.x + 4,
-        //     y: this.rect.y,
-        //     fill: 'green'});
-        const font = `14px 宋体`;
-        const actualFontBoundingBoxAscent = event.renderCtx.mainContext.getActualFontBoundingBoxAscent(font);
-        let y = 0;
-        //基线处理
-        y += actualFontBoundingBoxAscent ?? 0;
-        //行高处理
-        y += (this.parent.rect.height - 14) / 2;
-        return ElementUtil.createSvgText('↓', {
-            'font-family': '宋体',
-            'font-size': 14,
-            x: this.rect.x,
-            y: y,
-            fill: 'green'
-        });
+        // const font = `14px system-ui`
+        // const actualFontBoundingBoxAscent = event.renderCtx.mainContext.getActualFontBoundingBoxAscent(font);
+        let y = this.rect.y;
+        // return {
+        //     sel: 'path',
+        //     data: {
+        //         ns: 'http://www.w3.org/2000/svg',
+        //         attrs: {
+        //             stroke: 'none',
+        //             fill: 'blue',
+        //             d: path,
+        //             translate: { x: this.rect.x, y: y }
+        //         }
+        //     }
+        // }
+        return {
+            sel: 'image',
+            data: {
+                ns: 'http://www.w3.org/2000/svg',
+                attrs: {
+                    translate: { x: this.rect.x, y: y + (this.rect.height - 10) / 2 },
+                    height: 10,
+                    href: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAA/CAYAAABqzXG5AAAAAXNSR0IArs4c6QAAAKdJREFUaEPt2LENhDAMQFHSMs4tiFiQcWg5XUGDcIQtoDg96gTC59vYbkPxGj/zFm1dl6lVblva9HuQw0S4kUEmG4qc4QxnDgT8myIlkEEmmy44wxnOHAnom3SUZwQU5ArybLbkDGc4o4m76ICCPCzIe5n0It3bljWHCVgiQ+BsmHWT3hOR1mvwHKY0EvGZKnVuNlL29f8hcO/t9U0Vn0yuTK7emlx9ARNg7GSAIh9+AAAAAElFTkSuQmCC",
+                }
+            }
+        };
     }
     clone() {
         const render = new BreakRenderObject(this.element);
@@ -8854,7 +8966,7 @@ class DataElementGroupElement extends InlineGroupInputElement {
         }
     }
     getValue() {
-        return ElementSerialize.serializeString(this, { all: false });
+        return ElementSerialize.serializeString(this);
     }
     clone(data) {
         return super.cloneSelf(data, DataElementGroupElement);
@@ -8959,15 +9071,29 @@ function exportDataEleDecoratorSVG(event, r) {
         return;
     }
     //绘制背景
-    if (['all', 'background'].includes(mode)) {
-        const bgX = event.relativePagePos.x;
-        const bgY = event.relativePagePos.y;
-        event.highlights.push(ElementUtil.getFillSvgRect(bgX, bgY, r.rect.width, r.rect.height, color));
-    }
-    if (['all', 'outline'].includes(mode)) {
-        color = event.options.dataGroupOutlineColor;
+    // if (['all', 'background'].includes(mode)) {
+    //     const bgX = event.relativePagePos.x;
+    //     const bgY = event.relativePagePos.y;
+    //     event.highlights.push(ElementUtil.getFillSvgRect(bgX, bgY, r.rect.width, r.rect.height, color));
+    // }
+    if (['all', 'outline', 'background'].includes(mode)) {
+        let outlineColor = ['all', 'outline'].includes(mode) ? event.options.dataGroupOutlineColor : 'none';
+        let bgColor = ['all', 'background'].includes(mode) ? color : 'none';
         const verOffset = 0;
-        const renderPosMap = getCurrentParaGroupRenders(r).map(item => ({ pos: getRenderPosToDoc(item), render: item }));
+        const currParaGroupRenders = getCurrentParaGroupRenders(r);
+        if (currParaGroupRenders.indexOf(r) === 0) {
+            outlineColor = 'none';
+        }
+        if (currParaGroupRenders.indexOf(r) === currParaGroupRenders.length - 1) {
+            bgColor = 'none';
+        }
+        if (bgColor !== 'none' && currParaGroupRenders.indexOf(r) !== 0) {
+            return;
+        }
+        if (outlineColor !== 'none' && currParaGroupRenders.indexOf(r) !== currParaGroupRenders.length - 1) {
+            return;
+        }
+        const renderPosMap = currParaGroupRenders.map(item => ({ pos: getRenderPosToDoc(item), render: item }));
         if (renderPosMap.length > 1) {
             const secondGroupRenderPos = renderPosMap[1].pos;
             if (secondGroupRenderPos.x + renderPosMap[1].render.rect.width > event.relativePagePos.x) {
@@ -8995,8 +9121,8 @@ function exportDataEleDecoratorSVG(event, r) {
                 const path = [...sharpPoints, ...sharpPoints1, sharpPoints[0]].map((item, index) => ((index === 0) ? 'M' : "L") + item.x + " " + item.y).join(" ");
                 event.highlights.push(ElementUtil.createSvgPath({
                     d: path,
-                    stroke: color,
-                    fill: 'none',
+                    stroke: outlineColor,
+                    fill: bgColor,
                     'stroke-width': 1
                 }));
                 return;
@@ -9006,8 +9132,8 @@ function exportDataEleDecoratorSVG(event, r) {
             const currRen = renderPosMap[i];
             event.highlights.push(ElementUtil.createSvgPath({
                 d: `M${currRen.pos.x} ${currRen.pos.y} L${currRen.pos.x + currRen.render.rect.width} ${currRen.pos.y} L${currRen.pos.x + currRen.render.rect.width} ${currRen.pos.y + currRen.render.rect.height} L${currRen.pos.x} ${currRen.pos.y + currRen.render.rect.height} Z`,
-                stroke: color,
-                fill: 'none',
+                stroke: outlineColor,
+                fill: bgColor,
                 'stroke-width': 1
             }));
         }
@@ -9262,7 +9388,7 @@ class DataElementText extends DataElementInlineGroup {
     createRenderObject(data) {
         if (data.options.enableDyExpression) {
             this.parseEleExpression(data);
-            this.evalEleExpr(data.execute);
+            //this.evalEleExpr(data.execute)
         }
         return new DataElementTextRenderObject(this);
     }
@@ -9312,7 +9438,7 @@ class DataElementText extends DataElementInlineGroup {
         this.onChangedValidate();
     }
     getValue() {
-        return ElementSerialize.serializeString(this, { all: false });
+        return ElementSerialize.serializeString(this);
     }
     validate() {
         let error = super.validate();
@@ -10915,8 +11041,8 @@ class ElementSerialize {
         }
         return result;
     }
-    static serializeString(element, options = { all: false }) {
-        if (!options.all && element instanceof TrackRunElement && element.type === TrackRunTypeEnum.Deleted) {
+    static serializeString(element, options = { includeRunDel: false }) {
+        if (!options.includeRunDel && element instanceof TrackRunElement && element.type === TrackRunTypeEnum.Deleted) {
             return '';
         }
         if (element instanceof TextGroupElement && !element.isDecorate) {
@@ -11053,7 +11179,7 @@ class TrackRunElement extends InlineGroupElement {
                 trackRunType: this.type,
                 name: this.props.userName,
                 date: this.props.date,
-                content: ElementSerialize.serializeString(this, { all: true })
+                content: ElementSerialize.serializeString(this, { includeRunDel: true })
             };
             console.log(evt.trackTips.content);
             evt.isCancel = true;
@@ -11153,7 +11279,7 @@ class TrackRunRenderObject extends InlineGroupRenderObject {
         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 content = ElementSerialize.serializeString(this.element, { includeRunDel: true });
         let left = this.element.gotFocus ? -10 : 5;
         //显示在文档的右测
         left += docRender.rect.x + docRender.rect.width + 20;
@@ -12293,54 +12419,87 @@ class ElementUtil {
     /**
      * 递归向前寻找最近的元素
      * @param currElement
-     * @param inPara  是否在同一段落中寻找
-     * @param forCursor 查找结果是否用于光标定位
      * @param viewOptions
      * @returns
      */
-    static getRecursionPrevSiblingElement(currElement, inPara = false, forCursor = false, viewOptions) {
+    static getRecursionPrevSiblingElement(currElement, viewOptions) {
         const parent = currElement?.parent;
         //删除留痕块的measureRender在不显示留痕模式下，不生成render
-        if (!currElement || !parent || (!currElement.paintRenders.length && !(currElement instanceof TrackRunElement))) {
+        if (!currElement || !parent || !currElement.paintRenders.length) {
             return null;
         }
         //如果当前数据元不可编辑，则直接跳过
-        if (parent instanceof DataElementInlineGroup && !parent.props.editable && viewOptions.docMode === DocMode.FormEdit) {
-            return this.getRecursionPrevSiblingElement(parent, inPara, forCursor, viewOptions);
-        }
-        if (forCursor && parent.disableClick) {
-            return this.getRecursionPrevSiblingElement(parent, inPara, forCursor, viewOptions);
-        }
+        //不存在这种情况
+        // if (parent instanceof DataElementInlineGroup && !parent.props.editable && viewOptions.docMode === DocMode.FormEdit) {
+        //     return this.getRecursionPrevSiblingElement(parent, inPara, viewOptions);
+        // }
+        //不存在这种情况
+        // if (parent.disableClick) {
+        //     return this.getRecursionPrevSiblingElement(parent, inPara, viewOptions);
+        // }
         const index = parent.getChildIndex(currElement);
-        if (!index) {
-            if (inPara && parent.type === 'p') {
-                return null;
+        // if (!index) {
+        //     if (inPara && parent.type === 'p') {
+        //         return null;
+        //     }
+        //     return this.getRecursionPrevSiblingElement(parent, inPara,  viewOptions);
+        // } else {
+        let prevElement = null;
+        for (let i = index - 1; i >= 0; i--) {
+            prevElement = parent.getChild(i);
+            const res = this.getRecursionSiblingElementCursorPosition(prevElement, viewOptions, 'left');
+            if (res) {
+                return res;
             }
-            return this.getRecursionPrevSiblingElement(parent, inPara, forCursor, viewOptions);
         }
-        else {
-            let prevElement = null;
-            for (let i = index - 1; i >= 0; i--) {
-                prevElement = parent.getChild(i);
-                if (prevElement && !prevElement.disableClick) {
-                    break;
+        //表单模式需要判断当前父级是否已经超出数据元或者数据组的范围
+        if (viewOptions.docMode === DocMode.FormEdit && !ElementUtil.getDataGroupElement(parent)) {
+            return null;
+        }
+        return this.getRecursionPrevSiblingElement(parent, viewOptions);
+        //}
+    }
+    /**
+     * 递归元素里面向前寻找可以定位的元素
+     */
+    static getRecursionSiblingElementCursorPosition(ele, viewOptions, direction) {
+        if (ele instanceof LeafElement) {
+            return this.getElementPositionCursor(ele, viewOptions, direction);
+        }
+        if (ele instanceof BranchElement) {
+            const startIndex = direction === 'left' ? ele.length - 1 : 0;
+            const endIndex = direction === 'left' ? 0 : ele.length - 1;
+            const increment = direction === 'left' ? -1 : 1;
+            for (let i = startIndex; direction === 'left' ? i >= endIndex : i <= endIndex; i += increment) {
+                const child = ele.getChild(i);
+                if (child instanceof LeafElement) {
+                    const res = this.getElementPositionCursor(child, viewOptions, direction);
+                    if (res) {
+                        return res;
+                    }
+                }
+                else if (child instanceof BranchElement) {
+                    const res = this.getRecursionSiblingElementCursorPosition(child, viewOptions, direction);
+                    if (res) {
+                        return res;
+                    }
                 }
             }
-            if (!prevElement || prevElement.disableClick) {
-                return this.getRecursionPrevSiblingElement(parent, inPara, forCursor, viewOptions);
-            }
-            const lastLeafElement = ElementUtil.getLastLeafElement(prevElement);
-            //用于光标定位
-            if (forCursor && lastLeafElement && !ElementUtil.canSetCursor(lastLeafElement, 0, true, viewOptions)) {
-                return this.getRecursionPrevSiblingElement(lastLeafElement, inPara, forCursor, viewOptions);
-            }
-            if (lastLeafElement) {
-                return lastLeafElement;
-            }
-            else {
-                return this.getRecursionPrevSiblingElement(prevElement.parent, inPara, forCursor, viewOptions);
+        }
+        return null;
+    }
+    static getElementPositionCursor(ele, viewOptions, direction) {
+        const endOffset = ElementUtil.getElementEndOffset(ele);
+        const offsets = direction === 'left' ? [endOffset, 0] : [0, endOffset];
+        for (let i = 0; i < offsets.length; i++) {
+            if (ElementUtil.canSetCursor(ele, offsets[i], true, viewOptions)) {
+                return {
+                    ele: ele,
+                    offset: offsets[i]
+                };
             }
         }
+        return null;
     }
     /**
      * 循环向前寻找可定位的数据元
@@ -12405,55 +12564,56 @@ class ElementUtil {
     /**
      * 递归向后寻找最近的元素
      */
-    static getRecursionNextSiblingElement(currElement, inPara = false, forCursor = false, viewOptions) {
+    static getRecursionNextSiblingElement(currElement, viewOptions) {
         const parent = currElement?.parent;
         if (!currElement || !parent) {
             return null;
         }
-        // if (!currElement.paintRenders.length) {
-        //     return this.getRecursionNextSiblingElement(currElement, inPara, forCursor, viewOptions);
+        // //如果当前数据元不可编辑，则直接跳过
+        // if (parent instanceof DataElementInlineGroup && !parent.props.editable && viewOptions.docMode === DocMode.FormEdit) {
+        //     return this.getRecursionNextSiblingElement(parent, inPara, forCursor, viewOptions);
+        // }
+        // //如果当前为数据组，且数据组被隐藏，则直接跳过
+        // if (parent instanceof DataElementGroupElement && parent.props.hidden) {
+        //     return this.getRecursionNextSiblingElement(parent, inPara, forCursor, viewOptions);
+        // }
+        // if (forCursor && parent.disableClick) {
+        //     return this.getRecursionNextSiblingElement(parent, inPara, forCursor, viewOptions);
         // }
-        //如果当前数据元不可编辑，则直接跳过
-        if (parent instanceof DataElementInlineGroup && !parent.props.editable && viewOptions.docMode === DocMode.FormEdit) {
-            return this.getRecursionNextSiblingElement(parent, inPara, forCursor, viewOptions);
-        }
-        //如果当前为数据组，且数据组被隐藏，则直接跳过
-        if (parent instanceof DataElementGroupElement && parent.props.hidden) {
-            return this.getRecursionNextSiblingElement(parent, inPara, forCursor, viewOptions);
-        }
-        if (forCursor && parent.disableClick) {
-            return this.getRecursionNextSiblingElement(parent, inPara, forCursor, viewOptions);
-        }
         const index = parent.getChildIndex(currElement);
-        if (index === parent.length - 1) {
-            if (inPara && parent.type === 'p') {
-                return null;
+        // if (index === parent.length - 1) {
+        //     if (inPara && parent.type === 'p') {
+        //         return null;
+        //     }
+        //     return this.getRecursionNextSiblingElement(parent, inPara, forCursor, viewOptions);
+        // } else {
+        let nextElement = null;
+        for (let i = index + 1; i < parent.length; i++) {
+            nextElement = parent.getChild(i);
+            const res = this.getRecursionSiblingElementCursorPosition(nextElement, viewOptions, 'right');
+            if (res) {
+                return res;
             }
-            return this.getRecursionNextSiblingElement(parent, inPara, forCursor, viewOptions);
         }
-        else {
-            let nextElement = null;
-            for (let i = index + 1; i < parent.length; i++) {
-                nextElement = parent.getChild(i);
-                if (nextElement && !nextElement.disableClick) {
-                    break;
-                }
-            }
-            if (!nextElement || nextElement.disableClick) {
-                return this.getRecursionNextSiblingElement(parent, inPara, forCursor, viewOptions);
-            }
-            const lastLeafElement = ElementUtil.getFirstLeafElement(nextElement);
-            //用于光标定位
-            if (forCursor && lastLeafElement && !ElementUtil.canSetCursor(lastLeafElement, ElementUtil.getElementEndOffset(lastLeafElement), true, viewOptions)) {
-                return this.getRecursionNextSiblingElement(lastLeafElement, inPara, forCursor, viewOptions);
-            }
-            if (lastLeafElement) {
-                return lastLeafElement;
-            }
-            else {
-                return this.getRecursionNextSiblingElement(nextElement.parent, inPara, forCursor, viewOptions);
-            }
+        //表单模式需要判断当前父级是否已经超出数据元或者数据组的范围
+        if (viewOptions.docMode === DocMode.FormEdit && !ElementUtil.getDataGroupElement(parent)) {
+            return null;
         }
+        return this.getRecursionNextSiblingElement(parent, viewOptions);
+        // if (!nextElement || nextElement.disableClick) {
+        //     return this.getRecursionNextSiblingElement(parent, inPara, forCursor, viewOptions);
+        // }
+        // const lastLeafElement = ElementUtil.getFirstLeafElement(nextElement);
+        // //用于光标定位
+        // if (forCursor && lastLeafElement && !ElementUtil.canSetCursor(lastLeafElement, ElementUtil.getElementEndOffset(lastLeafElement), true, viewOptions)) {
+        //     return this.getRecursionNextSiblingElement(lastLeafElement, inPara, forCursor, viewOptions);
+        // }
+        // if (lastLeafElement) {
+        //     return lastLeafElement;
+        // } else {
+        //     return this.getRecursionNextSiblingElement(nextElement.parent, inPara, forCursor, viewOptions);
+        // }
+        //}
     }
     // /**
     // * 在同一段落中，递归向后寻找最近的元素
@@ -12770,10 +12930,10 @@ class ElementUtil {
         return this.getParent(ele, item => item instanceof DataElementInlineGroup);
     }
     /**
-    * 向上查找类型为数据元的父级
-    * @param ele
-    * @returns
-    */
+     * 向上查找类型为数据元的父级
+     * @param ele
+     * @returns
+     */
     static getDataGroupElement(ele) {
         return this.getParent(ele, item => item instanceof DataElementGroupElement);
     }
@@ -13012,6 +13172,9 @@ class ElementUtil {
         }
         return items;
     }
+    static isDataEle(ele) {
+        return validateDataEle(ele) || ele instanceof DataElementGroupElement;
+    }
 }
 
 var TextUnitsHolder;
@@ -13533,7 +13696,7 @@ class EditorContext {
         // const docRefreshSub = this._document.refreshSubject.subscribe(() => {
         //     this.syncRefresh?.();
         // });
-        const docChangedSub = this._document.onChangeSubject.subscribe(() => {
+        const docChangedSub = this._document.onRefreshEvent.subscribe(() => {
             this.syncRefresh?.();
         });
         this.syncRefresh();
@@ -13650,20 +13813,17 @@ class DocumentContext {
         this.ss = ss;
     }
     getControlIDList() {
-        const dataEleList = this.ctx.treeFilter(item => this.isDataEle(item));
+        const dataEleList = this.ctx.treeFilter(item => ElementUtil.isDataEle(item));
         return dataEleList.map(item => item.props.id);
     }
     getControlInstanceList(options) {
-        return this.ctx.treeFilter(item => this.isDataEle(item), options);
+        return this.ctx.treeFilter(item => ElementUtil.isDataEle(item), options);
     }
     getControlById(id) {
-        return this.ctx.treeFind(item => this.isDataEle(item) && item['props']['id'] === id);
-    }
-    isDataEle(ele) {
-        return validateDataEle(ele) || ele instanceof DataElementGroupElement;
+        return this.ctx.treeFind(item => ElementUtil.isDataEle(item) && item['props']['id'] === id);
     }
     getControlByName(name) {
-        return this.ctx.treeFind(item => this.isDataEle(item) && item['props']['name'] === name);
+        return this.ctx.treeFind(item => ElementUtil.isDataEle(item) && item['props']['name'] === name);
     }
     /**
      * 获取数据元值集合
@@ -13681,9 +13841,9 @@ class DocumentContext {
      * @returns
      */
     getDataElementModelList(options) {
-        const dataEleList = this.ctx.treeFilter(item => this.isDataEle(item), options);
+        const dataEleList = this.ctx.treeFilter(item => ElementUtil.isDataEle(item), options);
         //数据元、数据组
-        const dataInlineGroups = dataEleList.filter(item => item instanceof DataElementInlineGroup);
+        const dataInlineGroups = dataEleList.filter(item => item instanceof DataElementInlineGroup || item instanceof DataElementGroupElement);
         const dataLeafs = dataEleList.filter(item => item instanceof DataElementLeaf);
         //复选框数据元
         const dataCheckList = dataLeafs.filter(item => item instanceof DataElementCheck);
@@ -13692,6 +13852,7 @@ class DocumentContext {
             id: item.props.id,
             name: item.props.name,
             fieldName: item.props.fieldName,
+            caption: item.props.caption,
             item,
             getValue: () => {
                 return item.getValue();
@@ -13701,7 +13862,7 @@ class DocumentContext {
             }
         }));
         const dataInlineStructList = dataInlineGroups.map(item => ({
-            id: item.props.id, name: item.props.name, fieldName: item.props.fieldName, item, getValue: () => {
+            id: item.props.id, name: item.props.name, fieldName: item.props.fieldName, caption: item.props.caption, item, getValue: () => {
                 return item.getValue();
             }, setValue: (val) => {
                 item.setValue(val);
@@ -13728,6 +13889,7 @@ class DocumentContext {
                 name: groupCheckItems[0].props.name,
                 fieldName: groupCheckItems[0].props.fieldName,
                 multiSelect: groupCheckItems[0].props.multiSelect,
+                caption: groupCheckItems[0].props.caption,
                 item: groupCheckItems,
                 getValue: () => {
                     let checkedValue = '';
@@ -13766,6 +13928,7 @@ class DocumentContext {
             id: item.props.id,
             name: item.props.name,
             fieldName: item.props.fieldName,
+            caption: item.props.caption,
             item,
             getValue: () => {
                 return item.getValue();
@@ -13792,7 +13955,7 @@ class DocumentContext {
         const trackElements = this.getTrackElements();
         return trackElements.map(item => {
             const trackRun = item;
-            const content = ElementSerialize.serializeString(trackRun, { all: true });
+            const content = ElementSerialize.serializeString(trackRun, { includeRunDel: true });
             return {
                 //用户id
                 userId: trackRun.props.userId,
@@ -13926,6 +14089,9 @@ class DynamicExecute {
         this.doc = doc;
         this.ss = ss;
     }
+    create() {
+        return new DynamicExecute(this.doc, this.ss);
+    }
     setCurrentCtx(ele, depItems) {
         this.current = ele;
         this.depItems = depItems;
@@ -14039,14 +14205,23 @@ class DynamicExecute {
 }
 
 class ParagraphMeasure {
-    options;
+    docCtx;
     renderCtx;
     execute;
-    constructor(options, renderCtx, execute) {
-        this.options = options;
+    options;
+    createData;
+    constructor(docCtx, renderCtx, execute) {
+        this.docCtx = docCtx;
         this.renderCtx = renderCtx;
         this.execute = execute;
+        this.options = this.docCtx.viewOptions;
         this.execute = execute;
+        this.createData = {
+            options: this.options,
+            renderCtx: this.renderCtx,
+            execute: this.execute,
+            onNextView: (cb) => { docCtx.onNextView(cb); }
+        };
     }
     /**
      * 段落排版：
@@ -14289,7 +14464,7 @@ class ParagraphMeasure {
         }
     }
     arrangeInlineGroupElement(parentLine, ele) {
-        const { options, renderCtx, execute } = this;
+        const createData = this.createData;
         let render = this.createRenderObject(ele);
         //记录多行情况下的渲染对象，用于计算总长度，生成fill-null-space
         const inlineGroupRenders = [];
@@ -14330,7 +14505,7 @@ class ParagraphMeasure {
                     render.rect.width += space;
                 }
                 parentLine.applyNewLine();
-                render = ele.createRenderObject({ options, renderCtx, execute });
+                render = ele.createRenderObject(createData);
                 parentLine.add(render);
                 inlineGroupRenders.push(render);
             },
@@ -14616,6 +14791,10 @@ class ParagraphMeasure {
                     const refCtx = execute.getObject(dep);
                     if (refCtx.ref) {
                         const refEle = refCtx.ref.item;
+                        //自己不能引用自己，避免死循环
+                        if (refEle === ele) {
+                            return;
+                        }
                         depEleMap.set(dep, refCtx);
                         //当前有可能是checkbox数组
                         const refEles = Array.isArray(refEle) ? refEle : [refEle];
@@ -14634,6 +14813,62 @@ class ParagraphMeasure {
             console.error('解析表达式出错', ele.attribute?.visibleExpr);
         }
     }
+    // /**
+    //  * 解析侦听表达式
+    //  * 当依赖性元素发生变化时，重新计算运行当前元素的表达式
+    //  * @param ele
+    //  * @param execute
+    //  * @private
+    //  */
+    // parseEffectExpression(ele: Element, execute: DynamicExecute): void {
+    //     if (ele.effectExpr) return;
+    //     if (!ele.attribute?.effectExpr) return;
+    //     const reactiveMode = this.renderCtx.drawMode !== 'print';
+    //     try {
+    //         const depIdItems: Array<string> = [];
+    //         const depEleMap: Map<string, RefCtxValue> = new Map();
+    //         let compliedCode = parser(ele.attribute?.effectExpr, depIdItems);
+    //         compliedCode = addReturn(compliedCode);
+    //         ele.effectExpr = { compliedCode, func: new Function(`with(this){ ${compliedCode} }`), depItems: depEleMap };
+    //         if (depIdItems.length) {
+    //             depIdItems.forEach(dep => {
+    //                 const refCtx = execute.getObject(dep);
+    //                 if (refCtx.ref) {
+    //                     const refEle = refCtx.ref.item as Element;
+    //                     //自己不能引用自己，避免死循环
+    //                     if (refEle === ele) {
+    //                         return;
+    //                     }
+    //                     depEleMap.set(dep, refCtx);
+    //                     //当前有可能是checkbox数组
+    //                     const refEles = Array.isArray(refEle) ? refEle : [refEle];
+    //                     reactiveMode && refEles.forEach(item => {
+    //                         //求值依赖元素更改的时候，发布当前元素重新计算的指令
+    //                         item.onChangeSubject.subscribe(() => {
+    //                             try {
+    //                                 this.docCtx.onNextView(() => {
+    //                                     //当前元素可能被删除
+    //                                     const func = ele?.effectExpr?.func;
+    //                                     if (!func) {
+    //                                         return;
+    //                                     }
+    //                                     const tempExecuter = execute.create();
+    //                                     tempExecuter.setCurrentCtx(ele, ele.effectExpr.depItems);
+    //                                     const fn = func.bind(tempExecuter);
+    //                                     fn();
+    //                                 })
+    //                             } catch (e) {
+    //                                 console.error(e, "表达式执行出错", ele.effectExpr.compliedCode);
+    //                             }
+    //                         });
+    //                     });
+    //                 }
+    //             });
+    //         }
+    //     } catch (e) {
+    //         console.error('解析表达式出错', ele.attribute?.effectExpr);
+    //     }
+    // }
     /**
      * 元素可见行求值
      * @param ele
@@ -14663,11 +14898,10 @@ class ParagraphMeasure {
                 return null;
             }
         }
-        return element.createRenderObject({
-            options: this.options,
-            renderCtx: this.renderCtx,
-            execute: this.execute
-        });
+        // if (this.options.enableDyExpression) {
+        //     this.parseEffectExpression(element, this.execute);
+        // }
+        return element.createRenderObject(this.createData);
     }
 }
 
@@ -14681,6 +14915,8 @@ class SelectionOverlays {
     selectionEleSets = new Map();
     //批注对象集合
     commRangeSets = new Map();
+    //其他对象集合,例如查找对象
+    otherRangeSets = new Map();
     constructor(selectionState) {
         this.selectionState = selectionState;
     }
@@ -14730,6 +14966,18 @@ class SelectionOverlays {
             this.addToSets(range.selectedChildren[i], set);
         }
     }
+    addToOtherRangeSets(range) {
+        if (!this.otherRangeSets.has(range.target)) {
+            this.otherRangeSets.set(range.target, []);
+        }
+        this.otherRangeSets.get(range.target)?.push(range);
+        for (let i = 0; i < range.selectedChildren.length; i++) {
+            this.addToOtherRangeSets(range.selectedChildren[i]);
+        }
+    }
+    clearOtherRangeSets() {
+        this.otherRangeSets.clear();
+    }
     /**
      * 添加到批注集合
      * @param range
@@ -14822,7 +15070,7 @@ class DocumentArrange {
         return suppressTracking(() => {
             const doc = this.docCtx.document;
             this.execute = new DynamicExecute(doc, this.docCtx.selectionState);
-            this.pMeasure = new ParagraphMeasure(this.options, this.renderCtx, this.execute);
+            this.pMeasure = new ParagraphMeasure(this.docCtx, this.renderCtx, this.execute);
             const data = {
                 doc,
                 options: this.options,
@@ -15030,7 +15278,7 @@ class DocumentArrange {
         if (this.options.textRowLineMode && ele instanceof TableElement && ele.cacheRender) {
             const cacheRender = ele.cacheRender;
             clearChildrenRenderCache(ele);
-            textLineRenderMode(cacheRender, { options: this.options, renderCtx: this.renderCtx, execute: this.execute });
+            textLineRenderMode(cacheRender, { options: this.options, renderCtx: this.renderCtx, execute: this.execute, onNextView: (cb) => { this.docCtx.onNextView(cb); } });
         }
     }
     getDocInnerRect(documentRender) {
@@ -15383,6 +15631,9 @@ class DocumentArrange {
     clearPaintCache(ele, data) {
         ele.paintRenders.length = 0;
         ele.beginMeasure(data);
+        if (ele.modifyFlag !== ModifyFlag.None) {
+            ele.onChangeSubject.next();
+        }
         this.identifyComment(ele);
         if (ele instanceof BranchElement) {
             for (let i = 0; i < ele.length; i++) {
@@ -15454,7 +15705,7 @@ class DocumentArrange {
         if (!this.options.enableFastMeasure) {
             return false;
         }
-        this.pMeasure = new ParagraphMeasure(this.options, this.renderCtx, this.execute);
+        this.pMeasure = new ParagraphMeasure(this.docCtx, this.renderCtx, this.execute);
         const ops = this.docCtx.currentOpsLog;
         if (!ops.length) {
             return false;
@@ -15513,7 +15764,7 @@ class DocumentArrange {
         return suppressTracking(() => {
             const doc = this.docCtx.document;
             this.execute = new DynamicExecute(doc, this.docCtx.selectionState);
-            this.pMeasure = new ParagraphMeasure(this.options, this.renderCtx, this.execute);
+            this.pMeasure = new ParagraphMeasure(this.docCtx, this.renderCtx, this.execute);
             const data = {
                 doc,
                 options: this.options,
@@ -15551,6 +15802,7 @@ class DocumentPaginator {
             return;
         }
         this.docContainer = new DocumentContainerRender();
+        //this.docContainer.padding.top = this.viewOptions.showRule ? 50 : 0;
         this.docCtx.selectionState.renderContainer = this.docContainer;
         this.docContainer.rect.width = this.viewOptions.docPageSettings.width;
         const newMeasure = new DocumentArrange(this.docCtx, this.renderContext, this.seo);
@@ -16871,13 +17123,14 @@ class DocumentEvent {
     moveCursorToLeftHandle(startControl, startOffset) {
         if (startOffset === 0) {
             const oldRegion = ElementUtil.getElementRegion(startControl);
-            const prevEle = ElementUtil.getRecursionPrevSiblingElement(startControl, false, true, this.viewOptions);
-            if (prevEle) {
-                const newRegion = ElementUtil.getElementRegion(prevEle);
+            const cursorPosition = ElementUtil.getRecursionPrevSiblingElement(startControl, this.viewOptions);
+            if (cursorPosition) {
+                const { ele: prevEle, offset } = cursorPosition;
+                const newRegion = ElementUtil.getElementRegion(cursorPosition.ele);
                 if (newRegion !== oldRegion) {
                     return;
                 }
-                if (this.viewOptions.docMode === DocMode.FormEdit && !ElementUtil.canSetCursor(prevEle, ElementUtil.fixedOffset(prevEle, -1), true, this.viewOptions)) {
+                if (this.viewOptions.docMode === DocMode.FormEdit && !ElementUtil.canSetCursor(prevEle, offset, true, this.viewOptions)) {
                     this.moveCursorToLeftHandle(prevEle, 0);
                     return;
                 }
@@ -16925,17 +17178,18 @@ class DocumentEvent {
     moveCursorToRightHandle(startControl, startOffset) {
         if (this.isLeafEleEndOffset(startControl, startOffset)) {
             const oldRegion = ElementUtil.getElementRegion(startControl);
-            const nextEle = ElementUtil.getRecursionNextSiblingElement(startControl, false, true, this.viewOptions);
-            if (nextEle) {
-                const newRegion = ElementUtil.getElementRegion(nextEle);
+            const cursorPosition = ElementUtil.getRecursionNextSiblingElement(startControl, this.viewOptions);
+            if (cursorPosition) {
+                const { ele, offset } = cursorPosition;
+                const newRegion = ElementUtil.getElementRegion(ele);
                 if (oldRegion !== newRegion) {
                     return;
                 }
-                if (this.viewOptions.docMode === DocMode.FormEdit && !ElementUtil.canSetCursor(nextEle, ElementUtil.fixedOffset(nextEle, -1), true, this.viewOptions)) {
-                    this.moveCursorToRightHandle(nextEle, ElementUtil.fixedOffset(nextEle, -1));
+                if (this.viewOptions.docMode === DocMode.FormEdit && !ElementUtil.canSetCursor(ele, offset, true, this.viewOptions)) {
+                    this.moveCursorToRightHandle(ele, offset);
                     return;
                 }
-                this.selectionState.resetRange(nextEle, 0);
+                this.selectionState.resetRange(ele, 0);
                 return;
             }
         }
@@ -17664,7 +17918,7 @@ class DocumentChange {
         }
         this.selectionState.clear();
         //用于刷新后定位光标
-        let startPointElement;
+        let startPointElement = null;
         let startPointOffset = 0;
         if (selectedRange.isFullSelected) {
             //某个容器的内容被全部选中
@@ -17714,8 +17968,14 @@ class DocumentChange {
                     startPointOffset = res.offset;
                 }
                 else {
-                    startPointElement = ElementUtil.getRecursionPrevSiblingElement(startRange.target, false, true, this.viewOptions);
-                    startPointOffset = -1;
+                    const cursorPosition = ElementUtil.getRecursionPrevSiblingElement(startRange.target, this.viewOptions);
+                    if (cursorPosition) {
+                        startPointElement = cursorPosition.ele;
+                        startPointOffset = cursorPosition.offset;
+                    }
+                    else {
+                        startPointElement = null;
+                    }
                     //判断结束选区和开始选区是否在一个段落中，尽量落在同一段落中
                     if (!startPointElement || ElementUtil.isInSameParagraph(startRange.target, endRange.target)) {
                         if (!endRange.isFullSelected) {
@@ -17772,11 +18032,12 @@ class DocumentChange {
     onBackspaceElement(control, offset) {
         this.selectionState.clear();
         if (offset === 0) {
-            const prevEle = ElementUtil.getRecursionPrevSiblingElement(control, false, true, this.viewOptions);
-            if (!prevEle) {
+            const cursorPosition = ElementUtil.getRecursionPrevSiblingElement(control, this.viewOptions);
+            if (!cursorPosition) {
                 this.selectionState.resetRange(control, 0);
                 return;
             }
+            const { ele: prevEle, offset } = cursorPosition;
             if (ElementUtil.isInSameParagraph(control, prevEle)) {
                 if (ElementUtil.getPrevSiblingElement(control) === prevEle) {
                     this.onBackspaceElement(prevEle, ElementUtil.getElementEndOffset(prevEle));
@@ -17862,18 +18123,24 @@ class DocumentChange {
      */
     onKeyDeleteElement(control, offset) {
         this.selectionState.clear();
+        if (control instanceof PSymbolElement) {
+            offset = 1;
+        }
         if (offset === ElementUtil.getElementEndOffset(control)) {
-            const nextEle = ElementUtil.getRecursionNextSiblingElement(control, false, true, this.viewOptions);
-            if (!nextEle) {
+            const cursorPosition = ElementUtil.getRecursionNextSiblingElement(control, this.viewOptions);
+            if (!cursorPosition) {
                 this.selectionState.resetRange(control, -1);
                 return;
             }
+            //const {ele: nextEle, offset} = cursorPosition;
+            const nextEle = cursorPosition.ele;
+            offset = cursorPosition.offset;
             if (ElementUtil.isInSameParagraph(control, nextEle)) {
                 if (ElementUtil.getNextSiblingElement(control) === nextEle) {
-                    this.onKeyDeleteElement(nextEle, 0);
+                    this.onKeyDeleteElement(nextEle, offset);
                 }
                 else {
-                    this.selectionState.resetRange(nextEle, 0);
+                    this.selectionState.resetRange(nextEle, offset);
                 }
             }
             else {
@@ -17886,7 +18153,7 @@ class DocumentChange {
                         this.selectionState.resetRange(nextEle, 0);
                         return;
                     }
-                    this.combineParagraph(nextPara, currPara, control);
+                    this.combineParagraph(currPara, nextPara, control);
                 }
                 else {
                     //不是紧挨着的段落，则前一个段落是位于另一个容器里，例如：处于单元格内的段落
@@ -17906,21 +18173,29 @@ class DocumentChange {
                 }
             }
             else {
-                if (control.parent instanceof DataElementInlineGroup && control instanceof DataDecorateElement) {
+                //当前为数据修饰元素，需要做额外判定是否需要删除数据元素
+                if (ElementUtil.isDataEle(control.parent) && control instanceof DataDecorateElement) {
                     const dataEle = control.parent;
                     //空数据元，并且当前光标处于数据元开始位置
-                    if (control.isPrefix) {
+                    if (dataEle.length === 2) {
                         if (this.canDeleteInlineGroup(dataEle)) {
                             this.setCursorForDeleteAction(dataEle);
                             dataEle.remove();
                         }
                         else {
-                            this.selectionState.resetRange(control, -1);
+                            this.selectionState.resetRange(dataEle.startDecorate, 1);
                         }
                         return;
                     }
-                    else if (!control.isPrefix && dataEle.length === 2) {
-                        this.selectionState.resetRange(dataEle.endDecorate, -1);
+                    else {
+                        //this.setCursorForDeleteAction(dataEle);
+                        const cursorInfo = ElementUtil.getRecursionNextSiblingElement(control, this.viewOptions);
+                        if (cursorInfo) {
+                            this.selectionState.resetRange(cursorInfo.ele, cursorInfo.offset);
+                        }
+                        else {
+                            this.selectionState.resetRange(control, 0);
+                        }
                         return;
                     }
                 }
@@ -17992,14 +18267,14 @@ class DocumentChange {
         //当前用户增加的内容，内容直接删除不需要留痕
         if (this.isInCurrentUserTrack(target, TrackRunTypeEnum.Inserted)) {
             target.remove();
-            this.removeEmtpyInlineBlock(parent);
+            this.removeEmptyInlineBlock(parent);
             return;
         }
         //target.remove();
         const trackEle = this.getNextTrackElement(target, TrackRunTypeEnum.Deleted);
         trackEle.addChild(target.clone(true), 0);
         target.remove();
-        this.removeEmtpyInlineBlock(parent);
+        this.removeEmptyInlineBlock(parent);
     }
     /**
      * 更新文本删除留痕
@@ -18071,35 +18346,36 @@ class DocumentChange {
      * @returns
      */
     removeElement(control) {
-        const prevEle = ElementUtil.getRecursionPrevSiblingElement(control, false, true, this.viewOptions);
-        if (!prevEle) {
-            const nextEle = ElementUtil.getRecursionNextSiblingElement(control, true, true, this.viewOptions);
-            if (nextEle) {
+        let cursorPosition = ElementUtil.getRecursionPrevSiblingElement(control, this.viewOptions);
+        if (!cursorPosition) {
+            cursorPosition = ElementUtil.getRecursionNextSiblingElement(control, this.viewOptions);
+            if (cursorPosition) {
                 //this.selectionState.resetRange(nextEle, 0);
-                this.setSelectionStateByDeleteEvent(nextEle, 0, control);
+                this.setSelectionStateByDeleteEvent(cursorPosition.ele, cursorPosition.offset, control);
                 control.remove();
                 return;
             }
             this.selectionState.resetRange(control, 0);
             return;
         }
-        if (ElementUtil.isInSameParagraph(control, prevEle)) {
+        if (ElementUtil.isInSameParagraph(control, cursorPosition.ele)) {
             //this.selectionState.resetRange(prevEle, -1);
-            this.setSelectionStateByDeleteEvent(prevEle, -1, control);
+            this.setSelectionStateByDeleteEvent(cursorPosition.ele, -1, control);
             control.remove();
             return;
         }
         else {
-            const nextEle = ElementUtil.getRecursionNextSiblingElement(control, true, true, this.viewOptions);
-            if (nextEle && ElementUtil.getPrevSiblingElement(nextEle) === control) {
+            const cursorPosition = ElementUtil.getRecursionNextSiblingElement(control, this.viewOptions);
+            if (cursorPosition && ElementUtil.getPrevSiblingElement(cursorPosition.ele) === control) {
                 //this.selectionState.resetRange(nextEle, 0);
-                this.setSelectionStateByDeleteEvent(nextEle, 0, control);
+                this.setSelectionStateByDeleteEvent(cursorPosition.ele, cursorPosition.offset, control);
                 control.remove();
                 return;
             }
             else {
                 //this.selectionState.resetRange(prevEle, -1);
-                this.setSelectionStateByDeleteEvent(prevEle, -1, control);
+                //this.setSelectionStateByDeleteEvent(cursorPosition.ele, -1, control);
+                //TODO: 需要检测下
                 control.remove();
                 return;
             }
@@ -18618,7 +18894,7 @@ class DocumentChange {
         }
         //表单模式:如果复制的是单格式的文本，需要序列化为纯文本处理
         if (this.viewOptions.docMode === DocMode.FormEdit) {
-            const pasteString = pasteEles.map(item => ElementSerialize.serializeString(item, { all: false })).join('');
+            const pasteString = pasteEles.map(item => ElementSerialize.serializeString(item)).join('');
             if (pasteString) {
                 this.pastePlainText(pasteString);
             }
@@ -18855,7 +19131,10 @@ class DocumentChange {
     }
     validate() {
         const dataEleList = this.docCtx.document.treeFilter(item => item instanceof DataElementInlineGroup);
-        const errorEleList = dataEleList.map(item => ({ error: item.validate(), ele: item })).filter(item => item.error);
+        const errorEleList = dataEleList.map(item => ({
+            error: item.validate(),
+            ele: item
+        })).filter(item => item.error);
         if (!errorEleList.length) {
             return true;
         }
@@ -18889,7 +19168,7 @@ class DocumentChange {
         this.setCursorForDeleteAction(text);
         const parent = text.parent;
         text.remove();
-        this.removeEmtpyInlineBlock(parent);
+        this.removeEmptyInlineBlock(parent);
     }
     setCursorForDeleteAction(control) {
         const cursorInfo = this.getCursorElementByDeleteAction(control);
@@ -18907,12 +19186,9 @@ class DocumentChange {
                 return ele.parent instanceof DataElementInlineGroup || ele.parent instanceof DataElementGroupElement;
             };
             if (isInDataAre(control)) {
-                const prevLeafElementInPara = ElementUtil.getRecursionPrevSiblingElement(control, true, true, this.viewOptions);
-                if (prevLeafElementInPara && isInDataAre(prevLeafElementInPara)) {
-                    return {
-                        ele: prevLeafElementInPara,
-                        offset: ElementUtil.getElementEndOffset(prevLeafElementInPara)
-                    };
+                const cursorPosition = ElementUtil.getRecursionPrevSiblingElement(control, this.viewOptions);
+                if (cursorPosition && isInDataAre(cursorPosition.ele)) {
+                    return cursorPosition;
                 }
                 else {
                     return {
@@ -18922,27 +19198,21 @@ class DocumentChange {
                 }
             }
         }
-        const prevLeafElementInPara = ElementUtil.getRecursionPrevSiblingElement(control, false, true, this.viewOptions);
+        const cursorPosition = ElementUtil.getRecursionPrevSiblingElement(control, this.viewOptions);
         //是否为同一段落
-        if (prevLeafElementInPara && ElementUtil.isInSameParagraph(prevLeafElementInPara, control)) {
-            return {
-                ele: prevLeafElementInPara,
-                offset: ElementUtil.getElementEndOffset(prevLeafElementInPara)
-            };
+        if (cursorPosition && ElementUtil.isInSameParagraph(cursorPosition.ele, control)) {
+            return cursorPosition;
         }
         //同一段落其他元素
-        const nextLeafElementInPara = ElementUtil.getRecursionNextSiblingElement(control, true, true, this.viewOptions);
-        if (nextLeafElementInPara) {
-            return {
-                ele: nextLeafElementInPara,
-                offset: 0
-            };
+        const nextCursorPosition = ElementUtil.getRecursionNextSiblingElement(control, this.viewOptions);
+        if (nextCursorPosition) {
+            return nextCursorPosition;
         }
         //上一段落
-        if (prevLeafElementInPara) {
+        if (cursorPosition) {
             return {
-                ele: prevLeafElementInPara,
-                offset: prevLeafElementInPara instanceof PSymbolElement ? 0 : ElementUtil.getElementEndOffset(prevLeafElementInPara)
+                ele: cursorPosition.ele,
+                offset: cursorPosition.ele instanceof PSymbolElement ? 0 : ElementUtil.getElementEndOffset(cursorPosition.ele)
             };
         }
         return null;
@@ -18951,11 +19221,12 @@ class DocumentChange {
      * 移除空行内标签
      * @param ele
      */
-    removeEmtpyInlineBlock(ele) {
+    removeEmptyInlineBlock(ele) {
         if (ele instanceof InlineGroupElement && ele.length === 0) {
             const parent = ele.parent;
             ele.remove();
-            this.removeEmtpyInlineBlock(parent);
+            //track-run 标签等
+            this.removeEmptyInlineBlock(parent);
         }
     }
     /**
@@ -19769,6 +20040,12 @@ class DocumentSvg {
             const range = this.sso.commRangeSets.get(render.element);
             createMaskVNode(range, selectionMask.mask);
         }
+        if (this.sso.otherRangeSets.has(render.element)) {
+            const ranges = this.sso.otherRangeSets.get(render.element);
+            ranges.forEach(range => {
+                createMaskVNode(range, selectionMask.mask);
+            });
+        }
     }
     getHTMLVNode(docRenders) {
         this.counterMap = {};
@@ -19975,6 +20252,7 @@ class EditorCalendarVNode {
         if (parent) {
             const parentRect = parent.getBoundingClientRect();
             const elmRect = elm.getBoundingClientRect();
+            const top = parseInt(elm.style.top);
             // elmRect.width /= scale;
             // elmRect.height /= scale;
             // parentRect.width /= scale;
@@ -19990,12 +20268,13 @@ class EditorCalendarVNode {
                 //elm.style.left = parentRect.width - elmRect.width + 'px';
             }
             if (elmRect.top + elmRect.height > parentRect.top + parentRect.height) {
-                const newTop = position.y - position.height - elmRect.height;
-                const oldTop = position.y + 5 + position.height;
+                const newTop = top - 5 - position.height - elmRect.height;
+                position.y + 5 + position.height;
                 //计算前后的高度的差距,然后判断新的值是否在父元素的范围内，如果不在则使用旧的值
-                if (newTop > 0 && oldTop - newTop < elmRect.top - parentRect.top) {
-                    elm.style.top = (position.y - position.height - elmRect.height) + 'px';
-                }
+                // if (newTop > 0 && oldTop - newTop < elmRect.top - parentRect.top) {
+                //     elm.style.top = (position.y - position.height - elmRect.height) + 'px';
+                // }
+                elm.style.top = newTop + 'px';
                 //elm.style.top = (top - (elmRect.top + elmRect.height - (parentRect.top + parentRect.height))) + 'px';
                 //elm.style.top = (position.y - position.height - elmRect.height) + 'px';
             }
@@ -20075,7 +20354,7 @@ class EditorCalendarVNode {
                                 const sel = 'div.editor-calendar-body-day-item'
                                     + (day.isCurrentMonth ? ".editor-calendar-body-day-item--current-month" : "")
                                     + (day.today ? ".editor-calendar-body-day-item--today" : "")
-                                    + (this.selectedDate.value === day.date ? ".editor-calendar-body-day-item--selected" : "");
+                                    + (this.selectedDate.value === day.date ? ".editor-calendar-item--selected" : "");
                                 return {
                                     sel,
                                     data: {
@@ -20410,21 +20689,23 @@ class EditorCalendarVNode {
     }
 }
 
+const svgNS = "http://www.w3.org/2000/svg";
 class DocRule {
     docCtx;
     //private ctx!: CanvasRenderingContext2D;
     options;
     //标尺高度
-    ruleHeight = 30;
+    ruleHeight = 28;
+    thumbWidth = 12;
     //当前标尺的位置
     thumbX;
     mouseDownPos;
-    indentThumbPoints = [];
-    hangThumbPoints = [];
+    //private indentThumbPoints: Array<Position> = [];
+    //private hangThumbPoints: Array<Position> = [];
     mouseDownThumbType = 'none';
     viewOptions;
     ss;
-    nodes = [];
+    //private nodes: Array<any> = [];
     constructor(docCtx) {
         this.docCtx = docCtx;
         this.viewOptions = this.docCtx.viewOptions;
@@ -20440,14 +20721,8 @@ class DocRule {
             indent: 0,
             hanging: 0
         };
-        // this.canvas.addEventListener("mousedown", (evt) => this.canvasMousedown(evt));
-        // this.canvas.addEventListener("mousemove", (evt) => this.canvasMousemove(evt));
-        // this.canvas.addEventListener("mouseup", (evt) => this.canvasMouseup(evt));
     }
     destroy() {
-        // this.canvas.removeEventListener("mousedown", this.canvasMousedown);
-        // this.canvas.removeEventListener("mousemove", this.canvasMousemove);
-        // this.canvas.removeEventListener("mouseup", this.canvasMouseup);
     }
     setRuleOptions(options) {
         this.options = options;
@@ -20458,208 +20733,91 @@ class DocRule {
         //ElementUtil.setCanvasProps(this.canvas, this.ctx, {width: this.getParentWidth(), height: this.ruleHeight});
         //this.canvas.style.left = this.options.docLeft + 'px';
     }
-    fillRectSvg(x, y, width, height, color) {
-        return ElementUtil.getFillSvgRect(x, y, width, height, color);
-    }
-    drawIndentThumbSvg(x, y) {
-        const points = [];
-        x -= 4;
-        points.push({ x: x, y });
-        points.push({ x: x, y: y + 3 });
-        points.push({ x: x + 4, y: y + 7 });
-        points.push({ x: x + 8, y: y + 3 });
-        points.push({ x: x + 8, y });
-        points.push({ x: x, y });
-        this.drawLineSvg(points);
-        return points;
-    }
-    drawHangThumbSvg(x, y) {
-        const points = [];
-        x -= 4;
-        points.push({ x: x, y });
-        points.push({ x: x, y: y - 3 });
-        points.push({ x: x + 4, y: y - 7 });
-        points.push({ x: x + 8, y: y - 3 });
-        points.push({ x: x + 8, y });
-        points.push({ x: x, y });
-        points.push({ x: x, y: y + 3 });
-        points.push({ x: x + 8, y: y + 3 });
-        points.push({ x: x + 8, y: y });
-        this.drawLineSvg(points);
-        return points;
-    }
-    drawLineSvg(points) {
-        this.nodes.push(ElementUtil.getStrokeSvgPath(points, "black", 0.5));
-    }
-    drawTextSvg(text, x, y) {
-        this.nodes.push({
-            sel: 'text',
-            text: text,
-            data: {
-                ns: "http://www.w3.org/2000/svg",
-                attrs: {
-                    'dominant-baseline': 'hanging',
-                    'font-family': "仿宋",
-                    'font-size': 8,
-                    x,
-                    y,
-                    'text-anchor': 'middle'
-                }
-            }
-        });
-    }
     refreshRuleSvg() {
         const editor = this;
         return {
             render() {
-                if (!editor.viewOptions.showRule) {
-                    return null;
-                }
-                editor.nodes = [];
-                editor.drawRuleSvg();
-                const node = {
-                    sel: 'g', data: {
-                        ns: 'http://www.w3.org/2000/svg',
-                    }, children: [...editor.nodes]
-                };
-                return {
-                    sel: 'div.doc-rule',
-                    data: {
-                        style: {
-                            left: `${editor.options.docLeft}px`,
-                        },
-                        on: {
-                            mousedown: (evt) => editor.canvasMousedown(evt),
-                            mousemove: (evt) => editor.canvasMousemove(evt),
-                            mouseup: (evt) => editor.canvasMouseup(evt)
-                        }
-                    },
-                    children: [
-                        {
-                            sel: 'svg',
-                            data: {
-                                ns: 'http://www.w3.org/2000/svg',
-                                attrs: {
-                                    width: editor.options.width,
-                                    height: editor.ruleHeight
-                                }
-                            },
-                            children: [node]
-                        }
-                    ]
-                };
+                return editor.getRuleSVG();
             }
         };
     }
-    canvasMousedown(evt) {
-        const clickPos = this.getMousePos(evt);
-        if (this.pointInPoly(clickPos, this.indentThumbPoints)) {
-            this.mouseDownThumbType = 'indent';
-            this.mouseDownPos = clickPos;
-        }
-        else if (this.pointInPoly(clickPos, this.hangThumbPoints)) {
-            this.mouseDownThumbType = 'hang';
-            this.mouseDownPos = clickPos;
-        }
-        else {
-            console.log("未点击在里面");
+    getRuleSVG() {
+        if (!this.viewOptions.showRule) {
+            return null;
         }
-    }
-    getMousePos(evt) {
-        return {
-            x: evt.offsetX,
-            y: evt.offsetY
+        //editor.nodes = [];
+        const paraRender = this.getRuleMarksPos();
+        //editor.drawRuleSvg();
+        const leftBg = ElementUtil.getFillSvgRect(0, 0, this.options.pagePL, this.ruleHeight, "rgb(198,198,198)");
+        const rightBg = ElementUtil.getFillSvgRect(this.options.width - this.options.pagePR, 0, this.options.pagePR, this.ruleHeight, "rgb(198,198,198)");
+        const svg = {
+            sel: 'svg',
+            data: {
+                ns: svgNS,
+                attrs: {
+                    width: this.options.width,
+                    height: this.ruleHeight
+                }
+            },
+            children: [leftBg, rightBg]
         };
-    }
-    canvasMousemove(evt) {
-        if (['indent', 'hang'].indexOf(this.mouseDownThumbType) < 0) {
-            return;
-        }
-        if (!this.mouseDownPos) {
-            return;
-        }
-        const canvasPos = this.getMousePos(evt);
-        let moveX = canvasPos.x - this.mouseDownPos.x;
-        //至少移动5px再进行修改
-        const remainder = moveX % 5;
-        if (Math.abs(remainder) < 3) {
-            return;
-        }
-        else {
-            if (remainder < 0) {
-                moveX -= 5 + remainder;
-            }
-            else {
-                moveX += 5 - remainder;
-            }
-        }
-        if (moveX === 0) {
-            return;
-        }
-        canvasPos.x = this.mouseDownPos.x + moveX;
-        const para = this.getCurrPara();
-        if (!para) {
-            throw new Error('para is null');
-        }
-        if (this.mouseDownThumbType === 'indent') {
-            this.thumbX.indent += moveX;
-            this.thumbX.indent = this.thumbX.indent < 0 ? 0 : this.thumbX.indent;
-            this.thumbX.indent = this.thumbX.indent > this.options.width ? this.options.width : this.thumbX.indent;
-            this.mouseDownPos = canvasPos;
-            para.props.indent += moveX;
-            this.drawRuleSvg();
-        }
-        if (this.mouseDownThumbType === 'hang') {
-            this.thumbX.hanging += moveX;
-            this.thumbX.hanging = this.thumbX.hanging < 0 ? 0 : this.thumbX.hanging;
-            this.thumbX.hanging = this.thumbX.hanging > this.options.width ? this.options.width : this.thumbX.hanging;
-            this.mouseDownPos = canvasPos;
-            para.props.hanging += moveX;
-            this.drawRuleSvg();
-        }
-    }
-    canvasMouseup(evt) {
-        this.mouseDownThumbType = 'none';
-        this.mouseDownPos = null;
-    }
-    pointInPoly(pt, poly) {
-        let c = false;
-        for (let i = -1, l = poly.length, j = l - 1; ++i < l; j = i) {
-            if (((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y)) && pt.x < ((poly[j].x - poly[i].x) * (pt.y - poly[i].y)) / (poly[j].y - poly[i].y) + poly[i].x) {
-                c = !c;
-            }
-        }
-        return c;
-    }
-    /**
-     * 绘制
-     */
-    drawRuleSvg() {
-        this.getRuleMarksPos();
-        this.nodes.push(ElementUtil.getFillSvgRect(0, 0, this.options.pagePL, this.ruleHeight, "rgb(198,198,198)"));
-        this.nodes.push(ElementUtil.getFillSvgRect(this.options.width - this.options.pagePR, 0, this.options.pagePR, this.ruleHeight, "rgb(198,198,198)"));
         for (let j = 0; j < 50; j++) {
-            const gantWidth = 20;
-            const points = [];
+            const gantWidth = 38;
+            //const points: Array<Position> = [];
             const x = j * gantWidth;
             if (x > this.options.width) {
                 break;
             }
             const y = 10;
-            points.push({ x, y }, { x, y: y + 10 });
-            this.drawLineSvg(points);
-            this.drawTextSvg(j + '', x + Math.floor(gantWidth / 2), y + 1);
+            svg.children.push(ElementUtil.getStrokeSvgPath([{ x, y }, { x, y: y + 10 }], "black", 0.5));
+            svg.children.push({
+                sel: 'text',
+                text: j,
+                data: {
+                    ns: svgNS,
+                    attrs: {
+                        'dominant-baseline': 'hanging',
+                        'font-family': "仿宋",
+                        'font-size': 10,
+                        x: x + Math.floor(gantWidth / 2),
+                        y,
+                        'text-anchor': 'middle'
+                    }
+                }
+            });
         }
-        this.indentThumbPoints = this.drawIndentThumbSvg(this.thumbX.indent, 6);
-        this.hangThumbPoints = this.drawHangThumbSvg(this.thumbX.hanging, 25);
-        //this.ctx.restore();
+        const indentThumb = this.createTopThumb();
+        const hangThumb = this.createLeftThumb();
+        this.drawCellMark(svg.children, paraRender);
+        return {
+            sel: 'div.rule-wrapper',
+            data: {
+                style: {
+                    transform: 'scale(' + this.viewOptions.scale + ')',
+                    'transform-origin': '0 0'
+                }
+            },
+            children: [{
+                    sel: 'div.doc-rule',
+                    data: {
+                        style: {
+                            left: `${this.options.docLeft}px`,
+                        }
+                    },
+                    children: [
+                        svg,
+                        indentThumb,
+                        hangThumb
+                    ]
+                }]
+        };
     }
     getRuleMarksPos() {
         const { startControl, startOffset, startHitInfo } = this.ss;
         if (!startControl || !startHitInfo) {
             this.thumbX.indent = 0;
             this.thumbX.hanging = 0;
-            return;
+            return null;
         }
         const para = ElementUtil.getParentByType(startControl, ParagraphElement);
         const indent = para.props.indent;
@@ -20677,7 +20835,8 @@ class DocRule {
         this.thumbX.indent = paraRenderPos.x - docRenderPos.x + indent;
         this.thumbX.hanging = paraRenderPos.x - docRenderPos.x + hanging;
         this.options.docLeft = docRender.rect.x + docRender.parent.rect.x;
-        this.setParentMarksPosSvg(paraRender);
+        return paraRender;
+        //this.setParentMarksPosSvg(paraRender);
     }
     getCurrPara() {
         const { startControl, startOffset } = this.ss;
@@ -20686,32 +20845,172 @@ class DocRule {
         }
         return ElementUtil.getParentByType(startControl, ParagraphElement);
     }
-    setParentMarksPosSvg(childRender) {
-        const items = [];
-        const parentRender = childRender.parent;
-        if (!parentRender || parentRender instanceof DocumentRenderObject) {
-            return items;
+    drawCellMark(svgChildren, parentRender) {
+        if (!parentRender) {
+            return;
         }
-        if (parentRender instanceof TableRowRenderObject) {
-            const docRender = ElementUtil.getParentRender(parentRender, DocumentRenderObject);
-            const docRenderPos = ElementUtil.getRenderAbsolutePaintPos(docRender);
-            for (let i = 0; i < parentRender.length; i++) {
-                const cellRender = parentRender.getChild(i);
-                const pos = ElementUtil.getRenderAbsolutePaintPos(cellRender);
-                this.drawCellMarkSvg(pos.x - docRenderPos.x, 0, cellRender.padding.left);
-            }
+        const tableRowRender = ElementUtil.getParentRender(parentRender, TableRowRenderObject);
+        if (!tableRowRender) {
+            return;
+        }
+        const docRender = ElementUtil.getParentRender(parentRender, DocumentRenderObject);
+        const docRenderPos = ElementUtil.getRenderAbsolutePaintPos(docRender);
+        for (let i = 0; i < tableRowRender.length; i++) {
+            const cellRender = tableRowRender.getChild(i);
+            const pos = ElementUtil.getRenderAbsolutePaintPos(cellRender);
+            svgChildren.push(ElementUtil.getFillSvgRect(pos.x - docRenderPos.x - 1, 0, 2, this.ruleHeight, "#bbb"));
         }
-        items.push(...this.setParentMarksPosSvg(parentRender));
-        return items;
     }
-    drawCellMarkSvg(x, y, width) {
-        this.nodes.push(ElementUtil.getFillSvgRect(x, y, width, this.ruleHeight, 'rgb(198,198,198,0.2)'));
-        for (let i = 0; i < width; i++) {
-            const path = ElementUtil.getStrokeSvgPath(`M${x + i} ${y} L${x + i} ${y + this.ruleHeight}`, 'rgb(198,198,198,0.2)', 0.3);
-            path.data.attrs['stroke-dasharray'] = "0.5,0.5";
-            this.nodes.push(path);
+    /**
+    * 绘制首行缩进thumb
+    * @returns
+    */
+    createTopThumb() {
+        const para = this.getCurrPara();
+        if (!para) {
+            return null;
         }
+        const onMousedown = (evt) => {
+            evt.preventDefault();
+            //const pos = this.getMousePos(evt);
+            const oldX = evt.x;
+            const para = this.getCurrPara();
+            if (!para) {
+                return;
+            }
+            const indent = para.props.indent;
+            const mousemoveHandler = (e) => {
+                //const pos = this.getMousePos(e);
+                let x = e.x - oldX; // 计算相对于SVG的X坐标
+                x /= this.viewOptions.scale;
+                let snappedX = Math.round(x / 5) * 5; // 捕捉到最近的5像素倍数
+                if (indent + snappedX >= 0) {
+                    para.props.indent = indent + snappedX;
+                }
+            };
+            const mouseupHandler = () => {
+                document.removeEventListener('mouseup', mouseupHandler);
+                document.removeEventListener('mousemove', mousemoveHandler);
+            };
+            document.addEventListener('mousemove', mousemoveHandler);
+            document.addEventListener('mouseup', mouseupHandler);
+        };
+        const svg = {
+            sel: "svg",
+            data: {
+                ns: svgNS,
+                attrs: {
+                    width: 12,
+                    height: 12,
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    "stroke-width": 1.5,
+                },
+            },
+            children: [
+                {
+                    sel: "g#group-1",
+                    data: { ns: svgNS, attrs: { stroke: "white", fill: "white" } },
+                    children: [
+                        {
+                            sel: "path",
+                            data: { ns: svgNS, attrs: { d: "M14.25 3.75V7.37868C14.25 7.7765 14.092 8.15804 13.8107 8.43934L8.70711 13.5429C8.31658 13.9334 7.68342 13.9334 7.29289 13.5429L2.18934 8.43934C1.90804 8.15804 1.75 7.7765 1.75 7.37868V3.75C1.75 2.64543 2.64543 1.75 3.75 1.75H12.25C13.3546 1.75 14.25 2.64543 14.25 3.75Z", stroke: "none" } },
+                        },
+                    ],
+                },
+                {
+                    sel: "g#group-0",
+                    data: { ns: svgNS, attrs: { stroke: "#757575", fill: "#757575" } },
+                    children: [
+                        {
+                            sel: "path",
+                            data: { ns: svgNS, attrs: { d: "M14.25 3.75V7.37868C14.25 7.7765 14.092 8.15804 13.8107 8.43934L8.70711 13.5429C8.31658 13.9334 7.68342 13.9334 7.29289 13.5429L2.18934 8.43934C1.90804 8.15804 1.75 7.7765 1.75 7.37868V3.75C1.75 2.64543 2.64543 1.75 3.75 1.75H12.25C13.3546 1.75 14.25 2.64543 14.25 3.75Z", fill: "none", "vector-effect": "non-scaling-stroke" } },
+                        },
+                    ],
+                },
+            ],
+        };
+        return { sel: "div.rule-thumb-container.rule-thumb-top", data: { on: { mousedown: (evt) => { onMousedown(evt); } }, style: { left: this.thumbX.indent - this.thumbWidth / 2 + "px" } }, children: [{ sel: "i.icon-thumb", data: {}, children: [svg] }] };
     }
+    ;
+    /**
+     * 绘制悬挂缩进thumb
+     * @returns
+     */
+    createLeftThumb() {
+        const para = this.getCurrPara();
+        if (!para) {
+            return null;
+        }
+        const onMousedown = (evt) => {
+            evt.preventDefault();
+            const oldX = evt.x;
+            const para = this.getCurrPara();
+            if (!para) {
+                return;
+            }
+            const hanging = para.props.hanging;
+            const mousemoveHandler = (e) => {
+                let x = e.x - oldX; // 计算相对于SVG的X坐标
+                x /= this.viewOptions.scale;
+                let snappedX = Math.round(x / 5) * 5; // 捕捉到最近的5像素倍数
+                if (hanging + snappedX >= 0) {
+                    para.props.hanging = hanging + snappedX;
+                }
+            };
+            const mouseupHandler = () => {
+                document.removeEventListener('mouseup', mouseupHandler);
+                document.removeEventListener('mousemove', mousemoveHandler);
+            };
+            document.addEventListener('mousemove', mousemoveHandler);
+            document.addEventListener('mouseup', mouseupHandler);
+        };
+        const svg = {
+            sel: "svg",
+            data: {
+                ns: svgNS,
+                attrs: {
+                    width: 12,
+                    height: 12,
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    "stroke-width": 1.5,
+                },
+            },
+            children: [
+                {
+                    sel: "g#group-1",
+                    data: { ns: svgNS, attrs: { stroke: "white", fill: "white" } },
+                    children: [
+                        {
+                            sel: "path",
+                            data: { ns: svgNS, attrs: { d: "M14.25 12.25V8.62132C14.25 8.2235 14.092 7.84196 13.8107 7.56066L8.70711 2.45711C8.31658 2.06658 7.68342 2.06658 7.29289 2.45711L2.18934 7.56066C1.90804 7.84196 1.75 8.2235 1.75 8.62132V12.25C1.75 13.3546 2.64543 14.25 3.75 14.25H12.25C13.3546 14.25 14.25 13.3546 14.25 12.25Z", stroke: "none" } },
+                        },
+                    ],
+                },
+                {
+                    sel: "g#group-0",
+                    data: { ns: svgNS, attrs: { stroke: "#757575", fill: "#757575" } },
+                    children: [
+                        {
+                            sel: "path",
+                            data: { ns: svgNS, attrs: { d: "M7.11612 2.11612L2.29917 6.93306C1.94754 7.28469 1.75 7.7616 1.75 8.25888V12.2469C1.75 13.3515 2.64543 14.2469 3.75 14.2469C6.58333 14.2469 9.41667 14.2469 12.25 14.2469C13.3546 14.2469 14.25 13.3515 14.25 12.2469V8.25888C14.25 7.7616 14.0525 7.28469 13.7008 6.93306L8.88388 2.11612M7.11612 2.11612C7.60427 1.62796 8.39573 1.62796 8.88388 2.11612M7.11612 2.11612L2.16901 7.06323C1.90072 7.33151 1.75 7.69538 1.75 8.0748C1.75 9.12824 2.60399 9.98223 3.65744 9.98223H12.3426C13.396 9.98223 14.25 9.12824 14.25 8.0748C14.25 7.69538 14.0993 7.33151 13.831 7.06323L8.88388 2.11612", fill: "none", "vector-effect": "non-scaling-stroke" } },
+                        },
+                    ],
+                },
+            ],
+        };
+        return {
+            sel: "div.rule-thumb-container.rule-thumb-left",
+            data: {
+                on: {
+                    mousedown: (evt) => { onMousedown(evt); }
+                }, style: { left: this.thumbX.hanging - this.thumbWidth / 2 + 'px' }
+            },
+            children: [{ sel: "i.icon-thumb", data: {}, children: [svg] }],
+        };
+    }
+    ;
 }
 
 function calculateOverflow(rect, viewport) {
@@ -20862,6 +21161,250 @@ function calculateDistance(a, b) {
     return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
 }
 
+class SearchPanel {
+    editor;
+    searchQuery = '';
+    currentIndex = -1;
+    totalMatches = 0;
+    searchResults = [];
+    searchRangeColor = "#ffffb8";
+    currentRangeColor = "#fadb14";
+    inputRef;
+    state = 'close';
+    constructor(editor) {
+        this.editor = editor;
+    }
+    render() {
+        if (this.state === 'close') {
+            return null;
+        }
+        return h('div.editor-search-box', [
+            h('input.search-input', {
+                props: {
+                    placeholder: 'Search'
+                },
+                on: {
+                    keydown: (evt) => this.onKeydown(evt)
+                },
+                hook: {
+                    insert: (vNode) => {
+                        this.inputRef = vNode.elm;
+                    }
+                }
+            }),
+            h('span.search-count', `${this.currentIndex + 1} of ${this.totalMatches}`),
+            h('button.icon-button', {
+                on: {
+                    click: () => this.searchPrevious()
+                }
+            }, [
+                h('span.material-icons', [
+                    h('svg', {
+                        attrs: {
+                            width: '18',
+                            height: '18',
+                            viewBox: '0 0 24 24',
+                            fill: 'none',
+                            xmlns: 'http://www.w3.org/2000/svg'
+                        }
+                    }, [
+                        h('path', {
+                            attrs: {
+                                d: 'M4.28377 10.2949C3.89615 10.6883 3.90084 11.3215 4.29424 11.7091C4.68765 12.0967 5.3208 12.092 5.70842 11.6986L10.9998 6.32833V19.9994C10.9998 20.5517 11.4475 20.9994 11.9998 20.9994C12.552 20.9994 12.9998 20.5517 12.9998 19.9994V6.33481L18.2847 11.6986C18.6723 12.092 19.3055 12.0967 19.6989 11.7091C20.0923 11.3215 20.097 10.6883 19.7094 10.2949L12.887 3.37073C12.3974 2.87382 11.5958 2.87382 11.1062 3.37073L4.28377 10.2949Z',
+                                fill: '#212121'
+                            }
+                        })
+                    ])
+                ])
+            ]),
+            h('button.icon-button', {
+                on: {
+                    click: () => this.searchNext()
+                }
+            }, [
+                h('span.material-icons', [
+                    h('svg', {
+                        attrs: {
+                            width: '18',
+                            height: '18',
+                            viewBox: '0 0 24 24',
+                            fill: 'none',
+                            xmlns: 'http://www.w3.org/2000/svg'
+                        }
+                    }, [
+                        h('path', {
+                            attrs: {
+                                d: 'M19.7162 13.7045C20.1038 13.3111 20.0991 12.678 19.7057 12.2903C19.3123 11.9027 18.6792 11.9074 18.2915 12.3008L13.0002 17.6711V4C13.0002 3.44771 12.5525 3 12.0002 3C11.4479 3 11.0002 3.44772 11.0002 4V17.6646L5.71525 12.3008C5.32763 11.9074 4.69448 11.9027 4.30108 12.2903C3.90767 12.678 3.90298 13.3111 4.29061 13.7045L11.113 20.6287C11.6026 21.1256 12.4042 21.1256 12.8938 20.6287L19.7162 13.7045Z',
+                                fill: '#212121'
+                            }
+                        })
+                    ])
+                ])
+            ]),
+            h('button.icon-button', {
+                on: {
+                    click: () => this.destroy()
+                }
+            }, [
+                h('span.material-icons', [
+                    h('svg', {
+                        attrs: {
+                            width: '18',
+                            height: '18',
+                            viewBox: '0 0 24 24',
+                            fill: 'none',
+                            xmlns: 'http://www.w3.org/2000/svg'
+                        }
+                    }, [
+                        h('path', {
+                            attrs: {
+                                d: 'M4.2097 4.3871L4.29289 4.29289C4.65338 3.93241 5.22061 3.90468 5.6129 4.2097L5.70711 4.29289L12 10.585L18.2929 4.29289C18.6834 3.90237 19.3166 3.90237 19.7071 4.29289C20.0976 4.68342 20.0976 5.31658 19.7071 5.70711L13.415 12L19.7071 18.2929C20.0676 18.6534 20.0953 19.2206 19.7903 19.6129L19.7071 19.7071C19.3466 20.0676 18.7794 20.0953 18.3871 19.7903L18.2929 19.7071L12 13.415L5.70711 19.7071C5.31658 20.0976 4.68342 20.0976 4.29289 19.7071C3.90237 19.3166 3.90237 18.6834 4.29289 18.2929L10.585 12L4.29289 5.70711C3.93241 5.34662 3.90468 4.77939 4.2097 4.3871L4.29289 4.29289L4.2097 4.3871Z',
+                                fill: '#212121'
+                            }
+                        })
+                    ])
+                ])
+            ])
+        ]);
+    }
+    searchNext() {
+        const searchItem = this.searchResults[this.currentIndex];
+        if (searchItem && searchItem.range) {
+            searchItem.range.rangeColor = this.searchRangeColor;
+        }
+        if (this.totalMatches > 0) {
+            this.currentIndex = this.currentIndex + 1;
+            if (this.currentIndex === this.totalMatches) {
+                this.currentIndex = 0;
+            }
+            this.nagivateToShow();
+        }
+    }
+    ;
+    searchPrevious() {
+        const searchItem = this.searchResults[this.currentIndex];
+        if (searchItem && searchItem.range) {
+            searchItem.range.rangeColor = this.searchRangeColor;
+        }
+        if (this.totalMatches > 0) {
+            this.currentIndex = this.currentIndex - 1;
+            if (this.currentIndex === -1) {
+                this.currentIndex = this.totalMatches - 1;
+            }
+            this.nagivateToShow();
+        }
+    }
+    ;
+    nagivateToShow() {
+        Promise.resolve().then(() => {
+            const searchItem = this.searchResults[this.currentIndex];
+            const range = searchItem.range;
+            //突出显示当前项颜色
+            range["rangeColor"] = this.currentRangeColor;
+            const editor = this.editor;
+            editor.bringToView(searchItem.ele);
+            editor.flushToSchedule();
+            editor.docCtx.onNextView(() => {
+                this.inputRef.focus();
+            });
+        });
+    }
+    onKeydown(e) {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            this.searchInDocument(e);
+        }
+    }
+    ;
+    searchInDocument(e) {
+        // 这里应该是你的搜索逻辑，返回匹配的结果数组
+        const target = e.target;
+        const query = target.value;
+        if (!query) {
+            //清除搜索结果
+            this.clear();
+            return [];
+        }
+        //回车自动转到下一个输入
+        if (this.searchQuery === target.value) {
+            this.searchNext();
+            return;
+        }
+        this.clear();
+        this.searchQuery = target.value;
+        const overlays = this.editor['selectionOverlays'];
+        const textEles = this.editor.docCtx.document.treeFilter((item) => item.type === "text");
+        textEles.forEach((ele) => {
+            const matches = this.findMatches(ele.text, query);
+            matches.forEach((index) => {
+                this.searchResults.push({
+                    index,
+                    ele,
+                });
+            });
+        });
+        console.log(this.searchResults);
+        overlays.clearOtherRangeSets();
+        this.searchResults.forEach((item) => {
+            const range = {
+                target: item.ele,
+                isFullSelected: false,
+                selectedChildren: [],
+                startOffset: item.index,
+                endOffset: item.index + query.length,
+                rangeColor: this.searchRangeColor,
+            };
+            item.range = range;
+            overlays.addToOtherRangeSets(range);
+        });
+        this.totalMatches = this.searchResults.length;
+        this.currentIndex = -1;
+        this.searchNext();
+        this.editor.docCtx.onNextView(() => {
+            target.focus();
+        });
+        //editor['selectionOverlays']
+        return [];
+    }
+    clear() {
+        this.searchQuery = "";
+        this.searchResults.length = 0;
+        this.currentIndex = -1;
+        this.totalMatches = 0;
+    }
+    destroy() {
+        this.clear();
+        this.state = 'close';
+        const overlays = this.editor["selectionOverlays"];
+        overlays.clearOtherRangeSets();
+        this.editor.flushToSchedule();
+    }
+    findMatches(inputString, pattern) {
+        // 创建一个正则表达式对象
+        const regex = new RegExp(pattern, "g");
+        const matches = [];
+        let match;
+        // 使用正则表达式的exec方法多次搜索字符串以找到所有匹配项
+        while ((match = regex.exec(inputString)) !== null) {
+            matches.push(match.index); // 将匹配的索引位置添加到数组中
+            // 当匹配的模式长度为0时（如匹配空字符串），避免无限循环
+            if (match[0].length === 0) {
+                regex.lastIndex++;
+            }
+        }
+        return matches;
+    }
+    switchVisible() {
+        if (this.state === 'open') {
+            this.state = 'close';
+        }
+        else {
+            this.state = 'open';
+        }
+        this.clear();
+    }
+}
+
 class DocEditor {
     svgContainer;
     //设置vue 不允许代理
@@ -20910,15 +21453,17 @@ class DocEditor {
     // private suggestions: Array<ISuggestionData> = [];
     //光标keydown事件
     onKeyDownEvent = new Subject();
+    //搜索框
+    searchPanel;
     constructor(svgContainer) {
         this.svgContainer = svgContainer;
         this.createCanvasContext();
         this.viewOptions = new ViewOptions();
         this.documentSelection = new DocumentSelection();
-        this.docCtx = new EditorContext(this.documentSelection.selectionState, this.viewOptions);
+        this.selectionState = this.documentSelection.selectionState;
+        this.docCtx = new EditorContext(this.selectionState, this.viewOptions);
         this.viewOptions.copyRightInfo = '电子病历编辑器(XXX版权所有)';
         this.viewOptions.drawCharRectColor = 'green';
-        this.viewOptions.showLineRect = true;
         this.viewOptions.docSpace = 20;
         this.viewOptions.defaultFontName = '宋体';
         this.viewOptions.editorVersion = this.version();
@@ -20928,16 +21473,10 @@ class DocEditor {
             width: 1000,
             height: 200
         };
-        this.viewOptions.editUser = {
-            id: '6666',
-            name: '管理员'
-        };
-        this.viewOptions.fullPageView = false;
         this.createDocViewer();
         this.renderContext = new RenderContext(new PaintContent(this.contentCtx));
         this.renderContext.init({ width: 2, height: 2, scale: 1 });
-        this.selectionState = this.documentSelection.selectionState;
-        this.selectionOverlays = new SelectionOverlays(this.documentSelection.selectionState);
+        this.selectionOverlays = new SelectionOverlays(this.selectionState);
         this.documentPaginator = new DocumentPaginator(this.renderContext, this.docCtx, this.selectionOverlays);
         this.documentInput = new DocumentInput(this.docCtx);
         this.docComment = new DocumentComment(this.docCtx);
@@ -20945,6 +21484,7 @@ class DocEditor {
         this.documentChange = new DocumentChange(this.elementReader, this.docCtx, this.docComment, this.documentInput);
         this.documentEvent = new DocumentEvent(this.documentPaginator, this.docCtx, this.documentInput);
         this.historyMange = new ElementTrackManage(this.docCtx);
+        this.searchPanel = new SearchPanel(this);
         this.eventBus = new EventBus();
         this.createPatch();
         this.documentEvent.hitInfoChanged.subscribe((hitInfo) => {
@@ -20979,8 +21519,8 @@ class DocEditor {
         this.docCtx.syncRefresh = () => {
             this.flushToSchedule();
         };
-        this.viewOptions.onChange.subscribe((type) => {
-            this.resetViewer(type);
+        this.viewOptions.onChange.subscribe(() => {
+            this.resetViewer();
         });
     }
     createCanvasContext() {
@@ -21025,7 +21565,7 @@ class DocEditor {
                 };
                 const listVNode = this.renderDataListVNode();
                 const dropContainer = {
-                    sel: 'div.drop-container',
+                    sel: 'div.absolute-container',
                     data: {
                         style: {
                             'transform-origin': '0 0',
@@ -21060,7 +21600,8 @@ class DocEditor {
                                 style: {
                                     overflow: 'auto',
                                     position: 'relative',
-                                    height: "100%"
+                                    height: "100%",
+                                    'transform-origin': '0 0'
                                 },
                                 on: {
                                     scroll: (evt) => {
@@ -21082,8 +21623,9 @@ class DocEditor {
                                     }
                                 }
                             },
-                            children: [docContentVNode, dropContainer]
-                        }, ruleFunc.refreshRuleSvg().render()
+                            children: [docContentVNode, dropContainer,]
+                        },
+                        ruleFunc.refreshRuleSvg().render(), this.searchPanel.render()
                     ]
                 };
             }
@@ -21482,9 +22024,8 @@ class DocEditor {
         };
         this.onChange();
     }
-    resetViewer(type = undefined) {
-        const refreshType = type === 'force' ? 'content' : 'appearance';
-        if (refreshType === 'content') {
+    resetViewer() {
+        if (this.docCtx.document) {
             this.docCtx.document.pubOnChange('self');
         }
         this.documentPaginator.layoutPages();
@@ -21837,7 +22378,7 @@ class DocEditor {
     setPaperOrient(orientation) {
         this.docCtx.document.props.orient = orientation;
         this.viewOptions.docPageSettings.orient = orientation;
-        this.resetViewer('force');
+        this.resetViewer();
         this.selectionState.clear();
     }
     setPaperSize(width, height) {
@@ -21853,13 +22394,17 @@ class DocEditor {
         width = Math.floor(width * this.viewOptions.mmToPixelsRatio);
         height = Math.floor(height * this.viewOptions.mmToPixelsRatio);
         this.viewOptions.docPageSettings = new PageOptions(width, height, docProps.orient);
-        this.resetViewer('force');
+        this.resetViewer();
     }
     /**
      * 显示当前元素到视图中
      * @param element
      */
     bringToView(element) {
+        //元素被删除
+        if (!element.parent || !element.paintRenders.length) {
+            return;
+        }
         const ele = element instanceof BranchElement ? ElementUtil.getFirstLeafElement(element) : element;
         if (ele) {
             const region = ElementUtil.getElementRegion(ele);
@@ -21877,10 +22422,16 @@ class DocEditor {
         //处理缩放
         pos.x = pos.x * scale;
         pos.y = pos.y * scale;
-        if (pos.y - this.viewOptions.pageOffset.y > 0 && pos.y - this.viewOptions.pageOffset.y < this.viewOptions.viewSettings.height) {
-            return;
+        this.viewOptions.pageOffset.y;
+        const scrollHeight = this.viewOptions.viewSettings.height;
+        // 计算中心位置需要的scrollTop
+        var newScrollTop = pos.y - scrollHeight / 2;
+        // 检查newScrollTop是否小于0
+        if (newScrollTop < 0) {
+            newScrollTop = 0; // 保证滚动不会超出容器顶部
         }
-        this.scrollContainer.scrollTop = pos.y + 30;
+        // 滚动到新的位置
+        this.scrollContainer.scrollTop = newScrollTop;
     }
     /**
      * 设置当前文档页边距
@@ -22321,6 +22872,7 @@ class DocEditor {
         if (parent) {
             const parentRect = parent.getBoundingClientRect();
             const elmRect = elm.getBoundingClientRect();
+            const top = parseInt(elm.style.top);
             // elmRect.width /= scale;
             // elmRect.height /= scale;
             // parentRect.width /= scale;
@@ -22336,12 +22888,13 @@ class DocEditor {
                 //elm.style.left = parentRect.width - elmRect.width + 'px';
             }
             if (elmRect.top + elmRect.height > parentRect.top + parentRect.height) {
-                const newTop = position.y - position.height - elmRect.height;
-                const oldTop = position.y + 5 + position.height;
+                const newTop = top - 5 - position.height - elmRect.height;
+                position.y + 5 + position.height;
                 //计算前后的高度的差距,然后判断新的值是否在父元素的范围内，如果不在则使用旧的值
-                if (newTop > 0 && oldTop - newTop < elmRect.top - parentRect.top) {
-                    elm.style.top = (position.y - position.height - elmRect.height) + 'px';
-                }
+                // if (newTop > 0 && oldTop - newTop < elmRect.top - parentRect.top) {
+                //     elm.style.top = (position.y - position.height - elmRect.height) + 'px';
+                // }
+                elm.style.top = newTop + 'px';
                 //elm.style.top = (top - (elmRect.top + elmRect.height - (parentRect.top + parentRect.height))) + 'px';
                 //elm.style.top = (position.y - position.height - elmRect.height) + 'px';
             }
@@ -22452,14 +23005,14 @@ class DocEditor {
         rule.setRuleOptions({ width: this.viewOptions.docPageSettings.width, pagePL, pagePR, docLeft });
     }
     version() {
-        return "2.2.20";
+        return "2.2.21";
     }
     switchPageHeaderEditor() {
         this.docCtx.document.switchPageHeaderEditor(this.selectionState, null);
     }
     getTextContent() {
         const paras = this.docCtx.document.treeFilter(item => item instanceof ParagraphElement);
-        const paraTexts = paras.map(item => ElementSerialize.serializeString(item, { all: false }));
+        const paraTexts = paras.map(item => ElementSerialize.serializeString(item));
         return paraTexts.join('');
     }
     emit(event, args) {
@@ -22624,24 +23177,25 @@ class DocEditor {
     }
     processKeyDownEvent(evt) {
         const keyEvent = new KeyboradElementEvent(this.docCtx);
+        const keyStr = CommonUtil.getKeyCombination(evt);
         keyEvent.sourceEvent = evt;
         if (DocumentEvent.invokeEvent('ElementKeyDown', this.docCtx.selectionState.startControl, keyEvent, 'All')) {
             evt.preventDefault();
             return;
         }
-        if (evt.keyCode === 38 || evt.keyCode === 40) {
+        if (['ArrowDown', 'ArrowUp']) {
             if (this.docCtx.suggestions.prepareSuggestions.length) {
                 this.onSuggestionsKeydown(evt);
             }
         }
-        else if (evt.keyCode === 27) {
+        else if (keyStr === 'Escape') {
             if (this.docCtx.suggestions.prepareSuggestions.length) {
                 evt.preventDefault();
                 this.docCtx.suggestions.clear();
                 this.onPatchVNodeSubject.next();
             }
         }
-        else if (evt.keyCode === 13) {
+        else if (keyStr === 'Enter') {
             if (this.docCtx.suggestions.prepareSuggestions.length) {
                 evt.preventDefault();
                 const suggestions = this.docCtx.suggestions;
@@ -22657,6 +23211,11 @@ class DocEditor {
                 }
             }
         }
+        else if (['Ctrl+f', 'Cmd+f'].indexOf(keyStr) > -1) {
+            evt.preventDefault();
+            this.searchPanel.switchVisible();
+            this.onPatchVNodeSubject.next();
+        }
     }
     /**
      * 处理候选词，键盘选择定位
@@ -27958,9 +28517,7 @@ class DocumentPrintOffscreenBase {
     constructor() {
         this.viewOptions = new ViewOptions();
         this.viewOptions.copyRightInfo = '';
-        this.viewOptions.showCharRect = true;
         this.viewOptions.drawCharRectColor = 'green';
-        this.viewOptions.showLineRect = true;
         this.viewOptions.docSpace = 20;
         this.viewOptions.reviewWindowWidth = 200;
         this.viewOptions.mmToPixelsRatio = 3.7795001220703126;
@@ -27969,17 +28526,14 @@ class DocumentPrintOffscreenBase {
             width: 1000,
             height: 800
         };
-        this.viewOptions.editUser = {
-            id: '6666',
-            name: '管理员'
-        };
         const { canvas, ctx } = this.createCanvas(200, 200);
         const ss = new SelectionState();
         this.docCtx = new EditorContext(ss, this.viewOptions);
         this.renderCtx = this.createRenderCtx(ctx, this.viewOptions, this.docCtx);
         this.documentPaginator = new DocumentPaginator(this.renderCtx, this.docCtx, {
             selectionEleSets: new Map(),
-            commRangeSets: new Map()
+            commRangeSets: new Map(),
+            otherRangeSets: new Map()
         });
         this.elementReader = new ElementReader(this.docCtx);
         this.docCtx.syncRefresh = () => {
@@ -28047,7 +28601,8 @@ class DocumentPrintOffscreenBase {
     getSvgNodes(docRenders, printRanges = null) {
         const docSvgHelper = new DocumentSvg(this.viewOptions, {
             selectionEleSets: new Map,
-            commRangeSets: new Map()
+            commRangeSets: new Map(),
+            otherRangeSets: new Map()
         }, this.renderCtx); //.getHTMLVNode(docRenders) as Array<EditorVNodeObject>;
         docSvgHelper.mode = 'print';
         const patch = init([
@@ -28119,11 +28674,11 @@ const deleteCurrentParagraph = (evt) => {
         caption: '删除段落', click: () => {
             selectionState.clear();
             const psymbol = ElementUtil.getLastLeafElement(currentElement);
-            const nextFocusableEle = ElementUtil.getRecursionNextSiblingElement(psymbol, false, true, viewOptions);
+            const cursorPosition = ElementUtil.getRecursionNextSiblingElement(psymbol, viewOptions);
             const parentContainer = currentElement.parent;
-            if (nextFocusableEle) {
-                if (nextFocusableEle.parent === parentContainer) {
-                    selectionState.resetRange(nextFocusableEle, 0);
+            if (cursorPosition) {
+                if (cursorPosition.ele.parent === parentContainer) {
+                    selectionState.resetRange(cursorPosition.ele, 0);
                 }
                 else {
                     selectionState.resetRange(parentContainer, 0);
@@ -28164,9 +28719,9 @@ const onTableContextmenu = (evt) => {
         evt.menus.push({
             caption: '删除表格', click: () => {
                 selectionState.clear();
-                const prevEle = ElementUtil.getRecursionPrevSiblingElement(currentElement, false, true, viewOptions);
-                if (prevEle) {
-                    selectionState.resetRange(prevEle, -1);
+                const cursorPosition = ElementUtil.getRecursionPrevSiblingElement(currentElement, viewOptions);
+                if (cursorPosition) {
+                    selectionState.resetRange(cursorPosition.ele, cursorPosition.offset);
                 }
                 currentElement.remove();
                 currentElement.destroy();