joplin-plugin-freehand-drawing

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:

After installation, an "insert drawing" button should appear in the toolbar:

Existing drawings can be edited by hovering over the drawing in the markdown preview pane, then clicking "edit".

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 toolbar button or "Insert Drawing" from the Edit menu.

Warning

To insert drawings in the rich text editor, this plugin works around this Joplin bug by briefly switching to the markdown editor and back to the rich text editor. This clears the rich text editor's undo history. This should only apply to new drawings.

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

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"
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":

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"

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!).

Customizing keyboard shortcuts

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"
		]
	}

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

After changing the shortcuts, Joplin should be restarted.

Note

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

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.

Changelog

2.4.0

• Bug fixes
  • Fixes pressing <kbd>Ctrl</kbd>+<kbd>R</kbd> (resize to selection) also brings a selection to the top.
• Features
  • Pressing <kbd>End</kbd> when there is a selection now sends the selection to the back.
  • Pressing <kbd>Alt</kbd>+<kbd>q</kbd> is now equivalent to pressing "Exit".
  • Initial support for customizing keyboard shortcuts within the editor.
    • Keyboard shortcuts can be added to Joplin's settings.json.
    • This is currently difficult to do, as there is no UI for this.