@dbcdk/react-components 0.0.209 → 0.0.211

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

@@ -0,0 +1,468 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Bold, Italic, Link, Heading, List, RemoveFormatting } from 'lucide-react';
+import React, { useId, useRef, useMemo, useState, useSyncExternalStore, useEffect, useLayoutEffect } from 'react';
+import { flushSync } from 'react-dom';
+import { Button } from '../../../components/button/Button';
+import { InputContainer } from '../../../components/forms/input-container/InputContainer';
+import { getDescribedBy } from '../../../components/forms/input-container/messageIds';
+import { Switch } from '../../../components/forms/switch/Switch';
+import { Modal } from '../../../components/overlay/modal/Modal';
+import { mergeRefs } from '../../../utils/refs.utils';
+import { isPlainMarkdown, isMarkdownFormatActive, limitPlainText, markdownToPlainText, plainTextToMarkdown, formatMarkdownSelection } from './markdown.utils';
+import styles from './MarkdownEditor.module.css';
+import { MarkdownViewer } from './MarkdownViewer';
+
+const DEFAULT_LABELS = {
+  editor: "Markdown-editor",
+  editTab: "Rediger",
+  previewTab: "Forh\xE5ndsvisning",
+  toolbar: "Markdown-formatering",
+  bold: "Fed",
+  italic: "Kursiv",
+  link: "Inds\xE6t link",
+  linkTextPlaceholder: "linktekst",
+  linkUrlPlaceholder: "inds\xE6t url",
+  heading: "Overskrift",
+  bulletList: "Punktopstilling",
+  literal: "Bogstavelig tekst",
+  plainText: "Ren tekst",
+  emptyPreview: "Intet at forh\xE5ndsvise endnu.",
+  newTab: "(\xE5bner i en ny fane)",
+  plainTextConfirmTitle: "Skift til ren tekst?",
+  plainTextConfirmBody: "Teksten indeholder formatering. I ren tekst vises formateringstegnene som almindelig tekst, og formateringen g\xE5r tabt.",
+  plainTextTooLongBody: "I ren tekst gemmes specialtegn med ekstra tegn, s\xE5 teksten bliver l\xE6ngere end tilladt og skal forkortes.",
+  plainTextConfirmAction: "Skift til ren tekst",
+  cancel: "Annuller"
+};
+const TOOLBAR_GROUPS = [
+  [
+    {
+      label: "bold",
+      icon: /* @__PURE__ */ jsx(Bold, { "aria-hidden": "true" }),
+      format: { type: "wrap", marker: "**" },
+      shortcut: "b"
+    },
+    {
+      label: "italic",
+      icon: /* @__PURE__ */ jsx(Italic, { "aria-hidden": "true" }),
+      format: { type: "wrap", marker: "*" },
+      shortcut: "i"
+    },
+    { label: "link", icon: /* @__PURE__ */ jsx(Link, { "aria-hidden": "true" }), format: { type: "link" }, shortcut: "k" }
+  ],
+  [
+    {
+      label: "heading",
+      icon: /* @__PURE__ */ jsx(Heading, { "aria-hidden": "true" }),
+      format: { type: "line", prefix: "# ", toggle: true }
+    }
+  ],
+  [
+    {
+      label: "bulletList",
+      icon: /* @__PURE__ */ jsx(List, { "aria-hidden": "true" }),
+      format: { type: "line", prefix: "- ", toggle: true }
+    }
+  ],
+  [{ label: "literal", icon: /* @__PURE__ */ jsx(RemoveFormatting, { "aria-hidden": "true" }), format: { type: "escape" } }]
+];
+const TOOLBAR_ITEMS = TOOLBAR_GROUPS.flat();
+const subscribeToNothing = () => () => {
+};
+const isApplePlatform = () => /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent);
+function replaceWithUndo(textarea, next) {
+  const current = textarea.value;
+  let start = 0;
+  while (start < current.length && start < next.length && current[start] === next[start]) start++;
+  let end = 0;
+  while (end < current.length - start && end < next.length - start && current[current.length - 1 - end] === next[next.length - 1 - end]) {
+    end++;
+  }
+  const inserted = next.slice(start, next.length - end);
+  if (typeof document.execCommand !== "function") return false;
+  textarea.focus();
+  textarea.setSelectionRange(start, current.length - end);
+  const applied = inserted ? document.execCommand("insertText", false, inserted) : document.execCommand("delete", false);
+  return applied && textarea.value === next;
+}
+function MarkdownEditor({
+  value,
+  onChange,
+  onBlur,
+  onFocus,
+  ref,
+  name,
+  placeholder,
+  rows = 8,
+  maxLength,
+  disabled = false,
+  readOnly = false,
+  id,
+  className,
+  defaultPlainText = false,
+  onPlainTextChange,
+  headingOffset,
+  labels: labelOverrides,
+  label,
+  error,
+  helpText,
+  helpTextAddition,
+  fullWidth,
+  required,
+  orientation = "vertical",
+  modified,
+  modifiedLabel,
+  labelAction,
+  size,
+  labelWidth,
+  labelAlignment
+}) {
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides };
+  const generatedId = useId();
+  const editorId = id != null ? id : `markdown-editor-${generatedId}`;
+  const panelId = `${editorId}-panel`;
+  const tabRefs = useRef({
+    edit: null,
+    preview: null
+  });
+  const toolbarRefs = useRef([]);
+  const textareaRef = useRef(null);
+  const mergedTextareaRef = useMemo(() => mergeRefs(textareaRef, ref), [ref]);
+  const pendingSelection = useRef(null);
+  const [activeTab, setActiveTab] = useState("edit");
+  const [selection, setSelection] = useState([0, 0]);
+  const [plainText, setPlainText] = useState(() => defaultPlainText && isPlainMarkdown(value));
+  const [checkedValue, setCheckedValue] = useState(value);
+  if (plainText && value !== checkedValue) {
+    setCheckedValue(value);
+    if (!isPlainMarkdown(value)) setPlainText(false);
+  }
+  const [confirmPlainText, setConfirmPlainText] = useState(null);
+  const [toolbarFocusIndex, setToolbarFocusIndex] = useState(0);
+  const shortcutModifier = useSyncExternalStore(
+    subscribeToNothing,
+    () => isApplePlatform() ? "\u2318" : "Ctrl+",
+    () => "Ctrl+"
+  );
+  const hideToolbar = activeTab === "preview";
+  const formattingDisabled = disabled || readOnly;
+  const enterPlainText = () => {
+    setConfirmPlainText(null);
+    setPlainText(true);
+    setSelection([0, 0]);
+    onPlainTextChange == null ? void 0 : onPlainTextChange(true);
+    const converted = plainTextToMarkdown(markdownToPlainText(value));
+    if (converted !== value) onChange(converted);
+  };
+  const handlePlainTextChange = (nextPlainText) => {
+    if (!nextPlainText) {
+      setPlainText(false);
+      setSelection([0, 0]);
+      onPlainTextChange == null ? void 0 : onPlainTextChange(false);
+      return;
+    }
+    const formatting = !isPlainMarkdown(value);
+    const tooLong = maxLength !== void 0 && plainTextToMarkdown(markdownToPlainText(value)).length > maxLength;
+    if (formatting || tooLong) setConfirmPlainText({ formatting, tooLong });
+    else enterPlainText();
+  };
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (activeTab !== "preview" || !(textarea == null ? void 0 : textarea.labels)) return;
+    const labelElements = [...textarea.labels];
+    const reveal = () => {
+      var _a;
+      flushSync(() => setActiveTab("edit"));
+      (_a = textareaRef.current) == null ? void 0 : _a.focus();
+    };
+    labelElements.forEach((element) => element.addEventListener("click", reveal));
+    return () => labelElements.forEach((element) => element.removeEventListener("click", reveal));
+  }, [activeTab]);
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    const sync = () => setSelection(
+      (current) => current[0] === textarea.selectionStart && current[1] === textarea.selectionEnd ? current : [textarea.selectionStart, textarea.selectionEnd]
+    );
+    textarea.addEventListener("selectionchange", sync);
+    document.addEventListener("selectionchange", sync);
+    return () => {
+      textarea.removeEventListener("selectionchange", sync);
+      document.removeEventListener("selectionchange", sync);
+    };
+  }, []);
+  const handleTabKeyDown = (event) => {
+    var _a;
+    const keys = {
+      ArrowRight: activeTab === "edit" ? "preview" : "edit",
+      ArrowDown: activeTab === "edit" ? "preview" : "edit",
+      ArrowLeft: activeTab === "edit" ? "preview" : "edit",
+      ArrowUp: activeTab === "edit" ? "preview" : "edit",
+      Home: "edit",
+      End: "preview"
+    };
+    const nextTab = keys[event.key];
+    if (!nextTab) return;
+    event.preventDefault();
+    setActiveTab(nextTab);
+    (_a = tabRefs.current[nextTab]) == null ? void 0 : _a.focus();
+  };
+  useLayoutEffect(() => {
+    const selection2 = pendingSelection.current;
+    const textarea = textareaRef.current;
+    if (!selection2 || !textarea) return;
+    textarea.focus();
+    textarea.setSelectionRange(selection2[0], selection2[1]);
+    setSelection(selection2);
+    pendingSelection.current = null;
+  }, [value]);
+  const withPlaceholders = (format) => format.type === "link" ? {
+    ...format,
+    textPlaceholder: labels.linkTextPlaceholder,
+    urlPlaceholder: labels.linkUrlPlaceholder
+  } : format;
+  const applyFormat = (itemFormat) => {
+    const format = withPlaceholders(itemFormat);
+    const textarea = textareaRef.current;
+    if (!textarea || formattingDisabled) return;
+    const formatted = formatMarkdownSelection(
+      value,
+      textarea.selectionStart,
+      textarea.selectionEnd,
+      format
+    );
+    if (formatted.value === value) {
+      textarea.focus();
+      textarea.setSelectionRange(formatted.selectionStart, formatted.selectionEnd);
+      return;
+    }
+    pendingSelection.current = [formatted.selectionStart, formatted.selectionEnd];
+    if (!replaceWithUndo(textarea, formatted.value)) onChange(formatted.value);
+  };
+  const isItemDisabled = (item) => formattingDisabled || item.format.type === "escape" && selection[0] === selection[1];
+  const enabledIndexes = TOOLBAR_ITEMS.flatMap(
+    (item, index) => isItemDisabled(item) ? [] : [index]
+  );
+  const tabStopIndex = enabledIndexes.includes(toolbarFocusIndex) ? toolbarFocusIndex : enabledIndexes[0];
+  const handleToolbarKeyDown = (event) => {
+    var _a;
+    const position = enabledIndexes.indexOf(tabStopIndex);
+    const targets = {
+      ArrowRight: enabledIndexes[(position + 1) % enabledIndexes.length],
+      ArrowLeft: enabledIndexes[(position - 1 + enabledIndexes.length) % enabledIndexes.length],
+      Home: enabledIndexes[0],
+      End: enabledIndexes[enabledIndexes.length - 1]
+    };
+    const target = targets[event.key];
+    if (target === void 0) return;
+    event.preventDefault();
+    setToolbarFocusIndex(target);
+    (_a = toolbarRefs.current[target]) == null ? void 0 : _a.focus();
+  };
+  const handleTextareaKeyDown = (event) => {
+    if (plainText || !(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return;
+    const item = TOOLBAR_ITEMS.find((item2) => item2.shortcut === event.key.toLowerCase());
+    if (!item || isItemDisabled(item)) return;
+    event.preventDefault();
+    applyFormat(item.format);
+  };
+  let itemIndex = 0;
+  const toolbar = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: [styles.toolbar, hideToolbar ? styles.toolbarHidden : ""].filter(Boolean).join(" "),
+      role: "toolbar",
+      "aria-label": labels.toolbar,
+      "aria-hidden": hideToolbar || void 0,
+      inert: hideToolbar,
+      onKeyDown: handleToolbarKeyDown,
+      children: TOOLBAR_GROUPS.map((group, groupIndex) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        groupIndex > 0 && /* @__PURE__ */ jsx("span", { className: styles.separator, "aria-hidden": "true" }),
+        group.map((item) => {
+          var _a;
+          const index = itemIndex++;
+          const shortcut = (_a = item.shortcut) == null ? void 0 : _a.toUpperCase();
+          return /* @__PURE__ */ jsx(
+            Button,
+            {
+              ref: (element) => {
+                toolbarRefs.current[index] = element;
+              },
+              "aria-label": labels[item.label],
+              title: shortcut ? `${labels[item.label]} (${shortcutModifier}${shortcut})` : labels[item.label],
+              "aria-keyshortcuts": shortcut ? `Control+${shortcut} Meta+${shortcut}` : void 0,
+              "aria-pressed": isMarkdownFormatActive(
+                value,
+                selection[0],
+                selection[1],
+                item.format
+              ),
+              className: styles.formatButton,
+              variant: "inline",
+              size: "sm",
+              icon: item.icon,
+              disabled: isItemDisabled(item),
+              tabIndex: index === tabStopIndex ? 0 : -1,
+              onFocus: () => setToolbarFocusIndex(index),
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: () => applyFormat(item.format)
+            },
+            item.label
+          );
+        })
+      ] }, groupIndex))
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    InputContainer,
+    {
+      label,
+      htmlFor: editorId,
+      error,
+      helpText,
+      helpTextAddition,
+      fullWidth,
+      required,
+      orientation,
+      modified,
+      modifiedLabel,
+      labelAction,
+      size,
+      labelWidth,
+      labelAlignment,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: [styles.field, className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: styles.frame,
+            "data-invalid": error ? "true" : void 0,
+            style: { "--markdown-editor-rows": rows },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+                /* @__PURE__ */ jsx("div", { className: styles.tabList, role: "tablist", "aria-label": label != null ? label : labels.editor, children: ["edit", "preview"].map((tab) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: (element) => {
+                      tabRefs.current[tab] = element;
+                    },
+                    id: `${editorId}-tab-${tab}`,
+                    className: styles.tabButton,
+                    type: "button",
+                    role: "tab",
+                    "aria-selected": activeTab === tab,
+                    "aria-controls": panelId,
+                    tabIndex: activeTab === tab ? 0 : -1,
+                    onClick: () => setActiveTab(tab),
+                    onKeyDown: handleTabKeyDown,
+                    children: tab === "edit" ? labels.editTab : labels.previewTab
+                  },
+                  tab
+                )) }),
+                !plainText && toolbar,
+                /* @__PURE__ */ jsx("div", { className: styles.modeSwitch, children: /* @__PURE__ */ jsx(
+                  Switch,
+                  {
+                    noContainer: true,
+                    size: "sm",
+                    label: labels.plainText,
+                    checked: plainText,
+                    disabled: formattingDisabled,
+                    onChange: handlePlainTextChange
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  id: panelId,
+                  className: styles.panel,
+                  role: "tabpanel",
+                  "aria-labelledby": `${editorId}-tab-${activeTab}`,
+                  children: [
+                    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value, disabled }),
+                    /* @__PURE__ */ jsx(
+                      "textarea",
+                      {
+                        ref: mergedTextareaRef,
+                        id: editorId,
+                        className: styles.textarea,
+                        value: plainText ? markdownToPlainText(value) : value,
+                        onChange: (event) => {
+                          const textarea = event.currentTarget;
+                          if (!plainText) {
+                            onChange(textarea.value);
+                            return;
+                          }
+                          const limited = limitPlainText(
+                            markdownToPlainText(value),
+                            textarea.value,
+                            maxLength
+                          );
+                          if (!limited) {
+                            const caret = textarea.selectionStart - (textarea.value.length - markdownToPlainText(value).length);
+                            queueMicrotask(() => textarea.setSelectionRange(caret, caret));
+                            return;
+                          }
+                          if (limited.caret >= 0) pendingSelection.current = [limited.caret, limited.caret];
+                          onChange(plainTextToMarkdown(limited.text));
+                        },
+                        onSelect: (event) => setSelection([event.currentTarget.selectionStart, event.currentTarget.selectionEnd]),
+                        onKeyDown: handleTextareaKeyDown,
+                        onBlur,
+                        onFocus,
+                        placeholder,
+                        rows,
+                        maxLength: plainText ? void 0 : maxLength,
+                        disabled,
+                        readOnly,
+                        required,
+                        hidden: activeTab !== "edit",
+                        onInvalid: () => {
+                          if (activeTab === "preview") {
+                            flushSync(() => setActiveTab("edit"));
+                          }
+                        },
+                        "aria-invalid": Boolean(error) || void 0,
+                        "aria-describedby": getDescribedBy(editorId, { error, helpText })
+                      }
+                    ),
+                    activeTab === "preview" && /* @__PURE__ */ jsx(
+                      MarkdownViewer,
+                      {
+                        className: styles.preview,
+                        markdown: value,
+                        headingOffset,
+                        openLinksInNewTab: true,
+                        newTabLabel: labels.newTab,
+                        emptyMessage: labels.emptyPreview
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Modal,
+          {
+            isOpen: confirmPlainText !== null,
+            onRequestClose: () => setConfirmPlainText(null),
+            header: labels.plainTextConfirmTitle,
+            severity: "warning",
+            primaryAction: { label: labels.plainTextConfirmAction, onClick: enterPlainText },
+            secondaryAction: { label: labels.cancel, onClick: () => setConfirmPlainText(null) },
+            children: [
+              (confirmPlainText == null ? void 0 : confirmPlainText.formatting) && labels.plainTextConfirmBody,
+              (confirmPlainText == null ? void 0 : confirmPlainText.tooLong) && labels.plainTextTooLongBody
+            ].filter(Boolean).join(" ")
+          }
+        )
+      ]
+    }
+  );
+}
+MarkdownEditor.displayName = "MarkdownEditor";
+
+export { MarkdownEditor };

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

