diff --git a/src/bookmarks.tsx b/src/bookmarks.tsx
index 4d5171cd..ce24ff3e 100644
--- a/src/bookmarks.tsx
+++ b/src/bookmarks.tsx
@@ -9,26 +9,7 @@ import {If, For, When, Otherwise, Choose} from "tsx-control-statements/component
import cn from "classnames";
import type {BookmarkType} from "./types";
import {GlobalModel, GlobalCommandRunner} from "./model";
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import {CmdStrCode} from "./elements";
-
-function LinkRenderer(props : any) : any {
- let newUrl = "https://extern?" + encodeURIComponent(props.href);
- return {props.children}
-}
-
-function HeaderRenderer(props : any, hnum : number) : any {
- return (
-
{props.children}
- );
-}
-
-function CodeRenderer(props : any) : any {
- return (
- {props.children}
- );
-}
+import {CmdStrCode, Markdown} from "./elements";
@mobxReact.observer
class Bookmark extends React.Component<{bookmark : BookmarkType}, {}> {
@@ -102,16 +83,6 @@ class Bookmark extends React.Component<{bookmark : BookmarkType}, {}> {
let model = GlobalModel.bookmarksModel;
let isSelected = (model.activeBookmark.get() == bm.bookmarkid);
let markdown = bm.description ?? "";
- let markdownComponents = {
- a: LinkRenderer,
- h1: (props) => HeaderRenderer(props, 1),
- h2: (props) => HeaderRenderer(props, 2),
- h3: (props) => HeaderRenderer(props, 3),
- h4: (props) => HeaderRenderer(props, 4),
- h5: (props) => HeaderRenderer(props, 5),
- h6: (props) => HeaderRenderer(props, 6),
- code: CodeRenderer,
- };
let hasDesc = markdown != "";
let isEditing = (model.editingBookmark.get() == bm.bookmarkid);
let isCopied = mobx.computed(() => (model.copiedIndicator.get() == bm.bookmarkid)).get();
@@ -150,9 +121,7 @@ class Bookmark extends React.Component<{bookmark : BookmarkType}, {}> {
{bm.bookmarkid.substr(0, 8)}
diff --git a/src/elements.tsx b/src/elements.tsx
index bf5c561b..d7246b1b 100644
--- a/src/elements.tsx
+++ b/src/elements.tsx
@@ -3,6 +3,8 @@ import * as mobxReact from "mobx-react";
import * as mobx from "mobx";
import {sprintf} from "sprintf-js";
import {boundMethod} from "autobind-decorator";
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
import cn from "classnames";
import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
import type {RemoteType} from "./types";
@@ -194,4 +196,43 @@ class InfoMessage extends React.Component<{width : number, children : React.Reac
}
}
-export {CmdStrCode, Toggle, renderCmdText, RemoteStatusLight, InlineSettingsTextEdit, InfoMessage};
+function LinkRenderer(props : any) : any {
+ let newUrl = "https://extern?" + encodeURIComponent(props.href);
+ return {props.children}
+}
+
+function HeaderRenderer(props : any, hnum : number) : any {
+ return (
+ {props.children}
+ );
+}
+
+function CodeRenderer(props : any) : any {
+ return (
+ {props.children}
+ );
+}
+
+@mobxReact.observer
+class Markdown extends React.Component<{text : string, style? : any, extraClassName? : string}, {}> {
+ render() {
+ let text = this.props.text;
+ let markdownComponents = {
+ a: LinkRenderer,
+ h1: (props) => HeaderRenderer(props, 1),
+ h2: (props) => HeaderRenderer(props, 2),
+ h3: (props) => HeaderRenderer(props, 3),
+ h4: (props) => HeaderRenderer(props, 4),
+ h5: (props) => HeaderRenderer(props, 5),
+ h6: (props) => HeaderRenderer(props, 6),
+ code: CodeRenderer,
+ };
+ return (
+
+
+
+ );
+ }
+}
+
+export {CmdStrCode, Toggle, renderCmdText, RemoteStatusLight, InlineSettingsTextEdit, InfoMessage, Markdown};
diff --git a/src/main.tsx b/src/main.tsx
index 8cc59f2a..b6ed35a1 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -14,14 +14,12 @@ import localizedFormat from 'dayjs/plugin/localizedFormat';
import {GlobalModel, GlobalCommandRunner, Session, Cmd, ScreenLines, Screen, riToRPtr, TabColors, RemoteColors} from "./model";
import {windowWidthToCols, windowHeightToRows, termHeightFromRows, termWidthFromCols, getMonoFontSize} from "./textmeasure";
import {isModKeyPress, boundInt, sortAndFilterRemotes} from "./util";
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
import {BookmarksView} from "./bookmarks";
import {HistoryView} from "./history";
import {Line, Prompt} from "./linecomps";
import {ScreenSettingsModal, SessionSettingsModal, LineSettingsModal, ClientSettingsModal} from "./settings";
import {RemotesModal} from "./remotes";
-import {renderCmdText, RemoteStatusLight} from "./elements";
+import {renderCmdText, RemoteStatusLight, Markdown} from "./elements";
import {LinesView} from "./linesview";
dayjs.extend(localizedFormat)
@@ -1774,9 +1772,14 @@ class AlertModal extends React.Component<{}, {}> {
-
+
+
+
+
+
+