devlog: Fixing a bug of my Electron-based React app!

is it possible i got it no no no no no no no [Music] [Music] hello everyone i'm takoya i'm a slow developer of ink drop which is a simple mark than note-taking director today i'm gonna welcome an issue about clipboard mike reported an issue about copy and paste thank you for recording mike so he wants to copy his notes uh from the preview pane to the other app like apple notes or pages or some other rich text apps it doesn't allow you to copy copy notes including images so for example uh you've got you've got not including a cat image and if you try to copy if you try to copy to apple notes then you don't get images pasted so it's kind of annoying if we work with other apps so the exportability is very important for such note-taking apps so i'd like to fix it today so but i don't know how to i don't know how to solve it yet okay i'd like to search uh electron people the api so does it have a event to catch when user copy or paste looks like no it doesn't have an event all right so how can i know when user copied the text okay uh let me describe why it won't work because uh so this is a preview pane and the image is not actually the body the url uh as you can see here uh it's uh it's not your http or https or file url uri uh inktop dash file protocol is a custom protocol defined in the main process include file protocol is registered with this method of the electron api and and it returns the actual image but apple nodes or other other nodes uh others don't know interrupt encrypt dash file protocol so that's why it doesn't work so we have to convert that this custom ui to the something like uh by the url or data uri i guess it works uh by replacing this url but with this url with uh data url that you are so it should work because other apps don't have to load images from instructors okay so how to replace the camera so electron api has a no no no electron provides an api to get clipboard data by calling [Music] read html i guess it is so we have to read html from quickboard and replace the extra custom uri to uh the data uri all right make sense let's get right into it so in group has a command system your every actions invokes a sound sound command uh which are listed here so it has application commands commands editor exporting button view in the windows commands so for example so it has a core copy command so you if you hit the command c and it inbox copy command so i guess we have to override copy command to know what html has been copied from the preview pane through the main c is now going with copy but it's uh it's in global scope so it's let's define let's define preview preview plane [Music] and [Music] well so so i need to find the core copy preview command and it has to be 100 in preview pane and here is the preview pane preview it's the preview pane and uh commando hundreds are defined here [Music] okay so let's see it works okay it works but [Music] no so the text is not copied okay uh so so read this so i need to redispatch the command uh copy command uh crypto great right clicks or [Music] html [Music] exactly it's not possible oh copy it has a copy it's executed editing command copy reading one copy okay so if you have the copy command but it's not there's no direct way to uh to get selected text as html right is it possible [Music] oh cool really no it's not html gets a reaction guess section but it's not edge it's not [Music] um okay [Music] okay so i can copy select the text as html i guess so this command copies the text to clipboard and [Music] type what type can be selection section oh section is only available and unlocks okay so it's uh option so i don't need to specify this type parameter okay so let's try [Music] yeah it works it works so if so if i copy this and what's this no there is no image oh there's no image no i'm wrong so i got it it's too fast to read html uh so we have to wait for a while until the quick product is copied so maybe i have to call the webviews copy api instead and there is a window variable how to get webview [Music] [Music] [Music] something [Music] we have contents okay paste it does copy here's copy so [Music] right okay [Music] [Music] hmm no it doesn't work so either way i have to wait for a while [Music] wait [Music] [Music] [Music] no [Music] well okay so it works so now i can get i can get html i can get circuit text.html and i have to [Applause] replace this uri to the data you are okay how can i do that so i have to so i have to get the uris right and [Music] [Music] okay [Music] [Music] hmm it's not working okay so now we've got our eyes and let's repress it right um [Music] [Music] um [Music] hmm let's define a function something like uh preview [Music] selection [Music] and [Music] okay great [Music] nope [Music] mess up and documentation document id so i have to get the pigment id can maybe [Music] uh [Music] [Music] oh [Music] [Music] shhh [Music] maybe it works [Music] okay okay it works and let's roll it all right [Music] and get a space 64 method so let's call it here and [Music] nice maybe media type media type media type media type media type 9 type type [Music] content type [Music] 64. [Music] yeah it should work [Music] let's see if it works okay no why why it doesn't work [Music] am i correct to write markup and type type type ah okay it's the same so it looks like a property it faced ah no it remains into file uri protocol [Music] [Music] hmm yeah yes works great [Music] maybe it works fine without the issue so how about how about uh pages works no oh no no no no no it freezed okay let's copy some gang and paste yes it works maybe this star seed is also upright but but it works fine all right great maybe this time out timeout ranks should be longer just in case cool man so worried has multiple images [Music] does it work fine yeah it's fine cool so i'm glad to solve this script board issue and i can't wait to raise this this improvement sorry for the loud keyboard typing sounds so i'll buy the boom arm for the microphone uh so that my voice can be clear so thank you for watching and i hope you enjoy it and see you in the next one peace [Music]

Channel: devaslife

Views: 24,270

Rating: 4.9631338 out of 5

Keywords: Productivity, Solo dev, Programming, Solopreneur, Freelancing, React, vim, neovim, JavaScript

Id: jizO0wnKjIg

Length: 27min 27sec (1647 seconds)

Published: Mon Sep 14 2020