From ebf98e2ddf9bb6340bdc80c7057d5ff358a16d08 Mon Sep 17 00:00:00 2001
From: heartacker <heartacker@outlook.com>
Date: Wed, 9 Sep 2026 23:46:39 +0800
Subject: [PATCH 1/2] feat(markdown): support kbd tag rendering

---
 .../components/Markdown/ShadowView.tsx        | 16 ++++++++++++++++
 .../renderer/components/Markdown/index.tsx    |  4 ++--
 .../Markdown/markdownComponents.tsx           |  8 ++++++++
 .../desktop/src/renderer/styles/markdown.css  | 18 ++++++++++++++++++
 .../markdownPreviewPipeline.dom.test.tsx      | 19 +++++++++++++++++++
 5 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/packages/desktop/src/renderer/components/Markdown/ShadowView.tsx b/packages/desktop/src/renderer/components/Markdown/ShadowView.tsx
index dd01015c8a..fdb3de6694 100644
--- a/packages/desktop/src/renderer/components/Markdown/ShadowView.tsx
+++ b/packages/desktop/src/renderer/components/Markdown/ShadowView.tsx
@@ -189,6 +189,22 @@ export const createInitStyle = (
     font-family: var(--font-mono);
     font-weight: var(--font-mono-weight);
   }
