added basic insert url modal

ios/Podfile.lock

@@ -699,7 +699,7 @@ SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   BugsnagReactNative: a96bc039e0e4ec317a8b331714393d836ca60557
   BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
-  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
+  DoubleConversion: cde416483dac037923206447da6e1454df403714
   FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
   FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
   Firebase: c23a36d9e4cdf7877dfcba8dd0c58add66358999
@@ -711,7 +711,7 @@ SPEC CHECKSUMS:
   FirebaseInstanceID: bd3ffc24367f901a43c063b36c640b345a4a5dd1
   FirebaseMessaging: 5eca4ef173de76253352511aafef774caa1cba2a
   Folly: b73c3869541e86821df3c387eb0af5f65addfab4
-  glog: 85ecdd10ee8d8ec362ef519a6a45ff9aa27b2e85
+  glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
   GoogleAppMeasurement: a6a3a066369828db64eda428cb2856dc1cdc7c4e
   GoogleDataTransport: f56af7caa4ed338dc8e138a5d7c5973e66440833
   GoogleUtilities: 7f2f5a07f888cdb145101d6042bc4422f57e70b3

package.json

@@ -101,7 +101,7 @@
     "react-native-linear-gradient": "^2.4.2",
     "react-native-matomo-sdk": "feruzm/react-native-matomo-sdk",
     "react-native-media-controls": "^2.3.0",
-    "react-native-modal": "^11.5.6",
+    "react-native-modal": "11.5.6",
     "react-native-modal-dropdown": "^1.0.2",
     "react-native-modal-popover": "^2.1.0",
     "react-native-modal-translucent": "^5.0.0",

src/components/index.js

@@ -69,7 +69,7 @@ import { HorizontalIconList } from './horizontalIconList/horizontalIconListView'
 import { PopoverWrapper } from './popoverWrapper/popoverWrapperView';
 import CommunitiesList from './communitiesList';
 import SubscribedCommunitiesList from './subscribedCommunitiesList';
-
+import { InsertLinkModal } from './insertLinkModal/insertLinkModal';
 // View
 import { Comment } from './comment';
 import { Comments } from './comments';
@@ -238,4 +238,5 @@ export {
   QuickReplyModal,
   Tooltip,
   VideoPlayer,
+  InsertLinkModal,
 };

src/components/insertLinkModal/insertLinkModal.tsx

@@ -0,0 +1,103 @@
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { Text, View } from 'react-native';
+import { MainButton, TextButton } from '..';
+import styles from './insertLinkModalStyles';
+import ActionSheet from 'react-native-actions-sheet';
+import EStyleSheet from 'react-native-extended-stylesheet';
+import TextInput from '../textInput';
+
+interface InsertLinkModalProps {
+  handleOnInsertLink: ({ label, url }: { label: string; url: string }) => void;
+  handleOnSheetClose: () => void;
+}
+
+export const InsertLinkModal = forwardRef(
+  ({ handleOnInsertLink, handleOnSheetClose }: InsertLinkModalProps, ref) => {
+    const intl = useIntl();
+
+    const [isLoading, setIsLoading] = useState(false);
+    const [label, setLabel] = useState('');
+    const [url, setUrl] = useState('');
+    const sheetModalRef = useRef<ActionSheet>();
+    const labelInputRef = useRef(null);
+
+    useImperativeHandle(ref, () => ({
+      showModal: () => {
+        sheetModalRef.current?.setModalVisible(true);
+      },
+      hideModal: () => {
+        sheetModalRef.current?.setModalVisible(false);
+      },
+    }));
+
+    //renders footer with add snipept button and shows new snippet modal
+    const _renderFloatingPanel = () => {
+      return (
+        <View style={styles.floatingContainer}>
+          <TextButton
+            style={styles.cancelButton}
+            onPress={() => sheetModalRef.current?.setModalVisible(false)}
+            text={'Cancel'}
+          />
+          <MainButton
+            style={styles.insertBtn}
+            onPress={() => handleOnInsertLink({ label, url })}
+            iconName="plus"
+            iconType="MaterialCommunityIcons"
+            iconColor="white"
+            text={'Insert Link'}
+          />
+        </View>
+      );
+    };
+
+    const _renderInputs = () => (
+      <View style={styles.inputsContainer}>
+        <Text style={styles.inputLabel}>Label</Text>
+        <TextInput
+          style={styles.input}
+          value={label}
+          onChangeText={setLabel}
+          placeholder={'Enter Label'}
+          placeholderTextColor="#c1c5c7"
+          autoCapitalize="none"
+          innerRef={labelInputRef}
+        />
+        <Text style={styles.inputLabel}>URL</Text>
+        <TextInput
+          style={styles.input}
+          value={url}
+          onChangeText={setUrl}
+          placeholder={'Enter URL'}
+          placeholderTextColor="#c1c5c7"
+          autoCapitalize="none"
+        />
+      </View>
+    );
+    const _renderContent = (
+      <View style={styles.container}>
+        {_renderInputs()}
+        {_renderFloatingPanel()}
+      </View>
+    );
+
+    return (
+      <ActionSheet
+        ref={sheetModalRef}
+        gestureEnabled={true}
+        keyboardShouldPersistTaps="handled"
+        containerStyle={styles.sheetContent}
+        keyboardHandlerEnabled
+        indicatorColor={EStyleSheet.value('$primaryWhiteLightBackground')}
+        onClose={() => {
+          setLabel('');
+          setUrl('');
+          handleOnSheetClose();
+        }}
+      >
+        {_renderContent}
+      </ActionSheet>
+    );
+  },
+);

