rn-rich-text-editor 0.0.5 → 0.0.6
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/RichEditor.d.ts +30 -1
- package/dist/RichEditor.js +291 -58
- package/dist/RichToolbar.d.ts +4 -3
- package/dist/RichToolbar.js +77 -75
- package/dist/actions.d.ts +56 -21
- package/dist/actions.js +44 -9
- package/dist/editor/contentCSS.js +15 -19
- package/dist/editor/createHTML.d.ts +3 -3
- package/dist/editor/createHTML.js +695 -118
- package/dist/messages.d.ts +15 -5
- package/dist/messages.js +13 -3
- package/package.json +1 -1
package/dist/RichEditor.d.ts
CHANGED
|
@@ -1 +1,30 @@
|
|
|
1
|
-
export
|
|
1
|
+
export interface RichTextEditorRef {
|
|
2
|
+
registerToolbar: (listener: (items: string[]) => void) => void;
|
|
3
|
+
setContentFocusHandler: (listener: () => void) => void;
|
|
4
|
+
setContentHTML: (html: string) => void;
|
|
5
|
+
setPlaceholder: (placeholder: string) => void;
|
|
6
|
+
setContentStyle: (styles: any) => void;
|
|
7
|
+
setDisable: (dis: boolean) => void;
|
|
8
|
+
blurContentEditor: () => void;
|
|
9
|
+
focusContentEditor: () => void;
|
|
10
|
+
showAndroidKeyboard: () => void;
|
|
11
|
+
insertImage: (attributes: any, style?: any) => void;
|
|
12
|
+
insertVideo: (attributes: any, style?: any) => void;
|
|
13
|
+
insertText: (text: string) => void;
|
|
14
|
+
insertHTML: (html: string) => void;
|
|
15
|
+
insertLink: (title: string, url: string) => void;
|
|
16
|
+
injectJavascript: (script: string) => void;
|
|
17
|
+
preCode: (type: any) => void;
|
|
18
|
+
setFontSize: (size: any) => void;
|
|
19
|
+
setForeColor: (color: string) => void;
|
|
20
|
+
setHiliteColor: (color: string) => void;
|
|
21
|
+
setFontName: (name: string) => void;
|
|
22
|
+
commandDOM: (command: any) => void;
|
|
23
|
+
command: (command: any) => void;
|
|
24
|
+
dismissKeyboard: () => void;
|
|
25
|
+
getContentHtml: () => Promise<string>;
|
|
26
|
+
isKeyboardOpen: boolean;
|
|
27
|
+
}
|
|
28
|
+
export declare const RichTextEditor: any;
|
|
29
|
+
export default RichTextEditor;
|
|
30
|
+
export { RichTextEditor as RichEditor };
|
package/dist/RichEditor.js
CHANGED
|
@@ -33,117 +33,346 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
33
33
|
};
|
|
34
34
|
})();
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
-
exports.RichEditor = void 0;
|
|
36
|
+
exports.RichEditor = exports.RichTextEditor = void 0;
|
|
37
37
|
const react_1 = __importStar(require("react"));
|
|
38
38
|
const react_native_webview_1 = require("react-native-webview");
|
|
39
|
+
const actions_1 = require("./actions");
|
|
40
|
+
const messages_1 = require("./messages");
|
|
39
41
|
const react_native_1 = require("react-native");
|
|
40
42
|
const createHTML_1 = require("./editor/createHTML");
|
|
41
|
-
const messages_1 = require("./messages");
|
|
42
43
|
const PlatformIOS = react_native_1.Platform.OS === 'ios';
|
|
43
|
-
|
|
44
|
+
function buildCreateHTMLOptions(props) {
|
|
45
|
+
const { editorStyle: { backgroundColor, color, placeholderColor, initialCSSText, cssText, contentCSSText, caretColor, } = {}, html, pasteAsPlainText, onPaste, onKeyUp, onKeyDown, onInput, enterKeyHint, autoCapitalize, autoCorrect, defaultParagraphSeparator, firstFocusEnd, useContainer, initialFocus, disabled, styleWithCSS, useCharacter, defaultHttps, } = props;
|
|
46
|
+
return {
|
|
47
|
+
backgroundColor,
|
|
48
|
+
color,
|
|
49
|
+
caretColor,
|
|
50
|
+
placeholderColor,
|
|
51
|
+
initialCSSText,
|
|
52
|
+
cssText,
|
|
53
|
+
contentCSSText,
|
|
54
|
+
pasteAsPlainText,
|
|
55
|
+
pasteListener: !!onPaste,
|
|
56
|
+
keyUpListener: !!onKeyUp,
|
|
57
|
+
keyDownListener: !!onKeyDown,
|
|
58
|
+
inputListener: !!onInput,
|
|
59
|
+
enterKeyHint,
|
|
60
|
+
autoCapitalize,
|
|
61
|
+
autoCorrect,
|
|
62
|
+
initialFocus: initialFocus && !disabled,
|
|
63
|
+
defaultParagraphSeparator,
|
|
64
|
+
firstFocusEnd,
|
|
65
|
+
useContainer,
|
|
66
|
+
styleWithCSS,
|
|
67
|
+
useCharacter,
|
|
68
|
+
defaultHttps,
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
exports.RichTextEditor = (0, react_1.forwardRef)(function RichTextEditor({ contentInset = {}, style = {}, placeholder = '', initialContentHTML = '', initialFocus = false, disabled = false, useContainer = true, pasteAsPlainText = false, autoCapitalize = 'off', defaultParagraphSeparator = 'div', editorInitializedCallback = () => { }, initialHeight = 0, dataDetectorTypes = ['none'], editorStyle, html: htmlProp, onFocus, onBlur, onChange, onPaste, onKeyUp, onKeyDown, onInput, onMessage, onCursorPosition, onLink, onHeightChange, ...rest }, ref) {
|
|
44
72
|
const webRef = (0, react_1.useRef)(null);
|
|
45
73
|
const inputRef = (0, react_1.useRef)(null);
|
|
46
|
-
const [keyboardOpen, setKeyboardOpen] = (0, react_1.useState)(false);
|
|
47
74
|
const selectionChangeListeners = (0, react_1.useRef)([]);
|
|
75
|
+
const focusListeners = (0, react_1.useRef)([]);
|
|
76
|
+
const contentResolveRef = (0, react_1.useRef)();
|
|
77
|
+
const contentRejectRef = (0, react_1.useRef)();
|
|
78
|
+
const pendingContentHtmlRef = (0, react_1.useRef)();
|
|
79
|
+
const unmountRef = (0, react_1.useRef)(false);
|
|
80
|
+
const keyOpenRef = (0, react_1.useRef)(false);
|
|
81
|
+
const focusRef = (0, react_1.useRef)(false);
|
|
82
|
+
const layoutRef = (0, react_1.useRef)({});
|
|
83
|
+
const viewHTML = (0, react_1.useMemo)(() => htmlProp || (0, createHTML_1.createHTML)(buildCreateHTMLOptions({
|
|
84
|
+
editorStyle,
|
|
85
|
+
html: htmlProp,
|
|
86
|
+
pasteAsPlainText,
|
|
87
|
+
onPaste,
|
|
88
|
+
onKeyUp,
|
|
89
|
+
onKeyDown,
|
|
90
|
+
onInput,
|
|
91
|
+
enterKeyHint: rest.enterKeyHint,
|
|
92
|
+
autoCapitalize,
|
|
93
|
+
autoCorrect: rest.autoCorrect,
|
|
94
|
+
defaultParagraphSeparator,
|
|
95
|
+
firstFocusEnd: rest.firstFocusEnd,
|
|
96
|
+
useContainer,
|
|
97
|
+
initialFocus,
|
|
98
|
+
disabled,
|
|
99
|
+
styleWithCSS: rest.styleWithCSS,
|
|
100
|
+
useCharacter: rest.useCharacter,
|
|
101
|
+
defaultHttps: rest.defaultHttps,
|
|
102
|
+
})), []);
|
|
103
|
+
const [height, setHeight] = (0, react_1.useState)(initialHeight);
|
|
48
104
|
(0, react_1.useEffect)(() => {
|
|
49
|
-
|
|
105
|
+
unmountRef.current = false;
|
|
106
|
+
const keyboardShow = () => {
|
|
107
|
+
keyOpenRef.current = true;
|
|
108
|
+
};
|
|
109
|
+
const keyboardHide = () => {
|
|
110
|
+
keyOpenRef.current = false;
|
|
111
|
+
};
|
|
112
|
+
const listeners = PlatformIOS
|
|
50
113
|
? [
|
|
51
|
-
react_native_1.Keyboard.addListener('keyboardWillShow',
|
|
52
|
-
react_native_1.Keyboard.addListener('keyboardWillHide',
|
|
114
|
+
react_native_1.Keyboard.addListener('keyboardWillShow', keyboardShow),
|
|
115
|
+
react_native_1.Keyboard.addListener('keyboardWillHide', keyboardHide),
|
|
53
116
|
]
|
|
54
117
|
: [
|
|
55
|
-
react_native_1.Keyboard.addListener('keyboardDidShow',
|
|
56
|
-
react_native_1.Keyboard.addListener('keyboardDidHide',
|
|
118
|
+
react_native_1.Keyboard.addListener('keyboardDidShow', keyboardShow),
|
|
119
|
+
react_native_1.Keyboard.addListener('keyboardDidHide', keyboardHide),
|
|
57
120
|
];
|
|
58
121
|
return () => {
|
|
59
|
-
|
|
122
|
+
unmountRef.current = true;
|
|
123
|
+
listeners.forEach(l => l.remove());
|
|
60
124
|
};
|
|
61
125
|
}, []);
|
|
126
|
+
(0, react_1.useEffect)(() => {
|
|
127
|
+
if (editorStyle) {
|
|
128
|
+
sendAction(actions_1.actions.content, 'setContentStyle', editorStyle);
|
|
129
|
+
}
|
|
130
|
+
}, [editorStyle]);
|
|
131
|
+
(0, react_1.useEffect)(() => {
|
|
132
|
+
sendAction(actions_1.actions.content, 'setDisable', !!disabled);
|
|
133
|
+
}, [disabled]);
|
|
134
|
+
(0, react_1.useEffect)(() => {
|
|
135
|
+
sendAction(actions_1.actions.content, 'setPlaceholder', placeholder);
|
|
136
|
+
}, [placeholder]);
|
|
137
|
+
function sendAction(type, action, data, options) {
|
|
138
|
+
var _a, _b;
|
|
139
|
+
const jsonString = JSON.stringify({ type, name: action, data, options });
|
|
140
|
+
if (unmountRef.current || !webRef.current)
|
|
141
|
+
return;
|
|
142
|
+
const webRefAny = webRef.current;
|
|
143
|
+
if (typeof webRefAny.postMessage === 'function') {
|
|
144
|
+
webRefAny.postMessage(jsonString);
|
|
145
|
+
}
|
|
146
|
+
else {
|
|
147
|
+
(_b = (_a = webRef.current).injectJavaScript) === null || _b === void 0 ? void 0 : _b.call(_a, `window.dispatchEvent(new MessageEvent('message', { data: ${JSON.stringify(jsonString)} })); true;`);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
62
150
|
const handleMessage = (event) => {
|
|
63
|
-
var _a, _b
|
|
151
|
+
var _a, _b;
|
|
64
152
|
try {
|
|
65
153
|
const message = JSON.parse(event.nativeEvent.data);
|
|
66
|
-
const
|
|
67
|
-
switch (type) {
|
|
68
|
-
case messages_1.messages.
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
154
|
+
const data = message.data;
|
|
155
|
+
switch (message.type) {
|
|
156
|
+
case messages_1.messages.CONTENT_HTML_RESPONSE:
|
|
157
|
+
if (contentResolveRef.current) {
|
|
158
|
+
contentResolveRef.current(message.data);
|
|
159
|
+
contentResolveRef.current = undefined;
|
|
160
|
+
contentRejectRef.current = undefined;
|
|
161
|
+
if (pendingContentHtmlRef.current) {
|
|
162
|
+
clearTimeout(pendingContentHtmlRef.current);
|
|
163
|
+
pendingContentHtmlRef.current = undefined;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
78
166
|
break;
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
167
|
+
case messages_1.messages.LINK_TOUCHED:
|
|
168
|
+
onLink === null || onLink === void 0 ? void 0 : onLink(data);
|
|
169
|
+
break;
|
|
170
|
+
case messages_1.messages.LOG:
|
|
171
|
+
console.log('FROM EDIT:', ...data);
|
|
172
|
+
break;
|
|
173
|
+
case messages_1.messages.SELECTION_CHANGE:
|
|
174
|
+
selectionChangeListeners.current.forEach(listener => listener(message.data));
|
|
82
175
|
break;
|
|
83
176
|
case messages_1.messages.CONTENT_FOCUSED:
|
|
84
|
-
|
|
177
|
+
focusRef.current = true;
|
|
178
|
+
focusListeners.current.forEach(fn => fn());
|
|
179
|
+
onFocus === null || onFocus === void 0 ? void 0 : onFocus();
|
|
85
180
|
break;
|
|
86
181
|
case messages_1.messages.CONTENT_BLUR:
|
|
87
|
-
|
|
182
|
+
focusRef.current = false;
|
|
183
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur();
|
|
184
|
+
break;
|
|
185
|
+
case messages_1.messages.CONTENT_CHANGE:
|
|
186
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(data);
|
|
187
|
+
break;
|
|
188
|
+
case messages_1.messages.CONTENT_PASTED:
|
|
189
|
+
onPaste === null || onPaste === void 0 ? void 0 : onPaste(data);
|
|
190
|
+
break;
|
|
191
|
+
case messages_1.messages.CONTENT_KEYUP:
|
|
192
|
+
onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(data);
|
|
193
|
+
break;
|
|
194
|
+
case messages_1.messages.CONTENT_KEYDOWN:
|
|
195
|
+
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(data);
|
|
196
|
+
break;
|
|
197
|
+
case messages_1.messages.ON_INPUT:
|
|
198
|
+
onInput === null || onInput === void 0 ? void 0 : onInput(data);
|
|
88
199
|
break;
|
|
89
200
|
case messages_1.messages.OFFSET_HEIGHT:
|
|
90
|
-
(
|
|
201
|
+
if (data !== height) {
|
|
202
|
+
const maxHeight = Math.max(data, initialHeight);
|
|
203
|
+
if (!unmountRef.current && useContainer && maxHeight >= initialHeight) {
|
|
204
|
+
setHeight(maxHeight);
|
|
205
|
+
}
|
|
206
|
+
onHeightChange === null || onHeightChange === void 0 ? void 0 : onHeightChange(data);
|
|
207
|
+
}
|
|
208
|
+
break;
|
|
209
|
+
case messages_1.messages.OFFSET_Y:
|
|
210
|
+
const offsetY = Number(Number(data) + ((_b = (_a = layoutRef.current) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0));
|
|
211
|
+
if (offsetY > 0)
|
|
212
|
+
onCursorPosition === null || onCursorPosition === void 0 ? void 0 : onCursorPosition(offsetY);
|
|
91
213
|
break;
|
|
92
214
|
default:
|
|
93
|
-
|
|
215
|
+
onMessage === null || onMessage === void 0 ? void 0 : onMessage(message);
|
|
94
216
|
break;
|
|
95
217
|
}
|
|
96
218
|
}
|
|
97
|
-
catch (
|
|
219
|
+
catch (_c) {
|
|
98
220
|
// Non-JSON message, ignore
|
|
99
221
|
}
|
|
100
222
|
};
|
|
101
|
-
const
|
|
102
|
-
var _a;
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
223
|
+
const init = () => {
|
|
224
|
+
var _a, _b, _c;
|
|
225
|
+
if (initialContentHTML)
|
|
226
|
+
sendAction(actions_1.actions.content, 'setHtml', initialContentHTML);
|
|
227
|
+
if (placeholder)
|
|
228
|
+
sendAction(actions_1.actions.content, 'setPlaceholder', placeholder);
|
|
229
|
+
sendAction(actions_1.actions.content, 'setDisable', !!disabled);
|
|
230
|
+
editorInitializedCallback();
|
|
231
|
+
if (initialFocus && !disabled) {
|
|
232
|
+
if (react_native_1.Platform.OS === 'android') {
|
|
233
|
+
if (!keyOpenRef.current)
|
|
234
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
235
|
+
(_c = (_b = webRef.current) === null || _b === void 0 ? void 0 : _b.requestFocus) === null || _c === void 0 ? void 0 : _c.call(_b);
|
|
236
|
+
}
|
|
237
|
+
sendAction(actions_1.actions.content, 'focus');
|
|
238
|
+
}
|
|
239
|
+
sendAction(actions_1.actions.init);
|
|
106
240
|
};
|
|
107
241
|
(0, react_1.useImperativeHandle)(ref, () => ({
|
|
108
|
-
sendAction(type) {
|
|
109
|
-
sendToWebView(type);
|
|
110
|
-
},
|
|
111
242
|
registerToolbar(listener) {
|
|
112
|
-
selectionChangeListeners.current.
|
|
243
|
+
selectionChangeListeners.current = [...selectionChangeListeners.current, listener];
|
|
244
|
+
},
|
|
245
|
+
setContentFocusHandler(listener) {
|
|
246
|
+
focusListeners.current.push(listener);
|
|
247
|
+
},
|
|
248
|
+
setContentHTML(html) {
|
|
249
|
+
sendAction(actions_1.actions.content, 'setHtml', html);
|
|
250
|
+
},
|
|
251
|
+
setPlaceholder(placeholderText) {
|
|
252
|
+
sendAction(actions_1.actions.content, 'setPlaceholder', placeholderText);
|
|
253
|
+
},
|
|
254
|
+
setContentStyle(styles) {
|
|
255
|
+
sendAction(actions_1.actions.content, 'setContentStyle', styles);
|
|
256
|
+
},
|
|
257
|
+
setDisable(dis) {
|
|
258
|
+
sendAction(actions_1.actions.content, 'setDisable', !!dis);
|
|
259
|
+
},
|
|
260
|
+
blurContentEditor() {
|
|
261
|
+
sendAction(actions_1.actions.content, 'blur');
|
|
113
262
|
},
|
|
114
263
|
focusContentEditor() {
|
|
115
264
|
var _a, _b, _c;
|
|
116
265
|
if (react_native_1.Platform.OS === 'android') {
|
|
117
|
-
|
|
266
|
+
if (!keyOpenRef.current)
|
|
267
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
118
268
|
(_c = (_b = webRef.current) === null || _b === void 0 ? void 0 : _b.requestFocus) === null || _c === void 0 ? void 0 : _c.call(_b);
|
|
119
269
|
}
|
|
120
|
-
|
|
121
|
-
},
|
|
122
|
-
dismissKeyboard() {
|
|
123
|
-
sendToWebView('blur');
|
|
124
|
-
react_native_1.Keyboard.dismiss();
|
|
125
|
-
},
|
|
126
|
-
get isKeyboardOpen() {
|
|
127
|
-
return keyboardOpen;
|
|
270
|
+
sendAction(actions_1.actions.content, 'focus');
|
|
128
271
|
},
|
|
129
272
|
showAndroidKeyboard() {
|
|
130
273
|
var _a, _b, _c;
|
|
131
274
|
if (react_native_1.Platform.OS === 'android') {
|
|
132
|
-
|
|
275
|
+
if (!keyOpenRef.current)
|
|
276
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
133
277
|
(_c = (_b = webRef.current) === null || _b === void 0 ? void 0 : _b.requestFocus) === null || _c === void 0 ? void 0 : _c.call(_b);
|
|
134
278
|
}
|
|
135
279
|
},
|
|
280
|
+
insertImage(attributes, styleOpt) {
|
|
281
|
+
sendAction(actions_1.actions.insertImage, 'result', attributes, styleOpt);
|
|
282
|
+
},
|
|
283
|
+
insertVideo(attributes, styleOpt) {
|
|
284
|
+
sendAction(actions_1.actions.insertVideo, 'result', attributes, styleOpt);
|
|
285
|
+
},
|
|
286
|
+
insertText(text) {
|
|
287
|
+
sendAction(actions_1.actions.insertText, 'result', text);
|
|
288
|
+
},
|
|
289
|
+
insertHTML(html) {
|
|
290
|
+
sendAction(actions_1.actions.insertHTML, 'result', html);
|
|
291
|
+
},
|
|
292
|
+
insertLink(title, url) {
|
|
293
|
+
var _a, _b, _c;
|
|
294
|
+
if (url) {
|
|
295
|
+
if (react_native_1.Platform.OS === 'android') {
|
|
296
|
+
if (!keyOpenRef.current)
|
|
297
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
298
|
+
(_c = (_b = webRef.current) === null || _b === void 0 ? void 0 : _b.requestFocus) === null || _c === void 0 ? void 0 : _c.call(_b);
|
|
299
|
+
}
|
|
300
|
+
sendAction(actions_1.actions.insertLink, 'result', { title, url });
|
|
301
|
+
}
|
|
302
|
+
},
|
|
303
|
+
injectJavascript(script) {
|
|
304
|
+
var _a, _b;
|
|
305
|
+
return (_b = (_a = webRef.current) === null || _a === void 0 ? void 0 : _a.injectJavaScript) === null || _b === void 0 ? void 0 : _b.call(_a, script);
|
|
306
|
+
},
|
|
307
|
+
preCode(type) {
|
|
308
|
+
sendAction(actions_1.actions.code, 'result', type);
|
|
309
|
+
},
|
|
310
|
+
setFontSize(size) {
|
|
311
|
+
sendAction(actions_1.actions.fontSize, 'result', size);
|
|
312
|
+
},
|
|
313
|
+
setForeColor(color) {
|
|
314
|
+
sendAction(actions_1.actions.foreColor, 'result', color);
|
|
315
|
+
},
|
|
316
|
+
setHiliteColor(color) {
|
|
317
|
+
sendAction(actions_1.actions.hiliteColor, 'result', color);
|
|
318
|
+
},
|
|
319
|
+
setFontName(name) {
|
|
320
|
+
sendAction(actions_1.actions.fontName, 'result', name);
|
|
321
|
+
},
|
|
322
|
+
commandDOM(command) {
|
|
323
|
+
if (command)
|
|
324
|
+
sendAction(actions_1.actions.content, 'commandDOM', command);
|
|
325
|
+
},
|
|
326
|
+
command(command) {
|
|
327
|
+
if (command)
|
|
328
|
+
sendAction(actions_1.actions.content, 'command', command);
|
|
329
|
+
},
|
|
330
|
+
dismissKeyboard() {
|
|
331
|
+
if (focusRef.current)
|
|
332
|
+
sendAction(actions_1.actions.content, 'blur');
|
|
333
|
+
else
|
|
334
|
+
react_native_1.Keyboard.dismiss();
|
|
335
|
+
},
|
|
336
|
+
get isKeyboardOpen() {
|
|
337
|
+
return keyOpenRef.current;
|
|
338
|
+
},
|
|
339
|
+
getContentHtml() {
|
|
340
|
+
return new Promise((resolve, reject) => {
|
|
341
|
+
contentResolveRef.current = resolve;
|
|
342
|
+
contentRejectRef.current = reject;
|
|
343
|
+
sendAction(actions_1.actions.content, 'postHtml');
|
|
344
|
+
pendingContentHtmlRef.current = setTimeout(() => {
|
|
345
|
+
if (contentRejectRef.current)
|
|
346
|
+
contentRejectRef.current('timeout');
|
|
347
|
+
}, 5000);
|
|
348
|
+
});
|
|
349
|
+
},
|
|
136
350
|
}));
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
351
|
+
const onViewLayout = ({ nativeEvent: { layout } }) => {
|
|
352
|
+
layoutRef.current = layout;
|
|
353
|
+
};
|
|
354
|
+
const renderWebView = () => {
|
|
355
|
+
var _a;
|
|
356
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
357
|
+
react_1.default.createElement(react_native_webview_1.WebView, { ref: webRef, useWebKit: true, scrollEnabled: false, hideKeyboardAccessoryView: true, keyboardDisplayRequiresUserAction: false, nestedScrollEnabled: !useContainer, style: [styles.webview, style], ...rest, onMessage: handleMessage, originWhitelist: ['*'], dataDetectorTypes: dataDetectorTypes, domStorageEnabled: false, bounces: false, javaScriptEnabled: true, source: { html: typeof viewHTML === 'string' ? viewHTML : (_a = viewHTML === null || viewHTML === void 0 ? void 0 : viewHTML.html) !== null && _a !== void 0 ? _a : '' }, onLoad: init, onShouldStartLoadWithRequest: (event) => {
|
|
358
|
+
var _a, _b, _c;
|
|
359
|
+
if (event.url !== 'about:blank') {
|
|
360
|
+
(_b = (_a = webRef.current) === null || _a === void 0 ? void 0 : _a.stopLoading) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
361
|
+
(_c = react_native_1.Linking === null || react_native_1.Linking === void 0 ? void 0 : react_native_1.Linking.openURL) === null || _c === void 0 ? void 0 : _c.call(react_native_1.Linking, event.url);
|
|
362
|
+
return false;
|
|
363
|
+
}
|
|
364
|
+
return true;
|
|
365
|
+
} }),
|
|
366
|
+
react_native_1.Platform.OS === 'android' && react_1.default.createElement(react_native_1.TextInput, { ref: inputRef, style: styles._input })));
|
|
367
|
+
};
|
|
368
|
+
if (useContainer) {
|
|
369
|
+
return (react_1.default.createElement(react_native_1.View, { style: [style, { height }], onLayout: onViewLayout }, renderWebView()));
|
|
370
|
+
}
|
|
371
|
+
return renderWebView();
|
|
140
372
|
});
|
|
373
|
+
exports.RichEditor = exports.RichTextEditor;
|
|
141
374
|
const styles = react_native_1.StyleSheet.create({
|
|
142
|
-
|
|
143
|
-
minHeight: 150,
|
|
144
|
-
backgroundColor: '#fff',
|
|
145
|
-
},
|
|
146
|
-
hiddenInput: {
|
|
375
|
+
_input: {
|
|
147
376
|
position: 'absolute',
|
|
148
377
|
width: 1,
|
|
149
378
|
height: 1,
|
|
@@ -151,4 +380,8 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
151
380
|
bottom: -999,
|
|
152
381
|
left: -999,
|
|
153
382
|
},
|
|
383
|
+
webview: {
|
|
384
|
+
backgroundColor: 'transparent',
|
|
385
|
+
},
|
|
154
386
|
});
|
|
387
|
+
exports.default = exports.RichTextEditor;
|
package/dist/RichToolbar.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const defaultActions:
|
|
2
|
+
export declare const defaultActions: string[];
|
|
3
3
|
interface RichToolbarProps {
|
|
4
4
|
editor?: {
|
|
5
5
|
current: any;
|
|
@@ -27,6 +27,7 @@ interface RichToolbarProps {
|
|
|
27
27
|
flatContainerStyle?: any;
|
|
28
28
|
horizontal?: boolean;
|
|
29
29
|
children?: React.ReactNode;
|
|
30
|
+
[key: string]: any;
|
|
30
31
|
}
|
|
31
|
-
export declare function RichToolbar({ editor, getEditor, actions: actionsProp, disabled, iconTint, selectedIconTint, disabledIconTint, iconSize, iconGap, style, itemStyle, selectedButtonStyle, unselectedButtonStyle, disabledButtonStyle, iconMap, renderAction, onPressAddImage, onInsertLink, insertVideo, flatContainerStyle, horizontal, children, }: Readonly<RichToolbarProps>): any;
|
|
32
|
-
export
|
|
32
|
+
export declare function RichToolbar({ editor: editorProp, getEditor, actions: actionsProp, disabled, iconTint, selectedIconTint, disabledIconTint, iconSize, iconGap, style, itemStyle, selectedButtonStyle, unselectedButtonStyle, disabledButtonStyle, iconMap, renderAction, onPressAddImage, onInsertLink, insertVideo, flatContainerStyle, horizontal, children, ...restProps }: Readonly<RichToolbarProps>): any;
|
|
33
|
+
export default RichToolbar;
|