+  .markdown-shadow-body kbd {
+    display: inline-block;
+    padding: 2px 6px;
+    font-size: 0.8em;
+    line-height: 1.2;
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
+    font-weight: 500;
+    color: var(--text-primary);
+    background-color: var(--bg-2);
+    border: 1px solid var(--bg-3);
+    border-bottom-width: 2px;
+    border-radius: 5px;
+    box-shadow: inset 0 -1px 0 var(--bg-3);
+    vertical-align: middle;
+    white-space: nowrap;
+  }
   blockquote {
     border-left: 3px solid var(--bg-3);
     padding-left: 12px;
diff --git a/packages/desktop/src/renderer/components/Markdown/index.tsx b/packages/desktop/src/renderer/components/Markdown/index.tsx
index a8394994e2..5484493f30 100644
--- a/packages/desktop/src/renderer/components/Markdown/index.tsx
+++ b/packages/desktop/src/renderer/components/Markdown/index.tsx
@@ -23,7 +23,7 @@ import LocalImageView from '@renderer/components/media/LocalImageView';
 import CodeBlock from './CodeBlock';
 import LocalFileLink from './LocalFileLink';
 import ShadowView from './ShadowView';
-import { MARKDOWN_REMARK_PLUGINS, MarkdownTable, MarkdownTd } from './markdownComponents';
+import { DEFAULT_REHYPE_PLUGINS, MARKDOWN_REMARK_PLUGINS, MarkdownTable, MarkdownTd } from './markdownComponents';
 import { resolveLocalFileLinkPath, resolveLocalFileLinkReference } from './markdownUtils';
 import type { LocalFileLinkReference } from './markdownUtils';
 
@@ -125,7 +125,7 @@ const MarkdownView: React.FC<MarkdownViewProps> = React.memo(
       [codeStyle, hiddenCodeCopyButton, handleLinkClick, onLocalFileLink]
     );
 
-    const rehypePlugins = useMemo(() => (allowHtml ? [rehypeRaw, rehypeKatex] : [rehypeKatex]), [allowHtml]);
+    const rehypePlugins = useMemo(() => (allowHtml ? [rehypeRaw, rehypeKatex] : DEFAULT_REHYPE_PLUGINS), [allowHtml]);
 
     return (
       <div className={classNames('relative w-full', className)}>
diff --git a/packages/desktop/src/renderer/components/Markdown/markdownComponents.tsx b/packages/desktop/src/renderer/components/Markdown/markdownComponents.tsx
index 3eadd2618c..ad4acea14d 100644
--- a/packages/desktop/src/renderer/components/Markdown/markdownComponents.tsx
+++ b/packages/desktop/src/renderer/components/Markdown/markdownComponents.tsx
@@ -36,6 +36,14 @@ export const MARKDOWN_REMARK_PLUGINS = [remarkGfm, remarkMath, remarkBreaks];
  */
 export const SANITIZED_HTML_REHYPE_PLUGINS = [rehypeRaw, rehypeSanitize, rehypeKatex];
 
+/**
+ * Default rehype pipeline for chat and standard markdown surfaces.
+ * Uses rehype-raw with sanitized HTML tags (rehypeSanitize) followed by KaTeX.
+ * This allows benign tags like `<kbd>` while stripping dangerous
+ * markup (`<script>`, `<iframe>`, inline event handlers, etc.).
+ */
+export const DEFAULT_REHYPE_PLUGINS = SANITIZED_HTML_REHYPE_PLUGINS;
+
 /** Table override shared by the chat and preview renderers: horizontal scroll + collapsed borders. */
 export const MarkdownTable = ({ node: _node, ...rest }: Record<string, unknown>) => (
   <div style={{ overflowX: 'auto', maxWidth: '100%' }}>
diff --git a/packages/desktop/src/renderer/styles/markdown.css b/packages/desktop/src/renderer/styles/markdown.css
index 1ce2227ecb..134dee5e6a 100644
--- a/packages/desktop/src/renderer/styles/markdown.css
+++ b/packages/desktop/src/renderer/styles/markdown.css
@@ -97,6 +97,24 @@
   overflow-wrap: anywhere;
 }
 
+/* Keyboard keys (<kbd>) */
+.aionui-markdown :where(kbd) {
+  display: inline-block;
+  padding: 2px 6px;
+  font-size: 0.8em;
+  line-height: 1.2;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
+  font-weight: 500;
+  color: var(--text-primary);
+  background-color: var(--bg-2);
+  border: 1px solid var(--bg-3);
+  border-bottom-width: 2px;
+  border-radius: 5px;
+  box-shadow: inset 0 -1px 0 var(--bg-3);
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
 /* Code blocks (Shiki output lives inside pre) */
 .aionui-markdown :where(pre) {
   max-width: 100%;
diff --git a/tests/unit/renderer/markdownPreviewPipeline.dom.test.tsx b/tests/unit/renderer/markdownPreviewPipeline.dom.test.tsx
index 7a7fd95cfb..f2ba02f68f 100644
--- a/tests/unit/renderer/markdownPreviewPipeline.dom.test.tsx
+++ b/tests/unit/renderer/markdownPreviewPipeline.dom.test.tsx
@@ -1,4 +1,5 @@
 import {
+  DEFAULT_REHYPE_PLUGINS,
   MARKDOWN_REMARK_PLUGINS,
   SANITIZED_HTML_REHYPE_PLUGINS,
 } from '@/renderer/components/Markdown/markdownComponents';
@@ -72,6 +73,24 @@ describe('preview markdown pipeline — raw HTML sanitization', () => {
     expect(c.querySelector('em')?.textContent).toBe('emph');
   });
 
+  it('renders <kbd> tags safely in preview and default markdown pipelines', () => {
+    const previewContainer = renderPreviewMarkdown('Press <kbd>Ctrl</kbd> + <kbd>C</kbd>');
+    const previewKbds = previewContainer.querySelectorAll('kbd');
+    expect(previewKbds).toHaveLength(2);
+    expect(previewKbds[0].textContent).toBe('Ctrl');
+    expect(previewKbds[1].textContent).toBe('C');
+
+    const { container: chatContainer } = render(
+      <ReactMarkdown remarkPlugins={MARKDOWN_REMARK_PLUGINS} rehypePlugins={DEFAULT_REHYPE_PLUGINS}>
+        {'Shortcut: <kbd>Cmd</kbd> + <kbd>K</kbd>'}
+      </ReactMarkdown>
+    );
+    const chatKbds = chatContainer.querySelectorAll('kbd');
+    expect(chatKbds).toHaveLength(2);
+    expect(chatKbds[0].textContent).toBe('Cmd');
+    expect(chatKbds[1].textContent).toBe('K');
+  });
+
   it('preserves language-* class on code fences for highlighting', () => {
     const c = renderPreviewMarkdown('```ts\nconst a = 1;\n```');
     expect(c.querySelector('code')?.className).toContain('language-ts');

From d5add23185507e625bf28170eb1c2419a25621ca Mon Sep 17 00:00:00 2001
From: heartacker <heartacker@outlook.com>
Date: Thu, 10 Sep 2026 04:50:18 +0800
Subject: [PATCH 2/2] fix(markdown): allow file and drive letter protocols in
 sanitize schema

---
 .../Markdown/markdownComponents.tsx           | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/desktop/src/renderer/components/Markdown/markdownComponents.tsx b/packages/desktop/src/renderer/components/Markdown/markdownComponents.tsx
index ad4acea14d..0e7c063ce6 100644
--- a/packages/desktop/src/renderer/components/Markdown/markdownComponents.tsx
+++ b/packages/desktop/src/renderer/components/Markdown/markdownComponents.tsx
@@ -5,9 +5,10 @@
  */
 
 import React from 'react';
+import type { Options as ReactMarkdownOptions } from 'react-markdown';
 import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
-import rehypeSanitize from 'rehype-sanitize';
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
 import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
@@ -34,7 +35,26 @@ export const MARKDOWN_REMARK_PLUGINS = [remarkGfm, remarkMath, remarkBreaks];
  * Sanitizing before KaTeX (not after) is what lets raw HTML be shown safely while
  * math keeps working — this is the behaviour that must not regress.
  */
-export const SANITIZED_HTML_REHYPE_PLUGINS = [rehypeRaw, rehypeSanitize, rehypeKatex];
+export const SANITIZED_HTML_REHYPE_PLUGINS: ReactMarkdownOptions['rehypePlugins'] = [
+  rehypeRaw,
+  [
+    rehypeSanitize,
+    {
+      ...defaultSchema,
+      protocols: {
+        ...defaultSchema.protocols,
+        src: [...(defaultSchema.protocols?.src || []), 'data', 'file'],
+        href: [
+          ...(defaultSchema.protocols?.href || []),
+          'file',
+          // Allow Windows drive letter paths (e.g. C:/path) parsed as protocols
+          ...'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),
+        ],
+      },
+    },
+  ],
+  rehypeKatex,
+];
 
 /**
  * Default rehype pipeline for chat and standard markdown surfaces.