@meowdown/react 0.16.1 → 0.17.0

package/README.md

@@ -32,7 +32,7 @@ export function App() {
 
 ### `<MeowdownEditor>`
 
-The Markdown editor component. Renders inside a `div.meowdown` wrapper that fills a flex parent. In rich modes, typing `/` opens a slash menu for inserting blocks (headings, blockquote, lists, code block, table). Hovering a block shows a handle to its left: the plus button inserts an empty paragraph below the block, and the grip selects the block and can be dragged to move it, with a drop indicator line marking the target.
+The Markdown editor component. Renders inside a `div.meowdown` wrapper that fills a flex parent. In rich modes, typing `/` opens a slash menu for inserting blocks (headings, blockquote, lists, code block, table). Hovering a block shows a handle to its left: the grip selects the block and can be dragged to move it, with a drop indicator line marking the target.
 
 - `mode?: 'focus' | 'show' | 'hide' | 'source'`: defaults to `'focus'`.
   - `'focus'`: Markdown syntax is hidden, revealed around the cursor.
@@ -51,7 +51,7 @@ The Markdown editor component. Renders inside a `div.meowdown` wrapper that fill
 - `onImageClick?: (payload: { src: string; alt: string; event: MouseEvent }) => void`: called when a rendered image is clicked, with its markdown `src`, `alt`, and the originating `MouseEvent`. Pass a stable function (e.g. from `useCallback`). Ignored in source mode.
 - `embedPaste?: boolean`: 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; set `false` to disable. Only takes effect when `resolveImageUrl` is set, since embeds render through the image pipeline. Ignored in source mode.
 - `bulletAfterHeading?: 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.
-- `blockHandle?: 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). On by default; set `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.
+- `blockHandle?: boolean`: shows the per-block gutter handle in the rich modes (a drag grip for reordering blocks, plus the drop indicator). On by default; set `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.
 - `placeholder?: string | ((state) => string)`: placeholder text shown when the whole document is empty. Pass a stable function. Ignored in source mode.
 - `readOnly?: boolean`: makes the editor read-only, in both the rich and source modes.
 - `spellCheck?: boolean`: toggles the browser's native spell checking in the rich modes. Defaults to the browser's behavior. Ignored in source mode.

package/dist/index.d.ts

