Add support for stylable tags (#598)

docs/features/tags.md

@@ -14,6 +14,9 @@ There are two ways of creating a tag:
 It's possible to navigate tags via the Tag Explorer panel.
 In the future it will be possible to explore tags via the graph as well.
 
+## Styling tags
+Inline tags can be styled using custom CSS with the selector `.foam-tag`.
+
 ## An alternative to tags
 
 Given the power of backlinks, some people prefer to use them also as tags.

package.json

@@ -40,5 +40,6 @@
     "semi": true,
     "singleQuote": true,
     "trailingComma": "es5"
-  }
+  },
+  "dependencies": {}
 }

packages/foam-vscode/src/features/preview-navigation.spec.ts

@@ -1,7 +1,10 @@
 import MarkdownIt from 'markdown-it';
 import { FoamWorkspace, URI } from 'foam-core';
 import { createTestNote } from '../test/test-utils';
-import { markdownItWithFoamLinks } from './preview-navigation';
+import {
+  markdownItWithFoamLinks,
+  markdownItWithFoamTags,
+} from './preview-navigation';
 
 describe('Link generation in preview', () => {
   const noteA = createTestNote({
@@ -32,3 +35,18 @@ describe('Link generation in preview', () => {
     );
   });
 });
+
+describe('Stylable tag generation in preview', () => {
+  const noteB = createTestNote({
+    uri: 'note-b.md',
+    title: 'Note B',
+  });
+  const ws = new FoamWorkspace().set(noteB);
+  const md = markdownItWithFoamTags(MarkdownIt(), ws);
+
+  it('transforms a string containing multiple tags to a stylable html element', () => {
+    expect(md.render(`Lorem #ipsum dolor #sit`)).toMatch(
+      `<p>Lorem <span class='foam-tag'>#ipsum</span> dolor <span class='foam-tag'>#sit</span></p>`
+    );
+  });
+});

packages/foam-vscode/src/features/preview-navigation.ts

@@ -2,6 +2,7 @@ import * as vscode from 'vscode';
 import markdownItRegex from 'markdown-it-regex';
 import { Foam, FoamWorkspace, Logger, URI } from 'foam-core';
 import { FoamFeature } from '../types';
+import fp from 'lodash/fp';
 
 const feature: FoamFeature = {
   activate: async (
@@ -11,8 +12,13 @@ const feature: FoamFeature = {
     const foam = await foamPromise;
 
     return {
-      extendMarkdownIt: (md: markdownit) =>
-        markdownItWithFoamLinks(md, foam.workspace),
+      extendMarkdownIt: (md: markdownit) => {
+        const markdownItExtends = fp.compose(
+          markdownItWithFoamLinks,
+          markdownItWithFoamTags
+        );
+        return markdownItExtends(md, foam.workspace);
+      },
     };
   },
 };
@@ -47,4 +53,31 @@ export const markdownItWithFoamLinks = (
 const getPlaceholderLink = (content: string) =>
   `<a class='foam-placeholder-link' title="Link to non-existing resource" href="javascript:void(0);">${content}</a>`;
 
+export const markdownItWithFoamTags = (
+  md: markdownit,
+  workspace: FoamWorkspace
+) => {
+  return md.use(markdownItRegex, {
+    name: 'foam-tags',
+    regex: /(#\w+)/,
+    replace: (tag: string) => {
+      try {
+        const resource = workspace.find(tag);
+        if (resource == null) {
+          return getFoamTag(tag);
+        }
+      } catch (e) {
+        Logger.error(
+          `Error while creating link for ${tag} in Preview panel`,
+          e
+        );
+        return getFoamTag(tag);
+      }
+    },
+  });
+};
+
+const getFoamTag = (content: string) =>
+  `<span class='foam-tag'>${content}</span>`;
+
 export default feature;

packages/foam-vscode/static/preview/style.css

@@ -1,8 +1,14 @@
 .foam-placeholder-link {
-  color: red;
+  color: var(--vscode-editorWarning-foreground);
   cursor: default;
 }
 
 .foam-note-link,
 .foam-attachment-link {
+  color: var(--vscode-textLink-foreground);
+
 }
+
+.foam-tag {
+  color: var(--vscode-editorLineNumber-foreground)
+}