Skip to content

chore(ui): replace showdown markdown renderer#936

Merged
alexhb1 merged 1 commit into
grimmory-tools:developfrom
alexhb1:chore/markdown-it-changelog
Apr 27, 2026
Merged

chore(ui): replace showdown markdown renderer#936
alexhb1 merged 1 commit into
grimmory-tools:developfrom
alexhb1:chore/markdown-it-changelog

Conversation

@alexhb1

@alexhb1 alexhb1 commented Apr 27, 2026

Copy link
Copy Markdown
Member

Description

Linked Issue: Fixes #914

Screenshot below, I did a temp tweak to show all changelogs. Actual behaviour is unchanged.
Screenshot 2026-04-27 at 09 00 35

Changes

  • Switch changelog from showdown to markdown-it, and removed showdown from dependencies
  • Showdown CVE is now gone from npm audit

Summary by CodeRabbit

  • Chores
    • Updated markdown rendering implementation across the application, including refreshed build configuration and dependencies.

@coderabbitai

coderabbitai Bot commented Apr 27, 2026

Copy link
Copy Markdown
Contributor
📝 Walkthrough

Walkthrough

The PR migrates the frontend's markdown rendering library from showdown to markdown-it. Changes include updating package dependencies and their type definitions, removing showdown from the Angular CommonJS allowlist, and updating the version-changelog-dialog component to use markdown-it's rendering API.

Changes

Cohort / File(s) Summary
Build & Dependency Configuration
frontend/angular.json, frontend/package.json
Removed showdown from CommonJS allowlist and replaced showdown (^2.1.0) with markdown-it (^14.1.1); updated type definitions from @types/showdown to @types/markdown-it.
Markdown Rendering Component
frontend/src/app/shared/layout/layout-menu/version-changelog-dialog/version-changelog-dialog.component.ts
Swapped markdown engine from showdown.Converter to MarkdownIt instance; replaced converter.makeHtml() with markdown.render() while preserving existing post-processing and DOMPurify sanitization.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

frontend, chore

Poem

🐰 A markdown migration, so neat and so keen,
From showdown we hop to markdown-it's sheen,
No more vulnerabilities, just fresh code to see,
The changelog renders with security—hooray for thee! 🌿

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed PR title follows conventional commit format with 'chore(ui): replace showdown markdown renderer', clearly describing the main change.
Description check ✅ Passed PR description includes all required template sections with linked issue, clear explanation of changes, and context about vulnerability resolution.
Linked Issues check ✅ Passed Code changes successfully address issue #914 by replacing the unmaintained showdown library with markdown-it, eliminating the CVE vulnerability.
Out of Scope Changes check ✅ Passed All changes are directly related to the objective of replacing showdown with markdown-it; no extraneous modifications detected.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
✨ Simplify code
  • Create PR with simplified code

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
frontend/src/app/shared/layout/layout-menu/version-changelog-dialog/version-changelog-dialog.component.ts (1)

30-30: Migration looks correct; sanitization preserved.

new MarkdownIt({ html: true }) paired with DOMPurify.sanitize keeps the same trust model as the previous showdown setup (raw HTML allowed in source, then sanitized). The h2→h3 post-processing is retained.

One thing worth a quick smoke test: showdown and markdown-it differ on a few defaults that can matter for changelog content:

  • linkify is off by default in markdown-it, so bare URLs won’t auto-link (showdown’s simplifiedAutoLink was also off by default, so likely no regression — but worth eyeballing the rendered changelog).
  • markdown-it uses CommonMark line-break semantics (a soft break renders as a space, not <br>). Showdown sometimes inserted <br> for single line breaks. If release notes were authored relying on that, paragraphs may flow differently.

If either becomes an issue, you can opt-in with:

Suggested options if rendering regresses
-  private markdown = new MarkdownIt({ html: true });
+  private markdown = new MarkdownIt({ html: true, linkify: true, breaks: true });

Also applies to: 44-47

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

