@slash-editor/react 0.0.2 → 0.0.7

package/dist/index.d.mts

@@ -23,6 +23,29 @@ interface UseSlashEditorOptions extends Omit<UseEditorOptions, "extensions"> {
  */
 declare function useSlashEditor(options?: UseSlashEditorOptions): Editor | null;
 //#endregion
+//#region src/use-active-item-scroll.d.ts
+interface ActiveItemScrollOptions {
+  /** Attribute carrying an item's id on the list rows. @default "data-value" */
+  attribute?: string;
+}
+/**
+ * Keeps the highlighted row of a suggestion list visible.
+ *
+ * Command palettes scroll themselves only while they own the keyboard. Here
+ * the editor never loses focus — the suggestion plugin moves the highlight and
+ * the list only receives a controlled value — so nothing scrolls unless the
+ * consumer does it. `block: "nearest"` makes this inert for an already visible
+ * row, so pointer hover never fights the scroll position.
+ *
+ * Returns a ref callback for the scroll container:
+ *
+ * ```tsx
+ * const listRef = useActiveItemScroll(menu.activeItem?.id);
+ * <CommandList ref={listRef}>…</CommandList>
+ * ```
+ */
+declare function useActiveItemScroll(activeId: string | null | undefined, options?: ActiveItemScrollOptions): (node: HTMLElement | null) => void;
+//#endregion
 //#region src/use-block-drag.d.ts
 /** Minimal anchor accepted by floating-ui based popovers and absolutely positioned elements. */
 interface BlockDragAnchor {
@@ -205,4 +228,4 @@ interface SlashMenu extends SlashMenuState {
  */
 declare function useSlashMenu(editor: Editor | null): SlashMenu;
 //#endregion
-export { type BlockDrag, type BlockDragAnchor, type BubbleToolbar, type BubbleToolbarAnchor, type BubbleToolbarItem, type Comments, EditorContent, EditorContext, EditorProvider, type LinkEditor, type LinkEditorAnchor, type MentionMenu, type MentionMenuAnchor, type PresencePeer, type PresenceProvider, type SlashMenu, type SlashMenuAnchor, type UseCommentsOptions, type UseSlashEditorOptions, useBlockDrag, useBubbleToolbar, useComments, useCurrentEditor, useEditorState, useLinkEditor, useMention, usePresence, useSlashEditor, useSlashMenu };
+export { type ActiveItemScrollOptions, type BlockDrag, type BlockDragAnchor, type BubbleToolbar, type BubbleToolbarAnchor, type BubbleToolbarItem, type Comments, EditorContent, EditorContext, EditorProvider, type LinkEditor, type LinkEditorAnchor, type MentionMenu, type MentionMenuAnchor, type PresencePeer, type PresenceProvider, type SlashMenu, type SlashMenuAnchor, type UseCommentsOptions, type UseSlashEditorOptions, useActiveItemScroll, useBlockDrag, useBubbleToolbar, useComments, useCurrentEditor, useEditorState, useLinkEditor, useMention, usePresence, useSlashEditor, useSlashMenu };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { EditorContent, EditorContext, EditorProvider, useCurrentEditor, useEditor, useEditorState } from "@tiptap/react";
 import { createBlockKit } from "@slash-editor/core";
-import { useCallback, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 //#region src/use-slash-editor.ts
 /**
 * Creates an editor with the slash-editor baseline schema.
@@ -23,6 +23,41 @@ function useSlashEditor(options = {}) {
 	});
 }
 //#endregion
+//#region src/use-active-item-scroll.ts
+/**
+* Keeps the highlighted row of a suggestion list visible.
+*
+* Command palettes scroll themselves only while they own the keyboard. Here
+* the editor never loses focus — the suggestion plugin moves the highlight and
+* the list only receives a controlled value — so nothing scrolls unless the
+* consumer does it. `block: "nearest"` makes this inert for an already visible
+* row, so pointer hover never fights the scroll position.
+*
+* Returns a ref callback for the scroll container:
+*
+* ```tsx
+* const listRef = useActiveItemScroll(menu.activeItem?.id);
+* <CommandList ref={listRef}>…</CommandList>
+* ```
+*/
+function useActiveItemScroll(activeId, options = {}) {
+	const { attribute = "data-value" } = options;
+	const container = useRef(null);
+	const listRef = useCallback((node) => {
+		container.current = node;
+	}, []);
+	useLayoutEffect(() => {
+		const node = container.current;
+		if (!node || !activeId || !node.isConnected) return;
+		const item = node.querySelector(`[${attribute}="${CSS.escape(activeId)}"]`);
+		if (!item) return;
+		const group = item.parentElement;
+		if (group?.firstElementChild === item) group.parentElement?.firstElementChild?.scrollIntoView({ block: "nearest" });
+		item.scrollIntoView({ block: "nearest" });
+	}, [activeId, attribute]);
+	return listRef;
+}
+//#endregion
 //#region src/use-block-drag.ts
 const CLOSED$4 = {
 	hovered: null,
@@ -367,4 +402,4 @@ function useSlashMenu(editor) {
 	};
 }
 //#endregion
-export { EditorContent, EditorContext, EditorProvider, useBlockDrag, useBubbleToolbar, useComments, useCurrentEditor, useEditorState, useLinkEditor, useMention, usePresence, useSlashEditor, useSlashMenu };
+export { EditorContent, EditorContext, EditorProvider, useActiveItemScroll, useBlockDrag, useBubbleToolbar, useComments, useCurrentEditor, useEditorState, useLinkEditor, useMention, usePresence, useSlashEditor, useSlashMenu };

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@slash-editor/react",
-  "version": "0.0.2",
+  "version": "0.0.7",
   "description": "Headless React bindings for slash-editor: provider, hooks, unstyled primitives.",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/buiducnhat/slash-editor.git",
+    "directory": "packages/react"
+  },
   "files": [
     "dist"
   ],
@@ -19,7 +24,7 @@
     "dev": "vp pack --watch"
   },
   "dependencies": {
-    "@slash-editor/core": "0.0.2"
+    "@slash-editor/core": "0.0.7"
   },
   "devDependencies": {
     "@tiptap/core": "^3.31.3",