CodeMirror folding: collapse source without losing the hidden text

A support editor contains a long HTML notice: a repeated navigation section above one paragraph that needs correction. Folding the navigation lets the author keep the paragraph in view. Saving must still include the navigation, and a later review must be able to expand it again.

Configure folding alongside the document language

For an existing CodeMirror 6 application editing HTML, use compatible installed packages and add these extensions:

import { html } from '@codemirror/lang-html';
import { keymap } from '@codemirror/view';
import {
  codeFolding,
  foldGutter,
  foldKeymap
} from '@codemirror/language';

const sourceFolding = [
  html(),
  codeFolding(),
  foldGutter(),
  keymap.of(foldKeymap)
];

Include sourceFolding within the editor's existing extensions. Keep its current state, theme, and other editing commands. If the application uses a convenience setup that already includes folding, inspect that setup before adding duplicate configuration. The bundling example shows how CodeMirror packages and an editor setup fit together.

A blank folding gutter does not automatically mean its CSS failed. Check whether the installed language recognizes foldable syntax in the current document. A one-line element can also have no multiline body worth collapsing. Adding ordinary line numbers supplies references, but does not provide a language's folding information.

Start with a small multiline fixture

Use this small notice before investigating the full template:

<nav aria-label="Notice sections">
  <a href="#collection">Collection</a>
  <a href="#returns">Returns</a>
</nav>
<section id="collection">
  <h2>Collect the recorder</h2>
  <p>Ask at the equipment desk.</p>
</section>

In the integrated editor, click an available fold indicator for the navigation. Expect a placeholder in place of the collapsed range. Expand it again and confirm that both links remain present. Repeat with a cursor inside the section and the documented keyboard controls for the supported operating system.

The default foldKeymap includes selected-line fold and unfold commands as well as fold-all and unfold-all commands. Browser and system shortcuts can intercept keys, so retain a visible way to expand content. A mouse-only marker should not become the only discoverable route through a support tool.

Capture the document, including collapsed ranges

With view referring to the initialized editor:

const completeSource = view.state.doc.toString();

That string comes from the document model. Scraping only visible text from the editor DOM can omit collapsed content and source outside the rendered viewport. The CodeMirror gutter guide covers a related boundary: interface numbers and markers do not belong in the copied HTML.

For the fixture, save while the navigation is collapsed. Inspect the captured string for both navigation links and the collection instruction. Reopen that string in the application's normal path. Whether the editor remembers the visual fold state is a separate product decision from retaining the document.

Treat Fold all as a parser-dependent operation

CodeMirror documents that foldAll normally depends on the syntax tree. Immediately after initialization, or in a large document that has not been fully parsed, it may not identify every foldable range. Avoid labeling a partially collapsed result as a complete structural review.

For explicit controls on an existing editor, the command functions accept the view:

import { foldAll, unfoldAll } from '@codemirror/language';

function collapseRecognizedSections() {
  foldAll(view);
}

function showAllSource() {
  unfoldAll(view);
}

Connect these functions to appropriately labeled application buttons. Keep the editor's focus behavior consistent with its other controls. Custom fold services and serialized fold state are available for applications with additional requirements, but ordinary HTML editing should first work with its language support.

Finish the support correction by expanding the source, reading the surrounding section, and saving the complete notice. Folding helped locate the work; the saved paragraph and navigation still need to agree.