tomas.mirchev/med-notes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Tomas Mirchev 2025-06-29 15:19:17 +00:00
parent 37995ede5c
commit 48e278b1c9
2 changed files with 52 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
reader/src/App.jsx
View File

@ -1,4 +1,4 @@
import { StrictMode, useLayoutEffect, useRef, useState, useEffect, useMemo } from "react"; import { StrictMode, Fragment, useLayoutEffect, useRef, useState, useEffect, useMemo } from "react";
import { Navigate, BrowserRouter, Link, Outlet, Route, Routes } from "react-router"; import { Navigate, BrowserRouter, Link, Outlet, Route, Routes } from "react-router";
import { marked } from "marked"; import { marked } from "marked";
import { resourcesInstance } from "./api.js"; import { resourcesInstance } from "./api.js";
@ -187,12 +187,11 @@ export function TopicListView() {
className={`flex-1 overflow-y-scroll ${selectedTopic === null ? "pb-[92px]" : "pb-[156px]"}`} className={`flex-1 overflow-y-scroll ${selectedTopic === null ? "pb-[92px]" : "pb-[156px]"}`}
> >
{selectedSubject.topics.map((topic, topicIdx) => ( {selectedSubject.topics.map((topic, topicIdx) => (
<> <Fragment key={topic.id}>
{topicIdx === DIVIDER_AT && ( {topicIdx === DIVIDER_AT && (
<hr className="my-4 border-t border-dotted border-gray-400" /> <hr className="my-4 border-t border-dotted border-gray-400" />
)} )}
<Link <Link
key={topic.id}
ref={(node) => { ref={(node) => {
itemRefs.current[topicIdx] = node; itemRefs.current[topicIdx] = node;
}} }}
@ -211,7 +210,7 @@ export function TopicListView() {
{topic.title} {topic.title}
</span> </span>
</Link> </Link>
</> </Fragment>
))} ))}
</div> </div>
<div className="absolute bottom-0 sm:p-4 px-2 py-0 w-full flex flex-col"> <div className="absolute bottom-0 sm:p-4 px-2 py-0 w-full flex flex-col">

42
reader/src/ResourcePage.jsx
View File

@ -1,4 +1,5 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect, useMemo } from "react";
import { marked } from "marked";
import { useStore } from "./store.js"; import { useStore } from "./store.js";
import { resourcesInstance, apiInstance } from "./api.js"; import { resourcesInstance, apiInstance } from "./api.js";
@ -148,6 +149,35 @@ const Content = () => {
const [isSavingLoading, setIsSavingLoading] = useState(false); const [isSavingLoading, setIsSavingLoading] = useState(false);
const [message, setMessage] = useState(null); const [message, setMessage] = useState(null);
const htmlContent = useMemo(() => {
let fileContent = content || "**No Data!**";
fileContent = marked.parse(fileContent);
fileContent = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
line-height: 1.5;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
padding: 0 12px 40px;
}
</style>
</head>
<body>
${fileContent}
</body>
</html>
`;
return fileContent;
}, [content]);
const [prevContent, setPrevContent] = useState(initialContent); const [prevContent, setPrevContent] = useState(initialContent);
if (prevContent !== initialContent) { if (prevContent !== initialContent) {
setPrevContent(initialContent); setPrevContent(initialContent);
@ -315,6 +345,7 @@ const Content = () => {
<label htmlFor="content" className="block text-sm font-medium text-gray-700 mb-2"> <label htmlFor="content" className="block text-sm font-medium text-gray-700 mb-2">
Markdown съдържание: Markdown съдържание:
</label> </label>
<div className="flex-1 h-full flex space-x-2">
<div className="flex-1 flex flex-col"> <div className="flex-1 flex flex-col">
<textarea <textarea
id="content" id="content"
@ -324,6 +355,15 @@ const Content = () => {
placeholder="Въведете вашето Markdown съдържание тук..." placeholder="Въведете вашето Markdown съдържание тук..."
/> />
</div> </div>
<div className="flex-1 w-full min-h-full overflow-hidden px-3 py-2 border border-gray-300 rounded-md">
<iframe
srcDoc={htmlContent}
title="MD Content"
className="w-full h-full border-0"
allow="fullscreen"
/>
</div>
</div>
</div> </div>
{/* Bottom Actions */} {/* Bottom Actions */}