Custom Syntax bold tags {{app.store.value}}

1

Looking for guidance for migrating to v6.

We’re looking to implement a custom version of liquid template language.

We want to create a bold effect if 2 open and 2 closed brackets are found. So that {{app.store.value}} is bold. We then want to add a color coding effect for the dot notated code. We’ll then add autocomplete to help write the code… last we want to add an on hover for the sections of dot notation app , store , value that highlights that block of dot notation.

So far we’re struggling with the best and most efficient way to add the bolding decorations and have not found a good example we can review with these features.

Any reecommendations? Here is the non-working code we’re iterating on.

import { EditorState, StateField } from "@codemirror/state";
import { Decoration, EditorView, DecorationSet } from "@codemirror/view";
import { RangeSetBuilder } from "@codemirror/rangeset";

// Define the bold decoration
const boldDecoration = Decoration.mark({ class: "bold" });

// Define a state field to manage bold decorations
export const boldField = StateField.define<DecorationSet>({
  create(state) {
    const builder = new RangeSetBuilder<Decoration>();

    // Iterate over the entire document and look for {{...}} patterns
    state.doc.forEach((line, pos) => {
      const regex = /{{(.*?)}}/g;
      let match;
      while ((match = regex.exec(line))) {
        const from = pos + match.index;
        const to = from + match[0].length;
        builder.add(from, to, boldDecoration);
      }
    });

    return builder.finish();
  },
  update(boldRanges, tr) {
    if (!tr.docChanged) return boldRanges.map(tr.changes);

    const builder = new RangeSetBuilder<Decoration>();

    // Similar iteration and decoration as in the create method
    tr.state.doc.forEach((line, pos) => {
      const regex = /{{(.*?)}}/g;
      let match;
      while ((match = regex.exec(line))) {
        const from = pos + match.index;
        const to = from + match[0].length;
        builder.add(from, to, boldDecoration);
      }
    });

    return builder.finish();
  },
  provide: (f) => EditorView.decorations.from(f),
});

export const boldTheme = EditorView.baseTheme({
  ".bold": { fontWeight: "bold" },
});
1 Like