notra-editor 0.8.1 → 0.8.3

package/dist/components/slash-dropdown-menu/slash-dropdown-menu.cjs

@@ -0,0 +1,294 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/slash-dropdown-menu/slash-dropdown-menu.tsx
+var slash_dropdown_menu_exports = {};
+__export(slash_dropdown_menu_exports, {
+  SlashDropdownMenu: () => SlashDropdownMenu
+});
+module.exports = __toCommonJS(slash_dropdown_menu_exports);
+var import_react = require("@floating-ui/react");
+var import_state = require("@tiptap/pm/state");
+var import_suggestion = require("@tiptap/suggestion");
+var import_react2 = require("react");
+var import_filter_slash_items = require("./filter-slash-items.cjs");
+var import_slash_image_popover = require("./slash-image-popover.cjs");
+var import_use_slash_items = require("./use-slash-items.cjs");
+var import_command = require("../ui/command.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FLOATING_Z_INDEX = 1e3;
+var MAX_HEIGHT = 384;
+function SlashDropdownMenu({ editor }) {
+  const [imageAnchor, setImageAnchor] = (0, import_react2.useState)(null);
+  const handleImageRequest = (0, import_react2.useCallback)(() => {
+    if (!editor) return;
+    const { from } = editor.state.selection;
+    const rect = editor.view.coordsAtPos(from);
+    const domRect = new DOMRect(
+      rect.left,
+      rect.top,
+      rect.right - rect.left,
+      rect.bottom - rect.top
+    );
+    setImageAnchor(domRect);
+  }, [editor]);
+  const getSlashItems = (0, import_use_slash_items.useSlashItems)({ onImageRequest: handleImageRequest });
+  const itemsCallback = (0, import_react2.useCallback)(
+    ({ query, editor: editor2 }) => (0, import_filter_slash_items.filterSlashItems)(getSlashItems(editor2), query),
+    [getSlashItems]
+  );
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const [decorationNode, setDecorationNode] = (0, import_react2.useState)(
+    null
+  );
+  const [filteredItems, setFilteredItems] = (0, import_react2.useState)([]);
+  const [selectedValue, setSelectedValue] = (0, import_react2.useState)("");
+  const close = (0, import_react2.useCallback)(() => {
+    setOpen(false);
+  }, []);
+  const middleware = (0, import_react2.useMemo)(
+    () => [
+      (0, import_react.offset)(8),
+      (0, import_react.flip)({ mainAxis: true, crossAxis: false }),
+      (0, import_react.shift)({ padding: 8 }),
+      (0, import_react.size)({
+        apply({ availableHeight, elements }) {
+          const next = Math.min(availableHeight, MAX_HEIGHT);
+          elements.floating.style.setProperty(
+            "--suggestion-menu-max-height",
+            `${next}px`
+          );
+        }
+      })
+    ],
+    []
+  );
+  const { refs, floatingStyles, context } = (0, import_react.useFloating)({
+    open,
+    strategy: "absolute",
+    placement: "bottom-start",
+    whileElementsMounted: import_react.autoUpdate,
+    middleware,
+    onOpenChange: (next) => {
+      if (!next) close();
+    }
+  });
+  (0, import_react2.useEffect)(() => {
+    refs.setReference(decorationNode);
+  }, [refs, decorationNode]);
+  const dismiss = (0, import_react.useDismiss)(context);
+  const { getFloatingProps } = (0, import_react.useInteractions)([dismiss]);
+  const itemsCallbackRef = (0, import_react2.useRef)(itemsCallback);
+  const filteredItemsRef = (0, import_react2.useRef)([]);
+  const selectedValueRef = (0, import_react2.useRef)("");
+  const commandRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    itemsCallbackRef.current = itemsCallback;
+  }, [itemsCallback]);
+  (0, import_react2.useEffect)(() => {
+    filteredItemsRef.current = filteredItems;
+  }, [filteredItems]);
+  (0, import_react2.useEffect)(() => {
+    selectedValueRef.current = selectedValue;
+  }, [selectedValue]);
+  const floatingDivRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    if (!selectedValue) return;
+    const root = floatingDivRef.current;
+    if (!root) return;
+    const target = root.querySelector(
+      '[data-selected="true"]'
+    );
+    target?.scrollIntoView({ block: "nearest" });
+  }, [selectedValue]);
+  const setFloatingNode = (0, import_react2.useCallback)(
+    (node) => {
+      floatingDivRef.current = node;
+      refs.setFloating(node);
+    },
+    [refs]
+  );
+  (0, import_react2.useEffect)(() => {
+    if (!editor || editor.isDestroyed) return;
+    const pluginKey = new import_state.PluginKey("slashDropdownMenu");
+    const plugin = (0, import_suggestion.Suggestion)({
+      editor,
+      char: "/",
+      pluginKey,
+      decorationClass: "notra-slash-decoration",
+      decorationContent: "Filter...",
+      items: ({ query, editor: editor2 }) => itemsCallbackRef.current({ query, editor: editor2 }),
+      allow: ({ state, range }) => {
+        const $from = state.doc.resolve(range.from);
+        for (let depth = $from.depth; depth > 0; depth--) {
+          const name = $from.node(depth).type.name;
+          if (name === "image" || name === "codeBlock") return false;
+        }
+        return true;
+      },
+      command: ({ editor: editor2, range, props }) => {
+        editor2.chain().focus().deleteRange(range).run();
+        props.onSelect({ editor: editor2, range });
+      },
+      render: () => ({
+        onStart: (props) => {
+          setDecorationNode(props.decorationNode ?? null);
+          setFilteredItems(props.items);
+          setSelectedValue(props.items[0]?.title ?? "");
+          commandRef.current = (item) => props.command(item);
+          setOpen(true);
+        },
+        onUpdate: (props) => {
+          setDecorationNode(props.decorationNode ?? null);
+          setFilteredItems(props.items);
+          setSelectedValue(
+            (prev) => props.items.some((i) => i.title === prev) ? prev : props.items[0]?.title ?? ""
+          );
+          commandRef.current = (item) => props.command(item);
+        },
+        onKeyDown: ({ event }) => {
+          const list = filteredItemsRef.current;
+          if (list.length === 0 && event.key !== "Escape") return false;
+          if (event.key === "ArrowDown") {
+            const currentIndex = list.findIndex(
+              (i) => i.title === selectedValueRef.current
+            );
+            const nextIndex = (currentIndex + 1) % list.length;
+            setSelectedValue(list[nextIndex].title);
+            return true;
+          }
+          if (event.key === "ArrowUp") {
+            const currentIndex = list.findIndex(
+              (i) => i.title === selectedValueRef.current
+            );
+            const prevIndex = (currentIndex - 1 + list.length) % list.length;
+            setSelectedValue(list[prevIndex].title);
+            return true;
+          }
+          if (event.key === "Enter") {
+            const item = list.find((i) => i.title === selectedValueRef.current);
+            if (item && commandRef.current) {
+              commandRef.current(item);
+            }
+            return true;
+          }
+          if (event.key === "Escape") {
+            close();
+            return true;
+          }
+          return false;
+        },
+        onExit: () => {
+          setDecorationNode(null);
+          setFilteredItems([]);
+          setSelectedValue("");
+          commandRef.current = null;
+          setOpen(false);
+        }
+      })
+    });
+    editor.registerPlugin(plugin, (newPlugin, currentPlugins) => [
+      newPlugin,
+      ...currentPlugins
+    ]);
+    return () => {
+      if (!editor.isDestroyed) {
+        editor.unregisterPlugin(pluginKey);
+      }
+    };
+  }, [editor, close]);
+  const grouped = (0, import_react2.useMemo)(() => groupByLabel(filteredItems), [filteredItems]);
+  const isMounted = open && decorationNode !== null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    isMounted && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: setFloatingNode,
+        className: "nt:rounded-xl nt:bg-popover nt:text-popover-foreground nt:shadow-md nt:ring-1 nt:ring-foreground/10 nt:outline-hidden",
+        "data-selector": "notra-slash-dropdown-menu",
+        style: { ...floatingStyles, zIndex: FLOATING_Z_INDEX },
+        ...getFloatingProps(),
+        onPointerDown: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_command.Command,
+          {
+            disablePointerSelection: true,
+            label: "Slash command menu",
+            shouldFilter: false,
+            value: selectedValue,
+            onValueChange: setSelectedValue,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_command.CommandList,
+              {
+                style: {
+                  maxHeight: "var(--suggestion-menu-max-height)"
+                },
+                children: grouped.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.Fragment, { children: [
+                  groupIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_command.CommandSeparator, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_command.CommandGroup, { heading: group.label || void 0, children: group.items.map((item) => {
+                    const Badge = item.badge;
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      import_command.CommandItem,
+                      {
+                        value: item.title,
+                        onSelect: () => commandRef.current?.(item),
+                        children: [
+                          Badge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, { className: "nt:size-4" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nt:flex-1 nt:text-left", children: item.title })
+                        ]
+                      },
+                      item.title
+                    );
+                  }) })
+                ] }, `${group.label}-${groupIndex}`))
+              }
+            )
+          }
+        )
+      }
+    ),
+    imageAnchor && editor && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_slash_image_popover.SlashImagePopover,
+      {
+        anchorRect: imageAnchor,
+        editor,
+        onClose: () => setImageAnchor(null)
+      }
+    )
+  ] });
+}
+function groupByLabel(items) {
+  const result = [];
+  for (const item of items) {
+    const label = item.group ?? "";
+    const last = result[result.length - 1];
+    if (last && last.label === label) {
+      last.items.push(item);
+    } else {
+      result.push({ label, items: [item] });
+    }
+  }
+  return result;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SlashDropdownMenu
+});
+//# sourceMappingURL=slash-dropdown-menu.cjs.map

