@lynx-js/web-elements 0.12.0 → 0.12.1

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

@@ -0,0 +1,2 @@
+export declare const MarkdownIt: any;
+export declare const createDOMPurify: any;

package/dist/elements/XMarkdown/XMarkdownDeps.js

@@ -0,0 +1,11 @@
+/*
+// 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.
+*/
+// Keep runtime interop consistent with dynamic import usage in XMarkdownAttributes.
+import * as mdModule from 'markdown-it';
+import * as dpModule from 'dompurify';
+export const MarkdownIt = (mdModule.default ?? mdModule);
+export const createDOMPurify = (dpModule.default ?? dpModule);
+//# sourceMappingURL=XMarkdownDeps.js.map

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

@@ -0,0 +1,7 @@
+/**
+ * @module elements/XMarkdown
+ *
+ * `x-markdown` renders markdown content with minimal styling.
+ * It supports the `content` and `markdown-style` attributes.
+ */
+export { XMarkdown } from './XMarkdown.js';

package/dist/elements/XMarkdown/index.js

@@ -0,0 +1,11 @@
+// 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.
+/**
+ * @module elements/XMarkdown
+ *
+ * `x-markdown` renders markdown content with minimal styling.
+ * It supports the `content` and `markdown-style` attributes.
+ */
+export { XMarkdown } from './XMarkdown.js';
+//# sourceMappingURL=index.js.map

package/dist/elements/all.d.ts

@@ -16,3 +16,4 @@ import './XViewpagerNg/index.js';
 import './XList/index.js';
 import './XList/ListItem.js';
 import './XWebView/index.js';
+import './XMarkdown/index.js';

package/dist/elements/all.js

@@ -16,4 +16,5 @@ import './XViewpagerNg/index.js';
 import './XList/index.js';
 import './XList/ListItem.js';
 import './XWebView/index.js';
+import './XMarkdown/index.js';
 //# sourceMappingURL=all.js.map

package/dist/elements/htmlTemplates.d.ts

@@ -7,11 +7,12 @@ export declare const templateFilterImage: (attributes: {
     src?: string;
 }) => string;
 export declare const templateXInput = "<style>\n  #input:focus {\n    outline: none;\n  }\n  #form {\n    display: none;\n  }\n</style>\n<form id=\"form\" part=\"form\" method=\"dialog\">\n  <input\n    id=\"input\"\n    part=\"input\"\n    step=\"any\"\n    type=\"text\"\n    inputmode=\"text\"\n    spell-check=\"true\"\n  />\n</form>";
