diff --git a/reader/src/App.jsx b/reader/src/App.jsx index 226c07a..8cdcfaf 100644 --- a/reader/src/App.jsx +++ b/reader/src/App.jsx @@ -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 { marked } from "marked"; import { resourcesInstance } from "./api.js"; @@ -187,12 +187,11 @@ export function TopicListView() { className={`flex-1 overflow-y-scroll ${selectedTopic === null ? "pb-[92px]" : "pb-[156px]"}`} > {selectedSubject.topics.map((topic, topicIdx) => ( - <> + {topicIdx === DIVIDER_AT && (
)} { itemRefs.current[topicIdx] = node; }} @@ -211,7 +210,7 @@ export function TopicListView() { {topic.title} - + ))}
diff --git a/reader/src/ResourcePage.jsx b/reader/src/ResourcePage.jsx index cf3c263..96aeffd 100644 --- a/reader/src/ResourcePage.jsx +++ b/reader/src/ResourcePage.jsx @@ -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 { resourcesInstance, apiInstance } from "./api.js"; @@ -148,6 +149,35 @@ const Content = () => { const [isSavingLoading, setIsSavingLoading] = useState(false); const [message, setMessage] = useState(null); + const htmlContent = useMemo(() => { + let fileContent = content || "**No Data!**"; + fileContent = marked.parse(fileContent); + fileContent = ` + + + + + + + + + ${fileContent} + + + `; + return fileContent; + }, [content]); + const [prevContent, setPrevContent] = useState(initialContent); if (prevContent !== initialContent) { setPrevContent(initialContent); @@ -315,14 +345,24 @@ const Content = () => { -
-