Simplest possible example of a decorating editor extension?

KevinRussell · November 12, 2024, 3:19am

I’m putting together a plugin that will apply styles to markdown-like sequences marked with semicolons. Like hel;sub;lo; will show hel_lo, and ;sc;hello; will show hello (imagine that’s in small-caps if this forum really won’t let me style an HTML span tag).

I’ve got this working in reading mode (thanks to the sample plugin!) and I’m ready to tackle live-preview mode. I understand I’ll probably have to write an editor extension that applies a decoration. Is there some extremely simple plugin that does something similar to this that I can shamelessly stea… I mean… draw inspiration from?

I’m aware of Nothingislost’s obsidian-cm6-attributes. It seems to do at least three times more than I want to, and it looks like it would take fully mastering Code Mirror to figure out which two-thirds I could ignore. Is there an even simpler example out there somewhere? If not, are there any gotchas I should keep in mind when trying to wrap my head around obsidian-cm6-attributes (like maybe recent Obsidian changes that have broken it)?

Thanks!

TfTHacker · December 1, 2024, 5:09am

CM6 is a beast. I am not sure it can be made simple. I think what you want is to use the Regex parser. Here is how I do it in SNW:

github.com

TfTHacker/obsidian42-strange-new-worlds/blob/master/src/view-extensions/references-cm6.ts

/**
 * Codemirror extension - hook into the CM editor
 * CM will call update as the doc updates.
 */
import { Decoration, type DecorationSet, type EditorView, MatchDecorator, ViewPlugin, type ViewUpdate, WidgetType } from "@codemirror/view";
import { editorInfoField, stripHeading } from "obsidian";
import { getSNWCacheByFile, parseLinkTextToFullPath } from "src/indexer";
import type SNWPlugin from "src/main";
import type { TransformedCachedItem } from "../types";
import { htmlDecorationForReferencesElement } from "./htmlDecorations";

let plugin: SNWPlugin;

export function setPluginVariableForCM6InlineReferences(snwPlugin: SNWPlugin) {
	plugin = snwPlugin;
}

/**
 * CM widget for renderinged matched ranges of references. This allows us to provide our UX for matches.
 */

This file has been truncated. show original

KevinRussell · December 4, 2024, 6:18am

Thanks for this! I’m still not very optimistic for my success, but your pointers will at least make my efforts over Christmas less frustrating.