@panneau/field-html 1.0.0-alpha.21 → 1.0.0-alpha.224

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 (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +63 -154
  3. package/lib/index.js +79 -171
  4. package/package.json +10 -11
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .quill{-webkit-border-radius:.25rem;border-radius:.25rem;background-color:#fff;color:#212529}.ql-toolbar{-webkit-border-top-left-radius:.25rem;border-top-left-radius:.25rem;-webkit-border-top-right-radius:.25rem;border-top-right-radius:.25rem}.ql-container{-webkit-border-bottom-right-radius:.25rem;border-bottom-right-radius:.25rem;-webkit-border-bottom-left-radius:.25rem;border-bottom-left-radius:.25rem}
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,71 +1,26 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
- import React, { useState, useEffect, useCallback } from 'react';
3
- import PropTypes from 'prop-types';
4
- import classNames from 'classnames';
2
+ import { CKEditor } from '@ckeditor/ckeditor5-react';
5
3
  import InputGroup from '@panneau/field-input-group';
4
+ import classNames from 'classnames';
5
+ import PropTypes from 'prop-types';
6
+ import React, { useState, useEffect, useCallback } from 'react';
6
7
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
7
8
 
8
9
  /**
9
10
  * Locale loader
10
11
  */
11
12
 
12
- var packageCache$2 = null;
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(_ref) {
62
- var _ref$disabled = _ref.disabled,
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$1
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$1 = EditorBuild;
41
+ packageCache = EditorBuild;
87
42
 
88
43
  if (!canceled) {
89
44
  setLoadedPackage({
90
45
  "package": EditorBuild
91
46
  });
92
47
  }
93
- };
48
+ }; // if (inline) {
49
+ // import('@ckeditor/ckeditor5-build-inline').then(onEditorBuildLoaded);
50
+ // } else {
51
+ // import('@ckeditor/ckeditor5-build-classic').then(onEditorBuildLoaded);
52
+ // }
94
53
 
95
- if (inline) {
96
- import('@ckeditor/ckeditor5-build-inline').then(onEditorBuildLoaded);
97
- } else {
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
54
 
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];
128
-
129
- useEffect(function () {
130
- var canceled = false;
131
-
132
- if (loadedPackage !== null) {
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,11 +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
76
+ ckOptions: PropTypes.object,
77
+ // eslint-disable-line react/forbid-prop-types
176
78
  className: PropTypes.string
177
79
  };
178
80
  var defaultProps = {
@@ -180,11 +82,40 @@ var defaultProps = {
180
82
  errors: null,
181
83
  value: null,
182
84
  placeholder: null,
183
- type: null,
184
85
  inline: false,
185
86
  onChange: null,
186
87
  onFocus: null,
187
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
+ },
118
+ ckOptions: null,
188
119
  className: null
189
120
  };
190
121
 
@@ -194,57 +125,36 @@ var HtmlField = function HtmlField(_ref) {
194
125
  var feedback = _ref.feedback,
195
126
  errors = _ref.errors,
196
127
  value = _ref.value,
197
- placeholder = _ref.placeholder,
198
- type = _ref.type,
199
128
  inline = _ref.inline,
200
129
  onChange = _ref.onChange,
201
130
  onFocus = _ref.onFocus,
202
131
  onBlur = _ref.onBlur,
132
+ ckConfig = _ref.ckConfig,
133
+ ckOptions = _ref.ckOptions,
203
134
  className = _ref.className;
204
- var usingCKeditor = type === 'ck-editor';
205
- var CKEditor = useCKEditor({
206
- disabled: !usingCKeditor
207
- });
208
- var CKEditorBuild = useCKEditorBuild({
209
- disabled: !usingCKeditor,
210
- inline: inline
211
- });
212
- var Quill = useQuill({
213
- disabled: usingCKeditor,
214
- inline: inline
215
- });
216
- var finalValue = value !== null ? value : '';
217
- 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;
218
138
  var onCkEditorChange = useCallback(function (event, editor) {
219
139
  var data = editor.getData();
220
140
 
221
141
  if (onChange !== null) {
222
- onChange(data);
142
+ onChange(data === '' ? null : data);
223
143
  }
224
144
  }, [onChange]);
225
145
  var commonProps = {
226
146
  onFocus: onFocus,
227
147
  onBlur: onBlur
228
148
  };
229
- var ckElement = CKEditor !== null && CKEditorBuild !== null ? /*#__PURE__*/React.createElement("div", {
149
+ var ckElement = CKEditorBuild !== null ? /*#__PURE__*/React.createElement("div", {
230
150
  className: finalClassName
231
151
  }, /*#__PURE__*/React.createElement(CKEditor, Object.assign({
232
152
  editor: CKEditorBuild,
233
- data: finalValue,
234
- config: {
235
- placeholder: placeholder
236
- },
153
+ data: CKValue,
154
+ config: ckConfig,
237
155
  onChange: onCkEditorChange
238
- }, commonProps))) : null;
239
- var quillElement = Quill !== null ? /*#__PURE__*/React.createElement(Quill, Object.assign({
240
- className: finalClassName,
241
- value: finalValue,
242
- theme: inline ? 'bubble' : 'snow',
243
- onChange: onChange,
244
- placeholder: placeholder
245
- }, commonProps)) : null;
246
- var element = usingCKeditor ? ckElement : quillElement;
247
- return inline ? /*#__PURE__*/React.createElement(InputGroup, null, element) : element;
156
+ }, commonProps, ckOptions))) : null;
157
+ return inline ? /*#__PURE__*/React.createElement(InputGroup, null, ckElement) : ckElement;
248
158
  };
249
159
 
250
160
  HtmlField.propTypes = propTypes;
@@ -255,5 +165,4 @@ var definition = {
255
165
  component: 'Html'
256
166
  };
257
167
 
258
- export default HtmlField;
259
- export { definition };
168
+ export { HtmlField as default, definition };
package/lib/index.js CHANGED
@@ -3,10 +3,11 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
- var React = require('react');
7
- var PropTypes = require('prop-types');
8
- var classNames = require('classnames');
6
+ var ckeditor5React = require('@ckeditor/ckeditor5-react');
9
7
  var InputGroup = require('@panneau/field-input-group');
8
+ var classNames = require('classnames');
9
+ var PropTypes = require('prop-types');
10
+ var React = require('react');
10
11
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
11
12
 
12
13
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -20,87 +21,39 @@ 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['default'] = e;
29
+ n["default"] = e;
31
30
  return Object.freeze(n);
32
31
  }
