npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

joplin-plugin-freehand-drawing

v2.13.0

Published

[On GitHub](https://github.com/personalizedrefrigerator/joplin-plugin-freehand-drawing) | [On the Joplin Forum](https://discourse.joplinapp.org/t/plugin-js-draw-integration/27114) | [Online Demo](https://personalizedrefrigerator.github.io/js-draw/example/

Downloads

137

Readme

joplin-plugin-freehand-drawing

On GitHub | On the Joplin Forum | Online Demo | Installing

A Joplin plugin for creating and editing freehand drawings using js-draw.

Installing

Search for "freehand drawing" under the plugins tab in Joplin's settings: screenshot of the search bar and results in the plugins tab. Freehand Drawing // create and edit drawings with js-draw is the only visible result.

After installation, an "insert drawing" button should appear in the toolbar: A pen icon labeled "insert drawing" is shown in the markdown toolbar, just to the right of the "insert date" button.

Existing drawings can be edited by hovering over the drawing in the markdown preview pane, then clicking "edit". screenshot of a drawing in the preview pane and an edit button, beneath the cursor. The edit button is at the bottom-right of the drawing.

FAQ

How do I edit drawings from the rich text editor?

Editing an existing drawing: Double-click on the drawing.

Adding a new drawing: Click either the pen toolbar button or "Insert Drawing" from the Edit menu.

I only use the markdown editor (no viewer). How do I edit drawings?

First, select the full resource URL for an image created with this plugin

screenshot: Resource URL (includes :/) is selected

Next, click the "Insert Image" button in the toolbar.

How do I assign a keyboard shortcut to the "Insert Image" button?

  1. Open Joplin's settings
  2. Click on "Keyboard Shortcuts"
  3. Search for "Insert Drawing"
  4. Click "Disabled" screenshot: Arrow pointing to "disabled" in the second column of the keyboard shortcuts table
  5. Entering a new key combination (e.g. Ctrl-Shift-D).

How do I disable drawing with touch?

Pen/mouse-only drawing can be enabled under the "Pan" tool's menu by enabling "Touchscreen panning":

screenshot: Arrow points to pan tool, another arrow points to the "Touchscreen panning" toggle button

How do I open a drawing in a new window?

This feature is still in beta and is currently difficult to access. Issue reports are welcome!

  1. Open the markdown editor.
  2. Select the drawing's ID: screenshot: Drawing ID selected
  3. Open the Command Pallete
    • On Windows and Linux, the keyboard shortcut for this is ctrl-shift-p.
    • On MacOS, the keyboard shortcut is cmd-shift-p.
  4. Type "insertDrawing" and select the "insert drawing in a new window" option. screenshot: Second option in the command palette selected

Joplin closed while editing a drawing. How do I recover the unsaved changes?

joplin-plugin-freehand-drawing autosaves every two minutes. The last autosave can be recovered by

  1. Switching to the markdown editor
  2. pressing Ctrl-Shift-P (Cmd-Shift-P),
  3. typing :restore autosave, then
  4. clicking "Restore from autosaved drawing"

screenshot: Command palette shows :restore autosave as search query, second result "Restore from autosaved drawing" is highlighted.

This should add a copy of the autosaved drawing to the current note.

How do I customize the image editor's keyboard shortcuts?

The procedure to do this is currently very complicated, as there is no GUI for this. (Making this simpler is planned!).

First, open Joplin's profile directory ("Help" > "Open profile directory").

Next, open settings.json in a text editor.

Near the end, there should be a line similar to this:

    "plugin-io.github.personalizedrefrigerator.js-draw.keyboard-shortcuts": { }

Shortcuts can be added between the { and the }. For example,

	"plugin-io.github.personalizedrefrigerator.js-draw.keyboard-shortcuts": {
		"jsdraw.toolbar.ExitActionWidget.exit": [
			"ctrlOrMeta-w",
			"alt-q"
		],
		"jsdraw.toolbar.SaveActionWidget.save": [
			"ctrlOrMeta-s",
			"ctrlOrMeta-shift-s"
		],
		"jsdraw.toolbar.PenTool.select-pen-1": [
			"CtrlOrMeta-1",
			"alt-1"
		],
		"jsdraw.toolbar.SelectionTool.resizeImageToSelection": [
			"ctrlOrMeta-r",
			"m"
		]
	}

The above adds additional shortcuts for exiting, selecting pen style 1, and resizing the visible region to the selection.

Joplin must be restarted for the changes to be applied.

[!NOTE]

Additional keyboard shortcut IDs can be found in js-draw's source code.

How do I delete a drawing?

Joplin should automatically purge drawings and other attachments after they have been removed from a note. The time this takes is determined by the "Keep note history for" setting, even if note history is disabled. See this forum post for details.

How do I report a bug related to the image editor?

This plugin uses js-draw to edit/create freehand drawings. Bugs related to js-draw can be reported using its issue tracker.

If you're unsure whether a bug is related to js-draw or this plugin, consider first reporting the bug on this plugin's GitHub repository. If it's more relevant to js-draw than this plugin, it will be moved by a maintainer.