-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[FEATURE] Presentation from notes (#395)
#395 * got basic markdown rendering working * got basic markdown rendering working with node content * Add Presenter component for Notes slides, UI Changes * Remove multiple Reveal instances on dom, show Presenter on Overlay instead of route * Vertical sections within slides * Webembed added * Add Slide section creator using *** * Code block support basic added * Add Presenter in Public Notes, Use query based flag for presentation * Feature Flag Support * changeset added --------- Co-authored-by: Dinesh Singh <[email protected]>
- Loading branch information
1 parent
375a4cd
commit 9ce693a
Showing
32 changed files
with
897 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| 'mexit': patch | ||
| 'mexit-webapp': patch | ||
| --- | ||
|
|
||
| Presentation from Notes! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import 'reveal.js/dist/reveal.css' | ||
|
|
||
| import { useEffect, useRef, useState } from 'react' | ||
| import { useParams, useSearchParams } from 'react-router-dom' | ||
|
|
||
| import { usePlateEditorRef } from '@udecode/plate' | ||
| import Markdown from 'markdown-to-jsx' | ||
| import Reveal from 'reveal.js' | ||
|
|
||
| import { tinykeys } from '@workduck-io/tinykeys' | ||
|
|
||
| import { ELEMENT_PARAGRAPH, FeatureFlags, SECTION_SEPARATOR, SLIDE_SEPARATOR, useContentStore } from '@mexit/core' | ||
| import { FeatureFlag } from '@mexit/shared' | ||
|
|
||
| import parseToMarkdown from '../../Editor/utils' | ||
|
|
||
| import { PresenterContainer } from './styled' | ||
|
|
||
| const Presenter = () => { | ||
| const [markdown, setMarkdown] = useState('#Loading...') | ||
| const presenterRef = useRef<HTMLDivElement>(null) | ||
|
|
||
| const noteId = useParams().nodeId | ||
| // * Get query parameter present from url using react-router-dom v6 | ||
| const [searchParams, setSearchParams] = useSearchParams() | ||
| const isPresenting = searchParams.get('present') === 'true' | ||
|
|
||
| const editor = usePlateEditorRef(noteId) | ||
|
|
||
| const goFullScreen = (element: any) => { | ||
| if (element.requestFullscreen) { | ||
| element.requestFullscreen() | ||
| } else if (element.webkitRequestFullscreen) { | ||
| element.webkitRequestFullscreen() | ||
| } else if (element.msRequestFullscreen) { | ||
| element.msRequestFullscreen() | ||
| } | ||
| } | ||
|
|
||
| const setMarkdownFromEditor = () => { | ||
| const content = editor?.children ?? useContentStore.getState().getContent(noteId)?.content | ||
| const markdownContent = parseToMarkdown({ children: content, type: ELEMENT_PARAGRAPH }) | ||
| setMarkdown(markdownContent) | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| if (isPresenting) { | ||
| Reveal.initialize().then(() => { | ||
| setMarkdownFromEditor() | ||
| }) | ||
|
|
||
| const unsubscribe = tinykeys(window, { | ||
| Escape: (e) => { | ||
| setSearchParams() | ||
|
|
||
| // * If overview is open, close it | ||
| if (Reveal.isOverview()) { | ||
| Reveal.toggleOverview() | ||
| } | ||
| } | ||
| }) | ||
|
|
||
| return () => { | ||
| unsubscribe() | ||
| setSearchParams() | ||
|
|
||
| // * Destroy reveal instance, as it creates multiple elements in the DOM | ||
| Reveal.destroy() | ||
| } | ||
| } | ||
| }, [isPresenting, noteId]) | ||
|
|
||
| if (!markdown?.length) return | ||
|
|
||
| return ( | ||
| <PresenterContainer $isPresenting={isPresenting} className="reveal" ref={presenterRef}> | ||
| <div className="slides"> | ||
| {markdown?.split(SLIDE_SEPARATOR)?.map((slideContent, idx) => ( | ||
| <section key={idx}> | ||
| {slideContent?.split(SECTION_SEPARATOR)?.map((sectionContent, idxN) => ( | ||
| <section key={`${idx}_${idxN}`}> | ||
| <Markdown>{sectionContent}</Markdown> | ||
| </section> | ||
| ))} | ||
| </section> | ||
| ))} | ||
| </div> | ||
| </PresenterContainer> | ||
| ) | ||
| } | ||
|
|
||
| const PresentationFeature = () => ( | ||
| <FeatureFlag name={FeatureFlags.PRESENTATION}> | ||
| <Presenter /> | ||
| </FeatureFlag> | ||
| ) | ||
|
|
||
| export default PresentationFeature |
Oops, something went wrong.