I am so utterly confused by the Obsidian developer docs for CodeMirror state fields. Editor extensions tells you to make a StateField with a number data type. Then the next part, Decorations tells you that the only way to actually change the appearance is by creating a StateField with the DecorationSet data type. How do I create a StateField with my own data type that then provides decorations?
Can these docs be improved to explain this step???
The docs have a GitHub repo (linked at the bottom of the homepage) where you can file an issue about this.
2 Likes
ush
September 13, 2023, 4:59am
3
The developer documentation recommends reading CodeMirror’s system guide:
https://codemirror.net/docs/guide/
Long but super useful.
Here’s an example of creating a StateField with a custom data type , and then using this StateField to define another extension that provides decoration .
import { App, Editor, MarkdownFileInfo, MarkdownPostProcessorContext, MarkdownRenderChild, MarkdownView, TFile, editorInfoField } from 'obsidian';
import { RangeSetBuilder, Transaction, StateField, EditorState } from '@codemirror/state';
import { SyntaxNodeRef } from '@lezer/common';
import MathBooster from './main';
import { Decoration, DecorationSet, EditorView, PluginValue, ViewPlugin, ViewUpdate, WidgetType } from '@codemirror/view';
import { foldService, syntaxTree } from '@codemirror/language';
import { hasOverlap, nodeText, resolveSettings, renderMarkdown } from './utils';
import { Profile } from './settings/profile';
export const INLINE_CODE = "inline-code";
export const LINK_BEGIN = "formatting-link_formatting-link-start";
export const LINK = "hmd-internal-link";
export const LINK_END = "formatting-link_formatting-link-end";
function makeProofClasses(which: "begin" | "end", profile: Profile) {
return ["math-booster-" + which + "-proof",
...profile.meta.tags.map((tag) => "math-booster-" + which + "-proof-" + tag)];
show original