diff --git a/CHANGELOG.md b/CHANGELOG.md index e5209af..4221903 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,14 @@ +# 0.1.6 + +## What's new + +## Fixes + +* Fix code block double border issue +* Fix unspecified / unsupported code block styling issue + +## Changes + # 0.1.5 ## What's new diff --git a/package.json b/package.json index d221242..697e8b2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tinywebui-webapp", - "version": "0.1.5", + "version": "0.1.6", "private": true, "type": "module", "scripts": { diff --git a/src/components/custom/markdown-renderer.tsx b/src/components/custom/markdown-renderer.tsx index 5939b20..5d0fd55 100644 --- a/src/components/custom/markdown-renderer.tsx +++ b/src/components/custom/markdown-renderer.tsx @@ -44,16 +44,22 @@ function extractText(node: React.ReactNode): string { .join(""); } -function CodeBlock({ - inline, +function ensureLanguageClass(className?: string) { + if (!className) { + return "language-plaintext"; + } + return className.split(" ").some((cls) => cls.startsWith("language-")) + ? className + : `${className} language-plaintext`; +} + +function CodeBlockPre({ className, children, ...props -}: DetailedHTMLProps, HTMLElement> & { inline?: boolean }) { +}: DetailedHTMLProps, HTMLPreElement>) { const [copied, setCopied] = useState(false); const timeoutRef = useRef(null); - const isInline = inline || !className || !className.includes("language-"); - const rest = props; const codeText = useMemo(() => extractText(children).replace(/\n$/, ""), [children]); useEffect(() => { @@ -64,14 +70,6 @@ function CodeBlock({ }; }, []); - if (isInline) { - return ( - - {children} - - ); - } - const handleCopy = async () => { try { await copyToClipboard(codeText); @@ -85,8 +83,20 @@ function CodeBlock({ } }; + const preClassName = ensureLanguageClass(className); + const mappedChildren = React.Children.map(children, (child) => { + if (!React.isValidElement<{ className?: string }>(child)) { + return child; + } + const typedChild = child as React.ReactElement<{ className?: string }>; + return React.cloneElement(typedChild, { + className: ensureLanguageClass(typedChild.props.className), + }); + }); + const normalizedChildren = mappedChildren ?? children; + return ( -
+
-
-        {children}
+      
+        {normalizedChildren}
       
); @@ -119,7 +129,7 @@ export default function MarkdownRenderer({ content }: { content: string }) { components={{ ul: (props) =>
    , ol: (props) =>
      , - code: CodeBlock, + pre: CodeBlockPre, }} > {NormalizeMathTags(content)}