@chaibuilder/sdk 2.2.29 → 2.2.31
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/core.cjs +6 -4
- package/dist/core.d.ts +14 -0
- package/dist/core.js +1003 -963
- package/dist/render.cjs +2 -2
- package/dist/render.js +76 -68
- package/dist/web-blocks.cjs +1 -1
- package/dist/web-blocks.js +16 -13
- package/package.json +1 -1
package/dist/core.js
CHANGED
|
@@ -73,8 +73,6 @@ const activePanelAtom = atom("outline");
|
|
|
73
73
|
activePanelAtom.debugLabel = "activePanelAtom";
|
|
74
74
|
const showPredefinedBlockCategoryAtom = atom("");
|
|
75
75
|
showPredefinedBlockCategoryAtom.debugLabel = "showPredefinedBlockCategoryAtom";
|
|
76
|
-
const inlineEditingActiveAtom = atom("");
|
|
77
|
-
inlineEditingActiveAtom.debugLabel = "inlineEditingActiveAtom";
|
|
78
76
|
const draggingFlagAtom = atom(!1);
|
|
79
77
|
draggingFlagAtom.debugLabel = "draggingFlagAtom";
|
|
80
78
|
const treeRefAtom = atom(null);
|
|
@@ -299,12 +297,12 @@ class PubSub {
|
|
|
299
297
|
}
|
|
300
298
|
}
|
|
301
299
|
const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: n }) => {
|
|
302
|
-
const { t: r } = useTranslation(), [a] = useBlocksStore(), { hasPermission: l } = usePermissions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(a, (
|
|
303
|
-
if (
|
|
300
|
+
const { t: r } = useTranslation(), [a] = useBlocksStore(), { hasPermission: l } = usePermissions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(a, (h) => c ? get(h, "_parent") === c : !get(h, "_parent")), p = canAddChildBlock(get(o, "_type", "")), u = findIndex(d, { _id: i }), g = (h) => {
|
|
301
|
+
if (h === "CHILD")
|
|
304
302
|
pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, o);
|
|
305
303
|
else {
|
|
306
|
-
const
|
|
307
|
-
|
|
304
|
+
const m = { _id: c || "", position: d == null ? void 0 : d.length };
|
|
305
|
+
h === "BEFORE" ? m.position = Math.max(u, 0) : h === "AFTER" && (m.position = u + 1), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, m);
|
|
308
306
|
}
|
|
309
307
|
};
|
|
310
308
|
return l(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
|
|
@@ -339,20 +337,20 @@ function insertBlocksAtPosition(o, n, r, a) {
|
|
|
339
337
|
let i = [...o];
|
|
340
338
|
if (r) {
|
|
341
339
|
const u = o.find((g) => g._id === r);
|
|
342
|
-
if (u && u.content !== void 0 && u.content !== "" && !o.some((
|
|
343
|
-
const
|
|
340
|
+
if (u && u.content !== void 0 && u.content !== "" && !o.some((h) => h._parent === r)) {
|
|
341
|
+
const m = {
|
|
344
342
|
_id: generateUUID(),
|
|
345
343
|
_parent: r,
|
|
346
344
|
_type: "Text",
|
|
347
345
|
content: u.content
|
|
348
346
|
};
|
|
349
347
|
Object.keys(u).forEach((f) => {
|
|
350
|
-
f.startsWith("content-") && (
|
|
351
|
-
}), l.unshift(
|
|
348
|
+
f.startsWith("content-") && (m[f] = u[f]);
|
|
349
|
+
}), l.unshift(m), i = i.map((f) => {
|
|
352
350
|
if (f._id === r) {
|
|
353
351
|
const x = { ...f, content: "" };
|
|
354
|
-
return Object.keys(x).forEach((
|
|
355
|
-
|
|
352
|
+
return Object.keys(x).forEach((k) => {
|
|
353
|
+
k.startsWith("content-") && (x[k] = "");
|
|
356
354
|
}), x;
|
|
357
355
|
}
|
|
358
356
|
return f;
|
|
@@ -388,13 +386,13 @@ function moveNode(o, n, r, a) {
|
|
|
388
386
|
const l = findNodeById(o, n), i = findNodeById(o, r);
|
|
389
387
|
if (!l || !i) return !1;
|
|
390
388
|
i.children || (i.model.children = []);
|
|
391
|
-
let c = (u = i == null ? void 0 : i.children) == null ? void 0 : u.findIndex((
|
|
389
|
+
let c = (u = i == null ? void 0 : i.children) == null ? void 0 : u.findIndex((h) => h.model._id === n);
|
|
392
390
|
l.drop(), c = Math.max(c, 0);
|
|
393
391
|
const p = (((g = l == null ? void 0 : l.model) == null ? void 0 : g._parent) || "root") === r && c <= a ? a - 1 : a;
|
|
394
392
|
try {
|
|
395
393
|
i.addChildAtIndex(l, p);
|
|
396
|
-
} catch (
|
|
397
|
-
return console.error("Error adding child to parent:",
|
|
394
|
+
} catch (h) {
|
|
395
|
+
return console.error("Error adding child to parent:", h), !1;
|
|
398
396
|
}
|
|
399
397
|
return !0;
|
|
400
398
|
}
|
|
@@ -435,8 +433,8 @@ function handleNewParentTextBlock(o, n, r) {
|
|
|
435
433
|
const d = o.map((u) => {
|
|
436
434
|
if (u._id === r) {
|
|
437
435
|
const g = { ...u, content: "" };
|
|
438
|
-
return Object.keys(g).forEach((
|
|
439
|
-
|
|
436
|
+
return Object.keys(g).forEach((h) => {
|
|
437
|
+
h.startsWith("content-") && (g[h] = "");
|
|
440
438
|
}), g;
|
|
441
439
|
}
|
|
442
440
|
return u;
|
|
@@ -453,7 +451,7 @@ function moveBlocksWithChildren(o, n, r, a) {
|
|
|
453
451
|
const c = r || "root", p = new TreeModel().parse({ _id: "root", children: getBlocksTree(i) });
|
|
454
452
|
if (moveNode(p, n, c, a)) {
|
|
455
453
|
let u = flattenTree(p);
|
|
456
|
-
const g = u.find((
|
|
454
|
+
const g = u.find((h) => h._id === n);
|
|
457
455
|
return g && (g._parent = c === "root" ? null : c), u.shift(), r && (u = handleNewParentTextBlock(u, l, r)), u;
|
|
458
456
|
}
|
|
459
457
|
return i;
|
|
@@ -477,22 +475,22 @@ const broadcastChannel = new BroadcastChannel("chaibuilder"), useBroadcastChanne
|
|
|
477
475
|
}, removeNestedBlocks = (o, n) => {
|
|
478
476
|
let r = [...o], a = [];
|
|
479
477
|
n.forEach((d) => {
|
|
480
|
-
const p = r.find((
|
|
478
|
+
const p = r.find((h) => h._id === d);
|
|
481
479
|
if (!p || !p._parent) return;
|
|
482
|
-
const u = p._parent, g = r.filter((
|
|
480
|
+
const u = p._parent, g = r.filter((h) => h._parent === u);
|
|
483
481
|
if (g.length === 2) {
|
|
484
|
-
const
|
|
485
|
-
if (
|
|
486
|
-
const
|
|
487
|
-
|
|
482
|
+
const h = g.find((m) => m._id !== d);
|
|
483
|
+
if (h && h._type === "Text") {
|
|
484
|
+
const m = r.find((f) => f._id === u);
|
|
485
|
+
m && "content" in m && (r = r.map((f) => {
|
|
488
486
|
if (f._id === u) {
|
|
489
|
-
const x = { ...f, content:
|
|
490
|
-
return Object.keys(
|
|
491
|
-
|
|
487
|
+
const x = { ...f, content: h.content };
|
|
488
|
+
return Object.keys(h).forEach((k) => {
|
|
489
|
+
k.startsWith("content-") && (x[k] = h[k]);
|
|
492
490
|
}), x;
|
|
493
491
|
}
|
|
494
492
|
return f;
|
|
495
|
-
}), a.push(
|
|
493
|
+
}), a.push(h._id));
|
|
496
494
|
}
|
|
497
495
|
}
|
|
498
496
|
});
|
|
@@ -574,7 +572,7 @@ const useBlockRepeaterDataAtom = () => useAtom$1(blockRepeaterDataAtom), useAsyn
|
|
|
574
572
|
status: "idle",
|
|
575
573
|
props: {},
|
|
576
574
|
error: void 0
|
|
577
|
-
}), c = useUpdateBlocksPropsRealtime(), d = useBuilderProp("getBlockAsyncProps", async (f) => ({})), p = useSetAtom$1(blockRepeaterDataAtom), u = JSON.stringify([o == null ? void 0 : o._id, ...values(pick(o, r ?? []))]), g = (o == null ? void 0 : o._type) === "Repeater" && startsWith(o.repeaterItems, `{{${COLLECTION_PREFIX}`),
|
|
575
|
+
}), c = useUpdateBlocksPropsRealtime(), d = useBuilderProp("getBlockAsyncProps", async (f) => ({})), p = useSetAtom$1(blockRepeaterDataAtom), u = JSON.stringify([o == null ? void 0 : o._id, ...values(pick(o, r ?? []))]), g = (o == null ? void 0 : o._type) === "Repeater" && startsWith(o.repeaterItems, `{{${COLLECTION_PREFIX}`), h = (o == null ? void 0 : o._type) !== "Repeater" && n === "live";
|
|
578
576
|
return useEffect(() => {
|
|
579
577
|
if (n === "mock") {
|
|
580
578
|
if (isFunction(a)) {
|
|
@@ -586,7 +584,7 @@ const useBlockRepeaterDataAtom = () => useAtom$1(blockRepeaterDataAtom), useAsyn
|
|
|
586
584
|
}
|
|
587
585
|
return;
|
|
588
586
|
}
|
|
589
|
-
n === "live" && (!g && !
|
|
587
|
+
n === "live" && (!g && !h || (i((f) => ({ ...f, status: "loading", props: {} })), d({ block: o }).then((f = {}) => {
|
|
590
588
|
g ? (p((x) => ({
|
|
591
589
|
...x,
|
|
592
590
|
[o._id]: {
|
|
@@ -601,7 +599,7 @@ const useBlockRepeaterDataAtom = () => useAtom$1(blockRepeaterDataAtom), useAsyn
|
|
|
601
599
|
[o._id]: { status: "error", error: f, props: [] }
|
|
602
600
|
})), i((x) => ({ ...x, status: "error", error: f, props: {} }))) : i((x) => ({ ...x, status: "error", error: f, props: {} }));
|
|
603
601
|
})));
|
|
604
|
-
}, [o == null ? void 0 : o._id, u, g,
|
|
602
|
+
}, [o == null ? void 0 : o._id, u, g, h, a, n]), {
|
|
605
603
|
$loading: get(l, "status") === "loading",
|
|
606
604
|
...o ? get(l, "props", {}) : {}
|
|
607
605
|
};
|
|
@@ -801,50 +799,50 @@ const undoRedoStateAtom = atom({
|
|
|
801
799
|
updateBlocksProps: c
|
|
802
800
|
} = useBlocksStoreManager();
|
|
803
801
|
return {
|
|
804
|
-
moveBlocks: (x,
|
|
802
|
+
moveBlocks: (x, k, b) => {
|
|
805
803
|
const v = map(x, (w) => {
|
|
806
|
-
const
|
|
807
|
-
return { _id: w, oldParent:
|
|
804
|
+
const E = n.find((N) => N._id === w)._parent || null, A = n.filter((N) => E ? N._parent === E : !N._parent).map((N) => N._id).indexOf(w);
|
|
805
|
+
return { _id: w, oldParent: E, oldPosition: A };
|
|
808
806
|
}), B = v.find(({ _id: w }) => w === x[0]);
|
|
809
|
-
B && B.oldParent ===
|
|
810
|
-
undo: () => each(v, ({ _id: w, oldParent:
|
|
811
|
-
i([w],
|
|
807
|
+
B && B.oldParent === k && B.oldPosition === b || (i(x, k, b), o({
|
|
808
|
+
undo: () => each(v, ({ _id: w, oldParent: _, oldPosition: E }) => {
|
|
809
|
+
i([w], _, E);
|
|
812
810
|
}),
|
|
813
|
-
redo: () => i(x,
|
|
811
|
+
redo: () => i(x, k, b)
|
|
814
812
|
}));
|
|
815
813
|
},
|
|
816
|
-
addBlocks: (x,
|
|
817
|
-
a(x,
|
|
814
|
+
addBlocks: (x, k, b) => {
|
|
815
|
+
a(x, k, b), o({
|
|
818
816
|
undo: () => l(map(x, "_id")),
|
|
819
|
-
redo: () => a(x,
|
|
817
|
+
redo: () => a(x, k, b)
|
|
820
818
|
});
|
|
821
819
|
},
|
|
822
820
|
removeBlocks: (x) => {
|
|
823
821
|
var B;
|
|
824
|
-
const
|
|
822
|
+
const k = (B = first(x)) == null ? void 0 : B._parent, v = n.filter((w) => k ? w._parent === k : !w._parent).indexOf(first(x));
|
|
825
823
|
l(map(x, "_id")), o({
|
|
826
|
-
undo: () => a(x,
|
|
824
|
+
undo: () => a(x, k, v),
|
|
827
825
|
redo: () => l(map(x, "_id"))
|
|
828
826
|
});
|
|
829
827
|
},
|
|
830
|
-
updateBlocks: (x,
|
|
828
|
+
updateBlocks: (x, k, b) => {
|
|
831
829
|
let v = [];
|
|
832
830
|
if (b)
|
|
833
831
|
v = map(x, (B) => ({ _id: B, ...b }));
|
|
834
832
|
else {
|
|
835
|
-
const B = keys(
|
|
833
|
+
const B = keys(k);
|
|
836
834
|
v = map(x, (w) => {
|
|
837
|
-
const
|
|
838
|
-
return each(B, (
|
|
835
|
+
const _ = n.find((C) => C._id === w), E = { _id: w };
|
|
836
|
+
return each(B, (C) => E[C] = _[C]), E;
|
|
839
837
|
});
|
|
840
838
|
}
|
|
841
|
-
c(map(x, (B) => ({ _id: B, ...
|
|
839
|
+
c(map(x, (B) => ({ _id: B, ...k }))), o({
|
|
842
840
|
undo: () => c(v),
|
|
843
|
-
redo: () => c(map(x, (B) => ({ _id: B, ...
|
|
841
|
+
redo: () => c(map(x, (B) => ({ _id: B, ...k })))
|
|
844
842
|
});
|
|
845
843
|
},
|
|
846
|
-
updateBlocksRuntime: (x,
|
|
847
|
-
c(map(x, (b) => ({ _id: b, ...
|
|
844
|
+
updateBlocksRuntime: (x, k) => {
|
|
845
|
+
c(map(x, (b) => ({ _id: b, ...k })));
|
|
848
846
|
},
|
|
849
847
|
setNewBlocks: (x) => {
|
|
850
848
|
r(x), o({
|
|
@@ -853,12 +851,12 @@ const undoRedoStateAtom = atom({
|
|
|
853
851
|
});
|
|
854
852
|
},
|
|
855
853
|
updateMultipleBlocksProps: (x) => {
|
|
856
|
-
let
|
|
857
|
-
|
|
858
|
-
const v = keys(b), B = n.find((
|
|
859
|
-
return each(v, (
|
|
854
|
+
let k = [];
|
|
855
|
+
k = map(x, (b) => {
|
|
856
|
+
const v = keys(b), B = n.find((_) => _._id === b._id), w = {};
|
|
857
|
+
return each(v, (_) => w[_] = B[_]), w;
|
|
860
858
|
}), c(x), o({
|
|
861
|
-
undo: () => c(
|
|
859
|
+
undo: () => c(k),
|
|
862
860
|
redo: () => c(x)
|
|
863
861
|
});
|
|
864
862
|
}
|
|
@@ -866,25 +864,25 @@ const undoRedoStateAtom = atom({
|
|
|
866
864
|
}, useAddBlock = () => {
|
|
867
865
|
const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions(), a = useCallback(
|
|
868
866
|
(i, c, d) => {
|
|
869
|
-
var
|
|
867
|
+
var m;
|
|
870
868
|
for (let f = 0; f < i.length; f++) {
|
|
871
869
|
const { _id: x } = i[f];
|
|
872
870
|
i[f]._id = generateUUID();
|
|
873
|
-
const
|
|
874
|
-
for (let b = 0; b <
|
|
875
|
-
|
|
871
|
+
const k = filter(i, { _parent: x });
|
|
872
|
+
for (let b = 0; b < k.length; b++)
|
|
873
|
+
k[b]._parent = i[f]._id;
|
|
876
874
|
}
|
|
877
875
|
const p = first(i);
|
|
878
876
|
let u, g;
|
|
879
|
-
return c && (u = find(o, { _id: c }), i[0]._parent = c, g = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, g = u._parent), r(i, g, d), n([(
|
|
877
|
+
return c && (u = find(o, { _id: c }), i[0]._parent = c, g = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, g = u._parent), r(i, g, d), n([(m = first(i)) == null ? void 0 : m._id]), first(i);
|
|
880
878
|
},
|
|
881
879
|
[r, o, n]
|
|
882
880
|
);
|
|
883
881
|
return { addCoreBlock: useCallback(
|
|
884
882
|
(i, c, d) => {
|
|
885
883
|
if (has(i, "blocks")) {
|
|
886
|
-
const
|
|
887
|
-
return a(
|
|
884
|
+
const k = i.blocks;
|
|
885
|
+
return a(k, c, d);
|
|
888
886
|
}
|
|
889
887
|
const p = generateUUID(), u = getDefaultBlockProps(i.type), g = {
|
|
890
888
|
_type: i.type,
|
|
@@ -893,8 +891,8 @@ const undoRedoStateAtom = atom({
|
|
|
893
891
|
...has(i, "_name") && { _name: i._name },
|
|
894
892
|
...has(i, "partialBlockId") && { partialBlockId: i.partialBlockId }
|
|
895
893
|
};
|
|
896
|
-
let
|
|
897
|
-
return c && (
|
|
894
|
+
let h, m;
|
|
895
|
+
return c && (h = find(o, { _id: c }), g._parent = c, m = c), !canAcceptChildBlock(h == null ? void 0 : h._type, g._type) && h && (g._parent = h._parent, m = h._parent), r([g], m, d), n([g._id]), g;
|
|
898
896
|
},
|
|
899
897
|
[r, a, o, n]
|
|
900
898
|
), addPredefinedBlock: a };
|
|
@@ -2334,43 +2332,43 @@ const getBlockWithChildren = (o, n) => {
|
|
|
2334
2332
|
return isEmpty(c) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...c });
|
|
2335
2333
|
})
|
|
2336
2334
|
), addLangToPrompt = (o, n, r) => !n || r !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, n, n)} language.`, askAiProcessingAtom = atom(!1), useAskAi = () => {
|
|
2337
|
-
const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u,
|
|
2338
|
-
const x = cloneDeep(f.find((
|
|
2339
|
-
for (const
|
|
2340
|
-
const b = x[
|
|
2335
|
+
const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, h = (m, f) => {
|
|
2336
|
+
const x = cloneDeep(f.find((k) => k._id === m));
|
|
2337
|
+
for (const k in x) {
|
|
2338
|
+
const b = x[k];
|
|
2341
2339
|
if (typeof b == "string" && startsWith(b, STYLES_KEY)) {
|
|
2342
2340
|
const { baseClasses: v, classes: B } = getSplitChaiClasses(b);
|
|
2343
|
-
x[
|
|
2341
|
+
x[k] = compact(flattenDeep([v, B])).join(" ");
|
|
2344
2342
|
} else
|
|
2345
|
-
|
|
2343
|
+
k !== "_id" && delete x[k];
|
|
2346
2344
|
}
|
|
2347
2345
|
return x;
|
|
2348
2346
|
};
|
|
2349
2347
|
return {
|
|
2350
2348
|
askAi: useCallback(
|
|
2351
|
-
async (
|
|
2349
|
+
async (m, f, x, k) => {
|
|
2352
2350
|
if (l) {
|
|
2353
2351
|
n(!0), a(null);
|
|
2354
2352
|
try {
|
|
2355
|
-
const b = p === u ? "" : p, v =
|
|
2356
|
-
if (
|
|
2357
|
-
a(
|
|
2353
|
+
const b = p === u ? "" : p, v = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [h(f, d)], B = await l(m, addLangToPrompt(x, g, m), v, b), { blocks: w, error: _ } = B;
|
|
2354
|
+
if (_) {
|
|
2355
|
+
a(_);
|
|
2358
2356
|
return;
|
|
2359
2357
|
}
|
|
2360
|
-
if (
|
|
2361
|
-
const
|
|
2362
|
-
for (const A in
|
|
2363
|
-
A !== "_id" && (
|
|
2364
|
-
return
|
|
2358
|
+
if (m === "styles") {
|
|
2359
|
+
const E = w.map((C) => {
|
|
2360
|
+
for (const A in C)
|
|
2361
|
+
A !== "_id" && (C[A] = `${STYLES_KEY},${C[A]}`);
|
|
2362
|
+
return C;
|
|
2365
2363
|
});
|
|
2366
|
-
c(
|
|
2364
|
+
c(E);
|
|
2367
2365
|
} else
|
|
2368
2366
|
i(w);
|
|
2369
|
-
|
|
2367
|
+
k && k(B);
|
|
2370
2368
|
} catch (b) {
|
|
2371
2369
|
a(b);
|
|
2372
2370
|
} finally {
|
|
2373
|
-
n(!1),
|
|
2371
|
+
n(!1), k && k();
|
|
2374
2372
|
}
|
|
2375
2373
|
}
|
|
2376
2374
|
},
|
|
@@ -2459,17 +2457,17 @@ const getBlockWithChildren = (o, n) => {
|
|
|
2459
2457
|
r(d), a([]);
|
|
2460
2458
|
const u = {
|
|
2461
2459
|
_chai_copied_blocks: d.flatMap((g) => {
|
|
2462
|
-
const
|
|
2460
|
+
const h = getDuplicatedBlocks(o, g, null);
|
|
2463
2461
|
if (!p)
|
|
2464
|
-
return
|
|
2465
|
-
let
|
|
2466
|
-
for (const f of
|
|
2462
|
+
return h;
|
|
2463
|
+
let m = [];
|
|
2464
|
+
for (const f of h)
|
|
2467
2465
|
if (f._type === "PartialBlock" || f._type === "GlobalBlock") {
|
|
2468
2466
|
let x = l(f.partialBlockId);
|
|
2469
|
-
f._parent && (x == null ? void 0 : x.length) > 0 && (x = x.map((
|
|
2467
|
+
f._parent && (x == null ? void 0 : x.length) > 0 && (x = x.map((k) => (isEmpty(k._parent) && set(k, "_parent", f._parent), k))), m = [...m, ...x];
|
|
2470
2468
|
} else
|
|
2471
|
-
|
|
2472
|
-
return
|
|
2469
|
+
m.push(f);
|
|
2470
|
+
return m;
|
|
2473
2471
|
})
|
|
2474
2472
|
};
|
|
2475
2473
|
if (!navigator.clipboard) {
|
|
@@ -2507,13 +2505,13 @@ const getBlockWithChildren = (o, n) => {
|
|
|
2507
2505
|
(a, l = null) => {
|
|
2508
2506
|
const i = [];
|
|
2509
2507
|
each(a, (c) => {
|
|
2510
|
-
const d = o.find((
|
|
2508
|
+
const d = o.find((m) => m._id === c);
|
|
2511
2509
|
l ? l === "root" && (l = null) : l = d._parent;
|
|
2512
2510
|
const g = filter(
|
|
2513
2511
|
o,
|
|
2514
|
-
(
|
|
2515
|
-
).indexOf(d) + 1,
|
|
2516
|
-
r(
|
|
2512
|
+
(m) => isString(l) ? m._parent === l : !m._parent
|
|
2513
|
+
).indexOf(d) + 1, h = getDuplicatedBlocks(o, c, l);
|
|
2514
|
+
r(h, l, g), i.push(get(h, "0._id", ""));
|
|
2517
2515
|
}), n(i);
|
|
2518
2516
|
},
|
|
2519
2517
|
[o, n]
|
|
@@ -2650,13 +2648,13 @@ const getBlockWithChildren = (o, n) => {
|
|
|
2650
2648
|
return map(i, (c) => {
|
|
2651
2649
|
const d = o(c), p = a;
|
|
2652
2650
|
let { classes: u, baseClasses: g } = getSplitChaiClasses(get(d, l.prop, `${STYLES_KEY},`));
|
|
2653
|
-
return each(p, (
|
|
2654
|
-
const
|
|
2651
|
+
return each(p, (h) => {
|
|
2652
|
+
const m = h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
|
|
2655
2653
|
u = u.replace(f, " ").replace(/\s+/g, " ").trim();
|
|
2656
|
-
const x = first(
|
|
2657
|
-
includes(["2xl", "xl", "lg", "md", "sm"], x) && p.push(
|
|
2658
|
-
}), each(p, (
|
|
2659
|
-
const
|
|
2654
|
+
const x = first(h.split(":"));
|
|
2655
|
+
includes(["2xl", "xl", "lg", "md", "sm"], x) && p.push(h.split(":").pop().trim());
|
|
2656
|
+
}), each(p, (h) => {
|
|
2657
|
+
const m = h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
|
|
2660
2658
|
g = g.replace(f, " ").replace(/\s+/g, " ").trim();
|
|
2661
2659
|
}), {
|
|
2662
2660
|
ids: [d._id],
|
|
@@ -2740,7 +2738,19 @@ const getBlockWithChildren = (o, n) => {
|
|
|
2740
2738
|
return null;
|
|
2741
2739
|
});
|
|
2742
2740
|
wrapperBlockAtom.debugLabel = "wrapperBlockAtom";
|
|
2743
|
-
const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom),
|
|
2741
|
+
const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), inlineEditingActiveAtom = atom("");
|
|
2742
|
+
inlineEditingActiveAtom.debugLabel = "inlineEditingActiveAtom";
|
|
2743
|
+
const inlineEditingItemIndexAtom = atom(0);
|
|
2744
|
+
inlineEditingItemIndexAtom.debugLabel = "inlineEditingItemIndexAtom";
|
|
2745
|
+
const useInlineEditing = () => {
|
|
2746
|
+
const [o, n] = useAtom$1(inlineEditingActiveAtom), [r, a] = useAtom$1(inlineEditingItemIndexAtom);
|
|
2747
|
+
return {
|
|
2748
|
+
editingBlockId: o,
|
|
2749
|
+
editingItemIndex: r,
|
|
2750
|
+
setEditingBlockId: n,
|
|
2751
|
+
setEditingItemIndex: a
|
|
2752
|
+
};
|
|
2753
|
+
}, useSelectedLibrary = () => useAtom$1(selectedLibraryAtom), sidebarActivePanelAtom = atom("outline");
|
|
2744
2754
|
sidebarActivePanelAtom.debugLabel = "sidebarActivePanelAtom";
|
|
2745
2755
|
const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), CONTROLS = [
|
|
2746
2756
|
{ ControlIcon: PinTopIcon, dir: "VERTICAL", key: "UP" },
|
|
@@ -2760,21 +2770,21 @@ const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), CONTROLS
|
|
|
2760
2770
|
return "VERTICAL";
|
|
2761
2771
|
}
|
|
2762
2772
|
}, isDisabledControl = (o, n, r) => !!(o && (r === "UP" || r === "LEFT") || n && (r === "DOWN" || r === "RIGHT")), useBlockController = (o, n) => {
|
|
2763
|
-
const [r] = useBlocksStore(), { document: a } = useFrame(), { moveBlocks: l } = useBlocksStoreUndoableActions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(r, (x) => c ? get(x, "_parent") === c : !get(x, "_parent")), p = (d == null ? void 0 : d.length) <= 1, u = findIndex(d, { _id: i }), g = u <= 0,
|
|
2773
|
+
const [r] = useBlocksStore(), { document: a } = useFrame(), { moveBlocks: l } = useBlocksStoreUndoableActions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(r, (x) => c ? get(x, "_parent") === c : !get(x, "_parent")), p = (d == null ? void 0 : d.length) <= 1, u = findIndex(d, { _id: i }), g = u <= 0, h = u + 1 === (d == null ? void 0 : d.length), m = getParentBlockOrientation(c, i, a), f = useCallback(
|
|
2764
2774
|
(x) => {
|
|
2765
|
-
isDisabledControl(g,
|
|
2775
|
+
isDisabledControl(g, h, x) || p || (x === "UP" || x === "LEFT" ? l([i], c || null, u - 1) : (x === "DOWN" || x === "RIGHT") && l([i], c || null, u + 2), n());
|
|
2766
2776
|
},
|
|
2767
|
-
[g,
|
|
2777
|
+
[g, h, p, u, i, c, n]
|
|
2768
2778
|
);
|
|
2769
2779
|
return useHotkeys(
|
|
2770
2780
|
"shift+up, shift+down, shift+left, shift+right",
|
|
2771
2781
|
({ key: x }) => {
|
|
2772
|
-
var
|
|
2773
|
-
f((
|
|
2782
|
+
var k;
|
|
2783
|
+
f((k = x == null ? void 0 : x.replace("Arrow", "")) == null ? void 0 : k.toUpperCase());
|
|
2774
2784
|
},
|
|
2775
2785
|
{ document: a == null ? void 0 : a.contentDocument },
|
|
2776
2786
|
[f]
|
|
2777
|
-
), { isOnlyChild: p, isFirstBlock: g, isLastBlock:
|
|
2787
|
+
), { isOnlyChild: p, isFirstBlock: g, isLastBlock: h, moveBlock: f, orientation: m };
|
|
2778
2788
|
}, BlockController = ({ block: o, updateFloatingBar: n }) => {
|
|
2779
2789
|
const { isOnlyChild: r, isFirstBlock: a, isLastBlock: l, moveBlock: i, orientation: c } = useBlockController(
|
|
2780
2790
|
o,
|
|
@@ -2810,19 +2820,24 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span"],
|
|
|
2810
2820
|
const r = o == null ? void 0 : o.getAttribute("data-block-type");
|
|
2811
2821
|
return !r || o && o.children.length > 0 || r === "Button" ? !1 : INLINE_EDITABLE_BLOCKS.includes(r);
|
|
2812
2822
|
}, useHandleCanvasDblClick = () => {
|
|
2813
|
-
const
|
|
2823
|
+
const { editingBlockId: o, setEditingBlockId: n, setEditingItemIndex: r } = useInlineEditing();
|
|
2814
2824
|
return useCallback(
|
|
2815
|
-
(
|
|
2816
|
-
|
|
2817
|
-
|
|
2818
|
-
|
|
2819
|
-
|
|
2820
|
-
|
|
2825
|
+
(a) => {
|
|
2826
|
+
var d;
|
|
2827
|
+
if (a == null || a.preventDefault(), a == null || a.stopPropagation(), o) return;
|
|
2828
|
+
const l = getTargetedBlock(a.target);
|
|
2829
|
+
if (!isInlineEditable(l)) return;
|
|
2830
|
+
const i = l.getAttribute("data-block-id");
|
|
2831
|
+
if (!i || !l) return;
|
|
2832
|
+
const c = l.closest('[data-block-type="Repeater"]');
|
|
2833
|
+
c ? (d = c == null ? void 0 : c.childNodes) == null || d.forEach((p, u) => {
|
|
2834
|
+
p.contains(l) && r(u);
|
|
2835
|
+
}) : r(-1), n(i);
|
|
2821
2836
|
},
|
|
2822
|
-
[o, n]
|
|
2837
|
+
[o, n, r]
|
|
2823
2838
|
);
|
|
2824
2839
|
}, useHandleCanvasClick = () => {
|
|
2825
|
-
const
|
|
2840
|
+
const { editingBlockId: o } = useInlineEditing(), { clearHighlight: n } = useBlockHighlight(), r = useRef(0);
|
|
2826
2841
|
return useCallback(
|
|
2827
2842
|
(a) => {
|
|
2828
2843
|
const l = (/* @__PURE__ */ new Date()).getTime();
|
|
@@ -2844,7 +2859,7 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span"],
|
|
|
2844
2859
|
[o]
|
|
2845
2860
|
);
|
|
2846
2861
|
}, useHandleMouseMove = () => {
|
|
2847
|
-
const
|
|
2862
|
+
const { editingBlockId: o } = useInlineEditing(), { highlightBlock: n } = useBlockHighlight();
|
|
2848
2863
|
return useThrottledCallback(
|
|
2849
2864
|
(r) => {
|
|
2850
2865
|
if (o) return;
|
|
@@ -2909,27 +2924,27 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span"],
|
|
|
2909
2924
|
i([null]);
|
|
2910
2925
|
}, [r, n]), /* @__PURE__ */ jsx(BlockFloatingSelector, { block: o, selectedBlockElement: a[0] });
|
|
2911
2926
|
}, BlockFloatingSelector = ({ block: o, selectedBlockElement: n }) => {
|
|
2912
|
-
const r = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), { hasPermission: d } = usePermissions(),
|
|
2927
|
+
const r = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), { hasPermission: d } = usePermissions(), { editingBlockId: p } = useInlineEditing(), { document: u } = useFrame(), { floatingStyles: g, refs: h, update: m } = useFloating({
|
|
2913
2928
|
placement: "top-start",
|
|
2914
2929
|
middleware: [shift(), flip()],
|
|
2915
2930
|
elements: { reference: n }
|
|
2916
2931
|
});
|
|
2917
|
-
useResizeObserver(n, () =>
|
|
2932
|
+
useResizeObserver(n, () => m(), n !== null), useResizeObserver(u == null ? void 0 : u.body, () => m(), (u == null ? void 0 : u.body) !== null);
|
|
2918
2933
|
const f = get(o, "_parent", null), x = isEmpty(get(o, "_name", "")) ? get(o, "_type", "") : get(o, "_name", "");
|
|
2919
2934
|
return !n || !o || p ? null : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
|
|
2920
2935
|
"div",
|
|
2921
2936
|
{
|
|
2922
2937
|
role: "button",
|
|
2923
2938
|
tabIndex: 0,
|
|
2924
|
-
ref:
|
|
2939
|
+
ref: h.setFloating,
|
|
2925
2940
|
style: g,
|
|
2926
|
-
onClick: (
|
|
2927
|
-
|
|
2941
|
+
onClick: (k) => {
|
|
2942
|
+
k.stopPropagation(), k.preventDefault();
|
|
2928
2943
|
},
|
|
2929
|
-
onMouseEnter: (
|
|
2930
|
-
|
|
2944
|
+
onMouseEnter: (k) => {
|
|
2945
|
+
k.stopPropagation(), i(null);
|
|
2931
2946
|
},
|
|
2932
|
-
onKeyDown: (
|
|
2947
|
+
onKeyDown: (k) => k.stopPropagation(),
|
|
2933
2948
|
className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
|
|
2934
2949
|
children: [
|
|
2935
2950
|
f && /* @__PURE__ */ jsx(
|
|
@@ -2946,7 +2961,7 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span"],
|
|
|
2946
2961
|
/* @__PURE__ */ jsx(AddBlockDropdown, { block: o, children: /* @__PURE__ */ jsx(PlusIcon, { className: "hover:scale-105" }) }),
|
|
2947
2962
|
canDuplicateBlock(get(o, "_type", "")) && d(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsx(CopyIcon, { className: "hover:scale-105", onClick: () => a([o == null ? void 0 : o._id]) }) : null,
|
|
2948
2963
|
canDeleteBlock(get(o, "_type", "")) && d(PERMISSIONS.DELETE_BLOCK) ? /* @__PURE__ */ jsx(TrashIcon, { className: "hover:scale-105", onClick: () => r([o == null ? void 0 : o._id]) }) : null,
|
|
2949
|
-
d(PERMISSIONS.MOVE_BLOCK) && /* @__PURE__ */ jsx(BlockController, { block: o, updateFloatingBar:
|
|
2964
|
+
d(PERMISSIONS.MOVE_BLOCK) && /* @__PURE__ */ jsx(BlockController, { block: o, updateFloatingBar: m })
|
|
2950
2965
|
] })
|
|
2951
2966
|
]
|
|
2952
2967
|
}
|
|
@@ -2990,6 +3005,8 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span"],
|
|
|
2990
3005
|
[data-drop="yes"] { outline: 2px dashed orange !important; outline-offset: -2px }
|
|
2991
3006
|
[data-dnd="yes"] { pointer-events: auto !important}
|
|
2992
3007
|
[data-dnd="no"],[data-block-type="GlobalBlock"],[data-block-type="PartialBlock"] > * { pointer-events: none !important; }
|
|
3008
|
+
[data-block-type="GlobalBlock"],[data-block-type="PartialBlock"] { position: relative !important; }
|
|
3009
|
+
.partial-overlay { pointer-events: auto !important; }
|
|
2993
3010
|
[data-dnd-dragged="yes"] { opacity: 0.6; pointer-events: none; }
|
|
2994
3011
|
[data-dnd-dragged="no"] { opacity: 1; pointer-events: auto !important; }
|
|
2995
3012
|
[force-show] { display: block !important; }
|
|
@@ -3079,15 +3096,15 @@ H(Frame, "defaultProps", {
|
|
|
3079
3096
|
initialContent: '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'
|
|
3080
3097
|
});
|
|
3081
3098
|
const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame, { ...o, forwardedRef: n })), useKeyEventWatcher = (o) => {
|
|
3082
|
-
const [n, r] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlocks(), { canPaste: g, pasteBlocks:
|
|
3099
|
+
const [n, r] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlocks(), { canPaste: g, pasteBlocks: h } = usePasteBlocks(), m = o ? { document: o } : {};
|
|
3083
3100
|
useHotkeys("ctrl+z,command+z", () => c(), {}, [c]), useHotkeys("ctrl+y,command+y", () => d(), {}, [d]), useHotkeys("ctrl+x,command+x", () => p(n), {}, [n, p]), useHotkeys("ctrl+c,command+c", () => u(n), {}, [n, u]), useHotkeys(
|
|
3084
3101
|
"ctrl+v,command+v",
|
|
3085
3102
|
() => {
|
|
3086
|
-
g(n[0]) &&
|
|
3103
|
+
g(n[0]) && h(n);
|
|
3087
3104
|
},
|
|
3088
|
-
{ ...
|
|
3089
|
-
[n, g,
|
|
3090
|
-
), useHotkeys("esc", () => r([]),
|
|
3105
|
+
{ ...m, preventDefault: !0 },
|
|
3106
|
+
[n, g, h]
|
|
3107
|
+
), useHotkeys("esc", () => r([]), m, [r]), useHotkeys("ctrl+d,command+d", () => i(n), { ...m, preventDefault: !0 }, [
|
|
3091
3108
|
n,
|
|
3092
3109
|
i
|
|
3093
3110
|
]), useHotkeys(
|
|
@@ -3095,7 +3112,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
|
|
|
3095
3112
|
(f) => {
|
|
3096
3113
|
f.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
|
|
3097
3114
|
},
|
|
3098
|
-
|
|
3115
|
+
m,
|
|
3099
3116
|
[n, l]
|
|
3100
3117
|
);
|
|
3101
3118
|
}, KeyboardHandler = () => {
|
|
@@ -3386,8 +3403,8 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
|
|
|
3386
3403
|
],
|
|
3387
3404
|
onUpdate: ({ editor: u }) => a((u == null ? void 0 : u.getHTML()) || ""),
|
|
3388
3405
|
onBlur: ({ editor: u, event: g }) => {
|
|
3389
|
-
const
|
|
3390
|
-
if (!x && !
|
|
3406
|
+
const h = g.relatedTarget, m = i.querySelector(".ProseMirror"), f = i.querySelector(".tippy-box"), x = m == null ? void 0 : m.contains(h), k = f == null ? void 0 : f.contains(h);
|
|
3407
|
+
if (!x && !k) {
|
|
3391
3408
|
const b = (u == null ? void 0 : u.getHTML()) || "";
|
|
3392
3409
|
r(b);
|
|
3393
3410
|
}
|
|
@@ -3404,10 +3421,10 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
|
|
|
3404
3421
|
});
|
|
3405
3422
|
}, [c]);
|
|
3406
3423
|
const d = useMemo(() => {
|
|
3407
|
-
var
|
|
3424
|
+
var h;
|
|
3408
3425
|
const u = "max-w-none shadow-none outline outline-[2px] outline-green-500 [&_*]:shadow-none";
|
|
3409
3426
|
if (!n) return u;
|
|
3410
|
-
const g = ((
|
|
3427
|
+
const g = ((h = n == null ? void 0 : n.className) == null ? void 0 : h.replace("sr-only", "")) || "";
|
|
3411
3428
|
return `${u} ${g}`;
|
|
3412
3429
|
}, [n]), p = useCallback(
|
|
3413
3430
|
(u) => {
|
|
@@ -3442,28 +3459,28 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
|
|
|
3442
3459
|
useEffect(() => {
|
|
3443
3460
|
if (a.current) {
|
|
3444
3461
|
a.current.innerText = n, a.current.focus();
|
|
3445
|
-
const
|
|
3446
|
-
|
|
3462
|
+
const m = c.createRange(), f = d.getSelection();
|
|
3463
|
+
m.selectNodeContents(a.current), m.collapse(!1), f == null || f.removeAllRanges(), f == null || f.addRange(m), a.current.focus();
|
|
3447
3464
|
} else
|
|
3448
3465
|
r();
|
|
3449
3466
|
}, [c, d]);
|
|
3450
3467
|
const p = useMemo(() => {
|
|
3451
3468
|
var f;
|
|
3452
|
-
const
|
|
3453
|
-
return
|
|
3469
|
+
const m = ((f = o == null ? void 0 : o.tagName) == null ? void 0 : f.toLowerCase()) || "div";
|
|
3470
|
+
return m === "button" ? "div" : m;
|
|
3454
3471
|
}, [o]), u = useCallback(
|
|
3455
|
-
(
|
|
3456
|
-
(
|
|
3472
|
+
(m) => {
|
|
3473
|
+
(m.key === "Enter" || m.key === "Escape") && i(m);
|
|
3457
3474
|
},
|
|
3458
3475
|
[i]
|
|
3459
3476
|
), g = useCallback(() => {
|
|
3460
3477
|
r();
|
|
3461
|
-
}, [r]),
|
|
3462
|
-
var
|
|
3478
|
+
}, [r]), h = useMemo(() => {
|
|
3479
|
+
var m;
|
|
3463
3480
|
return {
|
|
3464
3481
|
id: "active-inline-editing-element",
|
|
3465
3482
|
contentEditable: !0,
|
|
3466
|
-
className: `${((
|
|
3483
|
+
className: `${((m = o == null ? void 0 : o.className) == null ? void 0 : m.replace("sr-only", "")) || ""} outline outline-[2px] outline-green-500 shadow-none empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400 empty:before:absolute empty:before:pointer-events-none empty:before:select-none empty:before:inset-0 empty:before:z-0 relative min-h-[1em]`,
|
|
3467
3484
|
style: cloneDeep(o == null ? void 0 : o.style) || {},
|
|
3468
3485
|
onInput: (f) => {
|
|
3469
3486
|
const x = f.target;
|
|
@@ -3478,67 +3495,67 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
|
|
|
3478
3495
|
ref: a,
|
|
3479
3496
|
onBlur: g,
|
|
3480
3497
|
onKeyDown: u,
|
|
3481
|
-
...
|
|
3498
|
+
...h
|
|
3482
3499
|
}) });
|
|
3483
3500
|
}
|
|
3484
3501
|
), WithBlockTextEditor = memo(
|
|
3485
3502
|
({ block: o, children: n }) => {
|
|
3486
|
-
const r = "content", { document: a } = useFrame(),
|
|
3487
|
-
var
|
|
3488
|
-
const
|
|
3489
|
-
let
|
|
3490
|
-
const
|
|
3491
|
-
return
|
|
3492
|
-
}, [o,
|
|
3493
|
-
(
|
|
3494
|
-
var
|
|
3495
|
-
const
|
|
3496
|
-
|
|
3503
|
+
const r = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: h } = useBlockHighlight(), m = useUpdateBlocksProps(), { selectedLang: f } = useLanguages(), [, x] = useSelectedBlockIds(), k = useRef(null), b = l, { blockContent: v, blockType: B } = useMemo(() => {
|
|
3504
|
+
var j;
|
|
3505
|
+
const A = o._type;
|
|
3506
|
+
let N = o[r];
|
|
3507
|
+
const S = getRegisteredChaiBlock(o._type);
|
|
3508
|
+
return f && ((j = S == null ? void 0 : S.i18nProps) == null ? void 0 : j.includes(r)) && has(o, `${r}-${f}`) && (N = get(o, `${r}-${f}`)), { blockContent: N, blockType: A };
|
|
3509
|
+
}, [o, f]), w = useCallback(
|
|
3510
|
+
(A) => {
|
|
3511
|
+
var S;
|
|
3512
|
+
const N = A || ((S = g.current) == null ? void 0 : S.innerText);
|
|
3513
|
+
m([b], { [r]: N }), u(null), c(null), d(-1), x([]);
|
|
3497
3514
|
},
|
|
3498
|
-
[
|
|
3499
|
-
),
|
|
3500
|
-
(
|
|
3501
|
-
|
|
3515
|
+
[b, m, c, x, f]
|
|
3516
|
+
), _ = useDebouncedCallback(
|
|
3517
|
+
(A) => {
|
|
3518
|
+
m([b], { [r]: A });
|
|
3502
3519
|
},
|
|
3503
|
-
[
|
|
3520
|
+
[b, o, m, f],
|
|
3504
3521
|
1e3
|
|
3505
|
-
),
|
|
3506
|
-
(
|
|
3507
|
-
|
|
3508
|
-
const
|
|
3509
|
-
|
|
3522
|
+
), E = useCallback(
|
|
3523
|
+
(A) => {
|
|
3524
|
+
A.preventDefault(), b && (k.current = b), w(), setTimeout(() => {
|
|
3525
|
+
const N = k.current;
|
|
3526
|
+
k.current = null, x([N]);
|
|
3510
3527
|
}, 100);
|
|
3511
3528
|
},
|
|
3512
|
-
[
|
|
3529
|
+
[x, b, f]
|
|
3513
3530
|
);
|
|
3514
3531
|
useEffect(() => {
|
|
3515
|
-
var
|
|
3516
|
-
if (!
|
|
3517
|
-
const
|
|
3518
|
-
|
|
3519
|
-
}, [
|
|
3520
|
-
const
|
|
3532
|
+
var y;
|
|
3533
|
+
if (!b) return;
|
|
3534
|
+
const A = `[data-block-id="${b}"]`, N = i >= 0 ? `[data-block-index="${i}"]` : "", S = a.querySelector(`${A}${N}`);
|
|
3535
|
+
S && ((y = S == null ? void 0 : S.classList) == null || y.add("sr-only"), u(S));
|
|
3536
|
+
}, [b, B, a, i]);
|
|
3537
|
+
const C = useMemo(() => p ? (h(), B === "RichText" ? /* @__PURE__ */ jsx(
|
|
3521
3538
|
RichTextEditor,
|
|
3522
3539
|
{
|
|
3523
|
-
blockContent:
|
|
3524
|
-
editingElement:
|
|
3525
|
-
onChange:
|
|
3526
|
-
onClose:
|
|
3527
|
-
onEscape:
|
|
3540
|
+
blockContent: v,
|
|
3541
|
+
editingElement: p,
|
|
3542
|
+
onChange: _,
|
|
3543
|
+
onClose: w,
|
|
3544
|
+
onEscape: E
|
|
3528
3545
|
}
|
|
3529
3546
|
) : /* @__PURE__ */ jsx(
|
|
3530
3547
|
MemoizedEditor,
|
|
3531
3548
|
{
|
|
3532
|
-
editorRef:
|
|
3533
|
-
blockContent:
|
|
3534
|
-
editingElement:
|
|
3535
|
-
onClose:
|
|
3536
|
-
onChange:
|
|
3537
|
-
onEscape:
|
|
3549
|
+
editorRef: g,
|
|
3550
|
+
blockContent: v,
|
|
3551
|
+
editingElement: p,
|
|
3552
|
+
onClose: w,
|
|
3553
|
+
onChange: _,
|
|
3554
|
+
onEscape: E
|
|
3538
3555
|
}
|
|
3539
|
-
)) : null, [
|
|
3556
|
+
)) : null, [p, b, B, v, w, f]);
|
|
3540
3557
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
3541
|
-
|
|
3558
|
+
C,
|
|
3542
3559
|
n
|
|
3543
3560
|
] });
|
|
3544
3561
|
},
|
|
@@ -3571,55 +3588,77 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
|
|
|
3571
3588
|
blockAtom: n,
|
|
3572
3589
|
children: r
|
|
3573
3590
|
}) => {
|
|
3574
|
-
const
|
|
3575
|
-
() => m ? applyBindingToBlockProps(applyLanguage(
|
|
3576
|
-
index:
|
|
3577
|
-
key:
|
|
3578
|
-
}) : applyLanguage(
|
|
3579
|
-
[
|
|
3580
|
-
),
|
|
3581
|
-
() =>
|
|
3582
|
-
[
|
|
3583
|
-
),
|
|
3591
|
+
const { editingBlockId: a, editingItemIndex: l } = useInlineEditing(), [i] = useAtom$1(n), c = useMemo(() => getRegisteredChaiBlock(i._type), [i._type]), { selectedLang: d, fallbackLang: p } = useLanguages(), u = useBlockRuntimeProps(), g = usePageExternalData(), [h] = useHiddenBlockIds(), [m] = useAtom$1(dataBindingActiveAtom), f = get(c, "component", null), { index: x, key: k } = useContext(RepeaterContext), b = useMemo(
|
|
3592
|
+
() => m ? applyBindingToBlockProps(applyLanguage(i, d, c), g, {
|
|
3593
|
+
index: x,
|
|
3594
|
+
key: k
|
|
3595
|
+
}) : applyLanguage(i, d, c),
|
|
3596
|
+
[i, d, c, g, m, x, k]
|
|
3597
|
+
), v = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), B = useMemo(
|
|
3598
|
+
() => u(i._id, getBlockRuntimeProps(i._type)),
|
|
3599
|
+
[i._id, i._type, u, getBlockRuntimeProps]
|
|
3600
|
+
), w = useMemo(
|
|
3584
3601
|
() => ({
|
|
3585
|
-
blockProps: { "data-block-id":
|
|
3602
|
+
blockProps: { "data-block-id": i._id, "data-block-type": i._type, "data-block-index": x },
|
|
3586
3603
|
inBuilder: !0,
|
|
3587
|
-
lang:
|
|
3588
|
-
...y,
|
|
3604
|
+
lang: d || p,
|
|
3589
3605
|
...b,
|
|
3590
3606
|
...v,
|
|
3607
|
+
...B,
|
|
3591
3608
|
...o
|
|
3592
3609
|
}),
|
|
3593
3610
|
[
|
|
3594
|
-
|
|
3595
|
-
|
|
3596
|
-
c,
|
|
3611
|
+
i._id,
|
|
3612
|
+
i._type,
|
|
3597
3613
|
d,
|
|
3598
|
-
|
|
3614
|
+
p,
|
|
3599
3615
|
b,
|
|
3600
3616
|
v,
|
|
3617
|
+
B,
|
|
3601
3618
|
o
|
|
3602
3619
|
]
|
|
3603
|
-
),
|
|
3604
|
-
if (isNull(
|
|
3605
|
-
let E = /* @__PURE__ */ jsx(Suspense, { children: createElement(
|
|
3606
|
-
...
|
|
3620
|
+
), _ = useMemo(() => !CORE_BLOCKS.includes(i._type), [i._type]);
|
|
3621
|
+
if (isNull(f) || h.includes(i._id)) return null;
|
|
3622
|
+
let E = /* @__PURE__ */ jsx(Suspense, { children: createElement(f, {
|
|
3623
|
+
...w,
|
|
3607
3624
|
children: r({
|
|
3608
|
-
_id:
|
|
3609
|
-
_type:
|
|
3610
|
-
...isArray(
|
|
3611
|
-
repeaterItems: applyLimit(
|
|
3612
|
-
$repeaterItemsKey:
|
|
3625
|
+
_id: i._id,
|
|
3626
|
+
_type: i._type,
|
|
3627
|
+
...isArray(b.repeaterItems) ? {
|
|
3628
|
+
repeaterItems: applyLimit(b.repeaterItems, i),
|
|
3629
|
+
$repeaterItemsKey: b.$repeaterItemsKey
|
|
3613
3630
|
} : {},
|
|
3614
|
-
...
|
|
3615
|
-
...
|
|
3631
|
+
...i.partialBlockId ? { partialBlockId: i.partialBlockId } : "",
|
|
3632
|
+
...i.globalBlock ? { partialBlockId: i.globalBlock } : ""
|
|
3616
3633
|
})
|
|
3617
3634
|
}) });
|
|
3618
|
-
const
|
|
3619
|
-
return
|
|
3635
|
+
const C = a === i._id && (l === x || x < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: E }) : E;
|
|
3636
|
+
return _ ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: C }) : C;
|
|
3637
|
+
}, PartialWrapper = ({ children: o, partialBlockId: n }) => {
|
|
3638
|
+
const r = useBuilderProp("gotoPage", noop), { saveState: a } = useSavePage(), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useCallback(
|
|
3639
|
+
(d) => {
|
|
3640
|
+
if (d.stopPropagation(), a !== "SAVED") {
|
|
3641
|
+
toast.error("You have unsaved changes. Please save the page first.");
|
|
3642
|
+
return;
|
|
3643
|
+
}
|
|
3644
|
+
r({ pageId: n, lang: l || i });
|
|
3645
|
+
},
|
|
3646
|
+
[a, r, n, l, i]
|
|
3647
|
+
);
|
|
3648
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
3649
|
+
o,
|
|
3650
|
+
/* @__PURE__ */ jsx("div", { className: "partial-overlay group absolute inset-0 z-50", children: /* @__PURE__ */ jsx(
|
|
3651
|
+
"div",
|
|
3652
|
+
{
|
|
3653
|
+
onDoubleClick: c,
|
|
3654
|
+
className: "flex h-full w-full items-center justify-center bg-black/10 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100 group-hover:backdrop-opacity-85",
|
|
3655
|
+
children: /* @__PURE__ */ jsx("p", { className: "rounded-md bg-white px-2 py-1 text-xs", children: "Partial block. Double click to edit." })
|
|
3656
|
+
}
|
|
3657
|
+
) })
|
|
3658
|
+
] });
|
|
3620
3659
|
}, PartialBlocksRenderer = ({ partialBlockId: o }) => {
|
|
3621
3660
|
const { getPartailBlocks: n } = usePartialBlocksStore(), r = useMemo(() => n(o), [n, o]), a = useMemo(() => splitAtom(atom(r)), [r]);
|
|
3622
|
-
return isEmpty(r) ? null : /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: a, blocks: r });
|
|
3661
|
+
return isEmpty(r) ? null : /* @__PURE__ */ jsx(PartialWrapper, { partialBlockId: o, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: a, blocks: r }) });
|
|
3623
3662
|
}, BlocksRenderer = ({
|
|
3624
3663
|
blocks: o,
|
|
3625
3664
|
parent: n = null,
|
|
@@ -3634,7 +3673,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
|
|
|
3634
3673
|
);
|
|
3635
3674
|
return map(l, (c) => {
|
|
3636
3675
|
const d = a(c._id);
|
|
3637
|
-
return d ? /* @__PURE__ */ jsx(MayBeAsyncPropsWrapper, { block: c, children: (p) => /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: d, asyncProps: p, children: ({ _id: u, _type: g, partialBlockId:
|
|
3676
|
+
return d ? /* @__PURE__ */ jsx(MayBeAsyncPropsWrapper, { block: c, children: (p) => /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: d, asyncProps: p, children: ({ _id: u, _type: g, partialBlockId: h, repeaterItems: m, $repeaterItemsKey: f }) => g === "Repeater" ? isArray(m) && m.map((x, k) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: k, key: f }, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: c._id }) }, `${u}-${k}`)) : g === "GlobalBlock" || g === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: h }) }) : i(u) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: c._id }) : null }) }, c._id) : null;
|
|
3638
3677
|
});
|
|
3639
3678
|
}, PageBlocksRenderer = () => {
|
|
3640
3679
|
const [o] = useBlocksStore();
|
|
@@ -3648,11 +3687,11 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
|
|
|
3648
3687
|
if (d < n) {
|
|
3649
3688
|
const u = parseFloat((d / n).toFixed(2).toString());
|
|
3650
3689
|
let g = {};
|
|
3651
|
-
const
|
|
3690
|
+
const h = p * u, m = d * u;
|
|
3652
3691
|
p && (g = {
|
|
3653
3692
|
// Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
|
|
3654
|
-
height: 100 + (p -
|
|
3655
|
-
width: 100 + (d -
|
|
3693
|
+
height: 100 + (p - h) / h * 100 + "%",
|
|
3694
|
+
width: 100 + (d - m) / m * 100 + "%"
|
|
3656
3695
|
}), i({
|
|
3657
3696
|
position: "relative",
|
|
3658
3697
|
top: 0,
|
|
@@ -3701,19 +3740,19 @@ const CanvasEventsWatcher = () => {
|
|
|
3701
3740
|
}), null;
|
|
3702
3741
|
}, StaticCanvas = () => {
|
|
3703
3742
|
const [o] = useCanvasDisplayWidth(), [, n] = useHighlightBlockId(), r = useRef(null), a = useRef(null), [l, i] = useState({ width: 0, height: 0 }), c = useCanvasScale(l), [, d] = useAtom$1(canvasIframeAtom), p = useBuilderProp("loading", !1), u = useBuilderProp("htmlDir", "ltr"), g = useCallback(
|
|
3704
|
-
(
|
|
3705
|
-
i((f) => ({ ...f, width:
|
|
3743
|
+
(m) => {
|
|
3744
|
+
i((f) => ({ ...f, width: m }));
|
|
3706
3745
|
},
|
|
3707
3746
|
[i]
|
|
3708
3747
|
);
|
|
3709
3748
|
useEffect(() => {
|
|
3710
3749
|
if (!a.current) return;
|
|
3711
|
-
const { clientWidth:
|
|
3712
|
-
i({ width:
|
|
3750
|
+
const { clientWidth: m, clientHeight: f } = a.current;
|
|
3751
|
+
i({ width: m, height: f });
|
|
3713
3752
|
}, [a, o]);
|
|
3714
|
-
const
|
|
3715
|
-
let
|
|
3716
|
-
return
|
|
3753
|
+
const h = useMemo(() => {
|
|
3754
|
+
let m = IframeInitialContent;
|
|
3755
|
+
return m = m.replace("__HTML_DIR__", u), m;
|
|
3717
3756
|
}, [u]);
|
|
3718
3757
|
return /* @__PURE__ */ jsx(ResizableCanvasWrapper, { onMount: g, onResize: g, children: /* @__PURE__ */ jsx(
|
|
3719
3758
|
"div",
|
|
@@ -3729,7 +3768,7 @@ const CanvasEventsWatcher = () => {
|
|
|
3729
3768
|
id: "canvas-iframe",
|
|
3730
3769
|
style: { ...c, ...isEmpty(c) ? { width: `${o}px` } : {} },
|
|
3731
3770
|
className: "relative mx-auto box-content h-full w-full max-w-full shadow-lg transition-all duration-300 ease-linear",
|
|
3732
|
-
initialContent:
|
|
3771
|
+
initialContent: h,
|
|
3733
3772
|
children: [
|
|
3734
3773
|
/* @__PURE__ */ jsx(KeyboardHandler, {}),
|
|
3735
3774
|
/* @__PURE__ */ jsx(BlockSelectionHighlighter, {}),
|
|
@@ -3824,7 +3863,7 @@ const CanvasEventsWatcher = () => {
|
|
|
3824
3863
|
/* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: a("Paste SVG code to use as an icon") })
|
|
3825
3864
|
] });
|
|
3826
3865
|
}, DefaultMediaManager = ({ close: o, onSelect: n, mode: r = "image" }) => {
|
|
3827
|
-
const [a, l] = useState(""), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState(null),
|
|
3866
|
+
const [a, l] = useState(""), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState(null), h = async (f) => {
|
|
3828
3867
|
if (!f.trim()) {
|
|
3829
3868
|
p(!1), g("Please enter a URL");
|
|
3830
3869
|
return;
|
|
@@ -3836,9 +3875,9 @@ const CanvasEventsWatcher = () => {
|
|
|
3836
3875
|
} finally {
|
|
3837
3876
|
c(!1);
|
|
3838
3877
|
}
|
|
3839
|
-
}, { t:
|
|
3878
|
+
}, { t: m } = useTranslation();
|
|
3840
3879
|
return /* @__PURE__ */ jsxs("div", { className: "flex w-96 flex-col gap-4 p-4", children: [
|
|
3841
|
-
/* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children:
|
|
3880
|
+
/* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: m(`${r.charAt(0).toUpperCase() + r.slice(1)} Manager`) }),
|
|
3842
3881
|
u && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
|
|
3843
3882
|
/* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
|
|
3844
3883
|
/* @__PURE__ */ jsx(AlertDescription, { children: u })
|
|
@@ -3847,20 +3886,20 @@ const CanvasEventsWatcher = () => {
|
|
|
3847
3886
|
/* @__PURE__ */ jsx(
|
|
3848
3887
|
Input$1,
|
|
3849
3888
|
{
|
|
3850
|
-
placeholder:
|
|
3889
|
+
placeholder: m(`Enter ${r} URL`),
|
|
3851
3890
|
value: a,
|
|
3852
3891
|
onChange: (f) => l(f.target.value),
|
|
3853
|
-
onKeyUp: () =>
|
|
3892
|
+
onKeyUp: () => h(a)
|
|
3854
3893
|
}
|
|
3855
3894
|
),
|
|
3856
3895
|
/* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
|
|
3857
|
-
/* @__PURE__ */ jsx(Button, { variant: "outline", onClick: o, children:
|
|
3896
|
+
/* @__PURE__ */ jsx(Button, { variant: "outline", onClick: o, children: m("Cancel") }),
|
|
3858
3897
|
/* @__PURE__ */ jsx(
|
|
3859
3898
|
Button,
|
|
3860
3899
|
{
|
|
3861
3900
|
onClick: () => n({ id: "dam-id", url: a, width: 600, height: 400, description: "This is image description" }),
|
|
3862
3901
|
disabled: !d || i,
|
|
3863
|
-
children:
|
|
3902
|
+
children: m("Insert")
|
|
3864
3903
|
}
|
|
3865
3904
|
)
|
|
3866
3905
|
] })
|
|
@@ -3887,16 +3926,16 @@ const CanvasEventsWatcher = () => {
|
|
|
3887
3926
|
MediaManagerModal.displayName = "MediaManagerModal";
|
|
3888
3927
|
const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
|
|
3889
3928
|
const { t: l } = useTranslation(), i = useSelectedBlock(), c = useUpdateBlocksProps(), d = (g) => {
|
|
3890
|
-
const
|
|
3891
|
-
if (
|
|
3892
|
-
n(
|
|
3893
|
-
const
|
|
3929
|
+
const h = isArray(g) ? first(g) : g;
|
|
3930
|
+
if (h) {
|
|
3931
|
+
n(h == null ? void 0 : h.url);
|
|
3932
|
+
const m = h == null ? void 0 : h.width, f = h == null ? void 0 : h.height;
|
|
3894
3933
|
if (i != null && i._id) {
|
|
3895
3934
|
const x = {
|
|
3896
|
-
...
|
|
3935
|
+
...m && { width: m },
|
|
3897
3936
|
...f && { height: f },
|
|
3898
|
-
...
|
|
3899
|
-
...
|
|
3937
|
+
...h.description && { alt: h.description },
|
|
3938
|
+
...h.id && { assetId: h.id }
|
|
3900
3939
|
};
|
|
3901
3940
|
if (isEmpty(x)) return;
|
|
3902
3941
|
c([i._id], x);
|
|
@@ -3941,18 +3980,18 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
|
|
|
3941
3980
|
] })
|
|
3942
3981
|
] });
|
|
3943
3982
|
}, PathDropdown = ({ data: o, onSelect: n, dataType: r }) => {
|
|
3944
|
-
const [a, l] = React__default.useState([]), [i, c] = React__default.useState(o), d = (
|
|
3945
|
-
(
|
|
3946
|
-
const
|
|
3947
|
-
|
|
3983
|
+
const [a, l] = React__default.useState([]), [i, c] = React__default.useState(o), d = (h) => Array.isArray(h) ? "array" : typeof h == "object" && h !== null ? "object" : "value", p = React__default.useCallback(
|
|
3984
|
+
(h) => {
|
|
3985
|
+
const m = (f) => r === "value" ? f === "value" || f === "object" : r === "array" ? f === "array" : f === r;
|
|
3986
|
+
h.type === "object" ? (l((f) => [...f, h.key]), c(h.value)) : m(h.type) && n([...a, h.key].join("."), r);
|
|
3948
3987
|
},
|
|
3949
3988
|
[a, n, r]
|
|
3950
3989
|
), u = React__default.useCallback(() => {
|
|
3951
3990
|
if (a.length > 0) {
|
|
3952
|
-
const
|
|
3953
|
-
l(
|
|
3991
|
+
const h = a.slice(0, -1);
|
|
3992
|
+
l(h), c(h.reduce((m, f) => m[f], o));
|
|
3954
3993
|
}
|
|
3955
|
-
}, [a, o]), g = React__default.useMemo(() => i ? Object.entries(i).map(([
|
|
3994
|
+
}, [a, o]), g = React__default.useMemo(() => i ? Object.entries(i).map(([h, m]) => ({ key: h, value: m, type: d(m) })).filter((h) => !startsWith(h.key, REPEATER_PREFIX) && h.key.includes("/") ? !1 : r === "value" ? h.type === "value" || h.type === "object" : r === "array" ? h.type === "array" || h.type === "object" : r === "object" ? h.type === "object" : !0) : [], [i, r]);
|
|
3956
3995
|
return /* @__PURE__ */ jsxs(Command, { className: "fields-command", children: [
|
|
3957
3996
|
/* @__PURE__ */ jsx(CommandInput, { className: "border-none", placeholder: "Search..." }),
|
|
3958
3997
|
/* @__PURE__ */ jsxs(CommandList, { children: [
|
|
@@ -3962,36 +4001,36 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
|
|
|
3962
4001
|
/* @__PURE__ */ jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }),
|
|
3963
4002
|
"Back"
|
|
3964
4003
|
] }),
|
|
3965
|
-
g.map((
|
|
4004
|
+
g.map((h) => /* @__PURE__ */ jsxs(
|
|
3966
4005
|
CommandItem,
|
|
3967
4006
|
{
|
|
3968
|
-
value:
|
|
4007
|
+
value: h.key,
|
|
3969
4008
|
disabled: !1,
|
|
3970
|
-
onSelect: () => p(
|
|
4009
|
+
onSelect: () => p(h),
|
|
3971
4010
|
className: "flex items-center justify-between",
|
|
3972
4011
|
children: [
|
|
3973
4012
|
/* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-2", children: [
|
|
3974
|
-
startsWith(
|
|
3975
|
-
startsWith(
|
|
4013
|
+
startsWith(h.key, REPEATER_PREFIX) ? /* @__PURE__ */ jsx(LoopIcon, {}) : startsWith(h.key, COLLECTION_PREFIX) ? /* @__PURE__ */ jsx(DatabaseIcon, {}) : null,
|
|
4014
|
+
startsWith(h.key, REPEATER_PREFIX) ? "Repeater Data" : startsWith(h.key, COLLECTION_PREFIX) ? h.key.replace(COLLECTION_PREFIX, "") : h.key
|
|
3976
4015
|
] }),
|
|
3977
4016
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
3978
|
-
r === "object" &&
|
|
4017
|
+
r === "object" && h.type === "object" && /* @__PURE__ */ jsx(
|
|
3979
4018
|
Button,
|
|
3980
4019
|
{
|
|
3981
4020
|
size: "sm",
|
|
3982
4021
|
variant: "ghost",
|
|
3983
4022
|
className: "h-6 px-2 hover:bg-primary hover:text-primary-foreground",
|
|
3984
|
-
onClick: (
|
|
3985
|
-
|
|
4023
|
+
onClick: (m) => {
|
|
4024
|
+
m.stopPropagation(), n([...a, h.key].join("."), r);
|
|
3986
4025
|
},
|
|
3987
4026
|
children: "Select"
|
|
3988
4027
|
}
|
|
3989
4028
|
),
|
|
3990
|
-
|
|
4029
|
+
h.type === "object" && /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded p-1 hover:bg-muted", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 opacity-50" }) })
|
|
3991
4030
|
] })
|
|
3992
4031
|
]
|
|
3993
4032
|
},
|
|
3994
|
-
|
|
4033
|
+
h.key
|
|
3995
4034
|
))
|
|
3996
4035
|
] })
|
|
3997
4036
|
] })
|
|
@@ -4043,27 +4082,27 @@ const DataBindingSelector = ({
|
|
|
4043
4082
|
}) => {
|
|
4044
4083
|
const l = usePageExternalData(), i = useSelectedBlockHierarchy(), c = useSelectedBlock(), d = useMemo(() => {
|
|
4045
4084
|
if (i.length === 1) return "";
|
|
4046
|
-
const g = i.find((f) => f._type === "Repeater"),
|
|
4047
|
-
return `${REPEATER_PREFIX}${startsWith(
|
|
4085
|
+
const g = i.find((f) => f._type === "Repeater"), m = get(g, "repeaterItems", "").replace(/\{\{(.*)\}\}/g, "$1");
|
|
4086
|
+
return `${REPEATER_PREFIX}${startsWith(m, COLLECTION_PREFIX) ? `${m}/${g._id}` : m}`;
|
|
4048
4087
|
}, [i]), p = useMemo(() => first(get(l, d.replace(REPEATER_PREFIX, ""), [])), [d, l]), u = useCallback(
|
|
4049
|
-
(g,
|
|
4050
|
-
if (g = isEmpty(d) ? g : g.replace(`${d}`, "$index"),
|
|
4088
|
+
(g, h) => {
|
|
4089
|
+
if (g = isEmpty(d) ? g : g.replace(`${d}`, "$index"), h === "array" || h === "object") {
|
|
4051
4090
|
n(`{{${g}}}`, {}, r);
|
|
4052
4091
|
return;
|
|
4053
4092
|
}
|
|
4054
|
-
const
|
|
4055
|
-
let w = "",
|
|
4056
|
-
const
|
|
4057
|
-
return v > 0 && (
|
|
4058
|
-
text: w + B +
|
|
4093
|
+
const m = (b) => /[.,!?;:]/.test(b), f = (b, v, B) => {
|
|
4094
|
+
let w = "", _ = "";
|
|
4095
|
+
const E = v > 0 ? b[v - 1] : "", C = v < b.length ? b[v] : "";
|
|
4096
|
+
return v > 0 && (E === "." || !m(E) && E !== " ") && (w = " "), v < b.length && !m(C) && C !== " " && (_ = " "), {
|
|
4097
|
+
text: w + B + _,
|
|
4059
4098
|
prefixLength: w.length,
|
|
4060
|
-
suffixLength:
|
|
4099
|
+
suffixLength: _.length
|
|
4061
4100
|
};
|
|
4062
4101
|
}, x = document.getElementById(r);
|
|
4063
4102
|
if (!x) return;
|
|
4064
|
-
const
|
|
4065
|
-
if (
|
|
4066
|
-
const b =
|
|
4103
|
+
const k = document.getElementById(`chai-rte-${r}`) || document.getElementById(`chai-rte-modal-${r}`);
|
|
4104
|
+
if (k && (k.querySelector(".ProseMirror") || k.__chaiRTE)) {
|
|
4105
|
+
const b = k.__chaiRTE;
|
|
4067
4106
|
if (b) {
|
|
4068
4107
|
const v = `{{${g}}}`;
|
|
4069
4108
|
b.commands.focus();
|
|
@@ -4071,11 +4110,11 @@ const DataBindingSelector = ({
|
|
|
4071
4110
|
if (B !== w)
|
|
4072
4111
|
b.chain().deleteSelection().insertContent(v).run();
|
|
4073
4112
|
else {
|
|
4074
|
-
const { state:
|
|
4075
|
-
let
|
|
4076
|
-
|
|
4077
|
-
let
|
|
4078
|
-
N && N !== " " && !
|
|
4113
|
+
const { state: E } = b, C = E.selection.from, A = E.doc.textBetween(Math.max(0, C - 1), C), N = E.doc.textBetween(C, Math.min(C + 1, E.doc.content.size));
|
|
4114
|
+
let S = "";
|
|
4115
|
+
C > 0 && A !== " " && !m(A) && (S = " ");
|
|
4116
|
+
let y = "";
|
|
4117
|
+
N && N !== " " && !m(N) && (y = " "), b.chain().insertContent(S + v + y).run();
|
|
4079
4118
|
}
|
|
4080
4119
|
setTimeout(() => n(b.getHTML(), {}, r), 100);
|
|
4081
4120
|
return;
|
|
@@ -4083,11 +4122,11 @@ const DataBindingSelector = ({
|
|
|
4083
4122
|
} else {
|
|
4084
4123
|
const b = x, v = b.selectionStart || 0, B = b.value || "", w = b.selectionEnd || v;
|
|
4085
4124
|
if (w > v) {
|
|
4086
|
-
const N = `{{${g}}}`, { text:
|
|
4087
|
-
n(
|
|
4125
|
+
const N = `{{${g}}}`, { text: S } = f(B, v, N), y = B.slice(0, v) + S + B.slice(w);
|
|
4126
|
+
n(y, {}, r);
|
|
4088
4127
|
return;
|
|
4089
4128
|
}
|
|
4090
|
-
const
|
|
4129
|
+
const E = `{{${g}}}`, { text: C } = f(B, v, E), A = B.slice(0, v) + C + B.slice(v);
|
|
4091
4130
|
n(A, {}, r);
|
|
4092
4131
|
}
|
|
4093
4132
|
},
|
|
@@ -4110,73 +4149,73 @@ const DataBindingSelector = ({
|
|
|
4110
4149
|
onChange: r
|
|
4111
4150
|
}) => {
|
|
4112
4151
|
var N;
|
|
4113
|
-
const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (
|
|
4152
|
+
const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (S, y) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [h, m] = useState(""), [f, x] = useState([]), [k, b] = useState(-1), v = useRef(null), B = (N = n == null ? void 0 : n.find((S) => S.key === u)) == null ? void 0 : N.name;
|
|
4114
4153
|
useEffect(() => {
|
|
4115
|
-
if (
|
|
4116
|
-
const
|
|
4117
|
-
g(
|
|
4118
|
-
const j = await l(
|
|
4119
|
-
j && Array.isArray(j) &&
|
|
4154
|
+
if (m(""), x([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
|
|
4155
|
+
const S = split(o, ":"), y = get(S, 1, "page") || "page";
|
|
4156
|
+
g(y), (async () => {
|
|
4157
|
+
const j = await l(y, [get(S, 2, "page")]);
|
|
4158
|
+
j && Array.isArray(j) && m(get(j, [0, "name"], ""));
|
|
4120
4159
|
})();
|
|
4121
4160
|
}, [o]);
|
|
4122
4161
|
const w = useDebouncedCallback(
|
|
4123
|
-
async (
|
|
4124
|
-
if (isEmpty(
|
|
4162
|
+
async (S) => {
|
|
4163
|
+
if (isEmpty(S))
|
|
4125
4164
|
x([]);
|
|
4126
4165
|
else {
|
|
4127
|
-
const
|
|
4128
|
-
x(
|
|
4166
|
+
const y = await l(u, S);
|
|
4167
|
+
x(y);
|
|
4129
4168
|
}
|
|
4130
4169
|
c(!1), b(-1);
|
|
4131
4170
|
},
|
|
4132
4171
|
[u],
|
|
4133
4172
|
300
|
|
4134
|
-
),
|
|
4135
|
-
const
|
|
4136
|
-
|
|
4137
|
-
},
|
|
4138
|
-
switch (
|
|
4173
|
+
), _ = (S) => {
|
|
4174
|
+
const y = ["pageType", u, S.id];
|
|
4175
|
+
y[1] && (r(y.join(":")), m(S.name), p(!1), x([]), b(-1));
|
|
4176
|
+
}, E = (S) => {
|
|
4177
|
+
switch (S.key) {
|
|
4139
4178
|
case "ArrowDown":
|
|
4140
|
-
|
|
4179
|
+
S.preventDefault(), b((y) => y < f.length - 1 ? y + 1 : y);
|
|
4141
4180
|
break;
|
|
4142
4181
|
case "ArrowUp":
|
|
4143
|
-
|
|
4182
|
+
S.preventDefault(), b((y) => y > 0 ? y - 1 : y);
|
|
4144
4183
|
break;
|
|
4145
4184
|
case "Enter":
|
|
4146
|
-
if (
|
|
4147
|
-
|
|
4185
|
+
if (S.preventDefault(), f.length === 0) return;
|
|
4186
|
+
k >= 0 && _(f[k]);
|
|
4148
4187
|
break;
|
|
4149
4188
|
case "Escape":
|
|
4150
|
-
|
|
4189
|
+
S.preventDefault(), C();
|
|
4151
4190
|
break;
|
|
4152
4191
|
}
|
|
4153
4192
|
};
|
|
4154
4193
|
useEffect(() => {
|
|
4155
|
-
if (
|
|
4156
|
-
const
|
|
4157
|
-
|
|
4194
|
+
if (k >= 0 && v.current) {
|
|
4195
|
+
const S = v.current.children[k];
|
|
4196
|
+
S == null || S.scrollIntoView({ block: "nearest" });
|
|
4158
4197
|
}
|
|
4159
|
-
}, [
|
|
4160
|
-
const
|
|
4161
|
-
|
|
4162
|
-
}, A = (
|
|
4163
|
-
|
|
4198
|
+
}, [k]);
|
|
4199
|
+
const C = () => {
|
|
4200
|
+
m(""), x([]), b(-1), p(!1), r("");
|
|
4201
|
+
}, A = (S) => {
|
|
4202
|
+
m(S), p(!isEmpty(S)), c(!0), w(S);
|
|
4164
4203
|
};
|
|
4165
4204
|
return /* @__PURE__ */ jsxs("div", { children: [
|
|
4166
|
-
/* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (
|
|
4205
|
+
/* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (S) => g(S.target.value), children: map(n, (S) => /* @__PURE__ */ jsx("option", { value: S.key, children: S.name }, S.key)) }),
|
|
4167
4206
|
u && /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 flex items-center", children: [
|
|
4168
4207
|
/* @__PURE__ */ jsx(
|
|
4169
4208
|
"input",
|
|
4170
4209
|
{
|
|
4171
4210
|
type: "text",
|
|
4172
|
-
value:
|
|
4173
|
-
onChange: (
|
|
4174
|
-
onKeyDown:
|
|
4211
|
+
value: h,
|
|
4212
|
+
onChange: (S) => A(S.target.value),
|
|
4213
|
+
onKeyDown: E,
|
|
4175
4214
|
placeholder: a(`Search ${B ?? ""}`),
|
|
4176
4215
|
className: "w-full rounded-md border border-gray-300 p-2 pr-16"
|
|
4177
4216
|
}
|
|
4178
4217
|
),
|
|
4179
|
-
/* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children:
|
|
4218
|
+
/* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: h && /* @__PURE__ */ jsx("button", { onClick: C, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
|
|
4180
4219
|
] }),
|
|
4181
4220
|
(i || !isEmpty(f) || d && isEmpty(f)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
|
|
4182
4221
|
/* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
|
|
@@ -4184,24 +4223,24 @@ const DataBindingSelector = ({
|
|
|
4184
4223
|
] }) : d && isEmpty(f) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
|
|
4185
4224
|
a("No results found for"),
|
|
4186
4225
|
' "',
|
|
4187
|
-
|
|
4226
|
+
h,
|
|
4188
4227
|
'"'
|
|
4189
|
-
] }) : /* @__PURE__ */ jsx("ul", { ref: v, children: map(f == null ? void 0 : f.slice(0, 20), (
|
|
4228
|
+
] }) : /* @__PURE__ */ jsx("ul", { ref: v, children: map(f == null ? void 0 : f.slice(0, 20), (S, y) => /* @__PURE__ */ jsxs(
|
|
4190
4229
|
"li",
|
|
4191
4230
|
{
|
|
4192
|
-
onClick: () =>
|
|
4193
|
-
className: `cursor-pointer p-2 text-xs ${o != null && o.includes(
|
|
4231
|
+
onClick: () => _(S),
|
|
4232
|
+
className: `cursor-pointer p-2 text-xs ${o != null && o.includes(S.id) ? "bg-blue-200" : y === k ? "bg-gray-100" : "hover:bg-gray-100"}`,
|
|
4194
4233
|
children: [
|
|
4195
|
-
|
|
4234
|
+
S.name,
|
|
4196
4235
|
" ",
|
|
4197
|
-
|
|
4236
|
+
S.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
|
|
4198
4237
|
"( ",
|
|
4199
|
-
|
|
4238
|
+
S.slug,
|
|
4200
4239
|
" )"
|
|
4201
4240
|
] })
|
|
4202
4241
|
]
|
|
4203
4242
|
},
|
|
4204
|
-
|
|
4243
|
+
S.id
|
|
4205
4244
|
)) }) })
|
|
4206
4245
|
] });
|
|
4207
4246
|
}, LinkField = ({ schema: o, formData: n, onChange: r, name: a }) => {
|
|
@@ -4442,16 +4481,16 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
|
|
|
4442
4481
|
const c = useRef(null), d = useRef(a || ""), p = usePageExternalData();
|
|
4443
4482
|
useEffect(() => {
|
|
4444
4483
|
if (o) {
|
|
4445
|
-
const
|
|
4446
|
-
return
|
|
4484
|
+
const h = document.createElement("style");
|
|
4485
|
+
return h.id = "rte-modal-styles", h.innerHTML = `
|
|
4447
4486
|
/* Ensure the NestedPathSelector popover appears above the dialog */
|
|
4448
4487
|
.rte-path-selector + [data-radix-popper-content-wrapper],
|
|
4449
4488
|
[data-radix-popper-content-wrapper] {
|
|
4450
4489
|
z-index: 9999 !important;
|
|
4451
4490
|
}
|
|
4452
|
-
`, document.head.appendChild(
|
|
4453
|
-
const
|
|
4454
|
-
|
|
4491
|
+
`, document.head.appendChild(h), () => {
|
|
4492
|
+
const m = document.getElementById("rte-modal-styles");
|
|
4493
|
+
m && m.remove();
|
|
4455
4494
|
};
|
|
4456
4495
|
}
|
|
4457
4496
|
}, [o]);
|
|
@@ -4476,13 +4515,13 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
|
|
|
4476
4515
|
})
|
|
4477
4516
|
],
|
|
4478
4517
|
content: a || "",
|
|
4479
|
-
onUpdate: ({ editor:
|
|
4480
|
-
const
|
|
4481
|
-
l(
|
|
4518
|
+
onUpdate: ({ editor: h }) => {
|
|
4519
|
+
const m = h.getHTML();
|
|
4520
|
+
l(m);
|
|
4482
4521
|
},
|
|
4483
|
-
onBlur: ({ editor:
|
|
4484
|
-
const
|
|
4485
|
-
i(r,
|
|
4522
|
+
onBlur: ({ editor: h }) => {
|
|
4523
|
+
const m = h.getHTML();
|
|
4524
|
+
i(r, m);
|
|
4486
4525
|
},
|
|
4487
4526
|
editorProps: {
|
|
4488
4527
|
attributes: {
|
|
@@ -4497,22 +4536,22 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
|
|
|
4497
4536
|
}, [o, u]), useEffect(() => {
|
|
4498
4537
|
c.current && u && (c.current.__chaiRTE = u);
|
|
4499
4538
|
}, [u, o]);
|
|
4500
|
-
const g = (
|
|
4539
|
+
const g = (h) => {
|
|
4501
4540
|
if (!u) return;
|
|
4502
|
-
const
|
|
4541
|
+
const m = `{{${h}}}`;
|
|
4503
4542
|
u.commands.focus();
|
|
4504
4543
|
const { from: f, to: x } = u.state.selection;
|
|
4505
4544
|
if (f !== x)
|
|
4506
|
-
u.chain().deleteSelection().insertContent(
|
|
4545
|
+
u.chain().deleteSelection().insertContent(m).run();
|
|
4507
4546
|
else {
|
|
4508
4547
|
const { state: b } = u, v = b.selection.from, B = b.doc.textBetween(Math.max(0, v - 1), v), w = b.doc.textBetween(v, Math.min(v + 1, b.doc.content.size));
|
|
4509
|
-
let E = "";
|
|
4510
|
-
v > 0 && B !== " " && !/[.,!?;:]/.test(B) && (E = " ");
|
|
4511
4548
|
let _ = "";
|
|
4512
|
-
|
|
4549
|
+
v > 0 && B !== " " && !/[.,!?;:]/.test(B) && (_ = " ");
|
|
4550
|
+
let E = "";
|
|
4551
|
+
w && w !== " " && !/[.,!?;:]/.test(w) && (E = " "), u.chain().insertContent(_ + m + E).run();
|
|
4513
4552
|
}
|
|
4514
4553
|
};
|
|
4515
|
-
return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (
|
|
4554
|
+
return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (h) => !h && n(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
|
|
4516
4555
|
/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center justify-between pr-8", children: [
|
|
4517
4556
|
/* @__PURE__ */ jsx("span", { children: "Rich Text Editor" }),
|
|
4518
4557
|
Object.keys(p).length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
|
|
@@ -4567,9 +4606,9 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
|
|
|
4567
4606
|
}, [g]), useEffect(() => {
|
|
4568
4607
|
u(r || "");
|
|
4569
4608
|
}, [r]);
|
|
4570
|
-
const
|
|
4609
|
+
const h = (f) => {
|
|
4571
4610
|
a(f);
|
|
4572
|
-
},
|
|
4611
|
+
}, m = () => {
|
|
4573
4612
|
d(!1), g && g.commands.setContent(p);
|
|
4574
4613
|
};
|
|
4575
4614
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -4581,10 +4620,10 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
|
|
|
4581
4620
|
RTEModal,
|
|
4582
4621
|
{
|
|
4583
4622
|
isOpen: c,
|
|
4584
|
-
onClose:
|
|
4623
|
+
onClose: m,
|
|
4585
4624
|
id: o,
|
|
4586
4625
|
value: p,
|
|
4587
|
-
onChange:
|
|
4626
|
+
onChange: h,
|
|
4588
4627
|
onBlur: l
|
|
4589
4628
|
}
|
|
4590
4629
|
)
|
|
@@ -4600,17 +4639,17 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
|
|
|
4600
4639
|
}, [a]), useEffect(() => {
|
|
4601
4640
|
u != null && u.length && !find(u, { _id: o == null ? void 0 : o.currentSlide }) && n({ ...o, currentSlide: get(u, "0._id") });
|
|
4602
4641
|
}, [o, u]);
|
|
4603
|
-
const
|
|
4642
|
+
const h = () => {
|
|
4604
4643
|
const x = findIndex(u, { _id: g });
|
|
4605
4644
|
if (x > -1) {
|
|
4606
|
-
const
|
|
4645
|
+
const k = (x + 1) % u.length, b = get(u, [k, "_id"]);
|
|
4607
4646
|
if (!b) return;
|
|
4608
4647
|
n({ ...o, currentSlide: b }), c([b]);
|
|
4609
4648
|
}
|
|
4610
|
-
},
|
|
4649
|
+
}, m = () => {
|
|
4611
4650
|
const x = findIndex(u, { _id: g });
|
|
4612
4651
|
if (x > -1) {
|
|
4613
|
-
const
|
|
4652
|
+
const k = (x - 1 + u.length) % u.length, b = get(u, [k, "_id"]);
|
|
4614
4653
|
if (!b) return;
|
|
4615
4654
|
n({ ...o, currentSlide: b }), c([b]);
|
|
4616
4655
|
}
|
|
@@ -4618,12 +4657,12 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
|
|
|
4618
4657
|
const x = i(
|
|
4619
4658
|
{ styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
|
|
4620
4659
|
p == null ? void 0 : p._id
|
|
4621
|
-
),
|
|
4622
|
-
|
|
4660
|
+
), k = x == null ? void 0 : x._id;
|
|
4661
|
+
k && (n({ ...o, currentSlide: k }), c([k]));
|
|
4623
4662
|
};
|
|
4624
4663
|
return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 px-2", children: [
|
|
4625
4664
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 pb-2 text-[12px]", children: [
|
|
4626
|
-
/* @__PURE__ */ jsx("button", { onClick:
|
|
4665
|
+
/* @__PURE__ */ jsx("button", { onClick: m, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3 w-3 stroke-[3]" }) }),
|
|
4627
4666
|
/* @__PURE__ */ jsx("div", { className: "whitespace-nowrap text-center text-[10px] text-slate-500", children: g ? /* @__PURE__ */ jsxs("span", { className: "", children: [
|
|
4628
4667
|
/* @__PURE__ */ jsxs("b", { className: "text-[12px]", children: [
|
|
4629
4668
|
" ",
|
|
@@ -4632,7 +4671,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
|
|
|
4632
4671
|
"/",
|
|
4633
4672
|
u.length
|
|
4634
4673
|
] }) : "-" }),
|
|
4635
|
-
/* @__PURE__ */ jsx("button", { onClick:
|
|
4674
|
+
/* @__PURE__ */ jsx("button", { onClick: h, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 stroke-[3]" }) }),
|
|
4636
4675
|
/* @__PURE__ */ jsxs(
|
|
4637
4676
|
"button",
|
|
4638
4677
|
{
|
|
@@ -4698,8 +4737,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
|
|
|
4698
4737
|
className: "text-xs",
|
|
4699
4738
|
pattern: "[0-9]*",
|
|
4700
4739
|
onChange: (x) => {
|
|
4701
|
-
let
|
|
4702
|
-
|
|
4740
|
+
let k = x.target.value;
|
|
4741
|
+
k.length && (k = k.replace("-", "")), n({ ...o, autoplayInterval: k });
|
|
4703
4742
|
}
|
|
4704
4743
|
}
|
|
4705
4744
|
)
|
|
@@ -4710,7 +4749,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
|
|
|
4710
4749
|
const r = get(o, "srcsets", []) || [], a = (c, d) => {
|
|
4711
4750
|
const p = c.target.name, u = c.target.value;
|
|
4712
4751
|
n({
|
|
4713
|
-
srcsets: map(r, (g,
|
|
4752
|
+
srcsets: map(r, (g, h) => h === d ? { ...g, [p]: u } : g)
|
|
4714
4753
|
});
|
|
4715
4754
|
}, l = () => {
|
|
4716
4755
|
n({ srcsets: [...r, {}] });
|
|
@@ -4805,30 +4844,30 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
|
|
|
4805
4844
|
required: p,
|
|
4806
4845
|
schema: u,
|
|
4807
4846
|
formData: g,
|
|
4808
|
-
onChange:
|
|
4847
|
+
onChange: h
|
|
4809
4848
|
}) => {
|
|
4810
|
-
const { selectedLang:
|
|
4811
|
-
() => isEmpty(x) ? "" : isEmpty(
|
|
4812
|
-
[x,
|
|
4813
|
-
), b = useMemo(() => get(LANGUAGES,
|
|
4849
|
+
const { selectedLang: m, fallbackLang: f, languages: x } = useLanguages(), k = useMemo(
|
|
4850
|
+
() => isEmpty(x) ? "" : isEmpty(m) ? f : m,
|
|
4851
|
+
[x, m, f]
|
|
4852
|
+
), b = useMemo(() => get(LANGUAGES, k, k), [k]), v = usePageExternalData(), B = useSelectedBlock(), w = useRegisteredChaiBlocks(), _ = useMemo(
|
|
4814
4853
|
() => get(w, [B == null ? void 0 : B._type, "i18nProps"], []),
|
|
4815
4854
|
[w, B == null ? void 0 : B._type]
|
|
4816
|
-
), [
|
|
4855
|
+
), [E, C] = useState(null);
|
|
4817
4856
|
if (d)
|
|
4818
4857
|
return null;
|
|
4819
4858
|
if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: n, children: a });
|
|
4820
|
-
const N =
|
|
4859
|
+
const N = _ == null ? void 0 : _.includes(o.replace("root.", ""));
|
|
4821
4860
|
if (u.type === "array") {
|
|
4822
|
-
const
|
|
4861
|
+
const S = E === o;
|
|
4823
4862
|
return /* @__PURE__ */ jsxs("div", { className: `${n} relative`, children: [
|
|
4824
4863
|
u.title && /* @__PURE__ */ jsxs(
|
|
4825
4864
|
"label",
|
|
4826
4865
|
{
|
|
4827
4866
|
htmlFor: o,
|
|
4828
|
-
onClick: () => S
|
|
4867
|
+
onClick: () => C(S ? null : o),
|
|
4829
4868
|
className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
|
|
4830
4869
|
children: [
|
|
4831
|
-
|
|
4870
|
+
S ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
|
|
4832
4871
|
/* @__PURE__ */ jsx(List, { className: "h-3 w-3" }),
|
|
4833
4872
|
/* @__PURE__ */ jsx("span", { className: "leading-tight", children: r }),
|
|
4834
4873
|
" ",
|
|
@@ -4836,7 +4875,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
|
|
|
4836
4875
|
]
|
|
4837
4876
|
}
|
|
4838
4877
|
),
|
|
4839
|
-
(g == null ? void 0 : g.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxs("div", { className: `${
|
|
4878
|
+
(g == null ? void 0 : g.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxs("div", { className: `${S ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
|
|
4840
4879
|
c,
|
|
4841
4880
|
a,
|
|
4842
4881
|
l,
|
|
@@ -4859,8 +4898,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
|
|
|
4859
4898
|
DataBindingSelector,
|
|
4860
4899
|
{
|
|
4861
4900
|
schema: u,
|
|
4862
|
-
onChange: (
|
|
4863
|
-
|
|
4901
|
+
onChange: (S) => {
|
|
4902
|
+
h(S, g, o);
|
|
4864
4903
|
},
|
|
4865
4904
|
id: o,
|
|
4866
4905
|
formData: g
|
|
@@ -4907,8 +4946,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
|
|
|
4907
4946
|
/* @__PURE__ */ jsx("span", { children: "Add" })
|
|
4908
4947
|
] }) }), JSONForm = memo(({ blockId: o, schema: n, uiSchema: r, formData: a, onChange: l }) => {
|
|
4909
4948
|
const { selectedLang: i } = useLanguages(), c = useBlockSettingComponents("widget"), d = useBlockSettingComponents("field"), p = useBlockSettingComponents("template"), u = useThrottledCallback(
|
|
4910
|
-
async ({ formData: g },
|
|
4911
|
-
l({ formData: g },
|
|
4949
|
+
async ({ formData: g }, h) => {
|
|
4950
|
+
l({ formData: g }, h);
|
|
4912
4951
|
},
|
|
4913
4952
|
[l, i],
|
|
4914
4953
|
400
|
|
@@ -4949,10 +4988,10 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
|
|
|
4949
4988
|
uiSchema: r,
|
|
4950
4989
|
schema: n,
|
|
4951
4990
|
formData: a,
|
|
4952
|
-
onChange: ({ formData: g },
|
|
4953
|
-
if (!
|
|
4954
|
-
const
|
|
4955
|
-
u({ formData: g },
|
|
4991
|
+
onChange: ({ formData: g }, h) => {
|
|
4992
|
+
if (!h || o !== (g == null ? void 0 : g._id)) return;
|
|
4993
|
+
const m = take(h.split("."), 2).join(".").replace("root.", "");
|
|
4994
|
+
u({ formData: g }, m);
|
|
4956
4995
|
}
|
|
4957
4996
|
},
|
|
4958
4997
|
i
|
|
@@ -4964,43 +5003,43 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
|
|
|
4964
5003
|
}), a;
|
|
4965
5004
|
};
|
|
4966
5005
|
function BlockSettings() {
|
|
4967
|
-
const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(),
|
|
4968
|
-
|
|
5006
|
+
const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), h = getRegisteredChaiBlock(g == null ? void 0 : g._type), m = formDataWithSelectedLang(g, o, h), f = ({ formData: E }, C, A) => {
|
|
5007
|
+
C && (c == null ? void 0 : c._id) === n._id && a([n._id], { [C]: get(E, C) }, A);
|
|
4969
5008
|
}, x = useCallback(
|
|
4970
|
-
debounce(({ formData:
|
|
4971
|
-
f({ formData:
|
|
5009
|
+
debounce(({ formData: E }, C, A) => {
|
|
5010
|
+
f({ formData: E }, C, A), d(E);
|
|
4972
5011
|
}, 1500),
|
|
4973
5012
|
[n == null ? void 0 : n._id, o]
|
|
4974
|
-
),
|
|
4975
|
-
|
|
4976
|
-
}, b = ({ formData:
|
|
4977
|
-
|
|
5013
|
+
), k = ({ formData: E }, C) => {
|
|
5014
|
+
C && (r([n._id], { [C]: get(E, C) }), x({ formData: E }, C, { [C]: get(c, C) }));
|
|
5015
|
+
}, b = ({ formData: E }, C) => {
|
|
5016
|
+
C && (r([g._id], { [C]: get(E, C) }), x({ formData: E }, C, { [C]: get(c, C) }));
|
|
4978
5017
|
}, { schema: v, uiSchema: B } = useMemo(() => {
|
|
4979
|
-
const
|
|
4980
|
-
if (!
|
|
5018
|
+
const E = n == null ? void 0 : n._type;
|
|
5019
|
+
if (!E)
|
|
4981
5020
|
return { schema: {}, uiSchema: {} };
|
|
4982
5021
|
try {
|
|
4983
|
-
const { schema:
|
|
4984
|
-
if (
|
|
5022
|
+
const { schema: C, uiSchema: A } = getBlockFormSchemas(E);
|
|
5023
|
+
if (E === "Repeater") {
|
|
4985
5024
|
const N = get(n, "repeaterItems", "");
|
|
4986
5025
|
startsWith(N, `{{${COLLECTION_PREFIX}`) ? (set(A, "filter", { "ui:widget": "collectionSelect" }), set(A, "sort", { "ui:widget": "collectionSelect" })) : (set(A, "filter", { "ui:widget": "hidden" }), set(A, "sort", { "ui:widget": "hidden" }));
|
|
4987
5026
|
}
|
|
4988
|
-
return { schema:
|
|
5027
|
+
return { schema: C, uiSchema: A };
|
|
4989
5028
|
} catch {
|
|
4990
5029
|
return { schema: {}, uiSchema: {} };
|
|
4991
5030
|
}
|
|
4992
|
-
}, [n]), { wrapperSchema: w, wrapperUiSchema:
|
|
5031
|
+
}, [n]), { wrapperSchema: w, wrapperUiSchema: _ } = useMemo(() => {
|
|
4993
5032
|
if (!g || !(g != null && g._type))
|
|
4994
5033
|
return { wrapperSchema: {}, wrapperUiSchema: {} };
|
|
4995
|
-
const
|
|
4996
|
-
return { wrapperSchema:
|
|
5034
|
+
const E = g == null ? void 0 : g._type, { schema: C = {}, uiSchema: A = {} } = getBlockFormSchemas(E);
|
|
5035
|
+
return { wrapperSchema: C, wrapperUiSchema: A };
|
|
4997
5036
|
}, [g]);
|
|
4998
5037
|
return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
|
|
4999
5038
|
!isEmpty(g) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
|
|
5000
5039
|
/* @__PURE__ */ jsxs(
|
|
5001
5040
|
"div",
|
|
5002
5041
|
{
|
|
5003
|
-
onClick: () => u((
|
|
5042
|
+
onClick: () => u((E) => !E),
|
|
5004
5043
|
className: "flex cursor-pointer items-center gap-x-1 py-2 text-xs font-medium leading-tight hover:bg-slate-100",
|
|
5005
5044
|
children: [
|
|
5006
5045
|
p ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 stroke-[3] text-slate-400" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 stroke-[3] text-slate-400" }),
|
|
@@ -5020,9 +5059,9 @@ function BlockSettings() {
|
|
|
5020
5059
|
{
|
|
5021
5060
|
blockId: g == null ? void 0 : g._id,
|
|
5022
5061
|
onChange: b,
|
|
5023
|
-
formData:
|
|
5062
|
+
formData: m,
|
|
5024
5063
|
schema: w,
|
|
5025
|
-
uiSchema:
|
|
5064
|
+
uiSchema: _
|
|
5026
5065
|
}
|
|
5027
5066
|
) })
|
|
5028
5067
|
] }),
|
|
@@ -5030,7 +5069,7 @@ function BlockSettings() {
|
|
|
5030
5069
|
JSONForm,
|
|
5031
5070
|
{
|
|
5032
5071
|
blockId: n == null ? void 0 : n._id,
|
|
5033
|
-
onChange:
|
|
5072
|
+
onChange: k,
|
|
5034
5073
|
formData: i,
|
|
5035
5074
|
schema: v,
|
|
5036
5075
|
uiSchema: B
|
|
@@ -5210,52 +5249,52 @@ const BlockStylingProps = () => {
|
|
|
5210
5249
|
},
|
|
5211
5250
|
a
|
|
5212
5251
|
)) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
|
|
5213
|
-
const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [
|
|
5252
|
+
const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [h, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [k, b] = useState(""), [v, B] = useState(!1), [w, _] = useState(!1);
|
|
5214
5253
|
useEffect(() => {
|
|
5215
|
-
const { value:
|
|
5216
|
-
if (
|
|
5217
|
-
l(
|
|
5254
|
+
const { value: S, unit: y } = getClassValueAndUnit(i);
|
|
5255
|
+
if (y === "") {
|
|
5256
|
+
l(S), m(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
|
|
5218
5257
|
return;
|
|
5219
5258
|
}
|
|
5220
|
-
|
|
5259
|
+
m(y), l(y === "class" || isEmpty(S) ? "" : S);
|
|
5221
5260
|
}, [i, p, u]);
|
|
5222
|
-
const
|
|
5223
|
-
(
|
|
5224
|
-
const
|
|
5225
|
-
if (get(
|
|
5261
|
+
const E = useThrottledCallback((S) => c(S), [c], THROTTLE_TIME), C = useThrottledCallback((S) => c(S, !1), [c], THROTTLE_TIME), A = useCallback(
|
|
5262
|
+
(S = !1) => {
|
|
5263
|
+
const y = getUserInputValues(`${a}`, u);
|
|
5264
|
+
if (get(y, "error", !1)) {
|
|
5226
5265
|
x(!0);
|
|
5227
5266
|
return;
|
|
5228
5267
|
}
|
|
5229
|
-
const j = get(
|
|
5268
|
+
const j = get(y, "unit") !== "" ? get(y, "unit") : h;
|
|
5230
5269
|
if (j === "auto" || j === "none") {
|
|
5231
|
-
|
|
5270
|
+
E(`${d}${j}`);
|
|
5232
5271
|
return;
|
|
5233
5272
|
}
|
|
5234
|
-
if (get(
|
|
5273
|
+
if (get(y, "value") === "")
|
|
5235
5274
|
return;
|
|
5236
|
-
const
|
|
5237
|
-
|
|
5275
|
+
const L = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
|
|
5276
|
+
S ? C(L) : E(L);
|
|
5238
5277
|
},
|
|
5239
|
-
[
|
|
5278
|
+
[E, C, a, h, d, u]
|
|
5240
5279
|
), N = useCallback(
|
|
5241
|
-
(
|
|
5242
|
-
const
|
|
5243
|
-
if (get(
|
|
5280
|
+
(S) => {
|
|
5281
|
+
const y = getUserInputValues(`${a}`, u);
|
|
5282
|
+
if (get(y, "error", !1)) {
|
|
5244
5283
|
x(!0);
|
|
5245
5284
|
return;
|
|
5246
5285
|
}
|
|
5247
|
-
if (
|
|
5248
|
-
|
|
5286
|
+
if (S === "auto" || S === "none") {
|
|
5287
|
+
E(`${d}${S}`);
|
|
5249
5288
|
return;
|
|
5250
5289
|
}
|
|
5251
|
-
if (get(
|
|
5290
|
+
if (get(y, "value") === "")
|
|
5252
5291
|
return;
|
|
5253
|
-
const j = get(
|
|
5254
|
-
|
|
5292
|
+
const j = get(y, "unit") !== "" ? get(y, "unit") : S, L = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
|
|
5293
|
+
E(L);
|
|
5255
5294
|
},
|
|
5256
|
-
[
|
|
5295
|
+
[E, a, d, u]
|
|
5257
5296
|
);
|
|
5258
|
-
return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children:
|
|
5297
|
+
return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: h === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
5259
5298
|
/* @__PURE__ */ jsx(
|
|
5260
5299
|
"input",
|
|
5261
5300
|
{
|
|
@@ -5270,35 +5309,35 @@ const BlockStylingProps = () => {
|
|
|
5270
5309
|
] })
|
|
5271
5310
|
] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${v ? "z-auto" : ""}`, children: [
|
|
5272
5311
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
|
|
5273
|
-
["none", "auto"].indexOf(
|
|
5312
|
+
["none", "auto"].indexOf(h) !== -1 ? null : /* @__PURE__ */ jsx(
|
|
5274
5313
|
"input",
|
|
5275
5314
|
{
|
|
5276
|
-
readOnly:
|
|
5277
|
-
onKeyPress: (
|
|
5278
|
-
|
|
5315
|
+
readOnly: h === "class",
|
|
5316
|
+
onKeyPress: (S) => {
|
|
5317
|
+
S.key === "Enter" && A();
|
|
5279
5318
|
},
|
|
5280
|
-
onKeyDown: (
|
|
5281
|
-
if (
|
|
5319
|
+
onKeyDown: (S) => {
|
|
5320
|
+
if (S.keyCode !== 38 && S.keyCode !== 40)
|
|
5282
5321
|
return;
|
|
5283
|
-
|
|
5284
|
-
const
|
|
5285
|
-
let j = isNaN$1(
|
|
5286
|
-
|
|
5287
|
-
const
|
|
5288
|
-
|
|
5322
|
+
S.preventDefault(), _(!0);
|
|
5323
|
+
const y = parseInt$1(S.target.value);
|
|
5324
|
+
let j = isNaN$1(y) ? 0 : y;
|
|
5325
|
+
S.keyCode === 38 && (j += 1), S.keyCode === 40 && (j -= 1);
|
|
5326
|
+
const I = `${j}`, P = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${h === "-" ? "" : h}]`;
|
|
5327
|
+
C(P);
|
|
5289
5328
|
},
|
|
5290
|
-
onKeyUp: (
|
|
5291
|
-
w && (
|
|
5329
|
+
onKeyUp: (S) => {
|
|
5330
|
+
w && (S.preventDefault(), _(!1));
|
|
5292
5331
|
},
|
|
5293
5332
|
onBlur: () => A(),
|
|
5294
|
-
onChange: (
|
|
5295
|
-
x(!1), l(
|
|
5333
|
+
onChange: (S) => {
|
|
5334
|
+
x(!1), l(S.target.value);
|
|
5296
5335
|
},
|
|
5297
|
-
onClick: (
|
|
5298
|
-
var
|
|
5299
|
-
(
|
|
5336
|
+
onClick: (S) => {
|
|
5337
|
+
var y;
|
|
5338
|
+
(y = S == null ? void 0 : S.target) == null || y.select(), r(!1);
|
|
5300
5339
|
},
|
|
5301
|
-
value: v ?
|
|
5340
|
+
value: v ? k : a,
|
|
5302
5341
|
className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
|
|
5303
5342
|
" ",
|
|
5304
5343
|
f ? "border-red-500 text-red-500" : "border-foreground/20"
|
|
@@ -5313,7 +5352,7 @@ const BlockStylingProps = () => {
|
|
|
5313
5352
|
onClick: () => r(!n),
|
|
5314
5353
|
className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
|
|
5315
5354
|
children: [
|
|
5316
|
-
/* @__PURE__ */ jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children:
|
|
5355
|
+
/* @__PURE__ */ jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: h }),
|
|
5317
5356
|
u.length > 1 ? /* @__PURE__ */ jsx(TriangleDownIcon, {}) : null
|
|
5318
5357
|
]
|
|
5319
5358
|
}
|
|
@@ -5322,33 +5361,33 @@ const BlockStylingProps = () => {
|
|
|
5322
5361
|
UnitSelection,
|
|
5323
5362
|
{
|
|
5324
5363
|
units: u,
|
|
5325
|
-
current:
|
|
5326
|
-
onSelect: (
|
|
5327
|
-
r(!1),
|
|
5364
|
+
current: h,
|
|
5365
|
+
onSelect: (S) => {
|
|
5366
|
+
r(!1), m(S), N(S);
|
|
5328
5367
|
}
|
|
5329
5368
|
}
|
|
5330
5369
|
) })
|
|
5331
5370
|
] })
|
|
5332
5371
|
] }),
|
|
5333
|
-
["none", "auto"].indexOf(
|
|
5372
|
+
["none", "auto"].indexOf(h) !== -1 || v ? null : /* @__PURE__ */ jsx(
|
|
5334
5373
|
DragStyleButton,
|
|
5335
5374
|
{
|
|
5336
5375
|
onDragStart: () => B(!0),
|
|
5337
|
-
onDragEnd: (
|
|
5338
|
-
if (b(() => ""), B(!1), isEmpty(
|
|
5376
|
+
onDragEnd: (S) => {
|
|
5377
|
+
if (b(() => ""), B(!1), isEmpty(S))
|
|
5339
5378
|
return;
|
|
5340
|
-
const
|
|
5341
|
-
|
|
5379
|
+
const y = `${S}`, I = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${h === "-" ? "" : h}]`;
|
|
5380
|
+
E(I);
|
|
5342
5381
|
},
|
|
5343
|
-
onDrag: (
|
|
5344
|
-
if (isEmpty(
|
|
5382
|
+
onDrag: (S) => {
|
|
5383
|
+
if (isEmpty(S))
|
|
5345
5384
|
return;
|
|
5346
|
-
b(
|
|
5347
|
-
const
|
|
5348
|
-
|
|
5385
|
+
b(S);
|
|
5386
|
+
const y = `${S}`, I = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${h === "-" ? "" : h}]`;
|
|
5387
|
+
C(I);
|
|
5349
5388
|
},
|
|
5350
5389
|
currentValue: a,
|
|
5351
|
-
unit:
|
|
5390
|
+
unit: h,
|
|
5352
5391
|
negative: g,
|
|
5353
5392
|
cssProperty: p
|
|
5354
5393
|
}
|
|
@@ -5408,10 +5447,10 @@ const COLOR_PROP = {
|
|
|
5408
5447
|
ringColor: "ring",
|
|
5409
5448
|
ringOffsetColor: "ring-offset"
|
|
5410
5449
|
}, ColorChoice = ({ property: o, onChange: n }) => {
|
|
5411
|
-
const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""),
|
|
5450
|
+
const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), h = get(u, "2", ""), m = useCallback(
|
|
5412
5451
|
// eslint-disable-next-line no-shadow
|
|
5413
|
-
(
|
|
5414
|
-
["current", "inherit", "transparent", "black", "white"].includes(
|
|
5452
|
+
(k) => {
|
|
5453
|
+
["current", "inherit", "transparent", "black", "white"].includes(k) ? (c([]), p({ color: k })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((b) => ({ ...b, color: k, shade: b.shade ? b.shade : "500" })));
|
|
5415
5454
|
},
|
|
5416
5455
|
[c, p]
|
|
5417
5456
|
);
|
|
@@ -5422,8 +5461,8 @@ const COLOR_PROP = {
|
|
|
5422
5461
|
}, [g]);
|
|
5423
5462
|
const f = useCallback(
|
|
5424
5463
|
// eslint-disable-next-line no-shadow
|
|
5425
|
-
(
|
|
5426
|
-
p({ color: g, shade:
|
|
5464
|
+
(k) => {
|
|
5465
|
+
p({ color: g, shade: k });
|
|
5427
5466
|
},
|
|
5428
5467
|
[g]
|
|
5429
5468
|
);
|
|
@@ -5441,7 +5480,7 @@ const COLOR_PROP = {
|
|
|
5441
5480
|
disabled: !l,
|
|
5442
5481
|
rounded: !0,
|
|
5443
5482
|
selected: g,
|
|
5444
|
-
onChange:
|
|
5483
|
+
onChange: m,
|
|
5445
5484
|
options: [
|
|
5446
5485
|
"current",
|
|
5447
5486
|
"transparent",
|
|
@@ -5474,7 +5513,7 @@ const COLOR_PROP = {
|
|
|
5474
5513
|
]
|
|
5475
5514
|
}
|
|
5476
5515
|
) }),
|
|
5477
|
-
/* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected:
|
|
5516
|
+
/* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: h, disabled: !g || !l, onChange: f, options: i }) })
|
|
5478
5517
|
] });
|
|
5479
5518
|
}, EDITOR_ICONS = {
|
|
5480
5519
|
"not-italic": () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 3H11V5H9V11H11V13H5V11H7V5H5V3H9Z", fill: "white" }) }),
|
|
@@ -5808,22 +5847,22 @@ const COLOR_PROP = {
|
|
|
5808
5847
|
"2xl": "1536px"
|
|
5809
5848
|
}, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
|
|
5810
5849
|
const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
|
|
5811
|
-
}, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(),
|
|
5812
|
-
(
|
|
5813
|
-
const N = { dark: p, mq: g, mod: u, cls:
|
|
5850
|
+
}, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), h = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), k = useMemo(() => get(h, "fullCls", ""), [h]), b = useCallback(
|
|
5851
|
+
(C, A = !0) => {
|
|
5852
|
+
const N = { dark: p, mq: g, mod: u, cls: C, property: l, fullCls: "" };
|
|
5814
5853
|
(p || u !== "") && (N.mq = "xs");
|
|
5815
|
-
const
|
|
5816
|
-
|
|
5854
|
+
const S = generateFullClsName(N);
|
|
5855
|
+
m(x, [S], A);
|
|
5817
5856
|
},
|
|
5818
|
-
[x, p, g, u, l,
|
|
5857
|
+
[x, p, g, u, l, m]
|
|
5819
5858
|
), v = useCallback(() => {
|
|
5820
|
-
f(x, [
|
|
5821
|
-
}, [x,
|
|
5859
|
+
f(x, [k], !0);
|
|
5860
|
+
}, [x, k, f]), B = useMemo(() => canChangeClass(h, g), [h, g]);
|
|
5822
5861
|
useEffect(() => {
|
|
5823
|
-
i(B,
|
|
5824
|
-
}, [B, i,
|
|
5825
|
-
const [, , w] = useScreenSizeWidth(),
|
|
5826
|
-
(
|
|
5862
|
+
i(B, h);
|
|
5863
|
+
}, [B, i, h]);
|
|
5864
|
+
const [, , w] = useScreenSizeWidth(), _ = useCallback(
|
|
5865
|
+
(C) => {
|
|
5827
5866
|
w({
|
|
5828
5867
|
xs: 400,
|
|
5829
5868
|
sm: 640,
|
|
@@ -5831,18 +5870,18 @@ const COLOR_PROP = {
|
|
|
5831
5870
|
lg: 1024,
|
|
5832
5871
|
xl: 1420,
|
|
5833
5872
|
"2xl": 1920
|
|
5834
|
-
}[
|
|
5873
|
+
}[C]);
|
|
5835
5874
|
},
|
|
5836
5875
|
[w]
|
|
5837
|
-
),
|
|
5838
|
-
return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: B, canReset:
|
|
5839
|
-
/* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${
|
|
5876
|
+
), E = get(h, "dark", null) === p && get(h, "mod", null) === u && get(h, "mq", null) === g;
|
|
5877
|
+
return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: B, canReset: h && E, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
|
|
5878
|
+
/* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${h && !E ? "text-foreground" : ""}`, children: n(a) }) }),
|
|
5840
5879
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
|
|
5841
5880
|
/* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
|
|
5842
5881
|
r === "arbitrary" ? /* @__PURE__ */ jsx(
|
|
5843
5882
|
AdvanceChoices,
|
|
5844
5883
|
{
|
|
5845
|
-
currentClass: get(
|
|
5884
|
+
currentClass: get(h, "cls", ""),
|
|
5846
5885
|
classPrefix: get(CLASS_PREFIXES, l, ""),
|
|
5847
5886
|
units: c || [],
|
|
5848
5887
|
onChange: b,
|
|
@@ -5855,7 +5894,7 @@ const COLOR_PROP = {
|
|
|
5855
5894
|
r === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: b }),
|
|
5856
5895
|
r === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: b })
|
|
5857
5896
|
] }),
|
|
5858
|
-
/* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${
|
|
5897
|
+
/* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${k ? "visible" : "invisible"}`, children: E ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => v(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : B && h ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
|
|
5859
5898
|
/* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
|
|
5860
5899
|
"button",
|
|
5861
5900
|
{
|
|
@@ -5867,19 +5906,19 @@ const COLOR_PROP = {
|
|
|
5867
5906
|
/* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxs("div", { children: [
|
|
5868
5907
|
"Current style is set at ",
|
|
5869
5908
|
/* @__PURE__ */ jsxs("span", { className: "font-bold", children: [
|
|
5870
|
-
getBreakpoint(get(
|
|
5871
|
-
p && !
|
|
5909
|
+
getBreakpoint(get(h, "mq")),
|
|
5910
|
+
p && !h.dark ? "(Light mode)" : ""
|
|
5872
5911
|
] }),
|
|
5873
5912
|
/* @__PURE__ */ jsx("br", {}),
|
|
5874
5913
|
/* @__PURE__ */ jsxs(
|
|
5875
5914
|
"button",
|
|
5876
5915
|
{
|
|
5877
5916
|
type: "button",
|
|
5878
|
-
onClick: () =>
|
|
5917
|
+
onClick: () => _(get(h, "mq")),
|
|
5879
5918
|
className: "block w-full cursor-default text-right font-semibold text-blue-500",
|
|
5880
5919
|
children: [
|
|
5881
5920
|
"Switch to ",
|
|
5882
|
-
get(
|
|
5921
|
+
get(h, "mq").toUpperCase()
|
|
5883
5922
|
]
|
|
5884
5923
|
}
|
|
5885
5924
|
)
|
|
@@ -5896,7 +5935,7 @@ const COLOR_PROP = {
|
|
|
5896
5935
|
units: i = basicUnits,
|
|
5897
5936
|
negative: c = !1
|
|
5898
5937
|
}) => {
|
|
5899
|
-
const { t: d } = useTranslation(), [p, u] = useState(n[0].key), g = useSelectedBlockCurrentClasses(),
|
|
5938
|
+
const { t: d } = useTranslation(), [p, u] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), h = useCallback((m) => map(g, "property").includes(m), [g]);
|
|
5900
5939
|
return /* @__PURE__ */ jsxs(
|
|
5901
5940
|
"div",
|
|
5902
5941
|
{
|
|
@@ -5904,7 +5943,7 @@ const COLOR_PROP = {
|
|
|
5904
5943
|
children: [
|
|
5905
5944
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-row text-xs", children: [
|
|
5906
5945
|
o && /* @__PURE__ */ jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(o) }),
|
|
5907
|
-
/* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: n.map(({ label:
|
|
5946
|
+
/* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: n.map(({ label: m, key: f }, x) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
|
|
5908
5947
|
/* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
|
|
5909
5948
|
"button",
|
|
5910
5949
|
{
|
|
@@ -5913,13 +5952,13 @@ const COLOR_PROP = {
|
|
|
5913
5952
|
className: `relative cursor-pointer rounded-full p-1 text-[8px] ${f === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
|
|
5914
5953
|
children: [
|
|
5915
5954
|
React__default.createElement("div", {
|
|
5916
|
-
className:
|
|
5955
|
+
className: h(f) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
|
|
5917
5956
|
}),
|
|
5918
5957
|
React__default.createElement(get(EDITOR_ICONS, f, BoxIcon), { className: "text-inherit w-3 h-3" })
|
|
5919
5958
|
]
|
|
5920
5959
|
}
|
|
5921
5960
|
) }),
|
|
5922
|
-
/* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(
|
|
5961
|
+
/* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(m)) })
|
|
5923
5962
|
] }) }, `option-${x}`)) })
|
|
5924
5963
|
] }),
|
|
5925
5964
|
/* @__PURE__ */ jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ jsx(
|
|
@@ -6075,23 +6114,23 @@ const COLOR_PROP = {
|
|
|
6075
6114
|
canvas: n = !1,
|
|
6076
6115
|
tooltip: r = !0
|
|
6077
6116
|
}) => {
|
|
6078
|
-
const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t:
|
|
6117
|
+
const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t: h } = useTranslation(), m = useBuilderProp("breakpoints", WEB_BREAKPOINTS), f = (b) => {
|
|
6079
6118
|
u.includes(b) ? u.length > 2 && g(u.filter((v) => v !== b)) : g((v) => [...v, b]);
|
|
6080
6119
|
}, x = (b) => {
|
|
6081
6120
|
n || l(b), c(b);
|
|
6082
|
-
},
|
|
6083
|
-
return
|
|
6121
|
+
}, k = getBreakpointValue(n ? i : a).toLowerCase();
|
|
6122
|
+
return m.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(m, (b) => /* @__PURE__ */ createElement(
|
|
6084
6123
|
BreakpointCard,
|
|
6085
6124
|
{
|
|
6086
6125
|
canvas: n,
|
|
6087
6126
|
...b,
|
|
6088
6127
|
onClick: x,
|
|
6089
6128
|
key: b.breakpoint,
|
|
6090
|
-
currentBreakpoint:
|
|
6129
|
+
currentBreakpoint: k
|
|
6091
6130
|
}
|
|
6092
6131
|
)) }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between rounded-md", children: [
|
|
6093
6132
|
/* @__PURE__ */ jsx("div", { className: "flex items-center", children: map(
|
|
6094
|
-
|
|
6133
|
+
m.filter((b) => includes(u, toUpper(b.breakpoint))),
|
|
6095
6134
|
(b) => /* @__PURE__ */ createElement(
|
|
6096
6135
|
BreakpointCard,
|
|
6097
6136
|
{
|
|
@@ -6101,22 +6140,22 @@ const COLOR_PROP = {
|
|
|
6101
6140
|
...b,
|
|
6102
6141
|
onClick: x,
|
|
6103
6142
|
key: b.breakpoint,
|
|
6104
|
-
currentBreakpoint:
|
|
6143
|
+
currentBreakpoint: k
|
|
6105
6144
|
}
|
|
6106
6145
|
)
|
|
6107
6146
|
) }),
|
|
6108
6147
|
/* @__PURE__ */ jsxs(DropdownMenu, { children: [
|
|
6109
6148
|
/* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("span", { className: "cursor-pointer px-2.5 hover:opacity-80", children: /* @__PURE__ */ jsx(DotsVerticalIcon, { className: "scale-90 transform" }) }) }),
|
|
6110
6149
|
/* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56 border-border text-xs", children: [
|
|
6111
|
-
/* @__PURE__ */ jsx(DropdownMenuLabel, { children:
|
|
6150
|
+
/* @__PURE__ */ jsx(DropdownMenuLabel, { children: h("Screen sizes") }),
|
|
6112
6151
|
/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
|
|
6113
|
-
map(
|
|
6152
|
+
map(m, (b) => /* @__PURE__ */ jsx(
|
|
6114
6153
|
DropdownMenuCheckboxItem,
|
|
6115
6154
|
{
|
|
6116
6155
|
disabled: b.breakpoint === "xs",
|
|
6117
6156
|
onCheckedChange: () => f(toUpper(b.breakpoint)),
|
|
6118
6157
|
checked: includes(u, toUpper(b.breakpoint)),
|
|
6119
|
-
children:
|
|
6158
|
+
children: h(b.title)
|
|
6120
6159
|
},
|
|
6121
6160
|
b.breakpoint
|
|
6122
6161
|
))
|
|
@@ -6195,11 +6234,11 @@ function Countdown() {
|
|
|
6195
6234
|
const AskAIStyles = ({ blockId: o }) => {
|
|
6196
6235
|
const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), p = useRef(null), [u, g] = useState();
|
|
6197
6236
|
useEffect(() => {
|
|
6198
|
-
var
|
|
6199
|
-
(
|
|
6237
|
+
var m;
|
|
6238
|
+
(m = d.current) == null || m.focus();
|
|
6200
6239
|
}, []);
|
|
6201
|
-
const
|
|
6202
|
-
const { usage: f } =
|
|
6240
|
+
const h = (m) => {
|
|
6241
|
+
const { usage: f } = m || {};
|
|
6203
6242
|
!l && f && g(f), p.current = setTimeout(() => g(void 0), 1e4), l || c("");
|
|
6204
6243
|
};
|
|
6205
6244
|
return /* @__PURE__ */ jsxs("div", { className: "", children: [
|
|
@@ -6209,12 +6248,12 @@ const AskAIStyles = ({ blockId: o }) => {
|
|
|
6209
6248
|
{
|
|
6210
6249
|
ref: d,
|
|
6211
6250
|
value: i,
|
|
6212
|
-
onChange: (
|
|
6251
|
+
onChange: (m) => c(m.target.value),
|
|
6213
6252
|
placeholder: n("Ask AI to edit styles"),
|
|
6214
6253
|
className: "no-scrollbar my-2 w-full border border-border p-2 text-xs",
|
|
6215
6254
|
rows: 4,
|
|
6216
|
-
onKeyDown: (
|
|
6217
|
-
|
|
6255
|
+
onKeyDown: (m) => {
|
|
6256
|
+
m.key === "Enter" && (m.preventDefault(), p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, h));
|
|
6218
6257
|
}
|
|
6219
6258
|
}
|
|
6220
6259
|
),
|
|
@@ -6224,7 +6263,7 @@ const AskAIStyles = ({ blockId: o }) => {
|
|
|
6224
6263
|
{
|
|
6225
6264
|
disabled: i.trim().length < 5 || a,
|
|
6226
6265
|
onClick: () => {
|
|
6227
|
-
p.current && clearTimeout(p.current), g(void 0), r("styles", o, i,
|
|
6266
|
+
p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, h);
|
|
6228
6267
|
},
|
|
6229
6268
|
variant: "default",
|
|
6230
6269
|
className: "w-fit",
|
|
@@ -6255,25 +6294,25 @@ const AskAIStyles = ({ blockId: o }) => {
|
|
|
6255
6294
|
] });
|
|
6256
6295
|
};
|
|
6257
6296
|
function ManualClasses() {
|
|
6258
|
-
var
|
|
6259
|
-
const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [
|
|
6260
|
-
const
|
|
6261
|
-
u(
|
|
6262
|
-
}, [w,
|
|
6263
|
-
const
|
|
6297
|
+
var I;
|
|
6298
|
+
const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [h] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), k = (I = first(d)) == null ? void 0 : I.prop, { classes: b } = getSplitChaiClasses(get(p, k, "")), v = b.split(" ").filter((L) => !isEmpty(L)), B = () => {
|
|
6299
|
+
const L = f.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
|
|
6300
|
+
u(h, L, !0), x("");
|
|
6301
|
+
}, [w, _] = useState([]), E = ({ value: L }) => {
|
|
6302
|
+
const P = L.trim().toLowerCase(), T = P.match(/.+:/g);
|
|
6264
6303
|
let D = [];
|
|
6265
|
-
if (
|
|
6266
|
-
const [O] =
|
|
6267
|
-
D = i.search(
|
|
6304
|
+
if (T && T.length > 0) {
|
|
6305
|
+
const [O] = T, R = P.replace(O, "");
|
|
6306
|
+
D = i.search(R).map((M) => ({
|
|
6268
6307
|
...M,
|
|
6269
6308
|
item: { ...M.item, name: O + M.item.name }
|
|
6270
6309
|
}));
|
|
6271
6310
|
} else
|
|
6272
|
-
D = i.search(
|
|
6273
|
-
return
|
|
6274
|
-
},
|
|
6275
|
-
|
|
6276
|
-
}, A = (
|
|
6311
|
+
D = i.search(P);
|
|
6312
|
+
return _(map(D, "item"));
|
|
6313
|
+
}, C = () => {
|
|
6314
|
+
_([]);
|
|
6315
|
+
}, A = (L) => L.name, N = (L) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: L.name }), S = useMemo(
|
|
6277
6316
|
() => ({
|
|
6278
6317
|
ref: o,
|
|
6279
6318
|
autoComplete: "off",
|
|
@@ -6282,22 +6321,22 @@ function ManualClasses() {
|
|
|
6282
6321
|
spellCheck: !1,
|
|
6283
6322
|
placeholder: c("Enter classes separated by space"),
|
|
6284
6323
|
value: f,
|
|
6285
|
-
onFocus: (
|
|
6324
|
+
onFocus: (L) => {
|
|
6286
6325
|
setTimeout(() => {
|
|
6287
|
-
|
|
6326
|
+
L.target && L.target.select();
|
|
6288
6327
|
}, 0);
|
|
6289
6328
|
},
|
|
6290
|
-
onKeyDown: (
|
|
6291
|
-
|
|
6329
|
+
onKeyDown: (L) => {
|
|
6330
|
+
L.key === "Enter" && f.trim() !== "" && B();
|
|
6292
6331
|
},
|
|
6293
|
-
onChange: (
|
|
6332
|
+
onChange: (L, { newValue: P }) => x(P),
|
|
6294
6333
|
className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
|
|
6295
6334
|
}),
|
|
6296
6335
|
[f, c, o]
|
|
6297
|
-
),
|
|
6336
|
+
), y = (L) => {
|
|
6298
6337
|
debugger;
|
|
6299
|
-
const
|
|
6300
|
-
g(
|
|
6338
|
+
const P = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
|
|
6339
|
+
g(h, [L]), u(h, P, !0), r(""), l(-1);
|
|
6301
6340
|
}, j = () => {
|
|
6302
6341
|
if (navigator.clipboard === void 0) {
|
|
6303
6342
|
toast.error(c("Clipboard not supported"));
|
|
@@ -6314,7 +6353,7 @@ function ManualClasses() {
|
|
|
6314
6353
|
/* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: c("Copy classes to clipboard") }) })
|
|
6315
6354
|
] })
|
|
6316
6355
|
] }),
|
|
6317
|
-
|
|
6356
|
+
m ? /* @__PURE__ */ jsxs(Popover, { children: [
|
|
6318
6357
|
/* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(Button, { variant: "default", className: "h-6 w-fit", size: "sm", children: [
|
|
6319
6358
|
/* @__PURE__ */ jsx(SparklesIcon, { className: "h-4 w-4" }),
|
|
6320
6359
|
/* @__PURE__ */ jsx("span", { className: "ml-2", children: c("Ask AI") })
|
|
@@ -6327,11 +6366,11 @@ function ManualClasses() {
|
|
|
6327
6366
|
Autosuggest,
|
|
6328
6367
|
{
|
|
6329
6368
|
suggestions: w,
|
|
6330
|
-
onSuggestionsFetchRequested:
|
|
6331
|
-
onSuggestionsClearRequested:
|
|
6369
|
+
onSuggestionsFetchRequested: E,
|
|
6370
|
+
onSuggestionsClearRequested: C,
|
|
6332
6371
|
getSuggestionValue: A,
|
|
6333
6372
|
renderSuggestion: N,
|
|
6334
|
-
inputProps:
|
|
6373
|
+
inputProps: S,
|
|
6335
6374
|
containerProps: {
|
|
6336
6375
|
className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
|
|
6337
6376
|
},
|
|
@@ -6355,47 +6394,47 @@ function ManualClasses() {
|
|
|
6355
6394
|
)
|
|
6356
6395
|
] }),
|
|
6357
6396
|
/* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: v.map(
|
|
6358
|
-
(
|
|
6397
|
+
(L, P) => a === P ? /* @__PURE__ */ jsx(
|
|
6359
6398
|
"input",
|
|
6360
6399
|
{
|
|
6361
6400
|
ref: o,
|
|
6362
6401
|
value: n,
|
|
6363
|
-
onChange: (
|
|
6402
|
+
onChange: (T) => r(T.target.value),
|
|
6364
6403
|
onBlur: () => {
|
|
6365
|
-
|
|
6404
|
+
y(L);
|
|
6366
6405
|
},
|
|
6367
|
-
onKeyDown: (
|
|
6368
|
-
|
|
6406
|
+
onKeyDown: (T) => {
|
|
6407
|
+
T.key === "Enter" && y(L);
|
|
6369
6408
|
},
|
|
6370
|
-
onFocus: (
|
|
6409
|
+
onFocus: (T) => {
|
|
6371
6410
|
setTimeout(() => {
|
|
6372
|
-
|
|
6411
|
+
T.target.select();
|
|
6373
6412
|
}, 0);
|
|
6374
6413
|
},
|
|
6375
6414
|
className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 pr-2 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
|
|
6376
6415
|
},
|
|
6377
|
-
|
|
6416
|
+
L
|
|
6378
6417
|
) : /* @__PURE__ */ jsxs(
|
|
6379
6418
|
"button",
|
|
6380
6419
|
{
|
|
6381
6420
|
onDoubleClick: () => {
|
|
6382
|
-
x(
|
|
6421
|
+
x(L), g(h, [L]), setTimeout(() => {
|
|
6383
6422
|
o.current && o.current.focus();
|
|
6384
6423
|
}, 10);
|
|
6385
6424
|
},
|
|
6386
6425
|
className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 pr-2 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
|
|
6387
6426
|
children: [
|
|
6388
|
-
|
|
6389
|
-
n !==
|
|
6427
|
+
L,
|
|
6428
|
+
n !== L && /* @__PURE__ */ jsx(
|
|
6390
6429
|
Cross2Icon,
|
|
6391
6430
|
{
|
|
6392
|
-
onClick: () => g(
|
|
6431
|
+
onClick: () => g(h, [L], !0),
|
|
6393
6432
|
className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
|
|
6394
6433
|
}
|
|
6395
6434
|
)
|
|
6396
6435
|
]
|
|
6397
6436
|
},
|
|
6398
|
-
|
|
6437
|
+
L
|
|
6399
6438
|
)
|
|
6400
6439
|
) })
|
|
6401
6440
|
] });
|
|
@@ -6509,13 +6548,13 @@ function BlockStyling() {
|
|
|
6509
6548
|
cssProperty: ""
|
|
6510
6549
|
}), d = useThrottledCallback(
|
|
6511
6550
|
(u) => {
|
|
6512
|
-
const g = !get(i, "negative", !1),
|
|
6513
|
-
let
|
|
6514
|
-
|
|
6551
|
+
const g = !get(i, "negative", !1), h = get(i, "cssProperty", "");
|
|
6552
|
+
let m = parseFloat(i.dragStartValue);
|
|
6553
|
+
m = isNaN(m) ? 0 : m;
|
|
6515
6554
|
let f = MAPPER[i.dragUnit];
|
|
6516
|
-
(startsWith(
|
|
6517
|
-
let
|
|
6518
|
-
g &&
|
|
6555
|
+
(startsWith(h, "scale") || h === "opacity") && (f = 10);
|
|
6556
|
+
let k = (i.dragStartY - u.pageY) / f + m;
|
|
6557
|
+
g && k < 0 && (k = 0), h === "opacity" && k > 1 && (k = 1), i.onDrag(`${k}`), l(`${k}`);
|
|
6519
6558
|
},
|
|
6520
6559
|
[i],
|
|
6521
6560
|
50
|
|
@@ -6556,10 +6595,10 @@ const CoreBlock = ({
|
|
|
6556
6595
|
parentId: r,
|
|
6557
6596
|
position: a
|
|
6558
6597
|
}) => {
|
|
6559
|
-
const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight:
|
|
6598
|
+
const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: h } = useBlockHighlight(), m = () => {
|
|
6560
6599
|
if (has(o, "blocks")) {
|
|
6561
|
-
const
|
|
6562
|
-
u(syncBlocksWithDefaults(
|
|
6600
|
+
const k = isFunction(o.blocks) ? o.blocks() : o.blocks;
|
|
6601
|
+
u(syncBlocksWithDefaults(k), r || null, a);
|
|
6563
6602
|
} else
|
|
6564
6603
|
p(o, r || null, a);
|
|
6565
6604
|
pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
|
|
@@ -6569,11 +6608,11 @@ const CoreBlock = ({
|
|
|
6569
6608
|
"button",
|
|
6570
6609
|
{
|
|
6571
6610
|
disabled: n,
|
|
6572
|
-
onClick:
|
|
6611
|
+
onClick: m,
|
|
6573
6612
|
type: "button",
|
|
6574
|
-
onDragStart: (
|
|
6575
|
-
|
|
6576
|
-
g([]),
|
|
6613
|
+
onDragStart: (k) => {
|
|
6614
|
+
k.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), k.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
|
|
6615
|
+
g([]), h();
|
|
6577
6616
|
}, 200);
|
|
6578
6617
|
},
|
|
6579
6618
|
draggable: f ? "true" : "false",
|
|
@@ -6772,7 +6811,7 @@ const CoreBlock = ({
|
|
|
6772
6811
|
}
|
|
6773
6812
|
}
|
|
6774
6813
|
}, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
|
|
6775
|
-
var
|
|
6814
|
+
var h, m, f, x, k, b, v, B;
|
|
6776
6815
|
if (r.type === "comment") return [];
|
|
6777
6816
|
let a = { _id: generateUUID() };
|
|
6778
6817
|
if (n && (a._parent = n.block._id), r.type === "text")
|
|
@@ -6794,7 +6833,7 @@ const CoreBlock = ({
|
|
|
6794
6833
|
...getAttrs(r),
|
|
6795
6834
|
...getStyles(r)
|
|
6796
6835
|
}, r.attributes) {
|
|
6797
|
-
const w = r.attributes.find((
|
|
6836
|
+
const w = r.attributes.find((_) => includes(NAME_ATTRIBUTES, _.key));
|
|
6798
6837
|
w && (a._name = w.value);
|
|
6799
6838
|
}
|
|
6800
6839
|
if (i)
|
|
@@ -6812,30 +6851,30 @@ const CoreBlock = ({
|
|
|
6812
6851
|
];
|
|
6813
6852
|
a = {
|
|
6814
6853
|
...a,
|
|
6815
|
-
href: ((
|
|
6816
|
-
hrefType: ((
|
|
6817
|
-
autoplay: ((f = l.find((
|
|
6818
|
-
maxWidth: ((
|
|
6819
|
-
backdropColor: ((b = l.find((
|
|
6820
|
-
galleryName: ((v = l.find((
|
|
6821
|
-
}, forEach(w, (
|
|
6822
|
-
has(a, `styles_attrs.${
|
|
6854
|
+
href: ((h = l.find((_) => _.key === "href")) == null ? void 0 : h.value) || "",
|
|
6855
|
+
hrefType: ((m = l.find((_) => _.key === "data-vbtype")) == null ? void 0 : m.value) || "video",
|
|
6856
|
+
autoplay: ((f = l.find((_) => _.key === "data-autoplay")) == null ? void 0 : f.value) === "true" ? "true" : "false",
|
|
6857
|
+
maxWidth: ((k = (x = l.find((_) => _.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : k.replace("px", "")) || "",
|
|
6858
|
+
backdropColor: ((b = l.find((_) => _.key === "data-overlay")) == null ? void 0 : b.value) || "",
|
|
6859
|
+
galleryName: ((v = l.find((_) => _.key === "data-gall")) == null ? void 0 : v.value) || ""
|
|
6860
|
+
}, forEach(w, (_) => {
|
|
6861
|
+
has(a, `styles_attrs.${_}`) && delete a.styles_attrs[_];
|
|
6823
6862
|
});
|
|
6824
6863
|
}
|
|
6825
6864
|
if (d && (delete a.styles_attrs, a.showDropdown = !1), u && delete a.styles_attrs, p) {
|
|
6826
6865
|
delete a.styles_attrs;
|
|
6827
|
-
const w = filter(r.children || [], (
|
|
6866
|
+
const w = filter(r.children || [], (E) => (E == null ? void 0 : E.tagName) !== "span");
|
|
6828
6867
|
a.content = getTextContent(w);
|
|
6829
|
-
const
|
|
6868
|
+
const _ = find(
|
|
6830
6869
|
r.children || [],
|
|
6831
|
-
(
|
|
6870
|
+
(E) => (E == null ? void 0 : E.tagName) === "span" && some(E.children || [], (C) => (C == null ? void 0 : C.tagName) === "svg")
|
|
6832
6871
|
);
|
|
6833
|
-
if (
|
|
6834
|
-
const
|
|
6835
|
-
if (
|
|
6836
|
-
a.icon = stringify([
|
|
6837
|
-
const { height:
|
|
6838
|
-
a.iconHeight =
|
|
6872
|
+
if (_) {
|
|
6873
|
+
const E = find(_.children || [], (C) => (C == null ? void 0 : C.tagName) === "svg");
|
|
6874
|
+
if (E) {
|
|
6875
|
+
a.icon = stringify([E]);
|
|
6876
|
+
const { height: C, width: A } = getSvgDimensions(E, "16px", "16px");
|
|
6877
|
+
a.iconHeight = C, a.iconWidth = A;
|
|
6839
6878
|
}
|
|
6840
6879
|
}
|
|
6841
6880
|
return [a];
|
|
@@ -6847,8 +6886,8 @@ const CoreBlock = ({
|
|
|
6847
6886
|
const w = stringify([r]);
|
|
6848
6887
|
return hasVideoEmbed(w) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(w)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = w, [a];
|
|
6849
6888
|
} else if (r.tagName === "svg") {
|
|
6850
|
-
const w = find(r.attributes, { key: "height" }),
|
|
6851
|
-
return a.styles = `${STYLES_KEY}, ${cn$2(`w-${
|
|
6889
|
+
const w = find(r.attributes, { key: "height" }), _ = find(r.attributes, { key: "width" }), E = get(w, "value") ? `[${get(w, "value")}px]` : "24px", C = get(_, "value") ? `[${get(_, "value")}px]` : "24px", A = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
|
|
6890
|
+
return a.styles = `${STYLES_KEY}, ${cn$2(`w-${C} h-${E}`, A)}`.trim(), r.attributes = filter(r.attributes, (N) => !includes(["style", "width", "height", "class"], N.key)), a.icon = stringify([r]), [a];
|
|
6852
6891
|
} else if (r.tagName == "option" && n && ((B = n.block) == null ? void 0 : B._type) === "Select")
|
|
6853
6892
|
return n.block.options.push({
|
|
6854
6893
|
label: getTextContent(r.children),
|
|
@@ -6956,7 +6995,7 @@ const registerChaiLibrary = (o, n) => {
|
|
|
6956
6995
|
parentId: r = void 0,
|
|
6957
6996
|
position: a = -1
|
|
6958
6997
|
}) => {
|
|
6959
|
-
const [l, i] = useState(!1), c = useMemo(() => (n == null ? void 0 : n.getBlock) || (() => []), [n]), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(),
|
|
6998
|
+
const [l, i] = useState(!1), c = useMemo(() => (n == null ? void 0 : n.getBlock) || (() => []), [n]), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), h = get(o, "name", get(o, "label")), m = get(o, "description", ""), f = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), k = (B) => {
|
|
6960
6999
|
const w = has(B, "styles_attrs.data-page-section");
|
|
6961
7000
|
return B._type === "Box" && w;
|
|
6962
7001
|
}, b = useCallback(
|
|
@@ -6980,17 +7019,17 @@ const registerChaiLibrary = (o, n) => {
|
|
|
6980
7019
|
draggable: f ? "true" : "false",
|
|
6981
7020
|
onDragStart: async (B) => {
|
|
6982
7021
|
const w = await c({ library: n, block: o });
|
|
6983
|
-
let
|
|
6984
|
-
if (
|
|
6985
|
-
const
|
|
6986
|
-
if (B.dataTransfer.setData("text/plain", JSON.stringify(
|
|
6987
|
-
const
|
|
6988
|
-
|
|
6989
|
-
B.dataTransfer.setDragImage(
|
|
7022
|
+
let _ = r;
|
|
7023
|
+
if (k(first(w)) && (_ = null), !isEmpty(w)) {
|
|
7024
|
+
const E = { blocks: w, uiLibrary: !0, parent: _ };
|
|
7025
|
+
if (B.dataTransfer.setData("text/plain", JSON.stringify(E)), o.preview) {
|
|
7026
|
+
const C = new Image();
|
|
7027
|
+
C.src = o.preview, C.onload = () => {
|
|
7028
|
+
B.dataTransfer.setDragImage(C, 0, 0);
|
|
6990
7029
|
};
|
|
6991
7030
|
} else
|
|
6992
7031
|
B.dataTransfer.setDragImage(new Image(), 0, 0);
|
|
6993
|
-
x(
|
|
7032
|
+
x(E), setTimeout(() => {
|
|
6994
7033
|
u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
|
|
6995
7034
|
}, 200);
|
|
6996
7035
|
}
|
|
@@ -7003,20 +7042,20 @@ const registerChaiLibrary = (o, n) => {
|
|
|
7003
7042
|
/* @__PURE__ */ jsx(Loader, { className: "animate-spin", size: 15, color: "white" }),
|
|
7004
7043
|
/* @__PURE__ */ jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
|
|
7005
7044
|
] }),
|
|
7006
|
-
o.preview ? /* @__PURE__ */ jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt:
|
|
7007
|
-
/* @__PURE__ */ jsx("p", { className: "font-medium text-gray-800", children:
|
|
7008
|
-
|
|
7045
|
+
o.preview ? /* @__PURE__ */ jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: h }) : /* @__PURE__ */ jsxs("div", { className: "flex h-fit w-full flex-col items-center justify-center gap-1 rounded-md border border-border p-6 py-10 text-center", children: [
|
|
7046
|
+
/* @__PURE__ */ jsx("p", { className: "font-medium text-gray-800", children: h }),
|
|
7047
|
+
m && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: m })
|
|
7009
7048
|
] })
|
|
7010
7049
|
]
|
|
7011
7050
|
}
|
|
7012
7051
|
) }),
|
|
7013
7052
|
/* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsxs("div", { className: "max-w-xs", children: [
|
|
7014
|
-
/* @__PURE__ */ jsx("p", { className: "font-medium", children:
|
|
7015
|
-
|
|
7053
|
+
/* @__PURE__ */ jsx("p", { className: "font-medium", children: h }),
|
|
7054
|
+
m && o.preview && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-primary-foreground", children: m })
|
|
7016
7055
|
] }) })
|
|
7017
7056
|
] });
|
|
7018
7057
|
}, UILibrarySection = ({ parentId: o, position: n }) => {
|
|
7019
|
-
const [r, a] = useSelectedLibrary(), l = useChaiLibraries(), i = l.find((
|
|
7058
|
+
const [r, a] = useSelectedLibrary(), l = useChaiLibraries(), i = l.find((y) => y.id === r) || first(l), { data: c, isLoading: d, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [h, m] = useState([]), f = useRef(null);
|
|
7020
7059
|
useEffect(() => {
|
|
7021
7060
|
c && c.length > 0 && (f.current = new Fuse(c, {
|
|
7022
7061
|
keys: ["name", "label", "description", "group"],
|
|
@@ -7025,28 +7064,28 @@ const registerChaiLibrary = (o, n) => {
|
|
|
7025
7064
|
}));
|
|
7026
7065
|
}, [c]), useEffect(() => {
|
|
7027
7066
|
if (!u.trim() || !f.current) {
|
|
7028
|
-
|
|
7067
|
+
m([]);
|
|
7029
7068
|
return;
|
|
7030
7069
|
}
|
|
7031
|
-
const
|
|
7032
|
-
|
|
7070
|
+
const y = f.current.search(u).map((j) => j.item);
|
|
7071
|
+
m(y);
|
|
7033
7072
|
}, [u]);
|
|
7034
|
-
const x = u.trim() && !isEmpty(
|
|
7073
|
+
const x = u.trim() && !isEmpty(h) ? h : c, k = groupBy(x, "group"), [b, v] = useState(null);
|
|
7035
7074
|
useEffect(() => {
|
|
7036
|
-
if (isEmpty(keys(
|
|
7075
|
+
if (isEmpty(keys(k))) {
|
|
7037
7076
|
v(null);
|
|
7038
7077
|
return;
|
|
7039
7078
|
}
|
|
7040
|
-
if (!b || !
|
|
7041
|
-
v(first(keys(
|
|
7079
|
+
if (!b || !k[b]) {
|
|
7080
|
+
v(first(keys(k)));
|
|
7042
7081
|
return;
|
|
7043
7082
|
}
|
|
7044
|
-
}, [
|
|
7045
|
-
const B = get(
|
|
7083
|
+
}, [k, b]);
|
|
7084
|
+
const B = get(k, b, []), w = useRef(null), { t: _ } = useTranslation(), E = (y) => {
|
|
7046
7085
|
w.current && (clearTimeout(w.current), w.current = null), w.current = setTimeout(() => {
|
|
7047
|
-
w.current && v(
|
|
7086
|
+
w.current && v(y);
|
|
7048
7087
|
}, 400);
|
|
7049
|
-
},
|
|
7088
|
+
}, C = () => {
|
|
7050
7089
|
i != null && i.id && p(i.id);
|
|
7051
7090
|
}, A = () => {
|
|
7052
7091
|
g("");
|
|
@@ -7056,16 +7095,16 @@ const registerChaiLibrary = (o, n) => {
|
|
|
7056
7095
|
/* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
|
|
7057
7096
|
/* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
|
|
7058
7097
|
] });
|
|
7059
|
-
const N = filter(B, (
|
|
7098
|
+
const N = filter(B, (y, j) => j % 2 === 0), S = filter(B, (y, j) => j % 2 === 1);
|
|
7060
7099
|
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full flex-col", children: [
|
|
7061
7100
|
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 border-border py-2", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
|
|
7062
7101
|
/* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
|
|
7063
7102
|
/* @__PURE__ */ jsx(
|
|
7064
7103
|
Input$1,
|
|
7065
7104
|
{
|
|
7066
|
-
placeholder:
|
|
7105
|
+
placeholder: _("Search blocks..."),
|
|
7067
7106
|
value: u,
|
|
7068
|
-
onChange: (
|
|
7107
|
+
onChange: (y) => g(y.target.value),
|
|
7069
7108
|
className: "w-full pl-8 pr-8"
|
|
7070
7109
|
}
|
|
7071
7110
|
),
|
|
@@ -7082,18 +7121,18 @@ const registerChaiLibrary = (o, n) => {
|
|
|
7082
7121
|
/* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full w-60 min-w-60 max-w-60 flex-col gap-1 px-1 pr-2", children: [
|
|
7083
7122
|
/* @__PURE__ */ jsx(UILibrariesSelect, { library: i == null ? void 0 : i.id, setLibrary: a, uiLibraries: l }),
|
|
7084
7123
|
/* @__PURE__ */ jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
|
|
7085
|
-
/* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children:
|
|
7124
|
+
/* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: _("Groups") }),
|
|
7086
7125
|
/* @__PURE__ */ jsx("hr", { className: "mt-1 border-border" }),
|
|
7087
|
-
/* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: isEmpty(
|
|
7088
|
-
/* @__PURE__ */ jsx("p", { className: "text-sm", children:
|
|
7089
|
-
/* @__PURE__ */ jsxs(Button, { onClick:
|
|
7126
|
+
/* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: isEmpty(k) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: u ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
7127
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm", children: _("Failed to load the UI library. Try again") }),
|
|
7128
|
+
/* @__PURE__ */ jsxs(Button, { onClick: C, variant: "outline", size: "sm", className: "gap-2", children: [
|
|
7090
7129
|
/* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
|
|
7091
|
-
|
|
7130
|
+
_("Retry")
|
|
7092
7131
|
] })
|
|
7093
|
-
] }) }) : map(
|
|
7132
|
+
] }) }) : map(k, (y, j) => /* @__PURE__ */ jsxs(
|
|
7094
7133
|
"div",
|
|
7095
7134
|
{
|
|
7096
|
-
onMouseEnter: () =>
|
|
7135
|
+
onMouseEnter: () => E(j),
|
|
7097
7136
|
onMouseLeave: () => clearTimeout(w.current),
|
|
7098
7137
|
role: "button",
|
|
7099
7138
|
onClick: () => v(j),
|
|
@@ -7102,7 +7141,7 @@ const registerChaiLibrary = (o, n) => {
|
|
|
7102
7141
|
j === b ? "bg-primary text-primary-foreground hover:bg-primary/80" : ""
|
|
7103
7142
|
),
|
|
7104
7143
|
children: [
|
|
7105
|
-
/* @__PURE__ */ jsx("span", { children: capitalize(
|
|
7144
|
+
/* @__PURE__ */ jsx("span", { children: capitalize(_(j.toLowerCase())) }),
|
|
7106
7145
|
/* @__PURE__ */ jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
|
|
7107
7146
|
]
|
|
7108
7147
|
},
|
|
@@ -7116,23 +7155,23 @@ const registerChaiLibrary = (o, n) => {
|
|
|
7116
7155
|
onMouseEnter: () => w.current ? clearTimeout(w.current) : null,
|
|
7117
7156
|
className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
|
|
7118
7157
|
children: [
|
|
7119
|
-
isEmpty(B) && !isEmpty(
|
|
7120
|
-
/* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: N.map((
|
|
7158
|
+
isEmpty(B) && !isEmpty(k) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-2 px-2", children: [
|
|
7159
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: N.map((y, j) => /* @__PURE__ */ jsx(
|
|
7121
7160
|
BlockCard,
|
|
7122
7161
|
{
|
|
7123
7162
|
parentId: o,
|
|
7124
7163
|
position: n,
|
|
7125
|
-
block:
|
|
7164
|
+
block: y,
|
|
7126
7165
|
library: i
|
|
7127
7166
|
},
|
|
7128
7167
|
`block-${j}`
|
|
7129
7168
|
)) }),
|
|
7130
|
-
/* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children:
|
|
7169
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: S.map((y, j) => /* @__PURE__ */ jsx(
|
|
7131
7170
|
BlockCard,
|
|
7132
7171
|
{
|
|
7133
7172
|
parentId: o,
|
|
7134
7173
|
position: n,
|
|
7135
|
-
block:
|
|
7174
|
+
block: y,
|
|
7136
7175
|
library: i
|
|
7137
7176
|
},
|
|
7138
7177
|
`block-second-${j}`
|
|
@@ -7171,8 +7210,8 @@ const registerChaiLibrary = (o, n) => {
|
|
|
7171
7210
|
error: c
|
|
7172
7211
|
}), g(!0);
|
|
7173
7212
|
else if (!l && Object.keys(a || {}).length > 0) {
|
|
7174
|
-
const
|
|
7175
|
-
const b =
|
|
7213
|
+
const m = Object.entries(a).map(([x, k]) => {
|
|
7214
|
+
const b = k, v = b.type || "partial", B = formatReadableName(v);
|
|
7176
7215
|
return {
|
|
7177
7216
|
type: "PartialBlock",
|
|
7178
7217
|
// Set the type to PartialBlock
|
|
@@ -7186,14 +7225,14 @@ const registerChaiLibrary = (o, n) => {
|
|
|
7186
7225
|
// Store the original ID as partialBlockId
|
|
7187
7226
|
_name: b.name
|
|
7188
7227
|
};
|
|
7189
|
-
}), f = uniq(map(
|
|
7228
|
+
}), f = uniq(map(m, "group"));
|
|
7190
7229
|
p({
|
|
7191
|
-
blocks:
|
|
7230
|
+
blocks: m,
|
|
7192
7231
|
groups: f,
|
|
7193
7232
|
isLoading: !1,
|
|
7194
7233
|
error: null
|
|
7195
7234
|
}), g(!0);
|
|
7196
|
-
} else l ? p((
|
|
7235
|
+
} else l ? p((m) => ({ ...m, isLoading: !0, error: null })) : !l && Object.keys(a || {}).length === 0 && (p({
|
|
7197
7236
|
blocks: [],
|
|
7198
7237
|
groups: [],
|
|
7199
7238
|
isLoading: !1,
|
|
@@ -7208,15 +7247,15 @@ const registerChaiLibrary = (o, n) => {
|
|
|
7208
7247
|
d.blocks,
|
|
7209
7248
|
c
|
|
7210
7249
|
]);
|
|
7211
|
-
const
|
|
7212
|
-
p((
|
|
7250
|
+
const h = () => {
|
|
7251
|
+
p((m) => ({ ...m, isLoading: !0, error: null })), g(!1), i();
|
|
7213
7252
|
};
|
|
7214
7253
|
return d.isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8 text-center text-muted-foreground", children: "Loading partial blocks..." }) : d.error || d.blocks.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-4 p-8 text-center text-muted-foreground", children: [
|
|
7215
7254
|
/* @__PURE__ */ jsx("p", { children: d.error || "No partial blocks available" }),
|
|
7216
7255
|
/* @__PURE__ */ jsx(
|
|
7217
7256
|
"button",
|
|
7218
7257
|
{
|
|
7219
|
-
onClick:
|
|
7258
|
+
onClick: h,
|
|
7220
7259
|
className: "rounded-md bg-primary px-3 py-1 text-sm text-primary-foreground hover:bg-primary/90",
|
|
7221
7260
|
children: "Refresh"
|
|
7222
7261
|
}
|
|
@@ -7234,44 +7273,44 @@ const registerChaiLibrary = (o, n) => {
|
|
|
7234
7273
|
}, ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, n) => {
|
|
7235
7274
|
has(ADD_BLOCK_TABS, o) && console.warn(`Add block tab with id ${o} already registered`), set(ADD_BLOCK_TABS, o, { id: o, ...n });
|
|
7236
7275
|
}, useChaiAddBlockTabs = () => useMemo(() => values(ADD_BLOCK_TABS), []), CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: n, parentId: r, position: a, gridCols: l = "grid-cols-4" }) => {
|
|
7237
|
-
var
|
|
7238
|
-
const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom),
|
|
7276
|
+
var S;
|
|
7277
|
+
const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), h = (S = find(c, (y) => y._id === r)) == null ? void 0 : S._type, [m, f] = useState("all"), [x, k] = useState(null), b = useRef(null);
|
|
7239
7278
|
useEffect(() => {
|
|
7240
|
-
const
|
|
7279
|
+
const y = setTimeout(() => {
|
|
7241
7280
|
var j;
|
|
7242
7281
|
(j = u.current) == null || j.focus();
|
|
7243
7282
|
}, 0);
|
|
7244
|
-
return () => clearTimeout(
|
|
7283
|
+
return () => clearTimeout(y);
|
|
7245
7284
|
}, [g]), useEffect(() => {
|
|
7246
|
-
d && (f("all"),
|
|
7247
|
-
}, [d]), useEffect(() => (b.current = debounce((
|
|
7248
|
-
f(
|
|
7285
|
+
d && (f("all"), k(null));
|
|
7286
|
+
}, [d]), useEffect(() => (b.current = debounce((y) => {
|
|
7287
|
+
f(y);
|
|
7249
7288
|
}, 500), () => {
|
|
7250
7289
|
b.current && b.current.cancel();
|
|
7251
7290
|
}), []);
|
|
7252
|
-
const v = useCallback((
|
|
7253
|
-
y
|
|
7291
|
+
const v = useCallback((y) => {
|
|
7292
|
+
k(y), b.current && b.current(y);
|
|
7254
7293
|
}, []), B = useCallback(() => {
|
|
7255
|
-
|
|
7256
|
-
}, []), w = useCallback((
|
|
7257
|
-
b.current && b.current.cancel(), f(
|
|
7258
|
-
}, []),
|
|
7294
|
+
k(null), b.current && b.current.cancel();
|
|
7295
|
+
}, []), w = useCallback((y) => {
|
|
7296
|
+
b.current && b.current.cancel(), f(y), k(null);
|
|
7297
|
+
}, []), _ = useMemo(
|
|
7259
7298
|
() => d ? values(n).filter(
|
|
7260
|
-
(
|
|
7261
|
-
var j,
|
|
7262
|
-
return (((j =
|
|
7299
|
+
(y) => {
|
|
7300
|
+
var j, I;
|
|
7301
|
+
return (((j = y.label) == null ? void 0 : j.toLowerCase()) + " " + ((I = y.type) == null ? void 0 : I.toLowerCase())).includes(d.toLowerCase());
|
|
7263
7302
|
}
|
|
7264
7303
|
) : n,
|
|
7265
7304
|
[n, d]
|
|
7266
|
-
),
|
|
7305
|
+
), E = useMemo(
|
|
7267
7306
|
() => d ? o.filter(
|
|
7268
|
-
(
|
|
7269
|
-
) : o.filter((
|
|
7270
|
-
[n,
|
|
7271
|
-
),
|
|
7272
|
-
() => sortBy(
|
|
7273
|
-
[
|
|
7274
|
-
), A = useMemo(() =>
|
|
7307
|
+
(y) => reject(filter(values(_), { group: y }), { hidden: !0 }).length > 0
|
|
7308
|
+
) : o.filter((y) => reject(filter(values(n), { group: y }), { hidden: !0 }).length > 0),
|
|
7309
|
+
[n, _, o, d]
|
|
7310
|
+
), C = useMemo(
|
|
7311
|
+
() => sortBy(E, (y) => CORE_GROUPS.indexOf(y) === -1 ? 99 : CORE_GROUPS.indexOf(y)),
|
|
7312
|
+
[E]
|
|
7313
|
+
), A = useMemo(() => m === "all" ? _ : filter(values(_), { group: m }), [_, m]), N = useMemo(() => m === "all" ? C : [m], [C, m]);
|
|
7275
7314
|
return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-3xl flex-col", children: [
|
|
7276
7315
|
/* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-background/80 px-4 py-2 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
|
|
7277
7316
|
Input$1,
|
|
@@ -7281,43 +7320,43 @@ const registerChaiLibrary = (o, n) => {
|
|
|
7281
7320
|
placeholder: i("Search blocks..."),
|
|
7282
7321
|
value: d,
|
|
7283
7322
|
className: "-ml-2",
|
|
7284
|
-
onChange: (
|
|
7323
|
+
onChange: (y) => p(y.target.value)
|
|
7285
7324
|
}
|
|
7286
7325
|
) }),
|
|
7287
7326
|
/* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden", children: [
|
|
7288
|
-
|
|
7327
|
+
C.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
|
|
7289
7328
|
/* @__PURE__ */ jsx(
|
|
7290
7329
|
"button",
|
|
7291
7330
|
{
|
|
7292
7331
|
onClick: () => w("all"),
|
|
7293
7332
|
onMouseEnter: () => v("all"),
|
|
7294
7333
|
onMouseLeave: B,
|
|
7295
|
-
className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${
|
|
7334
|
+
className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${m === "all" || x === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
|
|
7296
7335
|
children: i("All")
|
|
7297
7336
|
},
|
|
7298
7337
|
"sidebar-all"
|
|
7299
7338
|
),
|
|
7300
|
-
|
|
7339
|
+
C.map((y) => /* @__PURE__ */ jsx(
|
|
7301
7340
|
"button",
|
|
7302
7341
|
{
|
|
7303
|
-
onClick: () => w(
|
|
7304
|
-
onMouseEnter: () => v(
|
|
7342
|
+
onClick: () => w(y),
|
|
7343
|
+
onMouseEnter: () => v(y),
|
|
7305
7344
|
onMouseLeave: B,
|
|
7306
|
-
className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${
|
|
7307
|
-
children: capitalize(i(
|
|
7345
|
+
className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${m === y || x === y ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
|
|
7346
|
+
children: capitalize(i(y.toLowerCase()))
|
|
7308
7347
|
},
|
|
7309
|
-
`sidebar-${
|
|
7348
|
+
`sidebar-${y}`
|
|
7310
7349
|
))
|
|
7311
7350
|
] }) }) }),
|
|
7312
|
-
/* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children:
|
|
7351
|
+
/* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: E.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
|
|
7313
7352
|
i("No blocks found matching"),
|
|
7314
7353
|
' "',
|
|
7315
7354
|
d,
|
|
7316
7355
|
'"'
|
|
7317
|
-
] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: N.map((
|
|
7318
|
-
/* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(
|
|
7356
|
+
] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: N.map((y) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
|
|
7357
|
+
/* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(y.toLowerCase())) }),
|
|
7319
7358
|
/* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: reject(
|
|
7320
|
-
|
|
7359
|
+
m === "all" ? filter(values(A), { group: y }) : values(A),
|
|
7321
7360
|
{ hidden: !0 }
|
|
7322
7361
|
).map((j) => /* @__PURE__ */ jsx(
|
|
7323
7362
|
CoreBlock,
|
|
@@ -7325,11 +7364,11 @@ const registerChaiLibrary = (o, n) => {
|
|
|
7325
7364
|
parentId: r,
|
|
7326
7365
|
position: a,
|
|
7327
7366
|
block: j,
|
|
7328
|
-
disabled: !canAcceptChildBlock(
|
|
7367
|
+
disabled: !canAcceptChildBlock(h, j.type) || !canBeNestedInside(h, j.type)
|
|
7329
7368
|
},
|
|
7330
7369
|
j.type
|
|
7331
7370
|
)) })
|
|
7332
|
-
] },
|
|
7371
|
+
] }, y)) }) }) })
|
|
7333
7372
|
] })
|
|
7334
7373
|
] });
|
|
7335
7374
|
}, addBlockTabAtom = atomWithStorage("__add_block_tab", "library"), AddBlocksPanel = ({
|
|
@@ -7338,13 +7377,13 @@ const registerChaiLibrary = (o, n) => {
|
|
|
7338
7377
|
parentId: r = void 0,
|
|
7339
7378
|
position: a = -1
|
|
7340
7379
|
}) => {
|
|
7341
|
-
const { t: l } = useTranslation(), [i, c] = useAtom$1(addBlockTabAtom), [, d] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("importHTMLSupport", !0), { data: u } = usePartialBlocksList(), g = Object.keys(u || {}).length > 0, { hasPermission:
|
|
7380
|
+
const { t: l } = useTranslation(), [i, c] = useAtom$1(addBlockTabAtom), [, d] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("importHTMLSupport", !0), { data: u } = usePartialBlocksList(), g = Object.keys(u || {}).length > 0, { hasPermission: h } = usePermissions();
|
|
7342
7381
|
useEffect(() => {
|
|
7343
7382
|
i === "partials" && !g && c("library");
|
|
7344
7383
|
}, [i, g, c]);
|
|
7345
|
-
const
|
|
7384
|
+
const m = useCallback(() => {
|
|
7346
7385
|
pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
|
|
7347
|
-
}, []), f = useChaiAddBlockTabs(), x = p &&
|
|
7386
|
+
}, []), f = useChaiAddBlockTabs(), x = p && h(PERMISSIONS.IMPORT_HTML), b = useChaiLibraries().length > 0;
|
|
7348
7387
|
return useEffect(() => {
|
|
7349
7388
|
i === "library" && !b && c("core");
|
|
7350
7389
|
}, [i, b, c]), /* @__PURE__ */ jsxs("div", { className: cn$2("flex h-full w-full flex-col overflow-hidden", o), children: [
|
|
@@ -7372,7 +7411,7 @@ const registerChaiLibrary = (o, n) => {
|
|
|
7372
7411
|
b && /* @__PURE__ */ jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(UILibrariesPanel, { parentId: r, position: a }) }),
|
|
7373
7412
|
g && /* @__PURE__ */ jsx(TabsContent, { value: "partials", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "-mx-1.5 h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mt-2 h-full w-full", children: /* @__PURE__ */ jsx(PartialBlocks, { gridCols: "grid-cols-4", parentId: r, position: a }) }) }) }),
|
|
7374
7413
|
x ? /* @__PURE__ */ jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(ImportHTML, { parentId: r, position: a }) }) : null,
|
|
7375
|
-
map(f, (v) => /* @__PURE__ */ jsx(TabsContent, { value: v.id, children: React__default.createElement(v.tabContent, { close:
|
|
7414
|
+
map(f, (v) => /* @__PURE__ */ jsx(TabsContent, { value: v.id, children: React__default.createElement(v.tabContent, { close: m, parentId: r, position: a }) }, `panel-add-block-${v.id}`))
|
|
7376
7415
|
]
|
|
7377
7416
|
}
|
|
7378
7417
|
)
|
|
@@ -7494,7 +7533,7 @@ const registerChaiSaveToLibrary = (o) => {
|
|
|
7494
7533
|
}, CANNOT_COPY_BLOCKS = !navigator.clipboard, CopyPasteBlocks = () => {
|
|
7495
7534
|
const [o] = useBlocksStore(), [n] = useSelectedBlockIds(), { pasteBlocks: r } = usePasteBlocks(), [, a, l] = useCopyBlocks(), { t: i } = useTranslation(), c = useSelectedBlock(), d = useCallback(() => {
|
|
7496
7535
|
const p = n.map((u) => {
|
|
7497
|
-
const g = o.find((
|
|
7536
|
+
const g = o.find((h) => h._id === u);
|
|
7498
7537
|
return {
|
|
7499
7538
|
id: u,
|
|
7500
7539
|
data: g
|
|
@@ -7676,47 +7715,47 @@ const Input = ({ node: o }) => {
|
|
|
7676
7715
|
}
|
|
7677
7716
|
);
|
|
7678
7717
|
}, currentAddSelection = atom(null), Node = memo(({ node: o, style: n, dragHandle: r }) => {
|
|
7679
|
-
var
|
|
7718
|
+
var P;
|
|
7680
7719
|
const { t: a } = useTranslation(), [l, , i] = useHiddenBlockIds(), [c] = useAtom$1(canvasIframeAtom), { hasPermission: d } = usePermissions();
|
|
7681
7720
|
let p = null;
|
|
7682
|
-
const u = o.children.length > 0, { highlightBlock: g, clearHighlight:
|
|
7683
|
-
|
|
7684
|
-
},
|
|
7685
|
-
|
|
7686
|
-
},
|
|
7687
|
-
|
|
7688
|
-
}, [
|
|
7689
|
-
var
|
|
7690
|
-
|
|
7691
|
-
},
|
|
7721
|
+
const u = o.children.length > 0, { highlightBlock: g, clearHighlight: h } = useBlockHighlight(), { id: m, data: f, isSelected: x, willReceiveDrop: k, isDragging: b, isEditing: v, handleClick: B } = o, w = (T) => {
|
|
7722
|
+
T.stopPropagation(), !l.includes(m) && o.toggle();
|
|
7723
|
+
}, _ = (T) => {
|
|
7724
|
+
T.isInternal && (p = T.isOpen, T.isOpen && T.close());
|
|
7725
|
+
}, E = (T) => {
|
|
7726
|
+
T.isInternal && p !== null && (p ? T.open() : T.close(), p = null);
|
|
7727
|
+
}, [C, A] = useAtom$1(currentAddSelection), N = () => {
|
|
7728
|
+
var T;
|
|
7729
|
+
S(), o.parent.isSelected || A((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
|
|
7730
|
+
}, S = () => {
|
|
7692
7731
|
A(null);
|
|
7693
|
-
},
|
|
7694
|
-
|
|
7732
|
+
}, y = (T) => {
|
|
7733
|
+
S(), T.stopPropagation(), !o.isOpen && !l.includes(m) && o.toggle(), B(T);
|
|
7695
7734
|
};
|
|
7696
7735
|
useEffect(() => {
|
|
7697
|
-
const
|
|
7698
|
-
|
|
7736
|
+
const T = setTimeout(() => {
|
|
7737
|
+
k && !o.isOpen && !b && !l.includes(m) && o.toggle();
|
|
7699
7738
|
}, 500);
|
|
7700
|
-
return () => clearTimeout(
|
|
7701
|
-
}, [
|
|
7702
|
-
const j = (
|
|
7703
|
-
const O = c.contentDocument || c.contentWindow.document,
|
|
7704
|
-
|
|
7705
|
-
const $ =
|
|
7706
|
-
$.top >= M.top && $.left >= M.left && $.bottom <= M.bottom && $.right <= M.right || (O.documentElement.scrollTop =
|
|
7707
|
-
},
|
|
7708
|
-
|
|
7739
|
+
return () => clearTimeout(T);
|
|
7740
|
+
}, [k, o, b]);
|
|
7741
|
+
const j = (T, D) => {
|
|
7742
|
+
const O = c.contentDocument || c.contentWindow.document, R = O.querySelector(`[data-block-id=${T}]`);
|
|
7743
|
+
R && R.setAttribute("data-drop", D);
|
|
7744
|
+
const $ = R.getBoundingClientRect(), M = c.getBoundingClientRect();
|
|
7745
|
+
$.top >= M.top && $.left >= M.left && $.bottom <= M.bottom && $.right <= M.right || (O.documentElement.scrollTop = R.offsetTop - M.top);
|
|
7746
|
+
}, I = (T) => {
|
|
7747
|
+
S();
|
|
7709
7748
|
const D = get(o, "parent.id");
|
|
7710
|
-
D !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: D, position:
|
|
7749
|
+
D !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: D, position: T }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: T });
|
|
7711
7750
|
};
|
|
7712
|
-
if (
|
|
7751
|
+
if (m === ROOT_TEMP_KEY)
|
|
7713
7752
|
return /* @__PURE__ */ jsxs("div", { className: "group relative w-full cursor-pointer", children: [
|
|
7714
7753
|
/* @__PURE__ */ jsx("br", {}),
|
|
7715
7754
|
d(PERMISSIONS.ADD_BLOCK) && /* @__PURE__ */ jsx(
|
|
7716
7755
|
"div",
|
|
7717
7756
|
{
|
|
7718
7757
|
role: "button",
|
|
7719
|
-
onClick: () =>
|
|
7758
|
+
onClick: () => I(-1),
|
|
7720
7759
|
className: "h-1 rounded bg-primary opacity-0 duration-200 group-hover:opacity-100",
|
|
7721
7760
|
children: /* @__PURE__ */ jsxs("div", { className: "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform items-center gap-x-1 rounded-full bg-primary px-3 py-1 text-[9px] leading-tight text-white hover:bg-primary", children: [
|
|
7722
7761
|
/* @__PURE__ */ jsx(PlusIcon, { className: "h-2 w-2 stroke-[3]" }),
|
|
@@ -7727,36 +7766,36 @@ const Input = ({ node: o }) => {
|
|
|
7727
7766
|
),
|
|
7728
7767
|
/* @__PURE__ */ jsx("br", {})
|
|
7729
7768
|
] });
|
|
7730
|
-
const
|
|
7769
|
+
const L = useMemo(() => has(f, "_libBlockId") && !isEmpty(f._libBlockId) && (d(PERMISSIONS.CREATE_LIBRARY_BLOCK) || d(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [f, d]);
|
|
7731
7770
|
return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
|
|
7732
7771
|
"div",
|
|
7733
7772
|
{
|
|
7734
|
-
onMouseEnter: () => g(
|
|
7735
|
-
onMouseLeave: () =>
|
|
7736
|
-
onClick:
|
|
7773
|
+
onMouseEnter: () => g(m),
|
|
7774
|
+
onMouseLeave: () => h(),
|
|
7775
|
+
onClick: y,
|
|
7737
7776
|
style: n,
|
|
7738
|
-
"data-node-id":
|
|
7739
|
-
ref: l.includes(
|
|
7740
|
-
onDragStart: () =>
|
|
7741
|
-
onDragEnd: () =>
|
|
7742
|
-
onDragOver: (
|
|
7743
|
-
|
|
7777
|
+
"data-node-id": m,
|
|
7778
|
+
ref: l.includes(m) ? null : r,
|
|
7779
|
+
onDragStart: () => _(o),
|
|
7780
|
+
onDragEnd: () => E(o),
|
|
7781
|
+
onDragOver: (T) => {
|
|
7782
|
+
T.preventDefault(), j(m, "yes");
|
|
7744
7783
|
},
|
|
7745
|
-
onDragLeave: (
|
|
7746
|
-
|
|
7784
|
+
onDragLeave: (T) => {
|
|
7785
|
+
T.preventDefault(), j(m, "no");
|
|
7747
7786
|
},
|
|
7748
|
-
onDrop: (
|
|
7749
|
-
|
|
7787
|
+
onDrop: (T) => {
|
|
7788
|
+
T.preventDefault(), j(m, "no");
|
|
7750
7789
|
},
|
|
7751
7790
|
children: [
|
|
7752
|
-
d(PERMISSIONS.ADD_BLOCK) && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((
|
|
7791
|
+
d(PERMISSIONS.ADD_BLOCK) && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((P = o == null ? void 0 : o.parent) == null ? void 0 : P.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
|
|
7753
7792
|
"div",
|
|
7754
7793
|
{
|
|
7755
|
-
onClick: (
|
|
7756
|
-
|
|
7794
|
+
onClick: (T) => {
|
|
7795
|
+
T.stopPropagation(), I(o.childIndex);
|
|
7757
7796
|
},
|
|
7758
7797
|
onMouseEnter: N,
|
|
7759
|
-
onMouseLeave:
|
|
7798
|
+
onMouseLeave: S,
|
|
7760
7799
|
className: "absolute -top-0.5 h-1 w-[90%] rounded bg-primary opacity-0 delay-200 duration-200 group-hover:opacity-100",
|
|
7761
7800
|
children: /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-primary p-1 outline outline-2 outline-white hover:bg-primary", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3 stroke-[4] text-white" }) })
|
|
7762
7801
|
}
|
|
@@ -7767,11 +7806,11 @@ const Input = ({ node: o }) => {
|
|
|
7767
7806
|
className: cn(
|
|
7768
7807
|
"group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 outline-none",
|
|
7769
7808
|
x ? "bg-primary text-primary-foreground" : "hover:bg-primary/10 dark:hover:bg-gray-800",
|
|
7770
|
-
|
|
7771
|
-
(o == null ? void 0 : o.id) ===
|
|
7809
|
+
k && canAcceptChildBlock(f._type, "Icon") ? "bg-green-200" : "",
|
|
7810
|
+
(o == null ? void 0 : o.id) === C ? "bg-primary/10" : "",
|
|
7772
7811
|
b && "opacity-20",
|
|
7773
|
-
l.includes(
|
|
7774
|
-
|
|
7812
|
+
l.includes(m) ? "opacity-50" : "",
|
|
7813
|
+
L && x && "bg-primary/20 text-primary"
|
|
7775
7814
|
),
|
|
7776
7815
|
children: [
|
|
7777
7816
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
|
|
@@ -7787,8 +7826,8 @@ const Input = ({ node: o }) => {
|
|
|
7787
7826
|
{
|
|
7788
7827
|
className: cn(
|
|
7789
7828
|
"leading-1 flex items-center",
|
|
7790
|
-
|
|
7791
|
-
|
|
7829
|
+
L && "text-primary/60",
|
|
7830
|
+
L && x && "text-primary/80"
|
|
7792
7831
|
),
|
|
7793
7832
|
children: [
|
|
7794
7833
|
/* @__PURE__ */ jsx(TypeIcon, { type: f == null ? void 0 : f._type }),
|
|
@@ -7796,8 +7835,8 @@ const Input = ({ node: o }) => {
|
|
|
7796
7835
|
"div",
|
|
7797
7836
|
{
|
|
7798
7837
|
className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
|
|
7799
|
-
onDoubleClick: (
|
|
7800
|
-
|
|
7838
|
+
onDoubleClick: (T) => {
|
|
7839
|
+
T.stopPropagation(), o.edit(), o.deselect();
|
|
7801
7840
|
},
|
|
7802
7841
|
children: /* @__PURE__ */ jsx("span", { children: (f == null ? void 0 : f._name) || (f == null ? void 0 : f._type.split("/").pop()) })
|
|
7803
7842
|
}
|
|
@@ -7807,11 +7846,11 @@ const Input = ({ node: o }) => {
|
|
|
7807
7846
|
)
|
|
7808
7847
|
] }),
|
|
7809
7848
|
/* @__PURE__ */ jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-2 group-hover:visible", children: [
|
|
7810
|
-
canAddChildBlock(f == null ? void 0 : f._type) && !l.includes(
|
|
7849
|
+
canAddChildBlock(f == null ? void 0 : f._type) && !l.includes(m) && d(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
|
|
7811
7850
|
/* @__PURE__ */ jsx(
|
|
7812
7851
|
TooltipTrigger,
|
|
7813
7852
|
{
|
|
7814
|
-
onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id:
|
|
7853
|
+
onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: m }),
|
|
7815
7854
|
className: "cursor-pointer rounded bg-transparent",
|
|
7816
7855
|
asChild: !0,
|
|
7817
7856
|
children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3" })
|
|
@@ -7823,8 +7862,8 @@ const Input = ({ node: o }) => {
|
|
|
7823
7862
|
/* @__PURE__ */ jsx(
|
|
7824
7863
|
TooltipTrigger,
|
|
7825
7864
|
{
|
|
7826
|
-
onClick: (
|
|
7827
|
-
|
|
7865
|
+
onClick: (T) => {
|
|
7866
|
+
T.stopPropagation(), i(m), o.isOpen && o.toggle();
|
|
7828
7867
|
},
|
|
7829
7868
|
className: "cursor-pointer rounded bg-transparent",
|
|
7830
7869
|
asChild: !0,
|
|
@@ -7833,7 +7872,7 @@ const Input = ({ node: o }) => {
|
|
|
7833
7872
|
),
|
|
7834
7873
|
/* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-[9999]", side: "bottom", children: a("Hide block") })
|
|
7835
7874
|
] }),
|
|
7836
|
-
/* @__PURE__ */ jsx(BlockMoreOptions, { node: o, id:
|
|
7875
|
+
/* @__PURE__ */ jsx(BlockMoreOptions, { node: o, id: m, children: /* @__PURE__ */ jsx(MoreVertical, { size: "15" }) })
|
|
7837
7876
|
] })
|
|
7838
7877
|
]
|
|
7839
7878
|
}
|
|
@@ -8098,9 +8137,9 @@ const Input = ({ node: o }) => {
|
|
|
8098
8137
|
)
|
|
8099
8138
|
] });
|
|
8100
8139
|
}, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
|
|
8101
|
-
const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), { hasPermission: c } = usePermissions(), [d, p] = useTheme(), u = useThemeOptions(), { t: g } = useTranslation(),
|
|
8140
|
+
const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), { hasPermission: c } = usePermissions(), [d, p] = useTheme(), u = useThemeOptions(), { t: g } = useTranslation(), h = (v) => {
|
|
8102
8141
|
a(v);
|
|
8103
|
-
},
|
|
8142
|
+
}, m = () => {
|
|
8104
8143
|
const v = l.find((B) => Object.keys(B)[0] === r);
|
|
8105
8144
|
if (v) {
|
|
8106
8145
|
const B = Object.values(v)[0];
|
|
@@ -8128,7 +8167,7 @@ const Input = ({ node: o }) => {
|
|
|
8128
8167
|
},
|
|
8129
8168
|
[d],
|
|
8130
8169
|
200
|
|
8131
|
-
),
|
|
8170
|
+
), k = useDebouncedCallback(
|
|
8132
8171
|
(v, B) => {
|
|
8133
8172
|
p(() => {
|
|
8134
8173
|
const w = get(d, `colors.${v}`);
|
|
@@ -8150,10 +8189,10 @@ const Input = ({ node: o }) => {
|
|
|
8150
8189
|
ColorPickerInput,
|
|
8151
8190
|
{
|
|
8152
8191
|
value: w,
|
|
8153
|
-
onChange: (
|
|
8192
|
+
onChange: (_) => k(B, _)
|
|
8154
8193
|
}
|
|
8155
8194
|
),
|
|
8156
|
-
/* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: B.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((
|
|
8195
|
+
/* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: B.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((_) => _.charAt(0).toUpperCase() + _.slice(1)).join(" ") + (!B.toLowerCase().includes("foreground") && !B.toLowerCase().includes("border") && !B.toLowerCase().includes("input") && !B.toLowerCase().includes("ring") && !B.toLowerCase().includes("background") ? " Background" : "") })
|
|
8157
8196
|
] }, B);
|
|
8158
8197
|
}) });
|
|
8159
8198
|
return c("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
|
|
@@ -8165,7 +8204,7 @@ const Input = ({ node: o }) => {
|
|
|
8165
8204
|
"select",
|
|
8166
8205
|
{
|
|
8167
8206
|
value: r,
|
|
8168
|
-
onChange: (v) =>
|
|
8207
|
+
onChange: (v) => h(v.target.value),
|
|
8169
8208
|
className: "w-full space-y-0.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
8170
8209
|
children: [
|
|
8171
8210
|
/* @__PURE__ */ jsx("option", { value: "", children: "Select preset" }),
|
|
@@ -8180,7 +8219,7 @@ const Input = ({ node: o }) => {
|
|
|
8180
8219
|
className: "w-full text-sm",
|
|
8181
8220
|
disabled: r === "",
|
|
8182
8221
|
variant: "default",
|
|
8183
|
-
onClick:
|
|
8222
|
+
onClick: m,
|
|
8184
8223
|
children: g("Apply")
|
|
8185
8224
|
}
|
|
8186
8225
|
) })
|
|
@@ -8674,14 +8713,14 @@ function QuickPrompts({ onClick: o }) {
|
|
|
8674
8713
|
) }) });
|
|
8675
8714
|
}
|
|
8676
8715
|
const AIUserPrompt = ({ blockId: o }) => {
|
|
8677
|
-
const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, g] = useState(),
|
|
8716
|
+
const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, g] = useState(), h = useRef(null), m = useRef(null);
|
|
8678
8717
|
useEffect(() => {
|
|
8679
8718
|
var x;
|
|
8680
|
-
(x =
|
|
8719
|
+
(x = h.current) == null || x.focus();
|
|
8681
8720
|
}, []);
|
|
8682
8721
|
const f = (x) => {
|
|
8683
|
-
const { usage:
|
|
8684
|
-
!l &&
|
|
8722
|
+
const { usage: k } = x || {};
|
|
8723
|
+
!l && k && g(k), m.current = setTimeout(() => g(void 0), 1e4), l || c("");
|
|
8685
8724
|
};
|
|
8686
8725
|
return /* @__PURE__ */ jsxs("div", { className: "", children: [
|
|
8687
8726
|
/* @__PURE__ */ jsxs(
|
|
@@ -8699,14 +8738,14 @@ const AIUserPrompt = ({ blockId: o }) => {
|
|
|
8699
8738
|
/* @__PURE__ */ jsx(
|
|
8700
8739
|
Textarea,
|
|
8701
8740
|
{
|
|
8702
|
-
ref:
|
|
8741
|
+
ref: h,
|
|
8703
8742
|
value: i,
|
|
8704
8743
|
onChange: (x) => c(x.target.value),
|
|
8705
8744
|
placeholder: n("Ask AI to edit content"),
|
|
8706
8745
|
className: "w-full",
|
|
8707
8746
|
rows: 3,
|
|
8708
8747
|
onKeyDown: (x) => {
|
|
8709
|
-
x.key === "Enter" && (x.preventDefault(),
|
|
8748
|
+
x.key === "Enter" && (x.preventDefault(), m.current && clearTimeout(m.current), g(void 0), r("content", o, i, f));
|
|
8710
8749
|
}
|
|
8711
8750
|
}
|
|
8712
8751
|
),
|
|
@@ -8716,7 +8755,7 @@ const AIUserPrompt = ({ blockId: o }) => {
|
|
|
8716
8755
|
{
|
|
8717
8756
|
disabled: i.trim().length < 5 || a,
|
|
8718
8757
|
onClick: () => {
|
|
8719
|
-
|
|
8758
|
+
m.current && clearTimeout(m.current), g(void 0), r("content", o, i, f);
|
|
8720
8759
|
},
|
|
8721
8760
|
variant: "default",
|
|
8722
8761
|
className: "w-fit",
|
|
@@ -8749,7 +8788,7 @@ const AIUserPrompt = ({ blockId: o }) => {
|
|
|
8749
8788
|
QuickPrompts,
|
|
8750
8789
|
{
|
|
8751
8790
|
onClick: (x) => {
|
|
8752
|
-
|
|
8791
|
+
m.current && clearTimeout(m.current), g(void 0), r("content", o, x, f);
|
|
8753
8792
|
}
|
|
8754
8793
|
}
|
|
8755
8794
|
)
|
|
@@ -8759,13 +8798,13 @@ const AIUserPrompt = ({ blockId: o }) => {
|
|
|
8759
8798
|
] }) }) : null
|
|
8760
8799
|
] });
|
|
8761
8800
|
}, AISetContext = () => {
|
|
8762
|
-
const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, g] = useState(!1),
|
|
8801
|
+
const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, g] = useState(!1), h = useRef(null);
|
|
8763
8802
|
useEffect(() => {
|
|
8764
8803
|
n && a(n);
|
|
8765
8804
|
}, [n]);
|
|
8766
|
-
const
|
|
8805
|
+
const m = async () => {
|
|
8767
8806
|
try {
|
|
8768
|
-
d(!0), u(null), await i(r), toast.success(o("Updated AI Context")),
|
|
8807
|
+
d(!0), u(null), await i(r), toast.success(o("Updated AI Context")), h.current.click();
|
|
8769
8808
|
} catch (f) {
|
|
8770
8809
|
u(f);
|
|
8771
8810
|
} finally {
|
|
@@ -8781,7 +8820,7 @@ const AIUserPrompt = ({ blockId: o }) => {
|
|
|
8781
8820
|
type: "single",
|
|
8782
8821
|
collapsible: !0,
|
|
8783
8822
|
children: /* @__PURE__ */ jsxs(AccordionItem, { value: "set-context", className: "border-none", children: [
|
|
8784
|
-
/* @__PURE__ */ jsx(AccordionTrigger, { ref:
|
|
8823
|
+
/* @__PURE__ */ jsx(AccordionTrigger, { ref: h, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
|
|
8785
8824
|
/* @__PURE__ */ jsxs(AccordionContent, { children: [
|
|
8786
8825
|
/* @__PURE__ */ jsx(
|
|
8787
8826
|
Textarea,
|
|
@@ -8793,7 +8832,7 @@ const AIUserPrompt = ({ blockId: o }) => {
|
|
|
8793
8832
|
className: "mt-1 w-full",
|
|
8794
8833
|
rows: 10,
|
|
8795
8834
|
onKeyDown: (f) => {
|
|
8796
|
-
f.key === "Enter" && (f.preventDefault(),
|
|
8835
|
+
f.key === "Enter" && (f.preventDefault(), m());
|
|
8797
8836
|
}
|
|
8798
8837
|
}
|
|
8799
8838
|
),
|
|
@@ -8805,7 +8844,7 @@ const AIUserPrompt = ({ blockId: o }) => {
|
|
|
8805
8844
|
Button,
|
|
8806
8845
|
{
|
|
8807
8846
|
disabled: r.trim().length < 5,
|
|
8808
|
-
onClick: () =>
|
|
8847
|
+
onClick: () => m(),
|
|
8809
8848
|
variant: "default",
|
|
8810
8849
|
className: "w-fit",
|
|
8811
8850
|
size: "sm",
|
|
@@ -8834,7 +8873,7 @@ const AIUserPrompt = ({ blockId: o }) => {
|
|
|
8834
8873
|
AlertDialogAction,
|
|
8835
8874
|
{
|
|
8836
8875
|
onClick: () => {
|
|
8837
|
-
a(""),
|
|
8876
|
+
a(""), m();
|
|
8838
8877
|
},
|
|
8839
8878
|
children: o("Yes, Delete")
|
|
8840
8879
|
}
|
|
@@ -8895,7 +8934,7 @@ function AIChatPanel() {
|
|
|
8895
8934
|
}, [o]), useEffect(() => {
|
|
8896
8935
|
g.current && (g.current.style.height = "auto", g.current.style.height = `${Math.min(g.current.scrollHeight, 120)}px`);
|
|
8897
8936
|
}, [r]);
|
|
8898
|
-
const
|
|
8937
|
+
const h = async () => {
|
|
8899
8938
|
if (!r.trim() && !c) return;
|
|
8900
8939
|
const b = {
|
|
8901
8940
|
id: Date.now().toString(),
|
|
@@ -8912,22 +8951,22 @@ function AIChatPanel() {
|
|
|
8912
8951
|
};
|
|
8913
8952
|
n((B) => [...B, v]), i(!1), d(null);
|
|
8914
8953
|
}, 1500);
|
|
8915
|
-
},
|
|
8916
|
-
b.key === "Enter" && !b.shiftKey && (b.preventDefault(),
|
|
8954
|
+
}, m = (b) => {
|
|
8955
|
+
b.key === "Enter" && !b.shiftKey && (b.preventDefault(), h());
|
|
8917
8956
|
}, f = (b) => {
|
|
8918
8957
|
var B;
|
|
8919
8958
|
const v = (B = b.target.files) == null ? void 0 : B[0];
|
|
8920
8959
|
if (v) {
|
|
8921
8960
|
const w = new FileReader();
|
|
8922
|
-
w.onload = (
|
|
8923
|
-
var
|
|
8924
|
-
d((
|
|
8961
|
+
w.onload = (_) => {
|
|
8962
|
+
var E;
|
|
8963
|
+
d((E = _.target) == null ? void 0 : E.result);
|
|
8925
8964
|
}, w.readAsDataURL(v);
|
|
8926
8965
|
}
|
|
8927
8966
|
}, x = () => {
|
|
8928
8967
|
var b;
|
|
8929
8968
|
(b = p.current) == null || b.click();
|
|
8930
|
-
},
|
|
8969
|
+
}, k = () => {
|
|
8931
8970
|
d(null), p.current && (p.current.value = "");
|
|
8932
8971
|
};
|
|
8933
8972
|
return /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col rounded-lg bg-background shadow-sm", children: [
|
|
@@ -8973,7 +9012,7 @@ function AIChatPanel() {
|
|
|
8973
9012
|
size: "icon",
|
|
8974
9013
|
variant: "destructive",
|
|
8975
9014
|
className: "absolute right-0 top-0 h-5 w-5 rounded-full p-0",
|
|
8976
|
-
onClick:
|
|
9015
|
+
onClick: k,
|
|
8977
9016
|
children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
|
|
8978
9017
|
}
|
|
8979
9018
|
)
|
|
@@ -8986,7 +9025,7 @@ function AIChatPanel() {
|
|
|
8986
9025
|
ref: g,
|
|
8987
9026
|
value: r,
|
|
8988
9027
|
onChange: (b) => a(b.target.value),
|
|
8989
|
-
onKeyDown:
|
|
9028
|
+
onKeyDown: m,
|
|
8990
9029
|
placeholder: "Ask something...",
|
|
8991
9030
|
className: "max-h-[120px] min-h-[40px] resize-none border-0 bg-muted/50 py-2.5 pr-10 focus-visible:ring-1"
|
|
8992
9031
|
}
|
|
@@ -9008,7 +9047,7 @@ function AIChatPanel() {
|
|
|
9008
9047
|
{
|
|
9009
9048
|
size: "sm",
|
|
9010
9049
|
className: "h-10 px-3",
|
|
9011
|
-
onClick:
|
|
9050
|
+
onClick: h,
|
|
9012
9051
|
disabled: l || !r.trim() && !c,
|
|
9013
9052
|
children: [
|
|
9014
9053
|
/* @__PURE__ */ jsx(Send, { className: "mr-1 h-4 w-4" }),
|
|
@@ -9116,53 +9155,53 @@ const AiAssistant = () => {
|
|
|
9116
9155
|
preloadedAttributes: n = [],
|
|
9117
9156
|
onAttributesChange: r
|
|
9118
9157
|
}) {
|
|
9119
|
-
const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [
|
|
9158
|
+
const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [h, m] = useState(""), f = useRef(null), x = useRef(null), k = usePageExternalData();
|
|
9120
9159
|
useEffect(() => {
|
|
9121
9160
|
l(n);
|
|
9122
9161
|
}, [n]);
|
|
9123
9162
|
const b = () => {
|
|
9124
9163
|
if (i.startsWith("@")) {
|
|
9125
|
-
|
|
9164
|
+
m("Attribute keys cannot start with '@'");
|
|
9126
9165
|
return;
|
|
9127
9166
|
}
|
|
9128
9167
|
if (i) {
|
|
9129
|
-
const
|
|
9130
|
-
r(
|
|
9168
|
+
const C = [...a, { key: i, value: d }];
|
|
9169
|
+
r(C), l(a), c(""), p(""), m("");
|
|
9131
9170
|
}
|
|
9132
|
-
}, v = (
|
|
9133
|
-
const A = a.filter((N,
|
|
9171
|
+
}, v = (C) => {
|
|
9172
|
+
const A = a.filter((N, S) => S !== C);
|
|
9134
9173
|
r(A), l(A);
|
|
9135
|
-
}, B = (
|
|
9136
|
-
g(
|
|
9174
|
+
}, B = (C) => {
|
|
9175
|
+
g(C), c(a[C].key), p(a[C].value);
|
|
9137
9176
|
}, w = () => {
|
|
9138
9177
|
if (i.startsWith("@")) {
|
|
9139
|
-
|
|
9178
|
+
m("Attribute keys cannot start with '@'");
|
|
9140
9179
|
return;
|
|
9141
9180
|
}
|
|
9142
9181
|
if (u !== null && i) {
|
|
9143
|
-
const
|
|
9144
|
-
|
|
9182
|
+
const C = [...a];
|
|
9183
|
+
C[u] = { key: i, value: d }, r(C), l(C), g(null), c(""), p(""), m("");
|
|
9145
9184
|
}
|
|
9146
|
-
},
|
|
9147
|
-
|
|
9148
|
-
},
|
|
9149
|
-
const A = (
|
|
9150
|
-
let
|
|
9151
|
-
const
|
|
9152
|
-
return j > 0 && (
|
|
9153
|
-
text:
|
|
9154
|
-
prefixLength:
|
|
9155
|
-
suffixLength:
|
|
9185
|
+
}, _ = (C) => {
|
|
9186
|
+
C.key === "Enter" && !C.shiftKey && (C.preventDefault(), u !== null ? w() : b());
|
|
9187
|
+
}, E = useCallback((C) => {
|
|
9188
|
+
const A = (y) => /[.,!?;:]/.test(y), N = (y, j, I) => {
|
|
9189
|
+
let L = "", P = "";
|
|
9190
|
+
const T = j > 0 ? y[j - 1] : "", D = j < y.length ? y[j] : "";
|
|
9191
|
+
return j > 0 && (T === "." || !A(T) && T !== " ") && (L = " "), j < y.length && !A(D) && D !== " " && (P = " "), {
|
|
9192
|
+
text: L + I + P,
|
|
9193
|
+
prefixLength: L.length,
|
|
9194
|
+
suffixLength: P.length
|
|
9156
9195
|
};
|
|
9157
|
-
},
|
|
9158
|
-
if (
|
|
9159
|
-
const
|
|
9160
|
-
if (
|
|
9161
|
-
const O = `{{${
|
|
9196
|
+
}, S = x.current;
|
|
9197
|
+
if (S) {
|
|
9198
|
+
const y = S.selectionStart || 0, j = S.value || "", I = S.selectionEnd || y;
|
|
9199
|
+
if (I > y) {
|
|
9200
|
+
const O = `{{${C}}}`, { text: R } = N(j, y, O), $ = j.slice(0, y) + R + j.slice(I);
|
|
9162
9201
|
p($);
|
|
9163
9202
|
return;
|
|
9164
9203
|
}
|
|
9165
|
-
const
|
|
9204
|
+
const P = `{{${C}}}`, { text: T } = N(j, y, P), D = j.slice(0, y) + T + j.slice(y);
|
|
9166
9205
|
p(D);
|
|
9167
9206
|
}
|
|
9168
9207
|
}, []);
|
|
@@ -9170,8 +9209,8 @@ const AiAssistant = () => {
|
|
|
9170
9209
|
/* @__PURE__ */ jsxs(
|
|
9171
9210
|
"form",
|
|
9172
9211
|
{
|
|
9173
|
-
onSubmit: (
|
|
9174
|
-
|
|
9212
|
+
onSubmit: (C) => {
|
|
9213
|
+
C.preventDefault(), u !== null ? w() : b();
|
|
9175
9214
|
},
|
|
9176
9215
|
className: "space-y-3",
|
|
9177
9216
|
children: [
|
|
@@ -9187,7 +9226,7 @@ const AiAssistant = () => {
|
|
|
9187
9226
|
id: "attrKey",
|
|
9188
9227
|
ref: f,
|
|
9189
9228
|
value: i,
|
|
9190
|
-
onChange: (
|
|
9229
|
+
onChange: (C) => c(C.target.value),
|
|
9191
9230
|
placeholder: "Enter Key",
|
|
9192
9231
|
className: "py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
|
|
9193
9232
|
}
|
|
@@ -9196,7 +9235,7 @@ const AiAssistant = () => {
|
|
|
9196
9235
|
/* @__PURE__ */ jsxs("div", { className: "w-full", children: [
|
|
9197
9236
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
9198
9237
|
/* @__PURE__ */ jsx(Label, { htmlFor: "attrValue", className: "text-[11px] font-normal text-slate-600", children: "Value" }),
|
|
9199
|
-
!isEmpty(
|
|
9238
|
+
!isEmpty(k) && /* @__PURE__ */ jsx(NestedPathSelector, { data: k, onSelect: E })
|
|
9200
9239
|
] }),
|
|
9201
9240
|
/* @__PURE__ */ jsx(
|
|
9202
9241
|
Textarea,
|
|
@@ -9208,8 +9247,8 @@ const AiAssistant = () => {
|
|
|
9208
9247
|
rows: 2,
|
|
9209
9248
|
ref: x,
|
|
9210
9249
|
value: d,
|
|
9211
|
-
onChange: (
|
|
9212
|
-
onKeyDown:
|
|
9250
|
+
onChange: (C) => p(C.target.value),
|
|
9251
|
+
onKeyDown: _,
|
|
9213
9252
|
placeholder: "Enter Value",
|
|
9214
9253
|
className: "text-xs font-normal leading-tight placeholder:text-slate-400"
|
|
9215
9254
|
}
|
|
@@ -9217,14 +9256,14 @@ const AiAssistant = () => {
|
|
|
9217
9256
|
] })
|
|
9218
9257
|
] }),
|
|
9219
9258
|
/* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !i.length, variant: "default", size: "sm", className: "h-8 w-24 text-xs", children: u !== null ? "Save" : "Add" }) }),
|
|
9220
|
-
|
|
9259
|
+
h && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: h })
|
|
9221
9260
|
]
|
|
9222
9261
|
}
|
|
9223
9262
|
),
|
|
9224
|
-
/* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((
|
|
9263
|
+
/* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((C, A) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
|
|
9225
9264
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
|
|
9226
|
-
/* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children:
|
|
9227
|
-
/* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children:
|
|
9265
|
+
/* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: C.key }),
|
|
9266
|
+
/* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: C.value.toString() })
|
|
9228
9267
|
] }),
|
|
9229
9268
|
/* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
|
|
9230
9269
|
/* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => B(A), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
|
|
@@ -9348,69 +9387,69 @@ const RootLayout = () => {
|
|
|
9348
9387
|
usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
|
|
9349
9388
|
r("outline");
|
|
9350
9389
|
});
|
|
9351
|
-
const p = useSidebarDefaultPanels(), u = useChaiSidebarPanels("top"), g = useChaiSidebarPanels("bottom"),
|
|
9352
|
-
|
|
9353
|
-
}, []),
|
|
9354
|
-
(
|
|
9355
|
-
r(n ===
|
|
9390
|
+
const p = useSidebarDefaultPanels(), u = useChaiSidebarPanels("top"), g = useChaiSidebarPanels("bottom"), h = useCallback((C) => {
|
|
9391
|
+
C.preventDefault();
|
|
9392
|
+
}, []), m = useCallback(
|
|
9393
|
+
(C) => {
|
|
9394
|
+
r(n === C ? null : C);
|
|
9356
9395
|
},
|
|
9357
9396
|
[n]
|
|
9358
9397
|
), { t: f } = useTranslation(), x = useMemo(
|
|
9359
9398
|
() => [...p, ...u, ...g],
|
|
9360
9399
|
[p, u, g]
|
|
9361
|
-
),
|
|
9400
|
+
), k = useBuilderProp("htmlDir", "ltr"), b = find(x, { id: n }) ?? first(x), v = get(b, "width", DEFAULT_PANEL_WIDTH);
|
|
9362
9401
|
useEffect(() => {
|
|
9363
9402
|
if (n !== null) {
|
|
9364
|
-
const
|
|
9365
|
-
|
|
9403
|
+
const C = find(x, { id: n });
|
|
9404
|
+
C && get(C, "view", "standard") === "standard" && (a.current = n, i(get(C, "width", DEFAULT_PANEL_WIDTH)));
|
|
9366
9405
|
}
|
|
9367
9406
|
}, [n, x]);
|
|
9368
9407
|
const B = useMemo(() => {
|
|
9369
9408
|
if (n === null) return 0;
|
|
9370
|
-
const
|
|
9371
|
-
return get(
|
|
9409
|
+
const C = find(x, { id: n });
|
|
9410
|
+
return get(C, "view", "standard") === "standard" ? v : l;
|
|
9372
9411
|
}, [n, v, l, x]), w = useCallback(() => {
|
|
9373
9412
|
r(a.current);
|
|
9374
|
-
}, [r]),
|
|
9413
|
+
}, [r]), _ = useCallback(() => {
|
|
9375
9414
|
r("outline");
|
|
9376
9415
|
}, [r]);
|
|
9377
9416
|
useEffect(() => {
|
|
9378
9417
|
find(x, { id: n }) || r("outline");
|
|
9379
9418
|
}, [n, x]);
|
|
9380
|
-
const
|
|
9381
|
-
(
|
|
9382
|
-
|
|
9419
|
+
const E = useCallback(
|
|
9420
|
+
(C) => {
|
|
9421
|
+
m(C);
|
|
9383
9422
|
},
|
|
9384
|
-
[
|
|
9423
|
+
[m]
|
|
9385
9424
|
);
|
|
9386
|
-
return /* @__PURE__ */ jsx("div", { dir:
|
|
9425
|
+
return /* @__PURE__ */ jsx("div", { dir: k, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
|
|
9387
9426
|
/* @__PURE__ */ jsxs(
|
|
9388
9427
|
"div",
|
|
9389
9428
|
{
|
|
9390
|
-
onContextMenu:
|
|
9429
|
+
onContextMenu: h,
|
|
9391
9430
|
className: "flex h-screen max-h-full flex-col bg-background text-foreground",
|
|
9392
9431
|
children: [
|
|
9393
9432
|
/* @__PURE__ */ jsx("div", { className: "flex h-[50px] w-screen items-center border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(o, {}) }) }),
|
|
9394
9433
|
/* @__PURE__ */ jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
|
|
9395
9434
|
/* @__PURE__ */ jsxs("div", { id: "sidebar", className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
|
|
9396
|
-
/* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: [p, u].flat().map((
|
|
9397
|
-
/* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(
|
|
9435
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: [p, u].flat().map((C, A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
|
|
9436
|
+
/* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(C, "button", NoopComponent), {
|
|
9398
9437
|
position: "top",
|
|
9399
|
-
panelId:
|
|
9400
|
-
isActive: n ===
|
|
9401
|
-
show: () =>
|
|
9438
|
+
panelId: C.id,
|
|
9439
|
+
isActive: n === C.id,
|
|
9440
|
+
show: () => E(C.id)
|
|
9402
9441
|
}) }),
|
|
9403
|
-
/* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(
|
|
9442
|
+
/* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(C.label) }) })
|
|
9404
9443
|
] }, "button-top-" + A)) }),
|
|
9405
9444
|
/* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
|
|
9406
|
-
/* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((
|
|
9407
|
-
/* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(
|
|
9445
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((C, A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
|
|
9446
|
+
/* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(C, "button", NoopComponent), {
|
|
9408
9447
|
position: "bottom",
|
|
9409
|
-
panelId:
|
|
9410
|
-
isActive: n ===
|
|
9411
|
-
show: () =>
|
|
9448
|
+
panelId: C.id,
|
|
9449
|
+
isActive: n === C.id,
|
|
9450
|
+
show: () => E(C.id)
|
|
9412
9451
|
}) }),
|
|
9413
|
-
/* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(
|
|
9452
|
+
/* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(C.label) }) })
|
|
9414
9453
|
] }, "button-bottom-" + A)) })
|
|
9415
9454
|
] }),
|
|
9416
9455
|
/* @__PURE__ */ jsx(
|
|
@@ -9487,7 +9526,7 @@ const RootLayout = () => {
|
|
|
9487
9526
|
/* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
|
|
9488
9527
|
] }) }),
|
|
9489
9528
|
/* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
|
|
9490
|
-
close:
|
|
9529
|
+
close: _
|
|
9491
9530
|
}) }) })
|
|
9492
9531
|
]
|
|
9493
9532
|
}
|
|
@@ -9499,7 +9538,7 @@ const RootLayout = () => {
|
|
|
9499
9538
|
/* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
|
|
9500
9539
|
] }) }),
|
|
9501
9540
|
/* @__PURE__ */ jsx("div", { className: "max-h-[70vh] overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
|
|
9502
|
-
close:
|
|
9541
|
+
close: _
|
|
9503
9542
|
}) }) })
|
|
9504
9543
|
] }) }),
|
|
9505
9544
|
n !== null && get(b, "view") === "overlay" && /* @__PURE__ */ jsx(
|
|
@@ -9527,7 +9566,7 @@ const RootLayout = () => {
|
|
|
9527
9566
|
/* @__PURE__ */ jsx(Button, { onClick: () => w(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
|
|
9528
9567
|
] }),
|
|
9529
9568
|
/* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
|
|
9530
|
-
close:
|
|
9569
|
+
close: _
|
|
9531
9570
|
}) }) })
|
|
9532
9571
|
]
|
|
9533
9572
|
}
|
|
@@ -9641,226 +9680,226 @@ const FEATURE_TOGGLES = {
|
|
|
9641
9680
|
for (const i of n.p)
|
|
9642
9681
|
l.add(i);
|
|
9643
9682
|
return l;
|
|
9644
|
-
}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), c = {}, d = (
|
|
9683
|
+
}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), c = {}, d = (m, ...f) => m.read(...f), p = (m, ...f) => m.write(...f), u = (m, f) => {
|
|
9645
9684
|
var x;
|
|
9646
|
-
return (x =
|
|
9647
|
-
}, g = (
|
|
9685
|
+
return (x = m.unstable_onInit) == null ? void 0 : x.call(m, f);
|
|
9686
|
+
}, g = (m, f) => {
|
|
9648
9687
|
var x;
|
|
9649
|
-
return (x =
|
|
9650
|
-
}, ...
|
|
9651
|
-
const
|
|
9688
|
+
return (x = m.onMount) == null ? void 0 : x.call(m, f);
|
|
9689
|
+
}, ...h) => {
|
|
9690
|
+
const m = h[0] || ((A) => {
|
|
9652
9691
|
let N = o.get(A);
|
|
9653
|
-
return N || (N = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(A, N), u == null || u(A,
|
|
9654
|
-
}), f =
|
|
9692
|
+
return N || (N = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(A, N), u == null || u(A, C)), N;
|
|
9693
|
+
}), f = h[1] || (() => {
|
|
9655
9694
|
let A, N;
|
|
9656
|
-
const
|
|
9695
|
+
const S = (y) => {
|
|
9657
9696
|
try {
|
|
9658
|
-
|
|
9697
|
+
y();
|
|
9659
9698
|
} catch (j) {
|
|
9660
9699
|
A || (A = !0, N = j);
|
|
9661
9700
|
}
|
|
9662
9701
|
};
|
|
9663
9702
|
do {
|
|
9664
|
-
c.f &&
|
|
9665
|
-
const
|
|
9666
|
-
a.forEach((
|
|
9667
|
-
var
|
|
9668
|
-
return (
|
|
9669
|
-
}), a.clear(), i.forEach(j), i.clear(), l.forEach(j), l.clear(),
|
|
9703
|
+
c.f && S(c.f);
|
|
9704
|
+
const y = /* @__PURE__ */ new Set(), j = y.add.bind(y);
|
|
9705
|
+
a.forEach((I) => {
|
|
9706
|
+
var L;
|
|
9707
|
+
return (L = n.get(I)) == null ? void 0 : L.l.forEach(j);
|
|
9708
|
+
}), a.clear(), i.forEach(j), i.clear(), l.forEach(j), l.clear(), y.forEach(S), a.size && x();
|
|
9670
9709
|
} while (a.size || i.size || l.size);
|
|
9671
9710
|
if (A)
|
|
9672
9711
|
throw N;
|
|
9673
|
-
}), x =
|
|
9674
|
-
const A = [], N = /* @__PURE__ */ new WeakSet(),
|
|
9675
|
-
for (;
|
|
9676
|
-
const j =
|
|
9677
|
-
if (
|
|
9678
|
-
|
|
9712
|
+
}), x = h[2] || (() => {
|
|
9713
|
+
const A = [], N = /* @__PURE__ */ new WeakSet(), S = /* @__PURE__ */ new WeakSet(), y = Array.from(a);
|
|
9714
|
+
for (; y.length; ) {
|
|
9715
|
+
const j = y[y.length - 1], I = m(j);
|
|
9716
|
+
if (S.has(j)) {
|
|
9717
|
+
y.pop();
|
|
9679
9718
|
continue;
|
|
9680
9719
|
}
|
|
9681
9720
|
if (N.has(j)) {
|
|
9682
|
-
r.get(j) ===
|
|
9721
|
+
r.get(j) === I.n && A.push([j, I]), S.add(j), y.pop();
|
|
9683
9722
|
continue;
|
|
9684
9723
|
}
|
|
9685
9724
|
N.add(j);
|
|
9686
|
-
for (const
|
|
9687
|
-
N.has(
|
|
9725
|
+
for (const L of getMountedOrPendingDependents(j, I, n))
|
|
9726
|
+
N.has(L) || y.push(L);
|
|
9688
9727
|
}
|
|
9689
9728
|
for (let j = A.length - 1; j >= 0; --j) {
|
|
9690
|
-
const [
|
|
9691
|
-
let
|
|
9692
|
-
for (const
|
|
9693
|
-
if (
|
|
9694
|
-
|
|
9729
|
+
const [I, L] = A[j];
|
|
9730
|
+
let P = !1;
|
|
9731
|
+
for (const T of L.d.keys())
|
|
9732
|
+
if (T !== I && a.has(T)) {
|
|
9733
|
+
P = !0;
|
|
9695
9734
|
break;
|
|
9696
9735
|
}
|
|
9697
|
-
|
|
9736
|
+
P && (k(I), B(I)), r.delete(I);
|
|
9698
9737
|
}
|
|
9699
|
-
}),
|
|
9700
|
-
var N,
|
|
9701
|
-
const
|
|
9702
|
-
if (isAtomStateInitialized(
|
|
9703
|
-
([
|
|
9738
|
+
}), k = h[3] || ((A) => {
|
|
9739
|
+
var N, S;
|
|
9740
|
+
const y = m(A);
|
|
9741
|
+
if (isAtomStateInitialized(y) && (n.has(A) && r.get(A) !== y.n || Array.from(y.d).every(
|
|
9742
|
+
([R, $]) => (
|
|
9704
9743
|
// Recursively, read the atom state of the dependency, and
|
|
9705
9744
|
// check if the atom epoch number is unchanged
|
|
9706
|
-
|
|
9745
|
+
k(R).n === $
|
|
9707
9746
|
)
|
|
9708
9747
|
)))
|
|
9709
|
-
return
|
|
9710
|
-
|
|
9748
|
+
return y;
|
|
9749
|
+
y.d.clear();
|
|
9711
9750
|
let j = !0;
|
|
9712
|
-
const
|
|
9751
|
+
const I = () => {
|
|
9713
9752
|
n.has(A) && (B(A), x(), f());
|
|
9714
|
-
},
|
|
9753
|
+
}, L = (R) => {
|
|
9715
9754
|
var $;
|
|
9716
|
-
if (isSelfAtom(A,
|
|
9717
|
-
const U =
|
|
9755
|
+
if (isSelfAtom(A, R)) {
|
|
9756
|
+
const U = m(R);
|
|
9718
9757
|
if (!isAtomStateInitialized(U))
|
|
9719
|
-
if (hasInitialValue(
|
|
9720
|
-
setAtomStateValueOrPromise(
|
|
9758
|
+
if (hasInitialValue(R))
|
|
9759
|
+
setAtomStateValueOrPromise(R, R.init, m);
|
|
9721
9760
|
else
|
|
9722
9761
|
throw new Error("no atom init");
|
|
9723
9762
|
return returnAtomValue(U);
|
|
9724
9763
|
}
|
|
9725
|
-
const M =
|
|
9764
|
+
const M = k(R);
|
|
9726
9765
|
try {
|
|
9727
9766
|
return returnAtomValue(M);
|
|
9728
9767
|
} finally {
|
|
9729
|
-
|
|
9768
|
+
y.d.set(R, M.n), isPendingPromise(y.v) && addPendingPromiseToDependency(A, y.v, M), ($ = n.get(R)) == null || $.t.add(A), j || I();
|
|
9730
9769
|
}
|
|
9731
9770
|
};
|
|
9732
|
-
let
|
|
9771
|
+
let P, T;
|
|
9733
9772
|
const D = {
|
|
9734
9773
|
get signal() {
|
|
9735
|
-
return
|
|
9774
|
+
return P || (P = new AbortController()), P.signal;
|
|
9736
9775
|
},
|
|
9737
9776
|
get setSelf() {
|
|
9738
|
-
return !
|
|
9777
|
+
return !T && isActuallyWritableAtom(A) && (T = (...R) => {
|
|
9739
9778
|
if (!j)
|
|
9740
9779
|
try {
|
|
9741
|
-
return v(A, ...
|
|
9780
|
+
return v(A, ...R);
|
|
9742
9781
|
} finally {
|
|
9743
9782
|
x(), f();
|
|
9744
9783
|
}
|
|
9745
|
-
}),
|
|
9784
|
+
}), T;
|
|
9746
9785
|
}
|
|
9747
|
-
}, O =
|
|
9786
|
+
}, O = y.n;
|
|
9748
9787
|
try {
|
|
9749
|
-
const
|
|
9750
|
-
return setAtomStateValueOrPromise(A,
|
|
9751
|
-
|
|
9752
|
-
|
|
9753
|
-
)),
|
|
9754
|
-
} catch (
|
|
9755
|
-
return delete
|
|
9788
|
+
const R = d(A, L, D);
|
|
9789
|
+
return setAtomStateValueOrPromise(A, R, m), isPromiseLike$1(R) && ((N = R.onCancel) == null || N.call(R, () => P == null ? void 0 : P.abort()), R.then(
|
|
9790
|
+
I,
|
|
9791
|
+
I
|
|
9792
|
+
)), y;
|
|
9793
|
+
} catch (R) {
|
|
9794
|
+
return delete y.v, y.e = R, ++y.n, y;
|
|
9756
9795
|
} finally {
|
|
9757
|
-
j = !1, O !==
|
|
9796
|
+
j = !1, O !== y.n && r.get(A) === O && (r.set(A, y.n), a.add(A), (S = c.c) == null || S.call(c, A));
|
|
9758
9797
|
}
|
|
9759
|
-
}), b =
|
|
9798
|
+
}), b = h[4] || ((A) => {
|
|
9760
9799
|
const N = [A];
|
|
9761
9800
|
for (; N.length; ) {
|
|
9762
|
-
const
|
|
9763
|
-
for (const j of getMountedOrPendingDependents(
|
|
9764
|
-
const
|
|
9765
|
-
r.set(j,
|
|
9801
|
+
const S = N.pop(), y = m(S);
|
|
9802
|
+
for (const j of getMountedOrPendingDependents(S, y, n)) {
|
|
9803
|
+
const I = m(j);
|
|
9804
|
+
r.set(j, I.n), N.push(j);
|
|
9766
9805
|
}
|
|
9767
9806
|
}
|
|
9768
|
-
}), v =
|
|
9769
|
-
let
|
|
9770
|
-
const
|
|
9771
|
-
var
|
|
9772
|
-
const
|
|
9807
|
+
}), v = h[5] || ((A, ...N) => {
|
|
9808
|
+
let S = !0;
|
|
9809
|
+
const y = (I) => returnAtomValue(k(I)), j = (I, ...L) => {
|
|
9810
|
+
var P;
|
|
9811
|
+
const T = m(I);
|
|
9773
9812
|
try {
|
|
9774
|
-
if (isSelfAtom(A,
|
|
9775
|
-
if (!hasInitialValue(
|
|
9813
|
+
if (isSelfAtom(A, I)) {
|
|
9814
|
+
if (!hasInitialValue(I))
|
|
9776
9815
|
throw new Error("atom not writable");
|
|
9777
|
-
const D =
|
|
9778
|
-
setAtomStateValueOrPromise(
|
|
9816
|
+
const D = T.n, O = L[0];
|
|
9817
|
+
setAtomStateValueOrPromise(I, O, m), B(I), D !== T.n && (a.add(I), (P = c.c) == null || P.call(c, I), b(I));
|
|
9779
9818
|
return;
|
|
9780
9819
|
} else
|
|
9781
|
-
return v(
|
|
9820
|
+
return v(I, ...L);
|
|
9782
9821
|
} finally {
|
|
9783
|
-
|
|
9822
|
+
S || (x(), f());
|
|
9784
9823
|
}
|
|
9785
9824
|
};
|
|
9786
9825
|
try {
|
|
9787
|
-
return p(A,
|
|
9826
|
+
return p(A, y, j, ...N);
|
|
9788
9827
|
} finally {
|
|
9789
|
-
|
|
9828
|
+
S = !1;
|
|
9790
9829
|
}
|
|
9791
|
-
}), B =
|
|
9830
|
+
}), B = h[6] || ((A) => {
|
|
9792
9831
|
var N;
|
|
9793
|
-
const
|
|
9794
|
-
if (
|
|
9795
|
-
for (const [j,
|
|
9796
|
-
if (!
|
|
9797
|
-
const
|
|
9798
|
-
w(j).t.add(A),
|
|
9832
|
+
const S = m(A), y = n.get(A);
|
|
9833
|
+
if (y && !isPendingPromise(S.v)) {
|
|
9834
|
+
for (const [j, I] of S.d)
|
|
9835
|
+
if (!y.d.has(j)) {
|
|
9836
|
+
const L = m(j);
|
|
9837
|
+
w(j).t.add(A), y.d.add(j), I !== L.n && (a.add(j), (N = c.c) == null || N.call(c, j), b(j));
|
|
9799
9838
|
}
|
|
9800
|
-
for (const j of
|
|
9801
|
-
if (!
|
|
9802
|
-
|
|
9803
|
-
const
|
|
9804
|
-
|
|
9839
|
+
for (const j of y.d || [])
|
|
9840
|
+
if (!S.d.has(j)) {
|
|
9841
|
+
y.d.delete(j);
|
|
9842
|
+
const I = _(j);
|
|
9843
|
+
I == null || I.t.delete(A);
|
|
9805
9844
|
}
|
|
9806
9845
|
}
|
|
9807
|
-
}), w =
|
|
9846
|
+
}), w = h[7] || ((A) => {
|
|
9808
9847
|
var N;
|
|
9809
|
-
const
|
|
9810
|
-
let
|
|
9811
|
-
if (!
|
|
9812
|
-
|
|
9813
|
-
for (const j of
|
|
9848
|
+
const S = m(A);
|
|
9849
|
+
let y = n.get(A);
|
|
9850
|
+
if (!y) {
|
|
9851
|
+
k(A);
|
|
9852
|
+
for (const j of S.d.keys())
|
|
9814
9853
|
w(j).t.add(A);
|
|
9815
|
-
if (
|
|
9854
|
+
if (y = {
|
|
9816
9855
|
l: /* @__PURE__ */ new Set(),
|
|
9817
|
-
d: new Set(
|
|
9856
|
+
d: new Set(S.d.keys()),
|
|
9818
9857
|
t: /* @__PURE__ */ new Set()
|
|
9819
|
-
}, n.set(A,
|
|
9858
|
+
}, n.set(A, y), (N = c.m) == null || N.call(c, A), isActuallyWritableAtom(A)) {
|
|
9820
9859
|
const j = () => {
|
|
9821
|
-
let
|
|
9822
|
-
const
|
|
9860
|
+
let I = !0;
|
|
9861
|
+
const L = (...P) => {
|
|
9823
9862
|
try {
|
|
9824
|
-
return v(A, ...
|
|
9863
|
+
return v(A, ...P);
|
|
9825
9864
|
} finally {
|
|
9826
|
-
|
|
9865
|
+
I || (x(), f());
|
|
9827
9866
|
}
|
|
9828
9867
|
};
|
|
9829
9868
|
try {
|
|
9830
|
-
const
|
|
9831
|
-
|
|
9832
|
-
|
|
9869
|
+
const P = g(A, L);
|
|
9870
|
+
P && (y.u = () => {
|
|
9871
|
+
I = !0;
|
|
9833
9872
|
try {
|
|
9834
|
-
|
|
9873
|
+
P();
|
|
9835
9874
|
} finally {
|
|
9836
|
-
|
|
9875
|
+
I = !1;
|
|
9837
9876
|
}
|
|
9838
9877
|
});
|
|
9839
9878
|
} finally {
|
|
9840
|
-
|
|
9879
|
+
I = !1;
|
|
9841
9880
|
}
|
|
9842
9881
|
};
|
|
9843
9882
|
l.add(j);
|
|
9844
9883
|
}
|
|
9845
9884
|
}
|
|
9846
|
-
return
|
|
9847
|
-
}),
|
|
9885
|
+
return y;
|
|
9886
|
+
}), _ = h[8] || ((A) => {
|
|
9848
9887
|
var N;
|
|
9849
|
-
const
|
|
9850
|
-
let
|
|
9851
|
-
if (
|
|
9852
|
-
var
|
|
9853
|
-
return (
|
|
9888
|
+
const S = m(A);
|
|
9889
|
+
let y = n.get(A);
|
|
9890
|
+
if (y && !y.l.size && !Array.from(y.t).some((j) => {
|
|
9891
|
+
var I;
|
|
9892
|
+
return (I = n.get(j)) == null ? void 0 : I.d.has(A);
|
|
9854
9893
|
})) {
|
|
9855
|
-
|
|
9856
|
-
for (const j of
|
|
9857
|
-
const
|
|
9858
|
-
|
|
9894
|
+
y.u && i.add(y.u), y = void 0, n.delete(A), (N = c.u) == null || N.call(c, A);
|
|
9895
|
+
for (const j of S.d.keys()) {
|
|
9896
|
+
const I = _(j);
|
|
9897
|
+
I == null || I.t.delete(A);
|
|
9859
9898
|
}
|
|
9860
9899
|
return;
|
|
9861
9900
|
}
|
|
9862
|
-
return
|
|
9863
|
-
}),
|
|
9901
|
+
return y;
|
|
9902
|
+
}), E = [
|
|
9864
9903
|
// store state
|
|
9865
9904
|
o,
|
|
9866
9905
|
n,
|
|
@@ -9875,17 +9914,17 @@ const FEATURE_TOGGLES = {
|
|
|
9875
9914
|
u,
|
|
9876
9915
|
g,
|
|
9877
9916
|
// building-block functions
|
|
9878
|
-
|
|
9917
|
+
m,
|
|
9879
9918
|
f,
|
|
9880
9919
|
x,
|
|
9881
|
-
|
|
9920
|
+
k,
|
|
9882
9921
|
b,
|
|
9883
9922
|
v,
|
|
9884
9923
|
B,
|
|
9885
9924
|
w,
|
|
9886
|
-
|
|
9887
|
-
],
|
|
9888
|
-
get: (A) => returnAtomValue(
|
|
9925
|
+
_
|
|
9926
|
+
], C = {
|
|
9927
|
+
get: (A) => returnAtomValue(k(A)),
|
|
9889
9928
|
set: (A, ...N) => {
|
|
9890
9929
|
try {
|
|
9891
9930
|
return v(A, ...N);
|
|
@@ -9894,13 +9933,13 @@ const FEATURE_TOGGLES = {
|
|
|
9894
9933
|
}
|
|
9895
9934
|
},
|
|
9896
9935
|
sub: (A, N) => {
|
|
9897
|
-
const
|
|
9898
|
-
return
|
|
9899
|
-
|
|
9936
|
+
const y = w(A).l;
|
|
9937
|
+
return y.add(N), f(), () => {
|
|
9938
|
+
y.delete(N), _(A), f();
|
|
9900
9939
|
};
|
|
9901
9940
|
}
|
|
9902
9941
|
};
|
|
9903
|
-
return Object.defineProperty(
|
|
9942
|
+
return Object.defineProperty(C, BUILDING_BLOCKS, { value: E }), C;
|
|
9904
9943
|
}, INTERNAL_buildStoreRev1 = buildStore, createStore = () => INTERNAL_buildStoreRev1();
|
|
9905
9944
|
let defaultStore;
|
|
9906
9945
|
const getDefaultStore = () => (defaultStore || (defaultStore = createStore()), defaultStore), StoreContext = createContext(
|
|
@@ -10075,6 +10114,7 @@ export {
|
|
|
10075
10114
|
useDuplicateBlocks,
|
|
10076
10115
|
useHiddenBlockIds,
|
|
10077
10116
|
useHighlightBlockId,
|
|
10117
|
+
useInlineEditing,
|
|
10078
10118
|
useLanguages,
|
|
10079
10119
|
useLibraryBlocks,
|
|
10080
10120
|
useMediaManagerComponent,
|