jodit-react 4.0.30 → 5.0.0-beta.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/.github/workflows/new-version.yml +2 -2
- package/.github/workflows/release.yml +3 -3
- package/.nvmrc +1 -1
- package/README.md +24 -5
- package/build/jodit-react.js +1 -1
- package/build/jodit-react.js.LICENSE.txt +1 -1
- package/build/types/JoditEditor.d.ts +21 -0
- package/build/types/include.jodit.d.ts +3 -0
- package/build/types/index.d.ts +4 -0
- package/examples/{app.js → app.tsx} +7 -3
- package/examples/components/{Form.js → Form.tsx} +22 -17
- package/examples/index.html +9 -9
- package/examples/webpack.config.ts +43 -0
- package/index.d.ts +1 -27
- package/package.json +44 -45
- package/src/JoditEditor.tsx +159 -0
- package/src/include.jodit.ts +7 -0
- package/tsconfig.json +18 -0
- package/{webpack.config.js → webpack.config.ts} +8 -7
- package/babel.config.json +0 -12
- package/examples/.babelrc +0 -12
- package/examples/webpack.config.js +0 -45
- package/src/JoditEditor.js +0 -146
- package/src/include.jodit.js +0 -4
- /package/src/{index.js → index.ts} +0 -0
package/src/JoditEditor.js
DELETED
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useRef, forwardRef, useLayoutEffect } from 'react';
|
|
2
|
-
import { func, number, object, string } from 'prop-types';
|
|
3
|
-
import { Jodit } from './include.jodit';
|
|
4
|
-
|
|
5
|
-
const { isFunction } = Jodit.modules.Helpers;
|
|
6
|
-
|
|
7
|
-
function usePrevious(value) {
|
|
8
|
-
const ref = useRef();
|
|
9
|
-
useEffect(() => {
|
|
10
|
-
ref.current = value;
|
|
11
|
-
}, [value]);
|
|
12
|
-
return ref.current;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
const JoditEditor = forwardRef(
|
|
16
|
-
(
|
|
17
|
-
{
|
|
18
|
-
className,
|
|
19
|
-
config,
|
|
20
|
-
id,
|
|
21
|
-
name,
|
|
22
|
-
onBlur,
|
|
23
|
-
onChange,
|
|
24
|
-
tabIndex,
|
|
25
|
-
value,
|
|
26
|
-
editorRef
|
|
27
|
-
},
|
|
28
|
-
ref
|
|
29
|
-
) => {
|
|
30
|
-
const textArea = useRef(null);
|
|
31
|
-
|
|
32
|
-
useLayoutEffect(() => {
|
|
33
|
-
if (ref) {
|
|
34
|
-
if (isFunction(ref)) {
|
|
35
|
-
ref(textArea.current);
|
|
36
|
-
} else {
|
|
37
|
-
ref.current = textArea.current;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}, [textArea, ref]);
|
|
41
|
-
|
|
42
|
-
useEffect(() => {
|
|
43
|
-
const element = textArea.current;
|
|
44
|
-
const jodit = Jodit.make(element, config);
|
|
45
|
-
textArea.current = jodit;
|
|
46
|
-
|
|
47
|
-
if (isFunction(editorRef)) {
|
|
48
|
-
editorRef(jodit);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
return () => {
|
|
52
|
-
if (jodit) {
|
|
53
|
-
jodit.destruct();
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
textArea.current = element;
|
|
57
|
-
};
|
|
58
|
-
}, [config, editorRef]);
|
|
59
|
-
|
|
60
|
-
const preClassName = usePrevious(className);
|
|
61
|
-
|
|
62
|
-
useEffect(() => {
|
|
63
|
-
const classList = textArea.current?.container?.classList;
|
|
64
|
-
|
|
65
|
-
if (
|
|
66
|
-
preClassName !== className &&
|
|
67
|
-
typeof preClassName === 'string'
|
|
68
|
-
) {
|
|
69
|
-
preClassName.split(/\s+/).forEach(cl => classList?.remove(cl));
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
if (className && typeof className === 'string') {
|
|
73
|
-
className.split(/\s+/).forEach(cl => classList?.add(cl));
|
|
74
|
-
}
|
|
75
|
-
}, [className, preClassName]);
|
|
76
|
-
|
|
77
|
-
useEffect(() => {
|
|
78
|
-
if (textArea.current.workplace) {
|
|
79
|
-
textArea.current.workplace.tabIndex = tabIndex || -1;
|
|
80
|
-
}
|
|
81
|
-
}, [tabIndex]);
|
|
82
|
-
|
|
83
|
-
useEffect(() => {
|
|
84
|
-
if (!textArea.current.events || (!onBlur && !onChange)) {
|
|
85
|
-
return;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
const onBlurHandler = e =>
|
|
89
|
-
onBlur && onBlur(textArea.current.value, e);
|
|
90
|
-
const onChangeHandler = value => onChange && onChange(value);
|
|
91
|
-
|
|
92
|
-
// adding event handlers
|
|
93
|
-
textArea.current.events
|
|
94
|
-
.on('blur', onBlurHandler)
|
|
95
|
-
.on('change', onChangeHandler);
|
|
96
|
-
|
|
97
|
-
return () => {
|
|
98
|
-
// Remove event handlers
|
|
99
|
-
textArea.current?.events
|
|
100
|
-
?.off('blur', onBlurHandler)
|
|
101
|
-
.off('change', onChangeHandler);
|
|
102
|
-
};
|
|
103
|
-
}, [onBlur, onChange]);
|
|
104
|
-
|
|
105
|
-
useEffect(() => {
|
|
106
|
-
const updateValue = () => {
|
|
107
|
-
if (textArea.current && textArea?.current?.value !== value) {
|
|
108
|
-
textArea.current.value = value;
|
|
109
|
-
}
|
|
110
|
-
};
|
|
111
|
-
|
|
112
|
-
if (textArea.current) {
|
|
113
|
-
textArea.current.isReady
|
|
114
|
-
? updateValue()
|
|
115
|
-
: textArea.current.waitForReady().then(updateValue);
|
|
116
|
-
}
|
|
117
|
-
}, [value]);
|
|
118
|
-
|
|
119
|
-
return (
|
|
120
|
-
<div className={'jodit-react-container'}>
|
|
121
|
-
<textarea
|
|
122
|
-
defaultValue={value}
|
|
123
|
-
name={name}
|
|
124
|
-
id={id}
|
|
125
|
-
ref={textArea}
|
|
126
|
-
/>
|
|
127
|
-
</div>
|
|
128
|
-
);
|
|
129
|
-
}
|
|
130
|
-
);
|
|
131
|
-
|
|
132
|
-
JoditEditor.displayName = 'JoditEditor';
|
|
133
|
-
|
|
134
|
-
JoditEditor.propTypes = {
|
|
135
|
-
className: string,
|
|
136
|
-
config: object,
|
|
137
|
-
id: string,
|
|
138
|
-
name: string,
|
|
139
|
-
onBlur: func,
|
|
140
|
-
onChange: func,
|
|
141
|
-
editorRef: func,
|
|
142
|
-
tabIndex: number,
|
|
143
|
-
value: string
|
|
144
|
-
};
|
|
145
|
-
|
|
146
|
-
export default JoditEditor;
|
package/src/include.jodit.js
DELETED
|
File without changes
|