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

54
src/App.tsx
View File

@@ -887,7 +887,7 @@ export default function App() {
</div>
<div className="editor__textarea-wrap">
{showLineNumbers ? (
{showLineNumbersActive ? (
<div className="line-measure" ref={measureRef} aria-hidden="true">
{lines.map((line, index) => (
<div key={index} className="line-measure__line">
@@ -896,7 +896,7 @@ export default function App() {
))}
</div>
) : null}
{showLineNumbers ? (
{showLineNumbersActive ? (
<div className="line-numbers" ref={lineNumbersRef}>
{lineNumbers.map((line, index) => (
<div
@@ -909,22 +909,48 @@ export default function App() {
))}
</div>
) : null}
<textarea
ref={textareaRef}
className="editor__textarea"
value={body}
onChange={(event) => setBody(event.target.value)}
onScroll={handleTextareaScroll}
placeholder="Write your text here…"
readOnly={isViewingHistory}
/>
{markdownPreview ? (
<div
className="markdown-preview md-root"
dangerouslySetInnerHTML={{ __html: markdownToHTML(body) }}
/>
) : (
<textarea
ref={textareaRef}
className="editor__textarea"
value={body}
onChange={(event) => setBody(event.target.value)}
onScroll={handleTextareaScroll}
placeholder="Write your text here…"
readOnly={isViewingHistory}
/>
)}
</div>
<div className="editor__footer">
{hasText ? (
<button className="button" onClick={handleExportText}>
Export Text
</button>
<>
<button className="button" onClick={handleExportText}>
Export Text
</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}
{hasDraft && !isViewingHistory ? (
<button