Fixed #820, fixed #1144

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { replaceBetween } from './utils';
 
-export default async ({ text, selection, setText, setNewSelection, setSelection, item }) => {
+export default async ({ text, selection, setTextAndSelection, item }) => {
   const newText = replaceBetween(
     text,
     selection,
@@ -13,8 +13,6 @@ export default async ({ text, selection, setText, setNewSelection, setSelection,
   } else {
     newPosition = selection.end + item.wrapper.length * 2;
   }
-
-  await setText(newText);
-  await setNewSelection({ start: newPosition, end: newPosition });
-  await setSelection({ start: newPosition, end: newPosition });
+  const newSelection = { start: newPosition, end: newPosition };
+  setTextAndSelection({ text: newText, selection: newSelection });
 };

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

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

src/components/markdownEditor/view/markdownEditorView.js

@@ -34,27 +34,43 @@ 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);
+  const [editable, setEditable] = useState(null);
 
   const inputRef = useRef(null);
   const galleryRef = useRef(null);
   const clearRef = useRef(null);
 
   useEffect(() => {
-    setSelection({ start: 0, end: 0 });
+    if (!isPreviewActive) {
+      _setTextAndSelection({ selection: { start: 0, end: 0 }, text });
+    }
   }, [isPreviewActive]);
 
+  useEffect(() => {
+    if (text === '' && draftBody !== '') {
+      _setTextAndSelection({ selection: { start: 0, end: 0 }, text: draftBody });
+    }
+  }, [draftBody]);
+
+  useEffect(() => {
+    if (editable === null) {
+      // workaround for android context menu issue
+      setEditable(false);
+      setTimeout(() => {
+        setEditable(!isLoading);
+      }, 100);
+    } else {
+      setEditable(!isLoading);
+    }
+  }, [isLoading]);
+
   useEffect(() => {
     if (uploadedImage && uploadedImage.url) {
       applyImageLink({
         text,
         selection,
-        setText,
-        setNewSelection,
+        setTextAndSelection: _setTextAndSelection,
         item: { url: uploadedImage.url, text: uploadedImage.hash },
         isImage: !!uploadedImage,
       });
@@ -79,11 +95,6 @@ const MarkdownEditorView = ({
 
   const _changeText = input => {
     setText(input);
-    setTextChanged(true);
-    setSelectionArray([]);
-    setTimeout(() => {
-      setTextChanged(false);
-    }, 100);
 
     if (onChange) {
       onChange(input);
@@ -99,33 +110,21 @@ const MarkdownEditorView = ({
   };
 
   const _handleOnSelectionChange = async event => {
-    if (textChanged) {
-      if (selectionArray.length > 0) {
-        return;
-      }
-      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);
+    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 _setTextAndSelection = ({ selection: _selection, text: _text }) => {
+    inputRef.current.setNativeProps({
+      text: _text,
+    });
+    // Workaround for iOS selection update issue
+    setTimeout(() => {
+      inputRef.current.setNativeProps({
+        selection: _selection,
+      });
+      setSelection(_selection);
+    }, 200);
+    _changeText(_text);
   };
 
   const _renderPreview = () => (
@@ -143,7 +142,7 @@ const MarkdownEditorView = ({
         iconType={item.iconType}
         name={item.icon}
         onPress={() =>
-          item.onPress({ text, selection, setText, setNewSelection, setSelection, item })
+          item.onPress({ text, selection, setTextAndSelection: _setTextAndSelection, item })
         }
       />
     </View>
@@ -167,7 +166,7 @@ const MarkdownEditorView = ({
           iconType="FontAwesome"
           name="link"
           onPress={() =>
-            Formats[9].onPress({ text, selection, setText, setNewSelection, setSelection })
+            Formats[9].onPress({ text, selection, setTextAndSelection: _setTextAndSelection })
           }
         />
         <IconButton
@@ -196,6 +195,7 @@ const MarkdownEditorView = ({
     if (index === 0) {
       initialFields();
       setText('');
+      _setTextAndSelection({ text: '', selection: { start: 0, end: 0 } });
     }
   };
 
@@ -216,13 +216,12 @@ const MarkdownEditorView = ({
                 id: isReply ? 'editor.reply_placeholder' : 'editor.default_placeholder',
               })}
               placeholderTextColor={isDarkTheme ? '#526d91' : '#c1c5c7'}
-              selection={_getSelection()}
               selectionColor="#357ce6"
               style={styles.textWrapper}
               underlineColorAndroid="transparent"
-              value={text}
               innerRef={inputRef}
-              editable={!isLoading}
+              editable={editable}
+              contextMenuHidden={false}
             />
           )}
         </ThemeContainer>