How to programatically add gutter markers (breakpoints)?

v6
1

Hi, firstly - thanks for a fantastic library!

I need some help, please, with creating gutters markers programmatically. This is more of a question and not a bug. I’ve read through many of the discussions here but couldn’t come up with a solution.

I’m building a debugger on top of code-mirror, and I’m following this example to implement breakpoints: CodeMirror Gutter Example.

When the user clicks the gutters, everything works well.

What I’m trying to do without success is to show breakpoints programmatically from my code without the user clicking the gutter, mainly when a user moves between files.

I have tried many things like dispatching an effect or creating a rangeset and updating the state field.

Here’s where I am in this: quizzical-field-xw51uk - CodeSandbox

The goal in the codesandobx is that the “add” button will show a breakpoint in the second line.

So TL;DR, my question is: how would one add such a gutter marker from the code without the user clicking?

Would love to add it to the docs as a PR after solving it.

Thanks again!

2

The toggleBreakpoint function in the example does pretty much what you need to do here — dispatch a transaction with a breakpointEffect that adds the breakpoint.

3

Thanks for the answer @marijn!

I’m probably missing something, but isn’t that what I’m doing in the addBreakpoint function on line 75?

  const addBreakpoint = () => {
    const effect = breakpointEffect.of({
      pos: 2,
      on: false
    });

    editorRef?.current?.view?.dispatch({
      effects: effect
    });
  };

from my understanding - this code is dispatching a transaction with the breakpointEffect, that adds a breakpoint at pos 2, as u said.

What else is required for the breakpoint to be shown?
if it’s all that required - it might be an issue related to react or something like that.

4

Nothing, that should be all. I didn’t take the time to debug your code, but check if all of those ?-dereferenced values are non-null maybe.

5

perfect, then it’s probably something with the react integration. appreciate your quick responses! thank you very much

6

Hey, hello, may I ask if your project has added renderEmptyElements: true, Is it normal to add or delete breakpoints。

image
image845×254 25.3 KB

I mentioned above that the code in codesandbox sets renderEmptyElements to true to cancel the breakpoint exception. I canceled the third but actually canceled the first
a

My local code will also have such an exception, I am not sure if this is a codemirror problem?