@meowdown/react 0.28.0 → 0.29.0

package/dist/index.d.ts

@@ -11,8 +11,7 @@ type TimeFormat = '12' | '24';
 type SelectionHint = SelectionJSON$1 | 'start' | 'end';
 /**
  * The current Markdown and selection. Selection positions are in the mounted
- * editor's coordinate space: ProseMirror positions in the rich modes,
- * character offsets in source mode. Not portable across a mode switch.
+ * editor's coordinate space and are not portable across editors.
  */
 type EditorStateSnapshot = [markdown: string, selection: SelectionJSON$1];
 interface EditorHandle {
@@ -40,7 +39,10 @@ interface EditorHandle {
   focus: () => void;
   /** Scrolls the selection into view. */
   scrollIntoView: () => void;
-  /** Escape hatch: the underlying ProseKit editor, or `undefined` in source mode. */
+  /**
+   * Escape hatch: the underlying ProseKit editor, or `undefined` when the
+   * handle does not wrap one.
+   */
   readonly editor: TypedEditor | undefined;
 }
 /**
@@ -80,13 +82,11 @@ interface WikilinkItem {
 type WikilinkSearchHandler = (query: string) => WikilinkItem[] | Promise<WikilinkItem[]>;
 //#endregion
 //#region src/components/editor.d.ts
-type EditorMode = MarkMode | 'source';
+type EditorMode = MarkMode;
 interface EditorProps {
   /**
-   * The editor mode. The three rich modes ('focus', 'show', 'hide') render a ProseKit
-   * editor; 'source' renders a CodeMirror editor showing the raw Markdown text.
-   * Content carries over when switching between the two editor families, but undo
-   * history and selection do not. Defaults to 'focus'.
+   * The editor mode ('focus', 'show', 'hide'), controlling how much Markdown
+   * syntax stays in view. Defaults to 'focus'.
    */
   mode?: EditorMode;
   /**
@@ -101,42 +101,37 @@ interface EditorProps {
   onDocChange?: VoidFunction;
   /**
    * Searches tags for the tag menu, which opens when typing `#` followed by
-   * text in a rich mode. Receives the query (lowercased, punctuation
-   * stripped) and returns the tags to show, synchronously or as a promise.
-   * Pass a stable function (e.g. from `useCallback`). Omit to disable the
-   * tag menu. Ignored in source mode.
+   * text. Receives the query (lowercased, punctuation stripped) and returns the
+   * tags to show, synchronously or as a promise. Pass a stable function (e.g.
+   * from `useCallback`). Omit to disable the tag menu.
    */
   onTagSearch?: TagSearchHandler;
   /**
    * Searches notes for the wikilink menu, which opens as soon as `[[` or `@`
-   * is typed in a rich mode. Receives the query (lowercased, punctuation
-   * stripped, may be empty) and returns the note names to show,
-   * synchronously or as a promise. Pass a stable function (e.g. from
-   * `useCallback`). Omit to disable the wikilink menu. Ignored in source
-   * mode.
+   * is typed. Receives the query (lowercased, punctuation stripped, may be
+   * empty) and returns the note names to show, synchronously or as a promise.
+   * Pass a stable function (e.g. from `useCallback`). Omit to disable the
+   * wikilink menu.
    */
   onWikilinkSearch?: WikilinkSearchHandler;
   /**
    * Called with the link target on click of a rendered wiki link. Pass a stable
-   * function (e.g. from `useCallback`). Ignored in source mode.
+   * function (e.g. from `useCallback`).
    */
   onWikilinkClick?: WikilinkClickHandler;
   /**
    * Called with the link `href` on click of a rendered Markdown link
-   * (`[text](url)`). Pass a stable function (e.g. from `useCallback`). Ignored
-   * in source mode.
+   * (`[text](url)`). Pass a stable function (e.g. from `useCallback`).
    */
   onLinkClick?: LinkClickHandler;
   /**
    * Called after a link is copied from the link menu, with its `href`. Useful
-   * for a toast. Pass a stable function (e.g. from `useCallback`). Ignored in
-   * source mode.
+   * for a toast. Pass a stable function (e.g. from `useCallback`).
    */
   onLinkCopy?: LinkCopyHandler;
   /**
    * Called with the tag name (without the leading `#`) on click of a rendered
-   * `#tag`. Pass a stable function (e.g. from `useCallback`). Ignored in source
-   * mode.
+   * `#tag`. Pass a stable function (e.g. from `useCallback`).
    */
   onTagClick?: TagClickHandler;
   /**
@@ -146,73 +141,73 @@ interface EditorProps {
    * Use it to move focus to a previous/next note or page. Receives the
    * `direction` and the original `KeyboardEvent`. Return `false` to let the
    * editor handle the key normally; any other return value consumes it. Pass a
-   * stable function (e.g. from `useCallback`). Ignored in source mode.
+   * stable function (e.g. from `useCallback`).
    */
   onExitBoundary?: ExitBoundaryHandler;
   /**
    * Maps an image `src` to a displayable URL, or `undefined` to skip that image.
    * Defaults to showing http(s) URLs as-is. Pass a stable function (e.g. from
-   * `useCallback`). Ignored in source mode.
+   * `useCallback`).
    */
   resolveImageUrl?: ImageOptions['resolveImageUrl'];
   /**
    * Persists a pasted/dropped image file and returns its markdown `src`. Pass a
-   * stable function. Ignored in source mode.
+   * stable function.
    */
   onImagePaste?: ImageOptions['onImagePaste'];
-  /** Called when persisting a pasted/dropped image throws. Ignored in source mode. */
+  /** Called when persisting a pasted/dropped image throws. */
   onImageSaveError?: ImageOptions['onImageSaveError'];
   /**
    * Called when the user clicks a rendered image, with its markdown `src`,
    * `alt`, and the originating `MouseEvent`. Pass a stable function (e.g. from
-   * `useCallback`). Ignored in source mode.
+   * `useCallback`).
    */
   onImageClick?: ImageClickHandler;
   /**
    * Auto-embeds a pasted tweet or YouTube link as a rich embed; one undo turns
-   * the embed back into the raw link. On by default. Ignored in source mode.
+   * the embed back into the raw link. On by default.
    */
   embedPaste?: boolean;
   /**
    * Pressing Enter at the end of the document's first heading (the title line)
    * starts a fresh empty bullet on the next line instead of a plain paragraph.
-   * Off by default. Ignored in source mode.
+   * Off by default.
    */
   bulletAfterHeading?: boolean;
-  /** Handles a leading `---` frontmatter block in the rich modes (off by default, ignored in source mode). */
+  /** Handles a leading `---` frontmatter block (off by default). */
   frontmatter?: boolean;
   /**
-   * Shows the per-block gutter handle in the rich modes: a drag grip for
-   * reordering blocks and a "+" add button, plus the drop indicator that
-   * visualizes where a dragged block will land. On by default. Set to `false`
-   * to hide the gutter affordance entirely, e.g. when the host does not want
-   * block reordering. Ignored in source mode and when `readOnly` is set.
+   * Shows the per-block gutter handle: a drag grip for reordering blocks and a
+   * "+" add button, plus the drop indicator that visualizes where a dragged
+   * block will land. On by default. Set to `false` to hide the gutter
+   * affordance entirely, e.g. when the host does not want block reordering.
+   * Ignored when `readOnly` is set.
    */
   blockHandle?: boolean;
   /**
    * Placeholder text shown when the whole document is empty. A function
-   * receives the editor state. Pass a stable function. Ignored in source mode.
+   * receives the editor state. Pass a stable function.
    */
   placeholder?: PlaceholderOptions['placeholder'];
-  /** Makes the editor read-only, in both the rich and source modes. */
+  /** Makes the editor read-only. */
   readOnly?: boolean;
   /**
-   * Enables the browser's native spell checking in the rich modes. Defaults
-   * to the browser's behavior. Ignored in source mode.
+   * Enables the browser's native spell checking. Defaults to the browser's
+   * behavior.
    */
   spellCheck?: boolean;
   /**
    * Clock format the `/now` slash command inserts: '12' for "3:45pm" or '24'
-   * for "15:45". Defaults to '12'. Ignored in source mode.
+   * for "15:45". Defaults to '12'.
    */
   timeFormat?: TimeFormat;
-  /** Class on the editable root (the contenteditable). Rich modes only. */
+  /** Class on the editable root (the contenteditable). */
   editorClassName?: string;
   /** Class on the outer `.meowdown` wrapper div. */
   wrapperClassName?: string;
   /** Imperative handle for the editor. */
   handleRef?: Ref<EditorHandle>;
-  /** Nodes rendered inside the editor's ProseKit context (rich modes only). */
+  /** Nodes rendered inside the editor's ProseKit context. */
   children?: ReactNode;
 }
 declare function MeowdownEditor({

package/dist/index.js

@@ -1,18 +1,13 @@
 import { clsx } from "clsx/lite";
-import { Fragment, createElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
-import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
-import { defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
-import { Compartment, EditorSelection, EditorState } from "@codemirror/state";
-import { EditorView, keymap } from "@codemirror/view";
+import { Fragment, createElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { codeBlockLanguages, defaultResolveImageUrl, defineBulletAfterHeading, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineHTMLPaste, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkEditKeymap, defineLinkHoverHandler, defineMarkMode, defineMarkdownCopy, definePlaceholder, defineReadonly, defineTagClickHandler, defineWikilinkClickHandler, defineWikilinkTrigger, docToMarkdown, getCodeTokens, getMarkBuilders, getVirtualElementFromRange, inlineTextToMarkChunks, isSelectionInTableCell, listenForTweetHeight, markdownToDoc, matchEmbed } from "@meowdown/core";
 import { clamp } from "@ocavue/utils";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { codeBlockLanguages, defaultResolveImageUrl, defineBulletAfterHeading, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineHTMLPaste, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkEditKeymap, defineLinkHoverHandler, defineMarkMode, defineMarkdownCopy, definePlaceholder, defineReadonly, defineTagClickHandler, defineWikilinkClickHandler, defineWikilinkTrigger, docToMarkdown, getCodeTokens, getMarkBuilders, getVirtualElementFromRange, inlineTextToMarkChunks, listenForTweetHeight, markdownToDoc, matchEmbed } from "@meowdown/core";
 import { canUseRegexLookbehind, createEditor, defineDocChangeHandler, union } from "@prosekit/core";
 import { Selection, TextSelection } from "@prosekit/pm/state";
 import { ProseKit, defineReactNodeView, useEditor, useEditor as useEditor$1, useEditorDerivedValue, useExtension, useExtension as useExtension$1, useKeymap } from "@prosekit/react";
 import { Combobox } from "@base-ui/react/combobox";
 import { CheckIcon, ChevronsUpDownIcon, CopyIcon, GripHorizontalIcon, GripVerticalIcon, PencilIcon, UnlinkIcon } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { BlockHandleDraggable, BlockHandlePopup, BlockHandlePositioner, BlockHandleRoot } from "@prosekit/react/block-handle";
 import { DropIndicator } from "@prosekit/react/drop-indicator";
 import { Popover } from "@base-ui/react/popover";
@@ -21,122 +16,6 @@ import { MenuItem, MenuPopup, MenuPositioner } from "@prosekit/react/menu";
 import { TableHandleColumnMenuRoot, TableHandleColumnMenuTrigger, TableHandleColumnPopup, TableHandleColumnPositioner, TableHandleDragPreview, TableHandleDropIndicator, TableHandleRoot, TableHandleRowMenuRoot, TableHandleRowMenuTrigger, TableHandleRowPopup, TableHandleRowPositioner } from "@prosekit/react/table-handle";
 import { Mark } from "@prosekit/pm/model";
 
-//#region src/components/codemirror-editor.tsx
-function resolveSelection$1(selection, docLength) {
-	if (selection === "start") return EditorSelection.single(0);
-	if (selection === "end") return EditorSelection.single(docLength);
-	return EditorSelection.single(clamp(selection.anchor, 0, docLength), clamp(selection.head, 0, docLength));
-}
-function CodeMirrorEditor({ initialMarkdown, onDocChange, readOnly, ref }) {
-	const containerRef = useRef(null);
-	const viewRef = useRef(null);
-	const readOnlyCompartmentRef = useRef(new Compartment());
-	const suppressDocChangeRef = useRef(false);
-	const onDocChangeRef = useRef(onDocChange);
-	useLayoutEffect(() => {
-		onDocChangeRef.current = onDocChange;
-	}, [onDocChange]);
-	const initialMarkdownRef = useRef(initialMarkdown ?? "");
-	const initialReadOnlyRef = useRef(readOnly ?? false);
-	useImperativeHandle(ref, () => {
-		function getMarkdown() {
-			return viewRef.current?.state.doc.toString() ?? initialMarkdownRef.current;
-		}
-		function getSelection() {
-			const main = viewRef.current?.state.selection.main;
-			return {
-				type: "text",
-				anchor: main?.anchor ?? 0,
-				head: main?.head ?? 0
-			};
-		}
-		function getState() {
-			return [getMarkdown(), getSelection()];
-		}
-		function setState(markdown, selection) {
-			const view = viewRef.current;
-			if (!view) {
-				if (markdown != null) initialMarkdownRef.current = markdown;
-				return;
-			}
-			if (markdown == null && !selection) return;
-			const docLength = markdown == null ? view.state.doc.length : markdown.length;
-			suppressDocChangeRef.current = true;
-			try {
-				view.dispatch({
-					changes: markdown == null ? void 0 : {
-						from: 0,
-						to: view.state.doc.length,
-						insert: markdown
-					},
-					selection: selection ? resolveSelection$1(selection, docLength) : void 0,
-					scrollIntoView: true
-				});
-			} finally {
-				suppressDocChangeRef.current = false;
-			}
-		}
-		function setMarkdown(markdown) {
-			setState(markdown);
-		}
-		function setSelection(selection) {
-			setState(void 0, selection);
-		}
-		function focus() {
-			viewRef.current?.focus();
-		}
-		function scrollIntoView() {
-			viewRef.current?.dispatch({ scrollIntoView: true });
-		}
-		return {
-			getMarkdown,
-			setMarkdown,
-			getState,
-			setState,
-			getSelection,
-			setSelection,
-			focus,
-			scrollIntoView,
-			editor: void 0
-		};
-	}, []);
-	useLayoutEffect(() => {
-		const container = containerRef.current;
-		if (!container) return;
-		const view = new EditorView({
-			parent: container,
-			state: EditorState.create({
-				doc: initialMarkdownRef.current,
-				extensions: [
-					history(),
-					keymap.of([...defaultKeymap, ...historyKeymap]),
-					markdown({ base: markdownLanguage }),
-					syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-					EditorView.lineWrapping,
-					readOnlyCompartmentRef.current.of(EditorState.readOnly.of(initialReadOnlyRef.current)),
-					EditorView.updateListener.of((update) => {
-						if (!update.docChanged || suppressDocChangeRef.current) return;
-						onDocChangeRef.current?.();
-					})
-				]
-			})
-		});
-		viewRef.current = view;
-		return () => {
-			view.destroy();
-			viewRef.current = null;
-		};
-	}, []);
-	useLayoutEffect(() => {
-		viewRef.current?.dispatch({ effects: readOnlyCompartmentRef.current.reconfigure(EditorState.readOnly.of(readOnly ?? false)) });
-	}, [readOnly]);
-	return /* @__PURE__ */ jsx("div", {
-		ref: containerRef,
-		"data-editor": "codemirror"
-	});
-}
-
-//#endregion
 //#region src/components/code-block-view.module.css
 var code_block_view_module_default = {
 	"CopyButton": "meow_CopyButton_D3j_9q",
@@ -693,8 +572,12 @@ function SlashMenuItem({ label, kbd, onSelect }) {
 		children: [/* @__PURE__ */ jsx("span", { children: label }), kbd && /* @__PURE__ */ jsx("kbd", { children: kbd })]
 	});
 }
+function selectionInTableCell(editor) {
+	return isSelectionInTableCell(editor.state);
+}
 function SlashMenu({ timeFormat = "12" }) {
 	const editor = useEditor$1();
+	const inTableCell = useEditorDerivedValue(selectionInTableCell);
 	return /* @__PURE__ */ jsx(AutocompleteRoot, {
 		regex: regex$2,
 		children: /* @__PURE__ */ jsx(AutocompletePositioner, {
@@ -703,64 +586,66 @@ function SlashMenu({ timeFormat = "12" }) {
 				className: autocomplete_menu_module_default.Popup,
 				"data-testid": "slash-menu",
 				children: [
-					/* @__PURE__ */ jsx(SlashMenuItem, {
-						label: "Heading 1",
-						kbd: "#",
-						onSelect: () => editor.commands.setHeading({ level: 1 })
-					}),
-					/* @__PURE__ */ jsx(SlashMenuItem, {
-						label: "Heading 2",
-						kbd: "##",
-						onSelect: () => editor.commands.setHeading({ level: 2 })
-					}),
-					/* @__PURE__ */ jsx(SlashMenuItem, {
-						label: "Heading 3",
-						kbd: "###",
-						onSelect: () => editor.commands.setHeading({ level: 3 })
-					}),
-					/* @__PURE__ */ jsx(SlashMenuItem, {
-						label: "Heading 4",
-						kbd: "####",
-						onSelect: () => editor.commands.setHeading({ level: 4 })
-					}),
-					/* @__PURE__ */ jsx(SlashMenuItem, {
-						label: "Blockquote",
-						kbd: ">",
-						onSelect: () => editor.commands.setBlockquote()
-					}),
-					/* @__PURE__ */ jsx(SlashMenuItem, {
-						label: "Bullet list",
-						kbd: "-",
-						onSelect: () => editor.commands.wrapInList({ kind: "bullet" })
-					}),
-					/* @__PURE__ */ jsx(SlashMenuItem, {
-						label: "Ordered list",
-						kbd: "1.",
-						onSelect: () => editor.commands.wrapInList({ kind: "ordered" })
-					}),
-					/* @__PURE__ */ jsx(SlashMenuItem, {
-						label: "Task list",
-						kbd: "+ [ ] ",
-						onSelect: () => editor.commands.wrapInCircleTask()
-					}),
-					/* @__PURE__ */ jsx(SlashMenuItem, {
-						label: "Checkbox list",
-						kbd: "- [ ] ",
-						onSelect: () => editor.commands.wrapInSquareTask()
-					}),
-					/* @__PURE__ */ jsx(SlashMenuItem, {
-						label: "Code block",
-						kbd: "```",
-						onSelect: () => editor.commands.setCodeBlock()
-					}),
-					/* @__PURE__ */ jsx(SlashMenuItem, {
-						label: "Table",
-						onSelect: () => editor.commands.insertTable({
-							row: 3,
-							col: 3,
-							header: true
+					!inTableCell && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsx(SlashMenuItem, {
+							label: "Heading 1",
+							kbd: "#",
+							onSelect: () => editor.commands.setHeading({ level: 1 })
+						}),
+						/* @__PURE__ */ jsx(SlashMenuItem, {
+							label: "Heading 2",
+							kbd: "##",
+							onSelect: () => editor.commands.setHeading({ level: 2 })
+						}),
+						/* @__PURE__ */ jsx(SlashMenuItem, {
+							label: "Heading 3",
+							kbd: "###",
+							onSelect: () => editor.commands.setHeading({ level: 3 })
+						}),
+						/* @__PURE__ */ jsx(SlashMenuItem, {
+							label: "Heading 4",
+							kbd: "####",
+							onSelect: () => editor.commands.setHeading({ level: 4 })
+						}),
+						/* @__PURE__ */ jsx(SlashMenuItem, {
+							label: "Blockquote",
+							kbd: ">",
+							onSelect: () => editor.commands.setBlockquote()
+						}),
+						/* @__PURE__ */ jsx(SlashMenuItem, {
+							label: "Bullet list",
+							kbd: "-",
+							onSelect: () => editor.commands.wrapInList({ kind: "bullet" })
+						}),
+						/* @__PURE__ */ jsx(SlashMenuItem, {
+							label: "Ordered list",
+							kbd: "1.",
+							onSelect: () => editor.commands.wrapInList({ kind: "ordered" })
+						}),
+						/* @__PURE__ */ jsx(SlashMenuItem, {
+							label: "Task list",
+							kbd: "+ [ ] ",
+							onSelect: () => editor.commands.wrapInCircleTask()
+						}),
+						/* @__PURE__ */ jsx(SlashMenuItem, {
+							label: "Checkbox list",
+							kbd: "- [ ] ",
+							onSelect: () => editor.commands.wrapInSquareTask()
+						}),
+						/* @__PURE__ */ jsx(SlashMenuItem, {
+							label: "Code block",
+							kbd: "```",
+							onSelect: () => editor.commands.setCodeBlock()
+						}),
+						/* @__PURE__ */ jsx(SlashMenuItem, {
+							label: "Table",
+							onSelect: () => editor.commands.insertTable({
+								row: 3,
+								col: 3,
+								header: true
+							})
 						})
-					}),
+					] }),
 					/* @__PURE__ */ jsx(SlashMenuItem, {
 						label: "Now",
 						onSelect: () => editor.commands.insertText({ text: formatNowTime(timeFormat) })
@@ -1241,18 +1126,12 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onTagSea
 			}
 		};
 	}, []);
-	const seedMarkdown = childRef.current?.getMarkdown() ?? initialMarkdown ?? "";
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx("meowdown", wrapperClassName),
-		children: mode === "source" ? /* @__PURE__ */ jsx(CodeMirrorEditor, {
-			ref: childRef,
-			initialMarkdown: seedMarkdown,
-			onDocChange,
-			readOnly
-		}) : /* @__PURE__ */ jsx(ProseKitEditor, {
+		children: /* @__PURE__ */ jsx(ProseKitEditor, {
 			ref: childRef,
 			markMode: mode,
-			initialMarkdown: seedMarkdown,
+			initialMarkdown,
 			onDocChange,
 			onTagSearch,
 			onWikilinkSearch,

package/dist/style.css

@@ -567,24 +567,4 @@
   & .ProseMirror {
     flex: 1 0 auto;
   }
-
-  & [data-editor="codemirror"] {
-    flex: 1 0 auto;
-    display: flex;
-
-    & .cm-editor {
-      flex: 1;
-      font-size: .95rem;
-
-      &.cm-focused {
-        outline: none;
-      }
-    }
-
-    & .cm-content {
-      padding: 1.25rem var(--meowdown-gutter) 1.75rem;
-      font-family: var(--meowdown-font-mono);
-      caret-color: var(--meowdown-accent);
-    }
-  }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -19,18 +19,13 @@
   ],
   "dependencies": {
     "@base-ui/react": "^1.6.0",
-    "@codemirror/commands": "^6.10.4",
-    "@codemirror/lang-markdown": "^6.5.0",
-    "@codemirror/language": "^6.12.3",
-    "@codemirror/state": "^6.7.0",
-    "@codemirror/view": "^6.43.1",
     "@ocavue/utils": "^1.7.0",
     "@prosekit/core": "^0.13.0-beta.3",
     "@prosekit/pm": "^0.1.19-beta.0",
     "@prosekit/react": "^0.8.0-beta.11",
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
-    "@meowdown/core": "0.28.0"
+    "@meowdown/core": "0.29.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",