@_sh/strapi-plugin-ckeditor 4.0.1 → 4.0.3

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