How to create custom CodeMirror block widget?

Dear fellow Obsidianers,

I’m working on my first (non-toy) plugin…

Is there a way to create a custom block (not inline) widget in Obsidian’s CodeMirror v6, as documented here?

I get the following error:

RangeError: Decorations that replace line breaks may not be specified via plugins

I guess this is a restriction due to Obsidian’s implementation details, and there is no reasonable workaround. Or is there?

I know about createCodeBlockPostProcessor, which can be used to show block HTML elements, but I don’t want to be restricted to markdown code fences. Also, I don’t want to use registerMarkdownPostProcessor to show the widget only in preview mode. I want it to work in edit / live preview mode.

If there is no way to achieve block decorations/widgets with Obsidian’s CodeMirror, is there a way to replace the editor with a custom CodeMirror instance?

I’m still new to Obsidian and its plugin system. Any advice is welcome. Thanks in advance!

4 Likes

Hi Saluto, I got the same Error and I am facing the same Issue. Have you found any solution since then? Thanks and looking forward to your update

It’s not an Obsidian-specific issue.

Here, “plugin” does NOT mean an Obsidian plugin, but CodeMirror’s view plugin.
A block (non-inline) widget affects the vertical layout structure, so it cannot be handled by a view plugin.

You can use a state field to provide block (non-inline) decorations; see here for instructions.

See also:

According to CodeMirror Reference Manual :

Decorations can be provided in two ways—directly, or via a function that takes an editor view.

Only decoration sets provided directly are allowed to influence the editor’s vertical layout structure. The ones provided as functions are called after the new viewport has been computed, and thus must not introduce block widgets or replacing decorations that cover line breaks.