@mp-lb/mdkit 0.2.5 → 0.3.0

package/README.md

@@ -63,6 +63,7 @@ import {
 
 const document = useMdKitDocument({
   adapter,
+  debounceMs: 1000,
   documentId: "docs/brief.md",
 });
 

package/dist/document/useMdKitDocument.js

@@ -5,7 +5,7 @@ const emptyDocumentState = {
     version: null,
 };
 export const useMdKitDocument = (options) => {
-    const { adapter, debounceMs = 350, documentId, pollMs = 2000 } = options;
+    const { adapter, debounceMs = 1000, documentId, pollMs = 2000 } = options;
     const [local, setLocal] = useState("");
     const [base, setBase] = useState("");
     const [version, setVersion] = useState(null);

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { MdKitConflictPanel } from "./document/MdKitConflictPanel.js";
 export { MdKitDocumentToolbar } from "./document/MdKitDocumentToolbar.js";
 export { MdKitEditor } from "./markdown/MdKitEditor.js";
 export { MdKitView } from "./markdown/MdKitView.js";
+export { extractYamlFrontMatter, hasYamlFrontMatter, parseYamlFrontMatter, prependYamlFrontMatter, removeYamlFrontMatter, } from "./markdown/yamlFrontMatter.js";
 export { MdKitThemeEditor } from "./theme/MdKitThemeEditor.js";
 export { createMdKitRestAdapter } from "./transport/rest.js";
 export { createMdKitEditorThemeStyle, darkMdKitEditorTheme, defaultMdKitEditorTheme, } from "./theme/editorTheme.js";
@@ -21,6 +22,7 @@ export type { MdKitDocumentToolbarProps } from "./document/MdKitDocumentToolbar.
 export type { MdKitEditorProps } from "./markdown/MdKitEditor.js";
 export type { MdKitEditorDebugEvent } from "./markdown/editorDebug.js";
 export type { MdKitViewProps } from "./markdown/MdKitView.js";
+export type { MdKitYamlFrontMatter, MdKitYamlFrontMatterExtraction, } from "./markdown/yamlFrontMatter.js";
 export type { MdKitThemeEditorProps } from "./theme/MdKitThemeEditor.js";
 export type { CreateMdKitRestAdapterOptions } from "./transport/rest.js";
 export type { MdKitEditorTheme, MdKitEditorThemeStyle, } from "./theme/editorTheme.js";

package/dist/index.js

@@ -6,6 +6,7 @@ export { MdKitConflictPanel } from "./document/MdKitConflictPanel.js";
 export { MdKitDocumentToolbar } from "./document/MdKitDocumentToolbar.js";
 export { MdKitEditor } from "./markdown/MdKitEditor.js";
 export { MdKitView } from "./markdown/MdKitView.js";
+export { extractYamlFrontMatter, hasYamlFrontMatter, parseYamlFrontMatter, prependYamlFrontMatter, removeYamlFrontMatter, } from "./markdown/yamlFrontMatter.js";
 export { MdKitThemeEditor } from "./theme/MdKitThemeEditor.js";
 export { createMdKitRestAdapter } from "./transport/rest.js";
 export { createMdKitEditorThemeStyle, darkMdKitEditorTheme, defaultMdKitEditorTheme, } from "./theme/editorTheme.js";

package/dist/markdown/MarkdownPasteExtension.d.ts

@@ -0,0 +1,3 @@
+import { Extension } from "@tiptap/core";
+export declare const shouldPastePlainTextAsMarkdown: (text: string) => boolean;
+export declare const MarkdownPasteExtension: Extension<any, any>;

package/dist/markdown/MarkdownPasteExtension.js

@@ -0,0 +1,62 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+const markdownPastePluginKey = new PluginKey("mdkitMarkdownPaste");
+const blockMarkdownPatterns = [
+    /^ {0,3}#{1,6}\s+\S/m,
+    /^ {0,3}(?:[-+*]|\d+[.)])\s+\S/m,
+    /^ {0,3}>\s+\S/m,
+    /^ {0,3}(?:```|~~~)/m,
+    /^ {0,3}(?:-{3,}|\*{3,}|_{3,})\s*$/m,
+    /^\|.+\|\s*\n\|(?:\s*:?-{3,}:?\s*\|)+/m,
+];
+const inlineMarkdownPatterns = [
+    /!\[[^\]]*]\([^)]+\)/,
+    /\[[^\]]+]\([^)]+\)/,
+    /(^|[^\w])(?:\*\*|__)\S[\s\S]*?\S(?:\*\*|__)($|[^\w])/,
+    /(^|[^\w])`[^`\n]+`($|[^\w])/,
+];
+const getClipboardValue = (event, mimeType) => {
+    try {
+        return event.clipboardData?.getData(mimeType) ?? "";
+    }
+    catch {
+        return "";
+    }
+};
+export const shouldPastePlainTextAsMarkdown = (text) => {
+    const trimmedText = text.trim();
+    if (trimmedText.length === 0) {
+        return false;
+    }
+    return [...blockMarkdownPatterns, ...inlineMarkdownPatterns].some((pattern) => pattern.test(trimmedText));
+};
+export const MarkdownPasteExtension = Extension.create({
+    name: "mdkitMarkdownPaste",
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: markdownPastePluginKey,
+                props: {
+                    handlePaste: (view, event) => {
+                        if (view.state.selection.$from.parent.type.spec.code) {
+                            return false;
+                        }
+                        const markdownText = getClipboardValue(event, "text/markdown");
+                        const plainText = getClipboardValue(event, "text/plain");
+                        const pastedMarkdown = markdownText || plainText;
+                        if (!pastedMarkdown.trim()) {
+                            return false;
+                        }
+                        if (!markdownText &&
+                            !shouldPastePlainTextAsMarkdown(pastedMarkdown)) {
+                            return false;
+                        }
+                        return this.editor.commands.insertContent(pastedMarkdown, {
+                            contentType: "markdown",
+                        });
+                    },
+                },
+            }),
+        ];
+    },
+});

package/dist/markdown/MarkdownSearchExtension.d.ts

@@ -0,0 +1,9 @@
+import { Extension } from "@tiptap/core";
+import { PluginKey } from "@tiptap/pm/state";
+import { DecorationSet } from "@tiptap/pm/view";
+export type MarkdownSearchMatch = {
+    from: number;
+    to: number;
+};
+export declare const markdownSearchPluginKey: PluginKey<DecorationSet>;
+export declare const MarkdownSearchExtension: Extension<any, any>;

package/dist/markdown/MarkdownSearchExtension.js

@@ -0,0 +1,42 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+export const markdownSearchPluginKey = new PluginKey("mdkitMarkdownSearch");
+const createSearchDecorations = (document, { activeIndex, matches }) => DecorationSet.create(document, matches.map((match, index) => Decoration.inline(match.from, match.to, {
+    class: index === activeIndex
+        ? "mp-lb-mdkit-search-match mp-lb-mdkit-search-match-active"
+        : "mp-lb-mdkit-search-match",
+})));
+export const MarkdownSearchExtension = Extension.create({
+    name: "mdkitMarkdownSearch",
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: markdownSearchPluginKey,
+                props: {
+                    decorations(state) {
+                        return markdownSearchPluginKey.getState(state);
+                    },
+                },
+                state: {
+                    apply(transaction, previousDecorations) {
+                        const searchMeta = transaction.getMeta(markdownSearchPluginKey);
+                        if (searchMeta) {
+                            return createSearchDecorations(transaction.doc, searchMeta);
+                        }
+                        if (transaction.docChanged) {
+                            return previousDecorations.map(transaction.mapping, transaction.doc);
+                        }
+                        return previousDecorations;
+                    },
+                    init(_config, instance) {
+                        return createSearchDecorations(instance.doc, {
+                            activeIndex: 0,
+                            matches: [],
+                        });
+                    },
+                },
+            }),
+        ];
+    },
+});

