Added more markdown syntax, and added portals.

Frontend/src/Components/PreviewPane.jsx

@@ -6,13 +6,23 @@ import { html } from "@codemirror/lang-html";
 import { json } from "@codemirror/lang-json";
 import MarkdownIt from "markdown-it";
 import MarkdownItTaskLists from "markdown-it-task-lists";
+import MarkdownItMark from "markdown-it-mark";
+import MarkdownItFootnote from "markdown-it-footnote";
 
-import { FetchBlame, FetchFile, GetAvatarUrl, GetFileUrl, GetRawFileUrl, SaveFile } from "../Api.js";
+import {
+  FetchBlame,
+  FetchFile,
+  FetchResolvedFile,
+  GetAvatarUrl,
+  GetFileUrl,
+  GetRawFileUrl,
+  SaveFile,
+} from "../Api.js";
 
-const MarkdownRenderer = new MarkdownIt({ breaks: true }).use(MarkdownItTaskLists, {
-  enabled: true,
-  label: true,
-});
+const MarkdownRenderer = new MarkdownIt({ breaks: true })
+  .use(MarkdownItTaskLists, { enabled: true, label: true })
+  .use(MarkdownItMark)
+  .use(MarkdownItFootnote);
 
 const DefaultImageRenderer =
   MarkdownRenderer.renderer.rules.image ||
@@ -162,11 +172,18 @@ export default function PreviewPane({
   StickyToolbar,
 }) {
   const [Content, SetContent] = useState("");
+  const [ResolvedContent, SetResolvedContent] = useState("");
   const [IsEditing, SetIsEditing] = useState(false);
   const [IsSaving, SetIsSaving] = useState(false);
   const [SaveError, SetSaveError] = useState(null);
   const [BlameMap, SetBlameMap] = useState({});
 
+  function RefreshResolvedContent() {
+    FetchResolvedFile(RootName, FilePath)
+      .then((Result) => SetResolvedContent(Result.Content))
+      .catch(() => {});
+  }
+
   useEffect(() => {
     SetIsEditing(false);
     SetSaveError(null);
@@ -174,6 +191,7 @@ export default function PreviewPane({
 
     if (FilePath && TextTypes.includes(FileType)) {
       FetchFile(RootName, FilePath).then(SetContent);
+      RefreshResolvedContent();
 
       if (ShowGitBlame) {
         FetchBlame(RootName, FilePath)
@@ -194,6 +212,7 @@ export default function PreviewPane({
     SetSaveError(null);
     try {
       await SaveFile(RootName, FilePath, Content);
+      RefreshResolvedContent();
       if (ShowGitBlame) {
         FetchBlame(RootName, FilePath)
           .then(SetBlameMap)
@@ -257,7 +276,7 @@ export default function PreviewPane({
           className="MarkdownBody"
           onClick={HandleMarkdownClick}
           dangerouslySetInnerHTML={{
-            __html: MarkdownRenderer.render(Content, {
+            __html: MarkdownRenderer.render(ResolvedContent, {
               ResolveImageSrc: (Src) => {
                 const ResolvedPath = ResolveRelativeLink(FilePath, Src);
                 return ResolvedPath === null ? Src : GetFileUrl(RootName, ResolvedPath);
@@ -275,7 +294,7 @@ export default function PreviewPane({
         <div className={ToolbarClass}>
           <button onClick={() => SetIsEditing(true)}>Edit</button>
         </div>
-        <pre className="TextBody">{Content}</pre>
+        <pre className="TextBody">{ResolvedContent}</pre>
       </div>
     );
   }