Getting started writing an inkdrop plugin

Hi, thanks for making the plugin interface to inkdrop. I think it is a good idea.

Unfortunately, I am not familiar with Javascript, but have programmed some in Perl, Python and C++. I am interested in learning Javascript, but my main focus is to write a plugin. Could you recommend a minimum study (e.g. books or online resources) to get started writing a plugin as quickly as possible?

My plan was to dive straight into it by copying the source of an existing plugin. Then, modify it in small increments using google search combined with trial and error and a “hope-for-the-best” approach. But maybe I need some additional advice?

I have read the word-count plugin introduction and I was able to successfully load the sample plugin into inkdrop.

Hi Hakon,

Thanks for the question.

Very basic knowledge of NodeJS and ReactJS would be adequate.

Yeah that’d be the shortest way to make a plugin.
Can you tell me what plugin you are planning to make? So I can tell you which plugin would be nice to copy from.

Hi craftzdog, this is great. Then this should be quite within reach I hope :grinning_face_with_smiling_eyes:

Thanks for helping me out. I appreciate it. I have many ideas, first thing I need is a way to annotate code blocks with apple pencil. But I realize this requires specific knowledge of iPad apple pencil API. I do not know anything about coding for iPad, and also maybe inkdrop does not expose that part to plugins easily. So I guess I will start with something less ambitious like selecting text with the mouse and right-click it to bring up a context menu where I can change background color. This is a simple kind of annotation (changing the background color of certain text), that should be easier to achieve. I realize that this will have to change the format of the saved markdown file. And then that file will not render correctly in e.g. GitHub using a standard parser. For example, the save format could look like this. It can change the following code block:

```
Hello world!
```

into for example the following (to highlight with blue color the “world” word):

```
Hello [[color=blue]](world)
```

However, I also realize now that people can use different themes in inkdrop, so blue color might not be exact?

Maybe this format could also be used outside code block? Also for this to be workable, the plugin also has to be able to hook into the “Export as markdown” function to remove the highlighting information when exporting to regular markdown file.

Next idea, I have for plugin, is a way to make an internal link. It will bring you to another place inside the same document. By clicking it, the editor will scroll down to the link target location.

The third idea I have is the simplest and which I think I could start with. Norwegian keyboards has the backtick as a dead key. To get a backtick character in the inkdrop editor I need to press Shift + “\” (the key left of the Backspace), here is a sample norwegian keyboard layout:

but this is not all: Now the editor shows an underlined backtick symbol, indicating that it expects a second character to be input. If I press Shift + “\” once more I finally get the backtick character as a symbol in the inkdrop editor.

I would like to make a plugin where you can press a keyboard shortcut and it will insert a pair of single backticks if the cursor is not inside a word. If the cursor is inside a word, the keyboard shortcut insert a pair of backticks around the word where the cursor is. Also multiple words could maybe also be selected with the mouse, and the keyboard shortcut would then apply to the selection. Or alternatively, a right mouse click on the selection will bring up a context menu with a “Backticks” menu item that can be chosen to insert a pair of backticks around the selected text.

Thanks for letting me know your ideas!
Please note that plugins are basically for the desktop version.
The mobile version only has some simple APIs to extend its Markdown renderer.

Apple Pencil support for iPad

That sounds cool.
However, you can’t extend the mobile app with native APIs. It’s prohibited by Apple.

As for the custom format for codeblocks, I wouldn’t recommend to do that because codeblocks can have various kinds of languages.
There is a plugin that does a similar thing is code-title.
It adds a title to the codeblock like so:

```js:This is a title
alert('Hello')
```

Internal link

To add a click handler to the editor, you have to understand CodeMirror’s API.

The following reference would be helpful:

Keyboard shortcut for inserting backticks

Sounds great. This plugin is the simplest one to copy:

Hope that helps!