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.cjs
CHANGED
|
@@ -54,6 +54,7 @@ var rx = require('react-icons/rx');
|
|
|
54
54
|
var core = require('@tiptap/core');
|
|
55
55
|
var TabsPrimitive = require('@radix-ui/react-tabs');
|
|
56
56
|
var Suggestion = require('@tiptap/suggestion');
|
|
57
|
+
var reactDom = require('react-dom');
|
|
57
58
|
|
|
58
59
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
59
60
|
|
|
@@ -4671,21 +4672,27 @@ var CommandPopover = ({
|
|
|
4671
4672
|
};
|
|
4672
4673
|
}
|
|
4673
4674
|
}, [is_open, on_close]);
|
|
4674
|
-
|
|
4675
|
-
|
|
4675
|
+
const [mounted, set_mounted] = React27__namespace.useState(false);
|
|
4676
|
+
React27__namespace.useEffect(() => {
|
|
4677
|
+
set_mounted(true);
|
|
4678
|
+
}, []);
|
|
4679
|
+
if (!is_open || !mounted) return null;
|
|
4680
|
+
const popover_content = /* @__PURE__ */ jsxRuntime.jsx(
|
|
4676
4681
|
"div",
|
|
4677
4682
|
{
|
|
4678
4683
|
ref: container_ref,
|
|
4679
4684
|
className: cn(
|
|
4680
4685
|
"cls_command_popover",
|
|
4681
|
-
"
|
|
4686
|
+
"fixed",
|
|
4682
4687
|
"w-64 min-w-[200px] max-w-[300px]",
|
|
4683
4688
|
"rounded-md border bg-popover text-popover-foreground shadow-lg",
|
|
4684
4689
|
"animate-in fade-in-0 zoom-in-95"
|
|
4685
4690
|
),
|
|
4686
4691
|
style: {
|
|
4692
|
+
position: "fixed",
|
|
4687
4693
|
top: position.top,
|
|
4688
|
-
left: position.left
|
|
4694
|
+
left: position.left,
|
|
4695
|
+
zIndex: 9999
|
|
4689
4696
|
},
|
|
4690
4697
|
children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { className: "rounded-md", children: [
|
|
4691
4698
|
query && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 text-xs text-muted-foreground border-b", children: [
|
|
@@ -4739,6 +4746,7 @@ var CommandPopover = ({
|
|
|
4739
4746
|
] })
|
|
4740
4747
|
}
|
|
4741
4748
|
);
|
|
4749
|
+
return reactDom.createPortal(popover_content, document.body);
|
|
4742
4750
|
};
|
|
4743
4751
|
CommandPopover.displayName = "CommandPopover";
|
|
4744
4752
|
|
|
@@ -4956,6 +4964,10 @@ var HazoUiTextbox = ({
|
|
|
4956
4964
|
const is_controlled = value !== void 0;
|
|
4957
4965
|
const editor_container_ref = React27__namespace.useRef(null);
|
|
4958
4966
|
const edit_popover_ref = React27__namespace.useRef(null);
|
|
4967
|
+
const [mounted, set_mounted] = React27__namespace.useState(false);
|
|
4968
|
+
React27__namespace.useEffect(() => {
|
|
4969
|
+
set_mounted(true);
|
|
4970
|
+
}, []);
|
|
4959
4971
|
const suggestion_extensions = React27__namespace.useMemo(() => {
|
|
4960
4972
|
return create_command_suggestion_extension({
|
|
4961
4973
|
prefixes,
|
|
@@ -5007,26 +5019,23 @@ var HazoUiTextbox = ({
|
|
|
5007
5019
|
}
|
|
5008
5020
|
});
|
|
5009
5021
|
React27__namespace.useEffect(() => {
|
|
5010
|
-
if (suggestion_state?.is_active && editor
|
|
5022
|
+
if (suggestion_state?.is_active && editor) {
|
|
5011
5023
|
requestAnimationFrame(() => {
|
|
5012
|
-
const container = editor_container_ref.current;
|
|
5013
|
-
if (!container) return;
|
|
5014
|
-
const container_rect = container.getBoundingClientRect();
|
|
5015
5024
|
const { from } = suggestion_state.range;
|
|
5016
5025
|
try {
|
|
5017
5026
|
const coords = editor.view.coordsAtPos(from);
|
|
5018
5027
|
if (coords) {
|
|
5019
5028
|
set_popover_position({
|
|
5020
|
-
top: coords.bottom
|
|
5021
|
-
left: coords.left
|
|
5029
|
+
top: coords.bottom + 4,
|
|
5030
|
+
left: coords.left
|
|
5022
5031
|
});
|
|
5023
5032
|
}
|
|
5024
5033
|
} catch {
|
|
5025
5034
|
const rect = suggestion_state.client_rect?.();
|
|
5026
5035
|
if (rect) {
|
|
5027
5036
|
set_popover_position({
|
|
5028
|
-
top: rect.bottom
|
|
5029
|
-
left: rect.left
|
|
5037
|
+
top: rect.bottom + 4,
|
|
5038
|
+
left: rect.left
|
|
5030
5039
|
});
|
|
5031
5040
|
}
|
|
5032
5041
|
}
|
|
@@ -5207,8 +5216,7 @@ var HazoUiTextbox = ({
|
|
|
5207
5216
|
const handle_pill_click = (e) => {
|
|
5208
5217
|
const detail = e.detail;
|
|
5209
5218
|
const { id, prefix, action, action_label, node_pos } = detail;
|
|
5210
|
-
if (editor
|
|
5211
|
-
const container_rect = editor_container_ref.current.getBoundingClientRect();
|
|
5219
|
+
if (editor) {
|
|
5212
5220
|
try {
|
|
5213
5221
|
const coords = editor.view.coordsAtPos(node_pos);
|
|
5214
5222
|
if (coords) {
|
|
@@ -5227,8 +5235,8 @@ var HazoUiTextbox = ({
|
|
|
5227
5235
|
},
|
|
5228
5236
|
node_pos,
|
|
5229
5237
|
rect: new DOMRect(
|
|
5230
|
-
coords.left
|
|
5231
|
-
coords.bottom
|
|
5238
|
+
coords.left,
|
|
5239
|
+
coords.bottom + 4,
|
|
5232
5240
|
0,
|
|
5233
5241
|
0
|
|
5234
5242
|
)
|
|
@@ -5288,63 +5296,68 @@ var HazoUiTextbox = ({
|
|
|
5288
5296
|
on_selection_change: set_selected_index
|
|
5289
5297
|
}
|
|
5290
5298
|
),
|
|
5291
|
-
edit_context &&
|
|
5292
|
-
|
|
5293
|
-
|
|
5294
|
-
|
|
5295
|
-
|
|
5296
|
-
|
|
5297
|
-
|
|
5298
|
-
|
|
5299
|
-
|
|
5300
|
-
|
|
5301
|
-
|
|
5302
|
-
|
|
5303
|
-
|
|
5304
|
-
|
|
5305
|
-
|
|
5306
|
-
|
|
5307
|
-
|
|
5308
|
-
|
|
5309
|
-
|
|
5310
|
-
|
|
5311
|
-
|
|
5312
|
-
|
|
5313
|
-
|
|
5314
|
-
|
|
5315
|
-
|
|
5316
|
-
|
|
5317
|
-
|
|
5318
|
-
|
|
5319
|
-
|
|
5320
|
-
|
|
5321
|
-
|
|
5322
|
-
|
|
5323
|
-
|
|
5324
|
-
|
|
5299
|
+
edit_context && mounted && reactDom.createPortal(
|
|
5300
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5301
|
+
"div",
|
|
5302
|
+
{
|
|
5303
|
+
ref: edit_popover_ref,
|
|
5304
|
+
className: cn(
|
|
5305
|
+
"cls_edit_popover",
|
|
5306
|
+
"fixed",
|
|
5307
|
+
"w-64 min-w-[200px] max-w-[300px]",
|
|
5308
|
+
"rounded-md border bg-popover text-popover-foreground shadow-lg",
|
|
5309
|
+
"animate-in fade-in-0 zoom-in-95"
|
|
5310
|
+
),
|
|
5311
|
+
style: {
|
|
5312
|
+
position: "fixed",
|
|
5313
|
+
top: edit_context.rect.y,
|
|
5314
|
+
left: edit_context.rect.x,
|
|
5315
|
+
zIndex: 9999
|
|
5316
|
+
},
|
|
5317
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-1", children: [
|
|
5318
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground border-b", children: "Change command" }),
|
|
5319
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-[200px] overflow-y-auto", children: [
|
|
5320
|
+
edit_commands.map((cmd, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5321
|
+
"div",
|
|
5322
|
+
{
|
|
5323
|
+
className: cn(
|
|
5324
|
+
"px-3 py-2 cursor-pointer flex items-center gap-2",
|
|
5325
|
+
"hover:bg-accent",
|
|
5326
|
+
idx === edit_selected_index && "bg-accent",
|
|
5327
|
+
cmd.action === edit_context.command.action && "font-medium"
|
|
5328
|
+
),
|
|
5329
|
+
onClick: () => handle_command_update(cmd),
|
|
5330
|
+
children: [
|
|
5331
|
+
cmd.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-muted-foreground", children: cmd.icon }),
|
|
5332
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
5333
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "truncate", children: [
|
|
5334
|
+
edit_context.command.prefix,
|
|
5335
|
+
cmd.action_label
|
|
5336
|
+
] }),
|
|
5337
|
+
cmd.action_description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground truncate", children: cmd.action_description })
|
|
5325
5338
|
] }),
|
|
5326
|
-
cmd.
|
|
5327
|
-
]
|
|
5328
|
-
|
|
5329
|
-
|
|
5330
|
-
|
|
5331
|
-
|
|
5332
|
-
|
|
5333
|
-
|
|
5334
|
-
|
|
5335
|
-
|
|
5336
|
-
|
|
5337
|
-
|
|
5338
|
-
|
|
5339
|
-
|
|
5340
|
-
|
|
5341
|
-
|
|
5342
|
-
|
|
5343
|
-
|
|
5344
|
-
)
|
|
5339
|
+
cmd.action === edit_context.command.action && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "current" })
|
|
5340
|
+
]
|
|
5341
|
+
},
|
|
5342
|
+
cmd.action
|
|
5343
|
+
)),
|
|
5344
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5345
|
+
"div",
|
|
5346
|
+
{
|
|
5347
|
+
className: cn(
|
|
5348
|
+
"px-3 py-2 cursor-pointer flex items-center gap-2 text-destructive border-t",
|
|
5349
|
+
"hover:bg-destructive/10",
|
|
5350
|
+
edit_selected_index === edit_commands.length && "bg-destructive/10"
|
|
5351
|
+
),
|
|
5352
|
+
onClick: handle_command_remove,
|
|
5353
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Remove" })
|
|
5354
|
+
}
|
|
5355
|
+
)
|
|
5356
|
+
] })
|
|
5345
5357
|
] })
|
|
5346
|
-
|
|
5347
|
-
|
|
5358
|
+
}
|
|
5359
|
+
),
|
|
5360
|
+
document.body
|
|
5348
5361
|
)
|
|
5349
5362
|
]
|
|
5350
5363
|
}
|
|
@@ -5488,6 +5501,10 @@ var HazoUiTextarea = ({
|
|
|
5488
5501
|
const is_controlled = value !== void 0;
|
|
5489
5502
|
const editor_container_ref = React27__namespace.useRef(null);
|
|
5490
5503
|
const edit_popover_ref = React27__namespace.useRef(null);
|
|
5504
|
+
const [mounted, set_mounted] = React27__namespace.useState(false);
|
|
5505
|
+
React27__namespace.useEffect(() => {
|
|
5506
|
+
set_mounted(true);
|
|
5507
|
+
}, []);
|
|
5491
5508
|
const calculated_min_height = rows ? `${rows * 1.5}em` : min_height;
|
|
5492
5509
|
const suggestion_extensions = React27__namespace.useMemo(() => {
|
|
5493
5510
|
return create_command_suggestion_extension({
|
|
@@ -5538,26 +5555,23 @@ var HazoUiTextarea = ({
|
|
|
5538
5555
|
}
|
|
5539
5556
|
});
|
|
5540
5557
|
React27__namespace.useEffect(() => {
|
|
5541
|
-
if (suggestion_state?.is_active && editor
|
|
5558
|
+
if (suggestion_state?.is_active && editor) {
|
|
5542
5559
|
requestAnimationFrame(() => {
|
|
5543
|
-
const container = editor_container_ref.current;
|
|
5544
|
-
if (!container) return;
|
|
5545
|
-
const container_rect = container.getBoundingClientRect();
|
|
5546
5560
|
const { from } = suggestion_state.range;
|
|
5547
5561
|
try {
|
|
5548
5562
|
const coords = editor.view.coordsAtPos(from);
|
|
5549
5563
|
if (coords) {
|
|
5550
5564
|
set_popover_position({
|
|
5551
|
-
top: coords.bottom
|
|
5552
|
-
left: coords.left
|
|
5565
|
+
top: coords.bottom + 4,
|
|
5566
|
+
left: coords.left
|
|
5553
5567
|
});
|
|
5554
5568
|
}
|
|
5555
5569
|
} catch {
|
|
5556
5570
|
const rect = suggestion_state.client_rect?.();
|
|
5557
5571
|
if (rect) {
|
|
5558
5572
|
set_popover_position({
|
|
5559
|
-
top: rect.bottom
|
|
5560
|
-
left: rect.left
|
|
5573
|
+
top: rect.bottom + 4,
|
|
5574
|
+
left: rect.left
|
|
5561
5575
|
});
|
|
5562
5576
|
}
|
|
5563
5577
|
}
|
|
@@ -5742,8 +5756,7 @@ var HazoUiTextarea = ({
|
|
|
5742
5756
|
const handle_pill_click = (e) => {
|
|
5743
5757
|
const detail = e.detail;
|
|
5744
5758
|
const { id, prefix, action, action_label, node_pos } = detail;
|
|
5745
|
-
if (editor
|
|
5746
|
-
const container_rect = editor_container_ref.current.getBoundingClientRect();
|
|
5759
|
+
if (editor) {
|
|
5747
5760
|
try {
|
|
5748
5761
|
const coords = editor.view.coordsAtPos(node_pos);
|
|
5749
5762
|
if (coords) {
|
|
@@ -5762,8 +5775,8 @@ var HazoUiTextarea = ({
|
|
|
5762
5775
|
},
|
|
5763
5776
|
node_pos,
|
|
5764
5777
|
rect: new DOMRect(
|
|
5765
|
-
coords.left
|
|
5766
|
-
coords.bottom
|
|
5778
|
+
coords.left,
|
|
5779
|
+
coords.bottom + 4,
|
|
5767
5780
|
0,
|
|
5768
5781
|
0
|
|
5769
5782
|
)
|
|
@@ -5827,63 +5840,68 @@ var HazoUiTextarea = ({
|
|
|
5827
5840
|
on_selection_change: set_selected_index
|
|
5828
5841
|
}
|
|
5829
5842
|
),
|
|
5830
|
-
edit_context &&
|
|
5831
|
-
|
|
5832
|
-
|
|
5833
|
-
|
|
5834
|
-
|
|
5835
|
-
|
|
5836
|
-
|
|
5837
|
-
|
|
5838
|
-
|
|
5839
|
-
|
|
5840
|
-
|
|
5841
|
-
|
|
5842
|
-
|
|
5843
|
-
|
|
5844
|
-
|
|
5845
|
-
|
|
5846
|
-
|
|
5847
|
-
|
|
5848
|
-
|
|
5849
|
-
|
|
5850
|
-
|
|
5851
|
-
|
|
5852
|
-
|
|
5853
|
-
|
|
5854
|
-
|
|
5855
|
-
|
|
5856
|
-
|
|
5857
|
-
|
|
5858
|
-
|
|
5859
|
-
|
|
5860
|
-
|
|
5861
|
-
|
|
5862
|
-
|
|
5863
|
-
|
|
5843
|
+
edit_context && mounted && reactDom.createPortal(
|
|
5844
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5845
|
+
"div",
|
|
5846
|
+
{
|
|
5847
|
+
ref: edit_popover_ref,
|
|
5848
|
+
className: cn(
|
|
5849
|
+
"cls_edit_popover",
|
|
5850
|
+
"fixed",
|
|
5851
|
+
"w-64 min-w-[200px] max-w-[300px]",
|
|
5852
|
+
"rounded-md border bg-popover text-popover-foreground shadow-lg",
|
|
5853
|
+
"animate-in fade-in-0 zoom-in-95"
|
|
5854
|
+
),
|
|
5855
|
+
style: {
|
|
5856
|
+
position: "fixed",
|
|
5857
|
+
top: edit_context.rect.y,
|
|
5858
|
+
left: edit_context.rect.x,
|
|
5859
|
+
zIndex: 9999
|
|
5860
|
+
},
|
|
5861
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-1", children: [
|
|
5862
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground border-b", children: "Change command" }),
|
|
5863
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-[200px] overflow-y-auto", children: [
|
|
5864
|
+
edit_commands.map((cmd, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5865
|
+
"div",
|
|
5866
|
+
{
|
|
5867
|
+
className: cn(
|
|
5868
|
+
"px-3 py-2 cursor-pointer flex items-center gap-2",
|
|
5869
|
+
"hover:bg-accent",
|
|
5870
|
+
idx === edit_selected_index && "bg-accent",
|
|
5871
|
+
cmd.action === edit_context.command.action && "font-medium"
|
|
5872
|
+
),
|
|
5873
|
+
onClick: () => handle_command_update(cmd),
|
|
5874
|
+
children: [
|
|
5875
|
+
cmd.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-muted-foreground", children: cmd.icon }),
|
|
5876
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
5877
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "truncate", children: [
|
|
5878
|
+
edit_context.command.prefix,
|
|
5879
|
+
cmd.action_label
|
|
5880
|
+
] }),
|
|
5881
|
+
cmd.action_description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground truncate", children: cmd.action_description })
|
|
5864
5882
|
] }),
|
|
5865
|
-
cmd.
|
|
5866
|
-
]
|
|
5867
|
-
|
|
5868
|
-
|
|
5869
|
-
|
|
5870
|
-
|
|
5871
|
-
|
|
5872
|
-
|
|
5873
|
-
|
|
5874
|
-
|
|
5875
|
-
|
|
5876
|
-
|
|
5877
|
-
|
|
5878
|
-
|
|
5879
|
-
|
|
5880
|
-
|
|
5881
|
-
|
|
5882
|
-
|
|
5883
|
-
)
|
|
5883
|
+
cmd.action === edit_context.command.action && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "current" })
|
|
5884
|
+
]
|
|
5885
|
+
},
|
|
5886
|
+
cmd.action
|
|
5887
|
+
)),
|
|
5888
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5889
|
+
"div",
|
|
5890
|
+
{
|
|
5891
|
+
className: cn(
|
|
5892
|
+
"px-3 py-2 cursor-pointer flex items-center gap-2 text-destructive border-t",
|
|
5893
|
+
"hover:bg-destructive/10",
|
|
5894
|
+
edit_selected_index === edit_commands.length && "bg-destructive/10"
|
|
5895
|
+
),
|
|
5896
|
+
onClick: handle_command_remove,
|
|
5897
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Remove" })
|
|
5898
|
+
}
|
|
5899
|
+
)
|
|
5900
|
+
] })
|
|
5884
5901
|
] })
|
|
5885
|
-
|
|
5886
|
-
|
|
5902
|
+
}
|
|
5903
|
+
),
|
|
5904
|
+
document.body
|
|
5887
5905
|
)
|
|
5888
5906
|
]
|
|
5889
5907
|
}
|