@mp-lb/mdkit 0.0.1-main.2.1

package/dist/markdown/MdKitEditor.d.ts

@@ -0,0 +1,25 @@
+import type { CSSProperties } from "react";
+import type { MdKitCollaborationSession } from "../document/documentTypes";
+import type { MdKitEditorDebugEvent } from "./editorDebug";
+type MdKitEditorBaseProps = {
+    className?: string;
+    fillHeight?: boolean;
+    instanceKey?: string | number;
+    onDebugEvent?: (event: MdKitEditorDebugEvent) => void;
+    onFocusChange?: (focused: boolean) => void;
+    readOnly?: boolean;
+    style?: CSSProperties;
+};
+type LocalMdKitEditorProps = MdKitEditorBaseProps & {
+    collaboration?: null;
+    onChange?: (markdown: string) => void;
+    value: string;
+};
+type CollaborativeMdKitEditorProps = MdKitEditorBaseProps & {
+    collaboration: MdKitCollaborationSession;
+    onChange?: (markdown: string) => void;
+    value?: string;
+};
+export type MdKitEditorProps = CollaborativeMdKitEditorProps | LocalMdKitEditorProps;
+export declare const MdKitEditor: (props: MdKitEditorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/markdown/MdKitEditor.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { joinClassNames } from "../ui/joinClassNames";
+import { TiptapMarkdownSurface } from "./TiptapMarkdownSurface";
+export const MdKitEditor = (props) => {
+    const { className, fillHeight = false, readOnly = false, style, ...surfaceProps } = props;
+    return (_jsx("div", { className: joinClassNames("mdkit-markdown-editor", fillHeight && "mdkit-markdown-editor-fill-height", className), "data-read-only": readOnly ? "true" : undefined, style: style, children: _jsx(TiptapMarkdownSurface, { readOnly: readOnly, ...surfaceProps }, props.instanceKey) }));
+};

package/dist/markdown/MdKitEditor.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/markdown/MdKitEditor.test.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { act, fireEvent, render, screen, waitFor, } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { MdKitEditor } from "./MdKitEditor";
+const firstMarkdown = "# Stored document\n\nOriginal paragraph.";
+const restoredMarkdown = "# Restored document\n\n- first\n- second";
+const TestHarness = () => {
+    const [value, setValue] = useState(firstMarkdown);
+    const [revision, setRevision] = useState(0);
+    const coldRestore = () => {
+        setValue(restoredMarkdown);
+        setRevision((current) => current + 1);
+    };
+    return (_jsxs("div", { children: [_jsx("button", { type: "button", onClick: () => setValue(restoredMarkdown), children: "Replace from storage" }), _jsx("button", { type: "button", onClick: coldRestore, children: "Cold restore" }), _jsx(MdKitEditor, { instanceKey: revision, value: value, onChange: setValue })] }));
+};
+const editorText = (container) => {
+    const editor = container.querySelector(".ProseMirror");
+    if (!(editor instanceof HTMLElement)) {
+        throw new Error("Expected TipTap to render a ProseMirror editor.");
+    }
+    return editor.textContent ?? "";
+};
+describe("MdKitEditor", () => {
+    it("marks the editor as full-height when requested", async () => {
+        const { container } = render(_jsx(MdKitEditor, { fillHeight: true, value: firstMarkdown, onChange: () => { } }));
+        await waitFor(() => {
+            expect(container.querySelector(".mdkit-markdown-editor-fill-height")).toBeTruthy();
+            expect(editorText(container)).toContain("Stored document");
+        });
+    });
+    it("keeps the editor root full-width without fill-height", async () => {
+        const css = readFileSync(resolve(__dirname, "../styles.css"), "utf8");
+        expect(css).toMatch(/\.mdkit-markdown-editor\s*{[^}]*width:\s*100%;/);
+    });
+    it("can render the editor as read-only", async () => {
+        const { container } = render(_jsx(MdKitEditor, { readOnly: true, value: "Read-only document", onChange: () => { } }));
+        const editor = await waitFor(() => {
+            const element = container.querySelector(".ProseMirror");
+            if (!(element instanceof HTMLElement)) {
+                throw new Error("Expected TipTap to render a ProseMirror editor.");
+            }
+            return element;
+        });
+        expect(editor.getAttribute("contenteditable")).toBe("false");
+        expect(container
+            .querySelector(".mdkit-markdown-editor")
+            ?.getAttribute("data-read-only")).toBe("true");
+    });
+    it("hydrates and restores from serialized markdown values", async () => {
+        const { container } = render(_jsx(TestHarness, {}));
+        await waitFor(() => {
+            expect(editorText(container)).toContain("Stored document");
+            expect(editorText(container)).toContain("Original paragraph.");
+        });
+        await act(async () => {
+            screen.getByRole("button", { name: "Replace from storage" }).click();
+        });
+        await waitFor(() => {
+            expect(editorText(container)).toContain("Restored document");
+            expect(editorText(container)).toContain("first");
+            expect(editorText(container)).toContain("second");
+        });
+        await act(async () => {
+            screen.getByRole("button", { name: "Cold restore" }).click();
+        });
+        await waitFor(() => {
+            expect(editorText(container)).toContain("Restored document");
+            expect(editorText(container)).toContain("first");
+            expect(editorText(container)).toContain("second");
+        });
+    });
+    it("hydrates middle blank-line runs as visible empty editor paragraphs", async () => {
+        const markdown = "Before paragraph.\n\nWhitespace probe:\n\n\n\n\nAfter paragraph.";
+        const { container } = render(_jsx(MdKitEditor, { value: markdown, onChange: () => { } }));
+        await waitFor(() => {
+            expect(editorText(container)).toContain("Whitespace probe:");
+            expect(editorText(container)).toContain("After paragraph.");
+        });
+        const paragraphs = Array.from(container.querySelectorAll(".ProseMirror p"));
+        const whitespaceParagraphIndex = paragraphs.findIndex((paragraph) => paragraph.textContent === "Whitespace probe:");
+        const afterParagraphIndex = paragraphs.findIndex((paragraph) => paragraph.textContent === "After paragraph.");
+        expect(whitespaceParagraphIndex).toBeGreaterThanOrEqual(0);
+        expect(afterParagraphIndex).toBeGreaterThan(whitespaceParagraphIndex);
+        expect(afterParagraphIndex - whitespaceParagraphIndex).toBeGreaterThan(1);
+    });
+    it("keeps the same editor instance when controlled value changes", async () => {
+        const { container, rerender } = render(_jsx(MdKitEditor, { value: "one", onChange: () => { } }));
+        const editor = await waitFor(() => {
+            const element = container.querySelector(".ProseMirror");
+            if (!(element instanceof HTMLElement)) {
+                throw new Error("Expected TipTap to render a ProseMirror editor.");
+            }
+            return element;
+        });
+        rerender(_jsx(MdKitEditor, { value: "one two", onChange: () => { } }));
+        await waitFor(() => {
+            expect(container.querySelector(".ProseMirror")).toBe(editor);
+            expect(editorText(container)).toContain("one two");
+        });
+    });
+    it("focuses the editor when the fill-height background is clicked", async () => {
+        const onFocusChange = vi.fn();
+        const { container } = render(_jsx(MdKitEditor, { fillHeight: true, value: "", onChange: () => { }, onFocusChange: onFocusChange }));
+        const surface = await waitFor(() => {
+            const element = container.querySelector(".hsk-editor-surface");
+            if (!(element instanceof HTMLElement)) {
+                throw new Error("Expected editor surface to render.");
+            }
+            return element;
+        });
+        const editor = container.querySelector(".ProseMirror");
+        if (!(editor instanceof HTMLElement)) {
+            throw new Error("Expected TipTap to render a ProseMirror editor.");
+        }
+        fireEvent.pointerDown(surface);
+        fireEvent.pointerUp(surface);
+        fireEvent.click(surface);
+        await waitFor(() => {
+            expect(document.activeElement).toBe(editor);
+            expect(onFocusChange).toHaveBeenCalledWith(true);
+        });
+    });
+});

package/dist/markdown/TiptapMarkdownSurface.d.ts

@@ -0,0 +1,23 @@
+import type { MdKitCollaborationSession } from "../document/documentTypes";
+import type { MdKitEditorDebugEvent } from "./editorDebug";
+type LocalTiptapMarkdownSurfaceProps = {
+    collaboration?: null;
+    onChange?: (markdown: string) => void;
+    onDebugEvent?: (event: MdKitEditorDebugEvent) => void;
+    onFocusChange?: (focused: boolean) => void;
+    placeholder?: string;
+    readOnly?: boolean;
+    value: string;
+};
+type CollaborativeTiptapMarkdownSurfaceProps = {
+    collaboration: MdKitCollaborationSession;
+    onChange?: (markdown: string) => void;
+    onDebugEvent?: (event: MdKitEditorDebugEvent) => void;
+    onFocusChange?: (focused: boolean) => void;
+    placeholder?: string;
+    readOnly?: boolean;
+    value?: string;
+};
+type TiptapMarkdownSurfaceProps = CollaborativeTiptapMarkdownSurfaceProps | LocalTiptapMarkdownSurfaceProps;
+export declare const TiptapMarkdownSurface: (props: TiptapMarkdownSurfaceProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/markdown/TiptapMarkdownSurface.js

@@ -0,0 +1,430 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import Collaboration from "@tiptap/extension-collaboration";
+import CollaborationCaret from "@tiptap/extension-collaboration-caret";
+import { Markdown } from "@tiptap/markdown";
+import Placeholder from "@tiptap/extension-placeholder";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { MarkdownBubbleMenu } from "./MarkdownBubbleMenu";
+import { normalizeMarkdownSerialization } from "./normalizeMarkdownSerialization";
+import { prepareMarkdownForEditorHydration } from "./prepareMarkdownForEditorHydration";
+const describeElement = (element) => {
+    const classes = element instanceof HTMLElement && element.className
+        ? `.${String(element.className).trim().replace(/\s+/g, ".")}`
+        : "";
+    return `${element.tagName.toLowerCase()}${classes}`;
+};
+const describeEventTarget = (target) => target instanceof Element ? describeElement(target) : String(target);
+const isInteractiveElement = (target) => !!target.closest("a,button,input,select,textarea,[contenteditable='false']");
+const createEditorDebugSnapshot = (editor, phase) => {
+    const activeElement = typeof document === "undefined" || !document.activeElement
+        ? null
+        : describeElement(document.activeElement);
+    const browserSelection = typeof window === "undefined" ? null : window.getSelection();
+    let editorIsFocused = null;
+    let selectionAnchor = null;
+    let selectionEmpty = null;
+    let selectionFrom = null;
+    let selectionHead = null;
+    let selectionTo = null;
+    let viewHasFocus = null;
+    let viewUnavailable = false;
+    try {
+        editorIsFocused = editor.isFocused;
+        selectionAnchor = editor.state.selection.anchor;
+        selectionEmpty = editor.state.selection.empty;
+        selectionFrom = editor.state.selection.from;
+        selectionHead = editor.state.selection.head;
+        selectionTo = editor.state.selection.to;
+        viewHasFocus = editor.view.hasFocus();
+    }
+    catch {
+        viewUnavailable = true;
+    }
+    return {
+        activeElement,
+        browserSelectionAnchorNode: browserSelection?.anchorNode instanceof Element
+            ? describeElement(browserSelection.anchorNode)
+            : (browserSelection?.anchorNode?.nodeName ?? null),
+        browserSelectionAnchorOffset: browserSelection?.anchorOffset ?? null,
+        editorIsFocused,
+        phase,
+        selectionAnchor,
+        selectionEmpty,
+        selectionFrom,
+        selectionHead,
+        selectionTo,
+        viewHasFocus,
+        viewUnavailable,
+    };
+};
+export const TiptapMarkdownSurface = (props) => {
+    const { collaboration = null, onDebugEvent, onFocusChange, placeholder = "Start writing...", readOnly = false, } = props;
+    const markdownValue = "value" in props && typeof props.value === "string" ? props.value : "";
+    const editorSurfaceRef = useRef(null);
+    const onDebugEventRef = useRef(onDebugEvent);
+    const onFocusChangeRef = useRef(onFocusChange);
+    const onChangeRef = useRef(props.onChange);
+    const currentMarkdownRef = useRef(markdownValue);
+    const isApplyingExternalValueRef = useRef(false);
+    const pendingControlledEchoesRef = useRef(new Set());
+    const pendingContentFocusRef = useRef(null);
+    const shouldFocusAfterPointerRef = useRef(false);
+    const collaborationDocument = collaboration?.document ?? null;
+    const collaborationProvider = collaboration?.provider ?? null;
+    const collaborationUserColor = collaboration?.collaborator.color ?? "";
+    const collaborationUserName = collaboration?.collaborator.name ?? "";
+    const hasCollaboration = !!collaborationDocument;
+    useEffect(() => {
+        onDebugEventRef.current = onDebugEvent;
+    }, [onDebugEvent]);
+    useEffect(() => {
+        onFocusChangeRef.current = onFocusChange;
+    }, [onFocusChange]);
+    useEffect(() => {
+        onChangeRef.current = props.onChange;
+    }, [props.onChange]);
+    const collaborationCaretExtensions = useMemo(() => collaborationProvider
+        ? [
+            CollaborationCaret.configure({
+                provider: collaborationProvider,
+                render: (user) => {
+                    const cursor = document.createElement("span");
+                    cursor.classList.add("hsk-collaboration-caret");
+                    cursor.style.borderColor = user.color;
+                    const label = document.createElement("div");
+                    label.classList.add("hsk-collaboration-caret-label");
+                    label.style.backgroundColor = user.color;
+                    label.textContent = user.name;
+                    cursor.appendChild(label);
+                    return cursor;
+                },
+                selectionRender: (user) => ({
+                    style: `background-color: ${user.color}20`,
+                }),
+                user: {
+                    color: collaborationUserColor,
+                    name: collaborationUserName,
+                },
+            }),
+        ]
+        : [], [collaborationProvider, collaborationUserColor, collaborationUserName]);
+    const editor = useEditor({
+        content: hasCollaboration
+            ? undefined
+            : prepareMarkdownForEditorHydration(markdownValue),
+        contentType: "markdown",
+        editable: !readOnly,
+        editorProps: {
+            attributes: {
+                class: "hsk-tiptap",
+                spellcheck: "false",
+            },
+        },
+        extensions: [
+            StarterKit.configure({
+                heading: { levels: [1, 2] },
+                link: {
+                    HTMLAttributes: {
+                        rel: "noopener noreferrer",
+                        target: "_blank",
+                    },
+                    autolink: true,
+                    linkOnPaste: true,
+                    openOnClick: true,
+                },
+                undoRedo: hasCollaboration ? false : undefined,
+            }),
+            Placeholder.configure({
+                placeholder,
+            }),
+            Markdown.configure({
+                markedOptions: {
+                    gfm: true,
+                },
+            }),
+            ...(collaborationDocument
+                ? [
+                    Collaboration.configure({
+                        document: collaborationDocument,
+                    }),
+                    ...collaborationCaretExtensions,
+                ]
+                : []),
+        ],
+        onBlur: ({ editor: blurredEditor }) => {
+            onDebugEventRef.current?.({
+                detail: createEditorDebugSnapshot(blurredEditor, "blur"),
+                timestamp: Date.now(),
+                type: "editor-blur",
+            });
+            onFocusChangeRef.current?.(false);
+        },
+        onFocus: ({ editor: focusedEditor }) => {
+            onDebugEventRef.current?.({
+                detail: createEditorDebugSnapshot(focusedEditor, "focus"),
+                timestamp: Date.now(),
+                type: "editor-focus",
+            });
+            onFocusChangeRef.current?.(true);
+        },
+        onUpdate: ({ editor: updatedEditor }) => {
+            if (isApplyingExternalValueRef.current) {
+                return;
+            }
+            const nextSerializedMarkdown = normalizeMarkdownSerialization(updatedEditor.getMarkdown());
+            const previousMarkdown = currentMarkdownRef.current;
+            const nextMarkdown = nextSerializedMarkdown;
+            currentMarkdownRef.current = nextMarkdown;
+            if (nextMarkdown !== previousMarkdown) {
+                pendingControlledEchoesRef.current.add(nextMarkdown);
+                onChangeRef.current?.(nextMarkdown);
+            }
+        },
+    }, [
+        collaborationCaretExtensions,
+        collaborationDocument,
+        hasCollaboration,
+        placeholder,
+    ]);
+    useEffect(() => {
+        editor?.setEditable(!readOnly);
+    }, [editor, readOnly]);
+    useEffect(() => {
+        if (!editor) {
+            return;
+        }
+        if (markdownValue === currentMarkdownRef.current) {
+            pendingControlledEchoesRef.current.clear();
+            return;
+        }
+        if (pendingControlledEchoesRef.current.has(markdownValue)) {
+            pendingControlledEchoesRef.current.delete(markdownValue);
+            return;
+        }
+        pendingControlledEchoesRef.current.clear();
+        isApplyingExternalValueRef.current = true;
+        editor.commands.setContent(prepareMarkdownForEditorHydration(markdownValue), {
+            contentType: "markdown",
+            emitUpdate: false,
+        });
+        currentMarkdownRef.current = markdownValue;
+        window.queueMicrotask(() => {
+            isApplyingExternalValueRef.current = false;
+        });
+    }, [editor, markdownValue]);
+    if (!editor) {
+        return (_jsx("div", { className: "hsk-editor-shell", children: _jsx("div", { className: "hsk-editor-empty", children: collaboration
+                    ? "Connecting collaboration session..."
+                    : "Loading editor..." }) }));
+    }
+    const getProseMirrorElement = () => editorSurfaceRef.current?.querySelector(".ProseMirror");
+    const clampEditorPosition = (position) => Math.max(0, Math.min(position, editor.state.doc.content.size));
+    const getEditorBackgroundPositionAtClientPoint = (proseMirror, clientY) => {
+        const blockElements = Array.from(proseMirror.children).filter((child) => child instanceof HTMLElement);
+        if (blockElements.length === 0) {
+            return null;
+        }
+        for (let index = 0; index < blockElements.length; index += 1) {
+            const block = blockElements[index];
+            const rect = block.getBoundingClientRect();
+            if (clientY <= rect.bottom) {
+                if (clientY >= rect.top) {
+                    return null;
+                }
+                const previousBlock = blockElements[index - 1];
+                if (previousBlock) {
+                    const previousRect = previousBlock.getBoundingClientRect();
+                    const distanceFromPrevious = Math.abs(clientY - previousRect.bottom);
+                    const distanceFromNext = Math.abs(rect.top - clientY);
+                    if (distanceFromPrevious <= distanceFromNext) {
+                        return editor.view.posAtDOM(previousBlock, previousBlock.childNodes.length);
+                    }
+                }
+                return editor.view.posAtDOM(block, 0);
+            }
+        }
+        const lastBlock = blockElements[blockElements.length - 1];
+        return editor.view.posAtDOM(lastBlock, lastBlock.childNodes.length);
+    };
+    const getEditorPositionAtClientPoint = (clientX, clientY, target) => {
+        const proseMirror = getProseMirrorElement();
+        const targetIsEditorBackground = proseMirror &&
+            target instanceof Element &&
+            (target === proseMirror || !proseMirror.contains(target));
+        if (proseMirror && targetIsEditorBackground) {
+            const backgroundPosition = getEditorBackgroundPositionAtClientPoint(proseMirror, clientY);
+            if (typeof backgroundPosition === "number") {
+                return clampEditorPosition(backgroundPosition);
+            }
+        }
+        let coordinatePosition;
+        try {
+            coordinatePosition = editor.view.posAtCoords({
+                left: clientX,
+                top: clientY,
+            })?.pos;
+        }
+        catch {
+            coordinatePosition = undefined;
+        }
+        if (typeof coordinatePosition !== "number") {
+            return editor.state.doc.content.size;
+        }
+        return clampEditorPosition(coordinatePosition);
+    };
+    const focusEditorAtPosition = (position) => {
+        if (editor.isDestroyed || readOnly) {
+            return;
+        }
+        const { state, view } = editor;
+        const nextPosition = Math.max(0, Math.min(position, state.doc.content.size));
+        try {
+            emitDebugEvent("focus-at-position-before", {
+                requestedPosition: nextPosition,
+            });
+            view.focus();
+            editor.commands.setTextSelection(nextPosition);
+            view.focus();
+            emitDebugEvent("focus-at-position-after", {
+                requestedPosition: nextPosition,
+            });
+        }
+        catch {
+            emitDebugEvent("focus-at-position-aborted", {
+                requestedPosition: nextPosition,
+            });
+        }
+    };
+    const queueEditorFocusAtPosition = (position) => {
+        emitDebugEvent("focus-queued", {
+            pendingFromPointer: shouldFocusAfterPointerRef.current,
+            requestedPosition: position,
+        });
+        window.setTimeout(() => {
+            focusEditorAtPosition(position);
+            window.requestAnimationFrame(() => {
+                emitDebugEvent("focus-raf-run", {
+                    requestedPosition: position,
+                });
+                focusEditorAtPosition(position);
+            });
+        }, 0);
+    };
+    const emitDebugEvent = (type, detail) => {
+        const event = {
+            detail: {
+                ...detail,
+                ...createEditorDebugSnapshot(editor, type),
+            },
+            timestamp: Date.now(),
+            type,
+        };
+        onDebugEventRef.current?.(event);
+    };
+    const shouldFocusEditorBackground = (target) => {
+        if (!(target instanceof Element)) {
+            emitDebugEvent("hitbox-target-not-element", {
+                targetType: typeof target,
+            });
+            return false;
+        }
+        const proseMirror = getProseMirrorElement();
+        if (!proseMirror) {
+            emitDebugEvent("hitbox-missing-prosemirror", {
+                target: describeElement(target),
+            });
+            return false;
+        }
+        const targetIsInsideEditor = proseMirror.contains(target);
+        const targetIsEmptyPlaceholder = !!target.closest(".ProseMirror p.is-editor-empty");
+        const editorIsEmpty = editor.isEmpty;
+        const shouldFocus = !isInteractiveElement(target) &&
+            (target === proseMirror ||
+                !targetIsInsideEditor ||
+                targetIsEmptyPlaceholder ||
+                (editorIsEmpty && targetIsInsideEditor));
+        emitDebugEvent("hitbox-check", {
+            editorIsEmpty,
+            proseMirrorContainsTarget: targetIsInsideEditor,
+            shouldFocus,
+            target: describeElement(target),
+            targetIsEmptyPlaceholder,
+            targetIsProseMirror: target === proseMirror,
+        });
+        return shouldFocus;
+    };
+    const focusEditorBackgroundOnPointerDown = (event) => {
+        const proseMirror = editorSurfaceRef.current?.querySelector(".ProseMirror");
+        const target = event.target;
+        if (readOnly) {
+            return;
+        }
+        if (proseMirror &&
+            target instanceof Element &&
+            proseMirror.contains(target) &&
+            target !== proseMirror &&
+            !editor.isFocused &&
+            !editor.isEmpty &&
+            !target.closest(".ProseMirror p.is-editor-empty") &&
+            !isInteractiveElement(target)) {
+            pendingContentFocusRef.current = {
+                pointerId: event.pointerId,
+                x: event.clientX,
+                y: event.clientY,
+            };
+            emitDebugEvent("content-pointer-focus-pending", {
+                pointerType: event.pointerType,
+                target: describeElement(target),
+            });
+            return;
+        }
+        if (!shouldFocusEditorBackground(event.target)) {
+            return;
+        }
+        const requestedPosition = getEditorPositionAtClientPoint(event.clientX, event.clientY, event.target);
+        event.preventDefault();
+        shouldFocusAfterPointerRef.current = false;
+        emitDebugEvent("hitbox-pointer-down", {
+            defaultPrevented: event.defaultPrevented,
+            pointerType: event.pointerType,
+            requestedPosition,
+            target: describeEventTarget(event.target),
+        });
+        queueEditorFocusAtPosition(requestedPosition);
+    };
+    const focusEditorBackgroundOnPointerUp = (event) => {
+        const pendingContentFocus = pendingContentFocusRef.current;
+        if (readOnly) {
+            pendingContentFocusRef.current = null;
+            shouldFocusAfterPointerRef.current = false;
+            return;
+        }
+        if (pendingContentFocus &&
+            pendingContentFocus.pointerId === event.pointerId) {
+            pendingContentFocusRef.current = null;
+            const moved = Math.hypot(event.clientX - pendingContentFocus.x, event.clientY - pendingContentFocus.y);
+            emitDebugEvent("content-pointer-focus-resolve", {
+                moved,
+                pointerType: event.pointerType,
+            });
+            if (moved < 4 && !editor.isFocused) {
+                editor.view.focus();
+            }
+            return;
+        }
+        if (!shouldFocusAfterPointerRef.current) {
+            return;
+        }
+        event.preventDefault();
+        shouldFocusAfterPointerRef.current = false;
+        emitDebugEvent("hitbox-pointer-up", {
+            defaultPrevented: event.defaultPrevented,
+            pointerType: event.pointerType,
+            target: describeEventTarget(event.target),
+        });
+        queueEditorFocusAtPosition(getEditorPositionAtClientPoint(event.clientX, event.clientY, event.target));
+    };
+    return (_jsx("div", { className: "hsk-editor-shell", children: _jsxs("div", { ref: editorSurfaceRef, className: "hsk-editor-surface", onPointerDownCapture: focusEditorBackgroundOnPointerDown, onPointerUpCapture: focusEditorBackgroundOnPointerUp, children: [_jsx(MarkdownBubbleMenu, { editor: editor }), _jsx(EditorContent, { editor: editor })] }) }));
+};

package/dist/markdown/editorDebug.d.ts

@@ -0,0 +1,5 @@
+export type MdKitEditorDebugEvent = {
+    detail: Record<string, unknown>;
+    timestamp: number;
+    type: string;
+};

package/dist/markdown/editorDebug.js

@@ -0,0 +1 @@
+export {};

package/dist/markdown/markdownFenceRanges.d.ts

@@ -0,0 +1,6 @@
+export type MarkdownFenceRange = {
+    end: number;
+    start: number;
+};
+export declare const getMarkdownFenceRanges: (markdown: string) => MarkdownFenceRange[];
+export declare const isInsideMarkdownFence: (index: number, ranges: MarkdownFenceRange[]) => boolean;

package/dist/markdown/markdownFenceRanges.js

@@ -0,0 +1,41 @@
+const fenceStartPattern = /^ {0,3}(`{3,}|~{3,})/;
+export const getMarkdownFenceRanges = (markdown) => {
+    const ranges = [];
+    let activeFence = null;
+    let lineStart = 0;
+    while (lineStart < markdown.length) {
+        const newlineIndex = markdown.indexOf("\n", lineStart);
+        const lineEnd = newlineIndex === -1 ? markdown.length : newlineIndex;
+        const nextLineStart = newlineIndex === -1 ? markdown.length : newlineIndex + 1;
+        const line = markdown.slice(lineStart, lineEnd);
+        const fenceMatch = line.match(fenceStartPattern);
+        if (fenceMatch) {
+            const marker = fenceMatch[1] ?? "";
+            const markerChar = marker[0];
+            if (!activeFence) {
+                activeFence = {
+                    char: markerChar,
+                    length: marker.length,
+                    start: lineStart,
+                };
+            }
+            else if (markerChar === activeFence.char &&
+                marker.length >= activeFence.length) {
+                ranges.push({
+                    start: activeFence.start,
+                    end: nextLineStart,
+                });
+                activeFence = null;
+            }
+        }
+        lineStart = nextLineStart;
+    }
+    if (activeFence) {
+        ranges.push({
+            start: activeFence.start,
+            end: markdown.length,
+        });
+    }
+    return ranges;
+};
+export const isInsideMarkdownFence = (index, ranges) => ranges.some((range) => index >= range.start && index < range.end - 1);

package/dist/markdown/normalizeMarkdownSerialization.d.ts

@@ -0,0 +1 @@
+export declare const normalizeMarkdownSerialization: (markdown: string) => string;