create-yss-spec 1.1.1 → 1.1.3

package/template/.codex/skills/data-analytics/src/analytics-app/layout/RichMarkdown.tsx

@@ -0,0 +1,681 @@
+import {
+  $convertFromMarkdownString,
+  $convertToMarkdownString,
+  BOLD_STAR,
+  HEADING,
+  INLINE_CODE,
+  LINK,
+  ORDERED_LIST,
+  QUOTE,
+  UNORDERED_LIST,
+  type Transformer
+} from "@lexical/markdown";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { LinkNode } from "@lexical/link";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import {
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_HIGH,
+  KEY_ESCAPE_COMMAND,
+  PASTE_COMMAND
+} from "lexical";
+import {
+  type CSSProperties,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type MouseEvent as ReactMouseEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+const MARKDOWN_TRANSFORMERS: Transformer[] = [
+  HEADING,
+  QUOTE,
+  UNORDERED_LIST,
+  ORDERED_LIST,
+  BOLD_STAR,
+  INLINE_CODE,
+  LINK
+];
+const MARKDOWN_COMMIT_DEBOUNCE_MS = 180;
+
+type RichMarkdownFocusPoint = {
+  clientX: number;
+  clientY: number;
+};
+
+type CaretPositionDocument = Document & {
+  caretPositionFromPoint?: (
+    x: number,
+    y: number
+  ) => { offset: number; offsetNode: Node } | null;
+  caretRangeFromPoint?: (x: number, y: number) => Range | null;
+};
+
+export type RichMarkdownActivation = "click" | "doubleClick" | "manual";
+export type RichMarkdownVariant = "cellHeader" | "pageHeader" | "reportBlock";
+
+export type RichMarkdownProps = {
+  activation?: RichMarkdownActivation;
+  ariaLabel: string;
+  className?: string;
+  isEditMode?: boolean;
+  markdown: string;
+  minRows?: number;
+  onCommit?: (nextMarkdown: string) => void;
+  onMarkdownChange: (nextMarkdown: string) => void;
+  onRequestEditMode?: () => void;
+  placeholder: string;
+  variant?: RichMarkdownVariant;
+};
+
+const richMarkdownTheme = {
+  heading: {
+    h1: "rich-markdown-heading rich-markdown-heading-1",
+    h2: "rich-markdown-heading rich-markdown-heading-2",
+    h3: "rich-markdown-heading rich-markdown-heading-3"
+  },
+  link: "rich-markdown-link",
+  list: {
+    listitem: "rich-markdown-list-item",
+    ol: "rich-markdown-list",
+    ul: "rich-markdown-list"
+  },
+  quote: "rich-markdown-quote",
+  text: {
+    bold: "rich-markdown-bold",
+    code: "rich-markdown-inline-code"
+  }
+};
+
+function renderMarkdownInline(text: string) {
+  const parts = text.split(/(`[^`]+`|\*\*[^*]+\*\*|\[[^\]]+\]\([^)]+\))/g);
+  return parts.map((part, index) => {
+    if (part.startsWith("**") && part.endsWith("**") && part.length > 4) {
+      return <strong key={`${part}-${index}`}>{part.slice(2, -2)}</strong>;
+    }
+    if (part.startsWith("`") && part.endsWith("`") && part.length > 2) {
+      return <code key={`${part}-${index}`}>{part.slice(1, -1)}</code>;
+    }
+    const linkMatch = /^\[([^\]]+)\]\(([^)]+)\)$/.exec(part);
+    if (linkMatch) {
+      return (
+        <a href={linkMatch[2]} key={`${part}-${index}`} rel="noreferrer" target="_blank">
+          {linkMatch[1]}
+        </a>
+      );
+    }
+    return <span key={`${part}-${index}`}>{part}</span>;
+  });
+}
+
+type MarkdownTableAlignment = "center" | "left" | "right";
+
+function splitMarkdownTableRow(line: string) {
+  const trimmed = line.trim();
+  const withoutLeadingPipe = trimmed.startsWith("|") ? trimmed.slice(1) : trimmed;
+  const withoutOuterPipes = withoutLeadingPipe.endsWith("|")
+    ? withoutLeadingPipe.slice(0, -1)
+    : withoutLeadingPipe;
+  return withoutOuterPipes
+    .split(/(?<!\\)\|/g)
+    .map((cell) => cell.replace(/\\\|/g, "|").trim());
+}
+
+function parseMarkdownTableSeparator(line: string): MarkdownTableAlignment[] | null {
+  const cells = splitMarkdownTableRow(line);
+  if (!cells.length) return null;
+  const alignments: MarkdownTableAlignment[] = [];
+  for (const cell of cells) {
+    if (!/^:?-{3,}:?$/.test(cell)) return null;
+    if (cell.startsWith(":") && cell.endsWith(":")) alignments.push("center");
+    else if (cell.endsWith(":")) alignments.push("right");
+    else alignments.push("left");
+  }
+  return alignments;
+}
+
+function isMarkdownTableStart(lines: string[], index: number) {
+  const header = lines[index]?.trim() ?? "";
+  const separator = lines[index + 1]?.trim() ?? "";
+  return header.includes("|") && Boolean(parseMarkdownTableSeparator(separator));
+}
+
+function isMarkdownTableRow(line: string) {
+  const trimmed = line.trim();
+  return Boolean(trimmed) && trimmed.includes("|");
+}
+
+export function normalizeInlineOrderedListMarkers(markdown: string) {
+  return markdown
+    .replace(/\u00a0/g, " ")
+    .split(/\r?\n/)
+    .map((line) => {
+      if (!/^\s*\d+[.)]\s+/.test(line)) return line;
+      return line.replace(/([^\n])[\t ]+(?=\d+[.)]\s+)/g, "$1\n");
+    })
+    .join("\n");
+}
+
+export function RichMarkdownPreview({ markdown }: { markdown: string }) {
+  const lines = normalizeInlineOrderedListMarkers(markdown).split(/\r?\n/);
+  const nodes: ReactNode[] = [];
+  let paragraph: string[] = [];
+  let listItems: string[] = [];
+  let orderedListItems: string[] = [];
+  let blockquote: string[] = [];
+
+  function flushParagraph() {
+    if (!paragraph.length) return;
+    nodes.push(<p key={`p-${nodes.length}`}>{renderMarkdownInline(paragraph.join(" "))}</p>);
+    paragraph = [];
+  }
+
+  function flushList() {
+    if (!listItems.length) return;
+    nodes.push(
+      <ul key={`ul-${nodes.length}`}>
+        {listItems.map((item, index) => (
+          <li key={`${item}-${index}`}>{renderMarkdownInline(item)}</li>
+        ))}
+      </ul>
+    );
+    listItems = [];
+  }
+
+  function flushOrderedList() {
+    if (!orderedListItems.length) return;
+    nodes.push(
+      <ol key={`ol-${nodes.length}`}>
+        {orderedListItems.map((item, index) => (
+          <li key={`${item}-${index}`}>{renderMarkdownInline(item)}</li>
+        ))}
+      </ol>
+    );
+    orderedListItems = [];
+  }
+
+  function flushBlockquote() {
+    if (!blockquote.length) return;
+    nodes.push(
+      <blockquote key={`blockquote-${nodes.length}`}>
+        {blockquote.map((item, index) => (
+          <p key={`${item}-${index}`}>{renderMarkdownInline(item)}</p>
+        ))}
+      </blockquote>
+    );
+    blockquote = [];
+  }
+
+  function flushTextRuns() {
+    flushParagraph();
+    flushList();
+    flushOrderedList();
+    flushBlockquote();
+  }
+
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index];
+    const trimmed = line.trim();
+    if (!trimmed) {
+      flushParagraph();
+      flushBlockquote();
+      continue;
+    }
+    if (isMarkdownTableStart(lines, index)) {
+      flushTextRuns();
+      const headers = splitMarkdownTableRow(lines[index]);
+      const alignments = parseMarkdownTableSeparator(lines[index + 1]) ?? [];
+      const rows: string[][] = [];
+      index += 2;
+      while (index < lines.length && isMarkdownTableRow(lines[index])) {
+        rows.push(splitMarkdownTableRow(lines[index]));
+        index += 1;
+      }
+      index -= 1;
+      nodes.push(
+        <div className="rich-markdown-table-scroll" key={`table-${nodes.length}`}>
+          <table className="rich-markdown-table">
+            <thead>
+              <tr>
+                {headers.map((header, headerIndex) => (
+                  <th
+                    key={`${header}-${headerIndex}`}
+                    style={{ textAlign: alignments[headerIndex] ?? "left" }}
+                  >
+                    {renderMarkdownInline(header)}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row, rowIndex) => (
+                <tr key={`row-${rowIndex}`}>
+                  {headers.map((_, cellIndex) => (
+                    <td
+                      key={`cell-${rowIndex}-${cellIndex}`}
+                      style={{ textAlign: alignments[cellIndex] ?? "left" }}
+                    >
+                      {renderMarkdownInline(row[cellIndex] ?? "")}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      );
+      continue;
+    }
+    if (/^(-{3,}|\*{3,}|_{3,})$/.test(trimmed)) {
+      flushTextRuns();
+      nodes.push(<hr key={`hr-${nodes.length}`} />);
+      continue;
+    }
+    const headingMatch = /^(#{1,3})\s+(.+)$/.exec(trimmed);
+    if (headingMatch) {
+      flushTextRuns();
+      const level = headingMatch[1].length;
+      const content = renderMarkdownInline(headingMatch[2]);
+      if (level === 1) nodes.push(<h1 key={`h-${nodes.length}`}>{content}</h1>);
+      else if (level === 2) nodes.push(<h2 key={`h-${nodes.length}`}>{content}</h2>);
+      else nodes.push(<h3 key={`h-${nodes.length}`}>{content}</h3>);
+      continue;
+    }
+    const blockquoteMatch = /^>\s?(.*)$/.exec(trimmed);
+    if (blockquoteMatch) {
+      flushParagraph();
+      flushList();
+      flushOrderedList();
+      const content = blockquoteMatch[1].trim();
+      if (content) blockquote.push(content);
+      continue;
+    }
+    const listMatch = /^[-*]\s+(.+)$/.exec(trimmed);
+    if (listMatch) {
+      flushParagraph();
+      flushOrderedList();
+      flushBlockquote();
+      listItems.push(listMatch[1]);
+      continue;
+    }
+    const orderedListMatch = /^\d+[.)]\s+(.+)$/.exec(trimmed);
+    if (orderedListMatch) {
+      flushParagraph();
+      flushList();
+      flushBlockquote();
+      orderedListItems.push(orderedListMatch[1]);
+      continue;
+    }
+    flushList();
+    flushOrderedList();
+    flushBlockquote();
+    paragraph.push(trimmed);
+  }
+
+  flushTextRuns();
+
+  return <>{nodes.length ? nodes : <p className="markdown-placeholder">Double-click to edit text.</p>}</>;
+}
+
+function normalizeEditorMarkdown(markdown: string) {
+  return normalizeInlineOrderedListMarkers(markdown)
+    .replace(/[ \t]+\n/g, "\n")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}
+
+function htmlToMarkdown(html: string) {
+  if (typeof DOMParser === "undefined") return "";
+  const document = new DOMParser().parseFromString(html, "text/html");
+
+  function childrenToMarkdown(node: Node): string {
+    return Array.from(node.childNodes).map(nodeToMarkdown).join("");
+  }
+
+  function nodeToMarkdown(node: Node): string {
+    if (node.nodeType === Node.TEXT_NODE) return node.textContent ?? "";
+    if (!(node instanceof HTMLElement)) return childrenToMarkdown(node);
+
+    const content = childrenToMarkdown(node).trim();
+    switch (node.tagName.toLowerCase()) {
+      case "a": {
+        const href = node.getAttribute("href");
+        return href && content ? `[${content}](${href})` : content;
+      }
+      case "b":
+      case "strong":
+        return content ? `**${content}**` : "";
+      case "br":
+        return "\n";
+      case "code":
+        return content ? `\`${content.replaceAll("`", "'")}\`` : "";
+      case "h1":
+        return content ? `# ${content}\n\n` : "";
+      case "h2":
+        return content ? `## ${content}\n\n` : "";
+      case "h3":
+        return content ? `### ${content}\n\n` : "";
+      case "li":
+        return content ? `- ${content}\n` : "";
+      case "ol":
+      case "ul":
+        return `${childrenToMarkdown(node).trim()}\n\n`;
+      case "div":
+      case "p":
+      case "section":
+        return content ? `${content}\n\n` : "";
+      default:
+        return content;
+    }
+  }
+
+  return normalizeEditorMarkdown(childrenToMarkdown(document.body));
+}
+
+function MarkdownChangePlugin({ onDraftChange }: { onDraftChange: (nextMarkdown: string) => void }) {
+  return (
+    <OnChangePlugin
+      ignoreSelectionChange
+      onChange={(editorState) => {
+        editorState.read(() => {
+          onDraftChange(normalizeEditorMarkdown($convertToMarkdownString(MARKDOWN_TRANSFORMERS)));
+        });
+      }}
+    />
+  );
+}
+
+function rangeFromPoint(
+  document: CaretPositionDocument,
+  point: RichMarkdownFocusPoint
+): Range | null {
+  const position = document.caretPositionFromPoint?.(point.clientX, point.clientY);
+  if (position) {
+    const range = document.createRange();
+    range.setStart(position.offsetNode, position.offset);
+    range.collapse(true);
+    return range;
+  }
+  return document.caretRangeFromPoint?.(point.clientX, point.clientY) ?? null;
+}
+
+function focusContentEditableAtPoint(
+  rootElement: HTMLElement,
+  point: RichMarkdownFocusPoint
+): boolean {
+  const ownerDocument = rootElement.ownerDocument as CaretPositionDocument;
+  const range = rangeFromPoint(ownerDocument, point);
+  if (!range || !rootElement.contains(range.startContainer)) return false;
+  const selection = ownerDocument.defaultView?.getSelection();
+  if (!selection) return false;
+
+  rootElement.focus({ preventScroll: true });
+  selection.removeAllRanges();
+  selection.addRange(range);
+  return true;
+}
+
+function FocusOnMountPlugin({ focusPoint }: { focusPoint: RichMarkdownFocusPoint | null }) {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    const frame = window.requestAnimationFrame(() => {
+      const rootElement = editor.getRootElement();
+      if (rootElement && focusPoint && focusContentEditableAtPoint(rootElement, focusPoint)) {
+        return;
+      }
+      editor.focus(() => {}, { defaultSelection: "rootEnd" });
+    });
+    return () => window.cancelAnimationFrame(frame);
+  }, [editor, focusPoint]);
+
+  return null;
+}
+
+function CommitOnEscapePlugin({ onCommit }: { onCommit: () => void }) {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return editor.registerCommand(
+      KEY_ESCAPE_COMMAND,
+      (event) => {
+        event?.preventDefault();
+        onCommit();
+        return true;
+      },
+      COMMAND_PRIORITY_HIGH
+    );
+  }, [editor, onCommit]);
+
+  return null;
+}
+
+function PasteSanitizerPlugin() {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return editor.registerCommand(
+      PASTE_COMMAND,
+      (event) => {
+        if (!("clipboardData" in event) || !event.clipboardData) return false;
+        const html = event.clipboardData.getData("text/html");
+        if (!html) return false;
+        const markdown = htmlToMarkdown(html);
+        if (!markdown) return false;
+        event.preventDefault();
+        editor.update(() => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) selection.insertText(markdown);
+        });
+        return true;
+      },
+      COMMAND_PRIORITY_HIGH
+    );
+  }, [editor]);
+
+  return null;
+}
+
+export function RichMarkdown({
+  activation = "doubleClick",
+  ariaLabel,
+  className,
+  isEditMode = false,
+  markdown,
+  minRows = 1,
+  onCommit,
+  onMarkdownChange,
+  onRequestEditMode,
+  placeholder,
+  variant = "reportBlock"
+}: RichMarkdownProps) {
+  const editorId = useId();
+  const [isEditing, setIsEditing] = useState(false);
+  const [editSessionKey, setEditSessionKey] = useState(0);
+  const initialMarkdownRef = useRef(markdown);
+  const latestDraftRef = useRef(markdown);
+  const lastEmittedRef = useRef(markdown);
+  const debounceRef = useRef<number | null>(null);
+  const focusPointRef = useRef<RichMarkdownFocusPoint | null>(null);
+  const isEditingRef = useRef(isEditing);
+  const flushRef = useRef<() => void>(() => {});
+  const displayMarkdown = markdown.trim() ? markdown : placeholder;
+  const variantClassName = `rich-markdown-${variant}`;
+
+  useEffect(() => {
+    if (!isEditing) {
+      latestDraftRef.current = markdown;
+      lastEmittedRef.current = markdown;
+    }
+  }, [isEditing, markdown]);
+
+  useEffect(() => {
+    isEditingRef.current = isEditing;
+  }, [isEditing]);
+
+  const emitMarkdownChange = useCallback((nextMarkdown: string) => {
+    if (nextMarkdown === lastEmittedRef.current) return;
+    lastEmittedRef.current = nextMarkdown;
+    onMarkdownChange(nextMarkdown);
+  }, [onMarkdownChange]);
+
+  const flushMarkdownChange = useCallback(() => {
+    if (debounceRef.current !== null) {
+      window.clearTimeout(debounceRef.current);
+      debounceRef.current = null;
+    }
+    const nextMarkdown = latestDraftRef.current;
+    emitMarkdownChange(nextMarkdown);
+    onCommit?.(nextMarkdown);
+  }, [emitMarkdownChange, onCommit]);
+
+  flushRef.current = flushMarkdownChange;
+
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current !== null) window.clearTimeout(debounceRef.current);
+      if (isEditingRef.current) flushRef.current();
+    };
+  }, []);
+
+  const scheduleMarkdownChange = useCallback((nextMarkdown: string) => {
+    latestDraftRef.current = nextMarkdown;
+    if (debounceRef.current !== null) window.clearTimeout(debounceRef.current);
+    debounceRef.current = window.setTimeout(() => {
+      debounceRef.current = null;
+      emitMarkdownChange(latestDraftRef.current);
+    }, MARKDOWN_COMMIT_DEBOUNCE_MS);
+  }, [emitMarkdownChange]);
+
+  const startEditing = useCallback((focusPoint: RichMarkdownFocusPoint | null = null) => {
+    initialMarkdownRef.current = markdown;
+    latestDraftRef.current = markdown;
+    lastEmittedRef.current = markdown;
+    focusPointRef.current = focusPoint;
+    setEditSessionKey((current) => current + 1);
+    setIsEditing(true);
+  }, [markdown]);
+
+  const handlePreviewClick = useCallback((event: ReactMouseEvent<HTMLDivElement>) => {
+    if (!isEditMode || activation === "manual") return;
+    event.preventDefault();
+    window.getSelection()?.removeAllRanges();
+    startEditing({ clientX: event.clientX, clientY: event.clientY });
+  }, [activation, isEditMode, startEditing]);
+
+  const handlePreviewDoubleClick = useCallback((event: ReactMouseEvent<HTMLDivElement>) => {
+    if (activation === "manual" && isEditMode) return;
+    event.preventDefault();
+    event.stopPropagation();
+    window.getSelection()?.removeAllRanges();
+    if (!isEditMode) onRequestEditMode?.();
+    startEditing({ clientX: event.clientX, clientY: event.clientY });
+  }, [activation, isEditMode, onRequestEditMode, startEditing]);
+
+  const handlePreviewMouseDownCapture = useCallback((event: ReactMouseEvent<HTMLDivElement>) => {
+    if (!isEditMode && activation !== "manual" && event.detail > 1) {
+      event.preventDefault();
+      event.stopPropagation();
+      window.getSelection()?.removeAllRanges();
+      onRequestEditMode?.();
+      startEditing({ clientX: event.clientX, clientY: event.clientY });
+    }
+  }, [activation, isEditMode, onRequestEditMode, startEditing]);
+
+  const commitAndClose = useCallback(() => {
+    flushMarkdownChange();
+    setIsEditing(false);
+  }, [flushMarkdownChange]);
+
+  const initialConfig = useMemo(() => ({
+    editorState: () => {
+      $convertFromMarkdownString(initialMarkdownRef.current, MARKDOWN_TRANSFORMERS);
+    },
+    namespace: `DataScienceRichMarkdown-${editorId}-${editSessionKey}`,
+    nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode],
+    onError(error: Error) {
+      throw error;
+    },
+    theme: richMarkdownTheme
+  }), [editSessionKey, editorId]);
+
+  const interactiveProps =
+    isEditMode && activation !== "manual"
+      ? { onClick: handlePreviewClick }
+      : activation !== "manual" || onRequestEditMode
+        ? { onDoubleClick: handlePreviewDoubleClick }
+        : {};
+
+  if (isEditing) {
+    return (
+      <div
+        className={`rich-markdown-editor-shell viz-card__no-drag ${variantClassName}`.trim()}
+        style={{ "--rich-markdown-min-height": `${Math.max(1, minRows) * 22}px` } as CSSProperties}
+      >
+        <LexicalComposer initialConfig={initialConfig} key={editSessionKey}>
+          <RichTextPlugin
+            contentEditable={
+              <ContentEditable
+                aria-label={ariaLabel}
+                className={`markdown-render markdown-edit-target rich-markdown rich-markdown-editor viz-card__no-drag ${variantClassName} ${className ?? ""}`.trim()}
+                onBlur={commitAndClose}
+                spellCheck
+              />
+            }
+            ErrorBoundary={LexicalErrorBoundary}
+            placeholder={
+              <div className={`markdown-render rich-markdown-placeholder ${variantClassName} ${className ?? ""}`.trim()}>
+                <RichMarkdownPreview markdown={placeholder} />
+              </div>
+            }
+          />
+          <HistoryPlugin />
+          <FocusOnMountPlugin focusPoint={focusPointRef.current} />
+          <MarkdownShortcutPlugin transformers={MARKDOWN_TRANSFORMERS} />
+          <MarkdownChangePlugin onDraftChange={scheduleMarkdownChange} />
+          <CommitOnEscapePlugin onCommit={commitAndClose} />
+          <PasteSanitizerPlugin />
+        </LexicalComposer>
+      </div>
+    );
+  }
+
+  function handleKeyDown(event: ReactKeyboardEvent<HTMLDivElement>) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (!isEditMode) onRequestEditMode?.();
+      startEditing();
+    }
+  }
+
+  return (
+    <div
+      aria-label={ariaLabel}
+      className={`markdown-render markdown-edit-target rich-markdown rich-markdown-preview viz-card__no-drag ${variantClassName} ${className ?? ""}`.trim()}
+      data-rich-markdown-activation={activation}
+      data-rich-markdown-edit-mode={isEditMode ? "true" : "false"}
+      data-rich-markdown-variant={variant}
+      onKeyDown={handleKeyDown}
+      onMouseDownCapture={handlePreviewMouseDownCapture}
+      role="button"
+      tabIndex={0}
+      {...interactiveProps}
+    >
+      <RichMarkdownPreview markdown={displayMarkdown} />
+    </div>
+  );
+}