CodeMirror 6

import { ViewPlugin, Decoration, WidgetType } from '@codemirror/view';

// Obsidian-style live preview: hide markdown syntax
// when cursor is NOT on the current line
const livePreviewPlugin = ViewPlugin.fromClass(class {
  decorations;
  constructor(view) {
    this.decorations = this.buildDecorations(view);
  }
  update(update) {
    if (update.docChanged || update.selectionSet) {
      this.decorations = this.buildDecorations(update.view);
    }
  }
  buildDecorations(view) {
    const widgets = [];
    const cursorLine = view.state.doc.lineAt(
      view.state.selection.main.head
    ).number;

    // For each line NOT containing the cursor:
    // - Find markdown syntax (**, *, ~~, #, etc.)
    // - Replace markers with Decoration.mark({ class: 'hidden' })
    // - Style the content (bold, italic, heading size, etc.)
    
    return Decoration.set(widgets);
  }
}, { decorations: v => v.decorations });

import { StateField } from '@codemirror/state';

// Custom state field: word counter
const wordCountField = StateField.define<number>({
  create(state) {
    return countWords(state.doc.toString());
  },
  update(value, tr) {
    if (tr.docChanged) {
      return countWords(tr.state.doc.toString());
    }
    return value;
  }
});

// Use it: state.field(wordCountField) → number