mehedi
/
skilld-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: code block overflow

This commit is contained in:
mehedi-hasan 2024-04-08 02:01:06 +06:00
parent 48d007f079
commit 8a6d8dbfff
7 changed files with 646 additions and 443 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1030
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

27
src/app/(dashboard)/dashboard/(task)/task/[...taskId]/page.tsx
View File

@ -5,11 +5,6 @@ import {
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable";
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import rehypePrettyCode from "rehype-pretty-code";
import markdownStyles from "@/styles/markdown-styles.module.css";
import { tutorialData } from "@/constants/tutorial-data";
import { notFound } from "next/navigation";
@ -18,17 +13,7 @@ import Link from "next/link";
import { cn } from "@/lib/utils";
import EditorWindow from "@/components/task/editor-window";
import { LANGUAGE_VERSIONS } from "@/constants/language-options";
async function main(tutorialCode: string) {
const file = await unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypePrettyCode, {})
.use(rehypeStringify)
.process(tutorialCode);
return file;
}
import { markdownToHtml } from "@/lib/markdown-to-html";
const languages = Object.keys(LANGUAGE_VERSIONS);
@ -53,7 +38,7 @@ const Page = async ({ params }: { params: { taskId: string[] } }) => {
notFound();
}
const code = await main(tutorial?.content || "");
const content = await markdownToHtml(tutorial?.content || "");
return (
<>
<div className="md:hidden w-full h-full">
@ -62,11 +47,11 @@ const Page = async ({ params }: { params: { taskId: string[] } }) => {
className="max-w-[1440px] mx-auto h-full"
>
<ResizablePanel defaultSize={50}>
<ScrollArea className="h-[calc(100vh-55px)] border-b">
<div className="px-4 py-6 flex flex-col gap-4 h-full mb-[50vh]">
<ScrollArea className="h-[calc(100vh-55px)]">
<div className="px-4 py-6 flex flex-col gap-4 h-full mb-[60vh]">
<div
className={cn("grow", markdownStyles["markdown"])}
dangerouslySetInnerHTML={{ __html: String(code) }}
dangerouslySetInnerHTML={{ __html: content }}
></div>
<div className="flex justify-between">
<div className="mb-6">
@ -119,7 +104,7 @@ const Page = async ({ params }: { params: { taskId: string[] } }) => {
<div className="px-4 py-6 flex flex-col gap-4 h-full">
<div
className={cn("grow", markdownStyles["markdown"])}
dangerouslySetInnerHTML={{ __html: String(code) }}
dangerouslySetInnerHTML={{ __html: content }}
></div>
<div className="flex justify-between">

5
src/app/globals.css
View File

@ -80,3 +80,8 @@
[data-ut-element="upload-icon"] {
@apply text-muted-foreground;
}
pre {
@apply overflow-x-auto
}

2
src/app/layout.tsx
View File

@ -20,7 +20,7 @@ export default async function RootLayout({
}) {
return (
<html lang="en" suppressHydrationWarning>
<body className={`${inter.className} overflow-hidden`}>
<body className={`${inter.className} overflow-x-hidden`}>
<Providers>
<Toaster />
{children}

16
src/lib/markdown-to-html.ts Normal file
View File

@ -0,0 +1,16 @@
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import rehypePrettyCode from "rehype-pretty-code";
export async function markdownToHtml(tutorialCode: string) {
const file = await unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypePrettyCode, {})
.use(rehypeStringify)
.process(tutorialCode);
return String(file);
}

4
src/styles/markdown-styles.module.css
View File

@ -23,7 +23,7 @@
}
.markdown p {
@apply my-4
@apply my-4;
}
.markdown a {
@ -51,5 +51,5 @@
}
.markdown pre {
@apply p-4 rounded-md my-4;
@apply p-4 rounded-md my-4 overflow-x-auto max-w-[320px] xs:max-w-full;
}

3
tailwind.config.js
View File

@ -17,6 +17,9 @@ module.exports = {
},
},
extend: {
screens: {
xs: "475px",
},
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",