Example with Multiple Buffers about dev

[marijnh]

The setState method will do that—but it always forces a full redraw of the document, so it may not be more efficient. (Though I guess buffer changes don't happen with a high enough frequency for that to matter terribly much.)

[marijnh]

At some point, I'll write docs with a number of examples, like these, but that's quite a bit off now because the API is entirely unstable for the near future.

Having multiple views on the same 'buffer' would work quite different in CM6 than it does in 5—the basic idea is to have separate editor states, but to apply changes made in one editor state to the other states that refer to the same document, so that the states' documents stay in sync.

[curran]

Thanks for outlining the basic idea of how it could work. That is very useful.

[curran]

FWIW I got this working. The solution I used keeps multiple views around, and just detaches and reattaches their DOM nodes as the "selected file" changes. The code looks something like this:

...
  let selectedFileName;
  const editorDiv = document.querySelector('#editor');

  const setSelectedFileName = newSelectedFileName => {
    if (selectedFileName) {
      const oldView = viewForFileName(selectedFileName);
      oldView.dom.remove();
    }
    const newView = viewForFileName(newSelectedFileName);
    editorDiv.appendChild(newView.dom);
    newView.dispatch(newView.state.transaction.scrollIntoView());
    selectedFileName = newSelectedFileName;
  };
...

full code example.

This works pretty well, and it's fine for my particular use case of simulating and IDE sort of experience, but there may be a better way to do this. It may be possible to find a solution where the state instances for each "file" are tracked, while a single view instance gets re-used. I'm not sure how one might accomplish this with the new API.

[marijnh]

See codemirror/website@7f7f00e

[curran]

Awesome example! However it lacks the feature of selecting buffers. Is there any example that has this?