@strapi/content-manager 5.0.0-beta.6 → 5.0.0-beta.7
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/_chunks/{CardDragPreview-DSVYodBX.js → CardDragPreview-C0QyJgRA.js} +10 -14
- package/dist/_chunks/CardDragPreview-C0QyJgRA.js.map +1 -0
- package/dist/_chunks/{CardDragPreview-ikSG4M46.mjs → CardDragPreview-DOxamsuj.mjs} +7 -9
- package/dist/_chunks/CardDragPreview-DOxamsuj.mjs.map +1 -0
- package/dist/_chunks/{ComponentConfigurationPage-43KmCNQE.js → ComponentConfigurationPage-DMq0wvcL.js} +3 -3
- package/dist/_chunks/{ComponentConfigurationPage-43KmCNQE.js.map → ComponentConfigurationPage-DMq0wvcL.js.map} +1 -1
- package/dist/_chunks/{ComponentConfigurationPage--2aLCv-G.mjs → ComponentConfigurationPage-uTMkLI60.mjs} +3 -3
- package/dist/_chunks/{ComponentConfigurationPage--2aLCv-G.mjs.map → ComponentConfigurationPage-uTMkLI60.mjs.map} +1 -1
- package/dist/_chunks/{EditConfigurationPage-CUcGHHvQ.mjs → EditConfigurationPage-B2HhCh-b.mjs} +3 -3
- package/dist/_chunks/{EditConfigurationPage-CUcGHHvQ.mjs.map → EditConfigurationPage-B2HhCh-b.mjs.map} +1 -1
- package/dist/_chunks/{EditConfigurationPage-BfFzJ4Br.js → EditConfigurationPage-BFpQwwbc.js} +3 -3
- package/dist/_chunks/{EditConfigurationPage-BfFzJ4Br.js.map → EditConfigurationPage-BFpQwwbc.js.map} +1 -1
- package/dist/_chunks/{EditViewPage-Bm8lgcm6.mjs → EditViewPage-BVIrgjyG.mjs} +4 -4
- package/dist/_chunks/EditViewPage-BVIrgjyG.mjs.map +1 -0
- package/dist/_chunks/{EditViewPage-CzOT5Kpj.js → EditViewPage-CXXue16T.js} +5 -7
- package/dist/_chunks/EditViewPage-CXXue16T.js.map +1 -0
- package/dist/_chunks/{Field-Dlh0uGnL.mjs → Field-0_2h1vuK.mjs} +303 -294
- package/dist/_chunks/Field-0_2h1vuK.mjs.map +1 -0
- package/dist/_chunks/{Field-Caef4JjM.js → Field-ZgzKlgxR.js} +363 -355
- package/dist/_chunks/Field-ZgzKlgxR.js.map +1 -0
- package/dist/_chunks/{Form-EnaQL_6L.mjs → Form-B7TUnQDd.mjs} +14 -14
- package/dist/_chunks/Form-B7TUnQDd.mjs.map +1 -0
- package/dist/_chunks/{Form-BzuAjtRq.js → Form-DgTc2qkx.js} +14 -15
- package/dist/_chunks/Form-DgTc2qkx.js.map +1 -0
- package/dist/_chunks/{History-C17LiyRg.js → History-DtHjQuqM.js} +28 -40
- package/dist/_chunks/History-DtHjQuqM.js.map +1 -0
- package/dist/_chunks/{History-D6sbCJvo.mjs → History-Dug_4HIA.mjs} +28 -39
- package/dist/_chunks/History-Dug_4HIA.mjs.map +1 -0
- package/dist/_chunks/{ListConfigurationPage-Dks5SX6f.js → ListConfigurationPage-BuSdTjfa.js} +17 -19
- package/dist/_chunks/ListConfigurationPage-BuSdTjfa.js.map +1 -0
- package/dist/_chunks/{ListConfigurationPage-Ce4qs7qE.mjs → ListConfigurationPage-CmEeNg6T.mjs} +14 -14
- package/dist/_chunks/ListConfigurationPage-CmEeNg6T.mjs.map +1 -0
- package/dist/_chunks/{ListViewPage-BwrZrPsh.js → ListViewPage-CExWwa4S.js} +24 -37
- package/dist/_chunks/ListViewPage-CExWwa4S.js.map +1 -0
- package/dist/_chunks/{ListViewPage-Be7S5aKL.mjs → ListViewPage-Dsoa3wEA.mjs} +21 -33
- package/dist/_chunks/ListViewPage-Dsoa3wEA.mjs.map +1 -0
- package/dist/_chunks/{NoContentTypePage-Cu5r1-JT.js → NoContentTypePage-DCUL8gVi.js} +5 -5
- package/dist/_chunks/NoContentTypePage-DCUL8gVi.js.map +1 -0
- package/dist/_chunks/{NoContentTypePage-CIPmYQMm.mjs → NoContentTypePage-Dh38hBXB.mjs} +7 -7
- package/dist/_chunks/NoContentTypePage-Dh38hBXB.mjs.map +1 -0
- package/dist/_chunks/{NoPermissionsPage-C-j6TEUF.js → NoPermissionsPage-BK-XCpIy.js} +4 -5
- package/dist/_chunks/NoPermissionsPage-BK-XCpIy.js.map +1 -0
- package/dist/_chunks/{NoPermissionsPage-DhJ7LYrr.mjs → NoPermissionsPage-Dt2O40ey.mjs} +5 -6
- package/dist/_chunks/NoPermissionsPage-Dt2O40ey.mjs.map +1 -0
- package/dist/_chunks/{Relations-Czs-uZ-s.js → Relations-CNypkp-g.js} +66 -59
- package/dist/_chunks/Relations-CNypkp-g.js.map +1 -0
- package/dist/_chunks/{Relations-CY7AtkDA.mjs → Relations-DZyjWZHl.mjs} +62 -54
- package/dist/_chunks/Relations-DZyjWZHl.mjs.map +1 -0
- package/dist/_chunks/{index-DNVx8ssZ.mjs → index-B3c-4it4.mjs} +54 -41
- package/dist/_chunks/index-B3c-4it4.mjs.map +1 -0
- package/dist/_chunks/{index-X_2tafck.js → index-DFK7LwDW.js} +59 -47
- package/dist/_chunks/index-DFK7LwDW.js.map +1 -0
- package/dist/_chunks/{layout-Dnh0PNp9.mjs → layout-B5cm7cZj.mjs} +10 -10
- package/dist/_chunks/layout-B5cm7cZj.mjs.map +1 -0
- package/dist/_chunks/{layout-dBc7wN7L.js → layout-DLih5-_W.js} +11 -13
- package/dist/_chunks/layout-DLih5-_W.js.map +1 -0
- package/dist/_chunks/{relations-Dx7tMKJN.mjs → relations-BZkrMa2z.mjs} +2 -2
- package/dist/_chunks/{relations-Dx7tMKJN.mjs.map → relations-BZkrMa2z.mjs.map} +1 -1
- package/dist/_chunks/{relations-4pHtBrHJ.js → relations-CTvkuINQ.js} +2 -2
- package/dist/_chunks/{relations-4pHtBrHJ.js.map → relations-CTvkuINQ.js.map} +1 -1
- package/dist/_chunks/useDragAndDrop-DdHgKsqq.mjs.map +1 -1
- package/dist/_chunks/useDragAndDrop-J0TUUbR6.js.map +1 -1
- package/dist/admin/index.js +1 -1
- package/dist/admin/index.mjs +1 -1
- package/dist/admin/src/hooks/useDocumentLayout.d.ts +1 -1
- package/dist/admin/src/hooks/useDragAndDrop.d.ts +4 -4
- package/dist/admin/src/hooks/useKeyboardDragAndDrop.d.ts +1 -1
- package/dist/admin/src/pages/EditView/components/FormInputs/Relations.d.ts +8 -3
- package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.d.ts +3 -49
- package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/WysiwygStyles.d.ts +48 -54
- package/dist/admin/src/utils/api.d.ts +6 -7
- package/dist/server/index.js +333 -327
- package/dist/server/index.js.map +1 -1
- package/dist/server/index.mjs +340 -334
- package/dist/server/index.mjs.map +1 -1
- package/dist/server/src/controllers/collection-types.d.ts.map +1 -1
- package/dist/server/src/controllers/validation/index.d.ts +1 -1
- package/dist/server/src/history/services/history.d.ts +2 -4
- package/dist/server/src/history/services/history.d.ts.map +1 -1
- package/dist/server/src/history/services/index.d.ts +6 -2
- package/dist/server/src/history/services/index.d.ts.map +1 -1
- package/dist/server/src/history/services/lifecycles.d.ts +9 -0
- package/dist/server/src/history/services/lifecycles.d.ts.map +1 -0
- package/dist/server/src/history/services/utils.d.ts +41 -9
- package/dist/server/src/history/services/utils.d.ts.map +1 -1
- package/dist/server/src/history/utils.d.ts +6 -2
- package/dist/server/src/history/utils.d.ts.map +1 -1
- package/dist/server/src/index.d.ts +11 -11
- package/dist/server/src/services/document-manager.d.ts +12 -11
- package/dist/server/src/services/document-manager.d.ts.map +1 -1
- package/dist/server/src/services/index.d.ts +11 -11
- package/dist/shared/contracts/collection-types.d.ts +3 -1
- package/dist/shared/contracts/collection-types.d.ts.map +1 -1
- package/package.json +10 -11
- package/dist/_chunks/CardDragPreview-DSVYodBX.js.map +0 -1
- package/dist/_chunks/CardDragPreview-ikSG4M46.mjs.map +0 -1
- package/dist/_chunks/EditViewPage-Bm8lgcm6.mjs.map +0 -1
- package/dist/_chunks/EditViewPage-CzOT5Kpj.js.map +0 -1
- package/dist/_chunks/Field-Caef4JjM.js.map +0 -1
- package/dist/_chunks/Field-Dlh0uGnL.mjs.map +0 -1
- package/dist/_chunks/Form-BzuAjtRq.js.map +0 -1
- package/dist/_chunks/Form-EnaQL_6L.mjs.map +0 -1
- package/dist/_chunks/History-C17LiyRg.js.map +0 -1
- package/dist/_chunks/History-D6sbCJvo.mjs.map +0 -1
- package/dist/_chunks/ListConfigurationPage-Ce4qs7qE.mjs.map +0 -1
- package/dist/_chunks/ListConfigurationPage-Dks5SX6f.js.map +0 -1
- package/dist/_chunks/ListViewPage-Be7S5aKL.mjs.map +0 -1
- package/dist/_chunks/ListViewPage-BwrZrPsh.js.map +0 -1
- package/dist/_chunks/NoContentTypePage-CIPmYQMm.mjs.map +0 -1
- package/dist/_chunks/NoContentTypePage-Cu5r1-JT.js.map +0 -1
- package/dist/_chunks/NoPermissionsPage-C-j6TEUF.js.map +0 -1
- package/dist/_chunks/NoPermissionsPage-DhJ7LYrr.mjs.map +0 -1
- package/dist/_chunks/Relations-CY7AtkDA.mjs.map +0 -1
- package/dist/_chunks/Relations-Czs-uZ-s.js.map +0 -1
- package/dist/_chunks/index-DNVx8ssZ.mjs.map +0 -1
- package/dist/_chunks/index-X_2tafck.js.map +0 -1
- package/dist/_chunks/layout-Dnh0PNp9.mjs.map +0 -1
- package/dist/_chunks/layout-dBc7wN7L.js.map +0 -1
@@ -5,11 +5,11 @@ const strapiAdmin = require("@strapi/admin/strapi-admin");
|
|
5
5
|
const designSystem = require("@strapi/design-system");
|
6
6
|
const pipe$1 = require("lodash/fp/pipe");
|
7
7
|
const reactIntl = require("react-intl");
|
8
|
-
const index = require("./index-
|
8
|
+
const index = require("./index-DFK7LwDW.js");
|
9
9
|
const fractionalIndexing = require("fractional-indexing");
|
10
|
-
const Relations = require("./Relations-
|
10
|
+
const Relations = require("./Relations-CNypkp-g.js");
|
11
11
|
const Icons = require("@strapi/icons");
|
12
|
-
const
|
12
|
+
const styledComponents = require("styled-components");
|
13
13
|
const ComponentIcon = require("./ComponentIcon-BBQsYCVn.js");
|
14
14
|
const reactDndHtml5Backend = require("react-dnd-html5-backend");
|
15
15
|
const useDragAndDrop = require("./useDragAndDrop-J0TUUbR6.js");
|
@@ -56,7 +56,6 @@ function _interopNamespace(e) {
|
|
56
56
|
}
|
57
57
|
const React__namespace = /* @__PURE__ */ _interopNamespace(React);
|
58
58
|
const pipe__default = /* @__PURE__ */ _interopDefault(pipe$1);
|
59
|
-
const styled__default = /* @__PURE__ */ _interopDefault(styled);
|
60
59
|
const Toolbar__namespace = /* @__PURE__ */ _interopNamespace(Toolbar);
|
61
60
|
const CodeMirror__default = /* @__PURE__ */ _interopDefault(CodeMirror);
|
62
61
|
const sanitizeHtml__default = /* @__PURE__ */ _interopDefault(sanitizeHtml);
|
@@ -258,7 +257,7 @@ const pressEnterTwiceToExit = (editor) => {
|
|
258
257
|
});
|
259
258
|
}
|
260
259
|
};
|
261
|
-
const CodeBlock =
|
260
|
+
const CodeBlock = styledComponents.styled.pre.attrs({ role: "code" })`
|
262
261
|
border-radius: ${({ theme }) => theme.borderRadius};
|
263
262
|
background-color: ${({ theme }) => theme.colors.neutral100};
|
264
263
|
max-width: 100%;
|
@@ -293,27 +292,27 @@ const codeBlocks = {
|
|
293
292
|
dragHandleTopMargin: "10px"
|
294
293
|
}
|
295
294
|
};
|
296
|
-
const H1 =
|
295
|
+
const H1 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h1" })`
|
297
296
|
font-size: 4.2rem;
|
298
297
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
299
298
|
`;
|
300
|
-
const H2 =
|
299
|
+
const H2 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h2" })`
|
301
300
|
font-size: 3.5rem;
|
302
301
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
303
302
|
`;
|
304
|
-
const H3 =
|
303
|
+
const H3 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h3" })`
|
305
304
|
font-size: 2.9rem;
|
306
305
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
307
306
|
`;
|
308
|
-
const H4 =
|
307
|
+
const H4 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h4" })`
|
309
308
|
font-size: 2.4rem;
|
310
309
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
311
310
|
`;
|
312
|
-
const H5 =
|
311
|
+
const H5 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h5" })`
|
313
312
|
font-size: 2rem;
|
314
313
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
315
314
|
`;
|
316
|
-
const H6 =
|
315
|
+
const H6 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h6" })`
|
317
316
|
font-size: 1.6rem;
|
318
317
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
319
318
|
`;
|
@@ -399,10 +398,10 @@ const headingBlocks = {
|
|
399
398
|
dragHandleTopMargin: "-2px"
|
400
399
|
}
|
401
400
|
};
|
402
|
-
const ImageWrapper =
|
401
|
+
const ImageWrapper = styledComponents.styled(designSystem.Flex)`
|
403
402
|
transition-property: box-shadow;
|
404
403
|
transition-duration: 0.2s;
|
405
|
-
${(props) => props
|
404
|
+
${(props) => props.$isFocused && styledComponents.css`
|
406
405
|
box-shadow: ${props.theme.colors.primary600} 0px 0px 0px 3px;
|
407
406
|
`}
|
408
407
|
|
@@ -454,7 +453,7 @@ const Image = ({ attributes, children, element }) => {
|
|
454
453
|
background: "neutral100",
|
455
454
|
contentEditable: false,
|
456
455
|
justifyContent: "center",
|
457
|
-
isFocused: editorIsFocused && imageIsSelected,
|
456
|
+
$isFocused: editorIsFocused && imageIsSelected,
|
458
457
|
hasRadius: true,
|
459
458
|
children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: url, alt: alternativeText, width, height })
|
460
459
|
}
|
@@ -610,11 +609,11 @@ const isLinkNode = (element) => {
|
|
610
609
|
const isListNode$1 = (element) => {
|
611
610
|
return element.type === "list";
|
612
611
|
};
|
613
|
-
const StyledBaseLink =
|
612
|
+
const StyledBaseLink = styledComponents.styled(designSystem.BaseLink)`
|
614
613
|
text-decoration: none;
|
615
614
|
`;
|
616
|
-
const RemoveButton =
|
617
|
-
visibility: ${(props) => props
|
615
|
+
const RemoveButton = styledComponents.styled(designSystem.Button)`
|
616
|
+
visibility: ${(props) => props.$visible ? "visible" : "hidden"};
|
618
617
|
`;
|
619
618
|
const LinkContent = React__namespace.forwardRef(
|
620
619
|
({ link, children, attributes }, forwardedRef) => {
|
@@ -682,14 +681,14 @@ const LinkContent = React__namespace.forwardRef(
|
|
682
681
|
children
|
683
682
|
}
|
684
683
|
),
|
685
|
-
popoverOpen && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover, { source: linkRef, onDismiss: handleDismiss, padding: 4, contentEditable: false, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, {
|
686
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field, { width: "368px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
|
687
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
684
|
+
popoverOpen && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover, { source: linkRef, onDismiss: handleDismiss, padding: 4, contentEditable: false, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "form", onSubmit: handleSave, direction: "column", gap: 4, children: [
|
685
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { width: "368px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
|
686
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
|
688
687
|
id: "components.Blocks.popover.text",
|
689
688
|
defaultMessage: "Text"
|
690
689
|
}) }),
|
691
690
|
/* @__PURE__ */ jsxRuntime.jsx(
|
692
|
-
designSystem.
|
691
|
+
designSystem.Field.Input,
|
693
692
|
{
|
694
693
|
name: "text",
|
695
694
|
placeholder: formatMessage({
|
@@ -703,13 +702,13 @@ const LinkContent = React__namespace.forwardRef(
|
|
703
702
|
}
|
704
703
|
)
|
705
704
|
] }) }),
|
706
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field, { width: "368px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
|
707
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
705
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { width: "368px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
|
706
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
|
708
707
|
id: "components.Blocks.popover.link",
|
709
708
|
defaultMessage: "Link"
|
710
709
|
}) }),
|
711
710
|
/* @__PURE__ */ jsxRuntime.jsx(
|
712
|
-
designSystem.
|
711
|
+
designSystem.Field.Input,
|
713
712
|
{
|
714
713
|
ref: linkInputRef,
|
715
714
|
name: "url",
|
@@ -728,7 +727,7 @@ const LinkContent = React__namespace.forwardRef(
|
|
728
727
|
{
|
729
728
|
variant: "danger-light",
|
730
729
|
onClick: () => removeLink(editor),
|
731
|
-
visible: showRemoveButton,
|
730
|
+
$visible: showRemoveButton,
|
732
731
|
children: formatMessage({
|
733
732
|
id: "components.Blocks.popover.remove",
|
734
733
|
defaultMessage: "Remove"
|
@@ -764,7 +763,7 @@ const linkBlocks = {
|
|
764
763
|
isInBlocksSelector: false
|
765
764
|
}
|
766
765
|
};
|
767
|
-
const listStyle =
|
766
|
+
const listStyle = styledComponents.css`
|
768
767
|
display: flex;
|
769
768
|
flex-direction: column;
|
770
769
|
gap: ${({ theme }) => theme.spaces[2]};
|
@@ -782,12 +781,12 @@ const listStyle = styled.css`
|
|
782
781
|
margin-inline-start: ${({ theme }) => theme.spaces[3]};
|
783
782
|
}
|
784
783
|
`;
|
785
|
-
const Orderedlist =
|
786
|
-
list-style-type: ${(props) => props
|
784
|
+
const Orderedlist = styledComponents.styled.ol`
|
785
|
+
list-style-type: ${(props) => props.$listStyleType};
|
787
786
|
${listStyle}
|
788
787
|
`;
|
789
|
-
const Unorderedlist =
|
790
|
-
list-style-type: ${(props) => props
|
788
|
+
const Unorderedlist = styledComponents.styled.ul`
|
789
|
+
list-style-type: ${(props) => props.$listStyleType};
|
791
790
|
${listStyle}
|
792
791
|
`;
|
793
792
|
const orderedStyles = ["decimal", "lower-alpha", "upper-roman"];
|
@@ -800,9 +799,9 @@ const List = ({ attributes, children, element }) => {
|
|
800
799
|
const nextIndex = (element.indentLevel || 0) % listStyles.length;
|
801
800
|
const listStyleType = listStyles[nextIndex];
|
802
801
|
if (element.format === "ordered") {
|
803
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Orderedlist, { listStyleType, ...attributes, children });
|
802
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Orderedlist, { $listStyleType: listStyleType, ...attributes, children });
|
804
803
|
}
|
805
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Unorderedlist, { listStyleType, ...attributes, children });
|
804
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Unorderedlist, { $listStyleType: listStyleType, ...attributes, children });
|
806
805
|
};
|
807
806
|
const replaceListWithEmptyBlock = (editor, currentListPath) => {
|
808
807
|
slate.Transforms.removeNodes(editor, { at: currentListPath });
|
@@ -999,7 +998,7 @@ const listBlocks = {
|
|
999
998
|
snippets: ["-", "*", "+"]
|
1000
999
|
},
|
1001
1000
|
"list-item": {
|
1002
|
-
renderElement: (props) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, {
|
1001
|
+
renderElement: (props) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "li", ...props.attributes, children: props.children }),
|
1003
1002
|
// No handleConvert, list items are created when converting to the parent list
|
1004
1003
|
matchNode: (node) => node.type === "list-item",
|
1005
1004
|
isInBlocksSelector: false,
|
@@ -1008,7 +1007,7 @@ const listBlocks = {
|
|
1008
1007
|
};
|
1009
1008
|
const paragraphBlocks = {
|
1010
1009
|
paragraph: {
|
1011
|
-
renderElement: (props) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, {
|
1010
|
+
renderElement: (props) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "p", variant: "omega", ...props.attributes, children: props.children }),
|
1012
1011
|
icon: Icons.Paragraph,
|
1013
1012
|
label: {
|
1014
1013
|
id: "components.Blocks.blocks.text",
|
@@ -1056,7 +1055,7 @@ const paragraphBlocks = {
|
|
1056
1055
|
}
|
1057
1056
|
}
|
1058
1057
|
};
|
1059
|
-
const Blockquote =
|
1058
|
+
const Blockquote = styledComponents.styled.blockquote.attrs({ role: "blockquote" })`
|
1060
1059
|
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
1061
1060
|
border-left: ${({ theme }) => `${theme.spaces[1]} solid ${theme.colors.neutral200}`};
|
1062
1061
|
padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};
|
@@ -1086,17 +1085,17 @@ const quoteBlocks = {
|
|
1086
1085
|
dragHandleTopMargin: "6px"
|
1087
1086
|
}
|
1088
1087
|
};
|
1089
|
-
const ToolbarWrapper =
|
1088
|
+
const ToolbarWrapper = styledComponents.styled(designSystem.Flex)`
|
1090
1089
|
&[aria-disabled='true'] {
|
1091
1090
|
cursor: not-allowed;
|
1092
1091
|
}
|
1093
1092
|
`;
|
1094
|
-
const Separator =
|
1093
|
+
const Separator = styledComponents.styled(Toolbar__namespace.Separator)`
|
1095
1094
|
background: ${({ theme }) => theme.colors.neutral150};
|
1096
1095
|
width: 1px;
|
1097
1096
|
height: 2.4rem;
|
1098
1097
|
`;
|
1099
|
-
const FlexButton =
|
1098
|
+
const FlexButton = styledComponents.styled(designSystem.Flex)`
|
1100
1099
|
// Inherit the not-allowed cursor from ToolbarWrapper when disabled
|
1101
1100
|
&[aria-disabled] {
|
1102
1101
|
cursor: inherit;
|
@@ -1111,7 +1110,7 @@ const FlexButton = styled__default.default(designSystem.Flex)`
|
|
1111
1110
|
}
|
1112
1111
|
}
|
1113
1112
|
`;
|
1114
|
-
const SelectWrapper =
|
1113
|
+
const SelectWrapper = styledComponents.styled(designSystem.Box)`
|
1115
1114
|
// Styling changes to SingleSelect component don't work, so adding wrapper to target SingleSelect
|
1116
1115
|
div[role='combobox'] {
|
1117
1116
|
border: none;
|
@@ -1174,7 +1173,7 @@ const ToolbarButton = ({
|
|
1174
1173
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
1175
1174
|
FlexButton,
|
1176
1175
|
{
|
1177
|
-
|
1176
|
+
tag: "button",
|
1178
1177
|
background: isActive ? "primary100" : "",
|
1179
1178
|
alignItems: "center",
|
1180
1179
|
justifyContent: "center",
|
@@ -1458,7 +1457,7 @@ const BlocksToolbar = () => {
|
|
1458
1457
|
] }) })
|
1459
1458
|
] }) });
|
1460
1459
|
};
|
1461
|
-
const StyledEditable =
|
1460
|
+
const StyledEditable = styledComponents.styled(slateReact.Editable)`
|
1462
1461
|
// The outline style is set on the wrapper with :focus-within
|
1463
1462
|
outline: none;
|
1464
1463
|
display: flex;
|
@@ -1473,20 +1472,20 @@ const StyledEditable = styled__default.default(slateReact.Editable)`
|
|
1473
1472
|
padding-bottom: ${({ theme }) => theme.spaces[3]};
|
1474
1473
|
}
|
1475
1474
|
`;
|
1476
|
-
const Wrapper$1 =
|
1475
|
+
const Wrapper$1 = styledComponents.styled(designSystem.Box)`
|
1477
1476
|
position: ${({ isOverDropTarget }) => isOverDropTarget && "relative"};
|
1478
1477
|
`;
|
1479
|
-
const DropPlaceholder =
|
1478
|
+
const DropPlaceholder = styledComponents.styled(designSystem.Box)`
|
1480
1479
|
position: absolute;
|
1481
1480
|
right: 0;
|
1482
1481
|
|
1483
1482
|
// Show drop placeholder 8px above or below the drop target
|
1484
|
-
${({ dragDirection, theme, placeholderMargin }) =>
|
1483
|
+
${({ dragDirection, theme, placeholderMargin }) => styledComponents.css`
|
1485
1484
|
top: ${dragDirection === useDragAndDrop.DIRECTIONS.UPWARD && `-${theme.spaces[placeholderMargin]}`};
|
1486
1485
|
bottom: ${dragDirection === useDragAndDrop.DIRECTIONS.DOWNWARD && `-${theme.spaces[placeholderMargin]}`};
|
1487
1486
|
`}
|
1488
1487
|
`;
|
1489
|
-
const DragItem =
|
1488
|
+
const DragItem = styledComponents.styled(designSystem.Flex)`
|
1490
1489
|
// Style each block rendered using renderElement()
|
1491
1490
|
& > [data-slate-node='element'] {
|
1492
1491
|
width: 100%;
|
@@ -1495,14 +1494,14 @@ const DragItem = styled__default.default(designSystem.Flex)`
|
|
1495
1494
|
|
1496
1495
|
// Set the visibility of drag button
|
1497
1496
|
[role='button'] {
|
1498
|
-
visibility: ${(props) => props
|
1497
|
+
visibility: ${(props) => props.$dragVisibility};
|
1499
1498
|
opacity: inherit;
|
1500
1499
|
}
|
1501
1500
|
&[aria-disabled='true'] {
|
1502
1501
|
user-drag: none;
|
1503
1502
|
}
|
1504
1503
|
`;
|
1505
|
-
const DragIconButton =
|
1504
|
+
const DragIconButton = styledComponents.styled(designSystem.IconButton)`
|
1506
1505
|
display: flex;
|
1507
1506
|
align-items: center;
|
1508
1507
|
justify-content: center;
|
@@ -1512,7 +1511,7 @@ const DragIconButton = styled__default.default(designSystem.IconButton)`
|
|
1512
1511
|
visibility: hidden;
|
1513
1512
|
cursor: grab;
|
1514
1513
|
opacity: inherit;
|
1515
|
-
margin-top: ${(props) => props
|
1514
|
+
margin-top: ${(props) => props.$dragHandleTopMargin ?? 0};
|
1516
1515
|
|
1517
1516
|
&:hover {
|
1518
1517
|
background: ${({ theme }) => theme.colors.neutral200};
|
@@ -1587,7 +1586,7 @@ const DragAndDropElement = ({
|
|
1587
1586
|
React__namespace.useEffect(() => {
|
1588
1587
|
setDragVisibility("hidden");
|
1589
1588
|
}, [editor.selection]);
|
1590
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$1, { ref:
|
1589
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$1, { ref: composedBoxRefs, isOverDropTarget, children: [
|
1591
1590
|
isOverDropTarget && /* @__PURE__ */ jsxRuntime.jsx(
|
1592
1591
|
DropPlaceholder,
|
1593
1592
|
{
|
@@ -1625,12 +1624,12 @@ const DragAndDropElement = ({
|
|
1625
1624
|
onSelect: () => setDragVisibility("visible"),
|
1626
1625
|
onMouseLeave: () => setDragVisibility("hidden"),
|
1627
1626
|
"aria-disabled": disabled,
|
1628
|
-
dragVisibility,
|
1627
|
+
$dragVisibility: dragVisibility,
|
1629
1628
|
children: [
|
1630
1629
|
/* @__PURE__ */ jsxRuntime.jsx(
|
1631
1630
|
DragIconButton,
|
1632
1631
|
{
|
1633
|
-
|
1632
|
+
tag: "div",
|
1634
1633
|
role: "button",
|
1635
1634
|
tabIndex: 0,
|
1636
1635
|
"aria-label": formatMessage({
|
@@ -1641,7 +1640,7 @@ const DragAndDropElement = ({
|
|
1641
1640
|
"aria-disabled": disabled,
|
1642
1641
|
disabled,
|
1643
1642
|
draggable: true,
|
1644
|
-
dragHandleTopMargin,
|
1643
|
+
$dragHandleTopMargin: dragHandleTopMargin,
|
1645
1644
|
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, { color: "neutral600" })
|
1646
1645
|
}
|
1647
1646
|
),
|
@@ -1653,17 +1652,17 @@ const DragAndDropElement = ({
|
|
1653
1652
|
};
|
1654
1653
|
const CloneDragItem = ({ children, dragHandleTopMargin }) => {
|
1655
1654
|
const { formatMessage } = reactIntl.useIntl();
|
1656
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", dragVisibility: "visible", children: [
|
1655
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", $dragVisibility: "visible", children: [
|
1657
1656
|
/* @__PURE__ */ jsxRuntime.jsx(
|
1658
1657
|
DragIconButton,
|
1659
1658
|
{
|
1660
|
-
|
1659
|
+
tag: "div",
|
1661
1660
|
role: "button",
|
1662
1661
|
"aria-label": formatMessage({
|
1663
1662
|
id: index.getTranslation("components.DragHandle-label"),
|
1664
1663
|
defaultMessage: "Drag"
|
1665
1664
|
}),
|
1666
|
-
dragHandleTopMargin,
|
1665
|
+
$dragHandleTopMargin: dragHandleTopMargin,
|
1667
1666
|
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, { color: "neutral600" })
|
1668
1667
|
}
|
1669
1668
|
),
|
@@ -1910,12 +1909,12 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
|
|
1910
1909
|
}
|
1911
1910
|
);
|
1912
1911
|
};
|
1913
|
-
const CollapseIconButton =
|
1912
|
+
const CollapseIconButton = styledComponents.styled(designSystem.IconButton)`
|
1914
1913
|
position: absolute;
|
1915
1914
|
bottom: 1.2rem;
|
1916
1915
|
right: 1.2rem;
|
1917
1916
|
`;
|
1918
|
-
const ExpandWrapper$1 =
|
1917
|
+
const ExpandWrapper$1 = styledComponents.styled(designSystem.Flex)`
|
1919
1918
|
// Background with 20% opacity
|
1920
1919
|
background: ${({ theme }) => `${theme.colors.neutral800}1F`};
|
1921
1920
|
`;
|
@@ -1980,13 +1979,13 @@ const EditorLayout$1 = ({
|
|
1980
1979
|
) }) });
|
1981
1980
|
}
|
1982
1981
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
1983
|
-
|
1982
|
+
InputWrapper,
|
1984
1983
|
{
|
1985
1984
|
direction: "column",
|
1986
1985
|
alignItems: "flex-start",
|
1987
1986
|
height: "512px",
|
1988
|
-
disabled,
|
1989
|
-
hasError: Boolean(error),
|
1987
|
+
$disabled: disabled,
|
1988
|
+
$hasError: Boolean(error),
|
1990
1989
|
style: { overflow: "hidden" },
|
1991
1990
|
"aria-describedby": ariaDescriptionId,
|
1992
1991
|
position: "relative",
|
@@ -1994,25 +1993,52 @@ const EditorLayout$1 = ({
|
|
1994
1993
|
}
|
1995
1994
|
);
|
1996
1995
|
};
|
1997
|
-
const
|
1996
|
+
const InputWrapper = styledComponents.styled(designSystem.Flex)`
|
1997
|
+
border: 1px solid
|
1998
|
+
${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
|
1999
|
+
border-radius: ${({ theme }) => theme.borderRadius};
|
2000
|
+
background: ${({ theme }) => theme.colors.neutral0};
|
2001
|
+
|
2002
|
+
${({ theme, $hasError = false }) => styledComponents.css`
|
2003
|
+
outline: none;
|
2004
|
+
box-shadow: 0;
|
2005
|
+
transition-property: border-color, box-shadow, fill;
|
2006
|
+
transition-duration: 0.2s;
|
2007
|
+
|
2008
|
+
&:focus-within {
|
2009
|
+
border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};
|
2010
|
+
box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;
|
2011
|
+
}
|
2012
|
+
`}
|
2013
|
+
|
2014
|
+
${({ theme, $disabled }) => $disabled ? styledComponents.css`
|
2015
|
+
color: ${theme.colors.neutral600};
|
2016
|
+
background: ${theme.colors.neutral150};
|
2017
|
+
` : void 0}
|
2018
|
+
`;
|
2019
|
+
const stylesToInherit = styledComponents.css`
|
1998
2020
|
font-size: inherit;
|
1999
2021
|
color: inherit;
|
2000
2022
|
line-height: inherit;
|
2001
2023
|
`;
|
2002
|
-
const BoldText =
|
2024
|
+
const BoldText = styledComponents.styled(designSystem.Typography).attrs({ fontWeight: "bold" })`
|
2003
2025
|
${stylesToInherit}
|
2004
2026
|
`;
|
2005
|
-
const ItalicText =
|
2027
|
+
const ItalicText = styledComponents.styled(designSystem.Typography)`
|
2006
2028
|
font-style: italic;
|
2007
2029
|
${stylesToInherit}
|
2008
2030
|
`;
|
2009
|
-
const UnderlineText =
|
2031
|
+
const UnderlineText = styledComponents.styled(designSystem.Typography).attrs({
|
2032
|
+
textDecoration: "underline"
|
2033
|
+
})`
|
2010
2034
|
${stylesToInherit}
|
2011
2035
|
`;
|
2012
|
-
const StrikeThroughText =
|
2036
|
+
const StrikeThroughText = styledComponents.styled(designSystem.Typography).attrs({
|
2037
|
+
textDecoration: "line-through"
|
2038
|
+
})`
|
2013
2039
|
${stylesToInherit}
|
2014
2040
|
`;
|
2015
|
-
const InlineCode =
|
2041
|
+
const InlineCode = styledComponents.styled.code`
|
2016
2042
|
background-color: ${({ theme }) => theme.colors.neutral150};
|
2017
2043
|
border-radius: ${({ theme }) => theme.borderRadius};
|
2018
2044
|
padding: ${({ theme }) => `0 ${theme.spaces[2]}`};
|
@@ -2182,10 +2208,10 @@ function useBlocksEditorContext(consumerName) {
|
|
2182
2208
|
editor
|
2183
2209
|
};
|
2184
2210
|
}
|
2185
|
-
const EditorDivider =
|
2211
|
+
const EditorDivider = styledComponents.styled(designSystem.Divider)`
|
2186
2212
|
background: ${({ theme }) => theme.colors.neutral200};
|
2187
2213
|
`;
|
2188
|
-
const ExpandIconButton =
|
2214
|
+
const ExpandIconButton = styledComponents.styled(designSystem.IconButton)`
|
2189
2215
|
position: absolute;
|
2190
2216
|
bottom: 1.2rem;
|
2191
2217
|
right: 1.2rem;
|
@@ -2300,8 +2326,8 @@ const BlocksInput = React__namespace.forwardRef(
|
|
2300
2326
|
({ label, name: name2, required = false, hint, labelAction, ...editorProps }, forwardedRef) => {
|
2301
2327
|
const id = React__namespace.useId();
|
2302
2328
|
const field = strapiAdmin.useField(name2);
|
2303
|
-
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field, { id, name: name2, hint, error: field.error, required, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
2304
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
2329
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { id, name: name2, hint, error: field.error, required, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
2330
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
|
2305
2331
|
/* @__PURE__ */ jsxRuntime.jsx(
|
2306
2332
|
BlocksEditor,
|
2307
2333
|
{
|
@@ -2314,8 +2340,8 @@ const BlocksInput = React__namespace.forwardRef(
|
|
2314
2340
|
...editorProps
|
2315
2341
|
}
|
2316
2342
|
),
|
2317
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
2318
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
2343
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
|
2344
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
|
2319
2345
|
] }) });
|
2320
2346
|
}
|
2321
2347
|
);
|
@@ -2346,7 +2372,7 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
|
|
2346
2372
|
/* @__PURE__ */ jsxRuntime.jsx(
|
2347
2373
|
designSystem.Box,
|
2348
2374
|
{
|
2349
|
-
|
2375
|
+
tag: "button",
|
2350
2376
|
background: "neutral100",
|
2351
2377
|
borderColor: field.error ? "danger600" : "neutral200",
|
2352
2378
|
hasRadius: true,
|
@@ -2367,7 +2393,7 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
|
|
2367
2393
|
field.error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", variant: "pi", children: field.error })
|
2368
2394
|
] });
|
2369
2395
|
};
|
2370
|
-
const CircleIcon =
|
2396
|
+
const CircleIcon = styledComponents.styled(Icons.PlusCircle)`
|
2371
2397
|
width: 2.4rem;
|
2372
2398
|
height: 2.4rem;
|
2373
2399
|
> circle {
|
@@ -2585,7 +2611,7 @@ const RepeatableComponent = ({
|
|
2585
2611
|
] })
|
2586
2612
|
] });
|
2587
2613
|
};
|
2588
|
-
const TextButtonCustom =
|
2614
|
+
const TextButtonCustom = styledComponents.styled(designSystem.TextButton)`
|
2589
2615
|
height: 100%;
|
2590
2616
|
width: 100%;
|
2591
2617
|
border-radius: 0 0 4px 4px;
|
@@ -2596,14 +2622,14 @@ const TextButtonCustom = styled__default.default(designSystem.TextButton)`
|
|
2596
2622
|
font-size: 14px;
|
2597
2623
|
}
|
2598
2624
|
`;
|
2599
|
-
const AccordionFooter =
|
2625
|
+
const AccordionFooter = styledComponents.styled(designSystem.Box)`
|
2600
2626
|
overflow: hidden;
|
2601
2627
|
border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
|
2602
2628
|
border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
|
2603
2629
|
border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
|
2604
2630
|
border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
|
2605
2631
|
`;
|
2606
|
-
const AccordionContent =
|
2632
|
+
const AccordionContent = styledComponents.styled(designSystem.Box)`
|
2607
2633
|
border-bottom: none;
|
2608
2634
|
|
2609
2635
|
/* add the borders and make sure the top is transparent to avoid jumping with the hover effect */
|
@@ -2639,40 +2665,21 @@ const AccordionGroup = ({ children, error }) => {
|
|
2639
2665
|
error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "danger600", children: error }) })
|
2640
2666
|
] });
|
2641
2667
|
};
|
2642
|
-
const CustomIconButton$1 =
|
2668
|
+
const CustomIconButton$1 = styledComponents.styled(designSystem.IconButton)`
|
2643
2669
|
background-color: transparent;
|
2644
|
-
|
2645
|
-
svg {
|
2646
|
-
path {
|
2647
|
-
fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600};
|
2648
|
-
}
|
2649
|
-
}
|
2670
|
+
color: ${({ theme, $expanded }) => $expanded ? theme.colors.primary600 : theme.colors.neutral600};
|
2650
2671
|
|
2651
2672
|
&:hover {
|
2652
|
-
|
2653
|
-
path {
|
2654
|
-
fill: ${({ theme }) => theme.colors.primary600};
|
2655
|
-
}
|
2656
|
-
}
|
2673
|
+
color: ${({ theme }) => theme.colors.primary600};
|
2657
2674
|
}
|
2658
2675
|
`;
|
2659
|
-
const ActionsFlex$1 =
|
2676
|
+
const ActionsFlex$1 = styledComponents.styled(designSystem.Flex)`
|
2660
2677
|
& .drag-handle {
|
2661
2678
|
background: unset;
|
2662
|
-
|
2663
|
-
svg {
|
2664
|
-
path {
|
2665
|
-
fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : void 0};
|
2666
|
-
}
|
2667
|
-
}
|
2679
|
+
color: ${({ theme, $expanded }) => $expanded ? theme.colors.primary600 : void 0};
|
2668
2680
|
|
2669
2681
|
&:hover {
|
2670
|
-
|
2671
|
-
path {
|
2672
|
-
/* keeps the hover style of the accordion */
|
2673
|
-
fill: ${({ theme }) => theme.colors.primary600};
|
2674
|
-
}
|
2675
|
-
}
|
2682
|
+
color: ${({ theme }) => theme.colors.primary600};
|
2676
2683
|
}
|
2677
2684
|
}
|
2678
2685
|
`;
|
@@ -2714,15 +2721,15 @@ const Component = ({
|
|
2714
2721
|
}, [dragPreviewRef, index$1]);
|
2715
2722
|
const composedAccordionRefs = designSystem.useComposedRefs(accordionRef, dragRef);
|
2716
2723
|
const composedBoxRefs = designSystem.useComposedRefs(boxRef, dropRef);
|
2717
|
-
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { ref:
|
2724
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { ref: composedBoxRefs, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview$1, {}) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion, { expanded: isOpen, onToggle: onClickToggle, id: name2, size: "S", children: [
|
2718
2725
|
/* @__PURE__ */ jsxRuntime.jsx(
|
2719
2726
|
designSystem.AccordionToggle,
|
2720
2727
|
{
|
2721
|
-
action: disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(ActionsFlex$1, { gap: 0, expanded: isOpen, children: [
|
2728
|
+
action: disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(ActionsFlex$1, { gap: 0, $expanded: isOpen, children: [
|
2722
2729
|
/* @__PURE__ */ jsxRuntime.jsx(
|
2723
2730
|
CustomIconButton$1,
|
2724
2731
|
{
|
2725
|
-
expanded: isOpen,
|
2732
|
+
$expanded: isOpen,
|
2726
2733
|
borderWidth: 0,
|
2727
2734
|
onClick: onDeleteComponent,
|
2728
2735
|
label: formatMessage({
|
@@ -2737,7 +2744,7 @@ const Component = ({
|
|
2737
2744
|
{
|
2738
2745
|
className: "drag-handle",
|
2739
2746
|
ref: composedAccordionRefs,
|
2740
|
-
|
2747
|
+
tag: "div",
|
2741
2748
|
role: "button",
|
2742
2749
|
borderWidth: 0,
|
2743
2750
|
tabIndex: 0,
|
@@ -2770,9 +2777,9 @@ const Component = ({
|
|
2770
2777
|
] }) });
|
2771
2778
|
};
|
2772
2779
|
const Preview$1 = () => {
|
2773
|
-
return /* @__PURE__ */ jsxRuntime.jsx(StyledSpan, {
|
2780
|
+
return /* @__PURE__ */ jsxRuntime.jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
|
2774
2781
|
};
|
2775
|
-
const StyledSpan =
|
2782
|
+
const StyledSpan = styledComponents.styled(designSystem.Box)`
|
2776
2783
|
display: block;
|
2777
2784
|
outline: 1px dashed ${({ theme }) => theme.colors.primary500};
|
2778
2785
|
outline-offset: -1px;
|
@@ -2806,7 +2813,7 @@ const ComponentInput = ({
|
|
2806
2813
|
htmlFor: name2,
|
2807
2814
|
variant: "pi",
|
2808
2815
|
fontWeight: "bold",
|
2809
|
-
|
2816
|
+
tag: "label",
|
2810
2817
|
children: [
|
2811
2818
|
label,
|
2812
2819
|
attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
@@ -2861,10 +2868,10 @@ const AddComponentButton = ({
|
|
2861
2868
|
paddingLeft: 4,
|
2862
2869
|
paddingRight: 4,
|
2863
2870
|
style: { cursor: isDisabled ? "not-allowed" : "pointer" },
|
2864
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, {
|
2871
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "span", gap: 2, children: [
|
2865
2872
|
/* @__PURE__ */ jsxRuntime.jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
|
2866
2873
|
/* @__PURE__ */ jsxRuntime.jsx(
|
2867
|
-
|
2874
|
+
AddComponentTitle,
|
2868
2875
|
{
|
2869
2876
|
variant: "pi",
|
2870
2877
|
fontWeight: "bold",
|
@@ -2876,7 +2883,7 @@ const AddComponentButton = ({
|
|
2876
2883
|
}
|
2877
2884
|
);
|
2878
2885
|
};
|
2879
|
-
const StyledAddIcon =
|
2886
|
+
const StyledAddIcon = styledComponents.styled(Icons.PlusCircle)`
|
2880
2887
|
height: ${({ theme }) => theme.spaces[6]};
|
2881
2888
|
width: ${({ theme }) => theme.spaces[6]};
|
2882
2889
|
transform: ${({ $isOpen }) => $isOpen ? "rotate(45deg)" : "rotate(0deg)"};
|
@@ -2888,13 +2895,14 @@ const StyledAddIcon = styled__default.default(Icons.PlusCircle)`
|
|
2888
2895
|
fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral600};
|
2889
2896
|
}
|
2890
2897
|
`;
|
2891
|
-
const
|
2898
|
+
const AddComponentTitle = styledComponents.styled(designSystem.Typography)``;
|
2899
|
+
const StyledButton = styledComponents.styled(designSystem.BaseButton)`
|
2892
2900
|
border-radius: 26px;
|
2893
2901
|
border-color: ${({ theme }) => theme.colors.neutral150};
|
2894
2902
|
box-shadow: ${({ theme }) => theme.shadows.filterShadow};
|
2895
2903
|
|
2896
2904
|
&:hover {
|
2897
|
-
${
|
2905
|
+
${AddComponentTitle} {
|
2898
2906
|
color: ${({ theme }) => theme.colors.primary600};
|
2899
2907
|
}
|
2900
2908
|
|
@@ -2908,7 +2916,7 @@ const StyledButton = styled__default.default(designSystem.BaseButton)`
|
|
2908
2916
|
}
|
2909
2917
|
}
|
2910
2918
|
&:active {
|
2911
|
-
${
|
2919
|
+
${AddComponentTitle} {
|
2912
2920
|
color: ${({ theme }) => theme.colors.primary600};
|
2913
2921
|
}
|
2914
2922
|
${StyledAddIcon} {
|
@@ -2945,7 +2953,7 @@ const ComponentCategory = ({
|
|
2945
2953
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsxRuntime.jsx(
|
2946
2954
|
ComponentBox,
|
2947
2955
|
{
|
2948
|
-
|
2956
|
+
tag: "button",
|
2949
2957
|
type: "button",
|
2950
2958
|
background: "neutral100",
|
2951
2959
|
justifyContent: "center",
|
@@ -2956,25 +2964,26 @@ const ComponentCategory = ({
|
|
2956
2964
|
borderColor: "neutral200",
|
2957
2965
|
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
|
2958
2966
|
/* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { icon }),
|
2959
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
2967
|
+
/* @__PURE__ */ jsxRuntime.jsx(ComponentName, { variant: "pi", fontWeight: "bold", textColor: "neutral600", children: displayName })
|
2960
2968
|
] })
|
2961
2969
|
},
|
2962
2970
|
uid
|
2963
2971
|
)) }) }) })
|
2964
2972
|
] });
|
2965
2973
|
};
|
2966
|
-
const Grid =
|
2974
|
+
const Grid = styledComponents.styled.div`
|
2967
2975
|
display: grid;
|
2968
2976
|
grid-template-columns: repeat(auto-fit, 14rem);
|
2969
2977
|
grid-gap: ${({ theme }) => theme.spaces[1]};
|
2970
2978
|
`;
|
2971
|
-
const
|
2979
|
+
const ComponentName = styledComponents.styled(designSystem.Typography)``;
|
2980
|
+
const ComponentBox = styledComponents.styled(designSystem.Flex)`
|
2972
2981
|
&:focus,
|
2973
2982
|
&:hover {
|
2974
2983
|
border: 1px solid ${({ theme }) => theme.colors.primary200};
|
2975
2984
|
background: ${({ theme }) => theme.colors.primary100};
|
2976
2985
|
|
2977
|
-
${
|
2986
|
+
${ComponentName} {
|
2978
2987
|
color: ${({ theme }) => theme.colors.primary600};
|
2979
2988
|
}
|
2980
2989
|
|
@@ -3062,7 +3071,7 @@ const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
|
|
3062
3071
|
}
|
3063
3072
|
);
|
3064
3073
|
};
|
3065
|
-
const StyledIcon =
|
3074
|
+
const StyledIcon = styledComponents.styled(Icons.EyeStriked)`
|
3066
3075
|
& > path {
|
3067
3076
|
fill: ${({ theme }) => theme.colors.neutral600};
|
3068
3077
|
}
|
@@ -3119,188 +3128,191 @@ const uidApi = index.contentManagerApi.injectEndpoints({
|
|
3119
3128
|
});
|
3120
3129
|
const { useGenerateUIDMutation, useGetDefaultUIDQuery, useGetAvailabilityQuery } = uidApi;
|
3121
3130
|
const UID_REGEX = /^[A-Za-z0-9-_.~]*$/;
|
3122
|
-
const UIDInput = React__namespace.forwardRef(
|
3123
|
-
|
3124
|
-
|
3125
|
-
|
3126
|
-
|
3127
|
-
|
3128
|
-
|
3129
|
-
|
3130
|
-
|
3131
|
-
|
3132
|
-
|
3133
|
-
|
3134
|
-
|
3135
|
-
|
3136
|
-
|
3137
|
-
|
3138
|
-
|
3139
|
-
|
3140
|
-
|
3141
|
-
field: props.name,
|
3142
|
-
data: {
|
3143
|
-
id: id ?? "",
|
3144
|
-
...allFormValues
|
3145
|
-
},
|
3146
|
-
params
|
3147
|
-
},
|
3148
|
-
{
|
3149
|
-
skip: field.value || !props.required
|
3150
|
-
}
|
3151
|
-
);
|
3152
|
-
React__namespace.useEffect(() => {
|
3153
|
-
if (apiError) {
|
3154
|
-
toggleNotification({
|
3155
|
-
type: "warning",
|
3156
|
-
message: formatAPIError(apiError)
|
3157
|
-
});
|
3158
|
-
}
|
3159
|
-
}, [apiError, formatAPIError, toggleNotification]);
|
3160
|
-
React__namespace.useEffect(() => {
|
3161
|
-
if (defaultGeneratedUID && field.value === void 0) {
|
3162
|
-
field.onChange(props.name, defaultGeneratedUID);
|
3163
|
-
}
|
3164
|
-
}, [defaultGeneratedUID, field, props.name]);
|
3165
|
-
const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
|
3166
|
-
const handleRegenerateClick = async () => {
|
3167
|
-
try {
|
3168
|
-
const res = await generateUID({
|
3131
|
+
const UIDInput = React__namespace.forwardRef(
|
3132
|
+
({ hint, label, labelAction, name: name2, required, ...props }, ref) => {
|
3133
|
+
const { model, id } = index.useDoc();
|
3134
|
+
const allFormValues = strapiAdmin.useForm("InputUID", (form) => form.values);
|
3135
|
+
const [availability, setAvailability] = React__namespace.useState();
|
3136
|
+
const [showRegenerate, setShowRegenerate] = React__namespace.useState(false);
|
3137
|
+
const field = strapiAdmin.useField(name2);
|
3138
|
+
const debouncedValue = useDebounce(field.value, 300);
|
3139
|
+
const { toggleNotification } = strapiAdmin.useNotification();
|
3140
|
+
const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
|
3141
|
+
const { formatMessage } = reactIntl.useIntl();
|
3142
|
+
const [{ query }] = strapiAdmin.useQueryParams();
|
3143
|
+
const params = React__namespace.useMemo(() => index.buildValidParams(query), [query]);
|
3144
|
+
const {
|
3145
|
+
data: defaultGeneratedUID,
|
3146
|
+
isLoading: isGeneratingDefaultUID,
|
3147
|
+
error: apiError
|
3148
|
+
} = useGetDefaultUIDQuery(
|
3149
|
+
{
|
3169
3150
|
contentTypeUID: model,
|
3170
|
-
field:
|
3171
|
-
data: {
|
3151
|
+
field: name2,
|
3152
|
+
data: {
|
3153
|
+
id: id ?? "",
|
3154
|
+
...allFormValues
|
3155
|
+
},
|
3172
3156
|
params
|
3173
|
-
}
|
3174
|
-
|
3175
|
-
field.
|
3176
|
-
}
|
3157
|
+
},
|
3158
|
+
{
|
3159
|
+
skip: field.value || !required
|
3160
|
+
}
|
3161
|
+
);
|
3162
|
+
React__namespace.useEffect(() => {
|
3163
|
+
if (apiError) {
|
3177
3164
|
toggleNotification({
|
3178
|
-
type: "
|
3179
|
-
message: formatAPIError(
|
3165
|
+
type: "warning",
|
3166
|
+
message: formatAPIError(apiError)
|
3180
3167
|
});
|
3181
3168
|
}
|
3182
|
-
}
|
3183
|
-
|
3184
|
-
|
3185
|
-
|
3186
|
-
|
3187
|
-
|
3188
|
-
|
3189
|
-
|
3190
|
-
|
3191
|
-
|
3192
|
-
|
3193
|
-
|
3194
|
-
|
3195
|
-
|
3196
|
-
|
3197
|
-
|
3198
|
-
|
3199
|
-
|
3200
|
-
|
3201
|
-
|
3202
|
-
|
3203
|
-
|
3204
|
-
|
3205
|
-
|
3206
|
-
|
3207
|
-
|
3208
|
-
|
3209
|
-
|
3210
|
-
|
3211
|
-
|
3212
|
-
|
3213
|
-
message: formatAPIError(availabilityError)
|
3214
|
-
});
|
3215
|
-
}
|
3216
|
-
}, [availabilityError, formatAPIError, toggleNotification]);
|
3217
|
-
React__namespace.useEffect(() => {
|
3218
|
-
setAvailability(availabilityData);
|
3219
|
-
let timer;
|
3220
|
-
if (availabilityData?.isAvailable) {
|
3221
|
-
timer = window.setTimeout(() => {
|
3222
|
-
setAvailability(void 0);
|
3223
|
-
}, 4e3);
|
3224
|
-
}
|
3225
|
-
return () => {
|
3226
|
-
if (timer) {
|
3227
|
-
clearTimeout(timer);
|
3169
|
+
}, [apiError, formatAPIError, toggleNotification]);
|
3170
|
+
React__namespace.useEffect(() => {
|
3171
|
+
if (defaultGeneratedUID && field.value === void 0) {
|
3172
|
+
field.onChange(name2, defaultGeneratedUID);
|
3173
|
+
}
|
3174
|
+
}, [defaultGeneratedUID, field, name2]);
|
3175
|
+
const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
|
3176
|
+
const handleRegenerateClick = async () => {
|
3177
|
+
try {
|
3178
|
+
const res = await generateUID({
|
3179
|
+
contentTypeUID: model,
|
3180
|
+
field: name2,
|
3181
|
+
data: { id: id ?? "", ...allFormValues },
|
3182
|
+
params
|
3183
|
+
});
|
3184
|
+
if ("data" in res) {
|
3185
|
+
field.onChange(name2, res.data);
|
3186
|
+
} else {
|
3187
|
+
toggleNotification({
|
3188
|
+
type: "danger",
|
3189
|
+
message: formatAPIError(res.error)
|
3190
|
+
});
|
3191
|
+
}
|
3192
|
+
} catch (err) {
|
3193
|
+
toggleNotification({
|
3194
|
+
type: "danger",
|
3195
|
+
message: formatMessage({
|
3196
|
+
id: "notification.error",
|
3197
|
+
defaultMessage: "An error occurred."
|
3198
|
+
})
|
3199
|
+
});
|
3228
3200
|
}
|
3229
3201
|
};
|
3230
|
-
|
3231
|
-
|
3232
|
-
|
3233
|
-
|
3234
|
-
|
3235
|
-
// @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
|
3236
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
3237
|
-
designSystem.TextInput,
|
3202
|
+
const {
|
3203
|
+
data: availabilityData,
|
3204
|
+
isLoading: isCheckingAvailability,
|
3205
|
+
error: availabilityError
|
3206
|
+
} = useGetAvailabilityQuery(
|
3238
3207
|
{
|
3239
|
-
|
3240
|
-
|
3241
|
-
|
3242
|
-
|
3243
|
-
|
3244
|
-
|
3245
|
-
|
3246
|
-
|
3247
|
-
|
3248
|
-
|
3249
|
-
|
3250
|
-
|
3251
|
-
|
3252
|
-
|
3253
|
-
|
3254
|
-
|
3255
|
-
|
3256
|
-
|
3257
|
-
|
3258
|
-
|
3259
|
-
|
3260
|
-
|
3261
|
-
|
3262
|
-
|
3263
|
-
|
3264
|
-
|
3265
|
-
|
3266
|
-
|
3267
|
-
|
3268
|
-
|
3269
|
-
|
3270
|
-
|
3271
|
-
|
3272
|
-
|
3273
|
-
|
3274
|
-
|
3275
|
-
|
3276
|
-
|
3277
|
-
|
3278
|
-
|
3279
|
-
|
3280
|
-
|
3281
|
-
|
3282
|
-
|
3208
|
+
contentTypeUID: model,
|
3209
|
+
field: name2,
|
3210
|
+
value: debouncedValue ? debouncedValue.trim() : "",
|
3211
|
+
params
|
3212
|
+
},
|
3213
|
+
{
|
3214
|
+
skip: !Boolean(
|
3215
|
+
debouncedValue !== field.initialValue && debouncedValue && UID_REGEX.test(debouncedValue.trim())
|
3216
|
+
)
|
3217
|
+
}
|
3218
|
+
);
|
3219
|
+
React__namespace.useEffect(() => {
|
3220
|
+
if (availabilityError) {
|
3221
|
+
toggleNotification({
|
3222
|
+
type: "warning",
|
3223
|
+
message: formatAPIError(availabilityError)
|
3224
|
+
});
|
3225
|
+
}
|
3226
|
+
}, [availabilityError, formatAPIError, toggleNotification]);
|
3227
|
+
React__namespace.useEffect(() => {
|
3228
|
+
setAvailability(availabilityData);
|
3229
|
+
let timer;
|
3230
|
+
if (availabilityData?.isAvailable) {
|
3231
|
+
timer = window.setTimeout(() => {
|
3232
|
+
setAvailability(void 0);
|
3233
|
+
}, 4e3);
|
3234
|
+
}
|
3235
|
+
return () => {
|
3236
|
+
if (timer) {
|
3237
|
+
clearTimeout(timer);
|
3238
|
+
}
|
3239
|
+
};
|
3240
|
+
}, [availabilityData]);
|
3241
|
+
const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
|
3242
|
+
const fieldRef = strapiAdmin.useFocusInputField(name2);
|
3243
|
+
const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
|
3244
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { hint, name: name2, error: field.error, required, children: [
|
3245
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
|
3246
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
3247
|
+
designSystem.TextInput,
|
3248
|
+
{
|
3249
|
+
ref: composedRefs,
|
3250
|
+
disabled: props.disabled,
|
3251
|
+
endAction: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { position: "relative", gap: 1, children: [
|
3252
|
+
availability && !showRegenerate && /* @__PURE__ */ jsxRuntime.jsxs(
|
3253
|
+
TextValidation,
|
3283
3254
|
{
|
3284
|
-
|
3285
|
-
|
3286
|
-
|
3287
|
-
|
3288
|
-
|
3289
|
-
|
3290
|
-
|
3291
|
-
|
3255
|
+
alignItems: "center",
|
3256
|
+
gap: 1,
|
3257
|
+
justifyContent: "flex-end",
|
3258
|
+
$available: !!availability?.isAvailable,
|
3259
|
+
"data-not-here-outer": true,
|
3260
|
+
position: "absolute",
|
3261
|
+
pointerEvents: "none",
|
3262
|
+
right: 6,
|
3263
|
+
width: "100px",
|
3264
|
+
children: [
|
3265
|
+
availability?.isAvailable ? /* @__PURE__ */ jsxRuntime.jsx(Icons.CheckCircle, {}) : /* @__PURE__ */ jsxRuntime.jsx(Icons.WarningCircle, {}),
|
3266
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
3267
|
+
designSystem.Typography,
|
3268
|
+
{
|
3269
|
+
textColor: availability.isAvailable ? "success600" : "danger600",
|
3270
|
+
variant: "pi",
|
3271
|
+
children: formatMessage(
|
3272
|
+
availability.isAvailable ? {
|
3273
|
+
id: "content-manager.components.uid.available",
|
3274
|
+
defaultMessage: "Available"
|
3275
|
+
} : {
|
3276
|
+
id: "content-manager.components.uid.unavailable",
|
3277
|
+
defaultMessage: "Unavailable"
|
3278
|
+
}
|
3279
|
+
)
|
3280
|
+
}
|
3281
|
+
)
|
3282
|
+
]
|
3292
3283
|
}
|
3293
|
-
)
|
3294
|
-
|
3295
|
-
|
3296
|
-
|
3297
|
-
|
3298
|
-
|
3299
|
-
|
3300
|
-
|
3301
|
-
|
3302
|
-
|
3303
|
-
|
3284
|
+
),
|
3285
|
+
!props.disabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
3286
|
+
showRegenerate && /* @__PURE__ */ jsxRuntime.jsx(TextValidation, { alignItems: "center", justifyContent: "flex-end", gap: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "primary600", variant: "pi", children: formatMessage({
|
3287
|
+
id: "content-manager.components.uid.regenerate",
|
3288
|
+
defaultMessage: "Regenerate"
|
3289
|
+
}) }) }),
|
3290
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
3291
|
+
FieldActionWrapper,
|
3292
|
+
{
|
3293
|
+
onClick: handleRegenerateClick,
|
3294
|
+
label: formatMessage({
|
3295
|
+
id: "content-manager.components.uid.regenerate",
|
3296
|
+
defaultMessage: "Regenerate"
|
3297
|
+
}),
|
3298
|
+
onMouseEnter: () => setShowRegenerate(true),
|
3299
|
+
onMouseLeave: () => setShowRegenerate(false),
|
3300
|
+
children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingWrapper, { "data-testid": "loading-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Loader, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.ArrowClockwise, {})
|
3301
|
+
}
|
3302
|
+
)
|
3303
|
+
] })
|
3304
|
+
] }),
|
3305
|
+
onChange: field.onChange,
|
3306
|
+
value: field.value ?? "",
|
3307
|
+
...props
|
3308
|
+
}
|
3309
|
+
),
|
3310
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {}),
|
3311
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
|
3312
|
+
] });
|
3313
|
+
}
|
3314
|
+
);
|
3315
|
+
const FieldActionWrapper = styledComponents.styled(designSystem.Field.Action)`
|
3304
3316
|
svg {
|
3305
3317
|
height: 1.6rem;
|
3306
3318
|
width: 1.6rem;
|
@@ -3315,17 +3327,17 @@ const FieldActionWrapper = styled__default.default(designSystem.FieldAction)`
|
|
3315
3327
|
}
|
3316
3328
|
}
|
3317
3329
|
`;
|
3318
|
-
const TextValidation =
|
3330
|
+
const TextValidation = styledComponents.styled(designSystem.Flex)`
|
3319
3331
|
svg {
|
3320
3332
|
height: 1.2rem;
|
3321
3333
|
width: 1.2rem;
|
3322
3334
|
|
3323
3335
|
path {
|
3324
|
-
fill: ${({ theme, available }) => available ? theme.colors.success600 : theme.colors.danger600};
|
3336
|
+
fill: ${({ theme, $available }) => $available ? theme.colors.success600 : theme.colors.danger600};
|
3325
3337
|
}
|
3326
3338
|
}
|
3327
3339
|
`;
|
3328
|
-
const rotation =
|
3340
|
+
const rotation = styledComponents.keyframes`
|
3329
3341
|
from {
|
3330
3342
|
transform: rotate(0deg);
|
3331
3343
|
}
|
@@ -3333,7 +3345,7 @@ const rotation = styled.keyframes`
|
|
3333
3345
|
transform: rotate(359deg);
|
3334
3346
|
}
|
3335
3347
|
`;
|
3336
|
-
const LoadingWrapper =
|
3348
|
+
const LoadingWrapper = styledComponents.styled(designSystem.Flex)`
|
3337
3349
|
animation: ${rotation} 2s infinite linear;
|
3338
3350
|
`;
|
3339
3351
|
const md = new Markdown__default.default({
|
@@ -3378,7 +3390,7 @@ const PreviewWysiwyg = ({ data = "" }) => {
|
|
3378
3390
|
);
|
3379
3391
|
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: html } }) });
|
3380
3392
|
};
|
3381
|
-
const Wrapper =
|
3393
|
+
const Wrapper = styledComponents.styled.div`
|
3382
3394
|
position: absolute;
|
3383
3395
|
top: 0;
|
3384
3396
|
width: 100%;
|
@@ -3670,17 +3682,17 @@ const Editor = React__namespace.forwardRef(
|
|
3670
3682
|
[editorRef]
|
3671
3683
|
);
|
3672
3684
|
return /* @__PURE__ */ jsxRuntime.jsxs(EditorAndPreviewWrapper, { children: [
|
3673
|
-
/* @__PURE__ */ jsxRuntime.jsx(EditorStylesContainer, { isExpandMode, disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsxRuntime.jsx("textarea", { ref: textareaRef }) }),
|
3685
|
+
/* @__PURE__ */ jsxRuntime.jsx(EditorStylesContainer, { $isExpandMode: isExpandMode, $disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsxRuntime.jsx("textarea", { ref: textareaRef }) }),
|
3674
3686
|
isPreviewMode && /* @__PURE__ */ jsxRuntime.jsx(PreviewWysiwyg, { data: value })
|
3675
3687
|
] });
|
3676
3688
|
}
|
3677
3689
|
);
|
3678
|
-
const EditorAndPreviewWrapper =
|
3690
|
+
const EditorAndPreviewWrapper = styledComponents.styled.div`
|
3679
3691
|
position: relative;
|
3680
3692
|
height: calc(100% - 48px);
|
3681
3693
|
`;
|
3682
|
-
const EditorStylesContainer =
|
3683
|
-
cursor: ${({ disabled }) => disabled ? "not-allowed !important" : "auto"};
|
3694
|
+
const EditorStylesContainer = styledComponents.styled.div`
|
3695
|
+
cursor: ${({ $disabled }) => $disabled ? "not-allowed !important" : "auto"};
|
3684
3696
|
height: 100%;
|
3685
3697
|
/* BASICS */
|
3686
3698
|
.CodeMirror-placeholder {
|
@@ -3690,7 +3702,7 @@ const EditorStylesContainer = styled__default.default.div`
|
|
3690
3702
|
.CodeMirror {
|
3691
3703
|
/* Set height, width, borders, and global font properties here */
|
3692
3704
|
font-size: 1.4rem;
|
3693
|
-
height: ${({ isExpandMode }) => isExpandMode ? "100%" : "410px"}; // 512px(total height) - 48px (header) - 52px(footer) - 2px border
|
3705
|
+
height: ${({ $isExpandMode }) => $isExpandMode ? "100%" : "410px"}; // 512px(total height) - 48px (header) - 52px(footer) - 2px border
|
3694
3706
|
color: ${({ theme }) => theme.colors.neutral800};
|
3695
3707
|
direction: ltr;
|
3696
3708
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
@@ -4096,13 +4108,13 @@ const EditorLayout = ({
|
|
4096
4108
|
}
|
4097
4109
|
);
|
4098
4110
|
};
|
4099
|
-
const ExpandWrapper =
|
4111
|
+
const ExpandWrapper = styledComponents.styled(designSystem.Flex)`
|
4100
4112
|
background: ${({ theme }) => `${theme.colors.neutral800}${Math.floor(0.2 * 255).toString(16).padStart(2, "0")}`};
|
4101
4113
|
`;
|
4102
|
-
const BoxWithBorder =
|
4114
|
+
const BoxWithBorder = styledComponents.styled(designSystem.Box)`
|
4103
4115
|
border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
|
4104
4116
|
`;
|
4105
|
-
const ExpandButton$1 =
|
4117
|
+
const ExpandButton$1 = styledComponents.styled(designSystem.BaseButton)`
|
4106
4118
|
background-color: transparent;
|
4107
4119
|
border: none;
|
4108
4120
|
align-items: center;
|
@@ -4373,7 +4385,7 @@ const quoteAndCodeHandler = (editor, markdownType) => {
|
|
4373
4385
|
insertWithoutTextToEdit(editor, markdownType, line, contentLength);
|
4374
4386
|
}
|
4375
4387
|
};
|
4376
|
-
const CustomIconButton =
|
4388
|
+
const CustomIconButton = styledComponents.styled(designSystem.IconButton)`
|
4377
4389
|
padding: ${({ theme }) => theme.spaces[2]};
|
4378
4390
|
/* Trick to prevent the outline from overflowing because of the general outline-offset */
|
4379
4391
|
outline-offset: -2px !important;
|
@@ -4383,16 +4395,16 @@ const CustomIconButton = styled__default.default(designSystem.IconButton)`
|
|
4383
4395
|
height: 1.8rem;
|
4384
4396
|
}
|
4385
4397
|
`;
|
4386
|
-
const CustomLinkIconButton =
|
4398
|
+
const CustomLinkIconButton = styledComponents.styled(CustomIconButton)`
|
4387
4399
|
svg {
|
4388
4400
|
width: 0.8rem;
|
4389
4401
|
height: 0.8rem;
|
4390
4402
|
}
|
4391
4403
|
`;
|
4392
|
-
const MainButtons =
|
4404
|
+
const MainButtons = styledComponents.styled(designSystem.IconButtonGroup)`
|
4393
4405
|
margin-left: ${({ theme }) => theme.spaces[4]};
|
4394
4406
|
`;
|
4395
|
-
const MoreButton =
|
4407
|
+
const MoreButton = styledComponents.styled(designSystem.IconButton)`
|
4396
4408
|
margin: ${({ theme }) => `0 ${theme.spaces[2]}`};
|
4397
4409
|
padding: ${({ theme }) => theme.spaces[2]};
|
4398
4410
|
|
@@ -4401,10 +4413,10 @@ const MoreButton = styled__default.default(designSystem.IconButton)`
|
|
4401
4413
|
height: 1.8rem;
|
4402
4414
|
}
|
4403
4415
|
`;
|
4404
|
-
const IconButtonGroupMargin =
|
4416
|
+
const IconButtonGroupMargin = styledComponents.styled(designSystem.IconButtonGroup)`
|
4405
4417
|
margin-right: ${({ theme }) => `${theme.spaces[2]}`};
|
4406
4418
|
`;
|
4407
|
-
const ExpandButton =
|
4419
|
+
const ExpandButton = styledComponents.styled(designSystem.BaseButton)`
|
4408
4420
|
background-color: transparent;
|
4409
4421
|
border: none;
|
4410
4422
|
align-items: center;
|
@@ -4456,15 +4468,24 @@ const WysiwygNav = ({
|
|
4456
4468
|
justifyContent: "space-between",
|
4457
4469
|
borderRadius: `0.4rem 0.4rem 0 0`,
|
4458
4470
|
children: [
|
4459
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
4460
|
-
/* @__PURE__ */ jsxRuntime.
|
4461
|
-
|
4462
|
-
|
4463
|
-
|
4464
|
-
|
4465
|
-
|
4466
|
-
|
4467
|
-
|
4471
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
|
4472
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
4473
|
+
designSystem.SingleSelect,
|
4474
|
+
{
|
4475
|
+
disabled: true,
|
4476
|
+
placeholder: selectPlaceholder,
|
4477
|
+
size: "S",
|
4478
|
+
"aria-label": selectPlaceholder,
|
4479
|
+
children: [
|
4480
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h1", children: "h1" }),
|
4481
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h2", children: "h2" }),
|
4482
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h3", children: "h3" }),
|
4483
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h4", children: "h4" }),
|
4484
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h5", children: "h5" }),
|
4485
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h6", children: "h6" })
|
4486
|
+
]
|
4487
|
+
}
|
4488
|
+
) }),
|
4468
4489
|
/* @__PURE__ */ jsxRuntime.jsxs(MainButtons, { children: [
|
4469
4490
|
/* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Bold", name: "Bold", icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {}) }),
|
4470
4491
|
/* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic", icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {}) }),
|
@@ -4488,12 +4509,12 @@ const WysiwygNav = ({
|
|
4488
4509
|
justifyContent: "space-between",
|
4489
4510
|
borderRadius: `0.4rem 0.4rem 0 0`,
|
4490
4511
|
children: [
|
4491
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
4492
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
4512
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
|
4513
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
4493
4514
|
designSystem.SingleSelect,
|
4494
4515
|
{
|
4495
4516
|
placeholder: selectPlaceholder,
|
4496
|
-
label: selectPlaceholder,
|
4517
|
+
"aria-label": selectPlaceholder,
|
4497
4518
|
size: "S",
|
4498
4519
|
onChange: (value) => onActionClick(value, editorRef),
|
4499
4520
|
children: [
|
@@ -4505,7 +4526,7 @@ const WysiwygNav = ({
|
|
4505
4526
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h6", children: "h6" })
|
4506
4527
|
]
|
4507
4528
|
}
|
4508
|
-
),
|
4529
|
+
) }),
|
4509
4530
|
/* @__PURE__ */ jsxRuntime.jsxs(MainButtons, { children: [
|
4510
4531
|
/* @__PURE__ */ jsxRuntime.jsx(
|
4511
4532
|
CustomIconButton,
|
@@ -4625,19 +4646,6 @@ const WysiwygNav = ({
|
|
4625
4646
|
}
|
4626
4647
|
);
|
4627
4648
|
};
|
4628
|
-
const StyledFlex = styled__default.default(designSystem.Flex)`
|
4629
|
-
/* Hide the label, every input needs a label. */
|
4630
|
-
label {
|
4631
|
-
border: 0;
|
4632
|
-
clip: rect(0 0 0 0);
|
4633
|
-
height: 1px;
|
4634
|
-
margin: -1px;
|
4635
|
-
overflow: hidden;
|
4636
|
-
padding: 0;
|
4637
|
-
position: absolute;
|
4638
|
-
width: 1px;
|
4639
|
-
}
|
4640
|
-
`;
|
4641
4649
|
const Wysiwyg = React__namespace.forwardRef(
|
4642
4650
|
({ hint, disabled, label, name: name2, placeholder, required, labelAction }, forwardedRef) => {
|
4643
4651
|
const field = strapiAdmin.useField(name2);
|
@@ -4702,9 +4710,9 @@ const Wysiwyg = React__namespace.forwardRef(
|
|
4702
4710
|
insertFile(editorRef, formattedFiles);
|
4703
4711
|
setMediaLibVisible(false);
|
4704
4712
|
};
|
4705
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field, { name: name2, hint, error: field.error, required, children: [
|
4713
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: name2, hint, error: field.error, required, children: [
|
4706
4714
|
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
4707
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
4715
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
|
4708
4716
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
4709
4717
|
EditorLayout,
|
4710
4718
|
{
|
@@ -4745,8 +4753,8 @@ const Wysiwyg = React__namespace.forwardRef(
|
|
4745
4753
|
]
|
4746
4754
|
}
|
4747
4755
|
),
|
4748
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
4749
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
4756
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
|
4757
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
|
4750
4758
|
] }),
|
4751
4759
|
mediaLibVisible && // @ts-expect-error – TODO: fix this way of injecting because it's not really typeable without a registry.
|
4752
4760
|
/* @__PURE__ */ jsxRuntime.jsx(MediaLibraryDialog, { onClose: handleToggleMediaLib, onSelectAssets: handleSelectAssets })
|
@@ -4965,7 +4973,7 @@ const DynamicComponent = ({
|
|
4965
4973
|
/* @__PURE__ */ jsxRuntime.jsx(
|
4966
4974
|
designSystem.IconButton,
|
4967
4975
|
{
|
4968
|
-
|
4976
|
+
tag: "div",
|
4969
4977
|
role: "button",
|
4970
4978
|
borderWidth: 0,
|
4971
4979
|
tabIndex: 0,
|
@@ -4983,7 +4991,7 @@ const DynamicComponent = ({
|
|
4983
4991
|
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Root, { children: [
|
4984
4992
|
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
|
4985
4993
|
/* @__PURE__ */ jsxRuntime.jsx(Icons.More, { "aria-hidden": true, focusable: false }),
|
4986
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, {
|
4994
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { tag: "span", children: formatMessage({
|
4987
4995
|
id: index.getTranslation("components.DynamicZone.more-actions"),
|
4988
4996
|
defaultMessage: "More actions"
|
4989
4997
|
}) })
|
@@ -5012,7 +5020,7 @@ const DynamicComponent = ({
|
|
5012
5020
|
] })
|
5013
5021
|
] })
|
5014
5022
|
] });
|
5015
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(ComponentContainer, {
|
5023
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
|
5016
5024
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Rectangle, { background: "neutral200" }) }),
|
5017
5025
|
/* @__PURE__ */ jsxRuntime.jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview, {}) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion, { expanded: isOpen, onToggle: handleToggle, size: "S", children: [
|
5018
5026
|
/* @__PURE__ */ jsxRuntime.jsx(
|
@@ -5031,7 +5039,7 @@ const DynamicComponent = ({
|
|
5031
5039
|
] }) })
|
5032
5040
|
] });
|
5033
5041
|
};
|
5034
|
-
const ActionsFlex =
|
5042
|
+
const ActionsFlex = styledComponents.styled(designSystem.Flex)`
|
5035
5043
|
/*
|
5036
5044
|
we need to remove the background from the button but we can't
|
5037
5045
|
wrap the element in styled because it breaks the forwardedAs which
|
@@ -5041,33 +5049,33 @@ const ActionsFlex = styled__default.default(designSystem.Flex)`
|
|
5041
5049
|
background: transparent;
|
5042
5050
|
}
|
5043
5051
|
`;
|
5044
|
-
const IconButtonCustom =
|
5052
|
+
const IconButtonCustom = styledComponents.styled(designSystem.IconButton)`
|
5045
5053
|
background-color: transparent;
|
5046
5054
|
|
5047
|
-
svg
|
5048
|
-
fill: ${({ theme
|
5055
|
+
svg {
|
5056
|
+
fill: ${({ theme }) => theme.colors.neutral600};
|
5049
5057
|
}
|
5050
5058
|
`;
|
5051
|
-
const StyledBox =
|
5059
|
+
const StyledBox = styledComponents.styled(designSystem.Box)`
|
5052
5060
|
> div:first-child {
|
5053
5061
|
box-shadow: ${({ theme }) => theme.shadows.tableShadow};
|
5054
5062
|
}
|
5055
5063
|
`;
|
5056
|
-
const AccordionContentRadius =
|
5064
|
+
const AccordionContentRadius = styledComponents.styled(designSystem.Box)`
|
5057
5065
|
border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
|
5058
5066
|
`;
|
5059
|
-
const Rectangle =
|
5067
|
+
const Rectangle = styledComponents.styled(designSystem.Box)`
|
5060
5068
|
width: ${({ theme }) => theme.spaces[2]};
|
5061
5069
|
height: ${({ theme }) => theme.spaces[4]};
|
5062
5070
|
`;
|
5063
|
-
const Preview =
|
5071
|
+
const Preview = styledComponents.styled.span`
|
5064
5072
|
display: block;
|
5065
5073
|
background-color: ${({ theme }) => theme.colors.primary100};
|
5066
5074
|
outline: 1px dashed ${({ theme }) => theme.colors.primary500};
|
5067
5075
|
outline-offset: -1px;
|
5068
5076
|
padding: ${({ theme }) => theme.spaces[6]};
|
5069
5077
|
`;
|
5070
|
-
const ComponentContainer =
|
5078
|
+
const ComponentContainer = styledComponents.styled(designSystem.Box)`
|
5071
5079
|
list-style: none;
|
5072
5080
|
padding: 0;
|
5073
5081
|
margin: 0;
|
@@ -5349,4 +5357,4 @@ exports.transformDocument = transformDocument;
|
|
5349
5357
|
exports.useDynamicZone = useDynamicZone;
|
5350
5358
|
exports.useFieldHint = useFieldHint;
|
5351
5359
|
exports.useLazyComponents = useLazyComponents;
|
5352
|
-
//# sourceMappingURL=Field-
|
5360
|
+
//# sourceMappingURL=Field-ZgzKlgxR.js.map
|