hazo_ui 2.4.0 → 2.4.1
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/README.md +433 -0
- package/dist/index.cjs +149 -137
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +149 -137
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -425,6 +425,9 @@ declare const CommandPill: React.FC<CommandPillProps>;
|
|
|
425
425
|
* Dropdown menu for searching and selecting commands.
|
|
426
426
|
* Supports keyboard navigation and command grouping.
|
|
427
427
|
*
|
|
428
|
+
* Rendered via React Portal to document.body to escape parent stacking
|
|
429
|
+
* contexts and ensure the dropdown floats above all page content.
|
|
430
|
+
*
|
|
428
431
|
* Note: The query filtering is handled by TipTap's suggestion extension,
|
|
429
432
|
* so typing continues in the editor and filters the list automatically.
|
|
430
433
|
*/
|
package/dist/index.d.ts
CHANGED
|
@@ -425,6 +425,9 @@ declare const CommandPill: React.FC<CommandPillProps>;
|
|
|
425
425
|
* Dropdown menu for searching and selecting commands.
|
|
426
426
|
* Supports keyboard navigation and command grouping.
|
|
427
427
|
*
|
|
428
|
+
* Rendered via React Portal to document.body to escape parent stacking
|
|
429
|
+
* contexts and ensure the dropdown floats above all page content.
|
|
430
|
+
*
|
|
428
431
|
* Note: The query filtering is handled by TipTap's suggestion extension,
|
|
429
432
|
* so typing continues in the editor and filters the list automatically.
|
|
430
433
|
*/
|
package/dist/index.js
CHANGED
|
@@ -53,6 +53,7 @@ import { RxDividerHorizontal } from 'react-icons/rx';
|
|
|
53
53
|
import { Extension, Node, mergeAttributes } from '@tiptap/core';
|
|
54
54
|
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
55
55
|
import Suggestion from '@tiptap/suggestion';
|
|
56
|
+
import { createPortal } from 'react-dom';
|
|
56
57
|
|
|
57
58
|
var __create = Object.create;
|
|
58
59
|
var __defProp = Object.defineProperty;
|
|
@@ -4612,14 +4613,18 @@ var CommandPopover = ({
|
|
|
4612
4613
|
};
|
|
4613
4614
|
}
|
|
4614
4615
|
}, [is_open, on_close]);
|
|
4615
|
-
|
|
4616
|
-
|
|
4616
|
+
const [mounted, set_mounted] = React27.useState(false);
|
|
4617
|
+
React27.useEffect(() => {
|
|
4618
|
+
set_mounted(true);
|
|
4619
|
+
}, []);
|
|
4620
|
+
if (!is_open || !mounted) return null;
|
|
4621
|
+
const popover_content = /* @__PURE__ */ jsx(
|
|
4617
4622
|
"div",
|
|
4618
4623
|
{
|
|
4619
4624
|
ref: container_ref,
|
|
4620
4625
|
className: cn(
|
|
4621
4626
|
"cls_command_popover",
|
|
4622
|
-
"
|
|
4627
|
+
"fixed z-[9999]",
|
|
4623
4628
|
"w-64 min-w-[200px] max-w-[300px]",
|
|
4624
4629
|
"rounded-md border bg-popover text-popover-foreground shadow-lg",
|
|
4625
4630
|
"animate-in fade-in-0 zoom-in-95"
|
|
@@ -4680,6 +4685,7 @@ var CommandPopover = ({
|
|
|
4680
4685
|
] })
|
|
4681
4686
|
}
|
|
4682
4687
|
);
|
|
4688
|
+
return createPortal(popover_content, document.body);
|
|
4683
4689
|
};
|
|
4684
4690
|
CommandPopover.displayName = "CommandPopover";
|
|
4685
4691
|
|
|
@@ -4897,6 +4903,10 @@ var HazoUiTextbox = ({
|
|
|
4897
4903
|
const is_controlled = value !== void 0;
|
|
4898
4904
|
const editor_container_ref = React27.useRef(null);
|
|
4899
4905
|
const edit_popover_ref = React27.useRef(null);
|
|
4906
|
+
const [mounted, set_mounted] = React27.useState(false);
|
|
4907
|
+
React27.useEffect(() => {
|
|
4908
|
+
set_mounted(true);
|
|
4909
|
+
}, []);
|
|
4900
4910
|
const suggestion_extensions = React27.useMemo(() => {
|
|
4901
4911
|
return create_command_suggestion_extension({
|
|
4902
4912
|
prefixes,
|
|
@@ -4948,26 +4958,23 @@ var HazoUiTextbox = ({
|
|
|
4948
4958
|
}
|
|
4949
4959
|
});
|
|
4950
4960
|
React27.useEffect(() => {
|
|
4951
|
-
if (suggestion_state?.is_active && editor
|
|
4961
|
+
if (suggestion_state?.is_active && editor) {
|
|
4952
4962
|
requestAnimationFrame(() => {
|
|
4953
|
-
const container = editor_container_ref.current;
|
|
4954
|
-
if (!container) return;
|
|
4955
|
-
const container_rect = container.getBoundingClientRect();
|
|
4956
4963
|
const { from } = suggestion_state.range;
|
|
4957
4964
|
try {
|
|
4958
4965
|
const coords = editor.view.coordsAtPos(from);
|
|
4959
4966
|
if (coords) {
|
|
4960
4967
|
set_popover_position({
|
|
4961
|
-
top: coords.bottom
|
|
4962
|
-
left: coords.left
|
|
4968
|
+
top: coords.bottom + 4,
|
|
4969
|
+
left: coords.left
|
|
4963
4970
|
});
|
|
4964
4971
|
}
|
|
4965
4972
|
} catch {
|
|
4966
4973
|
const rect = suggestion_state.client_rect?.();
|
|
4967
4974
|
if (rect) {
|
|
4968
4975
|
set_popover_position({
|
|
4969
|
-
top: rect.bottom
|
|
4970
|
-
left: rect.left
|
|
4976
|
+
top: rect.bottom + 4,
|
|
4977
|
+
left: rect.left
|
|
4971
4978
|
});
|
|
4972
4979
|
}
|
|
4973
4980
|
}
|
|
@@ -5148,8 +5155,7 @@ var HazoUiTextbox = ({
|
|
|
5148
5155
|
const handle_pill_click = (e) => {
|
|
5149
5156
|
const detail = e.detail;
|
|
5150
5157
|
const { id, prefix, action, action_label, node_pos } = detail;
|
|
5151
|
-
if (editor
|
|
5152
|
-
const container_rect = editor_container_ref.current.getBoundingClientRect();
|
|
5158
|
+
if (editor) {
|
|
5153
5159
|
try {
|
|
5154
5160
|
const coords = editor.view.coordsAtPos(node_pos);
|
|
5155
5161
|
if (coords) {
|
|
@@ -5168,8 +5174,8 @@ var HazoUiTextbox = ({
|
|
|
5168
5174
|
},
|
|
5169
5175
|
node_pos,
|
|
5170
5176
|
rect: new DOMRect(
|
|
5171
|
-
coords.left
|
|
5172
|
-
coords.bottom
|
|
5177
|
+
coords.left,
|
|
5178
|
+
coords.bottom + 4,
|
|
5173
5179
|
0,
|
|
5174
5180
|
0
|
|
5175
5181
|
)
|
|
@@ -5229,63 +5235,66 @@ var HazoUiTextbox = ({
|
|
|
5229
5235
|
on_selection_change: set_selected_index
|
|
5230
5236
|
}
|
|
5231
5237
|
),
|
|
5232
|
-
edit_context &&
|
|
5233
|
-
|
|
5234
|
-
|
|
5235
|
-
|
|
5236
|
-
|
|
5237
|
-
|
|
5238
|
-
|
|
5239
|
-
|
|
5240
|
-
|
|
5241
|
-
|
|
5242
|
-
|
|
5243
|
-
|
|
5244
|
-
|
|
5245
|
-
|
|
5246
|
-
|
|
5247
|
-
|
|
5248
|
-
/* @__PURE__ */
|
|
5249
|
-
|
|
5250
|
-
|
|
5251
|
-
|
|
5252
|
-
|
|
5253
|
-
|
|
5254
|
-
|
|
5255
|
-
|
|
5256
|
-
|
|
5257
|
-
|
|
5258
|
-
|
|
5259
|
-
|
|
5260
|
-
|
|
5261
|
-
|
|
5262
|
-
|
|
5263
|
-
/* @__PURE__ */ jsxs("div", { className: "
|
|
5264
|
-
|
|
5265
|
-
|
|
5238
|
+
edit_context && mounted && createPortal(
|
|
5239
|
+
/* @__PURE__ */ jsx(
|
|
5240
|
+
"div",
|
|
5241
|
+
{
|
|
5242
|
+
ref: edit_popover_ref,
|
|
5243
|
+
className: cn(
|
|
5244
|
+
"cls_edit_popover",
|
|
5245
|
+
"fixed z-[9999]",
|
|
5246
|
+
"w-64 min-w-[200px] max-w-[300px]",
|
|
5247
|
+
"rounded-md border bg-popover text-popover-foreground shadow-lg",
|
|
5248
|
+
"animate-in fade-in-0 zoom-in-95"
|
|
5249
|
+
),
|
|
5250
|
+
style: {
|
|
5251
|
+
top: edit_context.rect.y,
|
|
5252
|
+
left: edit_context.rect.x
|
|
5253
|
+
},
|
|
5254
|
+
children: /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
|
|
5255
|
+
/* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground border-b", children: "Change command" }),
|
|
5256
|
+
/* @__PURE__ */ jsxs("div", { className: "max-h-[200px] overflow-y-auto", children: [
|
|
5257
|
+
edit_commands.map((cmd, idx) => /* @__PURE__ */ jsxs(
|
|
5258
|
+
"div",
|
|
5259
|
+
{
|
|
5260
|
+
className: cn(
|
|
5261
|
+
"px-3 py-2 cursor-pointer flex items-center gap-2",
|
|
5262
|
+
"hover:bg-accent",
|
|
5263
|
+
idx === edit_selected_index && "bg-accent",
|
|
5264
|
+
cmd.action === edit_context.command.action && "font-medium"
|
|
5265
|
+
),
|
|
5266
|
+
onClick: () => handle_command_update(cmd),
|
|
5267
|
+
children: [
|
|
5268
|
+
cmd.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-muted-foreground", children: cmd.icon }),
|
|
5269
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
5270
|
+
/* @__PURE__ */ jsxs("div", { className: "truncate", children: [
|
|
5271
|
+
edit_context.command.prefix,
|
|
5272
|
+
cmd.action_label
|
|
5273
|
+
] }),
|
|
5274
|
+
cmd.action_description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground truncate", children: cmd.action_description })
|
|
5266
5275
|
] }),
|
|
5267
|
-
cmd.
|
|
5268
|
-
]
|
|
5269
|
-
|
|
5270
|
-
|
|
5271
|
-
|
|
5272
|
-
|
|
5273
|
-
|
|
5274
|
-
|
|
5275
|
-
|
|
5276
|
-
|
|
5277
|
-
|
|
5278
|
-
|
|
5279
|
-
|
|
5280
|
-
|
|
5281
|
-
|
|
5282
|
-
|
|
5283
|
-
|
|
5284
|
-
|
|
5285
|
-
)
|
|
5276
|
+
cmd.action === edit_context.command.action && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "current" })
|
|
5277
|
+
]
|
|
5278
|
+
},
|
|
5279
|
+
cmd.action
|
|
5280
|
+
)),
|
|
5281
|
+
/* @__PURE__ */ jsx(
|
|
5282
|
+
"div",
|
|
5283
|
+
{
|
|
5284
|
+
className: cn(
|
|
5285
|
+
"px-3 py-2 cursor-pointer flex items-center gap-2 text-destructive border-t",
|
|
5286
|
+
"hover:bg-destructive/10",
|
|
5287
|
+
edit_selected_index === edit_commands.length && "bg-destructive/10"
|
|
5288
|
+
),
|
|
5289
|
+
onClick: handle_command_remove,
|
|
5290
|
+
children: /* @__PURE__ */ jsx("span", { children: "Remove" })
|
|
5291
|
+
}
|
|
5292
|
+
)
|
|
5293
|
+
] })
|
|
5286
5294
|
] })
|
|
5287
|
-
|
|
5288
|
-
|
|
5295
|
+
}
|
|
5296
|
+
),
|
|
5297
|
+
document.body
|
|
5289
5298
|
)
|
|
5290
5299
|
]
|
|
5291
5300
|
}
|
|
@@ -5429,6 +5438,10 @@ var HazoUiTextarea = ({
|
|
|
5429
5438
|
const is_controlled = value !== void 0;
|
|
5430
5439
|
const editor_container_ref = React27.useRef(null);
|
|
5431
5440
|
const edit_popover_ref = React27.useRef(null);
|
|
5441
|
+
const [mounted, set_mounted] = React27.useState(false);
|
|
5442
|
+
React27.useEffect(() => {
|
|
5443
|
+
set_mounted(true);
|
|
5444
|
+
}, []);
|
|
5432
5445
|
const calculated_min_height = rows ? `${rows * 1.5}em` : min_height;
|
|
5433
5446
|
const suggestion_extensions = React27.useMemo(() => {
|
|
5434
5447
|
return create_command_suggestion_extension({
|
|
@@ -5479,26 +5492,23 @@ var HazoUiTextarea = ({
|
|
|
5479
5492
|
}
|
|
5480
5493
|
});
|
|
5481
5494
|
React27.useEffect(() => {
|
|
5482
|
-
if (suggestion_state?.is_active && editor
|
|
5495
|
+
if (suggestion_state?.is_active && editor) {
|
|
5483
5496
|
requestAnimationFrame(() => {
|
|
5484
|
-
const container = editor_container_ref.current;
|
|
5485
|
-
if (!container) return;
|
|
5486
|
-
const container_rect = container.getBoundingClientRect();
|
|
5487
5497
|
const { from } = suggestion_state.range;
|
|
5488
5498
|
try {
|
|
5489
5499
|
const coords = editor.view.coordsAtPos(from);
|
|
5490
5500
|
if (coords) {
|
|
5491
5501
|
set_popover_position({
|
|
5492
|
-
top: coords.bottom
|
|
5493
|
-
left: coords.left
|
|
5502
|
+
top: coords.bottom + 4,
|
|
5503
|
+
left: coords.left
|
|
5494
5504
|
});
|
|
5495
5505
|
}
|
|
5496
5506
|
} catch {
|
|
5497
5507
|
const rect = suggestion_state.client_rect?.();
|
|
5498
5508
|
if (rect) {
|
|
5499
5509
|
set_popover_position({
|
|
5500
|
-
top: rect.bottom
|
|
5501
|
-
left: rect.left
|
|
5510
|
+
top: rect.bottom + 4,
|
|
5511
|
+
left: rect.left
|
|
5502
5512
|
});
|
|
5503
5513
|
}
|
|
5504
5514
|
}
|
|
@@ -5683,8 +5693,7 @@ var HazoUiTextarea = ({
|
|
|
5683
5693
|
const handle_pill_click = (e) => {
|
|
5684
5694
|
const detail = e.detail;
|
|
5685
5695
|
const { id, prefix, action, action_label, node_pos } = detail;
|
|
5686
|
-
if (editor
|
|
5687
|
-
const container_rect = editor_container_ref.current.getBoundingClientRect();
|
|
5696
|
+
if (editor) {
|
|
5688
5697
|
try {
|
|
5689
5698
|
const coords = editor.view.coordsAtPos(node_pos);
|
|
5690
5699
|
if (coords) {
|
|
@@ -5703,8 +5712,8 @@ var HazoUiTextarea = ({
|
|
|
5703
5712
|
},
|
|
5704
5713
|
node_pos,
|
|
5705
5714
|
rect: new DOMRect(
|
|
5706
|
-
coords.left
|
|
5707
|
-
coords.bottom
|
|
5715
|
+
coords.left,
|
|
5716
|
+
coords.bottom + 4,
|
|
5708
5717
|
0,
|
|
5709
5718
|
0
|
|
5710
5719
|
)
|
|
@@ -5768,63 +5777,66 @@ var HazoUiTextarea = ({
|
|
|
5768
5777
|
on_selection_change: set_selected_index
|
|
5769
5778
|
}
|
|
5770
5779
|
),
|
|
5771
|
-
edit_context &&
|
|
5772
|
-
|
|
5773
|
-
|
|
5774
|
-
|
|
5775
|
-
|
|
5776
|
-
|
|
5777
|
-
|
|
5778
|
-
|
|
5779
|
-
|
|
5780
|
-
|
|
5781
|
-
|
|
5782
|
-
|
|
5783
|
-
|
|
5784
|
-
|
|
5785
|
-
|
|
5786
|
-
|
|
5787
|
-
/* @__PURE__ */
|
|
5788
|
-
|
|
5789
|
-
|
|
5790
|
-
|
|
5791
|
-
|
|
5792
|
-
|
|
5793
|
-
|
|
5794
|
-
|
|
5795
|
-
|
|
5796
|
-
|
|
5797
|
-
|
|
5798
|
-
|
|
5799
|
-
|
|
5800
|
-
|
|
5801
|
-
|
|
5802
|
-
/* @__PURE__ */ jsxs("div", { className: "
|
|
5803
|
-
|
|
5804
|
-
|
|
5780
|
+
edit_context && mounted && createPortal(
|
|
5781
|
+
/* @__PURE__ */ jsx(
|
|
5782
|
+
"div",
|
|
5783
|
+
{
|
|
5784
|
+
ref: edit_popover_ref,
|
|
5785
|
+
className: cn(
|
|
5786
|
+
"cls_edit_popover",
|
|
5787
|
+
"fixed z-[9999]",
|
|
5788
|
+
"w-64 min-w-[200px] max-w-[300px]",
|
|
5789
|
+
"rounded-md border bg-popover text-popover-foreground shadow-lg",
|
|
5790
|
+
"animate-in fade-in-0 zoom-in-95"
|
|
5791
|
+
),
|
|
5792
|
+
style: {
|
|
5793
|
+
top: edit_context.rect.y,
|
|
5794
|
+
left: edit_context.rect.x
|
|
5795
|
+
},
|
|
5796
|
+
children: /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
|
|
5797
|
+
/* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground border-b", children: "Change command" }),
|
|
5798
|
+
/* @__PURE__ */ jsxs("div", { className: "max-h-[200px] overflow-y-auto", children: [
|
|
5799
|
+
edit_commands.map((cmd, idx) => /* @__PURE__ */ jsxs(
|
|
5800
|
+
"div",
|
|
5801
|
+
{
|
|
5802
|
+
className: cn(
|
|
5803
|
+
"px-3 py-2 cursor-pointer flex items-center gap-2",
|
|
5804
|
+
"hover:bg-accent",
|
|
5805
|
+
idx === edit_selected_index && "bg-accent",
|
|
5806
|
+
cmd.action === edit_context.command.action && "font-medium"
|
|
5807
|
+
),
|
|
5808
|
+
onClick: () => handle_command_update(cmd),
|
|
5809
|
+
children: [
|
|
5810
|
+
cmd.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-muted-foreground", children: cmd.icon }),
|
|
5811
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
5812
|
+
/* @__PURE__ */ jsxs("div", { className: "truncate", children: [
|
|
5813
|
+
edit_context.command.prefix,
|
|
5814
|
+
cmd.action_label
|
|
5815
|
+
] }),
|
|
5816
|
+
cmd.action_description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground truncate", children: cmd.action_description })
|
|
5805
5817
|
] }),
|
|
5806
|
-
cmd.
|
|
5807
|
-
]
|
|
5808
|
-
|
|
5809
|
-
|
|
5810
|
-
|
|
5811
|
-
|
|
5812
|
-
|
|
5813
|
-
|
|
5814
|
-
|
|
5815
|
-
|
|
5816
|
-
|
|
5817
|
-
|
|
5818
|
-
|
|
5819
|
-
|
|
5820
|
-
|
|
5821
|
-
|
|
5822
|
-
|
|
5823
|
-
|
|
5824
|
-
)
|
|
5818
|
+
cmd.action === edit_context.command.action && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "current" })
|
|
5819
|
+
]
|
|
5820
|
+
},
|
|
5821
|
+
cmd.action
|
|
5822
|
+
)),
|
|
5823
|
+
/* @__PURE__ */ jsx(
|
|
5824
|
+
"div",
|
|
5825
|
+
{
|
|
5826
|
+
className: cn(
|
|
5827
|
+
"px-3 py-2 cursor-pointer flex items-center gap-2 text-destructive border-t",
|
|
5828
|
+
"hover:bg-destructive/10",
|
|
5829
|
+
edit_selected_index === edit_commands.length && "bg-destructive/10"
|
|
5830
|
+
),
|
|
5831
|
+
onClick: handle_command_remove,
|
|
5832
|
+
children: /* @__PURE__ */ jsx("span", { children: "Remove" })
|
|
5833
|
+
}
|
|
5834
|
+
)
|
|
5835
|
+
] })
|
|
5825
5836
|
] })
|
|
5826
|
-
|
|
5827
|
-
|
|
5837
|
+
}
|
|
5838
|
+
),
|
|
5839
|
+
document.body
|
|
5828
5840
|
)
|
|
5829
5841
|
]
|
|
5830
5842
|
}
|