@dbcdk/react-components 0.0.208 → 0.0.210

package/dist/components/forms/markdown-editor/MarkdownViewer.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+export interface MarkdownViewerProps {
+    markdown: string;
+    emptyMessage?: ReactNode;
+    /**
+     * Added to every heading level, so Markdown headings fit into the surrounding page outline,
+     * e.g. `1` renders `#` as `<h2>`. Levels stop at `<h6>`.
+     */
+    headingOffset?: number;
+    /**
+     * Open links in a new tab, with `rel="noopener noreferrer"` and visually hidden text announcing
+     * it. `mailto:` and `tel:` links always open normally.
+     */
+    openLinksInNewTab?: boolean;
+    /** Visually hidden text added to links that open in a new tab. */
+    newTabLabel?: string;
+    className?: string;
+}
+/**
+ * Renders Markdown the same way as `new MarkdownIt()`, as React elements without raw HTML.
+ * Images render as their alt text, and links open in a new tab unless `openLinksInNewTab` is false.
+ */
+export declare function MarkdownViewer({ markdown, emptyMessage, headingOffset, openLinksInNewTab, newTabLabel, className, }: MarkdownViewerProps): React.ReactElement;
+export declare namespace MarkdownViewer {
+    var displayName: string;
+}

package/dist/components/forms/markdown-editor/MarkdownViewer.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { renderMarkdown } from './markdown.utils';
+import styles from './MarkdownViewer.module.css';
+
+function MarkdownViewer({
+  markdown,
+  emptyMessage,
+  headingOffset,
+  openLinksInNewTab = true,
+  newTabLabel = "(\xE5bner i en ny fane)",
+  className
+}) {
+  const isEmpty = markdown.trim().length === 0;
+  return /* @__PURE__ */ jsx("div", { className: [styles.viewer, className].filter(Boolean).join(" "), children: isEmpty ? emptyMessage !== void 0 ? /* @__PURE__ */ jsx("p", { className: styles.emptyMessage, children: emptyMessage }) : null : renderMarkdown(markdown, {
+    headingOffset,
+    openLinksInNewTab,
+    // The space is hidden too, so links don't end in a visible underlined gap.
+    newTabHint: /* @__PURE__ */ jsx("span", { className: styles.visuallyHidden, children: ` ${newTabLabel}` })
+  }) });
+}
+MarkdownViewer.displayName = "MarkdownViewer";
+
+export { MarkdownViewer };

package/dist/components/forms/markdown-editor/MarkdownViewer.module.css

