@dxos/react-ui-editor 0.11.1 → 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264

package/dist/lib/index.mjs

@@ -1,5 +1,5 @@
 import { createContext } from "@radix-ui/react-context";
-import { Atom } from "@effect-atom/atom";
+import * as Atom from "effect/unstable/reactivity/Atom";
 import { Fragment, forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { invariant } from "@dxos/invariant";
@@ -104,7 +104,7 @@ var popover = (options = {}) => {
 		Prec.highest(popoverKeymap(options)),
 		popoverStateField,
 		popoverTriggerListener(options),
-		options.activateOnTyping && popoverAutoActivate(options),
+		(options.activateOnTyping || options.activateOnDelimiters?.length) && popoverAutoActivate(options),
 		popoverAnchorDecoration(options),
 		modalStateField,
 		options.trigger && placeholder({
@@ -144,7 +144,8 @@ var popoverAutoActivate = (options) => EditorView.updateListener.of(({ view, doc
 	const line = view.state.doc.lineAt(selection.head);
 	const before = line.text.slice(0, selection.head - line.from);
 	const idx = getLastIndexOf(before, options.delimiters ?? DELIMITERS);
-	if (before.slice(idx + 1).length === 0) return;
+	const token = before.slice(idx + 1);
+	if (!(token.length === 0 && (options.activateOnDelimiters ?? []).includes(before[idx])) && (!options.activateOnTyping || token.length === 0)) return;
 	view.dispatch({ effects: popoverRangeEffect.of({ range: {
 		from: line.from + idx + 1,
 		to: selection.head
@@ -393,7 +394,7 @@ var formattingCommands = {
 			id: "table",
 			label: "Table",
 			icon: "ph--table--regular",
-			onSelect: ({ view, head }) => insertAtLineStart(view, head, "| | | |\n|---|---|---|\n| | | |")
+			onSelect: ({ view, head }) => insertTable(view, head)
 		}
 	]
 };
@@ -537,7 +538,7 @@ var EditorMenuProvider = ({ children, getView, groups, currentItem, open: openPr
 						ref: searchInputRef,
 						density: "sm",
 						variant: "subdued",
-						classNames: "shrink-0 mbe-1",
+						classNames: "shrink-0 mb-1",
 						value: query,
 						placeholder: searchPlaceholder,
 						"aria-label": searchPlaceholder ?? t("search.label"),
@@ -622,7 +623,7 @@ var __dxlog_file$2 = "/__w/dxos/dxos/packages/ui/react-ui-editor/src/components/
 * );
 * ```
 */
-var useEditorMenu = ({ trigger, triggerKey, placeholder, activateOnTyping, filter = true, searchTriggers, getMenu }) => {
+var useEditorMenu = ({ trigger, triggerKey, placeholder, activateOnTyping, activateOnDelimiters, filter = true, searchTriggers, getMenu }) => {
 	const groupsRef = useRef([]);
 	const currentRef = useRef(null);
 	const [currentItem, setCurrentItem] = useState();
@@ -670,7 +671,7 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder, activateOnTyping, filte
 		invariant(view, void 0, {
 			"~LogMeta": "~LogMeta",
 			F: __dxlog_file$2,
-			L: 136,
+			L: 137,
 			S: void 0,
 			A: ["view", ""]
 		});
@@ -736,6 +737,7 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder, activateOnTyping, filte
 	}, []);
 	const serializedTrigger = Array.isArray(trigger) ? trigger.join(",") : trigger;
 	const serializedSearchTriggers = searchTriggers?.join(",");
+	const serializedDelimiters = activateOnDelimiters?.join(",");
 	return {
 		groupsRef,
 		extension: useMemo(() => {
@@ -744,6 +746,7 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder, activateOnTyping, filte
 				triggerKey,
 				placeholder,
 				activateOnTyping,
+				activateOnDelimiters,
 				onClose: ({ view }) => handleOpenChange({
 					view,
 					open: false
@@ -783,6 +786,7 @@ var useEditorMenu = ({ trigger, triggerKey, placeholder, activateOnTyping, filte
 			updateGroups,
 			serializedTrigger,
 			serializedSearchTriggers,
+			serializedDelimiters,
 			placeholder,
 			activateOnTyping
 		]),
@@ -820,7 +824,7 @@ var addBlocks = (state, getView) => (builder) => {
 			group.action(type, {
 				label: [`block.${type}.label`, { ns: translationKey }],
 				checked,
-				...type === "table" && { disabled: !!state.blankLine },
+				...type === "table" && { disabled: !state.blankLine },
 				icon
 			}, () => {
 				const view = getView();
@@ -832,9 +836,7 @@ var addBlocks = (state, getView) => (builder) => {
 					case "codeblock":
 						checked ? removeCodeblock(view) : addCodeblock(view);
 						break;
-					case "table":
-						insertTable(view);
-						break;
+					case "table": insertTable(view);
 				}
 			});
 		}
@@ -954,7 +956,8 @@ var addLists = (state, getView) => (builder) => {
 			}, () => {
 				const view = getView();
 				if (!view) return;
-				toggleList(listStyle === "ordered" ? List.Ordered : listStyle === "bullet" ? List.Bullet : List.Task)(view);
+				const listType = listStyle === "ordered" ? List.Ordered : listStyle === "bullet" ? List.Bullet : List.Task;
+				toggleList(listType)(view);
 			});
 		}
 	});
@@ -1026,12 +1029,15 @@ var EditorToolbar$1 = memo(({ classNames, role, attendableId, onAction, ...props
 			...menuActions,
 			attendableId,
 			onAction,
-			children: /* @__PURE__ */ jsx(Menu.Toolbar, { classNames })
+			children: /* @__PURE__ */ jsx(Menu.Toolbar, {
+				classNames,
+				children: /* @__PURE__ */ jsx(Menu.Items, {})
+			})
 		})
 	});
 });
 var useMarkdownMenuActions = ({ state, getView, customActions, ...features }) => {
-	return useMenuActions(useMemo(() => createMarkdownActions({
+	const menuCreator = useMemo(() => createMarkdownActions({
 		state,
 		getView,
 		customActions,
@@ -1048,7 +1054,8 @@ var useMarkdownMenuActions = ({ state, getView, customActions, ...features }) =>
 		features?.onImageUpload,
 		features?.onViewModeChange,
 		features?.viewModes
-	]));
+	]);
+	return useMenuActions(menuCreator);
 };
 var createMarkdownActions = ({ state, getView, customActions, ...features }) => {
 	return Atom.make((get) => {
@@ -1116,12 +1123,10 @@ var useTextEditor = (props = {}, deps = []) => {
 				L: 75,
 				S: void 0
 			});
+			const length = (doc ?? initialValue)?.length ?? 0;
 			let initialSelection;
-			if (selection?.anchor && initialValue?.length) {
-				if (selection.anchor <= initialValue.length && (selection?.head ?? 0) <= initialValue.length) initialSelection = selection;
-			} else if (selectionEnd && selection === void 0) {
-				const index = initialValue?.indexOf("\n");
-				initialSelection = { anchor: !index || index === -1 ? 0 : index };
+			if (selection?.anchor !== void 0 && length) {
+				if (selection.anchor <= length && (selection?.head ?? 0) <= length) initialSelection = selection;
 			}
 			const state = EditorState.create({
 				doc: doc ?? initialValue,
@@ -1132,7 +1137,7 @@ var useTextEditor = (props = {}, deps = []) => {
 						log.catch(err, void 0, {
 							"~LogMeta": "~LogMeta",
 							F: __dxlog_file$1,
-							L: 97,
+							L: 96,
 							S: void 0
 						});
 					})
@@ -1146,7 +1151,7 @@ var useTextEditor = (props = {}, deps = []) => {
 			});
 			if (selectionEnd && !initialSelection) {
 				const { to } = view.state.doc.lineAt(0);
-				if (to) view.dispatch({ selection: { anchor: to } });
+				view.dispatch({ selection: { anchor: to } });
 			}
 			setView(view);
 		}
@@ -1154,7 +1159,7 @@ var useTextEditor = (props = {}, deps = []) => {
 			log("destroy", { id }, {
 				"~LogMeta": "~LogMeta",
 				F: __dxlog_file$1,
-				L: 122,
+				L: 119,
 				S: void 0
 			});
 			view?.destroy();
@@ -1171,7 +1176,7 @@ var useTextEditor = (props = {}, deps = []) => {
 					}, {
 						"~LogMeta": "~LogMeta",
 						F: __dxlog_file$1,
-						L: 131,
+						L: 128,
 						S: void 0
 					});
 					return;
@@ -1205,7 +1210,6 @@ var useTextEditor = (props = {}, deps = []) => {
 					case "Enter":
 						event.preventDefault();
 						if (target === currentTarget) view?.focus();
-						break;
 				}
 			}, [view])
 		}
@@ -1277,6 +1281,7 @@ var EditorRoot = forwardRef(({ children, extensions: extensionsProp, widgets, vi
 	const extensions = useMemo(() => [extension, extensionsProp].filter(isNonNullable).flat(), [extension, extensionsProp]);
 	const [controller, setController] = useState(noopController);
 	useImperativeHandle(forwardedRef, () => controller, [controller]);
+	const getView = useCallback(() => controller?.view ?? null, [controller]);
 	return /* @__PURE__ */ jsx(EditorContextProvider, {
 		controller,
 		setController,
@@ -1284,7 +1289,7 @@ var EditorRoot = forwardRef(({ children, extensions: extensionsProp, widgets, vi
 		widgets,
 		state,
 		children: /* @__PURE__ */ jsx(EditorMenuProvider, {
-			getView: useCallback(() => controller?.view ?? null, [controller]),
+			getView,
 			groups: groupsRef.current,
 			numItems,
 			searchPlaceholder,