@panneau/field-html 3.0.162 → 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 +22 -47
- package/lib/index.js +21 -46
- package/package.json +6 -7
package/es/index.js
CHANGED
|
@@ -2,60 +2,36 @@ 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
|
-
import { loadPackage } from '@panneau/core/utils';
|
|
9
8
|
|
|
10
|
-
/**
|
|
11
|
-
* Locale loader
|
|
12
|
-
*/
|
|
13
|
-
var packageCache = null;
|
|
14
9
|
var useCKEditorBuild = function useCKEditorBuild() {
|
|
15
|
-
var
|
|
16
|
-
_ref$disabled = _ref.disabled,
|
|
17
|
-
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
18
|
-
_ref$inline = _ref.inline,
|
|
19
|
-
inline = _ref$inline === void 0 ? false : _ref$inline;
|
|
20
|
-
var _useState = useState({
|
|
21
|
-
"package": packageCache
|
|
22
|
-
}),
|
|
10
|
+
var _useState = useState(null),
|
|
23
11
|
_useState2 = _slicedToArray(_useState, 2),
|
|
24
|
-
|
|
25
|
-
|
|
12
|
+
loaded = _useState2[0],
|
|
13
|
+
setLoaded = _useState2[1];
|
|
14
|
+
var ref = useRef(null);
|
|
26
15
|
useEffect(function () {
|
|
27
16
|
var canceled = false;
|
|
28
|
-
if (
|
|
17
|
+
if (loaded) {
|
|
29
18
|
return function () {
|
|
30
19
|
canceled = true;
|
|
31
20
|
};
|
|
32
21
|
}
|
|
33
|
-
|
|
34
|
-
var
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
// if (inline) {
|
|
45
|
-
// import('@ckeditor/ckeditor5-build-inline').then(onEditorBuildLoaded);
|
|
46
|
-
// } else {
|
|
47
|
-
// import('@ckeditor/ckeditor5-build-classic').then(onEditorBuildLoaded);
|
|
48
|
-
// }
|
|
49
|
-
|
|
50
|
-
loadPackage('@ckeditor/ckeditor5-build-classic', function () {
|
|
51
|
-
return import('@ckeditor/ckeditor5-build-classic');
|
|
52
|
-
}).then(onEditorBuildLoaded);
|
|
53
|
-
}
|
|
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
|
+
});
|
|
54
30
|
return function () {
|
|
55
31
|
canceled = true;
|
|
56
32
|
};
|
|
57
|
-
}, [
|
|
58
|
-
return
|
|
33
|
+
}, [loaded, setLoaded]);
|
|
34
|
+
return ref.current;
|
|
59
35
|
};
|
|
60
36
|
|
|
61
37
|
var styles = {"container":"panneau-field-html-container"};
|
|
@@ -111,10 +87,10 @@ var defaultProps = {
|
|
|
111
87
|
},
|
|
112
88
|
link: {
|
|
113
89
|
addTargetToExternalLinks: true
|
|
114
|
-
},
|
|
115
|
-
mediaEmbed: {
|
|
116
|
-
previewsInData: true
|
|
117
90
|
}
|
|
91
|
+
// mediaEmbed: {
|
|
92
|
+
// previewsInData: true,
|
|
93
|
+
// },
|
|
118
94
|
},
|
|
119
95
|
ckOptions: null,
|
|
120
96
|
className: null
|
|
@@ -131,8 +107,10 @@ var HtmlField = function HtmlField(_ref) {
|
|
|
131
107
|
ckConfig = _ref.ckConfig,
|
|
132
108
|
ckOptions = _ref.ckOptions,
|
|
133
109
|
className = _ref.className;
|
|
134
|
-
var CKEditorBuild = useCKEditorBuild();
|
|
110
|
+
var CKEditorBuild = useCKEditorBuild() || null;
|
|
135
111
|
var CKValue = value !== null ? value : '';
|
|
112
|
+
// console.log('build', CKEditorBuild);
|
|
113
|
+
|
|
136
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)]);
|
|
137
115
|
var onCkEditorChange = useCallback(function (event, editor) {
|
|
138
116
|
var data = editor.getData();
|
|
@@ -144,9 +122,6 @@ var HtmlField = function HtmlField(_ref) {
|
|
|
144
122
|
onFocus: onFocus,
|
|
145
123
|
onBlur: onBlur
|
|
146
124
|
};
|
|
147
|
-
|
|
148
|
-
// console.log('CKValue', CKValue);
|
|
149
|
-
|
|
150
125
|
var ckElement = CKEditorBuild !== null ? /*#__PURE__*/React.createElement("div", {
|
|
151
126
|
className: finalClassName
|
|
152
127
|
}, /*#__PURE__*/React.createElement(CKEditor, Object.assign({
|
package/lib/index.js
CHANGED
|
@@ -9,57 +9,33 @@ var PropTypes = require('prop-types');
|
|
|
9
9
|
var React = require('react');
|
|
10
10
|
var InputGroup = require('@panneau/field-input-group');
|
|
11
11
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
12
|
-
var utils = require('@panneau/core/utils');
|
|
13
12
|
|
|
14
|
-
/**
|
|
15
|
-
* Locale loader
|
|
16
|
-
*/
|
|
17
|
-
var packageCache = null;
|
|
18
13
|
var useCKEditorBuild = function useCKEditorBuild() {
|
|
19
|
-
var
|
|
20
|
-
_ref$disabled = _ref.disabled,
|
|
21
|
-
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
22
|
-
_ref$inline = _ref.inline,
|
|
23
|
-
inline = _ref$inline === void 0 ? false : _ref$inline;
|
|
24
|
-
var _useState = React.useState({
|
|
25
|
-
"package": packageCache
|
|
26
|
-
}),
|
|
14
|
+
var _useState = React.useState(null),
|
|
27
15
|
_useState2 = _slicedToArray(_useState, 2),
|
|
28
|
-
|
|
29
|
-
|
|
16
|
+
loaded = _useState2[0],
|
|
17
|
+
setLoaded = _useState2[1];
|
|
18
|
+
var ref = React.useRef(null);
|
|
30
19
|
React.useEffect(function () {
|
|
31
20
|
var canceled = false;
|
|
32
|
-
if (
|
|
21
|
+
if (loaded) {
|
|
33
22
|
return function () {
|
|
34
23
|
canceled = true;
|
|
35
24
|
};
|
|
36
25
|
}
|
|
37
|
-
|
|
38
|
-
var
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
// if (inline) {
|
|
49
|
-
// import('@ckeditor/ckeditor5-build-inline').then(onEditorBuildLoaded);
|
|
50
|
-
// } else {
|
|
51
|
-
// import('@ckeditor/ckeditor5-build-classic').then(onEditorBuildLoaded);
|
|
52
|
-
// }
|
|
53
|
-
|
|
54
|
-
utils.loadPackage('@ckeditor/ckeditor5-build-classic', function () {
|
|
55
|
-
return import('@ckeditor/ckeditor5-build-classic');
|
|
56
|
-
}).then(onEditorBuildLoaded);
|
|
57
|
-
}
|
|
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
|
+
});
|
|
58
34
|
return function () {
|
|
59
35
|
canceled = true;
|
|
60
36
|
};
|
|
61
|
-
}, [
|
|
62
|
-
return
|
|
37
|
+
}, [loaded, setLoaded]);
|
|
38
|
+
return ref.current;
|
|
63
39
|
};
|
|
64
40
|
|
|
65
41
|
var styles = {"container":"panneau-field-html-container"};
|
|
@@ -115,10 +91,10 @@ var defaultProps = {
|
|
|
115
91
|
},
|
|
116
92
|
link: {
|
|
117
93
|
addTargetToExternalLinks: true
|
|
118
|
-
},
|
|
119
|
-
mediaEmbed: {
|
|
120
|
-
previewsInData: true
|
|
121
94
|
}
|
|
95
|
+
// mediaEmbed: {
|
|
96
|
+
// previewsInData: true,
|
|
97
|
+
// },
|
|
122
98
|
},
|
|
123
99
|
ckOptions: null,
|
|
124
100
|
className: null
|
|
@@ -135,8 +111,10 @@ var HtmlField = function HtmlField(_ref) {
|
|
|
135
111
|
ckConfig = _ref.ckConfig,
|
|
136
112
|
ckOptions = _ref.ckOptions,
|
|
137
113
|
className = _ref.className;
|
|
138
|
-
var CKEditorBuild = useCKEditorBuild();
|
|
114
|
+
var CKEditorBuild = useCKEditorBuild() || null;
|
|
139
115
|
var CKValue = value !== null ? value : '';
|
|
116
|
+
// console.log('build', CKEditorBuild);
|
|
117
|
+
|
|
140
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)]);
|
|
141
119
|
var onCkEditorChange = React.useCallback(function (event, editor) {
|
|
142
120
|
var data = editor.getData();
|
|
@@ -148,9 +126,6 @@ var HtmlField = function HtmlField(_ref) {
|
|
|
148
126
|
onFocus: onFocus,
|
|
149
127
|
onBlur: onBlur
|
|
150
128
|
};
|
|
151
|
-
|
|
152
|
-
// console.log('CKValue', CKValue);
|
|
153
|
-
|
|
154
129
|
var ckElement = CKEditorBuild !== null ? /*#__PURE__*/React.createElement("div", {
|
|
155
130
|
className: finalClassName
|
|
156
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"
|
|
@@ -54,17 +54,16 @@
|
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"@babel/runtime": "^7.12.5",
|
|
57
|
-
"@ckeditor/ckeditor5-build-classic": "^41.2.1",
|
|
58
|
-
"@ckeditor/ckeditor5-build-inline": "^41.2.1",
|
|
59
57
|
"@ckeditor/ckeditor5-react": "^6.2.0",
|
|
60
|
-
"@panneau/
|
|
61
|
-
"@panneau/
|
|
62
|
-
"@panneau/
|
|
58
|
+
"@panneau/ckeditor": "^3.0.165",
|
|
59
|
+
"@panneau/core": "^3.0.164",
|
|
60
|
+
"@panneau/field-input-group": "^3.0.164",
|
|
61
|
+
"@panneau/themes": "^3.0.164",
|
|
63
62
|
"classnames": "^2.5.1",
|
|
64
63
|
"prop-types": "^15.7.2"
|
|
65
64
|
},
|
|
66
65
|
"publishConfig": {
|
|
67
66
|
"access": "public"
|
|
68
67
|
},
|
|
69
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "3be43601dbd39c37504b9364886f6d1071f9b5a0"
|
|
70
69
|
}
|