notra-editor 0.8.2 → 0.8.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/slash-dropdown-menu/filter-slash-items.cjs +46 -0
- package/dist/components/slash-dropdown-menu/filter-slash-items.cjs.map +1 -0
- package/dist/components/slash-dropdown-menu/filter-slash-items.d.cts +15 -0
- package/dist/components/slash-dropdown-menu/filter-slash-items.d.ts +15 -0
- package/dist/components/slash-dropdown-menu/filter-slash-items.mjs +21 -0
- package/dist/components/slash-dropdown-menu/filter-slash-items.mjs.map +1 -0
- package/dist/components/slash-dropdown-menu/slash-dropdown-menu.cjs +228 -85
- package/dist/components/slash-dropdown-menu/slash-dropdown-menu.cjs.map +1 -1
- package/dist/components/slash-dropdown-menu/slash-dropdown-menu.mjs +249 -84
- package/dist/components/slash-dropdown-menu/slash-dropdown-menu.mjs.map +1 -1
- package/dist/components/{suggestion-menu/suggestion-menu-types.cjs → slash-dropdown-menu/types.cjs} +4 -4
- package/dist/components/slash-dropdown-menu/types.cjs.map +1 -0
- package/dist/components/{suggestion-menu/suggestion-menu-types.d.cts → slash-dropdown-menu/types.d.cts} +2 -2
- package/dist/components/{suggestion-menu/suggestion-menu-types.d.ts → slash-dropdown-menu/types.d.ts} +2 -2
- package/dist/components/slash-dropdown-menu/types.mjs +1 -0
- package/dist/components/slash-dropdown-menu/use-slash-items.cjs.map +1 -1
- package/dist/components/slash-dropdown-menu/use-slash-items.d.cts +2 -2
- package/dist/components/slash-dropdown-menu/use-slash-items.d.ts +2 -2
- package/dist/components/slash-dropdown-menu/use-slash-items.mjs.map +1 -1
- package/dist/components/ui/command.cjs +1 -1
- package/dist/components/ui/command.cjs.map +1 -1
- package/dist/components/ui/command.mjs +1 -1
- package/dist/components/ui/command.mjs.map +1 -1
- package/dist/components/ui/input-group.d.cts +1 -1
- package/dist/components/ui/input-group.d.ts +1 -1
- package/dist/styles/globals.css +1 -2
- package/dist/themes/default/editor.css +18 -6
- package/package.json +2 -1
- package/dist/components/suggestion-menu/filter-suggestion-items.cjs +0 -57
- package/dist/components/suggestion-menu/filter-suggestion-items.cjs.map +0 -1
- package/dist/components/suggestion-menu/filter-suggestion-items.d.cts +0 -6
- package/dist/components/suggestion-menu/filter-suggestion-items.d.ts +0 -6
- package/dist/components/suggestion-menu/filter-suggestion-items.mjs +0 -32
- package/dist/components/suggestion-menu/filter-suggestion-items.mjs.map +0 -1
- package/dist/components/suggestion-menu/suggestion-menu-types.cjs.map +0 -1
- package/dist/components/suggestion-menu/suggestion-menu-types.mjs +0 -1
- package/dist/components/suggestion-menu/suggestion-menu.cjs +0 -205
- package/dist/components/suggestion-menu/suggestion-menu.cjs.map +0 -1
- package/dist/components/suggestion-menu/suggestion-menu.d.cts +0 -27
- package/dist/components/suggestion-menu/suggestion-menu.d.ts +0 -27
- package/dist/components/suggestion-menu/suggestion-menu.mjs +0 -181
- package/dist/components/suggestion-menu/suggestion-menu.mjs.map +0 -1
- package/dist/hooks/use-floating-element.cjs +0 -55
- package/dist/hooks/use-floating-element.cjs.map +0 -1
- package/dist/hooks/use-floating-element.d.cts +0 -21
- package/dist/hooks/use-floating-element.d.ts +0 -21
- package/dist/hooks/use-floating-element.mjs +0 -35
- package/dist/hooks/use-floating-element.mjs.map +0 -1
- /package/dist/components/{suggestion-menu/suggestion-menu-types.mjs.map → slash-dropdown-menu/types.mjs.map} +0 -0
|
@@ -1,14 +1,39 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
// src/components/slash-dropdown-menu/slash-dropdown-menu.tsx
|
|
4
|
-
import {
|
|
4
|
+
import {
|
|
5
|
+
autoUpdate,
|
|
6
|
+
flip,
|
|
7
|
+
offset,
|
|
8
|
+
shift,
|
|
9
|
+
size,
|
|
10
|
+
useDismiss,
|
|
11
|
+
useFloating,
|
|
12
|
+
useInteractions
|
|
13
|
+
} from "@floating-ui/react";
|
|
14
|
+
import { PluginKey } from "@tiptap/pm/state";
|
|
15
|
+
import { Suggestion } from "@tiptap/suggestion";
|
|
16
|
+
import {
|
|
17
|
+
Fragment,
|
|
18
|
+
useCallback,
|
|
19
|
+
useEffect,
|
|
20
|
+
useMemo,
|
|
21
|
+
useRef,
|
|
22
|
+
useState
|
|
23
|
+
} from "react";
|
|
24
|
+
import { filterSlashItems } from "./filter-slash-items.mjs";
|
|
5
25
|
import { SlashImagePopover } from "./slash-image-popover.mjs";
|
|
6
26
|
import { useSlashItems } from "./use-slash-items.mjs";
|
|
7
|
-
import {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
27
|
+
import {
|
|
28
|
+
Command,
|
|
29
|
+
CommandGroup,
|
|
30
|
+
CommandItem,
|
|
31
|
+
CommandList,
|
|
32
|
+
CommandSeparator
|
|
33
|
+
} from "../ui/command.mjs";
|
|
34
|
+
import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
|
|
35
|
+
var FLOATING_Z_INDEX = 1e3;
|
|
36
|
+
var MAX_HEIGHT = 384;
|
|
12
37
|
function SlashDropdownMenu({ editor }) {
|
|
13
38
|
const [imageAnchor, setImageAnchor] = useState(null);
|
|
14
39
|
const handleImageRequest = useCallback(() => {
|
|
@@ -23,28 +48,217 @@ function SlashDropdownMenu({ editor }) {
|
|
|
23
48
|
);
|
|
24
49
|
setImageAnchor(domRect);
|
|
25
50
|
}, [editor]);
|
|
26
|
-
const
|
|
51
|
+
const getSlashItems = useSlashItems({ onImageRequest: handleImageRequest });
|
|
27
52
|
const itemsCallback = useCallback(
|
|
28
|
-
({ query, editor: editor2 }) =>
|
|
29
|
-
[
|
|
53
|
+
({ query, editor: editor2 }) => filterSlashItems(getSlashItems(editor2), query),
|
|
54
|
+
[getSlashItems]
|
|
30
55
|
);
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
56
|
+
const [open, setOpen] = useState(false);
|
|
57
|
+
const [decorationNode, setDecorationNode] = useState(
|
|
58
|
+
null
|
|
59
|
+
);
|
|
60
|
+
const [filteredItems, setFilteredItems] = useState([]);
|
|
61
|
+
const [selectedValue, setSelectedValue] = useState("");
|
|
62
|
+
const close = useCallback(() => {
|
|
63
|
+
setOpen(false);
|
|
64
|
+
}, []);
|
|
65
|
+
const middleware = useMemo(
|
|
66
|
+
() => [
|
|
67
|
+
offset(8),
|
|
68
|
+
flip({ mainAxis: true, crossAxis: false }),
|
|
69
|
+
shift({ padding: 8 }),
|
|
70
|
+
size({
|
|
71
|
+
apply({ availableHeight, elements }) {
|
|
72
|
+
const next = Math.min(availableHeight, MAX_HEIGHT);
|
|
73
|
+
elements.floating.style.setProperty(
|
|
74
|
+
"--suggestion-menu-max-height",
|
|
75
|
+
`${next}px`
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
})
|
|
79
|
+
],
|
|
80
|
+
[]
|
|
81
|
+
);
|
|
82
|
+
const { refs, floatingStyles, context } = useFloating({
|
|
83
|
+
open,
|
|
84
|
+
strategy: "absolute",
|
|
85
|
+
placement: "bottom-start",
|
|
86
|
+
whileElementsMounted: autoUpdate,
|
|
87
|
+
middleware,
|
|
88
|
+
onOpenChange: (next) => {
|
|
89
|
+
if (!next) close();
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
useEffect(() => {
|
|
93
|
+
refs.setReference(decorationNode);
|
|
94
|
+
}, [refs, decorationNode]);
|
|
95
|
+
const dismiss = useDismiss(context);
|
|
96
|
+
const { getFloatingProps } = useInteractions([dismiss]);
|
|
97
|
+
const itemsCallbackRef = useRef(itemsCallback);
|
|
98
|
+
const filteredItemsRef = useRef([]);
|
|
99
|
+
const selectedValueRef = useRef("");
|
|
100
|
+
const commandRef = useRef(null);
|
|
101
|
+
useEffect(() => {
|
|
102
|
+
itemsCallbackRef.current = itemsCallback;
|
|
103
|
+
}, [itemsCallback]);
|
|
104
|
+
useEffect(() => {
|
|
105
|
+
filteredItemsRef.current = filteredItems;
|
|
106
|
+
}, [filteredItems]);
|
|
107
|
+
useEffect(() => {
|
|
108
|
+
selectedValueRef.current = selectedValue;
|
|
109
|
+
}, [selectedValue]);
|
|
110
|
+
const floatingDivRef = useRef(null);
|
|
111
|
+
useEffect(() => {
|
|
112
|
+
if (!selectedValue) return;
|
|
113
|
+
const root = floatingDivRef.current;
|
|
114
|
+
if (!root) return;
|
|
115
|
+
const target = root.querySelector(
|
|
116
|
+
'[data-selected="true"]'
|
|
117
|
+
);
|
|
118
|
+
target?.scrollIntoView({ block: "nearest" });
|
|
119
|
+
}, [selectedValue]);
|
|
120
|
+
const setFloatingNode = useCallback(
|
|
121
|
+
(node) => {
|
|
122
|
+
floatingDivRef.current = node;
|
|
123
|
+
refs.setFloating(node);
|
|
124
|
+
},
|
|
125
|
+
[refs]
|
|
126
|
+
);
|
|
127
|
+
useEffect(() => {
|
|
128
|
+
if (!editor || editor.isDestroyed) return;
|
|
129
|
+
const pluginKey = new PluginKey("slashDropdownMenu");
|
|
130
|
+
const plugin = Suggestion({
|
|
131
|
+
editor,
|
|
132
|
+
char: "/",
|
|
133
|
+
pluginKey,
|
|
134
|
+
decorationClass: "notra-slash-decoration",
|
|
135
|
+
decorationContent: "Filter...",
|
|
136
|
+
items: ({ query, editor: editor2 }) => itemsCallbackRef.current({ query, editor: editor2 }),
|
|
137
|
+
allow: ({ state, range }) => {
|
|
138
|
+
const $from = state.doc.resolve(range.from);
|
|
139
|
+
for (let depth = $from.depth; depth > 0; depth--) {
|
|
140
|
+
const name = $from.node(depth).type.name;
|
|
141
|
+
if (name === "image" || name === "codeBlock") return false;
|
|
142
|
+
}
|
|
143
|
+
return true;
|
|
144
|
+
},
|
|
145
|
+
command: ({ editor: editor2, range, props }) => {
|
|
146
|
+
editor2.chain().focus().deleteRange(range).run();
|
|
147
|
+
props.onSelect({ editor: editor2, range });
|
|
148
|
+
},
|
|
149
|
+
render: () => ({
|
|
150
|
+
onStart: (props) => {
|
|
151
|
+
setDecorationNode(props.decorationNode ?? null);
|
|
152
|
+
setFilteredItems(props.items);
|
|
153
|
+
setSelectedValue(props.items[0]?.title ?? "");
|
|
154
|
+
commandRef.current = (item) => props.command(item);
|
|
155
|
+
setOpen(true);
|
|
156
|
+
},
|
|
157
|
+
onUpdate: (props) => {
|
|
158
|
+
setDecorationNode(props.decorationNode ?? null);
|
|
159
|
+
setFilteredItems(props.items);
|
|
160
|
+
setSelectedValue(
|
|
161
|
+
(prev) => props.items.some((i) => i.title === prev) ? prev : props.items[0]?.title ?? ""
|
|
162
|
+
);
|
|
163
|
+
commandRef.current = (item) => props.command(item);
|
|
164
|
+
},
|
|
165
|
+
onKeyDown: ({ event }) => {
|
|
166
|
+
const list = filteredItemsRef.current;
|
|
167
|
+
if (list.length === 0 && event.key !== "Escape") return false;
|
|
168
|
+
if (event.key === "ArrowDown") {
|
|
169
|
+
const currentIndex = list.findIndex(
|
|
170
|
+
(i) => i.title === selectedValueRef.current
|
|
171
|
+
);
|
|
172
|
+
const nextIndex = (currentIndex + 1) % list.length;
|
|
173
|
+
setSelectedValue(list[nextIndex].title);
|
|
174
|
+
return true;
|
|
175
|
+
}
|
|
176
|
+
if (event.key === "ArrowUp") {
|
|
177
|
+
const currentIndex = list.findIndex(
|
|
178
|
+
(i) => i.title === selectedValueRef.current
|
|
179
|
+
);
|
|
180
|
+
const prevIndex = (currentIndex - 1 + list.length) % list.length;
|
|
181
|
+
setSelectedValue(list[prevIndex].title);
|
|
182
|
+
return true;
|
|
183
|
+
}
|
|
184
|
+
if (event.key === "Enter") {
|
|
185
|
+
const item = list.find((i) => i.title === selectedValueRef.current);
|
|
186
|
+
if (item && commandRef.current) {
|
|
187
|
+
commandRef.current(item);
|
|
188
|
+
}
|
|
189
|
+
return true;
|
|
190
|
+
}
|
|
191
|
+
if (event.key === "Escape") {
|
|
192
|
+
close();
|
|
193
|
+
return true;
|
|
194
|
+
}
|
|
195
|
+
return false;
|
|
196
|
+
},
|
|
197
|
+
onExit: () => {
|
|
198
|
+
setDecorationNode(null);
|
|
199
|
+
setFilteredItems([]);
|
|
200
|
+
setSelectedValue("");
|
|
201
|
+
commandRef.current = null;
|
|
202
|
+
setOpen(false);
|
|
203
|
+
}
|
|
204
|
+
})
|
|
205
|
+
});
|
|
206
|
+
editor.registerPlugin(plugin, (newPlugin, currentPlugins) => [
|
|
207
|
+
newPlugin,
|
|
208
|
+
...currentPlugins
|
|
209
|
+
]);
|
|
210
|
+
return () => {
|
|
211
|
+
if (!editor.isDestroyed) {
|
|
212
|
+
editor.unregisterPlugin(pluginKey);
|
|
213
|
+
}
|
|
214
|
+
};
|
|
215
|
+
}, [editor, close]);
|
|
216
|
+
const grouped = useMemo(() => groupByLabel(filteredItems), [filteredItems]);
|
|
217
|
+
const isMounted = open && decorationNode !== null;
|
|
218
|
+
return /* @__PURE__ */ jsxs(Fragment2, { children: [
|
|
219
|
+
isMounted && /* @__PURE__ */ jsx(
|
|
220
|
+
"div",
|
|
34
221
|
{
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
GroupedItemList,
|
|
222
|
+
ref: setFloatingNode,
|
|
223
|
+
className: "nt:rounded-xl nt:bg-popover nt:text-popover-foreground nt:shadow-md nt:ring-1 nt:ring-foreground/10 nt:outline-hidden",
|
|
224
|
+
"data-selector": "notra-slash-dropdown-menu",
|
|
225
|
+
style: { ...floatingStyles, zIndex: FLOATING_Z_INDEX },
|
|
226
|
+
...getFloatingProps(),
|
|
227
|
+
onPointerDown: (e) => e.preventDefault(),
|
|
228
|
+
children: /* @__PURE__ */ jsx(
|
|
229
|
+
Command,
|
|
44
230
|
{
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
231
|
+
disablePointerSelection: true,
|
|
232
|
+
label: "Slash command menu",
|
|
233
|
+
shouldFilter: false,
|
|
234
|
+
value: selectedValue,
|
|
235
|
+
onValueChange: setSelectedValue,
|
|
236
|
+
children: /* @__PURE__ */ jsx(
|
|
237
|
+
CommandList,
|
|
238
|
+
{
|
|
239
|
+
style: {
|
|
240
|
+
maxHeight: "var(--suggestion-menu-max-height)"
|
|
241
|
+
},
|
|
242
|
+
children: grouped.map((group, groupIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
243
|
+
groupIndex > 0 && /* @__PURE__ */ jsx(CommandSeparator, {}),
|
|
244
|
+
/* @__PURE__ */ jsx(CommandGroup, { heading: group.label || void 0, children: group.items.map((item) => {
|
|
245
|
+
const Badge = item.badge;
|
|
246
|
+
return /* @__PURE__ */ jsxs(
|
|
247
|
+
CommandItem,
|
|
248
|
+
{
|
|
249
|
+
value: item.title,
|
|
250
|
+
onSelect: () => commandRef.current?.(item),
|
|
251
|
+
children: [
|
|
252
|
+
Badge && /* @__PURE__ */ jsx(Badge, { className: "nt:size-4" }),
|
|
253
|
+
/* @__PURE__ */ jsx("span", { className: "nt:flex-1 nt:text-left", children: item.title })
|
|
254
|
+
]
|
|
255
|
+
},
|
|
256
|
+
item.title
|
|
257
|
+
);
|
|
258
|
+
}) })
|
|
259
|
+
] }, `${group.label}-${groupIndex}`))
|
|
260
|
+
}
|
|
261
|
+
)
|
|
48
262
|
}
|
|
49
263
|
)
|
|
50
264
|
}
|
|
@@ -59,67 +273,18 @@ function SlashDropdownMenu({ editor }) {
|
|
|
59
273
|
)
|
|
60
274
|
] });
|
|
61
275
|
}
|
|
62
|
-
function
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
const last = result[result.length - 1];
|
|
72
|
-
if (last && last.label === label) {
|
|
73
|
-
last.items.push(item);
|
|
74
|
-
last.offsets.push(index);
|
|
75
|
-
} else {
|
|
76
|
-
result.push({ label, items: [item], offsets: [index] });
|
|
77
|
-
}
|
|
78
|
-
});
|
|
79
|
-
return result;
|
|
80
|
-
}, [items]);
|
|
81
|
-
if (items.length === 0) return null;
|
|
82
|
-
return /* @__PURE__ */ jsx("div", { className: "notra-slash-card", children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { children: [
|
|
83
|
-
groupIndex > 0 && /* @__PURE__ */ jsx(Separator, { className: "nt:my-1", orientation: "horizontal" }),
|
|
84
|
-
group.label && /* @__PURE__ */ jsx("div", { className: "notra-slash-group-label", children: group.label }),
|
|
85
|
-
group.items.map((item, itemIndex) => {
|
|
86
|
-
const absoluteIndex = group.offsets[itemIndex];
|
|
87
|
-
return /* @__PURE__ */ jsx(
|
|
88
|
-
SlashItemButton,
|
|
89
|
-
{
|
|
90
|
-
isSelected: absoluteIndex === selectedIndex,
|
|
91
|
-
item,
|
|
92
|
-
onSelect: () => onSelect(item)
|
|
93
|
-
},
|
|
94
|
-
`${item.title}-${absoluteIndex}`
|
|
95
|
-
);
|
|
96
|
-
})
|
|
97
|
-
] }, `${group.label}-${groupIndex}`)) });
|
|
98
|
-
}
|
|
99
|
-
function SlashItemButton({ item, isSelected, onSelect }) {
|
|
100
|
-
const ref = useRef(null);
|
|
101
|
-
useEffect(() => {
|
|
102
|
-
if (!isSelected || !ref.current) return;
|
|
103
|
-
ref.current.scrollIntoView({ block: "nearest" });
|
|
104
|
-
}, [isSelected]);
|
|
105
|
-
const Badge = item.badge;
|
|
106
|
-
return /* @__PURE__ */ jsxs(
|
|
107
|
-
Button,
|
|
108
|
-
{
|
|
109
|
-
ref,
|
|
110
|
-
className: "nt:w-full nt:justify-start nt:gap-2",
|
|
111
|
-
"data-active-state": isSelected ? "on" : "off",
|
|
112
|
-
size: "default",
|
|
113
|
-
tabIndex: -1,
|
|
114
|
-
type: "button",
|
|
115
|
-
variant: "ghost",
|
|
116
|
-
onClick: onSelect,
|
|
117
|
-
children: [
|
|
118
|
-
Badge && /* @__PURE__ */ jsx(Badge, { className: "nt:size-4" }),
|
|
119
|
-
/* @__PURE__ */ jsx("span", { className: "nt:flex-1 nt:text-left", children: item.title })
|
|
120
|
-
]
|
|
276
|
+
function groupByLabel(items) {
|
|
277
|
+
const result = [];
|
|
278
|
+
for (const item of items) {
|
|
279
|
+
const label = item.group ?? "";
|
|
280
|
+
const last = result[result.length - 1];
|
|
281
|
+
if (last && last.label === label) {
|
|
282
|
+
last.items.push(item);
|
|
283
|
+
} else {
|
|
284
|
+
result.push({ label, items: [item] });
|
|
121
285
|
}
|
|
122
|
-
|
|
286
|
+
}
|
|
287
|
+
return result;
|
|
123
288
|
}
|
|
124
289
|
export {
|
|
125
290
|
SlashDropdownMenu
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/slash-dropdown-menu/slash-dropdown-menu.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { SlashImagePopover } from './slash-image-popover.js';\nimport { useSlashItems } from './use-slash-items.js';\nimport { filterSuggestionItems } from '../suggestion-menu/filter-suggestion-items.js';\nimport { SuggestionMenu } from '../suggestion-menu/suggestion-menu.js';\nimport { Button } from '../ui/button.js';\nimport { Separator } from '../ui/separator.js';\n\nimport type { SuggestionItem } from '../suggestion-menu/suggestion-menu-types.js';\nimport type { Editor } from '@tiptap/core';\n\nexport interface SlashDropdownMenuProps {\n\teditor: Editor | null;\n}\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 getItems = useSlashItems({ onImageRequest: handleImageRequest });\n\n\tconst itemsCallback = useCallback(\n\t\t({ query, editor }: { query: string; editor: Editor }) =>\n\t\t\tfilterSuggestionItems(getItems(editor), query),\n\t\t[getItems]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<SuggestionMenu\n\t\t\t\tchar=\"/\"\n\t\t\t\tdecorationClass=\"notra-slash-decoration\"\n\t\t\t\tdecorationContent=\"Filter...\"\n\t\t\t\teditor={editor}\n\t\t\t\titems={itemsCallback}\n\t\t\t\tpluginKey=\"slashDropdownMenu\"\n\t\t\t\tselector=\"notra-slash-dropdown-menu\"\n\t\t\t>\n\t\t\t\t{({ items, selectedIndex, onSelect }) => (\n\t\t\t\t\t<GroupedItemList\n\t\t\t\t\t\titems={items}\n\t\t\t\t\t\tselectedIndex={selectedIndex}\n\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</SuggestionMenu>\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 GroupedItemListProps {\n\titems: SuggestionItem[];\n\tselectedIndex: number;\n\tonSelect: (item: SuggestionItem) => void;\n}\n\nfunction GroupedItemList({\n\titems,\n\tselectedIndex,\n\tonSelect\n}: GroupedItemListProps) {\n\tconst groups = useMemo(() => {\n\t\tconst result: {\n\t\t\tlabel: string;\n\t\t\titems: SuggestionItem[];\n\t\t\toffsets: number[];\n\t\t}[] = [];\n\n\t\titems.forEach((item, index) => {\n\t\t\tconst label = item.group ?? '';\n\t\t\tconst last = result[result.length - 1];\n\n\t\t\tif (last && last.label === label) {\n\t\t\t\tlast.items.push(item);\n\t\t\t\tlast.offsets.push(index);\n\t\t\t} else {\n\t\t\t\tresult.push({ label, items: [item], offsets: [index] });\n\t\t\t}\n\t\t});\n\n\t\treturn result;\n\t}, [items]);\n\n\tif (items.length === 0) return null;\n\n\treturn (\n\t\t<div className=\"notra-slash-card\">\n\t\t\t{groups.map((group, groupIndex) => (\n\t\t\t\t<div key={`${group.label}-${groupIndex}`}>\n\t\t\t\t\t{groupIndex > 0 && (\n\t\t\t\t\t\t<Separator className=\"nt:my-1\" orientation=\"horizontal\" />\n\t\t\t\t\t)}\n\t\t\t\t\t{group.label && (\n\t\t\t\t\t\t<div className=\"notra-slash-group-label\">{group.label}</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{group.items.map((item, itemIndex) => {\n\t\t\t\t\t\tconst absoluteIndex = group.offsets[itemIndex];\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<SlashItemButton\n\t\t\t\t\t\t\t\tkey={`${item.title}-${absoluteIndex}`}\n\t\t\t\t\t\t\t\tisSelected={absoluteIndex === selectedIndex}\n\t\t\t\t\t\t\t\titem={item}\n\t\t\t\t\t\t\t\tonSelect={() => onSelect(item)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\ninterface SlashItemButtonProps {\n\titem: SuggestionItem;\n\tisSelected: boolean;\n\tonSelect: () => void;\n}\n\nfunction SlashItemButton({ item, isSelected, onSelect }: SlashItemButtonProps) {\n\tconst ref = useRef<HTMLButtonElement>(null);\n\n\tuseEffect(() => {\n\t\tif (!isSelected || !ref.current) return;\n\n\t\tref.current.scrollIntoView({ block: 'nearest' });\n\t}, [isSelected]);\n\n\tconst Badge = item.badge;\n\n\treturn (\n\t\t<Button\n\t\t\tref={ref}\n\t\t\tclassName=\"nt:w-full nt:justify-start nt:gap-2\"\n\t\t\tdata-active-state={isSelected ? 'on' : 'off'}\n\t\t\tsize=\"default\"\n\t\t\ttabIndex={-1}\n\t\t\ttype=\"button\"\n\t\t\tvariant=\"ghost\"\n\t\t\tonClick={onSelect}\n\t\t>\n\t\t\t{Badge && <Badge className=\"nt:size-4\" />}\n\t\t\t<span className=\"nt:flex-1 nt:text-left\">{item.title}</span>\n\t\t</Button>\n\t);\n}\n"],"mappings":"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","names":["editor"]}
|
|
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":["Fragment","editor"]}
|
package/dist/components/{suggestion-menu/suggestion-menu-types.cjs → slash-dropdown-menu/types.cjs}
RENAMED
|
@@ -13,7 +13,7 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
13
13
|
};
|
|
14
14
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
15
|
|
|
16
|
-
// src/components/
|
|
17
|
-
var
|
|
18
|
-
module.exports = __toCommonJS(
|
|
19
|
-
//# sourceMappingURL=
|
|
16
|
+
// src/components/slash-dropdown-menu/types.ts
|
|
17
|
+
var types_exports = {};
|
|
18
|
+
module.exports = __toCommonJS(types_exports);
|
|
19
|
+
//# sourceMappingURL=types.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/slash-dropdown-menu/types.ts"],"sourcesContent":["import type { Editor, Range } from '@tiptap/react';\n\nexport type IconComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;\n\nexport interface SlashItem {\n\t/** Main label shown in the menu. */\n\ttitle: string;\n\t/** Secondary description shown under the title. */\n\tsubtext?: string;\n\t/** Icon component (lucide-react). */\n\tbadge?: IconComponent;\n\t/** Group label used by callers that render grouped lists. */\n\tgroup?: string;\n\t/** Extra search keywords. */\n\tkeywords?: string[];\n\t/** Invoked when the item is chosen. */\n\tonSelect: (props: { editor: Editor; range: Range }) => void;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Editor, Range } from '@tiptap/react';
|
|
2
2
|
|
|
3
3
|
type IconComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
|
4
|
-
interface
|
|
4
|
+
interface SlashItem {
|
|
5
5
|
/** Main label shown in the menu. */
|
|
6
6
|
title: string;
|
|
7
7
|
/** Secondary description shown under the title. */
|
|
@@ -19,4 +19,4 @@ interface SuggestionItem {
|
|
|
19
19
|
}) => void;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
export type { IconComponent,
|
|
22
|
+
export type { IconComponent, SlashItem };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Editor, Range } from '@tiptap/react';
|
|
2
2
|
|
|
3
3
|
type IconComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
|
4
|
-
interface
|
|
4
|
+
interface SlashItem {
|
|
5
5
|
/** Main label shown in the menu. */
|
|
6
6
|
title: string;
|
|
7
7
|
/** Secondary description shown under the title. */
|
|
@@ -19,4 +19,4 @@ interface SuggestionItem {
|
|
|
19
19
|
}) => void;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
export type { IconComponent,
|
|
22
|
+
export type { IconComponent, SlashItem };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=types.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/slash-dropdown-menu/use-slash-items.ts"],"sourcesContent":["import {\n\tHeading1,\n\tHeading2,\n\tHeading3,\n\tHeading4,\n\tImage as ImageIcon,\n\tList,\n\tListOrdered,\n\tListTodo,\n\tQuote,\n\tSquareCode,\n\tType\n} from 'lucide-react';\nimport { useCallback } from 'react';\n\nimport type {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/slash-dropdown-menu/use-slash-items.ts"],"sourcesContent":["import {\n\tHeading1,\n\tHeading2,\n\tHeading3,\n\tHeading4,\n\tImage as ImageIcon,\n\tList,\n\tListOrdered,\n\tListTodo,\n\tQuote,\n\tSquareCode,\n\tType\n} from 'lucide-react';\nimport { useCallback } from 'react';\n\nimport type { SlashItem } from './types.js';\nimport type { Editor } from '@tiptap/core';\n// Module augmentations: pull in ChainedCommands extensions from these packages.\nimport type {} from '@tiptap/starter-kit';\nimport type {} from '@tiptap/extension-list';\n\nexport interface UseSlashItemsOptions {\n\t/** Called when the Image slash item is chosen. */\n\tonImageRequest: () => void;\n}\n\nexport function useSlashItems({ onImageRequest }: UseSlashItemsOptions) {\n\treturn useCallback(\n\t\t(editor: Editor): SlashItem[] => [\n\t\t\t{\n\t\t\t\ttitle: 'Text',\n\t\t\t\tkeywords: ['p', 'paragraph', 'text'],\n\t\t\t\tbadge: Type,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().setParagraph().run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Heading 1',\n\t\t\t\tkeywords: ['h1', 'heading'],\n\t\t\t\tbadge: Heading1,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().toggleHeading({ level: 1 }).run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Heading 2',\n\t\t\t\tkeywords: ['h2', 'heading'],\n\t\t\t\tbadge: Heading2,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().toggleHeading({ level: 2 }).run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Heading 3',\n\t\t\t\tkeywords: ['h3', 'heading'],\n\t\t\t\tbadge: Heading3,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().toggleHeading({ level: 3 }).run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Heading 4',\n\t\t\t\tkeywords: ['h4', 'heading'],\n\t\t\t\tbadge: Heading4,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().toggleHeading({ level: 4 }).run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Bullet List',\n\t\t\t\tkeywords: ['ul', 'list', 'bullet'],\n\t\t\t\tbadge: List,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().toggleBulletList().run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Numbered List',\n\t\t\t\tkeywords: ['ol', 'list', 'ordered', 'numbered'],\n\t\t\t\tbadge: ListOrdered,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().toggleOrderedList().run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'To-do List',\n\t\t\t\tkeywords: ['task', 'todo', 'checklist'],\n\t\t\t\tbadge: ListTodo,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().toggleTaskList().run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Blockquote',\n\t\t\t\tkeywords: ['quote'],\n\t\t\t\tbadge: Quote,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().toggleBlockquote().run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Code Block',\n\t\t\t\tkeywords: ['code', 'pre'],\n\t\t\t\tbadge: SquareCode,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().toggleCodeBlock().run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Image',\n\t\t\t\tkeywords: ['image', 'img', 'picture', 'media', 'url'],\n\t\t\t\tbadge: ImageIcon,\n\t\t\t\tgroup: 'Insert',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\tonImageRequest();\n\t\t\t\t}\n\t\t\t}\n\t\t],\n\t\t[onImageRequest]\n\t);\n}\n"],"mappings":"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","names":["ImageIcon"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SlashItem } from './types.cjs';
|
|
2
2
|
import { Editor } from '@tiptap/core';
|
|
3
3
|
import '@tiptap/react';
|
|
4
4
|
|
|
@@ -6,6 +6,6 @@ interface UseSlashItemsOptions {
|
|
|
6
6
|
/** Called when the Image slash item is chosen. */
|
|
7
7
|
onImageRequest: () => void;
|
|
8
8
|
}
|
|
9
|
-
declare function useSlashItems({ onImageRequest }: UseSlashItemsOptions): (editor: Editor) =>
|
|
9
|
+
declare function useSlashItems({ onImageRequest }: UseSlashItemsOptions): (editor: Editor) => SlashItem[];
|
|
10
10
|
|
|
11
11
|
export { type UseSlashItemsOptions, useSlashItems };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SlashItem } from './types.js';
|
|
2
2
|
import { Editor } from '@tiptap/core';
|
|
3
3
|
import '@tiptap/react';
|
|
4
4
|
|
|
@@ -6,6 +6,6 @@ interface UseSlashItemsOptions {
|
|
|
6
6
|
/** Called when the Image slash item is chosen. */
|
|
7
7
|
onImageRequest: () => void;
|
|
8
8
|
}
|
|
9
|
-
declare function useSlashItems({ onImageRequest }: UseSlashItemsOptions): (editor: Editor) =>
|
|
9
|
+
declare function useSlashItems({ onImageRequest }: UseSlashItemsOptions): (editor: Editor) => SlashItem[];
|
|
10
10
|
|
|
11
11
|
export { type UseSlashItemsOptions, useSlashItems };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/slash-dropdown-menu/use-slash-items.ts"],"sourcesContent":["import {\n\tHeading1,\n\tHeading2,\n\tHeading3,\n\tHeading4,\n\tImage as ImageIcon,\n\tList,\n\tListOrdered,\n\tListTodo,\n\tQuote,\n\tSquareCode,\n\tType\n} from 'lucide-react';\nimport { useCallback } from 'react';\n\nimport type {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/slash-dropdown-menu/use-slash-items.ts"],"sourcesContent":["import {\n\tHeading1,\n\tHeading2,\n\tHeading3,\n\tHeading4,\n\tImage as ImageIcon,\n\tList,\n\tListOrdered,\n\tListTodo,\n\tQuote,\n\tSquareCode,\n\tType\n} from 'lucide-react';\nimport { useCallback } from 'react';\n\nimport type { SlashItem } from './types.js';\nimport type { Editor } from '@tiptap/core';\n// Module augmentations: pull in ChainedCommands extensions from these packages.\nimport type {} from '@tiptap/starter-kit';\nimport type {} from '@tiptap/extension-list';\n\nexport interface UseSlashItemsOptions {\n\t/** Called when the Image slash item is chosen. */\n\tonImageRequest: () => void;\n}\n\nexport function useSlashItems({ onImageRequest }: UseSlashItemsOptions) {\n\treturn useCallback(\n\t\t(editor: Editor): SlashItem[] => [\n\t\t\t{\n\t\t\t\ttitle: 'Text',\n\t\t\t\tkeywords: ['p', 'paragraph', 'text'],\n\t\t\t\tbadge: Type,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().setParagraph().run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Heading 1',\n\t\t\t\tkeywords: ['h1', 'heading'],\n\t\t\t\tbadge: Heading1,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().toggleHeading({ level: 1 }).run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Heading 2',\n\t\t\t\tkeywords: ['h2', 'heading'],\n\t\t\t\tbadge: Heading2,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().toggleHeading({ level: 2 }).run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Heading 3',\n\t\t\t\tkeywords: ['h3', 'heading'],\n\t\t\t\tbadge: Heading3,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().toggleHeading({ level: 3 }).run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Heading 4',\n\t\t\t\tkeywords: ['h4', 'heading'],\n\t\t\t\tbadge: Heading4,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().toggleHeading({ level: 4 }).run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Bullet List',\n\t\t\t\tkeywords: ['ul', 'list', 'bullet'],\n\t\t\t\tbadge: List,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().toggleBulletList().run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Numbered List',\n\t\t\t\tkeywords: ['ol', 'list', 'ordered', 'numbered'],\n\t\t\t\tbadge: ListOrdered,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().toggleOrderedList().run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'To-do List',\n\t\t\t\tkeywords: ['task', 'todo', 'checklist'],\n\t\t\t\tbadge: ListTodo,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().toggleTaskList().run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Blockquote',\n\t\t\t\tkeywords: ['quote'],\n\t\t\t\tbadge: Quote,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().toggleBlockquote().run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Code Block',\n\t\t\t\tkeywords: ['code', 'pre'],\n\t\t\t\tbadge: SquareCode,\n\t\t\t\tgroup: 'Style',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\teditor.chain().focus().toggleCodeBlock().run();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Image',\n\t\t\t\tkeywords: ['image', 'img', 'picture', 'media', 'url'],\n\t\t\t\tbadge: ImageIcon,\n\t\t\t\tgroup: 'Insert',\n\t\t\t\tonSelect: () => {\n\t\t\t\t\tonImageRequest();\n\t\t\t\t}\n\t\t\t}\n\t\t],\n\t\t[onImageRequest]\n\t);\n}\n"],"mappings":"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","names":[]}
|
|
@@ -106,7 +106,7 @@ function CommandList({
|
|
|
106
106
|
import_cmdk.Command.List,
|
|
107
107
|
{
|
|
108
108
|
className: (0, import_utils.cn)(
|
|
109
|
-
"nt:
|
|
109
|
+
"nt:scrollbar-hide nt:max-h-72 nt:scroll-py-1 nt:overflow-x-hidden nt:overflow-y-auto nt:outline-none",
|
|
110
110
|
className
|
|
111
111
|
),
|
|
112
112
|
"data-slot": "command-list",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/command.tsx"],"sourcesContent":["import { Command as CommandPrimitive } from 'cmdk';\nimport { SearchIcon, CheckIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport {\n\tDialog,\n\tDialogContent,\n\tDialogDescription,\n\tDialogHeader,\n\tDialogTitle\n} from './dialog.js';\nimport { InputGroup, InputGroupAddon } from './input-group.js';\nimport { cn } from '../../lib/utils.js';\n\nfunction Command({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n\treturn (\n\t\t<CommandPrimitive\n\t\t\tclassName={cn(\n\t\t\t\t'nt:flex nt:size-full nt:flex-col nt:overflow-hidden nt:rounded-xl! nt:bg-popover nt:p-1 nt:text-popover-foreground',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tdata-slot=\"command\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CommandDialog({\n\ttitle = 'Command Palette',\n\tdescription = 'Search for a command to run...',\n\tchildren,\n\tclassName,\n\tshowCloseButton = false,\n\t...props\n}: React.ComponentProps<typeof Dialog> & {\n\ttitle?: string;\n\tdescription?: string;\n\tclassName?: string;\n\tshowCloseButton?: boolean;\n}) {\n\treturn (\n\t\t<Dialog {...props}>\n\t\t\t<DialogHeader className=\"nt:sr-only\">\n\t\t\t\t<DialogTitle>{title}</DialogTitle>\n\t\t\t\t<DialogDescription>{description}</DialogDescription>\n\t\t\t</DialogHeader>\n\t\t\t<DialogContent\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'nt:top-1/3 nt:translate-y-0 nt:overflow-hidden nt:rounded-xl! nt:p-0',\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\tshowCloseButton={showCloseButton}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</DialogContent>\n\t\t</Dialog>\n\t);\n}\n\nfunction CommandInput({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n\treturn (\n\t\t<div className=\"nt:p-1 nt:pb-0\" data-slot=\"command-input-wrapper\">\n\t\t\t<InputGroup className=\"nt:h-8! nt:rounded-lg! nt:border-input/30 nt:bg-input/30 nt:shadow-none! nt:*:data-[slot=input-group-addon]:pl-2!\">\n\t\t\t\t<CommandPrimitive.Input\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t'nt:w-full nt:text-sm nt:outline-hidden nt:disabled:cursor-not-allowed nt:disabled:opacity-50',\n\t\t\t\t\t\tclassName\n\t\t\t\t\t)}\n\t\t\t\t\tdata-slot=\"command-input\"\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t\t<InputGroupAddon>\n\t\t\t\t\t<SearchIcon className=\"nt:size-4 nt:shrink-0 nt:opacity-50\" />\n\t\t\t\t</InputGroupAddon>\n\t\t\t</InputGroup>\n\t\t</div>\n\t);\n}\n\nfunction CommandList({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n\treturn (\n\t\t<CommandPrimitive.List\n\t\t\tclassName={cn(\n\t\t\t\t'nt:
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/command.tsx"],"sourcesContent":["import { Command as CommandPrimitive } from 'cmdk';\nimport { SearchIcon, CheckIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport {\n\tDialog,\n\tDialogContent,\n\tDialogDescription,\n\tDialogHeader,\n\tDialogTitle\n} from './dialog.js';\nimport { InputGroup, InputGroupAddon } from './input-group.js';\nimport { cn } from '../../lib/utils.js';\n\nfunction Command({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n\treturn (\n\t\t<CommandPrimitive\n\t\t\tclassName={cn(\n\t\t\t\t'nt:flex nt:size-full nt:flex-col nt:overflow-hidden nt:rounded-xl! nt:bg-popover nt:p-1 nt:text-popover-foreground',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tdata-slot=\"command\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CommandDialog({\n\ttitle = 'Command Palette',\n\tdescription = 'Search for a command to run...',\n\tchildren,\n\tclassName,\n\tshowCloseButton = false,\n\t...props\n}: React.ComponentProps<typeof Dialog> & {\n\ttitle?: string;\n\tdescription?: string;\n\tclassName?: string;\n\tshowCloseButton?: boolean;\n}) {\n\treturn (\n\t\t<Dialog {...props}>\n\t\t\t<DialogHeader className=\"nt:sr-only\">\n\t\t\t\t<DialogTitle>{title}</DialogTitle>\n\t\t\t\t<DialogDescription>{description}</DialogDescription>\n\t\t\t</DialogHeader>\n\t\t\t<DialogContent\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'nt:top-1/3 nt:translate-y-0 nt:overflow-hidden nt:rounded-xl! nt:p-0',\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\tshowCloseButton={showCloseButton}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</DialogContent>\n\t\t</Dialog>\n\t);\n}\n\nfunction CommandInput({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n\treturn (\n\t\t<div className=\"nt:p-1 nt:pb-0\" data-slot=\"command-input-wrapper\">\n\t\t\t<InputGroup className=\"nt:h-8! nt:rounded-lg! nt:border-input/30 nt:bg-input/30 nt:shadow-none! nt:*:data-[slot=input-group-addon]:pl-2!\">\n\t\t\t\t<CommandPrimitive.Input\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t'nt:w-full nt:text-sm nt:outline-hidden nt:disabled:cursor-not-allowed nt:disabled:opacity-50',\n\t\t\t\t\t\tclassName\n\t\t\t\t\t)}\n\t\t\t\t\tdata-slot=\"command-input\"\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t\t<InputGroupAddon>\n\t\t\t\t\t<SearchIcon className=\"nt:size-4 nt:shrink-0 nt:opacity-50\" />\n\t\t\t\t</InputGroupAddon>\n\t\t\t</InputGroup>\n\t\t</div>\n\t);\n}\n\nfunction CommandList({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n\treturn (\n\t\t<CommandPrimitive.List\n\t\t\tclassName={cn(\n\t\t\t\t'nt:scrollbar-hide nt:max-h-72 nt:scroll-py-1 nt:overflow-x-hidden nt:overflow-y-auto nt:outline-none',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tdata-slot=\"command-list\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CommandEmpty({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n\treturn (\n\t\t<CommandPrimitive.Empty\n\t\t\tclassName={cn('nt:py-6 nt:text-center nt:text-sm', className)}\n\t\t\tdata-slot=\"command-empty\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CommandGroup({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n\treturn (\n\t\t<CommandPrimitive.Group\n\t\t\tclassName={cn(\n\t\t\t\t'nt:overflow-hidden nt:p-1 nt:text-foreground nt:**:[[cmdk-group-heading]]:px-2 nt:**:[[cmdk-group-heading]]:py-1.5 nt:**:[[cmdk-group-heading]]:text-xs nt:**:[[cmdk-group-heading]]:font-medium nt:**:[[cmdk-group-heading]]:text-muted-foreground',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tdata-slot=\"command-group\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CommandSeparator({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n\treturn (\n\t\t<CommandPrimitive.Separator\n\t\t\tclassName={cn('nt:-mx-1 nt:h-px nt:bg-border', className)}\n\t\t\tdata-slot=\"command-separator\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CommandItem({\n\tclassName,\n\tchildren,\n\t...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n\treturn (\n\t\t<CommandPrimitive.Item\n\t\t\tclassName={cn(\n\t\t\t\t'nt:group/command-item nt:relative nt:flex nt:cursor-default nt:items-center nt:gap-2 nt:rounded-sm nt:px-2 nt:py-1.5 nt:text-sm nt:outline-hidden nt:select-none nt:in-data-[slot=dialog-content]:rounded-lg! nt:data-[disabled=true]:pointer-events-none nt:data-[disabled=true]:opacity-50 nt:data-selected:bg-muted nt:data-selected:text-foreground nt:[&_svg]:pointer-events-none nt:[&_svg]:shrink-0 nt:[&_svg:not([class*=size-])]:size-4 nt:data-selected:*:[svg]:text-foreground',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tdata-slot=\"command-item\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<CheckIcon className=\"nt:ml-auto nt:opacity-0 nt:group-has-data-[slot=command-shortcut]/command-item:hidden nt:group-data-[checked=true]/command-item:opacity-100\" />\n\t\t</CommandPrimitive.Item>\n\t);\n}\n\nfunction CommandShortcut({\n\tclassName,\n\t...props\n}: React.ComponentProps<'span'>) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t'nt:ml-auto nt:text-xs nt:tracking-widest nt:text-muted-foreground nt:group-data-selected/command-item:text-foreground',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tdata-slot=\"command-shortcut\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tCommand,\n\tCommandDialog,\n\tCommandInput,\n\tCommandList,\n\tCommandEmpty,\n\tCommandGroup,\n\tCommandItem,\n\tCommandShortcut,\n\tCommandSeparator\n};\n"],"mappings":"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","names":["CommandPrimitive"]}
|
|
@@ -80,7 +80,7 @@ function CommandList({
|
|
|
80
80
|
CommandPrimitive.List,
|
|
81
81
|
{
|
|
82
82
|
className: cn(
|
|
83
|
-
"nt:
|
|
83
|
+
"nt:scrollbar-hide nt:max-h-72 nt:scroll-py-1 nt:overflow-x-hidden nt:overflow-y-auto nt:outline-none",
|
|
84
84
|
className
|
|
85
85
|
),
|
|
86
86
|
"data-slot": "command-list",
|