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