CoolFace
Apppublic

admin08077/Githubgemini

sourceHugging Faceotherupdated 10mo agoView on Hugging Face
0likes
MarkdownSlides-CXwKSw4Z.js.map1 linesDownload Raw Back to assets
1{"version":3,"file":"MarkdownSlides-CXwKSw4Z.js","sources":["../../components/features/MarkdownSlides.tsx"],"sourcesContent":["import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react';\nimport { marked } from 'marked';\nimport { PhotoIcon } from '../icons.tsx';\n\nconst exampleMarkdown = `# Slide 1: Welcome\n\nThis is a slide deck generated from Markdown.\n\n- Use standard markdown syntax\n- Like lists, headers, and **bold** text.\n\n---\n\n# Slide 2: Features\n\nNavigate using the buttons below.\n\n\\`\\`\\`javascript\nconsole.log(\"Code blocks work too!\");\n\\`\\`\\`\n\n---\n\n# Slide 3: The End\n\nEasy to create and present.\n`;\n\nexport const MarkdownSlides: React.FC = () => {\n    const [markdown, setMarkdown] = useState(exampleMarkdown);\n    const [currentSlide, setCurrentSlide] = useState(0);\n    const [slideHtml, setSlideHtml] = useState<string | TrustedHTML>('');\n    const presentationRef = useRef<HTMLDivElement>(null);\n\n    const slides = useMemo(() => markdown.split(/^-{3,}\\s*$/m), [markdown]);\n\n    useEffect(() => {\n        const parse = async () => {\n            const currentSlideContent = slides[currentSlide] || '';\n            const html = await marked.parse(currentSlideContent);\n            setSlideHtml(html);\n        };\n        parse();\n    }, [slides, currentSlide]);\n\n    const goToNext = useCallback(() => setCurrentSlide(s => Math.min(s + 1, slides.length - 1)), [slides.length]);\n    const goToPrev = useCallback(() => setCurrentSlide(s => Math.max(s - 1, 0)), []);\n\n    const handleFullscreen = () => {\n        presentationRef.current?.requestFullscreen();\n    };\n    \n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (document.fullscreenElement === presentationRef.current) {\n                if (e.key === 'ArrowRight' || e.key === ' ') goToNext();\n                if (e.key === 'ArrowLeft') goToPrev();\n            }\n        };\n        document.addEventListener('keydown', handleKeyDown);\n        return () => document.removeEventListener('keydown', handleKeyDown);\n    }, [goToNext, goToPrev]);\n\n    return (\n        <div className=\"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary\">\n            <header className=\"mb-6\">\n                <h1 className=\"text-3xl font-bold flex items-center\"><PhotoIcon /><span className=\"ml-3\">Markdown to Slides</span></h1>\n                <p className=\"text-text-secondary mt-1\">Write markdown, present it as a slideshow. Use '---' to separate slides.</p>\n            </header>\n            <div className=\"flex-grow grid grid-cols-1 lg:grid-cols-2 gap-6 h-full overflow-hidden\">\n                <div className=\"flex flex-col h-full\">\n                     <label htmlFor=\"md-input\" className=\"text-sm font-medium text-text-secondary mb-2\">Markdown Editor</label>\n                     <textarea id=\"md-input\" value={markdown} onChange={e => setMarkdown(e.target.value)} className=\"flex-grow p-4 bg-surface border border-border rounded-md resize-none font-mono text-sm focus:ring-2 focus:ring-primary focus:outline-none\"/>\n                </div>\n                 <div ref={presentationRef} className=\"flex flex-col h-full bg-surface fullscreen:bg-background border border-border rounded-md\">\n                    <div className=\"flex-shrink-0 flex justify-end items-center p-2 border-b border-border\">\n                        <button onClick={handleFullscreen} className=\"px-3 py-1 bg-gray-100 rounded-md text-xs hover:bg-gray-200\">Fullscreen</button>\n                    </div>\n                    <div className=\"relative flex-grow flex flex-col justify-center items-center p-8 overflow-y-auto\">\n                        <div className=\"prose prose-lg max-w-none w-full\" dangerouslySetInnerHTML={{ __html: slideHtml }} />\n                         <button onClick={goToPrev} disabled={currentSlide === 0} className=\"absolute left-4 top-1/2 -translate-y-1/2 p-2 bg-gray-200/50 rounded-full disabled:opacity-30 hover:bg-gray-300/50\">◀</button>\n                         <button onClick={goToNext} disabled={currentSlide === slides.length - 1} className=\"absolute right-4 top-1/2 -translate-y-1/2 p-2 bg-gray-200/50 rounded-full disabled:opacity-30 hover:bg-gray-300/50\">▶</button>\n                         <div className=\"absolute bottom-4 right-4 text-xs bg-black/50 px-2 py-1 rounded-md text-white\">\n                            {currentSlide + 1} / {slides.length}\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};"],"names":["exampleMarkdown","MarkdownSlides","markdown","setMarkdown","useState","currentSlide","setCurrentSlide","slideHtml","setSlideHtml","presentationRef","useRef","slides","useMemo","useEffect","currentSlideContent","html","marked","goToNext","useCallback","goToPrev","handleFullscreen","_a","handleKeyDown","e","jsxs","jsx","PhotoIcon"],"mappings":"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"}