924f517217
The default 1st line highlighting confused users when existing on read-only blocks as it was not clear this represented the active line. This changes the highlight to only show when the block is focused upon.
86 lines
2.1 KiB
JavaScript
86 lines
2.1 KiB
JavaScript
import {
|
|
EditorView, keymap, drawSelection, highlightActiveLine, dropCursor,
|
|
rectangularSelection, lineNumbers, highlightActiveLineGutter,
|
|
} from '@codemirror/view';
|
|
import {bracketMatching} from '@codemirror/language';
|
|
import {
|
|
defaultKeymap, history, historyKeymap, indentWithTab,
|
|
} from '@codemirror/commands';
|
|
import {Compartment, EditorState} from '@codemirror/state';
|
|
import {getTheme} from './themes';
|
|
|
|
/**
|
|
* @param {Element} parentEl
|
|
* @return {(Extension[]|{extension: Extension}|readonly Extension[])[]}
|
|
*/
|
|
function common(parentEl) {
|
|
return [
|
|
getTheme(parentEl),
|
|
lineNumbers(),
|
|
drawSelection(),
|
|
dropCursor(),
|
|
bracketMatching(),
|
|
rectangularSelection(),
|
|
];
|
|
}
|
|
|
|
/**
|
|
* @returns {({extension: Extension}|readonly Extension[])[]}
|
|
*/
|
|
function getDynamicActiveLineHighlighter() {
|
|
const highlightingCompartment = new Compartment();
|
|
const domEvents = {
|
|
focus(event, view) {
|
|
view.dispatch({
|
|
effects: highlightingCompartment.reconfigure([
|
|
highlightActiveLineGutter(),
|
|
highlightActiveLine(),
|
|
]),
|
|
});
|
|
},
|
|
blur(event, view) {
|
|
view.dispatch({
|
|
effects: highlightingCompartment.reconfigure([]),
|
|
});
|
|
},
|
|
};
|
|
|
|
return [
|
|
highlightingCompartment.of([]),
|
|
EditorView.domEventHandlers(domEvents),
|
|
];
|
|
}
|
|
|
|
/**
|
|
* @param {Element} parentEl
|
|
* @return {*[]}
|
|
*/
|
|
export function viewerExtensions(parentEl) {
|
|
return [
|
|
...common(parentEl),
|
|
getDynamicActiveLineHighlighter(),
|
|
keymap.of([
|
|
...defaultKeymap,
|
|
]),
|
|
EditorState.readOnly.of(true),
|
|
];
|
|
}
|
|
|
|
/**
|
|
* @param {Element} parentEl
|
|
* @return {*[]}
|
|
*/
|
|
export function editorExtensions(parentEl) {
|
|
return [
|
|
...common(parentEl),
|
|
highlightActiveLineGutter(),
|
|
highlightActiveLine(),
|
|
history(),
|
|
keymap.of([
|
|
...defaultKeymap,
|
|
...historyKeymap,
|
|
indentWithTab,
|
|
]),
|
|
EditorView.lineWrapping,
|
|
];
|
|
}
|