MM-9599 Paste image from clipboard (#3084)

* Show image paste menu * Get pasted image * Add more info for file * Add custom text input and add extension * Dismiss contextual menu after paste image * Group image info together * Add max file check * Fix max file size text * Add PropTypes * Add support for gif and tiff * add onchange null check * Use onPaste event * Move get image info logic * Clean up listener when no observer * Add android upload * Copy file from google docs * Clean up file after upload * Prevent text pasted in textbox if it's content uri * Rename paste file thread * Move on paste listener logic * Remove the redundant data in ios * Get realpath of item * Clean up * Only download for image * Rename to custom text input * Update RNPasteableEditTextOnPasteListener.java * Handle for download image failed * Fix eslint * Fix test * Allow multiple images to be pasted * Remove additional null check * Add managed control for Android * Disable only copy, cut and paste * Accept image in Android edit text * Add comment for custom text input * Do not upload when more than max file * Stop uplaod when exceed file size * Fix crash when clip data is null * Return error to JS * Move download file logic * Remove console * Add some tests * Add test for handleUploadImages * Add test for file_upload_item * Use ImageCacheManager to cache remote images * Fix crashes from one note * Remove commented code * Update test
2019-09-17 07:10:14 +08:00
parent da9be433e3
commit 0d1fd78263
28 changed files with 1121 additions and 15 deletions
--- a/app/components/pasteable_text_input/custom_text_input.js
+++ b/app/components/pasteable_text_input/custom_text_input.js
@@ -0,0 +1,86 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+/* eslint-disable no-underscore-dangle */
+
+import React from 'react';
+import {TextInput, Text, TouchableWithoutFeedback} from 'react-native';
+import UIManager from 'UIManager';
+import invariant from 'invariant';
+import requireNativeComponent from 'requireNativeComponent';
+
+const AndroidTextInput = requireNativeComponent('PasteableTextInputAndroid');
+
+// This class is copied from React Native's TextInput
+// All credit goes to React Native team
+// Source: https://github.com/facebook/react-native/blob/master/Libraries/Components/TextInput/TextInput.js#L1056
+class CustomTextInput extends TextInput {
+    // Override React Native's TextInput render for Android
+    _renderAndroid = () => {
+        const props = Object.assign({}, this.props);
+        props.style = [this.props.style];
+        props.autoCapitalize = UIManager.getViewManagerConfig(
+            'AndroidTextInput',
+        ).Constants.AutoCapitalizationType[props.autoCapitalize || 'sentences'];
+        let children = this.props.children;
+        let childCount = 0;
+        React.Children.forEach(children, () => ++childCount);
+        invariant(
+            !(this.props.value && childCount),
+            'Cannot specify both value and children.',
+        );
+        if (childCount > 1) {
+            children = <Text>{children}</Text>;
+        }
+
+        if (props.selection && props.selection.end == null) {
+            props.selection = {
+                start: props.selection.start,
+                end: props.selection.start,
+            };
+        }
+
+        const textContainer = (
+            <AndroidTextInput
+                ref={this._setNativeRef}
+                {...props}
+                mostRecentEventCount={0}
+                onFocus={this._onFocus}
+                onBlur={this._onBlur}
+                onChange={this._onChange}
+                onSelectionChange={this._onSelectionChange}
+                onTextInput={this._onTextInput}
+                text={this._getText()}
+                // eslint-disable-next-line react/no-children-prop
+                children={children}
+                disableFullscreenUI={this.props.disableFullscreenUI}
+                textBreakStrategy={this.props.textBreakStrategy}
+                onScroll={this._onScroll}
+                onPaste={this._onPaste}
+            />
+        );
+
+        return (
+            <TouchableWithoutFeedback
+                onLayout={props.onLayout}
+                onPress={this._onPress}
+                accessible={this.props.accessible}
+                accessibilityLabel={this.props.accessibilityLabel}
+                accessibilityRole={this.props.accessibilityRole}
+                accessibilityStates={this.props.accessibilityStates}
+                nativeID={this.props.nativeID}
+                testID={this.props.testID}
+            >
+                {textContainer}
+            </TouchableWithoutFeedback>
+        );
+    };
+
+    _onPaste = (event) => {
+        const {nativeEvent} = event;
+        const {onPaste} = this.props;
+        return onPaste?.(nativeEvent.error, nativeEvent.data);
+    }
+}
+
+export default CustomTextInput;