BookStack/resources/js/code/setups.js
Dan Brown 924f517217
Updated code view block line highlighting to only show on focus
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.
2023-05-22 14:05:07 +01:00

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,
];
}