| 177 | } |
| 178 | |
| 179 | onload(): void { |
| 180 | const isDark = this.ownerDoc.body.classList.contains("theme-dark"); |
| 181 | const langExt = LANGUAGE_PACKAGES[this.extension] || []; |
| 182 | |
| 183 | const state = EditorState.create({ |
| 184 | doc: this.content, |
| 185 | extensions: [ |
| 186 | this.languageCompartment.of(langExt), |
| 187 | this.themeCompartment.of(syntaxHighlighting(isDark ? darkHighlightStyle : lightHighlightStyle)), |
| 188 | readOnlyTheme, |
| 189 | lineNumbers({ formatNumber: (n) => String(n + this.startLine - 1) }), |
| 190 | EditorView.editable.of(false), |
| 191 | ], |
| 192 | }); |
| 193 | |
| 194 | this.editorView = new EditorView({ |
| 195 | state, |
| 196 | parent: this.containerEl, |
| 197 | }); |
| 198 | |
| 199 | // Listen for theme changes |
| 200 | this.themeEventRef = this.plugin.app.workspace.on("css-change", () => { |
| 201 | const isDark = this.ownerDoc.body.classList.contains("theme-dark"); |
| 202 | if (this.editorView) { |
| 203 | this.editorView.dispatch({ |
| 204 | effects: this.themeCompartment.reconfigure(syntaxHighlighting(isDark ? darkHighlightStyle : lightHighlightStyle)) |
| 205 | }); |
| 206 | } |
| 207 | }); |
| 208 | } |
| 209 | |
| 210 | onunload() { |
| 211 | if (this.themeEventRef) { |