diff --git a/apps/ai-game-creator-shell/src/components/ChatMarkdownMessage/index.tsx b/apps/ai-game-creator-shell/src/components/ChatMarkdownMessage/index.tsx index f3efd6236..39926feee 100644 --- a/apps/ai-game-creator-shell/src/components/ChatMarkdownMessage/index.tsx +++ b/apps/ai-game-creator-shell/src/components/ChatMarkdownMessage/index.tsx @@ -45,18 +45,22 @@ class MarkdownErrorBoundary extends Component< } const ListDepthContext = createContext(0); +const ListKindContext = createContext<'unordered' | 'ordered' | null>(null); +const ListItemContext = createContext(false); function MarkdownUnorderedList({ children }: { children?: ReactNode }) { const depth = useContext(ListDepthContext); return ( - + + + ); } @@ -65,13 +69,38 @@ function MarkdownOrderedList({ children }: { children?: ReactNode }) { const depth = useContext(ListDepthContext); return ( -
    - {children} -
+ +
    + {children} +
+
); } +function MarkdownParagraph({ children }: { children?: ReactNode }) { + const inListItem = useContext(ListItemContext); + return ( +

+ {children} +

+ ); +} + +function MarkdownListItem({ children }: { children?: ReactNode }) { + const listKind = useContext(ListKindContext); + return ( + +
  • + {listKind === 'unordered' ? '- ' : null} + {children} +
  • +
    + ); +} + const markdownComponents: Components = { // TODO: 产品确认安全外链策略后,再将链接文本恢复为可点击元素。 a: ({ children }) => children, @@ -85,12 +114,10 @@ const markdownComponents: Components = { h3: ({ children }) => (

    {children}

    ), - p: ({ children }) => ( -

    {children}

    - ), + p: MarkdownParagraph, ul: MarkdownUnorderedList, ol: MarkdownOrderedList, - li: ({ children }) =>
  • - {children}
  • , + li: MarkdownListItem, blockquote: ({ children }) => (
    {children} diff --git a/apps/ai-game-creator-shell/tests/ChatMarkdownMessage.test.tsx b/apps/ai-game-creator-shell/tests/ChatMarkdownMessage.test.tsx index f3778c4ab..43f4a9bde 100644 --- a/apps/ai-game-creator-shell/tests/ChatMarkdownMessage.test.tsx +++ b/apps/ai-game-creator-shell/tests/ChatMarkdownMessage.test.tsx @@ -38,6 +38,21 @@ describe('ChatMarkdownMessage', () => { expect(lists[2]?.className).toContain('pl-4'); }); + it('有序列表不添加无序列表短横线,列表项段落与文本同行', () => { + const { container } = render( + , + ); + + const items = container.querySelectorAll('ol > li'); + expect(items[0]?.textContent?.trim()).toBe('第一件事'); + expect(items[1]?.textContent?.trim()).toContain('第二件事'); + expect(items[0]?.querySelector('p')?.className ?? '').toContain('inline'); + expect(items[0]?.textContent).not.toContain('-'); + }); + it('不会把 react-markdown 的 node 元数据泄漏到代码节点', () => { const { container } = render(