@lynx-js/web-elements 0.12.0 → 0.12.2

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @lynx-js/web-elements
 
+## 0.12.2
+
+### Patch Changes
+
+- fix: xmarkdown create img incorrectly ([#2540](https://github.com/lynx-family/lynx-stack/pull/2540))
+
+## 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
@@ -80,14 +122,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';
@@ -710,17 +752,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.
 
@@ -729,28 +771,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.
 
@@ -815,7 +857,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.
 
@@ -824,13 +866,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,6 +26,17 @@ 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') {
@@ -83,6 +95,7 @@ export class XFoldviewSlotNgTouchEventsHandler {
         }
         this.#handleScrollDelta(deltaY, parentElement);
         this.#previousPageY = pageY;
+        this.#previousPageX = pageX;
     };
     #handleWheel = (event) => {
         const parentElement = this.#getParentElement();
@@ -96,7 +109,10 @@ export class XFoldviewSlotNgTouchEventsHandler {
             && 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) {
@@ -115,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) && e !== this.#dom);
+        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;
         }

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;
+    }[]>;
+}

package/dist/elements/XMarkdown/XMarkdown.js

@@ -0,0 +1,346 @@
+import { __esDecorate, __runInitializers } from "tslib";
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { Component } from '../../element-reactive/index.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { templateXMarkdown } from '../htmlTemplates.js';
+import { parseMarkdownStyle, serializeMarkdownStyle, XMarkdownAttributes, } from './XMarkdownAttributes.js';
+const getComposedRange = (selection, shadowRoot) => {
+    const getComposedRanges = selection
+        .getComposedRanges;
+    if (!shadowRoot || typeof getComposedRanges !== 'function')
+        return null;
+    try {
+        return getComposedRanges.call(selection, {
+            shadowRoots: [shadowRoot],
+        })[0] ?? null;
+    }
+    catch {
+        try {
+            return getComposedRanges.call(selection, shadowRoot)[0] ?? null;
+        }
+        catch {
+            return null;
+        }
+    }
+};
+const createRangeByOffsets = (doc, root, start, end) => {
+    const walker = doc.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    let pos = 0;
+    let startNode = null;
+    let startOffset = 0;
+    let endNode = null;
+    let endOffset = 0;
+    let node = walker.nextNode();
+    while (node) {
+        const len = node.nodeValue?.length ?? 0;
+        if (!startNode && pos + len >= start) {
+            startNode = node;
+            startOffset = start - pos;
+        }
+        if (pos + len >= end) {
+            endNode = node;
+            endOffset = end - pos;
+            break;
+        }
+        pos += len;
+        node = walker.nextNode();
+    }
+    if (!startNode)
+        return null;
+    if (!endNode) {
+        endNode = startNode;
+        endOffset = startOffset;
+    }
+    const range = doc.createRange();
+    range.setStart(startNode, Math.max(0, Math.min(startOffset, startNode.length)));
+    range.setEnd(endNode, Math.max(0, Math.min(endOffset, endNode.length)));
+    return range;
+};
+const getRenderedPrefixLengthForSourceOffset = (source, rendered, sourceOffset) => {
+    let renderedIndex = 0;
+    const limit = Math.max(0, Math.min(sourceOffset, source.length));
+    for (let sourceIndex = 0; sourceIndex < limit; sourceIndex += 1) {
+        if (renderedIndex >= rendered.length)
+            break;
+        if (source[sourceIndex] === rendered[renderedIndex]) {
+            renderedIndex += 1;
+        }
+    }
+    return renderedIndex;
+};
+const mapSourceRangeToCharRange = (source, rendered, start, end) => {
+    const renderedStart = getRenderedPrefixLengthForSourceOffset(source, rendered, start);
+    const renderedEnd = getRenderedPrefixLengthForSourceOffset(source, rendered, end);
+    return {
+        start: renderedStart,
+        end: Math.max(renderedStart, renderedEnd),
+    };
+};
+const isSelectionNodeInsideHost = (dom, shadowRoot, node) => !!node
+    && (node === dom
+        || node === shadowRoot
+        || dom.contains(node)
+        || !!shadowRoot?.contains(node));
+const getRangeInRoot = (dom, root, selection) => {
+    if (!selection)
+        return null;
+    const shadowRoot = dom.shadowRoot;
+    const sourceRange = getComposedRange(selection, shadowRoot)
+        ?? (selection.rangeCount > 0 ? selection.getRangeAt(0) : null);
+    if (!sourceRange)
+        return null;
+    if (!root.contains(sourceRange.startContainer)
+        || !root.contains(sourceRange.endContainer)) {
+        if (!isSelectionNodeInsideHost(dom, shadowRoot, sourceRange.startContainer)
+            || !isSelectionNodeInsideHost(dom, shadowRoot, sourceRange.endContainer)
+            || !isSelectionNodeInsideHost(dom, shadowRoot, selection.anchorNode)
+            || !isSelectionNodeInsideHost(dom, shadowRoot, selection.focusNode)) {
+            return null;
+        }
+        const selectedText = selection.toString();
+        if (!selectedText) {
+            return null;
+        }
+        const start = root.textContent?.indexOf(selectedText) ?? -1;
+        if (start < 0)
+            return null;
+        return createRangeByOffsets(dom.ownerDocument, root, start, start + selectedText.length);
+    }
+    const range = dom.ownerDocument.createRange();
+    range.setStart(sourceRange.startContainer, sourceRange.startOffset);
+    range.setEnd(sourceRange.endContainer, sourceRange.endOffset);
+    return range;
+};
+const getSelectionCandidates = (dom) => {
+    const shadowRoot = dom.shadowRoot;
+    const shadowSelection = shadowRoot && typeof shadowRoot.getSelection === 'function'
+        ? shadowRoot.getSelection()
+        : null;
+    const documentSelection = dom.ownerDocument.getSelection();
+    return [shadowSelection, documentSelection].filter((selection, index, selections) => !!selection && selections.indexOf(selection) === index);
+};
+const getSelectionForRoot = (dom, root) => {
+    for (const selection of getSelectionCandidates(dom)) {
+        const range = getRangeInRoot(dom, root, selection);
+        if (range)
+            return { selection, range };
+    }
+    return null;
+};
+const getPreferredSelectionTarget = (dom) => {
+    const candidates = getSelectionCandidates(dom);
+    return candidates[0] ?? null;
+};
+let XMarkdown = (() => {
+    let _classDecorators = [Component('x-markdown', [CommonEventsAndMethods, XMarkdownAttributes], templateXMarkdown)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var XMarkdown = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            XMarkdown = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static notToFilterFalseAttributes = new Set(['content-complete']);
+        #getMarkdownStyle() {
+            return parseMarkdownStyle(this.getAttribute('markdown-style'));
+        }
+        #setMarkdownStyle(value) {
+            const serialized = serializeMarkdownStyle(value);
+            if (serialized === null) {
+                this.removeAttribute('markdown-style');
+            }
+            else {
+                this.setAttribute('markdown-style', serialized);
+            }
+        }
+        get markdownStyle() {
+            return this.#getMarkdownStyle();
+        }
+        set markdownStyle(value) {
+            this.#setMarkdownStyle(value);
+        }
+        get ['markdown-style']() {
+            return this.#getMarkdownStyle();
+        }
+        set ['markdown-style'](value) {
+            this.#setMarkdownStyle(value);
+        }
+        /**
+         * 获取当前渲染内容中的所有图片 URL。
+         */
+        getImages() {
+            const root = this.shadowRoot?.querySelector('#markdown-root');
+            if (!root)
+                return [];
+            return Array.from(root.querySelectorAll('img'))
+                .map((img) => img.getAttribute('src') || '')
+                .filter((v) => !!v);
+        }
+        getContent(params) {
+            const content = this.getAttribute('content') ?? '';
+            const s = Math.max(0, params?.start ?? 0);
+            const eInclusive = params?.end ?? (content.length - 1);
+            const e = Math.min(content.length, eInclusive + 1);
+            const slice = e >= s ? content.slice(s, e) : '';
+            return { content: slice };
+        }
+        pauseAnimation() {
+            this.setAttribute('animation-paused', 'true');
+        }
+        resumeAnimation(params) {
+            if (params?.animationStep !== undefined) {
+                this.setAttribute('initial-animation-step', String(params.animationStep));
+            }
+            if (this.getAttribute('animation-type') !== 'typewriter') {
+                this.setAttribute('animation-type', 'typewriter');
+            }
+            const velocity = this.getAttribute('animation-velocity');
+            if (!velocity || Number(velocity) <= 0) {
+                this.setAttribute('animation-velocity', '40');
+            }
+            this.removeAttribute('animation-paused');
+        }
+        getSelectedText() {
+            const root = this.shadowRoot?.querySelector('#markdown-root');
+            if (!root)
+                return '';
+            const result = getSelectionForRoot(this, root);
+            return result?.range.toString() ?? '';
+        }
+        getTextBoundingRect(params) {
+            const root = this.shadowRoot?.querySelector('#markdown-root');
+            if (!root)
+                return null;
+            const doc = this.ownerDocument;
+            const createRangeByChar = (s, e) => {
+                const walker = doc.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+                let pos = 0;
+                let startNode = null;
+                let startOffset = 0;
+                let endNode = null;
+                let endOffset = 0;
+                let node = walker.nextNode();
+                while (node) {
+                    const len = node.nodeValue?.length ?? 0;
+                    if (!startNode && pos + len >= s) {
+                        startNode = node;
+                        startOffset = s - pos;
+                    }
+                    if (pos + len >= e) {
+                        endNode = node;
+                        endOffset = e - pos;
+                        break;
+                    }
+                    pos += len;
+                    node = walker.nextNode();
+                }
+                if (!startNode)
+                    return null;
+                if (!endNode) {
+                    endNode = startNode;
+                    endOffset = startOffset;
+                }
+                const r = doc.createRange();
+                r.setStart(startNode, Math.max(0, Math.min(startOffset, startNode.length)));
+                r.setEnd(endNode, Math.max(0, Math.min(endOffset, endNode.length)));
+                return r;
+            };
+            if (params?.start !== undefined || params?.end !== undefined) {
+                const s = Math.max(0, params?.start ?? 0);
+                const e = Math.max(s, params?.end ?? s);
+                const rangeOffsets = params?.indexType === 'source'
+                    ? mapSourceRangeToCharRange(this.getAttribute('content') ?? '', root.textContent ?? '', s, e)
+                    : { start: s, end: e };
+                if (!rangeOffsets)
+                    return null;
+                const r = createRangeByChar(rangeOffsets.start, rangeOffsets.end);
+                if (!r)
+                    return null;
+                return { boundingRect: r.getBoundingClientRect() };
+            }
+            const result = getSelectionForRoot(this, root);
+            if (!result)
+                return null;
+            return { boundingRect: result.range.getBoundingClientRect() };
+        }
+        setTextSelection(params) {
+            const doc = this.ownerDocument;
+            const getRangeAtPoint = (x, y) => {
+                if (doc.caretRangeFromPoint)
+                    return doc.caretRangeFromPoint(x, y);
+                if (doc.caretPositionFromPoint) {
+                    const pos = doc.caretPositionFromPoint(x, y);
+                    if (!pos)
+                        return null;
+                    const r = this.ownerDocument.createRange();
+                    r.setStart(pos.offsetNode, pos.offset);
+                    r.collapse(true);
+                    return r;
+                }
+                return null;
+            };
+            const r1 = getRangeAtPoint(params.startX, params.startY);
+            const r2 = getRangeAtPoint(params.endX, params.endY);
+            if (r1 && r2) {
+                const sel = getPreferredSelectionTarget(this);
+                if (!sel)
+                    return;
+                sel.removeAllRanges();
+                const range = this.ownerDocument.createRange();
+                range.setStart(r1.startContainer, r1.startOffset);
+                range.setEnd(r2.startContainer, r2.startOffset);
+                sel.addRange(range);
+            }
+        }
+        getParseResult(params) {
+            const root = this.shadowRoot?.querySelector('#markdown-root');
+            if (!root)
+                return {};
+            const text = root.textContent || '';
+            const result = {};
+            const doc = this.ownerDocument;
+            const calcOffset = (node) => {
+                const walker = doc.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+                let pos = 0;
+                let start = -1;
+                let end = -1;
+                let current = walker.nextNode();
+                while (current) {
+                    const len = (current.nodeValue || '').length;
+                    if (current === node || node.contains(current)) {
+                        if (start < 0) {
+                            start = pos;
+                        }
+                        end = pos + len;
+                    }
+                    pos += len;
+                    current = walker.nextNode();
+                }
+                return {
+                    start: Math.max(0, Math.min(start, text.length)),
+                    end: Math.max(0, Math.min(end, text.length)),
+                };
+            };
+            for (const tag of params.tags) {
+                const nodes = Array.from(root.querySelectorAll(tag));
+                result[tag] = nodes.map((el) => calcOffset(el));
+            }
+            return result;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return XMarkdown = _classThis;
+})();
+export { XMarkdown };
+//# sourceMappingURL=XMarkdown.js.map

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

