@dxos/react-ui-editor 0.14.0 → 0.16.0

package/dist/lib/index.mjs

@@ -115,7 +115,7 @@ var popover = (options = {}) => {
 		(options.activateOnTyping || options.activateOnDelimiters?.length) && popoverAutoActivate(options),
 		popoverAnchorDecoration(options),
 		modalStateField,
-		options.trigger && placeholder({
+		options.trigger && options.placeholder !== false && placeholder({
 			content: `Press '${Array.isArray(options.trigger) ? options.trigger[0] : options.trigger}' for commands`,
 			focusOnly: true,
 			...options.placeholder
@@ -129,8 +129,9 @@ var popoverTriggerListener = (options) => EditorView$1.updateListener.of(({ view
 	const { range: activeRange, trigger } = view.state.field(popoverStateField) ?? {};
 	if (!activeRange) return;
 	const text = view.state.doc.sliceString(activeRange.from, activeRange.to);
+	const query = trigger ? text.slice(1) : text;
 	const selection = view.state.selection.main;
-	const shouldClose = (trigger ? trigger !== text[0] : false) || /\s/.test(trigger ? text.slice(1) : text) || selection.head < activeRange.from || selection.head > activeRange.to + 1;
+	const shouldClose = (trigger ? trigger !== text[0] : false) || (trigger && options.multiWordTriggers?.includes(trigger) ? /^\s|[^\S ]| {2}/.test(query) : /\s/.test(query)) || selection.head < activeRange.from || selection.head > activeRange.to + 1;
 	const nextRange = shouldClose ? null : docChanged ? {
 		from: activeRange.from,
 		to: selection.head
@@ -596,7 +597,10 @@ var MenuItem = ({ item, current, onSelect }) => {
 		className: "dx-menu-item",
 		"data-highlighted": current ? "" : void 0,
 		onClick: handleSelect,
-		children: [item.icon && /* @__PURE__ */ jsx(Icon.Icon, { icon: item.icon }), /* @__PURE__ */ jsx("span", {
+		children: [item.icon && /* @__PURE__ */ jsx(Icon.Icon, {
+			icon: item.icon,
+			hue: item.iconHue
+		}), /* @__PURE__ */ jsx("span", {
 			className: "dx-menu-item-text",
 			children: Theme.toLocalizedString(item.label, t)
 		})]
@@ -616,7 +620,7 @@ var __dxlog_file$2 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/components/
 * );
 * ```
 */
-var useEditorMenu = ({ trigger, triggerKey, placeholder, activateOnTyping, activateOnDelimiters, filter = true, searchTriggers, getMenu }) => {
+var useEditorMenu = ({ trigger, triggerKey, placeholder, activateOnTyping, activateOnDelimiters, multiWordTriggers, filter = true, searchTriggers, getMenu }) => {
 	const groupsRef = useRef([]);
 	const currentRef = useRef(null);
 	const [currentItem, setCurrentItem] = useState();
@@ -626,17 +630,44 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder, activateOnTyping, activ
 	const [_, refresh] = useState({});
 	const contextRef = useRef(null);
 	const requestRef = useRef(0);
+	const getMenuRef = useRef(getMenu);
+	useLayoutEffect(() => {
+		getMenuRef.current = getMenu;
+	}, [getMenu]);
 	/**
 	* Get filtered options.
 	*/
 	const getMenuOptions = useCallback(async ({ text, trigger, ...props }) => {
-		const groups = await getMenu?.({
+		const groups = await getMenuRef.current?.({
 			text,
 			trigger,
 			...props
 		}) ?? [];
 		return filter && trigger !== "@" ? filterMenuGroups(groups, (item) => text ? item.label.toLowerCase().startsWith(text.toLowerCase()) : true) : groups;
-	}, [getMenu, filter]);
+	}, [filter]);
+	const handleOpenChange = useCallback(async ({ view, open }) => {
+		invariant(view, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$2,
+			L: 128,
+			S: void 0,
+			A: ["view", ""]
+		});
+		setOpen(open);
+		if (!open) {
+			setCurrentItem(void 0);
+			setSearch(false);
+			setQuery("");
+			contextRef.current = null;
+			requestRef.current++;
+			groupsRef.current = [];
+			currentRef.current = null;
+			view.dispatch({ effects: [popoverRangeEffect.of(null)] });
+		}
+		requestAnimationFrame(() => {
+			view.dispatch({ effects: [modalStateEffect.of(open)] });
+		});
+	}, [getMenuOptions]);
 	/**
 	* Recompute the menu and preselect the first item.
 	*/
@@ -660,29 +691,6 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder, activateOnTyping, activ
 		}
 		refresh({});
 	}, [getMenuOptions]);
-	const handleOpenChange = useCallback(async ({ view, open }) => {
-		invariant(view, void 0, {
-			"~LogMeta": "~LogMeta",
-			F: __dxlog_file$2,
-			L: 137,
-			S: void 0,
-			A: ["view", ""]
-		});
-		setOpen(open);
-		if (!open) {
-			setCurrentItem(void 0);
-			setSearch(false);
-			setQuery("");
-			contextRef.current = null;
-			requestRef.current++;
-			groupsRef.current = [];
-			currentRef.current = null;
-			view.dispatch({ effects: [popoverRangeEffect.of(null)] });
-		}
-		requestAnimationFrame(() => {
-			view.dispatch({ effects: [modalStateEffect.of(open)] });
-		});
-	}, [getMenuOptions]);
 	const handleActivate = useCallback(async ({ view, trigger }) => {
 		const item = getMenuItem(groupsRef.current, currentItem);
 		if (item) currentRef.current = item;
@@ -707,7 +715,7 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder, activateOnTyping, activ
 	}, []);
 	const handleCancel = useCallback(({ view }) => {
 		const { range, trigger } = view.state.field(popoverStateField) ?? {};
-		if (range && trigger) view.dispatch({ changes: {
+		if (range && trigger && !contextRef.current?.multiWord) view.dispatch({ changes: {
 			...range,
 			insert: ""
 		} });
@@ -728,18 +736,23 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder, activateOnTyping, activ
 			return next.id;
 		});
 	}, []);
-	const serializedTrigger = Array.isArray(trigger) ? trigger.join(",") : trigger;
-	const serializedSearchTriggers = searchTriggers?.join(",");
-	const serializedDelimiters = activateOnDelimiters?.join(",");
+	const arraysKey = JSON.stringify({
+		trigger,
+		searchTriggers,
+		activateOnDelimiters,
+		multiWordTriggers
+	});
 	return {
 		groupsRef,
 		extension: useMemo(() => {
+			const arrays = JSON.parse(arraysKey);
 			return popover({
-				trigger,
+				trigger: arrays.trigger,
 				triggerKey,
 				placeholder,
 				activateOnTyping,
-				activateOnDelimiters,
+				activateOnDelimiters: arrays.activateOnDelimiters,
+				multiWordTriggers: arrays.multiWordTriggers,
 				onClose: ({ view }) => handleOpenChange({
 					view,
 					open: false
@@ -757,29 +770,25 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder, activateOnTyping, activ
 				onArrowUp: () => handleNavigate("up"),
 				onArrowDown: () => handleNavigate("down"),
 				onTextChange: async ({ view, pos, text, trigger }) => {
-					contextRef.current = {
+					const context = {
 						view,
 						pos,
 						text,
-						trigger
+						trigger,
+						multiWord: !!trigger && !!arrays.multiWordTriggers?.includes(trigger)
 					};
-					setSearch(!!trigger && !!searchTriggers?.includes(trigger));
+					contextRef.current = context;
+					setSearch(!!trigger && !!arrays.searchTriggers?.includes(trigger));
 					setQuery("");
-					await updateGroups({
-						view,
-						pos,
-						text,
-						trigger
-					});
+					await updateGroups(context);
 				}
 			});
 		}, [
 			handleOpenChange,
 			handleNavigate,
 			updateGroups,
-			serializedTrigger,
-			serializedSearchTriggers,
-			serializedDelimiters,
+			arraysKey,
+			triggerKey,
 			placeholder,
 			activateOnTyping
 		]),
@@ -1090,6 +1099,8 @@ var useBasicMarkdownExtensions = ({ placeholder, decorate = true, readonly = fal
 //#region src/hooks/useTextEditor.ts
 var __dxlog_file$1 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var instanceCount = 0;
+/** Whether every position in a recorded state lies within a document of `length`. */
+var fitsDocument = ({ scrollTo, selection }, length) => (scrollTo ?? 0) <= length && (selection?.anchor ?? 0) <= length && (selection?.head ?? 0) <= length;
 /**
 * Creates codemirror text editor.
 */
@@ -1108,7 +1119,7 @@ var useTextEditor = (props = {}, deps = []) => {
 			}, {
 				"~LogMeta": "~LogMeta",
 				F: __dxlog_file$1,
-				L: 82,
+				L: 87,
 				S: void 0
 			});
 			const length = (doc ?? initialValue)?.length ?? 0;
@@ -1125,7 +1136,7 @@ var useTextEditor = (props = {}, deps = []) => {
 						log.catch(err, void 0, {
 							"~LogMeta": "~LogMeta",
 							F: __dxlog_file$1,
-							L: 103,
+							L: 108,
 							S: void 0
 						});
 					})
@@ -1150,35 +1161,36 @@ var useTextEditor = (props = {}, deps = []) => {
 			log("destroy", { id }, {
 				"~LogMeta": "~LogMeta",
 				F: __dxlog_file$1,
-				L: 127,
+				L: 132,
 				S: void 0
 			});
 			view?.destroy();
 		};
 	}, deps);
 	useEffect(() => {
-		if (view) {
-			if (scrollTo != null || selection) {
-				if (selection && selection.anchor > view.state.doc.length) {
-					log.warn("invalid selection", {
-						length: view.state.doc.length,
-						scrollTo,
-						selection
-					}, {
-						"~LogMeta": "~LogMeta",
-						F: __dxlog_file$1,
-						L: 136,
-						S: void 0
-					});
-					return;
-				}
-				restoreEditorState(view, {
-					scrollTo,
-					scrollOffset,
-					selection
+		if (!view || scrollTo == null && !selection) return;
+		const state = {
+			scrollTo,
+			scrollOffset,
+			selection
+		};
+		if (fitsDocument(state, view.state.doc.length)) {
+			restoreEditorState(view, state);
+			return;
+		}
+		let active = true;
+		let pending = true;
+		view.dispatch({ effects: StateEffect.appendConfig.of(EditorView$1.updateListener.of((update) => {
+			if (pending && update.docChanged && fitsDocument(state, update.state.doc.length)) {
+				pending = false;
+				queueMicrotask(() => {
+					if (active) restoreEditorState(update.view, state);
 				});
 			}
-		}
+		})) });
+		return () => {
+			active = false;
+		};
 	}, [
 		view,
 		scrollTo,