@panneau/field-html 3.0.164 → 3.0.166
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/es/index.js +23 -76
- package/lib/index.js +22 -75
- package/package.json +3 -2
package/es/index.js
CHANGED
|
@@ -2,88 +2,38 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
|
2
2
|
import { CKEditor } from '@ckeditor/ckeditor5-react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
|
-
import React, { useState, useEffect, useCallback } from 'react';
|
|
5
|
+
import React, { useState, useRef, useEffect, useCallback } from 'react';
|
|
6
6
|
import InputGroup from '@panneau/field-input-group';
|
|
7
7
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
8
8
|
|
|
9
|
-
/**
|
|
10
|
-
* Locale loader
|
|
11
|
-
*/
|
|
12
|
-
var packageCache = null;
|
|
13
9
|
var useCKEditorBuild = function useCKEditorBuild() {
|
|
14
|
-
var _useState = useState(
|
|
10
|
+
var _useState = useState(null),
|
|
15
11
|
_useState2 = _slicedToArray(_useState, 2),
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
var
|
|
12
|
+
loaded = _useState2[0],
|
|
13
|
+
setLoaded = _useState2[1];
|
|
14
|
+
var ref = useRef(null);
|
|
19
15
|
useEffect(function () {
|
|
20
|
-
|
|
16
|
+
var canceled = false;
|
|
17
|
+
if (loaded) {
|
|
21
18
|
return function () {
|
|
19
|
+
canceled = true;
|
|
22
20
|
};
|
|
23
21
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
22
|
+
import('@panneau/ckeditor/build').then(function (_ref) {
|
|
23
|
+
var _ref$default = _ref["default"],
|
|
24
|
+
Editor = _ref$default === void 0 ? null : _ref$default;
|
|
25
|
+
if (!canceled) {
|
|
26
|
+
ref.current = Editor;
|
|
27
|
+
setLoaded(true);
|
|
28
|
+
}
|
|
29
|
+
});
|
|
31
30
|
return function () {
|
|
31
|
+
canceled = true;
|
|
32
32
|
};
|
|
33
|
-
}, [
|
|
34
|
-
return
|
|
33
|
+
}, [loaded, setLoaded]);
|
|
34
|
+
return ref.current;
|
|
35
35
|
};
|
|
36
36
|
|
|
37
|
-
// import { useEffect, useState } from 'react';
|
|
38
|
-
|
|
39
|
-
// import { loadPackage } from '@panneau/core/utils';
|
|
40
|
-
|
|
41
|
-
// /**
|
|
42
|
-
// * Locale loader
|
|
43
|
-
// */
|
|
44
|
-
// let packageCache = null;
|
|
45
|
-
// const useCKEditorBuild = ({ disabled = false, inline = false } = {}) => {
|
|
46
|
-
// const [{ package: loadedPackage }, setLoadedPackage] = useState({
|
|
47
|
-
// package: packageCache,
|
|
48
|
-
// });
|
|
49
|
-
|
|
50
|
-
// useEffect(() => {
|
|
51
|
-
// let canceled = false;
|
|
52
|
-
// if (loadedPackage !== null) {
|
|
53
|
-
// return () => {
|
|
54
|
-
// canceled = true;
|
|
55
|
-
// };
|
|
56
|
-
// }
|
|
57
|
-
// if (!disabled) {
|
|
58
|
-
// const onEditorBuildLoaded = ({ default: EditorBuild }) => {
|
|
59
|
-
// packageCache = EditorBuild;
|
|
60
|
-
// if (!canceled) {
|
|
61
|
-
// setLoadedPackage({
|
|
62
|
-
// package: EditorBuild,
|
|
63
|
-
// });
|
|
64
|
-
// }
|
|
65
|
-
// };
|
|
66
|
-
|
|
67
|
-
// // if (inline) {
|
|
68
|
-
// // import('@ckeditor/ckeditor5-build-inline').then(onEditorBuildLoaded);
|
|
69
|
-
// // } else {
|
|
70
|
-
// // import('@ckeditor/ckeditor5-build-classic').then(onEditorBuildLoaded);
|
|
71
|
-
// // }
|
|
72
|
-
|
|
73
|
-
// // loadPackage('@panneau/ckeditor/build', () => import('@panneau/ckeditor/build')).then(
|
|
74
|
-
// // onEditorBuildLoaded,
|
|
75
|
-
// // );
|
|
76
|
-
// }
|
|
77
|
-
// return () => {
|
|
78
|
-
// canceled = true;
|
|
79
|
-
// };
|
|
80
|
-
// }, [loadedPackage, setLoadedPackage, disabled, inline]);
|
|
81
|
-
|
|
82
|
-
// return loadedPackage;
|
|
83
|
-
// };
|
|
84
|
-
|
|
85
|
-
// export default useCKEditorBuild;
|
|
86
|
-
|
|
87
37
|
var styles = {"container":"panneau-field-html-container"};
|
|
88
38
|
|
|
89
39
|
var propTypes = {
|
|
@@ -137,10 +87,10 @@ var defaultProps = {
|
|
|
137
87
|
},
|
|
138
88
|
link: {
|
|
139
89
|
addTargetToExternalLinks: true
|
|
140
|
-
},
|
|
141
|
-
mediaEmbed: {
|
|
142
|
-
previewsInData: true
|
|
143
90
|
}
|
|
91
|
+
// mediaEmbed: {
|
|
92
|
+
// previewsInData: true,
|
|
93
|
+
// },
|
|
144
94
|
},
|
|
145
95
|
ckOptions: null,
|
|
146
96
|
className: null
|
|
@@ -157,7 +107,7 @@ var HtmlField = function HtmlField(_ref) {
|
|
|
157
107
|
ckConfig = _ref.ckConfig,
|
|
158
108
|
ckOptions = _ref.ckOptions,
|
|
159
109
|
className = _ref.className;
|
|
160
|
-
var CKEditorBuild = useCKEditorBuild();
|
|
110
|
+
var CKEditorBuild = useCKEditorBuild() || null;
|
|
161
111
|
var CKValue = value !== null ? value : '';
|
|
162
112
|
var finalClassName = inline ? classNames([styles.container, 'form-control', _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), 'is-valid', feedback === 'valid'), 'is-invalid', feedback === 'invalid' || errors !== null && errors.length > 0)]) : classNames([styles.container, _defineProperty({}, className, className !== null)]);
|
|
163
113
|
var onCkEditorChange = useCallback(function (event, editor) {
|
|
@@ -170,9 +120,6 @@ var HtmlField = function HtmlField(_ref) {
|
|
|
170
120
|
onFocus: onFocus,
|
|
171
121
|
onBlur: onBlur
|
|
172
122
|
};
|
|
173
|
-
|
|
174
|
-
// console.log('CKValue', CKValue);
|
|
175
|
-
|
|
176
123
|
var ckElement = CKEditorBuild !== null ? /*#__PURE__*/React.createElement("div", {
|
|
177
124
|
className: finalClassName
|
|
178
125
|
}, /*#__PURE__*/React.createElement(CKEditor, Object.assign({
|
package/lib/index.js
CHANGED
|
@@ -10,84 +10,34 @@ var React = require('react');
|
|
|
10
10
|
var InputGroup = require('@panneau/field-input-group');
|
|
11
11
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
12
12
|
|
|
13
|
-
/**
|
|
14
|
-
* Locale loader
|
|
15
|
-
*/
|
|
16
|
-
var packageCache = null;
|
|
17
13
|
var useCKEditorBuild = function useCKEditorBuild() {
|
|
18
|
-
var _useState = React.useState(
|
|
14
|
+
var _useState = React.useState(null),
|
|
19
15
|
_useState2 = _slicedToArray(_useState, 2),
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
var
|
|
16
|
+
loaded = _useState2[0],
|
|
17
|
+
setLoaded = _useState2[1];
|
|
18
|
+
var ref = React.useRef(null);
|
|
23
19
|
React.useEffect(function () {
|
|
24
|
-
|
|
20
|
+
var canceled = false;
|
|
21
|
+
if (loaded) {
|
|
25
22
|
return function () {
|
|
23
|
+
canceled = true;
|
|
26
24
|
};
|
|
27
25
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
26
|
+
import('@panneau/ckeditor/build').then(function (_ref) {
|
|
27
|
+
var _ref$default = _ref["default"],
|
|
28
|
+
Editor = _ref$default === void 0 ? null : _ref$default;
|
|
29
|
+
if (!canceled) {
|
|
30
|
+
ref.current = Editor;
|
|
31
|
+
setLoaded(true);
|
|
32
|
+
}
|
|
33
|
+
});
|
|
35
34
|
return function () {
|
|
35
|
+
canceled = true;
|
|
36
36
|
};
|
|
37
|
-
}, [
|
|
38
|
-
return
|
|
37
|
+
}, [loaded, setLoaded]);
|
|
38
|
+
return ref.current;
|
|
39
39
|
};
|
|
40
40
|
|
|
41
|
-
// import { useEffect, useState } from 'react';
|
|
42
|
-
|
|
43
|
-
// import { loadPackage } from '@panneau/core/utils';
|
|
44
|
-
|
|
45
|
-
// /**
|
|
46
|
-
// * Locale loader
|
|
47
|
-
// */
|
|
48
|
-
// let packageCache = null;
|
|
49
|
-
// const useCKEditorBuild = ({ disabled = false, inline = false } = {}) => {
|
|
50
|
-
// const [{ package: loadedPackage }, setLoadedPackage] = useState({
|
|
51
|
-
// package: packageCache,
|
|
52
|
-
// });
|
|
53
|
-
|
|
54
|
-
// useEffect(() => {
|
|
55
|
-
// let canceled = false;
|
|
56
|
-
// if (loadedPackage !== null) {
|
|
57
|
-
// return () => {
|
|
58
|
-
// canceled = true;
|
|
59
|
-
// };
|
|
60
|
-
// }
|
|
61
|
-
// if (!disabled) {
|
|
62
|
-
// const onEditorBuildLoaded = ({ default: EditorBuild }) => {
|
|
63
|
-
// packageCache = EditorBuild;
|
|
64
|
-
// if (!canceled) {
|
|
65
|
-
// setLoadedPackage({
|
|
66
|
-
// package: EditorBuild,
|
|
67
|
-
// });
|
|
68
|
-
// }
|
|
69
|
-
// };
|
|
70
|
-
|
|
71
|
-
// // if (inline) {
|
|
72
|
-
// // import('@ckeditor/ckeditor5-build-inline').then(onEditorBuildLoaded);
|
|
73
|
-
// // } else {
|
|
74
|
-
// // import('@ckeditor/ckeditor5-build-classic').then(onEditorBuildLoaded);
|
|
75
|
-
// // }
|
|
76
|
-
|
|
77
|
-
// // loadPackage('@panneau/ckeditor/build', () => import('@panneau/ckeditor/build')).then(
|
|
78
|
-
// // onEditorBuildLoaded,
|
|
79
|
-
// // );
|
|
80
|
-
// }
|
|
81
|
-
// return () => {
|
|
82
|
-
// canceled = true;
|
|
83
|
-
// };
|
|
84
|
-
// }, [loadedPackage, setLoadedPackage, disabled, inline]);
|
|
85
|
-
|
|
86
|
-
// return loadedPackage;
|
|
87
|
-
// };
|
|
88
|
-
|
|
89
|
-
// export default useCKEditorBuild;
|
|
90
|
-
|
|
91
41
|
var styles = {"container":"panneau-field-html-container"};
|
|
92
42
|
|
|
93
43
|
var propTypes = {
|
|
@@ -141,10 +91,10 @@ var defaultProps = {
|
|
|
141
91
|
},
|
|
142
92
|
link: {
|
|
143
93
|
addTargetToExternalLinks: true
|
|
144
|
-
},
|
|
145
|
-
mediaEmbed: {
|
|
146
|
-
previewsInData: true
|
|
147
94
|
}
|
|
95
|
+
// mediaEmbed: {
|
|
96
|
+
// previewsInData: true,
|
|
97
|
+
// },
|
|
148
98
|
},
|
|
149
99
|
ckOptions: null,
|
|
150
100
|
className: null
|
|
@@ -161,7 +111,7 @@ var HtmlField = function HtmlField(_ref) {
|
|
|
161
111
|
ckConfig = _ref.ckConfig,
|
|
162
112
|
ckOptions = _ref.ckOptions,
|
|
163
113
|
className = _ref.className;
|
|
164
|
-
var CKEditorBuild = useCKEditorBuild();
|
|
114
|
+
var CKEditorBuild = useCKEditorBuild() || null;
|
|
165
115
|
var CKValue = value !== null ? value : '';
|
|
166
116
|
var finalClassName = inline ? classNames([styles.container, 'form-control', _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), 'is-valid', feedback === 'valid'), 'is-invalid', feedback === 'invalid' || errors !== null && errors.length > 0)]) : classNames([styles.container, _defineProperty({}, className, className !== null)]);
|
|
167
117
|
var onCkEditorChange = React.useCallback(function (event, editor) {
|
|
@@ -174,9 +124,6 @@ var HtmlField = function HtmlField(_ref) {
|
|
|
174
124
|
onFocus: onFocus,
|
|
175
125
|
onBlur: onBlur
|
|
176
126
|
};
|
|
177
|
-
|
|
178
|
-
// console.log('CKValue', CKValue);
|
|
179
|
-
|
|
180
127
|
var ckElement = CKEditorBuild !== null ? /*#__PURE__*/React.createElement("div", {
|
|
181
128
|
className: finalClassName
|
|
182
129
|
}, /*#__PURE__*/React.createElement(ckeditor5React.CKEditor, Object.assign({
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@panneau/field-html",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.166",
|
|
4
4
|
"description": "A HTML field, using either Quill or CK Editor",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -55,6 +55,7 @@
|
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"@babel/runtime": "^7.12.5",
|
|
57
57
|
"@ckeditor/ckeditor5-react": "^6.2.0",
|
|
58
|
+
"@panneau/ckeditor": "^3.0.166",
|
|
58
59
|
"@panneau/core": "^3.0.164",
|
|
59
60
|
"@panneau/field-input-group": "^3.0.164",
|
|
60
61
|
"@panneau/themes": "^3.0.164",
|
|
@@ -64,5 +65,5 @@
|
|
|
64
65
|
"publishConfig": {
|
|
65
66
|
"access": "public"
|
|
66
67
|
},
|
|
67
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "713f057c4b244e5c7dedc7745fdc06a3c2c312bb"
|
|
68
69
|
}
|