[resolved] How to highlight incomplete leaf nodes

I use this to easily visually see what action items are remaining to do, and usually only the leaf nodes are actionable.

I don’t want the native [leaf=true] since I only want to trigger this sometimes, not always.
I’m sure there’s a better way to do this, but here’s mine:

const load = fn => Application("TaskPaper").documents[0].evaluate({script: fn.toString()});

load((editor, options) => {
  const markLeaves = () => {
    editor.outline.undoManager.disableUndoRegistration();
    editor.displayedItems.forEach((item, i) => {
      const isLeaf = !item.hasChildren;
      item.setAttribute('isLeaf', isLeaf.toString());
    });
    editor.outline.undoManager.enableUndoRegistration();
  }

  markLeaves();
  editor.outline.onDidChange(mutation => setTimeout(markLeaves, 0));
});

and the css

// for custom isLeaf implementation (use `leaf` for native)
item[isLeaf=true] {
    background-color: RGB(20,20,20);
}
item[isLeaf=false],item[isLeaf=true][data-done] {
    background-color: black;
}
3 Likes

Added to wiki under CSS and Script-Tags

2 Likes