-export declare const templateXList = "<style>\n  .placeholder-dom {\n    display: none;\n    flex: 0 0 0;\n    align-self: stretch;\n    min-height: 0;\n    min-width: 0;\n  }\n  .observer-container {\n    flex-direction: inherit;\n    overflow: visible;\n  }\n  .observer {\n    display: flex;\n  }\n</style>\n<div id=\"content\" part=\"content\">\n  <div\n    class=\"observer-container placeholder-dom\"\n    part=\"upper-threshold-observer\"\n  >\n    <div\n      class=\"observer placeholder-dom\"\n      id=\"upper-threshold-observer\"\n    ></div>\n  </div>\n  <slot part=\"slot\"></slot>\n  <div\n    class=\"observer-container placeholder-dom\"\n    part=\"lower-threshold-observer\"\n  >\n    <div\n      class=\"observer placeholder-dom\"\n      id=\"lower-threshold-observer\"\n    ></div>\n  </div>\n</div>";
+export declare const templateXList = "<style>\n  .placeholder-dom {\n    display: none;\n    flex: 0 0 0;\n    align-self: stretch;\n    min-height: 0;\n    min-width: 0;\n  }\n  .observer-container {\n    flex-direction: inherit;\n    overflow: visible;\n  }\n  .observer {\n    display: flex;\n  }\n</style>\n<div id=\"content\" part=\"content\">\n  <div\n    class=\"observer-container placeholder-dom\"\n    part=\"upper-threshold-observer\"\n  >\n    <div\n      class=\"observer placeholder-dom\"\n      id=\"upper-threshold-observer\"\n      part=\"upper-threshold-sentinel\"\n    ></div>\n  </div>\n  <slot part=\"slot\"></slot>\n  <div\n    class=\"observer-container placeholder-dom\"\n    part=\"lower-threshold-observer\"\n  >\n    <div\n      class=\"observer placeholder-dom\"\n      id=\"lower-threshold-observer\"\n      part=\"lower-threshold-sentinel\"\n    ></div>\n  </div>\n</div>";
 export declare const templateXOverlayNg = "<style>\n  #dialog[open] {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    position: fixed;\n    overscroll-behavior: contain;\n    scrollbar-width: none;\n  }\n  #dialog[open]::-webkit-scrollbar {\n    display: none;\n  }\n  #dialog::backdrop {\n    background-color: transparent;\n  }\n  .overlay-inner {\n    position: sticky;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n  }\n  .overlay-inner > * {\n    pointer-events: auto;\n  }\n  .overlay-placeholder {\n    width: 100%;\n    height: 1px;\n  }\n</style>\n<dialog id=\"dialog\" part=\"dialog\">\n  <div class=\"overlay-inner\">\n    <slot></slot>\n  </div>\n  <div class=\"overlay-placeholder\"></div>\n</dialog>";
 export declare const templateXRefreshView = "<style>\n  .bounce-container {\n    overflow: scroll;\n    overscroll-behavior: contain;\n    scroll-snap-type: y mandatory;\n    scroll-behavior: smooth;\n    scrollbar-width: none;\n  }\n  .overflow-placeholder {\n    min-height: 30%;\n    min-width: 100%;\n    flex-shrink: 0;\n    scroll-snap-align: none;\n  }\n  .not-shrink {\n    height: 100%;\n    width: 100%;\n    min-height: 100%;\n    min-width: 100%;\n    flex-shrink: 0;\n  }\n  .vertical {\n    display: flex;\n    flex-direction: column;\n  }\n  #content {\n    scroll-snap-align: center;\n  }\n</style>\n<div id=\"container\" part=\"container\" class=\"bounce-container not-shrink vertical\">\n  <div\n    id=\"placeholder-top\"\n    class=\"overflow-placeholder bounce-item\"\n    part=\"placeholder-top\"\n  ></div>\n  <slot name=\"header\"></slot>\n  <div id=\"content\" part=\"content\" class=\"not-shrink vertical\">\n    <slot part=\"slot\"></slot>\n  </div>\n  <slot name=\"footer\"></slot>\n  <div\n    id=\"placeholder-bot\"\n    class=\"overflow-placeholder bounce-item\"\n    part=\"placeholder-bot\"\n  ></div>\n</div>";
 export declare const templateXSwiper = "<style>\n  #bounce-padding {\n    display: none;\n    flex: 0 0 0;\n    align-self: stretch;\n    scroll-snap-align: none;\n    flex-basis: 100%;\n  }\n  #content {\n    position: relative;\n    display: flex;\n    flex: 0 0 100%;\n    flex-direction: inherit;\n    flex-wrap: inherit;\n    align-self: stretch;\n    justify-content: inherit;\n    align-items: inherit;\n    overflow: inherit;\n    scrollbar-width: none;\n    scroll-snap-align: start;\n    scroll-snap-type: inherit;\n  }\n  div::-webkit-scrollbar {\n    display: none;\n  }\n  #indicator-container {\n    display: none;\n  }\n  #indicator-container > div {\n    animation-name: indicator-dot;\n    animation-duration: 100ms;\n  }\n  @keyframes indicator-dot {\n    30%,\n    70% {\n      background-color: var(--indicator-color);\n    }\n    31%,\n    69% {\n      background-color: var(--indicator-active-color);\n    }\n  }\n</style>\n<style id=\"indicator-style\"></style>\n<div id=\"bounce-padding\" part=\"bounce-padding\"></div>\n<div id=\"indicator-container\" part=\"indicator-container\"></div>\n<div id=\"content\" part=\"content\">\n  <slot part=\"slot-start\" name=\"circular-start\" id=\"circular-start\"></slot>\n  <slot part=\"slot\"></slot>\n  <slot part=\"slot-end\" name=\"circular-end\" id=\"circular-end\"></slot>\n</div>";
 export declare const templateXText = "<div id=\"inner-box\" part=\"inner-box\"><slot part=\"slot\"></slot><slot name=\"inline-truncation\"></slot></div>";
