joplin-plugin-tag-navigator 2.10.7 → 2.11.1

package/README.md

@@ -54,7 +54,7 @@ This plugin adds inline tag support (such as #inline-tag) to [Joplin](https://jo
     - Click a global tag to search for it, Cmd/Ctrl+click to add it to the current query, or Shift+click to insert it into the editor.
 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). ([tips](#converting-joplin-tags))
-6. It renders inline tags and front matter in the Markdown preview, and front matter in the Markdown editor. ([tips](#styling-inline-tags))
+6. It renders inline tags and front matter in both the Markdown preview and the Markdown editor. ([tips](#styling-inline-tags-and-checkboxes))
 
 After installing the plugin, check the commands listed under `Tag Navigator` in the `Tools` menu, as well as the corresponding settings section.
 
@@ -106,7 +106,7 @@ After installing the plugin, check the commands listed under `Tag Navigator` in
 - [Filtering results](#filtering-results)
 - [Context expansion](#context-expansion)
 - [Colour tags](#colour-tags)
-- [Styling inline tags](#styling-inline-tags)
+- [Styling inline tags and checkboxes](#styling-inline-tags-and-checkboxes)
 
 ### Advanced
 - [Inline TODOs](#inline-todos)
@@ -137,6 +137,7 @@ After installing the plugin, check the commands listed under `Tag Navigator` in
 - When the `Tag inheritance` setting is enabled (by default), tags are automatically inherited in three ways:
     1. **Outline/indentation inheritance**: Tags are inherited from parent items to their children based on indentation levels.
         - Example: If `#project/website` appears on a parent line, all indented child lines will also be tagged with `#project/website`
+        - Exception: four or more spaces of indent after a blank line, outside a list, is a Markdown code block. Those lines are skipped entirely when `Ignore code blocks` is on, so they neither carry nor inherit tags.
     2. **Heading inheritance**: Tags are inherited from headings to all content under that heading.
         - Example: If `## Meeting Notes #urgent` appears as a heading, all other *tagged lines* under that heading will also be tagged with `#urgent`
     3. **Top of the note inheritance**: Tags are inherited from the first 2 lines of the note.
@@ -483,35 +484,137 @@ Context expansion lets you reveal surrounding lines around search results to see
 
 ![colour tags](img/tag-navigator-colours.png)
 
-### Styling inline tags
+### Styling inline tags and checkboxes
 
-The Markdown preview pane and the Tag Navigator search panel wrap every matched tag in the class `itags-search-renderedTag` and, when the token starts with `#`, `@`, `+`, `//`, or any other character, add `itags-search-renderedTag--hash`, `--at`, `--plus`, `--slash`, `--<other char>`. You may modify their appearance in `userstyle.css` (for Markdown preview), or in the `Search: Panel style` setting (for the plugin's search panel).
+Tags are displayed on three surfaces: the search panel, the Markdown preview and the Markdown editor. Every rendered tag, and every task marker, carries a shared class and a surface-specific one, each in a plain form and one per prefix or state:
+
+| Class | Matches |
+| ----- | ------- |
+| `itags-tag`, `itags-tag--hash` / `--at` / `--plus` / `--slash` | every surface |
+| `itags-search-renderedTag` (panel, preview), `itags-editor-tag` (editor), each with the same prefix suffixes | one surface |
+| `itags-checkbox`, `itags-checkbox--open` / `--ongoing` / `--in-question` / `--blocked` / `--done` / `--obsolete` | task markers, panel and editor |
+
+The `Inline tags and checkboxes: Style` setting takes custom CSS and applies it to all three. **This is the only way to restyle tags on mobile**, where `userstyle.css` cannot be edited. Your rules override the bundled default without needing `!important`.
+
+`Inline checkboxes: Highlight in editor` colours the six task states in the editor. Joplin draws `[ ]` and `[x]` as checkboxes of its own, so those two keep their usual look and the other four, which Joplin does not recognise, get the state colour.
+
+`Search: Panel style` and `Navigation: Panel style` style those panels as a whole rather than tags.
 
 <details>
-<summary>CSS example for tag styling</summary>
+<summary>CSS examples for tag and checkbox styling</summary>
+
+Style every tag on every surface:
 
 ```css
-/* optional: specify different sub-styles for each type of tag */
-.itags-search-renderedTag {
-	background-color: #a576b3ff;
-} /* global style */
+.itags-tag {
+	background-color: #a576b3;
+}
+```
 
-.itags-search-renderedTag--at {
+Give each type of tag its own colour, everywhere:
+
+```css
+.itags-tag--at {
 	background-color: #6fae4a;
-} /* type-specific style */
+}
 
-.itags-search-renderedTag--plus {
+.itags-tag--plus {
 	background-color: #ae4a6f;
 }
 
-.itags-search-renderedTag--slash {
+.itags-tag--slash {
 	background-color: #4a6fae;
 }
 ```
 
-</details>
+Style one surface differently from the others. Avoid `display: inline-block` in the editor, where it disturbs caret placement:
+
+```css
+/* preview and panel only */
+.itags-search-renderedTag {
+	display: inline-block;
+	margin: 2px 0;
+}
 
-For the Markdown editor see Rich Markdown in the [Companion plugins](#companion-plugins) section.
+/* editor only */
+.itags-editor-tag {
+	background-color: transparent;
+	border-bottom: 2px solid #7698b3;
+}
+```
+
+Fonts in the editor need one extra step. Joplin resets `font-family` on every span there, which outranks a bare class, so lead with `span`:
+
+```css
+span.itags-checkbox {
+	font-family: sans-serif;
+}
+```
+
+Recolour a task state in the panel and the editor at once:
+
+```css
+.itags-checkbox--blocked {
+	color: #e22d2d;
+}
+```
+
+In the panel the marker is a coloured square, so set `background-color` there:
+
+```css
+.itags-search-checkbox--blocked {
+	background-color: #e22d2d;
+}
+```
+
+Draw the checkboxes Joplin renders for `[ ]` and `[x]` as text markers too, so that all six states match. This one reaches into Joplin's own editor markup, so it may need adjusting after a Joplin update, and it is left to you rather than bundled for that reason. The checkboxes stay clickable:
+
+```css
+.cm-editor .cm-ext-checkbox-toggle > input[type="checkbox"] {
+	appearance: none;
+	-webkit-appearance: none;
+	width: auto;
+	height: auto;
+	margin: 0;
+	font-family: monospace;
+	font-weight: bold;
+	color: #4178be;
+}
+
+.cm-editor .cm-ext-checkbox-toggle > input[type="checkbox"]::after {
+	content: "[ ]";
+}
+
+.cm-editor .cm-ext-checkbox-toggle > input[type="checkbox"]:checked {
+	color: #64a073;
+}
+
+.cm-editor .cm-ext-checkbox-toggle > input[type="checkbox"]:checked::after {
+	content: "[x]";
+}
+
+/* Joplin's checkbox stands in for the list bullet as well, so hide the bullet
+   on the lines it does not replace. */
+.cm-editor .cm-line:has(.itags-editor-checkbox) .cm-bullet-list-marker {
+	display: none;
+}
+
+/* The other states keep the space that follows their bullet in the text, so
+   the checkbox needs one too. It goes on the container, not in the monospace
+   marker, so that both spaces are the same width. */
+.cm-editor .cm-ext-checkbox-toggle::before {
+	content: " ";
+}
+
+/* Joplin reads [@] and its siblings as links, and underlines them. */
+.cm-editor .itags-editor-checkbox * {
+	text-decoration: none;
+}
+```
+
+The bullet rule needs `:has()`, which desktop Joplin and iOS 15.4 or later have. Without it the markers still get their colour, they just do not line up.
+
+</details>
 
 ### Keyboard shortcuts
 
@@ -562,28 +665,6 @@ For the Markdown editor see Rich Markdown in the [Companion plugins](#companion-
 
 - The excellent [Inline Tags](https://github.com/roman-r-m/joplin-inline-tags-plugin) plugin can autocomplete tags while typing.
 - Use [YesYouKan](https://github.com/joplin/plugin-yesyoukan) to visualize kanban views generated by Tag Navigator as interactive kanban boards.
-- You can highlight tags in the Markdown editor using [Rich Markdown](https://github.com/CalebJohn/joplin-rich-markdown) (version ≥ 0.14).
-
-<details>
-<summary>Rich Markdown setup instructions</summary>
-
-- In `Joplin settings --> Rich Markdown --> Advanced Settings --> Custom classes JSON` enter:
-```
-[{"name": "rm-tag", "regex": "(?<=^|\\s)#([^\\s#'\",.()\\[\\]:;\\?\\\\]+)"}]
-```
-- 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](https://github.com/alondmnt/joplin-rich-markdown/releases/tag/v0.15-mobile-style-v4) (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.
-
-</details>
 
 ## Motivation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "joplin-plugin-tag-navigator",
-  "version": "2.10.7",
+  "version": "2.11.1",
   "scripts": {
     "test": "jest",
     "dist": "webpack --env joplin-plugin-config=buildMain && webpack --env joplin-plugin-config=buildExtraScripts && webpack --env joplin-plugin-config=createArchive",
@@ -16,6 +16,7 @@
     "publish"
   ],
   "devDependencies": {
+    "@codemirror/lang-markdown": "^6.5.2",
     "@codemirror/view": "^6.26.0",
     "@joplin/lib": "~2.9",
     "@types/jest": "^29.5.14",

package/publish/joplin.plugin.alondmnt.tag-navigator.json

@@ -6,7 +6,7 @@
 		"desktop",
 		"mobile"
 	],
-	"version": "2.10.7",
+	"version": "2.11.1",
 	"name": "Inline Tag Navigator",
 	"description": "Type inline tags or frontmatter in the note editor. View your tagged paragraphs and tasks / TODOs in a search panel, or in a generated note / kanban. Build a table view / database from notes and tags. Convert between Obsidian tags and Joplin tags.",
 	"author": "Alon Diament",
@@ -24,6 +24,6 @@
 	],
 	"screenshots": [],
 	"icons": {},
-	"_publish_hash": "sha256:4c7b1ed686ab21381e3d18705952a0894a335b1c5b5e40d9a66080e3b89ee887",
-	"_publish_commit": "main:f70997bfa650df7a088f43371511248861f07e7b"
+	"_publish_hash": "sha256:bdcf0e9a0b0ac540ec81cde64c1fbfecb493a46a5b3866b3b13fb54d32bf2614",
+	"_publish_commit": "main:03a803885769c808485b6bc2188bc09df48bc0ed"
 }