@mp-lb/mdkit 0.2.5 → 0.3.1

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/MarkdownBubbleMenu.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEditorState } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
-import { Bold, Code2, Heading1, Heading2, Italic, Link2, List, ListOrdered, Quote, Strikethrough, } from "lucide-react";
+import { Bold, Code2, Heading1, Heading2, Heading3, Italic, Link2, List, ListOrdered, Quote, Strikethrough, } from "lucide-react";
 import { joinClassNames } from "../ui/joinClassNames.js";
 const toolbarActiveStateIsEqual = (left, right) => {
     if (!right) {
@@ -13,6 +13,7 @@ const toolbarActiveStateIsEqual = (left, right) => {
         left.codeBlock === right.codeBlock &&
         left.heading1 === right.heading1 &&
         left.heading2 === right.heading2 &&
+        left.heading3 === right.heading3 &&
         left.italic === right.italic &&
         left.link === right.link &&
         left.orderedList === right.orderedList &&
@@ -27,6 +28,7 @@ const useToolbarActiveState = (editor) => useEditorState({
         codeBlock: currentEditor.isActive("codeBlock"),
         heading1: currentEditor.isActive("heading", { level: 1 }),
         heading2: currentEditor.isActive("heading", { level: 2 }),
+        heading3: currentEditor.isActive("heading", { level: 3 }),
         italic: currentEditor.isActive("italic"),
         link: currentEditor.isActive("link"),
         orderedList: currentEditor.isActive("orderedList"),
@@ -80,5 +82,5 @@ export const MarkdownBubbleMenu = ({ editor }) => {
     const activeState = useToolbarActiveState(editor);
     return (_jsxs(BubbleMenu, { className: "mp-lb-mdkit-toolbar", editor: editor, options: {
             placement: "top",
-        }, shouldShow: shouldShowMarkdownBubbleMenu, children: [_jsx(ToolbarButton, { ariaLabel: "Bold", isActive: activeState.bold, onAction: () => editor.chain().focus().toggleBold().run(), children: _jsx(Bold, {}) }), _jsx(ToolbarButton, { ariaLabel: "Italic", isActive: activeState.italic, onAction: () => editor.chain().focus().toggleItalic().run(), children: _jsx(Italic, {}) }), _jsx(ToolbarButton, { ariaLabel: "Strikethrough", isActive: activeState.strike, onAction: () => editor.chain().focus().toggleStrike().run(), children: _jsx(Strikethrough, {}) }), _jsx(ToolbarButton, { ariaLabel: "Code block", isActive: activeState.codeBlock, onAction: () => editor.chain().focus().toggleCodeBlock().run(), children: _jsx(Code2, {}) }), _jsx("div", { className: "mp-lb-mdkit-toolbar-divider" }), _jsx(ToolbarButton, { ariaLabel: "Heading 1", isActive: activeState.heading1, onAction: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), children: _jsx(Heading1, {}) }), _jsx(ToolbarButton, { ariaLabel: "Heading 2", isActive: activeState.heading2, onAction: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), children: _jsx(Heading2, {}) }), _jsx("div", { className: "mp-lb-mdkit-toolbar-divider" }), _jsx(ToolbarButton, { ariaLabel: "Bullet list", isActive: activeState.bulletList, onAction: () => editor.chain().focus().toggleBulletList().run(), children: _jsx(List, {}) }), _jsx(ToolbarButton, { ariaLabel: "Ordered list", isActive: activeState.orderedList, onAction: () => editor.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrdered, {}) }), _jsx(ToolbarButton, { ariaLabel: "Blockquote", isActive: activeState.blockquote, onAction: () => editor.chain().focus().toggleBlockquote().run(), children: _jsx(Quote, {}) }), _jsx("div", { className: "mp-lb-mdkit-toolbar-divider" }), _jsx(ToolbarButton, { ariaLabel: "Link", isActive: activeState.link, onAction: () => setLink(editor), children: _jsx(Link2, {}) })] }));
+        }, shouldShow: shouldShowMarkdownBubbleMenu, children: [_jsx(ToolbarButton, { ariaLabel: "Bold", isActive: activeState.bold, onAction: () => editor.chain().focus().toggleBold().run(), children: _jsx(Bold, {}) }), _jsx(ToolbarButton, { ariaLabel: "Italic", isActive: activeState.italic, onAction: () => editor.chain().focus().toggleItalic().run(), children: _jsx(Italic, {}) }), _jsx(ToolbarButton, { ariaLabel: "Strikethrough", isActive: activeState.strike, onAction: () => editor.chain().focus().toggleStrike().run(), children: _jsx(Strikethrough, {}) }), _jsx(ToolbarButton, { ariaLabel: "Code block", isActive: activeState.codeBlock, onAction: () => editor.chain().focus().toggleCodeBlock().run(), children: _jsx(Code2, {}) }), _jsx("div", { className: "mp-lb-mdkit-toolbar-divider" }), _jsx(ToolbarButton, { ariaLabel: "Heading 1", isActive: activeState.heading1, onAction: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), children: _jsx(Heading1, {}) }), _jsx(ToolbarButton, { ariaLabel: "Heading 2", isActive: activeState.heading2, onAction: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), children: _jsx(Heading2, {}) }), _jsx(ToolbarButton, { ariaLabel: "Heading 3", isActive: activeState.heading3, onAction: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), children: _jsx(Heading3, {}) }), _jsx("div", { className: "mp-lb-mdkit-toolbar-divider" }), _jsx(ToolbarButton, { ariaLabel: "Bullet list", isActive: activeState.bulletList, onAction: () => editor.chain().focus().toggleBulletList().run(), children: _jsx(List, {}) }), _jsx(ToolbarButton, { ariaLabel: "Ordered list", isActive: activeState.orderedList, onAction: () => editor.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrdered, {}) }), _jsx(ToolbarButton, { ariaLabel: "Blockquote", isActive: activeState.blockquote, onAction: () => editor.chain().focus().toggleBlockquote().run(), children: _jsx(Quote, {}) }), _jsx("div", { className: "mp-lb-mdkit-toolbar-divider" }), _jsx(ToolbarButton, { ariaLabel: "Link", isActive: activeState.link, onAction: () => setLink(editor), children: _jsx(Link2, {}) })] }));
 };

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,10 +1,12 @@
 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({
-        heading: { levels: [1, 2] },
+        heading: { levels: [1, 2, 3, 4, 5, 6] },
         link: {
             HTMLAttributes: {
                 rel: "noopener noreferrer",
@@ -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;