Fixed #1144 and android crash issues

src/components/markdownEditor/view/formats/applyListFormat.js

@@ -1,6 +1,6 @@
 import { replaceBetween } from './utils';
 
-export default async ({ text, selection, setText, setNewSelection, item }) => {
+export default async ({ text, selection, setText, setNewSelection, setSelection, item }) => {
   let newText;
   let newSelection;
 
@@ -34,4 +34,5 @@ export default async ({ text, selection, setText, setNewSelection, item }) => {
 
   await setText(newText);
   await setNewSelection(newSelection);
+  await setSelection(newSelection);
 };

src/components/markdownEditor/view/formats/applyWebLinkFormat.js

@@ -3,7 +3,15 @@ import { isStringWebLink, replaceBetween } from './utils';
 export const writeUrlTextHere = 'https://example.com';
 export const writeTextHereString = 'Text here';
 
-export default async ({ text, selection, setText, setNewSelection, item, isImage = null }) => {
+export default async ({
+  text,
+  selection,
+  setText,
+  setSelection,
+  setNewSelection,
+  item,
+  isImage = null,
+}) => {
   const imagePrefix = isImage ? '!' : '';
   const itemText = item ? item.text : writeTextHereString;
   const itemUrl = item ? item.url : writeUrlTextHere;
@@ -42,4 +50,5 @@ export default async ({ text, selection, setText, setNewSelection, item, isImage
 
   await setText(newText);
   await setNewSelection(newSelection);
+  await setSelection(newSelection);
 };

src/components/markdownEditor/view/formats/applyWrapFormat.js

@@ -1,6 +1,6 @@
 import { replaceBetween } from './utils';
 
-export default async ({ text, selection, setText, setNewSelection, item }) => {
+export default async ({ text, selection, setText, setNewSelection, setSelection, item }) => {
   const newText = replaceBetween(
     text,
     selection,
@@ -16,4 +16,5 @@ export default async ({ text, selection, setText, setNewSelection, item }) => {
 
   await setText(newText);
   await setNewSelection({ start: newPosition, end: newPosition });
+  await setSelection({ start: newPosition, end: newPosition });
 };

src/components/markdownEditor/view/formats/applyWrapFormatNewLines.js

@@ -1,6 +1,6 @@
 import { replaceBetween } from './utils';
 
-export default async ({ text, selection, setText, setNewSelection, item }) => {
+export default async ({ text, selection, setText, setSelection, setNewSelection, item }) => {
   let newText = replaceBetween(
     text,
     selection,
@@ -42,4 +42,5 @@ export default async ({ text, selection, setText, setNewSelection, item }) => {
   }
   await setText(newText);
   await setNewSelection({ start: newPosition, end: newPosition });
+  await setSelection({ start: newPosition, end: newPosition });
 };

src/components/markdownEditor/view/markdownEditorView.js

@@ -32,7 +32,9 @@ const MarkdownEditorView = ({
   uploadedImage,
 }) => {
   const [text, setText] = useState(draftBody || '');
+  const [textChanged, setTextChanged] = useState(false);
   const [selection, setSelection] = useState({ start: 0, end: 0 });
+  const [selectionArray, setSelectionArray] = useState(false); // Workaround for android selection
 
   const [newSelection, setNewSelection] = useState(null);
 
@@ -75,6 +77,11 @@ const MarkdownEditorView = ({
 
   const _changeText = input => {
     setText(input);
+    setTextChanged(true);
+    setSelectionArray([]);
+    setTimeout(() => {
+      setTextChanged(false);
+    }, 100);
 
     if (onChange) {
       onChange(input);
@@ -89,13 +96,34 @@ const MarkdownEditorView = ({
     }
   };
 
-  const _handleOnSelectionChange = event => {
+  const _handleOnSelectionChange = async event => {
-    if (newSelection) {
+    if (textChanged) {
-      setSelection(newSelection);
+      if (selectionArray.length > 0) {
-      setNewSelection(null);
         return;
       }
-    setSelection(event.nativeEvent.selection);
+      selectionArray.push(event.nativeEvent.selection);
+      setSelectionArray(selectionArray);
+    }
+    if (newSelection) {
+      setTimeout(() => {
+        setNewSelection(null);
+      }, 100);
+      return;
+    }
+    if (
+      selection.start === event.nativeEvent.selection.start &&
+      selection.end === event.nativeEvent.selection.end
+    ) {
+      return;
+    }
+    await setSelection(event.nativeEvent.selection);
+  };
+
+  const _getSelection = () => {
+    if (selection.start > text.length || selection.end > text.length) {
+      return { start: text.length, end: text.length };
+    }
+    return selection;
   };
 
   const _renderPreview = () => (
@@ -112,7 +140,9 @@ const MarkdownEditorView = ({
         iconStyle={styles.icon}
         iconType={item.iconType}
         name={item.icon}
-        onPress={() => item.onPress({ text, selection, setText, setNewSelection, item })}
+        onPress={() =>
+          item.onPress({ text, selection, setText, setNewSelection, setSelection, item })
+        }
       />
     </View>
   );
@@ -134,7 +164,9 @@ const MarkdownEditorView = ({
           iconStyle={styles.icon}
           iconType="FontAwesome"
           name="link"
-          onPress={() => Formats[9].onPress({ text, selection, setText, setNewSelection })}
+          onPress={() =>
+            Formats[9].onPress({ text, selection, setText, setNewSelection, setSelection })
+          }
         />
         <IconButton
           onPress={() => galleryRef.current.show()}
@@ -180,7 +212,7 @@ const MarkdownEditorView = ({
             id: isReply ? 'editor.reply_placeholder' : 'editor.default_placeholder',
           })}
           placeholderTextColor="#c1c5c7"
-          selection={selection}
+          selection={_getSelection()}
           selectionColor="#357ce6"
           style={styles.textWrapper}
           underlineColorAndroid="transparent"
@@ -231,68 +263,3 @@ const MarkdownEditorView = ({
 };
 
 export default MarkdownEditorView;
-// class MarkdownEditorView extends Component {
-//   constructor(props) {
-//     super(props);
-//     this.state = {
-//       text: props.draftBody || '',
-//       selection: { start: 0, end: 0 },
-//       textUpdated: false,
-//       newSelection: null,
-//     };
-
-//     this.inputRef = React.createRef();
-//     this.galleryRef = React.createRef();
-//     this.clearRef = React.createRef();
-//   }
-
-//   // Lifecycle functions
-//   UNSAFE_componentWillReceiveProps(nextProps) {
-//     const { draftBody, uploadedImage, isPreviewActive } = this.props;
-//     if (!nextProps.isPreviewActive && isPreviewActive) {
-//       this.setState({
-//         selection: { start: 0, end: 0 },
-//       });
-//     }
-//     if (nextProps.draftBody && draftBody !== nextProps.draftBody) {
-//       this.setState({
-//         text: nextProps.draftBody,
-//       });
-//     }
-
-//     if (
-//       nextProps.uploadedImage &&
-//       nextProps.uploadedImage.url &&
-//       nextProps.uploadedImage !== uploadedImage
-//     ) {
-//       applyImageLink({
-//         getState: this._getState,
-//         setState: async (state, callback) => {
-//           await this.setState(state, callback);
-//         },
-//         item: { url: nextProps.uploadedImage.url, text: nextProps.uploadedImage.hash },
-//         isImage: !!nextProps.uploadedImage,
-//       });
-//     }
-//   }
-
-//   componentDidUpdate(prevProps, prevState) {
-//     const { text } = this.state;
-//     const { handleIsFormValid } = this.props;
-
-//     if (prevState.text !== text) {
-//       const nextText = text.replace(prevState.text, '');
-
-//       if (nextText && nextText.length > 0) {
-//         this._changeText(text);
-
-//         if (handleIsFormValid) {
-//           handleIsFormValid(text);
-//         }
-//       }
-//     }
-//   }
-
-//   // Component functions
-
-// }