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<{}, {}> { -
-

{message.message}

-
+ + + + +
+

{message.message}

+
+