hazo_ui 2.4.0 → 2.4.2
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 +156 -138
- 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 +156 -138
- 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,21 +4613,27 @@ 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",
|
|
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"
|
|
4626
4631
|
),
|
|
4627
4632
|
style: {
|
|
4633
|
+
position: "fixed",
|
|
4628
4634
|
top: position.top,
|
|
4629
|
-
left: position.left
|
|
4635
|
+
left: position.left,
|
|
4636
|
+
zIndex: 9999
|
|
4630
4637
|
},
|
|
4631
4638
|
children: /* @__PURE__ */ jsxs(Command, { className: "rounded-md", children: [
|
|
4632
4639
|
query && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 text-xs text-muted-foreground border-b", children: [
|
|
@@ -4680,6 +4687,7 @@ var CommandPopover = ({
|
|
|
4680
4687
|
] })
|
|
4681
4688
|
}
|
|
4682
4689
|
);
|
|
4690
|
+
return createPortal(popover_content, document.body);
|
|
4683
4691
|
};
|
|
4684
4692
|
CommandPopover.displayName = "CommandPopover";
|
|
4685
4693
|
|
|
@@ -4897,6 +4905,10 @@ var HazoUiTextbox = ({
|
|
|
4897
4905
|
const is_controlled = value !== void 0;
|
|
4898
4906
|
const editor_container_ref = React27.useRef(null);
|
|
4899
4907
|
const edit_popover_ref = React27.useRef(null);
|
|
4908
|
+
const [mounted, set_mounted] = React27.useState(false);
|
|
4909
|
+
React27.useEffect(() => {
|
|
4910
|
+
set_mounted(true);
|
|
4911
|
+
}, []);
|
|
4900
4912
|
const suggestion_extensions = React27.useMemo(() => {
|
|
4901
4913
|
return create_command_suggestion_extension({
|
|
4902
4914
|
prefixes,
|
|
@@ -4948,26 +4960,23 @@ var HazoUiTextbox = ({
|
|
|
4948
4960
|
}
|
|
4949
4961
|
});
|
|
4950
4962
|
React27.useEffect(() => {
|
|
4951
|
-
if (suggestion_state?.is_active && editor
|
|
4963
|
+
if (suggestion_state?.is_active && editor) {
|
|
4952
4964
|
requestAnimationFrame(() => {
|
|
4953
|
-
const container = editor_container_ref.current;
|
|
4954
|
-
if (!container) return;
|
|
4955
|
-
const container_rect = container.getBoundingClientRect();
|
|
4956
4965
|
const { from } = suggestion_state.range;
|
|
4957
4966
|
try {
|
|
4958
4967
|
const coords = editor.view.coordsAtPos(from);
|
|
4959
4968
|
if (coords) {
|
|
4960
4969
|
set_popover_position({
|
|
4961
|
-
top: coords.bottom
|
|
4962
|
-
left: coords.left
|
|
4970
|
+
top: coords.bottom + 4,
|
|
4971
|
+
left: coords.left
|
|
4963
4972
|
});
|
|
4964
4973
|
}
|
|
4965
4974
|
} catch {
|
|
4966
4975
|
const rect = suggestion_state.client_rect?.();
|
|
4967
4976
|
if (rect) {
|
|
4968
4977
|
set_popover_position({
|
|
4969
|
-
top: rect.bottom
|
|
4970
|
-
left: rect.left
|
|
4978
|
+
top: rect.bottom + 4,
|
|
4979
|
+
left: rect.left
|
|
4971
4980
|
});
|
|
4972
4981
|
}
|
|
4973
4982
|
}
|
|
@@ -5148,8 +5157,7 @@ var HazoUiTextbox = ({
|
|
|
5148
5157
|
const handle_pill_click = (e) => {
|
|
5149
5158
|
const detail = e.detail;
|
|
5150
5159
|
const { id, prefix, action, action_label, node_pos } = detail;
|
|
5151
|
-
if (editor
|
|
5152
|
-
const container_rect = editor_container_ref.current.getBoundingClientRect();
|
|
5160
|
+
if (editor) {
|
|
5153
5161
|
try {
|
|
5154
5162
|
const coords = editor.view.coordsAtPos(node_pos);
|
|
5155
5163
|
if (coords) {
|
|
@@ -5168,8 +5176,8 @@ var HazoUiTextbox = ({
|
|
|
5168
5176
|
},
|
|
5169
5177
|
node_pos,
|
|
5170
5178
|
rect: new DOMRect(
|
|
5171
|
-
coords.left
|
|
5172
|
-
coords.bottom
|
|
5179
|
+
coords.left,
|
|
5180
|
+
coords.bottom + 4,
|
|
5173
5181
|
0,
|
|
5174
5182
|
0
|
|
5175
5183
|
)
|
|
@@ -5229,63 +5237,68 @@ var HazoUiTextbox = ({
|
|
|
5229
5237
|
on_selection_change: set_selected_index
|
|
5230
5238
|
}
|
|
5231
5239
|
),
|
|
5232
|
-
edit_context &&
|
|
5233
|
-
|
|
5234
|
-
|
|
5235
|
-
|
|
5236
|
-
|
|
5237
|
-
|
|
5238
|
-
|
|
5239
|
-
|
|
5240
|
-
|
|
5241
|
-
|
|
5242
|
-
|
|
5243
|
-
|
|
5244
|
-
|
|
5245
|
-
|
|
5246
|
-
|
|
5247
|
-
|
|
5248
|
-
|
|
5249
|
-
|
|
5250
|
-
|
|
5251
|
-
|
|
5252
|
-
|
|
5253
|
-
|
|
5254
|
-
|
|
5255
|
-
|
|
5256
|
-
|
|
5257
|
-
|
|
5258
|
-
|
|
5259
|
-
|
|
5260
|
-
|
|
5261
|
-
|
|
5262
|
-
|
|
5263
|
-
|
|
5264
|
-
|
|
5265
|
-
|
|
5240
|
+
edit_context && mounted && createPortal(
|
|
5241
|
+
/* @__PURE__ */ jsx(
|
|
5242
|
+
"div",
|
|
5243
|
+
{
|
|
5244
|
+
ref: edit_popover_ref,
|
|
5245
|
+
className: cn(
|
|
5246
|
+
"cls_edit_popover",
|
|
5247
|
+
"fixed",
|
|
5248
|
+
"w-64 min-w-[200px] max-w-[300px]",
|
|
5249
|
+
"rounded-md border bg-popover text-popover-foreground shadow-lg",
|
|
5250
|
+
"animate-in fade-in-0 zoom-in-95"
|
|
5251
|
+
),
|
|
5252
|
+
style: {
|
|
5253
|
+
position: "fixed",
|
|
5254
|
+
top: edit_context.rect.y,
|
|
5255
|
+
left: edit_context.rect.x,
|
|
5256
|
+
zIndex: 9999
|
|
5257
|
+
},
|
|
5258
|
+
children: /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
|
|
5259
|
+
/* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground border-b", children: "Change command" }),
|
|
5260
|
+
/* @__PURE__ */ jsxs("div", { className: "max-h-[200px] overflow-y-auto", children: [
|
|
5261
|
+
edit_commands.map((cmd, idx) => /* @__PURE__ */ jsxs(
|
|
5262
|
+
"div",
|
|
5263
|
+
{
|
|
5264
|
+
className: cn(
|
|
5265
|
+
"px-3 py-2 cursor-pointer flex items-center gap-2",
|
|
5266
|
+
"hover:bg-accent",
|
|
5267
|
+
idx === edit_selected_index && "bg-accent",
|
|
5268
|
+
cmd.action === edit_context.command.action && "font-medium"
|
|
5269
|
+
),
|
|
5270
|
+
onClick: () => handle_command_update(cmd),
|
|
5271
|
+
children: [
|
|
5272
|
+
cmd.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-muted-foreground", children: cmd.icon }),
|
|
5273
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
5274
|
+
/* @__PURE__ */ jsxs("div", { className: "truncate", children: [
|
|
5275
|
+
edit_context.command.prefix,
|
|
5276
|
+
cmd.action_label
|
|
5277
|
+
] }),
|
|
5278
|
+
cmd.action_description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground truncate", children: cmd.action_description })
|
|
5266
5279
|
] }),
|
|
5267
|
-
cmd.
|
|
5268
|
-
]
|
|
5269
|
-
|
|
5270
|
-
|
|
5271
|
-
|
|
5272
|
-
|
|
5273
|
-
|
|
5274
|
-
|
|
5275
|
-
|
|
5276
|
-
|
|
5277
|
-
|
|
5278
|
-
|
|
5279
|
-
|
|
5280
|
-
|
|
5281
|
-
|
|
5282
|
-
|
|
5283
|
-
|
|
5284
|
-
|
|
5285
|
-
)
|
|
5280
|
+
cmd.action === edit_context.command.action && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "current" })
|
|
5281
|
+
]
|
|
5282
|
+
},
|
|
5283
|
+
cmd.action
|
|
5284
|
+
)),
|
|
5285
|
+
/* @__PURE__ */ jsx(
|
|
5286
|
+
"div",
|
|
5287
|
+
{
|
|
5288
|
+
className: cn(
|
|
5289
|
+
"px-3 py-2 cursor-pointer flex items-center gap-2 text-destructive border-t",
|
|
5290
|
+
"hover:bg-destructive/10",
|
|
5291
|
+
edit_selected_index === edit_commands.length && "bg-destructive/10"
|
|
5292
|
+
),
|
|
5293
|
+
onClick: handle_command_remove,
|
|
5294
|
+
children: /* @__PURE__ */ jsx("span", { children: "Remove" })
|
|
5295
|
+
}
|
|
5296
|
+
)
|
|
5297
|
+
] })
|
|
5286
5298
|
] })
|
|
5287
|
-
|
|
5288
|
-
|
|
5299
|
+
}
|
|
5300
|
+
),
|
|
5301
|
+
document.body
|
|
5289
5302
|
)
|
|
5290
5303
|
]
|
|
5291
5304
|
}
|
|
@@ -5429,6 +5442,10 @@ var HazoUiTextarea = ({
|
|
|
5429
5442
|
const is_controlled = value !== void 0;
|
|
5430
5443
|
const editor_container_ref = React27.useRef(null);
|
|
5431
5444
|
const edit_popover_ref = React27.useRef(null);
|
|
5445
|
+
const [mounted, set_mounted] = React27.useState(false);
|
|
5446
|
+
React27.useEffect(() => {
|
|
5447
|
+
set_mounted(true);
|
|
5448
|
+
}, []);
|
|
5432
5449
|
const calculated_min_height = rows ? `${rows * 1.5}em` : min_height;
|
|
5433
5450
|
const suggestion_extensions = React27.useMemo(() => {
|
|
5434
5451
|
return create_command_suggestion_extension({
|
|
@@ -5479,26 +5496,23 @@ var HazoUiTextarea = ({
|
|
|
5479
5496
|
}
|
|
5480
5497
|
});
|
|
5481
5498
|
React27.useEffect(() => {
|
|
5482
|
-
if (suggestion_state?.is_active && editor
|
|
5499
|
+
if (suggestion_state?.is_active && editor) {
|
|
5483
5500
|
requestAnimationFrame(() => {
|
|
5484
|
-
const container = editor_container_ref.current;
|
|
5485
|
-
if (!container) return;
|
|
5486
|
-
const container_rect = container.getBoundingClientRect();
|
|
5487
5501
|
const { from } = suggestion_state.range;
|
|
5488
5502
|
try {
|
|
5489
5503
|
const coords = editor.view.coordsAtPos(from);
|
|
5490
5504
|
if (coords) {
|
|
5491
5505
|
set_popover_position({
|
|
5492
|
-
top: coords.bottom
|
|
5493
|
-
left: coords.left
|
|
5506
|
+
top: coords.bottom + 4,
|
|
5507
|
+
left: coords.left
|
|
5494
5508
|
});
|
|
5495
5509
|
}
|
|
5496
5510
|
} catch {
|
|
5497
5511
|
const rect = suggestion_state.client_rect?.();
|
|
5498
5512
|
if (rect) {
|
|
5499
5513
|
set_popover_position({
|
|
5500
|
-
top: rect.bottom
|
|
5501
|
-
left: rect.left
|
|
5514
|
+
top: rect.bottom + 4,
|
|
5515
|
+
left: rect.left
|
|
5502
5516
|
});
|
|
5503
5517
|
}
|
|
5504
5518
|
}
|
|
@@ -5683,8 +5697,7 @@ var HazoUiTextarea = ({
|
|
|
5683
5697
|
const handle_pill_click = (e) => {
|
|
5684
5698
|
const detail = e.detail;
|
|
5685
5699
|
const { id, prefix, action, action_label, node_pos } = detail;
|
|
5686
|
-
if (editor
|
|
5687
|
-
const container_rect = editor_container_ref.current.getBoundingClientRect();
|
|
5700
|
+
if (editor) {
|
|
5688
5701
|
try {
|
|
5689
5702
|
const coords = editor.view.coordsAtPos(node_pos);
|
|
5690
5703
|
if (coords) {
|
|
@@ -5703,8 +5716,8 @@ var HazoUiTextarea = ({
|
|
|
5703
5716
|
},
|
|
5704
5717
|
node_pos,
|
|
5705
5718
|
rect: new DOMRect(
|
|
5706
|
-
coords.left
|
|
5707
|
-
coords.bottom
|
|
5719
|
+
coords.left,
|
|
5720
|
+
coords.bottom + 4,
|
|
5708
5721
|
0,
|
|
5709
5722
|
0
|
|
5710
5723
|
)
|
|
@@ -5768,63 +5781,68 @@ var HazoUiTextarea = ({
|
|
|
5768
5781
|
on_selection_change: set_selected_index
|
|
5769
5782
|
}
|
|
5770
5783
|
),
|
|
5771
|
-
edit_context &&
|
|
5772
|
-
|
|
5773
|
-
|
|
5774
|
-
|
|
5775
|
-
|
|
5776
|
-
|
|
5777
|
-
|
|
5778
|
-
|
|
5779
|
-
|
|
5780
|
-
|
|
5781
|
-
|
|
5782
|
-
|
|
5783
|
-
|
|
5784
|
-
|
|
5785
|
-
|
|
5786
|
-
|
|
5787
|
-
|
|
5788
|
-
|
|
5789
|
-
|
|
5790
|
-
|
|
5791
|
-
|
|
5792
|
-
|
|
5793
|
-
|
|
5794
|
-
|
|
5795
|
-
|
|
5796
|
-
|
|
5797
|
-
|
|
5798
|
-
|
|
5799
|
-
|
|
5800
|
-
|
|
5801
|
-
|
|
5802
|
-
|
|
5803
|
-
|
|
5804
|
-
|
|
5784
|
+
edit_context && mounted && createPortal(
|
|
5785
|
+
/* @__PURE__ */ jsx(
|
|
5786
|
+
"div",
|
|
5787
|
+
{
|
|
5788
|
+
ref: edit_popover_ref,
|
|
5789
|
+
className: cn(
|
|
5790
|
+
"cls_edit_popover",
|
|
5791
|
+
"fixed",
|
|
5792
|
+
"w-64 min-w-[200px] max-w-[300px]",
|
|
5793
|
+
"rounded-md border bg-popover text-popover-foreground shadow-lg",
|
|
5794
|
+
"animate-in fade-in-0 zoom-in-95"
|
|
5795
|
+
),
|
|
5796
|
+
style: {
|
|
5797
|
+
position: "fixed",
|
|
5798
|
+
top: edit_context.rect.y,
|
|
5799
|
+
left: edit_context.rect.x,
|
|
5800
|
+
zIndex: 9999
|
|
5801
|
+
},
|
|
5802
|
+
children: /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
|
|
5803
|
+
/* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground border-b", children: "Change command" }),
|
|
5804
|
+
/* @__PURE__ */ jsxs("div", { className: "max-h-[200px] overflow-y-auto", children: [
|
|
5805
|
+
edit_commands.map((cmd, idx) => /* @__PURE__ */ jsxs(
|
|
5806
|
+
"div",
|
|
5807
|
+
{
|
|
5808
|
+
className: cn(
|
|
5809
|
+
"px-3 py-2 cursor-pointer flex items-center gap-2",
|
|
5810
|
+
"hover:bg-accent",
|
|
5811
|
+
idx === edit_selected_index && "bg-accent",
|
|
5812
|
+
cmd.action === edit_context.command.action && "font-medium"
|
|
5813
|
+
),
|
|
5814
|
+
onClick: () => handle_command_update(cmd),
|
|
5815
|
+
children: [
|
|
5816
|
+
cmd.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-muted-foreground", children: cmd.icon }),
|
|
5817
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
5818
|
+
/* @__PURE__ */ jsxs("div", { className: "truncate", children: [
|
|
5819
|
+
edit_context.command.prefix,
|
|
5820
|
+
cmd.action_label
|
|
5821
|
+
] }),
|
|
5822
|
+
cmd.action_description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground truncate", children: cmd.action_description })
|
|
5805
5823
|
] }),
|
|
5806
|
-
cmd.
|
|
5807
|
-
]
|
|
5808
|
-
|
|
5809
|
-
|
|
5810
|
-
|
|
5811
|
-
|
|
5812
|
-
|
|
5813
|
-
|
|
5814
|
-
|
|
5815
|
-
|
|
5816
|
-
|
|
5817
|
-
|
|
5818
|
-
|
|
5819
|
-
|
|
5820
|
-
|
|
5821
|
-
|
|
5822
|
-
|
|
5823
|
-
|
|
5824
|
-
)
|
|
5824
|
+
cmd.action === edit_context.command.action && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "current" })
|
|
5825
|
+
]
|
|
5826
|
+
},
|
|
5827
|
+
cmd.action
|
|
5828
|
+
)),
|
|
5829
|
+
/* @__PURE__ */ jsx(
|
|
5830
|
+
"div",
|
|
5831
|
+
{
|
|
5832
|
+
className: cn(
|
|
5833
|
+
"px-3 py-2 cursor-pointer flex items-center gap-2 text-destructive border-t",
|
|
5834
|
+
"hover:bg-destructive/10",
|
|
5835
|
+
edit_selected_index === edit_commands.length && "bg-destructive/10"
|
|
5836
|
+
),
|
|
5837
|
+
onClick: handle_command_remove,
|
|
5838
|
+
children: /* @__PURE__ */ jsx("span", { children: "Remove" })
|
|
5839
|
+
}
|
|
5840
|
+
)
|
|
5841
|
+
] })
|
|
5825
5842
|
] })
|
|
5826
|
-
|
|
5827
|
-
|
|
5843
|
+
}
|
|
5844
|
+
),
|
|
5845
|
+
document.body
|
|
5828
5846
|
)
|
|
5829
5847
|
]
|
|
5830
5848
|
}
|