@lynx-js/web-elements-canary 0.12.6 → 0.12.7-canary-20260720-5a831708

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lynx-js/web-elements
 
+## 0.12.7-canary-20260720090000-5a8317089341c4a5d594f92286980e7f17b9798c
+
+### Patch Changes
+
+- Fix x-text custom truncation when inline x-view elements are included in the measured text. ([#2998](https://github.com/lynx-family/lynx-stack/pull/2998))
+
 ## 0.12.6
 
 ### Patch Changes
@@ -49,7 +55,7 @@
   correctly instead of being forced through string-only attribute updates.
 
   ```javascript
-  import '@lynx-js/web-elements/XMarkdown';
+  import "@lynx-js/web-elements/XMarkdown";
   ```
 
 - fix: x-markdown inline view injection no longer queries light DOM children when the content attribute changes. Consumers must now pre-set `slot="{id}"` on the child element they want to project into `inlineview://{id}`. ([#2516](https://github.com/lynx-family/lynx-stack/pull/2516))
@@ -119,11 +125,11 @@
   Now we integrated the `LinearCompat` into @lynx-js/web-elements. Developers can safely remove the following imports:
 
   ```js
-  import '@lynx-js/web-elements/compat/LinearContainer';
+  import "@lynx-js/web-elements/compat/LinearContainer";
   ```
 
   ```js
-  import '@lynx-js/web-elements-compat/LinearContainer';
+  import "@lynx-js/web-elements-compat/LinearContainer";
   ```
 
 ### Patch Changes
@@ -149,21 +155,20 @@
   #### Before
 
   ```js
-  import '@lynx-js/web-elements-template';
-  import '@lynx-js/web-elements-compat/LinearContainer';
+  import "@lynx-js/web-elements-template";
+  import "@lynx-js/web-elements-compat/LinearContainer";
   ```
 
   #### After
 
   ```js
-  import '@lynx-js/web-elements/html-templates';
-  import '@lynx-js/web-elements/compat/LinearContainer';
+  import "@lynx-js/web-elements/html-templates";
+  import "@lynx-js/web-elements/compat/LinearContainer";
   ```
 
 ### Patch Changes
 
 - refactor: change code structure for improved readability and maintainability ([#2004](https://github.com/lynx-family/lynx-stack/pull/2004))
-
   - enable noUnusedLocals for web-elements
   - add source field for supporting @rsbuild/plugin-source-build
 
@@ -198,7 +203,6 @@
 - fix: define x-foldview-slot-drag-ng typo. ([#1915](https://github.com/lynx-family/lynx-stack/pull/1915))
 
 - feat: 1. Added support for the list `estimated-main-axis-size-px` property; the width and height of `list-item` are no longer required. ([#1911](https://github.com/lynx-family/lynx-stack/pull/1911))
-
   2. Fixed an issue where the list `lower-threshold-item-count` event would not trigger when using a horizontal layout under a waterfall layout.
 
   3. Fixed an issue where calling the list `autoScroll` method in `useEffect` might not scroll.
@@ -226,7 +230,6 @@
 ### Patch Changes
 
 - fix: ([#1837](https://github.com/lynx-family/lynx-stack/pull/1837))
-
   1. `LynxView.updateData()` cannot trigger `dataProcessor`.
 
   2. **This is a break change:** The second parameter of `LynxView.updateData()` has been changed from `UpdateDataType` to `string`, which is the `processorName` (default is `default` which will use `defaultDataProcessor`). This change is to better align with Native. The current complete type is as follows:
@@ -252,7 +255,6 @@
 ### Patch Changes
 
 - fix: 1. svg use image tag to render, to differentiate background-image styles ([#1668](https://github.com/lynx-family/lynx-stack/pull/1668))
-
   1. use blob instead of raw data-uri
 
   > Not using data-uri(data:image/svg+xml;utf8,${props.content})
@@ -303,7 +305,6 @@
 ### Patch Changes
 
 - Add crossorigin attribute support to x-image component ([#1340](https://github.com/lynx-family/lynx-stack/pull/1340))
-
   - Added `crossorigin` to the `observedAttributes` array in `ImageSrc.ts`
   - Implemented `#handleCrossorigin` handler using the `bindToAttribute` helper to forward the crossorigin attribute from the custom element to the internal `<img>` element
   - Added comprehensive test coverage to verify the attribute is properly passed through to the shadow DOM
@@ -466,7 +467,6 @@
 ### Minor Changes
 
 - fix: ([#629](https://github.com/lynx-family/lynx-stack/pull/629))
-
   - typo of `initial-scroll-offset` in scroll-view.
   - scroll-view's `initial-scroll-index` is changed to `initial-scroll-to-index`.
 
@@ -493,7 +493,6 @@
 - feat: improve compatibility for chrome 108 & support linear-gradient for nested x-text ([#590](https://github.com/lynx-family/lynx-stack/pull/590))
 
   **This is a breaking change**
-
   - Please upgrade your `@lynx-js/web-elements` to >=0.6.0
   - Please upgrade your `@lynx-js/web-core` to >=0.12.0
   - The compiled lynx template json won't be impacted.
@@ -516,7 +515,6 @@
 - feat: fully support MTS ([#569](https://github.com/lynx-family/lynx-stack/pull/569))
 
   Now use support the following usage
-
   - mainthread event
   - mainthread ref
   - runOnMainThread/runOnBackground
@@ -531,7 +529,6 @@
 - fix: refactor foldview slot offset logic ([#575](https://github.com/lynx-family/lynx-stack/pull/575))
 
 - fix: improve x-foldview-ng ([#513](https://github.com/lynx-family/lynx-stack/pull/513))
-
   - support fling for touch event driven scrolling
   - allow the height of `x-foldview-slot-ng` + `x-foldview-toolbar-ng` > `x-foldview-ng`
   - do not prevent horizontal gesture. After this commit we only allow one direction gesture for one touch (start -> end)
@@ -582,7 +579,6 @@
 ### Minor Changes
 
 - feat: 1. list adds support for the `sticky` attribute. Now sticky-offset, sticky-top, and sticky-bottom will only take effect when `sticky` is `true`. ([#257](https://github.com/lynx-family/lynx-stack/pull/257))
-
   2. Added support for `list-main-axis-gap`, `list-cross-axis-gap`.
 
 - feat(web): The list element supports list-type with **flow**. ([#240](https://github.com/lynx-family/lynx-stack/pull/240))
@@ -596,7 +592,6 @@
 ### Minor Changes
 
 - refactor: remove web-elements/lazy and loadNewTag ([#123](https://github.com/lynx-family/lynx-stack/pull/123))
-
   - remove @lynx-js/web-elements/lazy
   - remove loadElement
   - remove loadNewTag callback
@@ -747,11 +742,9 @@
   Before this commit, those parent text element with style `color:linear-gradient()` will cause empty content in children inline-text element
 
 - f650509: fix: browser compatibility issues
-
   1. safari 17.2~18.0 issue
 
   `display:linear` doesn't work
-
   2. chrome < 99 issue
 
   text may be blank on these browsers
@@ -812,12 +805,10 @@
   #### 3. Tests not implemented
 
   ##### HTML Tests
-
   1. event-layoutcomplete skipped webkit, firefox due to contentvisibilityautostatechange not propagate
   2. get-visible-cells skipped webkit, firefox due to contentvisibilityautostatechange not propagate
 
   ##### React Tests
-
   1. lynx.createQuery not supported.
 
 - b323923: feat(web): support **ReplaceElement, **CreateImage, \_\_CreateScrollView
@@ -842,8 +833,8 @@
   For compating usage, `@lynx-js/web-elements-compat/LinearContainer` is provided.
 
   ```javascript
-  import '@lynx-js/web-elements-compat/LinearContainer';
-  import '@lynx-js/web-elements/all';
+  import "@lynx-js/web-elements-compat/LinearContainer";
+  import "@lynx-js/web-elements/all";
   ```
 
 - f8d1d98: break: rename the `blur` and `focus` event to `lynxblur` and `lynxfocus` for x-input element
@@ -865,11 +856,11 @@
   There is also a simple way to use this feature
 
   ```javascript
-  import { LynxCard } from '@lynx-js/web-core';
-  import { loadElement } from '@lynx-js/web-elements/lazy';
-  import '@lynx-js/web-elements/index.css';
-  import '@lynx-js/web-core/index.css';
-  import './index.css';
+  import { LynxCard } from "@lynx-js/web-core";
+  import { loadElement } from "@lynx-js/web-elements/lazy";
+  import "@lynx-js/web-elements/index.css";
+  import "@lynx-js/web-core/index.css";
+  import "./index.css";
 
   const lynxcard = new LynxCard({
     ...beforeConfigs,
@@ -882,36 +873,30 @@
 - 1fe49a2: feat(web): add custom element x-audio-tt
 
   #### The behavior is different from the native x-audio-tt:
-
   - When src changes, resources will not be loaded immediately. Resources will only be loaded when the play and prepare methods are triggered.
 
   > This is because resource loading and decoding are two steps in native lynx, while only resource loading can be controlled in web.
   > So loading and decoding are handled on one side.
-
   - The code returned by the binderror event does not include -4
 
   #### Unimplemented properties:
-
   - autoplay
   - playertype
   - experimental-ios-async-prepare
 
   #### Unimplemented methods:
-
   - requestFocus
   - releaseFocus
 
 ### Patch Changes
 
 - 987da15: fix: x-foldview-ng scrolling behavior
-
   - fix scrolling behavior on its sub dom-tree has x-refresh-view
   - fix scrolling behavior on its sub dom-tree has x-viewpager-ng
 
 - 3e66349: fix: x-viewpager bindchange use scrollEnd to trigger; bindoffsetchange use scroll to trigger.
 - 2b7a4fe: fix: exposure should track the interaction with the closest scroll able ancestor
 - 461d965: fix(web): swiper specifies current and bindchange, may cause jitter problem and some layout problems.
-
   1. swiper specifies current and bindchange, may cause jitter problem.
   2. When there are current not 0 && circular, the first layout is not correct.
   3. When there are circular mode='carousel' attributes, the first paint position is not correct.
@@ -919,7 +904,6 @@
 
 - 7ee0dc1: fix(web): rename swiper-item to x-swiper-item
 - 7c752d9: fix(web): two bugs of x-textarea and x-input:
-
   1. When inputting Chinese characters, you need to send an input event again after the input is completed.
 
   2. When the business input event is bound to the input event inside web-elements, the input event will be triggered twice by mistake, so stopImmediatePropagation needs to be prevented in the form
@@ -944,7 +928,6 @@
 - 532380d: fix: ::part()::after selector not work on chrome 100
 - a41965d: fix: foldview horizontal scroll in safari
 - a7a222b: fix(web): x-view-pager-ng
-
   1. select-index, initial-select-index should only selectTab if the element has a connectedCallback.
   2. add scroll-snap-stop to x-view-pager-ng, to slide only one element at one time.
 

package/dist/elements/XText/XTextTruncation.js

@@ -7,6 +7,39 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { boostedQueueMicrotask, genDomGetter, registerAttributeHandler, } from '../../element-reactive/index.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 import { registerEventEnableStatusChangeHandler } from '../../element-reactive/index.js';
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const getSiblingIndex = (node) => {
+    let index = 0;
+    let previousNode = node.previousSibling;
+    while (previousNode) {
+        index++;
+        previousNode = previousNode.previousSibling;
+    }
+    return index;
+};
+const getRangePosition = (nodeInfo, offsetInNode) => {
+    const { node } = nodeInfo;
+    if (node.nodeType === Node.TEXT_NODE) {
+        return {
+            container: node,
+            offset: clamp(offsetInNode, 0, node.data.length),
+        };
+    }
+    // Elements are one virtual character, while DOM Range offsets address child
+    // indexes. Use the parent's before/after-element boundary instead.
+    const elementOffset = offsetInNode > 0 ? 1 : 0;
+    const parentNode = node.parentNode;
+    if (!parentNode) {
+        return {
+            container: node,
+            offset: clamp(elementOffset, 0, node.childNodes.length),
+        };
+    }
+    return {
+        container: parentNode,
+        offset: getSiblingIndex(node) + elementOffset,
+    };
+};
 let XTextTruncation = (() => {
     var _a;
     let _instanceExtraInitializers = [];
@@ -144,12 +177,14 @@ let XTextTruncation = (() => {
                         let currentNodeInfo = measure
                             .getNodeInfoByCharIndex(maxLineEndAt);
                         const endCharInNodeIndex = end - currentNodeInfo.start;
-                        range.setEnd(currentNodeInfo.node, endCharInNodeIndex);
-                        range.setStart(currentNodeInfo.node, endCharInNodeIndex);
+                        const initialRangePosition = getRangePosition(currentNodeInfo, endCharInNodeIndex);
+                        range.setEnd(initialRangePosition.container, initialRangePosition.offset);
+                        range.setStart(initialRangePosition.container, initialRangePosition.offset);
                         while (range.getBoundingClientRect().width < inlineTruncationWidth
                             && (maxLineEndAt -= 1)
                             && (currentNodeInfo = measure.getNodeInfoByCharIndex(maxLineEndAt))) {
-                            range.setStart(currentNodeInfo.node, maxLineEndAt - currentNodeInfo.start);
+                            const rangePosition = getRangePosition(currentNodeInfo, maxLineEndAt - currentNodeInfo.start);
+                            range.setStart(rangePosition.container, rangePosition.offset);
                         }
                     }
                     else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements-canary",
-  "version": "0.12.6",
+  "version": "0.12.7-canary-20260720-5a831708",
   "private": false,
   "repository": {
     "type": "git",
@@ -142,6 +142,7 @@
     "@rsbuild/core": "2.1.4",
     "@rsbuild/plugin-source-build": "1.0.5",
     "@types/markdown-it": "^14.1.1",
+    "@types/node": "^24.10.13",
     "nyc": "^17.1.0",
     "tslib": "^2.8.1",
     "@lynx-js/playwright-fixtures": "0.0.0"