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