giers10/textDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add markdown preview and export options in App component

Browse Source
This commit is contained in:
Victor Giers
2026-01-31 14:19:59 +01:00
parent bd6ffe6d41
commit 749fea672c
1 changed files with 40 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/App.tsx
View File

@@ -887,7 +887,7 @@ export default function App() {
</div> </div>
<div className="editor__textarea-wrap"> <div className="editor__textarea-wrap">
{showLineNumbers ? ( {showLineNumbersActive ? (
<div className="line-measure" ref={measureRef} aria-hidden="true"> <div className="line-measure" ref={measureRef} aria-hidden="true">
{lines.map((line, index) => ( {lines.map((line, index) => (
<div key={index} className="line-measure__line"> <div key={index} className="line-measure__line">
@@ -896,7 +896,7 @@ export default function App() {
))} ))}
</div> </div>
) : null} ) : null}
{showLineNumbers ? ( {showLineNumbersActive ? (
<div className="line-numbers" ref={lineNumbersRef}> <div className="line-numbers" ref={lineNumbersRef}>
{lineNumbers.map((line, index) => ( {lineNumbers.map((line, index) => (
<div <div
@@ -909,6 +909,12 @@ export default function App() {
))} ))}
</div> </div>
) : null} ) : null}
{markdownPreview ? (
<div
className="markdown-preview md-root"
dangerouslySetInnerHTML={{ __html: markdownToHTML(body) }}
/>
) : (
<textarea <textarea
ref={textareaRef} ref={textareaRef}
className="editor__textarea" className="editor__textarea"
@@ -918,13 +924,33 @@ export default function App() {
placeholder="Write your text here…" placeholder="Write your text here…"
readOnly={isViewingHistory} readOnly={isViewingHistory}
/> />
)}
</div> </div>
<div className="editor__footer"> <div className="editor__footer">
{hasText ? ( {hasText ? (
<>
<button className="button" onClick={handleExportText}> <button className="button" onClick={handleExportText}>
Export Text Export Text
</button> </button>
{markdownPreview ? (
<>
<button className="button" type="button">
Export PDF
</button>
<button className="button" type="button">
Print
</button>
</>
) : null}
<button
className="button"
type="button"
onClick={() => setMarkdownPreview((value) => !value)}
>
{markdownPreview ? "Edit" : "Preview Markdown"}
</button>
</>
) : null} ) : null}
{hasDraft && !isViewingHistory ? ( {hasDraft && !isViewingHistory ? (
<button <button