@ckbox/components 2.5.0-rc.0 → 2.5.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.
package/README.md CHANGED
@@ -13,7 +13,7 @@ Using a build served from the CDN is the simplest and fastest way of embedding C
13
13
  To start using CKBox on your website, embed the following `script` element in the HTML code of the page:
14
14
 
15
15
  ```html
16
- <script src="https://cdn.ckbox.io/ckbox/2.5.0-rc.0/ckbox.js"></script>
16
+ <script src="https://cdn.ckbox.io/ckbox/2.5.0/ckbox.js"></script>
17
17
  ```
18
18
 
19
19
  Quick implementation example:
@@ -23,7 +23,7 @@ Quick implementation example:
23
23
  <html>
24
24
  <head>
25
25
  <meta charset="UTF-8" />
26
- <script src="https://cdn.ckbox.io/ckbox/2.5.0-rc.0/ckbox.js"></script>
26
+ <script src="https://cdn.ckbox.io/ckbox/2.5.0/ckbox.js"></script>
27
27
  </head>
28
28
  <body>
29
29
  <div id="ckbox"></div>
@@ -48,21 +48,64 @@ The code snippet below presents the simplest scenario for integration of CKEdito
48
48
  <html>
49
49
  <head>
50
50
  <meta charset="UTF-8" />
51
- <script src="https://cdn.ckeditor.com/ckeditor5/{%CKEDITOR_VERSION%}/classic/ckeditor.js"></script>
52
- <script src="https://cdn.ckbox.io/ckbox/2.5.0-rc.0/ckbox.js"></script>
51
+ <script src="https://cdn.ckbox.io/ckbox/2.5.0/ckbox.js"></script>
52
+ <link
53
+ rel="stylesheet"
54
+ href="https://cdn.ckbox.io/ckbox/2.5.0/styles/themes/lark.css"
55
+ />
56
+ <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/42.0.0/ckeditor5.css" />
53
57
  </head>
54
58
  <body>
55
59
  <div id="editor"></div>
56
- <script>
60
+
61
+ <script type="importmap">
62
+ {
63
+ "imports": {
64
+ "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/42.0.0/ckeditor5.js",
65
+ "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/42.0.0/"
66
+ }
67
+ }
68
+ </script>
69
+
70
+ <script type="module">
71
+ import {
72
+ ClassicEditor,
73
+ CKBox,
74
+ Bold,
75
+ CloudServices,
76
+ Essentials,
77
+ Font,
78
+ Image,
79
+ ImageUploadEditing,
80
+ ImageUploadProgress,
81
+ Italic,
82
+ LinkEditing,
83
+ Paragraph,
84
+ PictureEditing,
85
+ } from "ckeditor5";
86
+
57
87
  ClassicEditor.create(document.querySelector("#editor"), {
88
+ plugins: [
89
+ ClassicEditor,
90
+ CKBox,
91
+ Bold,
92
+ CloudServices,
93
+ Essentials,
94
+ Font,
95
+ Image,
96
+ ImageUploadEditing,
97
+ ImageUploadProgress,
98
+ Italic,
99
+ LinkEditing,
100
+ Paragraph,
101
+ PictureEditing,
102
+ ],
58
103
  ckbox: {
59
104
  tokenUrl: "https://your.token.url",
105
+ theme: "lark",
60
106
  },
61
107
  toolbar: [
62
108
  "ckbox",
63
- "imageUpload",
64
- "|",
65
- "heading",
66
109
  "|",
67
110
  "undo",
68
111
  "redo",
@@ -70,12 +113,10 @@ The code snippet below presents the simplest scenario for integration of CKEdito
70
113
  "bold",
71
114
  "italic",
72
115
  "|",
73
- "blockQuote",
74
- "indent",
75
- "link",
76
- "|",
77
- "bulletedList",
78
- "numberedList",
116
+ "fontSize",
117
+ "fontFamily",
118
+ "fontColor",
119
+ "fontBackgroundColor",
79
120
  ],
80
121
  }).catch((error) => {
81
122
  console.error(error);
@@ -101,7 +142,7 @@ You will find ready to use code snippets and live examples there.
101
142
 
102
143
  **CKBox** (https://ckeditor.com/ckbox/)
103
144
 
104
- Copyright (c) 2003-2023, [CKSource Holding sp. z o.o.](https://cksource.com/) All rights reserved.
145
+ Copyright (c) 2003-2024, [CKSource Holding sp. z o.o.](https://cksource.com/) All rights reserved.
105
146
  **CKBox** is licensed under a commercial license and is protected by copyright law. For more details about available licensing options please contact us at [sales@cksource.com](mailto:sales@cksource.com).
106
147
 
107
148
  Trademarks
package/dist/index.d.ts CHANGED
@@ -2003,7 +2003,7 @@ interface Props$2h {
2003
2003
  children: React$1.ReactNode;
2004
2004
  }
2005
2005
 
2006
- declare const PermissionsFormGroup: ({ children, title }: Props$2g) => React$1.JSX.Element;
2006
+ declare const PermissionsFormGroup: ({ children, title, isCompact }: Props$2g) => React$1.JSX.Element;
2007
2007
  interface Props$2g {
2008
2008
  /**
2009
2009
  * Title of the form group.
@@ -2013,6 +2013,10 @@ interface Props$2g {
2013
2013
  * Main content of the component.
2014
2014
  */
2015
2015
  children: React$1.ReactNode;
2016
+ /**
2017
+ * Determines whether group should be displayed compact.
2018
+ */
2019
+ isCompact?: boolean;
2016
2020
  }
2017
2021
 
2018
2022
  declare const PermissionsFormInput: ({ checked, label, tooltip, onChange }: Props$2f) => React$1.JSX.Element;