package/dist/components/slash-dropdown-menu/slash-dropdown-menu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/slash-dropdown-menu/slash-dropdown-menu.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tautoUpdate,\n\tflip,\n\toffset,\n\tshift,\n\tsize,\n\tuseDismiss,\n\tuseFloating,\n\tuseInteractions\n} from '@floating-ui/react';\nimport { PluginKey } from '@tiptap/pm/state';\nimport { Suggestion } from '@tiptap/suggestion';\nimport {\n\tFragment,\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState\n} from 'react';\n\nimport { filterSlashItems } from './filter-slash-items.js';\nimport { SlashImagePopover } from './slash-image-popover.js';\nimport { useSlashItems } from './use-slash-items.js';\nimport {\n\tCommand,\n\tCommandGroup,\n\tCommandItem,\n\tCommandList,\n\tCommandSeparator\n} from '../ui/command.js';\n\nimport type { SlashItem } from './types.js';\nimport type { Editor } from '@tiptap/core';\nimport type {\n\tSuggestionKeyDownProps,\n\tSuggestionProps\n} from '@tiptap/suggestion';\n\nexport interface SlashDropdownMenuProps {\n\teditor: Editor | null;\n}\n\nconst FLOATING_Z_INDEX = 1000;\nconst MAX_HEIGHT = 384;\n\nexport function SlashDropdownMenu({ editor }: SlashDropdownMenuProps) {\n\tconst [imageAnchor, setImageAnchor] = useState<DOMRect | null>(null);\n\n\tconst handleImageRequest = useCallback(() => {\n\t\tif (!editor) return;\n\n\t\tconst { from } = editor.state.selection;\n\t\tconst rect = editor.view.coordsAtPos(from);\n\t\tconst domRect = new DOMRect(\n\t\t\trect.left,\n\t\t\trect.top,\n\t\t\trect.right - rect.left,\n\t\t\trect.bottom - rect.top\n\t\t);\n\n\t\tsetImageAnchor(domRect);\n\t}, [editor]);\n\n\tconst getSlashItems = useSlashItems({ onImageRequest: handleImageRequest });\n\n\tconst itemsCallback = useCallback(\n\t\t({ query, editor }: { query: string; editor: Editor }) =>\n\t\t\tfilterSlashItems(getSlashItems(editor), query),\n\t\t[getSlashItems]\n\t);\n\n\tconst [open, setOpen] = useState(false);\n\tconst [decorationNode, setDecorationNode] = useState<HTMLElement | null>(\n\t\tnull\n\t);\n\tconst [filteredItems, setFilteredItems] = useState<SlashItem[]>([]);\n\tconst [selectedValue, setSelectedValue] = useState<string>('');\n\n\tconst close = useCallback(() => {\n\t\tsetOpen(false);\n\t}, []);\n\n\tconst middleware = useMemo(\n\t\t() => [\n\t\t\toffset(8),\n\t\t\tflip({ mainAxis: true, crossAxis: false }),\n\t\t\tshift({ padding: 8 }),\n\t\t\tsize({\n\t\t\t\tapply({ availableHeight, elements }) {\n\t\t\t\t\tconst next = Math.min(availableHeight, MAX_HEIGHT);\n\n\t\t\t\t\telements.floating.style.setProperty(\n\t\t\t\t\t\t'--suggestion-menu-max-height',\n\t\t\t\t\t\t`${next}px`\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t})\n\t\t],\n\t\t[]\n\t);\n\n\tconst { refs, floatingStyles, context } = useFloating({\n\t\topen,\n\t\tstrategy: 'absolute',\n\t\tplacement: 'bottom-start',\n\t\twhileElementsMounted: autoUpdate,\n\t\tmiddleware,\n\t\tonOpenChange: (next) => {\n\t\t\tif (!next) close();\n\t\t}\n\t});\n\n\tuseEffect(() => {\n\t\trefs.setReference(decorationNode);\n\t}, [refs, decorationNode]);\n\n\tconst dismiss = useDismiss(context);\n\tconst { getFloatingProps } = useInteractions([dismiss]);\n\n\t// Stable refs for the plugin, which is registered once per editor instance.\n\tconst itemsCallbackRef = useRef(itemsCallback);\n\tconst filteredItemsRef = useRef<SlashItem[]>([]);\n\tconst selectedValueRef = useRef('');\n\tconst commandRef = useRef<((item: SlashItem) => void) | null>(null);\n\n\tuseEffect(() => {\n\t\titemsCallbackRef.current = itemsCallback;\n\t}, [itemsCallback]);\n\n\tuseEffect(() => {\n\t\tfilteredItemsRef.current = filteredItems;\n\t}, [filteredItems]);\n\n\tuseEffect(() => {\n\t\tselectedValueRef.current = selectedValue;\n\t}, [selectedValue]);\n\n\t// Keep highlighted item visible when arrow keys move past the viewport.\n\tconst floatingDivRef = useRef<HTMLDivElement | null>(null);\n\n\tuseEffect(() => {\n\t\tif (!selectedValue) return;\n\n\t\tconst root = floatingDivRef.current;\n\n\t\tif (!root) return;\n\n\t\tconst target = root.querySelector(\n\t\t\t'[data-selected=\"true\"]'\n\t\t) as HTMLElement | null;\n\n\t\ttarget?.scrollIntoView({ block: 'nearest' });\n\t}, [selectedValue]);\n\n\tconst setFloatingNode = useCallback(\n\t\t(node: HTMLDivElement | null) => {\n\t\t\tfloatingDivRef.current = node;\n\t\t\trefs.setFloating(node);\n\t\t},\n\t\t[refs]\n\t);\n\n\tuseEffect(() => {\n\t\tif (!editor || editor.isDestroyed) return;\n\n\t\tconst pluginKey = new PluginKey('slashDropdownMenu');\n\n\t\tconst plugin = Suggestion<SlashItem>({\n\t\t\teditor,\n\t\t\tchar: '/',\n\t\t\tpluginKey,\n\t\t\tdecorationClass: 'notra-slash-decoration',\n\t\t\tdecorationContent: 'Filter...',\n\n\t\t\titems: ({ query, editor }) => itemsCallbackRef.current({ query, editor }),\n\n\t\t\tallow: ({ state, range }) => {\n\t\t\t\tconst $from = state.doc.resolve(range.from);\n\n\t\t\t\tfor (let depth = $from.depth; depth > 0; depth--) {\n\t\t\t\t\tconst name = $from.node(depth).type.name;\n\n\t\t\t\t\tif (name === 'image' || name === 'codeBlock') return false;\n\t\t\t\t}\n\n\t\t\t\treturn true;\n\t\t\t},\n\n\t\t\tcommand: ({ editor, range, props }) => {\n\t\t\t\teditor.chain().focus().deleteRange(range).run();\n\t\t\t\tprops.onSelect({ editor, range });\n\t\t\t},\n\n\t\t\trender: () => ({\n\t\t\t\tonStart: (props: SuggestionProps<SlashItem>) => {\n\t\t\t\t\tsetDecorationNode((props.decorationNode as HTMLElement) ?? null);\n\t\t\t\t\tsetFilteredItems(props.items);\n\t\t\t\t\tsetSelectedValue(props.items[0]?.title ?? '');\n\t\t\t\t\tcommandRef.current = (item) => props.command(item);\n\t\t\t\t\tsetOpen(true);\n\t\t\t\t},\n\t\t\t\tonUpdate: (props: SuggestionProps<SlashItem>) => {\n\t\t\t\t\tsetDecorationNode((props.decorationNode as HTMLElement) ?? null);\n\t\t\t\t\tsetFilteredItems(props.items);\n\t\t\t\t\tsetSelectedValue((prev) =>\n\t\t\t\t\t\tprops.items.some((i) => i.title === prev)\n\t\t\t\t\t\t\t? prev\n\t\t\t\t\t\t\t: (props.items[0]?.title ?? '')\n\t\t\t\t\t);\n\t\t\t\t\tcommandRef.current = (item) => props.command(item);\n\t\t\t\t},\n\t\t\t\tonKeyDown: ({ event }: SuggestionKeyDownProps) => {\n\t\t\t\t\tconst list = filteredItemsRef.current;\n\n\t\t\t\t\tif (list.length === 0 && event.key !== 'Escape') return false;\n\n\t\t\t\t\tif (event.key === 'ArrowDown') {\n\t\t\t\t\t\tconst currentIndex = list.findIndex(\n\t\t\t\t\t\t\t(i) => i.title === selectedValueRef.current\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst nextIndex = (currentIndex + 1) % list.length;\n\n\t\t\t\t\t\tsetSelectedValue(list[nextIndex].title);\n\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (event.key === 'ArrowUp') {\n\t\t\t\t\t\tconst currentIndex = list.findIndex(\n\t\t\t\t\t\t\t(i) => i.title === selectedValueRef.current\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst prevIndex = (currentIndex - 1 + list.length) % list.length;\n\n\t\t\t\t\t\tsetSelectedValue(list[prevIndex].title);\n\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (event.key === 'Enter') {\n\t\t\t\t\t\tconst item = list.find((i) => i.title === selectedValueRef.current);\n\n\t\t\t\t\t\tif (item && commandRef.current) {\n\t\t\t\t\t\t\tcommandRef.current(item);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (event.key === 'Escape') {\n\t\t\t\t\t\tclose();\n\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn false;\n\t\t\t\t},\n\t\t\t\tonExit: () => {\n\t\t\t\t\tsetDecorationNode(null);\n\t\t\t\t\tsetFilteredItems([]);\n\t\t\t\t\tsetSelectedValue('');\n\t\t\t\t\tcommandRef.current = null;\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}\n\t\t\t})\n\t\t});\n\n\t\t// Prepend so our handleKeyDown runs before the base keymap; otherwise\n\t\t// Enter would be consumed by the paragraph-split handler before our\n\t\t// suggestion onKeyDown could see it.\n\t\teditor.registerPlugin(plugin, (newPlugin, currentPlugins) => [\n\t\t\tnewPlugin,\n\t\t\t...currentPlugins\n\t\t]);\n\n\t\treturn () => {\n\t\t\tif (!editor.isDestroyed) {\n\t\t\t\teditor.unregisterPlugin(pluginKey);\n\t\t\t}\n\t\t};\n\t}, [editor, close]);\n\n\tconst grouped = useMemo(() => groupByLabel(filteredItems), [filteredItems]);\n\n\tconst isMounted = open && decorationNode !== null;\n\n\treturn (\n\t\t<>\n\t\t\t{isMounted && (\n\t\t\t\t<div\n\t\t\t\t\tref={setFloatingNode}\n\t\t\t\t\tclassName=\"nt:rounded-xl nt:bg-popover nt:text-popover-foreground nt:shadow-md nt:ring-1 nt:ring-foreground/10 nt:outline-hidden\"\n\t\t\t\t\tdata-selector=\"notra-slash-dropdown-menu\"\n\t\t\t\t\tstyle={{ ...floatingStyles, zIndex: FLOATING_Z_INDEX }}\n\t\t\t\t\t{...getFloatingProps()}\n\t\t\t\t\tonPointerDown={(e) => e.preventDefault()}\n\t\t\t\t>\n\t\t\t\t\t<Command\n\t\t\t\t\t\tdisablePointerSelection\n\t\t\t\t\t\tlabel=\"Slash command menu\"\n\t\t\t\t\t\tshouldFilter={false}\n\t\t\t\t\t\tvalue={selectedValue}\n\t\t\t\t\t\tonValueChange={setSelectedValue}\n\t\t\t\t\t>\n\t\t\t\t\t\t<CommandList\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tmaxHeight: 'var(--suggestion-menu-max-height)'\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{grouped.map((group, groupIndex) => (\n\t\t\t\t\t\t\t\t<Fragment key={`${group.label}-${groupIndex}`}>\n\t\t\t\t\t\t\t\t\t{groupIndex > 0 && <CommandSeparator />}\n\t\t\t\t\t\t\t\t\t<CommandGroup heading={group.label || undefined}>\n\t\t\t\t\t\t\t\t\t\t{group.items.map((item) => {\n\t\t\t\t\t\t\t\t\t\t\tconst Badge = item.badge;\n\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<CommandItem\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={item.title}\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={item.title}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonSelect={() => commandRef.current?.(item)}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{Badge && <Badge className=\"nt:size-4\" />}\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"nt:flex-1 nt:text-left\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t</CommandItem>\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</CommandGroup>\n\t\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</CommandList>\n\t\t\t\t\t</Command>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{imageAnchor && editor && (\n\t\t\t\t<SlashImagePopover\n\t\t\t\t\tanchorRect={imageAnchor}\n\t\t\t\t\teditor={editor}\n\t\t\t\t\tonClose={() => setImageAnchor(null)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\ninterface GroupedSlashItems {\n\tlabel: string;\n\titems: SlashItem[];\n}\n\nfunction groupByLabel(items: SlashItem[]): GroupedSlashItems[] {\n\tconst result: GroupedSlashItems[] = [];\n\n\tfor (const item of items) {\n\t\tconst label = item.group ?? '';\n\t\tconst last = result[result.length - 1];\n\n\t\tif (last && last.label === label) {\n\t\t\tlast.items.push(item);\n\t\t} else {\n\t\t\tresult.push({ label, items: [item] });\n\t\t}\n\t}\n\n\treturn result;\n}\n"],"mappings":"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","names":["import_react","editor"]}

package/dist/components/slash-dropdown-menu/slash-dropdown-menu.d.cts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Editor } from '@tiptap/core';
+
+interface SlashDropdownMenuProps {
+    editor: Editor | null;
+}
+declare function SlashDropdownMenu({ editor }: SlashDropdownMenuProps): react_jsx_runtime.JSX.Element;
+
+export { SlashDropdownMenu, type SlashDropdownMenuProps };

package/dist/components/slash-dropdown-menu/slash-dropdown-menu.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Editor } from '@tiptap/core';
+
+interface SlashDropdownMenuProps {
+    editor: Editor | null;
+}
+declare function SlashDropdownMenu({ editor }: SlashDropdownMenuProps): react_jsx_runtime.JSX.Element;
+
+export { SlashDropdownMenu, type SlashDropdownMenuProps };

package/dist/components/slash-dropdown-menu/slash-dropdown-menu.mjs

@@ -0,0 +1,292 @@
+"use client";
+
+// src/components/slash-dropdown-menu/slash-dropdown-menu.tsx
+import {
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  size,
+  useDismiss,
+  useFloating,
+  useInteractions
+} from "@floating-ui/react";
+import { PluginKey } from "@tiptap/pm/state";
+import { Suggestion } from "@tiptap/suggestion";
+import {
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { filterSlashItems } from "./filter-slash-items.mjs";
+import { SlashImagePopover } from "./slash-image-popover.mjs";
+import { useSlashItems } from "./use-slash-items.mjs";
+import {
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+  CommandSeparator
+} from "../ui/command.mjs";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+var FLOATING_Z_INDEX = 1e3;
+var MAX_HEIGHT = 384;
+function SlashDropdownMenu({ editor }) {
+  const [imageAnchor, setImageAnchor] = useState(null);
+  const handleImageRequest = useCallback(() => {
+    if (!editor) return;
+    const { from } = editor.state.selection;
+    const rect = editor.view.coordsAtPos(from);
+    const domRect = new DOMRect(
+      rect.left,
+      rect.top,
+      rect.right - rect.left,
+      rect.bottom - rect.top
+    );
+    setImageAnchor(domRect);
+  }, [editor]);
+  const getSlashItems = useSlashItems({ onImageRequest: handleImageRequest });
+  const itemsCallback = useCallback(
+    ({ query, editor: editor2 }) => filterSlashItems(getSlashItems(editor2), query),
+    [getSlashItems]
+  );
+  const [open, setOpen] = useState(false);
+  const [decorationNode, setDecorationNode] = useState(
+    null
+  );
+  const [filteredItems, setFilteredItems] = useState([]);
+  const [selectedValue, setSelectedValue] = useState("");
+  const close = useCallback(() => {
+    setOpen(false);
+  }, []);
+  const middleware = useMemo(
+    () => [
+      offset(8),
+      flip({ mainAxis: true, crossAxis: false }),
+      shift({ padding: 8 }),
+      size({
+        apply({ availableHeight, elements }) {
+          const next = Math.min(availableHeight, MAX_HEIGHT);
+          elements.floating.style.setProperty(
+            "--suggestion-menu-max-height",
+            `${next}px`
+          );
+        }
+      })
+    ],
+    []
+  );
+  const { refs, floatingStyles, context } = useFloating({
+    open,
+    strategy: "absolute",
+    placement: "bottom-start",
+    whileElementsMounted: autoUpdate,
+    middleware,
+    onOpenChange: (next) => {
+      if (!next) close();
+    }
+  });
+  useEffect(() => {
+    refs.setReference(decorationNode);
+  }, [refs, decorationNode]);
+  const dismiss = useDismiss(context);
+  const { getFloatingProps } = useInteractions([dismiss]);
+  const itemsCallbackRef = useRef(itemsCallback);
+  const filteredItemsRef = useRef([]);
+  const selectedValueRef = useRef("");
+  const commandRef = useRef(null);
+  useEffect(() => {
+    itemsCallbackRef.current = itemsCallback;
+  }, [itemsCallback]);
+  useEffect(() => {
+    filteredItemsRef.current = filteredItems;
+  }, [filteredItems]);
+  useEffect(() => {
+    selectedValueRef.current = selectedValue;
+  }, [selectedValue]);
+  const floatingDivRef = useRef(null);
+  useEffect(() => {
+    if (!selectedValue) return;
+    const root = floatingDivRef.current;
+    if (!root) return;
+    const target = root.querySelector(
+      '[data-selected="true"]'
+    );
+    target?.scrollIntoView({ block: "nearest" });
+  }, [selectedValue]);
+  const setFloatingNode = useCallback(
+    (node) => {
+      floatingDivRef.current = node;
+      refs.setFloating(node);
+    },
+    [refs]
+  );
+  useEffect(() => {
+    if (!editor || editor.isDestroyed) return;
+    const pluginKey = new PluginKey("slashDropdownMenu");
+    const plugin = Suggestion({
+      editor,
+      char: "/",
+      pluginKey,
+      decorationClass: "notra-slash-decoration",
+      decorationContent: "Filter...",
+      items: ({ query, editor: editor2 }) => itemsCallbackRef.current({ query, editor: editor2 }),
+      allow: ({ state, range }) => {
+        const $from = state.doc.resolve(range.from);
+        for (let depth = $from.depth; depth > 0; depth--) {
+          const name = $from.node(depth).type.name;
+          if (name === "image" || name === "codeBlock") return false;
+        }
+        return true;
+      },
+      command: ({ editor: editor2, range, props }) => {
+        editor2.chain().focus().deleteRange(range).run();
+        props.onSelect({ editor: editor2, range });
+      },
+      render: () => ({
+        onStart: (props) => {
+          setDecorationNode(props.decorationNode ?? null);
+          setFilteredItems(props.items);
+          setSelectedValue(props.items[0]?.title ?? "");
+          commandRef.current = (item) => props.command(item);
+          setOpen(true);
+        },
+        onUpdate: (props) => {
+          setDecorationNode(props.decorationNode ?? null);
+          setFilteredItems(props.items);
+          setSelectedValue(
+            (prev) => props.items.some((i) => i.title === prev) ? prev : props.items[0]?.title ?? ""
+          );
+          commandRef.current = (item) => props.command(item);
+        },
+        onKeyDown: ({ event }) => {
+          const list = filteredItemsRef.current;
+          if (list.length === 0 && event.key !== "Escape") return false;
+          if (event.key === "ArrowDown") {
+            const currentIndex = list.findIndex(
+              (i) => i.title === selectedValueRef.current
+            );
+            const nextIndex = (currentIndex + 1) % list.length;
+            setSelectedValue(list[nextIndex].title);
+            return true;
+          }
+          if (event.key === "ArrowUp") {
+            const currentIndex = list.findIndex(
+              (i) => i.title === selectedValueRef.current
+            );
+            const prevIndex = (currentIndex - 1 + list.length) % list.length;
+            setSelectedValue(list[prevIndex].title);
+            return true;
+          }
+          if (event.key === "Enter") {
+            const item = list.find((i) => i.title === selectedValueRef.current);
+            if (item && commandRef.current) {
+              commandRef.current(item);
+            }
+            return true;
+          }
+          if (event.key === "Escape") {
+            close();
+            return true;
+          }
+          return false;
+        },
+        onExit: () => {
+          setDecorationNode(null);
+          setFilteredItems([]);
+          setSelectedValue("");
+          commandRef.current = null;
+          setOpen(false);
+        }
+      })
+    });
+    editor.registerPlugin(plugin, (newPlugin, currentPlugins) => [
+      newPlugin,
+      ...currentPlugins
+    ]);
+    return () => {
+      if (!editor.isDestroyed) {
+        editor.unregisterPlugin(pluginKey);
+      }
+    };
+  }, [editor, close]);
+  const grouped = useMemo(() => groupByLabel(filteredItems), [filteredItems]);
+  const isMounted = open && decorationNode !== null;
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    isMounted && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setFloatingNode,
+        className: "nt:rounded-xl nt:bg-popover nt:text-popover-foreground nt:shadow-md nt:ring-1 nt:ring-foreground/10 nt:outline-hidden",
+        "data-selector": "notra-slash-dropdown-menu",
+        style: { ...floatingStyles, zIndex: FLOATING_Z_INDEX },
+        ...getFloatingProps(),
+        onPointerDown: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsx(
+          Command,
+          {
+            disablePointerSelection: true,
+            label: "Slash command menu",
+            shouldFilter: false,
+            value: selectedValue,
+            onValueChange: setSelectedValue,
+            children: /* @__PURE__ */ jsx(
+              CommandList,
+              {
+                style: {
+                  maxHeight: "var(--suggestion-menu-max-height)"
+                },
+                children: grouped.map((group, groupIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                  groupIndex > 0 && /* @__PURE__ */ jsx(CommandSeparator, {}),
+                  /* @__PURE__ */ jsx(CommandGroup, { heading: group.label || void 0, children: group.items.map((item) => {
+                    const Badge = item.badge;
+                    return /* @__PURE__ */ jsxs(
+                      CommandItem,
+                      {
+                        value: item.title,
+                        onSelect: () => commandRef.current?.(item),
+                        children: [
+                          Badge && /* @__PURE__ */ jsx(Badge, { className: "nt:size-4" }),
+                          /* @__PURE__ */ jsx("span", { className: "nt:flex-1 nt:text-left", children: item.title })
+                        ]
+                      },
+                      item.title
+                    );
+                  }) })
+                ] }, `${group.label}-${groupIndex}`))
+              }
+            )
+          }
+        )
+      }
+    ),
+    imageAnchor && editor && /* @__PURE__ */ jsx(
+      SlashImagePopover,
+      {
+        anchorRect: imageAnchor,
+        editor,
+        onClose: () => setImageAnchor(null)
+      }
+    )
+  ] });
+}
+function groupByLabel(items) {
+  const result = [];
+  for (const item of items) {
+    const label = item.group ?? "";
+    const last = result[result.length - 1];
+    if (last && last.label === label) {
+      last.items.push(item);
+    } else {
+      result.push({ label, items: [item] });
+    }
+  }
+  return result;
+}
+export {
+  SlashDropdownMenu
+};
+//# sourceMappingURL=slash-dropdown-menu.mjs.map