@mp-lb/mdkit 0.3.1 → 0.3.3

package/src/markdown/MarkdownBubbleMenu.tsx

@@ -0,0 +1,271 @@
+import type { MouseEvent, PointerEvent, ReactNode } from "react";
+import { useEditorState, type Editor } from "@tiptap/react";
+import { BubbleMenu, type BubbleMenuProps } from "@tiptap/react/menus";
+import {
+  Bold,
+  Code2,
+  Heading1,
+  Heading2,
+  Heading3,
+  Italic,
+  Link2,
+  List,
+  ListOrdered,
+  Quote,
+  Strikethrough,
+} from "lucide-react";
+import { joinClassNames } from "../ui/joinClassNames";
+
+type MarkdownBubbleMenuProps = {
+  editor: Editor;
+};
+
+type BubbleMenuShouldShowProps = Parameters<
+  NonNullable<BubbleMenuProps["shouldShow"]>
+>[0];
+
+type ToolbarActiveState = {
+  blockquote: boolean;
+  bold: boolean;
+  bulletList: boolean;
+  codeBlock: boolean;
+  heading1: boolean;
+  heading2: boolean;
+  heading3: boolean;
+  italic: boolean;
+  link: boolean;
+  orderedList: boolean;
+  strike: boolean;
+};
+
+const toolbarActiveStateIsEqual = (
+  left: ToolbarActiveState,
+  right: ToolbarActiveState | null,
+) => {
+  if (!right) {
+    return false;
+  }
+
+  return (
+    left.blockquote === right.blockquote &&
+    left.bold === right.bold &&
+    left.bulletList === right.bulletList &&
+    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 &&
+    left.strike === right.strike
+  );
+};
+
+const useToolbarActiveState = (editor: Editor) =>
+  useEditorState({
+    editor,
+    selector: ({ editor: currentEditor }) => ({
+      blockquote: currentEditor.isActive("blockquote"),
+      bold: currentEditor.isActive("bold"),
+      bulletList: currentEditor.isActive("bulletList"),
+      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"),
+      strike: currentEditor.isActive("strike"),
+    }),
+    equalityFn: toolbarActiveStateIsEqual,
+  });
+
+export const shouldShowMarkdownBubbleMenu = ({
+  editor,
+  element,
+  from,
+  state,
+  to,
+  view,
+}: BubbleMenuShouldShowProps) => {
+  const editorHasFocus =
+    view.hasFocus() || element.contains(document.activeElement);
+
+  const selectedText = state.doc.textBetween(from, to);
+
+  return (
+    editor.isEditable &&
+    editorHasFocus &&
+    !state.selection.empty &&
+    selectedText.length > 0
+  );
+};
+
+const setLink = (editor: Editor) => {
+  const previousUrl = editor.getAttributes("link").href;
+  const nextUrl = window.prompt("URL", previousUrl);
+
+  if (nextUrl === null) {
+    return;
+  }
+
+  if (nextUrl === "") {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    return;
+  }
+
+  editor
+    .chain()
+    .focus()
+    .extendMarkRange("link")
+    .setLink({ href: nextUrl })
+    .run();
+};
+
+const ToolbarButton = ({
+  ariaLabel,
+  children,
+  isActive,
+  onAction,
+}: {
+  ariaLabel: string;
+  children: ReactNode;
+  isActive: boolean;
+  onAction: () => void;
+}) => {
+  const runPointerAction = (event: PointerEvent<HTMLButtonElement>) => {
+    if (event.pointerType === "mouse" && event.button !== 0) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    onAction();
+  };
+
+  const runKeyboardAction = (event: MouseEvent<HTMLButtonElement>) => {
+    if (event.detail !== 0) {
+      return;
+    }
+
+    onAction();
+  };
+
+  return (
+    <button
+      type="button"
+      className={joinClassNames(
+        "mp-lb-mdkit-toolbar-button",
+        isActive && "mp-lb-mdkit-toolbar-button-active",
+      )}
+      aria-label={ariaLabel}
+      aria-pressed={isActive}
+      onClick={runKeyboardAction}
+      onPointerDown={runPointerAction}
+    >
+      {children}
+    </button>
+  );
+};
+
+export const MarkdownBubbleMenu = ({ editor }: MarkdownBubbleMenuProps) => {
+  const activeState = useToolbarActiveState(editor);
+
+  return (
+    <BubbleMenu
+      className="mp-lb-mdkit-toolbar"
+      editor={editor}
+      options={{
+        placement: "top",
+      }}
+      shouldShow={shouldShowMarkdownBubbleMenu}
+    >
+      <ToolbarButton
+        ariaLabel="Bold"
+        isActive={activeState.bold}
+        onAction={() => editor.chain().focus().toggleBold().run()}
+      >
+        <Bold />
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Italic"
+        isActive={activeState.italic}
+        onAction={() => editor.chain().focus().toggleItalic().run()}
+      >
+        <Italic />
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Strikethrough"
+        isActive={activeState.strike}
+        onAction={() => editor.chain().focus().toggleStrike().run()}
+      >
+        <Strikethrough />
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Code block"
+        isActive={activeState.codeBlock}
+        onAction={() => editor.chain().focus().toggleCodeBlock().run()}
+      >
+        <Code2 />
+      </ToolbarButton>
+      <div className="mp-lb-mdkit-toolbar-divider" />
+      <ToolbarButton
+        ariaLabel="Heading 1"
+        isActive={activeState.heading1}
+        onAction={() =>
+          editor.chain().focus().toggleHeading({ level: 1 }).run()
+        }
+      >
+        <Heading1 />
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Heading 2"
+        isActive={activeState.heading2}
+        onAction={() =>
+          editor.chain().focus().toggleHeading({ level: 2 }).run()
+        }
+      >
+        <Heading2 />
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Heading 3"
+        isActive={activeState.heading3}
+        onAction={() =>
+          editor.chain().focus().toggleHeading({ level: 3 }).run()
+        }
+      >
+        <Heading3 />
+      </ToolbarButton>
+      <div className="mp-lb-mdkit-toolbar-divider" />
+      <ToolbarButton
+        ariaLabel="Bullet list"
+        isActive={activeState.bulletList}
+        onAction={() => editor.chain().focus().toggleBulletList().run()}
+      >
+        <List />
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Ordered list"
+        isActive={activeState.orderedList}
+        onAction={() => editor.chain().focus().toggleOrderedList().run()}
+      >
+        <ListOrdered />
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Blockquote"
+        isActive={activeState.blockquote}
+        onAction={() => editor.chain().focus().toggleBlockquote().run()}
+      >
+        <Quote />
+      </ToolbarButton>
+      <div className="mp-lb-mdkit-toolbar-divider" />
+      <ToolbarButton
+        ariaLabel="Link"
+        isActive={activeState.link}
+        onAction={() => setLink(editor)}
+      >
+        <Link2 />
+      </ToolbarButton>
+    </BubbleMenu>
+  );
+};

