@panneau/field-html 4.0.37 → 4.0.40-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.
- package/dist/index.js +191 -78
- package/package.json +7 -11
package/dist/index.js
CHANGED
|
@@ -1,46 +1,71 @@
|
|
|
1
|
-
import
|
|
2
|
-
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
1
|
+
import { c } from 'react/compiler-runtime';
|
|
3
2
|
import { CKEditor } from '@ckeditor/ckeditor5-react';
|
|
4
3
|
import classNames from 'classnames';
|
|
5
|
-
import {
|
|
4
|
+
import { useIntl } from 'react-intl';
|
|
6
5
|
import InputGroup from '@panneau/field-input-group';
|
|
7
|
-
import
|
|
6
|
+
import { useState, useRef, useEffect } from 'react';
|
|
7
|
+
import 'ckeditor5/ckeditor5.css';
|
|
8
8
|
import { jsx } from 'react/jsx-runtime';
|
|
9
9
|
|
|
10
|
-
function
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
var ref = useRef(null);
|
|
16
|
-
useEffect(function () {
|
|
17
|
-
var canceled = false;
|
|
10
|
+
function useCKEditor() {
|
|
11
|
+
const [loaded, setLoaded] = useState(false);
|
|
12
|
+
const ref = useRef(null);
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
let canceled = false;
|
|
18
15
|
if (loaded) {
|
|
19
|
-
return
|
|
16
|
+
return () => {
|
|
20
17
|
canceled = true;
|
|
21
18
|
};
|
|
22
19
|
}
|
|
23
|
-
import('@panneau/ckeditor
|
|
24
|
-
var Editors = _ref["default"];
|
|
20
|
+
import('@panneau/ckeditor').then(Editors => {
|
|
25
21
|
if (!canceled) {
|
|
26
22
|
ref.current = Editors;
|
|
27
23
|
setLoaded(true);
|
|
28
24
|
}
|
|
29
25
|
})
|
|
30
26
|
// eslint-disable-next-line no-console
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
});
|
|
34
|
-
return function () {
|
|
27
|
+
.catch(e => console.log('err loading editor', e));
|
|
28
|
+
return () => {
|
|
35
29
|
canceled = true;
|
|
36
30
|
};
|
|
37
31
|
}, [loaded, setLoaded]);
|
|
38
32
|
return ref.current;
|
|
39
33
|
}
|
|
40
34
|
|
|
35
|
+
const loaders = {
|
|
36
|
+
fr: () => import('ckeditor5/translations/fr'),
|
|
37
|
+
en: () => import('ckeditor5/translations/en')
|
|
38
|
+
};
|
|
39
|
+
function useCKEditorTranslations(locale) {
|
|
40
|
+
const [loaded, setLoaded] = useState(false);
|
|
41
|
+
const ref = useRef(null);
|
|
42
|
+
useEffect(() => {
|
|
43
|
+
let canceled = false;
|
|
44
|
+
if (loaded === locale) {
|
|
45
|
+
return () => {
|
|
46
|
+
canceled = true;
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
(loaders[locale] || (() => Promise.reject()))().then(({
|
|
50
|
+
default: translations
|
|
51
|
+
}) => {
|
|
52
|
+
if (!canceled) {
|
|
53
|
+
ref.current = translations;
|
|
54
|
+
setLoaded(locale);
|
|
55
|
+
}
|
|
56
|
+
})
|
|
57
|
+
// eslint-disable-next-line no-console
|
|
58
|
+
.catch(e => console.log('err loading translations', e));
|
|
59
|
+
return () => {
|
|
60
|
+
canceled = true;
|
|
61
|
+
};
|
|
62
|
+
}, [locale, loaded, setLoaded]);
|
|
63
|
+
return ref.current;
|
|
64
|
+
}
|
|
65
|
+
|
|
41
66
|
var styles = {"container":"panneau-field-html-container"};
|
|
42
67
|
|
|
43
|
-
|
|
68
|
+
const defaultCkConfig = {
|
|
44
69
|
toolbar: ['heading', '|', 'bold', 'italic', 'link', '|', 'bulletedList', 'numberedList'
|
|
45
70
|
// 'blockQuote',
|
|
46
71
|
// 'horizontalLine
|
|
@@ -85,64 +110,152 @@ var defaultCkConfig = {
|
|
|
85
110
|
// previewsInData: true,
|
|
86
111
|
// },
|
|
87
112
|
};
|
|
88
|
-
function HtmlField(
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
errors
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
113
|
+
function HtmlField(t0) {
|
|
114
|
+
const $ = c(28);
|
|
115
|
+
const {
|
|
116
|
+
feedback: t1,
|
|
117
|
+
errors: t2,
|
|
118
|
+
value: t3,
|
|
119
|
+
inline: t4,
|
|
120
|
+
disabled: t5,
|
|
121
|
+
onChange: t6,
|
|
122
|
+
onFocus: t7,
|
|
123
|
+
onBlur: t8,
|
|
124
|
+
ckConfig: t9,
|
|
125
|
+
ckOptions: t10,
|
|
126
|
+
className: t11
|
|
127
|
+
} = t0;
|
|
128
|
+
const feedback = t1 === undefined ? null : t1;
|
|
129
|
+
const errors = t2 === undefined ? null : t2;
|
|
130
|
+
const value = t3 === undefined ? null : t3;
|
|
131
|
+
const inline = t4 === undefined ? false : t4;
|
|
132
|
+
const disabled = t5 === undefined ? false : t5;
|
|
133
|
+
const onChange = t6 === undefined ? null : t6;
|
|
134
|
+
const onFocus = t7 === undefined ? null : t7;
|
|
135
|
+
const onBlur = t8 === undefined ? null : t8;
|
|
136
|
+
const ckConfig = t9 === undefined ? defaultCkConfig : t9;
|
|
137
|
+
const ckOptions = t10 === undefined ? null : t10;
|
|
138
|
+
const className = t11 === undefined ? null : t11;
|
|
139
|
+
const {
|
|
140
|
+
locale
|
|
141
|
+
} = useIntl();
|
|
142
|
+
const {
|
|
143
|
+
Editor: t12,
|
|
144
|
+
InlineEditor: t13
|
|
145
|
+
} = useCKEditor() || {};
|
|
146
|
+
const Editor = t12 === undefined ? null : t12;
|
|
147
|
+
const InlineEditor = t13 === undefined ? null : t13;
|
|
148
|
+
const translations = useCKEditorTranslations(locale);
|
|
149
|
+
const CKValue = value !== null ? value : "";
|
|
150
|
+
const EditorBuild = inline ? InlineEditor : Editor;
|
|
151
|
+
let t14;
|
|
152
|
+
if ($[0] !== className || $[1] !== errors || $[2] !== feedback || $[3] !== inline) {
|
|
153
|
+
t14 = inline ? classNames([styles.container, "form-control", {
|
|
154
|
+
[className]: className !== null,
|
|
155
|
+
"is-valid": feedback === "valid",
|
|
156
|
+
"is-invalid": feedback === "invalid" || errors !== null && errors.length > 0
|
|
157
|
+
}]) : classNames([styles.container, {
|
|
158
|
+
[className]: className !== null
|
|
159
|
+
}]);
|
|
160
|
+
$[0] = className;
|
|
161
|
+
$[1] = errors;
|
|
162
|
+
$[2] = feedback;
|
|
163
|
+
$[3] = inline;
|
|
164
|
+
$[4] = t14;
|
|
165
|
+
} else {
|
|
166
|
+
t14 = $[4];
|
|
167
|
+
}
|
|
168
|
+
const finalClassName = t14;
|
|
169
|
+
let t15;
|
|
170
|
+
if ($[5] !== onChange) {
|
|
171
|
+
t15 = (event, editor) => {
|
|
172
|
+
const data = editor !== null ? editor.getData() : null;
|
|
173
|
+
if (editor !== null && onChange !== null) {
|
|
174
|
+
onChange(data === "" ? null : data);
|
|
175
|
+
}
|
|
176
|
+
};
|
|
177
|
+
$[5] = onChange;
|
|
178
|
+
$[6] = t15;
|
|
179
|
+
} else {
|
|
180
|
+
t15 = $[6];
|
|
181
|
+
}
|
|
182
|
+
const onCkEditorChange = t15;
|
|
183
|
+
let t16;
|
|
184
|
+
if ($[7] !== onBlur || $[8] !== onFocus) {
|
|
185
|
+
t16 = {
|
|
186
|
+
onFocus,
|
|
187
|
+
onBlur
|
|
188
|
+
};
|
|
189
|
+
$[7] = onBlur;
|
|
190
|
+
$[8] = onFocus;
|
|
191
|
+
$[9] = t16;
|
|
192
|
+
} else {
|
|
193
|
+
t16 = $[9];
|
|
194
|
+
}
|
|
195
|
+
const commonProps = t16;
|
|
196
|
+
let t17;
|
|
197
|
+
if ($[10] !== translations) {
|
|
198
|
+
t17 = [translations];
|
|
199
|
+
$[10] = translations;
|
|
200
|
+
$[11] = t17;
|
|
201
|
+
} else {
|
|
202
|
+
t17 = $[11];
|
|
203
|
+
}
|
|
204
|
+
const t18 = (ckConfig != null && typeof ckConfig.licenseKey !== "undefined" ? ckConfig.licenseKey : null) || "GPL";
|
|
205
|
+
let t19;
|
|
206
|
+
if ($[12] !== ckConfig || $[13] !== t17 || $[14] !== t18) {
|
|
207
|
+
t19 = {
|
|
208
|
+
translations: t17,
|
|
209
|
+
...ckConfig,
|
|
210
|
+
licenseKey: t18
|
|
211
|
+
};
|
|
212
|
+
$[12] = ckConfig;
|
|
213
|
+
$[13] = t17;
|
|
214
|
+
$[14] = t18;
|
|
215
|
+
$[15] = t19;
|
|
216
|
+
} else {
|
|
217
|
+
t19 = $[15];
|
|
218
|
+
}
|
|
219
|
+
const finalCkConfig = t19;
|
|
220
|
+
let t20;
|
|
221
|
+
if ($[16] !== CKValue || $[17] !== EditorBuild || $[18] !== ckOptions || $[19] !== commonProps || $[20] !== disabled || $[21] !== finalCkConfig || $[22] !== finalClassName || $[23] !== onCkEditorChange) {
|
|
222
|
+
t20 = EditorBuild !== null ? /*#__PURE__*/jsx("div", {
|
|
223
|
+
className: finalClassName,
|
|
224
|
+
children: /*#__PURE__*/jsx(CKEditor, {
|
|
225
|
+
editor: EditorBuild,
|
|
226
|
+
data: CKValue,
|
|
227
|
+
config: finalCkConfig,
|
|
228
|
+
onChange: onCkEditorChange,
|
|
229
|
+
...commonProps,
|
|
230
|
+
...ckOptions,
|
|
231
|
+
disabled: disabled
|
|
232
|
+
})
|
|
233
|
+
}) : null;
|
|
234
|
+
$[16] = CKValue;
|
|
235
|
+
$[17] = EditorBuild;
|
|
236
|
+
$[18] = ckOptions;
|
|
237
|
+
$[19] = commonProps;
|
|
238
|
+
$[20] = disabled;
|
|
239
|
+
$[21] = finalCkConfig;
|
|
240
|
+
$[22] = finalClassName;
|
|
241
|
+
$[23] = onCkEditorChange;
|
|
242
|
+
$[24] = t20;
|
|
243
|
+
} else {
|
|
244
|
+
t20 = $[24];
|
|
245
|
+
}
|
|
246
|
+
const ckElement = t20;
|
|
247
|
+
let t21;
|
|
248
|
+
if ($[25] !== ckElement || $[26] !== inline) {
|
|
249
|
+
t21 = inline ? /*#__PURE__*/jsx(InputGroup, {
|
|
250
|
+
children: ckElement
|
|
251
|
+
}) : ckElement;
|
|
252
|
+
$[25] = ckElement;
|
|
253
|
+
$[26] = inline;
|
|
254
|
+
$[27] = t21;
|
|
255
|
+
} else {
|
|
256
|
+
t21 = $[27];
|
|
257
|
+
}
|
|
258
|
+
return t21;
|
|
146
259
|
}
|
|
147
260
|
|
|
148
261
|
var definition = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@panneau/field-html",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.40-alpha.1",
|
|
4
4
|
"description": "A HTML field, using either Quill or CK Editor",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -64,19 +64,15 @@
|
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
66
|
"@babel/runtime": "^7.28.6",
|
|
67
|
-
"@ckeditor/ckeditor5-
|
|
68
|
-
"@ckeditor
|
|
69
|
-
"@panneau/
|
|
70
|
-
"@panneau/
|
|
71
|
-
"@panneau/
|
|
72
|
-
"@panneau/themes": "^4.0.37",
|
|
67
|
+
"@ckeditor/ckeditor5-react": "^11.1.2",
|
|
68
|
+
"@panneau/ckeditor": "^4.0.40-alpha.1",
|
|
69
|
+
"@panneau/core": "^4.0.40-alpha.1",
|
|
70
|
+
"@panneau/field-input-group": "^4.0.40-alpha.1",
|
|
71
|
+
"@panneau/themes": "^4.0.40-alpha.1",
|
|
73
72
|
"classnames": "^2.5.1"
|
|
74
73
|
},
|
|
75
|
-
"overrides": {
|
|
76
|
-
"@ckeditor/ckeditor5-editor-multi-root": "^47.5.0"
|
|
77
|
-
},
|
|
78
74
|
"publishConfig": {
|
|
79
75
|
"access": "public"
|
|
80
76
|
},
|
|
81
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "66520f92373b3aa371222b354d60ed3cf3d20c96"
|
|
82
78
|
}
|