@chaitrabhairappa/react-native-rich-text-editor 3.4.1 → 3.4.3
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/android/src/main/java/com/richtext/editor/RichTextEditorView.kt +5 -7
- package/ios/RichTextEditorView.swift +10 -6
- package/lib/commonjs/index.js +13 -21
- package/lib/commonjs/index.js.map +1 -1
- package/lib/module/index.js +17 -25
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/src/index.d.ts +4 -4
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/index.tsx +225 -248
|
@@ -133,7 +133,7 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
|
|
|
133
133
|
init {
|
|
134
134
|
density = context.resources.displayMetrics.density
|
|
135
135
|
minHeightPx = 44 * density
|
|
136
|
-
calculatedHeight =
|
|
136
|
+
calculatedHeight = 0f
|
|
137
137
|
bottomBorderPaint.strokeWidth = density
|
|
138
138
|
|
|
139
139
|
val paddingHorizontal = (12 * density).toInt()
|
|
@@ -1166,13 +1166,11 @@ class RichTextEditorView(context: Context) : androidx.appcompat.widget.AppCompat
|
|
|
1166
1166
|
setSelection(spannable.length)
|
|
1167
1167
|
}
|
|
1168
1168
|
isInternalChange = false
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
applyEllipsisIfNeeded()
|
|
1173
|
-
}
|
|
1174
|
-
updateContentSize()
|
|
1169
|
+
if (numberOfLinesValue > 0 && !isEnabled) {
|
|
1170
|
+
scrollTo(0, 0)
|
|
1171
|
+
applyEllipsisIfNeeded()
|
|
1175
1172
|
}
|
|
1173
|
+
updateContentSize()
|
|
1176
1174
|
}
|
|
1177
1175
|
|
|
1178
1176
|
fun getTextContent(): String = text.toString()
|
|
@@ -659,7 +659,7 @@ class RichTextEditorView: UIView, UITextViewDelegate, PHPickerViewControllerDele
|
|
|
659
659
|
@objc var onActiveStylesChange: RCTDirectEventBlock?
|
|
660
660
|
|
|
661
661
|
private var lastReportedHeight: CGFloat = 0
|
|
662
|
-
private var calculatedHeight: CGFloat =
|
|
662
|
+
private var calculatedHeight: CGFloat = 0
|
|
663
663
|
|
|
664
664
|
override init(frame: CGRect) {
|
|
665
665
|
super.init(frame: frame)
|
|
@@ -1408,7 +1408,13 @@ class RichTextEditorView: UIView, UITextViewDelegate, PHPickerViewControllerDele
|
|
|
1408
1408
|
}
|
|
1409
1409
|
|
|
1410
1410
|
override var intrinsicContentSize: CGSize {
|
|
1411
|
-
|
|
1411
|
+
let width = bounds.width > 0 ? bounds.width : UIScreen.main.bounds.width - 32
|
|
1412
|
+
let fittingSize = textView.sizeThatFits(CGSize(width: width, height: CGFloat.greatestFiniteMagnitude))
|
|
1413
|
+
var height = max(fittingSize.height, 44)
|
|
1414
|
+
if maxHeight > 0 {
|
|
1415
|
+
height = min(height, maxHeight)
|
|
1416
|
+
}
|
|
1417
|
+
return CGSize(width: UIView.noIntrinsicMetric, height: height)
|
|
1412
1418
|
}
|
|
1413
1419
|
|
|
1414
1420
|
override func sizeThatFits(_ size: CGSize) -> CGSize {
|
|
@@ -2673,10 +2679,8 @@ class RichTextEditorView: UIView, UITextViewDelegate, PHPickerViewControllerDele
|
|
|
2673
2679
|
let endPosition = textView.text?.count ?? 0
|
|
2674
2680
|
textView.selectedRange = NSRange(location: endPosition, length: 0)
|
|
2675
2681
|
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
self?.updateContentSize()
|
|
2679
|
-
}
|
|
2682
|
+
textView.scrollRangeToVisible(NSRange(location: endPosition, length: 0))
|
|
2683
|
+
updateContentSize()
|
|
2680
2684
|
}
|
|
2681
2685
|
|
|
2682
2686
|
func getText() -> String {
|
package/lib/commonjs/index.js
CHANGED
|
@@ -17,39 +17,33 @@ var _types = require("./types");
|
|
|
17
17
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
18
18
|
const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
|
19
19
|
const nativeRef = _react.default.useRef(null);
|
|
20
|
-
const
|
|
21
|
-
const handleSizeChange = _react.default.useCallback(event => {
|
|
22
|
-
const newHeight = event.nativeEvent?.height;
|
|
23
|
-
if (newHeight && newHeight > 0) {
|
|
24
|
-
setHeight(newHeight);
|
|
25
|
-
}
|
|
26
|
-
}, []);
|
|
20
|
+
const handleSizeChange = _react.default.useCallback(_event => {}, []);
|
|
27
21
|
const dispatchAndroidCommand = _react.default.useCallback((commandName, args = []) => {
|
|
28
|
-
if (_reactNative.Platform.OS !==
|
|
22
|
+
if (_reactNative.Platform.OS !== 'android') return;
|
|
29
23
|
const nativeTag = (0, _reactNative.findNodeHandle)(nativeRef.current);
|
|
30
24
|
if (nativeTag == null) return;
|
|
31
|
-
const commandConfig = _reactNative.UIManager.getViewManagerConfig(
|
|
25
|
+
const commandConfig = _reactNative.UIManager.getViewManagerConfig('RichTextEditorView')?.Commands;
|
|
32
26
|
const commandId = commandConfig?.[commandName];
|
|
33
27
|
if (commandId == null) return;
|
|
34
28
|
_reactNative.UIManager.dispatchViewManagerCommand(nativeTag, commandId, args);
|
|
35
29
|
}, []);
|
|
36
30
|
const dispatchInsertMediaAttachment = _react.default.useCallback(mediaAttachment => {
|
|
37
|
-
if (!mediaAttachment || typeof mediaAttachment !==
|
|
31
|
+
if (!mediaAttachment || typeof mediaAttachment !== 'object' || typeof mediaAttachment.uri !== 'string' || mediaAttachment.uri.trim().length === 0) {
|
|
38
32
|
return;
|
|
39
33
|
}
|
|
40
34
|
const normalizedMediaAttachment = {
|
|
41
35
|
...mediaAttachment,
|
|
42
36
|
sourceUri: mediaAttachment.sourceUri ?? mediaAttachment.uri
|
|
43
37
|
};
|
|
44
|
-
if (_reactNative.Platform.OS ===
|
|
45
|
-
dispatchAndroidCommand(
|
|
38
|
+
if (_reactNative.Platform.OS === 'android') {
|
|
39
|
+
dispatchAndroidCommand('insertMediaAttachment', [JSON.stringify(normalizedMediaAttachment)]);
|
|
46
40
|
return;
|
|
47
41
|
}
|
|
48
|
-
if (_reactNative.Platform.OS ===
|
|
42
|
+
if (_reactNative.Platform.OS === 'ios') {
|
|
49
43
|
const nativeTag = (0, _reactNative.findNodeHandle)(nativeRef.current);
|
|
50
44
|
if (nativeTag == null) return;
|
|
51
|
-
const manager = _reactNative.NativeModules ? _reactNative.NativeModules[
|
|
52
|
-
if (manager && typeof manager ===
|
|
45
|
+
const manager = _reactNative.NativeModules ? _reactNative.NativeModules['RichTextEditorViewManager'] : null;
|
|
46
|
+
if (manager && typeof manager === 'object' && typeof manager.insertMediaAttachment === 'function') {
|
|
53
47
|
manager.insertMediaAttachment(nativeTag, JSON.stringify(normalizedMediaAttachment));
|
|
54
48
|
}
|
|
55
49
|
}
|
|
@@ -60,7 +54,7 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
|
|
60
54
|
setContent: _blocks => {
|
|
61
55
|
/* Native toolbar handles this */
|
|
62
56
|
},
|
|
63
|
-
getText: async () =>
|
|
57
|
+
getText: async () => '',
|
|
64
58
|
getBlocks: async () => [],
|
|
65
59
|
clear: () => {
|
|
66
60
|
/* Native toolbar handles this */
|
|
@@ -181,9 +175,7 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
|
|
181
175
|
const handleActiveStylesChange = _react.default.useCallback(event => {
|
|
182
176
|
props.onActiveStylesChange?.(event.nativeEvent);
|
|
183
177
|
}, [props.onActiveStylesChange]);
|
|
184
|
-
const combinedStyle =
|
|
185
|
-
height
|
|
186
|
-
}]);
|
|
178
|
+
const combinedStyle = props.style;
|
|
187
179
|
return /*#__PURE__*/_react.default.createElement(_RichTextEditorViewNativeComponent.default, {
|
|
188
180
|
ref: nativeRef,
|
|
189
181
|
style: combinedStyle,
|
|
@@ -195,7 +187,7 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
|
|
195
187
|
numberOfLines: props.numberOfLines,
|
|
196
188
|
showToolbar: props.readOnly ? false : props.showToolbar ?? true,
|
|
197
189
|
toolbarOptions: props.toolbarOptions,
|
|
198
|
-
variant: props.variant ??
|
|
190
|
+
variant: props.variant ?? 'outlined',
|
|
199
191
|
fontFamily: props.fontFamily,
|
|
200
192
|
fontSize: props.fontSize,
|
|
201
193
|
onContentChange: handleContentChange,
|
|
@@ -206,6 +198,6 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
|
|
206
198
|
onActiveStylesChange: handleActiveStylesChange
|
|
207
199
|
});
|
|
208
200
|
});
|
|
209
|
-
RichTextEditor.displayName =
|
|
201
|
+
RichTextEditor.displayName = 'RichTextEditor';
|
|
210
202
|
var _default = exports.default = RichTextEditor;
|
|
211
203
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_RichTextEditorViewNativeComponent","_types","e","__esModule","default","RichTextEditor","React","forwardRef","props","ref","nativeRef","useRef","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_RichTextEditorViewNativeComponent","_types","e","__esModule","default","RichTextEditor","React","forwardRef","props","ref","nativeRef","useRef","handleSizeChange","useCallback","_event","dispatchAndroidCommand","commandName","args","Platform","OS","nativeTag","findNodeHandle","current","commandConfig","UIManager","getViewManagerConfig","Commands","commandId","dispatchViewManagerCommand","dispatchInsertMediaAttachment","mediaAttachment","uri","trim","length","normalizedMediaAttachment","sourceUri","JSON","stringify","manager","NativeModules","insertMediaAttachment","useImperativeHandle","setContent","_blocks","getText","getBlocks","clear","focus","blur","toggleBold","toggleItalic","toggleUnderline","toggleStrikethrough","toggleCode","toggleHighlight","_color","setHeading","setBulletList","setNumberedList","setQuote","setChecklist","setParagraph","insertLink","_url","_text","undo","redo","clearFormatting","indent","outdent","setAlignment","_alignment","toggleChecklistItem","handleContentChange","event","blocks","nativeEvent","blocksJson","parse","contentEvent","text","delta","onContentChange","handleSelectionChange","selectionEvent","start","end","onSelectionChange","handleFocus","onFocus","handleBlur","onBlur","handleActiveStylesChange","onActiveStylesChange","combinedStyle","style","createElement","placeholder","initialContentJson","initialContent","undefined","editable","readOnly","selectable","maxHeight","numberOfLines","showToolbar","toolbarOptions","variant","fontFamily","fontSize","onEditorFocus","onEditorBlur","onSizeChange","displayName","_default","exports"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}
|
package/lib/module/index.js
CHANGED
|
@@ -1,41 +1,35 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { findNodeHandle, NativeModules, Platform,
|
|
3
|
-
import RichTextEditorViewNative from
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { findNodeHandle, NativeModules, Platform, UIManager } from 'react-native';
|
|
3
|
+
import RichTextEditorViewNative from './RichTextEditorViewNativeComponent';
|
|
4
4
|
const RichTextEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
5
5
|
const nativeRef = React.useRef(null);
|
|
6
|
-
const
|
|
7
|
-
const handleSizeChange = React.useCallback(event => {
|
|
8
|
-
const newHeight = event.nativeEvent?.height;
|
|
9
|
-
if (newHeight && newHeight > 0) {
|
|
10
|
-
setHeight(newHeight);
|
|
11
|
-
}
|
|
12
|
-
}, []);
|
|
6
|
+
const handleSizeChange = React.useCallback(_event => {}, []);
|
|
13
7
|
const dispatchAndroidCommand = React.useCallback((commandName, args = []) => {
|
|
14
|
-
if (Platform.OS !==
|
|
8
|
+
if (Platform.OS !== 'android') return;
|
|
15
9
|
const nativeTag = findNodeHandle(nativeRef.current);
|
|
16
10
|
if (nativeTag == null) return;
|
|
17
|
-
const commandConfig = UIManager.getViewManagerConfig(
|
|
11
|
+
const commandConfig = UIManager.getViewManagerConfig('RichTextEditorView')?.Commands;
|
|
18
12
|
const commandId = commandConfig?.[commandName];
|
|
19
13
|
if (commandId == null) return;
|
|
20
14
|
UIManager.dispatchViewManagerCommand(nativeTag, commandId, args);
|
|
21
15
|
}, []);
|
|
22
16
|
const dispatchInsertMediaAttachment = React.useCallback(mediaAttachment => {
|
|
23
|
-
if (!mediaAttachment || typeof mediaAttachment !==
|
|
17
|
+
if (!mediaAttachment || typeof mediaAttachment !== 'object' || typeof mediaAttachment.uri !== 'string' || mediaAttachment.uri.trim().length === 0) {
|
|
24
18
|
return;
|
|
25
19
|
}
|
|
26
20
|
const normalizedMediaAttachment = {
|
|
27
21
|
...mediaAttachment,
|
|
28
22
|
sourceUri: mediaAttachment.sourceUri ?? mediaAttachment.uri
|
|
29
23
|
};
|
|
30
|
-
if (Platform.OS ===
|
|
31
|
-
dispatchAndroidCommand(
|
|
24
|
+
if (Platform.OS === 'android') {
|
|
25
|
+
dispatchAndroidCommand('insertMediaAttachment', [JSON.stringify(normalizedMediaAttachment)]);
|
|
32
26
|
return;
|
|
33
27
|
}
|
|
34
|
-
if (Platform.OS ===
|
|
28
|
+
if (Platform.OS === 'ios') {
|
|
35
29
|
const nativeTag = findNodeHandle(nativeRef.current);
|
|
36
30
|
if (nativeTag == null) return;
|
|
37
|
-
const manager = NativeModules ? NativeModules[
|
|
38
|
-
if (manager && typeof manager ===
|
|
31
|
+
const manager = NativeModules ? NativeModules['RichTextEditorViewManager'] : null;
|
|
32
|
+
if (manager && typeof manager === 'object' && typeof manager.insertMediaAttachment === 'function') {
|
|
39
33
|
manager.insertMediaAttachment(nativeTag, JSON.stringify(normalizedMediaAttachment));
|
|
40
34
|
}
|
|
41
35
|
}
|
|
@@ -46,7 +40,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
46
40
|
setContent: _blocks => {
|
|
47
41
|
/* Native toolbar handles this */
|
|
48
42
|
},
|
|
49
|
-
getText: async () =>
|
|
43
|
+
getText: async () => '',
|
|
50
44
|
getBlocks: async () => [],
|
|
51
45
|
clear: () => {
|
|
52
46
|
/* Native toolbar handles this */
|
|
@@ -167,9 +161,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
167
161
|
const handleActiveStylesChange = React.useCallback(event => {
|
|
168
162
|
props.onActiveStylesChange?.(event.nativeEvent);
|
|
169
163
|
}, [props.onActiveStylesChange]);
|
|
170
|
-
const combinedStyle =
|
|
171
|
-
height
|
|
172
|
-
}]);
|
|
164
|
+
const combinedStyle = props.style;
|
|
173
165
|
return /*#__PURE__*/React.createElement(RichTextEditorViewNative, {
|
|
174
166
|
ref: nativeRef,
|
|
175
167
|
style: combinedStyle,
|
|
@@ -181,7 +173,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
181
173
|
numberOfLines: props.numberOfLines,
|
|
182
174
|
showToolbar: props.readOnly ? false : props.showToolbar ?? true,
|
|
183
175
|
toolbarOptions: props.toolbarOptions,
|
|
184
|
-
variant: props.variant ??
|
|
176
|
+
variant: props.variant ?? 'outlined',
|
|
185
177
|
fontFamily: props.fontFamily,
|
|
186
178
|
fontSize: props.fontSize,
|
|
187
179
|
onContentChange: handleContentChange,
|
|
@@ -192,7 +184,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
192
184
|
onActiveStylesChange: handleActiveStylesChange
|
|
193
185
|
});
|
|
194
186
|
});
|
|
195
|
-
RichTextEditor.displayName =
|
|
187
|
+
RichTextEditor.displayName = 'RichTextEditor';
|
|
196
188
|
export default RichTextEditor;
|
|
197
|
-
export { DEFAULT_TOOLBAR_OPTIONS } from
|
|
189
|
+
export { DEFAULT_TOOLBAR_OPTIONS } from './types';
|
|
198
190
|
//# sourceMappingURL=index.js.map
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","findNodeHandle","NativeModules","Platform","
|
|
1
|
+
{"version":3,"names":["React","findNodeHandle","NativeModules","Platform","UIManager","RichTextEditorViewNative","RichTextEditor","forwardRef","props","ref","nativeRef","useRef","handleSizeChange","useCallback","_event","dispatchAndroidCommand","commandName","args","OS","nativeTag","current","commandConfig","getViewManagerConfig","Commands","commandId","dispatchViewManagerCommand","dispatchInsertMediaAttachment","mediaAttachment","uri","trim","length","normalizedMediaAttachment","sourceUri","JSON","stringify","manager","insertMediaAttachment","useImperativeHandle","setContent","_blocks","getText","getBlocks","clear","focus","blur","toggleBold","toggleItalic","toggleUnderline","toggleStrikethrough","toggleCode","toggleHighlight","_color","setHeading","setBulletList","setNumberedList","setQuote","setChecklist","setParagraph","insertLink","_url","_text","undo","redo","clearFormatting","indent","outdent","setAlignment","_alignment","toggleChecklistItem","handleContentChange","event","blocks","nativeEvent","blocksJson","parse","contentEvent","text","delta","onContentChange","handleSelectionChange","selectionEvent","start","end","onSelectionChange","handleFocus","onFocus","handleBlur","onBlur","handleActiveStylesChange","onActiveStylesChange","combinedStyle","style","createElement","placeholder","initialContentJson","initialContent","undefined","editable","readOnly","selectable","maxHeight","numberOfLines","showToolbar","toolbarOptions","variant","fontFamily","fontSize","onEditorFocus","onEditorBlur","onSizeChange","displayName","DEFAULT_TOOLBAR_OPTIONS"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import type { RichTextEditorProps, RichTextEditorRef } from
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { RichTextEditorProps, RichTextEditorRef } from './types';
|
|
3
3
|
export interface ActiveStylesState {
|
|
4
4
|
bold: boolean;
|
|
5
5
|
italic: boolean;
|
|
@@ -15,6 +15,6 @@ export interface RichTextEditorPropsExtended extends RichTextEditorProps {
|
|
|
15
15
|
}
|
|
16
16
|
declare const RichTextEditor: React.ForwardRefExoticComponent<RichTextEditorPropsExtended & React.RefAttributes<RichTextEditorRef>>;
|
|
17
17
|
export default RichTextEditor;
|
|
18
|
-
export { DEFAULT_TOOLBAR_OPTIONS } from
|
|
19
|
-
export type { Block, BlockType, StyleRange, MediaKind, MediaAttachment, TextAlignment, EditorVariant, ContentChangeEvent, SelectionChangeEvent, RichTextEditorRef, RichTextEditorProps, ToolbarOption, ContentDelta, DeltaType, } from
|
|
18
|
+
export { DEFAULT_TOOLBAR_OPTIONS } from './types';
|
|
19
|
+
export type { Block, BlockType, StyleRange, MediaKind, MediaAttachment, TextAlignment, EditorVariant, ContentChangeEvent, SelectionChangeEvent, RichTextEditorRef, RichTextEditorProps, ToolbarOption, ContentDelta, DeltaType, } from './types';
|
|
20
20
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAMV,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,SAAS,CAAC;AASjB,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAMD,MAAM,WAAW,2BAA4B,SAAQ,mBAAmB;IACtE,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC5D;AAED,QAAA,MAAM,cAAc,uGA+OnB,CAAC;AAIF,eAAe,cAAc,CAAC;AAC9B,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAClD,YAAY,EACV,KAAK,EACL,SAAS,EACT,UAAU,EACV,SAAS,EACT,eAAe,EACf,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,SAAS,GACV,MAAM,SAAS,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chaitrabhairappa/react-native-rich-text-editor",
|
|
3
|
-
"version": "3.4.
|
|
3
|
+
"version": "3.4.3",
|
|
4
4
|
"description": "A high-performance native rich text editor for React Native (New Architecture / Fabric only)",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
package/src/index.tsx
CHANGED
|
@@ -1,11 +1,5 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import {
|
|
3
|
-
findNodeHandle,
|
|
4
|
-
NativeModules,
|
|
5
|
-
Platform,
|
|
6
|
-
StyleSheet,
|
|
7
|
-
UIManager,
|
|
8
|
-
} from "react-native";
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { findNodeHandle, NativeModules, Platform, UIManager } from 'react-native';
|
|
9
3
|
import type {
|
|
10
4
|
Block,
|
|
11
5
|
MediaAttachment,
|
|
@@ -14,8 +8,8 @@ import type {
|
|
|
14
8
|
SelectionChangeEvent,
|
|
15
9
|
RichTextEditorProps,
|
|
16
10
|
RichTextEditorRef,
|
|
17
|
-
} from
|
|
18
|
-
import RichTextEditorViewNative from
|
|
11
|
+
} from './types';
|
|
12
|
+
import RichTextEditorViewNative from './RichTextEditorViewNativeComponent';
|
|
19
13
|
|
|
20
14
|
interface SizeChangeEvent {
|
|
21
15
|
nativeEvent: {
|
|
@@ -42,268 +36,251 @@ export interface RichTextEditorPropsExtended extends RichTextEditorProps {
|
|
|
42
36
|
onActiveStylesChange?: (styles: ActiveStylesState) => void;
|
|
43
37
|
}
|
|
44
38
|
|
|
45
|
-
const RichTextEditor = React.forwardRef<
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
const nativeRef =
|
|
50
|
-
React.useRef<React.ElementRef<typeof RichTextEditorViewNative>>(null);
|
|
51
|
-
const [height, setHeight] = React.useState<number>(44);
|
|
52
|
-
|
|
53
|
-
const handleSizeChange = React.useCallback((event: SizeChangeEvent) => {
|
|
54
|
-
const newHeight = event.nativeEvent?.height;
|
|
55
|
-
if (newHeight && newHeight > 0) {
|
|
56
|
-
setHeight(newHeight);
|
|
57
|
-
}
|
|
58
|
-
}, []);
|
|
39
|
+
const RichTextEditor = React.forwardRef<RichTextEditorRef, RichTextEditorPropsExtended>(
|
|
40
|
+
(props, ref) => {
|
|
41
|
+
const nativeRef = React.useRef<React.ElementRef<typeof RichTextEditorViewNative>>(null);
|
|
42
|
+
const handleSizeChange = React.useCallback((_event: SizeChangeEvent) => {}, []);
|
|
59
43
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
44
|
+
const dispatchAndroidCommand = React.useCallback(
|
|
45
|
+
(commandName: string, args: (string | number | boolean)[] = []) => {
|
|
46
|
+
if (Platform.OS !== 'android') return;
|
|
63
47
|
|
|
64
|
-
|
|
65
|
-
|
|
48
|
+
const nativeTag = findNodeHandle(nativeRef.current);
|
|
49
|
+
if (nativeTag == null) return;
|
|
66
50
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
const commandId = commandConfig?.[commandName];
|
|
51
|
+
const commandConfig = UIManager.getViewManagerConfig('RichTextEditorView')?.Commands;
|
|
52
|
+
const commandId = commandConfig?.[commandName];
|
|
70
53
|
|
|
71
|
-
|
|
54
|
+
if (commandId == null) return;
|
|
72
55
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
56
|
+
UIManager.dispatchViewManagerCommand(nativeTag, commandId, args);
|
|
57
|
+
},
|
|
58
|
+
[],
|
|
59
|
+
);
|
|
77
60
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
61
|
+
const dispatchInsertMediaAttachment = React.useCallback(
|
|
62
|
+
(mediaAttachment: MediaAttachment) => {
|
|
63
|
+
if (
|
|
64
|
+
!mediaAttachment ||
|
|
65
|
+
typeof mediaAttachment !== 'object' ||
|
|
66
|
+
typeof mediaAttachment.uri !== 'string' ||
|
|
67
|
+
mediaAttachment.uri.trim().length === 0
|
|
68
|
+
) {
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
88
71
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
72
|
+
const normalizedMediaAttachment: MediaAttachment = {
|
|
73
|
+
...mediaAttachment,
|
|
74
|
+
sourceUri: mediaAttachment.sourceUri ?? mediaAttachment.uri,
|
|
75
|
+
};
|
|
93
76
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
77
|
+
if (Platform.OS === 'android') {
|
|
78
|
+
dispatchAndroidCommand('insertMediaAttachment', [
|
|
79
|
+
JSON.stringify(normalizedMediaAttachment),
|
|
80
|
+
]);
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
100
83
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
84
|
+
if (Platform.OS === 'ios') {
|
|
85
|
+
const nativeTag = findNodeHandle(nativeRef.current);
|
|
86
|
+
if (nativeTag == null) return;
|
|
104
87
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
]
|
|
109
|
-
: null;
|
|
88
|
+
const manager = NativeModules
|
|
89
|
+
? (NativeModules as Record<string, unknown>)['RichTextEditorViewManager']
|
|
90
|
+
: null;
|
|
110
91
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
JSON.stringify(normalizedMediaAttachment),
|
|
124
|
-
);
|
|
92
|
+
if (
|
|
93
|
+
manager &&
|
|
94
|
+
typeof manager === 'object' &&
|
|
95
|
+
typeof (manager as { insertMediaAttachment?: unknown }).insertMediaAttachment ===
|
|
96
|
+
'function'
|
|
97
|
+
) {
|
|
98
|
+
(
|
|
99
|
+
manager as {
|
|
100
|
+
insertMediaAttachment: (tag: number, value: string) => void;
|
|
101
|
+
}
|
|
102
|
+
).insertMediaAttachment(nativeTag, JSON.stringify(normalizedMediaAttachment));
|
|
103
|
+
}
|
|
125
104
|
}
|
|
126
|
-
}
|
|
127
|
-
},
|
|
128
|
-
[dispatchAndroidCommand],
|
|
129
|
-
);
|
|
130
|
-
|
|
131
|
-
// These are placeholder methods for potential future UIManager.dispatchViewManagerCommand usage
|
|
132
|
-
React.useImperativeHandle(
|
|
133
|
-
ref,
|
|
134
|
-
() => ({
|
|
135
|
-
setContent: (_blocks: Block[]) => {
|
|
136
|
-
/* Native toolbar handles this */
|
|
137
|
-
},
|
|
138
|
-
getText: async (): Promise<string> => "",
|
|
139
|
-
getBlocks: async (): Promise<Block[]> => [],
|
|
140
|
-
clear: () => {
|
|
141
|
-
/* Native toolbar handles this */
|
|
142
|
-
},
|
|
143
|
-
focus: () => {
|
|
144
|
-
/* Native toolbar handles this */
|
|
145
|
-
},
|
|
146
|
-
blur: () => {
|
|
147
|
-
/* Native toolbar handles this */
|
|
148
|
-
},
|
|
149
|
-
toggleBold: () => {
|
|
150
|
-
/* Native toolbar handles this */
|
|
151
|
-
},
|
|
152
|
-
toggleItalic: () => {
|
|
153
|
-
/* Native toolbar handles this */
|
|
154
|
-
},
|
|
155
|
-
toggleUnderline: () => {
|
|
156
|
-
/* Native toolbar handles this */
|
|
157
|
-
},
|
|
158
|
-
toggleStrikethrough: () => {
|
|
159
|
-
/* Native toolbar handles this */
|
|
160
|
-
},
|
|
161
|
-
toggleCode: () => {
|
|
162
|
-
/* Native toolbar handles this */
|
|
163
|
-
},
|
|
164
|
-
toggleHighlight: (_color?: string) => {
|
|
165
|
-
/* Native toolbar handles this */
|
|
166
|
-
},
|
|
167
|
-
setHeading: () => {
|
|
168
|
-
/* Native toolbar handles this */
|
|
169
|
-
},
|
|
170
|
-
setBulletList: () => {
|
|
171
|
-
/* Native toolbar handles this */
|
|
172
|
-
},
|
|
173
|
-
setNumberedList: () => {
|
|
174
|
-
/* Native toolbar handles this */
|
|
175
|
-
},
|
|
176
|
-
setQuote: () => {
|
|
177
|
-
/* Native toolbar handles this */
|
|
178
|
-
},
|
|
179
|
-
setChecklist: () => {
|
|
180
|
-
/* Native toolbar handles this */
|
|
181
|
-
},
|
|
182
|
-
setParagraph: () => {
|
|
183
|
-
/* Native toolbar handles this */
|
|
184
|
-
},
|
|
185
|
-
insertLink: (_url: string, _text: string) => {
|
|
186
|
-
/* Native toolbar handles this */
|
|
187
|
-
},
|
|
188
|
-
insertMediaAttachment: (mediaAttachment: MediaAttachment) => {
|
|
189
|
-
dispatchInsertMediaAttachment(mediaAttachment);
|
|
190
|
-
},
|
|
191
|
-
undo: () => {
|
|
192
|
-
/* Native toolbar handles this */
|
|
193
|
-
},
|
|
194
|
-
redo: () => {
|
|
195
|
-
/* Native toolbar handles this */
|
|
196
|
-
},
|
|
197
|
-
clearFormatting: () => {
|
|
198
|
-
/* Native toolbar handles this */
|
|
199
105
|
},
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
},
|
|
203
|
-
outdent: () => {
|
|
204
|
-
/* Native toolbar handles this */
|
|
205
|
-
},
|
|
206
|
-
setAlignment: (_alignment: TextAlignment) => {
|
|
207
|
-
/* Native toolbar handles this */
|
|
208
|
-
},
|
|
209
|
-
toggleChecklistItem: () => {
|
|
210
|
-
/* Native toolbar handles this */
|
|
211
|
-
},
|
|
212
|
-
}),
|
|
213
|
-
[dispatchInsertMediaAttachment],
|
|
214
|
-
);
|
|
106
|
+
[dispatchAndroidCommand],
|
|
107
|
+
);
|
|
215
108
|
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
109
|
+
// These are placeholder methods for potential future UIManager.dispatchViewManagerCommand usage
|
|
110
|
+
React.useImperativeHandle(
|
|
111
|
+
ref,
|
|
112
|
+
() => ({
|
|
113
|
+
setContent: (_blocks: Block[]) => {
|
|
114
|
+
/* Native toolbar handles this */
|
|
115
|
+
},
|
|
116
|
+
getText: async (): Promise<string> => '',
|
|
117
|
+
getBlocks: async (): Promise<Block[]> => [],
|
|
118
|
+
clear: () => {
|
|
119
|
+
/* Native toolbar handles this */
|
|
120
|
+
},
|
|
121
|
+
focus: () => {
|
|
122
|
+
/* Native toolbar handles this */
|
|
123
|
+
},
|
|
124
|
+
blur: () => {
|
|
125
|
+
/* Native toolbar handles this */
|
|
126
|
+
},
|
|
127
|
+
toggleBold: () => {
|
|
128
|
+
/* Native toolbar handles this */
|
|
129
|
+
},
|
|
130
|
+
toggleItalic: () => {
|
|
131
|
+
/* Native toolbar handles this */
|
|
132
|
+
},
|
|
133
|
+
toggleUnderline: () => {
|
|
134
|
+
/* Native toolbar handles this */
|
|
135
|
+
},
|
|
136
|
+
toggleStrikethrough: () => {
|
|
137
|
+
/* Native toolbar handles this */
|
|
138
|
+
},
|
|
139
|
+
toggleCode: () => {
|
|
140
|
+
/* Native toolbar handles this */
|
|
141
|
+
},
|
|
142
|
+
toggleHighlight: (_color?: string) => {
|
|
143
|
+
/* Native toolbar handles this */
|
|
144
|
+
},
|
|
145
|
+
setHeading: () => {
|
|
146
|
+
/* Native toolbar handles this */
|
|
147
|
+
},
|
|
148
|
+
setBulletList: () => {
|
|
149
|
+
/* Native toolbar handles this */
|
|
150
|
+
},
|
|
151
|
+
setNumberedList: () => {
|
|
152
|
+
/* Native toolbar handles this */
|
|
153
|
+
},
|
|
154
|
+
setQuote: () => {
|
|
155
|
+
/* Native toolbar handles this */
|
|
156
|
+
},
|
|
157
|
+
setChecklist: () => {
|
|
158
|
+
/* Native toolbar handles this */
|
|
159
|
+
},
|
|
160
|
+
setParagraph: () => {
|
|
161
|
+
/* Native toolbar handles this */
|
|
162
|
+
},
|
|
163
|
+
insertLink: (_url: string, _text: string) => {
|
|
164
|
+
/* Native toolbar handles this */
|
|
165
|
+
},
|
|
166
|
+
insertMediaAttachment: (mediaAttachment: MediaAttachment) => {
|
|
167
|
+
dispatchInsertMediaAttachment(mediaAttachment);
|
|
168
|
+
},
|
|
169
|
+
undo: () => {
|
|
170
|
+
/* Native toolbar handles this */
|
|
171
|
+
},
|
|
172
|
+
redo: () => {
|
|
173
|
+
/* Native toolbar handles this */
|
|
174
|
+
},
|
|
175
|
+
clearFormatting: () => {
|
|
176
|
+
/* Native toolbar handles this */
|
|
177
|
+
},
|
|
178
|
+
indent: () => {
|
|
179
|
+
/* Native toolbar handles this */
|
|
180
|
+
},
|
|
181
|
+
outdent: () => {
|
|
182
|
+
/* Native toolbar handles this */
|
|
183
|
+
},
|
|
184
|
+
setAlignment: (_alignment: TextAlignment) => {
|
|
185
|
+
/* Native toolbar handles this */
|
|
186
|
+
},
|
|
187
|
+
toggleChecklistItem: () => {
|
|
188
|
+
/* Native toolbar handles this */
|
|
189
|
+
},
|
|
190
|
+
}),
|
|
191
|
+
[dispatchInsertMediaAttachment],
|
|
192
|
+
);
|
|
193
|
+
|
|
194
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
195
|
+
const handleContentChange = React.useCallback(
|
|
196
|
+
(event: any) => {
|
|
197
|
+
// Parse blocksJson string (codegen doesn't support nested ReadonlyArray<Object>)
|
|
198
|
+
let blocks: Block[] = [];
|
|
199
|
+
try {
|
|
200
|
+
if (event.nativeEvent.blocksJson) {
|
|
201
|
+
blocks = JSON.parse(event.nativeEvent.blocksJson);
|
|
202
|
+
} else if (event.nativeEvent.blocks) {
|
|
203
|
+
// Fallback for backward compatibility
|
|
204
|
+
blocks = [...event.nativeEvent.blocks];
|
|
205
|
+
}
|
|
206
|
+
} catch {
|
|
207
|
+
blocks = [];
|
|
227
208
|
}
|
|
228
|
-
} catch {
|
|
229
|
-
blocks = [];
|
|
230
|
-
}
|
|
231
209
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
210
|
+
// Convert native event to our API format
|
|
211
|
+
const contentEvent: ContentChangeEvent = {
|
|
212
|
+
nativeEvent: {
|
|
213
|
+
text: event.nativeEvent.text,
|
|
214
|
+
blocks,
|
|
215
|
+
delta: event.nativeEvent.delta,
|
|
216
|
+
},
|
|
217
|
+
};
|
|
218
|
+
props.onContentChange?.(contentEvent);
|
|
219
|
+
},
|
|
220
|
+
[props.onContentChange],
|
|
221
|
+
);
|
|
244
222
|
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
223
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
224
|
+
const handleSelectionChange = React.useCallback(
|
|
225
|
+
(event: any) => {
|
|
226
|
+
const selectionEvent: SelectionChangeEvent = {
|
|
227
|
+
nativeEvent: {
|
|
228
|
+
start: event.nativeEvent.start,
|
|
229
|
+
end: event.nativeEvent.end,
|
|
230
|
+
},
|
|
231
|
+
};
|
|
232
|
+
props.onSelectionChange?.(selectionEvent);
|
|
233
|
+
},
|
|
234
|
+
[props.onSelectionChange],
|
|
235
|
+
);
|
|
258
236
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
237
|
+
const handleFocus = React.useCallback(() => {
|
|
238
|
+
props.onFocus?.();
|
|
239
|
+
}, [props.onFocus]);
|
|
262
240
|
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
241
|
+
const handleBlur = React.useCallback(() => {
|
|
242
|
+
props.onBlur?.();
|
|
243
|
+
}, [props.onBlur]);
|
|
266
244
|
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
245
|
+
const handleActiveStylesChange = React.useCallback(
|
|
246
|
+
(event: ActiveStylesChangeEvent) => {
|
|
247
|
+
props.onActiveStylesChange?.(event.nativeEvent);
|
|
248
|
+
},
|
|
249
|
+
[props.onActiveStylesChange],
|
|
250
|
+
);
|
|
273
251
|
|
|
274
|
-
|
|
252
|
+
const combinedStyle = props.style;
|
|
275
253
|
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
props.
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
});
|
|
254
|
+
return (
|
|
255
|
+
<RichTextEditorViewNative
|
|
256
|
+
ref={nativeRef}
|
|
257
|
+
style={combinedStyle}
|
|
258
|
+
placeholder={props.placeholder}
|
|
259
|
+
initialContentJson={props.initialContent ? JSON.stringify(props.initialContent) : undefined}
|
|
260
|
+
editable={props.readOnly !== undefined ? !props.readOnly : true}
|
|
261
|
+
selectable={props.selectable ?? true}
|
|
262
|
+
maxHeight={props.maxHeight}
|
|
263
|
+
numberOfLines={props.numberOfLines}
|
|
264
|
+
showToolbar={props.readOnly ? false : (props.showToolbar ?? true)}
|
|
265
|
+
toolbarOptions={props.toolbarOptions}
|
|
266
|
+
variant={props.variant ?? 'outlined'}
|
|
267
|
+
fontFamily={props.fontFamily}
|
|
268
|
+
fontSize={props.fontSize}
|
|
269
|
+
onContentChange={handleContentChange}
|
|
270
|
+
onSelectionChange={handleSelectionChange}
|
|
271
|
+
onEditorFocus={handleFocus}
|
|
272
|
+
onEditorBlur={handleBlur}
|
|
273
|
+
onSizeChange={handleSizeChange}
|
|
274
|
+
onActiveStylesChange={handleActiveStylesChange}
|
|
275
|
+
/>
|
|
276
|
+
);
|
|
277
|
+
},
|
|
278
|
+
);
|
|
302
279
|
|
|
303
|
-
RichTextEditor.displayName =
|
|
280
|
+
RichTextEditor.displayName = 'RichTextEditor';
|
|
304
281
|
|
|
305
282
|
export default RichTextEditor;
|
|
306
|
-
export { DEFAULT_TOOLBAR_OPTIONS } from
|
|
283
|
+
export { DEFAULT_TOOLBAR_OPTIONS } from './types';
|
|
307
284
|
export type {
|
|
308
285
|
Block,
|
|
309
286
|
BlockType,
|
|
@@ -319,4 +296,4 @@ export type {
|
|
|
319
296
|
ToolbarOption,
|
|
320
297
|
ContentDelta,
|
|
321
298
|
DeltaType,
|
|
322
|
-
} from
|
|
299
|
+
} from './types';
|