feat(markdown): add MarkdownReadView component with dark theme and checkbox toggling
This commit is contained in:
Hiren Kangad
@@ -0,0 +1,201 @@
|
|||||||
|
/**
|
||||||
|
* MarkdownReadView — renders markdown content in read mode using
|
||||||
|
* react-markdown + remark-gfm. Handles dark-theme styling and
|
||||||
|
* clickable task checkboxes.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useCallback } from 'react';
|
||||||
|
import ReactMarkdown from 'react-markdown';
|
||||||
|
import remarkGfm from 'remark-gfm';
|
||||||
|
import rehypeSanitize from 'rehype-sanitize';
|
||||||
|
import type { Element } from 'hast';
|
||||||
|
import {
|
||||||
|
MD_HEADER_BG,
|
||||||
|
MD_MAX_CONTENT_LENGTH,
|
||||||
|
extractTitle,
|
||||||
|
} from '../canvas/markdownDefaults';
|
||||||
|
|
||||||
|
interface MarkdownReadViewProps {
|
||||||
|
content: string;
|
||||||
|
textColor: string;
|
||||||
|
accentColor: string;
|
||||||
|
bgColor: string;
|
||||||
|
padding: number;
|
||||||
|
onCheckboxToggle?: (newContent: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Check if the Nth checkbox (outside fenced code blocks) is checked. */
|
||||||
|
function isCheckboxChecked(content: string, index: number): boolean {
|
||||||
|
let count = 0;
|
||||||
|
let inCodeBlock = false;
|
||||||
|
for (const line of content.split('\n')) {
|
||||||
|
if (line.trimStart().startsWith('```')) { inCodeBlock = !inCodeBlock; continue; }
|
||||||
|
if (inCodeBlock) continue;
|
||||||
|
if (/^\s*-\s*\[[ xX]\]/.test(line)) {
|
||||||
|
if (count === index) return /^\s*-\s*\[[xX]\]/.test(line);
|
||||||
|
count++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Toggle the Nth checkbox (outside fenced code blocks) in a markdown string. */
|
||||||
|
function toggleCheckbox(content: string, index: number): string {
|
||||||
|
let count = 0;
|
||||||
|
let inCodeBlock = false;
|
||||||
|
|
||||||
|
return content.split('\n').map((line) => {
|
||||||
|
if (line.trimStart().startsWith('```')) {
|
||||||
|
inCodeBlock = !inCodeBlock;
|
||||||
|
return line;
|
||||||
|
}
|
||||||
|
if (inCodeBlock) return line;
|
||||||
|
|
||||||
|
const unchecked = /^(\s*-\s*)\[ \]/;
|
||||||
|
const checked = /^(\s*-\s*)\[x\]/i;
|
||||||
|
|
||||||
|
if (unchecked.test(line) || checked.test(line)) {
|
||||||
|
if (count === index) {
|
||||||
|
count++;
|
||||||
|
if (unchecked.test(line)) {
|
||||||
|
return line.replace(unchecked, '$1[x]');
|
||||||
|
} else {
|
||||||
|
return line.replace(checked, '$1[ ]');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
count++;
|
||||||
|
}
|
||||||
|
return line;
|
||||||
|
}).join('\n');
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MarkdownReadView(props: MarkdownReadViewProps) {
|
||||||
|
const { content, textColor, accentColor, bgColor: _bgColor, padding, onCheckboxToggle } = props;
|
||||||
|
|
||||||
|
const displayContent = content.length > MD_MAX_CONTENT_LENGTH
|
||||||
|
? content.slice(0, MD_MAX_CONTENT_LENGTH) + '\n\n---\n*Content truncated*'
|
||||||
|
: content;
|
||||||
|
|
||||||
|
const title = extractTitle(content);
|
||||||
|
|
||||||
|
const checkboxIndexRef = React.useRef(0);
|
||||||
|
checkboxIndexRef.current = 0;
|
||||||
|
|
||||||
|
const handleCheckboxClick = useCallback((idx: number) => {
|
||||||
|
if (!onCheckboxToggle) return;
|
||||||
|
const newContent = toggleCheckbox(content, idx);
|
||||||
|
onCheckboxToggle(newContent);
|
||||||
|
}, [content, onCheckboxToggle]);
|
||||||
|
|
||||||
|
const containerStyle: React.CSSProperties = {
|
||||||
|
color: textColor,
|
||||||
|
fontFamily: 'Inter, system-ui, sans-serif',
|
||||||
|
fontSize: '13px',
|
||||||
|
lineHeight: '1.6',
|
||||||
|
};
|
||||||
|
|
||||||
|
const headerStyle: React.CSSProperties = {
|
||||||
|
padding: '7px 14px',
|
||||||
|
background: MD_HEADER_BG,
|
||||||
|
borderBottom: '1px solid #333',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '7px',
|
||||||
|
fontSize: '11px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const bodyStyle: React.CSSProperties = {
|
||||||
|
padding: `${padding}px`,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={containerStyle}>
|
||||||
|
<div style={headerStyle}>
|
||||||
|
<span style={{ fontSize: '13px' }}>📄</span>
|
||||||
|
<span style={{ color: '#999', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{title}</span>
|
||||||
|
<span style={{ color: '#555', fontSize: '9px', background: '#333', padding: '1px 6px', borderRadius: '3px' }}>MD</span>
|
||||||
|
</div>
|
||||||
|
<div style={bodyStyle}>
|
||||||
|
<ReactMarkdown
|
||||||
|
remarkPlugins={[remarkGfm]}
|
||||||
|
rehypePlugins={[rehypeSanitize]}
|
||||||
|
components={{
|
||||||
|
h1: ({ children }) => <h1 style={{ color: '#fff', fontSize: '20px', fontWeight: 700, margin: '0 0 10px 0', lineHeight: 1.3 }}>{children}</h1>,
|
||||||
|
h2: ({ children }) => <h2 style={{ color: '#fff', fontSize: '16px', fontWeight: 700, margin: '12px 0 8px 0', lineHeight: 1.3 }}>{children}</h2>,
|
||||||
|
h3: ({ children }) => <h3 style={{ color: '#fff', fontSize: '14px', fontWeight: 700, margin: '10px 0 6px 0', lineHeight: 1.3 }}>{children}</h3>,
|
||||||
|
p: ({ children }) => <p style={{ margin: '0 0 10px 0', color: textColor }}>{children}</p>,
|
||||||
|
strong: ({ children }) => <strong style={{ color: '#fff' }}>{children}</strong>,
|
||||||
|
em: ({ children }) => <em>{children}</em>,
|
||||||
|
del: ({ children }) => <del style={{ color: '#888' }}>{children}</del>,
|
||||||
|
blockquote: ({ children }) => (
|
||||||
|
<blockquote style={{ borderLeft: `3px solid ${accentColor}`, paddingLeft: '14px', margin: '10px 0', color: '#999', fontStyle: 'italic' }}>
|
||||||
|
{children}
|
||||||
|
</blockquote>
|
||||||
|
),
|
||||||
|
code: ({ className, children }) => {
|
||||||
|
const isBlock = className?.startsWith('language-');
|
||||||
|
if (isBlock) {
|
||||||
|
const lang = className?.replace('language-', '') ?? '';
|
||||||
|
return (
|
||||||
|
<div style={{ background: '#1a1a2e', border: '1px solid #333', borderRadius: '6px', margin: '10px 0', overflow: 'hidden' }}>
|
||||||
|
{lang && <div style={{ padding: '4px 14px', color: '#555', fontSize: '9px', borderBottom: '1px solid #333' }}>{lang}</div>}
|
||||||
|
<pre style={{ margin: 0, padding: '10px 14px', overflow: 'auto' }}>
|
||||||
|
<code style={{ fontFamily: "'Fira Code', Consolas, monospace", fontSize: '11px', color: '#b0b0b0' }}>{children}</code>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return <code style={{ background: '#1a1a2e', padding: '1px 5px', borderRadius: '3px', fontFamily: "'Fira Code', Consolas, monospace", fontSize: '12px' }}>{children}</code>;
|
||||||
|
},
|
||||||
|
ul: ({ children }) => <ul style={{ margin: '0 0 10px 0', paddingLeft: '18px' }}>{children}</ul>,
|
||||||
|
ol: ({ children }) => <ol style={{ margin: '0 0 10px 0', paddingLeft: '18px' }}>{children}</ol>,
|
||||||
|
li: ({ children, node }) => {
|
||||||
|
const hastNode = node as Element | undefined;
|
||||||
|
const classList = hastNode?.properties?.className;
|
||||||
|
const isTask = Array.isArray(classList)
|
||||||
|
? classList.includes('task-list-item')
|
||||||
|
: typeof classList === 'string' && classList.includes('task-list-item');
|
||||||
|
|
||||||
|
if (isTask) {
|
||||||
|
const idx = checkboxIndexRef.current++;
|
||||||
|
const checked = isCheckboxChecked(content, idx);
|
||||||
|
return (
|
||||||
|
<li style={{ listStyle: 'none', marginLeft: '-18px', marginBottom: '4px', display: 'flex', alignItems: 'center', gap: '6px' }}>
|
||||||
|
<div
|
||||||
|
onClick={(e) => { e.stopPropagation(); handleCheckboxClick(idx); }}
|
||||||
|
style={{
|
||||||
|
width: '14px', height: '14px', borderRadius: '3px', cursor: 'pointer', flexShrink: 0,
|
||||||
|
pointerEvents: 'auto',
|
||||||
|
...(checked
|
||||||
|
? { background: accentColor, display: 'flex', alignItems: 'center', justifyContent: 'center' }
|
||||||
|
: { border: '1.5px solid #555' }),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{checked && <span style={{ color: '#fff', fontSize: '10px' }}>✓</span>}
|
||||||
|
</div>
|
||||||
|
<span style={checked ? { color: '#888', textDecoration: 'line-through' } : {}}>{children}</span>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <li style={{ marginBottom: '4px' }}>{children}</li>;
|
||||||
|
},
|
||||||
|
table: ({ children }) => (
|
||||||
|
<table style={{ borderCollapse: 'collapse', width: '100%', margin: '10px 0', fontSize: '12px' }}>{children}</table>
|
||||||
|
),
|
||||||
|
th: ({ children }) => (
|
||||||
|
<th style={{ border: '1px solid #333', padding: '6px 10px', textAlign: 'left', background: '#2a2a42', color: '#ccc', fontWeight: 600 }}>{children}</th>
|
||||||
|
),
|
||||||
|
td: ({ children }) => (
|
||||||
|
<td style={{ border: '1px solid #333', padding: '6px 10px', color: textColor }}>{children}</td>
|
||||||
|
),
|
||||||
|
hr: () => <hr style={{ border: 'none', borderTop: '1px solid #333', margin: '14px 0' }} />,
|
||||||
|
a: ({ children, href }) => <a href={href} style={{ color: accentColor }} target="_blank" rel="noopener noreferrer">{children}</a>,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{displayContent}
|
||||||
|
</ReactMarkdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user