Feature: Ease of adding link in post

[noumantahir]

In the mobile text editor, when a user pastes a link, you need to open a pop-up window, the same as when viewing a profile. In this window, make two fields, link text and link address. This will improve the user experience!

The other day I was writing a post on my iPad. It was excruciatingly difficult to paste the copied link in brackets!

Ref: https://discord.com/channels/385034494555455488/445901975301914624/943088021132165120

Implementation Strategy

After thinking on the use case a bit, it seems the most effective way to implement this feature would be to do it in phases...For instance phase one can be simple modal that inserts a link in post, later we can expand from that.

Phase 1

• User taps the insert link button
• Open a modal with url and label fields, title field should be optional
• If you adds label, format output text as [label](url)
• If user does not add a label, just insert raw url https:.....com
• An action button that inserts formatted text into post body
• For inserting, use method _handleOnSnippetReceived [ref-1]with format text string ref-1: https://github.com/ecency/ecency-mobile/blob/5d991a49dd5d1f62858f29734f71865a31fccd22/src/components/markdownEditor/view/markdownEditorView.js#L268

fyi: current applySnippet method adds leading and trailing \n (ref-2), to resolve this, remove them from applySnippet method but add that in Snippets modal before calling handleOnSelect [ref-3] from SnippetsModal ref-2:https://github.com/ecency/ecency-mobile/blob/5d991a49dd5d1f62858f29734f71865a31fccd22/src/components/markdownEditor/view/formats/applySnippet.ts#L5 ref-3:https://github.com/ecency/ecency-mobile/blob/5d991a49dd5d1f62858f29734f71865a31fccd22/src/components/snippetsModal/snippetsModal.tsx#L68

Phase 2 If user selects a portion of text from post body before tapping link button,

• process selection text to check if it's url or plain text
• prefill label or url field based on selection
• rest is same

Phase 3

• Adds a preview of how final result will look.
• For now add horizontal panel to let user selection type of link on top of modal, options can represent: Plain, Video, Image with section title Type of link.
• We can hide label property if Video or Image is selected.
• For now keep preview window a simple View just like Will add more details with sketches later

Phase 4 User pastes a link, or shares a link from external app -- More details will add later

[noumantahir]

@feruzm I love this suggestion, not just pasting link, we should also open a modal with title and url fields when user press add link button.

My second suggestion would be to make it easy for users to add link of images... I guess we do process video urls already but I tried pasting an image link and it just did not render the image instead just rendered tapable link.

[feruzm]

@noumantahir yes, we can do so much more to make composing post more friendly. We had some design items in past.. let me see if I can find that, oh right we have them in App Stores screenshots... Check this out, how we imagined to show image links...

[noumantahir]

Alright let's discuss them during next meeting