Skip to content

feat: add x-markdown component for rendering markdown content with st… #2190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PupilTong wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat: add x-markdown component for rendering markdown content with st… #2190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c3a7764
feat: add x-markdown component for rendering markdown content with st…
PupilTong Feb 3, 2026
dddccc3
feat(x-markdown): implement incremental content rendering and update …
PupilTong Feb 3, 2026
74d4e49
feat(x-markdown): add DOMPurify for HTML sanitization and update depe…
PupilTong Feb 3, 2026
924aca0
+ fix build
PupilTong Feb 4, 2026
8b0165b
refactor(x-markdown): simplify html sanitizer initialization by remov…
PupilTong Feb 5, 2026
d9fb103
+ fix
PupilTong Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions .changeset/nasty-lizards-refuse.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
"@lynx-js/web-elements": patch
---

feat: add x-markdown support

The x-markdonw is under opt-in importing pattern.
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Fix typo: “x-markdonw” → “x-markdown”.

Minor spelling issue in the changeset description.

✍️ Proposed fix 
-The x-markdonw is under opt-in importing pattern.
+The x-markdown is under opt-in importing pattern.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
The x-markdonw is under opt-in importing pattern.
The x-markdown is under opt-in importing pattern.
🧰 Tools
🪛 LanguageTool

[grammar] ~7-~7: Ensure spelling is correct
Context: ...-- feat: add x-markdown support The x-markdonw is under opt-in importing pattern. ```...

(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)

🤖 Prompt for AI Agents 
In @.changeset/nasty-lizards-refuse.md at line 7, Fix the typo in the changeset
text by replacing the string "x-markdonw" with "x-markdown" in the
.changeset/nasty-lizards-refuse.md file (search for the exact token "x-markdonw"
and update it to "x-markdown" so the description reads correctly).


```javascript
import '@lynx-js/web-elements/XMarkdown';
```
5 changes: 4 additions & 1 deletion .github/lynx-stack.instructions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@
applyTo: "packages/web-platform/web-elements/**/*"
---

When updating web element APIs, add targeted Playwright tests in packages/web-platform/web-elements/tests/web-elements.spec.ts and keep changes minimal.
When updating web element APIs, add targeted Playwright tests in a dedicated spec file under packages/web-platform/web-elements/tests and keep changes minimal.
Ensure Playwright browsers are installed (pnpm exec playwright install --with-deps <browser>) before running web-elements tests.

For x-input type="number" in web-elements, keep inner input type as text, set inputmode="decimal", and filter number input internally without setting input-filter explicitly.
Add new web-elements UI fixtures under packages/web-platform/web-elements/tests/fixtures and commit matching snapshots in packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots.

For x-markdown updates, keep markdown-style injected via a shadow-root style tag and render markdown only on attribute changes.
1 change: 1 addition & 0 deletions packages/web-platform/web-elements/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Mar 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Fix CSS import notation to satisfy stylelint.

Line 16 uses url(...) import notation, but the configured rule expects direct string notation.

🔧 Proposed fix 
-@import url("./src/elements/XMarkdown/x-markdown.css");
+@import "./src/elements/XMarkdown/x-markdown.css";
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
@import url("./src/elements/XMarkdown/x-markdown.css");
`@import` "./src/elements/XMarkdown/x-markdown.css";
🧰 Tools
🪛 Stylelint (17.3.0)

[error] 16-16: Expected "url("./src/elements/XMarkdown/x-markdown.css")" to be ""./src/elements/XMarkdown/x-markdown.css"" (import-notation)

(import-notation)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/web-platform/web-elements/index.css` at line 16, The CSS import uses
url(...) notation which violates the stylelint rule; replace the `@import`
url("./src/elements/XMarkdown/x-markdown.css"); statement with the direct string
form `@import` "./src/elements/XMarkdown/x-markdown.css"; so the import uses a
plain string instead of url(...) (look for the `@import` line referencing
x-markdown.css to update).

@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");
Expand Down
10 changes: 10 additions & 0 deletions packages/web-platform/web-elements/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,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"
},
Comment thread
PupilTong marked this conversation as resolved.
"./XOverlayNg": {
"@lynx-js/source-field": "./src/elements/XOverlayNg/index.ts",
"types": "./dist/elements/XOverlayNg/index.d.ts",
Expand Down Expand Up @@ -134,11 +139,16 @@
"test:install": "playwright install --with-deps chromium firefox webkit",
"test:update": "playwright test --ui --update-snapshots"
},
"dependencies": {
"dompurify": "^3.3.1",
"markdown-it": "^14.1.0"
},
"devDependencies": {
"@lynx-js/playwright-fixtures": "workspace:*",
"@playwright/test": "^1.58.2",
"@rsbuild/core": "catalog:rsbuild",
"@rsbuild/plugin-source-build": "1.0.4",
"@types/markdown-it": "^14.1.1",
"nyc": "^17.1.0",
"tslib": "^2.8.1"
},
Expand Down
16 changes: 16 additions & 0 deletions packages/web-platform/web-elements/src/elements/XMarkdown/XMarkdown.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/*
// 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 { XMarkdownAttributes } from './XMarkdownAttributes.js';

@Component<typeof XMarkdown>(
'x-markdown',
[CommonEventsAndMethods, XMarkdownAttributes],
templateXMarkdown,
)
export class XMarkdown extends HTMLElement {}
Loading
Loading