How to remove existing decorations

v6
1

I’m new to CM6 and I’m sorry I might ask some low-level questions

I want to implement such a feature
After the user selects part of the doc
Press mod+shift+h to highlight this doc

If this part of doc has been fully highlighted
Press the shortcut key to unhighlight

If this part of the doc still has unhighlighted parts
When the shortcut key is pressed, the unhighlighted part is highlighted

I follow these official cases:
CodeMirror Decoration Example
CodeMirror 5 to 6 Migration Guide

and this topic:
Highlight line function - v6 - discuss.CodeMirror

this is my current code:

import { basicSetup } from 'codemirror';
import { EditorView, keymap, Decoration } from '@codemirror/view';
import { EditorState, StateEffect, StateField } from '@codemirror/state';

const highlightLineStyle = Decoration.line({
  attributes: { style: 'background-color: #fffb8f' },
});

const addHighlightLine = StateEffect.define();

const highlightLineField = StateField.define({
  create() {
    return Decoration.none;
  },
  update(value, tr) {
    value = value.map(tr.changes);
    const highlightEffects = tr.effects.filter((e) => e.is(addHighlightLine));
    highlightEffects.forEach((effect) => {
      const { startLineNumber, endLineNumber } = effect.value;
      const { doc } = tr.state;
      for (let ln = startLineNumber; ln <= endLineNumber; ln++) {
        const lineTemp = doc.line(ln);
        const lineTempFrom = lineTemp.from;
        value = value.update({
          add: [highlightLineStyle.range(lineTempFrom)],
          //   filter: (from, to, value) => {
          //     // How do I get the currently highlighted line from value here
          //     // return isFullyHighlighted ? false : true;
          //   },
        });
      }
    });
    return value;
  },
  provide: (f) => EditorView.decorations.from(f),
});

function highlightSelectionLine(target) {
  const { state } = target;
  const { doc } = state;
  const { ranges } = state.selection;

  const effects = ranges.map(({ from, to }) => {
    const startLine = doc.lineAt(from);
    const endLine = doc.lineAt(to);
    return addHighlightLine.of({
      startLineNumber: startLine.number,
      endLineNumber: endLine.number,
    });
  });

  if (!effects.length) return false;

  if (!target.state.field(highlightLineField, false)) {
    effects.push(StateEffect.appendConfig.of([highlightLineField]));
  }

  target.dispatch({ effects });
  return true;
}

// part code
new EditorView({
  state: EditorState.create({
    doc: 'Hello World\n231312\n123123123\n123123132',
    extensions: [
      basicSetup,
      EditorView.lineWrapping,
      keymap.of([
        {
          key: 'Shift-Mod-h',
          run: highlightSelectionLine,
        },
      ]),
    ],
  }),
  parent: document.body,
});

demo url:
highlight selected lines

2

The editor only shows decorations you provide it, in your case through the value of your state field. Updating that by removing decorations from the range set will make them disappear.

3

Thanks for your quick reply.
Can you provide some short code snippets.