@strapi/content-manager 5.0.0-beta.6 → 5.0.0-beta.8
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--2aLCv-G.mjs → ComponentConfigurationPage-CuWgXugY.mjs} +3 -3
- package/dist/_chunks/{ComponentConfigurationPage--2aLCv-G.mjs.map → ComponentConfigurationPage-CuWgXugY.mjs.map} +1 -1
- package/dist/_chunks/{ComponentConfigurationPage-43KmCNQE.js → ComponentConfigurationPage-by0e_kNd.js} +3 -3
- package/dist/_chunks/{ComponentConfigurationPage-43KmCNQE.js.map → ComponentConfigurationPage-by0e_kNd.js.map} +1 -1
- package/dist/_chunks/{ComponentIcon-BBQsYCVn.js → ComponentIcon-BXdiCGQp.js} +8 -2
- package/dist/_chunks/ComponentIcon-BXdiCGQp.js.map +1 -0
- package/dist/_chunks/{ComponentIcon-BOFnK76n.mjs → ComponentIcon-u4bIXTFY.mjs} +9 -3
- package/dist/_chunks/ComponentIcon-u4bIXTFY.mjs.map +1 -0
- package/dist/_chunks/{EditConfigurationPage-BfFzJ4Br.js → EditConfigurationPage-CqBeCPGH.js} +3 -3
- package/dist/_chunks/{EditConfigurationPage-BfFzJ4Br.js.map → EditConfigurationPage-CqBeCPGH.js.map} +1 -1
- package/dist/_chunks/{EditConfigurationPage-CUcGHHvQ.mjs → EditConfigurationPage-DbI4KMyz.mjs} +3 -3
- package/dist/_chunks/{EditConfigurationPage-CUcGHHvQ.mjs.map → EditConfigurationPage-DbI4KMyz.mjs.map} +1 -1
- package/dist/_chunks/{EditViewPage-CzOT5Kpj.js → EditViewPage-ChgloMyO.js} +7 -9
- package/dist/_chunks/EditViewPage-ChgloMyO.js.map +1 -0
- package/dist/_chunks/{EditViewPage-Bm8lgcm6.mjs → EditViewPage-dFPBya9U.mjs} +6 -6
- package/dist/_chunks/EditViewPage-dFPBya9U.mjs.map +1 -0
- package/dist/_chunks/{Field-Dlh0uGnL.mjs → Field-C1nUKcdS.mjs} +500 -608
- package/dist/_chunks/Field-C1nUKcdS.mjs.map +1 -0
- package/dist/_chunks/{Field-Caef4JjM.js → Field-dLk-vgLL.js} +552 -661
- package/dist/_chunks/Field-dLk-vgLL.js.map +1 -0
- package/dist/_chunks/{Form-BzuAjtRq.js → Form-CbXtmHC_.js} +21 -19
- package/dist/_chunks/Form-CbXtmHC_.js.map +1 -0
- package/dist/_chunks/{Form-EnaQL_6L.mjs → Form-DOlpi7Js.mjs} +21 -18
- package/dist/_chunks/Form-DOlpi7Js.mjs.map +1 -0
- package/dist/_chunks/{History-D6sbCJvo.mjs → History-BFNUAiGc.mjs} +32 -43
- package/dist/_chunks/History-BFNUAiGc.mjs.map +1 -0
- package/dist/_chunks/{History-C17LiyRg.js → History-BjDfohBr.js} +32 -44
- package/dist/_chunks/History-BjDfohBr.js.map +1 -0
- package/dist/_chunks/{ListConfigurationPage-Ce4qs7qE.mjs → ListConfigurationPage-DDi0KqFm.mjs} +14 -14
- package/dist/_chunks/ListConfigurationPage-DDi0KqFm.mjs.map +1 -0
- package/dist/_chunks/{ListConfigurationPage-Dks5SX6f.js → ListConfigurationPage-IQBgWTaa.js} +17 -19
- package/dist/_chunks/ListConfigurationPage-IQBgWTaa.js.map +1 -0
- package/dist/_chunks/{ListViewPage-Be7S5aKL.mjs → ListViewPage-BPjljUsH.mjs} +25 -45
- package/dist/_chunks/ListViewPage-BPjljUsH.mjs.map +1 -0
- package/dist/_chunks/{ListViewPage-BwrZrPsh.js → ListViewPage-CZYGqlvF.js} +31 -51
- package/dist/_chunks/ListViewPage-CZYGqlvF.js.map +1 -0
- package/dist/_chunks/{NoContentTypePage-Cu5r1-JT.js → NoContentTypePage-BOAI6VZ1.js} +5 -5
- package/dist/_chunks/NoContentTypePage-BOAI6VZ1.js.map +1 -0
- package/dist/_chunks/{NoContentTypePage-CIPmYQMm.mjs → NoContentTypePage-DaWw67K-.mjs} +7 -7
- package/dist/_chunks/NoContentTypePage-DaWw67K-.mjs.map +1 -0
- package/dist/_chunks/{NoPermissionsPage-DhJ7LYrr.mjs → NoPermissionsPage-CZrJH00p.mjs} +5 -6
- package/dist/_chunks/NoPermissionsPage-CZrJH00p.mjs.map +1 -0
- package/dist/_chunks/{NoPermissionsPage-C-j6TEUF.js → NoPermissionsPage-cYEtLc_e.js} +4 -5
- package/dist/_chunks/NoPermissionsPage-cYEtLc_e.js.map +1 -0
- package/dist/_chunks/{Relations-CY7AtkDA.mjs → Relations-DTowyge2.mjs} +66 -56
- package/dist/_chunks/Relations-DTowyge2.mjs.map +1 -0
- package/dist/_chunks/{Relations-Czs-uZ-s.js → Relations-DU6B7irU.js} +70 -61
- package/dist/_chunks/Relations-DU6B7irU.js.map +1 -0
- package/dist/_chunks/{en-C-V1_90f.js → en-DTULi5-d.js} +3 -1
- package/dist/_chunks/{en-C-V1_90f.js.map → en-DTULi5-d.js.map} +1 -1
- package/dist/_chunks/{en-MBPul9Su.mjs → en-GCOTL6jR.mjs} +3 -1
- package/dist/_chunks/{en-MBPul9Su.mjs.map → en-GCOTL6jR.mjs.map} +1 -1
- package/dist/_chunks/{index-DNVx8ssZ.mjs → index-BaGHmIir.mjs} +507 -202
- package/dist/_chunks/index-BaGHmIir.mjs.map +1 -0
- package/dist/_chunks/{index-X_2tafck.js → index-CCJeB7Rw.js} +502 -198
- package/dist/_chunks/index-CCJeB7Rw.js.map +1 -0
- package/dist/_chunks/{layout-Dnh0PNp9.mjs → layout-BinjszSQ.mjs} +13 -13
- package/dist/_chunks/layout-BinjszSQ.mjs.map +1 -0
- package/dist/_chunks/{layout-dBc7wN7L.js → layout-ni_L9kT1.js} +14 -16
- package/dist/_chunks/layout-ni_L9kT1.js.map +1 -0
- package/dist/_chunks/{relations-4pHtBrHJ.js → relations-CeJAJc5I.js} +2 -2
- package/dist/_chunks/{relations-4pHtBrHJ.js.map → relations-CeJAJc5I.js.map} +1 -1
- package/dist/_chunks/{relations-Dx7tMKJN.mjs → relations-c91ji5eR.mjs} +2 -2
- package/dist/_chunks/{relations-Dx7tMKJN.mjs.map → relations-c91ji5eR.mjs.map} +1 -1
- package/dist/_chunks/useDragAndDrop-DdHgKsqq.mjs.map +1 -1
- package/dist/_chunks/useDragAndDrop-J0TUUbR6.js.map +1 -1
- package/dist/_chunks/usePrev-B9w_-eYc.js +15 -0
- package/dist/_chunks/usePrev-B9w_-eYc.js.map +1 -0
- package/dist/_chunks/usePrev-DH6iah0A.mjs +16 -0
- package/dist/_chunks/usePrev-DH6iah0A.mjs.map +1 -0
- package/dist/admin/index.js +2 -1
- package/dist/admin/index.js.map +1 -1
- package/dist/admin/index.mjs +5 -4
- package/dist/admin/src/components/ComponentIcon.d.ts +6 -3
- package/dist/admin/src/content-manager.d.ts +3 -3
- package/dist/admin/src/exports.d.ts +1 -0
- package/dist/admin/src/history/services/historyVersion.d.ts +1 -1
- package/dist/admin/src/hooks/useDocument.d.ts +5 -8
- package/dist/admin/src/hooks/useDocumentActions.d.ts +24 -3
- package/dist/admin/src/hooks/useDocumentLayout.d.ts +2 -2
- 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/DocumentActions.d.ts +3 -1
- package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksInput.d.ts +3 -3
- package/dist/admin/src/pages/EditView/components/FormInputs/Component/Input.d.ts +2 -2
- package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.d.ts +3 -5
- package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/Field.d.ts +1 -1
- package/dist/admin/src/pages/EditView/components/FormInputs/Relations.d.ts +10 -18
- package/dist/admin/src/pages/EditView/components/FormInputs/UID.d.ts +2 -2
- package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.d.ts +3 -49
- package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/Field.d.ts +2 -2
- package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/WysiwygStyles.d.ts +67 -52
- package/dist/admin/src/pages/EditView/components/InputRenderer.d.ts +2 -10
- package/dist/admin/src/services/api.d.ts +2 -3
- package/dist/admin/src/services/components.d.ts +2 -2
- package/dist/admin/src/services/contentTypes.d.ts +5 -5
- package/dist/admin/src/services/documents.d.ts +29 -17
- package/dist/admin/src/services/init.d.ts +2 -2
- package/dist/admin/src/services/relations.d.ts +3 -3
- package/dist/admin/src/services/uid.d.ts +3 -3
- package/dist/admin/src/utils/api.d.ts +4 -18
- package/dist/admin/src/utils/validation.d.ts +1 -6
- package/dist/server/index.js +529 -407
- package/dist/server/index.js.map +1 -1
- package/dist/server/index.mjs +537 -415
- 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/single-types.d.ts.map +1 -1
- package/dist/server/src/controllers/utils/metadata.d.ts +8 -0
- package/dist/server/src/controllers/utils/metadata.d.ts.map +1 -0
- package/dist/server/src/controllers/validation/dimensions.d.ts +9 -0
- package/dist/server/src/controllers/validation/dimensions.d.ts.map +1 -0
- 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 +18 -39
- package/dist/server/src/index.d.ts.map +1 -1
- package/dist/server/src/services/document-manager.d.ts +13 -12
- package/dist/server/src/services/document-manager.d.ts.map +1 -1
- package/dist/server/src/services/document-metadata.d.ts +8 -29
- package/dist/server/src/services/document-metadata.d.ts.map +1 -1
- package/dist/server/src/services/index.d.ts +18 -39
- package/dist/server/src/services/index.d.ts.map +1 -1
- package/dist/server/src/services/utils/populate.d.ts +8 -1
- package/dist/server/src/services/utils/populate.d.ts.map +1 -1
- package/dist/shared/contracts/collection-types.d.ts +14 -6
- package/dist/shared/contracts/collection-types.d.ts.map +1 -1
- package/dist/shared/contracts/relations.d.ts +2 -2
- package/dist/shared/contracts/relations.d.ts.map +1 -1
- package/package.json +13 -14
- package/dist/_chunks/CardDragPreview-DSVYodBX.js.map +0 -1
- package/dist/_chunks/CardDragPreview-ikSG4M46.mjs.map +0 -1
- package/dist/_chunks/ComponentIcon-BBQsYCVn.js.map +0 -1
- package/dist/_chunks/ComponentIcon-BOFnK76n.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
- package/dist/_chunks/urls-CbOsUOoW.mjs +0 -7
- package/dist/_chunks/urls-CbOsUOoW.mjs.map +0 -1
- package/dist/_chunks/urls-DzZya_gm.js +0 -6
- package/dist/_chunks/urls-DzZya_gm.js.map +0 -1
- package/dist/admin/src/pages/ListView/components/BulkActions/PublishAction.d.ts +0 -31
- package/dist/server/src/controllers/utils/dimensions.d.ts +0 -5
- package/dist/server/src/controllers/utils/dimensions.d.ts.map +0 -1
@@ -1,23 +1,23 @@
|
|
1
1
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
2
2
|
import * as React from "react";
|
3
|
-
import { useState, useEffect, useCallback } from "react";
|
3
|
+
import { useState, useEffect, useCallback, memo } from "react";
|
4
4
|
import { useStrapiApp, createContext, useField, useNotification, useForm, useAPIErrorHandler, useQueryParams, useFocusInputField, InputRenderer as InputRenderer$1 } from "@strapi/admin/strapi-admin";
|
5
|
-
import { Typography, Flex, Box, BaseLink, Button, useComposedRefs, Popover, Field,
|
5
|
+
import { Typography, Flex, Box, BaseLink, Button, useComposedRefs, Popover, Field, Tooltip, SingleSelect, SingleSelectOption, IconButton, Portal, FocusTrap, Divider, VisuallyHidden, Grid as Grid$1, GridItem, Accordion, TextButton, BaseButton, TextInput, IconButtonGroup, Menu, MenuItem } from "@strapi/design-system";
|
6
6
|
import pipe$1 from "lodash/fp/pipe";
|
7
7
|
import { useIntl } from "react-intl";
|
8
|
-
import { l as DOCUMENT_META_FIELDS, g as getTranslation, b as useDoc, d as contentManagerApi, c as buildValidParams, e as useDocumentRBAC, m as useDocLayout } from "./index-
|
8
|
+
import { l as DOCUMENT_META_FIELDS, g as getTranslation, b as useDoc, d as contentManagerApi, c as buildValidParams, e as useDocumentRBAC, m as useDocLayout } from "./index-BaGHmIir.mjs";
|
9
9
|
import { generateNKeysBetween } from "fractional-indexing";
|
10
|
-
import { u as useComponent, C as ComponentProvider,
|
10
|
+
import { u as useComponent, C as ComponentProvider, M as MemoizedRelationsField } from "./Relations-DTowyge2.mjs";
|
11
11
|
import { Code, HeadingOne, HeadingTwo, HeadingThree, HeadingFour, HeadingFive, HeadingSix, Image as Image$1, NumberList, BulletList, Paragraph, Quotes, Link as Link$1, Drag, Collapse, Bold, Italic, Underline, StrikeThrough, Expand, PlusCircle, Plus, Trash, EyeStriked, CheckCircle, WarningCircle, Loader, ArrowClockwise, More } from "@strapi/icons";
|
12
|
-
import styled,
|
13
|
-
import { C as ComponentIcon } from "./ComponentIcon-
|
12
|
+
import { styled, css, keyframes } from "styled-components";
|
13
|
+
import { C as ComponentIcon, a as COMPONENT_ICONS } from "./ComponentIcon-u4bIXTFY.mjs";
|
14
14
|
import { getEmptyImage } from "react-dnd-html5-backend";
|
15
15
|
import { a as DIRECTIONS, u as useDragAndDrop, I as ItemTypes } from "./useDragAndDrop-DdHgKsqq.mjs";
|
16
16
|
import { g as getIn } from "./objects-mKMAmfec.mjs";
|
17
17
|
import { Editor as Editor$1, Transforms, Node, Element, Range, Path, Point, createEditor } from "slate";
|
18
18
|
import { withHistory } from "slate-history";
|
19
19
|
import { useFocused, useSelected, ReactEditor, Editable, useSlate, Slate, withReact } from "slate-react";
|
20
|
-
import { p as prefixFileUrlWithBackendUrl } from "./
|
20
|
+
import { p as prefixFileUrlWithBackendUrl, u as usePrev } from "./usePrev-DH6iah0A.mjs";
|
21
21
|
import * as Toolbar from "@radix-ui/react-toolbar";
|
22
22
|
import { useLocation } from "react-router-dom";
|
23
23
|
import CodeMirror from "codemirror5";
|
@@ -223,7 +223,7 @@ const pressEnterTwiceToExit = (editor) => {
|
|
223
223
|
});
|
224
224
|
}
|
225
225
|
};
|
226
|
-
const CodeBlock = styled.pre
|
226
|
+
const CodeBlock = styled.pre`
|
227
227
|
border-radius: ${({ theme }) => theme.borderRadius};
|
228
228
|
background-color: ${({ theme }) => theme.colors.neutral100};
|
229
229
|
max-width: 100%;
|
@@ -258,27 +258,27 @@ const codeBlocks = {
|
|
258
258
|
dragHandleTopMargin: "10px"
|
259
259
|
}
|
260
260
|
};
|
261
|
-
const H1 = styled(Typography).attrs({
|
261
|
+
const H1 = styled(Typography).attrs({ tag: "h1" })`
|
262
262
|
font-size: 4.2rem;
|
263
263
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
264
264
|
`;
|
265
|
-
const H2 = styled(Typography).attrs({
|
265
|
+
const H2 = styled(Typography).attrs({ tag: "h2" })`
|
266
266
|
font-size: 3.5rem;
|
267
267
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
268
268
|
`;
|
269
|
-
const H3 = styled(Typography).attrs({
|
269
|
+
const H3 = styled(Typography).attrs({ tag: "h3" })`
|
270
270
|
font-size: 2.9rem;
|
271
271
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
272
272
|
`;
|
273
|
-
const H4 = styled(Typography).attrs({
|
273
|
+
const H4 = styled(Typography).attrs({ tag: "h4" })`
|
274
274
|
font-size: 2.4rem;
|
275
275
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
276
276
|
`;
|
277
|
-
const H5 = styled(Typography).attrs({
|
277
|
+
const H5 = styled(Typography).attrs({ tag: "h5" })`
|
278
278
|
font-size: 2rem;
|
279
279
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
280
280
|
`;
|
281
|
-
const H6 = styled(Typography).attrs({
|
281
|
+
const H6 = styled(Typography).attrs({ tag: "h6" })`
|
282
282
|
font-size: 1.6rem;
|
283
283
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
284
284
|
`;
|
@@ -367,7 +367,7 @@ const headingBlocks = {
|
|
367
367
|
const ImageWrapper = styled(Flex)`
|
368
368
|
transition-property: box-shadow;
|
369
369
|
transition-duration: 0.2s;
|
370
|
-
${(props) => props
|
370
|
+
${(props) => props.$isFocused && css`
|
371
371
|
box-shadow: ${props.theme.colors.primary600} 0px 0px 0px 3px;
|
372
372
|
`}
|
373
373
|
|
@@ -419,7 +419,7 @@ const Image = ({ attributes, children, element }) => {
|
|
419
419
|
background: "neutral100",
|
420
420
|
contentEditable: false,
|
421
421
|
justifyContent: "center",
|
422
|
-
isFocused: editorIsFocused && imageIsSelected,
|
422
|
+
$isFocused: editorIsFocused && imageIsSelected,
|
423
423
|
hasRadius: true,
|
424
424
|
children: /* @__PURE__ */ jsx("img", { src: url, alt: alternativeText, width, height })
|
425
425
|
}
|
@@ -579,7 +579,7 @@ const StyledBaseLink = styled(BaseLink)`
|
|
579
579
|
text-decoration: none;
|
580
580
|
`;
|
581
581
|
const RemoveButton = styled(Button)`
|
582
|
-
visibility: ${(props) => props
|
582
|
+
visibility: ${(props) => props.$visible ? "visible" : "hidden"};
|
583
583
|
`;
|
584
584
|
const LinkContent = React.forwardRef(
|
585
585
|
({ link, children, attributes }, forwardedRef) => {
|
@@ -647,14 +647,14 @@ const LinkContent = React.forwardRef(
|
|
647
647
|
children
|
648
648
|
}
|
649
649
|
),
|
650
|
-
popoverOpen && /* @__PURE__ */ jsx(Popover, { source: linkRef, onDismiss: handleDismiss, padding: 4, contentEditable: false, children: /* @__PURE__ */ jsxs(Flex, {
|
651
|
-
/* @__PURE__ */ jsx(Field, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
|
652
|
-
/* @__PURE__ */ jsx(
|
650
|
+
popoverOpen && /* @__PURE__ */ jsx(Popover, { source: linkRef, onDismiss: handleDismiss, padding: 4, contentEditable: false, children: /* @__PURE__ */ jsxs(Flex, { tag: "form", onSubmit: handleSave, direction: "column", gap: 4, children: [
|
651
|
+
/* @__PURE__ */ jsx(Field.Root, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
|
652
|
+
/* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
|
653
653
|
id: "components.Blocks.popover.text",
|
654
654
|
defaultMessage: "Text"
|
655
655
|
}) }),
|
656
656
|
/* @__PURE__ */ jsx(
|
657
|
-
|
657
|
+
Field.Input,
|
658
658
|
{
|
659
659
|
name: "text",
|
660
660
|
placeholder: formatMessage({
|
@@ -668,13 +668,13 @@ const LinkContent = React.forwardRef(
|
|
668
668
|
}
|
669
669
|
)
|
670
670
|
] }) }),
|
671
|
-
/* @__PURE__ */ jsx(Field, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
|
672
|
-
/* @__PURE__ */ jsx(
|
671
|
+
/* @__PURE__ */ jsx(Field.Root, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
|
672
|
+
/* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
|
673
673
|
id: "components.Blocks.popover.link",
|
674
674
|
defaultMessage: "Link"
|
675
675
|
}) }),
|
676
676
|
/* @__PURE__ */ jsx(
|
677
|
-
|
677
|
+
Field.Input,
|
678
678
|
{
|
679
679
|
ref: linkInputRef,
|
680
680
|
name: "url",
|
@@ -693,7 +693,7 @@ const LinkContent = React.forwardRef(
|
|
693
693
|
{
|
694
694
|
variant: "danger-light",
|
695
695
|
onClick: () => removeLink(editor),
|
696
|
-
visible: showRemoveButton,
|
696
|
+
$visible: showRemoveButton,
|
697
697
|
children: formatMessage({
|
698
698
|
id: "components.Blocks.popover.remove",
|
699
699
|
defaultMessage: "Remove"
|
@@ -748,11 +748,11 @@ const listStyle = css`
|
|
748
748
|
}
|
749
749
|
`;
|
750
750
|
const Orderedlist = styled.ol`
|
751
|
-
list-style-type: ${(props) => props
|
751
|
+
list-style-type: ${(props) => props.$listStyleType};
|
752
752
|
${listStyle}
|
753
753
|
`;
|
754
754
|
const Unorderedlist = styled.ul`
|
755
|
-
list-style-type: ${(props) => props
|
755
|
+
list-style-type: ${(props) => props.$listStyleType};
|
756
756
|
${listStyle}
|
757
757
|
`;
|
758
758
|
const orderedStyles = ["decimal", "lower-alpha", "upper-roman"];
|
@@ -765,9 +765,9 @@ const List = ({ attributes, children, element }) => {
|
|
765
765
|
const nextIndex = (element.indentLevel || 0) % listStyles.length;
|
766
766
|
const listStyleType = listStyles[nextIndex];
|
767
767
|
if (element.format === "ordered") {
|
768
|
-
return /* @__PURE__ */ jsx(Orderedlist, { listStyleType, ...attributes, children });
|
768
|
+
return /* @__PURE__ */ jsx(Orderedlist, { $listStyleType: listStyleType, ...attributes, children });
|
769
769
|
}
|
770
|
-
return /* @__PURE__ */ jsx(Unorderedlist, { listStyleType, ...attributes, children });
|
770
|
+
return /* @__PURE__ */ jsx(Unorderedlist, { $listStyleType: listStyleType, ...attributes, children });
|
771
771
|
};
|
772
772
|
const replaceListWithEmptyBlock = (editor, currentListPath) => {
|
773
773
|
Transforms.removeNodes(editor, { at: currentListPath });
|
@@ -964,7 +964,7 @@ const listBlocks = {
|
|
964
964
|
snippets: ["-", "*", "+"]
|
965
965
|
},
|
966
966
|
"list-item": {
|
967
|
-
renderElement: (props) => /* @__PURE__ */ jsx(Typography, {
|
967
|
+
renderElement: (props) => /* @__PURE__ */ jsx(Typography, { tag: "li", ...props.attributes, children: props.children }),
|
968
968
|
// No handleConvert, list items are created when converting to the parent list
|
969
969
|
matchNode: (node) => node.type === "list-item",
|
970
970
|
isInBlocksSelector: false,
|
@@ -973,7 +973,7 @@ const listBlocks = {
|
|
973
973
|
};
|
974
974
|
const paragraphBlocks = {
|
975
975
|
paragraph: {
|
976
|
-
renderElement: (props) => /* @__PURE__ */ jsx(Typography, {
|
976
|
+
renderElement: (props) => /* @__PURE__ */ jsx(Typography, { tag: "p", variant: "omega", ...props.attributes, children: props.children }),
|
977
977
|
icon: Paragraph,
|
978
978
|
label: {
|
979
979
|
id: "components.Blocks.blocks.text",
|
@@ -1139,7 +1139,7 @@ const ToolbarButton = ({
|
|
1139
1139
|
children: /* @__PURE__ */ jsx(
|
1140
1140
|
FlexButton,
|
1141
1141
|
{
|
1142
|
-
|
1142
|
+
tag: "button",
|
1143
1143
|
background: isActive ? "primary100" : "",
|
1144
1144
|
alignItems: "center",
|
1145
1145
|
justifyContent: "center",
|
@@ -1460,7 +1460,7 @@ const DragItem = styled(Flex)`
|
|
1460
1460
|
|
1461
1461
|
// Set the visibility of drag button
|
1462
1462
|
[role='button'] {
|
1463
|
-
visibility: ${(props) => props
|
1463
|
+
visibility: ${(props) => props.$dragVisibility};
|
1464
1464
|
opacity: inherit;
|
1465
1465
|
}
|
1466
1466
|
&[aria-disabled='true'] {
|
@@ -1477,7 +1477,7 @@ const DragIconButton = styled(IconButton)`
|
|
1477
1477
|
visibility: hidden;
|
1478
1478
|
cursor: grab;
|
1479
1479
|
opacity: inherit;
|
1480
|
-
margin-top: ${(props) => props
|
1480
|
+
margin-top: ${(props) => props.$dragHandleTopMargin ?? 0};
|
1481
1481
|
|
1482
1482
|
&:hover {
|
1483
1483
|
background: ${({ theme }) => theme.colors.neutral200};
|
@@ -1552,7 +1552,7 @@ const DragAndDropElement = ({
|
|
1552
1552
|
React.useEffect(() => {
|
1553
1553
|
setDragVisibility("hidden");
|
1554
1554
|
}, [editor.selection]);
|
1555
|
-
return /* @__PURE__ */ jsxs(Wrapper$1, { ref:
|
1555
|
+
return /* @__PURE__ */ jsxs(Wrapper$1, { ref: composedBoxRefs, isOverDropTarget, children: [
|
1556
1556
|
isOverDropTarget && /* @__PURE__ */ jsx(
|
1557
1557
|
DropPlaceholder,
|
1558
1558
|
{
|
@@ -1590,15 +1590,16 @@ const DragAndDropElement = ({
|
|
1590
1590
|
onSelect: () => setDragVisibility("visible"),
|
1591
1591
|
onMouseLeave: () => setDragVisibility("hidden"),
|
1592
1592
|
"aria-disabled": disabled,
|
1593
|
-
dragVisibility,
|
1593
|
+
$dragVisibility: dragVisibility,
|
1594
1594
|
children: [
|
1595
1595
|
/* @__PURE__ */ jsx(
|
1596
1596
|
DragIconButton,
|
1597
1597
|
{
|
1598
|
-
|
1598
|
+
tag: "div",
|
1599
1599
|
role: "button",
|
1600
1600
|
tabIndex: 0,
|
1601
|
-
|
1601
|
+
withTooltip: false,
|
1602
|
+
label: formatMessage({
|
1602
1603
|
id: getTranslation("components.DragHandle-label"),
|
1603
1604
|
defaultMessage: "Drag"
|
1604
1605
|
}),
|
@@ -1606,7 +1607,7 @@ const DragAndDropElement = ({
|
|
1606
1607
|
"aria-disabled": disabled,
|
1607
1608
|
disabled,
|
1608
1609
|
draggable: true,
|
1609
|
-
dragHandleTopMargin,
|
1610
|
+
$dragHandleTopMargin: dragHandleTopMargin,
|
1610
1611
|
children: /* @__PURE__ */ jsx(Drag, { color: "neutral600" })
|
1611
1612
|
}
|
1612
1613
|
),
|
@@ -1618,17 +1619,18 @@ const DragAndDropElement = ({
|
|
1618
1619
|
};
|
1619
1620
|
const CloneDragItem = ({ children, dragHandleTopMargin }) => {
|
1620
1621
|
const { formatMessage } = useIntl();
|
1621
|
-
return /* @__PURE__ */ jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", dragVisibility: "visible", children: [
|
1622
|
+
return /* @__PURE__ */ jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", $dragVisibility: "visible", children: [
|
1622
1623
|
/* @__PURE__ */ jsx(
|
1623
1624
|
DragIconButton,
|
1624
1625
|
{
|
1625
|
-
|
1626
|
+
tag: "div",
|
1626
1627
|
role: "button",
|
1627
|
-
|
1628
|
+
withTooltip: false,
|
1629
|
+
label: formatMessage({
|
1628
1630
|
id: getTranslation("components.DragHandle-label"),
|
1629
1631
|
defaultMessage: "Drag"
|
1630
1632
|
}),
|
1631
|
-
dragHandleTopMargin,
|
1633
|
+
$dragHandleTopMargin: dragHandleTopMargin,
|
1632
1634
|
children: /* @__PURE__ */ jsx(Drag, { color: "neutral600" })
|
1633
1635
|
}
|
1634
1636
|
),
|
@@ -1950,8 +1952,8 @@ const EditorLayout$1 = ({
|
|
1950
1952
|
direction: "column",
|
1951
1953
|
alignItems: "flex-start",
|
1952
1954
|
height: "512px",
|
1953
|
-
disabled,
|
1954
|
-
hasError: Boolean(error),
|
1955
|
+
$disabled: disabled,
|
1956
|
+
$hasError: Boolean(error),
|
1955
1957
|
style: { overflow: "hidden" },
|
1956
1958
|
"aria-describedby": ariaDescriptionId,
|
1957
1959
|
position: "relative",
|
@@ -1959,6 +1961,29 @@ const EditorLayout$1 = ({
|
|
1959
1961
|
}
|
1960
1962
|
);
|
1961
1963
|
};
|
1964
|
+
const InputWrapper = styled(Flex)`
|
1965
|
+
border: 1px solid
|
1966
|
+
${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
|
1967
|
+
border-radius: ${({ theme }) => theme.borderRadius};
|
1968
|
+
background: ${({ theme }) => theme.colors.neutral0};
|
1969
|
+
|
1970
|
+
${({ theme, $hasError = false }) => css`
|
1971
|
+
outline: none;
|
1972
|
+
box-shadow: 0;
|
1973
|
+
transition-property: border-color, box-shadow, fill;
|
1974
|
+
transition-duration: 0.2s;
|
1975
|
+
|
1976
|
+
&:focus-within {
|
1977
|
+
border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};
|
1978
|
+
box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;
|
1979
|
+
}
|
1980
|
+
`}
|
1981
|
+
|
1982
|
+
${({ theme, $disabled }) => $disabled ? css`
|
1983
|
+
color: ${theme.colors.neutral600};
|
1984
|
+
background: ${theme.colors.neutral150};
|
1985
|
+
` : void 0}
|
1986
|
+
`;
|
1962
1987
|
const stylesToInherit = css`
|
1963
1988
|
font-size: inherit;
|
1964
1989
|
color: inherit;
|
@@ -1971,10 +1996,14 @@ const ItalicText = styled(Typography)`
|
|
1971
1996
|
font-style: italic;
|
1972
1997
|
${stylesToInherit}
|
1973
1998
|
`;
|
1974
|
-
const UnderlineText = styled(Typography).attrs({
|
1999
|
+
const UnderlineText = styled(Typography).attrs({
|
2000
|
+
textDecoration: "underline"
|
2001
|
+
})`
|
1975
2002
|
${stylesToInherit}
|
1976
2003
|
`;
|
1977
|
-
const StrikeThroughText = styled(Typography).attrs({
|
2004
|
+
const StrikeThroughText = styled(Typography).attrs({
|
2005
|
+
textDecoration: "line-through"
|
2006
|
+
})`
|
1978
2007
|
${stylesToInherit}
|
1979
2008
|
`;
|
1980
2009
|
const InlineCode = styled.code`
|
@@ -2265,8 +2294,8 @@ const BlocksInput = React.forwardRef(
|
|
2265
2294
|
({ label, name: name2, required = false, hint, labelAction, ...editorProps }, forwardedRef) => {
|
2266
2295
|
const id = React.useId();
|
2267
2296
|
const field = useField(name2);
|
2268
|
-
return /* @__PURE__ */ jsx(Field, { id, name: name2, hint, error: field.error, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
2269
|
-
/* @__PURE__ */ jsx(
|
2297
|
+
return /* @__PURE__ */ jsx(Field.Root, { id, name: name2, hint, error: field.error, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
2298
|
+
/* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
|
2270
2299
|
/* @__PURE__ */ jsx(
|
2271
2300
|
BlocksEditor,
|
2272
2301
|
{
|
@@ -2279,11 +2308,12 @@ const BlocksInput = React.forwardRef(
|
|
2279
2308
|
...editorProps
|
2280
2309
|
}
|
2281
2310
|
),
|
2282
|
-
/* @__PURE__ */ jsx(
|
2283
|
-
/* @__PURE__ */ jsx(
|
2311
|
+
/* @__PURE__ */ jsx(Field.Hint, {}),
|
2312
|
+
/* @__PURE__ */ jsx(Field.Error, {})
|
2284
2313
|
] }) });
|
2285
2314
|
}
|
2286
2315
|
);
|
2316
|
+
const MemoizedBlocksInput = React.memo(BlocksInput);
|
2287
2317
|
const createDefaultForm = (contentType, components = {}) => {
|
2288
2318
|
const traverseSchema = (attributes) => {
|
2289
2319
|
return Object.entries(attributes).reduce((acc, [key, attribute]) => {
|
@@ -2311,7 +2341,7 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
|
|
2311
2341
|
/* @__PURE__ */ jsx(
|
2312
2342
|
Box,
|
2313
2343
|
{
|
2314
|
-
|
2344
|
+
tag: "button",
|
2315
2345
|
background: "neutral100",
|
2316
2346
|
borderColor: field.error ? "danger600" : "neutral200",
|
2317
2347
|
hasRadius: true,
|
@@ -2388,7 +2418,7 @@ const RepeatableComponent = ({
|
|
2388
2418
|
const moveFieldRow = useForm("RepeatableComponent", (state) => state.moveFieldRow);
|
2389
2419
|
const removeFieldRow = useForm("RepeatableComponent", (state) => state.removeFieldRow);
|
2390
2420
|
const { max = Infinity } = attribute;
|
2391
|
-
const [collapseToOpen, setCollapseToOpen] = React.useState(
|
2421
|
+
const [collapseToOpen, setCollapseToOpen] = React.useState("");
|
2392
2422
|
const [liveText, setLiveText] = React.useState("");
|
2393
2423
|
const componentTmpKeyWithFocussedField = React.useMemo(() => {
|
2394
2424
|
if (search.has("field")) {
|
@@ -2404,13 +2434,19 @@ const RepeatableComponent = ({
|
|
2404
2434
|
}
|
2405
2435
|
return void 0;
|
2406
2436
|
}, [search, name2, value]);
|
2437
|
+
const prevValue = usePrev(value);
|
2407
2438
|
React.useEffect(() => {
|
2408
|
-
if (
|
2439
|
+
if (prevValue && prevValue.length < value.length) {
|
2440
|
+
setCollapseToOpen(value[value.length - 1].__temp_key__);
|
2441
|
+
}
|
2442
|
+
}, [value, prevValue]);
|
2443
|
+
React.useEffect(() => {
|
2444
|
+
if (typeof componentTmpKeyWithFocussedField === "string") {
|
2409
2445
|
setCollapseToOpen(componentTmpKeyWithFocussedField);
|
2410
2446
|
}
|
2411
2447
|
}, [componentTmpKeyWithFocussedField]);
|
2412
2448
|
const toggleCollapses = () => {
|
2413
|
-
setCollapseToOpen(
|
2449
|
+
setCollapseToOpen("");
|
2414
2450
|
};
|
2415
2451
|
const handleClick = () => {
|
2416
2452
|
if (value.length < max) {
|
@@ -2442,12 +2478,8 @@ const RepeatableComponent = ({
|
|
2442
2478
|
);
|
2443
2479
|
moveFieldRow(name2, currentIndex, newIndex);
|
2444
2480
|
};
|
2445
|
-
const
|
2446
|
-
|
2447
|
-
setCollapseToOpen(null);
|
2448
|
-
} else {
|
2449
|
-
setCollapseToOpen(key);
|
2450
|
-
}
|
2481
|
+
const handleValueChange = (key) => {
|
2482
|
+
setCollapseToOpen(key);
|
2451
2483
|
};
|
2452
2484
|
const getItemPos = (index) => `${index + 1} of ${value.length}`;
|
2453
2485
|
const handleCancel = (index) => {
|
@@ -2502,158 +2534,104 @@ const RepeatableComponent = ({
|
|
2502
2534
|
defaultMessage: `Press spacebar to grab and re-order`
|
2503
2535
|
}) }),
|
2504
2536
|
/* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "assertive", children: liveText }),
|
2505
|
-
/* @__PURE__ */ jsxs(
|
2506
|
-
|
2507
|
-
|
2508
|
-
|
2509
|
-
|
2510
|
-
|
2511
|
-
|
2512
|
-
|
2513
|
-
|
2514
|
-
|
2515
|
-
|
2516
|
-
|
2537
|
+
/* @__PURE__ */ jsxs(
|
2538
|
+
AccordionRoot,
|
2539
|
+
{
|
2540
|
+
$error: error,
|
2541
|
+
value: collapseToOpen,
|
2542
|
+
onValueChange: handleValueChange,
|
2543
|
+
"aria-describedby": ariaDescriptionId,
|
2544
|
+
children: [
|
2545
|
+
value.map(({ __temp_key__: key, id }, index) => {
|
2546
|
+
const nameWithIndex = `${name2}.${index}`;
|
2547
|
+
return /* @__PURE__ */ jsx(
|
2548
|
+
ComponentProvider,
|
2517
2549
|
{
|
2518
|
-
|
2519
|
-
|
2520
|
-
|
2521
|
-
|
2522
|
-
|
2523
|
-
|
2524
|
-
|
2525
|
-
|
2526
|
-
|
2527
|
-
|
2528
|
-
|
2529
|
-
|
2530
|
-
|
2531
|
-
|
2532
|
-
|
2533
|
-
|
2534
|
-
|
2535
|
-
|
2536
|
-
|
2537
|
-
|
2538
|
-
|
2539
|
-
|
2540
|
-
|
2541
|
-
|
2542
|
-
|
2543
|
-
|
2544
|
-
|
2545
|
-
|
2546
|
-
|
2547
|
-
|
2548
|
-
|
2549
|
-
|
2550
|
-
|
2550
|
+
id,
|
2551
|
+
uid: attribute.component,
|
2552
|
+
level: level + 1,
|
2553
|
+
type: "repeatable",
|
2554
|
+
children: /* @__PURE__ */ jsx(
|
2555
|
+
Component,
|
2556
|
+
{
|
2557
|
+
disabled,
|
2558
|
+
name: nameWithIndex,
|
2559
|
+
attribute,
|
2560
|
+
index,
|
2561
|
+
mainField,
|
2562
|
+
onMoveItem: handleMoveComponentField,
|
2563
|
+
onDeleteComponent: () => {
|
2564
|
+
removeFieldRow(name2, index);
|
2565
|
+
toggleCollapses();
|
2566
|
+
},
|
2567
|
+
toggleCollapses,
|
2568
|
+
onCancel: handleCancel,
|
2569
|
+
onDropItem: handleDropItem,
|
2570
|
+
onGrabItem: handleGrabItem,
|
2571
|
+
__temp_key__: key,
|
2572
|
+
children: layout.map((row, index2) => {
|
2573
|
+
return /* @__PURE__ */ jsx(Grid$1, { gap: 4, children: row.map(({ size, ...field }) => {
|
2574
|
+
const completeFieldName = `${nameWithIndex}.${field.name}`;
|
2575
|
+
return /* @__PURE__ */ jsx(GridItem, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
|
2576
|
+
}) }, index2);
|
2577
|
+
})
|
2578
|
+
}
|
2579
|
+
)
|
2580
|
+
},
|
2581
|
+
key
|
2582
|
+
);
|
2583
|
+
}),
|
2584
|
+
/* @__PURE__ */ jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsx(Plus, {}), children: formatMessage({
|
2585
|
+
id: getTranslation("containers.EditView.add.new-entry"),
|
2586
|
+
defaultMessage: "Add an entry"
|
2587
|
+
}) })
|
2588
|
+
]
|
2589
|
+
}
|
2590
|
+
)
|
2551
2591
|
] });
|
2552
2592
|
};
|
2593
|
+
const AccordionRoot = styled(Accordion.Root)`
|
2594
|
+
border: 1px solid
|
2595
|
+
${({ theme, $error }) => $error ? theme.colors.danger600 : theme.colors.neutral200};
|
2596
|
+
`;
|
2553
2597
|
const TextButtonCustom = styled(TextButton)`
|
2554
|
-
height: 100%;
|
2555
2598
|
width: 100%;
|
2556
|
-
border-radius: 0 0 4px 4px;
|
2557
2599
|
display: flex;
|
2558
2600
|
justify-content: center;
|
2559
|
-
|
2560
|
-
|
2561
|
-
|
2562
|
-
}
|
2563
|
-
`;
|
2564
|
-
const AccordionFooter = styled(Box)`
|
2565
|
-
overflow: hidden;
|
2566
|
-
border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
|
2567
|
-
border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
|
2568
|
-
border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
|
2569
|
-
border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
|
2570
|
-
`;
|
2571
|
-
const AccordionContent = styled(Box)`
|
2572
|
-
border-bottom: none;
|
2573
|
-
|
2574
|
-
/* add the borders and make sure the top is transparent to avoid jumping with the hover effect */
|
2575
|
-
& > div > div {
|
2576
|
-
border: 1px solid ${({ theme }) => theme.colors.neutral200};
|
2577
|
-
border-top-color: transparent;
|
2578
|
-
}
|
2579
|
-
|
2580
|
-
/* the top accordion _does_ need a border though */
|
2581
|
-
& > div:first-child > div {
|
2582
|
-
border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
|
2583
|
-
}
|
2584
|
-
|
2585
|
-
/* Reset all the border-radius' */
|
2586
|
-
& > div > div,
|
2587
|
-
& > div > div > div {
|
2588
|
-
border-radius: unset;
|
2589
|
-
}
|
2601
|
+
border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
|
2602
|
+
padding-inline: ${(props) => props.theme.spaces[6]};
|
2603
|
+
padding-block: ${(props) => props.theme.spaces[3]};
|
2590
2604
|
|
2591
|
-
|
2592
|
-
|
2593
|
-
& > div:first-child > div > div {
|
2594
|
-
border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
|
2595
|
-
}
|
2596
|
-
|
2597
|
-
& > div > div[data-strapi-expanded='true'] {
|
2598
|
-
border: 1px solid ${({ theme }) => theme.colors.primary600};
|
2599
|
-
}
|
2600
|
-
`;
|
2601
|
-
const AccordionGroup = ({ children, error }) => {
|
2602
|
-
return /* @__PURE__ */ jsxs(KeyboardNavigable, { attributeName: "data-strapi-accordion-toggle", children: [
|
2603
|
-
children,
|
2604
|
-
error && /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "danger600", children: error }) })
|
2605
|
-
] });
|
2606
|
-
};
|
2607
|
-
const CustomIconButton$1 = styled(IconButton)`
|
2608
|
-
background-color: transparent;
|
2605
|
+
&:not([disabled]) {
|
2606
|
+
cursor: pointer;
|
2609
2607
|
|
2610
|
-
|
2611
|
-
|
2612
|
-
fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600};
|
2608
|
+
&:hover {
|
2609
|
+
background-color: ${(props) => props.theme.colors.primary100};
|
2613
2610
|
}
|
2614
2611
|
}
|
2615
2612
|
|
2616
|
-
|
2617
|
-
|
2618
|
-
|
2619
|
-
|
2620
|
-
}
|
2621
|
-
}
|
2613
|
+
span {
|
2614
|
+
font-weight: 600;
|
2615
|
+
font-size: 1.4rem;
|
2616
|
+
line-height: 2.4rem;
|
2622
2617
|
}
|
2623
|
-
`;
|
2624
|
-
const ActionsFlex$1 = styled(Flex)`
|
2625
|
-
& .drag-handle {
|
2626
|
-
background: unset;
|
2627
2618
|
|
2628
|
-
|
2629
|
-
|
2630
|
-
fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : void 0};
|
2631
|
-
}
|
2632
|
-
}
|
2633
|
-
|
2634
|
-
&:hover {
|
2635
|
-
svg {
|
2636
|
-
path {
|
2637
|
-
/* keeps the hover style of the accordion */
|
2638
|
-
fill: ${({ theme }) => theme.colors.primary600};
|
2639
|
-
}
|
2640
|
-
}
|
2641
|
-
}
|
2619
|
+
@media (prefers-reduced-motion: no-preference) {
|
2620
|
+
transition: background-color 120ms ${(props) => props.theme.easings.easeOutQuad};
|
2642
2621
|
}
|
2643
2622
|
`;
|
2644
2623
|
const Component = ({
|
2645
2624
|
disabled,
|
2646
2625
|
index,
|
2647
|
-
isOpen,
|
2648
2626
|
name: name2,
|
2649
2627
|
mainField = {
|
2650
2628
|
name: "id",
|
2651
2629
|
type: "integer"
|
2652
2630
|
},
|
2653
2631
|
children,
|
2654
|
-
onClickToggle,
|
2655
2632
|
onDeleteComponent,
|
2656
2633
|
toggleCollapses,
|
2634
|
+
__temp_key__,
|
2657
2635
|
...dragProps
|
2658
2636
|
}) => {
|
2659
2637
|
const { formatMessage } = useIntl();
|
@@ -2678,50 +2656,44 @@ const Component = ({
|
|
2678
2656
|
dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
|
2679
2657
|
}, [dragPreviewRef, index]);
|
2680
2658
|
const composedAccordionRefs = useComposedRefs(accordionRef, dragRef);
|
2681
|
-
const composedBoxRefs = useComposedRefs(
|
2682
|
-
|
2683
|
-
|
2684
|
-
|
2685
|
-
|
2686
|
-
|
2687
|
-
|
2688
|
-
|
2689
|
-
|
2690
|
-
|
2691
|
-
|
2692
|
-
|
2693
|
-
|
2694
|
-
|
2695
|
-
|
2696
|
-
|
2697
|
-
|
2698
|
-
}
|
2699
|
-
|
2700
|
-
|
2701
|
-
|
2702
|
-
|
2703
|
-
|
2704
|
-
|
2705
|
-
|
2706
|
-
|
2707
|
-
|
2708
|
-
|
2709
|
-
|
2710
|
-
"
|
2711
|
-
|
2712
|
-
|
2713
|
-
|
2714
|
-
|
2715
|
-
|
2716
|
-
|
2717
|
-
|
2718
|
-
|
2719
|
-
] }),
|
2720
|
-
title: displayValue,
|
2721
|
-
togglePosition: "left"
|
2722
|
-
}
|
2723
|
-
),
|
2724
|
-
/* @__PURE__ */ jsx(AccordionContent$1, { children: /* @__PURE__ */ jsx(
|
2659
|
+
const composedBoxRefs = useComposedRefs(
|
2660
|
+
boxRef,
|
2661
|
+
dropRef
|
2662
|
+
);
|
2663
|
+
return /* @__PURE__ */ jsx(Fragment, { children: isDragging ? /* @__PURE__ */ jsx(Preview$1, {}) : /* @__PURE__ */ jsxs(Accordion.Item, { ref: composedBoxRefs, value: __temp_key__, children: [
|
2664
|
+
/* @__PURE__ */ jsxs(Accordion.Header, { children: [
|
2665
|
+
/* @__PURE__ */ jsx(Accordion.Trigger, { children: displayValue }),
|
2666
|
+
/* @__PURE__ */ jsxs(Accordion.Actions, { children: [
|
2667
|
+
/* @__PURE__ */ jsx(
|
2668
|
+
IconButton,
|
2669
|
+
{
|
2670
|
+
borderWidth: 0,
|
2671
|
+
onClick: onDeleteComponent,
|
2672
|
+
label: formatMessage({
|
2673
|
+
id: getTranslation("containers.Edit.delete"),
|
2674
|
+
defaultMessage: "Delete"
|
2675
|
+
}),
|
2676
|
+
children: /* @__PURE__ */ jsx(Trash, {})
|
2677
|
+
}
|
2678
|
+
),
|
2679
|
+
/* @__PURE__ */ jsx(
|
2680
|
+
IconButton,
|
2681
|
+
{
|
2682
|
+
ref: composedAccordionRefs,
|
2683
|
+
borderWidth: 0,
|
2684
|
+
onClick: (e) => e.stopPropagation(),
|
2685
|
+
"data-handler-id": handlerId,
|
2686
|
+
label: formatMessage({
|
2687
|
+
id: getTranslation("components.DragHandle-label"),
|
2688
|
+
defaultMessage: "Drag"
|
2689
|
+
}),
|
2690
|
+
onKeyDown: handleKeyDown,
|
2691
|
+
children: /* @__PURE__ */ jsx(Drag, {})
|
2692
|
+
}
|
2693
|
+
)
|
2694
|
+
] })
|
2695
|
+
] }),
|
2696
|
+
/* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(
|
2725
2697
|
Flex,
|
2726
2698
|
{
|
2727
2699
|
direction: "column",
|
@@ -2735,7 +2707,7 @@ const Component = ({
|
|
2735
2707
|
] }) });
|
2736
2708
|
};
|
2737
2709
|
const Preview$1 = () => {
|
2738
|
-
return /* @__PURE__ */ jsx(StyledSpan, {
|
2710
|
+
return /* @__PURE__ */ jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
|
2739
2711
|
};
|
2740
2712
|
const StyledSpan = styled(Box)`
|
2741
2713
|
display: block;
|
@@ -2761,29 +2733,15 @@ const ComponentInput = ({
|
|
2761
2733
|
const data = transformDocument(schema, components)(form);
|
2762
2734
|
field.onChange(name2, data);
|
2763
2735
|
};
|
2764
|
-
return /* @__PURE__ */ jsxs(
|
2736
|
+
return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, required, children: [
|
2765
2737
|
/* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
|
2766
|
-
/* @__PURE__ */ jsxs(
|
2767
|
-
|
2768
|
-
|
2769
|
-
|
2770
|
-
|
2771
|
-
|
2772
|
-
|
2773
|
-
fontWeight: "bold",
|
2774
|
-
as: "label",
|
2775
|
-
children: [
|
2776
|
-
label,
|
2777
|
-
attribute.repeatable && /* @__PURE__ */ jsxs(Fragment, { children: [
|
2778
|
-
" (",
|
2779
|
-
Array.isArray(field.value) ? field.value.length : 0,
|
2780
|
-
")"
|
2781
|
-
] }),
|
2782
|
-
required && /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: "*" })
|
2783
|
-
]
|
2784
|
-
}
|
2785
|
-
),
|
2786
|
-
labelAction && /* @__PURE__ */ jsx(Box, { paddingLeft: 1, children: labelAction })
|
2738
|
+
/* @__PURE__ */ jsxs(Field.Label, { action: labelAction, children: [
|
2739
|
+
label,
|
2740
|
+
attribute.repeatable && /* @__PURE__ */ jsxs(Fragment, { children: [
|
2741
|
+
" (",
|
2742
|
+
Array.isArray(field.value) ? field.value.length : 0,
|
2743
|
+
")"
|
2744
|
+
] })
|
2787
2745
|
] }),
|
2788
2746
|
showResetComponent && /* @__PURE__ */ jsx(
|
2789
2747
|
IconButton,
|
@@ -2792,21 +2750,21 @@ const ComponentInput = ({
|
|
2792
2750
|
id: getTranslation("components.reset-entry"),
|
2793
2751
|
defaultMessage: "Reset Entry"
|
2794
2752
|
}),
|
2795
|
-
icon: /* @__PURE__ */ jsx(Trash, {}),
|
2796
2753
|
borderWidth: 0,
|
2797
2754
|
onClick: () => {
|
2798
2755
|
field.onChange(name2, null);
|
2799
|
-
}
|
2756
|
+
},
|
2757
|
+
children: /* @__PURE__ */ jsx(Trash, {})
|
2800
2758
|
}
|
2801
2759
|
)
|
2802
2760
|
] }),
|
2803
|
-
/* @__PURE__ */
|
2804
|
-
|
2805
|
-
|
2806
|
-
|
2807
|
-
] })
|
2761
|
+
!attribute.repeatable && !field.value && /* @__PURE__ */ jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
|
2762
|
+
!attribute.repeatable && field.value ? /* @__PURE__ */ jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
|
2763
|
+
attribute.repeatable && /* @__PURE__ */ jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }),
|
2764
|
+
/* @__PURE__ */ jsx(Field.Error, {})
|
2808
2765
|
] });
|
2809
2766
|
};
|
2767
|
+
const MemoizedComponentInput = React.memo(ComponentInput);
|
2810
2768
|
const AddComponentButton = ({
|
2811
2769
|
hasError,
|
2812
2770
|
isDisabled,
|
@@ -2826,10 +2784,10 @@ const AddComponentButton = ({
|
|
2826
2784
|
paddingLeft: 4,
|
2827
2785
|
paddingRight: 4,
|
2828
2786
|
style: { cursor: isDisabled ? "not-allowed" : "pointer" },
|
2829
|
-
children: /* @__PURE__ */ jsxs(Flex, {
|
2787
|
+
children: /* @__PURE__ */ jsxs(Flex, { tag: "span", gap: 2, children: [
|
2830
2788
|
/* @__PURE__ */ jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
|
2831
2789
|
/* @__PURE__ */ jsx(
|
2832
|
-
|
2790
|
+
AddComponentTitle,
|
2833
2791
|
{
|
2834
2792
|
variant: "pi",
|
2835
2793
|
fontWeight: "bold",
|
@@ -2853,13 +2811,14 @@ const StyledAddIcon = styled(PlusCircle)`
|
|
2853
2811
|
fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral600};
|
2854
2812
|
}
|
2855
2813
|
`;
|
2814
|
+
const AddComponentTitle = styled(Typography)``;
|
2856
2815
|
const StyledButton = styled(BaseButton)`
|
2857
2816
|
border-radius: 26px;
|
2858
2817
|
border-color: ${({ theme }) => theme.colors.neutral150};
|
2859
2818
|
box-shadow: ${({ theme }) => theme.shadows.filterShadow};
|
2860
2819
|
|
2861
2820
|
&:hover {
|
2862
|
-
${
|
2821
|
+
${AddComponentTitle} {
|
2863
2822
|
color: ${({ theme }) => theme.colors.primary600};
|
2864
2823
|
}
|
2865
2824
|
|
@@ -2873,7 +2832,7 @@ const StyledButton = styled(BaseButton)`
|
|
2873
2832
|
}
|
2874
2833
|
}
|
2875
2834
|
&:active {
|
2876
|
-
${
|
2835
|
+
${AddComponentTitle} {
|
2877
2836
|
color: ${({ theme }) => theme.colors.primary600};
|
2878
2837
|
}
|
2879
2838
|
${StyledAddIcon} {
|
@@ -2890,27 +2849,15 @@ const ComponentCategory = ({
|
|
2890
2849
|
category,
|
2891
2850
|
components = [],
|
2892
2851
|
variant = "primary",
|
2893
|
-
|
2894
|
-
onAddComponent,
|
2895
|
-
onToggle
|
2852
|
+
onAddComponent
|
2896
2853
|
}) => {
|
2897
2854
|
const { formatMessage } = useIntl();
|
2898
|
-
|
2899
|
-
|
2900
|
-
|
2901
|
-
return /* @__PURE__ */ jsxs(Accordion, { expanded: isOpen, onToggle: handleToggle, size: "S", children: [
|
2902
|
-
/* @__PURE__ */ jsx(
|
2903
|
-
AccordionToggle,
|
2904
|
-
{
|
2905
|
-
variant,
|
2906
|
-
title: formatMessage({ id: category, defaultMessage: category }),
|
2907
|
-
togglePosition: "left"
|
2908
|
-
}
|
2909
|
-
),
|
2910
|
-
/* @__PURE__ */ jsx(AccordionContent$1, { children: /* @__PURE__ */ jsx(Box, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: /* @__PURE__ */ jsx(Grid, { children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsx(
|
2855
|
+
return /* @__PURE__ */ jsxs(Accordion.Item, { value: category, children: [
|
2856
|
+
/* @__PURE__ */ jsx(Accordion.Header, { variant, children: /* @__PURE__ */ jsx(Accordion.Trigger, { children: formatMessage({ id: category, defaultMessage: category }) }) }),
|
2857
|
+
/* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Grid, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsx(
|
2911
2858
|
ComponentBox,
|
2912
2859
|
{
|
2913
|
-
|
2860
|
+
tag: "button",
|
2914
2861
|
type: "button",
|
2915
2862
|
background: "neutral100",
|
2916
2863
|
justifyContent: "center",
|
@@ -2920,34 +2867,32 @@ const ComponentCategory = ({
|
|
2920
2867
|
shrink: 0,
|
2921
2868
|
borderColor: "neutral200",
|
2922
2869
|
children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
|
2923
|
-
/* @__PURE__ */ jsx(ComponentIcon, { icon }),
|
2924
|
-
/* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold",
|
2870
|
+
/* @__PURE__ */ jsx(ComponentIcon, { color: "currentColor", background: "primary200", icon }),
|
2871
|
+
/* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: displayName })
|
2925
2872
|
] })
|
2926
2873
|
},
|
2927
2874
|
uid
|
2928
|
-
)) }) })
|
2875
|
+
)) }) })
|
2929
2876
|
] });
|
2930
2877
|
};
|
2931
|
-
const Grid = styled
|
2878
|
+
const Grid = styled(Box)`
|
2932
2879
|
display: grid;
|
2933
2880
|
grid-template-columns: repeat(auto-fit, 14rem);
|
2934
2881
|
grid-gap: ${({ theme }) => theme.spaces[1]};
|
2935
2882
|
`;
|
2936
2883
|
const ComponentBox = styled(Flex)`
|
2884
|
+
color: ${({ theme }) => theme.colors.neutral600};
|
2885
|
+
cursor: pointer;
|
2886
|
+
|
2887
|
+
@media (prefers-reduced-motion: no-preference) {
|
2888
|
+
transition: color 120ms ${(props) => props.theme.easings.easeOutQuad};
|
2889
|
+
}
|
2890
|
+
|
2937
2891
|
&:focus,
|
2938
2892
|
&:hover {
|
2939
2893
|
border: 1px solid ${({ theme }) => theme.colors.primary200};
|
2940
2894
|
background: ${({ theme }) => theme.colors.primary100};
|
2941
|
-
|
2942
|
-
${Typography} {
|
2943
|
-
color: ${({ theme }) => theme.colors.primary600};
|
2944
|
-
}
|
2945
|
-
|
2946
|
-
/* > Flex > ComponentIcon */
|
2947
|
-
> div > div:first-child {
|
2948
|
-
background: ${({ theme }) => theme.colors.primary200};
|
2949
|
-
color: ${({ theme }) => theme.colors.primary600};
|
2950
|
-
}
|
2895
|
+
color: ${({ theme }) => theme.colors.primary600};
|
2951
2896
|
}
|
2952
2897
|
`;
|
2953
2898
|
const ComponentPicker = ({
|
@@ -2956,19 +2901,8 @@ const ComponentPicker = ({
|
|
2956
2901
|
onClickAddComponent
|
2957
2902
|
}) => {
|
2958
2903
|
const { formatMessage } = useIntl();
|
2959
|
-
const [categoryToOpen, setCategoryToOpen] = React.useState("");
|
2960
|
-
React.useEffect(() => {
|
2961
|
-
const categoryKeys = Object.keys(dynamicComponentsByCategory);
|
2962
|
-
if (isOpen && categoryKeys.length > 0) {
|
2963
|
-
setCategoryToOpen(categoryKeys[0]);
|
2964
|
-
}
|
2965
|
-
}, [isOpen, dynamicComponentsByCategory]);
|
2966
2904
|
const handleAddComponentToDz = (componentUid) => () => {
|
2967
2905
|
onClickAddComponent(componentUid);
|
2968
|
-
setCategoryToOpen("");
|
2969
|
-
};
|
2970
|
-
const handleClickToggle = (categoryName) => {
|
2971
|
-
setCategoryToOpen((currentCat) => currentCat === categoryName ? "" : categoryName);
|
2972
2906
|
};
|
2973
2907
|
if (!isOpen) {
|
2974
2908
|
return null;
|
@@ -2989,14 +2923,12 @@ const ComponentPicker = ({
|
|
2989
2923
|
id: getTranslation("components.DynamicZone.ComponentPicker-label"),
|
2990
2924
|
defaultMessage: "Pick one component"
|
2991
2925
|
}) }) }),
|
2992
|
-
/* @__PURE__ */ jsx(Box, { paddingTop: 2, children: /* @__PURE__ */ jsx(
|
2926
|
+
/* @__PURE__ */ jsx(Box, { paddingTop: 2, children: /* @__PURE__ */ jsx(Accordion.Root, { defaultValue: Object.keys(dynamicComponentsByCategory)[0], children: Object.entries(dynamicComponentsByCategory).map(([category, components], index) => /* @__PURE__ */ jsx(
|
2993
2927
|
ComponentCategory,
|
2994
2928
|
{
|
2995
2929
|
category,
|
2996
2930
|
components,
|
2997
2931
|
onAddComponent: handleAddComponentToDz,
|
2998
|
-
isOpen: category === categoryToOpen,
|
2999
|
-
onToggle: handleClickToggle,
|
3000
2932
|
variant: index % 2 === 1 ? "primary" : "secondary"
|
3001
2933
|
},
|
3002
2934
|
category
|
@@ -3011,27 +2943,21 @@ const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
|
|
3011
2943
|
id: "components.NotAllowedInput.text",
|
3012
2944
|
defaultMessage: "No permissions to see this field"
|
3013
2945
|
});
|
3014
|
-
return /* @__PURE__ */
|
3015
|
-
|
3016
|
-
|
3017
|
-
|
3018
|
-
|
3019
|
-
|
3020
|
-
|
3021
|
-
|
3022
|
-
|
3023
|
-
|
3024
|
-
|
3025
|
-
|
3026
|
-
|
3027
|
-
|
3028
|
-
);
|
2946
|
+
return /* @__PURE__ */ jsxs(Field.Root, { id: name2, hint, name: name2, required, children: [
|
2947
|
+
/* @__PURE__ */ jsx(Field.Label, { children: label }),
|
2948
|
+
/* @__PURE__ */ jsx(
|
2949
|
+
TextInput,
|
2950
|
+
{
|
2951
|
+
disabled: true,
|
2952
|
+
placeholder,
|
2953
|
+
startAction: /* @__PURE__ */ jsx(EyeStriked, { fill: "neutral600" }),
|
2954
|
+
type: "text",
|
2955
|
+
value: ""
|
2956
|
+
}
|
2957
|
+
),
|
2958
|
+
/* @__PURE__ */ jsx(Field.Hint, {})
|
2959
|
+
] });
|
3029
2960
|
};
|
3030
|
-
const StyledIcon = styled(EyeStriked)`
|
3031
|
-
& > path {
|
3032
|
-
fill: ${({ theme }) => theme.colors.neutral600};
|
3033
|
-
}
|
3034
|
-
`;
|
3035
2961
|
function useDebounce(value, delay) {
|
3036
2962
|
const [debouncedValue, setDebouncedValue] = useState(value);
|
3037
2963
|
useEffect(() => {
|
@@ -3084,188 +3010,193 @@ const uidApi = contentManagerApi.injectEndpoints({
|
|
3084
3010
|
});
|
3085
3011
|
const { useGenerateUIDMutation, useGetDefaultUIDQuery, useGetAvailabilityQuery } = uidApi;
|
3086
3012
|
const UID_REGEX = /^[A-Za-z0-9-_.~]*$/;
|
3087
|
-
const UIDInput = React.forwardRef(
|
3088
|
-
|
3089
|
-
|
3090
|
-
|
3091
|
-
|
3092
|
-
|
3093
|
-
|
3094
|
-
|
3095
|
-
|
3096
|
-
|
3097
|
-
|
3098
|
-
|
3099
|
-
|
3100
|
-
|
3101
|
-
|
3102
|
-
|
3103
|
-
|
3104
|
-
|
3105
|
-
|
3106
|
-
field: props.name,
|
3107
|
-
data: {
|
3108
|
-
id: id ?? "",
|
3109
|
-
...allFormValues
|
3110
|
-
},
|
3111
|
-
params
|
3112
|
-
},
|
3113
|
-
{
|
3114
|
-
skip: field.value || !props.required
|
3115
|
-
}
|
3116
|
-
);
|
3117
|
-
React.useEffect(() => {
|
3118
|
-
if (apiError) {
|
3119
|
-
toggleNotification({
|
3120
|
-
type: "warning",
|
3121
|
-
message: formatAPIError(apiError)
|
3122
|
-
});
|
3123
|
-
}
|
3124
|
-
}, [apiError, formatAPIError, toggleNotification]);
|
3125
|
-
React.useEffect(() => {
|
3126
|
-
if (defaultGeneratedUID && field.value === void 0) {
|
3127
|
-
field.onChange(props.name, defaultGeneratedUID);
|
3128
|
-
}
|
3129
|
-
}, [defaultGeneratedUID, field, props.name]);
|
3130
|
-
const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
|
3131
|
-
const handleRegenerateClick = async () => {
|
3132
|
-
try {
|
3133
|
-
const res = await generateUID({
|
3013
|
+
const UIDInput = React.forwardRef(
|
3014
|
+
({ hint, label, labelAction, name: name2, required, ...props }, ref) => {
|
3015
|
+
const { model, id } = useDoc();
|
3016
|
+
const allFormValues = useForm("InputUID", (form) => form.values);
|
3017
|
+
const [availability, setAvailability] = React.useState();
|
3018
|
+
const [showRegenerate, setShowRegenerate] = React.useState(false);
|
3019
|
+
const field = useField(name2);
|
3020
|
+
const debouncedValue = useDebounce(field.value, 300);
|
3021
|
+
const { toggleNotification } = useNotification();
|
3022
|
+
const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
|
3023
|
+
const { formatMessage } = useIntl();
|
3024
|
+
const [{ query }] = useQueryParams();
|
3025
|
+
const params = React.useMemo(() => buildValidParams(query), [query]);
|
3026
|
+
const {
|
3027
|
+
data: defaultGeneratedUID,
|
3028
|
+
isLoading: isGeneratingDefaultUID,
|
3029
|
+
error: apiError
|
3030
|
+
} = useGetDefaultUIDQuery(
|
3031
|
+
{
|
3134
3032
|
contentTypeUID: model,
|
3135
|
-
field:
|
3136
|
-
data: {
|
3033
|
+
field: name2,
|
3034
|
+
data: {
|
3035
|
+
id: id ?? "",
|
3036
|
+
...allFormValues
|
3037
|
+
},
|
3137
3038
|
params
|
3138
|
-
}
|
3139
|
-
|
3140
|
-
field.
|
3141
|
-
}
|
3039
|
+
},
|
3040
|
+
{
|
3041
|
+
skip: field.value || !required
|
3042
|
+
}
|
3043
|
+
);
|
3044
|
+
React.useEffect(() => {
|
3045
|
+
if (apiError) {
|
3142
3046
|
toggleNotification({
|
3143
|
-
type: "
|
3144
|
-
message: formatAPIError(
|
3047
|
+
type: "warning",
|
3048
|
+
message: formatAPIError(apiError)
|
3145
3049
|
});
|
3146
3050
|
}
|
3147
|
-
}
|
3148
|
-
|
3149
|
-
|
3150
|
-
|
3151
|
-
|
3152
|
-
|
3153
|
-
|
3154
|
-
|
3155
|
-
|
3156
|
-
|
3157
|
-
|
3158
|
-
|
3159
|
-
|
3160
|
-
|
3161
|
-
|
3162
|
-
|
3163
|
-
|
3164
|
-
|
3165
|
-
|
3166
|
-
|
3167
|
-
|
3168
|
-
|
3169
|
-
|
3170
|
-
|
3171
|
-
|
3172
|
-
|
3173
|
-
|
3174
|
-
|
3175
|
-
|
3176
|
-
|
3177
|
-
|
3178
|
-
message: formatAPIError(availabilityError)
|
3179
|
-
});
|
3180
|
-
}
|
3181
|
-
}, [availabilityError, formatAPIError, toggleNotification]);
|
3182
|
-
React.useEffect(() => {
|
3183
|
-
setAvailability(availabilityData);
|
3184
|
-
let timer;
|
3185
|
-
if (availabilityData?.isAvailable) {
|
3186
|
-
timer = window.setTimeout(() => {
|
3187
|
-
setAvailability(void 0);
|
3188
|
-
}, 4e3);
|
3189
|
-
}
|
3190
|
-
return () => {
|
3191
|
-
if (timer) {
|
3192
|
-
clearTimeout(timer);
|
3051
|
+
}, [apiError, formatAPIError, toggleNotification]);
|
3052
|
+
React.useEffect(() => {
|
3053
|
+
if (defaultGeneratedUID && field.value === void 0) {
|
3054
|
+
field.onChange(name2, defaultGeneratedUID);
|
3055
|
+
}
|
3056
|
+
}, [defaultGeneratedUID, field, name2]);
|
3057
|
+
const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
|
3058
|
+
const handleRegenerateClick = async () => {
|
3059
|
+
try {
|
3060
|
+
const res = await generateUID({
|
3061
|
+
contentTypeUID: model,
|
3062
|
+
field: name2,
|
3063
|
+
data: { id: id ?? "", ...allFormValues },
|
3064
|
+
params
|
3065
|
+
});
|
3066
|
+
if ("data" in res) {
|
3067
|
+
field.onChange(name2, res.data);
|
3068
|
+
} else {
|
3069
|
+
toggleNotification({
|
3070
|
+
type: "danger",
|
3071
|
+
message: formatAPIError(res.error)
|
3072
|
+
});
|
3073
|
+
}
|
3074
|
+
} catch (err) {
|
3075
|
+
toggleNotification({
|
3076
|
+
type: "danger",
|
3077
|
+
message: formatMessage({
|
3078
|
+
id: "notification.error",
|
3079
|
+
defaultMessage: "An error occurred."
|
3080
|
+
})
|
3081
|
+
});
|
3193
3082
|
}
|
3194
3083
|
};
|
3195
|
-
|
3196
|
-
|
3197
|
-
|
3198
|
-
|
3199
|
-
|
3200
|
-
// @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
|
3201
|
-
/* @__PURE__ */ jsx(
|
3202
|
-
TextInput,
|
3084
|
+
const {
|
3085
|
+
data: availabilityData,
|
3086
|
+
isLoading: isCheckingAvailability,
|
3087
|
+
error: availabilityError
|
3088
|
+
} = useGetAvailabilityQuery(
|
3203
3089
|
{
|
3204
|
-
|
3205
|
-
|
3206
|
-
|
3207
|
-
|
3208
|
-
|
3209
|
-
|
3210
|
-
|
3211
|
-
|
3212
|
-
|
3213
|
-
|
3214
|
-
|
3215
|
-
|
3216
|
-
|
3217
|
-
|
3218
|
-
|
3219
|
-
|
3220
|
-
|
3221
|
-
|
3222
|
-
|
3223
|
-
|
3224
|
-
|
3225
|
-
|
3226
|
-
|
3227
|
-
|
3228
|
-
|
3229
|
-
|
3230
|
-
|
3231
|
-
|
3232
|
-
|
3233
|
-
|
3234
|
-
|
3235
|
-
|
3236
|
-
|
3237
|
-
|
3238
|
-
|
3239
|
-
|
3240
|
-
|
3241
|
-
|
3242
|
-
|
3243
|
-
|
3244
|
-
|
3245
|
-
|
3246
|
-
|
3247
|
-
|
3090
|
+
contentTypeUID: model,
|
3091
|
+
field: name2,
|
3092
|
+
value: debouncedValue ? debouncedValue.trim() : "",
|
3093
|
+
params
|
3094
|
+
},
|
3095
|
+
{
|
3096
|
+
skip: !Boolean(
|
3097
|
+
debouncedValue !== field.initialValue && debouncedValue && UID_REGEX.test(debouncedValue.trim())
|
3098
|
+
)
|
3099
|
+
}
|
3100
|
+
);
|
3101
|
+
React.useEffect(() => {
|
3102
|
+
if (availabilityError) {
|
3103
|
+
toggleNotification({
|
3104
|
+
type: "warning",
|
3105
|
+
message: formatAPIError(availabilityError)
|
3106
|
+
});
|
3107
|
+
}
|
3108
|
+
}, [availabilityError, formatAPIError, toggleNotification]);
|
3109
|
+
React.useEffect(() => {
|
3110
|
+
setAvailability(availabilityData);
|
3111
|
+
let timer;
|
3112
|
+
if (availabilityData?.isAvailable) {
|
3113
|
+
timer = window.setTimeout(() => {
|
3114
|
+
setAvailability(void 0);
|
3115
|
+
}, 4e3);
|
3116
|
+
}
|
3117
|
+
return () => {
|
3118
|
+
if (timer) {
|
3119
|
+
clearTimeout(timer);
|
3120
|
+
}
|
3121
|
+
};
|
3122
|
+
}, [availabilityData]);
|
3123
|
+
const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
|
3124
|
+
const fieldRef = useFocusInputField(name2);
|
3125
|
+
const composedRefs = useComposedRefs(ref, fieldRef);
|
3126
|
+
return /* @__PURE__ */ jsxs(Field.Root, { hint, name: name2, error: field.error, required, children: [
|
3127
|
+
/* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
|
3128
|
+
/* @__PURE__ */ jsx(
|
3129
|
+
TextInput,
|
3130
|
+
{
|
3131
|
+
ref: composedRefs,
|
3132
|
+
disabled: props.disabled,
|
3133
|
+
endAction: /* @__PURE__ */ jsxs(Flex, { position: "relative", gap: 1, children: [
|
3134
|
+
availability && !showRegenerate && /* @__PURE__ */ jsxs(
|
3135
|
+
TextValidation,
|
3248
3136
|
{
|
3249
|
-
|
3250
|
-
|
3251
|
-
|
3252
|
-
|
3253
|
-
|
3254
|
-
|
3255
|
-
|
3256
|
-
|
3137
|
+
alignItems: "center",
|
3138
|
+
gap: 1,
|
3139
|
+
justifyContent: "flex-end",
|
3140
|
+
$available: !!availability?.isAvailable,
|
3141
|
+
"data-not-here-outer": true,
|
3142
|
+
position: "absolute",
|
3143
|
+
pointerEvents: "none",
|
3144
|
+
right: 6,
|
3145
|
+
width: "100px",
|
3146
|
+
children: [
|
3147
|
+
availability?.isAvailable ? /* @__PURE__ */ jsx(CheckCircle, {}) : /* @__PURE__ */ jsx(WarningCircle, {}),
|
3148
|
+
/* @__PURE__ */ jsx(
|
3149
|
+
Typography,
|
3150
|
+
{
|
3151
|
+
textColor: availability.isAvailable ? "success600" : "danger600",
|
3152
|
+
variant: "pi",
|
3153
|
+
children: formatMessage(
|
3154
|
+
availability.isAvailable ? {
|
3155
|
+
id: "content-manager.components.uid.available",
|
3156
|
+
defaultMessage: "Available"
|
3157
|
+
} : {
|
3158
|
+
id: "content-manager.components.uid.unavailable",
|
3159
|
+
defaultMessage: "Unavailable"
|
3160
|
+
}
|
3161
|
+
)
|
3162
|
+
}
|
3163
|
+
)
|
3164
|
+
]
|
3257
3165
|
}
|
3258
|
-
)
|
3259
|
-
|
3260
|
-
|
3261
|
-
|
3262
|
-
|
3263
|
-
|
3264
|
-
|
3265
|
-
|
3266
|
-
|
3267
|
-
|
3268
|
-
|
3166
|
+
),
|
3167
|
+
!props.disabled && /* @__PURE__ */ jsxs(Fragment, { children: [
|
3168
|
+
showRegenerate && /* @__PURE__ */ jsx(TextValidation, { alignItems: "center", justifyContent: "flex-end", gap: 1, children: /* @__PURE__ */ jsx(Typography, { textColor: "primary600", variant: "pi", children: formatMessage({
|
3169
|
+
id: "content-manager.components.uid.regenerate",
|
3170
|
+
defaultMessage: "Regenerate"
|
3171
|
+
}) }) }),
|
3172
|
+
/* @__PURE__ */ jsx(
|
3173
|
+
FieldActionWrapper,
|
3174
|
+
{
|
3175
|
+
onClick: handleRegenerateClick,
|
3176
|
+
label: formatMessage({
|
3177
|
+
id: "content-manager.components.uid.regenerate",
|
3178
|
+
defaultMessage: "Regenerate"
|
3179
|
+
}),
|
3180
|
+
onMouseEnter: () => setShowRegenerate(true),
|
3181
|
+
onMouseLeave: () => setShowRegenerate(false),
|
3182
|
+
children: isLoading ? /* @__PURE__ */ jsx(LoadingWrapper, { "data-testid": "loading-wrapper", children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsx(ArrowClockwise, {})
|
3183
|
+
}
|
3184
|
+
)
|
3185
|
+
] })
|
3186
|
+
] }),
|
3187
|
+
onChange: field.onChange,
|
3188
|
+
value: field.value ?? "",
|
3189
|
+
...props
|
3190
|
+
}
|
3191
|
+
),
|
3192
|
+
/* @__PURE__ */ jsx(Field.Error, {}),
|
3193
|
+
/* @__PURE__ */ jsx(Field.Hint, {})
|
3194
|
+
] });
|
3195
|
+
}
|
3196
|
+
);
|
3197
|
+
const FieldActionWrapper = styled(Field.Action)`
|
3198
|
+
width: 1.6rem;
|
3199
|
+
|
3269
3200
|
svg {
|
3270
3201
|
height: 1.6rem;
|
3271
3202
|
width: 1.6rem;
|
@@ -3286,7 +3217,7 @@ const TextValidation = styled(Flex)`
|
|
3286
3217
|
width: 1.2rem;
|
3287
3218
|
|
3288
3219
|
path {
|
3289
|
-
fill: ${({ theme, available }) => available ? theme.colors.success600 : theme.colors.danger600};
|
3220
|
+
fill: ${({ theme, $available }) => $available ? theme.colors.success600 : theme.colors.danger600};
|
3290
3221
|
}
|
3291
3222
|
}
|
3292
3223
|
`;
|
@@ -3301,6 +3232,7 @@ const rotation = keyframes`
|
|
3301
3232
|
const LoadingWrapper = styled(Flex)`
|
3302
3233
|
animation: ${rotation} 2s infinite linear;
|
3303
3234
|
`;
|
3235
|
+
const MemoizedUIDInput = React.memo(UIDInput);
|
3304
3236
|
const md = new Markdown({
|
3305
3237
|
html: true,
|
3306
3238
|
// Enable HTML tags in source
|
@@ -3635,7 +3567,7 @@ const Editor = React.forwardRef(
|
|
3635
3567
|
[editorRef]
|
3636
3568
|
);
|
3637
3569
|
return /* @__PURE__ */ jsxs(EditorAndPreviewWrapper, { children: [
|
3638
|
-
/* @__PURE__ */ jsx(EditorStylesContainer, { isExpandMode, disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsx("textarea", { ref: textareaRef }) }),
|
3570
|
+
/* @__PURE__ */ jsx(EditorStylesContainer, { $isExpandMode: isExpandMode, $disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsx("textarea", { ref: textareaRef }) }),
|
3639
3571
|
isPreviewMode && /* @__PURE__ */ jsx(PreviewWysiwyg, { data: value })
|
3640
3572
|
] });
|
3641
3573
|
}
|
@@ -3645,7 +3577,7 @@ const EditorAndPreviewWrapper = styled.div`
|
|
3645
3577
|
height: calc(100% - 48px);
|
3646
3578
|
`;
|
3647
3579
|
const EditorStylesContainer = styled.div`
|
3648
|
-
cursor: ${({ disabled }) => disabled ? "not-allowed !important" : "auto"};
|
3580
|
+
cursor: ${({ $disabled }) => $disabled ? "not-allowed !important" : "auto"};
|
3649
3581
|
height: 100%;
|
3650
3582
|
/* BASICS */
|
3651
3583
|
.CodeMirror-placeholder {
|
@@ -3655,7 +3587,7 @@ const EditorStylesContainer = styled.div`
|
|
3655
3587
|
.CodeMirror {
|
3656
3588
|
/* Set height, width, borders, and global font properties here */
|
3657
3589
|
font-size: 1.4rem;
|
3658
|
-
height: ${({ isExpandMode }) => isExpandMode ? "100%" : "410px"}; // 512px(total height) - 48px (header) - 52px(footer) - 2px border
|
3590
|
+
height: ${({ $isExpandMode }) => $isExpandMode ? "100%" : "410px"}; // 512px(total height) - 48px (header) - 52px(footer) - 2px border
|
3659
3591
|
color: ${({ theme }) => theme.colors.neutral800};
|
3660
3592
|
direction: ltr;
|
3661
3593
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
@@ -4421,21 +4353,21 @@ const WysiwygNav = ({
|
|
4421
4353
|
justifyContent: "space-between",
|
4422
4354
|
borderRadius: `0.4rem 0.4rem 0 0`,
|
4423
4355
|
children: [
|
4424
|
-
/* @__PURE__ */ jsxs(
|
4425
|
-
/* @__PURE__ */ jsxs(SingleSelect, { disabled: true, placeholder: selectPlaceholder,
|
4356
|
+
/* @__PURE__ */ jsxs(Flex, { children: [
|
4357
|
+
/* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsxs(SingleSelect, { disabled: true, placeholder: selectPlaceholder, "aria-label": selectPlaceholder, children: [
|
4426
4358
|
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h1", children: "h1" }),
|
4427
4359
|
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h2", children: "h2" }),
|
4428
4360
|
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h3", children: "h3" }),
|
4429
4361
|
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h4", children: "h4" }),
|
4430
4362
|
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h5", children: "h5" }),
|
4431
4363
|
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h6", children: "h6" })
|
4432
|
-
] }),
|
4364
|
+
] }) }),
|
4433
4365
|
/* @__PURE__ */ jsxs(MainButtons, { children: [
|
4434
|
-
/* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Bold", name: "Bold",
|
4435
|
-
/* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic",
|
4436
|
-
/* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Underline", name: "Underline",
|
4366
|
+
/* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Bold", name: "Bold", children: /* @__PURE__ */ jsx(Bold, {}) }),
|
4367
|
+
/* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic", children: /* @__PURE__ */ jsx(Italic, {}) }),
|
4368
|
+
/* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Underline", name: "Underline", children: /* @__PURE__ */ jsx(Underline, {}) })
|
4437
4369
|
] }),
|
4438
|
-
/* @__PURE__ */ jsx(MoreButton, { disabled: true, label: "More",
|
4370
|
+
/* @__PURE__ */ jsx(MoreButton, { disabled: true, label: "More", children: /* @__PURE__ */ jsx(More, {}) })
|
4439
4371
|
] }),
|
4440
4372
|
!isExpandMode && /* @__PURE__ */ jsx(Button, { onClick: onTogglePreviewMode, variant: "tertiary", children: formatMessage({
|
4441
4373
|
id: "components.Wysiwyg.ToggleMode.markdown-mode",
|
@@ -4453,13 +4385,12 @@ const WysiwygNav = ({
|
|
4453
4385
|
justifyContent: "space-between",
|
4454
4386
|
borderRadius: `0.4rem 0.4rem 0 0`,
|
4455
4387
|
children: [
|
4456
|
-
/* @__PURE__ */ jsxs(
|
4457
|
-
/* @__PURE__ */ jsxs(
|
4388
|
+
/* @__PURE__ */ jsxs(Flex, { children: [
|
4389
|
+
/* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsxs(
|
4458
4390
|
SingleSelect,
|
4459
4391
|
{
|
4460
4392
|
placeholder: selectPlaceholder,
|
4461
|
-
label: selectPlaceholder,
|
4462
|
-
size: "S",
|
4393
|
+
"aria-label": selectPlaceholder,
|
4463
4394
|
onChange: (value) => onActionClick(value, editorRef),
|
4464
4395
|
children: [
|
4465
4396
|
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h1", children: "h1" }),
|
@@ -4470,7 +4401,7 @@ const WysiwygNav = ({
|
|
4470
4401
|
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h6", children: "h6" })
|
4471
4402
|
]
|
4472
4403
|
}
|
4473
|
-
),
|
4404
|
+
) }),
|
4474
4405
|
/* @__PURE__ */ jsxs(MainButtons, { children: [
|
4475
4406
|
/* @__PURE__ */ jsx(
|
4476
4407
|
CustomIconButton,
|
@@ -4478,7 +4409,7 @@ const WysiwygNav = ({
|
|
4478
4409
|
onClick: () => onActionClick("Bold", editorRef),
|
4479
4410
|
label: "Bold",
|
4480
4411
|
name: "Bold",
|
4481
|
-
|
4412
|
+
children: /* @__PURE__ */ jsx(Bold, {})
|
4482
4413
|
}
|
4483
4414
|
),
|
4484
4415
|
/* @__PURE__ */ jsx(
|
@@ -4487,7 +4418,7 @@ const WysiwygNav = ({
|
|
4487
4418
|
onClick: () => onActionClick("Italic", editorRef),
|
4488
4419
|
label: "Italic",
|
4489
4420
|
name: "Italic",
|
4490
|
-
|
4421
|
+
children: /* @__PURE__ */ jsx(Italic, {})
|
4491
4422
|
}
|
4492
4423
|
),
|
4493
4424
|
/* @__PURE__ */ jsx(
|
@@ -4496,19 +4427,11 @@ const WysiwygNav = ({
|
|
4496
4427
|
onClick: () => onActionClick("Underline", editorRef),
|
4497
4428
|
label: "Underline",
|
4498
4429
|
name: "Underline",
|
4499
|
-
|
4430
|
+
children: /* @__PURE__ */ jsx(Underline, {})
|
4500
4431
|
}
|
4501
4432
|
)
|
4502
4433
|
] }),
|
4503
|
-
/* @__PURE__ */ jsx(
|
4504
|
-
MoreButton,
|
4505
|
-
{
|
4506
|
-
ref: buttonMoreRef,
|
4507
|
-
onClick: handleTogglePopover,
|
4508
|
-
label: "More",
|
4509
|
-
icon: /* @__PURE__ */ jsx(More, {})
|
4510
|
-
}
|
4511
|
-
),
|
4434
|
+
/* @__PURE__ */ jsx(MoreButton, { ref: buttonMoreRef, onClick: handleTogglePopover, label: "More", children: /* @__PURE__ */ jsx(More, {}) }),
|
4512
4435
|
visiblePopover && /* @__PURE__ */ jsx(Popover, { onDismiss: handleTogglePopover, centered: true, source: buttonMoreRef, spacing: 4, children: /* @__PURE__ */ jsxs(Flex, { children: [
|
4513
4436
|
/* @__PURE__ */ jsxs(IconButtonGroupMargin, { children: [
|
4514
4437
|
/* @__PURE__ */ jsx(
|
@@ -4517,7 +4440,7 @@ const WysiwygNav = ({
|
|
4517
4440
|
onClick: () => onActionClick("Strikethrough", editorRef, handleTogglePopover),
|
4518
4441
|
label: "Strikethrough",
|
4519
4442
|
name: "Strikethrough",
|
4520
|
-
|
4443
|
+
children: /* @__PURE__ */ jsx(StrikeThrough, {})
|
4521
4444
|
}
|
4522
4445
|
),
|
4523
4446
|
/* @__PURE__ */ jsx(
|
@@ -4526,7 +4449,7 @@ const WysiwygNav = ({
|
|
4526
4449
|
onClick: () => onActionClick("BulletList", editorRef, handleTogglePopover),
|
4527
4450
|
label: "BulletList",
|
4528
4451
|
name: "BulletList",
|
4529
|
-
|
4452
|
+
children: /* @__PURE__ */ jsx(BulletList, {})
|
4530
4453
|
}
|
4531
4454
|
),
|
4532
4455
|
/* @__PURE__ */ jsx(
|
@@ -4535,7 +4458,7 @@ const WysiwygNav = ({
|
|
4535
4458
|
onClick: () => onActionClick("NumberList", editorRef, handleTogglePopover),
|
4536
4459
|
label: "NumberList",
|
4537
4460
|
name: "NumberList",
|
4538
|
-
|
4461
|
+
children: /* @__PURE__ */ jsx(NumberList, {})
|
4539
4462
|
}
|
4540
4463
|
)
|
4541
4464
|
] }),
|
@@ -4546,7 +4469,7 @@ const WysiwygNav = ({
|
|
4546
4469
|
onClick: () => onActionClick("Code", editorRef, handleTogglePopover),
|
4547
4470
|
label: "Code",
|
4548
4471
|
name: "Code",
|
4549
|
-
|
4472
|
+
children: /* @__PURE__ */ jsx(Code, {})
|
4550
4473
|
}
|
4551
4474
|
),
|
4552
4475
|
/* @__PURE__ */ jsx(
|
@@ -4558,7 +4481,7 @@ const WysiwygNav = ({
|
|
4558
4481
|
},
|
4559
4482
|
label: "Image",
|
4560
4483
|
name: "Image",
|
4561
|
-
|
4484
|
+
children: /* @__PURE__ */ jsx(Image$1, {})
|
4562
4485
|
}
|
4563
4486
|
),
|
4564
4487
|
/* @__PURE__ */ jsx(
|
@@ -4567,7 +4490,7 @@ const WysiwygNav = ({
|
|
4567
4490
|
onClick: () => onActionClick("Link", editorRef, handleTogglePopover),
|
4568
4491
|
label: "Link",
|
4569
4492
|
name: "Link",
|
4570
|
-
|
4493
|
+
children: /* @__PURE__ */ jsx(Link$1, {})
|
4571
4494
|
}
|
4572
4495
|
),
|
4573
4496
|
/* @__PURE__ */ jsx(
|
@@ -4576,7 +4499,7 @@ const WysiwygNav = ({
|
|
4576
4499
|
onClick: () => onActionClick("Quote", editorRef, handleTogglePopover),
|
4577
4500
|
label: "Quote",
|
4578
4501
|
name: "Quote",
|
4579
|
-
|
4502
|
+
children: /* @__PURE__ */ jsx(Quotes, {})
|
4580
4503
|
}
|
4581
4504
|
)
|
4582
4505
|
] })
|
@@ -4590,19 +4513,6 @@ const WysiwygNav = ({
|
|
4590
4513
|
}
|
4591
4514
|
);
|
4592
4515
|
};
|
4593
|
-
const StyledFlex = styled(Flex)`
|
4594
|
-
/* Hide the label, every input needs a label. */
|
4595
|
-
label {
|
4596
|
-
border: 0;
|
4597
|
-
clip: rect(0 0 0 0);
|
4598
|
-
height: 1px;
|
4599
|
-
margin: -1px;
|
4600
|
-
overflow: hidden;
|
4601
|
-
padding: 0;
|
4602
|
-
position: absolute;
|
4603
|
-
width: 1px;
|
4604
|
-
}
|
4605
|
-
`;
|
4606
4516
|
const Wysiwyg = React.forwardRef(
|
4607
4517
|
({ hint, disabled, label, name: name2, placeholder, required, labelAction }, forwardedRef) => {
|
4608
4518
|
const field = useField(name2);
|
@@ -4667,9 +4577,9 @@ const Wysiwyg = React.forwardRef(
|
|
4667
4577
|
insertFile(editorRef, formattedFiles);
|
4668
4578
|
setMediaLibVisible(false);
|
4669
4579
|
};
|
4670
|
-
return /* @__PURE__ */ jsxs(Field, { name: name2, hint, error: field.error, required, children: [
|
4580
|
+
return /* @__PURE__ */ jsxs(Field.Root, { name: name2, hint, error: field.error, required, children: [
|
4671
4581
|
/* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
4672
|
-
/* @__PURE__ */ jsx(
|
4582
|
+
/* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
|
4673
4583
|
/* @__PURE__ */ jsxs(
|
4674
4584
|
EditorLayout,
|
4675
4585
|
{
|
@@ -4710,14 +4620,15 @@ const Wysiwyg = React.forwardRef(
|
|
4710
4620
|
]
|
4711
4621
|
}
|
4712
4622
|
),
|
4713
|
-
/* @__PURE__ */ jsx(
|
4714
|
-
/* @__PURE__ */ jsx(
|
4623
|
+
/* @__PURE__ */ jsx(Field.Hint, {}),
|
4624
|
+
/* @__PURE__ */ jsx(Field.Error, {})
|
4715
4625
|
] }),
|
4716
4626
|
mediaLibVisible && // @ts-expect-error – TODO: fix this way of injecting because it's not really typeable without a registry.
|
4717
4627
|
/* @__PURE__ */ jsx(MediaLibraryDialog, { onClose: handleToggleMediaLib, onSelectAssets: handleSelectAssets })
|
4718
4628
|
] });
|
4719
4629
|
}
|
4720
4630
|
);
|
4631
|
+
const MemoizedWysiwyg = React.memo(Wysiwyg);
|
4721
4632
|
const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
|
4722
4633
|
const { id } = useDoc();
|
4723
4634
|
const isFormDisabled = useForm("InputRenderer", (state) => state.disabled);
|
@@ -4767,10 +4678,10 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
|
|
4767
4678
|
}
|
4768
4679
|
switch (props.type) {
|
4769
4680
|
case "blocks":
|
4770
|
-
return /* @__PURE__ */ jsx(
|
4681
|
+
return /* @__PURE__ */ jsx(MemoizedBlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
|
4771
4682
|
case "component":
|
4772
4683
|
return /* @__PURE__ */ jsx(
|
4773
|
-
|
4684
|
+
MemoizedComponentInput,
|
4774
4685
|
{
|
4775
4686
|
...props,
|
4776
4687
|
hint,
|
@@ -4782,11 +4693,11 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
|
|
4782
4693
|
case "dynamiczone":
|
4783
4694
|
return /* @__PURE__ */ jsx(DynamicZone, { ...props, hint, disabled: fieldIsDisabled });
|
4784
4695
|
case "relation":
|
4785
|
-
return /* @__PURE__ */ jsx(
|
4696
|
+
return /* @__PURE__ */ jsx(MemoizedRelationsField, { ...props, hint, disabled: fieldIsDisabled });
|
4786
4697
|
case "richtext":
|
4787
|
-
return /* @__PURE__ */ jsx(
|
4698
|
+
return /* @__PURE__ */ jsx(MemoizedWysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
|
4788
4699
|
case "uid":
|
4789
|
-
return /* @__PURE__ */ jsx(
|
4700
|
+
return /* @__PURE__ */ jsx(MemoizedUIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
|
4790
4701
|
case "enumeration":
|
4791
4702
|
return /* @__PURE__ */ jsx(
|
4792
4703
|
InputRenderer$1,
|
@@ -4858,6 +4769,7 @@ const getMinMax = (attribute) => {
|
|
4858
4769
|
return { maximum: void 0, minimum: void 0 };
|
4859
4770
|
}
|
4860
4771
|
};
|
4772
|
+
const MemoizedInputRenderer = memo(InputRenderer);
|
4861
4773
|
const DynamicComponent = ({
|
4862
4774
|
componentUid,
|
4863
4775
|
disabled,
|
@@ -4871,7 +4783,6 @@ const DynamicComponent = ({
|
|
4871
4783
|
dynamicComponentsByCategory = {},
|
4872
4784
|
onAddComponent
|
4873
4785
|
}) => {
|
4874
|
-
const [isOpen, setIsOpen] = React.useState(true);
|
4875
4786
|
const { formatMessage } = useIntl();
|
4876
4787
|
const formValues = useForm("DynamicComponent", (state) => state.values);
|
4877
4788
|
const {
|
@@ -4880,7 +4791,7 @@ const DynamicComponent = ({
|
|
4880
4791
|
const title = React.useMemo(() => {
|
4881
4792
|
const { mainField } = components[componentUid]?.settings ?? { mainField: "id" };
|
4882
4793
|
const mainFieldValue = getIn(formValues, `${name2}.${index}.${mainField}`);
|
4883
|
-
const displayedValue = mainField === "id" ? "" : String(mainFieldValue).trim();
|
4794
|
+
const displayedValue = mainField === "id" || !mainFieldValue ? "" : String(mainFieldValue).trim();
|
4884
4795
|
const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
|
4885
4796
|
return mainValue;
|
4886
4797
|
}, [componentUid, components, formValues, name2, index]);
|
@@ -4891,9 +4802,6 @@ const DynamicComponent = ({
|
|
4891
4802
|
) ?? { icon: null, displayName: null };
|
4892
4803
|
return { icon: icon2, displayName: displayName2 };
|
4893
4804
|
}, [componentUid, dynamicComponentsByCategory]);
|
4894
|
-
const handleToggle = () => {
|
4895
|
-
setIsOpen((s) => !s);
|
4896
|
-
};
|
4897
4805
|
const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(!disabled, {
|
4898
4806
|
type: `${ItemTypes.DYNAMIC_ZONE}_${name2}`,
|
4899
4807
|
index,
|
@@ -4911,9 +4819,9 @@ const DynamicComponent = ({
|
|
4911
4819
|
dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
|
4912
4820
|
}, [dragPreviewRef, index]);
|
4913
4821
|
const composedBoxRefs = useComposedRefs(boxRef, dropRef);
|
4914
|
-
const accordionActions = disabled ? null : /* @__PURE__ */ jsxs(
|
4822
|
+
const accordionActions = disabled ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
|
4915
4823
|
/* @__PURE__ */ jsx(
|
4916
|
-
|
4824
|
+
IconButton,
|
4917
4825
|
{
|
4918
4826
|
borderWidth: 0,
|
4919
4827
|
label: formatMessage(
|
@@ -4930,10 +4838,7 @@ const DynamicComponent = ({
|
|
4930
4838
|
/* @__PURE__ */ jsx(
|
4931
4839
|
IconButton,
|
4932
4840
|
{
|
4933
|
-
forwardedAs: "div",
|
4934
|
-
role: "button",
|
4935
4841
|
borderWidth: 0,
|
4936
|
-
tabIndex: 0,
|
4937
4842
|
onClick: (e) => e.stopPropagation(),
|
4938
4843
|
"data-handler-id": handlerId,
|
4939
4844
|
ref: dragRef,
|
@@ -4948,7 +4853,7 @@ const DynamicComponent = ({
|
|
4948
4853
|
/* @__PURE__ */ jsxs(Menu.Root, { children: [
|
4949
4854
|
/* @__PURE__ */ jsxs(Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
|
4950
4855
|
/* @__PURE__ */ jsx(More, { "aria-hidden": true, focusable: false }),
|
4951
|
-
/* @__PURE__ */ jsx(VisuallyHidden, {
|
4856
|
+
/* @__PURE__ */ jsx(VisuallyHidden, { tag: "span", children: formatMessage({
|
4952
4857
|
id: getTranslation("components.DynamicZone.more-actions"),
|
4953
4858
|
defaultMessage: "More actions"
|
4954
4859
|
}) })
|
@@ -4977,42 +4882,28 @@ const DynamicComponent = ({
|
|
4977
4882
|
] })
|
4978
4883
|
] })
|
4979
4884
|
] });
|
4980
|
-
|
4885
|
+
const accordionTitle = title ? `${displayName} ${title}` : displayName;
|
4886
|
+
const accordionValue = React.useId();
|
4887
|
+
return /* @__PURE__ */ jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
|
4981
4888
|
/* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Rectangle, { background: "neutral200" }) }),
|
4982
|
-
/* @__PURE__ */ jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsx(Preview, {}) : /* @__PURE__ */
|
4983
|
-
/* @__PURE__ */
|
4984
|
-
|
4985
|
-
|
4986
|
-
|
4987
|
-
|
4988
|
-
|
4989
|
-
|
4990
|
-
|
4991
|
-
|
4992
|
-
|
4889
|
+
/* @__PURE__ */ jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsx(Preview, {}) : /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsxs(Accordion.Item, { value: accordionValue, children: [
|
4890
|
+
/* @__PURE__ */ jsxs(Accordion.Header, { children: [
|
4891
|
+
/* @__PURE__ */ jsx(
|
4892
|
+
Accordion.Trigger,
|
4893
|
+
{
|
4894
|
+
icon: icon && COMPONENT_ICONS[icon] ? COMPONENT_ICONS[icon] : COMPONENT_ICONS.dashboard,
|
4895
|
+
children: accordionTitle
|
4896
|
+
}
|
4897
|
+
),
|
4898
|
+
/* @__PURE__ */ jsx(Accordion.Actions, { children: accordionActions })
|
4899
|
+
] }),
|
4900
|
+
/* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsx(Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsx(Grid$1, { gap: 4, children: row.map(({ size, ...field }) => {
|
4993
4901
|
const fieldName = `${name2}.${index}.${field.name}`;
|
4994
|
-
return /* @__PURE__ */ jsx(GridItem, { col: size, s: 12, xs: 12, children: /* @__PURE__ */ jsx(
|
4902
|
+
return /* @__PURE__ */ jsx(GridItem, { col: size, s: 12, xs: 12, children: /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...field, name: fieldName }) }, fieldName);
|
4995
4903
|
}) }, rowInd)) }) }) })
|
4996
|
-
] }) })
|
4904
|
+
] }) }) })
|
4997
4905
|
] });
|
4998
4906
|
};
|
4999
|
-
const ActionsFlex = styled(Flex)`
|
5000
|
-
/*
|
5001
|
-
we need to remove the background from the button but we can't
|
5002
|
-
wrap the element in styled because it breaks the forwardedAs which
|
5003
|
-
we need for drag handler to work on firefox
|
5004
|
-
*/
|
5005
|
-
div[role='button'] {
|
5006
|
-
background: transparent;
|
5007
|
-
}
|
5008
|
-
`;
|
5009
|
-
const IconButtonCustom = styled(IconButton)`
|
5010
|
-
background-color: transparent;
|
5011
|
-
|
5012
|
-
svg path {
|
5013
|
-
fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600};
|
5014
|
-
}
|
5015
|
-
`;
|
5016
4907
|
const StyledBox = styled(Box)`
|
5017
4908
|
> div:first-child {
|
5018
4909
|
box-shadow: ${({ theme }) => theme.shadows.tableShadow};
|
@@ -5083,7 +4974,7 @@ const [DynamicZoneProvider, useDynamicZone] = createContext(
|
|
5083
4974
|
);
|
5084
4975
|
const DynamicZone = ({
|
5085
4976
|
attribute,
|
5086
|
-
disabled,
|
4977
|
+
disabled: disabledProp,
|
5087
4978
|
hint,
|
5088
4979
|
label,
|
5089
4980
|
labelAction,
|
@@ -5093,7 +4984,8 @@ const DynamicZone = ({
|
|
5093
4984
|
const { max = Infinity, min = -Infinity } = attribute ?? {};
|
5094
4985
|
const [addComponentIsOpen, setAddComponentIsOpen] = React.useState(false);
|
5095
4986
|
const [liveText, setLiveText] = React.useState("");
|
5096
|
-
const { components } = useDoc();
|
4987
|
+
const { components, isLoading } = useDoc();
|
4988
|
+
const disabled = disabledProp || isLoading;
|
5097
4989
|
const { addFieldRow, removeFieldRow, moveFieldRow } = useForm(
|
5098
4990
|
"DynamicZone",
|
5099
4991
|
({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
|
@@ -5301,19 +5193,19 @@ const DynamicZone = ({
|
|
5301
5193
|
] }) });
|
5302
5194
|
};
|
5303
5195
|
export {
|
5304
|
-
BlocksInput as B,
|
5305
|
-
ComponentInput as C,
|
5306
5196
|
DynamicZone as D,
|
5307
|
-
|
5197
|
+
MemoizedInputRenderer as M,
|
5308
5198
|
NotAllowedInput as N,
|
5309
|
-
UIDInput as U,
|
5310
|
-
Wysiwyg as W,
|
5311
5199
|
useDynamicZone as a,
|
5312
5200
|
useFieldHint as b,
|
5313
5201
|
createDefaultForm as c,
|
5202
|
+
MemoizedUIDInput as d,
|
5203
|
+
MemoizedWysiwyg as e,
|
5204
|
+
MemoizedComponentInput as f,
|
5205
|
+
MemoizedBlocksInput as g,
|
5314
5206
|
prepareTempKeys as p,
|
5315
5207
|
removeFieldsThatDontExistOnSchema as r,
|
5316
5208
|
transformDocument as t,
|
5317
5209
|
useLazyComponents as u
|
5318
5210
|
};
|
5319
|
-
//# sourceMappingURL=Field-
|
5211
|
+
//# sourceMappingURL=Field-C1nUKcdS.mjs.map
|