({
defaults: {
+ isFirstOpening: false,
documents: {},
},
})
+
+if (store.get('isFirstOpening')) {
+ const id = randomUUID()
+ store.set(`documents.${id}`, {
+ id,
+ title: 'Presentation Example',
+ content: `
+ <!— This is a comment! It is not displayed. It also serves to configure the slides —>
Hello Slidefy
Making your presentations easier
Code Block
You can use blocks of code easily
const productName = "Slidefy";
<!— .slide: transition=”convex" background=”aquamarine" —>
Custom Slide
You can customize the transition effect and background of each slide, using a markdown comment with the tags below:
.slide: transition="fast" backgroundColor="aquamarine"
Images and gifs
Use images or gifs via web image url:
![]()
+ `,
+ })
+ store.set('isFirstOpening', false)
+}
diff --git a/src/preload/index.ts b/src/preload/index.ts
index 53b0497..e746a2a 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -39,6 +39,13 @@ const api = {
ipcRenderer.off('new-document', callback)
}
},
+ closeDocument(callback: () => void) {
+ ipcRenderer.on('close-document', callback)
+
+ return () => {
+ ipcRenderer.off('close-document', callback)
+ }
+ },
}
// Use `contextBridge` APIs to expose Electron APIs to
diff --git a/src/renderer/.DS_Store b/src/renderer/.DS_Store
deleted file mode 100644
index c34a670..0000000
Binary files a/src/renderer/.DS_Store and /dev/null differ
diff --git a/src/renderer/src/.DS_Store b/src/renderer/src/.DS_Store
deleted file mode 100644
index 467bf10..0000000
Binary files a/src/renderer/src/.DS_Store and /dev/null differ
diff --git a/src/renderer/src/components/Editor/index.tsx b/src/renderer/src/components/Editor/index.tsx
index 2024f2a..add985e 100644
--- a/src/renderer/src/components/Editor/index.tsx
+++ b/src/renderer/src/components/Editor/index.tsx
@@ -40,6 +40,7 @@ export function Editor({ content, onContentUpdated }: EditorProps) {
const title = parsedContent?.title ?? 'Untitled'
const content = parsedContent?.content ?? ''
+
setDocument({ title })
return { title, content }
}
diff --git a/src/renderer/src/components/Header/index.tsx b/src/renderer/src/components/Header/index.tsx
index 11c170f..6606d87 100644
--- a/src/renderer/src/components/Header/index.tsx
+++ b/src/renderer/src/components/Header/index.tsx
@@ -12,7 +12,7 @@ import * as Breadcrumbs from './Breadcrumbs'
import { useLocation, useNavigate, useParams } from 'react-router-dom'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { Document } from '@shared/types/ipc'
-import { useContext } from 'react'
+import { useContext, useEffect } from 'react'
import { AppContext } from '../../contexts/AppContext'
import { ConfirmModal } from '../ConfirmModal'
@@ -64,6 +64,18 @@ export function Header({ isSidebarOpen }: HeaderProps) {
return false
}
+ useEffect(() => {
+ function closeCurrentDocument() {
+ sendToDocument()
+ }
+
+ const unsubscribe = window.api.closeDocument(closeCurrentDocument)
+
+ return () => {
+ unsubscribe()
+ }
+ }, [sendToDocument])
+
return isSidebarOpen ? (
diff --git a/src/renderer/src/modules/reveal/Deck.tsx b/src/renderer/src/modules/reveal/Deck.tsx
index 96da063..b15e644 100644
--- a/src/renderer/src/modules/reveal/Deck.tsx
+++ b/src/renderer/src/modules/reveal/Deck.tsx
@@ -5,7 +5,7 @@ import Highlight from 'reveal.js/plugin/highlight/highlight'
const Deck = ({ children }) => {
useEffect(() => {
const deck = new Reveal()
- deck.initialize({ plugins: [Highlight] })
+ deck.initialize({ plugins: [Highlight], overview: false })
})
return (
diff --git a/src/renderer/src/modules/reveal/index.tsx b/src/renderer/src/modules/reveal/index.tsx
index 06b88f7..330bfc8 100644
--- a/src/renderer/src/modules/reveal/index.tsx
+++ b/src/renderer/src/modules/reveal/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
import './styles/reveal.css'
import './styles/black.css'
import './styles/dracula.css'
@@ -7,8 +7,9 @@ import Slide from './Slide'
export function SlideShow({ markdownData }) {
const [slides, setSlides] = useState([])
+ const dataFetchedRef = useRef(false)
- const decode = (str) => {
+ const decode = (str: string) => {
const txt = document.createElement('textarea')
txt.innerHTML = str
@@ -16,19 +17,34 @@ export function SlideShow({ markdownData }) {
return txt.value
}
- const getSectionConfigs = (section, index) => {
+ const getSections = (section: string, index: number) => {
+ let slideConfigs = {}
const decodedSection = decode(section)
+ slideConfigs = getSectionConfig(decodedSection)
+
+ const sectionWithoutComments = removeSectionComments(decodedSection)
+
+ setSlides((oldArray) => [
+ ...oldArray,
+
+ {sectionWithoutComments}
+ ,
+ ])
+ }
+
+ const getSectionConfig = (decodedSection: string) => {
+ const configs = {}
+
const regexGetCommentConfigs = /(.+?)—><\/p>)/
const slideConfig = decodedSection.match(regexGetCommentConfigs)?.groups
- if (slideConfig && slideConfig?.configs.includes('.slide')) {
+
+ if (slideConfig?.configs.includes('.slide')) {
const slideConfigProrpeties = slideConfig?.configs
.replace(' .slide:', '')
.trim()
const splitedProperties = slideConfigProrpeties?.split(' ')
- const slideProperties = {}
- let sectionWithoutConfig = ''
if (splitedProperties.length > 0) {
splitedProperties.forEach((p) => {
@@ -36,35 +52,40 @@ export function SlideShow({ markdownData }) {
const key = keyValue[0].replace(/[”"'“]/gi, '')
const value = keyValue[1].replace(/[”"'“]/gi, '')
- slideProperties[key] = value
+ configs[key] = value
})
-
- sectionWithoutConfig = decodedSection.replace(
- /(
<\/p>)/,
- '',
- )
}
-
- return (
-
- {sectionWithoutConfig}
-
- )
}
- return {section}
+ return configs
+ }
+
+ const removeSectionComments = (decodedSection: string) => {
+ const sectionWithoutConfig = decodedSection.replace(
+ /(
<\/p>)/i,
+ '',
+ )
+
+ return sectionWithoutConfig
}
useEffect(() => {
- const splitedSections = markdownData.content?.split('
')
+ if (dataFetchedRef.current) return
+ dataFetchedRef.current = true
+
+ const createSlides = () => {
+ const splitedSections = markdownData.content?.split('
')
+
+ splitedSections?.forEach((item, index) => {
+ getSections(item, index)
+ })
+ }
- splitedSections?.forEach((item, index) => {
- setSlides((oldArray) => [...oldArray, getSectionConfigs(item, index)])
- })
- }, [markdownData.content])
+ createSlides()
+ })
return (
- {slides}
+ {slides && {slides}}
)
}
diff --git a/src/renderer/src/pages/Presentation.tsx b/src/renderer/src/pages/Presentation.tsx
index af3e4c7..abb9853 100644
--- a/src/renderer/src/pages/Presentation.tsx
+++ b/src/renderer/src/pages/Presentation.tsx
@@ -3,12 +3,15 @@ import { useQuery } from '@tanstack/react-query'
import { useState } from 'react'
import { SlideShow } from '../modules/reveal'
+interface IMarkdownData {
+ id: string
+ content: string
+ title: string
+}
+
export function Presentation() {
const { id } = useParams<{ id: string }>()
- const [markdownData, setMarkdownData] = useState(
- {} as { id: string; content: string; title: string },
- )
-
+ const [markdownData, setMarkdownData] = useState(null)
useQuery(
['document', id],
async () => {
@@ -21,7 +24,7 @@ export function Presentation() {
return (
-
+ {markdownData && }
)
}
diff --git a/src/renderer/src/pages/document.tsx b/src/renderer/src/pages/document.tsx
index a00954f..5e3f17f 100644
--- a/src/renderer/src/pages/document.tsx
+++ b/src/renderer/src/pages/document.tsx
@@ -39,7 +39,7 @@ export function Document() {
const initialContent = useMemo(() => {
if (data) {
- return `${data.title}
${data.content ?? ''}`
+ return `${data.title}
${data.content ?? ''}`
}
return ''
}, [data])
diff --git a/src/shared/constants/ipc.ts b/src/shared/constants/ipc.ts
index e3a8668..1666b22 100644
--- a/src/shared/constants/ipc.ts
+++ b/src/shared/constants/ipc.ts
@@ -5,5 +5,6 @@ export const IPC = {
CREATE: 'documents: create',
SAVE: 'documents: save',
DELETE: 'documents: delete',
+ CLOSE: 'documents: close',
},
}