/** * MarkdownEditor component using GitHub's official @github/markdown-toolbar-element * with Primer React styling. This provides the same markdown editing experience * used on github.com. * * @see https://github.com/github/markdown-toolbar-element */ import { useId, useRef, useState, useEffect } from "react"; import { Box, Text, Button, IconButton, useTheme } from "@primer/react"; import { BoldIcon, ItalicIcon, QuoteIcon, CodeIcon, LinkIcon, ListUnorderedIcon, ListOrderedIcon, TasklistIcon, MarkdownIcon, } from "@primer/octicons-react"; import Markdown from "react-markdown"; import remarkGfm from "remark-gfm"; // Import and register the web component import "@github/markdown-toolbar-element"; // Declare types for the web component elements declare global { namespace JSX { interface IntrinsicElements { "markdown-toolbar": React.DetailedHTMLProps< React.HTMLAttributes & { for: string }, HTMLElement >; "md-bold": React.DetailedHTMLProps< React.HTMLAttributes, HTMLElement >; "md-italic": React.DetailedHTMLProps< React.HTMLAttributes, HTMLElement >; "md-quote": React.DetailedHTMLProps< React.HTMLAttributes, HTMLElement >; "md-code": React.DetailedHTMLProps< React.HTMLAttributes, HTMLElement >; "md-link": React.DetailedHTMLProps< React.HTMLAttributes, HTMLElement >; "md-unordered-list": React.DetailedHTMLProps< React.HTMLAttributes, HTMLElement >; "md-ordered-list": React.DetailedHTMLProps< React.HTMLAttributes, HTMLElement >; "md-task-list": React.DetailedHTMLProps< React.HTMLAttributes, HTMLElement >; } } } interface MarkdownEditorProps { value: string; onChange: (value: string) => void; placeholder?: string; minHeight?: number; } export function MarkdownEditor({ value, onChange, placeholder = "Add a description...", minHeight = 150, }: MarkdownEditorProps) { const textareaId = useId(); const textareaRef = useRef(null); const [viewMode, setViewMode] = useState<"write" | "preview">("write"); const { colorScheme } = useTheme(); const isDark = colorScheme === "dark" || colorScheme === "dark_dimmed"; // Sync external value changes to textarea useEffect(() => { if (textareaRef.current && textareaRef.current.value !== value) { textareaRef.current.value = value; } }, [value]); // Handle Enter key for list continuation const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key !== "Enter" || e.shiftKey) return; const textarea = textareaRef.current; if (!textarea) return; const { selectionStart, value: currentValue } = textarea; // Get the current line const beforeCursor = currentValue.substring(0, selectionStart); const lastNewline = beforeCursor.lastIndexOf("\n"); const currentLine = beforeCursor.substring(lastNewline + 1); // Match different list patterns const unorderedMatch = currentLine.match(/^(\s*)([-*])\s/); const orderedMatch = currentLine.match(/^(\s*)(\d+)\.\s/); const taskMatch = currentLine.match(/^(\s*)([-*])\s\[[ x]\]\s/); let prefix = ""; let isEmpty = false; if (taskMatch) { const indent = taskMatch[1]; const marker = taskMatch[2]; // Check if the line only has the list marker with no content isEmpty = currentLine.trim() === `${marker} [ ]` || currentLine.trim() === `${marker} [x]`; prefix = `${indent}${marker} [ ] `; } else if (orderedMatch) { const indent = orderedMatch[1]; const num = parseInt(orderedMatch[2], 10); // Check if the line only has the list marker isEmpty = currentLine.trim() === `${num}.`; prefix = `${indent}${num + 1}. `; } else if (unorderedMatch) { const indent = unorderedMatch[1]; const marker = unorderedMatch[2]; // Check if the line only has the list marker isEmpty = currentLine.trim() === marker; prefix = `${indent}${marker} `; } if (prefix) { e.preventDefault(); if (isEmpty) { // If just the list marker, remove it and exit list const newValue = currentValue.substring(0, lastNewline + 1) + currentValue.substring(selectionStart); onChange(newValue); // Set cursor position after React updates requestAnimationFrame(() => { if (textarea) { textarea.selectionStart = textarea.selectionEnd = lastNewline + 1; textarea.focus(); } }); } else { // Continue the list on the next line const afterCursor = currentValue.substring(selectionStart); const newValue = beforeCursor + "\n" + prefix + afterCursor; onChange(newValue); // Set cursor position after the prefix const newCursorPos = selectionStart + 1 + prefix.length; requestAnimationFrame(() => { if (textarea) { textarea.selectionStart = textarea.selectionEnd = newCursorPos; textarea.focus(); } }); } } }; return ( {/* Header with tabs and toolbar */} {/* Write/Preview tabs */} {/* Toolbar - uses GitHub's official markdown-toolbar-element */} {viewMode === "write" && ( )} {/* Content area */} {viewMode === "write" ? (