@ckbox/components 1.0.0 → 1.1.1
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 +105 -2
- package/dist/index.d.ts +16 -8
- package/dist/index.js +1 -1
- package/dist/styles/ckbox.css +3 -3
- package/package.json +23 -4
package/README.md
CHANGED
|
@@ -1,3 +1,106 @@
|
|
|
1
|
-
|
|
1
|
+
# CKBox
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
https://ckeditor.com/ckbox/
|
|
4
|
+
|
|
5
|
+
CKBox is a file management platform that makes working with your files easier while providing an outstanding user experience.
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## Quick start
|
|
10
|
+
|
|
11
|
+
Using a build served from the CDN is the simplest and fastest way of embedding CKBox in your application. Additionally, all the scripts served from the CDN are loaded faster, as they are hosted on multiple servers around the globe, shortening the response time.
|
|
12
|
+
|
|
13
|
+
To start using CKBox on your website, embed the following `script` element in the HTML code of the page:
|
|
14
|
+
|
|
15
|
+
```html
|
|
16
|
+
<script src="https://cdn.ckbox.io/CKBox/1.1.1/ckbox.js"></script>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Quick implementation example:
|
|
20
|
+
|
|
21
|
+
```html
|
|
22
|
+
<html>
|
|
23
|
+
<head>
|
|
24
|
+
<meta charset="UTF-8" />
|
|
25
|
+
<script src="https://cdn.ckbox.io/CKBox/1.1.1/ckbox.js"></script>
|
|
26
|
+
</head>
|
|
27
|
+
<body>
|
|
28
|
+
<div id="ckbox"></div>
|
|
29
|
+
<script>
|
|
30
|
+
// You must provide a valid token URL in order to use the application
|
|
31
|
+
// After registering to CKBox, the fastest way to try out CKBox is to use the development token endpoint:
|
|
32
|
+
// https://ckeditor.com/docs/ckbox/latest/guides/configuration/authentication.html#token-endpoint
|
|
33
|
+
CKBox.mount(document.getElementById("ckbox"), {
|
|
34
|
+
tokenUrl: "https://your.token.url",
|
|
35
|
+
});
|
|
36
|
+
</script>
|
|
37
|
+
</body>
|
|
38
|
+
</html>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Integration with CKEditor 5
|
|
42
|
+
|
|
43
|
+
The code snippet below presents the simplest scenario for integration of CKEditor 5 with CKBox. To read more about the integration, please refer to the [CKEditor 5 integration guide](https://ckeditor.com/docs/ckbox/latest/guides/configuration/ckeditor-integration.html).
|
|
44
|
+
|
|
45
|
+
```html
|
|
46
|
+
<html>
|
|
47
|
+
<head>
|
|
48
|
+
<meta charset="UTF-8" />
|
|
49
|
+
<script src="https://cdn.ckeditor.com/ckeditor5/34.2.0/classic/ckeditor.js"></script>
|
|
50
|
+
<script src="https://cdn.ckbox.io/CKBox/1.1.1/ckbox.js"></script>
|
|
51
|
+
</head>
|
|
52
|
+
<body>
|
|
53
|
+
<div id="editor"></div>
|
|
54
|
+
<script>
|
|
55
|
+
ClassicEditor.create(document.querySelector("#editor"), {
|
|
56
|
+
ckbox: {
|
|
57
|
+
tokenUrl: "https://your.token.url",
|
|
58
|
+
},
|
|
59
|
+
toolbar: [
|
|
60
|
+
"ckbox",
|
|
61
|
+
"imageUpload",
|
|
62
|
+
"|",
|
|
63
|
+
"heading",
|
|
64
|
+
"|",
|
|
65
|
+
"undo",
|
|
66
|
+
"redo",
|
|
67
|
+
"|",
|
|
68
|
+
"bold",
|
|
69
|
+
"italic",
|
|
70
|
+
"|",
|
|
71
|
+
"blockQuote",
|
|
72
|
+
"indent",
|
|
73
|
+
"link",
|
|
74
|
+
"|",
|
|
75
|
+
"bulletedList",
|
|
76
|
+
"numberedList",
|
|
77
|
+
],
|
|
78
|
+
}).catch((error) => {
|
|
79
|
+
console.error(error);
|
|
80
|
+
});
|
|
81
|
+
</script>
|
|
82
|
+
</body>
|
|
83
|
+
</html>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
For more advanced integration scenarios, please refer to the [CKBox documentation](https://ckeditor.com/docs/ckbox/latest/guides/index.html).
|
|
87
|
+
|
|
88
|
+
## Documentation
|
|
89
|
+
|
|
90
|
+
[CKBox documentation](https://ckeditor.com/docs/ckbox/latest/guides/index.html) includes information about:
|
|
91
|
+
|
|
92
|
+
- Enabling CKBox in your application.
|
|
93
|
+
- Integrating CKBox with CKEditor 5.
|
|
94
|
+
- Configuring and customizing CKBox.
|
|
95
|
+
|
|
96
|
+
You will find ready to use code snippets and live examples there.
|
|
97
|
+
|
|
98
|
+
## License
|
|
99
|
+
|
|
100
|
+
**CKBox** (https://ckeditor.com/ckbox/)
|
|
101
|
+
|
|
102
|
+
Copyright (c) 2003-2022, [CKSource Holding sp. z o.o.](https://cksource.com/) All rights reserved.
|
|
103
|
+
**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).
|
|
104
|
+
|
|
105
|
+
Trademarks
|
|
106
|
+
**CKBox** is a trademark of [CKSource Holding sp. z o.o.](https://cksource.com/) All other brand and product names are trademarks, registered trademarks or service marks of their respective holders.
|
package/dist/index.d.ts
CHANGED
|
@@ -93,6 +93,8 @@ declare const WarningFill: React.FC<Props$16>;
|
|
|
93
93
|
|
|
94
94
|
declare const Search: React.FC<Props$16>;
|
|
95
95
|
|
|
96
|
+
declare const XCircle: React.FC<Props$16>;
|
|
97
|
+
|
|
96
98
|
declare const icons$1_ArrowLeftEnd: typeof ArrowLeftEnd;
|
|
97
99
|
declare const icons$1_ArrowRightEnd: typeof ArrowRightEnd;
|
|
98
100
|
declare const icons$1_ArrowLeft: typeof ArrowLeft;
|
|
@@ -121,6 +123,7 @@ declare const icons$1_Upload: typeof Upload;
|
|
|
121
123
|
declare const icons$1_Warning: typeof Warning;
|
|
122
124
|
declare const icons$1_WarningFill: typeof WarningFill;
|
|
123
125
|
declare const icons$1_Search: typeof Search;
|
|
126
|
+
declare const icons$1_XCircle: typeof XCircle;
|
|
124
127
|
declare namespace icons$1 {
|
|
125
128
|
export {
|
|
126
129
|
icons$1_ArrowLeftEnd as ArrowLeftEnd,
|
|
@@ -152,6 +155,7 @@ declare namespace icons$1 {
|
|
|
152
155
|
icons$1_Warning as Warning,
|
|
153
156
|
icons$1_WarningFill as WarningFill,
|
|
154
157
|
icons$1_Search as Search,
|
|
158
|
+
icons$1_XCircle as XCircle,
|
|
155
159
|
};
|
|
156
160
|
}
|
|
157
161
|
|
|
@@ -341,6 +345,10 @@ interface Props$$ {
|
|
|
341
345
|
* Dialog title size.
|
|
342
346
|
*/
|
|
343
347
|
titleSize?: 'sm' | 'md';
|
|
348
|
+
/**
|
|
349
|
+
* Causes header height to be based on font size, even if title is not provided.
|
|
350
|
+
*/
|
|
351
|
+
useFontBasedHeaderHeight?: boolean;
|
|
344
352
|
/**
|
|
345
353
|
* Dialog header type.
|
|
346
354
|
*/
|
|
@@ -522,6 +530,10 @@ interface Props$U {
|
|
|
522
530
|
* Sets `keydown` event handler.
|
|
523
531
|
*/
|
|
524
532
|
onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
|
|
533
|
+
/**
|
|
534
|
+
* Sets `dblclick` event handler.
|
|
535
|
+
*/
|
|
536
|
+
onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
|
|
525
537
|
}
|
|
526
538
|
|
|
527
539
|
declare const Gallery: React.FC<Props$T>;
|
|
@@ -854,6 +866,10 @@ interface Props$J {
|
|
|
854
866
|
* Color variant.
|
|
855
867
|
*/
|
|
856
868
|
variant?: 'transparent' | 'dark';
|
|
869
|
+
/**
|
|
870
|
+
* Optional class to append.
|
|
871
|
+
*/
|
|
872
|
+
className?: string;
|
|
857
873
|
}
|
|
858
874
|
|
|
859
875
|
declare const PanelList: React.FC<Props$I>;
|
|
@@ -1247,14 +1263,6 @@ interface Props$w {
|
|
|
1247
1263
|
* Main content of the component.
|
|
1248
1264
|
*/
|
|
1249
1265
|
children: React.ReactNode;
|
|
1250
|
-
/**
|
|
1251
|
-
* Adds aria-role for `label` column
|
|
1252
|
-
*/
|
|
1253
|
-
labelColAriaLabel?: string;
|
|
1254
|
-
/**
|
|
1255
|
-
* Adds aria-role for `value` column
|
|
1256
|
-
*/
|
|
1257
|
-
valueColAriaLabel?: string;
|
|
1258
1266
|
}
|
|
1259
1267
|
|
|
1260
1268
|
/**
|