@rhc-shared-components/rich-text-editor 2.0.4 → 3.0.0
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/README.md +11 -1
- package/dist/RichTextEditor.d.ts +21 -0
- package/dist/RichTextEditorFormComponent.d.ts +21 -0
- package/dist/assets/index.css +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +170 -0
- package/package.json +59 -61
package/README.md
CHANGED
|
@@ -1,9 +1,19 @@
|
|
|
1
1
|
# @rhc-shared-components/rich-text-editor
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> WYSIWYG Editor for Red Hat Certified Apps
|
|
4
4
|
|
|
5
5
|
## Install
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm install --save @rhc-shared-components/rich-text-editor
|
|
9
9
|
```
|
|
10
|
+
|
|
11
|
+
## Development
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
yarn dev # start dev server
|
|
15
|
+
yarn build # production build
|
|
16
|
+
yarn lint # check with Biome
|
|
17
|
+
yarn lint-fix # auto-fix with Biome
|
|
18
|
+
yarn format # format with Biome
|
|
19
|
+
```
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { FC } from '../node_modules/@types/react';
|
|
2
|
+
type RichTextEditorFunctionType = (value: string, event?: Event, editor?: CKEditorInstance) => void;
|
|
3
|
+
export interface RichTextEditorProps {
|
|
4
|
+
value: string;
|
|
5
|
+
disabled?: boolean | undefined;
|
|
6
|
+
onReady?: ((editor: CKEditorInstance) => void) | undefined;
|
|
7
|
+
onChange?: RichTextEditorFunctionType | undefined;
|
|
8
|
+
onBlur?: RichTextEditorFunctionType | undefined;
|
|
9
|
+
onFocus?: RichTextEditorFunctionType | undefined;
|
|
10
|
+
onError?: ((error: Error, details?: {
|
|
11
|
+
phase: string;
|
|
12
|
+
willEditorRestart: boolean;
|
|
13
|
+
}) => void) | undefined;
|
|
14
|
+
id?: string | undefined;
|
|
15
|
+
name?: string | undefined;
|
|
16
|
+
showCodeBlock?: boolean | undefined;
|
|
17
|
+
ariaLabel?: string | undefined;
|
|
18
|
+
placeholder?: string | undefined;
|
|
19
|
+
}
|
|
20
|
+
declare const RichTextEditor: FC<RichTextEditorProps>;
|
|
21
|
+
export default RichTextEditor;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { FC, ReactNode } from '../node_modules/@types/react';
|
|
2
|
+
declare global {
|
|
3
|
+
interface Window {
|
|
4
|
+
ckeditorObj: Record<string, CKEditorInstance>;
|
|
5
|
+
}
|
|
6
|
+
}
|
|
7
|
+
export interface RichTextEditorFormComponentProps {
|
|
8
|
+
name: string;
|
|
9
|
+
label: string;
|
|
10
|
+
disabled?: boolean | undefined;
|
|
11
|
+
isRequired?: boolean | undefined;
|
|
12
|
+
placeholder?: string | undefined;
|
|
13
|
+
ariaLabel?: string | undefined;
|
|
14
|
+
helperText?: string | undefined;
|
|
15
|
+
showMaxLengthText?: boolean | undefined;
|
|
16
|
+
maxLength?: number | undefined;
|
|
17
|
+
showCodeBlock?: boolean | undefined;
|
|
18
|
+
labelHelp?: ReactNode | undefined;
|
|
19
|
+
}
|
|
20
|
+
declare const RichTextEditorFormComponent: FC<RichTextEditorFormComponentProps>;
|
|
21
|
+
export default RichTextEditorFormComponent;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.rich-text-editor-custom{--rte-h1-internal-LineHeight: var(--pf-v6-global--LineHeight--sm);--rte-h1-internal-FontSize: var(--pf-v6-global--FontSize--2xl);--rte-h1-internal-FontWeight: var(--pf-v6-global--FontWeight--normal);--rte-h2-internal-LineHeight: var(--pf-v6-global--LineHeight--md);--rte-h2-internal-FontSize: var(--pf-v6-global--FontSize--xl);--rte-h2-internal-FontWeight: var(--pf-v6-global--FontWeight--normal);--rte-h3-internal-LineHeight: var(--pf-v6-global--LineHeight--md);--rte-h3-internal-FontSize: var(--pf-v6-global--FontSize--lg);--rte-h3-internal-FontWeight: var(--pf-v6-global--FontWeight--normal);--rte-h4-internal-LineHeight: var(--pf-v6-global--LineHeight--md);--rte-h4-internal-FontSize: var(--pf-v6-global--FontSize--md);--rte-h4-internal-FontWeight: var(--pf-v6-global--FontWeight--normal)}.rich-text-editor-custom .ck-editor__main{word-break:break-all}.rich-text-editor-custom .ck-code-block-dropdown .ck-splitbutton__arrow{display:none}.rich-text-editor-custom h1{font-size:var(--rte-h1-internal-FontSize);font-weight:var(--rte-h1-internal-FontWeight);line-height:var(--rte-h1-internal-LineHeight)}.rich-text-editor-custom h2{font-size:var(--rte-h2-internal-FontSize);font-weight:var(--rte-h2-internal-FontWeight);line-height:var(--rte-h2-internal-LineHeight)}.rich-text-editor-custom h3{font-size:var(--rte-h3-internal-FontSize);font-weight:var(--rte-h3-internal-FontWeight);line-height:var(--rte-h3-internal-LineHeight)}.rich-text-editor-custom h4{font-size:var(--rte-h4-internal-FontSize);font-weight:var(--rte-h4-internal-FontWeight);line-height:var(--rte-h4-internal-LineHeight)}.rich-text-editor-custom ul{display:block;list-style-type:disc;margin-block-start:1em;margin-block-end:1em;margin-inline-start:0;margin-inline-end:0;padding-inline-start:40px}.rich-text-editor-custom ul li{display:list-item}.rich-text-editor-custom ul ul{list-style-type:circle;margin-block-start:0;margin-block-end:0}.rich-text-editor-custom--disabled{opacity:.6;pointer-events:none}.rich-text-editor-custom ol{display:block;list-style-type:decimal;margin-block-start:1em;margin-block-end:1em;margin-inline-start:0;margin-inline-end:0;padding-inline-start:40px}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { default as RichTextEditor } from './RichTextEditor';
|
|
2
|
+
import { default as RichTextEditorFormComponent } from './RichTextEditorFormComponent';
|
|
3
|
+
export type { RichTextEditorProps } from './RichTextEditor';
|
|
4
|
+
export type { RichTextEditorFormComponentProps } from './RichTextEditorFormComponent';
|
|
5
|
+
export { RichTextEditor, RichTextEditorFormComponent };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
import { jsx as w, jsxs as j } from "react/jsx-runtime";
|
|
2
|
+
import { CKEditor as V } from "@ckeditor/ckeditor5-react";
|
|
3
|
+
import A from "@rhc-shared-components/rhc-ckeditor";
|
|
4
|
+
import { ValidatedOptions as v } from "@patternfly/react-core";
|
|
5
|
+
import { FormGroupContainer as D } from "@rhc-shared-components/form-group-container";
|
|
6
|
+
import { useField as I, useFormikContext as N } from "formik";
|
|
7
|
+
import { useRef as B, useState as S, useEffect as M } from "react";
|
|
8
|
+
import './assets/index.css';const $ = ({
|
|
9
|
+
value: k,
|
|
10
|
+
disabled: s,
|
|
11
|
+
onReady: l,
|
|
12
|
+
onChange: b,
|
|
13
|
+
onError: g,
|
|
14
|
+
onBlur: E,
|
|
15
|
+
onFocus: F,
|
|
16
|
+
id: r,
|
|
17
|
+
name: h,
|
|
18
|
+
showCodeBlock: p,
|
|
19
|
+
ariaLabel: i,
|
|
20
|
+
placeholder: a
|
|
21
|
+
}) => {
|
|
22
|
+
const u = (t, e, n) => {
|
|
23
|
+
t && n && t(n.getData(), e, n);
|
|
24
|
+
};
|
|
25
|
+
return /* @__PURE__ */ w(
|
|
26
|
+
"div",
|
|
27
|
+
{
|
|
28
|
+
className: `rich-text-editor-custom${s ? " rich-text-editor-custom--disabled" : ""}`,
|
|
29
|
+
children: /* @__PURE__ */ w(
|
|
30
|
+
V,
|
|
31
|
+
{
|
|
32
|
+
editor: A,
|
|
33
|
+
data: k,
|
|
34
|
+
config: {
|
|
35
|
+
...a && { placeholder: a },
|
|
36
|
+
codeBlock: {
|
|
37
|
+
languages: [{ language: "code", label: "Code", forceValue: !0 }]
|
|
38
|
+
},
|
|
39
|
+
toolbar: {
|
|
40
|
+
items: [
|
|
41
|
+
"heading",
|
|
42
|
+
"|",
|
|
43
|
+
"bold",
|
|
44
|
+
"italic",
|
|
45
|
+
"underline",
|
|
46
|
+
"link",
|
|
47
|
+
"bulletedList",
|
|
48
|
+
"numberedList",
|
|
49
|
+
"|",
|
|
50
|
+
...p ? ["codeBlock"] : [],
|
|
51
|
+
"blockQuote",
|
|
52
|
+
"insertTable",
|
|
53
|
+
"undo",
|
|
54
|
+
"redo"
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
disabled: s,
|
|
59
|
+
onReady: (t) => {
|
|
60
|
+
var n, x;
|
|
61
|
+
const e = (x = (n = t.ui).getEditableElement) == null ? void 0 : x.call(n);
|
|
62
|
+
if (e) {
|
|
63
|
+
i && e.setAttribute("aria-label", i);
|
|
64
|
+
const d = e == null ? void 0 : e.closest(".ck-editor__main");
|
|
65
|
+
d && d.classList.add("pf-v6-c-form-control");
|
|
66
|
+
}
|
|
67
|
+
l && l(t);
|
|
68
|
+
},
|
|
69
|
+
onChange: (t, e) => {
|
|
70
|
+
u(b, t, e);
|
|
71
|
+
},
|
|
72
|
+
onBlur: (t, e) => {
|
|
73
|
+
u(E, t, e);
|
|
74
|
+
},
|
|
75
|
+
onFocus: (t, e) => {
|
|
76
|
+
u(F, t, e);
|
|
77
|
+
},
|
|
78
|
+
onError: (t, e) => {
|
|
79
|
+
g && g(t, e);
|
|
80
|
+
},
|
|
81
|
+
...r && { id: r },
|
|
82
|
+
...h && { name: h }
|
|
83
|
+
}
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
);
|
|
87
|
+
}, q = ({
|
|
88
|
+
label: k,
|
|
89
|
+
isRequired: s,
|
|
90
|
+
ariaLabel: l = "Enter text",
|
|
91
|
+
placeholder: b,
|
|
92
|
+
helperText: g,
|
|
93
|
+
disabled: E,
|
|
94
|
+
showMaxLengthText: F,
|
|
95
|
+
maxLength: r,
|
|
96
|
+
showCodeBlock: h,
|
|
97
|
+
labelHelp: p,
|
|
98
|
+
...i
|
|
99
|
+
}) => {
|
|
100
|
+
const [, a, { setTouched: u }] = I({ name: i.name }), { value: t } = a, e = B(null), n = N(), { isSubmitting: x, setFieldValue: d } = n || {
|
|
101
|
+
isSubmitting: !1,
|
|
102
|
+
setFieldValue: () => {
|
|
103
|
+
}
|
|
104
|
+
}, [T, R] = S(r || 0), O = B(!1);
|
|
105
|
+
return M(() => {
|
|
106
|
+
r && R(t != null && t.length ? r - t.length : r);
|
|
107
|
+
}, [t, r]), /* @__PURE__ */ j(
|
|
108
|
+
D,
|
|
109
|
+
{
|
|
110
|
+
validated: a.touched && a.error ? v.error : v.default,
|
|
111
|
+
onClick: (o) => {
|
|
112
|
+
var c, m, f;
|
|
113
|
+
const C = o == null ? void 0 : o.target;
|
|
114
|
+
(c = C == null ? void 0 : C.classList) != null && c.contains("pf-v6-c-form__label-text") && e.current && ((f = (m = e.current.editing) == null ? void 0 : m.view) == null || f.focus());
|
|
115
|
+
},
|
|
116
|
+
fieldId: i.name,
|
|
117
|
+
helperTextInvalid: a.error,
|
|
118
|
+
isRequired: s,
|
|
119
|
+
label: k,
|
|
120
|
+
helperText: g,
|
|
121
|
+
...p && { labelHelp: p },
|
|
122
|
+
children: [
|
|
123
|
+
/* @__PURE__ */ w(
|
|
124
|
+
$,
|
|
125
|
+
{
|
|
126
|
+
showCodeBlock: h,
|
|
127
|
+
value: t,
|
|
128
|
+
id: i.name,
|
|
129
|
+
name: i.name,
|
|
130
|
+
...l && { ariaLabel: l },
|
|
131
|
+
...b && { placeholder: b },
|
|
132
|
+
onReady: (o) => {
|
|
133
|
+
o && !O.current && (O.current = !0, window.ckeditorObj = window.ckeditorObj || {}, window.ckeditorObj[i.name] = o, e.current = o, t && !o.getData() && o.setData(t));
|
|
134
|
+
},
|
|
135
|
+
onFocus: (o, C, c) => {
|
|
136
|
+
var f, _;
|
|
137
|
+
const m = (_ = c == null ? void 0 : (f = c.ui).getEditableElement) == null ? void 0 : _.call(f);
|
|
138
|
+
m && s && m.setAttribute("aria-required", "true");
|
|
139
|
+
},
|
|
140
|
+
disabled: E || x,
|
|
141
|
+
onChange: (o) => {
|
|
142
|
+
d(i.name, o, !0);
|
|
143
|
+
},
|
|
144
|
+
onBlur: (o) => {
|
|
145
|
+
d(i.name, o, !0), u(!0);
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
),
|
|
149
|
+
F && /* @__PURE__ */ j(
|
|
150
|
+
"div",
|
|
151
|
+
{
|
|
152
|
+
"data-testid": "formTextAreaMaxLengthText",
|
|
153
|
+
className: `max-char-length${T < 0 ? " maxlength-error" : ""}`,
|
|
154
|
+
children: [
|
|
155
|
+
T,
|
|
156
|
+
" character",
|
|
157
|
+
T !== 1 && "s",
|
|
158
|
+
" ",
|
|
159
|
+
"remaining (includes HTML markup)"
|
|
160
|
+
]
|
|
161
|
+
}
|
|
162
|
+
)
|
|
163
|
+
]
|
|
164
|
+
}
|
|
165
|
+
);
|
|
166
|
+
};
|
|
167
|
+
export {
|
|
168
|
+
$ as RichTextEditor,
|
|
169
|
+
q as RichTextEditorFormComponent
|
|
170
|
+
};
|
package/package.json
CHANGED
|
@@ -1,63 +1,61 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
"vite-plugin-lib-inject-css": "^2.2.1"
|
|
62
|
-
}
|
|
2
|
+
"name": "@rhc-shared-components/rich-text-editor",
|
|
3
|
+
"version": "3.0.0",
|
|
4
|
+
"description": "WYSWYG Editor for Red Hat Certified Apps",
|
|
5
|
+
"author": "Red Hat",
|
|
6
|
+
"license": "SEE LICENSE IN LICENSE",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"main": "./dist/index.js",
|
|
9
|
+
"types": "./dist/index.d.ts",
|
|
10
|
+
"exports": {
|
|
11
|
+
".": {
|
|
12
|
+
"types": "./dist/index.d.ts",
|
|
13
|
+
"import": "./dist/index.js",
|
|
14
|
+
"default": "./dist/index.js"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"dist",
|
|
19
|
+
"README.md"
|
|
20
|
+
],
|
|
21
|
+
"scripts": {
|
|
22
|
+
"dev": "vite",
|
|
23
|
+
"build": "tsc -b ./tsconfig.lib.json && vite build",
|
|
24
|
+
"lint": "biome check .",
|
|
25
|
+
"lint-fix": "biome check --write .",
|
|
26
|
+
"format": "biome format --write .",
|
|
27
|
+
"preview": "vite preview"
|
|
28
|
+
},
|
|
29
|
+
"peerDependencies": {
|
|
30
|
+
"@patternfly/react-core": "6.5.1",
|
|
31
|
+
"formik": ">=2.1.4",
|
|
32
|
+
"react": ">=16.13.1",
|
|
33
|
+
"react-dom": ">=16.13.1"
|
|
34
|
+
},
|
|
35
|
+
"publishConfig": {
|
|
36
|
+
"access": "public"
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"@biomejs/biome": "^2.4.15",
|
|
40
|
+
"@ckeditor/ckeditor5-react": "^5.1.0",
|
|
41
|
+
"@patternfly/react-core": "6.5.1",
|
|
42
|
+
"@patternfly/react-icons": "6.5.1",
|
|
43
|
+
"@rhc-shared-components/rhc-ckeditor": "^1.0.2",
|
|
44
|
+
"@types/ckeditor": "^4.9.10",
|
|
45
|
+
"@types/node": "^22.13.4",
|
|
46
|
+
"@types/react": "^19.2.0",
|
|
47
|
+
"@types/react-dom": "^19.2.0",
|
|
48
|
+
"@vitejs/plugin-react": "^5.1.2",
|
|
49
|
+
"formik": "^2.1.4",
|
|
50
|
+
"react": "^19.2.0",
|
|
51
|
+
"react-dom": "^19.2.0",
|
|
52
|
+
"sass": "^1.57.1",
|
|
53
|
+
"typescript": "~5.7.2",
|
|
54
|
+
"vite": "^6.1.0",
|
|
55
|
+
"vite-plugin-dts": "^4.5.0",
|
|
56
|
+
"vite-plugin-lib-inject-css": "^2.2.1"
|
|
57
|
+
},
|
|
58
|
+
"dependencies": {
|
|
59
|
+
"@rhc-shared-components/form-group-container": "4.0.1"
|
|
60
|
+
}
|
|
63
61
|
}
|