@@ -0,0 +1,202 @@
+.field {
+  min-width: 0;
+  flex: 1;
+}
+
+.frame {
+  min-width: 0;
+  overflow: hidden;
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--border-radius-lg);
+  background: var(--color-bg-surface);
+}
+
+.header {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  justify-content: flex-start;
+  gap: 0;
+  min-width: 0;
+  padding-inline-start: 0;
+  padding-inline-end: var(--spacing-xs);
+  border-block-end: var(--border-width-thin) solid var(--color-border-default);
+  background: var(--color-bg-surface);
+}
+
+.tabList {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: stretch;
+  min-width: 0;
+}
+
+.tabButton {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--component-size-md);
+  padding: var(--spacing-xs) var(--spacing-md);
+  border: 0;
+  border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
+  color: var(--color-fg-muted);
+  background: transparent;
+  font: inherit;
+  font-size: var(--font-size-sm);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.tabButton:first-child {
+  border-start-start-radius: 0;
+}
+
+.tabButton:hover {
+  color: var(--color-fg-default);
+  background: var(--opac-bg-light);
+}
+
+.tabButton[aria-selected='true'] {
+  color: var(--color-brand);
+  font-weight: var(--font-weight-semibold);
+  background: transparent;
+}
+
+.tabButton:focus-visible {
+  z-index: 1;
+  outline: 2px solid var(--color-field-focus);
+  outline-offset: -2px;
+}
+
+.panel {
+  background: var(--color-bg-surface);
+}
+
+/* At least as tall as the textarea, so switching tabs doesn't move the page. */
+.preview {
+  box-sizing: border-box;
+  min-height: calc(
+    var(--markdown-editor-rows) * var(--line-height-normal) * 1em + 2 * var(--spacing-sm)
+  );
+  padding: var(--spacing-sm);
+  line-height: var(--line-height-normal);
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  margin-inline-start: var(--spacing-lg);
+  min-width: 0;
+  gap: var(--spacing-xxs);
+}
+
+.toolbarHidden {
+  visibility: hidden;
+}
+
+.toolbar .formatButton.formatButton {
+  box-sizing: border-box;
+  width: var(--component-size-md);
+  min-width: var(--component-size-md);
+  height: var(--component-size-md);
+  min-height: var(--component-size-md);
+  padding: 0;
+  border: 0;
+  border-radius: var(--border-radius-sm);
+  color: var(--color-fg-muted);
+  background: transparent;
+}
+
+.toolbar .formatButton.formatButton:hover {
+  color: var(--color-fg-default);
+  background: var(--color-bg-hover-subtle);
+}
+
+.toolbar .formatButton.formatButton[aria-pressed='true'] {
+  color: var(--color-brand);
+  background: var(--opac-bg-brand);
+}
+
+.toolbar .formatButton.formatButton:focus-visible {
+  outline: 2px solid var(--color-field-focus);
+  outline-offset: -2px;
+  box-shadow: none;
+}
+
+.modeSwitch {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  margin-inline-start: auto;
+  padding-inline-start: var(--spacing-md);
+}
+
+.separator {
+  width: var(--border-width-thin);
+  height: var(--spacing-md);
+  margin-inline: var(--spacing-xxs);
+  background: var(--color-border-default);
+}
+
+.textarea {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  padding: var(--spacing-sm);
+  resize: vertical;
+  border: 0;
+  border-radius: inherit;
+  font: inherit;
+  line-height: var(--line-height-normal);
+  color: var(--color-fg-default);
+  background: var(--color-bg-surface);
+}
+
+.textarea:focus-visible {
+  outline: 2px solid var(--color-field-focus);
+  outline-offset: -2px;
+}
+
+.textarea[hidden] {
+  display: none;
+}
+
+.textarea:disabled {
+  color: var(--color-disabled-fg);
+  background: var(--color-disabled-bg);
+  cursor: not-allowed;
+}
+
+.frame[data-invalid='true'] {
+  border-color: var(--color-status-error);
+}
+
+@media (max-width: 767px) {
+  .header {
+    flex-wrap: wrap;
+    gap: 0;
+    padding-inline: 0;
+  }
+
+  .tabList {
+    width: 100%;
+  }
+
+  .modeSwitch {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: var(--spacing-sm);
+    min-height: var(--component-size-md);
+  }
+
+  .toolbar {
+    width: 100%;
+    justify-content: flex-start;
+    margin-inline-start: 0;
+    padding: var(--spacing-xs);
+    border-block-start: var(--border-width-thin) solid var(--color-border-default);
+  }
+}

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

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