joplin-plugin-tag-navigator 2.11.0 → 2.11.2

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)
@@ -484,21 +484,24 @@ 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
 
-Tags are displayed on three surfaces: the search panel, the Markdown preview and the Markdown editor. Every rendered tag carries a shared class and a surface-specific one, each in a plain and a per-prefix form:
+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: 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`.
+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 examples for tag styling</summary>
+<summary>CSS examples for tag and checkbox styling</summary>
 
 Style every tag on every surface:
 
@@ -540,6 +543,77 @@ Style one surface differently from the others. Avoid `display: inline-block` in
 }
 ```
 
+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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "joplin-plugin-tag-navigator",
-  "version": "2.11.0",
+  "version": "2.11.2",
   "scripts": {
     "test": "jest",
     "dist": "webpack --env joplin-plugin-config=buildMain && webpack --env joplin-plugin-config=buildExtraScripts && webpack --env joplin-plugin-config=createArchive",

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

@@ -6,7 +6,7 @@
 		"desktop",
 		"mobile"
 	],
-	"version": "2.11.0",
+	"version": "2.11.2",
 	"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:d91e686d0c4c180e6604b6c84ebd3584ff5b5ac4ecc660e4f4cb2075cf5f51e1",
-	"_publish_commit": "main:d741a25c27887c7c2091fd1c5076001f878406fb"
+	"_publish_hash": "sha256:aa96e0f81845ba90132e496950bd2b674aa5cd72567c8c5aa9d693e617f562b0",
+	"_publish_commit": "main:018404cd5cf9fbfb514089bbe593f89c56ee4b80"
 }