@_sh/strapi-plugin-ckeditor 1.1.2 → 2.0.0

package/admin/src/components/Input/CKEditor/theme/additional.js

@@ -0,0 +1,167 @@
+import { css } from "styled-components";
+
+export const additional = css`
+
+/* --- expanding --- */
+
+.ck.ck-editor__main .ck-blurred {
+    max-height: 200px;
+  }
+.ck.ck-editor__main .ck-focused {
+  	max-height: 700px;
+  }
+
+
+/* ---- Style feature config ------------------------------------------------------ */
+
+: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;
+}
+
+` 

package/admin/src/components/Input/CKEditor/theme/common.js

@@ -0,0 +1,277 @@
+import { css } from "styled-components";
+
+export 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;
+  }
+
+  
+  .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: .8em;
+      margin-bottom: .4em
+    }
+
+    blockquote,
+    ol,
+    p,
+    ul {
+      font-size: 1em;
+      line-height: 1.6em;
+      padding-top: .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;
+      ::-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: 0.7rem;
+    font-weight: 500;
+    text-transform: lowercase;
+    /* color: #b3b3c4; */
+  }
+
+  .ck[dir=rtl]{
+    .ck-block-toolbar-button {
+      margin-left: 2px !important ;
+    }
+    .ck-color-input{
+      margin: 0 8px 8px 0 !important;
+      padding: 3px 5px 0 0 !important;
+    }
+    & + div{
+      justify-content: flex-start;
+      & > .ck-word-count {
+          & > div:first-child{
+            order: 2;
+          }
+          & > div:last-child{
+            order: 1;
+          }
+      }
+    }
+  }
+
+
+  .ck .ck-color-input{
+    margin: 0 0 8px 8px !important;
+    padding: 3px 0 0 5px !important;
+    border-radius:0px !important;
+    width: 115px !important;
+    z-index: 1;
+  }
+
+  .ck .ck-color-picker{
+    margin: 0 3px 8px 3px !important;
+    border-radius:0px !important;
+    width: 80px !important;
+  }
+
+  .ck .ck-color-picker-save{
+    margin: 0 0 8px 0 !important;
+    border-radius:0px !important;
+    width: 50px !important;
+  }
+
+
+  .ck.ck-color-ui-dropdown {
+	--ck-color-grid-tile-size: 20px;
+  }
+
+  .ck.ck-color-ui-dropdown .ck-color-grid {
+  	grid-gap: 1px;
+  }
+
+  .ck.ck-color-ui-dropdown .ck-color-grid .ck-button {
+  	border-radius: 0;
+  }
+
+  .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.3);
+  }
+
+`;

package/admin/src/components/Input/CKEditor/theme/dark.js

@@ -0,0 +1,144 @@
+import { css } from "styled-components";
+
+export 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-color-picker > svg {
+      color: #ffffff !important;
+    }
+    .ck .ck-color-picker-save {
+      & > svg {
+        stroke: #ffffff !important;
+      }
+      & > svg > #primary,
+      #primary-2 {
+        stroke: #7b79ff !important;
+      }
+    }
+  }
+
+  .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%);
+  }
+
+`;

package/admin/src/components/Input/CKEditor/theme/index.js

@@ -0,0 +1,13 @@
+import { common } from './common';
+import { light } from './light';
+import { dark } from './dark';
+import { additional } from './additional';
+
+const baseTheme = {
+    common: common,
+    light: light,
+    dark: dark,
+    additional: additional
+}
+
+export default baseTheme;