Added more markdown syntax, and added portals.

Frontend/src/Api.js

@@ -141,6 +141,11 @@ export function FetchFile(RootName, RelativePath) {
   return FetchText(`/file?${Params}`);
 }
 
+export function FetchResolvedFile(RootName, RelativePath) {
+  const Params = new URLSearchParams({ Root: RootName, Path: RelativePath });
+  return FetchJson(`/file/resolved?${Params}`);
+}
+
 export function GetFileUrl(RootName, RelativePath) {
   const Params = new URLSearchParams({ Root: RootName, Path: RelativePath });
   return `${ApiBase}/file?${Params}`;

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>
     );
   }

Frontend/src/Styles/Theme.css

@@ -413,6 +413,43 @@ img,
   gap: 6px;
 }
 
+.MarkdownBody mark {
+  background: var(--Yellow);
+  color: var(--Black);
+  border-radius: 2px;
+  padding: 0 2px;
+}
+
+.MarkdownBody table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 12px 0;
+}
+
+.MarkdownBody th,
+.MarkdownBody td {
+  border: 1px solid var(--Border);
+  padding: 6px 10px;
+  text-align: left;
+}
+
+.MarkdownBody th {
+  background: var(--SurfaceAlt);
+}
+
+.MarkdownBody .footnotes {
+  margin-top: 24px;
+  padding-top: 12px;
+  border-top: 1px solid var(--Border);
+  font-size: 0.9em;
+  color: var(--TextMuted);
+}
+
+.MarkdownBody .footnote-ref a,
+.MarkdownBody .footnote-backref {
+  color: var(--Blue);
+}
+
 .PreviewText {
   flex: 1;
   min-width: 0;