Merge pull request #1 from fsrocha-dev/fixex

Fixes

.gitignore

@@ -2,4 +2,4 @@ node_modules
 dist
 out
 *.log*
-.DS_Store
+*.DS_Store

README.md

@@ -51,6 +51,12 @@ After running the app, you can create a new document in which you must follow th
       <td>Open search document bar</td>
       <td>Yes</td>
     </tr>
+    <tr>
+      <td><kbd>esc</kbd></td>
+      <td><kbd>esc</kbd></td>
+      <td>Close current presentation</td>
+      <td>Yes</td>
+    </tr>
   </tbody>
 </table>
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "slidefy",
   "productName": "Slidefy",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A slideshow focused on reading markdown files.",
   "main": "./out/main/index.js",
   "author": "frankrocha.dev",

src/main/index.ts

@@ -11,8 +11,8 @@ import './store'
 function createWindow(): void {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
-    width: 900,
-    height: 670,
+    width: 1024,
+    height: 900,
     center: true,
     show: false,
     autoHideMenuBar: true,

src/main/shortcuts.ts

@@ -5,6 +5,9 @@ export function createShortcuts(window: BrowserWindow) {
     globalShortcut.register('CommandOrControl+N', () => {
       window.webContents.send('new-document')
     })
+    globalShortcut.register('Escape', () => {
+      window.webContents.send('close-document')
+    })
   })
 
   app.on('browser-window-blur', () => {

src/main/store.ts

@@ -1,12 +1,27 @@
 import Store from 'electron-store'
 import { Document } from '@shared/types/ipc'
+import { randomUUID } from 'node:crypto'
 
 interface StoreType {
+  isFirstOpening: boolean
   documents: Record<string, Document>
 }
 
 export const store = new Store<StoreType>({
   defaults: {
+    isFirstOpening: false,
     documents: {},
   },
 })
+
+if (store.get('isFirstOpening')) {
+  const id = randomUUID()
+  store.set(`documents.${id}`, {
+    id,
+    title: 'Presentation Example',
+    content: `
+    <p>&lt;!— This is a comment! It is not displayed. It also serves to configure the slides —&gt;</p><h1>Hello Slidefy</h1><blockquote><p>Making your presentations easier</p></blockquote><hr><h1>Code Block</h1><p>You can use blocks of code easily</p><pre><code class="language-javascript">const productName = "Slidefy";</code></pre><hr><p>&lt;!— .slide: transition=”convex" background=”aquamarine" —&gt;</p><h1>Custom Slide</h1><p>You can customize the transition effect and background of each slide, using a markdown comment with the tags below:</p><pre><code class="language-javascript">.slide: transition="fast" backgroundColor="aquamarine"</code></pre><hr><h1>Images and gifs</h1><p>Use images or gifs via web image url:</p><p><img class="object-scale-down w-6/12" src="https://source.unsplash.com/8xznAGy4HcY/800x400" alt="teste" contenteditable="false" draggable="true"><img class="ProseMirror-separator" alt=""><br class="ProseMirror-trailingBreak"></p>
+    `,
+  })
+  store.set('isFirstOpening', false)
+}

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

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 }
   }

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 ? (
     <div
       id="header"

src/renderer/src/components/SearchBar/index.tsx

@@ -44,7 +44,7 @@ export function SearchBar({ open, onOpenChange }: SearchBarProps) {
         <MagnifyingGlass className="w-5 h-5" />
         <Command.Input
           autoFocus
-          placeholder="Buscar documentos..."
+          placeholder="Search documents..."
           className="w-full bg-transparent focus:outline-none text-sm text-slidefy-50 placeholder:text-slidefy-200"
         />
       </div>

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 (

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,64 +7,85 @@ import Slide from './Slide'
 
 export function SlideShow({ markdownData }) {
   const [slides, setSlides] = useState<any[]>([])
+  const dataFetchedRef = useRef(false)
 
-  const decode = (str) => {
+  const decode = (str: string) => {
     const txt = document.createElement('textarea')
 
     txt.innerHTML = str
 
     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,
+      <Slide {...slideConfigs} key={index}>
+        {sectionWithoutComments}
+      </Slide>,
+    ])
+  }
+
+  const getSectionConfig = (decodedSection: string) => {
+    const configs = {}
+
     const regexGetCommentConfigs = /(<p><!—(?<configs>.+?)—><\/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) => {
           const keyValue = p.split('=')
           const key = keyValue[0].replace(/[”"'“]/gi, '')
           const value = keyValue[1].replace(/[”"'“]/gi, '')
 
-          slideProperties[key] = value
+          configs[key] = value
         })
-
-        sectionWithoutConfig = decodedSection.replace(
-          /(<p><!—(.+?)—><\/p>)/,
-          '',
-        )
       }
-
-      return (
-        <Slide {...slideProperties} key={index}>
-          {sectionWithoutConfig}
-        </Slide>
-      )
     }
-    return <Slide key={index}>{section}</Slide>
+    return configs
+  }
+
+  const removeSectionComments = (decodedSection: string) => {
+    const sectionWithoutConfig = decodedSection.replace(
+      /(<p><!— .slide:(.+?)—><\/p>)/i,
+      '',
+    )
+
+    return sectionWithoutConfig
   }
 
   useEffect(() => {
-    const splitedSections = markdownData.content?.split('<hr>')
+    if (dataFetchedRef.current) return
+    dataFetchedRef.current = true
+
+    const createSlides = () => {
+      const splitedSections = markdownData.content?.split('<hr>')
+
+      splitedSections?.forEach((item, index) => {
+        getSections(item, index)
+      })
+    }
 
-    splitedSections?.forEach((item, index) => {
-      setSlides((oldArray) => [...oldArray, getSectionConfigs(item, index)])
-    })
-  }, [markdownData.content])
+    createSlides()
+  })
 
   return (
     <main className="flex gap-8 h-full w-full">
-      <Deck>{slides}</Deck>
+      {slides && <Deck>{slides}</Deck>}
     </main>
   )
 }

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<IMarkdownData | null>(null)
   useQuery(
     ['document', id],
     async () => {
@@ -21,7 +24,7 @@ export function Presentation() {
 
   return (
     <main className="flex gap-8 h-full w-full">
-      <SlideShow markdownData={markdownData} />
+      {markdownData && <SlideShow markdownData={markdownData} />}
     </main>
   )
 }

src/renderer/src/pages/document.tsx

@@ -39,7 +39,7 @@ export function Document() {
 
   const initialContent = useMemo(() => {
     if (data) {
-      return `<h1>${data.title}</h1>${data.content ?? '<p></p>'}`
+      return `<h1>${data.title}</h1>${data.content ?? ''}`
     }
     return ''
   }, [data])

src/shared/constants/ipc.ts

@@ -5,5 +5,6 @@ export const IPC = {
     CREATE: 'documents: create',
     SAVE: 'documents: save',
     DELETE: 'documents: delete',
+    CLOSE: 'documents: close',
   },
 }