@_sh/strapi-plugin-ckeditor 4.0.11 → 5.0.1

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.
Files changed (78) hide show
  1. package/README.md +588 -575
  2. package/dist/_chunks/Field-BdtPMWJ1.js +600 -0
  3. package/dist/_chunks/Field-wVg5xgbq.mjs +576 -0
  4. package/dist/_chunks/index-CZRYkPJ8.js +1350 -0
  5. package/dist/_chunks/index-Clyv4ZPF.mjs +1330 -0
  6. package/dist/admin/index.js +11 -4
  7. package/dist/admin/index.mjs +10 -4
  8. package/dist/admin/src/components/CKEReact.d.ts +6 -0
  9. package/dist/admin/src/components/CKEditorIcon.d.ts +1 -0
  10. package/dist/admin/src/components/Editor.d.ts +1 -0
  11. package/dist/admin/src/components/EditorLayout.d.ts +4 -0
  12. package/dist/admin/src/components/EditorProvider.d.ts +20 -0
  13. package/dist/admin/src/components/Field.d.ts +20 -0
  14. package/dist/admin/src/components/GlobalStyling.d.ts +4 -0
  15. package/dist/admin/src/components/MediaLib.d.ts +9 -0
  16. package/dist/admin/src/config/htmlPreset.d.ts +2 -0
  17. package/dist/admin/src/config/index.d.ts +5 -0
  18. package/dist/admin/src/config/language.d.ts +15 -0
  19. package/dist/admin/src/config/markdownPreset.d.ts +2 -0
  20. package/dist/admin/src/config/pluginConfig.d.ts +23 -0
  21. package/dist/admin/src/config/types.d.ts +123 -0
  22. package/dist/admin/src/exports.d.ts +9 -0
  23. package/dist/admin/src/index.d.ts +6 -0
  24. package/dist/admin/src/plugins/StrapiMediaLib.d.ts +15 -0
  25. package/dist/admin/src/plugins/StrapiUploadAdapter.d.ts +12 -0
  26. package/dist/admin/src/plugins/index.d.ts +2 -0
  27. package/dist/admin/src/theme/additional.d.ts +1 -0
  28. package/dist/admin/src/theme/colors.d.ts +1 -0
  29. package/dist/admin/src/theme/common.d.ts +1 -0
  30. package/dist/admin/src/theme/dark.d.ts +1 -0
  31. package/dist/admin/src/theme/index.d.ts +2 -0
  32. package/dist/admin/src/theme/light.d.ts +1 -0
  33. package/dist/admin/src/utils/index.d.ts +4 -0
  34. package/dist/admin/src/utils/isImageResponsive.d.ts +3 -0
  35. package/dist/admin/src/utils/localStorage.d.ts +3 -0
  36. package/dist/admin/src/utils/pluginId.d.ts +1 -0
  37. package/dist/admin/src/utils/prefixWithBackendUrl.d.ts +1 -0
  38. package/dist/server/index.js +61 -119
  39. package/dist/server/index.mjs +61 -117
  40. package/dist/server/src/index.d.ts +7 -0
  41. package/package.json +50 -22
  42. package/dist/_chunks/index-5LGZsCS3.mjs +0 -1125
  43. package/dist/_chunks/index-5LGZsCS3.mjs.map +0 -1
  44. package/dist/_chunks/index-B5HkOicq.mjs +0 -3530
  45. package/dist/_chunks/index-B5HkOicq.mjs.map +0 -1
  46. package/dist/_chunks/index-BOqpyEaD.js +0 -1150
  47. package/dist/_chunks/index-BOqpyEaD.js.map +0 -1
  48. package/dist/_chunks/index-BQ7yqvCN.mjs +0 -1124
  49. package/dist/_chunks/index-BQ7yqvCN.mjs.map +0 -1
  50. package/dist/_chunks/index-BZP-quaN.mjs +0 -3530
  51. package/dist/_chunks/index-BZP-quaN.mjs.map +0 -1
  52. package/dist/_chunks/index-BZZiYjTp.mjs +0 -3530
  53. package/dist/_chunks/index-BZZiYjTp.mjs.map +0 -1
  54. package/dist/_chunks/index-Be-t5n4r.mjs +0 -1125
  55. package/dist/_chunks/index-Be-t5n4r.mjs.map +0 -1
  56. package/dist/_chunks/index-BiOS6ItS.js +0 -1150
  57. package/dist/_chunks/index-BiOS6ItS.js.map +0 -1
  58. package/dist/_chunks/index-C4BPSFZt.mjs +0 -3530
  59. package/dist/_chunks/index-C4BPSFZt.mjs.map +0 -1
  60. package/dist/_chunks/index-CFskHjqL.js +0 -3548
  61. package/dist/_chunks/index-CFskHjqL.js.map +0 -1
  62. package/dist/_chunks/index-CPBrnTwd.mjs +0 -1124
  63. package/dist/_chunks/index-CPBrnTwd.mjs.map +0 -1
  64. package/dist/_chunks/index-CRK4zk5I.js +0 -3548
  65. package/dist/_chunks/index-CRK4zk5I.js.map +0 -1
  66. package/dist/_chunks/index-CUmwBN9O.js +0 -1151
  67. package/dist/_chunks/index-CUmwBN9O.js.map +0 -1
  68. package/dist/_chunks/index-CaYpAgjX.js +0 -1151
  69. package/dist/_chunks/index-CaYpAgjX.js.map +0 -1
  70. package/dist/_chunks/index-pRK2Er3w.js +0 -3548
  71. package/dist/_chunks/index-pRK2Er3w.js.map +0 -1
  72. package/dist/_chunks/index-uYy-Myyv.js +0 -3548
  73. package/dist/_chunks/index-uYy-Myyv.js.map +0 -1
  74. package/dist/admin/index.js.map +0 -1
  75. package/dist/admin/index.mjs.map +0 -1
  76. package/dist/server/index.js.map +0 -1
  77. package/dist/server/index.mjs.map +0 -1
  78. package/strapi-server.js +0 -3
