Implement Image Insertion Functionality in Text Editor with Block-Level Display

[rcAsironman]

Description

The basic text editor has been set up. Your task is to enhance it by allowing users to insert or attach images when they click on the image icon(tap on it) -> camera icon(to upload an image ) in the AddNoteScreen which is in (AddNoteScreen.tsx file).

The inserted/attached image should be displayed as a block-level element, meaning:

• It should occupy the full width of the editor (or container).

• Any new text should start on a new line after the image.

If the cursor is still present in a sentence and the user tries to insert a new image, the image should automatically start on a new line.

Tasks

• Understand the current functionality of mage insertion.
• Write comments for better understanding.
• The attached Image size should be 100px(width) X 100px(height)
• Write test cases for your code.
• Run the App on your local device/machine.

Acceptance Criteria

• All Test cases should Pass.
• The Image Insertion functionality should work properly as mentioned above.
• The App should run on your local device/machine without any issues.

Reference