package/src/markdown/MarkdownPasteExtension.ts

@@ -0,0 +1,81 @@
+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: ClipboardEvent,
+  mimeType: string,
+): string => {
+  try {
+    return event.clipboardData?.getData(mimeType) ?? "";
+  } catch {
+    return "";
+  }
+};
+
+export const shouldPastePlainTextAsMarkdown = (text: string) => {
+  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/src/markdown/MarkdownSearchExtension.ts

@@ -0,0 +1,77 @@
+import { Extension } from "@tiptap/core";
+import type { Node } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+
+export type MarkdownSearchMatch = {
+  from: number;
+  to: number;
+};
+
+type MarkdownSearchMeta = {
+  activeIndex: number;
+  matches: MarkdownSearchMatch[];
+};
+
+export const markdownSearchPluginKey = new PluginKey<DecorationSet>(
+  "mdkitMarkdownSearch",
+);
+
+const createSearchDecorations = (
+  document: Node,
+  { activeIndex, matches }: MarkdownSearchMeta,
+) =>
+  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<DecorationSet>({
+        key: markdownSearchPluginKey,
+        props: {
+          decorations(state) {
+            return markdownSearchPluginKey.getState(state);
+          },
+        },
+        state: {
+          apply(transaction, previousDecorations) {
+            const searchMeta = transaction.getMeta(markdownSearchPluginKey) as
+              | MarkdownSearchMeta
+              | undefined;
+
+            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/src/markdown/MarkdownSearchPanel.tsx

@@ -0,0 +1,98 @@
+import { ChevronDown, ChevronUp, Search, X } from "lucide-react";
+import type { FormEvent, KeyboardEvent, 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 const MarkdownSearchPanel = ({
+  activeMatchNumber,
+  inputRef,
+  matchCount,
+  onClose,
+  onPrevious,
+  onNext,
+  onQueryChange,
+  query,
+}: MarkdownSearchPanelProps) => {
+  const submitSearch = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    onNext();
+  };
+
+  const handleSearchKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    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 (
+    <form
+      aria-label="Search document"
+      className="mp-lb-mdkit-search-panel"
+      onSubmit={submitSearch}
+    >
+      <Search aria-hidden="true" className="mp-lb-mdkit-search-icon" />
+      <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}
+      />
+      <span className="mp-lb-mdkit-search-status">{matchStatus}</span>
+      <button
+        aria-label="Previous match"
+        className="mp-lb-mdkit-search-button"
+        disabled={matchCount === 0}
+        onClick={onPrevious}
+        title="Previous match"
+        type="button"
+      >
+        <ChevronUp aria-hidden="true" />
+      </button>
+      <button
+        aria-label="Next match"
+        className="mp-lb-mdkit-search-button"
+        disabled={matchCount === 0}
+        title="Next match"
+        type="submit"
+      >
+        <ChevronDown aria-hidden="true" />
+      </button>
+      <button
+        aria-label="Close search"
+        className="mp-lb-mdkit-search-button"
+        onClick={onClose}
+        title="Close search"
+        type="button"
+      >
+        <X aria-hidden="true" />
+      </button>
+    </form>
+  );
+};

package/src/markdown/MdKitEditor.tsx

@@ -0,0 +1,75 @@
+import type { CSSProperties } from "react";
+import type { MdKitCollaborationSession } from "../document/documentTypes";
+import { joinClassNames } from "../ui/joinClassNames";
+import type { MdKitEditorDebugEvent } from "./editorDebug";
+import { TiptapMarkdownSurface } from "./TiptapMarkdownSurface";
+
+type MdKitEditorBaseProps = {
+  className?: string;
+  documentMargins?: boolean;
+  fillHeight?: boolean;
+  fixedWidth?: boolean;
+  ignoreYamlFrontMatter?: boolean;
+  instanceKey?: string | number;
+  onDebugEvent?: (event: MdKitEditorDebugEvent) => void;
+  onFocusChange?: (focused: boolean) => void;
+  readOnly?: boolean;
+  search?: 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;
+
+/**
+ * Markdown-first rich text editor. Behaves like a controlled textarea in local
+ * mode and switches to a Yjs-backed engine when given a collaboration session.
+ *
+ * @remarks
+ * In collaborative mode the Yjs document is the content source; external
+ * `value` changes are not applied into the shared document.
+ */
+export const MdKitEditor = (props: MdKitEditorProps) => {
+  const {
+    className,
+    documentMargins = false,
+    fillHeight = false,
+    fixedWidth = false,
+    readOnly = false,
+    style,
+    ...surfaceProps
+  } = props;
+
+  return (
+    <div
+      className={joinClassNames(
+        "mp-lb-mdkit-markdown-editor",
+        documentMargins && "mp-lb-mdkit-markdown-editor-document-margins",
+        fillHeight && "mp-lb-mdkit-markdown-editor-fill-height",
+        fixedWidth && "mp-lb-mdkit-markdown-editor-fixed-width",
+        className,
+      )}
+      data-read-only={readOnly ? "true" : undefined}
+      style={style}
+    >
+      <TiptapMarkdownSurface
+        key={props.instanceKey}
+        readOnly={readOnly}
+        {...surfaceProps}
+      />
+    </div>
+  );
+};

package/src/markdown/MdKitView.tsx

@@ -0,0 +1,80 @@
+import type { CSSProperties } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { joinClassNames } from "../ui/joinClassNames";
+import { removeYamlFrontMatter } from "./yamlFrontMatter";
+
+export type MdKitViewProps = {
+  className?: string;
+  documentMargins?: boolean;
+  fillHeight?: boolean;
+  fixedWidth?: boolean;
+  ignoreYamlFrontMatter?: boolean;
+  placeholder?: string;
+  style?: CSSProperties;
+  value: string;
+};
+
+/**
+ * Read-only markdown surface that mirrors {@link MdKitEditor}'s styling and
+ * sizing contract without mounting the editor runtime. Use it for previews and
+ * restored checkpoints.
+ */
+export const MdKitView = ({
+  className,
+  documentMargins = false,
+  fillHeight = false,
+  fixedWidth = false,
+  ignoreYamlFrontMatter = false,
+  placeholder,
+  style,
+  value,
+}: MdKitViewProps) => {
+  const markdownValue = ignoreYamlFrontMatter
+    ? removeYamlFrontMatter(value)
+    : value;
+  const renderedValue =
+    markdownValue.trim().length > 0 ? markdownValue : (placeholder ?? "");
+
+  return (
+    <div
+      className={joinClassNames(
+        "mp-lb-mdkit-markdown-editor",
+        "mp-lb-mdkit-markdown-view",
+        documentMargins && "mp-lb-mdkit-markdown-editor-document-margins",
+        fillHeight && "mp-lb-mdkit-markdown-editor-fill-height",
+        fixedWidth && "mp-lb-mdkit-markdown-editor-fixed-width",
+        className,
+      )}
+      data-read-only="true"
+      style={style}
+    >
+      <div className="mp-lb-mdkit-editor-shell">
+        <div className="mp-lb-mdkit-editor-surface">
+          {renderedValue.length > 0 ? (
+            <div className="mp-lb-mdkit-tiptap mp-lb-mdkit-view-content">
+              <ReactMarkdown
+                components={{
+                  a: ({ children, ...linkProps }) => (
+                    <a
+                      {...linkProps}
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      {children}
+                    </a>
+                  ),
+                }}
+                remarkPlugins={[remarkGfm]}
+              >
+                {renderedValue}
+              </ReactMarkdown>
+            </div>
+          ) : (
+            <div className="mp-lb-mdkit-editor-empty" />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};