@rhc-shared-components/rich-text-editor 0.2.12 → 0.3.2

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 (5) hide show
  1. package/CHANGELOG.md +202 -0
  2. package/dist/RichTextEditorFormComponent.d.ts +2 -2
  3. package/dist/index.js +35 -6
  4. package/dist/index.modern.js +33 -7
  5. package/package.json +3 -4
package/CHANGELOG.md ADDED
@@ -0,0 +1,202 @@
1
+ # Change Log
2
+
3
+ All notable changes to this project will be documented in this file.
4
+ See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
+
6
+ ## [0.2.12](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.2.11...@rhc-shared-components/rich-text-editor@0.2.12) (2021-11-01)
7
+
8
+ **Note:** Version bump only for package @rhc-shared-components/rich-text-editor
9
+
10
+
11
+
12
+
13
+
14
+ ## [0.2.11](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.2.10...@rhc-shared-components/rich-text-editor@0.2.11) (2021-11-01)
15
+
16
+ **Note:** Version bump only for package @rhc-shared-components/rich-text-editor
17
+
18
+
19
+
20
+
21
+
22
+ ## [0.2.10](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.2.9...@rhc-shared-components/rich-text-editor@0.2.10) (2021-09-29)
23
+
24
+ **Note:** Version bump only for package @rhc-shared-components/rich-text-editor
25
+
26
+
27
+
28
+
29
+
30
+ ## [0.2.9](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.2.8...@rhc-shared-components/rich-text-editor@0.2.9) (2021-09-29)
31
+
32
+
33
+ ### Bug Fixes
34
+
35
+ * fixing minor bug in h3 ([674c21e](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/674c21e80156a70763df34887e4e34f951640b40))
36
+
37
+
38
+
39
+
40
+
41
+ ## [0.2.8](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.2.7...@rhc-shared-components/rich-text-editor@0.2.8) (2021-09-28)
42
+
43
+
44
+ ### Bug Fixes
45
+
46
+ * fixing styles ([107d28d](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/107d28d37edefcc9172f723c6987d9a0032ee042))
47
+
48
+
49
+
50
+
51
+
52
+ ## [0.2.7](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.2.6...@rhc-shared-components/rich-text-editor@0.2.7) (2021-09-28)
53
+
54
+
55
+ ### Bug Fixes
56
+
57
+ * converted microbundle-crl to microbundle ([0fb91bf](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/0fb91bf065c2436251097168599edbb59ce6a16c))
58
+
59
+
60
+
61
+
62
+
63
+ ## [0.2.6](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.2.5...@rhc-shared-components/rich-text-editor@0.2.6) (2021-09-28)
64
+
65
+
66
+ ### Bug Fixes
67
+
68
+ * added missing stylesheet ([dd08fc3](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/dd08fc32298fff6a02812dedd75a2f763692f356))
69
+
70
+
71
+
72
+
73
+
74
+ ## [0.2.5](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.2.4...@rhc-shared-components/rich-text-editor@0.2.5) (2021-09-28)
75
+
76
+ **Note:** Version bump only for package @rhc-shared-components/rich-text-editor
77
+
78
+
79
+
80
+
81
+
82
+ ## [0.2.4](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.2.3...@rhc-shared-components/rich-text-editor@0.2.4) (2021-09-28)
83
+
84
+ **Note:** Version bump only for package @rhc-shared-components/rich-text-editor
85
+
86
+
87
+
88
+
89
+
90
+ ## [0.2.3](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.2.2...@rhc-shared-components/rich-text-editor@0.2.3) (2021-09-28)
91
+
92
+
93
+ ### Bug Fixes
94
+
95
+ * remove hardcoded pf styles ([0928295](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/0928295bf89f7c14300998d56fc58cc6ec727513))
96
+ * using pf no reset to avoid conflicts ([4bc0a9d](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/4bc0a9de4c702b85f9ceae7571b76f539fc24ea2))
97
+
98
+
99
+
100
+
101
+
102
+ ## [0.2.2](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.2.1...@rhc-shared-components/rich-text-editor@0.2.2) (2021-09-23)
103
+
104
+
105
+ ### Bug Fixes
106
+
107
+ * remove broken indentation ([80d6616](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/80d66162ae3fcc8f45cf67dc4a49afca9ee72ea8))
108
+
109
+
110
+
111
+
112
+
113
+ ## [0.2.1](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.2.0...@rhc-shared-components/rich-text-editor@0.2.1) (2021-09-22)
114
+
115
+ **Note:** Version bump only for package @rhc-shared-components/rich-text-editor
116
+
117
+
118
+
119
+
120
+
121
+ # [0.2.0](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.1.7...@rhc-shared-components/rich-text-editor@0.2.0) (2021-09-22)
122
+
123
+
124
+ ### Features
125
+
126
+ * use patternfly default title style for headings ([1f08ac5](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/1f08ac59a6dfc86343f7840bf405b7d820332427))
127
+
128
+
129
+
130
+
131
+
132
+ ## [0.1.7](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.1.6...@rhc-shared-components/rich-text-editor@0.1.7) (2021-09-22)
133
+
134
+
135
+ ### Bug Fixes
136
+
137
+ * removed image and video insertion ([a89bbd4](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/a89bbd448ab9d6930c5f2b6a08b624c997e9658f))
138
+
139
+
140
+
141
+
142
+
143
+ ## [0.1.6](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.1.5...@rhc-shared-components/rich-text-editor@0.1.6) (2021-09-22)
144
+
145
+ **Note:** Version bump only for package @rhc-shared-components/rich-text-editor
146
+
147
+
148
+
149
+
150
+
151
+ ## [0.1.5](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.1.4...@rhc-shared-components/rich-text-editor@0.1.5) (2021-09-20)
152
+
153
+
154
+ ### Bug Fixes
155
+
156
+ * cleaning deps ([227dc2d](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/227dc2da7dfda53172811ef287840b97cd550681))
157
+
158
+
159
+
160
+
161
+
162
+ ## [0.1.4](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.1.3...@rhc-shared-components/rich-text-editor@0.1.4) (2021-09-17)
163
+
164
+
165
+ ### Bug Fixes
166
+
167
+ * added cleaning of dist on prepare ([68e3e76](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/commit/68e3e76f8924cabd581baeace07e9afeef20d36b))
168
+
169
+
170
+
171
+
172
+
173
+ ## [0.1.3](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.1.2...@rhc-shared-components/rich-text-editor@0.1.3) (2021-09-17)
174
+
175
+ **Note:** Version bump only for package @rhc-shared-components/rich-text-editor
176
+
177
+
178
+
179
+
180
+
181
+ ## [0.1.2](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.1.1...@rhc-shared-components/rich-text-editor@0.1.2) (2021-09-17)
182
+
183
+ **Note:** Version bump only for package @rhc-shared-components/rich-text-editor
184
+
185
+
186
+
187
+
188
+
189
+ ## [0.1.1](https://gitlab.cee.redhat.com/customer-platform/rhc-shared-components/compare/@rhc-shared-components/rich-text-editor@0.1.0...@rhc-shared-components/rich-text-editor@0.1.1) (2021-09-17)
190
+
191
+ **Note:** Version bump only for package @rhc-shared-components/rich-text-editor
192
+
193
+
194
+
195
+
196
+
197
+ # 0.1.0 (2021-09-17)
198
+
199
+
200
+ ### Features
201
+
202
+ * finished rich text editor component ([52a70ce](https://gitlab.cee.redhat.com/dxp/customer-portal/rhc-shared-components/commit/52a70cef749ea5a46882122ab843a2099d5e1628))
package/dist/RichTextEditorFormComponent.d.ts CHANGED
@@ -7,8 +7,8 @@ export interface RichTextEditorFormComponentProps {
7
7
  placeholder?: string;
8
8
  ariaLabel?: string;
9
9
  helperText?: string;
10
- maxItems?: number;
11
- maxHeight?: string | number;
10
+ showMaxLengthText?: boolean;
11
+ maxLength?: number;
12
12
  }
13
13
  declare const RichTextEditorFormComponent: React.FC<RichTextEditorFormComponentProps>;
14
14
  export default RichTextEditorFormComponent;
package/dist/index.js CHANGED
@@ -27,7 +27,7 @@ function _interopNamespace(e) {
27
27
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
28
28
  var ClassicEditor__default = /*#__PURE__*/_interopDefaultLegacy(ClassicEditor);
29
29
 
30
- var css_248z = ".rich-text-editor-custom {\n --pf-c-title--m-2xl--LineHeight: var(--pf-global--LineHeight--sm);\n --pf-c-title--m-2xl--FontSize: var(--pf-global--FontSize--2xl);\n --pf-c-title--m-2xl--FontWeight: var(--pf-global--FontWeight--normal);\n --pf-c-title--m-xl--LineHeight: var(--pf-global--LineHeight--md);\n --pf-c-title--m-xl--FontSize: var(--pf-global--FontSize--xl);\n --pf-c-title--m-xl--FontWeight: var(--pf-global--FontWeight--normal);\n --pf-c-title--m-lg--LineHeight: var(--pf-global--LineHeight--md);\n --pf-c-title--m-lg--FontSize: var(--pf-global--FontSize--lg);\n --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--normal);\n --pf-c-title--m-md--LineHeight: var(--pf-global--LineHeight--md);\n --pf-c-title--m-md--FontSize: var(--pf-global--FontSize--md);\n --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--normal); }\n .rich-text-editor-custom h1 {\n font-size: var(--pf-c-title--m-2xl--FontSize);\n font-weight: var(--pf-c-title--m-2xl--FontWeight);\n line-height: var(--pf-c-title--m-2xl--LineHeight); }\n .rich-text-editor-custom h2 {\n font-size: var(--pf-c-title--m-xl--FontSize);\n font-weight: var(--pf-c-title--m-xl--FontWeight);\n line-height: var(--pf-c-title--m-xl--LineHeight); }\n .rich-text-editor-custom h3 {\n font-size: var(--pf-c-title--m-lg--FontSize);\n font-weight: var(--pf-c-title--m-lg--FontWeight);\n line-height: var(--pf-c-title--m-lg--LineHeight); }\n .rich-text-editor-custom h4 {\n font-size: var(--pf-c-title--m-md--FontSize);\n font-weight: var(--pf-c-title--m-md--FontWeight);\n line-height: var(--pf-c-title--m-md--LineHeight); }\n .rich-text-editor-custom ul {\n display: block;\n list-style-type: disc;\n -webkit-margin-before: 1em;\n margin-block-start: 1em;\n -webkit-margin-after: 1em;\n margin-block-end: 1em;\n -webkit-margin-start: 0px;\n margin-inline-start: 0px;\n -webkit-margin-end: 0px;\n margin-inline-end: 0px;\n -webkit-padding-start: 40px;\n padding-inline-start: 40px; }\n .rich-text-editor-custom ul li {\n display: list-item; }\n .rich-text-editor-custom ul ul {\n list-style-type: circle;\n -webkit-margin-before: 0px;\n margin-block-start: 0px;\n -webkit-margin-after: 0px;\n margin-block-end: 0px; }\n .rich-text-editor-custom ol {\n display: block;\n list-style-type: decimal;\n -webkit-margin-before: 1em;\n margin-block-start: 1em;\n -webkit-margin-after: 1em;\n margin-block-end: 1em;\n -webkit-margin-start: 0px;\n margin-inline-start: 0px;\n -webkit-margin-end: 0px;\n margin-inline-end: 0px;\n -webkit-padding-start: 40px;\n padding-inline-start: 40px; }\n";
30
+ var css_248z$1 = ".rich-text-editor-custom {\n --pf-c-title--m-2xl--LineHeight: var(--pf-global--LineHeight--sm);\n --pf-c-title--m-2xl--FontSize: var(--pf-global--FontSize--2xl);\n --pf-c-title--m-2xl--FontWeight: var(--pf-global--FontWeight--normal);\n --pf-c-title--m-xl--LineHeight: var(--pf-global--LineHeight--md);\n --pf-c-title--m-xl--FontSize: var(--pf-global--FontSize--xl);\n --pf-c-title--m-xl--FontWeight: var(--pf-global--FontWeight--normal);\n --pf-c-title--m-lg--LineHeight: var(--pf-global--LineHeight--md);\n --pf-c-title--m-lg--FontSize: var(--pf-global--FontSize--lg);\n --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--normal);\n --pf-c-title--m-md--LineHeight: var(--pf-global--LineHeight--md);\n --pf-c-title--m-md--FontSize: var(--pf-global--FontSize--md);\n --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--normal); }\n .rich-text-editor-custom h1 {\n font-size: var(--pf-c-title--m-2xl--FontSize);\n font-weight: var(--pf-c-title--m-2xl--FontWeight);\n line-height: var(--pf-c-title--m-2xl--LineHeight); }\n .rich-text-editor-custom h2 {\n font-size: var(--pf-c-title--m-xl--FontSize);\n font-weight: var(--pf-c-title--m-xl--FontWeight);\n line-height: var(--pf-c-title--m-xl--LineHeight); }\n .rich-text-editor-custom h3 {\n font-size: var(--pf-c-title--m-lg--FontSize);\n font-weight: var(--pf-c-title--m-lg--FontWeight);\n line-height: var(--pf-c-title--m-lg--LineHeight); }\n .rich-text-editor-custom h4 {\n font-size: var(--pf-c-title--m-md--FontSize);\n font-weight: var(--pf-c-title--m-md--FontWeight);\n line-height: var(--pf-c-title--m-md--LineHeight); }\n .rich-text-editor-custom ul {\n display: block;\n list-style-type: disc;\n -webkit-margin-before: 1em;\n margin-block-start: 1em;\n -webkit-margin-after: 1em;\n margin-block-end: 1em;\n -webkit-margin-start: 0px;\n margin-inline-start: 0px;\n -webkit-margin-end: 0px;\n margin-inline-end: 0px;\n -webkit-padding-start: 40px;\n padding-inline-start: 40px; }\n .rich-text-editor-custom ul li {\n display: list-item; }\n .rich-text-editor-custom ul ul {\n list-style-type: circle;\n -webkit-margin-before: 0px;\n margin-block-start: 0px;\n -webkit-margin-after: 0px;\n margin-block-end: 0px; }\n .rich-text-editor-custom ol {\n display: block;\n list-style-type: decimal;\n -webkit-margin-before: 1em;\n margin-block-start: 1em;\n -webkit-margin-after: 1em;\n margin-block-end: 1em;\n -webkit-margin-start: 0px;\n margin-inline-start: 0px;\n -webkit-margin-end: 0px;\n margin-inline-end: 0px;\n -webkit-padding-start: 40px;\n padding-inline-start: 40px; }\n";
31
31
 
32
32
  var RichTextEditor = function RichTextEditor(_ref) {
33
33
  var value = _ref.value,
@@ -46,7 +46,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
46
46
  }
47
47
  };
48
48
 
49
- InsertCss();
49
+ InsertCss$1();
50
50
  return React__namespace.createElement("div", {
51
51
  className: 'rich-text-editor-custom'
52
52
  }, React__namespace.createElement(ckeditor5React.CKEditor, Object.assign({
@@ -111,14 +111,14 @@ var RichTextEditor = function RichTextEditor(_ref) {
111
111
  })));
112
112
  };
113
113
 
114
- var InsertCss = function InsertCss() {
114
+ var InsertCss$1 = function InsertCss() {
115
115
  var styleId = 'rich-test-editor-styles';
116
116
 
117
117
  if (!document.getElementById(styleId)) {
118
118
  var styleTag = document.createElement('style');
119
119
  styleTag.id = styleId;
120
120
  styleTag.type = 'text/css';
121
- styleTag.innerHTML = css_248z;
121
+ styleTag.innerHTML = css_248z$1;
122
122
  document.body.appendChild(styleTag);
123
123
  }
124
124
  };
@@ -153,6 +153,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
153
153
  return target;
154
154
  }
155
155
 
156
+ var css_248z = ".form-group .max-char-length {\n float: right;\n color: #6A6E73;\n font-size: var(--pf-c-form__helper-text--FontSize);\n margin-top: var(--pf-c-form__helper-text--MarginTop); }\n\n.form-group .maxlength-error {\n color: var(--pf-c-form--m-error--Color); }\n";
156
157
  var _excluded$1 = ["children", "helperTextInvalid", "isValid", "helperText", "labelIcon", "onClick"];
157
158
 
158
159
  var FormGroupContainer = function FormGroupContainer(_ref) {
@@ -164,6 +165,7 @@ var FormGroupContainer = function FormGroupContainer(_ref) {
164
165
  onClick = _ref.onClick,
165
166
  rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
166
167
 
168
+ InsertCss();
167
169
  return React__namespace.createElement(reactCore.FormGroup, Object.assign({
168
170
  className: 'form-group',
169
171
  helperTextInvalid: helperTextInvalid,
@@ -176,13 +178,27 @@ var FormGroupContainer = function FormGroupContainer(_ref) {
176
178
  }, rest), children);
177
179
  };
178
180
 
179
- var _excluded = ["label", "isRequired", "ariaLabel", "placeholder", "helperText", "maxItems", "maxHeight", "disabled"];
181
+ var InsertCss = function InsertCss() {
182
+ var styleId = 'form-group-component-style';
183
+
184
+ if (!document.getElementById(styleId)) {
185
+ var styleTag = document.createElement('style');
186
+ styleTag.id = styleId;
187
+ styleTag.type = 'text/css';
188
+ styleTag.innerHTML = css_248z;
189
+ document.body.appendChild(styleTag);
190
+ }
191
+ };
192
+
193
+ var _excluded = ["label", "isRequired", "ariaLabel", "placeholder", "helperText", "disabled", "showMaxLengthText", "maxLength"];
180
194
 
181
195
  var RichTextEditorFormComponent = function RichTextEditorFormComponent(_ref) {
182
196
  var label = _ref.label,
183
197
  isRequired = _ref.isRequired,
184
198
  helperText = _ref.helperText,
185
199
  disabled = _ref.disabled,
200
+ showMaxLengthText = _ref.showMaxLengthText,
201
+ maxLength = _ref.maxLength,
186
202
  rest = _objectWithoutPropertiesLoose$1(_ref, _excluded);
187
203
 
188
204
  var _useField = formik.useField({
@@ -198,6 +214,15 @@ var RichTextEditorFormComponent = function RichTextEditorFormComponent(_ref) {
198
214
  setFieldValue = _useFormikContext.setFieldValue,
199
215
  validateField = _useFormikContext.validateField;
200
216
 
217
+ var _React$useState = React__namespace.useState(maxLength || 0),
218
+ numberOfCharacters = _React$useState[0],
219
+ setNoOfCharacters = _React$useState[1];
220
+
221
+ React__namespace.useEffect(function () {
222
+ if (maxLength) {
223
+ setNoOfCharacters(value && value.length ? maxLength - value.length : maxLength);
224
+ }
225
+ }, [value, maxLength]);
201
226
  return React__namespace.createElement(FormGroupContainer, {
202
227
  validated: meta.error ? reactCore.ValidatedOptions.error : reactCore.ValidatedOptions["default"],
203
228
  onClick: function onClick() {
@@ -216,6 +241,7 @@ var RichTextEditorFormComponent = function RichTextEditorFormComponent(_ref) {
216
241
  id: rest.name,
217
242
  name: rest.name,
218
243
  onReady: function onReady(editor) {
244
+ editor.setData(value);
219
245
  editorRef.current = editor;
220
246
  },
221
247
  disabled: disabled || isSubmitting,
@@ -227,7 +253,10 @@ var RichTextEditorFormComponent = function RichTextEditorFormComponent(_ref) {
227
253
  setFieldValue(rest.name, data);
228
254
  validateField(rest.name);
229
255
  }
230
- }));
256
+ }), showMaxLengthText && React__namespace.createElement("div", {
257
+ "data-testid": 'formTextAreaMaxLengthText',
258
+ className: 'max-char-length' + (numberOfCharacters < 0 ? ' maxlength-error' : '')
259
+ }, numberOfCharacters, " character", numberOfCharacters !== 1 && 's', ' ', "remaining (includes HTML markup)"));
231
260
  };
232
261
 
233
262
  exports.RichTextEditor = RichTextEditor;
package/dist/index.modern.js CHANGED
@@ -4,7 +4,7 @@ import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
4
4
  import { FormGroup, ValidatedOptions } from '@patternfly/react-core';
5
5
  import { useField, useFormikContext } from 'formik';
6
6
 
7
- var css_248z = ".rich-text-editor-custom {\n --pf-c-title--m-2xl--LineHeight: var(--pf-global--LineHeight--sm);\n --pf-c-title--m-2xl--FontSize: var(--pf-global--FontSize--2xl);\n --pf-c-title--m-2xl--FontWeight: var(--pf-global--FontWeight--normal);\n --pf-c-title--m-xl--LineHeight: var(--pf-global--LineHeight--md);\n --pf-c-title--m-xl--FontSize: var(--pf-global--FontSize--xl);\n --pf-c-title--m-xl--FontWeight: var(--pf-global--FontWeight--normal);\n --pf-c-title--m-lg--LineHeight: var(--pf-global--LineHeight--md);\n --pf-c-title--m-lg--FontSize: var(--pf-global--FontSize--lg);\n --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--normal);\n --pf-c-title--m-md--LineHeight: var(--pf-global--LineHeight--md);\n --pf-c-title--m-md--FontSize: var(--pf-global--FontSize--md);\n --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--normal); }\n .rich-text-editor-custom h1 {\n font-size: var(--pf-c-title--m-2xl--FontSize);\n font-weight: var(--pf-c-title--m-2xl--FontWeight);\n line-height: var(--pf-c-title--m-2xl--LineHeight); }\n .rich-text-editor-custom h2 {\n font-size: var(--pf-c-title--m-xl--FontSize);\n font-weight: var(--pf-c-title--m-xl--FontWeight);\n line-height: var(--pf-c-title--m-xl--LineHeight); }\n .rich-text-editor-custom h3 {\n font-size: var(--pf-c-title--m-lg--FontSize);\n font-weight: var(--pf-c-title--m-lg--FontWeight);\n line-height: var(--pf-c-title--m-lg--LineHeight); }\n .rich-text-editor-custom h4 {\n font-size: var(--pf-c-title--m-md--FontSize);\n font-weight: var(--pf-c-title--m-md--FontWeight);\n line-height: var(--pf-c-title--m-md--LineHeight); }\n .rich-text-editor-custom ul {\n display: block;\n list-style-type: disc;\n -webkit-margin-before: 1em;\n margin-block-start: 1em;\n -webkit-margin-after: 1em;\n margin-block-end: 1em;\n -webkit-margin-start: 0px;\n margin-inline-start: 0px;\n -webkit-margin-end: 0px;\n margin-inline-end: 0px;\n -webkit-padding-start: 40px;\n padding-inline-start: 40px; }\n .rich-text-editor-custom ul li {\n display: list-item; }\n .rich-text-editor-custom ul ul {\n list-style-type: circle;\n -webkit-margin-before: 0px;\n margin-block-start: 0px;\n -webkit-margin-after: 0px;\n margin-block-end: 0px; }\n .rich-text-editor-custom ol {\n display: block;\n list-style-type: decimal;\n -webkit-margin-before: 1em;\n margin-block-start: 1em;\n -webkit-margin-after: 1em;\n margin-block-end: 1em;\n -webkit-margin-start: 0px;\n margin-inline-start: 0px;\n -webkit-margin-end: 0px;\n margin-inline-end: 0px;\n -webkit-padding-start: 40px;\n padding-inline-start: 40px; }\n";
7
+ var css_248z$1 = ".rich-text-editor-custom {\n --pf-c-title--m-2xl--LineHeight: var(--pf-global--LineHeight--sm);\n --pf-c-title--m-2xl--FontSize: var(--pf-global--FontSize--2xl);\n --pf-c-title--m-2xl--FontWeight: var(--pf-global--FontWeight--normal);\n --pf-c-title--m-xl--LineHeight: var(--pf-global--LineHeight--md);\n --pf-c-title--m-xl--FontSize: var(--pf-global--FontSize--xl);\n --pf-c-title--m-xl--FontWeight: var(--pf-global--FontWeight--normal);\n --pf-c-title--m-lg--LineHeight: var(--pf-global--LineHeight--md);\n --pf-c-title--m-lg--FontSize: var(--pf-global--FontSize--lg);\n --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--normal);\n --pf-c-title--m-md--LineHeight: var(--pf-global--LineHeight--md);\n --pf-c-title--m-md--FontSize: var(--pf-global--FontSize--md);\n --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--normal); }\n .rich-text-editor-custom h1 {\n font-size: var(--pf-c-title--m-2xl--FontSize);\n font-weight: var(--pf-c-title--m-2xl--FontWeight);\n line-height: var(--pf-c-title--m-2xl--LineHeight); }\n .rich-text-editor-custom h2 {\n font-size: var(--pf-c-title--m-xl--FontSize);\n font-weight: var(--pf-c-title--m-xl--FontWeight);\n line-height: var(--pf-c-title--m-xl--LineHeight); }\n .rich-text-editor-custom h3 {\n font-size: var(--pf-c-title--m-lg--FontSize);\n font-weight: var(--pf-c-title--m-lg--FontWeight);\n line-height: var(--pf-c-title--m-lg--LineHeight); }\n .rich-text-editor-custom h4 {\n font-size: var(--pf-c-title--m-md--FontSize);\n font-weight: var(--pf-c-title--m-md--FontWeight);\n line-height: var(--pf-c-title--m-md--LineHeight); }\n .rich-text-editor-custom ul {\n display: block;\n list-style-type: disc;\n -webkit-margin-before: 1em;\n margin-block-start: 1em;\n -webkit-margin-after: 1em;\n margin-block-end: 1em;\n -webkit-margin-start: 0px;\n margin-inline-start: 0px;\n -webkit-margin-end: 0px;\n margin-inline-end: 0px;\n -webkit-padding-start: 40px;\n padding-inline-start: 40px; }\n .rich-text-editor-custom ul li {\n display: list-item; }\n .rich-text-editor-custom ul ul {\n list-style-type: circle;\n -webkit-margin-before: 0px;\n margin-block-start: 0px;\n -webkit-margin-after: 0px;\n margin-block-end: 0px; }\n .rich-text-editor-custom ol {\n display: block;\n list-style-type: decimal;\n -webkit-margin-before: 1em;\n margin-block-start: 1em;\n -webkit-margin-after: 1em;\n margin-block-end: 1em;\n -webkit-margin-start: 0px;\n margin-inline-start: 0px;\n -webkit-margin-end: 0px;\n margin-inline-end: 0px;\n -webkit-padding-start: 40px;\n padding-inline-start: 40px; }\n";
8
8
 
9
9
  const RichTextEditor = ({
10
10
  value,
@@ -23,7 +23,7 @@ const RichTextEditor = ({
23
23
  }
24
24
  };
25
25
 
26
- InsertCss();
26
+ InsertCss$1();
27
27
  return React.createElement("div", {
28
28
  className: 'rich-text-editor-custom'
29
29
  }, React.createElement(CKEditor, Object.assign({
@@ -88,14 +88,14 @@ const RichTextEditor = ({
88
88
  })));
89
89
  };
90
90
 
91
- const InsertCss = () => {
91
+ const InsertCss$1 = () => {
92
92
  const styleId = 'rich-test-editor-styles';
93
93
 
94
94
  if (!document.getElementById(styleId)) {
95
95
  const styleTag = document.createElement('style');
96
96
  styleTag.id = styleId;
97
97
  styleTag.type = 'text/css';
98
- styleTag.innerHTML = css_248z;
98
+ styleTag.innerHTML = css_248z$1;
99
99
  document.body.appendChild(styleTag);
100
100
  }
101
101
  };
@@ -130,6 +130,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
130
130
  return target;
131
131
  }
132
132
 
133
+ var css_248z = ".form-group .max-char-length {\n float: right;\n color: #6A6E73;\n font-size: var(--pf-c-form__helper-text--FontSize);\n margin-top: var(--pf-c-form__helper-text--MarginTop); }\n\n.form-group .maxlength-error {\n color: var(--pf-c-form--m-error--Color); }\n";
133
134
  const _excluded$1 = ["children", "helperTextInvalid", "isValid", "helperText", "labelIcon", "onClick"];
134
135
 
135
136
  const FormGroupContainer = _ref => {
@@ -143,6 +144,7 @@ const FormGroupContainer = _ref => {
143
144
  } = _ref,
144
145
  rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
145
146
 
147
+ InsertCss();
146
148
  return React.createElement(FormGroup, Object.assign({
147
149
  className: 'form-group',
148
150
  helperTextInvalid: helperTextInvalid,
@@ -155,7 +157,19 @@ const FormGroupContainer = _ref => {
155
157
  }, rest), children);
156
158
  };
157
159
 
158
- const _excluded = ["label", "isRequired", "ariaLabel", "placeholder", "helperText", "maxItems", "maxHeight", "disabled"];
160
+ const InsertCss = () => {
161
+ const styleId = 'form-group-component-style';
162
+
163
+ if (!document.getElementById(styleId)) {
164
+ const styleTag = document.createElement('style');
165
+ styleTag.id = styleId;
166
+ styleTag.type = 'text/css';
167
+ styleTag.innerHTML = css_248z;
168
+ document.body.appendChild(styleTag);
169
+ }
170
+ };
171
+
172
+ const _excluded = ["label", "isRequired", "ariaLabel", "placeholder", "helperText", "disabled", "showMaxLengthText", "maxLength"];
159
173
 
160
174
  const RichTextEditorFormComponent = _ref => {
161
175
  let {
@@ -163,7 +177,9 @@ const RichTextEditorFormComponent = _ref => {
163
177
  isRequired,
164
178
  ariaLabel = 'Enter text',
165
179
  helperText,
166
- disabled
180
+ disabled,
181
+ showMaxLengthText,
182
+ maxLength
167
183
  } = _ref,
168
184
  rest = _objectWithoutPropertiesLoose$1(_ref, _excluded);
169
185
 
@@ -179,6 +195,12 @@ const RichTextEditorFormComponent = _ref => {
179
195
  setFieldValue,
180
196
  validateField
181
197
  } = useFormikContext();
198
+ const [numberOfCharacters, setNoOfCharacters] = React.useState(maxLength || 0);
199
+ React.useEffect(() => {
200
+ if (maxLength) {
201
+ setNoOfCharacters(value && value.length ? maxLength - value.length : maxLength);
202
+ }
203
+ }, [value, maxLength]);
182
204
  return React.createElement(FormGroupContainer, {
183
205
  validated: meta.error ? ValidatedOptions.error : ValidatedOptions.default,
184
206
  onClick: () => {
@@ -197,6 +219,7 @@ const RichTextEditorFormComponent = _ref => {
197
219
  id: rest.name,
198
220
  name: rest.name,
199
221
  onReady: editor => {
222
+ editor.setData(value);
200
223
  editorRef.current = editor;
201
224
  },
202
225
  disabled: disabled || isSubmitting,
@@ -208,7 +231,10 @@ const RichTextEditorFormComponent = _ref => {
208
231
  setFieldValue(rest.name, data);
209
232
  validateField(rest.name);
210
233
  }
211
- }));
234
+ }), showMaxLengthText && React.createElement("div", {
235
+ "data-testid": 'formTextAreaMaxLengthText',
236
+ className: 'max-char-length' + (numberOfCharacters < 0 ? ' maxlength-error' : '')
237
+ }, numberOfCharacters, " character", numberOfCharacters !== 1 && 's', ' ', "remaining (includes HTML markup)"));
212
238
  };
213
239
 
214
240
  export { RichTextEditor, RichTextEditorFormComponent };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rhc-shared-components/rich-text-editor",
3
- "version": "0.2.12",
3
+ "version": "0.3.2",
4
4
  "description": "WYSWYG Editor for Red Hat Certified Apps",
5
5
  "author": "gautamkrishnar",
6
6
  "license": "MIT",
@@ -32,7 +32,7 @@
32
32
  "react-dom": ">=16.13.1"
33
33
  },
34
34
  "devDependencies": {
35
- "@rhc-shared-components/form-group-container": "^0.2.9",
35
+ "@rhc-shared-components/form-group-container": "^0.3.0",
36
36
  "@testing-library/jest-dom": "^4.2.4",
37
37
  "@testing-library/react": "^9.5.0",
38
38
  "@testing-library/user-event": "^7.2.1",
@@ -75,6 +75,5 @@
75
75
  "formik": "^2.1.4",
76
76
  "react": "^16.13.1",
77
77
  "react-dom": "^16.13.1"
78
- },
79
- "gitHead": "593ebdc63176c7c2b00d9d6b02b446c623e06805"
78
+ }
80
79
  }