Obsidian Reading Comments

Plugin allows to create inline html comments while reading markdown notes in Obsidian. Also native %%comments%% supported. Comments could be grouped hierarchically by tags. After commenting job done and finalized, original note with internal links to comments note (in plain obsidian markdown, clean from HTML formatting) could be extracted for integration with rest of the vault.

Obsidian forum thread

Readme на русском

Usage

Insert a comment

Select text in editor, which you want to comment. Open command panel and type Add reading comment for selection ，then press Enter .

It's recommended to assign hotkey for this command panel action.

You can use hierarchical Parent/Child tags in "data-tags" field.

Open comments panel

Open command panel and type Reading Comments Panel.

Extract original note with links to comments note

Open command panel and type Extract original note with links to comments note.

Features

Tag comments hierarchically: Parent/Child/Etc tags supported and grouped by parent in the panel
Search in comments
Navigate to particular comment by click. Native %%comments%% supported.
Extract original note with links to comments note
Remove selected comment by hotkey
Toggle selected comment to block/inline by hotkey
Hide comment until commented text body is hovered
Pick comment color from settings
Dark and light theme support

Showcase

Buy me a coffee (or just star this repo:)

If you enjoy this plugin, feel free to buy me a coffee.

Create comment showcase

Search comments in the panel showcase

Extract original note with links to comments note showcase

Installation

Install from obsidian community plugins store
Or use obsidian BRAT plugin with github link to this repo
Or download latest release file from Release page and put files to your vault/.obsidian/plugins folder. Community plugins should be enabled.

Customization How To

How to add icon next to commented text

Follow obsidian CSS snippets guide to add custom css for vault
Pick icon and copy svg from Lucide or any other source
Add following custom css:

.ob-html-comment:after {
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXN0aWNreS1ub3RlIj48cGF0aCBkPSJNMTUuNSAzSDVhMiAyIDAgMCAwLTIgMnYxNGMwIDEuMS45IDIgMiAyaDE0YTIgMiAwIDAgMCAyLTJWOC41TDE1LjUgM1oiLz48cGF0aCBkPSJNMTUgM3Y2aDYiLz48L3N2Zz4=");
    content: "";
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    background-color: white;
    display: inline-block;
}

Play with width, height and background-color parameters

Implementation details for DIY plugin modifications and pull requests

Comments logic

Most important logic located in src/comments/ConstantsAndUtils.ts When Add reading comment for selection executed, editor selection replaced with the following code:

<div class="ob-html-comment" id="comment-${commentId}" data-tags="[comment,]"><span class="ob-html-comment-body">CommentPlaceholder</span>${htmlEscapedSelection}</div>

Plugin parses text for comments and organizes them in panel hierarchically by tags.

Display logic

All styles and display logic are located in styles.css and src/HtmlCommentsTemplate.vue files.

Thanks

Implementation has been based on the Obsidian Quiet Outline plugin. Basic idea has been taken from the Comments plugin.

Possible evolutioin directions

Multiline comments support (refactoring line by line parsing to multiline).
Tab for comments in whole vault/folder
Tags renaming in the tree, drag&drop, etc tags and comments management

To introduce "nice to have" features, create issue here or better donate with "buy me a coffee" website

"Nice to have" features

tags and comments ordering algo in settings
customize tags placeholder(for now "comment,")

BumbrT/obsidian-reading-comments