@_sh/strapi-plugin-ckeditor 1.0.9 → 1.1.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 (7) hide show
  1. package/README.md +78 -105
  2. package/admin/src/components/CKEditor/build/ckeditor.js +1 -1
  3. package/admin/src/components/CKEditor/build/ckeditor.js.map +1 -1
  4. package/admin/src/components/CKEditor/index.js +140 -134
  5. package/admin/src/components/CKEditor/styles.js +12 -62
  6. package/admin/src/components/CKEditor/theme.js +282 -0
  7. package/package.json +1 -1
package/admin/src/components/CKEditor/index.js CHANGED
@@ -1,155 +1,161 @@
1
- import React, {useEffect, useState} from "react";
1
+ import React, { useEffect, useState } from "react";
2
2
  import PropTypes from "prop-types";
3
- import styled, {createGlobalStyle } from "styled-components";
3
+ import styled, { createGlobalStyle } from "styled-components";
4
4
  import { CKEditor } from "@ckeditor/ckeditor5-react";
5
- import {Editor as CustomClassicEditor} from './build/ckeditor';
5
+ import { Editor as CustomClassicEditor } from "./build/ckeditor";
6
6
  import { Box } from "@strapi/design-system/Box";
7
- import { prefixFileUrlWithBackendUrl, request, auth } from '@strapi/helper-plugin';
7
+ import { prefixFileUrlWithBackendUrl, request, auth } from "@strapi/helper-plugin";
8
8
  import MediaLib from "../MediaLib";
9
- import pluginId from '../../pluginId';
10
- import defStyles from './styles'
9
+ import pluginId from "../../pluginId";
10
+ import styles from "./styles";
11
+ import theme from "./theme";
12
+
13
+ const EditorStyle = createGlobalStyle`
14
+ ${styles}
15
+ ${({ strapiTheme }) => strapiTheme}
16
+ ${({ custom }) => custom}
11
17
 
12
- const EditorStyle = createGlobalStyle `
13
18
  .ck-editor__styled__container{
14
19
  position: relative;
15
20
  width:100%;
16
- ${({ styles }) => styles}
17
21
  }
18
- `
22
+ `;
19
23
  const Wrapper = styled(Box)``;
20
24
 
