@strapi/content-manager 0.0.0-experimental.f75e3c6d67cc47c64ab37479efdbb7b43be50b78 → 0.0.0-next.ce84fada19d58a7dfbdd553035e6558f8befcba4
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/LICENSE +18 -3
- package/dist/_chunks/{ComponentConfigurationPage-CuWgXugY.mjs → ComponentConfigurationPage-DfFSZQxe.mjs} +3 -3
- package/dist/_chunks/{ComponentConfigurationPage-CuWgXugY.mjs.map → ComponentConfigurationPage-DfFSZQxe.mjs.map} +1 -1
- package/dist/_chunks/{ComponentConfigurationPage-by0e_kNd.js → ComponentConfigurationPage-FqfsxQ1j.js} +3 -3
- package/dist/_chunks/{ComponentConfigurationPage-by0e_kNd.js.map → ComponentConfigurationPage-FqfsxQ1j.js.map} +1 -1
- package/dist/_chunks/{EditConfigurationPage-CqBeCPGH.js → EditConfigurationPage-Cn0e8t3I.js} +3 -3
- package/dist/_chunks/{EditConfigurationPage-CqBeCPGH.js.map → EditConfigurationPage-Cn0e8t3I.js.map} +1 -1
- package/dist/_chunks/{EditConfigurationPage-DbI4KMyz.mjs → EditConfigurationPage-DdPNAbl3.mjs} +3 -3
- package/dist/_chunks/{EditConfigurationPage-DbI4KMyz.mjs.map → EditConfigurationPage-DdPNAbl3.mjs.map} +1 -1
- package/dist/_chunks/{EditViewPage-dFPBya9U.mjs → EditViewPage-B82x_x1b.mjs} +69 -48
- package/dist/_chunks/EditViewPage-B82x_x1b.mjs.map +1 -0
- package/dist/_chunks/{EditViewPage-ChgloMyO.js → EditViewPage-DlxEHhUt.js} +68 -47
- package/dist/_chunks/EditViewPage-DlxEHhUt.js.map +1 -0
- package/dist/_chunks/{Field-dLk-vgLL.js → Field-COL25JiC.js} +581 -229
- package/dist/_chunks/Field-COL25JiC.js.map +1 -0
- package/dist/_chunks/{Field-C1nUKcdS.mjs → Field-DufHXW17.mjs} +579 -227
- package/dist/_chunks/Field-DufHXW17.mjs.map +1 -0
- package/dist/_chunks/{Form-CbXtmHC_.js → Form-BssUwrTO.js} +52 -34
- package/dist/_chunks/Form-BssUwrTO.js.map +1 -0
- package/dist/_chunks/{Form-DOlpi7Js.mjs → Form-u_kAOhwB.mjs} +54 -36
- package/dist/_chunks/Form-u_kAOhwB.mjs.map +1 -0
- package/dist/_chunks/{History-BjDfohBr.js → History-C9t9UqpO.js} +158 -40
- package/dist/_chunks/History-C9t9UqpO.js.map +1 -0
- package/dist/_chunks/{History-BFNUAiGc.mjs → History-DRwA3oMM.mjs} +159 -41
- package/dist/_chunks/History-DRwA3oMM.mjs.map +1 -0
- package/dist/_chunks/{ListConfigurationPage-IQBgWTaa.js → ListConfigurationPage-BXYPohh-.js} +57 -46
- package/dist/_chunks/ListConfigurationPage-BXYPohh-.js.map +1 -0
- package/dist/_chunks/{ListConfigurationPage-DDi0KqFm.mjs → ListConfigurationPage-BxfQJzPk.mjs} +58 -48
- package/dist/_chunks/ListConfigurationPage-BxfQJzPk.mjs.map +1 -0
- package/dist/_chunks/{ListViewPage-BPjljUsH.mjs → ListViewPage-CELx2ysp.mjs} +116 -103
- package/dist/_chunks/ListViewPage-CELx2ysp.mjs.map +1 -0
- package/dist/_chunks/{ListViewPage-CZYGqlvF.js → ListViewPage-D2VD8Szg.js} +117 -104
- package/dist/_chunks/ListViewPage-D2VD8Szg.js.map +1 -0
- package/dist/_chunks/{NoContentTypePage-BOAI6VZ1.js → NoContentTypePage-BV9IjJSM.js} +2 -2
- package/dist/_chunks/{NoContentTypePage-BOAI6VZ1.js.map → NoContentTypePage-BV9IjJSM.js.map} +1 -1
- package/dist/_chunks/{NoContentTypePage-DaWw67K-.mjs → NoContentTypePage-DtJ9jcfk.mjs} +2 -2
- package/dist/_chunks/{NoContentTypePage-DaWw67K-.mjs.map → NoContentTypePage-DtJ9jcfk.mjs.map} +1 -1
- package/dist/_chunks/{NoPermissionsPage-CZrJH00p.mjs → NoPermissionsPage-DWleVYK7.mjs} +2 -2
- package/dist/_chunks/{NoPermissionsPage-CZrJH00p.mjs.map → NoPermissionsPage-DWleVYK7.mjs.map} +1 -1
- package/dist/_chunks/{NoPermissionsPage-cYEtLc_e.js → NoPermissionsPage-Dp8NpF9I.js} +2 -2
- package/dist/_chunks/{NoPermissionsPage-cYEtLc_e.js.map → NoPermissionsPage-Dp8NpF9I.js.map} +1 -1
- package/dist/_chunks/{Relations-DTowyge2.mjs → Relations-BTcf5xaw.mjs} +34 -25
- package/dist/_chunks/Relations-BTcf5xaw.mjs.map +1 -0
- package/dist/_chunks/{Relations-DU6B7irU.js → Relations-DR7EUgyC.js} +34 -25
- package/dist/_chunks/Relations-DR7EUgyC.js.map +1 -0
- package/dist/_chunks/{en-DTULi5-d.js → en-Bm0D0IWz.js} +21 -15
- package/dist/_chunks/{en-DTULi5-d.js.map → en-Bm0D0IWz.js.map} +1 -1
- package/dist/_chunks/{en-GCOTL6jR.mjs → en-DKV44jRb.mjs} +21 -15
- package/dist/_chunks/{en-GCOTL6jR.mjs.map → en-DKV44jRb.mjs.map} +1 -1
- package/dist/_chunks/{index-CCJeB7Rw.js → index-BdMf2lfT.js} +1357 -747
- package/dist/_chunks/index-BdMf2lfT.js.map +1 -0
- package/dist/_chunks/{index-BaGHmIir.mjs → index-wnqzm4Q8.mjs} +1390 -780
- package/dist/_chunks/index-wnqzm4Q8.mjs.map +1 -0
- package/dist/_chunks/{layout-BinjszSQ.mjs → layout-2CfjL0T9.mjs} +41 -23
- package/dist/_chunks/layout-2CfjL0T9.mjs.map +1 -0
- package/dist/_chunks/{layout-ni_L9kT1.js → layout-B2MyZU-_.js} +39 -21
- package/dist/_chunks/layout-B2MyZU-_.js.map +1 -0
- package/dist/_chunks/{relations-CeJAJc5I.js → relations-BH7JJGGe.js} +2 -2
- package/dist/_chunks/{relations-CeJAJc5I.js.map → relations-BH7JJGGe.js.map} +1 -1
- package/dist/_chunks/{relations-c91ji5eR.mjs → relations-C0w0GcXi.mjs} +2 -2
- package/dist/_chunks/{relations-c91ji5eR.mjs.map → relations-C0w0GcXi.mjs.map} +1 -1
- package/dist/_chunks/{usePrev-B9w_-eYc.js → useDebounce-CtcjDB3L.js} +14 -1
- package/dist/_chunks/useDebounce-CtcjDB3L.js.map +1 -0
- package/dist/_chunks/useDebounce-DmuSJIF3.mjs +29 -0
- package/dist/_chunks/useDebounce-DmuSJIF3.mjs.map +1 -0
- package/dist/admin/index.js +2 -1
- package/dist/admin/index.js.map +1 -1
- package/dist/admin/index.mjs +7 -6
- package/dist/admin/src/exports.d.ts +1 -1
- package/dist/admin/src/history/components/VersionInputRenderer.d.ts +1 -1
- package/dist/admin/src/history/index.d.ts +3 -0
- package/dist/admin/src/history/services/historyVersion.d.ts +1 -1
- package/dist/admin/src/hooks/useDocument.d.ts +32 -1
- package/dist/admin/src/hooks/useDocumentActions.d.ts +1 -1
- package/dist/admin/src/index.d.ts +1 -0
- package/dist/admin/src/pages/EditView/components/DocumentActions.d.ts +8 -3
- package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/utils/constants.d.ts +4 -0
- package/dist/admin/src/pages/EditView/components/FormInputs/Relations.d.ts +20 -0
- package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.d.ts +2 -2
- package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/WysiwygFooter.d.ts +2 -2
- package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/WysiwygStyles.d.ts +6 -58
- package/dist/admin/src/pages/EditView/components/Header.d.ts +11 -11
- package/dist/admin/src/pages/ListView/components/BulkActions/Actions.d.ts +3 -30
- package/dist/admin/src/pages/ListView/components/BulkActions/ConfirmBulkActionDialog.d.ts +2 -2
- package/dist/admin/src/pages/ListView/components/BulkActions/PublishAction.d.ts +14 -0
- 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 +19 -17
- 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/admin/src/utils/validation.d.ts +4 -1
- package/dist/server/index.js +218 -126
- package/dist/server/index.js.map +1 -1
- package/dist/server/index.mjs +219 -127
- package/dist/server/index.mjs.map +1 -1
- package/dist/server/src/controllers/collection-types.d.ts.map +1 -1
- package/dist/server/src/controllers/relations.d.ts.map +1 -1
- package/dist/server/src/controllers/single-types.d.ts.map +1 -1
- package/dist/server/src/controllers/uid.d.ts.map +1 -1
- package/dist/server/src/controllers/validation/dimensions.d.ts +4 -2
- package/dist/server/src/controllers/validation/dimensions.d.ts.map +1 -1
- package/dist/server/src/history/services/history.d.ts.map +1 -1
- package/dist/server/src/history/services/lifecycles.d.ts.map +1 -1
- package/dist/server/src/history/services/utils.d.ts +2 -1
- package/dist/server/src/history/services/utils.d.ts.map +1 -1
- package/dist/server/src/policies/hasPermissions.d.ts.map +1 -1
- package/dist/server/src/services/document-manager.d.ts.map +1 -1
- package/dist/server/src/services/document-metadata.d.ts.map +1 -1
- package/dist/server/src/services/permission-checker.d.ts.map +1 -1
- package/dist/server/src/services/utils/populate.d.ts.map +1 -1
- package/dist/shared/contracts/collection-types.d.ts +3 -1
- package/dist/shared/contracts/collection-types.d.ts.map +1 -1
- package/package.json +12 -12
- package/dist/_chunks/EditViewPage-ChgloMyO.js.map +0 -1
- package/dist/_chunks/EditViewPage-dFPBya9U.mjs.map +0 -1
- package/dist/_chunks/Field-C1nUKcdS.mjs.map +0 -1
- package/dist/_chunks/Field-dLk-vgLL.js.map +0 -1
- package/dist/_chunks/Form-CbXtmHC_.js.map +0 -1
- package/dist/_chunks/Form-DOlpi7Js.mjs.map +0 -1
- package/dist/_chunks/History-BFNUAiGc.mjs.map +0 -1
- package/dist/_chunks/History-BjDfohBr.js.map +0 -1
- package/dist/_chunks/ListConfigurationPage-DDi0KqFm.mjs.map +0 -1
- package/dist/_chunks/ListConfigurationPage-IQBgWTaa.js.map +0 -1
- package/dist/_chunks/ListViewPage-BPjljUsH.mjs.map +0 -1
- package/dist/_chunks/ListViewPage-CZYGqlvF.js.map +0 -1
- package/dist/_chunks/Relations-DTowyge2.mjs.map +0 -1
- package/dist/_chunks/Relations-DU6B7irU.js.map +0 -1
- package/dist/_chunks/index-BaGHmIir.mjs.map +0 -1
- package/dist/_chunks/index-CCJeB7Rw.js.map +0 -1
- package/dist/_chunks/layout-BinjszSQ.mjs.map +0 -1
- package/dist/_chunks/layout-ni_L9kT1.js.map +0 -1
- package/dist/_chunks/usePrev-B9w_-eYc.js.map +0 -1
- package/dist/_chunks/usePrev-DH6iah0A.mjs +0 -16
- package/dist/_chunks/usePrev-DH6iah0A.mjs.map +0 -1
- package/strapi-server.js +0 -3
@@ -2,12 +2,12 @@ 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
4
|
import { useStrapiApp, createContext, useField, useNotification, useForm, useAPIErrorHandler, useQueryParams, useFocusInputField, InputRenderer as InputRenderer$1 } from "@strapi/admin/strapi-admin";
|
5
|
-
import { Typography, Flex,
|
5
|
+
import { Box, SingleSelect, SingleSelectOption, Typography, Flex, BaseLink, Button, Popover, Field, Tooltip, IconButton, useComposedRefs, Portal, FocusTrap, Divider, VisuallyHidden, Grid as Grid$1, Accordion, TextButton, TextInput, IconButtonGroup, Menu, MenuItem } from "@strapi/design-system";
|
6
6
|
import pipe$1 from "lodash/fp/pipe";
|
7
7
|
import { useIntl } from "react-intl";
|
8
|
-
import {
|
8
|
+
import { m as DOCUMENT_META_FIELDS, g as getTranslation, c as useDoc, e as contentManagerApi, n as CLONE_PATH, d as buildValidParams, f as useDocumentRBAC, S as SINGLE_TYPES, o as useDocLayout } from "./index-wnqzm4Q8.mjs";
|
9
9
|
import { generateNKeysBetween } from "fractional-indexing";
|
10
|
-
import { u as useComponent, C as ComponentProvider, M as MemoizedRelationsField } from "./Relations-
|
10
|
+
import { u as useComponent, C as ComponentProvider, M as MemoizedRelationsField } from "./Relations-BTcf5xaw.mjs";
|
11
11
|
import { Code, HeadingOne, HeadingTwo, HeadingThree, HeadingFour, HeadingFive, HeadingSix, Image as Image$1, NumberList, BulletList, Paragraph, Quotes, Link as Link$1, Drag, Collapse, Bold, Italic, Underline, StrikeThrough, Expand, PlusCircle, Plus, Trash, EyeStriked, CheckCircle, WarningCircle, Loader, ArrowClockwise, More } from "@strapi/icons";
|
12
12
|
import { styled, css, keyframes } from "styled-components";
|
13
13
|
import { C as ComponentIcon, a as COMPONENT_ICONS } from "./ComponentIcon-u4bIXTFY.mjs";
|
@@ -17,9 +17,9 @@ import { g as getIn } from "./objects-mKMAmfec.mjs";
|
|
17
17
|
import { Editor as Editor$1, Transforms, Node, Element, Range, Path, Point, createEditor } from "slate";
|
18
18
|
import { withHistory } from "slate-history";
|
19
19
|
import { useFocused, useSelected, ReactEditor, Editable, useSlate, Slate, withReact } from "slate-react";
|
20
|
-
import { p as prefixFileUrlWithBackendUrl, u as usePrev } from "./
|
20
|
+
import { p as prefixFileUrlWithBackendUrl, u as usePrev, a as useDebounce } from "./useDebounce-DmuSJIF3.mjs";
|
21
21
|
import * as Toolbar from "@radix-ui/react-toolbar";
|
22
|
-
import { useLocation } from "react-router-dom";
|
22
|
+
import { useLocation, useMatch } from "react-router-dom";
|
23
23
|
import CodeMirror from "codemirror5";
|
24
24
|
import sanitizeHtml from "sanitize-html";
|
25
25
|
import { getLanguage, highlight, highlightAuto } from "highlight.js";
|
@@ -160,6 +160,220 @@ const useLazyComponents = (componentUids = []) => {
|
|
160
160
|
}, []);
|
161
161
|
return { isLazyLoading: loading, lazyComponentStore, cleanup };
|
162
162
|
};
|
163
|
+
const codeLanguages = [
|
164
|
+
{
|
165
|
+
value: "asm",
|
166
|
+
label: "Assembly"
|
167
|
+
},
|
168
|
+
{
|
169
|
+
value: "bash",
|
170
|
+
label: "Bash"
|
171
|
+
},
|
172
|
+
{
|
173
|
+
value: "c",
|
174
|
+
label: "C"
|
175
|
+
},
|
176
|
+
{
|
177
|
+
value: "clojure",
|
178
|
+
label: "Clojure"
|
179
|
+
},
|
180
|
+
{
|
181
|
+
value: "cobol",
|
182
|
+
label: "COBOL"
|
183
|
+
},
|
184
|
+
{
|
185
|
+
value: "cpp",
|
186
|
+
label: "C++"
|
187
|
+
},
|
188
|
+
{
|
189
|
+
value: "csharp",
|
190
|
+
label: "C#"
|
191
|
+
},
|
192
|
+
{
|
193
|
+
value: "css",
|
194
|
+
label: "CSS"
|
195
|
+
},
|
196
|
+
{
|
197
|
+
value: "dart",
|
198
|
+
label: "Dart"
|
199
|
+
},
|
200
|
+
{
|
201
|
+
value: "dockerfile",
|
202
|
+
label: "Dockerfile"
|
203
|
+
},
|
204
|
+
{
|
205
|
+
value: "elixir",
|
206
|
+
label: "Elixir"
|
207
|
+
},
|
208
|
+
{
|
209
|
+
value: "erlang",
|
210
|
+
label: "Erlang"
|
211
|
+
},
|
212
|
+
{
|
213
|
+
value: "fortran",
|
214
|
+
label: "Fortran"
|
215
|
+
},
|
216
|
+
{
|
217
|
+
value: "fsharp",
|
218
|
+
label: "F#"
|
219
|
+
},
|
220
|
+
{
|
221
|
+
value: "go",
|
222
|
+
label: "Go"
|
223
|
+
},
|
224
|
+
{
|
225
|
+
value: "graphql",
|
226
|
+
label: "GraphQL"
|
227
|
+
},
|
228
|
+
{
|
229
|
+
value: "groovy",
|
230
|
+
label: "Groovy"
|
231
|
+
},
|
232
|
+
{
|
233
|
+
value: "haskell",
|
234
|
+
label: "Haskell"
|
235
|
+
},
|
236
|
+
{
|
237
|
+
value: "haxe",
|
238
|
+
label: "Haxe"
|
239
|
+
},
|
240
|
+
{
|
241
|
+
value: "html",
|
242
|
+
label: "HTML"
|
243
|
+
},
|
244
|
+
{
|
245
|
+
value: "ini",
|
246
|
+
label: "INI"
|
247
|
+
},
|
248
|
+
{
|
249
|
+
value: "java",
|
250
|
+
label: "Java"
|
251
|
+
},
|
252
|
+
{
|
253
|
+
value: "javascript",
|
254
|
+
label: "JavaScript"
|
255
|
+
},
|
256
|
+
{
|
257
|
+
value: "jsx",
|
258
|
+
label: "JavaScript (React)"
|
259
|
+
},
|
260
|
+
{
|
261
|
+
value: "json",
|
262
|
+
label: "JSON"
|
263
|
+
},
|
264
|
+
{
|
265
|
+
value: "julia",
|
266
|
+
label: "Julia"
|
267
|
+
},
|
268
|
+
{
|
269
|
+
value: "kotlin",
|
270
|
+
label: "Kotlin"
|
271
|
+
},
|
272
|
+
{
|
273
|
+
value: "latex",
|
274
|
+
label: "LaTeX"
|
275
|
+
},
|
276
|
+
{
|
277
|
+
value: "lua",
|
278
|
+
label: "Lua"
|
279
|
+
},
|
280
|
+
{
|
281
|
+
value: "markdown",
|
282
|
+
label: "Markdown"
|
283
|
+
},
|
284
|
+
{
|
285
|
+
value: "matlab",
|
286
|
+
label: "MATLAB"
|
287
|
+
},
|
288
|
+
{
|
289
|
+
value: "makefile",
|
290
|
+
label: "Makefile"
|
291
|
+
},
|
292
|
+
{
|
293
|
+
value: "objectivec",
|
294
|
+
label: "Objective-C"
|
295
|
+
},
|
296
|
+
{
|
297
|
+
value: "perl",
|
298
|
+
label: "Perl"
|
299
|
+
},
|
300
|
+
{
|
301
|
+
value: "php",
|
302
|
+
label: "PHP"
|
303
|
+
},
|
304
|
+
{
|
305
|
+
value: "plaintext",
|
306
|
+
label: "Plain text"
|
307
|
+
},
|
308
|
+
{
|
309
|
+
value: "powershell",
|
310
|
+
label: "PowerShell"
|
311
|
+
},
|
312
|
+
{
|
313
|
+
value: "python",
|
314
|
+
label: "Python"
|
315
|
+
},
|
316
|
+
{
|
317
|
+
value: "r",
|
318
|
+
label: "R"
|
319
|
+
},
|
320
|
+
{
|
321
|
+
value: "ruby",
|
322
|
+
label: "Ruby"
|
323
|
+
},
|
324
|
+
{
|
325
|
+
value: "rust",
|
326
|
+
label: "Rust"
|
327
|
+
},
|
328
|
+
{
|
329
|
+
value: "sas",
|
330
|
+
label: "SAS"
|
331
|
+
},
|
332
|
+
{
|
333
|
+
value: "scala",
|
334
|
+
label: "Scala"
|
335
|
+
},
|
336
|
+
{
|
337
|
+
value: "scheme",
|
338
|
+
label: "Scheme"
|
339
|
+
},
|
340
|
+
{
|
341
|
+
value: "shell",
|
342
|
+
label: "Shell"
|
343
|
+
},
|
344
|
+
{
|
345
|
+
value: "sql",
|
346
|
+
label: "SQL"
|
347
|
+
},
|
348
|
+
{
|
349
|
+
value: "stata",
|
350
|
+
label: "Stata"
|
351
|
+
},
|
352
|
+
{
|
353
|
+
value: "swift",
|
354
|
+
label: "Swift"
|
355
|
+
},
|
356
|
+
{
|
357
|
+
value: "typescript",
|
358
|
+
label: "TypeScript"
|
359
|
+
},
|
360
|
+
{
|
361
|
+
value: "tsx",
|
362
|
+
label: "TypeScript (React)"
|
363
|
+
},
|
364
|
+
{
|
365
|
+
value: "vbnet",
|
366
|
+
label: "VB.NET"
|
367
|
+
},
|
368
|
+
{
|
369
|
+
value: "xml",
|
370
|
+
label: "XML"
|
371
|
+
},
|
372
|
+
{
|
373
|
+
value: "yaml",
|
374
|
+
label: "YAML"
|
375
|
+
}
|
376
|
+
];
|
163
377
|
const baseHandleConvert = (editor, attributesToSet) => {
|
164
378
|
const [_, lastNodePath] = Editor$1.last(editor, []);
|
165
379
|
Transforms.unwrapNodes(editor, {
|
@@ -230,6 +444,7 @@ const CodeBlock = styled.pre`
|
|
230
444
|
overflow: auto;
|
231
445
|
padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};
|
232
446
|
flex-shrink: 1;
|
447
|
+
|
233
448
|
& > code {
|
234
449
|
font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas,
|
235
450
|
monospace;
|
@@ -238,9 +453,61 @@ const CodeBlock = styled.pre`
|
|
238
453
|
max-width: 100%;
|
239
454
|
}
|
240
455
|
`;
|
456
|
+
const CodeEditor = (props) => {
|
457
|
+
const { editor } = useBlocksEditorContext("ImageDialog");
|
458
|
+
const editorIsFocused = useFocused();
|
459
|
+
const imageIsSelected = useSelected();
|
460
|
+
const { formatMessage } = useIntl();
|
461
|
+
const [isSelectOpen, setIsSelectOpen] = React.useState(false);
|
462
|
+
const shouldDisplayLanguageSelect = editorIsFocused && imageIsSelected || isSelectOpen;
|
463
|
+
return /* @__PURE__ */ jsxs(Box, { position: "relative", width: "100%", children: [
|
464
|
+
/* @__PURE__ */ jsx(CodeBlock, { ...props.attributes, children: /* @__PURE__ */ jsx("code", { children: props.children }) }),
|
465
|
+
shouldDisplayLanguageSelect && /* @__PURE__ */ jsx(
|
466
|
+
Box,
|
467
|
+
{
|
468
|
+
position: "absolute",
|
469
|
+
background: "neutral0",
|
470
|
+
borderColor: "neutral150",
|
471
|
+
borderStyle: "solid",
|
472
|
+
borderWidth: "0.5px",
|
473
|
+
shadow: "tableShadow",
|
474
|
+
top: "100%",
|
475
|
+
marginTop: 1,
|
476
|
+
right: 0,
|
477
|
+
padding: 1,
|
478
|
+
hasRadius: true,
|
479
|
+
children: /* @__PURE__ */ jsx(
|
480
|
+
SingleSelect,
|
481
|
+
{
|
482
|
+
onChange: (open) => {
|
483
|
+
Transforms.setNodes(
|
484
|
+
editor,
|
485
|
+
{ language: open.toString() },
|
486
|
+
{ match: (node) => !Editor$1.isEditor(node) && node.type === "code" }
|
487
|
+
);
|
488
|
+
},
|
489
|
+
value: props.element.type === "code" && props.element.language || "plaintext",
|
490
|
+
onOpenChange: (open) => {
|
491
|
+
setIsSelectOpen(open);
|
492
|
+
if (!open) {
|
493
|
+
ReactEditor.focus(editor);
|
494
|
+
}
|
495
|
+
},
|
496
|
+
onCloseAutoFocus: (e) => e.preventDefault(),
|
497
|
+
"aria-label": formatMessage({
|
498
|
+
id: "components.Blocks.blocks.code.languageLabel",
|
499
|
+
defaultMessage: "Select a language"
|
500
|
+
}),
|
501
|
+
children: codeLanguages.map(({ value, label }) => /* @__PURE__ */ jsx(SingleSelectOption, { value, children: label }, value))
|
502
|
+
}
|
503
|
+
)
|
504
|
+
}
|
505
|
+
)
|
506
|
+
] });
|
507
|
+
};
|
241
508
|
const codeBlocks = {
|
242
509
|
code: {
|
243
|
-
renderElement: (props) => /* @__PURE__ */ jsx(
|
510
|
+
renderElement: (props) => /* @__PURE__ */ jsx(CodeEditor, { ...props }),
|
244
511
|
icon: Code,
|
245
512
|
label: {
|
246
513
|
id: "components.Blocks.blocks.code",
|
@@ -249,7 +516,7 @@ const codeBlocks = {
|
|
249
516
|
matchNode: (node) => node.type === "code",
|
250
517
|
isInBlocksSelector: true,
|
251
518
|
handleConvert(editor) {
|
252
|
-
baseHandleConvert(editor, { type: "code" });
|
519
|
+
baseHandleConvert(editor, { type: "code", language: "plaintext" });
|
253
520
|
},
|
254
521
|
handleEnterKey(editor) {
|
255
522
|
pressEnterTwiceToExit(editor);
|
@@ -589,18 +856,12 @@ const LinkContent = React.forwardRef(
|
|
589
856
|
const [popoverOpen, setPopoverOpen] = React.useState(
|
590
857
|
editor.lastInsertedLinkPath ? Path.equals(path, editor.lastInsertedLinkPath) : false
|
591
858
|
);
|
592
|
-
const linkRef = React.useRef(null);
|
593
859
|
const elementText = link.children.map((child) => child.text).join("");
|
594
860
|
const [linkText, setLinkText] = React.useState(elementText);
|
595
861
|
const [linkUrl, setLinkUrl] = React.useState(link.url);
|
596
862
|
const linkInputRef = React.useRef(null);
|
597
|
-
const
|
863
|
+
const isLastInsertedLink = editor.lastInsertedLinkPath ? !Path.equals(path, editor.lastInsertedLinkPath) : true;
|
598
864
|
const [isSaveDisabled, setIsSaveDisabled] = React.useState(false);
|
599
|
-
const handleOpenEditPopover = (e) => {
|
600
|
-
e.preventDefault();
|
601
|
-
setPopoverOpen(true);
|
602
|
-
setShowRemoveButton(true);
|
603
|
-
};
|
604
865
|
const onLinkChange = (e) => {
|
605
866
|
setIsSaveDisabled(false);
|
606
867
|
setLinkUrl(e.target.value);
|
@@ -621,33 +882,33 @@ const LinkContent = React.forwardRef(
|
|
621
882
|
editLink(editor, { url: linkUrl, text: linkText });
|
622
883
|
setPopoverOpen(false);
|
623
884
|
editor.lastInsertedLinkPath = null;
|
885
|
+
ReactEditor.focus(editor);
|
624
886
|
};
|
625
|
-
const
|
626
|
-
setPopoverOpen(false);
|
887
|
+
const handleClose = () => {
|
627
888
|
if (link.url === "") {
|
628
889
|
removeLink(editor);
|
629
890
|
}
|
891
|
+
setPopoverOpen(false);
|
630
892
|
ReactEditor.focus(editor);
|
631
893
|
};
|
632
|
-
const inputNotDirty = !linkText || !linkUrl || link.url && link.url === linkUrl && elementText && elementText === linkText;
|
633
|
-
const composedRefs = useComposedRefs(linkRef, forwardedRef);
|
634
894
|
React.useEffect(() => {
|
635
895
|
if (popoverOpen)
|
636
896
|
linkInputRef.current?.focus();
|
637
897
|
}, [popoverOpen]);
|
638
|
-
|
639
|
-
|
898
|
+
const inputNotDirty = !linkText || !linkUrl || link.url && link.url === linkUrl && elementText && elementText === linkText;
|
899
|
+
return /* @__PURE__ */ jsxs(Popover.Root, { open: popoverOpen, children: [
|
900
|
+
/* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(
|
640
901
|
StyledBaseLink,
|
641
902
|
{
|
642
903
|
...attributes,
|
643
|
-
ref:
|
904
|
+
ref: forwardedRef,
|
644
905
|
href: link.url,
|
645
|
-
onClick:
|
906
|
+
onClick: () => setPopoverOpen(true),
|
646
907
|
color: "primary600",
|
647
908
|
children
|
648
909
|
}
|
649
|
-
),
|
650
|
-
|
910
|
+
) }),
|
911
|
+
/* @__PURE__ */ jsx(Popover.Content, { onPointerDownOutside: handleClose, children: /* @__PURE__ */ jsxs(Flex, { padding: 4, direction: "column", gap: 4, children: [
|
651
912
|
/* @__PURE__ */ jsx(Field.Root, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
|
652
913
|
/* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
|
653
914
|
id: "components.Blocks.popover.text",
|
@@ -693,7 +954,7 @@ const LinkContent = React.forwardRef(
|
|
693
954
|
{
|
694
955
|
variant: "danger-light",
|
695
956
|
onClick: () => removeLink(editor),
|
696
|
-
$visible:
|
957
|
+
$visible: isLastInsertedLink,
|
697
958
|
children: formatMessage({
|
698
959
|
id: "components.Blocks.popover.remove",
|
699
960
|
defaultMessage: "Remove"
|
@@ -701,11 +962,11 @@ const LinkContent = React.forwardRef(
|
|
701
962
|
}
|
702
963
|
),
|
703
964
|
/* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
|
704
|
-
/* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick:
|
965
|
+
/* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: handleClose, children: formatMessage({
|
705
966
|
id: "components.Blocks.popover.cancel",
|
706
967
|
defaultMessage: "Cancel"
|
707
968
|
}) }),
|
708
|
-
/* @__PURE__ */ jsx(Button, {
|
969
|
+
/* @__PURE__ */ jsx(Button, { disabled: Boolean(inputNotDirty) || isSaveDisabled, onClick: handleSave, children: formatMessage({
|
709
970
|
id: "components.Blocks.popover.save",
|
710
971
|
defaultMessage: "Save"
|
711
972
|
}) })
|
@@ -1146,7 +1407,7 @@ const ToolbarButton = ({
|
|
1146
1407
|
width: 7,
|
1147
1408
|
height: 7,
|
1148
1409
|
hasRadius: true,
|
1149
|
-
children: /* @__PURE__ */ jsx(Icon, {
|
1410
|
+
children: /* @__PURE__ */ jsx(Icon, { fill: disabled ? "neutral300" : enabledColor })
|
1150
1411
|
}
|
1151
1412
|
)
|
1152
1413
|
}
|
@@ -1291,6 +1552,26 @@ const ListButton = ({ block, format }) => {
|
|
1291
1552
|
}
|
1292
1553
|
return false;
|
1293
1554
|
};
|
1555
|
+
const isListDisabled = () => {
|
1556
|
+
if (disabled) {
|
1557
|
+
return true;
|
1558
|
+
}
|
1559
|
+
if (!editor.selection) {
|
1560
|
+
return false;
|
1561
|
+
}
|
1562
|
+
const anchorNodeEntry = Editor$1.above(editor, {
|
1563
|
+
at: editor.selection.anchor,
|
1564
|
+
match: (node) => !Editor$1.isEditor(node) && node.type !== "text"
|
1565
|
+
});
|
1566
|
+
const focusNodeEntry = Editor$1.above(editor, {
|
1567
|
+
at: editor.selection.focus,
|
1568
|
+
match: (node) => !Editor$1.isEditor(node) && node.type !== "text"
|
1569
|
+
});
|
1570
|
+
if (!anchorNodeEntry || !focusNodeEntry) {
|
1571
|
+
return false;
|
1572
|
+
}
|
1573
|
+
return anchorNodeEntry[0] !== focusNodeEntry[0];
|
1574
|
+
};
|
1294
1575
|
const toggleList = (format2) => {
|
1295
1576
|
let currentListEntry;
|
1296
1577
|
if (editor.selection) {
|
@@ -1324,7 +1605,7 @@ const ListButton = ({ block, format }) => {
|
|
1324
1605
|
name: format,
|
1325
1606
|
label: block.label,
|
1326
1607
|
isActive: isListActive(),
|
1327
|
-
disabled,
|
1608
|
+
disabled: isListDisabled(),
|
1328
1609
|
handleClick: () => toggleList(format)
|
1329
1610
|
}
|
1330
1611
|
);
|
@@ -1468,6 +1749,7 @@ const DragItem = styled(Flex)`
|
|
1468
1749
|
}
|
1469
1750
|
`;
|
1470
1751
|
const DragIconButton = styled(IconButton)`
|
1752
|
+
user-select: none;
|
1471
1753
|
display: flex;
|
1472
1754
|
align-items: center;
|
1473
1755
|
justify-content: center;
|
@@ -1491,7 +1773,7 @@ const DragIconButton = styled(IconButton)`
|
|
1491
1773
|
}
|
1492
1774
|
svg {
|
1493
1775
|
height: auto;
|
1494
|
-
width: ${({ theme }) => theme.spaces[3]};
|
1776
|
+
min-width: ${({ theme }) => theme.spaces[3]};
|
1495
1777
|
|
1496
1778
|
path {
|
1497
1779
|
fill: ${({ theme }) => theme.colors.neutral700};
|
@@ -1596,6 +1878,7 @@ const DragAndDropElement = ({
|
|
1596
1878
|
DragIconButton,
|
1597
1879
|
{
|
1598
1880
|
tag: "div",
|
1881
|
+
contentEditable: false,
|
1599
1882
|
role: "button",
|
1600
1883
|
tabIndex: 0,
|
1601
1884
|
withTooltip: false,
|
@@ -1608,7 +1891,7 @@ const DragAndDropElement = ({
|
|
1608
1891
|
disabled,
|
1609
1892
|
draggable: true,
|
1610
1893
|
$dragHandleTopMargin: dragHandleTopMargin,
|
1611
|
-
children: /* @__PURE__ */ jsx(Drag, { color: "
|
1894
|
+
children: /* @__PURE__ */ jsx(Drag, { color: "primary500" })
|
1612
1895
|
}
|
1613
1896
|
),
|
1614
1897
|
children
|
@@ -1932,7 +2215,7 @@ const EditorLayout$1 = ({
|
|
1932
2215
|
/* @__PURE__ */ jsx(
|
1933
2216
|
CollapseIconButton,
|
1934
2217
|
{
|
1935
|
-
|
2218
|
+
label: formatMessage({
|
1936
2219
|
id: getTranslation("components.Blocks.collapse"),
|
1937
2220
|
defaultMessage: "Collapse"
|
1938
2221
|
}),
|
@@ -2271,7 +2554,7 @@ const BlocksEditor = React.forwardRef(
|
|
2271
2554
|
!isExpandedMode && /* @__PURE__ */ jsx(
|
2272
2555
|
ExpandIconButton,
|
2273
2556
|
{
|
2274
|
-
|
2557
|
+
label: formatMessage({
|
2275
2558
|
id: getTranslation("components.Blocks.expand"),
|
2276
2559
|
defaultMessage: "Expand"
|
2277
2560
|
}),
|
@@ -2337,30 +2620,27 @@ const createDefaultForm = (contentType, components = {}) => {
|
|
2337
2620
|
const Initializer = ({ disabled, name: name2, onClick }) => {
|
2338
2621
|
const { formatMessage } = useIntl();
|
2339
2622
|
const field = useField(name2);
|
2340
|
-
return /* @__PURE__ */
|
2341
|
-
|
2342
|
-
|
2343
|
-
|
2344
|
-
|
2345
|
-
|
2346
|
-
|
2347
|
-
|
2348
|
-
|
2349
|
-
|
2350
|
-
|
2351
|
-
|
2352
|
-
|
2353
|
-
|
2354
|
-
|
2355
|
-
|
2356
|
-
|
2357
|
-
|
2358
|
-
|
2359
|
-
|
2360
|
-
|
2361
|
-
),
|
2362
|
-
field.error && /* @__PURE__ */ jsx(Typography, { textColor: "danger600", variant: "pi", children: field.error })
|
2363
|
-
] });
|
2623
|
+
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
|
2624
|
+
Box,
|
2625
|
+
{
|
2626
|
+
tag: "button",
|
2627
|
+
background: "neutral100",
|
2628
|
+
borderColor: field.error ? "danger600" : "neutral200",
|
2629
|
+
hasRadius: true,
|
2630
|
+
disabled,
|
2631
|
+
onClick,
|
2632
|
+
paddingTop: 9,
|
2633
|
+
paddingBottom: 9,
|
2634
|
+
type: "button",
|
2635
|
+
children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
|
2636
|
+
/* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(CircleIcon, {}) }),
|
2637
|
+
/* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Typography, { textColor: "primary600", variant: "pi", fontWeight: "bold", children: formatMessage({
|
2638
|
+
id: getTranslation("components.empty-repeatable"),
|
2639
|
+
defaultMessage: "No entry yet. Click on the button below to add one."
|
2640
|
+
}) }) })
|
2641
|
+
] })
|
2642
|
+
}
|
2643
|
+
) });
|
2364
2644
|
};
|
2365
2645
|
const CircleIcon = styled(PlusCircle)`
|
2366
2646
|
width: 2.4rem;
|
@@ -2392,9 +2672,20 @@ const NonRepeatableComponent = ({
|
|
2392
2672
|
hasRadius: isNested,
|
2393
2673
|
borderColor: isNested ? "neutral200" : void 0,
|
2394
2674
|
children: /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((row, index) => {
|
2395
|
-
return /* @__PURE__ */ jsx(Grid$1, { gap: 4, children: row.map(({ size, ...field }) => {
|
2675
|
+
return /* @__PURE__ */ jsx(Grid$1.Root, { gap: 4, children: row.map(({ size, ...field }) => {
|
2396
2676
|
const completeFieldName = `${name2}.${field.name}`;
|
2397
|
-
return /* @__PURE__ */ jsx(
|
2677
|
+
return /* @__PURE__ */ jsx(
|
2678
|
+
Grid$1.Item,
|
2679
|
+
{
|
2680
|
+
col: size,
|
2681
|
+
s: 12,
|
2682
|
+
xs: 12,
|
2683
|
+
direction: "column",
|
2684
|
+
alignItems: "stretch",
|
2685
|
+
children: children({ ...field, name: completeFieldName })
|
2686
|
+
},
|
2687
|
+
completeFieldName
|
2688
|
+
);
|
2398
2689
|
}) }, index);
|
2399
2690
|
}) })
|
2400
2691
|
}
|
@@ -2413,13 +2704,34 @@ const RepeatableComponent = ({
|
|
2413
2704
|
const { search: searchString } = useLocation();
|
2414
2705
|
const search = React.useMemo(() => new URLSearchParams(searchString), [searchString]);
|
2415
2706
|
const { components } = useDoc();
|
2416
|
-
const {
|
2707
|
+
const {
|
2708
|
+
value = [],
|
2709
|
+
error,
|
2710
|
+
rawError
|
2711
|
+
} = useField(name2);
|
2417
2712
|
const addFieldRow = useForm("RepeatableComponent", (state) => state.addFieldRow);
|
2418
2713
|
const moveFieldRow = useForm("RepeatableComponent", (state) => state.moveFieldRow);
|
2419
2714
|
const removeFieldRow = useForm("RepeatableComponent", (state) => state.removeFieldRow);
|
2420
2715
|
const { max = Infinity } = attribute;
|
2421
2716
|
const [collapseToOpen, setCollapseToOpen] = React.useState("");
|
2422
2717
|
const [liveText, setLiveText] = React.useState("");
|
2718
|
+
React.useEffect(() => {
|
2719
|
+
const hasNestedErrors = rawError && Array.isArray(rawError) && rawError.length > 0;
|
2720
|
+
const hasNestedValue = value && Array.isArray(value) && value.length > 0;
|
2721
|
+
if (hasNestedErrors && hasNestedValue) {
|
2722
|
+
const errorOpenItems = rawError.map((_, idx) => {
|
2723
|
+
return value[idx] ? value[idx].__temp_key__ : null;
|
2724
|
+
}).filter((value2) => !!value2);
|
2725
|
+
if (errorOpenItems && errorOpenItems.length > 0) {
|
2726
|
+
setCollapseToOpen((collapseToOpen2) => {
|
2727
|
+
if (!errorOpenItems.includes(collapseToOpen2)) {
|
2728
|
+
return errorOpenItems[0];
|
2729
|
+
}
|
2730
|
+
return collapseToOpen2;
|
2731
|
+
});
|
2732
|
+
}
|
2733
|
+
}
|
2734
|
+
}, [rawError, value]);
|
2423
2735
|
const componentTmpKeyWithFocussedField = React.useMemo(() => {
|
2424
2736
|
if (search.has("field")) {
|
2425
2737
|
const fieldParam = search.get("field");
|
@@ -2570,9 +2882,20 @@ const RepeatableComponent = ({
|
|
2570
2882
|
onGrabItem: handleGrabItem,
|
2571
2883
|
__temp_key__: key,
|
2572
2884
|
children: layout.map((row, index2) => {
|
2573
|
-
return /* @__PURE__ */ jsx(Grid$1, { gap: 4, children: row.map(({ size, ...field }) => {
|
2885
|
+
return /* @__PURE__ */ jsx(Grid$1.Root, { gap: 4, children: row.map(({ size, ...field }) => {
|
2574
2886
|
const completeFieldName = `${nameWithIndex}.${field.name}`;
|
2575
|
-
return /* @__PURE__ */ jsx(
|
2887
|
+
return /* @__PURE__ */ jsx(
|
2888
|
+
Grid$1.Item,
|
2889
|
+
{
|
2890
|
+
col: size,
|
2891
|
+
s: 12,
|
2892
|
+
xs: 12,
|
2893
|
+
direction: "column",
|
2894
|
+
alignItems: "stretch",
|
2895
|
+
children: children({ ...field, name: completeFieldName })
|
2896
|
+
},
|
2897
|
+
completeFieldName
|
2898
|
+
);
|
2576
2899
|
}) }, index2);
|
2577
2900
|
})
|
2578
2901
|
}
|
@@ -2617,7 +2940,7 @@ const TextButtonCustom = styled(TextButton)`
|
|
2617
2940
|
}
|
2618
2941
|
|
2619
2942
|
@media (prefers-reduced-motion: no-preference) {
|
2620
|
-
transition: background-color 120ms ${(props) => props.theme.easings.easeOutQuad};
|
2943
|
+
transition: background-color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
|
2621
2944
|
}
|
2622
2945
|
`;
|
2623
2946
|
const Component = ({
|
@@ -2667,7 +2990,7 @@ const Component = ({
|
|
2667
2990
|
/* @__PURE__ */ jsx(
|
2668
2991
|
IconButton,
|
2669
2992
|
{
|
2670
|
-
|
2993
|
+
variant: "ghost",
|
2671
2994
|
onClick: onDeleteComponent,
|
2672
2995
|
label: formatMessage({
|
2673
2996
|
id: getTranslation("containers.Edit.delete"),
|
@@ -2680,7 +3003,7 @@ const Component = ({
|
|
2680
3003
|
IconButton,
|
2681
3004
|
{
|
2682
3005
|
ref: composedAccordionRefs,
|
2683
|
-
|
3006
|
+
variant: "ghost",
|
2684
3007
|
onClick: (e) => e.stopPropagation(),
|
2685
3008
|
"data-handler-id": handlerId,
|
2686
3009
|
label: formatMessage({
|
@@ -2750,7 +3073,7 @@ const ComponentInput = ({
|
|
2750
3073
|
id: getTranslation("components.reset-entry"),
|
2751
3074
|
defaultMessage: "Reset Entry"
|
2752
3075
|
}),
|
2753
|
-
|
3076
|
+
variant: "ghost",
|
2754
3077
|
onClick: () => {
|
2755
3078
|
field.onChange(name2, null);
|
2756
3079
|
},
|
@@ -2779,11 +3102,8 @@ const AddComponentButton = ({
|
|
2779
3102
|
onClick,
|
2780
3103
|
disabled: isDisabled,
|
2781
3104
|
background: "neutral0",
|
2782
|
-
paddingTop: 3,
|
2783
|
-
paddingBottom: 3,
|
2784
|
-
paddingLeft: 4,
|
2785
|
-
paddingRight: 4,
|
2786
3105
|
style: { cursor: isDisabled ? "not-allowed" : "pointer" },
|
3106
|
+
variant: "tertiary",
|
2787
3107
|
children: /* @__PURE__ */ jsxs(Flex, { tag: "span", gap: 2, children: [
|
2788
3108
|
/* @__PURE__ */ jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
|
2789
3109
|
/* @__PURE__ */ jsx(
|
@@ -2812,10 +3132,11 @@ const StyledAddIcon = styled(PlusCircle)`
|
|
2812
3132
|
}
|
2813
3133
|
`;
|
2814
3134
|
const AddComponentTitle = styled(Typography)``;
|
2815
|
-
const StyledButton = styled(
|
3135
|
+
const StyledButton = styled(Button)`
|
2816
3136
|
border-radius: 26px;
|
2817
3137
|
border-color: ${({ theme }) => theme.colors.neutral150};
|
2818
3138
|
box-shadow: ${({ theme }) => theme.shadows.filterShadow};
|
3139
|
+
height: 5rem;
|
2819
3140
|
|
2820
3141
|
&:hover {
|
2821
3142
|
${AddComponentTitle} {
|
@@ -2827,7 +3148,7 @@ const StyledButton = styled(BaseButton)`
|
|
2827
3148
|
fill: ${({ theme }) => theme.colors.primary600};
|
2828
3149
|
}
|
2829
3150
|
> path {
|
2830
|
-
fill: ${({ theme }) => theme.colors.
|
3151
|
+
fill: ${({ theme }) => theme.colors.primary600};
|
2831
3152
|
}
|
2832
3153
|
}
|
2833
3154
|
}
|
@@ -2885,7 +3206,7 @@ const ComponentBox = styled(Flex)`
|
|
2885
3206
|
cursor: pointer;
|
2886
3207
|
|
2887
3208
|
@media (prefers-reduced-motion: no-preference) {
|
2888
|
-
transition: color 120ms ${(props) => props.theme.easings.easeOutQuad};
|
3209
|
+
transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
|
2889
3210
|
}
|
2890
3211
|
|
2891
3212
|
&:focus,
|
@@ -2958,18 +3279,6 @@ const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
|
|
2958
3279
|
/* @__PURE__ */ jsx(Field.Hint, {})
|
2959
3280
|
] });
|
2960
3281
|
};
|
2961
|
-
function useDebounce(value, delay) {
|
2962
|
-
const [debouncedValue, setDebouncedValue] = useState(value);
|
2963
|
-
useEffect(() => {
|
2964
|
-
const handler = setTimeout(() => {
|
2965
|
-
setDebouncedValue(value);
|
2966
|
-
}, delay);
|
2967
|
-
return () => {
|
2968
|
-
clearTimeout(handler);
|
2969
|
-
};
|
2970
|
-
}, [value, delay]);
|
2971
|
-
return debouncedValue;
|
2972
|
-
}
|
2973
3282
|
const uidApi = contentManagerApi.injectEndpoints({
|
2974
3283
|
endpoints: (builder) => ({
|
2975
3284
|
getDefaultUID: builder.query({
|
@@ -3004,7 +3313,10 @@ const uidApi = contentManagerApi.injectEndpoints({
|
|
3004
3313
|
config: {
|
3005
3314
|
params
|
3006
3315
|
}
|
3007
|
-
})
|
3316
|
+
}),
|
3317
|
+
providesTags: (_res, _error, params) => [
|
3318
|
+
{ type: "UidAvailability", id: params.contentTypeUID }
|
3319
|
+
]
|
3008
3320
|
})
|
3009
3321
|
})
|
3010
3322
|
});
|
@@ -3016,8 +3328,10 @@ const UIDInput = React.forwardRef(
|
|
3016
3328
|
const allFormValues = useForm("InputUID", (form) => form.values);
|
3017
3329
|
const [availability, setAvailability] = React.useState();
|
3018
3330
|
const [showRegenerate, setShowRegenerate] = React.useState(false);
|
3331
|
+
const isCloning = useMatch(CLONE_PATH) !== null;
|
3019
3332
|
const field = useField(name2);
|
3020
3333
|
const debouncedValue = useDebounce(field.value, 300);
|
3334
|
+
const hasChanged = debouncedValue !== field.initialValue;
|
3021
3335
|
const { toggleNotification } = useNotification();
|
3022
3336
|
const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
|
3023
3337
|
const { formatMessage } = useIntl();
|
@@ -3093,8 +3407,9 @@ const UIDInput = React.forwardRef(
|
|
3093
3407
|
params
|
3094
3408
|
},
|
3095
3409
|
{
|
3410
|
+
// Don't check availability if the value is empty or wasn't changed
|
3096
3411
|
skip: !Boolean(
|
3097
|
-
|
3412
|
+
(hasChanged || isCloning) && debouncedValue && UID_REGEX.test(debouncedValue.trim())
|
3098
3413
|
)
|
3099
3414
|
}
|
3100
3415
|
);
|
@@ -3123,6 +3438,7 @@ const UIDInput = React.forwardRef(
|
|
3123
3438
|
const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
|
3124
3439
|
const fieldRef = useFocusInputField(name2);
|
3125
3440
|
const composedRefs = useComposedRefs(ref, fieldRef);
|
3441
|
+
const shouldShowAvailability = (hasChanged || isCloning) && debouncedValue != null && availability && !showRegenerate;
|
3126
3442
|
return /* @__PURE__ */ jsxs(Field.Root, { hint, name: name2, error: field.error, required, children: [
|
3127
3443
|
/* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
|
3128
3444
|
/* @__PURE__ */ jsx(
|
@@ -3131,7 +3447,7 @@ const UIDInput = React.forwardRef(
|
|
3131
3447
|
ref: composedRefs,
|
3132
3448
|
disabled: props.disabled,
|
3133
3449
|
endAction: /* @__PURE__ */ jsxs(Flex, { position: "relative", gap: 1, children: [
|
3134
|
-
|
3450
|
+
shouldShowAvailability && /* @__PURE__ */ jsxs(
|
3135
3451
|
TextValidation,
|
3136
3452
|
{
|
3137
3453
|
alignItems: "center",
|
@@ -3965,7 +4281,7 @@ const EditorLayout = ({
|
|
3965
4281
|
justifyContent: "flex-end",
|
3966
4282
|
shrink: 0,
|
3967
4283
|
width: "100%",
|
3968
|
-
children: /* @__PURE__ */ jsxs(ExpandButton$1, { onClick: onCollapse, children: [
|
4284
|
+
children: /* @__PURE__ */ jsxs(ExpandButton$1, { onClick: onCollapse, variant: "tertiary", size: "M", children: [
|
3969
4285
|
/* @__PURE__ */ jsx(Typography, { children: formatMessage({
|
3970
4286
|
id: "components.Wysiwyg.collapse",
|
3971
4287
|
defaultMessage: "Collapse"
|
@@ -3983,12 +4299,14 @@ const EditorLayout = ({
|
|
3983
4299
|
) }) });
|
3984
4300
|
}
|
3985
4301
|
return /* @__PURE__ */ jsx(
|
3986
|
-
|
4302
|
+
Flex,
|
3987
4303
|
{
|
3988
4304
|
borderColor: error ? "danger600" : "neutral200",
|
3989
4305
|
borderStyle: "solid",
|
3990
4306
|
borderWidth: "1px",
|
3991
4307
|
hasRadius: true,
|
4308
|
+
direction: "column",
|
4309
|
+
alignItems: "stretch",
|
3992
4310
|
children
|
3993
4311
|
}
|
3994
4312
|
);
|
@@ -3999,11 +4317,19 @@ const ExpandWrapper = styled(Flex)`
|
|
3999
4317
|
const BoxWithBorder = styled(Box)`
|
4000
4318
|
border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
|
4001
4319
|
`;
|
4002
|
-
const ExpandButton$1 = styled(
|
4320
|
+
const ExpandButton$1 = styled(Button)`
|
4003
4321
|
background-color: transparent;
|
4004
4322
|
border: none;
|
4005
4323
|
align-items: center;
|
4006
4324
|
|
4325
|
+
& > span {
|
4326
|
+
display: flex;
|
4327
|
+
justify-content: space-between;
|
4328
|
+
align-items: center;
|
4329
|
+
width: 100%;
|
4330
|
+
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
4331
|
+
}
|
4332
|
+
|
4007
4333
|
svg {
|
4008
4334
|
margin-left: ${({ theme }) => `${theme.spaces[2]}`};
|
4009
4335
|
|
@@ -4270,42 +4596,28 @@ const quoteAndCodeHandler = (editor, markdownType) => {
|
|
4270
4596
|
insertWithoutTextToEdit(editor, markdownType, line, contentLength);
|
4271
4597
|
}
|
4272
4598
|
};
|
4273
|
-
const CustomIconButton = styled(IconButton)`
|
4274
|
-
padding: ${({ theme }) => theme.spaces[2]};
|
4275
|
-
/* Trick to prevent the outline from overflowing because of the general outline-offset */
|
4276
|
-
outline-offset: -2px !important;
|
4277
|
-
|
4278
|
-
svg {
|
4279
|
-
width: 1.8rem;
|
4280
|
-
height: 1.8rem;
|
4281
|
-
}
|
4282
|
-
`;
|
4283
|
-
const CustomLinkIconButton = styled(CustomIconButton)`
|
4284
|
-
svg {
|
4285
|
-
width: 0.8rem;
|
4286
|
-
height: 0.8rem;
|
4287
|
-
}
|
4288
|
-
`;
|
4289
4599
|
const MainButtons = styled(IconButtonGroup)`
|
4290
4600
|
margin-left: ${({ theme }) => theme.spaces[4]};
|
4291
4601
|
`;
|
4292
4602
|
const MoreButton = styled(IconButton)`
|
4293
4603
|
margin: ${({ theme }) => `0 ${theme.spaces[2]}`};
|
4294
|
-
padding: ${({ theme }) => theme.spaces[2]};
|
4295
|
-
|
4296
|
-
svg {
|
4297
|
-
width: 1.8rem;
|
4298
|
-
height: 1.8rem;
|
4299
|
-
}
|
4300
4604
|
`;
|
4301
4605
|
const IconButtonGroupMargin = styled(IconButtonGroup)`
|
4302
4606
|
margin-right: ${({ theme }) => `${theme.spaces[2]}`};
|
4303
4607
|
`;
|
4304
|
-
const ExpandButton = styled(
|
4608
|
+
const ExpandButton = styled(Button)`
|
4305
4609
|
background-color: transparent;
|
4306
4610
|
border: none;
|
4307
4611
|
align-items: center;
|
4308
4612
|
|
4613
|
+
& > span {
|
4614
|
+
display: flex;
|
4615
|
+
justify-content: space-between;
|
4616
|
+
align-items: center;
|
4617
|
+
width: 100%;
|
4618
|
+
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
4619
|
+
}
|
4620
|
+
|
4309
4621
|
svg {
|
4310
4622
|
margin-left: ${({ theme }) => `${theme.spaces[2]}`};
|
4311
4623
|
path {
|
@@ -4317,8 +4629,8 @@ const ExpandButton = styled(BaseButton)`
|
|
4317
4629
|
`;
|
4318
4630
|
const WysiwygFooter = ({ onToggleExpand }) => {
|
4319
4631
|
const { formatMessage } = useIntl();
|
4320
|
-
return /* @__PURE__ */ jsx(Box, { padding: 2, background: "neutral100", borderRadius: `0 0 0.4rem 0.4rem`, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", alignItems: "flex-end", children: /* @__PURE__ */ jsxs(ExpandButton, { id: "expand", onClick: onToggleExpand, children: [
|
4321
|
-
/* @__PURE__ */ jsx(Typography, { children: formatMessage({
|
4632
|
+
return /* @__PURE__ */ jsx(Box, { padding: 2, background: "neutral100", borderRadius: `0 0 0.4rem 0.4rem`, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", alignItems: "flex-end", children: /* @__PURE__ */ jsxs(ExpandButton, { id: "expand", onClick: onToggleExpand, variant: "tertiary", size: "M", children: [
|
4633
|
+
/* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: formatMessage({
|
4322
4634
|
id: "components.WysiwygBottomControls.fullscreen",
|
4323
4635
|
defaultMessage: "Expand"
|
4324
4636
|
}) }),
|
@@ -4340,7 +4652,7 @@ const WysiwygNav = ({
|
|
4340
4652
|
id: "components.Wysiwyg.selectOptions.title",
|
4341
4653
|
defaultMessage: "Add a title"
|
4342
4654
|
});
|
4343
|
-
|
4655
|
+
React.useRef(null);
|
4344
4656
|
const handleTogglePopover = () => {
|
4345
4657
|
setVisiblePopover((prev) => !prev);
|
4346
4658
|
};
|
@@ -4354,18 +4666,27 @@ const WysiwygNav = ({
|
|
4354
4666
|
borderRadius: `0.4rem 0.4rem 0 0`,
|
4355
4667
|
children: [
|
4356
4668
|
/* @__PURE__ */ jsxs(Flex, { children: [
|
4357
|
-
/* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsxs(
|
4358
|
-
|
4359
|
-
|
4360
|
-
|
4361
|
-
|
4362
|
-
|
4363
|
-
|
4364
|
-
|
4669
|
+
/* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsxs(
|
4670
|
+
SingleSelect,
|
4671
|
+
{
|
4672
|
+
disabled: true,
|
4673
|
+
placeholder: selectPlaceholder,
|
4674
|
+
"aria-label": selectPlaceholder,
|
4675
|
+
size: "S",
|
4676
|
+
children: [
|
4677
|
+
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h1", children: "h1" }),
|
4678
|
+
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h2", children: "h2" }),
|
4679
|
+
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h3", children: "h3" }),
|
4680
|
+
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h4", children: "h4" }),
|
4681
|
+
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h5", children: "h5" }),
|
4682
|
+
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h6", children: "h6" })
|
4683
|
+
]
|
4684
|
+
}
|
4685
|
+
) }),
|
4365
4686
|
/* @__PURE__ */ jsxs(MainButtons, { children: [
|
4366
|
-
/* @__PURE__ */ jsx(
|
4367
|
-
/* @__PURE__ */ jsx(
|
4368
|
-
/* @__PURE__ */ jsx(
|
4687
|
+
/* @__PURE__ */ jsx(IconButton, { disabled: true, label: "Bold", name: "Bold", children: /* @__PURE__ */ jsx(Bold, {}) }),
|
4688
|
+
/* @__PURE__ */ jsx(IconButton, { disabled: true, label: "Italic", name: "Italic", children: /* @__PURE__ */ jsx(Italic, {}) }),
|
4689
|
+
/* @__PURE__ */ jsx(IconButton, { disabled: true, label: "Underline", name: "Underline", children: /* @__PURE__ */ jsx(Underline, {}) })
|
4369
4690
|
] }),
|
4370
4691
|
/* @__PURE__ */ jsx(MoreButton, { disabled: true, label: "More", children: /* @__PURE__ */ jsx(More, {}) })
|
4371
4692
|
] }),
|
@@ -4392,6 +4713,7 @@ const WysiwygNav = ({
|
|
4392
4713
|
placeholder: selectPlaceholder,
|
4393
4714
|
"aria-label": selectPlaceholder,
|
4394
4715
|
onChange: (value) => onActionClick(value, editorRef),
|
4716
|
+
size: "S",
|
4395
4717
|
children: [
|
4396
4718
|
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h1", children: "h1" }),
|
4397
4719
|
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h2", children: "h2" }),
|
@@ -4403,17 +4725,9 @@ const WysiwygNav = ({
|
|
4403
4725
|
}
|
4404
4726
|
) }),
|
4405
4727
|
/* @__PURE__ */ jsxs(MainButtons, { children: [
|
4728
|
+
/* @__PURE__ */ jsx(IconButton, { onClick: () => onActionClick("Bold", editorRef), label: "Bold", name: "Bold", children: /* @__PURE__ */ jsx(Bold, {}) }),
|
4406
4729
|
/* @__PURE__ */ jsx(
|
4407
|
-
|
4408
|
-
{
|
4409
|
-
onClick: () => onActionClick("Bold", editorRef),
|
4410
|
-
label: "Bold",
|
4411
|
-
name: "Bold",
|
4412
|
-
children: /* @__PURE__ */ jsx(Bold, {})
|
4413
|
-
}
|
4414
|
-
),
|
4415
|
-
/* @__PURE__ */ jsx(
|
4416
|
-
CustomIconButton,
|
4730
|
+
IconButton,
|
4417
4731
|
{
|
4418
4732
|
onClick: () => onActionClick("Italic", editorRef),
|
4419
4733
|
label: "Italic",
|
@@ -4422,7 +4736,7 @@ const WysiwygNav = ({
|
|
4422
4736
|
}
|
4423
4737
|
),
|
4424
4738
|
/* @__PURE__ */ jsx(
|
4425
|
-
|
4739
|
+
IconButton,
|
4426
4740
|
{
|
4427
4741
|
onClick: () => onActionClick("Underline", editorRef),
|
4428
4742
|
label: "Underline",
|
@@ -4431,79 +4745,81 @@ const WysiwygNav = ({
|
|
4431
4745
|
}
|
4432
4746
|
)
|
4433
4747
|
] }),
|
4434
|
-
/* @__PURE__ */
|
4435
|
-
|
4436
|
-
/* @__PURE__ */ jsxs(
|
4437
|
-
/* @__PURE__ */
|
4438
|
-
|
4439
|
-
|
4440
|
-
|
4441
|
-
|
4442
|
-
|
4443
|
-
|
4444
|
-
|
4445
|
-
|
4446
|
-
|
4447
|
-
|
4448
|
-
|
4449
|
-
|
4450
|
-
|
4451
|
-
|
4452
|
-
|
4453
|
-
|
4454
|
-
|
4455
|
-
|
4456
|
-
|
4457
|
-
|
4458
|
-
|
4459
|
-
|
4460
|
-
|
4461
|
-
|
4462
|
-
|
4463
|
-
|
4464
|
-
|
4465
|
-
|
4466
|
-
/* @__PURE__ */
|
4467
|
-
|
4468
|
-
|
4469
|
-
|
4470
|
-
|
4471
|
-
|
4472
|
-
|
4473
|
-
|
4474
|
-
|
4475
|
-
|
4476
|
-
|
4477
|
-
|
4478
|
-
|
4479
|
-
|
4480
|
-
|
4481
|
-
|
4482
|
-
|
4483
|
-
|
4484
|
-
|
4485
|
-
|
4486
|
-
|
4487
|
-
|
4488
|
-
|
4489
|
-
|
4490
|
-
|
4491
|
-
|
4492
|
-
|
4493
|
-
|
4494
|
-
|
4495
|
-
|
4496
|
-
|
4497
|
-
|
4498
|
-
|
4499
|
-
|
4500
|
-
|
4501
|
-
|
4502
|
-
|
4503
|
-
|
4504
|
-
|
4505
|
-
|
4506
|
-
|
4748
|
+
/* @__PURE__ */ jsxs(Popover.Root, { children: [
|
4749
|
+
/* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(MoreButton, { label: "More", children: /* @__PURE__ */ jsx(More, {}) }) }),
|
4750
|
+
/* @__PURE__ */ jsx(Popover.Content, { sideOffset: 12, children: /* @__PURE__ */ jsxs(Flex, { padding: 2, children: [
|
4751
|
+
/* @__PURE__ */ jsxs(IconButtonGroupMargin, { children: [
|
4752
|
+
/* @__PURE__ */ jsx(
|
4753
|
+
IconButton,
|
4754
|
+
{
|
4755
|
+
onClick: () => onActionClick("Strikethrough", editorRef, handleTogglePopover),
|
4756
|
+
label: "Strikethrough",
|
4757
|
+
name: "Strikethrough",
|
4758
|
+
children: /* @__PURE__ */ jsx(StrikeThrough, {})
|
4759
|
+
}
|
4760
|
+
),
|
4761
|
+
/* @__PURE__ */ jsx(
|
4762
|
+
IconButton,
|
4763
|
+
{
|
4764
|
+
onClick: () => onActionClick("BulletList", editorRef, handleTogglePopover),
|
4765
|
+
label: "BulletList",
|
4766
|
+
name: "BulletList",
|
4767
|
+
children: /* @__PURE__ */ jsx(BulletList, {})
|
4768
|
+
}
|
4769
|
+
),
|
4770
|
+
/* @__PURE__ */ jsx(
|
4771
|
+
IconButton,
|
4772
|
+
{
|
4773
|
+
onClick: () => onActionClick("NumberList", editorRef, handleTogglePopover),
|
4774
|
+
label: "NumberList",
|
4775
|
+
name: "NumberList",
|
4776
|
+
children: /* @__PURE__ */ jsx(NumberList, {})
|
4777
|
+
}
|
4778
|
+
)
|
4779
|
+
] }),
|
4780
|
+
/* @__PURE__ */ jsxs(IconButtonGroup, { children: [
|
4781
|
+
/* @__PURE__ */ jsx(
|
4782
|
+
IconButton,
|
4783
|
+
{
|
4784
|
+
onClick: () => onActionClick("Code", editorRef, handleTogglePopover),
|
4785
|
+
label: "Code",
|
4786
|
+
name: "Code",
|
4787
|
+
children: /* @__PURE__ */ jsx(Code, {})
|
4788
|
+
}
|
4789
|
+
),
|
4790
|
+
/* @__PURE__ */ jsx(
|
4791
|
+
IconButton,
|
4792
|
+
{
|
4793
|
+
onClick: () => {
|
4794
|
+
handleTogglePopover();
|
4795
|
+
onToggleMediaLib();
|
4796
|
+
},
|
4797
|
+
label: "Image",
|
4798
|
+
name: "Image",
|
4799
|
+
children: /* @__PURE__ */ jsx(Image$1, {})
|
4800
|
+
}
|
4801
|
+
),
|
4802
|
+
/* @__PURE__ */ jsx(
|
4803
|
+
IconButton,
|
4804
|
+
{
|
4805
|
+
onClick: () => onActionClick("Link", editorRef, handleTogglePopover),
|
4806
|
+
label: "Link",
|
4807
|
+
name: "Link",
|
4808
|
+
children: /* @__PURE__ */ jsx(Link$1, {})
|
4809
|
+
}
|
4810
|
+
),
|
4811
|
+
/* @__PURE__ */ jsx(
|
4812
|
+
IconButton,
|
4813
|
+
{
|
4814
|
+
onClick: () => onActionClick("Quote", editorRef, handleTogglePopover),
|
4815
|
+
label: "Quote",
|
4816
|
+
name: "Quote",
|
4817
|
+
children: /* @__PURE__ */ jsx(Quotes, {})
|
4818
|
+
}
|
4819
|
+
)
|
4820
|
+
] })
|
4821
|
+
] }) })
|
4822
|
+
] })
|
4507
4823
|
] }),
|
4508
4824
|
onTogglePreviewMode && /* @__PURE__ */ jsx(Button, { onClick: onTogglePreviewMode, variant: "tertiary", children: formatMessage({
|
4509
4825
|
id: "components.Wysiwyg.ToggleMode.preview-mode",
|
@@ -4630,15 +4946,19 @@ const Wysiwyg = React.forwardRef(
|
|
4630
4946
|
);
|
4631
4947
|
const MemoizedWysiwyg = React.memo(Wysiwyg);
|
4632
4948
|
const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
|
4633
|
-
const { id } = useDoc();
|
4949
|
+
const { id, document: document2, collectionType } = useDoc();
|
4634
4950
|
const isFormDisabled = useForm("InputRenderer", (state) => state.disabled);
|
4635
4951
|
const isInDynamicZone = useDynamicZone("isInDynamicZone", (state) => state.isInDynamicZone);
|
4636
4952
|
const canCreateFields = useDocumentRBAC("InputRenderer", (rbac) => rbac.canCreateFields);
|
4637
4953
|
const canReadFields = useDocumentRBAC("InputRenderer", (rbac) => rbac.canReadFields);
|
4638
4954
|
const canUpdateFields = useDocumentRBAC("InputRenderer", (rbac) => rbac.canUpdateFields);
|
4639
4955
|
const canUserAction = useDocumentRBAC("InputRenderer", (rbac) => rbac.canUserAction);
|
4640
|
-
|
4641
|
-
|
4956
|
+
let idToCheck = id;
|
4957
|
+
if (collectionType === SINGLE_TYPES) {
|
4958
|
+
idToCheck = document2?.documentId;
|
4959
|
+
}
|
4960
|
+
const editableFields = idToCheck ? canUpdateFields : canCreateFields;
|
4961
|
+
const readableFields = idToCheck ? canReadFields : canCreateFields;
|
4642
4962
|
const canUserReadField = canUserAction(props.name, readableFields, props.type);
|
4643
4963
|
const canUserEditField = canUserAction(props.name, editableFields, props.type);
|
4644
4964
|
const fields = useStrapiApp("InputRenderer", (app) => app.fields);
|
@@ -4649,6 +4969,7 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
|
|
4649
4969
|
const {
|
4650
4970
|
edit: { components }
|
4651
4971
|
} = useDocLayout();
|
4972
|
+
const field = useField(props.name);
|
4652
4973
|
if (!visible) {
|
4653
4974
|
return null;
|
4654
4975
|
}
|
@@ -4659,7 +4980,7 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
|
|
4659
4980
|
if (attributeHasCustomFieldProperty(props.attribute)) {
|
4660
4981
|
const CustomInput = lazyComponentStore[props.attribute.customField];
|
4661
4982
|
if (CustomInput) {
|
4662
|
-
return /* @__PURE__ */ jsx(CustomInput, { ...props, hint, disabled: fieldIsDisabled });
|
4983
|
+
return /* @__PURE__ */ jsx(CustomInput, { ...props, ...field, hint, disabled: fieldIsDisabled });
|
4663
4984
|
}
|
4664
4985
|
return /* @__PURE__ */ jsx(
|
4665
4986
|
InputRenderer$1,
|
@@ -4729,7 +5050,9 @@ const useFieldHint = (hint = void 0, attribute) => {
|
|
4729
5050
|
if (!maximum && !minimum) {
|
4730
5051
|
return hint;
|
4731
5052
|
}
|
4732
|
-
const units = !["biginteger", "integer", "number"].includes(
|
5053
|
+
const units = !["biginteger", "integer", "number", "dynamiczone", "component"].includes(
|
5054
|
+
attribute.type
|
5055
|
+
) ? formatMessage(
|
4733
5056
|
{
|
4734
5057
|
id: "content-manager.form.Input.hint.character.unit",
|
4735
5058
|
defaultMessage: "{maxValue, plural, one { character} other { characters}}"
|
@@ -4818,12 +5141,20 @@ const DynamicComponent = ({
|
|
4818
5141
|
React.useEffect(() => {
|
4819
5142
|
dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
|
4820
5143
|
}, [dragPreviewRef, index]);
|
5144
|
+
const accordionValue = React.useId();
|
5145
|
+
const { value = [], rawError } = useField(`${name2}.${index}`);
|
5146
|
+
const [collapseToOpen, setCollapseToOpen] = React.useState("");
|
5147
|
+
React.useEffect(() => {
|
5148
|
+
if (rawError && value) {
|
5149
|
+
setCollapseToOpen(accordionValue);
|
5150
|
+
}
|
5151
|
+
}, [rawError, value, accordionValue]);
|
4821
5152
|
const composedBoxRefs = useComposedRefs(boxRef, dropRef);
|
4822
5153
|
const accordionActions = disabled ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
|
4823
5154
|
/* @__PURE__ */ jsx(
|
4824
5155
|
IconButton,
|
4825
5156
|
{
|
4826
|
-
|
5157
|
+
variant: "ghost",
|
4827
5158
|
label: formatMessage(
|
4828
5159
|
{
|
4829
5160
|
id: getTranslation("components.DynamicZone.delete-label"),
|
@@ -4838,7 +5169,7 @@ const DynamicComponent = ({
|
|
4838
5169
|
/* @__PURE__ */ jsx(
|
4839
5170
|
IconButton,
|
4840
5171
|
{
|
4841
|
-
|
5172
|
+
variant: "ghost",
|
4842
5173
|
onClick: (e) => e.stopPropagation(),
|
4843
5174
|
"data-handler-id": handlerId,
|
4844
5175
|
ref: dragRef,
|
@@ -4883,10 +5214,9 @@ const DynamicComponent = ({
|
|
4883
5214
|
] })
|
4884
5215
|
] });
|
4885
5216
|
const accordionTitle = title ? `${displayName} ${title}` : displayName;
|
4886
|
-
const accordionValue = React.useId();
|
4887
5217
|
return /* @__PURE__ */ jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
|
4888
5218
|
/* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Rectangle, { background: "neutral200" }) }),
|
4889
|
-
/* @__PURE__ */ jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsx(Preview, {}) : /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsxs(Accordion.Item, { value: accordionValue, children: [
|
5219
|
+
/* @__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: [
|
4890
5220
|
/* @__PURE__ */ jsxs(Accordion.Header, { children: [
|
4891
5221
|
/* @__PURE__ */ jsx(
|
4892
5222
|
Accordion.Trigger,
|
@@ -4897,10 +5227,32 @@ const DynamicComponent = ({
|
|
4897
5227
|
),
|
4898
5228
|
/* @__PURE__ */ jsx(Accordion.Actions, { children: accordionActions })
|
4899
5229
|
] }),
|
4900
|
-
/* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsx(Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children:
|
4901
|
-
|
4902
|
-
|
4903
|
-
|
5230
|
+
/* @__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(
|
5231
|
+
Grid$1.Item,
|
5232
|
+
{
|
5233
|
+
col: 12,
|
5234
|
+
s: 12,
|
5235
|
+
xs: 12,
|
5236
|
+
direction: "column",
|
5237
|
+
alignItems: "stretch",
|
5238
|
+
children: /* @__PURE__ */ jsx(Grid$1.Root, { gap: 4, children: row.map(({ size, ...field }) => {
|
5239
|
+
const fieldName = `${name2}.${index}.${field.name}`;
|
5240
|
+
return /* @__PURE__ */ jsx(
|
5241
|
+
Grid$1.Item,
|
5242
|
+
{
|
5243
|
+
col: size,
|
5244
|
+
s: 12,
|
5245
|
+
xs: 12,
|
5246
|
+
direction: "column",
|
5247
|
+
alignItems: "stretch",
|
5248
|
+
children: /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...field, name: fieldName })
|
5249
|
+
},
|
5250
|
+
fieldName
|
5251
|
+
);
|
5252
|
+
}) })
|
5253
|
+
},
|
5254
|
+
rowInd
|
5255
|
+
)) }) }) }) })
|
4904
5256
|
] }) }) })
|
4905
5257
|
] });
|
4906
5258
|
};
|
@@ -5092,7 +5444,7 @@ const DynamicZone = ({
|
|
5092
5444
|
const handleRemoveComponent = (name22, currentIndex) => () => {
|
5093
5445
|
removeFieldRow(name22, currentIndex);
|
5094
5446
|
};
|
5095
|
-
const hasError = error !== void 0
|
5447
|
+
const hasError = error !== void 0;
|
5096
5448
|
const renderButtonLabel = () => {
|
5097
5449
|
if (addComponentIsOpen) {
|
5098
5450
|
return formatMessage({ id: "app.utils.close-label", defaultMessage: "Close" });
|
@@ -5208,4 +5560,4 @@ export {
|
|
5208
5560
|
transformDocument as t,
|
5209
5561
|
useLazyComponents as u
|
5210
5562
|
};
|
5211
|
-
//# sourceMappingURL=Field-
|
5563
|
+
//# sourceMappingURL=Field-DufHXW17.mjs.map
|