Plugin: js-draw integration

In the current version, clicking the select tool, clicking on the canvas, pressing ctrl+A then ctrl+C, copies all text in the image to the clipboard. Pasting in an app like Joplin or a text editor will paste the text that was in the selection.
It might make sense to add this text automatically (i.e. putting the text content of an image between the ![brackets that mark the alt text](:/27b1595f39264e26a5888aaac86afd11) when creating a new image).

I like that idea! I do worry about accidentally clicking on the scrollbar while writing on the canvas, however... Maybe the scroll bar should only be visible when using the pan tool?

A sidebar that lets users jump to regions of the canvas with higher stroke density might also make sense.

It's not currently possible to search for text in the canvas, but I can try adding that! (I have exams soon, so it might take a while to get implemented).

3 Likes

cool

About the scrollbar I don't think it's a big problem on PC, on mobile it might need to be optimized and adjusted. Visible on the panning tool sounds like a good idea.

It's ok, just follow your planning and good luck with your exam. :smile:

1 Like

I've implemented a find function that can be opened with ctrl+f. (Known issue: Find won't open if currently editing a text object). The updated desktop plugin (v1.3.2) should be available later today!

2 Likes

The Android beta has been updated!

2 Likes

Is there any way to expand the canvas box to arbitrary dimensions, such that the display in the note can be bigger than the default box size?

PS: Awesome plugin.

1 Like
  1. Select what you want to resize the image to.

  2. Press "resize image to selection" (shortcut: ctrl+r)

3 Likes

Updated quickly, hard work. My only fantasy for this drawing tool is that in it, buttons to link other notes can be created. Make my notes more systematic. Just like the Excalidraw plugin in Obsidian.

Of course, if it's not possible, it's done perfectly now. Thanks again.

1 Like

Awesome, thank you!

I'm so glad this is getting added. It's really a key feature, & the previous work-around (embed an image & edit with an external program) was always cumbersome.

Are there plans to integrate this in to the rich text editor (currently images won't save when opened from there)?

2 Likes

I've tried! Calling insertText when the rich text editor is open doesn't seem to work with SVG images (it's inserting part of the image as text. I'll have to look into this further...). Programmatically switching to the markdown editor, then calling insertText, and switching back to the rich text editor is something that might work...

Additionally, I haven't found a way to send messages from the rich text editor's WebView to the main plugin script (webviewApi.postMessage doesn't seem to exist in the rich text editor). As such, I don't know how to get an "edit image" button in the rich text editor to communicate with the main plugin.

I'm so glad this is getting added. It's really a key feature, & the previous work-around (embed an image & edit with an external program) was always cumbersome.

Be aware that Plugin: draw.io and Plugin: support Excalidraw in joplin also exist.

3 Likes

The Android beta has been updated!

4 Likes

The Android beta has been updated again — saving is made several times faster, Joplin is updated, and an inertial scrolling bug has been fixed!

3 Likes

updated and running fine here!

1 Like

I had completely missed that you had integrated your lib to the Android app. It works very well from what I can see, and is even compatible with my tablet pen.

Do you know of any major issue with the integration so far @personalizedrefriger? If it's all good I think we could add it to the main app, as I'm sure many users would be interested.

8 Likes

See Mobile: js-draw-based image editor by personalizedrefrigerator · Pull Request #7588 · laurent22/joplin · GitHub

2 Likes

The Android beta has been updated again! Along with performance improvements, there is now a button to attach images to the editor. Joplin was also updated, adding a setting to change the text editor font size, upgrading to React Native 0.70.x, and more.

5 Likes

Excellent!

1 Like

The Android beta has been updated! js-draw now has new pen icons and rotation snapping while rotating the screen with a touchscreen.

Joplin has also been updated, which brings support for profiles (see settings > profile manager).

2 Likes

Hi there!

It seems to be fantastic!

But I am really new to Joplin and its plugins. Sorry guys for asking this (maybe a very newbie question), but, supposint I draw inside a note: how will this data be stored?

I mean, thinking in the data continuity, how will the data be stored in my notes when I draw using this plugin? Some kind of "Mermaid-like" syntax?

It's stored as an SVG — in the desktop app, right-clicking on one of the drawings should give an option to open it in a text editor (or save in a location you can open it).

Great! Thank you.