testomatio-editor-blocks 0.4.74 → 0.4.75

package/src/editor/blocks/step.tsx

@@ -1,8 +1,7 @@
 import { createReactBlockSpec, useEditorChange } from "@blocknote/react";
-import { useCallback, useEffect, useMemo, useRef, useState, type FocusEvent } from "react";
-import { StepField } from "./stepField";
+import { useCallback, useEffect, useMemo, useRef, useState, type MouseEvent as ReactMouseEvent } from "react";
+import { StepField, StepFieldPreview } from "./stepField";
 import { StepHorizontalView } from "./stepHorizontalView";
-import { useDeferredMount } from "./useDeferredMount";
 import { useStepImageUpload } from "../stepImageUpload";
 import type { StepSuggestion } from "../stepAutocomplete";
 
@@ -50,6 +49,36 @@ const writeStepViewMode = (mode: StepViewMode) => {
   }
 };
 
+/**
+ * Subscribes to the globally-shared step view mode. The mode lives in
+ * localStorage and changes are broadcast via the `bn-step-view-mode` event
+ * (same tab) and the `storage` event (other tabs), so toggling it on any step
+ * re-renders every step — including the read-only previews — into the new mode.
+ */
+function useStepViewMode(): StepViewMode {
+  const [viewMode, setViewMode] = useState<StepViewMode>(() => readStepViewMode());
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const handleStorage = (event: StorageEvent) => {
+      if (event.key === VIEW_MODE_KEY) {
+        setViewMode(readStepViewMode());
+      }
+    };
+    const handleLocal = () => {
+      setViewMode(readStepViewMode());
+    };
+    window.addEventListener("storage", handleStorage);
+    window.addEventListener("bn-step-view-mode", handleLocal as EventListener);
+    return () => {
+      window.removeEventListener("storage", handleStorage);
+      window.removeEventListener("bn-step-view-mode", handleLocal as EventListener);
+    };
+  }, []);
+  return viewMode;
+}
+
 /**
  * Returns true when a normalised (lowercased, trailing-punctuation-stripped)
  * heading text looks like a "Steps" heading.
@@ -251,76 +280,64 @@ export function computeStepNumber(allBlocks: any[], blockId: string): number {
   return count;
 }
 
-/** Strip the most common inline markdown markers for a readable static preview. */
-function stripMarkdownForPreview(text: string): string {
-  return text
-    .replace(/!\[[^\]]*\]\([^)]*\)/g, "")
-    .replace(/\[([^\]]*)\]\([^)]*\)/g, "$1")
-    .replace(/(\*\*|__|\*|_|~~|`)/g, "")
-    .replace(/<\/?[^>]+>/g, "")
-    .trim();
-}
-
 /**
- * Cheap static stand-in shown before a step's interactive editor is mounted.
- * Mirrors the real step's structure/typography so the document height stays
- * stable and so it reads correctly during the brief window before upgrade.
+ * Read-only stand-in rendered for every step that isn't currently being edited.
+ * It mirrors the live step's structure for the active view mode and renders each
+ * field via {@link StepFieldPreview} — a faithful, formatted reading view with
+ * no OverType editor. Only the focused step ever mounts an editor, so scrolling
+ * never mounts/tears down editors and the list stays flicker-free.
+ *
+ * Field visibility is gated on the raw trimmed props (matching the live step's
+ * `isDataVisible`/`isExpectedVisible`) so the same fields appear in both states.
  */
 function TestStepPreview({
   blockId,
   stepNumber,
+  viewMode,
   stepTitle,
   stepData,
   expectedResult,
 }: {
   blockId: string;
   stepNumber: number;
+  viewMode: StepViewMode;
   stepTitle: string;
   stepData: string;
   expectedResult: string;
 }) {
-  const titleText = stripMarkdownForPreview(stepTitle);
-  const dataText = stripMarkdownForPreview(stepData);
-  const expectedText = stripMarkdownForPreview(expectedResult);
+  const compactMode = viewMode === "compact";
+  const hasData = stepData.trim().length > 0;
+  const hasExpected = expectedResult.trim().length > 0;
 
   return (
-    <div className="bn-teststep" data-block-id={blockId}>
+    <div
+      className={`bn-teststep${compactMode ? " bn-teststep--compact bn-teststep--collapsed" : ""}`}
+      data-block-id={blockId}
+    >
       <div className="bn-teststep__timeline">
         <span className="bn-teststep__number">{stepNumber}</span>
         <div className="bn-teststep__line" />
       </div>
       <div className="bn-teststep__content">
-        <div className="bn-teststep__header">
-          <span className="bn-teststep__title">Step</span>
-        </div>
-        <div className="bn-step-field">
-          <div className="bn-step-editor bn-step-editor--multiline bn-step-editor--preview">
-            {titleText || " "}
-          </div>
-        </div>
-        {dataText ? (
-          <div className="bn-step-field">
-            <div className="bn-step-editor bn-step-editor--multiline bn-step-editor--preview">
-              {dataText}
-            </div>
-          </div>
-        ) : null}
-        {expectedText ? (
-          <div className="bn-step-field">
-            <div className="bn-step-editor bn-step-editor--multiline bn-step-editor--preview">
-              {expectedText}
-            </div>
+        {!compactMode && (
+          <div className="bn-teststep__header">
+            <span className="bn-teststep__title">Step</span>
           </div>
-        ) : null}
+        )}
+        <StepFieldPreview value={stepTitle} fieldName="title" />
+        {hasData ? <StepFieldPreview value={stepData} fieldName="data" /> : null}
+        {hasExpected ? <StepFieldPreview value={expectedResult} fieldName="expected" /> : null}
       </div>
     </div>
   );
 }
 
 /**
- * Wrapper that defers mounting the (expensive) interactive step editor until
- * the block scrolls into view. Off-screen steps render {@link TestStepPreview}
- * instead, which is what keeps pasting/loading a large test document fast.
+ * Wrapper that mounts the (expensive) interactive step editor only while the
+ * step is being edited. Every other step renders the read-only
+ * {@link TestStepPreview}, so a document of any size keeps at most one OverType
+ * editor alive — scrolling never mounts or tears down editors, which is what
+ * keeps the list flicker-free (and pasting/loading a large document fast).
  *
  * The step number is tracked here and pushed down as a prop. We subscribe to
  * editor changes but bail out of re-rendering when the number is unchanged, so
@@ -329,14 +346,17 @@ function TestStepPreview({
 function TestStepBlock({ block, editor }: { block: any; editor: any }) {
   // An empty step is almost always a freshly-inserted one that needs to focus
   // its title immediately, so mount its real editor eagerly. Steps with content
-  // (e.g. from a large paste) can safely start as a cheap preview.
+  // start as a cheap read-only preview and upgrade on click/focus.
   const isEmptyStep =
     !((block.props.stepTitle as string) || "") &&
     !((block.props.stepData as string) || "") &&
     !((block.props.expectedResult as string) || "");
-  const { ref, active, activate, shouldFocusOnActivate } = useDeferredMount<HTMLDivElement>({
-    initiallyActive: isEmptyStep,
-  });
+  const viewMode = useStepViewMode();
+  const [editing, setEditing] = useState(isEmptyStep);
+  // Set when editing begins from a click/focus on the preview, so the freshly
+  // mounted editor takes focus (a single click starts editing). Cleared after
+  // the editor consumes it.
+  const focusOnMountRef = useRef(false);
   const [stepNumber, setStepNumber] = useState(() =>
     computeStepNumber(editor.document, block.id),
   );
@@ -350,31 +370,54 @@ function TestStepBlock({ block, editor }: { block: any; editor: any }) {
     setStepNumber((prev) => (prev === next ? prev : next));
   }, editor);
 
-  if (active) {
+  const beginEditing = useCallback(() => {
+    focusOnMountRef.current = true;
+    setEditing(true);
+  }, []);
+
+  // Mousedown rather than click so the editor mounts before focus settles, and
+  // preventDefault so the browser doesn't move focus to <body> when the preview
+  // (the mousedown target) unmounts mid-click — that stray blur would otherwise
+  // immediately tear the new editor back down.
+  const beginEditingFromPointer = useCallback(
+    (event: ReactMouseEvent) => {
+      event.preventDefault();
+      beginEditing();
+    },
+    [beginEditing],
+  );
+
+  const endEditing = useCallback(() => setEditing(false), []);
+
+  if (editing) {
     // Empty steps mounted eagerly (freshly inserted) auto-focus their title.
     // A preview upgraded by a click focuses its field too, so a single click
-    // starts editing. Steps upgraded passively (scroll-into-view, hover
-    // pre-warm) must never steal focus.
+    // starts editing. The editor tears back down to a preview when focus
+    // leaves the step (see TestStepContent's blur handling).
     return (
       <TestStepContent
         block={block}
         editor={editor}
         stepNumber={stepNumber}
+        viewMode={viewMode}
         autoFocusEnabled={isEmptyStep}
-        focusOnMount={shouldFocusOnActivate}
+        focusOnMount={focusOnMountRef.current}
+        onEditEnd={endEditing}
       />
     );
   }
 
   return (
     <div
-      ref={ref}
-      onMouseDownCapture={() => activate(true)}
-      onFocusCapture={() => activate(true)}
+      className="bn-teststep-preview-wrapper"
+      tabIndex={0}
+      onMouseDownCapture={beginEditingFromPointer}
+      onFocusCapture={beginEditing}
     >
       <TestStepPreview
         blockId={block.id}
         stepNumber={stepNumber}
+        viewMode={viewMode}
         stepTitle={(block.props.stepTitle as string) || ""}
         stepData={(block.props.stepData as string) || ""}
         expectedResult={(block.props.expectedResult as string) || ""}
@@ -387,14 +430,18 @@ function TestStepContent({
   block,
   editor,
   stepNumber,
+  viewMode,
   autoFocusEnabled = false,
   focusOnMount = false,
+  onEditEnd,
 }: {
   block: any;
   editor: any;
   stepNumber: number;
+  viewMode: StepViewMode;
   autoFocusEnabled?: boolean;
   focusOnMount?: boolean;
+  onEditEnd?: () => void;
 }) {
       // When a preview is upgraded by a click, focus its primary field once on
       // mount so a single click starts editing (caret at end).
@@ -411,12 +458,8 @@ function TestStepContent({
       const [isDataVisible, setIsDataVisible] = useState(dataHasContent);
       const [shouldFocusDataField, setShouldFocusDataField] = useState(false);
       const uploadImage = useStepImageUpload();
-      const [viewMode, setViewMode] = useState<StepViewMode>(() => readStepViewMode());
       const containerRef = useRef<HTMLDivElement>(null);
       const [forceVertical, setForceVertical] = useState(false);
-      // In compact mode each step collapses to a reading-focused row and only
-      // expands to the full editing layout while one of its fields has focus.
-      const [expanded, setExpanded] = useState(false);
 
       useEffect(() => {
         const el = containerRef.current?.parentElement;
@@ -432,29 +475,41 @@ function TestStepContent({
 
       const compactMode = viewMode === "compact";
       const effectiveHorizontal = viewMode === "horizontal" && !forceVertical;
-      // Compact steps render the vertical layout but collapse their chrome until
-      // a field gains focus, at which point the step expands to "normal" editing.
-      const compactCollapsed = compactMode && !expanded;
-
+      // A mounted step is, by definition, the one being edited, so it always
+      // shows the full editing layout — the collapsed reading row is now the
+      // read-only preview's job.
+      const compactCollapsed = false;
+
+      // Tear the editor back down to the read-only preview once focus leaves the
+      // whole step. Re-checked on the next frame so transient blurs (clicking a
+      // toolbar button, or the link popover that portals to <body>) don't
+      // collapse an active edit. Edits persist to block props on change, so
+      // unmounting never loses data. Re-bound when the layout (and thus the root
+      // element) changes so it always listens on the live root.
       useEffect(() => {
-        if (typeof window === "undefined") {
+        const root = containerRef.current;
+        if (!root || !onEditEnd) {
           return;
         }
-        const handleStorage = (event: StorageEvent) => {
-          if (event.key === VIEW_MODE_KEY) {
-            setViewMode(readStepViewMode());
-          }
-        };
-        const handleLocal = () => {
-          setViewMode(readStepViewMode());
-        };
-        window.addEventListener("storage", handleStorage);
-        window.addEventListener("bn-step-view-mode", handleLocal as EventListener);
-        return () => {
-          window.removeEventListener("storage", handleStorage);
-          window.removeEventListener("bn-step-view-mode", handleLocal as EventListener);
+        const handleFocusOut = () => {
+          // Defer to the next frame so focus moving *within* the step (or to a
+          // popover that portals to <body>, e.g. the link editor) has settled
+          // before we decide whether editing has really ended.
+          requestAnimationFrame(() => {
+            const active = document.activeElement;
+            if (
+              active &&
+              (root.contains(active) ||
+                active.closest(".bn-popover-content, .bn-form-popover, [role='dialog']"))
+            ) {
+              return;
+            }
+            onEditEnd();
+          });
         };
-      }, []);
+        root.addEventListener("focusout", handleFocusOut);
+        return () => root.removeEventListener("focusout", handleFocusOut);
+      }, [onEditEnd, effectiveHorizontal]);
 
       const combinedStepValue = useMemo(() => {
         if (!stepData) {
@@ -588,34 +643,14 @@ function TestStepContent({
           next = "vertical";
         }
         writeStepViewMode(next);
-        setViewMode(next);
+        // The shared useStepViewMode hook (in every step, including this one)
+        // listens for this event and re-reads the mode, so we don't track it
+        // locally here.
         if (typeof window !== "undefined") {
           window.dispatchEvent(new Event("bn-step-view-mode"));
         }
       }, [viewMode, forceVertical]);
 
-      const handleContentFocusCapture = useCallback(() => {
-        if (viewMode === "compact") {
-          setExpanded(true);
-        }
-      }, [viewMode]);
-
-      const handleContentBlurCapture = useCallback(
-        (event: FocusEvent<HTMLDivElement>) => {
-          if (viewMode !== "compact") {
-            return;
-          }
-          // Keep the step expanded while focus stays inside it (e.g. moving to a
-          // toolbar or action button); collapse only when focus leaves entirely.
-          const nextTarget = event.relatedTarget as Node | null;
-          if (nextTarget && event.currentTarget.contains(nextTarget)) {
-            return;
-          }
-          setExpanded(false);
-        },
-        [viewMode],
-      );
-
       const [dataFocusSignal] = useState(0);
       const [expectedFocusSignal, setExpectedFocusSignal] = useState(0);
 
@@ -694,11 +729,7 @@ function TestStepContent({
             <span className="bn-teststep__number">{stepNumber}</span>
             <div className="bn-teststep__line" />
           </div>
-          <div
-            className="bn-teststep__content"
-            onFocus={handleContentFocusCapture}
-            onBlur={handleContentBlurCapture}
-          >
+          <div className="bn-teststep__content">
             <div className="bn-teststep__header">
               {!compactMode && <span className="bn-teststep__title">Step</span>}
               {viewToggleButton}

package/src/editor/blocks/stepField.tsx

@@ -1,5 +1,5 @@
 import OverType, { type OverType as OverTypeInstance } from "overtype";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { ReactNode, ChangeEvent } from "react";
 import { useComponentsContext } from "@blocknote/react";
 import { EditLinkMenuItems } from "@blocknote/react";
@@ -63,7 +63,26 @@ const READ_ONLY_ALLOWED_KEYS = new Set([
 
 const AUTOCOMPLETE_TRIGGER_KEYS = new Set([" ", "Space"]);
 
-const markdownParser = (OverType as { MarkdownParser?: { parse: (markdown: string) => string } }).MarkdownParser;
+const markdownParser = (
+  OverType as {
+    MarkdownParser?: {
+      parse: (
+        markdown: string,
+        activeLine?: number,
+        showActiveLineRaw?: boolean,
+        instanceHighlighter?: unknown,
+        isPreviewMode?: boolean,
+      ) => string;
+    };
+  }
+).MarkdownParser;
+
+/**
+ * `useLayoutEffect` that degrades to `useEffect` outside the browser so SSR
+ * doesn't warn. Static previews and the OverType mount run pre-paint to avoid a
+ * blank/jumping frame on the click→edit swap.
+ */
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 
 function ImageUploadIcon() {
   return (
@@ -674,6 +693,136 @@ function markdownToPlainText(markdown: string): string {
   }
 }
 
+const IMAGE_SYNTAX = /!\[([^\]]*)\]\(([^)]+)\)/g;
+
+/**
+ * Render a run of plain text, turning any `![alt](url)` markdown into real
+ * `<img>` elements. Returns a string when there are no images (so simple text
+ * stays a plain text node), otherwise a keyed array of strings and images.
+ */
+function renderTextWithImages(text: string, key: string): ReactNode {
+  if (!text.includes("![")) {
+    return text;
+  }
+  const nodes: ReactNode[] = [];
+  IMAGE_SYNTAX.lastIndex = 0;
+  let last = 0;
+  let part = 0;
+  let match: RegExpExecArray | null;
+  while ((match = IMAGE_SYNTAX.exec(text)) !== null) {
+    if (match.index > last) {
+      nodes.push(<Fragment key={`${key}-t${part++}`}>{text.slice(last, match.index)}</Fragment>);
+    }
+    nodes.push(<img key={`${key}-i${part++}`} src={match[2]} alt={match[1] || "Step image"} />);
+    last = match.index + match[0].length;
+  }
+  if (last < text.length) {
+    nodes.push(<Fragment key={`${key}-t${part++}`}>{text.slice(last)}</Fragment>);
+  }
+  return nodes;
+}
+
+/**
+ * Render a step field's markdown as a faithful, read-only reading view: the same
+ * clean text + bold/italic/code/link decorations + inline images the live
+ * OverType preview shows, but as plain React children (no editor, no refs, no
+ * imperative DOM — BlockNote's node-view renderer doesn't attach refs the way a
+ * normal React commit does, so the content must be declarative).
+ *
+ * Decorations are applied by slicing the plain text at every formatting/link
+ * boundary and wrapping each segment in the same `step-preview-*` elements the
+ * live editor uses, so all existing CSS applies unchanged.
+ */
+function renderStepFieldContent(value: string): ReactNode {
+  const { plainText, links, formatting } = stripInlineMarkdown(value);
+  if (!plainText) {
+    return null;
+  }
+  if (formatting.length === 0 && links.length === 0) {
+    return renderTextWithImages(plainText, "p");
+  }
+
+  const len = plainText.length;
+  const points = new Set<number>([0, len]);
+  for (const f of formatting) {
+    points.add(Math.max(0, f.start));
+    points.add(Math.min(len, f.end));
+  }
+  for (const l of links) {
+    points.add(Math.max(0, l.start));
+    points.add(Math.min(len, l.end));
+  }
+  const sorted = [...points].sort((a, b) => a - b);
+
+  const out: ReactNode[] = [];
+  for (let i = 0; i < sorted.length - 1; i++) {
+    const a = sorted[i];
+    const b = sorted[i + 1];
+    if (a >= b) {
+      continue;
+    }
+    const text = plainText.slice(a, b);
+    const fmts = new Set(
+      formatting.filter((f) => f.start <= a && f.end >= b).map((f) => f.type),
+    );
+    const link = links.find((l) => l.start <= a && l.end >= b);
+
+    let node: ReactNode = renderTextWithImages(text, `s${i}`);
+    if (fmts.has("code")) {
+      node = <code className="step-preview-code">{node}</code>;
+    }
+    if (fmts.has("italic")) {
+      node = <em className="step-preview-italic">{node}</em>;
+    }
+    if (fmts.has("bold")) {
+      node = <strong className="step-preview-bold">{node}</strong>;
+    }
+    if (link) {
+      node = (
+        <a className="step-preview-link" href={link.url}>
+          {node}
+        </a>
+      );
+    }
+    out.push(<Fragment key={i}>{node}</Fragment>);
+  }
+  return out;
+}
+
+/**
+ * Lightweight, non-interactive stand-in for {@link StepField}. Mounts no
+ * OverType editor, observers, or event handlers — just a styled
+ * `.bn-step-editor--preview` box whose markdown is rendered declaratively. Used
+ * for every step that isn't currently being edited.
+ */
+export function StepFieldPreview({
+  value,
+  fieldName,
+  multiline = true,
+}: {
+  value: string;
+  fieldName?: string;
+  multiline?: boolean;
+}) {
+  const content = useMemo(() => renderStepFieldContent(value), [value]);
+
+  const editorClassName = [
+    "bn-step-editor",
+    multiline ? "bn-step-editor--multiline" : "",
+    "bn-step-editor--preview",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className="bn-step-field">
+      <div className={editorClassName} data-step-field={fieldName}>
+        {content}
+      </div>
+    </div>
+  );
+}
+
 export function StepField({
   label,
   showLabel = true,
@@ -712,6 +861,10 @@ export function StepField({
   const autoFocusRef = useRef(false);
   const pendingFocusRef = useRef(false);
   const initialValueRef = useRef(value);
+  // Read at OverType init so the editor mounts already-collapsed in compact
+  // mode (no tall first frame before the compact layout effect runs).
+  const compactModeRef = useRef(compactMode);
+  compactModeRef.current = compactMode;
   const onChangeRef = useRef(onChange);
   const [plainTextValue, setPlainTextValue] = useState(() => markdownToPlainText(value));
   const [isFocused, setIsFocused] = useState(false);
@@ -799,7 +952,7 @@ export function StepField({
     onChangeRef.current?.(markdown);
   }, [pushUndoSnapshot]);
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const container = editorContainerRef.current;
     if (!container) {
       return;
@@ -820,11 +973,16 @@ export function StepField({
       value: plainText,
       placeholder: resolvedPlaceholder,
       autoResize: multiline,
-      minHeight: multiline ? "4rem" : "2.5rem",
+      // Seed the compact floor at init so a clicked step paints already
+      // collapsed — the compact layout effect below keeps it in sync after.
+      minHeight: compactModeRef.current ? "0px" : multiline ? "4rem" : "2.5rem",
       padding: "0.5rem 0.75rem",
       fontSize: "0.95rem",
       onChange: handleEditorChange,
     });
+    if (compactModeRef.current && instance.textarea) {
+      instance.textarea.rows = 1;
+    }
 
     // Monkey-patch updatePreview to add link highlights
     const originalUpdatePreview = instance.updatePreview.bind(instance);
@@ -976,7 +1134,7 @@ export function StepField({
   // so caret and value survive. Driven by the stable compactMode flag (not
   // `compact`) so collapsed and expanded share one height — focusing never
   // shifts the layout.
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const instance = editorInstanceRef.current as
       | (OverTypeInstance & {
           options?: { minHeight?: string };

package/src/editor/styles.css

@@ -631,6 +631,30 @@ html.dark .bn-step-editor .overtype-wrapper .overtype-preview a.step-preview-lin
   vertical-align: 1px;
 }
 
+/* Read-only preview parity for compact reading rows: the live compact field
+   tightens padding on the OverType layers (above), which the static preview
+   doesn't have, so apply the same padding to the flow `--preview` box. */
+.bn-teststep--compact .bn-step-editor--preview {
+  padding: 4px 12px;
+}
+
+/* Same "Expected" reading badge for the static preview. The static preview is a
+   single flow box (not OverType's per-line divs), so the badge goes on its own
+   ::before. */
+.bn-teststep--collapsed .bn-step-editor--preview[data-step-field="expected"]::before {
+  content: "Expected";
+  display: inline-block;
+  margin-right: 8px;
+  padding: 0 6px;
+  border-radius: 4px;
+  background: var(--step-bg-light);
+  color: var(--step-muted);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 18px;
+  vertical-align: 1px;
+}
+
 .bn-teststep__view-toggle--compact svg {
   color: var(--step-muted);
 }
@@ -1432,6 +1456,58 @@ html.dark .bn-step-editor--preview {
   color: #e5e5e5;
 }
 
+/* Wrapper around a non-edited step's read-only preview. Focusable so Tab enters
+   a step (which mounts its editor); no lingering outline since focus moves to
+   the freshly-mounted field immediately. */
+.bn-teststep-preview-wrapper {
+  outline: none;
+}
+
+/* Inline decorations inside the read-only preview mirror the live OverType
+   preview, which uses the same step-preview-* classes. The live rules are
+   scoped to `.overtype-wrapper .overtype-preview` (which the static preview
+   doesn't render), so the same declarations are repeated here for the flow
+   `--preview` container. */
+.bn-step-editor--preview a.step-preview-link {
+  color: #4f46e5;
+  text-decoration: underline;
+  pointer-events: none;
+}
+
+.bn-step-editor--preview strong.step-preview-bold {
+  -webkit-text-stroke: 0.5px currentColor;
+  font-weight: inherit;
+  color: inherit;
+}
+
+.bn-step-editor--preview em.step-preview-italic {
+  font-style: italic;
+  color: inherit;
+}
+
+.bn-step-editor--preview code.step-preview-code {
+  background-color: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  color: rgb(146, 64, 14);
+}
+
+.bn-step-editor--preview img {
+  display: block;
+  max-width: 100%;
+  border-radius: 0.65rem;
+  margin: 0.5rem 0;
+  pointer-events: none;
+}
+
+html.dark .bn-step-editor--preview code.step-preview-code {
+  color: rgba(251, 191, 36, 1);
+}
+
+html.dark .bn-step-editor--preview a.step-preview-link {
+  color: rgba(129, 140, 248, 1);
+}
+
 .bn-step-editor.bn-step-editor--focused {
   outline: none;
   box-shadow: none;