33
32
 
34
33
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
35
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
36
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
37
- var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
38
34
  var InputGroup__default = /*#__PURE__*/_interopDefaultLegacy(InputGroup);
35
+ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
36
+ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
37
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
39
38
  var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
40
39
 
41
40
  /**
42
41
  * Locale loader
43
42
  */
44
43
 
45
- var packageCache$2 = null;
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(_ref) {
95
- var _ref$disabled = _ref.disabled,
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$1
54
+ "package": packageCache
102
55
  }),
103
- _useState2 = _slicedToArray__default['default'](_useState, 2),
56
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
104
57
  loadedPackage = _useState2[0]["package"],
105
58
  setLoadedPackage = _useState2[1];
106
59
 
@@ -116,108 +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$1 = EditorBuild;
72
+ packageCache = EditorBuild;
120
73
 
121
74
  if (!canceled) {
122
75
  setLoadedPackage({
123
76
  "package": EditorBuild
124
77
  });
125
78
  }
126
- };
127
-
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
-
135
- return function () {
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];
79
+ }; // if (inline) {
80
+ // import('@ckeditor/ckeditor5-build-inline').then(onEditorBuildLoaded);
81
+ // } else {
82
+ // import('@ckeditor/ckeditor5-build-classic').then(onEditorBuildLoaded);
83
+ // }
161
84
 
162
- React.useEffect(function () {
163
- var canceled = false;
164
85
 
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['default'].oneOf(['valid', 'invalid', 'loading']),
201
- errors: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].arrayOf(PropTypes__default['default'].string)]),
202
- value: PropTypes__default['default'].string,
203
- placeholder: PropTypes__default['default'].string,
204
- type: PropTypes__default['default'].oneOf([null, 'quill', 'ck-editor']),
205
- inline: PropTypes__default['default'].bool,
206
- onChange: PropTypes__default['default'].func,
207
- onFocus: PropTypes__default['default'].func,
208
- onBlur: PropTypes__default['default'].func,
209
- className: PropTypes__default['default'].string
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,
106
+ // eslint-disable-line react/forbid-prop-types
107
+ ckOptions: PropTypes__default["default"].object,
108
+ // eslint-disable-line react/forbid-prop-types
109
+ className: PropTypes__default["default"].string
210
110
  };
