feat(code): adjust word wrapping automatically in preview

This commit is contained in:
Elian Doran 2025-05-12 00:23:47 +03:00
parent 4e18798850
commit d79977b9a4
No known key found for this signature in database
2 changed files with 11 additions and 4 deletions

View File

@ -141,6 +141,7 @@ export default class CodeTheme extends OptionsWidget {
} }
this.editor.setText(SAMPLE_CODE); this.editor.setText(SAMPLE_CODE);
this.editor.setMimeType(SAMPLE_MIME); this.editor.setMimeType(SAMPLE_MIME);
this.editor.setLineWrapping(options.codeLineWrapEnabled === "true");
// Load the theme. // Load the theme.
const themeId = options.codeNoteTheme; const themeId = options.codeNoteTheme;

View File

@ -27,11 +27,13 @@ export default class CodeMirror extends EditorView {
private languageCompartment: Compartment; private languageCompartment: Compartment;
private historyCompartment: Compartment; private historyCompartment: Compartment;
private themeCompartment: Compartment; private themeCompartment: Compartment;
private lineWrappingCompartment: Compartment;
constructor(config: EditorConfig) { constructor(config: EditorConfig) {
const languageCompartment = new Compartment(); const languageCompartment = new Compartment();
const historyCompartment = new Compartment(); const historyCompartment = new Compartment();
const themeCompartment = new Compartment(); const themeCompartment = new Compartment();
const lineWrappingCompartment = new Compartment();
let extensions: Extension[] = []; let extensions: Extension[] = [];
@ -42,6 +44,7 @@ export default class CodeMirror extends EditorView {
extensions = [ extensions = [
...extensions, ...extensions,
languageCompartment.of([]), languageCompartment.of([]),
lineWrappingCompartment.of(config.lineWrapping ? EditorView.lineWrapping : []),
themeCompartment.of([ themeCompartment.of([
syntaxHighlighting(defaultHighlightStyle, { fallback: true }) syntaxHighlighting(defaultHighlightStyle, { fallback: true })
]), ]),
@ -74,10 +77,6 @@ export default class CodeMirror extends EditorView {
extensions.push(EditorState.readOnly.of(true)); extensions.push(EditorState.readOnly.of(true));
} }
if (config.lineWrapping) {
extensions.push(EditorView.lineWrapping);
}
super({ super({
parent: config.parent, parent: config.parent,
extensions extensions
@ -86,6 +85,7 @@ export default class CodeMirror extends EditorView {
this.languageCompartment = languageCompartment; this.languageCompartment = languageCompartment;
this.historyCompartment = historyCompartment; this.historyCompartment = historyCompartment;
this.themeCompartment = themeCompartment; this.themeCompartment = themeCompartment;
this.lineWrappingCompartment = lineWrappingCompartment;
} }
#onDocumentUpdated(v: ViewUpdate) { #onDocumentUpdated(v: ViewUpdate) {
@ -115,6 +115,12 @@ export default class CodeMirror extends EditorView {
}); });
} }
setLineWrapping(wrapping: boolean) {
this.dispatch({
effects: [ this.lineWrappingCompartment.reconfigure(wrapping ? EditorView.lineWrapping : []) ]
});
}
/** /**
* Clears the history of undo/redo. Generally useful when changing to a new document. * Clears the history of undo/redo. Generally useful when changing to a new document.
*/ */