package/dist/markdown/MarkdownSearchPanel.d.ts

@@ -0,0 +1,13 @@
+import type { RefObject } from "react";
+type MarkdownSearchPanelProps = {
+    activeMatchNumber: number;
+    inputRef: RefObject<HTMLInputElement | null>;
+    matchCount: number;
+    onClose: () => void;
+    onPrevious: () => void;
+    onNext: () => void;
+    onQueryChange: (query: string) => void;
+    query: string;
+};
+export declare const MarkdownSearchPanel: ({ activeMatchNumber, inputRef, matchCount, onClose, onPrevious, onNext, onQueryChange, query, }: MarkdownSearchPanelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/markdown/MarkdownSearchPanel.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp, Search, X } from "lucide-react";
+export const MarkdownSearchPanel = ({ activeMatchNumber, inputRef, matchCount, onClose, onPrevious, onNext, onQueryChange, query, }) => {
+    const submitSearch = (event) => {
+        event.preventDefault();
+        onNext();
+    };
+    const handleSearchKeyDown = (event) => {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            onClose();
+            return;
+        }
+        if (event.key === "Enter" && event.shiftKey) {
+            event.preventDefault();
+            onPrevious();
+        }
+    };
+    const matchStatus = query.trim().length === 0
+        ? "No query"
+        : matchCount === 0
+            ? "No matches"
+            : `${activeMatchNumber} of ${matchCount}`;
+    return (_jsxs("form", { "aria-label": "Search document", className: "mp-lb-mdkit-search-panel", onSubmit: submitSearch, children: [_jsx(Search, { "aria-hidden": "true", className: "mp-lb-mdkit-search-icon" }), _jsx("input", { ref: inputRef, "aria-label": "Search document", className: "mp-lb-mdkit-search-input", onChange: (event) => onQueryChange(event.target.value), onKeyDown: handleSearchKeyDown, placeholder: "Search", type: "search", value: query }), _jsx("span", { className: "mp-lb-mdkit-search-status", children: matchStatus }), _jsx("button", { "aria-label": "Previous match", className: "mp-lb-mdkit-search-button", disabled: matchCount === 0, onClick: onPrevious, title: "Previous match", type: "button", children: _jsx(ChevronUp, { "aria-hidden": "true" }) }), _jsx("button", { "aria-label": "Next match", className: "mp-lb-mdkit-search-button", disabled: matchCount === 0, title: "Next match", type: "submit", children: _jsx(ChevronDown, { "aria-hidden": "true" }) }), _jsx("button", { "aria-label": "Close search", className: "mp-lb-mdkit-search-button", onClick: onClose, title: "Close search", type: "button", children: _jsx(X, { "aria-hidden": "true" }) })] }));
+};

package/dist/markdown/MdKitEditor.d.ts

