@dbcdk/react-components 0.0.208 → 0.0.210

package/dist/client.cjs

@@ -45,6 +45,8 @@ var TableSettings = require('./components/table/components/table-settings/TableS
 var useTableSettings = require('./hooks/useTableSettings');
 var chartColors = require('./constants/chart-colors');
 var Textarea = require('./components/forms/text-area/Textarea');
+var MarkdownEditor = require('./components/forms/markdown-editor/MarkdownEditor');
+var MarkdownViewer = require('./components/forms/markdown-editor/MarkdownViewer');
 var AppHeader = require('./components/app-header/AppHeader');
 var Sidebar = require('./components/sidebar/Sidebar');
 var TreeView = require('./components/tree-view/TreeView');
@@ -306,6 +308,14 @@ Object.defineProperty(exports, "Textarea", {
   enumerable: true,
   get: function () { return Textarea.Textarea; }
 });
+Object.defineProperty(exports, "MarkdownEditor", {
+  enumerable: true,
+  get: function () { return MarkdownEditor.MarkdownEditor; }
+});
+Object.defineProperty(exports, "MarkdownViewer", {
+  enumerable: true,
+  get: function () { return MarkdownViewer.MarkdownViewer; }
+});
 Object.defineProperty(exports, "AppHeader", {
   enumerable: true,
   get: function () { return AppHeader.AppHeader; }

package/dist/client.d.ts

@@ -76,6 +76,10 @@ export type { ChartSemanticSeverity, ChartSemanticColor } from './constants/char
 export type { Severity } from './constants/severity.types';
 export { Textarea } from './components/forms/text-area/Textarea';
 export type { TextareaProps } from './components/forms/text-area/Textarea';
+export { MarkdownEditor } from './components/forms/markdown-editor/MarkdownEditor';
+export type { MarkdownEditorLabels, MarkdownEditorProps, } from './components/forms/markdown-editor/MarkdownEditor';
+export { MarkdownViewer } from './components/forms/markdown-editor/MarkdownViewer';
+export type { MarkdownViewerProps } from './components/forms/markdown-editor/MarkdownViewer';
 export { AppHeader } from './components/app-header/AppHeader';
 export type { AppHeaderSize } from './components/app-header/AppHeader';
 export { Sidebar } from './components/sidebar/Sidebar';

package/dist/client.js

@@ -43,6 +43,8 @@ export { TableSettings, TableSettingsMenuSection } from './components/table/comp
 export { localStorageTableSettingsStorage, useTableSettings } from './hooks/useTableSettings';
 export { ChartSemanticColorVar } from './constants/chart-colors';
 export { Textarea } from './components/forms/text-area/Textarea';
+export { MarkdownEditor } from './components/forms/markdown-editor/MarkdownEditor';
+export { MarkdownViewer } from './components/forms/markdown-editor/MarkdownViewer';
 export { AppHeader } from './components/app-header/AppHeader';
 export { Sidebar } from './components/sidebar/Sidebar';
 export { TreeView, collectExpandableIds, findAncestorIds } from './components/tree-view/TreeView';

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

@@ -0,0 +1,475 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var React = require('react');
+var reactDom = require('react-dom');
+var Button = require('../../../components/button/Button');
+var InputContainer = require('../../../components/forms/input-container/InputContainer');
+var messageIds = require('../../../components/forms/input-container/messageIds');
+var Switch = require('../../../components/forms/switch/Switch');
+var Modal = require('../../../components/overlay/modal/Modal');
+var refs_utils = require('../../../utils/refs.utils');
+var markdown_utils = require('./markdown.utils');
+var styles = require('./MarkdownEditor.module.css');
+var MarkdownViewer = require('./MarkdownViewer');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+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__ */ jsxRuntime.jsx(lucideReact.Bold, { "aria-hidden": "true" }),
+      format: { type: "wrap", marker: "**" },
+      shortcut: "b"
+    },
+    {
+      label: "italic",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Italic, { "aria-hidden": "true" }),
+      format: { type: "wrap", marker: "*" },
+      shortcut: "i"
+    },
+    { label: "link", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { "aria-hidden": "true" }), format: { type: "link" }, shortcut: "k" }
+  ],
+  [
+    {
+      label: "heading",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading, { "aria-hidden": "true" }),
+      format: { type: "line", prefix: "# ", toggle: true }
+    }
+  ],
+  [
+    {
+      label: "bulletList",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { "aria-hidden": "true" }),
+      format: { type: "line", prefix: "- ", toggle: true }
+    }
+  ],
+  [{ label: "literal", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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 = React.useId();
+  const editorId = id != null ? id : `markdown-editor-${generatedId}`;
+  const panelId = `${editorId}-panel`;
+  const tabRefs = React.useRef({
+    edit: null,
+    preview: null
+  });
+  const toolbarRefs = React.useRef([]);
+  const textareaRef = React.useRef(null);
+  const mergedTextareaRef = React.useMemo(() => refs_utils.mergeRefs(textareaRef, ref), [ref]);
+  const pendingSelection = React.useRef(null);
+  const [activeTab, setActiveTab] = React.useState("edit");
+  const [selection, setSelection] = React.useState([0, 0]);
+  const [plainText, setPlainText] = React.useState(() => defaultPlainText && markdown_utils.isPlainMarkdown(value));
+  const [checkedValue, setCheckedValue] = React.useState(value);
+  if (plainText && value !== checkedValue) {
+    setCheckedValue(value);
+    if (!markdown_utils.isPlainMarkdown(value)) setPlainText(false);
+  }
+  const [confirmPlainText, setConfirmPlainText] = React.useState(null);
+  const [toolbarFocusIndex, setToolbarFocusIndex] = React.useState(0);
+  const shortcutModifier = React.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 = markdown_utils.plainTextToMarkdown(markdown_utils.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 = !markdown_utils.isPlainMarkdown(value);
+    const tooLong = maxLength !== void 0 && markdown_utils.plainTextToMarkdown(markdown_utils.markdownToPlainText(value)).length > maxLength;
+    if (formatting || tooLong) setConfirmPlainText({ formatting, tooLong });
+    else enterPlainText();
+  };
+  React.useEffect(() => {
+    const textarea = textareaRef.current;
+    if (activeTab !== "preview" || !(textarea == null ? void 0 : textarea.labels)) return;
+    const labelElements = [...textarea.labels];
+    const reveal = () => {
+      var _a;
+      reactDom.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]);
+  React.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();
+  };
+  React.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 = markdown_utils.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: [styles__default.default.toolbar, hideToolbar ? styles__default.default.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__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+        groupIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.separator, "aria-hidden": "true" }),
+        group.map((item) => {
+          var _a;
+          const index = itemIndex++;
+          const shortcut = (_a = item.shortcut) == null ? void 0 : _a.toUpperCase();
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Button.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": markdown_utils.isMarkdownFormatActive(
+                value,
+                selection[0],
+                selection[1],
+                item.format
+              ),
+              className: styles__default.default.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__ */ jsxRuntime.jsxs(
+    InputContainer.InputContainer,
+    {
+      label,
+      htmlFor: editorId,
+      error,
+      helpText,
+      helpTextAddition,
+      fullWidth,
+      required,
+      orientation,
+      modified,
+      modifiedLabel,
+      labelAction,
+      size,
+      labelWidth,
+      labelAlignment,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: [styles__default.default.field, className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: styles__default.default.frame,
+            "data-invalid": error ? "true" : void 0,
+            style: { "--markdown-editor-rows": rows },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.header, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.tabList, role: "tablist", "aria-label": label != null ? label : labels.editor, children: ["edit", "preview"].map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    ref: (element) => {
+                      tabRefs.current[tab] = element;
+                    },
+                    id: `${editorId}-tab-${tab}`,
+                    className: styles__default.default.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__ */ jsxRuntime.jsx("div", { className: styles__default.default.modeSwitch, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Switch.Switch,
+                  {
+                    noContainer: true,
+                    size: "sm",
+                    label: labels.plainText,
+                    checked: plainText,
+                    disabled: formattingDisabled,
+                    onChange: handlePlainTextChange
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  id: panelId,
+                  className: styles__default.default.panel,
+                  role: "tabpanel",
+                  "aria-labelledby": `${editorId}-tab-${activeTab}`,
+                  children: [
+                    name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value, disabled }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "textarea",
+                      {
+                        ref: mergedTextareaRef,
+                        id: editorId,
+                        className: styles__default.default.textarea,
+                        value: plainText ? markdown_utils.markdownToPlainText(value) : value,
+                        onChange: (event) => {
+                          const textarea = event.currentTarget;
+                          if (!plainText) {
+                            onChange(textarea.value);
+                            return;
+                          }
+                          const limited = markdown_utils.limitPlainText(
+                            markdown_utils.markdownToPlainText(value),
+                            textarea.value,
+                            maxLength
+                          );
+                          if (!limited) {
+                            const caret = textarea.selectionStart - (textarea.value.length - markdown_utils.markdownToPlainText(value).length);
+                            queueMicrotask(() => textarea.setSelectionRange(caret, caret));
+                            return;
+                          }
+                          if (limited.caret >= 0) pendingSelection.current = [limited.caret, limited.caret];
+                          onChange(markdown_utils.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") {
+                            reactDom.flushSync(() => setActiveTab("edit"));
+                          }
+                        },
+                        "aria-invalid": Boolean(error) || void 0,
+                        "aria-describedby": messageIds.getDescribedBy(editorId, { error, helpText })
+                      }
+                    ),
+                    activeTab === "preview" && /* @__PURE__ */ jsxRuntime.jsx(
+                      MarkdownViewer.MarkdownViewer,
+                      {
+                        className: styles__default.default.preview,
+                        markdown: value,
+                        headingOffset,
+                        openLinksInNewTab: true,
+                        newTabLabel: labels.newTab,
+                        emptyMessage: labels.emptyPreview
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Modal.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";
+
+exports.MarkdownEditor = MarkdownEditor;

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import type { InputContainerProps } from '../../../components/forms/input-container/InputContainer';
+export interface MarkdownEditorLabels {
+    editor: string;
+    editTab: string;
+    previewTab: string;
+    toolbar: string;
+    bold: string;
+    italic: string;
+    link: string;
+    linkTextPlaceholder: string;
+    /** Must contain a space, so an unfinished link is never rendered as a link. */
+    linkUrlPlaceholder: string;
+    heading: string;
+    bulletList: string;
+    literal: string;
+    plainText: string;
+    emptyPreview: string;
+    newTab: string;
+    plainTextConfirmTitle: string;
+    plainTextConfirmBody: string;
+    plainTextTooLongBody: string;
+    plainTextConfirmAction: string;
+    cancel: string;
+}
+export interface MarkdownEditorProps extends Omit<InputContainerProps, 'children' | 'htmlFor'> {
+    /** Raw Markdown, including visible backslash escapes. */
+    value: string;
+    onChange: (value: string) => void;
+    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
+    onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
+    ref?: React.Ref<HTMLTextAreaElement>;
+    /** Submits the Markdown `value` with native forms, also in plain text mode. */
+    name?: string;
+    placeholder?: string;
+    /** Visible text rows; the preview keeps at least the same height. */
+    rows?: number;
+    /**
+     * Maximum length of the stored Markdown `value`. In plain text mode escapes count too, so
+     * slightly fewer characters can be typed when the text contains Markdown characters.
+     */
+    maxLength?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    id?: string;
+    className?: string;
+    /**
+     * Start in plain text mode, where the formatting toolbar is hidden and the user types plain
+     * text. `value` stays Markdown: syntax characters and line breaks are escaped automatically, so
+     * it renders exactly as typed. Ignored when `value` already contains formatting, so it is never
+     * lost silently; formatting set from outside later also switches back to Markdown. The user can
+     * switch modes with the "Ren tekst" switch.
+     */
+    defaultPlainText?: boolean;
+    /**
+     * Called when the user switches between Markdown and plain text, e.g. to remember the choice. Not
+     * called when formatting set from outside switches the editor back to Markdown.
+     */
+    onPlainTextChange?: (plainText: boolean) => void;
+    /** Added to heading levels in the preview, e.g. `1` previews `#` as `<h2>`. */
+    headingOffset?: number;
+    /** Overrides for the built-in Danish texts. */
+    labels?: Partial<MarkdownEditorLabels>;
+}
+export declare function MarkdownEditor({ value, onChange, onBlur, onFocus, ref, name, placeholder, rows, maxLength, disabled, readOnly, id, className, defaultPlainText, onPlainTextChange, headingOffset, labels: labelOverrides, label, error, helpText, helpTextAddition, fullWidth, required, orientation, modified, modifiedLabel, labelAction, size, labelWidth, labelAlignment, }: MarkdownEditorProps): React.ReactElement;
+export declare namespace MarkdownEditor {
+    var displayName: string;
+}