Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed markdown, now correctly applies styling (and renamed hook file) #66

Merged
merged 1 commit into from
Nov 13, 2024
Merged

Fixed markdown, now correctly applies styling (and renamed hook file) #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
186 changes: 93 additions & 93 deletions client/src/components/editor/FullCodeBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,99 +6,99 @@ import { getLanguageLabel, getMonacoLanguage } from '../../utils/language/langua
import CopyButton from '../common/buttons/CopyButton';

export interface FullCodeBlockProps {
code: string;
language?: string;
showLineNumbers?: boolean;
}

export const FullCodeBlock: React.FC<FullCodeBlockProps> = ({
code,
language = 'plaintext',
showLineNumbers = true
}) => {
const isMarkdown = getLanguageLabel(language) === 'markdown';
const [highlighterHeight, setHighlighterHeight] = useState<string>("100px");
const containerRef = useRef<HTMLDivElement>(null);
const LINE_HEIGHT = 19;

useEffect(() => {
updateHighlighterHeight();
const resizeObserver = new ResizeObserver(updateHighlighterHeight);
if (containerRef.current) {
resizeObserver.observe(containerRef.current);
}
return () => resizeObserver.disconnect();
}, [code]);

const updateHighlighterHeight = () => {
if (!containerRef.current) return;

const lineCount = code.split('\n').length;
const contentHeight = (lineCount * LINE_HEIGHT) + 35;
const newHeight = Math.min(500, Math.max(100, contentHeight));
setHighlighterHeight(`${newHeight}px`);
};

const customStyle = {
...vscDarkPlus,
'pre[class*="language-"]': {
...vscDarkPlus['pre[class*="language-"]'],
margin: 0,
fontSize: '13px',
background: '#1E1E1E',
padding: '1rem',
},
'code[class*="language-"]': {
...vscDarkPlus['code[class*="language-"]'],
fontSize: '13px',
background: '#1E1E1E',
display: 'block',
textIndent: 0,
}
};

return (
code: string;
language?: string;
showLineNumbers?: boolean;
}

export const FullCodeBlock: React.FC<FullCodeBlockProps> = ({
code,
language = 'plaintext',
showLineNumbers = true
}) => {
const isMarkdown = getLanguageLabel(language) === 'markdown';
const [highlighterHeight, setHighlighterHeight] = useState<string>("100px");
const containerRef = useRef<HTMLDivElement>(null);
const LINE_HEIGHT = 19;

useEffect(() => {
updateHighlighterHeight();
const resizeObserver = new ResizeObserver(updateHighlighterHeight);
if (containerRef.current) {
resizeObserver.observe(containerRef.current);
}
return () => resizeObserver.disconnect();
}, [code]);

const updateHighlighterHeight = () => {
if (!containerRef.current) return;

const lineCount = code.split('\n').length;
const contentHeight = (lineCount * LINE_HEIGHT) + 35;
const newHeight = Math.min(500, Math.max(100, contentHeight));
setHighlighterHeight(`${newHeight}px`);
};

const customStyle = {
...vscDarkPlus,
'pre[class*="language-"]': {
...vscDarkPlus['pre[class*="language-"]'],
margin: 0,
fontSize: '13px',
background: '#1E1E1E',
padding: '1rem',
},
'code[class*="language-"]': {
...vscDarkPlus['code[class*="language-"]'],
fontSize: '13px',
background: '#1E1E1E',
display: 'block',
textIndent: 0,
}
};

return (
<div className="relative">
<div className="relative">
<div className="relative">
{isMarkdown ? (
<div className="markdown-content">
<ReactMarkdown className="text-sm text-gray-300 markdown">
{code}
</ReactMarkdown>
</div>
) : (
<div
ref={containerRef}
style={{ maxHeight: '500px' }}
{isMarkdown ? (
<div className="markdown-content bg-gray-800 rounded-lg">
<ReactMarkdown className="markdown prose prose-invert max-w-none">
{code}
</ReactMarkdown>
</div>
) : (
<div
ref={containerRef}
style={{ maxHeight: '500px' }}
>
<SyntaxHighlighter
language={getMonacoLanguage(language)}
style={customStyle}
showLineNumbers={showLineNumbers}
wrapLines={true}
lineProps={{
style: {
whiteSpace: 'pre',
wordBreak: 'break-all',
paddingLeft: 0
}
}}
customStyle={{
height: highlighterHeight,
minHeight: '100px',
marginBottom: 0,
marginTop: 0,
textIndent: 0,
paddingLeft: showLineNumbers ? 10 : 20
}}
>
<SyntaxHighlighter
language={getMonacoLanguage(language)}
style={customStyle}
showLineNumbers={showLineNumbers}
wrapLines={true}
lineProps={{
style: {
whiteSpace: 'pre',
wordBreak: 'break-all',
paddingLeft: 0
}
}}
customStyle={{
height: highlighterHeight,
minHeight: '100px',
marginBottom: 0,
marginTop: 0,
textIndent: 0,
paddingLeft: showLineNumbers ? 10 : 20
}}
>
{code}
</SyntaxHighlighter>
</div>
)}

<CopyButton text={code} />
</div>
{code}
</SyntaxHighlighter>
</div>
)}

<CopyButton text={code} />
</div>
);
};
</div>
);
};
13 changes: 11 additions & 2 deletions client/src/components/editor/PreviewCodeBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,15 @@ export const PreviewCodeBlock: React.FC<PreviewCodeBlockProps> = ({
<div className="relative select-none" style={{ height: visibleHeight }}>
<style>
{`
.markdown-content-preview {
color: white;
background-color: #1E1E1E;
padding: 1rem;
border-radius: 0.5rem;
position: relative;
max-height: ${visibleHeight}px;
overflow: hidden;
}
.token-line:nth-child(n+${previewLines + 1}) {
visibility: hidden;
}
Expand All @@ -57,8 +66,8 @@ export const PreviewCodeBlock: React.FC<PreviewCodeBlockProps> = ({

<div className="relative">
{isMarkdown ? (
<div className="markdown-content-preview">
<ReactMarkdown className="text-sm text-gray-300 markdown">
<div className="markdown-content markdown-content-preview bg-gray-800 rounded-lg overflow-hidden">
<ReactMarkdown className="markdown prose prose-invert max-w-none">
{truncatedCode}
</ReactMarkdown>
</div>
Expand Down
0 client/src/hooks/useOutsideClick.tsx → client/src/hooks/useOutsideClick.ts
View file
Open in desktop
File renamed without changes.
1 change: 1 addition & 0 deletions client/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import './styles/markdown.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
Expand Down
100 changes: 37 additions & 63 deletions client/src/styles/markdown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,84 +1,58 @@
.markdown {
color: theme('colors.gray.100');
line-height: 1.6;
.markdown-content {
color: white;
background-color: #1E1E1E;
padding: 1rem;
border-radius: 0.5rem;
position: relative;
}

.markdown h1 {
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
font-weight: bold;
.markdown-content > :first-child {
margin-top: 0 !important;
}

.markdown h2 {
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
font-weight: bold;
.markdown-content > :last-child {
margin-bottom: 0 !important;
}

.markdown h3 {
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
font-weight: bold;
.markdown-content blockquote {
border-left: 3px solid #4a5568;
padding-left: 1rem;
margin: 1rem 0;
color: #a0aec0;
}

.markdown p {
margin-top: 1em;
margin-bottom: 1em;
}

.markdown ul {
list-style-type: disc;
margin-left: 2em;
}

.markdown ol {
list-style-type: decimal;
margin-left: 2em;
}

.markdown code {
background-color: theme('colors.gray.800');
padding: 0.2em 0.4em;
border-radius: 0.25em;
font-family: theme('fontFamily.mono');
.markdown-content table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}

.markdown pre {
background-color: theme('colors.gray.800');
padding: 1em;
border-radius: 0.5em;
overflow-x: auto;
margin: 1em 0;
.markdown-content th,
.markdown-content td {
border: 1px solid #4a5568;
padding: 0.5rem;
text-align: left;
}

.markdown pre code {
background-color: transparent;
padding: 0;
border-radius: 0;
.markdown-content th {
background-color: #2d3748;
}

.markdown blockquote {
border-left: 4px solid theme('colors.gray.600');
padding-left: 1em;
margin: 1em 0;
color: theme('colors.gray.400');
.markdown-content hr {
border: 0;
border-top: 1px solid #4a5568;
margin: 1rem 0;
}

.markdown table {
width: 100%;
border-collapse: collapse;
margin: 1em 0;
.markdown.prose > :first-child {
margin-top: 0 !important;
}

.markdown th,
.markdown td {
border: 1px solid theme('colors.gray.600');
padding: 0.5em;
.markdown.prose > * {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}

.markdown th {
background-color: theme('colors.gray.800');
.markdown.prose > :last-child {
margin-bottom: 0 !important;
}