@_sh/strapi-plugin-ckeditor 3.0.1 → 4.0.0

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