@@ -4,10 +4,12 @@ import type { MdKitEditorDebugEvent } from "./editorDebug.js";
 type MdKitEditorBaseProps = {
     className?: string;
     fillHeight?: boolean;
+    ignoreYamlFrontMatter?: boolean;
     instanceKey?: string | number;
     onDebugEvent?: (event: MdKitEditorDebugEvent) => void;
     onFocusChange?: (focused: boolean) => void;
     readOnly?: boolean;
+    search?: boolean;
     style?: CSSProperties;
 };
 type LocalMdKitEditorProps = MdKitEditorBaseProps & {

package/dist/markdown/MdKitView.d.ts

@@ -2,8 +2,9 @@ import type { CSSProperties } from "react";
 export type MdKitViewProps = {
     className?: string;
     fillHeight?: boolean;
+    ignoreYamlFrontMatter?: boolean;
     placeholder?: string;
     style?: CSSProperties;
     value: string;
 };
-export declare const MdKitView: ({ className, fillHeight, placeholder, style, value, }: MdKitViewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MdKitView: ({ className, fillHeight, ignoreYamlFrontMatter, placeholder, style, value, }: MdKitViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/markdown/MdKitView.js

@@ -2,8 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { joinClassNames } from "../ui/joinClassNames.js";
-export const MdKitView = ({ className, fillHeight = false, placeholder, style, value, }) => {
-    const renderedValue = value.trim().length > 0 ? value : (placeholder ?? "");
+import { removeYamlFrontMatter } from "./yamlFrontMatter.js";
+export const MdKitView = ({ className, fillHeight = false, ignoreYamlFrontMatter = false, placeholder, style, value, }) => {
+    const markdownValue = ignoreYamlFrontMatter
+        ? removeYamlFrontMatter(value)
+        : value;
+    const renderedValue = markdownValue.trim().length > 0 ? markdownValue : (placeholder ?? "");
     return (_jsx("div", { className: joinClassNames("mp-lb-mdkit-markdown-editor", "mp-lb-mdkit-markdown-view", fillHeight && "mp-lb-mdkit-markdown-editor-fill-height", className), "data-read-only": "true", style: style, children: _jsx("div", { className: "mp-lb-mdkit-editor-shell", children: _jsx("div", { className: "mp-lb-mdkit-editor-surface", children: renderedValue.length > 0 ? (_jsx("div", { className: "mp-lb-mdkit-tiptap mp-lb-mdkit-view-content", children: _jsx(ReactMarkdown, { components: {
                             a: ({ children, ...linkProps }) => (_jsx("a", { ...linkProps, rel: "noopener noreferrer", target: "_blank", children: children })),
                         }, remarkPlugins: [remarkGfm], children: renderedValue }) })) : (_jsx("div", { className: "mp-lb-mdkit-editor-empty" })) }) }) }));

package/dist/markdown/TiptapMarkdownSurface.d.ts

@@ -5,8 +5,10 @@ type LocalTiptapMarkdownSurfaceProps = {
     onChange?: (markdown: string) => void;
     onDebugEvent?: (event: MdKitEditorDebugEvent) => void;
     onFocusChange?: (focused: boolean) => void;
+    ignoreYamlFrontMatter?: boolean;
     placeholder?: string;
     readOnly?: boolean;
+    search?: boolean;
     value: string;
 };
 type CollaborativeTiptapMarkdownSurfaceProps = {
@@ -14,8 +16,10 @@ type CollaborativeTiptapMarkdownSurfaceProps = {
     onChange?: (markdown: string) => void;
     onDebugEvent?: (event: MdKitEditorDebugEvent) => void;
     onFocusChange?: (focused: boolean) => void;
+    ignoreYamlFrontMatter?: boolean;
     placeholder?: string;
     readOnly?: boolean;
+    search?: boolean;
     value?: string;
 };
 type TiptapMarkdownSurfaceProps = CollaborativeTiptapMarkdownSurfaceProps | LocalTiptapMarkdownSurfaceProps;

package/dist/markdown/TiptapMarkdownSurface.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import Collaboration from "@tiptap/extension-collaboration";
 import CollaborationCaret from "@tiptap/extension-collaboration-caret";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { createMdKitTiptapExtensions } from "./createMdKitTiptapExtensions.js";
+import { extractYamlFrontMatter, prependYamlFrontMatter, } from "./yamlFrontMatter.js";
 import { MarkdownBubbleMenu } from "./MarkdownBubbleMenu.js";
+import { MarkdownSearchPanel } from "./MarkdownSearchPanel.js";
+import { markdownSearchPluginKey, } from "./MarkdownSearchExtension.js";
 import { normalizeMarkdownSerialization } from "./normalizeMarkdownSerialization.js";
 import { prepareMarkdownForEditorHydration } from "./prepareMarkdownForEditorHydration.js";
 const describeElement = (element) => {
@@ -58,17 +61,24 @@ const createEditorDebugSnapshot = (editor, phase) => {
     };
 };
 export const TiptapMarkdownSurface = (props) => {
-    const { collaboration = null, onDebugEvent, onFocusChange, placeholder = "Start writing...", readOnly = false, } = props;
+    const { collaboration = null, ignoreYamlFrontMatter = false, onDebugEvent, onFocusChange, placeholder = "Start writing...", readOnly = false, search = false, } = props;
     const markdownValue = "value" in props && typeof props.value === "string" ? props.value : "";
     const editorSurfaceRef = useRef(null);
+    const searchInputRef = useRef(null);
     const onDebugEventRef = useRef(onDebugEvent);
     const onFocusChangeRef = useRef(onFocusChange);
     const onChangeRef = useRef(props.onChange);
     const currentMarkdownRef = useRef(markdownValue);
+    const yamlFrontMatterRef = useRef(ignoreYamlFrontMatter
+        ? extractYamlFrontMatter(markdownValue).frontMatter
+        : null);
     const isApplyingExternalValueRef = useRef(false);
     const pendingControlledEchoesRef = useRef(new Set());
     const pendingContentFocusRef = useRef(null);
     const shouldFocusAfterPointerRef = useRef(false);
+    const [searchOpen, setSearchOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [activeSearchMatchIndex, setActiveSearchMatchIndex] = useState(0);
     const collaborationDocument = collaboration?.document ?? null;
     const collaborationProvider = collaboration?.provider ?? null;
     const collaborationUserColor = collaboration?.collaborator.color ?? "";
@@ -121,7 +131,9 @@ export const TiptapMarkdownSurface = (props) => {
     const editor = useEditor({
         content: hasCollaboration
             ? undefined
-            : prepareMarkdownForEditorHydration(markdownValue),
+            : prepareMarkdownForEditorHydration(ignoreYamlFrontMatter
+                ? extractYamlFrontMatter(markdownValue).body
+                : markdownValue),
         contentType: "markdown",
         editable: !readOnly,
         editorProps: {
@@ -166,7 +178,7 @@ export const TiptapMarkdownSurface = (props) => {
             }
             const nextSerializedMarkdown = normalizeMarkdownSerialization(updatedEditor.getMarkdown());
             const previousMarkdown = currentMarkdownRef.current;
-            const nextMarkdown = nextSerializedMarkdown;
+            const nextMarkdown = prependYamlFrontMatter(yamlFrontMatterRef.current, nextSerializedMarkdown);
             currentMarkdownRef.current = nextMarkdown;
             if (nextMarkdown !== previousMarkdown) {
                 pendingControlledEchoesRef.current.add(nextMarkdown);
@@ -177,8 +189,150 @@ export const TiptapMarkdownSurface = (props) => {
         collaborationCaretExtensions,
         collaborationDocument,
         hasCollaboration,
+        ignoreYamlFrontMatter,
         placeholder,
     ]);
+    const searchMatches = useMemo(() => {
+        const query = searchQuery.trim().toLocaleLowerCase();
+        if (!editor || query.length === 0) {
+            return [];
+        }
+        const matches = [];
+        editor.state.doc.descendants((node, position) => {
+            if (!node.isText || typeof node.text !== "string") {
+                return;
+            }
+            const text = node.text.toLocaleLowerCase();
+            let fromIndex = text.indexOf(query);
+            while (fromIndex >= 0) {
+                matches.push({
+                    from: position + fromIndex,
+                    to: position + fromIndex + query.length,
+                });
+                fromIndex = text.indexOf(query, fromIndex + query.length);
+            }
+        });
+        return matches;
+    }, [editor, searchQuery, markdownValue]);
+    const activeSearchMatchNumber = searchMatches.length === 0 ? 0 : activeSearchMatchIndex + 1;
+    const scrollActiveSearchMatchIntoView = useCallback(() => {
+        window.requestAnimationFrame(() => {
+            const activeMatch = editorSurfaceRef.current?.querySelector(".mp-lb-mdkit-search-match-active");
+            if (!activeMatch || !("scrollIntoView" in activeMatch)) {
+                return;
+            }
+            activeMatch.scrollIntoView({
+                block: "center",
+                inline: "nearest",
+            });
+        });
+    }, []);
+    const selectSearchMatch = useCallback((matchIndex) => {
+        if (!editor || searchMatches.length === 0) {
+            return;
+        }
+        const nextIndex = ((matchIndex % searchMatches.length) + searchMatches.length) %
+            searchMatches.length;
+        setActiveSearchMatchIndex(nextIndex);
+        editor.view.dispatch(editor.state.tr
+            .setMeta(markdownSearchPluginKey, {
+            activeIndex: nextIndex,
+            matches: searchMatches,
+        })
+            .setMeta("addToHistory", false));
+        scrollActiveSearchMatchIntoView();
+    }, [editor, scrollActiveSearchMatchIntoView, searchMatches]);
+    const openSearch = useCallback(() => {
+        if (!search) {
+            return;
+        }
+        setSearchOpen(true);
+        window.requestAnimationFrame(() => {
+            searchInputRef.current?.focus();
+            searchInputRef.current?.select();
+        });
+    }, [search]);
+    const closeSearch = useCallback(() => {
+        setSearchOpen(false);
+        if (!editor) {
+            return;
+        }
+        const activeMatch = searchMatches[activeSearchMatchIndex];
+        if (!activeMatch) {
+            editor.commands.focus();
+            return;
+        }
+        editor
+            .chain()
+            .focus()
+            .setTextSelection({ from: activeMatch.from, to: activeMatch.to })
+            .scrollIntoView()
+            .run();
+    }, [activeSearchMatchIndex, editor, searchMatches]);
+    const selectNextSearchMatch = useCallback(() => {
+        selectSearchMatch(activeSearchMatchIndex + 1);
+    }, [activeSearchMatchIndex, selectSearchMatch]);
+    const selectPreviousSearchMatch = useCallback(() => {
+        selectSearchMatch(activeSearchMatchIndex - 1);
+    }, [activeSearchMatchIndex, selectSearchMatch]);
+    useEffect(() => {
+        if (!search) {
+            setSearchOpen(false);
+            setSearchQuery("");
+        }
+    }, [search]);
+    useEffect(() => {
+        if (!search || !editor) {
+            return;
+        }
+        const handleSearchShortcut = (event) => {
+            const isFindShortcut = (event.metaKey || event.ctrlKey) &&
+                !event.altKey &&
+                event.key.toLocaleLowerCase() === "f";
+            if (!isFindShortcut) {
+                return;
+            }
+            if (document.activeElement instanceof Element &&
+                !editorSurfaceRef.current?.contains(document.activeElement)) {
+                return;
+            }
+            event.preventDefault();
+            openSearch();
+        };
+        document.addEventListener("keydown", handleSearchShortcut);
+        return () => {
+            document.removeEventListener("keydown", handleSearchShortcut);
+        };
+    }, [editor, openSearch, search]);
+    useEffect(() => {
+        setActiveSearchMatchIndex(0);
+    }, [searchQuery]);
+    useEffect(() => {
+        if (!searchOpen || searchQuery.trim().length === 0) {
+            editor?.view.dispatch(editor.state.tr
+                .setMeta(markdownSearchPluginKey, {
+                activeIndex: 0,
+                matches: [],
+            })
+                .setMeta("addToHistory", false));
+            return;
+        }
+        const nextActiveSearchMatchIndex = Math.min(activeSearchMatchIndex, Math.max(0, searchMatches.length - 1));
+        editor?.view.dispatch(editor.state.tr
+            .setMeta(markdownSearchPluginKey, {
+            activeIndex: nextActiveSearchMatchIndex,
+            matches: searchMatches,
+        })
+            .setMeta("addToHistory", false));
+        scrollActiveSearchMatchIntoView();
+    }, [
+        activeSearchMatchIndex,
+        editor,
+        scrollActiveSearchMatchIntoView,
+        searchMatches,
+        searchOpen,
+        searchQuery,
+    ]);
     useEffect(() => {
         editor?.setEditable(!readOnly);
     }, [editor, readOnly]);
@@ -215,6 +369,9 @@ export const TiptapMarkdownSurface = (props) => {
         }
         if (hasCollaboration) {
             currentMarkdownRef.current = markdownValue;
+            yamlFrontMatterRef.current = ignoreYamlFrontMatter
+                ? extractYamlFrontMatter(markdownValue).frontMatter
+                : null;
             pendingControlledEchoesRef.current.clear();
             return;
         }
@@ -228,15 +385,19 @@ export const TiptapMarkdownSurface = (props) => {
         }
         pendingControlledEchoesRef.current.clear();
         isApplyingExternalValueRef.current = true;
-        editor.commands.setContent(prepareMarkdownForEditorHydration(markdownValue), {
+        const frontMatter = ignoreYamlFrontMatter
+            ? extractYamlFrontMatter(markdownValue)
+            : null;
+        editor.commands.setContent(prepareMarkdownForEditorHydration(frontMatter?.body ?? markdownValue), {
             contentType: "markdown",
             emitUpdate: false,
         });
         currentMarkdownRef.current = markdownValue;
+        yamlFrontMatterRef.current = frontMatter?.frontMatter ?? null;
         window.queueMicrotask(() => {
             isApplyingExternalValueRef.current = false;
         });
-    }, [editor, hasCollaboration, markdownValue]);
+    }, [editor, hasCollaboration, ignoreYamlFrontMatter, markdownValue]);
     if (!editor) {
         return (_jsx("div", { className: "mp-lb-mdkit-editor-shell", children: _jsx("div", { className: "mp-lb-mdkit-editor-empty", children: collaboration
                     ? "Connecting collaboration session..."
@@ -449,5 +610,5 @@ export const TiptapMarkdownSurface = (props) => {
         });
         queueEditorFocusAtPosition(getEditorPositionAtClientPoint(event.clientX, event.clientY, event.target));
     };
-    return (_jsx("div", { className: "mp-lb-mdkit-editor-shell", children: _jsxs("div", { ref: editorSurfaceRef, className: "mp-lb-mdkit-editor-surface", onPointerDownCapture: focusEditorBackgroundOnPointerDown, onPointerUpCapture: focusEditorBackgroundOnPointerUp, children: [_jsx(MarkdownBubbleMenu, { editor: editor }), _jsx(EditorContent, { editor: editor })] }) }));
+    return (_jsx("div", { className: "mp-lb-mdkit-editor-shell", children: _jsxs("div", { ref: editorSurfaceRef, className: "mp-lb-mdkit-editor-surface", onPointerDownCapture: focusEditorBackgroundOnPointerDown, onPointerUpCapture: focusEditorBackgroundOnPointerUp, children: [search && searchOpen ? (_jsx(MarkdownSearchPanel, { activeMatchNumber: activeSearchMatchNumber, inputRef: searchInputRef, matchCount: searchMatches.length, onClose: closeSearch, onNext: selectNextSearchMatch, onPrevious: selectPreviousSearchMatch, onQueryChange: setSearchQuery, query: searchQuery })) : null, _jsx(MarkdownBubbleMenu, { editor: editor }), _jsx(EditorContent, { editor: editor })] }) }));
 };

package/dist/markdown/createMdKitTiptapExtensions.js

@@ -1,6 +1,8 @@
 import { Markdown } from "@tiptap/markdown";
 import Placeholder from "@tiptap/extension-placeholder";
 import StarterKit from "@tiptap/starter-kit";
+import { MarkdownPasteExtension } from "./MarkdownPasteExtension.js";
+import { MarkdownSearchExtension } from "./MarkdownSearchExtension.js";
 export const defaultMdKitMarkdownPlaceholder = "Start writing...";
 export const createMdKitTiptapExtensions = ({ placeholder = defaultMdKitMarkdownPlaceholder, undoRedo = true, } = {}) => [
     StarterKit.configure({
@@ -24,4 +26,6 @@ export const createMdKitTiptapExtensions = ({ placeholder = defaultMdKitMarkdown
             gfm: true,
         },
     }),
+    MarkdownPasteExtension,
+    MarkdownSearchExtension,
 ];

package/dist/markdown/yamlFrontMatter.d.ts

@@ -0,0 +1,16 @@
+export type MdKitYamlFrontMatter = {
+    data: unknown;
+    raw: string;
+    trailingWhitespace: string;
+    yaml: string;
+};
+export type MdKitYamlFrontMatterExtraction = {
+    body: string;
+    errors: string[];
+    frontMatter: MdKitYamlFrontMatter | null;
+};
+export declare const parseYamlFrontMatter: (yaml: string) => unknown;
+export declare const extractYamlFrontMatter: (markdown: string) => MdKitYamlFrontMatterExtraction;
+export declare const hasYamlFrontMatter: (markdown: string) => boolean;
+export declare const removeYamlFrontMatter: (markdown: string) => string;
+export declare const prependYamlFrontMatter: (frontMatter: MdKitYamlFrontMatter | string | null, body: string) => string;

package/dist/markdown/yamlFrontMatter.js

@@ -0,0 +1,88 @@
+import { parseDocument } from "yaml";
+const delimiter = "---";
+const getLineEnd = (markdown, lineStart) => {
+    const newlineIndex = markdown.indexOf("\n", lineStart);
+    if (newlineIndex === -1) {
+        return {
+            contentEnd: markdown.length,
+            lineEnd: markdown.length,
+            newline: "",
+        };
+    }
+    const contentEnd = newlineIndex > lineStart && markdown[newlineIndex - 1] === "\r"
+        ? newlineIndex - 1
+        : newlineIndex;
+    return {
+        contentEnd,
+        lineEnd: newlineIndex + 1,
+        newline: markdown.slice(contentEnd, newlineIndex + 1),
+    };
+};
+const getNextBodyStart = (markdown, lineStart) => {
+    let bodyStart = lineStart;
+    while (bodyStart < markdown.length) {
+        const lineEnd = getLineEnd(markdown, bodyStart);
+        const line = markdown.slice(bodyStart, lineEnd.contentEnd);
+        if (!/^[ \t]*$/.test(line)) {
+            break;
+        }
+        bodyStart = lineEnd.lineEnd;
+    }
+    return bodyStart;
+};
+export const parseYamlFrontMatter = (yaml) => {
+    const document = parseDocument(yaml, { prettyErrors: false });
+    if (document.errors.length > 0) {
+        throw new Error(document.errors.map((error) => error.message).join("\n"));
+    }
+    return document.toJSON();
+};
+export const extractYamlFrontMatter = (markdown) => {
+    const openingLine = getLineEnd(markdown, 0);
+    if (markdown.slice(0, openingLine.contentEnd) !== delimiter) {
+        return { body: markdown, errors: [], frontMatter: null };
+    }
+    let lineStart = openingLine.lineEnd;
+    while (lineStart < markdown.length) {
+        const lineEnd = getLineEnd(markdown, lineStart);
+        const line = markdown.slice(lineStart, lineEnd.contentEnd);
+        if (line !== delimiter) {
+            lineStart = lineEnd.lineEnd;
+            continue;
+        }
+        const bodyStart = getNextBodyStart(markdown, lineEnd.lineEnd);
+        const raw = markdown.slice(0, bodyStart);
+        const yaml = markdown.slice(openingLine.lineEnd, lineStart);
+        const trailingWhitespace = markdown.slice(lineEnd.lineEnd, bodyStart);
+        try {
+            const data = parseYamlFrontMatter(yaml);
+            return {
+                body: markdown.slice(bodyStart),
+                errors: [],
+                frontMatter: {
+                    data,
+                    raw,
+                    trailingWhitespace,
+                    yaml,
+                },
+            };
+        }
+        catch (error) {
+            return {
+                body: markdown,
+                errors: [error instanceof Error ? error.message : String(error)],
+                frontMatter: null,
+            };
+        }
+    }
+    return { body: markdown, errors: [], frontMatter: null };
+};
+export const hasYamlFrontMatter = (markdown) => extractYamlFrontMatter(markdown).frontMatter !== null;
+export const removeYamlFrontMatter = (markdown) => extractYamlFrontMatter(markdown).body;
+export const prependYamlFrontMatter = (frontMatter, body) => {
+    if (!frontMatter) {
+        return body;
+    }
+    const raw = typeof frontMatter === "string" ? frontMatter : frontMatter.raw;
+    return `${raw}${body}`;
+};

package/dist/theme/editorTheme.js

@@ -1,13 +1,13 @@
 export const defaultMdKitEditorTheme = {
     background: "#ffffff",
-    blockGap: "0.75rem",
+    blockGap: "0.72em",
     border: "#d8dee8",
     codeBackground: "#eef1f4",
     codeRadius: "0.35rem",
     fontFamily: "inherit",
     fontSize: "16px",
     foreground: "#18212f",
-    lineHeight: "1.7",
+    lineHeight: "1.55",
     link: "#4f46e5",
     muted: "#eef1f4",
     mutedForeground: "#5b6472",
@@ -15,14 +15,14 @@ export const defaultMdKitEditorTheme = {
 };
 export const darkMdKitEditorTheme = {
     background: "#0b1220",
-    blockGap: "0.75rem",
+    blockGap: "0.72em",
     border: "#314158",
     codeBackground: "#111827",
     codeRadius: "0.35rem",
     fontFamily: "inherit",
     fontSize: "16px",
     foreground: "#e5edf7",
-    lineHeight: "1.7",
+    lineHeight: "1.55",
     link: "#38bdf8",
     muted: "#172033",
     mutedForeground: "#94a3b8",

package/dist/yjs/MdKitMarkdownYjs.d.ts

@@ -1,6 +1,7 @@
 import * as Y from "yjs";
 export type MdKitMarkdownYjsOptions = {
     fragmentName?: string;
+    ignoreYamlFrontMatter?: boolean;
 };
 export declare const replaceMdKitYjsMarkdown: (ydoc: Y.Doc, markdown: string, options?: MdKitMarkdownYjsOptions) => Uint8Array;
 export declare const markdownToMdKitYjs: (markdown: string, options?: MdKitMarkdownYjsOptions) => Uint8Array;

package/dist/yjs/MdKitMarkdownYjs.js

@@ -3,10 +3,14 @@ import { MarkdownManager } from "@tiptap/markdown";
 import { prosemirrorJSONToYXmlFragment, yXmlFragmentToProsemirrorJSON, } from "@tiptap/y-tiptap";
 import * as Y from "yjs";
 import { createMdKitTiptapExtensions } from "../markdown/createMdKitTiptapExtensions.js";
+import { extractYamlFrontMatter, prependYamlFrontMatter, } from "../markdown/yamlFrontMatter.js";
 import { normalizeMarkdownSerialization } from "../markdown/normalizeMarkdownSerialization.js";
 import { prepareMarkdownForEditorHydration } from "../markdown/prepareMarkdownForEditorHydration.js";
 const defaultMdKitYjsFragmentName = "default";
+const mdKitYjsMetadataMapName = "__mdkit";
+const frontMatterPrefixMetadataKey = "frontMatterPrefix";
 const getMdKitYjsFragmentName = (options) => options?.fragmentName ?? defaultMdKitYjsFragmentName;
+const getFrontMatterPrefixMetadataKey = (fragmentName) => `${fragmentName}:${frontMatterPrefixMetadataKey}`;
 const createMdKitMarkdownManager = () => new MarkdownManager({
     extensions: createMdKitTiptapExtensions(),
     markedOptions: {
@@ -17,10 +21,22 @@ const createMdKitProseMirrorSchema = () => getSchema(createMdKitTiptapExtensions
 const markdownToProseMirrorJson = (markdown) => createMdKitMarkdownManager().parse(prepareMarkdownForEditorHydration(markdown));
 const proseMirrorJsonToMarkdown = (json) => normalizeMarkdownSerialization(createMdKitMarkdownManager().serialize(json));
 export const replaceMdKitYjsMarkdown = (ydoc, markdown, options) => {
-    const fragment = ydoc.getXmlFragment(getMdKitYjsFragmentName(options));
+    const fragmentName = getMdKitYjsFragmentName(options);
+    const fragment = ydoc.getXmlFragment(fragmentName);
+    const metadata = ydoc.getMap(mdKitYjsMetadataMapName);
     const schema = createMdKitProseMirrorSchema();
-    const json = markdownToProseMirrorJson(markdown);
+    const frontMatter = options?.ignoreYamlFrontMatter
+        ? extractYamlFrontMatter(markdown)
+        : null;
+    const json = markdownToProseMirrorJson(frontMatter?.body ?? markdown);
+    const metadataKey = getFrontMatterPrefixMetadataKey(fragmentName);
     prosemirrorJSONToYXmlFragment(schema, json, fragment);
+    if (frontMatter?.frontMatter) {
+        metadata.set(metadataKey, frontMatter.frontMatter.raw);
+    }
+    else {
+        metadata.delete(metadataKey);
+    }
     return Y.encodeStateAsUpdate(ydoc);
 };
 export const markdownToMdKitYjs = (markdown, options) => {
@@ -30,8 +46,11 @@ export const markdownToMdKitYjs = (markdown, options) => {
 export const mdKitYjsToMarkdown = (yjsState, options) => {
     const ydoc = new Y.Doc();
     Y.applyUpdate(ydoc, yjsState);
-    const json = yXmlFragmentToProsemirrorJSON(ydoc.getXmlFragment(getMdKitYjsFragmentName(options)));
-    return proseMirrorJsonToMarkdown(json);
+    const fragmentName = getMdKitYjsFragmentName(options);
+    const json = yXmlFragmentToProsemirrorJSON(ydoc.getXmlFragment(fragmentName));
+    const metadata = ydoc.getMap(mdKitYjsMetadataMapName);
+    const frontMatterRaw = metadata.get(getFrontMatterPrefixMetadataKey(fragmentName)) ?? "";
+    return prependYamlFrontMatter(frontMatterRaw, proseMirrorJsonToMarkdown(json));
 };
 export const yjs = {
     markdownToMdKitYjs,

package/docs/.vitepress/config.ts

@@ -7,6 +7,7 @@ export default defineConfig({
   themeConfig: {
     nav: [
       { text: "Quick Start", link: "/" },
+      { text: "Plain Text", link: "/plain-text" },
       { text: "Styling", link: "/styling" },
       { text: "Shadcn", link: "/shadcn" },
       { text: "REST", link: "/rest" },
@@ -21,6 +22,7 @@ export default defineConfig({
         text: "Guide",
         items: [
           { text: "Quick Start", link: "/" },
+          { text: "Plain Text Editors", link: "/plain-text" },
           { text: "Styling", link: "/styling" },
           { text: "Shadcn Plugin", link: "/shadcn" },
           { text: "REST Backend", link: "/rest" },

package/docs/api.md

@@ -39,6 +39,7 @@ Local editing props:
 - `onChange?: (markdown: string) => void`
 - `onFocusChange?: (focused: boolean) => void`
 - `fillHeight?: boolean`
+- `search?: boolean`
 - `instanceKey?: string | number`
 - `className?: string`
 - `style?: CSSProperties`
@@ -50,6 +51,7 @@ Collaborative editing props:
 - `onChange?: (markdown: string) => void`
 - `onFocusChange?: (focused: boolean) => void`
 - `fillHeight?: boolean`
+- `search?: boolean`
 - `className?: string`
 - `style?: CSSProperties`
 
@@ -57,6 +59,10 @@ Collaborative editing props:
 keep blank space below the last line clickable so it focuses the cursor at the
 end. Leave it off when the host application owns sizing and scrolling.
 
+`search` opts the editor into the built-in document search panel. The panel is
+not rendered by default; when enabled, users open it with `Cmd+F` on macOS or
+`Ctrl+F` on Windows/Linux.
+
 The package stylesheet includes reset-resistant markdown rules for headings,
 lists, code blocks, blockquotes, and links. Styling is controlled with CSS
 variables on `.mp-lb-mdkit-markdown-editor`. See [Styling](./styling.md) for setup,

package/docs/index.md

@@ -113,7 +113,11 @@ export function ConnectedMarkdownEditor({
     () => createMdKitTrpcAdapter({ client: trpc.mdkit }),
     [trpc],
   );
-  const document = useMdKitDocument({ adapter, documentId });
+  const document = useMdKitDocument({
+    adapter,
+    debounceMs: 1000,
+    documentId,
+  });
   const versions = useMdKitDocumentVersions({ adapter, documentId });
 
   const collaboration = useMdKitCollaboration({

package/docs/plain-text.md

@@ -0,0 +1,131 @@
+# Plain Text Editors
+
+MDKit's connected workflow is not limited to `MdKitEditor`. The document hooks
+and backend adapters work with serialized text, so you can bring a plain text,
+code, JSON, or custom text editor and still use the same storage, autosave,
+checkpoint history, restore, and conflict handling.
+
+The one major exception is collaboration. Collaboration is currently a
+markdown/Tiptap capability because it depends on Yjs, ProseMirror, and the
+Tiptap collaboration extensions.
+
+## What Works
+
+Any editor can plug into the connected workflow if it behaves like a controlled
+text input:
+
+```tsx
+type TextEditorProps = {
+  value: string;
+  onChange(value: string): void;
+  onFocusChange?(focused: boolean): void;
+  readOnly?: boolean;
+};
+```
+
+That is enough for:
+
+- loading the current document
+- autosave
+- dirty state
+- conflict detection
+- force save
+- remote resync
+- checkpoint history
+- checkpoint restore
+
+The editor does not need to know about MDKit internals. It only needs to receive
+`document.value` and call `document.setContent`.
+
+## Example
+
+```tsx
+import {
+  MdKitConflictPanel,
+  MdKitDocumentToolbar,
+  VersionHistoryPanel,
+  useMdKitDocument,
+  useMdKitDocumentVersions,
+  type MdKitDocumentAdapter,
+} from "@mp-lb/mdkit";
+
+function PlainTextDocument({
+  adapter,
+  documentId,
+}: {
+  adapter: MdKitDocumentAdapter;
+  documentId: string;
+}) {
+  const document = useMdKitDocument({
+    adapter,
+    debounceMs: 1000,
+    documentId,
+  });
+  const versions = useMdKitDocumentVersions({ adapter, documentId });
+
+  return (
+    <>
+      <MdKitDocumentToolbar document={document} versions={versions} />
+
+      <textarea
+        readOnly={document.conflict}
+        value={document.value}
+        onBlur={() => document.setFocused(false)}
+        onChange={(event) => document.setContent(event.currentTarget.value)}
+        onFocus={() => document.setFocused(true)}
+      />
+
+      <MdKitConflictPanel document={document} />
+      <VersionHistoryPanel controller={versions} />
+    </>
+  );
+}
+```
+
+Use the same backend adapter you would use for markdown. The document content is
+still just `content: string`.
+
+## Backend Shape
+
+You do not need a separate backend for plain text documents. A single MDKit
+backend can expose:
+
+- document read/write
+- checkpoint list/read/restore
+- optional collaboration websocket routes
+- optional collaboration state persistence
+
+Plain text editors use the document and checkpoint APIs. Markdown collaborative
+editors additionally use the collaboration websocket and Yjs persistence.
+
+The underlying database layout is application-owned. It is reasonable to store
+markdown and plain text documents in the same documents table, or in separate
+tables if your product needs that. MDKit only requires a stable `documentId`,
+`content`, and an opaque revision token.
+
+## Collaboration Boundary
+
+Do not pass `useMdKitCollaboration` to a plain text editor. The current
+collaboration adapter is for `MdKitEditor` because that editor knows how to bind
+Tiptap to a Yjs document and render remote cursors.
+
+For plain text documents:
+
+- keep using `useMdKitDocument`
+- omit `useMdKitCollaboration`
+- omit collaboration UI
+- rely on optimistic conflicts and resync for multi-client safety
+
+If MDKit later adds a collaboration-capable CodeMirror, Monaco, or textarea
+adapter, that should be a new editor-specific capability. The generic text
+workflow does not need to change.
+
+## Testbench
+
+The testbench includes a connected stack named
+`Storage + checkpoints (plain text)`. It reuses the same checkpoints backend as
+the markdown stack, stores content under `docs/plain-text.txt`, and renders a
+controlled textarea instead of `MdKitEditor`.
+
+Use it to verify that plain text can autosave, create checkpoints, restore
+history, and avoid collaboration UI.

package/docs/shadcn.md

@@ -46,7 +46,11 @@ import { MdKitConnectedWorkflow } from "@/components/mdkit/mdkit-connected-workf
 export function EditorScreen() {
   const client = createMdKitTrpcClient({ url: "/trpc" });
   const adapter = createMdKitTrpcAdapter({ client });
-  const document = useMdKitDocument({ adapter, documentId });
+  const document = useMdKitDocument({
+    adapter,
+    debounceMs: 1000,
+    documentId,
+  });
   const versions = useMdKitDocumentVersions({ adapter, documentId });
 
   const collaboration = useMdKitCollaboration({

package/docs/styling.md

@@ -120,7 +120,8 @@ you need structural changes, component-specific spacing, or state styling.
 
 `MdKitEditor` renders the markdown editing surface and the selection bubble
 toolbar. The toolbar appears for non-empty text selections while the editor or
-toolbar has focus.
+toolbar has focus. The search panel appears only when `search` is enabled and
+the user opens it with the find keyboard shortcut.
 
 - `.mp-lb-mdkit-markdown-editor`: root element rendered by `MdKitEditor`
 - `.mp-lb-mdkit-markdown-editor-fill-height`: added to the root when
@@ -129,6 +130,10 @@ toolbar has focus.
 - `.mp-lb-mdkit-editor-surface`: scroll and background surface around the
   ProseMirror editor
 - `.mp-lb-mdkit-editor-empty`: loading or connecting placeholder
+- `.mp-lb-mdkit-search-panel`: optional document search panel
+- `.mp-lb-mdkit-search-input`: search text input
+- `.mp-lb-mdkit-search-status`: search result count
+- `.mp-lb-mdkit-search-button`: search navigation or close button
 - `.mp-lb-mdkit-tiptap`: ProseMirror editable element
 - `.mp-lb-mdkit-toolbar`: selection bubble toolbar
 - `.mp-lb-mdkit-toolbar-button`: toolbar button

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mp-lb/mdkit",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -94,6 +94,7 @@
     "lucide-react": "^0.554.0",
     "react-markdown": "10.1.0",
     "remark-gfm": "4.0.1",
+    "yaml": "2.9.0",
     "yjs": "^13.6.24",
     "zod": "^4.1.12"
   },

package/src/styles.css

@@ -19,18 +19,38 @@
   --mp-lb-mdkit-muted: var(--muted, #f3f4f6);
   --mp-lb-mdkit-muted-foreground: var(--muted-foreground, #6b7280);
   --mp-lb-mdkit-border: var(--border, #e5e7eb);
+  --mp-lb-mdkit-input: var(--input, var(--mp-lb-mdkit-border));
+  --mp-lb-mdkit-input-background: color-mix(
+    in srgb,
+    var(--mp-lb-mdkit-input) 30%,
+    transparent
+  );
+  --mp-lb-mdkit-input-background-hover: color-mix(
+    in srgb,
+    var(--mp-lb-mdkit-input) 50%,
+    transparent
+  );
+  --mp-lb-mdkit-popover: var(--popover, var(--mp-lb-mdkit-background));
+  --mp-lb-mdkit-popover-foreground: var(
+    --popover-foreground,
+    var(--mp-lb-mdkit-foreground)
+  );
+  --mp-lb-mdkit-ring: var(--ring, #94a3b8);
   --mp-lb-mdkit-accent: var(--primary, #111827);
   --mp-lb-mdkit-accent-foreground: var(--primary-foreground, #ffffff);
   --mp-lb-mdkit-link: #4f46e5;
   --mp-lb-mdkit-font-family: inherit;
   --mp-lb-mdkit-font-size: 1rem;
-  --mp-lb-mdkit-line-height: 1.7;
+  --mp-lb-mdkit-line-height: 1.55;
   --mp-lb-mdkit-surface-padding: 1rem;
-  --mp-lb-mdkit-block-gap: 0.75rem;
+  --mp-lb-mdkit-block-gap: 0.72em;
+  --mp-lb-mdkit-tight-gap: 0.35em;
+  --mp-lb-mdkit-section-gap: 1.25em;
   --mp-lb-mdkit-list-item-gap: 0.125rem;
   --mp-lb-mdkit-heading-font-weight: 650;
   --mp-lb-mdkit-heading-1-size: 1.5rem;
   --mp-lb-mdkit-heading-2-size: 1.25rem;
+  --mp-lb-mdkit-heading-3-size: 1.125rem;
   --mp-lb-mdkit-code-background: var(--mp-lb-mdkit-muted);
   --mp-lb-mdkit-code-radius: 0.35rem;
   --mp-lb-mdkit-code-block-radius: 0.75rem;
@@ -108,6 +128,7 @@
 }
 
 .mp-lb-mdkit-editor-surface {
+  position: relative;
   width: 100%;
   min-height: 0;
   overflow: visible;
@@ -115,6 +136,168 @@
   padding: var(--mp-lb-mdkit-surface-padding);
 }
 
+.mp-lb-mdkit-search-panel {
+  position: sticky;
+  z-index: 5;
+  top: 0.5rem;
+  margin: calc(var(--mp-lb-mdkit-surface-padding) * -0.5) 0
+    var(--mp-lb-mdkit-block-gap) auto;
+  width: min(100%, 27rem);
+  min-height: 2.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  border: 0;
+  border-radius: var(--radius-xl, 0.875rem);
+  background: var(--mp-lb-mdkit-popover);
+  box-shadow:
+    0 1px 2px rgb(15 23 42 / 6%),
+    0 0.5rem 1.25rem rgb(15 23 42 / 10%);
+  color: var(--mp-lb-mdkit-popover-foreground);
+  padding: 0.375rem;
+}
+
+.mp-lb-mdkit-search-icon {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+  color: var(--mp-lb-mdkit-muted-foreground);
+  margin-left: 0.5rem;
+}
+
+.mp-lb-mdkit-search-input {
+  height: 2rem;
+  min-width: 0;
+  flex: 1 1 auto;
+  border: 0;
+  border-radius: var(--radius-md, 0.5rem);
+  background: var(--mp-lb-mdkit-input-background);
+  color: inherit;
+  font: inherit;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  outline: none;
+  padding: 0 0.5rem;
+  transition:
+    background-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.mp-lb-mdkit-markdown-editor .mp-lb-mdkit-search-input {
+  border-color: transparent;
+  border-style: solid;
+  border-width: 0;
+  box-shadow: none;
+  outline: none;
+}
+
+.mp-lb-mdkit-search-input::placeholder {
+  color: var(--mp-lb-mdkit-muted-foreground);
+}
+
+.mp-lb-mdkit-search-input:focus {
+  outline: none;
+  background: var(--mp-lb-mdkit-input-background-hover);
+}
+
+.mp-lb-mdkit-markdown-editor .mp-lb-mdkit-search-input:focus,
+.mp-lb-mdkit-markdown-editor .mp-lb-mdkit-search-input:focus-visible {
+  border-color: transparent;
+  border-width: 0;
+  box-shadow: none;
+  outline: none;
+}
+
+.mp-lb-mdkit-search-input::-webkit-search-cancel-button {
+  appearance: none;
+  width: 1rem;
+  height: 1rem;
+  background-color: var(--mp-lb-mdkit-muted-foreground);
+  cursor: pointer;
+  opacity: 0.75;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M4.22 3.28a.75.75 0 0 0-.94.94L7.06 8l-3.78 3.78a.75.75 0 1 0 .94.94L8 8.94l3.78 3.78a.75.75 0 1 0 .94-.94L8.94 8l3.78-3.78a.75.75 0 1 0-.94-.94L8 7.06 4.22 3.28Z'/%3E%3C/svg%3E")
+    center / 1rem 1rem no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M4.22 3.28a.75.75 0 0 0-.94.94L7.06 8l-3.78 3.78a.75.75 0 1 0 .94.94L8 8.94l3.78 3.78a.75.75 0 1 0 .94-.94L8.94 8l3.78-3.78a.75.75 0 1 0-.94-.94L8 7.06 4.22 3.28Z'/%3E%3C/svg%3E")
+    center / 1rem 1rem no-repeat;
+}
+
+.mp-lb-mdkit-search-input::-webkit-search-cancel-button:hover {
+  opacity: 1;
+}
+
+.mp-lb-mdkit-search-status {
+  flex: 0 0 auto;
+  color: var(--mp-lb-mdkit-muted-foreground);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  padding: 0 0.375rem;
+  white-space: nowrap;
+}
+
+.mp-lb-mdkit-search-button {
+  width: 2rem;
+  height: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  border: 0;
+  border-radius: var(--radius-4xl, 999px);
+  background: transparent;
+  color: var(--mp-lb-mdkit-muted-foreground);
+  cursor: pointer;
+  padding: 0;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.mp-lb-mdkit-search-button:hover:not(:disabled),
+.mp-lb-mdkit-search-button:focus-visible {
+  background: var(--mp-lb-mdkit-input-background-hover);
+  color: var(--mp-lb-mdkit-foreground);
+}
+
+.mp-lb-mdkit-search-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--mp-lb-mdkit-ring) 50%, transparent);
+}
+
+.mp-lb-mdkit-search-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.mp-lb-mdkit-search-button svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.mp-lb-mdkit-search-match {
+  border-radius: 0;
+  background: transparent;
+  box-shadow: inset 0 -3px 0 #3b82f6;
+}
+
+.mp-lb-mdkit-search-match-active {
+  background: transparent;
+  box-shadow: inset 0 -3px 0 #2563eb;
+}
+
+@media (max-width: 42rem) {
+  .mp-lb-mdkit-search-panel {
+    width: 100%;
+  }
+
+  .mp-lb-mdkit-search-status {
+    max-width: 5.75rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
 .mp-lb-mdkit-markdown-editor-fill-height .mp-lb-mdkit-editor-surface {
   display: flex;
   overflow: auto;
@@ -162,34 +345,68 @@
   flex: 0 0 auto;
 }
 
+.mp-lb-mdkit-tiptap
+  :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, table) {
+  margin: 0;
+}
+
 .mp-lb-mdkit-tiptap > * + * {
   margin-top: var(--mp-lb-mdkit-block-gap);
 }
 
+.mp-lb-mdkit-tiptap h1,
+.mp-lb-mdkit-tiptap h2,
+.mp-lb-mdkit-tiptap h3,
+.mp-lb-mdkit-tiptap h4,
+.mp-lb-mdkit-tiptap h5,
+.mp-lb-mdkit-tiptap h6 {
+  font-weight: var(--mp-lb-mdkit-heading-font-weight);
+}
+
 .mp-lb-mdkit-tiptap h1 {
-  margin: 0 0 var(--mp-lb-mdkit-block-gap);
   font-size: var(--mp-lb-mdkit-heading-1-size);
-  font-weight: var(--mp-lb-mdkit-heading-font-weight);
   line-height: 1.25;
 }
 
 .mp-lb-mdkit-tiptap h2 {
-  margin: 0 0 var(--mp-lb-mdkit-block-gap);
   font-size: var(--mp-lb-mdkit-heading-2-size);
-  font-weight: var(--mp-lb-mdkit-heading-font-weight);
   line-height: 1.3;
 }
 
-.mp-lb-mdkit-tiptap p {
-  margin: 0 0 var(--mp-lb-mdkit-block-gap);
+.mp-lb-mdkit-tiptap h3,
+.mp-lb-mdkit-tiptap h4,
+.mp-lb-mdkit-tiptap h5,
+.mp-lb-mdkit-tiptap h6 {
+  font-size: var(--mp-lb-mdkit-heading-3-size);
+  line-height: 1.35;
 }
 
 .mp-lb-mdkit-tiptap ul,
 .mp-lb-mdkit-tiptap ol {
-  margin: 0 0 var(--mp-lb-mdkit-block-gap);
+  margin: 0;
   padding-left: 1.5rem;
 }
 
+.mp-lb-mdkit-tiptap
+  > :is(h1, h2, h3)
+  + :is(p, ul, ol, blockquote, pre, table) {
+  margin-top: var(--mp-lb-mdkit-tight-gap);
+}
+
+.mp-lb-mdkit-tiptap > p + p {
+  margin-top: var(--mp-lb-mdkit-block-gap);
+}
+
+.mp-lb-mdkit-tiptap > :is(p, ul, ol) + :is(ul, ol, p) {
+  margin-top: var(--mp-lb-mdkit-tight-gap);
+}
+
+.mp-lb-mdkit-tiptap
+  > :is(p, ul, ol, blockquote, pre, table, hr)
+  + :is(h1, h2, h3) {
+  margin-top: var(--mp-lb-mdkit-section-gap);
+}
+
 .mp-lb-mdkit-tiptap ul {
   list-style: disc;
   list-style-position: outside;
@@ -220,7 +437,7 @@
 }
 
 .mp-lb-mdkit-tiptap pre {
-  margin: 0 0 var(--mp-lb-mdkit-block-gap);
+  margin: 0;
   padding: 0.75rem 0.875rem;
   overflow-x: auto;
   border: 1px solid var(--mp-lb-mdkit-border);
@@ -242,7 +459,7 @@
 }
 
 .mp-lb-mdkit-tiptap blockquote {
-  margin: 0 0 var(--mp-lb-mdkit-block-gap);
+  margin: 0;
   padding-left: 0.875rem;
   border-left: 3px solid var(--mp-lb-mdkit-quote-border-color);
   color: var(--mp-lb-mdkit-muted-foreground);
@@ -252,7 +469,7 @@
   height: 1px;
   border: 0;
   background: var(--mp-lb-mdkit-border);
-  margin: var(--mp-lb-mdkit-block-gap) 0;
+  margin: var(--mp-lb-mdkit-section-gap) 0;
 }
 
 .mp-lb-mdkit-tiptap img {
@@ -263,7 +480,7 @@
 .mp-lb-mdkit-tiptap table {
   width: 100%;
   border-collapse: collapse;
-  margin: 0 0 var(--mp-lb-mdkit-block-gap);
+  margin: 0;
 }
 
 .mp-lb-mdkit-tiptap th,