@@ -1,1125 +0,0 @@
1
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import React, { useState, useRef, useEffect } from "react";
3
- import PropTypes from "prop-types";
4
- import { Box, Loader, Field, Flex } from "@strapi/design-system";
5
- import styled, { css, createGlobalStyle } from "styled-components";
6
- import { CKEditor } from "@ckeditor/ckeditor5-react";
7
- import { ClassicEditor } from "ckeditor5";
8
- import { useStrapiApp, useField } from "@strapi/strapi/admin";
9
- import "ckeditor5/ckeditor5.css";
10
- import { b as basePresets } from "./index-C4BPSFZt.mjs";
11
- const prefixFileUrlWithBackendUrl = (fileURL) => {
12
- return !!fileURL && fileURL.startsWith("/") ? `${window.strapi.backendURL}${fileURL}` : fileURL;
13
- };
14
- const MediaLib = ({ isOpen = false, onToggle = () => {
15
- }, editor }) => {
16
- const components = useStrapiApp("MediaLib", ({ components: components2 }) => components2);
17
- const MediaLibraryDialog = components["media-library"];
18
- const handleChangeAssets = (assets) => {
19
- let newValue = "";
20
- assets.map(({ name, url, alt, formats, mime, width, height }) => {
21
- if (mime.includes("image")) {
22
- if (formats && globalThis.SH_CKE_UPLOAD_ADAPTER_IS_RESPONSIVE) {
23
- let set = "";
24
- let keys = Object.keys(formats).sort((a, b) => formats[a].width - formats[b].width);
25
- keys.map((k) => set += prefixFileUrlWithBackendUrl(formats[k].url) + ` ${formats[k].width}w,`);
26
- newValue += `<img src="${url}" alt="${alt}" width="${width}" height="${height}" srcset="${set}" />`;
27
- } else {
28
- newValue += `<img src="${url}" alt="${alt}" width="${width}" height="${height}" />`;
29
- }
30
- } else if (mime.includes("video")) {
31
- newValue += `
32
- <video class="video" controls width="500px">
33
- <source src="${url}" type="${mime}" />
34
- </video>`;
35
- } else {
36
- newValue += `<a href="${url}">${name || "Open document"}</a>`;
37
- }
38
- });
39
- const viewFragment = editor.data.processor.toView(newValue);
40
- const modelFragment = editor.data.toModel(viewFragment);
41
- editor.model.insertContent(modelFragment);
42
- onToggle();
43
- };
44
- const handleSelectAssets = (files) => {
45
- const formattedFiles = files.map((f) => ({
46
- name: f.name,
47
- alt: f.alternativeText || f.name,
48
- url: prefixFileUrlWithBackendUrl(f.url),
49
- mime: f.mime,
50
- formats: f.formats,
51
- width: f.width,
52
- height: f.height
53
- }));
54
- handleChangeAssets(formattedFiles);
55
- };
56
- if (!isOpen) {
57
- return null;
58
- }
59
- return /* @__PURE__ */ jsx(
60
- MediaLibraryDialog,
61
- {
62
- onClose: onToggle,
63
- onSelectAssets: handleSelectAssets
64
- }
65
- );
66
- };
67
- MediaLib.propTypes = {
68
- isOpen: PropTypes.bool,
69
- onToggle: PropTypes.func
70
- };
71
- const STORAGE_KEYS = {
72
- TOKEN: "jwtToken",
73
- PREFERED_LANGUAGE: "strapi-admin-language",
74
- PROFILE_THEME: "STRAPI_THEME"
75
- };
76
- const getStoredToken = () => {
77
- const token = localStorage.getItem(STORAGE_KEYS.TOKEN) ?? sessionStorage.getItem(STORAGE_KEYS.TOKEN);
78
- if (typeof token === "string") {
79
- return JSON.parse(token);
80
- }
81
- return null;
82
- };
83
- const getPreferedLanguage = () => {
84
- const language = localStorage.getItem(STORAGE_KEYS.PREFERED_LANGUAGE)?.replace(/^"|"$/g, "") || "en";
85
- return language;
86
- };
87
- const getProfileTheme = () => {
88
- const theme = localStorage.getItem(STORAGE_KEYS.PROFILE_THEME);
89
- return theme;
90
- };
91
- const setPlugins = (config, toggleMediaLib) => {
92
- const token = getStoredToken();
93
- const presetPluginNames = config?.plugins ? [...config.plugins.map((p) => p.pluginName)] : [];
94
- if (presetPluginNames.includes("StrapiMediaLib")) {
95
- config.strapiMediaLib = { toggle: toggleMediaLib };
96
- }
97
- if (presetPluginNames.includes("StrapiUploadAdapter")) {
98
- config.strapiUploadAdapter = {
99
- uploadUrl: `${strapi.backendURL}/upload`,
100
- headers: { Authorization: "Bearer " + token },
101
- backendUrl: strapi.backendURL,
102
- responsive: globalThis.SH_CKE_UPLOAD_ADAPTER_IS_RESPONSIVE
103
- };
104
- }
105
- if (presetPluginNames.includes("WordCount")) {
106
- config.WordCountPlugin = true;
107
- }
108
- };
109
- const translationImports = {
110
- af: () => import("ckeditor5/translations/af.js"),
111
- ar: () => import("ckeditor5/translations/ar.js"),
112
- ast: () => import("ckeditor5/translations/ast.js"),
113
- az: () => import("ckeditor5/translations/az.js"),
114
- bg: () => import("ckeditor5/translations/bg.js"),
115
- bn: () => import("ckeditor5/translations/bn.js"),
116
- bs: () => import("ckeditor5/translations/bs.js"),
117
- ca: () => import("ckeditor5/translations/ca.js"),
118
- cs: () => import("ckeditor5/translations/cs.js"),
119
- da: () => import("ckeditor5/translations/da.js"),
120
- "de-ch": () => import("ckeditor5/translations/de-ch.js"),
121
- de: () => import("ckeditor5/translations/de.js"),
122
- el: () => import("ckeditor5/translations/el.js"),
123
- "en-au": () => import("ckeditor5/translations/en-au.js"),
124
- "en-gb": () => import("ckeditor5/translations/en-gb.js"),
125
- en: () => import("ckeditor5/translations/en.js"),
126
- eo: () => import("ckeditor5/translations/eo.js"),
127
- "es-co": () => import("ckeditor5/translations/es-co.js"),
128
- es: () => import("ckeditor5/translations/es.js"),
129
- et: () => import("ckeditor5/translations/et.js"),
130
- eu: () => import("ckeditor5/translations/eu.js"),
131
- fa: () => import("ckeditor5/translations/fa.js"),
132
- fi: () => import("ckeditor5/translations/fi.js"),
133
- fr: () => import("ckeditor5/translations/fr.js"),
134
- gl: () => import("ckeditor5/translations/gl.js"),
135
- gu: () => import("ckeditor5/translations/gu.js"),
136
- he: () => import("ckeditor5/translations/he.js"),
137
- hi: () => import("ckeditor5/translations/hi.js"),
138
- hr: () => import("ckeditor5/translations/hr.js"),
139
- hu: () => import("ckeditor5/translations/hu.js"),
140
- hy: () => import("ckeditor5/translations/hy.js"),
141
- id: () => import("ckeditor5/translations/id.js"),
142
- it: () => import("ckeditor5/translations/it.js"),
143
- ja: () => import("ckeditor5/translations/ja.js"),
144
- jv: () => import("ckeditor5/translations/jv.js"),
145
- kk: () => import("ckeditor5/translations/kk.js"),
146
- km: () => import("ckeditor5/translations/km.js"),
147
- kn: () => import("ckeditor5/translations/kn.js"),
148
- ko: () => import("ckeditor5/translations/ko.js"),
149
- ku: () => import("ckeditor5/translations/ku.js"),
150
- lt: () => import("ckeditor5/translations/lt.js"),
151
- lv: () => import("ckeditor5/translations/lv.js"),
152
- ms: () => import("ckeditor5/translations/ms.js"),
153
- nb: () => import("ckeditor5/translations/nb.js"),
154
- ne: () => import("ckeditor5/translations/ne.js"),
155
- nl: () => import("ckeditor5/translations/nl.js"),
156
- no: () => import("ckeditor5/translations/no.js"),
157
- oc: () => import("ckeditor5/translations/oc.js"),
158
- pl: () => import("ckeditor5/translations/pl.js"),
159
- "pt-br": () => import("ckeditor5/translations/pt-br.js"),
160
- pt: () => import("ckeditor5/translations/pt.js"),
161
- ro: () => import("ckeditor5/translations/ro.js"),
162
- ru: () => import("ckeditor5/translations/ru.js"),
163
- si: () => import("ckeditor5/translations/si.js"),
164
- sk: () => import("ckeditor5/translations/sk.js"),
165
- sl: () => import("ckeditor5/translations/sl.js"),
166
- sq: () => import("ckeditor5/translations/sq.js"),
167
- sr: () => import("ckeditor5/translations/sr.js"),
168
- "sr-latn": () => import("ckeditor5/translations/sr-latn.js"),
169
- sv: () => import("ckeditor5/translations/sv.js"),
170
- th: () => import("ckeditor5/translations/th.js"),
171
- ti: () => import("ckeditor5/translations/ti.js"),
172
- tk: () => import("ckeditor5/translations/tk.js"),
173
- tr: () => import("ckeditor5/translations/tr.js"),
174
- tt: () => import("ckeditor5/translations/tt.js"),
175
- ug: () => import("ckeditor5/translations/ug.js"),
176
- uk: () => import("ckeditor5/translations/uk.js"),
177
- ur: () => import("ckeditor5/translations/ur.js"),
178
- uz: () => import("ckeditor5/translations/uz.js"),
179
- vi: () => import("ckeditor5/translations/vi.js"),
180
- "zh-cn": () => import("ckeditor5/translations/zh-cn.js"),
181
- zh: () => import("ckeditor5/translations/zh.js")
182
- };
183
- const importLang = async (config, language) => {
184
- if (translationImports[language]) {
185
- const translations = await translationImports[language]();
186
- config.translations = translations.default;
187
- } else {
188
- console.error(`No translation found for language: ${language}`);
189
- }
190
- };
191
- const detecti18n = () => {
192
- const urlSearchParams = new URLSearchParams(window.location.search);
193
- const params = Object.fromEntries(urlSearchParams.entries());
194
- const i18n = params["plugins[i18n][locale]"];
195
- return i18n && i18n.split("-")[0];
196
- };
197
- const setLanguage = async (config) => {
198
- const i18nLang = detecti18n();
199
- const preferedLanguage = getPreferedLanguage();
200
- const {
201
- ui = config.language && typeof config.language === "string" ? config.language : preferedLanguage,
202
- textPartLanguage,
203
- ignorei18n
204
- } = config.language || {};
205
- if (i18nLang && !ignorei18n) {
206
- config.language = {
207
- ui,
208
- content: i18nLang,
209
- textPartLanguage
210
- };
211
- }
212
- if (ui !== "en") {
213
- await importLang(config, ui);
214
- }
215
- };
216
- const getConfiguredPreset = async (presetName, { toggleMediaLib, strapiFieldPlaceholder }) => {
217
- const { presets: userPresets, dontMergePresets } = globalThis.SH_CKE_CONFIG || {};
218
- const preset = dontMergePresets ? userPresets[presetName] : basePresets[presetName];
219
- const clonedPreset = {
220
- ...preset,
221
- editorConfig: {
222
- ...preset.editorConfig,
223
- placeholder: strapiFieldPlaceholder || preset.editorConfig.placeholder
224
- }
225
- };
226
- setPlugins(clonedPreset.editorConfig, toggleMediaLib);
227
- await setLanguage(clonedPreset.editorConfig);
228
- return clonedPreset;
229
- };
230
- const common = css`
231
- .ck {
232
- --ck-color-image-caption-background: hsl(0, 0%, 97%);
233
- --ck-color-image-caption-text: hsl(0, 0%, 20%);
234
- --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
235
- --ck-color-mention-text: hsl(341, 100%, 30%);
236
- --ck-color-table-caption-background: hsl(0, 0%, 97%);
237
- --ck-color-table-caption-text: hsl(0, 0%, 20%);
238
- --ck-highlight-marker-blue: hsl(201, 97%, 72%);
239
- --ck-highlight-marker-green: hsl(120, 93%, 68%);
240
- --ck-highlight-marker-pink: hsl(345, 96%, 73%);
241
- --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
242
- --ck-highlight-pen-green: hsl(112, 100%, 27%);
243
- --ck-highlight-pen-red: hsl(0, 85%, 49%);
244
- --ck-image-style-spacing: 1.5em;
245
- --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
246
- --ck-todo-list-checkmark-size: 16px;
247
- font-size: 14px;
248
- }
249
-
250
- .ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
251
- top: 64px !important;
252
- }
253
- .ck.ck-reset.ck-dropdown__panel.ck-dropdown__panel_sw.ck-dropdown__panel-visible {
254
- border-radius: 4px;
255
- }
256
-
257
- .ck-editor__main {
258
- --ck-font-face: 'Source Sans Pro', system-ui, Roboto, 'Helvetica Neue',
259
- 'Helvetica', Arial, sans-serif;
260
-
261
- color: var(--ck-color-editor-base-text);
262
- font-family: var(--ck-font-face);
263
-
264
- * {
265
- font: revert;
266
- margin: revert;
267
- }
268
-
269
- h1 {
270
- font-size: 2.3em;
271
- }
272
-
273
- h2 {
274
- font-size: 1.84em;
275
- }
276
-
277
- h3 {
278
- font-size: 1.48em;
279
- }
280
-
281
- h4 {
282
- font-size: 1.22em;
283
- }
284
-
285
- h5 {
286
- font-size: 1.06em;
287
- }
288
-
289
- h6 {
290
- font-size: 1em;
291
- }
292
-
293
- h1,
294
- h2,
295
- h3,
296
- h4,
297
- h5,
298
- h6 {
299
- line-height: 1.2em;
300
- padding-top: 0.8em;
301
- margin-bottom: 0.4em;
302
- }
303
-
304
- blockquote,
305
- ol,
306
- p,
307
- ul {
308
- font-size: 1em;
309
- line-height: 1.6em;
310
- padding-top: 0.2em;
311
- margin-bottom: var(--ck-spacing-large);
312
- }
313
-
314
- figcaption {
315
- background-color: var(--ck-color-image-caption-background);
316
- caption-side: bottom;
317
- color: var(--ck-color-image-caption-text);
318
- display: table-caption;
319
- font-size: 0.75em;
320
- outline-offset: -1px;
321
- padding: 0.6em;
322
- word-break: break-word;
323
- }
324
-
325
- a {
326
- text-decoration: none;
327
- color: #1b3af2;
328
- }
329
-
330
- a:hover {
331
- text-decoration: underline;
332
- }
333
-
334
- .table {
335
- margin: 0;
336
- }
337
-
338
- ul.todo-list {
339
- list-style: none;
340
- margin: revert;
341
- color: revert;
342
- font-family: revert;
343
- margin-left: 2rem;
344
- }
345
-
346
- ul,
347
- ol {
348
- list-style: initial;
349
- margin-left: 2rem;
350
- }
351
-
352
- ol {
353
- list-style: decimal;
354
- }
355
-
356
- sub {
357
- vertical-align: sub;
358
- }
359
-
360
- sup {
361
- vertical-align: super;
362
- }
363
-
364
- .ck.ck-content.ck-editor__editable {
365
- line-height: initial;
366
- min-height: 12.5rem;
367
- border-bottom-left-radius: 0.25rem;
368
- border-bottom-right-radius: 0.25rem;
369
- transition-property: border-color, box-shadow, max-height;
370
- transition-timing-function: ease-in-out;
371
- transition-duration: 0.5s;
372
- &.ck-focused:not(.ck-editor__nested-editable) {
373
- border: 1px solid var(--ck-color-base-border);
374
- /* border: var(--ck-focus-ring); */
375
- box-shadow: none;
376
- transition-property: border-color, box-shadow, max-height;
377
- transition-timing-function: ease-in-out;
378
- transition-duration: 0.5s;
379
- }
380
- }
381
-
382
- .ck-focused,
383
- .ck-blurred {
384
- overflow-y: auto;
385
- overflow-x: hidden;
386
- transition: max-height 0.5s ease-in-out, min-height 0.5s ease-in-out !important;
387
- ::-webkit-scrollbar {
388
- width: 7px;
389
- }
390
- ::-webkit-scrollbar-track {
391
- background: var(--ck-scroll-track-background);
392
- border: none;
393
- }
394
- ::-webkit-scrollbar-thumb {
395
- transition: background 2s;
396
- background: var(--ck-scroll-thumb-background);
397
- border: 1px solid var(--ck-scroll-thumb-border-color);
398
- }
399
- ::-webkit-scrollbar-thumb:hover {
400
- transition: background 2s;
401
- background: var(--ck-scroll-thumb-hover-background);
402
- }
403
- ::-webkit-scrollbar-thumb:active {
404
- background: var(--ck-scroll-thumb-active-background);
405
- }
406
- }
407
- }
408
-
409
- .ck .ck-source-editing-area textarea {
410
- color: var(--ck-color-text);
411
- background-color: var(--ck-color-base-background);
412
- border: 1px solid var(--ck-color-base-border) !important;
413
- box-shadow: none !important;
414
- }
415
-
416
- .ck .ck-block-toolbar-button {
417
- min-width: 0 !important;
418
- min-height: 0 !important;
419
- width: 20px !important;
420
- height: 25px !important;
421
- margin-left: -2px !important ;
422
-
423
- & svg {
424
- color: var(--ck-color-text) !important;
425
- position: absolute;
426
- width: 20px;
427
- height: 20px;
428
- }
429
- }
430
-
431
- .ck-word-count {
432
- margin-top: 0.3rem;
433
- display: flex;
434
- justify-content: end;
435
- gap: 0.3rem;
436
- font-size: 1rem;
437
- font-weight: 500;
438
- text-transform: lowercase;
439
- /* color: #b3b3c4; */
440
- }
441
-
442
- .ck[dir='rtl'] {
443
- .ck-block-toolbar-button {
444
- margin-left: 2px !important ;
445
- }
446
- & + div {
447
- justify-content: flex-start;
448
- & > .ck-word-count {
449
- & > div:first-child {
450
- order: 2;
451
- }
452
- & > div:last-child {
453
- order: 1;
454
- }
455
- }
456
- }
457
- }
458
-
459
- .ck.ck-editor__editable > .ck-placeholder::before {
460
- color: var(--ck-color-editor-base-text);
461
- opacity: 0.65;
462
- }
463
- `;
464
- const light = css`
465
- :root {
466
- --ck-color-focus-outer-shadow: rgba(77, 115, 255, 0.2) !important;
467
- --ck-color-focus-disabled-shadow: #e4e3ff !important;
468
- --ck-focus-ring: 1px solid rgb(73, 69, 255) !important;
469
- --ck-color-button-default-hover-background: #f0f0ff !important;
470
- }
471
-
472
- .ck.ck-powered-by > a > svg > path:first-child {
473
- fill: #001234;
474
- }
475
-
476
- .ck {
477
- --ck-scroll-track-background: rgb(242, 242, 242);
478
- --ck-scroll-thumb-background: rgb(236, 236, 236);
479
- --ck-scroll-thumb-border-color: #cdcdf8;
480
- --ck-scroll-thumb-hover-background: #f0f0ff;
481
- --ck-scroll-thumb-active-background: #d9d8ff;
482
-
483
- --ck-color-editor-base-text: #001234;
484
- /* Overrides the border radius setting in the theme. */
485
- --ck-border-radius: 4px;
486
-
487
- /* Helper variables to avoid duplication in the colors. */
488
- --ck-color-base-border: #dcdce4;
489
- --ck-color-base-background: #ffffff;
490
- --ck-custom-background: #ffffff;
491
- --ck-custom-foreground: #dedede;
492
- --ck-custom-border: #dcdce4;
493
- --ck-custom-white: hsl(0, 0%, 100%);
494
-
495
- --ck-color-base-focus: #bbbaf1;
496
- --ck-color-base-active: #f0f0ff;
497
- --ck-color-base-active-focus: #e2e2fd;
498
-
499
- /* -- Overrides generic colors. ----------------------------------------- */
500
-
501
- --ck-color-base-foreground: var(--ck-custom-background);
502
-
503
- --ck-color-focus-border: rgb(73, 69, 255);
504
-
505
- --ck-color-text: #32324d;
506
- --ck-color-shadow-drop: hsla(250, 31%, 80%, 0.1);
507
- --ck-color-shadow-inner: hsla(250, 31%, 80%, 0.1);
508
-
509
- /* -- Overrides the default .ck-button class colors. -------------------- */
510
-
511
- --ck-color-button-default-background: var(--ck-custom-background);
512
- --ck-color-button-default-hover-background: #f0f0ff;
513
- --ck-color-button-default-active-background: #f6f6f9;
514
- --ck-color-button-default-active-shadow: #dedefb;
515
- --ck-color-button-default-disabled-background: var(--ck-custom-background);
516
-
517
- --ck-color-button-on-color: rgb(73, 69, 255);
518
- --ck-color-button-on-background: #f0f0ff;
519
- --ck-color-button-on-hover-background: #e6e9fc;
520
- --ck-color-button-on-active-background: #f6f6f9;
521
- --ck-color-button-on-active-shadow: #cdcdf8;
522
- --ck-color-button-on-disabled-background: var(--ck-custom-foreground);
523
-
524
- --ck-color-button-action-background: hsl(168, 76%, 42%);
525
- --ck-color-button-action-hover-background: hsl(168, 76%, 38%);
526
- --ck-color-button-action-active-background: hsl(168, 76%, 36%);
527
- --ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
528
- --ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
529
- --ck-color-button-action-text: var(--ck-custom-white);
530
-
531
- --ck-color-button-save: hsl(120, 100%, 46%);
532
- --ck-color-button-cancel: hsl(15, 100%, 56%);
533
-
534
- /* -- Overrides the default .ck-dropdown class colors. ------------------ */
535
-
536
- --ck-color-dropdown-panel-background: var(--ck-custom-background);
537
- --ck-color-dropdown-panel-border: var(--ck-custom-foreground);
538
-
539
- /* -- Overrides the default .ck-splitbutton class colors. --------------- */
540
-
541
- --ck-color-split-button-hover-background: var(
542
- --ck-color-button-default-hover-background
543
- );
544
- --ck-color-split-button-hover-border: var(--ck-custom-foreground);
545
-
546
- /* -- Overrides the default .ck-input class colors. --------------------- */
547
-
548
- --ck-color-input-background: var(--ck-custom-background);
549
- --ck-color-input-border: hsl(257, 3%, 43%);
550
- --ck-color-input-text: hsl(0, 0%, 98%);
551
- --ck-color-input-disabled-background: hsl(0, 0%, 97%);
552
- --ck-color-input-disabled-border: rgb(214, 214, 214);
553
- --ck-color-input-disabled-text: hsl(0, 0%, 78%);
554
-
555
- /* -- Overrides the default .ck-labeled-field-view class colors. -------- */
556
-
557
- --ck-color-labeled-field-label-background: var(--ck-custom-background);
558
-
559
- /* -- Overrides the default .ck-list class colors. ---------------------- */
560
-
561
- --ck-color-list-background: var(--ck-custom-background);
562
- --ck-color-list-button-hover-background: #f4f4fb;
563
- --ck-color-list-button-on-background: var(--ck-color-base-active);
564
- --ck-color-list-button-on-background-focus: var(
565
- --ck-color-base-active-focus
566
- );
567
- --ck-color-list-button-on-text: #271fe2;
568
-
569
- /* -- Overrides the default .ck-balloon-panel class colors. ------------- */
570
-
571
- --ck-color-panel-background: var(--ck-custom-background);
572
- --ck-color-panel-border: var(--ck-custom-border);
573
-
574
- /* -- Overrides the default .ck-toolbar class colors. ------------------- */
575
-
576
- --ck-color-toolbar-background: var(--ck-custom-background);
577
- --ck-color-toolbar-border: var(--ck-custom-border);
578
-
579
- /* -- Overrides the default .ck-tooltip class colors. ------------------- */
580
-
581
- --ck-color-tooltip-background: #3a3955;
582
- --ck-color-tooltip-text: hsl(0, 0%, 93%);
583
-
584
- /* -- Overrides the default colors used by the ckeditor5-image package. - */
585
-
586
- --ck-color-image-caption-background: hsl(0, 0%, 97%);
587
- --ck-color-image-caption-text: hsl(0, 0%, 20%);
588
-
589
- /* -- Overrides the default colors used by the ckeditor5-widget package. */
590
-
591
- --ck-color-widget-blurred-border: #cfcffa;
592
- --ck-color-widget-hover-border: #c9c9e4;
593
- --ck-color-widget-editable-focus-background: var(--ck-custom-white);
594
-
595
- /* -- Overrides the default colors used by the ckeditor5-link package. -- */
596
-
597
- --ck-color-link-default: hsl(209, 89%, 33%);
598
-
599
- --ck-powered-by-background: transparrent;
600
- --ck-powered-by-border-color: var(--ck-color-base-background);
601
-
602
- --ck-color-dialog-background: var(--ck-custom-background);
603
- --ck-color-dialog-form-header-border: var(--ck-color-base-border);
604
- }
605
- `;
606
- const dark = css`
607
- :root {
608
- --ck-color-focus-outer-shadow: rgba(77, 115, 255, 0.2) !important;
609
- --ck-color-focus-disabled-shadow: rgba(106, 114, 143, 0.4) !important;
610
- --ck-focus-ring: 1px solid #4945ff !important;
611
- --ck-color-button-default-hover-background: #262630 !important;
612
- }
613
-
614
- .ck.ck-powered-by > a > svg > path:first-child {
615
- fill: rgb(236, 236, 236);
616
- }
617
-
618
- .ck.ck-powered-by > a > svg > path:nth-child(3) {
619
- fill: rgb(172, 156, 251);
620
- }
621
-
622
- .ck {
623
- --ck-scroll-track-background: #3d3d57;
624
- --ck-scroll-thumb-background: #181826;
625
- --ck-scroll-thumb-border-color: rgb(70, 70, 70);
626
- --ck-scroll-thumb-hover-background: #202033;
627
- --ck-scroll-thumb-active-background: #2b2b45;
628
-
629
- --ck-color-editor-base-text: rgb(236, 236, 236);
630
- /* Overrides the border radius setting in the theme. */
631
- --ck-border-radius: 4px;
632
-
633
- /* Helper variables to avoid duplication in the colors. */
634
- --ck-color-base-border: #4a4a6a;
635
- --ck-color-base-background: #212134;
636
- --ck-custom-background: #181826;
637
- --ck-custom-foreground: #26263b;
638
- --ck-custom-border: #4a4a6a;
639
- --ck-custom-white: hsl(0, 0%, 100%);
640
-
641
- --ck-color-focus-outer-shadow: #212134;
642
-
643
- --ck-color-base-focus: #bbbaf1;
644
- --ck-color-base-active: #2e2e5c;
645
- --ck-color-base-active-focus: #28284d;
646
-
647
- /* -- Overrides generic colors. ----------------------------------------- */
648
-
649
- --ck-color-base-foreground: var(--ck-custom-background);
650
- --ck-color-focus-border: #6765bd;
651
- --ck-color-text: hsl(0, 0%, 93%);
652
- --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
653
- --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
654
-
655
- /* -- Overrides the default .ck-button class colors. -------------------- */
656
-
657
- --ck-color-button-default-background: rgb(33, 33, 52);
658
-
659
- --ck-color-button-default-hover-background: #262630;
660
- --ck-color-button-default-active-background: #3c3c47;
661
- --ck-color-button-default-active-shadow: #3c3c47;
662
- --ck-color-button-default-disabled-background: var(--ck-custom-background);
663
-
664
- --ck-color-button-on-color: #7b79ff;
665
- --ck-color-button-on-background: #2b2b36;
666
- --ck-color-button-on-hover-background: #30303b;
667
- --ck-color-button-on-active-background: #3c3c47;
668
- --ck-color-button-on-active-shadow: #3c3c47;
669
- --ck-color-button-on-disabled-background: var(--ck-custom-foreground);
670
-
671
- --ck-color-button-action-background: hsl(168, 76%, 42%);
672
- --ck-color-button-action-hover-background: hsl(168, 76%, 38%);
673
- --ck-color-button-action-active-background: hsl(168, 76%, 36%);
674
- --ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
675
- --ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
676
- --ck-color-button-action-text: var(--ck-custom-white);
677
-
678
- --ck-color-button-save: hsl(120, 100%, 46%);
679
- --ck-color-button-cancel: hsl(15, 100%, 56%);
680
-
681
- /* -- Overrides the default .ck-dropdown class colors. ------------------ */
682
-
683
- --ck-color-dropdown-panel-background: var(--ck-custom-background);
684
- --ck-color-dropdown-panel-border: var(--ck-custom-foreground);
685
-
686
- /* -- Overrides the default .ck-splitbutton class colors. --------------- */
687
-
688
- --ck-color-split-button-hover-background: var(
689
- --ck-color-button-default-hover-background
690
- );
691
- --ck-color-split-button-hover-border: var(--ck-custom-foreground);
692
-
693
- /* -- Overrides the default .ck-input class colors. --------------------- */
694
-
695
- --ck-color-input-background: var(--ck-custom-background);
696
- --ck-color-input-border: hsl(257, 3%, 43%);
697
- --ck-color-input-text: hsl(0, 0%, 98%);
698
- --ck-color-input-disabled-background: hsl(255, 4%, 21%);
699
- --ck-color-input-disabled-border: hsl(250, 3%, 38%);
700
- --ck-color-input-disabled-text: hsl(0, 0%, 78%);
701
-
702
- /* -- Overrides the default .ck-labeled-field-view class colors. ---------*/
703
-
704
- --ck-color-labeled-field-label-background: var(--ck-custom-background);
705
-
706
- /* -- Overrides the default .ck-list class colors. ---------------------- */
707
-
708
- --ck-color-list-background: var(--ck-custom-background);
709
- --ck-color-list-button-hover-background: #121221;
710
- --ck-color-list-button-on-background: var(--ck-color-base-active);
711
- --ck-color-list-button-on-background-focus: var(
712
- --ck-color-base-active-focus
713
- );
714
- --ck-color-list-button-on-text: #ffffff;
715
-
716
- /* -- Overrides the default .ck-balloon-panel class colors. ------------- */
717
-
718
- --ck-color-panel-background: var(--ck-custom-background);
719
- --ck-color-panel-border: var(--ck-custom-border);
720
-
721
- /* -- Overrides the default .ck-toolbar class colors. ------------------- */
722
-
723
- --ck-color-toolbar-background: var(--ck-custom-background);
724
- --ck-color-toolbar-border: var(--ck-custom-border);
725
-
726
- /* -- Overrides the default .ck-tooltip class colors. ------------------- */
727
-
728
- --ck-color-tooltip-background: #3a3955;
729
- --ck-color-tooltip-text: hsl(0, 0%, 93%);
730
-
731
- /* -- Overrides the default colors used by the ckeditor5-image package. - */
732
-
733
- --ck-color-image-caption-background: hsl(0, 0%, 97%);
734
- --ck-color-image-caption-text: hsl(0, 0%, 20%);
735
-
736
- /* -- Overrides the default colors used by the ckeditor5-widget package. */
737
-
738
- --ck-color-widget-blurred-border: #7c7c96;
739
- --ck-color-widget-hover-border: #666687;
740
- --ck-color-widget-editable-focus-background: var(--ck-custom-white);
741
-
742
- /* -- Overrides the default colors used by the ckeditor5-link package. -- */
743
-
744
- --ck-color-link-default: hsl(216, 100%, 75%);
745
-
746
- --ck-powered-by-background: transparrent;
747
- --ck-powered-by-border-color: var(--ck-color-base-background);
748
-
749
- --ck-color-dialog-background: var(--ck-custom-background);
750
- --ck-color-dialog-form-header-border: var(--ck-color-base-border);
751
- }
752
- `;
753
- const additional = css`
754
- /* --- expanding --- */
755
-
756
- .ck.ck-editor__main .ck-blurred {
757
- max-height: 200px !important;
758
- }
759
- .ck.ck-editor__main .ck-focused {
760
- min-height: 200px !important;
761
- max-height: 700px !important;
762
- }
763
-
764
- /* --- color-grid --- */
765
-
766
- .ck.ck-color-ui-dropdown {
767
- --ck-color-grid-tile-size: 22px !important;
768
- }
769
- .ck.ck-color-grid__tile {
770
- width: auto;
771
- }
772
- .ck.ck-color-ui-dropdown .ck-color-grid {
773
- grid-gap: 2px;
774
- }
775
- .ck.ck-color-ui-dropdown .ck-color-grid .ck-button {
776
- border-radius: 2px;
777
- }
778
- .ck.ck-color-ui-dropdown
779
- .ck.ck-color-grid
780
- .ck-color-grid__tile:hover:not(.ck-disabled),
781
- .ck.ck-color-ui-dropdown
782
- .ck.ck-color-grid
783
- .ck-color-grid__tile:focus:not(.ck-disabled) {
784
- z-index: 1;
785
- transform: scale(1.1);
786
- border-radius: 2px;
787
- }
788
-
789
- /* ---- Styles feature ------------------------------------------------------ */
790
-
791
- :root {
792
- --ck-georgia-serif-font-stack: Georgia, Times, Times New Roman, serif;
793
- }
794
-
795
- .ck-content h1.document-title {
796
- font-family: var(--ck-georgia-serif-font-stack);
797
- font-size: 50px;
798
- font-weight: bold;
799
- border: 0;
800
- }
801
-
802
- .ck-content h2.document-subtitle {
803
- font-family: var(--ck-georgia-serif-font-stack);
804
- font-size: 20px;
805
- font-weight: bold;
806
- color: #d1d1d1;
807
- letter-spacing: 10px;
808
- }
809
-
810
- .ck-content p.callout {
811
- --border-color: #e91e1e;
812
- padding: 1.2em 2em;
813
- border: 1px solid var(--border-color);
814
- border-left: 10px solid var(--border-color);
815
- background: #fff9fb;
816
- border-radius: 5px;
817
- margin: 1.5em 2em;
818
- box-shadow: 5px 5px 0 #ffe6ef;
819
- }
820
-
821
- .ck-content blockquote.side-quote {
822
- font-family: var(--ck-georgia-serif-font-stack);
823
- font-style: normal;
824
- float: right;
825
- width: 35%;
826
- position: relative;
827
- border: 0;
828
- overflow: visible;
829
- z-index: 1;
830
- margin-left: 1em;
831
- }
832
-
833
- .ck-content blockquote.side-quote::before {
834
- content: '“';
835
- position: absolute;
836
- top: -37px;
837
- left: -10px;
838
- display: block;
839
- font-size: 200px;
840
- color: #e7e7e7;
841
- z-index: -1;
842
- line-height: 1;
843
- }
844
-
845
- .ck-content blockquote.side-quote p {
846
- font-size: 2em;
847
- line-height: 1;
848
- }
849
-
850
- .ck-content blockquote.side-quote p:last-child:not(:first-child) {
851
- font-size: 1.3em;
852
- text-align: right;
853
- color: #555;
854
- }
855
-
856
- .ck-content span.needs-clarification {
857
- outline: 1px dashed #c8a24b;
858
- background: #ffe19c;
859
- border-radius: 2px;
860
- position: relative;
861
- }
862
-
863
- .ck-content span.needs-clarification::after {
864
- content: '?';
865
- display: inline-block;
866
- color: #fff;
867
- background: #3b3b3b;
868
- font-size: 12px;
869
- vertical-align: super;
870
- width: 12px;
871
- height: 12px;
872
- line-height: 12px;
873
- border-radius: 10px;
874
- text-align: center;
875
- position: absolute;
876
- right: -6px;
877
- top: -6px;
878
- font-weight: bold;
879
- letter-spacing: initial;
880
- }
881
-
882
- .ck-content span.wide-spacing {
883
- letter-spacing: 0.3em;
884
- }
885
-
886
- .ck-content span.small-caps {
887
- font-variant: small-caps;
888
- }
889
-
890
- .ck-content span.spoiler {
891
- background: #000;
892
- color: #000;
893
- }
894
-
895
- .ck-content span.spoiler:hover {
896
- background: #000;
897
- color: #fff;
898
- }
899
-
900
- .ck-content pre.stylish-code {
901
- border-color: transparent;
902
- margin-left: 2em;
903
- margin-right: 2em;
904
- border-radius: 10px;
905
- }
906
-
907
- .ck-content pre.stylish-code::before {
908
- content: '';
909
- display: block;
910
- height: 13px;
911
- background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
912
- margin-bottom: 8px;
913
- background-repeat: no-repeat;
914
- }
915
-
916
- .ck-content pre.stylish-code-dark,
917
- .ck-content pre.stylish-code-bright {
918
- padding: 1em;
919
- }
920
-
921
- .ck-content pre.stylish-code-dark {
922
- background: #272822;
923
- box-shadow: 5px 5px 0 #0000001f;
924
- color: white;
925
- }
926
-
927
- .ck-content pre.stylish-code-dark code {
928
- color: white;
929
- }
930
-
931
- .ck-content pre.stylish-code-bright {
932
- background: #dddfe0;
933
- color: #000;
934
- box-shadow: 5px 5px 0 #b3b3b3;
935
- }
936
-
937
- .ck-content pre.stylish-code-bright code {
938
- color: #222;
939
- }
940
- `;
941
- const baseTheme = {
942
- common,
943
- light,
944
- dark,
945
- additional
946
- };
947
- const GlobalStyle = createGlobalStyle`
948
- ${({ theme }) => theme.common}
949
- ${({ theme, variant }) => theme[variant]}
950
- ${({ theme }) => theme.additional}
951
- `;
952
- const getSystemColorScheme = () => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
953
- const GlobalStyling = () => {
954
- const { theme: userTheme, dontMergeTheme } = globalThis.SH_CKE_CONFIG || {};
955
- const profileTheme = getProfileTheme();
956
- const variant = profileTheme && profileTheme !== "system" ? profileTheme : getSystemColorScheme();
957
- const theme = dontMergeTheme ? userTheme : { ...baseTheme, ...userTheme };
958
- return /* @__PURE__ */ jsx(GlobalStyle, { theme, variant });
959
- };
960
- const MemoizedGlobalStyling = React.memo(GlobalStyling);
961
- const Wrapper = styled("div")`
962
- ${({ styles }) => styles}
963
- `;
964
- const Editor = ({
965
- name,
966
- disabled,
967
- presetName,
968
- maxLength,
969
- placeholder
970
- }) => {
971
- const { onChange, value } = useField(name);
972
- const [editorInstance, setEditorInstance] = useState(false);
973
- const [mediaLibVisible, setMediaLibVisible] = useState(false);
974
- const [preset, setPreset] = useState(null);
975
- const [lengthMax, setLengthMax] = useState(false);
976
- const wordCounter = useRef(null);
977
- const handleToggleMediaLib = () => setMediaLibVisible((prev) => !prev);
978
- const handleCounter = (number) => number > maxLength ? setLengthMax(true) : setLengthMax(false);
979
- useEffect(() => {
980
- (async () => {
981
- const currentPreset = await getConfiguredPreset(presetName, {
982
- toggleMediaLib: handleToggleMediaLib,
983
- strapiFieldPlaceholder: placeholder
984
- });
985
- setPreset(currentPreset);
986
- })();
987
- }, []);
988
- return /* @__PURE__ */ jsxs(Fragment, { children: [
989
- preset && /* @__PURE__ */ jsx(MemoizedGlobalStyling, {}),
990
- /* @__PURE__ */ jsxs(Wrapper, { styles: preset?.styles, children: [
991
- !preset && /* @__PURE__ */ jsx(LoaderBox, { hasRadius: true, background: "neutral100", children: /* @__PURE__ */ jsx(Loader, { children: "Loading..." }) }),
992
- preset && /* @__PURE__ */ jsxs(Fragment, { children: [
993
- "sdas",
994
- /* @__PURE__ */ jsx(
995
- CKEditor,
996
- {
997
- editor: ClassicEditor,
998
- config: preset.editorConfig,
999
- disabled,
1000
- data: value ?? "",
1001
- onReady: (editor) => {
1002
- if (preset.editorConfig.WordCountPlugin) {
1003
- const wordCountPlugin = editor.plugins.get("WordCount");
1004
- wordCountPlugin.on(
1005
- "update",
1006
- (evt, stats) => handleCounter(stats.characters)
1007
- );
1008
- const wordCountWrapper = wordCounter.current;
1009
- wordCountWrapper?.appendChild(
1010
- wordCountPlugin.wordCountContainer
1011
- );
1012
- }
1013
- if (editor.plugins.has("ImageUploadEditing")) {
1014
- editor.plugins.get("ImageUploadEditing").on(
1015
- "uploadComplete",
1016
- (evt, { data, imageElement }) => editor.model.change(
1017
- (writer) => writer.setAttribute("alt", data.alt, imageElement)
1018
- )
1019
- );
1020
- }
1021
- setEditorInstance(editor);
1022
- },
1023
- onChange: (event, editor) => {
1024
- const data = editor.getData();
1025
- onChange({ target: { name, value: data } });
1026
- }
1027
- }
1028
- ),
1029
- /* @__PURE__ */ jsx(
1030
- MediaLib,
1031
- {
1032
- isOpen: mediaLibVisible,
1033
- onToggle: handleToggleMediaLib,
1034
- editor: editorInstance
1035
- }
1036
- ),
1037
- preset.editorConfig.WordCountPlugin && /* @__PURE__ */ jsx(
1038
- CounterLoaderBox,
1039
- {
1040
- color: lengthMax ? "danger500" : "neutral400",
1041
- ref: wordCounter,
1042
- children: !editorInstance && /* @__PURE__ */ jsx(Loader, { small: true, children: "Loading..." })
1043
- }
1044
- )
1045
- ] })
1046
- ] })
1047
- ] });
1048
- };
1049
- Editor.propTypes = {
1050
- name: PropTypes.string.isRequired,
1051
- disabled: PropTypes.bool,
1052
- presetName: PropTypes.string.isRequired,
1053
- maxLength: PropTypes.number,
1054
- placeholder: PropTypes.string
1055
- };
1056
- const CounterLoaderBox = styled(Box)`
1057
- display: flex;
1058
- width: 100%;
1059
- justify-content: flex-end;
1060
- align-items: center;
1061
- `;
1062
- const LoaderBox = styled(Box)`
1063
- display: flex;
1064
- height: 200px;
1065
- width: 100%;
1066
- justify-content: center;
1067
- align-items: center;
1068
- `;
1069
- const Input = ({
1070
- name,
1071
- attribute,
1072
- value = "",
1073
- labelAction = null,
1074
- label,
1075
- disabled = false,
1076
- error = null,
1077
- required = false,
1078
- hint = "",
1079
- placeholder
1080
- }) => {
1081
- const { preset, maxLengthCharacters, ...options } = attribute.options;
1082
- return /* @__PURE__ */ jsx(
1083
- Field.Root,
1084
- {
1085
- name,
1086
- id: name,
1087
- error,
1088
- hint,
1089
- required,
1090
- children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
1091
- /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
1092
- /* @__PURE__ */ jsx(
1093
- Editor,
1094
- {
1095
- disabled,
1096
- name,
1097
- value,
1098
- presetName: preset,
1099
- maxLength: maxLengthCharacters,
1100
- placeholder
1101
- }
1102
- ),
1103
- /* @__PURE__ */ jsx(Field.Hint, {}),
1104
- /* @__PURE__ */ jsx(Field.Error, {})
1105
- ] })
1106
- }
1107
- );
1108
- };
1109
- Input.propTypes = {
1110
- name: PropTypes.string.isRequired,
1111
- attribute: PropTypes.object.isRequired,
1112
- value: PropTypes.string,
1113
- labelAction: PropTypes.object,
1114
- label: PropTypes.string,
1115
- disabled: PropTypes.bool,
1116
- error: PropTypes.string,
1117
- required: PropTypes.bool,
1118
- hint: PropTypes.string,
1119
- placeholder: PropTypes.string
1120
- };
1121
- const MemoizedInput = React.memo(Input);
1122
- export {
1123
- MemoizedInput as default
1124
- };
1125
- //# sourceMappingURL=index-5LGZsCS3.mjs.map