211
111
  var defaultProps = {
212
112
  feedback: null,
213
113
  errors: null,
214
114
  value: null,
215
115
  placeholder: null,
216
- type: null,
217
116
  inline: false,
218
117
  onChange: null,
219
118
  onFocus: null,
220
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
+ },
149
+ ckOptions: null,
221
150
  className: null
222
151
  };
223
152
 
@@ -227,57 +156,36 @@ var HtmlField = function HtmlField(_ref) {
227
156
  var feedback = _ref.feedback,
228
157
  errors = _ref.errors,
229
158
  value = _ref.value,
230
- placeholder = _ref.placeholder,
231
- type = _ref.type,
232
159
  inline = _ref.inline,
233
160
  onChange = _ref.onChange,
234
161
  onFocus = _ref.onFocus,
235
162
  onBlur = _ref.onBlur,
163
+ ckConfig = _ref.ckConfig,
164
+ ckOptions = _ref.ckOptions,
236
165
  className = _ref.className;
237
- var usingCKeditor = type === 'ck-editor';
238
- var CKEditor = useCKEditor({
239
- disabled: !usingCKeditor
240
- });
241
- var CKEditorBuild = useCKEditorBuild({
242
- disabled: !usingCKeditor,
243
- inline: inline
244
- });
245
- var Quill = useQuill({
246
- disabled: usingCKeditor,
247
- inline: inline
248
- });
249
- var finalValue = value !== null ? value : '';
250
- 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;
251
169
  var onCkEditorChange = React.useCallback(function (event, editor) {
252
170
  var data = editor.getData();
253
171
 
254
172
  if (onChange !== null) {
255
- onChange(data);
173
+ onChange(data === '' ? null : data);
256
174
  }
257
175
  }, [onChange]);
258
176
  var commonProps = {
259
177
  onFocus: onFocus,
260
178
  onBlur: onBlur
261
179
  };
262
- var ckElement = CKEditor !== null && CKEditorBuild !== null ? /*#__PURE__*/React__default['default'].createElement("div", {
180
+ var ckElement = CKEditorBuild !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
263
181
  className: finalClassName
264
- }, /*#__PURE__*/React__default['default'].createElement(CKEditor, Object.assign({
182
+ }, /*#__PURE__*/React__default["default"].createElement(ckeditor5React.CKEditor, Object.assign({
265
183
  editor: CKEditorBuild,
266
- data: finalValue,
267
- config: {
268
- placeholder: placeholder
269
- },
184
+ data: CKValue,
185
+ config: ckConfig,
270
186
  onChange: onCkEditorChange
271
- }, commonProps))) : null;
272
- var quillElement = Quill !== null ? /*#__PURE__*/React__default['default'].createElement(Quill, Object.assign({
273
- className: finalClassName,
274
- value: finalValue,
275
- theme: inline ? 'bubble' : 'snow',
276
- onChange: onChange,
277
- placeholder: placeholder
278
- }, commonProps)) : null;
279
- var element = usingCKeditor ? ckElement : quillElement;
280
- return inline ? /*#__PURE__*/React__default['default'].createElement(InputGroup__default['default'], null, element) : element;
187
+ }, commonProps, ckOptions))) : null;
188
+ return inline ? /*#__PURE__*/React__default["default"].createElement(InputGroup__default["default"], null, ckElement) : ckElement;
281
189
  };
282
190
 
283
191
  HtmlField.propTypes = propTypes;
@@ -288,5 +196,5 @@ var definition = {
288
196
  component: 'Html'
289
197
  };
290
198
 
291
- exports.default = HtmlField;
199
+ exports["default"] = HtmlField;
292
200
  exports.definition = definition;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@panneau/field-html",
3
- "version": "1.0.0-alpha.21",
3
+ "version": "1.0.0-alpha.224",
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",
48
+ "react-dom": "^16.8.0 || ^17.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",
52
+ "react-dom": "^16.8.0 || ^17.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.0-alpha.21",
60
- "@panneau/field-input-group": "^1.0.0-alpha.21",
61
- "@panneau/themes": "^1.0.0-alpha.21",
59
+ "@panneau/core": "^1.0.0-alpha.224",
60
+ "@panneau/field-input-group": "^1.0.0-alpha.224",
61
+ "@panneau/themes": "^1.0.0-alpha.224",
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": "d20b1a88d4423dfc27902ba03952204a62b14617"
68
+ "gitHead": "3ff8c0088bc2e64b2572d28142e3a80426b440cd"
70
69
  }