@@ -155,6 +155,8 @@ interface EditorProps {
    * Off by default. Ignored in source mode.
    */
   bulletAfterHeading?: boolean;
+  /** Handles a leading `---` frontmatter block in the rich modes (off by default, ignored in source mode). */
+  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
@@ -198,6 +200,7 @@ declare function MeowdownEditor({
   onImageClick,
   embedPaste,
   bulletAfterHeading,
+  frontmatter,
   blockHandle,
   placeholder,
   readOnly,

package/dist/index.js

@@ -12,7 +12,7 @@ import { canUseRegexLookbehind, createEditor, defineDocChangeHandler, union } fr
 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 { BlockHandleAdd, BlockHandleDraggable, BlockHandlePopup, BlockHandlePositioner, BlockHandleRoot } from "@prosekit/react/block-handle";
+import { BlockHandleDraggable, BlockHandlePopup, BlockHandlePositioner, BlockHandleRoot } from "@prosekit/react/block-handle";
 import { DropIndicator } from "@prosekit/react/drop-indicator";
 import { AutocompleteEmpty, AutocompleteItem, AutocompletePopup, AutocompletePositioner, AutocompleteRoot } from "@prosekit/react/autocomplete";
 import { MenuItem, MenuPopup, MenuPositioner } from "@prosekit/react/menu";
@@ -333,7 +333,6 @@ function defineCodeBlockView() {
 //#endregion
 //#region src/components/block-handle.module.css
 var block_handle_module_default = {
-	"Add": "meow_Add_EvUpOG",
 	"Draggable": "meow_Draggable_EvUpOG",
 	"Popup": "meow_Popup_EvUpOG",
 	"Positioner": "meow_Positioner_EvUpOG"
@@ -385,38 +384,19 @@ function GripVerticalIcon() {
 	});
 }
 
-//#endregion
-//#region src/components/icons/plus-icon.tsx
-function PlusIcon() {
-	return /* @__PURE__ */ jsxs("svg", {
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 2,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		children: [/* @__PURE__ */ jsx("path", { d: "M5 12h14" }), /* @__PURE__ */ jsx("path", { d: "M12 5v14" })]
-	});
-}
-
 //#endregion
 //#region src/components/block-handle.tsx
 function BlockHandle() {
 	return /* @__PURE__ */ jsx(BlockHandleRoot, { children: /* @__PURE__ */ jsx(BlockHandlePositioner, {
 		className: block_handle_module_default.Positioner,
-		children: /* @__PURE__ */ jsxs(BlockHandlePopup, {
+		children: /* @__PURE__ */ jsx(BlockHandlePopup, {
 			className: block_handle_module_default.Popup,
 			"data-testid": "block-handle",
-			children: [/* @__PURE__ */ jsx(BlockHandleAdd, {
-				className: block_handle_module_default.Add,
-				"data-testid": "block-handle-add",
-				children: /* @__PURE__ */ jsx(PlusIcon, {})
-			}), /* @__PURE__ */ jsx(BlockHandleDraggable, {
+			children: /* @__PURE__ */ jsx(BlockHandleDraggable, {
 				className: block_handle_module_default.Draggable,
 				"data-testid": "block-handle-drag",
 				children: /* @__PURE__ */ jsx(GripVerticalIcon, {})
-			})]
+			})
 		})
 	}) });
 }
@@ -926,16 +906,19 @@ function resolveSelection(doc, selection) {
 		return TextSelection.between(doc.resolve(anchor), doc.resolve(head));
 	}
 }
-function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTagSearch, onWikilinkSearch, onWikilinkClick, onLinkClick, resolveImageUrl, onImagePaste, onImageSaveError, onImageClick, embedPaste, bulletAfterHeading, blockHandle = true, placeholder, readOnly, spellCheck, editorClassName, ref, children }) {
+function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTagSearch, onWikilinkSearch, onWikilinkClick, onLinkClick, resolveImageUrl, onImagePaste, onImageSaveError, onImageClick, embedPaste, bulletAfterHeading, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, editorClassName, ref, children }) {
 	const [editor] = useState(() => {
 		const editor = createEditor({ extension: union(defineEditorExtension(), defineCodeBlockView()) });
-		if (initialMarkdown) editor.setContent(markdownToDoc(initialMarkdown, editor.nodes));
+		if (initialMarkdown) editor.setContent(markdownToDoc(initialMarkdown, {
+			nodes: editor.nodes,
+			frontmatter
+		}));
 		return editor;
 	});
 	const suppressDocChangeRef = useRef(false);
 	useImperativeHandle(ref, () => {
 		function getMarkdown() {
-			return docToMarkdown(editor.state.doc);
+			return docToMarkdown(editor.state.doc, { frontmatter });
 		}
 		function getSelection() {
 			return editor.state.selection.toJSON();
@@ -947,7 +930,10 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 			if (markdown == null && !selection) return;
 			const transaction = editor.state.tr;
 			if (markdown != null) {
-				const doc = markdownToDoc(markdown, editor.nodes);
+				const doc = markdownToDoc(markdown, {
+					nodes: editor.nodes,
+					frontmatter
+				});
 				transaction.replaceWith(0, transaction.doc.content.size, doc.content);
 			}
 			if (selection) transaction.setSelection(resolveSelection(transaction.doc, selection)).scrollIntoView();
@@ -981,7 +967,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 			scrollIntoView,
 			editor
 		};
-	}, [editor]);
+	}, [editor, frontmatter]);
 	const handleDocChange = useMemo(() => {
 		if (!onDocChange) return;
 		return () => {
@@ -995,7 +981,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 			/* @__PURE__ */ jsx("div", {
 				ref: editor.mount,
 				spellCheck,
-				className: editorClassName
+				className: clsx("meowdown-content", editorClassName)
 			}),
 			/* @__PURE__ */ jsx(EditorExtensions, {
 				markMode,
@@ -1024,7 +1010,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 
 //#endregion
 //#region src/components/editor.tsx
-function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onTagSearch, onWikilinkSearch, onWikilinkClick, onLinkClick, resolveImageUrl, onImagePaste, onImageSaveError, onImageClick, embedPaste = true, bulletAfterHeading = false, blockHandle = true, placeholder, readOnly, spellCheck, editorClassName, wrapperClassName, handleRef, children }) {
+function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onTagSearch, onWikilinkSearch, onWikilinkClick, onLinkClick, resolveImageUrl, onImagePaste, onImageSaveError, onImageClick, embedPaste = true, bulletAfterHeading = false, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, editorClassName, wrapperClassName, handleRef, children }) {
 	const childRef = useRef(null);
 	useImperativeHandle(handleRef, () => {
 		function getMarkdown() {
@@ -1096,6 +1082,7 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onTagSea
 			onImageClick,
 			embedPaste,
 			bulletAfterHeading,
+			frontmatter,
 			blockHandle,
 			placeholder,
 			readOnly,

package/dist/style.css

@@ -228,10 +228,12 @@
   }
 }
 
-.meow_Add_EvUpOG, .meow_Draggable_EvUpOG {
+.meow_Draggable_EvUpOG {
   box-sizing: border-box;
+  width: 1.25rem;
   height: 1.5rem;
   color: color-mix(in oklab, var(--meowdown-muted) 50%, transparent);
+  cursor: grab;
   border-radius: .25rem;
   justify-content: center;
   align-items: center;
@@ -247,16 +249,6 @@
     display: block;
   }
 }
-
-.meow_Add_EvUpOG {
-  cursor: pointer;
-  width: 1.5rem;
-}
-
-.meow_Draggable_EvUpOG {
-  cursor: grab;
-  width: 1.25rem;
-}
 .meow_DropIndicator_urNIwW {
   z-index: 50;
   background: var(--meowdown-accent);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -26,9 +26,9 @@
     "@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.5",
+    "@prosekit/react": "^0.8.0-beta.7",
     "clsx": "^2.1.1",
-    "@meowdown/core": "0.16.1"
+    "@meowdown/core": "0.17.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",