+export declare const templateXMarkdown = "<style>\n  :host {\n    display: block;\n  }\n  .markdown-body {\n    display: block;\n    line-height: 1.4;\n    color: inherit;\n    word-break: break-word;\n    position: relative;\n  }\n  .markdown-body p {\n    margin: 0 0 0.75em 0;\n  }\n  .markdown-body h1,\n  .markdown-body h2,\n  .markdown-body h3,\n  .markdown-body h4,\n  .markdown-body h5,\n  .markdown-body h6 {\n    margin: 0.8em 0 0.4em 0;\n  }\n  .markdown-body ul,\n  .markdown-body ol {\n    margin: 0 0 0.75em 1.5em;\n  }\n  .markdown-body pre {\n    margin: 0 0 0.75em 0;\n    padding: 8px 12px;\n    border-radius: 6px;\n    background: #f6f8fa;\n    overflow: auto;\n  }\n  .markdown-body code {\n    font-family: ui-monospace, SFMono-Regular, SFMono, Menlo, Consolas,\n      \"Liberation Mono\", monospace;\n  }\n  .markdown-body pre code {\n    display: block;\n    padding: 0;\n  }\n  .markdown-body img {\n    max-width: 100%;\n    height: auto;\n    display: block;\n  }\n  .markdown-body .md-inline-view {\n    display: inline-block;\n    vertical-align: baseline;\n  }\n  .markdown-body .md-truncation {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    background-color: inherit;\n  }\n  .markdown-body .md-image-figure {\n    margin: 0 0 0.75em 0;\n  }\n  .markdown-body .md-image-caption {\n    margin-top: 4px;\n    color: #666;\n    font-size: 0.875em;\n  }\n  .markdown-body .md-text-mask-effect {\n    position: relative;\n    display: inline-block;\n  }\n  .markdown-body .md-text-mask-effect-overlay {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    user-select: none;\n    white-space: pre;\n    color: transparent;\n    -webkit-background-clip: text;\n    background-clip: text;\n  }\n  .markdown-body a {\n    color: #0366d6;\n    text-decoration: underline;\n  }\n</style>\n<style id=\"markdown-style\"></style>\n<div id=\"markdown-root\" part=\"root\" class=\"markdown-body\"></div>";
 export declare const templateInlineImage: (attributes: {
     src?: string;
 }) => string;

package/dist/elements/htmlTemplates.js

@@ -142,6 +142,7 @@ export const templateXList = `<style>
     <div
       class="observer placeholder-dom"
       id="upper-threshold-observer"
+      part="upper-threshold-sentinel"
     ></div>
   </div>
   <slot part="slot"></slot>
@@ -152,6 +153,7 @@ export const templateXList = `<style>
     <div
       class="observer placeholder-dom"
       id="lower-threshold-observer"
+      part="lower-threshold-sentinel"
     ></div>
   </div>
 </div>`;
@@ -294,6 +296,91 @@ export const templateXSwiper = `<style>
   <slot part="slot-end" name="circular-end" id="circular-end"></slot>
 </div>`;
 export const templateXText = `<div id="inner-box" part="inner-box"><slot part="slot"></slot><slot name="inline-truncation"></slot></div>`;
+export const templateXMarkdown = `<style>
+  :host {
+    display: block;
+  }
+  .markdown-body {
+    display: block;
+    line-height: 1.4;
+    color: inherit;
+    word-break: break-word;
+    position: relative;
+  }
+  .markdown-body p {
+    margin: 0 0 0.75em 0;
+  }
+  .markdown-body h1,
+  .markdown-body h2,
+  .markdown-body h3,
+  .markdown-body h4,
+  .markdown-body h5,
+  .markdown-body h6 {
+    margin: 0.8em 0 0.4em 0;
+  }
+  .markdown-body ul,
+  .markdown-body ol {
+    margin: 0 0 0.75em 1.5em;
+  }
+  .markdown-body pre {
+    margin: 0 0 0.75em 0;
+    padding: 8px 12px;
+    border-radius: 6px;
+    background: #f6f8fa;
+    overflow: auto;
+  }
+  .markdown-body code {
+    font-family: ui-monospace, SFMono-Regular, SFMono, Menlo, Consolas,
+      "Liberation Mono", monospace;
+  }
+  .markdown-body pre code {
+    display: block;
+    padding: 0;
+  }
+  .markdown-body img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+  .markdown-body .md-inline-view {
+    display: inline-block;
+    vertical-align: baseline;
+  }
+  .markdown-body .md-truncation {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    background-color: inherit;
+  }
+  .markdown-body .md-image-figure {
+    margin: 0 0 0.75em 0;
+  }
+  .markdown-body .md-image-caption {
+    margin-top: 4px;
+    color: #666;
+    font-size: 0.875em;
+  }
+  .markdown-body .md-text-mask-effect {
+    position: relative;
+    display: inline-block;
+  }
+  .markdown-body .md-text-mask-effect-overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    user-select: none;
+    white-space: pre;
+    color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+  .markdown-body a {
+    color: #0366d6;
+    text-decoration: underline;
+  }
+</style>
+<style id="markdown-style"></style>
+<div id="markdown-root" part="root" class="markdown-body"></div>`;
 export const templateInlineImage = templateXImage;
 export const templateXTextarea = `<style>
   #textarea:focus,

