Adding image inside textview using native NStextattachment and NSattributedString in Nativescript

Question

I just tried to add an image inside the textview using native NSAtrributedstring and NStextAttachment, getting some help from this article here

However, I am unable to do it. I am using nativescript-mediafilepicker library to add the image from the Photo library, then converting the PH image to UIImage using one its inbuilt method. But the textview is not getting updated with the image. However, I am being able to add more string through the NSattributedstring but not image.

here's my code.

                  //creating and initilizing new NSMutableAttributedString
                   var attributedString = NSMutableAttributedString.alloc().initWithString(textview.ios.text);
                   textview.ios.attributedText = attributedString;

                  //value is an UIImage object what the convertPHImageToUIImage method returns
                   var image = value;

                  console.log(image);
                  //the above log prints<UIImage: 0x2817ac4d0> size {4032, 3024} orientation 0 scale 1.000000



                  let oldWidth = image.size.width;
                  // console.log(oldWidth);
                  let scaleFactor = oldWidth / (textview.ios.frame.size.width - 10);
                    //console.log(scaleFactor);
                  let orientation="up";

                    //create NStextAttachment

                   let textAttachment = NSTextAttachment.alloc().init();
                   //adding UIImage object to NSTextAttachment
                    textAttachment.image = UIImage.imageWithCGImageScaleOrientation(image.CGImage ,scaleFactor , orientation)
                  // console.dir(textAttachment);

                   //creating a new NSAttributedString
                    let attrStringWithImage = NSAttributedString.alloc().init();
                    //console.dir(attrStringWithImage);
                    attrStringWithImage.attachment = textAttachment;
                    console.dir(attrStringWithImage)

                   //appenind the NSAttributedString to the mutable string..
                    attributedString.appendAttributedString(attrStringWithImage);
                    //console.log(attributedString.containsAttachmentsInRange(textview.ios.selectedRange));
                    textview.ios.attributedText = attributedString;

                     //textview.ios.textStorage.insertAttributedStringAtIndex(attrStringWithImage,textview.ios.selectedRange.location)
                    //this doesn't work either

Please note! I am an amateur to development. Please forgive if I am asking something silly. :) — dexter2019, Oct 02 '18 at 19:00

score 1 · Answer 1 · answered Oct 02 '18 at 19:17

1

Install tns-platform-declarations if you are using TypeScript, that will make your life easy when you want to access native apis.

UIImage.imageWithCGImageScaleOrientation(cgImage, scale, orientation);

This docs will help you understanding the casting of Objective C to JavaScript / TypeScript.

answered Oct 02 '18 at 19:17

Manoj

21,753
3
20
41

HelloSir, thanks a lot. Understood the concept of using parameter name's first letter as capital with "With". thanks a lot. I will implement this now. Hope it works – dexter2019 Oct 02 '18 at 21:18
Hello Sir, after implementing the same I am getting this weird log wheneven the medifilepicker opens : "Cannot be called with asCopy = NO on non-main thread. Cannot be called with asCopy = NO on non-main thread. Cannot be called with asCopy = NO on non-main thread. Cannot be called with asCopy = NO on non-main thread. Cannot be called with asCopy = NO on non-main thread. Connecting to XPCPhotoLibraryStore" – dexter2019 Oct 02 '18 at 21:56
What is your source for your image? Can you reproduce the issue with Playground? – Manoj Oct 03 '18 at 06:00
Hello Sir, I could come till this far but still, the textview is not getting updated with the Image. I was also taking reference from this post here https://stackoverflow.com/questions/28424045/combining-text-and-images-in-uitextview#28424571 I have put my code in the question now. – dexter2019 Oct 03 '18 at 22:30
`app/images/1.jpg` will not be a known path to UIImage. – Manoj Oct 04 '18 at 06:01
hello sir, now I have converted the PhImage into UIImage using the Mediafile picker plugin's convertPHImageToUIImage() method. And when I log the image in the console it display " size {4032, 3024} orientation 0 scale 1.000000". But still not textview is not getting updated with the image. I have updated the question. – dexter2019 Oct 04 '18 at 20:42
What you have in your XML, are you using data binding on value attribute of your text view? – Manoj Oct 05 '18 at 06:56
Yes! Sir! I am using two way data binding on the xml – dexter2019 Oct 05 '18 at 07:39
However attributedStringwithImage is still showing length as zero after adding the NStextattachment – dexter2019 Oct 05 '18 at 07:50
It's valid, you can't expect both to work. The text will overwrite the attributed string or vice versa based on which gets applied last. You will have to use formatted text and inject your image by modifying the native instance of attributed string. I guess you might have to extend the TextView component to get it right. – Manoj Oct 05 '18 at 13:52
Thank you Sir. But can you tell me a bit more abourt "extending the textview component". Sorry to bother you again. – dexter2019 Oct 05 '18 at 14:25
Here you can find some example - https://docs.nativescript.org/plugins/ui-plugin-custom, but it doesn't necessarily have to be a plugin. It can be a module with in the app as along you prefer that way. You might have to understand the hierarchy of the TextView component, https://github.com/NativeScript/NativeScript/blob/master/tns-core-modules/ui/text-view/text-view.ios.ts and update the formatted text utility class to support image. – Manoj Oct 05 '18 at 19:56
HelloSir, I am looking into those articles. However, there was an error in my code as well. The attributedStringwithImage was not getting initialized correctly with the textattachment . then I used "initWithStringAttributes()" method to initialize as initWithAttachment() didn't work. However the image still not showing up on the UI. I have also opened another straightforward question to see if I can get anyhelp. – dexter2019 Oct 05 '18 at 22:40

Adding image inside textview using native NStextattachment and NSattributedString in Nativescript

1 Answers1