@panneau/field-html 1.0.0-alpha.94 → 1.0.3-alpha.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/assets/css/styles.css +1 -1
- package/es/index.js +57 -159
- package/lib/index.js +71 -174
- package/package.json +10 -11
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.quill{background-color:#fff
|
|
1
|
+
.quill{background-color:#fff;border-radius:.25rem;color:#212529}.ql-toolbar{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.ql-container{border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}
|
package/es/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
|
+
import { CKEditor } from '@ckeditor/ckeditor5-react';
|
|
2
3
|
import InputGroup from '@panneau/field-input-group';
|
|
3
4
|
import classNames from 'classnames';
|
|
4
5
|
import PropTypes from 'prop-types';
|
|
@@ -9,63 +10,17 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
|
9
10
|
* Locale loader
|
|
10
11
|
*/
|
|
11
12
|
|
|
12
|
-
var packageCache
|
|
13
|
-
|
|
14
|
-
var useCKEditor = function useCKEditor(_ref) {
|
|
15
|
-
var _ref$disabled = _ref.disabled,
|
|
16
|
-
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
|
|
17
|
-
|
|
18
|
-
// transport
|
|
19
|
-
var _useState = useState({
|
|
20
|
-
"package": packageCache$2
|
|
21
|
-
}),
|
|
22
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
23
|
-
loadedPackage = _useState2[0]["package"],
|
|
24
|
-
setLoadedPackage = _useState2[1];
|
|
25
|
-
|
|
26
|
-
useEffect(function () {
|
|
27
|
-
var canceled = false;
|
|
28
|
-
|
|
29
|
-
if (loadedPackage !== null) {
|
|
30
|
-
return function () {
|
|
31
|
-
canceled = true;
|
|
32
|
-
};
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
if (!disabled) {
|
|
36
|
-
import('@ckeditor/ckeditor5-react').then(function (_ref2) {
|
|
37
|
-
var CKEditor = _ref2.CKEditor;
|
|
38
|
-
packageCache$2 = CKEditor;
|
|
39
|
-
|
|
40
|
-
if (!canceled) {
|
|
41
|
-
setLoadedPackage({
|
|
42
|
-
"package": CKEditor
|
|
43
|
-
});
|
|
44
|
-
}
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
return function () {
|
|
49
|
-
canceled = true;
|
|
50
|
-
};
|
|
51
|
-
}, [loadedPackage, setLoadedPackage]);
|
|
52
|
-
return loadedPackage;
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* Locale loader
|
|
57
|
-
*/
|
|
58
|
-
|
|
59
|
-
var packageCache$1 = null;
|
|
13
|
+
var packageCache = null;
|
|
60
14
|
|
|
61
|
-
var useCKEditorBuild = function useCKEditorBuild(
|
|
62
|
-
var _ref
|
|
15
|
+
var useCKEditorBuild = function useCKEditorBuild() {
|
|
16
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
17
|
+
_ref$disabled = _ref.disabled,
|
|
63
18
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
64
19
|
_ref$inline = _ref.inline,
|
|
65
20
|
inline = _ref$inline === void 0 ? false : _ref$inline;
|
|
66
21
|
|
|
67
22
|
var _useState = useState({
|
|
68
|
-
"package": packageCache
|
|
23
|
+
"package": packageCache
|
|
69
24
|
}),
|
|
70
25
|
_useState2 = _slicedToArray(_useState, 2),
|
|
71
26
|
loadedPackage = _useState2[0]["package"],
|
|
@@ -83,83 +38,27 @@ var useCKEditorBuild = function useCKEditorBuild(_ref) {
|
|
|
83
38
|
if (!disabled) {
|
|
84
39
|
var onEditorBuildLoaded = function onEditorBuildLoaded(_ref2) {
|
|
85
40
|
var EditorBuild = _ref2["default"];
|
|
86
|
-
packageCache
|
|
41
|
+
packageCache = EditorBuild;
|
|
87
42
|
|
|
88
43
|
if (!canceled) {
|
|
89
44
|
setLoadedPackage({
|
|
90
45
|
"package": EditorBuild
|
|
91
46
|
});
|
|
92
47
|
}
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
}
|
|
98
|
-
import('@ckeditor/ckeditor5-build-classic').then(onEditorBuildLoaded);
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
return function () {
|
|
103
|
-
canceled = true;
|
|
104
|
-
};
|
|
105
|
-
}, [loadedPackage, setLoadedPackage, disabled, inline]);
|
|
106
|
-
return loadedPackage;
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
/**
|
|
110
|
-
* Locale loader
|
|
111
|
-
*/
|
|
112
|
-
|
|
113
|
-
var packageCache = null;
|
|
114
|
-
|
|
115
|
-
var useQuill = function useQuill(_ref) {
|
|
116
|
-
var _ref$disabled = _ref.disabled,
|
|
117
|
-
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
118
|
-
_ref$inline = _ref.inline,
|
|
119
|
-
inline = _ref$inline === void 0 ? false : _ref$inline;
|
|
120
|
-
|
|
121
|
-
// transport
|
|
122
|
-
var _useState = useState({
|
|
123
|
-
"package": packageCache
|
|
124
|
-
}),
|
|
125
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
126
|
-
loadedPackage = _useState2[0]["package"],
|
|
127
|
-
setLoadedPackage = _useState2[1];
|
|
48
|
+
}; // if (inline) {
|
|
49
|
+
// import('@ckeditor/ckeditor5-build-inline').then(onEditorBuildLoaded);
|
|
50
|
+
// } else {
|
|
51
|
+
// import('@ckeditor/ckeditor5-build-classic').then(onEditorBuildLoaded);
|
|
52
|
+
// }
|
|
128
53
|
|
|
129
|
-
useEffect(function () {
|
|
130
|
-
var canceled = false;
|
|
131
54
|
|
|
132
|
-
|
|
133
|
-
return function () {
|
|
134
|
-
canceled = true;
|
|
135
|
-
};
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
if (!disabled) {
|
|
139
|
-
var onThemeLoaded = function onThemeLoaded() {
|
|
140
|
-
import('react-quill').then(function (component) {
|
|
141
|
-
var EditorBuild = component["default"];
|
|
142
|
-
packageCache = EditorBuild;
|
|
143
|
-
|
|
144
|
-
if (!canceled) {
|
|
145
|
-
setLoadedPackage({
|
|
146
|
-
"package": EditorBuild
|
|
147
|
-
});
|
|
148
|
-
}
|
|
149
|
-
});
|
|
150
|
-
};
|
|
151
|
-
|
|
152
|
-
if (inline) {
|
|
153
|
-
import('react-quill/dist/quill.bubble.css').then(onThemeLoaded);
|
|
154
|
-
} else {
|
|
155
|
-
import('react-quill/dist/quill.snow.css').then(onThemeLoaded);
|
|
156
|
-
}
|
|
55
|
+
import('@ckeditor/ckeditor5-build-classic').then(onEditorBuildLoaded);
|
|
157
56
|
}
|
|
158
57
|
|
|
159
58
|
return function () {
|
|
160
59
|
canceled = true;
|
|
161
60
|
};
|
|
162
|
-
}, [loadedPackage, setLoadedPackage, inline]);
|
|
61
|
+
}, [loadedPackage, setLoadedPackage, disabled, inline]);
|
|
163
62
|
return loadedPackage;
|
|
164
63
|
};
|
|
165
64
|
|
|
@@ -168,19 +67,14 @@ var propTypes = {
|
|
|
168
67
|
errors: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
|
|
169
68
|
value: PropTypes.string,
|
|
170
69
|
placeholder: PropTypes.string,
|
|
171
|
-
type: PropTypes.oneOf([null, 'quill', 'ck-editor']),
|
|
172
70
|
inline: PropTypes.bool,
|
|
173
71
|
onChange: PropTypes.func,
|
|
174
72
|
onFocus: PropTypes.func,
|
|
175
73
|
onBlur: PropTypes.func,
|
|
74
|
+
ckConfig: PropTypes.object,
|
|
75
|
+
// eslint-disable-line react/forbid-prop-types
|
|
176
76
|
ckOptions: PropTypes.object,
|
|
177
77
|
// eslint-disable-line react/forbid-prop-types
|
|
178
|
-
quillOptions: PropTypes.shape({
|
|
179
|
-
modules: PropTypes.shape({
|
|
180
|
-
toolbar: PropTypes.arrayOf([PropTypes.array, PropTypes.string])
|
|
181
|
-
}),
|
|
182
|
-
formats: PropTypes.arrayOf(PropTypes.string)
|
|
183
|
-
}),
|
|
184
78
|
className: PropTypes.string
|
|
185
79
|
};
|
|
186
80
|
var defaultProps = {
|
|
@@ -188,13 +82,40 @@ var defaultProps = {
|
|
|
188
82
|
errors: null,
|
|
189
83
|
value: null,
|
|
190
84
|
placeholder: null,
|
|
191
|
-
type: null,
|
|
192
85
|
inline: false,
|
|
193
86
|
onChange: null,
|
|
194
87
|
onFocus: null,
|
|
195
88
|
onBlur: null,
|
|
89
|
+
ckConfig: {
|
|
90
|
+
toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList' // 'blockQuote',
|
|
91
|
+
// 'mediaEmbed',
|
|
92
|
+
],
|
|
93
|
+
heading: {
|
|
94
|
+
options: [{
|
|
95
|
+
model: 'paragraph',
|
|
96
|
+
title: 'Paragraph'
|
|
97
|
+
}, {
|
|
98
|
+
model: 'heading1',
|
|
99
|
+
view: 'h1',
|
|
100
|
+
title: 'Heading 1'
|
|
101
|
+
}, {
|
|
102
|
+
model: 'heading2',
|
|
103
|
+
view: 'h2',
|
|
104
|
+
title: 'Heading 2'
|
|
105
|
+
}, {
|
|
106
|
+
model: 'heading3',
|
|
107
|
+
view: 'h3',
|
|
108
|
+
title: 'Heading 3'
|
|
109
|
+
}]
|
|
110
|
+
},
|
|
111
|
+
link: {
|
|
112
|
+
addTargetToExternalLinks: true
|
|
113
|
+
},
|
|
114
|
+
mediaEmbed: {
|
|
115
|
+
previewsInData: true
|
|
116
|
+
}
|
|
117
|
+
},
|
|
196
118
|
ckOptions: null,
|
|
197
|
-
quillOptions: null,
|
|
198
119
|
className: null
|
|
199
120
|
};
|
|
200
121
|
|
|
@@ -204,59 +125,37 @@ var HtmlField = function HtmlField(_ref) {
|
|
|
204
125
|
var feedback = _ref.feedback,
|
|
205
126
|
errors = _ref.errors,
|
|
206
127
|
value = _ref.value,
|
|
207
|
-
placeholder = _ref.placeholder,
|
|
208
|
-
type = _ref.type,
|
|
209
128
|
inline = _ref.inline,
|
|
210
129
|
onChange = _ref.onChange,
|
|
211
130
|
onFocus = _ref.onFocus,
|
|
212
131
|
onBlur = _ref.onBlur,
|
|
213
|
-
|
|
132
|
+
ckConfig = _ref.ckConfig,
|
|
214
133
|
ckOptions = _ref.ckOptions,
|
|
215
134
|
className = _ref.className;
|
|
216
|
-
var
|
|
217
|
-
var
|
|
218
|
-
|
|
219
|
-
});
|
|
220
|
-
var CKEditorBuild = useCKEditorBuild({
|
|
221
|
-
disabled: !usingCKeditor,
|
|
222
|
-
inline: inline
|
|
223
|
-
});
|
|
224
|
-
var Quill = useQuill({
|
|
225
|
-
disabled: usingCKeditor,
|
|
226
|
-
inline: inline
|
|
227
|
-
});
|
|
228
|
-
var finalValue = value !== null ? value : '';
|
|
229
|
-
var finalClassName = inline ? classNames(['form-control', (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, 'is-valid', feedback === 'valid'), _defineProperty(_ref2, 'is-invalid', feedback === 'invalid' && errors !== null && errors.length > 0), _ref2)]) : className;
|
|
135
|
+
var CKEditorBuild = useCKEditorBuild();
|
|
136
|
+
var CKValue = value !== null ? value : '';
|
|
137
|
+
var finalClassName = inline ? classNames(['form-control', (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, 'is-valid', feedback === 'valid'), _defineProperty(_ref2, 'is-invalid', feedback === 'invalid' || errors !== null && errors.length > 0), _ref2)]) : className;
|
|
230
138
|
var onCkEditorChange = useCallback(function (event, editor) {
|
|
231
139
|
var data = editor.getData();
|
|
232
140
|
|
|
233
141
|
if (onChange !== null) {
|
|
234
|
-
onChange(data);
|
|
142
|
+
onChange(data === '' ? null : data);
|
|
235
143
|
}
|
|
236
144
|
}, [onChange]);
|
|
237
145
|
var commonProps = {
|
|
238
146
|
onFocus: onFocus,
|
|
239
147
|
onBlur: onBlur
|
|
240
|
-
};
|
|
241
|
-
|
|
148
|
+
}; // console.log('CKValue', CKValue);
|
|
149
|
+
|
|
150
|
+
var ckElement = CKEditorBuild !== null ? /*#__PURE__*/React.createElement("div", {
|
|
242
151
|
className: finalClassName
|
|
243
152
|
}, /*#__PURE__*/React.createElement(CKEditor, Object.assign({
|
|
244
153
|
editor: CKEditorBuild,
|
|
245
|
-
data:
|
|
246
|
-
config:
|
|
247
|
-
placeholder: placeholder
|
|
248
|
-
},
|
|
154
|
+
data: CKValue,
|
|
155
|
+
config: ckConfig,
|
|
249
156
|
onChange: onCkEditorChange
|
|
250
157
|
}, commonProps, ckOptions))) : null;
|
|
251
|
-
|
|
252
|
-
className: finalClassName,
|
|
253
|
-
value: finalValue,
|
|
254
|
-
theme: inline ? 'bubble' : 'snow',
|
|
255
|
-
onChange: onChange,
|
|
256
|
-
placeholder: placeholder
|
|
257
|
-
}, commonProps, quillOptions)) : null;
|
|
258
|
-
var element = usingCKeditor ? ckElement : quillElement;
|
|
259
|
-
return inline ? /*#__PURE__*/React.createElement(InputGroup, null, element) : element;
|
|
158
|
+
return inline ? /*#__PURE__*/React.createElement(InputGroup, null, ckElement) : ckElement;
|
|
260
159
|
};
|
|
261
160
|
|
|
262
161
|
HtmlField.propTypes = propTypes;
|
|
@@ -267,5 +166,4 @@ var definition = {
|
|
|
267
166
|
component: 'Html'
|
|
268
167
|
};
|
|
269
168
|
|
|
270
|
-
export default
|
|
271
|
-
export { definition };
|
|
169
|
+
export { HtmlField as default, definition };
|
package/lib/index.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
|
+
var ckeditor5React = require('@ckeditor/ckeditor5-react');
|
|
6
7
|
var InputGroup = require('@panneau/field-input-group');
|
|
7
8
|
var classNames = require('classnames');
|
|
8
9
|
var PropTypes = require('prop-types');
|
|
@@ -20,14 +21,12 @@ function _interopNamespace(e) {
|
|
|
20
21
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
21
22
|
Object.defineProperty(n, k, d.get ? d : {
|
|
22
23
|
enumerable: true,
|
|
23
|
-
get: function () {
|
|
24
|
-
return e[k];
|
|
25
|
-
}
|
|
24
|
+
get: function () { return e[k]; }
|
|
26
25
|
});
|
|
27
26
|
}
|
|
28
27
|
});
|
|
29
28
|
}
|
|
30
|
-
n[
|
|
29
|
+
n["default"] = e;
|
|
31
30
|
return Object.freeze(n);
|
|
32
31
|
}
|
|
33
32
|
|
|
@@ -42,65 +41,19 @@ var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray)
|
|
|
42
41
|
* Locale loader
|
|
43
42
|
*/
|
|
44
43
|
|
|
45
|
-
var packageCache
|
|
46
|
-
|
|
47
|
-
var useCKEditor = function useCKEditor(_ref) {
|
|
48
|
-
var _ref$disabled = _ref.disabled,
|
|
49
|
-
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
|
|
50
|
-
|
|
51
|
-
// transport
|
|
52
|
-
var _useState = React.useState({
|
|
53
|
-
"package": packageCache$2
|
|
54
|
-
}),
|
|
55
|
-
_useState2 = _slicedToArray__default['default'](_useState, 2),
|
|
56
|
-
loadedPackage = _useState2[0]["package"],
|
|
57
|
-
setLoadedPackage = _useState2[1];
|
|
58
|
-
|
|
59
|
-
React.useEffect(function () {
|
|
60
|
-
var canceled = false;
|
|
61
|
-
|
|
62
|
-
if (loadedPackage !== null) {
|
|
63
|
-
return function () {
|
|
64
|
-
canceled = true;
|
|
65
|
-
};
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
if (!disabled) {
|
|
69
|
-
Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@ckeditor/ckeditor5-react')); }).then(function (_ref2) {
|
|
70
|
-
var CKEditor = _ref2.CKEditor;
|
|
71
|
-
packageCache$2 = CKEditor;
|
|
72
|
-
|
|
73
|
-
if (!canceled) {
|
|
74
|
-
setLoadedPackage({
|
|
75
|
-
"package": CKEditor
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
});
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
return function () {
|
|
82
|
-
canceled = true;
|
|
83
|
-
};
|
|
84
|
-
}, [loadedPackage, setLoadedPackage]);
|
|
85
|
-
return loadedPackage;
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
/**
|
|
89
|
-
* Locale loader
|
|
90
|
-
*/
|
|
91
|
-
|
|
92
|
-
var packageCache$1 = null;
|
|
44
|
+
var packageCache = null;
|
|
93
45
|
|
|
94
|
-
var useCKEditorBuild = function useCKEditorBuild(
|
|
95
|
-
var _ref
|
|
46
|
+
var useCKEditorBuild = function useCKEditorBuild() {
|
|
47
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
48
|
+
_ref$disabled = _ref.disabled,
|
|
96
49
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
97
50
|
_ref$inline = _ref.inline,
|
|
98
51
|
inline = _ref$inline === void 0 ? false : _ref$inline;
|
|
99
52
|
|
|
100
53
|
var _useState = React.useState({
|
|
101
|
-
"package": packageCache
|
|
54
|
+
"package": packageCache
|
|
102
55
|
}),
|
|
103
|
-
_useState2 = _slicedToArray__default[
|
|
56
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
104
57
|
loadedPackage = _useState2[0]["package"],
|
|
105
58
|
setLoadedPackage = _useState2[1];
|
|
106
59
|
|
|
@@ -116,118 +69,84 @@ var useCKEditorBuild = function useCKEditorBuild(_ref) {
|
|
|
116
69
|
if (!disabled) {
|
|
117
70
|
var onEditorBuildLoaded = function onEditorBuildLoaded(_ref2) {
|
|
118
71
|
var EditorBuild = _ref2["default"];
|
|
119
|
-
packageCache
|
|
72
|
+
packageCache = EditorBuild;
|
|
120
73
|
|
|
121
74
|
if (!canceled) {
|
|
122
75
|
setLoadedPackage({
|
|
123
76
|
"package": EditorBuild
|
|
124
77
|
});
|
|
125
78
|
}
|
|
126
|
-
};
|
|
79
|
+
}; // if (inline) {
|
|
80
|
+
// import('@ckeditor/ckeditor5-build-inline').then(onEditorBuildLoaded);
|
|
81
|
+
// } else {
|
|
82
|
+
// import('@ckeditor/ckeditor5-build-classic').then(onEditorBuildLoaded);
|
|
83
|
+
// }
|
|
127
84
|
|
|
128
|
-
if (inline) {
|
|
129
|
-
Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@ckeditor/ckeditor5-build-inline')); }).then(onEditorBuildLoaded);
|
|
130
|
-
} else {
|
|
131
|
-
Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@ckeditor/ckeditor5-build-classic')); }).then(onEditorBuildLoaded);
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
85
|
|
|
135
|
-
|
|
136
|
-
canceled = true;
|
|
137
|
-
};
|
|
138
|
-
}, [loadedPackage, setLoadedPackage, disabled, inline]);
|
|
139
|
-
return loadedPackage;
|
|
140
|
-
};
|
|
141
|
-
|
|
142
|
-
/**
|
|
143
|
-
* Locale loader
|
|
144
|
-
*/
|
|
145
|
-
|
|
146
|
-
var packageCache = null;
|
|
147
|
-
|
|
148
|
-
var useQuill = function useQuill(_ref) {
|
|
149
|
-
var _ref$disabled = _ref.disabled,
|
|
150
|
-
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
151
|
-
_ref$inline = _ref.inline,
|
|
152
|
-
inline = _ref$inline === void 0 ? false : _ref$inline;
|
|
153
|
-
|
|
154
|
-
// transport
|
|
155
|
-
var _useState = React.useState({
|
|
156
|
-
"package": packageCache
|
|
157
|
-
}),
|
|
158
|
-
_useState2 = _slicedToArray__default['default'](_useState, 2),
|
|
159
|
-
loadedPackage = _useState2[0]["package"],
|
|
160
|
-
setLoadedPackage = _useState2[1];
|
|
161
|
-
|
|
162
|
-
React.useEffect(function () {
|
|
163
|
-
var canceled = false;
|
|
164
|
-
|
|
165
|
-
if (loadedPackage !== null) {
|
|
166
|
-
return function () {
|
|
167
|
-
canceled = true;
|
|
168
|
-
};
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
if (!disabled) {
|
|
172
|
-
var onThemeLoaded = function onThemeLoaded() {
|
|
173
|
-
Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('react-quill')); }).then(function (component) {
|
|
174
|
-
var EditorBuild = component["default"];
|
|
175
|
-
packageCache = EditorBuild;
|
|
176
|
-
|
|
177
|
-
if (!canceled) {
|
|
178
|
-
setLoadedPackage({
|
|
179
|
-
"package": EditorBuild
|
|
180
|
-
});
|
|
181
|
-
}
|
|
182
|
-
});
|
|
183
|
-
};
|
|
184
|
-
|
|
185
|
-
if (inline) {
|
|
186
|
-
Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('react-quill/dist/quill.bubble.css')); }).then(onThemeLoaded);
|
|
187
|
-
} else {
|
|
188
|
-
Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('react-quill/dist/quill.snow.css')); }).then(onThemeLoaded);
|
|
189
|
-
}
|
|
86
|
+
Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@ckeditor/ckeditor5-build-classic')); }).then(onEditorBuildLoaded);
|
|
190
87
|
}
|
|
191
88
|
|
|
192
89
|
return function () {
|
|
193
90
|
canceled = true;
|
|
194
91
|
};
|
|
195
|
-
}, [loadedPackage, setLoadedPackage, inline]);
|
|
92
|
+
}, [loadedPackage, setLoadedPackage, disabled, inline]);
|
|
196
93
|
return loadedPackage;
|
|
197
94
|
};
|
|
198
95
|
|
|
199
96
|
var propTypes = {
|
|
200
|
-
feedback: PropTypes__default[
|
|
201
|
-
errors: PropTypes__default[
|
|
202
|
-
value: PropTypes__default[
|
|
203
|
-
placeholder: PropTypes__default[
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
ckOptions: PropTypes__default['default'].object,
|
|
97
|
+
feedback: PropTypes__default["default"].oneOf(['valid', 'invalid', 'loading']),
|
|
98
|
+
errors: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)]),
|
|
99
|
+
value: PropTypes__default["default"].string,
|
|
100
|
+
placeholder: PropTypes__default["default"].string,
|
|
101
|
+
inline: PropTypes__default["default"].bool,
|
|
102
|
+
onChange: PropTypes__default["default"].func,
|
|
103
|
+
onFocus: PropTypes__default["default"].func,
|
|
104
|
+
onBlur: PropTypes__default["default"].func,
|
|
105
|
+
ckConfig: PropTypes__default["default"].object,
|
|
210
106
|
// eslint-disable-line react/forbid-prop-types
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
}),
|
|
215
|
-
formats: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string)
|
|
216
|
-
}),
|
|
217
|
-
className: PropTypes__default['default'].string
|
|
107
|
+
ckOptions: PropTypes__default["default"].object,
|
|
108
|
+
// eslint-disable-line react/forbid-prop-types
|
|
109
|
+
className: PropTypes__default["default"].string
|
|
218
110
|
};
|
|
219
111
|
var defaultProps = {
|
|
220
112
|
feedback: null,
|
|
221
113
|
errors: null,
|
|
222
114
|
value: null,
|
|
223
115
|
placeholder: null,
|
|
224
|
-
type: null,
|
|
225
116
|
inline: false,
|
|
226
117
|
onChange: null,
|
|
227
118
|
onFocus: null,
|
|
228
119
|
onBlur: null,
|
|
120
|
+
ckConfig: {
|
|
121
|
+
toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList' // 'blockQuote',
|
|
122
|
+
// 'mediaEmbed',
|
|
123
|
+
],
|
|
124
|
+
heading: {
|
|
125
|
+
options: [{
|
|
126
|
+
model: 'paragraph',
|
|
127
|
+
title: 'Paragraph'
|
|
128
|
+
}, {
|
|
129
|
+
model: 'heading1',
|
|
130
|
+
view: 'h1',
|
|
131
|
+
title: 'Heading 1'
|
|
132
|
+
}, {
|
|
133
|
+
model: 'heading2',
|
|
134
|
+
view: 'h2',
|
|
135
|
+
title: 'Heading 2'
|
|
136
|
+
}, {
|
|
137
|
+
model: 'heading3',
|
|
138
|
+
view: 'h3',
|
|
139
|
+
title: 'Heading 3'
|
|
140
|
+
}]
|
|
141
|
+
},
|
|
142
|
+
link: {
|
|
143
|
+
addTargetToExternalLinks: true
|
|
144
|
+
},
|
|
145
|
+
mediaEmbed: {
|
|
146
|
+
previewsInData: true
|
|
147
|
+
}
|
|
148
|
+
},
|
|
229
149
|
ckOptions: null,
|
|
230
|
-
quillOptions: null,
|
|
231
150
|
className: null
|
|
232
151
|
};
|
|
233
152
|
|
|
@@ -237,59 +156,37 @@ var HtmlField = function HtmlField(_ref) {
|
|
|
237
156
|
var feedback = _ref.feedback,
|
|
238
157
|
errors = _ref.errors,
|
|
239
158
|
value = _ref.value,
|
|
240
|
-
placeholder = _ref.placeholder,
|
|
241
|
-
type = _ref.type,
|
|
242
159
|
inline = _ref.inline,
|
|
243
160
|
onChange = _ref.onChange,
|
|
244
161
|
onFocus = _ref.onFocus,
|
|
245
162
|
onBlur = _ref.onBlur,
|
|
246
|
-
|
|
163
|
+
ckConfig = _ref.ckConfig,
|
|
247
164
|
ckOptions = _ref.ckOptions,
|
|
248
165
|
className = _ref.className;
|
|
249
|
-
var
|
|
250
|
-
var
|
|
251
|
-
|
|
252
|
-
});
|
|
253
|
-
var CKEditorBuild = useCKEditorBuild({
|
|
254
|
-
disabled: !usingCKeditor,
|
|
255
|
-
inline: inline
|
|
256
|
-
});
|
|
257
|
-
var Quill = useQuill({
|
|
258
|
-
disabled: usingCKeditor,
|
|
259
|
-
inline: inline
|
|
260
|
-
});
|
|
261
|
-
var finalValue = value !== null ? value : '';
|
|
262
|
-
var finalClassName = inline ? classNames__default['default'](['form-control', (_ref2 = {}, _defineProperty__default['default'](_ref2, className, className !== null), _defineProperty__default['default'](_ref2, 'is-valid', feedback === 'valid'), _defineProperty__default['default'](_ref2, 'is-invalid', feedback === 'invalid' && errors !== null && errors.length > 0), _ref2)]) : className;
|
|
166
|
+
var CKEditorBuild = useCKEditorBuild();
|
|
167
|
+
var CKValue = value !== null ? value : '';
|
|
168
|
+
var finalClassName = inline ? classNames__default["default"](['form-control', (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, 'is-valid', feedback === 'valid'), _defineProperty__default["default"](_ref2, 'is-invalid', feedback === 'invalid' || errors !== null && errors.length > 0), _ref2)]) : className;
|
|
263
169
|
var onCkEditorChange = React.useCallback(function (event, editor) {
|
|
264
170
|
var data = editor.getData();
|
|
265
171
|
|
|
266
172
|
if (onChange !== null) {
|
|
267
|
-
onChange(data);
|
|
173
|
+
onChange(data === '' ? null : data);
|
|
268
174
|
}
|
|
269
175
|
}, [onChange]);
|
|
270
176
|
var commonProps = {
|
|
271
177
|
onFocus: onFocus,
|
|
272
178
|
onBlur: onBlur
|
|
273
|
-
};
|
|
274
|
-
|
|
179
|
+
}; // console.log('CKValue', CKValue);
|
|
180
|
+
|
|
181
|
+
var ckElement = CKEditorBuild !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
275
182
|
className: finalClassName
|
|
276
|
-
}, /*#__PURE__*/React__default[
|
|
183
|
+
}, /*#__PURE__*/React__default["default"].createElement(ckeditor5React.CKEditor, Object.assign({
|
|
277
184
|
editor: CKEditorBuild,
|
|
278
|
-
data:
|
|
279
|
-
config:
|
|
280
|
-
placeholder: placeholder
|
|
281
|
-
},
|
|
185
|
+
data: CKValue,
|
|
186
|
+
config: ckConfig,
|
|
282
187
|
onChange: onCkEditorChange
|
|
283
188
|
}, commonProps, ckOptions))) : null;
|
|
284
|
-
|
|
285
|
-
className: finalClassName,
|
|
286
|
-
value: finalValue,
|
|
287
|
-
theme: inline ? 'bubble' : 'snow',
|
|
288
|
-
onChange: onChange,
|
|
289
|
-
placeholder: placeholder
|
|
290
|
-
}, commonProps, quillOptions)) : null;
|
|
291
|
-
var element = usingCKeditor ? ckElement : quillElement;
|
|
292
|
-
return inline ? /*#__PURE__*/React__default['default'].createElement(InputGroup__default['default'], null, element) : element;
|
|
189
|
+
return inline ? /*#__PURE__*/React__default["default"].createElement(InputGroup__default["default"], null, ckElement) : ckElement;
|
|
293
190
|
};
|
|
294
191
|
|
|
295
192
|
HtmlField.propTypes = propTypes;
|
|
@@ -300,5 +197,5 @@ var definition = {
|
|
|
300
197
|
component: 'Html'
|
|
301
198
|
};
|
|
302
199
|
|
|
303
|
-
exports
|
|
200
|
+
exports["default"] = HtmlField;
|
|
304
201
|
exports.definition = definition;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@panneau/field-html",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3-alpha.0",
|
|
4
4
|
"description": "A HTML field, using either Quill or CK Editor",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -44,27 +44,26 @@
|
|
|
44
44
|
"prepare": "../../scripts/prepare-package.sh"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"react": "^16.8.0",
|
|
48
|
-
"react-dom": "^16.8.0"
|
|
47
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
48
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
|
-
"react": "^16.8.0",
|
|
52
|
-
"react-dom": "^16.8.0"
|
|
51
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
52
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"@babel/runtime": "^7.12.5",
|
|
56
56
|
"@ckeditor/ckeditor5-build-classic": "^27.0.0",
|
|
57
57
|
"@ckeditor/ckeditor5-build-inline": "^27.0.0",
|
|
58
58
|
"@ckeditor/ckeditor5-react": "^3.0.2",
|
|
59
|
-
"@panneau/core": "^1.0.
|
|
60
|
-
"@panneau/field-input-group": "^1.0.
|
|
61
|
-
"@panneau/themes": "^1.0.
|
|
59
|
+
"@panneau/core": "^1.0.3-alpha.0",
|
|
60
|
+
"@panneau/field-input-group": "^1.0.3-alpha.0",
|
|
61
|
+
"@panneau/themes": "^1.0.3-alpha.0",
|
|
62
62
|
"classnames": "^2.2.6",
|
|
63
|
-
"prop-types": "^15.7.2"
|
|
64
|
-
"react-quill": "^2.0.0-beta.2"
|
|
63
|
+
"prop-types": "^15.7.2"
|
|
65
64
|
},
|
|
66
65
|
"publishConfig": {
|
|
67
66
|
"access": "public"
|
|
68
67
|
},
|
|
69
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "7f9c472b97c79a5c81da30730549acdde2de5c9f"
|
|
70
69
|
}
|