@_sh/strapi-plugin-ckeditor 4.0.5 → 4.0.7

package/dist/_chunks/index-Dov2jT-v.mjs

@@ -0,0 +1,1128 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Box, Loader, Field, Flex } from "@strapi/design-system";
+import styled, { css, createGlobalStyle } from "styled-components";
+import { CKEditor } from "@ckeditor/ckeditor5-react";
+import { ClassicEditor } from "ckeditor5";
+import { useStrapiApp, useField } from "@strapi/strapi/admin";
+import "ckeditor5/ckeditor5.css";
+import { b as basePresets } from "./index-CR_x4n2j.mjs";
+const prefixFileUrlWithBackendUrl = (fileURL) => {
+  return !!fileURL && fileURL.startsWith("/") ? `${window.strapi.backendURL}${fileURL}` : fileURL;
+};
+const MediaLib = ({ isOpen = false, onToggle = () => {
+}, editor }) => {
+  const components = useStrapiApp("MediaLib", ({ components: components2 }) => components2);
+  const MediaLibraryDialog = components["media-library"];
+  const handleChangeAssets = (assets) => {
+    let newValue = "";
+    assets.map(({ name, url, alt, formats, mime, width, height }) => {
+      if (mime.includes("image")) {
+        if (formats && globalThis.SH_CKE_UPLOAD_ADAPTER_IS_RESPONSIVE) {
+          let set = "";
+          let keys = Object.keys(formats).sort((a, b) => formats[a].width - formats[b].width);
+          keys.map((k) => set += prefixFileUrlWithBackendUrl(formats[k].url) + ` ${formats[k].width}w,`);
+          newValue = `<img src="${url}" alt="${alt}" width="${width}" height="${height}" srcset="${set}" />`;
+        } else {
+          newValue = `<img src="${url}" alt="${alt}" width="${width}" height="${height}" />`;
+        }
+      } else if (mime.includes("video")) {
+        newValue = `
+            <video class="video" controls width="500px">
+                <source src="${url}" type="${mime}" />
+            </video>`;
+      } else {
+        newValue = `<a href="${url}">${name || "Open document"}</a>`;
+      }
+    });
+    const viewFragment = editor.data.processor.toView(newValue);
+    const modelFragment = editor.data.toModel(viewFragment);
+    editor.model.insertContent(modelFragment);
+    onToggle();
+  };
+  const handleSelectAssets = (files) => {
+    const formattedFiles = files.map((f) => ({
+      name: f.name,
+      alt: f.alternativeText || f.name,
+      url: prefixFileUrlWithBackendUrl(f.url),
+      mime: f.mime,
+      formats: f.formats,
+      width: f.width,
+      height: f.height
+    }));
+    handleChangeAssets(formattedFiles);
+  };
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    MediaLibraryDialog,
+    {
+      onClose: onToggle,
+      onSelectAssets: handleSelectAssets
+    }
+  );
+};
+MediaLib.propTypes = {
+  isOpen: PropTypes.bool,
+  onToggle: PropTypes.func
+};
+const STORAGE_KEYS = {
+  TOKEN: "jwtToken",
+  PREFERED_LANGUAGE: "strapi-admin-language",
+  PROFILE_THEME: "STRAPI_THEME"
+};
+const getStoredToken = () => {
+  const token = localStorage.getItem(STORAGE_KEYS.TOKEN) ?? sessionStorage.getItem(STORAGE_KEYS.TOKEN);
+  if (typeof token === "string") {
+    return JSON.parse(token);
+  }
+  return null;
+};
+const getPreferedLanguage = () => {
+  const language = localStorage.getItem(STORAGE_KEYS.PREFERED_LANGUAGE)?.replace(/^"|"$/g, "") || "en";
+  return language;
+};
+const getProfileTheme = () => {
+  const theme = localStorage.getItem(STORAGE_KEYS.PROFILE_THEME);
+  return theme;
+};
+const setPlugins = (config, toggleMediaLib) => {
+  const token = getStoredToken();
+  const presetPluginNames = config?.plugins ? [...config.plugins.map((p) => p.pluginName)] : [];
+  if (presetPluginNames.includes("StrapiMediaLib")) {
+    config.strapiMediaLib = { toggle: toggleMediaLib };
+  }
+  if (presetPluginNames.includes("StrapiUploadAdapter")) {
+    config.strapiUploadAdapter = {
+      uploadUrl: `${strapi.backendURL}/upload`,
+      headers: { Authorization: "Bearer " + token },
+      backendUrl: strapi.backendURL,
+      responsive: globalThis.SH_CKE_UPLOAD_ADAPTER_IS_RESPONSIVE
+    };
+  }
+  if (presetPluginNames.includes("WordCount")) {
+    config.WordCountPlugin = true;
+  }
+};
+const translationImports = {
+  af: () => import("ckeditor5/translations/af.js"),
+  ar: () => import("ckeditor5/translations/ar.js"),
+  ast: () => import("ckeditor5/translations/ast.js"),
+  az: () => import("ckeditor5/translations/az.js"),
+  bg: () => import("ckeditor5/translations/bg.js"),
+  bn: () => import("ckeditor5/translations/bn.js"),
+  bs: () => import("ckeditor5/translations/bs.js"),
+  ca: () => import("ckeditor5/translations/ca.js"),
+  cs: () => import("ckeditor5/translations/cs.js"),
+  da: () => import("ckeditor5/translations/da.js"),
+  "de-ch": () => import("ckeditor5/translations/de-ch.js"),
+  de: () => import("ckeditor5/translations/de.js"),
+  el: () => import("ckeditor5/translations/el.js"),
+  "en-au": () => import("ckeditor5/translations/en-au.js"),
+  "en-gb": () => import("ckeditor5/translations/en-gb.js"),
+  en: () => import("ckeditor5/translations/en.js"),
+  eo: () => import("ckeditor5/translations/eo.js"),
+  "es-co": () => import("ckeditor5/translations/es-co.js"),
+  es: () => import("ckeditor5/translations/es.js"),
+  et: () => import("ckeditor5/translations/et.js"),
+  eu: () => import("ckeditor5/translations/eu.js"),
+  fa: () => import("ckeditor5/translations/fa.js"),
+  fi: () => import("ckeditor5/translations/fi.js"),
+  fr: () => import("ckeditor5/translations/fr.js"),
+  gl: () => import("ckeditor5/translations/gl.js"),
+  gu: () => import("ckeditor5/translations/gu.js"),
+  he: () => import("ckeditor5/translations/he.js"),
+  hi: () => import("ckeditor5/translations/hi.js"),
+  hr: () => import("ckeditor5/translations/hr.js"),
+  hu: () => import("ckeditor5/translations/hu.js"),
+  hy: () => import("ckeditor5/translations/hy.js"),
+  id: () => import("ckeditor5/translations/id.js"),
+  it: () => import("ckeditor5/translations/it.js"),
+  ja: () => import("ckeditor5/translations/ja.js"),
+  jv: () => import("ckeditor5/translations/jv.js"),
+  kk: () => import("ckeditor5/translations/kk.js"),
+  km: () => import("ckeditor5/translations/km.js"),
+  kn: () => import("ckeditor5/translations/kn.js"),
+  ko: () => import("ckeditor5/translations/ko.js"),
+  ku: () => import("ckeditor5/translations/ku.js"),
+  lt: () => import("ckeditor5/translations/lt.js"),
+  lv: () => import("ckeditor5/translations/lv.js"),
+  ms: () => import("ckeditor5/translations/ms.js"),
+  nb: () => import("ckeditor5/translations/nb.js"),
+  ne: () => import("ckeditor5/translations/ne.js"),
+  nl: () => import("ckeditor5/translations/nl.js"),
+  no: () => import("ckeditor5/translations/no.js"),
+  oc: () => import("ckeditor5/translations/oc.js"),
+  pl: () => import("ckeditor5/translations/pl.js"),
+  "pt-br": () => import("ckeditor5/translations/pt-br.js"),
+  pt: () => import("ckeditor5/translations/pt.js"),
+  ro: () => import("ckeditor5/translations/ro.js"),
+  ru: () => import("ckeditor5/translations/ru.js"),
+  si: () => import("ckeditor5/translations/si.js"),
+  sk: () => import("ckeditor5/translations/sk.js"),
+  sl: () => import("ckeditor5/translations/sl.js"),
+  sq: () => import("ckeditor5/translations/sq.js"),
+  sr: () => import("ckeditor5/translations/sr.js"),
+  "sr-latn": () => import("ckeditor5/translations/sr-latn.js"),
+  sv: () => import("ckeditor5/translations/sv.js"),
+  th: () => import("ckeditor5/translations/th.js"),
+  ti: () => import("ckeditor5/translations/ti.js"),
+  tk: () => import("ckeditor5/translations/tk.js"),
+  tr: () => import("ckeditor5/translations/tr.js"),
+  tt: () => import("ckeditor5/translations/tt.js"),
+  ug: () => import("ckeditor5/translations/ug.js"),
+  uk: () => import("ckeditor5/translations/uk.js"),
+  ur: () => import("ckeditor5/translations/ur.js"),
+  uz: () => import("ckeditor5/translations/uz.js"),
+  vi: () => import("ckeditor5/translations/vi.js"),
+  "zh-cn": () => import("ckeditor5/translations/zh-cn.js"),
+  zh: () => import("ckeditor5/translations/zh.js")
+};
+const importLang = async (config, language) => {
+  if (translationImports[language]) {
+    const translations = await translationImports[language]();
+    config.translations = translations.default;
+  } else {
+    console.error(`No translation found for language: ${language}`);
+  }
+};
+const detecti18n = () => {
+  const urlSearchParams = new URLSearchParams(window.location.search);
+  const params = Object.fromEntries(urlSearchParams.entries());
+  const i18n = params["plugins[i18n][locale]"];
+  return i18n && i18n.split("-")[0];
+};
+const setLanguage = async (config) => {
+  const i18nLang = detecti18n();
+  const preferedLanguage = getPreferedLanguage();
+  const {
+    ui = config.language && typeof config.language === "string" ? config.language : preferedLanguage,
+    textPartLanguage,
+    ignorei18n
+  } = config.language || {};
+  if (i18nLang && !ignorei18n) {
+    config.language = {
+      ui,
+      content: i18nLang,
+      textPartLanguage
+    };
+  }
+  if (ui !== "en") {
+    await importLang(config, ui);
+  }
+};
+const getConfiguredPreset = async (presetName, toggleMediaLib) => {
+  const { presets: userPresets, dontMergePresets } = globalThis.SH_CKE_CONFIG || {};
+  const preset = dontMergePresets ? userPresets[presetName] : basePresets[presetName];
+  setPlugins(preset.editorConfig, toggleMediaLib);
+  await setLanguage(preset.editorConfig);
+  return preset;
+};
+const common = css`
+  .ck {
+    --ck-color-image-caption-background: hsl(0, 0%, 97%);
+    --ck-color-image-caption-text: hsl(0, 0%, 20%);
+    --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
+    --ck-color-mention-text: hsl(341, 100%, 30%);
+    --ck-color-table-caption-background: hsl(0, 0%, 97%);
+    --ck-color-table-caption-text: hsl(0, 0%, 20%);
+    --ck-highlight-marker-blue: hsl(201, 97%, 72%);
+    --ck-highlight-marker-green: hsl(120, 93%, 68%);
+    --ck-highlight-marker-pink: hsl(345, 96%, 73%);
+    --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
+    --ck-highlight-pen-green: hsl(112, 100%, 27%);
+    --ck-highlight-pen-red: hsl(0, 85%, 49%);
+    --ck-image-style-spacing: 1.5em;
+    --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
+    --ck-todo-list-checkmark-size: 16px;
+    font-size: 14px;
+  }
+
+  .ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
+    top: 64px !important;
+  }
+  .ck.ck-reset.ck-dropdown__panel.ck-dropdown__panel_sw.ck-dropdown__panel-visible {
+    border-radius: 4px;
+  }
+
+  .ck-editor__main {
+    --ck-font-face: 'Source Sans Pro', system-ui, Roboto, 'Helvetica Neue',
+      'Helvetica', Arial, sans-serif;
+
+    color: var(--ck-color-editor-base-text);
+    font-family: var(--ck-font-face);
+
+    * {
+      font: revert;
+      margin: revert;
+    }
+
+    h1 {
+      font-size: 2.3em;
+    }
+
+    h2 {
+      font-size: 1.84em;
+    }
+
+    h3 {
+      font-size: 1.48em;
+    }
+
+    h4 {
+      font-size: 1.22em;
+    }
+
+    h5 {
+      font-size: 1.06em;
+    }
+
+    h6 {
+      font-size: 1em;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      line-height: 1.2em;
+      padding-top: 0.8em;
+      margin-bottom: 0.4em;
+    }
+
+    blockquote,
+    ol,
+    p,
+    ul {
+      font-size: 1em;
+      line-height: 1.6em;
+      padding-top: 0.2em;
+      margin-bottom: var(--ck-spacing-large);
+    }
+
+    figcaption {
+      background-color: var(--ck-color-image-caption-background);
+      caption-side: bottom;
+      color: var(--ck-color-image-caption-text);
+      display: table-caption;
+      font-size: 0.75em;
+      outline-offset: -1px;
+      padding: 0.6em;
+      word-break: break-word;
+    }
+
+    a {
+      text-decoration: none;
+      color: #1b3af2;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    .table {
+      margin: 0;
+    }
+
+    ul.todo-list {
+      list-style: none;
+      margin: revert;
+      color: revert;
+      font-family: revert;
+      margin-left: 2rem;
+    }
+
+    ul,
+    ol {
+      list-style: initial;
+      margin-left: 2rem;
+    }
+
+    ol {
+      list-style: decimal;
+    }
+
+    sub {
+      vertical-align: sub;
+    }
+
+    sup {
+      vertical-align: super;
+    }
+
+    .ck.ck-content.ck-editor__editable {
+      line-height: initial;
+      min-height: 12.5rem;
+      border-bottom-left-radius: 0.25rem;
+      border-bottom-right-radius: 0.25rem;
+      transition-property: border-color, box-shadow, max-height;
+      transition-timing-function: ease-in-out;
+      transition-duration: 0.5s;
+      &.ck-focused:not(.ck-editor__nested-editable) {
+        border: 1px solid var(--ck-color-base-border);
+        /* border: var(--ck-focus-ring); */
+        box-shadow: none;
+        transition-property: border-color, box-shadow, max-height;
+        transition-timing-function: ease-in-out;
+        transition-duration: 0.5s;
+      }
+    }
+
+    .ck-focused,
+    .ck-blurred {
+      overflow-y: auto;
+      overflow-x: hidden;
+      transition: max-height 0.5s ease-in-out, min-height 0.5s ease-in-out !important;
+      ::-webkit-scrollbar {
+        width: 7px;
+      }
+      ::-webkit-scrollbar-track {
+        background: var(--ck-scroll-track-background);
+        border: none;
+      }
+      ::-webkit-scrollbar-thumb {
+        transition: background 2s;
+        background: var(--ck-scroll-thumb-background);
+        border: 1px solid var(--ck-scroll-thumb-border-color);
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        transition: background 2s;
+        background: var(--ck-scroll-thumb-hover-background);
+      }
+      ::-webkit-scrollbar-thumb:active {
+        background: var(--ck-scroll-thumb-active-background);
+      }
+    }
+  }
+
+  .ck .ck-source-editing-area textarea {
+    color: var(--ck-color-text);
+    background-color: var(--ck-color-base-background);
+    border: 1px solid var(--ck-color-base-border) !important;
+    box-shadow: none !important;
+  }
+
+  .ck .ck-block-toolbar-button {
+    min-width: 0 !important;
+    min-height: 0 !important;
+    width: 20px !important;
+    height: 25px !important;
+    margin-left: -2px !important ;
+
+    & svg {
+      color: var(--ck-color-text) !important;
+      position: absolute;
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .ck-word-count {
+    margin-top: 0.3rem;
+    display: flex;
+    justify-content: end;
+    gap: 0.3rem;
+    font-size: 1rem;
+    font-weight: 500;
+    text-transform: lowercase;
+    /* color: #b3b3c4; */
+  }
+
+  .ck[dir='rtl'] {
+    .ck-block-toolbar-button {
+      margin-left: 2px !important ;
+    }
+    & + div {
+      justify-content: flex-start;
+      & > .ck-word-count {
+        & > div:first-child {
+          order: 2;
+        }
+        & > div:last-child {
+          order: 1;
+        }
+      }
+    }
+  }
+
+  .ck.ck-editor__editable > .ck-placeholder::before {
+    color: var(--ck-color-editor-base-text);
+    opacity: 0.65;
+  }
+`;
+const light = css`
+  :root {
+    --ck-color-focus-outer-shadow: rgba(77, 115, 255, 0.2) !important;
+    --ck-color-focus-disabled-shadow: #e4e3ff !important;
+    --ck-focus-ring: 1px solid rgb(73, 69, 255) !important;
+    --ck-color-button-default-hover-background: #f0f0ff !important;
+  }
+
+  .ck.ck-powered-by > a > svg > path:first-child {
+    fill: #001234;
+  }
+
+  .ck {
+    --ck-scroll-track-background: rgb(242, 242, 242);
+    --ck-scroll-thumb-background: rgb(236, 236, 236);
+    --ck-scroll-thumb-border-color: #cdcdf8;
+    --ck-scroll-thumb-hover-background: #f0f0ff;
+    --ck-scroll-thumb-active-background: #d9d8ff;
+
+    --ck-color-editor-base-text: #001234;
+    /* Overrides the border radius setting in the theme. */
+    --ck-border-radius: 4px;
+
+    /* Helper variables to avoid duplication in the colors. */
+    --ck-color-base-border: #dcdce4;
+    --ck-color-base-background: #ffffff;
+    --ck-custom-background: #ffffff;
+    --ck-custom-foreground: #dedede;
+    --ck-custom-border: #dcdce4;
+    --ck-custom-white: hsl(0, 0%, 100%);
+
+    --ck-color-base-focus: #bbbaf1;
+    --ck-color-base-active: #f0f0ff;
+    --ck-color-base-active-focus: #e2e2fd;
+    
+    /* -- Overrides generic colors. ----------------------------------------- */
+
+    --ck-color-base-foreground: var(--ck-custom-background);
+
+    --ck-color-focus-border: rgb(73, 69, 255);
+
+    --ck-color-text: #32324d;
+    --ck-color-shadow-drop: hsla(250, 31%, 80%, 0.1);
+    --ck-color-shadow-inner: hsla(250, 31%, 80%, 0.1);
+
+    /* -- Overrides the default .ck-button class colors. -------------------- */
+
+    --ck-color-button-default-background: var(--ck-custom-background);
+    --ck-color-button-default-hover-background: #f0f0ff;
+    --ck-color-button-default-active-background: #f6f6f9;
+    --ck-color-button-default-active-shadow: #dedefb;
+    --ck-color-button-default-disabled-background: var(--ck-custom-background);
+
+    --ck-color-button-on-color: rgb(73, 69, 255);
+    --ck-color-button-on-background: #f0f0ff;
+    --ck-color-button-on-hover-background: #e6e9fc;
+    --ck-color-button-on-active-background: #f6f6f9;
+    --ck-color-button-on-active-shadow: #cdcdf8;
+    --ck-color-button-on-disabled-background: var(--ck-custom-foreground);
+
+    --ck-color-button-action-background: hsl(168, 76%, 42%);
+    --ck-color-button-action-hover-background: hsl(168, 76%, 38%);
+    --ck-color-button-action-active-background: hsl(168, 76%, 36%);
+    --ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
+    --ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
+    --ck-color-button-action-text: var(--ck-custom-white);
+
+    --ck-color-button-save: hsl(120, 100%, 46%);
+    --ck-color-button-cancel: hsl(15, 100%, 56%);
+
+    /* -- Overrides the default .ck-dropdown class colors. ------------------ */
+
+    --ck-color-dropdown-panel-background: var(--ck-custom-background);
+    --ck-color-dropdown-panel-border: var(--ck-custom-foreground);
+
+    /* -- Overrides the default .ck-splitbutton class colors. --------------- */
+
+    --ck-color-split-button-hover-background: var(
+      --ck-color-button-default-hover-background
+    );
+    --ck-color-split-button-hover-border: var(--ck-custom-foreground);
+
+    /* -- Overrides the default .ck-input class colors. --------------------- */
+
+    --ck-color-input-background: var(--ck-custom-background);
+    --ck-color-input-border: hsl(257, 3%, 43%);
+    --ck-color-input-text: hsl(0, 0%, 98%);
+    --ck-color-input-disabled-background: hsl(0, 0%, 97%);
+    --ck-color-input-disabled-border: rgb(214, 214, 214);
+    --ck-color-input-disabled-text: hsl(0, 0%, 78%);
+
+    /* -- Overrides the default .ck-labeled-field-view class colors. -------- */
+
+    --ck-color-labeled-field-label-background: var(--ck-custom-background);
+
+    /* -- Overrides the default .ck-list class colors. ---------------------- */
+
+    --ck-color-list-background: var(--ck-custom-background);
+    --ck-color-list-button-hover-background: #f4f4fb;
+    --ck-color-list-button-on-background: var(--ck-color-base-active);
+    --ck-color-list-button-on-background-focus: var(
+      --ck-color-base-active-focus
+    );
+    --ck-color-list-button-on-text: #271fe2;
+
+    /* -- Overrides the default .ck-balloon-panel class colors. ------------- */
+
+    --ck-color-panel-background: var(--ck-custom-background);
+    --ck-color-panel-border: var(--ck-custom-border);
+
+    /* -- Overrides the default .ck-toolbar class colors. ------------------- */
+
+    --ck-color-toolbar-background: var(--ck-custom-background);
+    --ck-color-toolbar-border: var(--ck-custom-border);
+
+    /* -- Overrides the default .ck-tooltip class colors. ------------------- */
+
+    --ck-color-tooltip-background: #3a3955;
+    --ck-color-tooltip-text: hsl(0, 0%, 93%);
+
+    /* -- Overrides the default colors used by the ckeditor5-image package. - */
+
+    --ck-color-image-caption-background: hsl(0, 0%, 97%);
+    --ck-color-image-caption-text: hsl(0, 0%, 20%);
+
+    /* -- Overrides the default colors used by the ckeditor5-widget package.  */
+
+    --ck-color-widget-blurred-border: #cfcffa;
+    --ck-color-widget-hover-border: #c9c9e4;
+    --ck-color-widget-editable-focus-background: var(--ck-custom-white);
+
+    /* -- Overrides the default colors used by the ckeditor5-link package. -- */
+
+    --ck-color-link-default: hsl(209, 89%, 33%);
+
+    --ck-powered-by-background: transparrent;
+    --ck-powered-by-border-color: var(--ck-color-base-background);
+
+    --ck-color-dialog-background: var(--ck-custom-background);
+    --ck-color-dialog-form-header-border: var(--ck-color-base-border);
+  }
+`;
+const dark = css`
+  :root {
+    --ck-color-focus-outer-shadow: rgba(77, 115, 255, 0.2) !important;
+    --ck-color-focus-disabled-shadow: rgba(106, 114, 143, 0.4) !important;
+    --ck-focus-ring: 1px solid #4945ff !important;
+    --ck-color-button-default-hover-background: #262630 !important;
+  }
+
+  .ck.ck-powered-by > a > svg > path:first-child {
+    fill: rgb(236, 236, 236);
+  }
+
+  .ck.ck-powered-by > a > svg > path:nth-child(3) {
+    fill: rgb(172, 156, 251);
+  }
+
+  .ck {
+    --ck-scroll-track-background: #3d3d57;
+    --ck-scroll-thumb-background: #181826;
+    --ck-scroll-thumb-border-color: rgb(70, 70, 70);
+    --ck-scroll-thumb-hover-background: #202033;
+    --ck-scroll-thumb-active-background: #2b2b45;
+
+    --ck-color-editor-base-text: rgb(236, 236, 236);
+    /* Overrides the border radius setting in the theme. */
+    --ck-border-radius: 4px;
+
+    /* Helper variables to avoid duplication in the colors. */
+    --ck-color-base-border: #4a4a6a;
+    --ck-color-base-background: #212134;
+    --ck-custom-background: #181826;
+    --ck-custom-foreground: #26263b;
+    --ck-custom-border: #4a4a6a;
+    --ck-custom-white: hsl(0, 0%, 100%);
+
+    --ck-color-focus-outer-shadow: #212134;
+
+    --ck-color-base-focus: #bbbaf1;
+    --ck-color-base-active: #2e2e5c;
+    --ck-color-base-active-focus: #28284d;
+    
+    /* -- Overrides generic colors. ----------------------------------------- */
+
+    --ck-color-base-foreground: var(--ck-custom-background);
+    --ck-color-focus-border: #6765bd;
+    --ck-color-text: hsl(0, 0%, 93%);
+    --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
+    --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
+
+    /* -- Overrides the default .ck-button class colors. -------------------- */
+
+    --ck-color-button-default-background: rgb(33, 33, 52);
+
+    --ck-color-button-default-hover-background: #262630;
+    --ck-color-button-default-active-background: #3c3c47;
+    --ck-color-button-default-active-shadow: #3c3c47;
+    --ck-color-button-default-disabled-background: var(--ck-custom-background);
+
+    --ck-color-button-on-color: #7b79ff;
+    --ck-color-button-on-background: #2b2b36;
+    --ck-color-button-on-hover-background: #30303b;
+    --ck-color-button-on-active-background: #3c3c47;
+    --ck-color-button-on-active-shadow: #3c3c47;
+    --ck-color-button-on-disabled-background: var(--ck-custom-foreground);
+
+    --ck-color-button-action-background: hsl(168, 76%, 42%);
+    --ck-color-button-action-hover-background: hsl(168, 76%, 38%);
+    --ck-color-button-action-active-background: hsl(168, 76%, 36%);
+    --ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
+    --ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
+    --ck-color-button-action-text: var(--ck-custom-white);
+
+    --ck-color-button-save: hsl(120, 100%, 46%);
+    --ck-color-button-cancel: hsl(15, 100%, 56%);
+
+    /* -- Overrides the default .ck-dropdown class colors. ------------------ */
+
+    --ck-color-dropdown-panel-background: var(--ck-custom-background);
+    --ck-color-dropdown-panel-border: var(--ck-custom-foreground);
+
+    /* -- Overrides the default .ck-splitbutton class colors. --------------- */
+
+    --ck-color-split-button-hover-background: var(
+      --ck-color-button-default-hover-background
+    );
+    --ck-color-split-button-hover-border: var(--ck-custom-foreground);
+
+    /* -- Overrides the default .ck-input class colors. --------------------- */
+
+    --ck-color-input-background: var(--ck-custom-background);
+    --ck-color-input-border: hsl(257, 3%, 43%);
+    --ck-color-input-text: hsl(0, 0%, 98%);
+    --ck-color-input-disabled-background: hsl(255, 4%, 21%);
+    --ck-color-input-disabled-border: hsl(250, 3%, 38%);
+    --ck-color-input-disabled-text: hsl(0, 0%, 78%);
+
+    /* -- Overrides the default .ck-labeled-field-view class colors. ---------*/
+
+    --ck-color-labeled-field-label-background: var(--ck-custom-background);
+
+    /* -- Overrides the default .ck-list class colors. ---------------------- */
+
+    --ck-color-list-background: var(--ck-custom-background);
+    --ck-color-list-button-hover-background: #121221;
+    --ck-color-list-button-on-background: var(--ck-color-base-active);
+    --ck-color-list-button-on-background-focus: var(
+      --ck-color-base-active-focus
+    );
+    --ck-color-list-button-on-text: #ffffff;
+
+    /* -- Overrides the default .ck-balloon-panel class colors. ------------- */
+
+    --ck-color-panel-background: var(--ck-custom-background);
+    --ck-color-panel-border: var(--ck-custom-border);
+
+    /* -- Overrides the default .ck-toolbar class colors. ------------------- */
+
+    --ck-color-toolbar-background: var(--ck-custom-background);
+    --ck-color-toolbar-border: var(--ck-custom-border);
+
+    /* -- Overrides the default .ck-tooltip class colors. ------------------- */
+
+    --ck-color-tooltip-background: #3a3955;
+    --ck-color-tooltip-text: hsl(0, 0%, 93%);
+
+    /* -- Overrides the default colors used by the ckeditor5-image package. - */
+
+    --ck-color-image-caption-background: hsl(0, 0%, 97%);
+    --ck-color-image-caption-text: hsl(0, 0%, 20%);
+
+    /* -- Overrides the default colors used by the ckeditor5-widget package.  */
+
+    --ck-color-widget-blurred-border: #7c7c96;
+    --ck-color-widget-hover-border: #666687;
+    --ck-color-widget-editable-focus-background: var(--ck-custom-white);
+
+    /* -- Overrides the default colors used by the ckeditor5-link package. -- */
+
+    --ck-color-link-default: hsl(216, 100%, 75%);
+
+    --ck-powered-by-background: transparrent;
+    --ck-powered-by-border-color: var(--ck-color-base-background);
+
+    --ck-color-dialog-background: var(--ck-custom-background);
+    --ck-color-dialog-form-header-border: var(--ck-color-base-border);
+  }
+`;
+const additional = css`
+  /* --- expanding --- */
+
+  .ck.ck-editor__main .ck-blurred {
+    max-height: 200px !important;
+  }
+  .ck.ck-editor__main .ck-focused {
+    min-height: 200px !important;
+    max-height: 700px !important;
+  }
+
+  /* --- color-grid --- */
+
+  .ck.ck-color-ui-dropdown {
+    --ck-color-grid-tile-size: 22px !important;
+  }
+  .ck.ck-color-grid__tile {
+    width: auto;
+  }
+  .ck.ck-color-ui-dropdown .ck-color-grid {
+    grid-gap: 2px;
+  }
+  .ck.ck-color-ui-dropdown .ck-color-grid .ck-button {
+    border-radius: 2px;
+  }
+  .ck.ck-color-ui-dropdown
+    .ck.ck-color-grid
+    .ck-color-grid__tile:hover:not(.ck-disabled),
+  .ck.ck-color-ui-dropdown
+    .ck.ck-color-grid
+    .ck-color-grid__tile:focus:not(.ck-disabled) {
+    z-index: 1;
+    transform: scale(1.1);
+    border-radius: 2px;
+  }
+
+  /* ---- Styles feature ------------------------------------------------------ */
+
+  :root {
+    --ck-georgia-serif-font-stack: Georgia, Times, Times New Roman, serif;
+  }
+
+  .ck-content h1.document-title {
+    font-family: var(--ck-georgia-serif-font-stack);
+    font-size: 50px;
+    font-weight: bold;
+    border: 0;
+  }
+
+  .ck-content h2.document-subtitle {
+    font-family: var(--ck-georgia-serif-font-stack);
+    font-size: 20px;
+    font-weight: bold;
+    color: #d1d1d1;
+    letter-spacing: 10px;
+  }
+
+  .ck-content p.callout {
+    --border-color: #e91e1e;
+    padding: 1.2em 2em;
+    border: 1px solid var(--border-color);
+    border-left: 10px solid var(--border-color);
+    background: #fff9fb;
+    border-radius: 5px;
+    margin: 1.5em 2em;
+    box-shadow: 5px 5px 0 #ffe6ef;
+  }
+
+  .ck-content blockquote.side-quote {
+    font-family: var(--ck-georgia-serif-font-stack);
+    font-style: normal;
+    float: right;
+    width: 35%;
+    position: relative;
+    border: 0;
+    overflow: visible;
+    z-index: 1;
+    margin-left: 1em;
+  }
+
+  .ck-content blockquote.side-quote::before {
+    content: '“';
+    position: absolute;
+    top: -37px;
+    left: -10px;
+    display: block;
+    font-size: 200px;
+    color: #e7e7e7;
+    z-index: -1;
+    line-height: 1;
+  }
+
+  .ck-content blockquote.side-quote p {
+    font-size: 2em;
+    line-height: 1;
+  }
+
+  .ck-content blockquote.side-quote p:last-child:not(:first-child) {
+    font-size: 1.3em;
+    text-align: right;
+    color: #555;
+  }
+
+  .ck-content span.needs-clarification {
+    outline: 1px dashed #c8a24b;
+    background: #ffe19c;
+    border-radius: 2px;
+    position: relative;
+  }
+
+  .ck-content span.needs-clarification::after {
+    content: '?';
+    display: inline-block;
+    color: #fff;
+    background: #3b3b3b;
+    font-size: 12px;
+    vertical-align: super;
+    width: 12px;
+    height: 12px;
+    line-height: 12px;
+    border-radius: 10px;
+    text-align: center;
+    position: absolute;
+    right: -6px;
+    top: -6px;
+    font-weight: bold;
+    letter-spacing: initial;
+  }
+
+  .ck-content span.wide-spacing {
+    letter-spacing: 0.3em;
+  }
+
+  .ck-content span.small-caps {
+    font-variant: small-caps;
+  }
+
+  .ck-content span.spoiler {
+    background: #000;
+    color: #000;
+  }
+
+  .ck-content span.spoiler:hover {
+    background: #000;
+    color: #fff;
+  }
+
+  .ck-content pre.stylish-code {
+    border-color: transparent;
+    margin-left: 2em;
+    margin-right: 2em;
+    border-radius: 10px;
+  }
+
+  .ck-content pre.stylish-code::before {
+    content: '';
+    display: block;
+    height: 13px;
+    background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
+    margin-bottom: 8px;
+    background-repeat: no-repeat;
+  }
+
+  .ck-content pre.stylish-code-dark,
+  .ck-content pre.stylish-code-bright {
+    padding: 1em;
+  }
+
+  .ck-content pre.stylish-code-dark {
+    background: #272822;
+    box-shadow: 5px 5px 0 #0000001f;
+    color: white;
+  }
+
+  .ck-content pre.stylish-code-dark code {
+    color: white;
+  }
+
+  .ck-content pre.stylish-code-bright {
+    background: #dddfe0;
+    color: #000;
+    box-shadow: 5px 5px 0 #b3b3b3;
+  }
+
+  .ck-content pre.stylish-code-bright code {
+    color: #222;
+  }
+`;
+const baseTheme = {
+  common,
+  light,
+  dark,
+  additional
+};
+const GlobalStyle = createGlobalStyle`
+  ${({ theme }) => theme.common}
+  ${({ theme, variant }) => theme[variant]}
+  ${({ theme }) => theme.additional}
+`;
+const getSystemColorScheme = () => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+const GlobalStyling = () => {
+  const { theme: userTheme, dontMergeTheme } = globalThis.SH_CKE_CONFIG || {};
+  const profileTheme = getProfileTheme();
+  const variant = profileTheme && profileTheme !== "system" ? profileTheme : getSystemColorScheme();
+  const theme = dontMergeTheme ? userTheme : { ...baseTheme, ...userTheme };
+  return /* @__PURE__ */ jsx(GlobalStyle, { theme, variant });
+};
+const MemoizedGlobalStyling = React.memo(GlobalStyling);
+const Wrapper = styled("div")`
+  ${({ styles }) => styles}
+`;
+const Editor = ({
+  name,
+  disabled,
+  presetName,
+  maxLength,
+  placeholder
+}) => {
+  const { onChange, value } = useField(name);
+  const [editorInstance, setEditorInstance] = useState(false);
+  const [mediaLibVisible, setMediaLibVisible] = useState(false);
+  const [preset, setPreset] = useState(null);
+  const [lengthMax, setLengthMax] = useState(false);
+  const wordCounter = useRef(null);
+  const handleToggleMediaLib = () => setMediaLibVisible((prev) => !prev);
+  const handleCounter = (number) => number > maxLength ? setLengthMax(true) : setLengthMax(false);
+  useEffect(() => {
+    (async () => {
+      const currentPreset = await getConfiguredPreset(
+        presetName,
+        handleToggleMediaLib
+      );
+      if (placeholder) {
+        const clonedPreset = {
+          ...currentPreset,
+          editorConfig: {
+            ...currentPreset.editorConfig,
+            placeholder
+          }
+        };
+        setPreset(clonedPreset);
+      } else {
+        setPreset(currentPreset);
+      }
+    })();
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    preset && /* @__PURE__ */ jsx(MemoizedGlobalStyling, {}),
+    /* @__PURE__ */ jsxs(Wrapper, { styles: preset?.styles, children: [
+      !preset && /* @__PURE__ */ jsx(LoaderBox, { hasRadius: true, background: "neutral100", children: /* @__PURE__ */ jsx(Loader, { children: "Loading..." }) }),
+      preset && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          CKEditor,
+          {
+            editor: ClassicEditor,
+            config: preset.editorConfig,
+            disabled,
+            data: value ?? "",
+            onReady: (editor) => {
+              if (preset.editorConfig.WordCountPlugin) {
+                const wordCountPlugin = editor.plugins.get("WordCount");
+                wordCountPlugin.on(
+                  "update",
+                  (evt, stats) => handleCounter(stats.characters)
+                );
+                const wordCountWrapper = wordCounter.current;
+                wordCountWrapper?.appendChild(
+                  wordCountPlugin.wordCountContainer
+                );
+              }
+              if (editor.plugins.has("ImageUploadEditing")) {
+                editor.plugins.get("ImageUploadEditing").on(
+                  "uploadComplete",
+                  (evt, { data, imageElement }) => editor.model.change(
+                    (writer) => writer.setAttribute("alt", data.alt, imageElement)
+                  )
+                );
+              }
+              setEditorInstance(editor);
+            },
+            onChange: (event, editor) => {
+              const data = editor.getData();
+              onChange({ target: { name, value: data } });
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MediaLib,
+          {
+            isOpen: mediaLibVisible,
+            onToggle: handleToggleMediaLib,
+            editor: editorInstance
+          }
+        ),
+        preset.editorConfig.WordCountPlugin && /* @__PURE__ */ jsx(
+          CounterLoaderBox,
+          {
+            color: lengthMax ? "danger500" : "neutral400",
+            ref: wordCounter,
+            children: !editorInstance && /* @__PURE__ */ jsx(Loader, { small: true, children: "Loading..." })
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+Editor.propTypes = {
+  name: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  presetName: PropTypes.string.isRequired,
+  maxLength: PropTypes.number,
+  placeholder: PropTypes.string
+};
+const CounterLoaderBox = styled(Box)`
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  align-items: center;
+`;
+const LoaderBox = styled(Box)`
+  display: flex;
+  height: 200px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+const Input = ({
+  name,
+  attribute,
+  value = "",
+  labelAction = null,
+  label,
+  disabled = false,
+  error = null,
+  required = false,
+  hint = "",
+  placeholder
+}) => {
+  const { preset, maxLengthCharacters, ...options } = attribute.options;
+  return /* @__PURE__ */ jsx(
+    Field.Root,
+    {
+      name,
+      id: name,
+      error,
+      hint,
+      required,
+      children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+        /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
+        /* @__PURE__ */ jsx(
+          Editor,
+          {
+            disabled,
+            name,
+            value,
+            presetName: preset,
+            maxLength: maxLengthCharacters,
+            placeholder
+          }
+        ),
+        /* @__PURE__ */ jsx(Field.Hint, {}),
+        /* @__PURE__ */ jsx(Field.Error, {})
+      ] })
+    }
+  );
+};
+Input.propTypes = {
+  name: PropTypes.string.isRequired,
+  attribute: PropTypes.object.isRequired,
+  value: PropTypes.string,
+  labelAction: PropTypes.object,
+  label: PropTypes.string,
+  disabled: PropTypes.bool,
+  error: PropTypes.string,
+  required: PropTypes.bool,
+  hint: PropTypes.string,
+  placeholder: PropTypes.string
+};
+const MemoizedInput = React.memo(Input);
+export {
+  MemoizedInput as default
+};
+//# sourceMappingURL=index-Dov2jT-v.mjs.map