25
+ const Editor = ({ onChange, name, value, disabled }) => {
26
+ //####### strapi media lib connector #############################################################################################
27
+ const [mediaLibVisible, setMediaLibVisible] = useState(false);
28
+ const [editor, setEditor] = useState();
21
29
 
22
- const Editor = ({ onChange, name, value, disabled }) => {
30
+ const toggleMediaLib = (editor) => {
31
+ if (editor) {
32
+ setEditor(editor);
33
+ }
34
+ setMediaLibVisible((prev) => !prev);
35
+ };
36
+ const handleChangeAssets = (assets) => {
37
+ let newValue = value ? value : "";
38
+ assets.map((asset) => {
39
+ if (asset.mime.includes("image")) {
40
+ if (uploadCfg?.responsiveDimensions) {
41
+ let set = "";
42
+ let keys = Object.keys(asset.formats).sort((a, b) => {
43
+ return asset.formats[a].width - asset.formats[b].width;
44
+ });
45
+ keys?.map((k) => {
46
+ let str =
47
+ prefixFileUrlWithBackendUrl(asset.formats[k].url) + ` ${asset.formats[k].width}w,`;
48
+ set = set + str;
49
+ });
50
+ const imgTag = `<img src="${asset.url}" alt="${asset.alt}" srcset="${set}"></img>`;
51
+ newValue = `${newValue}${imgTag}`;
52
+ } else {
53
+ const imgTag = `<img src="${asset.url}" alt="${asset.alt}"></img>`;
54
+ newValue = `${newValue}${imgTag}`;
55
+ }
56
+ }
57
+ // Handle videos and other type of files by adding some code
58
+ });
59
+ onChange({ target: { name, value: newValue } });
60
+ toggleMediaLib();
61
+ };
23
62
 
24
- //####### strapi media lib connector #############################################################################################
25
- const [mediaLibVisible, setMediaLibVisible] = useState(false);
26
- const [editor, setEditor] = useState();
27
- const [uploadCfg, setUploadCfg] = useState();
28
- const toggleMediaLib = (editor) => {
29
- if (editor) {
30
- setEditor(editor);
31
- }
32
- setMediaLibVisible((prev) => !prev);
33
- };
34
- const handleChangeAssets = (assets) => {
35
- let newValue = value ? value : "";
36
- assets.map((asset) => {
37
- if (asset.mime.includes("image")) {
38
- if(uploadCfg?.responsiveDimensions){
39
- let set =''
40
- let keys = Object.keys(asset.formats)
41
- console.log(asset)
42
- keys?.map(k=>{
43
- let str = prefixFileUrlWithBackendUrl(asset.formats[k].url) + ` ${asset.formats[k].width}w,`
44
- set = set + str
45
- })
46
- const imgTag = `<figure><img src="${asset.url}" alt="${asset.alt}" srcset="${set}"></img></figure>`;
47
- newValue = `${newValue}${imgTag}`;
48
- }else{
49
- const imgTag = `<figure><img src="${asset.url}" alt="${asset.alt}"></img></figure>`;
50
- newValue = `${newValue}${imgTag}`;
51
- }
52
- }
53
- // Handle videos and other type of files by adding some code
54
- });
55
- onChange({ target: { name, value: newValue } });
56
- toggleMediaLib()
57
- };
63
+ //####### config #############################################################################################
64
+ const [config, setConfig] = useState();
65
+ const [pluginCfg, setPluginCfg] = useState({});
66
+ const [uploadCfg, setUploadCfg] = useState();
67
+ const uploadUrl = `${prefixFileUrlWithBackendUrl("/upload")}`;
68
+ const headers = { Authorization: "Bearer " + auth.getToken() };
69
+ useEffect(() => {
70
+ // load the editor config
71
+ (async () => {
72
+ const editor = await request(`/${pluginId}/config/editor`, { method: "GET" });
73
+ const plugin = await request(`/${pluginId}/config/plugin`, { method: "GET" });
74
+ const upload = await request(`/${pluginId}/config/uploadcfg`, { method: "GET" });
58
75
 
59
- //####### config #############################################################################################
60
- const [config, setConfig] = useState();
61
- const [pluginCfg, setPluginCfg] = useState({styles:defStyles});
62
- const uploadUrl = `${prefixFileUrlWithBackendUrl('/upload')}`
63
- const headers = {Authorization: 'Bearer ' + auth.getToken(),}
64
- useEffect(() => {
65
- // load the editor config
66
- (async () => {
67
- const editor = await request(`/${pluginId}/config/editor`, { method: 'GET' });
68
- const plugin = await request(`/${pluginId}/config/plugin`, { method: 'GET' });
69
- const upload = await request(`/${pluginId}/config/uploadcfg`, { method: 'GET' });
76
+ if (editor) {
77
+ setConfig({
78
+ ...config,
79
+ editor: {
80
+ ...editor,
81
+ language: editor.language ? editor.language : auth.getUserInfo().preferedLanguage,
82
+ strapiMediaLib: {
83
+ onToggle: toggleMediaLib,
84
+ label: "Media library",
85
+ },
86
+ strapiUpload: {
87
+ uploadUrl,
88
+ headers,
89
+ },
90
+ },
91
+ });
70
92
 
71
- if(editor){
72
- setConfig({
73
- ...config,
74
- editor:{
75
- ...editor,
76
- language:editor.language?editor.language:auth.getUserInfo().preferedLanguage,
77
- strapiMediaLib:{
78
- onToggle: toggleMediaLib,
79
- label: 'Media library'
80
- },
81
- strapiUpload:{
82
- uploadUrl,
83
- headers,
84
- },
85
- }
86
- })
87
-
88
- if(editor.language){
89
- if(editor.language.ui){
90
- import(/* webpackMode: "eager" */ `./build/translations/${editor.language.ui}.js`).catch(()=>null)
91
- }
92
- if(editor.language.content){
93
- import(/* webpackMode: "eager" */ `./build/translations/${editor.language.content}.js`).catch(()=>null)
94
- }
95
- if(typeof editor.language !== 'object'){
96
- import(/* webpackMode: "eager" */ `./build/translations/${editor.language}.js`).catch(()=>null)
97
- }
98
- }
99
- if(!editor.language){
100
- import(/* webpackMode: "eager" */ `./build/translations/${auth.getUserInfo().preferedLanguage}.js`).catch(()=>null)
101
- }
102
-
103
- }
104
- if(plugin){
105
- setPluginCfg({
106
- ...pluginCfg,
107
- ...plugin,
108
- })
109
- }
110
- if(upload){
111
- setUploadCfg({
112
- ...uploadCfg,
113
- ...upload,
114
- })
115
- }
116
- })();
117
-
118
- return () => {
119
- };
120
- }, []);
93
+ if (editor.language) {
94
+ if (editor.language.ui) {
95
+ import(
96
+ /* webpackMode: "eager" */ `./build/translations/${editor.language.ui}.js`
97
+ ).catch(() => null);
98
+ }
99
+ if (editor.language.content) {
100
+ import(
101
+ /* webpackMode: "eager" */ `./build/translations/${editor.language.content}.js`
102
+ ).catch(() => null);
103
+ }
104
+ if (typeof editor.language !== "object") {
105
+ import(/* webpackMode: "eager" */ `./build/translations/${editor.language}.js`).catch(
106
+ () => null
107
+ );
108
+ }
109
+ }
110
+ if (!editor.language) {
111
+ import(
112
+ /* webpackMode: "eager" */ `./build/translations/${
113
+ auth.getUserInfo().preferedLanguage
114
+ }.js`
115
+ ).catch(() => null);
116
+ }
117
+ }
118
+ if (plugin) {
119
+ setPluginCfg({
120
+ ...pluginCfg,
121
+ ...plugin,
122
+ });
123
+ if (plugin.setAttribute !== false && localStorage.getItem("STRAPI_THEME")) {
124
+ document.documentElement.setAttribute("data-theme", localStorage.getItem("STRAPI_THEME"));
125
+ }
126
+ }
127
+ if (upload) {
128
+ setUploadCfg({
129
+ ...uploadCfg,
130
+ ...upload,
131
+ });
132
+ }
133
+ })();
121
134
 
122
-
123
- //####### theme #############################################################################################
124
- useEffect(() => {
125
- const strapiTheme = localStorage.getItem('STRAPI_THEME');
126
- if (strapiTheme)
127
- document.documentElement.setAttribute('data-theme', strapiTheme)
128
- return () => {
129
- }
130
- }, [])
135
+ return () => {};
136
+ }, []);
131
137
 
138
+ //###########################################################################################################
132
139
  return (
133
- <Wrapper className='ck-editor__styled__container'>
134
- <EditorStyle styles={pluginCfg.styles}/>
135
- {config &&
136
- <CKEditor
137
- editor={CustomClassicEditor}
138
- disabled={disabled}
139
- data={value || ""}
140
- onReady={(editor) => editor.setData(value || "")}
141
- onChange={(event, editor) => {
142
- const data = editor.getData();
143
- onChange({ target: { name, value: data } });
144
- }}
145
- config={config?.editor}
146
- />}
147
- <MediaLib
148
- isOpen={mediaLibVisible}
149
- onChange={handleChangeAssets}
150
- onToggle={toggleMediaLib}
140
+ <Wrapper className="ck-editor__styled__container">
141
+ <EditorStyle
142
+ custom={pluginCfg.styles}
143
+ strapiTheme={pluginCfg.strapiTheme !== false ? theme : ""}
151
144
  />
152
-
145
+ {config && (
146
+ <CKEditor
147
+ editor={CustomClassicEditor}
148
+ disabled={disabled}
149
+ data={value || ""}
150
+ onReady={(editor) => editor.setData(value || "")}
151
+ onChange={(event, editor) => {
152
+ const data = editor.getData();
153
+ onChange({ target: { name, value: data } });
154
+ }}
155
+ config={config?.editor}
156
+ />
157
+ )}
158
+ <MediaLib isOpen={mediaLibVisible} onChange={handleChangeAssets} onToggle={toggleMediaLib} />
153
159
  </Wrapper>
154
160
  );
155
161
  };
@@ -166,4 +172,4 @@ Editor.propTypes = {
166
172
  disabled: PropTypes.bool,
167
173
  };
168
174
 
169
- export default Editor;
175
+ export default Editor;
package/admin/src/components/CKEditor/styles.js CHANGED
@@ -1,10 +1,9 @@
1
1
  const styles = `
2
-
3
2
  .ck-editor__main {
4
- --ck-font-face:"Source Sans Pro",system-ui,Roboto,"Helvetica Neue","Helvetica",Arial,sans-serif;
5
- min-height: ${200 / 16}em;
6
- color:var(--ck-color-editor-base-text);
7
- font-family:var(--ck-font-face);
3
+ --ck-font-face:"Source Sans Pro",system-ui,Roboto,"Helvetica Neue","Helvetica",Arial,sans-serif;
4
+ min-height: ${200 / 16}em;
5
+ color:var(--ck-color-editor-base-text);
6
+ font-family:var(--ck-font-face);
8
7
  > div {
9
8
  min-height: ${200 / 16}em;
10
9
  }
@@ -29,22 +28,23 @@ const styles = `
29
28
  margin:revert;
30
29
  font-family:revert;
31
30
  }
