@panneau/field-html 3.0.164 → 3.0.165
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 +25 -76
- package/lib/index.js +24 -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,8 +107,10 @@ 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 : '';
|
|
112
|
+
// console.log('build', CKEditorBuild);
|
|
113
|
+
|
|
162
114
|
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
115
|
var onCkEditorChange = useCallback(function (event, editor) {
|
|
164
116
|
var data = editor.getData();
|
|
@@ -170,9 +122,6 @@ var HtmlField = function HtmlField(_ref) {
|
|
|
170
122
|
onFocus: onFocus,
|
|
171
123
|
onBlur: onBlur
|
|
172
124
|
};
|
|
173
|
-
|
|
174
|
-
// console.log('CKValue', CKValue);
|
|
175
|
-
|
|
176
125
|
var ckElement = CKEditorBuild !== null ? /*#__PURE__*/React.createElement("div", {
|
|
177
126
|
className: finalClassName
|
|
178
127
|
}, /*#__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,8 +111,10 @@ 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 : '';
|
|
116
|
+
// console.log('build', CKEditorBuild);
|
|
117
|
+
|
|
166
118
|
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
119
|
var onCkEditorChange = React.useCallback(function (event, editor) {
|
|
168
120
|
var data = editor.getData();
|
|
@@ -174,9 +126,6 @@ var HtmlField = function HtmlField(_ref) {
|
|
|
174
126
|
onFocus: onFocus,
|
|
175
127
|
onBlur: onBlur
|
|
176
128
|
};
|
|
177
|
-
|
|
178
|
-
// console.log('CKValue', CKValue);
|
|
179
|
-
|
|
180
129
|
var ckElement = CKEditorBuild !== null ? /*#__PURE__*/React.createElement("div", {
|
|
181
130
|
className: finalClassName
|
|
182
131
|
}, /*#__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.165",
|
|
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.165",
|
|
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": "3be43601dbd39c37504b9364886f6d1071f9b5a0"
|
|
68
69
|
}
|