@meowdown/react 0.73.1 → 0.74.0

package/dist/index.d.ts

@@ -122,7 +122,7 @@ interface EditorHandle {
    * Escape hatch: the underlying ProseKit editor, or `undefined` when the
    * handle does not wrap one.
    */
-  readonly editor: TypedEditor | undefined;
+  getEditor: () => TypedEditor | undefined;
 }
 /**
  * One row of host items in the slash menu. The host ranks the rows; the menu does not re-sort.

package/dist/index.js

@@ -1,6 +1,6 @@
 import { clsx } from "clsx/lite";
-import { Fragment, ViewTransition, cloneElement, createElement, memo, startTransition, useCallback, useDeferredValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { buildFileMarkdown, codeBlockLanguages, collectReferenceDefinitions, defaultResolveImageUrl, defaultResolveXPost, defaultResolveYouTubeVideo, defineCodeBlockPreviewPlugin, defineEditorExtension, defineLinkEditKeymap, defineLinkHoverHandler, definePendingReplacementHandler, defineSearchStatusHandler, defineVirtualCaret, defineWikilinkHoverHandler, docToMarkdown, formatFileSize, getCodeTokens, getFileKind, getLinkText, getMarkBuilders, getPendingReplacement, getSearchStatus, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunksWithContext, isCodeBlockPreviewHiddenDecoration, isLinkTextForHref, isModEvent, isNodeOfType, isReferenceDefinitionNode, isSelectionInTableCell, loadKaTeX, markdownToDoc, normalizeHref, parsePostEmbedSnapshot, renderMathInto, updateEditorConfig } from "@meowdown/core";
+import { Fragment, ViewTransition, cloneElement, createElement, memo, startTransition, useCallback, useDeferredValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import { buildFileMarkdown, codeBlockLanguages, collectReferenceDefinitions, defaultResolveImageUrl, defaultResolveXPost, defaultResolveYouTubeVideo, defineCodeBlockPreviewPlugin, defineEditorExtension, defineLinkEditKeymap, defineLinkHoverHandler, definePendingReplacementHandler, defineSearchStatusHandler, defineVirtualCaret, defineWikilinkHoverHandler, dismissLinkHover, docToMarkdown, formatFileSize, getCodeTokens, getFileKind, getLinkText, getMarkBuilders, getPendingReplacement, getSearchStatus, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunksWithContext, isCodeBlockPreviewHiddenDecoration, isLinkTextForHref, isModEvent, isNodeOfType, isReferenceDefinitionNode, isSelectionInTableCell, loadKaTeX, markdownToDoc, normalizeHref, parsePostEmbedSnapshot, renderMathInto, updateEditorConfig } from "@meowdown/core";
 import { clamp } from "@ocavue/utils";
 import { canUseRegexLookbehind, createEditor, defineDocChangeHandler, defineUpdateHandler, isTextSelection, union } from "@prosekit/core";
 import { Selection, TextSelection } from "@prosekit/pm/state";
@@ -422,6 +422,44 @@ function EditorExtensions({ config, searchQuery, onDocChange, onSearchChange })
 	return null;
 }
 
+//#endregion
+//#region src/components/link-menu-state.ts
+const LINK_MENU_IDLE = { kind: "idle" };
+/**
+* What the popup renders: the open view, or the closing one during the exit
+* animation.
+*/
+function getLinkMenuView(state) {
+	switch (state.kind) {
+		case "idle": return;
+		case "closing": return state.view;
+		default: return state;
+	}
+}
+function reduceLinkMenu(state, event) {
+	switch (event.type) {
+		case "hover":
+			if (state.kind === "edit") return state;
+			if (event.link) return {
+				kind: "preview",
+				link: event.link
+			};
+			return state.kind === "preview" ? {
+				kind: "closing",
+				view: state
+			} : state;
+		case "edit": return {
+			kind: "edit",
+			edit: event.edit
+		};
+		case "close": return state.kind === "preview" || state.kind === "edit" ? {
+			kind: "closing",
+			view: state
+		} : state;
+		case "closed": return state.kind === "closing" ? LINK_MENU_IDLE : state;
+	}
+}
+
 //#endregion
 //#region src/components/link-menu.module.css
 var link_menu_module_default = {
@@ -735,41 +773,39 @@ function LinkEditContent({ edit, resolveLinkPreview, onSubmit, onRemove }) {
 }
 function LinkMenu({ onLinkClick, onLinkCopy, resolveLinkPreview, readOnly = false }) {
 	const editor = useEditor$1();
-	const [infoOpen, setInfoOpen] = useState(false);
-	const [editOpen, setEditOpen] = useState(false);
-	const [link, setLink] = useState();
-	const [edit, setEdit] = useState();
+	const [state, dispatch] = useReducer(reduceLinkMenu, LINK_MENU_IDLE);
 	const isPointerOverPopupRef = useRef(false);
-	const linkHoverExtension = useMemo(() => {
-		return defineLinkHoverHandler((nextHit) => {
-			setInfoOpen(nextHit != null);
-			if (nextHit) setLink(nextHit.payload);
-		}, { canLeave: () => !isPointerOverPopupRef.current });
-	}, []);
-	useExtension$1(linkHoverExtension);
-	const linkEditExtension = useMemo(() => {
-		return readOnly ? null : defineLinkEditKeymap((options) => {
-			setEdit(options);
-			setEditOpen(true);
-			setInfoOpen(false);
-		});
-	}, [readOnly]);
-	useExtension$1(linkEditExtension);
+	useEffect(() => {
+		const canLeave = () => !isPointerOverPopupRef.current;
+		const linkHoverExtension = defineLinkHoverHandler((hit) => dispatch({
+			type: "hover",
+			link: hit?.payload
+		}), { canLeave });
+		return editor.use(linkHoverExtension);
+	}, [editor]);
+	useEffect(() => {
+		if (readOnly) return;
+		const linkEditExtension = defineLinkEditKeymap((edit) => dispatch({
+			type: "edit",
+			edit
+		}));
+		return editor.use(linkEditExtension);
+	}, [editor, readOnly]);
 	const handlePointerHover = useCallback((over) => {
 		isPointerOverPopupRef.current = over;
 	}, []);
-	const closeInfo = useCallback(() => {
+	const close = useCallback(() => {
 		isPointerOverPopupRef.current = false;
-		setInfoOpen(false);
-	}, []);
-	const closeEdit = useCallback(() => {
-		setEditOpen(false);
-		closeInfo();
-	}, [closeInfo]);
+		dismissLinkHover(editor.state);
+		dispatch({ type: "close" });
+	}, [editor]);
+	const view = getLinkMenuView(state);
+	const edit = view?.kind === "edit" ? view.edit : void 0;
+	const link = view?.kind === "preview" ? view.link : void 0;
 	const handleEditRemove = useCallback(() => {
 		editor.commands.removeLink();
-		closeEdit();
-	}, [editor, closeEdit]);
+		close();
+	}, [editor, close]);
 	const handleEditSubmit = useCallback((text, href) => {
 		if (!edit) return;
 		if (edit.link) editor.commands.updateLink({
@@ -781,52 +817,52 @@ function LinkMenu({ onLinkClick, onLinkCopy, resolveLinkPreview, readOnly = fals
 			text,
 			href
 		});
-		closeEdit();
+		close();
 	}, [
 		edit,
 		editor,
-		closeEdit
+		close
 	]);
 	const mutable = link != null && !readOnly && link.form !== "reference";
 	const linkText = useMemo(() => link ? getLinkText(link) : "", [link]);
 	const editLink = useCallback(() => {
 		if (!link) return;
 		selectLinkUnit(editor, link);
-		setEdit({
-			from: link.unit.from,
-			to: link.unit.to,
-			link,
-			text: linkText
+		dispatch({
+			type: "edit",
+			edit: {
+				from: link.unit.from,
+				to: link.unit.to,
+				link,
+				text: linkText
+			}
 		});
-		setEditOpen(true);
-		closeInfo();
 	}, [
 		link,
 		editor,
-		linkText,
-		closeInfo
+		linkText
 	]);
 	const removeLink = useCallback(() => {
 		if (!link) return;
 		selectLinkUnit(editor, link);
 		editor.commands.removeLink();
-		closeInfo();
+		close();
 	}, [
 		link,
 		editor,
-		closeInfo
+		close
 	]);
 	const handleUseTitle = useMemo(() => {
 		if (!link || !mutable || !isLinkTextForHref(linkText, link.href)) return;
 		return (title) => {
 			selectLinkUnit(editor, link);
 			editor.commands.updateLink({ text: title });
-			closeInfo();
+			close();
 		};
 	}, [
 		link,
 		editor,
-		closeInfo,
+		close,
 		linkText,
 		mutable
 	]);
@@ -836,24 +872,21 @@ function LinkMenu({ onLinkClick, onLinkCopy, resolveLinkPreview, readOnly = fals
 		if (!range) return;
 		return getVirtualElementFromRange(editor.view, range);
 	}, [range, editor]);
-	const editing = edit != null && !readOnly;
 	return /* @__PURE__ */ jsx(LinkPopover, {
 		anchor,
-		open: editing ? editOpen : infoOpen,
-		onClose: editing ? closeEdit : closeInfo,
+		open: state.kind === "preview" || state.kind === "edit",
+		onClose: close,
 		onCloseComplete: () => {
-			if (editing) {
-				setEdit(void 0);
-				editor.focus();
-			} else if (!infoOpen) setLink(void 0);
+			if (edit) editor.focus();
+			dispatch({ type: "closed" });
 		},
 		onPopupHover: handlePointerHover,
-		children: editing ? /* @__PURE__ */ jsx(LinkEditContent, {
+		children: edit ? /* @__PURE__ */ jsx(LinkEditContent, {
 			edit,
 			resolveLinkPreview,
 			onRemove: edit.link ? handleEditRemove : void 0,
 			onSubmit: handleEditSubmit
-		}) : link ? /* @__PURE__ */ jsx(LinkInfoContent, {
+		}, `${edit.from}:${edit.to}`) : link ? /* @__PURE__ */ jsx(LinkInfoContent, {
 			href: link.href,
 			previewState,
 			onLinkClick,
@@ -1706,6 +1739,7 @@ function TagMenu({ onTagSearch }) {
 				className: autocomplete_menu_module_default.Popup,
 				"data-testid": "tag-menu",
 				children: [items.map((item) => /* @__PURE__ */ jsxs(AutocompleteItem, {
+					value: item.tag,
 					className: autocomplete_menu_module_default.Item,
 					onSelect: () => {
 						editor.commands.insertText({ text: `#${item.tag} ` });
@@ -1782,6 +1816,7 @@ function WikilinkMenu({ onWikilinkSearch }) {
 				className: autocomplete_menu_module_default.Popup,
 				"data-testid": "wikilink-menu",
 				children: [items.map((item) => /* @__PURE__ */ jsxs(AutocompleteItem, {
+					value: item.target,
 					className: autocomplete_menu_module_default.Item,
 					onSelect: () => {
 						editor.commands.insertText({ text: `[[${item.target}]]` });
@@ -1970,8 +2005,10 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 			suppressDocChangeRef.current = true;
 			try {
 				editor.view.dispatch(transaction);
-			} finally {
 				suppressDocChangeRef.current = false;
+			} catch (error) {
+				suppressDocChangeRef.current = false;
+				throw error;
 			}
 		}
 		function setState(markdown, selection) {
@@ -2048,7 +2085,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 			discardPendingReplacement,
 			findNext,
 			findPrevious,
-			editor
+			getEditor: () => editor
 		};
 	}, [
 		editor,
@@ -2056,11 +2093,14 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 		hasSelectionMenu,
 		openSelectionMenu
 	]);
+	const mount = useCallback((element) => {
+		return editor.mount(element);
+	}, [editor]);
 	return /* @__PURE__ */ jsxs(ProseKit, {
 		editor,
 		children: [
 			/* @__PURE__ */ jsx(VirtualCaret, {}),
-			/* @__PURE__ */ jsx("div", { ref: editor.mount }),
+			/* @__PURE__ */ jsx("div", { ref: mount }),
 			/* @__PURE__ */ jsx(EditorExtensions, {
 				config,
 				searchQuery,
@@ -2081,7 +2121,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 				onLinkCopy,
 				resolveLinkPreview,
 				readOnly
-			}),
+			}, String(readOnly)),
 			onTagSearch && /* @__PURE__ */ jsx(TagMenu, { onTagSearch }),
 			onWikilinkSearch && /* @__PURE__ */ jsx(WikilinkMenu, { onWikilinkSearch }),
 			onSelectionMenuSearch && !readOnly && /* @__PURE__ */ jsx(SelectionMenu, {
@@ -2177,6 +2217,9 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashM
 		function findPrevious() {
 			childRef.current?.findPrevious();
 		}
+		function getEditor() {
+			return childRef.current?.getEditor();
+		}
 		return {
 			getMarkdown,
 			setMarkdown,
@@ -2197,9 +2240,7 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashM
 			discardPendingReplacement,
 			findNext,
 			findPrevious,
-			get editor() {
-				return childRef.current?.editor;
-			}
+			getEditor
 		};
 	}, []);
 	return /* @__PURE__ */ jsx("div", {

package/dist/style.css

@@ -319,7 +319,9 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    transition: none;
+    &, &[data-closed] {
+      transition: none;
+    }
   }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.73.1",
+  "version": "0.74.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,7 +22,7 @@
   ],
   "dependencies": {
     "@base-ui/react": "^1.8.0",
-    "@meowdown/core": "0.74.1",
+    "@meowdown/core": "0.74.2",
     "@meowdown/embed": "0.2.0",
     "@meowdown/markdown": "0.72.0",
     "@ocavue/utils": "^1.8.0",