@lynx-js/web-elements 0.11.3 → 0.12.1

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @lynx-js/web-elements
 
+## 0.12.1
+
+### Patch Changes
+
+- fix: XMarkdown slot created should not have prefix ([#2520](https://github.com/lynx-family/lynx-stack/pull/2520))
+
+- feat: add x-markdown support ([#2412](https://github.com/lynx-family/lynx-stack/pull/2412))
+
+  Add opt-in support for the `x-markdown` element on Lynx Web, including
+  Markdown rendering together with its related styling, interaction, animation,
+  truncation, range rendering, and effect capabilities exposed through the
+  component API.
+
+  Update the `web-core`, `web-core-wasm`, and `web-mainthread-apis` runtime
+  paths to use the shared property-or-attribute setter from `web-constants`, so
+  custom elements such as `x-markdown` can receive structured property values
+  correctly instead of being forced through string-only attribute updates.
+
+  ```javascript
+  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))
+
+- fix: list cannot drag-scroll inside x-foldview-slot-ng ([#2507](https://github.com/lynx-family/lynx-stack/pull/2507))
+
+  Cause: `touchstart` used `elementsFromPoint(pageX, pageY)` (expects `clientX/clientY`), so hit-testing can miss the real inner scroller (e.g. `x-list` shadow `#content`) when the document is scrolled.
+
+  Fix: use `elementsFromPoint(clientX, clientY)` + `event.composedPath()` for Shadow DOM, and keep `previousPageX` updated during `touchmove`.
+
+- fix: line-height of markdown-style should be added `px` ([#2509](https://github.com/lynx-family/lynx-stack/pull/2509))
+
+- fix: list `bindscrolltolower` may not trigger because the lower threshold ([#2484](https://github.com/lynx-family/lynx-stack/pull/2484))
+  sentinel had no effective size or offset, causing the bottom
+  `IntersectionObserver` to miss the list boundary
+
+## 0.12.0
+
+### Minor Changes
+
+- feat: add `willchange` event to `x-viewpager-ng` ([#2305](https://github.com/lynx-family/lynx-stack/pull/2305))
+
+### Patch Changes
+
+- fix: firefox `@supports(width:1rex)` ([#2288](https://github.com/lynx-family/lynx-stack/pull/2288))
+
+- fix: check computed overflow style in `getTheMostScrollableKid` to avoid treating `overflow: visible` elements as scroll containers ([#2309](https://github.com/lynx-family/lynx-stack/pull/2309))
+
+- fix: the inline-truncation should only work as a direct child of x-text ([#2287](https://github.com/lynx-family/lynx-stack/pull/2287))
+
+- fix: getVisibleCells cannot work in firefox due to contentvisibilityautostatechange not propagate list-item ([#2308](https://github.com/lynx-family/lynx-stack/pull/2308))
+
+- fix: foldview stuck issue ([#2304](https://github.com/lynx-family/lynx-stack/pull/2304))
+
 ## 0.11.3
 
 ### Patch Changes
@@ -62,14 +116,14 @@
 
 - chore: migrate all @lynx-js/web-elements-\* packages into one ([#2057](https://github.com/lynx-family/lynx-stack/pull/2057))
 
-  ### Before
+  #### Before
 
   ```js
   import '@lynx-js/web-elements-template';
   import '@lynx-js/web-elements-compat/LinearContainer';
   ```
 
-  ### After
+  #### After
 
   ```js
   import '@lynx-js/web-elements/html-templates';
@@ -692,17 +746,17 @@
 - 3547621: feat(web): use `<lynx-wrapper/>` to replace `<div style="display:content"/>`
 - bed4f24: feat(web): implement <x-list> with list-type="single"
 
-  ## 1. RFC
+  #### 1. RFC
 
   https://github.com/lynx-wg/lynx-stack/issues/106
 
-  ## 2. Implementation differences with RFC
+  #### 2. Implementation differences with RFC
 
-  ### paging-enabled
+  ##### paging-enabled
 
   deprecated, no need to implement
 
-  ### layoutcomplete
+  ##### layoutcomplete
 
   Triggered only after the first screen because using contentvisibilityautostatechange.
 
@@ -711,28 +765,28 @@
   > This is because content is the parent container of list-item, and content is always visible before list-item.
   > We cannot obtain the timing of all the successfully visible list-items on the screen, so 100ms is used to delay this behavior.
 
-  ### event-scrolltoedge
+  ##### event-scrolltoedge
 
   split bindscrolltoupperedge and bindscrooltolowerdge.
 
-  ### event-scrolltoupper/lower
+  ##### event-scrolltoupper/lower
 
   Can be used with upper/lower-threshold-item-count.
 
   Attention, when the number of x-list children changes, scrolltoupper/lower will be re-triggered (if the new node is on the screen).
 
-  ### getVisibleCells, layoutcomplete
+  ##### getVisibleCells, layoutcomplete
 
   The returned cells may be an empty array, because there is a high probability that the contentvisibilityautostatechange event of list-item will not be captured when the first screen is displayed.
 
-  ## 3. Tests not implemented
+  #### 3. Tests not implemented
 
-  ### HTML Tests
+  ##### 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
+  ##### React Tests
 
   1. lynx.createQuery not supported.
 
@@ -797,7 +851,7 @@
 - 8c6eeb9: fix(web): rename x-swiper-itrm to swiper-item
 - 1fe49a2: feat(web): add custom element x-audio-tt
 
-  ## The behavior is different from the native 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.
 
@@ -806,13 +860,13 @@
 
   - The code returned by the binderror event does not include -4
 
-  ## Unimplemented properties:
+  #### Unimplemented properties:
 
   - autoplay
   - playertype
   - experimental-ios-async-prepare
 
-  ## Unimplemented methods:
+  #### Unimplemented methods:
 
   - requestFocus
   - releaseFocus

package/dist/elements/XFoldViewNg/XFoldviewSlotNgTouchEventsHandler.js

@@ -1,3 +1,4 @@
+import { scrollContainerDom } from '../common/constants.js';
 import { isHeaderShowing } from './XFoldviewNg.js';
 export class XFoldviewSlotNgTouchEventsHandler {
     #parentScrollTop = 0;
@@ -25,9 +26,38 @@ export class XFoldviewSlotNgTouchEventsHandler {
             passive: false,
         });
     }
+    #resolveScrollContainer(element) {
+        const maybeScrollContainer = element[scrollContainerDom];
+        return maybeScrollContainer instanceof Element
+            ? maybeScrollContainer
+            : element;
+    }
+    #collectCandidateElements(elements) {
+        return [
+            ...new Set(elements.map(element => this.#resolveScrollContainer(element))),
+        ];
+    }
+    #isScrollContainer(element) {
+        let overflowY;
+        if (typeof element.computedStyleMap === 'function') {
+            try {
+                overflowY = element.computedStyleMap().get('overflow-y')?.toString()
+                    ?? 'visible';
+            }
+            catch {
+                overflowY = getComputedStyle(element).overflowY || 'visible';
+            }
+        }
+        else {
+            overflowY = getComputedStyle(element).overflowY || 'visible';
+        }
+        return overflowY === 'auto' || overflowY === 'scroll'
+            || overflowY === 'hidden' || overflowY === 'overlay';
+    }
     #getTheMostScrollableKid(delta) {
         const scrollableKid = this.#elements?.find((element) => {
-            if (element.scrollHeight > element.clientHeight) {
+            if (this.#isScrollContainer(element)
+                && element.scrollHeight > element.clientHeight) {
                 const couldScrollNear = delta < 0
                     && element.scrollTop !== 0;
                 const couldScrollFar = delta > 0
@@ -65,6 +95,7 @@ export class XFoldviewSlotNgTouchEventsHandler {
         }
         this.#handleScrollDelta(deltaY, parentElement);
         this.#previousPageY = pageY;
+        this.#previousPageX = pageX;
     };
     #handleWheel = (event) => {
         const parentElement = this.#getParentElement();
@@ -74,10 +105,14 @@ export class XFoldviewSlotNgTouchEventsHandler {
         if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) {
             return;
         }
-        const pathElements = event.composedPath().filter((element) => element instanceof Element && this.#dom.contains(element));
+        const pathElements = event.composedPath().filter((element) => element instanceof Element && this.#dom.contains(element)
+            && element !== this.#dom);
         const { clientX, clientY } = event;
         const pointElements = document.elementsFromPoint(clientX, clientY).filter(e => this.#dom.contains(e));
-        this.#elements = [...new Set([...pathElements, ...pointElements])];
+        this.#elements = this.#collectCandidateElements([
+            ...pathElements,
+            ...pointElements,
+        ]);
         this.#parentScrollTop = parentElement.scrollTop;
         if (this.#elements) {
             for (const element of this.#elements) {
@@ -96,8 +131,18 @@ export class XFoldviewSlotNgTouchEventsHandler {
         }
     }
     #touchStart = (event) => {
-        const { pageX, pageY } = event.touches.item(0);
-        this.#elements = document.elementsFromPoint(pageX, pageY).filter(e => this.#dom.contains(e));
+        const touch = event.touches.item(0);
+        const { pageX, pageY, clientX, clientY } = touch;
+        // `elementsFromPoint()` doesn't reliably pierce into Shadow DOM; combine with
+        // the composed path so we can pick up internal scroll containers like
+        // `x-list`'s `#content` inside the shadow root.
+        const pathElements = event.composedPath().filter((element) => element instanceof Element && this.#dom.contains(element)
+            && element !== this.#dom);
+        const pointElements = document.elementsFromPoint(clientX, clientY).filter(e => this.#dom.contains(e) && e !== this.#dom);
+        this.#elements = this.#collectCandidateElements([
+            ...pathElements,
+            ...pointElements,
+        ]);
         this.#previousPageY = pageY;
         this.#previousPageX = pageX;
         this.#parentScrollTop = this.#getParentElement()?.scrollTop ?? 0;

package/dist/elements/XList/XList.d.ts

@@ -1,3 +1,4 @@
+import { scrollContainerDom } from '../common/constants.js';
 export declare class XList extends HTMLElement {
     #private;
     static readonly notToFilterFalseAttributes: Set<string>;
@@ -7,6 +8,7 @@ export declare class XList extends HTMLElement {
     set scrollLeft(val: number);
     get scrollHeight(): number;
     get scrollWidth(): number;
+    get [scrollContainerDom](): HTMLElement;
     get __scrollTop(): number;
     get __scrollLeft(): number;
     scrollToPosition(params: {

package/dist/elements/XList/XList.js

@@ -10,6 +10,7 @@ import { XListEvents } from './XListEvents.js';
 import { XListWaterfall } from './XListWaterfall.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+import { scrollContainerDom } from '../common/constants.js';
 import { templateXList } from '../htmlTemplates.js';
 let XList = (() => {
     let _classDecorators = [Component('x-list', [CommonEventsAndMethods, XListAttributes, XListEvents, XListWaterfall], templateXList)];
@@ -52,6 +53,9 @@ let XList = (() => {
         get scrollWidth() {
             return this.#getListContainer().scrollWidth;
         }
+        get [scrollContainerDom]() {
+            return this.#getListContainer();
+        }
         get __scrollTop() {
             return super.scrollTop;
         }
@@ -174,11 +178,22 @@ let XList = (() => {
             };
         }
         getVisibleCells = () => {
-            const cells = Object.values(this.#cellsMap);
-            const children = Array.from(this.children).filter(node => {
+            let cells = Object.values(this.#cellsMap);
+            const children = Array.from(this.children).filter((node) => {
                 return node.tagName === 'LIST-ITEM';
             });
-            return cells.map(cell => {
+            // firfox cannot triiger contentvisibilityautostatechange event of list-item
+            if (cells.length === 0) {
+                const listRect = this.#getListContainer().getBoundingClientRect();
+                cells = children.filter((cell) => {
+                    const rect = cell.getBoundingClientRect();
+                    return (rect.bottom >= listRect.top
+                        && rect.top <= listRect.bottom
+                        && rect.right >= listRect.left
+                        && rect.left <= listRect.right);
+                });
+            }
+            return cells.map((cell) => {
                 const rect = cell.getBoundingClientRect();
                 return {
                     id: cell.getAttribute('id'),

package/dist/elements/XMarkdown/XMarkdown.d.ts

@@ -0,0 +1,43 @@
+import type { MarkdownStyleConfig } from './XMarkdownAttributes.js';
+export declare class XMarkdown extends HTMLElement {
+    #private;
+    static readonly notToFilterFalseAttributes: Set<string>;
+    get markdownStyle(): MarkdownStyleConfig;
+    set markdownStyle(value: MarkdownStyleConfig | string | null);
+    get ['markdown-style'](): MarkdownStyleConfig;
+    set ['markdown-style'](value: MarkdownStyleConfig | string | null);
+    /**
+     * 获取当前渲染内容中的所有图片 URL。
+     */
+    getImages(): string[];
+    getContent(params?: {
+        start?: number;
+        end?: number;
+    }): {
+        content: string;
+    };
+    pauseAnimation(): void;
+    resumeAnimation(params?: {
+        animationStep?: number;
+    }): void;
+    getSelectedText(): string;
+    getTextBoundingRect(params?: {
+        start?: number;
+        end?: number;
+        indexType?: 'char' | 'source';
+    }): {
+        boundingRect: DOMRect;
+    } | null;
+    setTextSelection(params: {
+        startX: number;
+        startY: number;
+        endX: number;
+        endY: number;
+    }): void;
+    getParseResult(params: {
+        tags: string[];
+    }): Record<string, {
+        start: number;
+        end: number;
+    }[]>;
+}