@@ -0,0 +1,97 @@
+.viewer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  min-width: 0;
+  color: var(--color-fg-default);
+  overflow-wrap: anywhere;
+}
+
+.viewer > *,
+.viewer li > *,
+.viewer blockquote > * {
+  margin: 0;
+}
+
+.viewer ul,
+.viewer ol {
+  padding-inline-start: var(--spacing-lg);
+}
+
+.viewer li + li,
+.viewer li > * + * {
+  margin-block-start: var(--spacing-xxs);
+}
+
+.viewer blockquote {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  padding-inline-start: var(--spacing-md);
+  border-inline-start: var(--border-width-thick) solid var(--color-border-default);
+  color: var(--color-fg-muted);
+}
+
+.viewer code {
+  padding: 0 var(--spacing-xxs);
+  border-radius: var(--border-radius-sm);
+  font-family: var(--font-family-mono);
+  font-size: 0.9em;
+  background: var(--color-bg-surface-subtle);
+}
+
+.viewer pre {
+  overflow-x: auto;
+  padding: var(--spacing-sm);
+  border-radius: var(--border-radius-default);
+  background: var(--color-bg-surface-subtle);
+}
+
+.viewer pre code {
+  padding: 0;
+  background: transparent;
+}
+
+.viewer hr {
+  width: 100%;
+  border: 0;
+  border-block-start: var(--border-width-thin) solid var(--color-border-default);
+}
+
+/* As wide as its content, scrolling instead of overflowing the viewer. */
+.viewer table {
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+}
+
+.viewer th,
+.viewer td {
+  padding: var(--spacing-xxs) var(--spacing-xs);
+  border: var(--border-width-thin) solid var(--color-border-default);
+}
+
+.emptyMessage {
+  color: var(--color-fg-subtle);
+  font-style: italic;
+}
+
+.viewer a {
+  color: var(--color-link);
+  text-decoration: underline;
+}
+
+.viewer a:hover {
+  color: var(--color-link-hover);
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/dist/components/forms/markdown-editor/markdown.utils.cjs

@@ -0,0 +1,325 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var MarkdownIt = require('markdown-it');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var MarkdownIt__default = /*#__PURE__*/_interopDefault(MarkdownIt);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const ESCAPE_PATTERN = /\\[!-/:-@[-`{-~]/;
+const LINK_PATTERN = /\[((?:\\[^\n]|[^\]\\\n])+)\]\(((?:[^()\s]|\([^()\s]*\))+)\)/;
+const escapeRegExp = (text) => text.replace(/[.*+?^$()|[\]\\{}]/g, "\\$&");
+const linkPattern = (urlPlaceholder) => new RegExp(LINK_PATTERN.source.replace(/\)\\\)$/, `|${escapeRegExp(urlPlaceholder)})\\)`));
+const LINK_PLACEHOLDER_TEXT = "linktekst";
+const LINK_PLACEHOLDER_URL = "inds\xE6t url";
+const parser = new MarkdownIt__default.default();
+parser.validateLink = (url) => getSafeHref(url) !== void 0;
+function getSafeHref(url) {
+  if ([...url].some((character) => character < " " || character === "\x7F")) return void 0;
+  const hasScheme = /^[a-z][a-z0-9+.-]*:/i.test(url);
+  return !hasScheme || /^(https?|mailto|tel):/i.test(url) ? url : void 0;
+}
+function findLinkAt(value, selectionStart, selectionEnd, urlPlaceholder = LINK_PLACEHOLDER_URL) {
+  const pattern = new RegExp(`${ESCAPE_PATTERN.source}|${linkPattern(urlPlaceholder).source}`, "g");
+  let match;
+  while ((match = pattern.exec(value)) !== null) {
+    if (match.index > selectionStart) return void 0;
+    const end = match.index + match[0].length;
+    if (match[1] !== void 0 && selectionEnd <= end) {
+      return { start: match.index, end, text: match[1] };
+    }
+  }
+  return void 0;
+}
+function escapeMarkdown(value) {
+  return value.replace(/[!-/:-@[-`{-~]/g, "\\$&");
+}
+function unescapeMarkdown(value) {
+  return value.replace(/\\([!-/:-@[-`{-~])/g, "$1");
+}
+const INLINE_SYNTAX = /\\(?=[!-/:-@[-`{-~]|$)|[`*_[<~|]|&(?=#?[a-z0-9]+;)/gi;
+const BLOCK_SYNTAX = /^(\s*)(#{1,6}(?=\s|$)|>|[-+=](?=\s|$)|[-=]+\s*$)|^(\s*\d+)([.)])(?=\s|$)/;
+const INDENT_ENTITIES = { " ": "&nbsp;", "	": "&#9;" };
+const ENCODED_INDENT = /^(?:&nbsp;|&#9;)+/gm;
+function escapePlainLine(line) {
+  if (!line.trim()) return line;
+  const indent = /^[ \t]*/.exec(line)[0];
+  const escaped = line.slice(indent.length).replace(INLINE_SYNTAX, "\\$&");
+  if (indent) return `${indent.replace(/[ \t]/g, (space) => INDENT_ENTITIES[space])}${escaped}`;
+  return escaped.replace(
+    BLOCK_SYNTAX,
+    (_, indent2, marker, number, delimiter) => marker === void 0 ? `${number}\\${delimiter}` : `${indent2}\\${marker}`
+  );
+}
+function plainTextToMarkdown(text) {
+  const lines = text.split("\n");
+  return lines.map((line, index) => {
+    const escaped = escapePlainLine(line);
+    return index < lines.length - 1 && line.trim() && lines[index + 1].trim() ? `${escaped}\\` : escaped;
+  }).join("\n");
+}
+function limitPlainText(previous, next, maxLength) {
+  if (maxLength === void 0 || next.length < previous.length || plainTextToMarkdown(next).length <= maxLength) {
+    return { text: next, caret: -1 };
+  }
+  let start = 0;
+  while (start < previous.length && start < next.length && previous[start] === next[start]) start++;
+  let end = 0;
+  while (end < previous.length - start && end < next.length - start && previous[previous.length - 1 - end] === next[next.length - 1 - end]) {
+    end++;
+  }
+  const inserted = next.slice(start, next.length - end);
+  const withInserted = (length) => `${next.slice(0, start)}${inserted.slice(0, length)}${next.slice(next.length - end)}`;
+  let low = 0;
+  let high = inserted.length;
+  while (low < high) {
+    const middle = Math.ceil((low + high) / 2);
+    if (plainTextToMarkdown(withInserted(middle)).length <= maxLength) low = middle;
+    else high = middle - 1;
+  }
+  const text = withInserted(low);
+  return text === previous ? void 0 : { text, caret: start + low };
+}
+function markdownToPlainText(markdown) {
+  return markdown.replace(ENCODED_INDENT, (indent) => indent.replace(/&nbsp;/g, " ").replace(/&#9;/g, "	")).replace(/\\([!-/:-@[-`{-~\n])/g, "$1");
+}
+function isPlainMarkdown(markdown) {
+  const normalize = (html) => html.replace(/<br>\n/g, "\n").replace(/(^|>|\n)[\u00a0\t]+/g, "$1");
+  return normalize(parser.render(markdown)) === normalize(parser.render(plainTextToMarkdown(markdownToPlainText(markdown))));
+}
+const SELECTION_SYNTAX = /\\[!-/:-@[-`{-~]|[`*_[<~|]|&(?=#?[a-z0-9]+;)/gi;
+function escapeSyntax(text, startsLine) {
+  return text.split("\n").map((line, index) => {
+    const escaped = line.replace(
+      SELECTION_SYNTAX,
+      (part) => part.length === 2 ? part : `\\${part}`
+    );
+    if (index === 0 && !startsLine) return escaped;
+    return escaped.replace(
+      BLOCK_SYNTAX,
+      (_, indent, marker, number, delimiter) => marker === void 0 ? `${number}\\${delimiter}` : `${indent}\\${marker}`
+    );
+  }).join("\n");
+}
+function isSelectionEscaped(value, selectionStart, selectionEnd) {
+  const selectedText = value.slice(selectionStart, selectionEnd);
+  const startsLine = selectionStart === 0 || value[selectionStart - 1] === "\n";
+  return ESCAPE_PATTERN.test(selectedText) && escapeSyntax(selectedText, startsLine) === selectedText;
+}
+function isEscaped(value, index) {
+  let backslashes = 0;
+  while (index > 0 && value[--index] === "\\") backslashes++;
+  return backslashes % 2 === 1;
+}
+function formatMarkdownSelection(value, selectionStart, selectionEnd, format) {
+  var _a, _b;
+  if (format.type === "link") {
+    const textPlaceholder = (_a = format.textPlaceholder) != null ? _a : LINK_PLACEHOLDER_TEXT;
+    const urlPlaceholder = (_b = format.urlPlaceholder) != null ? _b : LINK_PLACEHOLDER_URL;
+    const link = findLinkAt(value, selectionStart, selectionEnd, urlPlaceholder);
+    if (link) {
+      return {
+        value: `${value.slice(0, link.start)}${link.text}${value.slice(link.end)}`,
+        selectionStart: link.start,
+        selectionEnd: link.start + link.text.length
+      };
+    }
+    const selectedText = value.slice(selectionStart, selectionEnd);
+    const textStart = selectionStart + 1;
+    if (/^(https?:\/\/|mailto:)\S+$/i.test(selectedText)) {
+      return {
+        value: `${value.slice(0, selectionStart)}[${textPlaceholder}](${selectedText})${value.slice(selectionEnd)}`,
+        selectionStart: textStart,
+        selectionEnd: textStart + textPlaceholder.length
+      };
+    }
+    const text = selectedText || textPlaceholder;
+    const urlStart = textStart + text.length + 2;
+    return {
+      value: `${value.slice(0, selectionStart)}[${text}](${urlPlaceholder})${value.slice(selectionEnd)}`,
+      selectionStart: selectedText ? urlStart : textStart,
+      selectionEnd: selectedText ? urlStart + urlPlaceholder.length : textStart + text.length
+    };
+  }
+  if (format.type === "escape") {
+    const selectedText = value.slice(selectionStart, selectionEnd);
+    const startsLine = selectionStart === 0 || value[selectionStart - 1] === "\n";
+    const replacement2 = isSelectionEscaped(value, selectionStart, selectionEnd) ? unescapeMarkdown(selectedText) : escapeSyntax(selectedText, startsLine);
+    return {
+      value: `${value.slice(0, selectionStart)}${replacement2}${value.slice(selectionEnd)}`,
+      selectionStart,
+      selectionEnd: selectionStart + replacement2.length
+    };
+  }
+  if (format.type === "wrap") {
+    const selectedText = value.slice(selectionStart, selectionEnd);
+    const markerStart = selectionStart - format.marker.length;
+    const isAlreadyWrapped = isMarkdownFormatActive(value, selectionStart, selectionEnd, format);
+    if (isAlreadyWrapped) {
+      return {
+        value: `${value.slice(0, markerStart)}${selectedText}${value.slice(selectionEnd + format.marker.length)}`,
+        selectionStart: markerStart,
+        selectionEnd: markerStart + selectedText.length
+      };
+    }
+    const replacement2 = `${format.marker}${selectedText}${format.marker}`;
+    const innerStart = selectionStart + format.marker.length;
+    return {
+      value: `${value.slice(0, selectionStart)}${replacement2}${value.slice(selectionEnd)}`,
+      selectionStart: innerStart,
+      selectionEnd: innerStart + selectedText.length
+    };
+  }
+  const previousNewline = selectionStart > 0 ? value.lastIndexOf("\n", selectionStart - 1) : -1;
+  const lineStart = previousNewline + 1;
+  const selectedEnd = selectionEnd > selectionStart && value[selectionEnd - 1] === "\n" ? selectionEnd - 1 : selectionEnd;
+  const lineEndIndex = value.indexOf("\n", selectedEnd);
+  const lineEnd = lineEndIndex === -1 ? value.length : lineEndIndex;
+  const selectedLines = value.slice(lineStart, lineEnd).split("\n");
+  const removePrefix = format.toggle && isMarkdownFormatActive(value, selectionStart, selectionEnd, format);
+  const formattedLines = selectedLines.map((line) => {
+    if (removePrefix) return line.slice(format.prefix.length);
+    if (format.prefix.startsWith("#")) return `${format.prefix}${line.replace(/^#{1,6}\s+/, "")}`;
+    return `${format.prefix}${line}`;
+  });
+  const replacement = formattedLines.join("\n");
+  return {
+    value: `${value.slice(0, lineStart)}${replacement}${value.slice(lineEnd)}`,
+    selectionStart: lineStart,
+    selectionEnd: lineStart + replacement.length
+  };
+}
+function isMarkdownFormatActive(value, selectionStart, selectionEnd, format) {
+  if (format.type === "link") {
+    return findLinkAt(value, selectionStart, selectionEnd, format.urlPlaceholder) !== void 0;
+  }
+  if (format.type === "escape") return isSelectionEscaped(value, selectionStart, selectionEnd);
+  if (format.type === "wrap") {
+    const character = format.marker[0];
+    let start = selectionStart;
+    let end = selectionEnd;
+    while (start > 0 && value[start - 1] === character && !isEscaped(value, start - 1)) start--;
+    while (end < value.length && value[end] === character && !isEscaped(value, end)) end++;
+    const markerCount = Math.min(selectionStart - start, end - selectionEnd);
+    return format.marker.length === 1 ? markerCount % 2 === 1 : markerCount >= 2;
+  }
+  const previousNewline = selectionStart > 0 ? value.lastIndexOf("\n", selectionStart - 1) : -1;
+  const lineStart = previousNewline + 1;
+  const selectedEnd = selectionEnd > selectionStart && value[selectionEnd - 1] === "\n" ? selectionEnd - 1 : selectionEnd;
+  const lineEndIndex = value.indexOf("\n", selectedEnd);
+  const lineEnd = lineEndIndex === -1 ? value.length : lineEndIndex;
+  const lines = value.slice(lineStart, lineEnd).split("\n");
+  if (format.prefix.startsWith("#")) {
+    return lines.every((line) => {
+      var _a;
+      return ((_a = /^(#{1,6}\s+)/.exec(line)) == null ? void 0 : _a[0]) === format.prefix;
+    });
+  }
+  return lines.every((line) => line.startsWith(format.prefix));
+}
+function getAttr(token, name) {
+  const value = token.attrGet(name);
+  return value === null ? void 0 : String(value);
+}
+function toStyle(style) {
+  var _a;
+  const align = style && ((_a = /^text-align:\s*(left|right|center)$/.exec(style)) == null ? void 0 : _a[1]);
+  return align ? { textAlign: align } : void 0;
+}
+function renderLeaf(token, key, options) {
+  var _a, _b;
+  switch (token.type) {
+    case "text":
+      return token.content;
+    case "softbreak":
+      return "\n";
+    case "hardbreak":
+      return /* @__PURE__ */ jsxRuntime.jsx("br", {}, key);
+    case "code_inline":
+      return /* @__PURE__ */ jsxRuntime.jsx("code", { children: token.content }, key);
+    case "code_block":
+      return /* @__PURE__ */ jsxRuntime.jsx("pre", { children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: token.content }) }, key);
+    case "fence": {
+      const language = token.info.trim().split(/\s+/)[0];
+      return /* @__PURE__ */ jsxRuntime.jsx("pre", { children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: language ? `language-${language}` : void 0, children: token.content }) }, key);
+    }
+    case "hr":
+      return /* @__PURE__ */ jsxRuntime.jsx("hr", {}, key);
+    case "image":
+      return parser.renderer.renderInlineAsText((_a = token.children) != null ? _a : [], parser.options, {});
+    case "inline":
+      return renderTokens((_b = token.children) != null ? _b : [], options);
+    default:
+      return token.content || null;
+  }
+}
+function renderElement(open, children, key, options) {
+  var _a;
+  if (open.hidden) return /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children }, key);
+  if (/^h[1-6]$/.test(open.tag)) {
+    const level = Math.min(6, Math.max(1, Number(open.tag[1]) + ((_a = options.headingOffset) != null ? _a : 0)));
+    return React__default.default.createElement(`h${level}`, { key }, children);
+  }
+  if (open.tag === "a") {
+    const href = getAttr(open, "href");
+    const newTab = options.openLinksInNewTab && !/^(mailto|tel):/i.test(href != null ? href : "");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        href,
+        title: getAttr(open, "title"),
+        target: newTab ? "_blank" : void 0,
+        rel: newTab ? "noopener noreferrer" : void 0,
+        children: [
+          children,
+          newTab && options.newTabHint
+        ]
+      },
+      key
+    );
+  }
+  if (open.tag === "ol") {
+    const start = getAttr(open, "start");
+    return /* @__PURE__ */ jsxRuntime.jsx("ol", { start: start ? Number(start) : void 0, children }, key);
+  }
+  if (open.tag === "th" || open.tag === "td") {
+    return React__default.default.createElement(open.tag, { key, style: toStyle(getAttr(open, "style")) }, children);
+  }
+  return React__default.default.createElement(open.tag, { key }, children);
+}
+function renderTokens(tokens, options) {
+  const root = [];
+  const stack = [];
+  tokens.forEach((token, index) => {
+    const siblings = stack.length ? stack[stack.length - 1].children : root;
+    if (token.nesting === 1) {
+      stack.push({ open: token, children: [] });
+    } else if (token.nesting === -1) {
+      const element = stack.pop();
+      if (!element) return;
+      const parent = stack.length ? stack[stack.length - 1].children : root;
+      parent.push(renderElement(element.open, element.children, index, options));
+    } else {
+      const leaf = renderLeaf(token, index, options);
+      if (Array.isArray(leaf)) siblings.push(/* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: leaf }, index));
+      else if (leaf !== null) siblings.push(leaf);
+    }
+  });
+  return root;
+}
+function renderMarkdown(value, options = {}) {
+  return renderTokens(parser.parse(value, {}), options);
+}
+
+exports.escapeMarkdown = escapeMarkdown;
+exports.formatMarkdownSelection = formatMarkdownSelection;
+exports.getSafeHref = getSafeHref;
+exports.isMarkdownFormatActive = isMarkdownFormatActive;
+exports.isPlainMarkdown = isPlainMarkdown;
+exports.limitPlainText = limitPlainText;
+exports.markdownToPlainText = markdownToPlainText;
+exports.plainTextToMarkdown = plainTextToMarkdown;
+exports.renderMarkdown = renderMarkdown;

package/dist/components/forms/markdown-editor/markdown.utils.d.ts

@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react';
+export type MarkdownFormat = {
+    type: 'wrap';
+    marker: '**' | '*' | '__' | '_';
+} | {
+    type: 'line';
+    prefix: string;
+    toggle?: boolean;
+} | {
+    type: 'escape';
+} | {
+    type: 'link';
+    /** Link text inserted when nothing is selected. */
+    textPlaceholder?: string;
+    /**
+     * Target inserted for the user to replace. It must contain a space, so an unfinished link is
+     * never rendered as a link, here or by markdown-it.
+     */
+    urlPlaceholder?: string;
+};
+export interface FormattedSelection {
+    value: string;
+    selectionStart: number;
+    selectionEnd: number;
+}
+/** Only allow web, mail and phone links, plus relative urls - never `javascript:` and friends. */
+export declare function getSafeHref(url: string): string | undefined;
+/** Escape ASCII punctuation, as supported by CommonMark and markdown-it. */
+export declare function escapeMarkdown(value: string): string;
+/**
+ * Markdown that renders as exactly `text`: only characters that would otherwise become syntax
+ * are escaped, and line breaks inside a paragraph become hard breaks (a trailing backslash), so
+ * they aren't joined into one line.
+ */
+export declare function plainTextToMarkdown(text: string): string;
+/**
+ * Keeps a plain text edit within `maxLength` characters of stored Markdown, like a native
+ * `maxlength`: inserted text is cut to what fits, and deletions are always allowed. Returns the
+ * text to keep and where the caret goes, or undefined when nothing of the edit fits.
+ */
+export declare function limitPlainText(previous: string, next: string, maxLength: number | undefined): {
+    text: string;
+    caret: number;
+} | undefined;
+/** The text a user would type to get `markdown` from `plainTextToMarkdown`. */
+export declare function markdownToPlainText(markdown: string): string;
+/**
+ * Whether `markdown` has no formatting, so editing it as plain text loses nothing: it renders the
+ * same once converted, apart from line breaks and indentation, which plain text keeps as typed.
+ */
+export declare function isPlainMarkdown(markdown: string): boolean;
+export declare function formatMarkdownSelection(value: string, selectionStart: number, selectionEnd: number, format: MarkdownFormat): FormattedSelection;
+export declare function isMarkdownFormatActive(value: string, selectionStart: number, selectionEnd: number, format: MarkdownFormat): boolean;
+export interface RenderMarkdownOptions {
+    /** Added to every heading level, e.g. `1` renders `#` as `<h2>`. Levels stop at `<h6>`. */
+    headingOffset?: number;
+    /** Open links in a new tab, except `mailto:` and `tel:` links. */
+    openLinksInNewTab?: boolean;
+    /** Added inside links that open in a new tab, e.g. visually hidden text announcing it. */
+    newTabHint?: ReactNode;
+}
+/**
+ * Renders Markdown as React elements, exactly as `new MarkdownIt()` would render it as HTML,
+ * except that images render as their alt text and links can open in a new tab.
+ */
+export declare function renderMarkdown(value: string, options?: RenderMarkdownOptions): ReactNode;