Hide markdown syntax

v6
1

I want to hide the markdown after I have done editing it.
for example
hi > hi (with strikethrough style)
I wrote a simple code for that (below)

import {
  DecorationSet,
  Decoration,
  ViewUpdate,
  EditorView,
  ViewPlugin,
  MatchDecorator,
} from "@codemirror/view";

const strikeMark = Decoration.mark({
  class: "cm-strikethrough",
  attributes: {"contenteditable": "true"},
});

const strakeTagMatcher = new MatchDecorator({
  regexp: /~{2}(.*)~{2}?/g,
  decorate(add, from, to, match) {
    // console.log(from,to,match);
    add(from, to, strikeMark);
  },
});

export const FoldStrikeTags = ViewPlugin.fromClass(
  class {
    foldedStrikeTags: DecorationSet;
    constructor(view: EditorView) {
      this.foldedStrikeTags = strakeTagMatcher.createDeco(view);
    }
    update(update: ViewUpdate) {
      this.foldedStrikeTags = strakeTagMatcher.updateDeco(
        update,
        this.foldedStrikeTags
      );
    }
  },
  {
    decorations: (instance) => instance.foldedStrikeTags,
    provide: (plugin) =>
      EditorView.atomicRanges.of((view) => {
        return view.plugin(plugin)?.foldedStrikeTags || Decoration.none;
      }),
  }
);

this works as expected but when I press backspace the whole decorated text is being cleared instead of just clearing one character like
~~hi~

2

Well, that’s what atomicRanges does—causes the whole range to be treated as a single thing for the purpose of cursor motion and backspacing. Some systems like this show the marks as text again when the cursor is on/near them.

4

Thanks a lot @marijn for suggestion
solved it by following method.

class StrikeThroughWidget extends WidgetType {
  constructor(readonly visibleVal: string) {
    super();
  }
  eq(other: StrikeThroughWidget) {
    return this.visibleVal === other.visibleVal;
  }
  toDOM(): HTMLElement {
    const span = document.createElement("span");
    span.className = "cm-strikethrough";
    const substring = document.createElement("s");
    substring.innerText = this.visibleVal;
    span.appendChild(substring);
    return span;
  }
  ignoreEvent(): boolean {
    return false;
  }
}

const strikeTagMatcher = new MatchDecorator({
  regexp: /~~(.*?)~~/g,
  decoration(match) {
    const strikeThrough = new StrikeThroughWidget(match[1]);
    return Decoration.widget({ widget: strikeThrough });
  },
});

export const FoldStrikeTags = ViewPlugin.fromClass(
  class {
    foldedStrikeTags: DecorationSet;
    constructor(view: EditorView) {
      this.foldedStrikeTags = strikeTagMatcher.createDeco(view);
    }
    update(update: ViewUpdate) {
      this.foldedStrikeTags = strikeTagMatcher.updateDeco(
        update,
        this.foldedStrikeTags
      );
    }
  },
  {
    decorations: (instance) => instance.foldedStrikeTags,
    provide: (plugin) =>
      EditorView.decorations.of((view) => {
        return view.plugin(plugin)?.foldedStrikeTags || Decoration.none;
      }),
  }
);
5

Hello :wave:! I will ask my question here instead of creating another discussion. I am interested in @devWithKD use case. I do not want to apply the decorator when the cursor on the line. Only applied when the cursor is outside. How to achieve that? I am not sure to understand how to control decorator visibility.

I changed the update method like this:

    update(update: ViewUpdate) {
      // Create new decorators
      this.foldedStrikeTags = strikeTagMatcher.createDeco(update.view);

     // Apply only outside of range
      for (const range of update.state.selection.ranges) {
        this.foldedStrikeTags = this.foldedStrikeTags.update({
          filter(from, to, _value) {
            return to < range.from || from > range.to;
          },
        });
      }
    }