@strapi/content-manager 0.0.0-next.bb6ff32f5168f3e380d3d9acba90a9d53bfcfb89 → 0.0.0-next.bffd3c1819cd08304e7d270e88b4973e9fcbc183
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-C0QyJgRA.js.map +1 -1
- package/dist/_chunks/CardDragPreview-DOxamsuj.mjs.map +1 -1
- package/dist/_chunks/{ComponentConfigurationPage-DqB7veg_.mjs → ComponentConfigurationPage-9_4yUE9L.mjs} +3 -3
- package/dist/_chunks/{ComponentConfigurationPage-DqB7veg_.mjs.map → ComponentConfigurationPage-9_4yUE9L.mjs.map} +1 -1
- package/dist/_chunks/{ComponentConfigurationPage-Bmwd-G2q.js → ComponentConfigurationPage-DBSh-kET.js} +4 -5
- package/dist/_chunks/{ComponentConfigurationPage-Bmwd-G2q.js.map → ComponentConfigurationPage-DBSh-kET.js.map} +1 -1
- package/dist/_chunks/{ComponentIcon-BXdiCGQp.js → ComponentIcon-CRbtQEUV.js} +2 -3
- package/dist/_chunks/{ComponentIcon-BXdiCGQp.js.map → ComponentIcon-CRbtQEUV.js.map} +1 -1
- package/dist/_chunks/ComponentIcon-u4bIXTFY.mjs.map +1 -1
- package/dist/_chunks/{EditConfigurationPage-DmruXqgR.js → EditConfigurationPage-Bl_U2JgH.js} +4 -5
- package/dist/_chunks/{EditConfigurationPage-DmruXqgR.js.map → EditConfigurationPage-Bl_U2JgH.js.map} +1 -1
- package/dist/_chunks/{EditConfigurationPage-CDLVqqay.mjs → EditConfigurationPage-COe6hjPC.mjs} +3 -3
- package/dist/_chunks/{EditConfigurationPage-CDLVqqay.mjs.map → EditConfigurationPage-COe6hjPC.mjs.map} +1 -1
- package/dist/_chunks/{EditViewPage-0zrWXtMz.js → EditViewPage-D4yFJET6.js} +14 -78
- package/dist/_chunks/EditViewPage-D4yFJET6.js.map +1 -0
- package/dist/_chunks/{EditViewPage-BgcbLW7w.mjs → EditViewPage-DrmVmYN0.mjs} +11 -74
- package/dist/_chunks/EditViewPage-DrmVmYN0.mjs.map +1 -0
- package/dist/_chunks/FieldTypeIcon-CMlNO8PE.mjs.map +1 -1
- package/dist/_chunks/FieldTypeIcon-Dnwq_IRF.js.map +1 -1
- package/dist/_chunks/{Form-CIDoAFoD.js → Form-C4rSaGsz.js} +5 -6
- package/dist/_chunks/{Form-CIDoAFoD.js.map → Form-C4rSaGsz.js.map} +1 -1
- package/dist/_chunks/{Form-WNWgTBtb.mjs → Form-DamaxNpG.mjs} +3 -3
- package/dist/_chunks/{Form-WNWgTBtb.mjs.map → Form-DamaxNpG.mjs.map} +1 -1
- package/dist/_chunks/{History-DEZDHwP0.mjs → History-D1PreDSY.mjs} +36 -10
- package/dist/_chunks/History-D1PreDSY.mjs.map +1 -0
- package/dist/_chunks/{History-BNvm2TK2.js → History-DTm8UCCQ.js} +47 -22
- package/dist/_chunks/History-DTm8UCCQ.js.map +1 -0
- package/dist/_chunks/{Field-BV7ZYdqe.js → Input-B7sapvBG.js} +1331 -1329
- package/dist/_chunks/Input-B7sapvBG.js.map +1 -0
- package/dist/_chunks/{Field-fTjqtEem.mjs → Input-CZ1YvjHR.mjs} +1245 -1243
- package/dist/_chunks/Input-CZ1YvjHR.mjs.map +1 -0
- package/dist/_chunks/{ListConfigurationPage-Ddz3G-It.mjs → ListConfigurationPage-Bbi32isk.mjs} +6 -5
- package/dist/_chunks/ListConfigurationPage-Bbi32isk.mjs.map +1 -0
- package/dist/_chunks/{ListConfigurationPage-B3FZwPHp.js → ListConfigurationPage-ysFMjKI3.js} +6 -6
- package/dist/_chunks/ListConfigurationPage-ysFMjKI3.js.map +1 -0
- package/dist/_chunks/{ListViewPage-BsLdw25U.mjs → ListViewPage-Bud_jBDQ.mjs} +55 -51
- package/dist/_chunks/ListViewPage-Bud_jBDQ.mjs.map +1 -0
- package/dist/_chunks/{ListViewPage-BEilNylQ.js → ListViewPage-DTuuxU3n.js} +61 -58
- package/dist/_chunks/ListViewPage-DTuuxU3n.js.map +1 -0
- package/dist/_chunks/{NoContentTypePage-BD2C-IMr.js → NoContentTypePage-CL7VVeYs.js} +2 -2
- package/dist/_chunks/{NoContentTypePage-BD2C-IMr.js.map → NoContentTypePage-CL7VVeYs.js.map} +1 -1
- package/dist/_chunks/{NoContentTypePage-D0jXEWKM.mjs → NoContentTypePage-DVhkugsf.mjs} +2 -2
- package/dist/_chunks/{NoContentTypePage-D0jXEWKM.mjs.map → NoContentTypePage-DVhkugsf.mjs.map} +1 -1
- package/dist/_chunks/{NoPermissionsPage-CIPqlrQq.mjs → NoPermissionsPage-CMdM-dCo.mjs} +2 -2
- package/dist/_chunks/{NoPermissionsPage-CIPqlrQq.mjs.map → NoPermissionsPage-CMdM-dCo.mjs.map} +1 -1
- package/dist/_chunks/{NoPermissionsPage-yNOvz9XO.js → NoPermissionsPage-v7I599vC.js} +2 -2
- package/dist/_chunks/{NoPermissionsPage-yNOvz9XO.js.map → NoPermissionsPage-v7I599vC.js.map} +1 -1
- package/dist/_chunks/{Preview-ot2fh0yZ.mjs → Preview-BNuU0SuQ.mjs} +74 -24
- package/dist/_chunks/Preview-BNuU0SuQ.mjs.map +1 -0
- package/dist/_chunks/{Preview-1cqLecKr.js → Preview-Cxq-uI6D.js} +73 -24
- package/dist/_chunks/Preview-Cxq-uI6D.js.map +1 -0
- package/dist/_chunks/{Relations-CfdwHP-0.mjs → Relations-C2Ahkrdg.mjs} +6 -8
- package/dist/_chunks/{Relations-CfdwHP-0.mjs.map → Relations-C2Ahkrdg.mjs.map} +1 -1
- package/dist/_chunks/{Relations-C3U9SKEb.js → Relations-CWS79QQn.js} +7 -10
- package/dist/_chunks/{Relations-C3U9SKEb.js.map → Relations-CWS79QQn.js.map} +1 -1
- package/dist/_chunks/{en-CHOp_xJv.js → en-BR48D_RH.js} +13 -3
- package/dist/_chunks/{en-CHOp_xJv.js.map → en-BR48D_RH.js.map} +1 -1
- package/dist/_chunks/{en-D_BMf0hT.mjs → en-D65uIF6Y.mjs} +13 -3
- package/dist/_chunks/{en-D_BMf0hT.mjs.map → en-D65uIF6Y.mjs.map} +1 -1
- package/dist/_chunks/{fr-B2Kyv8Z9.js → fr-C43IbhA_.js} +4 -1
- package/dist/_chunks/{fr-B2Kyv8Z9.js.map → fr-C43IbhA_.js.map} +1 -1
- package/dist/_chunks/{fr--pg5jUbt.mjs → fr-DBseuRuB.mjs} +4 -1
- package/dist/_chunks/{fr--pg5jUbt.mjs.map → fr-DBseuRuB.mjs.map} +1 -1
- package/dist/_chunks/hooks-BAaaKPS_.js.map +1 -1
- package/dist/_chunks/{index-Cg4RLIAw.js → index-DQsvBb_N.js} +518 -207
- package/dist/_chunks/index-DQsvBb_N.js.map +1 -0
- package/dist/_chunks/{index-BzUT1l9A.mjs → index-ZKrsjv-2.mjs} +536 -224
- package/dist/_chunks/index-ZKrsjv-2.mjs.map +1 -0
- package/dist/_chunks/{layout-Cj_1EKbm.js → layout-Cl0NhlQB.js} +5 -6
- package/dist/_chunks/{layout-Cj_1EKbm.js.map → layout-Cl0NhlQB.js.map} +1 -1
- package/dist/_chunks/{layout-C0QEDBAh.mjs → layout-fQk1rMk9.mjs} +4 -4
- package/dist/_chunks/{layout-C0QEDBAh.mjs.map → layout-fQk1rMk9.mjs.map} +1 -1
- package/dist/_chunks/objects-BcXOv6_9.js.map +1 -1
- package/dist/_chunks/objects-D6yBsdmx.mjs.map +1 -1
- package/dist/_chunks/{relations-hDOgJy2R.js → relations-BRfBxVbX.js} +2 -2
- package/dist/_chunks/{relations-hDOgJy2R.js.map → relations-BRfBxVbX.js.map} +1 -1
- package/dist/_chunks/{relations-CgPG3AwU.mjs → relations-BakOFl_1.mjs} +2 -2
- package/dist/_chunks/{relations-CgPG3AwU.mjs.map → relations-BakOFl_1.mjs.map} +1 -1
- package/dist/_chunks/{useDragAndDrop-J0TUUbR6.js → useDragAndDrop-BMtgCYzL.js} +5 -9
- package/dist/_chunks/{useDragAndDrop-J0TUUbR6.js.map → useDragAndDrop-BMtgCYzL.js.map} +1 -1
- package/dist/_chunks/{useDragAndDrop-DdHgKsqq.mjs → useDragAndDrop-DJ6jqvZN.mjs} +4 -7
- package/dist/_chunks/{useDragAndDrop-DdHgKsqq.mjs.map → useDragAndDrop-DJ6jqvZN.mjs.map} +1 -1
- package/dist/_chunks/{useDebounce-DmuSJIF3.mjs → usePrev-CZGy2Vjf.mjs} +11 -11
- package/dist/_chunks/usePrev-CZGy2Vjf.mjs.map +1 -0
- package/dist/_chunks/{useDebounce-CtcjDB3L.js → usePrev-D5J_2fEu.js} +8 -8
- package/dist/_chunks/usePrev-D5J_2fEu.js.map +1 -0
- package/dist/admin/index.js +2 -1
- package/dist/admin/index.js.map +1 -1
- package/dist/admin/index.mjs +6 -5
- package/dist/admin/src/content-manager.d.ts +3 -2
- 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 +19 -2
- package/dist/admin/src/pages/EditView/components/DocumentActions.d.ts +1 -1
- package/dist/admin/src/pages/EditView/components/DocumentStatus.d.ts +1 -1
- package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Code.d.ts +7 -0
- package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/utils/prismLanguages.d.ts +49 -0
- package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/utils/constants.d.ts +1 -0
- package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.d.ts +4 -1
- package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/Field.d.ts +4 -1
- package/dist/admin/src/pages/EditView/components/FormLayout.d.ts +27 -0
- package/dist/admin/src/pages/EditView/utils/data.d.ts +1 -0
- package/dist/admin/src/preview/pages/Preview.d.ts +1 -1
- package/dist/admin/src/preview/services/preview.d.ts +1 -1
- package/dist/admin/src/services/api.d.ts +1 -1
- package/dist/admin/src/services/components.d.ts +2 -2
- package/dist/admin/src/services/contentTypes.d.ts +3 -3
- package/dist/admin/src/services/documents.d.ts +16 -19
- package/dist/admin/src/services/init.d.ts +1 -1
- package/dist/admin/src/services/relations.d.ts +2 -2
- package/dist/admin/src/services/uid.d.ts +3 -3
- package/dist/server/index.js +230 -187
- package/dist/server/index.js.map +1 -1
- package/dist/server/index.mjs +231 -187
- package/dist/server/index.mjs.map +1 -1
- package/dist/server/src/controllers/utils/metadata.d.ts +1 -0
- package/dist/server/src/controllers/utils/metadata.d.ts.map +1 -1
- package/dist/server/src/history/controllers/history-version.d.ts +1 -1
- package/dist/server/src/history/controllers/history-version.d.ts.map +1 -1
- package/dist/server/src/history/services/history.d.ts +3 -3
- package/dist/server/src/history/services/history.d.ts.map +1 -1
- package/dist/server/src/history/services/utils.d.ts +6 -10
- package/dist/server/src/history/services/utils.d.ts.map +1 -1
- package/dist/server/src/index.d.ts +3 -2
- package/dist/server/src/index.d.ts.map +1 -1
- package/dist/server/src/preview/controllers/validation/preview.d.ts.map +1 -1
- package/dist/server/src/preview/index.d.ts.map +1 -1
- package/dist/server/src/preview/services/index.d.ts +1 -0
- package/dist/server/src/preview/services/index.d.ts.map +1 -1
- package/dist/server/src/preview/services/preview-config.d.ts +2 -0
- package/dist/server/src/preview/services/preview-config.d.ts.map +1 -1
- package/dist/server/src/preview/utils.d.ts +1 -0
- package/dist/server/src/preview/utils.d.ts.map +1 -1
- package/dist/server/src/register.d.ts.map +1 -1
- package/dist/server/src/services/document-metadata.d.ts +4 -2
- package/dist/server/src/services/document-metadata.d.ts.map +1 -1
- package/dist/server/src/services/index.d.ts +3 -2
- package/dist/server/src/services/index.d.ts.map +1 -1
- package/dist/server/src/services/utils/configuration/index.d.ts +2 -2
- package/dist/server/src/services/utils/configuration/layouts.d.ts +2 -2
- package/dist/server/src/services/utils/populate.d.ts +2 -2
- package/dist/server/src/services/utils/populate.d.ts.map +1 -1
- package/package.json +12 -11
- package/dist/_chunks/EditViewPage-0zrWXtMz.js.map +0 -1
- package/dist/_chunks/EditViewPage-BgcbLW7w.mjs.map +0 -1
- package/dist/_chunks/Field-BV7ZYdqe.js.map +0 -1
- package/dist/_chunks/Field-fTjqtEem.mjs.map +0 -1
- package/dist/_chunks/History-BNvm2TK2.js.map +0 -1
- package/dist/_chunks/History-DEZDHwP0.mjs.map +0 -1
- package/dist/_chunks/ListConfigurationPage-B3FZwPHp.js.map +0 -1
- package/dist/_chunks/ListConfigurationPage-Ddz3G-It.mjs.map +0 -1
- package/dist/_chunks/ListViewPage-BEilNylQ.js.map +0 -1
- package/dist/_chunks/ListViewPage-BsLdw25U.mjs.map +0 -1
- package/dist/_chunks/Preview-1cqLecKr.js.map +0 -1
- package/dist/_chunks/Preview-ot2fh0yZ.mjs.map +0 -1
- package/dist/_chunks/index-BzUT1l9A.mjs.map +0 -1
- package/dist/_chunks/index-Cg4RLIAw.js.map +0 -1
- package/dist/_chunks/useDebounce-CtcjDB3L.js.map +0 -1
- package/dist/_chunks/useDebounce-DmuSJIF3.mjs.map +0 -1
- package/dist/admin/src/preview/constants.d.ts +0 -1
- package/dist/server/src/preview/constants.d.ts +0 -2
- package/dist/server/src/preview/constants.d.ts.map +0 -1
@@ -1,25 +1,75 @@
|
|
1
1
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
2
2
|
import * as React from "react";
|
3
3
|
import { useState, useEffect, useCallback, memo } from "react";
|
4
|
-
import { useStrapiApp, createContext, useField,
|
5
|
-
import { Box, SingleSelect, SingleSelectOption, Typography, Flex, BaseLink, Button, Popover, Field, Tooltip, IconButton, useComposedRefs, Portal, FocusTrap, Divider, VisuallyHidden, Grid as Grid$1,
|
6
|
-
import
|
4
|
+
import { useStrapiApp, createContext, useField, useForm, useNotification, useAPIErrorHandler, useQueryParams, useFocusInputField, InputRenderer as InputRenderer$1 } from "@strapi/admin/strapi-admin";
|
5
|
+
import { Box, SingleSelect, SingleSelectOption, Typography, Flex, BaseLink, Button, Popover, Field, Tooltip, IconButton, useComposedRefs, Portal, FocusTrap, Divider, VisuallyHidden, Accordion, Menu, MenuItem, Grid as Grid$1, TextInput, IconButtonGroup, TextButton } from "@strapi/design-system";
|
6
|
+
import { CodeBlock as CodeBlock$1, HeadingOne, HeadingTwo, HeadingThree, HeadingFour, HeadingFive, HeadingSix, Image as Image$1, NumberList, BulletList, Paragraph, Quotes, Link as Link$1, Drag, Collapse, Bold, Italic, Underline, StrikeThrough, Code, Expand, PlusCircle, Trash, More, EyeStriked, CheckCircle, WarningCircle, Loader, ArrowClockwise, Plus } from "@strapi/icons";
|
7
7
|
import { useIntl } from "react-intl";
|
8
|
-
import {
|
9
|
-
import { generateNKeysBetween } from "fractional-indexing";
|
10
|
-
import { u as useComponent, C as ComponentProvider, M as MemoizedRelationsField } from "./Relations-CfdwHP-0.mjs";
|
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";
|
8
|
+
import { g as getTranslation, m as useDocLayout, c as useDoc, n as createDefaultForm, t as transformDocument, e as contentManagerApi, o as CLONE_PATH, d as buildValidParams, f as useDocumentRBAC, S as SINGLE_TYPES } from "./index-ZKrsjv-2.mjs";
|
12
9
|
import { styled, css, keyframes } from "styled-components";
|
13
|
-
import { C as ComponentIcon, a as COMPONENT_ICONS } from "./ComponentIcon-u4bIXTFY.mjs";
|
14
|
-
import { getEmptyImage } from "react-dnd-html5-backend";
|
15
|
-
import { a as DIRECTIONS, u as useDragAndDrop, I as ItemTypes } from "./useDragAndDrop-DdHgKsqq.mjs";
|
16
|
-
import { g as getIn } from "./objects-D6yBsdmx.mjs";
|
17
10
|
import { Editor as Editor$1, Transforms, Node, Element, Range, Path, Point, createEditor } from "slate";
|
18
11
|
import { withHistory } from "slate-history";
|
19
12
|
import { useFocused, useSelected, ReactEditor, Editable, useSlate, Slate, withReact } from "slate-react";
|
20
|
-
import
|
13
|
+
import * as Prism from "prismjs";
|
14
|
+
import "prismjs/themes/prism-solarizedlight.css";
|
15
|
+
import "prismjs/components/prism-asmatmel";
|
16
|
+
import "prismjs/components/prism-bash";
|
17
|
+
import "prismjs/components/prism-basic";
|
18
|
+
import "prismjs/components/prism-c";
|
19
|
+
import "prismjs/components/prism-clojure";
|
20
|
+
import "prismjs/components/prism-cobol";
|
21
|
+
import "prismjs/components/prism-cpp";
|
22
|
+
import "prismjs/components/prism-csharp";
|
23
|
+
import "prismjs/components/prism-dart";
|
24
|
+
import "prismjs/components/prism-docker";
|
25
|
+
import "prismjs/components/prism-elixir";
|
26
|
+
import "prismjs/components/prism-erlang";
|
27
|
+
import "prismjs/components/prism-fortran";
|
28
|
+
import "prismjs/components/prism-fsharp";
|
29
|
+
import "prismjs/components/prism-go";
|
30
|
+
import "prismjs/components/prism-graphql";
|
31
|
+
import "prismjs/components/prism-groovy";
|
32
|
+
import "prismjs/components/prism-haskell";
|
33
|
+
import "prismjs/components/prism-haxe";
|
34
|
+
import "prismjs/components/prism-ini";
|
35
|
+
import "prismjs/components/prism-java";
|
36
|
+
import "prismjs/components/prism-javascript";
|
37
|
+
import "prismjs/components/prism-jsx";
|
38
|
+
import "prismjs/components/prism-json";
|
39
|
+
import "prismjs/components/prism-julia";
|
40
|
+
import "prismjs/components/prism-kotlin";
|
41
|
+
import "prismjs/components/prism-latex";
|
42
|
+
import "prismjs/components/prism-lua";
|
43
|
+
import "prismjs/components/prism-markdown";
|
44
|
+
import "prismjs/components/prism-matlab";
|
45
|
+
import "prismjs/components/prism-makefile";
|
46
|
+
import "prismjs/components/prism-objectivec";
|
47
|
+
import "prismjs/components/prism-perl";
|
48
|
+
import "prismjs/components/prism-php";
|
49
|
+
import "prismjs/components/prism-powershell";
|
50
|
+
import "prismjs/components/prism-python";
|
51
|
+
import "prismjs/components/prism-r";
|
52
|
+
import "prismjs/components/prism-ruby";
|
53
|
+
import "prismjs/components/prism-rust";
|
54
|
+
import "prismjs/components/prism-sas";
|
55
|
+
import "prismjs/components/prism-scala";
|
56
|
+
import "prismjs/components/prism-scheme";
|
57
|
+
import "prismjs/components/prism-sql";
|
58
|
+
import "prismjs/components/prism-stata";
|
59
|
+
import "prismjs/components/prism-swift";
|
60
|
+
import "prismjs/components/prism-typescript";
|
61
|
+
import "prismjs/components/prism-tsx";
|
62
|
+
import "prismjs/components/prism-vbnet";
|
63
|
+
import "prismjs/components/prism-yaml";
|
64
|
+
import { p as prefixFileUrlWithBackendUrl, u as useDebounce, a as usePrev } from "./usePrev-CZGy2Vjf.mjs";
|
65
|
+
import { a as DIRECTIONS, u as useDragAndDrop, I as ItemTypes } from "./useDragAndDrop-DJ6jqvZN.mjs";
|
21
66
|
import * as Toolbar from "@radix-ui/react-toolbar";
|
22
|
-
import {
|
67
|
+
import { getEmptyImage } from "react-dnd-html5-backend";
|
68
|
+
import { useMatch, useLocation } from "react-router-dom";
|
69
|
+
import { g as getIn } from "./objects-D6yBsdmx.mjs";
|
70
|
+
import { u as useComponent, C as ComponentProvider, M as MemoizedRelationsField } from "./Relations-C2Ahkrdg.mjs";
|
71
|
+
import pipe$1 from "lodash/fp/pipe";
|
72
|
+
import { C as ComponentIcon, a as COMPONENT_ICONS } from "./ComponentIcon-u4bIXTFY.mjs";
|
23
73
|
import CodeMirror from "codemirror5";
|
24
74
|
import sanitizeHtml from "sanitize-html";
|
25
75
|
import { getLanguage, highlight, highlightAuto } from "highlight.js";
|
@@ -35,93 +85,6 @@ import sub from "markdown-it-sub";
|
|
35
85
|
import sup from "markdown-it-sup";
|
36
86
|
import "highlight.js/styles/solarized-dark.css";
|
37
87
|
import "codemirror5/addon/display/placeholder";
|
38
|
-
const BLOCK_LIST_ATTRIBUTE_KEYS = ["__component", "__temp_key__"];
|
39
|
-
const traverseData = (predicate, transform) => (schema, components = {}) => (data = {}) => {
|
40
|
-
const traverse = (datum, attributes) => {
|
41
|
-
return Object.entries(datum).reduce((acc, [key, value]) => {
|
42
|
-
const attribute = attributes[key];
|
43
|
-
if (BLOCK_LIST_ATTRIBUTE_KEYS.includes(key) || value === null || value === void 0) {
|
44
|
-
acc[key] = value;
|
45
|
-
return acc;
|
46
|
-
}
|
47
|
-
if (attribute.type === "component") {
|
48
|
-
if (attribute.repeatable) {
|
49
|
-
const componentValue = predicate(attribute, value) ? transform(value, attribute) : value;
|
50
|
-
acc[key] = componentValue.map(
|
51
|
-
(componentData) => traverse(componentData, components[attribute.component]?.attributes ?? {})
|
52
|
-
);
|
53
|
-
} else {
|
54
|
-
const componentValue = predicate(attribute, value) ? transform(value, attribute) : value;
|
55
|
-
acc[key] = traverse(componentValue, components[attribute.component]?.attributes ?? {});
|
56
|
-
}
|
57
|
-
} else if (attribute.type === "dynamiczone") {
|
58
|
-
const dynamicZoneValue = predicate(attribute, value) ? transform(value, attribute) : value;
|
59
|
-
acc[key] = dynamicZoneValue.map(
|
60
|
-
(componentData) => traverse(componentData, components[componentData.__component]?.attributes ?? {})
|
61
|
-
);
|
62
|
-
} else if (predicate(attribute, value)) {
|
63
|
-
acc[key] = transform(value, attribute);
|
64
|
-
} else {
|
65
|
-
acc[key] = value;
|
66
|
-
}
|
67
|
-
return acc;
|
68
|
-
}, {});
|
69
|
-
};
|
70
|
-
return traverse(data, schema.attributes);
|
71
|
-
};
|
72
|
-
const removeProhibitedFields = (prohibitedFields) => traverseData(
|
73
|
-
(attribute) => prohibitedFields.includes(attribute.type),
|
74
|
-
() => ""
|
75
|
-
);
|
76
|
-
const prepareRelations = traverseData(
|
77
|
-
(attribute) => attribute.type === "relation",
|
78
|
-
() => ({
|
79
|
-
connect: [],
|
80
|
-
disconnect: []
|
81
|
-
})
|
82
|
-
);
|
83
|
-
const prepareTempKeys = traverseData(
|
84
|
-
(attribute) => attribute.type === "component" && attribute.repeatable || attribute.type === "dynamiczone",
|
85
|
-
(data) => {
|
86
|
-
if (Array.isArray(data) && data.length > 0) {
|
87
|
-
const keys = generateNKeysBetween(void 0, void 0, data.length);
|
88
|
-
return data.map((datum, index) => ({
|
89
|
-
...datum,
|
90
|
-
__temp_key__: keys[index]
|
91
|
-
}));
|
92
|
-
}
|
93
|
-
return data;
|
94
|
-
}
|
95
|
-
);
|
96
|
-
const removeFieldsThatDontExistOnSchema = (schema) => (data) => {
|
97
|
-
const schemaKeys = Object.keys(schema.attributes);
|
98
|
-
const dataKeys = Object.keys(data);
|
99
|
-
const keysToRemove = dataKeys.filter((key) => !schemaKeys.includes(key));
|
100
|
-
const revisedData = [...keysToRemove, ...DOCUMENT_META_FIELDS].reduce((acc, key) => {
|
101
|
-
delete acc[key];
|
102
|
-
return acc;
|
103
|
-
}, structuredClone(data));
|
104
|
-
return revisedData;
|
105
|
-
};
|
106
|
-
const removeNullValues = (data) => {
|
107
|
-
return Object.entries(data).reduce((acc, [key, value]) => {
|
108
|
-
if (value === null) {
|
109
|
-
return acc;
|
110
|
-
}
|
111
|
-
acc[key] = value;
|
112
|
-
return acc;
|
113
|
-
}, {});
|
114
|
-
};
|
115
|
-
const transformDocument = (schema, components = {}) => (document2) => {
|
116
|
-
const transformations = pipe$1(
|
117
|
-
removeFieldsThatDontExistOnSchema(schema),
|
118
|
-
removeProhibitedFields(["password"])(schema, components),
|
119
|
-
removeNullValues,
|
120
|
-
prepareRelations(schema, components),
|
121
|
-
prepareTempKeys(schema, components)
|
122
|
-
);
|
123
|
-
return transformations(document2);
|
124
|
-
};
|
125
88
|
const componentStore = /* @__PURE__ */ new Map();
|
126
89
|
const useLazyComponents = (componentUids = []) => {
|
127
90
|
const [lazyComponentStore, setLazyComponentStore] = useState(Object.fromEntries(componentStore));
|
@@ -163,7 +126,8 @@ const useLazyComponents = (componentUids = []) => {
|
|
163
126
|
const codeLanguages = [
|
164
127
|
{
|
165
128
|
value: "asm",
|
166
|
-
label: "Assembly"
|
129
|
+
label: "Assembly",
|
130
|
+
decorate: "asmatmel"
|
167
131
|
},
|
168
132
|
{
|
169
133
|
value: "bash",
|
@@ -199,7 +163,8 @@ const codeLanguages = [
|
|
199
163
|
},
|
200
164
|
{
|
201
165
|
value: "dockerfile",
|
202
|
-
label: "Dockerfile"
|
166
|
+
label: "Dockerfile",
|
167
|
+
decorate: "docker"
|
203
168
|
},
|
204
169
|
{
|
205
170
|
value: "elixir",
|
@@ -355,7 +320,8 @@ const codeLanguages = [
|
|
355
320
|
},
|
356
321
|
{
|
357
322
|
value: "typescript",
|
358
|
-
label: "TypeScript"
|
323
|
+
label: "TypeScript",
|
324
|
+
decorate: "ts"
|
359
325
|
},
|
360
326
|
{
|
361
327
|
value: "tsx",
|
@@ -371,7 +337,8 @@ const codeLanguages = [
|
|
371
337
|
},
|
372
338
|
{
|
373
339
|
value: "yaml",
|
374
|
-
label: "YAML"
|
340
|
+
label: "YAML",
|
341
|
+
decorate: "yml"
|
375
342
|
}
|
376
343
|
];
|
377
344
|
const baseHandleConvert = (editor, attributesToSet) => {
|
@@ -437,6 +404,29 @@ const pressEnterTwiceToExit = (editor) => {
|
|
437
404
|
});
|
438
405
|
}
|
439
406
|
};
|
407
|
+
const decorateCode = ([node, path]) => {
|
408
|
+
const ranges = [];
|
409
|
+
if (!Element.isElement(node) || node.type !== "code") return ranges;
|
410
|
+
const text = Node.string(node);
|
411
|
+
const language = codeLanguages.find((lang) => lang.value === node.language);
|
412
|
+
const decorateKey = language?.decorate ?? language?.value;
|
413
|
+
const selectedLanguage = Prism.languages[decorateKey || "plaintext"];
|
414
|
+
const tokens = Prism.tokenize(text, selectedLanguage);
|
415
|
+
let start = 0;
|
416
|
+
for (const token of tokens) {
|
417
|
+
const length = token.length;
|
418
|
+
const end = start + length;
|
419
|
+
if (typeof token !== "string") {
|
420
|
+
ranges.push({
|
421
|
+
anchor: { path, offset: start },
|
422
|
+
focus: { path, offset: end },
|
423
|
+
className: `token ${token.type}`
|
424
|
+
});
|
425
|
+
}
|
426
|
+
start = end;
|
427
|
+
}
|
428
|
+
return ranges;
|
429
|
+
};
|
440
430
|
const CodeBlock = styled.pre`
|
441
431
|
border-radius: ${({ theme }) => theme.borderRadius};
|
442
432
|
background-color: ${({ theme }) => theme.colors.neutral100};
|
@@ -508,7 +498,7 @@ const CodeEditor = (props) => {
|
|
508
498
|
const codeBlocks = {
|
509
499
|
code: {
|
510
500
|
renderElement: (props) => /* @__PURE__ */ jsx(CodeEditor, { ...props }),
|
511
|
-
icon:
|
501
|
+
icon: CodeBlock$1,
|
512
502
|
label: {
|
513
503
|
id: "components.Blocks.blocks.code",
|
514
504
|
defaultMessage: "Code block"
|
@@ -521,8 +511,7 @@ const codeBlocks = {
|
|
521
511
|
handleEnterKey(editor) {
|
522
512
|
pressEnterTwiceToExit(editor);
|
523
513
|
},
|
524
|
-
snippets: ["```"]
|
525
|
-
dragHandleTopMargin: "10px"
|
514
|
+
snippets: ["```"]
|
526
515
|
}
|
527
516
|
};
|
528
517
|
const H1 = styled(Typography).attrs({ tag: "h1" })`
|
@@ -697,8 +686,7 @@ const ImageDialog = () => {
|
|
697
686
|
const [isOpen, setIsOpen] = React.useState(true);
|
698
687
|
const { editor } = useBlocksEditorContext("ImageDialog");
|
699
688
|
const components = useStrapiApp("ImageDialog", (state) => state.components);
|
700
|
-
if (!components || !isOpen)
|
701
|
-
return null;
|
689
|
+
if (!components || !isOpen) return null;
|
702
690
|
const MediaLibraryDialog = components["media-library"];
|
703
691
|
const insertImages = (images) => {
|
704
692
|
Transforms.unwrapNodes(editor, {
|
@@ -707,14 +695,12 @@ const ImageDialog = () => {
|
|
707
695
|
});
|
708
696
|
const nodeEntryBeingReplaced = Editor$1.above(editor, {
|
709
697
|
match(node) {
|
710
|
-
if (Editor$1.isEditor(node))
|
711
|
-
return false;
|
698
|
+
if (Editor$1.isEditor(node)) return false;
|
712
699
|
const isInlineNode = ["text", "link"].includes(node.type);
|
713
700
|
return !isInlineNode;
|
714
701
|
}
|
715
702
|
});
|
716
|
-
if (!nodeEntryBeingReplaced)
|
717
|
-
return;
|
703
|
+
if (!nodeEntryBeingReplaced) return;
|
718
704
|
const [, pathToInsert] = nodeEntryBeingReplaced;
|
719
705
|
Transforms.removeNodes(editor);
|
720
706
|
const nodesToInsert = images.map((image) => {
|
@@ -892,8 +878,7 @@ const LinkContent = React.forwardRef(
|
|
892
878
|
ReactEditor.focus(editor);
|
893
879
|
};
|
894
880
|
React.useEffect(() => {
|
895
|
-
if (popoverOpen)
|
896
|
-
linkInputRef.current?.focus();
|
881
|
+
if (popoverOpen) linkInputRef.current?.focus();
|
897
882
|
}, [popoverOpen]);
|
898
883
|
const inputNotDirty = !linkText || !linkUrl || link.url && link.url === linkUrl && elementText && elementText === linkText;
|
899
884
|
return /* @__PURE__ */ jsxs(Popover.Root, { open: popoverOpen, children: [
|
@@ -963,11 +948,11 @@ const LinkContent = React.forwardRef(
|
|
963
948
|
),
|
964
949
|
/* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
|
965
950
|
/* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: handleClose, children: formatMessage({
|
966
|
-
id: "
|
951
|
+
id: "global.cancel",
|
967
952
|
defaultMessage: "Cancel"
|
968
953
|
}) }),
|
969
954
|
/* @__PURE__ */ jsx(Button, { disabled: Boolean(inputNotDirty) || isSaveDisabled, onClick: handleSave, children: formatMessage({
|
970
|
-
id: "
|
955
|
+
id: "global.save",
|
971
956
|
defaultMessage: "Save"
|
972
957
|
}) })
|
973
958
|
] })
|
@@ -1048,8 +1033,7 @@ const isText$1 = (node) => {
|
|
1048
1033
|
return Node.isNode(node) && !Editor$1.isEditor(node) && node.type === "text";
|
1049
1034
|
};
|
1050
1035
|
const handleBackspaceKeyOnList = (editor, event) => {
|
1051
|
-
if (!editor.selection)
|
1052
|
-
return;
|
1036
|
+
if (!editor.selection) return;
|
1053
1037
|
const [currentListItem, currentListItemPath] = Editor$1.parent(editor, editor.selection.anchor);
|
1054
1038
|
const [currentList, currentListPath] = Editor$1.parent(editor, currentListItemPath);
|
1055
1039
|
const isListEmpty = currentList.children.length === 1 && isText$1(currentListItem.children[0]) && currentListItem.children[0].text === "";
|
@@ -1158,8 +1142,7 @@ const handleEnterKeyOnList = (editor) => {
|
|
1158
1142
|
};
|
1159
1143
|
const handleConvertToList = (editor, format) => {
|
1160
1144
|
const convertedPath = baseHandleConvert(editor, { type: "list-item" });
|
1161
|
-
if (!convertedPath)
|
1162
|
-
return;
|
1145
|
+
if (!convertedPath) return;
|
1163
1146
|
Transforms.wrapNodes(editor, { type: "list", format, children: [] }, { at: convertedPath });
|
1164
1147
|
};
|
1165
1148
|
const handleTabOnList = (editor) => {
|
@@ -1171,8 +1154,7 @@ const handleTabOnList = (editor) => {
|
|
1171
1154
|
}
|
1172
1155
|
const [currentListItem, currentListItemPath] = currentListItemEntry;
|
1173
1156
|
const [currentList] = Editor$1.parent(editor, currentListItemPath);
|
1174
|
-
if (currentListItem === currentList.children[0])
|
1175
|
-
return;
|
1157
|
+
if (currentListItem === currentList.children[0]) return;
|
1176
1158
|
const currentListItemIndex = currentList.children.findIndex((item) => item === currentListItem);
|
1177
1159
|
const previousNode = currentList.children[currentListItemIndex - 1];
|
1178
1160
|
if (previousNode.type === "list") {
|
@@ -1308,13 +1290,13 @@ const quoteBlocks = {
|
|
1308
1290
|
handleEnterKey(editor) {
|
1309
1291
|
pressEnterTwiceToExit(editor);
|
1310
1292
|
},
|
1311
|
-
snippets: [">"]
|
1312
|
-
dragHandleTopMargin: "6px"
|
1293
|
+
snippets: [">"]
|
1313
1294
|
}
|
1314
1295
|
};
|
1315
1296
|
const ToolbarWrapper = styled(Flex)`
|
1316
1297
|
&[aria-disabled='true'] {
|
1317
1298
|
cursor: not-allowed;
|
1299
|
+
background: ${({ theme }) => theme.colors.neutral150};
|
1318
1300
|
}
|
1319
1301
|
`;
|
1320
1302
|
const Separator = styled(Toolbar.Separator)`
|
@@ -1325,7 +1307,7 @@ const Separator = styled(Toolbar.Separator)`
|
|
1325
1307
|
const FlexButton = styled(Flex)`
|
1326
1308
|
// Inherit the not-allowed cursor from ToolbarWrapper when disabled
|
1327
1309
|
&[aria-disabled] {
|
1328
|
-
cursor:
|
1310
|
+
cursor: not-allowed;
|
1329
1311
|
}
|
1330
1312
|
|
1331
1313
|
&[aria-disabled='false'] {
|
@@ -1539,8 +1521,7 @@ const isListNode = (node) => {
|
|
1539
1521
|
const ListButton = ({ block, format }) => {
|
1540
1522
|
const { editor, disabled, blocks } = useBlocksEditorContext("ListButton");
|
1541
1523
|
const isListActive = () => {
|
1542
|
-
if (!editor.selection)
|
1543
|
-
return false;
|
1524
|
+
if (!editor.selection) return false;
|
1544
1525
|
const currentListEntry = Editor$1.above(editor, {
|
1545
1526
|
match: (node) => !Editor$1.isEditor(node) && node.type === "list",
|
1546
1527
|
at: editor.selection.anchor
|
@@ -1614,8 +1595,7 @@ const LinkButton = ({ disabled }) => {
|
|
1614
1595
|
const { editor } = useBlocksEditorContext("LinkButton");
|
1615
1596
|
const isLinkActive = () => {
|
1616
1597
|
const { selection } = editor;
|
1617
|
-
if (!selection)
|
1618
|
-
return false;
|
1598
|
+
if (!selection) return false;
|
1619
1599
|
const [match] = Array.from(
|
1620
1600
|
Editor$1.nodes(editor, {
|
1621
1601
|
at: Editor$1.unhangRange(editor, selection),
|
@@ -1679,7 +1659,7 @@ const BlocksToolbar = () => {
|
|
1679
1659
|
return false;
|
1680
1660
|
};
|
1681
1661
|
const isButtonDisabled = checkButtonDisabled();
|
1682
|
-
return /* @__PURE__ */ jsx(Toolbar.Root, { "aria-disabled": disabled, asChild: true, children: /* @__PURE__ */ jsxs(ToolbarWrapper, { gap: 2, padding: 2, children: [
|
1662
|
+
return /* @__PURE__ */ jsx(Toolbar.Root, { "aria-disabled": disabled, asChild: true, children: /* @__PURE__ */ jsxs(ToolbarWrapper, { gap: 2, padding: 2, width: "100%", children: [
|
1683
1663
|
/* @__PURE__ */ jsx(BlocksDropdown, {}),
|
1684
1664
|
/* @__PURE__ */ jsx(Separator, {}),
|
1685
1665
|
/* @__PURE__ */ jsx(Toolbar.ToggleGroup, { type: "multiple", asChild: true, children: /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
|
@@ -1753,30 +1733,32 @@ const DragIconButton = styled(IconButton)`
|
|
1753
1733
|
display: flex;
|
1754
1734
|
align-items: center;
|
1755
1735
|
justify-content: center;
|
1736
|
+
border: none;
|
1756
1737
|
border-radius: ${({ theme }) => theme.borderRadius};
|
1757
|
-
|
1758
|
-
|
1738
|
+
padding-left: ${({ theme }) => theme.spaces[0]};
|
1739
|
+
padding-right: ${({ theme }) => theme.spaces[0]};
|
1740
|
+
padding-top: ${({ theme }) => theme.spaces[1]};
|
1741
|
+
padding-bottom: ${({ theme }) => theme.spaces[1]};
|
1759
1742
|
visibility: hidden;
|
1760
1743
|
cursor: grab;
|
1761
1744
|
opacity: inherit;
|
1762
1745
|
margin-top: ${(props) => props.$dragHandleTopMargin ?? 0};
|
1763
1746
|
|
1764
1747
|
&:hover {
|
1765
|
-
background: ${({ theme }) => theme.colors.
|
1748
|
+
background: ${({ theme }) => theme.colors.neutral100};
|
1766
1749
|
}
|
1767
1750
|
&:active {
|
1768
1751
|
cursor: grabbing;
|
1752
|
+
background: ${({ theme }) => theme.colors.neutral150};
|
1769
1753
|
}
|
1770
1754
|
&[aria-disabled='true'] {
|
1771
|
-
|
1772
|
-
background: transparent;
|
1755
|
+
visibility: hidden;
|
1773
1756
|
}
|
1774
1757
|
svg {
|
1775
|
-
height: auto;
|
1776
1758
|
min-width: ${({ theme }) => theme.spaces[3]};
|
1777
1759
|
|
1778
1760
|
path {
|
1779
|
-
fill: ${({ theme }) => theme.colors.
|
1761
|
+
fill: ${({ theme }) => theme.colors.neutral500};
|
1780
1762
|
}
|
1781
1763
|
}
|
1782
1764
|
`;
|
@@ -1821,8 +1803,7 @@ const DragAndDropElement = ({
|
|
1821
1803
|
displayedValue: children
|
1822
1804
|
},
|
1823
1805
|
onDropItem(currentIndex, newIndex) {
|
1824
|
-
if (newIndex)
|
1825
|
-
handleMoveBlock(newIndex, currentIndex);
|
1806
|
+
if (newIndex) handleMoveBlock(newIndex, currentIndex);
|
1826
1807
|
}
|
1827
1808
|
});
|
1828
1809
|
const composedBoxRefs = useComposedRefs(blockRef, dropRef);
|
@@ -1928,7 +1909,7 @@ const baseRenderLeaf = (props, modifiers2) => {
|
|
1928
1909
|
}
|
1929
1910
|
return currentChildren;
|
1930
1911
|
}, props.children);
|
1931
|
-
return /* @__PURE__ */ jsx("span", { ...props.attributes, children: wrappedChildren });
|
1912
|
+
return /* @__PURE__ */ jsx("span", { ...props.attributes, className: props.leaf.className, children: wrappedChildren });
|
1932
1913
|
};
|
1933
1914
|
const baseRenderElement = ({
|
1934
1915
|
props,
|
@@ -1966,8 +1947,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
|
|
1966
1947
|
[modifiers2]
|
1967
1948
|
);
|
1968
1949
|
const handleMoveBlocks = (editor2, event) => {
|
1969
|
-
if (!editor2.selection)
|
1970
|
-
return;
|
1950
|
+
if (!editor2.selection) return;
|
1971
1951
|
const start = Range.start(editor2.selection);
|
1972
1952
|
const currentIndex = [start.path[0]];
|
1973
1953
|
let newIndexPosition = 0;
|
@@ -2104,8 +2084,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
|
|
2104
2084
|
}
|
2105
2085
|
};
|
2106
2086
|
const handleScrollSelectionIntoView = () => {
|
2107
|
-
if (!editor.selection)
|
2108
|
-
return;
|
2087
|
+
if (!editor.selection) return;
|
2109
2088
|
const domRange = ReactEditor.toDOMRange(editor, editor.selection);
|
2110
2089
|
const domRect = domRange.getBoundingClientRect();
|
2111
2090
|
const blocksInput = blocksRef.current;
|
@@ -2132,7 +2111,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
|
|
2132
2111
|
background: "neutral0",
|
2133
2112
|
color: "neutral800",
|
2134
2113
|
lineHeight: 6,
|
2135
|
-
paddingRight:
|
2114
|
+
paddingRight: 7,
|
2136
2115
|
paddingTop: 6,
|
2137
2116
|
paddingBottom: 3,
|
2138
2117
|
children: [
|
@@ -2143,6 +2122,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
|
|
2143
2122
|
readOnly: disabled,
|
2144
2123
|
placeholder,
|
2145
2124
|
isExpandedMode,
|
2125
|
+
decorate: decorateCode,
|
2146
2126
|
renderElement,
|
2147
2127
|
renderLeaf,
|
2148
2128
|
onKeyDown: handleKeyDown,
|
@@ -2299,8 +2279,7 @@ const InlineCode = styled.code`
|
|
2299
2279
|
`;
|
2300
2280
|
const baseCheckIsActive = (editor, name2) => {
|
2301
2281
|
const marks = Editor$1.marks(editor);
|
2302
|
-
if (!marks)
|
2303
|
-
return false;
|
2282
|
+
if (!marks) return false;
|
2304
2283
|
return Boolean(marks[name2]);
|
2305
2284
|
};
|
2306
2285
|
const baseHandleToggle = (editor, name2) => {
|
@@ -2466,6 +2445,7 @@ const ExpandIconButton = styled(IconButton)`
|
|
2466
2445
|
position: absolute;
|
2467
2446
|
bottom: 1.2rem;
|
2468
2447
|
right: 1.2rem;
|
2448
|
+
box-shadow: ${({ theme }) => theme.shadows.filterShadow};
|
2469
2449
|
`;
|
2470
2450
|
function useResetKey(value) {
|
2471
2451
|
const slateUpdatesCount = React.useRef(0);
|
@@ -2597,26 +2577,6 @@ const BlocksInput = React.forwardRef(
|
|
2597
2577
|
}
|
2598
2578
|
);
|
2599
2579
|
const MemoizedBlocksInput = React.memo(BlocksInput);
|
2600
|
-
const createDefaultForm = (contentType, components = {}) => {
|
2601
|
-
const traverseSchema = (attributes) => {
|
2602
|
-
return Object.entries(attributes).reduce((acc, [key, attribute]) => {
|
2603
|
-
if ("default" in attribute) {
|
2604
|
-
acc[key] = attribute.default;
|
2605
|
-
} else if (attribute.type === "component" && attribute.required) {
|
2606
|
-
const defaultComponentForm = traverseSchema(components[attribute.component].attributes);
|
2607
|
-
if (attribute.repeatable) {
|
2608
|
-
acc[key] = attribute.min ? [...Array(attribute.min).fill(defaultComponentForm)] : [];
|
2609
|
-
} else {
|
2610
|
-
acc[key] = defaultComponentForm;
|
2611
|
-
}
|
2612
|
-
} else if (attribute.type === "dynamiczone" && attribute.required) {
|
2613
|
-
acc[key] = [];
|
2614
|
-
}
|
2615
|
-
return acc;
|
2616
|
-
}, {});
|
2617
|
-
};
|
2618
|
-
return traverseSchema(contentType.attributes);
|
2619
|
-
};
|
2620
2580
|
const Initializer = ({ disabled, name: name2, onClick }) => {
|
2621
2581
|
const { formatMessage } = useIntl();
|
2622
2582
|
const field = useField(name2);
|
@@ -2624,7 +2584,7 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
|
|
2624
2584
|
Box,
|
2625
2585
|
{
|
2626
2586
|
tag: "button",
|
2627
|
-
background: "neutral100",
|
2587
|
+
background: disabled ? "neutral150" : "neutral100",
|
2628
2588
|
borderColor: field.error ? "danger600" : "neutral200",
|
2629
2589
|
hasRadius: true,
|
2630
2590
|
disabled,
|
@@ -2632,146 +2592,470 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
|
|
2632
2592
|
paddingTop: 9,
|
2633
2593
|
paddingBottom: 9,
|
2634
2594
|
type: "button",
|
2595
|
+
style: { cursor: disabled ? "not-allowed" : "pointer" },
|
2635
2596
|
children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
|
2636
|
-
/* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(
|
2637
|
-
/* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(
|
2638
|
-
|
2639
|
-
|
2640
|
-
|
2597
|
+
/* @__PURE__ */ jsx(Flex, { justifyContent: "center", color: disabled ? "neutral500" : "primary600", children: /* @__PURE__ */ jsx(PlusCircle, { width: "3.2rem", height: "3.2rem" }) }),
|
2598
|
+
/* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(
|
2599
|
+
Typography,
|
2600
|
+
{
|
2601
|
+
textColor: disabled ? "neutral600" : "primary600",
|
2602
|
+
variant: "pi",
|
2603
|
+
fontWeight: "bold",
|
2604
|
+
children: formatMessage({
|
2605
|
+
id: getTranslation("components.empty-repeatable"),
|
2606
|
+
defaultMessage: "No entry yet. Click to add one."
|
2607
|
+
})
|
2608
|
+
}
|
2609
|
+
) })
|
2641
2610
|
] })
|
2642
2611
|
}
|
2643
2612
|
) });
|
2644
2613
|
};
|
2645
|
-
const
|
2646
|
-
|
2647
|
-
|
2614
|
+
const AddComponentButton = ({
|
2615
|
+
hasError,
|
2616
|
+
isDisabled,
|
2617
|
+
isOpen,
|
2618
|
+
children,
|
2619
|
+
onClick
|
2620
|
+
}) => {
|
2621
|
+
return /* @__PURE__ */ jsx(
|
2622
|
+
StyledButton,
|
2623
|
+
{
|
2624
|
+
type: "button",
|
2625
|
+
onClick,
|
2626
|
+
disabled: isDisabled,
|
2627
|
+
background: "neutral0",
|
2628
|
+
style: { cursor: isDisabled ? "not-allowed" : "pointer" },
|
2629
|
+
variant: "tertiary",
|
2630
|
+
children: /* @__PURE__ */ jsxs(Flex, { tag: "span", gap: 2, children: [
|
2631
|
+
/* @__PURE__ */ jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
|
2632
|
+
/* @__PURE__ */ jsx(
|
2633
|
+
Typography,
|
2634
|
+
{
|
2635
|
+
variant: "pi",
|
2636
|
+
fontWeight: "bold",
|
2637
|
+
textColor: hasError && !isOpen ? "danger600" : "neutral600",
|
2638
|
+
children
|
2639
|
+
}
|
2640
|
+
)
|
2641
|
+
] })
|
2642
|
+
}
|
2643
|
+
);
|
2644
|
+
};
|
2645
|
+
const StyledAddIcon = styled(PlusCircle)`
|
2646
|
+
height: ${({ theme }) => theme.spaces[6]};
|
2647
|
+
width: ${({ theme }) => theme.spaces[6]};
|
2648
|
+
transform: ${({ $isOpen }) => $isOpen ? "rotate(45deg)" : "rotate(0deg)"};
|
2649
|
+
|
2648
2650
|
> circle {
|
2649
|
-
fill: ${({ theme }) => theme.colors.
|
2651
|
+
fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger200 : theme.colors.neutral150};
|
2650
2652
|
}
|
2651
2653
|
> path {
|
2652
|
-
fill: ${({ theme }) => theme.colors.
|
2654
|
+
fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral500};
|
2653
2655
|
}
|
2654
2656
|
`;
|
2655
|
-
const
|
2656
|
-
|
2657
|
-
|
2658
|
-
|
2659
|
-
|
2657
|
+
const StyledButton = styled(Button)`
|
2658
|
+
padding-left: ${({ theme }) => theme.spaces[3]};
|
2659
|
+
border-radius: 26px;
|
2660
|
+
box-shadow: ${({ theme }) => theme.shadows.filterShadow};
|
2661
|
+
height: 5rem;
|
2662
|
+
`;
|
2663
|
+
const ComponentCategory = ({
|
2664
|
+
category,
|
2665
|
+
components = [],
|
2666
|
+
variant = "primary",
|
2667
|
+
onAddComponent
|
2660
2668
|
}) => {
|
2661
2669
|
const { formatMessage } = useIntl();
|
2662
|
-
|
2663
|
-
|
2664
|
-
|
2665
|
-
|
2670
|
+
return /* @__PURE__ */ jsxs(Accordion.Item, { value: category, children: [
|
2671
|
+
/* @__PURE__ */ jsx(Accordion.Header, { variant, children: /* @__PURE__ */ jsx(Accordion.Trigger, { children: formatMessage({ id: category, defaultMessage: category }) }) }),
|
2672
|
+
/* @__PURE__ */ jsx(ResponsiveAccordionContent, { children: /* @__PURE__ */ jsx(Grid, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsx(
|
2673
|
+
ComponentBox,
|
2674
|
+
{
|
2675
|
+
tag: "button",
|
2676
|
+
type: "button",
|
2677
|
+
background: "neutral100",
|
2678
|
+
justifyContent: "center",
|
2679
|
+
onClick: onAddComponent(uid),
|
2680
|
+
hasRadius: true,
|
2681
|
+
height: "8.4rem",
|
2682
|
+
shrink: 0,
|
2683
|
+
borderColor: "neutral200",
|
2684
|
+
children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
|
2685
|
+
/* @__PURE__ */ jsx(ComponentIcon, { color: "currentColor", background: "primary200", icon }),
|
2686
|
+
/* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: displayName })
|
2687
|
+
] })
|
2688
|
+
},
|
2689
|
+
uid
|
2690
|
+
)) }) })
|
2691
|
+
] });
|
2692
|
+
};
|
2693
|
+
const ResponsiveAccordionContent = styled(Accordion.Content)`
|
2694
|
+
container-type: inline-size;
|
2695
|
+
`;
|
2696
|
+
const Grid = styled(Box)`
|
2697
|
+
display: grid;
|
2698
|
+
grid-template-columns: repeat(auto-fill, 100%);
|
2699
|
+
grid-gap: ${({ theme }) => theme.spaces[1]};
|
2700
|
+
|
2701
|
+
@container (min-width: ${() => RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
|
2702
|
+
grid-template-columns: repeat(auto-fill, 14rem);
|
2703
|
+
}
|
2704
|
+
`;
|
2705
|
+
const ComponentBox = styled(Flex)`
|
2706
|
+
color: ${({ theme }) => theme.colors.neutral600};
|
2707
|
+
cursor: pointer;
|
2708
|
+
|
2709
|
+
@media (prefers-reduced-motion: no-preference) {
|
2710
|
+
transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
|
2711
|
+
}
|
2712
|
+
|
2713
|
+
&:focus,
|
2714
|
+
&:hover {
|
2715
|
+
border: 1px solid ${({ theme }) => theme.colors.primary200};
|
2716
|
+
background: ${({ theme }) => theme.colors.primary100};
|
2717
|
+
color: ${({ theme }) => theme.colors.primary600};
|
2718
|
+
}
|
2719
|
+
`;
|
2720
|
+
const ComponentPicker = ({
|
2721
|
+
dynamicComponentsByCategory = {},
|
2722
|
+
isOpen,
|
2723
|
+
onClickAddComponent
|
2724
|
+
}) => {
|
2725
|
+
const { formatMessage } = useIntl();
|
2726
|
+
const handleAddComponentToDz = (componentUid) => () => {
|
2727
|
+
onClickAddComponent(componentUid);
|
2728
|
+
};
|
2729
|
+
if (!isOpen) {
|
2730
|
+
return null;
|
2731
|
+
}
|
2732
|
+
return /* @__PURE__ */ jsxs(
|
2666
2733
|
Box,
|
2667
2734
|
{
|
2668
|
-
background: "neutral100",
|
2669
|
-
paddingLeft: 6,
|
2670
|
-
paddingRight: 6,
|
2671
2735
|
paddingTop: 6,
|
2672
2736
|
paddingBottom: 6,
|
2673
|
-
|
2674
|
-
|
2675
|
-
|
2676
|
-
|
2677
|
-
|
2678
|
-
|
2679
|
-
|
2680
|
-
|
2681
|
-
|
2682
|
-
|
2683
|
-
|
2684
|
-
|
2685
|
-
|
2686
|
-
|
2687
|
-
|
2688
|
-
|
2689
|
-
|
2690
|
-
|
2691
|
-
|
2692
|
-
|
2693
|
-
|
2694
|
-
|
2695
|
-
}) })
|
2737
|
+
paddingLeft: 5,
|
2738
|
+
paddingRight: 5,
|
2739
|
+
background: "neutral0",
|
2740
|
+
shadow: "tableShadow",
|
2741
|
+
borderColor: "neutral150",
|
2742
|
+
hasRadius: true,
|
2743
|
+
children: [
|
2744
|
+
/* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: "neutral600", children: formatMessage({
|
2745
|
+
id: getTranslation("components.DynamicZone.ComponentPicker-label"),
|
2746
|
+
defaultMessage: "Pick one component"
|
2747
|
+
}) }) }),
|
2748
|
+
/* @__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(
|
2749
|
+
ComponentCategory,
|
2750
|
+
{
|
2751
|
+
category,
|
2752
|
+
components,
|
2753
|
+
onAddComponent: handleAddComponentToDz,
|
2754
|
+
variant: index % 2 === 1 ? "primary" : "secondary"
|
2755
|
+
},
|
2756
|
+
category
|
2757
|
+
)) }) })
|
2758
|
+
]
|
2696
2759
|
}
|
2697
|
-
)
|
2760
|
+
);
|
2698
2761
|
};
|
2699
|
-
const
|
2700
|
-
|
2762
|
+
const DynamicComponent = ({
|
2763
|
+
componentUid,
|
2701
2764
|
disabled,
|
2765
|
+
index,
|
2702
2766
|
name: name2,
|
2703
|
-
|
2704
|
-
|
2705
|
-
|
2767
|
+
onRemoveComponentClick,
|
2768
|
+
onMoveComponent,
|
2769
|
+
onGrabItem,
|
2770
|
+
onDropItem,
|
2771
|
+
onCancel,
|
2772
|
+
dynamicComponentsByCategory = {},
|
2773
|
+
onAddComponent,
|
2774
|
+
children
|
2706
2775
|
}) => {
|
2707
|
-
const { toggleNotification } = useNotification();
|
2708
2776
|
const { formatMessage } = useIntl();
|
2709
|
-
const
|
2710
|
-
const search = React.useMemo(() => new URLSearchParams(searchString), [searchString]);
|
2711
|
-
const { components } = useDoc();
|
2777
|
+
const formValues = useForm("DynamicComponent", (state) => state.values);
|
2712
2778
|
const {
|
2713
|
-
|
2714
|
-
|
2715
|
-
|
2716
|
-
|
2717
|
-
|
2718
|
-
|
2719
|
-
|
2720
|
-
|
2779
|
+
edit: { components }
|
2780
|
+
} = useDocLayout();
|
2781
|
+
const title = React.useMemo(() => {
|
2782
|
+
const { mainField } = components[componentUid]?.settings ?? { mainField: "id" };
|
2783
|
+
const mainFieldValue = getIn(formValues, `${name2}.${index}.${mainField}`);
|
2784
|
+
const displayedValue = mainField === "id" || !mainFieldValue ? "" : String(mainFieldValue).trim();
|
2785
|
+
const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
|
2786
|
+
return mainValue;
|
2787
|
+
}, [componentUid, components, formValues, name2, index]);
|
2788
|
+
const { icon, displayName } = React.useMemo(() => {
|
2789
|
+
const [category] = componentUid.split(".");
|
2790
|
+
const { icon: icon2, displayName: displayName2 } = (dynamicComponentsByCategory[category] ?? []).find(
|
2791
|
+
(component) => component.uid === componentUid
|
2792
|
+
) ?? { icon: null, displayName: null };
|
2793
|
+
return { icon: icon2, displayName: displayName2 };
|
2794
|
+
}, [componentUid, dynamicComponentsByCategory]);
|
2795
|
+
const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(!disabled, {
|
2796
|
+
type: `${ItemTypes.DYNAMIC_ZONE}_${name2}`,
|
2797
|
+
index,
|
2798
|
+
item: {
|
2799
|
+
index,
|
2800
|
+
displayedValue: `${displayName} ${title}`,
|
2801
|
+
icon
|
2802
|
+
},
|
2803
|
+
onMoveItem: onMoveComponent,
|
2804
|
+
onDropItem,
|
2805
|
+
onGrabItem,
|
2806
|
+
onCancel
|
2807
|
+
});
|
2808
|
+
React.useEffect(() => {
|
2809
|
+
dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
|
2810
|
+
}, [dragPreviewRef, index]);
|
2811
|
+
const accordionValue = React.useId();
|
2812
|
+
const { value = [], rawError } = useField(`${name2}.${index}`);
|
2721
2813
|
const [collapseToOpen, setCollapseToOpen] = React.useState("");
|
2722
|
-
const [liveText, setLiveText] = React.useState("");
|
2723
2814
|
React.useEffect(() => {
|
2724
|
-
|
2725
|
-
|
2726
|
-
if (hasNestedErrors && hasNestedValue) {
|
2727
|
-
const errorOpenItems = rawError.map((_, idx) => {
|
2728
|
-
return value[idx] ? value[idx].__temp_key__ : null;
|
2729
|
-
}).filter((value2) => !!value2);
|
2730
|
-
if (errorOpenItems && errorOpenItems.length > 0) {
|
2731
|
-
setCollapseToOpen((collapseToOpen2) => {
|
2732
|
-
if (!errorOpenItems.includes(collapseToOpen2)) {
|
2733
|
-
return errorOpenItems[0];
|
2734
|
-
}
|
2735
|
-
return collapseToOpen2;
|
2736
|
-
});
|
2737
|
-
}
|
2815
|
+
if (rawError && value) {
|
2816
|
+
setCollapseToOpen(accordionValue);
|
2738
2817
|
}
|
2739
|
-
}, [rawError, value]);
|
2740
|
-
const
|
2741
|
-
|
2742
|
-
|
2743
|
-
|
2744
|
-
|
2818
|
+
}, [rawError, value, accordionValue]);
|
2819
|
+
const composedBoxRefs = useComposedRefs(boxRef, dropRef);
|
2820
|
+
const accordionActions = disabled ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
|
2821
|
+
/* @__PURE__ */ jsx(
|
2822
|
+
IconButton,
|
2823
|
+
{
|
2824
|
+
variant: "ghost",
|
2825
|
+
label: formatMessage(
|
2826
|
+
{
|
2827
|
+
id: getTranslation("components.DynamicZone.delete-label"),
|
2828
|
+
defaultMessage: "Delete {name}"
|
2829
|
+
},
|
2830
|
+
{ name: title }
|
2831
|
+
),
|
2832
|
+
onClick: onRemoveComponentClick,
|
2833
|
+
children: /* @__PURE__ */ jsx(Trash, {})
|
2745
2834
|
}
|
2746
|
-
|
2747
|
-
|
2748
|
-
|
2749
|
-
|
2835
|
+
),
|
2836
|
+
/* @__PURE__ */ jsx(
|
2837
|
+
IconButton,
|
2838
|
+
{
|
2839
|
+
variant: "ghost",
|
2840
|
+
onClick: (e) => e.stopPropagation(),
|
2841
|
+
"data-handler-id": handlerId,
|
2842
|
+
ref: dragRef,
|
2843
|
+
label: formatMessage({
|
2844
|
+
id: getTranslation("components.DragHandle-label"),
|
2845
|
+
defaultMessage: "Drag"
|
2846
|
+
}),
|
2847
|
+
onKeyDown: handleKeyDown,
|
2848
|
+
children: /* @__PURE__ */ jsx(Drag, {})
|
2750
2849
|
}
|
2850
|
+
),
|
2851
|
+
/* @__PURE__ */ jsxs(Menu.Root, { children: [
|
2852
|
+
/* @__PURE__ */ jsx(Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 0, paddingRight: 0, children: /* @__PURE__ */ jsx(
|
2853
|
+
IconButton,
|
2854
|
+
{
|
2855
|
+
variant: "ghost",
|
2856
|
+
label: formatMessage({
|
2857
|
+
id: getTranslation("components.DynamicZone.more-actions"),
|
2858
|
+
defaultMessage: "More actions"
|
2859
|
+
}),
|
2860
|
+
tag: "span",
|
2861
|
+
children: /* @__PURE__ */ jsx(More, { "aria-hidden": true, focusable: false })
|
2862
|
+
}
|
2863
|
+
) }),
|
2864
|
+
/* @__PURE__ */ jsxs(Menu.Content, { children: [
|
2865
|
+
/* @__PURE__ */ jsxs(Menu.SubRoot, { children: [
|
2866
|
+
/* @__PURE__ */ jsx(Menu.SubTrigger, { children: formatMessage({
|
2867
|
+
id: getTranslation("components.DynamicZone.add-item-above"),
|
2868
|
+
defaultMessage: "Add component above"
|
2869
|
+
}) }),
|
2870
|
+
/* @__PURE__ */ jsx(Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
|
2871
|
+
/* @__PURE__ */ jsx(Menu.Label, { children: category }),
|
2872
|
+
components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsx(MenuItem, { onSelect: () => onAddComponent(uid, index), children: displayName2 }, componentUid))
|
2873
|
+
] }, category)) })
|
2874
|
+
] }),
|
2875
|
+
/* @__PURE__ */ jsxs(Menu.SubRoot, { children: [
|
2876
|
+
/* @__PURE__ */ jsx(Menu.SubTrigger, { children: formatMessage({
|
2877
|
+
id: getTranslation("components.DynamicZone.add-item-below"),
|
2878
|
+
defaultMessage: "Add component below"
|
2879
|
+
}) }),
|
2880
|
+
/* @__PURE__ */ jsx(Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
|
2881
|
+
/* @__PURE__ */ jsx(Menu.Label, { children: category }),
|
2882
|
+
components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsx(MenuItem, { onSelect: () => onAddComponent(uid, index + 1), children: displayName2 }, componentUid))
|
2883
|
+
] }, category)) })
|
2884
|
+
] })
|
2885
|
+
] })
|
2886
|
+
] })
|
2887
|
+
] });
|
2888
|
+
const accordionTitle = title ? `${displayName} ${title}` : displayName;
|
2889
|
+
return /* @__PURE__ */ jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
|
2890
|
+
/* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Rectangle, { background: "neutral200" }) }),
|
2891
|
+
/* @__PURE__ */ jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsx(Preview$1, {}) : /* @__PURE__ */ jsx(Accordion.Root, { value: collapseToOpen, onValueChange: setCollapseToOpen, children: /* @__PURE__ */ jsxs(Accordion.Item, { value: accordionValue, children: [
|
2892
|
+
/* @__PURE__ */ jsxs(Accordion.Header, { children: [
|
2893
|
+
/* @__PURE__ */ jsx(
|
2894
|
+
Accordion.Trigger,
|
2895
|
+
{
|
2896
|
+
icon: icon && COMPONENT_ICONS[icon] ? COMPONENT_ICONS[icon] : COMPONENT_ICONS.dashboard,
|
2897
|
+
children: accordionTitle
|
2898
|
+
}
|
2899
|
+
),
|
2900
|
+
/* @__PURE__ */ jsx(Accordion.Actions, { children: accordionActions })
|
2901
|
+
] }),
|
2902
|
+
/* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsx(Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: /* @__PURE__ */ jsx(Grid$1.Root, { gap: 4, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsx(
|
2903
|
+
Grid$1.Item,
|
2904
|
+
{
|
2905
|
+
col: 12,
|
2906
|
+
s: 12,
|
2907
|
+
xs: 12,
|
2908
|
+
direction: "column",
|
2909
|
+
alignItems: "stretch",
|
2910
|
+
children: /* @__PURE__ */ jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
|
2911
|
+
const fieldName = `${name2}.${index}.${field.name}`;
|
2912
|
+
const fieldWithTranslatedLabel = {
|
2913
|
+
...field,
|
2914
|
+
label: formatMessage({
|
2915
|
+
id: `content-manager.components.${componentUid}.${field.name}`,
|
2916
|
+
defaultMessage: field.label
|
2917
|
+
})
|
2918
|
+
};
|
2919
|
+
return /* @__PURE__ */ jsx(
|
2920
|
+
ResponsiveGridItem,
|
2921
|
+
{
|
2922
|
+
col: size,
|
2923
|
+
s: 12,
|
2924
|
+
xs: 12,
|
2925
|
+
direction: "column",
|
2926
|
+
alignItems: "stretch",
|
2927
|
+
children: children ? children({ ...fieldWithTranslatedLabel, name: fieldName }) : /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel, name: fieldName })
|
2928
|
+
},
|
2929
|
+
fieldName
|
2930
|
+
);
|
2931
|
+
}) })
|
2932
|
+
},
|
2933
|
+
rowInd
|
2934
|
+
)) }) }) }) })
|
2935
|
+
] }) }) })
|
2936
|
+
] });
|
2937
|
+
};
|
2938
|
+
const StyledBox = styled(Box)`
|
2939
|
+
> div:first-child {
|
2940
|
+
box-shadow: ${({ theme }) => theme.shadows.tableShadow};
|
2941
|
+
}
|
2942
|
+
`;
|
2943
|
+
const AccordionContentRadius = styled(Box)`
|
2944
|
+
border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
|
2945
|
+
`;
|
2946
|
+
const Rectangle = styled(Box)`
|
2947
|
+
width: ${({ theme }) => theme.spaces[2]};
|
2948
|
+
height: ${({ theme }) => theme.spaces[4]};
|
2949
|
+
`;
|
2950
|
+
const Preview$1 = styled.span`
|
2951
|
+
display: block;
|
2952
|
+
background-color: ${({ theme }) => theme.colors.primary100};
|
2953
|
+
outline: 1px dashed ${({ theme }) => theme.colors.primary500};
|
2954
|
+
outline-offset: -1px;
|
2955
|
+
padding: ${({ theme }) => theme.spaces[6]};
|
2956
|
+
`;
|
2957
|
+
const ComponentContainer = styled(Box)`
|
2958
|
+
list-style: none;
|
2959
|
+
padding: 0;
|
2960
|
+
margin: 0;
|
2961
|
+
`;
|
2962
|
+
const DynamicZoneLabel = ({
|
2963
|
+
hint,
|
2964
|
+
label,
|
2965
|
+
labelAction,
|
2966
|
+
name: name2,
|
2967
|
+
numberOfComponents = 0,
|
2968
|
+
required
|
2969
|
+
}) => {
|
2970
|
+
return /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(
|
2971
|
+
Box,
|
2972
|
+
{
|
2973
|
+
paddingTop: 3,
|
2974
|
+
paddingBottom: 3,
|
2975
|
+
paddingRight: 4,
|
2976
|
+
paddingLeft: 4,
|
2977
|
+
borderRadius: "26px",
|
2978
|
+
background: "neutral0",
|
2979
|
+
shadow: "filterShadow",
|
2980
|
+
color: "neutral500",
|
2981
|
+
children: /* @__PURE__ */ jsxs(Flex, { direction: "column", justifyContent: "center", children: [
|
2982
|
+
/* @__PURE__ */ jsxs(Flex, { maxWidth: "35.6rem", children: [
|
2983
|
+
/* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", ellipsis: true, children: [
|
2984
|
+
label || name2,
|
2985
|
+
" "
|
2986
|
+
] }),
|
2987
|
+
/* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", children: [
|
2988
|
+
"(",
|
2989
|
+
numberOfComponents,
|
2990
|
+
")"
|
2991
|
+
] }),
|
2992
|
+
required && /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: "*" }),
|
2993
|
+
labelAction && /* @__PURE__ */ jsx(Box, { paddingLeft: 1, children: labelAction })
|
2994
|
+
] }),
|
2995
|
+
hint && /* @__PURE__ */ jsx(Box, { paddingTop: 1, maxWidth: "35.6rem", children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: hint }) })
|
2996
|
+
] })
|
2751
2997
|
}
|
2752
|
-
|
2753
|
-
|
2754
|
-
|
2755
|
-
|
2756
|
-
|
2757
|
-
|
2758
|
-
|
2759
|
-
|
2760
|
-
|
2761
|
-
|
2762
|
-
|
2763
|
-
|
2764
|
-
|
2765
|
-
|
2766
|
-
|
2998
|
+
) });
|
2999
|
+
};
|
3000
|
+
const [DynamicZoneProvider, useDynamicZone] = createContext(
|
3001
|
+
"DynamicZone",
|
3002
|
+
{
|
3003
|
+
isInDynamicZone: false
|
3004
|
+
}
|
3005
|
+
);
|
3006
|
+
const DynamicZone = ({
|
3007
|
+
attribute,
|
3008
|
+
disabled: disabledProp,
|
3009
|
+
hint,
|
3010
|
+
label,
|
3011
|
+
labelAction,
|
3012
|
+
name: name2,
|
3013
|
+
required = false,
|
3014
|
+
children
|
3015
|
+
}) => {
|
3016
|
+
const { max = Infinity, min = -Infinity } = attribute ?? {};
|
3017
|
+
const [addComponentIsOpen, setAddComponentIsOpen] = React.useState(false);
|
3018
|
+
const [liveText, setLiveText] = React.useState("");
|
3019
|
+
const { components, isLoading } = useDoc();
|
3020
|
+
const disabled = disabledProp || isLoading;
|
3021
|
+
const { addFieldRow, removeFieldRow, moveFieldRow } = useForm(
|
3022
|
+
"DynamicZone",
|
3023
|
+
({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
|
3024
|
+
addFieldRow: addFieldRow2,
|
3025
|
+
removeFieldRow: removeFieldRow2,
|
3026
|
+
moveFieldRow: moveFieldRow2
|
3027
|
+
})
|
3028
|
+
);
|
3029
|
+
const { value = [], error } = useField(name2);
|
3030
|
+
const dynamicComponentsByCategory = React.useMemo(() => {
|
3031
|
+
return attribute.components.reduce((acc, componentUid) => {
|
3032
|
+
const { category, info } = components[componentUid] ?? { info: {} };
|
3033
|
+
const component = { uid: componentUid, displayName: info.displayName, icon: info.icon };
|
3034
|
+
if (!acc[category]) {
|
3035
|
+
acc[category] = [];
|
3036
|
+
}
|
3037
|
+
acc[category] = [...acc[category], component];
|
3038
|
+
return acc;
|
3039
|
+
}, {});
|
3040
|
+
}, [attribute.components, components]);
|
3041
|
+
const { formatMessage } = useIntl();
|
3042
|
+
const { toggleNotification } = useNotification();
|
3043
|
+
const dynamicDisplayedComponentsLength = value.length;
|
3044
|
+
const handleAddComponent = (uid, position) => {
|
3045
|
+
setAddComponentIsOpen(false);
|
3046
|
+
const schema = components[uid];
|
3047
|
+
const form = createDefaultForm(schema, components);
|
3048
|
+
const transformations = pipe$1(transformDocument(schema, components), (data2) => ({
|
3049
|
+
...data2,
|
3050
|
+
__component: uid
|
3051
|
+
}));
|
3052
|
+
const data = transformations(form);
|
3053
|
+
addFieldRow(name2, data, position);
|
2767
3054
|
};
|
2768
|
-
const
|
2769
|
-
if (
|
2770
|
-
|
2771
|
-
|
2772
|
-
const data = transformDocument(schema, components)(form);
|
2773
|
-
addFieldRow(name2, data);
|
2774
|
-
} else if (value.length >= max) {
|
3055
|
+
const handleClickOpenPicker = () => {
|
3056
|
+
if (dynamicDisplayedComponentsLength < max) {
|
3057
|
+
setAddComponentIsOpen((prev) => !prev);
|
3058
|
+
} else {
|
2775
3059
|
toggleNotification({
|
2776
3060
|
type: "info",
|
2777
3061
|
message: formatMessage({
|
@@ -2780,7 +3064,7 @@ const RepeatableComponent = ({
|
|
2780
3064
|
});
|
2781
3065
|
}
|
2782
3066
|
};
|
2783
|
-
const
|
3067
|
+
const handleMoveComponent = (newIndex, currentIndex) => {
|
2784
3068
|
setLiveText(
|
2785
3069
|
formatMessage(
|
2786
3070
|
{
|
@@ -2795,9 +3079,6 @@ const RepeatableComponent = ({
|
|
2795
3079
|
);
|
2796
3080
|
moveFieldRow(name2, currentIndex, newIndex);
|
2797
3081
|
};
|
2798
|
-
const handleValueChange = (key) => {
|
2799
|
-
setCollapseToOpen(key);
|
2800
|
-
};
|
2801
3082
|
const getItemPos = (index) => `${index + 1} of ${value.length}`;
|
2802
3083
|
const handleCancel = (index) => {
|
2803
3084
|
setLiveText(
|
@@ -2830,446 +3111,119 @@ const RepeatableComponent = ({
|
|
2830
3111
|
setLiveText(
|
2831
3112
|
formatMessage(
|
2832
3113
|
{
|
2833
|
-
id: getTranslation("dnd.drop-item"),
|
2834
|
-
defaultMessage: `{item}, dropped. Final position in list: {position}.`
|
2835
|
-
},
|
2836
|
-
{
|
2837
|
-
item: `${name2}.${index}`,
|
2838
|
-
position: getItemPos(index)
|
2839
|
-
}
|
2840
|
-
)
|
2841
|
-
);
|
2842
|
-
};
|
2843
|
-
const ariaDescriptionId = React.useId();
|
2844
|
-
const level = useComponent("RepeatableComponent", (state) => state.level);
|
2845
|
-
if (value.length === 0) {
|
2846
|
-
return /* @__PURE__ */ jsx(Initializer, { disabled, name: name2, onClick: handleClick });
|
2847
|
-
}
|
2848
|
-
return /* @__PURE__ */ jsxs(Box, { hasRadius: true, children: [
|
2849
|
-
/* @__PURE__ */ jsx(VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
|
2850
|
-
id: getTranslation("dnd.instructions"),
|
2851
|
-
defaultMessage: `Press spacebar to grab and re-order`
|
2852
|
-
}) }),
|
2853
|
-
/* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "assertive", children: liveText }),
|
2854
|
-
/* @__PURE__ */ jsxs(
|
2855
|
-
AccordionRoot,
|
2856
|
-
{
|
2857
|
-
$error: error,
|
2858
|
-
value: collapseToOpen,
|
2859
|
-
onValueChange: handleValueChange,
|
2860
|
-
"aria-describedby": ariaDescriptionId,
|
2861
|
-
children: [
|
2862
|
-
value.map(({ __temp_key__: key, id }, index) => {
|
2863
|
-
const nameWithIndex = `${name2}.${index}`;
|
2864
|
-
return /* @__PURE__ */ jsx(
|
2865
|
-
ComponentProvider,
|
2866
|
-
{
|
2867
|
-
id,
|
2868
|
-
uid: attribute.component,
|
2869
|
-
level: level + 1,
|
2870
|
-
type: "repeatable",
|
2871
|
-
children: /* @__PURE__ */ jsx(
|
2872
|
-
Component,
|
2873
|
-
{
|
2874
|
-
disabled,
|
2875
|
-
name: nameWithIndex,
|
2876
|
-
attribute,
|
2877
|
-
index,
|
2878
|
-
mainField,
|
2879
|
-
onMoveItem: handleMoveComponentField,
|
2880
|
-
onDeleteComponent: () => {
|
2881
|
-
removeFieldRow(name2, index);
|
2882
|
-
toggleCollapses();
|
2883
|
-
},
|
2884
|
-
toggleCollapses,
|
2885
|
-
onCancel: handleCancel,
|
2886
|
-
onDropItem: handleDropItem,
|
2887
|
-
onGrabItem: handleGrabItem,
|
2888
|
-
__temp_key__: key,
|
2889
|
-
children: layout.map((row, index2) => {
|
2890
|
-
return /* @__PURE__ */ jsx(Grid$1.Root, { gap: 4, children: row.map(({ size, ...field }) => {
|
2891
|
-
const completeFieldName = `${nameWithIndex}.${field.name}`;
|
2892
|
-
const translatedLabel = formatMessage({
|
2893
|
-
id: `content-manager.components.${attribute.component}.${field.name}`,
|
2894
|
-
defaultMessage: field.label
|
2895
|
-
});
|
2896
|
-
return /* @__PURE__ */ jsx(
|
2897
|
-
Grid$1.Item,
|
2898
|
-
{
|
2899
|
-
col: size,
|
2900
|
-
s: 12,
|
2901
|
-
xs: 12,
|
2902
|
-
direction: "column",
|
2903
|
-
alignItems: "stretch",
|
2904
|
-
children: children({
|
2905
|
-
...field,
|
2906
|
-
label: translatedLabel,
|
2907
|
-
name: completeFieldName
|
2908
|
-
})
|
2909
|
-
},
|
2910
|
-
completeFieldName
|
2911
|
-
);
|
2912
|
-
}) }, index2);
|
2913
|
-
})
|
2914
|
-
}
|
2915
|
-
)
|
2916
|
-
},
|
2917
|
-
key
|
2918
|
-
);
|
2919
|
-
}),
|
2920
|
-
/* @__PURE__ */ jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsx(Plus, {}), children: formatMessage({
|
2921
|
-
id: getTranslation("containers.EditView.add.new-entry"),
|
2922
|
-
defaultMessage: "Add an entry"
|
2923
|
-
}) })
|
2924
|
-
]
|
2925
|
-
}
|
2926
|
-
)
|
2927
|
-
] });
|
2928
|
-
};
|
2929
|
-
const AccordionRoot = styled(Accordion.Root)`
|
2930
|
-
border: 1px solid
|
2931
|
-
${({ theme, $error }) => $error ? theme.colors.danger600 : theme.colors.neutral200};
|
2932
|
-
`;
|
2933
|
-
const TextButtonCustom = styled(TextButton)`
|
2934
|
-
width: 100%;
|
2935
|
-
display: flex;
|
2936
|
-
justify-content: center;
|
2937
|
-
border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
|
2938
|
-
padding-inline: ${(props) => props.theme.spaces[6]};
|
2939
|
-
padding-block: ${(props) => props.theme.spaces[3]};
|
2940
|
-
|
2941
|
-
&:not([disabled]) {
|
2942
|
-
cursor: pointer;
|
2943
|
-
|
2944
|
-
&:hover {
|
2945
|
-
background-color: ${(props) => props.theme.colors.primary100};
|
2946
|
-
}
|
2947
|
-
}
|
2948
|
-
|
2949
|
-
span {
|
2950
|
-
font-weight: 600;
|
2951
|
-
font-size: 1.4rem;
|
2952
|
-
line-height: 2.4rem;
|
2953
|
-
}
|
2954
|
-
|
2955
|
-
@media (prefers-reduced-motion: no-preference) {
|
2956
|
-
transition: background-color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
|
2957
|
-
}
|
2958
|
-
`;
|
2959
|
-
const Component = ({
|
2960
|
-
disabled,
|
2961
|
-
index,
|
2962
|
-
name: name2,
|
2963
|
-
mainField = {
|
2964
|
-
name: "id",
|
2965
|
-
type: "integer"
|
2966
|
-
},
|
2967
|
-
children,
|
2968
|
-
onDeleteComponent,
|
2969
|
-
toggleCollapses,
|
2970
|
-
__temp_key__,
|
2971
|
-
...dragProps
|
2972
|
-
}) => {
|
2973
|
-
const { formatMessage } = useIntl();
|
2974
|
-
const displayValue = useForm("RepeatableComponent", (state) => {
|
2975
|
-
return getIn(state.values, [...name2.split("."), mainField.name]);
|
2976
|
-
});
|
2977
|
-
const accordionRef = React.useRef(null);
|
2978
|
-
const componentKey = name2.split(".").slice(0, -1).join(".");
|
2979
|
-
const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(!disabled, {
|
2980
|
-
type: `${ItemTypes.COMPONENT}_${componentKey}`,
|
2981
|
-
index,
|
2982
|
-
item: {
|
2983
|
-
index,
|
2984
|
-
displayedValue: displayValue
|
2985
|
-
},
|
2986
|
-
onStart() {
|
2987
|
-
toggleCollapses();
|
2988
|
-
},
|
2989
|
-
...dragProps
|
2990
|
-
});
|
2991
|
-
React.useEffect(() => {
|
2992
|
-
dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
|
2993
|
-
}, [dragPreviewRef, index]);
|
2994
|
-
const composedAccordionRefs = useComposedRefs(accordionRef, dragRef);
|
2995
|
-
const composedBoxRefs = useComposedRefs(
|
2996
|
-
boxRef,
|
2997
|
-
dropRef
|
2998
|
-
);
|
2999
|
-
return /* @__PURE__ */ jsx(Fragment, { children: isDragging ? /* @__PURE__ */ jsx(Preview$1, {}) : /* @__PURE__ */ jsxs(Accordion.Item, { ref: composedBoxRefs, value: __temp_key__, children: [
|
3000
|
-
/* @__PURE__ */ jsxs(Accordion.Header, { children: [
|
3001
|
-
/* @__PURE__ */ jsx(Accordion.Trigger, { children: displayValue }),
|
3002
|
-
/* @__PURE__ */ jsxs(Accordion.Actions, { children: [
|
3003
|
-
/* @__PURE__ */ jsx(
|
3004
|
-
IconButton,
|
3005
|
-
{
|
3006
|
-
variant: "ghost",
|
3007
|
-
onClick: onDeleteComponent,
|
3008
|
-
label: formatMessage({
|
3009
|
-
id: getTranslation("containers.Edit.delete"),
|
3010
|
-
defaultMessage: "Delete"
|
3011
|
-
}),
|
3012
|
-
children: /* @__PURE__ */ jsx(Trash, {})
|
3013
|
-
}
|
3014
|
-
),
|
3015
|
-
/* @__PURE__ */ jsx(
|
3016
|
-
IconButton,
|
3017
|
-
{
|
3018
|
-
ref: composedAccordionRefs,
|
3019
|
-
variant: "ghost",
|
3020
|
-
onClick: (e) => e.stopPropagation(),
|
3021
|
-
"data-handler-id": handlerId,
|
3022
|
-
label: formatMessage({
|
3023
|
-
id: getTranslation("components.DragHandle-label"),
|
3024
|
-
defaultMessage: "Drag"
|
3025
|
-
}),
|
3026
|
-
onKeyDown: handleKeyDown,
|
3027
|
-
children: /* @__PURE__ */ jsx(Drag, {})
|
3028
|
-
}
|
3029
|
-
)
|
3030
|
-
] })
|
3031
|
-
] }),
|
3032
|
-
/* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(
|
3033
|
-
Flex,
|
3034
|
-
{
|
3035
|
-
direction: "column",
|
3036
|
-
alignItems: "stretch",
|
3037
|
-
background: "neutral100",
|
3038
|
-
padding: 6,
|
3039
|
-
gap: 6,
|
3040
|
-
children
|
3041
|
-
}
|
3042
|
-
) })
|
3043
|
-
] }) });
|
3044
|
-
};
|
3045
|
-
const Preview$1 = () => {
|
3046
|
-
return /* @__PURE__ */ jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
|
3047
|
-
};
|
3048
|
-
const StyledSpan = styled(Box)`
|
3049
|
-
display: block;
|
3050
|
-
outline: 1px dashed ${({ theme }) => theme.colors.primary500};
|
3051
|
-
outline-offset: -1px;
|
3052
|
-
`;
|
3053
|
-
const ComponentInput = ({
|
3054
|
-
label,
|
3055
|
-
required,
|
3056
|
-
name: name2,
|
3057
|
-
attribute,
|
3058
|
-
disabled,
|
3059
|
-
labelAction,
|
3060
|
-
...props
|
3061
|
-
}) => {
|
3062
|
-
const { formatMessage } = useIntl();
|
3063
|
-
const field = useField(name2);
|
3064
|
-
const showResetComponent = !attribute.repeatable && field.value && !disabled;
|
3065
|
-
const { components } = useDoc();
|
3066
|
-
const handleInitialisationClick = () => {
|
3067
|
-
const schema = components[attribute.component];
|
3068
|
-
const form = createDefaultForm(schema, components);
|
3069
|
-
const data = transformDocument(schema, components)(form);
|
3070
|
-
field.onChange(name2, data);
|
3071
|
-
};
|
3072
|
-
return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, required, children: [
|
3073
|
-
/* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
|
3074
|
-
/* @__PURE__ */ jsxs(Field.Label, { action: labelAction, children: [
|
3075
|
-
label,
|
3076
|
-
attribute.repeatable && /* @__PURE__ */ jsxs(Fragment, { children: [
|
3077
|
-
" (",
|
3078
|
-
Array.isArray(field.value) ? field.value.length : 0,
|
3079
|
-
")"
|
3080
|
-
] })
|
3081
|
-
] }),
|
3082
|
-
showResetComponent && /* @__PURE__ */ jsx(
|
3083
|
-
IconButton,
|
3114
|
+
id: getTranslation("dnd.drop-item"),
|
3115
|
+
defaultMessage: `{item}, dropped. Final position in list: {position}.`
|
3116
|
+
},
|
3084
3117
|
{
|
3085
|
-
|
3086
|
-
|
3087
|
-
defaultMessage: "Reset Entry"
|
3088
|
-
}),
|
3089
|
-
variant: "ghost",
|
3090
|
-
onClick: () => {
|
3091
|
-
field.onChange(name2, null);
|
3092
|
-
},
|
3093
|
-
children: /* @__PURE__ */ jsx(Trash, {})
|
3118
|
+
item: `${name2}.${index}`,
|
3119
|
+
position: getItemPos(index)
|
3094
3120
|
}
|
3095
3121
|
)
|
3096
|
-
|
3097
|
-
|
3098
|
-
|
3099
|
-
|
3100
|
-
|
3101
|
-
|
3102
|
-
|
3103
|
-
|
3104
|
-
|
3105
|
-
hasError,
|
3106
|
-
isDisabled,
|
3107
|
-
isOpen,
|
3108
|
-
children,
|
3109
|
-
onClick
|
3110
|
-
}) => {
|
3111
|
-
return /* @__PURE__ */ jsx(
|
3112
|
-
StyledButton,
|
3113
|
-
{
|
3114
|
-
type: "button",
|
3115
|
-
onClick,
|
3116
|
-
disabled: isDisabled,
|
3117
|
-
background: "neutral0",
|
3118
|
-
style: { cursor: isDisabled ? "not-allowed" : "pointer" },
|
3119
|
-
variant: "tertiary",
|
3120
|
-
children: /* @__PURE__ */ jsxs(Flex, { tag: "span", gap: 2, children: [
|
3121
|
-
/* @__PURE__ */ jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
|
3122
|
-
/* @__PURE__ */ jsx(
|
3123
|
-
AddComponentTitle,
|
3124
|
-
{
|
3125
|
-
variant: "pi",
|
3126
|
-
fontWeight: "bold",
|
3127
|
-
textColor: hasError && !isOpen ? "danger600" : "neutral500",
|
3128
|
-
children
|
3129
|
-
}
|
3130
|
-
)
|
3131
|
-
] })
|
3132
|
-
}
|
3133
|
-
);
|
3134
|
-
};
|
3135
|
-
const StyledAddIcon = styled(PlusCircle)`
|
3136
|
-
height: ${({ theme }) => theme.spaces[6]};
|
3137
|
-
width: ${({ theme }) => theme.spaces[6]};
|
3138
|
-
transform: ${({ $isOpen }) => $isOpen ? "rotate(45deg)" : "rotate(0deg)"};
|
3139
|
-
|
3140
|
-
> circle {
|
3141
|
-
fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger200 : theme.colors.neutral150};
|
3142
|
-
}
|
3143
|
-
> path {
|
3144
|
-
fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral600};
|
3145
|
-
}
|
3146
|
-
`;
|
3147
|
-
const AddComponentTitle = styled(Typography)``;
|
3148
|
-
const StyledButton = styled(Button)`
|
3149
|
-
border-radius: 26px;
|
3150
|
-
border-color: ${({ theme }) => theme.colors.neutral150};
|
3151
|
-
box-shadow: ${({ theme }) => theme.shadows.filterShadow};
|
3152
|
-
height: 5rem;
|
3153
|
-
|
3154
|
-
&:hover {
|
3155
|
-
${AddComponentTitle} {
|
3156
|
-
color: ${({ theme }) => theme.colors.primary600};
|
3157
|
-
}
|
3158
|
-
|
3159
|
-
${StyledAddIcon} {
|
3160
|
-
> circle {
|
3161
|
-
fill: ${({ theme }) => theme.colors.primary600};
|
3162
|
-
}
|
3163
|
-
> path {
|
3164
|
-
fill: ${({ theme }) => theme.colors.primary600};
|
3165
|
-
}
|
3122
|
+
);
|
3123
|
+
};
|
3124
|
+
const handleRemoveComponent = (name22, currentIndex) => () => {
|
3125
|
+
removeFieldRow(name22, currentIndex);
|
3126
|
+
};
|
3127
|
+
const hasError = error !== void 0;
|
3128
|
+
const renderButtonLabel = () => {
|
3129
|
+
if (addComponentIsOpen) {
|
3130
|
+
return formatMessage({ id: "app.utils.close-label", defaultMessage: "Close" });
|
3166
3131
|
}
|
3167
|
-
|
3168
|
-
|
3169
|
-
|
3170
|
-
|
3132
|
+
if (hasError && dynamicDisplayedComponentsLength > max) {
|
3133
|
+
return formatMessage(
|
3134
|
+
{
|
3135
|
+
id: getTranslation(`components.DynamicZone.extra-components`),
|
3136
|
+
defaultMessage: "There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}"
|
3137
|
+
},
|
3138
|
+
{
|
3139
|
+
number: dynamicDisplayedComponentsLength - max
|
3140
|
+
}
|
3141
|
+
);
|
3171
3142
|
}
|
3172
|
-
|
3173
|
-
|
3174
|
-
|
3175
|
-
|
3176
|
-
|
3177
|
-
|
3178
|
-
|
3143
|
+
if (hasError && dynamicDisplayedComponentsLength < min) {
|
3144
|
+
return formatMessage(
|
3145
|
+
{
|
3146
|
+
id: getTranslation(`components.DynamicZone.missing-components`),
|
3147
|
+
defaultMessage: "There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}"
|
3148
|
+
},
|
3149
|
+
{ number: min - dynamicDisplayedComponentsLength }
|
3150
|
+
);
|
3179
3151
|
}
|
3180
|
-
|
3181
|
-
`;
|
3182
|
-
const ComponentCategory = ({
|
3183
|
-
category,
|
3184
|
-
components = [],
|
3185
|
-
variant = "primary",
|
3186
|
-
onAddComponent
|
3187
|
-
}) => {
|
3188
|
-
const { formatMessage } = useIntl();
|
3189
|
-
return /* @__PURE__ */ jsxs(Accordion.Item, { value: category, children: [
|
3190
|
-
/* @__PURE__ */ jsx(Accordion.Header, { variant, children: /* @__PURE__ */ jsx(Accordion.Trigger, { children: formatMessage({ id: category, defaultMessage: category }) }) }),
|
3191
|
-
/* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Grid, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsx(
|
3192
|
-
ComponentBox,
|
3152
|
+
return formatMessage(
|
3193
3153
|
{
|
3194
|
-
|
3195
|
-
|
3196
|
-
background: "neutral100",
|
3197
|
-
justifyContent: "center",
|
3198
|
-
onClick: onAddComponent(uid),
|
3199
|
-
hasRadius: true,
|
3200
|
-
height: "8.4rem",
|
3201
|
-
shrink: 0,
|
3202
|
-
borderColor: "neutral200",
|
3203
|
-
children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
|
3204
|
-
/* @__PURE__ */ jsx(ComponentIcon, { color: "currentColor", background: "primary200", icon }),
|
3205
|
-
/* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: displayName })
|
3206
|
-
] })
|
3154
|
+
id: getTranslation("components.DynamicZone.add-component"),
|
3155
|
+
defaultMessage: "Add a component to {componentName}"
|
3207
3156
|
},
|
3208
|
-
|
3209
|
-
)
|
3210
|
-
] });
|
3211
|
-
};
|
3212
|
-
const Grid = styled(Box)`
|
3213
|
-
display: grid;
|
3214
|
-
grid-template-columns: repeat(auto-fit, 14rem);
|
3215
|
-
grid-gap: ${({ theme }) => theme.spaces[1]};
|
3216
|
-
`;
|
3217
|
-
const ComponentBox = styled(Flex)`
|
3218
|
-
color: ${({ theme }) => theme.colors.neutral600};
|
3219
|
-
cursor: pointer;
|
3220
|
-
|
3221
|
-
@media (prefers-reduced-motion: no-preference) {
|
3222
|
-
transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
|
3223
|
-
}
|
3224
|
-
|
3225
|
-
&:focus,
|
3226
|
-
&:hover {
|
3227
|
-
border: 1px solid ${({ theme }) => theme.colors.primary200};
|
3228
|
-
background: ${({ theme }) => theme.colors.primary100};
|
3229
|
-
color: ${({ theme }) => theme.colors.primary600};
|
3230
|
-
}
|
3231
|
-
`;
|
3232
|
-
const ComponentPicker = ({
|
3233
|
-
dynamicComponentsByCategory = {},
|
3234
|
-
isOpen,
|
3235
|
-
onClickAddComponent
|
3236
|
-
}) => {
|
3237
|
-
const { formatMessage } = useIntl();
|
3238
|
-
const handleAddComponentToDz = (componentUid) => () => {
|
3239
|
-
onClickAddComponent(componentUid);
|
3157
|
+
{ componentName: label || name2 }
|
3158
|
+
);
|
3240
3159
|
};
|
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
|
-
|
3160
|
+
const level = useComponent("DynamicZone", (state) => state.level);
|
3161
|
+
const ariaDescriptionId = React.useId();
|
3162
|
+
return /* @__PURE__ */ jsx(DynamicZoneProvider, { isInDynamicZone: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
|
3163
|
+
dynamicDisplayedComponentsLength > 0 && /* @__PURE__ */ jsxs(Box, { children: [
|
3164
|
+
/* @__PURE__ */ jsx(
|
3165
|
+
DynamicZoneLabel,
|
3166
|
+
{
|
3167
|
+
hint,
|
3168
|
+
label,
|
3169
|
+
labelAction,
|
3170
|
+
name: name2,
|
3171
|
+
numberOfComponents: dynamicDisplayedComponentsLength,
|
3172
|
+
required
|
3173
|
+
}
|
3174
|
+
),
|
3175
|
+
/* @__PURE__ */ jsx(VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
|
3176
|
+
id: getTranslation("dnd.instructions"),
|
3177
|
+
defaultMessage: `Press spacebar to grab and re-order`
|
3178
|
+
}) }),
|
3179
|
+
/* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "assertive", children: liveText }),
|
3180
|
+
/* @__PURE__ */ jsx("ol", { "aria-describedby": ariaDescriptionId, children: value.map((field, index) => /* @__PURE__ */ jsx(
|
3181
|
+
ComponentProvider,
|
3182
|
+
{
|
3183
|
+
level: level + 1,
|
3184
|
+
uid: field.__component,
|
3185
|
+
id: field.id,
|
3186
|
+
type: "dynamiczone",
|
3187
|
+
children: /* @__PURE__ */ jsx(
|
3188
|
+
DynamicComponent,
|
3189
|
+
{
|
3190
|
+
disabled,
|
3191
|
+
name: name2,
|
3192
|
+
index,
|
3193
|
+
componentUid: field.__component,
|
3194
|
+
onMoveComponent: handleMoveComponent,
|
3195
|
+
onRemoveComponentClick: handleRemoveComponent(name2, index),
|
3196
|
+
onCancel: handleCancel,
|
3197
|
+
onDropItem: handleDropItem,
|
3198
|
+
onGrabItem: handleGrabItem,
|
3199
|
+
onAddComponent: handleAddComponent,
|
3200
|
+
dynamicComponentsByCategory,
|
3201
|
+
children
|
3202
|
+
}
|
3203
|
+
)
|
3204
|
+
},
|
3205
|
+
field.__temp_key__
|
3206
|
+
)) })
|
3207
|
+
] }),
|
3208
|
+
/* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(
|
3209
|
+
AddComponentButton,
|
3210
|
+
{
|
3211
|
+
hasError,
|
3212
|
+
isDisabled: disabled,
|
3213
|
+
isOpen: addComponentIsOpen,
|
3214
|
+
onClick: handleClickOpenPicker,
|
3215
|
+
children: renderButtonLabel()
|
3216
|
+
}
|
3217
|
+
) }),
|
3218
|
+
/* @__PURE__ */ jsx(
|
3219
|
+
ComponentPicker,
|
3220
|
+
{
|
3221
|
+
dynamicComponentsByCategory,
|
3222
|
+
isOpen: addComponentIsOpen,
|
3223
|
+
onClickAddComponent: handleAddComponent
|
3224
|
+
}
|
3225
|
+
)
|
3226
|
+
] }) });
|
3273
3227
|
};
|
3274
3228
|
const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
|
3275
3229
|
const { formatMessage } = useIntl();
|
@@ -3749,8 +3703,7 @@ const Wrapper = styled.div`
|
|
3749
3703
|
`;
|
3750
3704
|
var listRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]\s|[*+-]\s|(\d+)([.)]))(\s*)/, emptyListRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]|[*+-]|(\d+)[.)])(\s*)$/, unorderedListRE = /[*+-]\s/;
|
3751
3705
|
function newlineAndIndentContinueMarkdownList(cm) {
|
3752
|
-
if (cm.getOption("disableInput"))
|
3753
|
-
return CodeMirror.Pass;
|
3706
|
+
if (cm.getOption("disableInput")) return CodeMirror.Pass;
|
3754
3707
|
var ranges = cm.listSelections(), replacements = [];
|
3755
3708
|
for (var i = 0; i < ranges.length; i++) {
|
3756
3709
|
var pos = ranges[i].head;
|
@@ -3784,8 +3737,7 @@ function newlineAndIndentContinueMarkdownList(cm) {
|
|
3784
3737
|
var numbered = !(unorderedListRE.test(match[2]) || match[2].indexOf(">") >= 0);
|
3785
3738
|
var bullet = numbered ? parseInt(match[3], 10) + 1 + match[4] : match[2].replace("x", " ");
|
3786
3739
|
replacements[i] = "\n" + indent + bullet + after;
|
3787
|
-
if (numbered)
|
3788
|
-
incrementRemainingMarkdownListNumbers(cm, pos);
|
3740
|
+
if (numbered) incrementRemainingMarkdownListNumbers(cm, pos);
|
3789
3741
|
}
|
3790
3742
|
}
|
3791
3743
|
cm.replaceSelections(replacements);
|
@@ -3803,10 +3755,8 @@ function incrementRemainingMarkdownListNumbers(cm, pos) {
|
|
3803
3755
|
var newNumber = parseInt(startItem[3], 10) + lookAhead - skipCount;
|
3804
3756
|
var nextNumber = parseInt(nextItem[3], 10), itemNumber = nextNumber;
|
3805
3757
|
if (startIndent === nextIndent && !isNaN(nextNumber)) {
|
3806
|
-
if (newNumber === nextNumber)
|
3807
|
-
|
3808
|
-
if (newNumber > nextNumber)
|
3809
|
-
itemNumber = newNumber + 1;
|
3758
|
+
if (newNumber === nextNumber) itemNumber = nextNumber + 1;
|
3759
|
+
if (newNumber > nextNumber) itemNumber = newNumber + 1;
|
3810
3760
|
cm.replaceRange(
|
3811
3761
|
nextLine.replace(listRE, nextIndent + itemNumber + nextItem[4] + nextItem[5]),
|
3812
3762
|
{
|
@@ -3819,10 +3769,8 @@ function incrementRemainingMarkdownListNumbers(cm, pos) {
|
|
3819
3769
|
}
|
3820
3770
|
);
|
3821
3771
|
} else {
|
3822
|
-
if (startIndent.length > nextIndent.length)
|
3823
|
-
|
3824
|
-
if (startIndent.length < nextIndent.length && lookAhead === 1)
|
3825
|
-
return;
|
3772
|
+
if (startIndent.length > nextIndent.length) return;
|
3773
|
+
if (startIndent.length < nextIndent.length && lookAhead === 1) return;
|
3826
3774
|
skipCount += 1;
|
3827
3775
|
}
|
3828
3776
|
}
|
@@ -5017,567 +4965,621 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
|
|
5017
4965
|
return /* @__PURE__ */ jsx(
|
5018
4966
|
MemoizedComponentInput,
|
5019
4967
|
{
|
5020
|
-
...props,
|
5021
|
-
hint,
|
5022
|
-
layout: components[props.attribute.component].layout,
|
5023
|
-
disabled: fieldIsDisabled,
|
5024
|
-
children: (inputProps) => /* @__PURE__ */ jsx(InputRenderer, { ...inputProps })
|
4968
|
+
...props,
|
4969
|
+
hint,
|
4970
|
+
layout: components[props.attribute.component].layout,
|
4971
|
+
disabled: fieldIsDisabled,
|
4972
|
+
children: (inputProps) => /* @__PURE__ */ jsx(InputRenderer, { ...inputProps })
|
4973
|
+
}
|
4974
|
+
);
|
4975
|
+
case "dynamiczone":
|
4976
|
+
return /* @__PURE__ */ jsx(DynamicZone, { ...props, hint, disabled: fieldIsDisabled });
|
4977
|
+
case "relation":
|
4978
|
+
return /* @__PURE__ */ jsx(MemoizedRelationsField, { ...props, hint, disabled: fieldIsDisabled });
|
4979
|
+
case "richtext":
|
4980
|
+
return /* @__PURE__ */ jsx(MemoizedWysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
|
4981
|
+
case "uid":
|
4982
|
+
return /* @__PURE__ */ jsx(MemoizedUIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
|
4983
|
+
case "enumeration":
|
4984
|
+
return /* @__PURE__ */ jsx(
|
4985
|
+
InputRenderer$1,
|
4986
|
+
{
|
4987
|
+
...props,
|
4988
|
+
hint,
|
4989
|
+
options: props.attribute.enum.map((value) => ({ value })),
|
4990
|
+
type: props.customField ? "custom-field" : props.type,
|
4991
|
+
disabled: fieldIsDisabled
|
4992
|
+
}
|
4993
|
+
);
|
4994
|
+
default:
|
4995
|
+
const { unique: _unique, mainField: _mainField, ...restProps } = props;
|
4996
|
+
return /* @__PURE__ */ jsx(
|
4997
|
+
InputRenderer$1,
|
4998
|
+
{
|
4999
|
+
...restProps,
|
5000
|
+
hint,
|
5001
|
+
type: props.customField ? "custom-field" : props.type,
|
5002
|
+
disabled: fieldIsDisabled
|
5003
|
+
}
|
5004
|
+
);
|
5005
|
+
}
|
5006
|
+
};
|
5007
|
+
const attributeHasCustomFieldProperty = (attribute) => "customField" in attribute && typeof attribute.customField === "string";
|
5008
|
+
const useFieldHint = (hint = void 0, attribute) => {
|
5009
|
+
const { formatMessage } = useIntl();
|
5010
|
+
const { maximum, minimum } = getMinMax(attribute);
|
5011
|
+
if (!maximum && !minimum) {
|
5012
|
+
return hint;
|
5013
|
+
}
|
5014
|
+
const units = !["biginteger", "integer", "number", "dynamiczone", "component"].includes(
|
5015
|
+
attribute.type
|
5016
|
+
) ? formatMessage(
|
5017
|
+
{
|
5018
|
+
id: "content-manager.form.Input.hint.character.unit",
|
5019
|
+
defaultMessage: "{maxValue, plural, one { character} other { characters}}"
|
5020
|
+
},
|
5021
|
+
{
|
5022
|
+
maxValue: Math.max(minimum || 0, maximum || 0)
|
5023
|
+
}
|
5024
|
+
) : null;
|
5025
|
+
const hasMinAndMax = typeof minimum === "number" && typeof maximum === "number";
|
5026
|
+
return formatMessage(
|
5027
|
+
{
|
5028
|
+
id: "content-manager.form.Input.hint.text",
|
5029
|
+
defaultMessage: "{min, select, undefined {} other {min. {min}}}{divider}{max, select, undefined {} other {max. {max}}}{unit}{br}{description}"
|
5030
|
+
},
|
5031
|
+
{
|
5032
|
+
min: minimum,
|
5033
|
+
max: maximum,
|
5034
|
+
description: hint,
|
5035
|
+
unit: units,
|
5036
|
+
divider: hasMinAndMax ? formatMessage({
|
5037
|
+
id: "content-manager.form.Input.hint.minMaxDivider",
|
5038
|
+
defaultMessage: " / "
|
5039
|
+
}) : null,
|
5040
|
+
br: /* @__PURE__ */ jsx("br", {})
|
5041
|
+
}
|
5042
|
+
);
|
5043
|
+
};
|
5044
|
+
const getMinMax = (attribute) => {
|
5045
|
+
if ("min" in attribute || "max" in attribute) {
|
5046
|
+
return {
|
5047
|
+
maximum: !Number.isNaN(Number(attribute.max)) ? Number(attribute.max) : void 0,
|
5048
|
+
minimum: !Number.isNaN(Number(attribute.min)) ? Number(attribute.min) : void 0
|
5049
|
+
};
|
5050
|
+
} else if ("maxLength" in attribute || "minLength" in attribute) {
|
5051
|
+
return { maximum: attribute.maxLength, minimum: attribute.minLength };
|
5052
|
+
} else {
|
5053
|
+
return { maximum: void 0, minimum: void 0 };
|
5054
|
+
}
|
5055
|
+
};
|
5056
|
+
const MemoizedInputRenderer = memo(InputRenderer);
|
5057
|
+
const RESPONSIVE_CONTAINER_BREAKPOINTS = {
|
5058
|
+
sm: "27.5rem"
|
5059
|
+
// 440px
|
5060
|
+
};
|
5061
|
+
const ResponsiveGridRoot = styled(Grid$1.Root)`
|
5062
|
+
container-type: inline-size;
|
5063
|
+
`;
|
5064
|
+
const ResponsiveGridItem = styled(Grid$1.Item)`
|
5065
|
+
grid-column: span 12;
|
5066
|
+
|
5067
|
+
@container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
|
5068
|
+
${({ col }) => col && `grid-column: span ${col};`}
|
5069
|
+
}
|
5070
|
+
`;
|
5071
|
+
const FormLayout = ({ layout }) => {
|
5072
|
+
const { formatMessage } = useIntl();
|
5073
|
+
const { model } = useDoc();
|
5074
|
+
return /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((panel, index) => {
|
5075
|
+
if (panel.some((row) => row.some((field) => field.type === "dynamiczone"))) {
|
5076
|
+
const [row] = panel;
|
5077
|
+
const [field] = row;
|
5078
|
+
const fieldWithTranslatedLabel = {
|
5079
|
+
...field,
|
5080
|
+
label: formatMessage({
|
5081
|
+
id: `content-manager.content-types.${model}.${field.name}`,
|
5082
|
+
defaultMessage: field.label
|
5083
|
+
})
|
5084
|
+
};
|
5085
|
+
return /* @__PURE__ */ jsx(Grid$1.Root, { gap: 4, children: /* @__PURE__ */ jsx(Grid$1.Item, { col: 12, s: 12, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel }) }) }, field.name);
|
5086
|
+
}
|
5087
|
+
return /* @__PURE__ */ jsx(
|
5088
|
+
Box,
|
5089
|
+
{
|
5090
|
+
hasRadius: true,
|
5091
|
+
background: "neutral0",
|
5092
|
+
shadow: "tableShadow",
|
5093
|
+
paddingLeft: 6,
|
5094
|
+
paddingRight: 6,
|
5095
|
+
paddingTop: 6,
|
5096
|
+
paddingBottom: 6,
|
5097
|
+
borderColor: "neutral150",
|
5098
|
+
children: /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: panel.map((row, gridRowIndex) => /* @__PURE__ */ jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
|
5099
|
+
const fieldWithTranslatedLabel = {
|
5100
|
+
...field,
|
5101
|
+
label: formatMessage({
|
5102
|
+
id: `content-manager.content-types.${model}.${field.name}`,
|
5103
|
+
defaultMessage: field.label
|
5104
|
+
})
|
5105
|
+
};
|
5106
|
+
return /* @__PURE__ */ jsx(
|
5107
|
+
ResponsiveGridItem,
|
5108
|
+
{
|
5109
|
+
col: size,
|
5110
|
+
s: 12,
|
5111
|
+
xs: 12,
|
5112
|
+
direction: "column",
|
5113
|
+
alignItems: "stretch",
|
5114
|
+
children: /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel })
|
5115
|
+
},
|
5116
|
+
field.name
|
5117
|
+
);
|
5118
|
+
}) }, gridRowIndex)) })
|
5119
|
+
},
|
5120
|
+
index
|
5121
|
+
);
|
5122
|
+
}) });
|
5123
|
+
};
|
5124
|
+
const NonRepeatableComponent = ({
|
5125
|
+
attribute,
|
5126
|
+
name: name2,
|
5127
|
+
children,
|
5128
|
+
layout
|
5129
|
+
}) => {
|
5130
|
+
const { formatMessage } = useIntl();
|
5131
|
+
const { value } = useField(name2);
|
5132
|
+
const level = useComponent("NonRepeatableComponent", (state) => state.level);
|
5133
|
+
const isNested = level > 0;
|
5134
|
+
return /* @__PURE__ */ jsx(ComponentProvider, { id: value?.id, uid: attribute.component, level: level + 1, type: "component", children: /* @__PURE__ */ jsx(
|
5135
|
+
Box,
|
5136
|
+
{
|
5137
|
+
background: "neutral100",
|
5138
|
+
paddingLeft: 6,
|
5139
|
+
paddingRight: 6,
|
5140
|
+
paddingTop: 6,
|
5141
|
+
paddingBottom: 6,
|
5142
|
+
hasRadius: isNested,
|
5143
|
+
borderColor: isNested ? "neutral200" : void 0,
|
5144
|
+
children: /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((row, index) => {
|
5145
|
+
return /* @__PURE__ */ jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
|
5146
|
+
const completeFieldName = `${name2}.${field.name}`;
|
5147
|
+
const translatedLabel = formatMessage({
|
5148
|
+
id: `content-manager.components.${attribute.component}.${field.name}`,
|
5149
|
+
defaultMessage: field.label
|
5150
|
+
});
|
5151
|
+
return /* @__PURE__ */ jsx(
|
5152
|
+
ResponsiveGridItem,
|
5153
|
+
{
|
5154
|
+
col: size,
|
5155
|
+
s: 12,
|
5156
|
+
xs: 12,
|
5157
|
+
direction: "column",
|
5158
|
+
alignItems: "stretch",
|
5159
|
+
children: children({ ...field, label: translatedLabel, name: completeFieldName })
|
5160
|
+
},
|
5161
|
+
completeFieldName
|
5162
|
+
);
|
5163
|
+
}) }, index);
|
5164
|
+
}) })
|
5165
|
+
}
|
5166
|
+
) });
|
5167
|
+
};
|
5168
|
+
const RepeatableComponent = ({
|
5169
|
+
attribute,
|
5170
|
+
disabled,
|
5171
|
+
name: name2,
|
5172
|
+
mainField,
|
5173
|
+
children,
|
5174
|
+
layout
|
5175
|
+
}) => {
|
5176
|
+
const { toggleNotification } = useNotification();
|
5177
|
+
const { formatMessage } = useIntl();
|
5178
|
+
const { search: searchString } = useLocation();
|
5179
|
+
const search = React.useMemo(() => new URLSearchParams(searchString), [searchString]);
|
5180
|
+
const { components } = useDoc();
|
5181
|
+
const {
|
5182
|
+
value = [],
|
5183
|
+
error,
|
5184
|
+
rawError
|
5185
|
+
} = useField(name2);
|
5186
|
+
const addFieldRow = useForm("RepeatableComponent", (state) => state.addFieldRow);
|
5187
|
+
const moveFieldRow = useForm("RepeatableComponent", (state) => state.moveFieldRow);
|
5188
|
+
const removeFieldRow = useForm("RepeatableComponent", (state) => state.removeFieldRow);
|
5189
|
+
const { max = Infinity } = attribute;
|
5190
|
+
const [collapseToOpen, setCollapseToOpen] = React.useState("");
|
5191
|
+
const [liveText, setLiveText] = React.useState("");
|
5192
|
+
React.useEffect(() => {
|
5193
|
+
const hasNestedErrors = rawError && Array.isArray(rawError) && rawError.length > 0;
|
5194
|
+
const hasNestedValue = value && Array.isArray(value) && value.length > 0;
|
5195
|
+
if (hasNestedErrors && hasNestedValue) {
|
5196
|
+
const errorOpenItems = rawError.map((_, idx) => {
|
5197
|
+
return value[idx] ? value[idx].__temp_key__ : null;
|
5198
|
+
}).filter((value2) => !!value2);
|
5199
|
+
if (errorOpenItems && errorOpenItems.length > 0) {
|
5200
|
+
setCollapseToOpen((collapseToOpen2) => {
|
5201
|
+
if (!errorOpenItems.includes(collapseToOpen2)) {
|
5202
|
+
return errorOpenItems[0];
|
5203
|
+
}
|
5204
|
+
return collapseToOpen2;
|
5205
|
+
});
|
5206
|
+
}
|
5207
|
+
}
|
5208
|
+
}, [rawError, value]);
|
5209
|
+
const componentTmpKeyWithFocussedField = React.useMemo(() => {
|
5210
|
+
if (search.has("field")) {
|
5211
|
+
const fieldParam = search.get("field");
|
5212
|
+
if (!fieldParam) {
|
5213
|
+
return void 0;
|
5214
|
+
}
|
5215
|
+
const [, path] = fieldParam.split(`${name2}.`);
|
5216
|
+
if (getIn(value, path, void 0) !== void 0) {
|
5217
|
+
const [subpath] = path.split(".");
|
5218
|
+
return getIn(value, subpath, void 0)?.__temp_key__;
|
5219
|
+
}
|
5220
|
+
}
|
5221
|
+
return void 0;
|
5222
|
+
}, [search, name2, value]);
|
5223
|
+
const prevValue = usePrev(value);
|
5224
|
+
React.useEffect(() => {
|
5225
|
+
if (prevValue && prevValue.length < value.length) {
|
5226
|
+
setCollapseToOpen(value[value.length - 1].__temp_key__);
|
5227
|
+
}
|
5228
|
+
}, [value, prevValue]);
|
5229
|
+
React.useEffect(() => {
|
5230
|
+
if (typeof componentTmpKeyWithFocussedField === "string") {
|
5231
|
+
setCollapseToOpen(componentTmpKeyWithFocussedField);
|
5232
|
+
}
|
5233
|
+
}, [componentTmpKeyWithFocussedField]);
|
5234
|
+
const toggleCollapses = () => {
|
5235
|
+
setCollapseToOpen("");
|
5236
|
+
};
|
5237
|
+
const handleClick = () => {
|
5238
|
+
if (value.length < max) {
|
5239
|
+
const schema = components[attribute.component];
|
5240
|
+
const form = createDefaultForm(schema, components);
|
5241
|
+
const data = transformDocument(schema, components)(form);
|
5242
|
+
addFieldRow(name2, data);
|
5243
|
+
} else if (value.length >= max) {
|
5244
|
+
toggleNotification({
|
5245
|
+
type: "info",
|
5246
|
+
message: formatMessage({
|
5247
|
+
id: getTranslation("components.notification.info.maximum-requirement")
|
5248
|
+
})
|
5249
|
+
});
|
5250
|
+
}
|
5251
|
+
};
|
5252
|
+
const handleMoveComponentField = (newIndex, currentIndex) => {
|
5253
|
+
setLiveText(
|
5254
|
+
formatMessage(
|
5255
|
+
{
|
5256
|
+
id: getTranslation("dnd.reorder"),
|
5257
|
+
defaultMessage: "{item}, moved. New position in list: {position}."
|
5258
|
+
},
|
5259
|
+
{
|
5260
|
+
item: `${name2}.${currentIndex}`,
|
5261
|
+
position: getItemPos(newIndex)
|
5025
5262
|
}
|
5026
|
-
)
|
5027
|
-
|
5028
|
-
|
5029
|
-
|
5030
|
-
|
5031
|
-
|
5032
|
-
|
5033
|
-
|
5034
|
-
|
5035
|
-
|
5036
|
-
|
5037
|
-
InputRenderer$1,
|
5263
|
+
)
|
5264
|
+
);
|
5265
|
+
moveFieldRow(name2, currentIndex, newIndex);
|
5266
|
+
};
|
5267
|
+
const handleValueChange = (key) => {
|
5268
|
+
setCollapseToOpen(key);
|
5269
|
+
};
|
5270
|
+
const getItemPos = (index) => `${index + 1} of ${value.length}`;
|
5271
|
+
const handleCancel = (index) => {
|
5272
|
+
setLiveText(
|
5273
|
+
formatMessage(
|
5038
5274
|
{
|
5039
|
-
|
5040
|
-
|
5041
|
-
|
5042
|
-
|
5043
|
-
|
5275
|
+
id: getTranslation("dnd.cancel-item"),
|
5276
|
+
defaultMessage: "{item}, dropped. Re-order cancelled."
|
5277
|
+
},
|
5278
|
+
{
|
5279
|
+
item: `${name2}.${index}`
|
5044
5280
|
}
|
5045
|
-
)
|
5046
|
-
|
5047
|
-
|
5048
|
-
|
5049
|
-
|
5281
|
+
)
|
5282
|
+
);
|
5283
|
+
};
|
5284
|
+
const handleGrabItem = (index) => {
|
5285
|
+
setLiveText(
|
5286
|
+
formatMessage(
|
5050
5287
|
{
|
5051
|
-
|
5052
|
-
|
5053
|
-
|
5054
|
-
|
5288
|
+
id: getTranslation("dnd.grab-item"),
|
5289
|
+
defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
|
5290
|
+
},
|
5291
|
+
{
|
5292
|
+
item: `${name2}.${index}`,
|
5293
|
+
position: getItemPos(index)
|
5055
5294
|
}
|
5056
|
-
)
|
5295
|
+
)
|
5296
|
+
);
|
5297
|
+
};
|
5298
|
+
const handleDropItem = (index) => {
|
5299
|
+
setLiveText(
|
5300
|
+
formatMessage(
|
5301
|
+
{
|
5302
|
+
id: getTranslation("dnd.drop-item"),
|
5303
|
+
defaultMessage: `{item}, dropped. Final position in list: {position}.`
|
5304
|
+
},
|
5305
|
+
{
|
5306
|
+
item: `${name2}.${index}`,
|
5307
|
+
position: getItemPos(index)
|
5308
|
+
}
|
5309
|
+
)
|
5310
|
+
);
|
5311
|
+
};
|
5312
|
+
const ariaDescriptionId = React.useId();
|
5313
|
+
const level = useComponent("RepeatableComponent", (state) => state.level);
|
5314
|
+
if (value.length === 0) {
|
5315
|
+
return /* @__PURE__ */ jsx(Initializer, { disabled, name: name2, onClick: handleClick });
|
5057
5316
|
}
|
5317
|
+
return /* @__PURE__ */ jsxs(Box, { hasRadius: true, children: [
|
5318
|
+
/* @__PURE__ */ jsx(VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
|
5319
|
+
id: getTranslation("dnd.instructions"),
|
5320
|
+
defaultMessage: `Press spacebar to grab and re-order`
|
5321
|
+
}) }),
|
5322
|
+
/* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "assertive", children: liveText }),
|
5323
|
+
/* @__PURE__ */ jsxs(
|
5324
|
+
AccordionRoot,
|
5325
|
+
{
|
5326
|
+
$error: error,
|
5327
|
+
value: collapseToOpen,
|
5328
|
+
onValueChange: handleValueChange,
|
5329
|
+
"aria-describedby": ariaDescriptionId,
|
5330
|
+
children: [
|
5331
|
+
value.map(({ __temp_key__: key, id }, index) => {
|
5332
|
+
const nameWithIndex = `${name2}.${index}`;
|
5333
|
+
return /* @__PURE__ */ jsx(
|
5334
|
+
ComponentProvider,
|
5335
|
+
{
|
5336
|
+
id,
|
5337
|
+
uid: attribute.component,
|
5338
|
+
level: level + 1,
|
5339
|
+
type: "repeatable",
|
5340
|
+
children: /* @__PURE__ */ jsx(
|
5341
|
+
Component,
|
5342
|
+
{
|
5343
|
+
disabled,
|
5344
|
+
name: nameWithIndex,
|
5345
|
+
attribute,
|
5346
|
+
index,
|
5347
|
+
mainField,
|
5348
|
+
onMoveItem: handleMoveComponentField,
|
5349
|
+
onDeleteComponent: () => {
|
5350
|
+
removeFieldRow(name2, index);
|
5351
|
+
toggleCollapses();
|
5352
|
+
},
|
5353
|
+
toggleCollapses,
|
5354
|
+
onCancel: handleCancel,
|
5355
|
+
onDropItem: handleDropItem,
|
5356
|
+
onGrabItem: handleGrabItem,
|
5357
|
+
__temp_key__: key,
|
5358
|
+
children: layout.map((row, index2) => {
|
5359
|
+
return /* @__PURE__ */ jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
|
5360
|
+
const completeFieldName = `${nameWithIndex}.${field.name}`;
|
5361
|
+
const translatedLabel = formatMessage({
|
5362
|
+
id: `content-manager.components.${attribute.component}.${field.name}`,
|
5363
|
+
defaultMessage: field.label
|
5364
|
+
});
|
5365
|
+
return /* @__PURE__ */ jsx(
|
5366
|
+
ResponsiveGridItem,
|
5367
|
+
{
|
5368
|
+
col: size,
|
5369
|
+
s: 12,
|
5370
|
+
xs: 12,
|
5371
|
+
direction: "column",
|
5372
|
+
alignItems: "stretch",
|
5373
|
+
children: children({
|
5374
|
+
...field,
|
5375
|
+
label: translatedLabel,
|
5376
|
+
name: completeFieldName
|
5377
|
+
})
|
5378
|
+
},
|
5379
|
+
completeFieldName
|
5380
|
+
);
|
5381
|
+
}) }, index2);
|
5382
|
+
})
|
5383
|
+
}
|
5384
|
+
)
|
5385
|
+
},
|
5386
|
+
key
|
5387
|
+
);
|
5388
|
+
}),
|
5389
|
+
/* @__PURE__ */ jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsx(Plus, {}), children: formatMessage({
|
5390
|
+
id: getTranslation("containers.EditView.add.new-entry"),
|
5391
|
+
defaultMessage: "Add an entry"
|
5392
|
+
}) })
|
5393
|
+
]
|
5394
|
+
}
|
5395
|
+
)
|
5396
|
+
] });
|
5058
5397
|
};
|
5059
|
-
const
|
5060
|
-
|
5061
|
-
|
5062
|
-
|
5063
|
-
|
5064
|
-
|
5065
|
-
|
5066
|
-
|
5067
|
-
|
5068
|
-
)
|
5069
|
-
|
5070
|
-
|
5071
|
-
|
5072
|
-
|
5073
|
-
|
5074
|
-
|
5075
|
-
|
5076
|
-
) : null;
|
5077
|
-
const hasMinAndMax = typeof minimum === "number" && typeof maximum === "number";
|
5078
|
-
return formatMessage(
|
5079
|
-
{
|
5080
|
-
id: "content-manager.form.Input.hint.text",
|
5081
|
-
defaultMessage: "{min, select, undefined {} other {min. {min}}}{divider}{max, select, undefined {} other {max. {max}}}{unit}{br}{description}"
|
5082
|
-
},
|
5083
|
-
{
|
5084
|
-
min: minimum,
|
5085
|
-
max: maximum,
|
5086
|
-
description: hint,
|
5087
|
-
unit: units,
|
5088
|
-
divider: hasMinAndMax ? formatMessage({
|
5089
|
-
id: "content-manager.form.Input.hint.minMaxDivider",
|
5090
|
-
defaultMessage: " / "
|
5091
|
-
}) : null,
|
5092
|
-
br: /* @__PURE__ */ jsx("br", {})
|
5398
|
+
const AccordionRoot = styled(Accordion.Root)`
|
5399
|
+
border: 1px solid
|
5400
|
+
${({ theme, $error }) => $error ? theme.colors.danger600 : theme.colors.neutral200};
|
5401
|
+
`;
|
5402
|
+
const TextButtonCustom = styled(TextButton)`
|
5403
|
+
width: 100%;
|
5404
|
+
display: flex;
|
5405
|
+
justify-content: center;
|
5406
|
+
border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
|
5407
|
+
padding-inline: ${(props) => props.theme.spaces[6]};
|
5408
|
+
padding-block: ${(props) => props.theme.spaces[3]};
|
5409
|
+
|
5410
|
+
&:not([disabled]) {
|
5411
|
+
cursor: pointer;
|
5412
|
+
|
5413
|
+
&:hover {
|
5414
|
+
background-color: ${(props) => props.theme.colors.primary100};
|
5093
5415
|
}
|
5094
|
-
);
|
5095
|
-
};
|
5096
|
-
const getMinMax = (attribute) => {
|
5097
|
-
if ("min" in attribute || "max" in attribute) {
|
5098
|
-
return {
|
5099
|
-
maximum: !Number.isNaN(Number(attribute.max)) ? Number(attribute.max) : void 0,
|
5100
|
-
minimum: !Number.isNaN(Number(attribute.min)) ? Number(attribute.min) : void 0
|
5101
|
-
};
|
5102
|
-
} else if ("maxLength" in attribute || "minLength" in attribute) {
|
5103
|
-
return { maximum: attribute.maxLength, minimum: attribute.minLength };
|
5104
|
-
} else {
|
5105
|
-
return { maximum: void 0, minimum: void 0 };
|
5106
5416
|
}
|
5107
|
-
|
5108
|
-
|
5109
|
-
|
5110
|
-
|
5417
|
+
|
5418
|
+
span {
|
5419
|
+
font-weight: 600;
|
5420
|
+
font-size: 1.4rem;
|
5421
|
+
line-height: 2.4rem;
|
5422
|
+
}
|
5423
|
+
|
5424
|
+
@media (prefers-reduced-motion: no-preference) {
|
5425
|
+
transition: background-color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
|
5426
|
+
}
|
5427
|
+
`;
|
5428
|
+
const Component = ({
|
5111
5429
|
disabled,
|
5112
5430
|
index,
|
5113
5431
|
name: name2,
|
5114
|
-
|
5115
|
-
|
5116
|
-
|
5117
|
-
|
5118
|
-
|
5119
|
-
|
5120
|
-
|
5432
|
+
mainField = {
|
5433
|
+
name: "id",
|
5434
|
+
type: "integer"
|
5435
|
+
},
|
5436
|
+
children,
|
5437
|
+
onDeleteComponent,
|
5438
|
+
toggleCollapses,
|
5439
|
+
__temp_key__,
|
5440
|
+
...dragProps
|
5121
5441
|
}) => {
|
5122
5442
|
const { formatMessage } = useIntl();
|
5123
|
-
const
|
5124
|
-
|
5125
|
-
|
5126
|
-
|
5127
|
-
const
|
5128
|
-
const { mainField } = components[componentUid]?.settings ?? { mainField: "id" };
|
5129
|
-
const mainFieldValue = getIn(formValues, `${name2}.${index}.${mainField}`);
|
5130
|
-
const displayedValue = mainField === "id" || !mainFieldValue ? "" : String(mainFieldValue).trim();
|
5131
|
-
const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
|
5132
|
-
return mainValue;
|
5133
|
-
}, [componentUid, components, formValues, name2, index]);
|
5134
|
-
const { icon, displayName } = React.useMemo(() => {
|
5135
|
-
const [category] = componentUid.split(".");
|
5136
|
-
const { icon: icon2, displayName: displayName2 } = (dynamicComponentsByCategory[category] ?? []).find(
|
5137
|
-
(component) => component.uid === componentUid
|
5138
|
-
) ?? { icon: null, displayName: null };
|
5139
|
-
return { icon: icon2, displayName: displayName2 };
|
5140
|
-
}, [componentUid, dynamicComponentsByCategory]);
|
5443
|
+
const displayValue = useForm("RepeatableComponent", (state) => {
|
5444
|
+
return getIn(state.values, [...name2.split("."), mainField.name]);
|
5445
|
+
});
|
5446
|
+
const accordionRef = React.useRef(null);
|
5447
|
+
const componentKey = name2.split(".").slice(0, -1).join(".");
|
5141
5448
|
const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(!disabled, {
|
5142
|
-
type: `${ItemTypes.
|
5449
|
+
type: `${ItemTypes.COMPONENT}_${componentKey}`,
|
5143
5450
|
index,
|
5144
5451
|
item: {
|
5145
5452
|
index,
|
5146
|
-
displayedValue:
|
5147
|
-
icon
|
5453
|
+
displayedValue: displayValue
|
5148
5454
|
},
|
5149
|
-
|
5150
|
-
|
5151
|
-
|
5152
|
-
|
5455
|
+
onStart() {
|
5456
|
+
toggleCollapses();
|
5457
|
+
},
|
5458
|
+
...dragProps
|
5153
5459
|
});
|
5154
5460
|
React.useEffect(() => {
|
5155
5461
|
dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
|
5156
5462
|
}, [dragPreviewRef, index]);
|
5157
|
-
const
|
5158
|
-
const
|
5159
|
-
|
5160
|
-
|
5161
|
-
|
5162
|
-
|
5163
|
-
|
5164
|
-
|
5165
|
-
|
5166
|
-
|
5167
|
-
|
5168
|
-
IconButton,
|
5169
|
-
{
|
5170
|
-
variant: "ghost",
|
5171
|
-
label: formatMessage(
|
5463
|
+
const composedAccordionRefs = useComposedRefs(accordionRef, dragRef);
|
5464
|
+
const composedBoxRefs = useComposedRefs(
|
5465
|
+
boxRef,
|
5466
|
+
dropRef
|
5467
|
+
);
|
5468
|
+
return /* @__PURE__ */ jsx(Fragment, { children: isDragging ? /* @__PURE__ */ jsx(Preview, {}) : /* @__PURE__ */ jsxs(Accordion.Item, { ref: composedBoxRefs, value: __temp_key__, children: [
|
5469
|
+
/* @__PURE__ */ jsxs(Accordion.Header, { children: [
|
5470
|
+
/* @__PURE__ */ jsx(Accordion.Trigger, { children: displayValue }),
|
5471
|
+
/* @__PURE__ */ jsxs(Accordion.Actions, { children: [
|
5472
|
+
/* @__PURE__ */ jsx(
|
5473
|
+
IconButton,
|
5172
5474
|
{
|
5173
|
-
|
5174
|
-
|
5175
|
-
|
5176
|
-
|
5475
|
+
variant: "ghost",
|
5476
|
+
onClick: onDeleteComponent,
|
5477
|
+
label: formatMessage({
|
5478
|
+
id: getTranslation("containers.Edit.delete"),
|
5479
|
+
defaultMessage: "Delete"
|
5480
|
+
}),
|
5481
|
+
children: /* @__PURE__ */ jsx(Trash, {})
|
5482
|
+
}
|
5177
5483
|
),
|
5178
|
-
onClick: onRemoveComponentClick,
|
5179
|
-
children: /* @__PURE__ */ jsx(Trash, {})
|
5180
|
-
}
|
5181
|
-
),
|
5182
|
-
/* @__PURE__ */ jsx(
|
5183
|
-
IconButton,
|
5184
|
-
{
|
5185
|
-
variant: "ghost",
|
5186
|
-
onClick: (e) => e.stopPropagation(),
|
5187
|
-
"data-handler-id": handlerId,
|
5188
|
-
ref: dragRef,
|
5189
|
-
label: formatMessage({
|
5190
|
-
id: getTranslation("components.DragHandle-label"),
|
5191
|
-
defaultMessage: "Drag"
|
5192
|
-
}),
|
5193
|
-
onKeyDown: handleKeyDown,
|
5194
|
-
children: /* @__PURE__ */ jsx(Drag, {})
|
5195
|
-
}
|
5196
|
-
),
|
5197
|
-
/* @__PURE__ */ jsxs(Menu.Root, { children: [
|
5198
|
-
/* @__PURE__ */ jsxs(Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
|
5199
|
-
/* @__PURE__ */ jsx(More, { "aria-hidden": true, focusable: false }),
|
5200
|
-
/* @__PURE__ */ jsx(VisuallyHidden, { tag: "span", children: formatMessage({
|
5201
|
-
id: getTranslation("components.DynamicZone.more-actions"),
|
5202
|
-
defaultMessage: "More actions"
|
5203
|
-
}) })
|
5204
|
-
] }),
|
5205
|
-
/* @__PURE__ */ jsxs(Menu.Content, { children: [
|
5206
|
-
/* @__PURE__ */ jsxs(Menu.SubRoot, { children: [
|
5207
|
-
/* @__PURE__ */ jsx(Menu.SubTrigger, { children: formatMessage({
|
5208
|
-
id: getTranslation("components.DynamicZone.add-item-above"),
|
5209
|
-
defaultMessage: "Add component above"
|
5210
|
-
}) }),
|
5211
|
-
/* @__PURE__ */ jsx(Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
|
5212
|
-
/* @__PURE__ */ jsx(Menu.Label, { children: category }),
|
5213
|
-
components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsx(MenuItem, { onSelect: () => onAddComponent(uid, index), children: displayName2 }, componentUid))
|
5214
|
-
] }, category)) })
|
5215
|
-
] }),
|
5216
|
-
/* @__PURE__ */ jsxs(Menu.SubRoot, { children: [
|
5217
|
-
/* @__PURE__ */ jsx(Menu.SubTrigger, { children: formatMessage({
|
5218
|
-
id: getTranslation("components.DynamicZone.add-item-below"),
|
5219
|
-
defaultMessage: "Add component below"
|
5220
|
-
}) }),
|
5221
|
-
/* @__PURE__ */ jsx(Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
|
5222
|
-
/* @__PURE__ */ jsx(Menu.Label, { children: category }),
|
5223
|
-
components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsx(MenuItem, { onSelect: () => onAddComponent(uid, index + 1), children: displayName2 }, componentUid))
|
5224
|
-
] }, category)) })
|
5225
|
-
] })
|
5226
|
-
] })
|
5227
|
-
] })
|
5228
|
-
] });
|
5229
|
-
const accordionTitle = title ? `${displayName} ${title}` : displayName;
|
5230
|
-
return /* @__PURE__ */ jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
|
5231
|
-
/* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Rectangle, { background: "neutral200" }) }),
|
5232
|
-
/* @__PURE__ */ jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsx(Preview, {}) : /* @__PURE__ */ jsx(Accordion.Root, { value: collapseToOpen, onValueChange: setCollapseToOpen, children: /* @__PURE__ */ jsxs(Accordion.Item, { value: accordionValue, children: [
|
5233
|
-
/* @__PURE__ */ jsxs(Accordion.Header, { children: [
|
5234
5484
|
/* @__PURE__ */ jsx(
|
5235
|
-
|
5485
|
+
IconButton,
|
5236
5486
|
{
|
5237
|
-
|
5238
|
-
|
5487
|
+
ref: composedAccordionRefs,
|
5488
|
+
variant: "ghost",
|
5489
|
+
onClick: (e) => e.stopPropagation(),
|
5490
|
+
"data-handler-id": handlerId,
|
5491
|
+
label: formatMessage({
|
5492
|
+
id: getTranslation("components.DragHandle-label"),
|
5493
|
+
defaultMessage: "Drag"
|
5494
|
+
}),
|
5495
|
+
onKeyDown: handleKeyDown,
|
5496
|
+
children: /* @__PURE__ */ jsx(Drag, {})
|
5239
5497
|
}
|
5240
|
-
)
|
5241
|
-
/* @__PURE__ */ jsx(Accordion.Actions, { children: accordionActions })
|
5242
|
-
] }),
|
5243
|
-
/* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsx(Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: /* @__PURE__ */ jsx(Grid$1.Root, { gap: 4, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsx(
|
5244
|
-
Grid$1.Item,
|
5245
|
-
{
|
5246
|
-
col: 12,
|
5247
|
-
s: 12,
|
5248
|
-
xs: 12,
|
5249
|
-
direction: "column",
|
5250
|
-
alignItems: "stretch",
|
5251
|
-
children: /* @__PURE__ */ jsx(Grid$1.Root, { gap: 4, children: row.map(({ size, ...field }) => {
|
5252
|
-
const fieldName = `${name2}.${index}.${field.name}`;
|
5253
|
-
const fieldWithTranslatedLabel = {
|
5254
|
-
...field,
|
5255
|
-
label: formatMessage({
|
5256
|
-
id: `content-manager.components.${componentUid}.${field.name}`,
|
5257
|
-
defaultMessage: field.label
|
5258
|
-
})
|
5259
|
-
};
|
5260
|
-
return /* @__PURE__ */ jsx(
|
5261
|
-
Grid$1.Item,
|
5262
|
-
{
|
5263
|
-
col: size,
|
5264
|
-
s: 12,
|
5265
|
-
xs: 12,
|
5266
|
-
direction: "column",
|
5267
|
-
alignItems: "stretch",
|
5268
|
-
children: /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel, name: fieldName })
|
5269
|
-
},
|
5270
|
-
fieldName
|
5271
|
-
);
|
5272
|
-
}) })
|
5273
|
-
},
|
5274
|
-
rowInd
|
5275
|
-
)) }) }) }) })
|
5276
|
-
] }) }) })
|
5277
|
-
] });
|
5278
|
-
};
|
5279
|
-
const StyledBox = styled(Box)`
|
5280
|
-
> div:first-child {
|
5281
|
-
box-shadow: ${({ theme }) => theme.shadows.tableShadow};
|
5282
|
-
}
|
5283
|
-
`;
|
5284
|
-
const AccordionContentRadius = styled(Box)`
|
5285
|
-
border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
|
5286
|
-
`;
|
5287
|
-
const Rectangle = styled(Box)`
|
5288
|
-
width: ${({ theme }) => theme.spaces[2]};
|
5289
|
-
height: ${({ theme }) => theme.spaces[4]};
|
5290
|
-
`;
|
5291
|
-
const Preview = styled.span`
|
5292
|
-
display: block;
|
5293
|
-
background-color: ${({ theme }) => theme.colors.primary100};
|
5294
|
-
outline: 1px dashed ${({ theme }) => theme.colors.primary500};
|
5295
|
-
outline-offset: -1px;
|
5296
|
-
padding: ${({ theme }) => theme.spaces[6]};
|
5297
|
-
`;
|
5298
|
-
const ComponentContainer = styled(Box)`
|
5299
|
-
list-style: none;
|
5300
|
-
padding: 0;
|
5301
|
-
margin: 0;
|
5302
|
-
`;
|
5303
|
-
const DynamicZoneLabel = ({
|
5304
|
-
hint,
|
5305
|
-
label,
|
5306
|
-
labelAction,
|
5307
|
-
name: name2,
|
5308
|
-
numberOfComponents = 0,
|
5309
|
-
required
|
5310
|
-
}) => {
|
5311
|
-
return /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(
|
5312
|
-
Box,
|
5313
|
-
{
|
5314
|
-
paddingTop: 3,
|
5315
|
-
paddingBottom: 3,
|
5316
|
-
paddingRight: 4,
|
5317
|
-
paddingLeft: 4,
|
5318
|
-
borderRadius: "26px",
|
5319
|
-
background: "neutral0",
|
5320
|
-
shadow: "filterShadow",
|
5321
|
-
color: "neutral500",
|
5322
|
-
children: /* @__PURE__ */ jsxs(Flex, { direction: "column", justifyContent: "center", children: [
|
5323
|
-
/* @__PURE__ */ jsxs(Flex, { maxWidth: "35.6rem", children: [
|
5324
|
-
/* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", ellipsis: true, children: [
|
5325
|
-
label || name2,
|
5326
|
-
" "
|
5327
|
-
] }),
|
5328
|
-
/* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", children: [
|
5329
|
-
"(",
|
5330
|
-
numberOfComponents,
|
5331
|
-
")"
|
5332
|
-
] }),
|
5333
|
-
required && /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: "*" }),
|
5334
|
-
labelAction && /* @__PURE__ */ jsx(Box, { paddingLeft: 1, children: labelAction })
|
5335
|
-
] }),
|
5336
|
-
hint && /* @__PURE__ */ jsx(Box, { paddingTop: 1, maxWidth: "35.6rem", children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: hint }) })
|
5498
|
+
)
|
5337
5499
|
] })
|
5338
|
-
}
|
5339
|
-
|
5340
|
-
|
5341
|
-
|
5342
|
-
|
5343
|
-
|
5344
|
-
|
5345
|
-
|
5346
|
-
|
5347
|
-
|
5348
|
-
|
5349
|
-
|
5350
|
-
|
5500
|
+
] }),
|
5501
|
+
/* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(
|
5502
|
+
Flex,
|
5503
|
+
{
|
5504
|
+
direction: "column",
|
5505
|
+
alignItems: "stretch",
|
5506
|
+
background: "neutral100",
|
5507
|
+
padding: 6,
|
5508
|
+
gap: 6,
|
5509
|
+
children
|
5510
|
+
}
|
5511
|
+
) })
|
5512
|
+
] }) });
|
5513
|
+
};
|
5514
|
+
const Preview = () => {
|
5515
|
+
return /* @__PURE__ */ jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
|
5516
|
+
};
|
5517
|
+
const StyledSpan = styled(Box)`
|
5518
|
+
display: block;
|
5519
|
+
outline: 1px dashed ${({ theme }) => theme.colors.primary500};
|
5520
|
+
outline-offset: -1px;
|
5521
|
+
`;
|
5522
|
+
const ComponentInput = ({
|
5351
5523
|
label,
|
5352
|
-
|
5524
|
+
required,
|
5353
5525
|
name: name2,
|
5354
|
-
|
5526
|
+
attribute,
|
5527
|
+
disabled,
|
5528
|
+
labelAction,
|
5529
|
+
...props
|
5355
5530
|
}) => {
|
5356
|
-
const { max = Infinity, min = -Infinity } = attribute ?? {};
|
5357
|
-
const [addComponentIsOpen, setAddComponentIsOpen] = React.useState(false);
|
5358
|
-
const [liveText, setLiveText] = React.useState("");
|
5359
|
-
const { components, isLoading } = useDoc();
|
5360
|
-
const disabled = disabledProp || isLoading;
|
5361
|
-
const { addFieldRow, removeFieldRow, moveFieldRow } = useForm(
|
5362
|
-
"DynamicZone",
|
5363
|
-
({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
|
5364
|
-
addFieldRow: addFieldRow2,
|
5365
|
-
removeFieldRow: removeFieldRow2,
|
5366
|
-
moveFieldRow: moveFieldRow2
|
5367
|
-
})
|
5368
|
-
);
|
5369
|
-
const { value = [], error } = useField(name2);
|
5370
|
-
const dynamicComponentsByCategory = React.useMemo(() => {
|
5371
|
-
return attribute.components.reduce((acc, componentUid) => {
|
5372
|
-
const { category, info } = components[componentUid] ?? { info: {} };
|
5373
|
-
const component = { uid: componentUid, displayName: info.displayName, icon: info.icon };
|
5374
|
-
if (!acc[category]) {
|
5375
|
-
acc[category] = [];
|
5376
|
-
}
|
5377
|
-
acc[category] = [...acc[category], component];
|
5378
|
-
return acc;
|
5379
|
-
}, {});
|
5380
|
-
}, [attribute.components, components]);
|
5381
5531
|
const { formatMessage } = useIntl();
|
5382
|
-
const
|
5383
|
-
const
|
5384
|
-
const
|
5385
|
-
|
5386
|
-
const schema = components[
|
5532
|
+
const field = useField(name2);
|
5533
|
+
const showResetComponent = !attribute.repeatable && field.value && !disabled;
|
5534
|
+
const { components } = useDoc();
|
5535
|
+
const handleInitialisationClick = () => {
|
5536
|
+
const schema = components[attribute.component];
|
5387
5537
|
const form = createDefaultForm(schema, components);
|
5388
|
-
const
|
5389
|
-
|
5390
|
-
__component: uid
|
5391
|
-
}));
|
5392
|
-
const data = transformations(form);
|
5393
|
-
addFieldRow(name2, data, position);
|
5394
|
-
};
|
5395
|
-
const handleClickOpenPicker = () => {
|
5396
|
-
if (dynamicDisplayedComponentsLength < max) {
|
5397
|
-
setAddComponentIsOpen((prev) => !prev);
|
5398
|
-
} else {
|
5399
|
-
toggleNotification({
|
5400
|
-
type: "info",
|
5401
|
-
message: formatMessage({
|
5402
|
-
id: getTranslation("components.notification.info.maximum-requirement")
|
5403
|
-
})
|
5404
|
-
});
|
5405
|
-
}
|
5406
|
-
};
|
5407
|
-
const handleMoveComponent = (newIndex, currentIndex) => {
|
5408
|
-
setLiveText(
|
5409
|
-
formatMessage(
|
5410
|
-
{
|
5411
|
-
id: getTranslation("dnd.reorder"),
|
5412
|
-
defaultMessage: "{item}, moved. New position in list: {position}."
|
5413
|
-
},
|
5414
|
-
{
|
5415
|
-
item: `${name2}.${currentIndex}`,
|
5416
|
-
position: getItemPos(newIndex)
|
5417
|
-
}
|
5418
|
-
)
|
5419
|
-
);
|
5420
|
-
moveFieldRow(name2, currentIndex, newIndex);
|
5421
|
-
};
|
5422
|
-
const getItemPos = (index) => `${index + 1} of ${value.length}`;
|
5423
|
-
const handleCancel = (index) => {
|
5424
|
-
setLiveText(
|
5425
|
-
formatMessage(
|
5426
|
-
{
|
5427
|
-
id: getTranslation("dnd.cancel-item"),
|
5428
|
-
defaultMessage: "{item}, dropped. Re-order cancelled."
|
5429
|
-
},
|
5430
|
-
{
|
5431
|
-
item: `${name2}.${index}`
|
5432
|
-
}
|
5433
|
-
)
|
5434
|
-
);
|
5435
|
-
};
|
5436
|
-
const handleGrabItem = (index) => {
|
5437
|
-
setLiveText(
|
5438
|
-
formatMessage(
|
5439
|
-
{
|
5440
|
-
id: getTranslation("dnd.grab-item"),
|
5441
|
-
defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
|
5442
|
-
},
|
5443
|
-
{
|
5444
|
-
item: `${name2}.${index}`,
|
5445
|
-
position: getItemPos(index)
|
5446
|
-
}
|
5447
|
-
)
|
5448
|
-
);
|
5538
|
+
const data = transformDocument(schema, components)(form);
|
5539
|
+
field.onChange(name2, data);
|
5449
5540
|
};
|
5450
|
-
|
5451
|
-
|
5452
|
-
|
5453
|
-
|
5454
|
-
|
5455
|
-
|
5456
|
-
|
5541
|
+
return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, required, children: [
|
5542
|
+
/* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
|
5543
|
+
/* @__PURE__ */ jsxs(Field.Label, { action: labelAction, children: [
|
5544
|
+
label,
|
5545
|
+
attribute.repeatable && /* @__PURE__ */ jsxs(Fragment, { children: [
|
5546
|
+
" (",
|
5547
|
+
Array.isArray(field.value) ? field.value.length : 0,
|
5548
|
+
")"
|
5549
|
+
] })
|
5550
|
+
] }),
|
5551
|
+
showResetComponent && /* @__PURE__ */ jsx(
|
5552
|
+
IconButton,
|
5457
5553
|
{
|
5458
|
-
|
5459
|
-
|
5554
|
+
label: formatMessage({
|
5555
|
+
id: getTranslation("components.reset-entry"),
|
5556
|
+
defaultMessage: "Reset Entry"
|
5557
|
+
}),
|
5558
|
+
variant: "ghost",
|
5559
|
+
onClick: () => {
|
5560
|
+
field.onChange(name2, null);
|
5561
|
+
},
|
5562
|
+
children: /* @__PURE__ */ jsx(Trash, {})
|
5460
5563
|
}
|
5461
5564
|
)
|
5462
|
-
);
|
5463
|
-
};
|
5464
|
-
const handleRemoveComponent = (name22, currentIndex) => () => {
|
5465
|
-
removeFieldRow(name22, currentIndex);
|
5466
|
-
};
|
5467
|
-
const hasError = error !== void 0;
|
5468
|
-
const renderButtonLabel = () => {
|
5469
|
-
if (addComponentIsOpen) {
|
5470
|
-
return formatMessage({ id: "app.utils.close-label", defaultMessage: "Close" });
|
5471
|
-
}
|
5472
|
-
if (hasError && dynamicDisplayedComponentsLength > max) {
|
5473
|
-
return formatMessage(
|
5474
|
-
{
|
5475
|
-
id: getTranslation(`components.DynamicZone.extra-components`),
|
5476
|
-
defaultMessage: "There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}"
|
5477
|
-
},
|
5478
|
-
{
|
5479
|
-
number: dynamicDisplayedComponentsLength - max
|
5480
|
-
}
|
5481
|
-
);
|
5482
|
-
}
|
5483
|
-
if (hasError && dynamicDisplayedComponentsLength < min) {
|
5484
|
-
return formatMessage(
|
5485
|
-
{
|
5486
|
-
id: getTranslation(`components.DynamicZone.missing-components`),
|
5487
|
-
defaultMessage: "There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}"
|
5488
|
-
},
|
5489
|
-
{ number: min - dynamicDisplayedComponentsLength }
|
5490
|
-
);
|
5491
|
-
}
|
5492
|
-
return formatMessage(
|
5493
|
-
{
|
5494
|
-
id: getTranslation("components.DynamicZone.add-component"),
|
5495
|
-
defaultMessage: "Add a component to {componentName}"
|
5496
|
-
},
|
5497
|
-
{ componentName: label || name2 }
|
5498
|
-
);
|
5499
|
-
};
|
5500
|
-
const level = useComponent("DynamicZone", (state) => state.level);
|
5501
|
-
const ariaDescriptionId = React.useId();
|
5502
|
-
return /* @__PURE__ */ jsx(DynamicZoneProvider, { isInDynamicZone: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
|
5503
|
-
dynamicDisplayedComponentsLength > 0 && /* @__PURE__ */ jsxs(Box, { children: [
|
5504
|
-
/* @__PURE__ */ jsx(
|
5505
|
-
DynamicZoneLabel,
|
5506
|
-
{
|
5507
|
-
hint,
|
5508
|
-
label,
|
5509
|
-
labelAction,
|
5510
|
-
name: name2,
|
5511
|
-
numberOfComponents: dynamicDisplayedComponentsLength,
|
5512
|
-
required
|
5513
|
-
}
|
5514
|
-
),
|
5515
|
-
/* @__PURE__ */ jsx(VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
|
5516
|
-
id: getTranslation("dnd.instructions"),
|
5517
|
-
defaultMessage: `Press spacebar to grab and re-order`
|
5518
|
-
}) }),
|
5519
|
-
/* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "assertive", children: liveText }),
|
5520
|
-
/* @__PURE__ */ jsx("ol", { "aria-describedby": ariaDescriptionId, children: value.map((field, index) => /* @__PURE__ */ jsx(
|
5521
|
-
ComponentProvider,
|
5522
|
-
{
|
5523
|
-
level: level + 1,
|
5524
|
-
uid: field.__component,
|
5525
|
-
id: field.id,
|
5526
|
-
type: "dynamiczone",
|
5527
|
-
children: /* @__PURE__ */ jsx(
|
5528
|
-
DynamicComponent,
|
5529
|
-
{
|
5530
|
-
disabled,
|
5531
|
-
name: name2,
|
5532
|
-
index,
|
5533
|
-
componentUid: field.__component,
|
5534
|
-
onMoveComponent: handleMoveComponent,
|
5535
|
-
onRemoveComponentClick: handleRemoveComponent(name2, index),
|
5536
|
-
onCancel: handleCancel,
|
5537
|
-
onDropItem: handleDropItem,
|
5538
|
-
onGrabItem: handleGrabItem,
|
5539
|
-
onAddComponent: handleAddComponent,
|
5540
|
-
dynamicComponentsByCategory
|
5541
|
-
}
|
5542
|
-
)
|
5543
|
-
},
|
5544
|
-
field.__temp_key__
|
5545
|
-
)) })
|
5546
5565
|
] }),
|
5547
|
-
/* @__PURE__ */ jsx(
|
5548
|
-
|
5549
|
-
|
5550
|
-
|
5551
|
-
|
5552
|
-
isOpen: addComponentIsOpen,
|
5553
|
-
onClick: handleClickOpenPicker,
|
5554
|
-
children: renderButtonLabel()
|
5555
|
-
}
|
5556
|
-
) }),
|
5557
|
-
/* @__PURE__ */ jsx(
|
5558
|
-
ComponentPicker,
|
5559
|
-
{
|
5560
|
-
dynamicComponentsByCategory,
|
5561
|
-
isOpen: addComponentIsOpen,
|
5562
|
-
onClickAddComponent: handleAddComponent
|
5563
|
-
}
|
5564
|
-
)
|
5565
|
-
] }) });
|
5566
|
+
!attribute.repeatable && !field.value && /* @__PURE__ */ jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
|
5567
|
+
!attribute.repeatable && field.value ? /* @__PURE__ */ jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
|
5568
|
+
attribute.repeatable && /* @__PURE__ */ jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }),
|
5569
|
+
/* @__PURE__ */ jsx(Field.Error, {})
|
5570
|
+
] });
|
5566
5571
|
};
|
5572
|
+
const MemoizedComponentInput = React.memo(ComponentInput);
|
5567
5573
|
export {
|
5568
5574
|
DynamicZone as D,
|
5569
|
-
|
5575
|
+
FormLayout as F,
|
5576
|
+
MemoizedUIDInput as M,
|
5570
5577
|
NotAllowedInput as N,
|
5571
5578
|
useDynamicZone as a,
|
5572
5579
|
useFieldHint as b,
|
5573
|
-
|
5574
|
-
|
5575
|
-
|
5576
|
-
MemoizedComponentInput as f,
|
5577
|
-
MemoizedBlocksInput as g,
|
5578
|
-
prepareTempKeys as p,
|
5579
|
-
removeFieldsThatDontExistOnSchema as r,
|
5580
|
-
transformDocument as t,
|
5580
|
+
MemoizedWysiwyg as c,
|
5581
|
+
MemoizedComponentInput as d,
|
5582
|
+
MemoizedBlocksInput as e,
|
5581
5583
|
useLazyComponents as u
|
5582
5584
|
};
|
5583
|
-
//# sourceMappingURL=
|
5585
|
+
//# sourceMappingURL=Input-CZ1YvjHR.mjs.map
|