In
`@frontend/src/app/shared/layout/layout-menu/version-changelog-dialog/version-changelog-dialog.component.ts`
at line 30, The MarkdownIt instance (private markdown = new MarkdownIt({ html:
true })) may change rendering compared to showdown (notably link auto-linking
and line-break handling); update the MarkdownIt options to explicitly opt into
the behavior you need (e.g., enable linkify and/or breaks via its config) if the
changelog rendering regresses, and run a smoke test of the
version-changelog-dialog rendering (also update the other MarkdownIt
initializations found in the same file where the h2→h3 post-processing is
applied) to confirm output matches expectations.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@frontend/src/app/shared/layout/layout-menu/version-changelog-dialog/version-changelog-dialog.component.ts`:
- Line 30: The MarkdownIt instance (private markdown = new MarkdownIt({ html:
true })) may change rendering compared to showdown (notably link auto-linking
and line-break handling); update the MarkdownIt options to explicitly opt into
the behavior you need (e.g., enable linkify and/or breaks via its config) if the
changelog rendering regresses, and run a smoke test of the
version-changelog-dialog rendering (also update the other MarkdownIt
initializations found in the same file where the h2→h3 post-processing is
applied) to confirm output matches expectations.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 41d507b2-d818-4e4f-a2bd-9a2a7ba89abc

📥 Commits

Reviewing files that changed from the base of the PR and between 95cd73d and 9ec2e81.

⛔ Files ignored due to path filters (1)
  • frontend/yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (3)
  • frontend/angular.json
  • frontend/package.json
  • frontend/src/app/shared/layout/layout-menu/version-changelog-dialog/version-changelog-dialog.component.ts
💤 Files with no reviewable changes (1)
  • frontend/angular.json
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
  • GitHub Check: Test Suite / Backend Tests
  • GitHub Check: Test Suite / Frontend Tests
  • GitHub Check: Analyze (java-kotlin)
  • GitHub Check: Analyze (javascript-typescript)
  • GitHub Check: Frontend Lint Threshold Check
🧰 Additional context used
📓 Path-based instructions (4)
frontend/src/**/*.{ts,tsx,html,scss}

📄 CodeRabbit inference engine (AGENTS.md)

Use 2-space indentation in TypeScript, HTML, and SCSS in frontend code

Files:

  • frontend/src/app/shared/layout/layout-menu/version-changelog-dialog/version-changelog-dialog.component.ts
frontend/src/**/*.component.ts

📄 CodeRabbit inference engine (AGENTS.md)

Keep Angular code on standalone components. Do not add NgModules in frontend code

Files:

  • frontend/src/app/shared/layout/layout-menu/version-changelog-dialog/version-changelog-dialog.component.ts
frontend/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Prefer inject() over constructor injection in frontend code

Files:

  • frontend/src/app/shared/layout/layout-menu/version-changelog-dialog/version-changelog-dialog.component.ts
frontend/src/**/*.{ts,tsx,html}

📄 CodeRabbit inference engine (AGENTS.md)

frontend/src/**/*.{ts,tsx,html}: Follow frontend/eslint.config.js: component selectors use app-, directive selectors use app, and any is disallowed in frontend code
Put user-facing strings in Transloco files under frontend/src/i18n/

Files:

  • frontend/src/app/shared/layout/layout-menu/version-changelog-dialog/version-changelog-dialog.component.ts
🧠 Learnings (4)
📚 Learning: 2026-04-22T01:56:39.495Z
Learnt from: CR
Repo: grimmory-tools/grimmory PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-04-22T01:56:39.495Z
Learning: Applies to frontend/src/**/*.{test,spec}.{ts,tsx} : Use Vitest for tests in frontend code

Applied to files:

  • frontend/package.json
📚 Learning: 2026-04-05T21:16:01.715Z
Learnt from: balazs-szucs
Repo: grimmory-tools/grimmory PR: 385
File: frontend/src/app/app.component.ts:55-56
Timestamp: 2026-04-05T21:16:01.715Z
Learning: When reviewing code in the Grimmory frontend (Angular), prefer modern Angular patterns. Specifically: (1) Prefer `DestroyRef` with `takeUntilDestroyed(destroyRef)` for teardown in Angular v16+ instead of manually tracking `Subscription` arrays and calling `unsubscribe()` in `ngOnDestroy()`. (2) Prefer `inject()` for dependency injection over constructor injection where appropriate. (3) Prefer Angular signals (e.g., `signal`, `computed`) over `BehaviorSubject`/`Observable` for state where signals/computed values fit the use case. Flag older patterns when they can be replaced with these modern equivalents without changing behavior.

Applied to files:

  • frontend/src/app/shared/layout/layout-menu/version-changelog-dialog/version-changelog-dialog.component.ts
📚 Learning: 2026-04-07T09:28:09.587Z
Learnt from: balazs-szucs
Repo: grimmory-tools/grimmory PR: 393
File: frontend/src/app/features/readers/pdf-reader/pdf-reader.component.ts:255-263
Timestamp: 2026-04-07T09:28:09.587Z
Learning: In this Angular frontend (under frontend/src/app/), flag manual resource management/cleanup patterns when there is an Angular v16+ automatic alternative. Examples to prefer: (1) Instead of manually pairing document/window event listeners with stored cleanup functions (e.g., add/removeEventListener with mouseMoveCleanup/documentClickCleanup/keydownCleanup/touchCleanup fields), register teardown via DestroyRef.onDestroy(cleanupFn) (or equivalent Angular v16+ teardown mechanism). (2) Instead of storing Subscriptions in fields and explicitly unsubscribing in ngOnDestroy (e.g., annotationSaveSubscription/annotationCacheSubscription), use takeUntilDestroyed(destroyRef) (piped into the observable) or other Angular v16+ primitives. (3) If teardown is lifecycle-coupled and can be automated via DestroyRef/takeUntilDestroyed/signals (or other Angular v16+ mechanisms), prefer the automated approach over manual ngOnDestroy cleanup. Raise a review finding for the manual pattern and recommend the aut...

Applied to files:

  • frontend/src/app/shared/layout/layout-menu/version-changelog-dialog/version-changelog-dialog.component.ts
📚 Learning: 2026-04-11T03:55:57.229Z
Learnt from: zachyale
Repo: grimmory-tools/grimmory PR: 439
File: frontend/src/app/features/series-browser/components/series-browser/series-browser.component.ts:178-196
Timestamp: 2026-04-11T03:55:57.229Z
Learning: In this Angular frontend (frontend/src/app/), prefer the team’s reactive i18n “signal/computed” pattern: (1) For individual reactive translated strings, use `translateSignal()` from `jsverse/transloco`. (2) For option/label arrays that must update on language switch, create a single `activeLang` signal with `toSignal(t.langChanges$, { initialValue: t.getActiveLang() })`, then derive the arrays as `computed()` signals that read `activeLang()`. This should avoid manual `langChanges$` subscriptions and any `ngOnDestroy` subscription cleanup; prefer this over subscribing in `ngOnInit` when implementing reactive localization.

Applied to files:

  • frontend/src/app/shared/layout/layout-menu/version-changelog-dialog/version-changelog-dialog.component.ts
🔇 Additional comments (1)
frontend/package.json (1)

48-48: Dependency swap looks clean.

markdown-it ^14.1.1 and @types/markdown-it ^14.1.2 added in correct sections; showdown and its types removed. This addresses the GHSA-rmmh-p597-ppvv vulnerability called out in #914.

Also applies to: 73-73

@alexhb1 alexhb1 merged commit 75568d3 into grimmory-tools:develop Apr 27, 2026
16 checks passed
paulbovbel pushed a commit to paulbovbel/grimmory that referenced this pull request Apr 27, 2026
dsmouse pushed a commit to dsmouse/grimmory that referenced this pull request May 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Switch to alternative of showdown

2 participants