Feature: tag and notebook display

Development
1

Hiya,

I’ve spent a few hours trying to learn javascript and react and joplin and (with some generous help from @laurent) managed to get a basic tag feature working.

For now, it looks like this:

image

I’ve also added a thing that shows the notebook name when search is active, the reasoning being that you don’t normally need it here, since the active notebook is always the one you see on the left.

image
image.png737×235 13.9 KB

(Now as I’m writing this I’ve realized that it’d also might be handy when the sidebar is hidden.)

I’d like to know how you think this entire thing should behave. It’s far from done: for example, clicking the tags in the list does nothing for now. (I want it to redirect to the tag itself, as if selected from the side menu.) It also doesn’t handle cases where there are a lot of tags very gracefully. (I’m guessing that since the top bit behaves like a button toolbar, it doesn’t even try to overflow. I haven’t had time to look into it yet, though.)

Also, ideally, we should be able to remove the ‘tags’ button entirely, replacing it with tags that look like these

react-tagsinput

or these

vue's elementIO

But as my grasp on Joplin internals is next to non-existent, I can’t yet tell whether it’d be easily doable. I also don’t know how it should be done - e.g. whether Laurent is open to adding more dependencies to the project with libraries that already implement something like this.

Final note: If there was enough interest in this feature (I think it’s already been requested a few times already), I’d be willing to create a pull request - if I manage to get it working well enough.

What do you think?

3 Likes
2

someone already did something about tags and about notebook but go on ; the result looks great :slight_smile:

3

Haha, I've checked github perhaps a week ago when I'd started fiddling with this and haven't checked since, so I'd completely missed those. :smiley: :woman_facepalming: Thanks.

(though the Notebooks seem to do something different: Karrthik12's seem to display the number of notes in a notebook, whereas mine adds the notebook's name to a note so you can tell which one it belongs to.)

1 Like
4

i’m aware of the changes because I “watch” all of them;) you could improve the ideas of each others

1 Like
5

Good idea. :smiley:

(I don't regret doing this, though - I counted on perhaps throwing the code away. I just want to familiarize myself with Joplin a bit, and this seemed like a good place for a first try.)

1 Like
6

Managed to make the tags clickable - so when clicked, they take you to the tag in question. (As if you clicked it in the left sidebar.)
Wanted to add a right-click option to remove a tag, but haven't been successful so far. :sweat_smile:

7

Got a little stuck. @laurent, if you have a moment, maybe you could give me a hint?
I can’t get the tag list to update when user edits tags. I can’t find any NoteText event that’d run when they are saved.
Thinking perhaps there isn’t such an event yet, I’ve tried (among other things) dispatching an event in MainScreen.jsx when the tags change, somewhere under the line else if (command.name === 'setTags') { like this:

this.props.dispatch({
    type: 'NOTE_TAGS_CHANGE',
    noteId: command.noteId
});

then I tried adding a case with a handler to reducer.js, but it never got called - and even more confusingly, the reducer.js file got repeatedly automatically overwritten with the previous version of the file, discarding my changes.
Maybe I’m not supposed to edit that file directly, or something? I haven’t been able to find what overwrites it, or google anything useful either.

Any help is much appreciated.

1 Like
8

How do you run the app? Probably you've edited the file in ElectronClient/lib however this gets overwritten by the version in ReactNativeClient/lib when building as described there - joplin/BUILD.md at master · laurent22/joplin · GitHub So if you want to change files in the lib directory, do it in ReactNativeClient/lib

I can’t get the tag list to update when user edits tags. I can’t find any NoteText event that’d run when they are saved.

Thinking perhaps there isn’t such an event yet, I’ve tried (among other things) dispatching an event in MainScreen.jsx when the tags change

As a general rule, the app avoids events when possible. Instead, the Redux state is updated when needed and that state is fed into the components. So currently the flow would work like this:

  • A tag is saved or created in the database
  • An action "TAG_UPDATE_ONE" is dispatched
  • In the reducer, the Redux state is updated with the modified tag

So it means at any time you can get up-to-date data from the Redux state, and this is done using the connect() function.

So in your case, if you want the list of tags from NoteText you'll need to connect them to the component by adding tags: state.tags to mapStateToProps. Then in the component you can access them using this.props.tags.

1 Like
9

Thanks.

I have tried this before. I can't do it directly like that, because state.tags contains all the tags, not just the ones pertinent to the note.
I have now tried a few more things; I found that the only function called after the tag changes are saved is the mapStateToProps. As mentioned above, there is a collection of all the tags in state.tags, and I can't really get the note-specific ones because I can't await the tagsByNoteId function.
Not even the componentWillReceiveProps function gets called in this case.

So I tried looking into the reducer.js. The tag changes are handled in updateOneItem - but there I only see a single new tag, not all of them at once, and I can't call async functions either, so I can't get them.

Maybe I'm missing something obvious?