Finished/Remaining To-Do Items Count

Original post:

Feature Request

It would be convenient to have a count of remaining tasks displayed on the note list, similar to what is displayed on GitHub issues.

E.G. Something like this:

So I’ve done some work on this, and I’ve got it to the point where it can count have many task you have:

  • Completed
  • Not completed
  • In total

I’m just struggling with getting it to display anywhere on the page (apart from the Message Dialog).
Here’s the link to the GitHub Repo for anyone interested in helping (it would be appreciated).

fantastic work, badian76! I saw your tweet yesterday and got excited about it.

You can insert your view component under the note title bar like this:

const editorLayout = inkdrop.layouts.getLayout('editor') // -> ['EditorTitleBar', 'EditorMetaForm', 'MDEContainer', 'EditorSearchBox']
editorLayout.splice(1, 0, 'YOUR_REACT_COMPONENT')
inkdrop.layouts.defineLayout('editor', editorLayout)

Hope it helps!
I am also planning to write tutorials for making custom views.

1 Like

Thanks for the code snippet! I got it to work. :smile:
Just one small issue, I was trying to run it automatically by checking if the documents has changed since being open

inkdrop.flux.getStore('editor').getState().changed === true

Though this causes it to run an endless loop when something does change (making it crash the program), so I was wondering if there was a way to check when the note if the note has been saved so I could run it after that?


Great to hear that!

You can subscribe change events from flux store like so:

const unsubscribe = inkdrop.flux.getStore('editor').listen((state) => {
    console.log('editor state changed:', state.document)

// on unload

Thanks! I’ve got it to work, though it seems to have disabled the shortcut for saving and clicking the synchronize notes doesn’t save it either so you have to wait for auto saving. Is that something with the provided code or would that be my doing?

Thanks for your help!

Well, what do you want to do with your plugin?
As the editor state always represents the latest state of the editor regardless of saving, you can show the latest progress of tasks.

I’ve got the plugin to work how I want (displays a text below the title saying how many tasks that they’ve ticked off and the total tasks in the current note).
It’s just that the user can’t manually save their note when the plugin is active, and I’m not sure why that’s the case.

Registering your component should not be in render method.
It will cause views re-rendering.
And subscribing store events should be on componentDidMount and should be unlistened on componentWillUnmount.

Please learn React component lifecycle:

1 Like

Thanks for your help @craftzdog, I’ve finished the plugin for anyone who would like to use it, You can find it’s page here, or download it by running

ipm install todo-count

Let me know if there are any issues!

Congratulations, Ben! :tada: