Plugin: Inline Tag Navigator [v1.4.0, 2024-12-12]

[shikuz]

Inline Tag Navigator

Type inline #tags in the note editor. View your tagged paragraphs and tasks / TODOs in an advanced search panel, or in a generated note. Convert inline and Obsidian tags into Joplin tags, and vice versa.

• Features
• Demos
• Tips
• Companion plugins
• Motivation
• Objectives

Features

This plugin adds inline tag support (such as #inline-tag) to Joplin in five ways:

1. It adds a panel for searching and viewing tagged paragraphs across all your notes (video).
   • Save search queries in notes and sync them across devices (video).
   • Display results in a table or a list (video).
   • Tag-by-notes: Search for links or [[wikilinks]] to notes (including backlinks to the current note).
   • Edit tags: Add, replace and remove inline tags via the panel context menu (right-click on a tag).
   • Toggle checkboxes / TODOs from the panel, including [x]it! style checkboxes.
   • Nested tags hierarchy: Search parent tags to find the locations of their children. Example: #parent/child.
   • Search for a range of tags, according to their lexicographic order. Example: #2024/07 -> #2024/08
   • Search tags by today's date. Examples: #today, #today+1 (tomorrow), #today-10 (ten days ago)
2. It can generate a note with all tagged paragaraphs that match a saved query (dynamically updated).
   • Save a query in a note, and switch note view on: Tools --> Tag Navigator --> Toggle search results display in note
3. It adds a panel for quickly navigating between inline tags that appear in the current note, or in all notes (video).
4. It can convert your existing inline tags to native Joplin tags, so that they are accessible using Joplin's built-in tag search.
5. It can convert your existing native Joplin tags to inline tags, so that they are accessible using inline tag search (this plugin).

After installing the plugin, check the commands listed under Tag Navigator in the Tools menu, as well as the corresponding settings section.

Demos

• Inline tag search
• Saved search queries
• Table view / database
• Navigation panel
• Tag insertion

Inline tag search

Saved search queries

Table view / database

Navigation panel

Tag insertion

Tips

• Troubleshooting
• Custom tag definitions
• Inline TODOs
• Keyboard shortcuts

Troubleshooting

• If any of the actions on note results does not work (toggling checkboxes, editing tags), this is usually resolved by a database update (Ctrl+Shift+D).

Custom tag definitions

• The definition of a "tag" can be adjusted with user-defined regular expressions.
  • Example: Every word in the text may be defined as a tag using a custom regex such as [A-Za-z0-9]+[\w]*.
• You may also define an exclusion rule to ignore certain tags.
  • Example: Numeric (#123) or hexanumeric (#C0FF1E) tags can be filtered using an exclusion regex such as #(\d+|[a-fA-F0-9]{6})$.

Inline TODOs

• Filter results by pending tasks ("- [ ]") or ones done ("- [x]").
• Add support for additional tags for @mentions, +projects and //due-dates using a custom tag regex such as (?<=^|\s)([#@+]|\/\/)([^\s#@'\"]*\w).
• Supported additional checkbox styles (inspired by [x]it!).
  • Set any of them to done by clicking the checkbox in the search panel.

• Toggle between all states by right-clicking on a checkbox.

• You may increase the checkbox size on smaller screens by setting Search: Panel style with the CSS .itags-search-checkbox { width: 18px; height: 18px; font-size: 18px } (adjust as needed).
• Furthermore, every checkbox in the text (even ones that are not tagged by any inline #tag) may be defined as a tag using a custom regex such as (?<=^|\s)([#]|\-\s\[[x\s@\?!~]\])([^\s#'\"]*\w)?.
  • You may then use queries to search for tag-tasks based on their state (- [ ], - [x], - [@], ...).

Keyboard shortcuts

• Default command shortcuts
  • These can be set up in Joplin's keyboard shortcut settings.

Key	Action
Ctrl + Shift + T	Toggle search panel
Ctrl + Shift + I	Focus on search panel (search tag / insert tag)
Ctrl + Shift + D	Update tag database
Ctrl + Shift + L	Load search query from current note

• Tag / note filter (search panel) shortcuts

Key	Action
Enter	Add tag(s) / note to query / note (see config)
2nd Enter	Search notes based on current query
Delete	Remove last added tag / note from query
Esc	Clear the filter (display all tags / notes)
2nd Esc	Return to note editor
Arrow-Down	Toggle negation of last tag / note in query
Arrow-Up	Toggle last operator AND <--> OR

Companion plugins

• The excellent Inline Tags plugin can help you add tags on the fly.
• You can highlight tags in the Markdown editor using Rich Markdown (version ≥ 0.14).
  • In Joplin settings --> Rich Markdown --> Advanced Settings --> Custom classes JSON enter:

  [{"name": "rm-tag", "regex": "(?<=^|\\s)#([^\\s#]*\\w)"}]
  

  • In Joplin settings --> Appearance --> Custom stylesheet for Joplin-wide app styles add the following to the style sheet:

  div.CodeMirror .cm-rm-tag {
      background-color: #7698b3;
      color: white !important;
      padding: 0em 2px;
      border-radius: 5px;
      display: inline;
  }
  

  • On the mobile app, since it is impossible to edit the stylesheet, one could install this Rich Markdown fork (with predefined support for tags and checkboxes) or instead define the name of the tag class to be "name": "searchMatch". This will use the same highlighting style as Joplin search results.

Motivation

• Notes are arguably the atomic blocks of information in Joplin. They can be linked to, tagged, and come up in search results. Joplin is optimized for this, and these features are pretty efficient.
• However, among 100s-1000s of long-form notes (that are hardly "atomic"), it remains challenging to find a small piece of information, idea, or memory.
• Tags can be especially helpful in distinguishing between the content of a text (what it's about) and its form or function (what type of text it is or what purpose it serves). The first is more easily captured by traditional or semantic search. The latter can be conveniently captured by tags, such as #concept, #plan, #memory, #realization, #idea, #review, #bug, #feature, and others.
• I'd like to experiment here with information retrieval from single paragraphs, or outline items, as atomic blocks of information, using inline tags.

Objectives

1. Be able to tag and efficiently search single paragraphs among all notes, using tags and free text.
2. Browse the entire content of these paragraphs without having to open each note.
3. Make this accessible and user-friendly.

[foto16]

Thanks for this new plugin. I tested it and it does convert those # into tags.

One thing I find is that for web clippings with html codes, such at "color:#8c0000," the plugin converts "8c0000" into tags. So I wind up with hundreds of new tags.

Also I couldn't find the option to choose between converting one note or all notes.

[shikuz]

Good point regarding html colors. There are a few additional cases where tag parsing can be improved, I'll work on it.

I should have mentioned that commands are accessible via the Tools-->Tag Navigator. You'll find two separate conversion commands: one for a single note, and one for all notes.

[foto16]

Thanks, got it. One can then use the single note option to avoid the html color issue by only converting ordinary markdown files.

[shikuz]

v0.2.0

a new (inline) tag search system via a dedicated panel (YouTube demo).

updated the original post.

[Medullitus]

Hello,

I installed the plugin. First of all, thank you for the recommendation, and creating a YouTube video for it is truly great.

Unfortunately, the plugin didn't work for my tags. I don't know why, but it shows irrelevant tags with names that don't belong to me. Additionally, the plugin opens not just one but two windows side by side, which is problematic in terms of space. You can find the screenshot attached.

Addition: Also, the box where tags are written is very narrow and cannot be expanded.

[shikuz]

@Medullitus

it shows irrelevant tags with names that don't belong to me

@foto16

I find is that for web clippings with html codes, such at "color:#8c0000," the plugin converts "8c0000" into tags. So I wind up with hundreds of new tags.

I see that this is a recurring problem, so I added to v0.2.1 a setting to ignore HTML notes (it is on by default). Hopefully this will clean up your list of tags. This version should become available to download in the next hour.

However, what I'd like to verify is that even if there are extra tags that you don't recognise, inline tags that appear in your text are detected by the plugin. Example: At the end of this sentence there is an inline-tag. #tag

@Medullitus

the plugin opens not just one but two windows side by side, which is problematic in terms of space.

The panels have different purposes. One for navigating between inline tags in the currently open note (I keep this on by default), and one for searching (which I only open when I want to search for tags). You can hide or show these panels by going to the Tools menu, the Tag Navigator sub-menu, and selecting Toggle inline tags search panel or Toggle inline tags navigation panel.

I don't know of a way in Joplin to set the panel width in advance (this happens with other plugins as well), but you can select from the View menu the option to Change application layout which allows you to organize all Joplin panels, stack them on top of one another, or change their width.

@Medullitus

the box where tags are written is very narrow and cannot be expanded.

Note that you can search for tags if you start typing in the Filter tags... text box, and that the tag list can be scrolled to view all tags.

[Medullitus]

Thanks for the detailed explanations!

[shikuz]

v0.2.2

• new: saved searches
  • you can now save search queries in notes
  • each note can contain a single query
  • once a note is opened, if it has an embedded query the results will appear in the tag search panel
  • you may use notes as "search bookmarks" (for example, using the Favorites plugin), or you may store relevant search queries next to the content of regular notes (e.g., project notes)
  • these saved searches will sync with the notes

Inline Tag Navigator: Saved Search Queries (v0.2.2)

[Isaac]

When using joplin to store many code blocks it's getting difficult in combination with your plugin, isn't?

(all my code with hash tags, all the inline images with markdown # as first char,... everything is found? Is it correct?)

[shikuz]

Fair enough. Personally, I don't mind the extra tags (I use the filter to select them anyway), and prefer being able to find the tags I'm interested in also in code blocks.

You have 3 options in the latest v0.2.3 to handle this:

• Ignore tags that appear in code blocks: this is on by default and will solve your issue.
• Ignore tags that don't appear at least X times in your notes: e.g., if a tag appears only once maybe it's a false detection.
• Use a different definition for tags: e.g., use @ instead of #, or any other format of your choosing.

[shikuz]

v0.3.0

• new: tag by notes
  • search for links or [[wikilinks] to notes that appear in paragraphs
  • you may display backlinks to the current note
• new: tag inheritance
  • child outline items inherit tags from their parent items
• improve: search filters
  • multiple-word filter: search each word independently, or a complete "quoted phrase"
  • search any combination of the note title and the paragraph text
• various style improvements and fixes

[shikuz]

v0.4.0

• new: tag context menu, with Add, Rename & Remove commands (see image below)
• new: loadQuery command for saved search queries
• new: CodeMirror 6 supportv(thanks @personalizedrefriger for the help)
• improve: apply tag inheritance to note mentions / links
• improve: tag parser

[shikuz]

Note that using the Rich Markdown plugin (version ≥ 0.14) you can highlight tags in the Markdown editor. To do so follow the instructions below.

• In Joplin settings --> Rich Markdown --> Advanced Settings --> Custom classes JSON enter:

[{"name": "rm-tag", "regex": "(?<=^|\\s)#([^\\s#]*\\w)"}]

• In Joplin settings --> Appearance --> Custom stylesheet for Joplin-wide app styles add the following to the style sheet:

div.CodeMirror .cm-rm-tag {
    background-color: #7698b3;
    color: white !important;
    padding: 0em 0.2em;
    border-radius: 0.5em;
    display: inline;
}

[shikuz]

v0.5.0

• new: commands to convert Joplin tags to inline tags
• new: auto refresh of inline tags in the currently edited note

[Rando]

Tested and working great! The dedicated search panel can now detect the new inline tags within seconds after being written/created in the editor view. Working on wysiwyg editor, too!

Convert Joplin tags to inline tags, works like a treat, too. And it is clean and real fast, as well.

My only gripe at this point would be how to deal with tag with spaces.
This great plugin seems to be blending the two worlds very well (Joplin tags + inline tags). The only strong difference is, though, that one allows spaces (Joplin) and the other don't (inline)... so when converting Joplin tags with spaces into inline tags, some words remain orphaned of their # and of the word that was before them. This is not a huge deal, but then if you keep the plugin's "convert all inline tags to Joplin tags" feature on, that will effectively create new Joplin tags, too.
That would be the only thing I can point out now... for the rest what a great and useful plugin

[shikuz]

Using spaces within inline tags seems a bit unstable @Rando, but you can try the following experimental settings.

In Settings --> Tag Navigator --> Advanced Settings --> Tag regex enter the following:

(?<=^|\s)(#([^\s#][^#]*\w))

In Settings --> Rich Markdown --> Advanced Settings --> Custom classes JSON enter the following:

[{"name": "rm-tag", "regex": "(?<=^|\\s)(#([^\\s#][^#]*\\w))"}]

[Rando]

I'll wait a bit to test this out as soon as I have a spare machine (or spare user profile)? As I also wanted to test the latest Joplin pre-release. But I'm not sure when will this be. Also, I wanna be more confident with your plugin as it is (stock), once I know very well how stock behaves, I may dig into the experimental stuff, too.

P.s. Any chance that the highlighted #tag CSS trick may one day find a relevant workaround in wysiwyg, too?

[shikuz]

Sorry, the WYSIWYG editor is out of scope for me. But I'll accept a PR for this.

[sinewave-2097]

Alon, this plugin is really great.
For myself, I don't have a lot of screen real estate. Can you add an option that allows a user that has saved a query in a note, to see the results of that query in either the text below the query or in a new note specified by the query? That would bring everything closer to the concept of a "Smart Folder" that instead of showing pages with searched tags, would show the inline text with the tag. I don't think I've seen that feature anywhere and would be something worth shouting about for Joplin.