@textbus/platform-browser 5.4.3 → 5.4.4

package/dist/index.esm.js

@@ -12,6 +12,14 @@ import { InjectionToken, Injectable, Inject, Optional } from '@viewfly/core';
 function _array_without_holes$2(arr) {
     if (Array.isArray(arr)) return _array_like_to_array$2(arr);
 }
+function _instanceof$4(left, right) {
+    "@swc/helpers - instanceof";
+    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+        return !!right[Symbol.hasInstance](left);
+    } else {
+        return left instanceof right;
+    }
+}
 function _iterable_to_array$2(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
@@ -29,6 +37,247 @@ function _unsupported_iterable_to_array$2(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
 }
+var OVERFLOW_CLIP_VALUES = new Set([
+    'auto',
+    'hidden',
+    'scroll',
+    'clip'
+]);
+function rectRight(r) {
+    return r.left + r.width;
+}
+function rectBottom(r) {
+    return r.top + r.height;
+}
+function isOverflowClipAxis(value) {
+    return OVERFLOW_CLIP_VALUES.has(value);
+}
+function readOverflowClipAxes(style) {
+    var overflow = style.overflow;
+    var overflowX = style.overflowX;
+    var overflowY = style.overflowY;
+    if (!isOverflowClipAxis(overflow) && !isOverflowClipAxis(overflowX) && !isOverflowClipAxis(overflowY)) {
+        return null;
+    }
+    return {
+        clipX: isOverflowClipAxis(overflowX) || isOverflowClipAxis(overflow),
+        clipY: isOverflowClipAxis(overflowY) || isOverflowClipAxis(overflow)
+    };
+}
+/**
+ * 一次遍历祖先链：缓存 overflow 轴信息，并收集滚动监听目标。
+ */ function getOverflowClipContext(anchor, extraRoot) {
+    var _ref, _ref1;
+    var _clipAncestors_;
+    var clipAncestors = [];
+    var scrollContainers = new Set();
+    var node = anchor.nodeType === Node.ELEMENT_NODE ? anchor : anchor.parentNode;
+    while(node){
+        var _node_ownerDocument;
+        if (_instanceof$4(node, Element)) {
+            var flags = readOverflowClipAxes(getComputedStyle(node));
+            if (flags) {
+                clipAncestors.push({
+                    element: node,
+                    clipX: flags.clipX,
+                    clipY: flags.clipY
+                });
+                scrollContainers.add(node);
+            }
+        }
+        if (node === ((_node_ownerDocument = node.ownerDocument) === null || _node_ownerDocument === void 0 ? void 0 : _node_ownerDocument.documentElement)) {
+            break;
+        }
+        node = node.parentNode;
+    }
+    var doc = anchor.ownerDocument;
+    var documentElement = (_ref = doc === null || doc === void 0 ? void 0 : doc.documentElement) !== null && _ref !== void 0 ? _ref : document.documentElement;
+    scrollContainers.add(documentElement);
+    if (extraRoot) {
+        scrollContainers.add(extraRoot);
+    }
+    return {
+        clipAncestors: clipAncestors,
+        scrollContainers: _to_consumable_array$2(scrollContainers),
+        firstScrollContainer: (_ref1 = (_clipAncestors_ = clipAncestors[0]) === null || _clipAncestors_ === void 0 ? void 0 : _clipAncestors_.element) !== null && _ref1 !== void 0 ? _ref1 : documentElement
+    };
+}
+function intersectRect(a, b) {
+    var left = Math.max(a.left, b.left);
+    var top = Math.max(a.top, b.top);
+    var right = Math.min(rectRight(a), rectRight(b));
+    var bottom = Math.min(rectBottom(a), rectBottom(b));
+    if (left >= right || top >= bottom) {
+        return null;
+    }
+    return {
+        left: left,
+        top: top,
+        width: right - left,
+        height: bottom - top
+    };
+}
+function rectContainsPoint(rect, x, y) {
+    return x >= rect.left && x <= rectRight(rect) && y >= rect.top && y <= rectBottom(rect);
+}
+function intersectRectWithClipAncestor(ancestor, visible) {
+    var el = ancestor.element;
+    var border = el.getBoundingClientRect();
+    var left = visible.left;
+    var top = visible.top;
+    var right = rectRight(visible);
+    var bottom = rectBottom(visible);
+    if (ancestor.clipX) {
+        var clipLeft = border.left + el.clientLeft;
+        var clipRight = clipLeft + el.clientWidth;
+        left = Math.max(left, clipLeft);
+        right = Math.min(right, clipRight);
+    }
+    if (ancestor.clipY) {
+        var clipTop = border.top + el.clientTop;
+        var clipBottom = clipTop + el.clientHeight;
+        top = Math.max(top, clipTop);
+        bottom = Math.min(bottom, clipBottom);
+    }
+    if (left >= right || top >= bottom) {
+        return null;
+    }
+    return {
+        left: left,
+        top: top,
+        width: right - left,
+        height: bottom - top
+    };
+}
+function getVisibleRectInOverflowClipsFromAncestors(rect, clipAncestors) {
+    var visible = rect;
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+    try {
+        for(var _iterator = clipAncestors[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+            var ancestor = _step.value;
+            var next = intersectRectWithClipAncestor(ancestor, visible);
+            if (!next) {
+                return null;
+            }
+            visible = next;
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+            }
+        } finally{
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+    return visible;
+}
+/** 锚点是否被 CSS 隐藏（opacity / visibility 等）；不做点命中，避免 mask 层挡住误判 */ function isCaretAnchorCssVisible(anchor) {
+    var anchorEl = anchor.nodeType === Node.ELEMENT_NODE ? anchor : anchor.parentElement;
+    if (!(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.isConnected)) {
+        return false;
+    }
+    if (typeof anchorEl.checkVisibility === 'function') {
+        return anchorEl.checkVisibility({
+            checkOpacity: true,
+            checkVisibilityCSS: true
+        });
+    }
+    return true;
+}
+var CLIP_INSET_EPSILON = 0.5;
+function clipPathInsetFromVisibleRegion(elRect, visible) {
+    var top = Math.max(0, visible.top - elRect.top);
+    var left = Math.max(0, visible.left - elRect.left);
+    var bottom = Math.max(0, rectBottom(elRect) - rectBottom(visible));
+    var right = Math.max(0, rectRight(elRect) - rectRight(visible));
+    if (top < CLIP_INSET_EPSILON && left < CLIP_INSET_EPSILON && bottom < CLIP_INSET_EPSILON && right < CLIP_INSET_EPSILON) {
+        return 'none';
+    }
+    return "inset(".concat(top, "px ").concat(right, "px ").concat(bottom, "px ").concat(left, "px)");
+}
+/** 根据行高与内容矩形计算光标盒高度与顶部（视口坐标） */ function measureCaretBoxLayout(contentRect, style) {
+    var fontSize = style.fontSize, lineHeight = style.lineHeight;
+    var height;
+    if (isNaN(+lineHeight)) {
+        var f = parseFloat(lineHeight);
+        height = isNaN(f) ? parseFloat(fontSize) : f;
+    } else {
+        height = parseFloat(fontSize) * parseFloat(lineHeight);
+    }
+    var boxHeight = Math.max(Math.floor(Math.max(height, contentRect.height)), 12);
+    var rectTop = contentRect.top;
+    if (contentRect.height < height) {
+        rectTop -= (height - contentRect.height) / 2;
+    }
+    return {
+        boxHeight: boxHeight,
+        rectTop: Math.floor(rectTop)
+    };
+}
+/** 测量行内旋转角度（writing-mode 继承） */ function measureInlineCaretRotate(node, initialRotate, writingMode) {
+    var rotate = initialRotate;
+    if (rotate !== 0) {
+        var hackEle = document.createElement('span');
+        hackEle.style.cssText = 'display: inline-block; width: 10px; height: 10px; position: relative; contain: layout style size; writing-mode: inherit';
+        var pointEle = document.createElement('span');
+        pointEle.style.cssText = 'position: absolute; left: 0; top: 0; width:0;height:0';
+        hackEle.append(pointEle);
+        node.append(hackEle);
+        var p1 = pointEle.getBoundingClientRect();
+        pointEle.style.right = '0';
+        pointEle.style.left = '';
+        var p2 = pointEle.getBoundingClientRect();
+        rotate = Math.atan2(p1.y - p2.y, p1.x - p2.x) * 180 / Math.PI;
+        hackEle.remove();
+    }
+    if (writingMode === 'vertical-lr' || writingMode === 'vertical-rl') {
+        rotate += 90;
+    }
+    return rotate;
+}
+/**
+ * 在 element 样式已写入后调用：计算裁剪、是否移出视口及对外事件数据。
+ */ function computeCaretPresentation(options) {
+    var anchor = options.anchor, maskRect = options.maskRect, clipAncestors = options.clipAncestors, maskLeft = options.maskLeft, maskTop = options.maskTop, boxHeight = options.boxHeight, rectTop = options.rectTop, contentRect = options.contentRect, fontSize = options.fontSize, color = options.color, measureElementRect = options.measureElementRect;
+    var caretCenterX = contentRect.left + contentRect.width / 2;
+    var caretCenterY = rectTop + boxHeight / 2;
+    var layoutElRect = {
+        left: maskRect.left + maskLeft,
+        top: maskRect.top + maskTop,
+        width: 2,
+        height: boxHeight
+    };
+    var visibleRect = getVisibleRectInOverflowClipsFromAncestors(layoutElRect, clipAncestors);
+    visibleRect = visibleRect ? intersectRect(visibleRect, maskRect) : null;
+    var inClipBounds = !!visibleRect && rectContainsPoint(visibleRect, caretCenterX, caretCenterY);
+    var outOfView = !inClipBounds || !isCaretAnchorCssVisible(anchor);
+    var clipPath = 'none';
+    if (!outOfView && visibleRect) {
+        clipPath = clipPathInsetFromVisibleRegion(measureElementRect(), visibleRect);
+    }
+    return {
+        outOfView: outOfView,
+        clipPath: clipPath,
+        layoutElRect: layoutElRect,
+        position: {
+            left: maskLeft,
+            top: rectTop,
+            height: boxHeight
+        },
+        caretColor: color === 'rgba(0, 0, 0, 0)' ? '#000' : color,
+        style: {
+            height: boxHeight + 'px',
+            lineHeight: boxHeight + 'px',
+            fontSize: fontSize
+        }
+    };
+}
 function createElement(tagName) {
     var options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
     var el = document.createElement(tagName);
@@ -209,7 +458,7 @@ function _define_property$6(obj, key, value) {
     }
     return obj;
 }
-function _instanceof$4(left, right) {
+function _instanceof$3(left, right) {
     "@swc/helpers - instanceof";
     if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
         return !!right[Symbol.hasInstance](left);
@@ -316,7 +565,7 @@ var Parser = /*#__PURE__*/ function() {
                                 if (!result) {
                                     return;
                                 }
-                                if (_instanceof$4(result, Slot)) {
+                                if (_instanceof$3(result, Slot)) {
                                     result.toDelta().forEach(function(i) {
                                         return slot.insert(i.insert, i.formats);
                                     });
@@ -438,6 +687,15 @@ function _class_call_check$6(instance, Constructor) {
         throw new TypeError("Cannot call a class as a function");
     }
 }
+function caretPositionEqual(a, b) {
+    if (a === b) {
+        return true;
+    }
+    if (a === null || b === null) {
+        return false;
+    }
+    return a.left === b.left && a.top === b.top && a.height === b.height;
+}
 var Input = function Input() {
     _class_call_check$6(this, Input);
 };
@@ -522,7 +780,7 @@ var DomAdapter = /*#__PURE__*/ function(Adapter) {
         _this = _call_super$2(this, DomAdapter, arguments), _define_property$5(_this, "onViewUpdated", new Subject()), _define_property$5(_this, "host", createElement('div', {
             styles: {
                 cursor: 'text',
-                wordBreak: 'break-all',
+                overflowWrap: 'break-word',
                 boxSizing: 'border-box',
                 flex: 1,
                 outline: 'none'
@@ -570,7 +828,7 @@ function _define_property$4(obj, key, value) {
     }
     return obj;
 }
-function _instanceof$3(left, right) {
+function _instanceof$2(left, right) {
     "@swc/helpers - instanceof";
     if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
         return !!right[Symbol.hasInstance](left);
@@ -1077,7 +1335,7 @@ var SelectionBridge = /*#__PURE__*/ function() {
                         try {
                             for(var _iterator = nodes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
                                 var node = _step.value;
-                                if (_instanceof$3(node, Text)) {
+                                if (_instanceof$2(node, Text)) {
                                     continue;
                                 }
                                 if (node.nodeName === 'BR') {
@@ -1121,7 +1379,7 @@ var SelectionBridge = /*#__PURE__*/ function() {
                 try {
                     for(var _iterator1 = nodes[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true){
                         var node1 = _step1.value;
-                        if (_instanceof$3(node1, Element)) {
+                        if (_instanceof$2(node1, Element)) {
                             if (node1.tagName === 'BR') {
                                 var position1 = this.domAdapter.getLocationByNativeNode(node1);
                                 if (position1) {
@@ -1349,14 +1607,6 @@ function _inherits$1(subClass, superClass) {
     });
     if (superClass) _set_prototype_of$1(subClass, superClass);
 }
-function _instanceof$2(left, right) {
-    "@swc/helpers - instanceof";
-    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
-        return !!right[Symbol.hasInstance](left);
-    } else {
-        return left instanceof right;
-    }
-}
 function _possible_constructor_return$1(self, call) {
     if (call && (_type_of$1(call) === "object" || typeof call === "function")) {
         return call;
@@ -1408,7 +1658,13 @@ var ExperimentalCaret = /*#__PURE__*/ function() {
         _define_property$3(this, "caret", void 0);
         _define_property$3(this, "_display", void 0);
         _define_property$3(this, "flashing", void 0);
+        /** 被 overflow 裁出可视区（不用 display:none，避免触发 Input.hide） */ _define_property$3(this, "caretClippedOut", void 0);
         _define_property$3(this, "subscription", void 0);
+        _define_property$3(this, "scrollSubscription", void 0);
+        _define_property$3(this, "scrollRaf", void 0);
+        _define_property$3(this, "clipContext", void 0);
+        _define_property$3(this, "clipContextAnchor", void 0);
+        _define_property$3(this, "scrollListenerAnchor", void 0);
         _define_property$3(this, "positionChangeEvent", void 0);
         _define_property$3(this, "styleChangeEvent", void 0);
         _define_property$3(this, "oldRange", void 0);
@@ -1425,11 +1681,17 @@ var ExperimentalCaret = /*#__PURE__*/ function() {
         this.timer = null;
         this._display = true;
         this.flashing = true;
+        this.caretClippedOut = false;
         this.subscription = new Subscription();
+        this.scrollSubscription = new Subscription();
+        this.scrollRaf = 0;
+        this.clipContext = null;
+        this.clipContextAnchor = null;
+        this.scrollListenerAnchor = null;
         this.positionChangeEvent = new Subject();
         this.styleChangeEvent = new Subject();
         this.oldRange = null;
-        this.onPositionChange = this.positionChangeEvent.pipe(distinctUntilChanged());
+        this.onPositionChange = this.positionChangeEvent.pipe(distinctUntilChanged(caretPositionEqual));
         this.onStyleChange = this.styleChangeEvent.asObservable();
         this.elementRef = createElement('div', {
             styles: {
@@ -1470,14 +1732,17 @@ var ExperimentalCaret = /*#__PURE__*/ function() {
             },
             set: function set(v) {
                 this._display = v;
-                this.caret.style.visibility = v ? 'visible' : 'hidden';
+                if (!this.caretClippedOut) {
+                    this.caret.style.visibility = v ? 'visible' : 'hidden';
+                }
             }
         },
         {
             key: "refresh",
             value: function refresh() {
-                if (this.oldRange) {
-                    this.show(this.oldRange, false);
+                var _this_oldRange;
+                if ((_this_oldRange = this.oldRange) === null || _this_oldRange === void 0 ? void 0 : _this_oldRange.collapsed) {
+                    this.updateCursorPosition(this.oldRange);
                 }
             }
         },
@@ -1489,8 +1754,23 @@ var ExperimentalCaret = /*#__PURE__*/ function() {
                 if (restart || this.scheduler.lastChangesHasLocalUpdate) {
                     clearTimeout(this.timer);
                 }
+                if (range.collapsed && (restart || this.scheduler.lastChangesHasLocalUpdate)) {
+                    this._display = true;
+                }
                 this.updateCursorPosition(range);
                 if (range.collapsed) {
+                    var anchor = range.startContainer.nodeType === Node.ELEMENT_NODE ? range.startContainer : range.startContainer.parentNode;
+                    if (anchor) {
+                        this.bindScrollListeners(anchor);
+                    }
+                    if (restart) {
+                        requestAnimationFrame(function() {
+                            var _this_oldRange;
+                            if ((_this_oldRange = _this.oldRange) === null || _this_oldRange === void 0 ? void 0 : _this_oldRange.collapsed) {
+                                _this.updateCursorPosition(_this.oldRange);
+                            }
+                        });
+                    }
                     if (restart || this.scheduler.lastChangesHasLocalUpdate) {
                         this.display = true;
                         var toggleShowHide = function toggleShowHide1() {
@@ -1501,6 +1781,7 @@ var ExperimentalCaret = /*#__PURE__*/ function() {
                         this.timer = setTimeout(toggleShowHide, 400);
                     }
                 } else {
+                    this.unbindScrollListeners();
                     this.display = false;
                     clearTimeout(this.timer);
                 }
@@ -1509,8 +1790,14 @@ var ExperimentalCaret = /*#__PURE__*/ function() {
         {
             key: "hide",
             value: function hide() {
+                this.unbindScrollListeners();
+                this.clearClipContext();
                 this.display = false;
                 clearTimeout(this.timer);
+                this.caretClippedOut = false;
+                this.elementRef.style.clipPath = 'none';
+                this.elementRef.style.visibility = '';
+                this.caret.style.visibility = '';
                 this.positionChangeEvent.next(null);
             }
         },
@@ -1518,127 +1805,210 @@ var ExperimentalCaret = /*#__PURE__*/ function() {
             key: "destroy",
             value: function destroy() {
                 clearTimeout(this.timer);
-                // this.caret.
+                this.unbindScrollListeners();
                 this.subscription.unsubscribe();
             }
         },
+        {
+            key: "bindScrollListeners",
+            value: function bindScrollListeners(anchor) {
+                var _this = this;
+                var _anchor_ownerDocument;
+                if (this.scrollListenerAnchor === anchor) {
+                    return;
+                }
+                this.unbindScrollListeners();
+                this.scrollListenerAnchor = anchor;
+                var onScroll = function onScroll() {
+                    if (!_this.oldRange || _this.scrollRaf) {
+                        return;
+                    }
+                    _this.scrollRaf = requestAnimationFrame(function() {
+                        _this.scrollRaf = 0;
+                        if (_this.oldRange) {
+                            _this.updateCursorPosition(_this.oldRange);
+                        }
+                    });
+                };
+                var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                try {
+                    for(var _iterator = this.ensureClipContext(anchor).scrollContainers[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                        var el = _step.value;
+                        this.scrollSubscription.add(fromEvent(el, 'scroll').subscribe(onScroll));
+                    }
+                } catch (err) {
+                    _didIteratorError = true;
+                    _iteratorError = err;
+                } finally{
+                    try {
+                        if (!_iteratorNormalCompletion && _iterator.return != null) {
+                            _iterator.return();
+                        }
+                    } finally{
+                        if (_didIteratorError) {
+                            throw _iteratorError;
+                        }
+                    }
+                }
+                var win = (_anchor_ownerDocument = anchor.ownerDocument) === null || _anchor_ownerDocument === void 0 ? void 0 : _anchor_ownerDocument.defaultView;
+                if (win) {
+                    this.scrollSubscription.add(fromEvent(win, 'scroll').subscribe(onScroll));
+                }
+            }
+        },
+        {
+            key: "unbindScrollListeners",
+            value: function unbindScrollListeners() {
+                if (this.scrollRaf) {
+                    cancelAnimationFrame(this.scrollRaf);
+                    this.scrollRaf = 0;
+                }
+                this.scrollSubscription.unsubscribe();
+                this.scrollSubscription = new Subscription();
+                this.scrollListenerAnchor = null;
+            }
+        },
+        {
+            key: "ensureClipContext",
+            value: function ensureClipContext(anchor) {
+                if (this.clipContextAnchor !== anchor) {
+                    this.clipContextAnchor = anchor;
+                    this.clipContext = getOverflowClipContext(anchor, this.editorMask);
+                }
+                return this.clipContext;
+            }
+        },
+        {
+            key: "clearClipContext",
+            value: function clearClipContext() {
+                this.clipContext = null;
+                this.clipContextAnchor = null;
+            }
+        },
         {
             key: "updateCursorPosition",
             value: function updateCursorPosition(nativeRange) {
-                var startContainer = nativeRange.startContainer;
-                var node = startContainer.nodeType === Node.ELEMENT_NODE ? startContainer : startContainer.parentNode;
-                if ((node === null || node === void 0 ? void 0 : node.nodeType) !== Node.ELEMENT_NODE) {
+                var _this = this;
+                var node = this.resolveCaretAnchor(nativeRange);
+                if (!node) {
                     this.positionChangeEvent.next(null);
                     return;
                 }
-                var compositionNode = this.domRenderer.compositionNode;
-                if (compositionNode) {
-                    nativeRange = nativeRange.cloneRange();
-                    nativeRange.selectNodeContents(compositionNode);
-                    nativeRange.collapse();
-                }
+                nativeRange = this.normalizeCollapsedRange(nativeRange);
                 this.caret.style.display = nativeRange.collapsed ? 'block' : 'none';
                 if (!nativeRange.collapsed) {
                     return;
                 }
-                var rect = getLayoutRectByRange(nativeRange);
-                var _getComputedStyle = getComputedStyle(node), fontSize = _getComputedStyle.fontSize, lineHeight = _getComputedStyle.lineHeight, color = _getComputedStyle.color, writingMode = _getComputedStyle.writingMode;
-                var height;
-                if (isNaN(+lineHeight)) {
-                    var f = parseFloat(lineHeight);
-                    if (isNaN(f)) {
-                        height = parseFloat(fontSize);
-                    } else {
-                        height = f;
+                var contentRect = getLayoutRectByRange(nativeRange);
+                var nodeStyle = getComputedStyle(node);
+                var _measureCaretBoxLayout = measureCaretBoxLayout(contentRect, nodeStyle), boxHeight = _measureCaretBoxLayout.boxHeight, rectTop = _measureCaretBoxLayout.rectTop;
+                var maskRect = this.editorMask.getBoundingClientRect();
+                var clipContext = this.ensureClipContext(node);
+                var maskLeft = Math.floor(contentRect.left + contentRect.width / 2 - maskRect.left);
+                var maskTop = Math.floor(rectTop - maskRect.top);
+                var initialRotate = Math.round(Math.atan2(contentRect.width, contentRect.height) * 180 / Math.PI);
+                var rotate = measureInlineCaretRotate(node, initialRotate, nodeStyle.writingMode);
+                this.applyCaretElementLayout(maskLeft, maskTop, boxHeight, nodeStyle.fontSize, rotate);
+                var presentation = computeCaretPresentation({
+                    anchor: node,
+                    maskRect: maskRect,
+                    clipAncestors: clipContext.clipAncestors,
+                    maskLeft: maskLeft,
+                    maskTop: maskTop,
+                    boxHeight: boxHeight,
+                    rectTop: rectTop,
+                    contentRect: contentRect,
+                    fontSize: nodeStyle.fontSize,
+                    color: nodeStyle.color,
+                    measureElementRect: function measureElementRect() {
+                        return _this.elementRef.getBoundingClientRect();
                     }
-                } else {
-                    height = parseFloat(fontSize) * parseFloat(lineHeight);
-                }
-                var boxHeight = Math.max(Math.floor(Math.max(height, rect.height)), 12);
-                // const boxHeight = Math.floor(height)
-                var rectTop = rect.top;
-                if (rect.height < height) {
-                    rectTop -= (height - rect.height) / 2;
-                }
-                rectTop = Math.floor(rectTop);
-                var containerRect = this.editorMask.getBoundingClientRect();
-                var top = Math.floor(rectTop - containerRect.top);
-                var left = Math.floor(rect.left + rect.width / 2 - containerRect.left);
-                var rotate = 0;
-                if (nativeRange.collapsed) {
-                    rotate = Math.round(Math.atan2(rect.width, rect.height) * 180 / Math.PI);
-                    if (rotate !== 0) {
-                        var hackEle = document.createElement('span');
-                        // eslint-disable-next-line max-len
-                        hackEle.style.cssText = 'display: inline-block; width: 10px; height: 10px; position: relative; contain: layout style size; writing-mode: inherit';
-                        var pointEle = document.createElement('span');
-                        pointEle.style.cssText = 'position: absolute; left: 0; top: 0; width:0;height:0';
-                        hackEle.append(pointEle);
-                        node.append(hackEle);
-                        var p1 = pointEle.getBoundingClientRect();
-                        pointEle.style.right = '0';
-                        pointEle.style.left = '';
-                        var p2 = pointEle.getBoundingClientRect();
-                        var x = p1.x - p2.x;
-                        var y = p1.y - p2.y;
-                        rotate = Math.atan2(y, x) * 180 / Math.PI;
-                        hackEle.remove();
-                    }
-                }
-                if (writingMode === 'vertical-lr' || writingMode === 'vertical-rl') {
-                    rotate += 90;
+                });
+                this.applyCaretPresentation(presentation);
+                this.emitCaretPresentation(presentation);
+                this.scrollCaretIntoViewIfNeeded(presentation.layoutElRect, clipContext);
+            }
+        },
+        {
+            key: "resolveCaretAnchor",
+            value: function resolveCaretAnchor(nativeRange) {
+                var startContainer = nativeRange.startContainer;
+                var node = startContainer.nodeType === Node.ELEMENT_NODE ? startContainer : startContainer.parentNode;
+                return (node === null || node === void 0 ? void 0 : node.nodeType) === Node.ELEMENT_NODE ? node : null;
+            }
+        },
+        {
+            key: "normalizeCollapsedRange",
+            value: function normalizeCollapsedRange(nativeRange) {
+                var compositionNode = this.domRenderer.compositionNode;
+                if (!compositionNode) {
+                    return nativeRange;
                 }
+                var range = nativeRange.cloneRange();
+                range.selectNodeContents(compositionNode);
+                range.collapse();
+                return range;
+            }
+        },
+        {
+            key: "applyCaretElementLayout",
+            value: function applyCaretElementLayout(maskLeft, maskTop, boxHeight, fontSize, rotate) {
                 Object.assign(this.elementRef.style, {
-                    left: left + 'px',
-                    top: top + 'px',
+                    left: maskLeft + 'px',
+                    top: maskTop + 'px',
                     height: boxHeight + 'px',
                     lineHeight: boxHeight + 'px',
                     fontSize: fontSize,
                     transform: "rotate(".concat(rotate, "deg)")
                 });
-                this.caret.style.backgroundColor = color === 'rgba(0, 0, 0, 0)' ? '#000' : color;
-                this.styleChangeEvent.next({
-                    height: boxHeight + 'px',
-                    lineHeight: boxHeight + 'px',
-                    fontSize: fontSize
-                });
-                this.positionChangeEvent.next({
-                    left: left,
-                    top: rectTop,
-                    height: boxHeight
-                });
-                if (this.changeFromSelf) {
-                    this.changeFromSelf = false;
-                    var selfRect = this.elementRef.getBoundingClientRect();
-                    var scrollContainer = this.getScrollContainer(startContainer);
-                    var scrollRect = scrollContainer === document.documentElement ? {
-                        top: 0,
-                        bottom: document.documentElement.clientHeight
-                    } : scrollContainer.getBoundingClientRect();
-                    var limit = this.getLimit();
-                    var top1 = Math.max(limit.top, scrollRect.top);
-                    var bottom = Math.min(limit.bottom, scrollRect.bottom);
-                    if (selfRect.top < top1) {
-                        scrollContainer.scrollTop -= top1 - selfRect.top;
-                    } else if (selfRect.bottom > bottom) {
-                        scrollContainer.scrollTop += selfRect.bottom - bottom;
-                    }
+            }
+        },
+        {
+            key: "applyCaretPresentation",
+            value: function applyCaretPresentation(presentation) {
+                this.caretClippedOut = presentation.outOfView;
+                if (presentation.outOfView) {
+                    this.elementRef.style.clipPath = 'none';
+                    this.elementRef.style.visibility = 'hidden';
+                    this.caret.style.visibility = 'hidden';
+                } else {
+                    this.elementRef.style.clipPath = presentation.clipPath;
+                    this.elementRef.style.visibility = '';
+                    this.caret.style.visibility = this._display ? 'visible' : 'hidden';
                 }
+                this.caret.style.backgroundColor = presentation.caretColor;
             }
         },
         {
-            key: "getScrollContainer",
-            value: function getScrollContainer(container) {
-                while(container){
-                    if (_instanceof$2(container, Element)) {
-                        var styles = getComputedStyle(container);
-                        if (styles.overflow !== 'visible' || styles.overflowX !== 'visible' || styles.overflowY !== 'visible') {
-                            return container;
-                        }
-                    }
-                    container = container.parentNode;
+            key: "emitCaretPresentation",
+            value: function emitCaretPresentation(presentation) {
+                this.styleChangeEvent.next(presentation.style);
+                this.positionChangeEvent.next(presentation.position);
+            }
+        },
+        {
+            key: "scrollCaretIntoViewIfNeeded",
+            value: function scrollCaretIntoViewIfNeeded(layoutElRect, clipContext) {
+                var _scrollContainer_ownerDocument;
+                if (!this.changeFromSelf) {
+                    return;
+                }
+                this.changeFromSelf = false;
+                var scrollContainer = clipContext.firstScrollContainer;
+                var doc = (_scrollContainer_ownerDocument = scrollContainer.ownerDocument) !== null && _scrollContainer_ownerDocument !== void 0 ? _scrollContainer_ownerDocument : document;
+                var scrollRect = scrollContainer === doc.documentElement ? {
+                    top: 0,
+                    bottom: doc.documentElement.clientHeight
+                } : scrollContainer.getBoundingClientRect();
+                var limit = this.getLimit();
+                var scrollTop = Math.max(limit.top, scrollRect.top);
+                var scrollBottom = Math.min(limit.bottom, scrollRect.bottom);
+                var layoutBottom = layoutElRect.top + layoutElRect.height;
+                if (layoutElRect.top < scrollTop) {
+                    scrollContainer.scrollTop -= scrollTop - layoutElRect.top;
+                } else if (layoutBottom > scrollBottom) {
+                    scrollContainer.scrollTop += layoutBottom - scrollBottom;
                 }
-                return document.documentElement;
             }
         }
     ]);
@@ -2534,7 +2904,7 @@ var NativeCaret = /*#__PURE__*/ function() {
         _define_property$1(this, "_nativeRange", null);
         _define_property$1(this, "subs", []);
         _define_property$1(this, "positionChangeEvent", new Subject());
-        this.onPositionChange = this.positionChangeEvent.pipe(distinctUntilChanged());
+        this.onPositionChange = this.positionChangeEvent.pipe(distinctUntilChanged(caretPositionEqual));
     }
     _create_class$1(NativeCaret, [
         {
@@ -3379,5 +3749,5 @@ var BrowserModule = /*#__PURE__*/ function() {
     return BrowserModule;
 }();
 
-export { BrowserModule, CollaborateCursor, CollaborateSelectionAwarenessDelegate, DomAdapter, EDITOR_OPTIONS, Input, MagicInput, NativeInput, Parser, SelectionBridge, VIEW_CONTAINER, VIEW_DOCUMENT, VIEW_MASK, createElement, getLayoutRectByRange, isFirefox, isMac, isMobileBrowser, isSafari, isWindows };
+export { BrowserModule, CollaborateCursor, CollaborateSelectionAwarenessDelegate, DomAdapter, EDITOR_OPTIONS, Input, MagicInput, NativeInput, Parser, SelectionBridge, VIEW_CONTAINER, VIEW_DOCUMENT, VIEW_MASK, caretPositionEqual, computeCaretPresentation, createElement, getLayoutRectByRange, getOverflowClipContext, isFirefox, isMac, isMobileBrowser, isSafari, isWindows, measureCaretBoxLayout, measureInlineCaretRotate };
 //# sourceMappingURL=index.esm.js.map