@panneau/field-html 1.0.0-alpha.97 → 1.0.3-alpha.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.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +57 -159
  3. package/lib/index.js +71 -174
  4. package/package.json +10 -11
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .quill{background-color:#fff;-webkit-border-radius:.25rem;border-radius:.25rem;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-left-radius:.25rem;border-bottom-left-radius:.25rem;-webkit-border-bottom-right-radius:.25rem;border-bottom-right-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,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$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
- };
94
-
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
-
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
- 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,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
- quillOptions = _ref.quillOptions,
132
+ ckConfig = _ref.ckConfig,
214
133
  ckOptions = _ref.ckOptions,
215
134
  className = _ref.className;
216
- var usingCKeditor = type === 'ck-editor';
217
- var CKEditor = useCKEditor({
218
- disabled: !usingCKeditor
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
- var ckElement = CKEditor !== null && CKEditorBuild !== null ? /*#__PURE__*/React.createElement("div", {
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: finalValue,
246
- config: {
247
- placeholder: placeholder
248
- },
154
+ data: CKValue,
155
+ config: ckConfig,
249
156
  onChange: onCkEditorChange
250
157
  }, commonProps, ckOptions))) : null;
251
- var quillElement = Quill !== null ? /*#__PURE__*/React.createElement(Quill, Object.assign({
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 HtmlField;
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['default'] = e;
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$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,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$1 = EditorBuild;
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
- 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];
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['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
- 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
- quillOptions: PropTypes__default['default'].shape({
212
- modules: PropTypes__default['default'].shape({
213
- toolbar: PropTypes__default['default'].arrayOf([PropTypes__default['default'].array, PropTypes__default['default'].string])
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
- quillOptions = _ref.quillOptions,
163
+ ckConfig = _ref.ckConfig,
247
164
  ckOptions = _ref.ckOptions,
248
165
  className = _ref.className;
249
- var usingCKeditor = type === 'ck-editor';
250
- var CKEditor = useCKEditor({
251
- disabled: !usingCKeditor
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
- var ckElement = CKEditor !== null && CKEditorBuild !== null ? /*#__PURE__*/React__default['default'].createElement("div", {
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['default'].createElement(CKEditor, Object.assign({
183
+ }, /*#__PURE__*/React__default["default"].createElement(ckeditor5React.CKEditor, Object.assign({
277
184
  editor: CKEditorBuild,
278
- data: finalValue,
279
- config: {
280
- placeholder: placeholder
281
- },
185
+ data: CKValue,
186
+ config: ckConfig,
282
187
  onChange: onCkEditorChange
283
188
  }, commonProps, ckOptions))) : null;
284
- var quillElement = Quill !== null ? /*#__PURE__*/React__default['default'].createElement(Quill, Object.assign({
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.default = HtmlField;
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.0-alpha.97",
3
+ "version": "1.0.3-alpha.1",
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.0-alpha.97",
60
- "@panneau/field-input-group": "^1.0.0-alpha.97",
61
- "@panneau/themes": "^1.0.0-alpha.97",
59
+ "@panneau/core": "^1.0.3-alpha.1",
60
+ "@panneau/field-input-group": "^1.0.3-alpha.1",
61
+ "@panneau/themes": "^1.0.3-alpha.1",
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": "ae027f5d52166649ba60c89f91b0ea5e6df29e64"
68
+ "gitHead": "e04e663c7f1eb692f89a0136f2e8f45024fbe355"
70
69
  }