src/components/insertLinkModal/insertLinkModalStyles.ts

@@ -0,0 +1,62 @@
+import { TextStyle, StyleSheet, ViewStyle, Dimensions, ImageStyle } from 'react-native';
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+const gridItemWidth = Dimensions.get('window').width / 2 - 32;
+const gridItemHeight = (gridItemWidth * 500) / 600;
+
+export default EStyleSheet.create({
+  sheetContent: {
+    backgroundColor: '$primaryBackgroundColor',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 999,
+  },
+  modalStyle: {
+    flex: 1,
+    backgroundColor: '$primaryBackgroundColor',
+    margin: 0,
+    paddingTop: 32,
+    paddingBottom: 16,
+  },
+  container: {
+    // flex: 1,
+    // justifyContent: 'space-between',
+    paddingVertical: 8,
+  },
+  bodyWrapper: {
+    flex: 3,
+    paddingHorizontal: 16,
+  },
+  floatingContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    backgroundColor: '$primaryBackgroundColor',
+  } as ViewStyle,
+  insertBtn: {
+    marginLeft: 16,
+    width: 170
+  },
+  inputsContainer:{
+    height: 200,
+    paddingHorizontal: 16,
+  },
+  inputLabel:{
+    color: '$primaryBlack',
+    fontWeight: '600',
+    textAlign: 'left',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    color: '$primaryBlack',
+    maxHeight: 50,
+    marginVertical: 8, 
+  },
+});

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

