diff --git a/public/themes/default/layouts/markdown-slide.html b/public/themes/default/layouts/markdown-slide.html
new file mode 100644
index 0000000..e79275a
--- /dev/null
+++ b/public/themes/default/layouts/markdown-slide.html
@@ -0,0 +1,17 @@
+
\ No newline at end of file
diff --git a/public/themes/default/layouts/title-slide.html b/public/themes/default/layouts/title-slide.html
index b7225b4..d416256 100644
--- a/public/themes/default/layouts/title-slide.html
+++ b/public/themes/default/layouts/title-slide.html
@@ -1,8 +1,5 @@
-
+
{{title}}
-
- {{diagram}}
-
\ No newline at end of file
diff --git a/public/themes/default/master-slide.html b/public/themes/default/master-slide.html
index ffa4da2..0f12bbc 100644
--- a/public/themes/default/master-slide.html
+++ b/public/themes/default/master-slide.html
@@ -1,3 +1,3 @@
\ No newline at end of file
diff --git a/public/themes/default/style.css b/public/themes/default/style.css
index b840049..3f017e9 100644
--- a/public/themes/default/style.css
+++ b/public/themes/default/style.css
@@ -27,7 +27,7 @@
width: 100%;
height: 100%;
background: var(--theme-background);
- color: var(--theme-text);
+ color: var(--theme-primary);
font-family: var(--theme-font-body);
padding: var(--slide-padding);
box-sizing: border-box;
@@ -35,8 +35,6 @@
flex-direction: column;
position: relative;
overflow: hidden;
- justify-content: center;
- align-items: center;
/* Ensure content is properly centered within container */
text-align: center;
}
@@ -69,10 +67,13 @@
/* Ensure slot content inherits proper centering */
text-align: inherit;
}
-#main-image {
- scale: .7;
+
+.slot[data-slot="image"] {
+ width: 100%;
+}
+.slot[data-slot="image"] img {
+ width: 100%;
}
-.slot:hover,
.slot.editing {
border-color: var(--theme-accent);
border-radius: 4px;
@@ -92,20 +93,6 @@
font-style: italic;
}
-/* Text slots */
-.slot[data-type="title"] {
- font-family: var(--theme-font-heading);
- font-weight: bold;
- line-height: 1.2;
- text-align: center;
-}
-
-.slot[data-type="subtitle"] {
- font-family: var(--theme-font-heading);
- line-height: 1.4;
- opacity: 0.8;
- text-align: center;
-}
.content-slot {
color: var(--theme-text-secondary);
background-color: var(--theme-background);
@@ -115,101 +102,34 @@
/* Text content can be left-aligned for readability */
text-align: left;
}
-
-/* Image slots */
.slot[data-type="image"] {
display: flex;
align-items: center;
justify-content: center;
- background: #f8fafc;
+ background: #fffffd;
border-radius: 8px;
}
.slot[data-type="image"] img {
- max-width: 100%;
- max-height: 100%;
- object-fit: contain;
+ max-width: 100px;
+ max-height: 100px;
border-radius: 4px;
}
-/* Layout-specific styles */
-
-/* Title slide layout */
-.layout-title-slide,
-.slide-container .layout-title-slide {
- justify-content: center;
- align-items: center;
- text-align: center;
-}
-
-.layout-title-slide .slot[data-slot="title"] {
- font-size: clamp(2rem, 8vw, 4rem);
+.slot[data-slot="title"] {
+ font-size: clamp(5rem, 8vw, 4rem);
margin-bottom: 2rem;
- width: 100%;
- max-width: 80%;
- color: var(--theme-primary);
+ width: 80%;
text-align: center;
}
-.layout-title-slide .slot[data-slot="subtitle"] {
+.slot[data-slot="subtitle"] {
font-size: clamp(1rem, 4vw, 2rem);
color: var(--theme-text-secondary);
width: 100%;
max-width: 80%;
text-align: center;
}
-/* Content slide layout */
-.layout-content-slide,
-.slide-container .layout-content-slide {
- justify-content: flex-start;
- align-items: stretch;
- /* Reset text alignment for content slides */
- text-align: initial;
-}
-
-.layout-content-slide .slot[data-slot="title"] {
- font-size: clamp(1.5rem, 6vw, 2.5rem);
- margin-bottom: 2rem;
- padding-bottom: 1rem;
- border-bottom: 2px solid var(--theme-primary);
- text-align: center;
- width: 100%;
-}
-
-.layout-content-slide .slot[data-slot="subtitle"] {
- font-size: clamp(1rem, 2vw, .5rem);
- text-align: right;
- width: 50%;
-}
-
-.layout-content-slide .slot[data-slot="content"] {
- font-size: clamp(1rem, 2.5vw, 1.25rem);
- flex: 1;
- text-align: left;
- width: 100%;
- line-height: 1.6;
- /* Ensure content doesn't get too wide */
- max-width: 100%;
- margin: 0 auto;
-}
-
-/* Two content blocks layout */
-.layout-2-content-blocks,
-.slide-container .layout-2-content-blocks {
- justify-content: flex-start;
- align-items: stretch;
- /* Reset text alignment for two-column slides */
- text-align: initial;
-}
-
-.layout-2-content-blocks .slot[data-slot="title"] {
- font-size: clamp(1.5rem, 5vw, 2.5rem);
- margin-bottom: 2rem;
- padding-bottom: 1rem;
- border-bottom: 2px solid var(--theme-primary);
- text-align: center;
- width: 100%;
-}
.content-blocks-container {
display: grid;
@@ -219,41 +139,17 @@
align-items: stretch;
width: 100%;
}
-
-.layout-2-content-blocks .slot[data-slot="content1"],
-.layout-2-content-blocks .slot[data-slot="content2"] {
+.slot[data-slot="content"],
+.slot[data-slot="content1"],
+.slot[data-slot="content2"] {
font-size: clamp(0.9rem, 2.2vw, 1.1rem);
text-align: left;
width: 100%;
line-height: 1.6;
- padding: 1rem;
- background: rgba(255, 255, 255, 0.05);
- border-radius: 0.5rem;
- border: 1px solid rgba(255, 255, 255, 0.1);
+ padding: 2rem;
+ color: var(--theme-text-secondary);
}
-/* Image slide layout */
-.layout-image-slide,
-.slide-container .layout-image-slide {
- justify-content: flex-start;
- align-items: stretch;
-}
-
-.layout-image-slide .slot[data-slot="title"] {
- font-size: clamp(1.5rem, 6vw, 2.5rem);
- margin-bottom: 2rem;
- text-align: center;
- width: 100%;
-}
-
-.layout-image-slide .slot[data-slot="image"] {
- flex: 1;
- margin-top: 1rem;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
-}
/* Aspect ratio specific adjustments */
.slide-container.aspect-16-9 .slide-content,
@@ -281,20 +177,7 @@
--content-max-width: 95%;
}
- .layout-title-slide .slot[data-slot="title"] {
- margin-bottom: 1rem;
- font-size: clamp(1.5rem, 6vw, 3rem);
- }
-
- .layout-content-slide .slot[data-slot="title"] {
- margin-bottom: 1rem;
- font-size: clamp(1.2rem, 5vw, 2rem);
- }
-
- .layout-image-slide .slot[data-slot="title"] {
- font-size: clamp(1.2rem, 5vw, 2rem);
- }
-
+
/* Two content blocks responsive adjustments */
.content-blocks-container {
grid-template-columns: 1fr;
@@ -307,20 +190,274 @@
padding: 0.75rem;
}
}
+.fade-in {
+ opacity: 1;
+ animation-name: fadeInOpacity;
+ animation-iteration-count: 1;
+ animation-timing-function: ease-in;
+ animation-duration: 1s;
+}
-/* Print styles for presentations */
-@media print {
- .slide {
- page-break-after: always;
- width: 100%;
- height: 100vh;
+.fade-in-slow {
+ opacity: 0;
+ animation-name: fadeInOpacity;
+ animation-iteration-count: 1;
+ animation-timing-function: ease-in;
+ animation-duration: 2s;
+ animation-delay: 1s;
+ animation-fill-mode: forwards;
+}
+
+
+@keyframes fadeInOpacity {
+ 0% {
+ opacity: 0;
}
-
- .slot {
- border: none !important;
- }
-
- .slot.empty::before {
- display: none;
+ 100% {
+ opacity: 1;
}
}
+
+/* Enhanced code blocks with syntax highlighting */
+.slide-code {
+ background: #1e1e1e !important;
+ border: 1px solid var(--theme-secondary);
+ border-radius: 8px;
+ padding: 1.5rem;
+ margin: 1.5em 0;
+ overflow-x: auto;
+ font-family: var(--theme-font-code);
+ font-size: clamp(0.75rem, 1.5vw, 0.9rem);
+ line-height: 1.4;
+ position: relative;
+}
+
+.slide-code code {
+ background: none !important;
+ padding: 0 !important;
+ color: #e6e6e6;
+ font-family: inherit;
+}
+
+/* Prism.js syntax highlighting theme for slides */
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: #6a9955;
+ font-style: italic;
+}
+
+.token.punctuation {
+ color: #d4d4d4;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+ color: #b5cea8;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+ color: #ce9178;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+ color: #d4d4d4;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+ color: #569cd6;
+}
+
+.token.function,
+.token.class-name {
+ color: #dcdcaa;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+ color: #d16969;
+}
+
+.token.important,
+.token.bold {
+ font-weight: bold;
+}
+
+.token.italic {
+ font-style: italic;
+}
+
+/* Language labels for code blocks */
+.slide-code::before {
+ content: attr(class);
+ position: absolute;
+ top: 0.5rem;
+ right: 1rem;
+ font-size: 0.75rem;
+ color: var(--theme-text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ opacity: 0.7;
+}
+
+.slide-code.language-javascript::before { content: 'JavaScript'; }
+.slide-code.language-typescript::before { content: 'TypeScript'; }
+.slide-code.language-python::before { content: 'Python'; }
+.slide-code.language-bash::before { content: 'Bash'; }
+.slide-code.language-json::before { content: 'JSON'; }
+.slide-code.language-css::before { content: 'CSS'; }
+.slide-code.language-markup::before { content: 'HTML'; }
+.slide-code.language-html::before { content: 'HTML'; }
+.slide-code.language-sql::before { content: 'SQL'; }
+.slide-code.language-yaml::before { content: 'YAML'; }
+
+/* Mermaid diagram styling */
+.mermaid-container {
+ margin: 2rem 0;
+ padding: 1rem;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 8px;
+ border: 1px solid var(--theme-secondary);
+ text-align: center;
+ overflow-x: auto;
+}
+
+.mermaid-diagram {
+ max-width: 100%;
+ height: auto;
+}
+
+.mermaid-diagram svg {
+ max-width: 100%;
+ height: auto;
+ background: transparent;
+}
+
+.mermaid-error {
+ color: #ff6b6b;
+ background: rgba(255, 107, 107, 0.1);
+ padding: 1rem;
+ border-radius: 4px;
+ border: 1px solid #ff6b6b;
+ font-family: var(--theme-font-code);
+ font-size: 0.9rem;
+}
+
+/* Enhanced slide callouts */
+.slide-callout {
+ background: rgba(149, 116, 235, 0.15);
+ border-left: 4px solid var(--theme-primary);
+ padding: 1rem 1.5rem;
+ margin: 1.5em 0;
+ border-radius: 0 8px 8px 0;
+ font-style: italic;
+ color: var(--theme-text);
+ position: relative;
+}
+
+.slide-callout::before {
+ content: '💡';
+ position: absolute;
+ left: -12px;
+ top: 50%;
+ transform: translateY(-50%);
+ background: var(--theme-background);
+ padding: 0.25rem;
+ border-radius: 50%;
+ font-style: normal;
+}
+
+/* Enhanced slide lists */
+.slide-list {
+ margin: 1.5em 0;
+ padding-left: 2rem;
+}
+
+.slide-list li {
+ margin: 0.75em 0;
+ color: var(--theme-text);
+ line-height: 1.6;
+ position: relative;
+}
+
+.slide-list li::marker {
+ color: var(--theme-accent);
+ font-weight: 600;
+}
+
+/* Enhanced slide tables */
+.slide-table-wrapper {
+ margin: 2rem 0;
+ overflow-x: auto;
+ border-radius: 8px;
+ border: 1px solid var(--theme-secondary);
+}
+
+.slide-table {
+ width: 100%;
+ border-collapse: collapse;
+ background: rgba(255, 255, 255, 0.02);
+}
+
+.slide-table th,
+.slide-table td {
+ padding: 0.75rem 1rem;
+ text-align: left;
+ border-bottom: 1px solid var(--theme-secondary);
+}
+
+.slide-table th {
+ background: rgba(149, 116, 235, 0.2);
+ font-weight: 600;
+ color: var(--theme-primary);
+ border-bottom: 2px solid var(--theme-primary);
+}
+
+.slide-table tr:nth-child(even) {
+ background: rgba(255, 255, 255, 0.03);
+}
+
+.slide-table tr:hover {
+ background: rgba(149, 116, 235, 0.1);
+}
+
+/* Responsive adjustments for enhanced features */
+@media (max-width: 768px) {
+ .slide-code {
+ padding: 1rem;
+ font-size: 0.8rem;
+ }
+
+ .slide-code::before {
+ font-size: 0.7rem;
+ }
+
+ .mermaid-container {
+ padding: 0.5rem;
+ margin: 1rem 0;
+ }
+
+ .slide-callout {
+ padding: 0.75rem 1rem;
+ margin: 1rem 0;
+ }
+}
+
diff --git a/src/components/presentations/PresentationMode.tsx b/src/components/presentations/PresentationMode.tsx
index f88608c..4abfd96 100644
--- a/src/components/presentations/PresentationMode.tsx
+++ b/src/components/presentations/PresentationMode.tsx
@@ -1,13 +1,14 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect} from 'react';
import { useParams, useNavigate } from 'react-router-dom';
-import type { Presentation, SlideContent } from '../../types/presentation.ts';
-import type { Theme } from '../../types/theme.ts';
-import { getPresentationById } from '../../utils/presentationStorage.ts';
-import { loadTheme } from '../../utils/themeLoader.ts';
+
import { renderTemplateWithSampleData } from '../../utils/templateRenderer.ts';
import { sanitizeSlideTemplate } from '../../utils/htmlSanitizer.ts';
+import { renderSlideMarkdown, isMarkdownContent } from '../../utils/markdownProcessor.ts';
import { loggers } from '../../utils/logger.ts';
import './PresentationMode.css';
+import {usePresentationLoader} from "./hooks/usePresentationLoader.ts";
+import type { SlideContent } from '../../types/presentation.ts';
+import {useKeyboardNavigation} from "./hooks/useKeyboardNavigation.ts";
export const PresentationMode: React.FC = () => {
const { presentationId, slideNumber } = useParams<{
@@ -15,15 +16,13 @@ export const PresentationMode: React.FC = () => {
slideNumber: string;
}>();
const navigate = useNavigate();
-
- const [presentation, setPresentation] = useState
(null);
- const [theme, setTheme] = useState(null);
+
const [currentSlideIndex, setCurrentSlideIndex] = useState(
slideNumber ? parseInt(slideNumber, 10) - 1 : 0
);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(null);
-
+
+ // Load presentation and theme
+ const { presentation, theme, loading, error } = usePresentationLoader(presentationId);
// Navigate to specific slide and update URL
const goToSlide = (slideIndex: number) => {
if (!presentation) return;
@@ -32,50 +31,16 @@ export const PresentationMode: React.FC = () => {
setCurrentSlideIndex(clampedIndex);
navigate(`/presentations/${presentationId}/present/${clampedIndex + 1}`, { replace: true });
};
-
+
+
// Keyboard navigation handler
- const handleKeyPress = useCallback((event: KeyboardEvent) => {
- if (!presentation || presentation.slides.length === 0) return;
-
- switch (event.key) {
- case 'ArrowRight':
- case 'Space':
- case 'Enter':
- event.preventDefault();
- goToSlide(currentSlideIndex + 1);
- break;
-
- case 'ArrowLeft':
- event.preventDefault();
- goToSlide(currentSlideIndex - 1);
- break;
-
- case 'Home':
- event.preventDefault();
- goToSlide(0);
- break;
-
- case 'End':
- event.preventDefault();
- goToSlide(presentation.slides.length - 1);
- break;
-
- case 'Escape':
- event.preventDefault();
- exitPresentationMode();
- break;
-
- default:
- // Handle number keys for direct slide navigation
- const slideNum = parseInt(event.key);
- if (slideNum >= 1 && slideNum <= presentation.slides.length) {
- event.preventDefault();
- goToSlide(slideNum - 1);
- }
- break;
- }
- }, [presentation, currentSlideIndex, goToSlide]);
-
+
+ useKeyboardNavigation({
+ totalSlides: presentation?.slides.length || 0,
+ currentSlideIndex,
+ onNavigate: goToSlide
+ });
+
// Sync current slide index with URL parameter
useEffect(() => {
if (slideNumber) {
@@ -85,81 +50,7 @@ export const PresentationMode: React.FC = () => {
}
}
}, [slideNumber]);
-
- // Set up keyboard listeners
- useEffect(() => {
- document.addEventListener('keydown', handleKeyPress);
- return () => {
- document.removeEventListener('keydown', handleKeyPress);
- };
- }, [handleKeyPress]);
-
- // Load presentation and theme
- useEffect(() => {
- const loadPresentationAndTheme = async () => {
- if (!presentationId) {
- setError('No presentation ID provided');
- setLoading(false);
- return;
- }
- try {
- setLoading(true);
-
- // Load presentation
- const presentationData = await getPresentationById(presentationId);
- if (!presentationData) {
- setError(`Presentation not found: ${presentationId}`);
- return;
- }
-
- setPresentation(presentationData);
-
- // Load theme
- const themeData = await loadTheme(presentationData.metadata.theme, false);
- if (!themeData) {
- setError(`Theme not found: ${presentationData.metadata.theme}`);
- return;
- }
-
- setTheme(themeData);
-
- // Load theme CSS
- const cssLink = document.getElementById('presentation-theme-css') as HTMLLinkElement;
- const cssPath = `${themeData.basePath}/${themeData.cssFile}`;
- if (cssLink) {
- cssLink.href = cssPath;
- } else {
- const newCssLink = document.createElement('link');
- newCssLink.id = 'presentation-theme-css';
- newCssLink.rel = 'stylesheet';
- newCssLink.href = cssPath;
- document.head.appendChild(newCssLink);
- }
-
- } catch (err) {
- setError(err instanceof Error ? err.message : 'Failed to load presentation');
- } finally {
- setLoading(false);
- }
- };
-
- loadPresentationAndTheme();
-
- // Cleanup theme CSS on unmount
- return () => {
- const cssLink = document.getElementById('presentation-theme-css');
- if (cssLink) {
- cssLink.remove();
- }
- };
- }, [presentationId]);
-
- const exitPresentationMode = () => {
- // Navigate back to the previous page in history
- navigate(-1);
- };
-
const renderSlideContent = (slide: SlideContent): string => {
if (!theme) return '';
@@ -174,7 +65,16 @@ export const PresentationMode: React.FC = () => {
// Replace template variables with slide content
Object.entries(slide.content).forEach(([slotId, content]) => {
const regex = new RegExp(`\\{\\{${slotId}\\}\\}`, 'g');
- renderedTemplate = renderedTemplate.replace(regex, content);
+
+ // Find the corresponding slot to determine if it should be processed as markdown
+ const slot = layout.slots.find(s => s.id === slotId);
+ const shouldProcessAsMarkdown = slot?.type === 'markdown' ||
+ (slot?.type === 'text' && isMarkdownContent(content));
+
+ const processedContent = shouldProcessAsMarkdown ?
+ renderSlideMarkdown(content, slot?.type) : content;
+
+ renderedTemplate = renderedTemplate.replace(regex, processedContent);
});
// Handle conditional blocks and clean up remaining variables
@@ -197,7 +97,7 @@ export const PresentationMode: React.FC = () => {
Error Loading Presentation
{error}
-
+ navigate(-1)} className="exit-button">
Exit Presentation Mode
@@ -210,7 +110,7 @@ export const PresentationMode: React.FC = () => {
Presentation Not Found
-
+ navigate(-1)} className="exit-button">
Exit Presentation Mode
@@ -224,7 +124,7 @@ export const PresentationMode: React.FC = () => {
No Slides Available
This presentation is empty.
-
+ navigate(-1)} className="exit-button">
Exit Presentation Mode
diff --git a/src/components/presentations/hooks/useKeyboardNavigation.ts b/src/components/presentations/hooks/useKeyboardNavigation.ts
new file mode 100644
index 0000000..a520d8f
--- /dev/null
+++ b/src/components/presentations/hooks/useKeyboardNavigation.ts
@@ -0,0 +1,71 @@
+import { useCallback, useEffect } from 'react';
+import {useNavigate} from "react-router-dom";
+
+interface KeyboardNavigationOptions {
+ totalSlides: number;
+ currentSlideIndex: number;
+ onNavigate: (slideIndex: number) => void;
+ onExit?: () => void;
+}
+
+
+export function useKeyboardNavigation({
+ totalSlides,
+ currentSlideIndex,
+ onNavigate
+ }: KeyboardNavigationOptions) {
+
+ // Keyboard navigation handler
+ const navigate = useNavigate();
+ const handleKeyPress = useCallback((event: KeyboardEvent) => {
+ if (totalSlides === 0) return;
+
+ switch (event.key) {
+ case 'ArrowRight':
+ case 'Space':
+ case 'Enter':
+ event.preventDefault();
+ onNavigate(Math.min(currentSlideIndex + 1, totalSlides - 1));
+ break;
+
+ case 'ArrowLeft':
+ event.preventDefault();
+ onNavigate(Math.max(currentSlideIndex - 1, 0));
+ break;
+
+ case 'Home':
+ event.preventDefault();
+ onNavigate(0);
+ break;
+
+ case 'End':
+ event.preventDefault();
+ onNavigate(totalSlides - 1);
+ break;
+
+ case 'Escape':
+ event.preventDefault();
+ navigate(-1);
+ break;
+
+ default:
+ // Handle number keys for direct slide navigation
+ const slideNum = parseInt(event.key);
+ if (slideNum >= 1 && slideNum <= totalSlides) {
+ event.preventDefault();
+ onNavigate(slideNum - 1);
+ }
+ break;
+ }
+ }, [totalSlides, currentSlideIndex, onNavigate]);
+
+ // Set up keyboard listeners
+ useEffect(() => {
+ document.addEventListener('keydown', handleKeyPress);
+ return () => {
+ document.removeEventListener('keydown', handleKeyPress);
+ };
+ }, [handleKeyPress]);
+
+ return { handleKeyPress };
+}
diff --git a/src/components/presentations/hooks/usePresentationLoader.ts b/src/components/presentations/hooks/usePresentationLoader.ts
new file mode 100644
index 0000000..766a224
--- /dev/null
+++ b/src/components/presentations/hooks/usePresentationLoader.ts
@@ -0,0 +1,75 @@
+import { useState, useEffect } from 'react';
+import type {Presentation} from "../../../types/presentation.ts";
+import {getPresentationById} from "../../../utils/presentationStorage.ts";
+import type {Theme} from "../../../types/theme.ts";
+import {loadTheme} from "../../../utils/themeLoader.ts";
+
+export function usePresentationLoader(presentationId: string | undefined) {
+ const [presentation, setPresentation] = useState
(null);
+ const [theme, setTheme] = useState(null);
+
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const loadPresentationAndTheme = async () => {
+ if (!presentationId) {
+ setError('No presentation ID provided');
+ setLoading(false);
+ return;
+ }
+
+ try {
+ setLoading(true);
+
+ // Load presentation
+ const presentationData = await getPresentationById(presentationId);
+ if (!presentationData) {
+ setError(`Presentation not found: ${presentationId}`);
+ return;
+ }
+
+ setPresentation(presentationData);
+
+ // Load theme
+ const themeData = await loadTheme(presentationData.metadata.theme, false);
+ if (!themeData) {
+ setError(`Theme not found: ${presentationData.metadata.theme}`);
+ return;
+ }
+
+ setTheme(themeData);
+
+ // Load theme CSS
+ const cssLink = document.getElementById('presentation-theme-css') as HTMLLinkElement;
+ const cssPath = `${themeData.basePath}/${themeData.cssFile}`;
+ if (cssLink) {
+ cssLink.href = cssPath;
+ } else {
+ const newCssLink = document.createElement('link');
+ newCssLink.id = 'presentation-theme-css';
+ newCssLink.rel = 'stylesheet';
+ newCssLink.href = cssPath;
+ document.head.appendChild(newCssLink);
+ }
+
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'Failed to load presentation');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ loadPresentationAndTheme();
+
+ // Cleanup theme CSS on unmount
+ return () => {
+ const cssLink = document.getElementById('presentation-theme-css');
+ if (cssLink) {
+ cssLink.remove();
+ }
+ };
+ }, [presentationId]);
+
+ return { presentation, theme, loading, error };
+}
diff --git a/src/components/slide-editor/ContentEditor.tsx b/src/components/slide-editor/ContentEditor.tsx
index 416b4b3..dc26602 100644
--- a/src/components/slide-editor/ContentEditor.tsx
+++ b/src/components/slide-editor/ContentEditor.tsx
@@ -45,15 +45,17 @@ export const ContentEditor: React.FC = ({
);
}
- if (slot.type === 'text' && slot.id.includes('content')) {
+ if (slot.type === 'markdown' || (slot.type === 'text' && slot.id.includes('content'))) {
return (