update extension onload

v6
1

hello, i got the hihlighting function

const backgroundEffect = (view: ViewUpdate, problemTree?: TriggerTargetProblem): void => {
    if (!view.docChanged || !view.viewportChanged) {
        return;
    }
    const effects: StateEffect<BadFunctionDecoration>[] = [];
    const doc = view.state.doc.toString();
    const syntax = syntaxTree(view.state);

    syntax.iterate({
        enter(node) {
            if (node.name !== "FunctionName" || !problemTree) {
                return;
            }
            const from = node.from;
            const to = node.to;
            const elementString = doc.substring(from, to);

            const badFunction = defineFunction(elementString, problemTree);

            if (!badFunction) {
                return;
            }

            effects.push(
                addBackgroundDecoration.of({
                    from,
                    to,
                    problemTree,
                })
            );
            return false;
        },
    });
    if (effects.length > 0) {
        view.view.dispatch({ effects });
    }
};

and this is how its implemented

 EditorView.updateListener.of((view) => backgroundEffect(view, problemTree)),

but the problem is that highlighting is not applied when code is firstly loaded

image
image1020×184 4.7 KB

but it works fine when doc is changed

image
image1035×181 5.07 KB

can’t realise how to firstly update the state with givven code

2

It also looks like it won’t delete your decorations when the document changes further. Don’t use an update listener for this—put it into a view plugin as shown in the decoration example.

3

no, it deletes decoration when the func is changed

4

may be its possible to initialy update it in statefield?

const backgroundDecorationField = (problemTree?: TriggerTargetProblem) =>
    StateField.define<DecorationSet>({
        create() {
            return Decoration.none;
        },
        update(backgroundDecoration, tr) {
            let backgroundDecorationsRangeSet = backgroundDecoration.map(tr.changes);
            const doc = tr.state.doc.toString();
            const marks: Range<Decoration>[] = [];

            tr.effects.forEach((effect) => {
                if (!effect.is(addBackgroundDecoration)) {
                    return;
                }

                const { from, to } = effect.value;
                const funcType = defineFunction(doc.substring(from, to), problemTree)?.type;
                const mark = Decoration.mark({
                    inclusiveEnd: true,
                    class: funcType === "bad" ? "redFunction" : "yellowFunction",
                }).range(from, to);

                marks.push(mark);
            });

            backgroundDecorationsRangeSet = backgroundDecorationsRangeSet.update({
                add: marks,
                filter(from, to) {
                    const elementString = doc.substring(from, to);
                    return defineFunction(elementString, problemTree) ? true : false;
                },
            });

            return backgroundDecorationsRangeSet;
        },
        provide: (f) => EditorView.decorations.from(f),
    });
5

thank you a lot!!