@@ -4,6 +4,7 @@ export const writeUrlTextHere = 'https://example.com';
 export const writeTextHereString = 'Text here';
 
 export default async ({ text, selection, setTextAndSelection, item, isImage = null }) => {
+  console.log(text, selection, item, isImage);
   const imagePrefix = isImage ? '!' : '';
   const itemText = item ? item.text : writeTextHereString;
   const itemUrl = item ? item.url : writeUrlTextHere;

src/components/markdownEditor/view/markdownEditorView.js

@@ -17,6 +17,7 @@ import { Icon } from '../../icon';
 // Utils
 import Formats from './formats/formats';
 import applyMediaLink from './formats/applyMediaLink';
+import applyWebLinkFormat from './formats/applyWebLinkFormat';
 
 // Actions
 import { toggleAccountsBottomSheet } from '../../../redux/actions/uiAction';
@@ -37,6 +38,7 @@ import {
   SnippetsModal,
   UploadsGalleryModal,
   Tooltip,
+  InsertLinkModal,
 } from '../../index';
 
 import { ThemeContainer } from '../../../containers';
@@ -90,6 +92,7 @@ const MarkdownEditorView = ({
   const galleryRef = useRef(null);
   const clearRef = useRef(null);
   const uploadsGalleryModalRef = useRef(null);
+  const insertLinkModalRef = useRef(null);
   const tooltipRef = useRef(null);
 
   const dispatch = useDispatch();
@@ -232,6 +235,7 @@ const MarkdownEditorView = ({
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const _setTextAndSelection = useCallback(({ selection: _selection, text: _text }) => {
+    console.log('_text : ', _text);
     inputRef.current.setNativeProps({
       text: _text,
     });
@@ -266,6 +270,7 @@ const MarkdownEditorView = ({
   );
 
   const _handleOnSnippetReceived = (snippetText) => {
+    console.log('text : ', text, 'selection : ', selection, 'snippetText : ', snippetText);
     applySnippet({
       text,
       selection,
@@ -290,6 +295,42 @@ const MarkdownEditorView = ({
     }
   };
 
+  const _handleOnAddLinkPress = () => {
+    insertLinkModalRef.current?.showModal();
+  };
+  const _handleOnAddLinkSheetClose = () => {
+    inputRef.current?.focus();
+  };
+  const _handleInsertLink = ({ label, url }) => {
+    if (url) {
+      if (label) {
+        applyWebLinkFormat({
+          item: { text: label, url: url },
+          text,
+          selection,
+          setTextAndSelection: _setTextAndSelection,
+        });
+      } else {
+        let selection = {
+          start: 0,
+          end: 0,
+        };
+        inputRef.current.setNativeProps({
+          text: url,
+        });
+        inputRef.current.setNativeProps({
+          selection: selection,
+        });
+        setSelection(selection);
+        _changeText(url);
+      }
+    } else {
+      console.log('No url added!');
+    }
+
+    insertLinkModalRef.current?.hideModal();
+    inputRef.current?.focus();
+  };
   const _renderMarkupButton = ({ item }) => (
     <View style={styles.buttonWrapper}>
       <IconButton
@@ -355,7 +396,8 @@ const MarkdownEditorView = ({
           iconType="FontAwesome"
           name="link"
           onPress={() =>
-            Formats[3].onPress({ text, selection, setTextAndSelection: _setTextAndSelection })
+            // Formats[3].onPress({ text, selection, setTextAndSelection: _setTextAndSelection })
+            _handleOnAddLinkPress()
           }
         />
         <IconButton
@@ -509,6 +551,12 @@ const MarkdownEditorView = ({
         uploadedImage={uploadedImage}
       />
 
+      <InsertLinkModal
+        ref={insertLinkModalRef}
+        handleOnInsertLink={_handleInsertLink}
+        handleOnSheetClose={_handleOnAddLinkSheetClose}
+      />
+
       <OptionsModal
         ref={galleryRef}
         options={[

src/components/modal/view/modalView.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
-import ModalBox from 'react-native-modal';
+import { default as ModalBox } from 'react-native-modal';
 import { IconButton } from '../../iconButton';
 import styles from './modalStyles';
 

yarn.lock

@@ -8679,10 +8679,10 @@ react-native-modal-translucent@^5.0.0:
   resolved "https://registry.yarnpkg.com/react-native-modal-translucent/-/react-native-modal-translucent-5.0.0.tgz#8b35cfa4189dce776c77a925b00ad19d965bd0a2"
   integrity sha512-xhJAlq4uCE7jPEIPxGS1WNiRIm5DCrZEO3SF88moTOm6b4/wfFEANf+lMsVkQf9b9dsQ6Em4nq4uAoejtbHb2A==
 
-react-native-modal@^11.5.6:
-  version "11.7.0"
-  resolved "https://registry.yarnpkg.com/react-native-modal/-/react-native-modal-11.7.0.tgz#6637d757eeac6eda85f7017a9dfdee0c0fe3a34c"
-  integrity sha512-0AeAugUrn12DaJK+k2XGmt8ZIUyWgl1nRdipfwHZDnzFSM8g1oqpf7rHxjOqhimHtmzSj4xJ//ZOn1DWe9aC5Q==
+react-native-modal@11.5.6:
+  version "11.5.6"
+  resolved "https://registry.yarnpkg.com/react-native-modal/-/react-native-modal-11.5.6.tgz#bb25a78c35a5e24f45de060e5f64284397d38a87"
+  integrity sha512-APGNfbvgC4hXbJqcSADu79GLoMKIHUmgR3fDQ7rCGZNBypkStSP8imZ4PKK/OzIZZfjGU9aP49jhMgGbhY9KHA==
   dependencies:
     prop-types "^15.6.2"
     react-native-animatable "1.3.3"