32
- h1, .ck-heading_h1_b {
33
- font-size: 2.36em;
34
- line-height: 1.33em;
31
+ h1 {
32
+ font-size: 2em;
33
+ line-height: 2em;
35
34
  padding-top: 1em;
36
- margin-bottom: 1.67em;
35
+ margin-bottom: 0.6em;
37
36
  font-weight: 400;
37
+ border-bottom: 1px solid #e9e9e9;
38
38
  }
39
- h2, .ck-heading_h2_b {
39
+ h2 {
40
40
  font-size: 1.68em;
41
41
  line-height: 1.68em;
42
42
  padding-top: 0.8em;
43
43
  margin-bottom: 0.4em;
44
- padding-bottom: 0.2em;
45
44
  font-weight: 400;
45
+ border-bottom: 1px solid #e9e9e9;
46
46
  }
47
- h3, .ck-heading_h3_b{
47
+ h3 {
48
48
  font-size: 1.36em;
49
49
  line-height: 1.5em;
50
50
  padding-top: 0.8em;
@@ -64,9 +64,6 @@ const styles = `
64
64
  padding-top: 0.2em;
65
65
  margin-bottom: 0.8em;
66
66
  }
67
- .ck-heading_h1_b, h2.ck-heading_h2_b, .ck-heading_h3_b{
68
- border-bottom: 1px solid #e9e9e9;
69
- }
70
67
  figcaption{
71
68
  background-color: var(--ck-color-image-caption-background);
72
69
  caption-side: bottom;
@@ -105,7 +102,6 @@ const styles = `
105
102
  * Generated on Wed, 27 Apr 2022 06:51:54 GMT.
106
103
  * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html
107
104
  */
108
-
109
105
  :root {
110
106
  --ck-color-image-caption-background: hsl(0, 0%, 97%);
111
107
  --ck-color-image-caption-text: hsl(0, 0%, 20%);
@@ -123,52 +119,6 @@ const styles = `
123
119
  --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
124
120
  --ck-todo-list-checkmark-size: 16px;
125
121
  }
126
-
127
- .ck.ck-reset.ck-dropdown__panel.ck-dropdown__panel_sw.ck-dropdown__panel-visible{
128
- border-radius:4px;
129
- }
130
-
131
- .ck.ck-editor__main .ck-focused, .ck-blurred{
132
- overflow-y: auto;
133
- overflow-x: hidden;
134
- transition: max-height 0.5s ease-in-out;
135
-
136
- ::-webkit-scrollbar {
137
- width: 7px;
138
-
139
- }
140
-
141
- ::-webkit-scrollbar-track {
142
- background: var(--ck-scroll-track-background);
143
- border: none;
144
- }
145
-
146
- ::-webkit-scrollbar-thumb {
147
- transition:background 2s;
148
- background: var(--ck-scroll-thumb-background);
149
- border: 1px solid var(--ck-scroll-thumb-border-color);
150
- }
151
-
152
- ::-webkit-scrollbar-thumb:hover {
153
- transition:background 2s;
154
- background: var(--ck-scroll-thumb-hover-background);
155
- }
156
-
157
- ::-webkit-scrollbar-thumb:active {
158
- background: var(--ck-scroll-thumb-active-background);
159
- }
160
- }
161
-
162
- .ck.ck-editor__main .ck-blurred{
163
- max-height: 200px;
164
- }
165
- .ck.ck-editor__main .ck-focused{
166
- max-height: 700px;
167
- }
168
-
169
-
170
- .ck.ck-sticky-panel .ck-sticky-panel__content_sticky{ top:64px }
171
-
172
122
  /* ckeditor5-block-quote/theme/blockquote.css */
173
123
  .ck-content blockquote {
174
124
  overflow: hidden;