@@ -0,0 +1,35 @@
+import type { XMarkdown } from './XMarkdown.js';
+export type MarkdownStyleMap = Record<string, Record<string, unknown>>;
+export type MarkdownStyleConfig = MarkdownStyleMap & {
+    truncation?: {
+        content?: string;
+        truncationType?: 'text' | 'view';
+    };
+    typewriterCursor?: {
+        customCursor?: string;
+        verticalAlign?: string;
+    };
+};
+export declare const parseMarkdownStyle: (value: string | null | undefined) => MarkdownStyleConfig;
+export declare const serializeMarkdownStyle: (value: string | MarkdownStyleConfig | null | undefined) => string | null;
+export declare class XMarkdownAttributes {
+    #private;
+    static observedAttributes: string[];
+    constructor(dom: XMarkdown);
+    connectedCallback(): void;
+    dispose(): void;
+    _handleContent(newVal: string | null): void;
+    _handleMarkdownEffect(newVal: string | null): void;
+    _handleMarkdownStyle(newVal: string | null): void;
+    _handleContentId(newVal: string | null): void;
+    _handleTextSelection(newVal: string | null): void;
+    _handleAnimationType(newVal: string | null): void;
+    _handleAnimationVelocity(newVal: string | null): void;
+    _handleAnimationPaused(newVal: string | null): void;
+    _handleInitialAnimationStep(newVal: string | null): void;
+    _handleContentComplete(newVal: string | null): void;
+    _handleTypewriterDynamicHeight(newVal: string | null): void;
+    _handleTypewriterHeightTransition(newVal: string | null): void;
+    _handleTextMaxline(newVal: string | null): void;
+    _handleContentRange(newVal: string | null): void;
+}