package/index.css

@@ -13,6 +13,7 @@
 @import url("./src/elements/XSvg/x-svg.css");
 @import url("./src/elements/XImage/x-image.css");
 @import url("./src/elements/XInput/x-input.css");
+@import url("./src/elements/XMarkdown/x-markdown.css");
 @import url("./src/elements/XOverlayNg/x-overlay-ng.css");
 @import url("./src/elements/XRefreshView/x-refresh-view.css");
 @import url("./src/elements/XSwiper/x-swiper.css");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "private": false,
   "repository": {
     "type": "git",
@@ -12,6 +12,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "@lynx-js/source-field": "./src/elements/index.ts",
       "types": "./dist/elements/index.d.ts",
       "default": "./dist/elements/index.js"
     },
@@ -58,6 +59,11 @@
       "types": "./dist/elements/XInput/index.d.ts",
       "default": "./dist/elements/XInput/index.js"
     },
+    "./XMarkdown": {
+      "@lynx-js/source-field": "./src/elements/XMarkdown/index.ts",
+      "types": "./dist/elements/XMarkdown/index.d.ts",
+      "default": "./dist/elements/XMarkdown/index.js"
+    },
     "./XOverlayNg": {
       "@lynx-js/source-field": "./src/elements/XOverlayNg/index.ts",
       "types": "./dist/elements/XOverlayNg/index.d.ts",
@@ -112,7 +118,8 @@
       "@lynx-js/source-field": "./src/elements/htmlTemplates.ts",
       "types": "./dist/elements/htmlTemplates.d.ts",
       "default": "./dist/elements/htmlTemplates.js"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -126,10 +133,15 @@
     "index.css",
     "**/*.css"
   ],
+  "dependencies": {
+    "dompurify": "^3.3.1",
+    "markdown-it": "^14.1.0"
+  },
   "devDependencies": {
     "@playwright/test": "^1.58.2",
-    "@rsbuild/core": "1.7.3",
+    "@rsbuild/core": "1.7.5",
     "@rsbuild/plugin-source-build": "1.0.4",
+    "@types/markdown-it": "^14.1.1",
     "nyc": "^17.1.0",
     "tslib": "^2.8.1",
     "@lynx-js/playwright-fixtures": "0.0.0"

package/src/elements/XList/x-list.css

@@ -157,6 +157,37 @@ x-list[x-enable-scrolltoloweredge-event]::part(lower-threshold-observer) {
   display: flex;
 }
 
+x-list[x-enable-scrolltoupper-event]::part(upper-threshold-sentinel),
+x-list[x-enable-scrolltoupperedge-event]::part(upper-threshold-sentinel),
+x-list[x-enable-scrolltolower-event]::part(lower-threshold-sentinel),
+x-list[x-enable-scrolltoloweredge-event]::part(lower-threshold-sentinel) {
+  flex: 0 0 1px;
+}
+
+x-list[x-enable-scrolltoupper-event]::part(upper-threshold-sentinel),
+x-list[x-enable-scrolltoupperedge-event]::part(upper-threshold-sentinel) {
+  margin-bottom: -1px;
+}
+
+x-list[x-enable-scrolltolower-event]::part(lower-threshold-sentinel),
+x-list[x-enable-scrolltoloweredge-event]::part(lower-threshold-sentinel) {
+  margin-top: -1px;
+  transform: translateY(1px);
+}
+
+x-list[scroll-orientation="horizontal"][x-enable-scrolltoupper-event]::part(upper-threshold-sentinel),
+x-list[scroll-orientation="horizontal"][x-enable-scrolltoupperedge-event]::part(upper-threshold-sentinel) {
+  margin-bottom: 0;
+  margin-right: -1px;
+}
+
+x-list[scroll-orientation="horizontal"][x-enable-scrolltolower-event]::part(lower-threshold-sentinel),
+x-list[scroll-orientation="horizontal"][x-enable-scrolltoloweredge-event]::part(lower-threshold-sentinel) {
+  margin-top: 0;
+  margin-left: -1px;
+  transform: translateX(1px);
+}
+
 x-list::part(lower-threshold-observer) {
   flex-direction: column-reverse;
 }

package/src/elements/XMarkdown/x-markdown.css

@@ -0,0 +1,15 @@
+/*
+// 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.
+*/
+x-markdown {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  color: inherit;
+}
+
+x-markdown::part(root) {
+  width: 100%;
+}